/* ============================================================
   PROGRAMACIÓN DE FACTURACIÓN — MÓVIL (hasta 767px)
   Sistema de Administración de Condominios
   ============================================================
   El módulo no tenía ninguna hoja responsive: era de los dos últimos del
   sistema sin ella. Su aspecto en el teléfono era lo que dijera el JavaScript,
   escrito celda por celda, y no había dónde ajustarlo.

   Lleva lo mínimo para que se comporte como los demás módulos ya corregidos.
   Si al usarlo en el teléfono aparece algo más que ajustar, este es el sitio.
   ============================================================ */

@media screen and (max-width: 767px) {

    /* ── Tablas ─────────────────────────────────────────────
       Un solo tamaño, el de css/styles.css, igual que en Historial de Pagos,
       Cuentas por Pagar y Proveedores.

       Lleva !important porque tiene que ganarle a los tamaños que el
       JavaScript escribe en cada celda. Es una medida de transición: cuando
       esas celdas pasen a clases, sobra. */
    #moduleContainer[data-module="programacion-facturacion"] table th,
    #moduleContainer[data-module="programacion-facturacion"] table td {
        font-size: var(--tabla-texto-movil) !important;
        padding: 7px 6px !important;
        vertical-align: top !important;
    }

    /* Los rótulos, centrados y de una línea: alinearlos arriba deja un hueco
       debajo tan alto como la fila. */
    #moduleContainer[data-module="programacion-facturacion"] table thead th {
        vertical-align: middle !important;
        line-height: 1.2 !important;
    }

    /* ── La tabla se desplaza, no se comprime ───────────────
       Sin esto el navegador reparte el ancho según el contenido y las columnas
       quedan del tamaño de su palabra más larga: lo que no se puede partir se
       sale de su celda y se dibuja encima de la vecina. */
    #moduleContainer[data-module="programacion-facturacion"] .table-container,
    #moduleContainer[data-module="programacion-facturacion"] .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }

    /* ── Cabecera del módulo en columna ─────────────────────
       Título y acciones no caben en una línea de teléfono. */
    #moduleContainer[data-module="programacion-facturacion"] .module-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* ── Formularios a una columna ──────────────────────────
       Dos campos por fila dejan cada uno en la mitad de un teléfono, donde no
       cabe ni una fecha. */
    #moduleContainer[data-module="programacion-facturacion"] .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #moduleContainer[data-module="programacion-facturacion"] .form-row > * {
        width: 100% !important;
    }
}