/* ============================================================
   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;
    }

    /*
     * ── Trabajos Extra: la barra de datos no se enseña ──────────
     *
     * Son cuatro cifras de resumen —pendientes, en progreso, monto y próximos
     * mantenimientos— y en un teléfono ocupaban la primera pantalla antes de
     * dejar ver la lista, que es a lo que se entra aquí. Se probó en rejilla de
     * dos por dos y luego con la letra apretada, y aun apretada seguía cobrando
     * más sitio del que daba.
     *
     * En el escritorio se queda: allí es una tira fina que no le quita el hueco
     * a nada. Y los datos no se pierden, la lista de abajo los desglosa uno a
     * uno.
     */
    [data-section="trabajos-extra"] > .stat-card {
        display: none !important;
    }

    /*
     * ── Trabajos Extra: los filtros, en una fila de tres ────────
     *
     * Iban en fila con permiso para envolver, y en un teléfono envolvían
     * siempre: cada desplegable pedía su ancho natural, no cabían dos, y los
     * tres controles se repartían en tres renglones.
     *
     * En rejilla no se negocia: dos columnas iguales para los desplegables y una
     * tercera del ancho que pida el botón. El minmax(0, 1fr) es lo que permite a
     * un desplegable achicarse por debajo de su contenido; con 1fr a secas se
     * planta en su ancho natural y vuelve a desbordar la fila.
     */
    [data-section="trabajos-extra"] .trabajos-filtros {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    [data-section="trabajos-extra"] .trabajos-filtros > select {
        min-width: 0 !important;
        width: 100% !important;
    }

    /*
     * Del botón queda el embudo. La palabra se lleva casi la mitad de su ancho,
     * y ese ancho sale del que les queda a los desplegables, que es donde de
     * verdad hace falta: sus opciones son "Mant. Programado" o "Soporte
     * Presencial" y cortadas no se distinguen. El título sigue puesto en el
     * marcado para quien mantenga el dedo encima.
     */
    [data-section="trabajos-extra"] .trabajos-btn-filtrar .trabajos-filtrar-texto {
        display: none !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. */