/* ============================================
   AgendarT — Estilos globales
   Color primario: #0000FF
   ============================================ */

:root {
    --color-primary: #0000FF;
    --color-primary-dark: #0000CC;
    --color-primary-light: #3333FF;
    --color-bg: #FFFFFF;
    --color-white: #FFFFFF;
    --color-text: #1A1A2E;
    --color-text-light: #6B7280;
    --color-border: #E5E7EB;
    --color-danger: #EF4444;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-vacation: #96fcb2;
    --color-personal: #fcda96;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.2s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    overflow-y: scroll;
}

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

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
    view-transition-name: navbar;
}

.navbar__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar__logo img {
    height: 40px;
    width: auto;
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.navbar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

.navbar__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 32%;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.2s ease;
}

.navbar__link:hover {
    color: var(--color-primary);
}

.navbar__link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.navbar__link--active {
    color: var(--color-primary);
}

.navbar__link--active::after {
    transform: translateX(-50%) scaleX(1);
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
}

.navbar__btn:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* ============================================
   CARDS & PANELS
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

.btn--outline:hover {
    background: rgba(0, 0, 255, 0.06);
}

.btn--danger {
    background: var(--color-danger);
    color: var(--color-white);
}

.btn--danger:hover {
    background: #DC2626;
}

.btn--sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
}

.btn--remove-slot {
    flex-shrink: 0;
    width: 38px;
    padding: 0.6rem 0;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius);
}

/* ============================================
   TABLES
   ============================================ */
.table-wrapper {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.table th,
.table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tr:hover td {
    background: rgba(0, 0, 255, 0.02);
}

.table__actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    color: var(--color-text);
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.92rem;
    transition: var(--transition);
    background: var(--color-white);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge--active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.badge--inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.badge--primary {
    background: rgba(0, 0, 255, 0.1);
    color: var(--color-primary);
}

.badge--warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

/* ============================================
   TOASTS & ALERTS
   ============================================ */
.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 550;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(calc(100vw - 2rem), 320px);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: var(--color-text);
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}

.toast--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast--leaving {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
}

.toast--success {
    border-color: rgba(16, 185, 129, 0.14);
    background: rgba(244, 255, 249, 0.92);
}

.toast--error {
    border-color: rgba(239, 68, 68, 0.14);
    background: rgba(255, 248, 248, 0.92);
}

.toast--info,
.toast--warning {
    border-color: rgba(0, 0, 255, 0.1);
    background: rgba(248, 249, 255, 0.92);
}

.toast__body {
    flex: 1;
    font-size: 0.87rem;
    font-weight: 450;
    line-height: 1.4;
}

.toast__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.toast__close:hover {
    background: rgba(15, 23, 42, 0.07);
    color: var(--color-text);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert--success {
    background: rgba(16, 185, 129, 0.1);
    color: #065F46;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert--error {
    background: rgba(239, 68, 68, 0.1);
    color: #991B1B;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert--info {
    background: rgba(0, 0, 255, 0.06);
    color: var(--color-primary);
    border: 1px solid rgba(0, 0, 255, 0.15);
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-shell {
    min-height: 100vh;
    margin: -2rem auto 0;
    padding: clamp(1.25rem, 2vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 430px);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 30%),
        linear-gradient(135deg, #0000FF 0%, #1d3eff 40%, #0c1ea7 100%);
}

.login-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(1.6rem, 4vw, 3rem);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 70px rgba(7, 16, 88, 0.3);
}

.login-hero::before,
.login-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.login-hero::before {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -70px;
}

.login-hero::after {
    width: 180px;
    height: 180px;
    bottom: -60px;
    left: -40px;
}

.login-hero__badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-hero__title,
.login-hero__text,
.login-hero__highlights {
    position: relative;
    z-index: 1;
}

.login-hero__title {
    max-width: 12ch;
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.login-hero__text {
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.login-hero__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.login-hero__highlight {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.login-hero__highlight strong {
    font-size: 0.9rem;
}

.login-hero__highlight span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    line-height: 1.45;
}

.login-card {
    align-self: stretch;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(12, 30, 167, 0.18);
    padding: clamp(1.5rem, 3vw, 2.3rem);
    width: 100%;
    min-height: 100%;
    text-align: left;
    border: 1px solid rgba(217, 222, 231, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.2rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 255, 0.08), rgba(0, 0, 255, 0.02));
}

.login-card__logo img {
    height: 42px;
    width: auto;
}

.login-card__header {
    margin-bottom: 1.5rem;
}

.login-card__title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.35rem;
}

.login-card__subtitle {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-form__group {
    text-align: left;
}

.login-form__group label {
    display: inline-block;
    margin-bottom: 0.42rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
}

.login-form__group .form-control {
    height: 50px;
    border-radius: 14px;
    border: 1px solid #d6dcea;
    background: rgba(250, 251, 255, 0.95);
}

.login-form__group .form-control:focus {
    border-color: rgba(0, 0, 255, 0.42);
    box-shadow: 0 0 0 4px rgba(0, 0, 255, 0.08);
    outline: none;
}

.login-remember {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid #e3e8f1;
    border-radius: 16px;
    background: #f8faff;
    cursor: pointer;
}

.login-remember input {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.login-remember span {
    display: grid;
    gap: 0.15rem;
}

.login-remember strong {
    font-size: 0.9rem;
    color: var(--color-text);
}

.login-remember small {
    color: var(--color-text-light);
    font-size: 0.78rem;
    line-height: 1.4;
}

.login-form__submit {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
}

.login-form__alt {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 0.25rem;
}

.login-form__alt a {
    color: var(--color-primary);
    font-weight: 600;
}

.login-form__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* ============================================
   DASHBOARD HOME
   ============================================ */
.dashboard-home {
    min-height: calc(100vh - 64px - 4rem);
    display: grid;
    align-content: start;
    gap: 2rem;
}

.dashboard-home__hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 32%),
        linear-gradient(135deg, #0000FF 0%, #1836f0 48%, #0c1ea7 100%);
    color: var(--color-white);
    box-shadow: 0 28px 60px rgba(12, 30, 167, 0.18);
}

.dashboard-home__hero::after {
    content: '';
    position: absolute;
    inset: auto -40px -90px auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.dashboard-home__eyebrow,
.dashboard-home__title,
.dashboard-home__subtitle {
    position: relative;
    z-index: 1;
}

.dashboard-home__eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-home__title {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(1.9rem, 4.3vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.dashboard-home__subtitle {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.dashboard-home__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.dashboard-home__card {
    display: grid;
    gap: 1.1rem;
    min-height: 240px;
    padding: 1.4rem;
    border-radius: 24px;
    border: 1px solid #d9dee7;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-home__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 0, 255, 0.16);
}

.dashboard-home__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
}

.dashboard-home__card--services .dashboard-home__card-icon {
    background: rgba(0, 0, 255, 0.08);
    color: var(--color-primary);
}

.dashboard-home__card--workers .dashboard-home__card-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #c27a00;
}

.dashboard-home__card--hours .dashboard-home__card-icon {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
}

.dashboard-home__card--agenda .dashboard-home__card-icon {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

.dashboard-home__card-body {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.dashboard-home__card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.dashboard-home__card-text {
    margin: 0;
    color: var(--color-text-light);
    font-size: 0.92rem;
    line-height: 1.55;
}

.dashboard-home__card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: fit-content;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: rgba(0, 0, 255, 0.06);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .dashboard-home {
        min-height: auto;
    }

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

    .dashboard-home__title {
        max-width: 13ch;
    }
}

@media (max-width: 540px) {
    .dashboard-home__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-home {
        gap: 1rem;
    }

    .dashboard-home__hero {
        gap: 0.55rem;
        padding: 1rem 1rem 0.95rem;
        border-radius: 20px;
        box-shadow: 0 18px 36px rgba(12, 30, 167, 0.14);
    }

    .dashboard-home__hero::after {
        width: 140px;
        height: 140px;
        inset: auto -28px -62px auto;
    }

    .dashboard-home__eyebrow {
        padding: 0.34rem 0.65rem;
        font-size: 0.68rem;
    }

    .dashboard-home__title {
        font-size: clamp(1.8rem, 9vw, 2.4rem);
        max-width: 100%;
    }

    .dashboard-home__subtitle {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .dashboard-home__card {
        min-height: 0;
        padding: 1.15rem;
        border-radius: 20px;
    }

    .dashboard-home__card-link {
        width: 100%;
        justify-content: center;
    }
}

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

    .login-hero__highlights {
        grid-template-columns: 1fr;
    }

    .login-hero__title {
        max-width: 14ch;
    }
}

@media (max-width: 640px) {
    .login-shell {
        padding: 0.9rem;
        margin-top: -1rem;
    }

    .login-hero {
        padding: 1.4rem;
        border-radius: 24px;
    }

    .login-card {
        padding: 1.25rem;
        border-radius: 24px;
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-light);
}

.empty-state__text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   SCHEDULE GRID (for business hours / worker schedule)
   ============================================ */
.schedule-grid {
    display: grid;
    gap: 0.5rem;
}

.schedule-day {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.schedule-day__name {
    font-weight: 600;
    font-size: 0.9rem;
}

.schedule-day__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-slot {
    background: rgba(0, 0, 255, 0.08);
    color: var(--color-primary);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
}

.schedule-slot--closed {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-danger);
}

/* ============================================
   SERVICE LIST (diseño tipo filas)
   ============================================ */
.svc-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.svc-header {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(8.3rem, 0.72fr) minmax(14.8rem, 1.34fr) minmax(6.6rem, 0.52fr) 88px;
    column-gap: 1.1rem;
    padding: 0 1.5rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

.svc-header__col {
    display: flex;
    align-items: center;
}

.svc-header__col--name {
    gap: 1rem;
}

.svc-header__icon-spacer {
    width: 2.55rem;
    height: 2.55rem;
    flex-shrink: 0;
}

.svc-header__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.45rem;
    text-align: center;
}

.svc-header__label--with-help {
    gap: 0.4rem;
}

.svc-header__label--name {
    flex: 1;
}

.svc-header__col--dur,
.svc-header__col--work,
.svc-header__col--price {
    justify-content: center;
}

.wk-add__link--button {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.svc-add {
    padding: 0.5rem 1.5rem 0.75rem;
}

.svc-add__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-light);
    transition: background 0.15s ease, color 0.15s ease;
}

.svc-add__btn:hover {
    background: rgba(0, 0, 255, 0.08);
    color: var(--color-primary);
}

.svc-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.svc-inline-create-wrap {
    margin-bottom: 0.5rem;
}

.svc-inline-create-wrap--hidden {
    display: none;
}

.svc-list--reorder .svc-row {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.svc-list--reorder .svc-row:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.08), var(--shadow-md);
}

.wk-list--reorder .wk-row {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.wk-list--reorder .wk-row:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.08), var(--shadow-md);
}

.wk-list--reorder .wk-row__name a,
.wk-list--reorder .wk-row__actions,
.wk-list--reorder .wk-row__schedule,
.wk-list--reorder .wk-row__week {
    pointer-events: none;
}

.wk-list--reorder .wk-expand {
    max-height: 0 !important;
}

.wk-add.svc-add-box {
    margin-bottom: 0.5rem;
}

.wk-add.svc-add-inline {
    padding: 0;
    overflow: hidden;
}

.svc-add-inline__trigger {
    max-height: 4.9rem;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease;
}

.svc-add-inline__trigger .wk-add__link--button {
    padding: 1.1rem 1.5rem;
    box-sizing: border-box;
}

.svc-add-inline__content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.32s ease;
}

.svc-add-inline--open .svc-add-inline__trigger {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.svc-add-inline--open .svc-add-inline__content {
    max-height: 26rem;
    opacity: 1;
    transform: translateY(0);
}

.svc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(8.3rem, 0.72fr) minmax(14.8rem, 1.34fr) minmax(6.6rem, 0.52fr) 88px;
    align-items: center;
    column-gap: 1.1rem;
    padding: 1.1rem 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #d9dee7;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.svc-row:hover {
    box-shadow: var(--shadow-md);
}

.svc-row--embedded {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 1.1rem 1.5rem;
}

.svc-row--embedded:hover {
    box-shadow: none;
}

.svc-row--reorder-source {
    border-color: rgba(0, 0, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08), var(--shadow-sm);
}

.svc-row--dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.wk-row--reorder-source {
    border-color: rgba(0, 0, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08), var(--shadow-sm);
}

.wk-row--dragging {
    opacity: 0.55;
    cursor: grabbing;
}

/* ---- Row wrapper for inline edit transition ---- */
.svc-row-wrap {
    position: relative;
}

.svc-row-wrap .svc-row--display {
    max-height: 8rem;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease;
}

.svc-row-wrap .svc-row-edit {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.32s ease;
}

.svc-row-wrap--editing .svc-row--display {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transform: translateY(-8px);
    pointer-events: none;
    border-color: transparent;
    box-shadow: none;
}

.svc-row-wrap--editing .svc-row-edit {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
}

.svc-row-edit .svc-row--embedded {
    border: 1px solid #d9dee7;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.svc-row-edit .svc-row--embedded:hover {
    box-shadow: var(--shadow-sm);
}

.svc-row__name {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.svc-row__name-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 2.45rem;
    padding: 0.45rem 1rem;
    background: #fafafa;
    border-radius: var(--radius-lg);
    text-align: center;
}

.svc-row__pill {
    display: inline-block;
    width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
    color: #933d68;
    position: relative;
    flex-shrink: 0;
}

.service-icon--pink {
    background: #f58bc0;
    color: #933d68;
}

.service-icon--gray {
    background: #efefef;
    color: #9ca3af;
}

.service-icon--sand {
    background: #f2d389;
    color: #8f6a1d;
}

.service-icon--coral {
    background: #f2af97;
    color: #9b553d;
}

.service-icon--green {
    background: #97eeab;
    color: #2f7a46;
}

.service-icon--blue {
    background: #91dded;
    color: #2b7387;
}

.service-icon--list {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
}

.service-icon--picker {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
}

.service-icon--neutral {
    background: #efefef;
    color: #9ca3af;
    border: none;
}

.service-icon--neutralized {
    background: transparent;
    width: 100%;
    height: 100%;
}

.service-icon--inline-preview {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.service-icon__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.svc-page--editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.svc-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.svc-picker {
    display: grid;
    gap: 0.75rem;
}

.svc-picker--icons {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.svc-picker--colors {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.svc-picker__option {
    display: block;
}

.svc-picker__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.svc-picker__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 8.2rem;
    border: 1px solid #d9dee7;
    border-radius: 18px;
    background: #fafafa;
    padding: 1rem;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.svc-picker__card--color {
    min-height: 7rem;
}

.svc-picker__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}

.svc-picker__option:hover .svc-picker__card {
    border-color: rgba(0, 0, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.05);
    transform: translateY(-1px);
}

.svc-picker__input:checked + .svc-picker__card {
    border-color: var(--color-primary);
    background: rgba(0, 0, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.svc-row__dur,
.svc-row__work,
.svc-row__price {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.45rem 1.25rem;
    background: #fafafa;
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
}

.svc-row__dur--input,
.svc-row__work--input,
.svc-row__price--input {
    padding: 0.25rem;
}

.svc-row__sep {
    display: inline-block;
    margin: 0 0.5rem;
    padding: 0;
    border-left: none;
    border-right: none;
    color: var(--color-text);
    font-weight: 500;
}

/* Menú ⋮ servicio */
.svc-row__menu-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.svc-row__menu-wrap--cell {
    min-height: 2.45rem;
    align-items: center;
}

.svc-row__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.svc-row__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fafafa;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 4px;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}

.svc-row__menu-btn:hover {
    background: #f0f0f0;
}

.svc-row__work-chips,
.svc-inline__segments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

.svc-row__work-chips {
    justify-content: space-between;
}

.svc-row__work-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
}

.svc-row__work-chip--empty {
    color: var(--color-text-light);
}

.svc-inline__input {
    width: 100%;
    min-height: 2.45rem;
    min-width: 0;
    border: none;
    background: #fafafa;
    box-shadow: none;
    text-align: center;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
}

.svc-inline__input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.svc-inline__input::placeholder {
    color: var(--color-text-light);
    opacity: 1;
    font-weight: 500;
}

.svc-inline__input--name {
    text-align: center;
}

select.svc-inline__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fafafa;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.85rem 0.85rem;
    padding-right: 2.1rem;
    padding-left: 1rem;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    color: var(--color-text);
}

select.svc-inline__input:hover {
    background-color: #f2f2f2;
}

select.svc-inline__input:focus {
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

select.svc-inline__input:invalid,
select.svc-inline__input option[value=""] {
    color: var(--color-text-light);
}

select.svc-inline__input option {
    background: #ffffff;
    color: var(--color-text);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

select.svc-inline__input option:disabled {
    color: var(--color-text-light);
}

.svc-inline__icon-trigger {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.svc-inline__icon-trigger:hover {
    background: #e7e7e7;
    color: var(--color-text-light);
}

.svc-row__name-text--input {
    padding: 0.25rem;
}

.svc-inline__segments .svc-inline__input {
    min-width: 0;
    flex: 1 1 0;
}

.svc-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: #f1f2f6;
    color: var(--color-text-light);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.svc-help-trigger:hover {
    background: #e6e8ef;
    color: var(--color-text);
    transform: translateY(-1px);
}

.svc-inline__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.svc-inline__action--cancel {
    background: #f3f3f3;
    color: #a3a3a3;
}

.svc-inline__action--cancel:hover {
    background: #ebebeb;
    color: var(--color-text);
}

.svc-inline__action--submit {
    background: #f3f3f3;
    color: #8e8e8e;
}

.svc-inline__action--submit:hover {
    background: #eaf7ee;
    color: var(--color-success);
}

.svc-inline__errors {
    margin: 0.5rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    background: rgba(239, 68, 68, 0.06);
    color: var(--color-danger);
    font-size: 0.84rem;
}

.svc-inline__errors ul {
    margin: 0;
    padding-left: 1rem;
}

.svc-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.85rem, 2vw, 1.25rem);
    isolation: isolate;
}

body.modal-open {
    overflow: hidden;
}

body.modal-open .navbar,
body.modal-open .mobile-subnav,
body.modal-open .mobile-menu,
body:has(.svc-modal:not(.svc-modal--hidden)) .navbar,
body:has(.svc-modal:not(.svc-modal--hidden)) .mobile-subnav,
body:has(.svc-modal:not(.svc-modal--hidden)) .mobile-menu {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wk-expand:has(.svc-modal:not(.svc-modal--hidden)),
.wk-inline-editor:has(.svc-modal:not(.svc-modal--hidden)),
.svc-add-inline__content:has(.svc-modal:not(.svc-modal--hidden)),
.svc-row-edit:has(.svc-modal:not(.svc-modal--hidden)),
.svc-row-wrap:has(.svc-modal:not(.svc-modal--hidden)) {
    overflow: visible;
    max-height: none;
}

.svc-modal--hidden {
    display: none;
}

.svc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.svc-modal__dialog {
    position: relative;
    width: min(100%, 640px);
    max-height: min(calc(100dvh - 2rem), 760px);
    overflow: auto;
    background: var(--color-white);
    border: 1px solid #d9dee7;
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
    padding: 1rem;
    margin: auto;
}

.svc-modal__dialog--sm {
    width: min(100%, 460px);
}

.svc-modal__header,
.svc-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.svc-modal__header {
    margin-bottom: 1rem;
}

.svc-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.svc-modal__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.svc-modal__text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
}

.svc-modal__list {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    color: var(--color-text-light);
    font-size: 0.86rem;
}

.svc-modal__list li + li {
    margin-top: 0.35rem;
}

.svc-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f3f3f3;
    color: var(--color-text-light);
    cursor: pointer;
}

.svc-modal__close:hover {
    background: #ebebeb;
    color: var(--color-text);
}

.svc-modal__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.svc-picker--modal {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.svc-picker__modal-card {
    width: 100%;
    border: 1px solid #d9dee7;
}

.svc-picker__modal-card--active {
    border-color: var(--color-primary);
    background: rgba(0, 0, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.08);
}

.svc-modal__footer {
    margin-top: 1rem;
    justify-content: flex-end;
}

.svc-row__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: 0.35rem 0;
    z-index: 50;
}

.svc-row__menu-wrap--open .svc-row__dropdown {
    display: block;
}

.svc-row__menu-wrap--open {
    z-index: 60;
}

.svc-row__dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: background 0.1s ease;
    text-decoration: none;
}

.svc-row__dropdown-item:hover {
    background: rgba(0, 0, 255, 0.04);
}

.svc-row__dropdown-item[disabled] {
    opacity: 0.45;
    cursor: default;
}

.svc-row__dropdown-item[disabled]:hover {
    background: none;
}

.svc-row__dropdown-danger {
    color: var(--color-danger) !important;
}

.svc-row__dropdown-danger:hover {
    background: rgba(239, 68, 68, 0.06) !important;
}

/* ============================================
   WORKER LIST (nuevo diseño tipo filas)
   ============================================ */
.wk-add {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #d9dee7;
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.5rem;
    margin-bottom: 1rem;
}

.wk-add__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    width: 100%;
    color: var(--color-text-light);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.wk-add__link:hover {
    color: var(--color-primary);
}

.wk-add:hover {
    box-shadow: var(--shadow-md);
}

.wk-add__trigger {
    max-height: 4.9rem;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease;
}

.wk-add__panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.32s ease;
}

.wk-add--open .wk-add__trigger {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.wk-add__panel--open {
    max-height: 120rem;
    opacity: 1;
    transform: none;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.wk-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    isolation: isolate;
}

.wk-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.5rem;
    transition: box-shadow 0.15s ease;
    border-left: 3px solid transparent;
}

.wk-row:hover {
    box-shadow: var(--shadow-md);
}

/* Nombre */
.wk-row__name {
    min-width: 170px;
    max-width: 200px;
    flex-shrink: 0;
}

.wk-row__name a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: var(--color-primary);
    line-height: 1.3;
    transition: opacity 0.15s ease;
}

.wk-row__first-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.wk-row__last-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-primary);
}

.wk-card:not(.wk-card--open) .wk-row__schedule {
    flex: 1 1 auto;
}

.wk-row__name a:hover {
    opacity: 0.75;
}

/* Check + menú 3 puntos */
.wk-row__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.wk-row__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: #fafafa;
    color: var(--color-text-light);
    transition: transform 0.25s ease;
}

.wk-card--open .wk-row__chevron {
    transform: rotate(180deg);
}

.wk-row__menu-wrap {
    position: relative;
    z-index: 60;
}

.wk-row__menu-wrap--open {
    z-index: 120;
}

.wk-row__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}

.wk-row__menu-btn:hover {
    background: #f0f0f0;
}

.wk-row__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    padding: 0.35rem 0;
    z-index: 130;
}

.wk-row__menu-wrap--open .wk-row__dropdown {
    display: block;
}

.wk-row__dropdown form {
    margin: 0;
}

.wk-row__dropdown a,
.wk-row__dropdown button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: background 0.1s ease;
}

.wk-row__dropdown a:hover,
.wk-row__dropdown button:hover {
    background: rgba(0, 0, 255, 0.04);
}

.wk-row__dropdown-danger {
    color: var(--color-danger) !important;
}

/* Horas semanales */
.wk-row__hours {
    flex-shrink: 0;
    font-size: 0.88rem;
    color: var(--color-text-light);
    font-weight: 500;
    min-width: 48px;
    text-align: center;
    background: #fafafa;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius);
}

/* Horario compacto */
.wk-row__schedule {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    background: #fafafa;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius);
}

.wk-sched {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    white-space: nowrap;
}

.wk-sched__days {
    font-weight: 600;
    color: var(--color-text);
}

.wk-sched__slots {
    color: var(--color-text-light);
}

.wk-sched__sep {
    color: var(--color-border);
    margin: 0 0.3rem;
}

/* Semana actual – calendario */
.wk-row__week {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    background: #fafafa;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius);
}

.wk-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-light);
    background: transparent;
    transition: all 0.15s ease;
}

.wk-day--vacation {
    background: var(--color-vacation);
    color: #065F46;
}

.wk-day--personal {
    background: var(--color-personal);
    color: #7C4700;
}

.wk-day--off {
    color: var(--color-danger);
}

.wk-day--today {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    font-weight: 700;
}

/* --- Worker card accordion --- */
.wk-card {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid #d9dee7;
    box-shadow: var(--shadow-sm);
    background: var(--color-white);
    overflow: visible;
    transition: box-shadow 0.2s ease;
}

.wk-card--menu-open {
    z-index: 90;
}

.wk-card:hover {
    box-shadow: var(--shadow-md);
}

.wk-card--open .wk-row {
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.95rem;
}

.wk-card--open .wk-row__hours,
.wk-card--open .wk-row__schedule,
.wk-card--open .wk-row__week {
    display: none;
}

.wk-card .wk-row {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-left: none;
    cursor: pointer;
}

.wk-card .wk-row:hover {
    box-shadow: none;
}

.wk-card--editing .wk-display-grid {
    display: none;
}

.wk-inline-editor {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e4e8ef;
}

.wk-inline-editor--open {
    display: block;
}

.wk-inline-editor__form {
    margin: 0;
}

.wk-inline-editor__empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.wk-card--editing .wk-inline-editor {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.wk-inline-edit__form {
    margin: 0;
    position: relative;
    padding-top: 2.6rem;
}

.wk-inline-edit__form--create {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0;
}

.wk-inline-edit__panel-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.45rem;
    z-index: 2;
}

.wk-inline-edit__panel-actions--bottom {
    position: static;
    justify-content: flex-end;
    order: 2;
}

.wk-inline-edit__form--create .wk-inline-edit__grid {
    order: 1;
}

.wk-inline-edit__info {
    gap: 1rem;
    padding: 1rem;
}

.wk-inline-edit__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.wk-inline-edit__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.wk-inline-edit__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 12px;
    border: 1px solid #e4e8ef;
    background: var(--color-white);
    color: var(--color-text-light);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wk-inline-edit__icon-btn:hover {
    border-color: #cfd6e1;
    color: var(--color-text);
}

.wk-inline-edit__icon-btn--save {
    color: #0f766e;
}

.wk-inline-edit__icon-btn--cancel {
    color: #9ca3af;
}

.wk-inline-edit__name-fields {
    display: grid;
    gap: 0.55rem;
    width: 100%;
}

.wk-inline-edit__field-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: -0.15rem;
}

.wk-inline-edit__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.wk-inline-edit__contract {
    gap: 0.15rem;
}

.wk-inline-edit__sched {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.wk-inline-edit__schedule-trigger {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.wk-inline-edit__schedule-trigger:hover .wk-sched-row__slot,
.wk-inline-edit__schedule-trigger:hover .wk-sched-row__closed,
.wk-inline-edit__schedule-trigger:hover .wk-inline-edit__schedule-hint {
    color: var(--color-text);
}

.wk-inline-edit__schedule-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color 0.15s ease;
}

.wk-inline-edit__special-trigger {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    background: #fafafa;
    text-align: left;
    cursor: pointer;
}

.wk-inline-edit__special-trigger:hover .wk-inline-edit__schedule-hint {
    color: var(--color-text);
}

.wk-inline-edit__special-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-height: 2rem;
}

.wk-inline-edit__special-preview .wk-expand__muted {
    width: 100%;
    text-align: center;
}

.wk-inline-edit__special-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
    border-radius: 14px;
    background: var(--color-white);
    border: 1px solid #e4e8ef;
}

.wk-inline-edit__special-pill-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
}

.wk-inline-edit__special-pill-meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
}

.wk-inline-edit__leave-trigger {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.wk-inline-edit__leave-trigger:hover .wk-inline-edit__leave-hint {
    color: var(--color-text);
}

.wk-inline-edit__leave-hint {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color 0.15s ease;
}

.wk-inline-edit__services-trigger {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.wk-inline-edit__services-trigger:hover .wk-inline-edit__services-hint {
    color: var(--color-text);
}

.wk-inline-edit__services-preview {
    justify-content: center;
    min-height: 3rem;
}

.wk-inline-edit__services-preview .wk-expand__muted {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
}

.wk-inline-edit__services-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color 0.15s ease;
}

.wk-inline-edit__day {
    padding: 0.35rem 0;
    border-top: 1px solid #ededed;
}

.wk-inline-edit__day:last-child {
    border-bottom: 1px solid #ededed;
}

.wk-inline-edit__day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wk-inline-edit__day-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.wk-inline-edit__business-hours {
    font-size: 0.72rem;
    color: var(--color-text-light);
    text-align: right;
}

.wk-inline-edit__day-slots {
    margin-top: 0.45rem;
    padding-left: 1.55rem;
}

.wk-inline-edit__slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wk-inline-edit__slot-row {
    margin-bottom: 0;
}

.wk-inline-edit__add-slot {
    margin-top: 0.45rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.wk-inline-edit__add-slot:hover {
    text-decoration: underline;
}

.wk-inline-edit__service-picker {
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

.wk-inline-edit__service-icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.75rem;
}

.wk-inline-edit__services-dialog {
    max-width: min(820px, calc(100vw - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wk-inline-edit__services-dialog .svc-modal__body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.wk-inline-edit__schedule-dialog {
    max-width: min(920px, calc(100vw - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wk-inline-edit__schedule-dialog .svc-modal__body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.wk-inline-edit__schedule-modal-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.wk-inline-edit__leave-dialog {
    max-width: min(960px, calc(100vw - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wk-inline-edit__special-dialog {
    max-width: min(960px, calc(100vw - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wk-inline-edit__special-dialog .svc-modal__body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.wk-inline-edit__leave-dialog .svc-modal__body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.wk-inline-edit__leave-allowances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.wk-inline-edit__leave-balance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.wk-inline-edit__leave-balance-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    background: #fafafa;
}

.wk-inline-edit__leave-balance-card--negative {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.05);
}

.wk-inline-edit__leave-balance-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
}

.wk-inline-edit__leave-balance-meta {
    font-size: 0.84rem;
    color: var(--color-text-light);
}

.wk-inline-edit__leave-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wk-inline-edit__leave-list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.wk-inline-edit__leave-rows {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wk-inline-edit__special-rows {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wk-inline-edit__leave-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.9rem;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    background: #fafafa;
}

.wk-inline-edit__special-row {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    background: #fafafa;
}

.wk-inline-edit__special-label-group {
    margin-bottom: 0;
}

.wk-inline-edit__special-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wk-inline-edit__special-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.wk-inline-edit__special-slots {
    display: block;
}

.wk-inline-edit__special-slots--hidden {
    display: none;
}

.wk-inline-edit__special-slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.wk-inline-edit__special-slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
}

.wk-inline-edit__leave-remove {
    min-width: 6.5rem;
}

.wk-inline-edit__service-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.3rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wk-inline-edit__service-icon:hover {
    background: rgba(0, 0, 255, 0.04);
    border-color: rgba(0, 0, 255, 0.1);
}

.wk-inline-edit__service-icon input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.wk-inline-edit__service-icon-visual {
    position: relative;
}

.wk-inline-edit__service-icon-label {
    font-size: 0.72rem;
    line-height: 1.15;
    color: var(--color-text-light);
    text-align: center;
}

.wk-inline-edit__service-icon-check {
    position: absolute;
    top: 0.2rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #0f766e;
    color: white;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.wk-inline-edit__service-icon--selected {
    background: rgba(15, 118, 110, 0.07);
    border-color: rgba(15, 118, 110, 0.22);
}

.wk-inline-edit__service-icon--selected .wk-inline-edit__service-icon-check {
    opacity: 1;
    transform: scale(1);
}

.wk-inline-edit__service-icon--selected .wk-inline-edit__service-icon-label {
    color: var(--color-text);
    font-weight: 600;
}

.wk-inline-edit__service-icon input:checked + .wk-inline-edit__service-icon-visual + .wk-inline-edit__service-icon-check {
    opacity: 1;
    transform: scale(1);
}

.wk-inline-edit__service-icon input:checked ~ .wk-inline-edit__service-icon-label {
    color: var(--color-text);
    font-weight: 600;
}

.wk-inline-edit__service-icon input:checked ~ .wk-inline-edit__service-icon-label,
.wk-inline-edit__service-icon input:checked + .wk-inline-edit__service-icon-visual {
    filter: none;
}

.wk-inline-edit__service-icon:has(input:checked) {
    background: rgba(15, 118, 110, 0.07);
    border-color: rgba(15, 118, 110, 0.22);
}

/* ============================================
   WORKER PAGES
   ============================================ */
.wk-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wk-page__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-white);
    border: 1px solid #d9dee7;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
}

.wk-page__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.wk-page__title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
}

.wk-page__subtitle {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    font-size: 0.92rem;
    color: var(--color-text-light);
}

.wk-editor,
.wk-show__stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wk-editor__card,
.wk-show__card {
    background: var(--color-white);
    border: 1px solid #d9dee7;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
}

.wk-editor__header,
.wk-show__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.wk-editor__header--stacked {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
}

.wk-editor__title,
.wk-show__section-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-text);
}

.wk-editor__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.wk-editor__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.wk-editor__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wk-service-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.wk-service-picker__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d9dee7;
    border-radius: var(--radius);
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wk-service-picker__item:hover {
    border-color: rgba(0, 0, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.05);
}

.wk-service-picker__item input {
    margin: 0;
}

.wk-service-picker__content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wk-service-picker__name {
    font-weight: 600;
    color: var(--color-text);
}

.wk-service-picker__meta {
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.wk-editor__schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wk-editor__day-card {
    border: 1px solid #e4e8ef;
    border-radius: var(--radius);
    background: #fafafa;
    padding: 0.95rem 1rem;
}

.wk-editor__day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.wk-editor__day-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

.wk-editor__business-hours {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.wk-editor__day-options {
    display: flex;
    align-items: center;
    padding-left: 1.85rem;
    margin-bottom: 0.65rem;
}

.wk-editor__split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.wk-editor__split-toggle input {
    margin: 0;
}

.wk-editor__slots {
    padding-left: 1.85rem;
}

.wk-editor__slot-row {
    margin-bottom: 0.5rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.65rem;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    background: var(--color-white);
}

.wk-editor__slot-input {
    min-width: 0;
}

.wk-editor__actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.wk-show__hero-meta {
    margin-top: 0.55rem;
}

.wk-show__hero-actions {
    display: flex;
    gap: 0.5rem;
}

.wk-show__summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.8fr));
    gap: 0.85rem;
}

.wk-show__summary-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 8.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e4e8ef;
    border-radius: var(--radius);
    background: #fafafa;
}

.wk-show__summary-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.wk-show__summary-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.wk-show__summary-box--vacation .wk-show__summary-value {
    color: var(--color-primary);
}

.wk-show__summary-box--personal .wk-show__summary-value {
    color: var(--color-warning);
}

.wk-show__summary-meta {
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.wk-show__service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: auto;
}

.wk-show__service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.72rem;
    border-radius: var(--radius);
    background: rgba(0, 0, 255, 0.08);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
}

.wk-show__schedule-grid {
    display: grid;
    gap: 0.6rem;
}

.wk-show__schedule-day {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid #e4e8ef;
    border-radius: var(--radius);
    background: #fafafa;
}

.wk-show__schedule-name {
    font-weight: 700;
    color: var(--color-text);
}

.wk-show__schedule-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wk-show__notes {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.wk-show__inline-form {
    margin: 0;
}

.wk-show__empty {
    color: var(--color-text-light);
    text-align: center;
    padding: 1rem;
}

@media (max-width: 900px) {
    .wk-page__hero {
        flex-direction: column;
        align-items: stretch;
    }

    .wk-show__hero-actions,
    .wk-editor__actions {
        flex-wrap: wrap;
    }

    .wk-show__summary-grid {
        grid-template-columns: 1fr;
    }

    .wk-show__schedule-day {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
}

@media (max-width: 640px) {
    .wk-page__hero,
    .wk-editor__card,
    .wk-show__card {
        padding: 1rem;
    }

    .wk-page__title {
        font-size: 1.3rem;
    }

    .wk-editor__slots {
        padding-left: 0;
    }

    .wk-editor__slot-row {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    .wk-editor__slot-remove {
        width: 100%;
        min-height: 2.5rem;
    }

    .wk-service-picker {
        grid-template-columns: 1fr;
    }

    .wk-show__hero-actions {
        width: 100%;
    }

    .wk-show__hero-actions .btn,
    .wk-editor__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- Expandable panel --- */
.wk-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wk-expand__inner {
    padding: 0 1.5rem 1.5rem;
}

.wk-expand__grid {
    display: grid;
    grid-template-columns: 12.5rem 14.75rem minmax(23rem, 1.6fr) 13.5rem;
    gap: 1rem;
    align-items: stretch;
}

.wk-expand__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fafafa;
    width: 100%;
    max-width: 12.5rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    box-sizing: border-box;
}

.wk-expand__contract {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.wk-expand__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.wk-expand__section {
    min-width: 0;
    background: #fafafa;
    padding: 0.75rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}

.wk-expand__joined {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    align-self: stretch;
    background: #fafafa;
    padding: 0.95rem 1.05rem 1rem;
    border-radius: var(--radius);
    box-sizing: border-box;
}

.wk-expand__joined-header {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 1rem;
}

.wk-expand__joined-title,
.wk-expand__title {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

.wk-expand__joined-title {
    margin: 0;
    text-align: center;
}

.wk-expand__joined-month {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    justify-self: center;
}

.wk-expand__joined-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #b7b7b7;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease;
}

.wk-expand__joined-arrow:hover {
    color: var(--color-text);
}

.wk-expand__joined-arrow--hidden {
    visibility: hidden;
    pointer-events: none;
}

.wk-expand__joined-arrow:focus-visible {
    outline: 2px solid rgba(0, 0, 255, 0.18);
    outline-offset: 2px;
    border-radius: 6px;
}

.wk-expand__joined-body {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    gap: 1.3rem;
    align-items: start;
}

.wk-expand__joined-body--hidden {
    display: none;
}

.wk-expand__leave-col,
.wk-expand__calendar-col {
    min-width: 0;
}

.wk-expand__leave-col {
    text-align: center;
}

.wk-expand__title {
    margin-bottom: 0.75rem;
}

.wk-expand__title--contract {
    margin-bottom: 0;
}

.wk-expand__section--schedule {
    padding: 0.6rem 0.95rem 0.75rem;
}

.wk-expand__section--services {
    padding: 0.8rem 0.9rem;
}

.wk-expand__section--services .wk-expand__title {
    text-align: center;
    margin-bottom: 0.95rem;
}

.wk-expand__section--schedule .wk-expand__title {
    text-align: center;
    margin-bottom: 0.35rem;
}

.wk-expand__section--schedule .wk-expand__sched {
    flex: 1;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
}

.wk-expand__muted {
    font-size: 0.82rem;
    color: var(--color-text-light);
}

/* Schedule rows in expanded */
.wk-expand__sched {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wk-sched-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    padding: 0.24rem 0;
    border-top: 1px solid #ededed;
    line-height: 1.2;
}

.wk-sched-row:last-child {
    border-bottom: 1px solid #ededed;
}

.wk-sched-row__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    width: 1rem;
    min-width: 1rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-text);
}

.wk-sched-row__closed {
    color: var(--color-danger);
    font-size: 0.8rem;
    font-style: normal;
}

.wk-sched-row__slot {
    color: var(--color-text-light);
    white-space: nowrap;
}

.wk-expand__section--schedule .wk-sched-row__slot + .wk-sched-row__slot {
    margin-left: 0.8rem;
}

/* Leave stats */
.wk-leave-block {
    margin-bottom: 0;
}

.wk-leave-block--personal {
    margin-top: 1.35rem;
}

.wk-leave-block__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    margin-bottom: 0.55rem;
    text-align: center;
}

.wk-leave-stats {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.1rem 0.75rem;
    font-size: 0.78rem;
    color: var(--color-text-light);
    width: max-content;
    margin: 0 auto;
}

.wk-leave-stats__val {
    text-align: right;
    font-weight: 500;
    color: var(--color-text-light);
}

.wk-leave-divider {
    display: block;
    height: 4px;
    border-radius: 999px;
    margin: 0 auto 0.9rem;
    width: 70px;
}

.wk-leave-divider--vacation {
    background: var(--color-vacation);
}

.wk-leave-divider--personal {
    background: #f1d28a;
}

/* Monthly calendar */
.wk-cal {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: center;
}

.wk-cal th {
    font-weight: 600;
    color: var(--color-text);
    padding: 0 0 0.75rem;
    font-size: 0.84rem;
}

.wk-cal td {
    padding: 0.22rem 0.08rem;
    font-weight: 500;
    color: var(--color-text);
    border-top: 1px solid #ececec;
}

.wk-cal__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.56rem;
    height: 1.56rem;
    padding: 0 0.16rem;
    border-radius: 7px;
}

.wk-cal--outside {
    color: var(--color-text-light) !important;
    opacity: 0.4;
}

.wk-cal--vacation .wk-cal__num {
    background: rgba(150, 252, 178, 0.75);
    color: #065F46 !important;
}

.wk-cal--personal .wk-cal__num {
    background: rgba(252, 218, 150, 0.82);
    color: #7C4700 !important;
}

.wk-cal--holiday .wk-cal__num {
    background: rgba(248, 113, 113, 0.2);
    color: #b91c1c !important;
}

.wk-cal--off {
    color: var(--color-danger) !important;
}

.wk-cal--today .wk-cal__num {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    font-weight: 700 !important;
}

.wk-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    justify-items: center;
    align-content: flex-start;
}

.service-icon--worker {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
}

.navbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.navbar__toggle:hover {
    background: var(--color-primary-dark);
}

.mobile-subnav {
    display: none;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
    position: fixed;
    top: 68px;
    right: max(1rem, calc((100vw - 1200px) / 2 + 1rem));
    width: min(188px, calc(100vw - 2rem));
    background: linear-gradient(180deg, #1100f0 0%, #0500c7 100%);
    z-index: 200;
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid rgba(138, 152, 255, 0.65);
    box-shadow: 0 18px 40px rgba(10, 12, 96, 0.32);
    overflow: hidden;
    padding: 0.25rem 0;
}

.mobile-menu--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu__item {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.mobile-menu__panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    overflow: hidden;
}

.mobile-menu__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.42rem 0.72rem;
    background: none;
    border: 0;
    color: var(--color-white);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.mobile-menu__item + .mobile-menu__item {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.mobile-menu__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}

.mobile-menu__item-icon svg {
    width: 100%;
    height: 100%;
}

.mobile-menu__item-label {
    font-size: inherit;
    font-weight: inherit;
}

.mobile-menu__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-menu__item--logout,
.mobile-menu__item--logout:visited {
    color: var(--color-white);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* --- Tablet (768px – 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        padding: 0 1.25rem;
    }

    /* Fila de trabajador: ocultar horario compacto, mantener semana */
    .wk-row__schedule {
        display: none;
    }

    /* Panel expandido: grid 2×2 */
    .wk-expand__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* Vacaciones+Calendario: ocupan las dos columnas */
    .wk-expand__joined {
        grid-column: 1 / -1;
    }

    .wk-expand__joined-body {
        grid-template-columns: 1fr 1.1fr;
    }

    .svc-row,
    .svc-header {
        grid-template-columns: minmax(0, 1.2fr) minmax(8.5rem, 0.85fr) minmax(10.5rem, 1fr) minmax(7rem, 0.7fr) 88px;
    }
}

@media (max-width: 768px) {
    /* --- Navegación --- */
    .navbar {
        padding: 0 1rem;
    }

    .navbar__nav--desktop {
        display: none;
    }

    .mobile-subnav {
        position: sticky;
        top: 64px;
        z-index: 95;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: min(100%, 1200px);
        margin: 0 auto;
        padding: 0.45rem 0.5rem 0.55rem;
        background: var(--color-white);
    }

    .mobile-subnav__link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0.45rem 0.6rem;
        color: var(--color-text-light);
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
        border-radius: 999px;
        transition: color 0.15s ease;
    }

    .mobile-subnav__link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 32%;
        height: 3px;
        background: var(--color-primary);
        border-radius: 2px;
        transition: transform 0.2s ease;
    }

    .mobile-subnav__link:hover {
        color: var(--color-primary);
    }

    .mobile-subnav__link:hover::after {
        transform: translateX(-50%) scaleX(1);
    }

    .mobile-subnav__link--active {
        color: var(--color-primary);
    }

    .mobile-subnav__link--active::after {
        transform: translateX(-50%) scaleX(1);
    }

    .mobile-menu {
        top: 72px;
        right: 1rem;
        width: min(188px, calc(100vw - 1rem));
    }

    .mobile-menu__item {
        padding: 0.55rem 0.75rem;
    }

    .mobile-menu__item-label {
        font-size: 0.8rem;
    }

    /* --- Layout general --- */
    .main-content {
        padding: 0 1rem;
        margin: 1rem auto;
    }

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

    .table th,
    .table td {
        padding: 0.5rem;
    }

    .schedule-day {
        grid-template-columns: 1fr;
    }

    /* --- Lista de servicios en móvil --- */
    .svc-header {
        display: none;
    }

    .svc-list {
        gap: 0.75rem;
    }

    .svc-row {
        gap: 0.75rem 0.65rem;
        padding: 0.95rem;
    }

    .svc-row-wrap:not(.svc-row-wrap--editing) .svc-row--display {
        max-height: 18rem;
    }

    .svc-row-wrap--editing .svc-row-edit {
        max-height: 26rem;
    }

    .svc-add-inline--open .svc-add-inline__content {
        max-height: 40rem;
    }

    .svc-inline-create-wrap {
        margin-bottom: 0.75rem;
    }

    .svc-modal {
        padding: 0.75rem;
    }

    .svc-modal__dialog {
        padding: 0.9rem;
        border-radius: 16px;
    }

    .svc-row--display {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'name menu'
            'dur price'
            'work work';
        align-items: start;
    }

    .svc-row--display .svc-row__name {
        grid-area: name;
        min-width: 0;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .svc-row--display .svc-row__name-text {
        min-height: auto;
        padding: 0;
        background: transparent;
        text-align: left;
        justify-content: flex-start;
    }

    .svc-row--display .svc-row__pill {
        text-align: left;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .svc-row--display .svc-row__dur,
    .svc-row--display .svc-row__work,
    .svc-row--display .svc-row__price {
        min-height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0.7rem 0.8rem;
        border-radius: 14px;
        text-align: left;
        font-size: 0.82rem;
        color: var(--color-text-light);
        flex-direction: column;
        gap: 0.35rem;
    }

    .svc-row--display .svc-row__dur {
        grid-area: dur;
    }

    .svc-row--display .svc-row__work {
        grid-area: work;
    }

    .svc-row--display .svc-row__price {
        grid-area: price;
    }

    .svc-row--display .svc-row__dur::before,
    .svc-row--display .svc-row__work::before,
    .svc-row--display .svc-row__price::before {
        display: block;
        margin-bottom: 0.05rem;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--color-text);
    }

    .svc-row--display .svc-row__dur::before {
        content: 'Duración';
    }

    .svc-row--display .svc-row__work::before {
        content: 'Trabajo';
    }

    .svc-row--display .svc-row__price::before {
        content: 'Precio';
    }

    .svc-row--display .svc-row__work-chips {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .svc-row--display .svc-row__work-chip {
        min-width: 0;
        padding: 0.32rem 0.6rem;
        border-radius: 999px;
        background: rgba(0, 0, 255, 0.06);
        font-size: 0.8rem;
    }

    .svc-row--display .svc-row__work-chip--empty {
        background: #f1f3f7;
        color: var(--color-text-light);
    }

    .svc-row__menu-wrap {
        grid-area: menu;
        grid-row: auto;
        grid-column: auto;
        justify-self: end;
        align-self: start;
    }

    .svc-row__dropdown {
        right: 0;
        left: auto;
    }

    .svc-row--create {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .svc-row--create .svc-row__name {
        align-items: center;
        gap: 0.75rem;
    }

    .svc-row--create .svc-row__name-text {
        padding: 0.25rem;
    }

    .svc-row--create .svc-row__dur,
    .svc-row--create .svc-row__work,
    .svc-row--create .svc-row__price {
        min-height: auto;
        padding: 0;
        background: transparent;
        border-radius: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .svc-row--create .svc-row__dur::before,
    .svc-row--create .svc-row__work::before,
    .svc-row--create .svc-row__price::before {
        display: block;
        margin-bottom: 0.35rem;
        text-align: left;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--color-text);
    }

    .svc-row--create .svc-row__dur::before {
        content: 'Duración';
    }

    .svc-row--create .svc-row__work::before {
        content: 'Tiempo de trabajo';
    }

    .svc-row--create .svc-row__price::before {
        content: 'Precio';
    }

    .svc-row--create .svc-inline__segments {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .svc-row--create .svc-row__actions {
        justify-content: flex-end;
        padding-top: 0.15rem;
    }

    .svc-row__work-chips,
    .svc-inline__segments {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .svc-inline__action {
        width: 38px;
        height: 38px;
    }

    .svc-add-inline__trigger .wk-add__link--button {
        padding: 0.95rem 1rem;
    }

    /* --- Fila de trabajador en móvil --- */
    /* Chevron (order 1) | Nombre (order 2) | Acciones (order 3)
       Horas (order 4, oculto) | Semana (order 5, ancho completo) | Horario (order 6, oculto) */
    .wk-row {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.875rem 1rem;
    }

    .wk-row__chevron {
        order: 1;
    }

    .wk-row__name {
        order: 2;
        min-width: unset;
        max-width: unset;
        flex: 1;
    }

    .wk-row__actions {
        order: 3;
    }

    /* Ocultar horas y horario compacto: la info se ve en el panel expandido */
    .wk-row__hours {
        display: none;
    }

    .wk-row__schedule {
        display: none;
    }

    /* Minicalendario semanal: ocupa todo el ancho debajo del nombre */
    .wk-row__week {
        order: 4;
        width: 100%;
        justify-content: flex-start;
        padding-left: 2.25rem; /* alineado bajo el nombre (desplazado por chevron) */
    }

    /* --- Panel expandido en móvil --- */
    .wk-expand__inner {
        padding: 0 1rem 1rem;
    }

    /* Columna única: las 4 secciones se apilan */
    .wk-expand__grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    /* Info: horizontal en vez de vertical para ahorrar espacio */
    .wk-expand__info {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        width: 100%;
        max-width: none;
        padding: 0.875rem 1rem;
        text-align: center;
    }

    .wk-inline-edit__info {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.8rem;
        text-align: left;
    }

    .wk-inline-edit__header {
        justify-content: flex-start;
    }

    /* Bloque vacaciones + calendario: apilar verticalmente */
    .wk-expand__joined {
        gap: 0.9rem;
        padding: 0.9rem 1rem;
    }

    .wk-expand__joined-header {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.5rem;
    }

    .wk-expand__joined-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .wk-inline-edit__leave-list-head {
        flex-direction: column;
        align-items: stretch;
    }

    .wk-inline-edit__leave-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        align-items: stretch;
    }

    .wk-inline-edit__special-dates {
        grid-template-columns: 1fr;
    }

    .wk-inline-edit__special-options {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .wk-inline-edit__special-slot-row {
        grid-template-columns: 1fr;
    }

    .wk-inline-edit__leave-row .form-group {
        margin-bottom: 0;
    }

    .wk-inline-edit__leave-row .form-group label {
        margin-bottom: 0.38rem;
    }

    .wk-inline-edit__leave-remove {
        width: 100%;
        min-width: 0;
    }

    /* Calendario mensual en móvil: fuente más pequeña */
    .wk-cal {
        font-size: 0.72rem;
    }

    .wk-cal__num {
        min-width: 1.55rem;
        height: 1.55rem;
        font-size: 0.7rem;
    }
}

/* ============================================
   PAGE LOADER
   ============================================ */
.bh-page {
    display: grid;
    gap: 1.5rem;
}

.bh-global-link {
    margin-bottom: 0;
}

.bh-global-link__anchor {
    text-decoration: none;
}

.bh-global-page {
    display: grid;
    gap: 1.25rem;
}

.bh-global-toolbar {
    display: block;
    padding: 1.2rem 1.4rem;
    border: 1px solid #e6eaf2;
    border-radius: 22px;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}

.bh-global-toolbar__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.bh-global-toolbar__back {
    width: auto;
    white-space: nowrap;
    margin-left: auto;
}

.bh-global-toolbar__content {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.bh-global-toolbar__title-wrap {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.bh-global-toolbar__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.bh-global-toolbar__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
}

.bh-global-toolbar__subtitle {
    margin: 0;
    max-width: 52ch;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.bh-global-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 1.25rem;
    align-items: start;
}

.bh-global-calendar-card,
.bh-global-sidebar {
    border: 1px solid #e6eaf2;
    border-radius: 26px;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.bh-global-calendar-card {
    padding: 1.15rem 1.2rem 1.25rem;
    min-height: 560px;
}

.bh-global-calendar-card__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.bh-global-calendar-card__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.bh-global-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid #edf1f7;
    border-radius: 999px;
    background: #fafbff;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.bh-global-legend__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bh-global-legend__cell .bh-global-cal__day-btn {
    min-width: 1.6rem;
    height: 1.6rem;
    font-size: 0.74rem;
    border-radius: 8px;
    box-shadow: none;
    cursor: default;
    transform: none;
}

.bh-global-calendar-card__month-nav {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.bh-global-calendar-card__month-label {
    min-width: 11rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.bh-global-cal {
    width: 100%;
    table-layout: fixed;
}

.bh-global-cal th {
    padding-bottom: 0.72rem;
    font-size: 0.8rem;
    color: #5f6980;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.bh-global-cal td {
    padding: 0.24rem 0.12rem;
    height: 3.9rem;
    vertical-align: top;
    border-top: 1px solid #eef2f8;
}

.bh-global-cal__day-btn {
    min-width: 2.12rem;
    height: 2.12rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #cfd7e6;
    color: #172033;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.bh-global-cal__day-btn:hover {
    transform: translateY(-1px);
    border-color: #98a5c2;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.bh-global-cal__day-btn--selected {
    background: rgba(17, 17, 17, 0.06) !important;
    color: var(--color-text) !important;
    border-color: #80889a;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
}

.bh-global-cal--business-special .wk-cal__num {
    background: linear-gradient(180deg, #f3f2ff 0%, #e6e4ff 100%);
    border-color: rgba(60, 68, 255, 0.38);
    color: #2f35d7 !important;
}

.bh-global-cal--incident .wk-cal__num {
    border-color: rgba(245, 158, 11, 0.75);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
}

.bh-global-cal .wk-cal--today .wk-cal__num {
    outline: 2px solid #111111;
    outline-offset: -1px;
}

.bh-global-cal .wk-cal--holiday .wk-cal__num {
    background: linear-gradient(180deg, #fff2f1 0%, #ffe2df 100%);
    border-color: rgba(239, 68, 68, 0.28);
}

.bh-global-cal .wk-cal--off .wk-cal__num {
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
    border-color: #2d3443;
}

.bh-global-cal .wk-cal--vacation .wk-cal__num {
    background: linear-gradient(180deg, #ebfff0 0%, #d5fbe0 100%);
    border-color: rgba(34, 197, 94, 0.34);
}

.bh-global-cal .wk-cal--personal .wk-cal__num {
    background: linear-gradient(180deg, #fff8ea 0%, #ffe8b8 100%);
    border-color: rgba(245, 158, 11, 0.34);
}

.bh-global-sidebar {
    position: sticky;
    top: 108px;
    padding: 1.05rem 1rem 1.05rem;
}

.bh-global-sidebar__head {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.9rem;
}

.bh-global-sidebar__title {
    margin: 0;
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--color-text);
}

.bh-global-sidebar__subtitle {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--color-text-light);
}

.bh-global-detail {
    display: grid;
    gap: 1rem;
}

.bh-global-detail__section {
    display: grid;
    gap: 0.7rem;
    padding: 0.95rem 0.95rem 1rem;
    border-radius: 18px;
    background: #fafafa;
}

.bh-global-detail__section--business {
    border: 1px solid rgba(0, 0, 255, 0.08);
    background: rgba(0, 0, 255, 0.03);
}

.bh-global-detail__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.bh-global-detail__section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.bh-global-detail__section-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.bh-global-detail__message {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--color-text-light);
}

.bh-global-detail__slots,
.bh-global-worker__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.bh-global-workers {
    display: grid;
    gap: 0.8rem;
}

.bh-global-worker {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem;
    border: 1px solid #e7eaf1;
    border-radius: 16px;
    background: var(--color-white);
}

.bh-global-worker--warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(255, 251, 235, 0.95);
}

.bh-global-worker__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.bh-global-worker__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.bh-global-worker__source {
    margin: 0.18rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.bh-global-worker__warning {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #9a6700;
}

.bh-global-empty {
    padding: 1rem;
    border-radius: 16px;
    background: var(--color-white);
    color: var(--color-text-light);
    text-align: center;
}

.bh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.bh-card {
    min-width: 0;
    min-height: 20.5rem;
    padding: 1.3rem 1.1rem 1.15rem;
    border: 1px solid #e6eaf2;
    border-radius: 26px;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.bh-card--special-create {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.bh-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.bh-card__header--compact {
    margin-bottom: 0.95rem;
}

.bh-card__title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--color-primary);
}

.bh-card__dropdown {
    min-width: 152px;
}

.bh-inline-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    margin: 0 0.16rem;
    vertical-align: text-bottom;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--color-text-light);
}

.bh-opening-list {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.9rem;
    border-radius: 20px;
    background: #fafafa;
}

.bh-opening-list--worker-style {
    gap: 0;
}

.bh-opening-row {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 2.95rem;
    border-bottom: 1px solid #eeeeee;
}

.bh-opening-row--worker-style {
    grid-template-columns: 1rem 72px minmax(0, 1fr);
    gap: 0.7rem;
    min-height: 2.55rem;
    padding: 0.18rem 0;
}

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

.bh-opening-row__day {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.bh-opening-row__day-abbr {
    width: 1rem;
    min-width: 1rem;
}

.bh-opening-row__day-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text);
}

.bh-opening-row__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-start;
}

.bh-opening-row__slots--worker-style {
    gap: 0.8rem;
}

.bh-opening-row__slot {
    display: inline-flex;
    align-items: center;
    min-height: 1.95rem;
    padding: 0.2rem 0.65rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
    background: rgba(0, 0, 255, 0.05);
}

.bh-opening-row--worker-style .wk-sched-row__slot + .wk-sched-row__slot {
    margin-left: 0;
}

.bh-calendar-shell {
    height: calc(100% - 2.2rem);
    gap: 0.8rem;
    padding: 0.8rem 0.9rem 0.95rem;
}

.bh-calendar-shell__header {
    grid-template-columns: 1fr;
}

.bh-calendar-shell__month-nav {
    justify-self: center;
}

.bh-calendar-shell__panel {
    grid-template-columns: 1fr;
    gap: 0;
}

.bh-calendar-shell__grid {
    width: 100%;
}

.bh-cal {
    table-layout: fixed;
}

.bh-cal td {
    padding: 0.18rem 0.08rem;
}

.bh-cal--special .bh-cal__day-btn {
    background: rgba(248, 113, 113, 0.24);
    color: #b91c1c;
}

.bh-cal__day-btn {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bh-cal__day-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.1);
}

.bh-cal__day-btn:disabled {
    cursor: default;
}

.bh-cal__day-btn--special {
    font-weight: 700;
}

.bh-cal__day-btn--selected {
    background: rgba(0, 0, 255, 0.16) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.18);
}

.bh-special-create {
    width: 100%;
    border: 1.5px dashed #d7dbe6;
    border-radius: 22px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    color: #b9bcc5;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.bh-special-create:hover {
    color: var(--color-primary);
    border-color: rgba(0, 0, 255, 0.25);
    background: rgba(0, 0, 255, 0.03);
}

.bh-special-create__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bh-special-create__text {
    font-size: 1rem;
    font-weight: 500;
}

.bh-special-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.bh-special-item {
    position: relative;
    align-self: start;
    border: 1px solid #e6eaf2;
    border-radius: 22px;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bh-special-item--selected {
    border-color: rgba(0, 0, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.05), var(--shadow-sm);
}

.bh-special-item__trigger {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.bh-special-item__head {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.bh-special-item__title {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-text-light);
    line-height: 1.2;
}

.bh-special-item__meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
}

.bh-special-item__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.bh-special-item__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    transition: transform 0.18s ease;
}

.bh-special-item--open .bh-special-item__chevron {
    transform: rotate(180deg);
}

.bh-special-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.bh-special-item__panel-inner {
    display: grid;
    gap: 0.8rem;
    padding: 0 1rem 1rem;
}

.bh-special-item__schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.bh-special-item__hint {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    background: #fafafa;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.bh-empty-state {
    grid-column: 1 / -1;
}

.bh-empty-state__hint {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.bh-regular-dialog {
    max-width: min(960px, calc(100vw - 2rem));
    max-height: min(calc(100dvh - 2rem), 820px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bh-regular-dialog .svc-modal__body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.bh-regular-form__list {
    max-height: none;
}

.bh-regular-form__slot-row,
.bh-special-form__slot-row {
    margin-bottom: 0;
}

.bh-special-dialog {
    max-width: min(760px, calc(100vw - 2rem));
}

.bh-special-form__options {
    margin-bottom: 0.65rem;
}

.bh-special-form__slots-wrap {
    margin-top: 0.25rem;
}

.bh-special-form__slots-list {
    gap: 0.65rem;
}

.bh-special-form__slot-row[hidden] {
    display: none;
}

@media (max-width: 1100px) {
    .bh-global-layout {
        grid-template-columns: 1fr;
    }

    .bh-global-sidebar {
        position: static;
    }

    .bh-grid,
    .bh-special-list {
        grid-template-columns: 1fr 1fr;
    }

    .bh-card--special-create {
        grid-column: 1 / -1;
        min-height: 10rem;
    }
}

@media (max-width: 900px) {
    .bh-grid,
    .bh-special-list {
        grid-template-columns: 1fr;
    }

    .bh-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .bh-global-toolbar__row {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .bh-global-toolbar__back {
        margin-left: 0;
    }

    .bh-global-toolbar__back {
        width: 100%;
    }

    .bh-global-calendar-card,
    .bh-global-sidebar {
        border-radius: 20px;
    }

    .bh-global-calendar-card {
        min-height: 0;
        padding: 0.95rem 0.85rem 1rem;
    }

    .bh-global-sidebar {
        padding: 0.95rem 0.85rem 1rem;
    }

    .bh-global-calendar-card__month-nav {
        gap: 0.7rem;
    }

    .bh-global-calendar-card__month-label {
        min-width: 0;
        font-size: 0.92rem;
    }

    .bh-global-cal__day-btn {
        min-width: 1.86rem;
        height: 1.86rem;
    }

    .bh-global-cal td {
        height: 3.4rem;
    }

    .bh-page {
        gap: 1rem;
    }

    .bh-grid {
        gap: 1rem;
    }

    .bh-card {
        padding: 1rem 0.9rem;
        border-radius: 20px;
    }

    .bh-opening-list {
        padding: 0.4rem 0.7rem;
    }

    .bh-opening-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0.45rem 0;
    }

    .bh-special-item__trigger {
        padding: 0.85rem 0.9rem;
    }

    .bh-special-item__panel-inner {
        padding: 0 0.9rem 0.9rem;
    }

    .bh-special-create {
        min-height: 8.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.page-loader--visible {
    opacity: 1;
    pointer-events: all;
}

.page-loader__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

::view-transition-old(root) {
    animation: 150ms ease-out both fade-out;
}

::view-transition-new(root) {
    animation: 200ms ease-in both fade-in;
}

/* El navbar no se anima, se queda estático */
::view-transition-old(navbar) {
    animation: none;
}

::view-transition-new(navbar) {
    animation: none;
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
}