/* Portal de Nexus G&B — colores de la marca sobre fondo oscuro */
:root{
  --fondo:#070D1A; --panel:#0B162C; --alto:#132344; --borde:#1D3557;
  --texto:#E8EEF7; --suave:#93A6C2; --marino:#0B2A5B; --celeste:#0081CF; --celeste-claro:#5BB8F0;
  --turquesa:#00C9A7; --verde:#2FBF71; --ambar:#F2B705; --rojo:#F26D6D; --gris:#7D8AA0;
  --radio:12px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--celeste-claro)}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;margin:0}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px}
.chico{font-size:13px;color:var(--suave)}
.error{color:var(--rojo);min-height:1.2em;margin:8px 0 0}
:focus-visible{outline:2px solid var(--turquesa);outline-offset:2px}

/* botones y campos */
.b{font:inherit;font-weight:600;color:var(--texto);background:var(--alto);border:1px solid var(--borde);border-radius:10px;padding:9px 14px;cursor:pointer}
.b:hover{border-color:var(--celeste)}
.b:disabled{opacity:.5;cursor:default}
.b.primario{background:var(--turquesa);border-color:var(--turquesa);color:#04211B}
.b.primario:hover{filter:brightness(1.08)}
.b.peligro{color:var(--rojo)}
.b.chico{padding:6px 10px;font-size:13px}
.b.activo{background:var(--celeste);border-color:var(--celeste);color:#fff}
label{display:block;font-size:13px;color:var(--suave);margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--texto);background:var(--fondo);border:1px solid var(--borde);border-radius:10px;padding:10px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--celeste);outline:none}
input[type=checkbox]{width:auto;accent-color:var(--turquesa)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila>.crece{flex:1;min-width:160px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* marca */
.marca{display:flex;align-items:center;gap:10px}
.marca img{width:38px;height:38px;border-radius:9px}
.marca b{display:block;font-weight:800;font-size:17px;letter-spacing:-.01em}
.marca span{display:block;font-size:12px;color:var(--turquesa);font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ingreso */
.puerta{min-height:100%;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 500px at 15% 0%,#132344 0%,transparent 60%),var(--fondo)}
.tarjeta-puerta{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:26px;border-top:3px solid var(--turquesa)}
.tarjeta-puerta h1{margin:22px 0 4px}
.tarjeta-puerta .b{width:100%;margin-top:16px;padding:12px}
.tarjeta-puerta .chico{margin:14px 0 0;text-align:center}

/* armazón */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.lado{background:var(--panel);border-right:1px solid var(--borde);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
#nav{display:flex;flex-direction:column;gap:4px;flex:1}
#nav a{display:block;padding:10px 12px;border-radius:10px;color:var(--suave);text-decoration:none;font-weight:600;border-left:3px solid transparent}
#nav a:hover{color:var(--texto);background:var(--alto)}
#nav a.aqui{color:var(--texto);background:var(--alto);border-left-color:var(--turquesa)}
.quien{border-top:1px solid var(--borde);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.quien>div{width:100%}
.quien b{display:block}.quien span{font-size:12px;color:var(--suave)}
main{padding:24px 28px 60px;min-width:0}
main:focus{outline:none}
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cabeza p{margin:4px 0 0;color:var(--suave)}
.sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--borde);padding-bottom:10px}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px}
.nota{background:#0D2233;border:1px solid #17405A;border-radius:10px;padding:10px 12px;color:#BFD8EA;font-size:13px}

/* tablas */
.tabla-caja{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);text-align:left;padding:10px 12px;border-bottom:1px solid var(--borde);font-weight:700}
td{padding:10px 12px;border-bottom:1px solid #12203A;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.baja td{opacity:.5}
td.acc{white-space:nowrap;text-align:right}
td.acc .b{margin-left:4px}
.chip{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:2px 9px;background:var(--alto);color:var(--suave);margin:1px 2px 1px 0}
.chip.ok{background:#0F3A2A;color:#6FE0A6}.chip.no{background:#3A1717;color:#F5A3A3}
.chip.av{background:#3A300A;color:#F5D469}.chip.cel{background:#0B3350;color:#8FD0F7}
.mono{font-family:ui-monospace,Consolas,monospace}

/* inicio */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sistema{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;text-decoration:none;color:var(--texto)}
.sistema:hover{border-color:var(--celeste)}
.sistema p{margin:0;color:var(--suave);font-size:13px;flex:1}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gris);margin-right:6px}
.punto.ok{background:var(--verde)}.punto.no{background:var(--rojo)}

/* flota */
.flota{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}
.unidades{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 190px);overflow:auto;padding-right:2px}
.unidad{text-align:left;font:inherit;color:inherit;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:12px;cursor:pointer;width:100%}
.unidad:hover{border-color:var(--celeste)}
.unidad.sel{border-color:var(--turquesa);box-shadow:inset 3px 0 0 var(--turquesa)}
.unidad .arriba{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.patente{font-family:ui-monospace,Consolas,monospace;font-weight:700;background:var(--alto);border-radius:6px;padding:1px 7px;font-size:13px}
.barra{height:7px;border-radius:5px;background:var(--alto);margin:8px 0 5px;overflow:hidden;display:flex}
.barra i{display:block;height:100%}.barra .ok{background:var(--verde)}.barra .no{background:var(--rojo)}
#mapa{height:calc(100vh - 330px);min-height:320px;border-radius:var(--radio);border:1px solid var(--borde);background:#0E1B33}
.detalle{margin-top:12px}
.paradas{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.paradas li{display:flex;gap:9px;background:var(--alto);border-radius:10px;padding:9px 10px}
.num{flex:0 0 24px;height:24px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center}
.e-pendiente{background:#C8423F}.e-en_camino{background:#C99700}.e-realizado{background:#1B8A3A}.e-no_realizado{background:#616B7A}
.t-pendiente{color:#F29B98}.t-en_camino{color:var(--ambar)}.t-realizado{color:#6FE0A6}.t-no_realizado{color:var(--gris)}
.cartel-camion{transform:translate(-50%,-100%);white-space:nowrap;color:#fff;font:700 11px system-ui,Arial;padding:3px 7px;border-radius:8px;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.punto-parada{transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;color:#fff;font:700 11px/18px system-ui,Arial;text-align:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.leaflet-container{font:inherit}
.leaflet-popup-content{color:#0B162C}

/* retiros y cercanos */
.cols{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:14px;align-items:start}
.lista{display:flex;flex-direction:column;gap:8px}
.item{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:12px}
.item .arriba{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sugerencias{background:var(--fondo);border:1px solid var(--borde);border-radius:10px;margin-top:4px;max-height:200px;overflow:auto}
.sugerencias button{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid #12203A;padding:8px 10px;cursor:pointer}
.sugerencias button:hover{background:var(--alto)}

/* demo */
.demo{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:18px;align-items:start}
.celulares{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.cel{margin:0;text-align:center}
.cel figcaption{font-weight:700;margin-bottom:8px}
.cel figcaption span{display:block;font-weight:400;font-size:12px;color:var(--suave)}
.cel .marco{width:340px;height:690px;border-radius:38px;background:#02060D;border:2px solid var(--borde);padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cel iframe{width:100%;height:100%;border:0;border-radius:27px;background:#fff}
.estado-flota{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}

/* diálogo y aviso */
dialog{background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:22px;width:min(520px,calc(100vw - 30px));border-top:3px solid var(--turquesa)}
dialog::backdrop{background:rgba(3,7,15,.75)}
dialog h2{margin-bottom:6px}
dialog .pie{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.secreto{font:700 26px ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--fondo);border:1px dashed var(--turquesa);border-radius:12px;padding:14px;text-align:center;margin:12px 0;user-select:all;word-break:break-all}
.casillas{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:6px}
.casillas label{display:flex;gap:8px;align-items:center;margin:0;color:var(--texto);font-size:14px}
#aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--turquesa);color:#04211B;font-weight:700;padding:11px 18px;border-radius:12px;display:none;z-index:2000;max-width:90vw}
#aviso.mal{background:var(--rojo);color:#2A0808}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lado{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--borde)}
  #nav{flex-direction:row;flex:1 1 100%;order:3;overflow-x:auto}
  #nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:8px 10px}
  #nav a.aqui{border-bottom-color:var(--turquesa)}
  .quien{border:0;padding:0;margin-left:auto;flex-wrap:nowrap;align-items:center}
  .quien>div{display:none}
  main{padding:16px 14px 50px}
  .flota,.cols,.demo{grid-template-columns:1fr}
  .unidades{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .unidad{min-width:250px}
  #mapa{height:52vh}
  .dos{grid-template-columns:1fr}
  .cel .marco{width:300px;height:620px}
}
@media (prefers-reduced-motion:no-preference){ .b,.unidad,.sistema,#nav a{transition:border-color .15s,background .15s} }