/* ============================================================
   TELECAB — identidad visual: tokens globales + base + componentes
   ============================================================
   La app entera se pinta desde aquí. Las vistas usan clases de Tailwind que
   apuntan a estos tokens (bg-telecab-card, text-telecab-gold, …), así que
   cambiar la identidad es cambiar este fichero: NINGUNA vista lleva colores
   propios.

   Los colores van como CANALES RGB ("r g b") para que Tailwind pueda aplicarles
   opacidad (bg-telecab-gold/15, border-telecab-red/40) vía rgb(var(--tc-*) /
   <alpha-value>).

   LA IDEA VISUAL (27/09/2026, sustituye a la del 05/09): CORPORATIVA. Camilo:
   «más moderna, elegante y un poco más minimalista, no quiero tanto emoji ni
   colores combinados». Sale de los colores del logo —negro, oro y plata— y de
   tres reglas:
     1. UN SOLO ACENTO. El oro del logo marca lo que se puede pulsar o lo que
        está elegido, y nada más. El resto es gris: grafito en oscuro, gris
        claro en claro. Los colores de estado (rojo, verde, naranja) quedan
        para lo que de verdad es un estado.
     2. SUPERFICIES LISAS. Sin cristal, sin resplandor de fondo, sin grano, sin
        degradados, sin sombras de color. Una tarjeta es una superficie con un
        borde fino; lo que flota (menús, diálogos) lleva una sombra neutra.
     3. LA TIPOGRAFÍA ORDENA. IBM Plex Sans: sobria, con cifras tabulares,
        pensada para pantallas de gestión.
   Las superficies son iguales en todos los temas; lo que cambia de un tema a
   otro es el acento. Así cada uno conserva su color sin que la pantalla se
   convierta en un arcoíris. */

/* ===== OSCURO (grafito): el tema por defecto ===== */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --tc-dark: 14 16 19;          /* el fondo de la página */
  --tc-card: 22 24 28;          /* superficie: tarjetas, menú */
  --tc-card2: 31 34 39;         /* superficie elevada / hover */
  --tc-border: 44 48 55;        /* la línea fina */
  --tc-campo: 14 16 19;         /* el interior de un campo: hundido, del color de la página */
  --tc-gold: 227 178 60;        /* EL ACENTO: el oro del logo */
  --tc-gold-soft: 238 202 118;
  --tc-gold-deep: 192 146 34;
  --tc-on-gold: 20 17 10;       /* el texto sobre el acento */
  --tc-azul: 112 150 208;       /* informativo: azul acero, apagado */
  --tc-red: 224 92 84;
  --tc-red-hover: 198 72 66;
  --tc-green: 76 178 130;
  --tc-warn: 222 142 62;        /* naranja de aviso: distinto del acento a propósito */
  --tc-violet: 146 132 204;     /* reincidencia / escalado */
  --tc-text: 232 234 237;
  --tc-muted: 142 148 158;
  --tc-scroll: 52 56 64;
  --tc-scroll-hover: 88 94 104;
  --tc-sombra: 0 1px 2px rgb(0 0 0 / .35);
  --tc-sombra-alta: 0 16px 40px -12px rgb(0 0 0 / .65), 0 2px 6px rgb(0 0 0 / .3);
  /* Del diseño anterior, que tenía resplandor y cristal. Se quedan como
     variables (alguna vista las lee) pero ya no pintan nada. */
  --tc-halo1: 0 0 0; --tc-halo1-a: 0;
  --tc-halo2: 0 0 0; --tc-halo2-a: 0;
  --tc-halo3: 0 0 0; --tc-halo3-a: 0;
  --tc-card-a: 1;
  --tc-brillo: 255 255 255;
}

/* ===== Temas oscuros con otro acento: las MISMAS superficies, otro acento ===== */
:root[data-theme='azul']    { --tc-gold: 104 152 228; --tc-gold-soft: 148 184 238; --tc-gold-deep: 70 118 200; --tc-azul: 150 160 176; }
:root[data-theme='verde']   { --tc-gold: 76 186 138;  --tc-gold-soft: 124 212 174; --tc-gold-deep: 46 150 106; --tc-green: 120 196 150; }
:root[data-theme='purpura'] { --tc-gold: 152 134 226; --tc-gold-soft: 186 172 240; --tc-gold-deep: 118 98 200; }
:root[data-theme='rosa']    { --tc-gold: 222 116 162; --tc-gold-soft: 238 162 196; --tc-gold-deep: 190 76 128; }
:root[data-theme='cian']    { --tc-gold: 64 188 184;  --tc-gold-soft: 122 214 210; --tc-gold-deep: 34 150 146; --tc-azul: 150 160 176; }
:root[data-theme='naranja'] { --tc-gold: 228 136 62;  --tc-gold-soft: 240 176 118; --tc-gold-deep: 194 102 32; --tc-warn: 220 170 60; }
:root[data-theme='contraste'] {
  color-scheme: dark;
  --tc-dark: 0 0 0; --tc-card: 12 12 12; --tc-card2: 28 28 28; --tc-border: 110 110 110; --tc-campo: 0 0 0;
  --tc-text: 255 255 255; --tc-muted: 210 210 210;
  --tc-gold: 255 214 10; --tc-gold-soft: 255 229 92; --tc-gold-deep: 224 179 0; --tc-on-gold: 0 0 0;
  --tc-azul: 120 180 255; --tc-green: 74 222 128; --tc-red: 248 113 113;
}

/* ===== CLARO (y los claros con otro acento) ===== */
:root[data-theme='light'],
:root[data-theme^='claro-'] {
  color-scheme: light;
  --tc-dark: 244 245 247;       /* la página: gris muy claro */
  --tc-card: 255 255 255;
  --tc-card2: 241 243 245;
  --tc-border: 222 226 231;
  --tc-campo: 255 255 255;
  --tc-gold: 150 106 0;         /* oro oscurecido: legible como texto sobre blanco (4,8:1) */
  --tc-gold-soft: 196 145 20;
  --tc-gold-deep: 120 84 0;
  --tc-on-gold: 255 255 255;
  --tc-azul: 44 98 170;
  --tc-red: 196 50 46;
  --tc-red-hover: 170 40 38;
  --tc-green: 22 122 82;
  --tc-warn: 176 90 10;
  --tc-violet: 104 76 190;
  --tc-text: 24 28 34;
  --tc-muted: 98 106 118;
  --tc-scroll: 206 211 218;
  --tc-scroll-hover: 160 166 175;
  --tc-sombra: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .06);
  --tc-sombra-alta: 0 16px 40px -12px rgb(16 24 40 / .22), 0 2px 6px rgb(16 24 40 / .08);
}
:root[data-theme='claro-azul']    { --tc-gold: 29 78 170;  --tc-gold-soft: 64 112 200; --tc-gold-deep: 20 60 140; --tc-azul: 90 100 115; }
:root[data-theme='claro-verde']   { --tc-gold: 20 110 70;  --tc-gold-soft: 44 140 96;  --tc-gold-deep: 12 86 54; }
:root[data-theme='claro-rosa']    { --tc-gold: 170 30 90;  --tc-gold-soft: 200 72 130; --tc-gold-deep: 140 20 72; }
:root[data-theme='claro-purpura'] { --tc-gold: 100 60 190; --tc-gold-soft: 132 96 216; --tc-gold-deep: 80 44 160; }
:root[data-theme='claro-naranja'] { --tc-gold: 176 70 12;  --tc-gold-soft: 210 106 46; --tc-gold-deep: 144 54 8; }

/* ============================================================
   BASE
   ============================================================ */
html { font-size: 15px; }
body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { letter-spacing: -0.01em; text-wrap: balance; }
.tabular-nums, body table { font-variant-numeric: tabular-nums; }

/* EL FONDO: liso. El resplandor y el grano del diseño anterior se apagan aquí
   (las pseudocapas se quedan sin contenido) para no tener que tocar el body de
   ninguna vista. */
.app-bg { background: rgb(var(--tc-dark)); }
.app-bg::before, .app-bg::after { content: none; }

/* El foco del teclado se VE siempre, en el color del acento. */
body a:focus-visible, body button:focus-visible, body [tabindex]:focus-visible, body summary:focus-visible {
  outline: 2px solid rgb(var(--tc-gold) / .7);
  outline-offset: 2px;
}

/* ============================================================
   SUPERFICIES — todas las tarjetas de la app, de golpe
   ============================================================
   Tailwind (CDN) pinta sus utilidades DESPUÉS de esta hoja, así que para ganarle
   hay que subir la especificidad: por eso "body .clase". Se toca el aspecto de
   la superficie, no su geometría, y las vistas no se enteran. */
body .bg-telecab-card { background-color: rgb(var(--tc-card)); box-shadow: var(--tc-sombra); }
body .bg-telecab-card2 { background-color: rgb(var(--tc-card2)); }
body .border-telecab-border { border-color: rgb(var(--tc-border)); }
/* Esquinas más contenidas: redondeadas, no blandas. */
body .rounded-2xl { border-radius: .75rem; }
body .rounded-xl  { border-radius: .5rem; }
body .shadow-soft { box-shadow: var(--tc-sombra-alta); }
body .shadow-lg, body .shadow-xl { box-shadow: var(--tc-sombra-alta); }
/* Sin cristal: el desenfoque de fondo cuesta en cada fotograma y es justo el
   efecto que se quita. Los velos de los diálogos se quedan oscuros y quietos. */
body .backdrop-blur-sm, body .backdrop-blur, body .backdrop-blur-md,
body .backdrop-blur-lg, body .backdrop-blur-xl {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* El menú y la barra superior: lisos, separados por una línea. */
#menu-panel {
  background-color: rgb(var(--tc-card)) !important;
  border-right-color: rgb(var(--tc-border)) !important;
}
body > div > div > header.sticky {
  background-color: rgb(var(--tc-dark)) !important;
  border-bottom-color: rgb(var(--tc-border)) !important;
}

/* ============================================================
   MENÚ LATERAL
   ============================================================ */
#menu-panel nav a, #menu-panel nav .grupo-btn { border-radius: .5rem; }
#menu-panel nav a:hover, #menu-panel nav .grupo-btn:hover { background-color: rgb(var(--tc-text) / .05) !important; }
/* El ítem activo: fondo apenas teñido, texto normal, icono y una raya a la
   izquierda en el acento. Se lee sin gritar. */
#menu .nav-item.activo {
  background-color: rgb(var(--tc-gold) / .12) !important;
  color: rgb(var(--tc-text)) !important;
  box-shadow: inset 2px 0 0 rgb(var(--tc-gold));
  font-weight: 600;
}
#menu .nav-item.activo i { color: rgb(var(--tc-gold)) !important; }
#menu-panel .grupo-items { border-left-color: rgb(var(--tc-border)) !important; }
#menu-panel > a:first-child { border-bottom-color: rgb(var(--tc-border)) !important; }
#menu-panel > div:last-child { border-top-color: rgb(var(--tc-border)) !important; }

/* ============================================================
   BOTONES, CAMPOS, PASTILLAS
   ============================================================ */
/* Botón principal: el acento, liso. Al pasar el ratón, un punto más hondo. */
body button.bg-telecab-gold, body a.bg-telecab-gold, body .btn-primario {
  background: rgb(var(--tc-gold));
  color: rgb(var(--tc-on-gold)) !important;
  box-shadow: none;
  border: 0;
  transition: background-color .15s ease;
}
body button.bg-telecab-gold:hover:not(:disabled), body a.bg-telecab-gold:hover, body .btn-primario:hover { background: rgb(var(--tc-gold-deep)); }
/* Botones secundarios: los que llevan borde y fondo de tarjeta. */
body button.border.bg-telecab-card, body a.border.bg-telecab-card, body button.border-telecab-border.bg-telecab-card {
  background-color: rgb(var(--tc-card));
  border-color: rgb(var(--tc-border));
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body button.border.bg-telecab-card:hover, body a.border.bg-telecab-card:hover {
  background-color: rgb(var(--tc-card2));
  border-color: rgb(var(--tc-muted) / .45);
}
body button:active:not(:disabled) { transform: scale(.99); }

/* Campos: del color de la página por dentro, borde fino, el acento al enfocar. */
body input.bg-telecab-dark, body select.bg-telecab-dark, body textarea.bg-telecab-dark, .inp {
  background-color: rgb(var(--tc-campo)) !important;
  border-color: rgb(var(--tc-border)) !important;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body input.bg-telecab-dark:focus, body select.bg-telecab-dark:focus, body textarea.bg-telecab-dark:focus, .inp:focus {
  outline: none;
  border-color: rgb(var(--tc-gold) / .75) !important;
  box-shadow: 0 0 0 3px rgb(var(--tc-gold) / .16);
}

/* ── LOS DESPLEGABLES ──────────────────────────────────────────────────────
   Hay 44 repartidos por las pantallas y cada uno traía sus clases: unos
   `bg-telecab-dark`, otros `bg-telecab-card`, otros `bg-telecab-card2`, otros
   `.inp`. Solo los primeros estaban estilados, así que el resto salía con el
   gris del sistema operativo, con su flecha y su tipografía, encima de una
   interfaz que no se parece en nada.

   Se estilan TODOS por elemento, no por clase: un `<select>` es un `<select>`
   se le hayan puesto las clases que se le hayan puesto, y así el siguiente que
   alguien escriba ya nace bien.

   La flecha se dibuja con dos degradados en vez de con un SVG: un data-URI
   lleva el color escrito dentro y no podría seguir al tema, y aquí hay catorce.
   Con `rgb(var(--tc-muted))` cambia sola con cada uno. */
body select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, rgb(var(--tc-muted)) 50%),
    linear-gradient(135deg, rgb(var(--tc-muted)) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body select:hover:not(:disabled) { border-color: rgb(var(--tc-muted) / .5) !important; }
body select:focus-visible, body select:focus {
  outline: none;
  border-color: rgb(var(--tc-gold) / .7) !important;
  box-shadow: 0 0 0 3px rgb(var(--tc-gold) / .16);
}
body select:disabled { cursor: not-allowed; opacity: .55; }
/* Un desplegable de varias líneas no lleva flecha: no se despliega. */
body select[multiple], body select[size]:not([size='1']) {
  background-image: none; padding-right: .75rem; cursor: default;
}

/* La lista desplegada la pinta el sistema y no se puede maquetar; lo que sí
   admite es el color de cada opción. `color-scheme` (arriba, por tema) es lo
   que hace que en los temas claros salga clara y en los oscuros oscura. */
body select option {
  background-color: rgb(var(--tc-card));
  color: rgb(var(--tc-text));
  padding: .35rem .5rem;
}
body select option:checked, body select option:hover {
  background-color: rgb(var(--tc-card2));
  color: rgb(var(--tc-text));
}
body select option:disabled { color: rgb(var(--tc-muted) / .7); }
/* Los separadores que algunas listas usan para agrupar. */
body select optgroup {
  background-color: rgb(var(--tc-card2));
  color: rgb(var(--tc-muted));
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

::placeholder { color: rgb(var(--tc-muted) / .8); }

/* Las pastillas de estado (chips): un poco más redondas y con su filo. */
body span.rounded-md.text-xs.font-medium { border-radius: .55rem; padding-top: .2rem; padding-bottom: .2rem; }

/* ============================================================
   TABLAS
   ============================================================ */
body thead tr { border-bottom-color: rgb(var(--tc-border)) !important; }
body thead th { font-weight: 600; letter-spacing: .04em; color: rgb(var(--tc-muted)); }
body tbody tr { transition: background-color .12s ease; }
body tbody tr:hover { background-color: rgb(var(--tc-text) / .035); }
body tbody tr.border-b { border-bottom-color: rgb(var(--tc-border) / .7) !important; }

/* ============================================================
   TARJETAS DE KPI (antes, de color)
   ============================================================
   Eran cuatro degradados —oliva, índigo, magenta, ámbar— para los números que
   mandan en /bi. Ahora son tarjetas como las demás: la cifra ya destaca por
   tamaño, no le hace falta un color por cabeza. Las clases se quedan para no
   tocar las vistas que las llevan. */
.tarjeta-grad { position: relative; }

/* ============================================================
   MARCA
   ============================================================ */
.gold-text { color: rgb(var(--tc-gold)); }
.nav-item { position: relative; }

/* LA MARCA DIBUJADA (views/partials/marca.ejs): el pin y la carretera del logo,
   en SVG y con los colores del TEMA. Sustituye al vídeo telecab.mp4 (4,9 MB que
   se bajaban en cada página, hasta tres veces) y, al contrario que él, cambia
   con el tema: el pin es el acento y la carretera, el color del texto. */
.tc-marca { display: block; overflow: visible; }
.tc-marca-pin path { fill: rgb(var(--tc-gold)); }
.tc-marca-via { fill: none; stroke: rgb(var(--tc-text) / .8); stroke-width: 3.2; stroke-linecap: round; }
.tc-marca-carril { fill: none; stroke: rgb(var(--tc-text) / .42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3.5 4.5; }
.tc-marca-sombra { fill: rgb(var(--tc-text) / .2); }

/* LA CARGA. No es un vídeo: es CSS, y va a lo que dé la pantalla. El pin
   bota sobre la carretera —se aplasta al tocarla, se estira al subir— mientras
   el carril corre hacia el horizonte. Un ciclo dura 1,4 s: lo bastante lento
   para no agobiar, lo bastante vivo para que se note que algo pasa.
   Solo se anima `transform`, `opacity` y el desplazamiento del trazo: nada que
   obligue a recolocar la página. */
.tc-marca-anima .tc-marca-pin {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: tc-pin 1.4s infinite;
}
.tc-marca-anima .tc-marca-sombra {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: tc-sombra 1.4s infinite;
}
.tc-marca-anima .tc-marca-carril { animation: tc-carril .7s linear infinite; }
@keyframes tc-pin {
  0%   { transform: translateY(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  14%  { transform: translateY(0) scale(1, 1);      animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
  50%  { transform: translateY(-9px) scale(.97, 1.03); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  86%  { transform: translateY(0) scale(1, 1);      animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1.08, .92); }
}
@keyframes tc-sombra {
  0%, 14%, 86%, 100% { transform: scaleX(1); opacity: 1; }
  50%                { transform: scaleX(.5); opacity: .35; }
}
@keyframes tc-carril { to { stroke-dashoffset: -8; } }

/* El telón de carga: casi opaco y quieto, con la marca en el centro. */
#cargando-overlay { background-color: rgb(var(--tc-dark) / .95); }
#cargando-overlay .tc-carga-texto { color: rgb(var(--tc-muted)); letter-spacing: .08em; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--tc-scroll)); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--tc-scroll-hover)); background-clip: padding-box; }

@keyframes tc-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
main > * { animation: tc-fade-in .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  main > *, .dialogo, .dialogo .dialogo-caja, .fp-pop { animation: none !important; }
  .tc-marca-anima .tc-marca-pin, .tc-marca-anima .tc-marca-sombra, .tc-marca-anima .tc-marca-carril { animation: none; }
}

/* ============================================================
   Componentes compartidos (sustituyen los <style> por vista)
   ============================================================ */
.inp {
  width: 100%;
  background: rgb(var(--tc-dark));
  border: 1px solid rgb(var(--tc-border));
  border-radius: 0.8rem;
  padding: 0.5rem 0.75rem;
  color: rgb(var(--tc-text));
}
.inp::placeholder { color: rgb(var(--tc-muted)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Colores semánticos de ausencia (mismos en ambos temas) */
:root {
  --tc-vac: 59 130 246;
  --tc-med: 245 158 11;
  --tc-permiso: 168 85 247;
  --tc-just: 29 78 216;
}

/* Colores semánticos del MAPA DE FLOTA. El azul de la espera y el amarillo del
   descanso se pidieron con nombre (24/09/2026), y los del tema no sirven: en
   varios temas --tc-azul es naranja o rosa, y --tc-warn en claro es marrón.
   En los temas claros van un punto más oscuros para leerse sobre blanco. */
:root { --tc-mapa-espera: 59 130 246; --tc-mapa-descanso: 234 179 8; }
:root[data-theme='light'], :root[data-theme^='claro-'] {
  --tc-mapa-espera: 37 99 235; --tc-mapa-descanso: 202 138 4;
}

.fp-pop { animation: fpIn .12s cubic-bezier(.2, .8, .2, 1); }
@keyframes fpIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
input.js-fecha { cursor: pointer; }
input.js-fecha::placeholder { color: rgb(var(--tc-muted)); }

.dz.dz-ok { border-style: solid; border-color: rgb(var(--tc-green) / .5); }
.dz:hover { border-color: rgb(var(--tc-muted) / .6); }

/* ══════════════════════════════════════════════════════════════
   MENÚ LATERAL COMPACTO (sin cambios de comportamiento)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #menu-panel {
    position: absolute; top: 0; left: 0; height: 100vh; width: 16rem;
    transition: width .18s ease; overflow: hidden; z-index: 41;
  }
  :root[data-menu="corto"] #menu,
  :root[data-menu="corto"] #menu-panel { width: 4.5rem; }
  :root[data-menu="corto"] #menu:hover #menu-panel,
  :root[data-menu="corto"] #menu:focus-within #menu-panel {
    width: 16rem;
    box-shadow: var(--tc-sombra-alta);
  }
  #menu-panel span, #menu-panel p, #menu-panel .grupo-chev { transition: opacity .12s ease; }
  :root[data-menu="corto"] #menu:not(:hover):not(:focus-within) #menu-panel span:not(#nav-pend-badge),
  :root[data-menu="corto"] #menu:not(:hover):not(:focus-within) #menu-panel p,
  :root[data-menu="corto"] #menu:not(:hover):not(:focus-within) #menu-panel .grupo-chev {
    opacity: 0; pointer-events: none;
  }
  #menu-panel nav a { position: relative; }
  :root[data-menu="corto"] #menu:not(:hover):not(:focus-within) #nav-pend-badge {
    position: absolute; top: .35rem; left: 1.9rem; opacity: 1; pointer-events: none;
  }
  :root[data-menu="corto"] #menu:not(:hover):not(:focus-within) .grupo-items { display: none; }
}
#menu-corto { display: none; }
@media (min-width: 1024px) { #menu-corto { display: inline-flex; } }

/* Diálogos (public/assets/js/dialogo.js): velo oscuro y quieto, sin cristal. */
.dialogo { animation: dlgFondo .12s ease-out; backdrop-filter: none; }
.dialogo .dialogo-caja { animation: dlgCaja .18s cubic-bezier(.2, .9, .3, 1); }
.dialogo.dialogo-saliendo { animation: dlgFondo .12s ease-in reverse; }
@keyframes dlgFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgCaja { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ============================================================
   EL OJO — tapar una cifra que no debe leerse por encima del hombro
   ============================================================
   Nace para la caja de recaudación: el conductor llega a entregar su efectivo
   y se planta delante de una pantalla que dice cuánto hay en el cajón. Con el
   ojo cerrado la cifra sigue ahí, ocupando su sitio y con su forma, pero no se
   lee: se desenfoca. Tapar con puntos movería el ancho de la tarjeta cada vez.

   El estado lo guarda quien la usa (localStorage), así que la caja se abre ya
   tapada y nadie tiene que acordarse de esconderla antes de que entre nadie. */
body .tc-secreto {
  transition: filter .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
body .tc-secreto[data-oculto="1"] {
  filter: blur(10px);
  opacity: .5;
  /* Sin esto se puede seleccionar el texto borroso y leerlo en el portapapeles. */
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}

body .tc-ojo {
  --tc-ojo-tam: 2.1rem;
  position: relative;
  width: var(--tc-ojo-tam); height: var(--tc-ojo-tam);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgb(var(--tc-border));
  background: rgb(var(--tc-card2) / .6);
  color: rgb(var(--tc-muted));
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .12s ease;
}
body .tc-ojo:hover {
  color: rgb(var(--tc-gold));
  border-color: rgb(var(--tc-gold) / .55);
  background: rgb(var(--tc-gold) / .10);
}
body .tc-ojo:active { transform: scale(.92); }
body .tc-ojo:focus-visible {
  outline: 2px solid rgb(var(--tc-gold) / .7);
  outline-offset: 2px;
}

/* Los dos iconos viven a la vez, uno encima del otro, y se cruzan al pulsar:
   así el cambio es un gesto y no un parpadeo. */
body .tc-ojo i {
  position: absolute;
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}
body .tc-ojo .tc-ojo-ver     { opacity: 1; transform: none; }
body .tc-ojo .tc-ojo-tapar   { opacity: 0; transform: scale(.5) rotate(-25deg); }
body .tc-ojo[aria-pressed="true"] .tc-ojo-ver   { opacity: 0; transform: scale(.5) rotate(25deg); }
body .tc-ojo[aria-pressed="true"] .tc-ojo-tapar { opacity: 1; transform: none; }
/* Cerrado se queda dorado: es un aviso de que hay algo tapado, no un botón más. */
body .tc-ojo[aria-pressed="true"] {
  color: rgb(var(--tc-gold));
  border-color: rgb(var(--tc-gold) / .4);
}

@media (prefers-reduced-motion: reduce) {
  body .tc-secreto, body .tc-ojo, body .tc-ojo i { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AYUDAS — el globo que explica al pasar el cursor
   ══════════════════════════════════════════════════════════════════════════
   Sustituye al globo del navegador, que se pinta con los colores del sistema
   operativo: fondo amarillo pálido y letra negra en medio de una pantalla
   oscura. Este va con los tokens, así que cambia de tema con todo lo demás.

   El motor está en `public/assets/js/ayuda.js`; aquí solo vive el aspecto. */
body .ayuda-globo {
  position: fixed;
  z-index: 300;                     /* por encima de los diálogos (120/130) */
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .5rem .7rem;
  border-radius: .75rem;
  background: rgb(var(--tc-card));
  border: 1px solid rgb(var(--tc-border));
  color: rgb(var(--tc-text));
  font-size: .78rem;
  line-height: 1.45;
  /* Dos sombras: una cercana que lo despega y otra larga que lo levanta.
     Con una sola parece pegado a la pantalla. */
  box-shadow: var(--tc-sombra-alta);
  pointer-events: none;             /* el ratón lo atraviesa: no estorba */
  opacity: 0;
  transform: translateY(-4px) scale(.97);
  transition: opacity .16s ease, transform .16s cubic-bezier(.34, 1.4, .64, 1);
}
/* Cuando sale por debajo, entra desde arriba; y al revés. El movimiento
   apunta al elemento que explica, no a un lado cualquiera. */
body .ayuda-globo[data-lado="abajo"] { transform: translateY(-4px) scale(.97); }
body .ayuda-globo[data-lado="arriba"] { transform: translateY(4px) scale(.97); }
body .ayuda-globo.ayuda-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Mientras se mide (para saber dónde cabe) tiene que tener tamaño pero no
   verse: `visibility` lo esconde sin quitarlo del flujo, que es justo lo que
   `display:none` no permite. */
body .ayuda-globo.ayuda-midiendo { visibility: hidden; transition: none; }

body .ayuda-globo .ayuda-texto b,
body .ayuda-globo .ayuda-texto strong { color: rgb(var(--tc-text)); font-weight: 600; }

/* El pico. Es un cuadrado girado 45°, con solo dos lados de borde: los otros
   dos se meten bajo la caja y se verían cruzando el texto. */
body .ayuda-globo .ayuda-pico {
  position: absolute;
  left: var(--ayuda-pico, 50%);
  width: .55rem; height: .55rem;
  margin-left: -.275rem;
  background: rgb(var(--tc-card));
  transform: rotate(45deg);
}
body .ayuda-globo[data-lado="abajo"] .ayuda-pico {
  top: -.3rem;
  border-left: 1px solid rgb(var(--tc-border));
  border-top: 1px solid rgb(var(--tc-border));
}
body .ayuda-globo[data-lado="arriba"] .ayuda-pico {
  bottom: -.3rem;
  border-right: 1px solid rgb(var(--tc-border));
  border-bottom: 1px solid rgb(var(--tc-border));
}

/* Quien pide menos movimiento lo recibe igual, solo que aparece sin viajar. */
@media (prefers-reduced-motion: reduce) {
  body .ayuda-globo { transition: opacity .01s linear; transform: none; }
  body .ayuda-globo.ayuda-visible { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECTOR — elegir una opción, con la cara de la casa
   ══════════════════════════════════════════════════════════════════════════
   Sustituye al `<select>` del navegador, que se pinta con los colores del
   sistema operativo. El motor está en `public/assets/js/selector.js`; el valor
   vive en un `<input type="hidden">`, así que el formulario no se entera. */
body .tc-selector {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
body .tc-selector button {
  padding: .45rem .8rem;
  border-radius: .75rem;
  font-size: .8rem;
  font-weight: 600;
  background: rgb(var(--tc-card2));
  border: 1px solid rgb(var(--tc-border));
  color: rgb(var(--tc-muted));
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body .tc-selector button:hover { border-color: rgb(var(--tc-muted) / .5); color: rgb(var(--tc-text)); }
body .tc-selector button:focus-visible {
  outline: 2px solid rgb(var(--tc-gold) / .7);
  outline-offset: 2px;
}
/* La elegida en oro sólido: es la única del grupo, así que tiene que leerse
   sin comparar con las de al lado. */
body .tc-selector button[aria-pressed="true"] {
  background: rgb(var(--tc-gold));
  border-color: rgb(var(--tc-gold));
  color: rgb(var(--tc-on-gold));
}
@media (prefers-reduced-motion: reduce) {
  body .tc-selector button { transition: none; }
}
/* La variante COMPACTA (25/10/2026), para elegir el rango de un gráfico en la
   cabecera de su tarjeta (Visibilidad: semana, 15 días… todo). Siete botones del
   tamaño de los de un formulario no cabían al lado del título a 1280 px y bajaban
   en tres filas en el móvil. Mismo dibujo, más apretado. */
body .tc-selector.tc-selector-compacto { gap: .25rem; }
body .tc-selector.tc-selector-compacto button {
  padding: .3rem .6rem;
  border-radius: .6rem;
  font-size: .75rem;
}