/* WOLF PACK — Panel administrativo */
:root{
  --bg:#0A0A0B; --panel:#141416; --panel-2:#0C0C0E; --line:#26262A; --line-soft:#1C1C1F;
  --text:#ECECEE; --muted:#8A8A90; --muted-2:#58585E; --dim:#4A4A50;
  --red:#C9202E; --red-2:#E0303D; --red-soft:#F06B74; --green:#3DBE6B; --amber:#E0A93D; --blue:#6FA8E0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); }
body{ color:var(--text); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--red); color:#fff; }
input,select,textarea{ font-family:'Manrope',sans-serif; outline:none; }
input:focus,select:focus,textarea:focus{ border-color:var(--red) !important; }
::placeholder{ color:var(--dim); }
a{ color:inherit; text-decoration:none; }
button{ font-family:'Manrope',sans-serif; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }

/* LOGIN */
.login{ min-height:100vh; display:flex; }
.login .left{ flex:1.1; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:48px; background:linear-gradient(160deg,#101013,#0A0A0B 60%); border-right:1px solid var(--line-soft); overflow:hidden; }
.login .glow{ position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:680px; height:680px; background:radial-gradient(circle, rgba(201,32,46,0.12) 0%, rgba(201,32,46,0) 62%); pointer-events:none; }
.login .brand{ position:relative; display:flex; align-items:center; gap:11px; }
.login .brand img{ height:40px; mix-blend-mode:screen; }
.login .brand span{ font-family:'Cinzel'; font-weight:700; letter-spacing:3px; font-size:15px; }
.login .center{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.login .center img{ width:230px; mix-blend-mode:screen; filter:drop-shadow(0 20px 50px rgba(201,32,46,0.22)); }
.login .word{ font-family:'Cinzel'; font-weight:700; font-size:38px; letter-spacing:8px; margin-top:26px; background:linear-gradient(180deg,#FDFDFD,#C6C6CB 50%,#8E8E94 54%,#E6E6EA); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login .sub{ font-family:'Cinzel'; font-size:11px; letter-spacing:6px; color:var(--muted); margin-top:10px; }
.login .tag{ position:relative; font-size:12px; color:#3A3A3E; letter-spacing:1px; }
.login .right{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.login .form{ width:380px; max-width:100%; animation:rise .4s ease; }
.login h1{ font-family:'Cinzel'; font-weight:600; font-size:28px; letter-spacing:0.5px; margin:0; }
.login .lead{ font-size:14px; color:var(--muted); margin-top:8px; }
.shake{ animation:shake .42s ease; }
.err-box{ display:flex; align-items:center; gap:9px; background:rgba(201,32,46,0.1); border:1px solid rgba(201,32,46,0.32); border-radius:10px; padding:11px 14px; color:var(--red-soft); font-size:13px; }
@media (max-width:820px){ .login .left{ display:none; } }

/* LAYOUT */
.app{ display:flex; min-height:100vh; }
.sidebar{ width:248px; flex-shrink:0; background:var(--panel-2); border-right:1px solid var(--line-soft); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sb-head{ padding:22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:11px; }
.sb-head img{ height:40px; mix-blend-mode:screen; }
.sb-head .t{ font-family:'Cinzel'; font-weight:700; font-size:15px; letter-spacing:2px; }
.sb-head .s{ font-size:10px; letter-spacing:2px; color:var(--muted-2); }
.sb-nav{ padding:16px 14px; display:flex; flex-direction:column; gap:4px; flex:1; overflow:auto; }
.sb-label{ font-size:10px; letter-spacing:2px; color:var(--dim); padding:8px 12px 6px; }
.nav-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-weight:600; font-size:14px; padding:11px 12px; border-radius:10px; cursor:pointer; border:none; background:transparent; color:var(--muted); transition:all .14s; }
.nav-item:hover{ color:var(--text); }
.nav-item.active{ background:#1C1C20; color:#fff; }
.nav-item .ic{ font-size:15px; width:18px; text-align:center; color:var(--muted-2); }
.nav-item.active .ic{ color:var(--red); }
.nav-item .cnt{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted-2); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:2px 9px; }
.nav-item.active .cnt{ color:var(--text); }
.sb-user{ padding:16px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:11px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#C9202E,#7A1018); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.sb-user .nm{ font-size:13px; font-weight:600; }
.sb-user .rl{ font-size:11px; color:var(--muted-2); }
.logout{ margin-left:auto; background:#1C1C20; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; }
.logout:hover{ color:var(--red-soft); border-color:var(--red); }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:30; background:rgba(10,10,11,0.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar .title{ font-family:'Cinzel'; font-weight:600; font-size:24px; letter-spacing:0.5px; }
.topbar .subtitle{ font-size:13px; color:var(--muted-2); margin-top:2px; }
.content{ padding:28px 32px 60px; flex:1; }

.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:11px 20px; border:none; border-radius:10px; cursor:pointer; transition:background .14s; }
.btn:hover{ background:var(--red-2); }
.btn.sec{ background:transparent; border:1px solid var(--line); color:var(--muted); }
.btn.sec:hover{ color:#fff; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.stat .l{ font-size:12px; color:var(--muted); letter-spacing:0.5px; }
.stat .v{ font-family:'Cinzel'; font-weight:700; font-size:28px; margin-top:6px; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:100px; cursor:pointer; transition:all .14s; background:transparent; color:#A6A6AC; border:1px solid #2C2C30; }
.chip.active{ background:var(--red); color:#fff; border-color:var(--red); }
.search{ position:relative; }
.search input{ background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:13px; padding:10px 14px 10px 34px; border-radius:10px; width:240px; }
.search .ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:14px; }

.table{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.table .th, .table .tr{ display:grid; gap:12px; padding:14px 22px; align-items:center; }
.table .th{ border-bottom:1px solid var(--line); font-size:11px; letter-spacing:1px; color:var(--muted-2); text-transform:uppercase; }
.table .tr{ border-bottom:1px solid var(--line-soft); }
.table .tr:last-child{ border-bottom:none; }
.thumb-sm{ width:42px; height:42px; border-radius:9px; background:linear-gradient(150deg,#1F1F23,#0C0C0E); border:1px solid #2C2C30; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.thumb-sm img{ width:34px; opacity:.5; mix-blend-mode:screen; }
.cell-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell-sub{ font-size:11px; color:var(--muted-2); }
.pill{ font-size:12px; font-weight:700; border-radius:7px; padding:5px 11px; display:inline-block; }
.pill.on{ background:rgba(61,190,107,0.12); color:var(--green); border:1px solid rgba(61,190,107,0.3); cursor:pointer; }
.pill.off{ background:#1C1C20; color:var(--muted); border:1px solid #2C2C30; cursor:pointer; }
.icon-act{ width:34px; height:34px; border-radius:8px; background:#1C1C20; border:1px solid #2C2C30; color:#A6A6AC; cursor:pointer; font-size:14px; }
.icon-act:hover{ color:#fff; border-color:#3A3A3E; }
.icon-act.danger:hover{ color:var(--red-soft); border-color:var(--red); }
.row-acts{ display:flex; gap:8px; justify-content:flex-end; }
.empty{ padding:48px; text-align:center; color:var(--muted-2); font-size:14px; }

.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.gcard{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; }
.switch{ position:relative; width:42px; height:24px; border-radius:20px; border:none; cursor:pointer; transition:all .16s; flex-shrink:0; background:#2C2C30; }
.switch.on{ background:var(--red); }
.switch .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:all .16s; }
.switch.on .knob{ left:21px; }

/* MODAL */
.modal-bg{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,0.66); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ width:520px; max-width:100%; background:var(--panel); border:1px solid #2C2C30; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,0.6); animation:pop .18s ease; max-height:90vh; overflow:auto; }
.modal .mh{ padding:22px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal .mh h3{ font-family:'Cinzel'; font-weight:600; font-size:19px; margin:0; }
.modal .mb{ padding:24px 26px; }
.modal .mf{ padding:18px 26px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field span{ font-size:12px; color:var(--muted); font-weight:600; }
.field input, .field select, .field textarea{ background:var(--bg); border:1px solid #2C2C30; color:var(--text); font-size:14px; padding:11px 14px; border-radius:10px; width:100%; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--panel); border:1px solid var(--line); color:#fff; padding:13px 20px; border-radius:12px; font-size:14px; z-index:200; opacity:0; transition:all .25s; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err{ border-color:var(--red); }

.hamburger{ display:none; }
@media (max-width:900px){
  .sidebar{ position:fixed; z-index:60; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open{ transform:none; }
  .hamburger{ display:inline-flex; background:#1C1C20; border:1px solid var(--line); color:#fff; width:40px; height:38px; border-radius:9px; cursor:pointer; align-items:center; justify-content:center; font-size:18px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .cards-3,.cards-2{ grid-template-columns:1fr; }
}