/* ==========================================================
   BALCORP INTRANET — SUPERADMIN UI V2
   Diseño moderno, legible y responsive.
   Regla: 16px base. Nada de texto microscópico.
   ========================================================== */

:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #f8faff;
    --text: #172033;
    --muted: #69768a;
    --muted-2: #8a96a8;
    --border: #e2e8f1;
    --border-strong: #d4dce8;
    --primary: #4d64f4;
    --primary-dark: #374ad3;
    --primary-soft: #edf0ff;
    --navy: #111827;
    --navy-2: #182236;
    --green: #16a674;
    --green-soft: #eaf8f3;
    --red: #d24755;
    --red-soft: #fff0f2;
    --orange: #e88b31;
    --cyan: #17a6bd;
    --violet: #7656e6;
    --shadow-sm: 0 8px 24px rgba(31, 42, 68, .06);
    --shadow-md: 0 18px 48px rgba(31, 42, 68, .10);
    --shadow-lg: 0 28px 70px rgba(20, 30, 55, .16);
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 15px;
    --sidebar-width: 292px;
    --sidebar-collapsed: 92px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
    font-size: 16px;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

h1, h2, h3, p {
    margin-top: 0;
}

h1 {
    font-size: clamp(1.7rem, 2.2vw, 2.05rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    line-height: 1.2;
}

h3 {
    font-size: 1.22rem;
    line-height: 1.3;
}

.eyebrow {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: .07em;
    font-weight: 850;
    color: var(--primary);
}

.eyebrow-light {
    color: #aebcff;
}

.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 780;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

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

.btn svg {
    width: 19px;
    height: 19px;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #586ff5, #455add);
    box-shadow: 0 10px 26px rgba(77, 100, 244, .24);
}

.btn-primary:hover {
    box-shadow: 0 14px 30px rgba(77, 100, 244, .30);
}

.btn-white {
    color: #26334a;
    background: #fff;
    box-shadow: 0 12px 28px rgba(6, 13, 32, .15);
}

.btn-light {
    color: #2c3950;
    background: #fff;
    border-color: var(--border-strong);
}

.btn-soft {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: #dfe4ff;
}

.btn-danger {
    color: #fff;
    background: var(--red);
    box-shadow: 0 10px 24px rgba(210, 71, 85, .22);
}

.btn-with-icon {
    gap: 8px;
}

.alert {
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 700;
}

.alert-error {
    color: #992e3a;
    background: #fff1f3;
    border: 1px solid #f3cbd0;
}

.alert-success {
    color: #0e6f50;
    background: #ebfaf4;
    border: 1px solid #c7ebde;
}

.toast-inline {
    margin-bottom: 18px;
}

.status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: #1bc184;
    box-shadow: 0 0 0 5px rgba(27, 193, 132, .13);
}

.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #667cff, #4057dc);
    box-shadow: 0 14px 28px rgba(64, 87, 220, .28);
    font-size: 27px;
    font-weight: 900;
}

.brand-mark-small {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    font-size: 21px;
}

/* LOGIN */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 15%, rgba(82, 105, 242, .18), transparent 28%),
        radial-gradient(circle at 88% 80%, rgba(31, 176, 149, .12), transparent 28%),
        #eff3f9;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr);
}

.auth-brand {
    padding: clamp(48px, 7vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background:
        radial-gradient(circle at 20% 20%, rgba(92, 116, 255, .18), transparent 25%),
        linear-gradient(145deg, #101827, #17243a);
}

.auth-brand .eyebrow {
    margin-top: 30px;
    color: #9aabff;
}

.auth-brand h1 {
    max-width: 690px;
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4.2vw, 4rem);
    line-height: 1.06;
    letter-spacing: -.035em;
}

.auth-brand p {
    max-width: 630px;
    color: #b1bfd2;
    font-size: 18px;
}

.auth-feature-list {
    display: grid;
    gap: 15px;
    margin-top: 38px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #dce5f4;
    font-size: 16px;
}

.feature-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(111, 137, 255, .18);
}

.auth-panel {
    padding: 42px;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 520px);
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(214, 223, 235, .95);
    border-radius: 26px;
    background: rgba(255,255,255,.95);
    box-shadow: var(--shadow-lg);
}

.auth-card-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #46556d;
    background: #f4f7fb;
    font-size: 15px;
    font-weight: 760;
}

.auth-card h2 {
    margin-bottom: 8px;
    font-size: 31px;
}

.auth-subtitle {
    margin-bottom: 26px;
    color: var(--muted);
}

.auth-form {
    display: grid;
    gap: 11px;
}

.auth-form label,
.form-field label {
    color: #27344a;
    font-size: 16px;
    font-weight: 780;
}

.auth-form input,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #ced8e5;
    border-radius: 13px;
    outline: none;
    color: var(--text);
    background: #fff;
    transition: border .18s ease, box-shadow .18s ease;
}

.auth-form input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #7586f5;
    box-shadow: 0 0 0 4px rgba(77, 100, 244, .12);
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 84px;
}

.password-toggle {
    position: absolute;
    top: 7px;
    right: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.auth-form .btn {
    margin-top: 16px;
}

.auth-help {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 15px;
}

/* APP SHELL */

.dashboard-body {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    color: #dfe8f6;
    background:
        radial-gradient(circle at 20% 10%, rgba(73, 98, 218, .18), transparent 22%),
        linear-gradient(180deg, #111827 0%, #0c1421 100%);
    border-right: 1px solid rgba(255,255,255,.04);
    box-shadow: 16px 0 42px rgba(17, 24, 39, .08);
    transition: width .24s ease, transform .24s ease;
}

.sidebar-brand {
    min-height: 91px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.brand-link {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand-copy {
    min-width: 0;
    transition: opacity .15s ease, width .2s ease;
}

.brand-copy strong,
.brand-copy span {
    display: block;
    white-space: nowrap;
}

.brand-copy strong {
    color: #fff;
    font-size: 18px;
}

.brand-copy span {
    margin-top: 2px;
    color: #8b9ab0;
    font-size: 15px;
}

.sidebar-collapse-button,
.menu-button,
.icon-button,
.more-button,
.modal-close {
    border: 0;
    cursor: pointer;
}

.sidebar-collapse-button {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #9eabc0;
    background: rgba(255,255,255,.06);
    transition: .18s ease;
}

.sidebar-collapse-button:hover {
    color: #fff;
    background: rgba(255,255,255,.11);
}

.sidebar-collapse-button svg {
    width: 21px;
    height: 21px;
    transition: transform .2s ease;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 17px 13px;
}

.nav-section {
    padding: 18px 12px 8px;
    color: #6f8199;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .08em;
}

.nav-item {
    min-height: 52px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #b8c6d8;
    font-size: 16px;
    font-weight: 700;
    transition: .18s ease;
}

.nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,.065);
}

.nav-item.active {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(87, 110, 244, .96), rgba(61, 80, 205, .96));
    box-shadow: 0 12px 28px rgba(36, 55, 150, .30);
}

.nav-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

.nav-label {
    white-space: nowrap;
    transition: opacity .12s ease;
}

.nav-tag {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    color: #8999ae;
    background: rgba(255,255,255,.06);
    font-size: 14px;
    font-weight: 760;
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.sidebar-user {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px;
}

.sidebar-user-text {
    min-width: 0;
}

.sidebar-user-text strong,
.sidebar-user-text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-text strong {
    color: #fff;
    font-size: 15px;
}

.sidebar-user-text span {
    color: #8394ab;
    font-size: 15px;
}

.avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5b72f6, #4055d8);
    font-size: 16px;
    font-weight: 850;
    box-shadow: 0 8px 20px rgba(72, 92, 226, .22);
}

.avatar-small {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
    font-size: 15px;
}

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left .24s ease;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .app-main {
    margin-left: var(--sidebar-collapsed);
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-tag,
body.sidebar-collapsed .nav-section span,
body.sidebar-collapsed .sidebar-user-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar-brand {
    padding-left: 15px;
    padding-right: 15px;
    justify-content: center;
}

body.sidebar-collapsed .brand-link {
    flex: 0 0 auto;
}

body.sidebar-collapsed .sidebar-collapse-button {
    position: absolute;
    right: -15px;
    top: 28px;
    color: #415068;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

body.sidebar-collapsed .sidebar-collapse-button svg {
    transform: rotate(180deg);
}

body.sidebar-collapsed .nav-section {
    height: 12px;
    padding: 6px 0;
}

body.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

body.sidebar-collapsed .sidebar-footer {
    padding: 13px 18px;
}

body.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding: 4px 0;
}

/* TOPBAR */

.topbar {
    min-height: 91px;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 14px clamp(22px, 3.5vw, 46px);
    border-bottom: 1px solid rgba(225, 231, 239, .86);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
}

.topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-heading {
    min-width: 0;
}

.topbar-kicker {
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.topbar h1 {
    margin: 0;
    font-size: 27px;
    letter-spacing: -.02em;
}

.page-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.menu-button {
    width: 47px;
    height: 47px;
    display: none;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: #2e3b51;
    background: #fff;
}

.menu-button svg {
    width: 21px;
    height: 21px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.topbar-user-text strong,
.topbar-user-text span {
    display: block;
}

.topbar-user-text strong {
    font-size: 15px;
}

.topbar-user-text span {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 14px;
}

.icon-button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #536178;
    background: #fff;
    border: 1px solid var(--border);
    transition: .18s ease;
}

.icon-button:hover {
    color: var(--red);
    border-color: #f0cbd0;
    background: #fff6f7;
}

.icon-button svg {
    width: 21px;
    height: 21px;
}

.content {
    padding: clamp(24px, 3.5vw, 46px);
}

/* DASHBOARD HERO */

.hero-dashboard {
    min-height: 258px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    align-items: center;
    gap: 26px;
    margin-bottom: 24px;
    padding: clamp(30px, 4vw, 46px);
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 12%, rgba(110, 130, 255, .30), transparent 30%),
        radial-gradient(circle at 70% 100%, rgba(31, 187, 159, .15), transparent 28%),
        linear-gradient(135deg, #121b2d, #1c2a48);
    box-shadow: var(--shadow-md);
}

.hero-copy {
    position: relative;
    z-index: 3;
}

.hero-copy h2 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -.035em;
}

.hero-copy p {
    max-width: 710px;
    margin-bottom: 24px;
    color: #bac6d9;
    font-size: 17px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hero-actions .btn svg {
    width: 18px;
    height: 18px;
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #dbe4f2;
    font-size: 15px;
    font-weight: 730;
}

.hero-visual {
    min-height: 180px;
    position: relative;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.orb-one {
    width: 190px;
    height: 190px;
    right: 20px;
    top: -20px;
    background: radial-gradient(circle at 35% 35%, #647cff, #2f3e8f 66%, transparent 68%);
    opacity: .52;
}

.orb-two {
    width: 118px;
    height: 118px;
    left: 18%;
    bottom: -26px;
    background: radial-gradient(circle at 35% 35%, #23c2a0, #166b6a 66%, transparent 68%);
    opacity: .38;
}

.hero-mini-card {
    position: absolute;
    z-index: 3;
    min-width: 145px;
    padding: 17px 19px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    box-shadow: 0 20px 45px rgba(5, 12, 29, .18);
    backdrop-filter: blur(16px);
}

.hero-mini-card span,
.hero-mini-card strong {
    display: block;
}

.hero-mini-card span {
    color: #c8d3e5;
    font-size: 14px;
}

.hero-mini-card strong {
    margin-top: 3px;
    font-size: 31px;
}

.hero-mini-one {
    right: 34px;
    top: 22px;
}

.hero-mini-two {
    left: 38px;
    bottom: 12px;
}

/* STATS */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 24px;
}

.stat-card {
    min-height: 128px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    top: -35px;
    border-radius: 50%;
    background: currentColor;
    opacity: .035;
}

.stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--primary);
    background: var(--primary-soft);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.stat-content strong {
    display: block;
    font-size: 30px;
    line-height: 1.15;
}

.stat-blue .stat-icon { color: #4d64f4; background: #eef0ff; }
.stat-indigo .stat-icon { color: #405bd0; background: #edf1ff; }
.stat-violet .stat-icon { color: #7558e1; background: #f1edff; }
.stat-green .stat-icon { color: #0f9c6a; background: #e9f8f2; }
.stat-orange .stat-icon { color: #dc7d20; background: #fff3e7; }
.stat-cyan .stat-icon { color: #148da4; background: #e9f8fb; }

/* PANELS */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr);
    gap: 20px;
}

.panel-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.panel-card-spacious {
    padding: 27px;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 21px;
}

.panel-head h3 {
    margin-bottom: 4px;
    font-size: 21px;
}

.panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.flow-card {
    min-height: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fbfcff;
    transition: transform .18s ease, box-shadow .18s ease, border .18s ease;
}

.flow-card-active {
    cursor: pointer;
    border-color: #d6ddff;
    background: linear-gradient(145deg, #f9faff, #f0f3ff);
}

.flow-card-active:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(62, 82, 191, .12);
}

.flow-step {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #9aa6ba;
    font-size: 15px;
    font-weight: 850;
}

.flow-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

.flow-icon svg {
    width: 21px;
    height: 21px;
}

.flow-card strong {
    margin-bottom: 5px;
    font-size: 16px;
}

.flow-card span {
    color: var(--muted);
    font-size: 15px;
}

.flow-card em {
    margin-top: auto;
    padding-top: 13px;
    color: #8793a6;
    font-size: 14px;
    font-style: normal;
    font-weight: 720;
}

.flow-card-active em {
    color: var(--primary);
}

.activity-list {
    display: grid;
    gap: 3px;
}

.activity-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid #eef1f5;
}

.activity-item:last-child {
    border-bottom: 0;
}

.activity-dot {
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(77,100,244,.09);
}

.activity-item strong,
.activity-item span,
.activity-item small {
    display: block;
}

.activity-item strong { font-size: 15px; }
.activity-item span { margin-top: 2px; color: var(--muted); font-size: 15px; }
.activity-item small { margin-top: 4px; color: var(--muted-2); font-size: 14px; }

.empty-state {
    padding: 28px 18px;
    border: 1px dashed #d6deea;
    border-radius: 16px;
    text-align: center;
    background: #fbfcfe;
}

.empty-state strong,
.empty-state span {
    display: block;
}

.empty-state span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
}

/* EMPRESAS */

.module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 27px 29px;
    border: 1px solid #dfe5ef;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 10%, rgba(82,104,241,.09), transparent 28%),
        #fff;
    box-shadow: var(--shadow-sm);
}

.module-hero h2 {
    margin-bottom: 6px;
    font-size: 28px;
}

.module-hero p {
    max-width: 740px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.mini-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.mini-stat-card {
    padding: 19px 21px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.mini-stat-label,
.mini-stat-meta {
    display: block;
}

.mini-stat-label {
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.mini-stat-card strong {
    display: block;
    margin: 3px 0 2px;
    font-size: 28px;
}

.mini-stat-meta {
    color: var(--muted-2);
    font-size: 14px;
}

.mini-stat-meta.positive {
    color: var(--green);
}

.data-panel {
    padding: 0;
    overflow: visible;
}

.data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 24px;
    border-bottom: 1px solid var(--border);
}

.data-toolbar h3 {
    margin: 0;
    font-size: 21px;
}

.search-box {
    width: min(100%, 390px);
    min-height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    background: #fff;
}

.search-box svg {
    width: 20px;
    height: 20px;
    margin-left: 14px;
    color: #8995a8;
}

.search-box input {
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 10px;
    border: 0;
    outline: none;
    color: var(--text);
    background: transparent;
}

.search-clear {
    position: absolute;
    right: 12px;
    top: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    background: #f0f3f7;
    font-size: 20px;
}

.empty-company-state {
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-company-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 23px;
    color: var(--primary);
    background: linear-gradient(145deg, #eef1ff, #e7ebff);
}

.empty-company-icon svg {
    width: 34px;
    height: 34px;
}

.empty-company-state h3 {
    margin-bottom: 7px;
    font-size: 23px;
}

.empty-company-state p {
    max-width: 560px;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 16px;
}

.company-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    padding: 22px;
}

.company-card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(33, 46, 75, .04);
    transition: transform .18s ease, box-shadow .18s ease, border .18s ease;
}

.company-card:hover {
    transform: translateY(-2px);
    border-color: #d8def0;
    box-shadow: 0 14px 32px rgba(33, 46, 75, .08);
}

.company-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 0;
}

.company-avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #6378f6, #465bd8);
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 9px 20px rgba(68, 87, 211, .20);
}

.company-status-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 780;
}

.status-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active {
    color: #0b7a55;
    background: var(--green-soft);
}

.status-active > span {
    background: #17b67d;
}

.status-inactive {
    color: #7c8798;
    background: #f0f3f7;
}

.status-inactive > span {
    background: #96a1b2;
}

.more-button {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #6f7d91;
    background: #f7f9fc;
}

.more-button svg {
    width: 19px;
    height: 19px;
}

.context-menu {
    display: none;
    position: absolute;
    z-index: 20;
    top: 45px;
    right: 0;
    min-width: 178px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.context-menu.is-open {
    display: block;
}

.context-menu button {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    color: #344158;
    background: transparent;
    text-align: left;
    font-size: 15px;
    font-weight: 680;
    cursor: pointer;
}

.context-menu button:hover {
    background: #f5f7fb;
}

.context-menu .danger-text {
    color: var(--red);
}

.company-card-body {
    padding: 17px 18px 15px;
}

.company-kicker {
    display: block;
    margin-bottom: 5px;
    color: #9aa5b5;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .08em;
}

.company-card-body h3 {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.3;
}

.company-card-body p {
    min-height: 23px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.muted-placeholder {
    color: #a1aaba !important;
}

.company-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
    background: #fbfcfe;
}

.company-card-meta span,
.company-card-meta strong {
    display: block;
}

.company-card-meta span {
    margin-bottom: 2px;
    color: #8a96a8;
    font-size: 13px;
}

.company-card-meta strong {
    overflow-wrap: anywhere;
    font-size: 15px;
}

.company-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 17px;
}

.company-card-footer .btn {
    min-height: 41px;
    padding: 0 13px;
    font-size: 15px;
}

.company-id {
    color: #9aa5b5;
    font-size: 13px;
    font-weight: 700;
}

/* MODALS */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 18, 31, .55);
    backdrop-filter: blur(7px);
}

.modal-backdrop.is-open {
    display: flex;
    animation: modalFade .16s ease both;
}

.modal-card {
    width: min(100%, 650px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 27px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(8, 15, 29, .24);
    animation: modalRise .18s ease both;
}

.modal-card-small {
    width: min(100%, 500px);
}

@keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalRise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.modal-head h2 {
    margin-bottom: 5px;
    font-size: 25px;
}

.modal-head p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.modal-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .08em;
}

.modal-close {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #69768a;
    background: #f3f5f8;
    font-size: 25px;
    line-height: 1;
}

.modal-form {
    display: grid;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label span {
    color: var(--red);
}

.switch-row {
    min-height: 75px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fafbfd;
    cursor: pointer;
}

.switch-row > span:first-child {
    min-width: 0;
    flex: 1;
}

.switch-row strong,
.switch-row small {
    display: block;
}

.switch-row strong {
    font-size: 15px;
}

.switch-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 14px;
}

.switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-ui {
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
    position: relative;
    border-radius: 999px;
    background: #cbd3df;
    transition: .18s ease;
}

.switch-ui::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
    transition: .18s ease;
}

.switch-row input:checked + .switch-ui {
    background: var(--primary);
}

.switch-row input:checked + .switch-ui::after {
    transform: translateX(20px);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 3px;
}

.danger-modal-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 20px;
    color: var(--red);
    background: var(--red-soft);
}

.danger-modal-icon svg {
    width: 31px;
    height: 31px;
}

.modal-head-centered {
    justify-content: center;
    text-align: center;
}

.danger-eyebrow {
    color: var(--red);
}

.delete-company-name {
    margin: 0 0 22px;
    padding: 13px 15px;
    border: 1px solid #f0d8dc;
    border-radius: 13px;
    color: #6f2f38;
    background: #fff8f9;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

/* OTHER */

.simple-placeholder {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #eef3f8;
}

.placeholder-card {
    width: min(100%, 620px);
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.sidebar-overlay {
    display: none;
}

/* RESPONSIVE */

@media (max-width: 1260px) {
    .company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-dashboard {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        display: none;
    }

    .topbar-user-text {
        display: none;
    }
}

@media (max-width: 900px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }

    body.sidebar-collapsed .app-main {
        margin-left: 0;
    }

    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .nav-tag,
    body.sidebar-collapsed .nav-section span,
    body.sidebar-collapsed .sidebar-user-text {
        width: auto;
        opacity: 1;
    }

    body.sidebar-collapsed .sidebar-brand {
        padding: 18px 16px 18px 20px;
        justify-content: initial;
    }

    body.sidebar-collapsed .sidebar-collapse-button {
        position: static;
        color: #9eabc0;
        background: rgba(255,255,255,.06);
        border: 0;
        box-shadow: none;
    }

    .sidebar {
        transform: translateX(-102%);
    }

    .sidebar-open .sidebar {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .menu-button {
        display: grid;
    }

    .sidebar-collapse-button {
        display: none;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(8, 14, 26, .48);
    }

    .sidebar-open .sidebar-overlay {
        display: block;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        min-height: auto;
        padding: 40px 28px;
    }

    .auth-feature-list {
        display: none;
    }

    .auth-panel {
        padding: 28px 18px 42px;
    }

    .module-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-create-button {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .topbar {
        min-height: 82px;
        padding: 11px 15px;
    }

    .page-heading p,
    .topbar-actions > .btn,
    .topbar-user {
        display: none;
    }

    .topbar h1 {
        font-size: 23px;
    }

    .content {
        padding: 18px 14px 28px;
    }

    .hero-dashboard {
        min-height: auto;
        padding: 25px 22px;
        border-radius: 22px;
    }

    .hero-copy h2 {
        font-size: 29px;
    }

    .hero-copy p {
        font-size: 16px;
    }

    .stats-grid,
    .mini-stats-grid,
    .company-grid,
    .flow-grid {
        grid-template-columns: 1fr;
    }

    .company-grid {
        padding: 16px;
    }

    .data-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field-full {
        grid-column: auto;
    }

    .modal-backdrop {
        padding: 13px;
        align-items: flex-end;
    }

    .modal-card {
        width: 100%;
        max-height: 92vh;
        padding: 22px 18px;
        border-radius: 23px 23px 16px 16px;
    }

    .modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .auth-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .auth-brand h1 {
        font-size: 2rem;
    }

    .module-hero {
        padding: 22px 20px;
    }

    .company-card-meta {
        grid-template-columns: 1fr;
    }
}


/* ================= ÁREAS Y CARGOS ================= */
.mini-stat-text {
    font-size: 22px !important;
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.area-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(34, 46, 77, .045);
    transition: transform .18s ease, box-shadow .18s ease, border .18s ease;
}

.area-card:hover {
    transform: translateY(-2px);
    border-color: #d7deef;
    box-shadow: 0 16px 34px rgba(34, 46, 77, .08);
}

.area-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 19px 20px 0;
}

.area-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #4d64f4;
    background: linear-gradient(145deg, #eef1ff, #e7ebff);
}

.area-icon svg {
    width: 24px;
    height: 24px;
}

.area-card-copy {
    padding: 16px 20px 17px;
}

.area-card-copy h3 {
    margin-bottom: 6px;
    font-size: 20px;
}

.area-card-copy p {
    min-height: 46px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 15px;
}

.area-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    background: #fbfcff;
}

.area-summary > div {
    padding: 13px 20px;
}

.area-summary > div + div {
    border-left: 1px solid #eef1f5;
}

.area-summary strong,
.area-summary span {
    display: block;
}

.area-summary strong {
    font-size: 20px;
}

.area-summary span {
    margin-top: 1px;
    color: var(--muted);
    font-size: 14px;
}

.cargo-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 15px;
}

.cargo-empty {
    padding: 18px 10px;
    color: #8b97a9;
    text-align: center;
    font-size: 15px;
}

.cargo-row {
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 7px;
    border-bottom: 1px solid #eef1f5;
}

.cargo-row:last-child {
    border-bottom: 0;
}

.cargo-row-inactive {
    opacity: .58;
}

.cargo-row-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cargo-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: #667af3;
    box-shadow: 0 0 0 4px rgba(102, 122, 243, .09);
}

.cargo-row strong,
.cargo-row small {
    display: block;
}

.cargo-row strong {
    overflow-wrap: anywhere;
    font-size: 15px;
}

.cargo-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
}

.cargo-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cargo-actions form,
.area-footer-actions form {
    margin: 0;
}

.icon-mini-button {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #667388;
    background: #f5f7fa;
    cursor: pointer;
    transition: .16s ease;
}

.icon-mini-button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.icon-mini-button svg {
    width: 17px;
    height: 17px;
}

.icon-mini-button.danger-mini:hover {
    color: var(--red);
    background: var(--red-soft);
}

.area-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px 18px;
    border-top: 1px solid #eef1f5;
}

.area-card-footer .btn {
    min-height: 42px;
    padding: 0 13px;
    font-size: 15px;
}

.area-footer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
}

.icon-text-button {
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    color: #647187;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 720;
}

.icon-text-button:hover {
    color: var(--primary);
    background: #f4f6fb;
}

.icon-text-button.danger-text {
    color: var(--red);
}

.form-field textarea {
    min-height: 92px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

@media (max-width: 1260px) {
    .area-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .area-grid {
        padding: 15px;
    }

    .area-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .area-card-footer .btn {
        width: 100%;
    }

    .area-footer-actions {
        justify-content: flex-start;
    }

    .cargo-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cargo-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ==========================================================
   V4 — PERSONAL / POSTULANTES
   ========================================================== */

.four-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.setup-warning {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 17px 18px;
    border: 1px solid #f0dfba;
    border-radius: 17px;
    background: #fffaf0;
    box-shadow: var(--shadow-sm);
}

.setup-warning-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #9a6509;
    background: #ffefc9;
    font-size: 20px;
    font-weight: 900;
}

.setup-warning > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.setup-warning strong,
.setup-warning p {
    display: block;
}

.setup-warning strong {
    font-size: 16px;
}

.setup-warning p {
    margin: 2px 0 0;
    color: #7c6a48;
    font-size: 15px;
}

.setup-warning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.personal-toolbar {
    align-items: flex-end;
}

.personal-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.segmented-control {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #f7f9fc;
}

.segmented-control a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 9px;
    color: #6d798c;
    font-size: 14px;
    font-weight: 760;
}

.segmented-control a.active {
    color: #26344d;
    background: #fff;
    box-shadow: 0 5px 13px rgba(35, 47, 74, .08);
}

.people-list {
    display: grid;
}

.person-row {
    min-height: 105px;
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(220px, .9fr) minmax(190px, .7fr) 54px;
    align-items: center;
    gap: 18px;
    padding: 17px 22px;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
}

.person-row:last-child {
    border-bottom: 0;
}

.person-row:hover {
    background: #fbfcff;
}

.person-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.person-photo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid #e5eaf2;
    background: #eef1f8;
}

.person-photo-placeholder {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #6579f6, #495ed9);
    font-size: 17px;
    font-weight: 900;
}

.person-identity {
    min-width: 0;
}

.person-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.person-name-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.person-document {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
}

.person-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 790;
}

.person-type-pill.worker {
    color: #0b7c57;
    background: #e9f8f2;
}

.person-type-pill.applicant {
    color: #6c4ccf;
    background: #f1edff;
}

.person-assignment,
.person-access {
    min-width: 0;
}

.person-assignment span,
.person-assignment strong,
.person-assignment small,
.person-access span,
.person-access strong,
.person-access small {
    display: block;
}

.person-assignment > span,
.person-access > span {
    margin-bottom: 2px;
    color: #8995a7;
    font-size: 13px;
    font-weight: 700;
}

.person-assignment strong,
.person-access strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.person-assignment small,
.person-access small {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 13px;
}

.access-on {
    color: var(--green);
}

.access-off {
    color: var(--red);
}

.person-actions {
    position: relative;
    justify-self: end;
}

.context-muted {
    color: #9ba5b5 !important;
    cursor: default !important;
}

.context-muted:hover {
    background: transparent !important;
}

.modal-card-wide {
    width: min(100%, 810px);
}

.person-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.person-type-option {
    position: relative;
    cursor: pointer;
}

.person-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.person-type-card {
    min-height: 83px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: #fff;
    transition: .18s ease;
}

.person-type-option input:checked + .person-type-card {
    border-color: #8391f8;
    background: #f4f5ff;
    box-shadow: 0 0 0 3px rgba(77, 100, 244, .08);
}

.person-type-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #4c68ef, #3f53ce);
    font-weight: 900;
}

.person-type-icon.applicant {
    background: linear-gradient(135deg, #876ce7, #674cce);
}

.person-type-card strong,
.person-type-card small {
    display: block;
}

.person-type-card strong {
    font-size: 16px;
}

.person-type-card small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 14px;
}

.form-section-title {
    margin-top: 2px;
    padding-bottom: 9px;
    border-bottom: 1px solid #edf1f5;
}

.form-section-title strong,
.form-section-title span {
    display: block;
}

.form-section-title strong {
    font-size: 16px;
}

.form-section-title span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 14px;
}

.form-field select {
    appearance: auto;
}

.form-field input[type="file"] {
    padding: 12px;
    line-height: 1.3;
}

.field-help {
    color: var(--muted);
    font-size: 13px;
}

.credential-preview {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid #cae7dc;
    border-radius: 15px;
    background: #f2fbf7;
}

.credential-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--green);
    font-weight: 900;
}

.credential-preview strong,
.credential-preview span {
    display: block;
}

.credential-preview strong {
    color: #166b50;
    font-size: 15px;
}

.credential-preview span {
    margin-top: 2px;
    color: #557267;
    font-size: 14px;
}

.personal-empty-icon {
    color: #5268ef;
}

@media (max-width: 1260px) {
    .four-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .person-row {
        grid-template-columns: minmax(300px, 1.4fr) minmax(210px, .9fr) 54px;
    }

    .person-access {
        display: none;
    }

    .personal-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .personal-toolbar-controls {
        justify-content: space-between;
    }
}

@media (max-width: 900px) {
    .person-row {
        grid-template-columns: 1fr 54px;
    }

    .person-assignment {
        grid-column: 1 / -1;
        padding-left: 70px;
    }

    .person-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .setup-warning {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .setup-warning .btn,
    .setup-warning-actions {
        margin-left: 58px;
    }
}

@media (max-width: 720px) {
    .four-stats {
        grid-template-columns: 1fr;
    }

    .personal-toolbar-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .segmented-control {
        width: 100%;
        overflow-x: auto;
    }

    .segmented-control a {
        flex: 1 0 auto;
        justify-content: center;
    }

    .person-row {
        padding: 16px;
    }

    .person-assignment {
        padding-left: 0;
    }

    .person-type-selector {
        grid-template-columns: 1fr;
    }

    .setup-warning .btn,
    .setup-warning-actions {
        width: 100%;
        margin-left: 0;
    }

    .setup-warning-actions .btn {
        width: auto;
    }
}


/* ==========================================================
   V5 — ADMINISTRADORES, ASISTENCIA Y PANEL ADMIN
   ========================================================== */

.role-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.role-explainer-card {
    position: relative;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.role-explainer-card > span {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #a1aaba;
    font-size: 14px;
    font-weight: 900;
}

.role-explainer-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
}

.role-explainer-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.role-explainer-card.super { border-top: 4px solid #4d64f4; }
.role-explainer-card.admin { border-top: 4px solid #16a674; }
.role-explainer-card.collaborator { border-top: 4px solid #7656e6; }

.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    padding: 22px;
}

.admin-card {
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-card-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-card-identity {
    min-width: 0;
    flex: 1;
}

.admin-card-identity strong,
.admin-card-identity span,
.admin-card-identity small {
    display: block;
}

.admin-card-identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.admin-card-identity span {
    color: var(--muted);
    font-size: 14px;
}

.admin-card-identity small {
    margin-top: 2px;
    color: #8c97a8;
    font-size: 13px;
}

.admin-company-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 17px 0;
    padding: 14px 0;
    border-top: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
}

.admin-company-label {
    width: 100%;
    margin-bottom: 2px;
    color: #8c97a8;
    font-size: 13px;
    font-weight: 750;
}

.admin-company-chip {
    padding: 6px 9px;
    border-radius: 999px;
    color: #4256c2;
    background: #eef1ff;
    font-size: 13px;
    font-weight: 750;
}

.admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-card-actions form {
    margin: 0;
}

.admin-card-actions .btn {
    min-height: 41px;
    padding: 0 13px;
    font-size: 14px;
}

.btn-danger-ghost {
    color: var(--red);
    background: #fff7f8;
    border-color: #f2d4d8;
}

.company-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.company-check {
    position: relative;
    cursor: pointer;
}

.company-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.company-check > span {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: #fff;
    transition: .18s ease;
}

.company-check input:checked + span {
    border-color: #7d8df5;
    background: #f3f5ff;
    box-shadow: 0 0 0 3px rgba(77, 100, 244, .08);
}

.company-check strong,
.company-check small {
    display: block;
}

.company-check strong {
    font-size: 15px;
}

.company-check small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.attendance-filters {
    display: flex;
    align-items: center;
    gap: 9px;
}

.attendance-filters select,
.attendance-filters input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: #fff;
}

.attendance-list {
    display: grid;
}

.attendance-row {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 1fr) minmax(170px, .7fr) 130px;
    align-items: center;
    gap: 18px;
    padding: 15px 22px;
    border-bottom: 1px solid #edf1f5;
}

.attendance-row:last-child {
    border-bottom: 0;
}

.attendance-row > div strong,
.attendance-row > div span {
    display: block;
}

.attendance-row > div > span:not(.attendance-status) {
    color: var(--muted);
    font-size: 13px;
}

.attendance-row > div > strong {
    margin-top: 2px;
    font-size: 15px;
}

.attendance-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.status-presente { color: #087653; background: #e9f8f2; }
.status-falta { color: #a42d3a; background: #fff0f2; }
.status-tardanza { color: #9b6100; background: #fff5df; }
.status-permiso,
.status-justificado { color: #4258b9; background: #edf1ff; }
.status-descanso,
.status-vacaciones { color: #6b4bb7; background: #f2edff; }

.form-field textarea {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}

/* Panel Administrador */
.admin-company-select-body,
.admin-dashboard-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 8%, rgba(82,104,241,.10), transparent 25%),
        #f3f6fb;
}

.admin-company-select-shell {
    width: min(100% - 32px, 920px);
    margin: 0 auto;
    padding: 70px 0;
}

.admin-company-select-head {
    max-width: 680px;
    margin-bottom: 30px;
}

.admin-company-select-head .brand-mark {
    margin-bottom: 24px;
}

.admin-company-select-head h1 {
    margin-bottom: 8px;
    font-size: 34px;
}

.admin-company-select-head p {
    color: var(--muted);
    font-size: 17px;
}

.admin-company-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.admin-company-choice button {
    width: 100%;
    min-height: 105px;
    display: grid;
    grid-template-columns: 54px 1fr 26px;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: .18s ease;
}

.admin-company-choice button:hover {
    transform: translateY(-2px);
    border-color: #cfd6ff;
    box-shadow: var(--shadow-md);
}

.admin-company-choice-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #6076f5, #465bd8);
    font-size: 20px;
    font-weight: 900;
}

.admin-company-choice strong,
.admin-company-choice small {
    display: block;
}

.admin-company-choice strong {
    font-size: 16px;
}

.admin-company-choice small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
}

.admin-company-choice svg {
    width: 22px;
    height: 22px;
    fill: #8591a4;
}

.admin-dashboard-shell {
    min-height: 100vh;
}

.admin-dashboard-topbar {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px clamp(20px, 4vw, 46px);
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
}

.admin-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-brand-row span,
.admin-brand-row strong {
    display: block;
}

.admin-brand-row span {
    color: var(--muted);
    font-size: 13px;
}

.admin-brand-row strong {
    font-size: 17px;
}

.admin-top-actions {
    display: flex;
    gap: 9px;
}

.admin-dashboard-content {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 34px 0 50px;
}

.admin-welcome {
    margin-bottom: 20px;
    padding: 32px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(104,126,255,.28), transparent 30%),
        linear-gradient(135deg, #131c2e, #1d2a48);
    box-shadow: var(--shadow-md);
}

.admin-welcome h1 {
    margin-bottom: 8px;
    font-size: 34px;
}

.admin-welcome p {
    max-width: 760px;
    margin: 0;
    color: #bdc9dc;
    font-size: 16px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.admin-stats-grid article {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-stats-grid span,
.admin-stats-grid strong {
    display: block;
}

.admin-stats-grid span {
    color: var(--muted);
    font-size: 14px;
}

.admin-stats-grid strong {
    margin-top: 3px;
    font-size: 29px;
}

.admin-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.admin-module-card {
    min-height: 190px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-module-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 13px;
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 900;
}

.admin-module-card strong,
.admin-module-card p,
.admin-module-card span {
    display: block;
}

.admin-module-card strong {
    font-size: 16px;
}

.admin-module-card p {
    min-height: 64px;
    margin: 5px 0 12px;
    color: var(--muted);
    font-size: 14px;
}

.admin-module-card > span {
    color: var(--primary);
    font-size: 13px;
    font-weight: 750;
}

.admin-personal-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #cfe7dd;
    border-radius: 17px;
    background: #f5fbf8;
}

.admin-personal-link strong,
.admin-personal-link > div > span {
    display: block;
}

.admin-personal-link > div > span {
    margin-top: 2px;
    color: #60766d;
    font-size: 14px;
}

@media (max-width: 1050px) {
    .admin-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-row {
        grid-template-columns: 1fr 1fr;
    }

    .admin-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .role-explainer-grid,
    .admin-company-select-grid,
    .admin-stats-grid,
    .company-check-grid {
        grid-template-columns: 1fr;
    }

    .attendance-toolbar,
    .attendance-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-row {
        grid-template-columns: 1fr;
    }

    .admin-module-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-top-actions {
        width: 100%;
    }

    .admin-top-actions .btn {
        flex: 1;
    }

    .admin-personal-link {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* V5.1 hotfix: requisitos previos del registro de colaboradores */
.missing-requirements{
    display:grid;
    gap:10px;
    margin-top:14px;
}
.missing-requirement{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border:1px solid #f0d3d6;
    border-radius:14px;
    background:#fff8f9;
}
.missing-requirement.is-ready{
    border-color:#cde8dd;
    background:#f5fbf8;
}
.missing-requirement strong{
    min-width:150px;
    font-size:15px;
}
.missing-requirement span{
    flex:1;
    color:#6e798a;
    font-size:14px;
}
@media (max-width:720px){
    .missing-requirement{
        align-items:flex-start;
        flex-direction:column;
    }
    .missing-requirement strong{min-width:0}
}


/* ==========================================================
   V5.2 — KIOSCO DE ASISTENCIA / TABLET
   ========================================================== */

.attendance-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.attendance-kiosk-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(93, 112, 241, .13), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(22, 166, 116, .10), transparent 25%),
        #f1f4f9;
}

.attendance-kiosk-shell {
    width: min(100% - 32px, 1080px);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 22px 0 18px;
}

.attendance-kiosk-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.attendance-kiosk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendance-kiosk-brand span,
.attendance-kiosk-brand strong {
    display: block;
}

.attendance-kiosk-brand span {
    color: #778397;
    font-size: 14px;
}

.attendance-kiosk-brand strong {
    font-size: 18px;
}

.attendance-kiosk-clock {
    min-width: 112px;
    padding: 12px 16px;
    border: 1px solid #dbe1ea;
    border-radius: 16px;
    background: rgba(255,255,255,.84);
    text-align: center;
    font-size: 28px;
    font-weight: 850;
    box-shadow: 0 10px 30px rgba(31, 43, 72, .07);
}

.kiosk-main-card,
.kiosk-success-card,
.kiosk-message-card {
    width: min(100%, 840px);
    margin: auto;
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid #dfe5ee;
    border-radius: 28px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 26px 70px rgba(31, 43, 72, .12);
}

.kiosk-title {
    margin-bottom: 28px;
    text-align: center;
}

.kiosk-title h1 {
    margin: 6px 0 8px;
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -1.5px;
}

.kiosk-title p {
    margin: 0 auto;
    max-width: 650px;
    color: #748096;
    font-size: clamp(16px, 2vw, 19px);
}

.kiosk-dni-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 12px;
}

.kiosk-dni-form input {
    min-height: 74px;
    padding: 0 22px;
    border: 2px solid #cfd7e6;
    border-radius: 18px;
    background: #fff;
    outline: 0;
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: 2px;
}

.kiosk-dni-form input:focus {
    border-color: #6074f2;
    box-shadow: 0 0 0 5px rgba(96,116,242,.11);
}

.kiosk-dni-form button {
    min-height: 74px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #5269ef, #4055d2);
    font-size: 17px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(82,105,239,.25);
}

.kiosk-sequence {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
}

.kiosk-sequence span {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    color: #677287;
    background: #f6f8fb;
    font-size: 14px;
    font-weight: 700;
}

.kiosk-sequence b {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #4257cf;
    background: #e9edff;
}

.kiosk-future-face {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px dashed #d7ddea;
    border-radius: 15px;
    background: #fbfcfe;
}

.kiosk-face-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #5c6dde;
    background: #eef1ff;
    font-size: 24px;
    font-weight: 900;
}

.kiosk-future-face > div {
    min-width: 0;
    flex: 1;
}

.kiosk-future-face strong,
.kiosk-future-face small {
    display: block;
}

.kiosk-future-face strong {
    font-size: 15px;
}

.kiosk-future-face small {
    margin-top: 2px;
    color: #7d889a;
    font-size: 13px;
}

.kiosk-alert {
    margin-bottom: 14px;
    padding: 13px 15px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 750;
}

.kiosk-alert.error {
    color: #9b2c39;
    border: 1px solid #f0cbd0;
    background: #fff3f5;
}

.kiosk-success-card {
    text-align: center;
}

.kiosk-person-photo {
    width: 118px;
    height: 118px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 32px;
    object-fit: cover;
    background: #eef1f7;
    box-shadow: 0 14px 34px rgba(31,43,72,.13);
}

.kiosk-photo-placeholder {
    color: #fff;
    background: linear-gradient(135deg, #6076f5, #465bd8);
    font-size: 34px;
    font-weight: 900;
}

.kiosk-success-check {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    color: #fff;
    background: #15a472;
    font-size: 29px;
    font-weight: 900;
}

.kiosk-success-card h1 {
    margin: 0;
    color: #153c31;
    font-size: clamp(26px, 4vw, 38px);
}

.kiosk-success-time {
    margin: 4px 0 16px;
    color: #15a472;
    font-size: clamp(38px, 7vw, 62px);
    font-weight: 900;
    letter-spacing: -2px;
}

.kiosk-person-name {
    display: block;
    font-size: 21px;
}

.kiosk-person-meta {
    display: block;
    margin-top: 3px;
    color: #7c8799;
    font-size: 15px;
}

.kiosk-timeline {
    max-width: 620px;
    margin: 24px auto 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kiosk-timeline-item {
    min-height: 84px;
    padding: 10px;
    border: 1px solid #d9e9e2;
    border-radius: 14px;
    background: #f4fbf8;
}

.kiosk-timeline-item > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin: 0 auto 7px;
    border-radius: 8px;
    color: #0c7b57;
    background: #dff5ec;
    font-size: 12px;
    font-weight: 900;
}

.kiosk-timeline-item strong,
.kiosk-timeline-item small {
    display: block;
}

.kiosk-timeline-item strong {
    font-size: 12px;
}

.kiosk-timeline-item small {
    margin-top: 2px;
    color: #0d8a61;
    font-size: 15px;
    font-weight: 800;
}

.kiosk-next-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 0 20px;
    border-radius: 13px;
    color: #fff;
    background: #5269ef;
    font-weight: 800;
}

.attendance-kiosk-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 0 6px;
    color: #8490a2;
    font-size: 13px;
}

.recent-mark-list {
    display: grid;
}

.recent-mark-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) 180px 90px 80px;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 12px 20px;
    border-bottom: 1px solid #edf1f5;
}

.recent-mark-row:last-child {
    border-bottom: 0;
}

.recent-mark-row > div strong,
.recent-mark-row > div span {
    display: block;
}

.recent-mark-row > div span {
    color: #7e899a;
    font-size: 13px;
}

.recent-mark-type {
    color: #4557bd;
    font-size: 14px;
    font-weight: 800;
}

.recent-mark-row > small {
    color: #8994a5;
    font-weight: 800;
}

.compact-empty {
    padding: 34px 20px;
}

@media (max-width: 760px) {
    .attendance-kiosk-shell {
        width: min(100% - 20px, 1080px);
        padding-top: 10px;
    }

    .attendance-kiosk-header {
        min-height: 58px;
    }

    .attendance-kiosk-clock {
        min-width: 90px;
        font-size: 23px;
    }

    .kiosk-main-card,
    .kiosk-success-card {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .kiosk-dni-form {
        grid-template-columns: 1fr;
    }

    .kiosk-sequence,
    .kiosk-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiosk-future-face {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .attendance-kiosk-footer {
        flex-direction: column;
    }

    .recent-mark-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 460px) {
    .attendance-kiosk-brand .brand-mark {
        display: none;
    }

    .kiosk-sequence {
        grid-template-columns: 1fr;
    }

    .kiosk-dni-form input {
        min-height: 66px;
    }

    .kiosk-dni-form button {
        min-height: 62px;
    }
}


/* ==========================================================
   V5.3 — FOOTER SASOTECH
   ========================================================== */
.system-footer {
    width: 100%;
    margin-top: auto;
    padding: 18px 24px 22px;
}

.system-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    border-top: 1px solid #e5e9f0;
    color: #7b8798;
    font-size: 14px;
    text-align: center;
}

.system-footer-inner strong {
    color: #34445d;
    font-weight: 850;
}

.system-footer-inner a {
    color: #5267da;
    font-weight: 750;
    text-decoration: none;
}

.system-footer-inner a:hover {
    text-decoration: underline;
}

.system-footer-separator {
    color: #c0c7d1;
}

.dashboard-body .app-main,
.admin-dashboard-shell,
.admin-company-select-body,
.simple-placeholder,
.auth-body {
    min-height: 100vh;
}

.dashboard-body .app-main {
    display: flex;
    flex-direction: column;
}

.dashboard-body .content {
    flex: 1 0 auto;
}

.admin-dashboard-shell {
    display: flex;
    flex-direction: column;
}

.admin-dashboard-content {
    flex: 1 0 auto;
}

@media (max-width: 640px) {
    .system-footer {
        padding: 14px 12px 18px;
    }

    .system-footer-inner {
        gap: 5px 8px;
        font-size: 13px;
    }

    .system-footer-separator {
        display: none;
    }

    .system-footer-inner span,
    .system-footer-inner a {
        width: 100%;
    }
}


/* ==========================================================
   V5.4 — FICHA DE PERSONAL Y ACCESOS
   ========================================================== */

.person-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.person-edit-quick {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    color: #4d5fc9;
    background: #f6f8ff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.person-edit-quick:hover {
    border-color: #cbd4ff;
    background: #eef1ff;
}

.profile-edit-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-edit-summary > div {
    padding: 12px 14px;
    border: 1px solid #e6eaf1;
    border-radius: 13px;
    background: #f8fafc;
}

.profile-edit-summary span,
.profile-edit-summary strong {
    display: block;
}

.profile-edit-summary span {
    margin-bottom: 2px;
    color: #8994a5;
    font-size: 12px;
    font-weight: 700;
}

.profile-edit-summary strong {
    font-size: 14px;
}

.credential-preview b {
    color: #4055c6;
    font-weight: 850;
}

@media (max-width: 760px) {
    .profile-edit-summary {
        grid-template-columns: 1fr;
    }

    .person-edit-quick {
        display: none;
    }
}


/* ==========================================================
   V5.5 — FICHA COMPLETA + PORTAL DEL COLABORADOR
   ========================================================== */

.person-profile-link {
    text-decoration: none;
    white-space: nowrap;
}

.profile-page-actions {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
}

.employee-profile-hero {
    margin-bottom: 18px;
}

.employee-profile-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 220px;
    align-items: center;
    gap: 24px;
    padding: 28px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(103,126,255,.38), transparent 30%),
        linear-gradient(135deg, #121b2d 0%, #1b2947 100%);
    box-shadow: 0 22px 50px rgba(21, 32, 58, .16);
}

.employee-profile-photo-wrap {
    position: relative;
    z-index: 1;
}

.employee-profile-photo {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 30px;
    object-fit: cover;
    background: #eff2f7;
    box-shadow: 0 15px 35px rgba(0,0,0,.20);
}

.employee-profile-photo-placeholder {
    color: #fff;
    background: linear-gradient(135deg, #677cf6, #4458d5);
    font-size: 34px;
    font-weight: 900;
}

.employee-profile-main h1 {
    margin: 8px 0 4px;
    font-size: clamp(27px, 3vw, 38px);
    letter-spacing: -.8px;
}

.employee-profile-main > p {
    margin: 0;
    color: #b9c5d8;
    font-size: 16px;
}

.employee-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.employee-profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 19px;
}

.employee-profile-facts > div {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.06);
}

.employee-profile-facts span,
.employee-profile-facts strong {
    display: block;
}

.employee-profile-facts span {
    color: #9eacc2;
    font-size: 12px;
}

.employee-profile-facts strong {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.profile-completion-card {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}

.profile-completion-card > span,
.profile-completion-card > strong,
.profile-completion-card > small {
    display: block;
}

.profile-completion-card > span {
    color: #b7c3d5;
    font-size: 13px;
}

.profile-completion-card > strong {
    margin: 3px 0 10px;
    font-size: 34px;
}

.profile-completion-card > small {
    margin-top: 9px;
    color: #9eacc2;
    font-size: 12px;
    line-height: 1.45;
}

.profile-completion-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
}

.profile-completion-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #67d6ad, #7f93ff);
}

.profile-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.profile-main-form,
.profile-side-column {
    display: grid;
    gap: 18px;
}

.profile-section-card {
    padding: 22px;
    border: 1px solid #e2e7ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(32, 45, 74, .05);
}

.profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.profile-section-head h2 {
    margin: 2px 0 0;
    font-size: 20px;
}

.profile-section-note {
    padding: 6px 9px;
    border-radius: 999px;
    color: #738096;
    background: #f3f5f9;
    font-size: 12px;
    font-weight: 750;
}

.profile-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
    border: 1px solid #d8dfec;
    border-radius: 17px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(31, 43, 72, .11);
}

.profile-save-bar strong,
.profile-save-bar span {
    display: block;
}

.profile-save-bar span {
    margin-top: 2px;
    color: #7d8899;
    font-size: 13px;
}

.access-detail-row {
    padding: 11px 0;
    border-bottom: 1px solid #edf1f5;
}

.access-detail-row span,
.access-detail-row strong {
    display: block;
}

.access-detail-row span {
    color: #8a95a6;
    font-size: 12px;
}

.access-detail-row strong {
    margin-top: 2px;
    font-size: 15px;
}

.btn-block {
    width: 100%;
    margin-top: 15px;
}

.btn-compact {
    min-height: 38px;
    padding: 0 11px;
    font-size: 13px;
}

.profile-empty-mini {
    padding: 17px;
    border: 1px dashed #dbe1ea;
    border-radius: 14px;
    background: #fafbfd;
}

.profile-empty-mini strong,
.profile-empty-mini span {
    display: block;
}

.profile-empty-mini strong {
    font-size: 14px;
}

.profile-empty-mini span {
    margin-top: 3px;
    color: #7d899b;
    font-size: 13px;
    line-height: 1.45;
}

.dependent-list {
    display: grid;
    gap: 9px;
}

.dependent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e6eaf1;
    border-radius: 13px;
    background: #fafbfd;
}

.dependent-item span,
.dependent-item strong,
.dependent-item small {
    display: block;
}

.dependent-item span {
    color: #6d7bd0;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.dependent-item strong {
    margin-top: 2px;
    font-size: 14px;
}

.dependent-item small {
    margin-top: 2px;
    color: #8b96a6;
    font-size: 12px;
}

.icon-danger-button {
    width: 34px;
    height: 34px;
    border: 1px solid #f0d4d8;
    border-radius: 10px;
    color: #b83a47;
    background: #fff7f8;
    font-size: 20px;
    cursor: pointer;
}

.profile-note-card {
    background: #f8f9ff;
}

.profile-note-card h2 {
    margin: 5px 0 7px;
    font-size: 18px;
}

.profile-note-card p {
    margin: 0;
    color: #6f7b90;
    font-size: 14px;
    line-height: 1.55;
}

.insurance-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.insurance-checks label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
}

/* Portal moderno del colaborador */
.employee-portal-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(82,105,239,.09), transparent 25%),
        #f3f6fb;
}

.employee-portal-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.employee-portal-topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(18px, 4vw, 44px);
    border-bottom: 1px solid #e3e8ef;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
}

.employee-portal-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-portal-brand span,
.employee-portal-brand strong {
    display: block;
}

.employee-portal-brand span {
    color: #7f8a9b;
    font-size: 13px;
}

.employee-portal-brand strong {
    font-size: 16px;
}

.employee-portal-content {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 34px 0 50px;
    flex: 1 0 auto;
}

.employee-id-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 260px;
    align-items: center;
    gap: 26px;
    min-height: 250px;
    padding: 32px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(106,128,255,.42), transparent 30%),
        linear-gradient(135deg, #111a2b 0%, #1b2948 100%);
    box-shadow: 0 24px 56px rgba(24, 35, 62, .18);
}

.employee-id-pattern {
    position: absolute;
    width: 380px;
    height: 380px;
    right: -120px;
    top: -180px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(255,255,255,.025),
        0 0 0 110px rgba(255,255,255,.018);
}

.employee-id-photo-wrap,
.employee-id-copy,
.employee-id-company {
    position: relative;
    z-index: 1;
}

.employee-id-photo {
    width: 148px;
    height: 168px;
    display: grid;
    place-items: center;
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 30px;
    object-fit: cover;
    background: #eef1f7;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.employee-id-photo-placeholder {
    color: #fff;
    background: linear-gradient(135deg, #6379f6, #4358d4);
    font-size: 38px;
    font-weight: 900;
}

.employee-id-kicker {
    color: #89a0ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.employee-id-copy h1 {
    margin: 6px 0 4px;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -1.1px;
}

.employee-id-copy > p {
    margin: 0;
    color: #bdc8da;
    font-size: 17px;
}

.employee-id-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.employee-id-meta span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: #d7dfec;
    background: rgba(255,255,255,.06);
    font-size: 13px;
}

.employee-id-company {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(255,255,255,.07);
}

.employee-id-company span,
.employee-id-company strong,
.employee-id-company small {
    display: block;
}

.employee-id-company span {
    color: #aab7ca;
    font-size: 12px;
}

.employee-id-company strong {
    margin-top: 3px;
    font-size: 18px;
}

.employee-id-company small {
    margin-top: 7px;
    color: #94a4bb;
    font-size: 13px;
}

.employee-welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 28px 0 18px;
}

.employee-welcome-row h2 {
    margin: 2px 0 5px;
    font-size: 26px;
}

.employee-welcome-row p {
    margin: 0;
    color: #778398;
}

.employee-username-chip {
    min-width: 220px;
    padding: 13px 15px;
    border: 1px solid #dfe5ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(31,43,72,.05);
}

.employee-username-chip span,
.employee-username-chip strong {
    display: block;
}

.employee-username-chip span {
    color: #8b96a6;
    font-size: 12px;
}

.employee-username-chip strong {
    margin-top: 2px;
    color: #4056c7;
    font-size: 16px;
}

.employee-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.employee-module-card {
    min-height: 190px;
    padding: 20px;
    border: 1px solid #e1e6ee;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.05);
}

.employee-module-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 14px;
    color: #4d61ce;
    background: #eef1ff;
    font-weight: 900;
}

.employee-module-card strong,
.employee-module-card p,
.employee-module-card em {
    display: block;
}

.employee-module-card strong {
    font-size: 17px;
}

.employee-module-card p {
    min-height: 54px;
    margin: 6px 0 13px;
    color: #778398;
    font-size: 14px;
    line-height: 1.5;
}

.employee-module-card em {
    color: #5267da;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.employee-personal-summary {
    padding: 22px;
    border: 1px solid #e1e6ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.05);
}

.employee-summary-head h2 {
    margin: 3px 0 16px;
    font-size: 21px;
}

.employee-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.employee-summary-grid > div {
    padding: 13px;
    border-radius: 13px;
    background: #f7f9fc;
}

.employee-summary-grid span,
.employee-summary-grid strong {
    display: block;
}

.employee-summary-grid span {
    color: #8994a5;
    font-size: 12px;
}

.employee-summary-grid strong {
    margin-top: 2px;
    font-size: 14px;
}

@media (max-width: 1120px) {
    .employee-profile-card {
        grid-template-columns: 125px 1fr;
    }

    .profile-completion-card {
        grid-column: 1 / -1;
    }

    .profile-grid-layout {
        grid-template-columns: 1fr;
    }

    .profile-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-id-card {
        grid-template-columns: 135px 1fr;
    }

    .employee-id-company {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .employee-profile-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .employee-profile-photo {
        margin: 0 auto;
    }

    .employee-profile-badges,
    .employee-profile-facts {
        justify-content: center;
    }

    .employee-profile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    .profile-side-column {
        grid-template-columns: 1fr;
    }

    .profile-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-id-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .employee-id-photo {
        margin: 0 auto;
    }

    .employee-id-meta {
        justify-content: center;
    }

    .employee-welcome-row {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-username-chip {
        min-width: 0;
    }

    .employee-module-grid,
    .employee-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   V5.6 — FICHA RRHH POR TABS / SUELDOS / VACACIONES
   ========================================================== */

.compact-profile-hero {
    margin-bottom: 14px;
}

.employee-profile-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 9px 24px rgba(32,45,74,.06);
}

.employee-profile-tabs a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 14px;
    border-radius: 11px;
    color: #748096;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.employee-profile-tabs a:hover {
    color: #465acb;
    background: #f5f7ff;
}

.employee-profile-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #5a70ef, #4358d4);
    box-shadow: 0 8px 18px rgba(74,94,218,.22);
}

.profile-summary-dashboard,
.profile-tab-stack {
    display: grid;
    gap: 16px;
}

.profile-summary-dashboard {
    grid-template-columns: minmax(0, 1fr) 310px;
}

.profile-summary-main,
.profile-quick-actions-card {
    padding: 22px;
    border: 1px solid #e1e6ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.05);
}

.profile-summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.profile-summary-heading h2,
.profile-quick-actions-card h2 {
    margin: 2px 0 0;
    font-size: 21px;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-summary-grid > div,
.access-large-grid > div {
    padding: 13px 14px;
    border-radius: 13px;
    background: #f7f9fc;
}

.profile-summary-grid span,
.profile-summary-grid strong,
.access-large-grid span,
.access-large-grid strong {
    display: block;
}

.profile-summary-grid span,
.access-large-grid span {
    color: #8a95a6;
    font-size: 12px;
}

.profile-summary-grid strong,
.access-large-grid strong {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.profile-summary-side {
    display: grid;
    gap: 11px;
}

.summary-highlight-card {
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.05);
}

.summary-highlight-card span,
.summary-highlight-card strong,
.summary-highlight-card small {
    display: block;
}

.summary-highlight-card span {
    color: #8591a3;
    font-size: 12px;
    font-weight: 750;
}

.summary-highlight-card strong {
    margin: 5px 0 2px;
    font-size: 24px;
}

.summary-highlight-card small {
    color: #8c97a7;
    font-size: 12px;
}

.summary-highlight-card.salary { border-left: 4px solid #5c70ed; }
.summary-highlight-card.current { border-left: 4px solid #16a675; }
.summary-highlight-card.vacation { border-left: 4px solid #8a63df; }

.profile-quick-actions-card {
    grid-column: 1 / -1;
}

.profile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.profile-quick-actions a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid #dde3ee;
    border-radius: 11px;
    color: #5365c9;
    background: #f8f9ff;
    font-size: 14px;
    font-weight: 800;
}

.profile-tab-form {
    display: block;
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f5;
}

.profile-subsection-divider {
    height: 1px;
    margin: 24px 0;
    background: #e9edf3;
}

.salary-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.salary-summary-grid > div {
    padding: 15px;
    border: 1px solid #e4e9f1;
    border-radius: 14px;
    background: #f8fafc;
}

.salary-summary-grid span,
.salary-summary-grid strong,
.salary-summary-grid small {
    display: block;
}

.salary-summary-grid span {
    color: #8994a6;
    font-size: 12px;
}

.salary-summary-grid strong {
    margin: 4px 0 1px;
    font-size: 21px;
}

.salary-summary-grid small {
    color: #8994a6;
    font-size: 12px;
}

.salary-history {
    overflow: hidden;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
}

.salary-history-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px 150px;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 15px;
    border-bottom: 1px solid #edf1f5;
}

.salary-history-row:last-child {
    border-bottom: 0;
}

.salary-history-row span,
.salary-history-row strong {
    display: block;
}

.salary-history-row span {
    color: #8a95a6;
    font-size: 12px;
}

.salary-history-row strong {
    margin-top: 2px;
    font-size: 14px;
}

.vacation-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vacation-metric-card {
    min-height: 126px;
    padding: 17px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.05);
}

.vacation-metric-card span,
.vacation-metric-card strong,
.vacation-metric-card small {
    display: block;
}

.vacation-metric-card span {
    color: #8994a5;
    font-size: 12px;
}

.vacation-metric-card strong {
    margin: 8px 0 3px;
    font-size: 28px;
}

.vacation-metric-card small {
    color: #8994a5;
    font-size: 12px;
}

.vacation-metric-card.featured {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5d70ec, #735ed6);
}

.vacation-metric-card.featured span,
.vacation-metric-card.featured small {
    color: #d9def8;
}

.vacation-legal-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f0dfb8;
    border-radius: 14px;
    background: #fffaf0;
}

.vacation-legal-note strong {
    flex: 0 0 auto;
    color: #94610b;
}

.vacation-legal-note p {
    margin: 0;
    color: #796949;
    font-size: 13px;
    line-height: 1.5;
}

.vacation-columns {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 16px;
}

.vacation-movement-list {
    display: grid;
    gap: 8px;
}

.vacation-movement-row {
    display: grid;
    grid-template-columns: 165px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e6eaf1;
    border-radius: 13px;
    background: #fafbfd;
}

.vacation-movement-row strong,
.vacation-movement-row span,
.vacation-movement-row small {
    display: block;
}

.vacation-movement-row strong {
    margin-top: 4px;
    font-size: 15px;
}

.vacation-movement-row > div:nth-child(2) > span {
    color: #606d80;
    font-size: 13px;
}

.vacation-movement-row small {
    margin-top: 2px;
    color: #8b96a7;
    font-size: 12px;
}

.vacation-type-pill {
    display: inline-flex !important;
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 850;
}

.type-goce { color: #097456; background: #e9f8f2; }
.type-adelanto { color: #945f05; background: #fff3d9; }
.type-ajuste_favor { color: #4056bb; background: #edf1ff; }
.type-ajuste_contra { color: #a5323f; background: #fff0f2; }

.access-tab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
}

.access-large-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.access-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f5;
}

.wide-dependent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .profile-summary-dashboard {
        grid-template-columns: 1fr;
    }

    .profile-summary-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vacation-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vacation-columns,
    .access-tab-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .employee-profile-tabs {
        border-radius: 12px;
    }

    .profile-summary-grid,
    .profile-summary-side,
    .salary-summary-grid,
    .vacation-dashboard-grid,
    .access-large-grid,
    .wide-dependent-list {
        grid-template-columns: 1fr;
    }

    .salary-history-row,
    .vacation-movement-row {
        grid-template-columns: 1fr;
    }

    .vacation-legal-note {
        flex-direction: column;
    }
}


/* ==========================================================
   V5.7 — ROLES INTEGRADOS EN COLABORADORES
   ========================================================== */

.person-type-pill.administrator {
    color: #4c45b4;
    background: #eeeaff;
}

.context-menu-link {
    width: 100%;
    display: block;
    padding: 10px 12px;
    border: 0;
    color: #3548ad;
    background: transparent;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.context-menu-link:hover {
    background: #f3f5ff;
}

.system-role-card {
    overflow: hidden;
}

.system-role-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.system-role-option {
    position: relative;
    cursor: pointer;
}

.system-role-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.system-role-option > span {
    min-height: 130px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: #fafbfd;
    transition: .18s ease;
}

.system-role-option > input:checked + span {
    border-color: #7284ef;
    background: #f1f3ff;
    box-shadow: 0 0 0 4px rgba(82, 105, 239, .08);
}

.system-role-option > span > span {
    min-width: 0;
    flex: 1;
}

.system-role-option strong,
.system-role-option small {
    display: block;
}

.system-role-option strong {
    margin-bottom: 5px;
    font-size: 17px;
}

.system-role-option small {
    color: #748096;
    font-size: 13px;
    line-height: 1.5;
}

.role-option-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #667bf2, #465bd8);
    font-size: 17px;
    font-weight: 900;
}

.role-option-icon.administrator {
    background: linear-gradient(135deg, #7d63db, #5744bd);
}

.admin-company-access {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fbfcfe;
}

.admin-company-access.is-hidden {
    display: none;
}

.admin-company-access-head {
    margin-bottom: 13px;
}

.admin-company-access-head strong,
.admin-company-access-head span {
    display: block;
}

.admin-company-access-head strong {
    font-size: 16px;
}

.admin-company-access-head span {
    margin-top: 3px;
    color: #788497;
    font-size: 13px;
    line-height: 1.5;
}

.role-preserves-job,
.role-access-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
    padding: 14px 15px;
    border: 1px solid #cee8dd;
    border-radius: 14px;
    background: #f3fbf7;
}

.role-preserves-job > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #18a574;
    font-weight: 900;
}

.role-preserves-job strong,
.role-preserves-job small,
.role-access-notice strong,
.role-access-notice span {
    display: block;
}

.role-preserves-job small {
    margin-top: 2px;
    color: #647a70;
    font-size: 13px;
    line-height: 1.45;
}

.role-access-notice strong {
    color: #6c50b8;
}

.role-access-notice span {
    color: #746c86;
    font-size: 14px;
    line-height: 1.5;
}

.admin-personal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.employee-portal-top-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

@media (max-width: 760px) {
    .system-role-options {
        grid-template-columns: 1fr;
    }

    .admin-personal-actions,
    .employee-portal-top-actions {
        width: 100%;
    }

    .employee-portal-top-actions .btn {
        flex: 1;
    }
}

/* ==========================================================
   V5.8 — CURSOS, EVALUACIONES, RESULTADOS Y CERTIFICADOS
   ========================================================== */

.training-admin-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.training-admin-content {
    flex: 1 0 auto;
}

.training-hero,
.training-edit-hero,
.learner-hero,
.learner-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px;
    margin-bottom: 16px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 91% 10%, rgba(84,105,239,.13), transparent 28%),
        #fff;
    box-shadow: 0 10px 28px rgba(31,43,72,.06);
}

.training-hero h1,
.training-edit-hero h1,
.learner-hero h1,
.learner-detail-hero h1 {
    margin: 3px 0 6px;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.8px;
}

.training-hero p,
.training-edit-hero p,
.learner-hero p,
.learner-detail-hero p {
    max-width: 760px;
    margin: 0;
    color: #748096;
    line-height: 1.55;
}

.training-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid #dfe5ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.04);
}

.training-tabs a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 14px;
    border-radius: 10px;
    color: #748096;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.training-tabs a b {
    min-width: 22px;
    min-height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #68758a;
    background: #f0f3f8;
    font-size: 11px;
}

.training-tabs a:hover {
    color: #4659ca;
    background: #f6f7ff;
}

.training-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #5c71f0, #465bd8);
    box-shadow: 0 8px 18px rgba(75,94,218,.2);
}

.training-tabs a.active b {
    color: #fff;
    background: rgba(255,255,255,.18);
}

.training-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.training-stat-grid article {
    padding: 18px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.05);
}

.training-stat-grid span,
.training-stat-grid strong,
.training-stat-grid small {
    display: block;
}

.training-stat-grid span {
    color: #8692a5;
    font-size: 13px;
}

.training-stat-grid strong {
    margin: 4px 0 2px;
    font-size: 30px;
}

.training-stat-grid small {
    color: #8793a5;
    font-size: 12px;
}

.training-flow-panel {
    margin-bottom: 16px;
}

.training-flow-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 20px;
}

.training-flow-grid article {
    min-height: 130px;
    padding: 14px;
    border: 1px solid #e5e9f0;
    border-radius: 15px;
    background: #fafbfd;
}

.training-flow-grid b {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 10px;
    color: #4d60ca;
    background: #eef1ff;
    font-size: 12px;
}

.training-flow-grid strong,
.training-flow-grid span {
    display: block;
}

.training-flow-grid strong {
    font-size: 15px;
}

.training-flow-grid span {
    margin-top: 4px;
    color: #7e899b;
    font-size: 12px;
    line-height: 1.45;
}

.training-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
}

.training-content-card {
    position: relative;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    padding: 19px;
    border: 1px solid #e1e6ee;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.05);
}

.training-content-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.training-kind,
.training-state,
.training-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.training-kind.course { color: #4057c2; background: #edf1ff; }
.training-kind.exam { color: #7650a7; background: #f3ecff; }
.training-state.state-borrador { color: #7c8798; background: #f1f3f6; }
.training-state.state-publicada { color: #087653; background: #e9f8f2; }
.training-state.state-cerrada { color: #9b3741; background: #fff0f2; }
.training-status.status-pendiente { color: #8c6409; background: #fff5dd; }
.training-status.status-en_progreso { color: #4059bd; background: #edf1ff; }
.training-status.status-aprobado { color: #087653; background: #e9f8f2; }
.training-status.status-desaprobado { color: #a23442; background: #fff0f2; }

.training-card-icon,
.learner-course-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 17px 0 13px;
    border-radius: 15px;
    color: #4c5fc8;
    background: #eef1ff;
    font-weight: 900;
}

.training-content-card h3 {
    margin: 0;
    font-size: 18px;
}

.training-content-card > p {
    min-height: 58px;
    margin: 6px 0 12px;
    color: #788497;
    font-size: 13px;
    line-height: 1.5;
}

.training-card-company {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 13px;
}

.training-card-company span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #5968b4;
    background: #f3f5ff;
    font-size: 11px;
    font-weight: 750;
}

.training-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: auto;
}

.training-card-metrics span {
    padding: 8px;
    border-radius: 10px;
    color: #8994a5;
    background: #f7f9fc;
    font-size: 11px;
    text-align: center;
}

.training-card-metrics b {
    display: block;
    color: #1f2b3f;
    font-size: 15px;
}

.training-configure-link {
    margin-top: 12px;
    color: #4e62d1;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.training-type-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.training-type-choice label {
    position: relative;
    cursor: pointer;
}

.training-type-choice input {
    position: absolute;
    opacity: 0;
}

.training-type-choice label > span {
    min-height: 94px;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 3px 11px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dfe5ee;
    border-radius: 15px;
    background: #fafbfd;
}

.training-type-choice input:checked + span {
    border-color: #7485ef;
    background: #f1f3ff;
    box-shadow: 0 0 0 4px rgba(82,105,239,.08);
}

.training-type-choice b {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6278f2, #4559d5);
}

.training-type-choice strong,
.training-type-choice small {
    display: block;
}

.training-type-choice small {
    color: #7e899b;
    font-size: 12px;
}

.training-course-rule,
.training-rule-ok {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #cfe8dd;
    border-radius: 14px;
    background: #f3fbf7;
}

.training-course-rule > span,
.training-rule-ok > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #17a574;
    font-weight: 900;
}

.training-course-rule strong,
.training-course-rule small,
.training-rule-ok strong,
.training-rule-ok small {
    display: block;
}

.training-course-rule small,
.training-rule-ok small {
    margin-top: 2px;
    color: #61776e;
    font-size: 12px;
    line-height: 1.45;
}

.training-result-list,
.certificate-list {
    display: grid;
}

.training-result-row,
.certificate-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 1fr) 110px 130px 130px;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 12px 20px;
    border-bottom: 1px solid #edf1f5;
}

.certificate-row {
    grid-template-columns: minmax(230px,1.2fr) minmax(220px,1.1fr) minmax(170px,.8fr) 110px 110px;
}

.training-result-row:last-child,
.certificate-row:last-child {
    border-bottom: 0;
}

.training-result-row > div > span,
.training-result-row > div > small,
.certificate-row > div > span {
    display: block;
    color: #8994a5;
    font-size: 12px;
}

.training-result-row > div > strong,
.certificate-row > div > strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
}

.training-person-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.training-person-mini .avatar {
    flex: 0 0 auto;
}

.training-edit-back {
    margin-bottom: 12px;
}

.training-edit-hero {
    justify-content: flex-start;
}

.training-edit-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #5f75ef, #4357d2);
    font-size: 24px;
    font-weight: 900;
}

.training-edit-main {
    min-width: 0;
    flex: 1;
}

.training-edit-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.training-edit-actions {
    display: flex;
    gap: 8px;
}

.training-progress-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}

.training-progress-strip > div {
    padding: 12px 14px;
    border: 1px solid #e2e7ef;
    border-radius: 13px;
    background: #fff;
}

.training-progress-strip span,
.training-progress-strip strong {
    display: block;
}

.training-progress-strip span {
    color: #8a95a5;
    font-size: 11px;
}

.training-progress-strip strong {
    margin-top: 3px;
    font-size: 19px;
}

.training-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 16px;
    align-items: start;
}

.training-add-card {
    position: sticky;
    top: 16px;
}

.one-column-grid {
    grid-template-columns: 1fr !important;
}

.training-resource-list {
    display: grid;
    gap: 8px;
}

.training-resource-row {
    display: grid;
    grid-template-columns: 38px 42px minmax(0,1fr) auto 36px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid #e4e9f1;
    border-radius: 13px;
    background: #fafbfd;
}

.resource-order,
.resource-type-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

.resource-order { color: #71809a; background: #edf1f6; }
.resource-type-icon { color: #4e62c9; background: #eef1ff; }

.resource-info strong,
.resource-info span {
    display: block;
}

.resource-info strong { font-size: 14px; }
.resource-info span { margin-top: 2px; color: #8994a5; font-size: 12px; }
.training-resource-row > a { color: #5164ca; font-size: 13px; font-weight: 800; }

.training-checkbox-field {
    display: flex;
    align-items: end;
}

.training-checkbox-field label {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #f9fafc;
}

.question-counter {
    min-width: 50px;
    min-height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #9a6208;
    background: #fff4dc;
    font-weight: 900;
}

.question-counter.complete {
    color: #087653;
    background: #e9f8f2;
}

.question-list {
    display: grid;
    gap: 10px;
}

.question-card {
    padding: 15px;
    border: 1px solid #e3e8f0;
    border-radius: 15px;
    background: #fbfcfe;
}

.question-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.question-card-head span {
    color: #5668c9;
    font-size: 12px;
    font-weight: 850;
}

.question-card-head strong {
    font-size: 12px;
}

.question-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.question-option-preview {
    display: grid;
    gap: 6px;
}

.question-option-preview span {
    padding: 8px 10px;
    border-radius: 10px;
    color: #697588;
    background: #f2f5f8;
    font-size: 12px;
}

.question-option-preview span.correct {
    color: #087653;
    background: #e9f8f2;
    font-weight: 800;
}

.question-delete-form {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.question-option-input {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.question-option-input input[type="radio"] {
    width: 18px;
    height: 18px;
}

.assignment-sections {
    display: grid;
    gap: 22px;
}

.assignment-sections section > h3 {
    margin: 0 0 11px;
    font-size: 16px;
}

.section-subcopy {
    margin: 4px 0 0;
    color: #8190a2;
    font-size: 13px;
}

.cargo-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.cargo-check {
    position: relative;
    cursor: pointer;
}

.cargo-check input {
    position: absolute;
    opacity: 0;
}

.cargo-check > span {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 13px;
    border: 1px solid #dfe5ee;
    border-radius: 13px;
    background: #fafbfd;
}

.cargo-check input:checked + span {
    border-color: #7586ef;
    background: #f1f3ff;
    box-shadow: 0 0 0 3px rgba(82,105,239,.07);
}

.cargo-check strong,
.cargo-check small {
    display: block;
}

.cargo-check strong { font-size: 13px; }
.cargo-check small { margin-top: 2px; color: #8894a5; font-size: 11px; }

.assignment-footer,
.sync-inline-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid #edf1f5;
}

.assignment-footer strong,
.assignment-footer span,
.sync-inline-card strong,
.sync-inline-card span {
    display: block;
}

.assignment-footer span,
.sync-inline-card span {
    margin-top: 2px;
    color: #8490a2;
    font-size: 12px;
}

.sync-inline-card {
    margin-top: 12px;
    padding: 15px 17px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
}

.certificate-preview-card {
    margin-bottom: 18px;
    padding: 28px;
    border: 8px solid #1f2c4b;
    outline: 1px solid #7184ed;
    outline-offset: -14px;
    border-radius: 6px;
    color: #1d2941;
    background: #f3f5fb;
    text-align: center;
}

.certificate-preview-card > span {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1px;
}

.certificate-preview-card h3 {
    margin: 15px 0 7px;
    font-size: 25px;
}

.certificate-preview-card p {
    max-width: 640px;
    margin: 0 auto 25px;
    color: #657286;
}

.certificate-preview-card > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 620px;
    margin: 0 auto;
}

.certificate-preview-card b {
    padding-top: 8px;
    border-top: 1px solid #8793a6;
}

/* Portal del participante */
.learner-hero {
    color: #fff;
    border: 0;
    background:
        radial-gradient(circle at 86% 10%, rgba(111,132,255,.35), transparent 28%),
        linear-gradient(135deg, #111b2e, #1b2a49);
}

.learner-hero .eyebrow,
.learner-detail-hero .eyebrow {
    color: #94a8ff;
}

.learner-hero p {
    color: #c0cadb;
}

.learner-hero-metric,
.learner-result-box {
    min-width: 160px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    background: rgba(255,255,255,.08);
}

.learner-hero-metric span,
.learner-hero-metric strong,
.learner-result-box span,
.learner-result-box strong,
.learner-result-box small {
    display: block;
}

.learner-hero-metric span,
.learner-result-box span {
    color: #b7c3d6;
    font-size: 12px;
}

.learner-hero-metric strong {
    margin-top: 3px;
    font-size: 32px;
}

.learner-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.learner-course-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    padding: 19px;
    border: 1px solid #e1e6ee;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.05);
}

.learner-course-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.learner-course-card h2 {
    margin: 0;
    font-size: 19px;
}

.learner-course-card > p {
    min-height: 62px;
    margin: 6px 0 12px;
    color: #7c8798;
    font-size: 13px;
    line-height: 1.5;
}

.learner-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.learner-course-meta span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #6f7b8d;
    background: #f2f5f8;
    font-size: 11px;
}

.learner-progress {
    margin: 16px 0;
}

.learner-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: #748094;
    font-size: 12px;
}

.learner-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}

.learner-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5269ef, #16a574);
}

.learner-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.learner-course-card > .btn-block {
    margin-top: auto;
}

.learner-empty {
    padding: 0;
}

.learner-detail-hero {
    color: #fff;
    border: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(104,125,255,.36), transparent 28%),
        linear-gradient(135deg, #111b2d, #1d2c4d);
}

.learner-detail-hero p,
.learner-result-box small {
    color: #bec9db;
}

.learner-result-box strong {
    margin: 4px 0;
    font-size: 20px;
}

.learner-instructions {
    margin-bottom: 14px;
    padding: 15px 17px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
}

.learner-instructions strong {
    display: block;
    margin-bottom: 4px;
}

.learner-instructions p {
    margin: 0;
    color: #718095;
    line-height: 1.5;
}

.learner-resource-stack {
    display: grid;
    gap: 14px;
}

.learner-resource-card {
    padding: 20px;
    border: 1px solid #e1e6ee;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.04);
}

.learner-resource-card.completed {
    border-color: #cce8dc;
}

.learner-resource-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.learner-resource-head span {
    color: #586ac9;
    font-size: 12px;
    font-weight: 850;
}

.learner-resource-head h2 {
    margin: 3px 0 0;
    font-size: 20px;
}

.resource-complete-badge {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #6d798c !important;
    background: #f1f4f7;
    white-space: nowrap;
}

.learner-resource-card.completed .resource-complete-badge {
    color: #087653 !important;
    background: #e9f8f2;
}

.learner-resource-card > p {
    color: #798596;
}

.learner-media-wrap {
    overflow: hidden;
    margin: 14px 0;
    border-radius: 15px;
    background: #101827;
}

.learner-media-wrap iframe,
.learner-media-wrap video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

.learner-external-resource {
    min-height: 100px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 850;
    text-decoration: none;
}

.learner-complete-form {
    display: flex;
    justify-content: flex-end;
}

.learner-exam-gate {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #ead8b5;
    border-radius: 18px;
    background: #fffaf0;
}

.learner-exam-gate.ready {
    border-color: #cbe5db;
    background: #f3fbf7;
}

.learner-exam-gate-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: #a47719;
    font-size: 22px;
    font-weight: 900;
}

.learner-exam-gate.ready .learner-exam-gate-icon {
    background: #16a574;
}

.learner-exam-gate h2 {
    margin: 2px 0 3px;
    font-size: 20px;
}

.learner-exam-gate p {
    margin: 0;
    color: #776d59;
    font-size: 13px;
}

.learner-exam-gate.ready p {
    color: #647b71;
}

/* Examen */
.exam-body {
    min-height: 100vh;
    background: #f2f5fa;
}

.exam-shell {
    min-height: 100vh;
}

.exam-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(18px,4vw,42px);
    border-bottom: 1px solid #e1e6ee;
    background: #fff;
}

.exam-header span,
.exam-header strong {
    display: block;
}

.exam-header span {
    color: #8692a4;
    font-size: 12px;
}

.exam-header strong {
    font-size: 17px;
}

.exam-attempt {
    padding: 9px 12px;
    border-radius: 999px;
    color: #4b60c8;
    background: #eef1ff;
    font-size: 13px;
    font-weight: 850;
}

.exam-content {
    width: min(100% - 32px, 880px);
    margin: 0 auto;
    padding: 34px 0 60px;
}

.exam-intro {
    margin-bottom: 18px;
}

.exam-intro h1 {
    margin: 3px 0 6px;
    font-size: 30px;
}

.exam-intro p {
    margin: 0;
    color: #7b8798;
}

.exam-form {
    display: grid;
    gap: 14px;
}

.exam-question-card {
    padding: 20px;
    border: 1px solid #e1e6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.04);
}

.exam-question-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.exam-question-number span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #5267da;
    font-weight: 900;
}

.exam-question-number b {
    color: #738095;
    font-size: 12px;
}

.exam-question-card h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.exam-options {
    display: grid;
    gap: 8px;
}

.exam-options label {
    position: relative;
    cursor: pointer;
}

.exam-options input {
    position: absolute;
    opacity: 0;
}

.exam-options span {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid #e1e6ee;
    border-radius: 12px;
    color: #596679;
    background: #fafbfd;
}

.exam-options input:checked + span {
    border-color: #7485ef;
    color: #3549b1;
    background: #f1f3ff;
    box-shadow: 0 0 0 3px rgba(82,105,239,.07);
}

.exam-submit-bar {
    position: sticky;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid #dce2ec;
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(31,43,72,.1);
}

.admin-module-link,
.employee-module-link {
    color: inherit;
    text-decoration: none;
}

.admin-module-link:hover,
.employee-module-link:hover {
    transform: translateY(-2px);
    border-color: #cbd4ff;
    box-shadow: 0 12px 28px rgba(31,43,72,.08);
}

@media (max-width: 1150px) {
    .training-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .training-card-grid,
    .learner-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-two-column { grid-template-columns: 1fr; }
    .training-add-card { position: static; }
    .training-result-row,
    .certificate-row { grid-template-columns: 1.4fr 1fr 100px 110px; }
    .training-result-row > :last-child,
    .certificate-row > :last-child { grid-column: auto; }
    .cargo-check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .training-hero,
    .training-edit-hero,
    .learner-hero,
    .learner-detail-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .training-stat-grid,
    .training-progress-strip,
    .training-type-choice,
    .training-card-grid,
    .learner-course-grid,
    .cargo-check-grid {
        grid-template-columns: 1fr;
    }

    .training-flow-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .training-result-row,
    .certificate-row,
    .training-resource-row {
        grid-template-columns: 1fr;
    }

    .training-resource-row .resource-order,
    .training-resource-row .resource-type-icon {
        display: none;
    }

    .assignment-footer,
    .sync-inline-card,
    .learner-exam-gate {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .learner-exam-gate {
        display: grid;
    }

    .certificate-preview-card > div {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .exam-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================
   V5.9 — NÚCLEO FLEXIBLE DE EVALUACIONES
   ========================================================== */
.training-progress-strip.v59{grid-template-columns:repeat(6,minmax(0,1fr));}.training-edit-tabs.v59{overflow-x:auto;}.training-bank-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:16px;align-items:start}.training-bank-side{display:grid;gap:16px}.question-explanation{display:block;margin:10px 0;color:#738096;line-height:1.45}.import-preview-card{margin-top:16px}.import-preview-list{display:grid;gap:7px;max-height:420px;overflow:auto}.import-preview-list>div{display:grid;grid-template-columns:34px 1fr 170px;gap:8px;align-items:center;padding:10px 12px;border:1px solid #e6eaf1;border-radius:12px;background:#fafbfd}.import-preview-list span{font-size:14px}.import-preview-list em{font-size:12px;color:#7b8799;font-style:normal;text-align:right}.import-preview-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}.exam-config-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.exam-config-metrics>div{padding:14px;border:1px solid #e2e7ef;border-radius:14px;background:#f8fafc}.exam-config-metrics span,.exam-config-metrics strong{display:block}.exam-config-metrics span{color:#8490a2;font-size:12px}.exam-config-metrics strong{margin-top:4px;font-size:23px}.training-person-search{width:100%;min-height:46px;margin-bottom:10px;padding:0 13px;border:1px solid #dfe5ee;border-radius:12px}.specific-person-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:380px;overflow:auto}.specific-person-check{position:relative}.specific-person-check>input{position:absolute;opacity:0}.specific-person-check>span{display:block;padding:11px 12px;border:1px solid #e2e7ef;border-radius:12px;background:#fff;cursor:pointer}.specific-person-check input:checked+span{border-color:#6d7ff0;background:#f1f3ff;box-shadow:0 0 0 3px rgba(82,105,239,.08)}.specific-person-check strong,.specific-person-check small{display:block}.specific-person-check small{margin-top:2px;color:#7e899a}.premium-cert-config{overflow:hidden}.certificate-preview-premium{padding:12px;border-radius:18px;background:#111c35;box-shadow:0 18px 40px rgba(25,37,66,.12);margin-bottom:18px}.cert-inner{position:relative;min-height:360px;padding:28px 38px;border:2px solid #c29b45;background:#fffdf6;text-align:center;color:#14213c}.cert-inner:after{content:"";position:absolute;inset:9px;border:1px solid #d9c68f;pointer-events:none}.cert-company{display:block;font-weight:900;letter-spacing:1.2px}.cert-inner>small{display:block;margin-top:2px;color:#7e8797;letter-spacing:1px}.cert-inner h3{margin:34px 0 3px;font-size:29px;letter-spacing:1px}.cert-inner em{color:#7c6b48;font-style:normal}.cert-inner p{margin:18px 0 5px;color:#657085}.cert-inner>strong{display:block;font-size:28px;border-bottom:1px solid #cdbb87;padding-bottom:7px}.cert-inner h4{margin:10px auto 22px;font-size:21px;max-width:650px}.cert-meta-preview{display:flex;justify-content:center;gap:28px;padding:10px;background:#f3eddc}.cert-sign-preview{display:flex;justify-content:space-around;margin-top:35px}.cert-verify-preview{position:absolute;right:28px;bottom:25px;padding:8px 10px;background:#14213c;color:white;border-radius:8px;font-size:11px}.video-progress-ui{margin-top:12px;padding:13px;border:1px solid #e0e6ee;border-radius:13px;background:#f8fafc}.video-progress-ui>div:first-child{display:flex;justify-content:space-between;gap:8px}.video-progress-bar{height:9px;margin:8px 0;border-radius:999px;background:#e5e9f1;overflow:hidden}.video-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#5369e9,#19a879);border-radius:inherit}.video-progress-ui>small{color:#7d8999}.tracked-video.youtube,.tracked-vimeo,.tracked-html5{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#0e1423}.certificate-verify-body{min-height:100vh;background:#f2f5fa;display:grid;place-items:center;padding:24px}.certificate-verify-shell{width:min(100%,720px);padding:34px;border:1px solid #dfe5ee;border-radius:24px;background:#fff;box-shadow:0 22px 60px rgba(31,43,72,.12);text-align:center}.verify-seal{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 14px;border-radius:50%;background:#e7f8f1;color:#0a9467;font-size:34px;font-weight:900}.verify-seal.invalid{background:#fff0f2;color:#b73545}.certificate-verify-shell h1{margin:7px 0}.certificate-verify-shell p{color:#758195}.verify-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.verify-grid>div{padding:13px;border-radius:13px;background:#f7f9fc}.verify-grid span,.verify-grid strong{display:block}.verify-grid span{color:#8994a5;font-size:12px}.verify-grid strong{margin-top:4px;font-size:14px}
@media(max-width:1050px){.training-progress-strip.v59{grid-template-columns:repeat(3,1fr)}.training-bank-grid{grid-template-columns:1fr}.specific-person-grid{grid-template-columns:1fr}.exam-config-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.training-progress-strip.v59,.exam-config-metrics,.verify-grid{grid-template-columns:1fr}.import-preview-list>div{grid-template-columns:28px 1fr}.import-preview-list em{grid-column:2;text-align:left}.cert-inner{padding:24px 18px}.cert-sign-preview{flex-direction:column;gap:20px}.cert-verify-preview{position:static;display:inline-block;margin-top:20px}}


/* ==========================================================
   V5.10 — CERTIFICADOS PREMIUM+ POR AUDIENCIA
   ========================================================== */
.certificate-studio{overflow:hidden}
.certificate-studio-head{align-items:center}
.certificate-head-actions,.certificate-download-actions{display:flex;flex-wrap:wrap;gap:8px}
.certificate-audience-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 20px;padding:7px;border:1px solid #e1e6ee;border-radius:18px;background:#f7f9fc}
.certificate-audience-switch button{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;gap:1px 11px;align-items:center;padding:14px;border:1px solid transparent;border-radius:14px;background:transparent;color:#738095;text-align:left;cursor:pointer}
.certificate-audience-switch button>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e9edff;color:#4e61d4;font-weight:900}
.certificate-audience-switch button strong{color:#263249;font-size:15px}.certificate-audience-switch button small{font-size:12px}
.certificate-audience-switch button.active{border-color:#cfd7ff;background:#fff;box-shadow:0 8px 22px rgba(46,60,105,.07)}
.certificate-audience-panel{display:none}.certificate-audience-panel.active{display:block}
.certificate-panel-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}.certificate-panel-intro h3{margin:3px 0 5px;font-size:20px}.certificate-panel-intro p{margin:0;color:#778398;max-width:720px;line-height:1.55}
.certificate-template-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:12px 0 18px}
.certificate-template-option{position:relative;display:block;cursor:pointer}.certificate-template-option>input{position:absolute;opacity:0;pointer-events:none}
.certificate-template-option>input:checked~.certificate-template-thumb{outline:3px solid rgba(83,104,238,.22);border-color:#6478ef;transform:translateY(-2px);box-shadow:0 15px 34px rgba(34,47,83,.13)}
.certificate-template-thumb{position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:22px 16px;border:1px solid #dce3ed;border-radius:17px;background:#fff;transition:.18s ease;text-align:center}
.certificate-template-thumb:before,.certificate-template-thumb:after{content:"";position:absolute;pointer-events:none}.certificate-template-thumb .thumb-brand{position:absolute;top:12px;left:14px;font-size:9px;font-style:normal;font-weight:900;letter-spacing:1px}.certificate-template-thumb b{max-width:88%;font-size:16px;line-height:1.15}.certificate-template-thumb em{font-family:Georgia,serif;font-size:15px;font-style:normal;font-weight:700}.certificate-template-thumb small{position:absolute;right:12px;bottom:10px;font-size:10px;font-weight:800}
.certificate-template-copy{display:block;padding:9px 3px 0}.certificate-template-copy strong,.certificate-template-copy small{display:block}.certificate-template-copy strong{font-size:14px}.certificate-template-copy small{margin-top:2px;color:#8490a2;font-size:12px;line-height:1.4}
.style-executive_gold .certificate-template-thumb{color:#11203e;background:#fffdf7;border:4px solid #14213d}.style-executive_gold .certificate-template-thumb:before{inset:7px;border:1px solid #d5a83d}.style-executive_gold .certificate-template-thumb:after{top:0;right:0;width:62px;height:48px;background:#d5a83d;clip-path:polygon(100% 0,100% 100%,0 0)}
.style-corporate_blue .certificate-template-thumb{color:#163a6b;background:linear-gradient(90deg,#163a6b 0 12%,#fff 12%)}.style-corporate_blue .certificate-template-thumb:after{top:0;right:0;width:100%;height:22px;background:#eef4ff}.style-corporate_blue .certificate-template-thumb .thumb-brand{color:#fff;writing-mode:vertical-rl;left:9px;top:34px}.style-corporate_blue .certificate-template-thumb small{color:#3e7bfa}
.style-platinum_minimal .certificate-template-thumb{color:#252a34;background:#fff;border:1px solid #565c65}.style-platinum_minimal .certificate-template-thumb:before{inset:7px;border:1px solid #b7bbc3}.style-platinum_minimal .certificate-template-thumb:after{left:18%;right:18%;top:34px;height:2px;background:#a7adb8}
.style-talent_violet .certificate-template-thumb{color:#4b2a7a;background:#fbf9ff;border-color:#cab8f0}.style-talent_violet .certificate-template-thumb:before{left:0;top:0;width:72px;height:100%;background:#9b6dff;clip-path:polygon(0 0,100% 0,44% 100%,0 100%)}.style-talent_violet .certificate-template-thumb:after{right:-20px;top:-25px;width:90px;height:90px;border-radius:50%;background:#4b2a7a}.style-talent_violet .certificate-template-thumb .thumb-brand{color:#fff;z-index:2}.style-talent_violet .certificate-template-thumb small{color:#7c55d9}
.style-selection_emerald .certificate-template-thumb{color:#0e4d45;background:#fcfffd;border-color:#9edac9}.style-selection_emerald .certificate-template-thumb:before{left:0;bottom:0;border-style:solid;border-width:58px 58px 0 0;border-color:#2bbf91 transparent transparent transparent}.style-selection_emerald .certificate-template-thumb:after{top:0;right:0;border-style:solid;border-width:0 0 52px 52px;border-color:transparent transparent #0e4d45 transparent}.style-selection_emerald .certificate-template-thumb small{color:#15906e}
.style-assessment_burgundy .certificate-template-thumb{color:#641f2c;background:#fff9f7;border:4px solid #641f2c}.style-assessment_burgundy .certificate-template-thumb:before{inset:7px;border:1px solid #c98e7b}.style-assessment_burgundy .certificate-template-thumb:after{left:14%;right:14%;bottom:30px;height:22px;background:#f6e4df}.style-assessment_burgundy .certificate-template-thumb small{color:#9e5f6a}
.certificate-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:17px;border:1px solid #e4e8ef;border-radius:16px;background:#fbfcfe}.certificate-editor-grid .form-field-full{grid-column:1/-1}.certificate-editor-grid label small{margin-left:5px;color:#8a95a5;font-weight:500}
.color-field{display:flex;align-items:center;gap:10px}.color-field input[type=color]{width:70px;height:48px;padding:4px;border:1px solid #d7deea;border-radius:12px;background:#fff}.color-field span{color:#7e899b;font-size:13px}
.certificate-shared-settings{margin-top:20px;padding-top:20px;border-top:1px solid #e6ebf1}.premium-certificate-rule{margin-top:18px}
@media(max-width:980px){.certificate-template-gallery{grid-template-columns:1fr 1fr}.certificate-panel-intro{flex-direction:column}}
@media(max-width:680px){.certificate-audience-switch,.certificate-template-gallery,.certificate-editor-grid{grid-template-columns:1fr}.certificate-head-actions,.certificate-download-actions{width:100%}.certificate-head-actions .btn,.certificate-download-actions .btn{flex:1}}


/* ==========================================================
   V5.11 — POSTULANTES / SELECCIÓN / PORTAL
   ========================================================== */

.recruitment-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 16px;
    padding: 24px 26px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(91,112,238,.11), transparent 30%),
        #fff;
    box-shadow: 0 10px 28px rgba(31,43,72,.05);
}

.recruitment-hero h1 {
    margin: 4px 0 6px;
    font-size: 30px;
}

.recruitment-hero p {
    max-width: 760px;
    margin: 0;
    color: #758196;
    line-height: 1.55;
}

.recruitment-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.recruitment-stats a {
    padding: 15px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(31,43,72,.04);
}

.recruitment-stats span,
.recruitment-stats strong {
    display: block;
}

.recruitment-stats span {
    color: #8994a5;
    font-size: 12px;
}

.recruitment-stats strong {
    margin-top: 4px;
    font-size: 25px;
}

.recruitment-panel {
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31,43,72,.04);
}

.recruitment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #e9edf3;
}

.recruitment-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
}

.recruitment-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 10px;
    color: #798598;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.recruitment-tabs a.active {
    color: #fff;
    background: #5269e7;
}

.recruitment-search {
    display: flex;
    gap: 7px;
}

.recruitment-search input {
    min-width: 220px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dce3ed;
    border-radius: 11px;
    font-size: 14px;
}

.recruitment-search button {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #5269e7;
    font-weight: 800;
    cursor: pointer;
}

.recruitment-list {
    display: grid;
}

.recruitment-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) minmax(210px, .9fr) minmax(250px, .9fr) minmax(280px, auto);
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f5;
}

.recruitment-card:last-child {
    border-bottom: 0;
}

.recruitment-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.recruitment-person img,
.recruitment-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    object-fit: cover;
    color: #fff;
    background: linear-gradient(135deg, #6378f3, #465bd5);
    font-weight: 900;
}

.recruitment-person > div {
    min-width: 0;
}

.recruitment-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.recruitment-name-row strong {
    font-size: 15px;
}

.recruitment-person > div > span,
.recruitment-person > div > small {
    display: block;
    margin-top: 3px;
}

.recruitment-person > div > span {
    color: #6f7b8f;
    font-size: 13px;
}

.recruitment-person > div > small {
    color: #939dac;
    font-size: 12px;
}

.recruitment-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.recruitment-status.status-new { color: #4055b8; background: #edf1ff; }
.recruitment-status.status-progress { color: #95600c; background: #fff4dc; }
.recruitment-status.status-approved { color: #0a7757; background: #e8f8f2; }
.recruitment-status.status-rejected { color: #a23240; background: #fff0f2; }
.recruitment-status.status-withdrawn { color: #6e7785; background: #f0f2f5; }
.recruitment-status.status-hired { color: #fff; background: #17a474; }

.recruitment-destination span,
.recruitment-destination strong,
.recruitment-destination small {
    display: block;
}

.recruitment-destination span {
    color: #929cac;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
}

.recruitment-destination strong {
    margin-top: 3px;
    font-size: 14px;
}

.recruitment-destination small {
    margin-top: 2px;
    color: #7d8999;
    font-size: 12px;
}

.recruitment-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.recruitment-results > div {
    padding: 9px;
    border-radius: 10px;
    background: #f7f9fc;
    text-align: center;
}

.recruitment-results span,
.recruitment-results strong {
    display: block;
}

.recruitment-results span {
    color: #8b96a7;
    font-size: 10px;
}

.recruitment-results strong {
    margin-top: 2px;
    font-size: 16px;
}

.recruitment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.recruitment-actions form {
    margin: 0;
}

.btn-success-soft {
    color: #087655;
    border: 1px solid #cdeadd;
    background: #edf9f4;
}

.recruitment-hired-badge {
    padding: 7px 10px;
    border-radius: 10px;
    color: #087655;
    background: #eaf8f2;
    font-size: 12px;
    font-weight: 800;
}

.recruitment-empty {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 30px;
    text-align: center;
}

.recruitment-empty strong,
.recruitment-empty span {
    display: block;
}

.recruitment-empty strong {
    font-size: 18px;
}

.recruitment-empty span {
    margin-top: 4px;
    color: #8893a3;
}

.hire-person-summary {
    padding: 13px 15px;
    border-radius: 13px;
    color: #4054bd;
    background: #f0f3ff;
    font-weight: 850;
}

.recruitment-admin-shell {
    min-height: 100vh;
}

.recruitment-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

.recruitment-manager-content {
    width: min(100% - 32px, 1500px);
    margin: 0 auto;
    padding: 28px 0 50px;
}

/* Portal del postulante */
.applicant-portal-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(103, 78, 218, .10), transparent 25%),
        #f4f6fb;
}

.applicant-portal-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.applicant-topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(18px, 4vw, 44px);
    border-bottom: 1px solid #e3e8ef;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
}

.applicant-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.applicant-brand span,
.applicant-brand strong {
    display: block;
}

.applicant-brand span {
    color: #818c9d;
    font-size: 13px;
}

.applicant-content {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 32px 0 50px;
    flex: 1 0 auto;
}

.applicant-identity-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 245px;
    align-items: center;
    gap: 24px;
    min-height: 230px;
    padding: 30px;
    border-radius: 28px;
    color: #fff;
    background:
        linear-gradient(135deg, #19142c 0%, #2a2452 52%, #493a91 100%);
    box-shadow: 0 24px 56px rgba(33,24,70,.19);
}

.applicant-card-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    right: -100px;
    top: -200px;
    border-radius: 50%;
    background: rgba(144, 122, 255, .19);
    box-shadow: 0 0 0 55px rgba(255,255,255,.025);
}

.applicant-photo-wrap,
.applicant-identity-copy,
.applicant-status-panel {
    position: relative;
    z-index: 1;
}

.applicant-photo {
    width: 132px;
    height: 150px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255,255,255,.92);
    border-radius: 28px;
    object-fit: cover;
    background: #f0f2f7;
    box-shadow: 0 16px 35px rgba(0,0,0,.22);
}

.applicant-photo-placeholder {
    color: #fff;
    background: linear-gradient(135deg, #9c7af1, #5a47c8);
    font-size: 34px;
    font-weight: 900;
}

.applicant-identity-copy h1 {
    margin: 5px 0 4px;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -1px;
}

.applicant-identity-copy > p {
    margin: 0;
    color: #c9c2e8;
    font-size: 16px;
}

.applicant-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.applicant-meta-chips span {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #e5e0f4;
    background: rgba(255,255,255,.07);
    font-size: 12px;
}

.applicant-status-panel {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}

.applicant-status-panel > span,
.applicant-status-panel > strong,
.applicant-status-panel > small {
    display: block;
}

.applicant-status-panel > span {
    color: #c7c0e4;
    font-size: 12px;
}

.applicant-status-panel > strong {
    margin-top: 8px;
}

.applicant-status-panel > small {
    margin-top: 8px;
    color: #a99fcb;
    font-size: 12px;
}

.applicant-status {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.applicant-process-card,
.applicant-main-panel,
.applicant-side-panel,
.applicant-approved-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #e0e5ed;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31,43,72,.05);
}

.applicant-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.applicant-section-head h2 {
    margin: 2px 0 0;
    font-size: 21px;
}

.applicant-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.applicant-step {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border-radius: 13px;
    color: #8a95a6;
    background: #f7f9fc;
}

.applicant-step > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #6d7890;
    background: #e8ecf2;
    font-size: 12px;
    font-weight: 900;
}

.applicant-step strong {
    font-size: 13px;
}

.applicant-step.done {
    color: #087455;
    background: #eef9f4;
}

.applicant-step.done > span {
    color: #fff;
    background: #16a575;
}

.applicant-step.current {
    color: #4d45b6;
    background: #f0edff;
}

.applicant-step.current > span {
    color: #fff;
    background: #735cd6;
}

.applicant-process-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 13px 14px;
    border-radius: 13px;
}

.applicant-process-message strong,
.applicant-process-message span {
    display: block;
}

.applicant-process-message span {
    color: inherit;
    opacity: .80;
    font-size: 13px;
}

.applicant-process-message.positive { color: #087455; background: #edf9f4; }
.applicant-process-message.negative { color: #9d3340; background: #fff0f2; }
.applicant-process-message.info { color: #4c45b4; background: #f1eeff; }
.applicant-process-message.neutral { color: #5e6879; background: #f4f6f9; }

.applicant-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
}

.applicant-side-panel {
    display: grid;
    gap: 10px;
    align-content: start;
}

.applicant-side-stat {
    padding: 14px;
    border-radius: 14px;
    background: #f7f9fc;
}

.applicant-side-stat span,
.applicant-side-stat strong {
    display: block;
}

.applicant-side-stat span {
    color: #8994a5;
    font-size: 12px;
}

.applicant-side-stat strong {
    margin-top: 3px;
    font-size: 23px;
}

.applicant-side-stat .small-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: #5547bd;
}

.applicant-evaluation-list {
    display: grid;
    gap: 8px;
}

.applicant-evaluation-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid #e5e9f0;
    border-radius: 13px;
    background: #fbfcfe;
}

.applicant-eval-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #5d4bc3;
    background: #f0edff;
    font-weight: 900;
}

.applicant-evaluation-row strong,
.applicant-evaluation-row span {
    display: block;
}

.applicant-evaluation-row strong {
    font-size: 14px;
}

.applicant-evaluation-row span {
    margin-top: 2px;
    color: #8893a3;
    font-size: 12px;
}

.applicant-empty {
    padding: 26px;
    border: 1px dashed #dbe1e9;
    border-radius: 14px;
    background: #fafbfd;
    text-align: center;
}

.applicant-empty strong,
.applicant-empty span {
    display: block;
}

.applicant-empty span {
    margin-top: 3px;
    color: #8994a5;
    font-size: 13px;
}

.applicant-approved-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.applicant-approved-grid article {
    padding: 15px;
    border: 1px solid #dceae4;
    border-radius: 14px;
    background: #f3fbf7;
}

.applicant-approved-grid span,
.applicant-approved-grid strong,
.applicant-approved-grid small,
.applicant-approved-grid a {
    display: block;
}

.applicant-approved-grid span {
    color: #0c7958;
    font-size: 10px;
    font-weight: 900;
}

.applicant-approved-grid strong {
    margin-top: 4px;
    font-size: 14px;
}

.applicant-approved-grid small {
    margin-top: 4px;
    color: #658277;
}

.applicant-approved-grid a {
    margin-top: 10px;
    color: #5264c9;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1200px) {
    .recruitment-card {
        grid-template-columns: 1fr 1fr;
    }

    .recruitment-actions {
        justify-content: flex-start;
    }

    .recruitment-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .recruitment-hero,
    .recruitment-toolbar,
    .applicant-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .recruitment-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recruitment-card,
    .applicant-identity-card,
    .applicant-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .applicant-photo {
        margin: 0 auto;
    }

    .applicant-identity-copy {
        text-align: center;
    }

    .applicant-meta-chips {
        justify-content: center;
    }

    .applicant-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .applicant-approved-grid {
        grid-template-columns: 1fr;
    }

    .recruitment-search {
        width: 100%;
    }

    .recruitment-search input {
        min-width: 0;
        flex: 1;
    }
}

@media (max-width: 520px) {
    .recruitment-stats,
    .recruitment-results,
    .applicant-stepper {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   V5.11.1 — PUBLICACIÓN DE EVALUACIONES PARA POSTULANTES
   ========================================================== */
.training-applicant-publish-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 2px;
    padding: 14px 16px;
    border: 1px solid #cce8dc;
    border-radius: 14px;
    background: #f1faf6;
}

.training-applicant-publish-note[hidden] {
    display: none !important;
}

.training-applicant-note-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #15a473;
    font-weight: 900;
}

.training-applicant-publish-note strong,
.training-applicant-publish-note span {
    display: block;
}

.training-applicant-publish-note strong {
    color: #096d50;
    font-size: 15px;
}

.training-applicant-publish-note span {
    margin-top: 3px;
    color: #527368;
    font-size: 13px;
    line-height: 1.5;
}

.training-required-tag,
.training-optional-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 4px 7px;
    border-radius: 999px;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 850;
}

.training-required-tag {
    color: #a43a48;
    background: #fff0f2;
}

.training-optional-tag {
    color: #4e61bf;
    background: #eef1ff;
}

.training-optional-tag.is-required {
    color: #9b6410;
    background: #fff4dc;
}


/* ==========================================================
   V5.12 — EXPERIENCIA DE EVALUACIÓN / OPORTUNIDADES / VIDEO
   ========================================================== */

.exam-config-metrics-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.exam-config-metrics > div small {
    display: block;
    margin-top: 2px;
    color: #8a95a6;
    font-size: 11px;
}

.exam-attempt-metric {
    border-color: #d8d1ff !important;
    background: #f6f3ff !important;
}

.exam-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.exam-rule-panel {
    padding: 17px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    background: #fbfcfe;
}

.exam-rule-panel.opportunity-panel {
    border-color: #d9d1ff;
    background: linear-gradient(180deg, #fbfaff 0%, #f5f2ff 100%);
}

.exam-rule-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.exam-rule-panel-head > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #566be4;
    font-size: 13px;
    font-weight: 900;
}

.exam-rule-panel-head strong,
.exam-rule-panel-head small {
    display: block;
}

.exam-rule-panel-head strong { font-size: 15px; }
.exam-rule-panel-head small { margin-top: 2px; color: #8792a3; font-size: 12px; line-height: 1.4; }

.attempt-preset-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 13px;
}

.attempt-preset-row button {
    min-height: 39px;
    border: 1px solid #dce2ed;
    border-radius: 10px;
    color: #59667a;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.attempt-preset-row button.active {
    color: #fff;
    border-color: #5a6fe8;
    background: #596ee8;
    box-shadow: 0 7px 16px rgba(79, 98, 211, .18);
}

.student-attempt-preview {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #d9dff2;
    border-radius: 13px;
    background: #fff;
}

.student-attempt-preview span,
.student-attempt-preview strong,
.student-attempt-preview small {
    display: block;
}

.student-attempt-preview span { color: #8a95a6; font-size: 11px; text-transform: uppercase; font-weight: 850; }
.student-attempt-preview strong { margin-top: 4px; color: #4e59ba; font-size: 14px; line-height: 1.4; }
.student-attempt-preview small { margin-top: 4px; color: #8792a3; font-size: 12px; }

.exam-guidance-box {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    color: #5a6475;
    background: #f0f3f8;
}

.exam-guidance-box > span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #6879dc;
    font-weight: 900;
}

.exam-guidance-box strong,
.exam-guidance-box small { display: block; }
.exam-guidance-box small { margin-top: 2px; line-height: 1.4; }

.learner-attempt-guide {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid #ddd8f4;
    border-radius: 17px;
    background: linear-gradient(135deg, #fbfaff, #f3f0ff);
}

.learner-guide-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #785fe1, #5367d9);
    font-size: 22px;
    font-weight: 900;
}

.learner-attempt-guide h2 {
    margin: 2px 0 3px;
    font-size: 18px;
}

.learner-attempt-guide p {
    margin: 0;
    color: #727e91;
    font-size: 13px;
    line-height: 1.5;
}

.learner-attempt-counter {
    min-width: 105px;
    padding: 11px 14px;
    border: 1px solid #e0ddf3;
    border-radius: 13px;
    background: #fff;
    text-align: center;
}

.learner-attempt-counter strong,
.learner-attempt-counter span { display: block; }
.learner-attempt-counter strong { color: #5447b8; font-size: 25px; }
.learner-attempt-counter span { color: #8b95a5; font-size: 11px; }

.secure-youtube-shell {
    overflow: hidden;
    border-radius: 16px;
    background: #0d111b;
    box-shadow: 0 12px 28px rgba(12, 19, 34, .13);
}

.secure-youtube-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #05070b;
}

.secure-youtube-player,
.secure-youtube-player iframe {
    width: 100% !important;
    height: 100% !important;
}

.secure-youtube-player iframe {
    pointer-events: none !important;
}

.youtube-interaction-shield {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
}

.secure-video-center-play {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 15, 25, .70);
    backdrop-filter: blur(8px);
    font-size: 24px;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}

.secure-youtube-shell.is-playing .secure-video-center-play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
}

.secure-youtube-shell.is-playing .secure-youtube-stage:hover .secure-video-center-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.secure-video-controls {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(120px, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    color: #fff;
    background: #151c29;
}

.secure-video-controls button {
    min-width: 38px;
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #242d3d;
    font-weight: 800;
    cursor: pointer;
}

.secure-video-controls button:hover { background: #344055; }
.secure-video-controls input[type="range"] { width: 100%; accent-color: #6f82f4; }
.secure-video-time { color: #cbd3df; font-size: 12px; font-variant-numeric: tabular-nums; }
.secure-video-note { padding: 8px 12px 10px; color: #8792a5; background: #151c29; font-size: 11px; text-align: center; }

.enhanced-exam-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 18px;
}

.exam-opportunity-card {
    padding: 15px;
    border: 1px solid #ddd8f4;
    border-radius: 15px;
    background: #f7f4ff;
}

.exam-opportunity-card span,
.exam-opportunity-card strong,
.exam-opportunity-card small { display: block; }
.exam-opportunity-card span { color: #8c91a9; font-size: 11px; text-transform: uppercase; font-weight: 850; }
.exam-opportunity-card strong { margin-top: 4px; color: #5548ba; font-size: 16px; }
.exam-opportunity-card small { margin-top: 4px; color: #7c8496; font-size: 12px; line-height: 1.4; }

.exam-student-guide {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: #f7faff;
}

.exam-student-guide > span { font-size: 20px; }
.exam-student-guide strong, .exam-student-guide p { display: block; }
.exam-student-guide p { margin: 3px 0 0; color: #718095; font-size: 13px; line-height: 1.5; }

.training-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(15, 22, 37, .72);
    backdrop-filter: blur(10px);
}

.training-result-overlay.is-open { display: grid; }

.training-result-modal {
    position: relative;
    overflow: hidden;
    width: min(100%, 560px);
    padding: 34px 32px 30px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 28px;
    background: #fff;
    text-align: center;
    box-shadow: 0 30px 90px rgba(10, 20, 40, .30);
    animation: trainingModalIn .36s cubic-bezier(.2,.85,.25,1.15) both;
}

.training-result-overlay.success .training-result-modal {
    background: radial-gradient(circle at 50% 0%, #f2fff9 0, #fff 48%);
}

.training-result-overlay.failed .training-result-modal {
    background: radial-gradient(circle at 50% 0%, #fff8f0 0, #fff 48%);
}

.training-result-close {
    position: absolute;
    z-index: 4;
    right: 16px;
    top: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    color: #778295;
    background: #f1f3f7;
    font-size: 22px;
    cursor: pointer;
}

.training-result-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: #fff;
    font-size: 33px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

.training-result-overlay.success .training-result-icon { background: linear-gradient(135deg, #26c58b, #0f9e6c); }
.training-result-overlay.failed .training-result-icon { background: linear-gradient(135deg, #ff9c58, #ed6f4c); }

.training-result-eyebrow {
    color: #6d72b8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.training-result-modal h2 {
    margin: 6px 0 7px;
    font-size: 29px;
    letter-spacing: -.6px;
}

.training-result-modal > p {
    margin: 0 auto;
    max-width: 440px;
    color: #6f7b8e;
    line-height: 1.55;
}

.training-result-score {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin: 18px 0;
    padding: 10px 16px;
    border-radius: 14px;
    background: #f5f7fb;
}

.training-result-score span { font-size: 31px; font-weight: 900; color: #27344a; }
.training-result-score small { color: #8390a3; font-size: 12px; }

.training-result-guidance {
    padding: 14px;
    border-radius: 14px;
    color: #7b5a35;
    background: #fff7ea;
    text-align: left;
}

.training-result-guidance strong,
.training-result-guidance span { display: block; }
.training-result-guidance span { margin-top: 3px; font-size: 13px; line-height: 1.5; opacity: .86; }

.training-result-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.training-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.training-confetti i {
    position: absolute;
    left: var(--x);
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: #5f72ea;
    transform: rotate(var(--rotate));
    animation: confettiFall 2.6s var(--delay) ease-in forwards;
}

@keyframes trainingModalIn {
    from { opacity: 0; transform: translateY(24px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes confettiFall {
    0% { opacity: 0; transform: translateY(-10px) rotate(var(--rotate)); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateY(520px) rotate(calc(var(--rotate) + 540deg)); }
}

@media (max-width: 1100px) {
    .exam-config-metrics-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .exam-rule-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .learner-attempt-guide,
    .enhanced-exam-intro { grid-template-columns: 1fr; }
    .learner-attempt-counter { text-align: left; }
    .secure-video-controls { grid-template-columns: auto auto auto minmax(100px, 1fr) auto; }
    .secure-video-controls [data-youtube-rewind],
    .secure-video-controls [data-youtube-forward],
    .secure-video-controls [data-youtube-current] { display: none; }
    .training-result-modal { padding: 30px 20px 24px; }
}


/* ==========================================================
   V5.12.1 — DETALLE DE RESPUESTAS / RESULTADOS
   ========================================================== */

.training-results-help {
    margin: 5px 0 0;
    max-width: 760px;
    color: #8390a3;
    font-size: 13px;
    line-height: 1.5;
}

.training-result-row-v121 {
    grid-template-columns:
        minmax(290px, 1.35fr)
        100px
        110px
        145px
        minmax(240px, auto);
}

.training-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.training-no-answers {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    color: #9099a8;
    background: #f3f5f8;
    font-size: 12px;
    font-weight: 750;
}

.answer-review-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 16px;
    padding: 23px 25px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 0%, rgba(112, 128, 244, .28), transparent 28%),
        linear-gradient(135deg, #172136 0%, #1c2a49 56%, #344b91 100%);
    box-shadow: 0 18px 42px rgba(30,43,76,.13);
}

.answer-review-person {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.answer-review-person img,
.answer-review-avatar {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.82);
    border-radius: 20px;
    object-fit: cover;
    color: #fff;
    background: linear-gradient(135deg, #7284f2, #5849cb);
    font-size: 19px;
    font-weight: 900;
}

.answer-review-person h1 {
    margin: 4px 0 3px;
    font-size: clamp(25px, 3vw, 34px);
}

.answer-review-person p {
    margin: 0;
    color: #cbd4e5;
    font-size: 13px;
}

.answer-review-person .eyebrow {
    color: #aebcf8;
}

.answer-review-evaluation {
    min-width: 250px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
}

.answer-review-evaluation span,
.answer-review-evaluation strong,
.answer-review-evaluation small {
    display: block;
}

.answer-review-evaluation span {
    color: #b8c3dd;
    font-size: 11px;
}

.answer-review-evaluation strong {
    margin: 4px 0;
    font-size: 15px;
}

.answer-review-evaluation small {
    color: #cbd4e5;
    font-size: 12px;
}

.answer-attempt-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.answer-attempt-tabs a {
    min-width: 145px;
    padding: 12px 13px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    color: #687589;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.answer-attempt-tabs a span,
.answer-attempt-tabs a strong,
.answer-attempt-tabs a small {
    display: block;
}

.answer-attempt-tabs a span {
    font-size: 11px;
    font-weight: 800;
}

.answer-attempt-tabs a strong {
    margin: 3px 0 1px;
    color: #1d2635;
    font-size: 22px;
}

.answer-attempt-tabs a small {
    color: #8a95a5;
    font-size: 11px;
}

.answer-attempt-tabs a.active {
    border-color: #697ded;
    background: #f0f3ff;
    box-shadow: 0 0 0 3px rgba(84,105,227,.08);
}

.answer-attempt-tabs a.active strong {
    color: #4c5dcc;
}

.answer-attempt-summary {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(130px, .75fr));
    gap: 10px;
    margin-bottom: 16px;
}

.answer-summary-score,
.answer-summary-metric {
    min-height: 105px;
    padding: 15px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31,43,72,.04);
}

.answer-summary-score span,
.answer-summary-score strong,
.answer-summary-score small,
.answer-summary-metric span,
.answer-summary-metric strong {
    display: block;
}

.answer-summary-score span,
.answer-summary-metric span {
    color: #8994a5;
    font-size: 11px;
    font-weight: 750;
}

.answer-summary-score strong {
    margin: 4px 0 1px;
    font-size: 28px;
}

.answer-summary-score small {
    color: #8994a5;
    font-size: 12px;
}

.answer-summary-score.passed {
    border-left: 4px solid #17a574;
}

.answer-summary-score.failed {
    border-left: 4px solid #d65b67;
}

.answer-summary-metric strong {
    margin-top: 7px;
    font-size: 24px;
}

.answer-summary-metric.correct strong { color: #0d8b65; }
.answer-summary-metric.wrong strong { color: #bd3f4d; }
.answer-summary-metric.blank strong { color: #8a95a5; }

.answer-summary-metric.date strong {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
}

.answer-review-list {
    display: grid;
    gap: 13px;
}

.answer-question-card {
    overflow: hidden;
    padding: 20px;
    border: 1px solid #e1e6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.045);
}

.answer-question-card.correct {
    border-left: 5px solid #19a676;
}

.answer-question-card.wrong {
    border-left: 5px solid #d85664;
}

.answer-question-card.blank {
    border-left: 5px solid #a1a9b6;
}

.answer-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.answer-question-number {
    display: flex;
    align-items: center;
    gap: 9px;
}

.answer-question-number > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #566bea;
    font-weight: 900;
}

.answer-question-number small,
.answer-question-number strong {
    display: block;
}

.answer-question-number small {
    color: #8e98a8;
    font-size: 10px;
}

.answer-question-number strong {
    margin-top: 1px;
    font-size: 13px;
}

.answer-question-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.answer-question-status.correct {
    color: #087756;
    background: #eaf8f3;
}

.answer-question-status.wrong {
    color: #a9313f;
    background: #fff0f2;
}

.answer-question-status.blank {
    color: #687485;
    background: #f0f2f5;
}

.answer-question-card h2 {
    margin: 0 0 14px;
    color: #1b2433;
    font-size: 18px;
    line-height: 1.45;
}

.answer-option-review {
    display: grid;
    gap: 7px;
}

.answer-option-row {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 11px;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    background: #fafbfd;
}

.answer-option-row.is-correct {
    border-color: #c9e8dc;
    background: #f0faf6;
}

.answer-option-row.is-selected-wrong {
    border-color: #efc9ce;
    background: #fff4f5;
}

.answer-option-row.is-selected-correct {
    border-color: #a9dfcd;
    background: #e9f8f2;
    box-shadow: 0 0 0 2px rgba(21,165,116,.05);
}

.answer-option-indicator {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #737f91;
    background: #eef1f5;
    font-weight: 900;
}

.is-correct .answer-option-indicator,
.is-selected-correct .answer-option-indicator {
    color: #fff;
    background: #17a574;
}

.is-selected-wrong .answer-option-indicator {
    color: #fff;
    background: #d65563;
}

.answer-option-text {
    color: #334054;
    font-size: 14px;
}

.answer-option-tags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.answer-tag {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
}

.answer-tag.selected {
    color: #4d5fc6;
    background: #edf1ff;
}

.answer-tag.correct {
    color: #087756;
    background: #dff5ed;
}

.answer-question-footer {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #edf1f5;
}

.answer-question-footer span,
.answer-question-footer strong {
    display: block;
}

.answer-question-footer span {
    color: #8b96a6;
    font-size: 11px;
}

.answer-question-footer strong {
    margin-top: 2px;
    font-size: 13px;
}

.answer-correct-copy strong {
    color: #087756;
}

.answer-explanation {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 12px;
    color: #5f6c7e;
    background: #f5f7fa;
}

.answer-explanation span {
    display: block;
    color: #4051b0;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.answer-explanation p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .training-result-row-v121 {
        grid-template-columns: 1fr 90px 100px 130px;
    }

    .training-result-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .answer-attempt-summary {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .answer-summary-score {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .answer-review-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .answer-review-evaluation {
        min-width: 0;
    }

    .answer-attempt-summary,
    .answer-question-footer {
        grid-template-columns: 1fr;
    }

    .answer-summary-score {
        grid-column: auto;
    }

    .answer-option-row {
        grid-template-columns: 30px minmax(0,1fr);
    }

    .answer-option-tags {
        grid-column: 2;
        justify-content: flex-start;
    }
}


/* ==========================================================
   V5.13 — PORTAL COMPLETO DEL COLABORADOR
   ========================================================== */

.employee-panel-body {
    min-height: 100vh;
    margin: 0;
    background: #f4f6fa;
}

.employee-panel-shell {
    min-height: 100vh;
    display: flex;
}

.employee-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 272px;
    display: flex;
    flex-direction: column;
    color: #dce5f3;
    background:
        radial-gradient(circle at 20% 0%, rgba(91,109,234,.17), transparent 28%),
        linear-gradient(180deg, #101a2d 0%, #0b1423 100%);
    box-shadow: 18px 0 45px rgba(21,31,50,.08);
    transition: width .2s ease, transform .2s ease;
}

.employee-side-head {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.employee-side-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
}

.employee-side-brand-copy strong,
.employee-side-brand-copy span {
    display: block;
}

.employee-side-brand-copy strong {
    font-size: 17px;
}

.employee-side-brand-copy span {
    margin-top: 2px;
    color: #8797ae;
    font-size: 12px;
}

.employee-side-nav {
    display: grid;
    gap: 5px;
    padding: 16px 12px;
    overflow-y: auto;
}

.employee-side-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border-radius: 12px;
    color: #b9c5d6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
}

.employee-side-nav a b {
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    color: #9fb0c8;
    font-size: 17px;
}

.employee-side-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.055);
}

.employee-side-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #596fea, #4659d8);
    box-shadow: 0 9px 22px rgba(58,78,194,.26);
}

.employee-side-nav a.active b {
    color: #fff;
}

.employee-side-bottom {
    margin-top: auto;
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.employee-side-admin-link {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 10px;
    color: #d8e0ff;
    background: rgba(93,111,235,.17);
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

.employee-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-side-avatar,
.employee-panel-avatar {
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #6479f2, #495bd7);
    font-weight: 900;
}

.employee-side-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
}

.employee-side-avatar img,
.employee-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-side-user-copy,
.employee-panel-user-copy {
    min-width: 0;
}

.employee-side-user-copy strong,
.employee-side-user-copy span,
.employee-panel-user-copy strong,
.employee-panel-user-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-side-user-copy strong {
    color: #fff;
    font-size: 13px;
}

.employee-side-user-copy span {
    margin-top: 2px;
    color: #8494aa;
    font-size: 11px;
}

.employee-panel-main {
    width: calc(100% - 272px);
    min-width: 0;
    margin-left: 272px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin .2s ease, width .2s ease;
}

.employee-panel-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px clamp(18px, 3vw, 34px);
    border-bottom: 1px solid #e1e6ee;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
}

.employee-mobile-menu {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #dfe5ee;
    border-radius: 11px;
    background: #fff;
    font-size: 19px;
    cursor: pointer;
}

.employee-panel-heading {
    min-width: 0;
    flex: 1;
}

.employee-panel-heading > span {
    display: block;
    color: #8792a3;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.employee-panel-heading h1 {
    margin: 2px 0 0;
    color: #172235;
    font-size: 24px;
}

.employee-panel-heading p {
    margin: 3px 0 0;
    color: #8190a4;
    font-size: 13px;
}

.employee-panel-userbar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.employee-panel-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
}

.employee-panel-user-copy strong {
    color: #1b2534;
    font-size: 13px;
}

.employee-panel-user-copy span {
    margin-top: 2px;
    max-width: 190px;
    color: #8390a3;
    font-size: 11px;
}

.employee-logout-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-left: 5px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    color: #5f6d82;
    background: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
}

.employee-panel-content {
    width: min(calc(100% - 36px), 1420px);
    margin: 0 auto;
    padding: 26px 0 46px;
    flex: 1 0 auto;
}

.worker-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 128px minmax(0,1fr) 260px;
    align-items: center;
    gap: 22px;
    min-height: 215px;
    padding: 28px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 95% 0%, rgba(103,124,235,.33), transparent 29%),
        linear-gradient(135deg, #142033 0%, #1b2c4b 58%, #344b8e 100%);
    box-shadow: 0 20px 48px rgba(26,41,75,.14);
}

.worker-hero-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -140px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.025);
}

.worker-hero-photo,
.worker-hero-main,
.worker-hero-company {
    position: relative;
    z-index: 1;
}

.worker-hero-photo img,
.worker-hero-photo > div {
    width: 118px;
    height: 138px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255,255,255,.92);
    border-radius: 25px;
    object-fit: cover;
    background: linear-gradient(135deg, #6178f2, #4d57cd);
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 15px 30px rgba(0,0,0,.17);
}

.worker-hero-kicker {
    color: #b8c6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
}

.worker-hero-main h2 {
    margin: 5px 0 3px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
}

.worker-hero-main > p {
    margin: 0;
    color: #c7d1e4;
}

.worker-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.worker-hero-tags span {
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: #e0e6f1;
    background: rgba(255,255,255,.06);
    font-size: 11px;
}

.worker-hero-company {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    background: rgba(255,255,255,.075);
}

.worker-hero-company span,
.worker-hero-company strong,
.worker-hero-company small {
    display: block;
}

.worker-hero-company span {
    color: #b9c5da;
    font-size: 11px;
}

.worker-hero-company strong {
    margin: 6px 0 3px;
    font-size: 16px;
}

.worker-hero-company small {
    color: #b8c3d6;
    font-size: 11px;
}

.worker-dashboard-stats,
.worker-small-stats {
    display: grid;
    gap: 11px;
    margin-top: 16px;
}

.worker-dashboard-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.worker-dashboard-stats a,
.worker-small-stats article {
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(31,43,72,.045);
}

.worker-dashboard-stats span,
.worker-dashboard-stats strong,
.worker-dashboard-stats small,
.worker-small-stats span,
.worker-small-stats strong {
    display: block;
}

.worker-dashboard-stats span,
.worker-small-stats span {
    color: #8995a6;
    font-size: 11px;
}

.worker-dashboard-stats strong,
.worker-small-stats strong {
    margin: 5px 0 2px;
    color: #182334;
    font-size: 27px;
}

.worker-dashboard-stats small {
    color: #8a96a6;
    font-size: 11px;
}

.worker-primary-grid,
.worker-profile-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-top: 16px;
}

.worker-section-card {
    padding: 20px;
    border: 1px solid #e0e5ed;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.045);
}

.worker-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.worker-section-head h3 {
    margin: 2px 0 0;
    color: #1a2434;
    font-size: 19px;
}

.worker-section-head > a {
    color: #5164ce;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

.worker-attendance-timeline {
    display: grid;
    gap: 9px;
}

.worker-attendance-timeline > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #f7f9fc;
}

.worker-attendance-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #18a677;
    box-shadow: 0 0 0 5px rgba(24,166,119,.10);
}

.worker-attendance-timeline strong,
.worker-attendance-timeline small {
    display: block;
}

.worker-attendance-timeline strong {
    font-size: 13px;
}

.worker-attendance-timeline small {
    margin-top: 2px;
    color: #8994a4;
    font-size: 11px;
}

.worker-empty-state {
    padding: 24px;
    border: 1px dashed #dce2ea;
    border-radius: 14px;
    background: #fafbfd;
    text-align: center;
}

.worker-empty-state strong,
.worker-empty-state span {
    display: block;
}

.worker-empty-state span {
    margin-top: 4px;
    color: #8a95a5;
    font-size: 12px;
}

.worker-fact-list {
    display: grid;
    gap: 8px;
}

.worker-fact-list.two-columns {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.worker-fact-list > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 11px;
    background: #f7f9fc;
}

.worker-fact-list span,
.worker-fact-list strong {
    display: block;
}

.worker-fact-list span {
    color: #8a96a7;
    font-size: 10px;
}

.worker-fact-list strong {
    margin-top: 2px;
    overflow: hidden;
    color: #263246;
    text-overflow: ellipsis;
    font-size: 13px;
}

.worker-module-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 11px;
    margin-top: 16px;
}

.worker-module-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(31,43,72,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.worker-module-card:hover {
    transform: translateY(-2px);
    border-color: #cfd7f6;
    box-shadow: 0 12px 26px rgba(50,68,132,.08);
}

.worker-module-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #4f60cc;
    background: #eff2ff;
    font-weight: 900;
}

.worker-module-card strong,
.worker-module-card p {
    display: block;
}

.worker-module-card strong {
    color: #202b3d;
    font-size: 14px;
}

.worker-module-card p {
    margin: 3px 0 0;
    color: #8792a3;
    font-size: 11px;
    line-height: 1.4;
}

.worker-module-card em {
    color: #5366d0;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
}

.worker-profile-banner,
.worker-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding: 21px 23px;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 0%, rgba(86,108,233,.10), transparent 29%),
        #fff;
    box-shadow: 0 8px 22px rgba(31,43,72,.04);
}

.worker-profile-banner {
    color: #fff;
    border-color: transparent;
    background:
        radial-gradient(circle at 90% 0%, rgba(123,142,248,.28), transparent 29%),
        linear-gradient(135deg,#172135,#24365c 65%,#40579c);
}

.worker-profile-banner-photo img,
.worker-profile-banner-photo span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 20px;
    object-fit: cover;
    background: #5c6ee8;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.worker-profile-banner > div:nth-child(2) {
    flex: 1;
}

.worker-profile-banner h2,
.worker-page-hero h2 {
    margin: 3px 0;
    font-size: 25px;
}

.worker-profile-banner p,
.worker-page-hero p {
    margin: 0;
    color: #8390a2;
    font-size: 13px;
}

.worker-profile-banner p {
    color: #c8d2e5;
}

.worker-profile-code {
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

.worker-profile-code span,
.worker-profile-code strong {
    display: block;
}

.worker-profile-code span {
    color: #c2cde0;
    font-size: 10px;
}

.worker-profile-code strong {
    margin-top: 3px;
    font-size: 13px;
}

.worker-soft-pill,
.worker-page-badge {
    padding: 8px 11px;
    border-radius: 999px;
    color: #5364c6;
    background: #eef1ff;
    font-size: 12px;
    font-weight: 850;
}

.worker-vacation-list {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.worker-vacation-list > div {
    padding: 12px;
    border-radius: 12px;
    background: #f7f9fc;
}

.worker-vacation-list span,
.worker-vacation-list strong,
.worker-vacation-list small {
    display: block;
}

.worker-vacation-list span {
    color: #8190a3;
    font-size: 10px;
}

.worker-vacation-list strong {
    margin: 3px 0;
    font-size: 14px;
}

.worker-vacation-list small {
    color: #919cab;
    font-size: 10px;
}

.worker-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid #dce5f9;
    border-radius: 13px;
    color: #516079;
    background: #f5f8ff;
    font-size: 12px;
}

.worker-info-note strong {
    flex: 0 0 auto;
    color: #4255bd;
}

.worker-year-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 14px;
    overflow-x: auto;
}

.worker-year-tabs a {
    min-width: 70px;
    min-height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe5ee;
    border-radius: 11px;
    color: #6f7c90;
    background: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.worker-year-tabs a.active {
    color: #fff;
    border-color: #5268e7;
    background: #5268e7;
}

.worker-empty-card {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 35px;
    border: 1px solid #e0e5ed;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.worker-empty-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 18px;
    color: #5365cc;
    background: #eff2ff;
    font-size: 25px;
    font-weight: 900;
}

.worker-empty-card h3 {
    margin: 0;
    font-size: 19px;
}

.worker-empty-card p {
    max-width: 520px;
    margin: 5px 0 0;
    color: #8994a4;
    font-size: 13px;
}

.worker-payslip-grid {
    display: grid;
    gap: 10px;
}

.worker-payslip-card {
    display: grid;
    grid-template-columns: 75px minmax(0,1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    border: 1px solid #e0e5ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.04);
}

.worker-payslip-month {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 16px;
    color: #5062c9;
    background: #eef1ff;
}

.worker-payslip-month span {
    font-size: 10px;
    font-weight: 900;
}

.worker-payslip-month strong {
    margin-top: -2px;
    font-size: 19px;
}

.worker-payslip-copy span,
.worker-payslip-copy h3,
.worker-payslip-copy small {
    display: block;
}

.worker-payslip-copy span {
    color: #8c97a7;
    font-size: 10px;
}

.worker-payslip-copy h3 {
    margin: 2px 0;
    font-size: 16px;
}

.worker-payslip-copy small {
    color: #8290a2;
}

.worker-payslip-actions {
    display: flex;
    gap: 7px;
}

.worker-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worker-month-nav a,
.worker-month-nav span {
    min-height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef1ff;
}

.worker-month-nav a {
    width: 38px;
    color: #5063ca;
    text-decoration: none;
    font-weight: 900;
}

.worker-month-nav span {
    min-width: 105px;
    padding: 0 12px;
    color: #5364c6;
    font-size: 12px;
    font-weight: 850;
}

.worker-small-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 14px;
}

.worker-attendance-history {
    display: grid;
    gap: 9px;
}

.worker-attendance-history > article {
    display: grid;
    grid-template-columns: 74px minmax(0,1fr);
    gap: 14px;
    padding: 13px;
    border: 1px solid #e0e5ed;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.worker-attendance-date {
    display: grid;
    place-items: center;
    align-content: center;
    padding: 8px;
    border-radius: 12px;
    background: #f1f4ff;
}

.worker-attendance-date span,
.worker-attendance-date strong,
.worker-attendance-date small {
    display: block;
}

.worker-attendance-date span {
    color: #5f70cf;
    font-size: 10px;
    text-transform: uppercase;
}

.worker-attendance-date strong {
    margin: -2px 0;
    font-size: 25px;
}

.worker-attendance-date small {
    color: #7f8aa0;
    font-size: 9px;
}

.worker-attendance-day-marks {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
}

.worker-attendance-day-marks > div {
    padding: 10px;
    border-radius: 11px;
    background: #f8fafc;
}

.worker-attendance-day-marks span,
.worker-attendance-day-marks strong,
.worker-attendance-day-marks small {
    display: block;
}

.worker-attendance-day-marks span {
    color: #8491a4;
    font-size: 9px;
}

.worker-attendance-day-marks strong {
    margin: 3px 0;
    font-size: 14px;
}

.worker-attendance-day-marks small {
    color: #909cab;
    font-size: 9px;
}

.worker-document-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
}

.worker-document-grid article {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid #e0e5ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.worker-document-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #5164ca;
    background: #eff2ff;
    font-size: 11px;
    font-weight: 900;
}

.worker-document-grid h3 {
    margin: 0;
    font-size: 14px;
}

.worker-document-grid p {
    margin: 3px 0;
    color: #8995a6;
    font-size: 11px;
}

.worker-document-grid small {
    color: #9aa4b1;
    font-size: 10px;
}

.worker-contact-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 11px;
}

.worker-contact-grid article {
    padding: 17px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.worker-contact-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 13px;
    color: #4f62cb;
    background: #eef1ff;
    font-size: 18px;
}

.worker-contact-grid article > span {
    color: #8793a4;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.worker-contact-grid h3 {
    margin: 4px 0 2px;
    font-size: 16px;
}

.worker-contact-grid p {
    margin: 0;
    color: #738094;
    font-size: 12px;
}

.worker-contact-grid small {
    display: block;
    margin-top: 5px;
    color: #8d98a7;
    font-size: 11px;
}

.worker-contact-grid a {
    display: inline-flex;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #fff;
    background: #5267df;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

.sidebar-collapsed .employee-side {
    width: 84px;
}

.sidebar-collapsed .employee-panel-main {
    width: calc(100% - 84px);
    margin-left: 84px;
}

.sidebar-collapsed .employee-side-brand-copy,
.sidebar-collapsed .employee-side-nav a span,
.sidebar-collapsed .employee-side-user-copy,
.sidebar-collapsed .employee-side-admin-link {
    display: none;
}

.sidebar-collapsed .employee-side-brand,
.sidebar-collapsed .employee-side-nav a,
.sidebar-collapsed .employee-side-user {
    justify-content: center;
}

.sidebar-collapsed .employee-side-nav a {
    padding: 0;
}

@media (max-width: 1080px) {
    .worker-dashboard-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .worker-module-grid,
    .worker-contact-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .worker-attendance-day-marks {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .worker-vacation-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 860px) {
    .employee-side,
    .sidebar-collapsed .employee-side {
        width: 272px;
        transform: translateX(-100%);
    }

    .sidebar-open .employee-side {
        transform: translateX(0);
    }

    .employee-panel-main,
    .sidebar-collapsed .employee-panel-main {
        width: 100%;
        margin-left: 0;
    }

    .employee-mobile-menu {
        display: grid;
        place-items: center;
    }

    .worker-hero-card {
        grid-template-columns: 100px minmax(0,1fr);
    }

    .worker-hero-photo img,
    .worker-hero-photo > div {
        width: 92px;
        height: 108px;
        border-radius: 20px;
    }

    .worker-hero-company {
        grid-column: 1 / -1;
    }

    .worker-primary-grid,
    .worker-profile-columns {
        grid-template-columns: 1fr;
    }

    .worker-document-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .employee-panel-topbar {
        min-height: 76px;
        padding: 10px 12px;
    }

    .employee-panel-heading p,
    .employee-panel-user-copy {
        display: none;
    }

    .employee-panel-heading h1 {
        font-size: 18px;
    }

    .employee-panel-content {
        width: min(calc(100% - 20px), 1420px);
        padding-top: 14px;
    }

    .worker-hero-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 20px;
    }

    .worker-hero-photo {
        display: flex;
        justify-content: center;
    }

    .worker-hero-tags {
        justify-content: center;
    }

    .worker-dashboard-stats,
    .worker-module-grid,
    .worker-small-stats,
    .worker-contact-grid,
    .worker-fact-list.two-columns,
    .worker-vacation-list {
        grid-template-columns: 1fr;
    }

    .worker-payslip-card,
    .worker-document-grid article,
    .worker-attendance-history > article {
        grid-template-columns: 1fr;
    }

    .worker-payslip-actions {
        width: 100%;
    }

    .worker-payslip-actions .btn {
        flex: 1;
    }

    .worker-attendance-day-marks {
        grid-template-columns: 1fr;
    }

    .worker-profile-banner,
    .worker-page-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .worker-profile-code {
        width: fit-content;
    }
}


/* ==========================================================
   V5.14 — BOLETAS DE PAGO / CARGA MASIVA
   ========================================================== */

.payroll-admin-shell {
    min-height: 100vh;
}

.payroll-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
}

.payroll-manager-content {
    width: min(calc(100% - 32px), 1500px);
    margin: 0 auto;
    padding: 28px 0 50px;
}

.payroll-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 26px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 91% 0%, rgba(78,105,232,.12), transparent 29%),
        #fff;
    box-shadow: 0 9px 26px rgba(31,43,72,.045);
}

.payroll-hero h1 {
    margin: 4px 0 5px;
    font-size: 30px;
}

.payroll-hero p {
    max-width: 790px;
    margin: 0;
    color: #7f8b9e;
    line-height: 1.5;
}

.payroll-tabs {
    display: flex;
    gap: 6px;
    margin: 14px 0;
    padding: 6px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}

.payroll-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    color: #778397;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.payroll-tabs a.active {
    color: #fff;
    background: #5268e7;
    box-shadow: 0 7px 18px rgba(67,88,204,.20);
}

.payroll-filter-card,
.payroll-directory,
.payroll-upload-card,
.payroll-preview-head,
.payroll-lot-detail {
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.payroll-filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.payroll-filter-form .form-field {
    min-width: 180px;
    margin: 0;
}

.payroll-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin: 14px 0;
}

.payroll-stats article {
    min-height: 105px;
    padding: 15px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.payroll-stats article.good {
    border-left: 4px solid #18a575;
}

.payroll-stats article.warn {
    border-left: 4px solid #e2a33d;
}

.payroll-stats span,
.payroll-stats strong,
.payroll-stats small {
    display: block;
}

.payroll-stats span {
    color: #8894a5;
    font-size: 11px;
}

.payroll-stats strong {
    margin: 4px 0 2px;
    font-size: 27px;
}

.payroll-stats small {
    color: #939dac;
    font-size: 11px;
}

.payroll-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.payroll-section-head h2 {
    margin: 2px 0 0;
    font-size: 21px;
}

.payroll-worker-list {
    display: grid;
    border-top: 1px solid #edf0f4;
}

.payroll-worker-list article {
    display: grid;
    grid-template-columns: minmax(290px,1fr) 120px 150px minmax(160px,auto);
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 11px 2px;
    border-bottom: 1px solid #edf0f4;
}

.payroll-worker-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.payroll-worker-person > div {
    min-width: 0;
}

.payroll-worker-person strong,
.payroll-worker-person small {
    display: block;
}

.payroll-worker-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.payroll-worker-person small {
    margin-top: 2px;
    color: #8a95a5;
    font-size: 11px;
}

.payroll-status {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.payroll-status.ready {
    color: #087454;
    background: #e9f8f2;
}

.payroll-status.pending {
    color: #9b6610;
    background: #fff4df;
}

.payroll-load-date {
    color: #8793a3;
    font-size: 11px;
}

.payroll-row-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.payroll-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    text-align: center;
}

.payroll-empty strong,
.payroll-empty span {
    display: block;
}

.payroll-empty span {
    margin-top: 4px;
    color: #8a95a5;
    font-size: 12px;
}

.payroll-upload-card {
    max-width: 1180px;
    margin: 0 auto;
}

.payroll-upload-intro h2 {
    margin: 3px 0 5px;
    font-size: 23px;
}

.payroll-upload-intro p {
    margin: 0;
    color: #7f8b9d;
}

.payroll-period-grid {
    margin-top: 18px;
}

.payroll-drop-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.payroll-dropzone {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 22px;
    border: 2px dashed #cfd7e7;
    border-radius: 18px;
    background: #fafbfd;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.payroll-dropzone:hover {
    border-color: #7081ec;
    background: #f4f6ff;
}

.payroll-dropzone.alt {
    background: #fbfcff;
}

.payroll-dropzone input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payroll-drop-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #5063c8;
    background: #edf1ff;
    font-size: 12px;
    font-weight: 900;
}

.payroll-dropzone strong {
    font-size: 16px;
}

.payroll-dropzone small {
    max-width: 400px;
    color: #8995a6;
    line-height: 1.45;
}

.payroll-dropzone em {
    margin-top: 5px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #5164ca;
    background: #edf1ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.payroll-rule-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #cfe8de;
    border-radius: 13px;
    color: #426d5f;
    background: #f2fbf7;
    font-size: 12px;
}

.payroll-rule-card b {
    flex: 0 0 auto;
    color: #087455;
}

.payroll-upload-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.payroll-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.payroll-preview-head h2 {
    margin: 3px 0;
}

.payroll-preview-head p {
    margin: 0;
    color: #8793a4;
}

.payroll-preview-counts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.payroll-preview-counts span {
    padding: 7px 9px;
    border-radius: 999px;
    color: #087455;
    background: #eaf8f2;
    font-size: 11px;
}

.payroll-preview-counts span.existing {
    color: #8a5d0c;
    background: #fff3db;
}

.payroll-preview-counts span.error {
    color: #a43040;
    background: #fff0f2;
}

.payroll-preview-list {
    display: grid;
    gap: 8px;
}

.payroll-preview-list article {
    display: grid;
    grid-template-columns: minmax(280px,1.2fr) minmax(240px,1fr) 180px;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 12px 14px;
    border: 1px solid #e1e6ee;
    border-radius: 14px;
    background: #fff;
}

.payroll-preview-list article.preview-listo {
    border-left: 4px solid #18a575;
}

.payroll-preview-list article.preview-existente {
    border-left: 4px solid #e1a03a;
}

.payroll-preview-list article.preview-documento_no_encontrado,
.payroll-preview-list article.preview-duplicado,
.payroll-preview-list article.preview-nombre_invalido,
.payroll-preview-list article.preview-archivo_invalido {
    border-left: 4px solid #d65a67;
}

.payroll-preview-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.payroll-pdf-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #b33846;
    background: #fff0f2;
    font-size: 10px;
    font-weight: 900;
}

.payroll-pdf-icon.small {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.payroll-preview-file > div {
    min-width: 0;
}

.payroll-preview-file strong,
.payroll-preview-file small,
.payroll-preview-person strong,
.payroll-preview-person small {
    display: block;
}

.payroll-preview-file strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.payroll-preview-file small,
.payroll-preview-person small {
    margin-top: 2px;
    color: #8a95a5;
    font-size: 10px;
}

.payroll-preview-person strong {
    font-size: 13px;
}

.payroll-preview-status {
    justify-self: end;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

.payroll-preview-status.status-listo {
    color: #087455;
    background: #e9f8f2;
}

.payroll-preview-status.status-existente {
    color: #8a5d0c;
    background: #fff3db;
}

.payroll-preview-status:not(.status-listo):not(.status-existente) {
    color: #a5303f;
    background: #fff0f2;
}

.payroll-confirm-card {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
}

.payroll-confirm-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payroll-duplicate-policy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: 10px;
    font-size: 11px;
}

.payroll-duplicate-policy strong {
    width: 100%;
    color: #7b5a1d;
}

.payroll-duplicate-policy label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #657185;
}

.payroll-lot-list {
    display: grid;
    gap: 8px;
}

.payroll-lot-list article {
    display: grid;
    grid-template-columns: minmax(260px,1fr) minmax(280px,auto) 135px auto;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 12px 13px;
    border: 1px solid #e4e8ef;
    border-radius: 13px;
    background: #fafbfd;
}

.payroll-lot-list article.active {
    border-color: #7383ed;
    background: #f2f4ff;
}

.payroll-lot-list article > div:first-child span,
.payroll-lot-list article > div:first-child strong,
.payroll-lot-list article > div:first-child small {
    display: block;
}

.payroll-lot-list article > div:first-child span {
    color: #5365ca;
    font-size: 10px;
    font-weight: 850;
}

.payroll-lot-list article > div:first-child strong {
    margin: 2px 0;
    font-size: 13px;
}

.payroll-lot-list article > div:first-child small {
    color: #8994a4;
    font-size: 10px;
}

.payroll-lot-metrics {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.payroll-lot-metrics span {
    padding: 6px 8px;
    border-radius: 9px;
    color: #667286;
    background: #eef1f5;
    font-size: 10px;
}

.payroll-lot-metrics span.good {
    color: #087455;
    background: #e9f8f2;
}

.payroll-lot-metrics span.bad {
    color: #a5303f;
    background: #fff0f2;
}

.payroll-lot-state {
    width: fit-content;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

.payroll-lot-state.state-procesado {
    color: #087455;
    background: #e9f8f2;
}

.payroll-lot-state.state-con_errores {
    color: #8d5d0b;
    background: #fff3db;
}

.payroll-lot-detail {
    margin-top: 12px;
}

.payroll-error-list {
    display: grid;
    gap: 7px;
}

.payroll-error-list article {
    display: grid;
    grid-template-columns: 36px minmax(220px,1fr) 180px minmax(260px,1.3fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    background: #fff7f8;
}

.payroll-error-list strong,
.payroll-error-list small {
    display: block;
}

.payroll-error-list strong {
    font-size: 12px;
}

.payroll-error-list small,
.payroll-error-list p,
.payroll-error-list > article > span {
    color: #788496;
    font-size: 10px;
}

.payroll-error-list p {
    margin: 0;
}

.payroll-success-box {
    padding: 16px;
    border: 1px solid #cfe8dd;
    border-radius: 12px;
    color: #087455;
    background: #f1faf6;
    font-weight: 800;
}

.check-card {
    min-height: 64px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fafbfd;
}

.check-card input {
    margin-top: 3px;
}

.check-card strong,
.check-card small {
    display: block;
}

.check-card small {
    margin-top: 2px;
    color: #8793a4;
    font-size: 11px;
}

@media (max-width: 1120px) {
    .payroll-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .payroll-worker-list article,
    .payroll-lot-list article {
        grid-template-columns: 1fr 120px 150px;
    }

    .payroll-row-actions,
    .payroll-lot-list article > a {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .payroll-preview-list article {
        grid-template-columns: 1fr 1fr;
    }

    .payroll-preview-status {
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .payroll-hero,
    .payroll-preview-head,
    .payroll-confirm-card {
        align-items: stretch;
        flex-direction: column;
    }

    .payroll-stats,
    .payroll-drop-grid {
        grid-template-columns: 1fr;
    }

    .payroll-worker-list article,
    .payroll-preview-list article,
    .payroll-lot-list article,
    .payroll-error-list article {
        grid-template-columns: 1fr;
    }

    .payroll-confirm-form {
        align-items: stretch;
        flex-direction: column;
    }

    .payroll-preview-status {
        justify-self: start;
    }

    .payroll-lot-metrics {
        justify-content: flex-start;
    }
}


/* ==========================================================
   V5.15 — DOCUMENTOS MODELO
   ========================================================== */

.docs-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(84,105,230,.12), transparent 30%),
        #fff;
    box-shadow: 0 9px 26px rgba(31,43,72,.045);
}

.docs-hero h1 {
    margin: 4px 0 5px;
    font-size: 30px;
}

.docs-hero p {
    max-width: 800px;
    margin: 0;
    color: #7e8a9d;
    line-height: 1.55;
}

.docs-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0;
}

.docs-stats a {
    padding: 15px;
    border: 1px solid #e0e5ed;
    border-radius: 16px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.docs-stats span,
.docs-stats strong {
    display: block;
}

.docs-stats span {
    color: #8994a5;
    font-size: 11px;
}

.docs-stats strong {
    margin-top: 4px;
    font-size: 27px;
}

.docs-panel {
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31,43,72,.04);
}

.docs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8ecf2;
}

.docs-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
}

.docs-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 10px;
    color: #788498;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.docs-tabs a.active {
    color: #fff;
    background: #5268e7;
}

.docs-search {
    display: flex;
    gap: 7px;
}

.docs-search input {
    min-width: 220px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dce3ed;
    border-radius: 11px;
    font-size: 13px;
}

.docs-search button {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #5268e7;
    font-weight: 850;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px;
    padding: 16px;
}

.docs-card {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 17px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.docs-card.is-inactive {
    opacity: .72;
    background: #fafbfd;
}

.docs-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.docs-file-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #5264ca;
    background: #eff2ff;
    font-size: 10px;
    font-weight: 900;
}

.docs-file-icon.type-pdf {
    color: #b13a48;
    background: #fff0f2;
}

.docs-card-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.docs-status,
.docs-scope {
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.docs-status.active {
    color: #087454;
    background: #e9f8f2;
}

.docs-status.inactive {
    color: #6f7a8b;
    background: #eef1f5;
}

.docs-scope.global {
    color: #4658bb;
    background: #edf1ff;
}

.docs-scope.limited {
    color: #8b5b0b;
    background: #fff3db;
}

.docs-card-copy {
    padding: 16px 0;
    flex: 1;
}

.docs-card-copy h3 {
    margin: 0;
    font-size: 17px;
}

.docs-card-copy p {
    min-height: 42px;
    margin: 6px 0 10px;
    color: #7f8b9e;
    font-size: 12px;
    line-height: 1.45;
}

.docs-file-name {
    overflow: hidden;
    padding: 7px 9px;
    border-radius: 9px;
    color: #687588;
    background: #f6f8fb;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.docs-company-list {
    overflow: hidden;
    margin-top: 7px;
    color: #7a8798;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.docs-card-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

.docs-menu-button {
    width: 36px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
    color: #607086;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.docs-card-actions .context-menu {
    right: 0;
    bottom: 42px;
    top: auto;
}

.docs-empty {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 30px;
    text-align: center;
}

.docs-empty-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 19px;
    color: #5264ca;
    background: #eff2ff;
    font-size: 12px;
    font-weight: 900;
}

.docs-empty h3 {
    margin: 0;
}

.docs-empty p {
    max-width: 520px;
    margin: 5px 0 14px;
    color: #8994a4;
}

.docs-scope-choice {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.docs-scope-choice label {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fafbfd;
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
}

.docs-company-picker.is-hidden {
    display: none;
}

.docs-company-checks {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    max-height: 250px;
    overflow-y: auto;
    padding: 2px;
}

.docs-company-checks label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e1e6ee;
    border-radius: 11px;
    background: #fafbfd;
    cursor: pointer;
}

.docs-company-checks input {
    margin-top: 3px;
}

.docs-company-checks strong,
.docs-company-checks small {
    display: block;
}

.docs-company-checks strong {
    font-size: 12px;
}

.docs-company-checks small {
    margin-top: 2px;
    color: #8994a4;
    font-size: 9px;
}

.worker-document-grid-v515 article {
    grid-template-columns: 62px minmax(0,1fr) auto;
}

.worker-document-type {
    display: inline-flex;
    margin-bottom: 3px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #5264ca;
    background: #edf1ff;
    font-size: 9px;
    font-weight: 900;
}

.worker-document-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 1120px) {
    .docs-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .docs-hero,
    .docs-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .docs-stats,
    .docs-grid,
    .docs-scope-choice,
    .docs-company-checks {
        grid-template-columns: 1fr;
    }

    .docs-search {
        width: 100%;
    }

    .docs-search input {
        min-width: 0;
        flex: 1;
    }

    .worker-document-grid-v515 article {
        grid-template-columns: 1fr;
    }

    .worker-document-actions {
        justify-content: flex-start;
    }
}


/* ==========================================================
   V5.16 — CONTACTOS + REPORTES
   ========================================================== */

/* CONTACTOS ADMIN */
.contacts-hero,
.reports-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 25px 27px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 91% 0%, rgba(82,105,231,.12), transparent 30%),
        #fff;
    box-shadow: 0 9px 26px rgba(31,43,72,.045);
}

.contacts-hero h1,
.reports-hero h1 {
    margin: 4px 0 5px;
    font-size: 30px;
}

.contacts-hero p,
.reports-hero p {
    max-width: 790px;
    margin: 0;
    color: #7e8a9d;
    line-height: 1.55;
}

.contacts-stats,
.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0;
}

.contacts-stats article,
.reports-kpi-grid article {
    min-height: 105px;
    padding: 15px;
    border: 1px solid #e0e5ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.contacts-stats article.good {
    border-left: 4px solid #18a575;
}

.contacts-stats article.muted {
    border-left: 4px solid #a9b1be;
}

.contacts-stats span,
.contacts-stats strong,
.contacts-stats small,
.reports-kpi-grid span,
.reports-kpi-grid strong,
.reports-kpi-grid small {
    display: block;
}

.contacts-stats span,
.reports-kpi-grid span {
    color: #8994a5;
    font-size: 11px;
}

.contacts-stats strong,
.reports-kpi-grid strong {
    margin: 4px 0 2px;
    font-size: 27px;
}

.contacts-stats small,
.reports-kpi-grid small {
    color: #939dac;
    font-size: 11px;
}

.contacts-panel {
    overflow: visible;
    border: 1px solid #dfe5ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31,43,72,.04);
}

.contacts-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px;
    border-bottom: 1px solid #e8ecf2;
}

.contacts-filter .form-field {
    min-width: 190px;
    margin: 0;
}

.contacts-filter .contacts-search-field {
    min-width: 260px;
    flex: 1;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px;
    padding: 16px;
}

.contact-admin-card {
    position: relative;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    padding: 17px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.contact-admin-card.is-inactive {
    opacity: .68;
    background: #fafbfd;
}

.contact-admin-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.contact-admin-order {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #5264ca;
    background: #eff2ff;
    font-size: 12px;
    font-weight: 900;
}

.contact-admin-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.contact-admin-company,
.contact-admin-status {
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.contact-admin-company {
    color: #4b5ab2;
    background: #edf1ff;
}

.contact-admin-status.active {
    color: #087454;
    background: #e9f8f2;
}

.contact-admin-status.inactive {
    color: #6f7a8b;
    background: #eef1f5;
}

.contact-admin-type {
    margin-top: 16px;
    color: #5265cb;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.contact-admin-card h3 {
    margin: 4px 0 2px;
    font-size: 18px;
}

.contact-admin-position {
    margin: 0;
    color: #687589;
    font-size: 12px;
}

.contact-admin-description {
    min-height: 36px;
    margin: 9px 0;
    color: #8793a4;
    font-size: 11px;
    line-height: 1.5;
}

.contact-admin-phone {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    color: #27344a;
    text-decoration: none;
    font-size: 19px;
    font-weight: 900;
}

.contact-admin-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

.contacts-menu-button {
    width: 36px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
    color: #607086;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.contact-admin-actions .context-menu {
    right: 0;
    bottom: 42px;
    top: auto;
}

.contacts-empty {
    min-height: 350px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 30px;
    text-align: center;
}

.contacts-empty-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 18px;
    color: #5264ca;
    background: #eff2ff;
    font-size: 25px;
}

.contacts-empty h3 {
    margin: 0;
}

.contacts-empty p {
    margin: 5px 0 0;
    color: #8994a4;
}

/* CONTACTOS WORKER */
.worker-contact-grid-v516 article {
    min-height: 265px;
    display: flex;
    flex-direction: column;
}

.worker-contact-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.worker-contact-card-top .worker-contact-icon {
    margin: 0;
}

.worker-contact-card-top > span {
    color: #5264ca;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.worker-contact-phone {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    color: #202c3e;
    font-size: 18px;
}

.worker-contact-actions {
    display: flex;
    gap: 7px;
    margin-top: 11px;
}

.worker-contact-actions .btn {
    flex: 1;
}

/* REPORTES */
.reports-admin-content {
    width: min(calc(100% - 32px), 1550px);
    margin: 0 auto;
    padding: 28px 0 50px;
}

.reports-period-badge {
    min-width: 220px;
    padding: 13px 15px;
    border: 1px solid #dce3f2;
    border-radius: 14px;
    background: #f5f7ff;
}

.reports-period-badge span,
.reports-period-badge strong {
    display: block;
}

.reports-period-badge span {
    color: #8390a4;
    font-size: 10px;
}

.reports-period-badge strong {
    margin-top: 3px;
    color: #4356bc;
    font-size: 13px;
}

.reports-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 15px;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.reports-filter .form-field {
    min-width: 190px;
    margin: 0;
}

.reports-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
    padding: 6px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}

.reports-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 10px;
    color: #788498;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.reports-tabs a.active {
    color: #fff;
    background: #5268e7;
    box-shadow: 0 7px 18px rgba(67,88,204,.20);
}

.reports-kpi-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.reports-summary-panel,
.reports-table-panel {
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.reports-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.reports-section-head h2 {
    margin: 2px 0;
    font-size: 21px;
}

.reports-section-head p {
    margin: 3px 0 0;
    color: #8994a4;
    font-size: 11px;
}

.reports-company-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.reports-company-grid article {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    padding: 15px;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    background: #fafbfd;
}

.reports-company-grid h3 {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 15px;
}

.reports-company-grid div {
    padding: 9px;
    border-radius: 10px;
    background: #fff;
}

.reports-company-grid span,
.reports-company-grid strong {
    display: block;
}

.reports-company-grid span {
    color: #8a95a5;
    font-size: 9px;
}

.reports-company-grid strong {
    margin-top: 2px;
    font-size: 18px;
}

.reports-table-scroll {
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.reports-table th,
.reports-table td {
    padding: 11px 10px;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    vertical-align: middle;
}

.reports-table th {
    color: #738095;
    background: #fafbfd;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.reports-table td {
    color: #344054;
    font-size: 12px;
}

.reports-table td strong,
.reports-table td small {
    display: block;
}

.reports-table td strong {
    font-size: 12px;
}

.reports-table td small {
    margin-top: 2px;
    color: #8a95a5;
    font-size: 10px;
}

.reports-empty-row {
    height: 180px;
    color: #8994a4 !important;
    text-align: center !important;
}

.report-status {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 999px;
    color: #5d6879;
    background: #eef1f5;
    font-size: 9px;
    font-weight: 850;
}

.report-status.status-activo,
.report-status.status-aprobado,
.report-status.status-convertido_trabajador {
    color: #087454;
    background: #e9f8f2;
}

.report-status.status-pendiente,
.report-status.status-en_evaluacion,
.report-status.status-en_progreso {
    color: #8a5d0c;
    background: #fff3db;
}

.report-status.status-desaprobado,
.report-status.status-retirado,
.report-status.status-inactivo {
    color: #a53140;
    background: #fff0f2;
}

@media (max-width: 1180px) {
    .contacts-grid,
    .reports-company-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .reports-kpi-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .contacts-hero,
    .reports-hero,
    .reports-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .contacts-stats,
    .contacts-grid,
    .reports-kpi-grid,
    .reports-company-grid {
        grid-template-columns: 1fr;
    }

    .contacts-filter,
    .reports-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .contacts-filter .form-field,
    .contacts-filter .contacts-search-field,
    .reports-filter .form-field {
        width: 100%;
        min-width: 0;
    }

    .reports-period-badge {
        min-width: 0;
    }
}


/* ==========================================================
   V5.17 — CONFIGURACIÓN
   ========================================================== */

.brand-mark-logo,
.auth-brand-logo,
.employee-brand-logo {
    overflow: hidden;
    padding: 0;
    background: #fff;
}

.brand-mark-logo img,
.auth-brand-logo img,
.employee-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(82,105,231,.12), transparent 30%),
        #fff;
    box-shadow: 0 9px 26px rgba(31,43,72,.045);
}

.settings-hero h1 {
    margin: 4px 0 5px;
    font-size: 30px;
}

.settings-hero p {
    max-width: 790px;
    margin: 0;
    color: #7e8a9d;
    line-height: 1.55;
}

.settings-hero-badge {
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid #dce3f2;
    border-radius: 15px;
    background: #f5f7ff;
}

.settings-hero-badge span,
.settings-hero-badge strong {
    display: block;
}

.settings-hero-badge span {
    color: #8290a4;
    font-size: 10px;
}

.settings-hero-badge strong {
    margin-top: 3px;
    color: #4458bf;
    font-size: 27px;
}

.settings-tabs {
    display: flex;
    gap: 5px;
    margin: 14px 0;
    padding: 6px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}

.settings-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 10px;
    color: #788498;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.settings-tabs a.active {
    color: #fff;
    background: #5268e7;
    box-shadow: 0 7px 18px rgba(67,88,204,.20);
}

.settings-grid,
.settings-system-grid {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(320px,.8fr);
    gap: 14px;
}

.settings-card {
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.settings-card-wide {
    grid-column: 1 / -1;
}

.settings-card-head {
    margin-bottom: 16px;
}

.settings-card-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-card-head h2 {
    margin: 2px 0 3px;
    font-size: 21px;
}

.settings-card-head p {
    margin: 0;
    color: #8994a4;
    font-size: 12px;
    line-height: 1.5;
}

.settings-logo-preview {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin: 12px auto 8px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 28px;
    background: #f5f7ff;
    box-shadow: 0 12px 28px rgba(55,72,145,.08);
}

.settings-logo-preview img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.settings-logo-preview span {
    color: #5265cf;
    font-size: 44px;
    font-weight: 900;
}

.settings-logo-brand {
    display: block;
    margin-bottom: 15px;
    text-align: center;
    font-size: 18px;
}

.settings-logo-form {
    display: grid;
    gap: 9px;
    margin-bottom: 9px;
}

.settings-logo-form input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed #ccd5e6;
    border-radius: 11px;
    background: #fafbfd;
}

.settings-security-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.settings-rule-card,
.settings-eval-box {
    padding: 15px;
    border: 1px solid #e1e6ee;
    border-radius: 14px;
    background: #fafbfd;
}

.settings-rule-card span,
.settings-rule-card strong,
.settings-rule-card small {
    display: block;
}

.settings-rule-card span {
    color: #5265ca;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .4px;
}

.settings-rule-card strong {
    margin: 4px 0 3px;
    font-size: 15px;
}

.settings-rule-card small {
    color: #8994a4;
    font-size: 10px;
}

.settings-input-suffix {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
}

.settings-input-suffix input {
    border-radius: 11px 0 0 11px !important;
}

.settings-input-suffix span {
    display: grid;
    place-items: center;
    padding: 0 11px;
    border: 1px solid #d9e1ec;
    border-left: 0;
    border-radius: 0 11px 11px 0;
    color: #788598;
    background: #f7f9fc;
    font-size: 11px;
    font-weight: 800;
}

.settings-eval-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.settings-eval-box h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.settings-eval-bottom {
    display: grid;
    grid-template-columns: minmax(220px,.7fr) 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.settings-kiosk-preview {
    align-self: start;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(98,119,238,.27), transparent 30%),
        linear-gradient(145deg,#172235,#263b67);
}

.settings-kiosk-preview .eyebrow {
    color: #b9c6ff;
}

.settings-kiosk-preview h2 {
    margin: 7px 0 4px;
    font-size: 30px;
}

.settings-kiosk-preview p {
    margin: 0 auto 22px;
    max-width: 420px;
    color: #c4cfe0;
}

.settings-kiosk-dni,
.settings-kiosk-button {
    min-height: 52px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.settings-kiosk-dni {
    color: #a3afc2;
    background: #fff;
}

.settings-kiosk-button {
    margin-top: 9px;
    color: #fff;
    background: #5a6ee6;
    font-weight: 850;
}

.settings-kiosk-flow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px;
    margin-top: 14px;
}

.settings-kiosk-flow span {
    padding: 8px 5px;
    border-radius: 9px;
    color: #c7d1e2;
    background: rgba(255,255,255,.07);
    font-size: 9px;
}

.settings-document-list {
    display: grid;
    border-top: 1px solid #edf0f4;
}

.settings-document-list article {
    display: grid;
    grid-template-columns: 76px minmax(230px,1fr) 100px 100px auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f4;
}

.settings-document-code {
    width: fit-content;
    min-width: 54px;
    padding: 7px 8px;
    border-radius: 9px;
    color: #4c5fc4;
    background: #eef1ff;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.settings-document-copy strong,
.settings-document-copy small {
    display: block;
}

.settings-document-copy strong {
    font-size: 13px;
}

.settings-document-copy small {
    margin-top: 2px;
    color: #8a95a5;
    font-size: 10px;
}

.settings-doc-usage {
    color: #7f8b9c;
    font-size: 10px;
}

.settings-doc-status {
    width: fit-content;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.settings-doc-status.active {
    color: #087454;
    background: #e9f8f2;
}

.settings-doc-status.inactive {
    color: #6f7a8b;
    background: #eef1f5;
}

.settings-document-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-empty {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.settings-empty strong,
.settings-empty span {
    display: block;
}

.settings-empty span {
    margin-top: 4px;
    color: #8994a4;
    font-size: 11px;
}

.settings-module-status {
    display: grid;
    gap: 6px;
}

.settings-module-status > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border-radius: 10px;
    background: #f8fafc;
}

.settings-module-status span {
    font-size: 12px;
}

.settings-module-status strong {
    font-size: 10px;
}

.settings-module-status strong.ready {
    color: #087454;
}

.settings-module-status strong.missing {
    color: #b13b48;
}

.settings-system-counts {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
}

.settings-system-counts > div {
    padding: 13px;
    border-radius: 12px;
    background: #f7f9fc;
}

.settings-system-counts span,
.settings-system-counts strong {
    display: block;
}

.settings-system-counts span {
    color: #8994a4;
    font-size: 10px;
}

.settings-system-counts strong {
    margin-top: 3px;
    font-size: 23px;
}

@media (max-width: 1050px) {
    .settings-grid,
    .settings-system-grid,
    .settings-eval-columns {
        grid-template-columns: 1fr;
    }

    .settings-eval-bottom {
        grid-template-columns: 1fr;
    }

    .settings-document-list article {
        grid-template-columns: 70px 1fr 100px;
    }

    .settings-doc-status,
    .settings-document-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .settings-hero,
    .settings-card-head-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-security-grid,
    .settings-system-counts {
        grid-template-columns: 1fr;
    }

    .settings-document-list article {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 14px 0;
    }

    .settings-doc-status,
    .settings-document-actions {
        grid-column: auto;
    }

    .settings-document-actions {
        justify-content: flex-start;
    }

    .settings-kiosk-flow {
        grid-template-columns: repeat(2,1fr);
    }
}


/* ==========================================================
   V5.18 — ADMINISTRADOR: COLABORADORES + ASISTENCIA
   ========================================================== */

.admin-people-content,
.admin-attendance-content {
    width: min(calc(100% - 32px), 1540px);
    margin: 0 auto;
    padding: 28px 0 50px;
}

.admin-people-hero,
.admin-attendance-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px;
    border: 1px solid #dfe5ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 91% 0%, rgba(82,105,231,.12), transparent 30%),
        #fff;
    box-shadow: 0 9px 26px rgba(31,43,72,.045);
}

.admin-people-hero h1,
.admin-attendance-hero h1 {
    margin: 4px 0 5px;
    font-size: 30px;
}

.admin-people-hero p,
.admin-attendance-hero p {
    max-width: 850px;
    margin: 0;
    color: #7e8a9d;
    line-height: 1.55;
}

.admin-people-stats,
.admin-attendance-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0;
}

.admin-attendance-stats {
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.admin-people-stats article,
.admin-attendance-stats article {
    min-height: 104px;
    padding: 15px;
    border: 1px solid #e0e5ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.admin-people-stats article.good,
.admin-attendance-stats article.good { border-left: 4px solid #18a575; }
.admin-people-stats article.warn,
.admin-attendance-stats article.warn { border-left: 4px solid #e0a03c; }
.admin-people-stats article.muted,
.admin-attendance-stats article.muted { border-left: 4px solid #a8b0bd; }
.admin-attendance-stats article.bad { border-left: 4px solid #d45a68; }

.admin-people-stats span,
.admin-people-stats strong,
.admin-people-stats small,
.admin-attendance-stats span,
.admin-attendance-stats strong,
.admin-attendance-stats small {
    display: block;
}

.admin-people-stats span,
.admin-attendance-stats span { color: #8994a5; font-size: 11px; }
.admin-people-stats strong,
.admin-attendance-stats strong { margin: 4px 0 2px; font-size: 27px; }
.admin-people-stats small,
.admin-attendance-stats small { color: #939dac; font-size: 11px; }

.admin-people-panel,
.admin-attendance-main-panel,
.admin-attendance-terminal-panel {
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.admin-people-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px;
    border-bottom: 1px solid #e8ecf2;
}

.admin-people-filter .form-field { min-width: 185px; margin: 0; }
.admin-people-filter .admin-people-search { min-width: 280px; flex: 1; }

.admin-people-list { display: grid; }

.admin-person-row {
    display: grid;
    grid-template-columns: minmax(310px,1.35fr) minmax(180px,.8fr) minmax(180px,.8fr) 150px minmax(250px,auto);
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 13px 16px;
    border-bottom: 1px solid #edf0f4;
}

.admin-person-row:last-child { border-bottom: 0; }
.admin-person-row.state-cesado { background: #fafbfd; opacity: .78; }

.admin-person-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.admin-person-photo,
.admin-person-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px; object-fit: cover; }
.admin-person-avatar { display: grid; place-items: center; }

.admin-person-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-person-name-line strong { font-size: 14px; }
.admin-person-identity small { display: block; margin-top: 3px; color: #8994a4; font-size: 10px; }

.admin-role-badge {
    padding: 4px 7px;
    border-radius: 999px;
    color: #4d5ec0;
    background: #eef1ff;
    font-size: 9px;
    font-weight: 900;
}

.admin-person-job span,
.admin-person-job strong,
.admin-person-access span,
.admin-person-access strong,
.admin-person-access small,
.admin-person-status-cell small { display: block; }
.admin-person-job span,
.admin-person-access span { color: #8994a4; font-size: 9px; }
.admin-person-job strong,
.admin-person-access strong { margin-top: 2px; font-size: 12px; }
.admin-person-access small { margin-top: 3px; font-size: 9px; font-weight: 800; }
.admin-person-access small.is-enabled { color: #087454; }
.admin-person-access small.is-disabled { color: #b03a48; }

.admin-person-status-cell { display: grid; gap: 4px; justify-items: start; }
.admin-person-status {
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}
.admin-person-status.status-activo { color: #087454; background: #e9f8f2; }
.admin-person-status.status-suspendido { color: #8a5d0c; background: #fff3db; }
.admin-person-status.status-cesado { color: #a53140; background: #fff0f2; }
.admin-person-status-cell small { color: #8994a4; font-size: 9px; }

.admin-person-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.admin-person-actions form { margin: 0; }
.admin-manager-lock { color: #7d8899; font-size: 9px; font-weight: 750; }

.admin-people-empty,
.admin-attendance-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 30px;
}
.admin-people-empty-icon,
.admin-attendance-empty-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 18px;
    color: #5264ca;
    background: #eff2ff;
    font-weight: 900;
}
.admin-people-empty h3,
.admin-attendance-empty h3 { margin: 0; }
.admin-people-empty p,
.admin-attendance-empty p { margin: 5px 0 0; color: #8994a4; }

.admin-credential-note,
.admin-terminate-warning,
.admin-attendance-permission-note {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #d9e2f1;
    border-radius: 12px;
    color: #5e6b7d;
    background: #f7f9fc;
    font-size: 11px;
}
.admin-credential-note strong,
.admin-credential-note span { display: block; }
.admin-credential-note strong { color: #4256bb; margin-bottom: 2px; }
.admin-terminate-copy { padding: 12px; border-radius: 11px; background: #f7f9fc; }
.admin-terminate-warning { color: #98555d; border-color: #f0d4d8; background: #fff6f7; }

.admin-attendance-hero-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-attendance-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.7fr); gap: 14px; }
.admin-attendance-main-panel,
.admin-attendance-terminal-panel { padding: 18px; }

.admin-attendance-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-attendance-panel-head h2,
.admin-attendance-terminal-panel h2 { margin: 2px 0 3px; font-size: 20px; }
.admin-attendance-terminal-panel > p { margin: 0 0 14px; color: #8994a4; font-size: 11px; line-height: 1.5; }
.admin-attendance-date-filter { display: flex; gap: 6px; }
.admin-attendance-date-filter input { min-height: 40px; padding: 0 10px; border: 1px solid #dce3ed; border-radius: 10px; }

.admin-attendance-record-list { display: grid; }
.admin-attendance-record-row {
    display: grid;
    grid-template-columns: minmax(260px,1.2fr) 100px 100px 110px;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f4;
}
.admin-attendance-record-row:last-child { border-bottom: 0; }
.admin-attendance-record-row > div:first-child strong,
.admin-attendance-record-row > div:first-child small,
.admin-attendance-record-row > div:not(:first-child) span,
.admin-attendance-record-row > div:not(:first-child) strong { display: block; }
.admin-attendance-record-row > div:first-child strong { font-size: 12px; }
.admin-attendance-record-row > div:first-child small,
.admin-attendance-record-row > div:not(:first-child) span { color: #8994a4; font-size: 9px; }
.admin-attendance-record-row > div:not(:first-child) strong { margin-top: 2px; font-size: 12px; }
.admin-attendance-note { grid-column: 1 / -1; color: #7e8a9d; font-size: 10px; }

.admin-terminal-empty { padding: 15px; border-radius: 12px; background: #f7f9fc; color: #7d8899; font-size: 11px; }
.admin-terminal-empty strong,
.admin-terminal-empty span { display: block; }
.admin-terminal-empty span { margin-top: 3px; }
.admin-terminal-list { display: grid; gap: 8px; }
.admin-terminal-list article { padding: 12px; border: 1px solid #e4e8ef; border-radius: 12px; background: #fafbfd; }
.admin-terminal-list strong,
.admin-terminal-list small { display: block; }
.admin-terminal-list strong { font-size: 12px; }
.admin-terminal-list small { margin-top: 2px; color: #8994a4; font-size: 9px; }
.admin-terminal-tags { display: flex; gap: 5px; margin: 8px 0; }
.admin-terminal-tags span { padding: 4px 6px; border-radius: 999px; color: #5264ca; background: #eef1ff; font-size: 8px; font-weight: 900; }

.admin-attendance-marks-panel { margin-top: 14px; }
.admin-attendance-date-chip { padding: 6px 8px; border-radius: 999px; color: #5264ca; background: #eef1ff; font-size: 10px; font-weight: 850; }
.admin-mark-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.admin-mark-grid article { display: grid; grid-template-columns: minmax(180px,1fr) 150px 55px 55px; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid #e7ebf1; border-radius: 11px; background: #fafbfd; }
.admin-mark-grid strong,
.admin-mark-grid small { display: block; }
.admin-mark-grid > article > div > strong { font-size: 11px; }
.admin-mark-grid > article > div > small { margin-top: 2px; color: #8994a4; font-size: 9px; }
.admin-mark-type { width: fit-content; padding: 5px 7px; border-radius: 999px; color: #4d5fc0; background: #eef1ff; font-size: 8px; font-weight: 900; }
.admin-mark-time { text-align: right; font-size: 12px; }
.admin-mark-method { color: #8994a4; text-align: right; font-size: 8px; }

@media (max-width: 1250px) {
    .admin-person-row { grid-template-columns: minmax(300px,1.3fr) minmax(180px,.8fr) 150px; }
    .admin-person-access,
    .admin-person-actions { grid-column: 1 / -1; }
    .admin-person-actions { justify-content: flex-start; }
    .admin-attendance-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .admin-mark-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .admin-people-stats,
    .admin-attendance-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-attendance-layout { grid-template-columns: 1fr; }
    .admin-person-row { grid-template-columns: 1fr 1fr; }
    .admin-person-identity,
    .admin-person-actions { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
    .admin-people-hero,
    .admin-attendance-hero,
    .admin-attendance-panel-head { align-items: stretch; flex-direction: column; }
    .admin-people-stats,
    .admin-attendance-stats { grid-template-columns: 1fr; }
    .admin-people-filter { align-items: stretch; flex-direction: column; }
    .admin-people-filter .form-field,
    .admin-people-filter .admin-people-search { width: 100%; min-width: 0; }
    .admin-person-row,
    .admin-attendance-record-row,
    .admin-mark-grid article { grid-template-columns: 1fr; }
    .admin-person-identity,
    .admin-person-actions,
    .admin-person-access,
    .admin-attendance-note { grid-column: auto; }
    .admin-attendance-date-filter { width: 100%; }
    .admin-attendance-date-filter input { flex: 1; }
}


/* ==========================================================
   V5.19 — SEGURIDAD DE ACCESOS Y EVALUACIONES
   ========================================================== */
.password-change-shell,.applicant-conflict-shell{width:min(100% - 28px,560px);margin:0 auto;padding:54px 0}.password-change-card,.applicant-conflict-card{padding:28px;border:1px solid #dfe5ee;border-radius:24px;background:#fff;box-shadow:0 20px 55px rgba(31,43,72,.10)}.password-security-icon,.applicant-conflict-icon{width:68px;height:68px;display:grid;place-items:center;margin-bottom:14px;border-radius:20px;background:#eef2ff;font-size:30px}.applicant-conflict-card.critical .applicant-conflict-icon{background:#fff0f2}.password-change-card h1,.applicant-conflict-card h1{margin:5px 0 7px;font-size:28px}.password-change-card>p,.applicant-conflict-card>p{margin:0 0 18px;color:#7e8a9d;line-height:1.55}.password-back-link{display:block;margin-top:14px;color:#607086;text-align:center;text-decoration:none}.security-warning-box{display:grid;gap:4px;margin:15px 0;padding:14px;border:1px solid #f0d9a4;border-radius:13px;background:#fff8e9}.security-warning-box strong{font-size:13px}.security-warning-box span{color:#826a37;font-size:11px;line-height:1.45}.applicant-security-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px;border:1px solid #dfe5ee;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(31,43,72,.04)}.applicant-security-hero h1{margin:4px 0;font-size:25px}.applicant-security-hero p{margin:0;color:#8490a2}.security-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.security-kpis article{padding:15px;border:1px solid #e0e5ed;border-radius:15px;background:#fff}.security-kpis span,.security-kpis strong{display:block}.security-kpis span{color:#8994a5;font-size:10px}.security-kpis strong{margin-top:3px;font-size:25px}.security-event-list{display:grid;gap:8px}.security-event{display:grid;grid-template-columns:130px minmax(0,1fr) 75px;gap:12px;align-items:start;padding:12px;border:1px solid #e5e9ef;border-radius:12px}.security-event>span{color:#8994a4;font-size:10px}.security-event strong{font-size:12px}.security-event p{margin:3px 0 0;color:#7f8b9d;font-size:11px}.security-event>b{justify-self:end;font-size:9px}.security-event.level-alerta{border-left:4px solid #e3a21a}.security-event.level-critico{border-left:4px solid #d44858;background:#fffafb}.terminal-token-box{margin-bottom:14px;padding:18px;border:1px solid #cdd6ff;border-radius:18px;background:#f4f6ff}.terminal-token-box h2{margin:4px 0}.terminal-token-box p{margin:0 0 10px;color:#778399}.terminal-token-copy{display:flex;gap:8px}.terminal-token-copy input{min-width:0;flex:1;padding:11px;border:1px solid #ccd5e7;border-radius:10px;background:#fff}.terminal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.terminal-card{padding:17px;border:1px solid #e0e5ed;border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(31,43,72,.04)}.terminal-card-head{display:flex;justify-content:space-between;gap:8px}.terminal-token-status{padding:5px 7px;border-radius:999px;font-size:9px;font-weight:850}.terminal-token-status.ready{color:#087454;background:#e9f8f2}.terminal-token-status.pending{color:#9b6407;background:#fff3db}.terminal-card h3{margin:14px 0 3px}.terminal-card p{min-height:35px;margin:0;color:#8490a2;font-size:11px}.terminal-card code{display:block;margin:10px 0;padding:8px;border-radius:9px;background:#f6f8fb}.terminal-card-actions{display:flex;gap:6px;flex-wrap:wrap}.terminal-secure-note{color:#667389;font-size:10px;font-weight:800}.security-applicant-content{width:min(calc(100% - 32px),1500px);margin:0 auto;padding:28px 0 50px}@media(max-width:900px){.terminal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.security-event{grid-template-columns:1fr}.security-event>b{justify-self:start}}@media(max-width:650px){.terminal-grid,.security-kpis{grid-template-columns:1fr}.applicant-security-hero{align-items:stretch;flex-direction:column}.terminal-token-copy{flex-direction:column}}

/* ==========================================================
   V5.20 — CENTRO DE REPORTES + EXCEL
   ========================================================== */

.reports-hero-v520 {
    align-items: stretch;
}

.reports-hero-actions {
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.reports-master-export {
    justify-content: center;
}

.reports-filter-v520 .reports-filter-note {
    min-width: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
    border-left: 1px solid #e6eaf1;
}

.reports-filter-note strong,
.reports-filter-note span {
    display: block;
}

.reports-filter-note strong {
    color: #4054b8;
    font-size: 11px;
}

.reports-filter-note span {
    margin-top: 2px;
    color: #8a95a5;
    font-size: 10px;
    line-height: 1.4;
}

.reports-tabs-v520 {
    padding: 7px;
}

.reports-tabs-v520 a {
    gap: 6px;
}

.reports-tabs-v520 a b {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #677489;
    background: #edf0f5;
    font-size: 9px;
}

.reports-tabs-v520 a.active b {
    color: #5268e7;
    background: #fff;
}

.reports-kpi-grid-v520 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.reports-kpi-grid-v520 article {
    border-left: 4px solid #d9deea;
}

.reports-kpi-grid-v520 .report-kpi-income {
    border-left-color: #18a575;
}

.reports-kpi-grid-v520 .report-kpi-exit {
    border-left-color: #e15d68;
}

.reports-company-grid-v520 article {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.reports-excel-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #dfe5f1;
    border-radius: 13px;
    background: #f6f8ff;
}

.reports-excel-note strong,
.reports-excel-note span {
    display: block;
}

.reports-excel-note strong {
    color: #4357bc;
    font-size: 12px;
}

.reports-excel-note span {
    max-width: 820px;
    color: #7f8b9e;
    font-size: 10px;
    text-align: right;
}

.reports-export-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.reports-movement-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.reports-movement-cards article {
    padding: 16px;
    border: 1px solid #e0e5ed;
    border-left: 4px solid #8090a9;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.reports-movement-cards article.income {
    border-left-color: #18a575;
}

.reports-movement-cards article.exit {
    border-left-color: #e15d68;
}

.reports-movement-cards span,
.reports-movement-cards strong,
.reports-movement-cards small {
    display: block;
}

.reports-movement-cards span {
    color: #8793a4;
    font-size: 10px;
}

.reports-movement-cards strong {
    margin: 3px 0;
    font-size: 27px;
}

.reports-movement-cards small {
    color: #9aa4b2;
    font-size: 10px;
}

.report-movement-pill {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}

.report-movement-pill.income {
    color: #087454;
    background: #e9f8f2;
}

.report-movement-pill.exit {
    color: #a53140;
    background: #fff0f2;
}

.report-status.status-cesado {
    color: #a53140;
    background: #fff0f2;
}

.report-status.status-presente,
.report-status.status-justificado,
.report-status.status-goce,
.report-status.status-ajuste_favor {
    color: #087454;
    background: #e9f8f2;
}

.report-status.status-falta,
.report-status.status-ajuste_contra {
    color: #a53140;
    background: #fff0f2;
}

.report-status.status-tardanza,
.report-status.status-permiso,
.report-status.status-vacaciones,
.report-status.status-adelanto {
    color: #8a5d0c;
    background: #fff3db;
}

.reports-table-wide {
    min-width: 1180px;
}

.reports-vacation-summary {
    width: fit-content;
    min-width: 230px;
    margin-bottom: 13px;
    padding: 12px 14px;
    border: 1px solid #e0e5ee;
    border-radius: 13px;
    background: #fafbfd;
}

.reports-vacation-summary span,
.reports-vacation-summary strong {
    display: block;
}

.reports-vacation-summary span {
    color: #8793a4;
    font-size: 10px;
}

.reports-vacation-summary strong {
    margin-top: 3px;
    color: #4357bc;
    font-size: 25px;
}

@media (max-width: 1180px) {
    .reports-kpi-grid-v520 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .reports-company-grid-v520 article {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .reports-hero-actions {
        min-width: 0;
    }

    .reports-kpi-grid-v520,
    .reports-movement-cards {
        grid-template-columns: 1fr;
    }

    .reports-filter-v520 .reports-filter-note {
        min-width: 0;
        border-left: 0;
        border-top: 1px solid #e6eaf1;
        padding: 10px 0 0;
    }

    .reports-section-head .reports-export-actions {
        justify-content: flex-start;
    }

    .reports-excel-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-excel-note span {
        text-align: left;
    }
}

/* ==========================================================
   V5.21 — TRAZABILIDAD POSTULANTES + REPORTES PRO
   ========================================================== */
.recruitment-auto-approval-note,
.recruitment-ready-badge,
.recruitment-hired-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.25;
}

.recruitment-auto-approval-note {
    max-width: 360px;
    color: #59667a;
    background: #f2f5fa;
    white-space: normal;
}

.recruitment-ready-badge {
    color: #087454;
    background: #e9f8f2;
}

.recruitment-hired-badge {
    color: #3f55bb;
    background: #edf1ff;
}

.recruitment-trace-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 9px;
    padding: 9px;
    border: 1px solid #e4e9f2;
    border-radius: 12px;
    background: #fafbfd;
}

.recruitment-trace-summary > div {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 10px;
    background: #fff;
}

.recruitment-trace-summary span,
.recruitment-trace-summary strong,
.recruitment-trace-summary small {
    display: block;
}

.recruitment-trace-summary span {
    color: #8a95a6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.recruitment-trace-summary strong {
    overflow: hidden;
    margin-top: 2px;
    color: #29364d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recruitment-trace-summary small {
    margin-top: 2px;
    color: #8490a2;
    font-size: 9px;
}

.trace-hero {
    margin-bottom: 14px;
}

.trace-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.trace-summary-grid article {
    padding: 14px;
    border: 1px solid #e0e5ed;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31,43,72,.035);
}

.trace-summary-grid span,
.trace-summary-grid strong {
    display: block;
}

.trace-summary-grid span {
    color: #8793a5;
    font-size: 10px;
}

.trace-summary-grid strong {
    margin-top: 4px;
    font-size: 14px;
}

.trace-panel {
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31,43,72,.04);
}

.trace-timeline {
    position: relative;
    display: grid;
    gap: 11px;
    padding-left: 28px;
}

.trace-timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #dfe5ef;
}

.trace-item {
    position: relative;
}

.trace-dot {
    position: absolute;
    left: -27px;
    top: 19px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #5a6ee6;
    box-shadow: 0 0 0 3px #e7ebff;
}

.trace-item.type-ingreso_trabajador .trace-dot,
.trace-item.type-proceso_aprobado .trace-dot,
.trace-item.type-evaluacion_aprobada .trace-dot {
    background: #19a476;
    box-shadow: 0 0 0 3px #dff5ed;
}

.trace-item.type-evaluacion_desaprobada .trace-dot {
    background: #c64b5c;
    box-shadow: 0 0 0 3px #fde6ea;
}

.trace-card {
    padding: 14px;
    border: 1px solid #e1e6ee;
    border-radius: 14px;
    background: #fafbfd;
}

.trace-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.trace-card-head span {
    color: #8793a5;
    font-size: 9px;
}

.trace-card-head h3 {
    margin: 2px 0 0;
    font-size: 15px;
}

.trace-actor {
    padding: 6px 8px;
    border-radius: 999px;
    color: #4658bb !important;
    background: #edf1ff;
    font-size: 9px !important;
    font-weight: 850;
}

.trace-card p {
    margin: 9px 0 0;
    color: #687589;
    font-size: 11px;
}

.trace-detail-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 10px;
}

.trace-detail-grid > div {
    padding: 8px 9px;
    border-radius: 9px;
    background: #fff;
}

.trace-detail-grid > div.wide {
    grid-column: 1 / -1;
}

.trace-detail-grid span,
.trace-detail-grid strong {
    display: block;
}

.trace-detail-grid span {
    color: #8b96a5;
    font-size: 9px;
}

.trace-detail-grid strong {
    margin-top: 2px;
    font-size: 11px;
}

.certificate-origin-row {
    margin: 8px 0 0;
}

.certificate-origin-badge {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.certificate-origin-badge.selection {
    color: #7a5409;
    background: #fff3db;
}

.certificate-origin-badge.training {
    color: #087454;
    background: #e9f8f2;
}

.report-kpi-warning {
    border-left: 4px solid #d59b2a !important;
}

.report-warning-pill {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: #8a5d0c;
    background: #fff3db;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .trace-summary-grid,
    .recruitment-trace-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .trace-summary-grid,
    .recruitment-trace-summary,
    .trace-detail-grid {
        grid-template-columns: 1fr;
    }

    .trace-card-head {
        flex-direction: column;
    }
}


/* ==========================================================
   V5.22 — UN SOLO PANEL ADMIN + PERFILES
   ========================================================== */
.admin-profile-config {
    padding: 16px;
    border: 1px solid #e0e6ef;
    border-radius: 16px;
    background: #fbfcff;
}

.admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}

.admin-profile-option {
    cursor: pointer;
}

.admin-profile-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-profile-option > span {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    padding: 13px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    transition: .18s ease;
}

.admin-profile-option > input:checked + span {
    border-color: #5268e7;
    box-shadow: 0 0 0 3px rgba(82,104,231,.10);
    background: #f7f8ff;
}

.admin-profile-option b {
    font-size: 14px;
}

.admin-profile-option small {
    margin-top: 5px;
    color: #7f8b9e;
    font-size: 10px;
    line-height: 1.4;
}

.admin-profile-option em {
    margin-top: auto;
    padding-top: 10px;
    color: #5265ca;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.admin-profile-option.custom > span {
    background: #fffaf2;
}

.admin-custom-permissions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e7ebf1;
}

.admin-custom-permissions.is-hidden {
    display: none;
}

.admin-custom-permissions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-custom-permissions-head strong,
.admin-custom-permissions-head span {
    display: block;
}

.admin-custom-permissions-head span {
    margin-top: 2px;
    color: #8793a5;
    font-size: 10px;
}

.admin-profile-note {
    padding: 5px 8px;
    border-radius: 999px;
    color: #865913 !important;
    background: #fff1d4;
    font-size: 9px !important;
    font-weight: 850;
}

.admin-permission-groups {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.admin-permission-groups section {
    padding: 12px;
    border: 1px solid #e1e6ee;
    border-radius: 13px;
    background: #fff;
}

.admin-permission-groups h4 {
    margin: 0 0 8px;
    color: #5265ca;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.admin-permission-checks {
    display: grid;
    gap: 6px;
}

.admin-permission-checks label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 9px;
    background: #f8fafc;
    cursor: pointer;
}

.admin-permission-checks input {
    margin-top: 3px;
}

.admin-permission-checks strong,
.admin-permission-checks small {
    display: block;
}

.admin-permission-checks strong {
    font-size: 11px;
}

.admin-permission-checks small {
    margin-top: 2px;
    color: #8b96a6;
    font-size: 9px;
    line-height: 1.35;
}

.admin-company-access-head-spaced {
    margin-top: 16px;
}

.admin-profile-explainer {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.admin-profile-explainer > div {
    padding: 13px;
    border: 1px solid #e2e7ef;
    border-radius: 13px;
    background: #fafbfd;
}

.admin-profile-explainer strong,
.admin-profile-explainer span {
    display: block;
}

.admin-profile-explainer strong { font-size: 12px; }
.admin-profile-explainer span { margin-top: 3px; color: #8792a4; font-size: 10px; }
.admin-profile-explainer > b { color: #5268e7; }

.settings-admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 9px;
    margin-bottom: 16px;
}

.settings-admin-profile-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
}

.settings-admin-profile-card.custom { background: #fffaf2; }
.settings-admin-profile-tag { color: #5265ca; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.settings-admin-profile-card h3 { margin: 5px 0 4px; font-size: 16px; }
.settings-admin-profile-card p { margin: 0; color: #828ea0; font-size: 10px; line-height: 1.45; }
.settings-admin-profile-modules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 10px; }
.settings-admin-profile-modules span { padding: 4px 6px; border-radius: 999px; color: #5564b9; background: #eff2ff; font-size: 8px; font-weight: 800; }

.settings-profile-matrix-wrap { overflow-x: auto; border: 1px solid #e2e7ef; border-radius: 14px; }
.settings-profile-matrix { width: 100%; min-width: 900px; border-collapse: collapse; }
.settings-profile-matrix th, .settings-profile-matrix td { padding: 10px; border-bottom: 1px solid #edf0f4; text-align: left; }
.settings-profile-matrix th { color: #68758a; background: #f8fafc; font-size: 10px; }
.settings-profile-matrix td strong, .settings-profile-matrix td small { display: block; }
.settings-profile-matrix td strong { font-size: 11px; }
.settings-profile-matrix td small { margin-top: 2px; color: #8a95a5; font-size: 9px; }
.settings-profile-matrix .profile-matrix-group td { color: #5265ca; background: #f6f8ff; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.profile-matrix-check { width: 120px; text-align: center !important; font-weight: 900; }
.profile-matrix-check.yes { color: #087454; }
.profile-matrix-check.no { color: #bbc2cc; }
.settings-profile-note { margin-top: 12px; padding: 12px; border-radius: 12px; background: #f7f9fc; }
.settings-profile-note strong, .settings-profile-note span { display: block; }
.settings-profile-note strong { font-size: 12px; }
.settings-profile-note span { margin-top: 3px; color: #7e8a9d; font-size: 10px; }

.admin-welcome-profiled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-profile-summary {
    min-width: 210px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

.admin-profile-summary span,
.admin-profile-summary strong,
.admin-profile-summary small { display: block; }
.admin-profile-summary span { color: #c9d3e7; font-size: 9px; text-transform: uppercase; }
.admin-profile-summary strong { margin-top: 3px; color: #fff; font-size: 16px; }
.admin-profile-summary small { margin-top: 3px; color: #c9d3e7; font-size: 9px; }

.admin-module-section { margin-top: 20px; }
.admin-module-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.admin-module-section-head h2 { margin: 2px 0 0; font-size: 19px; }
.admin-module-section-head > span { color: #7e8a9c; font-size: 10px; }
.admin-module-grid-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1180px) {
    .admin-profile-grid,
    .settings-admin-profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .admin-profile-grid,
    .settings-admin-profile-grid,
    .admin-permission-groups { grid-template-columns: 1fr; }
    .admin-profile-explainer { grid-template-columns: 1fr; }
    .admin-profile-explainer > b { transform: rotate(90deg); text-align: center; }
    .admin-custom-permissions-head,
    .admin-welcome-profiled,
    .admin-module-section-head { align-items: stretch; flex-direction: column; }
    .admin-profile-summary { min-width: 0; }
}