:root {
  --fondo: #f4f6f9;
  --panel: #ffffff;
  --borde: #e2e7ee;
  --texto: #1e2733;
  --suave: #6b7a8d;
  --azul: #1f5fa8;
  --azul-claro: #eaf2fb;
  --verde: #1c7f4e;
  --verde-claro: #e6f5ed;
  --rojo: #c0392b;
  --rojo-claro: #fdecea;
  --amarillo: #b7791f;
  --amarillo-claro: #fdf6e3;
  --sombra: 0 1px 3px rgba(16, 32, 55, .08), 0 4px 16px rgba(16, 32, 55, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

/* ---------- Barra lateral ---------- */
.barra {
  width: 240px;
  flex-shrink: 0;
  background: #16283f;
  color: #cfdcec;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
/* La marca y el pie no se encogen: el que cede lugar es el menú, que a cambio scrollea. */
.marca { display: flex; gap: 10px; align-items: center; padding: 20px 18px; border-bottom: 1px solid #24384f; flex-shrink: 0; }
.marca-icono { font-size: 26px; }
.marca strong { display: block; color: #fff; font-size: 15px; }
.marca small { color: #8fa4bd; font-size: 12px; }

/* Con catorce módulos el menú no entra en una pantalla baja (o con el navegador con zoom),
   así que scrollea por su cuenta. El `min-height: 0` no es decorativo: sin él, un hijo de
   un contenedor flex no se encoge por debajo de su contenido, se desborda y empuja el pie
   de la barra fuera de la pantalla en vez de aparecer la barra de desplazamiento. */
.barra nav {
  display: flex; flex-direction: column; padding: 12px 10px; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
  /* Al llegar al final del menú no arrastra el scroll de la página de atrás. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #334d6e #16283f;
}
.barra nav::-webkit-scrollbar { width: 8px; }
.barra nav::-webkit-scrollbar-track { background: #16283f; }
.barra nav::-webkit-scrollbar-thumb { background: #334d6e; border-radius: 4px; }
.barra nav::-webkit-scrollbar-thumb:hover { background: #456b94; }
.nav {
  text-align: left; background: none; border: 0; color: #cfdcec; padding: 10px 12px;
  border-radius: 7px; cursor: pointer; font-size: 14px; font-family: inherit;
  flex-shrink: 0;
}
.nav:hover { background: #1f3550; color: #fff; }
.nav.activo { background: var(--azul); color: #fff; font-weight: 600; }
.barra-pie { padding: 14px; border-top: 1px solid #24384f; display: grid; gap: 6px; flex-shrink: 0; }
.btn-texto { background: none; border: 0; color: #8fa4bd; cursor: pointer; text-align: left; font-size: 13px; padding: 0; font-family: inherit; }
.btn-texto:hover { color: #fff; }
.barra-pie small { color: #6d8199; font-size: 11px; }

/* ---------- Contenido ---------- */
main { flex: 1; padding: 26px 32px 60px; max-width: 1500px; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.encabezado h1 { margin: 0; font-size: 23px; }
.encabezado .sub { color: var(--suave); font-size: 13px; margin-top: 2px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; box-shadow: var(--sombra); }
.tarjeta .etiqueta { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.tarjeta .valor { font-size: 26px; font-weight: 700; margin-top: 6px; }
.tarjeta .detalle { color: var(--suave); font-size: 12px; margin-top: 4px; }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); margin-bottom: 20px; overflow: hidden; }
.panel > h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--borde); font-size: 15px; }
.panel-cuerpo { padding: 16px 18px; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid var(--borde); color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid #f0f3f7; vertical-align: middle; }
tbody tr:hover { background: #fafcfe; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { padding: 34px; text-align: center; color: var(--suave); }

/* ---------- Botones ---------- */
.btn { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); padding: 8px 14px; border-radius: 7px; cursor: pointer; font-size: 14px; font-family: inherit; }
.btn:hover { background: #f3f6fa; }
.btn-azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-azul:hover { background: #17518f; }
.btn-rojo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover { background: #166a41; }
.btn-gris { background: #f1f4f8; }
.btn-mini { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- Formularios ---------- */
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--borde);
  border-radius: 7px; background: #fff; color: var(--texto); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
textarea { min-height: 64px; resize: vertical; }
label.campo { display: block; }
label.campo span { display: block; font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.filtros label.campo { min-width: 150px; }
.filtros input, .filtros select { width: auto; min-width: 150px; }

/* ---------- Campos que se repiten en renglones ---------- */
/* Hay datos que no son uno solo: un trabajo de taller puede llevar varias facturas de
   varios proveedores. La grilla deja agregar y quitar filas. El ancho de las columnas
   lo pone el formulario en --rg-cols, así sirve para cualquier juego de columnas. */
div.campo > span { display: block; font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.renglones-campo { border: 1px solid var(--borde); border-radius: 8px; padding: 10px; background: #f8fafc; }
.rg-encabezado, .rg-fila { display: grid; grid-template-columns: var(--rg-cols) 34px; gap: 8px; align-items: center; }
.rg-encabezado { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; padding: 0 2px; }
.rg-filas { display: grid; gap: 6px; }
.rg-fila input { padding: 6px 8px; font-size: 13px; }
.rg-fila input.num { text-align: right; font-variant-numeric: tabular-nums; }
.rg-fila .btn-mini { padding: 4px 0; color: var(--rojo); }
.rg-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rg-total { font-size: 12px; color: var(--suave); }

/* En pantalla angosta cada renglón se apila; los campos se reconocen por el texto guía. */
@media (max-width: 700px) {
  .rg-encabezado { display: none; }
  .rg-fila { grid-template-columns: 1fr 34px; align-items: start; }
  .rg-fila input { grid-column: 1; }
  .rg-fila .btn-mini { grid-column: 2; grid-row: 1; }
  .rg-filas { gap: 14px; }
}

/* ==================================================================
   MODO CHOFER
   Un chofer entra desde el celular, con el camión andando o en una estación de servicio.
   No necesita un menú ni tablas: necesita ver su viaje y poder cargar un gasto en diez
   segundos. Por eso acá todo es más grande, en una sola columna y con los botones al
   alcance del pulgar.
   ================================================================== */
.modo-chofer { display: block; }
.modo-chofer main { padding: 14px 14px 40px; max-width: 100%; }

.barra-chofer {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: #16283f; color: #fff;
}
.bc-marca { display: flex; gap: 10px; align-items: center; }
.bc-marca strong { display: block; font-size: 15px; }
.bc-marca small { color: #8fa4bd; font-size: 12px; }
.bc-menu {
  background: none; border: 0; color: #cfdcec; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
}
.bc-menu:hover, .bc-menu:focus { background: #1f3550; color: #fff; }
.bc-desplegable {
  position: absolute; top: 56px; right: 10px; z-index: 31;
  background: #1f3550; border-radius: 10px; padding: 8px;
  display: grid; gap: 4px; min-width: 210px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bc-desplegable .btn-texto { color: #cfdcec; padding: 10px 12px; border-radius: 7px; }
.bc-desplegable .btn-texto:hover { background: #2a4463; color: #fff; }

/* En una tarjeta angosta un importe largo se desborda: se achica y se deja partir. */
.modo-chofer .tarjetas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.modo-chofer .tarjeta .valor { font-size: 19px; overflow-wrap: anywhere; }
.modo-chofer .tarjeta { padding: 12px 13px; }

/* Botones grandes: se tocan con el pulgar, no se apunta con el mouse. */
.modo-chofer .btn { padding: 12px 16px; font-size: 15px; border-radius: 9px; }
.modo-chofer .btn-mini { padding: 8px 12px; font-size: 13px; }
.modo-chofer .encabezado h1 { font-size: 20px; }
.modo-chofer .panel { border-radius: 12px; }

/* El botón que más se toca: ancho completo y alto suficiente para el pulgar. */
.boton-grande {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 15px 16px; font-size: 16px; font-weight: 600; border-radius: 10px;
}

/* Resumen del viaje en renglones: etiqueta a la izquierda, dato a la derecha. En una
   pantalla angosta esto entra entero, mientras que una grilla de tarjetas obliga a
   scrollear y desborda los importes largos. */
.datos-chofer { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; margin-top: 16px; }
.dato-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 13px; background: #fff; }
.dato-fila > span { color: var(--suave); font-size: 13px; flex-shrink: 0; }
.dato-fila > strong { text-align: right; font-size: 16px; }
.dato-fila > strong small { display: block; color: var(--suave); font-size: 12px; font-weight: 400; margin-top: 1px; }

/* Las acciones del viaje son lo que más se usa: van en bloque, grandes y separadas. */
.acciones-chofer { display: grid; gap: 10px; }
.acciones-chofer .btn {
  width: 100%; justify-content: center; text-align: center;
  padding: 15px 16px; font-size: 16px; font-weight: 600;
}

/* ---------- Factura de venta del mes ---------- */
/* Se emite por unidad y por mes, así que va en su propio bloque dentro del panel de la
   unidad, separado de la tabla de viajes. */
.factura-caja { border: 1px solid var(--borde); border-radius: 8px; background: #f8fafc; overflow: hidden; }
.factura-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.factura-caja table { background: #fff; }

/* ---------- Listas de casillas ---------- */
/* Para marcar varias cosas de una lista: los items del plan que un service cumplió.
   El color del borde adelanta qué está vencido antes de leer el texto. */
.casillas { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 10px; background: #f8fafc; }
.casilla { display: flex; gap: 10px; align-items: flex-start; padding: 7px 9px; border: 1px solid var(--borde); border-left-width: 3px; border-radius: 7px; background: #fff; cursor: pointer; }
.casilla:hover { border-color: var(--azul); }
.casilla input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.casilla-texto { font-size: 13px; }
.casilla-texto small { display: block; color: var(--suave); font-size: 11px; }
.casilla-rojo { border-left-color: var(--rojo); }
.casilla-amarillo { border-left-color: var(--amarillo); }

/* ---------- Etiquetas de estado ---------- */
.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-verde { background: var(--verde-claro); color: var(--verde); }
.chip-rojo { background: var(--rojo-claro); color: var(--rojo); }
.chip-amarillo { background: var(--amarillo-claro); color: var(--amarillo); }
.chip-gris { background: #eef1f5; color: var(--suave); }
.chip-azul { background: var(--azul-claro); color: var(--azul); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(16, 28, 45, .5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal.oculto { display: none; }
.modal-caja { background: var(--panel); border-radius: 12px; width: min(880px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.modal-cabecera h2 { margin: 0; font-size: 17px; }
.btn-cerrar { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--suave); }
.modal-cuerpo { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.modal-cuerpo .ancho-total { grid-column: 1 / -1; }
.modal-cuerpo h4 { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); border-top: 1px solid var(--borde); padding-top: 14px; }
.modal-cuerpo h4:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.modal-pie { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.error { color: var(--rojo); font-size: 13px; margin-right: auto; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 10px; z-index: 100; }
.aviso { background: #16283f; color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; max-width: 420px; animation: entrar .2s ease; }
.aviso.ok { background: var(--verde); }
.aviso.mal { background: var(--rojo); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Barras de reporte ---------- */
.barra-dato { height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; min-width: 70px; }
.barra-dato > span { display: block; height: 100%; background: var(--azul); }

.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.ficha-datos div span { display: block; font-size: 12px; color: var(--suave); }
.ficha-datos div strong { font-size: 15px; font-weight: 600; }

/* ---------- Login ---------- */
.oculto { display: none !important; }
.login { position: fixed; inset: 0; background: #16283f; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.login-caja { background: var(--panel); border-radius: 12px; padding: 28px; width: min(370px, 100%); display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.login-marca strong { display: block; font-size: 17px; }
.login-marca small { color: var(--suave); font-size: 12px; }
.login-caja .error { margin: 0; min-height: 18px; }
.login-caja .btn { width: 100%; padding: 11px; font-size: 15px; }

.usuario-actual { padding-bottom: 6px; border-bottom: 1px solid #24384f; margin-bottom: 6px; }
.usuario-actual strong { display: block; color: #fff; font-size: 13px; }
.usuario-actual small { color: #8fa4bd; font-size: 11px; }

/* ---------- Semáforo del objetivo ---------- */
.semaforo {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  vertical-align: middle; box-shadow: inset 0 -1px 2px rgba(0,0,0,.25);
}

/* ---------- Tramos del viaje ---------- */
.tramos { display: grid; gap: 0; }
.tramo { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; position: relative; }
.tramo:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: -4px;
  width: 2px; background: var(--borde);
}
.tramo-numero {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--borde); color: var(--suave);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; z-index: 1;
}
.tramo-curso .tramo-numero { background: var(--verde); color: #fff; }
.tramo-cuerpo { flex: 1; padding-top: 4px; }
.tramo-cuerpo strong { display: block; font-size: 14px; }
.tramo-cuerpo small { color: var(--suave); }
/* La espera va en su propio renglon: es una frase, y mezclada con los otros datos
   del tramo se parte por la mitad al ajustarse el ancho. */
.tramo-espera { display: block; margin-top: 3px; }
.tramo-espera .en-linea { font-weight: 700; }

/* ---------- Viaje abierto ---------- */
.renglones { display: grid; gap: 8px; }
.renglon { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.renglon .cuando { color: var(--suave); font-size: 12px; white-space: nowrap; min-width: 92px; }
.renglon .cuerpo { flex: 1; }
.renglon .cuerpo strong { display: block; font-size: 14px; }
.renglon .cuerpo small { color: var(--suave); }
.renglon .importe { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

pre.crudo { background: #f8fafc; border: 1px solid var(--borde); border-radius: 7px; padding: 12px; overflow-x: auto; font-size: 12px; max-height: 260px; }

/* ==================================================================
   PANTALLA CHICA
   Va al final del archivo a propósito: tiene que poder pisar cualquier regla anterior.
   Si estuviera más arriba, las reglas del modal —que vienen después— la anularían.
   ================================================================== */
@media (max-width: 760px) {
  /* La barra lateral deja de ocupar lugar: pasa a ser una franja arriba. */
  body { display: block; }
  .barra { position: static; width: 100%; height: auto; }
  .barra nav { max-height: 220px; }
  main { padding: 14px 14px 40px; max-width: 100%; }

  .encabezado { flex-direction: column; align-items: stretch; gap: 10px; }
  .encabezado .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tarjeta .valor { font-size: 20px; overflow-wrap: anywhere; }

  /* El formulario ocupa la pantalla entera: una columna, campos altos para el dedo y el
     pie siempre a la vista, sin tener que scrollear hasta el fondo para guardar. */
  .modal { padding: 0; align-items: stretch; }
  .modal-caja { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
  .modal-cuerpo { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .modal-cuerpo input, .modal-cuerpo select, .modal-cuerpo textarea {
    padding: 12px; font-size: 16px;   /* 16px evita que el celular haga zoom al tocar */
  }
  .modal-pie { position: sticky; bottom: 0; background: var(--panel); padding: 12px 16px; }
  .modal-pie .btn { flex: 1; justify-content: center; padding: 13px 16px; font-size: 15px; }

  .renglon { flex-wrap: wrap; }
  .renglon .cuando { min-width: 0; }
  .tabla-scroll { overflow-x: auto; }
}