/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   stock_vehiculos.css — Comercial › Operaciones › Stock Vehículos
   TODO scopeado a #page-stock_vehiculos: este módulo no puede teñir a ningún otro.
   Portado de los especímenes canónicos de Claude Design (02/08/2026):
     · «Stock de Vehiculos - Lista.html»  md5 f15a21d32d59fd2ea8017ea3b05d602f
     · «Stock de Vehiculos - Movil.html»  md5 4e732f1766d976a6147d825721f97121
   Ruptura en 768 px, la MISMA del shell y la de control de tiempos: un único punto para toda la
   app, para que nadie tenga que recordar cuál rige en qué pantalla.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

#page-stock_vehiculos {
  --sv-radius-sm: 9px; --sv-radius: 14px;
  --sv-vn: #2563c9; --sv-vn-bg: #e8effb;
  --sv-vo: #0f9b6c; --sv-vo-bg: #e2f4ec;
  --sv-row: #f0f3f2;
  --sv-shadow: 0 2px 10px rgba(20,40,35,.05), 0 1px 2px rgba(20,40,35,.04);
  --sv-pop: 0 12px 36px rgba(20,40,35,.14);
}
#page-stock_vehiculos .sv-n { font-variant-numeric: tabular-nums; }

/* ── cabecera y barra de filtros ────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-top { background: var(--surface, #fff); border-bottom: 1px solid var(--border, #e7eceb); }
#page-stock_vehiculos .sv-top__row { display: flex; align-items: center; gap: 18px; padding: 14px 20px 8px; }
#page-stock_vehiculos .sv-top__t h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
#page-stock_vehiculos .sv-crumb { font-size: 11.5px; color: var(--text-3, #94a39f); margin-top: 2px; }
#page-stock_vehiculos .sv-fbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 0 20px 14px; }
#page-stock_vehiculos .sv-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#page-stock_vehiculos .sv-f__l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #94a39f); margin-left: 2px; }
#page-stock_vehiculos .sv-f__c { display: flex; gap: 6px; align-items: center; }
#page-stock_vehiculos .sv-f--grow { flex: 1; min-width: 200px; }
#page-stock_vehiculos .sv-inp,
#page-stock_vehiculos .sv-sel {
  appearance: none; border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff);
  color: var(--text, #16201d); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 11px; border-radius: var(--sv-radius-sm); min-height: 38px;
}
#page-stock_vehiculos .sv-sel { padding-right: 26px; }
#page-stock_vehiculos .sv-inp:focus,
#page-stock_vehiculos .sv-sel:focus { outline: none; border-color: var(--accent, #0f9b6c); box-shadow: 0 0 0 3px var(--accent-weak, #e2f4ec); }
#page-stock_vehiculos .sv-inp--date { font-size: 12.5px; font-weight: 500; }
#page-stock_vehiculos .sv-inp--dias { width: 74px; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-inp--q { min-width: 220px; width: 100%; font-weight: 500; font-size: 13.5px; }
#page-stock_vehiculos .sv-seg {
  display: inline-flex; background: var(--surface-2, #f1f5f4); border: 1px solid var(--border, #e7eceb);
  border-radius: var(--sv-radius-sm); padding: 3px; gap: 3px; min-height: 38px;
}
#page-stock_vehiculos .sv-seg button { border: 0; background: transparent; color: var(--text-2, #586663); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
#page-stock_vehiculos .sv-seg button.is-on { background: var(--surface, #fff); color: var(--text, #16201d); box-shadow: 0 1px 3px rgba(20,40,35,.1); }
#page-stock_vehiculos .sv-seg--age button.is-on { background: var(--text, #16201d); color: #fff; }

#page-stock_vehiculos .sv-page { padding: 26px 20px 80px; }

/* ── indicadores ───────────────────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
#page-stock_vehiculos .sv-kpi { background: var(--surface, #fff); border: 1px solid var(--border, #e7eceb); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); padding: 14px; min-width: 0; }
#page-stock_vehiculos .sv-kpi__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3, #94a39f); }
#page-stock_vehiculos .sv-kpi__v { font-variant-numeric: tabular-nums; font-size: clamp(21px, 1.85vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
#page-stock_vehiculos .sv-kpi__v small { font-size: .5em; color: var(--text-3, #94a39f); margin-left: 3px; }
#page-stock_vehiculos .sv-kpi__s { font-size: 11.5px; color: var(--text-2, #586663); margin-top: 5px; }
#page-stock_vehiculos .sv-kpi__f { font-size: 11px; color: var(--text-3, #94a39f); margin-top: 7px; text-wrap: pretty; }
#page-stock_vehiculos .sv-kpi__split { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
#page-stock_vehiculos .sv-kpi__sp { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2, #586663); white-space: nowrap; }
#page-stock_vehiculos .sv-kpi__sp b { font-weight: 500; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-kpi--warn .sv-kpi__v { color: var(--warn, #c5870f); }
#page-stock_vehiculos .sv-kpi--neg .sv-kpi__v { color: var(--neg, #e0533c); }
#page-stock_vehiculos .sv-kpi__two { display: flex; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
#page-stock_vehiculos .sv-kpi__tv { font-variant-numeric: tabular-nums; font-size: clamp(15px, 1.15vw, 20px); font-weight: 500; line-height: 1.2; white-space: nowrap; }
#page-stock_vehiculos .sv-kpi__tl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3, #94a39f); white-space: nowrap; }
#page-stock_vehiculos .sv-kpi__tl em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; }
#page-stock_vehiculos .sv-kpi--cost .sv-kpi__two { flex-direction: column; gap: 7px; margin-top: 10px; }

/* ── etiquetas de tipo ─────────────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--surface-2, #f1f5f4); color: var(--text-3, #94a39f); white-space: nowrap; }
#page-stock_vehiculos .sv-tag--vn { background: var(--sv-vn-bg); color: var(--sv-vn); }
#page-stock_vehiculos .sv-tag--vo { background: var(--sv-vo-bg); color: var(--accent-strong, #0a7a54); }
/* Doble naturaleza: DISCRETA a propósito. Señala algo pendiente de regularizar en el DMS, no una
   alarma — el vehículo está bien, el que tiene dos fichas es el sistema de origen. */
#page-stock_vehiculos .sv-tag--dual { background: linear-gradient(100deg, var(--sv-vn-bg) 0, var(--sv-vn-bg) 48%, var(--sv-vo-bg) 52%, var(--sv-vo-bg) 100%); color: var(--text-2, #586663); border: 1px solid var(--border-strong, #d2dbd9); padding: 2px 6px; }

/* ── tabla ─────────────────────────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-card { background: var(--surface, #fff); border: 1px solid var(--border, #e7eceb); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); overflow: hidden; }
#page-stock_vehiculos .sv-card__hd { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border, #e7eceb); flex-wrap: wrap; }
#page-stock_vehiculos .sv-card__hd h2 { font-size: 15px; font-weight: 700; margin: 0; }
#page-stock_vehiculos .sv-card__hd .sv-meta { font-size: 11.5px; color: var(--text-3, #94a39f); }
#page-stock_vehiculos .sv-sp { flex: 1; }
#page-stock_vehiculos .sv-sec { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3, #94a39f); margin: 26px 0 9px 2px; display: flex; align-items: baseline; gap: 9px; }
#page-stock_vehiculos .sv-sec span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
#page-stock_vehiculos .sv-tw { min-width: 0; overflow-x: auto; }
#page-stock_vehiculos .sv-dt { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
#page-stock_vehiculos .sv-dt th { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3, #94a39f); text-align: left; padding: 10px 9px; background: #f6f9f8; border-bottom: 1px solid var(--border-strong, #d2dbd9); white-space: nowrap; }
#page-stock_vehiculos .sv-dt th.r, #page-stock_vehiculos .sv-dt td.r { text-align: right; }
#page-stock_vehiculos .sv-dt td { padding: 10px 9px; border-bottom: 1px solid var(--sv-row); vertical-align: middle; }
#page-stock_vehiculos .sv-dt tbody tr { cursor: pointer; }
#page-stock_vehiculos .sv-dt tbody tr:hover { background: var(--hover, #f0f5f4); }
#page-stock_vehiculos .sv-dt tbody tr.is-sel { background: var(--accent-weak, #e2f4ec); }
#page-stock_vehiculos .sv-dt tbody tr.is-sel td:first-child { box-shadow: inset 3px 0 var(--accent, #0f9b6c); }
#page-stock_vehiculos .c-tipo { width: 52px; } #page-stock_vehiculos .c-veh { width: 15%; min-width: 132px; }
#page-stock_vehiculos .c-marca { width: 9%; } #page-stock_vehiculos .c-conc { width: 58px; }
#page-stock_vehiculos .c-rec { width: 90px; } #page-stock_vehiculos .c-dias { width: 96px; }
#page-stock_vehiculos .c-coste { width: 11%; min-width: 104px; }

#page-stock_vehiculos .sv-veh__n { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-stock_vehiculos .sv-veh__b { font-size: 10.5px; color: var(--text-3, #94a39f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
#page-stock_vehiculos .sv-veh__m { font-size: 11px; color: var(--text-2, #586663); background: var(--surface-2, #f1f5f4); border-radius: 4px; padding: 0 5px; display: inline-block; margin-top: 3px; }
#page-stock_vehiculos .sv-veh__d { font-size: 10.5px; color: var(--text-3, #94a39f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#page-stock_vehiculos .sv-marca { font-size: 12.5px; font-weight: 600; color: var(--text-2, #586663); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Descripción en dos alturas. Ninguna envuelve: la fila no puede crecer por un literal largo del
   DMS. El literal entero vive en la ficha, que es su sitio. */
#page-stock_vehiculos .sv-mod { min-width: 0; }
#page-stock_vehiculos .sv-mod__h { font-size: 14px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-stock_vehiculos .sv-mod__t { font-size: 11.5px; color: var(--text-3, #94a39f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-rec { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-stock_vehiculos .sv-dias { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-dias b { font-size: 17px; font-weight: 500; line-height: 1; }
#page-stock_vehiculos .sv-dias small { font-size: 10px; color: var(--text-3, #94a39f); }
#page-stock_vehiculos .sv-dias--w b { color: var(--warn, #c5870f); }
#page-stock_vehiculos .sv-dias--x b { color: var(--neg, #e0533c); }
#page-stock_vehiculos .sv-band { height: 4px; border-radius: 2px; background: var(--surface-3, #e6edeb); margin: 5px 0 0 auto; width: 64px; overflow: hidden; }
#page-stock_vehiculos .sv-band i { display: block; height: 100%; background: var(--accent, #0f9b6c); }
#page-stock_vehiculos .sv-band i.w { background: var(--warn, #c5870f); }
#page-stock_vehiculos .sv-band i.x { background: var(--neg, #e0533c); }
#page-stock_vehiculos .sv-coste { font-size: 12.5px; color: var(--text-2, #586663); white-space: nowrap; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-pvp { font-size: 11px; color: var(--text-3, #94a39f); margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }

#page-stock_vehiculos .sv-legs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 20px; border-top: 1px solid var(--border, #e7eceb); background: var(--surface-2, #f1f5f4); }
#page-stock_vehiculos .sv-leg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2, #586663); }
#page-stock_vehiculos .sv-leg__sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#page-stock_vehiculos .sv-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border, #e7eceb); background: var(--surface-2, #f1f5f4); font-size: 12px; color: var(--text-2, #586663); flex-wrap: wrap; }
#page-stock_vehiculos .sv-pgbtn { border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); color: var(--text-2, #586663); font-size: 12px; font-weight: 600; min-width: 32px; height: 32px; border-radius: 7px; cursor: pointer; }
#page-stock_vehiculos .sv-pgbtn.is-on { background: var(--accent, #0f9b6c); border-color: transparent; color: #fff; }
#page-stock_vehiculos .sv-pgbtn[disabled] { opacity: .45; cursor: default; }
#page-stock_vehiculos .sv-btn { border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); color: var(--text-2, #586663); font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: var(--sv-radius-sm); display: inline-flex; align-items: center; gap: 7px; min-height: 40px; cursor: pointer; }
#page-stock_vehiculos .sv-btn--primary { border-color: transparent; background: var(--accent, #0f9b6c); color: #fff; }

/* ── panel lateral (escritorio) ────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-scrim { position: fixed; inset: var(--header-h, 56px) 0 0 0; background: rgba(12,22,19,.28); z-index: 160; opacity: 0; pointer-events: none; transition: opacity .2s; }
#page-stock_vehiculos.sv-panel-on .sv-scrim { opacity: 1; pointer-events: auto; }
#page-stock_vehiculos .sv-panel { position: fixed; top: var(--header-h, 56px); right: 0; bottom: 0; width: 428px; max-width: 94vw; z-index: 170; background: var(--surface, #fff); border-left: 1px solid var(--border, #e7eceb); box-shadow: var(--sv-pop); transform: translateX(103%); transition: transform .24s cubic-bezier(.2,.7,.3,1); display: flex; flex-direction: column; }
#page-stock_vehiculos.sv-panel-on .sv-panel { transform: none; }
#page-stock_vehiculos .sv-panel__h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--border, #e7eceb); }
#page-stock_vehiculos .sv-panel__pos { font-size: 11.5px; color: var(--text-3, #94a39f); font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-panel__b { flex: 1; overflow-y: auto; padding: 18px 20px 34px; }
#page-stock_vehiculos .sv-pbtn { width: 34px; height: 34px; border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); border-radius: 8px; color: var(--text-2, #586663); font-size: 14px; display: grid; place-items: center; cursor: pointer; }
#page-stock_vehiculos .sv-pbtn[disabled] { opacity: .4; cursor: default; }
#page-stock_vehiculos .sv-pid { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#page-stock_vehiculos .sv-pnum { font-size: 20px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-pmat { font-size: 13px; font-weight: 500; border: 1px solid var(--border-strong, #d2dbd9); border-radius: 6px; padding: 2px 8px; background: var(--surface-2, #f1f5f4); }
#page-stock_vehiculos .sv-pbas { font-size: 12px; color: var(--text-3, #94a39f); margin-top: 4px; word-break: break-all; }
#page-stock_vehiculos .sv-pdesc { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 14px; text-wrap: pretty; }
#page-stock_vehiculos .sv-pdesc small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #94a39f); margin-bottom: 5px; }
#page-stock_vehiculos .sv-pdays { display: flex; align-items: baseline; gap: 9px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--border, #e7eceb); border-radius: var(--sv-radius); background: var(--surface-2, #f1f5f4); }
#page-stock_vehiculos .sv-pdays b { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 500; line-height: 1; }
#page-stock_vehiculos .sv-pdays span { font-size: 12px; color: var(--text-2, #586663); }
#page-stock_vehiculos .sv-pdays--w b { color: var(--warn, #c5870f); }
#page-stock_vehiculos .sv-pdays--x b { color: var(--neg, #e0533c); }
#page-stock_vehiculos .sv-pgrp { margin-top: 26px; }
#page-stock_vehiculos .sv-pgrp__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3, #94a39f); margin-bottom: 9px; }
#page-stock_vehiculos .sv-kv { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
#page-stock_vehiculos .sv-kv dt { font-size: 12.5px; color: var(--text-2, #586663); padding: 7px 0; border-top: 1px solid var(--sv-row); }
#page-stock_vehiculos .sv-kv dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; padding: 7px 0; border-top: 1px solid var(--sv-row); font-variant-numeric: tabular-nums; }
#page-stock_vehiculos .sv-kv dt:first-of-type, #page-stock_vehiculos .sv-kv dd:first-of-type { border-top: 0; }
#page-stock_vehiculos .sv-pcost { margin-top: 26px; padding: 14px 18px; border: 1px dashed var(--border-strong, #d2dbd9); border-radius: var(--sv-radius); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
#page-stock_vehiculos .sv-pcost__l { font-size: 11px; color: var(--text-3, #94a39f); font-weight: 600; }
#page-stock_vehiculos .sv-pcost__v { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; color: var(--text-2, #586663); }
#page-stock_vehiculos .sv-pnote { font-size: 11.5px; color: var(--text-3, #94a39f); margin-top: 26px; text-wrap: pretty; }
#page-stock_vehiculos .sv-pdual { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--border-strong, #d2dbd9); border-radius: var(--sv-radius); background: var(--surface-2, #f1f5f4); }
#page-stock_vehiculos .sv-pdual__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2, #586663); }
#page-stock_vehiculos .sv-pdual__p { font-size: 12.5px; color: var(--text-2, #586663); margin-top: 5px; text-wrap: pretty; }
#page-stock_vehiculos .sv-pdual__t { display: grid; grid-template-columns: auto 1fr 1fr; margin-top: 14px; font-size: 12.5px; }
#page-stock_vehiculos .sv-pdual__t > div { padding: 6px 0; border-top: 1px solid var(--border, #e7eceb); }
#page-stock_vehiculos .sv-pdual__t > div:nth-child(-n+3) { border-top: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3, #94a39f); padding-top: 0; }
#page-stock_vehiculos .sv-pdual__t .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 10px; }
#page-stock_vehiculos .sv-pdual__t .k { color: var(--text-2, #586663); }

/* ── estados ───────────────────────────────────────────────────────────────────────────────── */
#page-stock_vehiculos .sv-sk { background: linear-gradient(90deg, var(--surface-2, #f1f5f4) 25%, var(--surface-3, #e6edeb) 37%, var(--surface-2, #f1f5f4) 63%); background-size: 400% 100%; animation: svShim 1.3s ease infinite; border-radius: 6px; height: 12px; }
@keyframes svShim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
#page-stock_vehiculos .sv-blank { text-align: center; padding: 70px 20px; }
#page-stock_vehiculos .sv-blank__i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2, #f1f5f4); color: var(--text-3, #94a39f); margin: 0 auto 14px; font-size: 19px; }
#page-stock_vehiculos .sv-blank h3 { font-size: 15px; font-weight: 700; margin: 0; }
#page-stock_vehiculos .sv-blank p { font-size: 12.5px; color: var(--text-2, #586663); margin: 6px auto 0; max-width: 54ch; text-wrap: pretty; }
#page-stock_vehiculos .sv-blank__cta { margin-top: 18px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* ═══ MÓVIL (≤768 px) ══════════════════════════════════════════════════════════════════════════
   No es el escritorio encogido: cambia la CAPA. La tabla desaparece y en su sitio va una tarjeta
   por vehículo; el panel lateral se convierte en hoja inferior; los filtros se van a otra hoja. */
@media (max-width: 768px) {
  #page-stock_vehiculos .sv-top__row { padding: 12px 16px 8px; }
  #page-stock_vehiculos .sv-top__t h1 { font-size: 17px; }
  #page-stock_vehiculos .sv-page { padding: 16px 16px var(--sv-dock); }
  #page-stock_vehiculos .sv-kpis { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border, #e7eceb); border: 1px solid var(--border, #e7eceb); border-radius: var(--sv-radius); overflow: hidden; }
  #page-stock_vehiculos .sv-kpi { border: 0; border-radius: 0; box-shadow: none; padding: 12px 14px; }
  #page-stock_vehiculos .sv-kpi__v { font-size: 23px; }
  #page-stock_vehiculos .sv-kpi--cost { grid-column: 1 / -1; }
  #page-stock_vehiculos .sv-kpi--cost .sv-kpi__two { flex-direction: row; justify-content: space-between; }

  /* chips de filtro: el tramo de antigüedad primero, que es el corte que de verdad se usa */
  #page-stock_vehiculos .sv-chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
  #page-stock_vehiculos .sv-chips::-webkit-scrollbar { display: none; }
  #page-stock_vehiculos .sv-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); border-radius: 20px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-2, #586663); min-height: 44px; white-space: nowrap; cursor: pointer; }
  #page-stock_vehiculos .sv-chip--on { border-color: transparent; background: var(--accent-weak, #e2f4ec); color: var(--accent-strong, #0a7a54); }
  #page-stock_vehiculos .sv-chip--f { border-color: var(--text, #16201d); background: var(--text, #16201d); color: #fff; }
  #page-stock_vehiculos .sv-chip__c { font-size: 11px; background: rgba(255,255,255,.22); border-radius: 9px; padding: 0 6px; font-variant-numeric: tabular-nums; }

  #page-stock_vehiculos .sv-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); border-radius: var(--sv-radius-sm); padding: 0 13px; min-height: 46px; margin-bottom: 12px; }
  #page-stock_vehiculos .sv-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; padding: 11px 0; color: var(--text, #16201d); }
  #page-stock_vehiculos .sv-search input:focus { outline: none; }

  #page-stock_vehiculos .sv-list { display: flex; flex-direction: column; gap: 12px; }
  #page-stock_vehiculos .sv-vc { display: block; width: 100%; text-align: left; background: var(--surface, #fff); border: 1px solid var(--border, #e7eceb); border-left: 4px solid var(--sv-vo); border-radius: var(--sv-radius); box-shadow: 0 1px 3px rgba(20,40,35,.06); padding: 12px 16px; min-height: 44px; cursor: pointer; }
  #page-stock_vehiculos .sv-vc--vn { border-left-color: var(--sv-vn); }
  #page-stock_vehiculos .sv-vc--dual { border-left-color: var(--text-3, #94a39f); }
  #page-stock_vehiculos .sv-vc__t { display: flex; align-items: flex-start; gap: 12px; }
  #page-stock_vehiculos .sv-vc__i { flex: 1; min-width: 0; }
  #page-stock_vehiculos .sv-vc__h { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-stock_vehiculos .sv-vc__h em { font-style: normal; font-weight: 600; color: var(--text-2, #586663); }
  #page-stock_vehiculos .sv-vc__c { font-size: 12.5px; color: var(--text-3, #94a39f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  #page-stock_vehiculos .sv-vc__d { flex-shrink: 0; text-align: right; }
  #page-stock_vehiculos .sv-vc__dv { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; line-height: 1.05; }
  #page-stock_vehiculos .sv-vc__dv--w { color: var(--warn, #c5870f); }
  #page-stock_vehiculos .sv-vc__dv--x { color: var(--neg, #e0533c); }
  #page-stock_vehiculos .sv-vc__dl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3, #94a39f); margin-top: 1px; }
  #page-stock_vehiculos .sv-vc__m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
  #page-stock_vehiculos .sv-vc__mi { font-size: 11.5px; color: var(--text-2, #586663); font-variant-numeric: tabular-nums; }

  /* la ficha sube desde abajo; la lista conserva filtros y posición debajo */
  #page-stock_vehiculos .sv-scrim { inset: 0; }
  #page-stock_vehiculos .sv-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-left: 0; border-radius: 22px 22px 0 0; max-height: 92%; transform: translateY(102%); box-shadow: 0 -12px 40px rgba(0,0,0,.18); }
  #page-stock_vehiculos.sv-panel-on .sv-panel { transform: none; }
  #page-stock_vehiculos .sv-panel::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 3px; background: var(--border-strong, #d2dbd9); margin: 9px auto 2px; flex-shrink: 0; }
  #page-stock_vehiculos .sv-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 172; background: var(--surface, #fff); border-radius: 22px 22px 0 0; max-height: 88%; display: flex; flex-direction: column; transform: translateY(102%); transition: transform .24s cubic-bezier(.2,.7,.3,1); box-shadow: 0 -12px 40px rgba(0,0,0,.18); }
  #page-stock_vehiculos.sv-hoja-on .sv-hoja { transform: none; }
  #page-stock_vehiculos.sv-hoja-on .sv-scrim { opacity: 1; pointer-events: auto; }
  #page-stock_vehiculos .sv-hoja__h { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border, #e7eceb); }
  #page-stock_vehiculos .sv-hoja__h h2 { font-size: 16px; font-weight: 700; flex: 1; margin: 0; }
  /* HOLGURA DEL DOCK. El dock del shell es `position:fixed` y ocupa 8px + 64px + el
     `safe-area-inset-bottom` del aparato: 72px en un navegador de escritorio y hasta ~106px en un
     móvil con indicador de inicio. Un padding en px FIJO parece bastar en el arnés (donde el
     safe-area vale 0) y recorta el último bloque en un teléfono real — que es exactamente lo que
     pasó. Por eso la holgura se declara CON el env(), no con un número redondo. */
  #page-stock_vehiculos { --sv-dock: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #page-stock_vehiculos .sv-hoja__b { overflow-y: auto; padding: 16px; }
  #page-stock_vehiculos .sv-panel__b { padding-bottom: var(--sv-dock); }
  #page-stock_vehiculos .sv-hoja__f { display: flex; gap: 12px; padding: 14px 16px 22px; border-top: 1px solid var(--border, #e7eceb); }
  #page-stock_vehiculos .sv-hoja__f .sv-btn { flex: 1; justify-content: center; min-height: 48px; font-size: 15px; }
  #page-stock_vehiculos .sv-fg { margin-bottom: 22px; }
  #page-stock_vehiculos .sv-fg__l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #94a39f); margin-bottom: 7px; }
  #page-stock_vehiculos .sv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  #page-stock_vehiculos .sv-opt { border: 1px solid var(--border-strong, #d2dbd9); background: var(--surface, #fff); border-radius: var(--sv-radius-sm); padding: 10px 13px; font-size: 14px; font-weight: 600; color: var(--text-2, #586663); min-height: 44px; cursor: pointer; }
  #page-stock_vehiculos .sv-opt.is-on { border-color: var(--accent, #0f9b6c); background: var(--accent-weak, #e2f4ec); color: var(--accent-strong, #0a7a54); }
  #page-stock_vehiculos .sv-fg .sv-inp, #page-stock_vehiculos .sv-fg .sv-sel { width: 100%; min-height: 46px; font-size: 14px; }
  #page-stock_vehiculos .sv-fg .sv-f__c { gap: 8px; }
  #page-stock_vehiculos .sv-fg .sv-inp--dias { width: auto; flex: 1; }
  #page-stock_vehiculos .sv-pnum { font-size: 19px; }
  #page-stock_vehiculos .sv-pdays b { font-size: 27px; }
  #page-stock_vehiculos .sv-blank { padding: 56px 16px; }
  #page-stock_vehiculos .sv-blank__cta { flex-direction: column; }
}
