/* ============================================================================
   components.css — equivalente web de .../ui/components/
   ============================================================================

   Cada clase de aquí es el gemelo de un composable de la app y lleva su nombre:

     AppScreen (LazyColumn + padding)  → .app-screen
     AppScreenHeader                   → .app-screen-header
     AppCard                           → .app-card
     AppButton(type = FILLED)          → .app-button
     AppButton(type = TEXT)            → .app-button--text
     Spacer16 / verticalArrangement    → .app-stack

   REGLA DE REUSO (la de CLAUDE.md, portada tal cual): si una página necesita
   algo que no existe aquí, se **extiende este archivo**, no se escribe un
   `style="..."` en el HTML. Un `style` inline en una página es el equivalente
   a un `Button { }` crudo dentro de una pantalla: se rechaza en review.

   Este archivo solo consume tokens de theme.css. Si ves un `#hex` o un `12px`
   suelto aquí abajo, es un bug.
   ============================================================================ */


/* --- Reset mínimo --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, p, ul, ol, figure { margin: 0; padding: 0; }

ul, ol { list-style: none; }


/* --- AppScreen ------------------------------------------------------------
   El contenedor de página: equivale a la `LazyColumn` con
   `contentPadding = PaddingValues(spacing16)` que abre cada pantalla. */
body {
  font-family: var(--font-family);
  background: var(--background-gray);
  color: var(--on-background);
  -webkit-font-smoothing: antialiased;
}

.app-screen {
  max-width: var(--screen-max-width);
  margin: 0 auto;
  padding: var(--spacing-24) var(--spacing-16) var(--spacing-48);
}


/* --- app-stack ------------------------------------------------------------
   `verticalArrangement = Arrangement.spacedBy(...)`. Se usa en vez de poner
   márgenes sueltos a cada hijo, igual que en Compose. */
.app-stack { display: flex; flex-direction: column; }
.app-stack--4  { gap: var(--spacing-4); }
.app-stack--8  { gap: var(--spacing-8); }
.app-stack--12 { gap: var(--spacing-12); }
.app-stack--16 { gap: var(--spacing-16); }
.app-stack--24 { gap: var(--spacing-24); }


/* --- AppScreenHeader ------------------------------------------------------ */
.app-screen-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-32);
}

/* El cuadro amarillo con el emoji del bus: equivale al logo de la cabecera. */
.app-screen-header__mark {
  width: var(--spacing-48);
  height: var(--spacing-48);
  flex: none;
  border-radius: var(--shape-card);
  background: var(--primary-yellow);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-size: var(--title-large-size);
}

.app-screen-header__title {
  font-size: var(--title-medium-size);
  line-height: var(--title-medium-line);
  font-weight: 700;
  color: var(--on-background);
}


/* --- AppCard --------------------------------------------------------------
   `AppCard(elevation = elevation0, border = ...)`: superficie blanca, borde
   fino con outlineVariant y esquina de 12dp (CardDefaults.shape). */
.app-card {
  background: var(--surface-white);
  border: var(--stroke-width-1) solid var(--outline-variant);
  border-radius: var(--shape-card);
  box-shadow: var(--elevation-0);
  padding: var(--spacing-16);
}

/* Variante clicable: la card entera es el target táctil (mín. 48dp de alto ya
   lo garantiza el padding + el contenido). */
.app-card--clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.app-card--clickable:hover,
.app-card--clickable:focus-visible {
  box-shadow: var(--elevation-4);
  border-color: var(--outline);
}


/* --- AppButton ------------------------------------------------------------
   Solo se portó la variante FILLED y la TEXT, que es lo que estas páginas
   necesitan. DESTRUCTIVE no aplica aquí: la web no borra nada, solo explica. */
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--spacing-48);
  padding: 0 var(--spacing-24);
  border: none;
  border-radius: var(--shape-button);
  background: var(--primary-yellow);
  color: var(--secondary-blue);
  font-family: var(--font-family);
  font-size: var(--body-large-size);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.app-button--text {
  background: none;
  color: var(--secondary-blue);
  padding: 0;
  min-height: auto;
}


/* --- AppNumberedList ------------------------------------------------------
   Los pasos numerados con el círculo amarillo. En la app sería una `Column` de
   filas con un badge; aquí lo resuelve un contador CSS. */
.app-numbered-list { counter-reset: step; }

.app-numbered-list__item {
  counter-increment: step;
  position: relative;
  padding-left: var(--spacing-32);
  min-height: var(--spacing-24);
}

.app-numbered-list__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--spacing-24);
  height: var(--spacing-24);
  border-radius: 50%;
  background: var(--primary-yellow);
  color: var(--on-primary);
  font-size: var(--body-small-size);
  font-weight: 700;
  display: grid;
  place-items: center;
}


/* --- AppBulletList -------------------------------------------------------- */
/* El contenedor no pinta nada por sí mismo (el reset ya quita el bullet nativo y
   el gap lo pone .app-stack), pero se declara igual para que el bloque exista
   como componente y no dependa de que el reset no cambie. */
.app-bullet-list { list-style: none; }

.app-bullet-list__item {
  position: relative;
  padding-left: var(--spacing-16);
}

.app-bullet-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--body-large-line) / 2 - var(--spacing-4) / 2);
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: 50%;
  background: var(--outline);
}


/* --- AppDivider / footer -------------------------------------------------- */
.app-divider {
  height: var(--stroke-width-1);
  background: var(--outline-variant);
  border: none;
}

.app-footer {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-16);
  border-top: var(--stroke-width-1) solid var(--outline-variant);
}


/* --- Enlaces en texto corrido --------------------------------------------- */
.app-link {
  color: var(--secondary-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--stroke-width-2);
}


/* --- AppNotice ------------------------------------------------------------
   Bloque de aviso destacado (el gemelo de una `Card` con `primaryContainer` y
   borde de acento en la app). Existe para una sola cosa: que la renuncia de
   responsabilidad "esta app no es oficial" se lea sin hacer scroll, en vez de
   quedar como texto gris al pie. Por eso no usa `.text-caption`: el tamaño es
   el del cuerpo normal y el color tiene contraste pleno. */
.app-notice {
  background: var(--primary-container-yellow);
  border: var(--stroke-width-1) solid var(--warning-orange);
  border-left-width: var(--spacing-4);
  border-radius: var(--shape-card);
  padding: var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.app-notice__title {
  font-size: var(--title-medium-size);
  line-height: var(--title-medium-line);
  font-weight: 700;
  color: var(--on-primary-container);
}

.app-notice__text {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  font-weight: 400;
  color: var(--on-primary-container);
}


/* --- Accesibilidad --------------------------------------------------------
   Foco visible para navegación por teclado, con el azul de marca. */
a:focus-visible,
.app-card--clickable:focus-visible {
  outline: var(--stroke-width-2) solid var(--secondary-blue);
  outline-offset: var(--spacing-4);
}