/* ═══════════════════════════════════════════════════════════════════════════
   GASTOS ADMINISTRATIVOS — LA LÍNEA DE LUJO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   El refresco PRISMA de la app de gastos: sólo visual. Las funciones, los ids y los eventos
   son los de siempre; esta hoja viste lo que ya hay.
   El molde es ARIA (app-agentecotizador/public/aria-lujo.css), porque Gastos no tiene menú a
   la izquierda sino pestañas: la barra `header.cab-marca` va SOBRE LA FOTO (el logo, la
   pastilla del usuario y los círculos de idioma y tema), la portada de «Mis reportes» lleva el
   carrusel de fotografías y el editor su banda de foto. Lo demás, en tinta, con el lenguaje de
   CAMPO (app-operaciones/campo-lujo.css), que es la misma familia de app.
   Dentro del libro de marca: tinta #1A2633, deep #005565, teal #006D82, salvia #7D9B5B (sólo
   relleno), crema #EADFCE y blanco; ocre #8A6A2F y rojo #B3261E sólo de relleno. Sin negrita,
   nada que brille ni se levante, una sola sombra (la del modal). Títulos en Marcellus.
   La paleta de Tailwind ya llega en tinta (gastos-tw.js); esta hoja cubre lo que Tailwind no
   pinta: el blanco, las clases propias de la app y los colores que escribe el JS.
   Es la hoja del tema OSCURO: el teal (gastos-lujo-teal.css) y el claro (gastos-tema-claro.css)
   se generan de ella con «5 herramientas/generar-tema-teal.py» y «generar-tema-claro.py».
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --g-tinta:#1A2633; --g-hondo:#141D27; --g-hoja:#222E3A; --g-campo:#2A3541; --g-deep:#005565; --g-teal:#006D82;
  --g-salvia:#7D9B5B; --g-crema:#EADFCE; --g-crema70:rgba(234,223,206,.70); --g-filete:rgba(234,223,206,.16);
  --g-filete-s:rgba(234,223,206,.08); --g-glare:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --g-sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif; --g-sombra:0 30px 70px -18px rgba(26,38,51,.62);
  --alto-barra:62px; }

/* ── 1 · Suelo, letra y peso ─────────────────────────────────────────────── */
html.gastos-lujo body{ background:var(--g-tinta) !important; color:var(--g-crema) !important; font-family:var(--g-sans) !important; }
html.gastos-lujo body *{ font-weight:400 !important; font-style:normal !important; }
/* los títulos en Marcellus; los rótulos chicos en versalitas siguen en Figtree */
html.gastos-lujo :is(h1, h2, h3, h4):not(.uppercase), html.gastos-lujo .font-display{ font-family:var(--g-glare) !important; letter-spacing:.01em !important; }
html.gastos-lujo .font-mono{ font-family:var(--g-sans) !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; }
html.gastos-lujo #main-app, html.gastos-lujo #main-app > main, html.gastos-lujo #main-app .view-section{ background:var(--g-tinta) !important; }
/* los controles nativos (el calendario de los campos de fecha, las barras) en claro sobre tinta */
html.gastos-lujo:not([data-tema="claro"]){ color-scheme:dark; }
html.gastos-lujo ::selection{ background-color:var(--g-deep); color:#FFFFFF; }

/* ── 2 · Lo que Tailwind no pinta (la capa general de ARIA y CAMPO) ─────── */
/* lo que era blanco es la hoja: tinta un paso más clara */
html.gastos-lujo .bg-white.bg-white:not(#login-screen *){ background-color:var(--g-hoja); }
html.gastos-lujo :is([class^="bg-white/"], [class*=" bg-white/"]):not(#login-screen *){ background-color:rgba(234,223,206,.05) !important; }
/* una sola sombra en el producto, la del modal: todo lo demás se eleva por material */
html.gastos-lujo .shadow-sm.shadow-sm, html.gastos-lujo .shadow.shadow, html.gastos-lujo .shadow-md.shadow-md,
html.gastos-lujo .shadow-lg.shadow-lg, html.gastos-lujo .shadow-xl.shadow-xl, html.gastos-lujo .shadow-inner.shadow-inner{ box-shadow:none; }
html.gastos-lujo [class*="hover:shadow-"]:hover{ box-shadow:none !important; }
html.gastos-lujo .shadow-2xl:not(#login-screen *){ box-shadow:var(--g-sombra) !important; }
html.gastos-lujo .hover\:scale-105:hover, html.gastos-lujo .hover\:scale-110:hover{ transform:none !important; }
/* el relleno de acción es deep, con letra blanca; al pasar, teal */
html.gastos-lujo .bg-forest-insignia:not(:where(#login-screen *)), html.gastos-lujo :is([class^="bg-forest-6"], [class*=" bg-forest-6"]), html.gastos-lujo :is([class^="bg-forest-7"], [class*=" bg-forest-7"]),
html.gastos-lujo :is([class^="bg-teal-6"], [class*=" bg-teal-6"]), html.gastos-lujo :is([class^="bg-teal-7"], [class*=" bg-teal-7"]),
html.gastos-lujo :is([class^="bg-emerald-6"], [class*=" bg-emerald-6"]){
  background:var(--g-deep) !important; background-image:none !important; animation:none !important; color:#FFFFFF !important; border-color:var(--g-deep) !important; box-shadow:none !important; }
html.gastos-lujo .bg-forest-insignia:not(:where(#login-screen *)):hover, html.gastos-lujo :is([class^="bg-forest-6"], [class*=" bg-forest-6"]):hover,
html.gastos-lujo :is([class^="bg-teal-6"], [class*=" bg-teal-6"]):hover{ background:var(--g-teal) !important; border-color:var(--g-teal) !important; }
html.gastos-lujo .bg-forest-insignia *, html.gastos-lujo :is([class^="bg-emerald-6"], [class*=" bg-emerald-6"]) *{ color:#FFFFFF; }
html.gastos-lujo :is([class^="bg-red-6"], [class*=" bg-red-6"]), html.gastos-lujo :is([class^="bg-rose-6"], [class*=" bg-rose-6"]){ background-color:#B3261E !important; color:#FFFFFF !important; border-color:#B3261E !important; }
html.gastos-lujo :is([class^="bg-red-6"], [class*=" bg-red-6"]):hover{ background-color:#95201A !important; }
/* los campos: la hoja un paso más clara; el foco con anillo doble */
html.gastos-lujo body input:not(#login-screen *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.border-0):not(.bg-transparent),
html.gastos-lujo body textarea:not(#login-screen *):not(.border-0):not(.bg-transparent),
html.gastos-lujo body select:not(#login-screen *):not(.border-0):not(.bg-transparent){
  background-color:var(--g-campo) !important; color:var(--g-crema) !important; border-color:var(--g-filete) !important; border-radius:10px !important; }
html.gastos-lujo body :is(input, select, textarea):not(#login-screen *):disabled{ opacity:.62; cursor:not-allowed; }
html.gastos-lujo body input:not(#login-screen *):focus-visible, html.gastos-lujo body textarea:not(#login-screen *):focus-visible,
html.gastos-lujo body select:not(#login-screen *):focus-visible, html.gastos-lujo body button:not(#login-screen *):focus-visible{
  outline:2px solid var(--g-teal) !important; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.gastos-lujo body :is(input, select, textarea):not(#login-screen *):focus{ border-color:var(--g-teal) !important; box-shadow:0 0 0 3px rgba(0,109,130,.28) !important; }
html.gastos-lujo select option{ background-color:var(--g-hoja); color:var(--g-crema); }
html.gastos-lujo input::placeholder, html.gastos-lujo textarea::placeholder{ color:rgba(234,223,206,.70) !important; opacity:.75; }
html.gastos-lujo input[type=checkbox], html.gastos-lujo input[type=radio]{ accent-color:var(--g-deep); }
/* los avisos: el ocre y el rojo de sistema, sólo de relleno; la letra, crema */
html.gastos-lujo :is([class^="bg-amber-50"], [class*=" bg-amber-50"]), html.gastos-lujo :is([class^="bg-yellow-50"], [class*=" bg-yellow-50"]){ background-color:rgba(138,106,47,.26) !important; border-color:rgba(138,106,47,.62) !important; color:var(--g-crema); }
html.gastos-lujo :is([class^="bg-red-50"], [class*=" bg-red-50"]), html.gastos-lujo :is([class^="bg-rose-50"], [class*=" bg-rose-50"]){ background-color:rgba(179,38,30,.20) !important; border-color:rgba(179,38,30,.55) !important; }
html.gastos-lujo :is([class^="bg-emerald-50"], [class*=" bg-emerald-50"]), html.gastos-lujo :is([class^="bg-emerald-100"], [class*=" bg-emerald-100"]){ background-color:rgba(125,155,91,.24) !important; border-color:rgba(125,155,91,.50) !important; color:var(--g-crema) !important; }
html.gastos-lujo :is(:is([class^="bg-blue-50"], [class*=" bg-blue-50"]), :is([class^="bg-indigo-50"], [class*=" bg-indigo-50"]), :is([class^="bg-teal-50"], [class*=" bg-teal-50"]), :is([class^="bg-forest-50"], [class*=" bg-forest-50"])){
  background-color:rgba(0,109,130,.20) !important; border-color:rgba(0,109,130,.50) !important; }
/* los tonos 300–500 son relleno, nunca letra: sobre tinta se leen en crema */
html.gastos-lujo :is(:is([class^="text-blue-4"], [class*=" text-blue-4"]), :is([class^="text-blue-5"], [class*=" text-blue-5"]), :is([class^="text-teal-5"], [class*=" text-teal-5"]), :is([class^="text-teal-6"], [class*=" text-teal-6"]),
  :is([class^="text-forest-4"], [class*=" text-forest-4"]), :is([class^="text-forest-5"], [class*=" text-forest-5"]), :is([class^="text-ocean-6"], [class*=" text-ocean-6"]),
  :is([class^="text-emerald-5"], [class*=" text-emerald-5"]), :is([class^="text-amber-3"], [class*=" text-amber-3"]), :is([class^="text-amber-5"], [class*=" text-amber-5"]), :is([class^="text-amber-6"], [class*=" text-amber-6"]),
  :is([class^="text-red-4"], [class*=" text-red-4"]), :is([class^="text-red-5"], [class*=" text-red-5"]), :is([class^="text-red-6"], [class*=" text-red-6"])):not(#login-screen *){ color:var(--g-crema) !important; }
/* el rojo que dice «falta» (los asteriscos de lo obligatorio): un rojo claro que sí se lee */
html.gastos-lujo span.text-red-500:not(#login-screen *){ color:#E3A09A !important; }

/* ── 3 · El login: el molde pl-* de PRISMA (prisma-login.css) y el botón de Gastos ── */
/* GASTOS · el botón: el deep y la salvia que se cruzan despacio, como el papel de una cuenta que se
   va cuadrando. Provisional hasta la foto nueva del login (la elige la sesión de fotos): el
   degradado se saca de la foto, como en las demás. */
html:not(#_):not(#_) .pl-caja[data-pl="gastos"]{ --pl-grad:linear-gradient(135deg, #141D27, #005565, #4F6749, #005565, #141D27);
  --pl-tam:300% 300%; --pl-mov:plDiagonal 13s ease-in-out infinite; }
#login-screen > .absolute.inset-0{ background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%) !important; }
/* 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:var(--g-tinta) !important; color:var(--g-crema) !important; border:1px solid var(--g-filete) !important; border-left:4px solid var(--g-teal) !important;
  font:400 13px/1.5 var(--g-sans) !important; box-shadow:var(--g-sombra) !important; }

/* ── 4 · LA BARRA: sobre la foto al entrar; sólida cuando la foto se va (molde ARIA) ──
   Va encima de las vistas, y cada vista empieza con su foto: la portada de «Mis reportes» y la
   banda del editor. gastos-lujo.js mide su alto (--alto-barra) y le quita `cab-sobre-foto` en
   cuanto la foto sale de detrás. Lleva `data-pz-foto`: sobre la foto no cambia con el tema; lo
   único que cambia es la barra sólida, y eso va a mano en gastos-tema-claro-ajustes.css y
   gastos-tema-teal.css. */
html.gastos-lujo #main-app{ position:relative; }
html.gastos-lujo header.cab-marca{ position:absolute; top:0; left:0; right:0; z-index:40; padding:14px 24px; color:#EADFCE;
  background-color:rgba(26,38,51,.94); background-image:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(234,223,206,.10); transition:background-color .35s ease, border-color .35s ease; }
html.gastos-lujo header.cab-marca.cab-sobre-foto{ background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
html.gastos-lujo .cab-marca__fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1040px; margin:0 auto; }
html.gastos-lujo header.cab-marca img.logo-marca{ display:block; height:40px; width:auto; flex:none; }
html.gastos-lujo header.cab-marca.cab-sobre-foto img.logo-marca{ filter:drop-shadow(0 1px 2px rgba(10,16,22,.85)) drop-shadow(0 2px 12px rgba(10,16,22,.65)); }
html.gastos-lujo .cab-marca__acc{ display:flex; align-items:center; gap:8px; min-width:0; }
html.gastos-lujo .cab-marca__tema{ display:contents; }
/* el título de la app no se ve (el nombre va en la pestaña y en la portada); queda para el lector de pantalla */
html.gastos-lujo .cab-marca__nombre{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
/* LOS CÍRCULOS DE LA BARRA SE VISTEN TODOS COMO EL DEL TEMA (el de CIMA): tinta al 62 %,
   filete crema al 34 %, ícono blanco de 16 px, 2,1 rem. Los mismos sobre la foto y en la barra sólida. */
html.gastos-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn){
  -webkit-appearance:none; appearance:none; 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(13,23,32,.62); border:1px solid rgba(234,223,206,.34); color:#FFFFFF;
  font:400 11px/1 var(--g-sans); letter-spacing:.08em; cursor:pointer; transition:background-color .2s, border-color .2s; }
html.gastos-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn):hover{ background:rgba(13,23,32,.75); border-color:#EADFCE; }
html.gastos-lujo header.cab-marca :is(.bt-cab, .pz-tema-btn) .material-icons-outlined{ font-size:16px; line-height:1; color:#FFFFFF; }
/* la pastilla del usuario: el mismo vidrio que los círculos; la persona en su disco deep y el
   botón de salir adentro, sin caja */
html.gastos-lujo header.cab-marca .ses{ display:inline-flex; align-items:center; gap:8px; min-width:0; height:2.1rem; padding:0 8px 0 3px; border-radius:999px;
  background:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); }
html.gastos-lujo header.cab-marca .ses__disco{ width:1.6rem; height:1.6rem; flex:none; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--g-deep); color:#FFFFFF; }
html.gastos-lujo header.cab-marca .ses__disco .material-icons-outlined{ font-size:15px; color:#FFFFFF; }
html.gastos-lujo header.cab-marca .ses__yo{ margin:0; min-width:0; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:400 12.5px/1 var(--g-sans); color:#FFFFFF; }
html.gastos-lujo header.cab-marca .ses__salir{ -webkit-appearance:none; appearance:none; flex:none; display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:0 0 0 2px; background:none; border:0; color:rgba(255,255,255,.72); cursor:pointer; transition:color .2s; }
html.gastos-lujo header.cab-marca .ses__salir:hover{ color:#FFFFFF; }
html.gastos-lujo header.cab-marca .ses__salir .material-icons-outlined{ font-size:16px; color:inherit; }

/* ── 5 · LA FOTOGRAFÍA: la portada de «Mis reportes» y la banda del editor ─────
   A sangre, de borde a borde, la barra encima. Las dos capas de foto las pone el motor
   (gastos-viaje.js); el velo es el del libro: tinta arriba para la barra, limpia al medio y
   45 % abajo para la letra. Detrás de la foto, siempre tinta honda. */
html.gastos-lujo .gas-portada{ position:relative; isolation:isolate; overflow:hidden; background-color:var(--g-hondo); color:#FFFFFF; }
html.gastos-lujo .gas-portada__fotos{ position:absolute; inset:0; z-index:-2; }
html.gastos-lujo .gas-portada__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s cubic-bezier(.22,.9,.24,1); }
html.gastos-lujo .gas-portada__foto.activa{ opacity:1; }
html.gastos-lujo .gas-portada::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,.50) 0%, rgba(26,38,51,.14) 34%, rgba(26,38,51,.06) 48%, rgba(26,38,51,.45) 100%); }
html.gastos-lujo .gas-portada__in{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  max-width:1040px; margin:0 auto; padding:calc(var(--alto-barra) + 34px) 24px 30px; }
html.gastos-lujo .gas-portada--inicio .gas-portada__in{ min-height:clamp(320px, 44vh, 430px); }
/* detrás del saludo, una sombra de tinta ancha y difusa: sobre una foto clara el blanco se lavaba (como en ARIA) */
html.gastos-lujo .gas-portada__texto{ position:relative; max-width:640px; }
html.gastos-lujo .gas-portada__texto::before{ content:""; position:absolute; z-index:-1; inset:-34% -14% -30% -10%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(13,20,28,.55), rgba(13,20,28,.32) 55%, rgba(13,20,28,0)); }
html.gastos-lujo .gas-portada__ceja{ margin:0 0 .7rem; font:400 .66rem/1.3 var(--g-sans); letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.86);
  text-shadow:0 1px 10px rgba(13,23,32,.75); }
html.gastos-lujo .gas-portada__tit{ margin:0; font:400 clamp(2.2rem, 4.2vw, 3.3rem)/1.04 var(--g-glare) !important; color:#FFFFFF !important; letter-spacing:-.005em !important;
  text-shadow:0 2px 24px rgba(13,23,32,.7); overflow-wrap:anywhere; }
/* las cifras del día, en una línea bajo un filete: la cifra en Marcellus y su nombre al lado, en voz baja */
html.gastos-lujo .gas-portada__libro{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 30px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.4); }
html.gastos-lujo .gas-portada__libro:empty{ display:none; }
html.gastos-lujo .gas-portada__libro div{ display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
html.gastos-lujo .gas-portada__libro b{ font:400 1.65rem/1 var(--g-glare) !important; color:#FFFFFF; font-variant-numeric:tabular-nums; text-shadow:0 2px 16px rgba(13,23,32,.7); }
html.gastos-lujo .gas-portada__libro span{ font:400 .8rem/1.2 var(--g-sans); color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.8); }
/* la banda del editor: más baja; a la izquierda el tipo y la referencia, a la derecha «Volver» */
html.gastos-lujo .gas-portada--editor .gas-portada__in{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:1rem; max-width:760px; padding-bottom:22px; min-height:0; }
html.gastos-lujo .gas-portada--editor .gas-portada__tit{ font-size:clamp(1.6rem, 3vw, 2.3rem) !important; }
html.gastos-lujo .gas-volver{ -webkit-appearance:none; appearance:none; flex:none; display:inline-flex; align-items:center; gap:6px; height:2.1rem; padding:0 14px 0 10px;
  border-radius:999px; background:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); color:#FFFFFF; font:400 12px/1 var(--g-sans); letter-spacing:.04em;
  cursor:pointer; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background-color .2s, border-color .2s; }
html.gastos-lujo .gas-volver:hover{ background:rgba(13,23,32,.75); border-color:#EADFCE; }
html.gastos-lujo .gas-volver .material-icons-outlined{ font-size:16px; color:#FFFFFF; }

/* ── 6 · Las pestañas y la lista de reportes ─────────────────────────────── */
html.gastos-lujo .gas-cuerpo{ max-width:1040px; margin:0 auto; padding:22px 24px 0; }
html.gastos-lujo .gas-cuerpo--editor{ max-width:760px; }
/* la fila de pestañas: pastillas con filete; la elegida en deep (lo presionado, en relleno deep) */
html.gastos-lujo .gas-pestanas{ border-bottom:1px solid var(--g-filete-s) !important; padding-bottom:14px !important; margin-bottom:18px !important; }
html.gastos-lujo .tab-pill{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; height:2.1rem; padding:0 15px; border-radius:999px;
  font:400 .68rem/1 var(--g-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--g-crema70); background:transparent; border:1px solid var(--g-filete);
  transition:background-color .2s, border-color .2s, color .2s; }
html.gastos-lujo .tab-pill:hover{ color:var(--g-crema); border-color:rgba(234,223,206,.40); }
html.gastos-lujo .tab-pill.tab-active{ color:#FFFFFF; background:var(--g-deep); border-color:var(--g-deep); }
html.gastos-lujo .tab-pill.tab-active:hover{ background:var(--g-teal); border-color:var(--g-teal); }
html.gastos-lujo #badge-aprobaciones{ background:#8A6A2F !important; color:#FFFFFF !important; font-size:.6rem !important; letter-spacing:0; min-width:18px !important; height:18px !important; }
/* «Actualizar»: un círculo más, como los de la barra pero sobre la tinta */
html.gastos-lujo .gas-actualizar{ display:inline-flex !important; align-items:center; gap:6px; height:2.1rem; padding:0 13px !important; border-radius:999px !important;
  background:transparent !important; border:1px solid var(--g-filete) !important; color:var(--g-crema) !important; font:400 .72rem/1 var(--g-sans) !important; letter-spacing:.04em; }
html.gastos-lujo .gas-actualizar:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.05) !important; }
html.gastos-lujo .gas-actualizar .material-icons-outlined{ font-size:16px !important; color:var(--g-crema) !important; }
/* las hojas de la lista: tenues sobre la tinta, sin sombra, radio 16 */
html.gastos-lujo :is(#historial-container, #aprobaciones-container) > div{ background-color:rgba(234,223,206,.03) !important; border:1px solid rgba(234,223,206,.09) !important;
  border-radius:16px !important; box-shadow:none !important; padding:1.15rem 1.2rem !important; transition:border-color .2s; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) > div:hover{ border-color:rgba(234,223,206,.22) !important; }
/* el reporte que pide correcciones: su filete en rojo */
html.gastos-lujo #historial-container > div.border-red-400{ border-color:rgba(179,38,30,.70) !important; box-shadow:inset 3px 0 0 #B3261E !important; }
html.gastos-lujo #aprobaciones-container > div{ box-shadow:inset 3px 0 0 var(--g-teal) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) h3{ font-family:var(--g-glare) !important; font-size:1.45rem !important; line-height:1.12 !important; color:#FFFFFF !important; letter-spacing:0 !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) p.uppercase{ font-size:.6rem !important; letter-spacing:.2em !important; color:var(--g-crema70) !important; margin-bottom:.35rem !important; }
/* el total: una línea de libro entre dos filetes, sin bloque */
html.gastos-lujo :is(#historial-container, #aprobaciones-container) .border-y{ background:transparent !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important;
  border-color:var(--g-filete-s) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) .border-y > div{ font-family:var(--g-glare) !important; font-size:1.3rem !important; color:#FFFFFF !important; font-variant-numeric:tabular-nums; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) .border-y > div span.text-\[10px\]{ font-family:var(--g-sans); color:var(--g-crema70) !important; margin-right:2px; }
/* el estado: una pastilla de relleno suave con la letra crema */
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md{ border-radius:999px !important; padding:.3rem .65rem !important; font-size:.56rem !important; letter-spacing:.14em !important;
  border-color:transparent !important; box-shadow:none !important; color:var(--g-crema) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md.bg-slate-100{ background:rgba(234,223,206,.10) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md.bg-amber-50{ background:rgba(138,106,47,.45) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md.bg-red-50{ background:rgba(179,38,30,.45) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md.bg-forest-50{ background:rgba(125,155,91,.38) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) span.rounded-md.bg-teal-600{ background:var(--g-deep) !important; color:#FFFFFF !important; }
/* el botón de cada reporte: una pastilla con filete; «Corregir», de relleno rojo */
html.gastos-lujo :is(#historial-container, #aprobaciones-container) button{ border-radius:999px !important; height:2.1rem; padding:0 1rem !important; letter-spacing:.14em !important; font-size:.62rem !important; }
html.gastos-lujo #historial-container button.bg-obsidian{ background:transparent !important; border:1px solid var(--g-filete) !important; color:var(--g-crema) !important; }
html.gastos-lujo #historial-container button.bg-obsidian:hover{ background:var(--g-deep) !important; border-color:var(--g-deep) !important; color:#FFFFFF !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) button .material-icons-outlined{ font-size:15px !important; }
/* el estado vacío */
html.gastos-lujo :is(#historial-container, #aprobaciones-container) > div.text-center .rounded-full{ background:transparent !important; border:1px solid var(--g-filete) !important; }
html.gastos-lujo :is(#historial-container, #aprobaciones-container) > div.text-center .material-icons-outlined{ color:var(--g-crema70) !important; }
/* el botón de «Nuevo reporte» y el de «Agregar gasto»: el círculo deep, sin sombra */
html.gastos-lujo .fab-btn{ box-shadow:0 14px 34px -12px rgba(13,20,28,.8) !important; border:1px solid rgba(234,223,206,.22) !important; transition:background-color .2s; }
html.gastos-lujo .fab-btn:active{ transform:scale(.94); }
html.gastos-lujo .fab-btn .material-icons-outlined{ color:#FFFFFF; }

/* ── 7 · El editor de un reporte ─────────────────────────────────────────── */
html.gastos-lujo #view-editor .gas-desglose h2{ font-family:var(--g-sans) !important; color:var(--g-crema70) !important; font-size:.64rem !important; letter-spacing:.22em !important; }
html.gastos-lujo #lbl-count{ background:transparent !important; border:1px solid var(--g-filete); border-radius:999px !important; color:var(--g-crema) !important; padding:.15rem .6rem !important; }
/* cada gasto, una hoja tenue con su filete de estado a la izquierda */
html.gastos-lujo .compra-card, html.gastos-lujo #compras-container > div:not(.compra-card){ background-color:rgba(234,223,206,.03) !important; border:1px solid rgba(234,223,206,.09) !important;
  border-radius:16px !important; box-shadow:none !important; }
html.gastos-lujo .compra-card.expanded{ border-color:rgba(234,223,206,.22) !important; }
html.gastos-lujo .compra-card > div:first-child{ padding:.85rem 1rem !important; }
html.gastos-lujo .compra-card > div:first-child:active{ background:rgba(234,223,206,.03) !important; }
html.gastos-lujo .compra-card [id^="s-prov-"], html.gastos-lujo #compras-container > div:not(.compra-card) p.text-xs{ font-size:.9rem !important; color:#FFFFFF !important; }
html.gastos-lujo .compra-card [id^="s-monto-"]{ font-family:var(--g-glare); font-size:1.05rem; color:#FFFFFF; font-variant-numeric:tabular-nums; }
html.gastos-lujo .compra-card .expand-icon{ background:transparent !important; border-color:var(--g-filete) !important; transition:transform .25s ease; }
html.gastos-lujo .compra-card .expand-icon .material-icons-outlined{ color:var(--g-crema70) !important; }
html.gastos-lujo .compra-card.expanded .expand-icon{ border-color:rgba(234,223,206,.45) !important; }
html.gastos-lujo .compra-card.expanded .expand-icon .material-icons-outlined{ color:#FFFFFF !important; }
html.gastos-lujo .compra-card .compra-details-container{ background:transparent !important; padding-left:1rem !important; padding-right:1rem !important; }
html.gastos-lujo .compra-card.expanded .compra-details-container{ border-top:1px solid var(--g-filete-s); }
/* el estado de cada línea: el filete de la izquierda (sin fondo pastel) */
html.gastos-lujo .estado-borrador{ box-shadow:inset 3px 0 0 #8A6A2F !important; }
html.gastos-lujo .estado-pendiente{ box-shadow:inset 3px 0 0 var(--g-teal) !important; }
html.gastos-lujo .estado-rechazado{ box-shadow:inset 3px 0 0 #B3261E !important; background-color:rgba(179,38,30,.08) !important; border-color:rgba(179,38,30,.40) !important; }
html.gastos-lujo .estado-corregido{ box-shadow:inset 3px 0 0 var(--g-teal) !important; background-color:rgba(0,109,130,.08) !important; }
html.gastos-lujo .estado-aprobado{ box-shadow:inset 3px 0 0 var(--g-salvia) !important; opacity:.9; }
/* las marcas de cada línea (BK, rechazada, corregida, OK): pastillas de relleno */
html.gastos-lujo #compras-container span.rounded{ border-radius:999px !important; border-color:transparent !important; padding:.14rem .5rem !important; letter-spacing:.1em; white-space:nowrap; color:var(--g-crema) !important; }
html.gastos-lujo #compras-container span.rounded.bg-indigo-50{ background:rgba(0,109,130,.36) !important; }
html.gastos-lujo #compras-container span.rounded.bg-red-100{ background:rgba(179,38,30,.45) !important; }
html.gastos-lujo #compras-container span.rounded.bg-emerald-100{ background:rgba(125,155,91,.38) !important; }
html.gastos-lujo #compras-container span.rounded.bg-forest-600{ background:var(--g-deep) !important; color:#FFFFFF !important; }
/* los rótulos de los campos */
html.gastos-lujo #compras-container label{ color:var(--g-crema70) !important; letter-spacing:.16em !important; }
/* la cámara y la galería: dos cuadros con filete; el de borrar, un círculo rojo de relleno tenue */
html.gastos-lujo #compras-container label.border-dashed{ border-radius:12px !important; border-style:solid !important; background:transparent !important; border-color:var(--g-filete) !important; color:var(--g-crema) !important; }
html.gastos-lujo #compras-container label.border-dashed:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.05) !important; }
html.gastos-lujo #compras-container label.border-dashed .material-icons-outlined{ color:var(--g-crema) !important; }
html.gastos-lujo #compras-container button.bg-red-50, html.gastos-lujo #compras-container button.bg-amber-50{ width:2.5rem; height:2.5rem !important; padding:0 !important; justify-content:center; border-radius:999px !important; }
html.gastos-lujo #compras-container button.bg-red-50:hover{ background:rgba(179,38,30,.40) !important; }
html.gastos-lujo #compras-container button.bg-amber-50:hover{ background:rgba(138,106,47,.50) !important; }
html.gastos-lujo #compras-container .w-px{ background:var(--g-filete) !important; }
/* la revisión del gerente: aprobar y rechazar, pastillas; la elegida, de relleno */
html.gastos-lujo #compras-container button:is(.bg-emerald-50, .bg-emerald-600, .bg-red-50, .bg-red-600):not(.h-10){ border-radius:999px !important; height:2.1rem; letter-spacing:.14em !important; }
html.gastos-lujo #compras-container button.bg-emerald-600{ background:var(--g-salvia) !important; border-color:var(--g-salvia) !important; color:#1A2633 !important; }
html.gastos-lujo #compras-container button.bg-emerald-600 .material-icons-outlined{ color:#1A2633 !important; }
/* los avisos del editor: una línea con su filete, sin bloque pastel */
html.gastos-lujo :is(#alerta-correccion, #alerta-estado){ border-radius:0 14px 14px 0 !important; box-shadow:none !important; }
html.gastos-lujo :is(#alerta-correccion, #alerta-estado) .material-icons-outlined{ color:var(--g-crema) !important; }
html.gastos-lujo :is(#alerta-correccion, #alerta-estado) p{ color:var(--g-crema) !important; }
html.gastos-lujo #alerta-estado.border-blue-500, html.gastos-lujo #alerta-estado.border-forest-500{ border-left-color:var(--g-teal) !important; }
html.gastos-lujo #alerta-correccion{ border-left-color:#B3261E !important; }
/* el estado vacío del editor */
html.gastos-lujo #empty-state{ background:transparent !important; border:1px dashed rgba(234,223,206,.20) !important; border-radius:16px !important; }
html.gastos-lujo #empty-state > div{ background:transparent !important; border-color:var(--g-filete) !important; }
html.gastos-lujo #empty-state .material-icons-outlined{ color:var(--g-crema70) !important; }
html.gastos-lujo #empty-state p:first-of-type{ font-family:var(--g-glare); font-size:1.15rem !important; color:#FFFFFF !important; }
/* el pie del editor: tinta con un filete, el total en Marcellus, los botones en pastilla */
html.gastos-lujo :is(#footer-editor, #footer-revision){ background:rgba(26,38,51,.94) !important; border-top:1px solid var(--g-filete) !important; box-shadow:none !important; }
html.gastos-lujo #footer-editor > div, html.gastos-lujo #footer-revision > div{ max-width:760px !important; }
html.gastos-lujo #totales-display{ font-family:var(--g-glare); color:#FFFFFF !important; font-variant-numeric:tabular-nums; line-height:1.35 !important; }
html.gastos-lujo #totales-display span.text-xs{ font-family:var(--g-sans); letter-spacing:.08em; color:var(--g-crema70) !important; }
html.gastos-lujo :is(#footer-editor, #footer-revision) button{ border-radius:999px !important; letter-spacing:.14em !important; }
html.gastos-lujo #btn-save-draft{ background:transparent !important; border:1px solid var(--g-filete) !important; color:var(--g-crema) !important; }
html.gastos-lujo #btn-save-draft:hover{ border-color:rgba(234,223,206,.55) !important; }
html.gastos-lujo #footer-revision button.bg-red-50{ background:rgba(179,38,30,.26) !important; border-color:rgba(179,38,30,.55) !important; color:var(--g-crema) !important; }
html.gastos-lujo #footer-revision button.bg-red-50:hover{ background:rgba(179,38,30,.45) !important; }
html.gastos-lujo #footer-revision button.bg-emerald-50{ background:rgba(125,155,91,.24) !important; border-color:rgba(125,155,91,.55) !important; color:var(--g-crema) !important; }
html.gastos-lujo #footer-revision button.bg-emerald-50:hover{ background:rgba(125,155,91,.42) !important; }
html.gastos-lujo #footer-revision .material-icons-outlined{ color:inherit !important; }

/* ── 8 · Los comprobantes y su visor ──────────────────────────────────────── */
html.gastos-lujo .thumb-stack, html.gastos-lujo .thumb-stack-more{ border:2px solid var(--g-tinta) !important; background:var(--g-hoja) !important; color:var(--g-crema) !important; box-shadow:none !important; }
html.gastos-lujo .thumb-stack:hover, html.gastos-lujo .thumb-stack-more:hover{ transform:translateY(-2px) !important; box-shadow:none !important; background:var(--g-campo) !important; color:#FFFFFF !important; }
html.gastos-lujo .thumb-stack .material-icons-outlined{ color:var(--g-crema) !important; }
html.gastos-lujo #lightbox-vouchers{ background:rgba(20,29,39,.97) !important; }
html.gastos-lujo .lb-close-v:hover{ color:var(--g-crema) !important; }
html.gastos-lujo .lb-del-v{ background:#B3261E !important; border-radius:999px !important; box-shadow:none !important; }
html.gastos-lujo .lb-del-v:hover{ background:#95201A !important; }
html.gastos-lujo .lb-nav-v:hover{ background:rgba(234,223,206,.10) !important; color:var(--g-crema) !important; }
html.gastos-lujo #lb-counter-voucher{ color:var(--g-crema70) !important; font-family:var(--g-sans) !important; background:rgba(13,20,28,.6) !important; }
html.gastos-lujo #lb-office-link-voucher{ color:var(--g-crema) !important; }

/* ── 9 · Los modales, el aviso y la carga ─────────────────────────────────── */
html.gastos-lujo :is(.modal-container, #confirmation-modal, #powerapps-request-modal, #modal-nuevo-reporte){ background-color:rgba(20,29,39,.78) !important; }
/* cada modal es una hoja con el título en Marcellus, sin la barra de color de antes */
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div:is(.bg-white, #confirmation-content){ background-color:var(--g-hoja) !important; border:1px solid var(--g-filete) !important;
  border-radius:18px !important; box-shadow:var(--g-sombra) !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child{ background:transparent !important; background-image:none !important; animation:none !important;
  border-bottom:1px solid var(--g-filete) !important; box-shadow:none !important; padding-top:1.15rem !important; padding-bottom:1.05rem !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child :is(h2, h3){ font-family:var(--g-glare) !important; font-size:1.4rem !important; letter-spacing:.005em !important; color:#FFFFFF !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child p{ color:var(--g-crema70) !important; font-family:var(--g-sans) !important; }
/* el ícono del título: un disco deep, como la persona de la barra */
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child > .material-icons-outlined,
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child > div:first-child > .material-icons-outlined{
  width:40px; height:40px; flex:none; display:inline-flex !important; align-items:center; justify-content:center; border-radius:99px;
  background:var(--g-deep); color:#FFFFFF !important; font-size:20px !important; }
/* el botón de cerrar: un círculo con filete */
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child button{ width:34px; height:34px; padding:0 !important; border-radius:99px !important; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--g-filete) !important; color:var(--g-crema) !important; background:transparent !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child button:hover{ border-color:rgba(234,223,206,.55) !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child button .material-icons-outlined{ color:inherit !important; font-size:18px !important; }
/* adentro, las secciones son hojas tenues; el pie, sin bloque */
html.gastos-lujo :is(.modal-container, .fixed.inset-0) :is(.bg-slate-50, .bg-gray-50){ background-color:transparent !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div :is(.bg-white, [class*="bg-indigo-50"], [class*="bg-teal-50"], [class*="bg-slate-100/"]):is(.rounded-xl, .rounded-lg):not(input):not(select):not(textarea):not(button){
  background-color:rgba(234,223,206,.035) !important; border-color:rgba(234,223,206,.10) !important; border-radius:14px !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) :is(.border-slate-100, .border-slate-200, .border-gray-100, .border-indigo-100, .border-teal-100):not(input):not(select):not(textarea){ border-color:var(--g-filete-s) !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) h4{ color:var(--g-crema70) !important; letter-spacing:.2em !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) label{ color:var(--g-crema70) !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div button{ border-radius:999px !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > div:last-child button:is(.bg-white, [class*="border-slate-300"]):not(.bg-forest-insignia){ background:transparent !important; border:1px solid var(--g-filete) !important; color:var(--g-crema) !important; }
html.gastos-lujo :is(.modal-container, .fixed.inset-0) > div > div:last-child button:is(.bg-white, [class*="border-slate-300"]):not(.bg-forest-insignia):hover{ border-color:rgba(234,223,206,.55) !important; }
html.gastos-lujo #confirmation-content > div:first-child{ background:transparent !important; border-bottom:1px solid var(--g-filete) !important; }
html.gastos-lujo #confirmation-content h3{ font-family:var(--g-glare) !important; font-size:1.35rem !important; }
html.gastos-lujo #confirmation-message{ color:var(--g-crema) !important; }
html.gastos-lujo #confirmation-content > div:last-child{ background:transparent !important; border-top-color:var(--g-filete) !important; }
html.gastos-lujo #btn-confirm-ok{ background:var(--g-deep) !important; border-radius:99px !important; box-shadow:none !important; }
html.gastos-lujo #btn-confirm-ok:hover{ background:var(--g-teal) !important; }
html.gastos-lujo #btn-confirm-cancel{ background:transparent !important; border-color:var(--g-filete) !important; color:var(--g-crema) !important; border-radius:99px !important; }
html.gastos-lujo #pa-alert-box{ background:rgba(0,109,130,.18) !important; border-color:rgba(0,109,130,.45) !important; color:var(--g-crema) !important; border-radius:12px !important; }
html.gastos-lujo #powerapps-request-modal .bg-indigo-500{ background:var(--g-teal) !important; }
/* el aviso: la hoja de tinta con un filete; el éxito en deep y el error en rojo, de relleno */
html.gastos-lujo #toast{ background-color:var(--g-hoja) !important; color:var(--g-crema) !important; border:1px solid var(--g-filete) !important; border-radius:999px !important; font:400 .8rem/1.3 var(--g-sans) !important; box-shadow:var(--g-sombra) !important; }
html.gastos-lujo #toast[style*="4, 120, 87"]{ background-color:var(--g-deep) !important; color:#FFFFFF !important; }
html.gastos-lujo #toast[style*="220, 38, 38"]{ background-color:#B3261E !important; color:#FFFFFF !important; }
html.gastos-lujo #toast-icon{ color:inherit !important; }
/* la carga: la estrella que gira en su disco de tinta; la pantalla no se lava */
html.gastos-lujo #app-loader .gas-carga{ width:64px; height:64px; padding:13px; border-radius:99px; background:rgba(13,23,32,.78);
  border:1px solid rgba(234,223,206,.34); box-shadow:var(--g-sombra); animation:gasGira 4s linear infinite; }
@keyframes gasGira{ to{ transform:rotate(360deg); } }

/* ── 10 · Los tamaños ─────────────────────────────────────────────────────── */
/* escritorio y tableta: los reportes en dos columnas, alineados con la portada */
@media (min-width:900px){
  html.gastos-lujo :is(#historial-container, #aprobaciones-container):not(.hidden){ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start; }
  html.gastos-lujo :is(#historial-container, #aprobaciones-container) > *{ margin:0 !important; }
  html.gastos-lujo :is(#historial-container, #aprobaciones-container) > div.text-center{ grid-column:1 / -1; }
}
/* el celular: la barra más apretada, la pastilla sólo con la persona y la salida */
@media (max-width:767px){
  html.gastos-lujo header.cab-marca{ padding:12px 16px; }
  html.gastos-lujo .cab-marca__fila{ gap:8px; }
  html.gastos-lujo header.cab-marca img.logo-marca{ height:30px; }
  html.gastos-lujo .cab-marca__acc{ gap:6px; }
  html.gastos-lujo header.cab-marca .ses__yo{ display:none; }
  html.gastos-lujo header.cab-marca .ses{ padding:0 7px 0 3px; gap:4px; }
  html.gastos-lujo .gas-portada__in{ padding:calc(var(--alto-barra) + 26px) 16px 22px; }
  html.gastos-lujo .gas-portada--inicio .gas-portada__in{ min-height:300px; }
  html.gastos-lujo .gas-portada__tit{ font-size:2rem !important; }
  html.gastos-lujo .gas-portada__libro{ gap:8px 20px; margin-top:16px; padding-top:12px; }
  html.gastos-lujo .gas-portada__libro b{ font-size:1.35rem !important; }
  html.gastos-lujo .gas-portada--editor .gas-portada__tit{ font-size:1.5rem !important; }
  html.gastos-lujo .gas-portada--editor .gas-volver{ width:2.1rem; padding:0; justify-content:center; }
  html.gastos-lujo .gas-portada--editor .gas-volver span:not(.material-icons-outlined){ display:none; }
  html.gastos-lujo .gas-cuerpo{ padding:18px 16px 0; }
  /* el pie del editor: el total arriba, a todo el ancho, y los botones debajo (el de enviar
     ocupa lo que queda: «Enviar a Finanzas» no cabía al lado del total) */
  html.gastos-lujo :is(#footer-editor, #footer-revision){ padding:12px 16px 14px !important; }
  html.gastos-lujo #footer-editor > div{ flex-wrap:wrap; row-gap:10px; }
  /* el «+» de agregar gasto, por encima del pie (que en el celular tiene dos renglones) */
  html.gastos-lujo #fab-add-row{ bottom:9.5rem !important; }
  html.gastos-lujo #footer-editor > div > .flex-grow{ flex-basis:100%; }
  html.gastos-lujo #footer-editor > div > div:last-child{ flex:1; }
  html.gastos-lujo #btn-submit{ flex:1; justify-content:center; letter-spacing:.08em !important; padding-left:.9rem !important; padding-right:.9rem !important; }
  html.gastos-lujo #footer-revision button{ letter-spacing:.06em !important; font-size:10px !important; }
}
@media (prefers-reduced-motion:reduce){
  html.gastos-lujo .gas-portada__foto{ transition:none !important; } html.gastos-lujo #app-loader .gas-carga{ animation:none !important; }
}