/* ═══════════════════════════════════════════
   LSPD PORTAL v6 · CSS
═══════════════════════════════════════════ */
:root{--cubic:cubic-bezier(.25,.46,.45,.94);--bg-main:#04091a;--bg-input:rgba(0,0,0,0.35);--border:rgba(255,255,255,0.1);--border-h:rgba(255,255,255,0.22);--blue:#3a7fff;--blue-soft:rgba(58,127,255,0.18);--gold:#ffc107;--red:#e53935;--green:#2dca73;--orange:#ff8c00;--muted:rgba(255,255,255,0.45);--purple:#9b59b6;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Quitar outline/ring del navegador en todos los elementos interactivos */
*:focus{outline:none}
button:focus,button:focus-visible,
[role="button"]:focus,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:none;
}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:'Quicksand',sans-serif;background:var(--bg-main);color:#fff;font-size:1.4vh}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* ════ LOGIN ════ */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 25% 15%,rgba(10,40,130,.7),transparent 60%),radial-gradient(ellipse 60% 80% at 80% 85%,rgba(5,15,70,.8),transparent 55%),linear-gradient(135deg,#020a1c,#040e28 50%,#020810)}
.login-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(255,255,255,.015) 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(255,255,255,.015) 60px)}
.login-box{position:relative;background:rgba(255,255,255,.06);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:14px;padding:5vh 5vw;width:min(440px,90vw);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:fadeInUp .5s var(--cubic) forwards}
.login-guild-icon{width:11vh;height:11vh;border-radius:50%;border:2px solid rgba(58,127,255,.5);object-fit:cover;margin:0 auto 2vh;display:none}
.login-shield{width:10vh;height:10vh;margin:0 auto 2vh}.login-shield svg{width:100%;height:100%}
.login-eyebrow{font-size:.9vh;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--muted);margin-bottom:.8vh}
.login-title{font-family:'Bebas Neue',cursive;font-size:4vh;line-height:1.05;letter-spacing:3px;margin-bottom:.8vh}
.login-sub{font-size:1.1vh;color:var(--muted);margin-bottom:3vh}
.login-divider{display:flex;align-items:center;gap:1vh;margin-bottom:2.5vh}.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}.login-divider span{font-size:.9vh;letter-spacing:3px;color:rgba(255,255,255,.2);text-transform:uppercase}
.discord-btn{display:flex;align-items:center;justify-content:center;gap:1.2vh;width:100%;background:#5865F2;border:none;border-radius:6px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.4vh;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:1.4vh;cursor:pointer;transition:background .2s}.discord-btn:hover{background:#4752c4}.discord-btn:active{transform:scale(.98)}
.login-footer{margin-top:2vh;font-size:.9vh;color:rgba(255,255,255,.2)}

/* ════ APP SHELL ════ */
.police{width:100%;height:100vh;position:relative;overflow:hidden}
.app-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 20% 0%,rgba(10,40,120,.45),transparent 60%),radial-gradient(ellipse 50% 70% at 85% 90%,rgba(5,20,80,.35),transparent 60%),linear-gradient(160deg,#040e20,#061425 50%,#030b1a)}
.police .logo{position:fixed;bottom:9vh;right:9vh;width:48vh;opacity:0;animation:logo-police 1s var(--cubic) forwards;animation-delay:.1s;z-index:0;pointer-events:none}
@keyframes logo-police{100%{opacity:.03;transform:perspective(400px) rotateY(-25deg) rotateX(29deg)}}

/* ════ TABS BAR ════ */
.tabs-bar{position:fixed;top:1vh;left:1vh;right:1vh;z-index:100;display:flex;align-items:center;gap:.6vh}
.tabs-logo{margin-right:.8vh;flex-shrink:0;cursor:pointer;opacity:.8}.tabs-logo:hover{opacity:1}
.tabs-list{display:flex;align-items:center;flex:1;overflow-x:auto;overflow-y:hidden;gap:.5vh}.tabs-list::-webkit-scrollbar{height:0}
.tab{display:flex;align-items:center;border-radius:5px;backdrop-filter:blur(12px);font-size:1.5vh;font-family:Quicksand;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);letter-spacing:1.5px;margin-right:.5vh;opacity:.55;transition:opacity .2s,border-color .2s,background .2s;user-select:none;cursor:pointer;text-transform:uppercase;padding:.5vh 0;white-space:nowrap;flex-shrink:0}
.tab:hover{opacity:.85}.tab.active{opacity:1;background:rgba(58,127,255,.18);border-color:rgba(58,127,255,.4)}
.tab-name{padding:0 .5vh 0 1vh}.tab-close{display:flex;align-items:center;margin-right:.5vh}
.tab-close i{background:rgba(255,255,255,.45);border-radius:4px;color:rgba(0,0,0,.65);padding:.25vh .4vh;font-size:.9vh;transition:background .2s}.tab-close i:hover{background:rgba(255,255,255,.75)}
.tab.new-tab{animation:tabIn .35s var(--cubic) forwards;opacity:.7;transform:scale(.85)}@keyframes tabIn{to{opacity:1;transform:scale(1)}}
.tab.add{opacity:1!important;padding:.5vh 1.2vh;font-size:2vh;font-weight:300;background:rgba(255,255,255,.06)}.tab.add:hover{background:rgba(58,127,255,.18)}
.user-chip{display:flex;align-items:center;gap:.8vh;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:5px;padding:.5vh 1vh;backdrop-filter:blur(12px);margin-left:auto;flex-shrink:0}
.user-chip-avatar{width:3vh;height:3vh;border-radius:50%;border:1.5px solid rgba(58,127,255,.5);object-fit:cover;background:rgba(58,127,255,.2)}
.user-chip-name{font-size:1.2vh;font-weight:700;line-height:1.2}.user-chip-rank{font-size:.9vh;color:var(--gold)}
.logout-chip{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.3vh;transition:color .2s;padding:.2vh}.logout-chip:hover{color:var(--red)}

/* ════ TAB CONTENT ════ */
.tab-content-menu{position:fixed;inset:0;top:6vh;overflow:hidden;z-index:1}
.tab-content-menu .tab{display:none;position:absolute;inset:0;padding:1.5vh 2vh;overflow-y:auto}
.tab-content-menu .tab.show{display:block}
.scale-in{animation:scaleIn .35s var(--cubic) forwards}@keyframes scaleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.back-btn{display:inline-flex;align-items:center;gap:.7vh;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:5px;padding:.6vh 1.2vh;color:var(--muted);font-family:'Bebas Neue',cursive;font-size:1.3vh;letter-spacing:2px;cursor:pointer;transition:all .2s;margin-bottom:1.5vh}.back-btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--border-h)}

/* ════ DASHBOARD ════ */
.right-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vh;margin-top:1.5vh;margin-bottom:2vh}
.secondary-box{height:16vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;padding:1.5vh;cursor:pointer;user-select:none;transition:background .25s,border-color .25s;gap:.8vh}
.secondary-box i{font-size:4vh;color:rgba(255,255,255,.65);transition:color .2s}
.secondary-box .box-label{font-size:1.8vh;letter-spacing:1.5px;color:rgba(255,255,255,.8)}
.secondary-box .box-stat{font-size:1vh;font-family:'Quicksand',sans-serif;color:var(--muted)}
.secondary-box:hover{background:var(--blue-soft);border-color:rgba(58,127,255,.4)}.secondary-box:hover i{color:#fff}.secondary-box:active{transform:scale(.97)}

/* ════ UTILS ════ */
.bg-box{background:rgba(255,255,255,.05);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.title-2{font-family:'Bebas Neue',cursive;font-size:1.8vh;letter-spacing:2px;color:rgba(255,255,255,.6);margin-bottom:.8vh}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5vh}
.app-title{font-family:'Bebas Neue',cursive;font-size:4vh;letter-spacing:3px;line-height:1}
.btn-action{display:inline-flex;align-items:center;gap:.6vh;padding:.7vh 1.3vh;border:none;border-radius:5px;cursor:pointer;font-family:'Bebas Neue',cursive;font-size:1.4vh;letter-spacing:1.5px;transition:background .2s;white-space:nowrap}
.btn-primary{background:rgba(58,127,255,.28);color:#fff;border:1px solid rgba(58,127,255,.5)}.btn-primary:hover{background:rgba(58,127,255,.45)}
.btn-danger{background:rgba(229,57,53,.28);color:#fff;border:1px solid rgba(229,57,53,.5)}.btn-danger:hover{background:rgba(229,57,53,.45)}
.btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border:1px solid var(--border)}.btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-success{background:rgba(45,202,115,.25);color:#fff;border:1px solid rgba(45,202,115,.45)}.btn-success:hover{background:rgba(45,202,115,.4)}
.btn-warn{background:rgba(255,140,0,.25);color:#fff;border:1px solid rgba(255,140,0,.45)}.btn-warn:hover{background:rgba(255,140,0,.4)}
.search-bar{display:flex;align-items:center;gap:.5vh;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;padding:.6vh 1vh;min-width:20vh}
.search-bar i{color:var(--muted);font-size:1.2vh;flex-shrink:0}.search-bar input{background:none;border:none;outline:none;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.2vh;flex:1;min-width:0}.search-bar input::placeholder{color:var(--muted)}
.mini-tabs{display:flex;gap:.5vh;margin-bottom:1.2vh}
.mini-tab{padding:.5vh 1.2vh;border-radius:4px;font-family:'Bebas Neue',cursive;font-size:1.3vh;letter-spacing:1.5px;background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;transition:all .2s;color:var(--muted)}.mini-tab:hover{color:#fff;border-color:var(--border-h)}.mini-tab.active{background:var(--blue-soft);border-color:rgba(58,127,255,.45);color:#fff}
.pill{display:inline-block;padding:.2vh .7vh;font-size:.9vh;font-weight:700;letter-spacing:1px;border-radius:3px;border:1px solid;white-space:nowrap}
.pill-on{color:var(--green);border-color:rgba(45,202,115,.35);background:rgba(45,202,115,.08)}.pill-off{color:var(--red);border-color:rgba(229,57,53,.35);background:rgba(229,57,53,.08)}.pill-warn{color:#ff8c00;border-color:rgba(255,140,0,.4);background:rgba(255,140,0,.1)}.pill-red{color:var(--red);border-color:rgba(229,57,53,.35);background:rgba(229,57,53,.08)}.pill-gold{color:var(--gold);border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.08)}
.divider{height:1px;background:var(--border);margin:.8vh 0}
.flex{display:flex}.flex-1{flex:1}.gap-1{gap:.8vh}.gap-2{gap:1.5vh}.items-center{align-items:center}.justify-between{justify-content:space-between}.wrap-row{flex-wrap:wrap}
.mb-1{margin-bottom:1vh}.mb-2{margin-bottom:2vh}.p-1{padding:1vh}
.text-muted{color:var(--muted)!important}.text-gold{color:var(--gold)!important}.text-blue{color:var(--blue)!important}.text-red{color:var(--red)!important}.text-green{color:var(--green)!important}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40vh;gap:1.2vh;text-align:center;opacity:.5}.empty-state i{font-size:6vh}.empty-state p{font-size:1.4vh}

/* ════ AGENT LIST ════ */
.agent-list{display:flex;flex-direction:column;gap:.3vh;overflow-y:auto}
.agent-item{display:flex;align-items:center;gap:1vh;padding:.8vh 1vh;border-radius:5px;background:rgba(0,0,0,.2);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.agent-item:hover{background:rgba(58,127,255,.1);border-color:rgba(58,127,255,.3)}.agent-item.selected{background:rgba(58,127,255,.15);border-color:rgba(58,127,255,.4)}
.agent-avatar{width:3.5vh;height:3.5vh;border-radius:50%;border:1.5px solid var(--border);object-fit:cover;background:rgba(58,127,255,.2);flex-shrink:0}
.agent-avatar-ph{width:3.5vh;height:3.5vh;border-radius:50%;background:rgba(58,127,255,.2);border:1.5px solid rgba(58,127,255,.35);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:1.3vh;color:#fff;flex-shrink:0}
.agent-name{font-weight:700;font-size:1.25vh;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.agent-discord-name{font-size:1vh;color:var(--muted)}
.rank-tag{display:inline-flex;align-items:center;gap:.4vh;font-size:1vh;font-weight:700;letter-spacing:.8px;padding:.2vh .7vh;border-radius:3px;white-space:nowrap;flex-shrink:0}.rank-icon{width:1.3vh;height:1.3vh;object-fit:contain;flex-shrink:0}

/* ════ AGENT PROFILE ════ */
.citizen-scroll{overflow-y:auto}
.agent-profile-header{display:flex;align-items:center;gap:2vh;padding:1.5vh;background:rgba(0,0,0,.25);border-radius:8px;margin-bottom:1.2vh}
.agent-profile-avatar{width:9vh;height:9vh;border-radius:50%;border:2px solid rgba(58,127,255,.45);object-fit:cover;flex-shrink:0}
.agent-profile-avatar-ph{width:9vh;height:9vh;border-radius:50%;background:rgba(58,127,255,.2);border:2px solid rgba(58,127,255,.35);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:3.5vh;color:#fff;flex-shrink:0}
.agent-profile-name{font-family:'Bebas Neue',cursive;font-size:3vh;letter-spacing:2px;line-height:1}.agent-profile-username{font-size:1.1vh;color:var(--muted);margin-top:.3vh}
.info-boxes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vh;margin-bottom:1.2vh}
.info-box{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:7px;padding:1vh}
.info-box-title{font-size:.85vh;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:.4vh}
.info-box-value{font-family:'Bebas Neue',cursive;font-size:1.7vh;letter-spacing:1px;word-break:break-all}
.notes-list{display:flex;flex-direction:column;gap:.5vh;max-height:16vh;overflow-y:auto;margin-bottom:.8vh}
.note-item{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:6px;padding:.8vh 1vh;display:flex;gap:.8vh}
.note-body{flex:1;font-size:1.1vh;line-height:1.5}.note-meta{font-size:.9vh;color:var(--muted);margin-top:.3vh}
.note-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1vh;padding:.2vh;flex-shrink:0}.note-del:hover{color:var(--red)}
.note-input-wrap{display:flex;gap:.6vh}
.note-input-wrap textarea{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.2vh;padding:.7vh 1vh;outline:none;resize:none;min-height:5vh;transition:border-color .2s}.note-input-wrap textarea:focus{border-color:rgba(58,127,255,.5)}.note-input-wrap textarea::placeholder{color:var(--muted)}

/* ════ RANGOS ════ */
.rangos-list{display:flex;flex-direction:column;gap:.8vh}
.rango-card{display:flex;align-items:center;gap:1.5vh;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:1.2vh 1.8vh;transition:border-color .2s}.rango-card:hover{border-color:rgba(58,127,255,.35)}.rango-card.hidden{opacity:.4;border-style:dashed}
.rango-icon-wrap{width:4.5vh;height:4.5vh;flex-shrink:0;display:flex;align-items:center;justify-content:center}.rango-icon-wrap img{width:100%;height:100%;object-fit:contain}.rango-icon-wrap i{font-size:2.5vh;color:rgba(255,255,255,.55)}
.rango-info{flex:1}.rango-name{font-family:'Bebas Neue',cursive;font-size:2.2vh;letter-spacing:1.5px}
.rango-sub{font-size:.9vh;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
.rango-discord-id{font-size:.9vh;color:rgba(58,127,255,.6);font-family:'Roboto Mono',monospace;margin-top:.2vh}
.rango-count{font-family:'Bebas Neue',cursive;font-size:3.2vh;color:var(--gold);min-width:5.5vh;text-align:center}
.rango-count-lbl{font-size:.8vh;color:var(--muted);letter-spacing:2px;text-align:center}
.hide-role-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-size:1vh;padding:.3vh .7vh;transition:all .2s}.hide-role-btn:hover{border-color:rgba(229,57,53,.5);color:var(--red)}.hide-role-btn.hidden-active{border-color:rgba(255,140,0,.5);color:var(--orange);background:rgba(255,140,0,.1)}

/* ════ DIVISIONES ════ */
.divisiones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vh}
.division-card{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}.division-card:hover{border-color:rgba(58,127,255,.4)}
.division-card-img{width:100%;height:12vh;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.division-card-img img{width:100%;height:12vh;object-fit:cover}.division-card-img i{font-size:5vh;color:rgba(255,255,255,.25)}
.division-card-body{padding:1.2vh 1.4vh}
.div-name{font-family:'Bebas Neue',cursive;font-size:2vh;letter-spacing:1.5px;margin-bottom:.5vh}
.div-meta{display:flex;gap:1.5vh;margin-bottom:.8vh}.div-meta-item{font-size:1vh;color:var(--muted)}.div-meta-item strong{display:block;font-family:'Bebas Neue',cursive;font-size:1.8vh;color:#fff}
.div-chief{padding-top:.8vh;border-top:1px solid var(--border);font-size:1vh;color:var(--muted)}.div-chief strong{color:var(--gold)}
.div-actions{display:flex;gap:.5vh;margin-top:.8vh}
/* Subdivisiones in divisions */
.subdiv-list{margin-top:.8vh;display:flex;flex-direction:column;gap:.3vh}
.subdiv-item{display:flex;align-items:center;gap:.8vh;background:rgba(0,0,0,.25);border-radius:5px;padding:.5vh .8vh;font-size:1.1vh;border:1px solid var(--border)}
.subdiv-name{flex:1}.subdiv-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9vh}.subdiv-del:hover{color:var(--red)}

/* ════ ORGANIGRAMA ════ */
#organigramaWrap{overflow-x:auto}
.org-table-wrap{min-width:900px}
.org-header-bar{background:#0d1933;color:#fff;text-align:center;padding:1.2vh 2vh;font-family:'Bebas Neue',cursive;font-size:2vh;letter-spacing:3px;border-radius:6px 6px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:none}
.org-table{width:100%;border-collapse:collapse;font-size:1.2vh;background:#06101e}
.org-table th{background:#0d1933;color:rgba(255,255,255,.7);padding:.8vh 1.2vh;text-align:left;font-weight:600;letter-spacing:1px;border:1px solid rgba(255,255,255,.1);font-family:'Bebas Neue',cursive;font-size:1.4vh}
.org-table td{padding:.8vh 1.2vh;border:1px solid rgba(255,255,255,.07);vertical-align:middle;color:rgba(255,255,255,.85)}
.org-table tr:hover td{background:rgba(58,127,255,.06)}
.org-row-clickable{cursor:pointer}.org-row-clickable:hover td{background:rgba(58,127,255,.12)!important}
.org-expand-btn{background:none;border:none;color:var(--blue);cursor:pointer;font-size:1vh;padding:0 .5vh;transition:transform .2s}
.org-available{color:#4caf50;font-weight:700}
.org-subdiv-row td{background:rgba(58,127,255,.04);padding-left:3vh!important;font-size:1.1vh;color:rgba(255,255,255,.7)}

/* ════ SANCIONES ════ */
.sancion-stats{display:flex;gap:1vh;margin-bottom:1.5vh}
.san-stat{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:7px;padding:1vh 1.2vh}
.san-stat-val{font-family:'Bebas Neue',cursive;font-size:2.8vh}.san-stat-lbl{font-size:.85vh;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:.2vh}
.san-list{display:flex;flex-direction:column;gap:.3vh}
.san-item{display:flex;align-items:flex-start;gap:1.2vh;background:rgba(0,0,0,.2);border:1px solid transparent;border-radius:7px;padding:.9vh 1.2vh;transition:all .15s;cursor:pointer}.san-item:hover{background:rgba(229,57,53,.05);border-color:rgba(229,57,53,.2)}.san-item.s-open{border-color:rgba(58,127,255,.3);background:rgba(58,127,255,.06);border-bottom-left-radius:0;border-bottom-right-radius:0}
.san-expand{display:none;padding:.8vh 1.2vh;border:1px solid rgba(58,127,255,.2);border-top:none;background:rgba(4,9,26,.7);border-radius:0 0 7px 7px;margin-bottom:.3vh}.san-expand.open{display:block}
.san-expand-row{display:flex;gap:2vh;flex-wrap:wrap;font-size:1.1vh;margin-bottom:.5vh}
.san-expand-key{color:var(--muted);font-size:.9vh;text-transform:uppercase;letter-spacing:2px;margin-bottom:.2vh}.san-expand-val{color:#fff;font-weight:600}
.san-expand-reason{background:rgba(0,0,0,.3);border-radius:5px;padding:.8vh 1vh;font-size:1.15vh;line-height:1.6;color:rgba(255,255,255,.85);border-left:2px solid var(--red);margin-top:.5vh}
.san-expediente{font-family:'Roboto Mono',monospace;font-size:.95vh;color:var(--gold);min-width:11vh}
.san-agente{flex:1;font-weight:700;font-size:1.15vh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:10vh}
.san-motivo{font-size:1.05vh;color:var(--muted);flex:2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
.san-fecha{font-family:'Roboto Mono',monospace;font-size:.95vh;color:var(--muted)}
.san-chev{font-size:.9vh;color:var(--muted);transition:transform .2s;flex-shrink:0}
/* Type pills for sanctions */
.san-type{font-family:'Bebas Neue',cursive;font-size:1vh;letter-spacing:1px;padding:.2vh .7vh;border-radius:3px;white-space:nowrap;flex-shrink:0}
.san-type-LEVE{background:rgba(45,202,115,.15);color:#2dca73;border:1px solid rgba(45,202,115,.4)}
.san-type-MEDIA{background:rgba(229,57,53,.15);color:#e53935;border:1px solid rgba(229,57,53,.4)}
.san-type-GRAVE{background:rgba(138,43,226,.18);color:#9b59b6;border:1px solid rgba(138,43,226,.45)}
.san-type-NEGRO{background:rgba(20,20,20,.6);color:#aaa;border:1px solid rgba(150,150,150,.3)}
/* Compatibilidad con datos legacy */
.san-type-AVISO{background:rgba(45,202,115,.1);color:#2dca73;border:1px solid rgba(45,202,115,.3)}
.san-type-MODERADA{background:rgba(229,57,53,.1);color:#e53935;border:1px solid rgba(229,57,53,.3)}
.san-type-EXPULSION{background:rgba(20,20,20,.5);color:#aaa;border:1px solid rgba(150,150,150,.25)}

/* ════ PREDEFINED SANCTIONS TABLE (like code penal) ════ */
.predef-table-wrap{overflow-x:auto}
.predef-table{width:100%;border-collapse:collapse;font-size:1.2vh}
.predef-table th{background:#0a1628;color:rgba(255,255,255,.6);padding:.8vh 1.2vh;text-align:left;font-family:'Bebas Neue',cursive;font-size:1.3vh;letter-spacing:1.5px;border-bottom:2px solid rgba(58,127,255,.3);border-right:1px solid rgba(255,255,255,.05)}
.predef-table td{padding:.7vh 1.2vh;border-bottom:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.03);vertical-align:middle}
.predef-table tr:hover td{background:rgba(58,127,255,.05)}
.predef-cat-row td{background:#060f20;color:rgba(255,255,255,.55);font-family:'Bebas Neue',cursive;font-size:1.3vh;letter-spacing:2px;padding:.6vh 1.2vh}
.predef-dur-cell{font-family:'Roboto Mono',monospace;font-size:1.1vh;color:var(--muted);cursor:pointer;min-width:14vh}
.predef-dur-cell:hover{color:#fff}.predef-dur-cell input{background:transparent;border:none;border-bottom:1px solid var(--blue);color:#fff;font-family:'Roboto Mono',monospace;font-size:1.1vh;outline:none;width:100%}
.predef-add-row{background:rgba(58,127,255,.03)}

/* ════ INFORMES (side-panel style like original) ════ */
.informes-layout{display:grid;grid-template-columns:32vh 1fr;gap:1.5vh;height:calc(100vh - 15vh)}
.informes-left{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.inf-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.inf-tab{flex:1;padding:.8vh;text-align:center;font-family:'Bebas Neue',cursive;font-size:1.4vh;letter-spacing:2px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .2s}.inf-tab.active{color:#fff;border-bottom-color:var(--blue)}.inf-tab:hover{color:rgba(255,255,255,.8)}
.inf-search-wrap{padding:.8vh;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.5vh;flex-shrink:0}
.inf-tags-select{background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.1vh;padding:.5vh .8vh;outline:none;width:100%}.inf-tags-select option{background:#0a1930}
.inf-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.3vh;padding:.5vh}
.inf-item{background:rgba(0,0,0,.25);border:1px solid transparent;border-radius:6px;padding:.9vh 1vh;cursor:pointer;transition:all .15s;position:relative}.inf-item:hover{background:rgba(58,127,255,.08);border-color:rgba(58,127,255,.2)}.inf-item.active{background:rgba(58,127,255,.14);border-color:rgba(58,127,255,.4)}
.inf-item-title{font-family:'Bebas Neue',cursive;font-size:1.5vh;letter-spacing:1px;margin-bottom:.3vh;display:flex;align-items:center;gap:.5vh}
.inf-item-id{font-family:'Roboto Mono',monospace;font-size:.9vh;color:var(--blue)}
.inf-item-meta{font-size:.9vh;color:var(--muted);display:flex;justify-content:space-between}
.inf-item-tag{display:inline-block;font-size:.75vh;background:rgba(58,127,255,.15);color:rgba(58,127,255,.9);border-radius:3px;padding:.1vh .5vh;margin-top:.3vh;margin-right:.2vh}
.inf-item-locked{color:var(--orange);font-size:1.1vh;margin-left:auto}
/* Informe right panel */
.informes-right{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.inf-right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5vh;opacity:.4}.inf-right-empty i{font-size:6vh}.inf-right-empty p{font-size:1.4vh}
.inf-detail{display:flex;flex-direction:column;height:100%;overflow:hidden}
.inf-detail-header{display:flex;align-items:center;justify-content:space-between;padding:.8vh 1.2vh;border-bottom:1px solid var(--border);background:rgba(0,0,0,.2);flex-shrink:0}
.inf-detail-title{font-family:'Bebas Neue',cursive;font-size:2vh;letter-spacing:2px}
.inf-detail-body{flex:1;overflow-y:auto;padding:1.2vh}
.inf-section{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px;padding:1.2vh;margin-bottom:1.2vh}
.inf-section-header{font-family:'Bebas Neue',cursive;font-size:1.5vh;letter-spacing:2px;color:rgba(255,255,255,.65);margin-bottom:.8vh;display:flex;align-items:center;justify-content:space-between}.inf-section-header i{margin-right:.5vh;color:var(--blue)}
.inf-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8vh}
.inf-field{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:5px;padding:.8vh 1vh}
.inf-field-label{font-size:.8vh;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:.3vh}
.inf-field-value{font-family:'Bebas Neue',cursive;font-size:1.5vh;letter-spacing:.5px}
.inf-field-input{background:transparent;border:none;outline:none;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.2vh;width:100%;padding:0}.inf-field-input::placeholder{color:var(--muted)}
.inf-textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.2vh;padding:.8vh 1vh;outline:none;resize:none;width:100%;min-height:8vh;transition:border-color .2s;line-height:1.6}.inf-textarea:focus{border-color:rgba(58,127,255,.4)}.inf-textarea::placeholder{color:var(--muted)}
.inf-desc-section{background:rgba(6,16,30,.7);border:1px solid rgba(58,127,255,.15);border-left:2px solid rgba(58,127,255,.5);border-radius:8px;padding:1.2vh;margin-bottom:1.2vh}
.inf-desc-text{font-size:1.2vh;line-height:1.7;color:rgba(255,255,255,.85);white-space:pre-wrap}
.evidencias-grid{display:flex;flex-wrap:wrap;gap:.8vh}
.evidencia-thumb{position:relative;width:10vh;height:7vh;border-radius:5px;overflow:hidden;border:1px solid var(--border);cursor:pointer}.evidencia-thumb img{width:100%;height:100%;object-fit:cover}
.evidencia-del{position:absolute;top:.3vh;right:.3vh;background:var(--red);border:none;color:#fff;border-radius:50%;width:2vh;height:2vh;display:flex;align-items:center;justify-content:center;font-size:.8vh;cursor:pointer}
.evidencia-add{width:10vh;height:7vh;border-radius:5px;border:1.5px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:2.5vh;transition:border-color .2s}.evidencia-add:hover{border-color:rgba(58,127,255,.5);color:var(--blue)}.evidencia-add input{display:none}
.inf-url-row{display:flex;gap:.5vh;margin-top:.5vh}.inf-url-row input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.1vh;padding:.5vh .8vh;outline:none}.inf-url-row input::placeholder{color:var(--muted)}
.agent-chip-list{display:flex;flex-direction:column;gap:.4vh}
.agent-chip{display:flex;align-items:center;gap:.8vh;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:5px;padding:.6vh .8vh;font-size:1.1vh}
.agent-chip img,.agent-chip-ph{width:2.5vh;height:2.5vh;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(58,127,255,.3);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:.9vh}
.agent-chip-name{flex:1}.agent-chip-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9vh;transition:color .2s}.agent-chip-del:hover{color:var(--red)}
.inf-person-chip{display:flex;align-items:center;gap:.8vh;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:5px;padding:.6vh .8vh;font-size:1.1vh;margin-bottom:.4vh}.inf-person-name{flex:1}.inf-person-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9vh}.inf-person-del:hover{color:var(--red)}
.inf-add-tag{display:flex;gap:.5vh;margin-top:.5vh}.inf-add-tag input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.1vh;padding:.5vh .8vh;outline:none}.inf-add-tag input::placeholder{color:var(--muted)}
.inf-tags-wrap{display:flex;flex-wrap:wrap;gap:.4vh}
.inf-tag-chip{display:inline-flex;align-items:center;gap:.4vh;background:rgba(58,127,255,.15);border:1px solid rgba(58,127,255,.3);border-radius:4px;padding:.2vh .7vh;font-size:1vh;color:rgba(58,127,255,.9)}.inf-tag-chip button{background:none;border:none;color:rgba(58,127,255,.7);cursor:pointer;font-size:.8vh;padding:0}.inf-tag-chip button:hover{color:var(--red)}
.inf-bottom-bar{padding:.8vh 1.2vh;border-top:1px solid var(--border);background:rgba(0,0,0,.2);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.inf-locked-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5vh;opacity:.8}.inf-locked-overlay i{font-size:5vh;color:var(--orange)}.inf-locked-overlay p{font-size:1.3vh;color:var(--muted)}

/* ════ SETTINGS TABS ════ */
.settings-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:1.5vh;gap:.3vh}
.settings-tab{padding:.7vh 1.5vh;font-family:'Bebas Neue',cursive;font-size:1.4vh;letter-spacing:2px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .2s;border-radius:5px 5px 0 0}.settings-tab:hover{color:rgba(255,255,255,.8)}.settings-tab.active{color:#fff;border-bottom-color:var(--blue);background:rgba(58,127,255,.08)}
.settings-panel{display:none}.settings-panel.active{display:block}
.settings-section{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:1.5vh;margin-bottom:1.5vh}
.settings-title{font-family:'Bebas Neue',cursive;font-size:1.8vh;letter-spacing:2px;margin-bottom:1vh;color:rgba(255,255,255,.7);border-bottom:1px solid var(--border);padding-bottom:.8vh;display:flex;align-items:center;gap:.6vh}.settings-title i{color:var(--blue)}
.settings-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5vh}
.perm-role-row{display:flex;align-items:center;gap:.8vh;padding:.6vh 0;border-bottom:1px solid rgba(255,255,255,.04)}.perm-role-row:last-child{border-bottom:none}
.perm-role-color{width:1.1vh;height:1.1vh;border-radius:50%;flex-shrink:0}.perm-role-name{flex:1;font-size:1.15vh;font-weight:600}
.perm-check{display:flex;align-items:center;gap:.3vh;font-size:.95vh;color:var(--muted);cursor:pointer;padding:.2vh .5vh;border-radius:3px;border:1px solid rgba(255,255,255,.1);transition:all .15s}.perm-check input{accent-color:var(--blue);cursor:pointer}.perm-check:hover{border-color:rgba(58,127,255,.35);color:#fff}
.env-row{display:flex;justify-content:space-between;align-items:center;padding:.6vh 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:1.1vh}.env-row:last-child{border-bottom:none}
.env-key{color:var(--muted);font-family:'Roboto Mono',monospace}.env-val{font-family:'Roboto Mono',monospace;font-size:1vh}
.env-val.ok{color:var(--green)}.env-val.err{color:var(--red)}

/* ════ LIGHTBOX ════ */
.lightbox-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.lightbox-overlay.open{display:flex}
.lightbox-img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:6px}
.lightbox-close{position:absolute;top:2vh;right:2vh;background:rgba(255,255,255,.1);border:1px solid var(--border);border-radius:50%;color:#fff;width:4vh;height:4vh;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5vh;transition:background .2s}.lightbox-close:hover{background:rgba(229,57,53,.5)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid var(--border);border-radius:50%;color:#fff;width:5vh;height:5vh;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:2vh;transition:background .2s}.lightbox-nav:hover{background:rgba(58,127,255,.4)}
.lightbox-prev{left:2vh}.lightbox-next{right:2vh}

/* ════ AGENT SELECTOR ════ */
.agent-sel-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}.agent-sel-overlay.open{display:flex}
.agent-sel-box{background:#080f22;border:1px solid rgba(255,255,255,.14);border-radius:10px;width:min(680px,92vw);max-height:75vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.7);animation:modalIn .25s var(--cubic)}
.agent-sel-header{display:flex;align-items:center;justify-content:space-between;padding:1.5vh 2vh;border-bottom:1px solid var(--border);background:rgba(0,0,0,.25)}
.agent-sel-title{font-family:'Bebas Neue',cursive;font-size:2vh;letter-spacing:3px}
.agent-sel-close{background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:50%;color:var(--muted);width:2.8vh;height:2.8vh;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1vh}.agent-sel-close:hover{color:var(--red)}
.agent-sel-search{display:flex;gap:.8vh;padding:1.2vh 1.5vh;border-bottom:1px solid var(--border)}
.agent-sel-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.4vh;padding:.9vh 1.2vh;outline:none;transition:border-color .2s}.agent-sel-input:focus{border-color:rgba(58,127,255,.5)}.agent-sel-input::placeholder{color:var(--muted)}
.agent-sel-search-btn{background:rgba(58,127,255,.25);border:1px solid rgba(58,127,255,.4);border-radius:6px;color:#fff;padding:.9vh 1.5vh;cursor:pointer;font-size:1.3vh;transition:background .2s}.agent-sel-search-btn:hover{background:rgba(58,127,255,.45)}
.agent-sel-list{overflow-y:auto;flex:1;padding:.5vh}
.agent-sel-item{display:flex;align-items:center;gap:1.2vh;padding:1vh 1.2vh;border-radius:6px;cursor:pointer;transition:background .15s;border:1px solid transparent}.agent-sel-item:hover{background:rgba(58,127,255,.12);border-color:rgba(58,127,255,.25)}
.agent-sel-avatar{width:4vh;height:4vh;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0}
.agent-sel-ph{width:4vh;height:4vh;border-radius:50%;background:rgba(58,127,255,.2);border:1.5px solid rgba(58,127,255,.35);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:1.5vh;color:#fff;flex-shrink:0}
.agent-sel-name{font-size:1.3vh;font-weight:700}.agent-sel-rank{font-size:1vh;color:var(--muted);margin-top:.2vh}
.agent-sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:20vh;gap:1vh;color:var(--muted);font-size:1.1vh;text-align:center;opacity:.6}.agent-sel-empty i{font-size:4vh}

/* ════ MODAL ════ */
.c-modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}.c-modal-overlay.open,.c-modal-overlay[style*="flex"]{display:flex}
.c-modal{background:#08132a;border:1px solid rgba(58,127,255,.28);border-radius:14px;width:min(1100px,98vw);box-shadow:0 24px 60px rgba(0,0,0,.65);animation:modalIn .28s var(--cubic);overflow:hidden;max-height:95vh;display:flex;flex-direction:column}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:none}}
.c-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.6vh 2vh;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);flex-shrink:0}
.c-modal-title{font-family:'Bebas Neue',cursive;font-size:2.8vh;letter-spacing:3px}
.c-modal-close{background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:50%;color:var(--muted);width:2.8vh;height:2.8vh;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1vh;flex-shrink:0}.c-modal-close:hover{color:var(--red);border-color:rgba(229,57,53,.4)}
.c-modal-body{padding:2.5vh;display:flex;flex-direction:column;gap:1.5vh;overflow-y:auto;flex:1;font-size:1.3vh}
.c-modal-footer{display:flex;justify-content:flex-end;gap:.8vh;padding:1.2vh 2vh;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18);flex-shrink:0}
.form-group{display:flex;flex-direction:column;gap:.5vh}
.form-group label{font-family:'Bebas Neue',cursive;font-size:1.25vh;letter-spacing:2px;color:rgba(58,127,255,.9)}
.form-input,.form-select,.form-textarea{background:var(--bg-input);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:#fff;font-family:'Quicksand',sans-serif;font-size:1.35vh;padding:.9vh 1.1vh;outline:none;transition:border-color .2s;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:rgba(58,127,255,.55)}.form-input::placeholder,.form-textarea::placeholder{color:var(--muted)}
.form-select option{background:#0a1930;color:#fff}.form-textarea{resize:vertical;min-height:7vh}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh}
.img-upload-label{display:flex;align-items:center;justify-content:center;gap:.8vh;background:rgba(255,255,255,.06);border:1.5px dashed var(--border);border-radius:6px;padding:1.2vh;cursor:pointer;transition:border-color .2s;font-size:1.2vh;color:var(--muted)}.img-upload-label:hover{border-color:rgba(58,127,255,.45);color:#fff}.img-upload-label input{display:none}
.img-preview{width:100%;height:10vh;object-fit:cover;border-radius:5px;display:none}

/* Predefined list in sancion modal */
.predef-modal-section{border-top:1px solid var(--border);padding-top:1vh}
.predef-modal-title{font-family:'Bebas Neue',cursive;font-size:1.2vh;letter-spacing:2px;color:var(--muted);margin-bottom:.5vh}
.predef-modal-list{max-height:18vh;overflow-y:auto;display:flex;flex-direction:column;gap:.2vh}
.predef-modal-item{padding:.6vh .8vh;border-radius:4px;cursor:pointer;font-size:1.1vh;line-height:1.4;border:1px solid transparent;transition:all .15s;display:flex;align-items:flex-start;gap:.8vh}.predef-modal-item:hover{border-color:rgba(58,127,255,.35);background:rgba(58,127,255,.08)}
.predef-modal-badge{font-family:'Bebas Neue',cursive;font-size:.85vh;letter-spacing:1px;padding:.1vh .5vh;border-radius:3px;flex-shrink:0;margin-top:.15vh}

/* ════ TOAST ════ */
.toast-notif{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(calc(100% + 24px));z-index:9999;display:flex;align-items:center;gap:1.4vh;background:#0b1829;border:1px solid rgba(58,127,255,.35);border-radius:12px;padding:2.2vh 3.5vh;font-size:1.4vh;font-weight:600;color:#fff;min-width:36vh;max-width:60vh;box-shadow:0 12px 40px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.34,1.3,.64,1);letter-spacing:.3px;font-family:'Quicksand',sans-serif;pointer-events:none}.toast-notif.show{transform:translateX(-50%) translateY(0);pointer-events:auto}.toast-notif i{font-size:1.6vh;flex-shrink:0}.toast-notif #toastText{flex:1}.toast-notif.toast-success{border-color:rgba(45,202,115,.4);background:rgba(7,22,14,.97)}.toast-notif.toast-success i{color:var(--green)}.toast-notif.toast-error{border-color:rgba(229,57,53,.4);background:rgba(25,5,5,.97)}.toast-notif.toast-error i{color:var(--red)}.toast-notif.toast-warn{border-color:rgba(255,193,7,.35);background:rgba(25,18,0,.97)}.toast-notif.toast-warn i{color:var(--gold)}
/* Ocultar toast durante login */
#loginScreen:not([style*="display:none"]) ~ .toast-notif,
#loginScreen:not([style*="display: none"]) ~ .toast-notif{display:none!important}

/* ════ ACTIVITY ════ */
.activity-box{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:1.2vh;margin-top:1.5vh}
.activity-title{font-family:'Bebas Neue',cursive;font-size:1.7vh;letter-spacing:2px;margin-bottom:.8vh;color:rgba(255,255,255,.55)}
.act-list{display:flex;flex-direction:column;gap:.3vh;max-height:20vh;overflow-y:auto}
.act-item{display:flex;align-items:center;gap:.8vh;padding:.6vh .8vh;border-radius:4px;background:rgba(0,0,0,.18);font-size:1.15vh}
.act-dot{width:.6vh;height:.6vh;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--blue)}.dot-gold{background:var(--gold)}.dot-red{background:var(--red)}.dot-green{background:var(--green)}.dot-orange{background:var(--orange)}
.act-text{flex:1;color:rgba(255,255,255,.8)}.act-text strong{color:var(--gold)}.act-time{font-family:'Roboto Mono',monospace;font-size:.9vh;color:var(--muted)}

/* ════ CONVOCATORIAS ════ */
.conv-list{display:flex;flex-direction:column;gap:.8vh}
.conv-item{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:1.2vh 1.5vh;transition:border-color .2s}.conv-item:hover{border-color:rgba(58,127,255,.3)}
.conv-title{font-family:'Bebas Neue',cursive;font-size:2vh;letter-spacing:1.5px;margin-bottom:.4vh}
.conv-meta{font-size:.9vh;color:var(--muted);margin-bottom:.8vh;display:flex;gap:1.5vh}
.conv-body{font-size:1.1vh;line-height:1.6;color:rgba(255,255,255,.8)}
/* Tandas */
.conv-tanda-item{display:flex;align-items:center;gap:.8vh;padding:.8vh 1vh;border-radius:6px;background:rgba(0,0,0,.2);border:1px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:.3vh}
.conv-tanda-item:hover{background:rgba(58,127,255,.1);border-color:rgba(58,127,255,.2)}
.conv-tanda-item.active{background:rgba(58,127,255,.18);border-color:rgba(58,127,255,.4)}
.conv-tanda-name{font-family:'Bebas Neue',cursive;font-size:1.4vh;letter-spacing:1px;flex:1}
.conv-tanda-count{font-family:'Bebas Neue',cursive;font-size:2vh;color:var(--gold)}
/* Solicitudes */
.conv-sol-card{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px;padding:1.2vh 1.5vh;margin-bottom:.5vh;transition:border-color .15s}
.conv-sol-card:hover{border-color:rgba(58,127,255,.25)}
/* ════ MOBILE RESPONSIVE ════ */
@media (max-width: 900px) {
  .tabs-bar{gap:.3vh;padding:.3vh}
  .tab{font-size:1.2vh;padding:.4vh 0}
  .tab-name{padding:0 .4vh 0 .8vh}
  .user-chip-rank{display:none}
  .right-buttons{grid-template-columns:repeat(2,1fr)!important}
  .secondary-box{height:13vh}
  .secondary-box i{font-size:3vh}
  .secondary-box .box-label{font-size:1.5vh}
  .informes-layout{grid-template-columns:1fr!important;height:auto!important}
  .informes-left{max-height:35vh}
  .settings-grid-2{grid-template-columns:1fr!important}
  .divisiones-grid{grid-template-columns:1fr 1fr!important}
  .conv-sol-card{padding:.8vh 1vh}
  .san-fecha,.san-expediente{display:none}
  .san-motivo{-webkit-line-clamp:1}
  .rangos-list .rango-count{min-width:4vh;font-size:2.5vh}
  .org-table{font-size:1vh}
  .c-modal{width:98vw!important;max-height:96vh}
  .c-modal-body{padding:1.2vh}
}
@media (max-width: 600px) {
  body{font-size:1.2vh}
  .app-title{font-size:3.2vh!important}
  .right-buttons{grid-template-columns:1fr 1fr!important;gap:.8vh}
  .secondary-box{height:11vh;padding:1vh}
  .secondary-box i{font-size:2.8vh}
  .secondary-box .box-label{font-size:1.3vh;letter-spacing:.8px}
  .secondary-box .box-stat{display:none}
  .tab-content-menu .tab{padding:1vh}
  .informes-layout{grid-template-columns:1fr!important}
  .divisiones-grid{grid-template-columns:1fr!important}
  .info-boxes-grid{grid-template-columns:1fr 1fr!important}
  .conv-tanda-count{font-size:1.8vh}
  .agent-profile-name{font-size:2.2vh}
  .agent-profile-avatar,.agent-profile-avatar-ph{width:7vh;height:7vh}
  .san-item{flex-wrap:wrap;gap:.5vh}
  .san-agente{min-width:0;font-size:1vh}
  .search-bar{min-width:0}
  .tabs-list .tab .tab-name{max-width:12vh;overflow:hidden;text-overflow:ellipsis}
}

/* ════ PORTAL FOOTER WATERMARK ════ */
.portal-footer{position:fixed;bottom:0;left:0;right:0;z-index:1;padding:.6vh 2vh;display:flex;justify-content:space-between;align-items:center;pointer-events:none;background:linear-gradient(0deg,rgba(4,9,26,.8),transparent)}
.portal-footer span{font-size:.85vh;color:rgba(255,255,255,.15);font-family:'Quicksand',sans-serif;font-weight:500}
.portal-footer strong{color:rgba(255,255,255,.25)}

/* ════ PLACAS MANAGER ════ */
.placa-agent-row{display:flex;align-items:center;gap:.8vh;padding:.7vh 1vh;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:7px;cursor:pointer;transition:background .15s}
.placa-agent-row:hover{background:rgba(58,127,255,.1);border-color:rgba(58,127,255,.3)}
.placa-num{font-family:'Bebas Neue',cursive;font-size:2.2vh;color:var(--gold);min-width:6vh;letter-spacing:2px}
.placa-cell{border-radius:5px;padding:.5vh .3vh;text-align:center;font-family:'Bebas Neue',cursive;font-size:1.2vh;line-height:1.4;transition:transform .15s,filter .15s;display:flex;align-items:center;justify-content:center}
.placa-cell-free{background:rgba(45,202,115,.08);border:1px solid rgba(45,202,115,.2);color:rgba(45,202,115,.7)}
.placa-cell-free:hover{background:rgba(45,202,115,.15);filter:brightness(1.2)}
.placa-cell-occ{background:rgba(229,57,53,.2);border:1px solid rgba(229,57,53,.4);color:var(--red);cursor:pointer;font-weight:700}
.placa-cell-occ:hover{background:rgba(229,57,53,.3);transform:scale(1.1)}


/* ════════════════════════════════════════
   RESPONSIVE MÓVIL — LSPD PORTAL v2
   Estrategia: px fijos en vez de vh
═══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── BASE ── */
  html { height: 100dvh; }
  body { font-size: 14px; height: 100dvh; overflow: hidden; }
  .police { height: 100dvh; }
  .police .logo { display: none; }

  /* ─────────────────────────────────────
     LOGIN — FIX COMPLETO
     El login-screen es fixed inset:0 flex center.
     Solo necesitamos hacer el box visible.
  ───────────────────────────────────── */
  .login-screen {
    /* No tocar flex/align: ya centra bien */
    /* Asegurar que el fondo cubre todo */
    overflow: auto;
  }
  .login-box {
    /* Forzar tamaño en px, no vh/vw raros */
    width: 88vw !important;
    max-width: 380px !important;
    padding: 28px 22px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    /* Quitar animación que puede causar problemas en móvil */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .login-shield { width: 60px; height: 60px; margin-bottom: 14px; }
  .login-guild-icon { width: 60px; height: 60px; margin-bottom: 14px; }
  .login-eyebrow { font-size: 9px; letter-spacing: 3px; margin-bottom: 6px; }
  .login-title { font-size: 28px !important; letter-spacing: 2px; margin-bottom: 6px; }
  .login-sub { font-size: 11px; margin-bottom: 20px; }
  .login-divider { margin-bottom: 16px; }
  .login-divider span { font-size: 9px; }
  .discord-btn { font-size: 13px !important; padding: 14px !important; letter-spacing: 1px; border-radius: 8px; }
  .login-footer { font-size: 10px; margin-top: 14px; }
  #toggleCredBtn { font-size: 12px !important; }
  #credForm { max-width: 100% !important; width: 100%; }
  #credForm > div { padding: 16px; gap: 10px; }
  #credUser, #credPass { font-size: 14px !important; padding: 12px 14px !important; border-radius: 6px; }
  #credBtn { font-size: 13px !important; padding: 12px !important; }
  #credError { font-size: 11px; }

  /* ── TABS BAR — mover abajo ── */
  .tabs-bar {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 6px 8px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    background: rgba(4,9,26,.97) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(20px) !important;
    gap: 4px !important;
    overflow-x: auto;
    z-index: 200 !important;
    height: auto !important;
  }
  .tabs-logo { display: none !important; }
  .tab-content-menu {
    top: 0 !important;
    bottom: calc(52px + max(0px, env(safe-area-inset-bottom))) !important;
    overflow: hidden;
  }
  .tab-content-menu .tab {
    padding: 12px 14px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabs compactas */
  .tab { font-size: 11px !important; padding: 5px 0 !important; flex-shrink: 0; }
  .tab-name { padding: 0 5px 0 7px !important; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-close i { font-size: 9px; }
  .tab.add { padding: 5px 10px !important; font-size: 15px; }

  /* User chip */
  .user-chip { padding: 5px 8px !important; gap: 5px !important; flex-shrink: 0; margin-left: auto; }
  .user-chip-rank { display: none; }
  .user-chip-name { font-size: 11px; }
  .user-chip-avatar { width: 26px !important; height: 26px !important; }
  .logout-chip { font-size: 13px; }

  /* ── DASHBOARD ── */
  .app-title { font-size: 22px !important; }
  .section-header { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .section-header .flex { flex-wrap: wrap; gap: 5px; }
  .back-btn { font-size: 11px !important; padding: 6px 10px !important; margin-bottom: 10px; }
  .right-buttons { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 10px !important; margin-bottom: 14px !important; }
  .secondary-box { height: auto !important; padding: 14px 10px !important; gap: 5px !important; }
  .secondary-box i { font-size: 24px !important; }
  .secondary-box .box-label { font-size: 11px !important; letter-spacing: .8px; }
  .secondary-box .box-stat { font-size: 10px !important; }
  .activity-box { margin-top: 10px; }
  .act-item { font-size: 11px; padding: 4px 0; }

  /* ── AGENTES ── */
  [style*="grid-template-columns:1fr 2fr"] {
    display: flex !important; flex-direction: column !important; gap: 10px !important; height: auto !important;
  }
  #agentList { max-height: 38vh !important; }
  #agentProfile { max-height: none !important; }
  .agent-item { padding: 9px 11px !important; }
  .agent-avatar, .agent-avatar-ph { width: 40px !important; height: 40px !important; }
  .agent-name { font-size: 13px; }
  .agent-discord-name { font-size: 11px; }

  /* ── PERFIL ── */
  .agent-profile-avatar, .agent-profile-avatar-ph { width: 52px !important; height: 52px !important; }
  .agent-profile-name { font-size: 18px !important; }
  .agent-profile-username { font-size: 11px; }
  .info-boxes-grid { grid-template-columns: 1fr 1fr !important; gap: 6px; margin-bottom: 10px; }
  .info-box { padding: 7px 9px; }
  .info-box-title { font-size: 9px; }
  .info-box-value { font-size: 16px; }
  .mini-tabs { flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .mini-tab { font-size: 10px !important; padding: 5px 8px !important; min-height: 28px; display: flex; align-items: center; }

  /* ── SANCIONES ── */
  .san-item { flex-wrap: wrap; gap: 4px; padding: 7px 10px !important; }
  .san-expediente { font-size: 10px !important; }
  .san-agente { flex: 1; min-width: 100px; font-size: 11px !important; }
  .san-fecha { display: none !important; }
  .san-type { font-size: 10px !important; padding: 2px 5px !important; }
  .san-expand { padding: 10px !important; }
  .san-expand-row { flex-direction: column; gap: 5px; }
  .sancion-stats { flex-wrap: wrap; gap: 5px; }
  .san-stat { padding: 7px !important; flex: 1; min-width: 55px; }
  .san-stat-val { font-size: 22px !important; }
  .san-stat-lbl { font-size: 9px; }

  /* ── MODALES ── */
  .c-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .c-modal {
    width: 100vw !important; max-width: 100vw !important;
    max-height: 88dvh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
  .c-modal-header { padding: 13px 16px !important; }
  .c-modal-body { padding: 14px 16px !important; max-height: 58dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .c-modal-footer { padding: 10px 16px !important; flex-wrap: wrap; gap: 6px; }
  .c-modal-footer .btn-action { flex: 1; min-width: 0; }

  /* Modal sanción apilado */
  [style*="grid-template-columns:1fr 320px"] {
    display: flex !important; flex-direction: column !important; gap: 10px !important; height: auto !important;
  }
  #predefModalList { max-height: 32dvh; }

  /* ── FORMS ── */
  .form-row-2 { grid-template-columns: 1fr !important; gap: 8px; }
  .form-group label { font-size: 10px; }
  .form-input, .form-select, .form-textarea { font-size: 14px !important; padding: 10px 12px !important; }
  .form-textarea { min-height: 72px !important; }

  /* ── BOTONES ── */
  .btn-action { font-size: 11px !important; padding: 7px 11px !important; min-height: 34px; }

  /* ── AJUSTES ── */
  .settings-tabs { flex-wrap: wrap; gap: 4px; overflow-x: auto; }
  .settings-tab { font-size: 10px !important; padding: 6px 9px !important; flex-shrink: 0; white-space: nowrap; }
  .settings-grid-2 { grid-template-columns: 1fr !important; }
  .settings-section { padding: 11px !important; }
  .settings-title { font-size: 13px; }
  .perm-role-row { flex-wrap: wrap; gap: 4px; }
  .perm-role-name { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .predef-table-wrap { overflow-x: auto; }
  .predef-table { font-size: 10px; }
  .env-row { flex-wrap: wrap; padding: 6px 8px; }
  .env-key, .env-val { font-size: 11px; }

  /* ── INFORMES ── */
  .informes-layout { grid-template-columns: 1fr !important; height: auto !important; gap: 10px; }
  .informes-left { max-height: 40dvh; }
  .inf-list { max-height: 35dvh; }
  .informes-right { max-height: 50dvh; overflow-y: auto; }
  .inf-item { font-size: 12px; padding: 8px 10px; }
  .inf-textarea { min-height: 90px !important; font-size: 13px; }

  /* ── DIVISIONES ── */
  .divisiones-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* ── ORGANIGRAMA ── */
  .org-table { font-size: 10px; }
  .org-table th, .org-table td { padding: 4px 6px; }

  /* ── RANGOS ── */
  .rangos-list { grid-template-columns: 1fr !important; }
  .rango-card { padding: 9px 11px; }
  .rango-name { font-size: 13px; }
  .hide-role-btn { font-size: 10px !important; padding: 3px 7px !important; }

  /* ── CONVOCATORIAS ── */
  [style*="grid-template-columns:36vh 1fr"] {
    display: flex !important; flex-direction: column !important; gap: 10px !important; height: auto !important;
  }
  .conv-sol-card { padding: 9px 11px; }

  /* ── AGENT SELECTOR ── */
  .agent-sel-overlay { align-items: flex-end !important; }
  .agent-sel-box {
    width: 100vw !important; max-height: 82dvh !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
  .agent-sel-item { padding: 9px 11px; }
  .agent-sel-avatar, .agent-sel-ph { width: 36px; height: 36px; }
  .agent-sel-name { font-size: 13px; }
  .agent-sel-rank { font-size: 11px; }

  /* ── SEARCH ── */
  .search-bar input { font-size: 13px; }

  /* ── TOAST ── */
  .toast-notif {
    bottom: calc(58px + max(0px, env(safe-area-inset-bottom))) !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 88vw; max-width: 340px;
    font-size: 12px;
  }

  /* ── NOTAS ── */
  .note-body { font-size: 12px; }
  .note-meta { font-size: 10px; }
  .note-input-wrap textarea { font-size: 13px; min-height: 52px; }

  /* ── PLACAS ── */
  .placa-cell { min-width: 30px; min-height: 30px; font-size: 10px !important; }
  .placa-agent-row { padding: 7px 10px; }

  /* ── PORTAL FOOTER ── */
  .portal-footer { display: none; }

  /* ── RANK TAG ── */
  .rank-tag { font-size: 10px !important; padding: 2px 5px !important; }
}

/* ── LANDSCAPE MÓVIL ── */
@media (max-width: 768px) and (orientation: landscape) {
  .tabs-bar { padding: 4px 8px !important; }
  .tab-content-menu { bottom: calc(46px + max(0px, env(safe-area-inset-bottom))) !important; }
  .secondary-box { padding: 8px !important; }
  .secondary-box i { font-size: 18px !important; }
  #agentList { max-height: 22vh !important; }
  .c-modal-body { max-height: 48dvh !important; }
  .login-box { padding: 16px 20px !important; }
  .login-shield { width: 44px; height: 44px; margin-bottom: 8px; }
}

/* ── TABLET ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .right-buttons { grid-template-columns: repeat(4,1fr) !important; }
  .c-modal { width: 90vw !important; }
  .settings-tabs { flex-wrap: wrap; }
  [style*="grid-template-columns:1fr 320px"] { display: flex !important; flex-direction: column !important; height: auto !important; }
}

/* ── TOUCH ── */
@media (hover: none) and (pointer: coarse) {
  .btn-action { min-height: 34px; }
  .mini-tab { min-height: 30px; display: flex; align-items: center; }
  .agent-item { min-height: 50px; }
  .settings-tab { min-height: 34px; display: flex; align-items: center; }
}