:root {
    --font-base: "Trebuchet MS", "Segoe UI", sans-serif;
    /* Paleta institucional Laboratorios Richet */
    --brand-primary: #0052A5;
    --brand-secondary: #030B8E;
    --brand-accent: #04B1E9;
    --brand-accent-soft: #5ACEEF;
    --brand-white: #FFFFFF;
    --brand-neutral: #DADADA;
    --brand-primary-rgb: 0, 82, 165;
    --brand-secondary-rgb: 3, 11, 142;
    --brand-accent-rgb: 4, 177, 233;
    --brand-accent-soft-rgb: 90, 206, 239;
    --brand-neutral-rgb: 218, 218, 218;
    --brand-white-rgb: 255, 255, 255;
    --color-bg: var(--brand-white);
    --color-surface: var(--brand-white);
    --color-surface-alt: rgba(var(--brand-accent-soft-rgb), 0.08);
    --color-border: var(--brand-neutral);
    --color-border-strong: rgba(var(--brand-primary-rgb), 0.18);
    --color-text: var(--brand-secondary);
    --color-muted: rgba(var(--brand-secondary-rgb), 0.62);
    --color-brand: var(--brand-primary);
    --color-brand-dark: var(--brand-secondary);
    --color-primary: var(--brand-primary);
    --color-accent: var(--brand-accent);
    --color-accent-soft: var(--brand-accent-soft);
    --color-sidebar: var(--brand-white);
    --color-hover: rgba(var(--brand-accent-soft-rgb), 0.2);
    --color-active: rgba(var(--brand-primary-rgb), 0.12);
    --color-shadow: 0 16px 36px rgba(3, 11, 142, 0.08);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --sidebar-width: 266px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-soft-rgb), 0.1), transparent 24%),
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 0.6) 0%, rgba(var(--brand-white-rgb), 0.6) 100%),
        url("/assets/img/FONDO%20AZUL.jpg") center center / cover fixed no-repeat;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.5;
}

body.modal-open,
body.loading {
    overflow: hidden;
}

body.access-selector-open {
    overflow: hidden;
}

body.access-selector-open .app-shell {
    display: none;
}

body.access-transition-open {
    overflow: hidden;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

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

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--brand-white);
    border-right: 1px solid var(--color-border);
    box-shadow: 18px 0 34px rgba(3, 11, 142, 0.05);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 25;
}

.sidebar__brand,
.sidebar__user,
.sidebar__nav {
    padding-left: 18px;
    padding-right: 18px;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
}

.sidebar__logo {
    width: auto;
    height: 60px;
    object-fit: contain;
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--brand-white);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    font-weight: 700;
}

.sidebar__user strong,
.sidebar__user span {
    display: block;
}

.sidebar__user span {
    color: var(--color-muted);
    font-size: 12px;
}

.sidebar__nav {
    padding-bottom: 22px;
}

.sidebar__mode-switcher {
    margin: 0 18px 16px;
    padding: 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    background: var(--brand-white);
    box-shadow: 0 12px 28px rgba(3, 11, 142, 0.06);
}

.mode-switcher__title {
    display: block;
    margin-bottom: 10px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mode-switcher__actions {
    display: grid;
    gap: 8px;
}

.mode-switcher__button {
    width: 100%;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(var(--brand-white-rgb), 0.82);
    color: var(--color-brand-dark);
    font-weight: 600;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mode-switcher__button:hover {
    background: rgba(var(--brand-accent-rgb), 0.12);
    border-color: rgba(var(--brand-primary-rgb), 0.32);
}

.mode-switcher__button.is-active {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 1) 0%, rgba(var(--brand-secondary-rgb), 1) 100%);
    border-color: transparent;
    color: var(--brand-white);
    box-shadow: 0 12px 22px rgba(3, 11, 142, 0.18);
}

.nav-section-title {
    margin: 18px 12px 8px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar__footer {
    padding: 0 12px 20px;
    display: flex;
    gap: 10px;
}

/* Botones del footer como cards estilo admin-tool-button */
.sidebar-action-btn {
    flex: 1;
    min-width: 0;
    appearance: none;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.22) 100%);
    color: var(--brand-secondary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 8px 12px;
    box-shadow: 0 6px 18px rgba(var(--brand-secondary-rgb), 0.07);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow   0.26s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease,
                background   0.2s ease;
}

.sidebar-action-btn:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--brand-accent-rgb), 0.50);
    box-shadow: 0 16px 32px rgba(var(--brand-secondary-rgb), 0.14);
    background: linear-gradient(180deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.38) 100%);
    color: var(--brand-secondary);
}

.sidebar-action-btn:active {
    transform: scale(0.97) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.14) !important;
    background-image: none !important;
}

/* Ícono dentro del botón */
.sidebar-action-btn__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 15px;
    color: var(--brand-white);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

/* Cambiar contraseña: gradiente --b (navy → cyan-azul) */
.sidebar-action-btn .sidebar-action-btn__icon {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 6px 14px rgba(var(--brand-primary-rgb), 0.28);
}

/* Salir: gradiente --a con rojo suave */
.sidebar-action-btn--exit .sidebar-action-btn__icon {
    background: linear-gradient(135deg, #b42318, #0052A5);
    box-shadow: 0 6px 14px rgba(180, 35, 24, 0.26);
}

.sidebar-action-btn:hover .sidebar-action-btn__icon {
    transform: scale(1.12) translateY(-2px);
}

/* Pop animation en icono cuando el botón se activa */
@keyframes sidebarBtnPop {
    0%   { transform: scale(0.7); opacity: 0.5; }
    65%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.sidebar-action-btn__label {
    display: block;
    line-height: 1.25;
    max-width: 80px;
}

.nav-group + .nav-group {
    margin-top: 4px;
}

.nav-link,
.nav-sublink {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link {
    min-height: 44px;
}

.nav-link:hover,
.nav-sublink:hover {
    background: var(--color-hover);
    color: var(--brand-secondary);
}

.nav-link.is-active,
.nav-link--toggle.is-active,
.nav-sublink.is-active {
    background: var(--color-active);
    color: var(--color-brand-dark);
}

.nav-group.is-active > .nav-link--toggle {
    background: var(--color-active);
    color: var(--color-brand-dark);
}

.nav-link--toggle {
    justify-content: flex-start;
}

.nav-link__icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link__icon svg,
.nav-link__icon i,
.nav-link__chevron svg,
.nav-link__chevron i,
.topbar .icon-button svg {
    width: 100%;
    height: 100%;
}

.nav-link__icon i,
.nav-link__chevron i {
    width: auto;
    height: auto;
    font-size: 15px;
    line-height: 1;
}

.nav-link__icon svg,
.topbar .icon-button svg {
    fill: currentColor;
}

.nav-link__label {
    flex: 1;
    text-align: left;
}

.nav-link__chevron {
    width: 16px;
    min-width: 16px;
    height: 16px;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.nav-group.is-active .nav-link__chevron {
    transform: rotate(90deg);
}

.nav-submenu {
    display: none;
    padding-left: 18px;
    margin-top: 2px;
}

.nav-submenu.is-open {
    display: block;
}

.nav-sublink {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.nav-sublink.is-disabled {
    color: rgba(var(--brand-secondary-rgb), 0.36);
    cursor: default;
}

/* Estilos de .sidebar__footer .btn reemplazados por .sidebar-action-btn */

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 78px;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    backdrop-filter: blur(12px);
    background: rgba(var(--brand-white-rgb), 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__left,
.topbar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar__copy {
    display: grid;
    gap: 2px;
}

.topbar__copy strong {
    order: 2;
    line-height: 1.15;
}

.topbar__eyebrow {
    order: 1;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.topbar__description {
    order: 3;
    max-width: 760px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.status-pill {
    padding: 8px 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(var(--brand-accent-soft-rgb), 0.16);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
}

.icon-button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--brand-white);
    color: rgba(var(--brand-secondary-rgb), 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(3, 11, 142, 0.06);
}

.icon-button:hover {
    color: var(--brand-primary);
    transform: translateY(-1px);
}

.icon-button--accent {
    color: var(--brand-secondary);
}

.view-container {
    padding: 28px;
}

.page {
    display: grid;
    gap: 22px;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-header--split {
    justify-content: space-between;
}

.page-header__main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-header h1 {
    margin: 0 0 3px;
    font-size: 22px;
    font-weight: 700;
}

.page-header p {
    margin: 0;
    color: var(--color-muted);
}

.page-header__actions {
    display: flex;
    gap: 10px;
}

.page-title-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    color: var(--brand-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.page-title-icon i {
    font-size: 27px;
    line-height: 1;
}

.page-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    position: relative;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-white-rgb), 0.35), 0 12px 24px rgba(3, 11, 142, 0.12);
}

.page-icon--panel {
    background:
        radial-gradient(circle at 65% 34%, var(--brand-white) 0 22%, transparent 23%),
        conic-gradient(from -15deg, var(--brand-primary) 0 92deg, var(--brand-accent) 92deg 184deg, var(--brand-accent-soft) 184deg 274deg, var(--brand-secondary) 274deg 360deg);
}

.page-icon--panel::after {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--brand-white);
}

.page-icon--mail {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 42%, var(--brand-accent) 100%);
}

.page-icon--mail::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 13px;
    width: 24px;
    height: 17px;
    border-radius: 4px;
    background: rgba(var(--brand-white-rgb), 0.92);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 15%, 50% 56%, 100% 15%, 100% 0);
}

.page-icon--mail::after {
    content: "@";
    position: absolute;
    right: 4px;
    top: 5px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-secondary);
    color: var(--brand-white);
    font-size: 10px;
    font-weight: 700;
}

.toolbar,
.settings-panel,
.widget,
.summary-card,
.empty-state,
.detail-card,
.page-error {
    background: var(--color-surface);
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    border-radius: var(--radius-lg);
    box-shadow: var(--color-shadow);
}

.toolbar {
    padding: 16px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
}

.toolbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-group {
    min-width: 180px;
    display: grid;
    gap: 6px;
}

.field-group--grow {
    flex: 1;
}

.field-group label,
.inline-settings label {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 700;
}

input[type="date"],
input[type="search"],
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--brand-white);
    padding: 10px 12px;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(var(--brand-primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.14);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: rgba(var(--brand-neutral-rgb), 0.34);
    color: rgba(var(--brand-secondary-rgb), 0.78);
    cursor: not-allowed;
}

input[readonly],
textarea[readonly] {
    background: rgba(var(--brand-accent-soft-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.9);
}

input[readonly]:focus,
textarea[readonly]:focus {
    border-color: var(--color-border);
    box-shadow: none;
}

.small-select {
    min-width: 88px;
}

.btn {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

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

.btn--full {
    width: 100%;
    justify-content: center;
}

.btn--primary {
    color: var(--brand-white);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 12px 22px rgba(var(--brand-primary-rgb), 0.24);
}

.btn--ghost {
    color: var(--color-text);
    background: rgba(var(--brand-accent-soft-rgb), 0.14);
    border: 1px solid var(--color-border);
}

.btn--danger {
    color: var(--brand-white);
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
    box-shadow: 0 12px 22px rgba(var(--brand-secondary-rgb), 0.2);
}

.btn--danger.is-current {
    opacity: 0.92;
}

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

.summary-card {
    min-height: 132px;
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.95;
}

.summary-card--mint::before {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.18), rgba(var(--brand-accent-soft-rgb), 0.36));
}

.summary-card--coral::before {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), rgba(var(--brand-secondary-rgb), 0.28));
}

.summary-card--amber::before {
    background: linear-gradient(135deg, rgba(var(--brand-accent-soft-rgb), 0.22), rgba(var(--brand-white-rgb), 0.96));
}

.summary-card--lavender::before {
    background: linear-gradient(135deg, rgba(var(--brand-neutral-rgb), 0.56), rgba(var(--brand-accent-soft-rgb), 0.18));
}

.summary-card__content {
    position: relative;
    z-index: 1;
}

.summary-card__value {
    font-size: 48px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 4px;
}

.summary-card__label {
    font-size: 15px;
    font-weight: 700;
}

.summary-card__meta {
    margin-top: 8px;
    color: rgba(var(--brand-secondary-rgb), 0.68);
    font-size: 12px;
}

.summary-card__bar {
    margin-top: 14px;
    height: 4px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.16);
    overflow: hidden;
}

.summary-card__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(var(--brand-secondary-rgb), 0.5);
    transform-origin: left center;
    animation: summaryBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.widgets-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.widget {
    min-height: 324px;
    display: flex;
    flex-direction: column;
}

.widget:nth-child(1),
.widget:nth-child(2),
.widget:nth-child(4),
.widget:nth-child(5) {
    grid-column: span 2;
}

.widget:nth-child(3),
.widget:nth-child(6) {
    grid-column: span 2;
}

.widget__header {
    padding: 18px 18px 8px;
}

.widget__header--export {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.widget__header h2 {
    margin: 0;
    font-size: 15px;
}

.widget__header span {
    color: var(--color-muted);
    font-weight: 400;
}

.report-export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.report-export-actions .btn,
.page-header__actions .js-report-pdf-generate,
.page-header__actions .js-report-pdf-download {
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.btn[disabled],
.btn:disabled {
    opacity: 0.56;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.widget__body {
    padding: 0 18px 18px;
    flex: 1;
}

.panel-loader,
.empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: var(--color-muted);
    text-align: center;
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
}

.mini-table th,
.mini-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    font-size: 13px;
    text-align: left;
}

.mini-table th {
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mini-table tr:hover td {
    background: rgba(var(--brand-accent-soft-rgb), 0.1);
}

.mini-table button {
    color: var(--brand-primary);
    font-weight: 700;
    border: 0;
    background: transparent;
    padding: 0;
}

.mini-table button:hover {
    color: var(--color-brand-dark);
}

.table-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    color: var(--color-muted);
    font-size: 12px;
}

.chart-shell {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    align-items: center;
    gap: 18px;
    min-height: 240px;
    position: relative;
}

.widget--chart .chart-shell--sector-donut {
    grid-template-columns: minmax(180px, 230px) minmax(260px, 1fr);
    align-items: center;
    min-height: 300px;
}

.widget--chart .chart-shell--sector-donut .donut-chart {
    justify-self: center;
}

.donut-chart {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-white-rgb), 0.4);
    display: grid;
    place-items: center;
    animation: chartFloatIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.donut-chart__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.donut-chart__track {
    fill: none;
    stroke: rgba(var(--brand-neutral-rgb), 0.72);
    stroke-width: 22;
}

.donut-chart::after {
    content: "";
    position: absolute;
    inset: 42px;
    background: var(--brand-white);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-neutral-rgb), 0.9);
    z-index: 0;
}

.donut-chart__segment {
    fill: none;
    stroke-width: 22;
    stroke-dasharray: 0 var(--circumference);
    stroke-dashoffset: var(--segment-offset);
    pointer-events: stroke;
    cursor: pointer;
    opacity: 0.96;
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
    animation: donutSegmentReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--segment-delay, 0ms);
}

.donut-chart__segment:hover,
.donut-chart__segment.is-active {
    transform: scale(1.04);
    opacity: 1;
    filter: brightness(1.05);
}

.donut-chart__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    text-align: center;
    padding: 0 30px;
    pointer-events: none;
    animation: chartFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 180ms;
}

.donut-chart__label strong {
    display: block;
    font-size: 30px;
}

.donut-chart__label span {
    color: var(--color-muted);
    font-size: 12px;
}

.legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.legend-list--scrollable {
    max-height: 284px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 18px;
    background: rgba(var(--brand-white-rgb), 0.92);
    box-shadow: inset 0 1px 0 rgba(var(--brand-white-rgb), 0.9);
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.42) rgba(var(--brand-neutral-rgb), 0.42);
    scrollbar-width: thin;
}

.legend-list--scrollable::-webkit-scrollbar {
    width: 8px;
}

.legend-list--scrollable::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(var(--brand-neutral-rgb), 0.56);
}

.legend-list--scrollable::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.42);
}

.legend-list--scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb), 0.62);
}

.legend-list li {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    animation: chartFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--legend-delay, 0ms);
}

.legend-list li.is-active {
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
    transform: translateX(4px);
}

.legend-list__swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.legend-list__value {
    font-weight: 700;
}

.legend-list__meta {
    color: var(--color-muted);
    font-size: 12px;
}

.bar-chart {
    min-height: 245px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 12px;
    align-items: end;
}

.bar-chart-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px;
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.42) rgba(var(--brand-neutral-rgb), 0.42);
    scrollbar-width: thin;
}

.bar-chart-shell::-webkit-scrollbar {
    height: 8px;
}

.bar-chart-shell::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(var(--brand-neutral-rgb), 0.56);
}

.bar-chart-shell::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.42);
}

.bar-chart-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb), 0.62);
}

.bar-chart-shell .bar-chart {
    min-width: max(100%, calc(var(--bar-items, 8) * 92px));
}

.bar-group {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.bar-group__bars {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
}

.bar-group__item {
    width: 18px;
    border-radius: 8px 8px 0 0;
    position: relative;
    min-height: 0;
    height: 0;
    transform-origin: bottom center;
    opacity: 0.5;
    transition:
        height 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.55s ease,
        transform 0.22s ease,
        filter 0.22s ease;
    transition-delay: var(--bar-delay, 0ms), var(--bar-delay, 0ms), 0ms, 0ms;
    will-change: height, opacity;
}

.bar-group__item.is-bar-visible {
    height: var(--bar-height, 10%);
    opacity: 1;
}

.bar-group__item:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
}

.bar-group__item--theoretical {
    background: var(--brand-neutral);
}

.bar-group__item--worked {
    background: var(--brand-primary);
}

.bar-group__label {
    color: rgba(var(--brand-secondary-rgb), 0.72);
    font-size: 11px;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 100px;
}

.bar-group__meta {
    font-size: 11px;
    color: var(--color-muted);
    text-align: center;
    animation: chartFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 180ms;
}

.chart-tooltip {
    position: fixed;
    z-index: 90;
    min-width: 180px;
    max-width: 240px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(var(--brand-secondary-rgb), 0.96);
    color: var(--brand-white);
    box-shadow: 0 18px 32px rgba(3, 11, 142, 0.24);
    pointer-events: none;
}

.chart-tooltip[hidden] {
    display: none !important;
}

.chart-tooltip strong,
.chart-tooltip span {
    display: block;
}

.chart-tooltip strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}

.chart-tooltip span {
    color: rgba(var(--brand-white-rgb), 0.84);
    font-size: 12px;
}

.chart-tooltip__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.status-tag--pending {
    background: rgba(var(--brand-accent-soft-rgb), 0.24);
    color: var(--brand-primary);
}

.status-tag--approved {
    background: rgba(var(--brand-primary-rgb), 0.14);
    color: var(--brand-secondary);
}

.status-tag--inactive {
    background: rgba(var(--brand-neutral-rgb), 0.55);
    color: var(--brand-secondary);
}

.settings-panel {
    padding: 22px;
}

.settings-grid {
    display: grid;
    gap: 18px;
}

.field-group--inline,
.inline-settings,
.inline-actions,
.settings-row,
.inline-settings--compact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.field-group--inline {
    justify-content: space-between;
}

.day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-chip {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    background: rgba(var(--brand-accent-soft-rgb), 0.16);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-chip.is-active {
    background: var(--brand-primary);
    color: var(--brand-white);
    border-color: var(--brand-primary);
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.settings-panel__footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.settings-panel__hint {
    margin: 0;
    max-width: 540px;
    color: var(--color-muted);
    font-size: 12px;
}

.page-loader {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 28% 28%, rgba(var(--brand-accent-soft-rgb), 0.26), transparent 38%),
        radial-gradient(circle at 74% 72%, rgba(var(--brand-primary-rgb), 0.08), transparent 32%),
        rgba(var(--brand-white-rgb), 0.90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: grid;
    place-items: center;
    z-index: 50;
    animation: loaderFadeIn 0.22s ease both;
}

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

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Mascota flotante */
.loader-mascot {
    width: 160px;
    height: 160px;
    object-fit: contain;
    animation: loaderFloat 1.9s ease-in-out infinite;
    filter: drop-shadow(0 18px 34px rgba(var(--brand-primary-rgb), 0.24));
    user-select: none;
}

@keyframes loaderFloat {
    0%, 100% { transform: translateY(0px)   rotate(-1deg); }
    50%       { transform: translateY(-10px) rotate(1deg);  }
}

/* Texto */
.loader-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.loader-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.loader-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}

/* Puntos animados */
.loader-dots {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 0;
    animation: loaderDots 1.6s steps(4, end) infinite;
}

.loader-dots::after {
    content: "...";
}

@keyframes loaderDots {
    0%   { width: 0; }
    100% { width: 1.5em; }
}

/* Barra de progreso pulsante */
.loader-bar {
    width: 120px;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--brand-neutral-rgb), 0.38);
    overflow: hidden;
}

.loader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
    animation: loaderBarSlide 1.4s ease-in-out infinite;
}

@keyframes loaderBarSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%);  }
}

.page-loader[hidden],
.modal[hidden],
.app-modal[hidden],
[hidden] {
    display: none !important;
}

.spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(var(--brand-accent-soft-rgb), 0.32);
    border-top-color: var(--brand-primary);
    animation: spin 0.9s linear infinite;
}

.modal,
.app-modal {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2000;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--brand-secondary-rgb), 0.52);
    backdrop-filter: blur(4px);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    background: var(--brand-white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 50px rgba(3, 11, 142, 0.24);
}

.modal--password-recovery .modal__dialog {
    width: min(620px, calc(100vw - 28px));
}

.modal--password-change .modal__dialog {
    width: min(560px, calc(100vw - 28px));
}

.modal--password-recovery .modal__header,
.modal--password-recovery .modal__content {
    text-align: center;
}

.password-change-form {
    display: grid;
    gap: 16px;
}

.password-change-form__intro {
    margin: 0;
    color: var(--color-muted);
}

.password-change-form__user {
    padding: 12px 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.9);
    border-radius: 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.16);
    font-weight: 800;
}

.password-change-form__user small {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-weight: 700;
}

.password-change-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-password-reset-form {
    display: grid;
    gap: 16px;
}

.admin-password-reset-form__modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-password-reset-form__modes label,
.admin-password-reset-form .checkbox-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.92);
    color: var(--brand-secondary);
    font-weight: 800;
}

.admin-password-reset-form__section {
    display: grid;
    gap: 14px;
}

.admin-password-reset-form .form-grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .admin-password-reset-form__modes,
    .admin-password-reset-form .form-grid--two {
        grid-template-columns: 1fr;
    }
}

.modal:not([hidden]) .modal__backdrop {
    animation: modalBackdropFadeIn 0.22s ease-out both;
}

.modal:not([hidden]) .modal__dialog {
    animation: modalDialogPopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal.is-closing .modal__backdrop {
    animation: modalBackdropFadeOut 0.18s ease-in both;
}

.modal.is-closing .modal__dialog {
    animation: modalDialogPopOut 0.18s ease-in both;
}

.modal__header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__header h3 {
    margin: 0;
}

.modal__content {
    padding: 22px;
    overflow: auto;
}

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: grid;
    gap: 10px;
    z-index: 60;
}

.toast {
    min-width: 280px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--brand-white);
    box-shadow: 0 18px 32px rgba(3, 11, 142, 0.24);
}

.toast--success {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
}

.toast--error {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
}

.toast--info {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-soft));
}

.access-transition {
    position: fixed;
    inset: 0;
    z-index: 72;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at center, rgba(var(--brand-accent-soft-rgb), 0.18), transparent 28%),
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 0.94), rgba(var(--brand-accent-soft-rgb), 0.18));
    backdrop-filter: blur(10px);
}

.access-transition__panel {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    min-width: min(440px, 100%);
    padding: 36px 28px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 0.96), rgba(var(--brand-white-rgb), 0.9));
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    box-shadow: 0 28px 54px rgba(3, 11, 142, 0.2);
    overflow: hidden;
}

.access-transition__halo {
    position: absolute;
    inset: auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.2), rgba(var(--brand-accent-soft-rgb), 0.02) 68%, transparent 72%);
    animation: access-pulse 1.9s ease-in-out infinite;
}

.access-transition__logo-shell {
    position: relative;
    width: 164px;
    height: 164px;
    display: grid;
    place-items: center;
    border-radius: 36px;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--brand-white-rgb), 1), rgba(var(--brand-white-rgb), 0.92) 44%, rgba(var(--brand-accent-soft-rgb), 0.18) 100%);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    box-shadow:
        inset 0 1px 0 rgba(var(--brand-white-rgb), 0.92),
        0 20px 38px rgba(3, 11, 142, 0.16);
    animation: access-float 1.9s ease-in-out infinite;
    z-index: 1;
}

.access-transition__logo-shell::before,
.access-transition__logo-shell::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 42px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    opacity: 0;
    animation: access-ring 1.9s ease-out infinite;
}

.access-transition__logo-shell::after {
    animation-delay: 0.45s;
}

.access-transition__logo {
    width: 112px;
    height: auto;
    object-fit: contain;
    animation: access-logo-in 1s ease-out both;
}

.access-transition__eyebrow {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--brand-primary-rgb), 0.72);
}

.access-transition__title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    line-height: 1.08;
    color: var(--brand-secondary);
    text-align: center;
}

.access-transition__subtitle {
    position: relative;
    z-index: 1;
    color: var(--color-muted);
    text-align: center;
}

.access-selector {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-soft-rgb), 0.18), transparent 24%),
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 1) 0%, rgba(var(--brand-accent-soft-rgb), 0.18) 100%);
}

.access-selector__panel {
    width: min(560px, 100%);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-soft-rgb), 0.24), transparent 28%),
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 1), rgba(var(--brand-accent-soft-rgb), 0.08));
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.92);
    box-shadow: 0 28px 54px rgba(3, 11, 142, 0.2);
    padding: 28px;
}

.access-selector__header {
    text-align: center;
}

.access-selector__brand {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.access-selector__logo-shell {
    width: 142px;
    min-height: 110px;
    padding: 16px 18px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-white-rgb), 0.9) 42%, rgba(var(--brand-accent-soft-rgb), 0.14) 100%);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    box-shadow:
        inset 0 1px 0 rgba(var(--brand-white-rgb), 0.92),
        0 16px 28px rgba(3, 11, 142, 0.1);
    position: relative;
    overflow: hidden;
}

.access-selector__logo-shell::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.16);
    pointer-events: none;
}

.access-selector__logo {
    width: 100%;
    max-width: 110px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.access-selector__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.access-selector__eyebrow::before,
.access-selector__eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0), rgba(var(--brand-primary-rgb), 0.38), rgba(var(--brand-primary-rgb), 0));
}

.access-selector__header h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--brand-secondary);
}

.access-selector__subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(var(--brand-accent-soft-rgb), 0.16);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.access-selector__header p {
    margin: 0;
    max-width: 460px;
    color: var(--color-muted);
    text-wrap: balance;
}

.login-form {
    margin-top: 22px;
    display: grid;
    gap: 16px;
}

.login-form__actions {
    display: flex;
    justify-content: stretch;
}

.login-form__secondary {
    margin-top: -6px;
    text-align: center;
}

.login-recovery-link {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
}

.login-recovery-link:hover,
.login-recovery-link:focus {
    color: var(--brand-secondary);
    text-decoration: underline;
}

.password-recovery-form {
    width: min(520px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.password-recovery-form__intro {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
    text-align: center;
}

.password-recovery-form__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.password-recovery-form .field-group {
    width: min(100%, 420px);
    margin-inline: auto;
}

.password-recovery-form__result {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    line-height: 1.5;
    font-weight: 700;
}

.password-recovery-form__result.is-success {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.28);
    color: #166534;
}

.password-recovery-form__result.is-warning {
    background: rgba(var(--brand-accent-soft-rgb), 0.14);
    border-color: rgba(var(--brand-accent-rgb), 0.26);
    color: var(--brand-secondary);
}

.password-recovery-form__result.is-error {
    background: rgba(180, 35, 24, 0.08);
    border-color: rgba(180, 35, 24, 0.28);
    color: #b42318;
}

.login-help {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

.login-help strong {
    display: block;
    margin-bottom: 6px;
}

.login-help p {
    margin: 4px 0;
    color: var(--color-muted);
}

.login-help__code {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--brand-white-rgb), 0.92);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    color: var(--brand-secondary);
    font-weight: 700;
}

.skeleton {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--brand-neutral-rgb), 0.34), rgba(var(--brand-white-rgb), 0.9), rgba(var(--brand-neutral-rgb), 0.34));
    animation: shimmer 1.4s infinite linear;
}

.skeleton--title {
    width: 52%;
    height: 14px;
}

.skeleton--metric {
    width: 42%;
    height: 48px;
    margin-top: 10px;
}

.skeleton--line {
    width: 100%;
    height: 4px;
    margin-top: 16px;
}

.summary-card.is-loading {
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 1), rgba(var(--brand-accent-soft-rgb), 0.14));
}

.detail-card {
    padding: 18px;
}

.detail-card--person-record,
.legajo-digital-modal--person-record {
    width: min(100%, 980px);
    margin-inline: auto;
}

.detail-card--person-record {
    padding: 20px 24px;
}

.detail-card--person-record .mini-table th {
    width: 34%;
}

.detail-card--person-record .mini-table td {
    width: 66%;
}

.page[data-page="empleado-legajo"] .detail-card--person-record {
    width: min(100%, 760px);
    padding: 18px 20px;
}

.page[data-page="empleado-legajo"] .detail-card__section + .detail-card__section {
    margin-top: 10px;
}

.page[data-page="empleado-legajo"] .detail-card--person-record .mini-table th,
.page[data-page="empleado-legajo"] .detail-card--person-record .mini-table td {
    padding: 8px 8px;
}

.page[data-page="empleado-legajo"] .detail-card--person-record .mini-table th {
    width: 42%;
}

.page[data-page="empleado-legajo"] .detail-card--person-record .mini-table td {
    width: 58%;
}

.employee-email-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.employee-email-value {
    min-width: 180px;
}

.employee-email-form {
    display: grid;
    grid-template-columns: minmax(220px, 360px) auto auto;
    align-items: start;
    gap: 8px;
}

.employee-email-form input[type="email"] {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    background: var(--brand-white);
}

.employee-email-form .field-error {
    grid-column: 1 / -1;
}

.page[data-page="empleado-fichadas"] .widget {
    max-width: 940px;
    margin-inline: auto;
}

.page[data-page="empleado-fichadas"] .widget__body {
    padding: 0 18px 16px;
}

.page[data-page="empleado-fichadas"] .dt-container,
.page[data-page="empleado-fichadas"] .dataTables_wrapper {
    max-width: 860px;
    margin-inline: auto;
}

.page[data-page="empleado-fichadas"] .dt-container .dt-layout-row,
.page[data-page="empleado-fichadas"] .dataTables_wrapper .row {
    justify-content: space-between;
}

.page[data-page="empleado-fichadas"] .dt-container .dt-search input {
    width: 180px;
}

.page[data-page="empleado-fichadas"] .mini-table--timecards th,
.page[data-page="empleado-fichadas"] .mini-table--timecards td {
    padding: 8px 10px;
}

.page[data-page="empleado-fichadas"] .mini-table--timecards th:nth-child(1),
.page[data-page="empleado-fichadas"] .mini-table--timecards td:nth-child(1) {
    width: 24%;
}

.page[data-page="empleado-fichadas"] .mini-table--timecards th:nth-child(2),
.page[data-page="empleado-fichadas"] .mini-table--timecards td:nth-child(2) {
    width: 26%;
}

.page[data-page="empleado-fichadas"] .mini-table--timecards th:nth-child(3),
.page[data-page="empleado-fichadas"] .mini-table--timecards td:nth-child(3),
.page[data-page="empleado-fichadas"] .mini-table--timecards th:nth-child(4),
.page[data-page="empleado-fichadas"] .mini-table--timecards td:nth-child(4) {
    width: 25%;
    text-align: center;
}

.page[data-page="empleado-fichadas"] .table-footer {
    max-width: 860px;
    margin-inline: auto;
}

/* Empleado panel: tabla con scroll horizontal dentro del widget */
.page[data-page="empleado-panel"] .widget {
    overflow: hidden;
}

/* Widget body es el único contenedor de scroll — sin padding horizontal */
.page[data-page="empleado-panel"] .widget__body {
    padding: 0 0 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTable wrapper: overflow visible para que el padre haga el scroll */
.page[data-page="empleado-panel"] .widget__body .dt-container,
.page[data-page="empleado-panel"] .widget__body .dataTables_wrapper {
    overflow-x: visible;
    min-width: 520px;
    padding: 0 18px;
}

/* La tabla usa el ancho disponible del wrapper */
.page[data-page="empleado-panel"] .widget__body .dt-container table.dataTable,
.page[data-page="empleado-panel"] .widget__body .dataTables_wrapper table.dataTable {
    width: 100% !important;
}

/* Pie del DataTable con padding */
.page[data-page="empleado-panel"] .table-footer {
    min-width: 520px;
    padding: 8px 18px 0;
    font-size: 11.5px;
    color: var(--color-muted);
}

/* Empty state con padding */
.page[data-page="empleado-panel"] .empty-state {
    padding: 0 18px;
    min-height: 160px;
}

.detail-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-card__header h4,
.detail-card__section h5 {
    margin: 0 0 4px;
}

.detail-card__meta {
    color: var(--color-muted);
    font-size: 13px;
}

.detail-card__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.widget--auto {
    min-height: auto;
}

.gestion-empleados-lookup {
    margin-bottom: 18px;
}

.gestion-empleados-onboarding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 20px;
    background: rgba(var(--brand-white-rgb), 0.98);
    box-shadow: var(--shadow-soft);
}

.gestion-empleados-onboarding h2 {
    margin: 8px 0 6px;
    color: var(--brand-secondary);
    font-size: 22px;
}

.gestion-empleados-onboarding p {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
}

.gestion-empleados-onboarding .btn {
    white-space: nowrap;
}

.gestion-empleados-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.gestion-empleados-form {
    display: grid;
    gap: 16px;
}

.gestion-empleados-section {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
    border-radius: 18px;
    background: rgba(var(--brand-white-rgb), 0.96);
    padding: 18px;
}

.gestion-empleados-section__title {
    margin: 0 0 14px;
    color: var(--brand-secondary);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.employee-form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.gestion-empleados-meta {
    padding: 14px 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.1);
    display: grid;
    gap: 10px;
}

.gestion-empleados-meta p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}

.gestion-empleados-meta__status,
.gestion-empleados-meta__grid {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gestion-empleados-meta__grid span {
    color: var(--color-text);
    font-size: 12px;
}

.gestion-empleados-form.is-readonly .gestion-empleados-section {
    background: rgba(var(--brand-neutral-rgb), 0.12);
}

.gestion-empleados-modal-form {
    animation: modalDialogPopIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gestion-empleados-modal-actions {
    margin-top: 4px;
}

.gestion-empleados-detail-modal {
    animation: modalDialogPopIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gestion-empleados-detail-actions {
    gap: 12px;
}

.gestion-empleados-row.is-selected td {
    background: rgba(var(--brand-accent-soft-rgb), 0.14);
}

.gestion-empleados-name {
    display: block;
}

.gestion-empleados-inline-note {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    margin-top: 2px;
}

.gestion-empleados-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gestion-empleados-schedule-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gestion-empleados-schedule-help {
    flex: 1 1 100%;
    color: var(--color-muted);
    font-size: 12px;
}

/* ── Rol jerárquico toggle ── */
.rol-toggle {
    display: flex;
    gap: 10px;
}

.rol-toggle__option {
    flex: 1;
    cursor: pointer;
}

.rol-toggle__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rol-toggle__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1.5px solid rgba(var(--brand-primary-rgb), 0.15);
    border-radius: 12px;
    background: rgba(var(--brand-neutral-rgb), 0.04);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    height: 100%;
}

.rol-toggle__option input[type="radio"]:checked + .rol-toggle__label {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.06);
}

.rol-toggle__label i {
    font-size: 20px;
    color: var(--brand-secondary);
    margin-bottom: 4px;
}

.rol-toggle__option input[type="radio"]:checked + .rol-toggle__label i {
    color: var(--brand-primary);
}

.rol-toggle__label strong {
    font-size: 13px;
    color: var(--brand-dark);
    font-weight: 600;
}

.rol-toggle__label em {
    font-size: 11px;
    font-style: normal;
    color: var(--brand-secondary);
}

.gestion-empleados-form.is-readonly .rol-toggle__option {
    cursor: default;
}

/* ── Colaboradores a cargo ── */
.colaboradores-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 8px;
}

.colaboradores-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-secondary);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

.colaboradores-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.1);
    vertical-align: middle;
}

.colaboradores-count {
    font-size: 11px;
    color: var(--brand-secondary);
    margin: 6px 0 10px;
}

.colaboradores-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}

.colaboradores-add-row .select2-container {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .rol-toggle { flex-direction: column; }
    .colaboradores-add-row { flex-direction: column; align-items: stretch; }
    .concepto-grid { grid-template-columns: repeat(2, 1fr); }
}

.gestion-empleados-schedule-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.1);
}

.gestion-empleados-schedule-preview span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gestion-empleados-schedule-preview strong {
    color: var(--brand-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gestion-empleados-schedule-preview em {
    color: var(--color-text);
    font-style: normal;
    font-weight: 700;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-secondary);
    font-weight: 700;
}

.checkbox-field--standalone {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 14px;
    background: rgba(var(--brand-white-rgb), 0.72);
}

.checkbox-field input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.horario-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.horario-editor-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.horario-editor-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 11, 142, 0.22);
    backdrop-filter: blur(4px);
}

.horario-editor-modal__dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 22px;
    background: rgba(var(--brand-white-rgb), 0.98);
    box-shadow: 0 24px 70px rgba(0, 82, 165, 0.18);
    animation: modalDialogPopIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.horario-editor-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}

.horario-editor-modal__header h3 {
    margin: 8px 0 0;
    color: var(--brand-secondary);
    font-size: 24px;
}

.horario-editor-form {
    display: grid;
    gap: 16px;
    padding: 20px 24px 24px;
}

.leave-request-shell {
    display: grid;
    gap: 18px;
    position: relative;
}

.leave-panel-selector {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.leave-request-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.leave-request-forms {
    display: grid;
    gap: 20px;
}

.leave-request-card {
    overflow: hidden;
}

.leave-request-panel {
    display: none;
}

.leave-request-panel[hidden] {
    display: none !important;
}

.leave-request-panel:target {
    display: block;
    animation: leavePanelReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.leave-request-panel.is-active {
    display: block;
    animation: leavePanelReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.leave-request-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    background: rgba(var(--brand-accent-soft-rgb), 0.08);
}

.leave-request-card__header h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.leave-request-card__header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.55;
}

.leave-request-card__body {
    padding: 20px;
    display: grid;
    gap: 18px;
}

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

/* Botón de selección: card con ícono */
.leave-shortcut {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 14px 18px;
    border-radius: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    background: linear-gradient(180deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.20) 100%);
    color: var(--brand-secondary);
    font-weight: 600;
    font-size: 13.5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(var(--brand-secondary-rgb), 0.07);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease,
                background 0.2s ease;
}

/* Ícono dentro del botón */
.leave-shortcut__icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 20px;
    color: var(--brand-white);
    box-shadow: 0 8px 18px rgba(var(--brand-primary-rgb), 0.26);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.leave-shortcut__icon--a { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); }
.leave-shortcut__icon--b { background: linear-gradient(135deg, var(--brand-secondary), #0469c0); box-shadow: 0 8px 18px rgba(3,11,142,0.28); }
.leave-shortcut__icon--c { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); box-shadow: 0 8px 18px rgba(4,177,233,0.24); }

.leave-shortcut__label {
    line-height: 1.25;
}

/* Hover: eleva la card */
.leave-shortcut:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--brand-accent-rgb), 0.52);
    box-shadow: 0 20px 40px rgba(var(--brand-secondary-rgb), 0.14);
}

.leave-shortcut:hover .leave-shortcut__icon {
    transform: scale(1.12) translateY(-2px);
}

/* Secundarios (Carga de certificados, Estado) */
.leave-shortcut--secondary {
    background: linear-gradient(180deg, var(--brand-white) 0%, rgba(var(--brand-primary-rgb), 0.08) 100%);
    border-color: rgba(var(--brand-secondary-rgb), 0.14);
}

/* Estado activo (radio checked) */
.leave-shortcut.is-active {
    background: linear-gradient(160deg, rgba(4, 177, 233, 0.20), rgba(90, 206, 239, 0.10));
    border: 2px solid #04B1E9;
    color: #030B8E;
    box-shadow: 0 0 0 4px rgba(4, 177, 233, 0.16), 0 12px 28px rgba(4, 177, 233, 0.18);
    transform: translateY(-3px);
}

#leave-panel-special:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-special"],
#leave-panel-exam:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-exam"],
#leave-panel-vacation:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-vacation"],
#leave-panel-advance-loan:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-advance-loan"],
#leave-panel-certificate:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-certificate"],
#leave-panel-status:checked ~ .leave-request-selector .leave-shortcut[for="leave-panel-status"] {
    background: linear-gradient(160deg, rgba(4, 177, 233, 0.20), rgba(90, 206, 239, 0.10));
    border: 2px solid #04B1E9;
    color: #030B8E;
    box-shadow: 0 0 0 4px rgba(4, 177, 233, 0.16), 0 12px 28px rgba(4, 177, 233, 0.18);
    transform: translateY(-3px);
}

#leave-panel-special:checked ~ .leave-request-layout #leave-special-permission,
#leave-panel-exam:checked ~ .leave-request-layout #leave-exam-permission,
#leave-panel-vacation:checked ~ .leave-request-layout #leave-vacation-request,
#leave-panel-advance-loan:checked ~ .leave-request-layout #leave-advance-loan-request,
#leave-panel-certificate:checked ~ .leave-request-layout #leave-certificate-upload,
#leave-panel-status:checked ~ .leave-request-layout #leave-request-status {
    display: block;
    animation: leavePanelReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.leave-form-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.leave-form-prose {
    display: grid;
    gap: 14px;
}

.leave-form-prose__line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(var(--brand-primary-rgb), 0.14);
}

.leave-form-prose__line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.leave-form-prose__lead {
    padding-top: 31px;
    color: var(--color-brand-dark);
    font-size: 14px;
    line-height: 1.5;
}

.leave-inline-field {
    flex: 1 1 180px;
    min-width: 180px;
}

.leave-inline-field--wide {
    flex-basis: 280px;
}

.leave-note-box {
    padding: 16px 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.16));
    color: var(--color-brand-dark);
    font-size: 13px;
    line-height: 1.65;
}

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

.leave-option-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 122px;
    padding: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.98);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.leave-option-card:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.26);
    box-shadow: 0 12px 26px rgba(3, 11, 142, 0.08);
    transform: translateY(-1px);
}

.leave-option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.leave-option-card.is-active {
    border-color: rgba(var(--brand-primary-rgb), 0.34);
    background: linear-gradient(180deg, rgba(var(--brand-white-rgb), 1) 0%, rgba(var(--brand-accent-soft-rgb), 0.18) 100%);
    box-shadow: 0 14px 28px rgba(3, 11, 142, 0.12);
}

.leave-option-card__title {
    color: var(--color-brand-dark);
    font-size: 15px;
    font-weight: 700;
}

.leave-option-card__meta {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.55;
}

.leave-conditional {
    display: none;
}

.leave-conditional.is-active {
    display: block;
}

.leave-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.1);
}

.leave-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--brand-primary);
}

.leave-checkbox__copy strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-brand-dark);
}

.leave-checkbox__copy span {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.field-error {
    min-height: 18px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}

.field-error:empty {
    min-height: 0;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.js-permission-type-group.is-invalid {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.js-permission-type-group.is-invalid {
    padding: 10px;
    border-radius: 18px;
}

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

.leave-status-box {
    padding: 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 14px;
    background: rgba(var(--brand-white-rgb), 0.94);
}

.leave-status-box span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}

.leave-status-box strong {
    display: block;
    margin-top: 6px;
    color: var(--color-brand-dark);
    font-size: 24px;
}

@media (max-width: 1200px) {
    .leave-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 640px) {
    .leave-shortcuts {
        grid-template-columns: 1fr;
    }
}

.field-error--warning {
    color: #9a6700;
}

input.is-warning,
select.is-warning,
textarea.is-warning {
    border-color: #9a6700;
    box-shadow: 0 0 0 3px rgba(154, 103, 0, 0.12);
}

.vacation-request-card {
    display: grid;
    gap: 0;
}

.empleado-vacaciones-page {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(560px, 680px);
    align-items: center;
    gap: 22px;
}

.empleado-vacaciones-page__header {
    width: 100%;
    grid-column: 1;
}

.empleado-vacaciones-page__header .page-title-icon {
    flex: 0 0 auto;
}

.empleado-vacaciones-page__summary {
    width: min(100%, 680px);
    margin-inline: 0;
    justify-self: end;
    grid-column: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.empleado-vacaciones-page__form,
.empleado-vacaciones-page__history {
    width: 100%;
    grid-column: 1 / -1;
}

.vacation-request-summary {
    padding: 16px 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.14));
}

.vacation-request-summary strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-brand-dark);
}

.vacation-request-summary p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.vacation-request-summary.is-warning {
    border-color: rgba(154, 103, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 247, 230, 0.96), rgba(255, 255, 255, 0.98));
}

.reportes-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.96), rgba(var(--brand-accent-soft-rgb), 0.14));
    color: var(--color-muted);
}

.reportes-note strong {
    color: var(--brand-secondary);
    white-space: nowrap;
}

.reportes-grid > .widget {
    grid-column: span 3 !important;
}

.reportes-grid > .reportes-widget--full {
    grid-column: 1 / -1 !important;
}

.reportes-absence-filters {
    align-items: end;
    margin-bottom: 18px;
}

.reportes-absence-filters .field-group {
    min-width: 170px;
}

.reportes-absence-filters .field-group--wide {
    min-width: min(100%, 260px);
    flex: 1 1 260px;
}

.reportes-absence-summary {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.reportes-absence-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.reportes-absence-cards article {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.16));
}

.reportes-absence-cards span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-muted);
    font-size: 12px;
}

.reportes-absence-cards strong {
    color: var(--brand-secondary);
    font-size: 28px;
    line-height: 1;
}

.reportes-absence-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reportes-absence-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.78);
}

.reportes-absence-group strong {
    flex: 0 0 100%;
    color: var(--brand-secondary);
}

.reportes-absence-group span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.08);
    color: var(--brand-secondary);
    font-size: 12px;
}

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

.reportes-subgroup-grid .field-group--wide {
    grid-column: 1 / -1;
}

.reportes-subgroup-grid select[multiple] {
    min-height: 260px;
    padding: 10px;
}

.reportes-subgroup-grid small {
    color: var(--color-muted);
    font-size: 12px;
}

.reportes-leave-list {
    display: grid;
    gap: 14px;
    min-height: 240px;
    align-content: start;
}

.reportes-leave-item {
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.12));
    text-align: left;
    display: grid;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: chartFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--report-delay, 0ms);
}

.reportes-leave-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-primary-rgb), 0.2);
    box-shadow: 0 16px 28px rgba(3, 11, 142, 0.12);
}

.reportes-leave-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.reportes-leave-item__summary strong {
    color: var(--brand-secondary);
    font-size: 14px;
}

.reportes-leave-item__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 12px;
}

.reportes-leave-item__track {
    height: 10px;
    border-radius: 999px;
    background: rgba(var(--brand-neutral-rgb), 0.5);
    overflow: hidden;
}

.reportes-leave-item__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transform-origin: left center;
    animation: summaryBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reportes-leave-item__meta {
    font-size: 12px;
    color: var(--color-muted);
}

.stat-box {
    padding: 14px;
    border-radius: 14px;
    background: var(--color-surface-alt);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}

.stat-box span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}

.stat-box strong {
    display: block;
    margin-top: 4px;
    font-size: 24px;
}

.recipient-shell {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 1fr);
    gap: 20px;
}

.recipient-panel {
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.92);
    border-radius: 18px;
    background: var(--brand-white);
    overflow: hidden;
}

.recipient-panel__header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    background: rgba(var(--brand-accent-soft-rgb), 0.08);
}

.recipient-panel__header h4 {
    margin: 0 0 2px;
}

.recipient-panel__header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}

.recipient-panel__body {
    padding: 18px;
}

.recipient-filter {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    gap: 10px;
    margin-bottom: 16px;
}

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

.recipient-item {
    padding: 12px 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.92);
    border-radius: 14px;
    background: var(--brand-white);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.recipient-item:hover,
.recipient-item.is-active {
    border-color: rgba(var(--brand-primary-rgb), 0.3);
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
}

.recipient-item__copy strong,
.recipient-item__copy span {
    display: block;
}

.recipient-item__copy span {
    color: var(--color-muted);
    font-size: 12px;
}

.recipient-form {
    display: grid;
    gap: 12px;
}

.recipient-form__row {
    display: grid;
    gap: 6px;
}

.recipient-form__row--inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.recipient-form__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.empty-note {
    color: var(--color-muted);
    font-size: 12px;
}

.request-detail-shell {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    box-shadow: 0 14px 32px rgba(3, 11, 142, 0.08);
}

.request-detail-shell__header {
    align-items: flex-start;
    gap: 16px;
}

.request-detail-shell__subtitle {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.request-detail-layout {
    display: grid;
    gap: 18px;
}

.request-detail-section {
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.92);
    border-radius: 18px;
    background: rgba(var(--brand-white-rgb), 0.98);
    padding: 18px;
}

.request-detail-section__header {
    margin-bottom: 12px;
}

.request-detail-section__header h3 {
    margin: 0;
    font-size: 15px;
}

.request-detail-section__header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

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

.request-detail-field {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.8);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.06);
}

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

.request-detail-field span {
    color: var(--color-muted);
    font-size: 12px;
}

.request-detail-field strong {
    color: var(--brand-secondary);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.request-detail-statuses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.request-detail-status {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.8);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.05);
}

.request-detail-status span {
    color: var(--color-muted);
    font-size: 12px;
}

.request-history,
.request-attachments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.request-history__item,
.request-attachments__item {
    padding: 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.82);
    border-radius: 14px;
    background: rgba(var(--brand-white-rgb), 0.98);
}

.request-history__item p,
.request-attachments__item span,
.request-attachments__item strong {
    margin: 0;
}

.request-history__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.request-history__meta span,
.request-attachments__item span {
    color: var(--color-muted);
    font-size: 12px;
}

.request-attachments__item {
    display: grid;
    gap: 4px;
}

.request-detail-actions {
    margin-top: 18px;
}

.request-decision-panel {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 18px;
    background: rgba(var(--brand-accent-soft-rgb), 0.08);
}

.request-detail-actions__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.request-detail-actions--modal {
    margin-top: 0;
    padding-top: 18px;
}

#global-modal .request-detail-modal {
    display: grid;
    gap: 14px;
}

#global-modal .request-detail-modal .request-detail-layout {
    gap: 12px;
}

#global-modal .request-detail-modal .request-detail-section {
    padding: 14px;
}

#global-modal .request-detail-modal .request-detail-section[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

#global-modal .request-detail-modal .request-detail-section__header {
    margin-bottom: 8px;
}

#global-modal .request-detail-modal .request-detail-grid,
#global-modal .request-detail-modal .request-detail-statuses {
    gap: 10px;
}

#global-modal .request-detail-modal .request-detail-field,
#global-modal .request-detail-modal .request-detail-status,
#global-modal .request-detail-modal .request-history__item,
#global-modal .request-detail-modal .request-attachments__item {
    padding: 10px 12px;
}

#global-modal .request-detail-modal .request-detail-actions--modal {
    padding-top: 0;
}

#global-modal .request-detail-modal .request-decision-panel {
    padding: 14px;
}

#global-modal .request-detail-modal .js-request-decision-comment {
    min-height: 82px;
}

.request-detail-note {
    padding: 14px 16px;
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.28);
    border-radius: 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.06);
    color: var(--brand-secondary);
    font-weight: 500;
}

.request-detail-error {
    display: block;
    color: #b42318;
    font-size: 12px;
}

.page-error {
    padding: 28px;
}

.page-icon--module {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent-soft));
}

.page-icon--module::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 0.96), rgba(var(--brand-accent-soft-rgb), 0.12));
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.2);
}

.page-icon--module::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 16px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand-secondary);
    box-shadow: 0 8px 0 rgba(var(--brand-accent-soft-rgb), 0.78), 0 16px 0 rgba(var(--brand-accent-soft-rgb), 0.78);
}

.module-landing {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-card {
    background: var(--brand-white);
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    border-radius: var(--radius-lg);
    box-shadow: var(--color-shadow);
    padding: 22px;
}

.module-card--primary {
    background:
        radial-gradient(circle at top right, rgba(var(--brand-primary-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 1) 0%, rgba(var(--brand-white-rgb), 1) 100%);
}

.module-card h2 {
    margin: 0 0 10px;
    font-size: 16px;
}

.module-card p {
    margin: 0;
    color: var(--color-muted);
}

.admin-tools-panel {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-rgb), 0.12), transparent 34%),
        rgba(var(--brand-white-rgb), 0.98);
    box-shadow: var(--color-shadow);
}

.admin-tools-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-tools-panel__header h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.admin-tools-panel__header p {
    margin: 0;
    color: var(--color-muted);
}

.admin-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
    gap: 16px;
    justify-content: center;
    align-items: stretch;
}

.admin-tool-button {
    appearance: none;
    display: flex;
    width: 148px;
    min-height: 148px;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 1) 0%, rgba(var(--brand-accent-soft-rgb), 0.24) 100%);
    color: var(--brand-secondary);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(var(--brand-secondary-rgb), 0.08);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.admin-tool-button:hover,
.admin-tool-button:focus-visible {
    border-color: rgba(var(--brand-accent-rgb), 0.62);
    background:
        linear-gradient(180deg, rgba(var(--brand-white-rgb), 1) 0%, rgba(var(--brand-accent-soft-rgb), 0.42) 100%);
    box-shadow: 0 18px 34px rgba(var(--brand-secondary-rgb), 0.14);
    color: var(--brand-secondary);
    transform: translateY(-2px);
}

.admin-tool-button__icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--brand-white);
    font-size: 20px;
    box-shadow: 0 12px 22px rgba(var(--brand-primary-rgb), 0.2);
}

.admin-tool-button strong {
    font-size: 14px;
    line-height: 1.25;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal--password-required .modal__header .js-modal-close,
.modal--password-required .password-change-form__actions .js-modal-close {
    display: none;
}

.module-landing--admin-summary {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
    .admin-tools-grid {
        grid-template-columns: repeat(2, minmax(132px, 1fr));
    }

    .admin-tool-button {
        width: 100%;
        min-height: 132px;
    }
}

.carga-novedades-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.carga-vacaciones-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.carga-vacaciones-form-card,
.carga-vacaciones-history-card {
    grid-column: 1 / -1;
}

.admin-vacation-employee-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-vacation-employee-card > div,
.admin-vacation-summary__item {
    padding: 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.92);
}

.admin-vacation-employee-card span,
.admin-vacation-summary__item span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}

.admin-vacation-employee-card strong,
.admin-vacation-summary__item strong {
    display: block;
    margin-top: 6px;
    color: var(--brand-secondary);
    font-size: 18px;
}

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

.carga-vacaciones-history-card .mini-table td:nth-child(6) {
    max-width: 360px;
    white-space: normal;
}

.vac-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.vac-tab {
    border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
    background: rgba(var(--brand-white-rgb), 0.92);
    color: var(--brand-secondary);
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(var(--brand-primary-rgb), 0.08);
}

.vac-tab.is-active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--brand-white);
    border-color: transparent;
}

.vac-tab-panel {
    display: none;
}

.vac-tab-panel.is-active {
    display: block;
    animation: viewReveal 0.22s ease-out;
}

.vac-filter {
    margin-bottom: 18px;
}

.vac-filter__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0;
    color: var(--brand-secondary);
    font-weight: 600;
}

.vac-summary-cards {
    margin-bottom: 18px;
}

.vac-manual-layout {
    margin-top: 18px;
}

.vac-result-number {
    display: grid;
    min-height: 44px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--brand-accent-soft-rgb), 0.15);
    color: var(--brand-secondary);
    font-size: 24px;
    font-weight: 800;
}

.vac-import-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.vac-import-summary article {
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    border-radius: 14px;
    padding: 14px;
    background: rgba(var(--brand-white-rgb), 0.94);
}

.vac-import-summary span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.vac-import-summary strong {
    color: var(--brand-secondary);
    font-size: 22px;
}

.vac-employee-readonly {
    display: grid;
    gap: 18px;
}

.vac-employee-readonly h3 {
    margin: 0 0 10px;
    color: var(--brand-secondary);
    font-size: 16px;
}

.empleado-vacaciones-page .vac-control-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: fit-content;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.28);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.92);
    color: var(--brand-secondary);
    box-shadow: 0 12px 28px rgba(0, 82, 165, 0.08);
}

.empleado-vacaciones-page .vac-control-note strong {
    color: var(--brand-primary);
}

.empleado-vacaciones-page .vac-control-note span {
    font-size: 12px;
    color: var(--brand-secondary);
}

.empleado-vacaciones-page .summary-card__meta:empty {
    display: none;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance,
.empleado-vacaciones-page .vac-employee-readonly table.dataTable.mini-table--vacation-balance {
    width: 100% !important;
    min-width: 520px;
    max-width: none;
    table-layout: auto;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance th,
.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance td {
    padding: 8px 12px;
    white-space: nowrap;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance th:nth-child(1),
.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance td:nth-child(1) {
    width: 64px;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance th:nth-child(2),
.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance td:nth-child(2) {
    width: 132px;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance th:nth-child(n+3),
.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance td:nth-child(n+3) {
    width: 76px;
    text-align: right;
}

.empleado-vacaciones-page .vac-employee-readonly .mini-table--vacation-balance + .dt-column-sizing,
.empleado-vacaciones-page .vac-employee-readonly .dt-container:has(.mini-table--vacation-balance),
.empleado-vacaciones-page .vac-employee-readonly .dataTables_wrapper:has(.mini-table--vacation-balance) {
    width: 100%;
    max-width: 100%;
}

.empleado-vacaciones-page .vac-balance-overview {
    display: grid;
    grid-template-columns: minmax(680px, 1.35fr) minmax(340px, 1fr);
    gap: 14px;
    align-items: start;
}

.empleado-vacaciones-page .vac-balance-overview--operational {
    display: block;
    width: 100%;
}

.empleado-vacaciones-page .vac-balance-table {
    min-width: 0;
    width: 100%;
}

.empleado-vacaciones-page .vac-balance-chart {
    width: min(100%, 400px);
    max-width: 400px;
    min-height: 190px;
    justify-self: center;
    padding: 12px 14px 10px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 20px;
    background: var(--brand-white);
    box-shadow: 0 18px 40px rgba(var(--brand-secondary-rgb), 0.08);
}

.empleado-vacaciones-page .vac-balance-chart__header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.empleado-vacaciones-page .vac-balance-chart__header h3 {
    margin-bottom: 4px;
}

.empleado-vacaciones-page .vac-balance-chart__header p {
    margin: 0;
    color: var(--brand-primary);
    font-size: 13px;
}

.empleado-vacaciones-page .vac-balance-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    color: var(--brand-secondary);
    font-size: 11px;
    font-weight: 700;
}

.empleado-vacaciones-page .vac-balance-chart__legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.empleado-vacaciones-page .vac-balance-chart__legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.empleado-vacaciones-page .vac-balance-chart__plot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 8px;
    min-height: 126px;
    overflow-x: auto;
    padding: 6px 2px 2px;
}

.empleado-vacaciones-page .vac-balance-chart__group {
    display: grid;
    grid-template-rows: 74px auto auto;
    gap: 5px;
    justify-items: center;
    min-width: 64px;
}

.empleado-vacaciones-page .vac-balance-chart__bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 74px;
    padding: 6px 4px 0;
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.18);
}

.empleado-vacaciones-page .vac-balance-chart__bars span {
    width: 12px;
    min-height: 6px;
    border-radius: 10px 10px 3px 3px;
    transition: height 0.45s ease;
}

.empleado-vacaciones-page .vac-balance-chart__group strong {
    color: var(--brand-secondary);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
}

.empleado-vacaciones-page .vac-balance-chart__group small {
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.empleado-vacaciones-page .vac-balance-chart__total {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-secondary);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.empleado-vacaciones-page .is-granted {
    background: #0052A5;
}

.empleado-vacaciones-page .is-used {
    background: #04B1E9;
}

.empleado-vacaciones-page .is-available {
    background: #5ACEEF;
}

.empleado-vacaciones-page .is-pending {
    background: #F05282;
}

.empleado-vacaciones-page .vac-balance-chart--summary .vac-balance-chart__plot {
    grid-auto-columns: minmax(82px, 1fr);
    overflow-x: visible;
}

.empleado-vacaciones-page .vac-balance-chart--summary .vac-balance-chart__bars span {
    width: 16px;
}

@media (max-width: 1180px) {
    .empleado-vacaciones-page .vac-balance-overview {
        grid-template-columns: 1fr;
    }

    .empleado-vacaciones-page .vac-balance-chart {
        max-width: 100%;
    }
}

.quantity-stepper {
    display: grid;
    grid-template-columns: 46px minmax(72px, 1fr) 46px;
    gap: 8px;
    align-items: center;
}

.quantity-stepper input {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

.quantity-stepper__btn,
.vacation-quick-actions button {
    min-height: 42px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.14);
    color: var(--brand-secondary);
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.quantity-stepper__btn {
    font-size: 22px;
}

.quantity-stepper__btn:hover,
.vacation-quick-actions button:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.42);
    background: rgba(var(--brand-accent-soft-rgb), 0.28);
    transform: translateY(-1px);
}

.vacation-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.vacation-quick-actions button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.vacation-available-meter {
    display: grid;
    place-items: center;
    min-height: 108px;
    padding: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--brand-accent-soft-rgb), 0.24), rgba(var(--brand-white-rgb), 0.94));
    text-align: center;
}

.vacation-available-meter strong {
    color: var(--brand-secondary);
    font-size: 36px;
    line-height: 1;
}

.vacation-available-meter span {
    color: var(--color-muted);
    font-size: 12px;
}

.vacation-available-meter input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.employee-vacation-balance {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.employee-vacation-balance h3 {
    margin: 0;
    color: var(--brand-secondary);
    font-size: 16px;
}

.carga-novedades-side {
    display: grid;
    gap: 20px;
}

.carga-novedades-form-card {
    min-width: 0;
}

.carga-novedades-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.carga-novedades-steps {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.18));
}

.carga-novedades-steps h5 {
    margin: 0 0 10px;
    color: var(--color-brand-dark);
    font-size: 14px;
}

.carga-novedades-steps ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: var(--color-muted);
}

.carga-novedades-steps li {
    line-height: 1.5;
}

.carga-novedades-steps strong {
    color: var(--color-brand-dark);
}

.carga-novedades-choice-panel,
.carga-novedades-entry-panel {
    animation: softReveal 0.22s ease both;
}

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

.carga-novedades-mode-card {
    display: grid;
    min-height: 96px;
    padding: 16px 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 18px;
    background: rgba(var(--brand-white-rgb), 0.98);
    color: var(--color-brand-dark);
    cursor: pointer;
    place-items: center;
    text-align: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.carga-novedades-mode-card i {
    margin-bottom: 8px;
    color: var(--brand-primary);
    font-size: 24px;
}

.carga-novedades-mode-card span {
    font-weight: 800;
    line-height: 1.35;
}

.carga-novedades-mode-card:hover,
.carga-novedades-mode-card.is-active {
    border-color: rgba(var(--brand-accent-rgb), 0.65);
    background: rgba(var(--brand-accent-soft-rgb), 0.2);
    box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.14);
    transform: translateY(-1px);
}

.carga-novedades-selected-mode {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.18);
    color: var(--color-muted);
    font-size: 13px;
}

.carga-novedades-selected-mode strong {
    color: var(--color-brand-dark);
}

.carga-novedades-checkbox-field {
    justify-content: end;
}

.check-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.9);
    border-radius: 12px;
    background: rgba(var(--brand-white-rgb), 0.96);
    color: var(--color-text);
    font-weight: 700;
}

.check-inline input {
    width: auto;
}

.vac-legajo-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vac-legajo-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
    border-radius: 12px;
    color: #fff;
    flex-wrap: wrap;
}

.vac-legajo-panel__employee strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.vac-legajo-panel__employee span {
    font-size: 12px;
    opacity: 0.85;
}

.vac-legajo-panel__available {
    text-align: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 12px 20px;
    min-width: 110px;
}

.vac-legajo-panel__available span {
    display: block;
    font-size: 11px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.vac-legajo-panel__available strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.vac-legajo-panel__section {
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
    border-radius: 12px;
    overflow: hidden;
}

.vac-legajo-panel__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.95);
}

.vac-legajo-panel__section-title h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-secondary);
}

.vac-legajo-panel__section h4 {
    margin: 0 0 12px;
    padding: 12px 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-secondary);
}

.vac-legajo-panel__section .mini-table,
.vac-legajo-panel__section table {
    margin: 0;
    border-radius: 0;
    border: 0;
}

.vac-sin-ctrl {
    color: #b45309;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
}

.vac-ctrl-alert {
    padding: 10px 16px;
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid #f57c00;
    color: #e65100;
    font-size: 13px;
    margin: 8px 0;
    border-radius: 0 6px 6px 0;
}

.vac-disponible-pos {
    color: var(--brand-primary);
    font-weight: 700;
}

.vac-disponible-neg {
    color: #d32f2f;
    font-weight: 700;
}

.vac-total-row td {
    background: rgba(var(--brand-primary-rgb), 0.07) !important;
    border-top: 2px solid rgba(var(--brand-primary-rgb), 0.2);
}

.vac-legajo-edit {
    padding: 4px 0;
}

.text-right {
    text-align: right !important;
}

.vac-sync-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 16px;
}

.vac-sync-progress__logo {
    width: 58px;
    height: auto;
    animation: vac-sync-pulse 1.5s ease-in-out infinite;
}

.vac-sync-progress__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

.vac-sync-progress__bar {
    width: min(320px, 100%);
    height: 4px;
    background: rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 99px;
    overflow: hidden;
}

.vac-sync-progress__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    border-radius: 99px;
    transition: width 0.4s ease;
}

.vac-sync-progress__pct {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: -0.5px;
    min-width: 48px;
    text-align: center;
}

@keyframes vac-sync-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.94); }
}

.carga-feriados-modules,
.carga-feriados-layout,
.carga-feriados-register {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.page--carga-feriados .carga-feriados-title {
    width: min(1180px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.carga-feriados-modules {
    display: grid;
    grid-template-columns: minmax(460px, 1fr) minmax(420px, 0.94fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.carga-feriados-modules .carga-feriados-form-card {
    margin-bottom: 0;
}

.carga-feriados-modules > .widget {
    align-self: stretch;
}

.carga-feriados-modules > .widget,
.carga-feriados-modules > .carga-feriados-form-card {
    align-self: stretch;
}

.carga-feriados-side {
    display: grid;
    gap: 18px;
}

.carga-feriados-form-card {
    align-self: start;
    margin-bottom: 18px;
}

.carga-feriados-calendar-nav {
    display: inline-flex;
    gap: 10px;
}

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

.carga-feriados-summary__item {
    padding: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.98);
}

.carga-feriados-summary__item span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}

.carga-feriados-summary__item strong {
    display: block;
    margin-top: 8px;
    color: var(--color-brand-dark);
    font-size: 24px;
}

.carga-feriados-register {
    margin-bottom: 8px;
}

/* ── carga-feriados-layout: nuevo two-column layout ── */
.carga-feriados-layout {
    display: grid;
    grid-template-columns: minmax(460px, 1fr) minmax(420px, 0.94fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.carga-feriados-layout > .widget {
    align-self: stretch;
}

/* ── Concepto cards (radio buttons visuales) ── */
.concepto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.concepto-card {
    cursor: pointer;
}

.concepto-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.concepto-card__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    border: 1.5px solid rgba(var(--brand-primary-rgb), 0.15);
    border-radius: 12px;
    background: rgba(var(--brand-neutral-rgb), 0.04);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    height: 100%;
    box-sizing: border-box;
}

.concepto-card input[type="radio"]:checked + .concepto-card__inner {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.06);
}

.concepto-card__inner i {
    font-size: 18px;
    color: var(--brand-secondary);
    margin-bottom: 4px;
}

.concepto-card input[type="radio"]:checked + .concepto-card__inner i {
    color: var(--brand-primary);
}

.concepto-card__inner strong {
    font-size: 13px;
    color: var(--brand-dark);
    font-weight: 600;
    line-height: 1.2;
}

.concepto-card__inner em {
    font-size: 11px;
    font-style: normal;
    color: var(--brand-secondary);
    line-height: 1.3;
}

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

.carga-novedades-summary__item {
    padding: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.96);
}

.carga-novedades-summary__item span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
}

.carga-novedades-summary__item strong {
    display: block;
    margin-top: 8px;
    color: var(--color-brand-dark);
    font-size: 24px;
}

.carga-novedades-calendar {
    display: grid;
    gap: 12px;
}

.carga-novedades-calendar__title {
    color: var(--color-brand-dark);
    font-weight: 800;
}

.carga-novedades-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.carga-novedades-calendar__label {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.carga-novedades-calendar__cell {
    display: grid;
    min-height: 40px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.72);
    border-radius: 12px;
    background: rgba(var(--brand-white-rgb), 0.92);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    place-items: center;
    position: relative;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.carga-novedades-calendar__cell.is-empty {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.carga-novedades-calendar__cell.has-news {
    border-color: rgba(var(--brand-primary-rgb), 0.38);
    background: rgba(var(--brand-accent-soft-rgb), 0.26);
    color: var(--color-brand-dark);
    font-weight: 800;
}

.carga-novedades-calendar__cell.has-news.is-justified {
    border-color: rgba(83, 151, 24, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(137, 184, 20, 0.35));
}

.carga-novedades-calendar__cell.has-news.is-unjustified {
    border-color: rgba(255, 73, 73, 0.4);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 73, 73, 0.22));
}

.carga-novedades-calendar__cell.has-holiday {
    border-color: rgba(var(--brand-primary-rgb), 0.42);
    background: linear-gradient(180deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.36));
    color: var(--color-brand-dark);
    font-weight: 800;
}

.carga-novedades-calendar__cell:not(.is-empty):hover,
.carga-novedades-calendar__cell.is-selected {
    border-color: rgba(var(--brand-primary-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
    transform: translateY(-1px);
}

.carga-novedades-calendar__cell.is-selected {
    background: rgba(var(--brand-primary-rgb), 0.12);
}

.carga-novedades-calendar__cell strong {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--brand-primary);
    color: var(--brand-white);
    font-size: 10px;
    place-items: center;
}

.carga-novedades-calendar__cell.is-unjustified strong {
    background: #ff4949;
}

.carga-novedades-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--color-muted);
    font-size: 12px;
}

.carga-novedades-calendar__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.carga-novedades-calendar__legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.72);
    border-radius: 4px;
    background: rgba(var(--brand-white-rgb), 0.92);
}

.carga-novedades-calendar__legend i.is-justified {
    border-color: rgba(83, 151, 24, 0.42);
    background: rgba(137, 184, 20, 0.35);
}

.carga-novedades-calendar__legend i.is-unjustified {
    border-color: rgba(255, 73, 73, 0.4);
    background: rgba(255, 73, 73, 0.24);
}

.carga-novedades-calendar__legend i.is-holiday {
    border-color: rgba(var(--brand-primary-rgb), 0.42);
    background: rgba(var(--brand-accent-soft-rgb), 0.36);
}

.carga-novedades-calendar-detail {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    background: rgba(var(--brand-white-rgb), 0.96);
    color: var(--color-muted);
}

.carga-novedades-calendar-detail > strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-brand-dark);
}

.carga-novedades-calendar-detail.is-clear {
    border-color: rgba(83, 151, 24, 0.28);
    background: rgba(137, 184, 20, 0.12);
}

.carga-novedades-calendar-detail.has-news {
    display: grid;
    gap: 10px;
}

.carga-novedades-calendar-detail__item {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.76);
    border-radius: 14px;
    background: rgba(var(--brand-white-rgb), 0.98);
}

.carga-novedades-calendar-detail__item .btn {
    width: max-content;
    margin-top: 4px;
}

.btn--sm {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 11px;
    font-size: 12px;
}

.carga-novedades-calendar-detail__item .status-pill {
    width: max-content;
    padding: 5px 10px;
}

.carga-novedades-calendar-detail__item .status-pill.is-approved {
    border-color: rgba(83, 151, 24, 0.28);
    background: rgba(137, 184, 20, 0.18);
    color: #3f6f13;
}

.carga-novedades-calendar-detail__item .status-pill.is-rejected {
    border-color: rgba(255, 73, 73, 0.28);
    background: rgba(255, 73, 73, 0.12);
    color: #9f1d1d;
}

.carga-novedades-calendar-detail__item b {
    color: var(--color-brand-dark);
}

.carga-novedades-calendar-detail__item small {
    color: var(--color-muted);
}

.carga-novedades-calendar-detail__audit {
    color: var(--color-muted);
    font-weight: 700;
}

.carga-novedades-calendar-detail__item p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}

.carga-novedades-edit-form {
    display: grid;
    gap: 18px;
}

.carga-novedades-edit-summary {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--brand-accent-soft-rgb), 0.16);
}

.carga-novedades-edit-summary strong {
    color: var(--color-brand-dark);
    font-size: 16px;
}

.carga-novedades-edit-summary span {
    color: var(--color-muted);
    font-size: 13px;
}

.carga-novedades-edit-actions {
    margin-top: 0;
}

@keyframes softReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.legajo-digital-detail__section {
    padding: 18px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.92);
    border-radius: 18px;
    background: rgba(var(--brand-white-rgb), 0.98);
}

.legajo-digital-detail__section + .legajo-digital-detail__section {
    margin-top: 16px;
}

.legajo-digital-detail__section h4 {
    margin: 0 0 14px;
    font-size: 15px;
}

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

.legajo-digital-detail__item {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.72);
}

.legajo-digital-detail__label {
    color: var(--color-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legajo-digital-detail__value {
    font-size: 14px;
    line-height: 1.45;
    color: var(--brand-secondary);
}

.legajo-digital-modal {
    display: grid;
    gap: 16px;
}

.legajo-digital-modal--person-record .legajo-digital-detail__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legajo-digital-modal__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.legajo-digital-modal__header h3 {
    margin: 10px 0 4px;
}

.legajo-digital-modal__header p {
    margin: 0;
    color: var(--color-muted);
}

.legajo-digital-modal__status {
    flex-shrink: 0;
}

.legajo-digital-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.module-list {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text);
    display: grid;
    gap: 10px;
}

.page-icon i {
    position: relative;
    z-index: 1;
    font-size: 28px;
    line-height: 1;
    color: var(--brand-secondary);
}

.page-icon--panel i,
.page-icon--mail i {
    color: var(--brand-white);
}

.select2-container {
    width: 100% !important;
}

.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color-border);
    border-radius: 12px;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: 42px;
    background: var(--brand-white);
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--color-text);
    line-height: 40px;
    padding-left: 12px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 10px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: rgba(var(--brand-primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.14);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.flatpickr-calendar {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    box-shadow: 0 18px 36px rgba(3, 11, 142, 0.16);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.flatpickr-day.today {
    border-color: var(--brand-accent);
}

.dt-container,
.dataTables_wrapper {
    width: 100%;
}

.dt-container .dt-layout-row,
.dataTables_wrapper .row {
    margin: 0;
    align-items: center;
    gap: 12px;
}

.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info,
.dt-container .dt-paging {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--brand-white);
    color: var(--color-text);
}

.dt-container .dt-paging .pagination {
    gap: 6px;
}

.dt-container .dt-paging .page-link {
    border-radius: 10px;
    border-color: rgba(var(--brand-primary-rgb), 0.14);
    color: var(--brand-secondary);
}

.dt-container .dt-paging .page-item.active .page-link {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-color: transparent;
    color: var(--brand-white);
}

.dt-container table.dataTable th,
.dt-container table.dataTable td,
.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td,
table.js-data-table th,
table.js-data-table td {
    text-align: center !important;
    vertical-align: middle;
}

.dt-container table.dataTable th.dt-type-numeric,
.dt-container table.dataTable td.dt-type-numeric,
.dt-container table.dataTable th.dt-type-date,
.dt-container table.dataTable td.dt-type-date,
.dataTables_wrapper table.dataTable th.dt-type-numeric,
.dataTables_wrapper table.dataTable td.dt-type-numeric,
.dataTables_wrapper table.dataTable th.dt-type-date,
.dataTables_wrapper table.dataTable td.dt-type-date {
    text-align: center !important;
}

.dt-container .dt-info,
.dataTables_wrapper .dataTables_info {
    text-align: center;
}

.dt-container .dt-paging,
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: center;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

table.dataTable.table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
}

.module-landing--vendor {
    display: block;
}

.module-landing--vendor .module-swiper {
    overflow: hidden;
    padding-bottom: 34px;
}

.module-landing--vendor .swiper-slide {
    height: auto;
}

.module-landing--vendor .swiper-pagination-bullet {
    background: rgba(var(--brand-primary-rgb), 0.26);
    opacity: 1;
}

.module-landing--vendor .swiper-pagination-bullet-active {
    background: var(--brand-primary);
}

.swal2-popup {
    border-radius: 18px;
}

.swal2-popup .swal2-input {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.swal2-app-toast {
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(3, 11, 142, 0.18) !important;
}

.vac-upload-progress-modal {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 24px;
}

.vac-upload-progress-modal:not([hidden]) {
    display: grid !important;
}

.vac-upload-progress-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--brand-secondary-rgb), 0.48);
    backdrop-filter: blur(5px);
    animation: modalBackdropFadeIn 0.2s ease-out both;
}

.vac-upload-progress-modal__dialog {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    padding: 30px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.24);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.2));
    box-shadow: 0 34px 80px rgba(var(--brand-secondary-rgb), 0.28);
    text-align: center;
    animation: modalDialogPopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vac-upload-progress-modal__dialog h3 {
    margin: 12px 0 8px;
    color: var(--color-brand-dark);
}

.vac-upload-progress-modal__dialog p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-weight: 700;
}

.vac-upload-progress-modal__dialog small {
    display: block;
    margin-top: 12px;
    color: var(--color-muted);
}

.vac-upload-progress-modal__brand-loader {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.vac-upload-progress-modal__logo-shell {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--brand-white-rgb), 0.95);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.28);
    box-shadow: 0 16px 38px rgba(var(--brand-primary-rgb), 0.18);
    animation: vacUploadLogoFloat 1.8s ease-in-out infinite;
}

.vac-upload-progress-modal__logo-shell img {
    width: 52px;
    height: auto;
    display: block;
}

.vac-upload-progress-modal__logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 90deg,
            rgba(var(--brand-accent-rgb), 0),
            rgba(var(--brand-accent-rgb), 0.28),
            var(--brand-primary),
            var(--brand-accent),
            rgba(var(--brand-accent-rgb), 0)
        );
    animation: vacUploadSpin 1.1s linear infinite;
}

.vac-upload-progress-modal__logo-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(var(--brand-white-rgb), 0.98), rgba(var(--brand-accent-soft-rgb), 0.22));
}

.vac-upload-progress-bar {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--brand-neutral-rgb), 0.58);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.08);
}

.vac-upload-progress-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent), var(--brand-accent-soft));
    transition: width 0.28s ease;
    animation: vacUploadBarGlow 1.1s ease-in-out infinite;
}

.vac-upload-progress-modal__percent {
    display: block;
    margin-top: 12px;
    color: var(--color-brand-dark);
    font-size: 24px;
}

.vac-upload-progress-modal.is-complete .vac-upload-progress-bar span {
    background: linear-gradient(90deg, #0f8b4c, var(--brand-accent-soft));
}

.vac-upload-progress-modal.is-error .vac-upload-progress-bar span {
    background: linear-gradient(90deg, #c92a2a, #ff8a8a);
}

.btn.is-loading {
    cursor: wait;
    opacity: 0.72;
}

@keyframes vacUploadSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vacUploadPulse {
    0%,
    100% {
        transform: scale(0.72);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes vacUploadLogoFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.02);
    }
}

@keyframes vacUploadBarGlow {
    0%,
    100% {
        filter: saturate(1);
    }

    50% {
        filter: saturate(1.45) brightness(1.08);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes access-logo-in {
    0% {
        opacity: 0;
        transform: scale(0.84);
    }

    65% {
        opacity: 1;
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes access-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes access-pulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes access-ring {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    25% {
        opacity: 0.42;
    }

    100% {
        transform: scale(1.14);
        opacity: 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -120px 0;
    }
    100% {
        background-position: 320px 0;
    }
}

@keyframes summaryBarGrow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes chartFloatIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chartFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalBackdropFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalDialogPopIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

@keyframes modalDialogPopOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
}

@keyframes donutSegmentReveal {
    from {
        stroke-dasharray: 0 var(--circumference);
    }
    to {
        stroke-dasharray: var(--segment-length) calc(var(--circumference) - var(--segment-length));
    }
}

@keyframes leavePanelReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .summary-card__bar span,
    .donut-chart,
    .donut-chart__label,
    .donut-chart__segment,
    .legend-list li,
    .bar-group__item,
    .bar-group__meta {
        animation: none !important;
        transition: none !important;
    }
}

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

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

    .widget {
        grid-column: span 1 !important;
    }

}

@media (max-width: 1024px) {
    body.sidebar-open {
        overflow: hidden;
    }

    .sidebar {
        width: min(var(--sidebar-width), calc(100vw - 24px));
        flex-basis: min(var(--sidebar-width), calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        position: fixed;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

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

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

    .view-container {
        padding: 18px;
    }

    .recipient-shell,
    .chart-shell,
    .detail-card__stats,
    .carga-novedades-layout,
    .carga-vacaciones-layout,
    .carga-novedades-summary,
    .carga-feriados-modules,
    .carga-feriados-layout,
    .carga-feriados-summary,
    .gestion-empleados-layout,
    .module-landing,
    .module-landing--vendor {
        grid-template-columns: 1fr;
    }

    .admin-vacation-employee-card,
    .admin-vacation-summary {
        grid-template-columns: 1fr;
    }

    .widget--chart .chart-shell--sector-donut {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .widget--chart .chart-shell--sector-donut .donut-chart {
        justify-self: center;
    }

    .widget--chart .legend-list--scrollable {
        max-height: 240px;
    }

    .carga-novedades-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legajo-digital-detail__grid {
        grid-template-columns: 1fr;
    }

    .legajo-digital-modal__header {
        flex-direction: column;
    }

    .recipient-filter {
        grid-template-columns: 1fr;
    }

    .request-detail-grid,
    .request-detail-statuses {
        grid-template-columns: 1fr;
    }

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

    .gestion-empleados-schedule-preview {
        grid-template-columns: 1fr;
    }

    .leave-request-layout,
    .leave-option-grid,
    .leave-status-summary {
        grid-template-columns: 1fr;
    }

    .leave-form-prose__lead {
        padding-top: 0;
    }

    .reportes-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .reportes-absence-cards,
    .reportes-absence-groups,
    .reportes-subgroup-grid {
        grid-template-columns: 1fr;
    }

    .empleado-vacaciones-page {
        grid-template-columns: 1fr;
    }

    .empleado-vacaciones-page__summary {
        grid-column: 1;
        justify-self: center;
        margin-inline: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .empleado-vacaciones-page__header,
    .empleado-vacaciones-page__form,
    .empleado-vacaciones-page__history {
        grid-column: 1;
    }
}

@media (min-width: 1025px) {
    .module-landing--vendor .module-swiper {
        overflow: visible;
        padding-bottom: 0;
    }

    .module-landing--vendor .swiper-pagination {
        display: none;
    }

    .module-landing--vendor .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        transform: none !important;
    }

    .module-landing--vendor .swiper-slide {
        width: auto !important;
    }
}

@media (max-width: 720px) {
    .summary-grid,
    .widgets-grid {
        grid-template-columns: 1fr;
    }

    .view-container {
        padding: 14px;
    }

    .topbar__copy strong,
    .status-pill {
        display: none;
    }

    .page-header,
    .page-header--split,
    .field-group--inline,
    .settings-panel__footer {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .gestion-empleados-onboarding {
        align-items: stretch;
        flex-direction: column;
    }

    .gestion-empleados-onboarding .btn {
        width: 100%;
    }

    .request-detail-actions__buttons .btn {
        width: 100%;
    }

    .toolbar__actions,
    .page-header__actions {
        width: 100%;
    }

    .topbar__actions .btn {
        display: none;
    }

    .toolbar__actions .btn,
    .page-header__actions .btn,
    .recipient-form__actions .btn {
        flex: 1;
    }

    .widget__header--export {
        flex-direction: column;
    }

    .widget--chart .legend-list--scrollable {
        max-height: 220px;
        padding: 8px;
    }

    .report-export-actions {
        width: 100%;
        justify-content: stretch;
    }

    .report-export-actions .btn,
    .reportes-absence-filters .btn {
        width: 100%;
        justify-content: center;
    }

    .leave-shortcut {
        width: 100%;
        min-width: 0;
    }

    .empleado-vacaciones-page {
        gap: 16px;
    }

    .empleado-vacaciones-page__summary {
        width: 100%;
        grid-template-columns: 1fr;
    }

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

    .employee-email-form .btn {
        width: 100%;
        justify-content: center;
    }

    .carga-novedades-mode-grid {
        grid-template-columns: 1fr;
    }

    .mini-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mini-table th,
    .mini-table td {
        white-space: nowrap;
    }

    .dataTables_wrapper,
    .dt-container {
        width: 100%;
        overflow-x: auto;
    }

    .dataTables_wrapper .dt-layout-row,
    .dt-container .dt-layout-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .dataTables_wrapper .dt-paging,
    .dt-container .dt-paging {
        width: 100%;
        overflow-x: auto;
    }

    .dataTables_wrapper .pagination,
    .dt-container .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .topbar {
        min-height: 68px;
        padding: 12px 14px;
    }

    .icon-button {
        width: 38px;
        height: 38px;
    }

    .page-header h1 {
        font-size: 20px;
    }

    .module-card,
    .detail-card,
    .leave-request-card__body,
    .gestion-empleados-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Tarjetas KPI en móvil: número más compacto */
    .summary-card__value {
        font-size: 36px;
    }

    /* Header split: pill de estado ocupa ancho completo */
    .page-header--split .page-header__actions {
        width: 100%;
    }

    /* Grids y flex sin overflow lateral */
    .page {
        min-width: 0;
    }

    .summary-card__label {
        font-size: 13px;
    }
}

/* ============================================================
   MEJORAS ESTÉTICAS — v20260520
   1. Sidebar glassmorphism + active indicator
   2. Topbar fade-slide al cambiar vista
   3. Ripple en botones primarios
   4. Skeleton shimmer premium diagonal
   5. Scrollbar institucional global
   ============================================================ */

/* 1 — Sidebar glassmorphism */
.sidebar {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-right: 1px solid rgba(var(--brand-neutral-rgb), 0.6);
    box-shadow: 18px 0 52px rgba(3, 11, 142, 0.09);
}

.nav-link.is-active,
.nav-link--toggle.is-active,
.nav-sublink.is-active {
    background: rgba(var(--brand-primary-rgb), 0.09);
    color: var(--color-brand-dark);
    box-shadow: inset 3px 0 0 var(--brand-accent);
    font-weight: 600;
}

.nav-group.is-active > .nav-link--toggle {
    background: rgba(var(--brand-primary-rgb), 0.09);
    color: var(--color-brand-dark);
    box-shadow: inset 3px 0 0 var(--brand-accent);
    font-weight: 600;
}

/* 2 — Topbar fade-slide */
@keyframes topbarFadeSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topbar__copy.is-changing {
    animation: topbarFadeSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 3 — Ripple en botones primarios */
.btn--primary {
    position: relative;
    overflow: hidden;
}

@keyframes btnRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    transform: scale(0);
    animation: btnRipple 0.55s linear;
    pointer-events: none;
}

/* 4 — Skeleton shimmer premium diagonal */
.skeleton {
    border-radius: 999px;
    background: linear-gradient(
        105deg,
        rgba(var(--brand-neutral-rgb), 0.26) 0%,
        rgba(var(--brand-neutral-rgb), 0.26) 30%,
        rgba(255, 255, 255, 0.90) 50%,
        rgba(var(--brand-neutral-rgb), 0.26) 70%,
        rgba(var(--brand-neutral-rgb), 0.26) 100%
    );
    background-size: 260% 100%;
    animation: shimmerPremium 1.9s ease-in-out infinite;
}

@keyframes shimmerPremium {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 5 — Scrollbar institucional */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.22) transparent;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.22);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb), 0.44);
}

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-accent-rgb), 0.34) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.26);
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-accent-rgb), 0.58);
}

/* ============================================================
   MEJORAS ESTÉTICAS — v20260520-b
   2. Cards KPI — hover shadow coloreado por variante
   6. Formularios — label reactivo + focus glow premium
   7. Login — orbs animados + logo pulse
   ============================================================ */

/* 2 — Cards KPI hover depth coloreado */
.summary-card--mint:hover {
    box-shadow: 0 28px 60px rgba(var(--brand-accent-rgb), 0.22),
                0 8px 20px rgba(var(--brand-accent-rgb), 0.10);
    border-color: rgba(var(--brand-accent-rgb), 0.28);
}

.summary-card--coral:hover {
    box-shadow: 0 28px 60px rgba(var(--brand-primary-rgb), 0.20),
                0 8px 20px rgba(var(--brand-primary-rgb), 0.10);
    border-color: rgba(var(--brand-primary-rgb), 0.22);
}

.summary-card--amber:hover {
    box-shadow: 0 28px 60px rgba(var(--brand-accent-soft-rgb), 0.30),
                0 8px 20px rgba(var(--brand-accent-soft-rgb), 0.14);
    border-color: rgba(var(--brand-accent-soft-rgb), 0.34);
}

.summary-card--lavender:hover {
    box-shadow: 0 28px 60px rgba(var(--brand-secondary-rgb), 0.12),
                0 8px 20px rgba(var(--brand-neutral-rgb), 0.28);
    border-color: rgba(var(--brand-secondary-rgb), 0.16);
}

/* 6 — Formularios: label reactivo y focus glow premium */
.field-group label,
.inline-settings label {
    transition: color 0.18s ease;
}

.field-group:has(input:focus) label,
.field-group:has(select:focus) label,
.field-group:has(textarea:focus) label {
    color: var(--brand-primary);
}

input[type="date"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: rgba(var(--brand-accent-rgb), 0.72);
    box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.20),
                0 8px 24px rgba(var(--brand-primary-rgb), 0.07);
}

/* 7 — Login: orbs con drift lento */
@keyframes orbDrift1 {
    0%, 100% { transform: translateY(0px) scale(1);    }
    50%       { transform: translateY(-22px) scale(1.04); }
}

@keyframes orbDrift2 {
    0%, 100% { transform: translateY(0px) scale(1);   }
    50%       { transform: translateY(18px) scale(0.96); }
}

@keyframes logoGlowPulse {
    0%, 100% {
        box-shadow: 0 24px 58px rgba(0, 82, 165, 0.18),
                    0 0 0 0px rgba(4, 177, 233, 0.00);
    }
    50% {
        box-shadow: 0 30px 68px rgba(0, 82, 165, 0.26),
                    0 0 0 14px rgba(4, 177, 233, 0.07);
    }
}

.premium-motion-ready .access-selector::before {
    animation: orbDrift1 14s ease-in-out infinite;
}

.premium-motion-ready .access-selector::after {
    animation: orbDrift2 19s ease-in-out infinite;
}

.premium-motion-ready .access-selector__logo-shell {
    animation: logoGlowPulse 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .premium-motion-ready .access-selector::before,
    .premium-motion-ready .access-selector::after,
    .premium-motion-ready .access-selector__logo-shell {
        animation: none;
    }
}

/* ============================================================
   LOGIN MEJORADO — v20260520-f
   Richi mascot · partículas · íconos inputs · gradiente h1
   ============================================================ */

/* Mascota Richi */
/* Mascota: a la derecha del card, pegada a su borde */
.login-richi {
    position: absolute;
    bottom: 28px;
    left: calc(50% + 312px); /* borde derecho del card (295px) + 17px margen */
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 5;
}

.login-richi__img {
    width: 152px;
    height: auto;
    object-fit: contain;
    animation: loaderFloat 2.4s ease-in-out infinite;
    filter: drop-shadow(0 16px 30px rgba(var(--brand-primary-rgb), 0.28));
}

.login-richi__bubble {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 4px 16px 16px 16px; /* cola apunta hacia el card (izquierda) */
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-secondary);
    box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.12);
    backdrop-filter: blur(8px);
    max-width: 180px;
    text-align: center;
    line-height: 1.4;
    animation: loaderFloat 2.4s ease-in-out infinite 0.5s;
}

@media (max-width: 1020px) {
    .login-richi { display: none; }
}

/* Líneas de movimiento continuo */
@keyframes lineSlideRight {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 500px)); }
}

@keyframes lineSlideLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100vw - 500px)); }
}

.login-particle {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    height: 1.5px;
}

.login-particle--1 {
    width: 140px;
    top: 22%;
    left: -160px;
    background: linear-gradient(90deg, transparent, rgba(4, 177, 233, 0.55), transparent);
    animation: lineSlideRight 9s linear infinite;
    animation-delay: -2s;
}

.login-particle--2 {
    width: 95px;
    top: 70%;
    left: -115px;
    background: linear-gradient(90deg, transparent, rgba(0, 82, 165, 0.48), transparent);
    animation: lineSlideRight 13s linear infinite;
    animation-delay: -6s;
}

.login-particle--3 {
    width: 180px;
    top: 38%;
    right: -200px;
    background: linear-gradient(90deg, transparent, rgba(90, 206, 239, 0.50), transparent);
    animation: lineSlideLeft 11s linear infinite;
    animation-delay: -4s;
}

.login-particle--4 {
    width: 110px;
    top: 55%;
    left: -130px;
    background: linear-gradient(90deg, transparent, rgba(3, 11, 142, 0.42), transparent);
    animation: lineSlideRight 15s linear infinite;
    animation-delay: -9s;
}

.login-particle--5 {
    width: 210px;
    top: 12%;
    right: -230px;
    background: linear-gradient(90deg, transparent, rgba(4, 177, 233, 0.45), transparent);
    animation: lineSlideLeft 8s linear infinite;
    animation-delay: -1.5s;
}

@media (max-width: 768px) {
    .login-particle { display: none; }
}

/* H1 con texto gradiente institucional */
.premium-motion-ready .access-selector__header h1 {
    background: linear-gradient(130deg, var(--brand-secondary) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Íconos en campos via SVG inline */
.premium-motion-ready .login-form input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230052A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 2.8rem;
}

.premium-motion-ready .login-form input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230052A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 2.8rem;
}

/* Botón Ingresar: glow en hover */
.premium-motion-ready .login-form .btn--primary {
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-motion-ready .login-form .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(var(--brand-primary-rgb), 0.36),
                0 0 0 3px rgba(var(--brand-accent-rgb), 0.24);
}

/* Card: fondo más premium y sombra mejorada */
.premium-motion-ready .access-selector__panel {
    background:
        radial-gradient(circle at 12% 12%, rgba(var(--brand-accent-soft-rgb), 0.30), transparent 40%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(228, 246, 255, 0.90));
    box-shadow: 0 36px 90px rgba(var(--brand-secondary-rgb), 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .login-richi__img, .login-richi__bubble { animation: none; }
    .login-particle { animation: none; opacity: 0.3; }
}

/* ============================================================
   MEJORAS ESTÉTICAS — v20260520-c
   Administración: grupos de herramientas, iconos, animaciones
   ============================================================ */

/* Separador entre grupos */
.admin-tool-group {
    margin-top: 18px;
}

.admin-tool-group + .admin-tool-group {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--brand-neutral-rgb), 0.72);
}

/* Etiqueta de grupo */
.admin-tool-group__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.admin-tool-group__label i {
    font-size: 12px;
    color: var(--brand-primary);
}

/* Grid de 6 columnas dentro de grupo */
.admin-tool-group .admin-tools-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
    gap: 12px;
}

/* Botón cuadrado flexible */
.admin-tool-group .admin-tool-button {
    width: 100%;
    min-height: auto;
    aspect-ratio: 1 / 1;
}

/* Icono más grande dentro de los grupos */
.admin-tool-group .admin-tool-button__icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
    border-radius: 16px;
}

/* Variante B: navy → cyan-azul */
.admin-tool-button__icon--b {
    background: linear-gradient(135deg, var(--brand-secondary), #0469c0);
    box-shadow: 0 12px 22px rgba(3, 11, 142, 0.28);
}

/* Variante C: azul → cyan */
.admin-tool-button__icon--c {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    box-shadow: 0 12px 22px rgba(4, 177, 233, 0.26);
}

/* Hover icon glow por variante */
.admin-tool-button:hover .admin-tool-button__icon--b {
    box-shadow: 0 14px 28px rgba(3, 11, 142, 0.38);
}

.admin-tool-button:hover .admin-tool-button__icon--c {
    box-shadow: 0 14px 28px rgba(4, 177, 233, 0.38);
}

/* Responsive grupos */
@media (max-width: 1100px) {
    .admin-tool-group .admin-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

/* Hover flotante en botones de grupo */
.admin-tool-group .admin-tool-button {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms ease,
                box-shadow   280ms cubic-bezier(0.22, 1, 0.36, 1),
                background   200ms ease;
}

.admin-tool-group .admin-tool-button:hover,
.admin-tool-group .admin-tool-button:focus-visible {
    transform: translateY(-7px) scale(1.025);
    box-shadow: 0 24px 44px rgba(var(--brand-secondary-rgb), 0.16),
                0 8px  18px rgba(var(--brand-primary-rgb),   0.10);
}

/* Icono sube y escala levemente */
.admin-tool-group .admin-tool-button__icon {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow  280ms ease;
}

.admin-tool-group .admin-tool-button:hover .admin-tool-button__icon,
.admin-tool-group .admin-tool-button:focus-visible .admin-tool-button__icon {
    transform: scale(1.12) translateY(-2px);
}

/* ============================================================
   MEJORAS ESTÉTICAS — v20260520-e
   Nav: slide-in hover, icon badge activo + pop animation
   ============================================================ */

/* Posición relativa + clip para el slide-in */
.nav-link {
    position: relative;
    overflow: hidden;
}

/* Slide-in background via ::before */
.nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-hover);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

/* El ::before maneja el fondo — el nav-link puro queda transparente en hover */
.nav-link:hover {
    background: transparent;
}

.nav-link:hover::before {
    transform: scaleX(1);
}

/* En activo no mostrar el slide */
.nav-link.is-active::before,
.nav-link--toggle.is-active::before,
.nav-group.is-active > .nav-link--toggle::before {
    display: none;
}

/* Todo el contenido del nav-link va encima del slide */
.nav-link__icon,
.nav-link__label,
.nav-link__chevron {
    position: relative;
    z-index: 1;
}

/* Icono: transición base */
.nav-link__icon {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                width       0.22s cubic-bezier(0.22, 1, 0.36, 1),
                height      0.22s cubic-bezier(0.22, 1, 0.36, 1),
                background  0.22s ease,
                box-shadow  0.22s ease,
                color       0.18s ease;
}

/* Icono escala en hover (solo no activos) */
.nav-link:not(.is-active):hover .nav-link__icon {
    transform: scale(1.18);
    color: var(--brand-primary);
}

/* Activo: badge coloreado con animación pop */
@keyframes navIconPop {
    0%   { transform: scale(0.5);  opacity: 0.3; }
    62%  { transform: scale(1.16);              }
    100% { transform: scale(1);    opacity: 1;   }
}

.nav-link.is-active .nav-link__icon,
.nav-group.is-active > .nav-link--toggle .nav-link__icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--brand-white);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.36);
    animation: navIconPop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Activo: fondo con gradiente leve de izquierda a derecha */
.nav-link.is-active,
.nav-link--toggle.is-active {
    background: linear-gradient(
        to right,
        rgba(var(--brand-primary-rgb), 0.11),
        rgba(var(--brand-accent-soft-rgb), 0.06)
    );
    box-shadow: inset 3px 0 0 var(--brand-accent),
                0 4px 16px rgba(var(--brand-primary-rgb), 0.07);
    font-weight: 600;
    color: var(--color-brand-dark);
}

.nav-group.is-active > .nav-link--toggle {
    background: linear-gradient(
        to right,
        rgba(var(--brand-primary-rgb), 0.11),
        rgba(var(--brand-accent-soft-rgb), 0.06)
    );
    box-shadow: inset 3px 0 0 var(--brand-accent),
                0 4px 16px rgba(var(--brand-primary-rgb), 0.07);
    font-weight: 600;
    color: var(--color-brand-dark);
}

@media (prefers-reduced-motion: reduce) {
    .nav-link::before { transition: none; }
    .nav-link.is-active .nav-link__icon,
    .nav-group.is-active > .nav-link--toggle .nav-link__icon {
        animation: none;
    }
}

/* ============================================================
   MEJORAS ESTÉTICAS — v20260520-d
   Sidebar: logo animado + avatar status dot + perfil badge
   ============================================================ */

/* Logo — entrada animada */
@keyframes sidebarLogoReveal {
    0% {
        opacity: 0;
        transform: translateY(-14px) scale(0.86);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

.sidebar__logo {
    animation: sidebarLogoReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    transition: filter 0.3s ease, transform 0.3s ease;
    cursor: default;
}

.sidebar__logo:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(var(--brand-accent-rgb), 0.52))
            drop-shadow(0 4px 10px rgba(var(--brand-primary-rgb), 0.26));
}

/* Avatar — sombra + status dot pulsante */
.sidebar__avatar {
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb), 0.30);
}

.sidebar__avatar::after {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #ffffff;
    animation: statusDotPulse 3s ease-in-out infinite;
}

@keyframes statusDotPulse {
    0%, 100% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.42); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.00); }
}

/* Nombre — icono de usuario via FA6 */
#sidebar-user-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
}

#sidebar-user-name::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--brand-accent);
    flex-shrink: 0;
    line-height: 1;
}

/* Meta — badge pill institucional */
#sidebar-user-meta {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--brand-accent-soft-rgb), 0.18);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.22);
    color: var(--brand-primary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ============================================================
   MEJORAS DINÁMICAS — v20260521
   1. Vista fade-in   2. Toasts premium   3. Tabla hover
   4. Status pulse    5. Modal premium    6. Widget lift
   7. Btn pressed     8. Empty state      9. DT scrollbar
   10. Tooltips CSS
   ============================================================ */

/* 1 — Transición de entrada de vista */
@keyframes viewPageEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 2 — Toast premium */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(110%) scale(0.88); }
    to   { opacity: 1; transform: translateX(0)   scale(1);    }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0)  scale(1);    }
    to   { opacity: 0; transform: translateX(80%) scale(0.92); }
}

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

.toast {
    min-width: min(300px, calc(100vw - 32px));
    max-width: min(390px, calc(100vw - 24px));
    padding: 13px 14px 13px 16px;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    position: relative;
    overflow: hidden;
    color: var(--brand-white);
    box-shadow: 0 20px 44px rgba(3, 11, 142, 0.28), 0 4px 12px rgba(0,0,0,0.12);
    animation: toastSlideIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    cursor: default;
}

.toast.is-dismissing {
    animation: toastSlideOut 0.26s ease-in both;
}

.toast--success { background: linear-gradient(135deg, #0469c0, #04B1E9); }
.toast--error   { background: linear-gradient(135deg, #b42318, #d92d20); }
.toast--info    { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); }
.toast--warning { background: linear-gradient(135deg, #9a6700, #c68b1a); }

.toast__icon {
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.92;
}

.toast__body {
    flex: 1;
    min-width: 0;
}

.toast__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    display: block;
}

.toast__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-start;
    transition: color 0.15s ease;
}

.toast__close:hover { color: #fff; }

.toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 0 0 0 16px;
    animation: toastProgress 4.4s linear both;
}

/* 3 — Filas de tabla: border izquierdo animado */
.mini-table tbody tr td:first-child {
    border-left: 3px solid transparent;
    transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.18s ease;
    padding-left: 7px;
}

.mini-table tbody tr:hover td:first-child {
    border-left-color: var(--brand-accent);
}

.mini-table tbody tr:hover td {
    background: rgba(var(--brand-accent-soft-rgb), 0.13);
    transition: background-color 0.18s ease;
}

/* 4 — Status tag pending: pulso */
@keyframes tagPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--brand-primary-rgb), 0.30); }
    50%       { box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), 0.00); }
}

.status-tag--pending {
    animation: tagPulse 2.6s ease-in-out infinite;
}

/* 5 — Modal: backdrop mejorado + entrada con spring */
.modal__backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(var(--brand-secondary-rgb), 0.40);
}

.modal__dialog {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.10);
}

@keyframes modalDialogPopIn {
    0%   { opacity: 0; transform: translateY(36px) scale(0.94); }
    62%  { opacity: 1; transform: translateY(-4px)  scale(1.006); }
    100% { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes modalDialogPopOut {
    from { opacity: 1; transform: translateY(0)     scale(1);    }
    to   { opacity: 0; transform: translateY(16px)  scale(0.97); }
}

/* 6 — Widget hover lift */
.widget {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.24s ease;
}

.widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(var(--brand-secondary-rgb), 0.13);
    border-color: rgba(var(--brand-primary-rgb), 0.18);
}

/* 7 — Botones: feedback de presionado (sin oscurecer texto) */
.btn:active,
.admin-tool-button:active {
    transform: scale(0.97) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22),
                inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    filter: none;
}

.icon-button:active {
    transform: scale(0.90) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    filter: none;
}

/* 8 — Empty state con ícono */
.panel-loader,
.empty-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-muted);
    text-align: center;
    padding: 24px;
}

.empty-state::before {
    content: "\f49e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 38px;
    color: var(--brand-primary);
    opacity: 0.16;
    display: block;
    line-height: 1;
}

.empty-state p {
    margin: 0;
    font-size: 13.5px;
    max-width: 420px;
    line-height: 1.55;
}

/* 9 — Scrollbar DataTable institucional */
.dt-container,
.dataTables_wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.22) transparent;
}

.dt-container::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.dt-container::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.dt-container::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.22);
    border-radius: 999px;
}

.dt-container::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-accent-rgb), 0.50);
}

/* 10 — Tooltips CSS via aria-label en icon-buttons */
.icon-button[aria-label] {
    position: relative;
}

.icon-button[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: var(--brand-secondary);
    color: var(--brand-white);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 200;
    box-shadow: 0 8px 20px rgba(var(--brand-secondary-rgb), 0.22);
}

.icon-button[aria-label]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 5px solid transparent;
    border-top-color: var(--brand-secondary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 200;
}

/* ============================================================
   PORTAL EMPLEADO — Hero animado con glassmorphism
   ============================================================ */

/* Zona hero: se autoajusta al contenido */
.ep-zone {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, #030B8E 0%, #0052A5 58%, #0469c0 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 22px 22px 26px;
    display: grid;
    gap: 18px;
    box-shadow: 0 22px 52px rgba(3, 11, 142, 0.28);
}

/* Decoración animada dentro de la zona */
.ep-hero {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Líneas flotantes */
.ep-line {
    position: absolute;
    height: 1.5px;
    border-radius: 999px;
}

.ep-line--1 {
    width: 200px;
    top: 30%;
    left: -220px;
    background: linear-gradient(90deg, transparent, rgba(4, 177, 233, 0.65), transparent);
    animation: lineSlideRight 10s linear infinite;
    animation-delay: -3s;
}

.ep-line--2 {
    width: 140px;
    top: 70%;
    right: -160px;
    background: linear-gradient(90deg, transparent, rgba(90, 206, 239, 0.55), transparent);
    animation: lineSlideLeft 13s linear infinite;
    animation-delay: -7s;
}

.ep-line--3 {
    width: 260px;
    top: 50%;
    left: -280px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    animation: lineSlideRight 16s linear infinite;
    animation-delay: -11s;
}

/* Orbes */
.ep-orb {
    position: absolute;
    border-radius: 50%;
}

.ep-orb--1 {
    width: 280px;
    height: 280px;
    top: -80px;
    right: 8%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.22), transparent 70%);
    animation: orbDrift1 14s ease-in-out infinite;
}

.ep-orb--2 {
    width: 180px;
    height: 180px;
    bottom: -50px;
    left: 6%;
    background: radial-gradient(circle, rgba(90, 206, 239, 0.18), transparent 70%);
    animation: orbDrift2 18s ease-in-out infinite;
}


/* Contenido encima de la decoración */
.ep-zone__header,
.ep-zone__cards {
    position: relative;
    z-index: 1;
}

/* Texto del header */
.ep-zone .page-header h1    { color: #ffffff; }
.ep-zone .page-header p      { color: rgba(255, 255, 255, 0.76); }
.ep-zone .page-title-icon    { color: rgba(255, 255, 255, 0.92); }

.ep-zone .status-pill {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.36);
    color: #ffffff;
    font-weight: 700;
}

/* Cards glassmorphism */
.ep-zone .summary-card {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 32px rgba(3, 11, 142, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.32);
    transition: background 0.24s ease, border-color 0.24s ease,
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ep-zone .summary-card::before    { display: none; }

.ep-zone .summary-card:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.46);
    box-shadow: 0 22px 48px rgba(3, 11, 142, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.46);
    transform: translateY(-5px);
}

.ep-zone .summary-card__value   { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.ep-zone .summary-card__label   { color: rgba(255, 255, 255, 0.92) !important; }
.ep-zone .summary-card__meta    { color: rgba(255, 255, 255, 0.62) !important; }
.ep-zone .summary-card__bar     { background: rgba(255, 255, 255, 0.20); }
.ep-zone .summary-card__bar span { background: rgba(255, 255, 255, 0.58); }

/* Skeleton sobre gradiente */
.ep-zone .summary-card.is-loading { background: rgba(255, 255, 255, 0.09) !important; }
.ep-zone .skeleton {
    background: linear-gradient(105deg,
        rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 30%,
        rgba(255,255,255,0.32) 50%,
        rgba(255,255,255,0.10) 70%, rgba(255,255,255,0.10) 100%);
}

/* Shortcuts: 2 botones al estilo admin, más compactos */
.ep-shortcuts .admin-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: start;
}

.ep-shortcuts .admin-tool-button {
    min-height: 0;
    aspect-ratio: auto;
    padding: 18px 16px;
    gap: 10px;
}

.ep-shortcuts .admin-tool-button__icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

@media (max-width: 720px) {
    .ep-zone { padding: 16px 16px 20px; gap: 14px; }
    .ep-shortcuts .admin-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .ep-line, .ep-orb { animation: none; }
}

.icon-button[aria-label]:hover::after,
.icon-button[aria-label]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .widget { transition: none; }
    .toast  { animation: none; opacity: 1; transform: none; }
    .status-tag--pending { animation: none; }
    .toast__progress { animation: none; width: 0; }
}

/* ============================================================
   MI LEGAJO — Header hero + detail card premium
   ============================================================ */

/* ep-zone slim: solo header, sin cards debajo */
.ep-zone--slim {
    padding: 20px 22px 22px;
}

/* Textos blancos en cualquier header dentro de ep-zone */
.ep-zone .page-header h1,
.ep-zone .page-header__main h1 {
    color: #ffffff;
}

.ep-zone .page-header p,
.ep-zone .page-header__main p {
    color: rgba(255, 255, 255, 0.76);
}

.ep-zone .page-title-icon {
    color: rgba(255, 255, 255, 0.92);
}

.ep-zone .status-pill {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.36);
    color: #ffffff;
    font-weight: 700;
}

/* ——— Detail card: estructura generada por JS ——— */
.page[data-page="empleado-legajo"] .detail-card--person-record {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 22px 52px rgba(3, 11, 142, 0.12);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

/* Header del card: fondo gradient azul */
.page[data-page="empleado-legajo"] .detail-card__header {
    background: linear-gradient(135deg, #030B8E 0%, #0052A5 58%, #0469c0 100%);
    padding: 24px 28px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

/* Orbe decorativo en el header del card */
.page[data-page="empleado-legajo"] .detail-card__header::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.24), transparent 70%);
    pointer-events: none;
}

.page[data-page="empleado-legajo"] .detail-card__header h4 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.15;
    font-family: var(--premium-font-display, inherit);
}

.page[data-page="empleado-legajo"] .detail-card__meta {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.page[data-page="empleado-legajo"] .detail-card__header .status-tag {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    font-size: 11px;
}

/* Secciones con padding generoso */
.page[data-page="empleado-legajo"] .detail-card__section {
    padding: 22px 28px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.55);
}

.page[data-page="empleado-legajo"] .detail-card__section:last-child {
    border-bottom: none;
    padding-bottom: 26px;
}

/* Título de sección: accent line izquierda */
.page[data-page="empleado-legajo"] .detail-card__section h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--brand-accent);
}

/* Tabla: columna izquierda (labels) */
.page[data-page="empleado-legajo"] .mini-table th {
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 38%;
    padding-top: 11px;
    padding-bottom: 11px;
}

/* Tabla: columna derecha (valores) */
.page[data-page="empleado-legajo"] .mini-table td {
    font-weight: 600;
    color: var(--brand-secondary);
    font-size: 14px;
}

/* Hover de fila con accent izquierdo */
.page[data-page="empleado-legajo"] .mini-table tbody tr:hover td,
.page[data-page="empleado-legajo"] .mini-table tbody tr:hover th {
    background: rgba(var(--brand-accent-soft-rgb), 0.10);
}

.page[data-page="empleado-legajo"] .mini-table tbody tr:hover td:first-child,
.page[data-page="empleado-legajo"] .mini-table tbody tr:hover th:first-child {
    border-left-color: var(--brand-accent);
}

@media (max-width: 600px) {
    .page[data-page="empleado-legajo"] .detail-card__header { padding: 18px 20px; }
    .page[data-page="empleado-legajo"] .detail-card__section { padding: 16px 20px; }
    .page[data-page="empleado-legajo"] .detail-card__header h4 { font-size: 18px; }
    .page[data-page="empleado-legajo"] .mini-table th { width: 44%; }
}

/* ============================================================
   ESTADO DE SOLICITUD — Panel premium
   ============================================================ */

/* Header del panel: gradiente azul institucional */
#leave-request-status .leave-request-card__header {
    background: linear-gradient(135deg, #030B8E 0%, #0052A5 58%, #0469c0 100%);
    border-bottom: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

#leave-request-status .leave-request-card__header::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.24), transparent 70%);
    pointer-events: none;
}

#leave-request-status .leave-request-card__header h2 {
    color: #ffffff;
}

#leave-request-status .leave-request-card__header p {
    color: rgba(255, 255, 255, 0.72);
}

/* KPI boxes: premium cards con hover lift */
.leave-status-summary {
    gap: 14px;
}

.leave-status-box {
    padding: 18px 18px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.22) 100%);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    box-shadow: 0 8px 22px rgba(var(--brand-secondary-rgb), 0.07);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Barra accent inferior */
.leave-status-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary), transparent);
    border-radius: 0 0 18px 18px;
}

.leave-status-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(var(--brand-secondary-rgb), 0.14);
    border-color: rgba(var(--brand-accent-rgb), 0.36);
}

.leave-status-box span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.leave-status-box strong {
    display: block;
    margin-top: 6px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-secondary);
    font-variant-numeric: tabular-nums;
}

/* Tabla del estado: widget scrollable con DataTable */
#leave-request-status .js-employee-leave-status {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#leave-request-status .js-employee-leave-status .dt-container,
#leave-request-status .js-employee-leave-status .dataTables_wrapper {
    overflow-x: visible;
    min-width: 540px;
}

#leave-request-status .table-footer {
    font-size: 11.5px;
    color: var(--color-muted);
    padding-top: 10px;
}

@media (max-width: 720px) {
    .leave-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .leave-status-box strong { font-size: 32px; }
}

/* ============================================================
   COMING SOON POPUP — Richi mascot
   ============================================================ */
.coming-soon-popup.swal2-popup {
    border-radius: 28px !important;
    padding: 32px 28px 28px !important;
    background:
        radial-gradient(circle at 80% 8%,  rgba(4, 177, 233, 0.14), transparent 38%),
        radial-gradient(circle at 12% 88%, rgba(0, 82, 165, 0.08), transparent 32%),
        #ffffff !important;
    border: 1px solid rgba(0, 82, 165, 0.10) !important;
    box-shadow: 0 32px 80px rgba(3, 11, 142, 0.22),
                inset 0 1px 0 rgba(255,255,255,0.9) !important;
    max-width: 400px !important;
}

.coming-soon-image.swal2-image {
    animation: loaderFloat 2.6s ease-in-out infinite !important;
    filter: drop-shadow(0 14px 26px rgba(0, 82, 165, 0.24)) !important;
    margin: 0 auto 4px !important;
    border-radius: 0 !important;
}

.coming-soon-title.swal2-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #030B8E !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
}

.coming-soon-content.swal2-html-container {
    color: rgba(3, 11, 142, 0.60) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 10px 0 0 !important;
}

.coming-soon-content.swal2-html-container p { margin: 0; }

.coming-soon-btn.btn--primary {
    margin-top: 6px !important;
    min-width: 130px !important;
}

/* Fix mínimo: evita overlay oscuro en active sin tocar display ni visibility */
.coming-soon-btn.btn--primary:active {
    background-image: none !important;
    filter: none !important;
}

/* ============================================================
   FORMULARIOS DE SOLICITUDES — Estética premium
   ============================================================ */

/* Header del panel de formulario: gradiente institucional */
.leave-request-panel:not(#leave-request-status) .leave-request-card__header {
    background: linear-gradient(135deg, #030B8E 0%, #0052A5 58%, #0469c0 100%);
    border-bottom: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.leave-request-panel:not(#leave-request-status) .leave-request-card__header::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.22), transparent 70%);
    pointer-events: none;
}

.leave-request-panel:not(#leave-request-status) .leave-request-card__header h2 {
    color: #ffffff;
}

.leave-request-panel:not(#leave-request-status) .leave-request-card__header p {
    color: rgba(255, 255, 255, 0.70);
}

/* Secciones del formulario: fondo suave con gradiente */
.leave-request-panel .gestion-empleados-section {
    background: linear-gradient(160deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.14) 100%);
    box-shadow: 0 6px 20px rgba(var(--brand-secondary-rgb), 0.06);
    border-color: rgba(var(--brand-primary-rgb), 0.10);
}

/* Títulos de sección: accent bar + uppercase mejorado */
.leave-request-panel .gestion-empleados-section__title {
    font-size: 11px;
    letter-spacing: 0.13em;
    color: var(--brand-primary);
    padding-left: 10px;
    border-left: 3px solid var(--brand-accent);
    margin-bottom: 16px;
}

/* Tarjetas de opción de tipo de permiso: premium */
.leave-option-card {
    background: linear-gradient(160deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.12) 100%);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    box-shadow: 0 6px 18px rgba(var(--brand-secondary-rgb), 0.06);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease,
                box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.leave-option-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--brand-accent-rgb), 0.44);
    box-shadow: 0 16px 34px rgba(var(--brand-secondary-rgb), 0.12);
}

/* Opción seleccionada: cyan suave */
.leave-option-card.is-active {
    background: linear-gradient(160deg, rgba(4, 177, 233, 0.14), rgba(90, 206, 239, 0.08));
    border: 2px solid #04B1E9;
    box-shadow: 0 0 0 4px rgba(4, 177, 233, 0.14), 0 14px 30px rgba(4, 177, 233, 0.16);
}

.leave-option-card.is-active .leave-option-card__title {
    color: var(--brand-primary);
}

/* Botones de acción del formulario */
.leave-request-panel .btn--primary {
    min-width: 160px;
}

.leave-request-panel .btn--ghost {
    min-width: 120px;
}

/* Pista de hint: más visible */
.leave-form-hint {
    color: var(--color-muted);
    font-size: 12.5px;
    font-style: italic;
}

/* ============================================================
   DONUT CHART — Resumen de vacaciones
   ============================================================ */
.vac-donut-chart {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vac-donut-chart__title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-secondary);
}

.vac-donut-chart__subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--brand-primary);
}

.vac-donut-chart__body {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Ring del donut */
.vac-donut-chart__ring {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.vac-donut-svg {
    width: 100%;
    height: 100%;
    animation: donutReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    overflow: visible;
}

@keyframes donutReveal {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

.vac-donut-arc {
    transition: opacity 0.3s ease;
}

.vac-donut-arc--available {
    filter: drop-shadow(0 0 6px rgba(4, 177, 233, 0.50));
}

/* Texto central */
.vac-donut-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.vac-donut-chart__num {
    font-size: 30px;
    font-weight: 700;
    color: var(--brand-secondary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vac-donut-chart__label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--color-muted);
    margin-top: 4px;
    line-height: 1.25;
    max-width: 68px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Leyenda */
.vac-donut-chart__legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vac-donut-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--color-muted);
}

.vac-donut-chart__legend-item strong {
    margin-left: auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-secondary);
    font-variant-numeric: tabular-nums;
}

.vac-donut-chart__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vac-donut-chart__dot--available { background: #04B1E9; box-shadow: 0 0 6px rgba(4,177,233,0.5); }
.vac-donut-chart__dot--pending   { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }

/* ============================================================
   DETALLE DE SOLICITUD — Modal premium (jefatura/supervisor)
   ============================================================ */

/* Sección: fondo con gradiente suave + sombra */
.request-detail-modal .request-detail-section {
    background: linear-gradient(160deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.13) 100%);
    border-color: rgba(var(--brand-primary-rgb), 0.10);
    box-shadow: 0 6px 20px rgba(var(--brand-secondary-rgb), 0.06);
    overflow: hidden;
}

/* Header de sección: franja gradient azul */
.request-detail-modal .request-detail-section__header {
    background: linear-gradient(135deg, #030B8E 0%, #0052A5 60%, #0469c0 100%);
    margin: -18px -18px 14px;
    padding: 14px 18px;
    border-radius: 14px 14px 0 0;
    position: relative;
    overflow: hidden;
}

/* Orbe decorativo en el header */
.request-detail-modal .request-detail-section__header::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.22), transparent 70%);
    pointer-events: none;
}

.request-detail-modal .request-detail-section__header h3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.request-detail-modal .request-detail-section__header p {
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    margin: 3px 0 0;
}

/* Campos: label uppercase + valor prominent */
.request-detail-modal .request-detail-field {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(var(--brand-primary-rgb), 0.10);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.request-detail-modal .request-detail-field:hover {
    border-color: rgba(var(--brand-accent-rgb), 0.36);
    box-shadow: 0 4px 14px rgba(var(--brand-secondary-rgb), 0.08);
}

.request-detail-modal .request-detail-field span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.request-detail-modal .request-detail-field strong {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand-secondary);
}

/* Estados del circuito: indicador de color en la parte superior */
.request-detail-modal .request-detail-status {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(var(--brand-primary-rgb), 0.10);
    border-radius: 12px;
    padding-top: 14px;
    position: relative;
    overflow: hidden;
}

.request-detail-modal .request-detail-status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
}

.request-detail-modal .request-detail-status span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Modal header title cuando es request detail */
.request-detail-modal ~ .request-detail-actions .btn--ghost {
    min-width: 110px;
}

@media (max-width: 720px) {
    .request-detail-modal .request-detail-section__header {
        margin: -14px -14px 12px;
        padding: 12px 14px;
    }
}

/* ============================================================
   PANEL DE CONTROL RRHH — Hero con glassmorphism
   ============================================================ */

/* Hero: gradiente más suave para el admin (distinguible del empleado) */
.panel-hero.ep-zone {
    background: linear-gradient(135deg, #020a6e 0%, #0052A5 52%, #0369a8 100%);
}

/* Cards KPI: glassmorphism sobre gradiente */
.page[data-page="panel"] .ep-zone .summary-card {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 14px 32px rgba(2, 10, 110, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.32);
    transition: background 0.24s ease, border-color 0.24s ease,
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.page[data-page="panel"] .ep-zone .summary-card::before { display: none; }

.page[data-page="panel"] .ep-zone .summary-card:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.44);
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(2, 10, 110, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.page[data-page="panel"] .ep-zone .summary-card__value   { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.page[data-page="panel"] .ep-zone .summary-card__label   { color: rgba(255,255,255,0.90) !important; }
.page[data-page="panel"] .ep-zone .summary-card__meta    { color: rgba(255,255,255,0.62) !important; }
.page[data-page="panel"] .ep-zone .summary-card__bar     { background: rgba(255,255,255,0.20); }
.page[data-page="panel"] .ep-zone .summary-card__bar span { background: rgba(255,255,255,0.58); }
.page[data-page="panel"] .ep-zone .summary-card.is-loading { background: rgba(255,255,255,0.09) !important; }
.page[data-page="panel"] .ep-zone .skeleton {
    background: linear-gradient(105deg,
        rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 30%,
        rgba(255,255,255,0.30) 50%,
        rgba(255,255,255,0.10) 70%, rgba(255,255,255,0.10) 100%);
}

/* Toolbar del panel: tarjeta premium flotante */
.panel-toolbar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(var(--brand-secondary-rgb), 0.08);
}

/* Widget headers del panel: accent bar superior */
.page[data-page="panel"] .widget__header {
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.6);
    position: relative;
}

.page[data-page="panel"] .widget__header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-accent), transparent);
    border-radius: 999px;
}

@media (max-width: 720px) {
    .panel-hero.ep-zone { padding: 16px 16px 20px; gap: 14px; }
}

/* ============================================================
   TODAS LAS HERRAMIENTAS RRHH/ADMIN — Header hero unificado
   Aplica a todos los data-page que no sean "panel" ni "empleado-*"
   ============================================================ */

/* Selector base: página admin/herramienta */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header {
    background: linear-gradient(135deg, #020a6e 0%, #0052A5 52%, #0369a8 100%);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(2, 10, 110, 0.22);
}

/* Línea animada (::before) */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header::before {
    content: "";
    position: absolute;
    top: 35%;
    left: -220px;
    width: 180px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(4, 177, 233, 0.55), transparent);
    animation: lineSlideRight 11s linear infinite;
    animation-delay: -4s;
    pointer-events: none;
}

/* Orbe decorativo (::after) */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 210px;

    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 177, 233, 0.20), transparent 70%);
    pointer-events: none;
}

/* Textos */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header h1,
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header__main h1 {
    color: #ffffff;
}

.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header p,
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header__main p {
    color: rgba(255, 255, 255, 0.74);
}

.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-title-icon {
    color: rgba(255, 255, 255, 0.90);
    position: relative;
    z-index: 1;
}

/* Status pill */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header .status-pill {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
    font-weight: 700;
}

/* Botones ghost dentro del header */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header .btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.92);
}

.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.50);
    color: #ffffff;
}

/* Botones primary dentro del header */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header .btn--primary {
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.36);
    color: #ffffff;
    box-shadow: none;
}

/* Icon-buttons dentro del header */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header .icon-button {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.26);
    color: rgba(255, 255, 255, 0.85);
}

/* Zindex para que el contenido quede sobre el orbe */
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header > *,
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header__main,
.page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header__actions {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .page[data-page]:not([data-page="panel"]):not([data-page^="empleado"]) .page-header::before {
        animation: none;
    }
}

/* ============================================================
   RESPONSIVE FIX — Mis Vacaciones (ep-zone dentro del grid)
   ============================================================ */

/* El ep-zone ocupa la columna 1 del grid de la página de vacaciones */
.empleado-vacaciones-page .ep-zone {
    grid-column: 1;
    align-self: stretch;
}

/* Achica el mínimo de la columna 2 para que no desborde */
.empleado-vacaciones-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
}

/* Colapso más temprano: pantallas < 1100px */
@media (max-width: 1100px) {
    .empleado-vacaciones-page {
        grid-template-columns: 1fr;
    }

    .empleado-vacaciones-page .ep-zone,
    .empleado-vacaciones-page__summary,
    .empleado-vacaciones-page__history {
        grid-column: 1 !important;
        width: 100%;
        justify-self: stretch;
    }

    .empleado-vacaciones-page__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
    }
}

/* Móvil: 1 columna para las cards KPI */
@media (max-width: 600px) {
    .empleado-vacaciones-page__summary {
        grid-template-columns: 1fr;
    }

    .empleado-vacaciones-page .ep-zone {
        padding: 16px 16px 18px;
    }
}

/* ============================================================
   RESPONSIVE FIXES — Auditoría completa 2026-05-26
   ============================================================ */

/* FIX 1 — Tabla balance vacaciones: scroll horizontal en contenedor */
.empleado-vacaciones-page .vac-employee-readonly {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

/* FIX 2 — vac-balance-overview: colapso completo en móvil */
@media (max-width: 720px) {
    .empleado-vacaciones-page .vac-balance-overview {
        grid-template-columns: 1fr !important;
    }

    .empleado-vacaciones-page .vac-balance-chart {
        max-width: 100% !important;
        min-height: 0;
    }

    .empleado-vacaciones-page .vac-balance-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* FIX 3 — Summary grid: breakpoint intermedio tablet */
@media (max-width: 1024px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* FIX 4 — Widgets grid: breakpoints intermedios */
@media (max-width: 1100px) and (min-width: 721px) {
    .widgets-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .widget {
        grid-column: span 1 !important;
    }
}

/* FIX 5 — Admin tools grid: 600px */
@media (max-width: 600px) {
    .admin-tool-group .admin-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-tool-button {
        min-height: 0;
        aspect-ratio: auto;
        padding: 16px 12px;
    }
}

/* FIX 6 — EP-Zone en pantallas muy pequeñas */
@media (max-width: 480px) {
    .ep-zone,
    .ep-zone--slim {
        padding: 14px 14px 16px;
        gap: 12px;
        border-radius: var(--radius-md);
    }

    .ep-zone__cards {
        padding-right: 0;
    }
}

/* FIX 7 — Field-group: evita overflow en formularios chicos */
@media (max-width: 640px) {
    .field-group {
        min-width: 0;
    }

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

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

/* FIX 8 — Topbar sin desbordamiento en mobile */
@media (max-width: 400px) {
    .topbar__left {
        overflow: hidden;
        min-width: 0;
    }

    .topbar__copy {
        min-width: 0;
        overflow: hidden;
    }
}

/* FIX 9 — Modal: ancho máximo en mobile */
@media (max-width: 600px) {
    .modal__dialog {
        width: calc(100vw - 16px) !important;
        margin: 8px auto;
        border-radius: 16px;
    }
}

/* FIX 10 — ep-shortcuts: 2 columnas en 400px */
@media (max-width: 400px) {
    .ep-shortcuts .admin-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* FIX 11 — Toast: ancho mínimo adaptado (aplicado en selector base) */
@media (max-width: 400px) {
    .toast-stack {
        right: 8px;
        left: 8px;
        bottom: 12px;
    }
}

/* FIX 12 — Field-group: gap 400-640px más seguro */
@media (max-width: 480px) {
    .field-group {
        min-width: 0;
    }

    .toolbar {
        gap: 10px;
    }
}

/* FIX 13 — Topbar: título muy largo en mobile */
@media (max-width: 480px) {
    .topbar__copy strong {
        font-size: 13px;
    }

    .topbar__eyebrow {
        font-size: 9px;
    }
}

/* FIX 14 — Leave request forms: formularios en mobile */
@media (max-width: 600px) {
    .leave-request-card__body {
        padding: 14px;
    }

    .leave-form-prose__line {
        flex-direction: column;
    }

    .leave-inline-field {
        flex-basis: auto;
        min-width: 0;
        width: 100%;
    }
}

/* FIX 15 — Vac-summary-cards en mobile */
@media (max-width: 600px) {
    .vac-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* FIX 16 — Request detail statuses en mobile */
@media (max-width: 600px) {
    .request-detail-statuses {
        grid-template-columns: 1fr !important;
    }

    .request-detail-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FIX 17 — Page header con botones: evita desbordamiento */
@media (max-width: 480px) {
    .page-header--split {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header__actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* FIX 18 — Sidebar en mobile muy estrecho */
@media (max-width: 360px) {
    .sidebar {
        width: calc(100vw - 16px);
    }

    .nav-link {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* FIX 19 — Summary card valor: font-size en mobile */
@media (max-width: 360px) {
    .summary-card__value {
        font-size: 28px;
    }
}

/* FIX 20 — Previene overflow horizontal en el body en cualquier contexto */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ocultar botones duplicados del topbar (están en el sidebar) */
.topbar__actions .js-change-password-action,
.topbar__actions .js-change-profile {
    display: none !important;
}

/* ── Donut V2: donut izquierda + grilla 3 col ocupa todo el espacio ── */

.vac-donut-v2 {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px 28px;
    align-items: start;
    padding: 20px 22px;
    width: 100%;
    box-sizing: border-box;
}

.vac-donut-v2__ring {
    position: relative;
    width: 190px;
    height: 190px;
    flex-shrink: 0;
    animation: donutReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.vac-donut-v2__legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.vac-donut-v2__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-secondary);
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.55);
}

.vac-donut-v2__legend-head { display: none; }

/* Fila título + badge en el donut legend */
.vac-donut-v2__legend-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.vac-donut-v2__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-secondary);
}

/* ── Badges de calidad del dato ── */
.vac-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.vac-source-badge i { font-size: 10px; }

.vac-source-badge--ok {
    background: rgba(22, 163, 74, 0.10);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.24);
}

.vac-source-badge--partial {
    background: rgba(154, 103, 0, 0.10);
    color: #9a6700;
    border: 1px solid rgba(154, 103, 0, 0.24);
}

.vac-source-badge--estimated {
    background: rgba(var(--brand-primary-rgb), 0.08);
    color: var(--brand-primary);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.20);
}

/* ── Alerta RRHH: sin controles Excel ── */
.vac-control-alert {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(154, 103, 0, 0.28);
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(253, 230, 138, 0.4));
    margin-bottom: 4px;
}

.vac-control-alert__icon {
    font-size: 20px;
    color: #9a6700;
    flex-shrink: 0;
    padding-top: 2px;
}

.vac-control-alert__body {
    flex: 1;
    min-width: 0;
}

.vac-control-alert__body strong {
    display: block;
    color: #78350f;
    font-size: 13.5px;
    margin-bottom: 6px;
}

.vac-control-alert__body p {
    margin: 0 0 6px;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.55;
}

.vac-control-alert__body p:last-child { margin-bottom: 0; }

.vac-control-alert__body em {
    font-style: normal;
    font-weight: 700;
    background: rgba(154, 103, 0, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Grilla 3 columnas que llena todo el ancho disponible */
.vac-donut-v2__legend-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

/* Tarjeta: año arriba (small label) + días abajo (número grande) */
.vac-legend-row {
    display: grid;
    grid-template-areas:
        "dot year"
        "days days";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 3px 7px;
    padding: 12px 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.7);
    background: linear-gradient(160deg, var(--brand-white) 0%, rgba(var(--brand-accent-soft-rgb), 0.12) 100%);
    box-shadow: 0 4px 14px rgba(var(--brand-secondary-rgb), 0.06);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s ease,
                border-color 0.18s ease;
    cursor: default;
}

.vac-legend-row:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--brand-accent-rgb), 0.42);
    box-shadow: 0 10px 26px rgba(var(--brand-secondary-rgb), 0.12);
}

.vac-legend-dot {
    grid-area: dot;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    align-self: center;
    flex-shrink: 0;
}

.vac-legend-year {
    grid-area: year;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
    align-self: center;
}

.vac-legend-days {
    grid-area: days;
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .vac-donut-v2__legend-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Mis Vacaciones: gráfico grande centrado ── */
.vac-hero-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 32px 24px;
}

.vac-hero-center {
    width: 100%;
    max-width: 860px;
}

/* Donut solo centrado */
.vac-donut-v2--solo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 36px;
    background: var(--color-surface);
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(var(--brand-secondary-rgb), 0.10);
}

.vac-hero-center .vac-donut-v2--solo .vac-donut-v2__ring {
    width: 280px;
    height: 280px;
}

.vac-hero-center .vac-donut-chart__num {
    font-size: 56px;
}

.vac-hero-center .vac-donut-chart__label {
    font-size: 13px;
    max-width: 110px;
    text-align: center;
    line-height: 1.35;
}

@media (max-width: 720px) {
    .vac-hero-chart { min-height: 40vh; padding: 20px 16px; }
    .vac-donut-v2--solo { padding: 28px 20px; }
    .vac-hero-center .vac-donut-v2--solo .vac-donut-v2__ring { width: 220px; height: 220px; }
    .vac-hero-center .vac-donut-chart__num { font-size: 42px; }
}

@media (max-width: 720px) {
    .vac-donut-v2 {
        grid-template-columns: 1fr;
    }
    .vac-donut-v2__ring {
        margin: 0 auto;
        width: 170px;
        height: 170px;
    }
    .vac-legend-days { font-size: 22px; }
}

@media (max-width: 400px) {
    .vac-donut-v2__legend-body {
        grid-template-columns: 1fr;
    }
}

/* Fila de total en tabla de saldos por año */
.vac-pending-total-row td {
    border-top: 2px solid rgba(var(--brand-primary-rgb), 0.22);
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
    padding-top: 12px;
    padding-bottom: 12px;
}

.vac-pending-total {
    font-size: 17px;
    color: var(--brand-secondary);
}

/* Fila de nota cuando saldos ≠ disponible real */
.vac-pending-info-row td {
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.14);
}

.vac-pending-info-cell {
    padding: 12px 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.10);
    border-radius: 0 0 12px 12px;
    font-size: 12.5px;
    color: var(--color-muted);
    line-height: 1.55;
}

.vac-pending-info-cell i {
    color: var(--brand-primary);
    margin-right: 4px;
}

.vac-pending-info-cell strong {
    color: var(--brand-secondary);
}

/* ── Reportes: botones de exportación en el header ── */
.report-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.report-timestamp {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    white-space: nowrap;
}

.report-export-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-action-btn-pair {
    display: flex;
    gap: 8px;
}

/* Botón base de acción de reporte */
.report-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s ease;
    backdrop-filter: blur(8px);
    white-space: nowrap;
    line-height: 1.25;
}

.report-action-btn i {
    font-size: 18px;
    flex-shrink: 0;
}

.report-action-btn small {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.80;
}

.report-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.52);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.report-action-btn:active:not(:disabled) {
    transform: scale(0.97) !important;
}

/* Excel: verde */
.report-action-btn--excel {
    background: rgba(22, 163, 74, 0.28);
    border-color: rgba(22, 163, 74, 0.50);
}

.report-action-btn--excel:hover:not(:disabled) {
    background: rgba(22, 163, 74, 0.42);
    border-color: rgba(22, 163, 74, 0.70);
}

.report-action-btn--excel i { color: #86efac; }

/* Generar PDF: blanco translúcido */
.report-action-btn--pdf-gen i { color: #fca5a5; }

/* Descargar PDF: accent cyan cuando activo */
.report-action-btn--pdf-dl:not(:disabled) {
    background: rgba(4, 177, 233, 0.28);
    border-color: rgba(4, 177, 233, 0.52);
}

.report-action-btn--pdf-dl:not(:disabled):hover {
    background: rgba(4, 177, 233, 0.44);
    border-color: rgba(4, 177, 233, 0.72);
}

.report-action-btn--pdf-dl:not(:disabled) i { color: #7dd3fc; }

/* Desabilitado */
.report-action-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .report-header-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
    .report-export-group { flex-wrap: wrap; }
    .report-action-btn { padding: 8px 12px; font-size: 12px; }
    .report-action-btn i { font-size: 15px; }
}

/* ── Widget export buttons (sobre fondo blanco) ── */
.report-export-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.widget-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.80);
    background: var(--brand-white);
    color: var(--brand-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.20s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.20s ease,
                background 0.18s ease,
                border-color 0.18s ease;
}

.widget-export-btn i {
    font-size: 15px;
    flex-shrink: 0;
}

.widget-export-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--brand-secondary-rgb), 0.12);
}

.widget-export-btn:active:not(:disabled) {
    transform: scale(0.96) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* Excel: verde */
.widget-export-btn--excel {
    border-color: rgba(22, 163, 74, 0.34);
    color: #16a34a;
}
.widget-export-btn--excel:hover:not(:disabled) {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.55);
}

/* Generar PDF: azul primario */
.widget-export-btn--pdf-gen {
    border-color: rgba(var(--brand-primary-rgb), 0.30);
    color: var(--brand-primary);
}
.widget-export-btn--pdf-gen:hover:not(:disabled) {
    background: rgba(var(--brand-primary-rgb), 0.07);
    border-color: rgba(var(--brand-primary-rgb), 0.50);
}

/* Descargar PDF: cyan cuando activo */
.widget-export-btn--pdf-dl:not(:disabled) {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.28);
}
.widget-export-btn--pdf-dl:not(:disabled):hover {
    box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), 0.36);
}

/* Subgrupos: neutro */
.widget-export-btn--subgroups {
    border-color: rgba(var(--brand-secondary-rgb), 0.22);
    color: var(--color-muted);
}
.widget-export-btn--subgroups:hover:not(:disabled) {
    background: rgba(var(--brand-accent-soft-rgb), 0.14);
    border-color: rgba(var(--brand-secondary-rgb), 0.36);
    color: var(--brand-secondary);
}

/* Deshabilitado */
.widget-export-btn:disabled {
    opacity: 0.36;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .report-export-actions { gap: 6px; }
    .widget-export-btn { padding: 6px 10px; font-size: 11.5px; }
    .widget-export-btn i { font-size: 13px; }
}

/* ── ABM Empleados: nueva UX lista → formulario ── */

.abm-search-bar {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.85);
    background: var(--color-surface);
    box-shadow: var(--color-shadow);
}

.abm-btn-new {
    white-space: nowrap;
}

/* Barra de navegación del formulario */
.abm-form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.abm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
    background: var(--brand-white);
    color: var(--brand-primary);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                transform 0.20s cubic-bezier(0.22, 1, 0.36, 1);
}

.abm-back-btn:hover {
    background: rgba(var(--brand-primary-rgb), 0.07);
    border-color: rgba(var(--brand-primary-rgb), 0.40);
    transform: translateX(-3px);
}

.abm-form-nav__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Botón "Ver / Modificar" en la tabla */
.gestion-empleados-actions .btn--sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gestion-empleados-actions .btn--sm i {
    font-size: 11px;
}

/* ── Filtros de ausencias: botones mejorados ── */
.absence-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.absence-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(var(--brand-primary-rgb), 0.28);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s ease;
}

.absence-btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.36);
}

.absence-btn-search i { font-size: 14px; }

.absence-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    border-color: rgba(var(--brand-neutral-rgb), 0.7);
    font-size: 13px;
}

.absence-btn-clear:hover {
    color: var(--brand-secondary);
    border-color: rgba(var(--brand-secondary-rgb), 0.28);
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
}

/* ── Layout de resultados de ausencias ── */
.absence-results__summary {
    margin-bottom: 18px;
}

.absence-results__table-wrap {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.absence-results__table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #020a6e 0%, #0052A5 58%, #0469c0 100%);
}

.absence-results__table-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.absence-export-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.absence-export-bar .widget-export-btn {
    padding: 7px 14px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

.absence-export-bar .widget-export-btn--excel {
    background: rgba(22, 163, 74, 0.28);
    border-color: rgba(22, 163, 74, 0.50);
}

.absence-export-bar .widget-export-btn--excel i { color: #86efac; }

.absence-export-bar .widget-export-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}

.absence-results__table-wrap .js-report-absence-table {
    padding: 0;
}

.absence-results__table-wrap .mini-table {
    border-radius: 0;
}

/* Estado vacío inicial */
.absence-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    color: var(--color-muted);
    text-align: center;
    padding: 32px;
    border: 1px dashed rgba(var(--brand-neutral-rgb), 0.8);
    border-radius: 14px;
    background: rgba(var(--brand-accent-soft-rgb), 0.05);
}

.absence-empty-state i {
    font-size: 32px;
    opacity: 0.28;
    color: var(--brand-primary);
}

.absence-empty-state p {
    margin: 0;
    font-size: 13.5px;
    max-width: 380px;
    line-height: 1.6;
}

/* ── Formulario de empleados: marcadores de campos ── */
.abm-req {
    color: #b42318;
    font-weight: 700;
}

.abm-optional {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
}

.abm-required-note {
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.abm-required-note .abm-req {
    font-size: 13px;
}

/* ── Detalle de solicitud: modal solo lectura ── */
/* ── Novedades: historial widget (full width al estar fuera del grid de 2 col) ── */

.novedad-historial-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.novedad-periodo-tabs {
    display: flex;
    gap: 4px;
    background: rgba(var(--brand-neutral-rgb), 0.55);
    border-radius: 10px;
    padding: 3px;
}

.novedad-periodo-tab {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.novedad-periodo-tab:hover {
    background: rgba(var(--brand-primary-rgb), 0.10);
    color: var(--brand-primary);
}

.novedad-periodo-tab.is-active {
    background: var(--brand-white);
    color: var(--brand-secondary);
    box-shadow: 0 2px 8px rgba(var(--brand-secondary-rgb), 0.12);
}

@media (max-width: 720px) {
    .novedad-historial-controls { flex-direction: column; align-items: flex-start; }
}

/* ── Novedades: ausencias pendientes inline ── */
.novedad-pendientes-inline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #d97706;
    margin: 16px 0 8px;
}

.novedad-pendientes-inline-title i {
    font-size: 14px;
    flex-shrink: 0;
}

.novedad-pendientes-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.novedad-pendientes-inline-list .novedad-pendiente {
    width: auto;
    flex: 0 0 auto;
    padding: 7px 12px;
    margin-bottom: 0;
}

/* ── Novedades: badge campo interno RRHH ── */
.novedad-internal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(3, 11, 142, 0.08);
    border: 1px solid rgba(3, 11, 142, 0.20);
    border-radius: 20px;
    color: var(--brand-secondary);
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.novedad-internal-badge i {
    font-size: 10px;
}

/* ── Novedades: Select2 resultado con doble línea ── */
.novedades-select-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

.novedades-select-result strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-secondary);
}

.novedades-select-result span {
    font-size: 11.5px;
    color: var(--color-muted);
}

.novedades-select-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 13px;
}

/* ── Carga de novedades: info strip ── */
.novedades-info-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.novedades-info-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-left: 3px solid var(--brand-primary);
    border-radius: 12px;
    font-size: 13px;
    color: var(--brand-secondary);
    font-weight: 500;
}

.novedades-info-pill i {
    font-size: 16px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* ── Widget variante lateral con acento ── */
.widget--side-accent {
    min-height: unset;
    border-top: 3px solid transparent;
}

.widget--accent-amber { border-top-color: #d97706; }
.widget--accent-primary { border-top-color: var(--brand-primary); }
.widget--accent-muted { border-top-color: rgba(var(--brand-neutral-rgb), 0.6); }

.widget--side-accent .widget__header h2 {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget--accent-amber .widget__header h2 i { color: #d97706; }
.widget--accent-primary .widget__header h2 i { color: var(--brand-primary); }

/* ── Carga de novedades: ausencias pendientes ── */
.novedad-pendiente-empty {
    font-size: 13px;
    color: var(--color-muted);
    padding: 10px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.novedad-pendiente-empty--ok {
    color: #16a34a;
}

.novedad-pendiente-empty i {
    font-size: 15px;
    flex-shrink: 0;
}

.novedad-pendiente {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #d97706;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease,
                transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.novedad-pendiente:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    transform: translateX(3px);
}

.novedad-pendiente__fecha {
    font-weight: 700;
    color: var(--brand-secondary);
    white-space: nowrap;
    min-width: 62px;
}

.novedad-pendiente__estado {
    flex: 1;
    color: var(--color-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.novedad-pendiente__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    background: #d97706;
    color: #ffffff;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Fichadas: widget expandido ── */
.widget--fichadas {
    min-height: 520px;
}

.widget--fichadas .widget__body {
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.widget--fichadas .mini-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 14px;
}

.widget--fichadas .mini-table thead th {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ── Fichadas: badges de hora ── */
.ficha-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-secondary);
}

.ficha-time--ok {
    color: #16a34a;
}

.ficha-time--late {
    color: #dc2626;
}

/* ── Widget header con gradiente institucional ── */
.widget__header--branded {
    padding: 18px 20px;
    background: linear-gradient(135deg, #020a6e 0%, #0052A5 55%, #0469c0 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
}

.widget__header--branded h2 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 3px;
}

.widget__header--branded span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    display: block;
    line-height: 1.4;
}

/* Con ícono a la izquierda (variante page-header dentro del widget) */
.widget__header--branded-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.widget-branded-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.widget-branded-title__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.widget-branded-title h2 {
    margin: 0 0 2px;
    font-size: 18px;
}

.status-pill--light {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    flex-shrink: 0;
}

/* ── Detalle de solicitud: modal solo lectura ── */
.req-ro-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header con gradiente institucional */
.req-ro-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #020a6e 0%, #0052A5 55%, #0469c0 100%);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.req-ro-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='200' height='60' viewBox='0 0 200 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='170' cy='30' rx='80' ry='40' fill='white' fill-opacity='0.04'/%3E%3C/svg%3E") right center / cover no-repeat;
    pointer-events: none;
}

.req-ro-header__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.req-ro-header__info {
    flex: 1;
    min-width: 0;
}

.req-ro-header__type {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.req-ro-header__id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
    font-weight: 500;
    margin-top: 2px;
}

.req-ro-header__badge {
    flex-shrink: 0;
}

.req-ro-header__badge .status-tag {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px);
}

/* Aviso de solo lectura */
.req-ro-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    background: rgba(var(--brand-accent-soft-rgb), 0.12);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    border-left: 3px solid var(--brand-primary);
    border-radius: 10px;
    font-size: 13px;
    color: var(--brand-secondary);
}

.req-ro-notice i {
    font-size: 14px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* Grid de campos */
.req-ro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.req-ro-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 15px;
    background: var(--color-surface);
    border: 1px solid rgba(var(--brand-neutral-rgb), 0.80);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.req-ro-field:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.28);
    box-shadow: 0 3px 12px rgba(var(--brand-primary-rgb), 0.07);
}

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

.req-ro-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-primary);
}

.req-ro-field__label i {
    font-size: 11px;
    opacity: 0.75;
}

.req-ro-field__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-secondary);
    word-break: break-word;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .req-ro-grid { grid-template-columns: 1fr; }
    .req-ro-header { flex-wrap: wrap; gap: 10px; }
    .req-ro-header__badge { width: 100%; }
}

/* ============================================================
   LEGAJO DIGITAL — Modal rediseñado — v20260527
   ============================================================ */

.ld-modal {
    display: grid;
    gap: 14px;
}

/* Hero */
.ld-modal-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg,
        var(--brand-secondary) 0%,
        var(--brand-primary)   55%,
        rgba(var(--brand-accent-rgb), 0.88) 100%
    );
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ld-modal-hero::before {
    content: "";
    position: absolute;
    top: -36px;
    right: -36px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.ld-modal-hero::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 38%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.ld-modal-hero__avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.38);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}

.ld-modal-hero__info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.ld-modal-hero__tags {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.ld-modal-hero__legajo-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.38);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ld-modal-hero .status-tag {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.30);
}

.ld-modal-hero__name {
    margin: 0 0 5px;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.ld-modal-hero__sub {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

.ld-modal-hero__sub span {
    opacity: 0.55;
    padding: 0 2px;
}

/* Secciones */
.ld-modal-section {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--brand-white);
    overflow: hidden;
}

.ld-modal-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(var(--brand-primary-rgb), 0.03);
}

.ld-modal-section__icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb), 0.28);
}

.ld-modal-section__icon i {
    font-size: 12px;
    color: #fff;
}

.ld-modal-section__header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-secondary);
    letter-spacing: 0.01em;
}

/* Grid de campos */
.ld-modal-section__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ld-modal-field {
    padding: 11px 16px;
    display: grid;
    gap: 3px;
    border-bottom: 1px solid rgba(var(--brand-neutral-rgb), 0.55);
}

.ld-modal-field:nth-last-child(1),
.ld-modal-field:nth-last-child(2) {
    border-bottom: none;
}

.ld-modal-field__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.ld-modal-field__value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-secondary);
    line-height: 1.4;
}

/* Acciones */
.ld-modal__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

/* Mobile */
@media (max-width: 560px) {
    .ld-modal-hero {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 18px 16px;
    }
    .ld-modal-hero__tags { justify-content: center; }
    .ld-modal-section__grid { grid-template-columns: 1fr; }
    .ld-modal-field:last-child { border-bottom: none; }
}

/* ============================================================
   SIDEBAR — Identidad visual por perfil — v20260527
   1. Franja animada en brand según perfil (rrhh / employee / chief)
   2. Avatar con gradiente específico por perfil
   3. Chip de rol en el nombre de usuario (::after)
   4. Meta pill: soporte para texto largo (legajo + sector)
   ============================================================ */

/* 1 — Franja superior del brand  */
.sidebar__brand {
    position: relative;
    overflow: hidden;
}

.sidebar__brand::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
    transform-origin: left center;
}

/* Nombres distintos para forzar re-trigger al cambiar de perfil */
@keyframes brandStripRrhh     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brandStripEmployee { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brandStripChief    { from { transform: scaleX(0); } to { transform: scaleX(1); } }

body.profile-rrhh .sidebar__brand::after {
    background: linear-gradient(to right, var(--brand-secondary), var(--brand-primary), var(--brand-accent));
    animation: brandStripRrhh 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

body.profile-employee .sidebar__brand::after {
    background: linear-gradient(to right, var(--brand-accent), var(--brand-primary), var(--brand-secondary));
    animation: brandStripEmployee 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

body.profile-chief .sidebar__brand::after {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary), var(--brand-accent));
    animation: brandStripChief 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

/* 2 — Avatar: gradiente específico por perfil */
body.profile-employee .sidebar__avatar {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
    box-shadow: 0 6px 18px rgba(var(--brand-accent-rgb), 0.34);
}

body.profile-chief .sidebar__avatar {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, #1a2f7a 100%);
    box-shadow: 0 6px 18px rgba(var(--brand-secondary-rgb), 0.34);
}

/* 3 — Chip de rol junto al nombre */
#sidebar-user-name::after {
    display: none;
}

body.profile-rrhh #sidebar-user-name::after    { content: "Admin";     display: inline-flex; }
body.profile-employee #sidebar-user-name::after { content: "Empleado";  display: inline-flex; }
body.profile-chief #sidebar-user-name::after    { content: "Jefatura";  display: inline-flex; }

body.profile-rrhh #sidebar-user-name::after,
body.profile-employee #sidebar-user-name::after,
body.profile-chief #sidebar-user-name::after {
    align-items: center;
    padding: 1px 7px;
    margin-left: 3px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.7;
    font-family: inherit;
    background: rgba(var(--brand-accent-rgb), 0.13);
    color: var(--brand-accent);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.26);
    animation: navIconPop 0.34s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

/* 4 — Meta pill: texto largo (legajo + sector en empleados) */
#sidebar-user-meta {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar__brand::after { animation: none; transform: scaleX(1); }
    body.profile-rrhh #sidebar-user-name::after,
    body.profile-employee #sidebar-user-name::after,
    body.profile-chief #sidebar-user-name::after { animation: none; }
}

/* ============================================================
   ANTI-FLASH DE ARRANQUE — v20260527
   Oculta toda la UI hasta que el JS aplica el estado correcto.
   La clase .is-booting se quita desde bootstrapAccess / resetAccess.
   ============================================================ */
body.is-booting .sidebar,
body.is-booting .topbar,
body.is-booting .app-main {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   SIDEBAR ANIMADO — v20260527
   1. Stagger de entrada por item de navegación (--nav-i via JS)
   2. Submenu: expand/collapse suave con max-height + opacity
   3. Connector tree line en submenu abierto
   4. Sublink: dot indicator + hover + active polish
   5. Chevron spring en toggle
   ============================================================ */

/* 1 — Entrada escalonada de items del nav */
@keyframes navGroupReveal {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sidebar__nav .nav-group,
.sidebar__nav .nav-section-title {
    animation: navGroupReveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nav-i, 0) * 55ms) both;
}

/* 2 — Submenu: reemplaza display:none/block con animación de alto */
.nav-submenu {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    margin-left: 18px;
    padding-left: 0;
    margin-top: 0;
    border-left: 2px solid transparent;
    transition:
        max-height   0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity      0.24s ease,
        transform    0.30s cubic-bezier(0.22, 1, 0.36, 1),
        visibility   0s   linear 0.38s,
        margin-top   0.26s ease,
        border-color 0.26s ease;
}

.nav-submenu.is-open {
    max-height: 480px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 4px;
    padding-left: 10px;
    padding-bottom: 4px;
    border-color: rgba(var(--brand-accent-rgb), 0.28);
    transition:
        max-height   0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity      0.26s ease 0.04s,
        transform    0.30s cubic-bezier(0.22, 1, 0.36, 1),
        visibility   0s   linear 0s,
        margin-top   0.26s ease,
        padding-left 0s   linear 0s,
        padding-bottom 0s linear 0s,
        border-color 0.26s ease;
}

/* 3 — Sublink: punto indicador */
.nav-sublink {
    gap: 8px;
}

.nav-sublink::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--brand-primary-rgb), 0.22);
    transition:
        background  0.22s ease,
        transform   0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow  0.22s ease;
}

.nav-sublink:hover::before {
    background: var(--brand-accent);
    transform: scale(1.55);
}

.nav-sublink.is-active::before {
    background: var(--brand-primary);
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

/* 4 — Sublink hover */
.nav-sublink:hover:not(.is-active) {
    background: rgba(var(--brand-accent-rgb), 0.07);
    color: var(--brand-secondary);
}

/* 5 — Sublink activo: barra izquierda + color */
.nav-sublink.is-active {
    background: rgba(var(--brand-primary-rgb), 0.07);
    color: var(--brand-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

/* 6 — Chevron del toggle: spring más expresivo */
.nav-link--toggle .nav-link__chevron {
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 7 — Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar__nav .nav-group,
    .sidebar__nav .nav-section-title {
        animation: none;
    }
    .nav-submenu {
        transition: visibility 0s linear 0.1s, opacity 0.1s ease;
    }
    .nav-submenu.is-open {
        transition: visibility 0s linear 0s, opacity 0.1s ease;
    }
    .nav-link--toggle .nav-link__chevron {
        transition: transform 0.15s ease;
    }
}