/* assets/css/theme.css - Identidad «Ácido y Asfalto». Se carga la ÚLTIMA (después de app, polish, navigation y touch), así que manda sobre todas.
   Una sola identidad: lima ácido #B3E612 sobre asfalto (zinc tintado de verde aceite). Sustituye a los 6 acentos antiguos.
   Reglas: tokens y clases semánticas aquí; el marcado no lleva CSS en línea; todo en rem; movimiento solo con transform/translate/opacity.
   Índice: 1 tokens · 2 base y textura · 3 tipografía · 4 botones · 5 formularios · 6 superficies · 7 navegación · 8 dashboard · 9 movimiento reducido */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca (triples RGB, para usar con rgb(var(--x) / alfa)) */
  --ink: 15 17 13;
  --acid: 179 230 18;
  --acid-hi: 198 240 53;
  --acid-lo: 150 199 10;
  --glow: 117 160 6;                 /* tinte de las sombras: oliva en claro, lima en oscuro */

  /* Superficies: papel cálido tintado de verde */
  --background: #f2f1ea;
  --card: #fcfcf8;
  --card-sunken: #ebece3;
  --foreground: #0f110d;
  --muted: rgb(15 17 13 / 0.06);
  --muted-foreground: #585e4e;
  --accent: #e8e9df;
  --border: rgb(15 17 13 / 0.1);
  --border-strong: rgb(15 17 13 / 0.2);
  --glass: rgb(255 255 255 / 0.62);
  --glass-edge: rgb(255 255 255 / 0.9);
  --color-background-light: #f2f1ea;

  /* Texto de marca (el lima solo es legible como relleno: en texto va el oliva) */
  --primary-text: #4a6a05;
  --on-primary: #0f110d;
  --chip-on-bg: #0f110d;             /* chip/segmento activo: tinta en claro, lima en oscuro */
  --chip-on-fg: #b3e612;

  /* Semánticos (variantes de texto con contraste AA sobre la tarjeta) */
  --ok-text: #0b7a55;
  --warn-text: #8a5a00;
  --bad-text: #c02f36;
  --info-text: #2b63d9;
  --mint: #5be3a8;
  --coral: #ff8a6b;

  /* Elevación tintada con el color de marca */
  --lift-1: 0 1px 2px rgb(var(--ink) / 0.06), 0 14px 30px -16px rgb(var(--glow) / 0.38);
  --lift-2: 0 2px 4px rgb(var(--ink) / 0.07), 0 24px 46px -18px rgb(var(--glow) / 0.5);
  --lift-3: 0 4px 8px rgb(var(--ink) / 0.08), 0 34px 64px -20px rgb(var(--glow) / 0.62);

  /* Forma */
  --r-card: 1.75rem;
  --r-panel: 1.35rem;
  --r-control: 0.95rem;
  --r-pill: 9999px;

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --tracking-eyebrow: 0.18em;

  /* Grano: ruido fractal en SVG (img-src data: ya está permitido por la CSP) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dark {
  color-scheme: dark;
  --glow: 179 230 18;
  --background: #0c0e0a;
  --card: #151812;
  --card-sunken: #10130e;
  --foreground: #f1f3ea;
  --muted: rgb(241 243 234 / 0.06);
  --muted-foreground: #a3a998;
  --accent: #1e221a;
  --border: rgb(241 243 234 / 0.09);
  --border-strong: rgb(241 243 234 / 0.18);
  --glass: rgb(241 243 234 / 0.05);
  --glass-edge: rgb(241 243 234 / 0.08);
  --color-background-dark: #0c0e0a;
  --primary-text: #b3e612;
  --chip-on-bg: #b3e612;
  --chip-on-fg: #0f110d;
  --ok-text: #5be3a8;
  --warn-text: #f5b84a;
  --bad-text: #ff8a7a;
  --info-text: #7fa8ff;
  --lift-1: 0 1px 2px rgb(0 0 0 / 0.6), 0 16px 34px -18px rgb(var(--glow) / 0.12);
  --lift-2: 0 2px 4px rgb(0 0 0 / 0.6), 0 26px 50px -20px rgb(var(--glow) / 0.18);
  --lift-3: 0 4px 8px rgb(0 0 0 / 0.6), 0 36px 68px -22px rgb(var(--glow) / 0.24);
  --noise: var(--noise-dark);
}

/* Acento único. Los 6 valores antiguos de Ajustes (racing, blue, indigo…) se unifican: la BD no cambia, solo cómo se pintan.
   --a-500 es el acento «legible»: oliva sobre claro, lima sobre oscuro (así cualquier texto/icono heredado tiene contraste).
   Los rellenos de marca usan --acid directamente. */
:root, html[data-accent] {
  --a-200: 216 246 115; --a-300: 179 230 18; --a-400: 96 134 6; --a-500: 74 106 5; --a-600: 58 86 8; --a-700: 40 60 8;
  --on-primary: #0f110d;
}
.dark, html.dark[data-accent] {
  --a-200: 56 79 15; --a-300: 216 246 115; --a-400: 198 240 53; --a-500: 179 230 18; --a-600: 150 199 10; --a-700: 117 160 6;
  --on-primary: #0f110d;
}


/* ==========================================================================
   2. BASE Y TEXTURA
   ========================================================================== */
body, .dark body {
  background-color: var(--background);
  background-image: var(--noise);
  background-size: 10rem 10rem;
}
::selection { background: rgb(var(--acid) / 0.6); color: rgb(var(--ink)); }
:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 0.2rem; }


/* ==========================================================================
   3. TIPOGRAFÍA: títulos enormes + microetiquetas (tensión)
   ========================================================================== */
h1, .page-header h1 {
  font-weight: 800; letter-spacing: -0.05em; line-height: 0.96;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
}
h2 { font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
h3 { font-weight: 700; letter-spacing: -0.03em; }

/* Microetiqueta: pequeña, mayúsculas, muy espaciada */
.eyebrow, .dash-label, .form-label, .vf-label, th {
  font-family: var(--font-body);
  font-size: 0.625rem; font-weight: 700; line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--muted-foreground);
}
.form-label, .vf-label { font-size: 0.6875rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
th { letter-spacing: 0.14em; }

/* Subrayado marcador de lima bajo una palabra */
.hl { position: relative; z-index: 0; font-style: normal; }
.hl::after {
  content: ''; position: absolute; z-index: -1; left: -0.04em; right: -0.06em; bottom: -0.03em; height: 0.12em;
  border-radius: 0.1em; background: rgb(var(--acid)); transform: skewX(-10deg);
}


/* ==========================================================================
   4. BOTONES: píldora táctil, brillo que cruza al pasar, elevación tintada
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 3rem; padding: 0.65rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  transition: translate 0.28s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.32s var(--ease-out),
    background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary svg:last-child:not(:first-child), .btn-secondary svg:last-child:not(:first-child) { transition: translate 0.28s var(--ease-out); }
.btn-primary:hover svg:last-child:not(:first-child), .btn-secondary:hover svg:last-child:not(:first-child) { translate: 0.2rem 0; }

.btn-primary {
  color: rgb(var(--ink)); background: rgb(var(--acid));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 1px 2px rgb(var(--ink) / 0.3), 0 12px 26px -12px rgb(var(--glow) / 0.95);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.7) 50%, transparent 65%);
  translate: -130% 0; transition: translate 0.8s var(--ease-out);
}
.btn-primary:hover:not(:disabled) {
  background: rgb(var(--acid-hi)); translate: 0 -0.125rem; filter: none; transform: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 1px 2px rgb(var(--ink) / 0.3), 0 20px 34px -12px rgb(var(--glow));
}
.btn-primary:hover:not(:disabled)::before { translate: 130% 0; }
.btn-primary:active:not(:disabled) { translate: 0 0; transform: scale(var(--press)); }
.is-loading::before { display: none; }

.btn-secondary {
  color: var(--foreground); background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), 0 1px 2px rgb(var(--ink) / 0.06);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--card); translate: 0 -0.125rem; transform: none;
  box-shadow: 0 0 0 1.5px rgb(var(--a-500)), inset 0 1px 0 var(--glass-edge), 0 16px 28px -14px rgb(var(--glow) / 0.65);
}
.btn-secondary:active:not(:disabled) { translate: 0 0; transform: scale(var(--press)); }

.btn-ghost { color: var(--foreground); background: transparent; border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--muted); border-color: rgb(var(--a-500) / 0.6); translate: 0 -0.125rem; }

.btn-danger {
  color: #fff; background: #d92d20;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -2px 0 rgb(0 0 0 / 0.14), 0 12px 24px -12px rgb(217 45 32 / 0.85);
}
.btn-danger:hover:not(:disabled) { background: #e5392b; translate: 0 -0.125rem; transform: none; filter: none; }

.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--primary-text);
}


/* ==========================================================================
   5. FORMULARIOS: relleno hundido, aro de lima al enfocar
   ========================================================================== */
.input-field {
  min-height: 3rem; border-radius: var(--r-control);
  color: var(--foreground); font-weight: 500;
  background-color: var(--card-sunken);
  box-shadow: inset 0 1px 2px rgb(var(--ink) / 0.07), 0 0 0 1px var(--border-strong);
  transition: box-shadow 0.22s var(--ease-out), background-color 0.2s;
}
.input-field::placeholder { color: var(--muted-foreground); opacity: 0.65; }
.input-field:hover { box-shadow: inset 0 1px 2px rgb(var(--ink) / 0.07), 0 0 0 1px rgb(var(--a-500) / 0.55); }
.input-field:focus {
  background-color: var(--card);
  box-shadow: 0 0 0 1.5px rgb(var(--a-500)), 0 0 0 0.3rem rgb(var(--acid) / 0.3), 0 10px 24px -14px rgb(var(--glow) / 0.8);
}
select.input-field { background-color: var(--card-sunken); }
textarea.input-field { min-height: 6rem; }
input[type='checkbox'], input[type='radio'] { accent-color: rgb(var(--a-500)); }


/* ==========================================================================
   6. SUPERFICIES: borde de cristal, brillo superior, grano y sombra tintada
   ========================================================================== */
.card, .compact-kpi-card, .calc-panel, .acct-card, .record-card {
  background-color: var(--card); background-image: var(--noise); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
}
a.card:hover, .record-card:hover, .vehicle-shell-card:hover { box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-2); }
.modal-card, .app-modal-panel { border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-3); }
.user-menu, .dash-menu { box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-3); }
.soft-chip, .app-chip, .app-tag-chip, .user-meta-chip { border-radius: var(--r-pill); }


/* ==========================================================================
   7. NAVEGACIÓN: salpicadero de asfalto con lima
   ========================================================================== */
.sidebar {
  --card: #151812; --foreground: #f1f3ea; --muted-foreground: #a3a998; --muted: rgb(241 243 234 / 0.06);
  --border: rgb(241 243 234 / 0.09); --accent: rgb(241 243 234 / 0.06);
  background-color: #0c0e0a;
  background-image: radial-gradient(70% 40% at 0% 100%, rgb(var(--acid) / 0.12), transparent 70%), var(--noise-dark);
  background-size: auto, 10rem 10rem;
  border-right: 1px solid rgb(241 243 234 / 0.07);
}
.sidebar .brand-wordmark span, .mobile-bar .brand-wordmark span { color: rgb(var(--acid)); }

.rail-add {
  color: rgb(var(--ink)); background: rgb(var(--acid)); border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 14px 28px -14px rgb(var(--acid) / 0.45);
  transition: translate 0.28s var(--ease-out), transform 0.18s var(--ease-out), background-color 0.2s, box-shadow 0.3s var(--ease-out);
}
.rail-add:hover { background: rgb(var(--acid-hi)); translate: 0 -0.125rem; }
.rail-add .kbd { color: rgb(var(--ink)); background: rgb(var(--ink) / 0.12); border-color: rgb(var(--ink) / 0.22); }
.rail-indicator { border-radius: var(--r-control); background: rgb(var(--acid) / 0.14); box-shadow: inset 0 0 0 1px rgb(var(--acid) / 0.3); }
.rail-link.is-active svg { color: rgb(var(--acid-hi)); }
.rail-link { font-weight: 700; }
.nav-badge { color: rgb(var(--ink)); background: rgb(var(--acid)); }
.user-chip > span, .user-chip-img { color: rgb(var(--ink)); background: rgb(var(--acid)); border-radius: var(--r-control); }
.user-trigger.is-admin .sidebar-profile-avatar { box-shadow: 0 0 0 2px #0c0e0a, 0 0 0 3.5px rgb(var(--acid)); }

.bottom-nav { background: rgb(12 14 10 / 0.9); }
.mobile-bar, .mobile-bar.is-scrolled { background: rgb(12 14 10 / 0.9); border-bottom-color: rgb(241 243 234 / 0.08); }
.bottom-nav-link::before { background: rgb(var(--acid)); }
.bottom-nav-link.is-active svg, .bottom-nav.has-pill .bottom-nav-link.is-active svg { color: rgb(var(--acid-hi)); }
.bottom-nav-add span {
  color: rgb(var(--ink)); background: rgb(var(--acid)); border-radius: 1.2rem 1.2rem 1.2rem 0.45rem;
  box-shadow: 0 0 0 4px rgb(12 14 10 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -3px 0 rgb(0 0 0 / 0.1), 0 14px 26px -8px rgb(var(--acid) / 0.4);
}


/* ==========================================================================
   8. DASHBOARD (views/components/dash_*.php): bento asimétrico
   ========================================================================== */
.dash { --good: var(--ok-text); --bad: var(--bad-text); gap: 0.9rem; }

/* ---------- Cabecera: saludo gigante + fecha en microetiqueta ---------- */
.dash-head { gap: 1.1rem; }
.dash-head-top { align-items: flex-end; }
.dash-head-text { display: flex; flex-direction: column; gap: 0.6rem; }
.dash-date { margin: 0; }
.dash-date::first-letter { text-transform: uppercase; }
.dash-hello {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.2em; margin: 0;
  font: 800 clamp(3rem, 1.4rem + 7.4vw, 6.25rem)/0.88 var(--font-display); letter-spacing: -0.065em;
}
.dash-hello-name { position: relative; z-index: 0; font-style: normal; }
.dash-hello-name::after {
  content: ''; position: absolute; z-index: -1; left: -0.03em; right: -0.05em; bottom: -0.02em; height: 0.11em;
  border-radius: 0.1em; background: rgb(var(--acid)); transform: skewX(-10deg);
}

/* Selector de vehículo: cristal, nombre grande y datos en microcapitales */
.dash-pill {
  border-radius: var(--r-pill); background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
  transition: translate 0.26s var(--ease-out), box-shadow 0.3s var(--ease-out), scale 0.16s var(--ease-out);
}
@media (hover: hover) { .dash-pill:hover { translate: 0 -0.125rem; box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-2); } }
.dash-pill-icon { position: relative; border-radius: 0.95rem; color: var(--primary-text); background: rgb(var(--acid) / 0.3); }
.dash-pill-text strong { font: 800 1rem/1.15 var(--font-display); letter-spacing: -0.03em; }
.dash-pill-text small { margin-top: 0.15rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dash-bell { border-radius: var(--r-control); background: var(--glass); box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge); transition: scale 0.16s var(--ease-out), translate 0.26s var(--ease-out); }
@media (hover: hover) { .dash-bell:hover { translate: 0 -0.125rem; } }
.dash-bell-dot { color: rgb(var(--ink)); background: rgb(var(--acid)); }
.dash-menu { border-radius: var(--r-card); }
.dash-menu-icon { border-radius: 0.7rem; }
.dash-menu-item.is-on { background: rgb(var(--acid) / 0.2); }
.dash-menu-item.is-on .dash-menu-icon { color: rgb(var(--ink)); background: rgb(var(--acid)); }
.dash-menu-check { color: var(--primary-text); }

/* ---------- Bento: baldosas ---------- */
.dash-bento { counter-reset: stat; }
.dash-tile {
  border-radius: var(--r-card);
  background-color: var(--card); background-image: var(--noise);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
  transition: translate 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), scale 0.16s var(--ease-out);
}
@media (hover: hover) {
  .dash-tile:hover { translate: 0 -0.25rem; box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-3); }
}

/* Gasto total: pieza protagonista, asfalto + resplandor de lima + símbolo fantasma */
.dash-total {
  isolation: isolate; overflow: visible; padding: 1.3rem 1.4rem 1.5rem; color: #f1f3ea;
  border-radius: 2.25rem 2.25rem 2.25rem 0.6rem;
  background-color: #11140e;
  background-image:
    radial-gradient(90% 80% at 100% 0%, rgb(var(--acid) / 0.3), transparent 58%),
    radial-gradient(70% 60% at 0% 100%, rgb(var(--acid) / 0.09), transparent 60%),
    var(--noise-dark),
    linear-gradient(160deg, #20241b 0%, #0f110d 100%);
  box-shadow: 0 0 0 1px rgb(241 243 234 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 30px 56px -26px rgb(var(--glow) / 0.75);
}
.dash-total-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dash-total-fx b {
  position: absolute; right: -0.05em; bottom: -0.3em; font: 800 15rem/1 var(--font-display); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgb(var(--acid) / 0.24);
}
.dash-total .dash-label { margin-top: 1.5rem; color: rgb(241 243 234 / 0.62); }
.dash-month label { min-height: 2rem; background: rgb(241 243 234 / 0.08); box-shadow: inset 0 0 0 1px rgb(241 243 234 / 0.14); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.dash-big {
  flex-wrap: wrap; margin: 0.35rem 0 0; color: #f6f8ee;
  font: 800 clamp(3.2rem, 1.2rem + 5.2vw, 7rem)/0.86 var(--font-display); letter-spacing: -0.07em;
}
.dash-big small { font: 800 clamp(1.4rem, 1rem + 1.6vw, 2.4rem)/1 var(--font-display); letter-spacing: -0.04em; color: rgb(var(--acid)); }
.dash-sub { margin-top: 0.9rem; font-size: 0.8rem; color: rgb(241 243 234 / 0.62); }

/* Pegatina de variación: rompe el borde de la tarjeta */
.dash-total .dash-chip {
  position: absolute; top: -0.85rem; right: 1.5rem; min-height: 2rem; padding: 0 0.9rem; rotate: -3deg;
  font: 800 0.82rem/1 var(--font-display); letter-spacing: -0.01em; color: rgb(var(--ink)); background: #f1f3ea;
  box-shadow: 0 10px 20px -8px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.dash-total .dash-chip.is-down { background: var(--mint); }
.dash-total .dash-chip.is-up { background: var(--coral); }

/* Métricas: etiqueta arriba, cifra grande abajo, índice 01-04 */
.dash-stat { position: relative; justify-content: flex-end; gap: 0.35rem; min-height: 7.6rem; counter-increment: stat; }
.dash-stat .dash-label { position: absolute; top: 1.05rem; left: 1.2rem; right: 3rem; }
.dash-stat::after {
  content: counter(stat, decimal-leading-zero); position: absolute; top: 1.05rem; right: 1.2rem;
  font: 700 0.625rem/1.3 var(--font-body); letter-spacing: var(--tracking-eyebrow); color: var(--muted-foreground); opacity: 0.6;
}
.dash-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; font: 800 clamp(2.1rem, 1.3rem + 3vw, 3.5rem)/0.92 var(--font-display); letter-spacing: -0.06em; }
.dash-value small { font: 700 0.625rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.dash-delta { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }

/* Variaciones del bento: una baldosa oscura y otra de lima */
.dash-stat:nth-of-type(2) { color: #f1f3ea; background-color: #11140e; background-image: var(--noise-dark); box-shadow: 0 0 0 1px rgb(241 243 234 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), var(--lift-1); }
.dash-stat:nth-of-type(2) .dash-label, .dash-stat:nth-of-type(2)::after, .dash-stat:nth-of-type(2) .dash-value small, .dash-stat:nth-of-type(2) .dash-delta { color: rgb(241 243 234 / 0.6); }
.dash-stat:nth-of-type(2) .dash-value { color: rgb(var(--acid)); }
.dark .dash-stat:nth-of-type(2) { background-color: #1e221a; box-shadow: 0 0 0 1px rgb(var(--acid) / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.08), var(--lift-1); }
.dash-stat:nth-of-type(4) { background-color: rgb(var(--acid) / 0.2); box-shadow: 0 0 0 1px rgb(var(--acid) / 0.55), inset 0 1px 0 var(--glass-edge), var(--lift-1); }
.dark .dash-stat:nth-of-type(4) { background-color: rgb(var(--acid) / 0.09); }

/* Acciones rápidas */
.dash-act { position: relative; overflow: hidden; gap: 0.8rem; }
.dash-act > * { position: relative; z-index: 1; }
.dash-act-icon { border-radius: 0.85rem; color: var(--primary-text); background: rgb(var(--acid) / 0.28); }
.dash-act-text strong { font: 800 1.05rem/1.1 var(--font-display); letter-spacing: -0.035em; }
.dash-act-text small { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dash-act-go {
  display: grid; place-items: center; flex: none; margin-left: auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border-strong); transition: rotate 0.35s var(--ease-out), background-color 0.2s, color 0.2s;
}
.dash-act:hover .dash-act-go { rotate: 45deg; color: rgb(var(--ink)); background: rgb(var(--acid)); box-shadow: none; }

.dash-act.is-primary {
  color: rgb(var(--ink)); border-radius: 0.6rem 2.25rem 2.25rem 2.25rem; min-height: 5.6rem;
  background-color: rgb(var(--acid));
  background-image: radial-gradient(120% 150% at 100% 0%, rgb(var(--acid-hi) / 0.95), transparent 55%), var(--noise);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -3px 0 rgb(0 0 0 / 0.08), 0 28px 46px -22px rgb(var(--glow) / 0.95);
}
.dash-act.is-primary::before {
  content: '+'; position: absolute; z-index: 0; right: 2.6rem; top: 50%; translate: 0 -52%;
  font: 800 9rem/1 var(--font-display); color: rgb(var(--ink) / 0.09); pointer-events: none;
  transition: rotate 0.6s var(--ease-out), scale 0.6s var(--ease-out);
}
.dash-act.is-primary:hover::before { rotate: 90deg; scale: 1.12; }
.is-primary .dash-act-icon { color: rgb(var(--acid)); background: rgb(var(--ink)); }
.is-primary .dash-act-text strong { font-size: 1.7rem; letter-spacing: -0.05em; line-height: 1; }
.is-primary .dash-act-text small { color: rgb(var(--ink) / 0.72); }
.is-primary .dash-act-go { color: rgb(var(--acid)); background: rgb(var(--ink)); box-shadow: none; }

/* ---------- Paneles ---------- */
.dash-panel, .dash-card {
  background-color: var(--card); background-image: var(--noise); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
}
.dash-card { border-radius: var(--r-panel); }
.dash-panel-head h2, .dash-card-head h2 { font: 800 1.3rem/1 var(--font-display); letter-spacing: -0.045em; }
.dash-link, .dash-inline-cta { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-text); }
.dash-link:hover { text-decoration: none; }
.dash-link::before { content: ''; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.35rem; height: 0.12rem; background: rgb(var(--acid)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.dash-link:hover::before { transform: scaleX(1); }

/* Actividad reciente */
.dash-tx-row { position: relative; margin-inline: -0.5rem; padding: 0.3rem 0.5rem; border-radius: 1.1rem; transition: background-color 0.2s, translate 0.28s var(--ease-out); }
.dash-tx-row + .dash-tx-row { box-shadow: 0 -1px 0 var(--border); }
@media (hover: hover) { .dash-tx-row:hover { background: rgb(var(--acid) / 0.15); translate: 0.25rem 0; box-shadow: none; } .dash-tx-row:hover + .dash-tx-row { box-shadow: none; } }
.dash-tx-mark { width: 2.75rem; height: 2.75rem; border-radius: 0.95rem; }
.dash-tx-mark.is-fuel { color: rgb(var(--ink)); background: rgb(var(--acid)); }
.dash-tx-mark.is-parking { color: #f1f3ea; background: #20241b; }
.dash-tx-mark.is-maintenance { color: var(--ok-text); background: rgb(52 211 153 / 0.2); }
.dash-tx-mark.is-expense { color: var(--warn-text); background: rgb(232 163 23 / 0.2); }
.dash-tx-text strong { font-weight: 700; letter-spacing: -0.01em; }
.dash-tx-text small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; }
.dash-tx-amount { font: 800 1.1rem/1 var(--font-display); letter-spacing: -0.04em; }

/* Gasolineras, último repostaje y gráfico */
.dash-st-rank { font-family: var(--font-display); font-weight: 800; }
.dash-st-row:first-child .dash-st-rank { color: var(--primary-text); }
.dash-st-price strong { font-weight: 800; letter-spacing: -0.04em; }
.dash-st-row:first-child .dash-st-price strong { color: var(--primary-text); }
.dash-last-total strong { font: 800 1.5rem/1 var(--font-display); letter-spacing: -0.05em; }
.dash-last-now { background: rgb(var(--acid) / 0.17); box-shadow: inset 0 0 0 1px rgb(var(--acid) / 0.35); }
.dash-last-now-value.is-down { color: var(--ok-text); }
.dash-last-now-value.is-up { color: var(--bad-text); }
.dash-fuel-tag, .dash-fuel-pills button, .dash-seg { border-radius: var(--r-pill); }
.dash-seg button { border-radius: var(--r-pill); }
.dash-fuel-pills button[aria-checked='true'], .dash-seg button[aria-checked='true'] { color: var(--chip-on-fg); background: var(--chip-on-bg); box-shadow: none; }
.dash-chart-svg .c-bar { fill: rgb(var(--a-500) / 0.28); }
.dash-tool svg { color: var(--primary-text); }

/* ---------- Disposición escritorio: 12 columnas, tamaños desiguales ---------- */
@media (min-width: 64rem) {
  .dash-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem;
    grid-template-areas:
      'total total total total total total total cons cons cons price price'
      'total total total total total total total rep  rep  cost cost  cost'
      'add   add   add   add   add   add   gasto gasto gasto map  map   map';
  }
  .dash-total { padding: 1.9rem 2.1rem 2.1rem; }
  .dash-stat { min-height: 9.6rem; }
  .dash-act { min-height: 4.6rem; }
  .dash-act.is-primary { min-height: 6.4rem; }
  }
@media (max-width: 47.99rem) {
    .dash-act.is-primary::before { font-size: 7rem; right: 2rem; }
}


/* En oscuro la lima brilla sola: la sombra de color se contiene para no emborronar */
.dark .btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 24px -14px rgb(var(--glow) / 0.4); }
.dark .btn-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 30px -14px rgb(var(--glow) / 0.5); }
.dark .dash-act.is-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -3px 0 rgb(0 0 0 / 0.1), 0 24px 40px -24px rgb(0 0 0 / 0.9), 0 18px 40px -26px rgb(var(--glow) / 0.35); }
.dark .dash-total { box-shadow: 0 0 0 1px rgb(241 243 234 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 28px 50px -26px rgb(0 0 0 / 0.9); }


/* ==========================================================================
   9. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .dash-act.is-primary::before { transition: none; }
  .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled), .btn-danger:hover:not(:disabled),
  .dash-tile:hover, .dash-pill:hover, .dash-bell:hover, .dash-tx-row:hover, .rail-add:hover { translate: none; }
  .dash-act:hover .dash-act-go, .dash-act.is-primary:hover::before { rotate: none; scale: none; }
  .btn-primary:hover:not(:disabled)::before { translate: -130% 0; }
}