:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d;
  --txt:#e6edf3; --muted:#8b98a5; --accent:#e4002b; --accent2:#ff3b5c;
  --ok:#2ea043; --warn:#d29922;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--txt); -webkit-tap-highlight-color:transparent;
}
h1{font-size:20px;margin:0;font-weight:800;letter-spacing:.3px}
h1 b{color:var(--accent2)}
button{font:inherit;cursor:pointer;border:0;border-radius:10px}
input{font:inherit}

/* ---- LOGIN ---- */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden;
  background:var(--bg)}
.login-mapa{position:absolute;inset:0;z-index:0;filter:saturate(.9)}
.login-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(14,17,22,.30) 0%, rgba(14,17,22,.72) 62%, rgba(14,17,22,.95) 100%)}
.login-card{width:100%;max-width:390px;background:rgba(22,27,34,.90);border:1px solid var(--line);
  border-radius:20px;padding:24px 22px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(228,0,43,.15);
  position:relative;z-index:2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo-img{width:88px;height:88px;margin:2px auto 0;filter:drop-shadow(0 6px 18px rgba(228,0,43,.35))}
.logo-real{width:150px;margin:2px auto 0;border-radius:16px;display:block;
  box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(255,212,0,.25);
  filter:drop-shadow(0 4px 14px rgba(255,212,0,.18))}
.brand-track{margin:2px 0 0;text-align:center;font-size:25px;font-weight:900;letter-spacing:1.5px}
.brand-track span{color:#ffd400}
.tagline{margin:0 0 4px;text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:.3px}
.eslogan{margin:0 0 4px;text-align:center;color:#ffd400;font-size:13.5px;font-weight:800;
  letter-spacing:2px;text-shadow:0 2px 10px rgba(255,212,0,.25)}
.brand-mark{font-size:34px;filter:drop-shadow(0 2px 6px rgba(228,0,43,.5))}
.brand-mark.sm{font-size:22px}
/* vehículos animados del fondo (emojis rastreándose) */
.demo-veh{width:30px;height:30px;display:grid;place-items:center;font-size:21px;
  position:relative;filter:drop-shadow(0 2px 5px rgba(0,0,0,.8))}
.demo-veh::before{content:'';position:absolute;inset:5px;border-radius:50%;
  animation:pulso 2.2s infinite;z-index:-1}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(255,212,0,.45)}
  70%{box-shadow:0 0 0 14px rgba(255,212,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}
}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.login-card input{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:12px 14px;border-radius:10px;outline:none}
.login-card input:focus{border-color:var(--accent2)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;font-size:18px;width:36px;height:36px;opacity:.8;cursor:pointer}
.pw-toggle:active{transform:translateY(-50%) scale(.9)}
#loginBtn{background:#ffd400;color:#111;padding:13px;font-weight:800;margin-top:4px;letter-spacing:.3px}
#loginBtn:active{transform:translateY(1px)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#3c4043;padding:12px;font-weight:600;border:1px solid #dadce0}
.google-btn:active{transform:translateY(1px)}
.g-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;
  font-weight:800;font-size:13px;font-family:Arial,sans-serif}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:2px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--muted);font-size:12px;text-align:center;margin:2px 0 0}
.error{color:var(--accent2);font-size:13px;text-align:center;margin:0}

/* ---- APP ---- */
.app{height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);padding-top:calc(10px + env(safe-area-inset-top))}
.topbar strong{font-weight:800;letter-spacing:.3px}
.spacer{flex:1}
.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  width:38px;height:38px;font-size:16px;display:grid;place-items:center}
.btn-admin{width:auto;padding:0 14px;font-size:14px;font-weight:700;
  border-color:#ffd400;color:#ffd400}
.layout{flex:1;display:flex;min-height:0}
.sidebar{width:300px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.side-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.live{font-size:12px;color:var(--muted)}
.live.on{color:var(--ok)}
.live.off{color:var(--muted)}
.device-list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.device{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  cursor:pointer;border:1px solid transparent}
.device:hover{background:var(--panel2)}
.device.active{background:var(--panel2);border-color:var(--line)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.dot.online{background:var(--ok)} .dot.offline{background:#6e7681} .dot.moving{background:var(--accent2)}
.device .meta{min-width:0}
.device .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device .sub{font-size:12px;color:var(--muted)}
.map{flex:1;min-width:0;background:#0a0d12}

/* Marker */
.veh-marker{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:18px;border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.5)}
.veh-marker.off{background:#6e7681}

/* Detalle */
.detail{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(520px,94vw);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden;z-index:1000}
.detail-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line)}
.detail-body{padding:6px 14px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border:0}
.kv span{color:var(--muted)}
.kv b{text-align:right}
.detail-actions{display:flex;gap:8px;padding:12px 14px}
.primary{flex:1;background:var(--accent);color:#fff;padding:12px;font-weight:700}
.detail-actions .ghost{width:auto;padding:0 16px;height:auto}

/* Reproductor de recorridos */
.playback{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(560px,94vw);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);overflow:hidden;z-index:1100}
.pb-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line)}
.pb-controls{display:flex;gap:8px;padding:12px 14px 6px}
.pb-controls input[type=date]{flex:1;background:var(--panel2);border:1px solid var(--line);
  color:var(--txt);padding:10px 12px;border-radius:10px;color-scheme:dark}
.pb-controls .primary{flex:0 0 auto;padding:0 18px}
.pb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 14px}
.pb-stats div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.pb-stats span{display:block;font-size:11px;color:var(--muted)}
.pb-stats b{font-size:15px}
.pb-player{display:flex;align-items:center;gap:10px;padding:10px 14px 14px}
.pb-play{background:var(--accent);color:#fff;width:44px;height:44px;border-radius:50%;font-size:16px;flex:none}
.pb-speed{width:auto;padding:0 12px;font-weight:700;flex:none}
.pb-time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:44px;text-align:center}
#pbSlider{flex:1;accent-color:var(--accent);height:6px}
.pb-empty{margin:0;padding:0 14px 14px;color:var(--warn);font-size:13px;text-align:center}
.pb-veh{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#4285f4;color:#fff;font-size:16px;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.5)}

/* Historial de alertas */
.alert-btn{width:auto;padding:0 14px;height:auto}
.alert-list{list-style:none;margin:0;padding:8px 14px 14px;max-height:min(50vh,340px);overflow:auto}
.alert-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px}
.alert-list li:last-child{border:0}
.alert-list .al-ico{font-size:18px;flex:none}
.alert-list .al-txt{flex:1;min-width:0}
.alert-list .al-cuando{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Panel de service AUTOCENTRO */
.sv-stats{grid-template-columns:repeat(3,1fr)}
.sv-veh{margin:8px 14px 0;color:var(--muted);font-size:13px}
.sv-proximo{margin:8px 14px 0;padding:10px 12px;border-radius:10px;font-size:14px;
  background:rgba(210,153,34,.12);border:1px solid var(--warn);color:var(--txt)}
.sv-turno{display:block;text-align:center;text-decoration:none;border-radius:10px;line-height:1}
.sv-turno.primary{padding:14px 12px}

/* Foto del vehículo en el detalle */
.d-foto{margin:10px 0 4px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:var(--panel2);border:1px solid var(--line);min-height:64px}
.d-foto img{width:100%;max-height:170px;object-fit:cover;display:block}
.d-foto .emoji{font-size:52px;padding:8px}

/* Interruptor de alertas */
.al-toggle{padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.al-toggle.on{background:rgba(46,160,67,.15);color:#7ee2a0;border-color:var(--ok)}
.al-toggle.off{background:rgba(228,0,43,.12);color:var(--accent2);border-color:var(--accent2)}

/* Panel del abono */
.ab-estado{margin:10px 14px 0;padding:10px 12px;border-radius:10px;font-size:14px;text-align:center;
  background:var(--panel2);border:1px solid var(--line)}
.ab-estado.ok{border-color:var(--ok);color:#7ee2a0}
.ab-estado.aviso{border-color:var(--warn);color:#e8c268}
.ab-estado.mal{border-color:var(--accent2);color:var(--accent2)}

/* Asistente IA */
.ia-fab{position:fixed;right:16px;bottom:16px;z-index:1050;width:56px;height:56px;border-radius:50%;
  font-size:26px;background:var(--accent);border:2px solid #fff2;
  box-shadow:0 8px 24px rgba(228,0,43,.45);display:grid;place-items:center}
.ia-fab:active{transform:scale(.94)}
.ia-panel{z-index:1200;width:min(480px,94vw)}
.ia-msgs{padding:12px 14px;max-height:min(46vh,340px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.ia-b{max-width:88%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.ia-ia{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.ia-yo{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ia-cargando{color:var(--muted);font-size:13px;align-self:flex-start;padding:4px 12px}
.ia-chips{display:flex;gap:6px;padding:0 14px 8px;flex-wrap:wrap}
.ia-chips button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.ia-chips button:active{transform:scale(.96)}
.ia-input{display:flex;gap:8px;padding:10px 14px 14px}
.ia-input input{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:11px 13px;border-radius:10px;outline:none;font:inherit}
.ia-input input:focus{border-color:var(--accent2)}
.ia-input button{background:var(--accent);color:#fff;border:0;border-radius:10px;width:48px;font-size:16px;cursor:pointer}

/* Responsive */
@media (max-width:720px){
  .sidebar{position:absolute;z-index:900;height:calc(100% - 0px);left:0;top:0;
    transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sidebar.open{transform:translateX(0)}
  .layout{position:relative}
}