/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DE GUÍAS · LA HOJA DE LA APP (tema oscuro), 2026-09-29
   ───────────────────────────────────────────────────────────────────────────
   Luis: «es para guías y la app está pensada para usarse en el móvil y que sea sencilla, y
   en ese sentido no me sirve que sea como ARIA». Así que esta hoja se piensa a 375 px y con
   una mano: una sola columna, lo que se toca abajo y grande (52–58 px), letra de 16 px en
   los campos (el iPhone no hace zoom y se lee al sol) y ningún adorno que estorbe.
   Del ecosistema toma la identidad y nada más: el libro de marca (tinta, deep, teal, salvia,
   crema; ocre y rojo sólo de relleno; sin dorado, sin negrita, nada que brille ni se
   levante), Marcellus en los títulos y las cifras, el login PRISMA (prisma-login.css, con la
   variante `data-pl="guias"` aquí abajo), la foto y los tres temas.

   LOS TEMAS. Ésta es la hoja del oscuro, con los colores escritos (no con variables) para
   que los generadores la lean: `guias-teal.css` sale de ella con generar-tema-teal.py y
   `guias-tema-claro.css` con generar-tema-claro.py. Se vuelven a correr cada vez que esta
   hoja cambia. Lo que va sobre la foto (la franja de arriba y el login) lleva `foto` o
   `login` en el nombre: los dos generadores lo dejan fuera, y el marcado lleva además
   `data-pz-foto`, así que en teal y en claro se ve idéntico al oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LO QUE PRENDE Y APAGA EL CÓDIGO DE LA APP ──────────────────────────────────────────────
   La app enciende y apaga piezas con estas clases (antes eran de Tailwind). Se escriben acá,
   con el mismo nombre, para que el código no cambie ni una línea. */
.hidden{ display:none !important; }
.flex{ display:flex; }
.opacity-0{ opacity:0; }
.opacity-40{ opacity:.4; }
.pointer-events-none{ pointer-events:none; }
.grayscale{ filter:grayscale(1); }

/* ── LA PÁGINA ─────────────────────────────────────────────────────────────────────────── */
html, body{ height:100%; }
body.gu{ margin:0; height:100dvh; overflow:hidden; display:flex; flex-direction:column;
  background:#141D27; color:#FFFFFF; font-family:Figtree, Inter, system-ui, sans-serif; font-weight:400;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
.gu *, .gu *::before, .gu *::after{ box-sizing:border-box; }
.gu :is(h1, h2, h3, p){ margin:0; font-weight:400; }
:where(.gu) button{ font:inherit; color:inherit; cursor:pointer; }
.gu b, .gu strong{ font-weight:400; }
::-webkit-scrollbar{ display:none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }
.gu .material-icons-outlined{ font-size:20px; line-height:1; }

/* ── EL LOGIN: el molde PRISMA, con el botón de esta app ────────────────────────────────────
   La foto es Punta Leona desde el aire, la que Luis ama. El botón toma sus colores: el agua
   honda, el turquesa que rompe y la roca oscura, en una marea que entra y sale. */
.gu-login{ display:flex; color:#FFFFFF; background-color:#141D27; background-size:cover; background-position:center; z-index:50; height:100dvh; }
.gu-login__velo{ position:absolute; inset:0; background:rgba(13,23,32,.28); pointer-events:none; }
html:not(#_):not(#_) #login-screen .pl-caja[data-pl="guias"]{ --pl-grad:linear-gradient(125deg, #0E3A4A, #005565, #2A93A8, #3B444C, #005565, #0E3A4A);
  --pl-tam:320% 320%; --pl-mov:guMarea 12s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes guMarea{ from{ background-position:0% 30%; } to{ background-position:100% 70%; } }
/* El nombre de hoy es largo («Liquidaciones», «Expense Reports»): hasta que llegue el nombre
   corto del ecosistema, se achica para que quepa en la tarjeta sin cortar. */
html:not(#_):not(#_) #login-screen .pl-caja[data-pl="guias"] .pl-nombre{ font-size:22px !important; letter-spacing:.14em !important; text-transform:uppercase; }
/* Al reconocer la cédula, el campo del nombre se enciende un instante (lo pone la app). */
html:not(#_):not(#_) #login-screen .pl-inp.border-ocean-500{ border-color:#006D82 !important; box-shadow:0 0 0 3px rgba(0,109,130,.30) !important; }
#login-screen .gu-login-pista{ display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 12px; border-radius:14px;
  background:rgba(13,23,32,.45); border:1px solid rgba(255,255,255,.14); color:#FFFFFF; font-size:13px; line-height:1.4; }
#login-screen .gu-login-pista .material-icons-outlined{ font-size:16px; color:#EADFCE; margin-top:1px; }

/* ── LA APP ────────────────────────────────────────────────────────────────────────────── */
.gu-app{ flex-direction:column; height:100dvh; width:100%; position:relative; }
.gu-app.flex{ display:flex; }

/* ── LA FRANJA DE ARRIBA, SOBRE LA FOTO ─────────────────────────────────────────────────────
   Una sola franja para las dos pantallas: arriba la estrella y los botones redondos (tema,
   idioma, mis datos, salir); abajo, el saludo en «Mis liquidaciones» o la reserva abierta en
   el editor. No cambia con el tema. */
.gu-foto{ position:relative; isolation:isolate; flex:none; overflow:hidden; color:#FFFFFF;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 16px; background-color:#141D27; }
.gu-foto-fotos{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 55%; }
.gu-foto-fotos > .gu-foto-capa{ position:absolute; inset:0; background-size:cover; background-position:center 55%; opacity:0; transition:opacity 1.6s ease; }
.gu-foto-fotos > .gu-foto-capa.activa{ opacity:1; }
.gu-foto-velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,23,32,.58) 0%, rgba(13,23,32,.22) 42%, rgba(20,29,39,.90) 100%); }
.gu-foto-marco{ max-width:600px; margin:0 auto; }
.gu-foto-barra{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:2.1rem; }
.gu-foto-estrella{ display:block; width:28px; height:28px; object-fit:contain; }
.gu-foto-botones{ display:flex; align-items:center; gap:8px; }
.gu-foto-tema{ display:contents; }
/* Los botones de la fila, vestidos como el del tema (el círculo de CIMA sobre la foto). Su
   zona de toque llega a 44 px con un margen invisible, sin cambiar lo que se ve. */
.gu-foto-bt, .gu-foto .pz-tema-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:2.1rem; height:2.1rem; padding:0; margin:0; border-radius:999px; background:rgba(26,38,51,.62);
  border:1px solid rgba(234,223,206,.34); color:#FFFFFF; font-size:11px; letter-spacing:.06em; line-height:1; }
.gu-foto-bt::after, .gu-foto .pz-tema-btn::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
.gu-foto-bt .material-icons-outlined, .gu-foto .pz-tema-btn .material-icons-outlined{ font-size:16px; color:#FFFFFF; }
.gu-foto-bt:active, .gu-foto .pz-tema-btn:active{ background:#005565; }
@media (hover:hover){ .gu-foto-bt:hover, .gu-foto .pz-tema-btn:hover{ background:rgba(26,38,51,.75); border-color:#EADFCE; } }
.gu-foto-punto{ position:absolute; top:-2px; right:-2px; width:10px; height:10px; border-radius:99px; background:#B8904F; border:2px solid #1A2633; }
.gu-foto-ceja{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.86); }
.gu-foto-inicio{ margin-top:18px; }
.gu-foto-hola{ margin-top:4px; font-family:Marcellus, Georgia, serif; font-size:24px; line-height:1.15; color:#FFFFFF; text-wrap:balance; }
.gu-foto-reserva{ display:none; align-items:center; gap:12px; margin-top:14px; }
.gu-foto-bt--volver{ width:40px; height:40px; }
.gu-foto-bt--volver .material-icons-outlined{ font-size:20px; }
.gu-foto-bk{ font-family:Marcellus, Georgia, serif; font-size:24px; line-height:1.1; color:#FFFFFF; }
.gu-foto-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Qué muestra la franja según la pantalla abierta. */
body:has(#view-editor.active) .gu-foto-inicio{ display:none; }
body:has(#view-editor.active) .gu-foto-reserva{ display:flex; }

/* ── EL CONTENIDO ───────────────────────────────────────────────────────────────────────── */
.gu-main{ flex:1; min-height:0; width:100%; position:relative; display:flex; flex-direction:column; overflow:hidden; background:#141D27; }
.view-section{ display:none; }
.view-section.active{ display:flex; flex-direction:column; position:relative; width:100%; height:100%; min-height:0; animation:guEntrar .24s ease; }
@keyframes guEntrar{ from{ opacity:0; } to{ opacity:1; } }
.gu-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 104px; scroll-behavior:smooth; }
#view-editor .gu-scroll{ padding-bottom:96px; }
.gu-col{ max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.gu-titulo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0; }
.gu-titulo h2{ font-family:Marcellus, Georgia, serif; font-size:19px; letter-spacing:.03em; color:#FFFFFF; }
.gu-cuenta{ min-width:28px; height:28px; padding:0 9px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(234,223,206,.08); color:rgba(234,223,206,.86); font-size:13px; }

/* Rótulos, notas y cifras */
.gu-etq{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,223,206,.72); display:flex; align-items:center; gap:6px; }
.gu-etq .material-icons-outlined{ font-size:15px; color:#2A93A8; }
.gu-nota{ font-size:13px; color:rgba(234,223,206,.72); display:flex; align-items:center; gap:6px; }
.gu-nota .material-icons-outlined{ font-size:16px; }
.gu-mon{ font-size:.62em; color:rgba(234,223,206,.62); margin-right:2px; }
.gu-cifra{ font-family:Marcellus, Georgia, serif; font-size:22px; line-height:1; color:#FFFFFF; display:flex; align-items:baseline; }
.gu-cifra--vacia{ font-family:Figtree, Inter, system-ui, sans-serif; font-size:14px; color:rgba(234,223,206,.5); }
/* Lo que significa cada color: el acento, lo que espera, lo que se pasó (en relleno). */
.gu-c-acento{ color:#2A93A8; }
.gu-c-ocre{ color:#B8904F; }
.gu-c-rojo{ display:inline-flex; align-items:baseline; background:#B3261E; color:#FFFFFF; border-radius:10px; padding:3px 8px; }
.gu-c-rojo .gu-mon{ color:rgba(255,255,255,.8); }

/* ── LOS BOTONES ────────────────────────────────────────────────────────────────────────────
   Una sola figura: la píldora de 52 px. Llena (deep) para lo que avanza, con filete para lo
   secundario, roja para corregir. Presionado: relleno deep. Nada que se levante ni brille. */
.gu-bt{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 18px; border-radius:999px; border:1px solid transparent; background:transparent; color:#FFFFFF;
  font-family:Figtree, Inter, system-ui, sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; transition:background-color .15s ease, border-color .15s ease; }
.gu-bt .material-icons-outlined{ font-size:18px; }
.gu-bt--ancho{ width:100%; }
.gu-bt--lleno{ background:#005565; border-color:rgba(234,223,206,.18); color:#FFFFFF; }
.gu-bt--linea{ border-color:rgba(234,223,206,.34); color:#FFFFFF; }
.gu-bt--rojo{ background:#B3261E; color:#FFFFFF; }
.gu-bt--suave{ background:rgba(42,147,168,.14); color:#FFFFFF; }
.gu-bt--suave .material-icons-outlined{ color:#2A93A8; }
.gu-bt--chico{ height:36px; padding:0 13px; font-size:11px; }
.gu-bt--chico .material-icons-outlined{ font-size:16px; }
.gu-bt:active{ background:#005565; border-color:#005565; color:#FFFFFF; }
.gu-bt--rojo:active{ background:#8E1E18; border-color:#8E1E18; }
@media (hover:hover){
  .gu-bt--linea:hover, .gu-bt--suave:hover{ border-color:rgba(234,223,206,.62); }
  .gu-bt--lleno:hover{ border-color:rgba(234,223,206,.55); }
}
.gu-bt:focus-visible, .gu-inp:focus-visible{ outline:2px solid #2A93A8; outline-offset:2px; }

/* Lo principal de cada pantalla, abajo y al alcance del pulgar: «Nueva liquidación» en la
   lista y «Gasto» en el editor. Conservan la clase `fab-btn`, que es por la que la app los
   encuentra para bloquearlos.
   La figura (Luis: «podría ser mucho más luxury»): una píldora deep centrada, no de lado a
   lado; el nombre en Marcellus y sin mayúsculas forzadas; el «+» dentro de un anillo crema, y
   un segundo filete por dentro del borde, como el bisel de una joya pero plano: nada brilla
   ni se levanta. Detrás, la lista se desvanece en el lienzo para que nada choque con él. */
.gu-principal{ position:absolute; z-index:30; left:50%; bottom:calc(env(safe-area-inset-bottom) + 22px); transform:translateX(-50%);
  height:54px; padding:0 26px 0 8px; border-radius:999px; background:#005565; color:#FFFFFF; white-space:nowrap;
  border:1px solid rgba(234,223,206,.30); box-shadow:inset 0 0 0 3px #005565, inset 0 0 0 4px rgba(234,223,206,.14), 0 20px 44px -22px rgba(6,12,18,.95);
  display:flex; align-items:center; gap:14px; font-family:Marcellus, Georgia, serif; font-size:17px; letter-spacing:.05em; text-transform:none;
  transition:background-color .15s ease, border-color .15s ease; }
.gu-principal .material-icons-outlined{ width:38px; height:38px; border-radius:999px; border:1px solid rgba(234,223,206,.50);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#EADFCE; }
.gu-principal:active{ background:#00424F; box-shadow:inset 0 0 0 3px #00424F, inset 0 0 0 4px rgba(234,223,206,.14), 0 20px 44px -22px rgba(6,12,18,.95); }
@media (hover:hover){ .gu-principal:hover{ border-color:rgba(234,223,206,.62); } }
#view-historial::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:104px; z-index:20; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,29,39,0) 0%, rgba(20,29,39,.92) 55%, #141D27 100%); }
.gu-agregar{ position:absolute; z-index:30; right:16px; bottom:calc(env(safe-area-inset-bottom) + 118px);
  height:46px; padding:0 20px 0 6px; border-radius:999px; background:#006D82; color:#FFFFFF; white-space:nowrap;
  border:1px solid rgba(234,223,206,.30); box-shadow:inset 0 0 0 3px #006D82, inset 0 0 0 4px rgba(234,223,206,.14), 0 16px 34px -18px rgba(6,12,18,.95);
  display:flex; align-items:center; gap:10px; font-family:Marcellus, Georgia, serif; font-size:16px; letter-spacing:.05em; text-transform:none; }
.gu-agregar .material-icons-outlined{ width:32px; height:32px; border-radius:999px; border:1px solid rgba(234,223,206,.50);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#EADFCE; }
.gu-agregar:active{ background:#005565; box-shadow:inset 0 0 0 3px #005565, inset 0 0 0 4px rgba(234,223,206,.14), 0 16px 34px -18px rgba(6,12,18,.95); }

/* ── AVISOS ─────────────────────────────────────────────────────────────────────────────── */
.gu-aviso{ display:flex; align-items:flex-start; gap:10px; width:100%; margin:0; padding:12px; border-radius:16px; text-align:left;
  font-size:13px; line-height:1.45; color:#FFFFFF; border:1px solid transparent; }
.gu-aviso > .material-icons-outlined{ font-size:20px; flex:none; margin-top:1px; }
.gu-aviso__cuerpo{ flex:1; min-width:0; }
.gu-aviso__tit{ display:block; font-size:14px; color:#FFFFFF; margin-bottom:2px; }
.gu-aviso__txt{ display:block; font-size:13px; color:rgba(234,223,206,.82); }
.gu-aviso--espera{ background:rgba(184,144,79,.14); border-color:rgba(184,144,79,.42); }
.gu-aviso--espera > .material-icons-outlined{ color:#B8904F; }
.gu-aviso--alerta{ background:rgba(179,38,30,.16); border-color:rgba(179,38,30,.60); }
.gu-aviso--alerta > .material-icons-outlined{ color:#EADFCE; }
.gu-aviso--listo{ background:rgba(125,155,91,.14); border-color:rgba(125,155,91,.45); }
.gu-aviso--listo > .material-icons-outlined{ color:#7D9B5B; }
button.gu-aviso{ cursor:pointer; }
button.gu-aviso:active{ background:rgba(184,144,79,.24); }
.gu-aviso__flecha{ margin-left:auto; color:rgba(234,223,206,.6); }
.gu-aviso-tc{ margin-top:10px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.4; color:#FFFFFF;
  background:rgba(184,144,79,.14); border:1px solid rgba(184,144,79,.42); }
#aviso-tc-editor:empty{ display:none; }

/* ── LAS TARJETAS DE «MIS LIQUIDACIONES» ─────────────────────────────────────────────────── */
.gu-lista{ display:flex; flex-direction:column; gap:12px; }
.gu-tarjeta{ background:#1A2633; border:1px solid rgba(234,223,206,.10); border-radius:18px; padding:16px; }
.gu-tarjeta--corregir{ border-color:rgba(179,38,30,.75); }
.gu-tarjeta__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.gu-tarjeta__ceja{ font-size:11px; letter-spacing:.24em; color:rgba(234,223,206,.62); }
.gu-bk{ font-family:Marcellus, Georgia, serif; font-size:26px; line-height:1.05; color:#FFFFFF; word-break:break-all; }
.gu-estado{ display:inline-flex; align-items:center; gap:4px; flex:none; padding:5px 10px; border-radius:999px; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.gu-estado .material-icons-outlined{ font-size:13px; }
.gu-estado--corregir{ background:#B3261E; color:#FFFFFF; }
.gu-estado--borrador{ border-color:rgba(234,223,206,.34); color:rgba(234,223,206,.92); }
.gu-estado--espera{ background:rgba(184,144,79,.16); color:#B8904F; }
.gu-estado--enviada{ background:#005565; color:#FFFFFF; }
.gu-estado--aprobado{ background:rgba(125,155,91,.18); color:#7D9B5B; }
.gu-estado--pagado{ background:#7D9B5B; color:#1A2633; }
.gu-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(234,223,206,.08); }
.gu-total__der{ text-align:right; }
.gu-total .gu-cifra{ justify-content:flex-end; }
.gu-desglose{ margin-top:4px; font-size:12px; color:rgba(234,223,206,.6); }
.gu-tarjeta__pie{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.gu-tarjeta__acciones{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }

/* El adelanto: tres números, una barra y una frase. La barra es de un solo color a la vez. */
.gu-adel{ margin-top:12px; }
.gu-adel__fila{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; }
.gu-adel__fila > *{ white-space:nowrap; }
.gu-adel__dado{ font-size:13px; color:rgba(234,223,206,.72); }
.gu-adel__num{ color:#FFFFFF; }
.gu-adel__saldo{ font-size:14px; }
.adel-bar{ height:8px; border-radius:99px; background:rgba(234,223,206,.10); overflow:hidden; margin:8px 0; }
.adel-bar > span{ display:block; height:100%; border-radius:99px; transition:width .4s cubic-bezier(.2,.8,.2,1); }
.adel-ok > span{ background:#2A93A8; }
.adel-warn > span{ background:#B8904F; }
.adel-over > span{ background:#B3261E; }
.gu-panel{ background:#1A2633; border:1px solid rgba(234,223,206,.10); border-radius:18px; padding:14px; }
.gu-adel__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.gu-chip{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:rgba(42,147,168,.14); color:#FFFFFF; }
.gu-tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.gu-tres > div{ border-radius:14px; background:#16222E; border:1px solid rgba(234,223,206,.07); padding:10px 4px; text-align:center; min-width:0; }
.gu-tres .gu-etq{ justify-content:center; font-size:10px; letter-spacing:.1em; margin-bottom:6px; }
.gu-tres__cifra{ font-family:Marcellus, Georgia, serif; font-size:16px; line-height:1.1; color:#FFFFFF; overflow-wrap:anywhere; }
.gu-tres__cifra.gu-c-rojo{ font-size:15px; padding:2px 6px; }
.gu-tres > .gu-tres__saldo{ border-color:rgba(42,147,168,.45); }
.gu-tres > .gu-tres__saldo--rojo{ border-color:rgba(179,38,30,.70); }
.gu-tres > .gu-tres__saldo--ocre{ border-color:rgba(184,144,79,.55); }
.gu-adel__frase{ font-size:13px; line-height:1.45; color:rgba(234,223,206,.82); }

/* ── EL EDITOR: cada gasto, una tarjeta que se abre ───────────────────────────────────────
   Compacta a propósito (Luis: «esa tarjeta va a quedar enorme»): campos de 44 px, dos por
   fila, los tres opcionales plegados en «Más datos» y la cámara, la galería y el borrar en
   una sola fila. Abierta cabe en la pantalla de un celular. */
.gu-gasto{ background:#1A2633; border:1px solid rgba(234,223,206,.10); border-radius:18px; overflow:hidden; }
/* El estado de cada gasto lo dice su pastilla (Rechazado, Corregido, OK); el rechazado lleva además el filete rojo. */
.estado-rechazado{ border-color:rgba(179,38,30,.75); }
.gu-gasto__cab{ display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; min-height:60px; cursor:pointer; }
.gu-gasto__cab:active{ background:rgba(234,223,206,.04); }
.gu-gasto__nombre{ flex:1; min-width:0; }
.gu-gasto__linea{ display:flex; align-items:center; gap:8px; min-width:0; }
.gu-gasto__prov{ font-size:15px; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.gu-gasto__desc{ margin-top:2px; font-size:12px; color:rgba(234,223,206,.66); display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; }
.gu-gasto__desc .material-icons-outlined{ font-size:13px; color:rgba(234,223,206,.5); }
.gu-gasto__monto{ flex:none; font-family:Marcellus, Georgia, serif; font-size:17px; color:#FFFFFF; display:flex; align-items:baseline; }
.gu-gasto__flecha{ flex:none; width:28px; height:28px; border-radius:99px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(234,223,206,.16); color:rgba(234,223,206,.7); transition:transform .25s ease; }
.gu-gasto__flecha .material-icons-outlined{ font-size:18px; }
.gu-marca{ flex:none; display:inline-flex; align-items:center; gap:2px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; border-radius:99px; }
.gu-marca .material-icons-outlined{ font-size:11px; }
.gu-marca--rojo{ background:#B3261E; color:#FFFFFF; }
.gu-marca--deep{ background:#005565; color:#FFFFFF; }
.gu-marca--salvia{ background:#7D9B5B; color:#1A2633; }
.compra-details-container{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.compra-card.expanded .compra-details-container{ max-height:2400px; opacity:1; border-top:1px solid rgba(234,223,206,.08); }
.compra-card.expanded .expand-icon{ transform:rotate(180deg); }
.gu-gasto__cuerpo{ padding:12px 14px 14px; }
.gu-motivo{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; padding:10px 12px; border-radius:14px; background:rgba(179,38,30,.16); border:1px solid rgba(179,38,30,.55); }
.gu-motivo > .material-icons-outlined{ color:#EADFCE; font-size:18px; }
.gu-motivo__txt{ font-size:14px; line-height:1.45; color:#FFFFFF; }
.gu-campos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.gu-campo{ min-width:0; }
.gu-campo--ancho{ grid-column:1 / -1; }
.gu-campo label, .gu-rot{ display:block; margin:0 0 4px 4px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(234,223,206,.70); }
.gu-opc{ text-transform:none; letter-spacing:0; color:rgba(234,223,206,.5); }
/* Los campos: 44 px de alto y 16 px de letra (con menos el iPhone hace zoom al tocarlos). */
.gu-inp{ display:block; width:100%; height:44px; margin:0; padding:0 12px; border-radius:12px; background:#101A24; color:#FFFFFF;
  border:1px solid rgba(234,223,206,.16); font-family:Figtree, Inter, system-ui, sans-serif; font-size:16px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease; }
.gu-inp::placeholder{ color:rgba(234,223,206,.4); }
.gu-inp:focus{ border-color:#2A93A8; box-shadow:0 0 0 3px rgba(42,147,168,.25); }
.gu-inp:disabled{ opacity:.6; }
select.gu-inp{ padding-right:8px; }
input[type=date].gu-inp{ padding-right:6px; }
.gu-tc{ display:flex; align-items:flex-end; gap:12px; padding:10px; border-radius:14px; background:rgba(184,144,79,.12); border:1px solid rgba(184,144,79,.40); }
.gu-tc__campo{ flex:1; min-width:0; }
.gu-tc__eq{ flex:none; text-align:right; padding-bottom:11px; }
.gu-tc__num{ font-family:Marcellus, Georgia, serif; font-size:17px; line-height:1; color:#FFFFFF; white-space:nowrap; }
/* Los opcionales, plegados: se abren solos si ya traen algo escrito. */
.gu-mas{ grid-column:1 / -1; border-radius:12px; border:1px solid rgba(234,223,206,.10); }
.gu-mas > summary{ list-style:none; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; cursor:pointer;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,223,206,.72); }
.gu-mas > summary::-webkit-details-marker{ display:none; }
.gu-mas > summary .material-icons-outlined{ font-size:18px; color:#2A93A8; transition:transform .2s ease; }
.gu-mas[open] > summary .material-icons-outlined{ transform:rotate(45deg); }
.gu-mas__campos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:2px 10px 12px; }
.gu-evid{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid rgba(234,223,206,.08); }
.gu-evid__botones{ display:grid; grid-template-columns:1fr 1fr 44px; gap:8px; }
.gu-bt--foto{ height:44px; padding:0 10px; border-radius:12px; border:1px dashed rgba(42,147,168,.65); color:#FFFFFF; letter-spacing:.1em; font-size:12px; cursor:pointer; }
.gu-bt--foto .material-icons-outlined{ color:#2A93A8; }
.gu-bt--foto input{ display:none; }
.gu-evid__fotos{ display:flex; align-items:center; overflow-x:auto; }
.gu-evid__fotos:has(.gu-sin-fotos){ min-height:0; }
.gu-sin-fotos{ font-size:13px; color:rgba(234,223,206,.5); }
.gu-bt--borrar{ width:44px; height:44px; padding:0; border-radius:12px; background:rgba(179,38,30,.16); border-color:rgba(179,38,30,.55); color:#FFFFFF; }
.gu-bt--borrar .material-icons-outlined{ font-size:19px; }
.gu-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Las miniaturas de los comprobantes: apiladas, sin levantarse. */
.voucher-stack{ display:flex; align-items:center; padding:4px 0; }
.gu-miniaturas{ display:flex; align-items:center; }
.thumb-stack, .thumb-stack-more{ position:relative; flex:none; width:44px; height:44px; border-radius:11px; margin-left:-12px; cursor:zoom-in;
  border:2px solid #1A2633; box-shadow:none; }
.gu-miniaturas > :first-child{ margin-left:0; }
.gu-mini-img{ object-fit:cover; background:#101A24; }
.gu-mini-pdf{ object-fit:contain; background:#FFFFFF; padding:6px; }
.gu-mini-doc{ display:flex; align-items:center; justify-content:center; }
.gu-mini-doc .material-icons-outlined{ font-size:22px; color:#FFFFFF; }
.gu-mini-doc--word{ background:#006D82; }
.gu-mini-doc--excel{ background:#7D9B5B; }
.thumb-stack-more{ display:flex; align-items:center; justify-content:center; background:#26323E; color:#FFFFFF; font-size:14px; cursor:pointer; }

/* El pie del editor: cuánto queda (o el total) y los dos botones grandes. */
.gu-pie{ flex:none; z-index:40; background:#141D27; border-top:1px solid rgba(234,223,206,.10);
  padding:10px 16px calc(env(safe-area-inset-bottom) + 12px); }
.gu-pie__marco{ max-width:600px; margin:0 auto; }
.gu-pie__total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; min-height:26px; }
.gu-pie__total .gu-etq{ font-size:11px; }
.gu-pie__botones{ display:grid; grid-template-columns:1fr 1.5fr; gap:10px; }
.gu-pie__botones .gu-bt{ height:48px; padding:0 14px; }

/* Vacíos */
.gu-vacio{ text-align:center; padding:32px 20px; border-radius:18px; background:#1A2633; border:1px dashed rgba(234,223,206,.18); }
.gu-vacio__icono{ width:60px; height:60px; margin:0 auto 12px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:rgba(234,223,206,.06); }
.gu-vacio__icono .material-icons-outlined{ font-size:30px; color:rgba(234,223,206,.55); }
.gu-vacio__tit{ font-family:Marcellus, Georgia, serif; font-size:18px; color:#FFFFFF; margin-bottom:6px; }
.gu-vacio__txt{ font-size:13px; color:rgba(234,223,206,.66); }

/* ── LAS VENTANAS: en el celular suben desde abajo (a la mano); en pantallas grandes, al centro ── */
.modal-container{ position:fixed; inset:0; z-index:250; display:flex; align-items:flex-end; justify-content:center; padding:0;
  background:rgba(10,16,22,.72); opacity:0; transition:opacity .3s ease; pointer-events:none; overflow:hidden; }
.modal-container.visible{ opacity:1; pointer-events:auto; }
.gu-velo-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,16,22,.72); transition:opacity .2s ease; }
.gu-hoja{ width:100%; max-width:520px; background:#1A2633; color:#FFFFFF; border:1px solid rgba(234,223,206,.12); border-bottom:0;
  border-radius:24px 24px 0 0; padding:22px 18px calc(env(safe-area-inset-bottom) + 20px); box-shadow:0 -30px 70px -35px rgba(6,12,18,.98);
  transform:translateY(0); transition:transform .3s cubic-bezier(.2,.8,.2,1); max-height:92dvh; overflow-y:auto; }
.gu-hoja.scale-95{ transform:translateY(32px); }
.gu-hoja__asa{ width:44px; height:4px; border-radius:99px; background:rgba(234,223,206,.22); margin:-8px auto 16px; }
.gu-hoja__titulo{ font-family:Marcellus, Georgia, serif; font-size:21px; line-height:1.2; color:#FFFFFF; display:flex; align-items:center; gap:10px; }
.gu-hoja__titulo .material-icons-outlined{ font-size:24px; color:#2A93A8; }
.gu-hoja__sub{ margin:6px 0 16px; font-size:14px; line-height:1.45; color:rgba(234,223,206,.75); }
.gu-hoja__campos{ display:flex; flex-direction:column; gap:14px; }
.gu-hoja__pista{ margin:6px 0 0 4px; font-size:13px; line-height:1.4; color:rgba(234,223,206,.6); }
.gu-hoja__botones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.gu-bk-campo{ position:relative; }
.gu-bk-campo__pre{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:Marcellus, Georgia, serif; font-size:22px; color:rgba(234,223,206,.55); pointer-events:none; }
.gu-bk-campo .gu-inp{ height:54px; padding-left:62px; font-family:Marcellus, Georgia, serif; font-size:26px; letter-spacing:.04em; }
.gu-confirma{ display:flex; align-items:flex-start; gap:12px; }
.gu-confirma > .material-icons-outlined{ font-size:28px; color:#EADFCE; flex:none; }
.gu-confirma__txt{ flex:1; padding-top:3px; font-size:15px; line-height:1.45; color:#FFFFFF; }
.gu-confirma__cerrar{ flex:none; width:36px; height:36px; margin:-4px -6px 0 0; border:0; border-radius:99px; background:transparent; color:rgba(234,223,206,.6);
  display:flex; align-items:center; justify-content:center; }
.gu-bt--peligro{ background:#B3261E; color:#FFFFFF; }

/* ── EL CARGADOR: la estrella en un disco oscuro, girando despacio ─────────────────────────── */
.gu-splash{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center;
  background:rgba(13,23,32,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.gu-splash__disco{ width:92px; height:92px; border-radius:999px; background:#1A2633; border:1px solid rgba(234,223,206,.16);
  display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px -20px rgba(6,12,18,.95); }
.gu-splash__disco img{ width:50px; height:50px; object-fit:contain; animation:guGirar 6s linear infinite; }
@keyframes guGirar{ to{ transform:rotate(360deg); } }

/* ── EL AVISO FLOTANTE (el color de fondo lo pone la app según el mensaje) ─────────────────── */
.gu-toast{ position:fixed; z-index:500; left:50%; top:calc(env(safe-area-inset-top) + 14px); transform:translate(-50%, 0);
  width:max-content; max-width:calc(100vw - 32px); display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:16px;
  background:#1A2633; color:#FFFFFF; font-size:14px; line-height:1.35; border:1px solid rgba(234,223,206,.16);
  box-shadow:0 24px 50px -24px rgba(6,12,18,.98); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.gu-toast.opacity-0{ transform:translate(-50%, -18px); }
.gu-toast .material-icons-outlined{ font-size:20px; color:#FFFFFF; }

/* ── EL VISOR DE COMPROBANTES: negro en los tres temas, como un visor de fotos ────────────── */
#lightbox-vouchers{ position:fixed; z-index:999995; inset:0; width:100%; height:100%; background:rgba(0,0,0,.96); align-items:center; justify-content:center; }
#lb-img-voucher{ max-width:95vw; max-height:78dvh; border-radius:14px; object-fit:contain; }
#lb-pdf-voucher{ width:95vw; height:78dvh; border:0; border-radius:14px; background:#FFFFFF; }
.lb-marco{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; padding-top:40px; gap:12px; }
.lb-close-v{ position:absolute; z-index:10001; top:calc(env(safe-area-inset-top) + 12px); right:14px; width:48px; height:48px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#FFFFFF; font-size:34px; line-height:1; cursor:pointer; }
.lb-nav-v{ position:absolute; z-index:10000; top:50%; transform:translateY(-50%); width:48px; height:64px; border:0; border-radius:14px;
  background:rgba(255,255,255,.08); color:#FFFFFF; font-size:30px; cursor:pointer; user-select:none; }
.lb-prev-v{ left:8px; } .lb-next-v{ right:8px; }
.lb-nav-v:active, .lb-close-v:active{ background:#005565; }
#lb-counter-voucher{ color:rgba(255,255,255,.8); font-size:14px; letter-spacing:.08em; background:rgba(255,255,255,.08); padding:5px 14px; border-radius:99px; }
.lb-descarga{ display:inline-flex; align-items:center; gap:6px; color:#FFFFFF; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  background:rgba(255,255,255,.08); padding:8px 14px; border-radius:99px; }
.lb-descarga.hidden{ display:none !important; }
.lb-del-v{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border:0; border-radius:99px; background:#B3261E; color:#FFFFFF;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }

/* ── TABLETA Y COMPUTADORA: la misma columna, centrada, con más foto arriba ───────────────── */
@media (min-width:640px){
  .modal-container, .gu-velo-modal{ align-items:center; padding:24px; }
  .gu-hoja{ border-radius:24px; border-bottom:1px solid rgba(234,223,206,.12); padding:26px 24px 24px; max-width:440px;
    box-shadow:0 40px 90px -40px rgba(6,12,18,.98); transform:scale(1); }
  .gu-hoja.scale-95{ transform:scale(.96); }
  .gu-hoja__asa{ display:none; }
}
@media (min-width:768px){
  .gu-foto{ padding-top:18px; padding-bottom:26px; }
  .gu-foto-inicio{ margin-top:44px; }
  .gu-foto-reserva{ margin-top:36px; }
  .gu-foto-hola{ font-size:34px; }
  .gu-foto-bk{ font-size:34px; }
  .gu-scroll{ padding-top:24px; }
  .gu-agregar{ right:max(16px, calc(50% - 300px)); }
}
@media (prefers-reduced-motion:reduce){
  .view-section.active, .gu-splash__disco img{ animation:none; }
  .gu-hoja, .compra-details-container, .gu-toast{ transition:none; }
}