/* ============================================
   RESPONSIVE FACTURACIÓN — MOBILE
   Breakpoint: max-width 767px

   Estilos responsive móviles exclusivos del
   módulo Facturación: tabs, conceptos, grids.
   ============================================ */

/* --------------------------------------------
   TABS DE FACTURACIÓN
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .facturacion-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* --------------------------------------------
   GRIDS DE CONCEPTOS Y COSTOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .conceptos-grid {
        grid-template-columns: 1fr !important;
    }

    .cost-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cost-distribution {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-concept-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-concept-row > * {
        width: 100% !important;
    }
}

/* --------------------------------------------
   PROGRAMACIÓN DE FACTURACIÓN — CALENDAR LAYOUT
   -------------------------------------------- */
@media screen and (max-width: 1023px) {
    /* Layout: calendario (2fr) + panel lateral (1fr) → 1 columna */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}