/* Reinicio, tipografía, retícula y utilidades base.
   Fase 2: identidad Steigen aplicada (tipografía, paleta, logo real).
   Sin efectos de vidrio todavía: eso llega en una fase posterior. */

/* Escala tipográfica de "05 · Tokens CSS para implementación".
   No son tokens de marca (esos viven intactos en tokens.css); son la
   traducción de esa escala a variables de tamaño para usar en este archivo. */
:root {
  --steigen-text-12: 12px;
  --steigen-text-14: 14px;
  --steigen-text-16: 16px;
  --steigen-text-18: 18px;
  --steigen-text-24: 24px;
  --steigen-text-32: 32px;
  --steigen-text-44: 44px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--steigen-font-brand);
  font-size: var(--steigen-text-16);
  font-weight: 400;
  line-height: 1.6;
  color: var(--steigen-slate-900);
  background: var(--steigen-canvas);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--steigen-blue-700);
}

/* Título principal (h1): Bold 700, interlineado 1.05-1.15 */
h1 {
  font-size: var(--steigen-text-44);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--steigen-space-2);
}

/* Título de sección (h2, h3): SemiBold 600, interlineado 1.15-1.25 */
h2,
h3 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--steigen-space-2);
}

h2 {
  font-size: var(--steigen-text-24);
}

h3 {
  font-size: var(--steigen-text-18);
}

/* Cuerpo: Regular 400, interlineado 1.5-1.65, ancho de lectura 70-75 caracteres */
p {
  margin: 0 0 var(--steigen-space-4);
  max-width: 72ch;
  font-weight: 400;
  line-height: 1.6;
}

ul {
  margin: 0;
  padding: 0;
}

/* Utilidades de espaciado sobre la retícula de 4 px */
.u-mt-1 { margin-top: var(--steigen-space-1); }
.u-mt-2 { margin-top: var(--steigen-space-2); }
.u-mt-3 { margin-top: var(--steigen-space-3); }
.u-mt-4 { margin-top: var(--steigen-space-4); }
.u-mt-6 { margin-top: var(--steigen-space-6); }
.u-mt-8 { margin-top: var(--steigen-space-8); }
.u-mt-12 { margin-top: var(--steigen-space-12); }
.u-mt-16 { margin-top: var(--steigen-space-16); }

.u-mb-1 { margin-bottom: var(--steigen-space-1); }
.u-mb-2 { margin-bottom: var(--steigen-space-2); }
.u-mb-3 { margin-bottom: var(--steigen-space-3); }
.u-mb-4 { margin-bottom: var(--steigen-space-4); }
.u-mb-6 { margin-bottom: var(--steigen-space-6); }
.u-mb-8 { margin-bottom: var(--steigen-space-8); }
.u-mb-12 { margin-bottom: var(--steigen-space-12); }
.u-mb-16 { margin-bottom: var(--steigen-space-16); }

.u-p-1 { padding: var(--steigen-space-1); }
.u-p-2 { padding: var(--steigen-space-2); }
.u-p-3 { padding: var(--steigen-space-3); }
.u-p-4 { padding: var(--steigen-space-4); }
.u-p-6 { padding: var(--steigen-space-6); }
.u-p-8 { padding: var(--steigen-space-8); }

.u-gap-1 { gap: var(--steigen-space-1); }
.u-gap-2 { gap: var(--steigen-space-2); }
.u-gap-3 { gap: var(--steigen-space-3); }
.u-gap-4 { gap: var(--steigen-space-4); }
.u-gap-6 { gap: var(--steigen-space-6); }
.u-gap-8 { gap: var(--steigen-space-8); }

/* Anillo de foco de marca. :focus cubre navegadores sin soporte de
   :focus-visible; donde sí hay soporte, :focus-visible decide cuándo se
   muestra (teclado sí, click de mouse no) y :focus:not(:focus-visible) lo
   oculta en ese caso. */
:focus {
  outline: 3px solid var(--steigen-cyan-200);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--steigen-cyan-200);
  outline-offset: 2px;
}

/* Enlace de salto, visible solo al recibir foco de teclado */
.saltar-enlace {
  position: absolute;
  left: var(--steigen-space-2);
  top: -100px;
  background: var(--steigen-white);
  color: var(--steigen-slate-900);
  padding: var(--steigen-space-2) var(--steigen-space-4);
  border-radius: var(--steigen-radius-sm);
  z-index: 10;
  transition: top 0.15s ease;
}

.saltar-enlace:focus {
  top: var(--steigen-space-2);
}

/* Encabezado.
   Fondo claro (no degradado institucional): todavía no tenemos la variante
   del logo para fondo oscuro, y aplicar el degradado con el logo actual
   rompería el contraste. Excepción registrada en docs/registro-decisiones.md;
   se revierte apenas esté la variante oficial "F OSCURO". */
.encabezado {
  padding: var(--steigen-space-8) var(--steigen-space-6) var(--steigen-space-6);
  max-width: 1120px;
  margin: 0 auto;
}

.encabezado__marca {
  display: flex;
  align-items: center;
  gap: var(--steigen-space-4);
  margin-bottom: var(--steigen-space-4);
}

.encabezado__logo {
  height: 56px;
  width: auto;
  flex-shrink: 0;
}

/* Sin esto, el min-width automático de un flex item usa el ancho del texto
   como piso y no lo deja encoger: "Steigen" terminaba desbordando el
   viewport en 320px en vez de ajustar el salto de línea. */
.encabezado__titulos {
  min-width: 0;
}

/* H1 más chico en el ancho más angosto: 44px es demasiado grande junto al
   logo en 320px. Usa la escala aprobada (--steigen-text-32), no un valor
   intermedio inventado. */
@media (max-width: 479px) {
  .encabezado__titulos h1 {
    font-size: var(--steigen-text-32);
  }
}

.encabezado__eyebrow {
  margin: 0 0 var(--steigen-space-1);
  font-size: var(--steigen-text-14);
  font-weight: 600;
  color: var(--steigen-blue-700);
}

.encabezado__subtitulo {
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-18);
}

.encabezado__estado {
  font-size: var(--steigen-text-14);
  color: var(--steigen-slate-900);
  margin-bottom: var(--steigen-space-4);
}

.encabezado__nav ul {
  list-style: none;
  display: flex;
  gap: var(--steigen-space-6);
}

.encabezado__nav a {
  font-weight: 600;
  text-decoration: none;
  padding: var(--steigen-space-2) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.encabezado__nav a:hover {
  text-decoration: underline;
}

/* Secciones principales */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--steigen-space-6) var(--steigen-space-12);
}

/* Jerarquía obligatoria: la sección de herramientas domina la primera
   pantalla, sin necesidad de desplazarse.
   --alto-encabezado-aprox es una aproximación del alto real del encabezado,
   medida con Playwright en los 5 anchos de validación (320/390/768/1024/1440)
   con el logo y la tipografía de la Fase 2 ya aplicados, más un margen de
   ~8px. Un min-height con flex-grow encadenado a través de <main> no sirve
   acá: la vitrina es mucho más alta que una pantalla y "gana" todo el
   espacio disponible, dejando a las tarjetas sin crecer. Por eso el cálculo
   depende del viewport y de este alto medido, no del resto del contenido.
   Reajustar si cambia el contenido del encabezado (por ejemplo, al sumar el
   degradado institucional con el logo de fondo oscuro). */
:root {
  --alto-encabezado-aprox: 425px;
}

@media (min-width: 480px) {
  :root {
    --alto-encabezado-aprox: 396px;
  }
}

@media (min-width: 768px) {
  :root {
    --alto-encabezado-aprox: 320px;
  }
}

@media (min-width: 1024px) {
  :root {
    --alto-encabezado-aprox: 290px;
  }
}

.seccion-herramientas {
  min-height: calc(100vh - var(--alto-encabezado-aprox));
  min-height: calc(100dvh - var(--alto-encabezado-aprox));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--steigen-space-8);
  padding-bottom: var(--steigen-space-8);
}

.tarjetas-herramientas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--steigen-space-6);
  margin-top: var(--steigen-space-6);
}

.tarjeta-herramienta {
  border: 1px solid var(--steigen-slate-300);
  border-radius: var(--steigen-radius);
  background: var(--steigen-white);
  box-shadow: var(--steigen-shadow);
  height: 100%;
}

.tarjeta-herramienta__enlace {
  display: flex;
  flex-direction: column;
  gap: var(--steigen-space-2);
  padding: var(--steigen-space-6);
  height: 100%;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}

.tarjeta-herramienta__enlace:hover {
  text-decoration: none;
  border-color: var(--steigen-blue-500);
}

.tarjeta-herramienta__icono {
  color: var(--steigen-blue-700);
  width: 32px;
  height: 32px;
}

.tarjeta-herramienta__titulo {
  margin: 0;
  font-size: var(--steigen-text-18);
}

.tarjeta-herramienta__descripcion {
  margin: 0;
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-14);
}

.tarjeta-herramienta__cta {
  margin-top: auto;
  font-weight: 600;
  color: var(--steigen-blue-700);
}

/* Vitrina interna: bloque secundario, tipografía y superficies más discretas */
.seccion-vitrina {
  padding-top: var(--steigen-space-8);
  border-top: 1px solid var(--steigen-slate-300);
}

.vitrina-intro {
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-14);
}

.coleccion {
  margin-top: var(--steigen-space-8);
}

.coleccion__titulo {
  font-size: var(--steigen-text-16);
}

.coleccion__contador {
  font-weight: 400;
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-14);
}

/* Responsive: 1 columna en celular, 2 en tablet, 3-4 en escritorio.
   align-items:start evita que una tarjeta con el detalle abierto estire
   visualmente a sus vecinas de la misma fila. */
.lista-items {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--steigen-space-3);
  margin-top: var(--steigen-space-3);
}

@media (min-width: 768px) {
  .lista-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lista-items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .lista-items {
    grid-template-columns: repeat(4, 1fr);
  }
}

.item-vitrina {
  border: 1px solid var(--steigen-slate-300);
  border-radius: var(--steigen-radius-sm);
  background: var(--steigen-white);
  font-size: var(--steigen-text-14);
}

/* El resumen es un <button> real: todo el item se abre/cierra con teclado
   (Enter/Espacio) además de mouse, sin cambiar de contexto. */
.item-vitrina__resumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--steigen-space-1) var(--steigen-space-3);
  width: 100%;
  padding: var(--steigen-space-4);
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.item-vitrina__titulo {
  font-weight: 600;
  color: var(--steigen-slate-900);
  margin-right: auto;
}

.item-vitrina__pildoras {
  display: inline-flex;
  gap: var(--steigen-space-1);
  flex-wrap: wrap;
}

.pildora {
  display: inline-block;
  font-size: var(--steigen-text-12);
  font-weight: 600;
  padding: 2px var(--steigen-space-2);
  border-radius: 999px;
  white-space: nowrap;
}

.item-vitrina__fecha {
  font-size: var(--steigen-text-12);
  flex-shrink: 0;
}

.item-vitrina__flecha {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 150ms ease;
}

.item-vitrina__resumen[aria-expanded="true"] .item-vitrina__flecha {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .item-vitrina__flecha {
    transition: none;
  }
}

/* Acordeón del detalle con la técnica grid-template-rows: 0fr -> 1fr.
   Evita animar "height" directamente (layout thrashing) y funciona con
   contenido de alto variable sin medir nada en JS. */
.item-vitrina__detalle-envoltura {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.item-vitrina__detalle-envoltura[hidden] {
  display: none;
}

.item-vitrina__detalle-envoltura--abierta {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .item-vitrina__detalle-envoltura {
    transition: none;
  }
}

.item-vitrina__detalle {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--steigen-space-4) var(--steigen-space-4);
}

.item-vitrina__responsable {
  margin: 0 0 var(--steigen-space-2);
  color: var(--steigen-slate-900);
}

.item-vitrina__nota {
  margin: 0 0 var(--steigen-space-2);
  color: var(--steigen-slate-900);
  font-style: italic;
}

/* Es un link de acción independiente (no texto corrido), así que cumple el
   área táctil mínima de 44x44 igual que un botón. */
.item-vitrina__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Barra de controles de la vitrina: filtros combinables + buscador.
   Bloque secundario también: tipografía chica, sin competir con las
   tarjetas de acceso. */
.vitrina-controles {
  display: flex;
  flex-direction: column;
  gap: var(--steigen-space-4);
  padding: var(--steigen-space-4);
  border-radius: var(--steigen-radius);
  margin-top: var(--steigen-space-6);
  font-size: var(--steigen-text-14);
}

.vitrina-controles__buscador {
  display: flex;
  flex-direction: column;
  gap: var(--steigen-space-1);
}

.vitrina-controles__buscador label {
  font-weight: 600;
}

.vitrina-controles__buscador input {
  font: inherit;
  padding: var(--steigen-space-2) var(--steigen-space-3);
  border-radius: var(--steigen-radius-sm);
  border: 1px solid var(--steigen-slate-300);
  min-height: 44px;
}

.vitrina-controles__grupo {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--steigen-space-2);
}

.vitrina-controles__grupo legend {
  font-weight: 600;
  padding: 0;
  margin-right: var(--steigen-space-2);
}

.vitrina-controles__grupo label {
  display: inline-flex;
  align-items: center;
  gap: var(--steigen-space-1);
  padding: var(--steigen-space-1) var(--steigen-space-3);
  border-radius: 999px;
  border: 1px solid var(--steigen-slate-300);
  cursor: pointer;
  min-height: 44px;
}

/* El checkbox real sigue en el DOM y en el orden de tabulación (foco
   visible propio); solo se lo achica visualmente para que la píldora
   completa sea el área de click/toque. */
.vitrina-controles__grupo input {
  width: 14px;
  height: 14px;
}

.vitrina-controles__resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--steigen-space-2);
}

.vitrina-controles__limpiar {
  font: inherit;
  font-weight: 600;
  padding: var(--steigen-space-2) var(--steigen-space-3);
  border-radius: var(--steigen-radius-sm);
  border: 1px solid var(--steigen-slate-300);
  background: none;
  cursor: pointer;
  min-height: 44px;
}

.estado-vacio--filtros {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--steigen-space-3);
  padding: var(--steigen-space-6);
  border-radius: var(--steigen-radius);
  margin-top: var(--steigen-space-4);
}

/* Estados de carga, vacío y error */
.estado-carga,
.estado-vacio,
.estado-error {
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-14);
}

.estado-error {
  color: var(--steigen-danger);
}

/* Advertencia con icono + texto: el color de advertencia por sí solo no
   llega a 4.5:1 en texto chico sobre estos fondos, así que el texto queda en
   tinta (slate-900) y el color de advertencia se reserva para el icono. */
.aviso-omitidos {
  margin-top: var(--steigen-space-2);
  font-size: var(--steigen-text-12);
  color: var(--steigen-slate-900);
  display: flex;
  align-items: center;
  gap: var(--steigen-space-1);
}

.aviso-omitidos::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: var(--steigen-warning);
  -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%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.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%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pie */
.pie {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--steigen-space-6);
  color: var(--steigen-slate-900);
  font-size: var(--steigen-text-14);
}

.pie a {
  color: var(--steigen-blue-700);
}

/* Respeto de reducción de movimiento (sin animaciones todavía en esta fase) */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}