/* ═══════════════════════════════════════════════════════════════════════════
   HORMIGA · GASTOS ADMINISTRATIVOS — LA HOJA DE LA APP (tema oscuro), 2026-09-29
   ───────────────────────────────────────────────────────────────────────────
   Luis: «el mismo refrescamiento de ÁGUILA, el mismo diseño, sólo ajustado a las funciones de
   acá; me gustó mucho y se ajusta muy bien». Así que esta hoja es la de ÁGUILA
   (app-liquidaciones/guias.css) pieza por pieza, con las mismas clases `gu-*`, y suma sólo lo que
   Gastos tiene y ÁGUILA no: las pestañas (mis reportes / aprobaciones), la revisión del gerente y
   las dos ventanas de Finanzas.
   EL CELULAR es la misma línea que ÁGUILA: una sola columna de 600 px, lo que se toca abajo y
   grande, letra de 16 px en los campos (el iPhone no hace zoom) y ningún adorno que estorbe.
   EL ESCRITORIO puede crecer (Luis: «esta app se usa también en escritorio, ahí sí puede variar y
   mejorar en la misma línea»): desde 1024 px la franja es más alta, los reportes van en dos
   columnas y el editor se abre a 760 px, con las mismas piezas.
   Del ecosistema: 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 títulos y
   cifras, el login PRISMA (prisma-login.css, variante `data-pl="hormiga"` 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: `hormiga-teal.css` sale de ella con generar-tema-teal.py y
   `hormiga-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-50{ opacity:.5; }
.cursor-not-allowed{ cursor:not-allowed !important; }
.animate-spin{ display:inline-block; animation:guGirar 1s linear infinite; }

/* ── 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, h4, 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; }
/* los campos de fecha y los desplegables, con los controles del navegador en claro sobre tinta */
html:not([data-tema="claro"]){ color-scheme:dark; }

/* ── EL LOGIN: el molde PRISMA, con el botón de esta app ────────────────────────────────────
   La foto es la salamandra de Savegre sobre el musgo (Wikimedia Commons, YasuhikoK, CC BY-SA 4.0;
   el crédito va al pie de la pantalla). El botón toma los colores del bosque: la corteza honda, el
   musgo y la hoja. */
.gu-login{ display:flex; color:#FFFFFF; background-color:#141D27; background-size:cover; background-position:center 40%; z-index:50; height:100dvh; }
/* el login va sobre la foto: sus controles nativos (la casilla de «Mantener sesión») no cambian con el tema */
#login-screen{ color-scheme:dark; }
/* el crédito que pide la licencia de la foto, como el de RAÍCES */
#login-screen .gu-credito{ position:absolute; right:14px; bottom:10px; z-index:11; font-size:10px; letter-spacing:.06em;
  color:rgba(255,255,255,.62); text-decoration:none; text-shadow:0 1px 2px rgba(13,23,32,.6); }
#login-screen .gu-credito:hover{ color:#FFFFFF; text-decoration:underline; }
.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="hormiga"]{ --pl-grad:linear-gradient(0deg, #231610, #3A2A1E, #4F6749, #7D9B5B, #3A2A1E, #231610);
  --pl-tam:100% 360%; --pl-mov:plSube 10s ease-in-out infinite alternate; }
/* la clave temporal: aparece debajo de la contraseña, bajo un filete, con sus dos campos */
#login-screen .pl-temporal:not(.hidden){ display:flex; flex-direction:column; gap:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); }
#login-screen .pl-aviso .material-icons-outlined{ font-size:15px; vertical-align:-3px; color:#EADFCE; }
/* el aviso de «¿Olvidó su contraseña?» (tnRecuperarClave lo pinta en línea con un verde que no es de la marca) */
#tn-reset-aviso{ background:#1A2633 !important; color:#FFFFFF !important; border:1px solid rgba(234,223,206,.16) !important;
  font:400 13px/1.5 Figtree, Inter, system-ui, sans-serif !important; box-shadow:0 24px 50px -24px rgba(6,12,18,.98) !important; }

/* ── 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 (la de ÁGUILA) ──────────────────────────────────────
   Una sola franja para las dos pantallas: arriba el logo de Terranova/Origen y los botones
   redondos (tema, idioma, salir); abajo, el saludo en «Mis reportes» o el reporte abierto en el
   editor. Lo que va encima de la foto no cambia con el tema.
   LA FOTO SE FUNDE EN EL SUELO DE CADA TEMA (como en ÁGUILA, pedido de Luis): es lo único de la
   franja que cambia con el tema, el último tramo del velo (`--gu-suelo`). */
.gu-foto{ --gu-suelo:20,29,39; position:relative; isolation:isolate; flex:none; overflow:hidden; color:#FFFFFF;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 56px; background-color:rgb(var(--gu-suelo)); }
html[data-tema="teal"] .gu-foto{ --gu-suelo:3,80,95; }
html[data-tema="claro"] .gu-foto{ --gu-suelo:246,243,237; }
.gu-foto-fotos{ position:absolute; inset:0 0 2px 0; z-index:-2; background-size:cover; background-position:center 50%; }
.gu-foto-fotos > .gu-foto-capa{ position:absolute; inset:0; background-size:cover; background-position:center 50%; 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,.20) 30%, rgba(13,23,32,.42) 64%,
    rgba(var(--gu-suelo),.50) 80%, rgba(var(--gu-suelo),.90) 93%, rgb(var(--gu-suelo)) 100%); }
html[data-tema="teal"] .gu-foto-velo, html[data-tema="claro"] .gu-foto-velo{
  background:linear-gradient(180deg, rgba(13,23,32,.58) 0%, rgba(13,23,32,.20) 30%, rgba(13,23,32,.42) 64%,
    rgba(13,23,32,.18) 74%, rgba(var(--gu-suelo),.28) 84%, rgba(var(--gu-suelo),.78) 94%, rgb(var(--gu-suelo)) 100%); }
.gu-foto-marco{ max-width:600px; margin:0 auto; }
.gu-foto-barra{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:2.1rem; }
/* El logo, más grande (Luis: «puede ser un poco más grande en los diferentes tamaños, hay campo»): 36 px en el
   celular, 42 en tableta y 48 en escritorio; su tope de ancho deja siempre libres los círculos y la pastilla. */
.gu-foto-logo{ display:block; height:36px; width:auto; max-width:56%; object-fit:contain; object-position:left center; }
.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; } }
/* LA PASTILLA DEL USUARIO (la de ARIA y las demás apps): el mismo vidrio que los círculos, la persona
   en su disco deep, el nombre y el botón de salir adentro, sin caja. */
.gu-foto-ses{ display:inline-flex; align-items:center; gap:7px; min-width:0; height:2.1rem; padding:0 6px 0 3px; border-radius:999px;
  background:rgba(26,38,51,.62); border:1px solid rgba(234,223,206,.34); }
.gu-foto-ses__disco{ flex:none; width:1.6rem; height:1.6rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#005565; }
.gu-foto-ses__disco .material-icons-outlined{ font-size:15px; color:#FFFFFF; }
.gu-foto-ses__yo{ min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:1; color:#FFFFFF; }
.gu-foto-ses__salir{ position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; margin:0;
  border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,.72); }
.gu-foto-ses__salir::after{ content:""; position:absolute; inset:-9px -6px; border-radius:999px; }   /* zona de toque de 44 px */
.gu-foto-ses__salir .material-icons-outlined{ font-size:16px; color:inherit; }
.gu-foto-ses__salir:active{ color:#FFFFFF; background:#005565; }
@media (hover:hover){ .gu-foto-ses__salir:hover{ color:#FFFFFF; } }
.gu-foto-botones{ min-width:0; }
/* en el celular la pastilla dice sólo el primer nombre (el completo no cabe al lado del logo y los círculos) */
@media (max-width:519px){
  .gu-foto-ses__yo[data-corto]{ font-size:0; }
  .gu-foto-ses__yo[data-corto]::before{ content:attr(data-corto); font-size:12.5px; }
}
.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; min-width:0; }
.gu-foto-reserva > div{ min-width:0; }
.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; overflow-wrap:anywhere; }
.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; }
.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:10px 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; }

/* LAS PESTAÑAS (lo que Gastos tiene y ÁGUILA no): «Mis reportes» y, para el gerente,
   «Aprobaciones». Pastillas de filete; la elegida, en relleno deep (lo presionado). */
.gu-pestanas{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 0; }
.gu-pestanas__grupo{ display:flex; align-items:center; gap:6px; min-width:0; }
.tab-pill{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(234,223,206,.34); background:transparent; color:rgba(234,223,206,.86);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:background-color .15s ease, border-color .15s ease; }
.tab-pill.tab-active{ background:#005565; border-color:rgba(234,223,206,.18); color:#FFFFFF; }
@media (hover:hover){ .tab-pill:not(.tab-active):hover{ border-color:rgba(234,223,206,.62); } }
/* En el celular «Actualizar» es un círculo con su ícono (el nombre sigue en su globo): las dos
   pestañas y él caben en la misma fila a 375 px. */
@media (max-width:519px){
  .gu-pestanas{ gap:8px; }
  .gu-pestanas .tab-pill{ padding:0 12px; letter-spacing:.12em; }
  .gu-pestanas > .gu-bt--chico{ width:36px; padding:0; flex:none; }
  .gu-pestanas > .gu-bt--chico > span:not(.material-icons-outlined){ display:none; }
}
.gu-insignia{ min-width:18px; height:18px; padding:0 5px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center;
  background:#8A6A2F; color:#FFFFFF; font-size:10px; letter-spacing:0; }

/* 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); }
.gu-c-acento{ color:#2A93A8; }

/* ── LOS BOTONES ────────────────────────────────────────────────────────────────────────────
   Una sola figura: la píldora. 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--ocre{ background:rgba(184,144,79,.16); border-color:rgba(184,144,79,.45); color:#FFFFFF; }
.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; }
.gu-bt:disabled{ opacity:.5; }
@media (hover:hover){
  .gu-bt--linea:hover, .gu-bt--suave:hover, .gu-bt--ocre: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, .tab-pill:focus-visible{ outline:2px solid #2A93A8; outline-offset:2px; }

/* Lo principal de cada pantalla, abajo y al alcance del pulgar: «Nuevo reporte» en la lista y
   «Gasto» en el editor. Son la MISMA pieza que «Enviar» (`gu-bt gu-bt--lleno`); estas dos clases
   sólo los ubican y les dan la sombra de lo que flota. Detrás de «Nuevo reporte» la lista se
   desvanece en el suelo. */
.gu-principal, .gu-agregar{ position:absolute; z-index:30; box-shadow:0 14px 30px -16px rgba(6,12,18,.85); }
.gu-principal{ left:50%; bottom:calc(env(safe-area-inset-bottom) + 22px); transform:translateX(-50%); height:50px; padding:0 28px 0 22px; }
.gu-agregar{ right:16px; bottom:calc(env(safe-area-inset-bottom) + 118px); padding:0 20px 0 16px; }
#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%); }

/* ── 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; }
.gu-aviso--info{ background:rgba(42,147,168,.12); border-color:rgba(42,147,168,.45); }
.gu-aviso--info > .material-icons-outlined{ color:#2A93A8; }

/* ── LAS TARJETAS DE «MIS REPORTES» Y DE «APROBACIONES» ─────────────────────────────────────── */
.gu-lista{ display:flex; flex-direction:column; gap:12px; }
/* al cambiar de pestaña la lista aparece con el mismo fundido de las pantallas, sin pantalla de carga */
:is(#historial-container, #aprobaciones-container):not(.hidden){ animation:guEntrar .24s ease; }
.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__cab > div{ min-width:0; }
.gu-tarjeta__ceja{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(234,223,206,.62); overflow-wrap:anywhere; }
.gu-bk{ font-family:Marcellus, Georgia, serif; font-size:22px; line-height:1.12; color:#FFFFFF; margin-top:2px; }
.gu-tarjeta__quien{ margin-top:6px; }
.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; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 12px; }
.gu-total .gu-cifra{ justify-content:flex-end; }
.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 EDITOR: cada gasto, una tarjeta que se abre (la de ÁGUILA) ────────────────────────────
   Compacta: campos de 44 px, dos por fila, los opcionales plegados en «Más datos» y la cámara,
   la galería y el borrar en una sola fila. */
.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; el rechazado lleva además el filete rojo. */
.estado-rechazado{ border-color:rgba(179,38,30,.75); }
.gu-gasto--aprobado{ border-color:rgba(125,155,91,.60); }
.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__cab--fija{ cursor:default; }
.gu-gasto__cab--fija:active{ background:transparent; }
.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__obs{ margin-top:3px; font-size:12px; color:rgba(234,223,206,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.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; white-space:nowrap; }
.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; }
.gu-marca--linea{ border:1px solid rgba(234,223,206,.34); color:rgba(234,223,206,.92); }
.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--medio{ grid-column:1 / -1; }      /* toda la fila en el celular; media fila en escritorio */
.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); }
.gu-falta{ color:#E3A09A; }
/* 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, .gu-inp[readonly]{ opacity:.6; }
.gu-inp--falta{ border-color:rgba(179,38,30,.70); }
select.gu-inp{ padding-right:8px; }
input[type=date].gu-inp{ padding-right:6px; }
textarea.gu-inp{ height:auto; min-height:88px; padding:10px 12px; line-height:1.45; resize:vertical; }
.gu-prefijo{ position:relative; }
.gu-prefijo > span{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; color:rgba(234,223,206,.55); pointer-events:none; }
.gu-prefijo > .gu-inp{ padding-left:40px; }
.gu-prefijo--corto > .gu-inp{ padding-left:28px; }
.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; font-family:Marcellus, Georgia, serif; font-size:15px; line-height:1.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; margin-top:12px; border-top:1px solid rgba(234,223,206,.08); }
.gu-evid__botones{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
.gu-evid__lados{ display:flex; 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-sin-fotos{ font-size:13px; color:rgba(234,223,206,.5); }
.gu-bt--borrar, .gu-bt--finanzas{ width:44px; height:44px; padding:0; border-radius:12px; }
.gu-bt--borrar{ background:rgba(179,38,30,.16); border-color:rgba(179,38,30,.55); color:#FFFFFF; }
.gu-bt--finanzas{ background:rgba(184,144,79,.14); border-color:rgba(184,144,79,.45); color:#FFFFFF; }
.gu-bt--borrar .material-icons-outlined, .gu-bt--finanzas .material-icons-outlined{ font-size:19px; }
/* la revisión del gerente: aprobar y rechazar cada gasto, en píldoras; la elegida, de relleno */
.gu-revisar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; }
.gu-revisar .gu-bt{ height:40px; font-size:11px; }
.gu-bt--si{ border-color:rgba(125,155,91,.55); color:#FFFFFF; }
.gu-bt--si .material-icons-outlined{ color:#7D9B5B; }
.gu-bt--si.gu-bt--elegido{ background:#7D9B5B; border-color:#7D9B5B; color:#1A2633; }
.gu-bt--si.gu-bt--elegido .material-icons-outlined{ color:#1A2633; }
.gu-bt--no{ border-color:rgba(179,38,30,.60); color:#FFFFFF; }
.gu-bt--no .material-icons-outlined{ color:#E3A09A; }
.gu-bt--no.gu-bt--elegido{ background:#B3261E; border-color:#B3261E; color:#FFFFFF; }
.gu-bt--no.gu-bt--elegido .material-icons-outlined{ color:#FFFFFF; }
.gu-revisar__motivo{ grid-column:1 / -1; }
.gu-gasto__evid{ padding:0 12px 10px 14px; }

/* 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: el total y los botones grandes; en la revisión del gerente, sus tres. */
.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; flex:none; }
.gu-pie__botones{ display:grid; grid-template-columns:1fr 1.5fr; gap:10px; }
.gu-pie__botones .gu-bt{ height:48px; padding:0 14px; }
.gu-pie__botones--tres{ grid-template-columns:1fr 1fr; }
.gu-pie__botones--tres .gu-bt:last-child{ grid-column:1 / -1; }
.gu-pie__botones #btn-save-draft.hidden + #btn-submit{ grid-column:1 / -1; }
/* El total: cada moneda en voz baja y el total convertido en Marcellus, a la derecha. */
#totales-display{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:2px 12px; text-align:right; min-width:0; }
.gu-tot__parte{ font-size:12px; color:rgba(234,223,206,.66); white-space:nowrap; }
.gu-tot__total{ display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; }
.gu-tot__mon{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,223,206,.62); }
.gu-tot__num{ font-family:Marcellus, Georgia, serif; font-size:22px; line-height:1; color:#2A93A8; }

/* 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; }
#powerapps-request-modal{ z-index:99999; }
#modal-powerapps-tarjeta{ z-index:999950; }
#modal-rechazo-todo{ z-index:400; }
#confirmation-modal{ z-index:9999999; }
.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); }
.modal-container:not(.visible) > .gu-hoja{ 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__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.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 .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 .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-hoja__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; }
/* Las dos de Finanzas son largas: su pie queda abajo, con lo que se adjunta y los botones. */
.gu-hoja--ancha{ max-width:720px; display:flex; flex-direction:column; padding-bottom:0; overflow:hidden; }
.gu-hoja--ancha > .gu-hoja__cuerpo{ flex:1; min-height:0; overflow-y:auto; margin:0 -18px; padding:0 18px 16px; }
.gu-hoja__pie{ flex:none; margin:0 -18px; padding:12px 18px calc(env(safe-area-inset-bottom) + 14px); border-top:1px solid rgba(234,223,206,.10);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.gu-hoja__pie .gu-nota{ flex:1 1 220px; }
.gu-hoja__pie-botones{ display:flex; gap:10px; flex:1 1 auto; justify-content:flex-end; }
.gu-seccion{ border-radius:16px; border:1px solid rgba(234,223,206,.10); background:#16222E; padding:14px; }
.gu-seccion + .gu-seccion{ margin-top:12px; }
.gu-seccion__tit{ display:flex; align-items:center; gap:6px; margin-bottom:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,223,206,.72); }
.gu-seccion__tit .material-icons-outlined{ font-size:16px; color:#2A93A8; }
.gu-seccion__tit .gu-opc{ margin-left:4px; }
.gu-seccion--tc{ background:rgba(184,144,79,.12); border-color:rgba(184,144,79,.40); }
.gu-error{ margin-top:10px; font-size:12px; color:#E3A09A; }
.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); }
/* Sólo la estrella, sin disco (Luis: «debe ser solo la estrella con contraste para que se vea»): blanca,
   con un halo de tinta cerrado que dibuja cada punta y otro abierto que la despega de lo que haya detrás. */
.gu-splash__estrella{ width:72px; height:72px; object-fit:contain; animation:guGirar 6s linear infinite;
  filter:drop-shadow(0 1px 2px rgba(10,16,22,.85)) drop-shadow(0 4px 18px rgba(10,16,22,.70)); }
/* la misma estrella en tinta: es la del tema claro (hormiga-tema-claro-ajustes.css); en oscuro y teal no se ve */
.gu-splash__estrella--tinta{ display:none; }
@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: la misma columna, centrada, con más foto arriba (como ÁGUILA) ───────────────── */
@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, .modal-container:not(.visible) > .gu-hoja{ transform:scale(.96); }
  .gu-hoja__asa{ display:none; }
  .gu-hoja--ancha{ max-width:720px; max-height:calc(100dvh - 48px); padding-bottom:0; }
  .gu-hoja--ancha > .gu-hoja__cuerpo{ margin:0 -24px; padding:0 24px 18px; }
  .gu-hoja__pie{ margin:0 -24px; padding:14px 24px 18px; }
  .gu-campos--tres{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:768px){
  .gu-foto{ padding-top:18px; padding-bottom:64px; }
  .gu-foto-logo{ height:42px; }
  .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)); }
}
/* ── ESCRITORIO: la misma línea, con más aire (Luis: «en escritorio sí puede variar y mejorar») ──
   La franja crece y alinea su contenido con el de abajo; los reportes van en dos columnas; el
   editor se abre a 760 px con los gastos a lo ancho, y el pie los acompaña. Las piezas son las
   mismas del celular: sólo cambia cuánto espacio tienen. */
@media (min-width:1024px){
  .gu-foto{ padding:22px 32px 76px; }
  .gu-foto-marco{ max-width:1040px; }
  .gu-foto-logo{ height:48px; }
  .gu-foto-inicio{ margin-top:64px; }
  .gu-foto-reserva{ margin-top:52px; }
  .gu-foto-hola, .gu-foto-bk{ font-size:40px; }
  .gu-scroll{ padding:28px 32px 120px; }
  .gu-col{ max-width:1040px; gap:16px; }
  #view-editor .gu-col, #view-editor .gu-pie__marco{ max-width:760px; }
  body:has(#view-editor.active) .gu-foto-marco{ max-width:760px; }
  .gu-lista#historial-container, .gu-lista#aprobaciones-container{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start; }
  .gu-lista#historial-container > .gu-vacio, .gu-lista#aprobaciones-container > .gu-vacio{ grid-column:1 / -1; }
  .gu-tarjeta{ padding:20px 22px; }
  .gu-bk{ font-size:25px; }
  .gu-pie{ padding:14px 32px 16px; }
  .gu-agregar{ right:max(32px, calc(50% - 380px)); bottom:128px; }
  .gu-campos{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .gu-campos > .gu-campo--medio{ grid-column:span 2; }
  .gu-mas__campos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  .view-section.active, .gu-splash__estrella, .animate-spin, #historial-container, #aprobaciones-container{ animation:none; }
  .gu-hoja, .compra-details-container, .gu-toast, .gu-foto-fotos > .gu-foto-capa{ transition:none; }
}