/* ==========================================================================
   POLISH — capa de acabado sobre el sistema "Motor" (se carga después de app.css).
   Una sola elevación por superficie (anillo + sombra), radios concentricos, números tabulares,
   pulsación 0.96, transiciones con propiedades explícitas y movimiento solo en transform/opacity.
   ========================================================================== */

:root {
  --ring: 0 0 0 1px var(--border);
  --lift-1: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 24px -14px rgb(15 23 42 / 0.16);
  --lift-2: 0 2px 4px rgb(15 23 42 / 0.06), 0 18px 36px -16px rgb(15 23 42 / 0.26);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --press: 0.96;
}
.dark {
  --lift-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 30px -18px rgb(0 0 0 / 0.8);
  --lift-2: 0 2px 4px rgb(0 0 0 / 0.5), 0 22px 44px -18px rgb(0 0 0 / 0.9);
}

/* ---------- Tipografía y superficies del navegador ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .ledger-figure { text-wrap: balance; }
p, li, .calc-panel p { text-wrap: pretty; }
.compact-kpi-value, .calc-result-value, .calc-stat strong, .ledger-figure, .ledger-row dd, .ledger-bar-value,
.activity-amount, .record-figure, table td, [data-tabular] { font-variant-numeric: tabular-nums; }

::selection { background: rgb(var(--a-500) / 0.28); color: inherit; }
:focus-visible { outline: 2px solid rgb(var(--a-500)); outline-offset: 2px; border-radius: 0.4rem; }
.input-field:focus-visible, .calc-input input:focus-visible { outline: none; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

main img:not(.vehicle-hero-img):not(.no-outline) { outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
.dark main img:not(.vehicle-hero-img):not(.no-outline) { outline-color: oklch(1 0 0 / 0.1); }

/* ---------- Tarjetas: una elevación, sin adornos ---------- */
.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--ring), var(--lift-1);
  transition-property: box-shadow, transform;
  transition-duration: 0.28s;
  transition-timing-function: var(--ease-out);
}
.card::before, .compact-kpi-card::after, .record-card::after { display: none; }
.card:hover { border-color: transparent; }
a.card:hover, .record-card:hover, .vehicle-shell-card:hover { box-shadow: 0 0 0 1px var(--border-strong), var(--lift-2); }
.record-card, .card.record-card { padding-left: clamp(1rem, 0.9rem + 0.8vw, 1.5rem); border-color: transparent; }
.page-header.card, .page-header { border: 0 !important; box-shadow: var(--ring), var(--lift-1) !important; }

/* Sin rayas de competición decorativas en los títulos */
.page-header h1::before { display: none; }
.page-header h1 { padding-left: 0; font-weight: 700; letter-spacing: -0.025em; }

/* ---------- Botones: planos, táctiles ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .icon-action-btn, .sidebar-mini-link {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 0.18s;
  transition-timing-function: var(--ease-out);
}
.btn-primary {
  background: rgb(var(--a-500));
  border-color: transparent;
  box-shadow: 0 1px 2px rgb(var(--a-700) / 0.45), 0 8px 18px -8px rgb(var(--a-500) / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.2);
}
.btn-primary:hover:not(:disabled) {
  filter: none;
  transform: none;
  background: rgb(var(--a-400));
  box-shadow: 0 1px 2px rgb(var(--a-700) / 0.45), 0 12px 24px -8px rgb(var(--a-500) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.26);
}
.btn-secondary { background: var(--card); border-color: transparent; box-shadow: var(--ring), 0 1px 2px rgb(15 23 42 / 0.05); }
.btn-secondary:hover:not(:disabled) { transform: none; border-color: transparent; background: var(--accent); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgb(15 23 42 / 0.08); }
.btn-ghost:hover:not(:disabled), .btn-danger:hover:not(:disabled) { transform: none; }
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-ghost:active:not(:disabled),
.btn-danger:active:not(:disabled), .sidebar-mini-link:active { transform: scale(var(--press)); }
.icon-action-btn:hover { transform: none; }
.icon-action-btn:active { transform: scale(var(--press)); }

/* Zonas de pulsación: botones de icono pequeños heredan 40x40 sin cambiar su aspecto */
.record-card-side button, .touch-actions button { position: relative; transition-property: transform, background-color, color; transition-duration: 0.16s; }
.record-card-side button:active, .touch-actions button:active { transform: scale(var(--press)); }

/* Botón en envío: giro discreto + bloqueo (evita dobles envíos) */
.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.is-loading > * { visibility: hidden; }
.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 1.1rem; height: 1.1rem;
  border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff; border-radius: 50%;
  animation: polishSpin 0.7s linear infinite;
}
.btn-secondary.is-loading::after { border-color: var(--border-strong); border-top-color: rgb(var(--a-500)); }
@keyframes polishSpin { to { transform: rotate(360deg); } }

/* ---------- Formularios ---------- */
.input-field { border-color: transparent; box-shadow: 0 0 0 1px var(--border-strong); transition-property: box-shadow, background-color; transition-duration: 0.18s; }
.input-field:hover { border-color: transparent; box-shadow: 0 0 0 1px rgb(var(--a-500) / 0.5); }
.input-field:focus { border-color: transparent; box-shadow: 0 0 0 1.5px rgb(var(--a-500)), 0 0 0 5px rgb(var(--a-500) / 0.16); }

/* ---------- Pestañas con indicador deslizante (assets/js/motion.js) ---------- */
.calc-tabs, .rutas-tabs { position: relative; }
.tab-indicator { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, width; }
.calc-tabs.has-indicator { border-color: transparent; box-shadow: var(--ring); }
.calc-tabs.has-indicator a { position: relative; z-index: 1; }
.calc-tabs.has-indicator a.is-active { background: transparent; box-shadow: none; }
.calc-tabs.has-indicator .tab-indicator { background: var(--card); border-radius: 9999px; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgb(15 23 42 / 0.12); }
.rutas-tabs.has-indicator a { border-bottom-color: transparent !important; }
.rutas-tabs.has-indicator .tab-indicator { height: 2px; bottom: 0; top: auto; border-radius: 2px; background: rgb(var(--a-500)); }

/* ---------- Libro de gastos (panel del dashboard) ---------- */
.ledger {
  display: grid; gap: 0; grid-template-columns: minmax(0, 1fr);
  background: var(--card); border-radius: 1.25rem; overflow: hidden;
  box-shadow: var(--ring), var(--lift-1);
}
@media (min-width: 60rem) { .ledger { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.ledger-main { padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem); display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ledger-label { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--muted-foreground); }
.ledger-figure { margin: 0.2rem 0 0; font-size: clamp(2.4rem, 1.7rem + 3.6vw, 4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--foreground); }
.ledger-figure small { font-size: 0.45em; font-weight: 600; letter-spacing: -0.01em; color: var(--muted-foreground); margin-left: 0.2em; }
.ledger-delta { margin: 0.55rem 0 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); }
.ledger-delta.is-up { color: var(--gauge-bad); }
.ledger-delta.is-down { color: var(--gauge-ok); }

.ledger-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.4rem, 0.2rem + 1vw, 0.9rem); align-items: end; height: 9rem; margin-top: auto; }
.ledger-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.4rem; height: 100%; min-width: 0; }
.ledger-bar-track { display: flex; align-items: flex-end; min-height: 0; }
.ledger-bar-fill { display: block; width: 100%; min-height: 0.25rem; border-radius: 0.5rem 0.5rem 0.25rem 0.25rem; background: var(--muted); transform-origin: bottom; }
.ledger-bar.is-current .ledger-bar-fill { background: rgb(var(--a-500)); box-shadow: 0 8px 18px -8px rgb(var(--a-500) / 0.7); }
.ledger-bar-label { font-size: 0.72rem; font-weight: 600; text-align: center; color: var(--muted-foreground); text-transform: capitalize; white-space: nowrap; }
.ledger-bar.is-current .ledger-bar-label { color: var(--foreground); }
.ledger-bar-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ledger-side { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card-sunken); }
@media (min-width: 60rem) { .ledger-side { grid-template-columns: minmax(0, 1fr); align-content: stretch; } }
.ledger-row { padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem) clamp(0.9rem, 0.7rem + 1vw, 1.6rem); display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: 0; }
.ledger-row + .ledger-row { border-left: 1px solid var(--border); }
@media (min-width: 60rem) { .ledger-row + .ledger-row { border-left: 0; border-top: 1px solid var(--border); } }
.ledger-row dt { font-size: 0.82rem; font-weight: 600; color: var(--muted-foreground); }
.ledger-row dd { margin: 0; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.65rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--foreground); overflow-wrap: anywhere; }
.ledger-row dd small { font-size: 0.55em; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0; margin-left: 0.15em; }

/* ---------- Actividad reciente ---------- */
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.5rem; margin-inline: -0.5rem; border-radius: 0.75rem; transition-property: background-color; transition-duration: 0.15s; }
.activity-row + .activity-row { box-shadow: 0 -1px 0 var(--border); }
.activity-row:hover { background: var(--muted); box-shadow: none; }
.activity-row:hover + .activity-row { box-shadow: none; }
.activity-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; display: grid; place-items: center; flex: none; }
.activity-mark.is-refueling { color: rgb(var(--a-500)); background: rgb(var(--a-500) / 0.12); }
.activity-mark.is-maintenance { color: var(--gauge-ok); background: rgb(23 178 106 / 0.12); }
.activity-mark.is-expense { color: var(--gauge-warn); background: rgb(245 165 36 / 0.14); }
.activity-amount { font-weight: 650; letter-spacing: -0.01em; }

/* ---------- Registro de repostajes ---------- */
.record-figure { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.record-card .record-mark { width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; display: grid; place-items: center; flex: none; color: rgb(var(--a-500)); background: rgb(var(--a-500) / 0.1); }
.record-card .record-actions button { border-radius: 0.6rem; }

/* ---------- Calculadora: respuesta al calcular ---------- */
.calc-result-value { font-variant-numeric: tabular-nums; }

/* ---------- Movimiento: con GSAP activo, la entrada la hace motion.js ---------- */
.js-motion .animate-in, .js-motion .animate-in > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .is-loading::after { animation-duration: 2s; }
}

.calc-grid .calc-panel { border: 0; box-shadow: var(--ring), var(--lift-1); }

/* Iconos de indicadores: neutros (el color queda para el estado y el acento) */
.compact-kpi-icon { background: var(--muted) !important; color: var(--muted-foreground) !important; box-shadow: none; border-radius: 0.65rem; }
@media (max-width: 29.99rem) {
  .ledger-row dd { font-size: 1rem; white-space: nowrap; }
  .ledger-row dt { font-size: 0.75rem; }
}

/* ==========================================================================
   IDENTIDAD GLOBAL — papel cálido + tinta, Bricolage Grotesque para títulos y cifras.
   Sobrescribe los tokens de tokens.css, así que cambia TODA la web (incluida la zona admin y el Hub).
   ========================================================================== */
:root {
  --font-display: 'Bricolage Grotesque', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --background: #eeece7;
  --card: #fffefb;
  --card-sunken: #f5f3ee;
  --foreground: #17130f;
  --muted: rgba(23, 19, 15, 0.06);
  --muted-foreground: #5f5850;
  --accent: #f2f0eb;
  --border: rgba(23, 19, 15, 0.1);
  --border-strong: rgba(23, 19, 15, 0.2);
  --color-background-light: #eeece7;
}
.dark {
  --background: #0d0c0b;
  --card: #161412;
  --card-sunken: #100e0d;
  --foreground: #f5f2ed;
  --muted: rgba(255, 244, 230, 0.06);
  --muted-foreground: #a8a096;
  --accent: #1e1b18;
  --border: rgba(255, 244, 230, 0.09);
  --border-strong: rgba(255, 244, 230, 0.18);
}
body, .dark body { background-image: none; background-color: var(--background); font-feature-settings: 'cv11'; }

h1, h2, h3, h4, .page-header h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; }
h1, .page-header h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); }
h3 { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); }
[class*='text-3xl'], [class*='text-4xl'] { font-family: var(--font-display); letter-spacing: -0.03em; }
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .sidebar-mini-link, .calc-tabs a { font-family: var(--font-display); letter-spacing: -0.005em; }

/* Cabeceras de página: sin caja, el título manda y las acciones se alinean a la derecha */
.page-header, .page-header.card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0 0.75rem !important;
  align-items: flex-end;
}
.page-header p { color: var(--muted-foreground); }
.page-header + * { margin-top: 0; }

/* Colores heredados: los matices decorativos pasan a neutro; verde/rojo/ámbar siguen siendo semánticos */
[class*='bg-gradient-to']:not([class*='from-black']) { background-image: none !important; }
[class*='bg-blue-500/'], [class*='bg-purple-500/'], [class*='bg-indigo-500/'], [class*='bg-pink-500/'], [class*='bg-orange-500/'],
[class*='bg-cyan-500/'], [class*='bg-sky-500/'], [class*='bg-violet-500/'], [class*='bg-teal-500/'] { background-color: var(--muted) !important; }
[class*='text-blue-'], [class*='text-purple-'], [class*='text-indigo-'], [class*='text-pink-'], [class*='text-orange-'],
[class*='text-cyan-'], [class*='text-sky-'], [class*='text-violet-'], [class*='text-teal-'] { color: var(--muted-foreground) !important; }
[class*='border-blue-500/'], [class*='border-purple-500/'], [class*='border-green-500/'], [class*='border-orange-500/'], [class*='border-indigo-500/'] { border-color: var(--border) !important; }
.card.border-dashed { box-shadow: none; border: 1.5px dashed var(--border-strong); background: transparent; }

/* Tablas: densas, sin rejilla, cabecera discreta */
table { border-collapse: collapse; width: 100%; }
th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); text-align: left; }
th, td { padding: 0.7rem 0.9rem; }
tbody tr { box-shadow: 0 -1px 0 var(--border); }
tbody tr:hover { background: var(--muted); }

/* Chips y etiquetas: planos */
.soft-chip, .app-chip, .app-tag-chip, .user-meta-chip, .user-role-badge, .user-status-badge { border-color: transparent; background: var(--muted); border-radius: 9999px; font-family: var(--font-body); }
.app-tag-chip { background: rgb(var(--a-500) / 0.1); }

/* Barra lateral: activo con marca de acento sin brillo, rótulos más silenciosos */
.sidebar::before { display: none; }
.sidebar .nav-link { border-radius: 0.65rem; transition-property: background-color, color; transition-duration: 0.15s; }
.sidebar .nav-link.active, .sidebar .nav-link.is-active, .sidebar .nav-link[aria-current='page'] { box-shadow: none; background: rgb(var(--a-500) / 0.14); }
.sidebar-nav-title { letter-spacing: 0.08em; }

/* Superposiciones */
.app-modal-panel::before { display: none; }
.app-modal-panel, .modal-card { border: 0; box-shadow: var(--ring), var(--lift-2); border-radius: 1.25rem; }
.app-modal-header { background: var(--card); }

/* Entradas de formulario del resto de la web */
select.input-field { background-color: var(--card-sunken); }

/* ==========================================================================
   MOVIMIENTO COMÚN — el mismo gesto en toda la web (CSS interrumpible; GSAP solo orquesta entradas/salidas)
   ========================================================================== */
:root { --t-fast: 0.16s; --t-base: 0.28s; }

/* Tarjetas interactivas: se elevan 2px al pasar el ratón */
a.card, .vehicle-shell-card, .route-card, .public-vehicle-card, .spec-card, .hub-post, .hub-card, .doc-card-premium, .record-card, .admin-kpi {
  transition-property: transform, box-shadow, background-color;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-out);
}
@media (hover: hover) {
  a.card:hover, .vehicle-shell-card:hover, .route-card:hover, .public-vehicle-card:hover, .spec-card:hover, .hub-post:hover, .hub-card:hover,
  .doc-card-premium:hover, .record-card:hover, a.admin-kpi:hover { transform: translateY(-2px); }
}
a.card:active, .vehicle-shell-card:active, .route-card:active, .public-vehicle-card:active, .record-card:active { transform: scale(0.985); }

/* Navegación y chips: color suave + pulsación */
.nav-link, .sidebar-nav-toggle, .hub-subnav a, .hub-chip, .hub-pill, .hub-filter-chip, .soft-chip, .admin-tab, .admin-segment, .page-actions > * {
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease-out);
}
.nav-link:active, .hub-subnav a:active, .hub-chip:active, .hub-pill:active, .admin-tab:active, .admin-segment:active { transform: scale(0.97); }

/* Iconos de acción: giran/escalan sin saltos */
.icon-action-btn svg, .record-actions svg, .touch-actions svg { transition: transform var(--t-fast) var(--ease-out); }
.icon-action-btn:hover svg, .record-actions button:hover svg { transform: scale(1.1); }

/* Avisos, filas y desplegables: aparecen con fundido */
tbody tr, .activity-row, .connection-item, .dashboard-list-row { transition: background-color var(--t-fast) var(--ease-out); }

/* Enlaces de texto: subrayado que crece */
.page-header a:not([class*='btn']):not([class*='card']), .card p a { text-underline-offset: 0.2em; transition: color var(--t-fast) var(--ease-out); }

/* Con movimiento reducido: sin elevaciones ni escalas, solo cambios de color */
@media (prefers-reduced-motion: reduce) {
  a.card:hover, .vehicle-shell-card:hover, .route-card:hover, .record-card:hover { transform: none; }
  a.card:active, .nav-link:active, .record-card:active { transform: none; }
}