/*
 * Identidad visual GRANA
 * Esta capa se carga después de los estilos existentes para conservar la lógica
 * y permitir revertir el rediseño sin modificar los componentes de PHP.
 */

:root {
    --grana-primary: #681519;
    --grana-primary-dark: #501013;
    --grana-cream: #eee5d3;
    --grana-petroleum: #174b59;
    --grana-accent: #c46e70;
    --grana-bg: #f8f6f2;
    --grana-surface: #ffffff;
    --grana-text: #272727;
    --grana-muted: #6b6b6b;
    --grana-border: #e8e0d6;
    --grana-success: #2f7469;
    --grana-warning: #9b6328;
    --grana-danger: #a9474d;
    --grana-radius-sm: 10px;
    --grana-radius: 16px;
    --grana-radius-lg: 24px;
    --grana-shadow-sm: 0 8px 24px rgba(58, 26, 24, .06);
    --grana-shadow: 0 18px 50px rgba(58, 26, 24, .10);
    --grana-transition: 180ms cubic-bezier(.2, .8, .2, 1);

    /* Variables anteriores reasignadas para los componentes existentes. */
    --primary: var(--grana-primary);
    --primary-dark: var(--grana-primary-dark);
    --accent: var(--grana-cream);
    --accent-ink: var(--grana-primary-dark);
    --background: var(--grana-bg);
    --surface: var(--grana-surface);
    --surface-soft: #f4eee8;
    --text: var(--grana-text);
    --text-muted: var(--grana-muted);
    --border: var(--grana-border);
    --success: var(--grana-success);
    --warning: var(--grana-warning);
    --danger: var(--grana-danger);
    --radius-sm: var(--grana-radius-sm);
    --radius: var(--grana-radius);
    --radius-lg: var(--grana-radius-lg);
    --shadow-sm: var(--grana-shadow-sm);
    --shadow: var(--grana-shadow);
    --transition: var(--grana-transition);

    --portal-primary: var(--grana-primary);
    --portal-primary-dark: var(--grana-primary-dark);
    --portal-accent: var(--grana-cream);
    --portal-bg: var(--grana-bg);
    --portal-surface: var(--grana-surface);
    --portal-text: var(--grana-text);
    --portal-muted: var(--grana-muted);
    --portal-border: var(--grana-border);
    --portal-shadow: var(--grana-shadow);
    --portal-transition: var(--grana-transition);
}

html { background: var(--grana-bg); }

body,
button,
input,
select,
textarea {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Administración                                                             */
/* -------------------------------------------------------------------------- */

body.admin-body {
    background:
        radial-gradient(circle at 96% -8%, rgba(196, 110, 112, .14), transparent 25rem),
        linear-gradient(180deg, #faf8f5 0, var(--grana-bg) 24rem);
    color: var(--grana-text);
}

.admin-sidebar {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .05), transparent 27%),
        var(--grana-primary-dark);
    border-right: 1px solid rgba(255, 255, 255, .08);
    gap: 2rem;
    padding: 1.55rem 1.05rem 1.1rem;
}

.admin-sidebar::after {
    background: linear-gradient(135deg, rgba(196, 110, 112, .25), transparent 62%);
    border-radius: 50%;
    content: "";
    height: 18rem;
    pointer-events: none;
    position: absolute;
    right: -11rem;
    top: -8rem;
    width: 18rem;
}

.sidebar-top,
.sidebar-nav,
.sidebar-user { position: relative; z-index: 1; }

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    gap: .7rem;
    letter-spacing: .08em;
}

.brand-mark {
    align-items: center;
    background: var(--grana-cream);
    border-radius: 11px;
    color: var(--grana-primary);
    display: inline-flex;
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    transform: none;
    width: 34px;
}

.brand-mark span { display: none; }
.brand-wordmark { line-height: 1; }

.brand-caption {
    color: rgba(255, 255, 255, .67);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .035em;
    line-height: 1.55;
    margin: .75rem 0 0 2.75rem;
    text-transform: uppercase;
}

.nav-caption {
    color: rgba(255, 255, 255, .46);
    margin-bottom: .45rem;
}

.sidebar-nav { gap: .38rem; }

.sidebar-nav .nav-link {
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .77);
    font-size: .87rem;
    min-height: 46px;
    padding: .66rem .72rem;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transform: translateX(3px);
}

.sidebar-nav .nav-link.active {
    background: var(--grana-cream);
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 7px 17px rgba(32, 4, 5, .18);
    color: var(--grana-primary-dark);
}

.nav-icon {
    background: rgba(255, 255, 255, .11);
    border-radius: 8px;
    font-size: .9rem;
}

.sidebar-nav .nav-link.active .nav-icon {
    background: var(--grana-primary);
    color: #fff;
}

.sidebar-user {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 14px;
}

.user-avatar {
    background: var(--grana-cream);
    color: var(--grana-primary);
}

.sidebar-user a {
    color: rgba(255, 255, 255, .68);
    transition: color var(--grana-transition);
}

.sidebar-user a:hover { color: #fff; }

.admin-topbar {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(104, 21, 25, .09);
    box-shadow: 0 3px 20px rgba(74, 35, 31, .03);
    min-height: 78px;
}

.admin-topbar strong { color: var(--grana-primary-dark); font-size: .9rem; }
.admin-topbar .text-muted { color: var(--grana-muted) !important; }

.admin-main { max-width: 1520px; padding-top: 2.45rem; }
.admin-footer { color: var(--grana-muted); }

.btn {
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .62rem 1rem;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.recording-close:focus-visible {
    box-shadow: 0 0 0 4px rgba(23, 75, 89, .18) !important;
    outline: 2px solid transparent;
}

.btn-primary {
    background: var(--grana-primary);
    border-color: var(--grana-primary);
    box-shadow: 0 7px 16px rgba(104, 21, 25, .18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--grana-primary-dark);
    border-color: var(--grana-primary-dark);
    box-shadow: 0 10px 22px rgba(104, 21, 25, .23);
}

.btn-outline-primary {
    border-color: rgba(104, 21, 25, .32);
    color: var(--grana-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--grana-primary);
    border-color: var(--grana-primary);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--grana-border);
    color: var(--grana-petroleum);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--grana-petroleum);
    border-color: var(--grana-petroleum);
    color: #fff;
}

.btn-outline-danger { border-color: rgba(169, 71, 77, .38); color: var(--grana-danger); }
.btn-outline-danger:hover { background: var(--grana-danger); border-color: var(--grana-danger); }
.btn-light { background: var(--grana-cream); border-color: var(--grana-cream); }
.btn:disabled { cursor: not-allowed; opacity: .57; transform: none !important; }
.btn.is-copied { background: var(--grana-success); border-color: var(--grana-success); color: #fff; }

.card,
.admin-card,
.process-list-card,
.summary-card {
    border-color: rgba(104, 21, 25, .10);
    box-shadow: var(--grana-shadow-sm);
}

.admin-card { border-radius: var(--grana-radius-lg); }

.eyebrow,
.login-kicker {
    color: var(--grana-primary);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
    color: var(--grana-text);
    font-weight: 600;
}

.text-muted { color: var(--grana-muted) !important; }

.form-label { color: var(--grana-text); font-size: .8rem; font-weight: 600; }

.form-control,
.form-select {
    background-color: #fff;
    border-color: #ded5ca;
    border-radius: 10px;
    color: var(--grana-text);
    font-size: .88rem;
    min-height: 46px;
    padding: .7rem .85rem;
}

.form-control::placeholder { color: #9c928b; }

.form-control:focus,
.form-select:focus {
    border-color: var(--grana-petroleum);
    box-shadow: 0 0 0 .22rem rgba(23, 75, 89, .11);
}

textarea.form-control { line-height: 1.6; }
.form-check-input { border-color: #c9bdb4; }
.form-check-input:checked { background-color: var(--grana-primary); border-color: var(--grana-primary); }
.form-text { color: var(--grana-muted); font-size: .73rem; }

.alert {
    border: 1px solid transparent;
    border-radius: 13px;
    box-shadow: none;
    font-size: .86rem;
}

.alert-success { background: #e8f3ef; border-color: #cee4da; color: #285f55; }
.alert-danger { background: #fbebea; border-color: #ecc4c2; color: #813438; }
.alert-info { background: #e8f1f3; border-color: #cce0e4; color: #174b59; }

.status-badge,
.application-status {
    align-items: center;
    border: 1px solid transparent;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 600;
    gap: .34rem;
    letter-spacing: .015em;
    padding: .36rem .62rem;
}

.status-badge::before,
.application-status::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: .38rem;
    opacity: .75;
    width: .38rem;
}

.status-borrador { background: #f1efec; border-color: #dfd9d2; color: #69625d; }
.status-publicado { background: #e6f2ee; border-color: #c9e1d9; color: #2f7469; }
.status-cerrado { background: #f8eedf; border-color: #ecd6b6; color: #946127; }
.status-archivado { background: #f4e8e7; border-color: #e8ccca; color: #955157; }
.application-status { background: #f4eee8; color: var(--grana-petroleum); }

.metric-card {
    background: linear-gradient(135deg, #fff, #fdfaf6);
    border: 1px solid rgba(104, 21, 25, .09);
    border-radius: var(--grana-radius);
    box-shadow: var(--grana-shadow-sm);
    overflow: hidden;
}

.metric-card::after {
    background: rgba(238, 229, 211, .72);
    height: 132px;
    right: -63px;
    top: -69px;
    width: 132px;
}

.metric-card .card-body { min-height: 126px; padding: 1.2rem 1.25rem; }

.metric-card .display-6 {
    color: var(--grana-primary);
    font-size: 2.15rem;
    font-weight: 600;
    letter-spacing: -.08em;
}

.metric-card .text-muted { color: var(--grana-muted) !important; font-size: .68rem; }

.dashboard-heading {
    align-items: end;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-bottom: 1.65rem;
}

.dashboard-heading h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.055em; margin: 0 0 .35rem; }
.dashboard-heading > div > p:last-child { color: var(--grana-muted); font-size: .9rem; margin: 0; }
.dashboard-metrics { margin-bottom: 1.2rem; }
.dashboard-metrics .metric-card .card-body { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; }
.dashboard-metrics .metric-card p { align-self: center; color: var(--grana-muted); font-size: .7rem; font-weight: 600; grid-column: 1; letter-spacing: .035em; margin: 0; text-transform: uppercase; }
.dashboard-metrics .metric-card .display-6 { align-self: end; grid-column: 1; grid-row: 2; }
.dashboard-metrics .metric-card small { align-self: end; color: var(--grana-muted); font-size: .71rem; grid-column: 1; grid-row: 3; }
.metric-icon { align-items: center; background: #f6eee8; border-radius: 10px; color: var(--grana-primary); display: inline-flex; font-size: 1rem; grid-column: 2; grid-row: 1; height: 36px; justify-content: center; position: relative; width: 36px; z-index: 1; }

.dashboard-quick-actions {
    align-items: center;
    background: linear-gradient(100deg, var(--grana-primary-dark), var(--grana-primary));
    border-radius: var(--grana-radius-lg);
    color: #fff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin: 1.2rem 0 .55rem;
    overflow: hidden;
    padding: 1.55rem 1.65rem;
    position: relative;
}

.dashboard-quick-actions::after { background: rgba(255,255,255,.07); border-radius: 50%; content: ""; height: 17rem; position: absolute; right: -8rem; top: -11rem; width: 17rem; }
.dashboard-quick-actions > * { position: relative; z-index: 1; }
.dashboard-quick-actions .eyebrow { color: var(--grana-cream); }
.dashboard-quick-actions h2 { color: #fff; font-size: 1.1rem; margin: 0 0 .25rem; }
.dashboard-quick-actions p:not(.eyebrow) { color: rgba(255,255,255,.75); font-size: .8rem; margin: 0; }
.dashboard-quick-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.dashboard-quick-links a { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; display: flex; font-size: .75rem; font-weight: 600; gap: .52rem; padding: .64rem .72rem; text-decoration: none; transition: background var(--grana-transition), transform var(--grana-transition); }
.dashboard-quick-links a i:last-child { font-size: .7rem; opacity: .7; }
.dashboard-quick-links a:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-1px); }

.dashboard-panel { overflow: hidden; }
.dashboard-panel-heading { align-items: center; border-bottom: 1px solid var(--grana-border); display: flex; justify-content: space-between; padding: 1.3rem 1.45rem; }
.dashboard-panel-heading h2 { font-size: 1rem; margin: 0; }
.dashboard-panel-heading a { color: var(--grana-petroleum); font-size: .76rem; font-weight: 600; text-decoration: none; }
.dashboard-panel-heading a:hover { color: var(--grana-primary); }
.dashboard-process-list,.dashboard-candidate-list { display: grid; }
.dashboard-process-item { align-items: center; border-bottom: 1px solid rgba(104,21,25,.08); color: var(--grana-text); display: grid; gap: .75rem; grid-template-columns: auto minmax(0,1fr) auto auto; padding: 1rem 1.45rem; text-decoration: none; transition: background var(--grana-transition); }
.dashboard-process-item:last-child { border-bottom: 0; }
.dashboard-process-item:hover { background: #fcf8f4; color: var(--grana-text); }
.dashboard-process-icon { align-items: center; background: #f4eee8; border-radius: 9px; color: var(--grana-primary); display: inline-flex; height: 33px; justify-content: center; width: 33px; }
.dashboard-process-copy { min-width: 0; }
.dashboard-process-copy strong,.dashboard-process-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-process-copy strong { font-size: .82rem; font-weight: 600; }
.dashboard-process-copy small { color: var(--grana-muted); font-size: .68rem; margin-top: .15rem; }
.dashboard-process-count { color: var(--grana-primary); display: grid; font-size: .95rem; font-weight: 600; text-align: center; }
.dashboard-process-count small { color: var(--grana-muted); font-size: .58rem; font-weight: 500; }
.dashboard-candidate-item { align-items: center; border-bottom: 1px solid rgba(104,21,25,.08); display: grid; gap: .7rem; grid-template-columns: auto minmax(0,1fr) auto; padding: 1rem 1.45rem; }
.dashboard-candidate-item:last-child { border-bottom: 0; }
.dashboard-candidate-avatar { align-items: center; background: var(--grana-cream); border-radius: 50%; color: var(--grana-primary); display: inline-flex; font-size: .76rem; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
.dashboard-candidate-item strong,.dashboard-candidate-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-candidate-item strong { font-size: .8rem; font-weight: 600; }
.dashboard-candidate-item small { color: var(--grana-muted); font-size: .68rem; margin-top: .14rem; }
.dashboard-score,.dashboard-pending { border-radius: 999px; font-size: .66rem; font-weight: 600; padding: .3rem .5rem; }
.dashboard-score { background: #e7f2ef; color: var(--grana-success); }
.dashboard-pending { background: #f2eee9; color: var(--grana-muted); }

.process-hero {
    background:
        radial-gradient(circle at 100% 0, rgba(196, 110, 112, .19), transparent 22rem),
        var(--grana-surface);
    border-color: rgba(104, 21, 25, .11);
    border-radius: var(--grana-radius-lg);
    padding: 2rem;
}

.summary-card {
    background: #fffdfa;
    border-radius: 14px;
    min-height: 122px;
    padding: 1.05rem 1.15rem;
}

.summary-card span { color: var(--grana-muted); font-size: .7rem; }
.summary-card strong { color: var(--grana-primary); font-weight: 600; }
.summary-card a { color: var(--grana-petroleum); }
.public-link-box { background: #faf6f1; border-color: #d8c2b6; color: var(--grana-petroleum); }

.process-list-card {
    background: linear-gradient(135deg, #fff, #fdfbf8);
    border-radius: var(--grana-radius);
    padding: 1.35rem;
}

.process-list-card:hover {
    border-color: rgba(104, 21, 25, .23);
    box-shadow: var(--grana-shadow);
    transform: translateY(-3px);
}

.candidate-count {
    background: var(--grana-cream);
    color: var(--grana-primary);
    font-weight: 600;
}

.candidate-count small { color: var(--grana-petroleum); }

.candidate-page-heading { gap: 1.5rem; }

.candidate-table-heading {
    border-color: rgba(104, 21, 25, .10);
    padding: 1.35rem 1.5rem;
}

.candidate-table-count {
    background: #f4eee8;
    color: var(--grana-primary);
    font-size: .68rem;
}

.table { --bs-table-hover-bg: #fcf8f3; --bs-table-border-color: rgba(104, 21, 25, .10); }
.table thead th { color: #776b64; font-size: .65rem; padding: 1rem 1.2rem; }
.table td { padding: 1.15rem 1.2rem; vertical-align: middle; }
.table tbody tr { transition: background var(--grana-transition); }

.candidate-name > span {
    background: var(--grana-cream);
    color: var(--grana-primary);
}

.candidate-name strong { color: var(--grana-text); font-weight: 600; }
.candidate-name small { color: var(--grana-muted); }
.recommendation-cell { color: #635b55; line-height: 1.55; max-width: 330px; }

.evaluation-detail {
    background: #faf7f3;
    border: 1px solid var(--grana-border);
    border-radius: 10px;
    color: var(--grana-muted);
    font-size: .76rem;
    max-width: 360px;
    padding: .55rem .7rem;
}

.evaluation-detail summary { color: var(--grana-petroleum); cursor: pointer; font-weight: 600; }
.evaluation-detail p { border-top: 1px solid var(--grana-border); margin: .65rem 0 0; padding-top: .65rem; }
.evaluation-detail p strong { color: var(--grana-primary); display: block; margin-bottom: .2rem; }

.empty-state {
    background: #fffdfa;
    border-color: #dccfc4;
    color: var(--grana-muted);
}

.empty-state > span { color: var(--grana-primary); }

.question-manager { gap: .8rem; }

.question-manager-item {
    background: #fffdfa;
    border-color: #e8ddd3;
    border-radius: 12px;
    padding: 1rem;
}

.question-manager-item:hover { border-color: #d5bbb1; }
.question-manager-number { background: var(--grana-primary); color: #fff; }
.question-manager-head p { color: var(--grana-text); font-weight: 500; }
.question-locked { color: var(--grana-petroleum); }
.question-manager-item.is-editing { border-color: var(--grana-petroleum); box-shadow: 0 8px 22px rgba(23, 75, 89, .09); }

.admin-main video { border: 1px solid var(--grana-border); border-radius: 12px !important; }

/* -------------------------------------------------------------------------- */
/* Portal público                                                              */
/* -------------------------------------------------------------------------- */

body.portal-body {
    background:
        radial-gradient(circle at 4% 8%, rgba(196, 110, 112, .13), transparent 23rem),
        radial-gradient(circle at 98% 4%, rgba(23, 75, 89, .10), transparent 25rem),
        var(--grana-bg);
    color: var(--grana-text);
}

.portal-shell { max-width: 1080px; padding: 2.1rem 1rem 3.3rem; }

.portal-header { margin: 0 .3rem 1.25rem; }

.portal-brand {
    color: var(--grana-primary-dark);
    font-size: 1rem;
    gap: .7rem;
    letter-spacing: .055em;
}

.portal-brand:hover { color: var(--grana-primary); }

.portal-brand-mark {
    background: var(--grana-primary);
    border-radius: 10px;
    color: var(--grana-cream);
    font-family: Georgia, serif;
    font-size: 1.05rem;
    height: 34px;
    transform: none;
    width: 34px;
}

.portal-brand-copy { display: grid; gap: .07rem; }
.portal-brand-copy strong { font-size: 1rem; font-weight: 700; line-height: 1; }
.portal-brand-copy small { color: var(--grana-muted); font-size: .55rem; font-weight: 500; letter-spacing: .055em; }

.portal-status {
    background: #edf4f1;
    color: var(--grana-petroleum);
    font-weight: 600;
    letter-spacing: 0;
}

.portal-card {
    border: 1px solid rgba(104, 21, 25, .10);
    border-radius: 22px;
    box-shadow: 0 20px 55px rgba(73, 39, 33, .09);
}

.portal-intro {
    background:
        radial-gradient(circle at 91% -44%, rgba(238, 229, 211, .98), transparent 42%),
        linear-gradient(120deg, #fffdfb, #fff);
    border-color: var(--grana-border);
    padding: 2.4rem 2.6rem 1.9rem;
}

.portal-eyebrow,
.form-step-overline {
    color: var(--grana-primary);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .125em;
    text-transform: uppercase;
}

.portal-intro h1 {
    color: var(--grana-primary-dark);
    font-size: clamp(1.85rem, 4vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -.055em;
}

.portal-intro p { color: var(--grana-muted); font-size: .9rem; }

.stepper { gap: .55rem; margin-top: 1.7rem; max-width: 760px; }

.stepper-item {
    color: #9b9089;
    font-size: .67rem;
    font-weight: 600;
    gap: .42rem;
}

.stepper-item:not(:last-child)::after { background: #e7ddd4; height: 1px; }
.stepper-number { background: #f1e8e1; color: #7c6d65; height: 28px; width: 28px; }
.stepper-item.active,.stepper-item.complete { color: var(--grana-primary); }
.stepper-item.active .stepper-number,.stepper-item.complete .stepper-number { background: var(--grana-primary); color: #fff; }
.stepper-item.complete:not(:last-child)::after { background: var(--grana-primary); }

.job-summary { border-color: var(--grana-border); padding: 1.55rem 2.6rem; }
.job-summary h2 { color: var(--grana-text); font-size: 1.08rem; font-weight: 600; }
.job-summary > p:not(.portal-eyebrow) { color: var(--grana-muted); }

.job-summary-panel {
    background: #faf6f0;
    border: 1px solid #eee1d7;
    border-radius: 12px;
    color: var(--grana-muted);
}

.job-summary-panel strong { color: var(--grana-petroleum); }
.job-item-list li::before { color: var(--grana-primary); }

.portal-form { padding: 2.35rem 2.6rem; }

.form-step.active { animation: grana-step-in 260ms both; }
.form-step h2 { color: var(--grana-text); font-size: 1.42rem; font-weight: 600; margin-top: .25rem; }
.step-description { color: var(--grana-muted); max-width: 660px; }

.portal-form .form-label { color: var(--grana-text); font-size: .82rem; }

.portal-form .form-control {
    border-color: #ded4ca;
    border-radius: 10px;
    min-height: 49px;
}

.portal-form .form-control:focus {
    border-color: var(--grana-petroleum);
    box-shadow: 0 0 0 .22rem rgba(23, 75, 89, .11);
}

.upload-box {
    background: #fcf8f4;
    border: 1.5px dashed #cba79b;
    border-radius: 14px;
    padding: 1.25rem;
}

.upload-box .form-label { color: var(--grana-primary); display: block; }
.upload-box .form-label i { font-size: 1rem; margin-right: .32rem; }

.filter-question-heading { border-color: var(--grana-primary); }
.filter-question-heading p { color: var(--grana-muted); }

.filter-question {
    background: #fffdfa;
    border-color: #e8ddd3;
    border-radius: 14px;
    padding: 1.12rem;
}

.filter-question:focus-within {
    border-color: rgba(23, 75, 89, .55);
    box-shadow: 0 8px 22px rgba(23, 75, 89, .07);
}

.filter-question-number { background: var(--grana-primary); }
.filter-question .form-label { color: var(--grana-text); font-weight: 600; }
.required-mark { color: var(--grana-danger); }
.optional-mark { color: var(--grana-muted); }

.privacy-box {
    background: #f9f4ec;
    border-color: #e7d8ca;
    color: #5c514b;
}

.privacy-box .form-check-input:checked { background-color: var(--grana-primary); border-color: var(--grana-primary); }

.portal-actions {
    border-color: var(--grana-border);
    margin: 2rem -2.6rem -2.35rem;
    padding: 1.2rem 2.6rem;
}

.btn-portal {
    background: var(--grana-primary);
    box-shadow: 0 7px 17px rgba(104, 21, 25, .18);
    min-width: 175px;
}

.btn-portal:hover,.btn-portal:focus { background: var(--grana-primary-dark); }

.btn-back {
    border-color: #d4c4b8;
    color: var(--grana-petroleum);
}

.btn-back:hover,.btn-back:focus { background: #f3ebe4; border-color: #bda79a; color: var(--grana-primary); }

.portal-empty-step {
    align-items: center;
    background: #fbf7f2;
    border: 1px dashed #daccc0;
    border-radius: 14px;
    color: var(--grana-muted);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
}

.portal-empty-step i { color: var(--grana-petroleum); font-size: 1.7rem; }
.portal-empty-step h3 { font-size: 1rem; margin: 0; }
.portal-empty-step p { font-size: .85rem; margin: 0; }

.video-interview-intro {
    background:
        radial-gradient(circle at 92% -28%, rgba(238, 229, 211, .27), transparent 34%),
        linear-gradient(135deg, var(--grana-primary-dark), var(--grana-primary));
    border-radius: 15px;
    margin: 0 0 1.05rem;
    padding: 1.45rem;
}

.video-interview-intro .portal-eyebrow { color: var(--grana-cream); }
.video-interview-intro h3 { color: #fff; font-weight: 600; }
.video-interview-intro p { color: rgba(255, 255, 255, .8); }

.video-question-card {
    background: #fffdfa;
    border-color: #e8ddd3;
    border-radius: 14px;
    padding: 1rem;
}

.video-question-card strong { color: var(--grana-text); font-weight: 600; }
.video-question-card small { color: var(--grana-muted); }
.video-complete { color: var(--grana-success); }
.video-step-warning { align-items: center; background: #fbebea; border: 1px solid #ecc4c2; border-radius: 10px; color: #813438; display: flex; font-size: .78rem; gap: .45rem; margin: 1rem 0 0; padding: .7rem .8rem; }

.recording-dialog::backdrop { background: rgba(46, 19, 20, .62); backdrop-filter: blur(4px); }
.recording-dialog.recording-dialog-fallback[open] { background: rgba(46, 19, 20, .62); height: 100vh; inset: 0; max-width: none; position: fixed; width: 100vw; z-index: 1050; }
.recording-dialog.recording-dialog-fallback[open] .recording-dialog-content { margin: min(9vh, 4rem) auto; max-width: 680px; width: calc(100% - 2rem); }

.recording-dialog-content {
    border: 1px solid rgba(104, 21, 25, .14);
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(52, 22, 24, .32);
    padding: 2.1rem;
}

.recording-dialog-content h3 { color: var(--grana-text); font-weight: 600; }
.recording-close { background: #f5ece6; color: var(--grana-primary); }
.recording-close:hover { background: var(--grana-primary); color: #fff; }

.video-camera-frame {
    align-items: center;
    background: #f6f0eb;
    border: 1px solid #e7d8cd;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    min-height: 185px;
    overflow: hidden;
    position: relative;
}

.video-preview { margin-top: 0; position: relative; z-index: 1; }
.video-preview:not([hidden]) ~ .video-camera-placeholder { display: none; }

.video-camera-placeholder {
    align-items: center;
    color: #8e817a;
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    gap: .5rem;
    padding: 1rem;
    text-align: center;
}

.video-camera-placeholder i { color: var(--grana-primary); font-size: 1.6rem; }
.video-counter { background: #f5e9e3; color: var(--grana-primary); }
.video-answer-status { color: var(--grana-muted); }

.portal-footnote { color: #82756d; }
.portal-footnote i { color: var(--grana-petroleum); margin-right: .25rem; }

.success-card { border: 1px solid rgba(104, 21, 25, .10); box-shadow: var(--grana-shadow); }
.success-mark { background: var(--grana-cream); color: var(--grana-primary); }
.success-card h1 { color: var(--grana-primary-dark); font-weight: 600; }
.success-card p { color: var(--grana-muted); }

.success-confidential {
    align-items: center;
    color: var(--grana-petroleum);
    display: inline-flex;
    font-size: .74rem;
    font-weight: 600;
    gap: .35rem;
    margin-top: 1.35rem;
}

/* -------------------------------------------------------------------------- */
/* Acceso y configuración inicial                                              */
/* -------------------------------------------------------------------------- */

body.grana-login-page {
    align-items: center;
    background:
        radial-gradient(circle at 8% 12%, rgba(196, 110, 112, .16), transparent 23rem),
        radial-gradient(circle at 95% 85%, rgba(23, 75, 89, .15), transparent 25rem),
        var(--grana-bg);
    color: var(--grana-text);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 1.5rem;
}

.grana-login-shell {
    background: #fff;
    border: 1px solid rgba(104, 21, 25, .11);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(73, 35, 31, .13);
    display: grid;
    grid-template-columns: minmax(290px, .92fr) minmax(340px, 1fr);
    max-width: 980px;
    min-height: 555px;
    overflow: hidden;
    width: 100%;
}

.grana-login-intro {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .13) 0 1px, transparent 1.5px) 0 0 / 20px 20px,
        linear-gradient(145deg, var(--grana-primary-dark), var(--grana-primary));
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 3.1rem;
}

.grana-login-brand { align-items: center; display: flex; font-size: 1.2rem; font-weight: 700; gap: .65rem; letter-spacing: .1em; }
.grana-login-mark { align-items: center; background: var(--grana-cream); border-radius: 10px; color: var(--grana-primary); display: inline-flex; font-family: Georgia, serif; font-size: 1.1rem; height: 34px; justify-content: center; letter-spacing: 0; width: 34px; }
.grana-login-eyebrow { color: rgba(255, 255, 255, .69); font-size: .65rem; font-weight: 500; letter-spacing: .1em; margin: 1.15rem 0 0; text-transform: uppercase; }
.grana-login-intro h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.55rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.2; margin: auto 0 1rem; max-width: 410px; }
.grana-login-intro > p:not(.grana-login-eyebrow) { color: rgba(255, 255, 255, .77); font-size: .9rem; line-height: 1.7; margin: 0; max-width: 380px; }
.grana-login-feature { align-items: center; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); display: flex; font-size: .73rem; gap: .5rem; margin-top: 2.1rem; padding-top: 1.25rem; }
.grana-login-feature i { color: var(--grana-cream); font-size: 1rem; }

.grana-login-form { align-items: stretch; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem clamp(2rem, 6vw, 5rem); }
.grana-login-kicker { color: var(--grana-primary); font-size: .66rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 .55rem; text-transform: uppercase; }
.grana-login-form h1 { font-size: 1.8rem; font-weight: 600; letter-spacing: -.05em; margin: 0; }
.grana-login-subtitle { color: var(--grana-muted); font-size: .86rem; line-height: 1.6; margin: .45rem 0 1.9rem; }
.grana-login-fields { display: grid; gap: 1rem; }
.grana-login-input { display: grid; gap: .42rem; }
.grana-login-input label { color: var(--grana-text); font-size: .78rem; font-weight: 600; }
.grana-login-input > span { align-items: center; border: 1px solid #dcd1c8; border-radius: 10px; display: flex; min-height: 48px; padding: 0 .85rem; transition: border-color var(--grana-transition), box-shadow var(--grana-transition); }
.grana-login-input > span:focus-within { border-color: var(--grana-petroleum); box-shadow: 0 0 0 .22rem rgba(23, 75, 89, .11); }
.grana-login-input i { color: var(--grana-petroleum); margin-right: .62rem; }
.grana-login-input input { background: transparent; border: 0; color: var(--grana-text); font-size: .88rem; outline: 0; padding: .72rem 0; width: 100%; }
.grana-login-input input::placeholder { color: #a0948c; }
.grana-login-submit { align-items: center; background: var(--grana-primary); border: 0; border-radius: 10px; box-shadow: 0 8px 17px rgba(104, 21, 25, .18); color: #fff; display: flex; font-size: .88rem; font-weight: 600; justify-content: center; margin-top: .55rem; min-height: 48px; transition: transform var(--grana-transition), background var(--grana-transition), box-shadow var(--grana-transition); }
.grana-login-submit:hover,.grana-login-submit:focus { background: var(--grana-primary-dark); box-shadow: 0 11px 23px rgba(104, 21, 25, .24); transform: translateY(-1px); }
.grana-login-submit i { margin-left: .55rem; }
.grana-login-links { color: var(--grana-muted); font-size: .73rem; margin: 1.35rem 0 0; text-align: center; }
.grana-login-links a { color: var(--grana-primary); font-weight: 600; text-decoration: none; }
.grana-login-links a:hover { text-decoration: underline; }
.grana-login-form .alert-danger { border-radius: 10px; }

body.login-page { align-items: center; background: var(--grana-bg); display: flex; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-card { background: #fff; border: 1px solid var(--grana-border); border-radius: 18px; box-shadow: var(--grana-shadow); max-width: 470px; padding: 2.25rem; }
.login-brand { color: var(--grana-primary); font-weight: 700; letter-spacing: .08em; }
.login-brand .brand-mark { margin-right: .1rem; transform: none; }

/* -------------------------------------------------------------------------- */
/* Animación y responsive                                                      */
/* -------------------------------------------------------------------------- */

@keyframes grana-step-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 991.98px) {
    .admin-sidebar { box-shadow: 10px 0 40px rgba(41, 14, 16, .24); }
    .grana-login-shell { grid-template-columns: 1fr; max-width: 590px; }
    .grana-login-intro { min-height: 255px; padding: 2.15rem; }
    .grana-login-intro h1 { margin: 1.8rem 0 .6rem; }
    .grana-login-feature { display: none; }
}

@media (max-width: 767.98px) {
    .table-responsive { border-radius: 0 0 var(--grana-radius-lg) var(--grana-radius-lg); }
    .table { min-width: 720px; }
    .candidate-table-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
    .portal-intro,.portal-form,.job-summary { padding-left: 1.5rem; padding-right: 1.5rem; }
    .portal-actions { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
    .stepper { gap: .18rem; }
    .stepper-item { font-size: 0; justify-content: center; }
    .stepper-item:not(:last-child)::after { margin-left: 0; }
    .portal-status { font-size: 0; height: 31px; padding: 0; width: 31px; }
    .portal-status i { font-size: .82rem; line-height: 31px; }
    .dashboard-heading,.dashboard-quick-actions { align-items: flex-start; flex-direction: column; }
    .dashboard-heading .btn { width: 100%; }
    .dashboard-quick-links { width: 100%; }
    .dashboard-quick-links a { flex: 1; justify-content: center; }
    .dashboard-process-item { grid-template-columns: auto minmax(0,1fr) auto; }
    .dashboard-process-item .status-badge { display: none; }
}

@media (max-width: 575.98px) {
    body.grana-login-page { padding: 0; }
    .grana-login-shell { border: 0; border-radius: 0; min-height: 100vh; }
    .grana-login-intro { min-height: 238px; padding: 1.7rem 1.45rem; }
    .grana-login-intro h1 { font-size: 1.6rem; margin-top: 1.6rem; }
    .grana-login-form { padding: 2.25rem 1.45rem; }
    .portal-shell { padding: 1rem .65rem 2rem; }
    .portal-brand-copy small { max-width: 180px; }
    .portal-actions { align-items: stretch; gap: .65rem; }
    .portal-actions .btn { min-width: 0; width: auto; }
    .btn-portal { min-width: 145px; }
    .video-question-card { align-items: flex-start; flex-wrap: wrap; }
    .video-question-card .btn { margin-left: 34px !important; }
    .recording-dialog-content { padding: 1.4rem; }
    .video-answer-controls { align-items: stretch; }
    .video-answer-controls .btn { width: 100%; }
    .video-counter { margin-left: 0; text-align: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
/* Candidate profile */
.process-qr-card{overflow:hidden}.process-qr-preview{display:grid;place-items:center;min-height:180px;padding:1rem;border:1px dashed var(--grana-border);border-radius:18px;background:#fff}.process-qr-preview img{display:block;width:min(100%,190px);height:auto;image-rendering:auto}.process-qr-note{margin-top:.85rem;color:var(--grana-muted);font-size:.76rem;line-height:1.5;text-align:center}.process-qr-locked{display:flex;align-items:center;gap:.9rem;padding:1rem;border-radius:14px;background:#f6f5f3;color:var(--grana-muted);font-size:.85rem;line-height:1.45}.process-qr-locked i{font-size:1.5rem;color:var(--grana-primary)}
.candidate-detail-title{margin:0 0 1.35rem}
.candidate-profile-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.42rem;color:var(--grana-primary);font-size:.76rem;font-weight:700;text-decoration:none}.candidate-profile-link:hover{color:var(--grana-ink);text-decoration:underline}.candidate-profile-hero{display:flex;align-items:center;gap:1.25rem;padding:2rem;border:1px solid var(--grana-border);border-radius:var(--grana-radius-lg);background:linear-gradient(120deg,#fff 0%,#f7f6ff 100%);box-shadow:var(--grana-shadow-sm)}.candidate-profile-avatar{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;background:var(--grana-primary);color:#fff;font-size:1.55rem;font-weight:700}.candidate-profile-heading{min-width:0}.candidate-profile-heading h1{margin:0;color:var(--grana-ink);font-size:1.75rem;font-weight:700}.candidate-profile-heading p{margin:.25rem 0 .7rem;color:var(--grana-muted)}.candidate-profile-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-left:auto}.candidate-detail-title{display:flex;align-items:center;gap:.6rem;margin:0 0:1.35rem;color:var(--grana-ink);font-size:1.05rem;font-weight:700}.candidate-detail-title i{color:var(--grana-primary)}.candidate-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}.candidate-data-grid>div{display:flex;flex-direction:column;gap:.22rem}.candidate-data-grid span{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grana-muted)}.candidate-data-grid strong,.candidate-data-grid a{font-size:.93rem;color:var(--grana-ink);word-break:break-word}.candidate-data-grid a{color:var(--grana-primary);text-decoration:none}.candidate-data-wide{grid-column:1/-1}.candidate-answer-item{display:flex;gap:.9rem;padding:1rem 0;border-top:1px solid var(--grana-border)}.candidate-answer-item:first-of-type{padding-top:0;border-top:0}.candidate-answer-number{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--grana-primary);color:#fff;font-size:.78rem;font-weight:700}.candidate-answer-item h3{margin:0 0 .45rem;font-size:.94rem;font-weight:700;color:var(--grana-ink)}.candidate-answer-item p{margin:0;color:var(--grana-muted);font-size:.9rem;line-height:1.65}.candidate-state-card{background:linear-gradient(145deg,#fff 0%,#f5f3ff 100%)}.candidate-ai-score{display:flex;align-items:baseline;gap:.16rem;margin-bottom:1.3rem}.candidate-ai-score strong{color:var(--grana-primary);font-size:2.4rem;line-height:1}.candidate-ai-score span{color:var(--grana-muted);font-weight:600}.candidate-ai-block{margin-top:1rem}.candidate-ai-block h3{margin:0 0 .3rem;color:var(--grana-ink);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.candidate-ai-block p{margin:0;color:var(--grana-muted);font-size:.86rem;line-height:1.55}.candidate-privacy-note{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--grana-border);color:var(--grana-muted);font-size:.72rem;line-height:1.5}@media (max-width:767.98px){.candidate-profile-hero{align-items:flex-start;flex-wrap:wrap;padding:1.35rem}.candidate-profile-avatar{width:54px;height:54px;border-radius:18px}.candidate-profile-heading h1{font-size:1.35rem}.candidate-profile-actions{width:100%;margin-left:0}.candidate-profile-actions .btn{flex:1}.candidate-data-grid{grid-template-columns:1fr}}