/* public/assets/theme.css */

/* ===== Tokens de color ===== */
:root{
  --brand:#0f4cbd;            /* azul fuerte */
  --brand-600:#0b3fa0;
  --bg:#f3f4f6;               /* fondo del área principal */
  --sidebar-bg:#0b1220;       /* fondo sidebar */
  --sidebar-hover:#1f2937;
  --text:#111827;
  --muted:#6b7280;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 78px;
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); }

/* ===== App shell ===== */
.app-shell { display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: #e5e7eb;
  padding: 16px 14px;                   /* padding uniforme */
  position: sticky; top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: width .25s ease, transform .25s ease, left .25s ease;
  z-index: 1040;
  display: flex; flex-direction: column; /* FLEX COLUMN */
  overflow: hidden;
}

/* Encabezado brand — centrado */
.sidebar .brand {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:10px;
}
.sidebar .brand img { width:28px; height:28px; object-fit:contain; }

/* Contenedor de navegación con scroll, ocupa el intermedio */
.sidebar .nav-wrap {
  flex: 1 1 auto;                       /* empuja el footer al fondo */
  overflow-y: auto;
  margin-top:.75rem;
  padding-right: 2px;                    /* evita scroll-bar tapando el hover */
}

/* Items del menú */
.sidebar a.nav-item{
  display:flex; align-items:center; gap:.7rem;
  color:#cbd5e1; text-decoration:none;
  padding:.6rem .75rem; border-radius:.6rem;
}
.sidebar a.nav-item:hover { background: var(--sidebar-hover); color:#fff; }
.sidebar a.active { background: #111827; color:#fff; }

/* Colapsado desktop */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar .label { opacity:0; width:0; margin:0; white-space:nowrap; overflow:hidden; }

/* Footer diseñador — SIEMPRE al fondo, centrado */
.sidebar .designer{
  margin-top:auto;                       /* empuja al final */
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;    /* centrado del bloque */
  text-align:center;
}
.sidebar .designer .rowx{
  display:flex; align-items:center; gap:.6rem; justify-content:center;
}
.sidebar .designer img{
  width:36px; height:36px; border-radius:8px; object-fit:cover;
  background:#ffffff14; padding:4px;
}
.sidebar .designer a{ color:#dbeafe; text-decoration:none; }
.sidebar .designer a:hover{ text-decoration:underline; }

/* ===== Main ===== */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; background:#fff; border-bottom:1px solid #e5e7eb;
  position:sticky; top:0; z-index:1030;
}
.topbar .left { display:flex; align-items:center; gap:.75rem; }
.topbar .btn-ghost{ border:none; background:transparent; padding:.45rem .6rem; border-radius:10px; }
.topbar .btn-ghost:hover{ background:#f3f4f6; }
.content{ padding:1.25rem; }

/* ===== Overlay móvil ===== */
@media (max-width: 991.98px){
  .sidebar { position: fixed; left:0; top:0; transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0%); }
  .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:1035; display:none; }
  body.sidebar-open .overlay { display:block; }
}

/* ===== Utilitarios ===== */
.badge-soft{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:.14rem .45rem; border-radius:999px; }

/* ===== Login BG ===== */
.login-bg{
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(15,76,189,.12), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(15,76,189,.10), transparent 60%),
    var(--bg);
}

/* ===== Login Cards centradas ===== */
.card-rounded{ border:0; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-left{ background: var(--brand); color:#fff; }
.card-right{ background:#ffffff; color:#111827; }
.logo-box{
  display:flex; align-items:center; justify-content:center;
  min-height: 180px; border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px dashed rgba(255,255,255,.35);
}
.logo-box img{ max-height:90px; width:auto; display:block; }
.btn-primary{ background: var(--brand-600); border-color: var(--brand-600); }
.btn-primary:hover{ background:#0a3a94; border-color:#0a3a94; }
.input-group .btn { border-color:#e5e7eb; }