/* =========================================================================
   ucwrt.css - the single stylesheet for the redesigned UCWRT screens.

   Implements the token set from design_handoff_ucwrt_overhaul/README.md.
   Colours follow the Audi CI palette (see CI-AUDI.md): brand red, black,
   (hue 85) and the four aging buckets share one lightness/chroma family so
   they read as a single scale. Do not substitute hex approximations - the
   warmth is the point.

   Sections
     1. Tokens
     2. Reset and base
     3. App frame, app bar, nav tabs
     4. Buttons, chips, badges
     5. Page header and filter bar
     6. Data table, expanded row, footer
     7. Empty and loading states
     8. Responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 1 ----- */
/* ===================================================================
   Audi Type (fuente variable) — CI-AUDI.md secciones 2 y 8.

   EL ARCHIVO NO ESTA EN ESTE REPOSITORIO Y NO DEBE ESTARLO. Audi Type es
   licencia exclusiva de AUDI AG; se descarga del portal y se sube al
   servidor. Esta declaracion ya lo espera: en cuanto el .woff2 exista en
   tipografia/, la interfaz cambia sola. Mientras no este, Verdana ES la
   CI -- es la unica sustituta que la guia nombra -- y todo se ve
   correcto igualmente.

   Para instalarla:
     1. Bajar "Audi Type Variable" del portal (Basics > Typography),
        aceptando las condiciones de uso que vienen en el paquete.
     2. Subir el subconjunto latino a audmex.com/tipografia/ con el nombre
        audi-type-var-lat.woff2  (el latino basta para espanol; el archivo
        completo solo hace falta con griego o cirilico).
     3. Nada mas: el rompe-cache de la hoja se calcula solo.

   Los rangos son los ejes reales de la fuente (tabla fvar): wght 400-700
   y wdth 100-130. Declararlos como RANGO, no como valor fijo, es lo que
   permite que font-stretch: 105% (Wide) y 130% (Extended) funcionen.

   Comprobar que cargo:  document.fonts.check('bold 16px "Audi Type"')
   Si devuelve false, font-stretch no hace nada y nadie lo nota, porque
   Verdana no tiene eje de ancho.
   =================================================================== */
@font-face {
  font-family: 'Audi Type';
  src: url('tipografia/audi-type-var-lat.woff2') format('woff2-variations'),
       url('tipografia/audi-type-var-lat.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 100% 130%;
  font-display: swap;
}

:root {
  /* ===================================================================
     Identidad Corporativa Audi. Valores oficiales de styleguide.audi.com
     (ver CI-AUDI.md). Los nombres de token se conservan para no tocar
     1,800 lineas de reglas; lo que cambia es a que color apuntan.
     =================================================================== */

  /* ---- Marca. A TONO PLENO: nunca aclarados ni transparentes. ---- */
  --audi-rojo:   #f50537;   /* Progressive Red */
  --audi-negro:  #000000;
  --audi-blanco: #ffffff;

  /* ---- Grises funcionales: los once oficiales, ni uno mas ---- */
  --doc-bg:          #f2f2f2;
  --bg:              #f2f2f2;
  --surface:         #ffffff;
  --surface-2:       #f2f2f2;
  --surface-3:       #e5e5e5;
  --ink:             #000000;
  --ink-strong:      #000000;
  --ink-2:           #1a1a1a;
  --ink-3:           #333333;
  --ink-4:           #4c4c4c;
  --ink-5:           #666666;
  --ink-6:           #666666;
  /* Era #808080. Da 3.95:1 sobre blanco, por debajo del 4.5 que pide AA para
     texto normal, y este token NO se usa solo en adornos: viste el guion de
     "sin dato" (.u-dash), el marcador de posicion del buscador, la fecha de
     10px del 360, el numero de rango del cross-red y las etiquetas de 9px de
     la grafica. Casi todo texto, casi todo chico.
     #666666 da 5.74 sobre blanco y 5.13 sobre la superficie gris. Se elige
     ese y no un gris intermedio mas claro porque CI-AUDI.md es tajante: los
     grises funcionales son "exactamente estos once", y #767676 -- que habria
     bastado con 4.54 -- no es uno de ellos. */
  --ink-faint:       #666666;
  --ink-ghost:       #b3b3b3;
  --border:          #e5e5e5;
  --border-strong:   #d9d9d9;
  --border-input:    #cccccc;
  --hairline:        #f2f2f2;
  --hairline-2:      #e5e5e5;
  --hairline-3:      #f2f2f2;
  --chip-bg:         #f2f2f2;
  --chip-ink:        #4c4c4c;

  /* ---- Acento = Progressive Red.
     Los *-tint eran ROJOS ACLARADOS, que la guia prohibe expresamente
     ("no se aclaran, no se oscurecen, no se ponen transparentes"). Pasan
     a blanco y grises: el rojo aparece a tono pleno o no aparece.
     Y el texto va en negro, porque la tipografia se usa solo en negro o
     blanco (los grises se permiten por razones funcionales); el rojo
     queda para rellenos, filetes e indicadores. ---- */
  --accent:              #f50537;
  --accent-border:       #f50537;
  --accent-ink:          #000000;
  --accent-nav:          #000000;
  --accent-tint:         #ffffff;
  --accent-tint-2:       #f2f2f2;
  --accent-tint-border:  #e5e5e5;
  --accent-tint-border-2:#cccccc;
  --accent-avatar-bg:    #f50537;
  --accent-avatar-ink:   #ffffff;
  --accent-hover:        #000000;

  /* ---- Antiguedad. Era verde -> ambar -> naranja -> rojo, en BLOQUES.
     El verde y el amarillo no pueden ir en bloque (solo en tipografia e
     iconos); el rojo si. Asi que la severidad la marca ahora la
     oscuridad del gris, y el rojo se reserva para el tramo peor: se lee
     igual de bien y cumple. ---- */
  --age-30:      #cccccc;
  --age-60:      #999999;
  --age-60-bg:   #ffffff;
  --age-60-ink:  #4c4c4c;
  --age-90:      #666666;
  --age-90-bg:   #ffffff;
  --age-90-ink:  #333333;
  --age-91:      #f50537;
  --age-91-bg:   #ffffff;
  --age-91-ink:  #eb0d3f;
  --age-sf:      #e5e5e5;
  --age-sf-bg:   #f2f2f2;
  --age-sf-ink:  #666666;

  /* ---- Peligro. El rojo SI admite bloque, asi que el aviso urgente se
     queda en bloque rojo con texto blanco. Los fondos "tintados" pasan a
     blanco con filete rojo, que es el patron que la guia usa para lo que
     no puede llevar bloque. Para texto se usa el rojo de senal. ---- */
  --danger:               #f50537;
  --danger-ink:           #eb0d3f;
  --danger-ink-2:         #eb0d3f;
  --danger-ink-3:         #eb0d3f;
  --danger-badge-bg:      #ffffff;
  --danger-panel-bg:      #ffffff;
  --danger-panel-bg-2:    #ffffff;
  --danger-panel-border:  #f50537;
  --danger-panel-border-2:#f50537;
  --danger-input-border:  #f50537;
  --danger-button-border: #f50537;
  --danger-nav-badge:     #f50537;
  --danger-body:          #333333;

  /* ---- Ambar. #ffaa00 sobre blanco da un contraste de ~1.9:1, ilegible.
     Se usa como INDICADOR (filete, punto), que es justo lo que la guia
     permite ("solo en tipografia e iconos"), y el texto va en gris
     oscuro para que se pueda leer. ---- */
  --warn-bg:     #ffffff;
  --warn-ink:    #333333;
  --warn-signal: #ffaa00;

  /* ---- Senal ---- */
  --ok-signal:   #0da20d;
  --bad-signal:  #eb0d3f;

  /* ---- Tipografia.
     Audi Type es exclusiva de AUDI AG y no se versiona aqui; mientras no
     esten los archivos en el servidor, Verdana ES la CI (es la unica
     sustituta que la guia nombra). Los anchos con nombre salen de la
     tabla fvar de la fuente variable: Wide = 105, Extended = 130.
     El monoespaciado se conserva SOLO para datos donde importa
     distinguir 0/O y 1/I (chasis, importes en tabla): es una decision
     funcional, no una alteracion de la tipografia de marca. ---- */
  --sans: 'Audi Type', Verdana, Geneva, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas,
          'Courier New', monospace;
  --ancho-normal:   100%;
  --ancho-wide:     105%;
  --ancho-extended: 130%;

  /* Sombras en negro puro: no son color de marca, y la guia pide una
     sombra suave y sutil en la cabecera fija. */
  --shadow-frame: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-field: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---------------------------------------------------------------- 2 ----- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--doc-bg);
  color: var(--ink);
  font: 400 13px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Enlaces. La tipografia se usa solo en negro o blanco (grises permitidos
   por razones funcionales), asi que un enlace NO se distingue por color:
   se distingue por subrayado. El rojo queda para rellenos, filetes e
   indicadores, y para la accion principal, que va en bloque rojo con texto
   blanco (.btn--primary). */
a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #000000; text-decoration-thickness: 2px; }
.btn, .nav__tab, .adminbar__tab, .az, .agekey, .shortcut, /* ===================================================================
   Los Anillos.

   NO se dibujan aqui ni en ninguna parte de este repositorio: se toma el
   SVG OFICIAL del portal (Basics > Rings) y se sube a marca/. Reconstruir
   el logo seria peor que no ponerlo (CI-AUDI.md seccion 8).

   AREA DE PROTECCION. La barra mide 52px. Con los anillos a 20px y un
   aire de media altura (10px por lado) el conjunto ocupa 40px y entra con
   12px de holgura.

   PENDIENTE DE VERIFICAR contra Basics > Rings: si el aire tuviera que ser
   de UNA ALTURA COMPLETA, harian falta 60px y no caben en 52. La salida
   NO es quitar los anillos -- ya se decidio que se usan -- sino subir
   --appbar-alto a 60px: la barra crece 8px y el area se respeta. Por eso
   los tres numeros son variables y la altura de la barra sale de una de
   ellas: ajustar la guia es cambiar un valor, no rehacer el encabezado.

   El minimo de tamano tambien esta por confirmar; si 20px queda por
   debajo, subir --anillos-alto y, con el, la barra.
   =================================================================== */
:root {
  --anillos-alto: 20px;
  --anillos-aire: 10px;   /* media altura; subir a 20px si la guia lo pide */
  /* La barra debe poder contener anillos + aire arriba y abajo. Se toma el
     mayor entre los 52px del diseno y lo que exija el area de proteccion,
     asi la barra crece sola si se sube el aire. */
  --appbar-alto: max(52px, calc(var(--anillos-alto) + var(--anillos-aire) * 2));
}
.appbar__anillos {
  display: block;
  height: var(--anillos-alto);
  width: auto;
  flex: none;
  /* El aire es parte del logo, no separacion decorativa: va a los cuatro
     lados. El de la derecha separa ademas del titular. */
  margin: var(--anillos-aire);
  margin-left: 0;
}

.appbar__brand {
  text-decoration: none;
}



/* The legacy CSS removed focus rings outright. Every interactive element
   gets a visible one back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 0;
}

/* Saltar al contenido. Fuera de la pantalla hasta que recibe el foco -- no se
   usa display:none ni visibility:hidden a proposito: eso lo sacaria del orden
   de tabulacion y el enlace dejaria de existir para quien lo necesita.
   Al enfocarse baja a la esquina y se ve como cualquier boton primario. */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 18px;
  font: 600 14px/1 var(--sans);
  text-decoration: none;
}
.skiplink:focus {
  left: 8px;
  top: 8px;
}
/* El ancla de destino no debe dibujar nada: solo recibe el foco. */
#contenido:focus { outline: none; }

.u-mono { font-family: var(--mono); }
.u-eyebrow {
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
}
.u-dash { color: var(--ink-faint); }
.u-right { text-align: right; }
.u-num { font: 400 12px/1 var(--mono); }

/* ---------------------------------------------------------------- 3 ----- */
.frame {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-frame);
  margin: 0 auto;
  max-width: 1180px;
  overflow: hidden;
}

.appbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--appbar-alto, 52px);
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
}
/* Es un <a> hacia el tablero, pero debe verse exactamente como el texto que
   el diseno especifica: sin subrayado y sin color de enlace. */
.appbar__brand { font: 600 15px/1 var(--sans); color: var(--ink-strong);
                 text-decoration: none; }
.appbar__brand:hover { color: var(--accent-nav); }
.appbar__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
.appbar__rule  { width: 1px; height: 20px; background: var(--border); }
/* Discreto a proposito: se usa una vez al dia y no compite con Alta de
   unidad ni con Exportar. Visible, no llamativo. */
.appbar__salir { margin-left: 4px; padding: 4px 8px; border-radius: 0;
                 font: 500 12px/1 var(--sans); color: var(--ink-5);
                 text-decoration: none; }
.appbar__salir:hover { background: var(--surface-3); color: var(--ink-2); }

.dealer-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.dealer-switch:hover { background: var(--surface-3); color: var(--ink); }
.dealer-switch__code { font: 400 12px/1 var(--mono); color: var(--ink-5); }
.dealer-switch__caret { font-size: 9px; color: var(--ink-5); }

.appbar__search { flex: 1; display: flex; justify-content: center; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 340px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-input);
  border-radius: 0;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.search:focus-within,
.search--active {
  background: var(--surface);
  border-color: var(--accent-tint-border-2);
}
.search__glyph { color: var(--ink-faint); font-size: 14px; line-height: 1; }
.search:focus-within .search__glyph,
.search--active .search__glyph { color: var(--accent); }
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 400 13px/1 var(--sans);
  color: var(--ink);
}
.search__input::placeholder { color: var(--ink-faint); }
.search__input--value { font-family: var(--mono); }
.kbd {
  padding: 2px 5px;
  background: var(--chip-bg);
  border-radius: 0;
  font: 500 10px/1 var(--mono);
  color: var(--chip-ink);
}

.appbar__user { display: flex; align-items: center; gap: 9px; }
.appbar__username { font: 400 13px/1 var(--sans); color: var(--ink-3); }
.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: var(--accent-avatar-bg);
  color: var(--accent-avatar-ink);
  font: 600 11px/1 var(--sans);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
}
.nav__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  font: 400 13px/1 var(--sans);
  color: var(--ink-3);
  transition: color 150ms ease-out;
}
.nav__tab:hover { color: var(--ink); }
.nav__tab--on {
  font-weight: 600;
  color: var(--accent-nav);
  /* inset shadow, not a border - keeps every tab the same height */
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Filete de la ranura de Administracion (cuarta ola, item 1). Copia de
   .appbar__rule con aire a los lados: separa la pestana de administracion
   de los botones de accion sin meter otro color. */
.nav__rule { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.nav__badge {
  padding: 1px 5px;
  border-radius: 0;
  background: var(--danger-nav-badge);
  color: #fff;
  font: 600 10px/1.4 var(--mono);
}
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.shell { padding: 24px; }

/* ---------------------------------------------------------------- 4 ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent-border);
  color: #fff;
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--sm { padding: 7px 11px; }
.btn[disabled], .btn--disabled {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--ink-5);
  cursor: not-allowed;
}

.chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 0;
  background: var(--chip-bg);
  color: var(--chip-ink);
  font: 500 10px/1.4 var(--mono);
  white-space: nowrap;
}
.chip--apartado { background: var(--age-90-bg); color: var(--age-90-ink); }
.chip--sf       { background: var(--age-sf-bg);  color: var(--age-sf-ink); }
/* DUP y TRAS: la unidad no esta en piso. Se usa el gris de "sin fecha" a
   proposito -- son filas cerradas, no alertas: nadie tiene que actuar. */
.chip--dup      { background: var(--age-sf-bg);  color: var(--age-sf-ink); }
.chip--warn     { background: var(--warn-bg);    color: var(--warn-ink); }
.chip--danger   { background: var(--danger-badge-bg); color: var(--danger-ink); }

/* Aging day badge. One class per bucket, same geometry. */
.days {
  display: inline-block;
  min-width: 34px;
  padding: 2px 6px;
  border-radius: 0;
  text-align: center;
  font: 600 12px/1.4 var(--mono);
}
.days--30 { background: #f2f2f2; color: #4c4c4c; }
.days--60 { background: var(--age-60-bg); color: var(--age-60-ink); }
.days--90 { background: var(--age-90-bg); color: var(--age-90-ink); }
.days--91 { background: var(--age-91-bg); color: var(--age-91-ink); }
.days--sf { background: var(--age-sf-bg); color: var(--age-sf-ink); }

/* The 4px rounded rail in the Unidad cell, coloured by bucket. */
.rail {
  flex: none;
  width: 4px;
  height: 26px;
  border-radius: 0;
  background: var(--age-sf);
}
.rail--30 { background: var(--age-30); }
.rail--60 { background: var(--age-60); }
.rail--90 { background: var(--age-90); }
.rail--91 { background: var(--age-91); }
.rail--sf { background: var(--age-sf); }

/* ---------------------------------------------------------------- 5 ----- */
.page-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 14px;
}
.page-head h1 {
  margin: 0;
  font: 600 21px/1.15 var(--sans);
  color: var(--ink-strong);
}
.page-head__meta { font: 400 13px/1 var(--mono); color: var(--ink-5); }

.filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 16px;
}
.filterbar__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.segmented {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-left: 1px solid var(--hairline-3);
  color: var(--ink-3);
  font: 400 12px/1 var(--sans);
  white-space: nowrap;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.segmented__item:first-child { border-left: 0; }
.segmented__item:hover { background: var(--bg); color: var(--ink); }
.segmented__item--on {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.segmented__item--on:hover { background: var(--ink); color: #fff; }
.segmented__count { font: 400 11px/1 var(--mono); color: var(--ink-5); }
.segmented__item--on .segmented__count { color: #fff; opacity: 0.75; }
.segmented__swatch {
  width: 7px;
  height: 7px;
  border-radius: 0;
  flex: none;
}

select.filter-select {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}

/* ---------------------------------------------------------------- 6 ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
  white-space: nowrap;
}
.tbl th:first-child { padding-left: 16px; }
.tbl th:last-child  { padding-right: 16px; }
.tbl th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tbl th a:hover { color: var(--ink-2); }
.tbl__sort { color: var(--accent); font-size: 9px; }

.tbl td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--hairline);
  font: 400 12px/1 var(--sans);
  color: var(--ink-2);
  vertical-align: middle;
}
.tbl td:first-child { padding-left: 16px; }
.tbl td:last-child  { padding-right: 16px; }

.row { cursor: pointer; transition: background 150ms ease-out; }
.row:hover { background: var(--bg); }
.row--flagged { background: var(--danger-panel-bg-2); }
.row--open { background: var(--bg); }

.unit { display: flex; align-items: center; gap: 10px; }
.unit__name { font: 600 13px/1.25 var(--sans); color: var(--ink-strong); }
.unit__sub  { font: 400 11px/1.3 var(--sans); color: var(--ink-5); }

.vin { font: 400 12px/1 var(--mono); }

/* Expanded row */
.xrow > td {
  padding: 0 16px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.xrow[hidden] { display: none; }
.xpanel { display: flex; gap: 24px; align-items: flex-start; }
.xgrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
}
.xgrid__label {
  font: 500 10px/1 var(--mono);
  color: var(--ink-6);
  margin-bottom: 5px;
}
.xgrid__value { font: 400 12px/1.3 var(--sans); color: var(--ink); }
.xgrid__comment { grid-column: 1 / -1; }
.xcomment {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  font: 400 12px/1.5 var(--sans);
  color: var(--ink-2);
}
.xside { width: 250px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.xside .btn { justify-content: center; }

.warnpanel {
  padding: 10px 12px;
  background: var(--danger-panel-bg);
  border: 1px solid var(--danger-panel-border);
  border-radius: 0;
  margin-bottom: 4px;
}
.warnpanel__title {
  font: 600 12px/1 var(--sans);
  color: var(--danger-ink);
  margin-bottom: 6px;
}
.warnpanel__body { font: 400 11px/1.45 var(--sans); color: var(--danger-body); }

.tblfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface-2);
  font: 400 12px/1 var(--mono);
  color: var(--ink-4);
}
.tblfoot__right { margin-left: auto; }

/* ---------------------------------------------------------------- 7 ----- */
.empty { padding: 40px 16px; text-align: center; }
.empty__msg { font: 400 13px/1.5 var(--sans); color: var(--ink-3); }

.note {
  margin-top: 12px;
  font: 400 11px/1.5 var(--sans);
  color: var(--ink-5);
}

.skel {
  height: 12px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--hairline) 25%,
              var(--hairline-3) 37%, var(--hairline) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s ease-out infinite;
}
@keyframes skel { from { background-position: 100% 50%; }
                  to   { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- 9 -----
   Dashboard (screen 1a)
   ------------------------------------------------------------------------ */
.split { display: flex; gap: 24px; align-items: flex-start; }
.split__main { width: 720px; flex: none; display: flex; flex-direction: column; gap: 18px; }
.split__rail { width: 380px; flex: none; display: flex; flex-direction: column; gap: 12px; }

.dashhead { display: flex; align-items: baseline; gap: 12px; }
.dashhead h1 {
  margin: 0;
  font: 600 21px/1.15 var(--sans);
  color: var(--ink-strong);
}
.dashhead__stamp { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-6); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.kpi__label {
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
}
.kpi__value {
  margin-top: 8px;
  font: 600 28px/1 var(--sans);
  color: var(--ink-strong);
}
.kpi__unit { font-size: 16px; color: var(--ink-4); }
.kpi--good .kpi__value { color: var(--accent-ink); }

.agecard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.agecard__head { display: flex; align-items: baseline; }
.agecard__title { font: 600 15px/1 var(--sans); color: var(--ink-strong); }
.agecard__avg { margin-left: auto; font: 400 13px/1 var(--sans); color: var(--ink-3); }
.agecard__avg b { font: 600 15px/1 var(--sans); color: var(--danger-ink-3); }

.agebar {
  display: flex;
  gap: 1px;
  height: 36px;
  border-radius: 0;
  overflow: hidden;
}
.agebar__seg {
  display: flex;
  align-items: center;
  min-width: 2px;
  color: #fff;
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
  overflow: hidden;
}
.agebar__seg span { padding-left: 12px; }
.agebar__seg--30 { background: var(--age-30); }
.agebar__seg--60 { background: var(--age-60); }
.agebar__seg--90 { background: var(--age-90); }
.agebar__seg--91 { background: var(--age-91); }
.agebar__seg--sf { background: var(--age-sf); }

.agekeys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.agekey { padding-top: 7px; border-top: 2px solid var(--age-sf); }
.agekey--30 { border-top-color: var(--age-30); }
.agekey--60 { border-top-color: var(--age-60); }
.agekey--90 { border-top-color: var(--age-90); }
.agekey--91 { border-top-color: var(--age-91); }
.agekey--sf { border-top-color: var(--age-sf); }
.agekey__label { font: 400 11px/1.2 var(--sans); color: var(--ink-3); }
.agekey__count { margin-top: 3px; font: 600 16px/1 var(--sans); color: var(--ink-strong); }
a.agekey:hover .agekey__count { color: var(--accent); }

.cardhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.cardhead__title { font: 600 15px/1 var(--sans); color: var(--ink-strong); }
.cardhead__link { margin-left: auto; font: 500 12px/1 var(--sans); }

/* Compact tables: por marca, modelos con mas dias */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tbl--compact th, .tbl--compact td { padding: 9px 14px; }
.tbl--compact th:first-child, .tbl--compact td:first-child { padding-left: 14px; }
.tbl--compact th:last-child,  .tbl--compact td:last-child  { padding-right: 14px; }

.track {
  display: inline-block;
  width: 54px;
  height: 5px;
  border-radius: 0;
  background: var(--chip-bg);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 7px;
}
.track__fill { display: block; height: 100%; border-radius: 0; background: var(--age-sf); }
.track__fill--30 { background: var(--age-30); }
.track__fill--60 { background: var(--age-60); }
.track__fill--90 { background: var(--age-90); }
.track__fill--91 { background: var(--age-91); }

/* Rail: cierre de mes */
.closecard { border-color: var(--accent-tint-border); }
.closecard__head {
  padding: 14px 16px;
  background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-tint-border);
}
.closecard__title {
  margin-top: 4px;
  font: 600 18px/1.1 var(--sans);
  color: var(--ink-strong);
}
.closecard__sub { margin-top: 6px; font: 400 12px/1.4 var(--sans); color: var(--ink-3); }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
}
.check--pending { background: var(--danger-panel-bg-2); }
.check__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.check__mark--pending {
  background: none;
  border: 2px solid var(--danger-nav-badge);
}
.check__label { font: 500 13px/1.3 var(--sans); color: var(--ink); }
.check__right { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-4); }
.check__fix { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--danger-ink-2); }
.check__fix:hover { color: var(--danger-ink); }

.closecard__foot { padding: 14px 16px; }
.closecard__foot .btn { width: 100%; justify-content: center; }
.closecard__note {
  margin-top: 8px;
  text-align: center;
  font: 400 11px/1.4 var(--sans);
  color: var(--ink-5);
}

/* Rail: vendidos */
.soldcard { padding: 16px; }
.soldcard__top { display: flex; align-items: flex-start; }
.soldcard__big { font: 600 30px/1 var(--sans); color: var(--ink-strong); }
.soldcard__cap { margin-top: 6px; font: 400 12px/1 var(--sans); color: var(--ink-4); }
.soldcard__money { margin-left: auto; text-align: right; }
.soldcard__money b { font: 600 18px/1 var(--sans); color: var(--accent-ink); }

.chanrow {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
  font: 400 12px/1 var(--sans);
  color: var(--ink-2);
}
.chanrow b { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--ink); }

/* Rail: atajos */
.shortcut {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--hairline);
  font: 400 13px/1 var(--sans);
  color: var(--ink-2);
}
.shortcut:last-child { border-bottom: 0; }
.shortcut .kbd { margin-left: auto; }

/* The quarantine chip and note: visibly set apart from the age ranges,
   because they are what the age ranges exclude. */
.segmented__item--dup {
  border-left: 1px solid var(--border);
  color: var(--ink-4);
  font-style: italic;
}
.segmented__item--dup.segmented__item--on { font-style: normal; }

.agenote {
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  font: 400 11px/1.45 var(--sans);
  color: var(--ink-4);
}
.agenote b { color: var(--ink-2); }

/* --------------------------------------------------------------- 10 -----
   Clientes (screen 1e)
   ------------------------------------------------------------------------ */
.search--wide { width: 380px; }
.search--wide .search__input { font-size: 14px; }
.search__count {
  flex: none;
  font: 400 11px/1 var(--mono);
  color: var(--ink-5);
}

/* The A-Z strip. Generated from range('A','Z') - the list it replaces was
   hand-written and omitted W. */
.azstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 0 0 16px;
}
.az {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 4px 6px;
  border-radius: 0;
  font: 500 12px/1 var(--mono);
  color: var(--ink-3);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.az:hover { background: var(--surface-3); color: var(--ink); }
.az--on { background: var(--ink); color: #fff; }
.az--on:hover { background: var(--ink); color: #fff; }
/* An initial with no clients stays clickable but reads as empty, instead of
   being a dead option that returns a blank table. */
.az--empty { color: var(--ink-ghost); }
.az--empty:hover { background: var(--surface-2); color: var(--ink-5); }

/* Two-line cells (phone over email, street over city). */
.stack { font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
.stack--dim { color: var(--ink-4); }

.tbl--roomy td { padding: 12px; }
.tbl--roomy td:first-child { padding-left: 16px; }
.tbl--roomy td:last-child  { padding-right: 16px; }

/* --------------------------------------------------------------- 11 -----
   Buscar chasis (screen 1d)
   ------------------------------------------------------------------------ */
.findshell { padding: 48px 24px 24px; }
.findcol {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bigsearch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: var(--shadow-field);
}
.bigsearch:focus-within { border-color: var(--accent); }
.bigsearch__glyph { font-size: 16px; line-height: 1; color: var(--accent); }
.bigsearch__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 500 19px/1.2 var(--mono);
  color: var(--ink);
}
.bigsearch__input::placeholder {
  color: var(--ink-ghost);
  text-transform: none;
}
.bigsearch__count { flex: none; font: 400 12px/1 var(--mono); color: var(--ink-5); }
.bigsearch__count--ok { color: var(--accent-ink); }

.bigsearch__help {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
  font: 400 12px/1.4 var(--sans);
  color: var(--ink-5);
}
.bigsearch__help .kbd { margin-left: auto; }

.rescard__strip {
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
}
.rescard__none {
  padding: 16px;
  background: #f2f2f2;
  font: 400 12px/1.5 var(--sans);
  color: var(--ink-4);
}
.rescard__body {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--hairline);
}
.rescard__body:last-child { border-bottom: 0; }
.rail--stretch { height: auto; align-self: stretch; }
.rescard__main { flex: 1; min-width: 0; }
.rescard__name { font: 600 16px/1.2 var(--sans); color: var(--ink-strong); }
.rescard__spec { margin-top: 4px; font: 400 13px/1.3 var(--sans); color: var(--ink-4); }
.rescard__vin { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

.metrics { display: flex; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.metrics__label {
  font: 500 10px/1 var(--mono);
  color: var(--ink-6);
}
.metrics__value { margin-top: 5px; font: 400 15px/1.2 var(--mono); color: var(--ink); }
.metrics__value--alert { color: var(--danger-ink-3); font-weight: 500; }

.rescard__parties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
  font: 400 12px/1.4 var(--sans);
  color: var(--ink-4);
}
.rescard__parties b { font-weight: 500; color: var(--ink-2); }

.rescard__actions {
  width: 150px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rescard__actions .btn { justify-content: center; }
.rescard__dealer { font-size: 11px; color: var(--ink-6); text-align: center; }

.recents__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vinchip {
  display: inline-block;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  font: 400 12px/1.3 var(--mono);
  color: var(--ink-2);
}
.vinchip:hover { border-color: var(--accent-tint-border-2); color: var(--accent); }

/* --------------------------------------------------------------- 12 -----
   Acceso (screen 1g)

   Two panels in a flex row. The legacy page positioned the title and the
   form independently with calc(50% - 255px) / calc(50% - 50px), so they
   overlapped at common widths. Flex cannot do that.
   ------------------------------------------------------------------------ */
.loginframe {
  display: flex;
  align-items: stretch;
  max-width: 1180px;
  min-height: 520px;
  margin: 48px auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}

.loginpanel {
  width: 520px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 56px 56px 32px;
  border-right: 1px solid #e5e5e5;
}
.loginpanel__title {
  margin: 10px 0 0;
  font: 600 30px/1.1 var(--sans);
  color: var(--ink-strong);
}
.loginpanel__sub {
  margin: 10px 0 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-3);
}
.loginpanel__foot {
  margin: 24px 0 0;
  font: 400 11px/1.4 var(--sans);
  color: var(--ink-5);
}

.loginform { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; }
.field__label { font: 500 12px/1 var(--sans); color: var(--ink-3); margin-bottom: 6px; }

/* The aside sits in the label row visually but comes AFTER the input in the
   DOM, so it does not land between two fields in the tab sequence. */
.field--aside { position: relative; }
.field__aside {
  position: absolute;
  /* El area de toque llega a 24px de alto sin mover el texto: el relleno se
     compensa con el desplazamiento hacia arriba. Medía 52x12, y WCAG 2.2
     (2.5.8) pide 24x24. Al estar posicionado no es un enlace "en linea", asi
     que la excepcion de texto corrido no lo cubre. */
  top: -6px;
  right: 0;
  padding: 6px 0 6px 8px;
  font: 400 12px/1 var(--sans);
}
.field__control {
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: 0;
  font: 400 14px/1.2 var(--sans);
  color: var(--ink);
}
.field__control:focus { border-color: var(--accent-tint-border-2); }
.field__control--mono { font-family: var(--mono); }
.field__control--bad { border-color: var(--danger-input-border); }
.field__error {
  margin: 7px 0 0;
  font: 400 11px/1.4 var(--sans);
  color: var(--danger-ink-2);
}

.loginnote {
  padding: 10px 12px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-border);
  border-radius: 0;
  font: 400 12px/1.45 var(--sans);
  color: var(--ink-2);
}

.btn--block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }

.loginart {
  flex: 1;
  min-width: 0;
  padding: 40px;
  background: #f2f2f2;
}
.loginart__ph {
  position: relative;
  height: 100%;
  min-height: 360px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: repeating-linear-gradient(135deg,
      #f2f2f2 0 10px,
      #e5e5e5 10px 20px);
}
.loginart__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;      /* recorta, no deforma: la foto no se estira */
  border: 1px solid var(--border-strong);
  border-radius: 0;
}
.loginart__cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
}

/* --------------------------------------------------------------- 13 -----
   Alta y edicion de unidad (screen 1c)
   ------------------------------------------------------------------------ */
.ctxbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
}
.ctxbar__back { font: 500 13px/1 var(--sans); }
.ctxbar__rule { width: 1px; height: 18px; background: var(--border); }
.ctxbar__title { font: 600 15px/1 var(--sans); color: var(--ink-strong); }
.ctxbar__vin { font-size: 13px; color: var(--ink-3); }
.ctxbar__actions { margin-left: auto; display: flex; gap: 8px; }

.split__main--wide { width: 720px; }

.cardbody { padding: 18px; }
.cardhead__gloss { font: 400 12px/1 var(--sans); color: var(--ink-5); }
.cardhead__right { margin-left: auto; }

.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fld--span2 { grid-column: span 2; }

.fld { display: flex; flex-direction: column; min-width: 0; }
.fld__label { font: 500 11px/1 var(--sans); color: var(--ink-3); margin-bottom: 6px; }
.fld__ctl {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: 0;
  font: 400 13px/1.2 var(--sans);
  color: var(--ink);
}
.fld__ctl:disabled, .fld__ctl[readonly] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
}
.fld__ctl--mono { font-family: var(--mono); }
.fld__ctl--vin {
  font: 500 16px/1.2 var(--mono);
  background: var(--surface-2);
}
.fld__area { min-height: 76px; resize: vertical; font-family: var(--sans); }
.fld__hint { margin: 5px 0 0; font: 400 11px/1.3 var(--sans); color: var(--ink-5); }
.fld__err  { margin: 5px 0 0; font: 400 11px/1.3 var(--sans); color: var(--danger-ink-2); }
.fld--bad .fld__ctl { border-color: var(--danger-input-border); }

.fld__prefixed, .fld__suffixed { display: flex; align-items: center; gap: 8px; }
.fld__prefix, .fld__suffix { flex: none; font: 400 12px/1 var(--sans); color: var(--ink-5); }

.computed {
  padding: 8px 0;
  font: 600 16px/1.2 var(--mono);
  color: var(--accent-ink);
}
.computed--neg { color: var(--danger-ink-2); }

/* Segmented radio group - the control that replaces two-option <select>s. */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.seg__item {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-left: 1px solid var(--hairline-3);
  font: 400 12px/1 var(--sans);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.seg__item:first-child { border-left: 0; }
.seg__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__item:hover { background: var(--bg); }
.seg__item--on { background: var(--ink); color: #fff; font-weight: 600; }
.seg__item--on:hover { background: var(--ink); }
.seg__item:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.vinrow { display: flex; align-items: flex-end; gap: 16px; }
.vinrow__meta { flex: none; padding-bottom: 9px; font: 400 12px/1.4 var(--sans); color: var(--ink-4); }

/* Checkbox tiles replacing four SI/NO selects. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile__box {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
}
.tile__label { font: 500 13px/1.2 var(--sans); color: var(--ink-2); }
.tile--on { background: var(--accent-tint-2); border-color: var(--accent-tint-border-2); }
.tile--on .tile__box {
  background: var(--accent);
  border-color: var(--accent-border);
  position: relative;
}
.tile--on .tile__box::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.tile:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Resolved client row, replacing a <select> of the whole client table. */
.picked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-input);
  border-radius: 0;
}
.picked__name { font: 500 13px/1.2 var(--sans); color: var(--ink); }
.picked__key { font-size: 12px; color: var(--ink-5); }
.picked__change { margin-left: auto; font: 500 12px/1 var(--sans); }

#saleblock[hidden] { display: none; }

.flash { padding: 11px 16px; border-radius: 0; font: 400 13px/1.4 var(--sans); margin-bottom: 16px; }
.flash--ok  { background: var(--accent-tint); border: 1px solid var(--accent-tint-border); color: var(--ink-2); }
.flash--bad { background: var(--danger-panel-bg); border: 1px solid var(--danger-panel-border); color: var(--danger-body); }

.lockbanner {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--danger-panel-bg);
  border: 1px solid var(--danger-panel-border);
  border-radius: 0;
  font: 400 12px/1.5 var(--sans);
  color: var(--danger-body);
}
.lockbanner b { color: var(--danger-ink); }
.lockbanner--admin {
  background: var(--accent-tint);
  border-color: var(--accent-tint-border);
  color: var(--ink-2);
}
.lockbanner--admin b { color: var(--accent-nav); }

.warncard { border-color: var(--danger-panel-border); }
.warncard__head {
  padding: 12px 16px;
  background: var(--danger-panel-bg);
  border-bottom: 1px solid var(--danger-panel-border-2);
  font: 600 13px/1 var(--sans);
  color: var(--danger-ink);
}
.warncard__row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  font: 400 12px/1.45 var(--sans);
  color: var(--danger-body);
}
.warncard__foot { padding: 10px 16px; font: 400 11px/1.4 var(--sans); color: var(--ink-5); }

/* Client picker. */
.pickmodal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.28);
}
.pickmodal[hidden] { display: none; }
.pickmodal__box {
  width: 520px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.pickmodal__head { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--hairline); }
.pickmodal__list { max-height: 320px; overflow-y: auto; }
.pickmodal__hint { margin: 0; padding: 16px; font: 400 12px/1.4 var(--sans); color: var(--ink-5); }
.pickrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.pickrow:hover { background: var(--bg); }
.pickrow__name { font: 500 13px/1.3 var(--sans); color: var(--ink); }
.pickrow__key  { margin-left: auto; font-size: 12px; color: var(--ink-5); }

/* --------------------------------------------------------------- 14 -----
   Segunda ola: centered card pages (2d Registro, 2g Sesion caducada).

   One card on the --doc-bg ground, same surface language as .loginframe
   (radius 6, --shadow-frame) but a single column: the visitor is not "in"
   the app yet (2d) or no longer is (2g).
   ------------------------------------------------------------------------ */
.cardpage {
  display: grid;
  place-items: start center;
  min-height: 100vh;
  padding: 48px 24px;
}
.cardpage__card {
  width: 560px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-frame);
  padding: 40px 44px 32px;
}
.cardpage__card--narrow { width: 460px; }
.cardpage__title {
  margin: 10px 0 0;
  font: 600 26px/1.15 var(--sans);
  color: var(--ink-strong);
}
/* Identity line: userid · dealer (code) · puesto. The user confirms they are
   who IT created before typing anything. */
.cardpage__id { margin: 8px 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink-5); }
.cardpage__body { margin: 12px 0 0; font: 400 13px/1.55 var(--sans); color: var(--ink-3); }
.cardpage__form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.cardpage__foot {
  margin: 18px 0 0;
  text-align: center;
  font: 400 11px/1.5 var(--sans);
  color: var(--ink-5);
}

/* --------------------------------------------------------------- 15 -----
   Segunda ola: app-bar user menu. The avatar+name pair becomes a button;
   the dropdown anchors under it, top-right of the app bar. Same elevation
   as .pickmodal__box on purpose - it is the same "floating surface" layer.
   ------------------------------------------------------------------------ */
.appbar { position: relative; }

.usermenu { position: relative; }
.usermenu__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  margin: -4px -6px;
  border: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
}
.usermenu__btn:hover { background: var(--surface-3); }

.usermenu__pop {
  position: absolute;
  top: 46px;
  right: 0;
  z-index: 40;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  animation: usermenu-in 200ms ease-out;
}
.usermenu__pop[hidden] { display: none; }
@keyframes usermenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.usermenu__head { padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.usermenu__name { font: 600 13px/1.3 var(--sans); color: var(--ink-strong); }
.usermenu__id   { margin-top: 3px; font: 400 11px/1.3 var(--mono); color: var(--ink-5); }

.usermenu__item {
  display: block;
  padding: 10px 14px;
  font: 400 13px/1.2 var(--sans);
  color: var(--ink);
  transition: background 150ms ease-out;
}
.usermenu__item:hover { background: var(--bg); color: var(--ink); }
.usermenu__item--salir {
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
}

.usermenu__eyebrow {
  padding: 10px 14px 4px;
  font: 500 10px/1 var(--mono);
  color: var(--ink-5);
}

/* --------------------------------------------------------------- 16 -----
   Segunda ola: dealer popover (2f). Same floating chrome as the user menu,
   anchored under the switcher, aligned to its left edge. A front end for
   lib_verdealer.php's three endpoints - the queries do not change.
   ------------------------------------------------------------------------ */
.dealerwrap { position: relative; }

/* The switcher keeps the focus ring while its popover is open. */
.dealer-switch--open { outline: 2px solid var(--accent); outline-offset: 1px; }

.dealerpop {
  position: absolute;
  top: 35px;                 /* 46px from the app bar's top edge */
  left: 0;
  z-index: 40;
  width: 400px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  animation: usermenu-in 200ms ease-out;
}
.dealerpop[hidden] { display: none; }

.dealerpop__search { padding: 10px; border-bottom: 1px solid var(--hairline); }

.dealerpop__list { max-height: 320px; overflow-y: auto; }
.dealerpop__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink);
  transition: background 150ms ease-out;
}
.dealerpop__row[hidden] { display: none; }
a.dealerpop__row:hover { background: var(--bg); color: var(--ink); }
.dealerpop__row--cur { background: var(--accent-tint); }
.dealerpop__code { flex: none; font: 400 12px/1 var(--mono); color: var(--ink-4); }
.dealerpop__name {
  flex: 1;
  min-width: 0;
  font: 400 13px/1.25 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealerpop__n { flex: none; font: 400 12px/1 var(--mono); color: var(--ink-4); }
.dealerpop__actual {
  flex: none;
  padding: 2px 6px;
  border-radius: 0;
  background: var(--accent-avatar-bg);
  color: var(--accent-avatar-ink);
  font: 600 10px/1.4 var(--mono);
}

.dealerpop__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
  font: 500 12px/1.2 var(--sans);
  color: var(--ink-2);
}
.dealerpop__restore {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  font: 500 13px/1.2 var(--sans);
}
.dealerpop__note {
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  font: 400 11px/1.45 var(--sans);
  color: var(--ink-5);
}

/* --------------------------------------------------------------- 17 -----
   Segunda ola: Mi cuenta (2c). Card footers and the read-only account rows
   in the rail.
   ------------------------------------------------------------------------ */
.cardfoot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
}
.cardfoot--note {
  justify-content: flex-start;
  background: var(--surface-2);
  font: 400 11px/1.45 var(--sans);
  color: var(--ink-5);
}

.acctrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
}
.acctrow__label {
  flex: none;
  width: 110px;
  font: 500 11px/1.2 var(--sans);
  color: var(--ink-4);
}
.acctrow__value { font: 400 13px/1.3 var(--sans); color: var(--ink); }

/* main column: the two 2c cards stack with the split's own gap */
form.card { display: flex; flex-direction: column; }

/* --------------------------------------------------------------- 18 -----
   Segunda ola: Administracion (2e). The section bar under the nav tabs and
   the users table.
   ------------------------------------------------------------------------ */
.adminbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
}
/* margin:0 porque este elemento es un <h1>: sin esto el margen por defecto
   del navegador (0.67em) empujaria toda la tira flex. Ver ui_admin.php. */
.adminbar__title { font: 600 15px/1 var(--sans); color: var(--ink-strong); margin: 0; }
.adminbar__rule { width: 1px; height: 18px; background: var(--border); }
.adminbar__tabs { display: flex; gap: 4px; }
.adminbar__tab {
  padding: 5px 10px;
  border-radius: 0;
  font: 400 12px/1 var(--sans);
  color: var(--ink-3);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.adminbar__tab:hover { background: var(--bg); color: var(--ink); }
.adminbar__tab--on { background: var(--ink); color: #fff; font-weight: 600; }
.adminbar__tab--on:hover { background: var(--ink); color: #fff; }
.adminbar__aside { margin-left: auto; font: 500 12px/1 var(--sans); }

.admform { width: 520px; max-width: 100%; }

/* --------------------------------------------------------------- 19 -----
   Segunda ola: Reportes hub (2b). Six cards over live queries.
   ------------------------------------------------------------------------ */
.repgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.repcard { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.repcard__grupo { display: block; }
.repcard__title { font: 600 15px/1.25 var(--sans); color: var(--ink-strong); }
.repcard__desc  { font: 400 12px/1.5 var(--sans); color: var(--ink-3); flex: 1; }
.repcard__cols  { font: 400 11px/1.4 var(--mono); color: var(--ink-6); }
.repcard__btns  { display: flex; gap: 8px; margin-top: 4px; }

/* --------------------------------------------------------------- 20 -----
   Segunda ola: Cierre de mes (2a).
   ------------------------------------------------------------------------ */
.blockpanel {
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--danger-panel-bg);
  border: 1px solid var(--danger-panel-border);
  border-radius: 0;
}
.blockpanel__title { font: 600 14px/1.3 var(--sans); color: var(--danger-ink); }
.blockpanel__body  { margin-top: 4px; font: 400 13px/1.4 var(--sans); color: var(--danger-body); }
.blockpanel__btns  { display: flex; gap: 8px; margin-top: 10px; }
.blockpanel__fix {
  background: var(--surface);
  border-color: var(--danger-button-border);
  color: var(--danger-ink-2);
  font-weight: 600;
}
.blockpanel__fix:hover { background: var(--danger-panel-bg-2); color: var(--danger-ink); }

/* Future months in the period strip: visible, not offered. */
.segmented__item--ghost { color: var(--ink-ghost); cursor: default; }
.segmented__item--ghost:hover { background: none; color: var(--ink-ghost); }

/* One pending row: the unit, its offending chip, and the inline fix. */
.pendrow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--danger-panel-bg-2);
}
.pendrow__what {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pendrow__fix { display: flex; align-items: center; gap: 8px; }

@media print {
  .appbar, .nav, .filterbar, .adminbar, .blockpanel__btns, .closecard__foot,
  .pendrow__fix, .cardhead__link { display: none !important; }
  .frame { border: 0; box-shadow: none; max-width: none; }
  body { background: #fff; }
  .split { flex-direction: column; }
  .split__rail { width: 100% !important; }
}

.urow__id { font: 500 12px/1 var(--mono); }
.urow__si { color: var(--accent); font-weight: 600; }
.urow--off td { color: var(--ink-5); }
.urow[hidden] { display: none; }

/* ---------------------------------------------------------------- 8 ----- */
@media (max-width: 1179px) {
  .frame { border-radius: 0; border-left: 0; border-right: 0; }

  /* EL BUSCADOR YA NO DESAPARECE.
     Antes esta regla era `.appbar__search { display: none; }`, o sea que por
     debajo de 1180px la aplicacion se quedaba SIN su unica entrada de
     busqueda -- justo en el ancho de quien anda con el telefono junto al
     auto y necesita teclear un chasis. La barra pasa a dos renglones y el
     campo ocupa el segundo, completo. Sin JavaScript: solo flex-wrap, asi
     que no hay nada que se pueda romper ni foco que administrar. */
  .appbar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 8px;
  }
  .appbar__search { order: 9; flex: 0 0 100%; justify-content: stretch; }
  .search { width: 100%; }

  /* Rail drops below the main column; KPIs go two-up. */
  .split { flex-direction: column; }
  .split__main, .split__rail { width: 100%; }
  .kpis { grid-template-columns: repeat(2, 1fr); }

  /* min-width:0 -- SIN ESTO LA PAGINA SE DESBORDA.
     Un item de grid tiene min-width:auto, o sea que no se encoge por debajo
     del ancho minimo de su contenido. "$1,106.35M" a 28px no cabe en media
     pantalla de telefono, asi que la columna crecia y empujaba el tablero de
     CRM fuera del viewport: las tarjetas de la derecha quedaban cortadas.
     Con min-width:0 el item si puede encogerse y el numero se ajusta. */
  .kpis > * { min-width: 0; }

  /* La cifra se achica; NO se parte.
     Aqui estuvo `overflow-wrap: anywhere`, que si evitaba el desborde pero
     cortando el numero a la mitad: "$377.20M" salia como "$377.2" y abajo
     "0M", y "$1,111.72M" como "$1,111." y "72M". Un numero partido en dos
     renglones se lee mal y, peor, se lee MAL: el ojo agarra "$377.2".
     Con 22px la cifra mas larga que produce el tablero cabe entera en media
     pantalla de telefono, que es lo que se queria desde el principio. */
  .kpi__value { font-size: 22px; overflow-wrap: normal; }
}

@media (max-width: 1023px) {
  .shell { padding: 16px; }
  .kbd { display: none; }

  /* LA BARRA SE ACOMODA, NO SE CORTA.
     Antes era `overflow-x: auto`: un carril que se desplaza sin decir que se
     desplaza. A 390px "Reportes" quedaba cortado a la mitad y nada indicaba
     que hubiera mas. Envolver muestra todo de una vez, que con cuatro
     pestanas cabe en dos renglones. `margin-left:auto` de .nav__actions
     sigue funcionando por renglon, asi que las acciones se siguen alineando
     a la derecha del suyo. */
  .nav { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; padding-bottom: 6px; }

  /* Las acciones bajan SIEMPRE a su propio renglon.
     Con solo envolver quedaba al azar: en el tablero, "Exportar" y "Alta de
     unidad" no cabian y bajaban solas, pero en Clientes el unico "Exportar"
     si cabia y se sentaba junto a "Administracion" -- enmarcado, pegado al
     borde de la barra y leyendose como una pestana mas. flex-basis:100% lo
     vuelve determinista: la fila de pestanas es de pestanas y nada mas. */
  .nav__actions { flex: 0 0 100%; justify-content: flex-end; margin-left: 0; }

  /* La barra de seccion tambien envuelve.
     Se me habia quedado: arregle .nav y no .adminbar__tabs, que es otra fila
     flex. En Administracion las seis sub-pestanas no caben y "Marcas" y
     "Modelos" quedaban cortadas contra el borde derecho. */
  .adminbar__tabs { flex-wrap: wrap; row-gap: 2px; }

  /* AREAS DE TOQUE.
     Las pestanas median ~35px de alto y las de seccion ~22px. 44px es el
     minimo de WCAG 2.5.8 y lo que pide un dedo. Se usa min-height y no mas
     relleno para que el alto no dependa del tamano de letra de cada control.
     .adminbar__tab es un <a> sin display, asi que min-height no le aplicaria:
     por eso tambien se le da inline-flex. */
  .nav__tab,
  .adminbar__tab,
  .btn,
  .btn--sm,
  .seg__item { min-height: 44px; }
  .adminbar__tab { display: inline-flex; align-items: center; }

  .filterbar { gap: 8px; }
  .segmented { flex-wrap: wrap; }

  /* Tablet on the lot: the table becomes a card list keeping
     Unidad, Chasis, Dias, Estatus. Tap targets stay >= 44px. */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  /* Every body row becomes a card, not just the expandable ones in 1b. */
  .tbl tbody tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
    min-height: 44px;
  }
  .tbl tbody tr.xrow { padding: 0; }
  .tbl td {
    padding: 3px 0;
    border: 0;
  }
  .tbl td:first-child, .tbl td:last-child { padding-left: 0; padding-right: 0; }
  .tbl td[data-lbl]::before {
    content: attr(data-lbl) " ";
    display: inline-block;
    min-width: 84px;
    font: 500 10px/1 var(--mono);
    color: var(--ink-6);
  }
  .tbl td.is-secondary { display: none; }
  /* Excepto el dinero. La tarjeta movil se quedaba con Unidad, Chasis, Dias y
     Alerta: sin un solo precio. En un piso de autos usados la pregunta es
     cuanto costo y en cuanto se piensa vender, asi que esconderlos deja la
     tarjeta bonita e inutil. Los kilometros no hacen falta aqui: ya van en el
     subtitulo de la unidad ("SPORT ONE - 2012 - 35,000 km"). */
  .tbl td.is-secondary[data-lbl="Compra"],
  .tbl td.is-secondary[data-lbl="Vta. est."] { display: block; }
  .xpanel { flex-direction: column; }
  .xgrid { grid-template-columns: repeat(2, 1fr); }
  .xside { width: 100%; }
  .tblfoot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tblfoot__right { margin-left: 0; }

  /* Unidad: one field per row, tap-sized controls. */
  .split__main--wide { width: 100%; }
  .grid3, .grid2, .tiles { grid-template-columns: 1fr; }
  .fld--span2 { grid-column: auto; }
  .fld__ctl { padding: 12px; font-size: 16px; }   /* 16px: no iOS zoom on focus */
  .ctxbar { padding: 10px 16px; }
  .ctxbar__actions { margin-left: 0; width: 100%; }
  .ctxbar__actions .btn { flex: 1; justify-content: center; min-height: 44px; }
  .seg { width: 100%; }
  .seg__item { flex: 1; justify-content: center; min-height: 44px; }
  .vinrow { flex-direction: column; align-items: stretch; gap: 6px; }
  .vinrow__meta { padding-bottom: 0; }
  .tile { min-height: 44px; }
  .pickmodal { padding-top: 0; place-items: stretch; }
  .pickmodal__box { width: 100%; max-width: none; height: 100%; border-radius: 0; }
  .pickmodal__list { max-height: none; }

  /* Card pages (2d/2g): full width with a 24px margin, per the handoff. */
  .cardpage { padding: 24px; place-items: start stretch; }
  .cardpage__card { width: 100%; padding: 28px 24px 24px; }

  /* User menu + dealer popover: full-screen surfaces, the .pickmodal
     pattern. */
  /* REGRESION DE LA FASE B, corregida.
     Esto decia `position: fixed; inset: 0; top: 52px`, y ese 52 era el alto
     de la barra cuando la barra media 52. La fase B la volvio de dos
     renglones en movil (height:auto), asi que el popover arrancaba a media
     barra y tapaba el buscador que la misma fase B acababa de rescatar.

     Se ancla a la barra en vez de al viewport: los dos popover viven dentro
     de <header class="appbar">, que es position:relative, asi que top:100%
     los pone justo debajo de ella midiera lo que midiera. Un numero fijo
     aqui vuelve a romperse la proxima vez que la barra cambie de alto. */
  .usermenu__pop, .dealerpop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .usermenu__item { padding: 14px 24px; min-height: 44px; }
  .usermenu__head { padding: 14px 24px; }
  .usermenu__eyebrow { padding: 14px 24px 4px; }
  .dealerpop__list { max-height: none; }
  .dealerpop__row { min-height: 44px; }

  /* Report cards stack one-up on tablet. */
  .repgrid { grid-template-columns: 1fr; }

  /* Acceso: the art panel is decoration, so it goes rather than shrink the
     form. The form panel keeps its own comfortable width. */
  .loginframe { flex-direction: column; margin: 0; min-height: 0;
                border-radius: 0; border-left: 0; border-right: 0; }
  .loginpanel { width: 100%; padding: 40px 24px 28px; border-right: 0; }
  .loginart { display: none; }
  .field__control { padding: 13px; font-size: 16px; }  /* 16px: no iOS zoom on focus */
  .btn--block { min-height: 48px; }

  /* Buscar: the action stack moves under the unit rather than beside it. */
  .findshell { padding: 24px 16px; }
  .rescard__body { flex-wrap: wrap; }
  .rescard__actions { width: 100%; flex-direction: row; }
  .rescard__actions .btn { flex: 1; min-height: 44px; }
  .rescard__dealer { display: none; }
  .metrics { gap: 16px; }
  .bigsearch__input { font-size: 16px; }

  /* Clientes: the search takes the full width, the strip keeps wrapping. */
  .search--wide { width: 100%; }
  .filterbar > form.search { flex: 1 1 100%; }
  /* Tap targets, not mouse targets. */
  .az { min-width: 44px; min-height: 44px; padding: 8px; }
  .tbl--roomy td { padding: 3px 0; }
  .tbl--roomy td:first-child, .tbl--roomy td:last-child { padding-left: 0; padding-right: 0; }

  /* Dashboard: single column throughout. */
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .duo  { grid-template-columns: 1fr; }
  .agekeys { grid-template-columns: repeat(2, 1fr); }
  .agebar__seg span { padding-left: 8px; font-size: 12px; }

  /* The compact tables keep their table layout - they are only 3 columns. */
  .tbl--compact thead { display: table-header-group; }
  .tbl--compact, .tbl--compact tbody { display: table; width: 100%; }
  .tbl--compact tr { display: table-row; padding: 0; }
  .tbl--compact td { display: table-cell; padding: 9px 14px; }
  .tbl--compact td::before { content: none; }
}

/* ---------------------------------------------------------------- 9 -----
   Cliente 360 (screen 1h) - customer detail + relationship timeline.
   ----------------------------------------------------------------------- */
.c360head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.avatar--lg {
  width: 56px; height: 56px; border-radius: 0;
  background: var(--accent-avatar-bg); color: var(--accent-avatar-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 20px/1 var(--sans); flex: none;
}
.c360head__id h1 { font-size: 22px; margin: 0 0 4px; }
.c360head__sub { margin: 0; font-size: 13px; color: var(--ink-4); display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.c360head__contact { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-5); }
.chip--net  { background: var(--accent-tint); color: var(--accent-ink);
  border: 1px solid var(--accent-tint-border); }
.chip--mine { background: var(--accent-avatar-bg); color: var(--accent-avatar-ink); }

.kpis--5 { grid-template-columns: repeat(5, 1fr); }
.c360note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-5); }

/* timeline: when | dot+rail | body | amount */
.tl { margin-top: 12px; }
.tlrow { display: grid; grid-template-columns: 84px 20px 1fr auto; align-items: start;
  column-gap: 4px; }
.tlrow__when { text-align: right; padding: 12px 8px 12px 0; }
.tlrow__yr { display: block; font: 600 15px/1 var(--sans); color: var(--ink-strong); }
.tlrow__date { display: block; margin-top: 3px; font-size: 10px; color: var(--ink-faint); }
.tlrow__dot { position: relative; }
.tlrow__dot::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -100%;
  width: 2px; transform: translateX(-50%); background: var(--hairline-2); }
.tlrow:last-child .tlrow__dot::before { bottom: 50%; }
.tlrow__dot::after { content: ""; position: absolute; left: 50%; top: 17px;
  width: 10px; height: 10px; border-radius: 0; transform: translate(-50%,-50%);
  background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.tlrow--entrega .tlrow__dot::after { background: var(--ink-ghost); box-shadow: 0 0 0 1px var(--ink-ghost); }
.tlrow__body { padding: 11px 12px; min-width: 0; }
.tlrow__title { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.tlrow__verb { font: 600 11px/1 var(--mono);  color: var(--accent-ink); }
.tlrow--entrega .tlrow__verb { color: var(--ink-5); }
.tlrow__veh { font-weight: 600; color: var(--ink-strong); text-decoration: none; }
.tlrow__veh:hover { color: var(--accent-nav); text-decoration: underline; }
.tlrow__meta { margin-top: 3px; font-size: 12px; color: var(--ink-5);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tlrow__dealer { color: var(--ink-4); }
.tlrow__amt { padding: 12px 4px; font: 500 13px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }

@media (max-width: 720px) {
  .kpis--5 { grid-template-columns: repeat(2, 1fr); }
  .tlrow { grid-template-columns: 60px 16px 1fr; }
  .tlrow__amt { grid-column: 3; padding-top: 0; text-align: left; }
}
.unit__name--link { color: var(--ink-strong); text-decoration: none; font-weight: 600; }
.unit__name--link:hover { color: var(--accent-nav); text-decoration: underline; }

/* ---------------------------------------------------------------- 10 ----
   Clientes cross-red (screen 1i) - leaderboard accents.
   ----------------------------------------------------------------------- */
.xrank { color: var(--ink-faint); font-variant-numeric: tabular-nums; width: 44px; }
.xbig  { font-weight: 700; font-size: 16px; color: var(--accent-ink); }

/* ---------------------------------------------------------------- 11 ----
   Tablero CRM (screen 1j) - sales trend, mix bars, stat lists.
   ----------------------------------------------------------------------- */
.cardhead__meta { margin-left: auto; font: 400 12px/1 var(--sans); color: var(--ink-4); }
.trend { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 10px 0 0; }
.trend__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; min-width: 0; }
.trend__bar { width: 100%; max-width: 20px; background: var(--accent); border-radius: 0; }
.trend__col:hover .trend__bar { background: var(--accent-ink); }
.trend__lbl { margin-top: 6px; font: 400 9px/1 var(--mono); color: var(--ink-faint); white-space: nowrap; }
.barrow { display: grid; grid-template-columns: 84px 1fr 46px; gap: 10px; align-items: center;
  margin-bottom: 9px; font-size: 12px; }
.barrow__lbl { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow__track { height: 6px; border-radius: 0; background: var(--hairline-2); overflow: hidden; }
.barrow__fill { display: block; height: 100%; background: var(--accent); border-radius: 0; }
.barrow__val { text-align: right; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.statlist { margin-top: 4px; }
.statrow { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0;
  border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-3); }
.statrow:first-child { border-top: none; }
.statrow b { font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.crmfact { margin-top: 10px; font: 500 13px/1.3 var(--sans); color: var(--accent-ink); }


/* ===================================================================
   ANCHOS DE AUDI TYPE — AL FINAL DEL ARCHIVO, A PROPOSITO.

   Wide = 105 y Extended = 130 (tabla fvar de la fuente variable; ver
   CI-AUDI.md seccion 2).

   Van aqui y no arriba porque el atajo `font:` REINICIA font-stretch a
   normal. Reglas como
       .btn              { font: 500 12px/1 var(--sans); }
       .loginpanel__title{ font: 600 30px/1.1 var(--sans); }
   aparecen mas abajo en la hoja y borraban el ancho sin decir nada: la
   fuente cargaba, el color estaba bien, y los titulares seguian a 100.
   Se detecto midiendo en el navegador, no mirando (a simple vista un
   titular a 100 o a 130 se parecen lo suficiente como para colarse).

   Puestas al final ganan por orden de cascada. Si alguien agrega mas
   adelante otra regla con el atajo `font:`, volveria a pasar: por eso
   conviene que este bloque siga siendo el ultimo.
   =================================================================== */
body { font-stretch: var(--ancho-normal); }
h1, h2, h3,
.page-head h1, .dashhead h1, .c360head__id h1, .loginpanel__title,
.kpi__value, .soldcard__big {
  font-stretch: var(--ancho-extended);
}
.btn, button, .nav__tab, .adminbar__tab, .cardhead__link, .field__aside,
.az, .agekey, .shortcut {
  font-stretch: var(--ancho-wide);
}
/* El titulo de la barra de administracion es un <h1> por semantica, pero no
   es un titulo de pagina: vive en una tira de chrome compacta, al lado de
   pestanas en Wide. En Extended (que es lo que le tocaria por ser h1)
   desentona con sus vecinas, asi que se queda en ancho normal. La semantica
   la da la etiqueta; el ancho lo decide donde esta parado. */
.adminbar__title { font-stretch: var(--ancho-normal); }