/* ════════════════════════════════════════════════
   CIMA DIGITAL · Mini-Audit → WhatsApp
   ──────────────────────────────────────────────
   El formulario del Mini-Audit en las 14 páginas que lo tienen. Hereda del
   .ma-form de cada página (la grilla de campos, los inputs, el botón) y solo
   agrega lo suyo: los grupos de chips, la pista del Instagram, el aviso de
   campo sin responder y el estado de éxito con el mensaje ya escrito.

   Los selectores van con dos clases (.ma-form .ma-chip) a propósito: el
   .ma-form label de cada página es rótulo en mono y mayúsculas, y un chip no
   es eso. Con dos clases gana sin importar el orden de las hojas de estilo.

   Colores: siempre las variables del modo (--tx-rgb, --tx-mas, --ac-t), así
   funciona igual en claro y en oscuro sin una sola regla duplicada.
   ════════════════════════════════════════════════ */

/* ── Bloque de pregunta ── */
.ma-form .ma-bloque { margin: 0 0 18px; text-align: left; }
.ma-form .ma-rot {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.65 + var(--tx-mas, 0)));
  margin: 0 0 9px;
}

/* ── Chips ──
   La casilla real queda encima del chip, transparente y del mismo tamaño: el
   teclado la enfoca, el lector de pantalla la anuncia y el dedo la toca, pero
   lo que se ve es el <span>. Nada de display:none, que la sacaría del foco. */
.ma-form .ma-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-form .ma-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.ma-form .ma-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.ma-form .ma-chip span {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tx-rgb, 26, 31, 26), calc(.38 + var(--tx-mas, 0)));
  background: rgba(var(--tx-rgb, 26, 31, 26), .06);
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.82 + var(--tx-mas, 0)));
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  .ma-form .ma-chip:hover span { border-color: rgba(var(--tx-rgb, 26, 31, 26), calc(.45 + var(--tx-mas, 0))); background: rgba(var(--tx-rgb, 26, 31, 26), .11); }
}
/* El texto del chip elegido va en --tx-inv, que es justo lo contrario del
   fondo de la página: tinta en oscuro sobre el terracota claro (#D4784A →
   5,25:1) y papel en claro sobre el terracota oscuro (#A8492A → 5,02:1). Las
   dos pasan AA sin una sola regla por modo. Con --papel fijo el modo oscuro
   daba 2,78:1 y reprobaba. */
.ma-form .ma-chip input:checked + span {
  border-color: var(--ac-t, #C45E3A);
  background: var(--ac-t, #C45E3A);
  color: var(--tx-inv, #F5EFE3);
  font-weight: 600;
}
.ma-form .ma-chip input:focus-visible + span { outline: 2px solid var(--ac-t, #C45E3A); outline-offset: 2px; }

/* El tilde del chip elegido: el color solo no alcanza como señal. */
.ma-form .ma-chip input:checked + span::before { content: '✓ '; }

/* ── Campos de texto ── */
.ma-form .ma-campos .ma-ancho { grid-column: 1 / -1; }
.ma-form .ma-pista {
  display: block;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.55 + var(--tx-mas, 0)));
  margin: 6px 0 0;
}
.ma-form .ma-otro { margin-top: 10px; }

/* ── Falta responder ── */
.ma-form .ma-falta .ma-chip span { border-color: rgba(var(--tx-rgb, 26, 31, 26), calc(.5 + var(--tx-mas, 0))); }
.ma-form .ma-aviso {
  font-family: var(--sans, sans-serif);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ac-t, #C45E3A);
  margin: 8px 0 0;
}

/* ── Aviso de privacidad del formulario ── */
.ma-form .ma-priv {
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.52 + var(--tx-mas, 0)));
  margin: 14px 0 0;
  text-align: center;
}
.ma-form .ma-priv a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ma-form .ma-priv a:hover { color: var(--ac-t, #C45E3A); }

/* ── Estado de éxito ──
   El mensaje quedó escrito en su WhatsApp, pero todavía no salió. Eso es lo
   que dice esta tarjeta, y por eso ofrece volver a abrirlo y copiarlo. */
.ma-form .ma-wsp-ok { text-align: left; }
.ma-form .ma-wsp-ok .ma-ok-tit {
  font-family: var(--serif, Georgia, serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tx);
  margin: 0 0 8px;
}
.ma-form .ma-wsp-ok .ma-ok-txt {
  font-family: var(--sans, sans-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.72 + var(--tx-mas, 0)));
  margin: 0 0 16px;
}
.ma-form .ma-wsp-ok .ma-ok-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ma-form .ma-wsp-ok .ma-ok-btns .btn { width: auto; flex: 1 1 200px; }
/* El botón del calendario arranca con «hidden». Sin esta regla se vería igual:
   `.btn{display:inline-flex}` de styles.css le gana al [hidden] del navegador.
   Las demás hojas del sitio traen la misma guarda (pagina-v2.css, contacto). */
.ma-form .ma-wsp-ok [hidden] { display: none; }
.ma-form .ma-wsp-ok .ma-ok-pie {
  font-family: var(--sans, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(var(--tx-rgb, 26, 31, 26), calc(.55 + var(--tx-mas, 0)));
  margin: 14px 0 0;
}

/* ── Celular ──
   12 px de relleno dejan el chip en 44 px de alto, que es lo que pide un dedo. */
@media (max-width: 640px) {
  .ma-form .ma-chip span { padding: 12px 15px; font-size: 14.5px; }
  .ma-form .ma-chips { gap: 7px; }
  .ma-form .ma-wsp-ok .ma-ok-btns .btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .ma-form .ma-chip span { padding: 12px 12px; font-size: 14px; }
}
/* Las landings centran todo el .ma-form en el celu (landing-v4.css:131 y :152).
   Los chips son una fila que envuelve, así que centrados quedan escalonados; y
   si se alinean los campos a la izquierda hay que alinear también su rótulo y
   su pista, o el rótulo queda flotando en el medio sobre un campo pegado al
   borde. Acá va todo el formulario a la izquierda, de una. */
@media (max-width: 640px) {
  .ma-form .ma-bloque, .ma-form .ma-rot, .ma-form .ma-aviso { text-align: left; }
  .ma-form .ma-chips { justify-content: flex-start; }
  .ma-form .ma-otro, .ma-form .ma-campos input { text-align: left; }
  .ma-form .ma-campos, .ma-form .ma-campos > div, .ma-form .ma-campos label, .ma-form .ma-pista { text-align: left; }
}