/* ============================================================
   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) {
    /*
     * El tamaño de letra y el relleno del teléfono ya no se escriben aquí: los
     * pone .tabla-lineas en components.css, igual para todas las tablas. Estas
     * reglas existían para tapar los estilos en línea que llevaba cada celda, y
     * esos estilos ya no están.
     */

    /*
     * ── 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— y
   el texto tampoco: apretarlo un punto más aquí era otra medida propia de este
   módulo, que es lo que se quiso quitar. La escala del teléfono es la de
   components.css y vale para toda pantalla pequeña. */