/* Miru · formulario de Contacto adaptado al Contrato del export Prisma (Nexo).
   Nexo envía el formulario y pinta sus estados; este archivo solo decide cómo se ven.

   1. Estructura: nada de esto cambia el aspecto del diseño.
   2. Estados de Nexo: PROPUESTA de diseño con el vocabulario del propio Miru: el punto de
      estado de color («● GRABANDO», los puntos de las pantallas) y la tipografía mono de las
      etiquetas. Pendiente de revisión de Daniel. */

/* ---------- 1. Estructura ---------- */

/* Contenedor de campos que pide el contrato. display: contents: no genera caja y los campos
   siguen siendo hijos directos del flex del <form>, con su gap de 26px. */
[data-nx-form-campos] { display: contents; }

/* Enviado: Nexo pone data-nx-enviado="1" en el <form>. Se ve el mismo bloque «Mensaje
   enviado.» que el diseño ponía en lugar del formulario, y se ocultan los campos. */
form:not([data-nx-enviado="1"]) [data-nx-form-ok] { display: none; }
form[data-nx-enviado="1"] [data-nx-form-campos] { display: none; }
/* tras «Enviar otro mensaje» el aviso de enviado de Nexo ya no toca */
form:not([data-nx-enviado="1"]) .nx-form-msg--ok { display: none; }

/* La zona de avisos no ocupa sitio hasta que Nexo escribe en ella. */
[data-nx-form-message] { margin: 0; }
[data-nx-form-message]:empty { display: none; }

/* Chips de motivo: ahora son <label> con un radio dentro (el motivo llega al correo). Un
   <button> trae del navegador interlineado, peso y alineación propios que un <label> no
   tiene; se le dan los mismos para que el chip mida y se vea exactamente igual. */
label[data-motivo] {
  display: inline-block; box-sizing: border-box; margin: 0;
  font-weight: 400; font-style: normal; line-height: normal;
  text-align: center; text-indent: 0; text-shadow: none; word-spacing: normal;
}
/* el radio no se ve ni ocupa sitio, pero sigue en el teclado y en el envío */
label[data-motivo] > input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
/* el foco de teclado se ve en el chip, como se veía en el botón */
label[data-motivo]:has(> input:focus-visible) { outline: -webkit-focus-ring-color auto 1px; }

/* La flecha del botón, en CSS para que el botón solo lleve texto (Nexo lo reescribe).
   Mismos estilos que tenía el <span>→</span> del diseño; el gap de 14px del botón la separa. */
button[data-flecha]::after { content: "→"; font-family: 'IBM Plex Mono', monospace; font-size: 15px; }

/* ---------- 2. Estados de Nexo (propuesta) ---------- */

/* Avisos: mono como «RESPUESTA EN MENOS DE 24 H LABORABLES», con el punto de estado.
   El rojo de la paleta (#F26D5B) no llega al contraste AA en texto pequeño (≈3:1): va en el
   punto y en el borde, y el texto en tinta. */
.nx-form-msg { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; color: #57534A; }
.nx-form-msg::before { content: "● "; }
.nx-form-msg--enviando::before { color: #F2C14E; }
.nx-form-msg--ok::before { color: #6DBE7E; }
.nx-form-msg--error { color: #16130F; }
.nx-form-msg--error::before { color: #F26D5B; }

/* Campo con error: el filete pasa al rojo, también con el foco puesto (que es rosa). */
[data-hf="1"][aria-invalid="true"],
[data-hf="1"][aria-invalid="true"]:focus { border-bottom-color: #F26D5B !important; }
[data-hf="2"][aria-invalid="true"],
[data-hf="2"][aria-invalid="true"]:focus { border-color: #F26D5B !important; }
input[type="checkbox"][aria-invalid="true"] { outline: 1px solid #F26D5B; outline-offset: 2px; }

/* Motivo del error, debajo del campo: con la medida de las etiquetas mono del formulario. */
.nx-form-error { display: block; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; line-height: 1.5; color: #16130F; }
.nx-form-error::before { content: "● "; color: #F26D5B; }

/* Botón mientras envía: apagado, sin flecha y sin reaccionar al hover. */
button[type="submit"]:disabled { opacity: .5; cursor: default; pointer-events: none; }
button[type="submit"]:disabled::after { content: none; }