/* ==========================================================================
   Módulo de Proveedores — framework `--prov-*`
   --------------------------------------------------------------------------
   Método: `pacientes/_DOC_css_pacientes.md` (plantilla del proyecto).
     · Todo el estilo vive acá: la vista NO lleva <style> ni style="…".
     · Los tokens se declaran en los WRAPPERS, nunca en :root. Son DOS:
       #pantalla_proveedores (el content-wrapper) y #registro_proveedor (el
       modal, que Bootstrap monta como hijo de <body>, o sea FUERA del
       wrapper: sin redeclarar los tokens ahí, los var() no resuelven y el
       color no cae a un fallback, cae a transparente).
     · Todo override de Bootstrap va scopeado bajo uno de esos dos ids.
     · Tipografía siempre en px, de la escala de tokens.
     · Iconografía: MDI 2.8.94 (local) — verificado clase por clase en
       assets/vendor/mdi/css/materialdesignicons.min.css.

   Paleta: PÚRPURA #6a4c93. Elegida para que el módulo se distinga de un
   vistazo del índigo de Pacientes (#3f51b5), del azul clínico de
   Hospitalización (#1a6fc4), del verde quirúrgico de Pabellón (#1e7a6b) y del
   ámbar de Hotelería (#b07a2e). Cambiarla es tocar tres tokens.
   ========================================================================== */

#pantalla_proveedores,
#registro_proveedor {
    /* Identidad */
    --prov-primary: #6a4c93;
    --prov-primary-dark: #553c76;
    --prov-primary-soft: #f3effa;

    /* Estados */
    --prov-ok: #1e7a5a;
    --prov-alerta: #c0392b;
    --prov-alerta-soft: #fdeceb;
    --prov-info: #2d6a8a;

    /* Superficies */
    --prov-fondo: #f5f6f9;
    --prov-panel: #ffffff;
    --prov-borde: #e2e5ec;
    --prov-borde-fuerte: #cfd4df;

    /* Texto */
    --prov-txt: #2c3038;
    --prov-txt-suave: #6b7280;

    /* Escala tipográfica (px, siempre) */
    --prov-txt-display: 17px;
    --prov-txt-titulo: 15px;
    --prov-txt-destacado: 14px;
    --prov-txt-base: 13px;
    --prov-txt-secundario: 12px;
    --prov-txt-rotulo: 11px;

    /* Espaciado y formas */
    --prov-gap: 12px;
    --prov-radio: 8px;
    --prov-radio-sm: 6px;
    --prov-sombra: 0 10px 30px rgba(24, 20, 40, .18);
}

/* ─────────────────────────── Contenedor del modal ─────────────────────────── */

#registro_proveedor .modal-content {
    border: 0;
    border-radius: var(--prov-radio);
    overflow: hidden;
    box-shadow: var(--prov-sombra);
    color: var(--prov-txt);
}

/* ─────────────────────────── Cabecera ─────────────────────────── */

#registro_proveedor .modal-header {
    align-items: center;
    gap: var(--prov-gap);
    padding: 14px 20px;
    border: 0;
    background: linear-gradient(135deg, var(--prov-primary) 0%, var(--prov-primary-dark) 100%);
    color: #fff;
}

#registro_proveedor .prov-header-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 20px;
    line-height: 1;
}

#registro_proveedor .prov-header-txt {
    flex: 1 1 auto;
    min-width: 0;
}

#registro_proveedor .modal-title {
    margin: 0;
    font-size: var(--prov-txt-display);
    font-weight: 600;
    letter-spacing: .2px;
}

#registro_proveedor .prov-header-sub {
    margin: 2px 0 0;
    font-size: var(--prov-txt-secundario);
    color: rgba(255, 255, 255, .82);
}

#registro_proveedor .prov-header-cerrar {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--prov-radio-sm);
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    opacity: .85;
    cursor: pointer;
}

#registro_proveedor .prov-header-cerrar:hover {
    background: rgba(255, 255, 255, .18);
    opacity: 1;
}

/* Badge de modo (Nuevo / Edición): lo cambia proveedores/js/proveedores.js */
#registro_proveedor .prov-badge-modo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .22);
    font-size: var(--prov-txt-rotulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
}

/* ─────────────────────────── Cuerpo y secciones ─────────────────────────── */

#registro_proveedor .modal-body {
    padding: 18px 20px;
    background: var(--prov-fondo);
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}

#registro_proveedor .prov-seccion {
    margin-bottom: 14px;
    padding: 14px 16px 4px;
    border: 1px solid var(--prov-borde);
    border-radius: var(--prov-radio);
    background: var(--prov-panel);
}

#registro_proveedor .prov-seccion:last-child {
    margin-bottom: 0;
}

#registro_proveedor .prov-seccion-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--prov-borde);
    color: var(--prov-primary);
    font-size: var(--prov-txt-titulo);
    font-weight: 600;
}

#registro_proveedor .prov-seccion-tit i {
    font-size: 18px;
    line-height: 1;
}

#registro_proveedor .prov-seccion-tit small {
    margin-left: auto;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-rotulo);
    font-weight: 400;
}

/* Rejilla de campos: 2 columnas, 1 sola en pantallas chicas. */
#registro_proveedor .prov-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--prov-gap);
}

#registro_proveedor .prov-grid--full {
    grid-template-columns: minmax(0, 1fr);
}

#registro_proveedor .prov-col-full {
    grid-column: 1 / -1;
}

/* ─────────────────────────── Campos ─────────────────────────── */

#registro_proveedor .prov-campo {
    margin-bottom: 12px;
}

#registro_proveedor .prov-label {
    display: block;
    margin-bottom: 4px;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-rotulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

#registro_proveedor .prov-req {
    color: var(--prov-alerta);
    font-weight: 700;
}

#registro_proveedor .prov-input {
    display: block;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    border: 1px solid var(--prov-borde-fuerte);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    color: var(--prov-txt);
    font-size: var(--prov-txt-base);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#registro_proveedor .prov-input::placeholder {
    color: #aab0bb;
}

#registro_proveedor .prov-input:focus {
    outline: 0;
    border-color: var(--prov-primary);
    box-shadow: 0 0 0 3px rgba(106, 76, 147, .14);
}

#registro_proveedor .prov-input.is-invalid {
    border-color: var(--prov-alerta);
    background: var(--prov-alerta-soft);
}

#registro_proveedor .prov-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

/* Documento en modo edición: es la identidad del proveedor, no se toca. */
#registro_proveedor .prov-input[readonly] {
    border-style: dashed;
    background: #f1f2f6;
    color: var(--prov-txt-suave);
    cursor: not-allowed;
}

#registro_proveedor .prov-ayuda {
    display: block;
    margin-top: 4px;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-rotulo);
}

/* Error en línea. El partial del documento emite `small text-danger d-none`,
   así que esas clases también tienen que verse como error del módulo. */
#registro_proveedor .prov-error,
#registro_proveedor .prov-campo .text-danger.small {
    display: block;
    margin-top: 4px;
    color: var(--prov-alerta);
    font-size: var(--prov-txt-rotulo);
    font-weight: 500;
}

#registro_proveedor .prov-error.d-none,
#registro_proveedor .prov-campo .text-danger.small.d-none {
    display: none;
}

/* ─────────────────── Bloque del documento (partial compartido) ─────────────────── */

/* El documento y su nota viven en UN bloque: el partial emite el campo y el modal
   agrega debajo el aviso de "no se edita", que solo aparece en modificación. */
#registro_proveedor .prov-doc-bloque {
    margin-bottom: 12px;
    padding: 12px 12px 4px;
    border: 1px solid var(--prov-borde);
    border-radius: var(--prov-radio-sm);
    background: var(--prov-primary-soft);
}

#registro_proveedor .prov-campo-doc {
    margin-bottom: 8px;
}

#registro_proveedor .prov-campo-doc .custom-control-label {
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
    cursor: pointer;
}

#registro_proveedor .prov-campo-doc .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--prov-primary);
    background-color: var(--prov-primary);
}

#registro_proveedor .prov-campo-doc .custom-control-input:disabled ~ .custom-control-label {
    opacity: .55;
    cursor: not-allowed;
}

/* Aviso de "el documento no se edita", solo visible en modificación. */
#registro_proveedor .prov-nota-doc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--prov-borde-fuerte);
    color: var(--prov-info);
    font-size: var(--prov-txt-rotulo);
    line-height: 1.45;
}

#registro_proveedor .prov-nota-doc i {
    font-size: 14px;
    line-height: 1.3;
}

/* ─────────────────────────── Pie ─────────────────────────── */

#registro_proveedor .modal-footer {
    justify-content: space-between;
    gap: var(--prov-gap);
    padding: 12px 20px;
    border-top: 1px solid var(--prov-borde);
    background: var(--prov-panel);
}

#registro_proveedor .prov-pie-nota {
    margin: 0;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-rotulo);
}

#registro_proveedor .prov-pie-acciones {
    display: flex;
    gap: 8px;
}

#registro_proveedor .prov-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--prov-radio-sm);
    font-size: var(--prov-txt-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

#registro_proveedor .prov-btn i {
    font-size: 16px;
    line-height: 1;
}

#registro_proveedor .prov-btn--guardar {
    background: var(--prov-primary);
    color: #fff;
}

#registro_proveedor .prov-btn--guardar:hover:not(:disabled) {
    background: var(--prov-primary-dark);
}

#registro_proveedor .prov-btn--guardar:disabled {
    opacity: .6;
    cursor: progress;
}

#registro_proveedor .prov-btn--cerrar {
    border-color: var(--prov-borde-fuerte);
    background: #fff;
    color: var(--prov-txt-suave);
}

#registro_proveedor .prov-btn--cerrar:hover {
    background: #f1f2f6;
    color: var(--prov-txt);
}

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 767.98px) {

    #registro_proveedor .prov-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #registro_proveedor .modal-body {
        padding: 14px;
        max-height: calc(100vh - 210px);
    }

    #registro_proveedor .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #registro_proveedor .prov-pie-acciones {
        justify-content: flex-end;
    }
}

/* En pantallas muy chicas la aclaración de la sección ("Opcional", "Todos
   obligatorios") le come el aire al título: se oculta, no se achica. */
@media (max-width: 479.98px) {

    #registro_proveedor .prov-seccion-tit small {
        display: none;
    }
}

/* ─────────────────────────── Utilidades del módulo ─────────────────────────── */

/* Sustituyen a los style="…" que había en la vista. */
#registro_proveedor .prov-oculto {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA — encabezado y listado
   ══════════════════════════════════════════════════════════════════════════
   La tabla mostraba diez columnas planas (Rut, Razón Social, Nombre Fantasia,
   Giro, Contacto, fono, fono2, Ciudad) y dos de íconos. Ahora son cinco, con
   los datos agrupados por significado: quién es, a qué se dedica, cómo se le
   contacta y dónde está. El HTML de cada celda lo arma
   `proveedores/js/proveedores.js` (render de DataTables).

   Acá también viven los ajustes del filtro y del selector de cantidad de
   DataTables, que antes se hacían con `.css(...)` y `.attr('style', …)` desde
   el JS de la vista.
   ────────────────────────────────────────────────────────────────────────── */

#pantalla_proveedores .prov-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prov-gap);
    flex-wrap: wrap;
}

#pantalla_proveedores .prov-encabezado-txt {
    min-width: 0;
}

#pantalla_proveedores .prov-titulo {
    margin: 0;
    color: var(--prov-txt);
    font-size: var(--prov-txt-display);
    font-weight: 600;
}

#pantalla_proveedores .prov-bajada {
    margin: 4px 0 0;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--prov-radio-sm);
    font-size: var(--prov-txt-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

#pantalla_proveedores .prov-btn i {
    font-size: 16px;
    line-height: 1;
}

#pantalla_proveedores .prov-btn--nuevo {
    background: var(--prov-primary);
    color: #fff;
}

#pantalla_proveedores .prov-btn--nuevo:hover {
    background: var(--prov-primary-dark);
    color: #fff;
}

/* ─────────────────────────── Tabla ─────────────────────────── */

#pantalla_proveedores .prov-tabla {
    margin-bottom: 0;
    font-size: var(--prov-txt-base);
    color: var(--prov-txt);
}

#pantalla_proveedores .prov-tabla thead th {
    padding: 10px 12px;
    border-top: 0;
    border-bottom: 2px solid var(--prov-borde);
    background: var(--prov-primary-soft);
    color: var(--prov-primary-dark);
    font-size: var(--prov-txt-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

#pantalla_proveedores .prov-tabla tbody td {
    padding: 10px 12px;
    border-top: 1px solid var(--prov-borde);
    vertical-align: middle;
}

#pantalla_proveedores .prov-tabla tbody tr:hover td {
    background: #faf9fd;
}

/* Anchos: las acciones y el giro no necesitan crecer; el proveedor sí. */
#pantalla_proveedores .prov-td-acciones {
    width: 74px;
    white-space: nowrap;
}

#pantalla_proveedores .prov-td-proveedor {
    width: 34%;
}

#pantalla_proveedores .prov-td-contacto {
    width: 34%;
}

#pantalla_proveedores .prov-td-ubicacion {
    width: 24%;
}

/* Celda agrupada: cada dato en su renglón, sin listas ni tablas anidadas. */
#pantalla_proveedores .prov-celda {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#pantalla_proveedores .prov-celda-tit {
    color: var(--prov-txt);
    font-size: var(--prov-txt-destacado);
    font-weight: 600;
    line-height: 1.25;
}

#pantalla_proveedores .prov-celda-sub {
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
    line-height: 1.25;
}

#pantalla_proveedores .prov-doc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--prov-primary-soft);
    color: var(--prov-primary-dark);
    font-size: var(--prov-txt-rotulo);
    font-weight: 600;
    letter-spacing: .3px;
}

#pantalla_proveedores .prov-dato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
    line-height: 1.35;
}

#pantalla_proveedores .prov-dato--fuerte {
    color: var(--prov-txt);
    font-size: var(--prov-txt-base);
    font-weight: 600;
}

#pantalla_proveedores .prov-dato i,
#pantalla_proveedores .prov-doc i {
    flex: 0 0 auto;
    color: var(--prov-primary);
    font-size: 14px;
    line-height: 1.35;
}

#pantalla_proveedores .prov-link {
    color: var(--prov-info);
}

#pantalla_proveedores .prov-link:hover {
    color: var(--prov-primary-dark);
    text-decoration: underline;
}

#pantalla_proveedores .prov-link--wsp i {
    color: #25d366;
}

#pantalla_proveedores .prov-vacio {
    color: #b6bac3;
}

/* Acciones de fila */
#pantalla_proveedores .prov-acciones {
    display: flex;
    gap: 4px;
}

#pantalla_proveedores .prov-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--prov-borde);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#pantalla_proveedores .prov-accion--editar {
    color: var(--prov-primary);
}

#pantalla_proveedores .prov-accion--editar:hover {
    border-color: var(--prov-primary);
    background: var(--prov-primary-soft);
}

#pantalla_proveedores .prov-accion--eliminar {
    color: var(--prov-alerta);
}

#pantalla_proveedores .prov-accion--eliminar:hover {
    border-color: var(--prov-alerta);
    background: var(--prov-alerta-soft);
}

/* ───────────────── Barra de herramientas del listado ───────────────── */

#pantalla_proveedores .prov-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--prov-gap);
    margin-bottom: 12px;
}

#pantalla_proveedores .prov-buscador {
    position: relative;
    flex: 1 1 320px;
    max-width: 460px;
}

#pantalla_proveedores .prov-buscador i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--prov-txt-suave);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

#pantalla_proveedores .prov-buscador input {
    width: 100%;
    padding: 8px 10px 8px 34px;
    border: 1px solid var(--prov-borde-fuerte);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    color: var(--prov-txt);
    font-size: var(--prov-txt-base);
}

#pantalla_proveedores .prov-buscador input:focus {
    outline: 0;
    border-color: var(--prov-primary);
    box-shadow: 0 0 0 3px rgba(106, 76, 147, .14);
}

#pantalla_proveedores .prov-toolbar-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#pantalla_proveedores .prov-contador {
    margin-right: 4px;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-porpagina {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-porpagina select {
    padding: 5px 8px;
    border: 1px solid var(--prov-borde-fuerte);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    color: var(--prov-txt);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-btn-tabla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--prov-borde-fuerte);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    color: var(--prov-txt);
    font-size: var(--prov-txt-secundario);
    font-weight: 600;
    cursor: pointer;
}

#pantalla_proveedores .prov-btn-tabla i {
    font-size: 16px;
    line-height: 1;
}

#pantalla_proveedores .prov-btn-tabla:hover:not(:disabled) {
    border-color: var(--prov-primary);
    background: var(--prov-primary-soft);
    color: var(--prov-primary-dark);
}

#pantalla_proveedores .prov-btn-tabla:disabled {
    opacity: .6;
    cursor: progress;
}

/* ───────────────── Orden por columna ─────────────────
   El indicador sale de `aria-sort` (lo escribe el JS), así el estado visual y el
   accesible no pueden divergir. */

#pantalla_proveedores .prov-th-orden {
    cursor: pointer;
    user-select: none;
}

#pantalla_proveedores .prov-th-orden::after {
    content: "\F4BA";   /* mdi-sort */
    margin-left: 6px;
    font-family: "Material Design Icons";
    font-size: 13px;
    opacity: .35;
}

#pantalla_proveedores .prov-th-orden[aria-sort="ascending"]::after {
    content: "\F360";   /* mdi-menu-up */
    opacity: 1;
}

#pantalla_proveedores .prov-th-orden[aria-sort="descending"]::after {
    content: "\F35D";   /* mdi-menu-down */
    opacity: 1;
}

#pantalla_proveedores .prov-th-orden:hover {
    background: #ece5f7;
}

/* ───────────────── Carga, vacío y paginación ───────────────── */

#pantalla_proveedores .prov-cargando {
    padding: 26px 12px;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
    text-align: center;
}

#pantalla_proveedores .prov-vacio-panel {
    padding: 36px 20px;
    text-align: center;
}

#pantalla_proveedores .prov-vacio-panel i {
    color: var(--prov-borde-fuerte);
    font-size: 44px;
    line-height: 1;
}

#pantalla_proveedores .prov-vacio-panel h6 {
    margin: 10px 0 4px;
    color: var(--prov-txt);
    font-size: var(--prov-txt-titulo);
    font-weight: 600;
}

#pantalla_proveedores .prov-vacio-panel p {
    margin: 0 auto;
    max-width: 460px;
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

#pantalla_proveedores .prov-pag-resumen {
    color: var(--prov-txt-suave);
    font-size: var(--prov-txt-secundario);
}

#pantalla_proveedores .prov-pag-botones {
    display: inline-flex;
    gap: 4px;
}

#pantalla_proveedores .prov-pag-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--prov-borde);
    border-radius: var(--prov-radio-sm);
    background: #fff;
    color: var(--prov-txt);
    font-size: var(--prov-txt-secundario);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

#pantalla_proveedores .prov-pag-btn:hover:not(:disabled):not(.is-activa) {
    border-color: var(--prov-primary);
    background: var(--prov-primary-soft);
    color: var(--prov-primary-dark);
}

#pantalla_proveedores .prov-pag-btn.is-activa {
    border-color: var(--prov-primary);
    background: var(--prov-primary);
    color: #fff;
    cursor: default;
}

#pantalla_proveedores .prov-pag-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ───────────────── Responsive: la tabla pasa a tarjetas ─────────────────
   ⚠️ Cada <td> DEBE traer `data-label` (lo escribe provFilaHtml): acá ese
   atributo ES el rótulo de cada dato. Sin él la tarjeta queda sin títulos. */

@media (max-width: 767.98px) {

    #pantalla_proveedores .prov-encabezado {
        align-items: flex-start;
    }

    #pantalla_proveedores .prov-btn--nuevo {
        width: 100%;
        justify-content: center;
    }

    #pantalla_proveedores .prov-buscador {
        max-width: none;
        flex-basis: 100%;
    }

    #pantalla_proveedores .prov-tabla thead {
        display: none;
    }

    #pantalla_proveedores .prov-tabla,
    #pantalla_proveedores .prov-tabla tbody,
    #pantalla_proveedores .prov-tabla tr,
    #pantalla_proveedores .prov-tabla td {
        display: block;
        width: 100%;
    }

    #pantalla_proveedores .prov-tabla tr {
        margin-bottom: 10px;
        border: 1px solid var(--prov-borde);
        border-left: 3px solid var(--prov-primary);
        border-radius: var(--prov-radio-sm);
        background: #fff;
    }

    #pantalla_proveedores .prov-tabla tbody td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        border-top: 0;
        border-bottom: 1px solid var(--prov-borde);
    }

    #pantalla_proveedores .prov-tabla tbody tr td:last-child {
        border-bottom: 0;
    }

    #pantalla_proveedores .prov-tabla tbody td::before {
        content: attr(data-label);
        flex: 0 0 88px;
        color: var(--prov-txt-suave);
        font-size: var(--prov-txt-rotulo);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    /* En la tarjeta, las acciones van sin rótulo y alineadas a la derecha: el
       renglón "ACCIONES" antes empujaba el nombre del proveedor hacia abajo. */
    #pantalla_proveedores .prov-td-acciones {
        width: 100%;
        justify-content: flex-end;
        padding-bottom: 4px;
    }

    #pantalla_proveedores .prov-td-acciones::before {
        display: none;
    }

    #pantalla_proveedores .prov-paginacion {
        justify-content: center;
    }
}
