/*
  Los componentes que usan las tres pantallas de la 001: campo de formulario, botón,
  franja de mensaje y menú de usuario.

  NI UN HEXADECIMAL: todo desde tokens.css (Principio 11).
*/

/* ── Campo de formulario ──────────────────────────────────────────────────────── */

.campo { margin-bottom: var(--espacio-4); }

.campo__etiqueta {
  display: block;
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: 600;
  color: var(--texto);
}

.campo__control {
  display: block;
  width: 100%;
  min-height: var(--area-tactil-minima);
  padding: var(--espacio-3);
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: var(--texto-m);
}

.campo__control:hover { border-color: var(--texto-suave); }

/* El error no se señala solo con color: el campo lleva borde reforzado y el texto del
   error va debajo, con su código corto. */
.campo--con-error .campo__control {
  border-color: var(--error);
  border-width: 2px;
}

.campo__ayuda {
  margin: var(--espacio-2) 0 0;
  color: var(--texto-suave);
  font-size: var(--texto-s);
}

.campo__error {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
  margin: var(--espacio-2) 0 0;
  color: var(--error);
  font-size: var(--texto-s);
  font-weight: 500;
}

.campo__codigo {
  flex: none;
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--texto-suave);
}

/* ── Selector ─────────────────────────────────────────────────────────────────── */

.campo__seleccion {
  display: block;
  width: 100%;
  min-height: var(--area-tactil-minima);
  padding: var(--espacio-3);
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: var(--texto-m);
}

/* ── Botón ────────────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--area-tactil-minima);
  min-width: var(--area-tactil-minima);
  padding: var(--espacio-3) var(--espacio-5);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: var(--texto-m);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transicion-corta) ease;
}

.boton:hover { opacity: .9; }

/*
  Como mucho un elemento coral por bloque visual: si una pantalla tiene dos botones
  principales, uno está mal (docs/04_BRANDING_INNOVO.md § Reglas de color).

  **Por qué el rótulo va a 20 px en peso 700.** Blanco sobre coral da 3,51:1 en tema
  claro, por debajo del 4,5:1 que WCAG 2.2 AA exige al texto normal y por encima del 3:1
  que exige al texto grande —18,66 px en negrita o 24 px normal—. Con 20 px y peso 700 el
  botón entra en «texto grande» y cumple AA **sin tocar ni un valor de marca**: el coral
  sigue siendo el de docs/04_BRANDING_INNOVO.md y el texto sobre coral sigue siendo
  blanco, como manda ese mismo documento. En tema oscuro la pareja es texto oscuro sobre
  coral claro y da 6,6:1, así que ahí no hay estrechez. Lo comprueba CA-001-14 con
  `@axe-core/playwright`, no a ojo.
*/
.boton--principal {
  background: var(--acento);
  color: var(--acento-contraste);
  font-size: var(--texto-l);
  font-weight: 700;
}

.boton--discreto {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}

.boton--enlace {
  background: transparent;
  color: var(--texto);
  border-color: transparent;
  padding: var(--espacio-2) var(--espacio-3);
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.boton--enlace:hover { background: var(--fondo-sutil); }

/* ── Franja de mensaje ────────────────────────────────────────────────────────── */

.mensaje {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--radio-control);
  background: var(--fondo-sutil);
}

.mensaje__texto { margin: 0; font-size: var(--texto-s); }

.mensaje__codigo {
  flex: none;
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--texto-suave);
}

/* El coral nunca es color de error: el error tiene su propio token. */
.mensaje--error { border-left-color: var(--error); color: var(--texto); }
.mensaje--aviso { border-left-color: var(--aviso); color: var(--texto); }
.mensaje--exito { border-left-color: var(--exito); color: var(--texto); }

/* ── Menú de usuario ──────────────────────────────────────────────────────────── */
/* Es un <details>: despliega sin JavaScript (CL-001-07). */

.menu-usuario { position: relative; }

.menu-usuario__resumen {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--area-tactil-minima);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  cursor: pointer;
  list-style: none;
}

.menu-usuario__resumen::-webkit-details-marker { display: none; }

.menu-usuario__identidad { display: flex; flex-direction: column; line-height: 1.25; }
.menu-usuario__nombre { font-size: var(--texto-s); font-weight: 600; }
.menu-usuario__rol { font-size: var(--texto-xs); color: var(--texto-suave); }

.menu-usuario__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--espacio-2));
  z-index: 60;
  min-width: 220px;
  padding: var(--espacio-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-2);
}

.menu-usuario__grupo {
  margin: 0 0 var(--espacio-2);
  padding: 0 var(--espacio-3);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.menu-usuario__enlace {
  display: block;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--texto);
  font-size: var(--texto-s);
  text-decoration: none;
}

.menu-usuario__enlace:hover { background: var(--fondo-sutil); }

.menu-usuario__separador {
  margin: var(--espacio-2) 0;
  border: 0;
  border-top: 1px solid var(--borde);
}

/* En móvil el nombre y el rol no caben al lado del logotipo; siguen estando, dentro del
   menú, que es donde el usuario los busca. */
@media (max-width: 767px) {
  .menu-usuario__identidad { display: none; }
  .menu-usuario__panel { min-width: 200px; }
}

/* ── Interruptor de tema ──────────────────────────────────────────────────────── */

.tema { display: flex; gap: var(--espacio-1); padding: var(--espacio-1) var(--espacio-3); }

.tema__opcion {
  flex: 1 1 0;
  min-height: 36px;
  padding: var(--espacio-1) var(--espacio-2);
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: var(--texto-xs);
  cursor: pointer;
}

/* El elegido se distingue por peso y borde, no solo por color. */
.tema__opcion[aria-pressed="true"] {
  color: var(--texto);
  font-weight: 600;
  border-color: var(--acento);
  border-width: 2px;
}

/* ── Pantalla de entrada ──────────────────────────────────────────────────────── */

.acceso { width: 100%; max-width: 420px; }
.acceso__marca { margin-bottom: var(--espacio-5); }
.acceso__logotipo { height: 48px; width: auto; color: var(--texto); }
.acceso__titulo { font-size: var(--texto-l); }
.acceso__formulario .boton { width: 100%; }

/* ── Estado vacío ─────────────────────────────────────────────────────────────── */

.estado-vacio {
  max-width: var(--ancho-lectura);
  padding: var(--espacio-7) var(--espacio-5);
  background: var(--fondo-sutil);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}

.estado-vacio__titulo { font-size: var(--texto-l); margin-bottom: var(--espacio-3); }
.estado-vacio__explicacion { margin: 0 auto var(--espacio-5); color: var(--texto-suave); }

/* ── Esqueleto de carga ───────────────────────────────────────────────────────── */
/*
  Nada por debajo de 300 ms; entre 300 ms y 2 s, esqueleto con la forma del contenido
  (spec § Interfaz, contracts/esqueleto-de-interfaz.md § 6). El retardo lo da la propia
  animación, no JavaScript.

  No hay que confundirlo con CE-001-07: esto es lo que se pinta MIENTRAS se espera; el
  criterio mide CUÁNTO se espera, y lo comprueba tests/navegador/CE-001-07.spec.ts.
*/

.esqueleto {
  display: block;
  height: 1em;
  margin-bottom: var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--fondo-sutil);
  opacity: 0;
  animation: esqueleto-aparecer var(--transicion-larga) ease 300ms forwards;
}

.esqueleto--titulo { height: 1.8em; width: 40%; }
.esqueleto--linea { width: 100%; }
.esqueleto--linea-corta { width: 60%; }

@keyframes esqueleto-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Pantallas ────────────────────────────────────────────────────────────────── */

.pantalla__titulo { margin-bottom: var(--espacio-5); }

.pantalla__seccion {
  max-width: var(--ancho-lectura);
  margin-bottom: var(--espacio-7);
  padding: var(--espacio-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

.pantalla__seccion-titulo { margin-bottom: var(--espacio-4); }

.formulario-salir { margin-top: var(--espacio-5); }