:root {
    --encanto-navy: #0a1f3d;
    --encanto-navy-2: #0d2b50;
    --encanto-blue: #1e88e5;
    --encanto-teal: #00b8a9;
    --encanto-green: #4caf50;
    --encanto-lime: #8bc34a;
    --encanto-bg: #f2f5f7;
    --encanto-text: #16253b;
    --encanto-muted: #6d7b8d;
    --encanto-border: #e5ebf0;
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 76px;
}

* {
    box-sizing: border-box;
}

/* Toggle switches — every on/off control in the app renders as a switch, not a checkbox
   (standing UI rule). Bootstrap's .form-switch already draws the track/thumb via CSS custom
   properties, so brand colors only need to override those, not the SVG thumb itself.
   Selectors are scoped through .form-switch (not just .form-check-input) to out-specificity
   Bootstrap's own .form-switch .form-check-input:checked rule — a bare .form-check-input:checked
   override loses that specificity fight and silently falls back to Bootstrap's default blue. */
.form-switch .form-check-input,
.form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:checked,
.form-check-input:checked {
    background-color: var(--encanto-teal);
    border-color: var(--encanto-teal);
}

.form-switch .form-check-input:focus,
.form-check-input:focus {
    border-color: var(--encanto-teal);
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 169, 0.25);
}

.form-switch .form-check-input {
    width: 2.75em;
    height: 1.5em;
}

.form-switch .form-check-label {
    cursor: pointer;
    padding-left: 0.25em;
}

/* Segmented control — for a small set of mutually-exclusive options (EIN/SSN, etc.) instead of
   bare native radio buttons. The <input type="radio"> itself is visually hidden but stays in the
   tab order and keyboard-operable; its adjacent <label> is what's actually shown and styled, using
   the :checked + label sibling selector to pick up the brand teal fill. Requires the input to
   immediately precede its label in markup order for that selector to match. */
.segmented-control {
    display: inline-flex;
    background: var(--encanto-bg);
    border: 1px solid var(--encanto-border);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.segmented-control input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.segmented-control label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 16px;
    border-radius: 7px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--encanto-muted);
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.segmented-control input[type="radio"]:checked + label,
.segmented-control label.active {
    background: var(--encanto-teal);
    color: #fff;
}

.segmented-control input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--encanto-teal);
    outline-offset: 2px;
}

/* A panel heading whose action button belongs at the right edge, and which has to survive being
   put in a half-width column. The button drops to its own line — still right-aligned — rather than
   squashing the heading when there is no room for both. */
.client-toolbar-stacked {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.client-toolbar-stacked > :first-child {
    flex: 1 1 15rem;
    min-width: 0;
}

.client-toolbar-stacked > .btn {
    margin-left: auto;
}

/* A grid that scrolls inside itself so the page heading, the warnings above it and the column
   headers all stay put while the rows move. Without this a long catalog pushes the context that
   explains it off the top of the screen. */
.table-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    /* The header cells are individually backgrounded, not the row, so each one needs to be opaque
       or the rows show through as they pass underneath. */
    background: #f8fafb;
    z-index: 2;
}

/* Ten rows and then scroll, rather than a fraction of the viewport. A list of pay statements grows
   by one every fortnight and is read newest-first, so what matters is that a predictable number is
   visible and the rest is one gesture away — not that it happens to fill this particular screen.
   The row height is the sum of Bootstrap's cell padding, line height and border; it is approximate
   on purpose, because the point is "about ten" and not a pixel contract. */
.table-scroll-rows {
    --encanto-grid-row: 2.55rem;
    max-height: calc(var(--encanto-grid-row) * 11); /* ten rows plus the sticky header */
}

/* The little info icon beside a field label. Carries the explanation that used to sit permanently
   under the input, where it made that column taller than its neighbours and knocked their inputs
   out of line. */
.field-hint {
    margin-left: .25rem;
    color: var(--encanto-muted);
    cursor: help;
    font-size: .8125rem;
    vertical-align: baseline;
}

.field-hint:hover {
    color: var(--encanto-teal);
}

/* A toggle whose label is long enough to wrap.
   Bootstrap's .form-check floats the input and indents the block with padding-left, which works
   until the label needs two lines — then the text drops below the switch instead of sitting beside
   it, and a row of toggles ends up with each one at a different height. Laying the pair out as a
   flex row keeps the switch and the first line of the label on the same baseline no matter how many
   lines the label takes. */
.switch-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.switch-field .form-check,
.form-check.form-switch-inline {
    display: flex;
    /* flex-start, not center: centring would line the switch up with the middle of a two-line
       label, leaving it lower than the switch beside it whose label fits on one line. */
    align-items: flex-start;
    gap: .55rem;
    padding-left: 0;
    margin-bottom: 0;
    min-height: 0;
}

.switch-field .form-check-input,
.form-check.form-switch-inline .form-check-input {
    float: none;
    flex: 0 0 auto;
    /* The switch is shorter than a line of text; this nudge sits it on the first line's optical
       centre instead of its top edge. */
    margin: .15rem 0 0;
}

.switch-field .form-check-label,
.form-check.form-switch-inline .form-check-label {
    margin: 0;
}

/* An option the current state rules out — e.g. "Half" on the 499 R-4 personal exemption once the
   taxpayer status is Individual, which the form forbids. Kept visible rather than removed so the
   CPA sees the option exists and that something ruled it out. */
.segmented-control input[type="radio"]:disabled + label {
    opacity: .4;
    cursor: not-allowed;
}

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

body {
    color: var(--encanto-text);
    background: var(--encanto-bg);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

a {
    text-decoration: none;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 14px 14px 18px 8px;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    background: linear-gradient(145deg, var(--encanto-lime) 2%, var(--encanto-green) 28%, var(--encanto-teal) 52%, var(--encanto-blue) 76%, #07518e 100%);
    box-shadow: 0 8px 22px rgba(0, 184, 169, .22);
    transform: rotate(-5deg);
}

.brand-mark span {
    transform: rotate(5deg);
}

.brand-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.brand-caption {
    color: var(--encanto-lime);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .32em;
}

/* Login */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% 18%, rgba(30, 136, 229, .28), transparent 24%),
        radial-gradient(circle at 18% 90%, rgba(0, 184, 169, .2), transparent 31%),
        var(--encanto-navy);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 44%) 1fr;
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: #fff;
}

.login-card {
    width: min(100%, 430px);
}

.login-brand {
    margin-bottom: 3.2rem;
}

.login-logo {
    display: block;
    width: min(100%, 310px);
    height: auto;
    object-fit: contain;
}

.login-title {
    margin-bottom: .55rem;
    color: var(--encanto-navy);
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -.035em;
}

.login-subtitle {
    margin-bottom: 2rem;
    color: var(--encanto-muted);
}

.form-label {
    color: #34445a;
    font-size: .84rem;
    font-weight: 650;
}

.form-control {
    min-height: 48px;
    border-color: #dbe3ea;
    border-radius: 10px;
}

.form-control:focus {
    border-color: var(--encanto-teal);
    box-shadow: 0 0 0 .2rem rgba(0, 184, 169, .13);
}

.input-group-text {
    color: #788697;
    background: #fff;
    border-color: #dbe3ea;
    border-radius: 10px 0 0 10px;
}

.btn-encanto {
    min-height: 48px;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    background: linear-gradient(100deg, var(--encanto-teal), var(--encanto-blue));
    box-shadow: 0 9px 24px rgba(30, 136, 229, .2);
}

.btn-encanto:hover,
.btn-encanto:focus {
    color: #fff;
    background: linear-gradient(100deg, #00a798, #147bd1);
}

.login-visual {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 8rem);
    color: #fff;
}

.login-visual::before,
.login-visual::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
}

.login-visual::before {
    width: 460px;
    height: 460px;
    right: -100px;
    bottom: -180px;
}

.login-visual::after {
    width: 280px;
    height: 280px;
    right: -10px;
    bottom: -90px;
}

.visual-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.visual-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    color: var(--encanto-lime);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.visual-kicker::before {
    width: 34px;
    height: 2px;
    content: "";
    background: var(--encanto-lime);
}

.visual-title {
    max-width: 620px;
    margin-bottom: 1.4rem;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.visual-title span {
    color: var(--encanto-lime);
}

.visual-copy {
    max-width: 540px;
    color: rgba(255, 255, 255, .72);
    font-size: 1.08rem;
    line-height: 1.7;
}

.feature-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-top: 3.3rem;
}

.feature-item {
    min-width: 130px;
    color: rgba(255, 255, 255, .82);
}

.feature-item i {
    display: block;
    margin-bottom: .65rem;
    color: var(--encanto-teal);
    font-size: 1.6rem;
}

.feature-item strong {
    display: block;
    color: #fff;
    font-size: .9rem;
}

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

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 0 100%, rgba(0, 184, 169, .16), transparent 36%),
        linear-gradient(180deg, var(--encanto-navy), #07182e);
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    min-height: 86px;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.master-logo {
    display: block;
    width: 100%;
    max-width: 205px;
    height: auto;
    object-fit: contain;
}

.sidebar-nav {
    flex: 1;
    padding: 1.3rem .85rem;
    overflow-y: auto;
}

.nav-section {
    padding: .4rem .85rem .7rem;
    color: rgba(255, 255, 255, .34);
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .3rem;
    padding: .72rem .85rem;
    color: rgba(255, 255, 255, .7);
    border-radius: 9px;
    font-size: .91rem;
    font-weight: 550;
}

.sidebar-link i {
    width: 20px;
    font-size: 1.05rem;
    text-align: center;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.sidebar-link.active {
    color: #fff;
    background: linear-gradient(95deg, rgba(0, 184, 169, .96), rgba(30, 136, 229, .86));
    box-shadow: 0 8px 20px rgba(0, 184, 169, .16);
}

.sidebar-footer {
    padding: 1rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.user-mini {
    display: flex;
    align-items: center;
    gap: .7rem;
}

/* The muted-text rules below must NOT reach .avatar — a bare `.user-mini span`
   selector (specificity 0,1,1) outranks `.avatar` (0,1,0) and was overriding the
   avatar's grid centering and its dark text color, leaving the initials invisible
   against the light gradient. Scoping with :not(.avatar) keeps them apart. */
.user-mini .avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    color: var(--encanto-navy);
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(145deg, var(--encanto-lime), var(--encanto-teal));
}

.user-mini strong,
.user-mini span:not(.avatar) {
    display: block;
}

.user-mini strong {
    font-size: .82rem;
}

.user-mini span:not(.avatar) {
    color: rgba(255, 255, 255, .46);
    font-size: .7rem;
}

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

/* ---------------------------------------------------------------------------
   Collapsed sidebar (desktop only — under 992px the sidebar is an off-canvas
   drawer instead, see the media query near the end of this file).
   The collapsed rail keeps the icons and hides every text label, so the nav is
   still usable at a glance. State is persisted in localStorage by site.js.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    html.sidebar-collapsed .sidebar {
        width: var(--sidebar-width-collapsed);
    }

    html.sidebar-collapsed .main-area {
        margin-left: var(--sidebar-width-collapsed);
    }

    html.sidebar-collapsed .sidebar-link span,
    html.sidebar-collapsed .nav-section,
    html.sidebar-collapsed .client-nav-context,
    html.sidebar-collapsed .user-mini > span:not(.avatar) {
        display: none;
    }

    html.sidebar-collapsed .sidebar-brand {
        padding: 1.25rem .6rem;
        justify-content: center;
    }

    /* The logo is a wordmark — illegible squeezed into the rail, and there is no
       icon-only asset to swap in, so hide it. The brand area stays clickable. */
    html.sidebar-collapsed .master-logo {
        display: none;
    }

    html.sidebar-collapsed .sidebar-nav {
        padding: 1.3rem .6rem;
    }

    html.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: .72rem .5rem;
    }

    html.sidebar-collapsed .sidebar-footer {
        padding: 1rem .6rem;
    }

    html.sidebar-collapsed .user-mini {
        justify-content: center;
        gap: .4rem;
    }
}

/* Lives in the (light) topbar, not the dark sidebar — colors follow the topbar. */
.sidebar-collapse-toggle {
    display: none;
    padding: .4rem .55rem;
    color: var(--encanto-muted);
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.sidebar-collapse-toggle:hover {
    color: var(--encanto-navy);
    background: var(--encanto-bg);
}

@media (min-width: 992px) {
    .sidebar-collapse-toggle {
        display: inline-flex;
    }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--encanto-border);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
}

.mobile-menu {
    display: none;
    color: var(--encanto-navy);
    border: 0;
    background: transparent;
    font-size: 1.5rem;
}

.topbar-context {
    color: var(--encanto-muted);
    font-size: .82rem;
}

.topbar-context strong {
    color: var(--encanto-text);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.icon-button {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    color: #607085;
    border: 1px solid var(--encanto-border);
    border-radius: 10px;
    background: #fff;
}

.icon-button:hover {
    color: var(--encanto-teal);
    border-color: rgba(0, 184, 169, .4);
}

/* La navegación dentro de un módulo. Vive encima del contenido, dentro del área principal, y solo
   aparece cuando la página pertenece a un módulo. */
.module-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--encanto-border);
}

.module-tabs-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .1rem;
    color: var(--encanto-muted);
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
}

.module-tabs-back:hover {
    color: var(--encanto-teal);
}

.module-tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}

.module-tab {
    padding: .45rem .85rem;
    border-bottom: 2px solid transparent;
    color: var(--encanto-muted);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease;
}

.module-tab:hover {
    color: var(--encanto-navy);
}

.module-tab.active {
    color: var(--encanto-teal);
    border-bottom-color: var(--encanto-teal);
}

.content-area {
    padding: 2rem;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.7rem;
}

.page-eyebrow {
    margin-bottom: .25rem;
    color: var(--encanto-teal);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    color: var(--encanto-navy);
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -.035em;
}

.page-description {
    margin: .38rem 0 0;
    color: var(--encanto-muted);
    font-size: .9rem;
}

.metric-card,
.panel-card {
    height: 100%;
    border: 1px solid var(--encanto-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(10, 31, 61, .035);
}

.metric-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
}

.metric-card::after {
    position: absolute;
    width: 70px;
    height: 70px;
    right: -22px;
    bottom: -28px;
    content: "";
    border-radius: 50%;
    background: var(--metric-color, var(--encanto-teal));
    opacity: .1;
}

.metric-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 1.1rem;
    color: var(--metric-color, var(--encanto-teal));
    border-radius: 10px;
    background: color-mix(in srgb, var(--metric-color, var(--encanto-teal)) 12%, white);
}

.metric-label {
    margin-bottom: .35rem;
    color: var(--encanto-muted);
    font-size: .75rem;
    font-weight: 600;
}

.metric-value {
    margin: 0;
    color: var(--encanto-navy);
    font-size: 1.55rem;
    font-weight: 750;
}

.metric-note {
    margin-top: .45rem;
    color: var(--encanto-green);
    font-size: .7rem;
    font-weight: 650;
}

.panel-card {
    padding: 1.35rem;
}

.clients-panel {
    padding: 0;
    overflow: hidden;
}

.client-toolbar {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--encanto-border);
}

.search-box {
    position: relative;
    width: min(100%, 460px);
}

.search-box i {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    color: #8794a4;
    transform: translateY(-50%);
}

.search-box .form-control {
    padding-left: 2.7rem;
}

.client-table th {
    padding: .8rem 1rem;
    color: #788697;
    border-bottom-color: var(--encanto-border);
    background: #f8fafb;
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.client-table td {
    padding: .95rem 1rem;
    color: #405167;
    border-bottom-color: #edf1f4;
    font-size: .8rem;
}

.client-identity {
    display: flex;
    min-width: 220px;
    align-items: center;
    gap: .8rem;
}

.client-identity strong,
.client-identity small {
    display: block;
}

.client-identity strong {
    color: var(--encanto-navy);
    font-size: .84rem;
}

/* El nombre abre el cliente igual que el botón Open. Se pinta como el texto que ya era, no como un
   enlace azul: subrayarlo en reposo metería cinco subrayados en una tabla de cinco filas. El
   subrayado aparece al pasar por encima, que es donde hace falta la señal. */
.client-name-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.client-name-link:hover strong,
.client-name-link:focus-visible strong {
    color: var(--encanto-teal);
    text-decoration: underline;
}

.client-name-link:focus-visible {
    outline: 2px solid var(--encanto-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

.client-identity small {
    max-width: 210px;
    overflow: hidden;
    color: var(--encanto-muted);
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    color: #087f76;
    border-radius: 10px;
    font-size: .76rem;
    font-weight: 800;
    background: rgba(0, 184, 169, .12);
}

.client-contact {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 700;
}

.client-status::before {
    width: 6px;
    height: 6px;
    content: "";
    border-radius: 50%;
    background: currentColor;
}

.status-active {
    color: #238b3a;
    background: #edf8ef;
}

.status-inactive {
    color: #7c8795;
    background: #edf0f3;
}

/* Estados de una versión de compensación o retención (ficha de empleado). */
.status-scheduled {
    color: #1b5fa8;
    background: #e8f1fb;
}

.status-locked {
    color: #8a5a0b;
    background: #fdf3e1;
}

.btn-client-open {
    color: #087f76;
    border: 1px solid rgba(0, 184, 169, .25);
    background: rgba(0, 184, 169, .07);
}

.btn-client-open:hover {
    color: #fff;
    background: var(--encanto-teal);
}

.empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
}

.empty-state i {
    color: #a5b1bd;
    font-size: 2.2rem;
}

.empty-state h2 {
    margin: .8rem 0 .2rem;
    color: var(--encanto-navy);
    font-size: 1rem;
}

.empty-state p {
    margin: 0;
    color: var(--encanto-muted);
    font-size: .8rem;
}

.client-modal {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(10, 31, 61, .2);
}

.client-modal .modal-header,
.client-modal .modal-footer {
    padding: 1.15rem 1.4rem;
    border-color: var(--encanto-border);
}

.client-modal .modal-body {
    padding: 1.4rem;
}

.client-nav-context {
    margin: 1rem .85rem .35rem;
    padding: .8rem .85rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
}

.client-nav-context small,
.client-nav-context strong {
    display: block;
}

.client-nav-context small {
    margin-bottom: .22rem;
    color: var(--encanto-teal);
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-nav-context strong {
    overflow: hidden;
    color: #fff;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-divider {
    margin: 0 .45rem;
    color: #bdc6d0;
}

.workspace-module {
    display: flex;
    min-height: 122px;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    color: var(--encanto-text);
    border: 1px solid var(--encanto-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(10, 31, 61, .035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.workspace-module:hover {
    color: var(--encanto-text);
    border-color: rgba(0, 184, 169, .32);
    box-shadow: 0 12px 28px rgba(10, 31, 61, .08);
    transform: translateY(-2px);
}

.workspace-module-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 48px;
    color: var(--encanto-teal);
    border-radius: 13px;
    background: rgba(0, 184, 169, .11);
    font-size: 1.2rem;
}

.workspace-module strong,
.workspace-module small {
    display: block;
}

.workspace-module strong {
    margin-bottom: .3rem;
    color: var(--encanto-navy);
    font-size: .92rem;
}

.workspace-module small {
    color: var(--encanto-muted);
    font-size: .72rem;
    line-height: 1.45;
}

/* Dos tarjetas anchas en vez de seis estrechas: una por módulo, con las pantallas que contiene
   listadas debajo para que se vea qué hay dentro sin tener que entrar. */
.workspace-module-lg {
    min-height: 148px;
    align-items: flex-start;
}

.workspace-module-lg .workspace-module-icon {
    margin-top: .15rem;
}

.workspace-module-screens {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.workspace-module-screen {
    padding: .12rem .5rem;
    border: 1px solid var(--encanto-border);
    border-radius: 999px;
    background: rgba(10, 31, 61, .025);
    color: var(--encanto-muted);
    font-size: .72rem;
    line-height: 1.5;
    white-space: nowrap;
}

.workspace-arrow {
    color: #a5b0bc;
}

.panel-title {
    margin: 0;
    color: var(--encanto-navy);
    font-size: .98rem;
    font-weight: 720;
}

.panel-subtitle {
    margin: .25rem 0 0;
    color: var(--encanto-muted);
    font-size: .72rem;
}

.activity-item {
    display: flex;
    gap: .85rem;
    padding: 1rem 0;
    border-bottom: 1px solid #edf1f4;
}

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

.activity-dot {
    width: 9px;
    height: 9px;
    margin-top: .38rem;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--encanto-teal);
    box-shadow: 0 0 0 4px rgba(0, 184, 169, .11);
}

.activity-item strong {
    display: block;
    color: #26384e;
    font-size: .8rem;
}

.activity-item span {
    color: var(--encanto-muted);
    font-size: .7rem;
}

.progress {
    height: 7px;
    border-radius: 999px;
    background: #edf2f5;
}

.progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--encanto-teal), var(--encanto-blue));
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
        padding: 2rem 1.25rem;
    }

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

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

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

    .mobile-menu {
        display: inline-grid;
        place-items: center;
    }

    .sidebar-backdrop.show {
        position: fixed;
        inset: 0;
        z-index: 1025;
        display: block;
        background: rgba(7, 24, 46, .48);
    }
}

@media (max-width: 575.98px) {
    .topbar,
    .content-area {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .topbar-context {
        display: none;
    }

    .page-heading {
        align-items: start;
        flex-direction: column;
    }

    .client-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .search-box {
        width: 100%;
    }
}

/* Modal apilado (balances iniciales sobre la ficha del empleado). Bootstrap pinta todos los
   modales a 1055 y todos los fondos a 1050, así que un segundo modal quedaría al mismo nivel que
   el primero y su fondo DEBAJO de los dos. El segundo sube, y el segundo fondo también. */
.modal.modal-stacked { z-index: 1065; }
.modal-backdrop + .modal-backdrop { z-index: 1060; }