/* ============================================================
   movil.css  -  CRM Enercat
   Adaptacion a moviles y tablets.
   Creado: 09/08/2026
   Destino: /volume1/COMUN/_CRM nuevo/public/movil.css

   TODO el contenido efectivo va dentro de @media (max-width:820px).
   En escritorio no cambia absolutamente nada.

   Los !important son obligatorios: la linea 198 de index.html
   define .main y .page con !important, y hay que ganarle por cascada.
   ============================================================ */

#mv-burger{display:none}
#mv-overlay{display:none}

@media (max-width:820px){

  /* ---- 1. Sidebar convertido en cajon deslizante ---- */
  .sidebar{
    width:262px!important;
    max-width:82vw!important;
    transform:translateX(-100%)!important;
    transition:transform .22s ease!important;
    z-index:110!important;
    box-shadow:2px 0 18px rgba(0,0,0,.28)!important;
  }
  .sidebar.mv-open{transform:translateX(0)!important}

  /* ---- 2. El contenido recupera el ancho completo ---- */
  /* anula el margin-left:240px de la linea 63 */
  .app > .main, .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100vh!important;
    height:100dvh!important;   /* dvh evita el salto de la barra del navegador movil */
  }

  /* ---- 3. Boton hamburguesa ----
     v2: fondo blanco solido. Las tres rayas se DIBUJAN con CSS
     (::before + box-shadow), no con el caracter ☰: si la fuente
     del movil no tiene ese glifo, no se pinta nada. */
  #mv-burger{
    display:flex!important;
    position:fixed!important;
    top:9px!important;
    left:9px!important;
    width:40px!important;
    height:40px!important;
    align-items:center!important;
    justify-content:center!important;
    background:#ffffff!important;
    border:none!important;
    border-radius:9px!important;
    box-shadow:0 2px 8px rgba(0,0,0,.30)!important;
    font-size:0!important;          /* oculta el ☰ del innerHTML */
    z-index:130!important;
    cursor:pointer!important;
    padding:0!important;
    -webkit-tap-highlight-color:transparent;
  }
  /* las tres barras: una real + dos sombras desplazadas */
  #mv-burger::before{
    content:''!important;
    display:block!important;
    width:20px!important;
    height:2.5px!important;
    border-radius:2px!important;
    background:#1f4c96!important;
    box-shadow:0 -6px 0 #1f4c96, 0 6px 0 #1f4c96!important;
  }
  #mv-burger:active{background:#e8eef9!important}

  /* ---- 4. Fondo oscuro al abrir el menu ---- */
  #mv-overlay.mv-on{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    background:rgba(0,0,0,.45)!important;
    z-index:105!important;
  }

  /* ---- 5. Topbar: hueco para la hamburguesa, titulo en su linea ---- */
  .topbar{
    padding-left:58px!important;
    padding-right:12px!important;
    height:auto!important;
    min-height:58px!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  .topbar-title{
    font-size:14px!important;
    flex:1 1 100%!important;
  }

  /* ---- 6. Margenes del contenido ---- */
  .content{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* ---- 7. Tablas con scroll horizontal real ---- */
  /* .table-wrap (linea 80) lleva overflow:hidden y altura fija: se anulan */
  .table-wrap{
    height:auto!important;
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .table-wrap table{
    width:max-content!important;
    min-width:100%!important;
  }
  /* barras de scroll superiores sincronizadas: sobran en tactil */
  #cc-scroll-top,#pp-st,#fc-scroll-top{display:none!important}

  /* ---- 8. Dashboard: tarjetas apiladas en vez de rejilla fija ---- */
  #page-dashboard.active .content{overflow:auto!important}
  #page-dashboard.active .content>div:last-child{
    grid-template-rows:none!important;
    min-height:0!important;
  }
  #page-dashboard.active .content>div:last-child>.card{
    overflow:visible!important;
    min-height:220px!important;
  }

  /* ---- 9. Modales ---- */
  /* .modal es de ancho fijo 700px (linea 109) */
  .modal{
    width:95vw!important;
    max-width:95vw!important;
    max-height:88vh!important;
    border-radius:12px!important;
  }

  /* ---- 10. Formularios y botones ---- */
  /* 16px es obligatorio: por debajo, Safari en iPhone hace zoom
     automatico al tocar un campo y descoloca la pantalla */
  input,select,textarea{
    font-size:16px!important;
    max-width:100%!important;
  }
  /* ---- 11. Dashboard en movil ---- */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin-bottom:14px!important}
  .stat-card{padding:10px 12px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:0!important}
  .stat-label{margin-bottom:2px!important}
  .stat-sub{font-size:10px!important;margin-top:2px!important}
  .stat-value{font-size:20px!important;letter-spacing:-0.5px!important}
  .dash-grid{gap:12px!important}
  .dash-grid .card{padding:14px!important;overflow:hidden!important}
  #page-dashboard.active .content{padding:12px!important}


  .btn{
    min-height:38px!important;
    padding:8px 12px!important;
  }
}