/* ============================================================
   SKALRP ADMIN — MAPA EN TIEMPO REAL + SEGUIMIENTO
   ------------------------------------------------------------
   Techo técnico de CEF 103 (el navegador de FiveM):
   NADA de backdrop-filter (sale un rectángulo negro opaco), ni
   color-mix(), ni :has(), ni oklch(), ni dvh/svh, ni anidado.
   Solo se animan transform y opacity.
   Hereda las variables de style.css (--accent, --cut, --ease...).
   ============================================================ */

:root {
    --lm-civ: #8a897f;
    --lm-pol: #4a90d9;
    --lm-med: #e5484d;
    --lm-staff: #f5c14b;
    --lm-sus: #ff5d4a;
}

/* Punto de aviso ámbar sobre la pestaña del mapa */
.tab-dot.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

/* ============================================================
   MAPA
   ============================================================ */
.lm-wrap { display: flex; flex-direction: column; height: 100%; width: 100%;
    padding: clamp(12px, 1.1vw, 22px) clamp(14px, 1.3vw, 26px); gap: 10px; min-width: 0; }

.lm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.lm-chip {
    display: flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    color: #6e6d65; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07); clip-path: var(--cut-sm);
    padding: 6px 11px; cursor: pointer;
    transition: color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.lm-chip:hover { color: var(--bone); background: rgba(255,255,255,.07); }
.lm-chip:active { transform: scale(.96); }
.lm-chip.on { color: var(--bone); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }

.lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lg.civ { background: var(--lm-civ); }
.lg.pol { background: var(--lm-pol); }
.lg.med { background: var(--lm-med); }
.lg.staff { background: var(--lm-staff); }
.lg.sus { background: none; border: 2px solid var(--lm-sus); width: 10px; height: 10px; }

.lm-search {
    width: clamp(130px, 14vw, 220px);
    background: rgba(10,11,14,.72); border: 1px solid rgba(74,144,217,.2); clip-path: var(--cut-sm);
    color: var(--bone); font-family: inherit; font-size: 12.5px; font-weight: 600;
    padding: 7px 11px; outline: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lm-search:focus { border-color: rgba(74,144,217,.6); box-shadow: 0 0 0 3px rgba(74,144,217,.12); }
.lm-search::placeholder { color: #5d5c55; }

.lm-stats { margin-left: auto; display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; color: #8a897f; letter-spacing: .04em; }
.lm-stats b { color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.lm-sep { width: 1px; height: 13px; background: rgba(255,255,255,.13); display: inline-block; }

/* ---- Escenario del mapa ---- */
.lm-stage {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    background: #080a0d; clip-path: var(--cut); border-top: 2px solid var(--accent);
    cursor: grab;
}
.lm-stage:active { cursor: grabbing; }
.lm-stage canvas { display: block; width: 100%; height: 100%; }

.lm-ctl { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; flex-direction: column; gap: 5px; }
.lm-ctl button {
    width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 1; color: #9aa4b1;
    background: rgba(10,12,15,.86); border: 1px solid rgba(255,255,255,.13);
    clip-path: var(--cut-sm); padding: 0;
    transition: color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.lm-ctl button:hover { color: var(--accent-bright); border-color: rgba(74,144,217,.55); }
.lm-ctl button:active { transform: scale(.9); }
.lm-ctl button.on { color: var(--accent-bright); border-color: rgba(74,144,217,.55); background: rgba(74,144,217,.16); }

.lm-legend {
    position: absolute; left: 10px; bottom: 10px; z-index: 4;
    display: flex; gap: 11px; flex-wrap: wrap; align-items: center;
    background: rgba(8,10,13,.78); border: 1px solid rgba(255,255,255,.09);
    clip-path: var(--cut-sm); padding: 6px 10px;
    font-size: 10px; letter-spacing: .06em; color: #8a897f;
}
.lm-legend span { display: flex; align-items: center; gap: 5px; }

.lm-nomap {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    background: rgba(245,165,36,.14); border: 1px solid rgba(245,165,36,.45);
    color: var(--warn); clip-path: var(--cut-sm); padding: 6px 11px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
}
.lm-nomap[data-hide="true"] { display: none; }

/* ---- Tarjeta al pasar por encima ---- */
.lm-tip {
    position: absolute; z-index: 6; pointer-events: none;
    width: 210px; padding: 9px 11px;
    background: linear-gradient(160deg, rgba(30,33,42,.97), rgba(12,14,19,.97));
    border: 1px solid rgba(255,255,255,.1); clip-path: var(--cut-sm);
    transition: opacity .12s var(--ease);
}
.lm-tip[data-hide="true"] { opacity: 0; }
.lm-tip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lm-tip-top b { font-size: 13px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-tip-top span { font-size: 10.5px; color: var(--accent-bright); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lm-tip-job { font-size: 10.5px; color: #8a897f; margin-top: 2px; }
.lm-tip-bar { height: 4px; margin: 7px 0 5px; background: rgba(255,255,255,.09); overflow: hidden; }
.lm-tip-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--ok)); }
.lm-tip-row { display: flex; justify-content: space-between; font-size: 10.5px; color: #b9b8b0; }
.lm-tip-row span { font-variant-numeric: tabular-nums; }
.lm-tip-sus {
    margin-top: 7px; padding: 4px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
    background: rgba(255,93,74,.16); color: var(--lm-sus); text-align: center;
}

/* ---- Acciones rápidas al pulsar un punto ---- */
.lm-pop {
    position: absolute; z-index: 7; width: 218px; padding: 11px 12px;
    background: linear-gradient(160deg, rgba(32,35,45,.98), rgba(12,14,19,.98));
    border: 1px solid rgba(74,144,217,.35); clip-path: var(--cut-sm);
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
    animation: lmPop .18s var(--ease) both;
}
.lm-pop[data-hide="true"] { display: none; }
@keyframes lmPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.lm-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lm-pop-name { font-size: 13.5px; font-weight: 700; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-pop-id { font-size: 10.5px; color: var(--accent-bright); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lm-pop-sub { font-size: 10.5px; color: #8a897f; margin: 3px 0 9px; }
.lm-pop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-pop-acts .mini-btn { width: 100%; }

.lm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 10.5px; color: #6e6d65; letter-spacing: .03em; }
.lm-foot-note { color: #5d5c55; text-align: right; }

/* ============================================================
   SEGUIMIENTO POR CAPTURAS
   ============================================================ */
.fw-pick {
    background: rgba(10,11,14,.8); border: 1px solid rgba(74,144,217,.25);
    color: var(--accent-bright); font-family: inherit; font-size: 12px;
    padding: 5px 8px; clip-path: var(--cut-sm); outline: none; max-width: 190px;
}

.fw { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
    background: rgba(3,3,5,.9); transition: opacity .22s var(--ease); }
.fw[data-hide="true"] { opacity: 0; pointer-events: none; }
.fw-card {
    width: clamp(520px, 62vw, 880px); display: flex; flex-direction: column;
    background: linear-gradient(160deg, rgba(28,31,39,.99), rgba(12,14,19,.99));
    clip-path: var(--cut); border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    animation: modalIn .26s var(--ease) both;
}
.fw-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fw-who { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.fw-name { font-size: clamp(14px, .3vw + 12px, 19px); font-weight: 700; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-id { font-size: 11px; color: var(--accent-bright); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* La honestidad va en la cabecera, no en la letra pequeña. */
.fw-honest {
    margin-left: auto; display: flex; align-items: center; gap: 7px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--warn);
    background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.35);
    clip-path: var(--cut-sm); padding: 5px 10px;
}
.fw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
    box-shadow: 0 0 8px var(--warn); animation: pulse 1.4s ease-in-out infinite; }

.fw-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #06070a; overflow: hidden; }
/* Doble búfer: los dos <img> apilados, solo uno con .on */
.fw-buf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    opacity: 0; display: block; }
.fw-buf.on { opacity: 1; }
.fw-wait { position: absolute; inset: 0; display: grid; place-items: center;
    color: #5d5c55; font-size: 12px; letter-spacing: .1em; }

/* La edad del fotograma, grande y sin excusas */
.fw-age {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    background: rgba(6,7,10,.82); border: 1px solid rgba(255,255,255,.12);
    clip-path: var(--cut-sm); padding: 6px 11px;
}
.fw-age[data-hide="true"] { display: none; }
.fw-age b { font-size: clamp(15px, .5vw + 11px, 22px); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--ok); }
.fw-age span { font-size: 8.5px; letter-spacing: .13em; color: #6e6d65; }
.fw-age.ok  b { color: var(--ok); }
.fw-age.mid b { color: var(--warn); }
.fw-age.bad b { color: var(--danger); }
.fw-age.bad { border-color: rgba(229,72,77,.5); }

.fw-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fw-metrics { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #8a897f; letter-spacing: .04em; }
.fw-m b { color: var(--bone); font-variant-numeric: tabular-nums; }
.fw-m.warn b { color: var(--warn); }
.fw-m[data-hide="true"] { display: none; }
.fw-controls { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.fw-controls label { font-size: 11.5px; color: #b9b8b0; display: flex; align-items: center; gap: 6px; }
.fw-controls select {
    background: rgba(10,11,14,.8); border: 1px solid rgba(74,144,217,.25);
    color: var(--accent-bright); font-family: inherit; font-size: 11.5px;
    padding: 4px 7px; clip-path: var(--cut-sm); outline: none;
}
.fw-note { padding: 0 16px 12px; font-size: 10.5px; color: #5d5c55; line-height: 1.45; }

/* ===== Escalado en monitores grandes ===== */
@media (min-width: 2560px) {
    .fw-card { width: clamp(880px, 56vw, 1300px); }
}

/* ===== Accesibilidad: respeta reduce-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .lm-chip, .lm-ctl button, .lm-tip, .lm-pop, .fw, .fw-card, .fw-dot, .fw-buf {
        animation: none !important;
        transition: none !important;
    }
}