/* =========================================================
   Portal GPS — estilos propios (mapas, alertas, monitoreo).
   La estructura común está en /marca/plataforma.css
   ========================================================= */
/* ---------- Mapas ---------- */
.mapa { width: 100%; height: 460px; border-radius: 12px; border: 1px solid var(--ss-line); z-index: 0; }
.mapa-pantalla { display: flex; flex: 1; min-height: calc(100vh - 61px); }
.mapa-pantalla .panel { width: 330px; flex: 0 0 330px; background: #fff; border-right: 1px solid var(--ss-line); display: flex; flex-direction: column; min-height: 0; }
.mapa-pantalla .panel-head { padding: 14px 16px; border-bottom: 1px solid var(--ss-line); }
.mapa-pantalla .panel-list { overflow-y: auto; flex: 1; max-height: calc(100vh - 200px); }
.mapa-pantalla .mapa-wrap { flex: 1; position: relative; }
.mapa-pantalla #mapa { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
@media (max-width: 991.98px) {
  .mapa-pantalla { flex-direction: column; }
  .mapa-pantalla .panel { width: 100%; flex: none; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--ss-line); }
  .mapa-pantalla .mapa-wrap { min-height: 60vh; }
}
.disp-item { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.disp-item:hover, .disp-item.sel { background: #F3F7FF; }
.min-w-0 { min-width: 0; }
.disp-item .estado { flex: 0 0 auto; }
.disp-item .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: 0 0 34px; }
.disp-item .nm { font-weight: 600; color: var(--ss-navy); }
.disp-item .sub { color: var(--ss-muted); font-size: .76rem; }

.mk-gps { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; font-size: 14px; }
.mk-gps.off { filter: grayscale(1); opacity: .75; }
.mk-label { background: rgba(10,37,64,.9); color: #fff; border: 0; border-radius: 6px; font-weight: 600; font-size: .72rem; padding: 2px 6px; box-shadow: none; }
.mk-label::before { display: none; }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: .85rem; }

.replay-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.replay-bar input[type=range] { flex: 1; min-width: 160px; }

/* ===== Campana de alertas ===== */
.gps-campana { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ss-line); background: #fff; color: var(--ss-navy); display: grid; place-items: center; font-size: 1.05rem; }
.gps-campana:hover { background: #F1F5FB; }
.gps-campana.con-alertas i { color: #dc2626; animation: campana 1.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes campana { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } }
.gps-campana-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.gps-alertas-menu { width: 360px; max-width: calc(100vw - 24px); border-radius: 14px; overflow: hidden; }
.gps-alertas-lista { max-height: 380px; overflow-y: auto; }
.gps-alerta { display: flex; gap: 10px; align-items: center; padding: 9px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid #F1F4F8; }
.gps-alerta:hover { background: #F6F9FE; }
.gps-alerta.nueva { background: #FFF7F7; }
.gps-alerta-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: #fff; display: grid; place-items: center; font-size: .85rem; }
.gps-alerta-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gps-alerta-txt strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gps-alerta-txt small { color: var(--ss-muted); font-size: .74rem; }
.gps-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 32px); }
.gps-toast { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; border-left: 5px solid #dc2626; box-shadow: 0 10px 30px rgba(10, 37, 64, .22); padding: 10px 12px; cursor: pointer; animation: toastIn .25s ease-out; transition: opacity .5s, transform .5s; }
.gps-toast.fuera { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } }

/* Chips por tipo de alerta */
.chip-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ss-line); background: #fff; color: var(--ss-navy); font-size: .8rem; text-decoration: none; }
.chip-tipo b { background: #EEF2F7; border-radius: 999px; padding: 0 7px; font-size: .74rem; }
.chip-tipo.activo { background: var(--ss-navy); color: #fff; border-color: var(--ss-navy); }
.chip-tipo.activo b { background: rgba(255,255,255,.2); }
.chip-tipo.t-sos i { color: #dc2626; } .chip-tipo.t-energia i { color: #ea580c; } .chip-tipo.t-bateria i { color: #d97706; }
.chip-tipo.t-velocidad i { color: #e11d48; } .chip-tipo.t-geocerca i { color: #0E6BFF; } .chip-tipo.t-encendido i { color: #059669; }
.chip-tipo.activo i { color: #fff !important; }
.tipo-alerta-opc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ss-line); border-radius: 10px; cursor: pointer; background: #fff; }
.tipo-alerta-opc:has(input:checked) { border-color: var(--ss-blue); background: #F2F7FF; }
.tipo-alerta-opc > i { width: 18px; text-align: center; color: var(--ss-blue); }

/* Pestañas de dispositivos y barra de acciones masivas */
.tabs-disp { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ss-line); }
.tab-disp { border: 0; background: none; padding: 8px 12px; font-size: .84rem; color: var(--ss-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab-disp b { background: #EEF2F7; color: var(--ss-navy); border-radius: 999px; padding: 1px 8px; font-size: .74rem; margin-left: 4px; }
.tab-disp.activo { color: var(--ss-navy); font-weight: 600; border-bottom-color: var(--ss-blue); }
.tab-disp.t-linea b { background: #D1FAE5; color: #047857; } .tab-disp.t-vencidos b { background: #FEE2E2; color: #B91C1C; } .tab-disp.t-porvencer b { background: #FEF3C7; color: #B45309; }
.barra-masiva { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #F2F7FF; border-bottom: 1px solid #DCE7FB; }
.barra-masiva:not(.d-none) { display: flex !important; }

/* ===== Monitoreo en vivo ===== */
.monitoreo .panel { width: 360px; flex-basis: 360px; }
.buscar-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ss-muted); font-size: .8rem; }
.tabs-mon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #F1F5F9; padding: 3px; border-radius: 10px; }
.tabs-mon button { border: 0; background: none; border-radius: 8px; padding: 6px 2px; font-size: .72rem; color: var(--ss-muted); display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tabs-mon button b { font-size: .95rem; color: var(--ss-navy); }
.tabs-mon button b.v { color: #059669; } .tabs-mon button b.r { color: #DC2626; }
.tabs-mon button.activo { background: #fff; color: var(--ss-navy); box-shadow: 0 1px 4px rgba(10,37,64,.12); font-weight: 600; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.punto.mov { background: #10B981; } .punto.det { background: #F59E0B; }
.grupo-emp-t { width: 100%; border: 0; background: #F8FAFC; border-bottom: 1px solid var(--ss-line); padding: 7px 16px; font-size: .76rem; font-weight: 700; color: var(--ss-navy); text-transform: uppercase; display: flex; align-items: center; gap: 8px; letter-spacing: .02em; }
.grupo-emp-t b { margin-left: auto; background: #E2E8F0; border-radius: 999px; padding: 0 8px; font-size: .72rem; }
.grupo-emp-t i { transition: transform .2s; font-size: .7rem; }
.grupo-emp.cerrado > div { display: none; }
.grupo-emp.cerrado .grupo-emp-t i { transform: rotate(-90deg); }
.monitoreo .disp-item .ic, .det-card .ic { background: var(--c, #0E6BFF); position: relative; }
.monitoreo .disp-item .ic.off, .det-card .ic.off { background: #94A3B8; }
.monitoreo .disp-item .ic::after, .det-card .ic::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: #94A3B8; }
.monitoreo .disp-item .ic.mov::after, .det-card .ic.mov::after { background: #10B981; }
.monitoreo .disp-item .ic.det::after, .det-card .ic.det::after { background: #F59E0B; }
.disp-item.vencido .nm { color: #94A3B8; text-decoration: line-through; }
.txt-mov { color: #047857; font-weight: 600; } .txt-det { color: #B45309; } .txt-off { color: #64748B; }
.disp-item .ind { display: flex; gap: 6px; align-items: center; color: #64748B; font-size: .8rem; }
.senal { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; }
.senal i { width: 3px; background: #CBD5E1; border-radius: 1px; }
.senal i:nth-child(1) { height: 4px; } .senal i:nth-child(2) { height: 6px; } .senal i:nth-child(3) { height: 9px; } .senal i:nth-child(4) { height: 12px; }
.senal i.on { background: #10B981; }
/* Marcador con flecha de rumbo */
.mk-wrap { position: relative; width: 34px; height: 34px; }
.mk-rumbo { position: absolute; inset: -14px; display: flex; justify-content: center; color: #0A2540; font-size: 18px; line-height: 1; pointer-events: none; }
.mk-gps.mov { box-shadow: 0 0 0 4px rgba(16,185,129,.35), 0 2px 8px rgba(0,0,0,.35); }
.mk-alerta .mk-gps { animation: mkAlerta .8s ease-in-out infinite; }
@keyframes mkAlerta { 50% { box-shadow: 0 0 0 12px rgba(220,38,38,.45); } }
/* Tarjeta de detalle */
.det-card { position: absolute; left: 14px; top: 14px; z-index: 900; width: 330px; max-width: calc(100% - 28px); background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(10,37,64,.25); padding: 14px; max-height: calc(100% - 28px); overflow-y: auto; }
.det-head { display: flex; gap: 10px; align-items: center; }
.det-head .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 40px; }
.det-estado { margin: 10px 0; }
.det-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.det-grid > div { background: #F8FAFC; border-radius: 10px; padding: 6px 8px; }
.det-grid small { display: block; color: var(--ss-muted); font-size: .68rem; }
.det-grid b { font-size: .84rem; color: var(--ss-navy); }
.det-linea { display: flex; gap: 8px; font-size: .8rem; color: #334155; padding: 3px 0; }
.det-linea > i { width: 14px; color: var(--ss-blue); margin-top: 3px; }
.det-acciones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; border-top: 1px solid var(--ss-line); padding-top: 10px; }
.det-acciones a, .det-acciones button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .68rem; color: var(--ss-navy); text-decoration: none; padding: 4px 0; border-radius: 8px; }
.det-acciones i { width: 34px; height: 34px; border-radius: 50%; background: #EEF4FF; color: var(--ss-blue); display: grid; place-items: center; font-size: .9rem; }
.det-acciones a:hover i, .det-acciones button:hover i, .det-acciones .on i { background: var(--ss-blue); color: #fff; }
@media (max-width: 991.98px) {
  .monitoreo .panel { width: 100%; flex-basis: auto; }
  .det-card { top: auto; bottom: 10px; left: 10px; width: auto; right: 10px; max-height: 55%; }
}

/* ===== Reproducción de recorrido ===== */
.replay-reloj { position: absolute; right: 12px; bottom: 12px; z-index: 800; background: rgba(10,37,64,.92); color: #fff; border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.replay-reloj b { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; }
.replay-reloj span { font-size: .85rem; color: #7DD3FC; } .replay-reloj small { font-size: .7rem; color: #CBD5E1; }
.replay-grafica { width: 100%; height: 70px; display: block; margin-top: 10px; border: 1px solid var(--ss-line); border-radius: 10px; cursor: pointer; background: #fff; }
.linea-tiempo { overflow-y: auto; max-height: 600px; }
.lt-item { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.lt-item:hover { background: #F6F9FE; }
.lt-item b { display: block; font-size: .85rem; color: var(--ss-navy); }
.lt-item small { display: block; color: var(--ss-muted); font-size: .75rem; }
.lt-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 700; }
.lt-ico.viaje { background: #0E6BFF; } .lt-ico.parada { background: #F59E0B; } .lt-ico.entrada { background: #059669; } .lt-ico.salida { background: #BE123C; } .lt-ico.alerta { background: #DC2626; }
.mk-ini, .mk-fin, .mk-par { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; color: #fff; font-weight: 700; font-size: .72rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mk-ini { background: #059669; } .mk-fin { background: #DC2626; } .mk-par { background: #F59E0B; font-size: .62rem; }


/* ===== Marcadores por tipo (silueta vista desde arriba, color por estado) ===== */
.mk-veh { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.mk-veh-giro { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .6s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.mk-veh.mov::before { content: ''; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,179,134,.2); animation: mkPulso 1.8s ease-out infinite; }
@keyframes mkPulso { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.mk-veh.off .mk-veh-giro { opacity: .85; }
.mk-persona { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 3px solid #fff; color: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mk-alerta .mk-veh-giro, .mk-alerta .mk-persona { animation: mkAlertaVeh .7s ease-in-out infinite; }
@keyframes mkAlertaVeh { 50% { filter: drop-shadow(0 0 10px #DC2626) drop-shadow(0 0 4px #DC2626); } }
.ic-lista { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: #F1F5F9; border-radius: 10px; }
.ic-lista svg { height: 28px; width: auto; }
.ic-lista.persona { background: var(--c); color: #fff; border-radius: 50%; }
.det-head .ic-lista { width: 42px; height: 42px; flex-basis: 42px; }
.leyenda-mapa { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(10,37,64,.18); padding: 6px 10px; font-size: .74rem; display: flex; gap: 10px; }
.leyenda-mapa span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-mapa i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* Estático en azul en el monitoreo (mismo color que el marcador y la leyenda) */
.monitoreo .txt-det { color: #0E6BFF; }
.monitoreo .punto.det { background: #0E6BFF; }
.det-card .estado.det { background: #E3EEFF; color: #0B5AD9; }
.monitoreo .punto.mov { background: #00B386; }

/* Indicador de tiempo real y flujo de datos */
.rt-chip { display: inline-flex; align-items: center; gap: 5px; }
.rt-chip.en-vivo { color: #00A884; font-weight: 600; }
.rt-chip.en-vivo i { font-size: .55rem; animation: rtLatido 1.6s ease-in-out infinite; }
.rt-chip.en-vivo::after { content: 'En vivo'; }
@keyframes rtLatido { 50% { opacity: .25; } }
.flujo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flujo > span { flex: 1 1 120px; text-align: center; background: #F2F7FF; border: 1px solid #DCE7FB; border-radius: 12px; padding: 10px 6px; font-weight: 600; color: var(--ss-navy); }
.flujo > span i { display: block; font-size: 1.2rem; color: var(--ss-blue); margin-bottom: 4px; }
.flujo > span small { font-weight: 400; color: var(--ss-muted); }
.flujo > i { color: var(--ss-green); }