/* TALENTO UNNE v4.1 — ARCHIVOS EN RAÍZ — CSS ACTIVO */
/* ========================================================================== 
   DASHBOARD DE TALENTO — ESTILO CORPORATIVO NARANJA

   Este archivo controla TODO el diseño visual del sistema.
   Para cambiar colores, modifica únicamente la sección 01.
   ========================================================================== */

/* ========================================================================== 
   01. COLORES Y MEDIDAS GENERALES
   ========================================================================== */
:root {
    /* Color principal: menú, botones y elementos destacados. */
    --color-principal: #F58220;

    /* Variante oscura: hover, títulos destacados y degradados. */
    --color-principal-oscuro: #C95D0B;

    /* Variante clara: fondos suaves y elementos secundarios. */
    --color-principal-claro: #FFF0E3;

    /* Color complementario para textos oscuros y navegación. */
    --color-oscuro: #25282D;

    /* Fondo general del sistema. */
    --color-fondo: #F5F6F8;

    /* Fondo de tarjetas, formularios y tablas. */
    --color-tarjeta: #FFFFFF;

    /* Texto principal y texto secundario. */
    --color-texto: #2E3135;
    --color-texto-suave: #707780;

    /* Bordes y divisores. */
    --color-borde: #E7E9EC;

    /* Estados del PID y resultados. */
    --color-cumple: #2E9B61;
    --color-campo: #F2B134;
    --color-coaching: #F58220;
    --color-capacitacion: #D84A3A;

    /* Medidas visuales generales. */
    --radio-tarjeta: 18px;
    --radio-control: 10px;
    --sombra-tarjeta: 0 10px 28px rgba(31, 36, 42, 0.08);
    --sombra-hover: 0 14px 34px rgba(31, 36, 42, 0.13);
    --ancho-contenido: 1320px;
}

/* ========================================================================== 
   02. CUERPO Y ESTRUCTURA GENERAL
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top right, rgba(245, 130, 32, 0.09), transparent 28rem),
        var(--color-fondo);
    color: var(--color-texto);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.container { max-width: var(--ancho-contenido); }

main.container {
    padding-top: 1.8rem !important;
    padding-bottom: 3rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-oscuro);
    font-weight: 750;
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }

.muted,
.text-muted { color: var(--color-texto-suave) !important; }

/* ========================================================================== 
   03. BARRA SUPERIOR Y NAVEGACIÓN
   ========================================================================== */
.navbar,
.admin-navbar {
    background: linear-gradient(110deg, var(--color-oscuro), #353A40) !important;
    box-shadow: 0 5px 22px rgba(25, 28, 32, 0.18);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.admin-navbar .navbar-brand {
    color: #FFFFFF !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Punto naranja decorativo junto al nombre del sistema. */
.admin-navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--color-principal);
    box-shadow: 0 0 0 5px rgba(245, 130, 32, 0.16);
}

.admin-navbar .nav-link {
    color: rgba(255,255,255,.82) !important;
    padding: .56rem .88rem !important;
    border-radius: 9px;
    font-weight: 600;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.admin-navbar .nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
}

.admin-navbar .nav-link.active {
    color: #FFFFFF !important;
    background: var(--color-principal);
}

.admin-navbar .nav-logout {
    border: 1px solid rgba(255,255,255,.24);
}

.admin-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.35);
    box-shadow: none !important;
}

/* ========================================================================== 
   04. TARJETAS Y BLOQUES DE CONTENIDO
   ========================================================================== */
.cardx {
    position: relative;
    overflow: hidden;
    padding: 25px;
    background: var(--color-tarjeta);
    border: 1px solid rgba(231, 233, 236, .9);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    transition: transform .22s ease, box-shadow .22s ease;
}

.cardx:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

/* Línea naranja superior que unifica visualmente las tarjetas. */
.cardx::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-principal), #FFB067);
}

/* Números principales del panel administrativo. */
.kpi {
    margin-top: .35rem;
    color: var(--color-principal-oscuro);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 850;
    line-height: 1;
}

/* ========================================================================== 
   05. TABLAS
   ========================================================================== */
.table-responsive {
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid var(--color-borde);
}

.table { margin-bottom: 0; }

.table thead th {
    padding: .9rem .85rem;
    vertical-align: middle;
    background: var(--color-oscuro);
    color: #FFFFFF;
    border-color: var(--color-oscuro);
    font-size: .84rem;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.table td,
.table th {
    padding: .82rem;
    vertical-align: middle;
}

.table tbody tr:nth-child(even) { background: #FAFAFB; }
.table tbody tr { transition: background-color .16s ease; }
.table tbody tr:hover { background: var(--color-principal-claro); }

/* ========================================================================== 
   06. FORMULARIOS
   ========================================================================== */
.form-label {
    margin-bottom: .42rem;
    color: var(--color-oscuro);
    font-size: .92rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 44px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-control);
    background-color: #FFFFFF;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:hover,
.form-select:hover { border-color: #D6D9DD; }

.form-control:focus,
.form-select:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 .22rem rgba(245,130,32,.14);
}

textarea.form-control { min-height: 92px; }
.form-check { padding-block: .32rem; }
.form-check-input:checked {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
}

.code-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 800;
    letter-spacing: .08em;
}

.competence-list {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 6px;
}

/* ========================================================================== 
   07. BOTONES
   ========================================================================== */
.btn {
    border-radius: var(--radio-control);
    font-weight: 700;
    padding: .62rem 1rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--color-principal), #EF7112);
    border-color: var(--color-principal);
    box-shadow: 0 7px 16px rgba(245,130,32,.2);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--color-principal-oscuro), #E16B11);
    border-color: var(--color-principal-oscuro);
    box-shadow: 0 9px 20px rgba(201,93,11,.24);
}

.btn-outline-primary {
    color: var(--color-principal-oscuro);
    border-color: var(--color-principal);
}

.btn-outline-primary:hover {
    color: #FFFFFF;
    background: var(--color-principal);
    border-color: var(--color-principal);
}

.btn-outline-secondary {
    color: var(--color-oscuro);
    border-color: #CACED3;
}

.btn-outline-secondary:hover {
    background: var(--color-oscuro);
    border-color: var(--color-oscuro);
}

/* ========================================================================== 
   08. ETIQUETAS Y MENSAJES DE ESTADO
   ========================================================================== */
.badge-cumple { background: var(--color-cumple); }
.badge-campo { background: var(--color-campo); color: #332600; }
.badge-coaching { background: var(--color-coaching); }
.badge-cap { background: var(--color-capacitacion); }

.badge {
    padding: .48em .7em;
    border-radius: 999px;
    font-weight: 700;
}

.alert {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(31,36,42,.07);
}

/* ========================================================================== 
   09. PÁGINAS DE ACCESO Y LOGIN
   ========================================================================== */
.login-wrap {
    min-height: calc(100vh - 145px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 0;
}

.login-card { width: min(100%, 475px); }

.login-card .cardx {
    padding: clamp(1.5rem, 5vw, 2.4rem);
    border: 1px solid rgba(245,130,32,.16);
}

.login-card h1 { margin-bottom: .55rem; }

.login-card .cardx::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(245,130,32,.07);
    pointer-events: none;
}

/* ========================================================================== 
   10. GRÁFICAS
   ========================================================================== */
.chart-wrap {
    position: relative;
    height: 390px;
    padding-top: .4rem;
}

/* ========================================================================== 
   11. BARRAS DE DESPLAZAMIENTO
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: #C8CCD1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #C8CCD1; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #AFB4BA; }

/* ========================================================================== 
   12. DISEÑO RESPONSIVO PARA TABLETAS Y TELÉFONOS
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-navbar .navbar-collapse {
        margin-top: .75rem;
        padding: .75rem;
        background: rgba(255,255,255,.06);
        border-radius: 12px;
    }

    .admin-navbar .nav-link {
        width: 100%;
        margin: .12rem 0;
    }
}

@media (max-width: 767.98px) {
    main.container { padding-top: 1.15rem !important; }

    .cardx {
        padding: 18px;
        border-radius: 14px;
    }

    .kpi { font-size: 2rem; }
    .chart-wrap { height: 310px; }

    .d-flex.justify-content-between {
        gap: .75rem;
        flex-wrap: wrap;
    }

    .btn { width: auto; }
}

/* ========================================================================== 
   13. IMPRESIÓN Y EXPORTACIÓN A PDF
   ========================================================================== */
@media print {
    nav,
    .no-print { display: none !important; }

    body { background: #FFFFFF; }

    .cardx {
        border: 0;
        box-shadow: none;
        transform: none !important;
    }

    .cardx::before { display: none; }
    .container { max-width: 100% !important; }
    .chart-wrap { height: 330px; }
}

/* ========================================================================== 
   13. IDENTIDAD TALENTO UNNE
   ========================================================================== */
.brand-name {
    display: block;
    line-height: 1.05;
}

.brand-subtitle {
    display: block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .58);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-eyebrow,
.login-kicker {
    display: inline-block;
    margin-bottom: .35rem;
    color: var(--color-principal-oscuro);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ========================================================================== 
   14. TARJETAS KPI CON ICONOS Y PROGRESO
   ========================================================================== */
.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 145px;
}

.kpi-icon {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, var(--color-principal), #ffad61);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 10px 24px rgba(245, 130, 32, .24);
}

.kpi-label {
    color: var(--color-texto-suave);
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.kpi-help {
    color: var(--color-texto-suave);
    font-size: .78rem;
}

.kpi-progress {
    width: min(190px, 100%);
    height: 7px;
    margin-top: .65rem;
    overflow: hidden;
    background: #f0f1f3;
    border-radius: 100px;
}

.kpi-progress .progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-principal), #ffad61);
}

/* ========================================================================== 
   15. LOGIN MODERNO Y MINIMALISTA
   ========================================================================== */
.login-wrap {
    position: relative;
    padding: 2rem 1rem;
}

.login-wrap::before,
.login-wrap::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.login-wrap::before {
    top: 10%;
    right: 6%;
    width: 260px;
    height: 260px;
    background: rgba(245, 130, 32, .10);
}

.login-wrap::after {
    bottom: 4%;
    left: 4%;
    width: 170px;
    height: 170px;
    background: rgba(37, 40, 45, .05);
}

.login-panel {
    padding: clamp(1.6rem, 4vw, 2.35rem);
}

.login-emblem {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 1.1rem;
    place-items: center;
    border-radius: 19px;
    background: linear-gradient(145deg, var(--color-principal), #ffad61);
    color: #fff;
    font-size: 1.65rem;
    box-shadow: 0 14px 28px rgba(245, 130, 32, .25);
}

.login-panel:not(.text-center) .login-emblem {
    margin-left: 0;
}

.login-panel .btn {
    min-height: 46px;
}

/* ========================================================================== 
   16. MICROINTERACCIONES Y ANIMACIONES SUAVES
   ========================================================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

main.container > * {
    animation: fadeUp .38s ease both;
}

main.container > *:nth-child(2) { animation-delay: .04s; }
main.container > *:nth-child(3) { animation-delay: .08s; }
main.container > *:nth-child(4) { animation-delay: .12s; }

.btn:active {
    transform: translateY(1px);
}

/* Respeta a usuarios que prefieren menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ========================================================================== 
   17. PIE DE PÁGINA
   ========================================================================== */
.app-footer {
    padding: 1.2rem 0 1.8rem;
    color: var(--color-texto-suave);
}

.app-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-borde);
}

.app-footer span {
    color: var(--color-oscuro);
    font-weight: 750;
}

@media (max-width: 767.98px) {
    .brand-subtitle { display: none; }
    .kpi-card { min-height: 125px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .app-footer .container { align-items: flex-start; flex-direction: column; }
}

@media print {
    .app-footer { display: none !important; }
}

/* ========================================================================== 
   18. IDENTIDAD VISUAL TALENTO UNNE

   El isotipo se construye con cuatro cuadros redondeados. No depende de una
   imagen externa, por lo que puedes modificar sus tonos desde estas variables.
   ========================================================================== */
:root {
    --logo-naranja-1: #ff7a00;
    --logo-naranja-2: #ff9a3c;
    --logo-naranja-3: #d95b00;
    --logo-naranja-4: #ffb36b;
}

/* Nombre y subtítulo de la marca en la barra superior. */
.brand-name,
.brand-subtitle {
    display: block;
}

.brand-name {
    line-height: 1.05;
}

.brand-subtitle {
    margin-top: .22rem;
    color: rgba(255,255,255,.62);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Nuevo símbolo de cuatro módulos para las pantallas de acceso. */
.login-emblem.brand-emblem {
    display: grid;
    place-items: stretch;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;
    padding: 9px;
    background: #fff;
    border: 1px solid rgba(245,130,32,.14);
    box-shadow: 0 14px 30px rgba(245,130,32,.18);
}

.login-emblem.brand-emblem span {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 14px;
    min-height: 14px;
    border-radius: 7px;
}

.login-emblem.brand-emblem span:nth-child(1) { background: var(--logo-naranja-1); }
.login-emblem.brand-emblem span:nth-child(2) { background: var(--logo-naranja-3); }
.login-emblem.brand-emblem span:nth-child(3) { background: var(--logo-naranja-4); }
.login-emblem.brand-emblem span:nth-child(4) { background: var(--logo-naranja-2); }

/* Pequeño isotipo del pie de página. */
.footer-mark {
    display: inline-grid;
    width: 18px;
    height: 18px;
    margin-right: .45rem;
    vertical-align: -3px;
    border-radius: 5px;
    background: conic-gradient(
        from 0deg,
        var(--logo-naranja-1) 0 25%,
        var(--logo-naranja-3) 0 50%,
        var(--logo-naranja-2) 0 75%,
        var(--logo-naranja-4) 0
    );
}

/* ========================================================================== 
   19. BOTÓN RESTABLECER PANEL

   Se coloca a la derecha del encabezado en escritorio y ocupa el ancho
   disponible en teléfonos.
   ========================================================================== */
.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-heading form {
    flex: 0 0 auto;
}

/* ========================================================================== 
   20. TABLAS RESPONSIVAS Y DESPLAZAMIENTO MÓVIL

   Esta sección corrige el recorte de columnas. En tablas generales permite
   desplazamiento horizontal. En "Últimas evaluaciones" transforma cada fila
   en una tarjeta vertical para que se lea cómodamente en el teléfono.
   ========================================================================== */
.table-responsive {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-principal) #eceff2;
}

.table-responsive::-webkit-scrollbar {
    height: 9px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #eceff2;
    border-radius: 99px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-principal);
    border-radius: 99px;
}

/* Impide que las tablas extensas compriman sus columnas hasta quedar ilegibles. */
.table-responsive > .table {
    min-width: 760px;
}

.admin-table-heading {
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ========================================================================== 
   21. AJUSTES ESPECÍFICOS PARA TELÉFONOS
   ========================================================================== */
@media (max-width: 767.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    main.container {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading form,
    .page-heading form .btn {
        width: 100%;
    }

    .admin-table-heading {
        align-items: stretch !important;
        flex-direction: column;
    }

    .admin-table-heading .btn {
        width: 100%;
    }

    /* Últimas evaluaciones: tabla convertida en tarjetas verticales. */
    #ultimas-evaluaciones .table-responsive {
        overflow: visible !important;
        border: 0;
    }

    #ultimas-evaluaciones .table {
        display: block;
        min-width: 0;
        background: transparent;
    }

    #ultimas-evaluaciones thead {
        display: none;
    }

    #ultimas-evaluaciones tbody,
    #ultimas-evaluaciones tr,
    #ultimas-evaluaciones td {
        display: block;
        width: 100%;
    }

    #ultimas-evaluaciones tr {
        margin-bottom: 1rem;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--color-borde);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(31,36,42,.06);
    }

    #ultimas-evaluaciones td {
        display: grid;
        grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
        gap: .8rem;
        padding: .72rem .9rem;
        border-bottom: 1px solid #f0f1f3;
        text-align: right;
        overflow-wrap: anywhere;
    }

    #ultimas-evaluaciones td::before {
        content: attr(data-label);
        color: var(--color-texto-suave);
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    #ultimas-evaluaciones td:last-child {
        border-bottom: 0;
    }

    #ultimas-evaluaciones td:last-child .btn {
        width: 100%;
    }

    /* Las demás tablas conservan desplazamiento horizontal visible. */
    .cardx:not(#ultimas-evaluaciones) .table-responsive {
        margin-right: -.35rem;
        margin-left: -.35rem;
        padding-bottom: .35rem;
    }

    .brand-name {
        font-size: 1.15rem;
    }

    .login-emblem.brand-emblem {
        width: 66px;
        height: 66px;
    }
}


/* ==========================================================================
   22. IDENTIDAD PARA REPORTES IMPRESOS / PDF

   Los botones "Imprimir / PDF" usan la impresión del navegador. Esta sección
   convierte esa salida en un reporte con identidad Talento UNNE.
   ========================================================================== */

.print-brand-header { display: none; }
.print-brand-logo { display: grid; grid-template-columns: repeat(2, 13px); grid-template-rows: repeat(2, 13px); gap: 3px; width: max-content; }
.print-brand-logo span { display: block; border-radius: 4px; }
.print-brand-logo span:nth-child(1) { background: var(--logo-naranja-1); }
.print-brand-logo span:nth-child(2) { background: var(--logo-naranja-3); }
.print-brand-logo span:nth-child(3) { background: var(--logo-naranja-4); }
.print-brand-logo span:nth-child(4) { background: var(--logo-naranja-2); }

@media print {
    @page { size: letter; margin: 14mm 12mm 15mm; }
    html, body { width: auto !important; min-height: auto !important; overflow: visible !important; background: #fff !important; color: #25282d !important; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    nav, .no-print, .app-footer, .alert { display: none !important; }
    main.container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
    .print-brand-header { display: flex !important; align-items: center; gap: 10px; margin-bottom: 13mm; padding-bottom: 5mm; border-bottom: 2px solid var(--color-principal); }
    .print-brand-header strong, .print-brand-header small { display: block; }
    .print-brand-header strong { color: var(--color-oscuro); font-size: 16pt; line-height: 1.05; }
    .print-brand-header small { margin-top: 2px; color: #6f7680; font-size: 8.5pt; letter-spacing: .04em; text-transform: uppercase; }
    .cardx, .cardx:hover { break-inside: avoid; transform: none !important; box-shadow: none !important; border: 1px solid #dcdfe3 !important; border-radius: 10px !important; background: #fff !important; }
    .cardx::before { height: 3px; background: var(--color-principal) !important; }
    .row { break-inside: avoid; }
    .table-responsive { overflow: visible !important; border: 1px solid #dcdfe3 !important; }
    .table-responsive > .table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
    .table thead th { background: var(--color-oscuro) !important; color: #fff !important; font-size: 7.8pt; padding: 6px; }
    .table td { padding: 6px; font-size: 8pt; overflow-wrap: anywhere; }
    .badge { border: 1px solid currentColor; color: #25282d !important; background: #fff !important; }
    .chart-wrap { height: 275px !important; break-inside: avoid; }
    tr { break-inside: avoid; page-break-inside: avoid; }
    main.container::after { content: "Talento UNNE · Gestión de competencias y desarrollo"; display: block; margin-top: 9mm; padding-top: 4mm; border-top: 1px solid #dcdfe3; color: #7a8088; font-size: 7.5pt; text-align: right; }
}


/* ========================================================================== 
   23. TALENTO UNNE v4 — LOGOTIPO OFICIAL Y AJUSTES FINALES

   Esta sección usa el archivo Icono_Inicio.png proporcionado por
   la organización. Los tamaños se adaptan automáticamente según la pantalla.
   ========================================================================== */

/* Logotipo completo de la barra superior. */
.brand-lockup {
    display: inline-flex !important;
    align-items: center;
    gap: .72rem;
    min-width: 210px;
}

.brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
}

/* Desactiva el punto naranja usado por versiones anteriores. */
.admin-navbar .navbar-brand::before { display: none !important; }

/* Logotipo de las pantallas de acceso. */
.login-emblem.brand-emblem {
    display: grid;
    width: 92px;
    height: 92px;
    padding: 0;
    place-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.login-emblem.brand-emblem img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(17, 24, 39, .12));
}

.login-panel:not(.text-center) .login-emblem.brand-emblem {
    width: 72px;
    height: 72px;
}

/* Identidad del pie de página. */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.footer-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Mejor contraste y jerarquía de la navegación. */
.admin-navbar {
    background: linear-gradient(110deg, #101722, #202a36) !important;
}

.admin-navbar .nav-link.active {
    background: linear-gradient(135deg, var(--color-principal), #ef6c00);
    box-shadow: 0 8px 18px rgba(245, 130, 32, .24);
}

/* Tarjetas de panel con apariencia ejecutiva. */
.kpi-card {
    border-top: 0;
}

.kpi-card::before {
    height: 3px;
}

.kpi-icon {
    background: linear-gradient(145deg, #ff953f, #f36b00);
}

/* Los reportes impresos usan el logotipo oficial. */
.print-brand-logo-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.print-document-title {
    margin-left: auto;
    color: var(--color-oscuro);
    font-size: 10pt;
    font-weight: 850;
    letter-spacing: .035em;
    text-align: right;
}

/* Estados vacíos: ayudan a que las pantallas sin registros no se vean rotas. */
.table tbody:empty::after {
    content: "Todavía no hay registros para mostrar.";
    display: table-cell;
    padding: 2rem;
    color: var(--color-texto-suave);
    text-align: center;
}

/* Mejora visual del catálogo y formularios largos. */
.competence-list {
    border: 1px solid var(--color-borde);
    border-radius: 13px;
    padding: .75rem;
    background: #fbfcfd;
}

/* Botones de impresión y acciones secundarias alineados con la marca. */
.btn-dark {
    background: #18212c;
    border-color: #18212c;
}

.btn-dark:hover,
.btn-dark:focus {
    background: #0e151e;
    border-color: #0e151e;
}

/* Ajustes móviles diseñados específicamente para teléfono. */
@media (max-width: 767.98px) {
    .admin-navbar {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    .brand-lockup {
        min-width: 0;
        gap: .55rem;
    }

    .brand-logo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .brand-name { font-size: 1rem; }

    .login-emblem.brand-emblem {
        width: 78px;
        height: 78px;
    }

    .login-card {
        width: 100%;
        max-width: 520px;
    }

    .login-panel h1 {
        font-size: clamp(1.9rem, 8vw, 2.7rem);
    }

    .table-responsive {
        overscroll-behavior-x: contain;
    }

    /* Indicador visual para avisar que una tabla se puede desplazar. */
    .cardx:not(#ultimas-evaluaciones) .table-responsive::after {
        content: "Desliza horizontalmente para ver todas las columnas →";
        display: block;
        position: sticky;
        left: 0;
        width: max-content;
        margin: .55rem .25rem 0;
        color: var(--color-texto-suave);
        font-size: .72rem;
        font-weight: 650;
    }
}

/* Reportes PDF / impresión ejecutiva. */
@media print {
    .print-brand-header {
        min-height: 42px;
    }

    .print-document-title {
        display: block;
    }

    h1 {
        font-size: 18pt !important;
    }

    .kpi {
        color: #d45b00 !important;
    }

    .kpi-icon {
        color: #fff !important;
        background: #f58220 !important;
    }

    .progress-bar {
        background: #f58220 !important;
    }

    /* Evita que el PID corte una fila entre dos páginas. */
    tbody tr,
    .cardx,
    .row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}