html body .topbar {
    top: 0;
    width: 100%;
    height: var(--shell-header-height, 82px);
    min-height: var(--shell-header-height, 82px);
    max-height: var(--shell-header-height, 82px);
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--topbar-bg);
    color: var(--topbar-text);
    border: 0;
    border-bottom: 1px solid var(--shell-divider-color, var(--line));
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

html body .topbar :is(.topbar-menu-toggle, .topbar-title-stack strong, .topbar-user-summary,
.topbar-user-copy strong, .topbar-logout-button, .theme-switch-container) {
    color: var(--topbar-text);
}

html body .topbar :is(.topbar-title-stack span, .topbar-user-copy small) {
    color: var(--topbar-text-muted);
}

html body .topbar :is(.topbar-context__separator, .topbar-actions__separator) {
    background: var(--topbar-border);
}

html body .topbar-title-stack strong {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -.015em;
}

html body .topbar-title-stack span {
    font-size: var(--text-xs);
}

html body .topbar-actions {
    gap: 9px;
}

.topbar-pinned-access {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.topbar-pinned-access:empty {
    display: none;
}

.topbar-pinned-access__item {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 10px;
    color: var(--primary);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
    width: 34px;
}

.topbar-pinned-access__item:hover,
.topbar-pinned-access__item:focus-visible {
    background: color-mix(in srgb, var(--primary) 17%, var(--panel));
    border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
    outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.topbar-pinned-access__item svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

html body .dashboard-quick-access {
    background: transparent;
    border: 0;
    padding: 0;
}

html body .dashboard-quick-access__heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;
}

html body .dashboard-quick-access__heading h2 {
    color: var(--text);
    font-size: var(--text-md);
    margin: 0;
}

html body .dashboard-quick-access__heading p,
.dashboard-quick-access__count {
    color: var(--muted);
    font-size: var(--text-2xs);
    margin: 3px 0 0;
}

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

html body .dashboard-quick-access__card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
    display: block;
    min-height: 122px;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

html body .dashboard-quick-access__card:hover,
html body .dashboard-quick-access__card:focus-within {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

html body .dashboard-quick-access__card.is-pinned {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

html body .dashboard-quick-access__card.is-pinned::after {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 10px;
    bottom: 12px;
    color: var(--text);
    content: "Fijado";
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 3px 8px;
    position: absolute;
    right: 12px;
}

.dashboard-quick-access__link {
    color: inherit;
    display: grid;
    gap: 5px;
    height: 100%;
    min-height: 122px;
    padding: 15px 42px 14px 15px;
    text-decoration: none;
}

html body .dashboard-quick-access__pin {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: opacity .14s ease, color .14s ease, background-color .14s ease;
    width: 28px;
    z-index: 2;
}

html body .dashboard-quick-access__card:hover .dashboard-quick-access__pin,
html body .dashboard-quick-access__card:focus-within .dashboard-quick-access__pin,
html body .dashboard-quick-access__card.is-pinned .dashboard-quick-access__pin {
    opacity: 1;
}

html body .dashboard-quick-access__pin:hover,
html body .dashboard-quick-access__pin:focus-visible,
html body .dashboard-quick-access__pin[aria-pressed="true"] {
    background: color-mix(in srgb, var(--primary) 11%, var(--panel));
    color: var(--primary);
    outline: none;
}

.dashboard-quick-access__pin svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 15px;
}

html body .dashboard-quick-access__icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 9%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 10px;
    color: var(--primary);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin-bottom: 4px;
    width: 36px;
}

html body .dashboard-quick-access__link strong {
    color: var(--text);
    font-size: var(--text-sm);
}

html body .dashboard-quick-access__link > span:not(.dashboard-quick-access__icon),
html body .dashboard-quick-access__link small {
    color: var(--muted);
    font-size: var(--text-2xs);
}

html body .employee-requests {
    display: grid;
    gap: 16px;
    max-width: 100%;
}

html body .employee-requests__module-header {
    align-items: end;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 0;
}

html body .employee-requests__module-header h1 {
    color: var(--text);
    font-size: var(--text-2xl);
    letter-spacing: -.035em;
    margin: 0;
}

html body .employee-requests__module-header .eyebrow {
    display: none;
}

html body .employee-requests__module-header .stariz-module-header__description {
    color: var(--muted);
    font-size: var(--text-xs);
    margin: 5px 0 0;
}

.employee-requests__module-actions {
    flex: 0 0 auto;
}

.employee-requests__role-switch {
    align-items: center;
    background: color-mix(in srgb, var(--muted) 7%, var(--panel));
    border-radius: 13px;
    display: flex;
    gap: 3px;
    padding: 4px;
}

.employee-requests__role-switch > span {
    align-items: center;
    border-radius: 10px;
    color: var(--muted);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
}

.employee-requests__role-switch > span.is-active {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.employee-requests__role-switch b {
    align-items: center;
    background: color-mix(in srgb, #f59e0b 88%, var(--panel));
    border-radius: 10px;
    color: #111827;
    display: inline-flex;
    font-size: var(--text-2xs);
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding-inline: 5px;
}

html body .employee-requests__new-request {
    border-radius: 12px;
    min-height: 42px;
    padding-inline: 16px;
}

html body .employee-requests__workspace {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 14px;
    padding: 0;
}

html body .employee-requests__toolbar {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: flex-end;
    min-height: 0;
    padding: 0;
}

html body .employee-requests__scope-badge {
    margin-right: auto;
}

html body .employee-requests__filters {
    align-items: end;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    padding: 14px;
}

html body .employee-requests__filters-heading {
    grid-column: 1 / -1;
    margin-bottom: 1px;
}

html body .employee-requests__field > span {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .045em;
    text-transform: uppercase;
}

html body .employee-requests__field select {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    min-height: 42px;
}

html body .employee-requests__summary--adn {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .employee-requests__kpi {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
    display: flex;
    gap: 14px;
    min-height: 92px;
    padding: 15px 18px;
}

.employee-requests__kpi-bar {
    align-self: stretch;
    border-radius: 10px;
    display: block;
    flex: 0 0 8px;
    min-height: 48px;
}

.employee-requests__kpi--pending {
    background: color-mix(in srgb, #fbbf24 9%, var(--panel));
    border-color: color-mix(in srgb, #fbbf24 28%, var(--line));
}
.employee-requests__kpi--pending .employee-requests__kpi-bar { background: #f2b632; }
.employee-requests__kpi--approved {
    background: color-mix(in srgb, #34d399 9%, var(--panel));
    border-color: color-mix(in srgb, #34d399 27%, var(--line));
}
.employee-requests__kpi--approved .employee-requests__kpi-bar { background: #58c995; }
.employee-requests__kpi--rejected {
    background: color-mix(in srgb, #f87171 8%, var(--panel));
    border-color: color-mix(in srgb, #f87171 25%, var(--line));
}
.employee-requests__kpi--rejected .employee-requests__kpi-bar { background: #e46b6b; }

.employee-requests__kpi div {
    display: grid;
    gap: 6px;
}

.employee-requests__kpi strong {
    color: var(--text);
    font-size: var(--text-3xl);
    letter-spacing: -.04em;
    line-height: 1;
}

.employee-requests__kpi div > span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

html body .employee-requests__table-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
}

html body .employee-requests__table-heading {
    min-height: 62px;
    padding: 14px 18px;
}

html body .employee-requests__table-heading .eyebrow {
    display: none;
}

html body .employee-requests__table-heading h2 {
    color: var(--text);
    font-size: var(--text-md);
}

html body .employee-requests__table-card .table-wrap {
    border-top: 1px solid var(--line);
    border-radius: 0;
}

html body .employee-requests__table-card table {
    min-width: 1080px;
}

html body .employee-requests__table-card th {
    background: color-mix(in srgb, var(--muted) 4%, var(--panel));
    color: var(--muted);
    font-size: var(--text-2xs);
    letter-spacing: .055em;
    padding: 11px 14px;
}

html body .employee-requests__table-card td {
    color: var(--text);
    padding: 13px 14px;
}

.employee-requests__person-cell {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.employee-requests__person-cell > span:last-child,
.employee-requests__period-cell {
    display: grid;
    gap: 2px;
}

.employee-requests__person-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 13%, var(--panel));
    border-radius: 10px;
    color: var(--text);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    height: 34px;
    justify-content: center;
    width: 34px;
}

.employee-requests__period-cell strong {
    color: var(--text);
    font-size: var(--text-xs);
}

.employee-requests__period-cell small {
    color: var(--muted);
    font-size: var(--text-2xs);
}

html body .employee-requests :is(.employee-requests__status, .employee-requests__type-badge) {
    color: var(--text);
}

html body .employee-request-dialog {
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    padding: 20px;
}

html body .employee-request-dialog__surface {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    width: min(1080px, 96vw);
}

html body .employee-request-dialog__header {
    align-items: center;
    background: linear-gradient(110deg, var(--primary), color-mix(in srgb, var(--primary) 84%, #111827));
    border: 0;
    color: var(--primary-contrast);
    min-height: 72px;
    padding: 15px 20px;
}

html body .employee-request-dialog__header :is(h2, p, .eyebrow),
html body .employee-request-dialog__header .employee-request-dialog__brand-icon {
    color: var(--primary-contrast);
}

html body .employee-request-dialog__header .eyebrow,
html body .employee-request-dialog__header p:last-child {
    display: none;
}

html body .employee-request-dialog__header h2 {
    font-size: var(--text-lg);
    margin: 0;
}

html body .employee-request-dialog__brand-icon {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}

html body .employee-request-dialog__close {
    background: rgba(255,255,255,.12);
    border: 0;
    border-radius: 10px;
    color: var(--primary-contrast);
    height: 34px;
    width: 34px;
}

html body .employee-request-dialog__content {
    background: var(--panel);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    max-height: calc(100dvh - 174px);
    overflow: auto;
    padding: 0;
}

html body .employee-request-dialog__main {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

html body .employee-request-dialog__tabs {
    background: color-mix(in srgb, var(--muted) 5%, var(--panel));
    border: 1px solid var(--line);
    border-radius: 13px;
    gap: 5px;
    padding: 5px;
}

html body .employee-request-dialog__tabs button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    min-height: 42px;
}

html body .employee-request-dialog__tabs button.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}

html body .employee-request-dialog__horizontal-form {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(255px, .62fr) minmax(0, 1.55fr);
    min-width: 0;
}

html body .employee-request-dialog__form-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    min-width: 0;
    padding: 14px;
}

html body .employee-request-dialog__form-card--requester {
    align-self: start;
}

html body .employee-request-dialog__section-title {
    margin-bottom: 11px;
}

html body .employee-request-dialog__step {
    display: none;
}

html body .employee-request-dialog__section-title h3 {
    color: var(--text);
    font-size: var(--text-sm);
}

html body .employee-request-dialog__section-title p {
    color: var(--muted);
    font-size: var(--text-2xs);
}

html body .employee-request-dialog__form-grid {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .employee-request-dialog__field input,
html body .employee-request-dialog__field select,
html body .employee-request-dialog__field textarea {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    min-height: 46px;
}

html body .employee-request-dialog__field textarea {
    min-height: 104px;
}

html body .employee-request-dialog__person {
    background: color-mix(in srgb, var(--primary) 7%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
    border-radius: 12px;
}

html body .employee-request-dialog__approver {
    align-items: center;
    background: color-mix(in srgb, var(--muted) 4%, var(--panel));
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    display: flex;
    gap: 10px;
    margin-top: 10px;
    min-height: 58px;
    padding: 10px 12px;
}

html body .employee-request-dialog__approver > svg {
    color: var(--primary);
    flex: 0 0 auto;
}

html body .employee-request-dialog__approver > div {
    display: grid;
    gap: 2px;
}

html body .employee-request-dialog__approver span,
html body .employee-request-dialog__approver small {
    color: var(--muted);
    font-size: var(--text-2xs);
}

html body .employee-request-dialog__approver strong {
    color: var(--text);
    font-size: var(--text-2xs);
}

html body .employee-request-dialog__aside {
    background: color-mix(in srgb, var(--muted) 3%, var(--panel));
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px;
}

html body .employee-request-dialog__quick-summary,
html body .employee-request-dialog__help,
html body .employee-request-dialog__validation {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: none;
}

html body .employee-request-dialog__footer {
    background: var(--panel);
    border-top: 1px solid var(--line);
    gap: 10px;
    min-height: 70px;
    padding: 13px 20px;
}

html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body .dashboard-quick-access__card,
html[data-theme="dark"] body .employee-requests__filters,
html[data-theme="dark"] body .employee-requests__kpi,
html[data-theme="dark"] body .employee-requests__table-card,
html[data-theme="dark"] body .employee-request-dialog__surface {
    color-scheme: dark;
}

@media (max-width: 1320px) {
    html body .dashboard-quick-access__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .employee-requests__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    html body .employee-requests__module-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-requests__module-actions {
        justify-content: space-between;
        width: 100%;
    }

    html body .employee-request-dialog__content {
        grid-template-columns: 1fr;
    }

    html body .employee-request-dialog__horizontal-form {
        grid-template-columns: 1fr;
    }

    html body .employee-request-dialog__main {
        border-bottom: 1px solid var(--line);
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .topbar-pinned-access {
        display: flex;
        max-width: 84px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar-pinned-access::-webkit-scrollbar {
        display: none;
    }

    html body .dashboard-quick-access__grid,
    html body .employee-requests__filters,
    html body .employee-requests__summary--adn,
    html body .employee-request-dialog__form-grid {
        grid-template-columns: 1fr;
    }

    .employee-requests__module-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-requests__role-switch {
        justify-content: stretch;
    }

    .employee-requests__role-switch > span {
        flex: 1;
        justify-content: center;
    }

    html body .employee-request-dialog {
        align-items: stretch;
        padding: 8px;
    }

    html body .employee-request-dialog__surface {
        max-height: calc(100dvh - 16px);
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-pinned-access__item,
    .dashboard-quick-access__card,
    .dashboard-quick-access__pin {
        transition: none;
    }
}

:root {
    --stariz-card-border: color-mix(in srgb, var(--text) 17%, var(--panel));
}

html[data-theme="dark"] {
    --stariz-card-border: color-mix(in srgb, var(--text) 20%, var(--panel));
}

html body :is(
    .page-card,
    .portal-config-panel,
    .asset-card,
    .dashboard-quick-access__card,
    .dashboard-card,
    .employee-operations__card,
    .employee-self-card,
    .employee-self-summary,
    .process-card,
    .process-form-card,
    .process-detail-card,
    .selection-card,
    .news-card,
    .payroll-chart-card,
    .payroll-context-card,
    .hr-analytics-chart-card,
    .hr-analytics-context-card,
    .approval-panel,
    .approval-config,
    .employee-requests__filters,
    .employee-requests__table-card,
    .employee-requests__form-card,
    .employee-requests__worker-card,
    .employee-requests__balance-card,
    .employee-requests__approval-card
) {
    border-color: var(--stariz-card-border);
}

html body :is(
    .metric-card,
    .summary-kpi-card,
    .payroll-metric-card,
    .employee-operations__kpi,
    .hr-analytics-metrics > article
) {
    border-color: var(--stariz-card-border);
}

html body .topbar .ako-agent-header-launcher,
html body .topbar .ako-agent-header-launcher:hover,
html body .topbar .ako-agent-header-launcher:focus-visible,
html body .topbar .ako-agent-header-launcher--active,
html body .topbar .ako-agent-header-launcher--busy,
html body .topbar .ako-agent-header-launcher--busy:hover,
html body .topbar .ako-agent-header-launcher--busy:focus-visible {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--ako-icon-color, var(--primary));
    filter: none;
    transform: none;
}

html body .topbar .ako-agent-header-launcher__icon,
html body .topbar .ako-agent-header-launcher--busy .ako-agent-header-launcher__icon {
    color: var(--ako-icon-color, var(--primary));
}

html body .topbar .ako-agent-header-launcher__text {
    color: var(--ako-icon-color, var(--primary));
}

html body .topbar .ako-agent-header-launcher:hover,
html body .topbar .ako-agent-header-launcher:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ako-icon-color, var(--primary)) 24%, transparent);
    outline-offset: 2px;
}

html body .summary-dashboard,
html body .home-analytics-section {
    box-sizing: border-box;
    width: min(100%, 1280px);
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

html body .summary-dashboard {
    gap: 12px;
}

html body .summary-dashboard-heading {
    align-items: center;
    min-height: 52px;
    padding: 0 0 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}

html body .summary-dashboard-heading > div {
    min-width: 0;
}

html body .summary-dashboard-heading h1,
html body .home-analytics-section .payroll-analytics-title h1 {
    font-size: var(--text-xl);
    letter-spacing: -.025em;
}

html body .summary-dashboard-period {
    align-self: center;
    min-height: 34px;
}

html body .summary-dashboard .dashboard-quick-access {
    display: grid;
    gap: 8px;
    width: 100%;
}

html body .summary-dashboard .dashboard-quick-access__heading {
    align-items: center;
    min-height: 34px;
}

html body .summary-dashboard .dashboard-quick-access__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    border-radius: 14px;
}

html body .summary-dashboard .dashboard-quick-access__card,
html body .summary-dashboard .dashboard-quick-access__card.stariz-card {
    min-height: 76px;
    background: transparent;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 0;
    box-shadow: none;
}

html body .summary-dashboard .dashboard-quick-access__card:last-child {
    border-right: 0;
}

html body .summary-dashboard .dashboard-quick-access__link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 2px 10px;
    min-height: 76px;
    padding: 10px 34px 10px 12px;
}

html body .summary-dashboard .dashboard-quick-access__icon {
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--quick-access-icon-color) 28%, transparent);
}

html body .summary-dashboard .dashboard-quick-access__link > strong {
    align-self: end;
    font-size: var(--text-xs);
}

html body .summary-dashboard .dashboard-quick-access__link > span:not(.dashboard-quick-access__icon) {
    align-self: start;
    font-size: var(--text-2xs);
    line-height: 1.3;
    white-space: normal;
}

html body .summary-dashboard .dashboard-quick-access__link > small {
    display: none;
}

html body .summary-dashboard .summary-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    border-radius: 14px;
}

html body .summary-dashboard .summary-kpi-card,
html body .summary-dashboard .summary-kpi-card.stariz-card {
    min-height: 78px;
    padding: 10px 11px;
    background: transparent;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .summary-dashboard .summary-kpi-card:last-child {
    border-right: 0;
}

html body .summary-dashboard .summary-kpi-card__icon {
    width: 30px;
    height: 30px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

html body .summary-dashboard .summary-kpi-card > span:not(.summary-kpi-card__icon) {
    font-size: var(--text-2xs);
    letter-spacing: .035em;
}

html body .summary-dashboard .summary-kpi-card strong {
    font-size: var(--text-xl);
}

html body .summary-dashboard .summary-kpi-card small {
    display: none;
}

html body .home-analytics-section {
    margin-top: 18px;
}

html body .home-analytics-section .payroll-analytics,
html body .home-analytics-section .payroll-analytics--home-approved {
    width: 100%;
    max-width: none;
    margin: 0;
}

html body .home-analytics-section .payroll-analytics-title,
html body .home-analytics-section .payroll-analytics-body {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

html body .home-analytics-section .payroll-metric-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 14px;
}

html body .home-analytics-section .payroll-metric-card,
html body .home-analytics-section .payroll-metric-card.stariz-card {
    min-height: 74px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    border-radius: 0;
    box-shadow: none;
}

html body .home-analytics-section .payroll-metric-card:last-child {
    border-right: 0;
}

html body .home-analytics-section .payroll-analytics-layout {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 15px;
}

html body .home-analytics-section .payroll-chart-card,
html body .home-analytics-section .payroll-context-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-analytics-section .payroll-context-card {
    border-left: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
}

html body :is(
    .approval-modal-backdrop,
    .denuncias-modal-backdrop,
    .employee-request-dialog,
    .employee-accrual-dialog,
    .employee-request-delete-dialog,
    .employee-self-qr-modal,
    .employee-timeline-dialog-backdrop,
    .event-bulk-help-overlay,
    .eventos-remunerativos-page__bulk-upload-backdrop,
    .payroll-detail-backdrop,
    .process-delete-dialog,
    .vacation-account-dialog,
    .vacation-chart-detail-dialog,
    .breaking-news-backdrop
) {
    background: transparent;
    backdrop-filter: none;
}

html body .denuncias-modal-dialog {
    padding: 0;
    background: transparent;
    border: 0;
}

html body .denuncias-modal-dialog::backdrop {
    background: transparent;
    backdrop-filter: none;
}

html body :is(
    .stariz-popup-surface,
    .event-bulk-help-dialog
) {
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    background: var(--panel);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    overflow: hidden;
}

html body .employee-request-dialog__surface { width: min(1420px, calc(100vw - 32px)); }
html body .employee-accrual-dialog__surface { width: min(1080px, calc(100vw - 32px)); }
html body .employee-timeline-dialog { width: min(1180px, calc(100vw - 32px)); }
html body .vacation-account-dialog__surface { width: min(1220px, calc(100vw - 32px)); }
html body .vacation-chart-detail-dialog__surface { width: min(1120px, calc(100vw - 32px)); }
html body .payroll-detail-modal { width: min(1280px, calc(100vw - 32px)); }
html body .eventos-remunerativos-page__bulk-upload-dialog { width: min(1240px, calc(100vw - 32px)); }
html body .event-bulk-help-dialog { width: min(1120px, calc(100vw - 32px)); }
html body .approval-modal { width: min(920px, calc(100vw - 32px)); }
html body .denuncias-modal { width: min(960px, calc(100vw - 32px)); }
html body .breaking-news-dialog { width: min(980px, calc(100vw - 32px)); }
html body .employee-self-qr-dialog { width: min(430px, calc(100vw - 32px)); }
html body :is(.process-completion-dialog__card, .process-delete-dialog__surface, .employee-request-delete-dialog__surface) {
    width: min(560px, calc(100vw - 32px));
}

html body :is(
    .employee-request-dialog__content,
    .employee-accrual-dialog__content,
    .employee-timeline-dialog__body,
    .vacation-account-dialog__content,
    .vacation-chart-detail-dialog__content,
    .approval-modal__body,
    .eventos-remunerativos-page__bulk-upload-dialog-body,
    .breaking-news-dialog__body,
    .payroll-detail-table
) {
    min-height: 0;
    overflow: auto;
    background: var(--panel);
}

html body :is(
    .employee-request-dialog__footer,
    .approval-modal__footer,
    .eventos-remunerativos-page__bulk-upload-dialog-footer,
    .breaking-news-dialog__footer,
    .denuncias-modal__actions,
    .process-completion-dialog__actions
) {
    margin: 0;
    padding: 12px 17px;
    background: var(--panel);
    border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: none;
}

html body :is(
    .process-delete-dialog__surface,
    .employee-request-delete-dialog__surface,
    .process-completion-dialog__card
) {
    padding: 20px;
}

html body :is(
    .process-delete-dialog__surface,
    .employee-request-delete-dialog__surface
) > footer {
    margin: 16px -20px -20px;
    padding: 12px 20px;
    background: var(--panel);
    border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}

html body .stariz-popup-surface :is(
    [class*="__form-card"],
    [class*="__summary"],
    [class*="__validation"],
    [class*="__section"],
    [class*="detail-block"]
) {
    box-shadow: none;
}

@media (max-width: 1240px) {
    html body .summary-dashboard .summary-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .summary-dashboard .summary-kpi-card:nth-child(3n) {
        border-right: 0;
    }

    html body .summary-dashboard .summary-kpi-card:nth-child(-n + 3) {
        border-bottom: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    }
}

@media (max-width: 900px) {
    html body .summary-dashboard .dashboard-quick-access__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .summary-dashboard .dashboard-quick-access__card:nth-child(2n) {
        border-right: 0;
    }

    html body .summary-dashboard .dashboard-quick-access__card:nth-child(-n + 2) {
        border-bottom: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    }

    html body .home-analytics-section .payroll-analytics-layout {
        grid-template-columns: 1fr;
    }

    html body .home-analytics-section .payroll-context-card {
        border-top: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
        border-left: 0;
    }
}

@media (max-width: 640px) {
    html body .summary-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    html body .summary-dashboard .dashboard-quick-access__grid,
    html body .summary-dashboard .summary-kpi-grid,
    html body .home-analytics-section .payroll-metric-grid {
        grid-template-columns: 1fr;
    }

    html body .summary-dashboard .dashboard-quick-access__card,
    html body .summary-dashboard .summary-kpi-card,
    html body .home-analytics-section .payroll-metric-card {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    }

    html body .summary-dashboard .dashboard-quick-access__card:last-child,
    html body .summary-dashboard .summary-kpi-card:last-child,
    html body .home-analytics-section .payroll-metric-card:last-child {
        border-bottom: 0;
    }

    html body :is(.stariz-popup-surface, .event-bulk-help-dialog) {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 14px;
    }
}

html body .summary-dashboard .summary-dashboard-heading {
    border: 0;
    border-bottom: 0;
    box-shadow: none;
    padding-bottom: 0;
}

html body .summary-dashboard .dashboard-quick-access__heading {
    border: 0;
    border-bottom: 0;
    box-shadow: none;
    margin-bottom: 8px;
    padding-bottom: 0;
}

html body .summary-dashboard .dashboard-quick-access__grid {
    gap: 14px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .summary-dashboard .dashboard-quick-access__card,
html body .summary-dashboard .dashboard-quick-access__card.stariz-card {
    min-height: 76px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--text) 17%, transparent);
    border-radius: 14px;
    box-shadow: none;
}

html body .summary-dashboard .dashboard-quick-access__card:last-child,
html body .summary-dashboard .dashboard-quick-access__card:nth-child(2n),
html body .summary-dashboard .dashboard-quick-access__card:nth-child(-n + 2) {
    border-right: 1px solid color-mix(in srgb, var(--text) 17%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 17%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    html body .summary-dashboard .dashboard-quick-access__card:hover {
        border-color: color-mix(in srgb, var(--primary) 34%, var(--text) 12%);
        background: color-mix(in srgb, var(--primary) 3%, var(--panel));
        box-shadow: none;
        transform: none;
    }
}

@media (max-width: 900px) {
    html body .summary-dashboard .dashboard-quick-access__grid {
        gap: 12px;
    }
}

@media (max-width: 640px) {
    html body .summary-dashboard .dashboard-quick-access__grid {
        gap: 10px;
    }

    html body .summary-dashboard .dashboard-quick-access__card,
    html body .summary-dashboard .dashboard-quick-access__card:last-child,
    html body .summary-dashboard .dashboard-quick-access__card:nth-child(2n),
    html body .summary-dashboard .dashboard-quick-access__card:nth-child(-n + 2) {
        border: 1px solid color-mix(in srgb, var(--text) 17%, transparent);
        border-radius: 14px;
    }
}

html body .home-dashboard > .home-dashboard__heading,
html body .home-dashboard > .home-dashboard__heading::before,
html body .home-dashboard > .home-dashboard__heading::after,
html body .home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading,
html body .home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading::before,
html body .home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading::after {
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    background-image: none;
    border-radius: 0;
    content: none;
}

html body .home-dashboard > .home-dashboard__heading {
    padding: 0;
    margin: 0 0 12px;
}

html body .home-dashboard > .home-dashboard__quick-access {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body .home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading {
    padding: 0;
    margin: 0 0 10px;
    min-height: 0;
}

html body .home-dashboard .home-dashboard__quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 6px 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-item,
html body .home-dashboard .home-dashboard__quick-item.stariz-card,
html body .page .home-dashboard .home-dashboard__quick-item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 74px;
    margin: 0;
    padding: 0 18px;
    overflow: visible;
    background: transparent;
    background-image: none;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    transform: none;
}

html body .home-dashboard .home-dashboard__quick-item:first-child {
    padding-left: 8px;
}

html body .home-dashboard .home-dashboard__quick-item:last-child {
    padding-right: 8px;
    border-right: 0;
}

html body .home-dashboard .home-dashboard__quick-item::before {
    display: none;
    content: none;
}

html body .home-dashboard .home-dashboard__quick-item.is-pinned {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-item.is-pinned::after {
    right: 18px;
    bottom: 4px;
    padding: 1px 6px;
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: var(--text-2xs);
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 2px 10px;
    min-height: 74px;
    height: auto;
    margin: 0;
    padding: 8px 32px 8px 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    text-decoration: none;
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__icon {
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    margin: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--quick-access-icon-color, var(--primary)) 30%, transparent);
    border-radius: 10px;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__link > strong {
    align-self: end;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.25;
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__link > span:not(.dashboard-quick-access__icon) {
    align-self: start;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.35;
    white-space: normal;
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__link > small {
    display: none;
}

html body .home-dashboard .home-dashboard__quick-item .dashboard-quick-access__pin {
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard .home-dashboard__quick-item:hover,
    html body .home-dashboard .home-dashboard__quick-item:focus-within {
        background: transparent;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
    }

    html body .home-dashboard .home-dashboard__quick-item:hover .dashboard-quick-access__link,
    html body .home-dashboard .home-dashboard__quick-item:focus-within .dashboard-quick-access__link {
        background: color-mix(in srgb, var(--primary) 5%, transparent);
    }
}

@media (max-width: 1080px) {
    html body .home-dashboard .home-dashboard__quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .home-dashboard .home-dashboard__quick-item {
        padding: 0 14px;
        border-right: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    }

    html body .home-dashboard .home-dashboard__quick-item:nth-child(2n) {
        border-right: 0;
    }

    html body .home-dashboard .home-dashboard__quick-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    html body .home-dashboard .home-dashboard__quick-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    html body .home-dashboard .home-dashboard__quick-item,
    html body .home-dashboard .home-dashboard__quick-item:first-child,
    html body .home-dashboard .home-dashboard__quick-item:last-child,
    html body .home-dashboard .home-dashboard__quick-item:nth-child(2n),
    html body .home-dashboard .home-dashboard__quick-item:nth-last-child(-n + 2) {
        padding: 0 4px;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    }

    html body .home-dashboard .home-dashboard__quick-item:last-child {
        border-bottom: 0;
    }
}

html body .home-dashboard .home-dashboard__quick-grid,
html body .home-dashboard .home-dashboard__indicator-grid {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    overflow: visible;
}

html body .home-dashboard .home-dashboard__quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    row-gap: 14px;
    column-gap: 14px;
}

html body .home-dashboard .home-dashboard__quick-card,
html body .home-dashboard .home-dashboard__quick-card.stariz-card,
html body .page .home-dashboard .home-dashboard__quick-card {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 84px;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background: var(--surface, #ffffff);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 14px;
    outline: 0;
    box-shadow: none;
    transform: none;
}

html body .home-dashboard .home-dashboard__quick-card:first-child,
html body .home-dashboard .home-dashboard__quick-card:last-child,
html body .home-dashboard .home-dashboard__quick-card:nth-child(2n),
html body .home-dashboard .home-dashboard__quick-card:nth-last-child(-n + 2) {
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

html body .home-dashboard .home-dashboard__quick-card::before {
    display: none;
    content: none;
}

html body .home-dashboard .home-dashboard__quick-card .dashboard-quick-access__link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 3px 11px;
    min-height: 84px;
    height: 100%;
    margin: 0;
    padding: 13px 42px 13px 14px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    text-decoration: none;
}

html body .home-dashboard .home-dashboard__quick-card .dashboard-quick-access__icon {
    grid-row: 1 / span 2;
    align-self: center;
    width: 36px;
    height: 36px;
    margin: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--quick-access-icon-color, var(--primary)) 34%, transparent);
    border-radius: 11px;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-card .dashboard-quick-access__link > strong {
    align-self: end;
    margin: 0;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.25;
}

html body .home-dashboard .home-dashboard__quick-card .dashboard-quick-access__link > span:not(.dashboard-quick-access__icon) {
    align-self: start;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.35;
    white-space: normal;
}

html body .home-dashboard .home-dashboard__quick-card .dashboard-quick-access__pin {
    top: 10px;
    right: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-card.is-pinned {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
    border-radius: 14px;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__quick-card.is-pinned::after {
    right: 12px;
    bottom: 7px;
    background: transparent;
    border: 0;
    color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard .home-dashboard__quick-card:hover,
    html body .home-dashboard .home-dashboard__quick-card:focus-within {
        background: color-mix(in srgb, var(--primary) 3%, var(--surface, #ffffff));
        border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
        border-radius: 14px;
        box-shadow: none;
        transform: none;
    }

    html body .home-dashboard .home-dashboard__quick-card:hover .dashboard-quick-access__link,
    html body .home-dashboard .home-dashboard__quick-card:focus-within .dashboard-quick-access__link {
        background: transparent;
    }
}

html body .home-dashboard .home-dashboard__indicator-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    row-gap: 14px;
    column-gap: 14px;
    margin-top: 14px;
}

html body .home-dashboard .home-dashboard__indicator-card,
html body .home-dashboard .home-dashboard__indicator-card.stariz-card,
html body .page .home-dashboard .home-dashboard__indicator-card {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 11px;
    row-gap: 2px;
    min-width: 0;
    min-height: 102px;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 13px 14px;
    overflow: hidden;
    color: var(--text);
    background: var(--surface, #ffffff);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 14px;
    outline: 0;
    box-shadow: none;
    transform: none;
}

html body .home-dashboard .home-dashboard__indicator-card::before,
html body .home-dashboard .home-dashboard__indicator-card::after {
    display: none;
    content: none;
}

html body .home-dashboard .home-dashboard__indicator-card .summary-kpi-card__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 34px;
    height: 34px;
    margin: 0;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}

html body .home-dashboard .home-dashboard__indicator-card > span:not(.summary-kpi-card__icon) {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    color: var(--text);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

html body .home-dashboard .home-dashboard__indicator-card > strong {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
    color: var(--text);
    font-size: var(--text-xl);
    line-height: 1.1;
}

html body .home-dashboard .home-dashboard__indicator-card > small {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 1px 0 0;
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.3;
    white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard .home-dashboard__indicator-card:hover {
        background: color-mix(in srgb, var(--primary) 2.5%, var(--surface, #ffffff));
        border-color: color-mix(in srgb, var(--primary) 32%, transparent);
        box-shadow: none;
        transform: none;
    }
}

html[data-theme="dark"] body .home-dashboard .home-dashboard__quick-card,
html[data-theme="dark"] body .home-dashboard .home-dashboard__indicator-card,
body.theme-dark .home-dashboard .home-dashboard__quick-card,
body.theme-dark .home-dashboard .home-dashboard__indicator-card {
    background: color-mix(in srgb, var(--surface, #111827) 96%, white 4%);
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
}

@media (max-width: 1399px) {
    html body .home-dashboard .home-dashboard__indicator-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    html body .home-dashboard .home-dashboard__quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .home-dashboard .home-dashboard__quick-card,
    html body .home-dashboard .home-dashboard__quick-card:first-child,
    html body .home-dashboard .home-dashboard__quick-card:last-child,
    html body .home-dashboard .home-dashboard__quick-card:nth-child(2n),
    html body .home-dashboard .home-dashboard__quick-card:nth-last-child(-n + 2) {
        border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    }
}

@media (max-width: 760px) {
    html body .home-dashboard .home-dashboard__indicator-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html body .home-dashboard .home-dashboard__quick-grid,
    html body .home-dashboard .home-dashboard__indicator-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        row-gap: 14px;
        column-gap: 14px;
    }

    html body .home-dashboard .home-dashboard__quick-card,
    html body .home-dashboard .home-dashboard__quick-card:first-child,
    html body .home-dashboard .home-dashboard__quick-card:last-child,
    html body .home-dashboard .home-dashboard__quick-card:nth-child(2n),
    html body .home-dashboard .home-dashboard__quick-card:nth-last-child(-n + 2) {
        border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
        border-radius: 14px;
    }
}

html body .home-dashboard-shell {
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html body .home-dashboard-shell > .home-dashboard,
html body .home-dashboard-shell > .home-dashboard__analytics,
html body .home-dashboard-shell .payroll-analytics,
html body .home-dashboard-shell .payroll-analytics--home-approved,
html body .home-dashboard-shell .payroll-analytics-body,
html body .home-dashboard-shell .payroll-filter-surface,
html body .home-dashboard-shell .payroll-metric-grid,
html body .home-dashboard-shell .payroll-analytics-layout {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
}

html body .home-dashboard-shell > .home-dashboard,
html body .home-dashboard-shell > .home-dashboard__analytics {
    margin-top: 0;
}

html body .home-dashboard .summary-dashboard-heading,
html body .home-dashboard .dashboard-quick-access__heading,
html body .home-dashboard__analytics .payroll-analytics-title {
    box-sizing: border-box;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    max-width: none;
    min-height: 76px;
    margin: 0;
    padding: 15px 18px;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 14px;
    outline: 0;
    box-shadow: none;
}

html body .home-dashboard .summary-dashboard-heading::before,
html body .home-dashboard .summary-dashboard-heading::after,
html body .home-dashboard .dashboard-quick-access__heading::before,
html body .home-dashboard .dashboard-quick-access__heading::after,
html body .home-dashboard__analytics .payroll-analytics-title::before,
html body .home-dashboard__analytics .payroll-analytics-title::after {
    display: none;
    content: none;
}

html body .home-dashboard .summary-dashboard-heading h1,
html body .home-dashboard .dashboard-quick-access__heading h2,
html body .home-dashboard__analytics .payroll-analytics-title h1 {
    margin: 0;
    color: var(--text);
    font-size: var(--text-xl);
    line-height: 1.2;
    letter-spacing: -.025em;
}

html body .home-dashboard .summary-dashboard-heading .stariz-module-header__description,
html body .home-dashboard .dashboard-quick-access__heading p,
html body .home-dashboard__analytics .payroll-analytics-title .stariz-module-header__description {
    max-width: none;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

html body .home-dashboard .dashboard-quick-access {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body .home-dashboard .dashboard-quick-access__count {
    flex: 0 0 auto;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-filter-surface {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(260px, 1fr) minmax(220px, .72fr);
    align-items: end;
    gap: 14px;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-filter-grid,
html body .home-dashboard__analytics .payroll-analysis-toolbar {
    display: contents;
}

html body .home-dashboard__analytics .payroll-filter-process,
html body .home-dashboard__analytics .payroll-filter-concept,
html body .home-dashboard__analytics .payroll-analysis-toolbar > label {
    grid-column: auto;
    min-width: 0;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-chart-switcher {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-chart-switcher__options {
    width: 100%;
}

html body .home-dashboard__analytics .payroll-analytics-body {
    padding-top: 14px;
}

html body .home-dashboard__analytics .payroll-metric-grid,
html body .home-dashboard__analytics .payroll-analytics-layout,
html body .home-dashboard__analytics .payroll-results-table {
    width: 100%;
    max-width: none;
}

html[data-theme="dark"] body .home-dashboard .summary-dashboard-heading,
html[data-theme="dark"] body .home-dashboard .dashboard-quick-access__heading,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-analytics-title,
body.theme-dark .home-dashboard .summary-dashboard-heading,
body.theme-dark .home-dashboard .dashboard-quick-access__heading,
body.theme-dark .home-dashboard__analytics .payroll-analytics-title {
    background: color-mix(in srgb, var(--surface, #111827) 96%, white 4%);
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
}

@media (max-width: 1120px) {
    html body .home-dashboard__analytics .payroll-filter-surface {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    html body .home-dashboard .summary-dashboard-heading,
    html body .home-dashboard .dashboard-quick-access__heading,
    html body .home-dashboard__analytics .payroll-analytics-title {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }

    html body .home-dashboard__analytics .payroll-filter-surface {
        grid-template-columns: 1fr;
    }

    html body .home-dashboard__analytics .payroll-chart-switcher {
        grid-column: 1;
    }
}

html body .home-dashboard.home-dashboard > .home-dashboard__heading,
html body .home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading {
    box-sizing: border-box;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    max-width: none;
    min-height: 76px;
    margin: 0;
    padding: 15px 18px;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 14px;
    outline: 0;
    box-shadow: none;
}

html body .home-dashboard.home-dashboard > .home-dashboard__heading::before,
html body .home-dashboard.home-dashboard > .home-dashboard__heading::after,
html body .home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading::before,
html body .home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading::after {
    display: none;
    content: none;
}

html body .home-dashboard-shell {
    display: grid;
    gap: 28px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html body .home-dashboard {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html body .home-dashboard .summary-dashboard-heading,
html body .home-dashboard .dashboard-quick-access__heading,
html body .home-dashboard__analytics .payroll-analytics-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 104px;
    margin: 0;
    padding: 21px 24px;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-left: 4px solid var(--primary);
    border-radius: 16px;
    outline: 0;
    box-shadow: none;
}

html body .home-dashboard .summary-dashboard-heading > div:first-child,
html body .home-dashboard .dashboard-quick-access__heading > div:first-child,
html body .home-dashboard__analytics .payroll-analytics-title > div:first-child {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
}

html body .home-dashboard .summary-dashboard-heading .eyebrow,
html body .home-dashboard__analytics .payroll-analytics-title .eyebrow {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .085em;
    line-height: 1.2;
    text-transform: uppercase;
}

html body .home-dashboard .summary-dashboard-heading h1,
html body .home-dashboard .dashboard-quick-access__heading h2,
html body .home-dashboard__analytics .payroll-analytics-title h1 {
    margin: 0;
    color: var(--text);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -.032em;
    line-height: 1.18;
}

html body .home-dashboard .summary-dashboard-heading .stariz-module-header__description,
html body .home-dashboard .dashboard-quick-access__heading p,
html body .home-dashboard__analytics .payroll-analytics-title .stariz-module-header__description {
    max-width: 860px;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

html body .home-dashboard .summary-dashboard-period,
html body .home-dashboard .dashboard-quick-access__count {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0;
    color: var(--text);
    white-space: nowrap;
}

html body .home-dashboard .summary-dashboard-period {
    gap: 8px;
    font-size: var(--text-xs);
}

html body .home-dashboard .summary-dashboard-period svg {
    width: 17px;
    height: 17px;
}

html body .home-dashboard .dashboard-quick-access__count {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

html body .home-dashboard .dashboard-quick-access {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

html body .home-dashboard .home-dashboard__quick-grid,
html body .home-dashboard .home-dashboard__indicator-grid {
    gap: 14px;
    row-gap: 14px;
    column-gap: 14px;
}

html body .home-dashboard .home-dashboard__indicator-grid {
    margin-top: 0;
}

html body .home-dashboard__analytics,
html body .home-dashboard__analytics .payroll-analytics,
html body .home-dashboard__analytics .payroll-analytics-body,
html body .home-dashboard__analytics .payroll-filter-surface,
html body .home-dashboard__analytics .payroll-metric-grid,
html body .home-dashboard__analytics .payroll-analytics-layout,
html body .home-dashboard__analytics .payroll-results-table--home {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
}

html body .home-dashboard__analytics .payroll-analytics {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-analytics-body {
    display: grid;
    gap: 20px;
    margin: 20px 0 0;
    padding: 0;
}

html body .home-dashboard__analytics .payroll-filter-surface {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(250px, 1fr) minmax(220px, .72fr);
    align-items: end;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-filter-grid,
html body .home-dashboard__analytics .payroll-analysis-toolbar {
    display: contents;
}

html body .home-dashboard__analytics .payroll-filter-grid label,
html body .home-dashboard__analytics .payroll-analysis-toolbar > label {
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

html body .home-dashboard__analytics .payroll-filter-grid select,
html body .home-dashboard__analytics .payroll-analysis-toolbar select {
    min-height: 44px;
    height: 44px;
    padding: 0 13px;
    color: var(--text);
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 12px;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-chart-switcher {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-chart-switcher legend {
    padding: 0 0 8px;
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

html body .home-dashboard__analytics .payroll-chart-switcher__options {
    width: 100%;
    min-height: 44px;
    padding: 4px;
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 12px;
}

html body .home-dashboard__analytics .payroll-chart-switcher__options span {
    min-height: 34px;
    border-radius: 9px;
    font-size: var(--text-xs);
}

html body .home-dashboard__analytics .payroll-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-metric-card {
    min-height: 96px;
    margin: 0;
    padding: 17px 18px;
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 15px;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr);
    align-items: stretch;
    gap: 18px;
    margin: 0;
}

html body .home-dashboard__analytics .payroll-chart-card,
html body .home-dashboard__analytics .payroll-context-card {
    height: 100%;
    min-height: 430px;
    margin: 0;
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 16px;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-chart-card {
    padding: 22px;
}

html body .home-dashboard__analytics .payroll-context-card {
    padding: 22px;
}

html body .home-dashboard__analytics .payroll-chart-card__head {
    align-items: flex-start;
    gap: 18px;
}

html body .home-dashboard__analytics .payroll-chart-card h2,
html body .home-dashboard__analytics .payroll-context-card h2 {
    font-size: var(--text-lg);
    line-height: 1.25;
}

html body .home-dashboard__analytics .payroll-chart-wrap {
    min-height: 350px;
    margin-top: 18px;
}

html body .home-dashboard__analytics .payroll-svg-chart {
    height: 350px;
}

html body .home-dashboard__analytics .payroll-bar-chart-scroll .payroll-bar-chart {
    height: 370px;
    min-height: 370px;
}

html body .home-dashboard__analytics .payroll-results-table--home {
    margin: 0;
    overflow: hidden;
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 16px;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-results-table__head--home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 92px;
    margin: 0;
    padding: 18px 22px;
    background: var(--surface, #ffffff);
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-results-table__head--home h2 {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.25;
}

html body .home-dashboard__analytics .payroll-results-table__head--home p {
    margin: 5px 0 0;
    font-size: var(--text-xs);
    line-height: 1.45;
}

html body .home-dashboard__analytics .payroll-results-count {
    padding: 7px 10px;
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

html body .home-dashboard__analytics .payroll-results-grid,
html body .home-dashboard__analytics .payroll-results-grid__scroll {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-results-grid__scroll {
    overflow-x: auto;
}

html body .home-dashboard__analytics .payroll-results-table--home .stariz-data-grid {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

html body .home-dashboard__analytics .payroll-results-table--home .stariz-data-grid th {
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 4%, var(--surface, #ffffff));
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .045em;
    text-transform: uppercase;
}

html body .home-dashboard__analytics .payroll-results-table--home .stariz-data-grid td {
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: var(--text-xs);
    vertical-align: middle;
}

html body .home-dashboard__analytics .payroll-results-table--home .stariz-data-grid tbody tr:last-child td {
    border-bottom: 0;
}

html body .home-dashboard__analytics .payroll-detail-trigger {
    min-height: 34px;
    padding: 7px 11px;
    color: var(--text);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--secondary, var(--primary)) 60%, transparent);
    border-radius: 10px;
}

html body .home-dashboard__analytics .payroll-detail-trigger:hover:not(:disabled),
html body .home-dashboard__analytics .payroll-detail-trigger:focus-visible {
    background: color-mix(in srgb, var(--secondary, var(--primary)) 7%, transparent);
    border-color: color-mix(in srgb, var(--secondary, var(--primary)) 78%, transparent);
}

html body .home-dashboard__analytics .payroll-results-grid__footer {
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    background: var(--surface, #ffffff);
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

html body .home-dashboard__analytics .payroll-results-grid__pager {
    width: 100%;
    margin: 0;
}

html[data-theme="dark"] body .home-dashboard .summary-dashboard-heading,
html[data-theme="dark"] body .home-dashboard .dashboard-quick-access__heading,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-analytics-title,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-metric-card,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-chart-card,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-context-card,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-results-table--home,
body.theme-dark .home-dashboard .summary-dashboard-heading,
body.theme-dark .home-dashboard .dashboard-quick-access__heading,
body.theme-dark .home-dashboard__analytics .payroll-analytics-title,
body.theme-dark .home-dashboard__analytics .payroll-metric-card,
body.theme-dark .home-dashboard__analytics .payroll-chart-card,
body.theme-dark .home-dashboard__analytics .payroll-context-card,
body.theme-dark .home-dashboard__analytics .payroll-results-table--home {
    background: color-mix(in srgb, var(--surface, #111827) 96%, white 4%);
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

@media (max-width: 1180px) {
    html body .home-dashboard__analytics .payroll-filter-surface {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .home-dashboard__analytics .payroll-analytics-layout {
        grid-template-columns: 1fr;
    }

    html body .home-dashboard__analytics .payroll-context-card {
        min-height: 0;
    }
}

@media (max-width: 820px) {
    html body .home-dashboard-shell {
        gap: 22px;
    }

    html body .home-dashboard {
        gap: 18px;
    }

    html body .home-dashboard .summary-dashboard-heading,
    html body .home-dashboard .dashboard-quick-access__heading,
    html body .home-dashboard__analytics .payroll-analytics-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        padding: 19px 20px;
    }

    html body .home-dashboard .summary-dashboard-period,
    html body .home-dashboard .dashboard-quick-access__count {
        align-self: flex-start;
        white-space: normal;
    }

    html body .home-dashboard__analytics .payroll-filter-surface,
    html body .home-dashboard__analytics .payroll-metric-grid {
        grid-template-columns: 1fr;
    }

    html body .home-dashboard__analytics .payroll-chart-switcher {
        grid-column: 1;
    }

    html body .home-dashboard__analytics .payroll-chart-card,
    html body .home-dashboard__analytics .payroll-context-card {
        min-height: 0;
    }

    html body .home-dashboard__analytics .payroll-results-table__head--home {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 17px 18px;
    }
}

@media (max-width: 560px) {
    html body .home-dashboard .summary-dashboard-heading,
    html body .home-dashboard .dashboard-quick-access__heading,
    html body .home-dashboard__analytics .payroll-analytics-title {
        border-radius: 14px;
        padding: 17px 16px;
    }

    html body .home-dashboard .summary-dashboard-heading h1,
    html body .home-dashboard .dashboard-quick-access__heading h2,
    html body .home-dashboard__analytics .payroll-analytics-title h1 {
        font-size: var(--text-xl);
    }

    html body .home-dashboard__analytics .payroll-chart-card,
    html body .home-dashboard__analytics .payroll-context-card {
        padding: 17px;
    }

    html body .home-dashboard__analytics .payroll-chart-wrap,
    html body .home-dashboard__analytics .payroll-svg-chart {
        min-height: 285px;
        height: 285px;
    }
}

html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__heading,
html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 104px;
    margin: 0;
    padding: 21px 24px;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: 16px;
    outline: 0;
    box-shadow: none;
}

@media (max-width: 820px) {
    html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__heading,
    html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        padding: 19px 20px;
    }
}

@media (max-width: 560px) {
    html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__heading,
    html body .home-dashboard.home-dashboard.home-dashboard > .home-dashboard__quick-access > .home-dashboard__quick-heading {
        border-radius: 14px;
        padding: 17px 16px;
    }
}

html body .page .stariz-crud-toolbar.stariz-crud-toolbar--with-filter {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(260px, 520px) minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

html body .page .stariz-crud-toolbar.stariz-crud-toolbar--with-filter > :is(
    label:has(input[type="search"]),
    label:has(input[type="text"]),
    .stariz-grid-filter,
    .rrhh-adn-search
) {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
}

html body .page .stariz-crud-toolbar__actions {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    grid-column: 3;
    gap: 8px;
    width: auto;
    min-width: max-content;
    margin: 0 0 0 auto;
    flex-wrap: nowrap;
}

html body .page .stariz-crud-toolbar--actions-only {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

html body .page .stariz-crud-toolbar--heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

html body .payroll-detail-modal .payroll-detail-summary {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(280px, auto) minmax(460px, 1fr);
    align-items: end;
    gap: 22px;
    width: 100%;
    padding: 16px 22px;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

html body .payroll-detail-modal .payroll-detail-summary__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    align-items: end;
    gap: 18px;
    min-width: 0;
}

html body .payroll-detail-modal .payroll-detail-summary__stats > span {
    display: grid;
    gap: 5px;
    min-width: 0;
}

html body .payroll-detail-modal .payroll-detail-filter-actions,
html body .stariz-dialog-crud-toolbar__actions {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    justify-content: end;
    gap: 10px;
    min-width: 0;
    width: 100%;
    margin: 0;
}

html body .payroll-detail-modal .payroll-detail-filter-actions > label {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
    margin: 0;
}

html body .payroll-detail-modal .payroll-detail-filter-actions input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 0;
}

html body .payroll-detail-modal .payroll-detail-filter-button {
    align-self: end;
    min-height: 38px;
    margin: 0;
    white-space: nowrap;
}

html body [role="dialog"].stariz-dialog-crud .stariz-dialog-crud-toolbar {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-grid--home {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    row-gap: 14px;
    column-gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-card--home,
html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-card--home.stariz-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 104px;
    height: 100%;
    margin: 0;
    padding: 18px;
    overflow: hidden;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 15px;
    outline: 0;
    box-shadow: none;
    transform: none;
}

html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-card--home:last-child {
    border-right: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-card--home > div {
    align-content: center;
    min-width: 0;
}

html body :is(.page, .stariz-popup-surface, [role="dialog"]) :is(
    .stariz-data-grid,
    .stariz-crud-grid table,
    .rrhh-adn-grid table,
    .payroll-results-table table,
    .payroll-detail-table table
) thead th {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 2.5%, var(--surface, var(--panel, #ffffff)));
    background-image: none;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: none;
}

html[data-theme="dark"] body :is(.page, .stariz-popup-surface, [role="dialog"]) :is(
    .stariz-data-grid,
    .stariz-crud-grid table,
    .rrhh-adn-grid table,
    .payroll-results-table table,
    .payroll-detail-table table
) thead th,
body.theme-dark :is(.page, .stariz-popup-surface, [role="dialog"]) :is(
    .stariz-data-grid,
    .stariz-crud-grid table,
    .rrhh-adn-grid table,
    .payroll-results-table table,
    .payroll-detail-table table
) thead th {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 4%, var(--surface, var(--panel, #111827)));
    border-bottom-color: color-mix(in srgb, var(--text) 18%, transparent);
}

html body [data-stariz-quick-card]:not(.is-pinned) {
    outline: 0;
}

html body [data-stariz-quick-card]:not(.is-pinned) .dashboard-quick-access__pin {
    color: var(--muted);
}

html body [data-stariz-quick-card].is-pinned .dashboard-quick-access__pin {
    color: var(--primary);
}

html body .topbar-pinned-access__item {
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (max-width: 980px) {
    html body .payroll-detail-modal .payroll-detail-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    html body .payroll-detail-modal .payroll-detail-filter-actions,
    html body .stariz-dialog-crud-toolbar__actions {
        grid-template-columns: minmax(220px, 1fr) auto auto;
    }

    html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-grid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    html body .page .stariz-crud-toolbar.stariz-crud-toolbar--with-filter {
        grid-template-columns: 1fr;
    }

    html body .page .stariz-crud-toolbar__actions {
        grid-column: 1;
        justify-self: stretch;
        justify-content: flex-end;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    html body .payroll-detail-modal .payroll-detail-summary__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .payroll-detail-modal .payroll-detail-filter-actions,
    html body .stariz-dialog-crud-toolbar__actions {
        grid-template-columns: 1fr 1fr;
    }

    html body .payroll-detail-modal .payroll-detail-filter-actions > label {
        grid-column: 1 / -1;
    }

    html body .home-dashboard__analytics .payroll-analytics--home-approved .payroll-metric-grid--home {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    html body .payroll-detail-modal .payroll-detail-summary__stats,
    html body .payroll-detail-modal .payroll-detail-filter-actions,
    html body .stariz-dialog-crud-toolbar__actions {
        grid-template-columns: 1fr;
    }

    html body .payroll-detail-modal .payroll-detail-filter-button {
        width: 100%;
    }
}

html body .home-dashboard__analytics .payroll-analytics-layout,
html body .home-analytics-section .payroll-analytics-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr);
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    overflow: visible;
}

html body .home-dashboard__analytics .payroll-chart-card,
html body .home-dashboard__analytics .payroll-context-card,
html body .home-analytics-section .payroll-chart-card,
html body .home-analytics-section .payroll-context-card {
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    min-height: 430px;
    margin: 0;
    padding: 22px;
    color: var(--text);
    background: var(--surface, var(--panel, #ffffff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 16px;
    outline: 0;
    box-shadow: none;
    overflow: hidden;
}

html body .home-dashboard__analytics .payroll-context-card,
html body .home-analytics-section .payroll-context-card {
    border-left: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

html[data-theme="dark"] body .home-dashboard__analytics .payroll-chart-card,
html[data-theme="dark"] body .home-dashboard__analytics .payroll-context-card,
html[data-theme="dark"] body .home-analytics-section .payroll-chart-card,
html[data-theme="dark"] body .home-analytics-section .payroll-context-card,
body.theme-dark .home-dashboard__analytics .payroll-chart-card,
body.theme-dark .home-dashboard__analytics .payroll-context-card,
body.theme-dark .home-analytics-section .payroll-chart-card,
body.theme-dark .home-analytics-section .payroll-context-card {
    background: color-mix(in srgb, var(--surface, #111827) 96%, white 4%);
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

@media (max-width: 1180px) {
    html body .home-dashboard__analytics .payroll-analytics-layout,
    html body .home-analytics-section .payroll-analytics-layout {
        grid-template-columns: 1fr;
    }

    html body .home-dashboard__analytics .payroll-chart-card,
    html body .home-dashboard__analytics .payroll-context-card,
    html body .home-analytics-section .payroll-chart-card,
    html body .home-analytics-section .payroll-context-card {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    html body .home-dashboard__analytics .payroll-chart-card,
    html body .home-dashboard__analytics .payroll-context-card,
    html body .home-analytics-section .payroll-chart-card,
    html body .home-analytics-section .payroll-context-card {
        padding: 17px;
        border-radius: 14px;
    }
}

.grid-data-protection-overlay[hidden] {
    display: none;
}

.grid-data-protection-overlay {
    position: fixed;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.8vw, 28px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line, #d8dfd8) 76%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(
            color-mix(in srgb, var(--panel, #ffffff) 91%, transparent),
            color-mix(in srgb, var(--panel, #ffffff) 91%, transparent)
        );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 35%, transparent);
    -webkit-backdrop-filter: blur(4px) saturate(.88);
    backdrop-filter: blur(4px) saturate(.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
    isolation: isolate;
}

.grid-data-protection-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 14px,
            color-mix(in srgb, var(--primary, #24e83f) 4%, transparent) 14px 28px
        );
}

.grid-data-protection-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.grid-data-protection-overlay__dialog {
    width: min(520px, 100%);
    max-height: calc(100% - 4px);
    overflow: auto;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "button button";
    gap: 14px 16px;
    align-items: start;
    margin: 0;
    padding: clamp(18px, 2.2vw, 24px);
    border: 1px solid color-mix(in srgb, var(--line, #d8dfd8) 88%, transparent);
    border-radius: 18px;
    background: var(--panel, #ffffff);
    color: var(--text, #172019);
    box-shadow: 0 20px 58px rgba(16, 29, 19, .18);
    text-align: left;
}

.grid-data-protection-overlay__icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary, #24e83f) 34%, var(--line, #d8dfd8));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary, #24e83f) 11%, var(--panel, #ffffff));
    color: color-mix(in srgb, var(--primary, #24e83f) 76%, #0d3714);
}

.grid-data-protection-overlay__icon svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grid-data-protection-overlay__content {
    grid-area: content;
    min-width: 0;
}

.grid-data-protection-overlay__content h2 {
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: var(--text, #172019);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: -.012em;
}

.grid-data-protection-overlay__content p {
    margin: 0;
    color: var(--muted, #59645b);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.52;
}

.grid-data-protection-overlay__content .grid-data-protection-overlay__instruction {
    margin-top: 9px;
    color: var(--text, #172019);
    font-weight: var(--weight-bold);
}

.grid-data-protection-overlay__content .grid-data-protection-overlay__trace {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--line, #d8dfd8) 74%, transparent);
    color: var(--muted, #68736a);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    line-height: 1.35;
}

.grid-data-protection-overlay__close {
    grid-area: button;
    justify-self: center;
    min-width: 112px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0 0;
    padding: 8px 17px;
    border: 1px solid color-mix(in srgb, var(--text, #172019) 90%, transparent);
    border-radius: 10px;
    background: var(--text, #172019);
    color: var(--panel, #ffffff);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: transform .14s ease, opacity .14s ease;
}

.grid-data-protection-overlay__close:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.grid-data-protection-overlay__close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary, #24e83f) 42%, transparent);
    outline-offset: 3px;
}

.is-data-protection-active {
    isolation: isolate;
}

html[data-theme="dark"] .grid-data-protection-overlay,
html.dark .grid-data-protection-overlay,
body.dark .grid-data-protection-overlay {
    background:
        linear-gradient(
            color-mix(in srgb, var(--panel, #171a18) 90%, transparent),
            color-mix(in srgb, var(--panel, #171a18) 90%, transparent)
        );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .grid-data-protection-overlay__dialog,
html.dark .grid-data-protection-overlay__dialog,
body.dark .grid-data-protection-overlay__dialog {
    box-shadow: 0 22px 62px rgba(0, 0, 0, .42);
}

@media (max-width: 620px) {
    .grid-data-protection-overlay {
        padding: 10px;
    }

    .grid-data-protection-overlay__dialog {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px 12px;
        padding: 16px;
        border-radius: 15px;
    }

    .grid-data-protection-overlay__icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .grid-data-protection-overlay__content p {
        font-size: var(--text-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-data-protection-overlay,
    .grid-data-protection-overlay__close {
        transition: none;
    }
}

html body .page :is(
    .rrhh-adn-page,
    .rrhh-adn-custom-page,
    .generic-table-page,
    .workspace-module,
    .news-admin-page,
    .employee-requests,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-index-page,
    .process-detail-page,
    .process-selection-page,
    .worker-groups-page
) {
    width: 100%;
    max-width: none;
    min-width: 0;
}

html body .page :is(.rrhh-adn-page, .rrhh-adn-custom-page) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
}

html body .page :is(.rrhh-adn-page, .rrhh-adn-custom-page) > .rrhh-adn-create-card,
html body .page .rrhh-adn-create-card[data-rrhh-adn-create-card="true"] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .rrhh-adn-create-card__header {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
.rrhh-adn-create-card__header > .rrhh-adn-create-card__toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 14px;
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 15px 17px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
}

html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
.rrhh-adn-create-card__header > .rrhh-adn-create-card__toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
.rrhh-adn-create-card__header > .rrhh-adn-create-card__toggle:focus,
html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
.rrhh-adn-create-card__header > .rrhh-adn-create-card__toggle:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 38%, transparent);
}

html body .page .rrhh-adn-create-card__toggle:disabled {
    cursor: default;
    opacity: .62;
}

html body .page .rrhh-adn-create-card__icon,
html body .page [data-rrhh-adn-create-card="true"] :is(.fa-plus, .icon-plus, [data-icon="plus"]) {
    display: none;
}

html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
.rrhh-adn-create-card__copy {
    display: grid;
    grid-column: 1;
    align-content: center;
    justify-items: start;
    gap: 4px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

html body .page .rrhh-adn-create-card__copy strong {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
    white-space: normal;
    word-break: normal;
}

html body .page .rrhh-adn-create-card__copy > span:last-child {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.42;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

html body .page .rrhh-adn-create-card__chevron {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--pro-border, var(--line)) 92%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--pro-soft, var(--panel)) 76%, transparent);
    color: var(--pro-muted, var(--muted));
    box-shadow: none;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}

html body .page .rrhh-adn-create-card__toggle:hover:not(:disabled) .rrhh-adn-create-card__chevron {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

html body .page .rrhh-adn-create-card__chevron.is-open {
    transform: rotate(180deg);
}

html body .page .rrhh-adn-create-card__chevron svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .page .rrhh-adn-create-card__context-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 11px 13px 11px 0;
}

html body .page :is(.rrhh-adn-create-card__form, .rrhh-adn-custom-editor, .workspace-module__editor) {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 20px 22px 22px;
    background: color-mix(in srgb, var(--bg) 34%, var(--panel));
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body .page :is(.rrhh-adn-create-card__form, .rrhh-adn-custom-editor)
:is(.sliding-form-panel, .sliding-form-panel__body, [class*="editor-card"], [class*="form-card"]) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .page :is(.rrhh-adn-create-card__form, .rrhh-adn-custom-editor)
:is(.record-editor__grid, .stariz-form-grid, [class*="form-grid"]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    align-items: start;
    gap: 16px 18px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

html body .page :is(
    .rrhh-adn-crud-card,
    .workspace-module__crud-card,
    [data-stariz-grid-surface="true"],
    .stariz-data-grid-surface
) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page :is(.rrhh-adn-crud-card, .workspace-module__crud-card, [data-stariz-grid-surface="true"])
> :first-child {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

html body .page :is(.rrhh-adn-crud-card, .workspace-module__crud-card, [data-stariz-grid-surface="true"])
> :last-child {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

html body .page :is(.rrhh-adn-crud-card, .workspace-module__crud-card, [data-stariz-grid-surface="true"])
:is(.stariz-grid-toolbar, .rrhh-adn-toolbar, .rrhh-adn-custom-toolbar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9px 14px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    overflow: visible;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body .page .stariz-global-grid-title {
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 100%;
}

html body .page .stariz-global-grid-title strong {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    white-space: normal;
}

html body .page .stariz-global-grid-title span {
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.25;
}

html body .page .stariz-grid-toolbar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 420px;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

html body .page .stariz-grid-toolbar__controls :is(.rrhh-adn-search, .stariz-grid-filter) {
    flex: 1 1 280px;
    width: min(100%, 430px);
    max-width: 430px;
    min-width: 190px;
}

html body .page :is(.rrhh-adn-crud-card, .workspace-module__crud-card, [data-stariz-grid-surface="true"])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, .rrhh-adn-custom-grid) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .page table.stariz-data-grid {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--pro-surface, var(--panel));
}

html body .page table.stariz-data-grid thead {
    background: color-mix(in srgb, var(--pro-soft, var(--panel)) 74%, var(--pro-surface, var(--panel)));
}

html body .page table.stariz-data-grid th {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
}

html body .page table.stariz-data-grid tbody tr:last-child td {
    border-bottom: 0;
}

html body .page :is(.rrhh-adn-crud-card, .workspace-module__crud-card, [data-stariz-grid-surface="true"])
:is(.pager, .stariz-crud-pager, .rrhh-adn-pager, .rrhh-adn-custom-pager) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 8px 12px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page .table-wrap:has(> table.stariz-data-grid):not(.rrhh-adn-crud-card .table-wrap):not(.workspace-module__crud-card .table-wrap):not([data-stariz-grid-surface="true"] .table-wrap) {
    overflow: auto;
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    background: var(--pro-surface, var(--panel));
}

@media (max-width: 860px) {
    html body .page .rrhh-adn-create-card__header {
        flex-wrap: wrap;
    }

    html body .page .rrhh-adn-create-card__context-action {
        width: 100%;
        padding: 0 13px 12px;
        justify-content: flex-start;
    }

    html body .page .stariz-grid-toolbar__controls {
        flex-basis: 100%;
        justify-content: stretch;
    }
}

@media (max-width: 640px) {
    html body .page :is(.generic-table-page, .workspace-module, .rrhh-adn-page, .rrhh-adn-custom-page)
    .rrhh-adn-create-card__header > .rrhh-adn-create-card__toggle {
        grid-template-columns: minmax(0, 1fr) 32px;
        min-height: 70px;
        padding: 13px 14px;
        column-gap: 10px;
    }

    html body .page :is(.rrhh-adn-create-card__form, .rrhh-adn-custom-editor, .workspace-module__editor) {
        padding: 17px 14px 19px;
    }

    html body .page .stariz-grid-toolbar__controls {
        align-items: stretch;
        flex-direction: column;
    }

    html body .page .stariz-grid-toolbar__controls :is(.rrhh-adn-search, .stariz-grid-filter) {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

html body .page .stariz-grid-toolbar__controls > :is(
    .rrhh-adn-toolbar__actions,
    .stariz-grid-toolbar__actions,
    .stariz-excel-export-host__actions,
    .stariz-crud-toolbar__actions
) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    grid-column: auto;
    justify-self: auto;
    width: auto;
    min-width: max-content;
    margin: 0;
    gap: 8px;
    flex-wrap: nowrap;
}

html body .page :is(
    [data-stariz-grid-surface="true"],
    [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]),
    .stariz-data-grid-surface
) > :is(
    .employee-requests__table-heading,
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .approval-section-heading,
    header.worker-groups-result__heading
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body .page [data-stariz-grid-surface="true"] > .employee-requests__table-heading :is(h2, p),
html body .page [data-stariz-grid-surface="true"] > :is(.vacation-account-page__crud-heading, .vacation-timeline-page__crud-heading, .approval-section-heading) :is(h2, p, small) {
    margin-top: 0;
    margin-bottom: 0;
}

html body .page .worker-groups-result[data-stariz-grid-surface="true"] {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    background: var(--pro-surface, var(--panel));
}

html body .page .worker-groups-result[data-stariz-grid-surface="true"] > header {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pro-border, var(--line));
}

html body .page .worker-groups-result[data-stariz-grid-surface="true"] > .worker-groups-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

@media (max-width: 640px) {
    html body .page .stariz-grid-toolbar__controls > :is(
        .rrhh-adn-toolbar__actions,
        .stariz-grid-toolbar__actions,
        .stariz-excel-export-host__actions,
        .stariz-crud-toolbar__actions
    ) {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

html body .page :is(
    .stariz-composite-page,
    .workspace-module,
    .employee-requests,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

html body .page :is(
    .stariz-composite-page,
    .workspace-module,
    .employee-requests,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page
) > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

html body .page :is(
    .stariz-composite-page,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) > :is(.stariz-module-header, .page-heading, .approval-hero, .mass-ops-page__header) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 70px;
    margin: 0;
    padding: 13px 16px;
    overflow: visible;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page :is(
    .stariz-composite-page,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) > :is(.stariz-module-header, .page-heading, .approval-hero, .mass-ops-page__header) > :first-child {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

html body .page :is(
    .stariz-composite-page,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) :is(h1, h2, .stariz-module-header__description, .approval-heading__subtitle) {
    max-width: 100%;
    border: 0;
    outline: 0;
    box-shadow: none;
    text-decoration: none;
    word-break: normal;
    overflow-wrap: break-word;
}

html body .page :is(
    .stariz-composite-page,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) > :is(.stariz-module-header, .page-heading, .approval-hero, .mass-ops-page__header) :is(h1, h2) {
    width: auto;
    margin: 0;
    color: var(--text);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
}

html body .page :is(
    .stariz-composite-page,
    .approval-shell,
    .vacation-account-page,
    .vacation-timeline-page,
    .process-selection-page,
    .process-detail-page,
    .role-access-page,
    .worker-groups-page,
    .employee-self-page,
    .employee-timeline-page
) > :is(.stariz-module-header, .page-heading, .approval-hero, .mass-ops-page__header) p:not(.eyebrow) {
    width: 100%;
    max-width: 920px;
    margin: 3px 0 0;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.4;
}

html body .page :is(
    .vacation-account-page__heading-actions,
    .approval-heading__actions,
    .selection-header-actions,
    .process-detail-actions,
    .employee-requests__module-actions,
    .mass-ops-page__header-actions
) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-flow: row wrap;
    flex: 0 0 auto;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading,
    .worker-groups-result__heading,
    header.worker-groups-result__heading
) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) > :first-child {
    flex: 1 1 240px;
    min-width: 0;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) :is(strong, h2, p, small, span) {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    outline: 0;
    box-shadow: none;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) :is(strong, h2) {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.25;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) :is(small, p:not(.eyebrow)),
html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) > span {
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.35;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .table-wrap,
    .stariz-crud-grid,
    .approval-table-wrap,
    .worker-groups-table-wrap
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .pager,
    .stariz-crud-pager,
    .rrhh-adn-pager,
    .rrhh-adn-custom-pager
) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 8px 12px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) table.stariz-data-grid {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
    .vacation-account-page__crud-heading,
    .vacation-timeline-page__crud-heading,
    .employee-requests__table-heading,
    .approval-section-heading
) > .stariz-excel-export-host__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    min-width: max-content;
    margin-left: auto;
}

html body .page .vacation-account-page__selectors,
html body .page .vacation-timeline-page__filter-surface {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .vacation-account-page__selectors {
    grid-template-columns: minmax(170px, .72fr) minmax(240px, 1.1fr) minmax(230px, 1fr) auto;
    gap: 12px;
}

html body .page .vacation-account-page__summary,
html body .page .vacation-timeline-page__summary {
    gap: 12px;
    margin: 0;
}

html body .page :is(.vacation-account-page__crud-flow, .vacation-timeline-page__crud-flow) {
    width: 100%;
    min-width: 0;
    margin: 0;
}

html body .page :is(.vacation-account-page__table-actions, .vacation-timeline-page__table-actions):empty {
    display: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

html body .page .approval-workspace {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .approval-workspace > .approval-local-filter {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page .approval-workspace > .approval-stats {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 13px;
    background: color-mix(in srgb, var(--pro-soft, var(--panel)) 34%, var(--pro-surface, var(--panel)));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
}

html body .page .approval-workspace > .approval-crud-flow {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .page .approval-workspace > .approval-crud-flow + .approval-crud-flow {
    border-top: 1px solid var(--pro-border, var(--line));
}

html body .page .approval-workspace .approval-empty {
    min-height: 118px;
    margin: 0;
    padding: 28px 16px;
    background: var(--pro-surface, var(--panel));
    border: 0;
}

html body .page .approval-workspace
    [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) {
    border: 0;
    border-radius: 0;
}

html body .page .workspace-module__crud-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .workspace-module__context {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page .workspace-module__context > div {
    display: grid;
    align-content: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

html body .page .workspace-module__context strong {
    display: block;
    margin: 0;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.25;
}

html body .page .workspace-module__context span {
    display: block;
    margin: 0;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.35;
}

html body .page :is(.workspace-module__groups, .workspace-module__tabs) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--pro-muted, var(--muted)) 38%, transparent) transparent;
    background: color-mix(in srgb, var(--pro-soft, var(--panel)) 54%, var(--pro-surface, var(--panel)));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page :is(.workspace-module__groups, .workspace-module__tabs)::-webkit-scrollbar {
    height: 6px;
}

html body .page :is(.workspace-module__groups, .workspace-module__tabs)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--pro-muted, var(--muted)) 34%, transparent);
}

html body .page :is(.workspace-module__group, .workspace-module__tab) {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
}

html body .page .workspace-module__crud-card > .stariz-grid-toolbar {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page .workspace-module__crud-card > :is(.stariz-crud-grid, .rrhh-adn-grid) {
    margin: 0;
    border: 0;
    border-radius: 0;
}

html body .page .workspace-module__crud-card > .workspace-module__pager {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html body .page [data-stariz-no-excel-host="true"] > .stariz-excel-export-host__actions,
html body .page [data-stariz-no-excel-host="true"] > [data-stariz-excel-managed],
html body .page [data-stariz-no-excel-host="true"] > [data-stariz-excel-popup-managed] {
    display: none;
}

html body .page :is(
    .process-selection-page__grid,
    .worker-groups-result[data-stariz-grid-surface="true"]
) {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    background: var(--pro-surface, var(--panel));
}

@media (max-width: 1120px) {
    html body .page .vacation-account-page__selectors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .page .vacation-account-page__quick-filters {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    html body .page :is(
        .stariz-composite-page,
        .approval-shell,
        .vacation-account-page,
        .vacation-timeline-page,
        .process-selection-page,
        .process-detail-page,
        .role-access-page,
        .worker-groups-page,
        .employee-self-page,
        .employee-timeline-page
    ) > :is(.stariz-module-header, .page-heading, .approval-hero, .mass-ops-page__header) {
        align-items: stretch;
        flex-direction: column;
    }

    html body .page :is(
        .vacation-account-page__heading-actions,
        .approval-heading__actions,
        .selection-header-actions,
        .process-detail-actions,
        .employee-requests__module-actions
    ) {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    html body .page .approval-stats,
    html body .page .vacation-account-page__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html body .page .vacation-account-page__selectors,
    html body .page .approval-stats,
    html body .page .vacation-account-page__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
        .vacation-account-page__crud-heading,
        .vacation-timeline-page__crud-heading,
        .employee-requests__table-heading,
        .approval-section-heading
    ) {
        align-items: stretch;
        flex-direction: column;
    }

    html body .page [data-stariz-grid-surface]:not([data-stariz-grid-surface="false"]) > :is(
        .vacation-account-page__crud-heading,
        .vacation-timeline-page__crud-heading,
        .employee-requests__table-heading,
        .approval-section-heading
    ) > .stariz-excel-export-host__actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
}

html body .page > .employee-operations.stariz-composite-page {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

html body .page > .employee-operations.stariz-composite-page > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

html body .page .employee-operations > .employee-operations__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 70px;
    margin: 0;
    padding: 13px 16px;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .employee-operations > .employee-operations__heading > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

html body .page .employee-operations > .employee-operations__heading .eyebrow {
    display: none;
}

html body .page .employee-operations > .employee-operations__heading h1 {
    width: auto;
    max-width: 100%;
    margin: 0;
    color: var(--text);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
    border: 0;
    outline: 0;
    box-shadow: none;
}

html body .page .employee-operations > .employee-operations__heading .stariz-module-header__description {
    width: 100%;
    max-width: 920px;
    margin: 3px 0 0;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.4;
}

html body .page .employee-operations__scope-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-flow: row wrap;
    flex: 0 0 auto;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
}

html body .page .employee-operations__scope {
    max-width: min(36rem, 46vw);
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--pro-border, var(--line)));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 7%, var(--pro-surface, var(--panel)));
    color: var(--text);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    text-align: left;
    white-space: normal;
}

html body .page .employee-operations > .employee-operations__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 12px 14px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 14px;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .employee-operations__field {
    display: grid;
    grid-template-rows: auto auto minmax(0, auto);
    align-content: start;
    gap: 6px;
    min-width: 0;
}

html body .page .employee-operations__field > :is(label, span) {
    min-height: auto;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
}

html body .page .employee-operations__field :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: .58rem .75rem;
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 10px;
    background: var(--pro-surface, var(--panel));
    color: var(--text);
    box-shadow: none;
}

html body .page .employee-operations__period-control {
    width: 100%;
    min-width: 0;
}

html body .page .employee-operations__period-control input {
    padding-right: 5.45rem;
}

html body .page .employee-operations__period-control .btn {
    top: 5px;
    right: 5px;
    bottom: 5px;
    min-height: 34px;
    height: auto;
    padding: 5px 10px;
    border-radius: 8px;
}

html body .page .employee-operations__field-help,
html body .page .employee-operations__field-error {
    margin: 0;
    font-size: var(--text-2xs);
    line-height: 1.35;
}

html body .page .employee-operations__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
}

html body .page .employee-operations__kpi {
    min-height: 104px;
    padding: 13px 14px;
    border: 1px solid var(--stariz-card-border, var(--pro-border, var(--line)));
    border-radius: 14px;
    background: var(--stariz-card-background, var(--pro-surface, var(--panel)));
    box-shadow: none;
}

html body .page .employee-operations__secondary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

html body .page .employee-operations__secondary > article {
    min-height: 86px;
    padding: 12px 14px;
    background: var(--stariz-card-background, var(--pro-surface, var(--panel)));
    border: 1px solid var(--stariz-card-border, var(--pro-border, var(--line)));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .employee-operations__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

html body .page .employee-operations__card {
    min-width: 0;
    height: 100%;
    padding: 14px;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .employee-operations__card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
}

html body .page .employee-operations__card > header .eyebrow {
    margin: 0 0 3px;
}

html body .page .employee-operations__table-card[data-stariz-grid-surface="true"] {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
}

html body .page .employee-operations__table-card > .employee-operations__table-heading {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body .page .employee-operations__table-heading > :first-child {
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

html body .page .employee-operations__table-heading .eyebrow {
    display: none;
}

html body .page .employee-operations__table-heading h2 {
    max-width: 100%;
    margin: 0;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    border: 0;
    outline: 0;
    box-shadow: none;
}

html body .page .employee-operations__table-heading small {
    display: block;
    margin: 0;
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    line-height: 1.35;
}

html body .page .employee-operations__table-heading > .stariz-excel-export-host__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    min-width: max-content;
    margin: 0 0 0 auto;
    grid-column: auto;
}

html body .page .employee-operations__table-card > .employee-operations__table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
}

html body .page .employee-operations__table-card > .employee-operations__pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-flow: row wrap;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 8px 12px;
    overflow: visible;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
}

html[data-theme="dark"] body .page .employee-operations :is(
    .employee-operations__heading,
    .employee-operations__filters,
    .employee-operations__card,
    .employee-operations__table-card,
    .employee-operations__kpi,
    .employee-operations__secondary > article
) {
    box-shadow: none;
}

@media (max-width: 1360px) {
    html body .page .employee-operations__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .page .employee-operations__secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1040px) {
    html body .page .employee-operations > .employee-operations__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .page .employee-operations__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    html body .page .employee-operations > .employee-operations__heading {
        align-items: stretch;
        flex-direction: column;
    }

    html body .page .employee-operations__scope-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    html body .page .employee-operations__scope {
        max-width: 100%;
    }

    html body .page .employee-operations > .employee-operations__filters,
    html body .page .employee-operations__kpis,
    html body .page .employee-operations__secondary {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .page .employee-operations__table-card > .employee-operations__table-heading {
        align-items: stretch;
        flex-direction: column;
    }

    html body .page .employee-operations__table-heading > .stariz-excel-export-host__actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
}

html body input[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
}

html body input[type="search"]::-webkit-search-cancel-button,
html body input[type="search"]::-webkit-search-decoration,
html body input[type="search"]::-webkit-search-results-button,
html body input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

html body input[type="search"]::-ms-clear,
html body input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

html body .rrhh-adn-search .rrhh-adn-search__clear,
html body .stariz-grid-filter .rrhh-adn-search__clear {
    position: relative;
    z-index: 1;
    flex: 0 0 24px;
}

.login-only-layout {
    min-height: 100dvh;
    width: 100%;
    background: #ffffff;
}

.stariz-login-flow {
    --login-accent: #146be8;
    --login-accent-strong: #0b5ed7;
    --login-accent-contrast: #ffffff;
    --login-page: #ffffff;
    --login-card: #ffffff;
    --login-text: #101828;
    --login-muted: #667085;
    --login-line: #d9e0e9;
    --login-control: #ffffff;
    --login-disabled: #f3f5f8;
    --login-disabled-text: #8b96a8;
    --login-focus: color-mix(in srgb, var(--login-accent) 17%, transparent);
    position: relative;
    display: grid;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    padding: clamp(30px, 5vw, 64px) 20px;
    background: var(--login-page);
    color: var(--login-text);
    color-scheme: light;
}

.stariz-login-flow--company-selected {
    --login-accent: var(--primary, #146be8);
    --login-accent-strong: var(--secondary, color-mix(in srgb, var(--primary, #146be8) 84%, #101828 16%));
    --login-accent-support: var(--tertiary, var(--primary, #146be8));
    --login-accent-contrast: var(--primary-contrast, #ffffff);
    --login-focus: color-mix(in srgb, var(--login-accent-support) 18%, transparent);
}

.stariz-login-stage {
    display: grid;
    align-content: center;
    justify-items: center;
    width: min(100%, 590px);
    margin: 0 auto;
}

.stariz-login-intro {
    display: grid;
    justify-items: center;
    gap: 13px;
    width: 100%;
    margin-bottom: 24px;
    text-align: center;
}

.stariz-login-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 5px 13px;
    border: 1px solid color-mix(in srgb, var(--login-accent) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--login-accent) 9%, #ffffff 91%);
    color: var(--login-accent-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: .035em;
    line-height: 1;
}

.stariz-login-intro h1 {
    margin: 0;
    color: var(--login-text);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: -.04em;
    line-height: 1.08;
}

.stariz-login-flow--company-selected .stariz-login-intro h1 {
    color: var(--login-accent-strong);
}

.stariz-login-card {
    display: grid;
    width: min(100%, 440px);
    padding: clamp(27px, 4vw, 34px);
    border: 1px solid var(--login-line);
    border-radius: 20px;
    background: var(--login-card);
    box-shadow: 0 16px 38px rgba(16, 24, 40, .08);
}

.stariz-login-flow--company-selected .stariz-login-card {
    border-color: color-mix(in srgb, var(--login-accent) 30%, var(--login-line) 70%);
}

.stariz-central-brand,
.stariz-context-brand {
    display: grid;
    justify-items: center;
    text-align: center;
}

.stariz-central-brand {
    min-height: 84px;
    align-items: center;
    margin-bottom: 26px;
}

.stariz-central-brand img {
    grid-area: 1 / 1;
    display: block;
    width: min(100%, 185px);
    max-height: 68px;
    object-fit: contain;
}

.stariz-context-brand {
    gap: 3px;
    margin-bottom: 26px;
}

.stariz-context-brand__logo-frame {
    display: grid;
    place-items: center;
    width: min(100%, 220px);
    min-height: 82px;
    padding: 0;
    border: 0;
    background: transparent;
}

.stariz-context-brand__logo {
    grid-area: 1 / 1;
    display: block;
    width: min(100%, 190px);
    max-height: 76px;
    object-fit: contain;
}

.stariz-context-brand strong {
    max-width: 100%;
    color: var(--login-accent-strong);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: .015em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.stariz-login-brand-image--dark {
    display: none;
}

.stariz-login-form {
    display: grid;
    gap: 18px;
}

.stariz-login-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.stariz-login-field > span:first-child {
    color: var(--login-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.stariz-login-flow--company-selected .stariz-login-field > span:first-child {
    color: var(--login-accent-strong);
}

.stariz-login-control {
    position: relative;
    display: grid;
    align-items: center;
}

.stariz-login-control > svg {
    position: absolute;
    z-index: 2;
    left: 15px;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: color-mix(in srgb, var(--login-accent) 72%, #52637a 28%);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.stariz-login-control input,
.stariz-login-control select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 0 46px 0 48px;
    border: 1px solid color-mix(in srgb, var(--login-accent) 16%, var(--login-line) 84%);
    border-radius: 10px;
    outline: none;
    background: var(--login-control);
    color: var(--login-text);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.stariz-login-control select {
    appearance: none;
    cursor: pointer;
}

.stariz-login-control input::placeholder {
    color: #8a96a8;
    opacity: 1;
}

.stariz-login-control select:disabled,
.stariz-login-control input:disabled {
    cursor: not-allowed;
    opacity: 1;
    border-color: var(--login-line);
    background: var(--login-disabled);
    color: var(--login-disabled-text);
}

.stariz-login-control--select::after {
    content: "";
    position: absolute;
    right: 17px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid color-mix(in srgb, var(--login-accent) 70%, #52637a 30%);
    border-bottom: 1.6px solid color-mix(in srgb, var(--login-accent) 70%, #52637a 30%);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.stariz-login-control input:hover,
.stariz-login-control select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--login-accent) 48%, var(--login-line) 52%);
}

.stariz-login-control input:focus,
.stariz-login-control select:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 4px var(--login-focus);
}

.stariz-password-toggle {
    position: absolute;
    z-index: 3;
    right: 9px;
    display: inline-grid;
    place-items: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in srgb, var(--login-accent) 68%, #52637a 32%);
    cursor: pointer;
}

.stariz-password-toggle:hover,
.stariz-password-toggle:focus-visible {
    background: color-mix(in srgb, var(--login-accent) 8%, transparent);
    color: var(--login-accent-strong);
    outline: none;
}

.stariz-password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stariz-password-toggle::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1.6px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-42deg);
    transform-origin: center;
    opacity: 0;
    transition: width .14s ease, opacity .14s ease;
    pointer-events: none;
}

.stariz-password-toggle.is-visible::after {
    width: 22px;
    opacity: 1;
}

.stariz-login-flow[data-stariz-login-submitting="true"] .stariz-login-submit {
    cursor: progress;
    filter: none;
    transform: none;
}

.stariz-login-recovery {
    display: flex;
    justify-content: flex-end;
    margin-top: -7px;
}

.stariz-login-recovery a {
    color: var(--login-accent-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.stariz-login-recovery a:hover {
    text-decoration: underline;
}

.stariz-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    margin-top: 1px;
    padding: 0 18px;
    border: 1px solid var(--login-accent);
    border-radius: 10px;
    background: var(--login-accent);
    color: var(--login-accent-contrast);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    text-decoration: none;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--login-accent) 18%, transparent);
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.stariz-login-flow--credentials .stariz-login-submit {
    color: #ffffff;
}

.stariz-login-submit:hover:not(:disabled) {
    filter: brightness(.96);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--login-accent) 23%, transparent);
}

.stariz-login-submit:focus-visible {
    outline: 3px solid var(--login-focus);
    outline-offset: 3px;
}

.stariz-login-submit:disabled {
    cursor: not-allowed;
    border-color: var(--login-line);
    background: var(--login-disabled);
    color: var(--login-disabled-text);
    box-shadow: none;
    opacity: 1;
    transform: none;
}

.stariz-login-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stariz-login-card .alert {
    margin: 0;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: var(--text-xs);
    line-height: 1.45;
}

.stariz-login-card__content--message {
    display: grid;
    gap: 18px;
}

.stariz-login-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--login-muted);
    font-size: var(--text-xs);
}

.stariz-login-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--login-accent) 23%, transparent);
    border-top-color: var(--login-accent);
    border-radius: 50%;
    animation: stariz-login-spin .72s linear infinite;
}

.stariz-login-card__footer {
    margin-top: 25px;
    color: var(--login-muted);
    font-size: var(--text-2xs);
    text-align: center;
}

.stariz-login-flow--company-selected .stariz-login-card__footer {
    color: color-mix(in srgb, var(--login-accent-strong) 52%, var(--login-muted) 48%);
}

@keyframes stariz-login-spin {
    to { transform: rotate(360deg); }
}

html[data-theme="dark"] .login-only-layout {
    background: #1a2029;
}

html[data-theme="dark"] .stariz-login-flow {
    --login-page: #1a2029;
    --login-card: #222933;
    --login-text: #f4f7fb;
    --login-muted: #a8b3c2;
    --login-line: #3c4654;
    --login-control: #262e39;
    --login-disabled: #202630;
    --login-disabled-text: #7f8a99;
    background: var(--login-page);
    color-scheme: dark;
}

html[data-theme="dark"] .stariz-login-flow--company-selected {
    --login-accent-strong: color-mix(in srgb, var(--secondary, var(--primary, #72a6ff)) 72%, #ffffff 28%);
    --login-focus: color-mix(in srgb, var(--tertiary, var(--primary, #72a6ff)) 23%, transparent);
}

html[data-theme="dark"] .stariz-login-step-badge {
    border-color: color-mix(in srgb, var(--login-accent) 31%, transparent);
    background: color-mix(in srgb, var(--login-accent) 18%, #222933 82%);
}

html[data-theme="dark"] .stariz-login-card {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .stariz-login-brand-image--light {
    display: none;
}

html[data-theme="dark"] .stariz-login-brand-image--dark {
    display: block;
}

html[data-theme="dark"] .stariz-login-control input::placeholder {
    color: #8290a2;
}

html[data-theme="dark"] .stariz-login-control input,
html[data-theme="dark"] .stariz-login-control select {
    border-color: color-mix(in srgb, var(--login-accent) 20%, var(--login-line) 80%);
}

html[data-theme="dark"] .stariz-login-control select:disabled,
html[data-theme="dark"] .stariz-login-control input:disabled,
html[data-theme="dark"] .stariz-login-submit:disabled {
    border-color: var(--login-line);
    background: var(--login-disabled);
    color: var(--login-disabled-text);
}

@media (max-width: 720px) {
    .stariz-login-flow {
        align-content: start;
        padding: max(26px, env(safe-area-inset-top)) 17px max(28px, env(safe-area-inset-bottom));
    }

    .stariz-login-stage {
        align-content: start;
        padding-top: 4px;
    }

    .stariz-login-intro {
        margin-bottom: 21px;
    }

    .stariz-login-card {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .stariz-central-brand,
    .stariz-context-brand {
        margin-bottom: 23px;
    }
}

@media (max-width: 420px) {
    .stariz-login-intro h1 {
        font-size: var(--text-3xl);
    }

    .stariz-login-card {
        padding: 22px 17px;
    }

    .stariz-login-control input,
    .stariz-login-control select,
    .stariz-login-submit {
        min-height: 50px;
        height: 50px;
    }

    .stariz-context-brand__logo-frame {
        width: 185px;
        min-height: 74px;
    }

    .stariz-context-brand__logo {
        max-height: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stariz-login-submit,
    .stariz-login-control input,
    .stariz-login-control select,
    .stariz-password-toggle::after {
        transition: none;
    }

    .stariz-login-spinner {
        animation: none;
    }
}

html body .home-dashboard-shell {
    --home-clean-surface: #ffffff;
    --home-clean-surface-soft: #f7f8fa;
    --home-clean-hover: #f5f6f8;
    --home-clean-border: #d9dde4;
    --home-clean-border-strong: #bfc5ce;
    --home-clean-text: #17191d;
    --home-clean-muted: #667085;
    --home-clean-icon: #34383f;
    --home-clean-focus: #7b818b;
}

html[data-theme="dark"] body .home-dashboard-shell,
body.theme-dark .home-dashboard-shell {
    --home-clean-surface: #17191d;
    --home-clean-surface-soft: #1d2025;
    --home-clean-hover: #202329;
    --home-clean-border: #343941;
    --home-clean-border-strong: #4b515b;
    --home-clean-text: #f3f4f6;
    --home-clean-muted: #a7adb7;
    --home-clean-icon: #d7dae0;
    --home-clean-focus: #a7adb7;
}

html body .home-dashboard-shell,
html body .home-dashboard,
html body .home-dashboard__analytics {
    background: transparent;
    background-image: none;
    box-shadow: none;
}

html body .home-dashboard .summary-dashboard-heading,
html body .home-dashboard .dashboard-quick-access__heading,
html body .home-dashboard__analytics .payroll-analytics-title {
    color: var(--home-clean-text);
    background: var(--home-clean-surface);
    background-image: none;
    border-color: var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard .summary-dashboard-heading::before,
html body .home-dashboard .summary-dashboard-heading::after,
html body .home-dashboard .dashboard-quick-access__heading::before,
html body .home-dashboard .dashboard-quick-access__heading::after,
html body .home-dashboard__analytics .payroll-analytics-title::before,
html body .home-dashboard__analytics .payroll-analytics-title::after {
    display: none;
    content: none;
}

html body .home-dashboard :is(h1, h2, h3, strong),
html body .home-dashboard__analytics :is(h1, h2, h3, strong) {
    color: var(--home-clean-text);
}

html body .home-dashboard :is(p, small),
html body .home-dashboard__analytics :is(p, small) {
    color: var(--home-clean-muted);
}

html body .home-dashboard .summary-dashboard-period,
html body .home-dashboard .dashboard-quick-access__count,
html body .home-dashboard__analytics .payroll-status-chip,
html body .home-dashboard__analytics .payroll-results-count,
html body .home-dashboard__analytics .payroll-share {
    color: var(--home-clean-muted);
    background: var(--home-clean-surface-soft);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard .summary-dashboard-period svg {
    color: var(--home-clean-icon);
    stroke: currentColor;
}

html body .home-dashboard .dashboard-quick-access__card,
html body .home-dashboard .dashboard-quick-access__card.stariz-card,
html body .home-dashboard .home-dashboard__quick-card,
html body .home-dashboard .home-dashboard__quick-card.is-pinned {
    color: var(--home-clean-text);
    background: var(--home-clean-surface);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    box-shadow: none;
    filter: none;
    transform: none;
}

html body .home-dashboard .dashboard-quick-access__card::before,
html body .home-dashboard .dashboard-quick-access__card::after,
html body .home-dashboard .home-dashboard__quick-card::before,
html body .home-dashboard .home-dashboard__quick-card::after {
    display: none;
    content: none;
}

html body .home-dashboard .dashboard-quick-access__link {
    color: var(--home-clean-text);
    background: transparent;
    background-image: none;
}

html body .home-dashboard .dashboard-quick-access__icon {
    color: var(--home-clean-icon);
    background: transparent;
    background-image: none;
    border: 1px solid var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard .dashboard-quick-access__icon svg,
html body .home-dashboard .dashboard-quick-access__pin svg {
    color: inherit;
    fill: none;
    stroke: currentColor;
}

html body .home-dashboard .dashboard-quick-access__pin,
html body .home-dashboard .home-dashboard__quick-card.is-pinned .dashboard-quick-access__pin {
    color: var(--home-clean-icon);
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard .dashboard-quick-access__card:hover,
    html body .home-dashboard .dashboard-quick-access__card:focus-within,
    html body .home-dashboard .home-dashboard__quick-card:hover,
    html body .home-dashboard .home-dashboard__quick-card:focus-within {
        color: var(--home-clean-text);
        background: var(--home-clean-hover);
        background-image: none;
        border-color: var(--home-clean-border-strong);
        box-shadow: none;
        transform: none;
    }
}

html body .home-dashboard .dashboard-quick-access__card:focus-within {
    outline: 2px solid var(--home-clean-focus);
    outline-offset: 2px;
}

html body .home-dashboard .summary-kpi-card,
html body .home-dashboard .summary-kpi-card.stariz-card,
html body .home-dashboard .stariz-indicator-card,
html body .home-dashboard .stariz-indicator-card--attention,
html body .home-dashboard .stariz-indicator-card--risk,
html body .home-dashboard .summary-kpi-card--attention,
html body .home-dashboard .summary-kpi-card--risk {
    color: var(--home-clean-text);
    background: var(--home-clean-surface);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    box-shadow: none;
    filter: none;
    transform: none;
}

html body .home-dashboard .summary-kpi-card::before,
html body .home-dashboard .summary-kpi-card::after,
html body .home-dashboard .stariz-indicator-card::before,
html body .home-dashboard .stariz-indicator-card::after {
    display: none;
    content: none;
}

html body .home-dashboard .summary-kpi-card__icon,
html body .home-dashboard .stariz-indicator-card .summary-kpi-card__icon {
    color: var(--home-clean-icon);
    background: transparent;
    background-image: none;
    border: 1px solid var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard .summary-kpi-card__icon svg {
    fill: none;
    stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard .summary-kpi-card:hover,
    html body .home-dashboard .stariz-indicator-card:hover {
        background: var(--home-clean-hover);
        border-color: var(--home-clean-border-strong);
        box-shadow: none;
        transform: none;
    }
}

html body .home-dashboard__analytics :is(
    .payroll-filter-surface,
    .payroll-chart-switcher__options,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home,
    .payroll-results-table__head--home,
    .payroll-results-grid,
    .payroll-results-grid__footer
) {
    color: var(--home-clean-text);
    background: var(--home-clean-surface);
    background-image: none;
    border-color: var(--home-clean-border);
    box-shadow: none;
    filter: none;
}

html body .home-dashboard__analytics :is(
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home
)::before,
html body .home-dashboard__analytics :is(
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home
)::after {
    display: none;
    content: none;
}

html body .home-dashboard__analytics :is(select, .payroll-chart-switcher__options) {
    color: var(--home-clean-text);
    background-color: var(--home-clean-surface);
    background-image: none;
    border-color: var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-chart-switcher__options label span {
    color: var(--home-clean-muted);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-chart-switcher__options input:checked + span {
    color: var(--home-clean-text);
    background: var(--home-clean-surface-soft);
    border-color: var(--home-clean-border-strong);
    box-shadow: none;
}

html body .home-dashboard__analytics .payroll-metric-card :is(span, small),
html body .home-dashboard__analytics .payroll-context-card :is(p, dt),
html body .home-dashboard__analytics .payroll-results-table--home :is(p, small) {
    color: var(--home-clean-muted);
}

html body .home-dashboard__analytics .payroll-context-card dl > div,
html body .home-dashboard__analytics .payroll-results-table__head--home,
html body .home-dashboard__analytics .payroll-results-grid__footer {
    border-color: var(--home-clean-border);
}

html body .home-dashboard__analytics .payroll-results-table--home :is(table, thead, tbody, tr, th, td) {
    background-color: transparent;
    background-image: none;
}

html body .home-dashboard__analytics .payroll-results-table--home thead th {
    color: var(--home-clean-muted);
    background: var(--home-clean-surface-soft);
    border-color: var(--home-clean-border);
}

html body .home-dashboard__analytics .payroll-results-table--home tbody td {
    color: var(--home-clean-text);
    border-color: var(--home-clean-border);
}

html body .home-dashboard__analytics .payroll-results-table--home tbody tr:hover td {
    background: var(--home-clean-hover);
}

html body .home-dashboard-shell *,
html body .home-dashboard-shell *::before,
html body .home-dashboard-shell *::after {
    box-shadow: none;
}

html body .home-dashboard-shell :is(
    .summary-dashboard-heading,
    .dashboard-quick-access__heading,
    .dashboard-quick-access__card,
    .home-dashboard__quick-item,
    .home-dashboard__quick-card,
    .summary-kpi-card,
    .stariz-indicator-card,
    .payroll-analytics-title,
    .payroll-filter-surface,
    .payroll-chart-switcher__options,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home,
    .payroll-results-grid,
    .payroll-results-grid__footer
) {
    background: var(--home-clean-surface);
    background-image: none;
    border-color: var(--home-clean-border);
    box-shadow: none;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
}

html body .home-dashboard-shell :is(
    .dashboard-quick-access__card,
    .home-dashboard__quick-item,
    .home-dashboard__quick-card,
    .summary-kpi-card,
    .stariz-indicator-card,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card
) * {
    transform: none;
    animation: none;
    transition: none;
}

html body .home-dashboard-shell :is(
    .dashboard-quick-access__card,
    .home-dashboard__quick-item,
    .home-dashboard__quick-card,
    .summary-kpi-card,
    .stariz-indicator-card,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home
)::before,
html body .home-dashboard-shell :is(
    .dashboard-quick-access__card,
    .home-dashboard__quick-item,
    .home-dashboard__quick-card,
    .summary-kpi-card,
    .stariz-indicator-card,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home
)::after {
    display: none;
    content: none;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard-shell :is(
        .dashboard-quick-access__card,
        .home-dashboard__quick-item,
        .home-dashboard__quick-card,
        .summary-kpi-card,
        .stariz-indicator-card,
        .payroll-metric-card,
        .payroll-chart-card,
        .payroll-context-card,
        .payroll-results-table--home
    ):hover,
    html body .home-dashboard-shell :is(
        .dashboard-quick-access__card,
        .home-dashboard__quick-item,
        .home-dashboard__quick-card,
        .summary-kpi-card,
        .stariz-indicator-card,
        .payroll-metric-card,
        .payroll-chart-card,
        .payroll-context-card,
        .payroll-results-table--home
    ):focus-within {
        color: var(--home-clean-text);
        background: var(--home-clean-surface);
        background-image: none;
        border-color: var(--home-clean-border);
        box-shadow: none;
        filter: none;
        transform: none;
        animation: none;
        transition: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard-shell .home-dashboard.home-dashboard.home-dashboard
    .dashboard-quick-access__card.home-dashboard__quick-item.home-dashboard__quick-card:hover,
    html body .home-dashboard-shell .home-dashboard.home-dashboard.home-dashboard
    .dashboard-quick-access__card.home-dashboard__quick-item.home-dashboard__quick-card:focus-within {
        color: var(--home-clean-text);
        background: var(--home-clean-surface);
        background-image: none;
        border: 1px solid var(--home-clean-border);
        border-radius: 14px;
        box-shadow: none;
        filter: none;
        outline: none;
        transform: none;
        animation: none;
        transition: none;
    }

    html body .home-dashboard-shell .home-dashboard.home-dashboard.home-dashboard
    .dashboard-quick-access__card.home-dashboard__quick-item.home-dashboard__quick-card:hover
    .dashboard-quick-access__link,
    html body .home-dashboard-shell .home-dashboard.home-dashboard.home-dashboard
    .dashboard-quick-access__card.home-dashboard__quick-item.home-dashboard__quick-card:focus-within
    .dashboard-quick-access__link {
        color: var(--home-clean-text);
        background: transparent;
        background-image: none;
        box-shadow: none;
        transform: none;
        animation: none;
        transition: none;
    }

    html body .home-dashboard-shell .home-dashboard.home-dashboard
    .summary-kpi-card.stariz-indicator-card.home-dashboard__indicator-card:hover {
        color: var(--home-clean-text);
        background: var(--home-clean-surface);
        background-image: none;
        border: 1px solid var(--home-clean-border);
        box-shadow: none;
        filter: none;
        outline: none;
        transform: none;
        animation: none;
        transition: none;
    }

    html body .home-dashboard-shell .home-dashboard.home-dashboard
    .summary-kpi-card.stariz-indicator-card.home-dashboard__indicator-card:hover :is(
        .summary-kpi-card__icon, strong, span, small
    ) {
        transform: none;
        animation: none;
        transition: none;
    }
}

html[data-theme="dark"] body .home-dashboard-shell :is(
    .summary-dashboard-heading,
    .dashboard-quick-access__heading,
    .dashboard-quick-access__card,
    .summary-kpi-card,
    .stariz-indicator-card,
    .payroll-analytics-title,
    .payroll-filter-surface,
    .payroll-metric-card,
    .payroll-chart-card,
    .payroll-context-card,
    .payroll-results-table--home
) {
    background: var(--home-clean-surface);
    border-color: var(--home-clean-border);
    box-shadow: none;
}

html body .home-dashboard-shell .home-dashboard__analytics,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-title,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-body,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-surface,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-grid,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analysis-toolbar,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-metric-grid,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-layout {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-title {
    margin: 0;
    padding: 20px 22px;
    color: var(--home-clean-text);
    background: var(--home-clean-surface);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    border-left: 1px solid var(--home-clean-border);
    border-radius: 15px;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: none;
    overflow: hidden;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-title::before,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-title::after {
    display: none;
    content: none;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-body {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    overflow: visible;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-surface {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1.05fr) minmax(180px, .74fr);
    align-items: end;
    gap: 14px;
    margin: 0;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    overflow: visible;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-grid,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analysis-toolbar {
    display: contents;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-process,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-concept,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analysis-toolbar > label {
    display: grid;
    grid-column: auto;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    overflow: visible;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-surface select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 38px 0 13px;
    color: var(--home-clean-text);
    background-color: var(--home-clean-surface);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    border-radius: 11px;
    box-shadow: none;
    outline-offset: 2px;
    transform: none;
    transition: none;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher legend {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 0 7px;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    background: var(--home-clean-surface);
    background-image: none;
    border: 1px solid var(--home-clean-border);
    border-radius: 11px;
    box-shadow: none;
    overflow: hidden;
    transform: none;
    transition: none;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options label,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options label span {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    box-shadow: none;
    transform: none;
    transition: none;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options input:checked + span {
    color: var(--home-clean-text);
    background: var(--home-clean-surface-soft);
    border-color: var(--home-clean-border-strong);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher__options label:hover span {
        box-shadow: none;
        filter: none;
        transform: none;
    }
}

html body .home-dashboard-shell .home-dashboard__analytics .payroll-metric-grid,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-layout,
html body .home-dashboard-shell .home-dashboard__analytics .payroll-results-table--home {
    margin-right: 0;
    margin-left: 0;
    overflow-x: clip;
}

@media (max-width: 1120px) {
    html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .home-dashboard-shell .home-dashboard__analytics .payroll-analysis-toolbar > label {
        grid-column: 1;
    }

    html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    html body .home-dashboard-shell .home-dashboard__analytics .payroll-analytics-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding: 18px;
    }

    html body .home-dashboard-shell .home-dashboard__analytics .payroll-filter-surface {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    html body .home-dashboard-shell .home-dashboard__analytics .payroll-analysis-toolbar > label,
    html body .home-dashboard-shell .home-dashboard__analytics .payroll-chart-switcher {
        grid-column: 1;
    }
}

:root {
    --line-width: 1px;
    --line: color-mix(in srgb, var(--text) 30%, transparent);
    --border-color: var(--line);
    --ui-border: var(--line);
    --stariz-shell-border: var(--line);
    --stariz-card-border: var(--line);
}

html[data-theme="dark"] {
    --line: color-mix(in srgb, var(--text) 36%, transparent);
}

.stariz-app .topbar,
.stariz-app .brand {
    border-bottom-width: var(--line-width);
}

.stariz-app .sidebar {
    border-right-width: var(--line-width);
}

.stariz-app :is(
    .stariz-card,
    .page-card,
    .hero-card,
    .auth-card,
    .metric-card,
    .portal-config-panel,
    .portal-preview-card,
    .asset-card,
    .rrhh-adn-create-card,
    .rrhh-adn-crud-card,
    .stariz-crud-surface,
    .stariz-popup-surface,
    .stariz-grid,
    .stariz-crud-grid,
    .rrhh-adn-grid,
    input,
    select,
    textarea,
    .form-control,
    .btn,
    .stariz-button
) {
    border-width: var(--line-width);
}

.stariz-app :is(table, .stariz-grid, .stariz-crud-grid, .rrhh-adn-grid) :is(th, td) {
    border-bottom-color: var(--line);
}

.stariz-app :is(
    .topbar-context__separator,
    .topbar-actions__separator
) {
    width: var(--line-width);
    flex-basis: var(--line-width);
}

:root {
    --stariz-pill-radius: 5px;
    --stariz-pill-min-height: 32px;
    --stariz-crud-form-height: 30px;
    --stariz-crud-grid-height: 30px;
    --stariz-crud-icon-only-size: 30px;
    --stariz-crud-icon-size: 16px;
    --stariz-crud-gap: .5rem;
    --stariz-popup-radius: 14px;
    --stariz-popup-card-radius: 12px;
    --stariz-popup-close-size: 36px;
    --stariz-popup-space-x: 20px;
    --stariz-popup-space-y: 16px;
    --stariz-popup-border: var(--line-width, 1.25px) solid var(--line, rgba(23, 32, 44, .22));
    --stariz-popup-surface-bg: var(--panel, #ffffff);
    --stariz-popup-card-bg: var(--field, #f7f8fa);
    --stariz-popup-header-bg: var(--topbar-bg, var(--primary, #1d4ed8));
    --stariz-popup-header-text: var(--topbar-text, var(--primary-contrast, #ffffff));
    --stariz-icon-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011l3%203L22%204%22%2F%3E%3Cpath%20d%3D%22M21%2012v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%1%202-2h11%22%2F%3E%3C%2Fsvg%3E");
}

html body :is(
    .stariz-pill-button,
    .btn:not([data-icon-only="true"]):not(.icon-only):not([data-size="compact"]),
    [class*="filter-button"],
    [class*="filter-actions"] > button,
    [class*="filters-actions"] > button,
    [data-stariz-grid-toolbar] button:not([data-icon-only="true"]):not([data-size="compact"]),
    .stariz-grid-toolbar button:not([data-icon-only="true"]):not([data-size="compact"]),
    .stariz-dialog-crud-toolbar button:not([data-icon-only="true"]):not([data-size="compact"])
):not(.stariz-crud-button):not(.stariz-process-worker-row-flat) {
    align-items: center;
    border-radius: var(--stariz-pill-radius);
    display: inline-flex;
    gap: .45rem;
    justify-content: center;
    line-height: 1.1;
    min-height: var(--stariz-pill-min-height);
    padding-block: .48rem;
    padding-inline: .9rem;
    white-space: nowrap;
}

html body .stariz-icon-button-normalized:not(.stariz-popup-close) {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    width: 36px;
}

html body :is(
    .topbar-menu-toggle,
    .sidebar-scrim,
    .nav-group__toggle,
    [role="tab"],
    [class*="swatch"],
    [class*="color-chip"],
    [class*="color-sample"]
) {
    --stariz-structural-control: 1;
}

html body :is(
    .stariz-popup-backdrop-normalized,
    .approval-modal-backdrop,
    .denuncias-modal-backdrop,
    .employee-request-dialog,
    .employee-accrual-dialog,
    .employee-request-delete-dialog,
    .employee-self-qr-modal,
    .employee-timeline-dialog-backdrop,
    .event-bulk-help-overlay,
    .eventos-remunerativos-page__bulk-upload-backdrop,
    .payroll-detail-backdrop,
    .process-completion-dialog,
    .process-management-dialog,
    .process-delete-dialog,
    .vacation-account-dialog,
    .vacation-chart-detail-dialog,
    .breaking-news-backdrop,
    .brand-color-modal-backdrop
) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    background: transparent;
    background-image: none;
}

dialog.stariz-popup-native-normalized::backdrop,
dialog.denuncias-modal-dialog::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
}

html body :is(
    .stariz-popup-normalized,
    .stariz-popup-surface,
    [role="dialog"].brand-color-modal
):not([data-stariz-popup-contract="notification-popover"]) {
    --stariz-glass-surface: var(--panel, #ffffff);
    --stariz-glass-field: var(--field, #f7f8fa);
    background: var(--stariz-popup-surface-bg);
    background-image: none;
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-radius);
    box-shadow: none;
    color: var(--text, #17202c);
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 32px);
    overflow: hidden;
    position: relative;
}

html body .stariz-popup-normalized:not([data-stariz-popup-contract="notification-popover"]) {
    display: flex;
    flex-direction: column;
}

html body .stariz-popup-normalized.stariz-popup--grid {
    width: min(1280px, calc(100vw - 32px));
}

html body .stariz-popup-normalized.stariz-popup--operational {
    width: min(980px, calc(100vw - 32px));
}

html body .stariz-popup-normalized.stariz-popup--informative,
html body .stariz-popup-normalized.stariz-popup--confirmation {
    width: min(780px, calc(100vw - 32px));
}

html body .stariz-popup-normalized :is(
    .stariz-popup-card-block,
    [class*="__card"],
    [class*="detail-block"],
    [class*="request-summary"],
    [class*="__metric"],
    [class*="__event"]
) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: none;
    box-shadow: none;
}

html body .stariz-popup-normalized > :is(
    .stariz-popup-body,
    [class*="__body"],
    [class*="__content"],
    form,
    main
) {
    min-height: 0;
}

html body .stariz-popup-normalized > .stariz-popup-body {
    overflow: auto;
    padding: var(--stariz-popup-space-y) var(--stariz-popup-space-x);
}

html body .stariz-popup-normalized .stariz-popup-card-block {
    background: var(--stariz-popup-card-bg);
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-card-radius);
    color: var(--text, #17202c);
    margin: 0;
    padding: 14px 16px;
}

html body .stariz-popup-normalized .stariz-popup-card-block > :first-child {
    margin-top: 0;
}

html body .stariz-popup-normalized .stariz-popup-card-block > :last-child {
    margin-bottom: 0;
}

html body .stariz-popup-normalized .stariz-popup-card-stack {
    display: grid;
    gap: 12px;
}

html body .employee-timeline-dialog.stariz-popup-normalized :is(
    .employee-timeline-dialog__filters,
    .employee-timeline-dialog__note,
    .employee-timeline-dialog__warning,
    .employee-timeline-dialog__empty,
    .employee-timeline-dialog__event
) {
    background: var(--stariz-popup-card-bg);
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-card-radius);
    box-shadow: none;
    padding: 14px 16px;
}

html body .stariz-popup--grid :is(.table-wrap, [class*="table-wrap"], .stariz-crud-grid, .stariz-data-grid) {
    background: var(--stariz-popup-surface-bg);
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-card-radius);
    box-shadow: none;
    overflow: auto;
}

html body .stariz-popup--grid table {
    margin: 0;
}

html body .stariz-popup-normalized > footer,
html body .stariz-popup-normalized [class*="__footer"],
html body .stariz-popup-normalized [class*="__actions"].stariz-popup-footer {
    align-items: center;
    background: var(--stariz-popup-surface-bg);
    border: 0;
    border-top: var(--stariz-popup-border);
    box-shadow: none;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
    margin: 0;
    padding: 13px var(--stariz-popup-space-x);
}

@media (max-width: 720px) {
    :root {
        --stariz-popup-space-x: 15px;
        --stariz-popup-space-y: 14px;
    }

    html body .stariz-popup-normalized:not([data-stariz-popup-contract="notification-popover"]),
    html body .stariz-popup-normalized[data-stariz-modal-size] {
        border-radius: 12px;
        max-height: calc(100dvh - 16px);
        max-width: calc(100vw - 16px);
        width: calc(100vw - 16px);
    }

    html body .stariz-popup-normalized:not([data-stariz-popup-contract="notification-popover"]) .stariz-popup-header,
    html body .stariz-popup-normalized > header,
    html body .stariz-popup-surface > header {
        min-height: 60px;
        padding: 14px 58px 13px var(--stariz-popup-space-x);
    }

    html body .stariz-popup-normalized > footer,
    html body .stariz-popup-normalized [class*="__footer"],
    html body .stariz-popup-normalized [class*="__actions"].stariz-popup-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    html body .stariz-popup-normalized > footer .stariz-pill-button,
    html body .stariz-popup-normalized [class*="__footer"] .stariz-pill-button {
        width: 100%;
    }
}

html body :is(
    [role="presentation"],
    [data-stariz-modal-layer],
    [data-color-dialog-backdrop],
    [class*="backdrop"],
    [class*="-overlay"]
):has(> :is(.stariz-popup-surface, [role="dialog"], [role="alertdialog"])) {
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
}

dialog.stariz-popup-native-normalized::backdrop,
dialog.denuncias-modal-dialog::backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html body .stariz-popup-normalized[data-stariz-popup-draggable="true"] {
    will-change: auto;
}

html body .stariz-popup-normalized.stariz-popup-drag-positioned {
    bottom: auto;
    left: var(--stariz-popup-left, 8px);
    margin: 0;
    position: fixed;
    right: auto;
    top: var(--stariz-popup-top, 8px);
    transform: none;
    translate: none;
    will-change: auto;
}

html body .stariz-popup-normalized.is-stariz-dragging {
    transition: none;
}

html body .stariz-popup-normalized [data-stariz-popup-drag-handle="true"] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

html body .stariz-popup-normalized.is-stariz-dragging [data-stariz-popup-drag-handle="true"] {
    cursor: grabbing;
}

html body .stariz-popup-normalized [data-stariz-popup-drag-handle="true"] :is(button, a, input, select, textarea) {
    cursor: pointer;
}

html body .stariz-popup-normalized.stariz-popup--grid > .stariz-popup-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

html body .stariz-popup-normalized .stariz-popup-grid-shell,
html body .stariz-popup-normalized [data-stariz-popup-grid-shell] {
    background: var(--stariz-popup-surface-bg);
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-card-radius);
    box-shadow: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

html body .stariz-popup-normalized :is(.stariz-popup-grid-toolbar, [data-stariz-dialog-crud-toolbar]) {
    align-items: center;
    background: var(--stariz-popup-surface-bg);
    border: 0;
    border-bottom: var(--stariz-popup-border);
    border-radius: 0;
    box-shadow: none;
    gap: 12px;
    margin: 0;
    min-height: 64px;
    padding: 13px 14px;
}

html body .stariz-popup-normalized .stariz-popup-grid-table,
html body .stariz-popup-normalized [data-stariz-popup-grid-shell] :is(.table-wrap, [class*="table-wrap"], .stariz-crud-grid, .stariz-data-grid) {
    background: var(--stariz-popup-surface-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    margin: 0;
    min-height: 0;
    overflow: auto;
}

html body .stariz-popup-normalized [data-stariz-popup-grid-shell] table,
html body .stariz-popup-normalized .stariz-popup-grid-table table {
    border: 0;
    margin: 0;
}

html body .stariz-popup-normalized .payroll-detail-summary {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr);
}

html body .stariz-popup-normalized .payroll-detail-summary__stats {
    align-items: center;
    display: flex;
    gap: 28px;
    min-width: max-content;
}

html body .stariz-popup-normalized .payroll-detail-summary__stats > span {
    display: grid;
    gap: 4px;
}

html body .stariz-popup-normalized .payroll-detail-filter-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    min-width: 0;
}

html body .stariz-popup-normalized .payroll-detail-filter-actions label {
    flex: 1 1 360px;
    margin: 0;
    max-width: none;
    min-width: 220px;
}

html body .stariz-popup-normalized .payroll-detail-filter-actions input {
    min-height: 40px;
    width: 100%;
}

html body .stariz-popup-normalized .stariz-popup-field {
    align-content: start;
    align-items: stretch;
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

html body .stariz-popup-normalized .stariz-popup-field > :is(span, label, strong):first-child {
    line-height: 1.25;
}

html body .stariz-popup-normalized .stariz-popup-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box;
    margin: 0;
    min-height: 40px;
    width: 100%;
}

html body .stariz-popup-normalized .stariz-popup-field textarea {
    min-height: 92px;
    resize: vertical;
}

html body .stariz-popup-normalized .stariz-popup-field > small {
    line-height: 1.42;
    margin: 0;
}

html body .employee-accrual-dialog__controls {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px;
}

html body .employee-accrual-dialog__controls.is-individual {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .employee-accrual-dialog__controls .employee-request-dialog__field,
html body .employee-accrual-dialog__selection-summary {
    align-self: stretch;
    height: 100%;
}

html body .employee-accrual-dialog__selection-summary {
    justify-content: flex-start;
    min-height: 0;
    padding: 12px 14px;
}

html body .employee-accrual-dialog__scope-note,
html body .employee-accrual-dialog__confirmation,
html body .employee-accrual-dialog__result {
    margin: 0;
}

@media (max-width: 1100px) {
    html body .employee-accrual-dialog__controls,
    html body .employee-accrual-dialog__controls.is-individual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .stariz-popup-normalized .payroll-detail-summary {
        grid-template-columns: 1fr;
    }

    html body .stariz-popup-normalized .payroll-detail-filter-actions {
        justify-content: stretch;
    }
}

@media (max-width: 680px) {
    html body .employee-accrual-dialog__controls,
    html body .employee-accrual-dialog__controls.is-individual {
        grid-template-columns: 1fr;
    }

    html body .stariz-popup-normalized .payroll-detail-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    html body .stariz-popup-normalized .payroll-detail-filter-actions label,
    html body .stariz-popup-normalized .payroll-detail-filter-actions .stariz-pill-button {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

html body .page :is(
    .stariz-header-actions,
    .rrhh-adn-create-card__context-action,
    .stariz-module-header__actions,
    .mass-ops-page__header-actions,
    [class*="__module-actions"],
    header.stariz-module-header,
    header.page-heading,
    header.mass-ops-page__header
) {
    align-items: center;
}

html body .page :is(
    .stariz-header-action-button,
    .rrhh-adn-create-card__header > .stariz-crud-button,
    .rrhh-adn-create-card__context-action > :is(button, a),
    .stariz-module-header__actions > :is(button, a),
    .mass-ops-page__header-actions > :is(button, a),
    [class*="__module-actions"] > :is(button, a)
):not(.stariz-crud-button):not([data-icon-only="true"]):not(.icon-only):not([class*="icon-button"]):not(.rrhh-adn-create-card__toggle) {
    align-self: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 36px;
    line-height: 1;
    margin-block: 0;
    max-height: 36px;
    min-height: 36px;
    min-width: 0;
    padding-block: 0;
    padding-inline: 14px;
    width: auto;
}

html body .page .rrhh-adn-create-card__header > .stariz-header-actions {
    align-self: stretch;
    padding: 11px 13px 11px 0;
}

html body .stariz-login-submit.stariz-login-primary-action {
    align-items: center;
    border-radius: 12px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    height: 50px;
    justify-items: center;
    min-height: 50px;
    padding: 0 16px;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: .005em;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--login-accent) 14%, transparent);
}

html body .stariz-login-submit.stariz-login-primary-action > svg {
    grid-column: 3;
    grid-row: 1;
    height: 17px;
    margin: 0;
    width: 17px;
}

html body .stariz-login-submit.stariz-login-primary-action > span {
    align-items: center;
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    justify-content: center;
    line-height: 1;
    margin: 0;
    transform: translateY(-.25px);
}

html body .stariz-login-submit.stariz-login-primary-action:hover:not(:disabled) {
    box-shadow: 0 7px 16px color-mix(in srgb, var(--login-accent) 18%, transparent);
    transform: translateY(-1px);
}

html body .stariz-login-submit.stariz-login-primary-action:active:not(:disabled) {
    box-shadow: 0 3px 9px color-mix(in srgb, var(--login-accent) 13%, transparent);
    transform: translateY(0) scale(.995);
}

@media (max-width: 420px) {
    html body .stariz-login-submit.stariz-login-primary-action {
        height: 48px;
        min-height: 48px;
    }
}

html body :is(.stariz-module-page, .page, .hero-shell) .stariz-module-header {
    align-items: center;
}

html body :is(.stariz-module-page, .page, .hero-shell) .stariz-module-header > :is(button, a):not(.stariz-crud-button),
html body :is(.stariz-module-page, .page, .hero-shell) .stariz-module-header > [class*="action"] > :is(button, a):not(.stariz-crud-button),
html body :is(.stariz-module-page, .page, .hero-shell) .stariz-module-header > [class*="scope"] > :is(button, a):not(.stariz-crud-button) {
    align-self: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 36px;
    line-height: 1;
    margin-block: 0;
    max-height: 36px;
    min-height: 36px;
    min-width: 0;
    padding-block: 0;
    padding-inline: 14px;
    width: auto;
}

html body :is(button, a).stariz-header-action-button {
    align-items: center;
    align-self: center;
    border-radius: 9999px;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
    height: 36px;
    justify-content: center;
    line-height: 1;
    margin-block: 0;
    max-height: 36px;
    min-height: 36px;
    min-width: 0;
    padding: 0 14px;
    white-space: nowrap;
    width: auto;
}

html body :is(.stariz-module-page, .hero-shell) :is(
    .stariz-header-actions,
    .rrhh-adn-create-card__context-action,
    .stariz-module-header__actions,
    .mass-ops-page__header-actions,
    [class*="__module-actions"]
) {
    align-items: center;
}

html body :is(.stariz-module-page, .hero-shell) :is(
    .rrhh-adn-create-card__context-action,
    .stariz-module-header__actions,
    .mass-ops-page__header-actions,
    [class*="__module-actions"]
) > :is(button, a):not(.stariz-crud-button):not([data-icon-only="true"]):not(.icon-only):not([class*="icon-button"]),
html body :is(.stariz-module-page, .hero-shell) .mass-ops-page__header-actions > :is(button, a):not(.stariz-crud-button) {
    align-self: center;
    border-radius: 9999px;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    line-height: 1;
    margin-block: 0;
    max-height: 36px;
    min-height: 36px;
    padding: 0 14px;
    width: auto;
}

html body :is(.stariz-data-grid, .receipt-template-page) .stariz-crud-status.stariz-crud-status {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    height: 26.46px;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1.2;
    max-height: 26.46px;
    min-height: 26.46px;
    min-width: 0;
    padding: .3528rem .6615rem;
    white-space: nowrap;
    width: auto;
}

html body :is(
    [role="menu"] [role="menuitem"],
    .stariz-bulk-menu__panel > a,
    .stariz-bulk-menu__panel > button,
    .stariz-bulk-menu__panel .stariz-bulk-menu__option,
    .employee-self-timeline-menu [role="menuitem"]
).stariz-menu-option-normalized {
    align-self: stretch;
    box-sizing: border-box;
    flex: none;
    height: auto;
    line-height: normal;
    max-height: none;
    min-width: 0;
    white-space: normal;
    width: 100%;
}

html body .stariz-bulk-menu__panel {
    box-sizing: border-box;
    max-width: min(400px, calc(100vw - 24px));
    width: min(400px, calc(100vw - 24px));
}

html body .stariz-bulk-menu__panel > :is(a, button),
html body .stariz-bulk-menu__panel .stariz-bulk-menu__option {
    box-sizing: border-box;
    height: auto;
    max-height: none;
    white-space: normal;
    width: 100%;
}

html body .employee-timeline-dialog.stariz-popup-normalized .employee-timeline-dialog__content {
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    height: auto;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    padding: 0;
    width: auto;
}

html body .employee-timeline-dialog.stariz-popup-normalized .employee-timeline-dialog__event {
    background: var(--stariz-popup-card-bg);
    border: var(--stariz-popup-border);
    border-radius: var(--stariz-popup-card-radius);
    box-shadow: none;
}

html body .employee-timeline-dialog.stariz-popup-normalized
.employee-timeline-dialog__content > header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    min-height: 0;
    padding: 0;
}

html body.stariz-app .stariz-popup-normalized :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) {
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

html body.stariz-app .stariz-popup-normalized :is(.stariz-popup-grid-toolbar, [data-stariz-dialog-crud-toolbar]) {
    align-items: center;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    margin: 0;
    min-height: 58px;
    padding: 10px 13px;
    width: 100%;
}

html body.stariz-app .stariz-popup-normalized :is(.stariz-popup-grid-toolbar, [data-stariz-dialog-crud-toolbar]) > * {
    min-width: 0;
}

html body.stariz-app .stariz-popup-normalized .stariz-popup-grid-metrics {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 22px;
    min-width: 0;
}

html body.stariz-app .stariz-popup-normalized .stariz-popup-grid-metrics > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

html body.stariz-app .stariz-popup-normalized .stariz-grid-toolbar__controls,
html body.stariz-app .stariz-popup-normalized [data-stariz-dialog-filter-actions] {
    align-items: center;
    display: flex;
    flex: 1 1 360px;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 260px;
}

html body.stariz-app .stariz-popup-normalized :is(.rrhh-adn-search, .stariz-grid-filter) {
    align-items: center;
    background: var(--pro-soft, var(--field));
    border: 1px solid transparent;
    border-radius: var(--pro-control-radius, 10px);
    display: flex;
    flex: 1 1 320px;
    gap: 7px;
    margin: 0;
    max-width: 480px;
    min-height: 34px;
    min-width: 220px;
    padding: 0 10px;
}

html body.stariz-app .stariz-popup-normalized :is(.rrhh-adn-search, .stariz-grid-filter):focus-within {
    border-color: var(--primary-border, var(--line));
    outline: 3px solid var(--focus-ring, transparent);
    outline-offset: 0;
}

html body.stariz-app .stariz-popup-normalized :is(.rrhh-adn-search, .stariz-grid-filter) input {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    height: 32px;
    margin: 0;
    min-height: 32px;
    min-width: 0;
    outline: 0;
    padding: 0;
    width: auto;
}

html body.stariz-app .stariz-popup-normalized :is(.stariz-popup-grid-table, [data-stariz-popup-grid-shell] .table-wrap, [data-stariz-popup-grid-shell] .stariz-crud-grid) {
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    padding: 0;
    width: 100%;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid {
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    table-layout: auto;
    width: 100%;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid thead th {
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    color: var(--pro-muted, var(--muted));
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    position: sticky;
    top: 0;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 2;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid tbody td {
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pro-border, var(--line)) 72%, transparent);
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    vertical-align: middle;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid tbody tr:last-child td {
    border-bottom: 0;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid tbody tr:hover td,
html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid tbody tr.is-selected td {
    background: var(--pro-hover, color-mix(in srgb, var(--primary) 5%, var(--panel)));
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] :is(.actions, .actions-header, [class*="action-cell"], [class*="action-header"]) {
    text-align: right;
    white-space: nowrap;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] :is(.table-row-actions, [class*="action-row"], [class*="row-actions"]) {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] .stariz-crud-button[data-size="compact"] {
    flex: 0 0 auto;
    height: var(--stariz-crud-grid-height, 34px);
    min-height: var(--stariz-crud-grid-height, 34px);
}

@media (max-width: 760px) {
    html body.stariz-app .stariz-popup-normalized .stariz-grid-toolbar__controls,
    html body.stariz-app .stariz-popup-normalized [data-stariz-dialog-filter-actions] {
        align-items: stretch;
        flex: 1 1 100%;
        flex-wrap: wrap;
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }

    html body.stariz-app .stariz-popup-normalized :is(.rrhh-adn-search, .stariz-grid-filter) {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    /* En un popup, la grilla no crea una segunda tarjeta redondeada. */
    border-radius: 0 !important;
    box-shadow: none;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
> :is(.stariz-popup-grid-toolbar, [data-stariz-dialog-crud-toolbar], [data-stariz-grid-toolbar], .stariz-grid-toolbar, .rrhh-adn-toolbar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    overflow: visible;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) .stariz-global-grid-title {
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 100%;
    margin: 0;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) .stariz-global-grid-title strong {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) .stariz-global-grid-title span {
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
:is(.stariz-grid-toolbar__controls, [data-stariz-dialog-filter-actions], .stariz-dialog-crud-toolbar__actions, .stariz-excel-export-host__actions, .rrhh-adn-toolbar__actions) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.rrhh-adn-search, .stariz-grid-filter) {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 320px;
    width: min(100%, 430px);
    max-width: 480px;
    min-width: 220px;
    min-height: 34px;
    margin: 0;
    padding: 0 10px;
    background: var(--pro-soft);
    border: 1px solid transparent;
    border-radius: var(--pro-control-radius);
    color: var(--pro-muted);
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.rrhh-adn-search, .stariz-grid-filter):focus-within {
    border-color: var(--primary-border);
    outline: 3px solid var(--focus-ring);
    outline-offset: 0;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.rrhh-adn-search, .stariz-grid-filter) input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, [data-stariz-grid-wrapper]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--pro-muted, var(--muted)) 34%, transparent) transparent;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, [data-stariz-grid-wrapper])::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, [data-stariz-grid-wrapper])::-webkit-scrollbar-track {
    background: transparent;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, [data-stariz-grid-wrapper])::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--pro-muted, var(--muted)) 34%, transparent);
    border-radius: 999px;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    background: var(--pro-surface, var(--panel));
    font-size: var(--text-sm);
    line-height: 1.35;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid thead th {
    height: var(--grid-header-height, 34px);
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    background: var(--pro-surface, var(--panel));
    color: var(--pro-muted, var(--muted));
    border: 0;
    border-bottom: 1px solid var(--pro-border, var(--line));
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid tbody td {
    height: var(--grid-row-height, 32px);
    padding: var(--grid-cell-block, 4px) var(--grid-cell-inline, 10px);
    background: var(--pro-surface, var(--panel));
    color: var(--text);
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pro-border, var(--line)) 72%, transparent);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid tbody tr:last-child td {
    border-bottom: 0;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid tbody tr:hover td,
html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) table.stariz-data-grid tbody tr.is-selected td {
    background: var(--pro-hover, var(--surface-hover));
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.actions, .actions-header, [class*="action-cell"], [class*="action-header"]) {
    text-align: right;
    white-space: nowrap;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.table-row-actions, [class*="action-row"], [class*="row-actions"]) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-flow: row nowrap;
    gap: 6px;
    white-space: nowrap;
}

html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
.stariz-crud-button[data-size="compact"] {
    flex: 0 0 auto;
    height: var(--stariz-crud-grid-height, 34px);
    min-height: var(--stariz-crud-grid-height, 34px);
    max-height: var(--stariz-crud-grid-height, 34px);
}

/* POPUP CRUD — Excel alineado con Filtrar/acciones compactas. */
html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-excel-export-button {
    align-self: center !important;
    flex: 0 0 var(--stariz-crud-grid-height, 34px) !important;
    height: var(--stariz-crud-grid-height, 34px) !important;
    max-height: var(--stariz-crud-grid-height, 34px) !important;
    max-width: var(--stariz-crud-grid-height, 34px) !important;
    min-height: var(--stariz-crud-grid-height, 34px) !important;
    min-width: var(--stariz-crud-grid-height, 34px) !important;
    margin: 0 !important;
    width: var(--stariz-crud-grid-height, 34px) !important;
}

/* POPUP DATAGRID — contrato visual STARIZ: sin radios internos y con líneas horizontales. */
html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open])
:is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, [data-stariz-grid-wrapper], [class*="table-wrap"]):has(> table.stariz-data-grid) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) table.stariz-data-grid {
    border-collapse: collapse !important;
    border-radius: 0 !important;
    border-spacing: 0 !important;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) table.stariz-data-grid :is(thead, tbody, tr, th, td) {
    border-radius: 0 !important;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) table.stariz-data-grid thead th {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pro-border, var(--line)) !important;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) table.stariz-data-grid tbody td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--pro-border, var(--line)) 72%, transparent) !important;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) table.stariz-data-grid tbody tr:last-child td {
    border-bottom: 0 !important;
}

@media (max-width: 760px) {
    html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell])
    :is(.stariz-grid-toolbar__controls, [data-stariz-dialog-filter-actions], .stariz-dialog-crud-toolbar__actions, .stariz-excel-export-host__actions, .rrhh-adn-toolbar__actions) {
        flex: 1 1 100%;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    html body.stariz-app [role="dialog"] :is(.stariz-popup-grid-shell, [data-stariz-popup-grid-shell]) :is(.rrhh-adn-search, .stariz-grid-filter) {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] {
    box-sizing: border-box;
    display: block;
    position: fixed;
    width: 208px;
    min-width: 208px;
    max-width: 208px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 8px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .2);
    transform: none;
    z-index: 1205;
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] .employee-request-calendar__header {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 4px;
    width: 100%;
    margin: 0 0 7px;
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] .employee-request-calendar__header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0;
    border-radius: 6px;
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] :is(.employee-request-calendar__weekdays, .stariz-request-datepicker-grid) {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    min-width: 0;
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] .employee-request-calendar__day {
    display: grid;
    align-content: center;
    justify-items: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    padding: 0;
    border-radius: 5px;
    transform: none;
}

html body .stariz-request-datepicker-popover[data-stariz-datepicker-popover] .employee-request-calendar__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
    width: 100%;
}

html body [data-stariz-datepicker-popover][data-stariz-popup-contract="datepicker"]:not(:popover-open) {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

html body [data-stariz-datepicker-popover][data-stariz-popup-contract="datepicker"]:popover-open {
    box-sizing: border-box;
    display: block;
    visibility: visible;
    pointer-events: auto;
    position: fixed;
    inset: auto;
    top: var(--stariz-datepicker-top, 12px);
    left: var(--stariz-datepicker-left, 12px);
    right: auto;
    bottom: auto;
    margin: 0;
    width: 208px;
    min-width: 208px;
    max-width: 208px;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    overflow: visible;
    flex: none;
    flex-direction: initial;
    align-items: initial;
    justify-content: initial;
    transform: none;
    translate: none;
}

html body.stariz-app,
html body.stariz-app :is(button, input, select, textarea) {
    font-family: var(--stariz-font-family);
}

html body.stariz-app .topbar-title-stack strong {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

html body.stariz-app .topbar-title-stack span {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app .topbar-user-copy strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

html body.stariz-app .topbar-user-copy small,
html body.stariz-app .user-avatar span {
    font-size: var(--text-2xs);
    line-height: 1.25;
}

html body.stariz-app .topbar-logout-button,
html body.stariz-app .topbar-search__button,
html body.stariz-app .ako-agent-header-launcher__text {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app .page h1,
html body.stariz-app .stariz-page h1,
html body.stariz-app .stariz-module-header h1,
html body.stariz-app .summary-dashboard-heading h1,
html body.stariz-app .payroll-analytics-title h1,
html body.stariz-app .hr-analytics-title h1,
html body.stariz-app .employee-operations__heading h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -.015em;
}

html body.stariz-app .page > :is(.page-heading, .stariz-module-header) p:not(.eyebrow),
html body.stariz-app .summary-dashboard-heading p:not(.eyebrow),
html body.stariz-app .payroll-analytics-title p:not(.eyebrow),
html body.stariz-app .hr-analytics-title p:not(.eyebrow),
html body.stariz-app .employee-operations__heading p:not(.eyebrow) {
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.45;
    letter-spacing: 0;
}

html body.stariz-app :is(.eyebrow, [class$="__eyebrow"], [class*="-eyebrow"]) {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: .07em;
}

html body.stariz-app .page :is(.section-heading, [class$="__section-heading"]) h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: 0;
}

html body.stariz-app :is(
    .dashboard-quick-access__heading,
    .employee-home__section-heading,
    .employee-home__card-heading,
    .employee-operations__card-title,
    .employee-operations__table-heading,
    .hr-analytics-card-title,
    .payroll-card-title,
    .payroll-chart-card__head,
    .role-access-panel__heading,
    .news-admin-section__heading,
    .news-admin-list__heading,
    .template-panel-heading
) h2,
html body.stariz-app :is(
    .employee-operations__card,
    .employee-operations__table-card,
    .hr-analytics-chart-card,
    .hr-analytics-context-card,
    .payroll-chart-card,
    .payroll-context-card,
    .document-workflow-card,
    .news-card
) h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app :is(
    .employee-operations__card,
    .employee-operations__table-card,
    .hr-analytics-chart-card,
    .hr-analytics-context-card,
    .payroll-chart-card,
    .payroll-context-card,
    .employee-home__calendar,
    .employee-home__communications,
    .employee-home__documents,
    .employee-home__manager,
    .document-workflow-card,
    .news-card,
    .role-access-panel
) p:not(.eyebrow) {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.45;
    letter-spacing: 0;
}

html body.stariz-app .dashboard-quick-access__heading h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app .dashboard-quick-access__heading p {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.4;
}

html body.stariz-app .dashboard-quick-access__link > strong,
html body.stariz-app .dashboard-quick-access__card > strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app .dashboard-quick-access__link > span:not(.dashboard-quick-access__icon),
html body.stariz-app .dashboard-quick-access__card > span:not(.dashboard-quick-access__icon) {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.4;
    letter-spacing: 0;
}

html body.stariz-app .dashboard-quick-access__link > small,
html body.stariz-app .dashboard-quick-access__card > small,
html body.stariz-app .dashboard-quick-access__count {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    line-height: 1.3;
}

html body.stariz-app :is(
    .summary-kpi-card,
    .stariz-indicator-card,
    .employee-operations__kpi,
    .payroll-metric-card,
    .hr-analytics-metrics > article,
    .employee-timeline-kpi,
    .stariz-registration-summary-card
) > :is(span, div > span):not([class*="icon"]) {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: none;
}

html body.stariz-app :is(
    .summary-kpi-card,
    .stariz-indicator-card,
    .employee-operations__kpi,
    .payroll-metric-card,
    .hr-analytics-metrics > article,
    .employee-timeline-kpi,
    .stariz-registration-summary-card
) strong {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -.02em;
}

html body.stariz-app :is(
    .summary-kpi-card,
    .stariz-indicator-card,
    .employee-operations__kpi,
    .payroll-metric-card,
    .hr-analytics-metrics > article,
    .employee-timeline-kpi,
    .stariz-registration-summary-card
) small {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    letter-spacing: 0;
}

html body.stariz-app :is(.employee-self-directory-card__copy, .employee-home__access-card, .employee-home__status-card) h2,
html body.stariz-app .employee-home__access-card strong,
html body.stariz-app .employee-home__status-card strong {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(.employee-self-directory-card__copy, .employee-home__access-card, .employee-home__status-card) p,
html body.stariz-app :is(.employee-home__access-card, .employee-home__status-card) small {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.4;
}

html body.stariz-app :is(
    .hr-analytics-context-card,
    .payroll-context-card,
    .employee-operations__card,
    .employee-operations__table-card,
    .signature-card
) dt {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: .04em;
}

html body.stariz-app :is(
    .hr-analytics-context-card,
    .payroll-context-card,
    .employee-operations__card,
    .employee-operations__table-card,
    .signature-card
) dd {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.35;
}

html body.stariz-app label,
html body.stariz-app :is(.field-label, [class$="__label"], [class*="-label"]) {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(input, select, textarea, .form-control, .stariz-field) {
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app :is(.btn, button.btn, a.btn, .stariz-button, .primary-button, .secondary-button):not(.stariz-crud-button) {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
}

html body.stariz-app :is(.btn.small, button.btn.small, a.btn.small):not(.stariz-crud-button) {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

html body.stariz-app :is(.stariz-data-grid, table) thead th {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: none;
}

html body.stariz-app :is(.stariz-data-grid, table) tbody td {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app :is(.stariz-data-grid, table) :is(td small, .table-meta, [class*="metadata"]) {
    font-size: var(--text-xs);
    line-height: 1.35;
}

html body.stariz-app :is(.stariz-dialog-header__title, [class*="dialog"] h2, [class*="modal"] h2) {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: 0;
}

html body.stariz-app :is(.stariz-popup-surface, [class*="dialog"], [class*="modal"]) p:not(.eyebrow) {
    font-size: var(--text-sm);
    line-height: 1.45;
}

html body.stariz-app :is(
    .breaking-news-dialog__eyebrow,
    .news-card__meta,
    .news-card footer,
    .digital-folder-heading__metadata,
    .template-status,
    .agente-ia-chat__identity span:not(.agente-ia-chat__symbol),
    .notification-bell__count,
    .notification-bell__time,
    .employee-timeline-kpi small,
    .stariz-registration-summary-card > span,
    .stariz-registration-summary-card > small
) {
    font-size: var(--text-2xs);
    line-height: 1.3;
}

@media (max-width: 720px) {
    html body.stariz-app .page h1,
    html body.stariz-app .stariz-page h1,
    html body.stariz-app .stariz-module-header h1,
    html body.stariz-app .summary-dashboard-heading h1,
    html body.stariz-app .payroll-analytics-title h1,
    html body.stariz-app .hr-analytics-title h1,
    html body.stariz-app .employee-operations__heading h1 {
        font-size: var(--text-xl);
    }

    html body.stariz-app .topbar-title-stack strong {
        font-size: var(--text-sm);
    }
}

html body.stariz-app :is([class*="-card"], [class*="__card"]) small {
    font-size: var(--text-xs);
    line-height: 1.35;
}

html body.stariz-app :is([class*="-card"], [class*="__card"]) :is([class*="meta"], [class*="eyebrow"]) {
    font-size: var(--text-2xs);
    line-height: 1.3;
}

html body.stariz-app .employee-home__access-copy strong,
html body.stariz-app .employee-home__news-copy strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(.employee-home__access-copy, .employee-home__news-copy) small {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.4;
}

html body.stariz-app .employee-home__news-copy time,
html body.stariz-app :is(.employee-home__access-status, .employee-home__document-status) {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app .employee-home__documents-row {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app .employee-home__documents-row--header {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

html body.stariz-app .employee-home__status-card em,
html body.stariz-app .employee-home__manager-copy p {
    font-size: var(--text-xs);
    line-height: 1.4;
}

html body.stariz-app {
    font-family: var(--stariz-font-family);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.45;
}

html body.stariz-app h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -.015em;
}

html body.stariz-app h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: 0;
}

html body.stariz-app h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app small {
    font-size: var(--text-xs);
    line-height: 1.35;
}

html body.stariz-app :is(.nav-home__text, .nav-group__text) {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(.nav-item__text, .nav-child .nav-item__text) {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.35;
}

html body.stariz-app :is(.nav-section-label, .nav-group__flyout-title) {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(
    .stariz-module-header,
    .rrhh-adn-create-card,
    .page-heading,
    .summary-dashboard-heading,
    .employee-related-header,
    .employee-self-page__heading,
    .employee-requests__heading,
    .vacation-account-page__heading,
    .vacation-timeline-page__heading
) > :is(h1, div > h1) {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

html body.stariz-app :is(
    .stariz-global-grid-title,
    .rrhh-adn-toolbar,
    .employee-operations__table-heading,
    .news-admin-list__heading
) strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app :is(
    .stariz-global-grid-title,
    .rrhh-adn-toolbar,
    .employee-operations__table-heading,
    .news-admin-list__heading
) span:not([class*="icon"]) {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app :is([class*="-card"], [class*="__card"]) :is(h2, h3) {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
}

html body.stariz-app :is([class*="-card"], [class*="__card"]) p:not(.eyebrow) {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.45;
}

html body.stariz-app :is([class*="-card"], [class*="__card"]) :is(.eyebrow, [class*="meta"], time) {
    font-size: var(--text-2xs);
    line-height: 1.3;
}

html body.stariz-app :is(button, [role="button"]):not(.stariz-crud-button):not(.stariz-excel-export-button):not(.nav-group__toggle):not(.nav-home) {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
}

html body.stariz-app :is(input, select, textarea) {
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

html body.stariz-app :is(.stariz-login-intro, .pin-recovery-card, .pin-validation-card, .activation-card) h1 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -.015em;
}

html body.stariz-app :is(.stariz-login-field, .pin-recovery-field, .pin-validation-field) > span:first-child {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

@media (max-width: 720px), (pointer: coarse) {
    html body.stariz-app :is(button, input, select, textarea, [role="button"]):not(.stariz-crud-button):not(.stariz-excel-export-button) {
        font-size: var(--text-md);
    }

    html body.stariz-app :is(.nav-home__text, .nav-group__text) {
        font-size: var(--text-md);
    }

    html body.stariz-app .nav-item__text {
        font-size: var(--text-sm);
    }
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] .stariz-global-grid-title strong,
html body.stariz-app .stariz-popup-normalized .stariz-popup-grid-metrics strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] .stariz-global-grid-title span,
html body.stariz-app .stariz-popup-normalized .stariz-popup-grid-metrics small {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid thead th {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

html body.stariz-app .stariz-popup-normalized [data-stariz-popup-grid-shell] table.stariz-data-grid tbody td {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}

:root {
    --stariz-card-icon-box: 36px;
    --stariz-card-icon-size: 18px;
    --stariz-card-icon-radius: 10px;
}

html body.stariz-app :is(
    .dashboard-quick-access__icon,
    .summary-kpi-card__icon,
    .employee-operations__kpi-icon,
    .employee-operations__secondary-icon,
    .employee-operations__card-icon,
    .hr-analytics-metric-icon,
    .hr-analytics-card-icon,
    .payroll-metric-card__icon,
    .payroll-card-icon,
    .employee-home__access-icon,
    .employee-home__status-icon,
    .employee-home__news-icon,
    .employee-requests__kpi-icon,
    .employee-self-indicator__icon,
    .employee-self-info-card__icon,
    .employee-timeline-kpi__icon,
    .process-summary-card__icon
) {
    align-items: center;
    box-sizing: border-box;
    display: inline-grid;
    flex: 0 0 var(--stariz-card-icon-box);
    height: var(--stariz-card-icon-box);
    justify-content: center;
    min-height: var(--stariz-card-icon-box);
    min-width: var(--stariz-card-icon-box);
    width: var(--stariz-card-icon-box);
    border-radius: var(--stariz-card-icon-radius);
}

html body.stariz-app :is(
    .dashboard-quick-access__icon,
    .summary-kpi-card__icon,
    .employee-operations__kpi-icon,
    .employee-operations__secondary-icon,
    .employee-operations__card-icon,
    .hr-analytics-metric-icon,
    .hr-analytics-card-icon,
    .payroll-metric-card__icon,
    .payroll-card-icon,
    .employee-home__access-icon,
    .employee-home__status-icon,
    .employee-home__news-icon,
    .employee-requests__kpi-icon,
    .employee-self-indicator__icon,
    .employee-self-info-card__icon,
    .employee-timeline-kpi__icon,
    .process-summary-card__icon
) > :is(svg, .solar-icon) {
    display: block;
    height: var(--stariz-card-icon-size);
    min-height: var(--stariz-card-icon-size);
    min-width: var(--stariz-card-icon-size);
    width: var(--stariz-card-icon-size);
}

html body.stariz-app .dashboard-quick-access__pin > .solar-icon {
    display: block;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    width: 16px;
}

html body.stariz-app .stariz-crud-button > .solar-icon {
    display: block;
    flex: 0 0 var(--stariz-crud-icon-size, 16px);
    height: var(--stariz-crud-icon-size, 16px);
    min-height: var(--stariz-crud-icon-size, 16px);
    min-width: var(--stariz-crud-icon-size, 16px);
    width: var(--stariz-crud-icon-size, 16px);
}
html body.stariz-app .stariz-crud-button:has(> .solar-icon)::before { display: none; }

html body.stariz-app .stariz-crud-button[data-action="create"],
html body.stariz-app .stariz-crud-button[data-action="add"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M15%2012L12%2012M12%2012L9%2012M12%2012L12%209M12%2012L12%2015%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="back"],
html body.stariz-app .stariz-crud-button[data-action="previous"],
html body.stariz-app .stariz-crud-button[data-action="return"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14.5%205L7.5%2012L14.5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="next"],
html body.stariz-app .stariz-crud-button[data-action="forward"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9.5%205L16.5%2012L9.5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="approve"],
html body.stariz-app .stariz-crud-button[data-action="confirm"],
html body.stariz-app .stariz-crud-button[data-action="apply"],
html body.stariz-app .stariz-crud-button[data-action="select"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012ZM16.0303%208.96967C16.3232%209.26256%2016.3232%209.73744%2016.0303%2010.0303L11.0303%2015.0303C10.7374%2015.3232%2010.2626%2015.3232%209.96967%2015.0303L7.96967%2013.0303C7.67678%2012.7374%207.67678%2012.2626%207.96967%2011.9697C8.26256%2011.6768%208.73744%2011.6768%209.03033%2011.9697L10.5%2013.4393L12.7348%2011.2045L14.9697%208.96967C15.2626%208.67678%2015.7374%208.67678%2016.0303%208.96967Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="toggle"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v10%22%2F%3E%3Cpath%20d%3D%22M18.4%206.6a8%208%200%201%201-12.8%200%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="create-vacation"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%2012C2%208.22876%202%206.34315%203.17157%205.17157C4.34315%204%206.22876%204%2010%204H14C17.7712%204%2019.6569%204%2020.8284%205.17157C22%206.34315%2022%208.22876%2022%2012V14C22%2017.7712%2022%2019.6569%2020.8284%2020.8284C19.6569%2022%2017.7712%2022%2014%2022H10C6.22876%2022%204.34315%2022%203.17157%2020.8284C2%2019.6569%202%2017.7712%202%2014V12Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M7%204V2.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M17%204V2.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M2.5%209H21.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M17%2013H17.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2013H12.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7%2013H7.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M17%2017.0234H17.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2017.0234H12.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7%2017.0234H7.0001%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="process"],
html body.stariz-app .stariz-crud-button[data-action="simulate"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2022H21%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3%2011C3%2010.0572%203%209.58579%203.29289%209.29289C3.58579%209%204.05719%209%205%209C5.94281%209%206.41421%209%206.70711%209.29289C7%209.58579%207%2010.0572%207%2011V17C7%2017.9428%207%2018.4142%206.70711%2018.7071C6.41421%2019%205.94281%2019%205%2019C4.05719%2019%203.58579%2019%203.29289%2018.7071C3%2018.4142%203%2017.9428%203%2017V11Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M10%207C10%206.05719%2010%205.58579%2010.2929%205.29289C10.5858%205%2011.0572%205%2012%205C12.9428%205%2013.4142%205%2013.7071%205.29289C14%205.58579%2014%206.05719%2014%207V17C14%2017.9428%2014%2018.4142%2013.7071%2018.7071C13.4142%2019%2012.9428%2019%2012%2019C11.0572%2019%2010.5858%2019%2010.2929%2018.7071C10%2018.4142%2010%2017.9428%2010%2017V7Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M17%204C17%203.05719%2017%202.58579%2017.2929%202.29289C17.5858%202%2018.0572%202%2019%202C19.9428%202%2020.4142%202%2020.7071%202.29289C21%202.58579%2021%203.05719%2021%204V17C21%2017.9428%2021%2018.4142%2020.7071%2018.7071C20.4142%2019%2019.9428%2019%2019%2019C18.0572%2019%2017.5858%2019%2017.2929%2018.7071C17%2018.4142%2017%2017.9428%2017%2017V4Z%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="timeline"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M12%208V12L14.5%2014.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="cancel"],
html body.stariz-app .stariz-crud-button[data-action="cancel-request"],
html body.stariz-app .stariz-crud-button[data-action="reject"],
html body.stariz-app .stariz-crud-button[data-action="clear"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M14.5%209.50002L9.5%2014.5M9.49998%209.5L14.5%2014.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="close"],
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button),
html body.stariz-app .agente-ia-chat__action[data-role="close"] {
    --stariz-crud-icon: none;
    position: relative;
}

html body.stariz-app .stariz-crud-button[data-action="close"]::before,
html body.stariz-app .stariz-crud-button[data-action="close"]::after,
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button)::before,
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button)::after,
html body.stariz-app .agente-ia-chat__action[data-role="close"]::before,
html body.stariz-app .agente-ia-chat__action[data-role="close"]::after {
    -webkit-mask: none;
    mask: none;
    background: currentColor;
    border: 0;
    border-radius: 999px;
    content: "";
    display: block;
    flex: none;
    height: 1.2px;
    left: 50%;
    margin: 0;
    opacity: 1;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform-origin: 50% 50%;
    width: 9.43px;
}

html body.stariz-app .stariz-crud-button[data-action="close"]::before,
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button)::before,
html body.stariz-app .agente-ia-chat__action[data-role="close"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

html body.stariz-app .stariz-crud-button[data-action="close"]::after,
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button)::after,
html body.stariz-app .agente-ia-chat__action[data-role="close"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

html body.stariz-app .stariz-crud-button[data-action="close"] > :is(svg, .portal-icon, .solar-icon, [class*="icon"]),
html body.stariz-app .stariz-dialog-header__close:not(.stariz-crud-button) > :is(svg, .portal-icon, .solar-icon, [class*="icon"]),
html body.stariz-app .agente-ia-chat__action[data-role="close"] > :is(svg, .portal-icon, .solar-icon, [class*="icon"]) {
    display: none;
}

html body.stariz-app .stariz-crud-button[data-action="save"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.46447%2020.5355C4.92893%2022%207.28595%2022%2012%2022C16.714%2022%2019.0711%2022%2020.5355%2020.5355C22%2019.0711%2022%2016.714%2022%2012C22%2011.6585%2022%2011.4878%2021.9848%2011.3142C21.9142%2010.5049%2021.586%209.71257%2021.0637%209.09034C20.9516%208.95687%2020.828%208.83317%2020.5806%208.58578L15.4142%203.41944C15.1668%203.17206%2015.0431%203.04835%2014.9097%202.93631C14.2874%202.414%2013.4951%202.08581%2012.6858%202.01515C12.5122%202%2012.3415%202%2012%202C7.28595%202%204.92893%202%203.46447%203.46447C2%204.92893%202%207.28595%202%2012C2%2016.714%202%2019.0711%203.46447%2020.5355Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M17%2022V21C17%2019.1144%2017%2018.1716%2016.4142%2017.5858C15.8284%2017%2014.8856%2017%2013%2017H11C9.11438%2017%208.17157%2017%207.58579%2017.5858C7%2018.1716%207%2019.1144%207%2021V22%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M7%208H13%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="print"],
html body.stariz-app .stariz-crud-button[data-action="generate"],
html body.stariz-app .stariz-crud-button[data-action="template"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2010C3%206.22876%203%204.34315%204.17157%203.17157C5.34315%202%207.22876%202%2011%202H13C16.7712%202%2018.6569%202%2019.8284%203.17157C21%204.34315%2021%206.22876%2021%2010V14C21%2017.7712%2021%2019.6569%2019.8284%2020.8284C18.6569%2022%2016.7712%2022%2013%2022H11C7.22876%2022%205.34315%2022%204.17157%2020.8284C3%2019.6569%203%2017.7712%203%2014V10Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M8%2012H16%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%208H16%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%2016H13%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="download"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2015C3%2017.8284%203%2019.2426%203.87868%2020.1213C4.75736%2021%206.17157%2021%209%2021H15C17.8284%2021%2019.2426%2021%2020.1213%2020.1213C21%2019.2426%2021%2017.8284%2021%2015%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%203V16M8%2011.625L12%2016L16%2011.625%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="view"],
html body.stariz-app .stariz-crud-button[data-action="review"],
html body.stariz-app .stariz-crud-button[data-action="monitor"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.27489%2015.2957C2.42496%2014.1915%202%2013.6394%202%2012C2%2010.3606%202.42496%209.80853%203.27489%208.70433C4.97196%206.49956%207.81811%204%2012%204C16.1819%204%2019.028%206.49956%2020.7251%208.70433C21.575%209.80853%2022%2010.3606%2022%2012C22%2013.6394%2021.575%2014.1915%2020.7251%2015.2957C19.028%2017.5004%2016.1819%2020%2012%2020C7.81811%2020%204.97196%2017.5004%203.27489%2015.2957Z%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M15%2012C15%2013.6569%2013.6569%2015%2012%2015C10.3431%2015%209%2013.6569%209%2012C9%2010.3431%2010.3431%209%2012%209C13.6569%209%2015%2010.3431%2015%2012Z%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="unpublish"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%203L21%2021M10.6%2010.7A2%202%200%200%200%2013.3%2013.4M9.9%205.2C10.6%205.1%2011.3%205%2012%205C17%205%2020.2%209.2%2021%2012C20.6%2013.3%2019.8%2014.8%2018.6%2016M6.2%206.2C4.5%207.4%203.4%209.4%203%2012C3.8%2014.8%207%2019%2012%2019C13.2%2019%2014.3%2018.8%2015.3%2018.4%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="search"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.5%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M18.5%2018.5L22%2022%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="edit"],
html body.stariz-app .stariz-crud-button[data-action="sign"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M22%2010.5V12C22%2016.714%2022%2019.0711%2020.5355%2020.5355C19.0711%2022%2016.714%2022%2012%2022C7.28595%2022%204.92893%2022%203.46447%2020.5355C2%2019.0711%202%2016.714%202%2012C2%207.28595%202%204.92893%203.46447%203.46447C4.92893%202%207.28595%202%2012%202H13.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M16.652%203.45506L17.3009%202.80624C18.3759%201.73125%2020.1188%201.73125%2021.1938%202.80624C22.2687%203.88124%2022.2687%205.62415%2021.1938%206.69914L20.5449%207.34795M16.652%203.45506C16.652%203.45506%2016.7331%204.83379%2017.9497%206.05032C19.1662%207.26685%2020.5449%207.34795%2020.5449%207.34795M16.652%203.45506L10.6872%209.41993C10.2832%209.82394%2010.0812%2010.0259%209.90743%2010.2487C9.70249%2010.5114%209.52679%2010.7957%209.38344%2011.0965C9.26191%2011.3515%209.17157%2011.6225%208.99089%2012.1646L8.41242%2013.9M8.41242%2013.9L8.03811%2015.0229C7.9492%2015.2897%208.01862%2015.5837%208.21744%2015.7826C8.41626%2015.9814%208.71035%2016.0508%208.97709%2015.9619L10.1%2015.5876L11.8354%2015.0091C12.3775%2014.8284%2012.6485%2014.7381%2012.9035%2014.6166C13.2043%2014.4732%2013.4886%2014.2975%2013.7513%2014.0926C13.9741%2013.9188%2014.1761%2013.7168%2014.5801%2013.3128L20.5449%207.34795M10.1%2015.5876L8.41242%2013.9%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="refresh"],
html body.stariz-app .stariz-crud-button[data-action="rebuild"],
html body.stariz-app .stariz-crud-button[data-action="update"],
html body.stariz-app .stariz-crud-button[data-action="reset"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.67981%2013L3.67981%2011.3333C3.67981%206.73096%207.4402%203%2012.0789%203C15.1178%203%2017.7799%204.60136%2019.2545%207M2%2011.3333L3.67981%2013L5.35962%2011.3333%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M20.3139%2011V12.6667C20.3139%2017.269%2016.5391%2021%2011.8827%2021C8.83213%2021%206.15995%2019.3986%204.67969%2017M22.0001%2012.6667L20.3139%2011L18.6277%2012.6667%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="settings"],
html body.stariz-app .stariz-crud-button[data-action="configure"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M13.7654%202.15224C13.3978%202%2012.9319%202%2012%202C11.0681%202%2010.6022%202%2010.2346%202.15224C9.74457%202.35523%209.35522%202.74458%209.15223%203.23463C9.05957%203.45834%209.0233%203.7185%209.00911%204.09799C8.98826%204.65568%208.70226%205.17189%208.21894%205.45093C7.73564%205.72996%207.14559%205.71954%206.65219%205.45876C6.31645%205.2813%206.07301%205.18262%205.83294%205.15102C5.30704%205.08178%204.77518%205.22429%204.35436%205.5472C4.03874%205.78938%203.80577%206.1929%203.33983%206.99993C2.87389%207.80697%202.64092%208.21048%202.58899%208.60491C2.51976%209.1308%202.66227%209.66266%202.98518%2010.0835C3.13256%2010.2756%203.3397%2010.437%203.66119%2010.639C4.1338%2010.936%204.43789%2011.4419%204.43786%2012C4.43783%2012.5581%204.13375%2013.0639%203.66118%2013.3608C3.33965%2013.5629%203.13248%2013.7244%202.98508%2013.9165C2.66217%2014.3373%202.51966%2014.8691%202.5889%2015.395C2.64082%2015.7894%202.87379%2016.193%203.33973%2017C3.80568%2017.807%204.03865%2018.2106%204.35426%2018.4527C4.77508%2018.7756%205.30694%2018.9181%205.83284%2018.8489C6.07289%2018.8173%206.31632%2018.7186%206.65204%2018.5412C7.14547%2018.2804%207.73556%2018.27%208.2189%2018.549C8.70224%2018.8281%208.98826%2019.3443%209.00911%2019.9021C9.02331%2020.2815%209.05957%2020.5417%209.15223%2020.7654C9.35522%2021.2554%209.74457%2021.6448%2010.2346%2021.8478C10.6022%2022%2011.0681%2022%2012%2022C12.9319%2022%2013.3978%2022%2013.7654%2021.8478C14.2554%2021.6448%2014.6448%2021.2554%2014.8477%2020.7654C14.9404%2020.5417%2014.9767%2020.2815%2014.9909%2019.902C15.0117%2019.3443%2015.2977%2018.8281%2015.781%2018.549C16.2643%2018.2699%2016.8544%2018.2804%2017.3479%2018.5412C17.6836%2018.7186%2017.927%2018.8172%2018.167%2018.8488C18.6929%2018.9181%2019.2248%2018.7756%2019.6456%2018.4527C19.9612%2018.2105%2020.1942%2017.807%2020.6601%2016.9999C21.1261%2016.1929%2021.3591%2015.7894%2021.411%2015.395C21.4802%2014.8691%2021.3377%2014.3372%2021.0148%2013.9164C20.8674%2013.7243%2020.6602%2013.5628%2020.3387%2013.3608C19.8662%2013.0639%2019.5621%2012.558%2019.5621%2011.9999C19.5621%2011.4418%2019.8662%2010.9361%2020.3387%2010.6392C20.6603%2010.4371%2020.8675%2010.2757%2021.0149%2010.0835C21.3378%209.66273%2021.4803%209.13087%2021.4111%208.60497C21.3592%208.21055%2021.1262%207.80703%2020.6602%207C20.1943%206.19297%2019.9613%205.78945%2019.6457%205.54727C19.2249%205.22436%2018.693%205.08185%2018.1671%205.15109C17.9271%205.18269%2017.6837%205.28136%2017.3479%205.4588C16.8545%205.71959%2016.2644%205.73002%2015.7811%205.45096C15.2977%205.17191%2015.0117%204.65566%2014.9909%204.09794C14.9767%203.71848%2014.9404%203.45833%2014.8477%203.23463C14.6448%202.74458%2014.2554%202.35523%2013.7654%202.15224Z%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="create-permission"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2010.4167C3%207.21907%203%205.62028%203.37752%205.08241C3.75503%204.54454%205.25832%204.02996%208.26491%203.00079L8.83772%202.80472C10.405%202.26824%2011.1886%202%2012%202C12.8114%202%2013.595%202.26824%2015.1623%202.80472L15.7351%203.00079C18.7417%204.02996%2020.245%204.54454%2020.6225%205.08241C21%205.62028%2021%207.21907%2021%2010.4167C21%2010.8996%2021%2011.4234%2021%2011.9914C21%2017.6294%2016.761%2020.3655%2014.1014%2021.5273C13.38%2021.8424%2013.0193%2022%2012%2022C10.9807%2022%2010.62%2021.8424%209.89856%2021.5273C7.23896%2020.3655%203%2017.6294%203%2011.9914C3%2011.4234%203%2010.8996%203%2010.4167Z%22%20stroke%3D%22black%22%2F%3E%0A%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20stroke%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M16%2015C16%2016.1046%2016%2017%2012%2017C8%2017%208%2016.1046%208%2015C8%2013.8954%209.79086%2013%2012%2013C14.2091%2013%2016%2013.8954%2016%2015Z%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="delete"],
html body.stariz-app .stariz-crud-button[data-action="remove"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9.1709%204C9.58273%202.83481%2010.694%202%2012.0002%202C13.3064%202%2014.4177%202.83481%2014.8295%204%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M20.5001%206H3.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M18.8332%208.5L18.3732%2015.3991C18.1962%2018.054%2018.1077%2019.3815%2017.2427%2020.1907C16.3777%2021%2015.0473%2021%2012.3865%2021H11.6132C8.95235%2021%207.62195%2021%206.75694%2020.1907C5.89194%2019.3815%205.80344%2018.054%205.62644%2015.3991L5.1665%208.5%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M9.5%2011L10%2016%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M14.5%2011L14%2016%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-crud-button[data-action="upload"],
html body.stariz-app .stariz-crud-button[data-action="send"],
html body.stariz-app .stariz-crud-button[data-action="resubmit"],
html body.stariz-app .stariz-crud-button[data-action="publish"] {
    --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2015C3%2017.8284%203%2019.2426%203.87868%2020.1213C4.75736%2021%206.17157%2021%209%2021H15C17.8284%2021%2019.2426%2021%2020.1213%2020.1213C21%2019.2426%2021%2017.8284%2021%2015%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M12%2016V3M8%207.375L12%203L16%207.375%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

html body.stariz-app .stariz-excel-export-button {
    --stariz-excel-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23107c41%22%20d%3D%22M21.17%203.25q.33%200%20.59.25q.24.24.24.58v15.84q0%20.34-.24.58q-.26.25-.59.25H7.83q-.33%200-.59-.25q-.24-.24-.24-.58V17H2.83q-.33%200-.59-.24Q2%2016.5%202%2016.17V7.83q0-.33.24-.59Q2.5%207%202.83%207H7V4.08q0-.34.24-.58q.26-.25.59-.25M7%2013.06l1.18%202.22h1.79L8%2012.06l1.93-3.17H8.22L7.13%2010.9l-.04.06l-.03.07q-.26-.53-.56-1.07q-.25-.53-.53-1.07H4.16l1.89%203.19L4%2015.28h1.78m8.1%204.22V17H8.25v2.5m5.63-3.75v-3.12H12v3.12m1.88-4.37V8.25H12v3.13M13.88%207V4.5H8.25V7m12.5%2012.5V17h-5.62v2.5m5.62-3.75v-3.12h-5.62v3.12m5.62-4.37V8.25h-5.62v3.13M20.75%207V4.5h-5.62V7Z%22%20%2F%3E%0A%3C%2Fsvg%3E");
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #107c41;
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 30px;
    font-size: 0;
    gap: 0;
    height: 30px;
    line-height: 1;
    max-height: 30px;
    max-width: 30px;
    min-height: 30px;
    min-width: 30px;
    outline-offset: 3px;
    overflow: visible;
    padding: 0;
    place-items: center;
    position: static;
    text-decoration: none;
    text-indent: 0;
    transform: none;
    white-space: nowrap;
    width: 30px;
}

html body.stariz-app .stariz-excel-export-button::before {
    background: var(--stariz-excel-icon) center / contain no-repeat;
    content: "";
    display: block;
    height: 26px;
    width: 26px;
}

html body.stariz-app .stariz-excel-export-button[data-stariz-excel-inline-icon="true"]::before {
    display: none;
}

html body.stariz-app .stariz-excel-export-button > img.stariz-excel-export-glyph {
    display: block;
    height: 26px;
    max-height: 26px;
    max-width: 26px;
    object-fit: contain;
    width: 26px;
}

html body.stariz-app .stariz-excel-export-button > :is(svg, .icon, [class*="icon"]),
html body.stariz-app .stariz-excel-export-button > span:not(.stariz-excel-export-spinner) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

html body.stariz-app .stariz-excel-export-button[data-stariz-excel-busy="true"]::before {
    display: none;
}

html body.stariz-app .stariz-excel-export-button:disabled,
html body.stariz-app .stariz-excel-export-button[aria-disabled="true"] {
    cursor: pointer;
    filter: none;
    opacity: 1;
}

html body.stariz-app .stariz-excel-export-button:hover,
html body.stariz-app .stariz-excel-export-button:focus-visible {
    background: transparent;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #107c41;
    transform: none;
}

html body.stariz-app .eventos-remunerativos-page__bulk-delete-dialog.stariz-popup-normalized.stariz-popup--grid {
    max-height: min(820px, calc(100dvh - 32px));
    max-width: 1120px;
    width: min(1120px, calc(100vw - 32px));
}

html body.stariz-app .eventos-remunerativos-page__bulk-delete-dialog.stariz-popup-normalized.stariz-popup--grid > .eventos-remunerativos-page__bulk-delete-body.stariz-popup-body {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 16px 20px;
}

html body.stariz-app .eventos-remunerativos-page__bulk-delete-dialog.stariz-popup-normalized.stariz-popup--grid .eventos-remunerativos-page__bulk-delete-table-wrap {
    background: transparent;
    border: 0;
    border-block: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-height: 430px;
    overflow: auto;
    padding: 0;
}

html body.stariz-app .eventos-remunerativos-page__bulk-delete-dialog.stariz-popup-normalized.stariz-popup--grid .eventos-remunerativos-page__bulk-delete-footer {
    background: var(--panel);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 13px 20px;
}

html body.stariz-app :is(.dashboard-quick-access__icon, .summary-kpi-card__icon, [class*="card-icon"], [class*="kpi-icon"]) .solar-icon {
    fill: none;
}

html body.stariz-app .solar-icon {
    display: block;
    flex: 0 0 auto;
    color: inherit;
    fill: none;
    vertical-align: middle;
}

html body.stariz-app :is(
    [class*="-card__icon"],
    [class*="__card-icon"],
    [class*="-kpi__icon"],
    [class*="__kpi-icon"],
    .portal-config-panel__icon,
    .employee-home__manager-icon,
    .employee-self-document-panel__icon,
    .employee-self-history-option__icon
) {
    align-items: center;
    box-sizing: border-box;
    display: inline-grid;
    flex: 0 0 var(--stariz-card-icon-box);
    height: var(--stariz-card-icon-box);
    justify-content: center;
    min-height: var(--stariz-card-icon-box);
    min-width: var(--stariz-card-icon-box);
    width: var(--stariz-card-icon-box);
    border-radius: var(--stariz-card-icon-radius);
}

html body.stariz-app :is(
    [class*="-card__icon"],
    [class*="__card-icon"],
    [class*="-kpi__icon"],
    [class*="__kpi-icon"],
    .portal-config-panel__icon,
    .employee-home__manager-icon,
    .employee-self-document-panel__icon,
    .employee-self-history-option__icon
) > .solar-icon {
    height: var(--stariz-card-icon-size);
    min-height: var(--stariz-card-icon-size);
    min-width: var(--stariz-card-icon-size);
    width: var(--stariz-card-icon-size);
}

html body.stariz-app .rrhh-adn-search__icon > .solar-icon,
html body.stariz-app .stariz-grid-filter .rrhh-adn-search__icon > .solar-icon {
    height: var(--icon-sm);
    width: var(--icon-sm);
}

html body.stariz-app :is(.rrhh-adn-page-button, .rrhh-adn-search__clear) > .solar-icon {
    height: var(--icon-sm);
    width: var(--icon-sm);
}

html body.stariz-app .stariz-crud-button {
    --stariz-crud-icon-size: var(--icon-sm);
    gap: var(--stariz-crud-gap);
}

:root {
    color-scheme: light;
    --stariz-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    
    --text-2xs: 0.6875rem; 
    --text-xs: 0.75rem;   
    --text-sm: 0.8125rem; 
    --text-md: 0.875rem;  
    --text-lg: 1rem;      
    --text-xl: 1.125rem;  
    --text-2xl: 1.375rem; 
    --text-3xl: 1.5rem;   
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
    --icon-xl: 24px;
    --icon-2xl: 28px;
    --bg: #f8fafc;
    --panel: #ffffff;
    --field: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --primary: #111827;
    --secondary: #475569;
    --tertiary: #94a3b8;
    --primary-dark: #0f172a;
    --primary-contrast: #ffffff;
    --secondary-contrast: #ffffff;
    --tertiary-contrast: #111827;
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --info: #2563eb;
    --line-width: 1px;
    --table-head: color-mix(in srgb, var(--bg) 55%, var(--panel));
    --topbar-bg: var(--panel);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--muted);
    --topbar-border: var(--line);
    --sidebar-bg: var(--panel);
    --sidebar-text: var(--text);
    --sidebar-text-muted: var(--muted);
    
    --sidebar-hover-surface: color-mix(in srgb, var(--primary) 10%, var(--sidebar-bg));
    --sidebar-open-surface: color-mix(in srgb, var(--primary) 14%, var(--sidebar-bg));
    --sidebar-active-surface: color-mix(in srgb, var(--primary) 26%, var(--sidebar-bg));
    --quick-access-icon-color: var(--primary);
    --ako-icon-color: var(--primary);
    --ako-icon-contrast: var(--primary-contrast);
    --radius: 10px;
    --radius-sm: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --control-height: 36px;
    --form-row-gap: 16px;
    --form-column-gap: 12px;
    --form-section-gap: 24px;
    --grid-row-height: 32px;
    --grid-header-height: 34px;
    --grid-cell-inline: 10px;
    --grid-cell-block: 4px;

    --content-max: 1440px;
    --content-inline: clamp(14px, 1.35vw, 20px);
    --stariz-crud-content-gutter-extra: 10px;
    --stariz-crud-content-gutter: calc(var(--content-inline) + var(--stariz-crud-content-gutter-extra));
    --content-gap: 16px;
    --surface-hover: color-mix(in srgb, var(--text) 4%, var(--panel));
    --surface-soft: color-mix(in srgb, var(--bg) 54%, var(--panel));
    --primary-soft: color-mix(in srgb, var(--primary) 9%, var(--panel));
    --primary-border: color-mix(in srgb, var(--primary) 24%, var(--line));
    --secondary-soft: color-mix(in srgb, var(--secondary) 9%, var(--panel));
    --tertiary-soft: color-mix(in srgb, var(--tertiary) 13%, var(--panel));
    --focus-ring: color-mix(in srgb, var(--primary) 22%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--muted) 55%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 78%, transparent);
    --scrollbar-track: transparent;
    --alert-danger-bg: color-mix(in srgb, var(--danger) 8%, var(--panel));
    --chart-1: var(--primary);
    --chart-2: var(--secondary);
    --chart-3: var(--tertiary);
    --chart-4: color-mix(in srgb, var(--primary) 58%, var(--secondary));
    --chart-5: color-mix(in srgb, var(--secondary) 55%, var(--tertiary));
    --chart-6: var(--danger);
    --chart-7: var(--muted);
    --chart-8: color-mix(in srgb, var(--tertiary) 52%, var(--primary));
    --chart-9: var(--warning);
    --chart-10: color-mix(in srgb, var(--primary) 72%, var(--tertiary));

    
    --surface: var(--panel);
    --surface-color: var(--panel);
    --surface-raised: color-mix(in srgb, var(--panel) 96%, var(--bg));
    --border-color: var(--line);
    --border-strong: color-mix(in srgb, var(--text) 22%, var(--line));
    --text-color: var(--text);
    --text-soft: color-mix(in srgb, var(--text) 82%, var(--muted));
    --text-muted: var(--muted);
    --muted-text: var(--muted);
    --accent: var(--primary);
    --soft: var(--surface-soft);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --radius-md: var(--radius);
    --login-panel: var(--panel);

    --ui-surface: var(--panel);
    --ui-border: var(--line);
    --ui-border-strong: var(--border-strong);
    --ui-text-soft: var(--muted);
    --ui-primary-soft: var(--primary-soft);
    --ui-primary-border: var(--primary-border);
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);

    --stariz-glass-surface: color-mix(in srgb, var(--panel) 96%, transparent);
    --stariz-glass-field: color-mix(in srgb, var(--field) 97%, transparent);
    --stariz-glass-primary: color-mix(in srgb, var(--primary) 12%, var(--panel));
    --stariz-glass-tertiary: color-mix(in srgb, var(--tertiary) 14%, var(--panel));
    --stariz-shell-surface: var(--panel);
    --stariz-shell-border: var(--line);
    --stariz-card-background: var(--panel);
    --stariz-card-border: var(--line);

    --portal-ink: var(--text);
    --portal-ink-muted: var(--muted);
    --portal-ink-subtle: color-mix(in srgb, var(--muted) 72%, transparent);
    --stariz-brand-default: #5BA8FF;
    --stariz-brand-default-contrast: #09233F;
    --stariz-login-left-default: color-mix(in srgb, var(--stariz-brand-default) 20%, #0f172a);
    --stariz-login-left-default-contrast: #ffffff;
    --login-showcase-bg: var(--stariz-login-left-default);
    --login-showcase-contrast: var(--stariz-login-left-default-contrast);
}

.stariz-grid-selection-column {
    width: 42px;
    min-width: 42px;
    text-align: center;
}

.stariz-grid-selection-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-height: 32px;
    padding-inline: var(--space-2, 8px);
    color: var(--text-muted, #75685e);
    font-size: var(--font-size-sm, 12px);
    white-space: nowrap;
}

.stariz-grid-selection-summary strong {
    color: var(--text-main, #2f2118);
    font-variant-numeric: tabular-nums;
}

.stariz-grid-selection-summary button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--primary, #b65309);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 2px 4px;
}

.stariz-grid-selection-summary button:hover,
.stariz-grid-selection-summary button:focus-visible {
    text-decoration: underline;
}

.stariz-grid-selection-column input[type="checkbox"] {
    cursor: pointer;
}

.stariz-grid-selection-column input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.stariz-excel-export-button {
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    min-inline-size: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-main, #2f2118);
    cursor: pointer;
}

.stariz-excel-export-button:hover,
.stariz-excel-export-button:focus-visible {
    background: color-mix(in srgb, var(--primary, #b65309) 10%, transparent);
    outline: none;
}

.stariz-excel-export-button:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #b65309) 35%, transparent);
}

.stariz-excel-export-button:disabled {
    cursor: pointer;
    filter: none;
    opacity: 1;
}

.stariz-excel-export-glyph {
    display: block;
    inline-size: 24px;
    block-size: 24px;
    object-fit: contain;
}

.stariz-excel-export-spinner {
    inline-size: 17px;
    block-size: 17px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: stariz-spin .7s linear infinite;
}

@keyframes stariz-spin {
    to { transform: rotate(1turn); }
}

.stariz-grid-selection-column input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.stariz-data-grid tbody tr[aria-selected="true"] > td {
    background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}

.rrhh-adn-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
    .rrhh-adn-pager {
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --panel: #111827;
    --field: #172033;
    --text: #f3f4f6;
    --muted: #9ca3af;
    --table-head: color-mix(in srgb, var(--field) 70%, var(--panel));
    --surface-hover: color-mix(in srgb, var(--text) 7%, var(--panel));
    --surface-soft: color-mix(in srgb, var(--field) 55%, var(--panel));
    --primary-soft: color-mix(in srgb, var(--primary) 14%, var(--panel));
    --primary-border: color-mix(in srgb, var(--primary) 34%, var(--line));
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--text-lg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--stariz-font-family);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.45;
    transition: background-color .18s ease, color .18s ease;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; }

:is(td, th, .kpi-card, .metric-value, .metric-list, .rrhh-adn-pager, .stariz-crud-status, time) {
    font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
    :is(button, [role="button"], input, select, textarea, .primary-button, .secondary-button):not(.stariz-crud-button) {
        min-height: 40px;
    }
}

html, body, * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; background-clip: content-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--text); margin: 0; }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: -.015em; }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.25; }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.3; }
h4, h5, h6 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
p { margin: 0; }
small, .muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero-shell { background: transparent; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.hero-card, .page-card, .auth-card, .metric-card, .portal-config-panel, .portal-preview-card, .asset-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.page-card { padding: 18px; }
.page-heading, .section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
}
.page-heading p, .section-heading p { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; margin-top: 3px; }
.eyebrow { color: var(--muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 4px; }

label { display: grid; gap: 6px; color: color-mix(in srgb, var(--text) 74%, var(--muted)); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; }
input, select, textarea:not([data-agente-ia-composer]), .form-control {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: 8px 11px;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: none;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
textarea:not([data-agente-ia-composer]) { min-height: 96px; resize: vertical; }
input::placeholder, textarea:not([data-agente-ia-composer])::placeholder { color: color-mix(in srgb, var(--muted) 76%, transparent); opacity: 1; }
input:hover, select:hover, textarea:not([data-agente-ia-composer]):hover, .form-control:hover { border-color: color-mix(in srgb, var(--text) 18%, var(--line)); }
input:focus, select:focus, textarea:not([data-agente-ia-composer]):focus, .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
input:disabled, select:disabled, textarea:not([data-agente-ia-composer]):disabled { cursor: not-allowed; opacity: .58; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; min-height: 15px; padding: 0; accent-color: var(--primary); }

.btn, button.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}
.btn:hover:not(:disabled), button.btn:hover:not(:disabled), a.btn:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--text) 18%, var(--line)); }
.btn:focus-visible, button.btn:focus-visible, a.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn:disabled, button.btn:disabled { opacity: .45; cursor: default; }
.btn.primary, button.btn.primary, a.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn.primary:hover:not(:disabled), button.btn.primary:hover:not(:disabled), a.btn.primary:hover { filter: brightness(.94); }
.btn.secondary, button.btn.secondary, a.btn.secondary { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-contrast); }
.btn.tertiary, button.btn.tertiary, a.btn.tertiary { background: var(--tertiary); border-color: var(--tertiary); color: var(--tertiary-contrast); }
.btn.ghost, button.btn.ghost, a.btn.ghost { background: var(--panel); border-color: var(--line); color: var(--text); }
.btn.danger, button.btn.danger, a.btn.danger { background: color-mix(in srgb, var(--danger) 8%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); color: var(--danger); }
.btn.small, button.btn.small, a.btn.small { min-height: 29px; padding: 5px 9px; font-size: var(--text-xs); }

.stariz-icon-action {
    align-items: center;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    transform: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}

.stariz-icon-action:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.stariz-icon-action:disabled,
.stariz-icon-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .45;
}

html body.stariz-app input.stariz-file-input-hidden[type="file"] {
    appearance: none;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    max-height: 1px;
    max-width: 1px;
    margin: -1px;
    min-height: 1px;
    min-width: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.stariz-stepper-button {
    appearance: none;
    border: 0;
    box-shadow: none;
    font: inherit;
    transform: none;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

.stariz-stepper-button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.stariz-stepper-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.stariz-crud-button {
    --stariz-crud-icon: none;
    align-items: center;
    appearance: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: none;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    gap: var(--stariz-crud-gap);
    height: var(--stariz-crud-form-height);
    justify-content: center;
    line-height: 1;
    max-height: var(--stariz-crud-form-height);
    min-height: var(--stariz-crud-form-height);
    min-width: 0;
    overflow: visible;
    padding: 0 var(--space-3);
    position: relative;
    text-decoration: none;
    transform: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
    white-space: nowrap;
}

.stariz-crud-button::before {
    background: currentColor;
    content: "";
    display: block;
    flex: 0 0 var(--stariz-crud-icon-size);
    height: var(--stariz-crud-icon-size);
    margin: 0;
    -webkit-mask: var(--stariz-crud-icon) center / contain no-repeat;
    mask: var(--stariz-crud-icon) center / contain no-repeat;
    transform: none;
    width: var(--stariz-crud-icon-size);
}

.stariz-crud-button:not([data-action])::before {
    display: none;
}

.stariz-crud-button > svg,
.stariz-crud-button > .portal-icon,
.stariz-crud-button > .solar-icon,
.stariz-crud-button > [class*="icon"] {
    display: none;
    flex: 0 0 var(--stariz-crud-icon-size);
    height: var(--stariz-crud-icon-size);
    margin: 0;
    min-height: var(--stariz-crud-icon-size);
    min-width: var(--stariz-crud-icon-size);
    transform: none;
    width: var(--stariz-crud-icon-size);
}

.stariz-crud-button[data-action] > :is(svg, .portal-icon, .solar-icon, [class*="icon"]) {
    margin: 0;
    transform: none;
}

.stariz-crud-button:has(> :is(svg, .portal-icon, .solar-icon, [class*="icon"]))::before {
    display: none;
}

.stariz-crud-button[data-action="close"] > :is(svg, .portal-icon, .solar-icon, [class*="icon"]) {
    display: none;
}

.stariz-crud-button:hover {
    background: color-mix(in srgb, var(--secondary) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--secondary) 58%, var(--line));
    color: var(--secondary);
}

.stariz-crud-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.stariz-crud-button:disabled,
.stariz-crud-button[aria-disabled="true"] {
    cursor: pointer;
    filter: none;
    opacity: 1;
}

.stariz-crud-button[data-size="compact"] {
    font-size: var(--text-xs);
    flex-basis: auto;
    height: var(--stariz-crud-grid-height);
    max-height: var(--stariz-crud-grid-height);
    min-height: var(--stariz-crud-grid-height);
    min-width: 0;
    padding: 0 var(--space-2);
    width: auto;
}

.stariz-crud-button[data-icon-only="true"] {
    font-size: 0;
    gap: 0;
    flex-basis: var(--stariz-crud-icon-only-size);
    height: var(--stariz-crud-icon-only-size);
    max-height: var(--stariz-crud-icon-only-size);
    min-height: var(--stariz-crud-icon-only-size);
    min-width: var(--stariz-crud-icon-only-size);
    padding: 0;
    width: var(--stariz-crud-icon-only-size);
}

.stariz-crud-button[data-icon-only="true"]::before {
    display: block;
}

.stariz-crud-button[data-action="close"][data-icon-only="true"] {
    width: var(--stariz-crud-icon-only-size);
    height: var(--stariz-crud-icon-only-size);
    max-height: var(--stariz-crud-icon-only-size);
    min-width: var(--stariz-crud-icon-only-size);
    min-height: var(--stariz-crud-icon-only-size);
    padding: 0;
    background: transparent;
    border-radius: 5px;
}

.stariz-crud-button[data-icon-only="true"][data-size="compact"] {
    flex-basis: var(--stariz-crud-icon-only-size);
    height: var(--stariz-crud-icon-only-size);
    max-height: var(--stariz-crud-icon-only-size);
    min-height: var(--stariz-crud-icon-only-size);
    min-width: var(--stariz-crud-icon-only-size);
    padding: 0;
    width: var(--stariz-crud-icon-only-size);
}

.stariz-crud-button[data-action="edit"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="medical-exams"] { --stariz-crud-icon: url("/icons/solar/linear/menu/chart-2.svg"); }
.stariz-crud-button[data-action="allergies"] { --stariz-crud-icon: url("/icons/solar/linear/rrhh/shield-user.svg"); }
.stariz-crud-button[data-action="family"] { --stariz-crud-icon: url("/icons/solar/linear/rrhh/users-group-rounded.svg"); }
.stariz-crud-button[data-action="edit-profile"] { --stariz-crud-icon: url("/icons/solar/linear/crud/pen-new-square.svg"); }
.stariz-crud-button[data-action="configure"],
.stariz-crud-button[data-action="settings"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%1-1%201.74l-.15.09a2%202%200%200%0-.73%202.73l.22.38a2%202%200%200%0%202.73.73l.15-.08a2%202%200%200%1%202%200l.43.25a2%202%200%200%1%201%201.73V20a2%202%200%200%0%202%202h.44a2%202%200%200%0%202-2v-.18a2%202%200%200%1%201-1.73l.43-.25a2%202%200%200%1%202%200l.15.08a2%202%200%200%0%202.73-.73l.22-.38a2%202%200%200%0-.73-2.73l-.15-.09a2%202%200%200%1-1-1.74v-.51a2%202%200%200%1%201-1.74l.15-.09a2%202%200%200%0%20.73-2.73l-.22-.38a2%202%200%200%0-2.73-.73l-.15.08a2%202%200%200%1-2%200l-.43-.25a2%202%200%200%1-1-1.73V4a2%202%200%200%0-2-2Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="delete"],
.stariz-crud-button[data-action="remove"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M8%206V4h8v2%22%2F%3E%3Cpath%20d%3D%22m19%206-1%2014H6L5%206%22%2F%3E%3Cpath%20d%3D%22M10%2011v5M14%2011v5%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="view"],
.stariz-crud-button[data-action="review"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-6%2010-6%2010%206%2010%206-3.5%206-10%206S2%2012%202%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="approve"],
.stariz-crud-button[data-action="confirm"],
.stariz-crud-button[data-action="apply"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="save"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="create"],
.stariz-crud-button[data-action="add"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="create-vacation"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h18M7%203v4M17%203v4M5%205h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2%22%2F%3E%3Cpath%20d%3D%22m8%2015%202%202%205-5%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="create-permission"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2212%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M11%2012h10M17%2012v3M20%2012v2%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="cancel"],
.stariz-crud-button[data-action="cancel-request"],
.stariz-crud-button[data-action="close"],
.stariz-crud-button[data-action="reject"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="back"],
.stariz-crud-button[data-action="previous"],
.stariz-crud-button[data-action="return"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3Cpath%20d%3D%22M9%2012h10%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="next"],
.stariz-crud-button[data-action="forward"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3Cpath%20d%3D%22M5%2012h10%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="search"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="clear"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2015%208-8%206%206-8%208H3v-6Z%22%2F%3E%3Cpath%20d%3D%22m14%2010%203%203%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="refresh"],
.stariz-crud-button[data-action="rebuild"],
.stariz-crud-button[data-action="update"],
.stariz-crud-button[data-action="reset"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%201%200-2.3%205.7%22%2F%3E%3Cpath%20d%3D%22M20%204v7h-7%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="select"] { --stariz-crud-icon: var(--stariz-icon-select); }
.stariz-crud-button[data-action="download"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2021h14%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="print"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V2h12v7%22%2F%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%1-2-2v-5a2%202%200%200%1%202-2h16a2%202%200%200%1%202%202v5a2%202%200%200%1-2%202h-2%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="upload"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021V9%22%2F%3E%3Cpath%20d%3D%22m7%2014%205-5%205%205%22%2F%3E%3Cpath%20d%3D%22M5%203h14%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="process"],
.stariz-crud-button[data-action="simulate"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%205%2011%207-11%207Z%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="activate"],
.stariz-crud-button[data-action="toggle"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v10%22%2F%3E%3Cpath%20d%3D%22M18.4%206.6a8%208%200%201%201-12.8%200%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="deactivate"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v6%22%2F%3E%3Cpath%20d%3D%22M18.4%206.6a8%208%200%201%201-12.8%200%22%2F%3E%3Cpath%20d%3D%22M4%204l16%2016%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="send"],
.stariz-crud-button[data-action="resubmit"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%202-7%2020-4-9-9-4Z%22%2F%3E%3Cpath%20d%3D%22M22%202%2011%2013%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="timeline"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="generate"],
.stariz-crud-button[data-action="template"],
.stariz-crud-button[data-action="document"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h8l4%204v16H6Z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6%22%2F%3E%3Cpath%20d%3D%22M9%2014h6M9%2018h6%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="monitor"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="publish"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3Z%22%2F%3E%3Cpath%20d%3D%22m11.6%2015.9%201.4%205H7l-1.8-6.2%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="unpublish"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%203%2018%2018%22%2F%3E%3Cpath%20d%3D%22M10.6%2010.6a2%202%200%200%200%202.8%22%2F%3E%3Cpath%20d%3D%22M9.9%204.2A10.5%2010.5%200%200%201%2012%204c6.5%200%2010%206%2010%206a18%2018%200%200%201-2.1%202.8M6.6%206.6C3.7%208.5%202%2012%202%2012s3.5%206%2010%206a10%2010%200%200%200%205.4-1.5%22%2F%3E%3C%2Fsvg%3E"); }
.stariz-crud-button[data-action="sign"] { --stariz-crud-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2019%207-7%203%203-7%207-3-3Z%22%2F%3E%3Cpath%20d%3D%22m18%2013-1.5-7.5L2%202l3.5%2014.5L13%2018%22%2F%3E%3Cpath%20d%3D%22m2%202%207.6%207.6%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }

.stariz-crud-button[data-variant="primary"] {
    background: var(--panel);
    border-color: var(--secondary);
    color: var(--secondary);
}

.stariz-crud-button[data-variant="primary"]:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-contrast, var(--primary-contrast));
    filter: none;
}

.stariz-crud-button[data-variant="secondary"] {
    background: color-mix(in srgb, var(--secondary) 7%, var(--panel));
    border-color: var(--secondary);
    color: var(--portal-ink, var(--text));
}

.stariz-crud-button[data-variant="secondary"]:hover {
    background: color-mix(in srgb, var(--secondary) 13%, var(--panel));
    border-color: var(--secondary);
}

.stariz-crud-button[data-variant="danger"] {
    background: var(--panel);
    border-color: var(--danger);
    color: var(--danger);
}

.stariz-crud-button[data-variant="danger"]:hover,
.stariz-crud-button[data-variant="danger"]:focus-visible {
    background: color-mix(in srgb, var(--danger) 10%, var(--panel));
    border-color: var(--danger);
    color: var(--danger);
}

.stariz-crud-button > * {
    color: inherit;
}

.stariz-crud-button[data-action] > :is(span, small, strong):not(.solar-icon):not(.portal-icon) {
    display: inline;
}

/* Los tooltips visuales quedan reservados a los controles deliberadamente iconográficos. */
.stariz-crud-button[data-icon-only="true"][data-action]:not([data-action="close"])::after {
    background: color-mix(in srgb, var(--text) 94%, transparent);
    border-radius: 4px;
    bottom: auto;
    box-shadow: 0 5px 16px color-mix(in srgb, #000 28%, transparent);
    color: var(--panel);
    content: attr(aria-label);
    font-size: 10px;
    font-weight: var(--weight-regular);
    left: 50%;
    line-height: 1.25;
    max-width: 220px;
    min-width: max-content;
    opacity: 0;
    padding: 6px 8px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 7px);
    transform: translate(-50%, -3px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    visibility: hidden;
    white-space: normal;
    z-index: 900;
}

.stariz-crud-button[data-icon-only="true"][data-tooltip]:not([data-action="close"])::after {
    content: attr(data-tooltip);
}

.stariz-crud-button[data-icon-only="true"][data-action]:not([data-action="close"]):is(:hover, :focus-visible) {
    z-index: 901;
}

.stariz-crud-button[data-icon-only="true"][data-action]:not([data-action="close"]):is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.stariz-crud-button[data-icon-only="true"] > :is(span, small, strong):not(.solar-icon):not(.portal-icon) {
    display: none;
}

.page :is(.stariz-grid-toolbar, .rrhh-adn-toolbar, .rrhh-adn-custom-toolbar) {
    grid-template-columns: minmax(240px, 480px) minmax(12px, 1fr) auto;
}

.page :is(.rrhh-adn-toolbar__actions, .stariz-grid-toolbar__actions, .stariz-excel-export-host__actions) {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 7px;
    grid-column: 3;
    justify-content: flex-end;
    justify-self: end;
    margin-left: auto;
    min-width: max-content;
    width: auto;
}

@media (max-width: 720px) {
    .page :is(.rrhh-adn-toolbar__actions, .stariz-grid-toolbar__actions, .stariz-excel-export-host__actions) {
        flex-wrap: wrap;
        grid-column: 1;
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }
}

.alert { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); font-size: var(--text-xs); }
.alert.danger { background: var(--alert-danger-bg); border-color: color-mix(in srgb, var(--danger) 23%, var(--line)); color: var(--danger); }

.table-wrap { min-width: 0; overflow: auto; }
table { width: 100%; min-width: 100%; border-collapse: collapse; border-spacing: 0; font-size: var(--text-sm); line-height: 1.35; }
th, td {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    height: var(--grid-row-height);
    padding: var(--grid-cell-block) var(--grid-cell-inline);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
th {
    background: var(--panel);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    height: var(--grid-header-height);
    letter-spacing: .01em;
    text-transform: none;
}

tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
td .muted, td small, .table-meta { font-size: var(--text-xs); line-height: 1.35; }
.actions, .actions-header { text-align: center; }
.badge, .status-badge, [class*="badge--"], [class*="status--"] { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--text); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; }

.stariz-crud-status {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    width: auto;
}

.stariz-status-light {
    border: 2px solid color-mix(in srgb, currentColor 28%, var(--panel));
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
    display: inline-block;
    height: 10px;
    line-height: 0;
    padding: 0;
    vertical-align: middle;
    width: 10px;
}

.stariz-status-light.is-active {
    background: var(--success);
    color: var(--success);
}

.stariz-status-light.is-inactive {
    background: var(--danger);
    color: var(--danger);
}

.stariz-status-light-cell {
    text-align: center;
}

.theme-switch-container { display: inline-flex; align-items: center; }
.theme-switch { position: relative; display: inline-flex; width: 36px; height: 20px; min-height: 20px; cursor: pointer; }
.theme-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.theme-switch-slider { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, var(--panel)); transition: background-color .18s ease; }
.theme-switch-slider::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); transition: transform .18s ease; }
.theme-switch-input:checked + .theme-switch-slider { background: var(--primary); border-color: var(--primary); }
.theme-switch-input:checked + .theme-switch-slider::after { transform: translateX(16px); }

.stariz-grid-protection-host { position: relative; }
.stariz-grid-protection-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--panel) 92%, transparent); border-radius: inherit; }
.stariz-grid-protection-overlay[hidden] { display: none; }
.stariz-grid-protection-message { max-width: 440px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); text-align: center; }

@media (max-width: 720px) {
    :root { --content-inline: 10px; --content-gap: 12px; }
    .page-heading, .section-heading { flex-direction: column; align-items: stretch; }
    .page-card { padding: 14px; }
    .table-row-actions { gap: 4px; }
    .table-row-actions .btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

html, body { max-width: 100%; overflow-x: hidden; }
body { min-width: 0; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 980px) {
    :root {
        --content-inline: clamp(10px, 2.5vw, 18px);
        --content-gap: 14px;
    }
}

@media (max-width: 560px) {
    :root {
        --content-inline: 10px;
        --content-gap: 12px;
        --control-height: 38px;
    }

    body { font-size: var(--text-md); }
    .page-card { padding: 13px; }
    .btn, button.btn, a.btn { min-height: 36px; }
}

.stariz-app {
    background: var(--bg);
    color: var(--text);
}

.stariz-app .stariz-shell,
.stariz-app .stariz-content,
.stariz-app .stariz-page {
    background-color: var(--bg);
    color: var(--text);
}

.stariz-app :is(
    .stariz-surface,
    .stariz-card,
    .page-card,
    .hero-card,
    .auth-card,
    .metric-card,
    .portal-config-panel,
    .portal-preview-card,
    .asset-card,
    .rrhh-adn-create-card,
    .rrhh-adn-crud-card,
    .stariz-crud-surface,
    .stariz-popup-surface
) {
    background-color: var(--panel);
    border-color: var(--line);
    color: var(--text);
    box-shadow: none;
    text-shadow: none;
}

.stariz-app :is(.stariz-surface--soft, .surface-soft, .empty-state, .loading-state) {
    background-color: var(--surface-soft);
    border-color: var(--line);
    color: var(--text);
}

.stariz-app .stariz-topbar {
    background-color: var(--topbar-bg);
    border-color: var(--topbar-border);
    color: var(--topbar-text);
    box-shadow: none;
    text-shadow: none;
}

.stariz-app .stariz-topbar :is(
    .topbar-menu-toggle,
    .topbar-title-stack,
    .topbar-title-stack strong,
    .topbar-actions,
    .topbar-user-summary,
    .topbar-user-copy strong,
    .topbar-logout-button,
    .theme-switch-container,
    .notification-bell__trigger,
    .user-avatar
) {
    color: var(--topbar-text);
}

.stariz-app .stariz-topbar :is(.topbar-title-stack span, .topbar-user-copy small) {
    color: var(--topbar-text-muted);
}

.stariz-app .stariz-topbar :is(.topbar-context__separator, .topbar-actions__separator) {
    background-color: var(--topbar-border);
}

.stariz-app .topbar-pinned-access__item,
.stariz-app .dashboard-quick-access__icon {
    background: transparent;
    border-color: transparent;
    color: var(--quick-access-icon-color);
    box-shadow: none;
}

.stariz-app .ako-agent-header-launcher,
.stariz-app .ako-agent-header-launcher:hover,
.stariz-app .ako-agent-header-launcher:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--topbar-text);
    box-shadow: none;
}

.stariz-app .ako-agent-header-launcher__icon {
    color: var(--ako-icon-color);
}

.stariz-app :is(.stariz-page, .stariz-popup-surface) :is(
    .page-heading,
    .section-heading,
    .portal-module-title,
    .card-title,
    .field-label,
    .table-title
) {
    color: var(--text);
}

.stariz-app :is(.muted, .eyebrow, .field-help, .card-subtitle, .table-meta) {
    color: var(--muted);
}

.stariz-app :is(
    .stariz-field,
    .form-control,
    .brand-color-control__hex,
    .portal-text-field input
) {
    background-color: var(--field);
    border-color: var(--line);
    color: var(--text);
    box-shadow: none;
}

.stariz-app :is(.stariz-field, .form-control, .brand-color-control__hex, .portal-text-field input):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}

.stariz-app :is(.btn, .stariz-button) {
    background-color: var(--panel);
    border-color: var(--line);
    color: var(--text);
    box-shadow: none;
    transform: none;
}

.stariz-app :is(.btn.primary, .stariz-button--primary) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}

.stariz-app :is(.btn.secondary, .stariz-button--secondary) {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-contrast);
}

.stariz-app :is(.btn.tertiary, .stariz-button--tertiary) {
    background-color: var(--tertiary);
    border-color: var(--tertiary);
    color: var(--tertiary-contrast);
}

.stariz-app :is(.btn.danger, .stariz-button--danger) {
    background-color: color-mix(in srgb, var(--danger) 9%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
    color: var(--danger);
}

.stariz-app :is(.stariz-grid, .stariz-crud-grid, .rrhh-adn-grid) {
    background-color: var(--panel);
    border-color: var(--line);
    color: var(--text);
}

.stariz-app :is(.stariz-grid, .stariz-crud-grid, .rrhh-adn-grid) th {
    background-color: var(--table-head);
    border-color: var(--line);
    color: var(--muted);
}

.stariz-app :is(.stariz-grid, .stariz-crud-grid, .rrhh-adn-grid) td {
    border-color: var(--line);
    color: var(--text);
}

.stariz-app :is(.stariz-grid, .stariz-crud-grid, .rrhh-adn-grid) tbody tr:hover {
    background-color: var(--surface-hover);
}

.stariz-app .portal-personalization-page {
    --studio-bg: var(--bg);
    --studio-surface: var(--panel);
    --studio-surface-soft: var(--surface-soft);
    --studio-field: var(--field);
    --studio-border: var(--line);
    --studio-border-strong: var(--border-strong);
    --studio-text: var(--text);
    --studio-text-soft: var(--text-soft);
    --studio-muted: var(--muted);
    --studio-accent: var(--primary);
    --studio-accent-soft: var(--primary-soft);
    --studio-accent-border: var(--primary-border);
    --studio-radius: 14px;
    --studio-radius-small: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1680px;
    width: 100%;
}

.stariz-app .portal-personalization-page *,
.stariz-app .portal-personalization-page *::before,
.stariz-app .portal-personalization-page *::after {
    box-sizing: border-box;
}

.stariz-app .portal-personalization-page .portal-personalization-form {
    display: grid;
    gap: 14px;
    width: 100%;
}

.stariz-app .portal-personalization-page .portal-personalization-heading {
    align-items: center;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0;
    min-height: 72px;
    padding: 15px 17px;
}

.stariz-app .portal-personalization-page .portal-personalization-heading h1 {
    color: var(--studio-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -.018em;
    line-height: 1.25;
    margin: 0;
}

.stariz-app .portal-personalization-page .portal-personalization-heading .stariz-module-header__description {
    color: var(--studio-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
    margin: 4px 0 0;
}

.stariz-app .portal-personalization-page .portal-personalization-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
}

.stariz-app .portal-personalization-page .portal-save-state,
.stariz-app .portal-personalization-page .portal-preview-pill {
    align-items: center;
    background: var(--studio-surface-soft);
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    color: var(--studio-muted);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    gap: 7px;
    min-height: 31px;
    padding: 0 10px;
    white-space: nowrap;
}

.stariz-app .portal-personalization-page .portal-save-state > span {
    background: currentColor;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.stariz-app .portal-personalization-page .portal-save-state.is-pending,
.stariz-app .portal-personalization-page .portal-preview-pill.is-pending {
    background: color-mix(in srgb, var(--warning) 9%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--warning) 30%, var(--studio-border));
    color: var(--warning);
}

.stariz-app .portal-personalization-page .portal-save-state.is-saving,
.stariz-app .portal-personalization-page .portal-preview-pill.is-saving {
    background: var(--studio-accent-soft);
    border-color: var(--studio-accent-border);
    color: var(--studio-accent);
}

.stariz-app .portal-personalization-page .portal-save-state.is-applied,
.stariz-app .portal-personalization-page .portal-preview-pill.is-applied {
    background: color-mix(in srgb, var(--success) 9%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--success) 30%, var(--studio-border));
    color: var(--success);
}

.stariz-app .portal-personalization-page .portal-save-state.is-error,
.stariz-app .portal-personalization-page .portal-preview-pill.is-error {
    background: color-mix(in srgb, var(--danger) 9%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--studio-border));
    color: var(--danger);
}

.stariz-app .portal-personalization-page .portal-save-button {
    border-radius: var(--studio-radius-small);
    min-height: 38px;
    padding-inline: 15px;
}

.stariz-app .portal-personalization-page .portal-personalization-alert {
    border-radius: var(--studio-radius-small);
    margin: 0;
}

.stariz-app .portal-personalization-page .portal-personalization-alert.is-pending {
    background: color-mix(in srgb, var(--warning) 8%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--warning) 28%, var(--studio-border));
    color: var(--warning);
}

.stariz-app .portal-personalization-page .portal-personalization-alert.is-applied {
    background: color-mix(in srgb, var(--success) 8%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--success) 28%, var(--studio-border));
    color: var(--success);
}

.stariz-app .portal-personalization-page .portal-personalization-loading {
    align-items: center;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
    color: var(--studio-text);
    display: flex;
    gap: 12px;
    min-height: 78px;
    padding: 18px 20px;
}

.stariz-app .portal-personalization-page .portal-personalization-loading__indicator {
    animation: portal-loading-spin .8s linear infinite;
    border: 3px solid var(--studio-border);
    border-radius: 50%;
    border-top-color: var(--studio-accent);
    height: 27px;
    width: 27px;
}

.stariz-app .portal-personalization-page .portal-personalization-loading div {
    display: grid;
    gap: 3px;
}

.stariz-app .portal-personalization-page .portal-personalization-loading strong {
    font-size: var(--text-sm);
}

.stariz-app .portal-personalization-page .portal-personalization-loading small {
    color: var(--studio-muted);
    font-size: var(--text-xs);
}

@keyframes portal-loading-spin {
    to { transform: rotate(360deg); }
}

.stariz-app .portal-personalization-page .brand-studio-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: 176px minmax(0, 1fr);
    min-width: 0;
    width: 100%;
}

.stariz-app .portal-personalization-page .brand-studio-workspace {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(600px, 1fr) minmax(340px, 390px);
    min-width: 0;
}

.stariz-app .portal-personalization-page .brand-studio-workspace:has(.brand-studio-preview-column:not([open])) {
    grid-template-columns: minmax(0, 1fr) 190px;
}

.stariz-app .portal-personalization-page .brand-studio-rail,
.stariz-app .portal-personalization-page .portal-config-panel,
.stariz-app .portal-personalization-page .brand-studio-preview-column {
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
}

.stariz-app .portal-personalization-page .brand-studio-rail {
    --brand-panel-accent: var(--stariz-brand-default);
    --brand-panel-contrast: var(--stariz-brand-default-contrast);
    background: color-mix(in srgb, var(--brand-panel-accent) 16%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--brand-panel-accent) 42%, var(--studio-border));
    display: grid;
    gap: 12px;
    overflow: hidden;
    padding: 0 11px 12px;
    position: sticky;
    top: 6.5rem;
}

.stariz-app .portal-personalization-page .brand-studio-rail.is-company-context {
    --brand-panel-accent: var(--preview-primary, var(--primary));
    --brand-panel-contrast: var(--primary-contrast);
}

.stariz-app .portal-personalization-page .brand-studio-rail__heading {
    background: var(--brand-panel-accent);
    color: var(--brand-panel-contrast);
    display: grid;
    gap: 3px;
    margin: 0 -11px;
    min-height: 94px;
    padding: 16px 14px;
}

.stariz-app .portal-personalization-page .brand-studio-rail__eyebrow {
    color: currentColor;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    opacity: .76;
    text-transform: uppercase;
}

.stariz-app .portal-personalization-page .brand-studio-rail__heading strong {
    color: currentColor;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
}

.stariz-app .portal-personalization-page .brand-studio-rail__heading small {
    color: currentColor;
    font-size: var(--text-2xs);
    line-height: 1.4;
    opacity: .8;
}

.stariz-app .portal-personalization-page .brand-studio-nav {
    display: grid;
    gap: 4px;
}

.stariz-app .portal-personalization-page .brand-studio-nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--studio-text-soft);
    display: grid;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    gap: 8px;
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 37px;
    padding: 7px 8px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.stariz-app .portal-personalization-page .brand-studio-nav a:hover,
.stariz-app .portal-personalization-page .brand-studio-nav a:focus-visible {
    background: color-mix(in srgb, var(--brand-panel-accent) 14%, var(--studio-surface));
    border-color: color-mix(in srgb, var(--brand-panel-accent) 35%, var(--studio-border));
    color: var(--studio-text);
    outline: none;
}

.stariz-app .portal-personalization-page .brand-studio-nav svg {
    color: var(--brand-panel-accent);
}

.stariz-app .portal-personalization-page .brand-palette-summary,
.stariz-app .portal-personalization-page .brand-accessibility-summary {
    background: color-mix(in srgb, var(--studio-surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-panel-accent) 28%, var(--studio-border));
    border-radius: 10px;
    display: grid;
    gap: 9px;
    padding: 10px;
}

.stariz-app .portal-personalization-page .brand-palette-summary__title,
.stariz-app .portal-personalization-page .brand-accessibility-summary__title {
    display: grid;
    gap: 2px;
}

.stariz-app .portal-personalization-page .brand-palette-summary__title strong,
.stariz-app .portal-personalization-page .brand-accessibility-summary__title strong {
    color: var(--studio-text);
    font-size: var(--text-xs);
}

.stariz-app .portal-personalization-page .brand-palette-summary__title small,
.stariz-app .portal-personalization-page .brand-accessibility-summary__title small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .brand-palette-summary__swatches {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(5, 1fr);
}

.stariz-app .portal-personalization-page .brand-palette-summary__swatches span {
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--studio-text) 18%, transparent);
    border-radius: 50%;
    display: block;
    min-width: 0;
}

.stariz-app .portal-personalization-page .brand-accessibility-row {
    align-items: center;
    display: flex;
    font-size: var(--text-2xs);
    justify-content: space-between;
}

.stariz-app .portal-personalization-page .brand-accessibility-row span {
    color: var(--studio-muted);
}

.stariz-app .portal-personalization-page .brand-accessibility-row strong,
.stariz-app .portal-personalization-page .contrast-metric strong {
    border-radius: 999px;
    font-size: var(--text-2xs);
    padding: 3px 7px;
}

.stariz-app .portal-personalization-page .is-valid {
    background: color-mix(in srgb, var(--success) 10%, var(--studio-surface));
    color: var(--success);
}

.stariz-app .portal-personalization-page .is-warning {
    background: color-mix(in srgb, var(--warning) 10%, var(--studio-surface));
    color: var(--warning);
}

.stariz-app .portal-personalization-page .brand-studio-editor {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.stariz-app .portal-personalization-page .portal-config-panel {
    background: var(--studio-surface);
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 17px;
    scroll-margin-top: 7rem;
}

.stariz-app .portal-personalization-page .portal-config-panel__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--studio-border);
    display: grid;
    gap: 11px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding-bottom: 14px;
}

.stariz-app .portal-personalization-page .portal-config-panel__icon {
    align-items: center;
    background: var(--studio-accent-soft);
    border: 1px solid var(--studio-accent-border);
    border-radius: 10px;
    color: var(--studio-accent);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.stariz-app .portal-personalization-page .portal-config-panel__eyebrow {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .09em;
    margin: 0 0 2px;
    text-transform: uppercase;
}

.stariz-app .portal-personalization-page .portal-config-panel__header h2,
.stariz-app .portal-personalization-page .brand-preview-stage__header h2 {
    color: var(--studio-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -.014em;
    margin: 0;
}

.stariz-app .portal-personalization-page .portal-config-panel__header p:last-child,
.stariz-app .portal-personalization-page .brand-preview-stage__header p:last-child {
    color: var(--studio-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
    margin: 3px 0 0;
}

.stariz-app .portal-personalization-page .portal-field-grid,
.stariz-app .portal-personalization-page .color-grid,
.stariz-app .portal-personalization-page .asset-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.stariz-app .portal-personalization-page .portal-field-grid.two-columns,
.stariz-app .portal-personalization-page .color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .color-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .portal-text-field {
    align-content: start;
    display: grid;
    gap: 5px;
}

.stariz-app .portal-personalization-page .portal-text-field > span {
    color: var(--studio-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.stariz-app .portal-personalization-page .portal-text-field > small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    line-height: 1.4;
    min-height: 1.7em;
}

.stariz-app .portal-personalization-page .portal-text-field input {
    min-height: 38px;
}

.stariz-app .portal-personalization-page .portal-config-subsection {
    display: grid;
    gap: 11px;
}

.stariz-app .portal-personalization-page .portal-config-subsection + .portal-config-subsection {
    border-top: 1px solid var(--studio-border);
    padding-top: 16px;
}

.stariz-app .portal-personalization-page .portal-config-subsection__heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.stariz-app .portal-personalization-page .portal-config-subsection__heading > div {
    display: grid;
    gap: 2px;
}

.stariz-app .portal-personalization-page .portal-config-subsection__heading strong {
    color: var(--studio-text);
    font-size: var(--text-xs);
}

.stariz-app .portal-personalization-page .portal-config-subsection__heading small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .portal-config-subsection__heading > span {
    background: var(--studio-surface-soft);
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    color: var(--studio-muted);
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 4px 8px;
}

.stariz-app .portal-personalization-page .brand-color-control {
    --field-color: var(--studio-accent);
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--studio-border);
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 90px;
    padding: 10px 0;
}

.stariz-app .portal-personalization-page .brand-color-control__picker {
    align-items: center;
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.stariz-app .portal-personalization-page .brand-color-control__picker > span {
    background: var(--field-color);
    border: 1px solid color-mix(in srgb, var(--studio-text) 22%, transparent);
    border-radius: 50%;
    display: block;
    height: 36px;
    transition: transform .15s ease, outline-color .15s ease;
    width: 36px;
}

.stariz-app .portal-personalization-page .brand-color-control__picker:hover > span,
.stariz-app .portal-personalization-page .brand-color-control__picker:focus-visible > span {
    outline: 3px solid color-mix(in srgb, var(--field-color) 24%, transparent);
    outline-offset: 2px;
    transform: scale(1.04);
}

.stariz-app .portal-personalization-page .brand-color-control__picker:focus-visible {
    outline: none;
}

.stariz-app .portal-personalization-page .brand-color-control__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.stariz-app .portal-personalization-page .brand-color-control__label {
    color: var(--studio-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.3;
}

.stariz-app .portal-personalization-page .brand-color-control__copy small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    line-height: 1.38;
    min-height: 2.6em;
}

.stariz-app .portal-personalization-page .brand-color-control__controls {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-column: 2;
    grid-template-columns: minmax(0, 118px) 31px;
    min-height: 32px;
}

.stariz-app .portal-personalization-page .brand-color-control__hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    min-height: 32px;
    padding: 6px 9px;
    text-transform: uppercase;
}

.stariz-app .portal-personalization-page .brand-color-control__reset {
    align-items: center;
    background: transparent;
    border: 1px solid var(--studio-border);
    border-radius: 8px;
    color: var(--studio-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-md);
    height: 31px;
    justify-content: center;
    padding: 0;
    width: 31px;
}

.stariz-app .portal-personalization-page .brand-color-control__reset:hover,
.stariz-app .portal-personalization-page .brand-color-control__reset:focus-visible {
    background: var(--studio-accent-soft);
    border-color: var(--studio-accent-border);
    color: var(--studio-accent);
    outline: none;
}

.stariz-app .portal-personalization-page .brand-color-control :disabled {
    cursor: not-allowed;
    opacity: .55;
}

.stariz-app .portal-personalization-page .asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .asset-card {
    background: var(--studio-surface-soft);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-small);
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 12px;
}

.stariz-app .portal-personalization-page .asset-preview {
    align-items: center;
    background: #111827;
    border: 1px solid var(--studio-border);
    border-radius: 9px;
    display: flex;
    height: 88px;
    justify-content: center;
    overflow: hidden;
    padding: 11px;
}

.stariz-app .portal-personalization-page .asset-preview--light {
    background: #f8fafc;
}

.stariz-app .portal-personalization-page .asset-preview--favicon {
    height: 88px;
}

.stariz-app .portal-personalization-page .asset-preview img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.stariz-app .portal-personalization-page .asset-preview span {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .asset-card__heading {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.stariz-app .portal-personalization-page .asset-card__heading > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.stariz-app .portal-personalization-page .asset-card__heading strong {
    color: var(--studio-text);
    font-size: var(--text-xs);
}

.stariz-app .portal-personalization-page .asset-card__heading small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stariz-app .portal-personalization-page .asset-state {
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    color: var(--studio-muted);
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    padding: 3px 6px;
}

.stariz-app .portal-personalization-page .asset-meta {
    display: grid;
    gap: 5px;
    margin: 0;
}

.stariz-app .portal-personalization-page .asset-meta > div {
    align-items: center;
    display: flex;
    font-size: var(--text-2xs);
    gap: 8px;
    justify-content: space-between;
}

.stariz-app .portal-personalization-page .asset-meta dt {
    color: var(--studio-muted);
}

.stariz-app .portal-personalization-page .asset-meta dd {
    color: var(--studio-text-soft);
    margin: 0;
    text-align: right;
}

.stariz-app .portal-personalization-page .asset-upload-control input[type="file"] {
    font-size: var(--text-2xs);
    min-height: 35px;
    padding: 5px;
}

.stariz-app .portal-personalization-page .asset-reset-button {
    justify-self: start;
}

.stariz-app .portal-personalization-page .brand-studio-preview-column {
    background: var(--studio-surface);
    display: grid;
    min-width: 0;
    overflow: hidden;
    position: sticky;
    top: 6.5rem;
}

.stariz-app .portal-personalization-page .brand-studio-preview-column > summary {
    list-style: none;
}

.stariz-app .portal-personalization-page .brand-studio-preview-column > summary::-webkit-details-marker {
    display: none;
}

.stariz-app .portal-personalization-page .brand-preview-stage__header {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 9px;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    min-height: 76px;
    padding: 13px 14px;
}

.stariz-app .portal-personalization-page .brand-preview-stage__chevron {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--studio-muted);
    height: 7px;
    transform: rotate(225deg);
    transition: transform .15s ease;
    width: 7px;
}

.stariz-app .portal-personalization-page .brand-studio-preview-column:not([open]) .brand-preview-stage__chevron {
    transform: rotate(45deg);
}

.stariz-app .portal-personalization-page .brand-studio-preview-column:not([open]) .brand-preview-stage__header {
    grid-template-columns: 16px minmax(0, 1fr);
}

.stariz-app .portal-personalization-page .brand-studio-preview-column:not([open]) .portal-preview-pill,
.stariz-app .portal-personalization-page .brand-studio-preview-column:not([open]) .brand-preview-stage__header p {
    display: none;
}

.stariz-app .portal-personalization-page .brand-preview-stage {
    border-top: 1px solid var(--studio-border);
    display: grid;
    gap: 13px;
    padding: 13px;
}

.stariz-app .portal-personalization-page .portal-simulator {
    display: grid;
    gap: 6px;
}

.stariz-app .portal-personalization-page .portal-simulator__label {
    align-items: center;
    color: var(--studio-muted);
    display: flex;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    justify-content: space-between;
    text-transform: uppercase;
}

.stariz-app .portal-personalization-page .portal-simulator__app {
    border: 1px solid color-mix(in srgb, var(--studio-text) 17%, transparent);
    border-radius: 9px;
    color: var(--preview-text-light);
    font-size: var(--text-2xs);
    overflow: hidden;
}

.stariz-app .portal-personalization-page .portal-simulator--light .portal-simulator__app {
    background: var(--preview-bg-light);
    color: var(--preview-text-light);
}

.stariz-app .portal-personalization-page .portal-simulator--dark .portal-simulator__app {
    background: var(--preview-bg-dark);
    color: var(--preview-text-dark);
}

.stariz-app .portal-personalization-page .portal-simulator__topbar {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) 38% auto;
    min-height: 42px;
    padding: 6px 8px;
}

.stariz-app .portal-personalization-page .portal-simulator--light .portal-simulator__topbar {
    background: var(--preview-topbar-light);
    color: var(--preview-topbar-text-light);
}

.stariz-app .portal-personalization-page .portal-simulator--dark .portal-simulator__topbar {
    background: var(--preview-topbar-dark);
    color: var(--preview-topbar-text-dark);
}

.stariz-app .portal-personalization-page .portal-simulator__brand {
    align-items: center;
    display: flex;
    gap: 5px;
    min-width: 0;
}

.stariz-app .portal-personalization-page .portal-simulator__brand img {
    height: 18px;
    object-fit: contain;
    width: 38px;
}

.stariz-app .portal-personalization-page .portal-simulator__brand > div {
    display: grid;
    min-width: 0;
}

.stariz-app .portal-personalization-page .portal-simulator__brand strong,
.stariz-app .portal-personalization-page .portal-simulator__brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stariz-app .portal-personalization-page .portal-simulator__brand small {
    color: inherit;
    opacity: .7;
}

.stariz-app .portal-personalization-page .portal-simulator__search {
    border: 1px solid currentColor;
    border-radius: 6px;
    opacity: .55;
    overflow: hidden;
    padding: 4px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stariz-app .portal-personalization-page .portal-simulator__tools {
    align-items: center;
    display: flex;
    gap: 4px;
}

.stariz-app .portal-personalization-page .portal-simulator--light .portal-simulator__ako {
    color: var(--preview-ako-light);
}

.stariz-app .portal-personalization-page .portal-simulator--dark .portal-simulator__ako {
    color: var(--preview-ako-dark);
}

.stariz-app .portal-personalization-page .portal-simulator__avatar {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.stariz-app .portal-personalization-page .portal-simulator__body {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 158px;
}

.stariz-app .portal-personalization-page .portal-simulator__menu {
    display: grid;
    gap: 4px;
    padding: 7px 6px;
}

.stariz-app .portal-personalization-page .portal-simulator--light .portal-simulator__menu {
    background: var(--preview-menu-light);
    color: var(--preview-menu-text-light);
}

.stariz-app .portal-personalization-page .portal-simulator--dark .portal-simulator__menu {
    background: var(--preview-menu-dark);
    color: var(--preview-menu-text-dark);
}

.stariz-app .portal-personalization-page .portal-simulator__menu > span {
    align-items: center;
    border-radius: 5px;
    display: flex;
    gap: 3px;
    padding: 4px;
}

.stariz-app .portal-personalization-page .portal-simulator__menu > .is-active {
    background: var(--preview-primary);
    color: var(--preview-primary-contrast);
}

.stariz-app .portal-personalization-page .portal-simulator__content {
    display: grid;
    gap: 6px;
    padding: 7px;
}

.stariz-app .portal-personalization-page .portal-simulator__kpis {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .portal-simulator__kpis > div,
.stariz-app .portal-personalization-page .portal-simulator__table {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 6px;
}

.stariz-app .portal-personalization-page .portal-simulator__kpis > div {
    display: grid;
    gap: 2px;
    padding: 5px;
}

.stariz-app .portal-personalization-page .portal-simulator__kpis strong {
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .portal-simulator__kpis span {
    color: var(--preview-secondary);
}

.stariz-app .portal-personalization-page .portal-simulator__lower {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 72px;
}

.stariz-app .portal-personalization-page .portal-simulator__table {
    display: grid;
    gap: 2px;
    padding: 5px;
}

.stariz-app .portal-personalization-page .portal-simulator__table > div {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, currentColor 11%, transparent);
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px;
    padding-top: 3px;
}

.stariz-app .portal-personalization-page .portal-simulator__table b {
    background: var(--preview-tertiary);
    border-radius: 999px;
    font-size: var(--text-2xs);
    padding: 2px 4px;
}

.stariz-app .portal-personalization-page .portal-simulator__table i {
    font-style: normal;
}

.stariz-app .portal-personalization-page .portal-simulator__buttons {
    align-content: start;
    display: grid;
    gap: 4px;
}

.stariz-app .portal-personalization-page .portal-simulator__buttons button,
.stariz-app .portal-personalization-page .portal-simulator__buttons a {
    border: 0;
    border-radius: 5px;
    font-size: var(--text-2xs);
    padding: 5px 4px;
    text-align: center;
}

.stariz-app .portal-personalization-page .portal-simulator__button--primary {
    background: var(--preview-primary);
    color: var(--preview-primary-contrast);
}

.stariz-app .portal-personalization-page .portal-simulator__button--secondary {
    background: var(--preview-secondary);
    color: var(--secondary-contrast);
}

.stariz-app .portal-personalization-page .portal-simulator__link {
    color: var(--preview-primary);
}

.stariz-app .portal-personalization-page .contrast-dashboard {
    background: var(--studio-surface-soft);
    border: 1px solid var(--studio-border);
    border-radius: 9px;
    display: grid;
    gap: 9px;
    padding: 10px;
}

.stariz-app .portal-personalization-page .contrast-dashboard > header {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.stariz-app .portal-personalization-page .contrast-dashboard > header > div {
    display: grid;
    gap: 1px;
}

.stariz-app .portal-personalization-page .contrast-dashboard > header strong {
    color: var(--studio-text);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .contrast-dashboard > header small,
.stariz-app .portal-personalization-page .contrast-dashboard > header > span {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .contrast-dashboard__grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .contrast-metric {
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px;
}

.stariz-app .portal-personalization-page .contrast-metric > span,
.stariz-app .portal-personalization-page .contrast-metric > small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
}

.stariz-app .portal-personalization-page .contrast-metric > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stariz-app .portal-personalization-page .brand-color-modal-backdrop {
    align-items: center;
    background: transparent;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 1800;
}

.stariz-app .portal-personalization-page .brand-color-modal {
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: 16px;
    color: var(--studio-text);
    display: grid;
    max-height: calc(100dvh - 40px);
    max-width: 720px;
    overflow: auto;
    width: 100%;
}

.stariz-app .portal-personalization-page .brand-color-modal__body {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(250px, .9fr) minmax(260px, 1.1fr);
    padding: 18px;
}

.stariz-app .portal-personalization-page .brand-color-wheel-column,
.stariz-app .portal-personalization-page .brand-color-modal__data {
    display: grid;
    gap: 12px;
}

.stariz-app .portal-personalization-page .brand-color-wheel-column {
    align-content: start;
    justify-items: center;
}

.stariz-app .portal-personalization-page .brand-color-wheel-column > small {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    line-height: 1.45;
    text-align: center;
}

.stariz-app .portal-personalization-page .brand-color-wheel {
    aspect-ratio: 1;
    background: conic-gradient(from 90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
    border: 1px solid var(--studio-border);
    border-radius: 50%;
    cursor: crosshair;
    max-width: 290px;
    position: relative;
    width: 100%;
}

.stariz-app .portal-personalization-page .brand-color-wheel::after {
    background: radial-gradient(circle, transparent 0, rgba(255,255,255,.08) 45%, rgba(0,0,0,.18) 100%);
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.stariz-app .portal-personalization-page .brand-color-wheel:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.stariz-app .portal-personalization-page .brand-color-wheel__pointer {
    background: transparent;
    border: 3px solid #fff;
    border-radius: 50%;
    height: 17px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px;
    z-index: 2;
}

.stariz-app .portal-personalization-page .brand-color-modal__data {
    align-content: start;
}

.stariz-app .portal-personalization-page .brand-color-sample {
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    height: 84px;
}

.stariz-app .portal-personalization-page .brand-color-values {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stariz-app .portal-personalization-page .brand-color-values > div,
.stariz-app .portal-personalization-page .brand-color-values > label,
.stariz-app .portal-personalization-page .brand-color-native-fallback {
    background: var(--studio-surface-soft);
    border: 1px solid var(--studio-border);
    border-radius: 9px;
    display: grid;
    gap: 4px;
    padding: 9px;
}

.stariz-app .portal-personalization-page .brand-color-values span,
.stariz-app .portal-personalization-page .brand-color-native-fallback > span {
    color: var(--studio-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
}

.stariz-app .portal-personalization-page .brand-color-values strong,
.stariz-app .portal-personalization-page .brand-color-values input {
    color: var(--studio-text);
    font-size: var(--text-xs);
}

.stariz-app .portal-personalization-page .brand-color-values input {
    min-height: 31px;
}

.stariz-app .portal-personalization-page .brand-color-native-fallback {
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: center;
}

.stariz-app .portal-personalization-page .brand-color-native-fallback input[type="color"] {
    border: 0;
    border-radius: 8px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    width: 52px;
}

.stariz-app .portal-personalization-page .brand-color-modal__note {
    background: var(--studio-accent-soft);
    border: 1px solid var(--studio-accent-border);
    border-radius: 9px;
    color: var(--studio-text-soft);
    font-size: var(--text-2xs);
    line-height: 1.45;
    margin: 0;
    padding: 10px;
}

.stariz-app .portal-personalization-page .brand-color-modal__footer {
    border-top: 1px solid var(--studio-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 13px 18px;
}

@media (max-width: 1510px) {
    .stariz-app .portal-personalization-page .brand-studio-workspace {
        grid-template-columns: minmax(560px, 1fr) minmax(320px, 350px);
    }

    .stariz-app .portal-personalization-page .color-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stariz-app .portal-personalization-page .asset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .stariz-app .portal-personalization-page .brand-studio-layout {
        grid-template-columns: 1fr;
    }

    .stariz-app .portal-personalization-page .brand-studio-rail {
        grid-template-columns: minmax(150px, .7fr) minmax(420px, 2fr) minmax(150px, .7fr) minmax(150px, .7fr);
        padding: 0 10px 10px;
        position: static;
    }

    .stariz-app .portal-personalization-page .brand-studio-rail__heading {
        margin: 0 0 0 -10px;
        min-height: 100%;
    }

    .stariz-app .portal-personalization-page .brand-studio-nav {
        align-content: center;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .stariz-app .portal-personalization-page .brand-studio-nav a {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .stariz-app .portal-personalization-page .brand-palette-summary,
.stariz-app .portal-personalization-page .brand-accessibility-summary {
        align-self: center;
    }
}

@media (max-width: 1080px) {
    .stariz-app .portal-personalization-page .brand-studio-workspace,
.stariz-app .portal-personalization-page .brand-studio-workspace:has(.brand-studio-preview-column:not([open])) {
        grid-template-columns: 1fr;
    }

    .stariz-app .portal-personalization-page .brand-studio-preview-column {
        grid-row: 1;
        position: static;
    }

    .stariz-app .portal-personalization-page .brand-preview-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stariz-app .portal-personalization-page .contrast-dashboard {
        grid-column: 1 / -1;
    }

    .stariz-app .portal-personalization-page .brand-studio-rail {
        grid-template-columns: 1fr;
    }

    .stariz-app .portal-personalization-page .brand-studio-rail__heading {
        margin: 0 -10px;
    }

    .stariz-app .portal-personalization-page .brand-studio-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .stariz-app .portal-personalization-page .brand-palette-summary,
.stariz-app .portal-personalization-page .brand-accessibility-summary {
        display: none;
    }
}

@media (max-width: 760px) {
    .stariz-app .portal-personalization-page .portal-personalization-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stariz-app .portal-personalization-page .portal-personalization-actions {
        justify-content: stretch;
        width: 100%;
    }

    .stariz-app .portal-personalization-page .portal-save-button {
        flex: 1 1 auto;
    }

    .stariz-app .portal-personalization-page .brand-studio-nav,
.stariz-app .portal-personalization-page .portal-field-grid.two-columns,
.stariz-app .portal-personalization-page .color-grid,
.stariz-app .portal-personalization-page .color-grid--three,
.stariz-app .portal-personalization-page .asset-grid,
.stariz-app .portal-personalization-page .brand-preview-stage,
.stariz-app .portal-personalization-page .contrast-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .stariz-app .portal-personalization-page .brand-studio-nav a {
        min-height: 34px;
    }

    .stariz-app .portal-personalization-page .portal-config-panel {
        padding: 14px;
    }

    .stariz-app .portal-personalization-page .brand-color-control {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .stariz-app .portal-personalization-page .brand-color-control__picker {
        height: 36px;
        width: 36px;
    }

    .stariz-app .portal-personalization-page .brand-color-control__picker > span {
        height: 32px;
        width: 32px;
    }

    .stariz-app .portal-personalization-page .brand-color-control__controls {
        grid-template-columns: minmax(0, 1fr) 31px;
    }

    .stariz-app .portal-personalization-page .brand-color-modal__body {
        grid-template-columns: 1fr;
    }

    .stariz-app .portal-personalization-page .brand-color-wheel {
        max-width: 250px;
    }

    .stariz-app .portal-personalization-page .brand-color-modal__footer {
        flex-wrap: wrap;
    }
}

/* Contrato único para conjuntos mini CRUD. La ubicación al final de la hoja
   evita que generaciones visuales anteriores redefinan su geometría. */
.stariz-mini-crud-group {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-flow: row nowrap;
    gap: var(--stariz-crud-gap);
    justify-content: flex-end;
    line-height: 1;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.stariz-mini-crud-group > :is(button, a, label, .btn, .stariz-crud-button) {
    flex: 0 0 auto;
    margin: 0;
}

.stariz-mini-crud-group > .btn {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .stariz-mini-crud-group {
        flex-wrap: wrap;
    }
}

/* CRUD page-size selector: one shared contract for list surfaces. */
html body.stariz-app .stariz-page-size-selector {
    align-items: center;
    color: var(--pro-muted, var(--muted));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    gap: 6px;
    margin-right: auto;
    min-height: 30px;
    white-space: nowrap;
}

html body.stariz-app .stariz-page-size-selector select {
    appearance: auto;
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: 5px;
    color: var(--text);
    font: inherit;
    font-weight: var(--weight-semibold);
    height: 30px;
    min-height: 30px;
    min-width: 58px;
    padding: 0 7px;
}

html body.stariz-app .stariz-page-size-selector select:focus-visible {
    border-color: var(--primary-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: 0;
}

html body.stariz-app .stariz-page-size-selector select:disabled {
    cursor: default;
    opacity: .65;
}

@media (max-width: 640px) {
    html body.stariz-app .stariz-page-size-selector {
        margin-right: 0;
    }
}

/* STARIZ viewport contract -------------------------------------------------
   El shell autenticado vive siempre dentro del viewport. Esto elimina el
   segundo scroll del documento que aparecía cuando un CRUD (20/30 filas o
   un editor abierto) superaba el alto visible. El único scroll vertical del
   contenido queda en .stariz-page; el menú lateral permanece estable. */
html:has(body.stariz-app [data-stariz-shell]) {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body.stariz-app:has([data-stariz-shell]) {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body.stariz-app:has([data-stariz-shell]) [data-stariz-shell] {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body.stariz-app:has([data-stariz-shell]) .stariz-content {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

body.stariz-app:has([data-stariz-shell]) .stariz-page {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}


/* POPUP DATAGRID — paginación exclusiva de POP UP: 10 / 20 / 30 / 40. */
html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer {
    align-items: center;
    background: var(--pro-surface, var(--panel));
    border: 0;
    border-top: 1px solid var(--pro-border, var(--line));
    border-radius: 0;
    box-shadow: none;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
    min-height: 48px;
    padding: 8px 12px;
    width: 100%;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer .stariz-page-size-selector {
    margin: 0 auto 0 0;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer .stariz-popup-grid-pager {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 0;
}

html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer .rrhh-adn-pager__nav {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

/* En la barra del popup todos los controles compactos comparten la misma caja de 34 px. */
html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open])
:is(.stariz-grid-toolbar__controls, [data-stariz-dialog-filter-actions], .stariz-dialog-crud-toolbar__actions, .stariz-excel-export-host__actions, .rrhh-adn-toolbar__actions)
> :is(.stariz-crud-button[data-size="compact"], .stariz-excel-export-button) {
    align-self: center !important;
    height: var(--stariz-crud-grid-height, 34px) !important;
    min-height: var(--stariz-crud-grid-height, 34px) !important;
    max-height: var(--stariz-crud-grid-height, 34px) !important;
    margin-block: 0 !important;
}

@media (max-width: 640px) {
    html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer {
        align-items: stretch;
        flex-direction: column;
    }

    html body.stariz-app :is([role="dialog"], [role="alertdialog"], dialog[open]) .stariz-popup-grid-footer .stariz-popup-grid-pager {
        justify-content: space-between;
        width: 100%;
    }
}

/* STARIZ CRUD content gutter ------------------------------------------------
   Modificador global reutilizable para superficies que no poseen columnas
   estructurales de selección/estado en sus extremos. Mantiene divisores y
   grilla a ancho completo, pero separa contenido, datos y paginación del borde
   con un gutter global compuesto por el token responsive principal y su
   incremento corporativo centralizado. */
html body.stariz-app .page .rrhh-adn-crud-card.stariz-crud-card--content-gutter
> :is(.stariz-grid-toolbar, .rrhh-adn-toolbar, .rrhh-adn-custom-toolbar),
html body.stariz-app .page .rrhh-adn-crud-card.stariz-crud-card--content-gutter
> :is(.pager, .stariz-crud-pager, .rrhh-adn-pager, .rrhh-adn-custom-pager) {
    padding-inline: var(--stariz-crud-content-gutter);
}

html body.stariz-app .page .rrhh-adn-crud-card.stariz-crud-card--content-gutter
> :is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, .rrhh-adn-custom-grid)
> table.stariz-data-grid :is(th, td):first-child {
    padding-inline-start: var(--stariz-crud-content-gutter);
}

html body.stariz-app .page .rrhh-adn-crud-card.stariz-crud-card--content-gutter
> :is(.table-wrap, .stariz-crud-grid, .rrhh-adn-grid, .rrhh-adn-custom-grid)
> table.stariz-data-grid :is(th, td):last-child {
    padding-inline-end: var(--stariz-crud-content-gutter);
}

/* STARIZ record collection -------------------------------------------------
   Grilla global reutilizable para maestros que presentan cada registro como
   tarjeta. La densidad se controla con modificadores, sin estilos por módulo. */
html body.stariz-app .page .stariz-record-grid {
    display: grid;
    gap: var(--space-3, 12px);
    min-width: 0;
    padding: var(--stariz-crud-content-gutter, 16px);
    width: 100%;
}

html body.stariz-app .page .stariz-record-grid--four-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body.stariz-app .page .stariz-record-grid-empty {
    color: var(--pro-muted, var(--muted));
    min-height: 112px;
    padding: var(--stariz-crud-content-gutter, 16px);
}

html body.stariz-app .page .stariz-record-card {
    background: var(--pro-surface, var(--panel));
    border: 1px solid var(--stariz-card-border, var(--pro-border, var(--line)));
    border-radius: var(--radius-md, 12px);
    box-shadow: none;
    cursor: pointer;
    display: grid;
    gap: var(--space-3, 12px);
    min-width: 0;
    padding: var(--space-3, 12px);
}

html body.stariz-app .page .stariz-record-card:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--pro-surface, var(--panel)));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--stariz-card-border, var(--pro-border, var(--line))));
}

html body.stariz-app .page .stariz-record-card.is-selected {
    background: color-mix(in srgb, var(--primary) 6%, var(--pro-surface, var(--panel)));
    border-color: color-mix(in srgb, var(--primary) 54%, var(--stariz-card-border, var(--pro-border, var(--line))));
}

html body.stariz-app .page .stariz-record-card__header {
    align-items: center;
    display: grid;
    gap: var(--space-2, 8px);
    grid-template-columns: 46px minmax(0, 1fr) auto;
    min-width: 0;
}

html body.stariz-app .page .stariz-record-card__avatar {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 9%, var(--pro-surface, var(--panel)));
    border: 1px solid var(--pro-border, var(--line));
    border-radius: var(--radius-sm, 9px);
    color: var(--primary);
    display: inline-flex;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    height: 46px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 46px;
}

html body.stariz-app .page .stariz-record-card__avatar img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

html body.stariz-app .page .stariz-record-card__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

html body.stariz-app .page .stariz-record-card__identity strong,
html body.stariz-app .page .stariz-record-card__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.stariz-app .page .stariz-record-card__identity strong {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

html body.stariz-app .page .stariz-record-card__identity small {
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
}

html body.stariz-app .page .stariz-record-card__selection {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: var(--control-height, 36px);
    min-width: var(--control-height, 36px);
}

html body.stariz-app .page .stariz-record-card__selection input {
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}

html body.stariz-app .page .stariz-record-card__details {
    border-top: 1px solid var(--pro-border, var(--line));
    display: grid;
    gap: var(--space-3, 12px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    min-width: 0;
    padding-top: var(--space-3, 12px);
}

html body.stariz-app .page .stariz-record-card__details > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

html body.stariz-app .page .stariz-record-card__detail--wide {
    grid-column: 1 / -1;
}

html body.stariz-app .page .stariz-record-card__details :is(dt, dd) {
    margin: 0;
    min-width: 0;
}

html body.stariz-app .page .stariz-record-card__details dt {
    color: var(--pro-muted, var(--muted));
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
}

html body.stariz-app .page .stariz-record-card__details dd {
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.stariz-app .page .stariz-record-card__status {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2, 8px);
}

html body.stariz-app .page .stariz-record-card__status-light {
    border: 2px solid color-mix(in srgb, currentColor 28%, var(--pro-surface, var(--panel)));
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

html body.stariz-app .page .stariz-record-card__status-light.is-active {
    background: var(--success);
    color: var(--success);
}

html body.stariz-app .page .stariz-record-card__status-light.is-inactive {
    background: var(--danger);
    color: var(--danger);
}

html body.stariz-app .page table.stariz-excel-provider-table[hidden] {
    display: none !important;
}

/* STARIZ form density ------------------------------------------------------
   Cinco campos ordinarios por fila. Los campos expresamente completos
   mantienen el ancho total; la adaptación baja a dos y una columna. */
html body.stariz-app .page .stariz-form-grid--five-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

html body.stariz-app .page .stariz-form-grid--five-columns > .stariz-form-field {
    grid-column: span 1;
}

html body.stariz-app .page .stariz-form-grid--five-columns > .stariz-form-field.full {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    html body.stariz-app .page .stariz-record-grid--four-columns,
    html body.stariz-app .page .stariz-form-grid--five-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html body.stariz-app .page .stariz-record-grid--four-columns,
    html body.stariz-app .page .stariz-form-grid--five-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}