/* ============================================================
   FINANZAS — 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="finanzas"] table th,
    #moduleContainer[data-module="finanzas"] 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="finanzas"] 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="finanzas"] .table-container,
    #moduleContainer[data-module="finanzas"] .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="finanzas"] .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="finanzas"] .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

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

/* ── Las rejillas de tarjetas, a una columna ──────────────────
   El módulo reparte sus tarjetas con `repeat(auto-fit, minmax(400px, 1fr))`.
   Ese mínimo de 400px es mayor que el ancho de un teléfono —360px en el que
   se vio el problema—, así que la columna no cabe y la tarjeta se sale por la
   derecha: los importes quedaban cortados y las barras de tendencia se salían
   de su caja.

   `auto-fit` no ayuda aquí: reparte las columnas que quepan, pero nunca baja
   del mínimo declarado. En pantalla estrecha la única salida es una columna.

   Se apunta a los contenedores por data-section, que es como el módulo marca
   sus bloques. Poner grid-template-columns en algo que no sea una rejilla no
   tiene ningún efecto, así que no hace falta enumerar cuáles lo son. */
@media screen and (max-width: 767px) {
    #moduleContainer[data-module="finanzas"] [data-section] {
        grid-template-columns: 1fr !important;
    }

    /* Nada dentro de una tarjeta desborda su caja: ni una barra de progreso
       con ancho en píxeles ni una cifra larga sin espacios. */
    #moduleContainer[data-module="finanzas"] .card,
    #moduleContainer[data-module="finanzas"] [data-section] > div {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ── El filtro de período, en tres columnas ───────────────────
   En pantalla ancha va en fila: rótulo, mes, año y botón. En el teléfono no
   caben los cuatro, y con flex-wrap cada uno se iba bajando por su cuenta
   hasta dejar el botón solo en una línea, desaprovechando el ancho.

   Se pasa a rejilla de tres columnas —mes, año y botón— con el rótulo encima,
   ocupando la fila entera. Así los tres controles quedan en una sola línea y
   se ven de un vistazo.

   El año se estrecha porque son cuatro cifras; mes y botón se reparten el
   resto. */
@media screen and (max-width: 767px) {
    #moduleContainer[data-module="finanzas"] .finanzas-filtro {
        display: grid !important;
        grid-template-columns: 1fr 72px auto;
        gap: 8px !important;
        align-items: center;
    }

    /* El rótulo, encima y a lo ancho. */
    #moduleContainer[data-module="finanzas"] .finanzas-filtro > label {
        grid-column: 1 / -1;
        margin: 0 !important;
    }

    /* Los tres controles ocupan su celda y nada más. La hoja global de
       formularios les da 100% de ancho y 50px de alto para que se puedan
       tocar; dentro de una rejilla eso vale, pero el alto se ajusta para que
       la fila no crezca de más. */
    #moduleContainer[data-module="finanzas"] .finanzas-filtro > select,
    #moduleContainer[data-module="finanzas"] .finanzas-filtro > input,
    #moduleContainer[data-module="finanzas"] .finanzas-filtro > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* El botón se queda con lo que ocupa su texto. */
    #moduleContainer[data-module="finanzas"] .finanzas-filtro > button {
        width: auto !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
    }
}

/* ── Las tres tarjetas de totales, en una fila ────────────────
   Se leen comparandolas: apiladas hay que desplazar para saber si el mes
   cerro en superavit. En tres columnas de telefono cada una dispone de unos
   110px, asi que su contenido se ajusta a esa anchura. */
@media screen and (max-width: 767px) {
    #moduleContainer[data-module="finanzas"] .fz-tarjetas {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    #moduleContainer[data-module="finanzas"] .fz-tarjeta {
        padding: 8px 9px !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    #moduleContainer[data-module="finanzas"] .fz-t-rotulo {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    #moduleContainer[data-module="finanzas"] .fz-t-cifra {
        font-size: 13px !important;
        word-break: break-word !important;
    }

    #moduleContainer[data-module="finanzas"] .fz-t-pie {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }
}