:root{
  --azul:#00306F; --azul2:#0090E0; --naranja:#F57C00; --rojo:#D32F2F; --verde:#2E9E4F;
  --gris:#8A94A6; --fondo:#FFFFFF; --suave:#F2F5FA; --linea:#DDE3EC; --texto:#1B2333; --texto2:#5B667A;
  --radio:10px; --barra:58px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px}
.oculto{display:none!important}
button{font:inherit;cursor:pointer}
a{color:var(--azul2)}

/* ---------- Entrada ---------- */
#v-login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:#fff}
.login-caja{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center}
.login-logo{width:100%;max-width:540px;height:auto;margin-bottom:36px}
.form{width:100%;display:flex;flex-direction:column;gap:14px}
.form h2{margin:0;color:var(--azul);font-size:20px;text-align:center}
.campo{display:flex;align-items:center;background:#EAF1FD;border-radius:4px;height:58px;padding:0 16px;gap:12px}
.campo .ico{width:22px;text-align:center;color:var(--texto2);font-size:17px}
.campo input{flex:1;border:0;background:transparent;font-size:17px;height:100%;outline:none;color:var(--texto)}
.campo:focus-within{box-shadow:0 0 0 2px var(--azul2) inset}
.ojo{border:0;background:transparent;font-size:17px;opacity:.6}
.btn{border:0;border-radius:4px;height:56px;font-weight:700;font-size:16px}
.btn-principal{background:var(--azul);color:#fff}
.btn-principal:hover{background:#00408F}
.btn-principal:disabled{opacity:.6;cursor:default}
.btn-naranja{background:var(--naranja);color:#fff}
.enlaces-login{text-align:center;margin:4px 0 0;font-weight:600}
.enlaces-login a{color:var(--texto2);text-decoration:none}
.enlaces-login a:hover{text-decoration:underline}
.pie-login{width:100%;margin-top:40px;padding-top:14px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center}
.pie-login a{color:var(--texto2);text-decoration:none;font-size:14px}
.sel-idioma{border:1px solid var(--linea);background:var(--suave);border-radius:4px;padding:6px 8px;font:inherit;font-size:14px;color:var(--texto)}
.error{background:#FDECEC;color:var(--rojo);border-radius:4px;padding:10px 12px;font-size:14px}
.nota{color:var(--texto2);text-align:center;margin:0}
.nota.peque{font-size:13px;text-align:left}

/* ---------- Barra ---------- */
.barra{height:var(--barra);background:var(--azul);display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.barra-logo{height:30px;background:#fff;border-radius:6px;padding:4px 8px}
.barra-der{display:flex;align-items:center;gap:8px}
.btn-icono{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;width:38px;height:36px;font-size:16px}
.sel-oscuro{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.sel-oscuro option{color:#000}
.chip{font-size:12px;font-weight:700;padding:4px 8px;border-radius:20px;background:var(--naranja);color:#fff}

/* ---------- Cuerpo ---------- */
#v-app{height:100%;display:flex;flex-direction:column}
.cuerpo{flex:1;display:flex;min-height:0}
.panel{width:360px;flex:none;border-right:1px solid var(--linea);display:flex;flex-direction:column;min-height:0;background:#fff}
.mapa-cont{flex:1;position:relative;min-width:0}
#mapa{position:absolute;inset:0}
.pestanas{display:flex;border-bottom:1px solid var(--linea)}
.pest{flex:1;border:0;background:#fff;padding:13px 6px;font-weight:600;color:var(--texto2);border-bottom:3px solid transparent}
.pest.activa{color:var(--azul);border-bottom-color:var(--azul2)}
.pagina{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.buscar,.inp{width:100%;border:1px solid var(--linea);border-radius:6px;padding:10px 12px;font:inherit;background:#fff;color:var(--texto)}
.lbl{font-size:12px;color:var(--texto2);font-weight:600;margin-bottom:-6px}
.fila2{display:grid;grid-template-columns:1fr;gap:8px}
.fila2 .inp{min-width:0}
.fila2 .lbl{display:block;margin-bottom:4px}
.rapidos{display:flex;gap:6px;flex-wrap:wrap}
.btn-chico{border:1px solid var(--linea);background:var(--suave);border-radius:20px;padding:6px 12px;font-size:13px}
.resumen-flota{display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
.resumen-flota span{background:var(--suave);border-radius:20px;padding:4px 10px}
.lista,.lista-eventos{list-style:none;margin:0;padding:0}
.veh{display:flex;gap:10px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--linea);cursor:pointer;border-radius:6px}
.veh:hover,.veh.sel{background:var(--suave)}
.punto{width:12px;height:12px;border-radius:50%;flex:none}
.p-mov{background:var(--verde)} .p-enc{background:var(--naranja)} .p-apa{background:var(--gris)} .p-sin{background:var(--rojo)}
.veh-info{flex:1;min-width:0}
.veh-nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh-est{font-size:13px;color:var(--texto2)}
.veh-vel{font-weight:700;font-size:13px;color:var(--azul)}
.res{font-size:14px}
.res .tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.res .t{background:var(--suave);border-radius:8px;padding:10px}
.res .t b{display:block;font-size:18px;color:var(--azul)}
.ev{padding:10px 6px;border-bottom:1px solid var(--linea);cursor:pointer}
.ev:hover{background:var(--suave)}
.ev-h{font-weight:700;color:var(--azul)}
.ev-d{font-size:14px}
.vacio{color:var(--texto2);text-align:center;padding:20px 0}

/* ---------- Mapa ---------- */
.mk{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.mk.p-mov{background:var(--verde)} .mk.p-enc{background:var(--naranja)} .mk.p-apa{background:var(--gris)} .mk.p-sin{background:var(--rojo)}
.mk-lbl{background:var(--azul);color:#fff;border:0;border-radius:4px;font-weight:700;font-size:12px;padding:2px 6px;box-shadow:none}
.mk-lbl:before{display:none}
.pop h3{margin:0 0 4px;color:var(--azul);font-size:15px}
.pop p{margin:2px 0;font-size:13px}
.pop .acc{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pop .acc button,.pop .acc a{border:0;border-radius:4px;padding:7px 10px;font-size:13px;font-weight:700;text-decoration:none;color:#fff;background:var(--azul)}
.pop .acc .n{background:var(--naranja)}
.pop .acc .g{background:#fff;color:var(--azul);border:1px solid var(--linea)}

/* ---------- Diálogos ---------- */
.dlg-fondo{position:fixed;inset:0;background:rgba(0,20,50,.45);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}
.dlg{background:#fff;border-radius:12px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:20px;position:relative}
.dlg h2{margin:0 0 10px;color:var(--azul);font-size:19px}
.dlg-cerrar{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:18px;color:var(--texto2)}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.opciones button{border:1px solid var(--linea);background:var(--suave);border-radius:8px;padding:14px;font-weight:700;color:var(--azul)}
.enlace-box{display:flex;gap:6px;margin-top:10px}
.enlace-box input{flex:1}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla td,.tabla th{padding:8px 6px;border-bottom:1px solid var(--linea);text-align:left}
.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--texto);color:#fff;padding:10px 16px;border-radius:8px;z-index:3000;font-size:14px;max-width:90vw}

/* ---------- Versión celular ---------- */
body.movil .cuerpo{flex-direction:column-reverse}
body.movil .panel{width:100%;height:45%;border-right:0;border-top:1px solid var(--linea)}
body.movil .mapa-cont{flex:1}
body.movil .barra-logo{height:26px}
body.movil .pest{padding:11px 4px}
body.movil .login-logo{margin-bottom:24px}
body.movil .campo{height:54px}

/* ---------- Verificación ---------- */
.canales{display:flex;gap:10px;flex-wrap:wrap}
.btn-canal{flex:1;min-width:150px;height:54px;border:1px solid var(--linea);background:var(--suave);border-radius:6px;font-weight:700;color:var(--azul);font-size:15px}
.btn-canal small{display:block;font-weight:400;color:var(--texto2);font-size:12px}
.btn-canal:hover{border-color:var(--azul2)}
.check{display:flex;gap:8px;align-items:center;color:var(--texto2);font-size:14px}

/* ---------- Panel de administrador ---------- */
#v-admin{height:100%;display:flex;flex-direction:column}
.ad-pest{background:#fff;overflow-x:auto}
.ad-pest .pest{flex:none;padding:13px 18px}
.ad-cuerpo{flex:1;overflow:auto;padding:16px;background:var(--suave)}
.ad-barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ad-barra .buscar{flex:1;min-width:200px}
.btn-nuevo{background:var(--naranja);color:#fff;border:0;border-radius:6px;padding:10px 14px;font-weight:700}
.btn-sec{background:#fff;color:var(--azul);border:1px solid var(--linea);border-radius:6px;padding:9px 12px;font-weight:600}
.btn-peligro{background:#fff;color:var(--rojo);border:1px solid #F3C2C2;border-radius:6px;padding:9px 12px;font-weight:600}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:auto}
.tabla th{background:#F7F9FC;font-size:12px;color:var(--texto2);text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0}
.tabla tr.fila{cursor:pointer}
.tabla tr.fila:hover td{background:#F7FAFF}
.etq{display:inline-block;font-size:11px;font-weight:700;border-radius:20px;padding:2px 8px;margin:1px}
.e-ok{background:#E6F5EA;color:#1E7A3B}.e-no{background:#FDECEC;color:var(--rojo)}.e-av{background:#FFF3E0;color:#B45900}.e-in{background:#E7F2FD;color:#00559A}
.formu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formu .ancho{grid-column:1/-1}
.formu label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--texto2)}
.formu textarea{min-height:60px;resize:vertical}
.multi{max-height:180px;overflow:auto;border:1px solid var(--linea);border-radius:6px;padding:6px;background:#fff;font-weight:400;color:var(--texto)}
.multi label{flex-direction:row;align-items:center;gap:6px;font-weight:400;font-size:14px;color:var(--texto);padding:3px 2px}
.dlg-acc{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.dlg.grande{max-width:760px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:12px}
.kpi b{display:block;font-size:22px;color:var(--azul)}
.cmd{display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:6px;padding:8px;margin:6px 0;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.cmd code{flex:1;word-break:break-all}
body.movil .formu{grid-template-columns:1fr}
.mk{position:relative;font-size:17px}
.mk-dir{position:absolute;top:-11px;left:50%;margin-left:-6px;width:12px;height:12px;font-size:10px;line-height:12px;color:var(--verde);text-align:center;transform-origin:6px 23px}

/* ---------- Soluciones Geolinkint (entrada) ---------- */
.soluciones{width:100%;margin-top:24px;text-align:center}
.soluciones p{margin:0 0 10px;color:var(--texto2);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#sol-botones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#sol-botones a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:12px;border:1px solid var(--linea);background:#fff;text-decoration:none;color:var(--azul);font-weight:700;font-size:13px;box-shadow:0 1px 3px rgba(0,48,111,.08)}
#sol-botones a:hover{border-color:var(--azul2)}
#sol-botones a span{width:44px;height:44px;border-radius:50%;background:#EAF1FD;display:flex;align-items:center;justify-content:center;font-size:22px}

/* ---------- Exceso de velocidad en el recorrido ---------- */
.vel-caja{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linea);padding-top:10px}
.vel-botones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.btn-vel{height:52px;border:2px solid var(--linea);background:#fff;border-radius:10px;font-size:18px;font-weight:800;color:var(--azul)}
.btn-vel.activa{background:var(--rojo);border-color:var(--rojo);color:#fff}
.vel-ok,.vel-mal{margin:0;padding:10px 12px;border-radius:8px;font-weight:700}
.vel-ok{background:#E6F5EA;color:#1E7A3B}
.vel-mal{background:#FDECEC;color:var(--rojo)}

/* ---------- Alertas ---------- */
.btn-chico.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.ev{display:flex;gap:10px;align-items:flex-start}
.ev-ico{font-size:20px;line-height:1.2}
.ev-corte .ev-d,.ev-velocidad .ev-d,.ev-sos .ev-d,.ev-jammer .ev-d{color:var(--rojo);font-weight:700}

/* ---------- Panel: piezas nuevas ---------- */
.ad-titulo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 8px}
.ad-titulo h2{margin:0;font-size:17px;color:var(--azul)}
.kpi{position:relative}
.kpi[data-ir]{cursor:pointer}
.kpi[data-ir]:hover{border-color:var(--azul2)}
.kpi-ico{float:right;font-size:20px}
.k-verde b{color:var(--verde)} .k-naranja b{color:var(--naranja)} .k-rojo b{color:var(--rojo)}
.caja{padding:12px 14px;margin-bottom:12px}
.caja h3{margin:0 0 6px;color:var(--azul);font-size:16px}
.caja-av{background:#FFF8EF;border-color:#FFD8B0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn-rojo{background:var(--rojo);color:#fff;border:0;border-radius:6px;padding:10px 14px;font-weight:700}
.btn-rojo-sec{background:#fff;color:var(--rojo);border:1px solid #F3C2C2;border-radius:6px;padding:9px 12px;font-weight:600;margin-right:auto}
.btn-sec.peque{padding:5px 9px;font-size:13px;text-decoration:none;display:inline-block}
.lbl-f{display:block;font-size:12px;font-weight:600;color:var(--texto2);margin-bottom:4px}
.check-f{flex-direction:row!important;align-items:center;gap:8px!important;font-size:14px!important;color:var(--texto)!important;align-self:end;padding-bottom:10px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:90px;height:48px;border:2px solid var(--linea);background:#fff;border-radius:8px;font-weight:700;color:var(--azul)}
.seg button.activa{border-color:var(--azul2);background:#E7F2FD}
.seg.grande button{height:56px;font-size:16px}
.iconos{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px}
.iconos button{border:2px solid var(--linea);background:#fff;border-radius:8px;padding:6px 4px;font-size:12px;color:var(--texto2);display:flex;flex-direction:column;align-items:center;gap:2px}
.iconos button span{font-size:24px;height:30px;display:flex;align-items:center}
.iconos button img{width:28px;height:28px;object-fit:contain}
.iconos button.activa{border-color:var(--azul2);background:#E7F2FD;color:var(--azul)}
.ico-celda{font-size:20px;width:34px}
.ico-celda img{width:24px;height:24px;object-fit:contain}
.multi small{color:var(--texto2)}
.multi-buscar{margin-bottom:6px}
.sms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.btn-sms{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:8px;padding:8px 10px;text-decoration:none;background:var(--suave)}
.btn-sms b{font-family:ui-monospace,Consolas,monospace;color:var(--azul)}
.btn-sms small{color:var(--texto2);font-size:12px}
.dlg h3{margin:14px 0 6px;color:var(--azul);font-size:15px}
.clave-grande{font-family:ui-monospace,Consolas,monospace;font-size:22px;letter-spacing:.08em;color:var(--azul)}
.grupos{display:flex;flex-direction:column;gap:6px}
.grupo{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;flex-wrap:wrap}
.grupo:hover{border-color:var(--azul2)}
.grupo.sub{margin-left:28px;background:#FAFCFF}
.grupo span{color:var(--texto2);font-size:13px}
.herr{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.herr .caja{margin:0}
body.movil .herr{grid-template-columns:1fr}
@media (max-width:760px){.herr{grid-template-columns:1fr}.tabla{font-size:13px}.ad-cuerpo{padding:10px}}
body.movil .barra{padding:0 8px}
body.movil .barra-der{gap:5px}
body.movil .btn-icono{width:34px}
body.movil .barra-der .chip{padding:3px 6px;font-size:11px}

/* ---------- Primera vez, términos y activación ---------- */
.btn-secundario{background:#fff;color:var(--azul);border:2px solid var(--azul2);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-secundario:hover{background:#EAF1FD}
.leyenda-login{margin:18px 0 0;color:var(--gris);font-size:12px;letter-spacing:.03em;text-align:center}
.vista-centro{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;background:var(--suave)}
.caja-centro{width:100%;max-width:620px;background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 20px rgba(0,48,111,.08);display:flex;flex-direction:column;gap:12px}
.caja-centro.ancha{max-width:900px}
.caja-centro h2{margin:0;color:var(--azul);text-align:center}
.caja-centro .nota{text-align:center;margin:0}
.centro-logo{width:220px;max-width:70%;align-self:center}
.terminos-texto{max-height:46vh;overflow:auto;border:1px solid var(--linea);border-radius:8px;padding:14px 16px;background:#FBFCFE;font-size:14px;line-height:1.55}
.terminos-texto p{margin:0 0 10px}
.check.grande{font-size:15px;color:var(--texto);font-weight:600}
.check.grande input{width:22px;height:22px}
.plan-resumen{text-align:center;font-size:17px;color:var(--texto)}
.plan-resumen b{color:var(--azul)}
.plan-estado{background:#FFF6EC;border:1px solid #FFD8B0;border-radius:8px;padding:12px 14px;font-weight:600;color:#8A4B00;text-align:center}
.plan-opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan-op{border:2px solid var(--linea);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}
.plan-op b{color:var(--azul);font-size:16px}
.plan-op small{color:var(--texto2);min-height:36px}
.plan-ico{font-size:34px}
.plan-op .btn{height:48px;margin-top:auto}
.plan-op .inp{text-align:center;text-transform:uppercase;letter-spacing:.05em}
.plan-op.apagada{opacity:.55}
body.movil .plan-opciones{grid-template-columns:1fr}
@media (max-width:760px){.plan-opciones{grid-template-columns:1fr}.caja-centro{padding:18px}}

/* ---------- Panel: servicio y cobros ---------- */
.seccion-f{font-weight:700;color:var(--azul);font-size:14px;border-top:1px solid var(--linea);padding-top:10px;margin-top:4px}
.servicio-caja{margin-top:12px;background:var(--suave);border-radius:10px;padding:10px 14px}
.servicio-caja p{margin:6px 0}
.fila-permiso{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid #FFE3C4}
.fila-permiso:first-of-type{border-top:0}
.btn-nuevo.peque,.btn-rojo-sec.peque{padding:5px 10px;font-size:13px;margin:0}
.tabla td.acciones{white-space:nowrap}
.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.03em}
ol.pasos{padding-left:20px;line-height:1.8}

/* ---------- Información de las soluciones ---------- */
.linea-info{display:flex;flex-direction:column;gap:8px}
.linea-ico{font-size:44px;text-align:center}
.linea-info h2{margin:0;text-align:center;color:var(--azul)}
.linea-lema{margin:0;text-align:center;font-weight:700;color:var(--azul2);font-size:16px}
.linea-info h3{margin:8px 0 0;color:var(--azul);font-size:15px}
.linea-pasos{margin:0;padding-left:22px;line-height:1.55}
.linea-pasos li{margin-bottom:4px}
.linea-ideal{margin:4px 0 8px;background:var(--suave);border-radius:8px;padding:10px 12px;font-size:14px}