/* ANKAYAGE 3.0 — sistema visual
   Minimalista: un solo color de tinta, hairlines, sin sombras decorativas.
   Escala de 4px, radio 8px, números tabulares. */

:root{
  --tinta:#0e2f66;
  --tinta-suave:#eaf0fa;
  --fondo:#fbfbfa;
  --panel:#ffffff;
  --borde:#e5e3de;
  --borde-fuerte:#d3d0c9;
  --texto:#1d1d1b;
  --texto2:#6b6a65;
  --texto3:#97968f;
  --verde:#2f7d4f;
  --verde-suave:#eaf4ee;
  --ambar:#a86a00;
  --ambar-suave:#fdf3e0;
  --rojo:#a4262c;
  --rojo-suave:#fbeced;
  --r:8px;
  --r-chico:6px;
  --sombra:0 10px 40px rgba(25,24,20,.12);
  --lateral:220px;
}

*{box-sizing:border-box}
html,body{height:100%}

/* El atributo `hidden` de HTML se implementa con display:none en la hoja del
   navegador, y cualquier regla propia con display (p. ej. .drawer{display:flex})
   lo anula. Esto lo vuelve a imponer. */
[hidden]{display:none !important}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font:400 14px/1.5 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--tinta);color:#fff}

/* --------------------------------------------------------------- acceso */
/* Mientras el body no tenga la clase .autenticado no se pinta NADA de datos:
   ni barra lateral, ni tablas, ni el panel. Es intencional. */
body:not(.autenticado) .app{display:none}
body:not(.autenticado) .acceso{display:grid}

.acceso{
  display:none;place-items:center;min-height:100vh;padding:24px;
  background:radial-gradient(circle at 50% 0%, #f2f5fa 0%, var(--fondo) 60%);
}
.acceso-caja{
  width:min(360px,100%);background:var(--panel);border:1px solid var(--borde);
  border-radius:12px;padding:30px 28px;display:flex;flex-direction:column;gap:16px;
}
.marca-acceso{display:flex;align-items:center;gap:10px}
.marca-acceso strong{display:block;font-size:14px;letter-spacing:.14em;font-weight:800}
.marca-acceso small{display:block;font-size:11px;color:var(--texto3)}
.acceso-caja h1{margin:6px 0 0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.acceso-caja .btn{margin-top:4px;padding:11px}
.aviso-privacidad{font-size:11.5px;color:var(--texto3);text-align:center;margin:0}

/* ------------------------------------------------------- textos legales */
.acceso-legal{
  display:flex;justify-content:center;gap:8px;margin:2px 0 0;
  font-size:11.5px;color:var(--texto3);
}
.acceso-legal a{color:var(--texto2)}
.acceso-legal a:hover{color:var(--tinta)}

.overlay-legal{
  position:fixed;inset:0;z-index:80;background:var(--fondo);
  height:100dvh;overflow:hidden;
}
/* minmax(0,1fr) fija la fila al alto de la pantalla. Sin esto la fila crece con
   el contenido, el alto del cuerpo queda indefinido y el scroll nunca aparece. */
.overlay-legal:not([hidden]){display:grid;grid-template-rows:minmax(0,1fr)}
.legal-caja{
  display:flex;flex-direction:column;
  height:100%;min-height:0;background:var(--panel);
  max-width:900px;width:100%;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.08);
}
.legal-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--borde);
  background:var(--panel);flex:0 0 auto;
}
.legal-cab strong{font-size:14px;letter-spacing:.01em}
.legal-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 26px 48px;
  scrollbar-width:thin;scrollbar-color:#c9c7bf transparent;
}
.legal-cuerpo::-webkit-scrollbar{width:10px}
.legal-cuerpo::-webkit-scrollbar-thumb{
  background:#d5d3cb;border-radius:6px;border:2px solid var(--panel);
}
.legal-cuerpo::-webkit-scrollbar-track{background:transparent}

/* Con el aviso abierto, el fondo no debe moverse. */
body.legal-abierto{overflow:hidden}

.legal h2{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.legal h3{margin:26px 0 8px;font-size:13.5px;font-weight:700;color:var(--tinta)}
.legal p,.legal li{font-size:13px;line-height:1.65;color:var(--texto)}
.legal p{margin:0 0 10px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin-bottom:5px}
.legal table{width:100%;border-collapse:collapse;margin:12px 0 16px}
.legal th{
  text-align:left;font-size:11.5px;font-weight:700;color:#fff;background:var(--tinta);
  padding:8px 10px;
}
.legal td{
  font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:top;
}
.legal-meta{margin:0 0 18px;font-size:11.5px;color:var(--texto3)}
.legal-nota{
  margin:0 0 18px;padding:10px 14px;border-radius:8px;
  background:var(--ambar-suave);border-left:3px solid #a86a00;
  font-size:12.5px;color:#6b4300;
}
.legal-pie{
  margin:28px 0 0;padding-top:14px;border-top:1px solid var(--borde);
  font-size:11.5px;color:var(--texto2);
}

.pie-pagina{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--borde);
  font-size:11.5px;color:var(--texto3);
}
.pie-pagina a{color:var(--texto2)}
.pie-pagina a:hover{color:var(--tinta)}
@media (max-width:900px){
  .pie-pagina{padding-bottom:8px}
  .legal-cuerpo{padding:18px 18px 40px}
}
.error{
  margin:0;padding:9px 12px;border-radius:var(--r-chico);background:var(--rojo-suave);
  color:var(--rojo);font-size:12.5px;
}

/* ------------------------------------------------------------ estructura */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}

.rail{
  display:flex;flex-direction:column;gap:28px;padding:22px 14px;
  background:var(--panel);border-right:1px solid var(--borde);
  position:sticky;top:0;height:100vh;
}
.marca{display:flex;align-items:center;gap:10px;padding:0 6px}
.logo{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--tinta);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em;
}
.marca strong{display:block;font-size:14px;letter-spacing:.14em;font-weight:800}
.marca small{display:block;font-size:11px;color:var(--texto3);letter-spacing:.02em}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  padding:9px 12px;border-radius:var(--r-chico);color:var(--texto2);
  font-size:13.5px;font-weight:500;transition:background .12s,color .12s;
}
.nav a:hover{background:#f4f3f0;color:var(--texto)}
.nav a[aria-current="page"]{background:var(--tinta);color:#fff;font-weight:600}

/* En escritorio el menu completo cabe en la barra lateral. */
.mas{display:none}

.sesion{margin-top:auto;font-size:12.5px;color:var(--texto2)}
.sesion .usuario{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sesion .punto{width:6px;height:6px;border-radius:50%;background:var(--verde)}
.sesion button{
  width:100%;padding:8px;border:1px solid var(--borde);background:#fff;
  border-radius:var(--r-chico);cursor:pointer;color:var(--texto2);font-size:12.5px;
}
.sesion button:hover{border-color:var(--borde-fuerte);color:var(--texto)}
.sesion button + button{margin-top:6px}

.main{min-width:0;display:flex;flex-direction:column}
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px;border-bottom:1px solid var(--borde);
  position:sticky;top:0;background:var(--fondo);z-index:5;
}
.barra h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.barra-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.vista{padding:24px 28px 64px;max-width:1180px;width:100%}

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:8px 14px;border-radius:var(--r-chico);border:1px solid transparent;
  background:var(--tinta);color:#fff;font-size:13px;font-weight:550;cursor:pointer;
  transition:background .12s,opacity .12s;
}
.btn:hover{background:#0b2757}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.fantasma{background:#fff;border-color:var(--borde-fuerte);color:var(--texto)}
.btn.fantasma:hover{background:#f4f3f0}
.btn.chico{padding:5px 10px;font-size:12.5px}
.btn.peligro{background:#fff;border-color:#e7c7c9;color:var(--rojo)}
.btn.peligro:hover{background:var(--rojo-suave)}
.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px;
}

/* --------------------------------------------------------------- tarjetas */
.grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.kpi{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:16px 18px;
}
.kpi .etq{font-size:12px;color:var(--texto2);margin-bottom:6px}
.kpi .val{font-size:24px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .pie{font-size:11.5px;color:var(--texto3);margin-top:4px}

.panel{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;
}
.panel-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--borde);
}
.panel-cab h2{margin:0;font-size:14px;font-weight:600}
.panel-cuerpo{padding:18px}

/* ---------------------------------------------------------------- tabla */
.tabla-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;font-weight:600;color:var(--texto2);font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;
  border-bottom:1px solid var(--borde);white-space:nowrap;background:#fcfcfb;
}
td{padding:11px 14px;border-bottom:1px solid #f0eeea;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#faf9f7}
tbody tr[data-cp],tbody tr[data-clave]{cursor:pointer}

/* Cabeceras ordenables: clic para ordenar, segundo clic invierte. */
th.ordenable{cursor:pointer;user-select:none;transition:color .12s,background .12s}
th.ordenable:hover{color:var(--texto);background:#f5f4f1}
th.ordenable.activa{color:var(--tinta)}
th.ordenable:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- estados */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-size:11.5px;font-weight:550;white-space:nowrap;
}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}
.chip.neutro{background:#f1f0ec;color:var(--texto2)}
.chip.verde{background:var(--verde-suave);color:var(--verde)}
.chip.ambar{background:var(--ambar-suave);color:var(--ambar)}
.chip.rojo{background:var(--rojo-suave);color:var(--rojo)}

/* --------------------------------------------------------------- formularios */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:12px;font-weight:550;color:var(--texto2)}
.campo input,.campo select{
  padding:9px 11px;border:1px solid var(--borde-fuerte);border-radius:var(--r-chico);
  background:#fff;font-size:13.5px;width:100%;
}
.campo input:hover,.campo select:hover{border-color:#bdb9b0}
.campo .ayuda{font-size:11.5px;color:var(--texto3)}
.fila{display:grid;gap:14px}
.fila.dos{grid-template-columns:1fr 1fr}
.fila.tres{grid-template-columns:1fr 1fr 1fr}
.barra-filtros{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
}
.barra-filtros input,.barra-filtros select{
  padding:7px 10px;border:1px solid var(--borde-fuerte);border-radius:var(--r-chico);
  background:#fff;font-size:13px;
}
.barra-filtros input[type=search]{min-width:240px}

/* ---------------------------------------------------------------- cotizador */
.cotiza{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
.resultado{display:flex;flex-direction:column;gap:16px}
.desglose{display:flex;flex-direction:column;gap:1px;font-size:13px}
.desglose .linea{
  display:flex;justify-content:space-between;padding:7px 0;
  border-bottom:1px dashed #eeece7;
}
.desglose .linea span:last-child{font-variant-numeric:tabular-nums}
.desglose .total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0 0;font-size:15px;font-weight:600;
}
.desglose .total strong{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- tablero */
/* Viajes por estatus: una columna por paso, con color propio. */
.tablero{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:14px;align-items:start;
}
.columna{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  border-top:3px solid var(--color);display:flex;flex-direction:column;min-height:150px;
}
.columna.arriba{box-shadow:inset 0 0 0 2px var(--tinta);background:#f7f9fd}
.columna-cab{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--borde);
}
.columna-cab h3{
  margin:0;font-size:11.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto2);
}
.columna-num{
  font-size:11px;color:#fff;background:var(--color);border-radius:999px;
  padding:1px 7px;font-variant-numeric:tabular-nums;
}
.columna-cuerpo{
  padding:8px;display:flex;flex-direction:column;gap:6px;
  max-height:56vh;overflow-y:auto;
}
.tarjeta{
  border:1px solid var(--borde);border-left:3px solid var(--color);
  border-radius:6px;padding:8px 10px;background:#fff;cursor:pointer;
  transition:background .1s,box-shadow .1s;
}
.tarjeta:hover{background:#faf9f7;box-shadow:0 1px 3px rgba(25,24,20,.06)}
.tarjeta:active{cursor:grabbing}
.tarjeta .cp{font-size:12.5px;font-weight:650}
.tarjeta .cli{font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta .ruta{font-size:11.5px;color:var(--texto3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta .imp{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;margin-top:4px}
.vacio-col{padding:14px 8px;text-align:center;color:var(--texto3);font-size:12px}

/* Utilidad: se muestra solo en el teléfono. */
.solo-movil{display:none}

/* ------------------------------------------------------------------ drawer */
.velo{position:fixed;inset:0;background:rgba(25,24,20,.35);z-index:40;animation:fundir .16s ease}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--panel);
  z-index:50;box-shadow:var(--sombra);display:flex;flex-direction:column;
  animation:entrar .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes entrar{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fundir{from{opacity:0}to{opacity:1}}
.drawer-cab{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--borde);
}
.drawer-cab h2{margin:0;font-size:16px;font-weight:650}
.drawer-cuerpo{padding:22px;overflow:auto;flex:1}
.drawer-pie{padding:16px 22px;border-top:1px solid var(--borde);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cerrar{
  border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;
  color:var(--texto2);padding:4px 8px;border-radius:var(--r-chico);
}
.cerrar:hover{background:#f4f3f0}

.datos{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0}
.datos div{min-width:0}
.datos dt{font-size:11.5px;color:var(--texto3);margin-bottom:2px}
.datos dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}

/* --------------------------------------------------------------- instalar */
/* Franja para instalar la PWA. Solo aparece si el navegador lo permite. */
.instalar-barra{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  background:#1d1d1b;color:#fff;font-size:12.5px;box-shadow:var(--sombra);
  max-width:calc(100% - 24px);
}
.instalar-barra .cerrar{
  border:0;background:transparent;color:#b9b8b2;font-size:16px;line-height:1;
  cursor:pointer;padding:0 2px;
}
@media (max-width:900px){
  .instalar-barra{bottom:76px}
}

/* --------------------------------------------------------- accesos: barras */
.barras{
  display:flex;align-items:flex-end;gap:5px;height:150px;padding:10px 4px 0;
}
.barra-dia{
  flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;
  align-items:center;gap:6px;
}
.grafica-barra{
  width:100%;max-width:34px;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:4px 4px 0 0;overflow:hidden;min-height:2px;background:#f1f0ec;
}
.grafica-barra .ok{display:block;width:100%;background:#2f7d4f}
.grafica-barra .fallo{display:block;width:100%;background:#c0392b}
.barra-dia .dia{font-size:9.5px;color:var(--texto3);white-space:nowrap}
@media (max-width:900px){
  .barras{height:120px;gap:3px}
  .barra-dia .dia{font-size:8.5px}
}

/* ------------------------------------------------------------------- mapa */
.mapa{height:440px;border-radius:10px;overflow:hidden;background:#eceae4;z-index:0}
.mapa .leaflet-popup-content{font-size:12.5px;line-height:1.5}
@media (max-width:900px){
  .mapa{height:62vh}
}

/* ------------------------------------------------------------------ avisos */
.avisos{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.aviso{
  padding:10px 16px;border-radius:999px;background:#1d1d1b;color:#fff;font-size:13px;
  box-shadow:var(--sombra);animation:subir .2s ease;
}
.aviso.error{background:var(--rojo)}
@keyframes subir{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------- utilitarios */
.vacio{
  padding:48px 20px;text-align:center;color:var(--texto3);font-size:13.5px;
}
.vacio strong{display:block;color:var(--texto2);font-size:14px;margin-bottom:4px;font-weight:600}
.cargando{padding:40px;text-align:center;color:var(--texto3);font-size:13px}
.sep{height:1px;background:var(--borde);margin:20px 0}
.sub{font-size:12.5px;color:var(--texto2)}
.pila{display:flex;flex-direction:column;gap:16px}
.fila-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  .app{grid-template-columns:1fr;padding-bottom:64px}
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:30;
    flex-direction:row;align-items:stretch;padding:0;border-right:0;
    border-top:1px solid var(--borde);background:var(--panel);
  }
  .marca{display:none}
  .nav{flex-direction:row;width:100%;justify-content:space-between;gap:0}
  /* Solo las cuatro secciones principales caben en la barra. */
  .nav a[data-secundario]{display:none !important}
  .nav a{flex:1 1 0;min-width:0;text-align:center;padding:13px 2px;border-radius:0;
    font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav a[aria-current="page"]{background:transparent;color:var(--tinta);font-weight:700;box-shadow:inset 0 2px 0 var(--tinta)}
  /* Las acciones de sesión viven en "Más": aqui solo el boton. */
  .sesion{display:none}
  .mas{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    padding:0 14px;font-size:11px;color:var(--texto2);background:transparent;
    border:0;border-left:1px solid var(--borde);cursor:pointer;
  }
  .mas:active{background:#f4f3f0}
  .barra{padding:14px 18px}
  .barra h1{font-size:17px}
  .vista{padding:18px 18px 40px}
  .grid-kpi{grid-template-columns:1fr 1fr}
  .cotiza{grid-template-columns:1fr}
  .tablero{grid-auto-columns:78vw}
  .columna-cuerpo{max-height:none}
  /* En el telefono, una columna vacia ocupa una pantalla completa: se oculta. */
  .columna.vacia{display:none}
  .solo-movil{display:block}
  .fila.dos,.fila.tres{grid-template-columns:1fr}
  .datos{grid-template-columns:1fr}
  .drawer{width:100%}
  .oculta-movil{display:none}
}

/* -------------------------------------------------------- formulario largo */
.grid-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){
  .grid-campos{grid-template-columns:1fr}
}