/* ============================================================================
   Torre Ejemplo · plataforma de amenidades
   Sistema visual · Santos Solutions
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --bg:            oklch(1 0 0);
  --superficie:    oklch(0.983 0.003 265);
  --superficie-2:  oklch(0.960 0.005 265);
  --linea:         oklch(0.906 0.007 265);
  --linea-2:       oklch(0.845 0.010 265);

  --tinta:         oklch(0.200 0.018 265);
  --tinta-2:       oklch(0.380 0.016 265);
  --apagado:       oklch(0.470 0.014 265);

  --primario:      oklch(0.335 0.095 267);
  --primario-alt:  oklch(0.275 0.090 267);
  --primario-tinta:oklch(0.995 0.003 265);
  --primario-texto:oklch(0.335 0.095 267);
  --primario-suave:oklch(0.958 0.020 267);
  --primario-linea:oklch(0.875 0.042 267);

  --acento-suave:  oklch(0.950 0.045 78);
  --acento-texto:  oklch(0.420 0.100 62);
  --acento-punto:  oklch(0.700 0.150 68);

  --peligro:       oklch(0.520 0.190 25);
  --peligro-suave: oklch(0.958 0.028 25);
  --peligro-texto: oklch(0.450 0.170 25);
  --peligro-linea: oklch(0.890 0.050 25);

  --exito-suave:   oklch(0.948 0.042 158);
  --exito-texto:   oklch(0.395 0.090 158);
  --exito-punto:   oklch(0.560 0.130 158);

  /* Estos cinco estaban escritos a mano dentro de las piezas y ahora tienen
     nombre. NO son colores nuevos: son exactamente los mismos valores, mudados
     a su sitio. El guardia de `scripts/ci/lint` obliga a que sea así. */
  --tinta-foto:    oklch(0.22 0.03 265);
  --punto-libre:   oklch(0.52 0.15 150);
  --punto-ocupada: oklch(0.75 0.13 60);
  --tostada-bien:  oklch(0.82 0.15 155);
  --tostada-mal:   oklch(0.75 0.16 30);

  --sombra-baja:   0 1px 2px oklch(0.2 0.02 265 / .07);
  --sombra-media:  0 6px 20px oklch(0.2 0.02 265 / .10);
  --sombra-alta:   0 -2px 40px oklch(0.2 0.02 265 / .16);

  /* Sombras con tinte, también mudadas aquí desde su pieza. Una sombra entera
     como token —y no solo su color— porque el desenfoque y el color van juntos:
     partirla obligaría a escribir el color fuera otra vez. */
  --sombra-placa:  0 2px 6px oklch(0.2 0.03 265 / .07), 0 16px 44px -12px oklch(0.2 0.03 265 / .28);
  --sombra-canto:  -14px 0 34px oklch(0.14 0.03 265 / .20);
  --sombra-burbuja:
    inset 0 0 0 1px oklch(1 0 0 / .55),
    0 1px 2px oklch(0.2 0.03 265 / .10),
    0 12px 34px -8px oklch(0.2 0.03 265 / .30);

  /* Velos sobre foto: la capa oscura que deja leer el texto encima de una
     imagen. Van enteros porque aquí el degradado ES el color. */
  --velo-proxima: linear-gradient(100deg,
    oklch(0.17 0.055 265 / .95) 0%,
    oklch(0.17 0.055 265 / .82) 42%,
    oklch(0.17 0.055 265 / .38) 100%);
  --velo-heroe: linear-gradient(to top,
    oklch(0.14 0.035 265 / .88) 0%,
    oklch(0.14 0.035 265 / .42) 42%,
    oklch(0.14 0.035 265 / .04) 100%);
  --velo-lamina: linear-gradient(to top,
    oklch(0.14 0.03 265 / .88) 0%,
    oklch(0.14 0.03 265 / .55) 32%,
    oklch(0.14 0.03 265 / .10) 62%,
    oklch(0.14 0.03 265 / .02) 100%);

  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px;

  /* --------- medidas del armazón (unidad 007) --------------------------
     La aplicación ocupa la ventana, pero NO se estira sin fin: un renglón
     de 1.400 px se lee mal porque el ojo pierde dónde empieza el siguiente.
     Estas cuatro medidas son las que hacen que las piezas se acomoden solas
     sin una regla por pantalla. */
  --app:      1180px;   /* tope del armazón entero */
  --lectura:   640px;   /* tope de un bloque de texto largo */
  --columna:   300px;   /* lo mínimo que mide una tarjeta antes de partir fila */
  --margen: clamp(20px, 2.5vw, 34px);   /* respiro lateral de una pantalla */

  --rap: 150ms; --med: 220ms; --lento: 320ms;
  --sal: cubic-bezier(.22, 1, .36, 1);

  --z-barra: 20; --z-velo: 40; --z-hoja: 50; --z-aviso: 60;

  /* --------- la letra y los huecos, con nombre (unidad 012) -------------
     Hasta aquí los colores tenían nombre y la letra no. Los 24 tamaños, los
     15 grosores, las 27 medidas de hueco y las 29 transparencias estaban
     escritos a mano, uno por uno, repartidos por el fichero entero: 421
     declaraciones. Nadie podía ver la lista completa, porque no existía en
     ningún sitio. Aquí está.

     NO SE MOVIÓ UN PÍXEL, y no es una promesa: `pruebas/ni-un-pixel.test.js`
     compara el valor final de las 1.780 declaraciones —con todos los tokens
     sustituidos hasta el fondo, en el tema claro y en el oscuro— contra la
     foto que se sacó del fichero antes de tocarlo. Carácter a carácter.

     EL NOMBRE ES EL VALOR, a propósito. `--tam-13` mide trece píxeles y
     `--peso-620` vale seiscientos veinte. No dice para qué sirve, y hoy eso
     es lo correcto: decidir cuál de los 24 tamaños es «el del cuerpo» es
     diseñar, y diseñar mueve píxeles. Cuando se apriete la escala —de 24
     tamaños a 7, de 15 grosores a 3—, bastará con apuntar estos nombres a
     menos valores AQUÍ, en un solo sitio, y el diff enseñará línea a línea
     qué se movió. Ése es todo el negocio de esta lista.

     LA CIFRA DEL NOMBRE ES LA QUE ESTÁ ESCRITA EN EL VALOR, sin el punto:
     `--tam-13-5` son 13,5 píxeles y `--alfa-065` es una transparencia de
     0,065. Dos formas distintas de escribir el mismo número serían dos
     nombres distintos, y tiene que ser así: lo prometido es que el valor
     final no cambie de texto, no que se le parezca.

     QUÉ SE QUEDÓ FUERA, con su motivo. Las 26 transparencias que viven
     DENTRO de `--sombra-*` y `--velo-*` no están aquí: son las tripas de
     algo que ya tiene nombre como pieza entera, y nombrarlas sería una capa
     dentro de otra capa. El interlineado y el espaciado entre letras tampoco:
     van atados al oficio del texto y no a su tamaño, así que nombrarlos por
     valor ahora crearía nombres que la escala tiraría enteros. Los dos casos
     están medidos y apuntados para cuando llegue esa unidad.

     Aquí SÍ se escriben los números, porque éste es su sitio y no hay otro.
     Fuera de este bloque, el guardia de `scripts/ci/lint` no deja pasar
     ninguno: si hace falta una medida que no está, se añade arriba con su
     nombre, no se escribe dentro de la pieza. */

  /* 24 tamaños de letra · 18 fijos y 6 que crecen con la ventana */
  --tam-10-5:     10.5px;
  --tam-11:       11px;
  --tam-11-5:     11.5px;
  --tam-12:       12px;
  --tam-12-5:     12.5px;
  --tam-13:       13px;
  --tam-13-5:     13.5px;
  --tam-14:       14px;
  --tam-14-5:     14.5px;
  --tam-15:       15px;
  --tam-16:       16px;
  --tam-17:       17px;
  --tam-19:       19px;
  --tam-22:       22px;
  --tam-23:       23px;
  --tam-25:       25px;
  --tam-27:       27px;
  --tam-28:       28px;
  --tam-fluido-1: clamp(22px, 1.6vw, 27px);
  --tam-fluido-2: clamp(24px, 1.8vw, 30px);
  --tam-fluido-3: clamp(20px, 1.5vw, 25px);
  --tam-fluido-4: clamp(23px, 1.8vw, 29px);
  --tam-fluido-5: clamp(25px, 1.9vw, 30px);
  --tam-fluido-6: clamp(25px, 1.9vw, 31px);

  /* 15 grosores de letra */
  --peso-420: 420;
  --peso-500: 500;
  --peso-540: 540;
  --peso-550: 550;
  --peso-560: 560;
  --peso-570: 570;
  --peso-580: 580;
  --peso-600: 600;
  --peso-620: 620;
  --peso-640: 640;
  --peso-650: 650;
  --peso-660: 660;
  --peso-670: 670;
  --peso-680: 680;
  --peso-700: 700;

  /* 27 medidas de hueco · cubren las 212 declaraciones de gap, padding y margin */
  --hueco-1:   1px;
  --hueco-2:   2px;
  --hueco-3:   3px;
  --hueco-4:   4px;
  --hueco-5:   5px;
  --hueco-6:   6px;
  --hueco-7:   7px;
  --hueco-8:   8px;
  --hueco-9:   9px;
  --hueco-10:  10px;
  --hueco-11:  11px;
  --hueco-12:  12px;
  --hueco-13:  13px;
  --hueco-14:  14px;
  --hueco-15:  15px;
  --hueco-16:  16px;
  --hueco-18:  18px;
  --hueco-19:  19px;
  --hueco-20:  20px;
  --hueco-22:  22px;
  --hueco-24:  24px;
  --hueco-26:  26px;
  --hueco-30:  30px;
  --hueco-34:  34px;
  --hueco-40:  40px;
  --hueco-62:  62px;
  --hueco-132: 132px;

  /* 29 transparencias · las de opacity y las que van dentro de un color */
  --alfa-065: .065;
  --alfa-07:  .07;
  --alfa-09:  .09;
  --alfa-10:  .10;
  --alfa-14:  .14;
  --alfa-16:  .16;
  --alfa-19:  .19;
  --alfa-22:  .22;
  --alfa-24:  .24;
  --alfa-26:  .26;
  --alfa-30:  .30;
  --alfa-32:  .32;
  --alfa-35:  .35;
  --alfa-38:  .38;
  --alfa-4:   .4;
  --alfa-42:  .42;
  --alfa-44:  .44;
  --alfa-45:  .45;
  --alfa-5:   .5;
  --alfa-55:  .55;
  --alfa-72:  .72;
  --alfa-75:  .75;
  --alfa-78:  .78;
  --alfa-8:   .8;
  --alfa-82:  .82;
  --alfa-85:  .85;
  --alfa-88:  .88;
  --alfa-9:   .9;
  --alfa-94:  .94;

  color-scheme: light;
}

html[data-tema="oscuro"] {
  --bg:            oklch(0.155 0.012 265);
  --superficie:    oklch(0.205 0.014 265);
  --superficie-2:  oklch(0.248 0.016 265);
  --linea:         oklch(0.300 0.016 265);
  --linea-2:       oklch(0.400 0.018 265);

  --tinta:         oklch(0.965 0.004 265);
  --tinta-2:       oklch(0.800 0.010 265);
  --apagado:       oklch(0.700 0.013 265);

  --primario:      oklch(0.790 0.090 253);
  --primario-alt:  oklch(0.855 0.080 253);
  --primario-tinta:oklch(0.170 0.045 265);
  --primario-texto:oklch(0.800 0.085 253);
  --primario-suave:oklch(0.275 0.045 265);
  --primario-linea:oklch(0.385 0.060 265);

  --acento-suave:  oklch(0.300 0.050 70);
  --acento-texto:  oklch(0.860 0.110 76);
  --acento-punto:  oklch(0.780 0.130 68);

  --peligro:       oklch(0.640 0.180 25);
  --peligro-suave: oklch(0.285 0.060 25);
  --peligro-texto: oklch(0.810 0.120 25);
  --peligro-linea: oklch(0.400 0.080 25);

  --exito-suave:   oklch(0.285 0.055 158);
  --exito-texto:   oklch(0.830 0.115 158);
  --exito-punto:   oklch(0.720 0.130 158);

  --sombra-baja:   0 1px 2px oklch(0 0 0 / .4);
  --sombra-media:  0 6px 20px oklch(0 0 0 / .45);
  --sombra-alta:   0 -2px 40px oklch(0 0 0 / .55);
  --sombra-canto:  -14px 0 34px oklch(0 0 0 / .5);
  --sombra-burbuja:
    inset 0 0 0 1px oklch(1 0 0 / .09),
    0 1px 2px oklch(0 0 0 / .5),
    0 12px 34px -8px oklch(0 0 0 / .65);

  color-scheme: dark;
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--tam-15);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button {
  cursor: pointer; border: 0; background: none; padding: 0;
  -webkit-tap-highlight-color: transparent;   /* sin destello gris al tocar */
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--primario-texto); }

:focus-visible {
  outline: 2px solid var(--primario-texto);
  outline-offset: 2px;
  border-radius: 6px;
}

svg { display: block; flex: none; width: 20px; height: 20px; }
.pastilla svg { width: 13px; height: 13px; }
.btn svg { width: 18px; height: 18px; }
.proxima__tapa svg { width: 14px; height: 14px; }
img { display: block; max-width: 100%; }

/* ============================================================== escenario */
/* El armazón. La aplicación ocupa la ventana entera —teléfono, tableta o el
   monitor de la oficina— y esto NO es una excepción de ningún ancho: es el
   único comportamiento. Hasta la unidad 007 aquí se dibujaba un teléfono de
   393×852 con marco, isla y un panel de vista previa al lado; era una
   previsualización, nunca el producto, y se retiró sin sustituto.
   `100dvh` y no `100vh`: en el móvil la barra del navegador aparece y
   desaparece, y `vh` mide la ventana como si nunca estuviera. */
.escenario {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

/* ============================================================= segmento */
/* Grupo de botones excluyentes. Lo usa el selector de torre del acceso. */
.segmento {
  display: flex; gap: var(--hueco-3); padding: var(--hueco-3);
  background: var(--superficie-2);
  border-radius: 10px;
}
.segmento button {
  flex: 1; padding: var(--hueco-7) var(--hueco-6); border-radius: 7px;
  font-size: var(--tam-12); font-weight: var(--peso-550); color: var(--apagado);
  transition: background var(--rap) var(--sal), color var(--rap) var(--sal);
  white-space: nowrap;
}
.segmento button:hover { color: var(--tinta); }
.segmento button[aria-pressed="true"] {
  background: var(--bg); color: var(--tinta);
  box-shadow: var(--sombra-baja);
}

/* ------------------------------------------------------- cortinilla ---- */
/* El isotipo se traza desde las orillas hacia el centro: los cuatro lados
   del escudo convergen en las puntas, y la S se dibuja desde sus dos
   extremos hasta el medio. pathLength="100" normaliza todos los trazos
   para poder animarlos con los mismos números.                          */
.arranque {
  position: absolute; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 420ms var(--sal), visibility 420ms;
}
.arranque--fuera { opacity: 0; visibility: hidden; pointer-events: none; }

/* Placa del escudo. El PNG trae el lockup completo sobre fondo claro, así
   que se recorta por CSS al escudo y se monta en una placa redondeada.   */
.arranque__marca {
  position: relative;
  width: 138px; height: 138px;
  border-radius: 32px;
  overflow: hidden;
  background: oklch(1 0 0);
  box-shadow: var(--sombra-placa);
  animation: marca-entra 440ms var(--sal) both;
}
@keyframes marca-entra {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Las dos mitades del escudo entran desde su orilla y se juntan en el
   centro. Solo se anima transform y opacity, que corren en la GPU: no hay
   clip-path ni cambios de layout, por eso no se traba en el celular.    */
/* La pieza que se mueve es la mitad completa, con su recorte incluido; si
   solo se moviera la imagen dentro de una ventana fija, la ventana
   mostraría otra parte del logo y se vería duplicado en el centro.      */
.arranque__mitad {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  will-change: transform, opacity;
  opacity: 0;                       /* arranca escondida, sin destello */
}
.arranque__mitad--izq { left: 0;  transform: translate3d(-26%, 0, 0); }
.arranque__mitad--der { right: 0; transform: translate3d(26%, 0, 0); }

.arranque__lienzo { position: absolute; inset: 0; overflow: hidden; }
.arranque__lienzo img {
  position: absolute; top: 0;
  width: 200%; height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.arranque__mitad--izq .arranque__lienzo img { left: 0; }
.arranque__mitad--der .arranque__lienzo img { right: 0; }

/* Sin la imagen lista no se anima nada: así nunca se ve a medias. */
.arranque__marca--listo .arranque__mitad--izq { animation: junta-izq 720ms cubic-bezier(.18, .92, .26, 1) both; }
.arranque__marca--listo .arranque__mitad--der { animation: junta-der 720ms cubic-bezier(.18, .92, .26, 1) both; }

@keyframes junta-izq {
  from { transform: translate3d(-26%, 0, 0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes junta-der {
  from { transform: translate3d(26%, 0, 0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

.arranque--fuera .arranque__marca { animation: marca-sale 340ms var(--sal) forwards; }
@keyframes marca-sale { to { transform: scale(1.07); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .arranque__marca { animation: none; }
  .arranque__mitad--izq { animation: none; clip-path: inset(0 49.7% 0 0); }
  .arranque__mitad--der { animation: none; clip-path: inset(0 0 0 49.7%); }
}

/* ------------------------------------------------------------------ app */
/* El armazón se centra y tiene tope. Todo lo que se sujeta a los bordes de la
   aplicación —la barra flotante, la hoja, los avisos— cuelga de aquí, así que
   con un solo tope quedan todos dentro de la misma columna. */
.app {
  flex: 1;
  min-height: 0;
  position: relative;
  width: 100%;
  max-width: var(--app);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.vista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.vista::-webkit-scrollbar { display: none; }

.vista > * { animation: entra var(--med) var(--sal) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
/* Al repintar la misma pantalla no hay entrada que animar. */
.vista--quieta > * { animation: none; }

/* Deslizar desde la orilla izquierda para regresar: la pantalla sigue al
   dedo y proyecta sombra por su canto, como una tarjeta que se retira.   */
.app--regresando .vista {
  will-change: transform;
  box-shadow: var(--sombra-canto);
}
.app--regresando .vista > * { animation: none; }

/* =========================================================== tipografía */
/* Los títulos crecen un poco con la ventana. El mínimo de cada `clamp()` es
   EXACTAMENTE el tamaño de antes, así que en teléfono no cambia ni un píxel:
   lo único que pasa es que en un monitor no se ven como un móvil ampliado. */
.titulo   { font-size: var(--tam-fluido-1); font-weight: var(--peso-680); letter-spacing: -.022em; line-height: 1.2; }
.subtitulo{ font-size: var(--tam-17); font-weight: var(--peso-640); letter-spacing: -.014em; }
.rotulo   { font-size: var(--tam-12); font-weight: var(--peso-620); letter-spacing: .045em; text-transform: uppercase; color: var(--apagado); }
.dato     { font-variant-numeric: tabular-nums; }

/* Texto largo: un tope de ancho de lectura. Sin esto, en un monitor el
   renglón cruza la pantalla de lado a lado y el ojo pierde dónde empieza el
   siguiente. Es UNA regla para las 21 pantallas, no una por pantalla. */
.parrafo  { font-size: var(--tam-14); color: var(--tinta-2); line-height: 1.55; }
.parrafo,
.reglas,
.aviso__cuerpo,
.solicitud__nota,
.paso__nota,
.vacio p,
.acceso p { max-width: var(--lectura); }

/* ============================================================ estructura */
.bloque-vista { padding: 0 var(--margen) var(--hueco-132); }

.encabezado {
  position: sticky; top: 0; z-index: var(--z-barra);
  background: var(--bg);
  padding: var(--hueco-8) var(--margen) var(--hueco-12);
  display: flex; align-items: center; gap: var(--hueco-12);
  min-height: 52px;
  transition: border-color var(--rap) linear;
  border-bottom: 1px solid transparent;
}
.encabezado[data-pegado="si"] { border-bottom-color: var(--linea); }
.encabezado h1 { font-size: var(--tam-17); font-weight: var(--peso-650); letter-spacing: -.015em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encabezado__acciones { display: flex; align-items: center; gap: var(--hueco-4); margin-left: auto; }

.seccion { margin-top: var(--hueco-26); }
.seccion__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--hueco-12); margin-bottom: var(--hueco-11);
}
.seccion__cabeza h2 { font-size: var(--tam-15); font-weight: var(--peso-640); letter-spacing: -.012em; }
.seccion__ver { font-size: var(--tam-13); font-weight: var(--peso-560); color: var(--primario-texto); }

/* La pila de tarjetas se reparte sola por el ancho que haya. `min(100%, …)`
   y no `--columna` a secas: si el contenedor es más angosto que la columna
   mínima, `auto-fill` se pasaría de largo y la pila se saldría de lado.
   En teléfono da UNA columna, igual que la pila de antes. */
.pila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--columna)), 1fr));
  gap: var(--hueco-9);
}
/* Una cronología se lee de arriba abajo: si la pila lleva horas al margen,
   no se parte en columnas o el orden dejaría de significar nada. */
.pila:has(> .cronologia) { grid-template-columns: 1fr; }

/* ============================================================== botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hueco-8);
  height: 46px; padding: 0 var(--hueco-18);
  border-radius: var(--r2);
  font-size: var(--tam-15); font-weight: var(--peso-600); letter-spacing: -.01em;
  transition: background var(--rap) var(--sal), color var(--rap) var(--sal),
              transform var(--rap) var(--sal), border-color var(--rap) var(--sal), opacity var(--rap) linear;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: var(--alfa-42); cursor: not-allowed; }
.btn--ancho { width: 100%; }
.btn--chico { height: 36px; padding: 0 var(--hueco-13); font-size: var(--tam-13-5); border-radius: var(--r1); }

.btn--fuerte { background: var(--primario); color: var(--primario-tinta); }
.btn--fuerte:hover:not(:disabled) { background: var(--primario-alt); }

.btn--suave { background: var(--superficie-2); color: var(--tinta); }
.btn--suave:hover:not(:disabled) { background: var(--linea); }

.btn--linea { border: 1px solid var(--linea-2); color: var(--tinta); }
.btn--linea:hover:not(:disabled) { border-color: var(--tinta-2); }

.btn--riesgo { background: var(--peligro-suave); color: var(--peligro-texto); }
.btn--riesgo:hover:not(:disabled) { background: var(--peligro); color: oklch(0.99 0 0); }

.btn-icono {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--tinta);
  transition: background var(--rap) var(--sal), transform var(--rap) var(--sal);
  position: relative;
}
.btn-icono:hover { background: var(--superficie-2); }
.btn-icono:active { transform: scale(.92); }
.btn-icono--marcado::after {
  content: ""; position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--acento-punto);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ============================================================ pastillas */
.pastilla {
  display: inline-flex; align-items: center; gap: var(--hueco-5);
  height: 23px; padding: 0 var(--hueco-9); border-radius: 999px;
  font-size: var(--tam-11-5); font-weight: var(--peso-600); letter-spacing: -.005em;
  background: var(--superficie-2); color: var(--tinta-2);
  white-space: nowrap;
}
.pastilla--marca   { background: var(--primario-suave); color: var(--primario-texto); }
.pastilla--espera  { background: var(--acento-suave);   color: var(--acento-texto); }
.pastilla--riesgo  { background: var(--peligro-suave);  color: var(--peligro-texto); }
.pastilla--listo   { background: var(--exito-suave);    color: var(--exito-texto); }
.pastilla--viva::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
}

/* =============================================================== tarjeta */
.tarjeta {
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  padding: var(--hueco-14);
}
.tarjeta--relleno { background: var(--superficie); }
.tarjeta--marca {
  background: var(--primario-suave);
  border-color: var(--primario-linea);
}

/* ------------------------------------------------------------ icono tile */
.tejuela {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--primario-suave); color: var(--primario-texto);
}
.tejuela--grande { width: 56px; height: 56px; border-radius: 17px; }
.tejuela--apagada { background: var(--superficie-2); color: var(--apagado); }
.tejuela svg { width: 22px; height: 22px; }
.tejuela--grande svg { width: 28px; height: 28px; }

/* ================================================================= ficha */
.ficha {
  display: flex; align-items: center; gap: var(--hueco-13);
  width: 100%; text-align: left;
  padding: var(--hueco-12) var(--hueco-13);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  background: var(--bg);
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal),
              transform var(--rap) var(--sal);
}
.ficha:hover { border-color: var(--linea-2); background: var(--superficie); }
.ficha:active { transform: scale(.99); }
.ficha__cuerpo { flex: 1; min-width: 0; }
.ficha__nombre {
  font-size: var(--tam-15); font-weight: var(--peso-600); letter-spacing: -.012em;
  display: flex; align-items: center; gap: var(--hueco-7);
}
.ficha__pie {
  font-size: var(--tam-12-5); color: var(--apagado); margin-top: var(--hueco-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha__flecha { color: var(--linea-2); }
.ficha[disabled] { opacity: var(--alfa-55); cursor: not-allowed; }

/* ============================================================== portada */
.saludo { padding: var(--hueco-6) var(--margen) 0; }
.saludo__hola { font-size: var(--tam-13-5); color: var(--apagado); }
.saludo__nombre { font-size: var(--tam-fluido-2); font-weight: var(--peso-680); letter-spacing: -.026em; line-height: 1.15; margin-top: var(--hueco-1); }

.proxima {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; gap: var(--hueco-13);
  width: 100%; min-height: 138px; text-align: left;
  border-radius: var(--r4); overflow: hidden;
  padding: var(--hueco-16);
  background: var(--primario);
  color: oklch(1 0 0);
  transition: transform var(--rap) var(--sal);
}
.proxima:active { transform: scale(.99); }
.proxima img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.proxima::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--velo-proxima);
}
.proxima__tapa {
  display: flex; align-items: center; gap: var(--hueco-6);
  font-size: var(--tam-10-5); font-weight: var(--peso-640); letter-spacing: .05em; text-transform: uppercase;
  opacity: var(--alfa-82);
}
.proxima__que { font-size: var(--tam-fluido-3); font-weight: var(--peso-670); letter-spacing: -.024em; margin-top: var(--hueco-7); }
.proxima__cuando { font-size: var(--tam-13-5); margin-top: var(--hueco-2); opacity: var(--alfa-88); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- foto en miniatura */
.miniatura {
  position: relative; width: 54px; height: 54px; flex: none;
  border-radius: 14px; overflow: hidden;
  background: var(--primario);
}
.miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.miniatura__sin { position: absolute; inset: 0; display: grid; place-items: center; color: oklch(1 0 0 / var(--alfa-38)); }
.miniatura__sin svg { width: 25px; height: 25px; }
.miniatura--apagada { filter: grayscale(1); opacity: var(--alfa-5); }

/* --------------------------------------------------- héroe de amenidad */
/* Con `aspect-ratio`, cuanto más ancho más alto: sin tope, en un monitor la
   foto sola se comería la ventana entera y habría que hacer scroll para ver
   el nombre. El tope de altura la deja recortar en vez de crecer. */
.heroe {
  position: relative; isolation: isolate;
  margin: 0 var(--margen); border-radius: var(--r4); overflow: hidden;
  aspect-ratio: 16 / 9.4;
  max-height: 340px;
  background: var(--primario);
}
.heroe img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.heroe__sin {
  position: absolute; inset: 0; z-index: -3;
  display: grid; place-items: center;
  background: var(--primario); color: oklch(1 0 0 / var(--alfa-32));
}
.heroe__sin svg { width: 66px; height: 66px; }
.heroe::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--velo-heroe);
}
.heroe__texto { position: absolute; left: 16px; right: 16px; bottom: 14px; color: oklch(1 0 0); }
.heroe__texto h1 {
  font-size: var(--tam-fluido-4); font-weight: var(--peso-680); letter-spacing: -.026em; line-height: 1.15;
  text-shadow: 0 1px 14px oklch(0.12 0.02 265 / var(--alfa-55));
}
.heroe__texto p {
  font-size: var(--tam-13); opacity: var(--alfa-9); margin-top: var(--hueco-3);
  text-shadow: 0 1px 12px oklch(0.12 0.02 265 / var(--alfa-55));
}

/* ------------------------------------------------------ galería de áreas */
.galeria {
  display: flex; gap: var(--hueco-12);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding: var(--hueco-2) var(--margen) var(--hueco-4); margin: 0 calc(-1 * var(--margen));
  -webkit-overflow-scrolling: touch;
}
.galeria::-webkit-scrollbar { display: none; }

/* En teléfono la lámina asoma la siguiente por la orilla (`100% - 62px`), que
   es lo que invita a arrastrar. En una ventana ancha ese mismo cálculo daría
   una lámina de 1.100 px que, con su proporción, mediría más que la ventana
   de alto: el tope la deja en su tamaño y entran varias a la vez. */
.lamina {
  position: relative; flex: none;
  width: min(calc(100% - 62px), 340px);
  aspect-ratio: 4 / 3.15;
  border-radius: var(--r4);
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--primario);
  text-align: left;
  transition: transform var(--rap) var(--sal);
  isolation: isolate;
}
.lamina:active { transform: scale(.985); }
.lamina img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.lamina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--velo-lamina);
}
.lamina__sin {
  position: absolute; inset: 0; z-index: -3;
  display: grid; place-items: center;
  background: var(--primario);
  color: oklch(1 0 0 / var(--alfa-30));
}
.lamina__sin svg { width: 74px; height: 74px; }

.lamina__alto {
  position: absolute; top: 13px; left: 13px; right: 13px;
  display: flex; justify-content: flex-end;
}
.lamina__marca {
  display: inline-flex; align-items: center; gap: var(--hueco-5);
  height: 26px; padding: 0 var(--hueco-11); border-radius: 999px;
  font-size: var(--tam-11-5); font-weight: var(--peso-620);
  background: oklch(1 0 0 / var(--alfa-94)); color: var(--tinta-foto);
  backdrop-filter: blur(6px);
}
.lamina__marca--ocupada { background: oklch(0.20 0.02 265 / var(--alfa-72)); color: oklch(0.97 0 0); }
.lamina__marca i { width: 6px; height: 6px; border-radius: 999px; background: var(--punto-libre); }
.lamina__marca--ocupada i { background: var(--punto-ocupada); }

.lamina__bajo { position: absolute; left: 16px; right: 16px; bottom: 15px; color: oklch(1 0 0); }
.lamina__nombre {
  display: block; font-size: var(--tam-19); font-weight: var(--peso-660); letter-spacing: -.022em;
  text-shadow: 0 1px 12px oklch(0.12 0.02 265 / var(--alfa-5));
}
.lamina__pie {
  display: block; font-size: var(--tam-12-5); opacity: var(--alfa-88); margin-top: var(--hueco-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px oklch(0.12 0.02 265 / var(--alfa-5));
}

.perlas { display: flex; justify-content: center; gap: var(--hueco-6); margin-top: var(--hueco-12); }
.perla {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--linea-2);
  transition: width var(--med) var(--sal), background var(--med) var(--sal);
}
.perla--viva { width: 18px; background: var(--primario); }

.carril {
  display: flex; gap: var(--hueco-9);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--hueco-2) var(--margen) var(--hueco-2);
  margin: 0 calc(-1 * var(--margen));
  scroll-snap-type: x proximity;
}
.carril::-webkit-scrollbar { display: none; }

.atajo {
  flex: none; width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: var(--hueco-8);
  padding: var(--hueco-13) var(--hueco-8);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  background: var(--bg);
  scroll-snap-align: start;
  transition: border-color var(--rap) var(--sal), transform var(--rap) var(--sal);
}
.atajo:hover { border-color: var(--linea-2); }
.atajo:active { transform: scale(.96); }
.atajo__nombre { font-size: var(--tam-11-5); font-weight: var(--peso-570); text-align: center; line-height: 1.25; color: var(--tinta-2); }

/* ============================================================== amenidad */
.portada-amenidad {
  padding: var(--hueco-4) var(--margen) 0;
  display: flex; gap: var(--hueco-14); align-items: flex-start;
}
.portada-amenidad h1 { font-size: var(--tam-fluido-1); font-weight: var(--peso-680); letter-spacing: -.024em; line-height: 1.18; }
.portada-amenidad p { font-size: var(--tam-13); color: var(--apagado); margin-top: var(--hueco-3); }

.datos-amenidad {
  display: flex; flex-wrap: wrap; gap: var(--hueco-6);
  padding: var(--hueco-14) var(--margen) 0;
}

.tira-fechas {
  display: flex; gap: var(--hueco-7);
  overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--margen) var(--hueco-2); margin: 0 calc(-1 * var(--margen));
  scroll-snap-type: x mandatory;
}
.tira-fechas::-webkit-scrollbar { display: none; }

.dia {
  flex: none; width: 52px; padding: var(--hueco-9) 0 var(--hueco-10);
  border-radius: var(--r2);
  border: 1px solid var(--linea);
  background: var(--bg);
  text-align: center;
  scroll-snap-align: center;
  transition: background var(--rap) var(--sal), border-color var(--rap) var(--sal),
              color var(--rap) var(--sal), transform var(--rap) var(--sal);
}
.dia:active { transform: scale(.95); }
.dia__sem { font-size: var(--tam-10-5); font-weight: var(--peso-620); letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.dia__num { font-size: var(--tam-17); font-weight: var(--peso-640); margin-top: var(--hueco-2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dia[aria-pressed="true"] {
  background: var(--primario); border-color: var(--primario); color: var(--primario-tinta);
}
.dia[aria-pressed="true"] .dia__sem { color: inherit; opacity: var(--alfa-75); }
.dia[disabled] { opacity: var(--alfa-35); cursor: not-allowed; }

/* Los horarios se reparten por el ancho: dos columnas en teléfono —lo mismo
   que daba `1fr 1fr`— y las que quepan en un monitor. */
.rejilla-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--hueco-8);
}

.bloque {
  padding: var(--hueco-11) var(--hueco-10);
  border-radius: var(--r2);
  border: 1px solid var(--linea);
  background: var(--bg);
  text-align: left;
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal),
              color var(--rap) var(--sal), transform var(--rap) var(--sal);
}
.bloque__hora { font-size: var(--tam-14-5); font-weight: var(--peso-620); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bloque__nota { font-size: var(--tam-11-5); color: var(--apagado); margin-top: var(--hueco-2); }

.bloque:not([disabled]):hover { border-color: var(--primario-linea); background: var(--primario-suave); }
.bloque:not([disabled]):active { transform: scale(.97); }

.bloque[aria-pressed="true"] {
  background: var(--primario); border-color: var(--primario); color: var(--primario-tinta);
}
.bloque[aria-pressed="true"] .bloque__nota { color: inherit; opacity: var(--alfa-8); }

.bloque--mio {
  background: var(--primario-suave); border-color: var(--primario-linea); color: var(--primario-texto);
}
.bloque--mio .bloque__nota { color: var(--primario-texto); opacity: var(--alfa-8); }

.bloque[disabled] { cursor: not-allowed; }
.bloque--lleno { background: var(--superficie-2); border-color: transparent; color: var(--apagado); }
.bloque--lleno .bloque__hora { text-decoration: line-through; text-decoration-thickness: 1px; opacity: var(--alfa-8); }
.bloque--ido { opacity: var(--alfa-4); }
.bloque--parado { background: var(--acento-suave); border-color: transparent; color: var(--acento-texto); }
.bloque--parado .bloque__nota { color: inherit; opacity: var(--alfa-85); }

.leyenda {
  display: flex; flex-wrap: wrap; gap: var(--hueco-12);
  font-size: var(--tam-11-5); color: var(--apagado);
  margin-top: var(--hueco-12);
}
.leyenda span { display: inline-flex; align-items: center; gap: var(--hueco-6); }
.leyenda i {
  width: 11px; height: 11px; border-radius: 4px; display: block;
  border: 1px solid var(--linea);
}
.leyenda .l-libre { background: var(--bg); }
.leyenda .l-mio { background: var(--primario-suave); border-color: var(--primario-linea); }
.leyenda .l-lleno { background: var(--superficie-2); border-color: transparent; }
.leyenda .l-parado { background: var(--acento-suave); border-color: transparent; }

.reglas li {
  display: flex; gap: var(--hueco-9); align-items: flex-start;
  font-size: var(--tam-13-5); color: var(--tinta-2); line-height: 1.5;
  padding: var(--hueco-6) 0;
}
.reglas li::before {
  content: ""; flex: none; width: 4px; height: 4px; border-radius: 999px;
  background: var(--linea-2); margin-top: var(--hueco-8);
}

/* ------------------------------------------------------- barra flotante */
.barra-accion {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-barra) + 1);
  padding: var(--hueco-12) var(--margen) calc(var(--hueco-12) + env(safe-area-inset-bottom));
  background: var(--bg);
  box-shadow: var(--sombra-alta);
  display: flex; align-items: center; gap: var(--hueco-12);
  animation: sube-barra var(--med) var(--sal) both;
}
@keyframes sube-barra { from { transform: translateY(100%); } to { transform: none; } }
.barra-accion__texto { flex: 1; min-width: 0; }
.barra-accion__que { font-size: var(--tam-13-5); font-weight: var(--peso-620); letter-spacing: -.01em; }
.barra-accion__cuando { font-size: var(--tam-12); color: var(--apagado); font-variant-numeric: tabular-nums; }

/* ================================================================= tabs */
/* Barra flotante tipo burbuja: despegada de los bordes, el contenido
   corre por debajo. Sombra sin borde, para que se sienta elevada.        */
/* El tope + `margin-inline: auto` con `left`, `right` y `width` puestos a la
   vez es lo que centra una pieza absoluta: al sobrar espacio, los márgenes
   automáticos se lo reparten. En teléfono `min()` da exactamente los mismos
   12 px de orilla de siempre; en un monitor la barra se queda del tamaño de
   una barra en vez de cruzar la ventana. */
.tabs {
  position: absolute;
  left: 12px; right: 12px;
  width: min(100% - 24px, 420px);
  margin-inline: auto;
  bottom: calc(11px + env(safe-area-inset-bottom));
  padding: var(--hueco-7) var(--hueco-8);
  border-radius: 28px;
  overflow: hidden;
  background: oklch(1 0 0 / var(--alfa-78));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--sombra-burbuja);
  z-index: var(--z-barra);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-tema="oscuro"] .tabs { background: oklch(0.235 0.018 265 / var(--alfa-72)); }
/* Si el navegador no sabe difuminar el fondo, la barra se vuelve sólida
   para que las etiquetas nunca pierdan contraste.                        */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabs { background: var(--bg); }
  html[data-tema="oscuro"] .tabs { background: oklch(0.235 0.018 265); }
}
.tabs__fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* Círculo que envuelve la pestaña activa. Se desliza al cambiar de sección
   y sigue el dedo cuando se arrastra sobre la barra.                       */
.tabs__dedo {
  position: absolute; left: 0; top: 0;
  width: 62px; height: 40px;
  border-radius: 20px;
  background: var(--primario-suave);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  will-change: transform;
  transition: transform 400ms var(--sal),
              opacity 180ms linear,
              background 180ms linear,
              box-shadow 180ms linear;
}
.tabs__dedo--listo { opacity: 1; }
.tabs--tocando .tabs__dedo {
  background: var(--primario-linea);
  box-shadow: 0 0 0 5px var(--primario-suave);
}
/* Mientras el dedo arrastra, el círculo va pegado a la posición real:
   sin transición, un repintado por cuadro. Al soltar vuelve la curva
   y el círculo se asienta solo sobre la pestaña.                        */
.tabs__dedo--libre {
  transition: background 180ms linear, box-shadow 180ms linear, opacity 180ms linear;
}

.tab {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--hueco-3);
  padding: var(--hueco-5) var(--hueco-2) var(--hueco-3);
  color: var(--apagado);
  font-size: var(--tam-10-5); font-weight: var(--peso-570); letter-spacing: -.005em;
  transition: color var(--med) var(--sal);
}
.tab svg { width: 23px; height: 23px; transition: transform var(--med) var(--sal); }
.tab[aria-current="page"] { color: var(--primario-texto); }
.tab--previa { color: var(--primario-texto); }
.tab--previa svg { transform: scale(1.06); }
.tab__marca {
  position: absolute; top: 3px; right: calc(50% - 16px);
  min-width: 8px; height: 8px; border-radius: 999px;
  background: var(--acento-punto);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ================================================================= hoja */
.capa[hidden] { display: none; }
.capa {
  position: absolute; inset: 0; z-index: var(--z-velo);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.velo {
  position: absolute; inset: 0;
  background: oklch(0.16 0.02 265 / var(--alfa-44));
  animation: aparece var(--med) linear both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* La hoja sube desde abajo y se queda con tope de ancho, centrada: en teléfono
   ocupa lo mismo de siempre y en un monitor no se vuelve una franja de 1.180 px
   con dos renglones dentro. */
.hoja {
  position: relative; z-index: var(--z-hoja);
  width: min(100%, 560px);
  margin-inline: auto;
  background: var(--bg);
  border-radius: var(--r4) var(--r4) 0 0;
  max-height: 88%;
  display: flex; flex-direction: column;
  animation: sube-hoja var(--lento) var(--sal) both;
  box-shadow: var(--sombra-alta);
}
@keyframes sube-hoja { from { transform: translateY(100%); } to { transform: none; } }
.hoja--sale { animation: baja-hoja var(--rap) ease-in both; }
@keyframes baja-hoja { to { transform: translateY(100%); } }

.hoja__asa {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--linea-2);
  margin: var(--hueco-9) auto 0; flex: none;
}
.hoja__cabeza { padding: var(--hueco-14) var(--margen) var(--hueco-4); }
.hoja__cuerpo { padding: var(--hueco-8) var(--margen) var(--hueco-4); overflow-y: auto; scrollbar-width: none; }
.hoja__cuerpo::-webkit-scrollbar { display: none; }
.hoja__pie {
  padding: var(--hueco-14) var(--margen) calc(var(--hueco-16) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--hueco-9);
}

.renglon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hueco-14);
  padding: var(--hueco-11) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--tam-14);
}
.renglon:last-child { border-bottom: 0; }
.renglon__clave { color: var(--apagado); }
.renglon__valor { font-weight: var(--peso-570); text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================== avisador */
.avisador {
  position: absolute; left: 14px; right: 14px; bottom: 16px;
  width: min(100% - 28px, 420px);
  margin-inline: auto;
  z-index: var(--z-aviso);
  display: flex; flex-direction: column; gap: var(--hueco-8);
  pointer-events: none;
}
/* Con la barra flotante presente, el aviso se levanta para no taparla. */
#tabs:not([hidden]) ~ .avisador { bottom: calc(88px + env(safe-area-inset-bottom)); }
.tostada {
  display: flex; align-items: center; gap: var(--hueco-10);
  padding: var(--hueco-12) var(--hueco-14);
  border-radius: var(--r2);
  background: oklch(0.22 0.014 160);
  color: oklch(0.98 0 0);
  font-size: var(--tam-13-5); font-weight: var(--peso-540); line-height: 1.35;
  box-shadow: var(--sombra-media);
  animation: tostada-entra var(--lento) var(--sal) both;
}
html[data-tema="oscuro"] .tostada { background: oklch(0.32 0.014 160); }
.tostada--sale { animation: tostada-sale var(--med) ease-in both; }
.tostada svg { width: 18px; height: 18px; }
.tostada--bien svg { color: var(--tostada-bien); }
.tostada--mal  svg { color: var(--tostada-mal); }
@keyframes tostada-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tostada-sale  { to { opacity: 0; transform: translateY(8px); } }

/* ================================================================ vacío */
.vacio {
  text-align: center;
  padding: var(--hueco-34) var(--hueco-22);
  border: 1px dashed var(--linea-2);
  border-radius: var(--r3);
}
.vacio__icono {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto var(--hueco-13);
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--apagado);
}
.vacio h3 { font-size: var(--tam-15); font-weight: var(--peso-620); letter-spacing: -.012em; }
.vacio p { font-size: var(--tam-13-5); color: var(--apagado); margin-top: var(--hueco-5); line-height: 1.5; }
.vacio .btn { margin-top: var(--hueco-15); }

/* =============================================================== formas */
.campo { display: flex; flex-direction: column; gap: var(--hueco-7); }
.campo__nombre { font-size: var(--tam-13); font-weight: var(--peso-580); color: var(--tinta-2); }
.campo__pista { font-size: var(--tam-12); color: var(--apagado); }

.entrada, .area, .lista {
  width: 100%;
  padding: var(--hueco-12) var(--hueco-13);
  border: 1px solid var(--linea-2);
  border-radius: var(--r2);
  background: var(--bg);
  font-size: var(--tam-15);
  transition: border-color var(--rap) var(--sal), box-shadow var(--rap) var(--sal);
  appearance: none;
}
.entrada::placeholder, .area::placeholder { color: var(--apagado); opacity: 1; }
.entrada:focus, .area:focus, .lista:focus {
  outline: none;
  border-color: var(--primario-texto);
  box-shadow: 0 0 0 3px var(--primario-suave);
}
.area { min-height: 82px; resize: none; line-height: 1.45; }
.lista {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--hueco-34);
}

.contador { display: flex; align-items: center; gap: var(--hueco-12); }
.contador__btn {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--linea-2);
  display: grid; place-items: center;
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal);
}
.contador__btn:hover:not(:disabled) { background: var(--superficie-2); }
.contador__btn:disabled { opacity: var(--alfa-35); cursor: not-allowed; }
.contador__valor {
  font-size: var(--tam-17); font-weight: var(--peso-640); min-width: 34px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.contador__valor--late { animation: late-num 240ms var(--sal); }
@keyframes late-num {
  0%   { transform: scale(.68); opacity: var(--alfa-45); }
  100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------- acceso */
/* Entrar es una columna angosta con su teclado: estirarla a lo ancho de un
   monitor dejaría el teclado perdido en medio de un campo vacío. Tope y al
   centro. En teléfono `min()` da el ancho completo, igual que siempre. */
.acceso {
  min-height: 100%;
  width: min(100%, 420px);
  margin-inline: auto;
  display: flex; flex-direction: column;
  padding: var(--hueco-30) var(--hueco-26) calc(var(--hueco-26) + env(safe-area-inset-bottom));
}
/* stretch, no center: si no, los hijos encogen al ancho de su contenido
   y el teclado sale angosto. El centrado se hace con text-align.        */
.acceso { align-items: stretch; text-align: center; }
.acceso > .marca-torre { align-self: center; }
.acceso__marca {
  width: 132px; padding: var(--hueco-10); border-radius: 22px;
  background: oklch(1 0 0);
  box-shadow: var(--sombra-baja);
  margin-top: var(--hueco-10);
}
.acceso__marca img { width: 100%; height: auto; }
.acceso h1 { font-size: var(--tam-fluido-5); font-weight: var(--peso-700); letter-spacing: -.03em; line-height: 1.14; margin-top: var(--hueco-20); }
.acceso p { font-size: var(--tam-14-5); color: var(--apagado); margin-top: var(--hueco-6); line-height: 1.5; }
.acceso__cambio {
  font-size: var(--tam-13); font-weight: var(--peso-570); color: var(--primario-texto);
  margin-top: var(--hueco-16); padding: var(--hueco-6) var(--hueco-2);
}
.acceso__pie { margin-top: auto; padding-top: var(--hueco-16); text-align: center; }
.acceso__pie small { font-size: var(--tam-11-5); color: var(--apagado); line-height: 1.6; }
.acceso__pie strong { font-weight: var(--peso-600); color: var(--tinta-2); }
.error-forma { font-size: var(--tam-13); color: var(--peligro-texto); font-weight: var(--peso-540); }

/* ------------------------------------------------- acceso · paso 1 depto */
.buscador { position: relative; margin-top: var(--hueco-22); }
.buscador svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--apagado); pointer-events: none;
}
.buscador .entrada { padding-left: var(--hueco-40); }

.lista-deptos { display: flex; flex-direction: column; gap: var(--hueco-7); margin-top: var(--hueco-13); }
.lista-deptos:empty::after {
  content: "Ningún departamento coincide.";
  display: block; padding: var(--hueco-22) 0; text-align: center;
  font-size: var(--tam-13-5); color: var(--apagado);
}

.tejuela-id {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--tinta-2);
  font-size: var(--tam-13); font-weight: var(--peso-640); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tejuela-id--admin { background: var(--primario-suave); color: var(--primario-texto); }
.tejuela-id--admin svg { width: 21px; height: 21px; }

/* --------------------------------------------------- acceso · paso 2 pin */
.pin-paso { min-height: 100%; display: flex; flex-direction: column; }
.pin-quien { display: flex; align-items: center; gap: var(--hueco-13); margin-top: var(--hueco-24); }
.pin-quien strong { display: block; font-size: var(--tam-16); font-weight: var(--peso-640); letter-spacing: -.016em; }
.pin-quien small { display: block; font-size: var(--tam-13); color: var(--apagado); margin-top: var(--hueco-1); }

.pin-titulo { margin-top: var(--hueco-24); text-align: center; font-size: var(--tam-15); font-weight: var(--peso-570); color: var(--tinta-2); }

.marca-boton { align-self: center; border-radius: 24%; display: block; }
.marca-boton:active { transform: scale(.96); transition: transform 120ms var(--sal); }

/* ---------------------------------------- captura del número de depto */
.depto-campo {
  display: flex; align-items: center; justify-content: center; gap: var(--hueco-8);
  margin-top: var(--hueco-22);
}
.depto-campo__torre {
  font-size: var(--tam-27); font-weight: var(--peso-660); letter-spacing: -.02em; color: var(--tinta-2);
}
.depto-campo__guion { font-size: var(--tam-25); color: var(--apagado); margin: 0 var(--hueco-2); }
.depto-campo__digito {
  width: 50px; height: 62px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--superficie-2);
  font-size: var(--tam-28); font-weight: var(--peso-640); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 180ms var(--sal), background 180ms var(--sal);
}
.depto-campo__digito--turno {
  background: var(--primario-suave);
  box-shadow: inset 0 0 0 2px var(--primario-texto);
}
.depto-campo--mal .depto-campo__digito {
  background: var(--peligro-suave);
  box-shadow: inset 0 0 0 2px var(--peligro);
  color: var(--peligro-texto);
}
.depto-campo--mal { animation: sacude 440ms var(--sal); }

/* ------------------------------------------------- acceso restringido */
.acceso--admin { justify-content: flex-start; }
.sello-admin {
  align-self: center;
  display: inline-flex; align-items: center; gap: var(--hueco-7);
  margin-top: var(--hueco-12); padding: var(--hueco-7) var(--hueco-14);
  border-radius: 999px;
  background: var(--primario-suave); color: var(--primario-texto);
  font-size: var(--tam-12-5); font-weight: var(--peso-620);
}
.sello-admin svg { width: 15px; height: 15px; }

.forma-admin {
  margin-top: var(--hueco-26);
  display: flex; flex-direction: column; gap: var(--hueco-15);
  text-align: left;
}
.forma-admin .pin-recado { margin-top: 0; text-align: left; }

.candado-aviso {
  margin: auto auto 0;
  display: flex; align-items: center; gap: var(--hueco-9);
  max-width: 300px; padding: var(--hueco-14) var(--hueco-16);
  border-radius: var(--r3);
  background: var(--peligro-suave); color: var(--peligro-texto);
  font-size: var(--tam-13); line-height: 1.45; text-align: left;
}
.candado-aviso svg { width: 20px; height: 20px; flex: none; }

.puntos { display: flex; justify-content: center; gap: var(--hueco-22); margin-top: var(--hueco-20); height: 17px; }
.puntos--seis { gap: var(--hueco-15); }
.punto {
  width: 16px; height: 16px; border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--linea-2);
  transition: background var(--rap) var(--sal), box-shadow var(--rap) var(--sal);
}
.punto--lleno {
  background: var(--primario);
  box-shadow: inset 0 0 0 1.6px var(--primario);
  animation: brinca-punto 300ms var(--sal);
}
@keyframes brinca-punto {
  0% { transform: scale(.55); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.puntos--mal .punto {
  background: var(--peligro);
  box-shadow: inset 0 0 0 1.6px var(--peligro);
  animation: none;
}
.puntos--mal { animation: sacude 440ms var(--sal); }
@keyframes sacude {
  0%, 100% { transform: none; }
  16% { transform: translateX(-8px); }
  36% { transform: translateX(7px); }
  58% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.pin-recado {
  margin-top: var(--hueco-13); text-align: center; min-height: 18px;
  font-size: var(--tam-13); font-weight: var(--peso-540); color: var(--peligro-texto);
}

.teclado {
  margin-top: auto; padding-top: var(--hueco-22);
  width: 100%; max-width: 296px;
  margin-left: auto; margin-right: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--hueco-13) var(--hueco-20);
  justify-items: center;
}

/* Teclas redondas, translúcidas, como el teclado de bloqueo del iPhone.
   El realce entra instantáneo al presionar y se desvanece al soltar.    */
.tecla {
  width: 100%; max-width: 74px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: oklch(0.2 0.02 265 / var(--alfa-065));
  color: var(--tinta);
  font-size: var(--tam-27); font-weight: var(--peso-420); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background 420ms var(--sal), transform 420ms var(--sal);
}
html[data-tema="oscuro"] .tecla { background: oklch(1 0 0 / var(--alfa-10)); }

.tecla:hover { background: oklch(0.2 0.02 265 / var(--alfa-10)); }
html[data-tema="oscuro"] .tecla:hover { background: oklch(1 0 0 / var(--alfa-14)); }

.tecla:active {
  background: oklch(0.2 0.02 265 / var(--alfa-19));
  transform: scale(.94);
  transition-duration: 0ms;
}
html[data-tema="oscuro"] .tecla:active { background: oklch(1 0 0 / var(--alfa-26)); }

.tecla--pelada { background: transparent; }
.tecla--pelada:hover { background: oklch(0.2 0.02 265 / var(--alfa-065)); }
html[data-tema="oscuro"] .tecla--pelada:hover { background: oklch(1 0 0 / var(--alfa-10)); }
.tecla--pelada svg { width: 26px; height: 26px; color: var(--tinta-2); }
.tecla--hueco { visibility: hidden; pointer-events: none; }

/* --------------------------------------------------------------- avisos */
.aviso {
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  padding: var(--hueco-14);
  background: var(--bg);
}
.aviso--alto { background: var(--acento-suave); border-color: transparent; }
.aviso__cabeza { display: flex; align-items: center; gap: var(--hueco-8); margin-bottom: var(--hueco-6); }
.aviso__cabeza h3 { font-size: var(--tam-14-5); font-weight: var(--peso-620); letter-spacing: -.012em; flex: 1; }
.aviso__cuerpo { font-size: var(--tam-13-5); line-height: 1.55; color: var(--tinta-2); }
.aviso--alto .aviso__cuerpo { color: var(--acento-texto); }
.aviso__pie { font-size: var(--tam-11-5); color: var(--apagado); margin-top: var(--hueco-9); }
.aviso--alto .aviso__pie { color: var(--acento-texto); opacity: var(--alfa-85); }

/* --------------------------------------------------------------- perfil */
.identidad {
  display: flex; align-items: center; gap: var(--hueco-14);
  padding: var(--hueco-4) 0 var(--hueco-18);
}
.avatar {
  width: 56px; height: 56px; border-radius: 19px; flex: none;
  background: var(--primario); color: var(--primario-tinta);
  display: grid; place-items: center;
  font-size: var(--tam-17); font-weight: var(--peso-640); letter-spacing: -.02em;
}
.identidad h1 { font-size: var(--tam-19); font-weight: var(--peso-660); letter-spacing: -.02em; }
.identidad p { font-size: var(--tam-13); color: var(--apagado); margin-top: var(--hueco-2); }

.menu { border: 1px solid var(--linea); border-radius: var(--r3); overflow: hidden; }
.menu__fila {
  display: flex; align-items: center; gap: var(--hueco-12);
  width: 100%; text-align: left;
  padding: var(--hueco-13) var(--hueco-14);
  border-bottom: 1px solid var(--linea);
  font-size: var(--tam-14-5);
  transition: background var(--rap) var(--sal);
}
.menu__fila:last-child { border-bottom: 0; }
.menu__fila:hover { background: var(--superficie); }
.menu__fila svg { width: 19px; height: 19px; color: var(--apagado); }
.menu__fila span { flex: 1; }
.menu__fila small { color: var(--apagado); font-size: var(--tam-13); font-variant-numeric: tabular-nums; }
.menu__fila--riesgo { color: var(--peligro-texto); }
.menu__fila--riesgo svg { color: currentColor; }

/* ---------------------------------------------------------------- admin */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--hueco-9);
}
.metrica {
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  padding: var(--hueco-13);
}
.metrica__num { font-size: var(--tam-fluido-6); font-weight: var(--peso-680); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metrica__que { font-size: var(--tam-12-5); color: var(--apagado); margin-top: var(--hueco-3); }
.metrica--alerta { background: var(--acento-suave); border-color: transparent; }
.metrica--alerta .metrica__num, .metrica--alerta .metrica__que { color: var(--acento-texto); }

.medidor { height: 5px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-top: var(--hueco-9); }
.medidor i { display: block; height: 100%; border-radius: 999px; background: var(--primario); transition: width var(--lento) var(--sal); }

.solicitud { border: 1px solid var(--linea); border-radius: var(--r3); padding: var(--hueco-14); }
.solicitud__cabeza { display: flex; align-items: flex-start; gap: var(--hueco-11); }
.solicitud__botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--hueco-8); margin-top: var(--hueco-13);
}
.solicitud__nota {
  font-size: var(--tam-13); color: var(--tinta-2); line-height: 1.5;
  background: var(--superficie); border-radius: var(--r1);
  padding: var(--hueco-9) var(--hueco-11); margin-top: var(--hueco-11);
}

.cronologia { position: relative; padding-left: var(--hueco-62); }
.cronologia__hora {
  position: absolute; left: 0; width: 48px; text-align: right;
  font-size: var(--tam-12); font-weight: var(--peso-600); color: var(--apagado);
  font-variant-numeric: tabular-nums; padding-top: var(--hueco-13);
}

/* ==================================================== marca de la torre */
.marca-torre {
  width: var(--mt, 36px); height: var(--mt, 36px);
  flex: none; border-radius: 28%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--primario);
  color: var(--primario-tinta);
}
.marca-torre svg { width: 60%; height: 60%; }
.marca-torre img { width: 100%; height: 100%; object-fit: cover; }

.marca-torre--grande { border-radius: 24%; box-shadow: var(--sombra-media); }

.rotulo-torre {
  display: flex; align-items: center; gap: var(--hueco-11);
  min-width: 0;
}
.rotulo-torre__texto { min-width: 0; }
.rotulo-torre__nombre {
  display: block; font-size: var(--tam-15); font-weight: var(--peso-650); letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rotulo-torre__pie { display: block; font-size: var(--tam-12); color: var(--apagado); }

/* ============================================== marca Santos Solutions */
/* El PNG trae el lockup completo sobre fondo claro. Para el isotipo suelto
   recortamos el escudo por CSS y lo montamos en una placa blanca, así se ve
   bien en tema claro y oscuro sin necesitar un segundo archivo.            */
.isotipo {
  position: relative; flex: none;
  width: var(--iso, 34px); height: var(--iso, 34px);
  border-radius: 27%;
  overflow: hidden;
  background: oklch(1 0 0);
  box-shadow: inset 0 0 0 1px oklch(0.2 0.02 265 / var(--alfa-09));
}
.isotipo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.credito {
  display: flex; align-items: center; justify-content: center; gap: var(--hueco-11);
  width: 100%;
  margin-top: var(--hueco-26); padding: var(--hueco-13);
  border-radius: var(--r3);
  transition: background var(--rap) var(--sal);
}
button.credito:hover { background: var(--superficie); }
.credito__texto { text-align: left; }
.credito__texto small { display: block; font-size: var(--tam-11); color: var(--apagado); line-height: 1.4; }
.credito__texto strong { display: block; font-size: var(--tam-12-5); font-weight: var(--peso-620); color: var(--tinta-2); letter-spacing: -.01em; }

.firma {
  display: flex; align-items: center; justify-content: center; gap: var(--hueco-9);
  margin-top: var(--hueco-24); padding-top: var(--hueco-16);
  border-top: 1px solid var(--linea);
  opacity: var(--alfa-75);
}
.firma small { font-size: var(--tam-11-5); color: var(--apagado); }
.firma strong { font-weight: var(--peso-600); color: var(--tinta-2); }

.marca-grande {
  width: 168px; padding: var(--hueco-16); margin: var(--hueco-6) auto 0;
  background: oklch(1 0 0);
  border-radius: 26px;
  box-shadow: var(--sombra-baja), inset 0 0 0 1px oklch(0.2 0.02 265 / var(--alfa-07));
}
.marca-grande img { width: 100%; height: auto; }

/* ================================================ caseta de vigilancia */
.caseta {
  border-radius: var(--r4);
  background: var(--primario);
  color: var(--primario-tinta);
  padding: var(--hueco-16);
  margin-top: var(--hueco-4);
}
.caseta__fila { display: flex; align-items: center; gap: var(--hueco-12); }
.caseta__ico {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: oklch(1 0 0 / var(--alfa-16));
}
html[data-tema="oscuro"] .caseta__ico { background: oklch(0 0 0 / var(--alfa-14)); }
.caseta__ico svg { width: 21px; height: 21px; }
.caseta__nombre { font-size: var(--tam-16); font-weight: var(--peso-650); letter-spacing: -.016em; }
.caseta__pie { font-size: var(--tam-12-5); opacity: var(--alfa-82); margin-top: var(--hueco-1); }

.caseta__tel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hueco-12);
  width: 100%; margin-top: var(--hueco-14); padding: var(--hueco-11) var(--hueco-13);
  border-radius: var(--r2);
  background: oklch(1 0 0 / var(--alfa-14));
  color: inherit;
  transition: background var(--rap) var(--sal), transform var(--rap) var(--sal);
}
html[data-tema="oscuro"] .caseta__tel { background: oklch(0 0 0 / var(--alfa-16)); }
.caseta__tel:hover { background: oklch(1 0 0 / var(--alfa-22)); }
html[data-tema="oscuro"] .caseta__tel:hover { background: oklch(0 0 0 / var(--alfa-24)); }
.caseta__tel:active { transform: scale(.985); }
.caseta__num { font-size: var(--tam-17); font-weight: var(--peso-640); letter-spacing: -.01em; }
.caseta__cta { display: inline-flex; align-items: center; gap: var(--hueco-6); font-size: var(--tam-13); font-weight: var(--peso-600); }
.caseta__cta svg { width: 16px; height: 16px; }

/* ------------------------------------------------ avisos a la caseta */
.acceso-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--hueco-10);
  padding: var(--hueco-13);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  background: var(--bg);
  text-align: left;
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal),
              transform var(--rap) var(--sal);
}
.acceso-op:hover { border-color: var(--linea-2); background: var(--superficie); }
.acceso-op:active { transform: scale(.97); }
.acceso-op__nombre { display: block; font-size: var(--tam-14-5); font-weight: var(--peso-620); letter-spacing: -.012em; }
.acceso-op__pie { display: block; font-size: var(--tam-11-5); color: var(--apagado); margin-top: var(--hueco-2); line-height: 1.3; }

/* ------------------------------------------------ interruptor de tema */
.interruptor {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: var(--hueco-4);
  background: var(--superficie-2);
  border-radius: 13px;
  isolation: isolate;
}
.interruptor__pulgar {
  position: absolute; z-index: 0;
  top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--sombra-baja);
  transition: transform 360ms var(--sal);
  will-change: transform;
}
.interruptor[data-pos="1"] .interruptor__pulgar { transform: translateX(100%); }
.interruptor button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hueco-7);
  height: 38px; border-radius: 10px;
  font-size: var(--tam-13-5); font-weight: var(--peso-570);
  color: var(--apagado);
  transition: color var(--med) var(--sal);
}
.interruptor button svg { width: 17px; height: 17px; transition: transform 420ms var(--sal); }
.interruptor button[aria-pressed="true"] { color: var(--tinta); font-weight: var(--peso-620); }
.interruptor button[aria-pressed="true"] svg { transform: rotate(360deg); }

/* ============================================================= reportes */
.filtros {
  display: flex; gap: var(--hueco-6);
  overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--margen) var(--hueco-2); margin: 0 calc(-1 * var(--margen)) var(--hueco-14);
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; height: 32px; padding: 0 var(--hueco-13); border-radius: 999px;
  font-size: var(--tam-13); font-weight: var(--peso-560); white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta-2);
  transition: background var(--rap) var(--sal), color var(--rap) var(--sal);
}
.filtro:hover { background: var(--linea); }
.filtro[aria-pressed="true"] { background: var(--primario); color: var(--primario-tinta); }

.reporte {
  display: flex; gap: var(--hueco-13); align-items: flex-start;
  width: 100%; text-align: left;
  padding: var(--hueco-13);
  border: 1px solid var(--linea);
  border-radius: var(--r3);
  background: var(--bg);
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal),
              transform var(--rap) var(--sal);
}
.reporte:hover { border-color: var(--linea-2); background: var(--superficie); }
.reporte:active { transform: scale(.99); }
.reporte__cuerpo { flex: 1; min-width: 0; }
.reporte__folio {
  font-size: var(--tam-11); font-weight: var(--peso-650); letter-spacing: .05em;
  color: var(--apagado); font-variant-numeric: tabular-nums;
}
.reporte__titulo {
  font-size: var(--tam-14-5); font-weight: var(--peso-600); letter-spacing: -.012em;
  margin-top: var(--hueco-2); line-height: 1.32;
}
.reporte__pie { font-size: var(--tam-12-5); color: var(--apagado); margin-top: var(--hueco-3); }
.reporte__marcas { display: flex; gap: var(--hueco-6); flex-wrap: wrap; margin-top: var(--hueco-9); }
.reporte__mini {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  object-fit: cover; background: var(--superficie-2);
}

.rejilla-cat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));
  gap: var(--hueco-8);
}
.cat {
  display: flex; flex-direction: column; align-items: center; gap: var(--hueco-7);
  padding: var(--hueco-13) var(--hueco-6);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  background: var(--bg);
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal),
              color var(--rap) var(--sal), transform var(--rap) var(--sal);
}
.cat:active { transform: scale(.96); }
.cat svg { width: 22px; height: 22px; color: var(--tinta-2); }
.cat span { font-size: var(--tam-11-5); font-weight: var(--peso-560); text-align: center; line-height: 1.2; color: var(--tinta-2); }
.cat[aria-pressed="true"] {
  background: var(--primario); border-color: var(--primario); color: var(--primario-tinta);
}
.cat[aria-pressed="true"] svg, .cat[aria-pressed="true"] span { color: inherit; }

.foto-campo {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hueco-8);
  min-height: 96px; padding: var(--hueco-16);
  border: 1px dashed var(--linea-2);
  border-radius: var(--r2);
  color: var(--apagado);
  transition: border-color var(--rap) var(--sal), background var(--rap) var(--sal);
  cursor: pointer;
}
.foto-campo:hover { border-color: var(--primario-linea); background: var(--primario-suave); }
.foto-campo span { font-size: var(--tam-13); font-weight: var(--peso-550); }
.foto-campo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.foto-previa { position: relative; border-radius: var(--r2); overflow: hidden; }
.foto-previa img { width: 100%; height: 168px; object-fit: cover; }
.foto-previa button {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: oklch(0.18 0.02 265 / var(--alfa-78)); color: oklch(0.99 0 0);
  backdrop-filter: blur(4px);
}
.foto-previa button svg { width: 15px; height: 15px; }

.bitacora { position: relative; padding-left: var(--hueco-26); }
.bitacora::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 12px;
  width: 1.5px; background: var(--linea);
}
.paso { position: relative; padding: 0 0 var(--hueco-18); }
.paso:last-child { padding-bottom: 0; }
.paso::before {
  content: ""; position: absolute; left: -25px; top: 5px;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--linea-2);
  box-shadow: 0 0 0 3px var(--bg);
}
.paso--vivo::before { background: var(--primario); }
.paso--listo::before { background: var(--exito-punto); }
.paso__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--hueco-10);
  font-size: var(--tam-13-5); font-weight: var(--peso-600); letter-spacing: -.01em;
}
.paso__cuando { font-size: var(--tam-11-5); font-weight: var(--peso-500); color: var(--apagado); white-space: nowrap; }
.paso__nota { font-size: var(--tam-13); color: var(--tinta-2); line-height: 1.5; margin-top: var(--hueco-3); }
.paso__quien { font-size: var(--tam-11-5); color: var(--apagado); margin-top: var(--hueco-3); }

/* Pantallas cortas (iPhone SE y parecidos): el acceso se compacta para que
   el teclado quepa completo sin tener que hacer scroll para marcar el PIN.

   ESTA CONSULTA SE QUEDA, y se comprobó una a una antes de decidirlo. La 007
   se llevó las otras dos consultas de altura porque solo existían para
   encajar el teléfono dibujado dentro de la ventana. Ésta no: `max-height`
   mide la VENTANA, no la pieza, así que nunca disparó por culpa del marco.
   Dispara en un iPhone SE de verdad —y ahora también en una ventana de
   escritorio baja— que es exactamente cuando el teclado necesita caber. */
@media (max-height: 740px) {
  .acceso { padding: var(--hueco-16) var(--hueco-22) calc(var(--hueco-14) + env(safe-area-inset-bottom)); }
  .acceso > .marca-torre { width: 58px; height: 58px; }
  .acceso h1 { font-size: var(--tam-22); margin-top: var(--hueco-12); }
  .acceso p { font-size: var(--tam-13-5); margin-top: var(--hueco-4); }
  .acceso__cambio { margin-top: var(--hueco-8); }
  .acceso__pie { padding-top: var(--hueco-10); }

  .pin-titulo { margin-top: var(--hueco-16); font-size: var(--tam-14); }
  .puntos { margin-top: var(--hueco-14); gap: var(--hueco-19); }
  .pin-recado { margin-top: var(--hueco-9); min-height: 16px; font-size: var(--tam-12-5); }

  .teclado { padding-top: var(--hueco-10); max-width: 252px; gap: var(--hueco-9) var(--hueco-16); }
  .tecla { max-width: 62px; font-size: var(--tam-23); }
  .tecla--pelada svg { width: 23px; height: 23px; }

  .firma { margin-top: var(--hueco-14); padding-top: var(--hueco-12); }
}

/* Aquí vivía «responsivo real»: un corte en 900 px donde la aplicación
   dejaba de ser un teléfono dibujado y pasaba a ocupar la pantalla. Ya no
   hace falta ningún corte, porque eso es lo único que hace el fichero: no
   hay un ancho en el que la aplicación se comporte de otra manera.
   Con él murió también la consulta que ajustaba la altura del teléfono
   dibujado en ventanas bajas. Las piezas se acomodan solas con `clamp()`,
   `min()` y rejillas que se reparten, no con cortes de ancho. */

/* ========================================================= movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .vista > * { animation: aparece 1ms linear both; }
}