:root{
  --bg:#0a0908; --panel:#141210; --panel-edge:rgba(255,225,190,.08);
  --olive:#38b6e0; --olive-dim:#1c5a70; --amber:#d9a52c;
  --text:#f3ede2; --text-dim:#9c9388;
  --blue:#4fa6e8; --blue-dim:#1c3a52;
  --red:#e0584f;  --red-dim:#4a2220;
  --green:#63a445; --green-dim:#1a3326;
  --warn:#d9a52c;
  --crimson:#ef2b46; --crimson-dim:#4a1420;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;height:100%;overflow:hidden;}
button, select, input, label, .modal-body, .modal-title { font-family:'Inter',sans-serif; }
#app{display:flex;flex-direction:column;height:100vh;}
#hud{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#141a10,#0e120c);
  border-bottom:1px solid var(--panel-edge);
  padding:10px 18px;flex-shrink:0;gap:24px;
}
.hud-block{display:flex;align-items:center;gap:10px;}
.brand{font-family:'Big Shoulders',sans-serif;font-weight:700;letter-spacing:.08em;font-size:15px;color:var(--text);text-transform:uppercase;}
.brand span{color:var(--olive);}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);animation:blink 1.4s infinite;}
.live-dot.offline{background:var(--text-dim);box-shadow:none;animation:none;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.map-name{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.05em;color:var(--amber);text-transform:uppercase;}
.tickets{display:flex;align-items:center;gap:10px;font-size:13px;}
.ticket-bar{width:160px;height:8px;background:var(--olive-dim);border-radius:2px;overflow:hidden;display:flex;border:1px solid var(--panel-edge);}
.ticket-fill-blue{background:var(--blue);height:100%;}
.ticket-fill-red{background:var(--red);height:100%;}
.ticket-num{font-weight:700;min-width:34px;text-align:center;}
.ticket-num.blue{color:var(--blue);}
.ticket-num.red{color:var(--red);}
.status-text{font-size:11px;color:var(--text-dim);}
#sideTabs{display:flex;border-bottom:1px solid var(--panel-edge);flex-shrink:0;}
.side-tab{
  flex:1;padding:8px 0;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;cursor:pointer;color:var(--text-dim);
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.side-tab.active{color:var(--olive);border-bottom-color:var(--olive);}
.side-tab:hover:not(.active){color:var(--text);}
#body{flex:1;display:flex;min-height:0;}
#mapwrap{flex:1;position:relative;min-width:0;background:#05070a;}
#map{width:100%;height:100%;background:#05070a;}
#sweep{
  position:absolute;inset:0;pointer-events:none;z-index:500;
  background:conic-gradient(from 0deg,rgba(124,143,85,.12),transparent 35deg);
  mix-blend-mode:screen;animation:sweep 6s linear infinite;opacity:.5;
}
@keyframes sweep{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#side{
  width:300px;flex-shrink:0;background:var(--panel);
  border-left:1px solid var(--panel-edge);
  display:flex;flex-direction:column;
}
/* Modo embebido (visor público en latamcompany-next): sin sidebar, mapa a pantalla completa,
   sin accesos a herramientas de staff (link a index.html live, mapping) */
body.embed-mode #side{display:none;}
body.embed-mode #rLiveLink,
body.embed-mode #rMappingBtn{display:none;}
#sideContent{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px;}
.panel-title{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive);border-bottom:1px solid var(--panel-edge);
  padding-bottom:6px;margin-bottom:6px;
}
.player-card{
  border:1px solid var(--panel-edge);background:#0d120b;
  border-radius:3px;padding:10px;font-size:11px;line-height:1.8;
}
.player-card .pname{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;color:var(--text);}
.player-card .ptag{font-weight:700;}
.player-card .ptag.blue{color:var(--blue);}
.player-card .ptag.red{color:var(--red);}
.player-card .row{display:flex;justify-content:space-between;color:var(--text-dim);}
.player-card .val{color:var(--text);}
.no-data{color:var(--text-dim);font-size:11px;text-align:center;padding:20px 0;}
#tabPlayers,#tabSearch,#tabAdmin,#tabHistory,#tabKillfeed{display:none;}
#tabPlayers.show,#tabSearch.show,#tabAdmin.show,#tabHistory.show,#tabKillfeed.show{display:block;}
.admin-section{margin-bottom:16px;}
.admin-section .panel-title{color:var(--amber);}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:3px;border:1px solid;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  cursor:pointer;transition:opacity .15s,background .15s;
  text-transform:uppercase;letter-spacing:.04em;
}
.btn:hover{opacity:.85;}
.btn:active{opacity:.6;}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
.btn-full{grid-column:1/-1;}
.btn-warn  {background:#332200;border-color:var(--warn);color:var(--warn);}
.btn-kick  {background:#2a1a1a;border-color:#e07050;color:#e07050;}
.btn-ban   {background:var(--red-dim);border-color:var(--red);color:var(--red);}
.btn-green {background:var(--green-dim);border-color:var(--green);color:var(--green);}
.btn-blue  {background:var(--blue-dim);border-color:var(--blue);color:var(--blue);}
.btn-olive {background:#1c2212;border-color:var(--olive);color:var(--olive);}
.admin-input{
  width:100%;background:#0a0e08;border:1px solid var(--panel-edge);
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:6px 8px;border-radius:3px;margin-top:4px;
}
.admin-input:focus{outline:none;border-color:var(--olive);}
.admin-input::placeholder{color:var(--text-dim);}
#adminTarget{
  background:#0d120b;border:1px solid var(--panel-edge);border-radius:3px;
  padding:8px 10px;font-size:11px;color:var(--text-dim);margin-bottom:10px;
}
#adminTarget .target-name{color:var(--amber);font-weight:700;font-family:'Oswald',sans-serif;font-size:13px;}
#adminTarget .target-steam{font-size:10px;color:var(--olive-dim);}
#searchPanel{padding:6px 0 2px;}
#searchInput{width:100%;background:#0a0e08;border:1px solid var(--panel-edge);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;padding:5px 8px;border-radius:3px;box-sizing:border-box;}
#searchInput:focus{outline:none;border-color:var(--olive);}
#searchInput::placeholder{color:var(--text-dim);}
#searchDropdown{max-height:180px;overflow-y:auto;margin-top:4px;border:1px solid var(--panel-edge);border-radius:3px;background:#0d120b;}
#searchDropdown:empty{display:none;}
.search-item{padding:5px 8px;cursor:pointer;font-size:11px;border-bottom:1px solid #1a1f18;display:flex;align-items:center;gap:6px;}
.search-item:last-child{border-bottom:none;}
.search-item:hover{background:#1a2518;}
.search-item .si-name{flex:1;color:var(--text);}
.search-item .si-tag{font-size:9px;padding:1px 4px;border-radius:2px;font-weight:700;}
.si-tag.blue{background:var(--blue-dim);color:var(--blue);}
.si-tag.red{background:var(--red-dim);color:var(--red);}
.search-item .si-dead{color:var(--text-dim);font-size:9px;}
#adminToast{
  background:#1a2518;border:1px solid var(--olive);
  color:var(--olive);padding:8px 14px;border-radius:3px;
  font-size:11px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;
}
#adminToast.show{opacity:1;}
#cmdLog{font-size:10px;color:var(--text-dim);max-height:100px;overflow-y:auto;margin-top:6px;}
#cmdLog .log-entry{padding:2px 0;border-bottom:1px solid #1a1f18;}
#cmdLog .log-ok{color:var(--green);}
#cmdLog .log-err{color:var(--red);}
#cmdLog .log-pending{color:var(--warn);}
.leaflet-marker-icon{background:none;border:none;}
#filterPanel{
  position:absolute;top:10px;left:10px;z-index:800;
  display:flex;flex-direction:row;gap:6px;align-items:center;
  pointer-events:auto;
}
.filter-group{
  display:flex;gap:4px;
  background:rgba(11,15,12,.82);
  border:1px solid var(--panel-edge);
  border-radius:4px;padding:4px;
  backdrop-filter:blur(4px);
}
.ftoggle{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:3px;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;user-select:none;
  border:1px solid transparent;transition:all .15s;
  color:var(--text-dim);background:transparent;
}
.ftoggle:hover{color:var(--text);background:#ffffff0d;}
.ftoggle.active{border-color:currentColor;}
.ftoggle.t1.active  {color:var(--blue);background:#4fa6e812;}
.ftoggle.t2.active  {color:var(--red);background:#e0584f12;}
.ftoggle.veh.active {color:var(--amber);background:#d9a44112;}
.ftoggle.dead.active{color:var(--text-dim);background:#ffffff0d;}
.ftoggle.empty.active{color:var(--text-dim);background:#ffffff0d;border-color:var(--text-dim);}
.filter-sep{width:1px;background:var(--panel-edge);margin:2px 2px;}
.obj-label{background:transparent!important;border:none!important;box-shadow:none!important;color:#fff;font-size:10px;font-weight:700;text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap;pointer-events:none;}
.map-ctrl-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:3px;border:1px solid var(--panel-edge);
  color:var(--text-dim);font-size:15px;cursor:pointer;user-select:none;
  transition:background .12s,color .12s;background:transparent;
  font-family:'JetBrains Mono',monospace;font-weight:700;line-height:1;
}
.map-ctrl-btn:hover{background:#ffffff0d;color:var(--olive);}
.map-ctrl-btn:active{opacity:.6;}
.leaflet-tooltip.squad-tip{
  background:rgba(11,15,12,.92);border:1px solid var(--panel-edge);
  color:var(--text);border-radius:3px;padding:5px 8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.6;
  box-shadow:0 2px 8px #0008;white-space:nowrap;pointer-events:none;
}
.leaflet-tooltip.squad-tip::before{border-top-color:var(--panel-edge);}
.leaflet-popup.squad-veh-float .leaflet-popup-content-wrapper{
  background:rgba(11,15,12,.94);border:1px solid var(--panel-edge);
  color:var(--text);border-radius:4px;box-shadow:0 2px 10px #000a;
}
.leaflet-popup.squad-veh-float .leaflet-popup-content{margin:8px 10px;font-family:'JetBrains Mono',monospace;}
.leaflet-popup.squad-veh-float .leaflet-popup-tip{background:rgba(11,15,12,.94);border:1px solid var(--panel-edge);}
.veh-float-title{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;}
.veh-float-team{color:var(--text-dim);font-size:10px;}
.veh-float-hp{font-size:11px;margin:4px 0;color:var(--amber);}
.veh-float-occ{font-size:10px;display:flex;justify-content:space-between;gap:8px;padding:1px 0;white-space:nowrap;}
.veh-float-seat{color:var(--text-dim);}
.veh-float-empty{font-size:10px;color:var(--text-dim);}
.tip-name{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;color:var(--text);}
.tip-t1{color:var(--blue);}.tip-t2{color:var(--red);}
.tip-role{color:var(--olive);font-size:10px;}
.tip-squad{color:var(--text-dim);}
#sideContent::-webkit-scrollbar{width:4px;}
#sideContent::-webkit-scrollbar-track{background:var(--panel);}
#sideContent::-webkit-scrollbar-thumb{background:var(--olive-dim);border-radius:2px;}

/* FASE 3.3: Tooltip Mejorado */
.tip-container{
  display:flex;flex-direction:column;gap:4px;padding:2px 0;
}
.tip-name{
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;
  color:var(--text);letter-spacing:.02em;
}
.tip-name span{font-size:11px;padding:0 3px;}
.tip-role{
  color:var(--olive);font-size:11px;font-weight:500;letter-spacing:.03em;
}
.tip-squad-info{
  display:flex;align-items:center;gap:4px;font-size:10px;
  color:var(--text-dim);margin:2px 0;
}
.squad-num{
  background:var(--olive-dim);color:var(--olive);
  padding:1px 4px;border-radius:2px;font-weight:700;
}
.tip-leader{
  font-size:10px;color:var(--amber);font-weight:600;letter-spacing:.02em;
}
.tip-vehicle{
  font-size:10px;color:var(--amber);margin-top:2px;
  padding:2px 0;border-top:1px solid #ffffff0d;
}
.tip-weapon{
  font-size:10px;color:var(--text-dim);margin-top:2px;
}
.tip-health{
  font-size:10px;color:var(--text-dim);
}

/* FASE 3.3: Squad Header Interactivo */
.panel-title{
  margin-top:16px;padding:10px 8px;border-radius:3px;font-weight:700;border-left:3px solid;
}
.panel-title[style*="blue"]{background:rgba(79,166,232,.08);}
.panel-title[style*="red"]{background:rgba(224,88,79,.08);}

.squad-header{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.05em;
  color:var(--text);margin:12px 0 4px;display:flex;align-items:center;gap:6px;
  user-select:none;padding:6px 6px;border-radius:2px;transition:opacity .15s;
  background:rgba(255,255,255,.04);border-left:2px solid var(--olive-dim);
}
.squad-header:hover{opacity:.85;color:var(--amber);}
.squad-chevron{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;font-size:10px;flex-shrink:0;
}
.squad-name{
  flex:1;font-weight:600;
}
.squad-count{
  font-size:10px;color:var(--text);background:var(--olive-dim);
  padding:2px 6px;border-radius:2px;font-weight:700;
}
.squad-center-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;font-size:11px;background:transparent;
  border-radius:2px;margin-left:4px;cursor:pointer;
  transition:background .15s,color .15s;flex-shrink:0;
  color:var(--text-dim);
}
.squad-center-btn:hover{
  background:var(--blue-dim);color:var(--blue);
}
.squad-collapsed{display:none;}

/* Animación suave de zoom en mapa */
.leaflet-zoom-anim{
  transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Chat Panel Scrollbar */
#chatPanelMessages::-webkit-scrollbar{
  width:6px;
}
#chatPanelMessages::-webkit-scrollbar-track{
  background:rgba(11,15,12,.5);
  border-radius:3px;
}
#chatPanelMessages::-webkit-scrollbar-thumb{
  background:var(--olive-dim);
  border-radius:3px;
  border:1px solid var(--olive);
}
#chatPanelMessages::-webkit-scrollbar-thumb:hover{
  background:var(--olive);
}

/* Search Dropdown Scrollbar */
#searchDropdownOverlay::-webkit-scrollbar{
  width:6px;
}
#searchDropdownOverlay::-webkit-scrollbar-track{
  background:rgba(11,15,12,.5);
  border-radius:3px;
}
#searchDropdownOverlay::-webkit-scrollbar-thumb{
  background:var(--olive-dim);
  border-radius:3px;
  border:1px solid var(--olive);
}
#searchDropdownOverlay::-webkit-scrollbar-thumb:hover{
  background:var(--olive);
}
@keyframes fadeOutDeath{0%{opacity:1;}100%{opacity:0;}}
@keyframes fadeInSpawn{0%{opacity:0;}100%{opacity:1;}}

/* Scrollbar de los paneles de lista (killfeed/maincamping/vehículos) --
   mismo estilo celeste en los tres, antes solo estaba en killfeed. */
#killfeedPanelList::-webkit-scrollbar,
#maincampPanelList::-webkit-scrollbar,
#vehicleUsagePanelList::-webkit-scrollbar,
#claimPanelList::-webkit-scrollbar{
  width:6px;
}
#killfeedPanelList::-webkit-scrollbar-track,
#maincampPanelList::-webkit-scrollbar-track,
#vehicleUsagePanelList::-webkit-scrollbar-track,
#claimPanelList::-webkit-scrollbar-track{
  background:rgba(11,15,12,.5);
  border-radius:3px;
}
#killfeedPanelList::-webkit-scrollbar-thumb,
#maincampPanelList::-webkit-scrollbar-thumb,
#vehicleUsagePanelList::-webkit-scrollbar-thumb,
#claimPanelList::-webkit-scrollbar-thumb{
  background:var(--olive-dim);
  border-radius:3px;
  border:1px solid var(--olive);
}
#killfeedPanelList::-webkit-scrollbar-thumb:hover,
#maincampPanelList::-webkit-scrollbar-thumb:hover,
#vehicleUsagePanelList::-webkit-scrollbar-thumb:hover,
#claimPanelList::-webkit-scrollbar-thumb:hover{
  background:var(--olive);
}

/* ─── Sistema de botones (inspirado en shadcn/next) ─────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 12px;border:none;border-radius:var(--radius);
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--olive) 0%,var(--olive-dim) 100%);color:#0a0e08;}
.btn-primary:hover{opacity:.9;}
.btn-outline{background:transparent;border:1px solid var(--panel-edge);color:var(--text);}
.btn-outline:hover{border-color:var(--olive-dim);color:var(--olive);}
.btn-destructive{background:linear-gradient(135deg,var(--crimson) 0%,var(--crimson-dim) 100%);color:#fff;}
.btn-destructive:hover{opacity:.9;}
.btn-ghost{background:transparent;color:var(--text-dim);}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.04);}

/* ─── Efectos (inspirados en latamcompany-next), solo en chrome/UI ──── */
.fx-spotlight{position:relative;overflow:hidden;}
.fx-spotlight::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(56,182,224,.18), transparent 70%);
}
.fx-spotlight:hover::before{opacity:1;}

.fx-aura{position:relative;overflow:hidden;}
.fx-aura::before{
  content:'';position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,182,224,.12), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(239,43,70,.08), transparent 40%);
  filter:blur(80px);
  animation:fxAuraShift 22s ease-in-out infinite alternate;
}
@keyframes fxAuraShift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(4%,-3%) scale(1.08);}
}
/* Contenido de un contenedor .fx-aura debe ir en un hijo con z-index:1
   para quedar arriba del pseudo-elemento de blobs. Regla genérica para no
   tener que tocar cada hijo existente a mano en cada página. */
.fx-aura > *{position:relative;z-index:1;}

/* Inputs de filtros de los modales de historial (combate y uso de vehículos):
   mismo acento celeste en foco que .admin-input del panel lateral derecho,
   en vez de quedar sin ningún estado de foco (--panel-edge fijo siempre). */
#historyMatchSelect:focus, #historyDateFrom:focus, #historyDateTo:focus,
#historyPlayerSearch:focus, #historyKillType:focus,
#vuHistoryMatchSelect:focus, #vuHistoryDateFrom:focus, #vuHistoryDateTo:focus,
#vuHistoryPlayerSearch:focus {
  outline: none;
  border-color: var(--olive) !important;
}
/* Ícono del selector de fecha nativo: por defecto se renderiza oscuro sobre
   fondo oscuro (casi invisible) -- se invierte para que se vea claro, y se
   tiñe apenas celeste en hover para que quede en línea con el resto de la UI. */
#historyDateFrom::-webkit-calendar-picker-indicator,
#historyDateTo::-webkit-calendar-picker-indicator,
#vuHistoryDateFrom::-webkit-calendar-picker-indicator,
#vuHistoryDateTo::-webkit-calendar-picker-indicator {
  filter: invert(0.6) sepia(1) saturate(3) hue-rotate(150deg);
  cursor: pointer;
}