/* ============================================================================
   NAOS · Componentes del sitio público

   Es un recorte del archivo de componentes de la consola: aquí viven solo los
   que el sitio usa de verdad. La consola tiene alertas, tablas, píldoras de
   severidad y estados de frescura — nada de eso aparece en una portada, y
   arrastrarlo aquí serían quince kilobytes que nadie descarga por gusto.

   Lo que sí está, está COPIADO TAL CUAL de la consola a propósito: un botón
   tiene que verse igual antes y después de entrar. Si algo cambia allá, se
   cambia aquí; y si se separan, se nota a simple vista en la pantalla de acceso.

   Todos los valores salen de naos-tokens.css. Ninguno suelto.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Botón — el primario es TINTA, no la marca. El rojo se reserva para lo que de
   verdad es crítico; en el sitio público solo manda sobre el campo rojo, y para
   eso están los botones «onbrand» de naos-publico.css.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--action); color: var(--action-contrast); }
.btn--primary:hover:not(:disabled) { background: var(--action-hover); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-3); }

/* En móvil todo control cumple el objetivo táctil mínimo. */
@media (max-width: 48rem) { .btn { min-height: var(--tap-min); } }

/* ---------------------------------------------------------------------------
   Tarjeta
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Campos de formulario

   La etiqueta va SIEMPRE visible y encima del campo. El texto dentro del campo
   («Tu nombre») desaparece al escribir: quien vuelve a revisar el formulario ya
   no sabe qué iba en cada casilla, y quien usa un lector de pantalla nunca lo
   supo. Un marcador de posición no es una etiqueta.
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label {
  font-size: var(--text-caption); color: var(--ink-muted);
  font-weight: var(--weight-semibold);
}
.field input,
.field select,
.field textarea {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  width: 100%;
}
/* Se redimensiona a lo alto, nunca a lo ancho: arrastrarlo de lado rompe la
   composición de la columna. */
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }

/* El campo con error se marca por BORDE Y TEXTO, no solo por color: quien no
   distingue el rojo del gris tiene que poder saber cuál falló. */
.field[data-error="true"] input,
.field[data-error="true"] select,
.field[data-error="true"] textarea { border-color: var(--sev-critical); }

.ayuda { font-size: var(--text-caption); color: var(--ink-muted); }

/* `margin: 0` no es adorno: el mensaje va dentro de un <p>, y el margen que el navegador le
   pone por omisión lo separaba del campo lo suficiente como para que pareciera de otro. Un
   error que no se ve pegado a su casilla obliga a adivinar cuál falló. */
.error { margin: 0; color: var(--sev-critical); font-size: var(--text-small); }
/* El aspa hace que el mensaje se lea como un fallo aunque el color no llegue. */
.field .error::before { content: "✕ "; font-weight: var(--weight-bold); }

/* Un borde rojo no se ve en una casilla: el navegador dibuja ese control a su manera y casi
   siempre ignora el `border-color`. Con un contorno alrededor sí se nota. */
.field[data-error="true"] .check input {
  outline: 2px solid var(--sev-critical); outline-offset: 2px;
}

/* Casilla de consentimiento: el cuadro no se estira con la fila de texto. */
.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check input { width: 1.15rem; height: 1.15rem; min-height: 0; flex: none; margin-top: .15rem; }
.check label { font-size: var(--text-small); color: var(--ink-muted); font-weight: var(--weight-regular); }

/* ---------------------------------------------------------------------------
   Utilidades — el mínimo para NO escribir estilos en línea.

   No es pulcritud: la política de seguridad del sitio es `default-src 'self'`
   sin `unsafe-inline`, y bajo esa regla el navegador IGNORA cualquier atributo
   `style="…"`. Un estilo en línea aquí no es una mala costumbre — simplemente
   no se aplica.
   --------------------------------------------------------------------------- */
.t-sm  { font-size: var(--text-small); }
.t-cap { font-size: var(--text-caption); }

.lede  { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.stack-block { display: block; color: var(--ink); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Marca
   --------------------------------------------------------------------------- */
.brandmark {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 800; letter-spacing: .16em; font-size: var(--text-small); flex: none;
}

/* El isotipo se pinta por MÁSCARA y no como <img>: así toma --brand y cambia
   solo entre tema claro y oscuro (#b3182c / #ef5c68) sin tener dos archivos que
   mantener. Su mínimo legible declarado en el manual es 16 px. */
.brandmark i {
  width: 16px; height: 16px; background: var(--brand); flex: none;
  -webkit-mask: url("/brand/isotipo.svg") center / contain no-repeat;
          mask: url("/brand/isotipo.svg") center / contain no-repeat;
}