/* ============================================================
   MANTENIMIENTO — MÓVIL (hasta 767px)
   Sistema de Administración de Condominios
   ============================================================
   El módulo no tenía ninguna hoja responsive: era el único 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.

   Aquí va lo mínimo para que se comporte como los demás: la tabla se desplaza
   en horizontal en vez de comprimirse, y su texto es el mismo que en el resto
   del sistema.
   ============================================================ */

@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. Aquí convivían 10, 11 y 12px escritos
       en las celdas.

       Lleva !important porque tiene que ganarle a esos estilos en línea. Es
       una medida de transición: según se pasen las celdas a clases, sobra. */
    #moduleContainer[data-module="mantenimiento"] table th,
    #moduleContainer[data-module="mantenimiento"] 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="mantenimiento"] 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="mantenimiento"] .table-container,
    #moduleContainer[data-module="mantenimiento"] .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="mantenimiento"] .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="mantenimiento"] .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

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