/* /Components/Layout/BarraLateral.razor.rz.scp.css */
/* =========================================================
   BARRA LATERAL
   Moderna / elegante / alineada al layout principal

   - Glass oscuro
   - Profundidad muy sutil
   - Acentos azul / cian
   - Estado activo claro
   - Sin exceso de color
   ========================================================= */


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.nav-scrollable[b-9tfufitgl4] {
    position: relative;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0.9rem 0.75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}


    /*
 * Brillo ambiental muy leve.
 *
 * No genera una tarjeta nueva.
 * Solo evita que toda la columna tenga exactamente
 * el mismo tono oscuro.
 */
    .nav-scrollable[b-9tfufitgl4]::before {
        content: "";
        position: absolute;
        top: -110px;
        left: -100px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(56, 189, 248, 0.055), rgba(59, 130, 246, 0.018) 48%, transparent 70% );
        pointer-events: none;
        z-index: 0;
    }


    .nav-scrollable[b-9tfufitgl4]::-webkit-scrollbar {
        width: 6px;
    }


    .nav-scrollable[b-9tfufitgl4]::-webkit-scrollbar-track {
        background: transparent;
    }


    .nav-scrollable[b-9tfufitgl4]::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.24);
        border-radius: 999px;
    }


        .nav-scrollable[b-9tfufitgl4]::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.40);
        }


/* =========================================================
   NAV PRINCIPAL
   ========================================================= */

nav.flex-column[b-9tfufitgl4] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}


/* =========================================================
   GRUPOS
   ========================================================= */

.nav-group[b-9tfufitgl4] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
}


/* =========================================================
   ENCABEZADOS DE GRUPO
   ========================================================= */

.nav-group-header[b-9tfufitgl4] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    padding: 0.82rem 0.95rem;
    color: #dbe2ea;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    background: radial-gradient( circle at 8% 50%, rgba(59, 130, 246, 0.055), transparent 34% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.030) );
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 13px;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), 0 7px 18px rgba(2, 6, 23, 0.09);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}


    /*
 * Acento lateral del grupo.
 *
 * En reposo casi invisible.
 * Aparece al interactuar.
 */
    .nav-group-header[b-9tfufitgl4]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient( 180deg, rgba(56, 189, 248, 0.52), rgba(59, 130, 246, 0.85), rgba(34, 197, 94, 0.28) );
        opacity: 0.20;
        transition: opacity 0.18s ease, box-shadow 0.18s ease;
    }


    /*
 * Reflejo suave en extremo derecho.
 */
    .nav-group-header[b-9tfufitgl4]::after {
        content: "";
        position: absolute;
        right: -50px;
        top: -45px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(56, 189, 248, 0.055), transparent 68% );
        pointer-events: none;
        z-index: -1;
    }


    .nav-group-header:hover[b-9tfufitgl4] {
        color: #ffffff;
        background: radial-gradient( circle at 8% 50%, rgba(59, 130, 246, 0.085), transparent 36% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.038) );
        border-color: rgba(148, 163, 184, 0.20);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 23px rgba(2, 6, 23, 0.13);
    }


        .nav-group-header:hover[b-9tfufitgl4]::before {
            opacity: 0.95;
            box-shadow: 4px 0 14px rgba(59, 130, 246, 0.15);
        }


    /* =========================================================
   ICONOS DE GRUPO
   ========================================================= */

    .nav-group-header .bi[b-9tfufitgl4] {
        margin-right: 0.12rem;
        opacity: 0.82;
        font-size: 1rem;
        transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
    }


    .nav-group-header:hover .bi[b-9tfufitgl4] {
        color: #dbeafe;
        opacity: 1;
        transform: translateY(-1px);
    }


    /* =========================================================
   NAVLINK DENTRO DE HEADER
   Ej: MIS RECIBOS
   ========================================================= */

    .nav-group-header[b-9tfufitgl4]  .nav-link {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        color: inherit;
        text-decoration: none;
        background: none;
        padding: 0;
        margin: 0;
    }


    /*
 * Cuando el header mismo contiene el NavLink activo.
 *
 * Esto hace que accesos como Mis Recibos
 * tengan un estado activo coherente con los subitems.
 */
    .nav-group-header:has(::deep .nav-link.active)[b-9tfufitgl4] {
        color: #ffffff;
        background: radial-gradient( circle at 8% 50%, rgba(59, 130, 246, 0.14), transparent 38% ), linear-gradient( 90deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.042) );
        border-color: rgba(96, 165, 250, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 9px 21px rgba(15, 23, 42, 0.17);
    }


        .nav-group-header:has(::deep .nav-link.active)[b-9tfufitgl4]::before {
            opacity: 1;
        }


/* =========================================================
   SUBITEMS - CONTENEDOR
   ========================================================= */

.nav-subitem[b-9tfufitgl4] {
    position: relative;
    padding-left: 0.44rem;
}


    .nav-subitem.expandido[b-9tfufitgl4] {
        display: flex;
        flex-direction: column;
        gap: 0.34rem;
        margin-top: 0.13rem;
    }


    .nav-subitem.colapsado[b-9tfufitgl4] {
        display: none;
    }


    /*
 * Línea guía vertical muy tenue.
 *
 * Da sensación de jerarquía entre grupo y subitems.
 */
    .nav-subitem.expandido[b-9tfufitgl4]::before {
        content: "";
        position: absolute;
        left: 0.12rem;
        top: 5px;
        bottom: 5px;
        width: 1px;
        background: linear-gradient( 180deg, rgba(96, 165, 250, 0.19), rgba(148, 163, 184, 0.08), transparent );
        pointer-events: none;
    }


    /* =========================================================
   SUBITEMS - LINKS
   ========================================================= */

    .nav-subitem[b-9tfufitgl4]  .nav-link {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.58rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.72rem 0.85rem 0.72rem 0.9rem;
        color: #c3cedb;
        text-decoration: none;
        border-radius: 11px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.024);
        line-height: 1.32;
        white-space: normal;
        word-break: break-word;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }


        /* =========================================================
   BARRA LATERAL DEL LINK
   ========================================================= */

        .nav-subitem[b-9tfufitgl4]  .nav-link::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            bottom: 9px;
            width: 2px;
            border-radius: 0 999px 999px 0;
            background: linear-gradient( 180deg, #38bdf8, #3b82f6 );
            opacity: 0;
            transition: opacity 0.18s ease, box-shadow 0.18s ease;
        }


        /* =========================================================
   HOVER SUBITEM
   ========================================================= */

        .nav-subitem[b-9tfufitgl4]  .nav-link:hover {
            background: linear-gradient( 90deg, rgba(59, 130, 246, 0.065), rgba(255, 255, 255, 0.044) );
            border-color: rgba(148, 163, 184, 0.13);
            color: #ffffff;
            transform: translateX(2px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022);
        }


            .nav-subitem[b-9tfufitgl4]  .nav-link:hover::before {
                opacity: 0.72;
            }


    /* =========================================================
   LINK ACTIVO
   ========================================================= */

    .nav-subitem[b-9tfufitgl4]  a.active {
        background: radial-gradient( circle at 4% 50%, rgba(56, 189, 248, 0.13), transparent 28% ), linear-gradient( 90deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.055), rgba(255, 255, 255, 0.035) );
        border-color: rgba(96, 165, 250, 0.21);
        color: #ffffff;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }


        .nav-subitem[b-9tfufitgl4]  a.active::before {
            opacity: 1;
            box-shadow: 4px 0 15px rgba(59, 130, 246, 0.17);
        }


/* =========================================================
   ICONOS GENERALES
   ========================================================= */

.bi[b-9tfufitgl4] {
    color: #bdc9d8;
    opacity: 0.78;
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}


.nav-subitem[b-9tfufitgl4]  .nav-link:hover .bi,
.nav-subitem[b-9tfufitgl4]  a.active .bi {
    color: #dbeafe;
    opacity: 1;
}


.nav-subitem[b-9tfufitgl4]  .nav-link:hover .bi {
    transform: translateX(1px);
}


.nav-subitem[b-9tfufitgl4]  a.active .bi {
    color: #93c5fd;
}


/* =========================================================
   FOCUS ACCESIBLE
   ========================================================= */

.nav-group-header:focus-visible[b-9tfufitgl4] {
    outline: none;
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}


.nav-subitem[b-9tfufitgl4]  .nav-link:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.11);
}


/* =========================================================
   LINKS DESHABILITADOS
   ========================================================= */

.nav-link.deshabilitado[b-9tfufitgl4] {
    color: rgba(148, 163, 184, 0.52) !important;
    pointer-events: none;
    opacity: 0.50;
    filter: grayscale(1);
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 640.98px) {

    .nav-scrollable[b-9tfufitgl4] {
        height: auto;
        max-height: calc( 100vh - 3.5rem );
        padding: 0.65rem 0.6rem 0.8rem;
    }


        .nav-scrollable[b-9tfufitgl4]::before {
            width: 200px;
            height: 200px;
            top: -90px;
            left: -90px;
            opacity: 0.72;
        }


    nav.flex-column[b-9tfufitgl4] {
        gap: 0.56rem;
    }


    .nav-group[b-9tfufitgl4] {
        gap: 0.3rem;
    }


    .nav-group-header[b-9tfufitgl4] {
        padding: 0.74rem 0.82rem;
        font-size: 0.90rem;
        border-radius: 12px;
    }


        .nav-group-header[b-9tfufitgl4]::before {
            top: 9px;
            bottom: 9px;
        }


    .nav-subitem[b-9tfufitgl4] {
        padding-left: 0.24rem;
    }


        .nav-subitem.expandido[b-9tfufitgl4]::before {
            display: none;
        }


        .nav-subitem[b-9tfufitgl4]  .nav-link {
            padding: 0.68rem 0.78rem;
            font-size: 0.90rem;
            border-radius: 10px;
        }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nav-group-header[b-9tfufitgl4],
    .nav-group-header[b-9tfufitgl4]::before,
    .nav-subitem[b-9tfufitgl4]  .nav-link,
    .nav-subitem[b-9tfufitgl4]  .nav-link::before,
    .bi[b-9tfufitgl4] {
        transition: none !important;
    }


        .nav-group-header:hover[b-9tfufitgl4],
        .nav-subitem[b-9tfufitgl4]  .nav-link:hover {
            transform: none;
        }
}
/* /Components/Layout/BarraSuperior.razor.rz.scp.css */
/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

.top-row[b-kr0q9r01zo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1.15rem;
    height: 64px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    /*
     * Capas:
     *
     * overlay dropdown usuario = 1
     * top-row                  = 2
     * usuario                  = 3
     * dropdown usuario         = 4
     *
     * Modal manuales:
     *
     * overlay = 1000
     * modal   = 1001
     */

    z-index: 2;
    overflow: visible !important;
    pointer-events: auto;
    isolation: isolate;
    background: radial-gradient( circle at 8% 0%, rgba(56, 189, 248, 0.055), transparent 30% ), radial-gradient( circle at 92% 100%, rgba(59, 130, 246, 0.045), transparent 32% ), linear-gradient( 180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.76) );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: white;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


    /*
 * Línea cromática muy tenue.
 * Mantiene relación visual con Login e Inicio.
 */
    .top-row[b-kr0q9r01zo]::after {
        content: "";
        position: absolute;
        left: 72px;
        right: 72px;
        bottom: -1px;
        height: 1px;
        z-index: -1;
        background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.25), rgba(56, 189, 248, 0.42), rgba(34, 197, 94, 0.18), transparent );
        pointer-events: none;
    }


/* ==========================================================
   BOTONES PRINCIPALES
   ========================================================== */

.btn-home[b-kr0q9r01zo],
.btn-logout[b-kr0q9r01zo],
.btn-manuales[b-kr0q9r01zo],
.btn-agente-firma[b-kr0q9r01zo],
.btn-campana[b-kr0q9r01zo] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.025);
    border-radius: 11px;
    color: #cbd5e1;
    font-size: 1.1rem;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
    transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease, transform 0.20s ease, opacity 0.20s ease;
}


    .btn-home:hover[b-kr0q9r01zo],
    .btn-logout:hover[b-kr0q9r01zo],
    .btn-campana:hover[b-kr0q9r01zo] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.085);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(2, 6, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }


    .btn-home:active[b-kr0q9r01zo],
    .btn-logout:active[b-kr0q9r01zo],
    .btn-manuales:active[b-kr0q9r01zo],
    .btn-agente-firma:active[b-kr0q9r01zo],
    .btn-campana:active[b-kr0q9r01zo] {
        transform: translateY(0);
    }


    .btn-home:focus-visible[b-kr0q9r01zo],
    .btn-logout:focus-visible[b-kr0q9r01zo],
    .btn-manuales:focus-visible[b-kr0q9r01zo],
    .btn-agente-firma:focus-visible[b-kr0q9r01zo],
    .btn-campana:focus-visible[b-kr0q9r01zo],
    .btn-usuario:focus-visible[b-kr0q9r01zo] {
        outline: none;
        border-color: rgba(96, 165, 250, 0.45);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
    }


/* ==========================================================
   ICONOS
   ========================================================== */

.icon-barra[b-kr0q9r01zo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.20s ease, color 0.20s ease;
}


/* ==========================================================
   HOME
   ========================================================== */

.btn-home[b-kr0q9r01zo] {
    color: #cbd5e1;
}


    .btn-home:hover .icon-barra[b-kr0q9r01zo] {
        color: #ffffff;
    }


/* ==========================================================
   FECHA
   ========================================================== */

.fecha-hoy[b-kr0q9r01zo] {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba( 203, 213, 225, 0.88 );
    font-weight: 600;
    font-size: 0.92rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.012em;
    user-select: none;
    text-shadow: 0 1px 8px rgba(2, 6, 23, 0.14);
}


/* ==========================================================
   MANUALES - BOTÓN PDF
   ========================================================== */

.btn-manuales[b-kr0q9r01zo] {
    position: relative;
    font-size: 1.13rem;
    background: rgba(239, 68, 68, 0.025);
    border-color: rgba(248, 113, 113, 0.045);
}


    /*
 * IMPORTANTE:
 * El color se aplica directamente al Bootstrap Icon.
 * Así no depende de otras reglas globales sobre .bi.
 */
    .btn-manuales .bi[b-kr0q9r01zo],
    .btn-manuales .icon-barra[b-kr0q9r01zo] {
        color: #f87171 !important;
        opacity: 1;
    }


    .btn-manuales:hover[b-kr0q9r01zo] {
        background: rgba(239, 68, 68, 0.09);
        border-color: rgba(248, 113, 113, 0.18);
        transform: translateY(-1px);
        box-shadow: 0 7px 18px rgba(127, 29, 29, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }


        .btn-manuales:hover .bi[b-kr0q9r01zo],
        .btn-manuales:hover .icon-barra[b-kr0q9r01zo] {
            color: #fca5a5 !important;
            opacity: 1;
            transform: translateY(-1px) scale(1.05);
        }
/* ==========================================================
   AGENTE DE FIRMA - DESCARGA
   ========================================================== */

.btn-agente-firma[b-kr0q9r01zo] {
    position: relative;
    font-size: 1.12rem;
    background: rgba(16, 185, 129, 0.025);
    border-color: rgba(52, 211, 153, 0.05);
}


    .btn-agente-firma .bi[b-kr0q9r01zo],
    .btn-agente-firma .icon-barra[b-kr0q9r01zo] {
        color: #34d399 !important;
        opacity: 1;
    }


    .btn-agente-firma:hover[b-kr0q9r01zo] {
        background: rgba(16, 185, 129, 0.10);
        border-color: rgba(52, 211, 153, 0.20);
        transform: translateY(-1px);
        box-shadow: 0 7px 18px rgba(6, 78, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }


        .btn-agente-firma:hover .bi[b-kr0q9r01zo],
        .btn-agente-firma:hover .icon-barra[b-kr0q9r01zo] {
            color: #6ee7b7 !important;
            opacity: 1;
            transform: translateY(-1px) scale(1.05);
        }


/* ==========================================================
   CAMPANA
   ========================================================== */

.btn-campana[b-kr0q9r01zo] {
    position: relative;
    font-size: 1.16rem;
    overflow: visible;
    color: #cbd5e1;
}


    .btn-campana:hover .icon-barra[b-kr0q9r01zo] {
        color: #ffffff;
    }


.campana-animada[b-kr0q9r01zo] {
    animation: campana-move-b-kr0q9r01zo 1s infinite alternate;
    color: #f87171 !important;
}


.contador-notificaciones[b-kr0q9r01zo] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient( 180deg, #ffffff, #f8fafc );
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.12);
    font-weight: 800;
    font-size: 0.68rem;
    line-height: 1;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
    pointer-events: none;
}


@keyframes campana-move-b-kr0q9r01zo {

    from {
        transform: rotate(-9deg);
    }

    to {
        transform: rotate(9deg);
    }
}


/* ==========================================================
   USUARIO
   ========================================================== */

.usuario-box[b-kr0q9r01zo] {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
    z-index: 3;
    pointer-events: auto;
}


.btn-usuario[b-kr0q9r01zo] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    align-self: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    pointer-events: auto;
}


.usuario-avatar[b-kr0q9r01zo] {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #60a5fa, #2563eb );
    color: white;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    border: 1px solid rgba(147, 197, 253, 0.18);
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: box-shadow 0.20s ease, filter 0.20s ease, border-color 0.20s ease, transform 0.20s ease, opacity 0.20s ease;
}


    .usuario-avatar:hover[b-kr0q9r01zo] {
        filter: brightness(1.055);
        transform: translateY(-1px);
        border-color: rgba(191, 219, 254, 0.28);
        box-shadow: 0 9px 22px rgba(37, 99, 235, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    }


.usuario-box.abierto
.usuario-avatar[b-kr0q9r01zo] {
    box-shadow: 0 9px 23px rgba(37, 99, 235, 0.34), 0 0 0 3px rgba(59, 130, 246, 0.10);
    border-color: rgba(147, 197, 253, 0.32);
}


/* ==========================================================
   DROPDOWN USUARIO
   ========================================================== */

.usuario-dropdown[b-kr0q9r01zo] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    min-width: 220px;
    max-width: calc( 100vw - 1rem );
    padding: 8px;
    z-index: 4;
    pointer-events: auto !important;
    background: radial-gradient( circle at 90% 0%, rgba(59, 130, 246, 0.07), transparent 34% ), rgba(15, 23, 42, 0.985);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(2, 6, 23, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}


    /*
 * Pequeño brillo superior dentro del dropdown.
 */
    .usuario-dropdown[b-kr0q9r01zo]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(96, 165, 250, 0.38), transparent );
        pointer-events: none;
    }


.usuario-box.abierto
.usuario-dropdown[b-kr0q9r01zo] {
    display: block;
}


.usuario-dropdown a[b-kr0q9r01zo],
.usuario-dropdown button[b-kr0q9r01zo] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 10px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    pointer-events: auto !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


    .usuario-dropdown a:hover[b-kr0q9r01zo],
    .usuario-dropdown button:hover[b-kr0q9r01zo] {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        transform: translateX(1px);
    }


    .usuario-dropdown a:focus-visible[b-kr0q9r01zo],
    .usuario-dropdown button:focus-visible[b-kr0q9r01zo] {
        outline: none;
        background: rgba(59, 130, 246, 0.12);
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    }


.usuario-dropdown
.dropdown-divider[b-kr0q9r01zo] {
    height: 1px;
    margin: 6px 0;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.09), transparent );
    pointer-events: none;
}


/* ==========================================================
   OVERLAY DROPDOWN USUARIO
   ========================================================== */

.overlay-dropdown[b-kr0q9r01zo] {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}


/* ==========================================================
   MANUALES - OVERLAY
   ========================================================== */

.manuales-overlay[b-kr0q9r01zo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: manuales-overlay-in-b-kr0q9r01zo 0.18s ease-out;
}


/* ==========================================================
   MANUALES - MODAL
   ========================================================== */

.manuales-modal[b-kr0q9r01zo] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    transform: translate( -50%, -50% );
    display: flex;
    flex-direction: column;
    width: min( 640px, calc(100vw - 2rem) );
    max-height: min( 720px, calc(100vh - 2rem) );
    color: #e5e7eb;
    background: radial-gradient( circle at 96% 0%, rgba(59, 130, 246, 0.08), transparent 28% ), linear-gradient( 145deg, rgba(15, 23, 42, 0.995), rgba(17, 24, 39, 0.995) );
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow: 0 34px 84px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    animation: manuales-modal-in-b-kr0q9r01zo 0.20s ease-out;
}


    /*
 * Línea superior de identidad.
 */
    .manuales-modal[b-kr0q9r01zo]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 2px;
        z-index: 2;
        background: linear-gradient( 90deg, rgba(239, 68, 68, 0.10), rgba(248, 113, 113, 0.55), rgba(59, 130, 246, 0.40), rgba(56, 189, 248, 0.24), transparent );
        border-radius: 0 0 999px 999px;
        pointer-events: none;
    }


/* ==========================================================
   MANUALES - HEADER
   ========================================================== */

.manuales-modal-header[b-kr0q9r01zo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: rgba(255, 255, 255, 0.022);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}


.manuales-header-identidad[b-kr0q9r01zo] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}


/* PDF también en el encabezado */

.manuales-modal-icono[b-kr0q9r01zo] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: linear-gradient( 145deg, rgba(239, 68, 68, 0.15), rgba(127, 29, 29, 0.07) );
    border: 1px solid rgba(248, 113, 113, 0.14);
    color: #fca5a5;
    font-size: 1.3rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


.manuales-modal-titulo[b-kr0q9r01zo] {
    min-width: 0;
}


    .manuales-modal-titulo h2[b-kr0q9r01zo] {
        margin: 0;
        color: #f8fafc;
        font-size: 1.12rem;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.01em;
    }


    .manuales-modal-titulo p[b-kr0q9r01zo] {
        margin: 0.25rem 0 0;
        color: #94a3b8;
        font-size: 0.84rem;
        line-height: 1.35;
    }


/* ==========================================================
   MANUALES - BOTÓN CERRAR
   ========================================================== */

.btn-cerrar-manuales[b-kr0q9r01zo] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}


    .btn-cerrar-manuales:hover[b-kr0q9r01zo] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
    }


    .btn-cerrar-manuales:focus-visible[b-kr0q9r01zo] {
        outline: none;
        border-color: rgba(96, 165, 250, 0.42);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
    }


/* ==========================================================
   MANUALES - BODY
   ========================================================== */

.manuales-modal-body[b-kr0q9r01zo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.4rem 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.30) transparent;
}


    .manuales-modal-body[b-kr0q9r01zo]::-webkit-scrollbar {
        width: 7px;
    }


    .manuales-modal-body[b-kr0q9r01zo]::-webkit-scrollbar-track {
        background: transparent;
    }


    .manuales-modal-body[b-kr0q9r01zo]::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.28);
        border-radius: 999px;
    }


/* ==========================================================
   MANUAL - CARD
   ========================================================== */

.manual-card[b-kr0q9r01zo] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.025) );
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}


    .manual-card:hover[b-kr0q9r01zo] {
        transform: translateY(-1px);
        background: linear-gradient( 180deg, rgba(59, 130, 246, 0.055), rgba(255, 255, 255, 0.032) );
        border-color: rgba(96, 165, 250, 0.17);
        box-shadow: 0 11px 28px rgba(2, 6, 23, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }


    .manual-card + .manual-card[b-kr0q9r01zo] {
        margin-top: 0.75rem;
    }


/* ==========================================================
   MANUAL - ICONO PDF
   ========================================================== */

.manual-card-icono[b-kr0q9r01zo] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient( 145deg, rgba(239, 68, 68, 0.13), rgba(127, 29, 29, 0.055) );
    border: 1px solid rgba(248, 113, 113, 0.13);
    color: #f87171;
    font-size: 1.28rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* ==========================================================
   MANUAL - CONTENIDO
   ========================================================== */

.manual-card-contenido[b-kr0q9r01zo] {
    flex: 1 1 auto;
    min-width: 0;
}


.manual-card-titulo[b-kr0q9r01zo] {
    color: #f1f5f9;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.008em;
}


.manual-card-descripcion[b-kr0q9r01zo] {
    margin-top: 0.25rem;
    color: #94a3b8;
    font-size: 0.81rem;
    line-height: 1.45;
}


/* ==========================================================
   MANUAL - VERSIÓN
   ========================================================== */

.manual-card-version[b-kr0q9r01zo] {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.16rem 0.45rem;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.085);
    border: 1px solid rgba(96, 165, 250, 0.10);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
}


/* ==========================================================
   MANUAL - ACCIÓN
   ========================================================== */

.manual-card-accion[b-kr0q9r01zo] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.09);
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}


    .manual-card-accion:visited[b-kr0q9r01zo] {
        color: #93c5fd;
    }


    .manual-card-accion:hover[b-kr0q9r01zo] {
        color: #ffffff;
        background: rgba(59, 130, 246, 0.19);
        border-color: rgba(96, 165, 250, 0.25);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(30, 64, 175, 0.10);
    }


    .manual-card-accion:focus-visible[b-kr0q9r01zo] {
        outline: none;
        border-color: rgba(96, 165, 250, 0.42);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
    }


/* ==========================================================
   MANUALES - ESTADO VACÍO
   ========================================================== */

.manuales-vacio[b-kr0q9r01zo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}


.manuales-vacio-icono[b-kr0q9r01zo] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    font-size: 1.25rem;
}


.manuales-vacio-texto[b-kr0q9r01zo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}


    .manuales-vacio-texto strong[b-kr0q9r01zo] {
        color: #f1f5f9;
        font-size: 0.94rem;
        font-weight: 700;
    }


    .manuales-vacio-texto span[b-kr0q9r01zo] {
        color: #94a3b8;
        font-size: 0.81rem;
        line-height: 1.45;
    }


/* ==========================================================
   MANUALES - ESTADOS
   ========================================================== */

.manuales-estado[b-kr0q9r01zo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}


.manuales-estado-icono[b-kr0q9r01zo] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.12);
    color: #f87171;
    font-size: 1.2rem;
}


.manuales-estado-texto[b-kr0q9r01zo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}


    .manuales-estado-texto strong[b-kr0q9r01zo] {
        color: #f1f5f9;
        font-size: 0.94rem;
        font-weight: 700;
    }


    .manuales-estado-texto span[b-kr0q9r01zo] {
        color: #94a3b8;
        font-size: 0.81rem;
        line-height: 1.45;
    }


.manuales-spinner[b-kr0q9r01zo] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(148, 163, 184, 0.18);
    border-top-color: #60a5fa;
    animation: manuales-spinner-giro-b-kr0q9r01zo 0.8s linear infinite;
}


@keyframes manuales-spinner-giro-b-kr0q9r01zo {

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   ANIMACIONES MANUALES
   ========================================================== */

@keyframes manuales-overlay-in-b-kr0q9r01zo {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes manuales-modal-in-b-kr0q9r01zo {

    from {
        opacity: 0;
        transform: translate( -50%, -48% ) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate( -50%, -50% ) scale(1);
    }
}


/* ==========================================================
   RESPONSIVE <= 768px
   ========================================================== */

@media (max-width: 768px) {

    .top-row[b-kr0q9r01zo] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 56px;
        padding: 0.45rem 0.65rem;
        gap: 0.35rem;
    }


        .top-row[b-kr0q9r01zo]::after {
            left: 52px;
            right: 52px;
        }


    .btn-home[b-kr0q9r01zo],
    .btn-logout[b-kr0q9r01zo],
    .btn-manuales[b-kr0q9r01zo],
    .btn-agente-firma[b-kr0q9r01zo],
    .btn-campana[b-kr0q9r01zo] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 1rem;
        border-radius: 9px;
    }


    .fecha-hoy[b-kr0q9r01zo] {
        min-width: 0;
        font-size: 0.8rem;
    }


    .usuario-box[b-kr0q9r01zo] {
        margin-left: 0.15rem;
    }


    .usuario-avatar[b-kr0q9r01zo] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 0.8rem;
    }


    .usuario-dropdown[b-kr0q9r01zo] {
        min-width: 190px;
        max-width: calc( 100vw - 1rem );
        right: 0;
    }


    .manuales-modal[b-kr0q9r01zo] {
        width: min( 580px, calc(100vw - 1.5rem) );
        max-height: calc( 100vh - 1.5rem );
    }


    .manuales-modal-header[b-kr0q9r01zo] {
        padding: 1.05rem;
    }


    .manuales-modal-body[b-kr0q9r01zo] {
        padding: 1.05rem;
    }
}


/* ==========================================================
   RESPONSIVE <= 576px
   ========================================================== */

@media (max-width: 576px) {

    .top-row[b-kr0q9r01zo] {
        height: 54px;
        padding: 0.4rem 0.5rem;
        gap: 0.25rem;
    }


        .top-row[b-kr0q9r01zo]::after {
            left: 40px;
            right: 40px;
        }


    .fecha-hoy[b-kr0q9r01zo] {
        font-size: 0.72rem;
    }


    .contador-notificaciones[b-kr0q9r01zo] {
        top: -2px;
        right: -2px;
        min-width: 16px;
        padding: 2px 5px;
        font-size: 0.6rem;
    }


    .usuario-avatar[b-kr0q9r01zo] {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        font-size: 0.72rem;
    }


    .usuario-dropdown[b-kr0q9r01zo] {
        min-width: 170px;
        max-width: calc( 100vw - 1rem );
    }


        .usuario-dropdown a[b-kr0q9r01zo],
        .usuario-dropdown button[b-kr0q9r01zo] {
            padding: 9px 10px;
            font-size: 0.85rem;
        }


    /*
     * Modal como bottom sheet.
     */

    .manuales-modal[b-kr0q9r01zo] {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: min( 78vh, 680px );
        transform: none;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        animation: manuales-mobile-in-b-kr0q9r01zo 0.22s ease-out;
    }


        .manuales-modal[b-kr0q9r01zo]::before {
            left: 24px;
            right: 24px;
        }


    .manuales-modal-header[b-kr0q9r01zo] {
        padding: 1rem;
    }


    .manuales-modal-body[b-kr0q9r01zo] {
        padding: 0.9rem 1rem 1.15rem;
    }


    .manuales-modal-icono[b-kr0q9r01zo] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 1.1rem;
    }


    .manuales-modal-titulo h2[b-kr0q9r01zo] {
        font-size: 1rem;
    }


    .manuales-modal-titulo p[b-kr0q9r01zo] {
        font-size: 0.76rem;
    }


    .manual-card[b-kr0q9r01zo] {
        gap: 0.8rem;
        padding: 0.9rem;
    }


    .manual-card-icono[b-kr0q9r01zo] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        font-size: 1.15rem;
    }


    .manual-card-accion[b-kr0q9r01zo] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }


    .manuales-vacio[b-kr0q9r01zo] {
        align-items: flex-start;
        padding: 0.9rem;
    }


    .manuales-vacio-icono[b-kr0q9r01zo] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }
}


/* ==========================================================
   RESPONSIVE <= 390px
   ========================================================== */

@media (max-width: 390px) {

    .top-row[b-kr0q9r01zo] {
        padding: 0.35rem 0.4rem;
        gap: 0.2rem;
    }


        .top-row[b-kr0q9r01zo]::after {
            left: 34px;
            right: 34px;
        }


    .btn-home[b-kr0q9r01zo],
    .btn-logout[b-kr0q9r01zo],
    .btn-manuales[b-kr0q9r01zo],
    .btn-agente-firma[b-kr0q9r01zo],
    .btn-campana[b-kr0q9r01zo] {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        font-size: 0.92rem;
        border-radius: 8px;
    }


    .fecha-hoy[b-kr0q9r01zo] {
        font-size: 0.68rem;
    }


    .usuario-avatar[b-kr0q9r01zo] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 0.68rem;
    }


    .usuario-box[b-kr0q9r01zo] {
        margin-left: 0;
    }


    .manuales-modal-header[b-kr0q9r01zo] {
        gap: 0.65rem;
        padding: 0.85rem;
    }


    .manuales-header-identidad[b-kr0q9r01zo] {
        gap: 0.7rem;
    }


    .manuales-modal-icono[b-kr0q9r01zo] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 10px;
        font-size: 1rem;
    }


    .manuales-modal-titulo p[b-kr0q9r01zo] {
        display: none;
    }


    .btn-cerrar-manuales[b-kr0q9r01zo] {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }


    .manuales-modal-body[b-kr0q9r01zo] {
        padding: 0.8rem;
    }


    .manual-card[b-kr0q9r01zo] {
        gap: 0.7rem;
        padding: 0.8rem;
    }


    .manual-card-icono[b-kr0q9r01zo] {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 1.05rem;
    }


    .manual-card-titulo[b-kr0q9r01zo] {
        font-size: 0.88rem;
    }


    .manual-card-descripcion[b-kr0q9r01zo] {
        font-size: 0.76rem;
    }


    .manual-card-accion[b-kr0q9r01zo] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        border-radius: 9px;
    }
}


/* ==========================================================
   ANIMACIÓN MOBILE
   ========================================================== */

@keyframes manuales-mobile-in-b-kr0q9r01zo {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   ACCIÓN DESHABILITADA
   ========================================================== */

.manual-card-accion:disabled[b-kr0q9r01zo] {
    opacity: 0.45;
    cursor: default;
    transform: none;
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .usuario-avatar[b-kr0q9r01zo],
    .usuario-dropdown a[b-kr0q9r01zo],
    .usuario-dropdown button[b-kr0q9r01zo],
    .btn-home[b-kr0q9r01zo],
    .btn-logout[b-kr0q9r01zo],
    .btn-manuales[b-kr0q9r01zo],
    .btn-agente-firma[b-kr0q9r01zo],
    .btn-campana[b-kr0q9r01zo],
    .icon-barra[b-kr0q9r01zo],
    .btn-cerrar-manuales[b-kr0q9r01zo],
    .manual-card[b-kr0q9r01zo],
    .manual-card-accion[b-kr0q9r01zo] {
        transition: none !important;
    }


    .campana-animada[b-kr0q9r01zo] {
        animation: none !important;
    }


    .manuales-overlay[b-kr0q9r01zo],
    .manuales-modal[b-kr0q9r01zo],
    .manuales-spinner[b-kr0q9r01zo] {
        animation: none !important;
    }
}
/* /Components/Layout/Esqueleto.razor.rz.scp.css */
/* ==========================================================
   LAYOUT GENERAL

   JERARQU�A AUTORITATIVA

   Contenido normal          auto
   Sidebar                     20
   Bot�n sidebar               25
   Barra superior             100

   Modal backdrop            1000
   Modal                     1010
   Toast                     1100
   Sistema                   1200
   ========================================================== */


/* ==========================================================
   ROOT DEL LAYOUT
   ========================================================== */

.layout-root[b-mf19nc3ke9] {
    /* ----------------------------------------------------------
       VARIABLES DEL LAYOUT

       IMPORTANTE:
       Se definen ac� porque .layout-root es el verdadero padre
       del layout y las variables se heredan a sus descendientes.

       No dependemos de :root declarado dentro de otro .razor.css.
       ---------------------------------------------------------- */

    --layout-bg-0: #07111f;
    --layout-bg-1: #0b1628;
    --layout-bg-2: #0f172a;
    --layout-bg-3: #111827;
    --surface-soft: rgba(255, 255, 255, 0.045);
    --surface-soft-2: rgba(255, 255, 255, 0.065);
    --surface-border: rgba(255, 255, 255, 0.095);
    --accent-main: rgba(96, 165, 250, 0.32);
    --accent-soft: rgba(96, 165, 250, 0.14);
    --accent-muted: rgba(148, 163, 184, 0.14);
    --text-main: #e5e7eb;
    --text-muted: #cbd5e1;
    --shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.22);
    --z-content: 0;
    --z-sidebar: 20;
    --z-menu-toggle: 25;
    --z-topbar: 100;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-toast: 1100;
    --z-system: 1200;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--text-main);
    isolation: isolate;
    overflow-x: hidden;
    background: radial-gradient( circle at 18% 12%, rgba(59, 130, 246, 0.095), transparent 34% ), radial-gradient( circle at 88% 92%, rgba(14, 165, 233, 0.075), transparent 36% ), linear-gradient( 135deg, var(--layout-bg-0) 0%, var(--layout-bg-1) 42%, var(--layout-bg-2) 100% );
}


    /* ==========================================================
   BURBUJAS DE FONDO
   ========================================================== */

    .layout-root[b-mf19nc3ke9]::before {
        content: "";
        position: fixed;
        right: -180px;
        bottom: -210px;
        width: 620px;
        height: 620px;
        z-index: 0;
        pointer-events: none;
        opacity: 0.50;
        background: radial-gradient( circle at 54% 48%, rgba(96, 165, 250, 0.22) 0 76px, transparent 78px ), radial-gradient( circle at 36% 68%, rgba(125, 211, 252, 0.14) 0 58px, transparent 60px ), radial-gradient( circle at 72% 72%, rgba(148, 163, 184, 0.12) 0 52px, transparent 54px ), radial-gradient( circle at 44% 36%, rgba(59, 130, 246, 0.13) 0 42px, transparent 44px ), radial-gradient( circle at 82% 42%, rgba(203, 213, 225, 0.08) 0 36px, transparent 38px );
        filter: blur(0.5px);
        animation: fondoBurbujasSutil-b-mf19nc3ke9 36s ease-in-out infinite alternate;
    }


    /* ==========================================================
   TEXTURA GENERAL
   ========================================================== */

    .layout-root[b-mf19nc3ke9]::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.18;
        background: linear-gradient( rgba(255, 255, 255, 0.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px ), linear-gradient( 135deg, transparent 0%, transparent 64%, rgba(96, 165, 250, 0.035) 65%, transparent 66%, transparent 100% );
        background-size: 64px 64px, 64px 64px, 100% 100%;
        mask-image: radial-gradient( circle at center, black 0%, black 64%, transparent 100% );
    }


@keyframes fondoBurbujasSutil-b-mf19nc3ke9 {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-12px, -10px, 0) scale(1.025);
    }
}


/* ==========================================================
   BARRA SUPERIOR

   ESTA ES LA CAPA GLOBAL DE NAVEGACI�N.
   ========================================================== */

.topbar-shell[b-mf19nc3ke9] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    /*
     * N�mero concreto + fallback.
     *
     * Esto evita que el topbar pueda quedar en z-index:auto
     * durante un render intermedio.
     */
    z-index: var(--z-topbar, 100);
    /*
     * El topbar completo tiene su propio contexto.
     *
     * Inicio, Cartelera y widgets no pueden intercalarse
     * entre avatar, overlay y dropdown.
     */
    isolation: isolate;
    overflow: visible !important;
    pointer-events: auto;
}


    /* Barra real renderizada por BarraSuperior */

    .topbar-shell[b-mf19nc3ke9]  .top-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 64px;
        position: relative;
        z-index: 2 !important;
        overflow: visible !important;
        pointer-events: auto;
        box-sizing: border-box;
        background: linear-gradient( 180deg, rgba(7, 17, 31, 0.88), rgba(7, 17, 31, 0.76) );
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.13);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20), inset 0 -1px 0 rgba(96, 165, 250, 0.045);
    }


    /*
 * overlay-dropdown se renderiza como hermano de top-row.
 *
 * Debe:
 * - estar arriba de Inicio;
 * - estar debajo de top-row;
 * - permitir que Perfil/Cerrar sesi�n reciban el click.
 */

    .topbar-shell[b-mf19nc3ke9]  .overlay-dropdown {
        z-index: 1 !important;
    }


    /*
 * Protecci�n adicional del �rea de usuario.
 */

    .topbar-shell[b-mf19nc3ke9]  .usuario-box {
        position: relative;
        z-index: 3 !important;
        pointer-events: auto;
    }


    .topbar-shell[b-mf19nc3ke9]  .btn-usuario,
    .topbar-shell[b-mf19nc3ke9]  .usuario-avatar {
        pointer-events: auto !important;
    }


    .topbar-shell[b-mf19nc3ke9]  .usuario-dropdown {
        z-index: 4 !important;
        pointer-events: auto !important;
    }


        .topbar-shell[b-mf19nc3ke9]  .usuario-dropdown button,
        .topbar-shell[b-mf19nc3ke9]  .usuario-dropdown a {
            pointer-events: auto !important;
        }


    .topbar-shell[b-mf19nc3ke9]  a,
    .topbar-shell[b-mf19nc3ke9]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }


        .topbar-shell[b-mf19nc3ke9]  a:hover,
        .topbar-shell[b-mf19nc3ke9]  .btn-link:hover {
            text-decoration: underline;
        }


/* ==========================================================
   CUERPO DEL LAYOUT
   ========================================================== */

.layout-body[b-mf19nc3ke9] {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    position: relative;
    /*
     * NO establecer z-index ac�.
     *
     * As� no encerramos modales ni contenido en un stacking
     * context independiente.
     */
    z-index: auto;
    overflow-x: hidden;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar[b-mf19nc3ke9] {
    width: 250px;
    min-width: 250px;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    position: sticky;
    top: 64px;
    z-index: var(--z-sidebar, 20);
    flex-shrink: 0;
    pointer-events: auto;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.50) ) !important;
    color: white !important;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.18), inset -1px 0 0 rgba(96, 165, 250, 0.075) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.13) !important;
    border-radius: 0 14px 0 0 !important;
    overflow: hidden !important;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transition: width 0.2s ease, min-width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}


    /* Luz interna */

    .sidebar[b-mf19nc3ke9]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 18% 12%, rgba(96, 165, 250, 0.075), transparent 34% ), radial-gradient( circle at 88% 90%, rgba(148, 163, 184, 0.045), transparent 40% );
        opacity: 0.90;
    }


    /* Acento vertical */

    .sidebar[b-mf19nc3ke9]::after {
        content: "";
        position: absolute;
        top: 20px;
        right: 0;
        width: 2px;
        height: 78px;
        border-radius: 999px 0 0 999px;
        background: linear-gradient( 180deg, rgba(96, 165, 250, 0.62), rgba(125, 211, 252, 0.18) );
        box-shadow: 0 0 14px rgba(96, 165, 250, 0.16);
        opacity: 0.75;
        pointer-events: none;
    }


.sidebar-abierta[b-mf19nc3ke9] {
    width: 250px;
    min-width: 250px;
}


.sidebar-cerrada[b-mf19nc3ke9] {
    width: 0;
    min-width: 0;
    padding: 0;
    border: none !important;
    overflow: hidden !important;
}


/* ==========================================================
   BOT�N MEN� LATERAL
   ========================================================== */

.menu-toggle[b-mf19nc3ke9] {
    position: absolute;
    top: 18px;
    left: 250px;
    transform: translateX(-50%);
    z-index: var(--z-menu-toggle, 25);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    pointer-events: auto;
    background: linear-gradient( 135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96) );
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: left 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}


    .menu-toggle i[b-mf19nc3ke9] {
        font-size: 22px;
        pointer-events: none;
    }


    .menu-toggle:hover[b-mf19nc3ke9] {
        background: linear-gradient( 135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.96) );
        border-color: rgba(96, 165, 250, 0.32);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 18px rgba(96, 165, 250, 0.10);
    }


    .menu-toggle:focus-visible[b-mf19nc3ke9] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22), 0 8px 20px rgba(0, 0, 0, 0.30);
    }


/* Sidebar abierto */

.layout-sidebar-abierta .menu-toggle[b-mf19nc3ke9] {
    left: 250px;
    transform: translateX(-50%);
}


/* Sidebar cerrado */

.layout-sidebar-cerrada .menu-toggle[b-mf19nc3ke9] {
    left: 18px;
    transform: translateX(0);
}


/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

.main-content[b-mf19nc3ke9] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    /*
     * IMPORTANTE:
     *
     * No usar:
     *
     * z-index: 1;
     * isolation: isolate;
     *
     * porque convertir�amos todo Inicio en una capa propia.
     */
    z-index: auto;
    isolation: auto;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
}


    /* ==========================================================
   BRILLO DEL �REA PRINCIPAL
   ========================================================== */

    .main-content[b-mf19nc3ke9]::before {
        content: "";
        position: fixed;
        inset: 64px 0 0 0;
        z-index: 0;
        /*
     * Nunca debe interceptar clicks.
     */
        pointer-events: none;
        background: radial-gradient( circle at 52% 10%, rgba(96, 165, 250, 0.040), transparent 34% ), radial-gradient( circle at 96% 72%, rgba(125, 211, 252, 0.035), transparent 30% );
    }


/* ==========================================================
   CONTENIDO DE P�GINA
   ========================================================== */

.content[b-mf19nc3ke9] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1.5rem 1.5rem 2rem 2rem;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    z-index: auto;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

    .layout-root[b-mf19nc3ke9] {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


        .layout-root[b-mf19nc3ke9]::before {
            right: -250px;
            bottom: -270px;
            width: 560px;
            height: 560px;
            opacity: 0.32;
            animation: none;
        }


        .layout-root[b-mf19nc3ke9]::after {
            opacity: 0.11;
            background-size: 72px 72px, 72px 72px, 100% 100%;
        }


    .topbar-shell[b-mf19nc3ke9] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        z-index: var(--z-topbar, 100);
    }


        .topbar-shell[b-mf19nc3ke9]  .top-row {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 56px;
        }


    .layout-body[b-mf19nc3ke9] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
        overflow-x: hidden;
    }


    .sidebar[b-mf19nc3ke9],
    .sidebar-abierta[b-mf19nc3ke9],
    .sidebar-cerrada[b-mf19nc3ke9] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    .main-content[b-mf19nc3ke9] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }


        .main-content[b-mf19nc3ke9]::before {
            inset: 56px 0 0 0;
            opacity: 0.70;
        }


    .content[b-mf19nc3ke9] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 1rem;
        overflow-x: hidden;
    }


    .menu-toggle[b-mf19nc3ke9] {
        display: none !important;
    }


    .topbar-shell[b-mf19nc3ke9]  .menu-toggle {
        display: none !important;
    }
}


/* ==========================================================
   MOBILE CHICO
   ========================================================== */

@media (max-width: 576px) {

    .topbar-shell[b-mf19nc3ke9]  .top-row {
        min-height: 54px;
    }


    .content[b-mf19nc3ke9] {
        padding: 0.85rem;
    }


    .layout-root[b-mf19nc3ke9]::before {
        right: -285px;
        bottom: -285px;
        opacity: 0.26;
    }
}


/* ==========================================================
   MOBILE MUY CHICO
   ========================================================== */

@media (max-width: 390px) {

    .content[b-mf19nc3ke9] {
        padding: 0.75rem;
    }


    .layout-root[b-mf19nc3ke9]::before {
        opacity: 0.22;
    }


    .layout-root[b-mf19nc3ke9]::after {
        opacity: 0.08;
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 769px) {

    .content[b-mf19nc3ke9] {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .layout-root[b-mf19nc3ke9]::before,
    .layout-root[b-mf19nc3ke9]::after {
        animation: none !important;
    }


    .menu-toggle[b-mf19nc3ke9],
    .sidebar[b-mf19nc3ke9] {
        transition: none !important;
    }
}


/* ==========================================================
   ERROR UI BLAZOR
   ========================================================== */

#blazor-error-ui[b-mf19nc3ke9] {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    z-index: var(--z-system, 1200);
}


    #blazor-error-ui .dismiss[b-mf19nc3ke9] {
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        cursor: pointer;
    }


/* ==========================================================
   INPUT DATE
   ========================================================== */

input[type="date"].form-control[b-mf19nc3ke9]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
/* /Components/Layout/PanelCumpleanosSemana.razor.rz.scp.css */
.cumple-panel[b-a4e2ew3kpz] {
    flex: 1; /* 👈 llena el contenedor */
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 1rem;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    min-height: 100%; /* 👈 clave */
}

/* Header */
.cumple-header[b-a4e2ew3kpz] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cumple-icono[b-a4e2ew3kpz] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4);
}

.cumple-header h4[b-a4e2ew3kpz] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #93c5fd;
}

.cumple-header p[b-a4e2ew3kpz] {
    margin: 0.15rem 0 0 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* Días */
.cumple-dia[b-a4e2ew3kpz] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cumple-dia-titulo[b-a4e2ew3kpz] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #60a5fa;
}

/* Items */
.cumple-item[b-a4e2ew3kpz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
}

    .cumple-item:hover[b-a4e2ew3kpz] {
        transform: translateY(-1px);
        background: rgba(96, 165, 250, 0.08);
    }

/* Avatar */
.cumple-avatar[b-a4e2ew3kpz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

/* Info */
.cumple-info strong[b-a4e2ew3kpz] {
    color: #e5e7eb;
    font-size: 0.9rem;
}

.cumple-info span[b-a4e2ew3kpz] {
    color: #94a3b8;
    font-size: 0.78rem;
}

/* Vacío */
.cumple-item.vacio[b-a4e2ew3kpz] {
    justify-content: center;
    color: #64748b;
    font-size: 0.8rem;
}
.cumple-sector[b-a4e2ew3kpz] {
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.15;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0.85;
    text-transform: none;
    word-break: break-word;
}
.cumple-header-con-nav[b-a4e2ew3kpz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cumple-titulo[b-a4e2ew3kpz] {
    flex: 1;
}

.cumple-btn-nav[b-a4e2ew3kpz] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    color: inherit;
    padding: 4px 6px;
    border-radius: 6px;
}

    .cumple-btn-nav:hover[b-a4e2ew3kpz] {
        background: rgba(255, 255, 255, 0.15);
    }

.cumple-btn-hoy[b-a4e2ew3kpz] {
    border: 1px solid rgba(96, 165, 250, 0.45);
    cursor: pointer;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.25px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(96, 165, 250, 0.16));
    color: #dbeafe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
    transition: all 0.2s ease;
}

    .cumple-btn-hoy i[b-a4e2ew3kpz] {
        font-size: 0.85rem;
        color: #93c5fd;
    }

    .cumple-btn-hoy:hover[b-a4e2ew3kpz] {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.45), rgba(96, 165, 250, 0.25));
        border-color: rgba(147, 197, 253, 0.75);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
    }

        .cumple-btn-hoy:hover i[b-a4e2ew3kpz] {
            color: #ffffff;
        }

    .cumple-btn-hoy:active[b-a4e2ew3kpz] {
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
    }
/* /Components/Pages/Adelanto.razor.rz.scp.css */
/* ==========================================================
   BLOQUE ADELANTOS
   ALINEADO CON LICENCIAS
   ========================================================== */

.bloque-adelantos[b-kmq84qowhk] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: auto auto;
    gap: 18px 20px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0; /* ← importante (lo maneja el wrapper) */

    color: white;
    font-family: 'Segoe UI', sans-serif;
    min-height: 320px;
}

    /* ==========================================================
   COLUMNAS
   ========================================================== */

    .bloque-adelantos .col[b-kmq84qowhk] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

        .bloque-adelantos .col label[b-kmq84qowhk] {
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 6px;
            color: #dbe4f0;
            text-align: left;
        }

    /* ==========================================================
   INPUTS / SELECT / TEXTAREA
   (MISMO ESTILO QUE LICENCIAS)
   ========================================================== */

    .bloque-adelantos input[type="text"][b-kmq84qowhk],
    .bloque-adelantos input[type="date"][b-kmq84qowhk],
    .bloque-adelantos input[type="number"][b-kmq84qowhk],
    .bloque-adelantos select[b-kmq84qowhk] {
        width: 60%;
        min-width: 190px;
        max-width: 340px;
        padding: 8px 10px;
        min-height: 40px;
        font-size: 0.95rem;
        background-color: rgb(15, 30, 50);
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        border: 1px solid #334155;
        border-radius: 8px;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .bloque-adelantos textarea[b-kmq84qowhk] {
        width: 100%;
        min-height: 40px;
        height: auto;
        padding: 8px 10px;
        font-size: 0.95rem;
        background-color: rgb(15, 30, 50);
        color: #ffffff;
        border: 1px solid #334155;
        border-radius: 8px;
        resize: vertical;
    }

        /* focus */
        .bloque-adelantos input:focus[b-kmq84qowhk],
        .bloque-adelantos select:focus[b-kmq84qowhk],
        .bloque-adelantos textarea:focus[b-kmq84qowhk] {
            outline: none;
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        }

    /* calendario */
    .bloque-adelantos input[type="date"][b-kmq84qowhk]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }

    /* ==========================================================
   CAMPOS DESHABILITADOS
   ========================================================== */

    .bloque-adelantos input[disabled][b-kmq84qowhk],
    .bloque-adelantos select[disabled][b-kmq84qowhk],
    .bloque-adelantos textarea[disabled][b-kmq84qowhk] {
        background-color: #2c2c2c !important;
        color: #aaa !important;
        -webkit-text-fill-color: #aaa !important;
        border: 1px solid #555 !important;
        cursor: not-allowed !important;
        opacity: 0.75;
    }

    /* ==========================================================
   BOTONES
   ========================================================== */

    .bloque-adelantos .bloque-botones[b-kmq84qowhk] {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .bloque-adelantos .btn-guardar[b-kmq84qowhk],
    .bloque-adelantos .btn-cancelar[b-kmq84qowhk] {
        padding: 8px 14px;
        min-height: 40px;
        font-size: 0.95rem;
        font-weight: 700;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .bloque-adelantos .btn-guardar[b-kmq84qowhk] {
        background: linear-gradient(135deg, #16a34a, #15803d);
        color: white;
    }

        .bloque-adelantos .btn-guardar:hover[b-kmq84qowhk] {
            transform: translateY(-1px);
        }

    .bloque-adelantos .btn-cancelar[b-kmq84qowhk] {
        background: linear-gradient(135deg, #64748b, #475569);
        color: white;
    }

        .bloque-adelantos .btn-cancelar:hover[b-kmq84qowhk] {
            transform: translateY(-1px);
        }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
    .bloque-adelantos[b-kmq84qowhk] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .bloque-adelantos[b-kmq84qowhk] {
        grid-template-columns: 1fr;
        padding: 14px;
    }

        .bloque-adelantos input[b-kmq84qowhk],
        .bloque-adelantos select[b-kmq84qowhk],
        .bloque-adelantos textarea[b-kmq84qowhk] {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .bloque-adelantos .bloque-botones[b-kmq84qowhk] {
            flex-direction: column;
        }

        .bloque-adelantos .btn-guardar[b-kmq84qowhk],
        .bloque-adelantos .btn-cancelar[b-kmq84qowhk] {
            width: 100%;
        }
}
/* /Components/Pages/AltaUsuario.razor.rz.scp.css */
/* ==========================================================
   ALTA USUARIO / EMPLEADOS Y ACCESOS
   Estilos específicos de la página.
   Mantiene DiseñoEntidades.css como base y evita reglas globales.
   ========================================================== */

.alta-usuario-page[b-ocsgchbwjv] {
    --au-panel: rgba(15, 23, 42, 0.72);
    --au-panel-2: rgba(30, 41, 59, 0.82);
    --au-panel-hover: rgba(30, 41, 59, 0.94);
    --au-borde: rgba(148, 163, 184, 0.16);
    --au-borde-fuerte: rgba(148, 163, 184, 0.24);
    --au-texto: #f8fafc;
    --au-texto-2: #e2e8f0;
    --au-muted: #94a3b8;
    --au-azul: #3b82f6;
    --au-azul-fuerte: #2563eb;
    --au-verde: #22c55e;
    --au-amarillo: #f59e0b;
    --au-rojo: #ef4444;
    width: min(1500px, calc(100% - 28px));
    margin: 14px auto 32px;
    padding: 14px;
    box-sizing: border-box;
    color: var(--au-texto);
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(2, 6, 23, 0.30);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.16);
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */

.au-encabezado[b-ocsgchbwjv] {
    min-height: 82px;
    padding: 17px 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 16px;
    background: radial-gradient(circle at 92% 10%, rgba(59, 130, 246, 0.14), transparent 34%), linear-gradient(180deg, rgba(16, 32, 53, 0.96), rgba(12, 25, 44, 0.96));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.au-encabezado-icono[b-ocsgchbwjv] {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(145deg, #2563eb, #3b82f6);
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
}

.au-encabezado-texto[b-ocsgchbwjv] {
    min-width: 0;
}

    .au-encabezado-texto h2[b-ocsgchbwjv] {
        margin: 0;
        color: var(--au-texto);
        font-size: clamp(23px, 2.4vw, 30px);
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    .au-encabezado-texto p[b-ocsgchbwjv] {
        margin: 4px 0 0;
        color: var(--au-muted);
        font-size: 14px;
        line-height: 1.45;
    }

/* ==========================================================
   PANELES
   ========================================================== */

.au-panel[b-ocsgchbwjv] {
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px solid var(--au-borde);
    border-radius: 14px;
    background: var(--au-panel);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12);
}

.au-selector-grid[b-ocsgchbwjv] {
    display: grid;
    grid-template-columns: minmax(320px, 620px) auto;
    align-items: end;
    gap: 14px;
}

.au-razon-field[b-ocsgchbwjv] {
    margin: 0;
}

.au-acciones-principales[b-ocsgchbwjv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 1px;
}

.au-agente-seleccionado[b-ocsgchbwjv] {
    margin-top: 11px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(59, 130, 246, 0.20);
    border-radius: 10px;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.08);
    font-size: 11.5px;
}

    .au-agente-seleccionado > i[b-ocsgchbwjv] {
        color: #60a5fa;
    }

    .au-agente-seleccionado span[b-ocsgchbwjv] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .au-agente-seleccionado strong[b-ocsgchbwjv] {
        color: #ffffff;
    }

/* ==========================================================
   FILTROS
   ========================================================== */

.au-filtros-panel[b-ocsgchbwjv] {
    padding-bottom: 14px;
}

.au-seccion-titulo-fila[b-ocsgchbwjv] {
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .au-seccion-titulo-fila > div[b-ocsgchbwjv] {
        min-width: 0;
    }

    .au-seccion-titulo-fila h3[b-ocsgchbwjv] {
        margin: 0;
        color: var(--au-texto);
        font-size: 16px;
        font-weight: 800;
    }

    .au-seccion-titulo-fila span[b-ocsgchbwjv] {
        display: block;
        margin-top: 2px;
        color: var(--au-muted);
        font-size: 12.5px;
    }

.au-filtros-grid[b-ocsgchbwjv] {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, .65fr));
    gap: 10px;
}

    .au-filtros-grid .form-row[b-ocsgchbwjv] {
        margin: 0;
    }

        .au-filtros-grid .form-row label[b-ocsgchbwjv],
        .au-selector-panel .form-row label[b-ocsgchbwjv] {
            margin-bottom: 6px;
            color: var(--au-texto-2);
            font-size: 13px;
            font-weight: 750;
        }

    .au-filtros-grid .form-control[b-ocsgchbwjv],
    .au-selector-panel .form-control[b-ocsgchbwjv] {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
    }

/* ==========================================================
   INVITACIONES
   ========================================================== */

.au-invitaciones-panel[b-ocsgchbwjv] {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.au-invitaciones-info[b-ocsgchbwjv] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.au-invitaciones-icono[b-ocsgchbwjv] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    font-size: 16px;
}

.au-invitaciones-info > div:last-child[b-ocsgchbwjv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.au-invitaciones-info strong[b-ocsgchbwjv] {
    color: var(--au-texto);
    font-size: 12px;
}

.au-invitaciones-info span[b-ocsgchbwjv] {
    margin-top: 2px;
    color: var(--au-muted);
    font-size: 12px;
    line-height: 1.35;
}

.au-invitaciones-acciones[b-ocsgchbwjv] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.au-contador[b-ocsgchbwjv] {
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.07);
    font-size: 12px;
    font-weight: 700;
}

/* ==========================================================
   BOTONES
   ========================================================== */

.au-btn[b-ocsgchbwjv] {
    min-height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

    .au-btn:hover:not(:disabled)[b-ocsgchbwjv] {
        transform: translateY(-1px);
    }

    .au-btn:disabled[b-ocsgchbwjv] {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
    }

.au-btn-primario[b-ocsgchbwjv] {
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

    .au-btn-primario:hover:not(:disabled)[b-ocsgchbwjv] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }

.au-btn-secundario[b-ocsgchbwjv] {
    color: #dbe7f3;
    border-color: rgba(148, 163, 184, 0.24);
    background: #24364f;
}

    .au-btn-secundario:hover:not(:disabled)[b-ocsgchbwjv] {
        background: #2c4260;
    }

.au-btn-exito[b-ocsgchbwjv] {
    color: #ffffff;
    border-color: #16a34a;
    background: #16a34a;
}

    .au-btn-exito:hover:not(:disabled)[b-ocsgchbwjv] {
        border-color: #15803d;
        background: #15803d;
    }

.au-btn-fantasma[b-ocsgchbwjv] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(148, 163, 184, 0.06);
}

    .au-btn-fantasma:hover:not(:disabled)[b-ocsgchbwjv] {
        color: #ffffff;
        background: rgba(148, 163, 184, 0.11);
    }

.au-btn-icono[b-ocsgchbwjv] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.07);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

    .au-btn-icono:hover[b-ocsgchbwjv] {
        color: #ffffff;
        border-color: rgba(248, 113, 113, 0.28);
        background: rgba(239, 68, 68, 0.10);
    }

.au-spinner[b-ocsgchbwjv] {
    width: 13px;
    height: 13px;
    display: inline-block;
    border: 2px solid rgba(255,255,255,.28);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: au-girar-b-ocsgchbwjv .75s linear infinite;
}

@keyframes au-girar-b-ocsgchbwjv {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   CONTENIDO / EDICIÓN
   ========================================================== */

.au-contenido-principal[b-ocsgchbwjv] {
    margin-top: 10px;
}

.au-editor-header[b-ocsgchbwjv] {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .au-editor-header small[b-ocsgchbwjv] {
        color: var(--au-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .au-editor-header h3[b-ocsgchbwjv] {
        margin: 2px 0 0 !important;
    }

.au-tabla-header[b-ocsgchbwjv] {
    margin-bottom: 10px;
}

    .au-tabla-header > div:first-child[b-ocsgchbwjv] {
        min-width: 0;
    }

.au-tabla-subtitulo[b-ocsgchbwjv] {
    display: block;
    margin-top: 3px;
    color: var(--au-muted);
    font-size: 12px;
}

/* ==========================================================
   TABLA UNIFICADA
   ========================================================== */

.au-tabla-gestion[b-ocsgchbwjv] {
    min-width: 1240px !important;
    table-layout: fixed;
}

    .au-tabla-gestion th[b-ocsgchbwjv],
    .au-tabla-gestion td[b-ocsgchbwjv] {
        padding: 10px 10px !important;
        line-height: 1.15 !important;
        vertical-align: middle;
    }

    .au-tabla-gestion th[b-ocsgchbwjv] {
        font-size: 10px !important;
    }

    .au-tabla-gestion td[b-ocsgchbwjv] {
        font-size: 11px !important;
    }

    .au-tabla-gestion .au-col-invitar[b-ocsgchbwjv] {
        width: 58px;
        text-align: center;
    }

    .au-tabla-gestion .col-dni[b-ocsgchbwjv] {
        width: 90px;
    }

    .au-tabla-gestion .col-nombre[b-ocsgchbwjv] {
        width: 180px;
    }

    .au-tabla-gestion .col-email[b-ocsgchbwjv] {
        width: 205px;
    }

    .au-tabla-gestion .col-perfil[b-ocsgchbwjv] {
        width: 240px;
    }

    .au-tabla-gestion .au-col-acceso[b-ocsgchbwjv] {
        width: 95px;
    }

    .au-tabla-gestion .col-estado[b-ocsgchbwjv] {
        width: 105px;
    }

    .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
        width: 285px;
    }

    .au-tabla-gestion td.col-nombre[b-ocsgchbwjv],
    .au-tabla-gestion td.col-email[b-ocsgchbwjv] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .au-tabla-gestion input[type="checkbox"][b-ocsgchbwjv] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--au-azul);
    }

.au-no-aplica[b-ocsgchbwjv] {
    color: #64748b;
}

/* ==========================================================
   BADGES DE ACCESO / ESTADO
   ========================================================== */

.au-acceso-badge[b-ocsgchbwjv],
.au-estado-badge[b-ocsgchbwjv] {
    min-height: 28px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

    .au-acceso-badge.con-acceso[b-ocsgchbwjv] {
        color: #dbeafe;
        border-color: rgba(59, 130, 246, 0.24);
        background: rgba(59, 130, 246, 0.11);
    }

    .au-acceso-badge.sin-acceso[b-ocsgchbwjv] {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.20);
        background: rgba(148, 163, 184, 0.09);
    }

    .au-estado-badge.activo[b-ocsgchbwjv] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.26);
        background: rgba(34, 197, 94, 0.11);
    }

    .au-estado-badge.pendiente[b-ocsgchbwjv] {
        color: #fef3c7;
        border-color: rgba(245, 158, 11, 0.26);
        background: rgba(245, 158, 11, 0.11);
    }

    .au-estado-badge.bloqueado[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.25);
        background: rgba(239, 68, 68, 0.10);
    }

    .au-estado-badge.inactivo[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.24);
        background: rgba(127, 29, 29, 0.24);
    }

    .au-estado-badge.sin-acceso[b-ocsgchbwjv] {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.20);
        background: rgba(148, 163, 184, 0.08);
    }

/* ==========================================================
   ACCIONES COMPACTAS DE TABLA
   ========================================================== */

.au-acciones-fila[b-ocsgchbwjv] {
    gap: 4px !important;
}

.au-btn-tabla[b-ocsgchbwjv] {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}

    .au-btn-tabla:hover[b-ocsgchbwjv] {
        transform: translateY(-1px);
    }

.au-btn-datos[b-ocsgchbwjv] {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, .25);
    background: rgba(37, 99, 235, .16);
}

.au-btn-editar[b-ocsgchbwjv] {
    color: #ffffff;
    background: #2563eb;
}

.au-btn-reenviar[b-ocsgchbwjv] {
    color: #ffffff;
    background: #b45309;
}

.au-btn-inactivar[b-ocsgchbwjv] {
    color: #ffffff;
    background: #991b1b;
}

.au-btn-reactivar[b-ocsgchbwjv] {
    color: #ffffff;
    background: #16a34a;
}

/* ==========================================================
   MODAL ABM AGENTE
   z-index alto para quedar sobre menú lateral y overlays.
   ========================================================== */

.au-modal-fondo[b-ocsgchbwjv] {
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    padding: 20px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.70);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.au-modal[b-ocsgchbwjv] {
    width: min(840px, 100%);
    max-height: min(860px, calc(100dvh - 40px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    color: #f8fafc;
    background: #0f172a;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
}

.au-modal-header[b-ocsgchbwjv] {
    min-height: 76px;
    padding: 13px 15px 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: #1e293b;
}

.au-modal-titulo[b-ocsgchbwjv] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

    .au-modal-titulo > div:last-child[b-ocsgchbwjv] {
        min-width: 0;
    }

.au-modal-icono[b-ocsgchbwjv] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    font-size: 16px;
}

.au-modal-header small[b-ocsgchbwjv] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.au-modal-header h3[b-ocsgchbwjv] {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 750;
}

.au-modal-body[b-ocsgchbwjv] {
    padding: 20px 22px 24px;
    overflow-y: auto;
    background: #0b1220;
}


.au-modal-mensaje[b-ocsgchbwjv] {
    margin: 0 0 14px;
}

.au-legajo-card[b-ocsgchbwjv] {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.18);
}

.au-legajo-card-header[b-ocsgchbwjv] {
    min-height: 86px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: radial-gradient(circle at 92% 12%, rgba(59, 130, 246, 0.15), transparent 38%), linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(20, 31, 49, 0.96));
}

.au-legajo-avatar[b-ocsgchbwjv] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.22);
    font-size: 22px;
}

.au-legajo-identidad[b-ocsgchbwjv] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

    .au-legajo-identidad small[b-ocsgchbwjv] {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .au-legajo-identidad strong[b-ocsgchbwjv] {
        margin-top: 3px;
        overflow: hidden;
        color: #f8fafc;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.au-persona-existente[b-ocsgchbwjv] {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    border-radius: 999px;
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.10);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.au-legajo-seccion[b-ocsgchbwjv] {
    padding: 18px;
}

    .au-legajo-seccion + .au-legajo-seccion[b-ocsgchbwjv] {
        padding-top: 16px;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
    }

.au-legajo-seccion-titulo[b-ocsgchbwjv] {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.au-form-grid[b-ocsgchbwjv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

    .au-form-grid .form-row[b-ocsgchbwjv] {
        margin: 0;
    }

        .au-form-grid .form-row label[b-ocsgchbwjv] {
            margin-bottom: 7px;
            color: #e2e8f0;
            font-size: 13px;
            font-weight: 750;
        }

    .au-form-grid .form-control[b-ocsgchbwjv] {
        min-height: 46px;
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 10px;
    }

        .au-form-grid .form-control:disabled[b-ocsgchbwjv] {
            opacity: 1;
            color: #cbd5e1;
            background: rgba(30, 41, 59, 0.72);
            border-color: rgba(148, 163, 184, 0.12);
            cursor: default;
        }

.au-campo-mail[b-ocsgchbwjv] {
    grid-column: 1 / 2;
}

.au-modal-footer[b-ocsgchbwjv] {
    padding: 11px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: #1e293b;
}


/* ==========================================================
   TIPOGRAFÍA / LEGIBILIDAD
   ========================================================== */

.alta-usuario-page .form-row > label[b-ocsgchbwjv],
.alta-usuario-page .form-row label[b-ocsgchbwjv] {
    font-size: 13px;
}

.alta-usuario-page .form-control[b-ocsgchbwjv] {
    font-size: 14px;
}

.au-tabla-gestion th[b-ocsgchbwjv] {
    font-size: 12px !important;
}

.au-tabla-gestion td[b-ocsgchbwjv] {
    font-size: 13px !important;
}

.au-tabla-gestion .au-col-invitar[b-ocsgchbwjv] {
    width: 64px;
}

.au-tabla-gestion .col-dni[b-ocsgchbwjv] {
    width: 108px;
}

.au-tabla-gestion .col-nombre[b-ocsgchbwjv] {
    width: 210px;
}

.au-tabla-gestion .col-email[b-ocsgchbwjv] {
    width: 235px;
}

.au-tabla-gestion .col-perfil[b-ocsgchbwjv] {
    width: 255px;
}

.au-tabla-gestion .au-col-acceso[b-ocsgchbwjv] {
    width: 110px;
}

.au-tabla-gestion .col-estado[b-ocsgchbwjv] {
    width: 120px;
}

.au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
    width: 300px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1120px) {
    .au-filtros-grid[b-ocsgchbwjv] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .au-invitaciones-panel[b-ocsgchbwjv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .au-invitaciones-acciones[b-ocsgchbwjv] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .alta-usuario-page[b-ocsgchbwjv] {
        width: calc(100% - 16px);
        margin-top: 8px;
        padding: 10px;
    }

    .au-selector-grid[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

    .au-acciones-principales[b-ocsgchbwjv] {
        align-items: stretch;
    }

        .au-acciones-principales .au-btn[b-ocsgchbwjv] {
            flex: 1 1 180px;
        }

    .au-filtros-grid[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

    .au-seccion-titulo-fila[b-ocsgchbwjv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .au-invitaciones-acciones[b-ocsgchbwjv] {
        align-items: stretch;
        flex-direction: column;
    }

        .au-invitaciones-acciones .au-btn[b-ocsgchbwjv] {
            width: 100%;
        }

    .au-contador[b-ocsgchbwjv] {
        justify-content: center;
    }

    .au-form-grid[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

    .au-campo-mail[b-ocsgchbwjv] {
        grid-column: auto;
    }

    .au-legajo-card-header[b-ocsgchbwjv] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .au-persona-existente[b-ocsgchbwjv] {
        margin-left: 66px;
    }

    .au-modal-fondo[b-ocsgchbwjv] {
        padding: 8px;
    }

    .au-modal[b-ocsgchbwjv] {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }
}

@media (max-width: 620px) {
    .au-encabezado[b-ocsgchbwjv] {
        padding: 14px;
        align-items: flex-start;
    }

    .au-encabezado-icono[b-ocsgchbwjv] {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 19px;
    }

    .au-agente-seleccionado[b-ocsgchbwjv] {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alta-usuario-page *[b-ocsgchbwjv],
    .au-modal *[b-ocsgchbwjv],
    .au-modal-fondo *[b-ocsgchbwjv] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   AJUSTES UI V2 - DEMO / PERFIL UNIFICADO
   ========================================================== */

/* Página algo más compacta y aprovechando mejor el ancho útil. */
.alta-usuario-page[b-ocsgchbwjv] {
    width: min(1460px, calc(100% - 20px));
    margin: 10px auto 28px;
    padding: 12px;
    border-radius: 16px;
}

/* Selector: ya no existe el botón Buscar agente. */
.au-selector-grid[b-ocsgchbwjv] {
    grid-template-columns: minmax(280px, 560px) auto;
    gap: 12px;
}

.au-acciones-principales[b-ocsgchbwjv] {
    justify-content: flex-start;
}

/* Botones principales más visuales. */
.au-btn[b-ocsgchbwjv] {
    min-height: 40px;
    padding: 0 13px;
    gap: 7px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.10);
}

    .au-btn > i[b-ocsgchbwjv] {
        font-size: 14px;
        line-height: 1;
    }

.au-btn-primario[b-ocsgchbwjv] {
    border-color: rgba(59, 130, 246, 0.85);
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
}

    .au-btn-primario:hover:not(:disabled)[b-ocsgchbwjv] {
        border-color: #60a5fa;
        background: linear-gradient(135deg, #1d4ed8, #2563eb);
    }

.au-btn-exito[b-ocsgchbwjv] {
    border-color: rgba(34, 197, 94, 0.75);
    background: linear-gradient(135deg, #15803d, #16a34a);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

.au-btn-secundario[b-ocsgchbwjv] {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, #2a3c56, #22334b);
}

.au-btn-fantasma[b-ocsgchbwjv] {
    box-shadow: none;
}

/* ==========================================================
   PERFIL UNIFICADO - VER / EDITAR
   ========================================================== */

.altausuarios-layout[b-ocsgchbwjv] {
    align-items: flex-start;
    gap: 12px;
}

.altausuarios-panel-edicion.au-perfil-panel[b-ocsgchbwjv] {
    flex: 0 0 390px;
    width: 390px;
    max-width: 390px;
    padding: 14px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 18, 32, 0.98));
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.24);
}

.au-editor-header[b-ocsgchbwjv] {
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

    .au-editor-header > div:first-child[b-ocsgchbwjv] {
        min-width: 0;
    }

    .au-editor-header small[b-ocsgchbwjv] {
        color: #60a5fa;
    }

    .au-editor-header h3[b-ocsgchbwjv] {
        font-size: 20px;
        font-weight: 850;
        letter-spacing: -0.02em;
    }

.au-editor-persona[b-ocsgchbwjv] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #cbd5e1;
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-editor-mensaje[b-ocsgchbwjv] {
    margin: 0 0 10px;
}

.au-editor-seccion[b-ocsgchbwjv] {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 13px;
    background: rgba(15, 23, 42, 0.62);
}

.au-editor-seccion-header[b-ocsgchbwjv] {
    min-height: 54px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: rgba(30, 41, 59, 0.52);
}

.au-editor-seccion-icono[b-ocsgchbwjv] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 10px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.10);
    font-size: 15px;
}

.au-editor-seccion-header > div:nth-child(2)[b-ocsgchbwjv] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.au-editor-seccion-header strong[b-ocsgchbwjv] {
    color: #f8fafc;
    font-size: 12.5px;
    font-weight: 850;
}

.au-editor-seccion-header span:not(.au-acceso-badge)[b-ocsgchbwjv] {
    margin-top: 1px;
    color: #94a3b8;
    font-size: 10.5px;
}

.au-form-grid-perfil[b-ocsgchbwjv] {
    padding: 12px;
    gap: 10px 11px;
}

    .au-form-grid-perfil .form-control[b-ocsgchbwjv] {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 12.5px;
    }

    .au-form-grid-perfil .form-row label[b-ocsgchbwjv] {
        margin-bottom: 5px;
        font-size: 11.5px;
    }

    .au-form-grid-perfil .au-campo-mail[b-ocsgchbwjv] {
        grid-column: 1 / -1;
    }

.au-editor-info[b-ocsgchbwjv] {
    margin: 11px;
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 10px;
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.07);
    font-size: 11.5px;
    line-height: 1.4;
}

    .au-editor-info i[b-ocsgchbwjv] {
        margin-top: 1px;
        color: #60a5fa;
    }

.au-perfiles-editor[b-ocsgchbwjv] {
    padding: 11px;
}

.alta-usuario-page .perfil-check-list[b-ocsgchbwjv] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.alta-usuario-page .perfil-alcance-item[b-ocsgchbwjv] {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.48);
}

.alta-usuario-page .perfil-check-item[b-ocsgchbwjv] {
    min-height: 46px;
    margin: 0;
    padding: 9px 10px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .alta-usuario-page .perfil-check-item:hover[b-ocsgchbwjv] {
        background: rgba(148, 163, 184, 0.06);
    }

    .alta-usuario-page .perfil-check-item.activo[b-ocsgchbwjv] {
        background: rgba(37, 99, 235, 0.11);
        box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.90);
    }

    .alta-usuario-page .perfil-check-item > input[type="checkbox"][b-ocsgchbwjv] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.alta-usuario-page .perfil-check-box[b-ocsgchbwjv] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.90);
}

.alta-usuario-page .perfil-check-item input[type="checkbox"]:checked + .perfil-check-box[b-ocsgchbwjv] {
    border-color: #3b82f6;
    background: #2563eb;
}

    .alta-usuario-page .perfil-check-item input[type="checkbox"]:checked + .perfil-check-box[b-ocsgchbwjv]::after {
        content: "✓";
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
    }

.alta-usuario-page .perfil-check-item input[type="checkbox"]:disabled + .perfil-check-box[b-ocsgchbwjv] {
    opacity: .48;
}

.alta-usuario-page .perfil-check-content[b-ocsgchbwjv] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.alta-usuario-page .perfil-check-title[b-ocsgchbwjv] {
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.alta-usuario-page .perfil-check-desc[b-ocsgchbwjv] {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1.3;
}

.razones-perfil-editor[b-ocsgchbwjv] {
    margin: 0 9px 9px 34px;
    padding: 8px;
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-radius: 9px;
    background: rgba(2, 6, 23, 0.24);
}

.au-razones-perfil-titulo[b-ocsgchbwjv] {
    margin: 0 0 6px 2px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.au-razones-lista .perfil-check-item[b-ocsgchbwjv] {
    min-height: 38px;
    padding: 7px 8px;
}

.au-permisos-protegidos[b-ocsgchbwjv] {
    margin: 0 11px 11px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.05);
}

    .au-permisos-protegidos .perfil-protegido-title[b-ocsgchbwjv] {
        margin-bottom: 6px;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.au-editor-acciones[b-ocsgchbwjv] {
    margin-top: 12px;
    padding-top: 11px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

/* Badge específico para Administrador global. */
.alta-usuario-page .perfil-badge.perfil-administrador[b-ocsgchbwjv] {
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.12);
}

/* ==========================================================
   TABLA COMPACTA
   ========================================================== */

.alta-usuario-page .tabla-wrap[b-ocsgchbwjv] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.au-tabla-gestion[b-ocsgchbwjv] {
    width: 100% !important;
    min-width: 1040px !important;
    table-layout: fixed;
}

    .au-tabla-gestion th[b-ocsgchbwjv],
    .au-tabla-gestion td[b-ocsgchbwjv] {
        padding: 8px 7px !important;
        line-height: 1.2 !important;
    }

    .au-tabla-gestion th[b-ocsgchbwjv] {
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: .02em;
    }

    .au-tabla-gestion td[b-ocsgchbwjv] {
        font-size: 12px !important;
    }

    .au-tabla-gestion .au-col-invitar[b-ocsgchbwjv] {
        width: 50px !important;
    }

    .au-tabla-gestion .col-dni[b-ocsgchbwjv] {
        width: 86px !important;
    }

    .au-tabla-gestion .col-nombre[b-ocsgchbwjv] {
        width: 165px !important;
    }

    .au-tabla-gestion .col-email[b-ocsgchbwjv] {
        width: 178px !important;
    }

    .au-tabla-gestion .col-perfil[b-ocsgchbwjv] {
        width: 170px !important;
    }

    .au-tabla-gestion .au-col-acceso[b-ocsgchbwjv] {
        width: 88px !important;
    }

    .au-tabla-gestion .col-estado[b-ocsgchbwjv] {
        width: 92px !important;
    }

    .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
        width: 225px !important;
    }

    .au-tabla-gestion td.col-nombre[b-ocsgchbwjv],
    .au-tabla-gestion td.col-email[b-ocsgchbwjv] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .au-tabla-gestion td.col-perfil[b-ocsgchbwjv] {
        overflow: hidden;
    }

        .au-tabla-gestion td.col-perfil .perfil-badge-list[b-ocsgchbwjv] {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .au-tabla-gestion td.col-perfil .perfil-badge[b-ocsgchbwjv] {
            max-width: 155px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.au-acceso-badge[b-ocsgchbwjv],
.au-estado-badge[b-ocsgchbwjv] {
    min-height: 25px;
    padding: 4px 7px;
    font-size: 10px;
}

/* ==========================================================
   ACCIONES DE TABLA
   ========================================================== */

.au-acciones-fila[b-ocsgchbwjv] {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px !important;
}

.au-btn-tabla[b-ocsgchbwjv] {
    min-height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(2, 6, 23, 0.12);
}

    .au-btn-tabla i[b-ocsgchbwjv] {
        font-size: 12px;
        line-height: 1;
    }

.au-btn-vereditar[b-ocsgchbwjv] {
    color: #ffffff;
    border-color: rgba(59, 130, 246, 0.48);
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

    .au-btn-vereditar:hover[b-ocsgchbwjv] {
        background: linear-gradient(135deg, #1d4ed8, #2563eb);
    }

.au-btn-reenviar[b-ocsgchbwjv] {
    color: #fffbeb;
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(180, 83, 9, 0.88);
}

.au-btn-inactivar[b-ocsgchbwjv] {
    color: #fff1f2;
    border-color: rgba(248, 113, 113, 0.30);
    background: rgba(153, 27, 27, 0.92);
}

.au-btn-reactivar[b-ocsgchbwjv] {
    color: #f0fdf4;
    border-color: rgba(74, 222, 128, 0.30);
    background: rgba(22, 163, 74, 0.90);
}

/* ==========================================================
   RESPONSIVE V2
   ========================================================== */

@media (max-width: 1280px) {
    .au-tabla-gestion[b-ocsgchbwjv] {
        min-width: 980px !important;
    }

        .au-tabla-gestion .col-nombre[b-ocsgchbwjv] {
            width: 150px !important;
        }

        .au-tabla-gestion .col-email[b-ocsgchbwjv] {
            width: 165px !important;
        }

        .au-tabla-gestion .col-perfil[b-ocsgchbwjv] {
            width: 150px !important;
        }

        .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
            width: 160px !important;
        }

    .au-btn-reenviar span[b-ocsgchbwjv],
    .au-btn-inactivar span[b-ocsgchbwjv],
    .au-btn-reactivar span[b-ocsgchbwjv] {
        display: none;
    }

    .au-btn-reenviar[b-ocsgchbwjv],
    .au-btn-inactivar[b-ocsgchbwjv],
    .au-btn-reactivar[b-ocsgchbwjv] {
        width: 31px;
        padding: 0;
    }
}

@media (max-width: 1060px) {
    .altausuarios-layout[b-ocsgchbwjv] {
        flex-direction: column;
    }

    .altausuarios-panel-edicion.au-perfil-panel[b-ocsgchbwjv] {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }

    .au-form-grid-perfil[b-ocsgchbwjv] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .au-form-grid-perfil .au-campo-mail[b-ocsgchbwjv] {
            grid-column: span 2;
        }
}

@media (max-width: 820px) {
    .au-selector-grid[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

    .au-acciones-principales[b-ocsgchbwjv] {
        width: 100%;
    }

        .au-acciones-principales .au-btn[b-ocsgchbwjv] {
            width: 100%;
        }

    .au-form-grid-perfil[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

        .au-form-grid-perfil .au-campo-mail[b-ocsgchbwjv] {
            grid-column: auto;
        }
}

@media (max-width: 620px) {
    .alta-usuario-page[b-ocsgchbwjv] {
        width: calc(100% - 10px);
        margin-top: 5px;
        padding: 8px;
    }

    .au-editor-seccion-header[b-ocsgchbwjv] {
        flex-wrap: wrap;
    }

        .au-editor-seccion-header .au-acceso-badge[b-ocsgchbwjv] {
            margin-left: 43px;
        }

    .au-editor-acciones[b-ocsgchbwjv] {
        flex-direction: column;
    }

        .au-editor-acciones .au-btn[b-ocsgchbwjv] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .alta-usuario-page *[b-ocsgchbwjv],
    .au-modal *[b-ocsgchbwjv],
    .au-modal-fondo *[b-ocsgchbwjv] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.au-perfil-base[b-ocsgchbwjv] {
    margin: 11px 11px 0;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 9px;
    background: rgba(148, 163, 184, 0.05);
}

    .au-perfil-base > span:last-child[b-ocsgchbwjv] {
        color: #94a3b8;
        font-size: 10.5px;
    }


/* ==========================================================
   VER / EDITAR COMO MODAL
   ========================================================== */

.altausuarios-layout[b-ocsgchbwjv] {
    display: block !important;
    width: 100%;
}

    .altausuarios-layout > .abm-tabla-col[b-ocsgchbwjv] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

.au-modal-perfil[b-ocsgchbwjv] {
    width: min(1040px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
}

.au-modal-perfil-body[b-ocsgchbwjv] {
    padding: 18px 20px 22px;
}

.au-perfil-modal-identidad[b-ocsgchbwjv] {
    margin-bottom: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.48);
}

    .au-perfil-modal-identidad > div:first-child[b-ocsgchbwjv] {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .au-perfil-modal-identidad small[b-ocsgchbwjv] {
        color: #94a3b8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .au-perfil-modal-identidad strong[b-ocsgchbwjv] {
        margin-top: 2px;
        overflow: hidden;
        color: #f8fafc;
        font-size: 17px;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.au-perfil-modal-badges[b-ocsgchbwjv] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.au-propiedad-badge[b-ocsgchbwjv] {
    min-height: 28px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

    .au-propiedad-badge.editable[b-ocsgchbwjv] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.24);
        background: rgba(34, 197, 94, 0.10);
    }

    .au-propiedad-badge.compartida[b-ocsgchbwjv] {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.20);
        background: rgba(148, 163, 184, 0.08);
    }

.au-modal-seccion[b-ocsgchbwjv] {
    margin-top: 12px;
}

    .au-modal-seccion:first-of-type[b-ocsgchbwjv] {
        margin-top: 0;
    }

.au-modal-perfil .au-editor-seccion-header[b-ocsgchbwjv] {
    min-height: 56px;
    padding: 10px 13px;
}

    .au-modal-perfil .au-editor-seccion-header strong[b-ocsgchbwjv] {
        font-size: 13.5px;
    }

    .au-modal-perfil .au-editor-seccion-header span:not(.au-acceso-badge)[b-ocsgchbwjv] {
        font-size: 11.5px;
    }

.au-form-grid-modal[b-ocsgchbwjv] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
    gap: 12px 14px;
}

    .au-form-grid-modal .form-control[b-ocsgchbwjv] {
        min-height: 43px;
        font-size: 13.5px;
    }

    .au-form-grid-modal .form-row label[b-ocsgchbwjv] {
        font-size: 12px;
    }

.au-perfiles-editor-modal[b-ocsgchbwjv] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px !important;
    padding: 12px;
}

    .au-perfiles-editor-modal .perfil-alcance-item[b-ocsgchbwjv] {
        align-self: start;
    }

    .au-perfiles-editor-modal .razones-perfil-editor[b-ocsgchbwjv] {
        margin-left: 10px;
    }

.au-modal-perfil .au-permisos-protegidos[b-ocsgchbwjv] {
    margin: 0 12px 12px;
}

.au-modal-perfil .au-perfil-base[b-ocsgchbwjv] {
    margin: 12px 12px 0;
}

.au-modal-perfil .au-editor-info[b-ocsgchbwjv] {
    margin: 12px;
}

/* La fila puede resaltarse, pero la tabla nunca se comprime. */
.au-tabla-gestion tr.fila-activa td[b-ocsgchbwjv] {
    background: rgba(37, 99, 235, 0.06);
}

@media (max-width: 900px) {
    .au-modal-perfil[b-ocsgchbwjv] {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .au-form-grid-modal[b-ocsgchbwjv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .au-perfiles-editor-modal[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .au-modal-perfil-body[b-ocsgchbwjv] {
        padding: 12px;
    }

    .au-perfil-modal-identidad[b-ocsgchbwjv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .au-perfil-modal-badges[b-ocsgchbwjv] {
        width: 100%;
        justify-content: flex-start;
    }

    .au-form-grid-modal[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   AJUSTE FINAL V3
   ALTA USUARIOS - RECIBOS DIGITALES / MULTI-LEGAJO

   Este bloque es intencionalmente el último del archivo.
   Define la presentación definitiva de:
   - tabla compacta;
   - CUIL;
   - múltiples legajos;
   - estado laboral Alta/Baja;
   - estado de acceso al portal;
   - edición individual de legajos.

   IMPORTANTE:
   "Estado" representa únicamente el vínculo laboral dentro
   de la razón social seleccionada.
   "Acceso" representa la cuenta TD_USUARIOS.
   ========================================================== */

/* ==========================================================
   TABLA FINAL - COMPACTA Y CON ANCHO POR CONTENIDO
   ========================================================== */

.alta-usuario-page .tabla-wrap[b-ocsgchbwjv] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}

.alta-usuario-page .au-tabla-gestion[b-ocsgchbwjv] {
    width: 100% !important;
    min-width: 980px !important;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
}

    .alta-usuario-page .au-tabla-gestion th[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion td[b-ocsgchbwjv] {
        height: auto !important;
        padding: 6px 7px !important;
        line-height: 1.15 !important;
        vertical-align: middle !important;
    }

    .alta-usuario-page .au-tabla-gestion th[b-ocsgchbwjv] {
        font-size: 10.5px !important;
        font-weight: 850 !important;
        white-space: nowrap;
    }

    .alta-usuario-page .au-tabla-gestion td[b-ocsgchbwjv] {
        font-size: 11.5px !important;
    }

    /*
 * Columnas compactas.
 *
 * width: 1% + nowrap hace que la columna ocupe solamente el
 * ancho que necesita su contenido.
 *
 * Nombre queda como columna flexible porque puede ser largo.
 */
    .alta-usuario-page .au-tabla-gestion .au-col-invitar[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion .col-dni[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion .col-legajo[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion .au-col-acceso[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion .col-estado[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
        width: 1% !important;
        white-space: nowrap;
    }

    .alta-usuario-page .au-tabla-gestion .au-col-invitar[b-ocsgchbwjv] {
        min-width: 48px;
        text-align: center;
    }

    .alta-usuario-page .au-tabla-gestion .col-dni[b-ocsgchbwjv] {
        min-width: 102px;
        font-variant-numeric: tabular-nums;
    }

    .alta-usuario-page .au-tabla-gestion .col-legajo[b-ocsgchbwjv] {
        min-width: 74px;
    }

    .alta-usuario-page .au-tabla-gestion .au-col-acceso[b-ocsgchbwjv] {
        min-width: 88px;
    }

    .alta-usuario-page .au-tabla-gestion .col-estado[b-ocsgchbwjv] {
        min-width: 62px;
        text-align: center;
    }

    .alta-usuario-page .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
        min-width: 190px;
    }

    /*
 * Nombre absorbe el espacio disponible.
 * Email y perfiles se mantienen razonablemente compactos.
 */
    .alta-usuario-page .au-tabla-gestion .col-nombre[b-ocsgchbwjv] {
        width: auto !important;
        min-width: 170px;
    }

    .alta-usuario-page .au-tabla-gestion .col-email[b-ocsgchbwjv] {
        width: 16% !important;
        min-width: 150px;
        max-width: 230px;
    }

    .alta-usuario-page .au-tabla-gestion .col-perfil[b-ocsgchbwjv] {
        width: auto !important;
        min-width: 145px;
        max-width: 230px;
    }

    .alta-usuario-page .au-tabla-gestion td.col-nombre[b-ocsgchbwjv],
    .alta-usuario-page .au-tabla-gestion td.col-email[b-ocsgchbwjv] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .alta-usuario-page .au-tabla-gestion td.col-perfil[b-ocsgchbwjv] {
        overflow: visible;
    }

        .alta-usuario-page .au-tabla-gestion td.col-perfil .perfil-badge-list[b-ocsgchbwjv] {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 3px;
        }

        .alta-usuario-page .au-tabla-gestion td.col-perfil .perfil-badge[b-ocsgchbwjv] {
            max-width: 155px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* ==========================================================
   LEGAJOS EN LA TABLA
   Verde = vínculo activo.
   Rojo = vínculo con fecha de egreso / inactivo.
   ========================================================== */

.au-legajos-tabla[b-ocsgchbwjv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 230px;
    vertical-align: middle;
}

.au-legajo-chip[b-ocsgchbwjv] {
    min-width: 27px;
    min-height: 23px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .au-legajo-chip.activo[b-ocsgchbwjv] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.30);
        background: rgba(34, 197, 94, 0.13);
    }

    .au-legajo-chip.inactivo[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.30);
        background: rgba(127, 29, 29, 0.25);
    }

/* ==========================================================
   ESTADO LABORAL / ACCESO
   ========================================================== */

.au-acceso-badge[b-ocsgchbwjv],
.au-estado-badge[b-ocsgchbwjv] {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 9.8px;
    font-weight: 850;
}

    .au-acceso-badge.cuenta-inactiva[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.28);
        background: rgba(127, 29, 29, 0.24);
    }

    .au-acceso-badge.bloqueado[b-ocsgchbwjv] {
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.30);
        background: rgba(120, 53, 15, 0.25);
    }

/* ==========================================================
   ACCIONES DE TABLA - COMPACTAS
   ========================================================== */

.alta-usuario-page .au-acciones-fila[b-ocsgchbwjv] {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 3px !important;
    white-space: nowrap;
}

.alta-usuario-page .au-btn-tabla[b-ocsgchbwjv] {
    min-height: 28px;
    padding: 0 7px;
    gap: 4px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

    .alta-usuario-page .au-btn-tabla i[b-ocsgchbwjv] {
        font-size: 11px;
    }

/* ==========================================================
   MODAL VER / EDITAR - LEGAJOS
   Corrige la sección que antes no tenía estilos específicos.
   ========================================================== */

.au-legajos-edicion-lista[b-ocsgchbwjv] {
    margin: 0;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.au-legajo-edicion-item[b-ocsgchbwjv] {
    min-height: 44px;
    padding: 7px 8px 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.48);
}

    .au-legajo-edicion-item > div:first-child[b-ocsgchbwjv] {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
    }

    .au-legajo-edicion-item strong[b-ocsgchbwjv] {
        color: #f8fafc;
        font-size: 12px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .au-legajo-edicion-item .au-estado-badge[b-ocsgchbwjv] {
        flex: 0 0 auto;
    }

    .au-legajo-edicion-item > .au-btn-tabla[b-ocsgchbwjv] {
        flex: 0 0 auto;
    }

/*
 * Formulario para agregar otro legajo.
 * Mantiene el input y botón en una sola línea en escritorio.
 */
.au-modal-perfil .au-legajos-edicion-lista + .au-form-grid-modal[b-ocsgchbwjv],
.au-modal-perfil .au-legajos-edicion-lista ~ .au-form-grid-modal[b-ocsgchbwjv] {
    grid-template-columns: minmax(150px, 220px) auto;
    align-items: end;
    justify-content: start;
    padding: 0 12px 12px;
    gap: 8px;
}

    .au-modal-perfil .au-legajos-edicion-lista + .au-form-grid-modal .form-control[b-ocsgchbwjv],
    .au-modal-perfil .au-legajos-edicion-lista ~ .au-form-grid-modal .form-control[b-ocsgchbwjv] {
        min-height: 38px;
        padding: 7px 9px;
    }

    .au-modal-perfil .au-legajos-edicion-lista + .au-form-grid-modal .au-btn[b-ocsgchbwjv],
    .au-modal-perfil .au-legajos-edicion-lista ~ .au-form-grid-modal .au-btn[b-ocsgchbwjv] {
        min-height: 38px;
    }

/* ==========================================================
   MODAL PERFIL - UN POCO MÁS COMPACTO
   ========================================================== */

.au-modal-perfil[b-ocsgchbwjv] {
    width: min(980px, calc(100vw - 30px));
}

.au-modal-perfil-body[b-ocsgchbwjv] {
    padding: 14px 16px 18px;
}

.au-modal-perfil .au-modal-seccion[b-ocsgchbwjv] {
    margin-top: 9px;
}

.au-modal-perfil .au-editor-seccion-header[b-ocsgchbwjv] {
    min-height: 48px;
    padding: 8px 11px;
}

.au-modal-perfil .au-form-grid-modal[b-ocsgchbwjv] {
    padding: 11px;
    gap: 9px 11px;
}

    .au-modal-perfil .au-form-grid-modal .form-control[b-ocsgchbwjv] {
        min-height: 39px;
        padding: 7px 9px;
        font-size: 12.5px;
    }

    .au-modal-perfil .au-form-grid-modal .form-row label[b-ocsgchbwjv] {
        margin-bottom: 4px;
        font-size: 11.5px;
    }

/* ==========================================================
   FILAS DE BAJA / CUENTA INACTIVA
   ========================================================== */

.au-tabla-gestion tr.fila-inactivo td[b-ocsgchbwjv] {
    opacity: .88;
}

.au-tabla-gestion tr.fila-baja td[b-ocsgchbwjv] {
    background: rgba(127, 29, 29, 0.035);
}

/* ==========================================================
   RESPONSIVE FINAL
   ========================================================== */

@media (max-width: 1180px) {
    .alta-usuario-page .au-tabla-gestion[b-ocsgchbwjv] {
        min-width: 940px !important;
    }

    .alta-usuario-page .au-btn-reenviar span[b-ocsgchbwjv],
    .alta-usuario-page .au-btn-inactivar span[b-ocsgchbwjv],
    .alta-usuario-page .au-btn-reactivar span[b-ocsgchbwjv] {
        display: none;
    }

    .alta-usuario-page .au-btn-reenviar[b-ocsgchbwjv],
    .alta-usuario-page .au-btn-inactivar[b-ocsgchbwjv],
    .alta-usuario-page .au-btn-reactivar[b-ocsgchbwjv] {
        width: 29px;
        min-width: 29px;
        padding: 0;
    }

    .alta-usuario-page .au-tabla-gestion .col-acciones[b-ocsgchbwjv] {
        min-width: 128px;
    }
}

@media (max-width: 820px) {
    .au-legajo-edicion-item[b-ocsgchbwjv] {
        align-items: stretch;
        flex-direction: column;
    }

        .au-legajo-edicion-item > .au-btn-tabla[b-ocsgchbwjv] {
            align-self: flex-start;
        }

    .au-modal-perfil .au-legajos-edicion-lista + .au-form-grid-modal[b-ocsgchbwjv],
    .au-modal-perfil .au-legajos-edicion-lista ~ .au-form-grid-modal[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .au-legajos-tabla[b-ocsgchbwjv] {
        max-width: 180px;
    }

    .au-legajo-chip[b-ocsgchbwjv] {
        padding: 3px 6px;
    }
}
/* ==========================================================
   LEGAJO RECIBOS - IMPORTACIÓN MASIVA
   ========================================================== */

.au-btn-excel[b-ocsgchbwjv] {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.72);
    background: linear-gradient(135deg, #15803d, #16a34a);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

    .au-btn-excel:hover:not(.au-btn-disabled)[b-ocsgchbwjv] {
        border-color: #4ade80;
        background: linear-gradient(135deg, #166534, #15803d);
    }

.au-btn-disabled[b-ocsgchbwjv] {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}


.au-modal-nomina[b-ocsgchbwjv] {
    width: min(1220px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
}

.au-modal-icono-excel[b-ocsgchbwjv] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
}

.au-modal-nomina-body[b-ocsgchbwjv] {
    padding: 14px 16px 18px;
}

.au-nomina-archivo[b-ocsgchbwjv] {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 11px;
    background: rgba(30, 41, 59, 0.48);
}

    .au-nomina-archivo > div[b-ocsgchbwjv] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .au-nomina-archivo i[b-ocsgchbwjv] {
        color: #86efac;
        font-size: 20px;
    }

    .au-nomina-archivo strong[b-ocsgchbwjv],
    .au-nomina-archivo span[b-ocsgchbwjv] {
        display: block;
    }

    .au-nomina-archivo strong[b-ocsgchbwjv] {
        color: #f8fafc;
        font-size: 13px;
    }

    .au-nomina-archivo span[b-ocsgchbwjv] {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 11px;
    }

.au-nomina-mensaje-global[b-ocsgchbwjv] {
    margin-bottom: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.4;
}

    .au-nomina-mensaje-global.error[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.25);
        background: rgba(127, 29, 29, 0.20);
    }

    .au-nomina-mensaje-global.advertencia[b-ocsgchbwjv] {
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.24);
        background: rgba(120, 53, 15, 0.18);
    }

.au-nomina-resumen[b-ocsgchbwjv] {
    margin-bottom: 11px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.au-nomina-resumen-card[b-ocsgchbwjv] {
    min-height: 76px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.62);
}

    .au-nomina-resumen-card small[b-ocsgchbwjv] {
        color: #94a3b8;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .au-nomina-resumen-card strong[b-ocsgchbwjv] {
        margin-top: 2px;
        color: #f8fafc;
        font-size: 22px;
        line-height: 1;
    }

    .au-nomina-resumen-card span[b-ocsgchbwjv] {
        margin-top: 4px;
        color: #94a3b8;
        font-size: 10px;
    }

    .au-nomina-resumen-card.ok[b-ocsgchbwjv] {
        border-color: rgba(59, 130, 246, 0.20);
    }

    .au-nomina-resumen-card.importar[b-ocsgchbwjv] {
        border-color: rgba(34, 197, 94, 0.24);
        background: rgba(22, 163, 74, 0.08);
    }

    .au-nomina-resumen-card.existente[b-ocsgchbwjv] {
        border-color: rgba(148, 163, 184, 0.20);
    }

    .au-nomina-resumen-card.conflicto[b-ocsgchbwjv] {
        border-color: rgba(239, 68, 68, 0.22);
        background: rgba(127, 29, 29, 0.10);
    }

.au-nomina-progreso[b-ocsgchbwjv] {
    margin-bottom: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(34, 197, 94, 0.20);
    border-radius: 10px;
    background: rgba(22, 163, 74, 0.07);
}

    .au-nomina-progreso > div:first-child[b-ocsgchbwjv] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        color: #d1fae5;
        font-size: 11px;
    }

.au-nomina-progreso-barra[b-ocsgchbwjv] {
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

    .au-nomina-progreso-barra span[b-ocsgchbwjv] {
        height: 100%;
        display: block;
        border-radius: inherit;
        background: #22c55e;
        transition: width .18s ease;
    }
.au-nomina-tabla-wrap[b-ocsgchbwjv] {
    width: 100%;
    max-width: 100%;
    max-height: 440px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 11px;
}

.au-nomina-tabla[b-ocsgchbwjv] {
    width: 100%;
    min-width: 1050px;
    table-layout: fixed;
    border-collapse: collapse;
    color: #e2e8f0;
}

    .au-nomina-tabla .au-col-fila[b-ocsgchbwjv] {
        width: 55px;
    }

    .au-nomina-tabla .au-col-dni[b-ocsgchbwjv] {
        width: 90px;
    }

    .au-nomina-tabla .au-col-cuil[b-ocsgchbwjv] {
        width: 115px;
    }

    .au-nomina-tabla .au-col-legajo[b-ocsgchbwjv] {
        width: 75px;
    }

    .au-nomina-tabla .au-col-empleado[b-ocsgchbwjv] {
        width: 230px;
    }

    .au-nomina-tabla .au-col-estado[b-ocsgchbwjv] {
        width: 155px;
    }

    .au-nomina-tabla .au-col-detalle[b-ocsgchbwjv] {
        width: auto;
    }


    .au-nomina-tabla th[b-ocsgchbwjv] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 7px;
        text-align: left;
        color: #cbd5e1;
        background: #1e293b;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        font-size: 10px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    .au-nomina-tabla td[b-ocsgchbwjv] {
        padding: 7px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.08);
        vertical-align: top;
        font-size: 11px;
    }

        .au-nomina-tabla td strong[b-ocsgchbwjv],
        .au-nomina-tabla td small[b-ocsgchbwjv] {
            display: block;
        }

        .au-nomina-tabla td small[b-ocsgchbwjv] {
            margin-top: 2px;
            color: #94a3b8;
            font-size: 10px;
        }

.au-nomina-estado[b-ocsgchbwjv] {
    min-height: 23px;
    max-width: 100%;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

    .au-nomina-estado.nuevo[b-ocsgchbwjv],
    .au-nomina-estado.agregar[b-ocsgchbwjv] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.28);
        background: rgba(34, 197, 94, 0.11);
    }

    .au-nomina-estado.existente[b-ocsgchbwjv] {
        color: #bfdbfe;
        border-color: rgba(59, 130, 246, 0.24);
        background: rgba(59, 130, 246, 0.10);
    }

    .au-nomina-estado.advertencia[b-ocsgchbwjv] {
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.26);
        background: rgba(120, 53, 15, 0.20);
    }

    .au-nomina-estado.conflicto[b-ocsgchbwjv],
    .au-nomina-estado.error[b-ocsgchbwjv] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.26);
        background: rgba(127, 29, 29, 0.20);
    }

.au-nomina-detalle[b-ocsgchbwjv] {
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .au-nomina-detalle > span[b-ocsgchbwjv] {
        display: block;
    }

    .au-nomina-detalle > small[b-ocsgchbwjv] {
        margin-top: 3px;
        color: #fde68a !important;
    }

@media (max-width: 900px) {
    .au-nomina-resumen[b-ocsgchbwjv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .au-nomina-resumen[b-ocsgchbwjv] {
        grid-template-columns: 1fr;
    }

    .au-modal-nomina-body[b-ocsgchbwjv] {
        padding: 10px;
    }
}
.au-btn-excel[b-ocsgchbwjv] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    white-space: nowrap;
    background-color: #198754;
    border: 1px solid #198754;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

    .au-btn-excel:hover[b-ocsgchbwjv] {
        background-color: #157347;
        border-color: #146c43;
    }

    .au-btn-excel .bi[b-ocsgchbwjv] {
        font-size: 15px;
    }

/* InputFile es un componente Blazor.
   ::deep permite alcanzar el input real que genera internamente. */
.au-file-wrapper[b-ocsgchbwjv] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

    .au-file-wrapper[b-ocsgchbwjv]  input[type="file"] {
        display: none !important;
    }

.au-btn-excel[b-ocsgchbwjv] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    flex: 0 0 auto !important;
    padding: 0 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    border: 1px solid rgba(34, 197, 94, 0.72);
    border-radius: 9px;
    background: linear-gradient(135deg, #15803d, #16a34a);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

    .au-btn-excel:hover:not(.au-btn-disabled)[b-ocsgchbwjv] {
        border-color: #4ade80;
        background: linear-gradient(135deg, #166534, #15803d);
    }

    .au-btn-excel > i[b-ocsgchbwjv] {
        font-size: 14px;
    }

.alta-usuario-page .tabla-wrap[b-ocsgchbwjv] {
    width: 100%;
    max-width: 100%;
    max-height: min(620px, calc(100vh - 330px));
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
}

.alta-usuario-page .au-tabla-gestion thead th[b-ocsgchbwjv] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #1e293b;
}

/* ==========================================================
   MODAL DE CARGA - ALTA USUARIOS
   ========================================================== */

.au-carga-overlay[b-ocsgchbwjv] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 15, 30, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* ==========================================================
   CAJA PRINCIPAL
   ========================================================== */

.au-carga-modal[b-ocsgchbwjv] {
    width: min(430px, calc(100vw - 40px));
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    border-radius: 16px;
    background: linear-gradient( 145deg, rgba(15, 48, 87, 0.98), rgba(10, 34, 66, 0.98) );
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.025);
    color: #ffffff;
}


/* ==========================================================
   ICONO / SPINNER
   ========================================================== */

.au-carga-icono[b-ocsgchbwjv] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.22);
}


    .au-carga-icono .spinner-border[b-ocsgchbwjv] {
        width: 28px;
        height: 28px;
        border-width: 3px;
        color: #93c5fd;
    }


/* ==========================================================
   TEXTO
   ========================================================== */

.au-carga-texto[b-ocsgchbwjv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


    .au-carga-texto strong[b-ocsgchbwjv] {
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.25;
        color: #ffffff;
    }


    .au-carga-texto span[b-ocsgchbwjv] {
        font-size: 0.9rem;
        line-height: 1.45;
        color: rgba(219, 234, 254, 0.82);
    }


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 520px) {

    .au-carga-modal[b-ocsgchbwjv] {
        gap: 14px;
        padding: 20px;
        border-radius: 14px;
    }

    .au-carga-icono[b-ocsgchbwjv] {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

        .au-carga-icono .spinner-border[b-ocsgchbwjv] {
            width: 24px;
            height: 24px;
        }

    .au-carga-texto strong[b-ocsgchbwjv] {
        font-size: 0.96rem;
    }

    .au-carga-texto span[b-ocsgchbwjv] {
        font-size: 0.84rem;
    }
}

/* ==========================================================
   EMPLEADO - CONTENER TEXTOS EXTREMADAMENTE LARGOS
   ========================================================== */

.au-nomina-tabla td:nth-child(5)[b-ocsgchbwjv] {
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: normal !important;
}

    .au-nomina-tabla td:nth-child(5) strong[b-ocsgchbwjv],
    .au-nomina-tabla td:nth-child(5) small[b-ocsgchbwjv] {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
/* /Components/Pages/blanquear.razor.rz.scp.css */
/* =========================================================
   RESTABLECER CONTRASEÑA
   Login / OlvideClave / CambioClave
   ========================================================= */

.blq-wrapper[b-xzocjmpi7e],
.blq-wrapper *[b-xzocjmpi7e] {
    box-sizing: border-box;
}


/* =========================================================
   FONDO GENERAL
   ========================================================= */

.blq-wrapper[b-xzocjmpi7e] {
    --blq-bg-1: #07111f;
    --blq-bg-2: #0f172a;
    --blq-bg-3: #10233d;
    --blq-primary: #0d6efd;
    --blq-primary-hover: #0b5ed7;
    --blq-text: #f8fafc;
    --blq-muted: #94a3b8;
    --blq-label: #cbd5e1;
    --blq-success: #22c55e;
    --blq-warning: #f59e0b;
    --blq-danger: #ef4444;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: radial-gradient( circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 30% ), radial-gradient( circle at 88% 86%, rgba(13, 110, 253, 0.16), transparent 34% ), linear-gradient( 135deg, var(--blq-bg-1) 0%, var(--blq-bg-2) 48%, var(--blq-bg-3) 100% );
}


    /* =========================================================
   BURBUJAS DEL FONDO
   ========================================================= */

    .blq-wrapper[b-xzocjmpi7e]::before {
        content: "";
        position: absolute;
        right: -145px;
        bottom: -170px;
        width: 540px;
        height: 540px;
        z-index: -2;
        opacity: 0.95;
        pointer-events: none;
        background: radial-gradient( circle at 56% 48%, rgba(66, 133, 244, 0.45) 0 72px, transparent 74px ), radial-gradient( circle at 35% 68%, rgba(52, 168, 83, 0.36) 0 58px, transparent 60px ), radial-gradient( circle at 72% 72%, rgba(251, 188, 5, 0.35) 0 50px, transparent 52px ), radial-gradient( circle at 42% 36%, rgba(234, 67, 53, 0.31) 0 44px, transparent 46px ), radial-gradient( circle at 82% 42%, rgba(56, 189, 248, 0.30) 0 40px, transparent 42px );
        animation: blqBubbles-b-xzocjmpi7e 24s ease-in-out infinite alternate;
    }


    .blq-wrapper[b-xzocjmpi7e]::after {
        content: "";
        position: absolute;
        left: -190px;
        top: -190px;
        width: 470px;
        height: 470px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.58;
        background: radial-gradient( circle at center, rgba(34, 197, 94, 0.22), transparent 64% ), radial-gradient( circle at 62% 42%, rgba(56, 189, 248, 0.20), transparent 48% );
        filter: blur(2px);
    }


@keyframes blqBubbles-b-xzocjmpi7e {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-14px, -10px, 0) scale(1.035);
    }
}


/* =========================================================
   CARD
   ========================================================= */

.blq-card[b-xzocjmpi7e] {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 2.65rem 2.45rem 2.15rem;
    border-radius: 28px;
    text-align: center;
    color: var(--blq-text);
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.75) );
    border: 1px solid rgba(125, 211, 252, 0.20);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}


    /* Línea institucional */

    .blq-card[b-xzocjmpi7e]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, #4285f4, #34a853, #fbbc05, #ea4335 );
        box-shadow: 0 8px 22px rgba(13, 110, 253, 0.22);
    }


    /* Brillo interno */

    .blq-card[b-xzocjmpi7e]::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 20px;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient( circle, rgba(13, 110, 253, 0.10), transparent 68% );
    }


@media (hover: hover) {

    .blq-card:hover[b-xzocjmpi7e] {
        transform: translateY(-3px);
        border-color: rgba(13, 110, 253, 0.28);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}


/* =========================================================
   ICONO
   ========================================================= */

.blq-icon[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    color: #60a5fa;
    font-size: 21px;
    background: linear-gradient( 145deg, rgba(13, 110, 253, 0.18), rgba(56, 189, 248, 0.08) );
    border: 1px solid rgba(96, 165, 250, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 9px 25px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.blq-card h1[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #f8fafc;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;
}


.blq-subtitle[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin: 0.75rem auto 1.8rem;
    color: #aebdd0;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.blq-field[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.15rem;
    text-align: left;
}


.blq-field-confirm[b-xzocjmpi7e] {
    margin-bottom: 1rem;
}


.blq-field label[b-xzocjmpi7e] {
    display: block;
    margin-bottom: 7px;
    color: var(--blq-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1px;
}


/* =========================================================
   PASSWORD
   ========================================================= */

.blq-password-wrapper[b-xzocjmpi7e] {
    position: relative;
    display: flex;
    align-items: center;
}


.blq-input-icon[b-xzocjmpi7e] {
    position: absolute;
    left: 15px;
    z-index: 2;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}


.blq-input[b-xzocjmpi7e] {
    width: 100%;
    min-height: 50px;
    padding: 13px 48px 13px 43px;
    border: 1px solid #d7deea;
    border-radius: 14px;
    outline: none;
    background: linear-gradient( 180deg, #ffffff, #f8fafc );
    color: #0f172a;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    /*
       Mantener 16px:
       evita zoom automático en iPhone.
    */
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}


    .blq-input[b-xzocjmpi7e]::placeholder {
        color: #94a3b8;
    }


    .blq-input:hover:not(:disabled)[b-xzocjmpi7e] {
        border-color: #b8c3d6;
    }


    .blq-input:focus[b-xzocjmpi7e] {
        border-color: var(--blq-primary);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.13), 0 8px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }


    .blq-input:disabled[b-xzocjmpi7e] {
        opacity: 0.70;
        cursor: not-allowed;
    }


    .blq-input.blq-input-ok[b-xzocjmpi7e] {
        border-color: rgba(34, 197, 94, 0.65);
    }


    .blq-input.blq-input-error[b-xzocjmpi7e] {
        border-color: rgba(239, 68, 68, 0.70);
    }


/* =========================================================
   MOSTRAR / OCULTAR CONTRASEÑA
   ========================================================= */

.blq-toggle-password[b-xzocjmpi7e] {
    position: absolute;
    right: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}


    .blq-toggle-password:hover:not(:disabled)[b-xzocjmpi7e] {
        color: var(--blq-primary);
        background: rgba(13, 110, 253, 0.08);
        transform: scale(1.04);
    }


    .blq-toggle-password:focus-visible[b-xzocjmpi7e] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }


    .blq-toggle-password:disabled[b-xzocjmpi7e] {
        opacity: 0.45;
        cursor: not-allowed;
    }


/* =========================================================
   COINCIDENCIA
   ========================================================= */

.blq-match[b-xzocjmpi7e] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding-left: 2px;
    font-size: 12px;
    line-height: 1.3;
}


    .blq-match.ok[b-xzocjmpi7e] {
        color: #4ade80;
    }


    .blq-match.error[b-xzocjmpi7e] {
        color: #fca5a5;
    }


/* =========================================================
   REQUISITOS
   ========================================================= */

.blq-requisitos[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    margin: 1.15rem 0 1.35rem;
    padding: 15px;
    border-radius: 16px;
    text-align: left;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


.blq-requisitos-header[b-xzocjmpi7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}


.blq-requisitos-title[b-xzocjmpi7e] {
    display: block;
    color: #dbeafe;
    font-size: 12.5px;
    font-weight: 700;
}


.blq-requisitos-counter[b-xzocjmpi7e] {
    display: block;
    margin-top: 2px;
    color: #71849c;
    font-size: 11px;
}


.blq-security-ready[b-xzocjmpi7e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    font-size: 10.5px;
    font-weight: 700;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.blq-progress[b-xzocjmpi7e] {
    width: 100%;
    height: 5px;
    margin-bottom: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.13);
}


.blq-progress-bar[b-xzocjmpi7e] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #0d6efd, #22c55e );
    transition: width 0.25s ease;
}


/* =========================================================
   REGLAS
   ========================================================= */

.blq-rules[b-xzocjmpi7e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}


    .blq-rules li[b-xzocjmpi7e] {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        color: #71849c;
        font-size: 11.5px;
        line-height: 1.3;
        transition: color 0.2s ease, opacity 0.2s ease;
    }


        .blq-rules li.ok[b-xzocjmpi7e] {
            color: #86efac;
        }


        .blq-rules li.pending[b-xzocjmpi7e] {
            color: #71849c;
        }


.blq-rule-icon[b-xzocjmpi7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    width: 15px;
    font-size: 11px;
}


.blq-rules li.ok .blq-rule-icon[b-xzocjmpi7e] {
    color: #22c55e;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.blq-btn[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: var(--blq-primary);
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}


.blq-btn-content[b-xzocjmpi7e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}


.blq-btn:hover:not(:disabled)[b-xzocjmpi7e] {
    background: var(--blq-primary-hover);
    border-color: rgba(147, 197, 253, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(13, 110, 253, 0.28);
}


.blq-btn:active:not(:disabled)[b-xzocjmpi7e] {
    transform: translateY(0);
    background: #0a58ca;
    box-shadow: 0 7px 16px rgba(13, 110, 253, 0.22);
}


.blq-btn:focus-visible[b-xzocjmpi7e] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18), 0 10px 22px rgba(13, 110, 253, 0.22);
}


.blq-btn:disabled[b-xzocjmpi7e] {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================================
   VALIDANDO LINK
   ========================================================= */

.blq-loading[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 15px;
    text-align: left;
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.18);
}


.blq-loading-icon[b-xzocjmpi7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    font-size: 17px;
}


.blq-loading strong[b-xzocjmpi7e],
.blq-loading span[b-xzocjmpi7e] {
    display: block;
}


.blq-loading strong[b-xzocjmpi7e] {
    margin-bottom: 2px;
    color: #dbeafe;
    font-size: 13px;
}


.blq-loading div > span[b-xzocjmpi7e] {
    color: #8fa8c8;
    font-size: 12px;
}


/* =========================================================
   LINK INVÁLIDO
   ========================================================= */

.blq-status[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding: 15px 16px;
    border-radius: 15px;
    text-align: left;
}


.blq-status-error[b-xzocjmpi7e] {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(248, 113, 113, 0.18);
}


.blq-status-icon[b-xzocjmpi7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.10);
    font-size: 16px;
}


.blq-status-content[b-xzocjmpi7e] {
    flex: 1;
}


    .blq-status-content strong[b-xzocjmpi7e] {
        display: block;
        margin-bottom: 4px;
        color: #fecaca;
        font-size: 13px;
    }


    .blq-status-content span[b-xzocjmpi7e] {
        display: block;
        color: #c99a9f;
        font-size: 12px;
        line-height: 1.45;
    }


/* =========================================================
   MENSAJE
   ========================================================= */

.blq-message[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 13px;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
}


.blq-message-icon[b-xzocjmpi7e] {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 14px;
}


.blq-message.success[b-xzocjmpi7e] {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.20);
}


.blq-message.warning[b-xzocjmpi7e] {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.20);
}


.blq-message.error[b-xzocjmpi7e] {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.20);
}


/* =========================================================
   SEGURIDAD
   ========================================================= */

.blq-security-note[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 1.45rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    color: #70839a;
    font-size: 11.5px;
    line-height: 1.4;
}


    .blq-security-note i[b-xzocjmpi7e] {
        flex: 0 0 auto;
        color: #64748b;
    }


/* =========================================================
   ACCIÓN SECUNDARIA
   ========================================================= */

.blq-secondary-action[b-xzocjmpi7e] {
    position: relative;
    z-index: 1;
    margin-top: 1.35rem;
    text-align: center;
}


    .blq-secondary-action a[b-xzocjmpi7e] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #60a5fa;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease, opacity 0.2s ease;
    }


        .blq-secondary-action a:hover[b-xzocjmpi7e] {
            color: #93c5fd;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 720px) {

    .blq-wrapper[b-xzocjmpi7e]::before {
        right: -230px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        opacity: 0.70;
    }


    .blq-wrapper[b-xzocjmpi7e]::after {
        left: -260px;
        top: -260px;
        opacity: 0.42;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 480px) {

    .blq-wrapper[b-xzocjmpi7e] {
        align-items: flex-start;
        padding: max(0.8rem, env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left));
    }


    .blq-card[b-xzocjmpi7e] {
        max-width: 100%;
        margin: auto 0;
        padding: 2.05rem 1.4rem 1.7rem;
        border-radius: 22px;
    }


    .blq-icon[b-xzocjmpi7e] {
        width: 52px;
        height: 52px;
        margin-bottom: 0.9rem;
        border-radius: 16px;
        font-size: 19px;
    }


    .blq-card h1[b-xzocjmpi7e] {
        font-size: 23px;
    }


    .blq-subtitle[b-xzocjmpi7e] {
        margin-bottom: 1.5rem;
        font-size: 13.5px;
    }


    .blq-input[b-xzocjmpi7e] {
        min-height: 49px;
        font-size: 16px;
    }


    .blq-rules[b-xzocjmpi7e] {
        grid-template-columns: 1fr;
        gap: 7px;
    }


    .blq-btn[b-xzocjmpi7e] {
        min-height: 49px;
    }


    .blq-security-note[b-xzocjmpi7e] {
        align-items: flex-start;
        font-size: 11px;
        text-align: left;
    }
}


/* =========================================================
   CELULARES MUY ANGOSTOS
   ========================================================= */

@media (max-width: 360px) {

    .blq-card[b-xzocjmpi7e] {
        padding: 1.9rem 1.1rem 1.55rem;
    }


        .blq-card h1[b-xzocjmpi7e] {
            font-size: 21px;
        }


    .blq-subtitle[b-xzocjmpi7e] {
        font-size: 13px;
    }


    .blq-requisitos[b-xzocjmpi7e] {
        padding: 13px 12px;
    }


    .blq-status[b-xzocjmpi7e] {
        padding: 13px;
    }
}


/* =========================================================
   CELULAR HORIZONTAL / PANTALLA BAJA
   ========================================================= */

@media (max-height: 700px) {

    .blq-wrapper[b-xzocjmpi7e] {
        align-items: flex-start;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }


    .blq-card[b-xzocjmpi7e] {
        margin: auto 0;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blq-wrapper[b-xzocjmpi7e]::before {
        animation: none !important;
    }


    .blq-card[b-xzocjmpi7e],
    .blq-input[b-xzocjmpi7e],
    .blq-toggle-password[b-xzocjmpi7e],
    .blq-progress-bar[b-xzocjmpi7e],
    .blq-rules li[b-xzocjmpi7e],
    .blq-btn[b-xzocjmpi7e],
    .blq-secondary-action a[b-xzocjmpi7e] {
        transition: none !important;
    }
}
/* /Components/Pages/CambioClave.razor.rz.scp.css */
/* =========================================================
   CAMBIO DE CONTRASEÑA
   Diseño institucional moderno / responsive
   Alineado con Login y OlvideClave
   ========================================================= */

.cc-wrapper[b-q04a33gjyi],
.cc-wrapper *[b-q04a33gjyi] {
    box-sizing: border-box;
}


/* =========================================================
   FONDO
   ========================================================= */

.cc-wrapper[b-q04a33gjyi] {
    --cc-bg-1: #07111f;
    --cc-bg-2: #0f172a;
    --cc-bg-3: #10233d;
    --cc-primary: #0d6efd;
    --cc-primary-hover: #0b5ed7;
    --cc-text: #f8fafc;
    --cc-muted: #94a3b8;
    --cc-label: #cbd5e1;
    --cc-success: #22c55e;
    --cc-warning: #f59e0b;
    --cc-danger: #ef4444;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--cc-text);
    background: radial-gradient( circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 30% ), radial-gradient( circle at 88% 86%, rgba(13, 110, 253, 0.16), transparent 34% ), linear-gradient( 135deg, var(--cc-bg-1) 0%, var(--cc-bg-2) 48%, var(--cc-bg-3) 100% );
}


    /* =========================================================
   DECORACIÓN DE FONDO
   ========================================================= */

    .cc-wrapper[b-q04a33gjyi]::before {
        content: "";
        position: absolute;
        right: -145px;
        bottom: -170px;
        width: 540px;
        height: 540px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.95;
        background: radial-gradient( circle at 56% 48%, rgba(66, 133, 244, 0.45) 0 72px, transparent 74px ), radial-gradient( circle at 35% 68%, rgba(52, 168, 83, 0.36) 0 58px, transparent 60px ), radial-gradient( circle at 72% 72%, rgba(251, 188, 5, 0.35) 0 50px, transparent 52px ), radial-gradient( circle at 42% 36%, rgba(234, 67, 53, 0.31) 0 44px, transparent 46px ), radial-gradient( circle at 82% 42%, rgba(56, 189, 248, 0.30) 0 40px, transparent 42px );
        animation: ccBubbles-b-q04a33gjyi 24s ease-in-out infinite alternate;
    }


    .cc-wrapper[b-q04a33gjyi]::after {
        content: "";
        position: absolute;
        left: -190px;
        top: -190px;
        width: 470px;
        height: 470px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.58;
        background: radial-gradient( circle at center, rgba(34, 197, 94, 0.22), transparent 64% ), radial-gradient( circle at 62% 42%, rgba(56, 189, 248, 0.20), transparent 48% );
        filter: blur(2px);
    }


@keyframes ccBubbles-b-q04a33gjyi {

    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-14px, -10px, 0) scale(1.035);
    }
}


/* =========================================================
   CARD
   ========================================================= */

.cc-card[b-q04a33gjyi] {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 2.65rem 2.45rem 2.15rem;
    border-radius: 28px;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.75) );
    border: 1px solid rgba(125, 211, 252, 0.20);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}


    /* Línea superior institucional */

    .cc-card[b-q04a33gjyi]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, #4285f4, #34a853, #fbbc05, #ea4335 );
        box-shadow: 0 8px 22px rgba(13, 110, 253, 0.22);
    }


    /* Brillo interior */

    .cc-card[b-q04a33gjyi]::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 20px;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        background: radial-gradient( circle, rgba(13, 110, 253, 0.10), transparent 68% );
        pointer-events: none;
    }


@media (hover: hover) {

    .cc-card:hover[b-q04a33gjyi] {
        transform: translateY(-3px);
        border-color: rgba(13, 110, 253, 0.28);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}


/* =========================================================
   ICONO
   ========================================================= */

.cc-icon[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    color: #60a5fa;
    font-size: 21px;
    background: linear-gradient( 145deg, rgba(13, 110, 253, 0.18), rgba(56, 189, 248, 0.08) );
    border: 1px solid rgba(96, 165, 250, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 9px 25px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.cc-card h1[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #f8fafc;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;
}


.cc-subtitle[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin: 0.7rem auto 1.8rem;
    color: #aebdd0;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.cc-field[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.15rem;
    text-align: left;
}


.cc-field-confirmacion[b-q04a33gjyi] {
    margin-bottom: 1rem;
}


.cc-field label[b-q04a33gjyi] {
    display: block;
    margin-bottom: 7px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1px;
}


/* =========================================================
   INPUT PASSWORD
   ========================================================= */

.cc-password-wrapper[b-q04a33gjyi] {
    position: relative;
    display: flex;
    align-items: center;
}


.cc-input-icon[b-q04a33gjyi] {
    position: absolute;
    left: 15px;
    z-index: 2;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}


.cc-input[b-q04a33gjyi] {
    width: 100%;
    min-height: 50px;
    padding: 13px 48px 13px 43px;
    border-radius: 14px;
    border: 1px solid #d7deea;
    outline: none;
    background: linear-gradient( 180deg, #ffffff, #f8fafc );
    color: #0f172a;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    /*
       16px también evita zoom automático
       en Safari / iPhone.
    */
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}


    .cc-input[b-q04a33gjyi]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }


    .cc-input:hover:not(:disabled)[b-q04a33gjyi] {
        border-color: #b8c3d6;
    }


    .cc-input:focus[b-q04a33gjyi] {
        border-color: var(--cc-primary);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.13), 0 8px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }


    .cc-input:disabled[b-q04a33gjyi] {
        opacity: 0.70;
        cursor: not-allowed;
    }


    /* Confirmación correcta */

    .cc-input.cc-input-ok[b-q04a33gjyi] {
        border-color: rgba(34, 197, 94, 0.65);
    }


    /* Confirmación diferente */

    .cc-input.cc-input-error[b-q04a33gjyi] {
        border-color: rgba(239, 68, 68, 0.65);
    }


/* =========================================================
   MOSTRAR / OCULTAR
   ========================================================= */

.cc-toggle-password[b-q04a33gjyi] {
    position: absolute;
    right: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}


    .cc-toggle-password:hover:not(:disabled)[b-q04a33gjyi] {
        color: var(--cc-primary);
        background: rgba(13, 110, 253, 0.08);
        transform: scale(1.04);
    }


    .cc-toggle-password:focus-visible[b-q04a33gjyi] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }


    .cc-toggle-password:disabled[b-q04a33gjyi] {
        opacity: 0.45;
        cursor: not-allowed;
    }


/* =========================================================
   COINCIDENCIA
   ========================================================= */

.cc-coincidencia[b-q04a33gjyi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding-left: 2px;
    font-size: 12px;
    line-height: 1.3;
}


    .cc-coincidencia.ok[b-q04a33gjyi] {
        color: #4ade80;
    }


    .cc-coincidencia.error[b-q04a33gjyi] {
        color: #fca5a5;
    }


/* =========================================================
   REQUISITOS
   ========================================================= */

.cc-requisitos[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    margin: 1.15rem 0 1.35rem;
    padding: 15px;
    border-radius: 16px;
    text-align: left;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


.cc-requisitos-header[b-q04a33gjyi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}


.cc-requisitos-title[b-q04a33gjyi] {
    display: block;
    color: #dbeafe;
    font-size: 12.5px;
    font-weight: 700;
}


.cc-requisitos-progress-text[b-q04a33gjyi] {
    display: block;
    margin-top: 2px;
    color: #71849c;
    font-size: 11px;
}


.cc-ready[b-q04a33gjyi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    font-size: 10.5px;
    font-weight: 700;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.cc-progress[b-q04a33gjyi] {
    width: 100%;
    height: 5px;
    margin-bottom: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.13);
}


.cc-progress-bar[b-q04a33gjyi] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #0d6efd, #22c55e );
    transition: width 0.25s ease;
}


/* =========================================================
   LISTA DE REGLAS
   ========================================================= */

.cc-reglas[b-q04a33gjyi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}


    .cc-reglas li[b-q04a33gjyi] {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        color: #71849c;
        font-size: 11.5px;
        line-height: 1.3;
        transition: color 0.2s ease, opacity 0.2s ease;
    }


        .cc-reglas li.ok[b-q04a33gjyi] {
            color: #86efac;
        }


        .cc-reglas li.pending[b-q04a33gjyi] {
            color: #71849c;
        }


.cc-rule-icon[b-q04a33gjyi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    width: 15px;
    font-size: 11px;
}


.cc-reglas li.ok .cc-rule-icon[b-q04a33gjyi] {
    color: #22c55e;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.cc-btn[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: var(--cc-primary);
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}


.cc-btn-content[b-q04a33gjyi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}


.cc-btn:hover:not(:disabled)[b-q04a33gjyi] {
    background: var(--cc-primary-hover);
    border-color: rgba(147, 197, 253, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(13, 110, 253, 0.28);
}


.cc-btn:active:not(:disabled)[b-q04a33gjyi] {
    transform: translateY(0);
    background: #0a58ca;
    box-shadow: 0 7px 16px rgba(13, 110, 253, 0.22);
}


.cc-btn:focus-visible[b-q04a33gjyi] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18), 0 10px 22px rgba(13, 110, 253, 0.22);
}


.cc-btn:disabled[b-q04a33gjyi] {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================================
   MENSAJES
   ========================================================= */

.cc-mensaje[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 13px;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
}


.cc-mensaje-icon[b-q04a33gjyi] {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 14px;
}


.cc-mensaje.success[b-q04a33gjyi] {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.20);
}


.cc-mensaje.warning[b-q04a33gjyi] {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.20);
}


.cc-mensaje.error[b-q04a33gjyi] {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.20);
}


/* =========================================================
   NOTA DE SEGURIDAD
   ========================================================= */

.cc-security-note[b-q04a33gjyi] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 1.45rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    color: #70839a;
    font-size: 11.5px;
    line-height: 1.4;
}


    .cc-security-note i[b-q04a33gjyi] {
        color: #64748b;
        font-size: 12px;
    }


/* =========================================================
   TABLET / TELÉFONO
   ========================================================= */

@media (max-width: 720px) {

    .cc-wrapper[b-q04a33gjyi]::before {
        right: -230px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        opacity: 0.70;
    }


    .cc-wrapper[b-q04a33gjyi]::after {
        left: -260px;
        top: -260px;
        opacity: 0.42;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .cc-wrapper[b-q04a33gjyi] {
        align-items: flex-start;
        padding: max(0.8rem, env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left));
    }


    .cc-card[b-q04a33gjyi] {
        max-width: 100%;
        margin: auto 0;
        padding: 2.05rem 1.4rem 1.7rem;
        border-radius: 22px;
    }


    .cc-icon[b-q04a33gjyi] {
        width: 52px;
        height: 52px;
        margin-bottom: 0.9rem;
        border-radius: 16px;
        font-size: 19px;
    }


    .cc-card h1[b-q04a33gjyi] {
        font-size: 23px;
    }


    .cc-subtitle[b-q04a33gjyi] {
        margin-bottom: 1.5rem;
        font-size: 13.5px;
    }


    .cc-input[b-q04a33gjyi] {
        min-height: 49px;
        font-size: 16px;
    }


    .cc-reglas[b-q04a33gjyi] {
        grid-template-columns: 1fr;
        gap: 7px;
    }


        .cc-reglas li[b-q04a33gjyi] {
            font-size: 11.5px;
        }


    .cc-btn[b-q04a33gjyi] {
        min-height: 49px;
    }


    .cc-security-note[b-q04a33gjyi] {
        font-size: 11px;
    }
}


/* =========================================================
   TELÉFONOS MUY ANGOSTOS
   ========================================================= */

@media (max-width: 360px) {

    .cc-card[b-q04a33gjyi] {
        padding: 1.9rem 1.1rem 1.55rem;
    }


        .cc-card h1[b-q04a33gjyi] {
            font-size: 21px;
        }


    .cc-subtitle[b-q04a33gjyi] {
        font-size: 13px;
    }


    .cc-requisitos[b-q04a33gjyi] {
        padding: 13px 12px;
    }
}


/* =========================================================
   PANTALLAS BAJAS / CELULAR HORIZONTAL
   ========================================================= */

@media (max-height: 700px) {

    .cc-wrapper[b-q04a33gjyi] {
        align-items: flex-start;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }


    .cc-card[b-q04a33gjyi] {
        margin: auto 0;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cc-wrapper[b-q04a33gjyi]::before {
        animation: none !important;
    }


    .cc-card[b-q04a33gjyi],
    .cc-input[b-q04a33gjyi],
    .cc-toggle-password[b-q04a33gjyi],
    .cc-progress-bar[b-q04a33gjyi],
    .cc-reglas li[b-q04a33gjyi],
    .cc-btn[b-q04a33gjyi] {
        transition: none !important;
    }
}
/* /Components/Pages/Cartelera.razor.rz.scp.css */
.cartelera-card[b-viq4tp363g] {
    width: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.42);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.20);
    color: #e5e7eb;
}

.cartelera-header[b-viq4tp363g] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.cartelera-icon[b-viq4tp363g] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(37,99,235,0.10));
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: #7dd3fc;
}

.cartelera-header h3[b-viq4tp363g] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
}

.cartelera-header p[b-viq4tp363g] {
    margin: 3px 0 0;
    font-size: 0.86rem;
    color: rgba(226, 232, 240, 0.72);
}

.cartelera-body[b-viq4tp363g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cartelera-item[b-viq4tp363g] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.22);
    box-sizing: border-box;
}

.cartelera-item-text[b-viq4tp363g] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .cartelera-item-text strong[b-viq4tp363g] {
        font-size: 0.94rem;
        color: #f8fafc;
    }

    .cartelera-item-text span[b-viq4tp363g] {
        font-size: 0.86rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, 0.78);
    }

.cartelera-btn[b-viq4tp363g] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(147, 197, 253, 0.35);
}

    .cartelera-btn:hover[b-viq4tp363g] {
        color: #ffffff;
        filter: brightness(1.05);
    }

@media (max-width: 768px) {
    .cartelera-card[b-viq4tp363g] {
        padding: 16px;
        border-radius: 16px;
    }

    .cartelera-item[b-viq4tp363g] {
        align-items: stretch;
        flex-direction: column;
    }

    .cartelera-btn[b-viq4tp363g] {
        width: 100%;
    }
}


.cartelera-item-vacio[b-viq4tp363g] {
    opacity: 0.78;
}

    .cartelera-item-vacio strong[b-viq4tp363g] {
        color: rgba(248, 250, 252, 0.86);
    }

.cartelera-link-pdf[b-viq4tp363g] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #93c5fd;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

    .cartelera-link-pdf i[b-viq4tp363g] {
        color: #f87171;
        font-size: 0.9rem;
    }

    .cartelera-link-pdf:hover[b-viq4tp363g] {
        color: #bfdbfe;
        transform: translateX(2px);
    }
/* /Components/Pages/FichaPersonal.razor.rz.scp.css */
/* ==========================================================
   TÍTULOS DE BLOQUES ESPECÍFICOS
   ========================================================== */

.bloque2-container h4[b-agr2o3aoen],
.bloque4-container h4[b-agr2o3aoen] {
    color: #f8fafc;
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ==========================================================
   HORARIOS / JORNADAS
   ========================================================== */

.form-row select.horario[b-agr2o3aoen] {
    max-width: 80px;
    text-align: center;
}

.icono-edicion[b-agr2o3aoen] {
    font-size: 1.1rem;
    margin-left: 8px;
    color: #facc15;
}

.total-horas[b-agr2o3aoen] {
    font-weight: 700;
    font-size: 1rem;
    margin-top: 15px;
    color: #f8fafc;
}

/* ==========================================================
   BOTONES DE ACCIÓN INTERNOS
   ========================================================== */

.btn-editar[b-agr2o3aoen],
.btn-eliminar[b-agr2o3aoen],
.btn-guardar[b-agr2o3aoen],
.btn-cancelar[b-agr2o3aoen] {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .btn-editar:hover[b-agr2o3aoen],
    .btn-eliminar:hover[b-agr2o3aoen],
    .btn-guardar:hover[b-agr2o3aoen],
    .btn-cancelar:hover[b-agr2o3aoen] {
        transform: translateY(-1px);
    }

.btn-editar[b-agr2o3aoen] {
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #111827;
}

.btn-eliminar[b-agr2o3aoen] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
}

.btn-guardar[b-agr2o3aoen] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
}

.btn-cancelar[b-agr2o3aoen] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
}

/* ==========================================================
   ESTRELLAS
   ========================================================== */

.estrella[b-agr2o3aoen] {
    font-size: 40px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
    user-select: none;
}

    .estrella:hover[b-agr2o3aoen] {
        color: orange;
        transform: scale(1.05);
    }

.estrellas-container[b-agr2o3aoen] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

/* ==========================================================
   CHECKBOX EGRESO
   ========================================================== */

.form-row.checkbox-egreso-row[b-agr2o3aoen] {
    margin-top: 32px;
}

.checkbox-incluir[b-agr2o3aoen] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

#chkEgreso[b-agr2o3aoen] {
    margin: 0;
    transform: scale(1.35);
    transform-origin: left center;
    cursor: pointer;
}

.checkbox-incluir label[b-agr2o3aoen] {
    display: inline-block;
    margin: 0;
    white-space: nowrap;
    padding: 0;
    cursor: pointer;
    color: #e5e7eb;
    font-weight: 700;
}

/* ==========================================================
   BLOQUE DE LEGAJOS
   ========================================================== */

.botonera-legajos[b-agr2o3aoen] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.contenedor-legajos[b-agr2o3aoen] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
}

.card-legajo[b-agr2o3aoen] {
    flex: 0 0 320px;
    width: 320px;
    max-width: 320px;
    min-height: 122px;
    padding: 14px 16px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

    .card-legajo:hover[b-agr2o3aoen] {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    }

    .card-legajo:disabled[b-agr2o3aoen] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

.card-legajo-header[b-agr2o3aoen] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.card-legajo-icono[b-agr2o3aoen] {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    font-size: 22px;
}

.card-legajo-main[b-agr2o3aoen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.card-legajo-topline[b-agr2o3aoen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-legajo-numero[b-agr2o3aoen] {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.card-legajo-badge[b-agr2o3aoen] {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.card-legajo-meta[b-agr2o3aoen] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-legajo-razon[b-agr2o3aoen] {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.card-legajo-sector[b-agr2o3aoen] {
    font-size: 0.88rem;
    font-weight: 500;
    opacity: .96;
    line-height: 1.2;
}

.card-legajo-fecha[b-agr2o3aoen] {
    font-size: 0.82rem;
    opacity: .9;
    margin-top: 3px;
    font-weight: 600;
}

/* ==========================================================
   COLORES DE TARJETAS
   ========================================================== */

.card-legajo-activo[b-agr2o3aoen] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
}

.card-legajo-egreso-futuro[b-agr2o3aoen] {
    background: linear-gradient(135deg, #d4a017, #b98900);
    color: white;
}

.card-legajo-inactivo[b-agr2o3aoen] {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
}

.card-crear-legajo[b-agr2o3aoen] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

/* ==========================================================
   BADGES
   ========================================================== */

.badge-activo[b-agr2o3aoen],
.badge-egreso-futuro[b-agr2o3aoen],
.badge-inactivo[b-agr2o3aoen] {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.18);
}

/* ==========================================================
   BOTONES DEL BLOQUE 4
   ========================================================== */

.btn-cambiar-legajo[b-agr2o3aoen],
.btn-eliminar-legajo[b-agr2o3aoen] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px !important;
    border: none !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .btn-cambiar-legajo:hover[b-agr2o3aoen],
    .btn-eliminar-legajo:hover[b-agr2o3aoen] {
        transform: translateY(-1px);
    }

.btn-cambiar-legajo[b-agr2o3aoen] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.btn-eliminar-legajo[b-agr2o3aoen] {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.18);
}

.acciones-legajo-final[b-agr2o3aoen] {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

/* ==========================================================
   ÚLTIMA ACTUALIZACIÓN
   ========================================================== */

.ultima-actualizacion-legajo[b-agr2o3aoen] {
    margin-top: 10px;
    text-align: right;
    color: #15803d;
    font-weight: 700;
    font-size: 1.05rem;
}

/* ==========================================================
   ADJUNTOS
   ========================================================== */

.btn-adjuntos[b-agr2o3aoen] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    margin-top: 16px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.18);
}

    .btn-adjuntos:hover[b-agr2o3aoen] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(13, 148, 136, 0.22);
        background: linear-gradient(135deg, #0d9488, #0f766e);
    }

    .btn-adjuntos i[b-agr2o3aoen] {
        font-size: 16px;
    }

    .btn-adjuntos:disabled[b-agr2o3aoen] {
        opacity: .5;
        cursor: not-allowed;
        box-shadow: none;
    }

.badge-adjuntos[b-agr2o3aoen] {
    background: #ef4444;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}

.adjuntos-layout[b-agr2o3aoen] {
    flex: 1;
    display: grid;
    grid-template-columns: 340px 1fr;
    overflow: hidden;
    padding-top: 14px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
    .contenedor-legajos[b-agr2o3aoen] {
        flex-direction: column;
    }

    .card-legajo[b-agr2o3aoen] {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .adjuntos-layout[b-agr2o3aoen] {
        grid-template-columns: 1fr;
    }

    .acciones-legajo-final[b-agr2o3aoen] {
        justify-content: stretch;
    }

    .btn-cambiar-legajo[b-agr2o3aoen],
    .btn-eliminar-legajo[b-agr2o3aoen],
    .btn-adjuntos[b-agr2o3aoen] {
        width: 100%;
    }
}
/* ==========================================================
   OBSERVACIONES DEL LEGAJO
   ========================================================== */

.observaciones-legajo-container[b-agr2o3aoen] {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.04);
}

.observaciones-legajo-label[b-agr2o3aoen] {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 700;
}

.observaciones-legajo-textarea[b-agr2o3aoen] {
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    padding: 11px 13px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .observaciones-legajo-textarea:focus[b-agr2o3aoen] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .observaciones-legajo-textarea:disabled[b-agr2o3aoen] {
        cursor: not-allowed;
        color: #64748b;
        background: #f1f5f9;
    }

.observaciones-legajo-ayuda[b-agr2o3aoen] {
    margin-top: 6px;
    color: #64748b;
    font-size: 0.78rem;
}
/* /Components/Pages/FirmaRecibos.razor.rz.scp.css */
/* ==========================================================
   FIRMA DE RECIBOS
   Interfaz operativa alineada con SubirRecibos
   ========================================================== */

.firma-recibos-page[b-ldu9a3azfi] {
    --fr-fondo: #0b1220;
    --fr-fondo-profundo: #070d18;
    --fr-panel: rgba(15, 23, 42, 0.72);
    --fr-panel-claro: rgba(30, 41, 59, 0.82);
    --fr-panel-hover: rgba(30, 41, 59, 0.94);
    --fr-texto: #f8fafc;
    --fr-texto-secundario: #e2e8f0;
    --fr-muted: #94a3b8;
    --fr-muted-suave: #7f8ea3;
    --fr-borde: rgba(148, 163, 184, 0.16);
    --fr-borde-suave: rgba(148, 163, 184, 0.10);
    --fr-azul: #3b82f6;
    --fr-azul-hover: #2563eb;
    --fr-azul-fuerte: #2563eb;
    --fr-verde: #22c55e;
    --fr-verde-hover: #16a34a;
    --fr-amarillo: #f59e0b;
    --fr-rojo: #ef4444;
    --fr-rojo-hover: #dc2626;
    width: min(1440px, calc(100% - 28px));
    margin: 14px auto 32px;
    padding: 14px;
    box-sizing: border-box;
    color: var(--fr-texto);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(2, 6, 23, 0.30);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.16);
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */

.firma-encabezado[b-ldu9a3azfi] {
    min-height: 82px;
    padding: 17px 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 16px;
    background: radial-gradient(circle at 92% 10%, rgba(59, 130, 246, 0.14), transparent 34%), linear-gradient(180deg, rgba(16, 32, 53, 0.96), rgba(12, 25, 44, 0.96));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.firma-encabezado-icono[b-ldu9a3azfi] {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(145deg, #2563eb, #3b82f6);
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
}

.firma-encabezado-texto[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.firma-encabezado h1[b-ldu9a3azfi] {
    margin: 0;
    flex: 0 0 auto;
    color: var(--fr-texto);
    font-size: clamp(23px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.firma-encabezado p[b-ldu9a3azfi] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: var(--fr-muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   MENSAJES
   ========================================================== */

.firma-mensaje[b-ldu9a3azfi] {
    margin-top: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 10px;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.10);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.42;
}

    .firma-mensaje > i[b-ldu9a3azfi] {
        margin-top: 2px;
        flex: 0 0 auto;
    }

    .firma-mensaje.success[b-ldu9a3azfi] {
        color: #dcfce7;
        border-color: rgba(34, 197, 94, 0.24);
        background: rgba(34, 197, 94, 0.10);
    }

    .firma-mensaje.warning[b-ldu9a3azfi] {
        color: #fef3c7;
        border-color: rgba(245, 158, 11, 0.26);
        background: rgba(245, 158, 11, 0.10);
    }

    .firma-mensaje.error[b-ldu9a3azfi] {
        color: #fee2e2;
        border-color: rgba(239, 68, 68, 0.26);
        background: rgba(239, 68, 68, 0.10);
    }

/* ==========================================================
   SISTEMA LOCAL / TOKEN
   ========================================================== */

.firma-estado-local[b-ldu9a3azfi] {
    margin-top: 10px;
    min-height: 62px;
    padding: 10px 12px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    border: 1px solid var(--fr-borde);
    border-radius: 14px;
    background: var(--fr-panel);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12);
}

.firma-estado-local-items[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    gap: 34px;
}

.firma-indicador-local[b-ldu9a3azfi] {
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 11px;
}

    .firma-indicador-local > div[b-ldu9a3azfi] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .firma-indicador-local small[b-ldu9a3azfi] {
        color: var(--fr-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .firma-indicador-local strong[b-ldu9a3azfi] {
        color: var(--fr-texto-secundario);
        font-size: 12.5px;
        font-weight: 700;
    }

.firma-indicador-punto[b-ldu9a3azfi] {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    display: inline-block;
    border-radius: 50%;
}

    .firma-indicador-punto.ok[b-ldu9a3azfi] {
        background: #22c55e !important;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12) !important;
    }

    .firma-indicador-punto.off[b-ldu9a3azfi] {
        background: #ef4444 !important;
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12) !important;
    }

.firma-estado-local-acciones[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.firma-estado-local-items[b-ldu9a3azfi] {
    margin-left: 8px;
    padding-left: 26px;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
}

/* ==========================================================
   RAZÓN SOCIAL
   ========================================================== */

.firma-selector-razon[b-ldu9a3azfi] {
    margin-top: 10px;
    min-height: 64px;
    padding: 10px 12px 10px 16px;
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) minmax(300px, 420px) auto;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--fr-borde);
    border-radius: 14px;
    background: var(--fr-panel);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12);
}

    .firma-selector-razon > label[b-ldu9a3azfi] {
        color: var(--fr-texto-secundario);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

/* Tipo de firma: comparte la misma banda de selección que la razón. */
.firma-selector-tipo[b-ldu9a3azfi] {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr);
    align-items: center;
    gap: 6px 10px;
}

.firma-selector-acciones-principales[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.firma-btn-configurar[b-ldu9a3azfi] {
    position: relative;
    width: 42px;
    min-width: 42px;
    padding: 0;
    color: #dbe7f3;
    border-color: rgba(148, 163, 184, 0.24);
    background: #24364f;
}

    .firma-btn-configurar:hover:not(:disabled)[b-ldu9a3azfi] {
        background: #2c4260;
    }

.firma-configurar-estado[b-ldu9a3azfi] {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border: 1px solid #24364f;
    border-radius: 50%;
}

    .firma-configurar-estado.ok[b-ldu9a3azfi] {
        background: #22c55e;
    }

    .firma-configurar-estado.pendiente[b-ldu9a3azfi] {
        background: #f59e0b;
    }

    .firma-configurar-estado.off[b-ldu9a3azfi] {
        background: #ef4444;
    }

.firma-selector-tipo > label[b-ldu9a3azfi] {
    color: var(--fr-texto-secundario);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.firma-selector-tipo .firma-tipo-ayuda[b-ldu9a3azfi] {
    grid-column: 1 / -1;
    margin-left: 1px;
    color: var(--fr-muted);
    font-size: 9.5px;
    line-height: 1.3;
}

.firma-selector-control[b-ldu9a3azfi] {
    position: relative;
    min-width: 0;
}

    .firma-selector-control > i[b-ldu9a3azfi] {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 13px;
        color: #8fa9c4;
        font-size: 13px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .firma-selector-control select[b-ldu9a3azfi] {
        width: 100%;
        min-height: 44px;
        padding: 0 38px 0 38px;
        border: 1px solid #334155;
        border-radius: 12px;
        outline: none;
        color: #ffffff;
        background: #0f172a;
        font: inherit;
        font-size: 13px;
        box-shadow: none;
        transition: border-color 0.17s ease, box-shadow 0.17s ease, background-color 0.17s ease;
    }

        .firma-selector-control select:hover:not(:disabled)[b-ldu9a3azfi] {
            border-color: #64748b;
            background: #111827;
        }

        .firma-selector-control select:focus[b-ldu9a3azfi] {
            border-color: var(--fr-azul);
            background: #111827;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
        }

        .firma-selector-control select:disabled[b-ldu9a3azfi] {
            opacity: .52;
            cursor: not-allowed;
        }

        .firma-selector-control select option[b-ldu9a3azfi] {
            color: #f8fafc;
            background: #0f172a;
        }

/* ==========================================================
   BOTONES
   ========================================================== */

.firma-btn[b-ldu9a3azfi] {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

    .firma-btn:hover:not(:disabled)[b-ldu9a3azfi] {
        transform: translateY(-1px);
    }

    .firma-btn:disabled[b-ldu9a3azfi] {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
    }

.firma-btn-comprobar[b-ldu9a3azfi],
.firma-btn-actualizar[b-ldu9a3azfi],
.firma-btn-continuar[b-ldu9a3azfi],
.firma-btn-firmar-seleccion[b-ldu9a3azfi] {
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

    .firma-btn-comprobar:hover:not(:disabled)[b-ldu9a3azfi],
    .firma-btn-actualizar:hover:not(:disabled)[b-ldu9a3azfi],
    .firma-btn-continuar:hover:not(:disabled)[b-ldu9a3azfi],
    .firma-btn-firmar-seleccion:hover:not(:disabled)[b-ldu9a3azfi] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }

.firma-btn-detalle[b-ldu9a3azfi],
.firma-btn-deseleccionar[b-ldu9a3azfi] {
    color: #dbe7f3;
    border-color: rgba(148, 163, 184, 0.24);
    background: #24364f;
}

    .firma-btn-detalle:hover:not(:disabled)[b-ldu9a3azfi],
    .firma-btn-deseleccionar:hover:not(:disabled)[b-ldu9a3azfi] {
        background: #2c4260;
    }

.firma-btn-seleccionar[b-ldu9a3azfi] {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.34);
    background: rgba(37, 99, 235, 0.18);
}

    .firma-btn-seleccionar:hover:not(:disabled)[b-ldu9a3azfi] {
        border-color: rgba(96, 165, 250, 0.48);
        background: rgba(37, 99, 235, 0.28);
    }

.firma-btn-firmar-todo[b-ldu9a3azfi] {
    min-width: 122px;
    color: #ffffff;
    border-color: #16a34a;
    background: #16a34a;
}

    .firma-btn-firmar-todo:hover:not(:disabled)[b-ldu9a3azfi] {
        border-color: #15803d;
        background: #15803d;
    }

.firma-btn-firmar-seleccion[b-ldu9a3azfi] {
    min-width: 190px;
}

.firma-btn-detener[b-ldu9a3azfi] {
    color: #ffffff;
    border-color: #dc2626;
    background: #dc2626;
}

    .firma-btn-detener:hover:not(:disabled)[b-ldu9a3azfi] {
        background: #b91c1c;
    }

/* ==========================================================
   LOTE ACTIVO
   ========================================================== */

.firma-lote[b-ldu9a3azfi] {
    margin: 0 12px 14px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.2fr) auto;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(96, 165, 250, 0.30);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(30, 64, 110, 0.34), rgba(15, 30, 50, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

    .firma-lote.advertencia[b-ldu9a3azfi] {
        border-color: rgba(245, 158, 11, 0.30);
        background: linear-gradient(180deg, rgba(120, 76, 14, 0.22), rgba(44, 31, 13, 0.64));
    }

    .firma-lote.error[b-ldu9a3azfi] {
        border-color: rgba(239, 68, 68, 0.30);
        background: linear-gradient(180deg, rgba(112, 36, 45, 0.24), rgba(48, 20, 27, 0.68));
    }

.firma-lote-individual[b-ldu9a3azfi] {
    grid-template-columns: minmax(250px, .9fr) minmax(340px, 1.4fr);
}

.firma-lote-principal[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .firma-lote-principal > div[b-ldu9a3azfi] {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .firma-lote-principal strong[b-ldu9a3azfi] {
        color: var(--fr-texto);
        font-size: 12.5px;
        font-weight: 800;
    }

    .firma-lote-principal small[b-ldu9a3azfi] {
        margin-top: 3px;
        overflow: hidden;
        color: #b7c5d8;
        font-size: 10px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.firma-lote-pulso[b-ldu9a3azfi] {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.13);
    animation: firma-pulso-b-ldu9a3azfi 1.35s ease-in-out infinite;
}

.firma-lote-progreso-bloque[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.firma-lote-progreso[b-ldu9a3azfi],
.firma-lote-acciones[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.firma-lote-progreso[b-ldu9a3azfi] {
    color: #b4c2d4;
    font-size: 10.5px;
}

    .firma-lote-progreso strong[b-ldu9a3azfi] {
        color: #ffffff;
    }

.firma-lote-barra[b-ldu9a3azfi] {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.46);
}

    .firma-lote-barra > span[b-ldu9a3azfi] {
        height: 100%;
        display: block;
        border-radius: inherit;
        background: linear-gradient(90deg, #2563eb, #60a5fa);
        transition: width .22s ease;
    }

.firma-lote.advertencia .firma-lote-barra > span[b-ldu9a3azfi] {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.firma-lote.error .firma-lote-barra > span[b-ldu9a3azfi] {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.firma-lote-barra.indeterminada > span[b-ldu9a3azfi] {
    width: 38%;
    animation: firma-progreso-indeterminado-b-ldu9a3azfi 1.1s ease-in-out infinite;
}

@keyframes firma-pulso-b-ldu9a3azfi {
    0%, 100% {
        opacity: .72;
        transform: scale(.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes firma-progreso-indeterminado-b-ldu9a3azfi {
    0% {
        transform: translateX(-115%);
    }

    100% {
        transform: translateX(365%);
    }
}

/* ==========================================================
   ÁREA DE TRABAJO
   ========================================================== */

.firma-trabajo[b-ldu9a3azfi] {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--fr-borde);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.66);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
}

.firma-toolbar[b-ldu9a3azfi] {
    min-height: 92px;
    margin: 12px 12px 14px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto minmax(330px, 1fr);
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 14px;
    background: #0b1423;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.14);
}

.firma-toolbar-izquierda[b-ldu9a3azfi],
.firma-toolbar-derecha[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.firma-toolbar-derecha[b-ldu9a3azfi] {
    justify-content: flex-end;
}

.firma-toolbar-resumen[b-ldu9a3azfi] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 9px;
}

.firma-resumen-card[b-ldu9a3azfi] {
    min-width: 116px;
    min-height: 70px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid;
    border-radius: 12px;
    color: inherit;
    background: rgba(15, 23, 42, 0.70);
    font: inherit;
    text-align: left;
    box-shadow: none;
}

button.firma-resumen-card[b-ldu9a3azfi] {
    appearance: none;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

    button.firma-resumen-card:hover[b-ldu9a3azfi] {
        transform: translateY(-1px);
    }

.firma-resumen-card.ok[b-ldu9a3azfi] {
    border-color: rgba(34, 197, 94, 0.28);
    border-left: 3px solid #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.firma-resumen-card.revisar[b-ldu9a3azfi] {
    min-width: 142px;
    border-color: rgba(245, 158, 11, 0.28);
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

    .firma-resumen-card.revisar:hover[b-ldu9a3azfi] {
        border-color: rgba(245, 158, 11, 0.44);
        background: rgba(245, 158, 11, 0.12);
    }

.firma-resumen-card.advertencia[b-ldu9a3azfi] {
    min-width: 150px;
    border-color: rgba(245, 158, 11, 0.28);
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

    .firma-resumen-card.advertencia:hover[b-ldu9a3azfi] {
        border-color: rgba(245, 158, 11, 0.44);
        background: rgba(245, 158, 11, 0.12);
    }

.firma-resumen-card.conflicto[b-ldu9a3azfi] {
    min-width: 146px;
    border-color: rgba(239, 68, 68, 0.30);
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

    .firma-resumen-card.conflicto:hover[b-ldu9a3azfi] {
        border-color: rgba(239, 68, 68, 0.46);
        background: rgba(239, 68, 68, 0.12);
    }

.firma-resumen-card.advertencia .firma-resumen-icono[b-ldu9a3azfi] {
    color: #fbbf24;
}

.firma-resumen-card.conflicto .firma-resumen-icono[b-ldu9a3azfi] {
    color: #f87171;
}

.firma-resumen-card.conflicto em[b-ldu9a3azfi] {
    color: #fca5a5;
}

.firma-resumen-icono[b-ldu9a3azfi] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.28);
    font-size: 15px;
}

.firma-resumen-card.ok .firma-resumen-icono[b-ldu9a3azfi] {
    color: #4ade80;
}

.firma-resumen-card.revisar .firma-resumen-icono[b-ldu9a3azfi] {
    color: #fbbf24;
}

.firma-resumen-card > div[b-ldu9a3azfi] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.firma-resumen-card small[b-ldu9a3azfi] {
    color: var(--fr-muted);
    font-size: 10px;
    font-weight: 700;
}

.firma-resumen-card strong[b-ldu9a3azfi] {
    margin-top: 1px;
    color: var(--fr-texto);
    font-size: 22px;
    line-height: 1;
}

.firma-resumen-card em[b-ldu9a3azfi] {
    margin-top: 4px;
    color: #d8aa45;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.firma-resumen-flecha[b-ldu9a3azfi] {
    flex: 0 0 auto;
    color: #a47d2e;
    font-size: 10px;
}

.firma-workspace[b-ldu9a3azfi] {
    min-height: 650px;
    height: min(74vh, 820px);
    display: grid;
    grid-template-columns: minmax(520px, .96fr) minmax(560px, 1.04fr);
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.firma-lista[b-ldu9a3azfi] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #101827;
}

.firma-lista-titulo[b-ldu9a3azfi] {
    min-height: 64px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(96, 165, 250, 0.16);
    border-bottom: 1px solid rgba(96, 165, 250, 0.20);
    background: #172a43;
}

    .firma-lista-titulo > div:first-child[b-ldu9a3azfi] {
        min-width: 0;
    }

    .firma-lista-titulo h2[b-ldu9a3azfi] {
        margin: 0;
        color: var(--fr-texto);
        font-size: 15px;
        font-weight: 700;
    }

    .firma-lista-titulo > div:first-child > span[b-ldu9a3azfi] {
        display: block;
        margin-top: 2px;
        color: var(--fr-muted);
        font-size: 10.5px;
    }

.firma-lista-seleccionados[b-ldu9a3azfi] {
    min-width: 90px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.10);
}

    .firma-lista-seleccionados small[b-ldu9a3azfi] {
        color: #93c5fd;
        font-size: 9px;
        font-weight: 700;
    }

    .firma-lista-seleccionados strong[b-ldu9a3azfi] {
        margin-top: 1px;
        color: #ffffff;
        font-size: 19px;
        line-height: 1;
    }

/* ==========================================================
   TABLA: 4 COLUMNAS
   ========================================================== */

.firma-tabla-contenedor[b-ldu9a3azfi] {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #475569 #101827;
}

.firma-tabla[b-ldu9a3azfi] {
    width: 100%;
    min-width: 570px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--fr-texto-secundario);
    font-size: 10.8px;
}

    .firma-tabla th[b-ldu9a3azfi] {
        position: sticky;
        z-index: 3;
        top: 0;
        padding: 10px 9px;
        color: #cbd5e1;
        background: #14253c;
        border-bottom: 1px solid var(--fr-borde);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .035em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

        .firma-tabla th:nth-child(1)[b-ldu9a3azfi] {
            width: auto;
        }

        .firma-tabla th:nth-child(2)[b-ldu9a3azfi] {
            width: 82px;
        }

        .firma-tabla th:nth-child(3)[b-ldu9a3azfi] {
            width: 120px;
        }

        .firma-tabla th:nth-child(4)[b-ldu9a3azfi] {
            width: 92px;
        }

    .firma-tabla td[b-ldu9a3azfi] {
        padding: 9px;
        border-bottom: 1px solid var(--fr-borde-suave);
        vertical-align: middle;
    }

    .firma-tabla tbody tr[b-ldu9a3azfi] {
        background: rgba(15, 23, 42, 0.80);
        cursor: pointer;
        transition: background-color .14s ease, box-shadow .14s ease;
    }

        .firma-tabla tbody tr:nth-child(even)[b-ldu9a3azfi] {
            background: rgba(17, 24, 39, 0.88);
        }

        .firma-tabla tbody tr:hover[b-ldu9a3azfi] {
            background: rgba(30, 41, 59, 0.96);
        }

        .firma-tabla tbody tr.seleccionado[b-ldu9a3azfi] {
            background: rgba(37, 99, 235, 0.12);
            box-shadow: inset 3px 0 0 #3b82f6;
        }

        .firma-tabla tbody tr.activo[b-ldu9a3azfi] {
            background: rgba(37, 99, 235, 0.18);
            box-shadow: inset 3px 0 0 #60a5fa;
        }

.firma-persona-fila[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.firma-check-fila[b-ldu9a3azfi] {
    width: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
}

.firma-tabla input[type="checkbox"][b-ldu9a3azfi] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

    .firma-tabla input[type="checkbox"]:disabled[b-ldu9a3azfi] {
        opacity: .28;
        cursor: not-allowed;
    }

.firma-persona[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .firma-persona strong[b-ldu9a3azfi],
    .firma-persona span[b-ldu9a3azfi],
    .firma-persona small[b-ldu9a3azfi] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .firma-persona strong[b-ldu9a3azfi] {
        color: #f1f5f9;
        font-size: 11.5px;
        font-weight: 700;
    }

    .firma-persona span[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 9.5px;
    }

    .firma-persona small[b-ldu9a3azfi] {
        color: #70839c;
        font-size: 9px;
    }

.col-periodo[b-ldu9a3azfi],
.col-cuil[b-ldu9a3azfi] {
    overflow: hidden;
    color: #dbe7f3;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   ESTADOS
   ========================================================== */

.firma-estado[b-ldu9a3azfi] {
    min-height: 26px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.firma-estado-punto[b-ldu9a3azfi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.firma-estado.apto[b-ldu9a3azfi] {
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.22);
    background: rgba(34, 197, 94, 0.12);
}

.firma-estado.advertencia[b-ldu9a3azfi] {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.26);
    background: rgba(245, 158, 11, 0.12);
}

.firma-estado.bloqueado[b-ldu9a3azfi] {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(239, 68, 68, 0.12);
}

.firma-estado.error[b-ldu9a3azfi] {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(239, 68, 68, 0.12);
}

.firma-estado.validando[b-ldu9a3azfi] {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(59, 130, 246, 0.12);
}

.firma-estado.pendiente[b-ldu9a3azfi] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.20);
    background: rgba(148, 163, 184, 0.10);
}

/* ==========================================================
   MODAL DE ADVERTENCIAS DE ACCESO
   ========================================================== */

.firma-modal-advertencias[b-ldu9a3azfi] {
    width: min(980px, calc(100vw - 28px));
}

.firma-advertencia-intro[b-ldu9a3azfi] {
    margin: 0 18px 14px;
    padding: 11px 13px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 10px;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.08);
    font-size: 11px;
    line-height: 1.45;
}

.firma-advertencia-tabla-contenedor[b-ldu9a3azfi] {
    margin: 0 18px 16px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
}

.firma-advertencia-tabla[b-ldu9a3azfi] {
    width: 100%;
    border-collapse: collapse;
    color: #e2e8f0;
    font-size: 10.5px;
}

    .firma-advertencia-tabla th[b-ldu9a3azfi] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 9px 10px;
        color: #cbd5e1;
        background: #172a43;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        font-size: 9px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .firma-advertencia-tabla td[b-ldu9a3azfi] {
        padding: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.09);
        vertical-align: top;
        line-height: 1.4;
    }

    .firma-advertencia-tabla tbody tr:last-child td[b-ldu9a3azfi] {
        border-bottom: 0;
    }

    .firma-advertencia-tabla td:nth-child(2)[b-ldu9a3azfi],
    .firma-advertencia-tabla td:nth-child(3)[b-ldu9a3azfi] {
        white-space: nowrap;
    }

/* ==========================================================
   VISOR
   ========================================================== */

.firma-visor[b-ldu9a3azfi] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #e5e7eb;
    box-shadow: inset 8px 0 22px rgba(0, 0, 0, 0.07);
}

.firma-visor-header[b-ldu9a3azfi] {
    min-height: 64px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(96, 165, 250, 0.16);
    border-bottom: 1px solid rgba(96, 165, 250, 0.20);
    background: #172a43;
}

    .firma-visor-header > div[b-ldu9a3azfi] {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .firma-visor-header small[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
    }

    .firma-visor-header strong[b-ldu9a3azfi] {
        margin-top: 2px;
        overflow: hidden;
        color: #f8fafc;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .firma-visor-header > span[b-ldu9a3azfi] {
        flex: 0 0 auto;
        color: #cbd5e1;
        font-size: 10px;
        white-space: nowrap;
    }

.firma-visor-body[b-ldu9a3azfi] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
}

.firma-pdf-frame[b-ldu9a3azfi] {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    border: 0;
    background: #ffffff;
}

.firma-visor-vacio[b-ldu9a3azfi] {
    width: 100%;
    min-height: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    background: #edf0f4;
    text-align: center;
}

    .firma-visor-vacio > div[b-ldu9a3azfi] {
        width: 64px;
        height: 64px;
        margin-bottom: 4px;
        display: grid;
        place-items: center;
        border-radius: 18px;
        color: #3b82f6;
        background: #ffffff;
        font-size: 25px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .firma-visor-vacio.revisar > div[b-ldu9a3azfi] {
        color: #d97706;
    }

    .firma-visor-vacio strong[b-ldu9a3azfi] {
        color: #334155;
        font-size: 12.5px;
    }

    .firma-visor-vacio span[b-ldu9a3azfi] {
        max-width: 340px;
        font-size: 10.5px;
        line-height: 1.45;
    }

/* ==========================================================
   VACÍO / SPINNER
   ========================================================== */

.firma-vacio[b-ldu9a3azfi] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--fr-muted);
    text-align: center;
}

    .firma-vacio > i[b-ldu9a3azfi] {
        color: #64748b;
        font-size: 28px;
    }

    .firma-vacio strong[b-ldu9a3azfi] {
        color: var(--fr-texto-secundario);
        font-size: 12px;
    }

    .firma-vacio span[b-ldu9a3azfi] {
        font-size: 10.5px;
    }

.firma-spinner[b-ldu9a3azfi] {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 auto;
    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: firma-girar-b-ldu9a3azfi .75s linear infinite;
}

    .firma-spinner.mini[b-ldu9a3azfi] {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

        .firma-spinner.mini.claro[b-ldu9a3azfi] {
            border-color: rgba(255,255,255,.30);
            border-top-color: #ffffff;
        }

@keyframes firma-girar-b-ldu9a3azfi {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   MODALES
   ========================================================== */

.firma-modal-fondo[b-ldu9a3azfi] {
    --fr-texto: #f8fafc;
    --fr-texto-secundario: #e2e8f0;
    --fr-muted: #94a3b8;
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    padding: 22px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(4px);
}

.firma-modal[b-ldu9a3azfi] {
    width: min(520px, 100%);
    max-height: min(820px, calc(100dvh - 44px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    color: #f8fafc;
    background: #0f172a;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34);
}

.firma-modal-header[b-ldu9a3azfi] {
    min-height: 68px;
    padding: 13px 15px 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: #1e293b;
}

.firma-modal-titulo[b-ldu9a3azfi] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

    .firma-modal-titulo > div[b-ldu9a3azfi] {
        min-width: 0;
    }

.firma-modal-icono[b-ldu9a3azfi] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    font-size: 16px;
}

    .firma-modal-icono.advertencia[b-ldu9a3azfi] {
        color: #fbbf24;
        background: rgba(245, 158, 11, 0.12);
    }

.firma-modal-header small[b-ldu9a3azfi] {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
}

.firma-modal-header h2[b-ldu9a3azfi] {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 700;
}

.firma-modal-cerrar[b-ldu9a3azfi] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 10px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.08);
    cursor: pointer;
}

    .firma-modal-cerrar:hover[b-ldu9a3azfi] {
        color: #ffffff;
        border-color: rgba(248, 113, 113, 0.30);
        background: rgba(239, 68, 68, 0.12);
    }

/* Modal firma electrónica */

.firma-modal-electronica[b-ldu9a3azfi] {
    width: min(520px, 100%);
}

.firma-modal-icono-electronica[b-ldu9a3azfi] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.firma-electronica-contenido[b-ldu9a3azfi] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .firma-electronica-contenido p[b-ldu9a3azfi] {
        margin: 0;
        color: #e2e8f0;
        font-size: 12px;
        line-height: 1.5;
    }

    .firma-electronica-contenido .firma-electronica-explicacion[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 10.5px;
    }

    .firma-electronica-contenido > label[b-ldu9a3azfi] {
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 11px;
        font-weight: 700;
    }

.firma-clave-control[b-ldu9a3azfi] {
    position: relative;
}

    .firma-clave-control > i[b-ldu9a3azfi] {
        position: absolute;
        top: 50%;
        left: 13px;
        color: #8fa9c4;
        font-size: 13px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .firma-clave-control input[b-ldu9a3azfi] {
        width: 100%;
        min-height: 44px;
        padding: 0 13px 0 38px;
        box-sizing: border-box;
        border: 1px solid #334155;
        border-radius: 12px;
        outline: none;
        color: #ffffff;
        background: #0b1220;
        font: inherit;
        font-size: 13px;
    }

        .firma-clave-control input:focus[b-ldu9a3azfi] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
        }

        .firma-clave-control input:disabled[b-ldu9a3azfi] {
            opacity: .58;
            cursor: not-allowed;
        }

.firma-clave-error[b-ldu9a3azfi] {
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(239, 68, 68, 0.26);
    border-radius: 10px;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.10);
    font-size: 10.5px;
    font-weight: 650;
}

.firma-electronica-demo[b-ldu9a3azfi] {
    padding: 9px 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(245, 158, 11, 0.20);
    border-radius: 10px;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.08);
    font-size: 9.5px;
    line-height: 1.4;
}

    .firma-electronica-demo > i[b-ldu9a3azfi] {
        margin-top: 2px;
        flex: 0 0 auto;
    }

.firma-btn-confirmar-electronica[b-ldu9a3azfi] {
    color: #ffffff;
    border-color: #16a34a;
    background: #16a34a;
}

    .firma-btn-confirmar-electronica:hover:not(:disabled)[b-ldu9a3azfi] {
        border-color: #15803d;
        background: #15803d;
    }

/* Modal token */

.firma-modal-token[b-ldu9a3azfi] {
    width: min(520px, 100%);
}

.firma-token-detalle[b-ldu9a3azfi] {
    padding: 15px;
}

.firma-token-ayuda[b-ldu9a3azfi] {
    margin: 0 0 13px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.5;
}

.firma-token-estados[b-ldu9a3azfi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .firma-token-estados article[b-ldu9a3azfi] {
        min-height: 68px;
        padding: 11px 12px;
        display: flex;
        align-items: center;
        gap: 11px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.72);
    }

        .firma-token-estados article.ok[b-ldu9a3azfi] {
            border-color: rgba(34, 197, 94, 0.24);
            background: rgba(34, 197, 94, 0.08);
        }

        .firma-token-estados article.off[b-ldu9a3azfi] {
            border-color: rgba(239, 68, 68, 0.24);
            background: rgba(239, 68, 68, 0.08);
        }

        .firma-token-estados article.pendiente[b-ldu9a3azfi] {
            border-color: rgba(245, 158, 11, 0.26);
            background: rgba(245, 158, 11, 0.08);
        }

        .firma-token-estados article > div[b-ldu9a3azfi] {
            display: flex;
            flex-direction: column;
        }

    .firma-token-estados small[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
    }

    .firma-token-estados strong[b-ldu9a3azfi] {
        margin-top: 2px;
        color: #f8fafc;
        font-size: 12.5px;
    }

.firma-modal-fondo .firma-indicador-punto[b-ldu9a3azfi] {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    display: inline-block !important;
    border-radius: 50% !important;
}

    .firma-modal-fondo .firma-indicador-punto.ok[b-ldu9a3azfi] {
        background: #22c55e !important;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13) !important;
    }

    .firma-modal-fondo .firma-indicador-punto.off[b-ldu9a3azfi] {
        background: #ef4444 !important;
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.13) !important;
    }

    .firma-modal-fondo .firma-indicador-punto.pendiente[b-ldu9a3azfi] {
        background: #f59e0b !important;
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.13) !important;
    }

.firma-token-datos[b-ldu9a3azfi] {
    margin: 12px 0 0;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 11px 15px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: #111827;
}

    .firma-token-datos > div[b-ldu9a3azfi] {
        min-width: 0;
    }

    .firma-token-datos dt[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
    }

    .firma-token-datos dd[b-ldu9a3azfi] {
        margin: 3px 0 0;
        overflow-wrap: anywhere;
        color: #e2e8f0;
        font-size: 11px;
        font-weight: 600;
    }

.firma-token-sin-datos[b-ldu9a3azfi] {
    margin-top: 12px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    color: #cbd5e1;
    background: rgba(59, 130, 246, 0.08);
    font-size: 10.5px;
}

    .firma-token-sin-datos i[b-ldu9a3azfi] {
        color: #60a5fa;
    }

.firma-token-version[b-ldu9a3azfi] {
    margin-top: 12px;
    padding-top: 11px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    font-size: 10px;
}

    .firma-token-version strong[b-ldu9a3azfi] {
        color: #e2e8f0;
    }

/* Modal revisión */

.firma-modal-revisar[b-ldu9a3azfi] {
    width: min(760px, 100%);
}

.firma-revision-lista[b-ldu9a3azfi] {
    min-height: 150px;
    max-height: min(580px, calc(100dvh - 190px));
    padding: 10px;
    overflow-y: auto;
    background: #0b1220;
}

.firma-revision-item[b-ldu9a3azfi] {
    padding: 12px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: rgba(15, 23, 42, 0.72);
}

    .firma-revision-item:first-child[b-ldu9a3azfi] {
        border-radius: 11px 11px 0 0;
    }

    .firma-revision-item:last-child[b-ldu9a3azfi] {
        border-bottom: 0;
        border-radius: 0 0 11px 11px;
    }

.firma-revision-item-principal[b-ldu9a3azfi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .firma-revision-item-principal > div[b-ldu9a3azfi] {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .firma-revision-item-principal strong[b-ldu9a3azfi] {
        overflow: hidden;
        color: #f8fafc;
        font-size: 11.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .firma-revision-item-principal span:not(.firma-revision-estado)[b-ldu9a3azfi] {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 9.5px;
    }

.firma-revision-estado[b-ldu9a3azfi] {
    min-width: 58px;
    padding: 4px 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 800;
    text-align: center;
}

    .firma-revision-estado.bloqueado[b-ldu9a3azfi] {
        color: #fecaca;
        background: rgba(239, 68, 68, 0.12);
    }

    .firma-revision-estado.error[b-ldu9a3azfi] {
        color: #fecaca;
        background: rgba(239, 68, 68, 0.12);
    }

.firma-revision-item p[b-ldu9a3azfi] {
    margin: 8px 0 0 68px;
    color: #cbd5e1;
    font-size: 10.5px;
    line-height: 1.45;
}

.firma-modal-footer[b-ldu9a3azfi] {
    padding: 11px 14px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: #1e293b;
}

/* Modal proceso */

.firma-modal-proceso[b-ldu9a3azfi] {
    width: min(390px, 100%);
}

.firma-modal-espera[b-ldu9a3azfi] {
    min-height: 215px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #94a3b8;
    text-align: center;
}

    .firma-modal-espera > strong[b-ldu9a3azfi] {
        color: #e2e8f0;
        font-size: 13px;
    }

    .firma-modal-espera > span[b-ldu9a3azfi] {
        font-size: 10.5px;
    }

.firma-progreso-contador[b-ldu9a3azfi] {
    margin-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

    .firma-progreso-contador strong[b-ldu9a3azfi] {
        color: #ffffff;
        font-size: 28px;
        line-height: 1;
    }

    .firma-progreso-contador span[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 12px;
    }

.firma-progreso-barra[b-ldu9a3azfi] {
    width: min(260px, 100%);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

    .firma-progreso-barra > span[b-ldu9a3azfi] {
        height: 100%;
        display: block;
        border-radius: inherit;
        background: linear-gradient(90deg, #2563eb, #60a5fa);
        transition: width .22s ease;
    }


/* ==========================================================
   MODAL DE RESULTADO DE FIRMA
   ========================================================== */

.firma-modal-resultado-fondo[b-ldu9a3azfi] {
    background: rgba(2, 6, 23, 0.72);
}

.firma-modal-resultado[b-ldu9a3azfi] {
    width: min(460px, 100%);
}

.firma-resultado-contenido[b-ldu9a3azfi] {
    min-height: 210px;
    padding: 28px 30px 22px;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    background: #0f172a;
}

    .firma-resultado-contenido > div[b-ldu9a3azfi] {
        min-width: 0;
        padding-top: 2px;
    }

    .firma-resultado-contenido small[b-ldu9a3azfi] {
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .firma-resultado-contenido h2[b-ldu9a3azfi] {
        margin: 5px 0 0;
        color: #f8fafc;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.015em;
    }

    .firma-resultado-contenido p[b-ldu9a3azfi] {
        margin: 10px 0 0;
        color: #cbd5e1;
        font-size: 12px;
        line-height: 1.55;
    }

.firma-resultado-icono[b-ldu9a3azfi] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 16px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.10);
    font-size: 22px;
}

    .firma-resultado-icono.success[b-ldu9a3azfi] {
        color: #4ade80;
        border-color: rgba(34, 197, 94, 0.26);
        background: rgba(34, 197, 94, 0.10);
    }

    .firma-resultado-icono.warning[b-ldu9a3azfi] {
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.28);
        background: rgba(245, 158, 11, 0.10);
    }

    .firma-resultado-icono.error[b-ldu9a3azfi] {
        color: #f87171;
        border-color: rgba(239, 68, 68, 0.28);
        background: rgba(239, 68, 68, 0.10);
    }

.firma-modal-footer-resultado[b-ldu9a3azfi] {
    padding: 13px 16px;
}

.firma-btn-modal-entendido[b-ldu9a3azfi] {
    min-width: 118px;
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

    .firma-btn-modal-entendido:hover:not(:disabled)[b-ldu9a3azfi] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }

    .firma-btn-modal-entendido.success[b-ldu9a3azfi] {
        border-color: #16a34a;
        background: #16a34a;
    }

        .firma-btn-modal-entendido.success:hover:not(:disabled)[b-ldu9a3azfi] {
            border-color: #15803d;
            background: #15803d;
        }

    .firma-btn-modal-entendido.warning[b-ldu9a3azfi] {
        border-color: #d97706;
        background: #d97706;
    }

        .firma-btn-modal-entendido.warning:hover:not(:disabled)[b-ldu9a3azfi] {
            border-color: #b45309;
            background: #b45309;
        }

    .firma-btn-modal-entendido.error[b-ldu9a3azfi] {
        border-color: #dc2626;
        background: #dc2626;
    }

        .firma-btn-modal-entendido.error:hover:not(:disabled)[b-ldu9a3azfi] {
            border-color: #b91c1c;
            background: #b91c1c;
        }

/* ==========================================================
   UTILIDADES
   ========================================================== */

.sr-only[b-ldu9a3azfi] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.firma-tabla-contenedor[b-ldu9a3azfi]::-webkit-scrollbar,
.firma-revision-lista[b-ldu9a3azfi]::-webkit-scrollbar,
.firma-modal-fondo[b-ldu9a3azfi]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.firma-tabla-contenedor[b-ldu9a3azfi]::-webkit-scrollbar-track,
.firma-revision-lista[b-ldu9a3azfi]::-webkit-scrollbar-track,
.firma-modal-fondo[b-ldu9a3azfi]::-webkit-scrollbar-track {
    background: #0b1220;
}

.firma-tabla-contenedor[b-ldu9a3azfi]::-webkit-scrollbar-thumb,
.firma-revision-lista[b-ldu9a3azfi]::-webkit-scrollbar-thumb,
.firma-modal-fondo[b-ldu9a3azfi]::-webkit-scrollbar-thumb {
    border: 2px solid #0b1220;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.34);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
    .firma-selector-razon[b-ldu9a3azfi] {
        grid-template-columns: auto minmax(260px, 1fr) minmax(280px, 380px);
    }

    .firma-selector-acciones-principales[b-ldu9a3azfi] {
        grid-column: 3;
        justify-self: end;
    }

    .firma-toolbar[b-ldu9a3azfi] {
        grid-template-columns: 1fr 1fr;
    }

    .firma-toolbar-resumen[b-ldu9a3azfi] {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .firma-workspace[b-ldu9a3azfi] {
        grid-template-columns: minmax(500px, .98fr) minmax(500px, 1.02fr);
    }
}

@media (max-width: 980px) {
    .firma-recibos-page[b-ldu9a3azfi] {
        width: min(100% - 18px, 1440px);
        margin-top: 9px;
        padding: 11px;
    }

    .firma-encabezado-texto[b-ldu9a3azfi] {
        display: block;
    }

    .firma-encabezado p[b-ldu9a3azfi] {
        margin-top: 4px;
    }

    .firma-toolbar[b-ldu9a3azfi] {
        grid-template-columns: 1fr;
    }

    .firma-toolbar-resumen[b-ldu9a3azfi] {
        grid-column: auto;
        grid-row: auto;
        justify-content: flex-start;
    }

    .firma-toolbar-derecha[b-ldu9a3azfi] {
        justify-content: flex-start;
    }

    .firma-workspace[b-ldu9a3azfi] {
        height: auto;
        grid-template-columns: 1fr;
    }

    .firma-lista[b-ldu9a3azfi] {
        min-height: 560px;
    }

    .firma-visor[b-ldu9a3azfi] {
        min-height: 650px;
        box-shadow: none;
    }
}

@media (max-width: 680px) {
    .firma-recibos-page[b-ldu9a3azfi] {
        width: calc(100% - 10px);
        margin: 5px auto 22px;
        padding: 8px;
        border-radius: 15px;
    }

    .firma-encabezado[b-ldu9a3azfi] {
        padding: 14px;
        align-items: flex-start;
    }

    .firma-encabezado-icono[b-ldu9a3azfi] {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
        font-size: 19px;
    }

    .firma-encabezado p[b-ldu9a3azfi] {
        white-space: normal;
    }

    .firma-estado-local[b-ldu9a3azfi] {
        align-items: stretch;
        flex-direction: column;
    }

    .firma-estado-local-items[b-ldu9a3azfi] {
        margin-left: 0;
        padding-left: 0;
        justify-content: space-between;
        gap: 12px;
        border-left: 0;
    }

    .firma-indicador-local[b-ldu9a3azfi] {
        min-width: 0;
        flex: 1 1 0;
    }

    .firma-estado-local-acciones[b-ldu9a3azfi] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .firma-toolbar[b-ldu9a3azfi] {
        margin: 8px 8px 12px;
    }

    .firma-lote[b-ldu9a3azfi] {
        margin: 0 8px 12px;
    }

    .firma-selector-razon[b-ldu9a3azfi] {
        grid-template-columns: 1fr;
    }

        .firma-selector-razon > label[b-ldu9a3azfi] {
            display: none;
        }

    .firma-selector-tipo[b-ldu9a3azfi] {
        grid-template-columns: 1fr;
        gap: 5px;
    }

        .firma-selector-tipo > label[b-ldu9a3azfi] {
            display: block;
        }

        .firma-selector-tipo .firma-tipo-ayuda[b-ldu9a3azfi] {
            grid-column: auto;
        }

    .firma-selector-acciones-principales[b-ldu9a3azfi] {
        width: 100%;
        grid-column: auto;
        justify-self: stretch;
    }

        .firma-selector-acciones-principales .firma-btn-actualizar[b-ldu9a3azfi] {
            flex: 1 1 auto;
        }

        .firma-selector-acciones-principales .firma-btn-configurar[b-ldu9a3azfi] {
            flex: 0 0 42px;
            width: 42px;
        }

    .firma-lote[b-ldu9a3azfi] {
        grid-template-columns: 1fr;
    }

    .firma-lote-progreso[b-ldu9a3azfi] {
        justify-content: flex-start;
    }

    .firma-toolbar-izquierda[b-ldu9a3azfi],
    .firma-toolbar-derecha[b-ldu9a3azfi] {
        align-items: stretch;
        flex-direction: column;
    }

    .firma-toolbar .firma-btn[b-ldu9a3azfi] {
        width: 100%;
    }

    .firma-toolbar-resumen[b-ldu9a3azfi] {
        width: 100%;
    }

    .firma-resumen-card[b-ldu9a3azfi] {
        flex: 1 1 0;
    }

    .firma-lista[b-ldu9a3azfi] {
        min-height: 520px;
    }

    .firma-visor[b-ldu9a3azfi] {
        min-height: 580px;
    }

    .firma-modal-fondo[b-ldu9a3azfi] {
        padding: 7px;
    }

    .firma-modal[b-ldu9a3azfi],
    .firma-modal-token[b-ldu9a3azfi],
    .firma-modal-revisar[b-ldu9a3azfi] {
        width: 100%;
        max-height: calc(100dvh - 14px);
        border-radius: 14px;
    }

    .firma-token-estados[b-ldu9a3azfi],
    .firma-token-datos[b-ldu9a3azfi] {
        grid-template-columns: 1fr;
    }

    .firma-revision-item p[b-ldu9a3azfi] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .firma-recibos-page *[b-ldu9a3azfi],
    .firma-modal *[b-ldu9a3azfi],
    .firma-modal-fondo *[b-ldu9a3azfi] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/FrancosMasivosModal.razor.rz.scp.css */
.modal-francos[b-dzvpzc3quk] {
    width: 90%;
    max-width: 1000px;
    padding: 25px;
    background-color: rgb(15, 30, 50);
    border-radius: 16px;
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.bloque-horasextras[b-dzvpzc3quk] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px;
    margin-top: 20px;
}

.combo-fecha[b-dzvpzc3quk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .combo-fecha:hover[b-dzvpzc3quk] {
        background: rgba(255, 255, 255, 0.1);
        border-color: #0d6efd;
    }

.combo-fecha-dia[b-dzvpzc3quk] {
    font-weight: 600;
    color: #e0e0e0;
    min-width: 95px;
}

.combo-fecha-horas[b-dzvpzc3quk] {
    font-weight: 600;
    color: #4caf50; /* verde moderno */
    background: rgba(76, 175, 80, 0.15);
    padding: 2px 10px;
    border-radius: 6px;
}


.btn-accion[b-dzvpzc3quk] {
    border: none;
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-accion:hover[b-dzvpzc3quk] {
        background: #ef5350;
        color: white;
    }

/* Resumen */
.resumen-banco[b-dzvpzc3quk] {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 14px;
    padding-top: 10px;
    font-size: 14px;
}

.saldo-ok[b-dzvpzc3quk] {
    color: #81c784; /* verde claro */
}

.saldo-error[b-dzvpzc3quk] {
    color: #e57373; /* rojo claro */
}

/* Detalle */
.detalle-saldo[b-dzvpzc3quk] {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    max-height: 220px;
    overflow-y: auto;
}

.detalle-item[b-dzvpzc3quk] {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: #ddd;
}

    .detalle-item:last-child[b-dzvpzc3quk] {
        border-bottom: none;
    }
/* Tabla resumen */
.tabla-resumen[b-dzvpzc3quk] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

    .tabla-resumen td[b-dzvpzc3quk] {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        color: #e0e0e0;
    }

    .tabla-resumen tr:last-child td[b-dzvpzc3quk] {
        border-bottom: none;
    }

    .tabla-resumen tr.saldo-ok td[b-dzvpzc3quk] {
        color: #81c784; /* verde */
    }

    .tabla-resumen tr.saldo-error td[b-dzvpzc3quk] {
        color: #e57373; /* rojo */
    }

/* Detalle saldo debajo de la tabla */
.detalle-saldo[b-dzvpzc3quk] {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    max-height: 220px;
    overflow-y: auto;
}

.detalle-item[b-dzvpzc3quk] {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: #ddd;
}

    .detalle-item:last-child[b-dzvpzc3quk] {
        border-bottom: none;
    }
.acciones-botones[b-dzvpzc3quk] {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

    .acciones-botones button[b-dzvpzc3quk] {
        flex: 1; /* ambos ocupan el mismo ancho */
    }
.combo-fecha[b-dzvpzc3quk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

    .combo-fecha:hover[b-dzvpzc3quk] {
        background: rgba(255, 255, 255, 0.08);
        border-color: #00bcd4;
    }

.combo-fecha-info[b-dzvpzc3quk] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.combo-fecha-dia[b-dzvpzc3quk] {
    font-weight: 600;
    color: #e0e0e0;
}

.combo-fecha-horas[b-dzvpzc3quk] {
    font-size: 13px;
    color: #81c784;
}

.input-observacion[b-dzvpzc3quk] {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: white;
    font-size: 13px;
}

    .input-observacion input[b-dzvpzc3quk] {
        color: white !important;
    }

    .input-observacion:hover[b-dzvpzc3quk] {
        background-color: rgba(255, 255, 255, 0.12);
    }
/* === TARJETAS DE FECHAS === */
.combo-fecha[b-dzvpzc3quk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

    .combo-fecha:hover[b-dzvpzc3quk] {
        background: rgba(255, 255, 255, 0.08);
        border-color: #00bcd4;
    }

.combo-fecha-header[b-dzvpzc3quk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.combo-fecha-dia[b-dzvpzc3quk] {
    font-weight: 600;
    color: #e0e0e0;
}

.combo-fecha-horas[b-dzvpzc3quk] {
    font-weight: 600;
    color: #81c784;
    background: rgba(76, 175, 80, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
}

.input-observacion[b-dzvpzc3quk] {
    width: 100%;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: white;
}

    .input-observacion input[b-dzvpzc3quk] {
        color: white !important;
    }

    .input-observacion:hover[b-dzvpzc3quk] {
        background-color: rgba(255, 255, 255, 0.12);
    }

/* === BOTÓN QUITAR === */
.btn-accion[b-dzvpzc3quk] {
    border: none;
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-accion:hover[b-dzvpzc3quk] {
        background: #ef5350;
        color: white;
    }
/* /Components/Pages/GestionUsuarios.razor.rz.scp.css */
/* ==========================================================
   GESTIÓN DE USUARIOS - RECIBOS DIGITALES
   ========================================================== */

.gestion-usuarios-page[b-nok3tpepli] {
    --gu-panel: rgba(15, 23, 42, 0.72);
    --gu-panel-2: rgba(30, 41, 59, 0.82);
    --gu-borde: rgba(148, 163, 184, 0.16);
    --gu-borde-fuerte: rgba(148, 163, 184, 0.28);
    --gu-texto: #f8fafc;
    --gu-texto-2: #e2e8f0;
    --gu-muted: #94a3b8;
    --gu-azul: #3b82f6;
    --gu-verde: #22c55e;
    --gu-amarillo: #f59e0b;
    --gu-rojo: #ef4444;
    width: min(1500px, calc(100% - 20px));
    margin: 10px auto 28px;
    padding: 12px;
    box-sizing: border-box;
    color: var(--gu-texto);
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.30);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.16);
}


    .gestion-usuarios-page *[b-nok3tpepli],
    .gestion-usuarios-page *[b-nok3tpepli]::before,
    .gestion-usuarios-page *[b-nok3tpepli]::after {
        box-sizing: border-box;
    }


/* ==========================================================
   ENCABEZADO
   ========================================================== */

.gu-encabezado[b-nok3tpepli] {
    min-height: 82px;
    padding: 17px 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 16px;
    background: radial-gradient( circle at 92% 10%, rgba(59, 130, 246, 0.14), transparent 34% ), linear-gradient( 180deg, rgba(16, 32, 53, 0.96), rgba(12, 25, 44, 0.96) );
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}


.gu-encabezado-icono[b-nok3tpepli] {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient( 145deg, #2563eb, #3b82f6 );
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
}


.gu-encabezado-texto[b-nok3tpepli] {
    min-width: 0;
}


    .gu-encabezado-texto h2[b-nok3tpepli] {
        margin: 0;
        color: var(--gu-texto);
        font-size: clamp( 23px, 2.4vw, 30px );
        font-weight: 800;
        letter-spacing: -0.025em;
    }


    .gu-encabezado-texto p[b-nok3tpepli] {
        margin: 4px 0 0;
        color: var(--gu-muted);
        font-size: 14px;
    }


/* ==========================================================
   PANELES
   ========================================================== */

.gu-panel[b-nok3tpepli] {
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px solid var(--gu-borde);
    border-radius: 14px;
    background: var(--gu-panel);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12);
}


/* ==========================================================
   SELECTOR
   ========================================================== */

.gu-selector-panel[b-nok3tpepli] {
    padding: 13px 15px;
}


.gu-selector-grid[b-nok3tpepli] {
    display: grid;
    grid-template-columns: minmax(320px, 590px) auto;
    align-items: end;
    gap: 14px;
}


.gu-razon-field[b-nok3tpepli] {
    margin: 0;
}


.gu-selector-panel .form-row label[b-nok3tpepli],
.gu-filtros-grid .form-row label[b-nok3tpepli] {
    display: block;
    margin-bottom: 6px;
    color: var(--gu-texto-2);
    font-size: 12.5px;
    font-weight: 750;
}


.gu-selector-panel .form-control[b-nok3tpepli] {
    min-height: 44px;
    padding: 8px 11px;
    font-size: 13.5px;
}


.gu-acciones-principales[b-nok3tpepli] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.gu-btn[b-nok3tpepli] {
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: relative;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.10);
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}


    .gu-btn:hover:not(:disabled)[b-nok3tpepli] {
        transform: translateY(-1px);
    }


    .gu-btn:disabled[b-nok3tpepli] {
        opacity: .42;
        cursor: not-allowed;
        transform: none;
    }


.gu-btn-primario[b-nok3tpepli] {
    color: #ffffff;
    border-color: rgba(59, 130, 246, .75);
    background: linear-gradient( 135deg, #2563eb, #3b82f6 );
    box-shadow: 0 7px 16px rgba(37, 99, 235, .18);
}


    .gu-btn-primario:hover:not(:disabled)[b-nok3tpepli] {
        border-color: #60a5fa;
        background: linear-gradient( 135deg, #1d4ed8, #2563eb );
    }


.gu-btn-exito[b-nok3tpepli] {
    color: #ffffff;
    border-color: rgba(34, 197, 94, .60);
    background: linear-gradient( 135deg, #15803d, #16a34a );
}


.gu-btn-fantasma[b-nok3tpepli] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .16);
    background: rgba(148, 163, 184, .06);
    box-shadow: none;
}


/* ==========================================================
   BOTÓN EXCEL
   ========================================================== */

.gu-btn-excel[b-nok3tpepli] {
    position: relative;
    overflow: hidden;
    color: #dcfce7;
    border-color: rgba(34, 197, 94, .32);
    background: linear-gradient( 135deg, rgba(21, 128, 61, .93), rgba(22, 163, 74, .93) );
    box-shadow: 0 7px 16px rgba(22, 163, 74, .14);
    cursor: pointer;
}


    .gu-btn-excel:hover[b-nok3tpepli] {
        border-color: rgba(74, 222, 128, .58);
        background: linear-gradient( 135deg, #166534, #15803d );
    }


.gu-btn-disabled[b-nok3tpepli] {
    opacity: .42;
    cursor: not-allowed;
}


/*
 * Este contenedor cubre el botón completo
 * pero es totalmente invisible.
 *
 * De esta forma NO aparece:
 *
 * Elegir archivo
 * Ningún archivo seleccionado
 */

.gu-excel-picker[b-nok3tpepli] {
    position: absolute;
    z-index: 5;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
}


.gu-btn-disabled
.gu-excel-picker[b-nok3tpepli] {
    cursor: not-allowed;
}


.gu-excel-picker[b-nok3tpepli]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}


.gu-btn-disabled
.gu-excel-picker[b-nok3tpepli]  input[type="file"] {
    cursor: not-allowed;
}


/* ==========================================================
   FILTROS
   ========================================================== */

.gu-filtros-panel[b-nok3tpepli] {
    padding: 0;
    overflow: hidden;
}


.gu-filtros-cabecera[b-nok3tpepli] {
    min-height: 57px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .10);
    background: rgba(30, 41, 59, .33);
}


.gu-filtros-identidad[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}


.gu-filtros-icono[b-nok3tpepli] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .10);
    font-size: 13px;
}


.gu-filtros-titulo[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .gu-filtros-titulo strong[b-nok3tpepli] {
        color: #e2e8f0;
        font-size: 13px;
        font-weight: 800;
    }


    .gu-filtros-titulo span[b-nok3tpepli] {
        margin-top: 1px;
        color: #64748b;
        font-size: 10.5px;
    }


        .gu-filtros-titulo span b[b-nok3tpepli] {
            color: #94a3b8;
            font-weight: 800;
        }


.gu-btn-limpiar[b-nok3tpepli] {
    min-height: 34px;
    padding: 0 10px;
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .16);
    background: rgba(71, 85, 105, .18);
    box-shadow: none;
    font-size: 10.5px;
}


    .gu-btn-limpiar:hover:not(:disabled)[b-nok3tpepli] {
        color: #ffffff;
        border-color: rgba(148, 163, 184, .30);
        background: rgba(71, 85, 105, .34);
    }


.gu-filtros-grid[b-nok3tpepli] {
    padding: 12px 13px 13px;
    display: grid;
    grid-template-columns: minmax(310px, 1.6fr) minmax(160px, .55fr) minmax(170px, .55fr);
    gap: 10px;
    align-items: end;
}


    .gu-filtros-grid .form-row[b-nok3tpepli] {
        margin: 0;
    }


        .gu-filtros-grid .form-row label[b-nok3tpepli] {
            margin-bottom: 5px;
            font-size: 11px;
        }


    .gu-filtros-grid .form-control[b-nok3tpepli] {
        min-height: 39px;
        padding: 7px 10px;
        font-size: 12px;
    }


.gu-busqueda-wrap[b-nok3tpepli] {
    position: relative;
}


    .gu-busqueda-wrap > i[b-nok3tpepli] {
        position: absolute;
        z-index: 2;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
        font-size: 12px;
        pointer-events: none;
    }


    .gu-busqueda-wrap .form-control[b-nok3tpepli] {
        padding-left: 32px;
    }


/* ==========================================================
   CONTENIDO TABLA
   ========================================================== */

.gu-contenido-principal[b-nok3tpepli] {
    margin-top: 10px;
}


.gu-tabla-header[b-nok3tpepli] {
    min-height: 66px;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(148, 163, 184, .11);
    border-radius: 11px;
    background: rgba(15, 23, 42, .40);
}


.gu-tabla-header-texto[b-nok3tpepli] {
    min-width: 0;
}


    .gu-tabla-header-texto h3[b-nok3tpepli] {
        margin: 0;
        color: #f8fafc;
        font-size: 15px;
        font-weight: 800;
    }


    .gu-tabla-header-texto span[b-nok3tpepli] {
        display: block;
        margin-top: 3px;
        color: #64748b;
        font-size: 10.5px;
    }


.gu-tabla-header-acciones[b-nok3tpepli] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


.gu-seleccion-info[b-nok3tpepli] {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    color: #94a3b8;
    background: rgba(2, 6, 23, .20);
    font-size: 10.5px;
    white-space: nowrap;
}


    .gu-seleccion-info strong[b-nok3tpepli] {
        color: #93c5fd;
        font-size: 13px;
    }


    .gu-seleccion-info i[b-nok3tpepli] {
        color: #64748b;
        font-size: 12px;
    }


.gu-btn-acceso-masivo[b-nok3tpepli] {
    min-height: 36px;
    color: #f0fdf4;
    border-color: rgba(34, 197, 94, .34);
    background: linear-gradient( 135deg, #15803d, #16a34a );
    box-shadow: 0 6px 14px rgba(22, 163, 74, .13);
    font-size: 10.8px;
}


/* ==========================================================
   TABLA
   ========================================================== */

.gu-tabla-wrap[b-nok3tpepli] {
    width: 100%;
    max-width: 100%;
    max-height: min( 680px, calc(100vh - 315px) );
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
}


.gu-tabla-gestion[b-nok3tpepli] {
    width: 100% !important;
    min-width: 1180px !important;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0;
}


    .gu-tabla-gestion th[b-nok3tpepli],
    .gu-tabla-gestion td[b-nok3tpepli] {
        padding: 9px 10px !important;
        line-height: 1.3 !important;
        vertical-align: middle !important;
    }


    .gu-tabla-gestion thead th[b-nok3tpepli] {
        position: sticky;
        top: 0;
        z-index: 5;
        color: #cbd5e1;
        background: #1e293b;
        border-bottom: 1px solid rgba(148, 163, 184, .18);
        font-size: 12px !important;
        font-weight: 850 !important;
        letter-spacing: .025em;
        white-space: nowrap;
    }


    .gu-tabla-gestion td[b-nok3tpepli] {
        height: 66px;
        color: #dbe3ee;
        border-bottom: 1px solid rgba(148, 163, 184, .075);
        font-size: 13px !important;
        transition: background-color .15s ease;
    }


    .gu-tabla-gestion tbody tr:hover td[b-nok3tpepli] {
        background: rgba(51, 65, 85, .18);
    }


    .gu-tabla-gestion .col-seleccion[b-nok3tpepli] {
        width: 48px;
        padding-left: 12px !important;
        padding-right: 8px !important;
        text-align: center;
    }


    .gu-tabla-gestion .col-cuil[b-nok3tpepli] {
        width: 155px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }


    .gu-tabla-gestion td.col-cuil strong[b-nok3tpepli] {
        color: #e2e8f0;
        font-size: 12.8px;
        font-weight: 750;
    }


    .gu-tabla-gestion .col-nombre[b-nok3tpepli] {
        width: 25%;
        min-width: 220px;
    }


    .gu-tabla-gestion .col-email[b-nok3tpepli] {
        width: 32%;
        min-width: 320px;
    }


    .gu-tabla-gestion .col-acceso[b-nok3tpepli] {
        width: 145px;
        white-space: nowrap;
    }


    .gu-tabla-gestion .col-acciones[b-nok3tpepli] {
        width: 270px;
        white-space: nowrap;
    }


    .gu-tabla-gestion td.col-nombre[b-nok3tpepli] {
        overflow: hidden;
    }


/* ==========================================================
   CHECKBOX
   ========================================================== */

.gu-checkbox[b-nok3tpepli] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}


    .gu-checkbox:disabled[b-nok3tpepli] {
        opacity: .28;
        cursor: not-allowed;
    }


/* ==========================================================
   NOMBRE
   ========================================================== */

.gu-nombre-persona[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .gu-nombre-persona strong[b-nok3tpepli] {
        min-width: 0;
        overflow: hidden;
        color: #e2e8f0;
        font-size: 13.3px;
        font-weight: 760;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .gu-nombre-persona small[b-nok3tpepli] {
        margin-top: 4px;
        color: #64748b;
        font-size: 10.5px;
    }


/* ==========================================================
   FILAS
   ========================================================== */

.gu-fila-seleccionada td[b-nok3tpepli] {
    background: rgba(30, 64, 175, .11) !important;
}


    .gu-fila-seleccionada td:first-child[b-nok3tpepli] {
        box-shadow: inset 3px 0 0 rgba(59, 130, 246, .85);
    }


.gu-fila-pendiente-correo td[b-nok3tpepli] {
    background: rgba(120, 53, 15, .045) !important;
}


    .gu-fila-pendiente-correo td:first-child[b-nok3tpepli] {
        box-shadow: inset 3px 0 0 rgba(245, 158, 11, .65);
    }


.gu-fila-correo-editado td[b-nok3tpepli] {
    background: rgba(30, 64, 175, .05) !important;
}


    .gu-fila-correo-editado td:first-child[b-nok3tpepli] {
        box-shadow: inset 3px 0 0 rgba(59, 130, 246, .70);
    }


.gu-fila-cuenta-pendiente td[b-nok3tpepli] {
    background: rgba(127, 29, 29, .035);
}


/* ==========================================================
   EDITOR CORREO
   ========================================================== */

.gu-email-editor[b-nok3tpepli] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(148, 163, 184, .17);
    border-radius: 9px;
    background: rgba(2, 6, 23, .28);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}


    .gu-email-editor:focus-within[b-nok3tpepli] {
        border-color: rgba(96, 165, 250, .58);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, .08);
        background: rgba(15, 23, 42, .58);
    }


    .gu-email-editor.guardado[b-nok3tpepli] {
        border-color: rgba(34, 197, 94, .18);
    }


    .gu-email-editor.invalido[b-nok3tpepli] {
        border-color: rgba(239, 68, 68, .52);
        background: rgba(127, 29, 29, .09);
    }


    .gu-email-editor.pendiente[b-nok3tpepli] {
        border-color: rgba(245, 158, 11, .25);
        background: rgba(120, 53, 15, .06);
    }


    .gu-email-editor.guardando[b-nok3tpepli] {
        border-color: rgba(96, 165, 250, .35);
        opacity: .78;
    }


.gu-email-input-wrap[b-nok3tpepli] {
    min-width: 0;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
}


.gu-email-input-icono[b-nok3tpepli] {
    color: #64748b;
    font-size: 13px;
    text-align: center;
}


.gu-email-editor:focus-within
.gu-email-input-icono[b-nok3tpepli] {
    color: #60a5fa;
}


.gu-email-input[b-nok3tpepli] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 6px 0 1px;
    border: 0;
    outline: 0;
    color: #e2e8f0;
    background: transparent;
    font: inherit;
    font-size: 12.8px;
}


    .gu-email-input[b-nok3tpepli]::placeholder {
        color: #64748b;
        opacity: 1;
    }


    .gu-email-input:disabled[b-nok3tpepli] {
        cursor: wait;
        opacity: .70;
    }


.gu-email-editor-acciones[b-nok3tpepli] {
    min-width: 31px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.gu-email-confirmado[b-nok3tpepli],
.gu-email-faltante-icono[b-nok3tpepli],
.gu-email-guardando[b-nok3tpepli] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    font-size: 13px;
}


.gu-email-confirmado[b-nok3tpepli] {
    color: #4ade80;
}


.gu-email-faltante-icono[b-nok3tpepli] {
    color: #f59e0b;
}


.gu-email-guardando[b-nok3tpepli] {
    color: #60a5fa;
}


    .gu-email-guardando .spinner-border[b-nok3tpepli] {
        width: 14px;
        height: 14px;
    }


/* ==========================================================
   MENSAJES CORREO
   ========================================================== */

.gu-email-mensaje[b-nok3tpepli] {
    min-height: 15px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9.8px;
    line-height: 1.2;
}


    .gu-email-mensaje.error[b-nok3tpepli] {
        color: #fca5a5;
    }


    .gu-email-mensaje.guardado[b-nok3tpepli] {
        color: #86efac;
    }


    .gu-email-mensaje.falta[b-nok3tpepli] {
        color: #a78b6b;
    }


/* ==========================================================
   ESTADOS
   ========================================================== */

.gu-acceso-badge[b-nok3tpepli] {
    min-height: 27px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.8px;
    font-weight: 800;
    white-space: nowrap;
}


    .gu-acceso-badge.pendiente-correo[b-nok3tpepli] {
        color: #fde68a;
        border-color: rgba(245, 158, 11, .27);
        background: rgba(120, 53, 15, .20);
    }


    .gu-acceso-badge.sin-acceso[b-nok3tpepli] {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, .20);
        background: rgba(148, 163, 184, .08);
    }


    .gu-acceso-badge.activo[b-nok3tpepli] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, .25);
        background: rgba(34, 197, 94, .11);
    }


    .gu-acceso-badge.inactivo[b-nok3tpepli] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, .24);
        background: rgba(127, 29, 29, .24);
    }


/* ==========================================================
   ACCIONES DE FILA
   ========================================================== */

.gu-acciones-fila[b-nok3tpepli] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}


.gu-btn-tabla[b-nok3tpepli] {
    min-height: 32px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 10.8px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(2, 6, 23, .12);
    transition: transform .13s ease, filter .13s ease, opacity .13s ease;
}


    .gu-btn-tabla i[b-nok3tpepli] {
        font-size: 11px;
    }


    .gu-btn-tabla:hover:not(:disabled)[b-nok3tpepli] {
        transform: translateY(-1px);
        filter: brightness(1.06);
    }


    .gu-btn-tabla:disabled[b-nok3tpepli] {
        opacity: .35;
        cursor: not-allowed;
        transform: none;
    }


.gu-btn-invitar[b-nok3tpepli] {
    color: #f0fdf4;
    border-color: rgba(74, 222, 128, .32);
    background: linear-gradient( 135deg, #15803d, #16a34a );
}


.gu-btn-reenviar[b-nok3tpepli] {
    color: #fffbeb;
    border-color: rgba(245, 158, 11, .38);
    background: linear-gradient( 135deg, #a16207, #b45309 );
}


.gu-btn-perfiles[b-nok3tpepli] {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, .25);
    background: rgba(30, 64, 175, .55);
}


/* ==========================================================
   SIN RESULTADOS
   ========================================================== */

.gu-sin-resultados[b-nok3tpepli] {
    height: 190px;
    padding: 32px !important;
    text-align: center;
    color: #64748b !important;
}


    .gu-sin-resultados i[b-nok3tpepli],
    .gu-sin-resultados strong[b-nok3tpepli],
    .gu-sin-resultados span[b-nok3tpepli] {
        display: block;
    }


    .gu-sin-resultados i[b-nok3tpepli] {
        margin-bottom: 7px;
        font-size: 27px;
    }


    .gu-sin-resultados strong[b-nok3tpepli] {
        color: #cbd5e1;
        font-size: 13px;
    }


    .gu-sin-resultados span[b-nok3tpepli] {
        margin-top: 4px;
        color: #94a3b8;
        font-size: 11px;
    }


/* ==========================================================
   LOADING
   ========================================================== */

.gu-carga-overlay[b-nok3tpepli] {
    min-height: 280px;
    display: grid;
    place-items: center;
}


.gu-carga-modal[b-nok3tpepli] {
    width: min( 390px, calc(100% - 24px) );
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(96, 165, 250, .20);
    border-radius: 15px;
    background: rgba(15, 23, 42, .94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}


.gu-carga-icono[b-nok3tpepli] {
    color: #60a5fa;
}


.gu-carga-texto[b-nok3tpepli] {
    display: flex;
    flex-direction: column;
}


    .gu-carga-texto strong[b-nok3tpepli] {
        color: #f8fafc;
        font-size: 13px;
    }


    .gu-carga-texto span[b-nok3tpepli] {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 11px;
    }


/* ==========================================================
   MODALES
   ========================================================== */

.gu-modal-fondo[b-nok3tpepli] {
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    padding: 20px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.gu-modal[b-nok3tpepli] {
    width: min( 840px, 100% );
    max-height: min( 860px, calc(100dvh - 40px) );
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    color: #f8fafc;
    background: #0f172a;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .38);
}


.gu-modal-persona[b-nok3tpepli] {
    width: min( 820px, calc(100vw - 36px) );
}


.gu-modal-excel[b-nok3tpepli] {
    width: min( 980px, calc(100vw - 36px) );
}


.gu-modal-header[b-nok3tpepli] {
    min-height: 76px;
    padding: 13px 15px 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    background: #1e293b;
}


.gu-modal-titulo[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}


.gu-modal-icono[b-nok3tpepli] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, .12);
    font-size: 16px;
}


.gu-modal-icono-excel[b-nok3tpepli] {
    color: #86efac;
    background: rgba(34, 197, 94, .11);
}


.gu-modal-header small[b-nok3tpepli] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}


.gu-modal-header h3[b-nok3tpepli] {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 750;
}


.gu-btn-icono[b-nok3tpepli] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 9px;
    color: #cbd5e1;
    background: rgba(15, 23, 42, .52);
    cursor: pointer;
}


    .gu-btn-icono:hover:not(:disabled)[b-nok3tpepli] {
        border-color: rgba(96, 165, 250, .30);
        color: #ffffff;
    }


.gu-modal-body[b-nok3tpepli] {
    padding: 18px 20px 22px;
    overflow-y: auto;
    background: #0b1220;
}


.gu-modal-footer[b-nok3tpepli] {
    padding: 11px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: #1e293b;
}


.gu-modal-mensaje[b-nok3tpepli] {
    margin: 0 0 12px;
}


/* ==========================================================
   ALTA MANUAL
   ========================================================== */

.gu-persona-seccion[b-nok3tpepli] {
    padding: 17px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 13px;
    background: rgba(15, 23, 42, .45);
}


    .gu-persona-seccion +
    .gu-persona-seccion[b-nok3tpepli] {
        margin-top: 12px;
    }


.gu-persona-seccion-titulo[b-nok3tpepli] {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}


.gu-form-grid[b-nok3tpepli] {
    display: grid;
    grid-template-columns: minmax(190px, .82fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 13px 15px;
}


    .gu-form-grid .form-row[b-nok3tpepli] {
        margin: 0;
    }


        .gu-form-grid .form-row label[b-nok3tpepli] {
            margin-bottom: 6px;
            color: #e2e8f0;
            font-size: 12.5px;
            font-weight: 750;
        }


    .gu-form-grid .form-control[b-nok3tpepli] {
        min-height: 44px;
        padding: 9px 11px;
        border-radius: 10px;
        font-size: 13.5px;
    }


.gu-seccion-correo[b-nok3tpepli] {
    background: rgba(2, 6, 23, .18);
}


.gu-correo-destacado[b-nok3tpepli] {
    width: 100%;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
    border: 1px solid rgba(96, 165, 250, .20);
    border-radius: 12px;
    background: rgba(37, 99, 235, .07);
}


.gu-correo-icono[b-nok3tpepli] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 11px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .12);
    font-size: 16px;
}


.gu-campo-mail[b-nok3tpepli] {
    min-width: 0;
    margin: 0;
}


    .gu-campo-mail label[b-nok3tpepli] {
        display: block;
        margin-bottom: 6px;
        color: #e2e8f0;
        font-size: 12.5px;
        font-weight: 800;
    }


        .gu-campo-mail label small[b-nok3tpepli] {
            margin-left: 4px;
            color: #64748b;
            font-size: 10px;
            font-weight: 600;
        }


    .gu-campo-mail .form-control[b-nok3tpepli] {
        width: 100%;
        min-height: 44px;
        padding: 9px 11px;
        border-radius: 10px;
        color: #f8fafc;
        font-size: 13.5px;
    }


.gu-alta-manual-ayuda[b-nok3tpepli] {
    margin-top: 11px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1.45;
}


    .gu-alta-manual-ayuda i[b-nok3tpepli] {
        margin-top: 1px;
        flex: 0 0 auto;
        color: #60a5fa;
    }


/* ==========================================================
   RESUMEN PERSONA
   ========================================================== */

.gu-persona-resumen[b-nok3tpepli] {
    margin-bottom: 12px;
    padding: 14px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(96, 165, 250, .16);
    border-radius: 13px;
    background: linear-gradient( 90deg, rgba(30, 64, 175, .10), rgba(15, 23, 42, .55) );
}


.gu-persona-avatar[b-nok3tpepli] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #dbeafe;
    background: rgba(59, 130, 246, .15);
    font-size: 19px;
}


.gu-persona-resumen-datos[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .gu-persona-resumen-datos small[b-nok3tpepli] {
        color: #64748b;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }


    .gu-persona-resumen-datos strong[b-nok3tpepli] {
        margin-top: 2px;
        overflow: hidden;
        color: #f8fafc;
        font-size: 15px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .gu-persona-resumen-datos span[b-nok3tpepli] {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 10.5px;
    }


        .gu-persona-resumen-datos span i[b-nok3tpepli] {
            margin-right: 3px;
        }


.gu-persona-resumen-estado[b-nok3tpepli] {
    align-self: center;
}


/* ==========================================================
   PERFILES
   ========================================================== */

.gu-seccion-perfiles[b-nok3tpepli] {
    background: rgba(2, 6, 23, .14);
}


.gu-perfiles-cargando[b-nok3tpepli] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #94a3b8;
    font-size: 12px;
}


.gu-perfiles-grid[b-nok3tpepli] {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 10px;
}


.gu-perfil-item[b-nok3tpepli] {
    min-width: 0;
    min-height: 74px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 18px 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 12px;
    background: rgba(15, 23, 42, .54);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}


    .gu-perfil-item:hover[b-nok3tpepli] {
        border-color: rgba(96, 165, 250, .28);
        background: rgba(30, 41, 59, .68);
        transform: translateY(-1px);
    }


    .gu-perfil-item.fijo[b-nok3tpepli] {
        cursor: default;
        border-color: rgba(34, 197, 94, .20);
        background: rgba(22, 101, 52, .09);
    }


        .gu-perfil-item.fijo:hover[b-nok3tpepli] {
            transform: none;
        }


    .gu-perfil-item input[type="checkbox"][b-nok3tpepli] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--gu-azul);
    }


.gu-perfil-icono[b-nok3tpepli] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .10);
    font-size: 14px;
}


.gu-perfil-item.fijo
.gu-perfil-icono[b-nok3tpepli] {
    color: #86efac;
    background: rgba(34, 197, 94, .10);
}


.gu-perfil-texto[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .gu-perfil-texto strong[b-nok3tpepli] {
        color: #e2e8f0;
        font-size: 11px;
        font-weight: 800;
    }


    .gu-perfil-texto small[b-nok3tpepli] {
        margin-top: 2px;
        color: #64748b;
        font-size: 9.5px;
        line-height: 1.3;
    }


/* ==========================================================
   EXCEL
   ========================================================== */

.gu-excel-cargando[b-nok3tpepli] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94a3b8;
}


    .gu-excel-cargando .spinner-border[b-nok3tpepli] {
        width: 32px;
        height: 32px;
        color: #22c55e;
    }


    .gu-excel-cargando strong[b-nok3tpepli] {
        color: #e2e8f0;
        font-size: 14px;
    }


    .gu-excel-cargando span:last-child[b-nok3tpepli] {
        font-size: 11px;
    }


.gu-excel-archivo[b-nok3tpepli] {
    margin-bottom: 12px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 11px;
    background: rgba(22, 101, 52, .07);
}


.gu-excel-archivo-icono[b-nok3tpepli] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #86efac;
    background: rgba(34, 197, 94, .10);
    font-size: 16px;
}


.gu-excel-archivo > div:last-child[b-nok3tpepli] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.gu-excel-archivo small[b-nok3tpepli] {
    color: #64748b;
    font-size: 9px;
    text-transform: uppercase;
}


.gu-excel-archivo strong[b-nok3tpepli] {
    margin-top: 2px;
    overflow: hidden;
    color: #e2e8f0;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.gu-excel-resumen[b-nok3tpepli] {
    display: grid;
    grid-template-columns: repeat( 5, minmax(0, 1fr) );
    gap: 8px;
}


    .gu-excel-resumen > div[b-nok3tpepli] {
        min-width: 0;
        padding: 10px 11px;
        border: 1px solid rgba(148, 163, 184, .13);
        border-radius: 9px;
        background: rgba(15, 23, 42, .45);
    }


        .gu-excel-resumen > div.ok[b-nok3tpepli] {
            border-color: rgba(34, 197, 94, .18);
        }


        .gu-excel-resumen > div.pendiente[b-nok3tpepli] {
            border-color: rgba(245, 158, 11, .18);
        }


        .gu-excel-resumen > div.error[b-nok3tpepli] {
            border-color: rgba(239, 68, 68, .14);
        }


    .gu-excel-resumen span[b-nok3tpepli] {
        display: block;
        color: #64748b;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }


    .gu-excel-resumen strong[b-nok3tpepli] {
        display: block;
        margin-top: 2px;
        color: #e2e8f0;
        font-size: 16px;
    }


    .gu-excel-resumen .ok strong[b-nok3tpepli] {
        color: #86efac;
    }


    .gu-excel-resumen .pendiente strong[b-nok3tpepli] {
        color: #fde68a;
    }


    .gu-excel-resumen .error strong[b-nok3tpepli] {
        color: #fca5a5;
    }


.gu-excel-advertencias[b-nok3tpepli] {
    margin-top: 10px;
    display: grid;
    gap: 5px;
}


    .gu-excel-advertencias > div[b-nok3tpepli] {
        padding: 7px 9px;
        display: flex;
        align-items: flex-start;
        gap: 6px;
        border-radius: 7px;
        color: #fde68a;
        background: rgba(120, 53, 15, .13);
        font-size: 10px;
    }


.gu-excel-preview-header[b-nok3tpepli] {
    margin: 14px 0 6px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}


    .gu-excel-preview-header strong[b-nok3tpepli] {
        color: #e2e8f0;
        font-size: 12px;
    }


    .gu-excel-preview-header span[b-nok3tpepli] {
        color: #64748b;
        font-size: 9.5px;
    }


.gu-excel-preview-wrap[b-nok3tpepli] {
    max-height: 380px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 9px;
}


.gu-excel-preview[b-nok3tpepli] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}


    .gu-excel-preview th[b-nok3tpepli] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 9px;
        color: #cbd5e1;
        background: #1e293b;
        text-align: left;
        font-size: 10px;
        white-space: nowrap;
    }


    .gu-excel-preview td[b-nok3tpepli] {
        padding: 8px 9px;
        color: #cbd5e1;
        border-top: 1px solid rgba(148, 163, 184, .07);
    }


    .gu-excel-preview tbody tr:hover[b-nok3tpepli] {
        background: rgba(51, 65, 85, .14);
    }


.gu-excel-estado[b-nok3tpepli] {
    padding: 3px 7px;
    display: inline-flex;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}


    .gu-excel-estado.ok[b-nok3tpepli] {
        color: #bbf7d0;
        background: rgba(34, 197, 94, .10);
    }


    .gu-excel-estado.pendiente[b-nok3tpepli] {
        color: #fde68a;
        background: rgba(245, 158, 11, .11);
    }


    .gu-excel-estado.error[b-nok3tpepli] {
        color: #fecaca;
        background: rgba(239, 68, 68, .10);
    }


.gu-excel-preview-aviso[b-nok3tpepli] {
    margin-top: 6px;
    color: #64748b;
    font-size: 9px;
    text-align: right;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1120px) {

    .gu-filtros-grid[b-nok3tpepli] {
        grid-template-columns: minmax(260px, 1.4fr) repeat( 2, minmax(150px, .7fr) );
    }


    .gu-tabla-header[b-nok3tpepli] {
        align-items: flex-start;
        flex-direction: column;
    }


    .gu-tabla-header-acciones[b-nok3tpepli] {
        width: 100%;
        justify-content: space-between;
    }


    .gu-excel-resumen[b-nok3tpepli] {
        grid-template-columns: repeat( 3, minmax(0, 1fr) );
    }
}


@media (max-width: 820px) {

    .gestion-usuarios-page[b-nok3tpepli] {
        width: calc(100% - 16px);
        margin-top: 8px;
        padding: 10px;
    }


    .gu-selector-grid[b-nok3tpepli] {
        grid-template-columns: 1fr;
    }


    .gu-acciones-principales[b-nok3tpepli] {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }


        .gu-acciones-principales .gu-btn[b-nok3tpepli] {
            width: 100%;
        }


    .gu-filtros-grid[b-nok3tpepli] {
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
    }


    .gu-filtro-busqueda[b-nok3tpepli] {
        grid-column: 1 / -1;
    }


    .gu-form-grid[b-nok3tpepli],
    .gu-perfiles-grid[b-nok3tpepli] {
        grid-template-columns: 1fr;
    }


    .gu-modal-fondo[b-nok3tpepli] {
        padding: 8px;
    }


    .gu-modal[b-nok3tpepli],
    .gu-modal-persona[b-nok3tpepli],
    .gu-modal-excel[b-nok3tpepli] {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }


    .gu-persona-resumen[b-nok3tpepli] {
        grid-template-columns: 48px minmax(0, 1fr);
    }


    .gu-persona-resumen-estado[b-nok3tpepli] {
        grid-column: 1 / -1;
    }


    .gu-excel-resumen[b-nok3tpepli] {
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
    }
}


@media (max-width: 620px) {

    .gestion-usuarios-page[b-nok3tpepli] {
        width: calc(100% - 10px);
        margin-top: 5px;
        padding: 8px;
    }


    .gu-encabezado[b-nok3tpepli] {
        padding: 14px;
        align-items: flex-start;
    }


    .gu-encabezado-icono[b-nok3tpepli] {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 19px;
    }


    .gu-filtros-cabecera[b-nok3tpepli] {
        align-items: stretch;
        flex-direction: column;
    }


    .gu-btn-limpiar[b-nok3tpepli] {
        width: 100%;
    }


    .gu-filtros-grid[b-nok3tpepli] {
        grid-template-columns: 1fr;
    }


    .gu-filtro-busqueda[b-nok3tpepli] {
        grid-column: auto;
    }


    .gu-tabla-header-acciones[b-nok3tpepli] {
        align-items: stretch;
        flex-direction: column;
    }


    .gu-seleccion-info[b-nok3tpepli],
    .gu-btn-acceso-masivo[b-nok3tpepli] {
        width: 100%;
    }


    .gu-modal-footer[b-nok3tpepli] {
        display: grid;
        grid-template-columns: 1fr;
    }


        .gu-modal-footer .gu-btn[b-nok3tpepli] {
            width: 100%;
        }


    .gu-correo-destacado[b-nok3tpepli] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }


    .gu-excel-resumen[b-nok3tpepli] {
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
    }
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .gestion-usuarios-page *[b-nok3tpepli],
    .gu-modal *[b-nok3tpepli],
    .gu-modal-fondo *[b-nok3tpepli] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   PLACEHOLDERS - ALTA MANUAL
   ========================================================== */

.gu-modal-persona .form-control[b-nok3tpepli]::placeholder {
    color: #334155;
    opacity: 0.55;
    font-style: italic;
}

/* ==========================================================
   EXCEL - PAGINACIÓN
   ========================================================== */

.gu-excel-paginacion[b-nok3tpepli] {
    margin-top: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 9px;
    background: rgba(15, 23, 42, .38);
}


    .gu-excel-paginacion .gu-btn[b-nok3tpepli] {
        min-height: 32px;
        padding: 0 11px;
        border-radius: 8px;
        font-size: 10.5px;
        font-weight: 750;
    }


        .gu-excel-paginacion .gu-btn i[b-nok3tpepli] {
            font-size: 10px;
        }


.gu-excel-paginacion-info[b-nok3tpepli] {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}


    .gu-excel-paginacion-info strong[b-nok3tpepli] {
        color: #cbd5e1;
        font-size: 10.5px;
        font-weight: 800;
    }


    .gu-excel-paginacion-info span[b-nok3tpepli] {
        margin-top: 3px;
        color: #64748b;
        font-size: 9px;
    }

/* ==========================================================
   EXCEL - RESUMEN
   ========================================================== */

.gu-excel-resumen-4[b-nok3tpepli] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.gu-excel-resumen > .duplicados[b-nok3tpepli] {
    border-color: rgba(245, 158, 11, .18);
}


    .gu-excel-resumen > .duplicados strong[b-nok3tpepli] {
        color: #fde68a;
    }


/* ==========================================================
   EXCEL - TARJETA PROBLEMAS
   ========================================================== */

.gu-excel-resumen-tarjeta[b-nok3tpepli] {
    min-width: 0;
    padding: 10px 11px;
    display: block;
    border: 1px solid rgba(239, 68, 68, .22);
    border-radius: 9px;
    color: inherit;
    background: rgba(127, 29, 29, .10);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}


    .gu-excel-resumen-tarjeta:hover:not(:disabled)[b-nok3tpepli] {
        transform: translateY(-1px);
        border-color: rgba(248, 113, 113, .45);
        background: rgba(127, 29, 29, .18);
    }


    .gu-excel-resumen-tarjeta.activa[b-nok3tpepli] {
        border-color: rgba(248, 113, 113, .55);
        background: rgba(127, 29, 29, .23);
    }


    .gu-excel-resumen-tarjeta:disabled[b-nok3tpepli] {
        cursor: default;
        opacity: .65;
    }


    .gu-excel-resumen-tarjeta span[b-nok3tpepli] {
        display: block;
        color: #fca5a5;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }


    .gu-excel-resumen-tarjeta strong[b-nok3tpepli] {
        display: block;
        margin-top: 2px;
        color: #fecaca;
        font-size: 16px;
    }


    .gu-excel-resumen-tarjeta small[b-nok3tpepli] {
        display: block;
        margin-top: 3px;
        color: #94a3b8;
        font-size: 9px;
    }


/* ==========================================================
   EXCEL - DETALLE DE PROBLEMAS
   ========================================================== */

.gu-excel-problemas[b-nok3tpepli] {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(239, 68, 68, .20);
    border-radius: 10px;
    background: rgba(69, 10, 10, .08);
}


.gu-excel-problemas-header[b-nok3tpepli] {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(239, 68, 68, .13);
    background: rgba(127, 29, 29, .12);
}


    .gu-excel-problemas-header > div[b-nok3tpepli] {
        display: flex;
        flex-direction: column;
    }


    .gu-excel-problemas-header strong[b-nok3tpepli] {
        color: #fecaca;
        font-size: 11.5px;
    }


    .gu-excel-problemas-header span[b-nok3tpepli] {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 9.5px;
    }


.gu-excel-problemas-wrap[b-nok3tpepli] {
    max-height: 260px;
    overflow: auto;
}


.gu-excel-problemas-tabla[b-nok3tpepli] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
}


    .gu-excel-problemas-tabla th[b-nok3tpepli] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 9px;
        color: #cbd5e1;
        background: #1e293b;
        text-align: left;
        font-size: 9.5px;
    }


    .gu-excel-problemas-tabla td[b-nok3tpepli] {
        padding: 8px 9px;
        color: #cbd5e1;
        border-top: 1px solid rgba(148, 163, 184, .07);
        vertical-align: top;
    }


.gu-excel-problema-motivo[b-nok3tpepli] {
    min-width: 300px;
    color: #fca5a5 !important;
    white-space: normal;
}
/* /Components/Pages/HoraExtras.razor.rz.scp.css */
/* ==========================================================
   BLOQUE HORAS EXTRAS
   VERSIÓN AJUSTADA
   - más aire entre calendario y fechas seleccionadas
   - rompe antes a tablet para evitar superposición
   - mantiene una altura visual parecida a Licencias
   ========================================================== */

.bloque-horasextras[b-sqguvjdm88] {
    display: grid;
    grid-template-columns: minmax(560px, 1.35fr) minmax(240px, 0.9fr) minmax(260px, 1fr);
    grid-template-rows: auto auto;
    gap: 20px 22px;
    margin-top: 0;
    padding: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    min-height: 340px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    align-items: start;
}

/* ==========================================================
   BLOQUE FECHAS
   ========================================================== */

.bloque-fechas[b-sqguvjdm88] {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 250px minmax(300px, 1fr);
    column-gap: 30px;
    row-gap: 14px;
    align-items: start;
    min-width: 0;
}

.col-calendario[b-sqguvjdm88],
.col-lista[b-sqguvjdm88] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-lista[b-sqguvjdm88] {
    padding-left: 6px;
}

.bloque-horasextras .col-calendario label[b-sqguvjdm88],
.bloque-horasextras .col-lista label[b-sqguvjdm88],
.bloque-horasextras .bloque-horarios .grupo-horario label[b-sqguvjdm88],
.bloque-horasextras .bloque-motivo label[b-sqguvjdm88] {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 6px;
    color: #dbe4f0;
    letter-spacing: 0.01em;
}

/* lista de fechas */
.bloque-horasextras .col-lista select.lista-fechas[b-sqguvjdm88] {
    width: 100%;
    min-width: 260px;
    height: 205px;
    padding: 10px 12px;
    font-size: 0.95rem;
    background: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 10px;
    box-sizing: border-box;
}

/* ==========================================================
   BLOQUE HORARIOS
   ========================================================== */

.bloque-horarios[b-sqguvjdm88] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: start;
    min-width: 240px;
}

.grupo-horario[b-sqguvjdm88] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.horario-group[b-sqguvjdm88] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bloque-horasextras .horario-group select[b-sqguvjdm88] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.95rem;
    background: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================================
   BLOQUE MOTIVO
   ========================================================== */

.bloque-motivo[b-sqguvjdm88] {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bloque-horasextras .bloque-motivo input[type="text"][b-sqguvjdm88] {
    width: 100%;
    padding: 10px 12px;
    min-height: 40px;
    font-size: 0.95rem;
    background: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================================
   LEYENDA HORAS CALCULADAS
   ========================================================== */

.horas-calculadas[b-sqguvjdm88] {
    font-size: 1rem;
    font-weight: 700;
    color: #67e8f9;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(103, 232, 249, 0.18);
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ==========================================================
   MENSAJE
   ========================================================== */

.bloque-mensaje[b-sqguvjdm88] {
    grid-column: 1 / 3;
    grid-row: 2;
    align-self: end;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.mensaje-resultado[b-sqguvjdm88] {
    font-weight: 700;
    color: #4ade80;
    font-size: 0.95rem;
    line-height: 1.35;
}

/* ==========================================================
   BOTONES
   ========================================================== */

.bloque-botones[b-sqguvjdm88] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.bloque-horasextras .btn-guardar[b-sqguvjdm88],
.bloque-horasextras .btn-cancelar[b-sqguvjdm88] {
    padding: 8px 14px;
    min-height: 40px;
    min-width: 120px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.bloque-horasextras .btn-guardar[b-sqguvjdm88] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

    .bloque-horasextras .btn-guardar:hover[b-sqguvjdm88] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(22, 163, 74, 0.22);
    }

.bloque-horasextras .btn-cancelar[b-sqguvjdm88] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
    box-shadow: 0 8px 18px rgba(100, 116, 139, 0.18);
}

    .bloque-horasextras .btn-cancelar:hover[b-sqguvjdm88] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(100, 116, 139, 0.22);
    }

/* ==========================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================== */

.bloque-horasextras input[type="text"][b-sqguvjdm88],
.bloque-horasextras input[type="date"][b-sqguvjdm88],
.bloque-horasextras input[type="number"][b-sqguvjdm88],
.bloque-horasextras select[b-sqguvjdm88],
.bloque-horasextras textarea[b-sqguvjdm88] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
}

    .bloque-horasextras input[b-sqguvjdm88]::placeholder,
    .bloque-horasextras textarea[b-sqguvjdm88]::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    .bloque-horasextras input:focus[b-sqguvjdm88],
    .bloque-horasextras select:focus[b-sqguvjdm88],
    .bloque-horasextras textarea:focus[b-sqguvjdm88] {
        outline: none;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }

    .bloque-horasextras select option[b-sqguvjdm88] {
        background: #0f172a;
        color: #ffffff;
    }

    /* ==========================================================
   CAMPOS DESHABILITADOS
   ========================================================== */

    .bloque-horasextras input[disabled][b-sqguvjdm88],
    .bloque-horasextras select[disabled][b-sqguvjdm88],
    .bloque-horasextras textarea[disabled][b-sqguvjdm88] {
        background-color: #2c2c2c !important;
        color: #aaa !important;
        -webkit-text-fill-color: #aaa !important;
        border: 1px solid #555 !important;
        cursor: not-allowed !important;
        opacity: 0.75;
    }

/* ==========================================================
   CALENDARIO MUD
   ========================================================== */

.bloque-horasextras .mud-calendar[b-sqguvjdm88] {
    background-color: rgba(15, 30, 50, 0.95);
    border-radius: 12px;
    padding: 6px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.bloque-horasextras .mud-picker-day-selected[b-sqguvjdm88] {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 50%;
}

/* ==========================================================
   FECHAS SELECCIONADAS
   ========================================================== */

.fecha-item[b-sqguvjdm88] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background-color 0.18s ease;
}

    .fecha-item.seleccionada[b-sqguvjdm88] {
        background: rgba(34, 197, 94, 0.14);
        color: #dcfce7;
    }

.btn-fecha-seleccionar[b-sqguvjdm88] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-weight: 500;
    margin-right: 2px;
    padding: 0;
    text-align: left;
}

.btn-fecha-quitar[b-sqguvjdm88] {
    background: none;
    border: none;
    color: #f87171;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px;
}

    .btn-fecha-quitar:hover[b-sqguvjdm88] {
        color: #ef4444;
    }

/* ==========================================================
   RESPONSIVE INTERMEDIO
   - rompe antes para evitar que se pisen columnas
   ========================================================== */

@media (max-width: 1320px) {
    .bloque-horasextras[b-sqguvjdm88] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 18px;
        min-height: auto;
    }

    .bloque-fechas[b-sqguvjdm88] {
        grid-column: 1 / -1;
        grid-row: 1;
        grid-template-columns: 250px minmax(280px, 1fr);
        column-gap: 30px;
    }

    .bloque-horarios[b-sqguvjdm88] {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .bloque-motivo[b-sqguvjdm88] {
        grid-column: 2;
        grid-row: 2;
    }

    .bloque-mensaje[b-sqguvjdm88] {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }

    .bloque-botones[b-sqguvjdm88] {
        grid-column: 2;
        grid-row: 3;
        justify-content: flex-end;
        align-items: end;
    }
}

/* ==========================================================
   RESPONSIVE TABLET
   - si sigue achicando, fechas ya no quedan en dos columnas
   ========================================================== */

@media (max-width: 1080px) {
    .bloque-fechas[b-sqguvjdm88] {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 14px;
    }

    .col-lista[b-sqguvjdm88] {
        padding-left: 0;
    }

    .bloque-horasextras .col-lista select.lista-fechas[b-sqguvjdm88] {
        min-width: 0;
        height: 185px;
    }
}

/* ==========================================================
   RESPONSIVE TABLET CHICO
   - apila horarios y motivo para evitar cualquier choque
   ========================================================== */

@media (max-width: 920px) {
    .bloque-horasextras[b-sqguvjdm88] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 14px;
        min-height: auto;
    }

    .bloque-fechas[b-sqguvjdm88],
    .bloque-horarios[b-sqguvjdm88],
    .bloque-motivo[b-sqguvjdm88],
    .bloque-mensaje[b-sqguvjdm88],
    .bloque-botones[b-sqguvjdm88] {
        grid-column: 1;
        grid-row: auto;
    }

    .bloque-horarios[b-sqguvjdm88],
    .bloque-motivo[b-sqguvjdm88] {
        min-width: 0;
    }

    .bloque-botones[b-sqguvjdm88] {
        justify-content: flex-end;
    }

    .bloque-mensaje[b-sqguvjdm88] {
        min-height: 0;
    }
}

/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 768px) {
    .bloque-horasextras[b-sqguvjdm88] {
        padding: 14px;
    }

    .bloque-fechas[b-sqguvjdm88] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bloque-horasextras .col-lista select.lista-fechas[b-sqguvjdm88] {
        height: 170px;
    }

    .bloque-horasextras .horario-group[b-sqguvjdm88] {
        justify-content: flex-start;
    }

        .bloque-horasextras .horario-group select[b-sqguvjdm88] {
            width: 100%;
            max-width: 110px;
        }

    .bloque-botones[b-sqguvjdm88] {
        justify-content: stretch;
    }

    .bloque-horasextras .btn-guardar[b-sqguvjdm88],
    .bloque-horasextras .btn-cancelar[b-sqguvjdm88] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Licencia.razor.rz.scp.css */
/* ==========================================================
   BLOQUE LICENCIAS
   CSS BASE COMENTADO PARA AJUSTES FUTUROS
   ========================================================== */

/* ==========================================================
   1) CONTENEDOR PRINCIPAL DEL BLOQUE
   - AJUSTAR ACÁ el espacio respecto del bloque superior
   - AJUSTAR ACÁ el padding general
   - AJUSTAR ACÁ la separación entre fila 1 / fila 2 / fila 3
   ========================================================== */
.bloque-licencias[b-p1je7kejuq] {
    display: grid;
    grid-template-rows: auto auto auto;
    /* separación vertical entre las filas internas */
    gap: 25px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    color: white;
    font-family: 'Segoe UI', sans-serif;

    margin-top: 30px;
}

    /* ==========================================================
   2) FILAS GENERALES
   - estructura base de las tres filas
   ========================================================== */
    .bloque-licencias .fila-1[b-p1je7kejuq],
    .bloque-licencias .fila-2[b-p1je7kejuq],
    .bloque-licencias .fila-3[b-p1je7kejuq] {
        border-radius: 8px;
        grid-column: 1 / -1;
    }

    /* ==========================================================
   3) FILA 1: COMBO TIPO LICENCIA
   - acá ajustás el ancho del bloque completo
   ========================================================== */
    .bloque-licencias .fila-1[b-p1je7kejuq] {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center; /* centra el bloque */
    }

        /* bloque real del label + combo */
        .bloque-licencias .fila-1 .grupo-input[b-p1je7kejuq] {
            width: 100%;
            max-width: 900px; /* subí o bajá esto */
            min-width: 280px;
        }

            /* label alineado al borde izquierdo del combo */
            .bloque-licencias .fila-1 .grupo-input label[b-p1je7kejuq] {
                display: block;
                width: 100%;
                text-align: left;
                margin-bottom: 6px;
                font-weight: 600;
                font-size: 0.92rem;
                color: #dbe4f0;
            }

            /* combo ocupa todo el ancho del grupo */
            .bloque-licencias .fila-1 .grupo-input .form-control[b-p1je7kejuq] {
                width: 80%;
                min-width: 0;
                max-width: 100%;
            }

    /* ==========================================================
   4) FILA 2: DATOS NO EDITABLES
   - AJUSTAR ACÁ la cantidad de columnas y separación
   ========================================================== */
    .bloque-licencias .fila-2[b-p1je7kejuq] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* separación entre columnas */
        gap: 18px;
        margin: 0 auto;
        width: 100%;
        max-width: 1600px;
    }

        .bloque-licencias .fila-2 .col-dato[b-p1je7kejuq] {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            min-width: 160px;
            align-items: center; /* centra el bloque interno */
        }

            .bloque-licencias .fila-2 .col-dato label[b-p1je7kejuq] {
                width: 70%;
                min-width: 180px;
                max-width: 260px;
                font-weight: 600;
                font-size: 0.9rem;
                margin-bottom: 4px;
                color: #dbe4f0;
                text-align: left;
            }

            .bloque-licencias .fila-2 .col-dato span[b-p1je7kejuq] {
                display: block;
                width: 70%;
                min-width: 180px;
                max-width: 260px;
                height: 36px;
                line-height: 36px;
                font-size: 0.95rem;
                font-weight: 600;
                text-align: center;
                background-color: #ffffff10;
                color: white;
                border: 1px solid #ffffff33;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 0 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                ellipsis;
            }
        /* ==========================================================
   COLUMNA ESPECIAL: CERTIFICADO
   - independiente de las columnas simples
   ========================================================== */

        .bloque-licencias .fila-2 .col-dato-certificado[b-p1je7kejuq] {
            align-items: stretch;
        }

            .bloque-licencias .fila-2 .col-dato-certificado > label[b-p1je7kejuq] {
                width: 100%;
                font-weight: 600;
                font-size: 0.9rem;
                margin-bottom: 6px;
                color: #dbe4f0;
                text-align: left;
            }



/* bloque recibido por */
.bloque-recepcion-adjunto[b-p1je7kejuq] {
    margin-top: 15px;
}

.label-recepcion[b-p1je7kejuq] {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-weight: 700;
    color: #dbe4f0;
    text-align: left;
}

/* panel radios */
.panel-recepcion-adjunto[b-p1je7kejuq] {
    background: rgba(255,255,255,0.04) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: none !important;
}

/* lista de chips */
.adjuntos-certificados-lista[b-p1je7kejuq] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* chip adjunto */
.chip-adjunto-certificado[b-p1je7kejuq] {
    background: linear-gradient(135deg, #4a90e2, #357abd) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

    /* ==========================================================
   5) FILA 3: DESDE / HASTA / OBS / CANTIDAD / RESTAN / BOTONES
   - AJUSTAR ACÁ el ancho total del bloque
   - AJUSTAR ACÁ la separación horizontal y vertical
   - esta es la zona principal que querías tocar
   ========================================================== */
    .bloque-licencias .fila-3[b-p1je7kejuq] {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
        grid-template-areas:
            "desde      hasta       observaciones"
            "cantidad   restan      botones";
        /* separación horizontal entre columnas */
        column-gap: 16px;
        /* ✅ separación vertical más chica para acercar las dos filas */
        row-gap: 6px;
        justify-content: center;
        /* ✅ bloque más protagonista */
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 14px;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid #ffffff22;
        border-radius: 12px;
    }

        /* área observaciones */
        .bloque-licencias .fila-3 [style*="grid-area: observaciones"] textarea[b-p1je7kejuq] {
            height: 170px;
            resize: vertical;
        }

        /* ==========================================================
           6) CAMPOS Y CONTROLES
           ========================================================== */
        .bloque-licencias input[type="text"][b-p1je7kejuq],
        .bloque-licencias input[type="date"][b-p1je7kejuq],
        .bloque-licencias input[type="datetime-local"][b-p1je7kejuq],
        .bloque-licencias input[type="number"][b-p1je7kejuq],
        .bloque-licencias select[b-p1je7kejuq] {
            width: 60%;
            min-width: 190px;
            max-width: 340px;
            padding: 8px 10px;
            min-height: 40px;
            font-size: 0.95rem;
            background-color: rgb(15, 30, 50);
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            caret-color: #ffffff;
            border: 1px solid #334155;
            border-radius: 8px;
            box-sizing: border-box;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }


            .bloque-licencias input[type="date"][b-p1je7kejuq]::-webkit-calendar-picker-indicator,
            .bloque-licencias input[type="datetime-local"][b-p1je7kejuq]::-webkit-calendar-picker-indicator {
                filter: invert(1);
                cursor: pointer;
            }

.bloque-licencias .fila-3 [style*="grid-area: desde"] input[b-p1je7kejuq],
.bloque-licencias .fila-3 [style*="grid-area: hasta"] input[b-p1je7kejuq] {
    width: 60%;
    min-width: 190px;
    max-width: 340px;
}
    /* textarea se mantiene ancho completo */
    .bloque-licencias textarea[b-p1je7kejuq] {
        width: 100%;
        padding: 8px 10px;
        min-height: 40px;
        font-size: 0.95rem;
        background-color: rgb(15, 30, 50);
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        border: 1px solid #334155;
        border-radius: 8px;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .bloque-licencias input[b-p1je7kejuq]::placeholder,
        .bloque-licencias textarea[b-p1je7kejuq]::placeholder {
            color: #94a3b8;
            opacity: 1;
        }

        .bloque-licencias input:focus[b-p1je7kejuq],
        .bloque-licencias select:focus[b-p1je7kejuq],
        .bloque-licencias textarea:focus[b-p1je7kejuq] {
            outline: none;
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }

    .bloque-licencias select[b-p1je7kejuq],
    .bloque-licencias option[b-p1je7kejuq] {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
    }

        .bloque-licencias select option[b-p1je7kejuq] {
            background: #0f172a;
            color: #ffffff;
        }

    /* ==========================================================
   7) BOTONES
   - AJUSTAR ACÁ tamaño y look de Guardar / Cancelar
   ========================================================== */
    .bloque-licencias .btn-guardar[b-p1je7kejuq],
    .bloque-licencias .btn-cancelar[b-p1je7kejuq] {
        padding: 8px 14px;
        min-height: 40px;
        font-size: 0.95rem;
        font-weight: 700;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .bloque-licencias .btn-guardar[b-p1je7kejuq] {
        background-color: green;
        color: white;
    }

        .bloque-licencias .btn-guardar:hover[b-p1je7kejuq] {
            background-color: darkgreen;
            transform: translateY(-1px);
        }

    .bloque-licencias .btn-cancelar[b-p1je7kejuq] {
        background-color: gray;
        color: white;
    }

        .bloque-licencias .btn-cancelar:hover[b-p1je7kejuq] {
            background-color: #444;
            transform: translateY(-1px);
        }

    /* ==========================================================
   8) CAMPOS DESHABILITADOS
   ========================================================== */
    .bloque-licencias input[disabled][b-p1je7kejuq],
    .bloque-licencias select[disabled][b-p1je7kejuq],
    .bloque-licencias textarea[disabled][b-p1je7kejuq] {
        background-color: #2c2c2c !important;
        color: #aaa !important;
        -webkit-text-fill-color: #aaa !important;
        border: 1px solid #555 !important;
        cursor: not-allowed !important;
        opacity: 0.75;
    }

    /* ==========================================================
   9) OBSERVACIONES / CUADRANTE RESTAN
   ========================================================== */
    .bloque-licencias .fila-3 .col-observaciones textarea[b-p1je7kejuq] {
        height: 50px;
        resize: vertical;
        width: 100%;
        max-width: 520px;
    }

    .bloque-licencias .fila-2b[b-p1je7kejuq] {
        gap: 0;
        margin-top: 10px;
    }

    .bloque-licencias .cuadrante-restan[b-p1je7kejuq] {
        display: block;
        width: 100px;
        max-width: 100px;
        height: 36px;
        line-height: 36px;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: center;
        background-color: #ffffff10;
        color: white;
        border: 1px solid #ffffff33;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 0 10px;
        margin-top: 2px;
    }

/* ==========================================================
   10) ADJUNTOS
   ========================================================== */
.adjuntos-container[b-p1je7kejuq] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================
   11) TABLA JORNADA
   ========================================================== */
.tabla-jornada[b-p1je7kejuq] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(15, 30, 50);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

    .tabla-jornada th[b-p1je7kejuq] {
        background-color: #0d6efd;
        color: white;
        font-weight: 700;
        padding: 7px 9px;
        text-align: center;
    }

    .tabla-jornada td[b-p1je7kejuq] {
        padding: 7px 9px;
        color: white;
        text-align: center;
        background-color: rgb(15, 30, 50);
        border: 1px solid rgba(255,255,255,0.15);
    }

    .tabla-jornada tr:nth-child(even) td[b-p1je7kejuq] {
        background-color: #1e3550;
    }

    .tabla-jornada tr:hover td[b-p1je7kejuq] {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .tabla-jornada .check[b-p1je7kejuq] {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #28a745;
        color: white;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
    }

/* ==========================================================
   12) HORAS RESTANTES
   ========================================================== */
.horas-restantes[b-p1je7kejuq] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
}

    .horas-restantes span[b-p1je7kejuq] {
        background: rgba(255, 255, 255, 0.1);
        padding: 7px 14px;
        border-radius: 8px;
        font-weight: 600;
        color: white;
        font-size: 0.92rem;
    }

/* tabla jornada a ancho completo */
.bloque-licencias .fila-2 .tabla-jornada-col[b-p1je7kejuq] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================
   13) FRANCO COMPENSATORIO
   ========================================================== */
.resumen-franco[b-p1je7kejuq] {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

.franco-card[b-p1je7kejuq] {
    background: linear-gradient(135deg, #1e3a5f, #0d6efd);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    width: 280px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 0 auto;
}

    .franco-card:hover[b-p1je7kejuq] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    }

.franco-header[b-p1je7kejuq] {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #cceeff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.franco-body[b-p1je7kejuq] {
    margin: 8px 0;
}

.franco-horas[b-p1je7kejuq] {
    font-size: 26px;
    font-weight: bold;
    color: #00e676;
    text-shadow: 0 0 6px rgba(0, 230, 118, 0.6);
}

.franco-footer[b-p1je7kejuq] {
    font-size: 11px;
    color: #ddd;
    margin-top: 8px;
    font-style: italic;
}

.bloque-licencias .fila-2 .franco-col[b-p1je7kejuq] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

/* ==========================================================
   14) DATE PICKER
   ========================================================== */
input[type="date"].form-control[b-p1je7kejuq]::-webkit-calendar-picker-indicator,
.bloque-licencias input[type="date"][b-p1je7kejuq]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ==========================================================
   15) RESPONSIVE TABLET
   - AJUSTAR ACÁ el comportamiento intermedio
   ========================================================== */
@media (max-width: 1100px) {
    .bloque-licencias .fila-2[b-p1je7kejuq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .bloque-licencias .fila-3[b-p1je7kejuq] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "desde hasta"
            "cantidad restan"
            "observaciones observaciones"
            "botones botones";
        column-gap: 16px;
        row-gap: 8px;
    }
}

/* ==========================================================
   16) RESPONSIVE MOBILE
   - AJUSTAR ACÁ el comportamiento en celular
   ========================================================== */
@media (max-width: 768px) {
    .bloque-licencias[b-p1je7kejuq] {
        gap: 14px;
        padding: 14px;
        margin-top: 22px !important;
        top: 0;
    }

        .bloque-licencias .fila-1[b-p1je7kejuq] {
            width: 100%;
            min-width: 0;

        }

        .bloque-licencias .fila-2[b-p1je7kejuq] {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bloque-licencias .fila-3[b-p1je7kejuq] {
            grid-template-columns: 1fr;
            grid-template-areas:
                "desde"
                "hasta"
                "cantidad"
                "restan"
                "observaciones"
                "botones";
            column-gap: 14px;
            row-gap: 8px;
        }

        .bloque-licencias input[type="text"][b-p1je7kejuq],
        .bloque-licencias input[type="date"][b-p1je7kejuq],
        .bloque-licencias input[type="number"][b-p1je7kejuq],
        .bloque-licencias select[b-p1je7kejuq],
        .bloque-licencias textarea[b-p1je7kejuq] {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .bloque-licencias .fila-2 .col-dato span[b-p1je7kejuq] {
            min-width: 0;
            max-width: 100%;
            white-space: normal;
            line-height: 1.3;
            height: auto;
            min-height: 40px;
            padding: 10px;
        }

        .bloque-licencias .fila-3 .col-observaciones textarea[b-p1je7kejuq],
        .bloque-licencias .fila-3 [style*="grid-area: observaciones"] textarea[b-p1je7kejuq] {
            width: 100%;
            height: 50px;
            max-width: 100%;
        }

        .bloque-licencias .cuadrante-restan[b-p1je7kejuq] {
            width: 100%;
            max-width: 100%;
        }

    .tabla-jornada[b-p1je7kejuq] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .franco-card[b-p1je7kejuq] {
        width: 100%;
    }
}
/* /Components/Pages/Licencias.razor.rz.scp.css */
/* ==========================================================
   TABLAS
   ========================================================== */

.tabla-movimientos-container[b-09gvivjlmu] {
    margin-top: 30px;
    padding: 0px 20px 20px 20px; 
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

    .tabla-movimientos-container h3[b-09gvivjlmu] {
        margin: 0 0 16px 0;
        color: #f8fafc;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

.tabla-movimientos[b-09gvivjlmu],
.tabla-estilo[b-09gvivjlmu] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 14px;
    font-size: 0.93rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

    .tabla-movimientos th[b-09gvivjlmu],
    .tabla-estilo th[b-09gvivjlmu] {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
        padding: 12px 14px;
        text-align: center;
        font-weight: 700;
        font-size: 0.92rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        white-space: nowrap;
    }

    .tabla-movimientos td[b-09gvivjlmu],
    .tabla-estilo td[b-09gvivjlmu] {
        padding: 11px 14px;
        color: #e5e7eb;
        text-align: center;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(15, 23, 42, 0.38);
    }

    .tabla-estilo th[b-09gvivjlmu] {
        text-align: left;
    }

    .tabla-estilo td[b-09gvivjlmu] {
        text-align: left;
    }

    .tabla-movimientos tbody tr[b-09gvivjlmu],
    .tabla-estilo tbody tr[b-09gvivjlmu] {
        transition: background-color 0.18s ease, transform 0.18s ease;
    }

        .tabla-movimientos tbody tr:hover[b-09gvivjlmu],
        .tabla-estilo tbody tr:hover[b-09gvivjlmu] {
            background: rgba(59, 130, 246, 0.08);
        }

            .tabla-movimientos tbody tr:hover td[b-09gvivjlmu],
            .tabla-estilo tbody tr:hover td[b-09gvivjlmu] {
                background: rgba(59, 130, 246, 0.08);
            }

.fila-activa[b-09gvivjlmu] {
    background: rgba(37, 99, 235, 0.16) !important;
    font-weight: 700;
}

    .fila-activa td[b-09gvivjlmu] {
        background: rgba(37, 99, 235, 0.16) !important;
    }

/* ==========================================================
   BOTONES DE CATEGORÍA
   ========================================================== */

.botonera-legajos[b-09gvivjlmu] {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

    .botonera-legajos > div[b-09gvivjlmu] {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: center;
    }

.btn-categoria[b-09gvivjlmu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    min-height: 52px;
    padding: 14px 22px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

    .btn-categoria:hover[b-09gvivjlmu] {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
    }

    .btn-categoria:active[b-09gvivjlmu] {
        transform: translateY(0);
    }

    .btn-categoria i[b-09gvivjlmu] {
        font-size: 1rem;
    }

.btn-categoria-activo[b-09gvivjlmu] {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22) !important;
    transform: translateY(-1px);
}

/* ==========================================================
   BOTONES PEQUEÑOS / ÍCONOS
   ========================================================== */

.btn-icono[b-09gvivjlmu] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .btn-icono:hover[b-09gvivjlmu] {
        color: #ffffff;
        background: rgba(220, 38, 38, 0.18);
        border-color: rgba(220, 38, 38, 0.30);
        transform: translateY(-1px);
    }

/* ==========================================================
   ZONA DE FILTROS
   ========================================================== */

.zona-filtros[b-09gvivjlmu] {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}

.btn-aplicar[b-09gvivjlmu],
.btn-exportar[b-09gvivjlmu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

    .btn-aplicar:hover[b-09gvivjlmu],
    .btn-exportar:hover[b-09gvivjlmu] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    }

.chip-filtro[b-09gvivjlmu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #dbeafe;
    font-size: 0.88rem;
    font-weight: 600;
}

/* ==========================================================
   BLOQUE 1 - LAYOUT FLEXIBLE DEL AGENTE
   ========================================================== */

.bloque-agente-layout[b-09gvivjlmu] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.bloque-busqueda-agente[b-09gvivjlmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.bloque-datos-agente[b-09gvivjlmu] {
    min-width: 0;
}

.datos-agente-grid[b-09gvivjlmu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    width: 100%;
}

    .datos-agente-grid .form-row[b-09gvivjlmu] {
        margin-bottom: 0;
    }

        /* fuerza una distribución más compacta y profesional */
        .datos-agente-grid .form-row input[b-09gvivjlmu] {
            min-height: 44px;
        }

/* ==========================================================
   INPUT DATE
   ========================================================== */

input[type="date"].form-control[b-09gvivjlmu]::-webkit-calendar-picker-indicator,
input[type="date"][b-09gvivjlmu]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}



.contenedor-formulario-movimiento[b-09gvivjlmu] {
    margin-top: 30px;
}
.bloque-licencias[b-09gvivjlmu],
.bloque-vacaciones[b-09gvivjlmu] {
    margin-top: 0 !important;
}
/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
    .bloque-agente-layout[b-09gvivjlmu] {
        grid-template-columns: 1fr;
    }

    .bloque-busqueda-agente[b-09gvivjlmu] {
        justify-content: stretch;
    }

        .bloque-busqueda-agente .form-header[b-09gvivjlmu] {
            width: 100%;
        }

        .bloque-busqueda-agente .btn-buscar[b-09gvivjlmu] {
            width: 100%;
            max-width: 100%;
        }
}

@media (max-width: 900px) {
    .datos-agente-grid[b-09gvivjlmu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .btn-categoria[b-09gvivjlmu] {
        min-width: 180px;
        flex: 1 1 220px;
    }
}

@media (max-width: 768px) {
    .datos-agente-grid[b-09gvivjlmu] {
        grid-template-columns: 1fr;
    }

    .tabla-movimientos[b-09gvivjlmu],
    .tabla-estilo[b-09gvivjlmu] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .btn-categoria[b-09gvivjlmu] {
        width: 100%;
        min-width: 100%;
    }

    .btn-aplicar[b-09gvivjlmu],
    .btn-exportar[b-09gvivjlmu] {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ==========================================
   🔐 LOGIN MODERNO - ARZ RH
   Inspiración SaaS / Visma style
   - Fondo corporativo moderno
   - Burbujas suaves en bordes
   - Card glass clara
   - Inputs limpios
   - Botón protagonista
   ========================================== */

:root[b-p5j7ecun6r] {
    --login-bg-1: #07111f;
    --login-bg-2: #0f172a;
    --login-bg-3: #10233d;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(255, 255, 255, 0.62);
    --primary: #0d6efd;
    --primary-hover: #0a58ca;
    --primary-soft: rgba(13, 110, 253, 0.14);
    --accent-green: #22c55e;
    --accent-yellow: #facc15;
    --accent-red: #ef4444;
    --accent-cyan: #38bdf8;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #e5e7eb;
    --input-bg: #ffffff;
    --input-border: #d7deea;
    --input-border-focus: #0d6efd;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
}

/* ---------- Fondo general ---------- */

.login-wrapper[b-p5j7ecun6r] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    overflow: hidden;
    isolation: isolate;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--text-main);
    background: radial-gradient(circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 30%), radial-gradient(circle at 88% 86%, rgba(13, 110, 253, 0.16), transparent 34%), linear-gradient(135deg, var(--login-bg-1) 0%, var(--login-bg-2) 48%, var(--login-bg-3) 100%);
}

    /* Burbujas tipo Google / Visma, abajo a la derecha */
    .login-wrapper[b-p5j7ecun6r]::before {
        content: "";
        position: absolute;
        right: -145px;
        bottom: -170px;
        width: 540px;
        height: 540px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.95;
        background: radial-gradient(circle at 56% 48%, rgba(66, 133, 244, 0.45) 0 72px, transparent 74px), radial-gradient(circle at 35% 68%, rgba(52, 168, 83, 0.36) 0 58px, transparent 60px), radial-gradient(circle at 72% 72%, rgba(251, 188, 5, 0.35) 0 50px, transparent 52px), radial-gradient(circle at 42% 36%, rgba(234, 67, 53, 0.31) 0 44px, transparent 46px), radial-gradient(circle at 82% 42%, rgba(56, 189, 248, 0.30) 0 40px, transparent 42px);
        filter: blur(0.2px);
        animation: loginBubbles-b-p5j7ecun6r 24s ease-in-out infinite alternate;
    }

    /* Mancha suave superior izquierda */
    .login-wrapper[b-p5j7ecun6r]::after {
        content: "";
        position: absolute;
        left: -190px;
        top: -190px;
        width: 470px;
        height: 470px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.58;
        background: radial-gradient(circle at center, rgba(34, 197, 94, 0.22), transparent 64%), radial-gradient(circle at 62% 42%, rgba(56, 189, 248, 0.20), transparent 48%);
        filter: blur(2px);
    }

@keyframes loginBubbles-b-p5j7ecun6r {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-14px, -10px, 0) scale(1.035);
    }
}

/* Textura sutil, no molesta */
.login-wrapper .login-bg-noise[b-p5j7ecun6r] {
    display: none;
}


/* ---------- Card ---------- */

.login-container[b-p5j7ecun6r] {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 3rem 2.55rem 2.65rem;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.72));
    border: 1px solid rgba(125, 211, 252, 0.20);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    /* Línea superior de color, estilo producto moderno */
    .login-container[b-p5j7ecun6r]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, #4285f4, #34a853, #fbbc05, #ea4335 );
        box-shadow: 0 8px 22px rgba(13, 110, 253, 0.22);
    }

    /* Brillo suave dentro de la card */
    .login-container[b-p5j7ecun6r]::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 20px;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(13, 110, 253, 0.10), transparent 68%);
        pointer-events: none;
    }

    .login-container:hover[b-p5j7ecun6r] {
        transform: translateY(-3px);
        border-color: rgba(13, 110, 253, 0.28);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }


    /* ---------- Título ---------- */

    .login-container h2[b-p5j7ecun6r] {
        position: relative;
        z-index: 1;
        margin: 0 0 2.2rem;
        font-size: 27px;
        font-weight: 800;
        color: #f8fafc;
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

        /* Subrayado decorativo debajo del título */
        .login-container h2[b-p5j7ecun6r]::after {
            content: "";
            display: block;
            width: 54px;
            height: 4px;
            margin: 12px auto 0;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary), var(--accent-green));
        }


/* ---------- Labels ---------- */

.field-block[b-p5j7ecun6r] {
    position: relative;
    z-index: 1;
    text-align: left;
    margin-bottom: 1.35rem;
}

.field-label-top[b-p5j7ecun6r] {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.1px;
}


/* ---------- Inputs ---------- */

.form-control[b-p5j7ecun6r] {
    width: 100%;
    min-height: 48px;
    padding: 13px 15px;
    font-size: 15px;
    border-radius: 14px;
    border: 1px solid var(--input-border);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    color: #0f172a;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

    .form-control[b-p5j7ecun6r]::placeholder {
        color: #94a3b8;
    }

    .form-control:hover[b-p5j7ecun6r] {
        border-color: #b8c3d6;
    }

    .form-control:focus[b-p5j7ecun6r] {
        border-color: var(--input-border-focus);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.13), 0 8px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    /* Autofill Chrome */
    .form-control:-webkit-autofill[b-p5j7ecun6r],
    .form-control:-webkit-autofill:hover[b-p5j7ecun6r],
    .form-control:-webkit-autofill:focus[b-p5j7ecun6r] {
        -webkit-text-fill-color: #0f172a;
        box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(13, 110, 253, 0.10);
        transition: background-color 9999s ease-in-out 0s;
    }


/* ---------- Password ---------- */

.password-container[b-p5j7ecun6r] {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-container .form-control[b-p5j7ecun6r] {
        padding-right: 48px;
    }

.toggle-password[b-p5j7ecun6r] {
    position: absolute;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #64748b;
    font-size: 15px;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

    .toggle-password:hover[b-p5j7ecun6r] {
        color: var(--primary);
        background-color: rgba(13, 110, 253, 0.08);
        transform: scale(1.03);
    }

    .toggle-password:focus[b-p5j7ecun6r] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.13);
    }


/* ---------- Botón ---------- */

/* ---------- Botón ---------- */

.btn-login[b-p5j7ecun6r] {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0.65rem;
    min-height: 50px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: #0d6efd;
    color: white;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

    .btn-login:hover[b-p5j7ecun6r] {
        background: #0b5ed7;
        border-color: rgba(147, 197, 253, 0.38);
        transform: translateY(-1px);
        box-shadow: 0 13px 26px rgba(13, 110, 253, 0.28);
    }

    .btn-login:active[b-p5j7ecun6r] {
        transform: translateY(0);
        background: #0a58ca;
        box-shadow: 0 7px 16px rgba(13, 110, 253, 0.22);
    }

    .btn-login:focus[b-p5j7ecun6r] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18), 0 10px 22px rgba(13, 110, 253, 0.22);
    }

    .btn-login:disabled[b-p5j7ecun6r] {
        opacity: 0.62;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

   


/* ---------- Alertas ---------- */

.alert[b-p5j7ecun6r] {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
}

    .alert.ok[b-p5j7ecun6r] {
        background: rgba(22, 163, 74, 0.10);
        color: #166534;
        border-color: rgba(22, 163, 74, 0.18);
    }

    .alert.error[b-p5j7ecun6r] {
        background: rgba(220, 38, 38, 0.10);
        color: #991b1b;
        border-color: rgba(220, 38, 38, 0.18);
    }

    .alert.warn[b-p5j7ecun6r] {
        background: rgba(217, 119, 6, 0.12);
        color: #92400e;
        border-color: rgba(217, 119, 6, 0.18);
    }


/* ---------- Links ---------- */

.extra-links[b-p5j7ecun6r] {
    position: relative;
    z-index: 1;
    margin-top: 1.65rem;
    font-size: 14px;
    color: var(--text-muted);
}

    .extra-links a[b-p5j7ecun6r] {
        color: var(--primary);
        text-decoration: none;
        font-weight: 700;
        transition: opacity 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
    }

        .extra-links a:hover[b-p5j7ecun6r] {
            color: var(--primary-hover);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }


/* ---------- Versión ---------- */

.version-label[b-p5j7ecun6r] {
    position: absolute;
    bottom: 14px;
    right: 18px;
    z-index: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
    font-family: 'Cascadia Code', Consolas, monospace;
    letter-spacing: -0.2px;
}


/* ---------- Responsive ---------- */

@media (max-width: 720px) {
    .login-wrapper[b-p5j7ecun6r]::before {
        right: -230px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        opacity: 0.70;
    }

    .login-wrapper[b-p5j7ecun6r]::after {
        left: -260px;
        top: -260px;
        opacity: 0.42;
    }
}

@media (max-width: 480px) {
    .login-wrapper[b-p5j7ecun6r] {
        padding: 1rem;
        align-items: center;
    }

    .login-container[b-p5j7ecun6r] {
        max-width: 100%;
        padding: 2.45rem 1.55rem 2.35rem;
        border-radius: 22px;
    }

        .login-container h2[b-p5j7ecun6r] {
            font-size: 24px;
            margin-bottom: 1.9rem;
        }

    .form-control[b-p5j7ecun6r] {
        min-height: 47px;
        font-size: 14.5px;
    }

    .btn-login[b-p5j7ecun6r] {
        min-height: 49px;
    }

    .version-label[b-p5j7ecun6r] {
        bottom: 10px;
        right: 14px;
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .login-container[b-p5j7ecun6r] {
        padding: 2.25rem 1.25rem 2.2rem;
    }

        .login-container h2[b-p5j7ecun6r] {
            font-size: 22px;
        }

    .field-block[b-p5j7ecun6r] {
        margin-bottom: 1.15rem;
    }
}


/* ---------- Accesibilidad: reducir animaciones ---------- */

@media (prefers-reduced-motion: reduce) {
    .login-wrapper[b-p5j7ecun6r]::before {
        animation: none !important;
    }

    .login-container[b-p5j7ecun6r],
    .form-control[b-p5j7ecun6r],
    .toggle-password[b-p5j7ecun6r],
    .btn-login[b-p5j7ecun6r],
    .extra-links a[b-p5j7ecun6r] {
        transition: none !important;
    }
}
/* /Components/Pages/MisTickets.razor.rz.scp.css */
.mis-tickets-container[b-j4k19uiqpu] {
    padding: 20px;
    color: white;
    max-width: 1000px;
    margin: auto;
}

h2[b-j4k19uiqpu] {
    color: #0d6efd;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Tabla */
.tabla-tickets[b-j4k19uiqpu] {
    width: 100%;
    border-collapse: collapse;
    background: rgba(15, 30, 50, 0.65);
    border-radius: 10px;
    overflow: hidden;
}

    .tabla-tickets th[b-j4k19uiqpu] {
        background: #0d6efd;
        padding: 10px;
        color: white;
        text-align: center;
    }

    .tabla-tickets td[b-j4k19uiqpu] {
        padding: 10px;
        color: white;
        text-align: center;
        border-bottom: 1px solid #ffffff25;
    }

    .tabla-tickets tr:nth-child(even) td[b-j4k19uiqpu] {
        background: rgba(255,255,255,0.04);
    }

.estado[b-j4k19uiqpu] {
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
}

    .estado.abierto[b-j4k19uiqpu] {
        background: #ffc107;
        color: black;
    }

    .estado.enanalisis[b-j4k19uiqpu] {
        background: #17a2b8;
        color: white;
    }

    .estado.cerrado[b-j4k19uiqpu] {
        background: #28a745;
        color: white;
    }

.btn-ver[b-j4k19uiqpu] {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #0d6efd;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

    .btn-ver:hover[b-j4k19uiqpu] {
        background: #0a58ca;
        transform: scale(1.05);
    }

/* Sin tickets */
.sin-tickets[b-j4k19uiqpu] {
    padding: 40px;
    text-align: center;
    color: #cbd5e1;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
}

/* Loading */
.loading-overlay[b-j4k19uiqpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.spinner[b-j4k19uiqpu] {
    width: 50px;
    height: 50px;
    border: 6px solid rgba(255,255,255,0.3);
    border-top: 6px solid #0d6efd;
    border-radius: 50%;
    animation: spin-b-j4k19uiqpu 1s linear infinite;
}

.loading-text[b-j4k19uiqpu] {
    margin-top: 10px;
}

@keyframes spin-b-j4k19uiqpu {
    100% {
        transform: rotate(360deg);
    }
}

.fila-nuevo[b-j4k19uiqpu] {
    background-color: rgba(80, 150, 255, 0.25); /* azul suave */
}

.badge-nuevo[b-j4k19uiqpu] {
    background: #1e90ff;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

.badge-vacio[b-j4k19uiqpu] {
    color: #aaa;
    font-size: 12px;
}

/* /Components/Pages/ModalAdjuntosLegajo.razor.rz.scp.css */
/* ==========================================================
   OVERLAY Y CONTENEDOR PRINCIPAL
   ========================================================== */

.modal-overlay[b-zt186kq7ls] {
    position: fixed;
    inset: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(6px);
}

.modal-adjuntos[b-zt186kq7ls] {
    width: min(1400px, 96vw);
    height: min(860px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #0b1730 0%, #101a2d 100%);
    color: #e5e7eb;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
    font-family: "Segoe UI", sans-serif;
}

/* ==========================================================
   HEADER
   ========================================================== */

.modal-header[b-zt186kq7ls] {
    min-height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.modal-titulo[b-zt186kq7ls] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.btn-cerrar[b-zt186kq7ls] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .btn-cerrar:hover[b-zt186kq7ls] {
        background: rgba(255, 255, 255, 0.26);
        transform: scale(1.04);
    }

/* ==========================================================
   ZONA DE CARGA MASIVA / DRAG & DROP
   ========================================================== */
.dropzone-adjuntos[b-zt186kq7ls] {
    position: relative;
    margin: 14px 18px;
    padding: 18px 20px;
    min-height: 92px;
    display: flex;
    align-items: center;
    border: 2px dashed rgba(96, 165, 250, 0.42);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 34, 58, 0.92) 0%, rgba(14, 24, 44, 0.92) 100%);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}

    .dropzone-adjuntos:hover[b-zt186kq7ls] {
        border-color: rgba(147, 197, 253, 0.86);
        background: linear-gradient(180deg, rgba(30, 48, 82, 0.96) 0%, rgba(17, 34, 64, 0.96) 100%);
        box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
    }

    .dropzone-adjuntos.drag-activo[b-zt186kq7ls] {
        border-color: #60a5fa;
        background: linear-gradient(180deg, rgba(37, 99, 235, 0.28) 0%, rgba(30, 64, 175, 0.22) 100%);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12), 0 16px 34px rgba(37, 99, 235, 0.20);
    }

.input-dropzone-real[b-zt186kq7ls] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dropzone-contenido[b-zt186kq7ls] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    z-index: 1;
}

.dropzone-icono[b-zt186kq7ls] {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
    font-size: 23px;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.10);
}

.dropzone-texto[b-zt186kq7ls] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .dropzone-texto strong[b-zt186kq7ls] {
        font-size: 15px;
        font-weight: 800;
        color: #f8fafc;
    }

    .dropzone-texto span[b-zt186kq7ls] {
        font-size: 13px;
        color: #cbd5e1;
        opacity: 0.90;
    }

.archivo-info[b-zt186kq7ls] {
    margin-left: auto;
    font-size: 13px;
    color: #cbd5e1;
    opacity: 0.95;
    white-space: nowrap;
}

.input-dropzone-real[b-zt186kq7ls] {
    display: none !important;
}

/* ==========================================================
   BOTONES PRINCIPALES
   Se conservan por compatibilidad si los usás en otro lugar.
   ========================================================== */

.btn-buscar[b-zt186kq7ls],
.btn-subir-manual[b-zt186kq7ls],
.btn-subir[b-zt186kq7ls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: all 0.18s ease;
}

.btn-buscar[b-zt186kq7ls] {
    border: 1px solid rgba(96, 165, 250, 0.35);
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .btn-buscar:hover[b-zt186kq7ls] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.30);
        filter: brightness(1.06);
    }

.btn-subir-manual[b-zt186kq7ls],
.btn-subir[b-zt186kq7ls] {
    border: 1px solid rgba(74, 222, 128, 0.26);
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22);
}

    .btn-subir-manual:hover[b-zt186kq7ls],
    .btn-subir:hover[b-zt186kq7ls] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(34, 197, 94, 0.30);
        filter: brightness(1.05);
    }

/* ==========================================================
   INFO DE ARCHIVO / TEXTO AUXILIAR
   ========================================================== */

.archivo-info[b-zt186kq7ls] {
    margin-left: auto;
    font-size: 13px;
    color: #cbd5e1;
    opacity: 0.95;
    white-space: nowrap;
}

.footer-texto[b-zt186kq7ls] {
    font-size: 12px;
    color: #cbd5e1;
    opacity: 0.95;
}

/* ==========================================================
   PROGRESO DE CARGA
   ========================================================== */

.upload-progress[b-zt186kq7ls] {
    padding: 12px 18px 10px 18px;
    background: rgba(9, 17, 33, 0.88);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar[b-zt186kq7ls] {
    height: 8px;
    background: rgba(51, 65, 85, 0.85);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress[b-zt186kq7ls] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #3b82f6 100%);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.30);
    transition: width 0.25s ease;
}

.upload-texto[b-zt186kq7ls] {
    font-size: 12px;
    color: #dbeafe;
    font-weight: 600;
}

/* ==========================================================
   LAYOUT PRINCIPAL
   ========================================================== */

.adjuntos-layout[b-zt186kq7ls] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    overflow: hidden;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.adjuntos-sidebar[b-zt186kq7ls] {
    background: linear-gradient(180deg, #0f1a30 0%, #111c31 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto;
    padding: 12px;
}

    .adjuntos-sidebar[b-zt186kq7ls]::-webkit-scrollbar {
        width: 10px;
    }

    .adjuntos-sidebar[b-zt186kq7ls]::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.25);
        border-radius: 999px;
    }

        .adjuntos-sidebar[b-zt186kq7ls]::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.40);
        }

/* ==========================================================
   ITEMS DE ADJUNTOS
   ========================================================== */

.adjunto-item[b-zt186kq7ls] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.18s ease;
}

    .adjunto-item:hover[b-zt186kq7ls] {
        background: rgba(59, 130, 246, 0.10);
        border-color: rgba(59, 130, 246, 0.22);
        transform: translateX(2px);
    }

    .adjunto-item.activo[b-zt186kq7ls] {
        background: linear-gradient(90deg, rgba(37, 99, 235, 0.24) 0%, rgba(59, 130, 246, 0.18) 100%);
        border-color: rgba(96, 165, 250, 0.35);
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.10);
    }

.icono-archivo[b-zt186kq7ls] {
    color: #93c5fd;
    font-size: 15px;
    text-align: center;
}

.nombre[b-zt186kq7ls] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================
   ACCIONES DE CADA ARCHIVO
   ========================================================== */

.acciones[b-zt186kq7ls] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .acciones button[b-zt186kq7ls] {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 9px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.18s ease;
        font-size: 13px;
    }

.btn-descargar[b-zt186kq7ls] {
    color: #dbeafe;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.28) 0%, rgba(30, 64, 175, 0.28) 100%);
    border: 1px solid rgba(96, 165, 250, 0.16);
}

    .btn-descargar:hover[b-zt186kq7ls] {
        background: linear-gradient(180deg, rgba(37, 99, 235, 0.42) 0%, rgba(30, 64, 175, 0.42) 100%);
        transform: scale(1.05);
    }

.btn-eliminar[b-zt186kq7ls] {
    color: #fecaca;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.20) 0%, rgba(185, 28, 28, 0.20) 100%);
    border: 1px solid rgba(248, 113, 113, 0.16);
}

    .btn-eliminar:hover[b-zt186kq7ls] {
        background: linear-gradient(180deg, rgba(220, 38, 38, 0.38) 0%, rgba(185, 28, 28, 0.38) 100%);
        color: #ffffff;
        transform: scale(1.05);
    }

/* ==========================================================
   VISOR
   ========================================================== */

.adjunto-viewer[b-zt186kq7ls] {
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, #020617 0%, #030b1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.preview-img[b-zt186kq7ls],
.preview-iframe[b-zt186kq7ls] {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: #000814;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.preview-img[b-zt186kq7ls] {
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-iframe[b-zt186kq7ls] {
    border: none;
}

.visor-vacio[b-zt186kq7ls],
.vacio[b-zt186kq7ls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

    .visor-vacio i[b-zt186kq7ls] {
        font-size: 34px;
        color: #60a5fa;
        opacity: 0.85;
    }

/* ==========================================================
   FOOTER
   Se conserva por compatibilidad si lo usás en otra versión.
   ========================================================== */

.footer-carga[b-zt186kq7ls] {
    min-height: 68px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(180deg, rgba(10, 18, 34, 0.96) 0%, rgba(8, 15, 28, 0.96) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   LOADING
   ========================================================== */

.spinner[b-zt186kq7ls] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: #60a5fa;
    margin: 30px auto;
    animation: spin-b-zt186kq7ls 0.8s linear infinite;
}

@keyframes spin-b-zt186kq7ls {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
    .adjuntos-layout[b-zt186kq7ls] {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .footer-carga[b-zt186kq7ls] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-buscar[b-zt186kq7ls],
    .btn-subir-manual[b-zt186kq7ls],
    .btn-subir[b-zt186kq7ls] {
        width: 100%;
        min-width: 0;
    }

    .dropzone-contenido[b-zt186kq7ls] {
        align-items: flex-start;
    }

    .archivo-info[b-zt186kq7ls] {
        margin-left: 0;
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .modal-overlay[b-zt186kq7ls] {
        padding: 10px;
    }

    .modal-adjuntos[b-zt186kq7ls] {
        width: 98vw;
        height: 95vh;
        border-radius: 16px;
    }

    .dropzone-adjuntos[b-zt186kq7ls] {
        margin: 12px 14px;
        padding: 16px;
        min-height: 112px;
    }

    .dropzone-contenido[b-zt186kq7ls] {
        gap: 12px;
    }

    .dropzone-icono[b-zt186kq7ls] {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .dropzone-texto strong[b-zt186kq7ls] {
        font-size: 14px;
    }

    .dropzone-texto span[b-zt186kq7ls],
    .archivo-info[b-zt186kq7ls] {
        font-size: 12px;
    }

    .adjuntos-layout[b-zt186kq7ls] {
        grid-template-columns: 1fr;
        grid-template-rows: 280px minmax(0, 1fr);
    }

    .adjuntos-sidebar[b-zt186kq7ls] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .modal-header[b-zt186kq7ls] {
        padding: 0 14px;
    }

    .upload-progress[b-zt186kq7ls],
    .footer-carga[b-zt186kq7ls] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .adjunto-item[b-zt186kq7ls] {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .nombre[b-zt186kq7ls] {
        font-size: 12.5px;
    }
}

@media (max-width: 520px) {
    .dropzone-contenido[b-zt186kq7ls] {
        flex-direction: column;
        align-items: flex-start;
    }

    .archivo-info[b-zt186kq7ls] {
        width: 100%;
    }
}
.input-dropzone-real[b-zt186kq7ls] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* /Components/Pages/ModalConfirmarLegajo.razor.rz.scp.css */

/* ============================================================
   OVERLAY
   ============================================================ */

.alta-legajo-overlay[b-rl3a6odont] {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    padding: 22px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ============================================================
   MODAL
   ============================================================ */

.alta-legajo-modal[b-rl3a6odont] {
    width: min(520px, 100%);
    max-height: min(720px, calc(100dvh - 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: #0f172a;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38), 0 8px 24px rgba(2, 6, 23, 0.22);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ============================================================
   HEADER
   ============================================================ */

.alta-legajo-header[b-rl3a6odont] {
    min-height: 72px;
    padding: 14px 16px 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: radial-gradient( circle at 88% 5%, rgba(59, 130, 246, 0.12), transparent 42% ), #1e293b;
}

.alta-legajo-header-contenido[b-rl3a6odont] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ============================================================
   ICONO HEADER
   ============================================================ */

.alta-legajo-icono[b-rl3a6odont] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient( 145deg, #2563eb, #3b82f6 );
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20);
}


/* ============================================================
   TÍTULO
   ============================================================ */

.alta-legajo-header h2[b-rl3a6odont] {
    margin: 0;
    color: #f8fafc;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.alta-legajo-header p[b-rl3a6odont] {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1.4;
}


/* ============================================================
   BOTÓN CERRAR
   ============================================================ */

.alta-legajo-cerrar[b-rl3a6odont] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 10px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.08);
    font-size: 16px;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

    .alta-legajo-cerrar:hover:not(:disabled)[b-rl3a6odont] {
        color: #ffffff;
        border-color: rgba(248, 113, 113, 0.30);
        background: rgba(239, 68, 68, 0.12);
    }

    .alta-legajo-cerrar:active:not(:disabled)[b-rl3a6odont] {
        transform: scale(.96);
    }

    .alta-legajo-cerrar:disabled[b-rl3a6odont] {
        opacity: .45;
        cursor: not-allowed;
    }


/* ============================================================
   BODY
   ============================================================ */

.alta-legajo-body[b-rl3a6odont] {
    flex: 1 1 auto;
    padding: 22px;
    overflow-y: auto;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.98) );
}


/* ============================================================
   CAMPOS
   ============================================================ */

.alta-legajo-campo[b-rl3a6odont] {
    margin-bottom: 22px;
}

    .alta-legajo-campo:last-child[b-rl3a6odont] {
        margin-bottom: 0;
    }

    .alta-legajo-campo > label[b-rl3a6odont],
    .alta-legajo-label-linea label[b-rl3a6odont] {
        display: block;
        margin: 0 0 7px;
        color: #e2e8f0;
        font-size: 11.5px;
        font-weight: 700;
    }

.alta-legajo-label-linea[b-rl3a6odont] {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .alta-legajo-label-linea label[b-rl3a6odont] {
        margin-bottom: 0;
    }


/* ============================================================
   REQUERIDO
   ============================================================ */

.campo-requerido[b-rl3a6odont] {
    margin-left: 2px;
    color: #f87171;
    font-weight: 800;
}


/* ============================================================
   INPUT / SELECT
   ============================================================ */

.alta-legajo-control[b-rl3a6odont] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid #334155;
    border-radius: 12px;
    outline: none;
    color: #ffffff;
    background: #0b1220;
    font: inherit;
    font-size: 13px;
    box-shadow: none;
    transition: border-color .17s ease, background-color .17s ease, box-shadow .17s ease;
}


/* SELECT */

select.alta-legajo-control[b-rl3a6odont] {
    padding-right: 38px;
    cursor: pointer;
}

    select.alta-legajo-control option[b-rl3a6odont] {
        color: #f8fafc;
        background: #0f172a;
    }


/* INPUT NUMBER */

input.alta-legajo-control[b-rl3a6odont] {
    appearance: textfield;
}

    input.alta-legajo-control[b-rl3a6odont]::-webkit-inner-spin-button,
    input.alta-legajo-control[b-rl3a6odont]::-webkit-outer-spin-button {
        margin: 0;
    }


/* HOVER */

.alta-legajo-control:hover:not(:disabled)[b-rl3a6odont] {
    border-color: #64748b;
    background: #111827;
}


/* FOCUS */

.alta-legajo-control:focus[b-rl3a6odont] {
    border-color: #3b82f6;
    background: #111827;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}


/* DISABLED */

.alta-legajo-control:disabled[b-rl3a6odont] {
    opacity: .52;
    cursor: not-allowed;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.72);
}


/* ============================================================
   NÚMERO DE LEGAJO
   Dato principal del modal
   ============================================================ */

.alta-legajo-numero[b-rl3a6odont] {
    min-height: 50px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: .01em;
}


/* ============================================================
   AYUDA
   ============================================================ */

.alta-legajo-ayuda[b-rl3a6odont] {
    display: block;
    margin-top: 7px;
    color: #7f8ea3;
    font-size: 9.5px;
    line-height: 1.45;
}


/* ============================================================
   LEGAJO SUGERIDO
   ============================================================ */

.alta-legajo-sugerido[b-rl3a6odont] {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.14);
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}


/* ============================================================
   AVISO SIN RAZONES
   ============================================================ */

.alta-legajo-aviso[b-rl3a6odont] {
    padding: 13px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 12px;
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.10);
}

    .alta-legajo-aviso > i[b-rl3a6odont] {
        margin-top: 2px;
        flex: 0 0 auto;
        color: #fbbf24;
        font-size: 15px;
    }

    .alta-legajo-aviso strong[b-rl3a6odont] {
        display: block;
        margin-bottom: 3px;
        color: #fde68a;
        font-size: 11.5px;
        font-weight: 750;
    }

    .alta-legajo-aviso span[b-rl3a6odont] {
        display: block;
        color: #d6c79b;
        font-size: 10px;
        line-height: 1.45;
    }


/* ============================================================
   CARGANDO
   ============================================================ */

.alta-legajo-cargando[b-rl3a6odont] {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #94a3b8;
    font-size: 10.5px;
}


/* ============================================================
   SPINNER
   ============================================================ */

.alta-legajo-spinner[b-rl3a6odont] {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 auto;
    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: alta-legajo-girar-b-rl3a6odont .75s linear infinite;
}

.alta-legajo-spinner-boton[b-rl3a6odont] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.30);
    border-top-color: #ffffff;
}

@keyframes alta-legajo-girar-b-rl3a6odont {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

.alta-legajo-footer[b-rl3a6odont] {
    min-height: 66px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: #1e293b;
}


/* ============================================================
   BOTONES
   ============================================================ */

.alta-legajo-btn[b-rl3a6odont] {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

    .alta-legajo-btn:hover:not(:disabled)[b-rl3a6odont] {
        transform: translateY(-1px);
    }

    .alta-legajo-btn:disabled[b-rl3a6odont] {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
    }


/* ============================================================
   BOTÓN CANCELAR
   ============================================================ */

.alta-legajo-btn-secundario[b-rl3a6odont] {
    color: #dbe7f3;
    border-color: rgba(148, 163, 184, 0.24);
    background: #24364f;
}

    .alta-legajo-btn-secundario:hover:not(:disabled)[b-rl3a6odont] {
        border-color: rgba(148, 163, 184, 0.34);
        background: #2c4260;
    }


/* ============================================================
   BOTÓN DAR DE ALTA
   ============================================================ */

.alta-legajo-btn-primario[b-rl3a6odont] {
    min-width: 118px;
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

    .alta-legajo-btn-primario:hover:not(:disabled)[b-rl3a6odont] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }


/* ============================================================
   SCROLL
   ============================================================ */

.alta-legajo-body[b-rl3a6odont] {
    scrollbar-width: thin;
    scrollbar-color: #475569 #0b1220;
}

    .alta-legajo-body[b-rl3a6odont]::-webkit-scrollbar {
        width: 8px;
    }

    .alta-legajo-body[b-rl3a6odont]::-webkit-scrollbar-track {
        background: #0b1220;
    }

    .alta-legajo-body[b-rl3a6odont]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #475569;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .alta-legajo-overlay[b-rl3a6odont] {
        padding: 12px;
        place-items: end center;
    }

    .alta-legajo-modal[b-rl3a6odont] {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
    }

    .alta-legajo-header[b-rl3a6odont] {
        min-height: 66px;
        padding: 13px 14px;
    }

    .alta-legajo-icono[b-rl3a6odont] {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 10px;
        font-size: 16px;
    }

    .alta-legajo-header h2[b-rl3a6odont] {
        font-size: 16px;
    }

    .alta-legajo-header p[b-rl3a6odont] {
        font-size: 9.5px;
    }

    .alta-legajo-body[b-rl3a6odont] {
        padding: 18px;
    }

    .alta-legajo-footer[b-rl3a6odont] {
        padding: 12px 14px;
        flex-direction: column-reverse;
    }

    .alta-legajo-btn[b-rl3a6odont] {
        width: 100%;
    }

    .alta-legajo-label-linea[b-rl3a6odont] {
        align-items: center;
    }
}


/* ============================================================
   PANTALLAS MUY BAJAS
   ============================================================ */

@media (max-height: 520px) {

    .alta-legajo-overlay[b-rl3a6odont] {
        align-items: start;
    }

    .alta-legajo-modal[b-rl3a6odont] {
        max-height: calc(100dvh - 24px);
    }

    .alta-legajo-body[b-rl3a6odont] {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}
/* /Components/Pages/ModalConformidad.razor.rz.scp.css */
/* ==========================================================
   MODAL CONFORMIDAD
   ========================================================== */

.modal-backdrop[b-n8h8c4cq9s] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(3, 8, 18, 0.78);
    backdrop-filter: blur(4px);
    z-index: 30000;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}


/* ==========================================================
   CONTENEDOR
   ========================================================== */

.modal-conformidad[b-n8h8c4cq9s] {
    position: relative;
    z-index: 30001;
    width: min(460px, calc(100vw - 36px));
    max-width: 460px;
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 16px;
    background: linear-gradient( 180deg, #13263d 0%, #0f1e32 100% );
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    animation: modalAparecer-b-n8h8c4cq9s 0.20s ease-out;
}


    /* Acento conforme */

    .modal-conformidad.modal-conforme[b-n8h8c4cq9s] {
        border-top: 3px solid #22c55e;
    }


    /* Acento no conforme */

    .modal-conformidad.modal-no-conforme[b-n8h8c4cq9s] {
        border-top: 3px solid #ef4444;
    }


/* Oculto en escritorio, usado como handle móvil */

.modal-handle[b-n8h8c4cq9s] {
    display: none;
}


/* ==========================================================
   ANIMACIÓN
   ========================================================== */

@keyframes modalAparecer-b-n8h8c4cq9s {
    from {
        transform: translateY(8px) scale(0.99);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


/* ==========================================================
   CABECERA
   ========================================================== */

.modal-cabecera[b-n8h8c4cq9s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.modal-icono[b-n8h8c4cq9s] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 19px;
}

.modal-conforme .modal-icono[b-n8h8c4cq9s] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.13);
    border: 1px solid rgba(74, 222, 128, 0.26);
}

.modal-no-conforme .modal-icono[b-n8h8c4cq9s] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.13);
    border: 1px solid rgba(248, 113, 113, 0.26);
}

.modal-cabecera-texto[b-n8h8c4cq9s] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-kicker[b-n8h8c4cq9s] {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.titulo[b-n8h8c4cq9s] {
    margin: 0;
    color: #f8fafc;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}


/* ==========================================================
   RESUMEN DECISIÓN
   ========================================================== */

.decision-resumen[b-n8h8c4cq9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.decision-label[b-n8h8c4cq9s] {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
}

.decision-resumen strong[b-n8h8c4cq9s] {
    font-size: 12px;
    letter-spacing: 0.04em;
}

.decision-conforme[b-n8h8c4cq9s] {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(34, 197, 94, 0.27);
}

    .decision-conforme strong[b-n8h8c4cq9s] {
        color: #4ade80;
    }

.decision-no-conforme[b-n8h8c4cq9s] {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(248, 113, 113, 0.27);
}

    .decision-no-conforme strong[b-n8h8c4cq9s] {
        color: #f87171;
    }


/* ==========================================================
   DESCRIPCIÓN
   ========================================================== */

.descripcion[b-n8h8c4cq9s] {
    margin: 0 0 18px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

.campo[b-n8h8c4cq9s] {
    margin-bottom: 15px;
}

    .campo label[b-n8h8c4cq9s] {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 6px;
        color: #e2e8f0;
        font-size: 12px;
        font-weight: 700;
    }

.campo-opcional[b-n8h8c4cq9s] {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}


/* ==========================================================
   INPUTS
   ========================================================== */

.input-text[b-n8h8c4cq9s],
.select-motivo[b-n8h8c4cq9s] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 9px;
    border: 1px solid #334155;
    background: #0b1729;
    color: #f8fafc;
    /*
     * 16px es intencional:
     * evita zoom automático en Safari/iPhone.
     */
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    .input-text[b-n8h8c4cq9s]::placeholder {
        color: #64748b;
    }

    .input-text:focus[b-n8h8c4cq9s],
    .select-motivo:focus[b-n8h8c4cq9s] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
        background: #0d1b2f;
    }

    .input-text:disabled[b-n8h8c4cq9s],
    .select-motivo:disabled[b-n8h8c4cq9s] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.select-motivo[b-n8h8c4cq9s] {
    cursor: pointer;
}

textarea.input-text[b-n8h8c4cq9s] {
    min-height: 88px;
    resize: vertical;
}


/* ==========================================================
   CONTRASEÑA
   ========================================================== */

.campo-clave[b-n8h8c4cq9s] {
    margin-top: 4px;
}

.ayuda-clave[b-n8h8c4cq9s] {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 11px;
}


/* ==========================================================
   ADVERTENCIA NO CONFORME
   ========================================================== */

.alerta-no-conforme[b-n8h8c4cq9s] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: #fde68a;
    font-size: 12px;
    line-height: 1.45;
}

    .alerta-no-conforme i[b-n8h8c4cq9s] {
        flex: 0 0 auto;
        margin-top: 2px;
        color: #fbbf24;
    }


/* ==========================================================
   ERROR
   ========================================================== */

.alerta-error[b-n8h8c4cq9s] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(127, 29, 29, 0.28);
    border: 1px solid rgba(248, 113, 113, 0.38);
    color: #fecaca;
    font-size: 12px;
    line-height: 1.4;
}

    .alerta-error i[b-n8h8c4cq9s] {
        flex: 0 0 auto;
        margin-top: 2px;
        color: #f87171;
    }


/* ==========================================================
   ACCIONES
   ========================================================== */

.acciones[b-n8h8c4cq9s] {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 9px;
    margin-top: 18px;
}

.btn-cancelar[b-n8h8c4cq9s],
.btn-confirmar[b-n8h8c4cq9s] {
    min-height: 43px;
    padding: 10px 13px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.btn-cancelar[b-n8h8c4cq9s] {
    border: 1px solid #475569;
    background: transparent;
    color: #cbd5e1;
}

    .btn-cancelar:hover:not(:disabled)[b-n8h8c4cq9s] {
        background: rgba(148, 163, 184, 0.10);
        border-color: #64748b;
    }

.btn-confirmar[b-n8h8c4cq9s] {
    border: 1px solid #22c55e;
    background: #16a34a;
    color: white;
}

    .btn-confirmar:hover:not(:disabled)[b-n8h8c4cq9s] {
        background: #15803d;
        transform: translateY(-1px);
    }

.btn-confirmar-no-conforme[b-n8h8c4cq9s] {
    background: #dc2626;
    border-color: #ef4444;
}

    .btn-confirmar-no-conforme:hover:not(:disabled)[b-n8h8c4cq9s] {
        background: #b91c1c;
    }

.btn-confirmar:disabled[b-n8h8c4cq9s],
.btn-cancelar:disabled[b-n8h8c4cq9s] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}


/* ==========================================================
   SPINNER DEL BOTÓN
   ========================================================== */

.spinner-boton[b-n8h8c4cq9s] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: white;
    animation: girarBoton-b-n8h8c4cq9s 0.7s linear infinite;
}

@keyframes girarBoton-b-n8h8c4cq9s {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 576px) {

    /*
     * En celular se comporta como una bottom-sheet.
     * Mucho más natural que una caja flotante en el medio.
     */
    .modal-backdrop[b-n8h8c4cq9s] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-conformidad[b-n8h8c4cq9s] {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        margin: 0;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .modal-handle[b-n8h8c4cq9s] {
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto 15px;
        border-radius: 999px;
        background: #475569;
    }

    .modal-cabecera[b-n8h8c4cq9s] {
        gap: 10px;
        margin-bottom: 14px;
    }

    .modal-icono[b-n8h8c4cq9s] {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 10px;
        font-size: 17px;
    }

    .titulo[b-n8h8c4cq9s] {
        font-size: 17px;
    }

    .descripcion[b-n8h8c4cq9s] {
        font-size: 12.5px;
        margin-bottom: 15px;
    }

    .decision-resumen[b-n8h8c4cq9s] {
        padding: 10px 11px;
    }

    .alerta-no-conforme[b-n8h8c4cq9s],
    .alerta-error[b-n8h8c4cq9s] {
        font-size: 12px;
    }

    /*
     * Los botones permanecen accesibles incluso
     * si el formulario necesita scroll.
     */
    .acciones[b-n8h8c4cq9s] {
        position: sticky;
        bottom: 0;
        grid-template-columns: 1fr 1.35fr;
        margin: 18px -16px calc(-16px - env(safe-area-inset-bottom));
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: linear-gradient( 180deg, rgba(15, 30, 50, 0.90), #0f1e32 28% );
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .btn-cancelar[b-n8h8c4cq9s],
    .btn-confirmar[b-n8h8c4cq9s] {
        min-height: 46px;
        padding: 10px 8px;
        font-size: 12.5px;
    }
}


/* ==========================================================
   CELULARES MUY ANGOSTOS
   ========================================================== */

@media (max-width: 380px) {

    .acciones[b-n8h8c4cq9s] {
        grid-template-columns: 1fr;
    }

    .btn-cancelar[b-n8h8c4cq9s] {
        order: 2;
    }

    .btn-confirmar[b-n8h8c4cq9s] {
        order: 1;
    }
}


/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .modal-conformidad[b-n8h8c4cq9s] {
        animation: none;
    }

    .btn-cancelar[b-n8h8c4cq9s],
    .btn-confirmar[b-n8h8c4cq9s] {
        transition: none;
    }
}
/* /Components/Pages/MovimientosTabla.razor.rz.scp.css */
/* ==========================================================
   CONTENEDOR DE FILTROS
   ========================================================== */

.zona-filtros[b-oiuqokqqck] {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: white;
}

/* ==========================================================
   FILTROS APLICADOS
   ========================================================== */

.chips-filtros[b-oiuqokqqck] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.chips-filtros-inline[b-oiuqokqqck] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-filtro[b-oiuqokqqck] {
    background: rgba(37, 99, 235, 0.16);
    color: #dbeafe;
    padding: 5px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 0.86rem;
    border: 1px solid rgba(96, 165, 250, 0.22);
}

.btn-cerrar[b-oiuqokqqck] {
    background: none;
    border: none;
    color: #dbeafe;
    font-weight: bold;
    margin-left: 6px;
    cursor: pointer;
}

/* ==========================================================
   SELECT Y BOTONES DE FILTROS
   ========================================================== */

.agregar-filtro select[b-oiuqokqqck],
.zona-filtros-linea select[b-oiuqokqqck],
.zona-filtros-linea input[b-oiuqokqqck] {
    background-color: #162538;
    color: white;
    border: 1px solid #334155;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.zona-filtros-linea[b-oiuqokqqck] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
}

/* ==========================================================
   RESUMEN POR AGENTE
   ========================================================== */

.resumen-agente[b-oiuqokqqck] {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    padding: 10px 16px;
    margin-bottom: 14px;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    font-size: 0.98rem;
    font-weight: 500;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    font-family: 'Segoe UI', sans-serif;
}

/* ==========================================================
   BOTONES SUPERIORES
   ========================================================== */

.btn-exportar[b-oiuqokqqck],
.btn-aplicar[b-oiuqokqqck] {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.btn-exportar[b-oiuqokqqck] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    display: flex;
    align-items: center;
}

    .btn-exportar:hover[b-oiuqokqqck] {
        background: linear-gradient(135deg, #15803d, #166534);
        transform: translateY(-1px);
    }

.btn-aplicar[b-oiuqokqqck] {
    flex-shrink: 0;
    min-width: 120px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    white-space: nowrap;
    height: 38px;
}

    .btn-aplicar:hover[b-oiuqokqqck] {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        transform: translateY(-1px);
    }

.agregar-filtro[b-oiuqokqqck] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.acciones-filtros[b-oiuqokqqck] {
    display: flex;
    gap: 10px;
}

/* ==========================================================
   TABLA DE MOVIMIENTOS
   ========================================================== */

.tabla-estilo[b-oiuqokqqck] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    margin-top: 15px;
    background-color: rgb(15, 30, 50);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

    .tabla-estilo th[b-oiuqokqqck] {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        color: white;
        padding: 11px 10px;
        text-align: center;
        font-weight: 700;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .tabla-estilo td[b-oiuqokqqck] {
        padding: 10px;
        color: white;
        text-align: center;
        background-color: rgb(15, 30, 50);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        position: relative;
    }

    /* una sola fila por registro */
    .tabla-estilo th[b-oiuqokqqck],
    .tabla-estilo td[b-oiuqokqqck] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Observaciones */
        .tabla-estilo th:nth-child(8)[b-oiuqokqqck],
        .tabla-estilo td:nth-child(8)[b-oiuqokqqck] {
            white-space: normal;
            text-align: left;
            max-width: 250px;
            line-height: 1.35;
        }

@media (max-width: 900px) {
    .tabla-estilo th:nth-child(8)[b-oiuqokqqck],
    .tabla-estilo td:nth-child(8)[b-oiuqokqqck] {
        max-width: 180px;
    }
}

/* ==========================================================
   HOVER ELEGANTE POR PERÍODO
   ========================================================== */

/* hover base (cuando no hay color de período) */
.tabla-estilo tbody tr:hover td[b-oiuqokqqck] {
    background-color: rgba(51, 65, 85, 0.45);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* hover VERDE */
.fondo-verde:hover td[b-oiuqokqqck] {
    background-color: rgba(34, 197, 94, 0.12) !important;
}

/* hover AMARILLO */
.fondo-amarillo:hover td[b-oiuqokqqck] {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

/* hover ROJO */
.fondo-rojo:hover td[b-oiuqokqqck] {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

/* mantener color del texto del período */
.fondo-verde:hover td.col-periodo[b-oiuqokqqck] {
    color: #86efac !important;
}

.fondo-amarillo:hover td.col-periodo[b-oiuqokqqck] {
    color: #fcd34d !important;
}

.fondo-rojo:hover td.col-periodo[b-oiuqokqqck] {
    color: #fca5a5 !important;
}

.tabla-estilo tr.fila-activa td[b-oiuqokqqck] {
    background-color: #334155 !important;
    color: #fff !important;
    font-weight: 700;
}

.tabla-estilo tr.fila-eliminando td[b-oiuqokqqck] {
    background-color: #5b1f1f !important;
    color: #fff !important;
    font-weight: 700;
}

/* ==========================================================
   PERÍODO: BARRITA IZQUIERDA + CELDA PERIODO EN COLOR
   ========================================================== */

/* fondo neutro */
.fondo-verde td[b-oiuqokqqck],
.fondo-amarillo td[b-oiuqokqqck],
.fondo-rojo td[b-oiuqokqqck] {
    background-color: rgb(15, 30, 50) !important;
    color: white !important;
}

    /* barrita al inicio de la fila */
    .fondo-verde td:first-child[b-oiuqokqqck] {
        box-shadow: inset 4px 0 0 #22c55e;
    }

    .fondo-amarillo td:first-child[b-oiuqokqqck] {
        box-shadow: inset 4px 0 0 #f59e0b;
    }

    .fondo-rojo td:first-child[b-oiuqokqqck] {
        box-shadow: inset 4px 0 0 #ef4444;
    }

    /* SOLO la celda marcada como periodo */
    .fondo-verde td.col-periodo[b-oiuqokqqck] {
        color: #86efac !important;
        font-weight: 700;
    }

    .fondo-amarillo td.col-periodo[b-oiuqokqqck] {
        color: #fcd34d !important;
        font-weight: 700;
    }

    .fondo-rojo td.col-periodo[b-oiuqokqqck] {
        color: #fca5a5 !important;
        font-weight: 700;
    }

/* mantener hover sin romper color del periodo */
.fondo-verde:hover td.col-periodo[b-oiuqokqqck] {
    color: #86efac !important;
}

.fondo-amarillo:hover td.col-periodo[b-oiuqokqqck] {
    color: #fcd34d !important;
}

.fondo-rojo:hover td.col-periodo[b-oiuqokqqck] {
    color: #fca5a5 !important;
}

/* ==========================================================
   HORAS EXTRAS 100%
   ========================================================== */

.fila-porcentaje-100 td[b-oiuqokqqck] {
    font-weight: 700;
    font-style: italic;
    text-shadow: none;
    position: relative;
}

    .fila-porcentaje-100 td:nth-child(6)[b-oiuqokqqck]::after {
        content: " ✓";
        color: #22c55e;
        font-weight: 700;
        margin-left: 4px;
    }

/* ==========================================================
   BOTONES DE ACCIÓN
   ========================================================== */

.btn-icono[b-oiuqokqqck] {
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    margin: 0 3px;
}

    .btn-icono.editar[b-oiuqokqqck] {
        background-color: #facc15;
        color: #1f2937;
    }

        .btn-icono.editar:hover[b-oiuqokqqck] {
            background-color: #eab308;
        }

    .btn-icono.eliminar[b-oiuqokqqck] {
        background-color: #dc2626;
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.08);
    }

        .btn-icono.eliminar:hover[b-oiuqokqqck] {
            background-color: #b91c1c;
            transform: scale(1.04);
        }

    .btn-icono.excel[b-oiuqokqqck] {
        background-color: #dcfce7;
        color: #166534;
        border: 1px solid #86efac;
    }

        .btn-icono.excel:hover[b-oiuqokqqck] {
            background-color: #bbf7d0;
            transform: scale(1.04);
        }

    .btn-icono.clip[b-oiuqokqqck] {
        background-color: #475569;
        color: #e2e8f0;
    }

        .btn-icono.clip:hover[b-oiuqokqqck] {
            background-color: #64748b;
            color: #ffffff;
        }

/* ==========================================================
   DESHABILITADOS
   ========================================================== */

button.btn-icono:disabled[b-oiuqokqqck] {
    background-color: #374151;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.65;
    border: 1px solid rgba(255,255,255,0.06);
}

    button.btn-icono:disabled:hover[b-oiuqokqqck] {
        background-color: #374151;
        color: #9ca3af;
    }


/* ==========================================================
   BADGES DE ESTADO
   ========================================================== */

.badge-estado[b-oiuqokqqck] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.35px;
    line-height: 1;
    text-transform: uppercase;
}

.badge-pendiente[b-oiuqokqqck] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.badge-aprobada[b-oiuqokqqck] {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.45);
}

.badge-rechazada[b-oiuqokqqck] {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.45);
}
/* /Components/Pages/Notificaciones.razor.rz.scp.css */

/* === BLOQUES SEPARADOS === */
.bloque-notificacion[b-740vg3ophg] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* === TÍTULOS === */
.pagina-notificaciones[b-740vg3ophg] {
    padding: 20px;
}

    .pagina-notificaciones h2[b-740vg3ophg] {
        font-size: 28px;
        color: #0d6efd;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pagina-notificaciones h4[b-740vg3ophg] {
        margin-bottom: 15px;
        font-size: 18px;
        color: #c0d4f7; /* azul claro suave */
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        text-shadow: 1px 1px 2px #00000040;
    }

/* === TABLAS OSCURAS UNIFICADAS === */
.tabla-notificaciones[b-740vg3ophg] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(15, 30, 50);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

    .tabla-notificaciones th[b-740vg3ophg] {
        background-color: #0d6efd;
        color: white;
        padding: 10px;
        text-align: center;
        font-weight: bold;
    }

    .tabla-notificaciones td[b-740vg3ophg] {
        padding: 10px;
        text-align: center;
        color: white;
        background-color: rgb(15, 30, 50);
        border-bottom: 1px solid #ffffff22;
    }

    /* Zebra */
    .tabla-notificaciones tr:nth-child(even) td[b-740vg3ophg] {
        background-color: #1e3550;
    }

    /* Hover */
    .tabla-notificaciones tr:not(.fondo-verde):not(.fondo-amarillo):not(.fondo-rojo):hover td[b-740vg3ophg] {
        background-color: rgba(255, 255, 255, 0.05);
        cursor: pointer;
    }

/* === BOTONES DE ACCIÓN === */
.btn-notificacion[b-740vg3ophg] {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

    .btn-notificacion:hover[b-740vg3ophg] {
        transform: scale(1.05);
    }

.btn-cerrar[b-740vg3ophg] {
    background-color: crimson;
    color: white;
}

    .btn-cerrar:hover[b-740vg3ophg] {
        background-color: #a80000;
    }

.btn-cerrar-multiples[b-740vg3ophg] {
    background-color: #dc3545;
    color: white;
    margin-bottom: 10px;
}

.btn-autorizar[b-740vg3ophg] {
    background-color: #28a745;
    color: white;
    margin-right: 10px;
}

.btn-rechazar[b-740vg3ophg] {
    background-color: #ffc107;
    color: black;
}

/* Checkbox */
input[type="checkbox"][b-740vg3ophg] {
    width: 18px;
    height: 18px;
    accent-color: #0d6efd;
    cursor: pointer;
}

/* Íconos en botones */
.btn-notificacion i[b-740vg3ophg] {
    margin-right: 5px;
}
/* Fondo semitransparente que cubre toda la pantalla */
.loading-overlay[b-740vg3ophg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* asegurarse que esté arriba de todo */
    flex-direction: column;
}

/* Spinner circular */
.spinner[b-740vg3ophg] {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin-b-740vg3ophg 1s linear infinite;
}

/* Animación del spinner */
@keyframes spin-b-740vg3ophg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Texto debajo del spinner */
.loading-text[b-740vg3ophg] {
    margin-top: 15px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

.fila-nuevo[b-740vg3ophg] {
    background-color: rgba(255, 230, 200, 0.25); /* suave naranja */
}

.badge-nuevo[b-740vg3ophg] {
    background: #ff5722;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

.badge-vacio[b-740vg3ophg] {
    color: #888;
    font-size: 12px;
}
/* /Components/Pages/OlvideClave.razor.rz.scp.css */
/* =========================================================
   RECUPERACIÓN DE CONTRASEÑA
   Alineado visualmente con Login ARZ RH
   ========================================================= */

.olvide-wrapper[b-gvws6s2i9m],
.olvide-wrapper *[b-gvws6s2i9m] {
    box-sizing: border-box;
}

.olvide-wrapper[b-gvws6s2i9m] {
    --olvide-bg-1: #07111f;
    --olvide-bg-2: #0f172a;
    --olvide-bg-3: #10233d;
    --olvide-primary: #0d6efd;
    --olvide-primary-hover: #0b5ed7;
    --olvide-text: #f8fafc;
    --olvide-muted: #94a3b8;
    --olvide-label: #cbd5e1;
    --olvide-input-border: #d7deea;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: radial-gradient( circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 30% ), radial-gradient( circle at 88% 86%, rgba(13, 110, 253, 0.16), transparent 34% ), linear-gradient( 135deg, var(--olvide-bg-1) 0%, var(--olvide-bg-2) 48%, var(--olvide-bg-3) 100% );
}


    /* =========================================================
   ELEMENTOS DECORATIVOS DEL FONDO
   ========================================================= */

    .olvide-wrapper[b-gvws6s2i9m]::before {
        content: "";
        position: absolute;
        right: -145px;
        bottom: -170px;
        width: 540px;
        height: 540px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.95;
        background: radial-gradient( circle at 56% 48%, rgba(66, 133, 244, 0.45) 0 72px, transparent 74px ), radial-gradient( circle at 35% 68%, rgba(52, 168, 83, 0.36) 0 58px, transparent 60px ), radial-gradient( circle at 72% 72%, rgba(251, 188, 5, 0.35) 0 50px, transparent 52px ), radial-gradient( circle at 42% 36%, rgba(234, 67, 53, 0.31) 0 44px, transparent 46px ), radial-gradient( circle at 82% 42%, rgba(56, 189, 248, 0.30) 0 40px, transparent 42px );
        animation: olvideBubbles-b-gvws6s2i9m 24s ease-in-out infinite alternate;
    }

    .olvide-wrapper[b-gvws6s2i9m]::after {
        content: "";
        position: absolute;
        left: -190px;
        top: -190px;
        width: 470px;
        height: 470px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.58;
        background: radial-gradient( circle at center, rgba(34, 197, 94, 0.22), transparent 64% ), radial-gradient( circle at 62% 42%, rgba(56, 189, 248, 0.20), transparent 48% );
        filter: blur(2px);
    }

@keyframes olvideBubbles-b-gvws6s2i9m {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-14px, -10px, 0) scale(1.035);
    }
}


/* =========================================================
   CARD
   ========================================================= */

.olvide-container[b-gvws6s2i9m] {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 2.75rem 2.55rem 2.3rem;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.74) );
    border: 1px solid rgba(125, 211, 252, 0.20);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .olvide-container[b-gvws6s2i9m]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, #4285f4, #34a853, #fbbc05, #ea4335 );
        box-shadow: 0 8px 22px rgba(13, 110, 253, 0.22);
    }

    .olvide-container[b-gvws6s2i9m]::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 20px;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient( circle, rgba(13, 110, 253, 0.11), transparent 68% );
    }

@media (hover: hover) {

    .olvide-container:hover[b-gvws6s2i9m] {
        transform: translateY(-3px);
        border-color: rgba(13, 110, 253, 0.28);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}


/* =========================================================
   ICONO SUPERIOR
   ========================================================= */

.olvide-icon[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    margin: 0 auto 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #60a5fa;
    font-size: 22px;
    background: linear-gradient( 145deg, rgba(13, 110, 253, 0.18), rgba(56, 189, 248, 0.08) );
    border: 1px solid rgba(96, 165, 250, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 9px 25px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.olvide-container h1[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--olvide-text);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;
}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.olvide-subtitulo[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    max-width: 345px;
    margin: 0.85rem auto 2rem;
    color: #aebdd0;
    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   CAMPO DNI
   ========================================================= */

.olvide-field[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.15rem;
    text-align: left;
}

    .olvide-field label[b-gvws6s2i9m] {
        display: block;
        margin-bottom: 7px;
        color: var(--olvide-label);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.1px;
    }

.olvide-input-wrapper[b-gvws6s2i9m] {
    position: relative;
    display: flex;
    align-items: center;
}

.olvide-input-icon[b-gvws6s2i9m] {
    position: absolute;
    left: 15px;
    z-index: 2;
    color: #64748b;
    font-size: 15px;
    pointer-events: none;
}

.olvide-input[b-gvws6s2i9m] {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px 13px 43px;
    border-radius: 14px;
    border: 1px solid var(--olvide-input-border);
    outline: none;
    background: linear-gradient( 180deg, #ffffff, #f8fafc );
    color: #0f172a;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

    .olvide-input[b-gvws6s2i9m]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

    .olvide-input:hover:not(:disabled)[b-gvws6s2i9m] {
        border-color: #b8c3d6;
    }

    .olvide-input:focus[b-gvws6s2i9m] {
        border-color: var(--olvide-primary);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.13), 0 8px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

        .olvide-input:focus + *[b-gvws6s2i9m] {
            color: var(--olvide-primary);
        }

    .olvide-input:disabled[b-gvws6s2i9m] {
        opacity: 0.72;
        cursor: not-allowed;
    }

.olvide-field-help[b-gvws6s2i9m] {
    margin-top: 7px;
    padding-left: 2px;
    color: #7f91a8;
    font-size: 12px;
    line-height: 1.35;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.btn-olvide[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 50px;
    margin-top: 0.35rem;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: var(--olvide-primary);
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-olvide-content[b-gvws6s2i9m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.btn-olvide:hover:not(:disabled)[b-gvws6s2i9m] {
    background: var(--olvide-primary-hover);
    border-color: rgba(147, 197, 253, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(13, 110, 253, 0.28);
}

.btn-olvide:active:not(:disabled)[b-gvws6s2i9m] {
    transform: translateY(0);
    background: #0a58ca;
    box-shadow: 0 7px 16px rgba(13, 110, 253, 0.22);
}

.btn-olvide:focus-visible[b-gvws6s2i9m] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18), 0 10px 22px rgba(13, 110, 253, 0.22);
}

.btn-olvide:disabled[b-gvws6s2i9m] {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.alert-olvide[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    padding: 12px 13px;
    border-radius: 13px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid transparent;
}

.alert-olvide-icon[b-gvws6s2i9m] {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 15px;
}

.alert-olvide-text[b-gvws6s2i9m] {
    flex: 1;
}


/* Mensaje neutro deliberadamente.
   No confirma si el DNI existe. */

.alert-olvide.info[b-gvws6s2i9m] {
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.20);
}

.alert-olvide.warn[b-gvws6s2i9m] {
    color: #fde68a;
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(245, 158, 11, 0.20);
}

.alert-olvide.error[b-gvws6s2i9m] {
    color: #fecaca;
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(248, 113, 113, 0.20);
}


/* =========================================================
   VOLVER AL LOGIN
   ========================================================= */

.volver-login-olvide[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    margin-top: 1.65rem;
    text-align: center;
}

    .volver-login-olvide a[b-gvws6s2i9m] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #60a5fa;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

        .volver-login-olvide a:hover[b-gvws6s2i9m] {
            color: #93c5fd;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }


/* =========================================================
   MENSAJE DE SEGURIDAD
   ========================================================= */

.olvide-seguridad[b-gvws6s2i9m] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    color: #73859c;
    font-size: 11.5px;
    line-height: 1.4;
}

    .olvide-seguridad i[b-gvws6s2i9m] {
        color: #64748b;
        font-size: 12px;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {

    .olvide-wrapper[b-gvws6s2i9m]::before {
        right: -230px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        opacity: 0.70;
    }

    .olvide-wrapper[b-gvws6s2i9m]::after {
        left: -260px;
        top: -260px;
        opacity: 0.42;
    }
}


@media (max-width: 480px) {

    .olvide-wrapper[b-gvws6s2i9m] {
        padding: max(0.85rem, env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
    }

    .olvide-container[b-gvws6s2i9m] {
        max-width: 100%;
        padding: 2.2rem 1.45rem 1.9rem;
        border-radius: 22px;
    }

    .olvide-icon[b-gvws6s2i9m] {
        width: 54px;
        height: 54px;
        margin-bottom: 1rem;
        border-radius: 16px;
        font-size: 20px;
    }

    .olvide-container h1[b-gvws6s2i9m] {
        font-size: 23px;
    }

    .olvide-subtitulo[b-gvws6s2i9m] {
        margin-bottom: 1.65rem;
        font-size: 13.5px;
    }

    /*
       16px es intencional:
       evita el zoom automático de Safari/iPhone
       al enfocar el input.
    */
    .olvide-input[b-gvws6s2i9m] {
        min-height: 49px;
        font-size: 16px;
    }

    .btn-olvide[b-gvws6s2i9m] {
        min-height: 49px;
    }

    .olvide-seguridad[b-gvws6s2i9m] {
        font-size: 11px;
    }
}


@media (max-width: 360px) {

    .olvide-container[b-gvws6s2i9m] {
        padding: 2rem 1.15rem 1.75rem;
    }

        .olvide-container h1[b-gvws6s2i9m] {
            font-size: 21px;
        }

    .olvide-subtitulo[b-gvws6s2i9m] {
        font-size: 13px;
    }
}


/*
   Teléfonos en horizontal o pantallas
   con poca altura: evitamos que la card
   quede cortada.
*/

@media (max-height: 650px) {

    .olvide-wrapper[b-gvws6s2i9m] {
        align-items: flex-start;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .olvide-container[b-gvws6s2i9m] {
        margin: auto 0;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .olvide-wrapper[b-gvws6s2i9m]::before {
        animation: none !important;
    }

    .olvide-container[b-gvws6s2i9m],
    .olvide-input[b-gvws6s2i9m],
    .btn-olvide[b-gvws6s2i9m],
    .volver-login-olvide a[b-gvws6s2i9m] {
        transition: none !important;
    }
}
/* /Components/Pages/Perfil.razor.rz.scp.css */
.perfil-container[b-0l2yah7i2q] {
    width: 100%;
    max-width: 760px;
    margin: 24px auto 0;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(6px);
    color: #f8fafc;
    box-sizing: border-box;
}

.perfil-header[b-0l2yah7i2q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.perfil-titulo[b-0l2yah7i2q] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.01em;
}

.perfil-subtitulo[b-0l2yah7i2q] {
    margin: 4px 0 0 0;
    font-size: 0.92rem;
    color: #94a3b8;
}

.perfil-badge[b-0l2yah7i2q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.24);
    color: #dbeafe;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.perfil-grid[b-0l2yah7i2q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 22px;
}

.perfil-dato[b-0l2yah7i2q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    font-size: 0.98rem;
}

.perfil-dato-label[b-0l2yah7i2q] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.perfil-dato-valor[b-0l2yah7i2q] {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    word-break: break-word;
}

.bloque-seguridad[b-0l2yah7i2q] {
    margin-top: 6px;
    padding: 18px;
    background: rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
}

.bloque-seguridad-titulo[b-0l2yah7i2q] {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
}

.bloque-seguridad-texto[b-0l2yah7i2q] {
    margin: 0 0 16px 0;
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.45;
}

.form-cambio-clave[b-0l2yah7i2q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 0;
}

    .form-cambio-clave .campo-completo[b-0l2yah7i2q] {
        grid-column: 1 / -1;
    }

    .form-cambio-clave .grupo-input[b-0l2yah7i2q] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form-cambio-clave label[b-0l2yah7i2q] {
        font-size: 0.9rem;
        font-weight: 700;
        color: #dbe4f0;
    }

    .form-cambio-clave input[b-0l2yah7i2q] {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #334155;
        background-color: #0f172a;
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

        .form-cambio-clave input[b-0l2yah7i2q]::placeholder {
            color: #94a3b8;
            opacity: 1;
        }

        .form-cambio-clave input:focus[b-0l2yah7i2q] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
            background-color: #111827;
        }

.acciones-perfil[b-0l2yah7i2q] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.btn-cambiar-clave[b-0l2yah7i2q] {
    min-height: 42px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

    .btn-cambiar-clave:hover[b-0l2yah7i2q] {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    }

    .btn-cambiar-clave:disabled[b-0l2yah7i2q] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.mensaje[b-0l2yah7i2q] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}

.mensaje-exito[b-0l2yah7i2q] {
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #bbf7d0;
}

.mensaje-error[b-0l2yah7i2q] {
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

.mensaje-info[b-0l2yah7i2q] {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: #dbeafe;
}

@media (max-width: 768px) {
    .perfil-container[b-0l2yah7i2q] {
        padding: 16px;
        border-radius: 14px;
    }

    .perfil-header[b-0l2yah7i2q] {
        flex-direction: column;
        align-items: flex-start;
    }

    .perfil-grid[b-0l2yah7i2q],
    .form-cambio-clave[b-0l2yah7i2q] {
        grid-template-columns: 1fr;
    }

    .acciones-perfil[b-0l2yah7i2q] {
        justify-content: stretch;
    }

    .btn-cambiar-clave[b-0l2yah7i2q] {
        width: 100%;
    }
}
/* /Components/Pages/Recibo.razor.rz.scp.css */
/* =======================================================
   CONTENEDOR PRINCIPAL
   ======================================================= */

.recibo-layout[b-8iudqbpzqf] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 20px;
    margin: 20px auto;
    padding: 20px;
    max-width: 1500px;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: white;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
}


/* =======================================================
   SIDEBAR
   ======================================================= */

.recibo-sidebar[b-8iudqbpzqf] {
    background: rgba(15, 30, 50, 0.97);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow-y: auto;
    max-height: 82vh;
    width: 360px;
    box-sizing: border-box;
}

.sidebar-header[b-8iudqbpzqf] {
    position: sticky;
    top: -16px;
    z-index: 2;
    margin: -16px -16px 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(15, 30, 50, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 700;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =======================================================
   MENSAJES VACÍOS / CARGA
   ======================================================= */

.cargando-msg[b-8iudqbpzqf],
.vacio-msg[b-8iudqbpzqf] {
    text-align: center;
    color: #cbd5e1;
    padding: 28px 12px;
    font-size: 13px;
}

    .vacio-msg i[b-8iudqbpzqf] {
        display: block;
        margin-bottom: 10px;
        font-size: 24px;
        color: #64748b;
    }

    .vacio-msg p[b-8iudqbpzqf] {
        margin: 0;
    }

.spinner[b-8iudqbpzqf] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #3b82f6;
    margin: 0 auto 10px;
    animation: spin-b-8iudqbpzqf 0.7s linear infinite;
}


/* =======================================================
   LISTA DE RECIBOS
   ======================================================= */

.recibo-item[b-8iudqbpzqf] {
    background: rgba(20, 35, 55, 0.90);
    border: 1px solid #26384d;
    border-radius: 10px;
    padding: 11px 38px 11px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    min-height: 48px;
    box-sizing: border-box;
}

    .recibo-item:hover:not(.bloqueado)[b-8iudqbpzqf] {
        border-color: #3b82f6;
        transform: translateX(2px);
    }

    .recibo-item.activo[b-8iudqbpzqf] {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.15);
        box-shadow: inset 3px 0 0 #3b82f6;
    }

    .recibo-item.firmado[b-8iudqbpzqf] {
        border-color: rgba(34, 197, 94, 0.55);
        background: rgba(34, 197, 94, 0.08);
    }

    .recibo-item.bloqueado[b-8iudqbpzqf] {
        opacity: 0.46;
        cursor: not-allowed;
    }

    .recibo-item.no-conforme[b-8iudqbpzqf] {
        border-color: rgba(250, 204, 21, 0.65);
        background: rgba(250, 204, 21, 0.08);
    }

    .recibo-item .icono[b-8iudqbpzqf] {
        flex: 0 0 auto;
        margin-right: 10px;
        color: #60a5fa;
        font-size: 18px;
    }

    .recibo-item .info[b-8iudqbpzqf] {
        min-width: 0;
    }

    .recibo-item .detalle[b-8iudqbpzqf] {
        display: block;
        font-size: 13px;
        line-height: 1.35;
        color: #e2e8f0;
        font-weight: 600;
    }


/* =======================================================
   ICONOS DE ESTADO
   ======================================================= */

.icono-estado[b-8iudqbpzqf] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
}

    .icono-estado.firmado[b-8iudqbpzqf] {
        color: #22c55e;
    }

    .icono-estado.pendiente[b-8iudqbpzqf] {
        color: #60a5fa;
    }

    .icono-estado.bloqueado[b-8iudqbpzqf] {
        color: #64748b;
    }

    .icono-estado.no-conforme[b-8iudqbpzqf] {
        color: #facc15;
    }


/* =======================================================
   PANEL DERECHO
   ======================================================= */

.recibo-contenido[b-8iudqbpzqf] {
    background: rgba(15, 30, 50, 0.97);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    min-height: 78vh;
    min-width: 0;
    overflow: hidden;
}


/* =======================================================
   FEEDBACK DE OPERACIONES
   ======================================================= */

.feedback-recibo[b-8iudqbpzqf] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 12px 14px 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.35;
    animation: feedbackAparecer-b-8iudqbpzqf 0.18s ease-out;
    box-sizing: border-box;
}

.feedback-icono[b-8iudqbpzqf] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
}

.feedback-texto[b-8iudqbpzqf] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .feedback-texto strong[b-8iudqbpzqf] {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
    }

    .feedback-texto span[b-8iudqbpzqf] {
        display: block;
        font-size: 12.5px;
        line-height: 1.4;
    }

.feedback-cerrar[b-8iudqbpzqf] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    opacity: 0.65;
}

    .feedback-cerrar:hover[b-8iudqbpzqf] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.08);
    }


/* ÉXITO */

.feedback-exito[b-8iudqbpzqf] {
    color: #dcfce7;
    background: rgba(22, 101, 52, 0.24);
    border-color: rgba(34, 197, 94, 0.34);
}

    .feedback-exito .feedback-icono[b-8iudqbpzqf] {
        color: #4ade80;
        background: rgba(34, 197, 94, 0.12);
    }


/* ERROR */

.feedback-error[b-8iudqbpzqf] {
    color: #fee2e2;
    background: rgba(127, 29, 29, 0.26);
    border-color: rgba(248, 113, 113, 0.38);
}

    .feedback-error .feedback-icono[b-8iudqbpzqf] {
        color: #f87171;
        background: rgba(239, 68, 68, 0.12);
    }


/* ANIMACIÓN */

@keyframes feedbackAparecer-b-8iudqbpzqf {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* MOBILE */

@media (max-width: 576px) {

    .feedback-recibo[b-8iudqbpzqf] {
        margin: 8px 8px 0;
        padding: 10px;
        gap: 9px;
    }

    .feedback-icono[b-8iudqbpzqf] {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .feedback-texto strong[b-8iudqbpzqf],
    .feedback-texto span[b-8iudqbpzqf] {
        font-size: 12px;
    }

    .feedback-cerrar[b-8iudqbpzqf] {
        width: 28px;
        height: 28px;
    }
}

/* =======================================================
   TOOLBAR
   ======================================================= */

.recibo-toolbar[b-8iudqbpzqf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
    padding: 14px 16px;
    background: linear-gradient( 180deg, rgba(26, 48, 76, 0.98), rgba(17, 35, 57, 0.98) );
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: white;
    box-sizing: border-box;
}

.toolbar-info[b-8iudqbpzqf] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.toolbar-kicker[b-8iudqbpzqf] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.titulo-doc[b-8iudqbpzqf] {
    display: block;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-botones[b-8iudqbpzqf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}


/* =======================================================
   BOTONES
   ======================================================= */

.btn-secundario[b-8iudqbpzqf],
.btn-firmar[b-8iudqbpzqf] {
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    color: white;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

    .btn-secundario i[b-8iudqbpzqf],
    .btn-firmar i[b-8iudqbpzqf] {
        font-size: 13px;
    }


/* Descargar */

.btn-descargar[b-8iudqbpzqf] {
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(56, 189, 248, 0.38);
    color: #e0f2fe;
}

    .btn-descargar:hover:not(:disabled)[b-8iudqbpzqf] {
        background: rgba(14, 165, 233, 0.25);
        border-color: rgba(56, 189, 248, 0.70);
        transform: translateY(-1px);
    }


/* No conforme */

.btn-no-conforme[b-8iudqbpzqf] {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fee2e2;
}

    .btn-no-conforme:hover:not(:disabled)[b-8iudqbpzqf] {
        background: rgba(220, 38, 38, 0.26);
        border-color: rgba(248, 113, 113, 0.75);
        transform: translateY(-1px);
    }


/* Conforme */

.btn-firmar[b-8iudqbpzqf] {
    background: #16a34a;
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22);
}

    .btn-firmar:hover:not(:disabled)[b-8iudqbpzqf] {
        background: #15803d;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(22, 163, 74, 0.30);
    }


    /* Disabled */

    .btn-secundario:disabled[b-8iudqbpzqf],
    .btn-firmar:disabled[b-8iudqbpzqf] {
        opacity: 0.38;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


    /* Focus */

    .btn-secundario:focus-visible[b-8iudqbpzqf],
    .btn-firmar:focus-visible[b-8iudqbpzqf],
    .recibo-item:focus-visible[b-8iudqbpzqf] {
        outline: 3px solid rgba(96, 165, 250, 0.40);
        outline-offset: 2px;
    }


/* =======================================================
   VISOR PDF
   ======================================================= */

.pdf-viewer[b-8iudqbpzqf] {
    flex: 1;
    padding: 10px;
    background: #0b1424;
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    min-height: 65vh;
    box-sizing: border-box;
}

    .pdf-viewer iframe[b-8iudqbpzqf] {
        width: 100%;
        height: 100%;
        min-height: 65vh;
        border-radius: 8px;
        background: #111827;
        border: 1px solid #253449;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    }


/* =======================================================
   ESTADOS DEL VISOR
   ======================================================= */

.pdf-cargando[b-8iudqbpzqf],
.pdf-vacio[b-8iudqbpzqf],
.pdf-error[b-8iudqbpzqf] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
}

    .pdf-vacio i[b-8iudqbpzqf],
    .pdf-error i[b-8iudqbpzqf] {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .pdf-vacio p[b-8iudqbpzqf],
    .pdf-error p[b-8iudqbpzqf] {
        margin: 0;
        font-size: 13px;
    }

.pdf-error[b-8iudqbpzqf] {
    color: #fca5a5;
}


/* =======================================================
   OVERLAY LOCAL PDF
   ======================================================= */

.pdf-loading-overlay[b-8iudqbpzqf] {
    position: absolute;
    inset: 10px;
    background: rgba(11, 20, 36, 0.90);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #e5e7eb;
    z-index: 20;
    pointer-events: none;
    border-radius: 8px;
    font-size: 13px;
}

    .pdf-loading-overlay p[b-8iudqbpzqf] {
        margin: 0;
    }

    .pdf-loading-overlay .spinner[b-8iudqbpzqf] {
        width: 32px;
        height: 32px;
        border: 3px solid rgba(255,255,255,0.20);
        border-top-color: #22c55e;
    }


/* =======================================================
   ANIMACIONES
   ======================================================= */

@keyframes spin-b-8iudqbpzqf {
    to {
        transform: rotate(360deg);
    }
}


/* =======================================================
   TABLET / NOTEBOOK CHICO
   ======================================================= */

@media (max-width: 1100px) {

    .recibo-layout[b-8iudqbpzqf] {
        grid-template-columns: 310px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .recibo-sidebar[b-8iudqbpzqf] {
        width: 310px;
    }

    .recibo-toolbar[b-8iudqbpzqf] {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .toolbar-botones[b-8iudqbpzqf] {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =======================================================
   TABLET / MOBILE
   ======================================================= */

@media (max-width: 900px) {

    .recibo-layout[b-8iudqbpzqf] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 10px auto;
        padding: 10px;
    }

    /*
     * Muy importante en celular:
     * la lista NO debe empujar el PDF varios metros hacia abajo.
     */
    .recibo-sidebar[b-8iudqbpzqf] {
        width: 100%;
        max-height: 30dvh;
        min-height: 150px;
    }

    .recibo-contenido[b-8iudqbpzqf] {
        min-height: 68dvh;
    }

    .recibo-toolbar[b-8iudqbpzqf] {
        padding: 12px;
    }

    .toolbar-botones[b-8iudqbpzqf] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

        .toolbar-botones .btn-descargar[b-8iudqbpzqf] {
            grid-column: 1 / -1;
        }

    .btn-secundario[b-8iudqbpzqf],
    .btn-firmar[b-8iudqbpzqf] {
        width: 100%;
    }

    .pdf-viewer[b-8iudqbpzqf],
    .pdf-viewer iframe[b-8iudqbpzqf] {
        min-height: 66dvh;
    }
}


/* =======================================================
   CELULAR
   ======================================================= */

@media (max-width: 576px) {

    .recibo-layout[b-8iudqbpzqf] {
        margin: 0;
        padding: 8px;
        gap: 8px;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .recibo-sidebar[b-8iudqbpzqf] {
        padding: 12px;
        max-height: 28dvh;
        min-height: 140px;
        border-radius: 10px;
    }

    .sidebar-header[b-8iudqbpzqf] {
        top: -12px;
        margin: -12px -12px 10px;
        padding: 12px;
        font-size: 12px;
    }

    .recibo-item[b-8iudqbpzqf] {
        padding: 9px 34px 9px 10px;
        min-height: 44px;
        margin-bottom: 6px;
    }

        .recibo-item .detalle[b-8iudqbpzqf] {
            font-size: 12.5px;
        }

    .recibo-contenido[b-8iudqbpzqf] {
        border-radius: 10px;
    }

    .mensaje-recibo[b-8iudqbpzqf] {
        margin: 10px 10px 0;
        padding: 10px 11px;
    }

    .recibo-toolbar[b-8iudqbpzqf] {
        min-height: auto;
        padding: 12px;
        gap: 12px;
    }

    .toolbar-info[b-8iudqbpzqf] {
        width: 100%;
    }

    .toolbar-kicker[b-8iudqbpzqf] {
        font-size: 10px;
    }

    .titulo-doc[b-8iudqbpzqf] {
        font-size: 13px;
        white-space: normal;
    }

    /*
     * Descargar ocupa todo el ancho.
     * Las dos decisiones quedan juntas y visibles.
     */
    .toolbar-botones[b-8iudqbpzqf] {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

        .toolbar-botones .btn-descargar[b-8iudqbpzqf] {
            grid-column: 1 / -1;
        }

    .btn-secundario[b-8iudqbpzqf],
    .btn-firmar[b-8iudqbpzqf] {
        min-height: 44px;
        padding: 9px 8px;
        font-size: 12px;
    }

    .pdf-viewer[b-8iudqbpzqf] {
        padding: 6px;
    }

        .pdf-viewer[b-8iudqbpzqf],
        .pdf-viewer iframe[b-8iudqbpzqf] {
            min-height: 64dvh;
        }

            .pdf-viewer iframe[b-8iudqbpzqf] {
                border-radius: 7px;
            }

    .pdf-loading-overlay[b-8iudqbpzqf] {
        inset: 6px;
        border-radius: 7px;
    }
}


/* =======================================================
   MODAL ABIERTO
   ======================================================= */

.recibo-layout.recibo-modal-abierto .pdf-viewer iframe[b-8iudqbpzqf] {
    visibility: hidden;
}

.recibo-layout.recibo-modal-abierto .pdf-loading-overlay[b-8iudqbpzqf] {
    display: none;
}

.recibo-layout.recibo-modal-abierto .pdf-viewer[b-8iudqbpzqf] {
    background: transparent;
}


/* =======================================================
   ACCESIBILIDAD
   ======================================================= */

@media (prefers-reduced-motion: reduce) {

    .recibo-item[b-8iudqbpzqf],
    .btn-secundario[b-8iudqbpzqf],
    .btn-firmar[b-8iudqbpzqf] {
        transition: none;
    }

    .spinner[b-8iudqbpzqf] {
        animation-duration: 1.2s;
    }
}
/* /Components/Pages/ReporteJornadas.razor.rz.scp.css */
.titulo-reporte[b-21pxhm8mff] {
    color: white;
    margin-bottom: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================= */
/* PANEL FILTROS */
/* ============================= */
.panel-filtros[b-21pxhm8mff] {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    margin-bottom: 26px;
    backdrop-filter: blur(6px);
}

.fila-filtros[b-21pxhm8mff] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: end;
}

/* ============================= */
/* GRUPOS */
/* ============================= */
.grupo-filtro[b-21pxhm8mff] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 1;
}

    .grupo-filtro label[b-21pxhm8mff] {
        color: #cceeff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .grupo-filtro select[b-21pxhm8mff],
    .grupo-filtro input[b-21pxhm8mff] {
        background-color: #1a2b40;
        color: white;
        border: 1px solid #3c5068;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        min-height: 42px;
        transition: all 0.2s ease;
    }

        .grupo-filtro select:focus[b-21pxhm8mff],
        .grupo-filtro input:focus[b-21pxhm8mff] {
            border-color: #0d6efd;
            outline: none;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
        }

        .grupo-filtro input[b-21pxhm8mff]::placeholder {
            color: #b8c7d9;
        }

/* ============================= */
/* AGENTE */
/* ============================= */
.grupo-agente[b-21pxhm8mff] {
    min-width: 340px;
    flex: 2;
}

.contenedor-agente[b-21pxhm8mff] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .contenedor-agente input[b-21pxhm8mff] {
        flex: 1;
    }

/* ============================= */
/* BOTONES BASE */
/* ============================= */
.btn-buscar-agente[b-21pxhm8mff],
.btn-limpiar-agente[b-21pxhm8mff],
.btn-consultar[b-21pxhm8mff],
.btn-exportar[b-21pxhm8mff] {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    min-height: 42px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ============================= */
/* BOTONES INDIVIDUALES */
/* ============================= */
.btn-buscar-agente[b-21pxhm8mff] {
    background-color: #0d6efd;
}

    .btn-buscar-agente:hover[b-21pxhm8mff] {
        background-color: #0b5ed7;
        transform: translateY(-1px);
    }

.btn-limpiar-agente[b-21pxhm8mff] {
    background-color: #dc3545;
    min-width: 42px;
}

    .btn-limpiar-agente:hover[b-21pxhm8mff] {
        background-color: #bb2d3b;
    }

/* CONSULTAR */
.btn-consultar[b-21pxhm8mff] {
    background: linear-gradient(135deg, #198754, #157347);
    padding: 10px 22px;
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.3);
}

    .btn-consultar:hover[b-21pxhm8mff] {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(25, 135, 84, 0.4);
    }

/* EXPORTAR 🔥 */
.btn-exportar[b-21pxhm8mff] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    padding: 10px 22px;
    margin-left: 8px;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

    .btn-exportar:hover[b-21pxhm8mff] {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(13, 110, 253, 0.4);
    }

    /* DESHABILITADOS */
    .btn-buscar-agente:disabled[b-21pxhm8mff],
    .btn-limpiar-agente:disabled[b-21pxhm8mff],
    .btn-consultar:disabled[b-21pxhm8mff],
    .btn-exportar:disabled[b-21pxhm8mff] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ============================= */
/* ACCIONES */
/* ============================= */
.acciones-filtros[b-21pxhm8mff] {
    margin-top: 22px;
    display: flex;
    gap: 12px; /* 👈 esto separa bien Exportar */
    flex-wrap: wrap;
    align-items: center;
}

/* ============================= */
/* RESULTADOS */
/* ============================= */
.panel-resultados[b-21pxhm8mff] {
    width: 100%;
}

.mensaje-cantidad[b-21pxhm8mff] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 10px;
    font-weight: 500;
}

.contenedor-tabla[b-21pxhm8mff] {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
}

/* TABLA */
.tabla-jornadas[b-21pxhm8mff] {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
}

    .tabla-jornadas th[b-21pxhm8mff] {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
        color: white;
        padding: 12px;
        text-align: center;
        font-weight: 600;
        white-space: nowrap;
    }

    .tabla-jornadas td[b-21pxhm8mff] {
        background-color: rgb(15, 30, 50);
        color: #e0e0e0;
        padding: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tabla-jornadas tr:nth-child(even) td[b-21pxhm8mff] {
        background-color: #1e3550;
    }

    .tabla-jornadas tbody tr:hover td[b-21pxhm8mff] {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color 0.2s ease;
    }

/* ============================= */
/* MENSAJES */
/* ============================= */
.sin-resultados[b-21pxhm8mff] {
    background-color: rgba(255, 255, 255, 0.05);
    color: #d9d9d9;
    padding: 16px;
    border-radius: 10px;
    font-style: italic;
}

/* ============================= */
/* OVERLAY */
/* ============================= */
.overlay[b-21pxhm8mff] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width: 900px) {
    .fila-filtros[b-21pxhm8mff] {
        flex-direction: column;
        align-items: stretch;
    }

    .grupo-filtro[b-21pxhm8mff],
    .grupo-agente[b-21pxhm8mff] {
        min-width: 100%;
        flex: unset;
    }

    .contenedor-agente[b-21pxhm8mff] {
        flex-wrap: wrap;
    }

    .acciones-filtros[b-21pxhm8mff] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-buscar-agente[b-21pxhm8mff],
    .btn-limpiar-agente[b-21pxhm8mff],
    .btn-consultar[b-21pxhm8mff],
    .btn-exportar[b-21pxhm8mff] {
        width: 100%;
    }
}
.contenedor-agente[b-21pxhm8mff] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-buscar-agente[b-21pxhm8mff] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 46px;
}

    .btn-buscar-agente:hover:not(:disabled)[b-21pxhm8mff] {
        background: linear-gradient(135deg, #0b5ed7, #084298);
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .btn-buscar-agente:disabled[b-21pxhm8mff] {
        background: linear-gradient(135deg, #adb5bd, #868e96);
        opacity: 0.58;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.input-agente-seleccionado[b-21pxhm8mff] {
    min-width: 260px;
    flex: 1;
}
/* /Components/Pages/ReporteLicencias.razor.rz.scp.css */
/* ==========================================================
   REPORTE LICENCIAS
   CSS limpio / responsive / sin tabla manual
   La tabla, filtros por columna, ordenamiento y menú flotante
   los maneja TablaReporteGenerica.razor.css
   ========================================================== */


/* ==========================================================
   BASE GENERAL
   ========================================================== */

.reporte-licencias[b-3fcm1c8wf0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: #e5edf7;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

button:disabled[b-3fcm1c8wf0],
select:disabled[b-3fcm1c8wf0],
input:disabled[b-3fcm1c8wf0] {
    opacity: 0.55;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   ENCABEZADO
   ========================================================== */

.encabezado-reporte[b-3fcm1c8wf0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 6px;
}

    .encabezado-reporte h2[b-3fcm1c8wf0] {
        margin: 0;
        color: #ffffff;
        font-size: 1.75rem;
        font-weight: 750;
        letter-spacing: -0.02em;
    }

    .encabezado-reporte p[b-3fcm1c8wf0] {
        margin: 6px 0 0 0;
        color: #aab8cc;
        font-size: 0.95rem;
    }

.resumen-filtros[b-3fcm1c8wf0] {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.24);
    color: #bfdbfe;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}


/* ==========================================================
   PANEL DE FILTROS
   ========================================================== */

.panel-filtros-reporte[b-3fcm1c8wf0] {
    background: linear-gradient(135deg, rgba(13, 24, 40, 0.98), rgba(15, 30, 50, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
    width: 100%;
}

.fila-filtros[b-3fcm1c8wf0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    align-items: end;
}

    .fila-filtros:last-child[b-3fcm1c8wf0] {
        margin-bottom: 0;
    }

.fila-agente[b-3fcm1c8wf0] {
    grid-template-columns: minmax(320px, 1.4fr) minmax(320px, 1fr);
    align-items: end;
}

.grupo-filtro[b-3fcm1c8wf0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .grupo-filtro label[b-3fcm1c8wf0] {
        color: #cbd5e1;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

.input-reporte[b-3fcm1c8wf0],
.input-agente[b-3fcm1c8wf0] {
    width: 100%;
    min-height: 42px;
    background: rgba(7, 18, 32, 0.95);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

    .input-reporte:hover[b-3fcm1c8wf0],
    .input-agente:hover[b-3fcm1c8wf0] {
        border-color: rgba(96, 165, 250, 0.55);
    }

    .input-reporte:focus[b-3fcm1c8wf0],
    .input-agente:focus[b-3fcm1c8wf0] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
        background: rgba(10, 25, 44, 1);
    }

    .input-reporte:disabled[b-3fcm1c8wf0],
    .input-agente:disabled[b-3fcm1c8wf0] {
        opacity: 0.62;
        cursor: not-allowed;
    }

    .input-reporte option[b-3fcm1c8wf0] {
        background-color: #0f1e32;
        color: #f8fafc;
    }


/* ==========================================================
   AGENTE
   ========================================================== */

.grupo-agente[b-3fcm1c8wf0] {
    min-width: 0;
}

.contenedor-agente[b-3fcm1c8wf0] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.btn-buscar-agente[b-3fcm1c8wf0],
.btn-limpiar-agente[b-3fcm1c8wf0],
.btn-consultar[b-3fcm1c8wf0],
.btn-secundario[b-3fcm1c8wf0],
.btn-exportar[b-3fcm1c8wf0] {
    min-height: 42px;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
    white-space: nowrap;
}

.btn-buscar-agente[b-3fcm1c8wf0] {
    background: rgba(37, 99, 235, 0.92);
    color: #ffffff;
}

    .btn-buscar-agente:hover[b-3fcm1c8wf0] {
        background: rgba(29, 78, 216, 1);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    }

.btn-limpiar-agente[b-3fcm1c8wf0] {
    width: 42px;
    padding: 0;
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.30);
}

    .btn-limpiar-agente:hover[b-3fcm1c8wf0] {
        background: rgba(239, 68, 68, 0.25);
    }


/* ==========================================================
   ACCIONES DE FILTROS
   ========================================================== */

.acciones-filtros[b-3fcm1c8wf0] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-consultar[b-3fcm1c8wf0] {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
}

    .btn-consultar:hover[b-3fcm1c8wf0] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.28);
    }

.btn-secundario[b-3fcm1c8wf0] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.24);
}

    .btn-secundario:hover[b-3fcm1c8wf0] {
        background: rgba(148, 163, 184, 0.18);
    }

.btn-exportar[b-3fcm1c8wf0] {
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.16);
}

    .btn-exportar:hover[b-3fcm1c8wf0] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(34, 197, 94, 0.22);
    }


/* ==========================================================
   AYUDA / AVISOS
   ========================================================== */

.ayuda-filtros[b-3fcm1c8wf0] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 12px;
    color: #93a4bb;
    font-size: 0.88rem;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
}

    .ayuda-filtros i[b-3fcm1c8wf0] {
        color: #60a5fa;
        margin-top: 2px;
    }

    .ayuda-filtros strong[b-3fcm1c8wf0] {
        color: #bfdbfe;
    }

.mensaje-error-reporte[b-3fcm1c8wf0] {
    margin: 14px 0;
    background: rgba(239, 68, 68, 0.13);
    border: 1px solid rgba(248, 113, 113, 0.34);
    color: #fecaca;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 600;
}


/* ==========================================================
   RESULTADOS
   La tabla está en TablaReporteGenerica.razor.css
   ========================================================== */

.zona-resultados[b-3fcm1c8wf0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.overlay[b-3fcm1c8wf0] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

    .overlay p[b-3fcm1c8wf0] {
        margin-top: 12px;
    }


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {
    .fila-filtros[b-3fcm1c8wf0] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .fila-agente[b-3fcm1c8wf0] {
        grid-template-columns: 1fr;
    }

    .acciones-filtros[b-3fcm1c8wf0] {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .reporte-licencias[b-3fcm1c8wf0] {
        gap: 14px;
    }

    .encabezado-reporte[b-3fcm1c8wf0] {
        flex-direction: column;
        align-items: stretch;
    }

        .encabezado-reporte h2[b-3fcm1c8wf0] {
            font-size: 1.35rem;
        }

        .encabezado-reporte p[b-3fcm1c8wf0] {
            font-size: 0.88rem;
        }

    .resumen-filtros[b-3fcm1c8wf0] {
        width: 100%;
        text-align: center;
    }

    .panel-filtros-reporte[b-3fcm1c8wf0] {
        border-radius: 16px;
        padding: 14px;
    }

    .fila-filtros[b-3fcm1c8wf0] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contenedor-agente[b-3fcm1c8wf0] {
        grid-template-columns: 1fr;
    }

    .btn-limpiar-agente[b-3fcm1c8wf0],
    .btn-consultar[b-3fcm1c8wf0],
    .btn-secundario[b-3fcm1c8wf0],
    .btn-exportar[b-3fcm1c8wf0] {
        width: 100%;
    }

    .acciones-filtros[b-3fcm1c8wf0] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 500px) {
    .reporte-licencias[b-3fcm1c8wf0] {
        min-width: 0;
    }
}
.contenedor-agente[b-3fcm1c8wf0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-agente-seleccionado[b-3fcm1c8wf0] {
    min-width: 260px;
    flex: 1;
}

.btn-buscar-agente[b-3fcm1c8wf0] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 46px;
}

    .btn-buscar-agente:hover:not(:disabled)[b-3fcm1c8wf0] {
        background: linear-gradient(135deg, #0b5ed7, #084298);
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .btn-buscar-agente:disabled[b-3fcm1c8wf0] {
        background: linear-gradient(135deg, #adb5bd, #868e96);
        opacity: 0.58;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* /Components/Pages/ReporteRecibos.razor.rz.scp.css */
/* =========================================================
   REPORTE DE RECIBOS - EMPLEADOR
   ========================================================= */

.reporte-recibos[b-a5jk9goqg7] {
    width: 100%;
    max-width: 100%;
    padding-bottom: 32px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.reporte-header[b-a5jk9goqg7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}


.titulo-reporte[b-a5jk9goqg7] {
    margin: 0;
    color: #ffffff;
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.02em;
}


.subtitulo-reporte[b-a5jk9goqg7] {
    margin: 7px 0 0;
    color: #9eb0c5;
    font-size: 0.95rem;
    line-height: 1.45;
}


/* =========================================================
   PANEL FILTROS
   ========================================================= */

.panel-filtros[b-a5jk9goqg7] {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028) );
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}


.panel-titulo[b-a5jk9goqg7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}


    .panel-titulo h3[b-a5jk9goqg7] {
        margin: 0;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
    }


    .panel-titulo p[b-a5jk9goqg7] {
        margin: 5px 0 0;
        color: #8fa2b9;
        font-size: 0.84rem;
    }


/* =========================================================
   GRID DE FILTROS
   ========================================================= */

.fila-filtros[b-a5jk9goqg7] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}


.grupo-filtro[b-a5jk9goqg7] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.filtro-razon[b-a5jk9goqg7] {
    grid-column: span 6;
}


.filtro-anio[b-a5jk9goqg7],
.filtro-mes[b-a5jk9goqg7] {
    grid-column: span 3;
}


.grupo-filtro label[b-a5jk9goqg7],
.filtro-local label[b-a5jk9goqg7] {
    margin: 0;
    color: #cdd9e8;
    font-size: 0.82rem;
    font-weight: 650;
}


/* =========================================================
   INPUTS
   ========================================================= */

.input-form[b-a5jk9goqg7],
.input-filtro-tabla[b-a5jk9goqg7] {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    outline: none;
    background: #102036;
    color: #f3f7fc;
    font-size: 0.91rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}


.input-form[b-a5jk9goqg7] {
    padding: 0 12px;
}


    .input-form option[b-a5jk9goqg7] {
        background: #102036;
        color: #ffffff;
    }


    .input-form:focus[b-a5jk9goqg7],
    .input-filtro-tabla:focus[b-a5jk9goqg7] {
        border-color: rgba(68, 147, 255, 0.8);
        box-shadow: 0 0 0 3px rgba(68, 147, 255, 0.12);
        background: #12243c;
    }


    .input-form:disabled[b-a5jk9goqg7],
    .input-filtro-tabla:disabled[b-a5jk9goqg7] {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* =========================================================
   ACCIONES PRINCIPALES
   ========================================================= */

.acciones-filtros[b-a5jk9goqg7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.btn-principal[b-a5jk9goqg7],
.btn-secundario[b-a5jk9goqg7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.14s ease, filter 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}


.btn-principal[b-a5jk9goqg7] {
    background: #198754;
    border-color: #249861;
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.18);
}


.btn-secundario[b-a5jk9goqg7] {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.11);
}


.btn-paquete[b-a5jk9goqg7] {
    background: rgba(111, 66, 193, 0.16);
    border-color: rgba(145, 101, 225, 0.3);
}


.btn-principal:hover:not(:disabled)[b-a5jk9goqg7],
.btn-secundario:hover:not(:disabled)[b-a5jk9goqg7] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}


.btn-principal:disabled[b-a5jk9goqg7],
.btn-secundario:disabled[b-a5jk9goqg7] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.btn-icono[b-a5jk9goqg7] {
    font-size: 1rem;
    line-height: 1;
}


/* =========================================================
   RESUMEN / CONTADORES
   ========================================================= */

.resumen-estados[b-a5jk9goqg7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}


.tarjeta-resumen[b-a5jk9goqg7] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 118px;
    padding: 17px 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background: #102239;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}


    .tarjeta-resumen:hover:not(:disabled)[b-a5jk9goqg7] {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    }


    .tarjeta-resumen.activa[b-a5jk9goqg7] {
        border-color: rgba(95, 165, 255, 0.68);
        box-shadow: 0 0 0 2px rgba(70, 145, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.15);
    }


    .tarjeta-resumen:disabled[b-a5jk9goqg7] {
        cursor: not-allowed;
    }


.resumen-etiqueta[b-a5jk9goqg7] {
    color: #cbd7e6;
    font-size: 0.83rem;
    font-weight: 650;
}


.resumen-numero[b-a5jk9goqg7] {
    margin-top: 8px;
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 760;
}


.resumen-detalle[b-a5jk9goqg7] {
    margin-top: 9px;
    color: #8195ad;
    font-size: 0.76rem;
}


.resumen-indicador[b-a5jk9goqg7] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
}


.indicador-pendiente[b-a5jk9goqg7] {
    background: #f0bf45;
    box-shadow: 0 0 0 5px rgba(240, 191, 69, 0.1);
}


.indicador-conforme[b-a5jk9goqg7] {
    background: #42bf7b;
    box-shadow: 0 0 0 5px rgba(66, 191, 123, 0.1);
}


.indicador-no-conforme[b-a5jk9goqg7] {
    background: #ef6673;
    box-shadow: 0 0 0 5px rgba(239, 102, 115, 0.1);
}


.tarjeta-pendiente.activa[b-a5jk9goqg7] {
    border-color: rgba(240, 191, 69, 0.55);
}


.tarjeta-conforme.activa[b-a5jk9goqg7] {
    border-color: rgba(66, 191, 123, 0.55);
}


.tarjeta-no-conforme.activa[b-a5jk9goqg7] {
    border-color: rgba(239, 102, 115, 0.58);
}


/* =========================================================
   PANEL RESULTADOS
   ========================================================= */

.panel-resultados[b-a5jk9goqg7] {
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;
    background: rgba(12, 27, 46, 0.68);
}


/* =========================================================
   FILTROS DE RESULTADOS
   ========================================================= */

.barra-filtros-resultados[b-a5jk9goqg7] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px);
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
}


.filtro-local[b-a5jk9goqg7] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.input-busqueda-contenedor[b-a5jk9goqg7] {
    position: relative;
    width: 100%;
}


.input-filtro-tabla[b-a5jk9goqg7] {
    padding: 0 42px 0 39px;
}


    .input-filtro-tabla[b-a5jk9goqg7]::placeholder {
        color: #6f839b;
    }


.input-busqueda-icono[b-a5jk9goqg7] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8296ae;
    pointer-events: none;
}


.btn-limpiar-filtro-tabla[b-a5jk9goqg7] {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #95a8be;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}


    .btn-limpiar-filtro-tabla:hover:not(:disabled)[b-a5jk9goqg7] {
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;
    }


.input-estado[b-a5jk9goqg7] {
    height: 44px;
}


/* =========================================================
   CABECERA RESULTADOS
   ========================================================= */

.cabecera-resultados[b-a5jk9goqg7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    min-height: 38px;
    margin-bottom: 11px;
    color: #b9c8d9;
    font-size: 0.85rem;
}


    .cabecera-resultados strong[b-a5jk9goqg7] {
        color: #ffffff;
        font-size: 0.92rem;
    }


.cantidad-total[b-a5jk9goqg7] {
    margin-left: 5px;
    color: #71859c;
}


.btn-limpiar-todos[b-a5jk9goqg7] {
    border: none;
    background: transparent;
    color: #72b5ff;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}


    .btn-limpiar-todos:hover:not(:disabled)[b-a5jk9goqg7] {
        color: #a9d3ff;
        text-decoration: underline;
    }


/* =========================================================
   TABLA
   ========================================================= */

.contenedor-tabla[b-a5jk9goqg7] {
    width: 100%;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    background: #102038;
}


.tabla-recibos[b-a5jk9goqg7] {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}


    .tabla-recibos thead th[b-a5jk9goqg7] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: #17304f;
        color: #cbd9e8;
        font-size: 0.76rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.035em;
        white-space: nowrap;
    }


    .tabla-recibos tbody td[b-a5jk9goqg7] {
        padding: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        background: #102239;
        color: #dde6f1;
        font-size: 0.86rem;
        vertical-align: middle;
        text-align: center;
    }


    .tabla-recibos tbody tr:last-child td[b-a5jk9goqg7] {
        border-bottom: none;
    }


    .tabla-recibos tbody tr:nth-child(even) td[b-a5jk9goqg7] {
        background: #132741;
    }


    .tabla-recibos tbody tr:hover td[b-a5jk9goqg7] {
        background: #19314e;
    }


.celda-razon[b-a5jk9goqg7],
.celda-empleado[b-a5jk9goqg7] {
    text-align: left !important;
}


.celda-razon[b-a5jk9goqg7] {
    max-width: 240px;
}


.celda-empleado[b-a5jk9goqg7] {
    min-width: 190px;
    max-width: 270px;
}


.empleado-info[b-a5jk9goqg7] {
    display: flex;
    flex-direction: column;
}


.empleado-nombre[b-a5jk9goqg7] {
    overflow: hidden;
    color: #f5f8fc;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.celda-periodo[b-a5jk9goqg7] {
    min-width: 120px;
    color: #b8d7fa !important;
    font-weight: 600;
}


.celda-fecha[b-a5jk9goqg7] {
    min-width: 145px;
    white-space: nowrap;
}


.sin-fecha[b-a5jk9goqg7] {
    color: #73879d;
}


.dato-monospace[b-a5jk9goqg7] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.82rem;
    color: #c9d9ea;
}


.tipo-recibo[b-a5jk9goqg7] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(88, 148, 220, 0.1);
    color: #acd1fb;
    font-size: 0.77rem;
    font-weight: 650;
}


/* =========================================================
   ESTADO DEL EMPLEADO
   ========================================================= */

.estado[b-a5jk9goqg7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 112px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}


.estado-punto[b-a5jk9goqg7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}


.estado-conforme[b-a5jk9goqg7] {
    border-color: rgba(63, 190, 120, 0.22);
    background: rgba(34, 139, 84, 0.14);
    color: #82dda8;
}


.estado-no-conforme[b-a5jk9goqg7] {
    border-color: rgba(239, 98, 111, 0.24);
    background: rgba(201, 53, 68, 0.14);
    color: #ff9ca6;
}


.estado-pendiente[b-a5jk9goqg7] {
    border-color: rgba(240, 191, 69, 0.22);
    background: rgba(202, 151, 32, 0.13);
    color: #f5d375;
}


/* =========================================================
   DESCARGA
   ========================================================= */

.btn-descargar[b-a5jk9goqg7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(84, 155, 238, 0.24);
    border-radius: 8px;
    background: rgba(49, 125, 211, 0.1);
    color: #8bc7ff;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}


    .btn-descargar:hover:not(:disabled)[b-a5jk9goqg7] {
        border-color: rgba(104, 173, 252, 0.42);
        background: rgba(49, 125, 211, 0.18);
        color: #c4e4ff;
    }


    .btn-descargar:disabled[b-a5jk9goqg7] {
        opacity: 0.45;
        cursor: not-allowed;
    }


/* =========================================================
   MENSAJE ERROR
   ========================================================= */

.mensaje-error[b-a5jk9goqg7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(239, 91, 105, 0.2);
    border-left: 3px solid #e45a67;
    border-radius: 11px;
    background: rgba(190, 47, 61, 0.1);
    color: #f1c3c8;
    font-size: 0.88rem;
}


.mensaje-error-icono[b-a5jk9goqg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(228, 90, 103, 0.17);
    color: #ff939d;
    font-weight: 800;
}


/* =========================================================
   VACÍO / ESTADO INICIAL
   ========================================================= */

.sin-resultados[b-a5jk9goqg7],
.estado-inicial[b-a5jk9goqg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 140px;
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.022);
    color: #a7b8ca;
    text-align: left;
}


.sin-resultados-general[b-a5jk9goqg7],
.estado-inicial[b-a5jk9goqg7] {
    margin-top: 6px;
}


    .sin-resultados strong[b-a5jk9goqg7],
    .estado-inicial strong[b-a5jk9goqg7] {
        display: block;
        margin-bottom: 4px;
        color: #dce6f1;
        font-size: 0.94rem;
    }


    .sin-resultados p[b-a5jk9goqg7],
    .estado-inicial p[b-a5jk9goqg7] {
        margin: 0;
        color: #7f93aa;
        font-size: 0.84rem;
    }


.sin-resultados-icono[b-a5jk9goqg7],
.estado-inicial-icono[b-a5jk9goqg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(73, 140, 218, 0.1);
    color: #7fbafa;
    font-size: 1.2rem;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.overlay[b-a5jk9goqg7] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(4, 11, 20, 0.7);
    backdrop-filter: blur(3px);
    color: #ffffff;
}


    .overlay p[b-a5jk9goqg7] {
        margin: 0;
        color: #dce7f3;
        font-size: 0.9rem;
        font-weight: 600;
    }


.loader-reporte[b-a5jk9goqg7] {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: #67aef8;
    border-radius: 50%;
    animation: reporte-spin-b-a5jk9goqg7 0.75s linear infinite;
}


@keyframes reporte-spin-b-a5jk9goqg7 {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .resumen-estados[b-a5jk9goqg7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .filtro-razon[b-a5jk9goqg7] {
        grid-column: span 6;
    }


    .filtro-anio[b-a5jk9goqg7],
    .filtro-mes[b-a5jk9goqg7] {
        grid-column: span 3;
    }
}


@media (max-width: 900px) {

    .barra-filtros-resultados[b-a5jk9goqg7] {
        grid-template-columns: 1fr;
    }


    .filtro-local-estado[b-a5jk9goqg7] {
        max-width: none;
    }
}


@media (max-width: 768px) {

    .reporte-header[b-a5jk9goqg7] {
        align-items: flex-start;
    }


    .titulo-reporte[b-a5jk9goqg7] {
        font-size: 1.55rem;
    }


    .panel-filtros[b-a5jk9goqg7] {
        padding: 17px;
    }


    .fila-filtros[b-a5jk9goqg7] {
        grid-template-columns: 1fr;
    }


    .filtro-razon[b-a5jk9goqg7],
    .filtro-anio[b-a5jk9goqg7],
    .filtro-mes[b-a5jk9goqg7] {
        grid-column: span 1;
    }


    .acciones-filtros[b-a5jk9goqg7] {
        align-items: stretch;
    }


    .btn-principal[b-a5jk9goqg7],
    .btn-secundario[b-a5jk9goqg7] {
        width: 100%;
    }


    .resumen-estados[b-a5jk9goqg7] {
        grid-template-columns: 1fr 1fr;
    }


    .panel-resultados[b-a5jk9goqg7] {
        padding: 13px;
    }


    .cabecera-resultados[b-a5jk9goqg7] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }


    .tabla-recibos[b-a5jk9goqg7] {
        min-width: 1050px;
    }
}


@media (max-width: 520px) {

    .resumen-estados[b-a5jk9goqg7] {
        grid-template-columns: 1fr;
    }


    .tarjeta-resumen[b-a5jk9goqg7] {
        min-height: 105px;
    }
}
/* /Components/Pages/Reportes.razor.rz.scp.css */
/* ==========================================================
   REPORTE EMPLEADOS / DOTACIÓN
   CSS limpio / responsive / sin tabla manual
   La tabla y filtros por columna los maneja TablaReporteGenerica
   ========================================================== */


/* ==========================================================
   BASE GENERAL
   ========================================================== */

:root[b-4t2riy0nu8] {
    --color-bg-panel: rgba(15, 30, 50, 0.88);
    --color-bg-panel-strong: rgba(13, 24, 40, 0.98);
    --color-bg-input: rgba(7, 18, 32, 0.95);
    --color-border: rgba(148, 163, 184, 0.20);
    --color-border-strong: rgba(148, 163, 184, 0.32);
    --color-text: #e5edf7;
    --color-text-soft: #aab8cc;
    --color-label: #cbd5e1;
    --color-blue: #2563eb;
    --color-green: #22c55e;
    --color-red: #ef4444;
    --radius-panel: 20px;
    --radius-control: 12px;
    --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

*[b-4t2riy0nu8] {
    box-sizing: border-box;
}

h2[b-4t2riy0nu8] {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
}

button:disabled[b-4t2riy0nu8],
select:disabled[b-4t2riy0nu8],
input:disabled[b-4t2riy0nu8] {
    opacity: 0.55;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   CONTENEDOR / ENCABEZADO
   ========================================================== */

.reporte-empleados[b-4t2riy0nu8],
.reporte-dotacion[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.encabezado-reporte[b-4t2riy0nu8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 6px;
}

    .encabezado-reporte h2[b-4t2riy0nu8] {
        color: #ffffff;
        margin: 0 0 5px 0;
        font-size: 1.65rem;
        font-weight: 750;
        letter-spacing: -0.02em;
    }

    .encabezado-reporte p[b-4t2riy0nu8] {
        margin: 0;
        color: #aab8cc;
        font-size: 0.95rem;
    }

.resumen-filtros[b-4t2riy0nu8] {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.24);
    color: #bfdbfe;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 750;
    white-space: nowrap;
}


/* ==========================================================
   BLOQUE 1 - SELECCIÓN DE CAMPOS
   ========================================================== */

.zona-configuracion-reporte[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
}

.panel-columnas[b-4t2riy0nu8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.lista-campos[b-4t2riy0nu8] {
    background: linear-gradient(135deg, rgba(15, 30, 50, 0.82), rgba(13, 24, 40, 0.92));
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    width: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
}

    .lista-campos h4[b-4t2riy0nu8] {
        margin: 0 0 10px 0;
        color: #dbeafe;
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lista-campos:first-child h4[b-4t2riy0nu8]::before {
        content: "＋";
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(96, 165, 250, 0.16);
        color: #93c5fd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .lista-campos:nth-child(2) h4[b-4t2riy0nu8]::before {
        content: "✓";
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(34, 197, 94, 0.12);
        color: #86efac;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 800;
    }

.lista-campos-contenido[b-4t2riy0nu8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 8px;
    align-content: start;
}

.item-campo[b-4t2riy0nu8] {
    min-height: 34px;
    padding: 7px 8px 7px 10px;
    border-radius: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px;
    align-items: center;
    color: #e5edf7;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.52);
    transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
}

    .item-campo:hover[b-4t2riy0nu8] {
        border-color: rgba(96, 165, 250, 0.36);
        background: rgba(20, 40, 66, 0.76);
        transform: translateY(-1px);
    }

    .item-campo.disponible[b-4t2riy0nu8] {
        background: rgba(15, 23, 42, 0.52);
    }

        .item-campo.disponible:hover[b-4t2riy0nu8] {
            background: rgba(30, 58, 95, 0.60);
        }

    .item-campo.activo[b-4t2riy0nu8] {
        background: rgba(37, 99, 235, 0.18);
        border-color: rgba(96, 165, 250, 0.36);
    }

        .item-campo.activo:hover[b-4t2riy0nu8] {
            background: rgba(37, 99, 235, 0.24);
        }

.btn-agregar[b-4t2riy0nu8],
.btn-quitar[b-4t2riy0nu8] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.btn-agregar[b-4t2riy0nu8] {
    background: rgba(96, 165, 250, 0.14);
    color: #bfdbfe;
    border: 1px solid rgba(96, 165, 250, 0.20);
}

    .btn-agregar:hover[b-4t2riy0nu8] {
        background: rgba(96, 165, 250, 0.24);
        color: #ffffff;
        transform: scale(1.06);
    }

.btn-quitar[b-4t2riy0nu8] {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.18);
}

    .btn-quitar:hover[b-4t2riy0nu8] {
        background: rgba(239, 68, 68, 0.22);
        color: #ffffff;
        transform: scale(1.06);
    }

.btn-vermas[b-4t2riy0nu8] {
    width: fit-content;
    margin-top: 12px;
    align-self: flex-start;
    min-height: 34px;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .btn-vermas:hover[b-4t2riy0nu8] {
        background: rgba(148, 163, 184, 0.18);
        color: #ffffff;
        border-color: rgba(148, 163, 184, 0.32);
    }


/* ==========================================================
   BLOQUE 2 - PANEL DE FILTROS PRINCIPALES
   ========================================================== */

.panel-filtros-reporte[b-4t2riy0nu8] {
    background: linear-gradient(135deg, var(--color-bg-panel-strong), rgba(13, 24, 40, 0.98));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    padding: 18px;
    box-shadow: var(--shadow-panel);
    margin-bottom: 22px;
    width: 100%;
}

.fila-filtros[b-4t2riy0nu8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    align-items: end;
}

    .fila-filtros:last-child[b-4t2riy0nu8] {
        margin-bottom: 0;
    }

.grupo-filtro[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .grupo-filtro label[b-4t2riy0nu8],
    .titulo-grupo-fechas[b-4t2riy0nu8] {
        color: var(--color-label);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

.input-reporte[b-4t2riy0nu8],
.input-agente[b-4t2riy0nu8] {
    width: 100%;
    min-height: 42px;
    background: var(--color-bg-input);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--radius-control);
    padding: 9px 12px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

    .input-reporte:hover[b-4t2riy0nu8],
    .input-agente:hover[b-4t2riy0nu8] {
        border-color: rgba(96, 165, 250, 0.55);
    }

    .input-reporte:focus[b-4t2riy0nu8],
    .input-agente:focus[b-4t2riy0nu8] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
        background: rgba(10, 25, 44, 1);
    }

    .input-reporte:disabled[b-4t2riy0nu8],
    .input-agente:disabled[b-4t2riy0nu8] {
        opacity: 0.62;
        cursor: not-allowed;
    }

    .input-reporte option[b-4t2riy0nu8] {
        background-color: #0f1e32;
        color: #f8fafc;
    }

    .input-reporte[type="date"][b-4t2riy0nu8]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }


/* ==========================================================
   AGENTE
   ========================================================== */

.grupo-agente[b-4t2riy0nu8] {
    min-width: 0;
}

.contenedor-agente[b-4t2riy0nu8] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.btn-buscar-agente[b-4t2riy0nu8],
.btn-limpiar-agente[b-4t2riy0nu8] {
    min-height: 42px;
    border: none;
    border-radius: var(--radius-control);
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
    white-space: nowrap;
}

.btn-buscar-agente[b-4t2riy0nu8] {
    background: rgba(37, 99, 235, 0.92);
    color: #ffffff;
}

    .btn-buscar-agente:hover[b-4t2riy0nu8] {
        background: rgba(29, 78, 216, 1);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    }

.btn-limpiar-agente[b-4t2riy0nu8] {
    width: 42px;
    padding: 0;
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.30);
}

    .btn-limpiar-agente:hover[b-4t2riy0nu8] {
        background: rgba(239, 68, 68, 0.25);
    }


/* ==========================================================
   RANGO DE FECHAS AGRUPADO
   ========================================================== */

.fila-filtros-final[b-4t2riy0nu8] {
    grid-template-columns: minmax(520px, 2fr) minmax(320px, 1.2fr) minmax(180px, 0.7fr);
    align-items: end;
}

.grupo-filtro-fechas[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    padding: 12px;
}

.titulo-grupo-fechas[b-4t2riy0nu8] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
}

    .titulo-grupo-fechas i[b-4t2riy0nu8] {
        color: #60a5fa;
    }

.contenedor-fechas-reporte[b-4t2riy0nu8] {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr);
    gap: 10px;
    align-items: end;
}

.campo-fecha-reporte[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .campo-fecha-reporte span[b-4t2riy0nu8] {
        color: #93a4bb;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.campo-fecha-tipo[b-4t2riy0nu8] {
    min-width: 180px;
}


/* ==========================================================
   BOTONES PRINCIPALES
   ========================================================== */

.grupo-boton-consulta[b-4t2riy0nu8] {
    justify-content: flex-end;
}

.btn-aplicar[b-4t2riy0nu8] {
    min-height: 42px;
    border: none;
    border-radius: var(--radius-control);
    padding: 9px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

    .btn-aplicar:hover[b-4t2riy0nu8] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.28);
    }

.grupo-boton-consulta .btn-aplicar[b-4t2riy0nu8] {
    width: 100%;
}

.btn-exportar[b-4t2riy0nu8] {
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-control);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.16);
    margin-bottom: 10px;
}

    .btn-exportar:hover[b-4t2riy0nu8] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(34, 197, 94, 0.22);
    }

    .btn-aplicar:disabled[b-4t2riy0nu8],
    .btn-exportar:disabled[b-4t2riy0nu8],
    .btn-buscar-agente:disabled[b-4t2riy0nu8],
    .btn-limpiar-agente:disabled[b-4t2riy0nu8],
    .btn-agregar:disabled[b-4t2riy0nu8],
    .btn-quitar:disabled[b-4t2riy0nu8],
    .btn-vermas:disabled[b-4t2riy0nu8] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


/* ==========================================================
   AVISOS
   ========================================================== */

.ayuda-filtros[b-4t2riy0nu8] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 14px;
    color: #93a4bb;
    font-size: 0.88rem;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
}

    .ayuda-filtros i[b-4t2riy0nu8] {
        color: #60a5fa;
        margin-top: 2px;
    }

    .ayuda-filtros strong[b-4t2riy0nu8] {
        color: #bfdbfe;
    }

.mensaje-error-reporte[b-4t2riy0nu8] {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #fecaca;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 650;
    margin-bottom: 10px;
}


/* ==========================================================
   RESULTADOS
   La tabla está en TablaReporteGenerica.razor.css
   ========================================================== */

.zona-resultados[b-4t2riy0nu8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.overlay[b-4t2riy0nu8] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

    .overlay p[b-4t2riy0nu8] {
        margin-top: 12px;
    }


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {
    .encabezado-reporte[b-4t2riy0nu8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-columnas[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
    }

    .fila-filtros[b-4t2riy0nu8] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .fila-filtros-final[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
    }

    .contenedor-fechas-reporte[b-4t2riy0nu8] {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 760px) {
    .reporte-empleados[b-4t2riy0nu8],
    .reporte-dotacion[b-4t2riy0nu8] {
        gap: 14px;
    }

    h2[b-4t2riy0nu8] {
        font-size: 1.35rem;
    }

    .encabezado-reporte h2[b-4t2riy0nu8] {
        font-size: 1.35rem;
    }

    .encabezado-reporte p[b-4t2riy0nu8] {
        font-size: 0.88rem;
    }

    .resumen-filtros[b-4t2riy0nu8] {
        width: 100%;
        text-align: center;
    }

    .zona-configuracion-reporte[b-4t2riy0nu8] {
        margin-bottom: 18px;
    }

    .lista-campos[b-4t2riy0nu8] {
        border-radius: 16px;
        padding: 12px;
        min-height: unset;
    }

    .lista-campos-contenido[b-4t2riy0nu8] {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    }

    .fila-filtros[b-4t2riy0nu8],
    .fila-filtros-final[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .panel-filtros-reporte[b-4t2riy0nu8] {
        border-radius: 16px;
        padding: 14px;
    }

    .contenedor-fechas-reporte[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
    }

    .contenedor-agente[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
    }

    .btn-limpiar-agente[b-4t2riy0nu8],
    .btn-aplicar[b-4t2riy0nu8],
    .btn-exportar[b-4t2riy0nu8] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lista-campos-contenido[b-4t2riy0nu8] {
        grid-template-columns: 1fr;
    }

    .item-campo[b-4t2riy0nu8] {
        min-height: 38px;
    }
}
.contenedor-agente[b-4t2riy0nu8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-agente-seleccionado[b-4t2riy0nu8] {
    min-width: 260px;
    flex: 1;
}

.btn-buscar-agente[b-4t2riy0nu8] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 46px;
}

    .btn-buscar-agente:hover:not(:disabled)[b-4t2riy0nu8] {
        background: linear-gradient(135deg, #0b5ed7, #084298);
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .btn-buscar-agente:disabled[b-4t2riy0nu8] {
        background: linear-gradient(135deg, #adb5bd, #868e96);
        opacity: 0.58;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* /Components/Pages/ReporteSubirRecibos.razor.rz.scp.css */
/* ==========================================================
   REPORTE SUBIR RECIBOS
   Archivo: ReporteSubirRecibos.razor.css
   ========================================================== */

.reporte-subida-page[b-f759ccc4ya] {
    --reporte-fondo: #0b1220;
    --reporte-panel: rgba(15, 23, 42, 0.78);
    --reporte-panel-secundario: rgba(30, 41, 59, 0.82);
    --reporte-borde: rgba(148, 163, 184, 0.16);
    --reporte-borde-suave: rgba(148, 163, 184, 0.10);
    --reporte-texto: #f8fafc;
    --reporte-texto-secundario: #e2e8f0;
    --reporte-muted: #94a3b8;
    --reporte-azul: #3b82f6;
    --reporte-azul-hover: #2563eb;
    --reporte-verde: #22c55e;
    --reporte-amarillo: #f59e0b;
    --reporte-rojo: #ef4444;
    width: min(1540px, calc(100% - 28px));
    margin: 14px auto 32px;
    color: var(--reporte-texto);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.reporte-subida-page *[b-f759ccc4ya],
.reporte-subida-page *[b-f759ccc4ya]::before,
.reporte-subida-page *[b-f759ccc4ya]::after,
.modal-backdrop *[b-f759ccc4ya],
.modal-backdrop *[b-f759ccc4ya]::before,
.modal-backdrop *[b-f759ccc4ya]::after {
    box-sizing: border-box;
}

.reporte-encabezado[b-f759ccc4ya] {
    min-height: 88px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--reporte-borde);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
}

.reporte-encabezado-texto[b-f759ccc4ya] {
    min-width: 0;
}

.reporte-eyebrow[b-f759ccc4ya] {
    display: block;
    margin-bottom: 3px;
    color: #60a5fa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reporte-encabezado h1[b-f759ccc4ya] {
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 2.5vw, 31px);
    font-weight: 750;
    letter-spacing: -0.025em;
}

.reporte-encabezado p[b-f759ccc4ya] {
    margin: 5px 0 0;
    color: var(--reporte-muted);
    font-size: 12px;
    line-height: 1.45;
}

.btn-volver-carga[b-f759ccc4ya] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    border: 1px solid rgba(59, 130, 246, 0.34);
    border-radius: 12px;
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.16);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.btn-volver-carga:hover[b-f759ccc4ya] {
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(37, 99, 235, 0.24);
}

.panel-reporte[b-f759ccc4ya] {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--reporte-borde);
    border-radius: 18px;
    background: var(--reporte-panel);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
}

.panel-titulo[b-f759ccc4ya],
.resultados-encabezado[b-f759ccc4ya] {
    min-height: 62px;
    padding: 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--reporte-borde-suave);
    background: var(--reporte-panel-secundario);
}

.panel-titulo h2[b-f759ccc4ya],
.resultados-encabezado h2[b-f759ccc4ya] {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 750;
}

.panel-titulo p[b-f759ccc4ya],
.resultados-encabezado p[b-f759ccc4ya] {
    margin: 3px 0 0;
    color: var(--reporte-muted);
    font-size: 10.5px;
}

.filtros-grid[b-f759ccc4ya] {
    padding: 16px 17px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
}

.campo-filtro[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-filtro.campo-razon[b-f759ccc4ya],
.campo-filtro.campo-liquidacion[b-f759ccc4ya],
.campo-filtro.campo-persona[b-f759ccc4ya],
.campo-filtro.campo-archivo[b-f759ccc4ya],
.campo-filtro.campo-usuario[b-f759ccc4ya] {
    grid-column: span 2;
}

.campo-filtro label[b-f759ccc4ya],
.campo-motivo label[b-f759ccc4ya] {
    color: var(--reporte-texto-secundario);
    font-size: 11px;
    font-weight: 700;
}

.campo-filtro input[b-f759ccc4ya],
.campo-filtro select[b-f759ccc4ya],
.selector-pagina[b-f759ccc4ya],
.campo-motivo textarea[b-f759ccc4ya] {
    width: 100%;
    border: 1px solid #334155;
    border-radius: 11px;
    outline: none;
    color: #ffffff;
    background: #0f172a;
    font: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.campo-filtro input[b-f759ccc4ya],
.campo-filtro select[b-f759ccc4ya] {
    min-height: 42px;
    padding: 0 12px;
    font-size: 11.5px;
}

.campo-filtro input[b-f759ccc4ya]::placeholder,
.campo-motivo textarea[b-f759ccc4ya]::placeholder {
    color: #64748b;
}

.campo-filtro input:focus[b-f759ccc4ya],
.campo-filtro select:focus[b-f759ccc4ya],
.selector-pagina:focus[b-f759ccc4ya],
.campo-motivo textarea:focus[b-f759ccc4ya] {
    border-color: var(--reporte-azul);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.campo-filtro select option[b-f759ccc4ya],
.selector-pagina option[b-f759ccc4ya] {
    color: #ffffff;
    background: #0f172a;
}

.campo-filtro input:disabled[b-f759ccc4ya],
.campo-filtro select:disabled[b-f759ccc4ya],
.selector-pagina:disabled[b-f759ccc4ya],
.campo-motivo textarea:disabled[b-f759ccc4ya] {
    opacity: 0.55;
    cursor: not-allowed;
}

.check-filtro[b-f759ccc4ya] {
    min-height: 42px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: end;
    border: 1px solid #334155;
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.76);
    cursor: pointer;
}

.check-filtro input[b-f759ccc4ya] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--reporte-azul);
}

.check-filtro span[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.check-filtro strong[b-f759ccc4ya] {
    color: #e2e8f0;
    font-size: 10.5px;
}

.check-filtro small[b-f759ccc4ya] {
    color: #7f8ea3;
    font-size: 9px;
}

.acciones-filtros[b-f759ccc4ya] {
    padding: 13px 17px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--reporte-borde-suave);
}

.btn-consultar[b-f759ccc4ya],
.btn-secundario[b-f759ccc4ya],
.btn-anular-seleccion[b-f759ccc4ya],
.btn-limpiar-seleccion[b-f759ccc4ya],
.btn-descargar-modal[b-f759ccc4ya],
.btn-confirmar-anulacion[b-f759ccc4ya] {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
}

.btn-consultar[b-f759ccc4ya] {
    min-width: 130px;
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

.btn-consultar:hover:not(:disabled)[b-f759ccc4ya] {
    background: #1d4ed8;
}

.btn-secundario[b-f759ccc4ya] {
    color: #dbe7f3;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(71, 85, 105, 0.22);
}

.btn-secundario:hover:not(:disabled)[b-f759ccc4ya] {
    background: rgba(71, 85, 105, 0.34);
}

.btn-consultar:disabled[b-f759ccc4ya],
.btn-secundario:disabled[b-f759ccc4ya],
.btn-anular-seleccion:disabled[b-f759ccc4ya],
.btn-descargar-modal:disabled[b-f759ccc4ya],
.btn-confirmar-anulacion:disabled[b-f759ccc4ya] {
    opacity: 0.46;
    cursor: not-allowed;
}

.spinner-boton[b-f759ccc4ya] {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: reporte-girar-b-f759ccc4ya 0.75s linear infinite;
}

@keyframes reporte-girar-b-f759ccc4ya {
    to {
        transform: rotate(360deg);
    }
}

.mensaje-reporte[b-f759ccc4ya] {
    margin-top: 12px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.45;
}

.mensaje-reporte > i[b-f759ccc4ya] {
    margin-top: 2px;
}

.mensaje-reporte button[b-f759ccc4ya] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.mensaje-info[b-f759ccc4ya] {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.27);
    background: rgba(37, 99, 235, 0.11);
}

.mensaje-success[b-f759ccc4ya] {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.27);
    background: rgba(34, 197, 94, 0.10);
}

.mensaje-warning[b-f759ccc4ya] {
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.10);
}

.mensaje-error[b-f759ccc4ya] {
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.10);
}

.resumen-grid[b-f759ccc4ya] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.resumen-card[b-f759ccc4ya] {
    min-width: 0;
    min-height: 78px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--reporte-borde);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
}

.resumen-icono[b-f759ccc4ya] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(71, 85, 105, 0.20);
}

.resumen-icono.neutral[b-f759ccc4ya] {
    color: #94a3b8;
}

.resumen-icono.pendiente[b-f759ccc4ya] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.11);
}

.resumen-icono.proceso[b-f759ccc4ya] {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.11);
}

.resumen-icono.firmado[b-f759ccc4ya] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.11);
}

.resumen-icono.anulado[b-f759ccc4ya] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.11);
}

.resumen-card > div[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.resumen-card small[b-f759ccc4ya] {
    overflow: hidden;
    color: var(--reporte-muted);
    font-size: 9.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumen-card strong[b-f759ccc4ya] {
    margin-top: 2px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1;
}

.acciones-resultados[b-f759ccc4ya] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selector-pagina[b-f759ccc4ya] {
    min-height: 38px;
    padding: 0 10px;
    font-size: 10.5px;
}

.btn-anular-seleccion[b-f759ccc4ya] {
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.48);
    background: #b91c1c;
}

.btn-anular-seleccion:hover:not(:disabled)[b-f759ccc4ya] {
    background: #991b1b;
}

.barra-seleccion[b-f759ccc4ya] {
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.18);
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.10);
    font-size: 10.5px;
}

.barra-seleccion > div[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.barra-seleccion span[b-f759ccc4ya] {
    color: #93c5fd;
}

.btn-limpiar-seleccion[b-f759ccc4ya] {
    min-height: 32px;
    padding: 0 10px;
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.30);
    background: transparent;
}

.contenedor-tabla[b-f759ccc4ya] {
    width: 100%;
    overflow: auto;
    background: #0b1322;
}

.tabla-reporte[b-f759ccc4ya] {
    width: 100%;
    min-width: 1320px;
    border-collapse: separate;
    border-spacing: 0;
}

.tabla-reporte th[b-f759ccc4ya] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 11px;
    color: #cbd5e1;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    font-size: 9px;
    font-weight: 800;
    text-align: left;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla-reporte td[b-f759ccc4ya] {
    padding: 9px 11px;
    color: #e2e8f0;
    background: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    font-size: 10.5px;
    vertical-align: middle;
}

.tabla-reporte tbody tr:nth-child(even) td[b-f759ccc4ya] {
    background: #111c30;
}

.tabla-reporte tbody tr:hover td[b-f759ccc4ya] {
    background: #17243a;
}

.tabla-reporte tbody tr.fila-seleccionada td[b-f759ccc4ya] {
    background: rgba(37, 99, 235, 0.14);
}

.col-check[b-f759ccc4ya] {
    width: 44px;
    text-align: center !important;
}

.col-check input[b-f759ccc4ya] {
    width: 15px;
    height: 15px;
    accent-color: var(--reporte-azul);
    cursor: pointer;
}

.col-acciones[b-f759ccc4ya] {
    width: 132px;
    text-align: center !important;
}

.pdf-principal[b-f759ccc4ya] {
    min-width: 245px;
    max-width: 365px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.pdf-icono[b-f759ccc4ya] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #f87171;
    background: rgba(239, 68, 68, 0.10);
}

.pdf-principal > div[b-f759ccc4ya],
.celda-doble[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdf-principal strong[b-f759ccc4ya] {
    overflow: hidden;
    color: #f8fafc;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-principal small[b-f759ccc4ya],
.celda-doble small[b-f759ccc4ya] {
    overflow: hidden;
    color: #7f8ea3;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.celda-doble strong[b-f759ccc4ya] {
    color: #e2e8f0;
    font-size: 10.5px;
}

.badge-estado[b-f759ccc4ya] {
    min-width: 112px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 800;
    white-space: nowrap;
}

.estado-pendiente[b-f759ccc4ya] {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(245, 158, 11, 0.10);
}

.estado-proceso[b-f759ccc4ya],
.estado-subiendo[b-f759ccc4ya] {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.10);
}

.estado-firmado[b-f759ccc4ya] {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.10);
}

.estado-anulado[b-f759ccc4ya],
.estado-error[b-f759ccc4ya] {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.10);
}

.estado-neutral[b-f759ccc4ya] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.09);
}

.acciones-fila[b-f759ccc4ya] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-accion[b-f759ccc4ya] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.btn-accion.detalle[b-f759ccc4ya] {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.10);
}

.btn-accion.descargar[b-f759ccc4ya] {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.27);
    background: rgba(34, 197, 94, 0.09);
}

.btn-accion.eliminar[b-f759ccc4ya] {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.09);
}

.btn-accion:hover:not(:disabled)[b-f759ccc4ya] {
    border-color: currentColor;
}

.btn-accion.bloqueado[b-f759ccc4ya] {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.07);
}

.btn-accion:disabled[b-f759ccc4ya] {
    opacity: 0.40;
    cursor: not-allowed;
}

.seleccion-total[b-f759ccc4ya] {
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-top: 1px solid var(--reporte-borde-suave);
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.72);
    font-size: 10px;
}

.seleccion-total button[b-f759ccc4ya] {
    border: 0;
    color: #93c5fd;
    background: transparent;
    font-size: 10px;
    font-weight: 750;
    text-decoration: underline;
    cursor: pointer;
}

.seleccion-total button:disabled[b-f759ccc4ya] {
    opacity: 0.50;
    cursor: not-allowed;
}

.paginacion[b-f759ccc4ya] {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-top: 1px solid var(--reporte-borde-suave);
    background: rgba(15, 23, 42, 0.82);
}

.paginacion button[b-f759ccc4ya] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #cbd5e1;
    background: #0f172a;
    cursor: pointer;
}

.paginacion button:hover:not(:disabled)[b-f759ccc4ya] {
    border-color: #64748b;
    color: #ffffff;
}

.paginacion button:disabled[b-f759ccc4ya] {
    opacity: 0.35;
    cursor: not-allowed;
}

.paginacion span[b-f759ccc4ya] {
    padding: 0 7px;
    color: #94a3b8;
    font-size: 10.5px;
}

.estado-vacio[b-f759ccc4ya],
.estado-inicial[b-f759ccc4ya] {
    min-height: 230px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #7f8ea3;
    text-align: center;
}

.estado-vacio > i[b-f759ccc4ya],
.estado-inicial > i[b-f759ccc4ya] {
    margin-bottom: 8px;
    font-size: 32px;
}

.estado-vacio strong[b-f759ccc4ya],
.estado-inicial strong[b-f759ccc4ya] {
    color: #cbd5e1;
    font-size: 13px;
}

.estado-vacio span[b-f759ccc4ya],
.estado-inicial span[b-f759ccc4ya] {
    max-width: 520px;
    font-size: 10.5px;
    line-height: 1.45;
}

/* ==========================================================
   MODALES
   ========================================================== */

.modal-backdrop[b-f759ccc4ya] {
    position: fixed;
    inset: 0;
    z-index: 10060;
    padding: 20px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    overscroll-behavior: none;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(4px);
}

.modal-reporte[b-f759ccc4ya] {
    width: min(1080px, 100%);
    max-height: calc(100dvh - 40px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    color: #f8fafc;
    background: #0b1322;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.50);
}

.modal-anulacion[b-f759ccc4ya] {
    width: min(720px, 100%);
}

.modal-header[b-f759ccc4ya] {
    min-height: 68px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: #1e293b;
}

.modal-titulo[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.modal-titulo > div[b-f759ccc4ya] {
    min-width: 0;
}

.modal-titulo h2[b-f759ccc4ya] {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 750;
}

.modal-titulo p[b-f759ccc4ya] {
    max-width: 760px;
    margin: 3px 0 0;
    overflow: hidden;
    color: #94a3b8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-icono[b-f759ccc4ya] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.modal-icono.detalle[b-f759ccc4ya] {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
}

.modal-icono.eliminar[b-f759ccc4ya] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

.btn-cerrar-modal[b-f759ccc4ya] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 9px;
    color: #cbd5e1;
    background: rgba(71, 85, 105, 0.16);
    cursor: pointer;
}

.btn-cerrar-modal:hover:not(:disabled)[b-f759ccc4ya] {
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.12);
}

.modal-contenido[b-f759ccc4ya] {
    min-height: 0;
    padding: 14px;
    overflow: auto;
    overscroll-behavior: contain;
}

.detalle-seccion[b-f759ccc4ya] {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 13px;
    background: rgba(15, 23, 42, 0.70);
}

.detalle-seccion:last-child[b-f759ccc4ya] {
    margin-bottom: 0;
}

.detalle-seccion h3[b-f759ccc4ya] {
    margin: 0;
    padding: 10px 12px;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.82);
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
    font-size: 11px;
    font-weight: 750;
}

.detalle-grid[b-f759ccc4ya] {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.detalle-grid > div[b-f759ccc4ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detalle-grid > div.detalle-ancho[b-f759ccc4ya] {
    grid-column: 1 / -1;
}

.detalle-grid small[b-f759ccc4ya] {
    color: #7f8ea3;
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.detalle-grid strong[b-f759ccc4ya] {
    overflow-wrap: anywhere;
    color: #e2e8f0;
    font-size: 10.5px;
    font-weight: 650;
}

.texto-codigo[b-f759ccc4ya] {
    color: #bfdbfe !important;
    font-family: Consolas, "Courier New", monospace;
}

.detalle-anulacion[b-f759ccc4ya] {
    border-color: rgba(239, 68, 68, 0.24);
}

.detalle-texto[b-f759ccc4ya] {
    margin: 10px 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 3px solid #64748b;
    color: #cbd5e1;
    background: rgba(71, 85, 105, 0.10);
    font-size: 10px;
    line-height: 1.45;
}

.detalle-texto.error[b-f759ccc4ya] {
    border-left-color: #ef4444;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.08);
}

.modal-footer[b-f759ccc4ya] {
    padding: 11px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: #1e293b;
}

.btn-descargar-modal[b-f759ccc4ya] {
    color: #ffffff;
    border-color: #15803d;
    background: #15803d;
}

.btn-descargar-modal:hover:not(:disabled)[b-f759ccc4ya] {
    background: #166534;
}

.aviso-anulacion[b-f759ccc4ya] {
    padding: 11px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 11px;
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.09);
}

.aviso-anulacion > i[b-f759ccc4ya] {
    margin-top: 3px;
    color: #fbbf24;
}

.aviso-anulacion > div[b-f759ccc4ya] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aviso-anulacion strong[b-f759ccc4ya] {
    font-size: 11px;
}

.aviso-anulacion span[b-f759ccc4ya] {
    color: #fde68a;
    font-size: 9.5px;
    line-height: 1.4;
}

.bloqueados-anulacion[b-f759ccc4ya] {
    margin-top: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 11px;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.08);
}

.bloqueados-anulacion > strong[b-f759ccc4ya] {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
}

.bloqueados-anulacion ul[b-f759ccc4ya] {
    max-height: 180px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.bloqueados-anulacion li[b-f759ccc4ya] {
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.12);
}

.bloqueados-anulacion li:last-child[b-f759ccc4ya] {
    border-bottom: 0;
}

.bloqueados-anulacion li span[b-f759ccc4ya] {
    color: #fee2e2;
    font-size: 10px;
    font-weight: 700;
}

.bloqueados-anulacion li small[b-f759ccc4ya],
.bloqueados-anulacion > small[b-f759ccc4ya] {
    color: #fca5a5;
    font-size: 9px;
}

.campo-motivo[b-f759ccc4ya] {
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-motivo label span[b-f759ccc4ya] {
    color: #f87171;
}

.campo-motivo textarea[b-f759ccc4ya] {
    min-height: 110px;
    padding: 10px 12px;
    resize: vertical;
    font-size: 11px;
    line-height: 1.45;
}

.campo-motivo > small[b-f759ccc4ya] {
    align-self: flex-end;
    color: #64748b;
    font-size: 9px;
}

.btn-confirmar-anulacion[b-f759ccc4ya] {
    color: #ffffff;
    border-color: #b91c1c;
    background: #b91c1c;
}

.btn-confirmar-anulacion:hover:not(:disabled)[b-f759ccc4ya] {
    background: #991b1b;
}

.overlay-proceso[b-f759ccc4ya] {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(2px);
}

.spinner-grande[b-f759ccc4ya] {
    width: 34px;
    height: 34px;
    border: 4px solid rgba(255, 255, 255, 0.24);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: reporte-girar-b-f759ccc4ya 0.75s linear infinite;
}

.overlay-proceso strong[b-f759ccc4ya] {
    font-size: 12px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1240px) {
    .filtros-grid[b-f759ccc4ya] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .campo-filtro.campo-razon[b-f759ccc4ya],
    .campo-filtro.campo-liquidacion[b-f759ccc4ya],
    .campo-filtro.campo-persona[b-f759ccc4ya],
    .campo-filtro.campo-archivo[b-f759ccc4ya],
    .campo-filtro.campo-usuario[b-f759ccc4ya] {
        grid-column: span 2;
    }

    .resumen-grid[b-f759ccc4ya] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detalle-grid[b-f759ccc4ya] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .reporte-subida-page[b-f759ccc4ya] {
        width: calc(100% - 18px);
        margin-top: 9px;
    }

    .reporte-encabezado[b-f759ccc4ya] {
        align-items: flex-start;
        flex-direction: column;
    }

    .filtros-grid[b-f759ccc4ya] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campo-filtro.campo-razon[b-f759ccc4ya],
    .campo-filtro.campo-liquidacion[b-f759ccc4ya],
    .campo-filtro.campo-persona[b-f759ccc4ya],
    .campo-filtro.campo-archivo[b-f759ccc4ya],
    .campo-filtro.campo-usuario[b-f759ccc4ya] {
        grid-column: span 2;
    }

    .resultados-encabezado[b-f759ccc4ya] {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-resultados[b-f759ccc4ya] {
        width: 100%;
        justify-content: flex-end;
    }

    .detalle-grid[b-f759ccc4ya] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .reporte-subida-page[b-f759ccc4ya] {
        width: calc(100% - 10px);
        margin-top: 5px;
    }

    .reporte-encabezado[b-f759ccc4ya],
    .panel-reporte[b-f759ccc4ya] {
        border-radius: 14px;
    }

    .btn-volver-carga[b-f759ccc4ya] {
        width: 100%;
    }

    .panel-titulo[b-f759ccc4ya] {
        align-items: stretch;
        flex-direction: column;
    }

    .filtros-grid[b-f759ccc4ya] {
        padding: 13px;
        grid-template-columns: 1fr;
    }

    .campo-filtro.campo-razon[b-f759ccc4ya],
    .campo-filtro.campo-liquidacion[b-f759ccc4ya],
    .campo-filtro.campo-persona[b-f759ccc4ya],
    .campo-filtro.campo-archivo[b-f759ccc4ya],
    .campo-filtro.campo-usuario[b-f759ccc4ya] {
        grid-column: span 1;
    }

    .acciones-filtros[b-f759ccc4ya] {
        padding-left: 13px;
        padding-right: 13px;
    }

    .btn-consultar[b-f759ccc4ya],
    .btn-secundario[b-f759ccc4ya] {
        width: 100%;
    }

    .resumen-grid[b-f759ccc4ya] {
        grid-template-columns: 1fr;
    }

    .acciones-resultados[b-f759ccc4ya] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .selector-pagina[b-f759ccc4ya],
    .btn-anular-seleccion[b-f759ccc4ya] {
        width: 100%;
    }

    .barra-seleccion[b-f759ccc4ya],
    .seleccion-total[b-f759ccc4ya] {
        align-items: stretch;
        flex-direction: column;
    }

    .paginacion span[b-f759ccc4ya] {
        font-size: 9px;
    }

    .modal-backdrop[b-f759ccc4ya] {
        padding: 7px;
        place-items: stretch;
    }

    .modal-reporte[b-f759ccc4ya] {
        width: 100%;
        max-height: calc(100dvh - 14px);
        border-radius: 14px;
    }

    .modal-titulo p[b-f759ccc4ya] {
        display: none;
    }

    .detalle-grid[b-f759ccc4ya] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-f759ccc4ya] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .modal-footer button[b-f759ccc4ya] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reporte-subida-page *[b-f759ccc4ya],
    .reporte-subida-page *[b-f759ccc4ya]::before,
    .reporte-subida-page *[b-f759ccc4ya]::after,
    .modal-backdrop *[b-f759ccc4ya],
    .modal-backdrop *[b-f759ccc4ya]::before,
    .modal-backdrop *[b-f759ccc4ya]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/ReporteVacaciones.razor.rz.scp.css */
/* ==========================================================
   REPORTE VACACIONES
   CSS limpio / alineado a ReporteLicencias / sin tabla manual
   La tabla y filtros por columna los maneja TablaReporteGenerica
   ========================================================== */


/* ==========================================================
   BASE GENERAL
   ========================================================== */

.reporte-vacaciones[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.encabezado-reporte[b-e7cblfknjj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 6px;
}

    .encabezado-reporte h2[b-e7cblfknjj] {
        color: #ffffff;
        margin: 0 0 5px 0;
        font-size: 1.65rem;
        font-weight: 750;
        letter-spacing: -0.02em;
    }

    .encabezado-reporte p[b-e7cblfknjj] {
        margin: 0;
        color: #aab8cc;
        font-size: 0.95rem;
    }

.resumen-filtros[b-e7cblfknjj] {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.24);
    color: #bfdbfe;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 750;
    white-space: nowrap;
}


/* ==========================================================
   BLOQUE 1 - SELECCIÓN DE CAMPOS
   ========================================================== */

.zona-configuracion-reporte[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 4px;
}

.panel-columnas[b-e7cblfknjj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.lista-campos[b-e7cblfknjj] {
    background: linear-gradient(135deg, rgba(15, 30, 50, 0.82), rgba(13, 24, 40, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    width: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
}

    .lista-campos h4[b-e7cblfknjj] {
        margin: 0 0 10px 0;
        color: #dbeafe;
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lista-campos:first-child h4[b-e7cblfknjj]::before {
        content: "＋";
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(96, 165, 250, 0.16);
        color: #93c5fd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .lista-campos:nth-child(2) h4[b-e7cblfknjj]::before {
        content: "✓";
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(34, 197, 94, 0.12);
        color: #86efac;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 800;
    }

.lista-campos-contenido[b-e7cblfknjj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 8px;
    align-content: start;
}

.item-campo[b-e7cblfknjj] {
    min-height: 34px;
    padding: 7px 8px 7px 10px;
    border-radius: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px;
    align-items: center;
    color: #e5edf7;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.52);
    transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
}

    .item-campo:hover[b-e7cblfknjj] {
        border-color: rgba(96, 165, 250, 0.36);
        background: rgba(20, 40, 66, 0.76);
        transform: translateY(-1px);
    }

    .item-campo.disponible[b-e7cblfknjj] {
        background: rgba(15, 23, 42, 0.52);
    }

        .item-campo.disponible:hover[b-e7cblfknjj] {
            background: rgba(30, 58, 95, 0.60);
        }

    .item-campo.activo[b-e7cblfknjj] {
        background: rgba(37, 99, 235, 0.18);
        border-color: rgba(96, 165, 250, 0.36);
    }

        .item-campo.activo:hover[b-e7cblfknjj] {
            background: rgba(37, 99, 235, 0.24);
        }

.btn-agregar[b-e7cblfknjj],
.btn-quitar[b-e7cblfknjj] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.btn-agregar[b-e7cblfknjj] {
    background: rgba(96, 165, 250, 0.14);
    color: #bfdbfe;
    border: 1px solid rgba(96, 165, 250, 0.20);
}

    .btn-agregar:hover[b-e7cblfknjj] {
        background: rgba(96, 165, 250, 0.24);
        color: #ffffff;
        transform: scale(1.06);
    }

.btn-quitar[b-e7cblfknjj] {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.18);
}

    .btn-quitar:hover[b-e7cblfknjj] {
        background: rgba(239, 68, 68, 0.22);
        color: #ffffff;
        transform: scale(1.06);
    }

.btn-vermas[b-e7cblfknjj] {
    width: fit-content;
    margin-top: 12px;
    align-self: flex-start;
    min-height: 34px;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .btn-vermas:hover[b-e7cblfknjj] {
        background: rgba(148, 163, 184, 0.18);
        color: #ffffff;
        border-color: rgba(148, 163, 184, 0.32);
    }


/* ==========================================================
   BLOQUE 2 - FILTROS PRINCIPALES
   ========================================================== */

.panel-filtros-reporte[b-e7cblfknjj] {
    background: linear-gradient(135deg, rgba(13, 24, 40, 0.98), rgba(15, 30, 50, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
    width: 100%;
}

.fila-filtros[b-e7cblfknjj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    align-items: end;
}

    .fila-filtros:last-child[b-e7cblfknjj] {
        margin-bottom: 0;
    }

.grupo-filtro[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .grupo-filtro label[b-e7cblfknjj],
    .titulo-grupo-fechas[b-e7cblfknjj] {
        color: #cbd5e1;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

.input-reporte[b-e7cblfknjj],
.input-agente[b-e7cblfknjj] {
    width: 100%;
    min-height: 42px;
    background: rgba(7, 18, 32, 0.95);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

    .input-reporte:hover[b-e7cblfknjj],
    .input-agente:hover[b-e7cblfknjj] {
        border-color: rgba(96, 165, 250, 0.55);
    }

    .input-reporte:focus[b-e7cblfknjj],
    .input-agente:focus[b-e7cblfknjj] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
        background: rgba(10, 25, 44, 1);
    }

    .input-reporte:disabled[b-e7cblfknjj],
    .input-agente:disabled[b-e7cblfknjj] {
        opacity: 0.62;
        cursor: not-allowed;
    }

    .input-reporte option[b-e7cblfknjj] {
        background-color: #0f1e32;
        color: #f8fafc;
    }

    .input-reporte[type="date"][b-e7cblfknjj]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }


/* ==========================================================
   AGENTE
   ========================================================== */

.grupo-agente[b-e7cblfknjj] {
    min-width: 0;
}

.contenedor-agente[b-e7cblfknjj] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.btn-buscar-agente[b-e7cblfknjj],
.btn-limpiar-agente[b-e7cblfknjj] {
    min-height: 42px;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
    white-space: nowrap;
}

.btn-buscar-agente[b-e7cblfknjj] {
    background: rgba(37, 99, 235, 0.92);
    color: #ffffff;
}

    .btn-buscar-agente:hover[b-e7cblfknjj] {
        background: rgba(29, 78, 216, 1);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    }

.btn-limpiar-agente[b-e7cblfknjj] {
    width: 42px;
    padding: 0;
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.30);
}

    .btn-limpiar-agente:hover[b-e7cblfknjj] {
        background: rgba(239, 68, 68, 0.25);
    }


/* ==========================================================
   RANGO DE FECHAS AGRUPADO
   ========================================================== */

.fila-filtros-final[b-e7cblfknjj] {
    grid-template-columns: minmax(520px, 2fr) minmax(320px, 1.2fr) minmax(180px, 0.7fr);
    align-items: end;
}

.grupo-filtro-fechas[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    padding: 12px;
}

.titulo-grupo-fechas[b-e7cblfknjj] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
}

    .titulo-grupo-fechas i[b-e7cblfknjj] {
        color: #60a5fa;
    }

.contenedor-fechas-reporte[b-e7cblfknjj] {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr);
    gap: 10px;
    align-items: end;
}

.campo-fecha-reporte[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .campo-fecha-reporte span[b-e7cblfknjj] {
        color: #93a4bb;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.campo-fecha-tipo[b-e7cblfknjj] {
    min-width: 180px;
}


/* ==========================================================
   BOTONES PRINCIPALES
   ========================================================== */

.grupo-boton-consulta[b-e7cblfknjj] {
    justify-content: flex-end;
}

.btn-aplicar[b-e7cblfknjj] {
    min-height: 42px;
    border: none;
    border-radius: 12px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

    .btn-aplicar:hover[b-e7cblfknjj] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.28);
    }

.grupo-boton-consulta .btn-aplicar[b-e7cblfknjj] {
    width: 100%;
}

.btn-exportar[b-e7cblfknjj] {
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    padding: 9px 14px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.16);
    margin-bottom: 10px;
}

    .btn-exportar:hover[b-e7cblfknjj] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(34, 197, 94, 0.22);
    }

    .btn-aplicar:disabled[b-e7cblfknjj],
    .btn-exportar:disabled[b-e7cblfknjj],
    .btn-buscar-agente:disabled[b-e7cblfknjj],
    .btn-limpiar-agente:disabled[b-e7cblfknjj],
    .btn-agregar:disabled[b-e7cblfknjj],
    .btn-quitar:disabled[b-e7cblfknjj],
    .btn-vermas:disabled[b-e7cblfknjj] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


/* ==========================================================
   AVISOS
   ========================================================== */

.ayuda-filtros[b-e7cblfknjj] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 14px;
    color: #93a4bb;
    font-size: 0.88rem;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
}

    .ayuda-filtros:first-child[b-e7cblfknjj] {
        margin-top: 0;
    }

    .ayuda-filtros i[b-e7cblfknjj] {
        color: #60a5fa;
        margin-top: 2px;
    }

    .ayuda-filtros strong[b-e7cblfknjj] {
        color: #bfdbfe;
    }

.mensaje-error-reporte[b-e7cblfknjj] {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #fecaca;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 650;
    margin-bottom: 10px;
}


/* ==========================================================
   RESULTADOS
   La tabla está en TablaReporteGenerica.razor.css
   ========================================================== */

.zona-resultados[b-e7cblfknjj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.overlay[b-e7cblfknjj] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

    .overlay p[b-e7cblfknjj] {
        margin-top: 12px;
    }


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {
    .encabezado-reporte[b-e7cblfknjj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-columnas[b-e7cblfknjj] {
        grid-template-columns: 1fr;
    }

    .fila-filtros[b-e7cblfknjj] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .fila-filtros-final[b-e7cblfknjj] {
        grid-template-columns: 1fr;
    }

    .contenedor-fechas-reporte[b-e7cblfknjj] {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 760px) {
    .reporte-vacaciones[b-e7cblfknjj] {
        gap: 14px;
    }

    .encabezado-reporte h2[b-e7cblfknjj] {
        font-size: 1.35rem;
    }

    .encabezado-reporte p[b-e7cblfknjj] {
        font-size: 0.88rem;
    }

    .resumen-filtros[b-e7cblfknjj] {
        width: 100%;
        text-align: center;
    }

    .zona-configuracion-reporte[b-e7cblfknjj] {
        margin-bottom: 0;
    }

    .lista-campos[b-e7cblfknjj] {
        border-radius: 16px;
        padding: 12px;
        min-height: unset;
    }

    .lista-campos-contenido[b-e7cblfknjj] {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    }

    .fila-filtros[b-e7cblfknjj],
    .fila-filtros-final[b-e7cblfknjj] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .panel-filtros-reporte[b-e7cblfknjj] {
        border-radius: 16px;
        padding: 14px;
    }

    .contenedor-fechas-reporte[b-e7cblfknjj] {
        grid-template-columns: 1fr;
    }

    .contenedor-agente[b-e7cblfknjj] {
        grid-template-columns: 1fr;
    }

    .btn-limpiar-agente[b-e7cblfknjj],
    .btn-aplicar[b-e7cblfknjj],
    .btn-exportar[b-e7cblfknjj] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lista-campos-contenido[b-e7cblfknjj] {
        grid-template-columns: 1fr;
    }

    .item-campo[b-e7cblfknjj] {
        min-height: 38px;
    }
}
.contenedor-agente[b-e7cblfknjj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-agente-seleccionado[b-e7cblfknjj] {
    min-width: 260px;
    flex: 1;
}
/* /Components/Pages/ResumenJornada.razor.rz.scp.css */
/* === CONTENEDOR DE JORNADA === */
.resumen-jornada[b-y1a7g553q3] {
    margin: 20px 0;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05); /* fondo translúcido */
    border-left: 4px solid dodgerblue; /* acento azul */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    color: white;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
}

    /* === TÍTULO === */
    .resumen-jornada label[b-y1a7g553q3] {
        font-size: 16px;
        font-weight: bold;
        color: #cceeff;
        margin-bottom: 10px;
        display: block;
        text-align: center;
    }

    /* === TABLA DE JORNADA === */
    .resumen-jornada table[b-y1a7g553q3] {
        width: 100%;
        border-collapse: collapse;
        border-radius: 8px;
        overflow: hidden;
        background-color: rgb(15, 30, 50);
        margin-top: 10px;
        font-size: 13px;
    }

    /* Encabezados */
    .resumen-jornada th[b-y1a7g553q3] {
        background: linear-gradient(90deg, #0d6efd, #357abd);
        color: white;
        padding: 10px;
        text-align: center;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Celdas */
    .resumen-jornada td[b-y1a7g553q3] {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: white;
        background-color: rgb(20, 38, 65);
    }

    /* Alternancia */
    .resumen-jornada tr:nth-child(even) td[b-y1a7g553q3] {
        background-color: #1e3550;
    }

    /* Hover */
    .resumen-jornada tr:hover td[b-y1a7g553q3] {
        background-color: rgba(255,255,255,0.07);
        transition: 0.2s;
    }

    /* === ESTILO DE ICONOS/✔️ === */
    .resumen-jornada td[b-y1a7g553q3] {
        font-size: 14px;
    }

        .resumen-jornada td:contains("✔️")[b-y1a7g553q3] {
            color: #4caf50; /* verde para los días activos */
            font-weight: bold;
        }

    /* === MENSAJE SIN JORNADA === */
    .resumen-jornada .text-muted[b-y1a7g553q3] {
        padding: 12px;
        text-align: center;
        color: #bbb;
        font-style: italic;
    }
/* /Components/Pages/Sanciones.razor.rz.scp.css */
/* ==========================================================
   BLOQUE SANCIONES
   ALINEADO CON LICENCIAS + CONTENIDO INTERNO CENTRADO
   ========================================================== */

.bloque-sanciones[b-knwh03ju7e] {
    width: 100%;
    padding: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-sizing: border-box;
    margin-top: 0;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

/* wrapper interno para centrar sin achicar el bloque principal */
.contenedor-sanciones-interno[b-knwh03ju7e] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: auto auto auto;
    gap: 18px 20px;
    min-height: 320px;
    justify-items: center;
    align-items: start;
}

/* ==========================================================
   COLUMNAS
   ========================================================== */

.bloque-sanciones .col[b-knwh03ju7e] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    min-width: 0;
}

    .bloque-sanciones .col label[b-knwh03ju7e] {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 6px;
        color: #dbe4f0;
        text-align: left;
    }

/* columna detalle más ancha */
.bloque-sanciones .col-detalle[b-knwh03ju7e] {
    max-width: 520px;
    width: 100%;
}

/* ==========================================================
   INPUTS
   ========================================================== */

.bloque-sanciones input[type="text"][b-knwh03ju7e],
.bloque-sanciones input[type="date"][b-knwh03ju7e],
.bloque-sanciones input[type="number"][b-knwh03ju7e],
.bloque-sanciones select[b-knwh03ju7e] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.95rem;
    background-color: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bloque-sanciones textarea[b-knwh03ju7e] {
    width: 100%;
    min-height: 40px;
    height: auto;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 0.95rem;
    background-color: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .bloque-sanciones input:focus[b-knwh03ju7e],
    .bloque-sanciones select:focus[b-knwh03ju7e],
    .bloque-sanciones textarea:focus[b-knwh03ju7e] {
        outline: none;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }

.bloque-sanciones input[type="date"][b-knwh03ju7e]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ==========================================================
   CHECKBOX DE SUSPENSIÓN
   ========================================================== */

.bloque-sanciones .bloque-check-indeterminado[b-knwh03ju7e] {
    margin-top: 10px;
}

    .bloque-sanciones .bloque-check-indeterminado label[b-knwh03ju7e] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
        font-weight: 500;
        color: #e5e7eb;
    }

    .bloque-sanciones .bloque-check-indeterminado input[type="checkbox"][b-knwh03ju7e] {
        width: auto;
        min-height: auto;
        accent-color: #0d6efd;
    }

/* ==========================================================
   BOTONES
   ========================================================== */

.bloque-sanciones .bloque-botones[b-knwh03ju7e] {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.bloque-sanciones .btn-guardar[b-knwh03ju7e],
.bloque-sanciones .btn-cancelar[b-knwh03ju7e] {
    padding: 8px 14px;
    min-height: 40px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bloque-sanciones .btn-guardar[b-knwh03ju7e] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
}

    .bloque-sanciones .btn-guardar:hover[b-knwh03ju7e] {
        transform: translateY(-1px);
    }

.bloque-sanciones .btn-cancelar[b-knwh03ju7e] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
}

    .bloque-sanciones .btn-cancelar:hover[b-knwh03ju7e] {
        transform: translateY(-1px);
    }

/* ==========================================================
   CAMPOS DESHABILITADOS
   ========================================================== */

.bloque-sanciones input[disabled][b-knwh03ju7e],
.bloque-sanciones select[disabled][b-knwh03ju7e],
.bloque-sanciones textarea[disabled][b-knwh03ju7e] {
    background-color: #2c2c2c !important;
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    border: 1px solid #555 !important;
    cursor: not-allowed !important;
    opacity: 0.75;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
    .contenedor-sanciones-interno[b-knwh03ju7e] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .bloque-sanciones .bloque-botones[b-knwh03ju7e] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .bloque-sanciones[b-knwh03ju7e] {
        padding: 14px;
    }

    .contenedor-sanciones-interno[b-knwh03ju7e] {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .bloque-sanciones .col[b-knwh03ju7e],
    .bloque-sanciones .col-detalle[b-knwh03ju7e] {
        max-width: 100%;
    }

    .bloque-sanciones input[b-knwh03ju7e],
    .bloque-sanciones select[b-knwh03ju7e],
    .bloque-sanciones textarea[b-knwh03ju7e] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .bloque-sanciones .bloque-botones[b-knwh03ju7e] {
        flex-direction: column;
        justify-content: stretch;
    }

    .bloque-sanciones .btn-guardar[b-knwh03ju7e],
    .bloque-sanciones .btn-cancelar[b-knwh03ju7e] {
        width: 100%;
    }
}
/* /Components/Pages/SubirRecibos.razor.rz.scp.css */
/* ==========================================================
   SUBIR RECIBOS
   Diseño simple, guiado y responsivo.
   Estilos exclusivos de SubirRecibos.razor.
   ========================================================== */

/* ==========================================================
   PÁGINA Y TOKENS
   ========================================================== */

.recibos-page[b-mrfn0q7jih] {
    --rec-bg: #0b1220;
    --rec-panel: rgba(15, 23, 42, 0.82);
    --rec-panel-2: rgba(30, 41, 59, 0.82);
    --rec-panel-3: rgba(2, 6, 23, 0.30);
    --rec-border: rgba(148, 163, 184, 0.16);
    --rec-border-strong: rgba(148, 163, 184, 0.26);
    --rec-text: #f8fafc;
    --rec-text-2: #e2e8f0;
    --rec-muted: #94a3b8;
    --rec-muted-2: #64748b;
    --rec-blue: #2563eb;
    --rec-blue-hover: #1d4ed8;
    --rec-blue-soft: rgba(37, 99, 235, 0.12);
    --rec-green: #22c55e;
    --rec-green-soft: rgba(34, 197, 94, 0.11);
    --rec-yellow: #f59e0b;
    --rec-yellow-soft: rgba(245, 158, 11, 0.11);
    --rec-red: #ef4444;
    --rec-red-soft: rgba(239, 68, 68, 0.11);
    --rec-radius: 16px;
    width: min(1380px, calc(100% - 28px));
    margin: 16px auto 34px;
    padding: 0;
    color: var(--rec-text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

    .recibos-page *[b-mrfn0q7jih],
    .recibos-page *[b-mrfn0q7jih]::before,
    .recibos-page *[b-mrfn0q7jih]::after {
        box-sizing: border-box;
    }

/* ==========================================================
   CABECERA
   ========================================================== */

.recibos-header[b-mrfn0q7jih] {
    margin-bottom: 14px;
    padding: 4px 2px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

    .recibos-header > div[b-mrfn0q7jih] {
        min-width: 0;
    }

.recibos-eyebrow[b-mrfn0q7jih] {
    display: block;
    margin-bottom: 3px;
    color: #60a5fa;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.recibos-header h1[b-mrfn0q7jih] {
    margin: 0;
    color: var(--rec-text);
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 750;
    letter-spacing: -0.025em;
}

.recibos-header p[b-mrfn0q7jih] {
    margin: 5px 0 0;
    color: var(--rec-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.btn-reportes-recibos[b-mrfn0q7jih] {
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    border: 1px solid var(--rec-border);
    border-radius: 11px;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

    .btn-reportes-recibos:hover[b-mrfn0q7jih] {
        color: #ffffff;
        border-color: rgba(96, 165, 250, 0.36);
        background: rgba(30, 41, 59, 0.82);
    }

/* ==========================================================
   PANELES / PASOS
   ========================================================== */

.recibos-panel[b-mrfn0q7jih] {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--rec-border);
    border-radius: var(--rec-radius);
    background: var(--rec-panel);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
}

.paso-header[b-mrfn0q7jih] {
    min-height: 68px;
    padding: 13px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
    background: rgba(30, 41, 59, 0.62);
}

.paso-numero[b-mrfn0q7jih] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: var(--rec-blue);
    font-size: 0.8rem;
    font-weight: 800;
}

.paso-header > div[b-mrfn0q7jih] {
    min-width: 0;
}

.paso-header h2[b-mrfn0q7jih] {
    margin: 0;
    color: var(--rec-text);
    font-size: 0.96rem;
    font-weight: 750;
}

.paso-header p[b-mrfn0q7jih] {
    margin: 3px 0 0;
    color: var(--rec-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ==========================================================
   CAMPOS
   ========================================================== */

.razon-contenido[b-mrfn0q7jih],
.opciones-carga[b-mrfn0q7jih] {
    padding: 16px 17px;
}

.razon-contenido[b-mrfn0q7jih] {
    max-width: 780px;
}

.campo[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .campo label[b-mrfn0q7jih] {
        color: var(--rec-text-2);
        font-size: 0.78rem;
        font-weight: 700;
    }

.obligatorio[b-mrfn0q7jih] {
    color: #fca5a5;
}

.select-con-icono[b-mrfn0q7jih] {
    position: relative;
}

    .select-con-icono > i[b-mrfn0q7jih] {
        position: absolute;
        top: 50%;
        left: 13px;
        z-index: 1;
        color: #8fa3bb;
        transform: translateY(-50%);
        pointer-events: none;
    }

.campo select[b-mrfn0q7jih] {
    width: 100%;
    min-height: 44px;
    padding: 0 42px 0 39px;
    border: 1px solid #334155;
    border-radius: 11px;
    outline: none;
    color: #ffffff;
    background: #0f172a;
    font-size: 0.82rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

    .campo select:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: #475569;
        background: #111827;
    }

    .campo select:focus[b-mrfn0q7jih] {
        border-color: #3b82f6;
        background: #111827;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
    }

    .campo select:disabled[b-mrfn0q7jih] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .campo select option[b-mrfn0q7jih] {
        color: #ffffff;
        background: #0f172a;
    }

.campo small[b-mrfn0q7jih] {
    color: var(--rec-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.campo-error[b-mrfn0q7jih] {
    color: #fca5a5 !important;
}

/* ==========================================================
   DROPZONE
   ========================================================== */

.dropzone-unificada[b-mrfn0q7jih] {
    position: relative;
    min-height: 230px;
    margin: 16px 17px 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px dashed #475569;
    border-radius: 15px;
    background: rgba(2, 6, 23, 0.22);
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

    .dropzone-unificada:hover:not(.deshabilitada)[b-mrfn0q7jih],
    .dropzone-unificada.drag-over[b-mrfn0q7jih],
    .dropzone-unificada.is-dragover[b-mrfn0q7jih] {
        border-color: #3b82f6;
        background: rgba(37, 99, 235, 0.06);
    }

    .dropzone-unificada.con-archivos[b-mrfn0q7jih] {
        border-color: rgba(34, 197, 94, 0.48);
        background: rgba(34, 197, 94, 0.035);
    }

    .dropzone-unificada.deshabilitada[b-mrfn0q7jih] {
        opacity: 0.55;
        pointer-events: none;
    }

.input-dropzone-real[b-mrfn0q7jih] {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dropzone-contenido[b-mrfn0q7jih] {
    width: min(720px, calc(100% - 30px));
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dropzone-icono[b-mrfn0q7jih] {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 16px;
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.10);
    font-size: 1.35rem;
}

.dropzone-texto[b-mrfn0q7jih] {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .dropzone-texto strong[b-mrfn0q7jih] {
        color: var(--rec-text);
        font-size: 0.98rem;
        font-weight: 750;
    }

    .dropzone-texto span[b-mrfn0q7jih] {
        margin-top: 5px;
        color: var(--rec-muted);
        font-size: 0.76rem;
        line-height: 1.45;
    }

.dropzone-acciones[b-mrfn0q7jih] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-seleccionar[b-mrfn0q7jih] {
    min-height: 41px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #2563eb;
    border-radius: 11px;
    color: #ffffff;
    background: #2563eb;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .btn-seleccionar:hover:not(.deshabilitado)[b-mrfn0q7jih] {
        border-color: #1d4ed8;
        background: #1d4ed8;
        transform: translateY(-1px);
    }

.btn-seleccionar-secundario[b-mrfn0q7jih] {
    border-color: #475569;
    color: #e2e8f0;
    background: #1e293b;
}

    .btn-seleccionar-secundario:hover:not(.deshabilitado)[b-mrfn0q7jih] {
        border-color: #64748b;
        background: #334155;
    }

.btn-seleccionar.deshabilitado[b-mrfn0q7jih] {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================
   RESUMEN DE ARCHIVOS
   ========================================================== */

.archivos-resumen[b-mrfn0q7jih] {
    padding: 0 17px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

.archivo-resumen-card[b-mrfn0q7jih] {
    min-width: 0;
    min-height: 74px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--rec-border);
    border-radius: 12px;
    color: inherit;
    background: rgba(15, 23, 42, 0.64);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

    .archivo-resumen-card:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: rgba(96, 165, 250, 0.34);
        background: rgba(30, 41, 59, 0.76);
    }

    .archivo-resumen-card:disabled[b-mrfn0q7jih] {
        opacity: 0.48;
        cursor: default;
    }

    .archivo-resumen-card.pdf[b-mrfn0q7jih] {
        border-left: 3px solid #ef4444;
    }



.archivo-resumen-icono[b-mrfn0q7jih] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.32);
    font-size: 0.95rem;
}

.archivo-resumen-card.pdf .archivo-resumen-icono[b-mrfn0q7jih] {
    color: #f87171;
}



.archivo-resumen-datos[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .archivo-resumen-datos small[b-mrfn0q7jih] {
        color: var(--rec-muted);
        font-size: 0.68rem;
        font-weight: 700;
    }

    .archivo-resumen-datos strong[b-mrfn0q7jih] {
        margin-top: 2px;
        color: var(--rec-text);
        font-size: 1.35rem;
        line-height: 1;
    }

.archivo-resumen-accion[b-mrfn0q7jih] {
    color: #93c5fd;
    font-size: 0.66rem;
    font-weight: 750;
}

/* ==========================================================
   OPCIONES Y ACCIÓN PRINCIPAL
   ========================================================== */

.opciones-carga[b-mrfn0q7jih] {
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: rgba(2, 6, 23, 0.12);
}

.opcion-version[b-mrfn0q7jih] {
    max-width: 760px;
}

.accion-carga[b-mrfn0q7jih] {
    padding: 14px 17px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.estado-seleccion[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
}

    .estado-seleccion > i[b-mrfn0q7jih] {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: rgba(148, 163, 184, 0.10);
    }

    .estado-seleccion > div[b-mrfn0q7jih] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .estado-seleccion strong[b-mrfn0q7jih] {
        color: inherit;
        font-size: 0.76rem;
    }

    .estado-seleccion span[b-mrfn0q7jih] {
        color: var(--rec-muted);
        font-size: 0.68rem;
        line-height: 1.35;
    }

    .estado-seleccion.listo[b-mrfn0q7jih] {
        color: #bbf7d0;
    }

        .estado-seleccion.listo > i[b-mrfn0q7jih] {
            color: #4ade80;
            background: rgba(34, 197, 94, 0.10);
        }

    .estado-seleccion.pendiente[b-mrfn0q7jih] {
        color: #fde68a;
    }

        .estado-seleccion.pendiente > i[b-mrfn0q7jih] {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.10);
        }

.accion-carga-botones[b-mrfn0q7jih] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.btn-principal[b-mrfn0q7jih],
.btn-secundario[b-mrfn0q7jih],
.btn-modal-primario[b-mrfn0q7jih],
.btn-modal-secundario[b-mrfn0q7jih],
.btn-texto[b-mrfn0q7jih] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.btn-principal[b-mrfn0q7jih],
.btn-modal-primario[b-mrfn0q7jih] {
    min-width: 150px;
    padding: 0 16px;
    border: 1px solid #2563eb;
    color: #ffffff;
    background: #2563eb;
}

    .btn-principal:hover:not(:disabled)[b-mrfn0q7jih],
    .btn-modal-primario:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: #1d4ed8;
        background: #1d4ed8;
        transform: translateY(-1px);
    }

.btn-secundario[b-mrfn0q7jih],
.btn-modal-secundario[b-mrfn0q7jih] {
    padding: 0 14px;
    border: 1px solid #475569;
    color: #e2e8f0;
    background: #1e293b;
}

    .btn-secundario:hover:not(:disabled)[b-mrfn0q7jih],
    .btn-modal-secundario:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: #64748b;
        background: #334155;
    }

.btn-texto[b-mrfn0q7jih] {
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    color: #94a3b8;
    background: transparent;
}

    .btn-texto:hover:not(:disabled)[b-mrfn0q7jih] {
        color: #e2e8f0;
    }

    .btn-principal:disabled[b-mrfn0q7jih],
    .btn-secundario:disabled[b-mrfn0q7jih],
    .btn-modal-primario:disabled[b-mrfn0q7jih],
    .btn-modal-secundario:disabled[b-mrfn0q7jih],
    .btn-texto:disabled[b-mrfn0q7jih] {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
    }

/* ==========================================================
   MENSAJES
   ========================================================== */

.mensaje-inline[b-mrfn0q7jih] {
    margin: 0 17px 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
}

    .mensaje-inline i[b-mrfn0q7jih] {
        margin-top: 2px;
        flex: 0 0 auto;
    }

.mensaje-error[b-mrfn0q7jih] {
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.30);
    background: var(--rec-red-soft);
}

/* ==========================================================
   ESTADOS DE CARGA
   ========================================================== */

.estado-carga[b-mrfn0q7jih] {
    min-height: 126px;
    padding: 26px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--rec-muted);
    text-align: left;
}

.estado-carga-compacto[b-mrfn0q7jih] {
    min-height: 88px;
}

.estado-carga > div[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.estado-carga strong[b-mrfn0q7jih] {
    color: var(--rec-text-2);
    font-size: 0.82rem;
}

.estado-carga span:not(.spinner-circular)[b-mrfn0q7jih] {
    color: var(--rec-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.estado-carga-contenido[b-mrfn0q7jih] {
    width: min(640px, 100%);
}

.spinner-circular[b-mrfn0q7jih],
.spinner-boton[b-mrfn0q7jih] {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    animation: recibos-girar-b-mrfn0q7jih 0.75s linear infinite;
}

.spinner-circular[b-mrfn0q7jih] {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
}

.spinner-boton[b-mrfn0q7jih] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #ffffff;
}

.barra-progreso[b-mrfn0q7jih] {
    width: 100%;
    height: 6px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

    .barra-progreso > span[b-mrfn0q7jih] {
        height: 100%;
        display: block;
        border-radius: inherit;
        background: #3b82f6;
        transition: width 0.2s ease;
    }

@keyframes recibos-girar-b-mrfn0q7jih {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   RESULTADO PRINCIPAL
   ========================================================== */

.resultado-panel[b-mrfn0q7jih] {
    padding-bottom: 14px;
}

.resultado-principal[b-mrfn0q7jih] {
    margin: 15px 17px 12px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid;
    border-radius: 13px;
}

    .resultado-principal.success[b-mrfn0q7jih] {
        color: #dcfce7;
        border-color: rgba(34, 197, 94, 0.28);
        background: var(--rec-green-soft);
    }

    .resultado-principal.warning[b-mrfn0q7jih] {
        color: #fef3c7;
        border-color: rgba(245, 158, 11, 0.30);
        background: var(--rec-yellow-soft);
    }

    .resultado-principal.error[b-mrfn0q7jih] {
        color: #fee2e2;
        border-color: rgba(239, 68, 68, 0.30);
        background: var(--rec-red-soft);
    }

.resultado-principal-icono[b-mrfn0q7jih] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(2, 6, 23, 0.26);
    font-size: 1rem;
}

.resultado-principal > div[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resultado-principal strong[b-mrfn0q7jih] {
    color: inherit;
    font-size: 0.84rem;
}

.resultado-principal span:not(.resultado-principal-icono)[b-mrfn0q7jih] {
    color: inherit;
    font-size: 0.72rem;
    line-height: 1.45;
    opacity: 0.88;
}

.resultado-razon-detectada[b-mrfn0q7jih] {
    margin-top: 2px;
    font-weight: 700;
    opacity: 1 !important;
}

.resultado-cards[b-mrfn0q7jih] {
    padding: 0 17px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resultado-card[b-mrfn0q7jih] {
    min-width: 0;
    min-height: 92px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--rec-border);
    border-radius: 13px;
    color: inherit;
    background: rgba(15, 23, 42, 0.68);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

    .resultado-card:hover:not(:disabled)[b-mrfn0q7jih] {
        background: rgba(30, 41, 59, 0.80);
    }

    .resultado-card:disabled[b-mrfn0q7jih] {
        opacity: 0.46;
        cursor: default;
    }

    .resultado-card.cargados[b-mrfn0q7jih] {
        border-left: 3px solid #22c55e;
    }

    .resultado-card.revisar[b-mrfn0q7jih] {
        border-left: 3px solid #f59e0b;
    }

    .resultado-card.cargados:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: rgba(34, 197, 94, 0.40);
    }

    .resultado-card.revisar:hover:not(:disabled)[b-mrfn0q7jih] {
        border-color: rgba(245, 158, 11, 0.42);
    }

.resultado-card-icono[b-mrfn0q7jih] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(2, 6, 23, 0.30);
    font-size: 1.05rem;
}

.resultado-card.cargados .resultado-card-icono[b-mrfn0q7jih] {
    color: #4ade80;
}

.resultado-card.revisar .resultado-card-icono[b-mrfn0q7jih] {
    color: #fbbf24;
}

.resultado-card-datos[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .resultado-card-datos small[b-mrfn0q7jih] {
        color: var(--rec-muted);
        font-size: 0.7rem;
        font-weight: 700;
    }

    .resultado-card-datos strong[b-mrfn0q7jih] {
        margin-top: 2px;
        color: var(--rec-text);
        font-size: 1.55rem;
        line-height: 1;
    }

    .resultado-card-datos em[b-mrfn0q7jih] {
        margin-top: 5px;
        color: var(--rec-muted);
        font-size: 0.68rem;
        font-style: normal;
    }

.resultado-card > i[b-mrfn0q7jih] {
    color: #64748b;
    font-size: 0.7rem;
}

.resultado-acciones[b-mrfn0q7jih] {
    margin: 0 17px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 11px;
    background: rgba(2, 6, 23, 0.18);
}

    .resultado-acciones > span[b-mrfn0q7jih] {
        color: var(--rec-muted);
        font-size: 0.7rem;
        line-height: 1.45;
    }

/* ==========================================================
   MODALES
   ========================================================== */

.modal-archivos-backdrop[b-mrfn0q7jih] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000000000 !important;
    padding: 20px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    overscroll-behavior: none;
}

.modal-archivos[b-mrfn0q7jih] {
    width: min(900px, 100%);
    max-height: min(820px, calc(100dvh - 40px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    color: #f8fafc;
    background: #0f172a;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38);
}

    .modal-archivos.modal-resultado[b-mrfn0q7jih] {
        width: min(1220px, 100%);
    }

.modal-archivos-header[b-mrfn0q7jih] {
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    background: #1e293b;
}

.modal-archivos-titulo[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

    .modal-archivos-titulo > div[b-mrfn0q7jih] {
        min-width: 0;
    }

    .modal-archivos-titulo h2[b-mrfn0q7jih] {
        margin: 0;
        color: #f8fafc;
        font-size: 1rem;
        font-weight: 750;
    }

    .modal-archivos-titulo p[b-mrfn0q7jih] {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: 0.7rem;
        line-height: 1.4;
    }

.modal-archivos-icono[b-mrfn0q7jih],
.modal-archivo-icono[b-mrfn0q7jih] {
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.10);
}

.modal-archivos-icono[b-mrfn0q7jih] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 1rem;
}

.modal-archivo-icono[b-mrfn0q7jih] {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
}

.modal-archivos-icono.pdf[b-mrfn0q7jih],
.modal-archivo-row.pdf .modal-archivo-icono[b-mrfn0q7jih] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.11);
}


.modal-archivos-icono.advertencia[b-mrfn0q7jih] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.11);
}

.modal-archivos-icono.correcto[b-mrfn0q7jih] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.11);
}

.btn-cerrar-modal[b-mrfn0q7jih] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.52);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

    .btn-cerrar-modal:hover[b-mrfn0q7jih] {
        color: #ffffff;
        border-color: rgba(248, 113, 113, 0.28);
        background: rgba(239, 68, 68, 0.10);
    }

.modal-herramientas-simple[b-mrfn0q7jih] {
    padding: 11px 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
    background: #111827;
}

    .modal-herramientas-simple > span[b-mrfn0q7jih] {
        color: #94a3b8;
        font-size: 0.68rem;
        white-space: nowrap;
    }

.modal-buscador[b-mrfn0q7jih] {
    position: relative;
}

    .modal-buscador > i[b-mrfn0q7jih] {
        position: absolute;
        top: 50%;
        left: 12px;
        color: #64748b;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .modal-buscador input[b-mrfn0q7jih] {
        width: 100%;
        min-height: 40px;
        padding: 0 12px 0 36px;
        border: 1px solid #334155;
        border-radius: 10px;
        outline: none;
        color: #ffffff;
        background: #0f172a;
        font-size: 0.75rem;
    }

        .modal-buscador input[b-mrfn0q7jih]::placeholder {
            color: #64748b;
        }

        .modal-buscador input:focus[b-mrfn0q7jih] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.13);
        }

.modal-archivos-listado[b-mrfn0q7jih],
.modal-resultado-contenido[b-mrfn0q7jih] {
    min-height: 0;
    overflow: auto;
    background: #0b1220;
    overscroll-behavior: contain;
}

.modal-archivo-row[b-mrfn0q7jih] {
    min-height: 62px;
    padding: 9px 13px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    background: rgba(15, 23, 42, 0.82);
}

    .modal-archivo-row:last-child[b-mrfn0q7jih] {
        border-bottom: none;
    }

    .modal-archivo-row:hover[b-mrfn0q7jih] {
        background: rgba(30, 41, 59, 0.84);
    }

.modal-archivo-datos[b-mrfn0q7jih] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .modal-archivo-datos strong[b-mrfn0q7jih],
    .modal-archivo-datos span[b-mrfn0q7jih] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal-archivo-datos strong[b-mrfn0q7jih] {
        color: #e2e8f0;
        font-size: 0.75rem;
    }

    .modal-archivo-datos span[b-mrfn0q7jih] {
        color: #94a3b8;
        font-size: 0.66rem;
    }

    .modal-archivo-datos small[b-mrfn0q7jih] {
        color: #fbbf24;
        font-size: 0.65rem;
        line-height: 1.35;
    }

.btn-eliminar-item-modal[b-mrfn0q7jih] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
}

    .btn-eliminar-item-modal:hover[b-mrfn0q7jih] {
        color: #fecaca;
        border-color: rgba(248, 113, 113, 0.20);
        background: rgba(239, 68, 68, 0.10);
    }

.modal-vacio[b-mrfn0q7jih] {
    min-height: 250px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

    .modal-vacio > i[b-mrfn0q7jih] {
        margin-bottom: 6px;
        font-size: 1.7rem;
    }

    .modal-vacio strong[b-mrfn0q7jih] {
        color: #cbd5e1;
        font-size: 0.78rem;
    }

    .modal-vacio span[b-mrfn0q7jih] {
        color: #94a3b8;
        font-size: 0.7rem;
    }

.modal-archivos-footer[b-mrfn0q7jih] {
    padding: 11px 17px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    background: #1e293b;
}

/* ==========================================================
   TABLAS DE RESULTADO
   ========================================================== */

.tabla-wrapper-modal[b-mrfn0q7jih] {
    width: 100%;
    max-height: min(590px, calc(100dvh - 210px));
    overflow: auto;
}

.tabla-validacion[b-mrfn0q7jih] {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #e2e8f0;
    background: #0f172a;
}

.tabla-recibos-subidos[b-mrfn0q7jih] {
    min-width: 1040px;
}

.tabla-recibos-revision[b-mrfn0q7jih] {
    min-width: 1180px;
}

.tabla-validacion th[b-mrfn0q7jih] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    background: #1e293b;
    font-size: 0.64rem;
    font-weight: 800;
    text-align: left;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla-validacion td[b-mrfn0q7jih] {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    color: #dbe7f3;
    background: #0f172a;
    font-size: 0.7rem;
    line-height: 1.4;
    vertical-align: middle;
}

.tabla-validacion tbody tr:nth-child(even) td[b-mrfn0q7jih] {
    background: #111827;
}

.tabla-validacion tbody tr:hover td[b-mrfn0q7jih] {
    background: #1e293b;
}

.archivo-tabla[b-mrfn0q7jih] {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    color: #f1f5f9;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.observacion-tabla[b-mrfn0q7jih] {
    min-width: 280px;
    max-width: 430px;
    color: #b8c6d7 !important;
    white-space: normal;
}

.badge-estado[b-mrfn0q7jih] {
    min-width: 92px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

    .badge-estado.ok[b-mrfn0q7jih] {
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.30);
        background: rgba(34, 197, 94, 0.11);
    }

    .badge-estado.info[b-mrfn0q7jih] {
        color: #dbeafe;
        border-color: rgba(59, 130, 246, 0.30);
        background: rgba(59, 130, 246, 0.11);
    }

    .badge-estado.version[b-mrfn0q7jih] {
        color: #ddd6fe;
        border-color: rgba(139, 92, 246, 0.30);
        background: rgba(139, 92, 246, 0.11);
    }

    .badge-estado.advertencia[b-mrfn0q7jih],
    .badge-estado.sin_pdf[b-mrfn0q7jih] {
        color: #fef3c7;
        border-color: rgba(245, 158, 11, 0.32);
        background: rgba(245, 158, 11, 0.11);
    }

    .badge-estado.error[b-mrfn0q7jih] {
        color: #fecaca;
        border-color: rgba(239, 68, 68, 0.30);
        background: rgba(239, 68, 68, 0.11);
    }

    .badge-estado.neutral[b-mrfn0q7jih] {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.22);
        background: rgba(148, 163, 184, 0.09);
    }

/* ==========================================================
   CONFIRMACIÓN DE RAZÓN SOCIAL
   ========================================================== */

.modal-confirmacion-lugar-pago[b-mrfn0q7jih] {
    width: min(620px, 100%);
}

.modal-confirmacion-cuerpo[b-mrfn0q7jih] {
    padding: 18px;
    overflow: auto;
    color: #dbe7f3;
    background: #0b1220;
}

    .modal-confirmacion-cuerpo > p[b-mrfn0q7jih] {
        margin: 0 0 14px;
        color: #cbd5e1;
        font-size: 0.78rem;
        line-height: 1.55;
    }

.confirmacion-razon-destino[b-mrfn0q7jih] {
    margin: 12px 0 16px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 11px;
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.10);
}

    .confirmacion-razon-destino i[b-mrfn0q7jih] {
        color: #60a5fa;
    }

    .confirmacion-razon-destino strong[b-mrfn0q7jih] {
        color: #eff6ff;
        font-size: 0.82rem;
    }

.confirmacion-planilla[b-mrfn0q7jih] {
    margin-top: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.62);
}

    .confirmacion-planilla strong[b-mrfn0q7jih] {
        color: #e2e8f0;
        font-size: 0.72rem;
    }

    .confirmacion-planilla span[b-mrfn0q7jih] {
        color: #94a3b8;
        font-size: 0.68rem;
        line-height: 1.4;
    }

.confirmacion-pregunta[b-mrfn0q7jih] {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    color: #f8fafc !important;
    font-weight: 700;
}

/* ==========================================================
   SCROLLBARS
   ========================================================== */

.modal-archivos-listado[b-mrfn0q7jih]::-webkit-scrollbar,
.modal-resultado-contenido[b-mrfn0q7jih]::-webkit-scrollbar,
.tabla-wrapper-modal[b-mrfn0q7jih]::-webkit-scrollbar,
.modal-confirmacion-cuerpo[b-mrfn0q7jih]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.modal-archivos-listado[b-mrfn0q7jih]::-webkit-scrollbar-track,
.modal-resultado-contenido[b-mrfn0q7jih]::-webkit-scrollbar-track,
.tabla-wrapper-modal[b-mrfn0q7jih]::-webkit-scrollbar-track,
.modal-confirmacion-cuerpo[b-mrfn0q7jih]::-webkit-scrollbar-track {
    background: #0b1220;
}

.modal-archivos-listado[b-mrfn0q7jih]::-webkit-scrollbar-thumb,
.modal-resultado-contenido[b-mrfn0q7jih]::-webkit-scrollbar-thumb,
.tabla-wrapper-modal[b-mrfn0q7jih]::-webkit-scrollbar-thumb,
.modal-confirmacion-cuerpo[b-mrfn0q7jih]::-webkit-scrollbar-thumb {
    border: 2px solid #0b1220;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.34);
}

/* ==========================================================
   FOCO Y ACCESIBILIDAD
   ========================================================== */

.recibos-page button:focus-visible[b-mrfn0q7jih],
.recibos-page a:focus-visible[b-mrfn0q7jih],
.recibos-page label:focus-visible[b-mrfn0q7jih],
.modal-archivos button:focus-visible[b-mrfn0q7jih],
.modal-archivos input:focus-visible[b-mrfn0q7jih] {
    outline: 3px solid rgba(96, 165, 250, 0.50);
    outline-offset: 2px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
    .accion-carga[b-mrfn0q7jih] {
        grid-template-columns: 1fr;
    }

    .accion-carga-botones[b-mrfn0q7jih] {
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .recibos-page[b-mrfn0q7jih] {
        width: calc(100% - 16px);
        margin-top: 9px;
    }

    .recibos-header[b-mrfn0q7jih] {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .btn-reportes-recibos[b-mrfn0q7jih] {
        width: max-content;
    }

    .paso-header[b-mrfn0q7jih] {
        align-items: flex-start;
    }

    .dropzone-unificada[b-mrfn0q7jih] {
        min-height: 210px;
        margin-left: 12px;
        margin-right: 12px;
    }

    .archivos-resumen[b-mrfn0q7jih] {
        padding-left: 12px;
        padding-right: 12px;
        grid-template-columns: 1fr;
    }


    .razon-contenido[b-mrfn0q7jih],
    .opciones-carga[b-mrfn0q7jih],
    .accion-carga[b-mrfn0q7jih] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .resultado-cards[b-mrfn0q7jih] {
        padding-left: 12px;
        padding-right: 12px;
        grid-template-columns: 1fr;
    }

    .resultado-principal[b-mrfn0q7jih],
    .resultado-acciones[b-mrfn0q7jih] {
        margin-left: 12px;
        margin-right: 12px;
    }

    .resultado-acciones[b-mrfn0q7jih] {
        align-items: stretch;
        flex-direction: column;
    }

        .resultado-acciones .btn-secundario[b-mrfn0q7jih] {
            width: 100%;
        }

    .modal-archivos-backdrop[b-mrfn0q7jih] {
        padding: 8px;
        place-items: stretch;
    }

    .modal-archivos[b-mrfn0q7jih],
    .modal-archivos.modal-resultado[b-mrfn0q7jih] {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 13px;
    }

    .modal-herramientas-simple[b-mrfn0q7jih] {
        grid-template-columns: 1fr;
    }

        .modal-herramientas-simple > span[b-mrfn0q7jih] {
            white-space: normal;
        }
}

@media (max-width: 520px) {
    .recibos-page[b-mrfn0q7jih] {
        width: calc(100% - 10px);
        margin: 5px auto 24px;
    }

    .recibos-header[b-mrfn0q7jih] {
        padding-left: 4px;
        padding-right: 4px;
    }

        .recibos-header h1[b-mrfn0q7jih] {
            font-size: 1.5rem;
        }

    .btn-reportes-recibos[b-mrfn0q7jih] {
        width: 100%;
    }

    .paso-header[b-mrfn0q7jih] {
        padding: 12px;
    }

        .paso-header p[b-mrfn0q7jih] {
            display: none;
        }

    .dropzone-unificada[b-mrfn0q7jih] {
        margin: 10px;
        min-height: 220px;
    }

    .dropzone-contenido[b-mrfn0q7jih] {
        width: 100%;
        padding: 22px 12px;
    }

    .dropzone-acciones[b-mrfn0q7jih] {
        width: 100%;
        flex-direction: column;
    }

    .btn-seleccionar[b-mrfn0q7jih] {
        width: 100%;
    }

    .archivos-resumen[b-mrfn0q7jih],
    .razon-contenido[b-mrfn0q7jih],
    .opciones-carga[b-mrfn0q7jih],
    .accion-carga[b-mrfn0q7jih],
    .resultado-cards[b-mrfn0q7jih] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .accion-carga-botones[b-mrfn0q7jih] {
        width: 100%;
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .btn-principal[b-mrfn0q7jih],
    .btn-texto[b-mrfn0q7jih] {
        width: 100%;
    }

    .resultado-principal[b-mrfn0q7jih],
    .resultado-acciones[b-mrfn0q7jih] {
        margin-left: 10px;
        margin-right: 10px;
    }

    .resultado-principal[b-mrfn0q7jih] {
        align-items: flex-start;
    }

    .modal-archivos-header[b-mrfn0q7jih] {
        padding: 12px;
    }

    .modal-archivos-titulo p[b-mrfn0q7jih] {
        display: none;
    }

    .modal-herramientas-simple[b-mrfn0q7jih],
    .modal-archivos-footer[b-mrfn0q7jih] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .modal-archivos-footer[b-mrfn0q7jih] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btn-modal-secundario[b-mrfn0q7jih],
    .btn-modal-primario[b-mrfn0q7jih] {
        width: 100%;
    }

    .modal-archivo-row[b-mrfn0q7jih] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal-confirmacion-cuerpo[b-mrfn0q7jih] {
        padding: 14px;
    }
}

/* ==========================================================
   MOVIMIENTO REDUCIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .recibos-page *[b-mrfn0q7jih],
    .recibos-page *[b-mrfn0q7jih]::before,
    .recibos-page *[b-mrfn0q7jih]::after,
    .modal-archivos[b-mrfn0q7jih],
    .modal-archivos *[b-mrfn0q7jih],
    .modal-archivos-backdrop[b-mrfn0q7jih] {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/TicketAdmin.razor.rz.scp.css */
/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.ticket-admin-container[b-epjoulsaa1] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    color: #f4f7fb;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.ticket-header-admin[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.ticket-title-group[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ticket-title-icon[b-epjoulsaa1] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: rgba(77, 163, 255, 0.12);
    border: 1px solid rgba(77, 163, 255, 0.24);
    font-size: 23px;
}

.ticket-header-admin h2[b-epjoulsaa1] {
    margin: 0;
    color: #ffffff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
}

.ticket-subtitle[b-epjoulsaa1] {
    margin-top: 4px;
    color: #94a8c3;
    font-size: 14px;
}


/* =========================================================
   ESTADO
   ========================================================= */

.estado-pill[b-epjoulsaa1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

    .estado-pill.abierto[b-epjoulsaa1] {
        color: #ffda57;
        background: rgba(255, 193, 7, 0.13);
        border: 1px solid rgba(255, 193, 7, 0.3);
    }

    .estado-pill.enanalisis[b-epjoulsaa1] {
        color: #60d4ee;
        background: rgba(23, 162, 184, 0.15);
        border: 1px solid rgba(23, 162, 184, 0.34);
    }

    .estado-pill.cerrado[b-epjoulsaa1] {
        color: #6de29b;
        background: rgba(40, 167, 69, 0.14);
        border: 1px solid rgba(40, 167, 69, 0.32);
    }

    .estado-pill.sin-estado[b-epjoulsaa1] {
        color: #c6d1df;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }


/* =========================================================
   CARDS
   ========================================================= */

.ticket-card[b-epjoulsaa1] {
    margin-bottom: 20px;
    padding: 22px;
    background: linear-gradient( 145deg, rgba(24, 43, 68, 0.90), rgba(15, 29, 48, 0.93) );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.section-header[b-epjoulsaa1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .section-header h3[b-epjoulsaa1] {
        margin: 0 0 4px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 650;
    }

    .section-header p[b-epjoulsaa1] {
        margin: 0;
        color: #899db7;
        font-size: 13px;
    }


/* =========================================================
   INFORMACIÓN DEL TICKET
   ========================================================= */

.ticket-info-grid[b-epjoulsaa1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.info-item[b-epjoulsaa1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(5, 15, 29, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
}

.info-item-full[b-epjoulsaa1] {
    grid-column: 1 / -1;
}

.info-label[b-epjoulsaa1] {
    margin-bottom: 5px;
    color: #8fa5c0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.info-value[b-epjoulsaa1] {
    color: #f2f6fb;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.info-secondary[b-epjoulsaa1] {
    margin-top: 4px;
    color: #8296ae;
    font-size: 12px;
    font-weight: 400;
}

.motivo-item[b-epjoulsaa1] {
    border-left: 3px solid #4da3ff;
}

.detalle-item[b-epjoulsaa1] {
    background: rgba(77, 163, 255, 0.055);
    border-color: rgba(77, 163, 255, 0.12);
}

.detalle-texto[b-epjoulsaa1] {
    font-weight: 400;
    white-space: pre-wrap;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.historial-card[b-epjoulsaa1] {
    padding-bottom: 18px;
}

.contador-mensajes[b-epjoulsaa1] {
    padding: 5px 10px;
    color: #9fb3cc;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.chat-box[b-epjoulsaa1] {
    max-height: 440px;
    overflow-y: auto;
    padding: 16px;
    background: rgba(4, 13, 25, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    scroll-behavior: smooth;
}


    /* SCROLLBAR */

    .chat-box[b-epjoulsaa1]::-webkit-scrollbar {
        width: 8px;
    }

    .chat-box[b-epjoulsaa1]::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-box[b-epjoulsaa1]::-webkit-scrollbar-thumb {
        background: rgba(130, 151, 177, 0.35);
        border-radius: 999px;
    }

        .chat-box[b-epjoulsaa1]::-webkit-scrollbar-thumb:hover {
            background: rgba(130, 151, 177, 0.55);
        }


/* =========================================================
   FILAS DEL CHAT
   ========================================================= */

.chat-row[b-epjoulsaa1] {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
}

    .chat-row:last-child[b-epjoulsaa1] {
        margin-bottom: 0;
    }

    .chat-row.admin[b-epjoulsaa1] {
        justify-content: flex-end;
    }

    .chat-row.empleado[b-epjoulsaa1] {
        justify-content: flex-start;
    }


/* =========================================================
   BURBUJAS DEL CHAT
   ========================================================= */

.chat-mensaje[b-epjoulsaa1] {
    width: fit-content;
    max-width: min(72%, 700px);
    padding: 10px 13px 11px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

    .chat-mensaje.admin[b-epjoulsaa1] {
        color: #ffffff;
        background: linear-gradient( 135deg, #1467cc, #0d6efd );
        border-bottom-right-radius: 4px;
        box-shadow: 0 4px 14px rgba(13, 110, 253, 0.16);
    }

    .chat-mensaje.empleado[b-epjoulsaa1] {
        color: #edf3fa;
        background: #243b58;
        border: 1px solid rgba(255, 255, 255, 0.055);
        border-bottom-left-radius: 4px;
    }


/* =========================================================
   HEADER DEL MENSAJE
   ========================================================= */

.chat-header[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 5px;
}

.chat-author[b-epjoulsaa1] {
    font-size: 11px;
    font-weight: 700;
}

.chat-date[b-epjoulsaa1] {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.72;
    white-space: nowrap;
}

.chat-body[b-epjoulsaa1] {
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}


/* =========================================================
   CHAT SIN MENSAJES
   ========================================================= */

.chat-sin-mensajes[b-epjoulsaa1] {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #8296af;
    text-align: center;
}

.chat-sin-mensajes-icono[b-epjoulsaa1] {
    margin-bottom: 5px;
    font-size: 26px;
    opacity: 0.8;
}

.chat-sin-mensajes strong[b-epjoulsaa1] {
    color: #bcc9d8;
    font-size: 14px;
}

.chat-sin-mensajes span[b-epjoulsaa1] {
    max-width: 420px;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   RESPUESTA
   ========================================================= */

.bloque-respuesta[b-epjoulsaa1] {
    margin-bottom: 18px;
}

.textarea-respuesta[b-epjoulsaa1] {
    width: 100%;
    min-height: 115px;
    resize: vertical;
    box-sizing: border-box;
    padding: 13px 15px;
    color: #f4f7fb;
    background: #0d2037;
    border: 1px solid #344d6c;
    border-radius: 11px;
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .textarea-respuesta[b-epjoulsaa1]::placeholder {
        color: #71869f;
    }

    .textarea-respuesta:hover[b-epjoulsaa1] {
        border-color: #49688c;
    }

    .textarea-respuesta:focus[b-epjoulsaa1] {
        background: #102640;
        border-color: #4da3ff;
        box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.12);
    }

    .textarea-respuesta:disabled[b-epjoulsaa1] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.respuesta-footer[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.respuesta-ayuda[b-epjoulsaa1] {
    color: #7288a2;
    font-size: 11px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.acciones-admin[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

    .acciones-admin button[b-epjoulsaa1],
    .btn-volver[b-epjoulsaa1] {
        min-height: 40px;
        padding: 9px 17px;
        border: none;
        border-radius: 9px;
        font-family: 'Segoe UI', sans-serif;
        font-size: 13px;
        font-weight: 650;
        cursor: pointer;
        transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }

        .acciones-admin button:not(:disabled):hover[b-epjoulsaa1],
        .btn-volver:not(:disabled):hover[b-epjoulsaa1] {
            transform: translateY(-1px);
        }

        .acciones-admin button:disabled[b-epjoulsaa1],
        .btn-volver:disabled[b-epjoulsaa1] {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }


/* ENVIAR */

.btn-enviar[b-epjoulsaa1] {
    color: #ffffff;
    background: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.18);
}

    .btn-enviar:not(:disabled):hover[b-epjoulsaa1] {
        background: #237cf1;
    }


/* CERRAR */

.btn-cerrar-ticket[b-epjoulsaa1] {
    color: #ffb9c0;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.25) !important;
}

    .btn-cerrar-ticket:not(:disabled):hover[b-epjoulsaa1] {
        color: #ffffff;
        background: #c93847;
    }


/* VOLVER */

.ticket-footer[b-epjoulsaa1] {
    display: flex;
    justify-content: flex-start;
}

.btn-volver[b-epjoulsaa1] {
    color: #d6e2ef;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

    .btn-volver:not(:disabled):hover[b-epjoulsaa1] {
        background: rgba(255, 255, 255, 0.11);
    }


/* =========================================================
   TICKET CERRADO
   ========================================================= */

.ticket-cerrado-msg[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: #a7b7c9;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
}

.ticket-cerrado-icono[b-epjoulsaa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 10px;
}

.ticket-cerrado-msg strong[b-epjoulsaa1] {
    display: block;
    margin-bottom: 2px;
    color: #d8e1eb;
}

.ticket-cerrado-msg p[b-epjoulsaa1] {
    margin: 0;
    font-size: 13px;
}


/* =========================================================
   MENSAJES DE OPERACIÓN
   ========================================================= */

.mensaje-operacion[b-epjoulsaa1] {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.mensaje-ok[b-epjoulsaa1] {
    color: #8ce8ac;
    background: rgba(40, 167, 69, 0.12);
    border: 1px solid rgba(40, 167, 69, 0.26);
}

.mensaje-error[b-epjoulsaa1] {
    color: #ffabb4;
    background: rgba(220, 53, 69, 0.11);
    border: 1px solid rgba(220, 53, 69, 0.26);
}


/* =========================================================
   SIN ACCESO / NO ENCONTRADO
   ========================================================= */

.ticket-estado-pagina[b-epjoulsaa1] {
    max-width: 620px;
    margin: 80px auto;
    padding: 36px;
    text-align: center;
    background: rgba(20, 37, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.ticket-estado-icono[b-epjoulsaa1] {
    margin-bottom: 12px;
    font-size: 34px;
}

.ticket-estado-pagina h3[b-epjoulsaa1] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 21px;
}

.ticket-estado-pagina p[b-epjoulsaa1] {
    margin: 0 0 22px;
    color: #94a6bb;
    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-overlay[b-epjoulsaa1] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(3, 10, 19, 0.76);
    backdrop-filter: blur(3px);
}

.spinner[b-epjoulsaa1] {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, 0.13);
    border-top-color: #4da3ff;
    border-radius: 50%;
    animation: ticket-spin-b-epjoulsaa1 0.8s linear infinite;
}

.loading-text[b-epjoulsaa1] {
    color: #dce7f3;
    font-size: 14px;
    font-weight: 600;
}

@keyframes ticket-spin-b-epjoulsaa1 {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .ticket-admin-container[b-epjoulsaa1] {
        padding: 20px 14px 30px;
    }

    .ticket-header-admin[b-epjoulsaa1] {
        align-items: flex-start;
    }

        .ticket-header-admin h2[b-epjoulsaa1] {
            font-size: 22px;
        }

    .ticket-info-grid[b-epjoulsaa1] {
        grid-template-columns: 1fr;
    }

    .info-item-full[b-epjoulsaa1] {
        grid-column: auto;
    }

    .chat-mensaje[b-epjoulsaa1] {
        max-width: 88%;
    }

    .respuesta-footer[b-epjoulsaa1] {
        flex-direction: column;
        align-items: stretch;
    }

    .acciones-admin[b-epjoulsaa1] {
        width: 100%;
    }

        .acciones-admin button[b-epjoulsaa1] {
            flex: 1;
        }
}


@media (max-width: 520px) {

    .ticket-header-admin[b-epjoulsaa1] {
        flex-direction: column;
    }

    .estado-pill[b-epjoulsaa1] {
        margin-left: 62px;
    }

    .ticket-card[b-epjoulsaa1] {
        padding: 17px;
        border-radius: 13px;
    }

    .chat-box[b-epjoulsaa1] {
        padding: 10px;
    }

    .chat-mensaje[b-epjoulsaa1] {
        max-width: 94%;
    }

    .chat-header[b-epjoulsaa1] {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .acciones-admin[b-epjoulsaa1] {
        flex-direction: column-reverse;
    }

        .acciones-admin button[b-epjoulsaa1] {
            width: 100%;
        }
}
/* /Components/Pages/TicketEmpleado.razor.rz.scp.css */
/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.ticket-empleado-container[b-h0s7yonhqr] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    color: #f4f7fb;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.ticket-header[b-h0s7yonhqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.ticket-title-group[b-h0s7yonhqr] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ticket-title-icon[b-h0s7yonhqr] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: rgba(77, 163, 255, 0.12);
    border: 1px solid rgba(77, 163, 255, 0.24);
    font-size: 23px;
}

.ticket-header h2[b-h0s7yonhqr] {
    margin: 0;
    color: #ffffff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
}

.ticket-subtitle[b-h0s7yonhqr] {
    margin-top: 4px;
    color: #94a8c3;
    font-size: 14px;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.estado-pill[b-h0s7yonhqr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

    .estado-pill.abierto[b-h0s7yonhqr] {
        color: #ffda57;
        background: rgba(255, 193, 7, 0.13);
        border: 1px solid rgba(255, 193, 7, 0.3);
    }

    .estado-pill.enanalisis[b-h0s7yonhqr] {
        color: #60d4ee;
        background: rgba(23, 162, 184, 0.15);
        border: 1px solid rgba(23, 162, 184, 0.34);
    }

    .estado-pill.cerrado[b-h0s7yonhqr] {
        color: #6de29b;
        background: rgba(40, 167, 69, 0.14);
        border: 1px solid rgba(40, 167, 69, 0.32);
    }

    .estado-pill.sin-estado[b-h0s7yonhqr] {
        color: #c6d1df;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }


/* =========================================================
   CARDS
   ========================================================= */

.ticket-card[b-h0s7yonhqr] {
    margin-bottom: 20px;
    padding: 22px;
    background: linear-gradient( 145deg, rgba(24, 43, 68, 0.90), rgba(15, 29, 48, 0.93) );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.section-header[b-h0s7yonhqr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .section-header h3[b-h0s7yonhqr] {
        margin: 0 0 4px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 650;
    }

    .section-header p[b-h0s7yonhqr] {
        margin: 0;
        color: #899db7;
        font-size: 13px;
    }


/* =========================================================
   INFORMACIÓN DEL TICKET
   ========================================================= */

.ticket-info-grid[b-h0s7yonhqr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.info-item[b-h0s7yonhqr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(5, 15, 29, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
}

.info-item-full[b-h0s7yonhqr] {
    grid-column: 1 / -1;
}

.info-label[b-h0s7yonhqr] {
    margin-bottom: 5px;
    color: #8fa5c0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.info-value[b-h0s7yonhqr] {
    color: #f2f6fb;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.info-secondary[b-h0s7yonhqr] {
    margin-top: 4px;
    color: #8296ae;
    font-size: 12px;
    font-weight: 400;
}


/* Motivo */

.motivo-item[b-h0s7yonhqr] {
    border-left: 3px solid #4da3ff;
}


/* Detalle */

.detalle-item[b-h0s7yonhqr] {
    background: rgba(77, 163, 255, 0.055);
    border-color: rgba(77, 163, 255, 0.12);
}

.detalle-texto[b-h0s7yonhqr] {
    font-weight: 400;
    white-space: pre-wrap;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.historial-card[b-h0s7yonhqr] {
    padding-bottom: 18px;
}

.contador-mensajes[b-h0s7yonhqr] {
    padding: 5px 10px;
    color: #9fb3cc;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   CHAT
   ========================================================= */

.chat-container[b-h0s7yonhqr] {
    max-height: 440px;
    min-height: 180px;
    overflow-y: auto;
    padding: 16px;
    background: rgba(4, 13, 25, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    scroll-behavior: smooth;
}


    /* Scroll */

    .chat-container[b-h0s7yonhqr]::-webkit-scrollbar {
        width: 8px;
    }

    .chat-container[b-h0s7yonhqr]::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-container[b-h0s7yonhqr]::-webkit-scrollbar-thumb {
        background: rgba(130, 151, 177, 0.35);
        border-radius: 999px;
    }

        .chat-container[b-h0s7yonhqr]::-webkit-scrollbar-thumb:hover {
            background: rgba(130, 151, 177, 0.55);
        }


/* =========================================================
   FILAS DEL CHAT
   ========================================================= */

.chat-row[b-h0s7yonhqr] {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
}

    .chat-row:last-child[b-h0s7yonhqr] {
        margin-bottom: 0;
    }


    /* Mensaje propio */

    .chat-row.empleado[b-h0s7yonhqr] {
        justify-content: flex-end;
    }


    /* Administración */

    .chat-row.admin[b-h0s7yonhqr] {
        justify-content: flex-start;
    }


/* =========================================================
   BURBUJAS
   ========================================================= */

.chat-bubble[b-h0s7yonhqr] {
    width: fit-content;
    max-width: min(72%, 700px);
    padding: 10px 13px 11px;
    color: #edf3fa;
    background: #243b58;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}


/* Empleado = mensaje propio */

.chat-row.empleado .chat-bubble[b-h0s7yonhqr] {
    color: #ffffff;
    background: linear-gradient( 135deg, #1467cc, #0d6efd );
    border-color: transparent;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.16);
}


/* =========================================================
   ENCABEZADO DEL MENSAJE
   ========================================================= */

.chat-header[b-h0s7yonhqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 5px;
}

.chat-author[b-h0s7yonhqr] {
    font-size: 11px;
    font-weight: 700;
}

.chat-time[b-h0s7yonhqr] {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.72;
    white-space: nowrap;
}

.chat-msg-text[b-h0s7yonhqr] {
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}


/* =========================================================
   SIN MENSAJES
   ========================================================= */

.chat-sin-mensajes[b-h0s7yonhqr] {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #8296af;
    text-align: center;
}

.chat-sin-mensajes-icono[b-h0s7yonhqr] {
    margin-bottom: 5px;
    font-size: 26px;
    opacity: 0.8;
}

.chat-sin-mensajes strong[b-h0s7yonhqr] {
    color: #bcc9d8;
    font-size: 14px;
}

.chat-sin-mensajes span[b-h0s7yonhqr] {
    max-width: 420px;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   RESPUESTA
   ========================================================= */

.bloque-respuesta[b-h0s7yonhqr] {
    margin-bottom: 18px;
}

.textarea-respuesta[b-h0s7yonhqr] {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    box-sizing: border-box;
    padding: 13px 15px;
    color: #f4f7fb;
    background: #0d2037;
    border: 1px solid #344d6c;
    border-radius: 11px;
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .textarea-respuesta[b-h0s7yonhqr]::placeholder {
        color: #71869f;
    }

    .textarea-respuesta:hover[b-h0s7yonhqr] {
        border-color: #49688c;
    }

    .textarea-respuesta:focus[b-h0s7yonhqr] {
        background: #102640;
        border-color: #4da3ff;
        box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.12);
    }

    .textarea-respuesta:disabled[b-h0s7yonhqr] {
        opacity: 0.65;
        cursor: not-allowed;
    }


/* =========================================================
   FOOTER DE RESPUESTA
   ========================================================= */

.respuesta-footer[b-h0s7yonhqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.respuesta-ayuda[b-h0s7yonhqr] {
    color: #7288a2;
    font-size: 11px;
}


/* =========================================================
   BOTÓN ENVIAR
   ========================================================= */

.btn-enviar[b-h0s7yonhqr] {
    min-width: 135px;
    min-height: 40px;
    padding: 9px 17px;
    color: #ffffff;
    background: #0d6efd;
    border: none;
    border-radius: 9px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.18);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .btn-enviar:not(:disabled):hover[b-h0s7yonhqr] {
        background: #237cf1;
        transform: translateY(-1px);
    }

    .btn-enviar:disabled[b-h0s7yonhqr] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }


/* =========================================================
   TICKET CERRADO
   ========================================================= */

.ticket-cerrado-msg[b-h0s7yonhqr] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: #a7b7c9;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
}

.ticket-cerrado-icono[b-h0s7yonhqr] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 10px;
}

.ticket-cerrado-msg strong[b-h0s7yonhqr] {
    display: block;
    margin-bottom: 2px;
    color: #d8e1eb;
}

.ticket-cerrado-msg p[b-h0s7yonhqr] {
    margin: 0;
    font-size: 13px;
}


/* =========================================================
   VOLVER
   ========================================================= */

.ticket-footer[b-h0s7yonhqr] {
    display: flex;
    justify-content: flex-start;
}

.btn-volver[b-h0s7yonhqr] {
    min-height: 40px;
    padding: 9px 17px;
    color: #d6e2ef;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

    .btn-volver:not(:disabled):hover[b-h0s7yonhqr] {
        background: rgba(255, 255, 255, 0.11);
        transform: translateY(-1px);
    }

    .btn-volver:disabled[b-h0s7yonhqr] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }


/* =========================================================
   SIN ACCESO
   ========================================================= */

.ticket-estado-pagina[b-h0s7yonhqr] {
    max-width: 620px;
    margin: 80px auto;
    padding: 36px;
    color: #f4f7fb;
    text-align: center;
    background: rgba(20, 37, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.ticket-estado-icono[b-h0s7yonhqr] {
    margin-bottom: 12px;
    font-size: 34px;
}

.ticket-estado-pagina h3[b-h0s7yonhqr] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 21px;
}

.ticket-estado-pagina p[b-h0s7yonhqr] {
    margin: 0 0 22px;
    color: #94a6bb;
    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-overlay[b-h0s7yonhqr] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(3, 10, 19, 0.76);
    backdrop-filter: blur(3px);
}

.spinner[b-h0s7yonhqr] {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, 0.13);
    border-top-color: #4da3ff;
    border-radius: 50%;
    animation: ticket-spin-b-h0s7yonhqr 0.8s linear infinite;
}

.loading-text[b-h0s7yonhqr] {
    color: #dce7f3;
    font-size: 14px;
    font-weight: 600;
}

@keyframes ticket-spin-b-h0s7yonhqr {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .ticket-empleado-container[b-h0s7yonhqr] {
        padding: 20px 14px 30px;
    }

    .ticket-header[b-h0s7yonhqr] {
        align-items: flex-start;
    }

        .ticket-header h2[b-h0s7yonhqr] {
            font-size: 22px;
        }

    .ticket-info-grid[b-h0s7yonhqr] {
        grid-template-columns: 1fr;
    }

    .info-item-full[b-h0s7yonhqr] {
        grid-column: auto;
    }

    .chat-bubble[b-h0s7yonhqr] {
        max-width: 88%;
    }

    .respuesta-footer[b-h0s7yonhqr] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-enviar[b-h0s7yonhqr] {
        align-self: flex-end;
    }
}


@media (max-width: 520px) {

    .ticket-header[b-h0s7yonhqr] {
        flex-direction: column;
    }

    .estado-pill[b-h0s7yonhqr] {
        margin-left: 62px;
    }

    .ticket-card[b-h0s7yonhqr] {
        padding: 17px;
        border-radius: 13px;
    }

    .chat-container[b-h0s7yonhqr] {
        padding: 10px;
    }

    .chat-bubble[b-h0s7yonhqr] {
        max-width: 94%;
    }

    .chat-header[b-h0s7yonhqr] {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .respuesta-footer[b-h0s7yonhqr] {
        align-items: stretch;
    }

    .btn-enviar[b-h0s7yonhqr] {
        width: 100%;
    }
}
/* /Components/Pages/Vacaciones.razor.rz.scp.css */
/* ==========================================================
   BLOQUE VACACIONES
   ALINEADO CON LICENCIAS
   ========================================================== */

.bloque-vacaciones[b-w7znq8j54p] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 22px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    margin-top: 0;
}

.contenedor-alineado[b-w7znq8j54p] {
    max-width: 1400px;
    margin-inline: auto;
    width: 100%;
    display: grid;
    gap: 22px;
}

/* ==========================================================
   FILA 1
   ========================================================== */

.bloque-vacaciones .fila-1[b-w7znq8j54p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
    margin: 0 auto;
}

    .bloque-vacaciones .fila-1 .col-dato[b-w7znq8j54p] {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        align-items: center;
    }

    .bloque-vacaciones .fila-1 .grupo-cuadrante[b-w7znq8j54p] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .bloque-vacaciones .fila-1 .col-dato label[b-w7znq8j54p],
        .bloque-vacaciones .fila-1 .grupo-cuadrante label[b-w7znq8j54p] {
            width: 70%;
            min-width: 180px;
            max-width: 260px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 4px;
            color: #dbe4f0;
            text-align: left;
            line-height: 1.35;
        }

        .bloque-vacaciones .fila-1 .col-dato span[b-w7znq8j54p],
        .bloque-vacaciones .fila-1 .grupo-cuadrante span[b-w7znq8j54p] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70%;
            min-width: 180px;
            max-width: 260px;
            min-height: 36px;
            padding: 0 10px;
            font-size: 0.95rem;
            font-weight: 600;
            text-align: center;
            background-color: #ffffff10;
            color: white;
            border: 1px solid #ffffff33;
            border-radius: 10px;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.bloque-vacaciones .restante-ok[b-w7znq8j54p],
.bloque-vacaciones .restante-cero[b-w7znq8j54p] {
    width: 70%;
    min-width: 180px;
    max-width: 260px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
}

.bloque-vacaciones .restante-ok[b-w7znq8j54p] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 200, 100, 0.16);
    border: 1px solid rgba(0, 255, 120, 0.45);
    box-shadow: none;
}

.bloque-vacaciones .restante-cero[b-w7znq8j54p] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 0, 0.10);
    border: 1px solid rgba(255, 80, 80, 0.45);
    box-shadow: none;
}

/* ==========================================================
   FILA 3
   ========================================================== */

.bloque-vacaciones .fila-3[b-w7znq8j54p] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    grid-template-areas:
        "desde      hasta       observaciones"
        "cantidad   cantidad    botones";
    column-gap: 16px;
    row-gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #ffffff22;
    border-radius: 12px;
    grid-column: 1 / -1;
}

    .bloque-vacaciones .fila-3 .col[b-w7znq8j54p] {
        display: flex;
        flex-direction: column;
    }

        .bloque-vacaciones .fila-3 .col label[b-w7znq8j54p] {
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 6px;
            color: #dbe4f0;
            text-align: left;
        }

.bloque-vacaciones .col-observaciones textarea[b-w7znq8j54p] {
    height: 50px;
    resize: vertical;
    width: 100%;
    max-width: 520px;
}

/* ==========================================================
   CANTIDAD / CORRIDOS
   ========================================================== */

.bloque-vacaciones .bloque-cantidad-corridos[b-w7znq8j54p] {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0;
}

.bloque-vacaciones .grupo-campo[b-w7znq8j54p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bloque-vacaciones .input-corto[b-w7znq8j54p] {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.bloque-vacaciones .cuadrante-corridos[b-w7znq8j54p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    max-width: 120px;
    height: 36px;
    line-height: 36px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    background-color: #ffffff10;
    color: white;
    border: 1px solid #ffffff33;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 10px;
}

/* ==========================================================
   INPUTS / SELECT / TEXTAREA
   ========================================================== */

.bloque-vacaciones input[type="text"][b-w7znq8j54p],
.bloque-vacaciones input[type="date"][b-w7znq8j54p],
.bloque-vacaciones input[type="datetime-local"][b-w7znq8j54p],
.bloque-vacaciones input[type="number"][b-w7znq8j54p],
.bloque-vacaciones select[b-w7znq8j54p] {
    width: 60%;
    min-width: 190px;
    max-width: 340px;
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.95rem;
    background-color: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bloque-vacaciones textarea[b-w7znq8j54p] {
    width: 100%;
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.95rem;
    background-color: rgb(15, 30, 50);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border: 1px solid #334155;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .bloque-vacaciones input[b-w7znq8j54p]::placeholder,
    .bloque-vacaciones textarea[b-w7znq8j54p]::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    .bloque-vacaciones input:focus[b-w7znq8j54p],
    .bloque-vacaciones select:focus[b-w7znq8j54p],
    .bloque-vacaciones textarea:focus[b-w7znq8j54p] {
        outline: none;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }

.bloque-vacaciones select[b-w7znq8j54p],
.bloque-vacaciones option[b-w7znq8j54p] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

    .bloque-vacaciones select option[b-w7znq8j54p] {
        background: #0f172a;
        color: #ffffff;
    }

.bloque-vacaciones input[type="date"][b-w7znq8j54p]::-webkit-calendar-picker-indicator,
.bloque-vacaciones input[type="datetime-local"][b-w7znq8j54p]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ==========================================================
   BOTONES
   ========================================================== */

.bloque-vacaciones .btn-guardar[b-w7znq8j54p],
.bloque-vacaciones .btn-cancelar[b-w7znq8j54p] {
    padding: 8px 14px;
    min-height: 40px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.bloque-vacaciones .btn-guardar[b-w7znq8j54p] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
}

    .bloque-vacaciones .btn-guardar:hover[b-w7znq8j54p] {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #15803d, #166534);
    }

.bloque-vacaciones .btn-cancelar[b-w7znq8j54p] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
}

    .bloque-vacaciones .btn-cancelar:hover[b-w7znq8j54p] {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #475569, #334155);
    }

/* ==========================================================
   CAMPOS DESHABILITADOS
   ========================================================== */

.bloque-vacaciones input[disabled][b-w7znq8j54p],
.bloque-vacaciones select[disabled][b-w7znq8j54p],
.bloque-vacaciones textarea[disabled][b-w7znq8j54p] {
    background-color: #2c2c2c !important;
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    border: 1px solid #555 !important;
    cursor: not-allowed !important;
    opacity: 0.75;
}

/* ==========================================================
   RESPONSIVE TABLET
   ========================================================== */

@media (max-width: 1100px) {
    .bloque-vacaciones .fila-1[b-w7znq8j54p] {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .bloque-vacaciones .fila-3[b-w7znq8j54p] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "desde hasta"
            "cantidad cantidad"
            "observaciones observaciones"
            "botones botones";
        column-gap: 16px;
        row-gap: 8px;
    }
}

/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 768px) {
    .bloque-vacaciones[b-w7znq8j54p] {
        gap: 14px;
        padding: 14px;
        margin-top: 0;
    }

        .bloque-vacaciones .fila-1[b-w7znq8j54p] {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bloque-vacaciones .fila-3[b-w7znq8j54p] {
            grid-template-columns: 1fr;
            grid-template-areas:
                "desde"
                "hasta"
                "cantidad"
                "observaciones"
                "botones";
            column-gap: 14px;
            row-gap: 8px;
        }

        .bloque-vacaciones input[type="text"][b-w7znq8j54p],
        .bloque-vacaciones input[type="date"][b-w7znq8j54p],
        .bloque-vacaciones input[type="datetime-local"][b-w7znq8j54p],
        .bloque-vacaciones input[type="number"][b-w7znq8j54p],
        .bloque-vacaciones select[b-w7znq8j54p],
        .bloque-vacaciones textarea[b-w7znq8j54p] {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .bloque-vacaciones .fila-1 .col-dato span[b-w7znq8j54p],
        .bloque-vacaciones .fila-1 .grupo-cuadrante span[b-w7znq8j54p],
        .bloque-vacaciones .restante-ok[b-w7znq8j54p],
        .bloque-vacaciones .restante-cero[b-w7znq8j54p] {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            white-space: normal;
            line-height: 1.3;
            height: auto;
            min-height: 40px;
            padding: 10px;
        }

        .bloque-vacaciones .fila-1 .col-dato label[b-w7znq8j54p],
        .bloque-vacaciones .fila-1 .grupo-cuadrante label[b-w7znq8j54p] {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .bloque-vacaciones .col-observaciones textarea[b-w7znq8j54p] {
            width: 100%;
            height: 100px;
            max-width: 100%;
        }

        .bloque-vacaciones .bloque-cantidad-corridos[b-w7znq8j54p] {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .bloque-vacaciones .input-corto[b-w7znq8j54p],
        .bloque-vacaciones .cuadrante-corridos[b-w7znq8j54p] {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
}
/* /Components/Reportes/TablaReporteGenerica.razor.rz.scp.css */
/* ==========================================================
   TABLA REPORTE GENÉRICA
   Estilo moderno / responsive / reutilizable
   ========================================================== */

/* ==========================================================
   PANEL GENERAL
   ========================================================== */

.panel-resultados-reporte[b-1ewjxqwktg] {
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 30, 50, 0.88), rgba(13, 24, 40, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e5edf7;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

.barra-resultados[b-1ewjxqwktg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

    .barra-resultados h3[b-1ewjxqwktg] {
        margin: 0;
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 750;
        letter-spacing: -0.015em;
    }

    .barra-resultados p[b-1ewjxqwktg] {
        margin: 5px 0 0 0;
        color: #aab8cc;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .barra-resultados strong[b-1ewjxqwktg] {
        color: #bfdbfe;
    }

.acciones-tabla-reporte[b-1ewjxqwktg] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ==========================================================
   BOTONES DE ACCIÓN DE TABLA
   ========================================================== */

.btn-limpiar-tabla[b-1ewjxqwktg] {
    min-height: 38px;
    border: 1px solid rgba(56, 189, 248, 0.26);
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.13);
    color: #bae6fd;
    padding: 8px 12px;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

    .btn-limpiar-tabla:hover[b-1ewjxqwktg] {
        background: rgba(14, 165, 233, 0.22);
        border-color: rgba(56, 189, 248, 0.42);
        color: #e0f2fe;
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.12);
    }

    .btn-limpiar-tabla:disabled[b-1ewjxqwktg] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ==========================================================
   CONTENEDOR TABLA
   ========================================================== */

.contenedor-tabla-reporte[b-1ewjxqwktg] {
    width: 100%;
    min-height: 420px;
    /*
       Limita únicamente la altura visual de la tabla.
       Los registros siguen cargados normalmente.
       Aproximadamente 20 filas visibles.
    */
    max-height: 760px;
    /*
       Scroll independiente:
       - rueda del mouse para desplazamiento vertical
       - barra horizontal siempre al pie del área visible
    */
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(2, 6, 23, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

    /* Scrollbar moderno */
    .contenedor-tabla-reporte[b-1ewjxqwktg]::-webkit-scrollbar,
    .menu-filtro[b-1ewjxqwktg]::-webkit-scrollbar,
    .lista-opciones-filtro[b-1ewjxqwktg]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .contenedor-tabla-reporte[b-1ewjxqwktg]::-webkit-scrollbar-track,
    .menu-filtro[b-1ewjxqwktg]::-webkit-scrollbar-track,
    .lista-opciones-filtro[b-1ewjxqwktg]::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.92);
        border-radius: 999px;
    }

    .contenedor-tabla-reporte[b-1ewjxqwktg]::-webkit-scrollbar-thumb,
    .menu-filtro[b-1ewjxqwktg]::-webkit-scrollbar-thumb,
    .lista-opciones-filtro[b-1ewjxqwktg]::-webkit-scrollbar-thumb {
        background: rgba(96, 165, 250, 0.36);
        border-radius: 999px;
        border: 2px solid rgba(15, 23, 42, 0.92);
    }

        .contenedor-tabla-reporte[b-1ewjxqwktg]::-webkit-scrollbar-thumb:hover,
        .menu-filtro[b-1ewjxqwktg]::-webkit-scrollbar-thumb:hover,
        .lista-opciones-filtro[b-1ewjxqwktg]::-webkit-scrollbar-thumb:hover {
            background: rgba(96, 165, 250, 0.56);
        }

/* ==========================================================
   TABLA
   ========================================================== */

.tabla-estilo[b-1ewjxqwktg] {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    color: #e5edf7;
    font-size: 0.9rem;
}

    /* Encabezados sticky */
    .tabla-estilo thead th[b-1ewjxqwktg] {
        position: sticky;
        top: 0;
        z-index: 30;
        background: linear-gradient(180deg, #1d4ed8, #1e40af);
        color: #ffffff;
        text-align: left;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        white-space: nowrap;
    }

        .tabla-estilo thead th:first-child[b-1ewjxqwktg] {
            border-top-left-radius: 16px;
        }

        .tabla-estilo thead th:last-child[b-1ewjxqwktg] {
            border-top-right-radius: 16px;
            border-right: none;
        }

.th-contenido[b-1ewjxqwktg] {
    min-height: 48px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

    .th-contenido span[b-1ewjxqwktg] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Celdas */
.tabla-estilo tbody td[b-1ewjxqwktg] {
    padding: 10px 12px;
    color: #dbeafe;
    background: rgba(15, 30, 50, 0.96);
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    border-right: 1px solid rgba(148, 163, 184, 0.07);
    white-space: nowrap;
    vertical-align: middle;
    min-height: 48px;
}

    .tabla-estilo tbody td:last-child[b-1ewjxqwktg] {
        border-right: none;
    }

/* Zebra */
.tabla-estilo tbody tr:nth-child(even) td[b-1ewjxqwktg] {
    background: rgba(20, 40, 66, 0.96);
}

/* Hover */
.tabla-estilo tbody tr:hover td[b-1ewjxqwktg] {
    background: rgba(30, 64, 115, 0.96);
}

/* Columna filtrada */
.columna-filtrada .th-contenido[b-1ewjxqwktg] {
    background: rgba(34, 197, 94, 0.13);
    box-shadow: inset 0 -2px 0 rgba(134, 239, 172, 0.55);
}

/* ==========================================================
   BOTÓN DE FILTRO / ORDEN
   ========================================================== */

.btn-filtro-columna[b-1ewjxqwktg] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.11);
    color: #dbeafe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.12s ease, transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

    .btn-filtro-columna:hover[b-1ewjxqwktg] {
        background: rgba(255, 255, 255, 0.20);
        transform: translateY(-1px);
        box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
    }

.icono-filtrado[b-1ewjxqwktg] {
    color: #86efac;
}

/* ==========================================================
   MENÚ DESPLEGABLE
   ========================================================== */

.menu-filtro[b-1ewjxqwktg] {
    position: absolute;
    top: calc(100% - 2px);
    left: 8px;
    z-index: 5000;
    min-width: 285px;
    max-width: 340px;
    max-height: 420px;
    overflow-y: auto;
    background: linear-gradient(180deg, #0f172a, #111c31);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
    animation: filtroFade-b-1ewjxqwktg 0.13s ease-out;
}

.menu-filtro-avanzado[b-1ewjxqwktg] {
    min-width: 300px;
}

@keyframes filtroFade-b-1ewjxqwktg {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.menu-filtro strong[b-1ewjxqwktg] {
    display: block;
    color: #bfdbfe;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 10px;
    padding-right: 4px;
}

/* ==========================================================
   BLOQUES INTERNOS DEL MENÚ
   ========================================================== */

.bloque-menu-tabla[b-1ewjxqwktg] {
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    padding-top: 10px;
    margin-top: 10px;
}

    .bloque-menu-tabla:first-of-type[b-1ewjxqwktg] {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

.titulo-menu-tabla[b-1ewjxqwktg] {
    display: block;
    color: #93c5fd;
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    margin-bottom: 8px;
}

/* ==========================================================
   OPCIONES DE ORDENAMIENTO
   ========================================================== */

.opcion-orden[b-1ewjxqwktg] {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 11px;
    background: rgba(37, 99, 235, 0.14);
    color: #dbeafe;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    margin-bottom: 7px;
    text-align: left;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, color 0.12s ease;
}

    .opcion-orden:hover[b-1ewjxqwktg] {
        background: rgba(37, 99, 235, 0.26);
        border-color: rgba(96, 165, 250, 0.34);
        color: #ffffff;
        transform: translateX(2px);
    }

    .opcion-orden i[b-1ewjxqwktg] {
        width: 18px;
        color: #93c5fd;
        text-align: center;
    }

/* ==========================================================
   ACCIONES SELECCIONAR / QUITAR
   ========================================================== */

.acciones-todos[b-1ewjxqwktg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 10px;
}

    .acciones-todos button[b-1ewjxqwktg] {
        min-height: 34px;
        border: 1px solid rgba(56, 189, 248, 0.18);
        border-radius: 10px;
        background: rgba(14, 165, 233, 0.15);
        color: #dbeafe;
        font-size: 0.78rem;
        font-weight: 800;
        cursor: pointer;
        transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }

        .acciones-todos button:hover[b-1ewjxqwktg] {
            background: rgba(14, 165, 233, 0.26);
            border-color: rgba(56, 189, 248, 0.34);
            color: #ffffff;
            transform: translateY(-1px);
        }

/* ==========================================================
   OPCIONES CHECKBOX FILTRO
   ========================================================== */

.lista-opciones-filtro[b-1ewjxqwktg] {
    max-height: 210px;
    overflow-y: auto;
    padding-right: 2px;
}

.opcion-filtro[b-1ewjxqwktg] {
    border-radius: 10px;
    transition: background-color 0.12s ease, opacity 0.12s ease;
}

    .opcion-filtro:hover[b-1ewjxqwktg] {
        background: rgba(148, 163, 184, 0.10);
    }

    .opcion-filtro label[b-1ewjxqwktg] {
        width: 100%;
        min-height: 32px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 6px;
        cursor: pointer;
        color: #e2e8f0;
        font-size: 0.86rem;
        font-weight: 550;
    }

    .opcion-filtro input[type="checkbox"][b-1ewjxqwktg] {
        width: 15px;
        height: 15px;
        accent-color: #3b82f6;
        cursor: pointer;
        flex-shrink: 0;
    }

    .opcion-filtro span[b-1ewjxqwktg] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.opcion-inactiva[b-1ewjxqwktg] {
    opacity: 0.45;
}

/* ==========================================================
   SIN RESULTADOS
   ========================================================== */

.sin-resultados-reporte[b-1ewjxqwktg] {
    width: 100%;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: rgba(15, 30, 50, 0.66);
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    text-align: center;
    padding: 26px;
}

    .sin-resultados-reporte i[b-1ewjxqwktg] {
        font-size: 2rem;
        color: #60a5fa;
        margin-bottom: 10px;
    }

    .sin-resultados-reporte h4[b-1ewjxqwktg] {
        margin: 0 0 6px 0;
        color: #e2e8f0;
        font-size: 1rem;
    }

    .sin-resultados-reporte p[b-1ewjxqwktg] {
        margin: 0;
        color: #94a3b8;
    }

.tabla-sin-resultados[b-1ewjxqwktg] {
    height: 300px;
    text-align: center !important;
    vertical-align: top !important;
    padding-top: 38px !important;
    color: #bfdbfe !important;
    background: rgba(15, 23, 42, 0.92) !important;
    font-weight: 650;
    white-space: normal !important;
}

/* ==========================================================
   ESTADOS VISUALES EXTRA
   ========================================================== */

.tabla-estilo tbody tr.fila-activa td[b-1ewjxqwktg] {
    background: rgba(250, 204, 21, 0.85) !important;
    color: #0f172a !important;
    font-weight: 800;
}

.tabla-estilo tbody tr.fila-error td[b-1ewjxqwktg] {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fecaca !important;
}

.tabla-estilo tbody tr.fila-ok td[b-1ewjxqwktg] {
    background: rgba(34, 197, 94, 0.13) !important;
    color: #dcfce7 !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {
    .panel-resultados-reporte[b-1ewjxqwktg] {
        border-radius: 18px;
        padding: 14px;
    }

    .barra-resultados[b-1ewjxqwktg] {
        align-items: flex-start;
    }

    .tabla-estilo[b-1ewjxqwktg] {
        min-width: 980px;
    }

    .menu-filtro[b-1ewjxqwktg] {
        min-width: 270px;
    }
}

@media (max-width: 760px) {
    .panel-resultados-reporte[b-1ewjxqwktg] {
        border-radius: 16px;
        padding: 12px;
    }

    .barra-resultados[b-1ewjxqwktg] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .acciones-tabla-reporte[b-1ewjxqwktg] {
        justify-content: flex-start;
    }

    .btn-limpiar-tabla[b-1ewjxqwktg] {
        width: 100%;
    }

    .contenedor-tabla-reporte[b-1ewjxqwktg] {
        min-height: 360px;
        border-radius: 14px;
    }

    .tabla-estilo[b-1ewjxqwktg] {
        min-width: 900px;
        font-size: 0.84rem;
    }

    .th-contenido[b-1ewjxqwktg] {
        min-height: 44px;
        padding: 9px 10px;
    }

    .tabla-estilo tbody td[b-1ewjxqwktg] {
        padding: 9px 10px;
    }

    .menu-filtro[b-1ewjxqwktg] {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        min-width: unset;
        max-width: unset;
        max-height: 72vh;
        border-radius: 18px;
        z-index: 7000;
    }

    .menu-filtro-avanzado[b-1ewjxqwktg] {
        min-width: unset;
    }

    .acciones-todos[b-1ewjxqwktg] {
        grid-template-columns: 1fr;
    }

    .opcion-orden[b-1ewjxqwktg] {
        min-height: 40px;
    }

    .opcion-filtro label[b-1ewjxqwktg] {
        min-height: 38px;
    }
}

@media (max-width: 480px) {
    .barra-resultados h3[b-1ewjxqwktg] {
        font-size: 1.02rem;
    }

    .barra-resultados p[b-1ewjxqwktg] {
        font-size: 0.86rem;
    }

    .tabla-estilo[b-1ewjxqwktg] {
        min-width: 820px;
    }

    .sin-resultados-reporte[b-1ewjxqwktg] {
        min-height: 180px;
        padding: 20px;
    }
}