:root{
  --bg:#0a0f1a; --panel:#0f1724; --card:#0b1220; --muted:#9aa4b2; --txt:#e6f6f5; --accent:#00fff8;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --info:#3b82f6; --border:rgba(255,255,255,.10);
  --sidebar-w: 268px; --sidebar-w-collapsed: 74px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(80% 120% at 20% -10%, rgba(0,255,248,.06), transparent 40%),
    linear-gradient(180deg,#081221,#0a1426);
  color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
}

/* ===== Header base (PC se mantiene tal cual) ===== */
.app-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0)) 14px 10px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.22);backdrop-filter:blur(8px) saturate(120%);
  position:sticky;top:0;z-index:50
}

/* ===== Header móvil (sólo si .mobile-head) ===== */
.app-head.mobile-head{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  grid-template-areas:"brand tools";
  padding:calc(8px + env(safe-area-inset-top,0)) 10px 8px 10px;
  gap:8px;
}
.app-head.mobile-head .brand{ grid-area: brand; justify-self:start; }
.app-head.mobile-head .toolbar{ grid-area: tools; justify-self:end; justify-content:end; }
.hidden-mobile{ display:none !important; }

/* Icono hamburger “glass” */
.iconbtn{
  -webkit-tap-highlight-color: transparent;
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
  border:1px solid var(--border);
  color:var(--txt);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.28);
}
.iconbtn:hover{ border-color: rgba(255,255,255,.35); }
.iconbtn.secondary{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)); }
.mobile-menu{ margin-right:2px; }

/* Marca */
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:34px;height:34px;border-radius:10px;background:
    radial-gradient(circle at 30% 30%,var(--accent),transparent 60%),#081221;
  display:grid;place-items:center;font-weight:900;color:#001619
}
.brand h1{
  font-size:15px;margin:0;color:var(--txt);letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68vw;
} 
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ===== Botones base (PC) ===== */
.btn{background:var(--accent);color:#041419;border:none;padding:9px 12px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;color:#a7b2bf;border:1px solid var(--border);font-weight:600}
.btn.ok{background:var(--ok);color:#00170a}
.btn.danger{background:var(--danger)}
.btn.iconbtn{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:8px;border-radius:12px}

/* ===== Layout ===== */
.app{display:grid;grid-template-columns: var(--sidebar-w) 1fr; gap:0; min-height:calc(100vh - 56px)}
.sidebar{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
  position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;z-index:30;
  transition: width .18s ease, transform .24s cubic-bezier(.2,.8,.2,1);
  width: var(--sidebar-w);
}
.sidebar.collapsed{ width: var(--sidebar-w-collapsed); }
.view{padding:14px}

/* ===== Cards / Forms ===== */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
  border:1px solid var(--border);border-radius:14px;padding:12px
}
h2{font-size:14px;margin:4px 0 10px;color:var(--accent)}
label{font-size:12px;color:var(--muted);display:block;margin:8px 0 6px}
input,select,textarea{
  width:100%;background:#0b1322;border:1px solid var(--border);color:var(--txt);
  border-radius:12px;padding:10px 12px;font-size:14px
}
textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ===== Sidebar items ===== */
.menu-wrap{ height:100%; }
.menu{
  display:flex;flex-direction:column;padding:6px 8px 18px 8px;gap:4px;
}
.menu-head{display:flex;justify-content:flex-end;align-items:center;padding:4px 6px 8px}
.ghost-toggle{
  background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--muted);
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer
}

/* En móvil no mostramos el colapso */
.sidebar.drawer .menu-head{ display:none; }

/* Items + ripple */
.menu .item{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:14px 12px;border-radius:14px;cursor:pointer;color:#e3f3f4;
  background:transparent;border:none;text-align:left;
  transition: background .15s ease, transform .04s ease;
  -webkit-tap-highlight-color: transparent;
  overflow:hidden;
  --rx:50%; --ry:50%;
}
.menu .item::after{
  content:"";position:absolute;inset:0;opacity:0;
  background: radial-gradient(120px 120px at var(--rx) var(--ry), rgba(255,255,255,.12), transparent 60%);
  transition: opacity .25s ease;
}
.menu .item:hover::after{ opacity:1; }
.menu .item:active{ transform: translateY(1px) scale(.998); }

.icon{
  width:30px;height:30px;border:1px solid var(--border);border-radius:11px;display:grid;place-items:center;
  color:#d3ebec;flex:0 0 30px;background:#0b1322;font-size:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.label{transition:opacity .2s ease;font-weight:600;letter-spacing:.2px;color:#dbf7f6}
.sidebar.collapsed .label{opacity:0;pointer-events:none;width:0;overflow:hidden}
.sidebar.collapsed .menu .item{justify-content:center}
.sidebar.collapsed .menu-head{justify-content:center}

.menu .item:hover{background:rgba(255,255,255,.05)}
.menu .item.active{
  background:color-mix(in oklab, var(--accent) 17%, transparent);
  color:var(--accent);
  font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent)
}
.menu .item.active .label{ color: var(--accent); }
.menu .item.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px;
  background: linear-gradient(180deg, var(--accent), rgba(0,255,248,0));
}
.menu .item:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

/* ===== Drawer “glass” (móvil) ===== */
.app.mobile{ grid-template-columns: 1fr; }

.sidebar.drawer{
  position: fixed; top: 56px; left: 0; height: calc(100vh - 56px);
  width: min(86vw, 340px);
  transform: translateX(-108%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid var(--border);
  border-top-right-radius: 18px; border-bottom-right-radius: 18px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
  will-change: transform;
  transition: transform .28s cubic-bezier(.22,.85,.25,1);
  z-index: 30;

  /* Para colocar el footer abajo */
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar.drawer .menu-wrap{ flex:1 1 auto; overflow:auto; }
.sidebar.drawer.open{ transform: translateX(0); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 12px 10px; position:sticky; top:0; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.drawer-head .title{
  font-weight:800; color:var(--accent); letter-spacing:.2px; font-size:13px;
  text-transform: uppercase;
}
.drawer-scrim{
  position: fixed; inset: 0; background: rgba(0,0,0,0.0);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 25;
}
.drawer-scrim.show{ background: rgba(0,0,0,.45); opacity: 1; pointer-events: auto; }

/* ===== Footer con botón de Cerrar sesión (ahora rojo) ===== */
.drawer-footer{
  display:none; /* no mostrar por defecto */
}
.sidebar.drawer .drawer-footer{
  display:block;
  position:sticky; bottom:0; left:0; right:0;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom,0));
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.28));
  backdrop-filter: blur(8px) saturate(120%);
  z-index:2;
}

/* Botón rojo con buen contraste + focus ring accesible */
.logout-btn{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  background: color-mix(in oklab, var(--danger) 26%, rgba(255,255,255,.02));
  color:#fff; font-weight:800; letter-spacing:.2px;
  border:1px solid color-mix(in oklab, var(--danger) 55%, rgba(255,255,255,.10));
  cursor:pointer;
  transition: box-shadow .18s ease, transform .04s ease, background .18s ease, border-color .18s ease;
}
.logout-btn .ico{ display:grid; place-items:center; width:22px; height:22px; }
.logout-btn .ico svg{ stroke: currentColor; }

.logout-btn:hover{
  background: color-mix(in oklab, var(--danger) 34%, rgba(255,255,255,.02));
  box-shadow: 0 8px 26px rgba(239,68,68,.25), inset 0 0 0 1px rgba(239,68,68,.22);
  border-color: color-mix(in oklab, var(--danger) 70%, rgba(255,255,255,.10));
}
.logout-btn:active{ transform: translateY(1px) scale(.998); }

.logout-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(239,68,68,.45),
    0 8px 26px rgba(239,68,68,.25),
    inset 0 0 0 1px rgba(239,68,68,.22);
}

.logout-btn:disabled{
  opacity:.6; cursor:not-allowed;
}

/* ===== (MENÚ INFERIOR ELIMINADO) ===== */

/* ===== Responsivo ===== */
@media(max-width:1200px){
  .row{grid-template-columns:1fr}
  .app{grid-template-columns: 84px 1fr}
}
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }
}

/* Accesibilidad / motion */
@media (prefers-reduced-motion: reduce){
  .sidebar.drawer{ transition: none; }
}

/* Utilidades */
.tiny{font-size:12px;color:var(--muted)}
.hidden{display:none!important}

/* === Ajustes para logo como imagen === */
.logo.is-image{
  background: transparent;
  color: inherit;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}
.logo.is-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}