/* ═══════════════════════════════════════
   LAYOUT — App shell, sidebar, topbar
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);font-size:var(--text-base);
  color:var(--text-1);background:var(--bg);
  -webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;
}
h1,h2,h3,h4,h5{font-weight:var(--weight-bold);line-height:1.2;color:var(--text-1)}
a{color:var(--accent);text-decoration:none}
input,select,textarea,button{font-family:var(--font-sans);font-size:var(--text-base)}
input::placeholder,textarea::placeholder{color:var(--text-4)}
label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-2);margin-bottom:var(--sp-1)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}

/* ── LOGIN ──────────────────────────── */
#login-screen{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(ellipse at 65% 40%,rgba(22,163,74,.09) 0%,transparent 60%),
             radial-gradient(ellipse at 25% 70%,rgba(26,110,197,.06) 0%,transparent 55%),var(--bg);
}
.login-card{
  background:var(--modal-bg);
  backdrop-filter:blur(var(--modal-blur));-webkit-backdrop-filter:blur(var(--modal-blur));
  border:1px solid var(--modal-border);border-radius:var(--radius-xl);
  padding:40px 36px 36px;width:360px;
  box-shadow:var(--shadow-lg),0 0 0 0.5px rgba(255,255,255,.04);
  animation:fadeIn .3s ease;
}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;box-shadow:0 4px 18px var(--accent-glow);
}
.login-logo-icon svg{width:26px;height:26px}
.login-logo h1{font-size:var(--text-xl);font-weight:var(--weight-black);color:var(--text-1)}
.login-logo p{font-size:var(--text-sm);color:var(--text-3);margin-top:3px}
#loginErr{color:#f87171;font-size:11px;margin-top:8px;text-align:center;min-height:16px}

/* ── APP SHELL ──────────────────────── */
#app{display:none;height:100vh;overflow:hidden}
#app.show{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  grid-template-rows:var(--topbar-height) 1fr;
  transition:grid-template-columns var(--transition-slow);
}
#app.show.sb-collapsed{grid-template-columns:68px 1fr}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar{
  grid-column:1;grid-row:1/3;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;z-index:100;
  position:relative;
}

.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent) 60%,transparent 100%);
  opacity:.55;
}

/* ─── Brand ────────────────────────── */
.sidebar__brand{
  display:flex;align-items:center;gap:11px;
  padding:18px 14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;overflow:hidden;
}
.sidebar__brand-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px var(--accent-glow);
}
.sidebar__brand-icon svg{width:17px;height:17px;flex-shrink:0}
.sidebar__brand-text{overflow:hidden;line-height:1}
.sidebar__brand-name{
  font-size:13.5px;font-weight:var(--weight-black);color:var(--text-1);
  letter-spacing:-.01em;white-space:nowrap;
}
.sidebar__brand-sub{
  font-size:10px;font-weight:var(--weight-medium);
  color:var(--text-4);letter-spacing:.07em;text-transform:uppercase;
  margin-top:3px;white-space:nowrap;
}

/* ─── Nav ──────────────────────────── */
.sidebar__nav{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 8px;display:flex;flex-direction:column;
  scrollbar-width:none;
}
.sidebar__nav::-webkit-scrollbar{display:none}

.sidebar__group{
  padding:12px 8px 4px;
  font-size:9px;font-weight:var(--weight-black);
  color:var(--text-4);letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;
  flex-shrink:0;
}
.sidebar__group:first-child{padding-top:6px}

.sidebar__link{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;margin-bottom:1px;
  font-size:13px;font-weight:var(--weight-medium);
  color:var(--text-3);text-decoration:none;
  border-radius:10px;border:none;background:transparent;cursor:pointer;
  white-space:nowrap;overflow:hidden;
  transition:color .15s,background .15s,box-shadow .15s;
  font-family:var(--font-sans);position:relative;width:100%;
  flex-shrink:0;
}
.sidebar__link:hover{
  color:var(--text-1);
  background:var(--glass-3);
  text-decoration:none;
}
.sidebar__link.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(22,163,74,.20) 0%,rgba(22,163,74,.08) 100%);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.16);
}
.sidebar__link.active .sidebar__icon svg{stroke:var(--accent-light)}
.sidebar__link.active .sidebar__link-label{color:#fff;font-weight:var(--weight-semi)}
.sidebar__link.active::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;
  width:3px;background:var(--accent-light);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 8px var(--accent-glow);
}

.sidebar__icon{
  width:18px;height:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;opacity:.85;
  transition:opacity .15s;
}
.sidebar__icon svg{width:17px;height:17px;stroke-width:1.8}
.sidebar__link:hover .sidebar__icon,
.sidebar__link.active .sidebar__icon{opacity:1}

.sidebar__link-label{
  font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
  transition:color .15s;
}

.sidebar__nav-badge{
  background:var(--color-danger);color:#fff;font-size:9px;
  font-weight:var(--weight-bold);border-radius:var(--radius-full);
  padding:1px 6px;min-width:16px;text-align:center;flex-shrink:0;line-height:1.5;
}

/* ─── Bottom ───────────────────────── */
.sidebar__bottom{
  border-top:1px solid var(--border);
  padding:10px 8px;flex-shrink:0;
  display:flex;flex-direction:column;gap:2px;
}

.sidebar__profile{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  background:var(--glass-2);border:1px solid var(--border);
  margin-bottom:4px;overflow:hidden;
}
.sidebar__avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-light) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:var(--weight-bold);color:#fff;
  box-shadow:0 2px 8px var(--accent-glow);
}
.sidebar__profile-info{overflow:hidden;flex:1}
.sidebar__profile-name{
  font-size:12.5px;font-weight:var(--weight-semi);
  color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar__profile-role{
  font-size:10px;color:var(--text-4);margin-top:1px;white-space:nowrap;
}

.sidebar__logout{
  color:var(--text-3)!important;font-size:13px!important;
}
.sidebar__logout:hover{color:var(--color-danger)!important;background:rgba(239,68,68,.08)!important}

.sidebar__collapse-btn{
  color:var(--text-4)!important;font-size:13px!important;
}
.sidebar__collapse-btn:hover{color:var(--text-2)!important;background:var(--glass-3)!important}
.sidebar__collapse-btn .sidebar__icon{transition:transform var(--transition-slow)}

/* Collapsed */
#app.show.sb-collapsed .sidebar__link{
  justify-content:center;padding:10px 0;gap:0;
  width:44px;margin:1px auto;border-radius:11px;
}
#app.show.sb-collapsed .sidebar__link-label,
#app.show.sb-collapsed .sidebar__group,
#app.show.sb-collapsed .sidebar__nav-badge,
#app.show.sb-collapsed .sidebar__brand-text,
#app.show.sb-collapsed .sidebar__profile-info{display:none}
#app.show.sb-collapsed .sidebar__brand{
  justify-content:center;padding:17px 0;
}
#app.show.sb-collapsed .sidebar__profile{
  justify-content:center;padding:7px 0;
  background:transparent;border-color:transparent;margin-bottom:2px;
}
#app.show.sb-collapsed .sidebar__collapse-btn .sidebar__icon{transform:rotate(180deg)}
#app.show.sb-collapsed .sidebar__icon{width:19px;height:19px}
#app.show.sb-collapsed .sidebar__icon svg{width:18px;height:18px}

/* ── OVERLAY MÓVIL ──────────────────── */
#sbOverlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:150;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}

/* ══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
.topbar{
  grid-column:2;grid-row:1;
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:var(--topbar-height);
  position:sticky;top:0;z-index:90;
  gap:12px;
}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.86);}

.topbar__left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.topbar__toggle{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:transparent;border:none;color:var(--text-1);cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.topbar__toggle:hover{background:var(--glass-4);color:var(--text-1)}
.topbar__toggle svg{width:17px;height:17px;display:block}

.topbar__breadcrumb{display:flex;align-items:center;gap:7px;overflow:hidden}
.topbar__brand-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--accent-light);
  box-shadow:0 0 7px var(--accent-glow);
}
.topbar__page{
  font-size:14px;font-weight:var(--weight-semi);color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.topbar__center{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;pointer-events:none;flex-shrink:0;
}
.topbar__logo-icon{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px var(--accent-glow);
}
.topbar__logo-icon svg{width:14px;height:14px}
.topbar__logo-text{
  font-size:12.5px;font-weight:var(--weight-black);
  color:var(--text-2);letter-spacing:.05em;text-transform:uppercase;
}

.topbar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}

.topbar__time{
  display:flex;align-items:center;gap:5px;
  font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:8px;
  background:var(--glass-2);border:1px solid var(--border);
  margin-right:4px;
}
.topbar__time strong{font-weight:var(--weight-semi);color:var(--text-2)}

.topbar__sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 4px}

.topbar__avatar-wrap{
  display:flex;align-items:center;gap:7px;
  padding:4px 10px 4px 5px;border-radius:9px;
  background:var(--glass-2);border:1px solid var(--border);
  cursor:default;user-select:none;
  transition:background .15s;margin-left:4px;
}
.topbar__avatar-wrap:hover{background:var(--glass-4)}
.topbar__avatar-circle{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-light) 100%);
  color:#fff;font-size:10px;font-weight:var(--weight-bold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px var(--accent-glow);
}
.topbar__avatar-username{font-size:12px;font-weight:var(--weight-semi);color:var(--text-2);white-space:nowrap}

.topbar__theme-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:transparent;border:none;color:var(--text-2);cursor:pointer;
  transition:background .15s,color .15s;flex-shrink:0;
}
.topbar__theme-btn:hover{background:var(--glass-4);color:var(--text-1)}
.topbar__theme-btn svg{width:15px;height:15px}

.topbar__logout-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:transparent;border:none;color:var(--text-2);cursor:pointer;
  transition:background .15s,color .15s;flex-shrink:0;
}
.topbar__logout-btn:hover{background:rgba(239,68,68,.1);color:var(--color-danger)}
.topbar__logout-btn svg{width:15px;height:15px}

/* ── CONTENT ────────────────────────── */
#content{
  grid-column:2;grid-row:2;min-width:0;
  padding:var(--sp-6) var(--sp-8);overflow-y:auto;
  background:linear-gradient(160deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);
  animation:fadeIn .3s ease;
}
#content::-webkit-scrollbar{width:4px}
#content::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.25);border-radius:10px}

/* ── RESPONSIVE ─────────────────────── */
@media(max-width:768px){
  #app.show,#app.show.sb-collapsed{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:var(--sidebar-width);
    transform:translateX(-110%);
    transition:transform var(--transition-slow),box-shadow var(--transition-slow);
    z-index:200;box-shadow:none;
  }
  #app.show.sb-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-lg);}
  #app.show.sb-open #sbOverlay{display:block}
  .topbar{grid-column:1}
  #content{grid-column:1;padding:var(--sp-4)}
  .topbar__avatar-username,.topbar__sep{display:none}
  .page-header{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .stats-grid,.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .chat-layout{flex-direction:column;height:auto;min-height:calc(100svh - var(--topbar-height) - 100px)}
  .chat-list-panel{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:220px}
  .login-card{width:calc(100vw - 32px);max-width:360px;padding:32px 24px 28px}
}
@media(max-width:480px){
  #content{padding:var(--sp-3)}
  .topbar{padding:0 var(--sp-3)}
  .stats-grid,.kpi-grid{grid-template-columns:1fr 1fr}
  .page-header__title{font-size:var(--text-xl)}
}

/* ── Logo tema ───────────────────────── */
.admin-logo{transition:filter .2s ease}
:root[data-theme=light] .admin-logo{filter:brightness(0)}

/* ── Light theme overrides — sidebar ─────────────────── */
:root[data-theme=light] .topbar{
  background:rgba(247,248,252,.90);
  box-shadow:0 1px 0 var(--border);
}
:root[data-theme=light] .sidebar{
  box-shadow:1px 0 0 var(--border);
}
:root[data-theme=light] .sidebar__link.active{
  color:var(--accent-hover);
  background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.20);
}
:root[data-theme=light] .sidebar__link.active .sidebar__link-label{
  color:var(--accent-hover);
}
:root[data-theme=light] .sidebar__link.active .sidebar__icon svg{
  stroke:var(--accent);
}
:root[data-theme=light] .sidebar__link:hover{
  background:var(--glass-3);
  color:var(--text-1);
}
:root[data-theme=light] .sidebar__profile{
  background:var(--glass-2);
  border-color:var(--border);
}
:root[data-theme=light] .sidebar__collapse-btn:hover{
  background:var(--glass-3)!important;
  color:var(--text-2)!important;
}
:root[data-theme=light] .topbar__time{
  background:var(--glass-2);
  border-color:var(--border);
}