/* ============================================================
 * responsive.css — Media queries (mobile, tablet, print)
 * ------------------------------------------------------------
 * RESPONSABILIDAD:
 *   Centraliza todas las reglas que dependen de tamaño de
 *   pantalla o del medio (impresión):
 *
 *     - max-width: 900px  → tablet (sidebar minimizado)
 *     - max-width: 768px  → mobile (hamburger menu, sidebar
 *                            con drawer, layout 1 columna)
 *     - max-width: 480px  → mobile chico
 *     - @media print      → reglas globales de impresión
 *
 * Reglas print específicas de Cta Corriente viven en
 * modulos.css (cc-print-mode).
 *
 * Si el dashboard crece a más breakpoints, agregalos acá
 * en orden de mayor a menor ancho.
 * ============================================================ */

/* =================== HAMBURGER + DRAWER (mobile sidebar) =================== */
.hamburger-btn{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:20px;color:var(--text);line-height:1;flex-shrink:0}
/* El ☰ pasó a ser un <svg> de Lucide; hereda el tamaño del font-size. */
.hamburger-btn svg{width:1em;height:1em;display:block}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;transition:opacity .25s}

/* =================== TABLET ( ≤ 900px ) =================== */
/* Sidebar colapsado a íconos, ocultamos textos, KPIs en 2 columnas. */
/* FIX 2026-09-17: el colapso a iconos vale SOLO en tablet (769-900px).
   Antes arrancaba en 900px y, como las media queries se acumulan, seguia
   aplicando por debajo de 768px — donde el sidebar es un DRAWER y tiene que
   verse completo. Ademas `.nav-item span:not(.icon)` tiene mas especificidad
   que `.nav-item span`, asi que la regla del drawer no podia ganarle y los
   nombres de las secciones quedaban ocultos. Acotando el rango, no hay
   pelea de especificidad que resolver. */
@media(min-width:769px) and (max-width:900px){
  .sidebar{width:60px}
  .sidebar-logo p,.nav-item span:not(.icon),.sidebar-period,.nav-section,.user-info,.logout-btn{display:none}
  .nav-item{justify-content:center;padding:10px 0}
  .nav-item .icon{font-size:17px;width:auto}
  .main{margin-left:60px}
}
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3,.grid-13{grid-template-columns:1fr}
}

/* =================== MOBILE ( ≤ 768px ) =================== */
/* Sidebar como drawer lateral, todo a 1 columna, modales fullscreen. */
@media(max-width:768px){
  .hamburger-btn{display:flex;align-items:center;justify-content:center}
  /* En mobile el sidebar es un DRAWER completo, con sus textos: el colapso a
     iconos ahora esta acotado a 769-900px y no llega hasta aca. */
  .sidebar{width:var(--sidebar);transform:translateX(-100%);transition:transform .25s ease;z-index:200}
  .sidebar.mob-open{transform:translateX(0)!important}
  .sidebar-overlay{display:block;opacity:0;pointer-events:none}
  .sidebar-overlay.mob-open{opacity:1;pointer-events:all}
  .main{margin-left:0!important}
  .content{padding:10px 8px}
  .topbar{padding:10px 12px;gap:8px}
  .topbar h1{font-size:13px}
  .topbar-right{gap:5px}
  .topbar-right .btn-sm{font-size:10px;padding:4px 7px}
  #btn-pres-mode,#topbar-ev-badge{display:none!important}
  .kpi-grid,div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  .card{padding:12px 10px}
  #crm-board{flex-direction:column!important;overflow-x:hidden!important}
  .crm-col{min-width:unset!important;width:100%!important}
  #crm-kpis{grid-template-columns:repeat(2,1fr)!important}
  #crm-alarmas-banner .flex-wrap{flex-direction:column}
  .lead-modal-overlay,.lead-detail-overlay{padding:0!important;align-items:flex-start!important}
  .lead-modal,.lead-detail{max-width:100%!important;width:100%!important;min-height:100svh;border-radius:0!important;padding:16px 14px!important;margin:0!important}
  .lm-grid{grid-template-columns:1fr!important}
  .lm-group.full{grid-column:span 1!important}
  .subtabs{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .subtab{white-space:nowrap;flex-shrink:0}
  .modal-box{width:95%!important;margin:10px auto}
  .tbl{font-size:11px}
  .bar-row{flex-wrap:wrap;gap:4px}
  .login-box{width:90%;padding:28px 18px}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important}
}

/* =================== MOBILE CHICO ( ≤ 480px ) =================== */
@media(max-width:480px){
  .kpi-grid,div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}
  .period-badge{display:none}
}

/* =================== PRINT (impresión global) =================== */
/* Oculta sidebar, topbar, subtabs, botones, forms. Muestra todos
 * los paneles. Forzar colores exactos para que los KPIs/badges
 * impriman bien (sin "blanco económico" del browser). */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sidebar,.topbar,.subtabs,.btn,.btn-sm,.logout-btn,.glossary-bar,
  .form-section,.btn-add-period,.search-box,
  #topbar-ev-badge,#login-screen{display:none!important}
  .main{margin-left:0!important}
  .panel{display:block!important}
  body{background:white}
  .content{padding:8px 16px}
  .card{break-inside:avoid;border:1px solid #e2e8f0;margin-bottom:10px}
  .kpi-grid,.kpi-grid-3{grid-template-columns:repeat(4,1fr)}
  #print-header{display:block!important}
  .scroll-table{max-height:none!important;overflow:visible!important}
  .chart-wrap{height:160px}
}

/* Override final para imprimir en modo oscuro: fuerza fondo blanco. */
@media print{
  body{background:white!important}
  [data-theme="dark"] body{background:white!important}
  [data-theme="dark"] .card,[data-theme="dark"] .kpi{background:white!important;color:#1e293b!important}
}