/* ============================================================
   PROVEEDORES — MÓVIL (hasta 767px)
   Sistema de Administración de Condominios
   ============================================================
   La tabla de gastos fijos tiene diez columnas y ninguna cabe holgada en un
   teléfono. Aquí se le da a cada una su ancho y se deja que la tabla salga del
   ancho de la pantalla: el contenedor ya desplaza en horizontal, igual que en
   Cuentas por Pagar.

   Estas reglas vivían en la hoja móvil de Cuentas por Pagar, que es donde se
   escribieron cuando se igualó el tamaño de letra entre ambas tablas.
   Proveedores es su propio módulo —app.js lo carga aparte—, así que su
   responsive va en su propia carpeta.
   ============================================================ */

@media screen and (max-width: 767px) {
    /*
     * Mismo tamaño de letra y relleno que las tablas de Cuentas por Pagar. La
     * etiqueta declara 14px y las celdas lo heredaban, así que se veía más
     * grande que Pagadas o Pendientes, que bajan a 12.
     */
    .prov-tabla th,
    .prov-tabla td {
        padding: 7px 6px !important;
        font-size: 12px !important;
    }

    /*
     * ── Por qué se reparte el ancho a mano ──────────────────────
     *
     * Sin anchos, el navegador reparte según el contenido y las columnas
     * quedan del tamaño de su palabra más larga. En un teléfono eso deja
     * columnas de treinta y pico de píxeles, y lo que no se puede partir
     * —el encabezado "Día Pago", la fecha de modificación— se sale de su
     * celda y se dibuja encima de la vecina. Eso es lo que se veía como
     * columnas solapadas.
     *
     * Con reparto fijo cada columna ocupa lo suyo y nada invade a nadie. La
     * suma de los anchos es el mínimo de la tabla, así que sale de la pantalla
     * y se desplaza en horizontal en vez de comprimirse.
     *
     * Es el mismo tratamiento que .cxp-table, con una diferencia: allí se
     * ocultan tres columnas en móvil y aquí no se oculta ninguna, porque un
     * proveedor se identifica por varias a la vez —quién es, qué servicio y
     * cuánto cuesta— y esconder una obliga a abrir la ficha.
     */
    .prov-tabla {
        table-layout: fixed !important;
        min-width: 906px !important;
    }

    .prov-col-codigo { width: 66px !important; }
    .prov-col-proveedor { width: 120px !important; }
    .prov-col-tipo { width: 74px !important; }
    .prov-col-servicio { width: 130px !important; }
    .prov-col-contrato { width: 70px !important; }
    .prov-col-contacto { width: 120px !important; }
    .prov-col-costo { width: 82px !important; }
    .prov-col-modificacion { width: 110px !important; }
    .prov-col-acciones { width: 70px !important; }

    /*
     * "Según factura" es lo que llena esta columna cuando el proveedor no tiene
     * día pactado. Viene partido en dos líneas desde el propio módulo, así que
     * aquí basta con el ancho de la más larga: "factura".
     */
    .prov-col-diapago {
        width: 64px !important;
    }

    /*
     * Con el reparto fijo, lo que no puede partirse se sale. Dos casos reales:
     * los encabezados, que el responsive global obliga a ir en una sola línea,
     * y un correo largo, que no tiene dónde cortarse. Se les deja partir dentro
     * de su columna.
     */
    .prov-tabla th {
        white-space: normal !important;
    }

    .prov-tabla td {
        overflow-wrap: anywhere !important;
    }

    /* La fecha de modificación se escribe en una sola línea; en su columna no
       cabe y se metía debajo de Acciones. */
    .prov-modificado-fecha {
        white-space: normal !important;
    }
}

/* ── Móvil pequeño (hasta 480px) ──────────────────────────────
   Los anchos de columna no cambian —son fijos, no dependen de la pantalla—,
   solo se aprieta el texto como hace el resto del sistema a este tamaño. */
@media screen and (max-width: 480px) {
    .prov-tabla th,
    .prov-tabla td {
        padding: 6px 5px !important;
        font-size: 11px !important;
    }
}