:root {
  /* ---------- Paleta shadcn/ui original (acromatica + un solo rojo) ---------- */
  --color-canvas: #f5f5f5;
  --color-paper: #ffffff;
  --color-surface-alt: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-soft: #171717;
  --color-mid-gray: #737373;
  --color-hairline: #e5e5e5;
  --color-ember: #e7000b;

  /* ---------- Superficies (stack de 3 tonos) ---------- */
  --color-fondo: var(--color-canvas);
  --color-superficie-alt: var(--color-surface-alt);
  --color-superficie: var(--color-paper);
  --color-input-fondo: var(--color-canvas);

  /* ---------- Texto ---------- */
  --color-texto: var(--color-ink);
  --color-texto-suave: var(--color-mid-gray);
  --color-borde: var(--color-hairline);

  /* ---------- Accion primaria (inversion oscura, la unica interaccion cromatica) ---------- */
  --color-primario: var(--color-ink);
  --color-primario-texto: var(--color-surface-alt);

  /* ---------- Destructivo (unico acento reservado: nunca decorativo) ---------- */
  --color-destructivo: var(--color-ember);
  --color-destructivo-fondo: rgba(231, 0, 11, 0.08);

  /* "Proximo" no es un error, asi que no usa el rojo: se resuelve por peso
     tipografico/tonal (badge "soft"), igual que hace shadcn con estados
     no-destructivos. */
  --color-alerta-fondo: var(--color-canvas);
  --color-alerta-texto: var(--color-ink-soft);

  --color-exito-fondo: var(--color-canvas);
  --color-exito-texto: var(--color-mid-gray);

  /* ---------- Forma ---------- */
  --radio-card: 24px;
  --radio-boton: 18px;
  --radio-nested: 10px;
  --radio-small: 6px;
  --ancho-sidebar: 240px;

  /* ---------- Sombra (whisper-quiet) ---------- */
  --sombra-card: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --sombra-modal: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 20px 40px -8px rgba(0, 0, 0, 0.18);

  /* ---------- Tipografia (Geist -> sustituto Inter) ---------- */
  --font-cuerpo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Modo oscuro: redefine solo la paleta base de arriba. Todo lo demas
   (--color-fondo, --color-primario, --color-alerta-*, etc.) se recalcula
   solo porque esta definido como var(--color-canvas) etc. en vez de un hex
   fijo -cambiar estos 8 valores basta para re-tematizar toda la app. */
[data-theme='dark'] {
  --color-canvas: #0a0a0a;
  --color-paper: #18181b;
  --color-surface-alt: #111113;
  --color-ink: #fafafa;
  --color-ink-soft: #e5e5e5;
  --color-mid-gray: #a1a1aa;
  --color-hairline: #27272a;
  --color-ember: #e7000b;

  --color-destructivo-fondo: rgba(231, 0, 11, 0.15);

  --sombra-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --sombra-modal: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px -8px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  background: var(--color-fondo);
  color: var(--color-texto);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--ancho-sidebar);
  flex-shrink: 0;
  background: var(--color-superficie-alt);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-pie {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-ajustes,
.sidebar-logout {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  color: var(--color-texto-suave);
  border-radius: var(--radio-boton);
  padding: 9px 12px;
}

.sidebar-logout:hover {
  color: var(--color-destructivo);
  background: var(--color-destructivo-fondo);
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 24px;
}

.sidebar-marca .icono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-marca-texto {
  line-height: 1.2;
}

.sidebar-marca-texto strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sidebar-marca-texto span {
  font-size: 12px;
  color: var(--color-texto-suave);
}

.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radio-boton);
  text-decoration: none;
  color: var(--color-texto-suave);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}

.sidebar-links a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.sidebar-links a:hover {
  color: var(--color-texto);
  background: rgba(10, 10, 10, 0.05);
}

.sidebar-links a.activo {
  background: var(--color-primario);
  color: var(--color-primario-texto);
}

/* ---------- Layout principal ---------- */

/* Envoltorio que router.js reemplaza al navegar (ver js/router.js). No
   genera caja propia: <main> sigue siendo hijo flex del body, junto a la
   barra lateral, igual que antes. */
#vista {
  display: contents;
}

body.navegando {
  cursor: progress;
}

main {
  flex: 1;
  min-width: 0;
  padding: 32px 36px;
  max-width: 1180px;
}

.encabezado-pagina {
  margin-bottom: 24px;
}

h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.subtitulo {
  color: var(--color-texto-suave);
  margin: 0;
  font-size: 14px;
}

/* ---------- Estadisticas (dashboard) ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  padding: 18px 20px;
  animation: subir-suave 0.25s ease-out;
}

.stat-numero {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat-etiqueta {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-suave);
  margin-top: 4px;
}

/* Vencido es el unico estado "destructivo" (mantenimiento atrasado = problema
   real); Proximo se queda acromatico, solo tipografia, sin tomar el rojo. */
.stat.vencido .stat-numero { color: var(--color-destructivo); }
.stat.proximo .stat-numero { color: var(--color-texto); }
.stat.ok .stat-numero { color: var(--color-texto); }

/* ---------- Graficos del dashboard ---------- */
/* Sin libreria de graficos en el proyecto: barras horizontales = divs con
   ancho en %, tendencia diaria = SVG chiquito hecho a mano (ver
   js/estadisticas.js). Un solo tono achromatico por grafico (--color-ink-soft
   o una progresion de grises) -el rojo queda reservado para lo destructivo,
   igual que en el resto de la app. */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.chart-barras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-barra-fila {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: var(--radio-small);
}

.chart-barra-fila:hover {
  background: var(--color-canvas);
}

.chart-barra-etiqueta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-barra-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-borde);
  flex-shrink: 0;
}

.chart-barra-track {
  position: relative;
  display: block;
  height: 10px;
  background: var(--color-canvas);
  border-radius: 999px;
  overflow: hidden;
}

.chart-barra-fill {
  position: absolute;
  inset: 0;
  display: block;
  width: 0;
  background: var(--color-ink-soft);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}

.chart-barra-valor {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-texto);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-vacio {
  color: var(--color-texto-suave);
  font-size: 13.5px;
  padding: 8px 0;
}

.chart-tendencia {
  position: relative;
}

.chart-tendencia svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: visible;
}

.chart-tendencia-hit {
  cursor: crosshair;
}

.chart-tendencia-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-primario);
  color: var(--color-primario-texto);
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radio-small);
  white-space: nowrap;
  transform: translate(-50%, -100%) translateY(-10px);
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 5;
  box-shadow: var(--sombra-modal);
}

.chart-tendencia-tooltip.visible {
  opacity: 1;
}

.chart-tendencia-tooltip strong {
  font-weight: 700;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  padding: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
  animation: subir-suave 0.25s ease-out;
}

@keyframes subir-suave {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tarjeta-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.tarjeta-titulo h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Tablas ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 560px;
}

th, td {
  text-align: left;
  padding: 11px 12px;
}

th {
  color: var(--color-texto-suave);
  font-weight: 500;
  font-size: 12.5px;
  border-bottom: 1px solid var(--color-borde);
}

tbody tr {
  border-bottom: 1px solid var(--color-borde);
  transition: background 0.1s;
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(10, 10, 10, 0.025);
}

.celda-principal {
  font-weight: 600;
}

.vacio {
  color: var(--color-texto-suave);
  font-size: 14px;
  padding: 28px 0;
  text-align: center;
}

/* ---------- Barra de acciones y filtros ---------- */

.barra-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filtros select {
  width: auto;
  min-width: 170px;
}

.input-busqueda {
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  background: var(--color-superficie);
  border-color: var(--color-borde);
}

.input-busqueda:focus {
  border-color: var(--color-primario);
}

.input-busqueda::-webkit-search-cancel-button {
  cursor: pointer;
}

.barra-acciones-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filtro-periodo-contenedor {
  position: relative;
}

#filtro-periodo {
  width: auto;
  min-width: 170px;
  border-color: var(--color-borde);
}

.filtro-periodo-custom {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  padding: 14px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-modal);
}

.filtro-periodo-custom .campo {
  margin-bottom: 0;
}

.filtro-periodo-custom[hidden] {
  display: none;
}

/* ---------- Controles ---------- */

button, select, input, textarea {
  font-family: inherit;
  font-size: 14px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radio-boton);
  padding: 9px 16px;
  background: var(--color-primario);
  color: var(--color-primario-texto);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, transform 0.05s;
}

/* button { display: inline-flex } tiene la misma especificidad que la regla
   [hidden] del navegador (display: none) y la gana por venir despues -sin
   esto, un <button hidden> igual se pinta como un circulo vacio (ver
   btn-detalle-avanzar cuando una orden ya esta "entregado"). */
button[hidden] {
  display: none;
}

button svg {
  width: 15px;
  height: 15px;
}

button:not(:disabled):hover {
  filter: brightness(1.3);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.secundario {
  background: var(--color-canvas);
  color: var(--color-texto);
}

button.peligro {
  background: transparent;
  color: var(--color-destructivo);
  border: 1px solid var(--color-hairline);
}

button.peligro:hover {
  background: var(--color-destructivo-fondo);
  border-color: var(--color-destructivo);
  filter: none;
}

button.pequeno {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: var(--radio-nested);
}

button.icono {
  padding: 7px;
  background: transparent;
  color: var(--color-texto-suave);
  border-radius: var(--radio-small);
}

button.icono:hover {
  background: rgba(10, 10, 10, 0.06);
  color: var(--color-texto);
  filter: none;
}

input, select, textarea {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  width: 100%;
  background: var(--color-input-fondo);
  color: var(--color-texto);
  transition: background 0.12s, border-color 0.12s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--color-superficie);
  border-color: var(--color-hairline);
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-texto-suave);
  margin-bottom: 6px;
}

.campo {
  margin-bottom: 16px;
}

/* ---------- Input con prefijo fijo (ej. telefono +502) ---------- */

.input-con-prefijo {
  display: flex;
  align-items: stretch;
  background: var(--color-input-fondo);
  border-radius: var(--radio-boton);
  overflow: hidden;
}

.input-con-prefijo .prefijo-fijo {
  display: flex;
  align-items: center;
  padding: 0 0 0 12px;
  color: var(--color-texto-suave);
  font-size: 14px;
  white-space: nowrap;
}

.input-con-prefijo input {
  background: transparent;
  border-radius: 0;
}

.input-con-prefijo:focus-within {
  background: var(--color-superficie);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radio-boton);
}

/* ---------- Placa: dropdown de prefijo + variable ---------- */

.placa-grupo {
  display: flex;
  gap: 8px;
}

.placa-grupo select {
  width: 92px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 600;
}

.placa-grupo input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------- Badges (capsula) ---------- */

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radio-boton);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Proximo = badge "soft" (acromatico); Vencido = el unico caso que toma el
   rojo, porque es un problema real, no decoracion. */
.badge-proximo {
  background: var(--color-alerta-fondo);
  color: var(--color-alerta-texto);
}

.badge-vencido {
  background: var(--color-destructivo-fondo);
  color: var(--color-destructivo);
}

.badge-estado-recibido { background: transparent; color: var(--color-texto); border-color: var(--color-hairline); }
.badge-estado-en_proceso { background: var(--color-canvas); color: var(--color-ink-soft); }
.badge-estado-terminado { background: var(--color-ink-soft); color: var(--color-surface-alt); }
.badge-estado-entregado { background: transparent; color: var(--color-mid-gray); border-color: var(--color-hairline); }

/* ---------- Modal ---------- */

.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
  animation: fondo-in 0.15s ease-out;
}

.modal-fondo[hidden] {
  display: none;
}

/* El QR se abre como modal anidado encima de otro modal (ej. kilometraje de
   salida), asi que necesita un z-index mayor para no quedar tapado. */
#modal-qr-fondo {
  z-index: 40;
}

.modal {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-modal);
  padding: 26px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fondo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.campo-invalido {
  border-color: var(--color-destructivo) !important;
  animation: campo-shake 0.3s;
}

@keyframes campo-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.modal h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-borde);
}

/* ---------- Detalle de orden (clic en una tarjeta del Kanban) ---------- */

.modal-detalle {
  max-width: 560px;
}

.detalle-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.detalle-header h2 {
  margin: 0 0 2px;
}

.detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 18px;
}

.detalle-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detalle-campo-ancho {
  margin-bottom: 18px;
}

.detalle-etiqueta {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-texto-suave);
}

.detalle-valor {
  font-size: 14px;
  color: var(--color-texto);
}

.detalle-servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ---------- Notas/observaciones (bitacora con fecha/hora) ---------- */

.notas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 12px;
  max-height: 220px;
  overflow-y: auto;
}

.nota-item {
  display: flex;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-borde);
}

.nota-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nota-fecha {
  flex-shrink: 0;
  width: 78px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-texto-suave);
}

.nota-texto {
  margin: 0;
  font-size: 14px;
  color: var(--color-texto);
  white-space: pre-wrap;
}

.nota-formulario {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.nota-formulario textarea {
  flex: 1;
  resize: none;
  background: var(--color-superficie-alt);
  border-color: var(--color-borde);
}

.nota-formulario textarea:focus {
  border-color: var(--color-primario);
}

@media (max-width: 480px) {
  .detalle-grid {
    grid-template-columns: 1fr;
  }

  .nota-formulario {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Historial de mantenimiento (popup, vehiculos.html) ---------- */

.modal-historial {
  max-width: 560px;
}

.lista-historial {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px 0 6px;
}

.historial-item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-nested);
  padding: 14px;
}

.historial-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 4px;
}

.historial-item-km {
  color: var(--color-texto-suave);
  font-weight: 500;
  font-size: 13px;
}

.historial-item-proxima {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--color-texto-suave);
}

.historial-item-servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.historial-item-obs {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-texto);
  white-space: pre-wrap;
}

.historial-item-fotos {
  margin: 0;
}

.lista-checks {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-nested);
  padding: 10px 12px;
  max-height: 160px;
  overflow-y: auto;
}

.lista-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-texto);
  margin-bottom: 8px;
}

.lista-checks label:last-child {
  margin-bottom: 0;
}

.lista-checks input {
  width: auto;
}

.campo-check .etiqueta-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-texto);
  margin-bottom: 0;
}

.campo-check .etiqueta-check input {
  width: auto;
}

.campo-check .campo-ayuda {
  margin: 6px 0 0;
}

/* ---------- Mensajes ---------- */

.mensaje-error {
  background: var(--color-destructivo-fondo);
  color: var(--color-destructivo);
  border: 1px solid var(--color-destructivo);
  border-radius: var(--radio-nested);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mensaje-error[hidden] {
  display: none;
}

.mensaje-exito {
  background: var(--color-exito-fondo);
  color: var(--color-exito-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-nested);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mensaje-exito[hidden] {
  display: none;
}

.ajustes-separador {
  height: 1px;
  background: var(--color-borde);
  margin: 22px 0;
}

/* Pestañas del modal de Ajustes (Cuenta / Plataforma): control segmentado,
   la pestaña activa "flota" sobre el fondo gris como una tarjeta. */
.tabs-ajustes {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: var(--color-canvas);
  border-radius: var(--radio-boton);
}

button.tab-ajustes {
  flex: 1;
  justify-content: center;
  padding: 7px 12px;
  background: transparent;
  color: var(--color-texto-suave);
  border-radius: calc(var(--radio-boton) - 4px);
  font-weight: 500;
}

button.tab-ajustes:hover {
  color: var(--color-texto);
  filter: none;
}

button.tab-ajustes.activo {
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-card);
}

/* Texto bajo el par kilometraje/fecha del modal "Terminar servicio". */
.ayuda-proxima-fecha {
  margin: -4px 0 18px;
  min-height: 1.2em;
}

.acciones-seccion {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Input numerico con la unidad pegada a la derecha ("120 dias"). */
.input-sufijo {
  position: relative;
}

.input-sufijo input {
  padding-right: 44px;
  font-variant-numeric: tabular-nums;
}

.input-sufijo span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--color-texto-suave);
  pointer-events: none;
}

/* ---------- Fotos de evidencia (nueva orden) ---------- */

.campo-ayuda {
  margin: -2px 0 10px;
}

.grid-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.foto-miniatura {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radio-nested);
  overflow: hidden;
  border: 1px solid var(--color-borde);
  background: var(--color-input-fondo);
}

.foto-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.12s ease;
}

.foto-miniatura img:hover {
  opacity: 0.85;
}

.foto-quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fotos-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Modal de QR ---------- */

.modal-qr {
  text-align: center;
}

.qr-contenedor {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  padding: 12px;
  background: #fff;
  border-radius: var(--radio-nested);
}

.qr-contenedor svg {
  width: 200px;
  height: 200px;
}

.qr-estado {
  font-weight: 500;
  margin-bottom: 0;
}

.grid-fotos-ver {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  margin-top: 16px;
}

/* ---------- Lightbox (ampliar foto) ---------- */

.lightbox-fondo {
  background: rgba(10, 10, 10, 0.85);
  z-index: 60;
}

.lightbox-contenido {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  animation: modal-in 0.15s ease-out;
}

.lightbox-contenido img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radio-nested);
  box-shadow: var(--sombra-modal);
}

.lightbox-cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--color-primario-texto);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-card);
}

/* Navegacion entre varias fotos (ver abrirGaleria en ordenes.js): dentro del
   marco de la imagen, no fuera como el boton de cerrar, para no cortarse en
   pantallas angostas. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-nav-anterior {
  left: 8px;
}

.lightbox-nav-siguiente {
  right: 8px;
}

.lightbox-contador {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0;
}

.lightbox-contador[hidden] {
  display: none;
}

/* ---------- Timeline de fotos (modal "Fotos de la orden") ---------- */
/* 2 etapas como maximo (ingreso/terminado), asi que el timeline nunca crece
   mas alla de 2 nodos: Recibido siempre a la izquierda, Terminado siempre a
   la derecha (ver LADO_TIPO_FOTO en ordenes.js). Cada nodo es una fila de
   grid [lado-izq | punto | lado-der]; el conector va en el mismo flex que el
   contenido (etiqueta+fecha+fotos), asi que siempre queda pegado tanto al
   stack de fotos como al punto central sin depender de anchos fijos. */

.timeline-fotos {
  position: relative;
  padding: 6px 0;
}

.timeline-linea {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-hairline);
  transform: translateX(-50%);
}

.timeline-nodo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 160px;
}

.timeline-nodo:last-child {
  min-height: 0;
}

.timeline-lado {
  display: flex;
  align-items: center;
}

.timeline-lado-izq {
  justify-content: flex-end;
}

.timeline-lado-der {
  justify-content: flex-start;
}

.timeline-conector {
  width: 32px;
  height: 1px;
  background: var(--color-hairline);
  flex-shrink: 0;
}

.timeline-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ink);
  z-index: 1;
  justify-self: center;
}

.timeline-contenido {
  width: 130px;
  text-align: center;
}

.timeline-etiqueta {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

.timeline-fecha {
  color: var(--color-texto-suave);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.timeline-foto-stack {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  cursor: pointer;
}

.timeline-foto-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-nested);
  background: var(--color-superficie);
  box-shadow: var(--sombra-card);
  transform: translate(calc(var(--offset, 0) * 5px), calc(var(--offset, 0) * 5px));
  z-index: calc(4 - var(--offset, 0));
  transition: transform 0.15s ease;
}

.timeline-foto-stack:hover img {
  transform: translate(calc(var(--offset, 0) * 8px), calc(var(--offset, 0) * -8px));
}

.timeline-foto-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: var(--color-ink);
  color: var(--color-surface-alt);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  z-index: 5;
  box-shadow: var(--sombra-card);
}

/* Angosto: una sola columna de contenido a la derecha del eje (izq y der
   comparten la misma celda de grid; nunca tienen contenido al mismo tiempo,
   asi que no se superponen). El conector de "izquierda" se reordena para
   quedar pegado al punto igual que el de "derecha". */
@media (max-width: 480px) {
  .timeline-linea {
    left: 5px;
  }

  .timeline-nodo {
    grid-template-columns: 10px 1fr;
  }

  .timeline-lado-izq,
  .timeline-lado-der {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
  }

  .timeline-lado-izq .timeline-conector {
    order: -1;
  }

  .timeline-punto {
    grid-column: 1;
  }

  .timeline-contenido {
    width: auto;
    text-align: left;
  }

  .timeline-foto-stack {
    margin: 0;
  }
}

/* ---------- Toasts ---------- */

.toast-contenedor {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}

.toast {
  background: var(--color-ink-soft);
  color: var(--color-surface-alt);
  padding: 12px 16px;
  border-radius: var(--radio-nested);
  font-size: 13.5px;
  box-shadow: var(--sombra-modal);
  max-width: 320px;
  animation: toast-in 0.18s ease-out;
}

.toast.exito { background: var(--color-ink-soft); color: var(--color-surface-alt); }
.toast.error { background: var(--color-destructivo); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Acciones de fila ---------- */

.acciones-fila {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- Tablero Kanban (ordenes de servicio) ---------- */

.tablero-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.columna-kanban {
  background: var(--color-superficie-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}

.columna-kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-borde);
}

.columna-kanban-contador {
  background: var(--color-input-fondo);
  color: var(--color-texto-suave);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}

.columna-kanban-lista {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.columna-kanban-vacio {
  color: var(--color-texto-suave);
  font-size: 13px;
  text-align: center;
  padding: 20px 8px;
  margin: 0;
}

.tarjeta-orden {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-nested);
  box-shadow: var(--sombra-card);
  padding: 14px;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta-orden[draggable='true'] {
  cursor: grab;
}

.tarjeta-orden-arrastrando {
  opacity: 0.4;
  cursor: grabbing;
}

.columna-kanban-destino {
  border-color: var(--color-primario);
}

.columna-kanban-sobre {
  background: var(--color-input-fondo);
  outline: 2px dashed var(--color-primario);
  outline-offset: -4px;
}

/* Retroceso (arrastrar una tarjeta a su estado anterior): usa el color
   "ember", el mismo reservado para acciones destructivas/de precaucion en
   el resto de la UI, para distinguirlo visualmente del avance normal. */
.columna-kanban-destino-retroceso {
  border-color: var(--color-ember);
}

.columna-kanban-sobre-retroceso {
  background: var(--color-destructivo-fondo);
  outline: 2px dashed var(--color-ember);
  outline-offset: -4px;
}

.tarjeta-orden-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.tarjeta-orden-placa {
  font-weight: 700;
  font-size: 14px;
}

.tarjeta-orden-numero {
  font-size: 12px;
  color: var(--color-texto-suave);
  flex-shrink: 0;
}

.tarjeta-orden-detalle {
  font-size: 13px;
  color: var(--color-texto-suave);
  margin: 2px 0;
}

.tarjeta-orden-servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.tarjeta-orden-acciones {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tarjeta-orden-acciones button {
  flex: 1;
  justify-content: center;
}

@media (max-width: 860px) {
  .tablero-kanban {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }

  .columna-kanban {
    max-height: none;
  }
}

.celda-fecha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Switch de modo oscuro (sol/luna) ---------- */

.boton-tema {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  width: 52px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-input-fondo);
  border: 1px solid var(--color-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.boton-tema .tema-icono {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  transition: color 0.15s ease;
}

.boton-tema .tema-icono svg {
  width: 100%;
  height: 100%;
}

.boton-tema .tema-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-superficie);
  box-shadow: var(--sombra-card);
  transition: transform 0.2s ease;
}

[data-theme='dark'] .boton-tema .tema-thumb {
  transform: translateX(24px);
}

[data-theme='light'] .boton-tema .tema-icono-sol,
[data-theme='dark'] .boton-tema .tema-icono-luna {
  color: var(--color-texto);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: 14px;
  }

  .sidebar-marca {
    margin-bottom: 12px;
  }

  .sidebar-links {
    flex-direction: row;
    overflow-x: auto;
  }

  .sidebar-links a {
    white-space: nowrap;
  }

  main {
    padding: 20px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}