/* ============================================
   LA LLORONA - LAYOUT CSS
   Login, Sidebar, Main, Topbar
   Light Theme Enterprise
   ============================================ */

/* ── LOGIN ── */
#ls {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; background: #FAFAF8;
}
.ll-title {
  font-size: 44px; font-weight: 900; color: #1B6B3A;
  letter-spacing: -2px; margin-bottom: 4px;
}
.ll-sub {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: #7A7A7A; margin-bottom: 36px;
}
.lcard {
  background: #FFFFFF; border: 1px solid #E0E0DA; border-radius: 16px;
  padding: 28px 32px; width: 320px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.lcard h2 { font-size: 16px; font-weight: 800; margin-bottom: 18px; color: var(--t1); }
.lcard label { color: #7A7A7A; }
.lcard input, .lcard select {
  background: #F5F5F1; border-color: #E0E0DA; color: #1A1A1A; border-radius: 8px;
}

/* ── APP SHELL ── */
#ap { display: none; height: 100vh; overflow: hidden; }
#wrap { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ── */
.sb {
  width: 240px; min-width: 240px; background: #FFFFFF;
  border-right: 1px solid #E0E0DA;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
.sb-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid #E0E0DA;
}
.sb-logo .n {
  font-size: 22px; font-weight: 900; color: #1B6B3A; letter-spacing: -.5px;
}
.sb-logo .t {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--t4); margin-top: 3px;
}

/* User badge */
.sb-u {
  padding: 12px 14px;
  border-bottom: 1px solid #E0E0DA;
  display: flex; align-items: center; gap: 10px;
}
.av {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(27, 107, 58, .08);
  border: 2px solid rgba(27, 107, 58, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #1B6B3A; flex-shrink: 0;
}

/* Nav container */
.sb-nav { flex: 1; overflow-y: auto; padding: 10px 10px 6px; }
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .1); border-radius: 3px; }

/* Section labels */
.ns {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #B0B0B0; padding: 14px 8px 5px; font-weight: 700;
}
.ns-nom {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 14px 8px 5px; font-weight: 700; color: rgba(27, 107, 58, .5);
}
/* Color del header por seccion (paridad prototipo) */
.ns-principal { color: rgba(27, 107, 58, .55) !important; }
.ns-ingresos  { color: rgba(21, 128, 61, .55) !important; }
.ns-egresos   { color: rgba(30, 58, 95, .55) !important; }
.ns-compras   { color: rgba(180, 83, 9, .55) !important; }
.ns-nomina    { color: rgba(126, 34, 206, .55) !important; }
.ns-reportes  { color: rgba(67, 56, 202, .55) !important; }
.ns-gestion   { color: rgba(71, 85, 105, .55) !important; }
.ns-ventas    { color: rgba(21, 128, 61, .55) !important; }
.ns-clientes  { color: rgba(67, 56, 202, .55) !important; }
.ns-marketing { color: rgba(126, 34, 206, .55) !important; }
.ns-socios    { color: rgba(161, 98, 7, .55) !important; }
.ns-panel     { color: rgba(161, 98, 7, .55) !important; }
.ns-ayuda     { color: rgba(192, 57, 43, .6) !important; }

/* Nav items */
.ni {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; color: var(--t3);
  font-size: 13px; font-weight: 600;
  border-radius: 9px; margin-bottom: 2px; border: 1px solid transparent;
  transition: all .15s; user-select: none; position: relative;
}
.ni-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: rgba(0, 0, 0, .03); transition: all .15s;
}
.ni-label { flex: 1; line-height: 1.2; }
.ni:hover { background: rgba(0, 0, 0, .03); color: var(--t2); border-color: rgba(0, 0, 0, .06); }
.ni:hover .ni-icon { background: rgba(0, 0, 0, .05); }

/* Active states — color por seccion (paridad prototipo) */
.ni.on { font-weight: 800; }

.ni-principal:hover .ni-icon { background: rgba(27, 107, 58, .1); }
.ni-principal.on { color: #1B6B3A; background: rgba(27, 107, 58, .055); border-left: 2px solid #1B6B3A; }
.ni-principal.on .ni-icon { background: rgba(27, 107, 58, .13); }

.ni-ingresos:hover .ni-icon { background: rgba(21, 128, 61, .1); }
.ni-ingresos.on { color: #15803D; background: rgba(21, 128, 61, .055); border-left: 2px solid #15803D; }
.ni-ingresos.on .ni-icon { background: rgba(21, 128, 61, .13); }

.ni-egresos:hover .ni-icon { background: rgba(30, 58, 95, .1); }
.ni-egresos.on { color: #1E3A5F; background: rgba(30, 58, 95, .055); border-left: 2px solid #1E3A5F; }
.ni-egresos.on .ni-icon { background: rgba(30, 58, 95, .13); }

.ni-compras:hover .ni-icon { background: rgba(180, 83, 9, .1); }
.ni-compras.on { color: #B45309; background: rgba(180, 83, 9, .055); border-left: 2px solid #B45309; }
.ni-compras.on .ni-icon { background: rgba(180, 83, 9, .13); }

.ni-nomina:hover .ni-icon { background: rgba(126, 34, 206, .1); }
.ni-nomina.on { color: #7E22CE; background: rgba(126, 34, 206, .055); border-left: 2px solid #7E22CE; }
.ni-nomina.on .ni-icon { background: rgba(126, 34, 206, .13); }

.ni-reportes:hover .ni-icon { background: rgba(67, 56, 202, .1); }
.ni-reportes.on { color: #4338CA; background: rgba(67, 56, 202, .055); border-left: 2px solid #4338CA; }
.ni-reportes.on .ni-icon { background: rgba(67, 56, 202, .13); }

.ni-gestion:hover .ni-icon { background: rgba(71, 85, 105, .1); }
.ni-gestion.on { color: #475569; background: rgba(71, 85, 105, .055); border-left: 2px solid #475569; }
.ni-gestion.on .ni-icon { background: rgba(71, 85, 105, .13); }

.ni-ventas:hover .ni-icon { background: rgba(21, 128, 61, .1); }
.ni-ventas.on { color: #15803D; background: rgba(21, 128, 61, .055); border-left: 2px solid #15803D; }
.ni-ventas.on .ni-icon { background: rgba(21, 128, 61, .13); }

.ni-clientes:hover .ni-icon { background: rgba(67, 56, 202, .1); }
.ni-clientes.on { color: #4338CA; background: rgba(67, 56, 202, .055); border-left: 2px solid #4338CA; }
.ni-clientes.on .ni-icon { background: rgba(67, 56, 202, .13); }

.ni-marketing:hover .ni-icon { background: rgba(126, 34, 206, .1); }
.ni-marketing.on { color: #7E22CE; background: rgba(126, 34, 206, .055); border-left: 2px solid #7E22CE; }
.ni-marketing.on .ni-icon { background: rgba(126, 34, 206, .13); }

.ni-socios:hover .ni-icon { background: rgba(161, 98, 7, .1); }
.ni-socios.on { color: #A16207; background: rgba(161, 98, 7, .055); border-left: 2px solid #A16207; }
.ni-socios.on .ni-icon { background: rgba(161, 98, 7, .13); }

.ni-panel:hover .ni-icon { background: rgba(161, 98, 7, .1); }
.ni-panel.on { color: #A16207; background: rgba(161, 98, 7, .055); border-left: 2px solid #A16207; }
.ni-panel.on .ni-icon { background: rgba(161, 98, 7, .13); }

/* Ayuda: trato especial del prototipo (borde rojo punteado) */
.ni-ayuda { background: rgba(192, 57, 43, .025); border: 1px dashed rgba(192, 57, 43, .2); border-left: 3px solid rgba(192, 57, 43, .35); margin-top: 2px; }
.ni-ayuda:hover { background: rgba(192, 57, 43, .06); border-color: rgba(192, 57, 43, .35); border-left-color: #C0392B; }
.ni-ayuda .ni-icon { background: rgba(192, 57, 43, .08); color: #C0392B; }
.ni-ayuda:hover .ni-icon { background: rgba(192, 57, 43, .14); }
.ni-ayuda.on { color: #C0392B; background: rgba(192, 57, 43, .08); border: 1px solid rgba(192, 57, 43, .3); border-left: 3px solid #C0392B; }
.ni-ayuda.on .ni-icon { background: rgba(192, 57, 43, .16); }

/* Footer */
.sb-ft { padding: 10px 12px; border-top: 1px solid #E0E0DA; }
.out-btn {
  width: 100%; background: rgba(0, 0, 0, .02);
  border: 1px solid #E0E0DA;
  color: var(--t3); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 8px; font-weight: 600; transition: all .15s;
}
.out-btn:hover {
  background: rgba(192, 57, 43, .06);
  border-color: rgba(192, 57, 43, .2); color: var(--re);
}

/* ── MAIN AREA ── */
.main {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: clip;
}
.topbar {
  height: 52px; background: #FFFFFF;
  border-bottom: 1px solid #E0E0DA;
  display: flex; align-items: center; padding: 0 22px; gap: 12px;
  flex-shrink: 0; box-shadow: 0 1px 0 var(--bd);
}
.topbar h1 { font-size: 15px; font-weight: 800; flex: 1; color: #1A1A1A; }
.con {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  padding: 20px 22px; background: #FAFAF8;
}
.con::-webkit-scrollbar { width: 5px; }
.con::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 5px; }
.con::-webkit-scrollbar-track { background: transparent; }

/* ── VIEWS ── */
.view { display: none; }
.view.on { display: block; }

/* ── MES ACTIVO SYSTEM ── */
.sub-mes { font-weight: 800; }
#mes-picker-panel {
  position: fixed; top: 52px; right: 160px;
  background: var(--s2); border: 1.5px solid var(--bd); border-radius: 12px;
  padding: 16px 20px; z-index: 8000; min-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5); display: none;
}
#mes-picker-panel.open { display: block; }
.mes-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px;
  font-size: 13px; font-weight: 600; color: var(--t2); transition: background .15s;
}
.mes-item:hover { background: var(--s3); }
.mes-item.active {
  background: rgba(27, 107, 58, .06); border: 1px solid rgba(27, 107, 58, .2);
  color: #1B6B3A; font-weight: 800;
}
.mes-item .mes-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 700; }
.mes-item .mes-badge.activo { background: rgba(21, 128, 61, .1); color: var(--gr); }
.mes-item .mes-badge.hist { background: rgba(30, 58, 95, .08); color: var(--bl); }

/* Hist banner */
#hist-banner {
  display: none;
  background: rgba(180, 83, 9, .05); border: 1.5px solid rgba(180, 83, 9, .18);
  border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 700;
  color: var(--am); margin-bottom: 12px; text-align: center;
  position: sticky; top: 0; z-index: 100;
}

/* Topbar badges */
#mb {
  background: rgba(27, 107, 58, .06); border: 1.5px solid rgba(27, 107, 58, .2);
  color: #1B6B3A; padding: 7px 16px; border-radius: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
#rb {
  background: rgba(27, 107, 58, .06); border: 1.5px solid rgba(27, 107, 58, .2);
  color: #1B6B3A; padding: 7px 16px; border-radius: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .3px; cursor: default;
}

/* ── HAMBURGUESA (oculta en desktop; visible solo en el @media movil) ── */
.nav-toggle { display: none; }
/* Overlay del drawer (inerte en desktop) */
.nav-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  z-index: 8500; display: none;
}

/* ============================================================
   RESPONSIVE ADITIVO (movil/tablet). Solo bajo 768px.
   Desktop (>=769px) queda intacto.
   ============================================================ */
@media (max-width: 768px) {
  /* alto natural; el scroll sigue en .con */
  #ap, #wrap { height: 100dvh; }

  /* SIDEBAR -> DRAWER off-canvas */
  .sb {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 9000;
    transform: translateX(-100%); transition: transform .22s ease;
    height: 100dvh;
  }
  #ap.nav-open .sb { transform: translateX(0); box-shadow: 2px 0 24px rgba(0, 0, 0, .25); }
  #ap.nav-open .nav-overlay { display: block; }

  /* Hamburguesa en el topbar */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid var(--bd); border-radius: 9px;
    background: var(--s2); color: var(--t1); font-size: 18px; cursor: pointer;
    flex-shrink: 0; padding: 0;
  }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar h1 { font-size: 14px; }
  #rb { display: none; }            /* el rol ya se ve en el drawer */
  .con { padding: 14px 12px; }

  /* Offsets fijos calibrados al ancho del sidebar desktop */
  #hist-banner { left: 0 !important; right: 0; }
  #mes-picker-panel { right: 12px; left: 12px; min-width: 0; top: 56px; }
}