/* 12-componentes.css
   COMPONENTES QUE EL DICCIONARIO NOMBRABA Y NADIE IMPLEMENTABA.

   POR QUE EXISTE
   --------------
   El DICCIONARIO.md prometia `.titulo`, `.dato`, `.aviso`, `.acordeon`,
   `.lista-enlaces`, `.nav`, `.pie`, `.hero`, `.tabla`, `.metricas`... y el CSS
   no traia ninguna regla. Efecto medido: una pagina podia pasar el verificador
   (los nombres estaban en el diccionario) y salir SIN ESTILO. El verificador
   mira el vocabulario, no que la clase tenga regla; por eso el hueco era
   invisible hasta verlo en pantalla.

   Este archivo cierra el hueco: cada nombre del diccionario tiene su regla.
   Si se agrega un nombre nuevo al diccionario, se implementa aca en el mismo
   cambio; si no, vuelve a prometerse algo que no existe.

   NORMALIZADO: todo sale de tokens (--c-*, --hueco*, --radio*, --t-*). Ningun
   color literal. La variacion (.dato--sube/--baja) lleva COLOR Y SIGNO: el
   color solo no le dice nada a quien no lo distingue.
   ========================================================== */

/* ---------------------------------------------------------------- titulos */
.titulo { font-size: var(--t-xl); line-height: var(--linea-apretada); font-weight: 700; letter-spacing: -0.01em; }
.titulo--grande { font-size: var(--t-3xl); }
.titulo--seccion { font-size: var(--t-2xl); }

/* El rotulo chico en mayusculas */
.etiqueta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* ---------------------------------------------------------------- nav */
/* Dos capas: el FONDO en la barra (a todo el ancho, o su borde no llegaria a
   los cantos) y el CONTENIDO en `.nav__interior`, alineado con `.contenedor`.
   Antes era UNA capa sin relleno: la marca arrancaba en x=0 y el boton terminaba
   en el borde de la pantalla —los dos tocando el canto— y en pantallas anchas el
   contenido se iba a los extremos. Medido: la marca del nav caia 24px a la
   izquierda del texto de abajo; ahora coinciden al pixel. Ver reglas/06. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
}
.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hueco);
  width: 100%;
  max-width: var(--ancho);   /* igual que .contenedor: asi la marca cae al pixel con el texto */
  margin-inline: auto;
  padding: var(--hueco-chico) var(--margen);
  transition: padding var(--t-normal) var(--ease-salida);
}
.nav__marca { font-weight: 700; font-size: var(--t-lg); color: var(--c-texto); }
/* min-width:0 deja que la lista encoja y envuelva SUS enlaces en movil, sin que
   la marca y el boton dejen de caer en los bordes de la caja (regla 7). */
.nav__enlaces { display: flex; align-items: center; gap: var(--hueco); flex-wrap: wrap; min-width: 0; }
.nav__enlaces a { color: var(--c-texto-suave); transition: color var(--t-rapido) var(--ease-salida); }
.nav__enlaces a:hover { color: var(--c-acento); }
/* t6: la nav que se compacta al bajar la pagina (la clase la pone JS) */
.nav--compacta .nav__interior { padding-block: 4px; }

/* ---------------------------------------------------------------- hero */
.hero {
  padding-block: var(--hueco-seccion);
  background: var(--c-fondo-suave);
  text-align: center;
}
.hero .lead { margin-inline: auto; }

/* ---------------------------------------------------------------- aviso */
.aviso {
  padding: var(--hueco);
  border: 1px solid var(--c-borde);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--c-superficie);
  color: var(--c-texto);
}
.aviso--error { border-left-color: var(--c-error); }
.aviso--exito { border-left-color: var(--c-exito); }

/* ---------------------------------------------------------------- separador */
.separador { border: 0; border-top: 1px solid var(--c-borde); margin-block: var(--hueco); }

/* ---------------------------------------------------------------- tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
/* Una tabla ancha en un telefono empujaria la pagina: se desplaza SOLA. */
@media (max-width: 47.999rem) {
  .tabla { display: block; overflow-x: auto; white-space: nowrap; }
}
.tabla th, .tabla td {
  padding: var(--hueco-chico) 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-borde);
}
.tabla th { font-weight: 600; color: var(--c-texto-suave); }
.tabla--compacta th, .tabla--compacta td { padding: 6px 10px; }
/* Las cifras a la derecha y con numeros de ancho fijo: las comas alineadas */
.tabla__cifra { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- datos */
.dato { display: flex; flex-direction: column; gap: 2px; }
.dato .tabla__cifra, .dato > strong { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; }
/* La variacion lleva COLOR Y SIGNO. El signo va en el texto (+1,4 % / -0,8 %). */
.dato--sube { color: var(--c-exito); }
.dato--baja { color: var(--c-error); }

.metricas { display: flex; gap: var(--hueco-grande); flex-wrap: wrap; }
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica strong { font-size: var(--t-3xl); font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------------------------------------------------------------- acordeon */
.acordeon { border: 1px solid var(--c-borde); border-radius: var(--radio); overflow: hidden; }
.acordeon__item { padding: var(--hueco); border-bottom: 1px solid var(--c-borde); }
.acordeon__item:last-child { border-bottom: 0; }
.acordeon__item summary { cursor: pointer; font-weight: 600; }
.acordeon__item[open] summary { color: var(--c-acento); margin-bottom: var(--hueco-chico); }

/* ---------------------------------------------------------------- lista */
.lista-enlaces { display: flex; flex-direction: column; gap: var(--hueco-chico); }
.lista-enlaces a { color: var(--c-texto-suave); transition: color var(--t-rapido) var(--ease-salida); }
.lista-enlaces a:hover { color: var(--c-acento); }

/* ---------------------------------------------------------------- pie */
.pie {
  padding-block: var(--hueco-grande);
  background: var(--c-fondo-suave);
  border-top: 1px solid var(--c-borde);
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}
.pie__columnas { display: grid; gap: var(--hueco-grande); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.pie__legal { margin-top: var(--hueco); padding-top: var(--hueco); border-top: 1px solid var(--c-borde); font-size: var(--t-xs); }

/* ---------------------------------------------------------------- tarjeta destacada */
.tarjeta--destacada { border-color: var(--c-acento); box-shadow: var(--sombra-suave); }

/* ---------------------------------------------------------------- campos (nombres del diccionario) */
.campo__etiqueta { font-size: var(--t-sm); font-weight: 600; }
.campo__entrada { /* el aspecto lo define 05-formularios.css (un solo lugar) */ }
.campo__ayuda { font-size: var(--t-xs); color: var(--c-texto-suave); }
/* ---------------------------------------------------------------- estados */
/* Los estados del diccionario (seccion 4). Se aplican SOLOS, sin cambiar el
   nombre del componente: .tarjeta.es-abierto, .campo.es-error, etc. */
.es-cargando      { opacity: 0.6; cursor: progress; }
.es-deshabilitado { opacity: 0.5; pointer-events: none; }
.es-error         { border-color: var(--c-error); }
.es-activo, .es-seleccionado, .es-abierto { border-color: var(--c-acento); }
/* .es-visible lo define 08-animaciones.css junto con .aparece y .escalonado */
/* Componentes de listado y flujo: el indice, los pasos, los plazos y los
   estados vacios. Son los que faltaban para que una pagina "de verdad" (con
   lista de contenidos, pasos y una tabla de plazos) no tuviera que inventar
   clases. Cierran el mismo hueco que el resto del archivo: estaban en el uso
   y no en el kit. */

/* Indice de contenidos: lista con enlaces y una guia a la izquierda. */
.indice {
  padding: var(--hueco-chico) 0;
  margin-block: var(--hueco);
}
.indice li {
  padding-left: 0.95em;
  position: relative;
  margin-block: 4px;
}
.indice li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  border-radius: var(--radio-pastilla);
  background: var(--c-acento);
}
.indice a {
  color: var(--c-texto-suave);
  transition: color var(--t-rapido) var(--ease-salida);
}
.indice a:hover { color: var(--c-acento); }

/* Pasos numerados. El numero va en un circulo con el acento del tema. */
.pasos { display: flex; flex-direction: column; gap: var(--hueco); }
.paso { display: grid; gap: var(--hueco); align-items: start; }
.paso__num {
  display: grid;
  place-items: center;
  width: 2em; height: 2em;
  border-radius: var(--radio-pastilla);
  background: var(--c-acento);
  color: var(--c-acento-texto);
  font-weight: 700;
  font-size: var(--t-sm);
  flex: none;
}
.paso__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.paso__cuerpo p:last-child { margin-bottom: 0; }

/* Plazos o fechas clave: la cifra manda, la etiqueta acompana. */
.plazo { display: flex; flex-direction: column; gap: 2px; }
.plazo__cifra {
  font-size: var(--t-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Nota al pie de una seccion: texto menor, separado por una linea. */
.nota {
  font-size: var(--t-sm);
  color: var(--c-texto-suave);
  border-top: 1px solid var(--c-borde);
  padding-top: var(--hueco-chico);
  max-width: 70ch;
}

/* Contador (tecnica t4/t6 del catalogo): la cifra que sube sola cuando entra
   en pantalla. La usa el modulo j03, que busca `.cuenta` con `data-hasta`.
   Faltaba en el kit: el JS la buscaba y no existia la clase. */
.cuenta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}