/* ═══════════════════════════════════════════════════════════════════════════
   ENRUTA — CSS base y guía visual
   ═══════════════════════════════════════════════════════════════════════════
   Única fuente de verdad para colores, espaciado, tipografía, radios y sombras.
   Carga DESPUÉS de Bootstrap en base.html; los templates NO deben hardcodear
   hex ni tamaños nuevos: usar var(--en-*). Los valores replican la paleta que
   ya usaba la app (slate + azul + verde + ámbar + rojo) — adoptar un token es
   un cambio invisible si el valor era el mismo.

   CÓMO USAR (guía rápida):
   - Texto:      color: var(--en-text) | --en-text-2 (secundario) | --en-text-3 (muted)
   - Fondos:     var(--en-bg) (página) | --en-surface (cards) | --en-surface-2 (franjas)
   - Bordes:     border-color: var(--en-border)
   - Marca/acción: var(--en-primary) (+ -dark para hover, -soft para fondos suaves)
   - Estados:    --en-success / --en-warning / --en-danger (+ -soft y -text por estado)
   - Espaciado:  var(--en-sp-1..6)  (4/8/12/16/24/32 px)
   - Radios:     var(--en-r-sm|md|lg|pill)   Sombras: var(--en-shadow-sm|md|lg)
   - Tipos:      var(--en-fs-xs|sm|base|md|lg)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta neutra (slate — la que ya usa toda la app) ── */
  --en-slate-50:  #f8fafc;
  --en-slate-100: #f1f5f9;
  --en-slate-200: #e2e8f0;
  --en-slate-300: #cbd5e1;
  --en-slate-400: #94a3b8;
  --en-slate-500: #64748b;
  --en-slate-600: #475569;
  --en-slate-800: #1e293b;

  /* ── Roles semánticos (usar ESTOS, no la paleta cruda) ── */
  --en-text:      #1e293b;   /* titulares y texto principal */
  --en-text-2:    #64748b;   /* texto secundario */
  --en-text-3:    #94a3b8;   /* muted / hints */
  --en-bg:        #f8f9fa;   /* fondo de página (bg-light de bootstrap) */
  --en-surface:   #ffffff;   /* cards / paneles */
  --en-surface-2: #f1f5f9;   /* franjas, headers de tabla, hover suave */
  --en-border:    #e5e7eb;

  /* ── Marca / acción (azul que ya domina la UI) ── */
  --en-primary:      #3b82f6;
  --en-primary-dark: #1e40af;
  --en-primary-soft: #dbeafe;

  /* ── Estados ── */
  --en-success:       #10b981;
  --en-success-soft:  #d1fae5;
  --en-success-text:  #065f46;
  --en-warning:       #f59e0b;
  --en-warning-soft:  #fef3c7;
  --en-warning-text:  #92400e;
  --en-danger:        #dc2626;
  --en-danger-soft:   #fee2e2;
  --en-danger-text:   #991b1b;

  /* ── Espaciado (4px base) ── */
  --en-sp-1: .25rem;   /*  4px */
  --en-sp-2: .5rem;    /*  8px */
  --en-sp-3: .75rem;   /* 12px */
  --en-sp-4: 1rem;     /* 16px */
  --en-sp-5: 1.5rem;   /* 24px */
  --en-sp-6: 2rem;     /* 32px */

  /* ── Radios y sombras ── */
  --en-r-sm:  .375rem;
  --en-r-md:  .5rem;    /* cards (valor actual) */
  --en-r-lg:  .75rem;
  --en-r-pill: 50rem;
  --en-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --en-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --en-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  /* ── Tipografía (escala compacta actual) ── */
  --en-fs-xs:   .75rem;
  --en-fs-sm:   .85rem;   /* tamaño de trabajo de la app */
  --en-fs-base: .9rem;
  --en-fs-md:   1rem;
  --en-fs-lg:   1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE (migrado tal cual desde el <style> de base.html — sin cambio visual)
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0;
       font-size: var(--en-fs-base); line-height: 1.55; }
main { flex: 1; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hover-shadow { transition: box-shadow .2s ease, transform .2s ease; }
.hover-shadow:hover { box-shadow: var(--en-shadow-lg) !important; transform: translateY(-2px); }

/* ── Desktop compact ── */
h1, .h1 { font-size: 1.4rem; }
h2, .h2 { font-size: var(--en-fs-lg); }
h3, .h3 { font-size: 1.1rem; }
h4, .h4 { font-size: var(--en-fs-md); }
h5, .h5 { font-size: var(--en-fs-base); }
h6, .h6 { font-size: var(--en-fs-sm); }
.navbar { padding-top: .35rem; padding-bottom: .35rem; }
.navbar-brand { font-size: .95rem !important; }
.nav-link { font-size: var(--en-fs-sm); padding-top: .35rem; padding-bottom: .35rem; }
.table { font-size: var(--en-fs-sm); }
.table th, .table td { padding: .4rem .55rem; }
.btn { font-size: var(--en-fs-sm); padding: .35rem .7rem; }
.btn-sm { font-size: .78rem; padding: .25rem .5rem; }
.btn-lg { font-size: var(--en-fs-base); padding: .45rem .9rem; }
.card { border-radius: var(--en-r-md); }
.card-body { padding: .8rem; }
.card-header { padding: .5rem .8rem; font-size: var(--en-fs-sm); }
.badge { font-size: var(--en-fs-xs); }
.form-control, .form-select { font-size: var(--en-fs-sm); padding: .35rem .6rem; }
.form-label { font-size: var(--en-fs-sm); margin-bottom: var(--en-sp-1); }
.alert { font-size: var(--en-fs-sm); padding: .55rem .8rem; }
.container.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.container.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.container.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.container.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.container.mt-4 { margin-top: 1rem !important; }
.modal-title { font-size: var(--en-fs-md); }
.modal-body { font-size: var(--en-fs-sm); }
.pagination { --bs-pagination-font-size: .85rem; --bs-pagination-padding-x: .55rem; --bs-pagination-padding-y: .3rem; }
footer { font-size: .8rem; padding: .5rem 0; }

/* ── Accessibility: focus states ── */
:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .35); }
.form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); }

/* ── Mobile only: prevent Chrome desktop mode ── */
@media (max-width: 767.98px) {
  html { overflow-x: clip; width: 100%; max-width: 100vw; font-size: 14px; }
  body { overflow-x: clip; width: 100%; max-width: 100vw; }
  main { width: 100%; max-width: 100vw; overflow-x: clip; }
  main img, main video, main canvas, main svg { max-width: 100%; height: auto; }
  .container, .container-fluid, .container-sm, .container-md,
  .container-lg, .container-xl, .container-xxl {
    max-width: 100vw; overflow-x: clip;
  }
  .table-responsive { max-width: 100vw; width: 100%; contain: inline-size; }
  .dropdown-menu { max-width: calc(100vw - 1rem); }
  .container { max-width: 100% !important; padding-left: 10px; padding-right: 10px; }
  .table th, .table td { padding: .35rem .3rem; }
  .btn-sm { font-size: .75rem; padding: .2rem .4rem; }
  .card-body { padding: .7rem; }
  .badge { font-size: .7rem; }
  select.form-select { max-width: min(150px, 40vw); }
  .d-mobile-none { display: none !important; }
  .modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); }
  .assignment-controls { flex-wrap: wrap; }
  .sol-item { padding: 0.6rem; }
  .navbar .dropdown-menu { min-width: auto; }
  .row { margin-left: 0; margin-right: 0; }
  .row > * { max-width: 100%; }
  .navbar-brand { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-brand .fs-5 { font-size: .9rem !important; }
  .text-nowrap { white-space: normal !important; }
  .navbar-collapse .nav-link span { display: inline !important; }
}

/* ═══ Componentes compartidos del módulo de viajes/auditoría ═══════════════
   Vivían copiados en cada template y YA estaban divergiendo (un .panel
   perdió su sombra; las .filtros-card tenían márgenes distintos). Acá hay
   UNA definición; los templates solo agregan sus ajustes puntuales. */

/* Panel: la tarjeta base de contenido */
.panel {
  border: 1px solid var(--en-border);
  border-radius: var(--en-r-md);
  background: var(--en-surface);
  box-shadow: var(--en-shadow-sm);
}

/* Tarjeta de filtros: agrupa los controles como una unidad */
.filtros-card {
  background: var(--en-surface);
  border: 1px solid var(--en-border);
  border-radius: var(--en-r-md);
  padding: var(--en-sp-3);
  margin-bottom: var(--en-sp-4);
  box-shadow: var(--en-shadow-sm);
}
.filtro-lbl {
  display: block;
  font-size: var(--en-fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--en-text-3);
  margin-bottom: .2rem;
}
/* Los input[type=date] de Chrome traen un ancho intrinseco enorme
   (placeholder dd-mm-aaaa + icono): sin esto empujan la fila entera. */
.filtros-card input[type="date"] { min-width: 0; }
@media (min-width: 992px) {
  .filtros-card input[type="date"] { width: 9.5rem; }
}

/* Resultado de plata en palabras (partial _resultado_plata.html) */
.saldo-pos { color: var(--en-success-text); font-weight: 600; }
.saldo-neg { color: var(--en-danger-text); font-weight: 600; }

/* Filtros de la línea de tiempo del viaje (conductor y detalle admin).
   Con 100 peajes la lista mezclada es ilegible: estos chips dejan mirar UN
   tipo a la vez. Van holgados porque en el celular se aprietan con el pulgar. */
.filtros-mov {
  display: flex; gap: var(--en-sp-1); overflow-x: auto;
  padding-bottom: var(--en-sp-2); margin-bottom: var(--en-sp-1);
  -webkit-overflow-scrolling: touch;
}
.chip-mov {
  flex: 0 0 auto; min-height: 38px;
  border: 1px solid var(--en-border); background: var(--en-surface);
  color: var(--en-text-2); border-radius: var(--en-r-pill);
  padding: .35rem .8rem; font-size: var(--en-fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.chip-mov .n {
  background: var(--en-surface-2); color: var(--en-text-3);
  border-radius: var(--en-r-pill); padding: 0 .4rem;
  font-size: var(--en-fs-xs); font-weight: 700;
}
.chip-mov.activo {
  background: var(--en-primary); border-color: var(--en-primary); color: #fff;
}
.chip-mov.activo .n { background: rgba(255,255,255,.25); color: #fff; }

/* Botón "Volver" — antes era un enlace gris chiquito (poco visible y difícil
   de apretar en el celular). Ahora es un pill con borde, táctil, con la
   flecha que se desliza al pasar el mouse. Compartido por todo el módulo. */
.btn-volver {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .95rem; min-height: 40px;
  border: 1px solid var(--en-border); border-radius: var(--en-r-pill);
  background: var(--en-surface); color: var(--en-text-2);
  font-size: var(--en-fs-sm); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-volver:hover {
  background: var(--en-surface-2); border-color: var(--en-text-3);
  color: var(--en-text);
}
.btn-volver i { transition: transform .15s; }
.btn-volver:hover i { transform: translateX(-3px); }

/* Línea de tiempo del viaje de carga (movimientos). Vivía en el bloque local
   de conductor_viaje.html; se compartió cuando el detalle de viajes pasados
   del conductor pasó a usar el mismo markup. */
.mov { display: flex; gap: var(--en-sp-3); padding: var(--en-sp-3) 0; border-bottom: 1px solid var(--en-border); }
.mov:last-child { border-bottom: 0; }
.mov-icono {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .9rem;
  background: var(--en-surface-2); color: var(--en-text-3);
}
.mov.entrega  .mov-icono { background: var(--en-success-soft); color: var(--en-success-text); }
.mov.gasto    .mov-icono { background: var(--en-warning-soft); color: var(--en-warning-text); }
.mov.otros    .mov-icono { background: var(--en-surface-2); color: var(--en-text-2); }
.mov.bitacora .mov-icono { background: var(--en-primary-soft); color: var(--en-primary-dark); }
.mov-cuerpo { flex-grow: 1; min-width: 0; }
.mov-titulo { font-weight: 600; color: var(--en-text); font-size: var(--en-fs-base); }
.mov-detalle { font-size: var(--en-fs-sm); color: var(--en-text-2); }
.mov-meta { font-size: var(--en-fs-xs); color: var(--en-text-3); }
.mov-monto { font-weight: 700; white-space: nowrap; }
.mov-monto.mas { color: var(--en-success-text); }