/* ──────────────────────────────────────────────────────
   responsive-admin.css
   Breakpoints del panel administrativo de Resivia.
   Extraído de admin.html — cargar DESPUÉS del <style> inline.
   Breakpoints: 1200px · 1100px · 860px · 640px · 480px · landscape
   ────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .task-strip { padding: 12px 12px; gap: 10px; }
  .task-strip-val { font-size: 14px; }
  .task-strip-detail { display: none; }
  .home-summary-row { gap: 8px; }
  .home-sum-val { font-size: 18px; }
  .mini-morosos-row { grid-template-columns: 72px 1fr auto; gap: 8px; padding: 9px 14px; }
}

@media(max-width:1200px){
  .kpi-grid-v2{grid-template-columns:repeat(2,1fr);}
  .qa-grid-v2{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .kpi{border-right:none;border-bottom:1px solid var(--border);}
  .kpi:nth-child(2){border-right:1px solid var(--border);}
  .kpi:nth-child(2n){border-right:none;}
  .kpi:nth-last-child(-n+2){border-bottom:none;}
  .grid-2-1{grid-template-columns:1fr;}
}
@media(max-width:860px){
  /* Mostrar barra superior mobile */
  .mob-bar{display:flex;}
  /* Evitar que la mob-bar fija tape el título al hacer scrollIntoView (módulo Pagos) */
  #comprobantes,#facturacion,#pago-anticipado,#panel-conciliacion,#estado-cuenta{scroll-margin-top:72px;}
  /* Ídem para Gastos y Fondo */
  #gastos,#fondo-residencial{scroll-margin-top:72px;}
  /* Ídem para Morosidad, Residentes, Comunidad, Reportes y Configuración */
  #morosos,#gestion-unidades,
  #avisos,#incidencias,#mudanzas,#espacios-comunes,#notificaciones,
  #reportes,#configurar-cuotas,#automatizacion-cobros,#empleados,#guardias,#operativos,#servicios,#documentos,#modulos-residente{scroll-margin-top:72px;}
  /* ph-actions compacto: ocultar búsqueda y badge, solo botón actualizar */
  .ph-search{display:none;}
  .badge-live{display:none;}
  .ph-actions{gap:8px;}

  /* Login */
  #login-screen{grid-template-columns:1fr;}
  .login-brand{padding:32px;min-height:200px;}
  .login-quote{font-size:26px;}
  .login-form-wrap{padding:32px;}

  /* Sidebar como drawer */
  #sidebar{
    position:fixed;
    top:0;left:0;
    height:100vh;
    width:240px;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:410;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.18);
    align-items:flex-start;
    padding:0 0 16px;
    visibility:hidden;
  }
  #sidebar.mob-open{transform:translateX(0);visibility:visible;}
  #sidebar .sidebar-logo{ width:100%; padding:20px 16px 16px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px; }
  #sidebar .nav-item{ width:100%; justify-content:flex-start; padding:11px 20px; gap:14px; border-radius:0; }
  #sidebar .nav-item::after{ display:none !important; }
  #sidebar .nav-label{ display:block; font-size:13px; font-weight:500; color:rgba(242,235,212,.9); white-space:nowrap; }
  .sb-foot{ position:static; width:100%; padding:12px 16px; flex-direction:row; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); }
  .sb-foot .nav-item{ width:auto; padding:8px !important; }
  .sb-foot .nav-label{ display:none; }
  .account-pop{ left:16px; bottom:80px; }

  /* ── Prevenir scroll horizontal ── */
  html,body{overflow-x:hidden;}
  #dashboard-screen{overflow-x:hidden;}

  /* ── FIX PRINCIPAL: Flyout panel es sólo desktop; en mobile se oculta completamente ── */
  #sb-flyout,#sb-flyout-bd{display:none !important;}

  /* ── Contenido full-width ── */
  #content{
    margin-left:0 !important;
    padding:72px 12px 60px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* ── KPI compacto ── */
  .kpi{padding:16px 14px !important;}
  .kpi-val{font-size:28px !important;}
  .kpi-label{font-size:10px !important;margin-bottom:8px !important;}

  /* En mobile: ocultar home-summary-row, mantener task-strips y header */
  .home-summary-row{display:none;}
  .alert-banner.success{display:none;}
  .alert-banner{padding:10px 14px;margin-bottom:14px;}
  .alert-banner-sub{display:none;}

  /* Tablas compactas */
  .moroso-row{grid-template-columns:auto 1fr auto;}
  .moroso-block,.moroso-bar-wrap,.moroso-cuota{display:none;}
  .serv-row{grid-template-columns:1fr auto;}
  .serv-method{display:none;}
  .comp-row{grid-template-columns:1fr auto auto;gap:8px;padding:14px 16px;align-items:center;}
  .comp-unit,.comp-method,.comp-ref,.comp-pill{display:none;}
  #servicios .card-header{flex-wrap:wrap;gap:10px;padding:14px 16px;}
  #comprobantes .card-header{flex-wrap:wrap;gap:10px;padding:14px 16px;}
  #comprobantes .card-header>div{flex:1 1 100%;justify-content:space-between;}
  .comp-filter{padding:5px 8px;font-size:11px;}
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-grid{grid-template-columns:1fr;}
  .modal-preview img,.modal-preview iframe{height:260px;}
  .inv-row{grid-template-columns:auto 1fr auto;gap:8px;padding:12px 16px;align-items:center;}
  .inv-num,.inv-concept,.inv-due{display:none;}
  .inv-unit{font-size:13px;font-weight:600;}
  .inv-amount{text-align:left;font-size:13px;}
  .inv-header-row{display:none !important;}
  .facturas-kpis{flex-wrap:wrap;}
  .fkpi{flex:0 0 50% !important;box-sizing:border-box;padding:12px 16px;min-width:0;}
  .fkpi-val{font-size:18px;}
  #facturacion .card-header{flex-wrap:wrap;gap:8px;padding:14px 16px;}
  #facturacion .card-header>div{flex-wrap:wrap;}
  .form-row{grid-template-columns:1fr !important;}
  .unit-header-row{display:none;}
  .unit-row{grid-template-columns:64px 1fr auto;gap:8px;padding:12px 14px;}
  .unit-floor,.unit-balance{display:none;}
  .unit-kpi-bar{grid-template-columns:repeat(2,1fr) !important;}
  .unit-kpi{padding:12px 14px;}
  .unit-kpi:nth-child(even){border-right:none;}
  .unit-kpi:nth-child(-n+2){border-bottom:1px solid var(--border);}
  .ukpi-num{font-size:22px;}
  .ukpi-label{font-size:10px;}

  /* Modal hoja bottom en mobile */
  .modal-sheet{
    position:fixed;
    bottom:0;left:0;right:0;
    border-radius:16px 16px 0 0;
    max-width:100%;
    max-height:90vh;
  }

  /* Automatización de cobros: apilar campos en columna */
  #automatizacion-cobros .form-row{flex-direction:column;}
  #automatizacion-cobros .form-g{min-width:unset !important;width:100%;}
  #automatizacion-cobros .form-row>div[style*="flex:0"]{width:100%;}

  /* Responsable operativo: tabla a 3 columnas */
  #operativos table thead th:nth-child(2),
  #operativos table thead th:nth-child(3){display:none;}
  #operativos table tbody td:nth-child(2),
  #operativos table tbody td:nth-child(3){display:none;}
  #operativos table td,
  #operativos table th{padding:10px 10px;}
  .topbar{display:none !important;}
  .kpi-grid-v2{grid-template-columns:repeat(2,1fr);}
  .qa-grid-v2{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  /* Donut chart: apilar verticalmente — la leyenda necesita ancho completo */
  .donut-wrap{flex-direction:column;align-items:center;gap:16px;}
  .donut-legend{width:100%;}

  /* KPI cards: ocultas en mobile */
  .kpi-grid-v2{display:none !important;}
  .content-scroll{padding:12px 12px 70px;}
  .qa-section-v2{margin-bottom:14px;}
  .qa-grid-v2{
    display:flex;flex-direction:row;
    width:100%;box-sizing:border-box;
    overflow-x:auto;scrollbar-width:none;gap:8px;
  }
  .qa-grid-v2::-webkit-scrollbar{display:none;}
  .qa-btn-v2{
    flex:0 0 auto;flex-direction:row;align-items:center;
    gap:7px;padding:9px 14px;
    border-radius:100px;white-space:nowrap;
  }
  .qa-ico-v2{width:22px;height:22px;border-radius:6px;flex-shrink:0;}
  .qa-btn-v2 span.qa-label-v2{font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap;}
  .qa-nbadge-v2{top:-4px;right:-4px;}
  .inv-row{display:flex;align-items:center;padding:10px 14px;gap:8px;border-bottom:1px solid var(--border);}
  .inv-num,.inv-concept,.inv-due{display:none;}
  .inv-unit{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .inv-amount{font-size:13px;font-weight:600;white-space:nowrap;text-align:right;}
  .fkpi{padding:10px 12px;}
  .fkpi-val{font-size:16px;}
  .fkpi-label{font-size:10px;}
  .gasto-row{flex-wrap:wrap;gap:6px 10px;padding:10px 14px;}
  .gasto-row-body{flex:1;min-width:150px;}
  .gasto-row-actions{flex:0 0 100%;justify-content:flex-end;margin-top:2px;}
  .gasto-amount{font-size:13px;}
  .prov-row{grid-template-columns:1fr auto !important;}
  .prov-row .prov-cat,.prov-row .prov-freq,.prov-row .prov-monto{display:none;}
  .prov-row-header{display:none !important;}
  .gasto-v2-row{flex-wrap:wrap;}
  .gasto-v2-actions{width:100%;justify-content:flex-end;}
  .unit-row{grid-template-columns:56px 1fr auto;gap:6px;padding:10px 12px;}
  .unit-code{font-size:11px;}
  .unit-floor,.unit-balance{display:none;}
  .unit-kpi-bar{grid-template-columns:repeat(2,1fr) !important;}
  .unit-kpi{padding:10px 12px;}
  .unit-kpi:nth-child(even){border-right:none;}
  .unit-kpi:nth-child(-n+2){border-bottom:1px solid var(--border);}
  .ukpi-num{font-size:18px;}
  #facturacion .card-header{padding:12px 14px;}
  #facturacion .card-header .btn{font-size:12px;padding:6px 10px;}
  .inv-blk-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .inv-blk-chips{flex-shrink:0;display:flex;gap:6px;margin-left:auto;}
  .unit-row,.inv-row,.gasto-row,.task-strip{min-height:44px;}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .kpi:nth-child(2){border-right:none;}
  .kpi:nth-last-child(-n+2){border-bottom:1px solid var(--border);}
  .kpi:last-child{border-bottom:none;}
  .kpi{padding:12px 10px !important;}
  .kpi-val{font-size:24px !important;}
  .kpi-label{font-size:9px !important;letter-spacing:.04em !important;}
}

/* Landscape en mobile */
@media(max-height:500px) and (orientation:landscape){
  .mob-bar{height:44px;}
  .mob-bottom-nav{height:44px;}
  #content{padding-top:52px !important;padding-bottom:calc(52px + env(safe-area-inset-bottom)) !important;}
  .mob-bar,.mob-bottom-nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
}