/* src/styles/tokens.css
   ------------------------
   Sistema de diseño del panel: UN SOLO lugar donde se definen los colores,
   tipografías, espaciados y estilos base (botones, inputs, tarjetas,
   etiquetas de estado) que usan TODAS las pantallas. Para cambiar "el look"
   de todo el panel alcanza con tocar este archivo.

   Se importa una sola vez, en src/main.tsx.

   REDISEÑO VISUAL — ETAPA 1 (paleta "Cielo", día y noche)
   -------------------------------------------------------
   Hay UNA sola paleta ("Cielo": azul de marca + estados con color propio)
   en dos versiones:
     - DÍA   : valores en ":root".
     - NOCHE : valores en ":root[data-theme='dark']". Se activa con el botón
               "Modo noche / Modo día" de la barra superior (ver
               src/theme/TemaContext.tsx, que pone el atributo
               data-theme en <html>).
   Los nombres NUEVOS (--brand, --bg, --surface, --text, --ok-fg, ...) son
   los "oficiales" del rediseño. Los nombres VIEJOS (--color-primary,
   --color-success, ...) se mantienen como ALIAS de los nuevos, para que
   todas las pantallas existentes se re-coloreen solas sin tocarlas.

   Contraste: todos los pares texto/fondo cumplen WCAG AA (mínimo 4,5:1);
   se verificaron con el script docs/verificar_contraste (ver documento de
   la Etapa 1). Un estado NUNCA se distingue solo por color: siempre lleva
   ícono + palabra (ver components/PildoraEstado.tsx). */

:root {
  color-scheme: light;

  /* ---------- Paleta Cielo — DÍA: base ---------- */
  --brand: #0369A1;          /* Azul de marca: botones principales, links, foco */
  --on-brand: #FFFFFF;       /* Texto/ícono sobre el azul de marca */
  --side: #0C2A3F;           /* Fondo del menú lateral izquierdo */
  --bg: #F1F6FA;             /* Fondo general de la pantalla */
  --surface: #FFFFFF;        /* Fondo de tarjetas, tablas y formularios */
  --surface-alt: #E8F0F6;    /* Filas alternadas, hover, secciones internas */
  --border: #D8E5EF;         /* Líneas divisorias */
  --border-strong: #6B889D;  /* Bordes de campos y controles (visibles) */
  --text: #0F2230;           /* Texto principal */
  --dim: #4A6173;            /* Texto secundario: aclaraciones y metadatos */
  --faint: #4A6173;          /* Texto terciario (mismo valor que --dim: no baja de 4,5:1) */
  --brand-hover: #075985;    /* Azul de marca al pasar el mouse */
  --brand-soft: #E0F0FA;     /* Fondo tenue de marca: selección, hover suave */
  --on-danger: #FFFFFF;      /* Texto sobre botones rojos */
  --on-accent: #FFFFFF;      /* Texto sobre botones de acento */

  /* ---------- Estados (texto / fondo). Siempre con ícono + palabra ---------- */
  --ok-fg: #1E6B43;     --ok-bg: #E3F3E9;      /* Listo (círculo con tilde) */
  --warn-fg: #8A4B00;   --warn-bg: #FFF0D6;    /* Sin chofer (triángulo de alerta) */
  --bad-fg: #A32B22;    --bad-bg: #FBE4E1;     /* Inconsistente (círculo con X) */
  --recalc-fg: #5B3FA6; --recalc-bg: #EDE7FA;  /* Recalcular (flechas circulares) */
  --idle-fg: #4B5A55;   --idle-bg: #E8EEEC;    /* Sin calcular (reloj) */
  --bloqueo-raya: #5E7385; --bloqueo-fondo: #DCE5EC;   /* Rayado de «bloqueado» (taller, licencia): raya oscura bien visible sobre fondo claro */
  --run-fg: #1B5FA8;    --run-bg: #E1EEFB;     /* En curso (flecha de navegación) */

  /* ---------- Colores de coches (para distinguir coches en mapas; NO son estados) ---------- */
  --coche-1: #0072B2; --coche-2: #00A6A6; --coche-3: #CC79A7; --coche-4: #9A6B00;
  --coche-5: #4A5568; --coche-6: #56B4E9; --coche-7: #7A4EAB;

  /* ---------- ALIAS con los nombres viejos (no usar en código nuevo) ---------- */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-alt: var(--surface-alt);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-text: var(--text);
  --color-text-dim: var(--dim);
  --color-text-faint: var(--faint);
  --color-primary: var(--brand);
  --color-primary-dark: var(--brand-hover);
  --color-primary-light: var(--brand-soft);
  --color-accent: var(--warn-fg);
  --color-accent-dark: #6B3A00;
  --color-accent-light: var(--warn-bg);
  --color-success: var(--ok-fg);     --color-success-bg: var(--ok-bg);
  --color-warning: var(--warn-fg);   --color-warning-bg: var(--warn-bg);
  --color-danger: var(--bad-fg);     --color-danger-bg: var(--bad-bg);
  --color-info: var(--run-fg);       --color-info-bg: var(--run-bg);
  --color-violet: var(--recalc-fg);  --color-violet-bg: var(--recalc-bg);

  /* ---------- Tipografía ---------- */
  /* Una sola familia para todo: Inter (clara en pantalla y con cifras
     alineadas). Los títulos usan Inter 700. */
  --font-heading: 'Inter', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Escala de tamaños (en rem, relativo a los 16px por defecto del navegador) */
  --text-xs: 0.75rem;   /* 12px: texto secundario (nada por debajo de 11px) */
  --text-sm: 0.875rem;  /* 14px: texto de tablas y formularios */
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.5rem;   /* 24px: títulos de pantalla */

  /* ---------- Espaciado ---------- */
  /* Una sola escala de espacios para usar en paddings/márgenes/gaps, en
     vez de números sueltos — así todo queda alineado a la misma "grilla". */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---------- Bordes y sombras ---------- */
  --radius-sm: 8px;    /* Botones, inputs, etiquetas pequeñas */
  --radius-md: 14px;   /* Tarjetas */
  --radius-lg: 20px;   /* Paneles grandes, contenedores de página */
  --shadow-card: 0 1px 2px rgba(12, 42, 63, 0.05), 0 4px 16px rgba(12, 42, 63, 0.07);
  --shadow-float: 0 8px 28px rgba(12, 42, 63, 0.18); /* Menús flotantes, modales */
}

/* ================= Paleta Cielo — NOCHE ================= */
/* Solo se redefinen los valores; los alias viejos (--color-*) apuntan a los
   nuevos nombres, así que se actualizan solos. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand: #4FB3E8;
  --on-brand: #04202F;
  --side: #06161F;
  --bg: #0C1822;
  --surface: #14232F;
  --surface-alt: #1B2E3D;
  --border: #25394A;
  --border-strong: #5F7F96;
  --text: #E6F0F7;
  --dim: #9DB4C5;
  --faint: #9DB4C5;
  --brand-hover: #7CC8F0;
  --brand-soft: #12303F;
  --on-danger: #3F1714;
  --on-accent: #3A2A0C;

  --ok-fg: #5FD39A;     --ok-bg: #12301F;
  --warn-fg: #F5B54A;   --warn-bg: #3A2A0C;
  --bad-fg: #FF8A80;    --bad-bg: #3F1714;
  --recalc-fg: #B9A2FF; --recalc-bg: #2A2150;
  --idle-fg: #9AA8B8;   --idle-bg: #243242;
  --bloqueo-raya: #8FA7BA; --bloqueo-fondo: #1B2B39;   /* Rayado de «bloqueado» en modo noche: raya clara sobre fondo oscuro */
  --run-fg: #7DB8FF;    --run-bg: #14304F;

  --color-accent-dark: #FFD27F;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ================= Reseteo mínimo y base ================= */

* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Cifras de ancho fijo ("tabulares") en todo el sistema: los números de
     columnas distintas quedan alineados y no "bailan" al cambiar. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 600; }

p { margin: 0; }

/* Foco de teclado visible en todo el panel (accesibilidad) — un halo del
   color de marca, no el contorno azul feo por defecto del navegador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ================= Botones ================= */
/* Clase base ".btn" + una modificadora (".btn-primary", ".btn-secondary",
   ".btn-ghost", ".btn-danger") para cubrir los casos que aparecen en el
   panel: acción principal, acción secundaria, acción "de poco peso"
   (texto solo) y acción destructiva. */

.btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--on-brand);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-alt); }

.btn-accent {
  background: var(--color-accent);
  color: var(--on-accent);
}
.btn-accent:hover:not(:disabled) { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary-dark);
  padding: 6px 10px;
  font-size: var(--text-xs);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-primary-light); }

.btn-danger {
  background: var(--color-danger);
  color: var(--on-danger);
  border: 1px solid var(--color-danger);
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn-danger-ghost {
  background: transparent;
  color: var(--color-danger);
  padding: 6px 10px;
  font-size: var(--text-xs);
}
.btn-danger-ghost:hover:not(:disabled) { background: var(--color-danger-bg); }

.btn-sm { padding: 6px 12px; font-size: var(--text-xs); }

/* ================= Campos de formulario ================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.field-help {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}
.field-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.input, select.input, textarea.input {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
}
.input::placeholder { color: var(--color-text-faint); }
.input:focus { border-color: var(--color-primary); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: 7px 0;
}
.checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--color-primary);
}

/* ================= Tarjetas y paneles ================= */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: var(--space-5); }

/* ================= Etiquetas de estado (badges) ================= */
/* Una sola forma visual de "pastilla" para todos los estados del sistema
   (servicios, paradas, documentos, etc.) — el color es lo único que
   cambia, así cualquier estado nuevo se entiende de un vistazo sin tener
   que leer el texto: verde = resuelto, ámbar = pendiente/en preparación,
   celeste = en curso, rojo = bloqueado/error. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-neutral { background: var(--color-surface-alt); color: var(--color-text-dim); }
.badge-violet  { background: var(--color-violet-bg);  color: var(--color-violet); }

/* ================= Píldora de estado (Cielo) ================= */
/* Una sola forma de mostrar estados en todo el sistema: ícono + palabra +
   color (nunca solo color). Se usa desde components/PildoraEstado.tsx.
   Variantes de color: ok, warn, bad, recalc, idle, run.
   Variantes de énfasis: por defecto "tranquila" (fondo suave); ".pildora--fuerte"
   agrega borde del color del estado para los que piden acción (se usa en la
   Etapa 2, listas). */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.pildora svg { flex: none; }
.pildora--ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.pildora--warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.pildora--bad    { background: var(--bad-bg);    color: var(--bad-fg); }
.pildora--recalc { background: var(--recalc-bg); color: var(--recalc-fg); }
.pildora--idle   { background: var(--idle-bg);   color: var(--idle-fg); }
.pildora--run    { background: var(--run-bg);    color: var(--run-fg); }
.pildora--fuerte { border-color: currentColor; }

/* ================= Utilidades chicas ================= */
/* Un puñado de clases de una sola propiedad para no repetir "style={{}}"
   por todas partes en casos simples (espaciado, texto secundario). */

.text-dim { color: var(--color-text-dim); }
.text-faint { color: var(--color-text-faint); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }

/* Ícono girando, para los botones que muestran "cargando..." (ver
   ServicesPage.tsx — Loader2 de lucide-react con esta clase). */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ================= Tablas compactas ================= */
/* Para listados largos (pasajeros, destinos, etc.) donde entran muchas
   filas y lo que importa es ver de un vistazo, no una tarjeta grande por
   fila. Una sola fila de alto chico por registro, con la fila entera
   clickeable (el cursor "pointer" y el hover los pone quien usa ".table"
   agregando onClick a cada <tr>). */
.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow-x: auto; /* Etapa 7E: si la tabla es más ancha que la pantalla, aparece barra horizontal */
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  white-space: nowrap;
}
.table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--color-surface-alt); }
.table .col-truncate {
  max-width: 1px; /* fuerza a que el ancho lo dé la celda, no el contenido */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scrollbar discreta para listas internas (checkboxes de pasajeros, etc.) */
.scroll-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }

/* ================= Formularios de carga / edición ================= */
/* UN SOLO formato para todos los formularios de datos (contrato, destino,
   pasajero, vehículo, chofer, lugar de guarda): secciones con título, dos
   columnas en pantallas anchas, ayudas debajo de cada campo y botones
   Guardar/Cancelar siempre en el mismo lugar. Se arma con los componentes
   de components/FormLayout.tsx. */

/* Formulario con mapa al costado (entidades con ubicación): a la izquierda
   los campos, a la derecha el mapa, que se queda a la vista al hacer scroll. */
.form-with-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: var(--space-4);
  align-items: start;
}
.form-with-map .form-map-col { position: sticky; top: var(--space-4); }
/* Los paneles internos de Leaflet usan z-index altos (hasta 1000): "isolation" los encierra en su columna para que
   el mapa nunca quede por encima de los campos ni de la barra superior. */
.form-with-map .form-map-col { isolation: isolate; }
/* Variante APILADA: campos arriba y mapa abajo, sin mapa que acompañe el scroll. Se usa cuando el formulario va
   dentro de una pantalla angosta (ej. el lugar de guarda dentro de "Mi empresa"), donde dos columnas no entran. */
.form-with-map.form-con-mapa-abajo { grid-template-columns: minmax(0, 1fr); }
.form-with-map.form-con-mapa-abajo .form-map-col { position: static; }
@media (max-width: 1000px) {
  .form-with-map { grid-template-columns: minmax(0, 1fr); }
  .form-with-map .form-map-col { position: static; }
}

.form-section { padding-bottom: var(--space-2); }
.form-section + .form-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}
.form-section-title { margin: 0 0 2px; font-size: var(--text-base); }
.form-section-desc { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--color-text-dim); }

/* Cuadrícula de campos: 2 columnas en pantallas anchas, 1 en angostas. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}
.form-grid .field-span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Asterisco de campo obligatorio */
.required-mark { color: var(--color-danger); margin-left: 2px; }
.input-invalid { border-color: var(--color-danger) !important; }

/* Barra de botones del formulario: siempre al final, misma posición. */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
}
.form-actions .form-actions-error { flex: 1 1 100%; margin: 0; }
.form-actions .form-actions-spacer { flex: 1; }

/* Dirección sugerida al hacer clic en el mapa (geocodificación inversa) */
.location-suggestion {
  border: 1px solid var(--color-border);
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.location-suggestion.is-muted { background: var(--color-surface-alt); }

/* ================= Selector de pasajeros en dos paneles ================= */
/* Izquierda: pasajeros disponibles. Derecha: pasajeros del servicio. Se
   pasan de un lado al otro con un clic (ver components/PassengerTransfer.tsx). */
.transfer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
@media (max-width: 800px) {
  .transfer { grid-template-columns: minmax(0, 1fr); }
}
.transfer-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.transfer-panel.is-target { border-color: var(--color-primary); }
.transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  font-size: var(--text-sm);
}
.transfer-list { height: 320px; overflow-y: auto; }
.transfer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.transfer-row:hover { background: var(--color-primary-light); }
.transfer-row .transfer-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-empty { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-dim); }

/* Aviso (banner) de advertencia dentro de formularios */
.notice {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.notice-warning { background: var(--color-warning-bg); color: var(--color-text); border: 1px solid var(--color-warning); }
.notice-success { background: var(--color-success-bg); color: var(--color-text); border: 1px solid var(--color-success); }
.notice-danger { background: var(--color-danger-bg); color: var(--color-text); border: 1px solid var(--color-danger); }
.notice-info { background: var(--color-info-bg); color: var(--color-text); border: 1px solid var(--color-info); }


/* Botón que es solo un ícono (acciones de las filas de las tablas): cuadrado y chico para compactar. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
}
/* Grupo de íconos de acción al final de una fila. */
.row-icons { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; white-space: nowrap; }
/* Chip chico con una patente. */
.chip-plate {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}


/* Grilla de 4 columnas para formularios compactos (ficha de vehículo, etc.); baja a 2 y a 1 en pantallas chicas. */
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
@media (max-width: 1000px) { .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .form-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Resumen horizontal "de un vistazo" arriba de una ficha: datos clave en una sola franja. */
.resumen-franja { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: flex-end; }
.resumen-dato { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.resumen-dato .resumen-etiqueta { font-size: var(--text-xs); color: var(--color-text-dim); }
.resumen-dato .resumen-valor { font-weight: 700; font-size: var(--text-base); }

/* f94 — Ficha compacta de solo lectura (components/FichaEditable.tsx). */
.ficha-compacta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2) var(--space-5); }
.ficha-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ficha-dato-ancho { grid-column: 1 / -1; }
.ficha-dato .resumen-etiqueta { font-size: var(--text-xs); color: var(--color-text-dim); }
.ficha-valor { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }

/* Etapa 7E: la columna del menú ⋯ queda siempre visible a la derecha aunque la tabla
   sea más ancha que la pantalla (antes quedaba escondida y parecía que no existía). */
.table th.col-acciones, .table td.col-acciones {
  position: sticky; right: 0; z-index: 2; background: var(--color-surface);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25);
}
.table thead th.col-acciones { background: var(--color-surface-alt, var(--color-surface)); }
.table tbody tr.is-clickable:hover td.col-acciones { background: var(--color-surface-alt); }