/* ==========================================================================
   ATELIER - piel visual de FuelApp. Se carga la última: solo cambia aspecto, nunca marcado ni lógica.

   Idea: cuaderno de a bordo. Hormigón y tinta, un único acento "naranja señal", cifras en monoespaciada
   (como el surtidor), líneas de ticket (guiones), botones que se hunden como teclas.

   Reglas de forma (una sola escala, sin excepciones):
     contenedores 0.9rem  |  controles 0.6rem  |  etiquetas 0.4rem  |  píldora solo en segmentos, interruptores y estados
   Reglas de materia:
     contenido = sólido con filo de 1px  |  capas flotantes (menús, barra móvil, hojas) = cristal
   Fuentes: Bricolage Grotesque (títulos), Geist (texto), Geist Mono (cifras).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --font-body: 'Geist', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Geist', 'Segoe UI', system-ui, sans-serif;
  --font-figure: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --background: #e4e8e3;
  --card: #f8f9f6;
  --card-sunken: #eceee9;
  --foreground: #0e1210;
  --muted: rgba(14, 18, 16, 0.055);
  --muted-foreground: #565f59;
  --accent: #eef0eb;
  --border: rgba(14, 18, 16, 0.13);
  --border-strong: rgba(14, 18, 16, 0.26);
  --color-background-light: #e4e8e3;
  --color-card-light: #f8f9f6;
  --color-modal-light: #f8f9f6;

  --on-primary: #ffffff;
  --gauge-ok: #12a05c;
  --gauge-warn: #e69a12;
  --gauge-bad: #e5392d;
  --gauge-info: #2678e5;

  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.1rem;

  --ink: #0b0e0c;
  --line-dash: 1px dashed var(--border-strong);
  --lift-1: 0 1px 1px rgb(14 30 22 / 0.04), 0 8px 18px -14px rgb(14 30 22 / 0.22);
  --lift-2: 0 2px 3px rgb(14 30 22 / 0.06), 0 16px 30px -16px rgb(14 30 22 / 0.3);
  --shadow-sm: var(--lift-1);
  --shadow-md: 0 10px 28px -10px rgb(14 30 22 / 0.28);
  --shadow-lg: 0 28px 60px -18px rgb(14 30 22 / 0.4);
  --edge-light: inset 0 1px 0 rgb(255 255 255 / 0.65);
  --key: 0 2px 0;
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
}
html.dark, .dark {
  --background: #0a0d0b;
  --card: #121613;
  --card-sunken: #0d100e;
  --foreground: #ecf0ea;
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: #9aa49d;
  --accent: #1a1f1b;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --color-background-dark: #0a0d0b;
  --color-card-dark: #121613;
  --color-modal-dark: #121613;
  --on-primary: #160803;
  --lift-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 24px -16px rgb(0 0 0 / 0.8);
  --lift-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 20px 36px -16px rgb(0 0 0 / 0.9);
  --shadow-sm: var(--lift-1);
  --shadow-md: 0 12px 30px -10px rgb(0 0 0 / 0.75);
  --shadow-lg: 0 30px 70px -14px rgb(0 0 0 / 0.9);
  --edge-light: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
/* Acento por defecto: naranja señal (los demás acentos de Ajustes se mantienen) */
html[data-accent='racing'], html:not([data-accent]) { --a-200: 255 224 212; --a-300: 255 172 140; --a-400: 240 98 52; --a-500: 214 62 22; --a-600: 176 46 14; --a-700: 128 32 10; }
html.dark[data-accent='racing'], html.dark:not([data-accent]) { --a-200: 100 30 14; --a-300: 255 162 122; --a-400: 255 124 78; --a-500: 255 106 61; --a-600: 236 84 38; --a-700: 176 56 20; }

/* ---------- 2. Base: papel liso, sin halos ---------- */
body {
  font-family: var(--font-body);
  background-image: none;
  font-feature-settings: 'ss01', 'cv11';
}
.font-sans, .font-body { font-family: var(--font-body) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-mono { font-family: var(--font-figure) !important; }
/* Rejilla de puntos fija y casi invisible: da textura al papel sin repintar el scroll */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgb(14 18 16 / 0.11) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.dark body::before { background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.2px); }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.028em; font-weight: 700; }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.04; }
h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

/* Cifras: monoespaciada con ancho fijo, como el display de un surtidor */
.compact-kpi-value, .sim-total, .tco-total, .calc-result-value, .calc-stat strong, .ledger-figure, .activity-amount, .record-figure,
.dash-value, .dash-st-price strong, .dash-last-total strong, .dash-tx-amount, .dash-delta, .an-step-num,
.an-live strong, .nav-badge, .dash-pill-text small, td.tabular, .tabular {
  font-family: var(--font-figure); font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.compact-kpi-value { font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.8rem); }

::selection { background: rgb(var(--a-500) / 0.3); }
:focus-visible { outline: 2px solid rgb(var(--a-500)); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- 3. Contenedores ---------- */
.card, .dash-card, .dash-panel, .dash-tile, .premium-surface, .spec-card {
  border-radius: var(--radius-lg);
}
.card { background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--lift-1); }
.card:hover { box-shadow: 0 0 0 1px var(--border), var(--lift-1); }
a.card:hover, .record-card:hover, .vehicle-shell-card:hover { box-shadow: 0 0 0 1px var(--border-strong), var(--lift-2); }
.premium-surface { background: var(--card); }
.spec-card { background: var(--card-sunken); }
.dash-card, .dash-panel, .dash-tile { background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--lift-1); }

/* Cabecera de página: editorial, sin caja; una línea de base y ya */
.page-header.card, .page-header {
  background: transparent !important; box-shadow: none !important;
  padding: 0.25rem 0 1.1rem !important; margin-bottom: 1.2rem;
  border: 0 !important; border-radius: 0;
  border-bottom: 1px solid var(--border-strong) !important;
}
.page-header h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); font-weight: 750; letter-spacing: -0.04em; }
.page-header p { color: var(--muted-foreground); }

/* Listas: líneas de ticket */
.connection-item, .dash-st-row, .dash-st-skel, .dash-card-foot, .shortcut-row, .more-sheet-list a { border-style: dashed; border-color: var(--border-strong); }
.dash-st-row, .dash-st-skel { border-top-style: dashed; }
.dashboard-list-row:hover { box-shadow: inset 2px 0 0 rgb(var(--a-500)); border-radius: var(--radius-sm); }

/* Chips: etiquetas rectas, no píldoras */
.user-role-badge, .user-status-badge, .user-meta-chip, .soft-chip, .app-chip, .app-tag-chip {
  border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; background: var(--card-sunken);
}
.app-tag-chip { background: rgb(var(--a-500) / 0.1); color: rgb(var(--a-600)); border-color: rgb(var(--a-500) / 0.3); }
.dark .app-tag-chip { color: rgb(var(--a-300)); }

/* KPIs clásicos */
.compact-kpi-card { border-radius: var(--radius-lg); }
.compact-kpi-label { font-family: var(--font-body); font-size: 0.8rem; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); }
.compact-kpi-icon { border-radius: var(--radius-md); box-shadow: none; }
.compact-kpi-help { font-size: 0.78rem; }

/* ---------- 4. Botones: teclas físicas ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .icon-action-btn, .sidebar-mini-link {
  border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 650; letter-spacing: -0.005em;
  transition-property: transform, box-shadow, background-color, border-color, color; transition-duration: 0.14s; transition-timing-function: var(--ease-out);
}
.btn-primary {
  color: var(--on-primary); background: rgb(var(--a-500)); border: 1px solid rgb(var(--a-600));
  box-shadow: var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.22);
  translate: 0 0;
}
.btn-primary:hover:not(:disabled) { filter: none; background: rgb(var(--a-400)); transform: none; box-shadow: var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.28); }
.btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgb(var(--a-700)), inset 0 1px 2px rgb(0 0 0 / 0.25); }
.btn-secondary {
  color: var(--foreground); background: var(--card); border: 1px solid var(--border-strong);
  box-shadow: var(--key) var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--card); border-color: var(--foreground); transform: none; }
.btn-secondary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--border-strong); }
.btn-ghost { border-color: transparent; color: var(--muted-foreground); }
.btn-ghost:hover:not(:disabled) { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.btn-ghost:active:not(:disabled) { transform: scale(0.97); }
.btn-danger { color: #fff; background: #d92d20; border: 1px solid #a8190f; box-shadow: var(--key) #8a130b; }
.btn-danger:hover:not(:disabled) { filter: none; background: #e5392d; transform: none; }
.btn-danger:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 #8a130b; }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgb(var(--a-500)); }
.icon-action-btn { background: var(--card); border: 1px solid var(--border-strong); }
.icon-action-btn:hover { transform: none; border-color: var(--foreground); background: var(--card); }
.icon-action-btn:active { transform: scale(0.94); }
.sidebar-mini-link { border-radius: var(--radius-md); }

/* ---------- 5. Formularios ---------- */
label, .form-label { font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; letter-spacing: 0; color: var(--foreground); }
.form-label { color: var(--muted-foreground); }
.input-field {
  border-radius: var(--radius-md); background-color: var(--card-sunken); border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgb(14 30 22 / 0.07); font-weight: 500;
}
.dark .input-field { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5); }
.input-field:hover { border-color: var(--foreground); }
.input-field:focus { border-color: rgb(var(--a-500)); box-shadow: 0 0 0 3px rgb(var(--a-500) / 0.2); background-color: var(--card); }
.input-field::placeholder { color: var(--muted-foreground); opacity: 0.75; }
select.input-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23778078' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
input[type='file']::file-selector-button { border-radius: var(--radius-sm); background: rgb(var(--a-500)); color: var(--on-primary); }

/* Casillas y botones de radio propios (los ocultos con sr-only no se ven afectados) */
input[type='checkbox']:not(.sr-only):not([class*='peer']), input[type='radio']:not(.sr-only):not([class*='peer']) {
  -webkit-appearance: none; appearance: none; flex: none; width: 1.2rem; height: 1.2rem; margin: 0; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border-strong); vertical-align: middle;
  transition: background-color 0.14s, border-color 0.14s, box-shadow 0.14s;
}
input[type='checkbox']:not(.sr-only):not([class*='peer']) { border-radius: 0.35rem; }
input[type='radio']:not(.sr-only):not([class*='peer']) { border-radius: 50%; }
input[type='checkbox']:not(.sr-only):not([class*='peer']):hover, input[type='radio']:not(.sr-only):not([class*='peer']):hover { border-color: var(--foreground); }
input[type='checkbox']:not(.sr-only):not([class*='peer']):checked {
  background-color: rgb(var(--a-500)); border-color: rgb(var(--a-600));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 100%; background-position: center; background-repeat: no-repeat;
}
.dark input[type='checkbox']:not(.sr-only):not([class*='peer']):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23160803' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
input[type='radio']:not(.sr-only):not([class*='peer']):checked { border-color: rgb(var(--a-500)); background: radial-gradient(circle, rgb(var(--a-500)) 0 38%, var(--card) 42%); }
input[type='checkbox']:not(.sr-only):focus-visible, input[type='radio']:not(.sr-only):focus-visible { outline: 2px solid rgb(var(--a-500)); outline-offset: 2px; }

/* Interruptores del panel */
.admin-switch-track { border-radius: 9999px; }

/* Segmentos y pestañas: aquí sí, píldora */
.section-tabs, .calc-tabs, .rutas-tabs { border-radius: 9999px; background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.calc-tabs { border-radius: var(--radius-lg); }
.section-tabs a, .calc-tabs a, .rutas-tabs a { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }
.section-tabs .tab-indicator, .section-tabs:not(.has-indicator) a.is-active { background: var(--foreground); box-shadow: none; }
.section-tabs a.is-active { color: var(--card); }
.section-tabs a.is-active svg { color: rgb(var(--a-400)); }

/* ---------- 6. Tablas ---------- */
table { font-variant-numeric: tabular-nums; }
table th {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-align: left;
  color: var(--muted-foreground); border-bottom: 1px solid var(--border-strong);
}
table td { border-bottom: 1px dashed var(--border); }
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr { transition: background-color 0.12s; }
@media (hover: hover) { table tbody tr:hover { background: var(--muted); } }

/* ---------- 7. Navegación de escritorio: barra de tinta ---------- */
.sidebar {
  background-color: var(--ink); background-image: none; border-right: 1px solid rgb(255 255 255 / 0.07); box-shadow: none;
  --card: #141915;
}
.sidebar::before { height: 2px; background: rgb(var(--a-500)); }
.rail-search { border-radius: var(--radius-md); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.rail-search:hover { background: rgb(255 255 255 / 0.09); }
.rail-add {
  border-radius: var(--radius-md); color: var(--on-primary); background: rgb(var(--a-500)); font-family: var(--font-body); font-weight: 700;
  box-shadow: var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.22);
  transition-property: transform, background-color, box-shadow; transition-duration: 0.14s;
}
.rail-add:hover { background: rgb(var(--a-400)); }
.rail-add:active { transform: translateY(2px); box-shadow: 0 0 0 rgb(var(--a-700)); }
.rail-add .kbd { color: var(--on-primary); background: rgb(0 0 0 / 0.14); border-color: rgb(0 0 0 / 0.2); }
.rail-link { border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 560; font-size: 0.95rem; }
.rail-link:hover { background: rgb(255 255 255 / 0.06); }
.rail-link:hover svg { transform: none; }
.rail-link.is-active { font-weight: 650; }
.rail-link.is-active svg { color: rgb(var(--a-400)); }
.rail-indicator { border-radius: var(--radius-md); background: rgb(255 255 255 / 0.08); box-shadow: inset 2px 0 0 rgb(var(--a-500)); }
.user-trigger { border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.user-chip > span, .user-chip-img { border-radius: var(--radius-md); background: rgb(var(--a-500)); color: var(--on-primary); }
.nav-badge { border-radius: var(--radius-sm); background: rgb(var(--a-500)); color: var(--on-primary); font-size: 0.68rem; }
.dash-bell-dot { background: rgb(var(--a-500)); color: var(--on-primary); border-radius: var(--radius-sm); font-family: var(--font-figure); }

/* Menús flotantes: cristal */
.user-menu, .dash-menu, .an-menu {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 24px 48px -16px rgb(0 0 0 / 0.5);
}
.user-menu-item { border-radius: var(--radius-sm); font-weight: 560; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--muted); }

/* ---------- 8. Navegación móvil: barra superior y dock flotante de cristal ---------- */
.mobile-bar { background: rgb(11 14 12 / 0.78); border-bottom-color: rgb(255 255 255 / 0.07); box-shadow: none; }
.bottom-nav {
  inset: auto 0.6rem calc(0.55rem + env(safe-area-inset-bottom)) 0.6rem;
  padding: 0.3rem; border-radius: 1.5rem;
  background: rgb(14 18 15 / 0.82); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 40px -14px rgb(0 0 0 / 0.7);
}
.bottom-nav-link { border-radius: 1.1rem; font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; color: #a2aca5; }
.bottom-nav-pill { border-radius: 0.9rem; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.bottom-nav-add span {
  border-radius: 1rem; color: var(--on-primary); background: rgb(var(--a-500));
  box-shadow: 0 0 0 4px rgb(14 18 15 / 0.9), var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.bottom-nav .nav-badge { color: var(--on-primary); }
@media (max-width: 767.98px) { .app-main { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); } }

/* Hoja "Más" y modales: hoja inferior con asa */
.more-sheet-panel, .app-modal-panel, .modal-card, .ui-dialog {
  background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.more-sheet-panel { border-radius: 1.4rem 1.4rem 0 0; }
.more-tile { border-radius: var(--radius-lg); font-family: var(--font-body); background: var(--card-sunken); }
.more-tile svg { color: rgb(var(--a-500)); }

.app-modal-backdrop, .ui-dialog-backdrop, #searchModal, .more-sheet-backdrop { background: rgb(6 9 7 / 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.app-modal-panel, .modal-card { border: 0; border-radius: 1.4rem 1.4rem 0 0; box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lg); }
.app-modal-panel::before { /* asa de hoja inferior en móvil, filo de acento en escritorio */
  inset: 0.5rem 50% auto auto; translate: 50% 0; width: 2.5rem; height: 0.28rem; border-radius: 9999px; background: var(--border-strong);
}
@media (min-width: 40rem) {
  .app-modal-panel, .modal-card, .ui-dialog { border-radius: var(--radius-xl); }
  .app-modal-panel::before { inset: 0 1.4rem auto 1.4rem; translate: 0; width: auto; height: 2px; border-radius: 0 0 2px 2px; background: rgb(var(--a-500)); }
}
.app-modal-header { background: transparent; }
.app-modal-eyebrow { font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; font-size: 0.8rem; }
.app-modal-title { font-weight: 750; letter-spacing: -0.035em; }
.app-modal-close { border-radius: var(--radius-md); background: var(--card-sunken); }
.app-modal-close:hover { transform: none; }
.app-modal-close:active { transform: scale(0.94); }
.app-modal-footer { box-shadow: 0 -1px 0 var(--border); }
.ui-dialog { border: 0; box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lg); }
.ui-dialog-icon { border-radius: var(--radius-md); }
#searchModal .search-container { border-radius: var(--radius-xl); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.search-result-item { border-radius: var(--radius-md); }
.search-result-item .icon-box { border-radius: var(--radius-md); }
.kbd { border-radius: 0.3rem; font-family: var(--font-figure); }
.toast { border-radius: var(--radius-lg); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.toast-icon { border-radius: var(--radius-sm); }
.quick-add-item, .quick-add-icon { border-radius: var(--radius-lg); }
.quick-add-icon { border-radius: var(--radius-md); }

/* ---------- 9. Dashboard: bento asimétrico ---------- */
.dash-tile { border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--lift-1); padding: 1rem 1.1rem; }
.dash-panel { padding: 1.1rem 1.2rem; }
.dash-label { font-size: 0.8rem; font-weight: 550; }
.dash-value { font-size: 1.55rem; font-weight: 600; }
.dash-value small { font-family: var(--font-body); letter-spacing: 0; }
.dash-hello { font-family: var(--font-display); letter-spacing: -0.045em; font-weight: 750; }

/* Gasto total: pantalla de surtidor (tinta + matriz de puntos); la cifra, en el color del acento */
.dash-total {
  color: #eef2ec; border-radius: var(--radius-lg);
  background:
    radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.3px) 0 0 / 14px 14px,
    linear-gradient(160deg, #161b17, #0b0e0c);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 20px 36px -22px rgb(0 0 0 / 0.7);
}
.dash-total::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: rgb(var(--a-500));
}
.dash-big { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.05em; color: rgb(var(--a-400)); }
.dash-big small { font-family: var(--font-body); letter-spacing: 0; color: rgb(238 242 236 / 0.6); }
.dash-month label, .dash-chip { border-radius: var(--radius-sm); }

.dash-act { border-radius: var(--radius-lg); }
.dash-act.is-primary {
  color: var(--on-primary); background: rgb(var(--a-500));
  box-shadow: var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.dash-act.is-primary:active { translate: 0 2px; scale: 1; box-shadow: 0 0 0 rgb(var(--a-700)); }
.is-primary .dash-act-icon { color: var(--on-primary); background: rgb(0 0 0 / 0.14); }
.is-primary .dash-act-text small { color: color-mix(in srgb, var(--on-primary) 78%, transparent); }
.dash-act-icon { border-radius: var(--radius-md); }
.dash-act:not(.is-primary):active { scale: 0.98; }
.dash-pill { border-radius: var(--radius-lg); }
.dash-pill-icon { border-radius: var(--radius-md); }
.dash-fuel-tag, .dash-fuel-pills button { border-radius: 9999px; }
.dash-tx-mark { border-radius: var(--radius-md); }
.dash-tx-row { border-bottom: 1px dashed var(--border); }
.dash-tx-row:last-child { border-bottom: 0; }
.dash-st-nav { border-radius: var(--radius-md); }
.dash-row-icon, .dash-last-logo:not(.fuel-logo) { border-radius: var(--radius-md); }
.dash-last-now { border-radius: var(--radius-md); }
.dash-st-price strong, .dash-last-total strong { font-weight: 600; }

@media (min-width: 48rem) {
  .dash-bento {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    grid-template-areas: 'total total cons rep' 'total total price cost' 'add gasto gasto map';
  }
}

/* ---------- 10. Analíticas (cargan su CSS después: se sube la especificidad) ---------- */
:root .an-tile {
  border-radius: var(--radius-lg); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--lift-1);
}
:root .an-label { font-family: var(--font-body); font-weight: 550; }
:root .an-num, :root .an-bignum { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; }
:root .an-pill, :root .an-export { border-radius: var(--radius-md); background: var(--card); box-shadow: 0 0 0 1px var(--border-strong), var(--key) var(--border-strong); }
:root .an-pill:active, :root .an-export:active { translate: 0 2px; scale: 1; box-shadow: 0 0 0 1px var(--border-strong); }
:root .an-live { border-radius: var(--radius-md); }
:root .an-opt, :root .an-dates input, :root .an-apply { border-radius: var(--radius-sm); }
:root .an-apply { color: var(--on-primary); box-shadow: var(--key) rgb(var(--a-700)); }
:root .an-step-bar, :root .an-bars li, :root .an-meter { border-radius: var(--radius-sm); }
:root .an-chip { border-radius: var(--radius-sm); }
:root .an-list li, :root .an-bars li { border-bottom: 0; }

/* ---------- 11. Movimiento: sin saltos para quien lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .rail-add, .dash-act { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .user-menu, .dash-menu, .an-menu, .bottom-nav, .more-sheet-panel, .app-modal-panel, .modal-card, .ui-dialog, .toast, #searchModal .search-container {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card);
  }
  .bottom-nav { background: #0e120f; }
}

/* Texto claro dentro de la tarjeta oscura del total (la etiqueta del mes heredaba el color de tinta) */
.dash-total label, .dash-total select { color: inherit; margin: 0; }

/* ---------- Una sola escala de radios en todas las pantallas ---------- */
.st-card, .acct-card, .acct-stat, .fuel-bar, .fuel-board-summary, .fuel-map-wrap, .trip-box, .trip-card, .rt-card, .mk-card, .vehicle-shell-card,
.public-vehicle-card, .doc-card-premium, .ex-place-list { border-radius: var(--radius-lg); }
.gv-media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.fuel-sheet-panel, .ex-sheet { border-radius: var(--radius-xl); }
.rounded-3xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-lg); }
.gv-add-icon, .pw-icon { border-radius: var(--radius-md); }

/* ---------- KPIs de registros: rejilla asimétrica y un solo color de acento (adiós a los iconos pastel) ---------- */
.rf-kpi { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border), var(--lift-1); }
.rf-kpi-icon, .dark .rf-kpi-icon { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; filter: none; color: rgb(var(--a-500)); }
.rf-kpi-label { font-weight: 550; letter-spacing: 0; }
.rf-kpi-value { font-family: var(--font-figure); font-weight: 600; letter-spacing: -0.05em; }
@media (min-width: 48rem) {
  .rf-kpis.kpi-grid-3 { grid-template-columns: 1.5fr 1fr 1fr; }
  .rf-kpis .rf-kpi:first-child .rf-kpi-value { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); }
}

/* ---------- Análisis: hero de tinta y desglose en un solo color ---------- */
.st-hero {
  border-radius: var(--radius-lg); color: #eef2ec; position: relative; overflow: hidden;
  background: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(160deg, #161b17, #0b0e0c);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 20px 36px -22px rgb(0 0 0 / 0.7);
}
.st-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: rgb(var(--a-500)); }
.st-eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 550; letter-spacing: 0; text-transform: none; color: rgb(238 242 236 / 0.66); }
.st-big { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.05em; }
.st-big:not(.is-empty) { color: rgb(var(--a-400)); }
.st-hero .st-big.is-money { color: #eef2ec; }
.st-ico { border-radius: var(--radius-md); color: rgb(var(--a-500)); background: rgb(var(--a-500) / 0.1); box-shadow: none; }
.st-track { border-radius: 2px; height: 0.4rem; background: var(--muted); }
.st-fill { border-radius: 2px; background: rgb(var(--a-500)); }
.st-row-val { font-family: var(--font-figure); font-weight: 600; letter-spacing: -0.05em; }
.st-seg { border-radius: 9999px; }
.st-badge { border-radius: var(--radius-sm); }
@media (min-width: 48rem) {
  :root .an-kpi:nth-of-type(1) { grid-column: span 4; }
  :root .an-kpi:nth-of-type(2), :root .an-kpi:nth-of-type(4) { grid-column: span 3; }
  :root .an-kpi:nth-of-type(3) { grid-column: span 2; }
  :root .an-kpi:nth-of-type(1) .an-num { font-size: 3rem; }
  :root .an-kpi:nth-of-type(3) .an-label svg { display: none; }
}

/* ---------- Acceso: tinta lisa con matriz de puntos y una ficha, no un panel con resplandor ---------- */
.login-shell { background: var(--ink); }
.login-shell::before {
  inset: 0; left: 0; top: 0; width: auto; aspect-ratio: auto; transform: none; border-radius: 0; animation: none; opacity: 1;
  -webkit-mask: radial-gradient(70% 60% at 50% 45%, #000, transparent); mask: radial-gradient(70% 60% at 50% 45%, #000, transparent);
  -webkit-mask-composite: initial; mask-composite: initial;
  background: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
.login-shell::after { height: 2px; opacity: 1; background: rgb(var(--a-500)); -webkit-mask-image: none; mask-image: none; }
.login-card {
  background: #121713; border-radius: var(--radius-lg); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 70px -24px rgb(0 0 0 / 0.9);
}
.login-card::after { inset: 0 auto auto 1.5rem; width: 3rem; height: 3px; border-radius: 0 0 3px 3px; background: rgb(var(--a-500)); }
.auth-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 750; letter-spacing: -0.04em; }
.auth-flash { border-radius: var(--radius-md); }
.auth-eye { border-radius: var(--radius-sm); }
.auth-back { border-radius: var(--radius-md); }
.auth-done-icon { border-radius: var(--radius-md); }
.auth-meter-bar, .auth-meter-bar span { border-radius: 2px; }
@media (max-width: 47.99rem) {
  .rf-kpi { flex-direction: row; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; }
}

/* Acceso en pantallas grandes: la ficha a la izquierda y un contador de surtidor a cero, sin texto real */
@media (min-width: 64rem) {
  .login-shell { justify-content: flex-start; padding-left: clamp(2rem, 11vw, 11rem); overflow: hidden; }
  .login-shell > div { position: relative; }
  .login-shell > div::before {
    content: '0,000'; content: '0,000' / '';
    position: absolute; left: calc(100% + 5vw); top: 50%; translate: 0 -50%;
    font: 500 clamp(6rem, 15vw, 17rem)/1 var(--font-figure); letter-spacing: -0.08em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 0.13); pointer-events: none; user-select: none;
  }
}

/* Precios de gasolineras: cifras de surtidor */
.ex-d-price, .ex-row-price, .ex-row-price strong, .fuel-best-price, .fuel-card-price, .fuel-pop-price, .fuel-price-num {
  font-family: var(--font-figure); font-variant-numeric: tabular-nums; letter-spacing: -0.05em;
}

/* Mapa de gasolineras: buscador y botones con la escala de controles; filtros y selector de modo siguen en píldora */
.ex-search, .ex-btn, .ex-more, .ex-back, .ex-live, .ex-best { border-radius: var(--radius-md); }
.ex-tier, .ex-d-meta span, .ex-links a { border-radius: var(--radius-sm); }

/* Adornos del marcado del dashboard (el € del total, la flecha de la acción principal, el nombre del saludo) */
.dash-hello-name { font-style: normal; color: rgb(var(--a-500)); }
.dash-total-fx { position: absolute; right: 1.1rem; bottom: -0.6rem; z-index: 0; pointer-events: none; user-select: none; line-height: 1; }
.dash-total-fx b { font: 500 clamp(6rem, 12vw, 9.5rem)/1 var(--font-figure); color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 0.12); }
.dash-total > :not(.dash-total-fx) { position: relative; z-index: 1; }
.dash-act-go { margin-left: auto; display: grid; place-items: center; flex: none; opacity: 0.7; transition: translate 0.16s var(--ease-out); }
.dash-act:hover .dash-act-go { translate: 2px -2px; }

/* ---------- Acceso en móvil: pantalla a sangre, cabecera a la izquierda y campos compactos ---------- */
@media (max-width: 39.99rem) {
  .login-shell { align-items: flex-start; padding: 0; background-image: none; }
  .login-shell > div { max-width: none; }
  .login-card {
    min-height: 100dvh; padding: 0.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) !important;
    border-radius: 0; box-shadow: none; background: transparent;
  }
  .login-card::after { left: 1.25rem; }
  .login-card .auth-back { margin: 0.4rem 0 0 -0.6rem; min-height: 2.5rem; font-size: 0.84rem; }
  .login-card > .text-center { text-align: left; margin: 0.6rem 0 1.35rem; }
  .login-card .brand-lockup { margin: 0 0 1.1rem; gap: 0.5rem; }
  .login-card .brand-lockup img { height: 2.1rem; width: auto; }
  .login-card .brand-wordmark { font-size: 1.25rem; }
  .login-card .auth-title { font-size: 1.75rem; line-height: 1.05; margin: 0 0 0.4rem; }
  .login-card > .text-center p { font-size: 0.9rem; line-height: 1.4; margin: 0; color: var(--muted-foreground); }
  .login-card .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.8rem; }
  .login-card .form-label, .login-card label { margin-bottom: 0.3rem; font-size: 0.8rem; }
  .login-card .input-field { min-height: 2.75rem; padding-block: 0.5rem; font-size: 1rem; }
  .login-card .auth-link { min-height: 2rem; font-size: 0.78rem; }
  .login-card .auth-label-row { align-items: center; }
  .login-card .auth-check { font-size: 0.8rem; gap: 0.55rem; }
  .login-card .btn-primary { min-height: 3rem; margin-top: 0.2rem; }
  .login-card .auth-flash { margin-bottom: 0.9rem; padding: 0.6rem 0.8rem; font-size: 0.82rem; }
  .login-card .auth-switch { margin-top: 1.1rem; font-size: 0.86rem; }
  .login-card .auth-switch-sm { margin-top: 0.1rem; font-size: 0.78rem; }
  .login-card .auth-meter { margin-top: 0.45rem; }
  .login-shell .auth-switch { padding: 0.5rem 1.25rem 0; margin: 0; justify-content: flex-start; font-size: 0.78rem; }
  .login-shell > div > .auth-switch { position: relative; margin-top: -3rem; padding-bottom: 1rem; }
}
@media (max-width: 39.99rem) {
  .login-card .auth-switch { justify-content: flex-start; padding: 0; margin-top: 1rem; }
  .login-card .auth-switch-sm { margin-top: 0; }
  .login-shell > div > .auth-switch a { color: var(--muted-foreground); font-weight: 500; }
}

/* ---------- Muro para invitados (secciones bloqueadas) ---------- */
.pw-card { border-radius: var(--radius-xl); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.pw-stage { border-radius: var(--radius-xl); }
.pw-icon { border-radius: var(--radius-md); color: rgb(var(--a-500)); }
.pw-eyebrow { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pw-card h1 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.04em; }
.pw-points svg { color: rgb(var(--a-500)); }
.pw-close { border-radius: var(--radius-md); }
.pub-cta { border-radius: var(--radius-md); }
.pub-cta-block { box-shadow: var(--key) rgb(var(--a-700)), inset 0 1px 0 rgb(255 255 255 / 0.22); color: var(--on-primary); }
.pub-cta-block:active { transform: translateY(2px); box-shadow: 0 0 0 rgb(var(--a-700)); }

/* Barra inferior de invitado: la sección que estás viendo queda marcada y los toques responden */
.bottom-nav-guest .bottom-nav-link.is-active, .bottom-nav-guest .bottom-nav-link.is-viewing { color: #fff; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.bottom-nav-guest .bottom-nav-link.is-viewing svg:not(.bn-lock svg), .bottom-nav-guest .bottom-nav-link.is-active svg { color: rgb(var(--a-400)); }
.bottom-nav-guest .bottom-nav-link.is-locked:active { color: #fff; background: rgb(255 255 255 / 0.07); }
.bottom-nav-guest .bottom-nav-link.is-locked.is-viewing .bn-lock { opacity: 0.9; }
.pw-secondary:active, .pw-back:active, .pw-close:active { background: var(--muted); color: var(--foreground); scale: 0.97; }
.pub-cta:active { scale: 0.98; }

@media (max-width: 47.99rem) {
  .mobile-bar { background: rgb(11 14 12 / 0.94); }
  /* A sangre y con la hoja de acceso anclada abajo: lo bloqueado se ve difuminado detrás */
  .pw-stage {
    margin-inline: calc(var(--page-pad) * -1); border-radius: 0; place-items: end center;
    min-height: calc(100dvh - 4.75rem - 6.25rem - env(safe-area-inset-bottom));
  }
  .pw-mock { padding: 0.9rem; filter: blur(6px) saturate(0.9); }
  .pw-scrim { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--background) 55%, transparent) 38%, var(--background) 82%); }
  .pw-card {
    width: calc(100% - 1.5rem); margin: 0 0 0.25rem; padding: 1.35rem 1.15rem 0.9rem; text-align: left;
    border-radius: 1.4rem; background: color-mix(in srgb, var(--card) 96%, transparent);
  }
  .pw-icon { width: 2.6rem; height: 2.6rem; margin: 0 0 0.8rem; }
  .pw-icon svg { width: 1.25rem; height: 1.25rem; }
  .pw-close { top: 0.65rem; right: 0.65rem; width: 2.75rem; height: 2.75rem; }
  .pw-eyebrow { margin-bottom: 0.35rem; font-size: 0.74rem; }
  .pw-card h1 { margin-bottom: 0.4rem; font-size: 1.5rem; line-height: 1.08; }
  .pw-text { margin: 0 0 0.9rem; max-width: none; font-size: 0.88rem; line-height: 1.4; }
  .pw-points { margin-bottom: 1.1rem; gap: 0.45rem; }
  .pw-points li { font-size: 0.84rem; line-height: 1.3; gap: 0.5rem; }
  .pw-actions { justify-items: stretch; gap: 0.2rem; }
  .pub-cta-block { min-height: 3rem; justify-content: center; }
  .pw-secondary { justify-content: center; min-height: 2.75rem; }
  .pw-back { justify-content: center; width: 100%; margin-top: 0; min-height: 2.75rem; }
}

/* ---------- Ajustes y Mi cuenta (account.css carga después: se sube la especificidad) ---------- */
:root .acct { gap: 0.8rem; }
:root .acct-card { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border), var(--lift-1); }
:root .acct-hero {
  gap: 0.95rem; padding: 1.1rem; color: #eef2ec; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(160deg, #161b17, #0b0e0c);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 18px 32px -22px rgb(0 0 0 / 0.7);
}
:root .acct-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: rgb(var(--a-500)); }
:root .acct-avatar { width: 3.6rem; height: 3.6rem; border-radius: var(--radius-md); font-size: 1.5rem; color: var(--on-primary); background: rgb(var(--a-500)); box-shadow: var(--key) rgb(var(--a-700)); }
:root .acct-avatar img { border-radius: inherit; }
:root .acct-avatar-edit { right: -0.4rem; bottom: -0.4rem; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); color: var(--foreground); background: var(--card); }
:root .acct-id h1 { font: 750 1.3rem/1.1 var(--font-display); letter-spacing: -0.035em; color: #eef2ec; }
:root .acct-mail { color: rgb(238 242 236 / 0.66); font-size: 0.84rem; }
:root .acct-meta { color: rgb(238 242 236 / 0.55); font-size: 0.74rem; }

:root .acct-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
:root .acct-stats .acct-stat:first-child { grid-column: 1 / -1; }
:root .acct-stat { padding: 0.85rem 0.95rem; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border), var(--lift-1); }
:root .acct-stat b { font: 600 1.6rem/1 var(--font-figure); letter-spacing: -0.05em; }
:root .acct-stat span { margin-top: 0.45rem; font-size: 0.74rem; }
@media (min-width: 48rem) {
  :root .acct-stats { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  :root .acct-stats .acct-stat:first-child { grid-column: auto; }
}

:root .acct-section { padding: 1rem; gap: 0.85rem; }
:root .acct-section > header h2 { font: 700 1.05rem/1.2 var(--font-display); letter-spacing: -0.025em; }
:root .acct-section > header p { font-size: 0.82rem; }
:root .acct-field label { font-weight: 600; }
:root .acct-input { border-radius: var(--radius-md); background: var(--card-sunken); border: 1px solid var(--border-strong); box-shadow: inset 0 1px 2px rgb(14 30 22 / 0.07); }
:root .acct-input:focus { border-color: rgb(var(--a-500)); box-shadow: 0 0 0 3px rgb(var(--a-500) / 0.2); background: var(--card); }
:root .acct-photo .btn-secondary { min-height: 44px; }

:root .acct-rows { border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border); }
:root .acct-row { min-height: 3.2rem; padding: 0.65rem 0.85rem; }
:root .acct-row + .acct-row { box-shadow: none; border-top: 1px dashed var(--border-strong); }
:root .acct-row:active { background: var(--muted); }
:root .acct-row-text strong { font-weight: 600; }

:root .seg { padding: 3px; border-radius: var(--radius-md); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); }
:root .seg-opt span { min-height: 38px; border-radius: 0.4rem; font-family: var(--font-body); font-size: 0.84rem; }
:root .seg-opt input:checked + span { color: var(--card); background: var(--foreground); box-shadow: none; }
:root .seg-opt:active span { scale: 0.97; }
:root .stepper { border-radius: var(--radius-md); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); }
:root .stepper input { background: transparent; font: 600 1.1rem/1 var(--font-figure); }
:root .stepper button:active { background: rgb(var(--a-500) / 0.16); }
:root .swatch i { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
:root .swatch input:checked + i { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgb(var(--c)); transform: none; }

:root .acct-save { min-height: 46px; }
:root .acct-spin { border-color: color-mix(in srgb, var(--on-primary) 35%, transparent); border-top-color: var(--on-primary); }
:root .acct-logout { border-radius: var(--radius-md); min-height: 46px; border: 1px solid rgb(229 72 77 / 0.3); background: transparent; }
:root .acct-logout:active { background: rgb(229 72 77 / 0.12); }
:root .acct-danger { box-shadow: 0 0 0 1px rgb(229 72 77 / 0.35); background: var(--card); }
:root .acct-danger-btn { border-radius: var(--radius-md); }
:root .acct-danger-btn:not(:disabled):active { background: #e5484d; color: #fff; }
@media (max-width: 47.99rem) {
  :root .acct-stats .acct-stat:first-child { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
  :root .acct-stats .acct-stat:first-child span { margin-top: 0; font-size: 0.84rem; }
}
/* Formularios con clase .acct dentro de una tarjeta (Seguridad): a todo el ancho de la tarjeta */
:root .acct-section form.acct { width: 100%; max-width: none; margin: 0; padding-bottom: 0; gap: 0.85rem; }

/* Seguridad contra desbordes: nada puede ensanchar la pantalla (eso empujaba la barra inferior fuera de vista en móviles estrechos) */
html, body { overflow-x: clip; }
.app-main, .app-content { min-width: 0; max-width: 100%; }
.st-row-top { min-width: 0; }
.st-row-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.st-row-val { flex: 0 0 auto; white-space: nowrap; }