/* Capa de vidrio, elevaciones y respaldos sólidos — Fase 3.
   Todo en tokens de tokens.css. Nada de violetas, neones ni colores ajenos.

   Nota de contraste (medida, no a ojo): el degradado institucional recorre
   #1F3947 -> #406A80 -> #5995B2. Sobre su extremo más claro, un relleno de
   vidrio blanco puro al 6-12% (el rango "de catálogo") deja el texto blanco
   en ~2.9:1 y el texto tinta en ~4.5:1 — ninguno de los dos sostiene AA en
   todo el degradado de forma confiable. Por eso cada superficie de vidrio
   lleva primero una capa de "scrim" en --steigen-blue-900 al 55% (neutraliza
   la zona clara del degradado) y recién arriba el relleno blanco del 6-12%
   que pide la documentación. Verificado con cálculo de contraste real: en el
   peor punto del degradado el texto blanco queda en ~5.2:1, en el mejor en
   ~8.9:1. Es la superficie "opacada" que exige la sección 5.3 cuando el
   vidrio compromete la lectura — sigue siendo vidrio (blur, brillo, borde),
   pero no vidrio ingenuo. */

/* 1 · Fondo: degradado institucional + dos manchas de luz, fijo al viewport
   (no se mueve con el scroll, así el cálculo de contraste de arriba vale en
   toda la página, no solo en la primera pantalla). Sin imágenes pesadas. */
body {
  position: relative;
  color: var(--steigen-white);
  background: var(--steigen-blue-900);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
      780px 620px at 12% -8%,
      rgba(128, 212, 255, 0.20),
      transparent 60%
    ),
    radial-gradient(
      820px 680px at 92% 18%,
      rgba(89, 149, 178, 0.24),
      transparent 60%
    ),
    var(--steigen-gradient);
}

a {
  color: var(--steigen-white);
}

/* 2 · Superficie de vidrio base: scrim + relleno + blur + borde + brillo. */
.vidrio {
  --vidrio-scrim: rgba(31, 57, 71, 0.55);
  --vidrio-relleno: rgba(255, 255, 255, 0.1);
  background: linear-gradient(var(--vidrio-relleno), var(--vidrio-relleno)),
    var(--vidrio-scrim);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 38px rgba(31, 57, 71, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 200ms ease, border-color 200ms ease,
    box-shadow 200ms ease, background 200ms ease;
}

/* Respaldo sólido: navegadores sin backdrop-filter no pueden "ver a través",
   así que la superficie pasa a un color sólido derivado de la paleta, con
   la misma jerarquía (radio, sombra, borde) y el mismo texto blanco. */
@supports not (backdrop-filter: blur(1px)) {
  .vidrio {
    background: var(--steigen-blue-700);
    border-color: var(--steigen-blue-600);
  }

  .item-vitrina.vidrio {
    background: var(--steigen-blue-900);
    border-color: var(--steigen-blue-700);
  }
}

/* 3 · Encabezado: logo sobre contenedor blanco (obligatorio con fondo
   oscuro), resto del texto en blanco/cian sobre el degradado directo. */
.encabezado__logo-chip {
  background: var(--steigen-white);
  border-radius: var(--steigen-radius-sm);
  padding: var(--steigen-space-2) var(--steigen-space-3);
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 20px rgba(31, 57, 71, 0.35);
  flex-shrink: 0;
}

.encabezado__eyebrow {
  color: var(--steigen-cyan-200);
}

.encabezado__subtitulo,
.encabezado__estado {
  color: var(--steigen-white);
}

.encabezado__estado {
  opacity: 0.82;
}

/* Nav flotante en vidrio (patrón "floating dock" de 21st.dev, reescrito con
   tokens Steigen: nada de sus colores, solo la técnica de capa flotante). */
.encabezado__nav {
  display: inline-flex;
}

.encabezado__nav ul {
  padding: var(--steigen-space-2) var(--steigen-space-4);
  border-radius: var(--steigen-radius-lg);
}

.encabezado__nav a {
  color: var(--steigen-white);
}

.encabezado__nav a:hover {
  color: var(--steigen-cyan-200);
}

/* 4 · Tarjetas de acceso: la superficie de vidrio más prominente. */
.tarjeta-herramienta {
  border-radius: var(--steigen-radius);
}

.tarjeta-herramienta__icono {
  color: var(--steigen-cyan-200);
}

.tarjeta-herramienta__titulo,
.tarjeta-herramienta__descripcion {
  color: var(--steigen-white);
}

.tarjeta-herramienta__descripcion {
  opacity: 0.86;
}

.tarjeta-herramienta__cta {
  color: var(--steigen-white);
  font-weight: 700;
}

/* Reposo -> hover -> activo. Elevación por capas, no por saturación. */
.tarjeta-herramienta:hover {
  transform: translateY(-4px);
  border-color: rgba(128, 212, 255, 0.55);
  box-shadow: 0 20px 48px rgba(31, 57, 71, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tarjeta-herramienta:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31, 57, 71, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 5 · Vitrina interna: mismo vidrio, menor peso (más chico, sin elevación
   fuerte en reposo, sombra y blur más discretos) para que siga siendo
   secundaria frente a las tarjetas de acceso. */
.item-vitrina {
  border-radius: var(--steigen-radius-sm);
}

.item-vitrina.vidrio {
  --vidrio-relleno: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px rgba(31, 57, 71, 0.3);
}

.item-vitrina:hover {
  transform: translateY(-2px);
  border-color: rgba(128, 212, 255, 0.4);
}

.item-vitrina:active {
  transform: translateY(0);
}

.item-vitrina__titulo,
.item-vitrina__fecha,
.item-vitrina__responsable,
.item-vitrina__nota {
  color: var(--steigen-white);
}

.item-vitrina__fecha {
  opacity: 0.75;
}

.item-vitrina__nota {
  opacity: 0.8;
}

/* El icono es decorativo/gráfico (umbral 3:1): cyan-200 mide 3.15:1 en el
   peor punto del degradado, pasa. El título es texto de lectura (umbral
   4.5:1): en ese mismo peor punto cyan-200 da 3.15:1 y NO pasa, por eso NO
   cambia de color en hover — la elevación y el borde de .item-vitrina:hover
   (glass.css, sección 5) ya dan la señal de interactividad. */
.item-vitrina__flecha {
  color: var(--steigen-cyan-200);
}

.item-vitrina__enlace {
  color: var(--steigen-white);
  font-weight: 700;
}

/* Píldoras: siempre sólidas y opacas (nunca dependen del vidrio de abajo),
   así el contraste es el mismo sin importar dónde caigan en el degradado.
   Blanco + tinta o blanco + azul-900 mide entre 11:1 y 12.8:1. El tipo se
   distingue por el borde, no por inventar un color nuevo por valor. */
.pildora {
  background: var(--steigen-white);
}

.pildora--area {
  color: var(--steigen-blue-900);
  border: 1px solid var(--steigen-blue-500);
}

.pildora--estado {
  color: var(--steigen-slate-900);
  border: 1px solid var(--steigen-cyan-200);
}

.pildora--destacado {
  background: var(--steigen-cyan-200);
  color: var(--steigen-blue-900);
}

.coleccion__titulo,
.vitrina-intro {
  color: var(--steigen-white);
}

.coleccion__contador {
  color: var(--steigen-white);
  opacity: 0.7;
}

/* Barra de controles de la vitrina: mismo vidrio que el resto (clase
   .vidrio en el HTML), acá solo el color de los textos y los estados de
   los controles. */
.vitrina-controles__buscador label,
.vitrina-controles__grupo legend,
.vitrina-controles__resultado p {
  color: var(--steigen-white);
}

.vitrina-controles__buscador input {
  background: rgba(255, 255, 255, 0.9);
  color: var(--steigen-slate-900);
  border-color: rgba(255, 255, 255, 0.3);
}

.vitrina-controles__buscador input::placeholder {
  color: var(--steigen-slate-600);
}

/* Sin relleno propio: sumar otra capa de blanco encima del vidrio del
   contenedor padre lo aclara y baja el contraste del texto blanco por
   debajo de 4.5:1 en la zona más clara del degradado (medido: 4.40:1 con
   +8%). Con solo el borde, hereda el fondo del padre (ya validado en
   5.17:1 en esa misma zona). */
.vitrina-controles__grupo label {
  color: var(--steigen-white);
  border-color: rgba(255, 255, 255, 0.3);
  transition: border-color 150ms ease;
}

.vitrina-controles__grupo label:hover {
  border-color: rgba(128, 212, 255, 0.5);
}

.vitrina-controles__grupo label:has(:checked) {
  background: var(--steigen-cyan-200);
  color: var(--steigen-blue-900);
  border-color: var(--steigen-cyan-200);
}

.vitrina-controles__limpiar {
  color: var(--steigen-white);
  border-color: rgba(255, 255, 255, 0.3);
}

.vitrina-controles__limpiar:hover {
  border-color: rgba(128, 212, 255, 0.5);
}

.estado-vacio--filtros {
  color: var(--steigen-white);
}

/* 6 · Estados funcionales: siempre texto + icono, nunca el color de estado
   solo como texto (el color de estado, medido, no sostiene AA ni sobre el
   degradado ni sobre el vidrio). El icono lleva el color; el texto queda en
   blanco, envuelto en una píldora de vidrio liviana para legibilidad
   garantizada sin importar dónde caiga en el degradado. */
.estado-carga,
.estado-vacio,
.estado-error,
.aviso-omitidos {
  display: inline-flex;
  align-items: center;
  gap: var(--steigen-space-2);
  color: var(--steigen-white);
  background: linear-gradient(
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.08)
    ),
    rgba(31, 57, 71, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--steigen-radius-sm);
  padding: var(--steigen-space-2) var(--steigen-space-3);
}

@supports not (backdrop-filter: blur(1px)) {
  .estado-carga,
  .estado-vacio,
  .estado-error,
  .aviso-omitidos {
    background: var(--steigen-blue-700);
  }
}

.estado-error::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--steigen-danger);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* aviso-omitidos ya trae su propio ::before (icono de advertencia) desde
   base.css; acá solo se ajustan color de fondo/texto para el tema oscuro,
   heredados de la regla combinada de arriba. */

/* 7 · Pie.
   Va directo sobre el degradado (no está dentro de una tarjeta), y medí
   que el texto blanco ahí solo no pasaba 4.5:1 en la zona más clara del
   degradado (3.45:1 muestreado en la esquina inferior derecha a 1440px,
   con el 75% de opacidad que tenía antes). Mismo scrim que el resto del
   sitio (55% blue-900, sin relleno blanco esta vez) y sin atenuar el
   texto: 6.59:1 en el peor caso, 12.11:1 en el mejor. */
.pie {
  color: var(--steigen-white);
  background: rgba(31, 57, 71, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--steigen-radius);
  margin-top: var(--steigen-space-4);
  margin-bottom: var(--steigen-space-6);
}

.pie a {
  color: var(--steigen-white);
  text-decoration: underline;
}

/* 8 · Foco de teclado: el anillo cian ya definido en base.css se ve bien
   sobre vidrio y sobre el degradado directo (7.4:1 a 3.2:1 según la zona);
   se refuerza con un aro blanco para no depender solo del cian en la
   esquina más clara del degradado. */
:focus-visible {
  outline: 3px solid var(--steigen-cyan-200);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35);
}

/* 9 · Reducción de movimiento: sin transiciones de elevación. */
@media (prefers-reduced-motion: reduce) {
  .vidrio,
  .tarjeta-herramienta,
  .item-vitrina {
    transition: none !important;
  }

  .tarjeta-herramienta:hover,
  .tarjeta-herramienta:active,
  .item-vitrina:hover,
  .item-vitrina:active {
    transform: none;
  }
}