/* ============================================================
   APP.CSS — Base, variables y layout general
   Fase 1 · Reestructuración Eventos Dean & Dennys
   ============================================================ */
:root{
  --bg:#F0F8F4;
  --card:#FFFFFF;
  --line:#CFE8D7;
  --txt:#143626;
  --muted:#6F7F75;

  /* Verde institucional Dean & Dennys */
  --primary:#007C38;
  --primary-dark:#005C24;
  --primary-deep:#00451B;
  --primary-hover:#006D31;
  --primary-mid:#149149;
  --primary-light:#BCE4C8;
  --primary-pale:#F0F8F4;
  --primary-soft:#E7F5EC;
  --accent:#00B058;

  /* Compatibilidad con componentes existentes */
  --purple:#007C38;
  --blue:#149149;
  --green:#00B058;
  --amber:#D5A43D;
  --teal:#149149;
  --red:#D95353;

  --shadow:0 1px 3px rgba(0,92,36,.06),0 1px 2px rgba(0,92,36,.035);
  --shadow-md:0 8px 24px rgba(0,92,36,.08);
  --sidebar-w:220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ── SHELL: sidebar fijo + header fijo + contenido central que cambia ── */
#app-shell{display:none;grid-template-columns:var(--sidebar-w) 1fr;height:100vh}
#app-shell.on{display:grid}

.app-sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto}
.app-sidebar .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px}
.app-sidebar .brand b{font-size:15px;font-weight:800}
.app-sidebar .brand span{font-size:9.5px;color:var(--muted);display:block}

.app-main{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.app-header{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:16px}
.app-header h1{font-size:19px;font-weight:800}
.app-header .header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.app-header .user-chip{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.app-header .user-chip b{color:var(--txt)}

#content-main{overflow-y:auto;padding:22px 26px}

/* ── NAV LATERAL PRINCIPAL ── */
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13px;width:100%;text-align:left;margin-bottom:2px}
.nav-item:hover{background:#eef1f6;color:var(--txt)}
.nav-item.active{background:#fff5f5;color:var(--red)}
.nav-item svg{width:17px;height:17px;flex-shrink:0}
.nav-sep{height:1px;background:var(--line);margin:10px 4px}
.nav-group-lbl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:10px 12px 4px}

/* ── SUBNAV interna de un módulo (ej. dentro de un evento) ── */
.subnav{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.subnav button{padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.subnav button:hover{background:#eef1f6;color:var(--txt)}
.subnav button.active{background:var(--red);color:#fff}

/* ── LOGIN ── */
#view-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:34px;width:340px}
.login-box h1{font-size:19px;font-weight:800;margin-bottom:4px}
.login-box p{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.login-box label{font-size:11.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
.login-box .field{margin-bottom:14px}
.login-box input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.login-box .btn-primary{width:100%;margin-top:6px}
.login-err{font-size:12px;color:var(--red);margin-top:10px;display:none}

/* ── ESTADOS UTILITARIOS ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state svg{width:38px;height:38px;margin-bottom:10px;opacity:.5}
.loading-state{text-align:center;padding:60px 20px;color:var(--muted);font-size:13px}
.module-title-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.module-title-row h2{font-size:18px;font-weight:800}
.module-title-row .module-sub{font-size:12px;color:var(--muted)}


/* ===== Sidebar institucional — VERDE DEAN ===== */
:root{
  --dean-green:#007C38;
  --dean-green-2:#005C24;
  --dean-green-soft:#149149;
}

.app-sidebar{
  background:linear-gradient(180deg,#007C38 0%,#007C38 56%,#005C24 100%);
  border-right:0;
  color:#fff;
  box-shadow:8px 0 26px rgba(0,92,36,.08);
}
.app-sidebar .brand{
  border-bottom:1px solid rgba(255,255,255,.13);
  margin-bottom:10px;
}
.app-sidebar .brand b{color:#fff}
.app-sidebar .brand span{color:rgba(255,255,255,.68)}
.app-sidebar .nav-item{color:rgba(255,255,255,.82)}
.app-sidebar .nav-item:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}
.app-sidebar .nav-item.active{
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:inset 3px 0 0 #00B058;
}
.app-sidebar .nav-item svg{color:currentColor}
.app-sidebar .nav-sep{background:rgba(255,255,255,.12)}
.app-sidebar .nav-group-lbl{
  color:rgba(255,255,255,.50);
  font-weight:800;
  letter-spacing:.65px;
}

/* Superficies generales */
.app-header{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #CFE8D7;
  box-shadow:0 1px 0 rgba(0,92,36,.025);
}
#content-main{background:#F0F8F4}
.module-title-row h2{color:#005C24}
.module-sub{color:#6F7F75}

/* V18.20 · menú mobile */
.sidebar-backdrop{display:none}