/* =====================================================================
   componentes.css — componentes únicos del sistema (público y admin)
   Botones · chips · badges · semáforo · tarjeta · formularios · ayuda "?" ·
   alertas · vacío · breadcrumb · pestañas · tabla→tarjetas · toast · modal/drawer ·
   menú desplegable · KPI · paginación · card-vehiculo · página de error
   Estados :hover :focus-visible :active :disabled definidos UNA sola vez aquí.
   ===================================================================== */

/* --icono-tam: el contenedor o un modificador fija el tamaño; el color es el del texto (currentColor) */
.icono { width: var(--icono-tam, 1.25em); height: var(--icono-tam, 1.25em); flex: none; vertical-align: -0.25em; }
.icono--sm { --icono-tam: 1em; }
.icono--grande { --icono-tam: 1.6em; }

/* ---------- Campo con ícono a la izquierda (buscadores): el ícono queda centrado en el hueco del campo ---------- */
.campo-icono { position: relative; --control-pad-izq: var(--hueco-icono); }
.campo-icono > .icono { position: absolute; top: 50%; left: calc((var(--hueco-icono) - var(--icono-tam, 1.25em)) / 2); z-index: var(--z-1); color: var(--c-texto-suave); pointer-events: none; transform: translateY(-50%); }

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-em-3);
  min-height: var(--control-alto);
  padding: var(--sp-em-3) var(--sp-em-6);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: var(--c-superficie);
  color: var(--c-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  /* En una fila conserva su ancho (baja de línea antes de encogerse); si no cabe ni solo en su contenedor, la etiqueta parte */
  flex-shrink: 0;
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn--primario { background: var(--c-acento-solido); border-color: var(--c-acento-solido); color: var(--c-sobre-solido); }
.btn--primario:hover:not(:disabled) { background: color-mix(in srgb, var(--c-acento-solido) 82%, var(--c-negro)); color: var(--c-sobre-solido); }

.btn--secundario { background: transparent; border-color: var(--c-borde-fuerte); color: var(--c-texto); }
.btn--secundario:hover:not(:disabled) { background: var(--c-realce); border-color: var(--c-texto-2); color: var(--c-texto); }

.btn--peligro { background: var(--c-peligro-solido); border-color: var(--c-peligro-solido); color: var(--c-sobre-solido); }
.btn--peligro:hover:not(:disabled) { background: color-mix(in srgb, var(--c-peligro-solido) 82%, var(--c-negro)); color: var(--c-sobre-solido); }

.btn--peligro-suave { background: transparent; border-color: var(--c-peligro); color: var(--c-peligro); }
.btn--peligro-suave:hover:not(:disabled) { background: var(--c-peligro-suave); color: var(--c-peligro); }

.btn--whatsapp { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: var(--c-sobre-solido); }
.btn--whatsapp:hover:not(:disabled) { background: var(--c-whatsapp-hover); border-color: var(--c-whatsapp-hover); color: var(--c-sobre-solido); }

.btn--fantasma { background: transparent; border-color: transparent; color: var(--c-texto-2); }
.btn--fantasma:hover:not(:disabled) { background: var(--c-realce); color: var(--c-texto); }
.btn--sobre-oscuro { color: var(--c-sobre-solido); } /* fantasma sobre fondos oscuros o fotos */
.btn--sobre-oscuro:hover:not(:disabled) { background: var(--c-blanco-16); color: var(--c-sobre-solido); }
.btn--alternar[aria-pressed="true"] { border-color: var(--c-acento-solido); background: var(--c-acento-suave); color: var(--c-texto); } /* botón que se activa y desactiva */

.btn--enlace { background: none; border: 0; padding: 0; min-height: auto; color: var(--c-enlace); text-decoration: underline; font-weight: 600; }
.btn--enlace:hover { text-decoration-thickness: 2px; }

.btn--bloque { display: flex; width: 100%; }
.btn--sm { min-height: 2rem; padding: var(--sp-em-2) var(--sp-em-4); font-size: var(--fs-xs); }
.btn--grande { min-height: 3rem; padding: var(--sp-em-4) var(--sp-em-7); font-size: var(--fs-md); }
.btn--icono { padding: 0; min-width: var(--control-alto); aspect-ratio: 1; }
.btn--icono.btn--sm { min-width: 2rem; }
@media (pointer: coarse) {
  .btn--sm { min-height: var(--tactil); }
  .btn--icono.btn--sm { min-width: var(--tactil); }
  .btn--enlace { min-height: var(--tactil); } /* enlace con forma de botón: área táctil ≥ 2.75rem */
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar var(--dur-giro) linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-em-3);
  position: relative; /* contiene su input oculto */
  min-height: var(--chip-alto, 2.125rem);
  padding: var(--chip-relleno-bloque, var(--sp-em-2)) var(--sp-em-5);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-pildora);
  background: transparent;
  color: var(--c-texto);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.chip:hover { border-color: var(--c-texto-2); background: var(--c-realce); text-decoration: none; color: var(--c-texto); }
.chip[aria-pressed="true"], .chip--activo, .chip:has(input:checked) {
  background: var(--c-acento-solido);
  border-color: var(--c-acento-solido);
  color: var(--c-sobre-solido);
}
.chip[aria-pressed="true"]:hover, .chip--activo:hover, .chip:has(input:checked):hover {
  background: color-mix(in srgb, var(--c-acento-solido) 82%, var(--c-negro));
  color: var(--c-sobre-solido);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip__conteo { color: var(--c-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip--activo .chip__conteo, .chip[aria-pressed="true"] .chip__conteo, .chip:has(input:checked) .chip__conteo { color: var(--c-sobre-solido); }
.chip--vacio, .chip[data-conteo="0"]:not(.chip--activo):not(:has(input:checked)) { opacity: 0.5; }
.chip:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.chip:has(input:disabled):hover { border-color: var(--c-borde-fuerte); background: transparent; }
.chip--multilinea { white-space: normal; text-align: left; } /* opción de filtro con nombre largo */
.chip--numero { justify-content: center; padding-inline: var(--sp-em-2); font-variant-numeric: tabular-nums; } /* plazos y cantidades */
.chip__quitar {
  display: inline-grid;
  place-items: center;
  margin-right: calc(-1 * var(--sp-em-2));
  width: 1.5em;
  height: 1.5em;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  padding: 0;
}
.chip__quitar:hover { background: var(--c-blanco-16); }
.chip__muestra { width: 0.95em; height: 0.95em; border-radius: 50%; border: 1px solid var(--c-borde-fuerte); background: var(--muestra, var(--c-borde)); flex: none; } /* --muestra: el color, en el marcado */
@media (pointer: coarse) { .chip { min-height: var(--tactil); } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-em-2);
  padding: var(--sp-em-1) var(--sp-em-3);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
  background: var(--badge-fondo, transparent);
  flex-shrink: 0; /* como el botón: no se encoge en una fila; parte línea solo si no cabe sola */
  max-width: 100%;
}
.badge--neutro { --badge-fondo: var(--c-superficie-hundida); color: var(--c-texto-2); }
.badge--ok { --badge-fondo: var(--c-ok-suave); color: var(--c-ok); }
.badge--alerta { --badge-fondo: var(--c-alerta-suave); color: var(--c-alerta); }
.badge--naranja { --badge-fondo: var(--c-naranja-suave); color: var(--c-naranja); }
.badge--peligro { --badge-fondo: var(--c-peligro-suave); color: var(--c-peligro); }
.badge--info { --badge-fondo: var(--c-info-suave); color: var(--c-info); }
.badge--violeta { --badge-fondo: var(--c-violeta-suave); color: var(--c-violeta); }
.badge--gris { --badge-fondo: var(--c-gris-suave); color: var(--c-gris); }
.badge--acento { --badge-fondo: var(--c-acento-suave); color: var(--c-acento-texto); }
.badge--sobre-foto { border-color: var(--c-blanco-16); background: linear-gradient(var(--badge-fondo, transparent), var(--badge-fondo, transparent)), var(--c-superficie-elevada); box-shadow: var(--sombra-sutil); } /* tinte sobre base sólida: legible sobre cualquier foto */
.badge--contador {
  justify-content: center;
  min-inline-size: 1.45em;
  padding: var(--sp-em-1) var(--sp-em-3);
  border-radius: var(--r-pildora);
  background: var(--contador-fondo, var(--c-peligro-solido));
  color: var(--c-sobre-solido);
  font-size: var(--contador-fs, var(--fs-contador));
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.badge--invertido { background: var(--c-sobre-solido); color: var(--c-peligro-solido); } /* contador sobre fondo oscuro (menú lateral) */
.badge--contador:empty, .badge--contador[data-valor="0"] { display: none; }

/* ---------- Semáforo de antigüedad ---------- */
.semaforo { display: inline-flex; align-items: center; gap: var(--sp-em-3); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.semaforo__punto { width: 0.7em; height: 0.7em; border-radius: 50%; background: currentColor; flex: none; }
.semaforo--verde { color: var(--c-ok); }
.semaforo--ambar { color: var(--c-alerta); }
.semaforo--naranja { color: var(--c-naranja); }
.semaforo--rojo { color: var(--c-peligro); }

/* ---------- Tarjeta / panel ---------- */
.tarjeta {
  background: var(--c-superficie);
  border: var(--borde);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  min-width: 0;
}
.tarjeta__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tarjeta__titulo { margin: 0; font-size: var(--fs-lg); }

/* ---------- Formularios ---------- */
.form-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}
.form-rejilla--estrecha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
/* El contenedor puede poner etiqueta y control en línea: --campo-direccion: row (y --campo-alineacion, --campo-espacio, --campo-etiqueta-ajuste) */
.form-campo { display: flex; flex-direction: var(--campo-direccion, column); align-items: var(--campo-alineacion, stretch); gap: var(--campo-espacio, var(--sp-1)); min-width: 0; }
.form-campo--ancho { grid-column: 1 / -1; }
.form-campo--compacto .form-campo__etiqueta { font-size: var(--fs-xs); }
.form-campo__etiqueta, .form-campo > label {
  display: flex;
  align-items: center;
  gap: var(--sp-em-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-texto-2);
  white-space: var(--campo-etiqueta-ajuste, normal);
}
.form-campo__cabecera { display: flex; align-items: center; gap: var(--sp-em-2); min-width: 0; }
.form-campo__requerido { color: var(--c-peligro); font-weight: 700; }
.form-campo__ayuda { margin: 0; font-size: var(--fs-xs); color: var(--c-texto-suave); }
.form-campo__error { display: flex; gap: var(--sp-em-2); margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--c-peligro); }
.form-campo__error:empty { display: none; }
.form-campo--error input, .form-campo--error select, .form-campo--error textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--c-peligro);
  box-shadow: var(--anillo-fino) var(--c-peligro);
}
.form-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.form-acciones--inicio { justify-content: flex-start; }
@media (max-width: 39.99rem) {
  .form-acciones .btn { flex: 1 1 auto; }
}
.form-seccion { border-top: var(--borde); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.form-seccion:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form-seccion__titulo { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }

.input-grupo { display: flex; align-items: stretch; min-width: 0; }
.input-grupo > input, .input-grupo > select { border-radius: 0; flex: 1 1 auto; min-width: 0; }
.input-grupo > :first-child { border-top-left-radius: var(--r-2); border-bottom-left-radius: var(--r-2); }
.input-grupo > :last-child { border-top-right-radius: var(--r-2); border-bottom-right-radius: var(--r-2); }
.input-grupo__adorno {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-em-4);
  border: 1px solid var(--c-borde-fuerte);
  background: var(--c-superficie-hundida);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.input-grupo__adorno:first-child { border-right: 0; }
.input-grupo__adorno:last-child { border-left: 0; }

.check, .switch { display: inline-flex; align-items: center; gap: var(--sp-em-4); min-height: 2rem; cursor: pointer; font-size: var(--fs-sm); }
@media (pointer: coarse) { .check { min-height: var(--tactil); } }
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }

.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__pista {
  position: relative;
  width: 2.5em;
  height: 1.45em;
  border-radius: var(--r-pildora);
  background: var(--c-borde-fuerte);
  transition: background-color var(--transicion);
  flex: none;
}
.switch__pista::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--c-blanco);
  transition: transform var(--transicion);
}
.switch input:checked + .switch__pista { background: var(--c-acento-solido); }
.switch input:checked + .switch__pista::after { transform: translateX(1.05em); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.switch input:disabled + .switch__pista { opacity: 0.5; }
@media (pointer: coarse) { .switch { min-height: var(--tactil); } }

/* ---------- Ayuda contextual "?" ---------- */
.ayuda-tip { position: relative; display: inline-flex; vertical-align: middle; }
.ayuda-tip__boton {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  padding: 0;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: 50%;
  background: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}
.ayuda-tip__boton::after { content: ""; position: absolute; inset: -0.6em; }
/* Con dedo el área activa llega a 2.75rem sin mover el diseño (corrección hecha en Sprint 2) */
@media (pointer: coarse) { .ayuda-tip__boton::after { inset: calc((var(--tactil) - 1.35em) / -2); } }
.ayuda-tip__boton:hover { border-color: var(--c-texto-2); color: var(--c-texto); }
.ayuda-tip__texto {
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  z-index: var(--z-flotante);
  display: none; /* cerrada no ocupa lugar: si no, ensancha el panel con scroll que la contiene (filtros del catálogo) */
  width: max-content;
  max-width: min(18rem, var(--tip-max, 80vw)); /* --tip-max: ancho útil del contenedor que la recorta (comun.js) */
  padding: var(--sp-em-4) var(--sp-em-5);
  border-radius: var(--r-2);
  border: var(--borde);
  background: var(--c-superficie-elevada);
  color: var(--c-texto);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  box-shadow: var(--sombra);
  transform: translateX(calc(-50% + var(--desplazar, 0px)));
}
.ayuda-tip:hover .ayuda-tip__texto,
.ayuda-tip:focus-within .ayuda-tip__texto,
.ayuda-tip[data-abierto] .ayuda-tip__texto { display: block; }
.ayuda-tip[data-abajo] .ayuda-tip__texto { top: calc(100% + 0.5em); bottom: auto; } /* sin lugar arriba: se abre hacia abajo */

/* ---------- Alertas en línea y banners ---------- */
.alerta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-2);
  background: var(--c-superficie);
  font-size: var(--fs-sm);
}
.alerta > .icono { margin-top: var(--sp-em-1); color: var(--alerta-color, currentColor); }
.alerta p:last-child { margin-bottom: 0; }
/* Cuerpo: base 11rem (o la fila menos el ícono); si la acción no cabe al lado, baja a su línea, a la derecha */
.alerta__cuerpo { flex: 1 1 min(100% - 2.5em, 11rem); min-width: 0; overflow-wrap: anywhere; }
.alerta > .alerta__cuerpo + * { margin-left: auto; }
.alerta--info { --alerta-color: var(--c-info); background: var(--c-info-suave); border-color: color-mix(in srgb, var(--c-info) 30%, transparent); }
.alerta--ok { --alerta-color: var(--c-ok); background: var(--c-ok-suave); border-color: color-mix(in srgb, var(--c-ok) 30%, transparent); }
.alerta--alerta { --alerta-color: var(--c-alerta); background: var(--c-alerta-suave); border-color: color-mix(in srgb, var(--c-alerta-vivo) 45%, transparent); }
.alerta--peligro { --alerta-color: var(--c-peligro); background: var(--c-peligro-suave); border-color: color-mix(in srgb, var(--c-peligro) 35%, transparent); }

.banner-sin-conexion {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-toast);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--gutter);
  background: var(--c-alerta-suave);
  color: var(--c-alerta);
  border-bottom: 1px solid var(--c-alerta-vivo);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Estado vacío ---------- */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--c-borde-fuerte);
  border-radius: var(--r-2);
  background: var(--c-superficie);
  text-align: center;
}
.vacio__icono { width: clamp(2.25rem, 5vw, 3rem); height: auto; color: var(--c-texto-suave); }
.vacio__titulo { margin: 0; font-size: var(--fs-lg); }
.vacio__texto { margin: 0; max-width: 46ch; color: var(--c-texto-suave); }
.vacio .fila { justify-content: center; margin-top: var(--sp-2); }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-em-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--c-texto-suave); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-em-2); min-width: 0; }
.breadcrumb li + li::before { content: "›"; color: var(--c-borde-fuerte); }
.breadcrumb a { color: var(--c-texto-2); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
/* Con dedo cada miga ofrece un área activa de al menos 2.75rem de alto sin agrandar la barra (corrección hecha en Sprint 2) */
@media (pointer: coarse) {
  .breadcrumb a { position: relative; }
  .breadcrumb a::after { content: ""; position: absolute; inset: min(0px, calc((var(--tactil) - 100%) / -2)) min(0px, calc((var(--tactil) - 100%) / -2)); }
}
.breadcrumb [aria-current="page"] { color: var(--c-texto); font-weight: 600; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 0; overflow-x: auto; border-bottom: var(--borde); scrollbar-width: thin; }
.pestanas--envolver { flex-wrap: wrap; overflow-x: visible; } /* todas a la vista: bajan de línea en vez de deslizarse (navegación de una sección) */
.pestanas__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-em-3);
  min-height: var(--control-alto);
  padding: var(--sp-em-3) var(--sp-em-5);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pestanas__item:hover { color: var(--c-texto); background: var(--c-superficie-2); }
.pestanas__item[aria-selected="true"], .pestanas__item[aria-current="page"] { color: var(--c-texto); border-bottom-color: var(--c-acento-solido); }

/* ---------- Tablas (≥1024 completa · 768–1023 sin prioridad 2 · <768 tarjetas) ---------- */
.tabla-contenedor {
  position: relative; /* contiene los .visualmente-oculto (absolutos) de las celdas: sin esto escapan del scroll y ensanchan la página */
  overflow-x: auto;
  border: var(--borde);
  border-radius: var(--r-2);
  background:
    linear-gradient(to right, var(--c-superficie) 30%, transparent),
    linear-gradient(to left, var(--c-superficie) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--c-negro-16), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--c-negro-16), transparent) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--c-superficie);
  background-size: 2.5rem 100%, 2.5rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla th, .tabla td { padding: var(--sp-2) var(--sp-3); border-bottom: var(--borde); text-align: left; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th { background: var(--c-superficie-2); color: var(--c-texto-2); font-weight: 600; white-space: nowrap; }
.tabla tbody tr:hover { background: var(--c-superficie-2); }
.tabla .num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .celda-acciones { text-align: right; white-space: nowrap; }
.tabla .celda-check { width: 1%; }
.tabla tr.esta-seleccionada { background: var(--c-acento-suave); }
.tabla__orden { display: inline-flex; align-items: center; gap: var(--sp-em-2); padding: 0; border: 0; background: none; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.tabla__orden:hover { color: var(--c-texto); text-decoration: underline; }
@media (pointer: coarse) { .tabla__orden { min-height: var(--tactil); min-inline-size: var(--tactil); } }
.tabla th[aria-sort="ascending"] .tabla__orden::after { content: "▲"; font-size: var(--fs-em-xs); }
.tabla th[aria-sort="descending"] .tabla__orden::after { content: "▼"; font-size: var(--fs-em-xs); }
.tabla__miniatura { width: var(--miniatura-ancho, clamp(3rem, 6vw, 4.5rem)); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-1); background: var(--c-superficie-hundida); }

@media (max-width: 63.99rem) {
  .tabla [data-priority="2"] { display: none; }
}
@media (max-width: 47.99rem) {
  .tabla-contenedor:has(.tabla:not(.tabla--fija)) { border: 0; background: none; overflow: visible; }
  .tabla:not(.tabla--fija) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla:not(.tabla--fija), .tabla:not(.tabla--fija) tbody { display: block; }
  .tabla:not(.tabla--fija) tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    padding: var(--sp-3);
    border: var(--borde);
    border-radius: var(--r-2);
    background: var(--c-superficie);
  }
  .tabla:not(.tabla--fija) td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .tabla:not(.tabla--fija) td[data-priority="2"] { display: block; }
  .tabla:not(.tabla--fija) td[data-priority="3"] { display: none; }
  .tabla:not(.tabla--fija) td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-texto-suave);
  }
  .tabla:not(.tabla--fija) td:not([data-label])::before, .tabla:not(.tabla--fija) td[data-label=""]::before { display: none; }
  .tabla:not(.tabla--fija) td.celda-principal, .tabla:not(.tabla--fija) td.celda-acciones { grid-column: 1 / -1; }
  .tabla:not(.tabla--fija) td.celda-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-start; }
  .tabla:not(.tabla--fija) td.celda-check { grid-column: 1 / -1; width: auto; } /* anula el width: 1% del modo tabla (la celda quedaba de 3 px) */
  /* En tarjeta cada celda mide media fila: «Inicial: USD 11.900», «Margen USD 5.595» o un aviso largo parten línea en vez de salirse */
  .tabla:not(.tabla--fija) .num { text-align: left; white-space: normal; }
}

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--sp-4) + var(--barra-inferior-alto) + var(--cta-altura));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--gutter);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: min(34rem, 100%);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-2);
  border: var(--borde);
  background: var(--c-superficie-elevada);
  color: var(--c-texto);
  font-size: var(--fs-sm);
  box-shadow: var(--sombra);
  pointer-events: auto;
  animation: toast-entrar var(--dur-media) var(--curva);
}
.toast--error { border-color: var(--c-peligro-solido); background: var(--c-peligro-solido); color: var(--c-sobre-solido); }
.toast__texto { flex: 1 1 auto; min-width: 0; }
.toast__accion {
  min-height: 2.25rem;
  padding: var(--sp-em-2) var(--sp-em-5);
  border: 1px solid var(--c-blanco-55);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--c-sobre-solido);
  font-weight: 700;
}
.toast__accion:hover { background: var(--c-blanco-12); }
.toast__cerrar { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-sobre-solido); padding: 0; }
.toast__cerrar:hover { background: var(--c-blanco-12); }
@keyframes toast-entrar { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---------- Modal (dialog nativo: Esc, foco) y drawer ---------- */
.modal {
  width: min(640px, 92vw);
  max-width: none;
  max-height: 88vh;
  padding: 0;
  border: var(--borde);
  border-radius: var(--r-3);
  background: var(--c-superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }
/* Formulario que envuelve cuerpo y pie (S6): mantiene el pie visible y el cuerpo con scroll propio */
.modal[open] > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.modal[open] > form[hidden], .modal[open] > .modal__cuerpo[hidden] { display: none; }
.modal::backdrop { background: var(--c-velo); }
.modal--ancho { width: min(960px, 94vw); }
.modal--estrecho { width: min(440px, 92vw); }
.modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: var(--borde); }
.modal__titulo { margin: 0; font-size: var(--fs-lg); }
.modal__cuerpo { flex: 1 1 auto; overflow: auto; padding: var(--modal-relleno, var(--sp-4)); overscroll-behavior: contain; }
.modal__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: var(--borde); background: var(--c-superficie-2); }
@media (max-width: 39.99rem) {
  .modal, .modal--ancho, .modal--estrecho {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--r-3) var(--r-3) 0 0;
  }
  .modal__pie .btn { flex: 1 1 auto; }
}

dialog.drawer {
  width: min(420px, 92vw);
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: var(--borde);
  background: var(--c-superficie);
  box-shadow: var(--sombra);
}
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-derecha var(--dur-media) var(--curva); }
dialog.drawer::backdrop { background: var(--c-velo-suave); }
dialog.drawer--abajo {
  width: 100%;
  height: auto;
  max-height: 88dvh;
  margin: auto 0 0;
  border: var(--borde);
  border-radius: var(--r-3) var(--r-3) 0 0;
}
dialog.drawer--abajo[open] { animation: drawer-abajo var(--dur-media) var(--curva); }
@keyframes drawer-derecha { from { transform: translateX(1.5rem); opacity: 0.6; } }
@keyframes drawer-abajo { from { transform: translateY(1.5rem); opacity: 0.6; } }
html:has(dialog[open]) { overflow: hidden; }

/* ---------- Menú desplegable ---------- */
.desplegable { position: relative; display: inline-flex; }
.desplegable--bloque { display: grid; } /* ocupa su celda: el botón toma todo el ancho */
.desplegable--bloque > .btn { width: 100%; }
.desplegable__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: var(--z-flotante);
  min-width: min(14rem, 90vw);
  max-width: min(22rem, 92vw);
  padding: var(--sp-1);
  border: var(--borde);
  border-radius: var(--r-2);
  background: var(--c-superficie);
  box-shadow: var(--sombra);
}
.desplegable__item {
  display: flex;
  align-items: center;
  gap: var(--sp-em-4);
  width: 100%;
  min-height: 2.25rem;
  padding: var(--sp-em-3) var(--sp-em-4);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--c-texto);
  font-size: var(--fs-sm);
  text-align: left;
  text-decoration: none;
}
.desplegable__item:hover, .desplegable__item:focus-visible { background: var(--c-realce); color: var(--c-texto); }
.desplegable__item--peligro { color: var(--c-peligro); }
.desplegable__separador { height: 1px; margin: var(--sp-1) 0; background: var(--c-borde); }
@media (pointer: coarse) { .desplegable__item { min-height: var(--tactil); } }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--sp-3); }
.kpi { container-type: inline-size; min-width: 0; padding: var(--kpi-relleno, var(--sp-3)); border: var(--borde); border-radius: var(--r-2); background: var(--c-superficie); }
.kpi__etiqueta { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--c-texto-suave); overflow-wrap: break-word; }
.kpi__valor { display: block; margin-top: var(--sp-em-1); font-size: var(--fs-kpi); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__detalle { display: block; margin-top: var(--sp-em-1); font-size: var(--fs-xs); color: var(--c-texto-suave); }
.kpi--alerta { border-left: 3px solid var(--c-alerta-vivo); }
.kpi--peligro { border-left: 3px solid var(--c-peligro-vivo); }
.kpi--ok { border-left: 3px solid var(--c-ok-vivo); }

/* ---------- Paginación ---------- */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.paginacion__estado { font-size: var(--fs-sm); color: var(--c-texto-suave); }

/* ---------- Galería de miniaturas genérica ---------- */
.miniaturas { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-1); }
.miniaturas > * { flex: 0 0 clamp(4rem, 14vw, 6.5rem); scroll-snap-align: start; }

/* ---------- Tarjeta de vehículo (única: catálogo, destacados, similares, favoritos, comparador) ---------- */
.rejilla-vehiculos {
  /* La sección puede ajustar columnas, espacio y contenedor: --rejilla-columnas, --rejilla-espacio, --rejilla-contenedor */
  container-name: rejilla-vehiculos;
  container-type: var(--rejilla-contenedor, inline-size);
  display: grid;
  grid-template-columns: var(--rejilla-columnas, repeat(auto-fill, minmax(clamp(13.75rem, 22vw, 18.75rem), 1fr)));
  gap: var(--rejilla-espacio, var(--sp-4));
}
.card-vehiculo {
  container: card-vehiculo / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "media" "cuerpo" "acciones";
  min-width: 0;
  border: var(--borde);
  border-radius: var(--r-3);
  background: var(--c-superficie);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.card-vehiculo:hover { border-color: var(--c-borde-fuerte); }
.card-vehiculo:focus-within { border-color: var(--c-foco); }
.card-vehiculo__media { grid-area: media; position: relative; display: block; background: var(--c-superficie-hundida); }
.card-vehiculo__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-vehiculo__etiquetas {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  max-width: calc(100% - 2 * var(--sp-2));
  pointer-events: none;
}
/* Una etiqueta más ancha que la foto (tarjeta horizontal en móvil, foto al 40 %) parte su texto en vez de salirse (.badge es nowrap) */
.card-vehiculo__cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; padding: var(--sp-3); }
.card-vehiculo__titulo { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.card-vehiculo__enlace { color: var(--c-texto); text-decoration: none; }
.card-vehiculo__enlace::after { content: ""; position: absolute; inset: 0; z-index: var(--z-1); }
.card-vehiculo__enlace:hover { text-decoration: underline; }
.card-vehiculo__enlace:focus-visible { outline: none; }
.card-vehiculo__enlace:focus-visible::after { outline: 2px solid var(--c-foco); outline-offset: -2px; border-radius: var(--r-2); }
.card-vehiculo__version { margin: 0; overflow: hidden; color: var(--c-texto-suave); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.card-vehiculo__precio { margin: var(--sp-1) 0 0; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.card-vehiculo__precio-antes { margin-left: var(--sp-em-2); color: var(--c-texto-suave); font-size: var(--fs-xs); font-weight: 400; text-decoration: line-through; }
.card-vehiculo__cuota { margin: 0; color: var(--c-acento-texto); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-vehiculo__datos { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: var(--sp-1) 0 0; color: var(--c-texto-2); font-size: var(--fs-xs); }
.card-vehiculo__datos li { display: inline-flex; align-items: center; gap: var(--sp-em-2); white-space: nowrap; }
.card-vehiculo__datos .icono { color: var(--c-texto-suave); }
.card-vehiculo__acciones {
  grid-area: acciones;
  position: relative;
  z-index: var(--z-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: var(--borde);
}
.card-vehiculo__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactil);
  padding: 0;
  border: 0;
  border-right: var(--borde);
  background: var(--c-superficie);
  color: var(--c-texto-2);
  text-decoration: none;
}
.card-vehiculo__accion:last-child { border-right: 0; }
.card-vehiculo__accion:hover:not(:disabled) { background: var(--c-realce); color: var(--c-texto); }
.card-vehiculo__accion:disabled, .card-vehiculo__accion[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.card-vehiculo__accion[aria-pressed="true"] { color: var(--c-peligro); }
.card-vehiculo__accion[aria-pressed="true"] .icono path { fill: currentColor; }
.card-vehiculo__accion[data-accion="comparar"][aria-pressed="true"] { color: var(--c-info); background: var(--c-info-suave); }
.card-vehiculo__accion--whatsapp { color: var(--c-whatsapp); }
.card-vehiculo__accion--whatsapp:hover:not(:disabled) { background: var(--c-whatsapp); color: var(--c-sobre-solido); }

/* Escritorio con ratón: acciones sobre la foto, visibles al pasar el cursor o con el foco del teclado */
@media (hover: hover) and (pointer: fine) {
  .card-vehiculo { grid-template-rows: auto 1fr; grid-template-areas: "media" "cuerpo"; --acciones-opacidad: 0; }
  .card-vehiculo__acciones {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    display: flex;
    flex-direction: row-reverse; /* el primero (favorito) queda en la esquina */
    gap: var(--sp-1);
    border: 0;
  }
  /* El corazón siempre a la vista; el resto al pasar el cursor, con el foco o si alguna acción está activa */
  .card-vehiculo:is(:hover, :focus-within, :has([aria-pressed="true"])) { --acciones-opacidad: 1; }
  .card-vehiculo__accion:not([data-accion="favorito"]) { opacity: var(--acciones-opacidad); transition: opacity var(--transicion); }
  .card-vehiculo__accion {
    min-height: 2.125rem;
    min-width: 2.125rem;
    border: 1px solid var(--c-blanco-16);
    border-radius: 50%;
    background: var(--c-vidrio);
  }
  .card-vehiculo__accion:last-child { border-right: 1px solid var(--c-blanco-16); }
}

/* La tarjeta se compacta según SU espacio, no según la pantalla */
@container card-vehiculo (max-width: 16.25rem) {
  .card-vehiculo__cuerpo { padding: var(--sp-2); }
  .card-vehiculo__precio { font-size: var(--fs-md); }
  .card-vehiculo__cuota { font-size: var(--fs-xs); }
  .card-vehiculo__datos { gap: var(--sp-05) var(--sp-2); }
}

/* Móvil (rejilla de 1 columna): tarjeta horizontal compacta con foto al 40 % */
@container rejilla-vehiculos (max-width: 39.99rem) {
  .rejilla-vehiculos > .card-vehiculo,
  .rejilla-vehiculos > * > .card-vehiculo {
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "media cuerpo" "acciones acciones";
  }
  .rejilla-vehiculos .card-vehiculo__media { height: 100%; }
  .rejilla-vehiculos .card-vehiculo__foto { height: 100%; min-height: 100%; }
  .rejilla-vehiculos .card-vehiculo__cuerpo { padding: var(--sp-2) var(--sp-3); }
  .rejilla-vehiculos .card-vehiculo__etiquetas { left: 0.25rem; bottom: 0.25rem; max-width: calc(100% - 0.5rem); } /* mismo margen que su posición: a 320 px «Verificado» no cabía */
}

/* Vista lista (escritorio) */
.rejilla-vehiculos--lista { --rejilla-columnas: minmax(0, 1fr); }
@container rejilla-vehiculos (min-width: 40rem) {
  .rejilla-vehiculos--lista .card-vehiculo {
    grid-template-columns: 30% minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "media cuerpo acciones";
  }
  .rejilla-vehiculos--lista .card-vehiculo__media, .rejilla-vehiculos--lista .card-vehiculo__foto { height: 100%; }
  .rejilla-vehiculos--lista .card-vehiculo__cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: var(--sp-1) var(--sp-4); padding: var(--sp-4); }
  .rejilla-vehiculos--lista .card-vehiculo__titulo, .rejilla-vehiculos--lista .card-vehiculo__version { grid-column: 1 / -1; }
  .rejilla-vehiculos--lista .card-vehiculo__acciones {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border: 0;
    border-left: var(--borde);
    opacity: 1;
  }
}

.card-vehiculo--no-disponible .card-vehiculo__foto { filter: grayscale(1); opacity: 0.6; }
.card-vehiculo--no-disponible .card-vehiculo__precio, .card-vehiculo--no-disponible .card-vehiculo__cuota { color: var(--c-texto-suave); }

/* ---------- Página de error ---------- */
.pagina-error__caja { width: min(40rem, 100%); padding: var(--sp-6); }
.pagina-error__codigo { margin: 0 0 var(--sp-2); color: var(--c-texto-suave); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pagina-error__texto { color: var(--c-texto-2); }
.pagina-error__id { font-size: var(--fs-sm); color: var(--c-texto-suave); }

/* ---------- Enlace-título: nombre de un auto o lead que abre su ficha (listas, tablas, tablero, comparador) ---------- */
.enlace-titulo { color: var(--c-texto); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.enlace-titulo:hover { color: var(--c-texto); text-decoration: underline; }
@media (pointer: coarse) { .enlace-titulo { display: inline-flex; align-items: center; min-height: var(--tactil); } }

/* ---------- Precio destacado y precio anterior (ficha pública, ficha del panel, reserva) ---------- */
.precio-destacado { margin: 0; font-size: var(--fs-precio); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.precio-antes { margin-left: var(--sp-em-3); color: var(--c-texto-suave); font-size: var(--fs-sm); font-weight: 400; text-decoration: line-through; }

/* ---------- Barra de progreso: el avance va en --progreso (en el marcado o desde JS) y el alto en --progreso-alto ---------- */
.progreso { display: block; block-size: var(--progreso-alto, 0.4rem); border-radius: var(--r-pildora); background: var(--c-superficie-hundida); overflow: hidden; }
.progreso > span { display: block; inline-size: var(--progreso, 0%); block-size: 100%; border-radius: inherit; background: var(--c-acento-solido); transition: inline-size var(--dur-media) var(--curva); }

/* ---------- Tarjeta angosta (formularios cortos dentro del panel) ---------- */
.tarjeta--angosta { max-width: 36rem; --pila-espacio: var(--sp-3); }
/* Baldosa: ícono en un cuadro con el tinte del acento (--baldosa-tam) */
.baldosa { display: inline-grid; flex: none; place-items: center; width: var(--baldosa-tam, 2.5rem); aspect-ratio: 1; border-radius: var(--r-2); background: var(--c-acento-suave); color: var(--c-acento-texto); }
.baldosa--sm { --baldosa-tam: 2rem; }
.tarjeta--vidrio { border-color: var(--c-blanco-16); border-radius: var(--r-3); background: var(--c-vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); box-shadow: var(--sombra); } /* panel sobre foto o portada */

/* ---------- Documento para firmar (vista previa en el panel y página pública /firmar) ---------- */
.firma-documento-contenedor { min-width: 0; }
.firma-documento { container: firma-doc / inline-size; min-width: 0; overflow-wrap: anywhere; }
.firma-documento table { width: 100%; }
.firma-documento img { max-width: 100%; height: auto; }
.firma-documento .doc-firma-espacio img, .firma-documento .pd-firma-espacio img { max-height: 100%; width: auto; }
@container firma-doc (max-width: 36rem) {
  .firma-documento .doc-datos tr, .firma-documento .pd-kv tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .firma-documento .doc-datos th, .firma-documento .doc-datos td, .firma-documento .pd-kv th, .firma-documento .pd-kv td { width: auto; }
  .firma-documento .doc-cabecera tr, .firma-documento .doc-firmas tr, .firma-documento .pd-cabecera tr, .firma-documento .pd-bloques tr, .firma-documento .pd-firmas tr { display: grid; grid-template-columns: minmax(0, 1fr); }
  .firma-documento .doc-cabecera td, .firma-documento .doc-firmas td, .firma-documento .pd-cabecera td, .firma-documento .pd-bloques td, .firma-documento .pd-firmas td { width: auto; }
  .firma-documento .doc-empresa, .firma-documento .pd-titulo { text-align: left; }
}