/* =============================================================================
   Portal Proveedores SIIB - Sistema de estilos
   -----------------------------------------------------------------------------
   TODO esta scoped bajo .portal-page a proposito. _MainLayout define reglas
   globales agresivas (.btn { width:100% }, p { color:#737f8d }) de las que
   dependen Login y Registro; scopeando aqui, esas pantallas quedan intactas.

   Para adoptar el diseño en una vista nueva basta con envolverla en
   <div class="portal-page"> ... </div>
   ============================================================================= */

/* =============================================================================
   PALETA
   -----------------------------------------------------------------------------
   Anclada en los tres colores muestreados del logo institucional:

       AZUL   #3395EE   hue 209   (icono beta .png, logo beta new.png)
       ROJO   #E60031   hue 347   (icono beta .png)
       NAVY   #012060   hue 220   (wordmark de logo beta new.png)

   El navy que ya usaba el portal (#192e52, hue 218) resulto estar practicamente
   en el tono de marca, solo menos saturado: se acerco al oficial. El rojo si
   estaba fuera de familia (#b3261e, hue 4, anaranjado) y se movio al carmesi.
   Los azules intermedios se recolocaron entre 209 y 220 para que el azul del
   logo y el navy se lean como una sola familia.

   ACCESIBILIDAD (contraste verificado, no estimado):
       navy   sobre blanco   13.77:1   AAA
       blue   sobre blanco    5.32:1   AA
       ink    sobre blanco   15.72:1   AAA
       muted  sobre blanco    5.18:1   AA
       muted  sobre canvas    4.82:1   AA
       red    sobre blanco    4.76:1   AA
       blanco sobre navy     13.77:1   AAA
       navy   sobre soft     12.26:1   AAA

   OJO: --pp-brand-blue (el azul del logo) da 3.15:1 sobre blanco. NO sirve para
   texto; usalo solo en rellenos, iconos grandes y sobre fondos oscuros. Para
   texto o iconos pequeños esta --pp-blue, que es su version legible.

   Va en :root porque el navbar, la barra de identidad y el footer viven en el
   layout, fuera de .portal-page.
   ============================================================================= */
:root {
    /* --- Marca, tal cual salen del logo --- */
    --pp-brand-blue: #3395EE;
    --pp-brand-red: #E60031;
    --pp-brand-navy: #012060;

    /* --- Escala azul: estructura e interaccion --- */
    --pp-navy: #0B2A63; /* titulos, thead, navbar activo, botones */
    --pp-navy-700: #143C82; /* hover de navy */
    --pp-blue: #1A6BC4; /* enlaces e iconos: version legible del azul de marca */
    --pp-blue-soft: #E9F3FD; /* fondos suaves, filas hover/seleccionada */
    --pp-blue-line: #C5DFF8; /* bordes sobre fondo suave */

    /* --- Rojo de marca --- */
    --pp-red: #E60031;
    --pp-red-700: #B80027; /* hover y texto sobre blanco */
    --pp-red-soft: #FDE7EC;

    /* --- Neutros, tintados hacia el azul de marca --- */
    --pp-ink: #16233A;
    --pp-muted: #5F6E85;
    --pp-line: #DFE5EF;
    --pp-line-soft: #EDF1F7;
    --pp-surface: #FFFFFF;
    --pp-canvas: #F4F7FC;
    --pp-canvas-alt: #ECF1F8; /* footer y bandas */
    --pp-field-border: #CDD7E6;
    --pp-disabled: #9AA6BA;

    /* Tablas: el thead y el rayado necesitan tono propio. Si comparten
       --pp-blue-soft con el hover, la fila bajo el cursor se vuelve
       indistinguible del encabezado. */
    --pp-thead-bg: #E3EBF6;
    --pp-zebra: #FAFCFE;

    /* --- Semanticos --- */
    --pp-ok: #0B7A46;
    --pp-ok-soft: #E4F4EC;
    --pp-warn: #8F6300;
    --pp-warn-soft: #FFF6E3;
    --pp-warn-accent: #C98A00;
    --pp-warn-line: #EFDCA8;
    /* El rojo de error comparte familia con el de marca a proposito: en este
       portal el rojo ya significaba "error" y "cerrar sesion". */
    --pp-danger: #C4002A;
    --pp-danger-soft: #FDE7EC;
    --pp-danger-line: #F2C2CC;

    --pp-radius: 12px;
    --pp-radius-sm: 8px;
    --pp-shadow: 0 1px 2px rgba(11, 42, 99, .05), 0 4px 16px rgba(11, 42, 99, .07);
}

.portal-page {
    background-color: var(--pp-canvas);
    color: var(--pp-ink);
    padding: 0 0 3rem;
    min-height: 100%;
}

/* =============================================================================
   ALERTAS (iziToast)
   -----------------------------------------------------------------------------
   El tema por defecto de iziToast pinta la tarjeta entera del color de la
   severidad (rosa, amarillo...) y se estira a lo ancho del contenedor: el
   mensaje quedaba en una sola linea corrida tapando la tabla.

   Aqui la tarjeta es blanca y la severidad se comunica con una barra de acento
   a la izquierda y un punto junto al titulo. El ancho se acota para que el
   texto rompa en varias lineas y se pueda leer.

   La clase .pp-toast se aplica globalmente desde iziToast.settings() en
   _MainLayout, asi que los 28 puntos de llamada la heredan sin tocarlos.
   ============================================================================= */
.iziToast.pp-toast {
    --toast: var(--pp-muted);
    width: min(440px, calc(100vw - 2rem));
    min-height: 0;
    padding: .85rem 1rem;
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-left: 4px solid var(--toast);
    border-radius: var(--pp-radius-sm);
    box-shadow: 0 8px 28px rgba(11, 42, 99, .16);
}

/* Severidad: iziToast asigna estas clases segun error/warning/success/info */
.iziToast.pp-toast.iziToast-color-red { --toast: var(--pp-danger); }
.iziToast.pp-toast.iziToast-color-yellow { --toast: var(--pp-warn-accent); }
.iziToast.pp-toast.iziToast-color-green { --toast: var(--pp-ok); }
.iziToast.pp-toast.iziToast-color-blue { --toast: var(--pp-blue); }

.iziToast.pp-toast > .iziToast-body {
    margin: 0;
    padding: 0 1.4rem 0 0; /* espacio para la X, nada a la izquierda */
    min-height: 0;
}

/* El icono por defecto depende de la fuente propia de iziToast; se sustituye
   por un punto de color, que no depende de ningun recurso externo. */
.iziToast.pp-toast .iziToast-icon {
    display: none;
}

.iziToast.pp-toast .iziToast-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    float: none;
    width: 100%;
    margin: 0 0 .2rem;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pp-navy);
}

    .iziToast.pp-toast .iziToast-title::before {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--toast);
    }

.iziToast.pp-toast .iziToast-message {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    font-size: .855rem;
    line-height: 1.5;
    color: var(--pp-ink);
}

.iziToast.pp-toast .iziToast-close {
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    opacity: .45;
    border-radius: 5px;
}

    .iziToast.pp-toast .iziToast-close:hover {
        opacity: 1;
        background-color: var(--pp-canvas);
    }

.iziToast.pp-toast .iziToast-progressbar {
    background: transparent;
    height: 2px;
}

    .iziToast.pp-toast .iziToast-progressbar > div {
        background: var(--toast);
        opacity: .5;
    }

/* En movil ocupa el ancho disponible con margen */
@media (max-width: 575.98px) {
    .iziToast.pp-toast {
        width: calc(100vw - 1.5rem);
    }
}

/* =============================================================================
   AVISO MODAL (iziToast con class .pp-aviso-toast)
   -----------------------------------------------------------------------------
   Antes era un bloque amarillo con todo centrado y el layout resuelto inyectando
   estilos inline desde onOpening. Aqui es una tarjeta blanca con una banda de
   acento ambar: el amarillo pasa a ser el acento, no el fondo de todo.
   ============================================================================= */
.iziToast.pp-aviso-toast {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    border-left: 4px solid var(--pp-warn-accent);
    box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
    padding: 1.5rem 1.6rem 1.25rem;
    width: min(560px, calc(100vw - 2rem));
}

    /* iziToast reserva un hueco para el icono; sin icono, se recupera */
    .iziToast.pp-aviso-toast .iziToast-body {
        margin: 0;
        padding: 0;
    }

    .iziToast.pp-aviso-toast .iziToast-icon {
        display: none;
    }

    .iziToast.pp-aviso-toast .iziToast-title {
        display: block;
        width: 100%;
        margin: 0 0 .15rem;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--pp-navy);
        letter-spacing: -.01em;
    }

        /* El icono se declara como elemento en el titulo, no con content:"\fXXX":
           el nombre de la familia cambia entre Font Awesome 5 y 6, y el proyecto
           carga FA por kit, asi que no conviene adivinarlo. */
        .iziToast.pp-aviso-toast .iziToast-title .pp-aviso__icon {
            margin: 0 .55rem 0 0;
            color: var(--pp-warn-accent);
        }

    .iziToast.pp-aviso-toast .iziToast-message {
        display: block;
        width: 100%;
        margin: 0;
        font-size: .92rem;
    }

    .iziToast.pp-aviso-toast .iziToast-buttons {
        float: none;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin: 1.25rem 0 0;
        padding: 0;
    }

/* --- Contenido --- */
.pp-aviso__lead {
    margin: .5rem 0 0;
    color: var(--pp-ink) !important;
    line-height: 1.5;
}

.pp-aviso__callout {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: var(--pp-warn-soft);
    border: 1px solid var(--pp-warn-line);
    border-radius: var(--pp-radius-sm);
}

    .pp-aviso__callout i {
        margin: 0;
        flex: 0 0 auto;
        font-size: 1.35rem;
        color: var(--pp-warn-accent);
    }

.pp-aviso__callout-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-aviso__hours {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pp-navy);
    line-height: 1.3;
}

.pp-aviso__scope {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-top: .1rem;
}

.pp-aviso__foot {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pp-muted) !important;
}

/* --- Boton --- */
.pp-aviso__btn {
    background-color: var(--pp-navy);
    border: 1px solid var(--pp-navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 650;
    padding: .55rem 1.6rem;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: background-color .15s ease;
}

    .pp-aviso__btn:hover {
        background-color: var(--pp-navy-700);
        border-color: var(--pp-navy-700);
    }

    .pp-aviso__btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .35);
    }

@media (max-width: 575.98px) {
    .iziToast.pp-aviso-toast {
        padding: 1.25rem 1.1rem 1rem;
    }

    .iziToast.pp-aviso-toast .iziToast-buttons {
        justify-content: stretch;
    }

    .pp-aviso__btn {
        width: 100%;
    }
}

/* =============================================================================
   FOOTER
   -----------------------------------------------------------------------------
   Antes era un `row row-cols-1 row-cols-sm-2 row-cols-md-5` con hijos col-md-*
   (dos sistemas de rejilla peleando), mas una columna vacia usada de espaciador
   y `margin-top: 5%` (porcentaje vertical = se calcula sobre el ANCHO, asi que
   la separacion cambiaba al redimensionar). Aqui es un grid simple.
   ============================================================================= */
.pp-footer {
    background-color: var(--pp-canvas-alt);
    margin-top: 3rem;
    color: var(--pp-navy);
}

.pp-footer__inner {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 1.3fr 1.3fr;
    gap: 2rem 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.75rem 2rem 2rem;
}

/* --- Marca --- */
.pp-footer__brand {
    text-align: center;
}

.pp-footer__logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: .75rem;
}

    .pp-footer__logo img {
        max-width: 100%;
        height: auto;
    }

.pp-footer__brand-name {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--pp-navy) !important;
}

.pp-footer__brand-sub {
    margin: .1rem 0 0;
    font-size: .82rem;
    color: var(--pp-muted) !important;
}

/* --- Columnas --- */
.pp-footer__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-navy);
    margin: 0 0 1rem;
}

.pp-footer__list {
    font-style: normal; /* <address> viene en cursiva por defecto */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pp-footer__item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--pp-ink) !important;
}

    .pp-footer__item i {
        /* home.css pone margin-right:10px a todo <i>; aqui separa el gap */
        margin: 0;
        flex: 0 0 16px;
        margin-top: .2rem;
        color: var(--pp-blue);
        font-size: .9em;
    }

    .pp-footer__item strong {
        color: var(--pp-navy);
        font-weight: 650;
    }

    /* Telefono y correo SI son enlaces reales (tel: y mailto:).
       Antes todo era href="#", que solo saltaba al inicio de la pagina. */
    .pp-footer__item a {
        color: var(--pp-ink);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        word-break: break-word;
    }

        .pp-footer__item a:hover,
        .pp-footer__item a:focus {
            color: var(--pp-blue);
            border-bottom-color: currentColor;
        }

/* --- Barra inferior --- */
.pp-footer__bar {
    border-top: 1px solid var(--pp-line);
    padding: 1rem 2rem;
}

    .pp-footer__bar p {
        margin: 0;
        text-align: center;
        font-size: .8rem;
        color: var(--pp-muted) !important;
    }

@media (max-width: 767.98px) {
    .pp-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.25rem 1.5rem;
        text-align: left;
    }

    .pp-footer__brand {
        text-align: left;
    }

    .pp-footer__bar {
        padding: 1rem 1.25rem;
    }
}

/* =============================================================================
   BOTÓN "IR ARRIBA"
   -----------------------------------------------------------------------------
   Antes era un <span> con las clases `btn btn-primary` de Bootstrap y un
   `style="width: 5rem"` inline. De ahí salían los dos defectos: el anillo azul
   lo ponía .btn-primary, y como el alto lo daban el padding y la fuente
   (~62px) contra 80px de ancho, el `border-radius: 50%` producía una elipse
   en vez de un círculo.

   Aquí la caja es cuadrada por definición, así que el redondeo sí da un círculo.
   ============================================================================= */
.pp-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;

    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;

    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--pp-navy);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 42, 99, .28);

    /* Oculto hasta que haya recorrido: la clase la pone el scroll del layout */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}

    .pp-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .pp-top i {
        margin: 0; /* home.css pone margin-right a todo <i> */
    }

    .pp-top:hover {
        background-color: var(--pp-navy-700);
        color: #fff;
        box-shadow: 0 6px 18px rgba(11, 42, 99, .36);
    }

    .pp-top:active {
        transform: translateY(1px);
    }

    .pp-top:focus-visible {
        outline: none;
        box-shadow: 0 4px 14px rgba(11, 42, 99, .28), 0 0 0 3px rgba(51, 149, 238, .5);
    }

@media (prefers-reduced-motion: reduce) {
    .pp-top {
        transition: opacity .2s ease, visibility .2s;
        transform: none;
    }

        .pp-top:active {
            transform: none;
        }
}

@media (max-width: 575.98px) {
    .pp-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* =============================================================================
   OVERLAY DE CARGA (#WindowLoad, lo crea jsShowWindowLoad del layout)
   ============================================================================= */
#WindowLoad {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .82);
    /* Bloquea la interaccion con lo que hay debajo sin necesidad del input
       oculto que se usaba antes para robar el foco. */
    cursor: progress;
}

    #WindowLoad img {
        max-width: 180px;
        height: auto;
    }

.pp-loading__msg {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pp-navy) !important;
    text-align: center;
    padding: 0 1rem;
}

/* =============================================================================
   NAVBAR
   -----------------------------------------------------------------------------
   Fondo blanco con borde inferior, para que forme una sola pieza con la barra
   de identidad y con las tarjetas del contenido. Antes era una banda gris plana
   (var(--pp-canvas-alt)) sin indicacion de en que pantalla estabas parado.
   ============================================================================= */
.pp-nav {
    background-color: var(--pp-surface);
    border-bottom: 1px solid var(--pp-line);
    padding: 0;
    /* Franja de acento con los dos colores del logo. Va como background-image y
       no como ::before a proposito: .navbar es flex, y un pseudoelemento se
       convertiria en flex item y descuadraria la barra. */
    background-image: linear-gradient(90deg, var(--pp-brand-red) 0%, var(--pp-brand-blue) 100%);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top left;
}

.pp-nav__bar {
    padding: 0 2rem;
    min-height: 60px;
    gap: 1.25rem;
}

/* --- Marca --- */
.pp-nav__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--pp-navy);
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

    .pp-nav__brand:hover,
    .pp-nav__brand:focus {
        color: var(--pp-blue);
    }

    /* home.css pone margin-right:10px a TODO <i>; aqui el gap del flex ya separa */
    .pp-nav__brand img {
        margin: 0;
    }

/* --- Hamburguesa --- */
.pp-nav__toggler {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-sm);
    color: var(--pp-navy);
    padding: .35rem .6rem;
    font-size: 1.05rem;
    line-height: 1;
}

    .pp-nav__toggler:focus {
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

    .pp-nav__toggler i {
        margin: 0;
    }

/* --- Contenedor: en escritorio reparte enlaces a la izquierda, acciones a la derecha --- */
.pp-nav__body {
    display: flex;
    align-items: center;
    gap: .75rem 1.25rem;
    /* Que envuelva antes que desbordar: en 992-1200px los enlaces, el switcher
       y el boton de salir no caben en una sola linea. */
    flex-wrap: wrap;
}

.pp-nav__links {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-direction: row;
    margin: 0;
    flex-wrap: wrap;
}

.pp-nav__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

/* --- Enlaces --- */
.pp-nav__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: var(--pp-radius-sm);
    font-size: .9rem;
    font-weight: 550;
    color: var(--pp-navy);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

    .pp-nav__link i {
        margin: 0;
        font-size: .95em;
        opacity: .75;
    }

    .pp-nav__link:hover,
    .pp-nav__link:focus {
        background-color: var(--pp-blue-soft);
        color: var(--pp-navy);
    }

    /* Pantalla en curso: relleno solido, no solo un color de texto distinto */
    .pp-nav__link.is-active {
        background-color: var(--pp-navy);
        color: #fff;
    }

        .pp-nav__link.is-active i {
            opacity: 1;
        }

        .pp-nav__link.is-active:hover,
        .pp-nav__link.is-active:focus {
            background-color: var(--pp-navy-700);
            color: #fff;
        }

/* --- Switcher de proveedor (admins) ---
   Antes tenia col-md-5 Y w-50 a la vez: dos anchos en conflicto. El ancho ahora
   es explicito y acotado, y `align-items: center` evita que el boton se estire
   a lo alto si el control de al lado crece. */
.pp-nav__switch {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 1 300px;
    width: 300px;
    max-width: 100%;
}

.pp-nav .pp-nav__select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    font-size: .85rem;
    padding: .35rem 2rem .35rem .7rem;
    color: var(--pp-ink);
}

    .pp-nav .pp-nav__select:focus {
        border-color: var(--pp-blue);
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

/* OJO con la especificidad: el <style> del layout declara `.btn { width: 100% }`.
   Ese bloque vive en el <body>, o sea DESPUES de portal.css, asi que a igualdad
   de especificidad (0,1,0) ganaba el; el boton se comia todo el ancho y dejaba
   al select en cero. Por eso el selector va anidado bajo .pp-nav (0,2,0).
   El boton es solo un icono: ancho fijo y cuadrado. */
.pp-nav .pp-nav__switch-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pp-navy);
    border: 1px solid var(--pp-navy);
    color: #fff;
    border-radius: var(--pp-radius-sm);
    padding: 0;
    font-size: .9rem;
    line-height: 1;
}

    .pp-nav .pp-nav__switch-btn:hover {
        background-color: var(--pp-navy-700);
        border-color: var(--pp-navy-700);
        color: #fff;
    }

    .pp-nav .pp-nav__switch-btn i {
        margin: 0;
    }

/* --- Cerrar sesion --- */
.pp-nav__logout {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border: 1px solid var(--pp-danger-line);
    border-radius: var(--pp-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    color: var(--pp-danger);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

    .pp-nav__logout i {
        margin: 0;
    }

    .pp-nav__logout:hover,
    .pp-nav__logout:focus {
        background-color: var(--pp-danger-soft);
        border-color: var(--pp-danger-line);
        color: var(--pp-danger);
    }

/* --- Panel offcanvas: solo aplica por debajo de 992px --- */
.pp-nav__panel-head {
    border-bottom: 1px solid var(--pp-line);
}

/* Escritorio angosto: el switcher cede ancho antes de forzar el salto de linea */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .pp-nav__bar {
        padding: 0 1.1rem;
    }

    .pp-nav__switch {
        width: 210px;
        flex-basis: 210px;
    }

    .pp-nav__link {
        padding: .45rem .6rem;
    }
}

@media (max-width: 991.98px) {
    .pp-nav__bar {
        padding: 0 1.1rem;
        min-height: 56px;
    }

    .pp-nav__panel {
        width: min(320px, 85vw);
    }

    .pp-nav__body {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1rem;
    }

    .pp-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
    }

    .pp-nav__link {
        padding: .65rem .8rem;
    }

    .pp-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        margin-left: 0;
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--pp-line);
    }

    .pp-nav__switch {
        max-width: none;
        flex: 0 0 auto;
    }

    .pp-nav__select {
        flex: 1 1 auto;
    }

    .pp-nav__logout {
        justify-content: center;
    }
}

/* -----------------------------------------------------------------------------
   select2 dentro del navbar
   -----------------------------------------------------------------------------
   select2 reemplaza el <select> por su propio widget y le pone un ancho inline.
   Sin altura ni line-height explicitos, el nombre del proveedor rompia en varias
   lineas y el control crecia a lo alto deformando toda la barra.
   -------------------------------------------------------------------------- */
/* flex-basis 0 (no `auto`): que ocupe exactamente el espacio que sobra tras el
   boton de 38px, sin depender del width inline que select2 le escribe. */
.pp-nav .select2-container {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.pp-nav .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 36px;
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    background-color: #fff;
    padding: 0 .1rem;
}

/* Una sola linea, con puntos suspensivos si el nombre del proveedor es largo */
.pp-nav .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 34px;
    padding-left: .7rem;
    padding-right: .3rem;
    font-size: .85rem;
    color: var(--pp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-nav .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pp-muted);
}

.pp-nav .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: static;
    flex: 0 0 auto;
    height: 34px;
    width: 26px;
}

.pp-nav .select2-container--default.select2-container--focus .select2-selection--single,
.pp-nav .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
}

/* El desplegable se monta en <body>, fuera de .pp-nav: se estiliza aparte.
   Con un ancho minimo propio para que las opciones se lean aunque el control
   sea angosto, que era justo el problema. */
.select2-container--default .select2-dropdown {
    min-width: 280px;
    border-color: var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    overflow: hidden;
    z-index: 20500; /* por encima del navbar y del overlay de carga */
}

.select2-container--default .select2-results__option {
    font-size: .875rem;
    padding: .5rem .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--pp-blue-soft);
        color: var(--pp-navy);
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        background-color: var(--pp-navy);
        color: #fff;
    }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    padding: .4rem .6rem;
    font-size: .85rem;
}

/* En movil el desplegable no debe salirse de la pantalla */
@media (max-width: 575.98px) {
    .select2-container--default .select2-dropdown {
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }
}

/* -----------------------------------------------------------------------------
   Barra de identidad del proveedor (layout, sobre el contenido de cada pantalla)
   -----------------------------------------------------------------------------
   Sustituye al bloque de <label> anidados que traia IDs duplicados y un
   `readonly` que en un <label> no significa nada.
   -------------------------------------------------------------------------- */
.pp-identity {
    background: var(--pp-surface);
    border-bottom: 1px solid var(--pp-line);
}

.pp-identity__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    padding: .85rem 2rem;
}

/* --- Identidad principal --- */
.pp-identity__main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.pp-identity__avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--pp-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .02em;
}

.pp-identity__text {
    min-width: 0;
}

.pp-identity__name {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pp-navy) !important;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-identity__rfc {
    margin: 0;
    font-size: .8rem;
    color: var(--pp-muted) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* --- Datos secundarios --- */
.pp-identity__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2rem;
    margin: 0;
}

.pp-identity__item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pp-identity__label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pp-muted) !important;
    margin: 0;
}

.pp-identity__value {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--pp-navy) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-identity__value--empty {
    color: var(--pp-disabled) !important;
    font-weight: 500;
    font-style: italic;
}

/* -----------------------------------------------------------------------------
   Botón de ayuda (dentro de la barra de identidad)
   -----------------------------------------------------------------------------
   Enruta al proveedor por TIPO de problema en vez de dar un correo genérico:
   los rechazos de importe son asunto de Compras, no de Sistemas. Las direcciones
   salen de C_parametros_configuracion; si no están configuradas, el botón no se
   dibuja.
   -------------------------------------------------------------------------- */
.pp-help {
    flex: 0 0 auto;
}

.pp-help__btn {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-surface);
    color: var(--pp-navy);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .pp-help__btn i {
        margin: 0;
        color: var(--pp-blue);
    }

    .pp-help__btn:hover,
    .pp-help__btn[aria-expanded="true"] {
        background-color: var(--pp-blue-soft);
        border-color: var(--pp-blue);
    }

    .pp-help__btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

.pp-help__panel.dropdown-menu {
    width: min(340px, calc(100vw - 2rem));
    padding: .5rem;
    margin-top: .4rem;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 12px 36px rgba(11, 42, 99, .16);
    background: var(--pp-surface);
}

.pp-help__title {
    margin: 0;
    padding: .4rem .6rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pp-muted) !important;
}

.pp-help__lead {
    margin: 0 0 .7rem;
    padding: 0 .6rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--pp-muted) !important;
}

    .pp-help__lead strong {
        color: var(--pp-navy);
        font-weight: 600;
    }

/* --- Lista de direcciones --- */
.pp-help__mails {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pp-help__mail-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: var(--pp-radius-sm);
}

    .pp-help__mail-row:hover {
        background-color: var(--pp-blue-soft);
    }

.pp-help__mail {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    color: var(--pp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Doble clic selecciona la dirección completa, no solo una palabra */
    user-select: all;
}

.pp-help__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .5rem;
    border: 1px solid var(--pp-field-border);
    border-radius: 6px;
    background: var(--pp-surface);
    color: var(--pp-muted);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

    .pp-help__copy i {
        margin: 0;
        font-size: .78rem;
    }

    .pp-help__copy:hover {
        color: var(--pp-blue);
        border-color: var(--pp-blue);
    }

    .pp-help__copy:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

/* --- Copiar todos --- */
.pp-help__copy-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: calc(100% - 1.2rem);
    margin: .6rem .6rem .2rem;
    padding: .45rem .7rem;
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-canvas);
    color: var(--pp-navy);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .pp-help__copy-all i {
        margin: 0;
    }

    .pp-help__copy-all:hover {
        background-color: var(--pp-blue-soft);
        border-color: var(--pp-blue);
    }

    .pp-help__copy-all:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

/* Confirmación tras copiar */
.pp-help__copy.is-copiado,
.pp-help__copy-all.is-copiado {
    color: var(--pp-ok);
    border-color: var(--pp-ok);
    background-color: var(--pp-ok-soft);
}

.pp-identity__chip {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--pp-blue);
    background: var(--pp-blue-soft);
    border-radius: 999px;
    padding: .12rem .6rem;
}

@media (max-width: 767.98px) {
    .pp-identity__inner {
        padding: .8rem 1.1rem;
        gap: .85rem 1.5rem;
    }

    .pp-identity__meta {
        gap: 0 1.5rem;
    }
}

/* El layout global pinta TODOS los <p> de gris; dentro del portal el texto
   debe heredar el color de su contenedor. */
.portal-page p {
    color: inherit;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   Encabezado de pantalla
   -------------------------------------------------------------------------- */
.pp-header {
    background: var(--pp-surface);
    border-bottom: 1px solid var(--pp-line);
    padding: 1.5rem 2rem 1.25rem;
    margin-bottom: 1.75rem;
}

.pp-header__title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--pp-navy);
    margin: 0;
    letter-spacing: -.01em;
}

.pp-header__subtitle {
    font-size: .925rem;
    color: var(--pp-muted) !important;
    margin: .35rem 0 0;
}

/* -----------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.pp-card {
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.pp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pp-line);
    background: linear-gradient(180deg, #fff 0%, var(--pp-canvas) 100%);
}

.pp-card__title {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--pp-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .pp-card__title i {
        color: var(--pp-blue);
        font-size: .95em;
    }

.pp-card__hint {
    font-size: .8rem;
    color: var(--pp-muted) !important;
    margin: 0;
}

.pp-card__body {
    padding: 1.25rem;
}

.pp-card__body--flush {
    padding: 0;
}

/* -----------------------------------------------------------------------------
   Tablas
   -----------------------------------------------------------------------------
   El encabezado navy solido chocaba con las tarjetas: un bloque duro dentro de
   un contenedor suave. Aqui es una banda clara con texto navy, separadores
   horizontales unicamente y el color reservado para lo que importa (la fila
   seleccionada y los importes).
   -------------------------------------------------------------------------- */
.portal-page table.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pp-ink);
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--pp-ink);
    border-color: var(--pp-line);
}

    /* Sin bordes verticales: solo hairlines horizontales */
    .portal-page table.table > :not(caption) > * > * {
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .portal-page table.table > thead th {
        background-color: var(--pp-thead-bg) !important;
        color: var(--pp-navy) !important;
        font-weight: 650;
        font-size: .74rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: .75rem .85rem;
        vertical-align: middle;
        border-top: 0;
        border-bottom: 1px solid var(--pp-blue-line);
    }

    .portal-page table.table > tbody td {
        padding: .68rem .85rem;
        vertical-align: middle;
        border-top: 0;
        border-bottom: 1px solid var(--pp-line-soft);
        color: var(--pp-ink);
    }

    /* La ultima fila no necesita separador: la cierra el borde de la tarjeta */
    .portal-page table.table > tbody tr:last-child > td {
        border-bottom: 0;
    }

    /* Zebra muy tenue; el peso visual lo lleva el hover, no el rayado */
    .portal-page table.table.table-striped > tbody > tr:nth-of-type(odd) > td {
        --bs-table-accent-bg: transparent;
        background-color: var(--pp-zebra);
    }

    .portal-page table.table > tbody tr:hover > td {
        background-color: var(--pp-blue-soft);
    }

/* Columnas numericas: tabulares y alineadas a la derecha para poder comparar
   importes de un vistazo. Antes todo iba centrado y los centavos no cuadraban
   visualmente entre renglones. */
.portal-page .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.portal-page th.num {
    text-align: right;
}

.portal-page .col-code {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--pp-muted);
}

.portal-page td.col-code.fw-semibold {
    color: var(--pp-navy);
}

/* Fila seleccionable (ordenes disponibles) */
.pp-row-select tbody tr {
    cursor: pointer;
}

/* Seleccion: barra de acento en el borde izquierdo de la FILA, no un
   box-shadow por celda (eso dibujaba una linea vertical en cada columna). */
.portal-page table.table > tbody tr.pp-selected > td {
    background-color: var(--pp-blue-soft) !important;
    border-bottom-color: var(--pp-blue-line);
}

    .portal-page table.table > tbody tr.pp-selected > td:first-child {
        box-shadow: inset 3px 0 0 var(--pp-blue);
        font-weight: 700;
        color: var(--pp-navy);
    }

/* Estado vacio */
.pp-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--pp-muted) !important;
}

    .pp-empty i {
        display: block;
        font-size: 1.8rem;
        margin-bottom: .6rem;
        color: var(--pp-disabled);
    }

/* -----------------------------------------------------------------------------
   Panel de carga de factura
   -------------------------------------------------------------------------- */
.pp-upload__order {
    background: var(--pp-blue-soft);
    border: 1px solid var(--pp-blue-line);
    border-radius: var(--pp-radius-sm);
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
}

.pp-upload__order--empty {
    background: var(--pp-canvas);
    border-color: var(--pp-line);
    border-style: dashed;
    color: var(--pp-muted) !important;
    text-align: center;
}

.pp-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

    .pp-kv + .pp-kv {
        margin-top: .4rem;
    }

.pp-kv__label {
    font-size: .8rem;
    color: var(--pp-muted) !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pp-kv__value {
    font-weight: 650;
    color: var(--pp-navy);
    font-variant-numeric: tabular-nums;
}

.pp-kv__value--lg {
    font-size: 1.15rem;
}

.pp-field {
    margin-bottom: 1rem;
}

.pp-field__label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pp-navy);
    margin-bottom: .35rem;
}

.portal-page .form-control {
    border-color: var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    font-size: .9rem;
    padding: .5rem .7rem;
}

    .portal-page .form-control:focus {
        border-color: var(--pp-blue);
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

    .portal-page .form-control[readonly],
    .portal-page .form-control:disabled {
        background-color: var(--pp-canvas);
        color: var(--pp-muted);
    }

/* Confirmacion de archivo elegido */
.pp-file-status {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--pp-ok);
    font-weight: 600;
}

    .pp-file-status.is-visible {
        display: flex;
    }

    .pp-file-status span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* -----------------------------------------------------------------------------
   Botones
   El layout global impone .btn { width:100%; background:#192e52 }. Dentro del
   portal los botones vuelven a medir lo que su contenido pide.
   -------------------------------------------------------------------------- */
.portal-page .btn {
    width: auto;
    border-radius: var(--pp-radius-sm);
    font-size: .9rem;
    font-weight: 600;
    padding: .5rem 1.1rem;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.portal-page .pp-btn-primary {
    background-color: var(--pp-navy);
    border-color: var(--pp-navy);
    color: #fff;
}

    .portal-page .pp-btn-primary:hover:not(:disabled) {
        background-color: var(--pp-navy-700);
        border-color: var(--pp-navy-700);
        color: #fff;
    }

    .portal-page .pp-btn-primary:disabled {
        background-color: var(--pp-disabled);
        border-color: var(--pp-disabled);
        color: #fff;
        cursor: not-allowed;
    }

.portal-page .pp-btn-ghost {
    background-color: #fff;
    border-color: var(--pp-field-border);
    color: var(--pp-navy);
}

    .portal-page .pp-btn-ghost:hover {
        background-color: var(--pp-blue-soft);
        border-color: var(--pp-blue);
        color: var(--pp-navy);
    }

.portal-page .pp-btn-block {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.pp-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border-radius: var(--pp-radius-sm);
    padding: .7rem .85rem;
    font-size: .82rem;
    line-height: 1.45;
}

.pp-note--info {
    background: var(--pp-blue-soft);
    color: var(--pp-navy) !important;
}

.pp-note--warn {
    background: var(--pp-warn-soft);
    color: var(--pp-warn) !important;
}

.pp-note i {
    margin-top: .12rem;
}

/* -----------------------------------------------------------------------------
   Perfil
   -------------------------------------------------------------------------- */
.pp-badge-edit {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pp-blue);
    background: var(--pp-blue-soft);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-left: .4rem;
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   Barra de filtros (historial)
   -------------------------------------------------------------------------- */
.pp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem;
}

    .pp-filters .pp-field {
        margin-bottom: 0;
        min-width: 170px;
    }

/* -----------------------------------------------------------------------------
   Ajustes a DataTables para que no rompa la tarjeta que lo contiene
   -----------------------------------------------------------------------------
   La tabla va al ras de la tarjeta y solo los controles (buscador, info,
   botones de exportar) llevan padding propio.
   -------------------------------------------------------------------------- */
.portal-page .dt-container {
    padding: 0;
}

    /* --- Estructura moderna de DataTables 2 (sin opcion `dom`) --- */
    .portal-page .dt-container .dt-layout-row:not(.dt-layout-table) {
        padding: .8rem 1.1rem;
        margin: 0;
        align-items: center;
    }

    .portal-page .dt-container .dt-layout-row:first-child {
        border-bottom: 1px solid var(--pp-line);
        background: var(--pp-canvas);
    }

    .portal-page .dt-container .dt-layout-row:last-child:not(.dt-layout-table) {
        border-top: 1px solid var(--pp-line);
    }

    /* --- Estructura legacy: la que realmente genera este portal, porque
           Ordenes.js y Facturas.js siguen usando dom: "Bfrtip" --- */
    .portal-page .dt-container > .dt-buttons,
    .portal-page .dt-container > .dt-search,
    .portal-page .dt-container > .dt-length {
        padding: .8rem 1.1rem;
        margin: 0;
        background: var(--pp-canvas);
        border-bottom: 1px solid var(--pp-line);
    }

    /* Cuando buscador y botones coinciden, solo el ultimo lleva separador */
    .portal-page .dt-container > .dt-buttons + .dt-search {
        border-top: 0;
    }

    .portal-page .dt-container > .dt-buttons:has(+ .dt-search) {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .portal-page .dt-container > .dt-info,
    .portal-page .dt-container > .dt-paging {
        padding: .7rem 1.1rem;
        margin: 0;
        border-top: 1px solid var(--pp-line);
    }

    /* El contenedor de la tabla siempre va al ras */
    .portal-page .dt-container > .dt-scroll,
    .portal-page .dt-container > .dt-layout-table {
        padding: 0;
        margin: 0;
    }

.portal-page div.dt-search input,
.portal-page div.dt-length select {
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-radius-sm);
    padding: .38rem .65rem;
    font-size: .85rem;
    background-color: #fff;
    margin-left: .45rem;
}

    .portal-page div.dt-search input:focus,
    .portal-page div.dt-length select:focus {
        outline: none;
        border-color: var(--pp-blue);
        box-shadow: 0 0 0 3px rgba(26, 107, 196, .18);
    }

.portal-page div.dt-search label,
.portal-page div.dt-length label,
.portal-page div.dt-info,
.portal-page div.dt-paging {
    font-size: .82rem;
    color: var(--pp-muted);
    margin: 0;
}

/* Cabecera fija cuando la tabla tiene scrollY: DataTables la separa en su
   propia tabla, hay que quitarle el borde doble contra el cuerpo. */
.portal-page .dt-scroll-head {
    border-bottom: 0;
}

.portal-page .dt-scroll-body {
    border-bottom: 0 !important;
}

    .portal-page .dt-scroll-body table.table > tbody tr:first-child > td {
        border-top: 0;
    }

.portal-page .dt-buttons {
    margin-bottom: 0;
}

/* Los botones de exportar traen su propio <button> anidado dentro del
   .dt-button que genera DataTables; se neutraliza el contenedor. */
.portal-page .dt-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-right: .4rem;
    box-shadow: none !important;
}

    .portal-page .dt-button .btn {
        background-color: var(--pp-ok);
        border-color: var(--pp-ok);
        color: #fff;
        font-size: .82rem;
        padding: .38rem .8rem;
    }

        .portal-page .dt-button .btn:hover {
            background-color: var(--pp-ok);
            border-color: var(--pp-ok);
            color: #fff;
        }

/* Seleccion nativa de DataTables (extension Select): se alinea con .pp-selected */
.portal-page table.dataTable tbody tr.selected > * {
    box-shadow: none !important;
    background-color: var(--pp-blue-soft) !important;
    color: var(--pp-ink) !important;
}

/* DataTables pinta el fondo de las celdas ordenadas; en este diseño estorba */
.portal-page table.dataTable > tbody > tr > .sorting_1,
.portal-page table.dataTable > tbody > tr > .sorting_2,
.portal-page table.dataTable > tbody > tr > .sorting_3 {
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .pp-header {
        padding: 1.15rem 1.1rem 1rem;
    }

    .pp-header__title {
        font-size: 1.35rem;
    }

    .pp-card__body {
        padding: 1rem;
    }
}