:root{
  --bg:#0f1319;
  --bg-raised:#151b23;
  --bg-panel:#1a212b;
  --bg-card:#1d2530;
  --bg-card-hover:#242e3b;
  --border:#2a3442;
  --border-soft:#222b37;
  --text:#eef1f5;
  --text-dim:#9aa5b6;
  --text-faint:#5d6879;
  --amber:#ffb300;
  --teal:#3cc2aa;
  --violet:#8f96f2;
  --slate:#9aa7bb;
  --green:#72cd92;
  --rose:#e28d9d;
  --glow-a:rgba(255,179,0,.05);
  --glow-b:rgba(60,194,170,.045);
  --bg-rail:rgba(21,27,35,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --font-display:'Big Shoulders Display',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-body:'Inter',system-ui,sans-serif;
}
[data-theme="light"]{
  --bg:#eef1f6;
  --bg-raised:#ffffff;
  --bg-panel:#f3f5f9;
  --bg-card:#ffffff;
  --bg-card-hover:#f4f7fb;
  --border:#d3dae4;
  --border-soft:#e4e9f0;
  --text:#182029;
  --text-dim:#55627a;
  --text-faint:#64748b;
  --amber:#b57608;
  --teal:#127f70;
  --violet:#5860d4;
  --slate:#566277;
  --green:#2c9a56;
  --rose:#c15a70;
  --glow-a:rgba(181,118,8,.06);
  --glow-b:rgba(18,127,112,.05);
  --bg-rail:rgba(24,32,41,.035);
  --shadow:0 1px 3px rgba(24,32,41,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 800px 420px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(ellipse 700px 420px at 100% 0%, var(--glow-b), transparent 60%);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--amber); color:#1a1400;}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px;}

.app{position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; overflow:hidden;}

/* ===== ROW 1: topbar ===== */
.topbar{
  flex-shrink:0; display:flex; align-items:center; gap:18px;
  padding:10px 18px; background:var(--bg-raised);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand-mark{
  width:34px; height:34px; border-radius:7px; overflow:hidden;
  background:linear-gradient(155deg,#232b37,#161b23);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--amber);
  flex-shrink:0;
}
[data-theme="light"] .brand-mark{background:linear-gradient(155deg,#2a3442,#1a212b); color:var(--amber);}
.brand-mark.has-logo{background:var(--bg-raised);}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-text{line-height:1.1;}
.brand-eyebrow{
  display:block; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.15em; color:var(--text-faint); text-transform:uppercase;
}
.brand-title{
  font-family:var(--font-display); font-weight:800; font-size:18px;
  letter-spacing:.02em; text-transform:uppercase;
}
.search-wrap{flex:1; max-width:560px; position:relative; display:flex; align-items:center;}
.search-wrap > svg{position:absolute; left:12px; width:14px; height:14px; color:var(--text-faint); pointer-events:none;}
#search{
  width:100%; background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text); font-family:var(--font-mono); font-size:13px;
  padding:9px 66px 9px 34px; border-radius:8px;
  transition:border-color .15s, background .15s;
}
#search::placeholder{color:var(--text-faint);}
#search:focus{border-color:var(--amber); background:var(--bg-card);}
.kbd-hint{
  position:absolute; right:34px; font-family:var(--font-mono); font-size:10px;
  color:var(--text-faint); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; pointer-events:none;
}
.search-clear{
  position:absolute; right:7px; width:20px; height:20px; border-radius:5px;
  background:transparent; border:none; color:var(--text-faint);
  display:none; align-items:center; justify-content:center;
}
.search-clear.show{display:flex;}
.search-clear:hover{color:var(--text); background:var(--bg-card-hover);}
.top-right{
  margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0;
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
}
.clock{font-size:15px; font-weight:600; color:var(--text-dim); letter-spacing:.06em;}
.session-timer{
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.03em;
  border:1px solid var(--border-soft); border-radius:6px; padding:3px 8px;
}
.session-timer.warn{color:var(--rose); border-color:var(--rose);}
.top-stats b{color:var(--text-dim); font-weight:600;}

.icon-btn{
  width:34px; height:34px; border-radius:7px; flex-shrink:0;
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:background .12s, color .12s, border-color .12s;
}
.icon-btn:hover{background:var(--bg-card-hover); color:var(--text);}
.icon-btn svg{width:17px; height:17px;}
.icon-btn .sun{display:none;}
[data-theme="light"] .icon-btn .sun{display:block;}
[data-theme="light"] .icon-btn .moon{display:none;}

.settings-wrap{position:relative;}
.settings-pop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:264px; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.34);
  padding:14px; display:none;
}
.settings-pop.open{display:block;}
.set-title{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em;
  color:var(--text-faint); text-transform:uppercase; margin:0 0 8px;
}
.set-title:not(:first-child){margin-top:16px;}
.set-row{display:flex; gap:7px;}
.set-btn{
  flex:1; background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text-dim); border-radius:7px; padding:8px 10px;
  font-size:12px; font-weight:500; font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .12s, color .12s, border-color .12s;
}
.set-btn:hover{background:var(--bg-card-hover); color:var(--text);}
.set-btn.active{border-color:var(--amber); color:var(--amber); background:var(--bg-card);}
.set-btn svg{width:14px; height:14px;}
.set-name-input{
  width:100%; background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text); border-radius:7px; padding:8px 10px;
  font-size:12.5px; font-family:var(--font-body);
}
.set-name-input:focus{border-color:var(--amber); outline:none;}
.set-hint{font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); margin:8px 0 0; line-height:1.45;}

@media (max-width:760px){ .top-stats{display:none;} .session-timer{display:none;} .brand-eyebrow{display:none;} .kbd-hint{display:none;} }
@media (max-width:560px){ .clock{display:none;} .brand-title{font-size:15px;} }

/* ===== ROW 2: category tabs ===== */
.tabs{
  flex-shrink:0; display:flex; gap:4px; padding:8px 14px 0;
  background:var(--bg-raised); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  position:relative; display:flex; align-items:center; gap:8px;
  background:transparent; border:none; color:var(--text-dim);
  padding:9px 14px 11px; border-radius:8px 8px 0 0; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.03em; text-transform:uppercase;
}
.tab:hover{color:var(--text); background:rgba(255,255,255,.025);}
.tab .tab-count{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  color:var(--text-faint); background:var(--bg-panel);
  border:1px solid var(--border-soft); border-radius:20px; padding:1px 7px;
}
.tab.active{color:var(--text);}
.tab.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--c,var(--amber));
}
.tab.active .tab-count{color:var(--c,var(--amber)); border-color:var(--c,var(--amber));}

/* ===== workspace ===== */
.workspace{flex:1; min-height:0; display:flex; overflow:hidden;}

/* folder rail */
.rail{
  width:246px; flex-shrink:0; min-height:0; overflow-y:auto;
  border-right:1px solid var(--border); padding:12px 10px 20px;
  background:var(--bg-rail);
}
.rail::-webkit-scrollbar{width:8px;}
.rail::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
.rail-label{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em;
  color:var(--text-faint); text-transform:uppercase; padding:0 8px 8px;
}
.rail-item{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text-dim);
  padding:7px 9px; border-radius:7px; font-size:12.8px; font-weight:500;
}
.rail-item:hover{background:var(--bg-panel); color:var(--text);}
.rail-item.active{background:var(--bg-card); color:var(--c,var(--amber));}
.rail-item .chev{
  width:11px; height:11px; flex-shrink:0; color:var(--text-faint);
  transition:transform .14s;
}
.rail-node.open > .rail-item .chev{transform:rotate(90deg);}
.rail-item .chev.leaf{visibility:hidden;}
.rail-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rail-count{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); flex-shrink:0;}
.rail-children{display:none; margin-left:11px; border-left:1px solid var(--border-soft); padding-left:2px;}
.rail-node.open > .rail-children{display:block;}
.rail-all{margin-bottom:8px; border:1px solid var(--border-soft); background:var(--bg-panel);}
.rail-all.active{border-color:var(--c,var(--amber));}
.rail-empty{
  padding:10px 8px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono);
}

/* mobile rail drawer */
.rail-toggle{
  display:none; align-items:center; gap:7px;
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim);
  font-size:12px; padding:7px 11px; border-radius:7px; margin:10px 14px 0;
  font-family:var(--font-mono);
}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none;}
.backdrop.show{display:block;}
@media (max-width:860px){
  .rail{
    position:fixed; top:0; left:0; height:100vh; width:280px; max-width:84vw; z-index:50;
    background:var(--bg); transform:translateX(-104%); transition:transform .2s ease;
    padding-top:18px;
  }
  .rail.open{transform:translateX(0);}
  .rail-toggle{display:flex;}
}

/* ===== main panel ===== */
.panel{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
.panel-head{
  flex-shrink:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 20px 10px;
}
.panel-title{
  font-family:var(--font-display); font-weight:800; font-size:24px;
  text-transform:uppercase; letter-spacing:.02em; margin:0;
}
.panel-sub{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
.panel-crumb{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); width:100%;}
.panel-crumb button{
  background:none; border:none; color:var(--text-dim); font-family:var(--font-mono);
  font-size:11px; padding:1px 3px; border-radius:3px;
}
.panel-crumb button:hover{color:var(--amber); background:var(--bg-panel);}
.panel-body{flex:1; min-height:0; overflow-y:auto; padding:2px 20px 26px;}
.panel-body::-webkit-scrollbar{width:9px;}
.panel-body::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}

/* sections */
.section{margin-bottom:6px;}
.section-header{
  display:flex; align-items:center; gap:9px; width:100%;
  background:transparent; border:none; text-align:left;
  padding:8px 2px 7px; border-bottom:1px solid var(--border-soft); margin-bottom:9px;
}
.section-header:hover .section-title{color:var(--text);}
.sec-chevron{width:12px; height:12px; color:var(--text-faint); transition:transform .14s; flex-shrink:0;}
.section.collapsed .sec-chevron{transform:rotate(-90deg);}
.section-title{
  font-family:var(--font-display); font-weight:700; font-size:14.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim);
}
.section-count{
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  margin-left:auto;
}
.section-body{padding-left:4px;}
.section .section .section-header{padding-left:10px;}
.section .section .section-body{padding-left:14px;}
.section.collapsed > .section-body{display:none;}

/* link grid: dense */
.link-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:8px; margin-bottom:14px;
}
.link-card{
  position:relative; display:flex; align-items:center; gap:9px;
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:7px; padding:8px 10px 8px 12px; overflow:hidden;
  transition:background .1s, border-color .1s;
}
.link-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c,var(--amber)); opacity:.85;
}
.link-card:hover{background:var(--bg-card-hover); border-color:var(--border);}
.link-favicon{
  width:20px; height:20px; border-radius:4px; flex-shrink:0;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.link-favicon img{width:13px; height:13px;}
.link-favicon span{font-family:var(--font-display); font-weight:800; font-size:10px; color:var(--c,var(--amber));}
.link-body{min-width:0; flex:1;}
.link-title{
  font-size:12.6px; font-weight:500; color:var(--text); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.link-domain{
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.link-path{
  font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.link-path b{color:var(--text-dim); font-weight:500;}

.link-request-btn{
  position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:5px;
  border:1px solid var(--border-soft); background:var(--bg-panel); color:var(--text-faint);
  font-size:11px; line-height:1; opacity:0; transition:opacity .12s, color .12s, border-color .12s;
}
.link-card:hover .link-request-btn{opacity:1;}
.link-request-btn:hover{color:var(--amber); border-color:var(--amber);}

.personal-card{padding-right:6px;}
.personal-card-link{display:flex; align-items:center; gap:9px; min-width:0; flex:1; text-decoration:none; color:inherit;}
.personal-card-actions{display:flex; gap:4px; flex-shrink:0;}
.personal-card-actions button{
  width:22px; height:22px; border-radius:5px; border:1px solid var(--border-soft); background:var(--bg-panel);
  color:var(--text-faint); font-size:11.5px; line-height:1; cursor:pointer;
}
.personal-card-actions button:hover{color:var(--text); border-color:var(--border);}

/* empty state */
.empty{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-mark{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; margin-bottom:8px;}
.empty-title{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text-dim); text-transform:uppercase;}

@media (max-width:560px){
  .link-grid{grid-template-columns:1fr;}
  .panel-title{font-size:19px;}
  .panel-head{padding:10px 14px 8px;}
  .panel-body{padding:2px 14px 20px;}
}

/* =========================================================================
   Anadidos: menu de usuario, boton admin, login y panel de administracion.
   Reutilizan las mismas variables y convenciones del bloque original.
   ========================================================================= */

/* ---- menu de usuario en la topbar ---- */
.user-wrap{position:relative;}
.user-btn{
  display:flex; align-items:center; gap:8px; height:34px;
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:0 10px 0 8px; font-family:var(--font-mono); font-size:11.5px;
  transition:background .12s, color .12s, border-color .12s;
}
.user-btn:hover{background:var(--bg-card-hover); color:var(--text);}
.user-avatar{
  width:20px; height:20px; border-radius:5px; flex-shrink:0;
  background:linear-gradient(155deg,#232b37,#161b23); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:11px;
}
.user-pop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:230px; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.34);
  padding:12px; display:none;
}
.user-pop.open{display:block;}
.user-pop-name{font-size:13px; font-weight:600; color:var(--text);}
.user-pop-role{
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.1em; margin-top:2px;
}
.user-pop-groups{display:flex; flex-wrap:wrap; gap:5px; margin:10px 0;}
.chip{
  font-family:var(--font-mono); font-size:9.5px; padding:2px 7px; border-radius:20px;
  background:var(--bg-panel); border:1px solid var(--border-soft); color:var(--text-dim);
}
.user-pop-divider{height:1px; background:var(--border-soft); margin:10px 0;}
.user-pop-link{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text-dim); font-size:12.5px;
  font-family:var(--font-body); padding:8px 6px; border-radius:7px;
}
.user-pop-link:hover{background:var(--bg-panel); color:var(--text);}
.user-pop-link svg{width:14px; height:14px; flex-shrink:0;}
.user-pop-link.danger:hover{color:var(--rose);}

.admin-link-btn{
  display:flex; align-items:center; gap:6px; height:34px;
  background:var(--bg-panel); border:1px solid var(--border); color:var(--amber);
  border-radius:7px; padding:0 12px; font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
}
.admin-link-btn:hover{background:var(--bg-card-hover);}
.admin-link-btn svg{width:14px; height:14px;}

/* ---- login ---- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); position:relative; z-index:1; padding:20px;
}
.login-card{
  width:100%; max-width:360px; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:12px; padding:28px 26px; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.login-title{
  font-family:var(--font-display); font-weight:800; font-size:20px;
  text-transform:uppercase; letter-spacing:.02em;
}
.login-eyebrow{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.15em;
  color:var(--text-faint); text-transform:uppercase; display:block;
}
.login-field{margin-bottom:14px;}
.login-field label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:6px;
}
.login-field input{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:10px 12px; font-size:13.5px; font-family:var(--font-body);
}
.login-field input:focus{border-color:var(--amber); outline:none;}
.login-submit{
  width:100%; background:var(--amber); color:#1a1400; border:none; border-radius:7px;
  padding:11px; font-weight:700; font-size:13px; margin-top:6px;
  text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-body);
}
.login-submit:hover{opacity:.92;}
.login-submit:disabled{opacity:.5; cursor:default;}
.login-error{
  background:rgba(226,141,157,.12); border:1px solid var(--rose); color:var(--rose);
  border-radius:7px; padding:9px 11px; font-size:12px; margin-bottom:14px; display:none;
}
.login-error.show{display:block;}

/* ---- panel de administracion ---- */
.admin-shell{height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; overflow:hidden;}
.admin-body{flex:1; min-height:0; display:flex; overflow:hidden;}
.admin-nav{
  width:210px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--bg-rail); padding:14px 10px; overflow-y:auto;
}
.admin-nav-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text-dim); border-radius:7px;
  padding:9px 10px; font-size:12.8px; font-weight:500; margin-bottom:2px;
}
.admin-nav-item:hover{background:var(--bg-panel); color:var(--text);}
.admin-nav-item.active{background:var(--bg-card); color:var(--amber);}
.admin-nav-item svg{width:15px; height:15px; flex-shrink:0;}
.nav-badge{
  margin-left:auto; background:var(--rose); color:#2a0f14; font-family:var(--font-mono);
  font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; line-height:1.5;
}
.request-card{
  border:1px solid var(--border); background:var(--bg-card); border-radius:8px;
  padding:12px 14px; margin-bottom:10px;
}
.request-card .rc-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.request-card .rc-bookmark{font-weight:700; font-size:13.5px;}
.request-card .rc-meta{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);}
.request-card .rc-message{font-size:13px; color:var(--text-dim); margin:8px 0;}
.request-card .rc-note{font-size:12.5px; color:var(--text-faint); border-left:2px solid var(--border); padding-left:8px; margin-top:8px;}
.request-card .rc-actions{display:flex; gap:8px; margin-top:10px;}
.status-pill{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 8px; border-radius:999px; border:1px solid var(--border);
}
.status-pill.pending{color:var(--amber); border-color:var(--amber);}
.status-pill.resolved{color:var(--green); border-color:var(--green);}
.status-pill.rejected{color:var(--rose); border-color:var(--rose);}
.admin-main{flex:1; min-width:0; overflow-y:auto; padding:20px 26px 40px;}
.admin-section{display:none;}
.admin-section.active{display:block;}
.admin-h1{
  font-family:var(--font-display); font-weight:800; font-size:22px;
  text-transform:uppercase; letter-spacing:.02em; margin:0 0 4px;
}
.admin-sub{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-bottom:18px;}
.admin-toolbar{display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:6px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-panel); color:var(--text-dim); padding:8px 13px; font-size:12.5px;
  font-weight:500; font-family:var(--font-body);
}
.btn:hover{background:var(--bg-card-hover); color:var(--text);}
.btn svg{width:14px; height:14px;}
.btn-primary{background:var(--amber); border-color:var(--amber); color:#1a1400; font-weight:700;}
.btn-primary:hover{opacity:.9;}
.btn-danger{color:var(--rose); border-color:var(--rose);}
.btn-danger:hover{background:rgba(226,141,157,.1);}
.btn-sm{padding:5px 9px; font-size:11.5px;}
.btn:disabled{opacity:.35; cursor:default; pointer-events:none;}

.admin-table-wrap{
  border:1px solid var(--border-soft); border-radius:9px; overflow:auto;
  background:var(--bg-card);
}
table.admin-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.admin-table th{
  text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); padding:10px 12px;
  border-bottom:1px solid var(--border-soft); white-space:nowrap;
}
.admin-table td{padding:9px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:var(--bg-card-hover);}
.row-actions{display:flex; gap:6px;}

.badge{
  font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:20px;
  border:1px solid var(--border-soft); color:var(--text-dim); display:inline-block;
}
.badge-admin{color:var(--amber); border-color:var(--amber);}
.badge-off{color:var(--text-faint);}
.badge-on{color:var(--green); border-color:var(--green);}

.tree-outline{border:1px solid var(--border-soft); border-radius:9px; background:var(--bg-card); padding:10px;}
.tree-row{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:12.6px;
}
.tree-row:hover{background:var(--bg-panel);}
.tree-row .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--c,var(--amber));}
.tree-row .tree-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tree-row .tree-count{font-family:var(--font-mono); font-size:10px; color:var(--text-faint);}
.tree-children{margin-left:18px; border-left:1px solid var(--border-soft); padding-left:6px;}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:none; align-items:flex-start; justify-content:center; padding:6vh 20px; overflow-y:auto;
}
.modal-backdrop.show{display:flex;}
.modal{
  width:100%; max-width:460px; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:12px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.modal h2{
  font-family:var(--font-display); font-weight:800; font-size:18px; text-transform:uppercase;
  margin:0 0 16px;
}
.form-row{margin-bottom:12px;}
.form-row label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:5px;
}
.form-row input[type=text], .form-row input[type=password], .form-row input[type=email],
.form-row input[type=url], .form-row input[type=number], .form-row textarea, .form-row select{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:9px 11px; font-size:12.8px; font-family:var(--font-body);
}
.form-row textarea{resize:vertical; min-height:60px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--amber); outline:none;}
.checkbox-grid{display:flex; flex-wrap:wrap; gap:8px;}
.checkbox-pill{
  display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:20px;
  padding:5px 10px 5px 8px; font-size:11.5px; color:var(--text-dim); cursor:pointer;
}
.checkbox-pill input{margin:0;}
.checkbox-pill.checked{border-color:var(--amber); color:var(--amber);}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
.color-swatch-row{display:flex; gap:7px;}
.color-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer;
}
.color-swatch.selected{border-color:var(--text);}
.color-swatch-inherit{
  background:var(--bg-panel); border:2px dashed var(--border-soft); color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.color-swatch-inherit.selected{border-style:solid; border-color:var(--text); color:var(--text);}

.toast{
  position:fixed; bottom:20px; right:20px; z-index:100; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:8px; padding:11px 16px; font-size:12.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.3); display:none;
}
.toast.show{display:block;}
.toast.error{border-color:var(--rose); color:var(--rose);}
.toast.ok{border-color:var(--green); color:var(--green);}

.hint-text{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); line-height:1.5;}
@media (max-width:860px){
  /* Mismo umbral que .rail-toggle (ver arriba): por debajo de 860px el boton
     "Menu" se hace visible y el nav pasa a ser un cajon deslizante fixed;
     por encima, el nav ya es una barra lateral normal y el boton se oculta. */
  .admin-nav{
    position:fixed; top:0; left:0; height:100vh; width:230px; z-index:60;
    transform:translateX(-104%); transition:transform .2s ease; background:var(--bg);
  }
  .admin-nav.open{transform:translateX(0);}
}