/* INSECOM GPS · portal de clientes */
:root{
  --rojo:#E30613; --rojo-claro:#FF5A63; --grafito:#111318; --fondo:#0E1015; --panel:#14171E;
  --panel2:#1C2028; --borde:#2E333D; --linea:#232731; --texto:#F2F3F5; --sutil:#A7ADB9;
  --azul:#3B9EFF; --ambar:#FFC400; --gris:#8A909C;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--texto);font:15px/1.4 'IBM Plex Sans',system-ui,sans-serif}
a{color:var(--rojo-claro)}
button,input,select{font:inherit;color:inherit}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sutil{color:var(--sutil);font-size:13px}
.app{min-height:100%;display:flex;flex-direction:column}

/* barra superior */
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:10px 18px;background:var(--panel);border-bottom:1px solid #262A33}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--texto)}
.marca-texto{font-family:'Chakra Petch',sans-serif;font-size:20px;line-height:1}
.marca-texto b{font-weight:700}.marca-texto span{font-weight:500;color:#FF2A36;letter-spacing:.06em}
.marca-texto.grande{font-size:40px}
.cliente{color:var(--sutil);font-size:14px;padding-left:14px;border-left:1px solid var(--borde)}
.secciones{display:flex;flex-wrap:wrap;gap:4px}
.secciones a,.secciones .pronto{padding:9px 13px;border-radius:8px;color:#C9CDD5;text-decoration:none;font-size:14px;font-weight:500}
.secciones a.activo{background:#232731;color:#fff;font-weight:600}
.secciones .pronto{color:#6E7480;cursor:default}
.salir{display:flex;align-items:center;gap:10px;margin-left:auto}
.usuario{font-size:13px;color:var(--sutil)}

/* botones */
.boton{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--rojo);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}
.boton:hover{background:#C70511}
.boton-sec{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--borde);border-radius:10px;background:var(--panel2);color:var(--texto);font-size:14px;text-decoration:none;cursor:pointer}
.boton-sec:hover{border-color:#4A505C}

/* estructura */
.cuerpo{flex:1;display:flex;flex-wrap:wrap;min-height:0}
.lateral{flex:1 1 300px;max-width:380px;padding:16px;background:var(--panel);border-right:1px solid #262A33;display:flex;flex-direction:column;gap:12px;overflow:auto;max-height:calc(100vh - 61px)}
.lateral-cabeza{display:flex;justify-content:space-between;align-items:baseline}
.lateral h1{margin:0;font-family:'Chakra Petch',sans-serif;font-size:22px}
.buscar input,.selector input,.selector select{width:100%;height:42px;padding:0 12px;border-radius:9px;border:1px solid var(--borde);background:var(--panel2);outline:none;color-scheme:dark}
.buscar input:focus,.selector input:focus,.selector select:focus{border-color:var(--rojo-claro)}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
.filtros button{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:17px;border:1px solid var(--borde);background:transparent;color:#DDE0E6;font-size:13px;cursor:pointer}
.filtros button.activo{background:var(--texto);color:var(--grafito);border-color:var(--texto);font-weight:600}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.punto.en_ruta{background:var(--azul)}.punto.ralenti{background:var(--ambar)}.punto.apagado{background:var(--gris)}
.punto.sin_senal{border:2px solid var(--rojo-claro)}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.item{display:flex;gap:11px;width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--linea);background:#181B22;text-align:left;cursor:pointer}
.item:hover{border-color:#3A3F4A}
.item.sel{border-color:var(--rojo);background:#232731}
.item .punto{margin-top:6px;width:10px;height:10px}
.item-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-fila{display:flex;justify-content:space-between;gap:8px}
.item-nombre{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-hace{font-size:12px;color:var(--sutil);white-space:nowrap}
.item-info{font-size:12px;color:#C9CDD5}
.vacio-lista{color:var(--sutil);font-size:14px;padding:14px 4px}

/* mapa */
.mapa-zona{flex:999 1 560px;min-width:0;position:relative;min-height:calc(100vh - 61px)}
.mapa-zona.columna{display:flex;flex-direction:column}
.mapa{position:absolute;inset:0;background:#2A2620}
.mapa-alto{position:relative;flex:1;min-height:420px}
.leaflet-container{font-family:'IBM Plex Sans',sans-serif}
.flotante{position:absolute;z-index:500}
.arriba-izq{top:14px;left:14px}.abajo-izq{left:14px;bottom:14px}
.centro{top:50%;left:50%;transform:translate(-50%,-50%)}
.vacio{padding:12px 18px;border-radius:10px;background:rgba(20,23,30,.92);font-weight:600}
.segmento{display:flex;padding:4px;border-radius:10px;background:var(--panel);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.segmento button{flex:1;min-width:76px;height:36px;border:0;border-radius:7px;background:transparent;color:#DDE0E6;font-size:13px;font-weight:500;cursor:pointer}
.segmento button.activo{background:var(--rojo);color:#fff;font-weight:600}
.segmento.chico button{min-width:48px;height:32px}
.segmento.chico button.activo{background:#2E333D}
.coordenada{padding:8px 12px;border-radius:9px;background:rgba(20,23,30,.92);font-family:'Chakra Petch',sans-serif;font-size:13px}
.etiqueta-vehiculo{background:var(--grafito);color:#fff;border:0;border-radius:6px;padding:3px 8px;font:600 12px 'IBM Plex Sans',sans-serif;box-shadow:none}
.etiqueta-vehiculo::before{display:none}
.marcador{width:26px;height:26px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.marcador.en_ruta{background:var(--azul)}.marcador.ralenti{background:var(--ambar);border-color:var(--grafito)}
.marcador.apagado{background:var(--gris)}.marcador.sin_senal{background:rgba(255,255,255,.7);border:3px dashed var(--rojo)}
.marcador svg{display:block}
.marcador.sel{outline:4px solid rgba(227,6,19,.45)}

/* ficha */
.ficha{position:absolute;z-index:600;top:14px;right:14px;width:340px;max-width:calc(100% - 28px);padding:16px;border-radius:14px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px}
.ficha[hidden]{display:none}
.ficha-cabeza{display:flex;justify-content:space-between;gap:10px}
.ficha h2{margin:0;font-family:'Chakra Petch',sans-serif;font-size:22px}
.cerrar{width:36px;height:36px;border-radius:8px;border:0;background:var(--panel2);font-size:22px;line-height:1;cursor:pointer}
.estado{align-self:flex-start;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:.03em}
.estado.en_ruta{background:rgba(59,158,255,.16);color:#7CC0FF}.estado.ralenti{background:rgba(255,196,0,.16);color:#FFD54D}
.estado.apagado{background:#232731;color:#C9CDD5}.estado.sin_senal{background:rgba(227,6,19,.18);color:#FF8A90}
.ficha-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.ficha-datos span,.tarjetas span{display:block;font-size:12px;color:var(--sutil)}
.ficha-datos b{font-size:15px;font-weight:600}
.utm{padding:9px 12px;border-radius:8px;background:var(--panel2);font-family:'Chakra Petch',sans-serif;font-size:15px;font-weight:500}
.ficha-botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* recorrido */
.selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.selector label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sutil)}
.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tarjetas div{padding:11px;border-radius:10px;background:var(--panel2)}
.tarjetas b{font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:600}
.titulo-chico{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--sutil)}
.linea{list-style:none;margin:0;padding:0}
.linea li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--linea);cursor:pointer}
.linea .hora{font-family:'Chakra Petch',sans-serif;font-weight:600;width:44px}
.linea .num{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--grafito);border:2px solid #fff}
.linea .txt{display:flex;flex-direction:column;font-size:14px}.linea .txt small{color:var(--sutil);font-size:13px}
.perfil{background:var(--panel);border-top:1px solid #262A33;padding:12px 18px 14px}
.perfil-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
.perfil-cabeza h2{margin:0;font-size:14px}
.perfil-cabeza .sutil{margin-left:auto}
.play{width:44px;height:44px;border-radius:50%;border:0;background:var(--rojo);color:#fff;font-size:16px;cursor:pointer}
.perfil-svg{width:100%;height:140px;display:block;cursor:crosshair}
.perfil-eje{display:flex;justify-content:space-between;font-family:'Chakra Petch',sans-serif;font-size:12px;color:var(--sutil)}

/* ingreso */
body.ingreso{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:radial-gradient(1200px 600px at 50% 0%,#1A1D24,var(--fondo))}
.ingreso-caja{width:100%;max-width:400px;display:flex;flex-direction:column;gap:26px}
.ingreso-marca{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.bajada{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:13px;letter-spacing:.3em;color:#B4B9C4}
.ingreso-form{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:16px;background:var(--panel);border:1px solid #262A33}
.ingreso-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#C9CDD5}
.ingreso-form input[type=email],.ingreso-form input[type=password]{height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--borde);background:var(--panel2);outline:none;font-size:16px}
.ingreso-form input:focus{border-color:var(--rojo-claro)}
.ingreso-form .check{flex-direction:row;align-items:center;gap:8px}
.error{margin:0;color:#FF8A90;font-size:14px}
.pie{text-align:center;color:#6E7480;font-size:13px;margin:0}

@media (max-width: 720px){
  .lateral{max-width:none;max-height:none;order:2}
  .mapa-zona{min-height:70vh}
  .ficha{top:auto;bottom:14px;right:14px;left:14px;width:auto}
  .usuario,.cliente{display:none}
}

/* marcador de vehículo (silueta vista desde arriba) */
.vehiculo{position:relative;width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.vehiculo svg{display:block;transition:transform .6s ease}
.vehiculo.sel::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(227,6,19,.28);border:2px solid rgba(227,6,19,.8)}
.vehiculo.en_ruta::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(59,158,255,.55);animation:pulso 2s ease-out infinite}
.vehiculo.sin_senal svg{opacity:.8}
.sin-senal-marca{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#E30613;color:#fff;font:700 12px/18px 'IBM Plex Sans',sans-serif;text-align:center;border:2px solid #fff}
@keyframes pulso{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion: reduce){.vehiculo.en_ruta::after{animation:none}.vehiculo svg{transition:none}}

/* ===== Administración ===== */
.pagina{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:18px 18px 48px;display:flex;flex-direction:column;gap:16px}
.pagina.angosta{max-width:760px}
.pagina h1{margin:0;font-family:'Chakra Petch',sans-serif;font-size:26px;font-weight:600}
.pagina-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.pagina-cabeza p{margin:4px 0 0}
.cabeza-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);overflow-x:auto}
.pestanas a{padding:10px 14px;color:#C9CDD5;text-decoration:none;font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.pestanas a:hover{color:#fff}
.pestanas a.activo{color:#fff;font-weight:600;border-bottom-color:var(--rojo)}
.volver{color:var(--sutil);text-decoration:none;font-size:14px;align-self:flex-start}
.volver:hover{color:#fff}
.filtro-select select{height:42px;padding:0 12px;border-radius:9px;border:1px solid var(--borde);background:var(--panel2);color-scheme:dark;min-width:200px}
.buscar-tabla input{max-width:380px}
.fuerte{font-weight:600;color:var(--texto);text-decoration:none}
a.fuerte:hover{color:var(--rojo-claro)}
.bloque{display:block}
.mono{font-family:'Chakra Petch',sans-serif;letter-spacing:.02em}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid #262A33;border-radius:12px;overflow:hidden}
.tabla th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sutil);padding:11px 14px;background:#181B22;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);font-size:14px;vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:#181B22}
.tabla td a:not(.boton-sec):not(.fuerte){color:var(--texto)}
.tabla .acciones{text-align:right;width:1%;white-space:nowrap}
.tabla .acciones .boton-sec{display:inline-flex;min-height:34px}
.tabla .punto{margin-right:4px}
.chip{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
td > .chip:first-child{margin-left:0}
.chip.ok{background:rgba(59,158,255,.16);color:#7CC0FF}
.chip.apagado{background:#232731;color:#A7ADB9}
.chip.ambar-chip{background:rgba(255,196,0,.16);color:#FFD54D}
.chip.rojo-chip,.chip.alerta-chip{background:rgba(227,6,19,.18);color:#FF8A90}
.vacio-caja{display:flex;flex-direction:column;gap:4px;padding:28px;border-radius:12px;border:1px dashed var(--borde);color:var(--sutil);text-align:center}
.vacio-caja b{color:var(--texto)}
.formulario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:20px;border-radius:14px;background:var(--panel);border:1px solid #262A33}
.formulario .ancho{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#C9CDD5;border:0;margin:0;padding:0;min-width:0}
.campo legend{padding:0;margin-bottom:8px}
.opcional{color:#6E7480;font-size:12px}
.campo input:not([type=radio]):not([type=checkbox]),.campo select,.campo textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:9px;border:1px solid var(--borde);background:var(--panel2);outline:none;font-size:15px;color-scheme:dark}
.campo textarea{resize:vertical}
.campo input:not([type=radio]):not([type=checkbox]):focus,.campo select:focus,.campo textarea:focus{border-color:var(--rojo-claro)}
.campo .error{font-size:13px}
.campo[hidden],.interruptor[hidden]{display:none}
.interruptor{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--panel2);cursor:pointer}
.interruptor input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--rojo);flex-shrink:0}
.interruptor span,.rol-op span,.zona-peligro div,.clave-temporal div{display:flex;flex-direction:column;gap:2px}
.interruptor small,.rol-op small,.zona-peligro small,.clave-temporal small{color:var(--sutil);font-size:13px}
.roles{display:grid;gap:8px}
.rol-op{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--borde);cursor:pointer}
.rol-op:has(input:checked){border-color:var(--rojo);background:rgba(227,6,19,.08)}
.rol-op input{margin:3px 0 0;accent-color:var(--rojo)}
.rol-op b{color:var(--texto);font-size:14px}
.tipos-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.tipo-op input{position:absolute;opacity:0}
.tipo-caja{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:10px;border:1px solid var(--borde);text-align:center;font-size:13px;color:#DDE0E6;cursor:pointer;height:100%}
.tipo-op input:checked + .tipo-caja{border-color:var(--rojo);background:rgba(227,6,19,.08);color:#fff;font-weight:600}
.tipo-op input:focus-visible + .tipo-caja{outline:2px solid var(--rojo-claro);outline-offset:2px}
.tipo-caja svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.nota{margin:0;padding:12px 14px;border-radius:10px;background:rgba(255,196,0,.08);border:1px solid rgba(255,196,0,.25);font-size:14px;color:#DDE0E6}
.form-botones{display:flex;gap:8px;flex-wrap:wrap}
.atajos{display:flex;flex-wrap:wrap;gap:8px}
.zona-peligro{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid #3A2228;background:#1A1417}
.boton-peligro{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--rojo);background:transparent;color:#FF8A90;font-weight:600;cursor:pointer}
.boton-peligro:hover{background:var(--rojo);color:#fff}
.alerta{margin:0;padding:12px 14px;border-radius:10px;background:rgba(227,6,19,.14);color:#FF8A90;font-size:14px}
.clave-temporal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;border-radius:12px;background:rgba(255,196,0,.08);border:1px solid rgba(255,196,0,.35)}
.clave-temporal div{flex:1 1 260px}
.clave-temporal code{font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:600;letter-spacing:.08em;color:#FFD54D;padding:6px 12px;border-radius:8px;background:var(--grafito)}
.aviso-flotante{position:fixed;z-index:2000;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 18px;border-radius:10px;background:var(--texto);color:var(--grafito);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:opacity .3s,transform .3s}
.aviso-flotante.fuera{opacity:0;transform:translate(-50%,10px);pointer-events:none}
a.usuario{text-decoration:none}a.usuario:hover{color:#fff}
.form-titulo{margin:0;font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:600}
.ingreso-form input[type=text]{height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--borde);background:var(--panel2);outline:none;font-size:16px}
.ingreso-pie-acciones{display:flex;justify-content:center;gap:18px;font-size:14px}
.ingreso-pie-acciones a,.enlace{color:var(--sutil);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
@media (max-width: 720px){
  .formulario{grid-template-columns:1fr}
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla{background:transparent;border:0}
  .tabla tr{margin-bottom:10px;border:1px solid #262A33;border-radius:12px;background:var(--panel);padding:6px 0}
  .tabla td{border:0;padding:6px 14px;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .tabla td[data-l]::before{content:attr(data-l);color:var(--sutil);font-size:12px;text-align:left}
  .tabla td:first-child{text-align:left;display:block}
  .tabla td:first-child::before{display:none}
  .tabla .acciones{width:auto;text-align:left}
  .tabla tbody tr:hover td{background:none}
  .zona-peligro{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion: reduce){.aviso-flotante{transition:none}}
.etq{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tabla td .v{display:block}
@media (max-width: 720px){
  .secciones .pronto{display:none}
  .tabla td .v{text-align:right}
  .tabla td .v .bloque{display:block}
}

/* ===== Capas del cliente ===== */
.arriba-izq{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.capas-ctrl{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.capas-ctrl[hidden]{display:none}
.boton-capas{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;border:0;background:var(--panel);color:#fff;font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer}
.boton-capas[aria-expanded=true]{background:var(--rojo)}
.boton-capas-n{font-family:'Chakra Petch',sans-serif;font-weight:500;color:#C9CDD5}
.boton-capas[aria-expanded=true] .boton-capas-n{color:#fff}
.panel-capas{width:300px;max-width:calc(100vw - 28px);max-height:min(60vh,460px);overflow:auto;padding:12px;border-radius:12px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.panel-capas[hidden]{display:none}
.panel-capas-cabeza{display:flex;flex-direction:column;gap:2px;padding:2px 4px 10px;border-bottom:1px solid var(--linea);margin-bottom:6px}
.panel-capas ul{list-style:none;margin:0;padding:0}
.panel-capas li{display:flex;align-items:center;gap:4px}
.panel-capas label{flex:1;display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer;min-width:0}
.panel-capas input{width:18px;height:18px;margin:0;accent-color:var(--rojo);flex-shrink:0}
.panel-capas label span{display:flex;flex-direction:column;min-width:0}
.panel-capas label b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-capas label small{font-size:12px;color:var(--sutil)}
.panel-capas .ir{width:36px;height:36px;flex-shrink:0;border:0;border-radius:8px;background:transparent;color:var(--sutil);cursor:pointer;display:flex;align-items:center;justify-content:center}
.panel-capas .ir:hover{background:var(--panel2);color:#fff}
.muestra{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:0 0 0 2px #111318 inset,0 0 0 1px rgba(255,255,255,.25);flex-shrink:0}
.con-muestra{display:inline-flex;align-items:center;gap:9px}
.etiqueta-capa{background:rgba(17,19,24,.92);color:#fff;border:0;border-radius:6px;padding:3px 8px;font:500 12px 'IBM Plex Sans',sans-serif;box-shadow:none}
.etiqueta-capa::before{display:none}
.popup-gps .leaflet-popup-content-wrapper{background:var(--panel);color:var(--texto);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.popup-gps .leaflet-popup-tip{background:var(--panel)}
.popup-gps .leaflet-popup-content{margin:12px 14px;font:14px/1.4 'IBM Plex Sans',sans-serif}
.popup-gps a.leaflet-popup-close-button{color:var(--sutil)}
.popup-capa{display:flex;flex-direction:column;gap:6px}
.popup-capa b{font-family:'Chakra Petch',sans-serif;font-size:16px;font-weight:600}
.popup-capa p{margin:0;color:#C9CDD5;font-size:13px;max-height:140px;overflow:auto}
.popup-capa-capa{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sutil)}
.popup-capa-capa i{width:10px;height:10px;border-radius:3px}
.popup-capa-coord{font-family:'Chakra Petch',sans-serif;font-size:13px;color:#DDE0E6}
.vista-capa{position:relative;height:380px;border-radius:14px;overflow:hidden;border:1px solid #262A33}
.colores{display:flex;flex-wrap:wrap;gap:10px}
.color-op input{position:absolute;opacity:0}
.color-op span{display:block;width:40px;height:40px;border-radius:10px;background:var(--c);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--borde);cursor:pointer}
.color-op input:checked + span{box-shadow:0 0 0 2px var(--texto)}
.color-op input:focus-visible + span{outline:2px solid var(--rojo-claro);outline-offset:3px}
.campo input[type=file]{padding:9px 12px;cursor:pointer}
.campo input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border-radius:7px;border:1px solid var(--borde);background:var(--fondo);color:var(--texto);font:inherit;font-size:13px;cursor:pointer}
@media (max-width: 720px){ .vista-capa{height:300px} }
.color-op,.tipo-op{position:relative}
.color-op input,.tipo-op input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.archivo-elegir{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px;border-radius:9px;border:1px dashed var(--borde);background:var(--panel2)}
.archivo-elegir:focus-within{border-color:var(--rojo-claro)}
.archivo-elegir input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0}
.archivo-elegir .boton-sec{pointer-events:none;background:var(--fondo)}
.archivo-nombre{font-size:14px;color:#DDE0E6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover: none){ #cursor{display:none} }

/* ===== Alertas ===== */
.insignia{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:10px;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;line-height:1}
.insignia[hidden]{display:none}
.filtros-fila{display:flex;flex-wrap:wrap;gap:8px}
.alerta-marca{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--gris)}
.alerta-marca.rojo{background:var(--rojo);box-shadow:0 0 0 3px rgba(227,6,19,.25)}
.alerta-marca.ambar{background:var(--ambar)}
.alerta-marca.azul{background:var(--azul)}
.alerta-marca.gris{background:var(--gris)}
.alertas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.alertas-dia{margin:14px 0 4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sutil)}
.alertas-dia:first-child{margin-top:0}
.alerta-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid #262A33}
.alerta-item.nueva{border-color:rgba(227,6,19,.55);background:#1A161A}
.alerta-hora{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15px;width:44px;flex-shrink:0}
.alerta-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.alerta-cuerpo b{font-size:15px}
.alerta-cuerpo span{font-size:14px;color:#C9CDD5}
.alerta-cuerpo small{font-size:12px;color:var(--sutil)}
.alerta-acciones{display:flex;gap:6px;flex-shrink:0}
.alerta-acciones .boton-sec{min-height:36px}
.paginas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.boton-sec.deshabilitado{opacity:.4;pointer-events:none}
.tabla-pref{width:100%;border-collapse:collapse}
.tabla-pref th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sutil);padding:0 8px 10px}
.tabla-pref th:not(:first-child),.tabla-pref td:not(:first-child){text-align:center;width:110px}
.tabla-pref td{padding:12px 8px;border-top:1px solid var(--linea)}
.pref-nombre{display:flex;align-items:flex-start;gap:12px}
.pref-nombre .alerta-marca{margin-top:4px}
.pref-nombre span{display:flex;flex-direction:column;gap:2px}
.pref-nombre small{color:var(--sutil);font-size:13px}
.pref-check{display:inline-flex;padding:8px;cursor:pointer}
.pref-check input{width:22px;height:22px;margin:0;accent-color:var(--rojo);cursor:pointer}
.avisos-alerta{position:fixed;z-index:2100;top:72px;right:16px;display:flex;flex-direction:column;gap:8px;width:320px;max-width:calc(100vw - 32px);pointer-events:none}
.aviso-alerta{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid #2E333D;border-left:4px solid var(--gris);box-shadow:0 10px 30px rgba(0,0,0,.5);color:var(--texto);text-decoration:none;animation:entra .3s ease-out;transition:opacity .4s,transform .4s}
.aviso-alerta.rojo{border-left-color:var(--rojo)}.aviso-alerta.ambar{border-left-color:var(--ambar)}.aviso-alerta.azul{border-left-color:var(--azul)}
.aviso-alerta span{display:flex;flex-direction:column;min-width:0}
.aviso-alerta small{color:var(--sutil);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aviso-alerta.fuera{opacity:0;transform:translateX(20px)}
@keyframes entra{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@media (max-width: 720px){
  .alerta-item{flex-wrap:wrap}
  .alerta-acciones{width:100%;padding-left:70px}
  .tabla-pref th:not(:first-child),.tabla-pref td:not(:first-child){width:70px}
}
@media (prefers-reduced-motion: reduce){.aviso-alerta{animation:none;transition:none}}

/* Safari: radios y casillas con tamaño fijo dentro de los formularios */
.rol-op input,.interruptor input,.pref-check input{-webkit-appearance:auto;appearance:auto;flex:0 0 auto;width:18px;height:18px;min-height:0;padding:0}
.rol-op span{flex:1;min-width:0}
/* Safari: listas desplegables con el mismo alto y flecha propia */
.campo select,.filtro-select select,.selector select{-webkit-appearance:none;appearance:none;min-height:44px;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A7ADB9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.filtro-select select,.selector select{height:42px;min-height:42px}

/* ===== Corte de motor ===== */
.motor-ctrl{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--linea)}
.motor-ctrl[hidden]{display:none}
.motor-cabeza{display:flex;flex-direction:column;gap:2px}
.motor-cabeza b{font-family:'Chakra Petch',sans-serif;font-size:15px;letter-spacing:.04em}
.motor-cabeza small{color:var(--sutil);font-size:12px}
.motor-cabeza small.aviso{color:#FFD54D}
.deslizar{position:relative;height:56px;border-radius:28px;background:#2A1216;border:1px solid rgba(227,6,19,.55);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.deslizar:focus-visible{outline:2px solid var(--rojo-claro);outline-offset:3px}
.deslizar-relleno{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(227,6,19,.25),rgba(227,6,19,.6));border-radius:28px}
.deslizar-texto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:40px;font-weight:600;font-size:15px;letter-spacing:.02em;color:#FFB3B8;pointer-events:none}
.deslizar-texto::after{content:"›››";margin-left:8px;letter-spacing:2px;opacity:.7}
.deslizar-perilla{position:absolute;left:4px;top:4px;width:48px;height:48px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:grab;touch-action:none}
.deslizar.activo .deslizar-perilla{cursor:grabbing}
.deslizar-perilla.vuelve{transition:transform .28s cubic-bezier(.3,1.4,.5,1)}
.deslizar-perilla.vuelve ~ *,.deslizar-perilla.vuelve + *{transition:width .28s}
.deslizar.bloqueado{background:#1C2028;border-color:var(--borde)}
.deslizar.bloqueado .deslizar-perilla{background:#3A3F4A;cursor:not-allowed}
.deslizar.bloqueado .deslizar-texto{color:#6E7480}
.deslizar.bloqueado .deslizar-relleno{display:none}
.motor-msg{margin:0;padding:10px 12px;border-radius:9px;font-size:14px}
.motor-msg.ok{background:rgba(59,158,255,.14);color:#9CCFFF}
.motor-msg.error{background:rgba(227,6,19,.16);color:#FF8A90}
@media (prefers-reduced-motion: reduce){.deslizar-perilla.vuelve{transition:none}}
.ficha{max-height:calc(100% - 28px);overflow-y:auto}

/* ===== Informes ===== */
.inf-form{display:flex;flex-direction:column;gap:14px}
.inf-form .selector[hidden]{display:none}
.inf-pagina{max-width:none;margin:0;overflow:auto;max-height:calc(100vh - 61px);flex:999 1 560px}
.inf-inicio{margin-top:40px}
.inf-pantalla .inf-kpis{width:100%;border-collapse:separate;border-spacing:8px 0;margin:0 -8px 18px}
.inf-pantalla .inf-kpis td{background:var(--panel);border:1px solid #262A33;border-radius:12px;padding:12px 14px;vertical-align:top}
.inf-pantalla .inf-kpis span{display:block;font-size:12px;color:var(--sutil)}
.inf-pantalla .inf-kpis b{display:block;font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:600;margin-top:2px}
.inf-pantalla .inf-h{font-family:'Chakra Petch',sans-serif;font-size:17px;font-weight:600;margin:22px 0 8px}
.inf-pantalla .inf-tabla{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid #262A33;border-radius:12px;overflow:hidden}
.inf-pantalla .inf-tabla th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sutil);padding:10px 12px;background:#181B22;border-bottom:1px solid var(--linea)}
.inf-pantalla .inf-tabla td{padding:10px 12px;border-bottom:1px solid var(--linea);font-size:14px;vertical-align:top}
.inf-pantalla .inf-tabla small{color:var(--sutil)}
.inf-pantalla .inf-tabla .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inf-pantalla .inf-tabla .c{font-family:'Chakra Petch',sans-serif;font-size:13px;white-space:nowrap}
.inf-pantalla .inf-tabla tfoot td{font-weight:700;background:#181B22;border-bottom:0}
.inf-pantalla .inf-tabla tbody tr:last-child td{border-bottom:0}
.inf-pantalla .inf-tabla tr.tenue td{color:#6E7480}
.inf-marca{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--gris)}
.inf-marca.rojo{background:var(--rojo)}.inf-marca.ambar{background:var(--ambar)}.inf-marca.azul{background:var(--azul)}
.inf-pantalla .inf-nota{color:var(--sutil);font-size:13px;margin:10px 0 0}
.inf-pantalla .inf-vacio{color:var(--sutil)}
@media (max-width: 720px){
  .inf-pagina{max-height:none}
  .inf-pantalla .inf-kpis,.inf-pantalla .inf-kpis tbody,.inf-pantalla .inf-kpis tr{display:block;margin:0 0 14px}
  .inf-pantalla .inf-kpis td{display:inline-block;width:calc(50% - 6px);margin:0 4px 8px 0}
  .inf-pantalla .inf-tabla thead{display:none}
  .inf-pantalla .inf-tabla,.inf-pantalla .inf-tabla tbody,.inf-pantalla .inf-tabla tfoot,.inf-pantalla .inf-tabla tr,.inf-pantalla .inf-tabla td{display:block;width:100%}
  .inf-pantalla .inf-tabla tr{border-bottom:1px solid var(--linea);padding:6px 0}
  .inf-pantalla .inf-tabla td{border:0;padding:4px 12px;display:flex;justify-content:space-between;gap:10px;text-align:right}
  .inf-pantalla .inf-tabla td[data-l]::before{content:attr(data-l);color:var(--sutil);font-size:12px;text-align:left}
}

/* ===== Mapa MapLibre ===== */
.mapa-ml{background:#E7DFCE}
.marcador-ml{position:relative;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.marcador-ml .etiqueta-vehiculo{position:absolute;left:46px;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none}
.marcador-ml:focus-visible{outline:2px solid var(--rojo-claro);outline-offset:4px;border-radius:50%}
.boton-3d{justify-content:center;min-width:52px;font-family:'Chakra Petch',sans-serif;letter-spacing:.06em}
.boton-3d.activo{background:var(--rojo)}
.maplibregl-ctrl-group{background:var(--panel);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.maplibregl-ctrl-group button{width:36px;height:36px}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--borde)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-ctrl-scale{background:rgba(20,23,30,.85);color:#fff;border-color:#fff;font:600 11px 'IBM Plex Sans',sans-serif}
.maplibregl-ctrl-attrib{font:11px 'IBM Plex Sans',sans-serif}
.maplibregl-popup.popup-gps .maplibregl-popup-content{background:var(--panel);color:var(--texto);border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.maplibregl-popup.popup-gps .maplibregl-popup-tip{border-top-color:var(--panel);border-bottom-color:var(--panel)}
.maplibregl-popup.popup-gps .maplibregl-popup-close-button{color:var(--sutil);font-size:18px;right:4px;top:2px}
.cursor-recorrido{width:18px;height:18px;border-radius:50%;background:var(--rojo);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}

/* ===== Editor de rutas y señalética ===== */
.editor{flex:1;display:flex;flex-direction:column;min-height:0}
.editor-barra{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#181B22;border-bottom:1px solid #262A33;flex-wrap:wrap}
.editor-barra .volver{font-weight:600;color:var(--texto)}
.editor-estado{margin-left:auto;font-size:13px;color:var(--sutil)}
.editor-estado.sucio{color:#FFD54D}
.editor-barra .boton{min-height:38px}
.editor-cuerpo .mapa-zona{min-height:calc(100vh - 121px)}
.editor-panel{order:2;border-right:0;border-left:1px solid #262A33;max-height:calc(100vh - 121px)}
.herramientas button{display:flex;align-items:center;gap:6px;justify-content:center;min-width:84px}
.ed-panel-cabeza{display:flex;flex-direction:column;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.ed-panel-cabeza .volver{background:none;border:0;padding:0;cursor:pointer;font-size:13px;text-align:left}
.ed-panel-cabeza b{font-family:'Chakra Petch',sans-serif;font-size:17px}
.ed-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ed-lista button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--linea);background:#181B22;text-align:left;cursor:pointer}
.ed-lista button:hover{border-color:#3A3F4A}
.ed-lista span{display:flex;flex-direction:column;min-width:0}
.ed-lista b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-lista small{font-size:12px;color:var(--sutil)}
.ed-lista svg{flex-shrink:0}
.ed-form{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.ed-grupo{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.ed-grupo small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sutil)}
.ed-tipos{display:flex;flex-wrap:wrap;gap:6px}
.ed-tipo{width:48px;height:48px;padding:0;border-radius:10px;border:1px solid var(--borde);background:#181B22;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ed-tipo.activo{border-color:var(--rojo);background:rgba(227,6,19,.14);box-shadow:0 0 0 1px var(--rojo)}
.ed-tipo:focus-visible{outline:2px solid var(--rojo-claro);outline-offset:2px}
.ed-estilo{align-self:flex-start}
.ed-fotos{display:flex;flex-wrap:wrap;gap:8px}
.ed-foto{position:relative;width:78px;height:78px;border-radius:9px;overflow:hidden;background:#181B22}
.ed-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ed-foto button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(17,19,24,.85);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.ed-foto-agregar{position:relative;width:78px;height:78px;border-radius:9px;border:1px dashed var(--borde);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--sutil);cursor:pointer}
.ed-foto-agregar input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ed-foto-agregar[hidden]{display:none}
.ed-coord{font-family:'Chakra Petch',sans-serif}
.ed-asa{width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:3px solid var(--rojo);box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:grab}
.ed-asa.grande{width:20px;height:20px;background:transparent;border-width:3px}
.editor-abrir{align-self:flex-start}
.popup-senal{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#DDE0E6}
.popup-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:2px}
.popup-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
@media (max-width: 720px){
  .editor-panel{max-height:none}
  .herramientas button{min-width:0;padding:0 8px}
}
/* Lo marcado como oculto se oculta siempre, aunque su clase defina display */
[hidden]{display:none !important}
/* Listas desplegables nunca más anchas que la pantalla (nombres de vehículo largos) */
.filtro-select{max-width:100%;min-width:0}
.filtro-select select{max-width:100%;text-overflow:ellipsis}
.error-pagina{align-items:flex-start}
.error-codigo{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--rojo-claro)}
.paletas button{flex:0 0 auto;min-width:0;padding:0 12px;white-space:nowrap}

/* Seguir y orientación (como el Mapa Operacional de ONE) */
.controles-mapa{position:absolute;z-index:550;right:10px;bottom:150px;display:flex;flex-direction:column;gap:6px}
.controles-mapa button{width:44px;height:44px;border-radius:10px;border:0;background:var(--panel);color:#fff;font-size:20px;line-height:1;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer;display:flex;align-items:center;justify-content:center}
.controles-mapa button:hover{background:#232731}
.controles-mapa button.activo{background:var(--rojo)}
.controles-mapa .flecha-rumbo{display:inline-block;transform:rotate(-90deg);font-size:17px}
.controles-mapa .norte{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:11px;line-height:1.05;text-align:center}
.aviso-control{position:absolute;z-index:560;right:64px;bottom:180px;max-width:260px;padding:9px 12px;border-radius:9px;background:rgba(20,23,30,.94);color:#fff;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
@media (max-width: 720px){ .controles-mapa{bottom:170px} .aviso-control{bottom:200px} }
.ed-buscar-tipo{width:100%;height:40px;padding:0 12px;margin-bottom:10px;border-radius:9px;border:1px solid var(--borde);background:var(--panel2);color-scheme:dark;outline:none}
.ed-buscar-tipo:focus{border-color:var(--rojo-claro)}
.ed-tipos{max-height:none}
.boton-seguir{gap:8px;font-weight:600}
.boton-seguir span{font-size:18px;line-height:1}

/* política de privacidad */
.legal .marca{margin-bottom:6px}
.legal h2{margin:14px 0 0;font-family:"Chakra Petch",sans-serif;font-size:18px;font-weight:600}
.legal p,.legal li{line-height:1.6;color:#DDE0E6}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}