/**
 * candidate.css — Design system compartido para las vistas del candidato externo (psicosmart).
 *
 * USO:  cargar DESPUÉS de Tabler + custom.css en todas las páginas del candidato:
 *   <link href="/shared_assets/css/tabler.min.css" rel="stylesheet">
 *   <link href="/shared_assets/css/custom.css" rel="stylesheet">
 *   <link href="/shared_assets/css/candidate.css?v=1" rel="stylesheet">
 *
 * Prefijo: .vc-*   (vorecol-candidate)
 * Tokens:  --vorecol-*  (de custom.css)
 *
 * Páginas que lo consumen: home_evaluated, online_test, online_questionnaires,
 * upload_photo, my_interviews, conferences, mis_entrevistas.
 */

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */
.vc-body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #F5F7FB;
    margin: 0;
    color: var(--vorecol-gray-900, #0F172A);
}

.vc-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
.vc-wrap--wide { max-width: 1140px; }
.vc-wrap--narrow { max-width: 680px; }

/* ═══════════════════════════════════════════════════════════
   HERO (Fraunces display + contexto)
   ═══════════════════════════════════════════════════════════ */
.vc-hero { margin-bottom: 28px; }
.vc-hero-kicker {
    font-size: 12px; font-weight: 500;
    color: var(--vorecol-gray-400, #94A3B8);
    letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 8px;
}
.vc-hero-title {
    font-family: var(--tblr-font-sans-serif, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif); font-weight: 500;
    font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--vorecol-gray-900, #0F172A);
    scroll-margin-top: 140px;
}
.vc-hero-title em {
    font-style: italic;
    color: var(--vorecol-primary, #1A67B7);
    font-weight: 500;
}
.vc-hero-lead {
    font-size: 16px; color: var(--vorecol-gray-600, #475569);
    line-height: 1.55; margin: 0; max-width: 680px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION (título con icon badge soft)
   ═══════════════════════════════════════════════════════════ */
.vc-section { margin-bottom: 32px; }
.vc-section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.vc-section-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vc-section-icon i { font-size: 18px; }
.vc-section-icon--blue    { background: #DBEAFE; color: var(--vorecol-primary, #1A67B7); }
.vc-section-icon--cyan    { background: #CFFAFE; color: #0E7490; }
.vc-section-icon--yellow  { background: #FEF3C7; color: #C2410C; }
.vc-section-icon--purple  { background: #EDE9FE; color: #6D28D9; }
.vc-section-icon--green   { background: #D1FAE5; color: #15803D; }
.vc-section-icon--red     { background: #FEE2E2; color: #DC2626; }
.vc-section-title {
    font-size: 17px; font-weight: 600;
    color: var(--vorecol-gray-900, #0F172A);
    margin: 0; line-height: 1.3;
}
.vc-section ul {
    margin: 0; padding-left: 24px;
    color: var(--vorecol-gray-600, #475569);
    line-height: 1.65;
}
.vc-section ul li { margin-bottom: 8px; }
.vc-section ul li:last-child { margin-bottom: 0; }
.vc-section ul li strong,
.vc-section ul li b {
    color: var(--vorecol-gray-900, #0F172A);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   ALERTA CRÍTICA (rojo suave + borde left)
   ═══════════════════════════════════════════════════════════ */
.vc-alert-critical {
    display: flex; align-items: flex-start; gap: 10px;
    background: #FEF2F2;
    border-left: 3px solid #DC2626;
    padding: 12px 14px; margin: 12px 0 0;
    border-radius: 4px;
    color: #991B1B; font-size: 14px; line-height: 1.5;
}
.vc-alert-critical i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.vc-alert-critical strong { color: #7F1D1D; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   CHECKBOX CARD (autorización / opt-in)
   ═══════════════════════════════════════════════════════════ */
.vc-checkbox-card {
    margin-top: 14px;
    display: flex; gap: 12px;
    padding: 14px 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    font-size: 14px; color: #15803D;
    line-height: 1.5; cursor: pointer;
}
.vc-checkbox-card input[type=checkbox] {
    flex-shrink: 0; margin-top: 3px;
    width: 18px; height: 18px; accent-color: #15803D;
}
.vc-checkbox-card:has(input:checked) {
    background: #DCFCE7;
    border-color: #86EFAC;
}

/* ═══════════════════════════════════════════════════════════
   PRIVACY LINK (botón-link con arrow)
   ═══════════════════════════════════════════════════════════ */
.vc-privacy-link {
    background: transparent; border: none; padding: 0;
    color: var(--vorecol-primary, #1A67B7);
    font-weight: 500; cursor: pointer;
    font-family: inherit; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
.vc-privacy-link:hover {
    color: var(--vorecol-primary-dark, #1A5797);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   SPLIT LAYOUT (Variante B — home_evaluated)
   Desktop: T&C izquierda (scrollable) + Panel derecho sticky con hero+CTA.
   Mobile: hero compacto top, T&C medio, CTA sticky al fondo.
   ═══════════════════════════════════════════════════════════ */
.vc-split-shell {
    display: grid;
    grid-template-columns: 1fr 440px;
    min-height: calc(100vh - 104px);
}

/* Wrapper del panel: es la celda completa del grid con fondo dark, se estira si el main es más alto */
.vc-split-panel-bg {
    grid-column: 2; grid-row: 1;
    background: linear-gradient(160deg, #0A1629 0%, #14253C 55%, #1A5797 100%);
    color: #fff;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
/* Contenido sticky dentro del wrapper — se pega al top al scrollear main largo */
.vc-split-panel {
    padding: 48px 40px 40px;
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 104px;
    max-height: calc(100vh - 104px);
    min-height: min(100vh - 104px, 520px);
    overflow-y: auto;
    z-index: 10;
}
.vc-split-main {
    grid-column: 1; grid-row: 1;
    padding: 56px 56px;
    max-width: 760px;
}
.vc-split-main-title {
    font-family: var(--tblr-font-sans-serif, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif); font-weight: 500;
    font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.01em;
    color: var(--vorecol-gray-900, #0F172A);
    margin: 0 0 8px; scroll-margin-top: 140px;
}
.vc-split-main-lead {
    font-size: 15px; color: var(--vorecol-gray-600, #475569);
    margin: 0 0 36px; line-height: 1.55; max-width: 600px;
}

/* Panel dark content */
.vc-panel-top { display: flex; flex-direction: column; gap: 16px; }
.vc-panel-brand {
    display: inline-flex; align-items: center; gap: 8px;
    opacity: .65;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.vc-panel-brand i { font-size: 14px; }
.vc-panel-title {
    font-family: var(--tblr-font-sans-serif, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif); font-weight: 500;
    font-size: clamp(28px, 3vw, 38px); line-height: 1.05;
    letter-spacing: -0.02em; margin: 0; color: #fff;
}
.vc-panel-title em { font-style: italic; color: #60A5FA; font-weight: 500; }
.vc-panel-sub {
    font-size: 15px; color: rgba(255,255,255,.78);
    line-height: 1.6; margin: 0;
}
.vc-panel-sub strong { color: #fff; font-weight: 600; }
.vc-panel-hint {
    font-size: 13px; color: rgba(255,255,255,.55);
    line-height: 1.55; margin: 0;
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border-left: 2px solid rgba(255,255,255,.15);
    border-radius: 4px;
}
.vc-panel-hint i { margin-right: 6px; opacity: .7; }

.vc-panel-cta {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: auto;
}
.vc-cta-primary {
    padding: 14px 22px; border-radius: 12px;
    background: #fff; color: #0A1629;
    border: 1px solid rgba(255,255,255,.9);
    font-family: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background-color .15s, transform .05s;
}
.vc-cta-primary:hover { background: #EEF5FD; }
.vc-cta-primary:active { transform: translateY(1px); }
.vc-cta-primary:disabled {
    background: rgba(255,255,255,.4);
    color: rgba(10,22,41,.5); cursor: default;
}
.vc-cta-ghost {
    padding: 10px 18px; background: transparent;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    font-family: inherit; font-size: 13px;
    cursor: pointer; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.vc-cta-ghost:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.vc-panel-trust {
    font-size: 11px; color: rgba(255,255,255,.4);
    margin: 14px 0 0; text-align: center; letter-spacing: .02em;
}
.vc-panel-trust i { margin-right: 4px; }

/* SPLIT mobile: colapsa, CTA va al fondo sticky */
@media (max-width: 900px) {
    .vc-split-shell {
        display: block; grid-template-columns: 1fr;
        min-height: auto;
    }
    .vc-split-panel-bg {
        grid-column: auto; grid-row: auto;
        min-height: auto;
    }
    .vc-split-panel {
        position: relative; height: auto;
        min-height: auto; max-height: none;
        padding: 28px 20px 24px;
        overflow-y: visible;
    }
    .vc-panel-title { font-size: 26px; margin: 16px 0 10px; }
    .vc-panel-sub { font-size: 14px; }
    .vc-panel-hint { display: none; }
    .vc-panel-trust { display: none; }

    .vc-panel-cta {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
        flex-direction: row; gap: 10px; margin: 0;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0));
        background: #fff;
        border-top: 1px solid var(--vorecol-gray-200, #E2E8F0);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }
    .vc-cta-primary {
        flex: 1; min-height: 44px;
        background: var(--vorecol-primary, #1A67B7);
        color: #fff; border-color: var(--vorecol-primary, #1A67B7);
    }
    .vc-cta-primary:hover { background: var(--vorecol-primary-dark, #1A5797); }
    .vc-cta-primary:disabled {
        background: var(--vorecol-gray-300, #CBD5E1);
        color: var(--vorecol-gray-500, #64748B);
        border-color: var(--vorecol-gray-300, #CBD5E1);
    }
    .vc-cta-ghost {
        flex: 0 0 auto; padding: 10px 14px;
        color: #C2410C; border: 1px solid rgba(194,65,12,.3);
        background: transparent;
    }
    .vc-cta-ghost:hover { border-color: #C2410C; color: #9A2E06; }

    .vc-split-main {
        grid-column: auto;
        padding: 28px 18px 140px;
        max-width: none;
    }
    .vc-split-main-title { font-size: 22px; }
    .vc-split-main-lead { font-size: 14px; margin-bottom: 26px; }
    .vc-section { margin-bottom: 28px; }
    .vc-section-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   ACTION BAR (botones arriba de online_test, my_interviews, etc.)
   ═══════════════════════════════════════════════════════════ */
.vc-actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 24px; padding-bottom: 20px;
    border-bottom: 1px solid var(--vorecol-gray-200, #E2E8F0);
    align-items: center;
}
.vc-actions .btn { min-height: 40px; }
.vc-actions-spacer { flex: 1; }
@media (max-width: 768px) {
    .vc-actions { gap: 8px; padding-bottom: 14px; margin-bottom: 16px; }
    .vc-actions .btn { font-size: 13px; padding: 8px 12px; min-height: 38px; }
    .vc-actions-spacer { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   TESTS LIST (cards de pruebas — patrón S2 del mockup candidato)
   ═══════════════════════════════════════════════════════════ */
.vc-tests-progress {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 24px;
}
.vc-tests-progress-bar {
    height: 6px;
    background: var(--vorecol-gray-200, #E2E8F0);
    border-radius: 999px; overflow: hidden;
}
.vc-tests-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vorecol-primary, #1A67B7), var(--vorecol-primary-dark, #1A5797));
    border-radius: 999px;
    transition: width .4s ease;
}
.vc-tests-progress-label {
    font-size: 13px; color: var(--vorecol-gray-600, #475569);
}
.vc-tests-progress-label strong { color: var(--vorecol-gray-900, #0F172A); font-weight: 600; }

.vc-tests-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 24px;
}
.vc-test-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center; gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--vorecol-gray-200, #E2E8F0);
    border-radius: 12px;
    transition: border-color .15s, transform .08s, box-shadow .15s;
}
.vc-test-card:hover {
    border-color: var(--vorecol-gray-300, #CBD5E1);
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.vc-test-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vc-test-icon i { font-size: 22px; }
.vc-test-icon--pending  { background: #E0F2FE; color: #0369A1; }
.vc-test-icon--current  { background: #DBEAFE; color: var(--vorecol-primary, #1A67B7); }
.vc-test-icon--done     { background: #D1FAE5; color: #15803D; }
.vc-test-icon--blocked  { background: #FEE2E2; color: #DC2626; }

.vc-test-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vc-test-tipo {
    font-size: 11px; font-weight: 500;
    color: var(--vorecol-gray-500, #64748B);
    letter-spacing: .05em; text-transform: uppercase;
}
.vc-test-title {
    font-size: 15px; font-weight: 600;
    color: var(--vorecol-gray-900, #0F172A);
    margin: 0; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
}
.vc-test-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 13px;
    color: var(--vorecol-gray-500, #64748B);
    align-items: center;
}
.vc-test-meta i { font-size: 14px; vertical-align: -2px; margin-right: 2px; }
.vc-test-meta-dot { color: var(--vorecol-gray-300, #CBD5E1); }
.vc-test-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.vc-test-badge--done    { background: #D1FAE5; color: #15803D; }
.vc-test-badge--pending { background: #E0F2FE; color: #0369A1; }
.vc-test-badge--current { background: #DBEAFE; color: var(--vorecol-primary, #1A67B7); }
.vc-test-badge--blocked { background: #FEE2E2; color: #991B1B; }
.vc-test-badge i { font-size: 13px; }

.vc-test-action { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.vc-test-action .btn { min-height: 38px; white-space: nowrap; }

.vc-test-card.is-done {
    background: var(--vorecol-gray-50, #F8FAFC);
}
.vc-test-card.is-done .vc-test-title { color: var(--vorecol-gray-500, #64748B); }
.vc-test-card.is-blocked { opacity: .7; }

/* Skeleton loader — se pinta en PHP mientras online_test.js trae la lista (AJAX);
   el JS limpia #pruebas_tabla antes de renderizar las cards reales. */
.vc-test-card--skeleton { pointer-events: none; }
.vc-test-card--skeleton:hover { border-color: var(--vorecol-gray-200, #E2E8F0); box-shadow: none; }
.vc-skel {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, #EEF2F7 25%, #E2E8F0 37%, #EEF2F7 63%);
    background-size: 400% 100%;
    animation: vc-skel-shimmer 1.4s ease infinite;
}
.vc-test-card--skeleton .vc-test-icon { background: #EEF2F7; }
.vc-skel-icon { width: 48px; height: 48px; border-radius: 50%; }
.vc-skel-title { height: 15px; width: 55%; margin-bottom: 8px; }
.vc-skel-meta  { height: 12px; width: 38%; }
.vc-skel-btn   { height: 38px; width: 96px; border-radius: 8px; }
@keyframes vc-skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .vc-skel { animation: none; } }
[data-bs-theme="dark"] .vc-skel {
    background: linear-gradient(90deg, #1b1b1b 25%, #262626 37%, #1b1b1b 63%);
    background-size: 400% 100%;
}
[data-bs-theme="dark"] .vc-test-card--skeleton .vc-test-icon { background: #1b1b1b; }

/* ─────────────────────────────────────────────────────────────────────────
   EXAMEN — render de preguntas estilo Tabler (PBI-PSI-EVALUADO-PREGUNTAS-TABLER-001)
   El markup lo genera online_test.js (tabla #tab-cuentas1). NO se tocan name/id/
   onclick (los lee el recolector de respuestas); solo se marca la fila con
   .vc-qbox y aquí se restyle a card + opciones en caja (mockup examen_responsive).
   Tipo migrado: OPCIÓN ÚNICA (radio). Las celdas de opción se reconocen por su
   onclick='activar(...)'; la celda de pregunta es #tempresa (sin onclick).
   ───────────────────────────────────────────────────────────────────────── */
#tab-cuentas1 tr.vc-qbox {
    display: block;
    background: #fff;
    border: 1px solid var(--vorecol-gray-200, #E2E8F0);
    border-radius: 14px;
    padding: 18px 18px 9px;
    margin: 0 0 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#tab-cuentas1 tr.vc-qbox > td {
    display: block;
    border: 0 !important;
    padding: 0;
    background: transparent !important;
}
#tab-cuentas1 tr.vc-qbox font { font-size: 1rem !important; font-weight: inherit; }
/* Celda de la pregunta (#tempresa) = encabezado de la card */
/* Celda de la pregunta — radio usa #tempresa (texto en <font>), checkbox usa #textopregunta (texto directo) */
#tab-cuentas1 tr.vc-qbox td#tempresa,
#tab-cuentas1 tr.vc-qbox td#textopregunta {
    text-align: left !important;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--vorecol-gray-900, #0F172A);
    line-height: 1.4;
}
#tab-cuentas1 tr.vc-qbox td#tempresa font {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--vorecol-gray-900, #0F172A);
    line-height: 1.4;
}
/* Cada opción (celda con onclick=activar) = caja clicable */
#tab-cuentas1 tr.vc-qbox td[onclick] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left !important;
    border: 1px solid var(--vorecol-gray-200, #E2E8F0) !important;
    border-radius: 10px;
    padding: 14px 16px !important;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
#tab-cuentas1 tr.vc-qbox td[onclick] br { display: none; }   /* radio + texto en línea */
#tab-cuentas1 tr.vc-qbox td[onclick]:hover {
    border-color: var(--vorecol-primary, #1A67B7) !important;
    background: #F8FAFF !important;
}
#tab-cuentas1 tr.vc-qbox td[onclick] input[type="radio"],
#tab-cuentas1 tr.vc-qbox td[onclick] input[type="checkbox"] {
    accent-color: var(--vorecol-primary, #1A67B7);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}
/* Resalte de la opción seleccionada (navegadores con :has; el radio nativo da
   feedback en todos). */
#tab-cuentas1 tr.vc-qbox td[onclick]:has(input:checked) {
    border-color: var(--vorecol-primary, #1A67B7) !important;
    background: #EFF5FF !important;
    box-shadow: inset 0 0 0 1px var(--vorecol-primary, #1A67B7);
}
/* Dark mode */
[data-bs-theme="dark"] #tab-cuentas1 tr.vc-qbox {
    background: var(--tblr-bg-surface, #1b1b1b);
    border-color: #2b2b2b;
}
[data-bs-theme="dark"] #tab-cuentas1 tr.vc-qbox td#tempresa font { color: #e6e6e6; }
[data-bs-theme="dark"] #tab-cuentas1 tr.vc-qbox td[onclick] { border-color: #2b2b2b !important; }
[data-bs-theme="dark"] #tab-cuentas1 tr.vc-qbox td[onclick]:hover { background: #18324d !important; }
[data-bs-theme="dark"] #tab-cuentas1 tr.vc-qbox td[onclick]:has(input:checked) { background: #15253b !important; }

/* ── Examen: FORCED-CHOICE −/+ (Cleaver / Gordon) — tipo .vc-fc dentro de la card ──
   Cada opción = caja con texto + botones − y +. botones() (online_test_core.js) marca el
   <input hidden> y resalta el botón con .bg-test.text-white; aquí se le da el look. */
#tab-cuentas1 tr.vc-qbox.vc-fc > td { display: block; padding: 0; }
.vc-fc-q { font-weight: 600; font-size: 1.05rem; color: var(--vorecol-gray-900, #0F172A); margin-bottom: 14px; line-height: 1.4; }
/* border con !important + especificidad alta: un reset tipo `border-width:0` (Tabler/Tailwind)
   pisaba el ancho del borde de la caja de opción (quedaba sin divisiones). */
#tab-cuentas1 tr.vc-qbox .vc-fc-opt,
.vc-fc-opt {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--vorecol-gray-200, #E2E8F0) !important; border-radius: 10px;
    padding: 10px 12px 10px 16px; margin-bottom: 10px;
}
.vc-fc-txt { flex: 1; text-align: left; line-height: 1.4; }
/* Input de número para jerarquización (Allport/Zavic): 4=más … 1=menos */
.vc-fc-num {
    width: 64px !important; flex-shrink: 0; text-align: center;
    border: 1px solid var(--vorecol-gray-300, #CBD5E1) !important; border-radius: 8px;
    padding: 8px; font-size: 1.05rem; font-weight: 600;
}
.vc-fc-num:focus { border-color: var(--vorecol-primary, #1A67B7); outline: 0; box-shadow: 0 0 0 3px rgba(26, 103, 183, .15); }
/* PBI-EMP-DARK-001: en dark el borde #2b2b2b se confundía con la card oscura → "no se ve la cajita".
   Caja más oscura que la card + borde gris medio visible para que el input se distinga claramente. */
[data-bs-theme="dark"] .vc-fc-num { background: #11161f; border-color: #56657d !important; color: #f1f1f1; }
/* Texto libre / series (sin opciones): input(s) centrados */
.vc-fc-free { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; }
.vc-fc-free .vc-fc-num { width: 90px !important; }
/* Pregunta con imagen (dominó / Raven) */
.vc-img-q { display: flex; justify-content: center; margin: 8px 0 16px; }
.vc-img-q-pic { max-width: 100%; height: auto; max-height: 360px; border-radius: 10px; }
.vc-dom-nums { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vc-dom-nums .vc-fc-num { width: 92px !important; height: 54px; font-size: 1.4rem; }
.vc-rav-ans { display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--vorecol-gray-600, #475569); }
.vc-rav-ans .vc-fc-num { width: 110px !important; font-size: 1.3rem; }
.vc-fc .btn-group { flex-shrink: 0; }
.vc-fc .btn-outline-test {
    width: 46px; height: 40px; padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1;
    border: 1px solid var(--vorecol-gray-300, #CBD5E1) !important; background: #fff; color: var(--vorecol-gray-600, #475569);
}
.vc-fc .btn-outline-test:first-child { border-radius: 8px 0 0 8px; }
.vc-fc .btn-outline-test:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.vc-fc .btn-outline-test:hover { border-color: var(--vorecol-primary, #1A67B7); color: var(--vorecol-primary, #1A67B7); z-index: 1; }
/* Seleccionado (botones() añade .bg-test.text-white). Colores NEUTRALES — "Menos" NO es
   "malo" en Cleaver (rojo/verde sesgarían la respuesta): + = azul marca, − = gris pizarra. */
.vc-fc [id^="positive"].bg-test { background: var(--vorecol-primary, #1A67B7) !important; border-color: var(--vorecol-primary, #1A67B7); color: #fff !important; }
.vc-fc [id^="negative"].bg-test { background: var(--vorecol-gray-600, #475569) !important; border-color: var(--vorecol-gray-600, #475569); color: #fff !important; }
/* Dark */
[data-bs-theme="dark"] .vc-fc-q { color: #e6e6e6; }
[data-bs-theme="dark"] .vc-fc-opt { border-color: #3a4658; }
[data-bs-theme="dark"] .vc-fc .btn-outline-test { background: var(--tblr-bg-surface, #1b1b1b); border-color: #56657d; color: #e6e6e6; }
/* PBI-EMP-DARK-001: inputs de texto / textarea del examen (texto libre, banderaExepcion, etc.) —
   en dark el borde tenue se confundía con la card → "no se ve la cajita". Borde gris medio visible. */
[data-bs-theme="dark"] #tab-cuentas1 input[type="text"],
[data-bs-theme="dark"] #tab-cuentas1 textarea,
[data-bs-theme="dark"] #tab-cuentas1 .form-control { background: #11161f; border-color: #56657d !important; color: #f1f1f1; }
/* PBI-EMP-DARK-001: progreso "Pregunta X de Y" / timer — en dark el color oscuro (#334155) y el azul
   text-primary se perdían sobre el fondo oscuro. Texto claro. */
[data-bs-theme="dark"] .vc-exam-bar-prog { color: #e6e6e6; }
[data-bs-theme="dark"] .vc-exam-bar-time { color: #6ea8e0; }
[data-bs-theme="dark"] #div_progress,
[data-bs-theme="dark"] .xx_xx .text-primary { color: #6ea8e0 !important; }
/* PBI-EMP-DARK-001: la pregunta del CUESTIONARIO (.tablePreguntas, empleado y candidato) trae inline
   color:#062b4ccf (navy oscuro) → casi invisible en dark. !important gana al inline sin !important.
   En claro se conserva el navy (la regla solo aplica en [data-bs-theme=dark]). */
[data-bs-theme="dark"] .tablePreguntas { color: #e6e6e6 !important; }
/* PBI-EMP-DARK-001: las instrucciones del grabador de video/audio del cuestionario (.divNotaMedia h6:
   "Tiempo límite de respuesta", "Estimado evaluado, esta pregunta solicita un video…") heredaban un
   gris oscuro → invisibles en dark. Texto claro (empleado y candidato comparten .divNotaMedia). */
[data-bs-theme="dark"] .divNotaMedia,
[data-bs-theme="dark"] .divNotaMedia h6,
[data-bs-theme="dark"] .divNotaMedia b { color: #e6e6e6 !important; }
/* PBI-EMP-DARK-001: links del cronómetro "Ocultar/Mostrar tiempo" (inline color:#3f3f42) y la fila
   #row_tiempo → invisibles en dark cuando la pregunta tiene tiempo límite. Texto claro. */
[data-bs-theme="dark"] #ocultar_tiempo,
[data-bs-theme="dark"] #mostrar_tiempo,
[data-bs-theme="dark"] #row_tiempo,
[data-bs-theme="dark"] #row_tiempo a,
[data-bs-theme="dark"] #div_tiempo_oculto,
[data-bs-theme="dark"] #div_tiempo_oculto a,
[data-bs-theme="dark"] #row_tiempo_oculto a { color: #cfd6e0 !important; }

/* ── Examen: MARCO en progreso (mockup) — solo con flag (body.vc-exam-ui) ──
   Oculta el hero/acciones del listado; el timer y el progreso legacy se OCULTAN y se
   espejan en #vc-exam-bar (barra superior). La pregunta queda de protagonista. */
body.vc-exam-ui .vc-hero { display: none; }
body.vc-exam-ui #titulo.vc-actions { display: none; }
/* El SHELL (topbar + hero de identidad + pestañas) se muestra en el LISTADO de pruebas (igual que el
   home), pero se ESCONDE durante el examen para enfocar la pregunta. #vc-exam-bar da el tope mínimo. */
body.vc-exam-ui .vc-shell-topbar,
body.vc-exam-ui .vc-shell-hero,
body.vc-exam-ui .vc-shell-tabs { display: none !important; }
/* PBI-EMP-NAVBAR-STICKY-MOVIL-001 v3 — paridad para el EXAMEN DEL EMPLEADO (users_psicosmart):
   su shell es otro (header.navbar del portal + hamburguesa/logo fijos del employee_shell). Con el
   navbar sticky (z 1030) la barra del examen (z 1020) quedaba TAPADA al scrollear. En modo examen
   se esconde su chrome igual que el shell del candidato, y #vc-exam-bar da el tope. En páginas del
   candidato estos selectores no existen → regla inerte. */
body.vc-exam-ui .page .navbar,
body.vc-exam-ui .emp-rail-toggle,
body.vc-exam-ui .emp-mobile-brand { display: none !important; }
/* PBI-EMP-NAVBAR-STICKY-MOVIL-001 v4 — modo ENFOCADO del examen del empleado: su listado usa
   .page-header (hero "Bienvenido…/Pruebas asignadas" de navbar.php) y #titulo (encabezado
   "Listado de pruebas…" + "Ver fotos evidencias"). El candidato esconde su chrome equivalente
   (.vc-shell-hero/.vc-actions) pero el empleado no → durante el examen quedaba el hero arriba y
   la barra flotando en medio (menos enfocado/responsivo que el candidato). Se esconden en examen;
   en el candidato .page-header no existe → regla inerte. #titulo cubre ambos (candidato = .vc-actions). */
body.vc-exam-ui .page-header,
body.vc-exam-ui #titulo { display: none !important; }
/* En móvil (≤768px) el layout del empleado le da a .wrapper padding-top:145px para librar el
   navbar fijo; en examen el navbar está oculto → ese padding queda como hueco gris arriba de la
   barra. Se anula en modo examen (en el candidato .wrapper no aplica → regla inerte). */
body.vc-exam-ui .wrapper { padding-top: 0 !important; }
/* Ocultar timer/progreso legacy (siguen vivos en el DOM; #vc-exam-bar los refleja) */
body.vc-exam-ui #panelr { display: none !important; }
body.vc-exam-ui #div_progress, body.vc-exam-ui .xx_xx { display: none !important; }
/* PBI-PSI-EVALUADO-CAM-ENFOCADO-001: el aviso de error de cámara (#vc-cam-retry) es del
   pre-check del landing — es NO bloqueante (la cámara es solo para evidencia; la prueba sigue).
   En modo enfocado (respondiendo) NO debe salir: distrae y ya se vio en el landing. Solo se oculta
   en vc-exam-ui; en el landing el JS lo sigue mostrando/ocultando normal (Webcam error/live). */
body.vc-exam-ui #vc-cam-retry { display: none !important; }
/* Indicaciones sutiles (no un bloque gigante) */
body.vc-exam-ui #indicaciones_panel { font-size: .92rem; color: var(--vorecol-gray-600, #475569); line-height: 1.5; margin-bottom: 6px; }
body.vc-exam-ui #indicaciones_panel font { font-size: .92rem !important; }
body.vc-exam-ui #descripcion td { border: 0 !important; padding: 4px 8px !important; }
body.vc-exam-ui #Tgeneral1 { max-width: 720px; margin: 0 auto; }
/* Contención del desbordamiento de las INDICACIONES de la prueba (PBI-PSICO-INDICACIONES-OVERFLOW-001):
   el campo `indicaciones` es rich-text (CKEditor) y en pruebas internas puede traer texto largo sin
   espacios, tablas o imágenes anchas que, sin acotar, ensanchan la página (en móvil el viewport se
   expande y todo se ve diminuto/corrido). Se aplica a TODAS las pantallas de examen (online_test,
   online_test_mobile, online_questionnaires) porque comparten candidate.css. */
#indicaciones_panel, #descripcion, #descripcion td, .well-a {
    max-width: 100%;
    overflow-wrap: anywhere;      /* rompe cadenas largas sin espacios */
    word-break: break-word;
}
#indicaciones_panel { overflow-x: auto; }                 /* si queda un elemento ancho real, scroll local en vez de romper la página */
#descripcion { table-layout: fixed; width: 100%; }        /* la tabla respeta el ancho del contenedor */
#indicaciones_panel img, #descripcion img,
#indicaciones_panel table, #descripcion table { max-width: 100% !important; height: auto; } /* imágenes/tablas pegadas del CKEditor */

/* ============================================================================
   PBI-PSICO-INDICACIONES-DARK-001 — bloque "Indicaciones" de cuestionarios/exámenes
   (empleado + candidato PsicoSmart). Arregla 2 reportes de Gabriela (2026-06-12):
   (1) el texto se veía "pelón"/lavado en claro y con poco contraste en oscuro — el
       inline `color:#35536e` del #indicaciones_panel no respeta el tema;
   (2) "recuadro blanco detrás" en oscuro — el `.wrapper` de estas pantallas trae
       fondo claro (inline #f3f3f3 en el cuestionario del candidato; default en empleado).
   El contenido es rich-text de BD (Regla #15: NO se escapa, solo se estiliza el
   contenedor). Se hace por CSS con !important para ganarle al inline — NO se tocan
   los estilos inline del PHP. El examen del candidato (body.vc-exam-ui) conserva su
   look sutil ya existente (arriba); solo se le ajusta el contraste en oscuro.
   ============================================================================ */
/* Cuestionario (y examen del empleado) — callout legible en vez del texto suelto */
body:not(.vc-exam-ui) #indicaciones_panel {
    color: #233140 !important;                       /* claro: nítido (vs #35536e lavado) */
    background: #eff4fa;
    border: 1px solid #dbe5f0;
    border-left: 3px solid var(--tblr-primary, #3072b3);
    border-radius: 8px;
    padding: 14px 16px !important;
    line-height: 1.55;
    /* Alinear la caja con el contenido de respuesta (pregunta/editor): ese contenido va
       anidado en una columna extra → queda ~1 padding de columna más adentro. Encogemos el
       callout ese ancho y lo centramos, para que NO sobresalga a la izquierda ("suelto"). */
    max-width: calc(100% - var(--bs-gutter-x, 1.5rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#indicaciones_panel:empty { display: none; }         /* en exámenes carga vacío hasta que el JS lo llena */
body:not(.vc-exam-ui) #indicaciones_panel b,
body:not(.vc-exam-ui) #indicaciones_panel strong,
body:not(.vc-exam-ui) #indicaciones_panel font { color: inherit !important; }
/* Oscuro — texto legible en ambos contextos. OJO especificidad: el callout de arriba
   (`body:not(.vc-exam-ui) #indicaciones_panel`) es (0,1,1,1); el color dark debe igualar/superar
   esa especificidad o el texto se queda oscuro sobre fondo oscuro → se incluye el mismo scope. */
[data-bs-theme="dark"] body:not(.vc-exam-ui) #indicaciones_panel {
    color: #d3dbe5 !important;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    border-left-color: var(--tblr-primary, #5a93cf);
}
/* Examen del candidato (vc-exam-ui): MISMO callout que el cuestionario, alineado al contenido
   centrado del examen (#Tgeneral1 max-width 720). Antes quedaba como texto sutil "suelto"
   (pedido de Gabriela: que se vea consistente con el cuestionario). `:not(:empty)` → solo cuando
   el JS ya llenó las indicaciones al iniciar la prueba (en el landing va vacío y se oculta). */
body.vc-exam-ui #indicaciones_panel:not(:empty) {
    color: #233140 !important;
    background: #eff4fa;
    border: 1px solid #dbe5f0;
    border-left: 3px solid var(--tblr-primary, #3072b3);
    border-radius: 8px;
    padding: 12px 16px !important;
    line-height: 1.5;
    max-width: 720px;
    margin: 0 auto 16px !important;
}
[data-bs-theme="dark"] body.vc-exam-ui #indicaciones_panel:not(:empty) {
    color: #d3dbe5 !important;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    border-left-color: var(--tblr-primary, #5a93cf);
}
/* Recuadro claro detrás en oscuro: el .wrapper de estas pantallas trae fondo claro */
[data-bs-theme="dark"] .wrapper:has(#indicaciones_panel) {
    background-color: var(--tblr-body-bg, #16191d) !important;
}

/* Barra superior del examen (espejo de progreso + timer) */
/* PBI-PSICO-EVALUADO-TIMER-SERIES-001 v3: sticky para que el progreso/cronómetro NO se pierdan
   al hacer scroll en la pregunta (replica el #divTiempo sticky del legacy). z-index bajo modales. */
#vc-exam-bar {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border-bottom: 1px solid var(--vorecol-gray-200, #E2E8F0);
    padding: 10px 2px; margin-bottom: 18px;
    position: sticky; top: 0; z-index: 1020;
}
.vc-exam-bar-back { color: var(--vorecol-gray-500, #64748B); display: inline-flex; flex-shrink: 0; font-size: 22px; line-height: 1; }
.vc-exam-bar-back:hover { color: var(--vorecol-primary, #1A67B7); }
.vc-exam-bar-main { flex: 1; min-width: 0; }
.vc-exam-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.vc-exam-bar-prog { font-weight: 600; color: var(--vorecol-gray-700, #334155); font-size: .92rem; }
.vc-exam-bar-time { color: var(--vorecol-primary, #1A67B7); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.vc-exam-bar-track { height: 6px; background: #EEF2F7; border-radius: 999px; overflow: hidden; }
.vc-exam-bar-track .progress-bar { background: var(--vorecol-primary, #1A67B7); border-radius: 999px; transition: width .3s ease; }
[data-bs-theme="dark"] #vc-exam-bar { background: var(--tblr-bg-surface, #1b1b1b); border-bottom-color: #2b2b2b; }
[data-bs-theme="dark"] .vc-exam-bar-track { background: #2b2b2b; }

/* PBI-PSICO-EVALUADO-EXAMBAR-MOVIL-001 — En móvil la barra va position:fixed (no sticky):
   en Android, position:sticky desaparece al abrir el teclado y enfocar un input de texto
   (secciones con respuestas abiertas). Fixed la mantiene SIEMPRE visible arriba; se compensa
   el solapamiento con padding-top en el contenido. Desktop (<768px fuera) conserva sticky. */
@media (max-width: 768px) {
    body.vc-exam-ui #vc-exam-bar {
        position: fixed; top: 0; left: 0; right: 0;
        margin-bottom: 0; border-radius: 0;
    }
    body.vc-exam-ui main.vc-wrap { padding-top: 76px; } /* libra la barra fija (alto ~54px + margen) */
}

/* Mobile stack: icon arriba + body full + action abajo */
@media (max-width: 560px) {
    .vc-test-card {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        gap: 10px 12px;
        padding: 14px;
    }
    .vc-test-icon { width: 40px; height: 40px; }
    .vc-test-icon i { font-size: 18px; }
    .vc-test-action {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .vc-test-action .btn { flex: 1; justify-content: center; }
}

/* Empty state para tests list */
.vc-tests-empty {
    background: #fff;
    border: 1px dashed var(--vorecol-gray-300, #CBD5E1);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: var(--vorecol-gray-500, #64748B);
    font-size: 14px;
}
.vc-tests-empty i { font-size: 32px; color: var(--vorecol-gray-400, #94A3B8); display: block; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE HINT (mobile only — desliza/voltea)
   ═══════════════════════════════════════════════════════════ */
.vc-resp-hint { margin-bottom: 20px; display: none; }
@media (max-width: 768px) { .vc-resp-hint { display: block; } }

/* ═══════════════════════════════════════════════════════════
   CTA ROW centrado (iniciar / siguiente)
   ═══════════════════════════════════════════════════════════ */
.vc-cta-row { text-align: center; margin-top: 28px; }
.vc-cta-row .btn { min-height: 48px; padding: 12px 32px; font-size: 15px; }

/* ═══════════════════════════════════════════════════════════
   VC-MODAL (custom — no requiere BS5 JS)
   Se abre con [aria-hidden="false"] via JS.
   ═══════════════════════════════════════════════════════════ */
.vc-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    font-family: 'Inter', system-ui, sans-serif;
}
.vc-modal[aria-hidden="false"] { display: flex; }
.vc-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.vc-modal-box {
    position: relative;
    width: 100%; max-width: 780px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border: 1px solid var(--vorecol-gray-200, #E2E8F0);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    display: flex; flex-direction: column; overflow: hidden;
    animation: vc-modal-slide .2s cubic-bezier(.2,.7,.2,1);
}
@keyframes vc-modal-slide {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.vc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--vorecol-gray-100, #F1F5F9);
}
.vc-modal-title {
    font-family: var(--tblr-font-sans-serif, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 22px; font-weight: 500;
    margin: 0; color: var(--vorecol-gray-900, #0F172A);
    letter-spacing: -0.01em;
}
.vc-modal-close {
    width: 34px; height: 34px; border-radius: 8px;
    background: transparent; border: none;
    color: var(--vorecol-gray-600, #475569);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vc-modal-close i { font-size: 18px; }
.vc-modal-close:hover {
    background: var(--vorecol-gray-100, #F1F5F9);
    color: var(--vorecol-gray-900, #0F172A);
}
.vc-modal-body {
    padding: 20px 24px; overflow-y: auto; flex: 1;
    font-size: 14px;
    color: var(--vorecol-gray-600, #475569);
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}
.vc-modal-body p { margin: 0 0 12px; }
.vc-modal-body ul { margin: 0 0 14px; padding-left: 20px; }
.vc-modal-body ul li { margin-bottom: 6px; }
.vc-modal-body strong,
.vc-modal-body b {
    color: var(--vorecol-gray-900, #0F172A); font-weight: 600;
}
.vc-modal-body a { color: var(--vorecol-primary, #1A67B7); text-decoration: underline; }
.vc-modal-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--vorecol-gray-100, #F1F5F9);
    background: #FAFBFC;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .vc-modal { padding: 0; align-items: flex-end; }
    .vc-modal-box { max-height: 92vh; border-radius: 14px 14px 0 0; }
    .vc-modal-foot { flex-direction: column-reverse; }
    .vc-modal-foot .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   TOAST ESTÁNDAR (markup canónico compartido con demo.php)
   JS: shared_assets/js/vc-toast.js  → showToastEnhanced(msg, type)
   CSS base (.toast, .avatar, .btn-close, .bg-*-lt, .toast-progress) ya vive en
   Tabler + shared_assets/css/custom.css. Aquí solo agregamos:
   - Animación slideUp/slideDown (inline en demo, necesaria también en candidato)
   - #toast-container con posicionamiento (si no existe con utilidades Tabler)
   ═══════════════════════════════════════════════════════════ */
@keyframes slideUp   { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(0);    opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

#toast-container { pointer-events: none; }
#toast-container .toast { pointer-events: auto; margin-bottom: .5rem; }

/* ═══════════════════════════════════════════════════════════
   FIXES a Veltrix legacy (anula reglas BS4 que rompen Tabler)
   ═══════════════════════════════════════════════════════════ */
.vc-wrap .btn { height: auto; }              /* Veltrix: .btn-primary { height: 35px } */
.vc-wrap .form-check-input { width: auto; }  /* dejar default Tabler */

/* Ocultar user-select en páginas de pruebas (anti-copy). Se aplica con body.vc-antiselect */
body.vc-antiselect,
body.vc-antiselect p,
body.vc-antiselect h1, body.vc-antiselect h2, body.vc-antiselect h3,
body.vc-antiselect span, body.vc-antiselect div {
    user-select: none; -webkit-user-select: none;
    -moz-user-select: none; -ms-user-select: none;
}
body.vc-antiselect input,
body.vc-antiselect textarea {
    user-select: text; -webkit-user-select: text;
}

/* ═══════════════════════════════════════════════════════════
   TEMA OSCURO (data-bs-theme="dark")
   Los componentes .vc-* tienen colores claros hardcodeados que Tabler no
   oscurece (background:#fff, texto gray-900...). Aquí los adaptamos a las
   variables de superficie de Tabler para que el dark del candidato quede
   coherente con las cards Tabler. El toggle del shell (navbar_user.php)
   setea data-bs-theme además de data-vc-theme.
   ═══════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .vc-body {
    background: var(--tblr-body-bg, #141414);
    color: var(--tblr-body-color, #e6e7e9);
}
[data-bs-theme="dark"] .vc-hero-title,
[data-bs-theme="dark"] .vc-section-title,
[data-bs-theme="dark"] .vc-split-main-title,
[data-bs-theme="dark"] .vc-test-title,
[data-bs-theme="dark"] .vc-tests-progress-label strong,
[data-bs-theme="dark"] .vc-section ul li strong,
[data-bs-theme="dark"] .vc-section ul li b { color: var(--tblr-body-color, #e6e7e9); }

[data-bs-theme="dark"] .vc-hero-lead,
[data-bs-theme="dark"] .vc-split-main-lead,
[data-bs-theme="dark"] .vc-section ul,
[data-bs-theme="dark"] .vc-tests-progress-label { color: var(--tblr-secondary, #8a8f98); }

/* Cards de pruebas / cuestionarios */
[data-bs-theme="dark"] .vc-test-card {
    background: var(--tblr-bg-surface, #1a1a1a);
    border-color: var(--tblr-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .vc-test-card:hover {
    border-color: var(--tblr-border-color-active, #3a3a3a);
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .vc-test-card.is-done { background: var(--tblr-bg-surface-secondary, #121212); }
[data-bs-theme="dark"] .vc-test-card.is-done .vc-test-title { color: var(--tblr-secondary, #8a8f98); }

/* Empty state */
[data-bs-theme="dark"] .vc-tests-empty {
    background: var(--tblr-bg-surface, #1a1a1a);
    border-color: var(--tblr-border-color, #2a2a2a);
    color: var(--tblr-secondary, #8a8f98);
}

/* Modal custom (.vc-modal-box vive en candidate.css; el de navbar_user.php ya
   tiene sus propios tokens dark) */
[data-bs-theme="dark"] .vc-modal-box {
    background: var(--tblr-bg-surface, #1a1a1a);
    border-color: var(--tblr-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .vc-modal-title { color: var(--tblr-body-color, #e6e7e9); }
[data-bs-theme="dark"] .vc-modal-body { color: var(--tblr-secondary, #8a8f98); }
[data-bs-theme="dark"] .vc-modal-body strong,
[data-bs-theme="dark"] .vc-modal-body b { color: var(--tblr-body-color, #e6e7e9); }
[data-bs-theme="dark"] .vc-modal-head { border-bottom-color: var(--tblr-border-color, #2a2a2a); }
[data-bs-theme="dark"] .vc-modal-foot {
    background: var(--tblr-bg-surface-secondary, #121212);
    border-top-color: var(--tblr-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .vc-modal-close { color: var(--tblr-secondary, #8a8f98); }
[data-bs-theme="dark"] .vc-modal-close:hover {
    background: var(--tblr-bg-surface-secondary, #121212);
    color: var(--tblr-body-color, #e6e7e9);
}

/* Separadores / action bar */
[data-bs-theme="dark"] .vc-actions,
[data-bs-theme="dark"] .vc-tests-progress-bar { border-bottom-color: var(--tblr-border-color, #2a2a2a); }

/* Tablas (card-table) en oscuro: Bootstrap 4 legacy fuerza color #212529 (texto
   oscuro) en .table, que NO se adapta → filas ilegibles sobre la card oscura.
   Forzamos texto claro + bordes oscuros (candidate.css solo carga en páginas del
   candidato, así que no afecta otras tablas del sistema). */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table > :not(caption) > * > * ,
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th { color: var(--tblr-body-color, #e6e7e9); border-color: var(--tblr-border-color, #2a2a2a); }
[data-bs-theme="dark"] .table .text-muted,
[data-bs-theme="dark"] .table small { color: var(--tblr-secondary, #8a8f98); }
[data-bs-theme="dark"] .table a:not(.btn) { color: var(--tblr-primary, #4090CB); }

/* Textarea de los modales del candidato (Cuéntanos qué te gusta / qué podemos mejorar):
   el shell hardcodea background:#fff + texto gray-900 → en oscuro queda un bloque blanco
   dentro del modal oscuro y a veces el texto se vuelve invisible en focus. Forzar dark. */
[data-bs-theme="dark"] .vc-dlg-textarea {
    background: var(--tblr-bg-surface, #1a1a1a);
    color: var(--tblr-body-color, #e6e7e9);
    border-color: var(--tblr-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .vc-dlg-textarea::placeholder { color: var(--tblr-secondary, #8a8f98); }
[data-bs-theme="dark"] .vc-dlg-textarea:focus {
    border-color: var(--tblr-primary, #4090CB);
    box-shadow: 0 0 0 3px rgba(64,144,203,.25);
}

/* ───────────────────────────────────────────────────────────────────────────
   PBI-PSI-EVALUADO-FOTOMODAL-002 — Editor de foto estilo Azure/LinkedIn.
   Máscara REDONDA del recorte (WYSIWYG): el área de recorte de Cropper.js se ve
   circular, mostrando exactamente cómo quedará el avatar (que se pinta redondo en
   topbar y hero). La salida sigue siendo cuadrada 1:1 400x400 (patrón LinkedIn:
   se guarda cuadrada, se muestra redonda).
   ─────────────────────────────────────────────────────────────────────────── */
.vc-foto-stage .cropper-view-box,
.vc-foto-stage .cropper-face {
    border-radius: 50%;
}
/* Aro de guía sutil alrededor del círculo de recorte */
.vc-foto-stage .cropper-view-box {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
}
/* El "modal" de Cropper (oscurecido fuera del recorte) un poco más tenue */
.vc-foto-stage .cropper-modal {
    background-color: #000;
    opacity: .42;
}