/*
|--------------------------------------------------------------------------
| AgendaPeluqueria - Admin Panel CSS
|--------------------------------------------------------------------------
|
| Ajustes visuales propios del panel de Filament.
|
| Objetivos:
| - Mejorar la experiencia móvil.
| - Evitar scroll horizontal innecesario en listados.
| - Mantener el calendario usable.
| - Mejorar dashboard, ficha de cliente y estados de cita.
|
*/

/*
|--------------------------------------------------------------------------
| 1. Variables visuales
|--------------------------------------------------------------------------
*/

:root {
    --admin-card-radius: 1rem;
    --admin-card-radius-lg: 1.25rem;
    --admin-border-color: rgba(148, 163, 184, 0.25);
    --admin-border-soft: rgba(148, 163, 184, 0.16);
    --admin-shadow-soft:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 20px rgba(15, 23, 42, 0.06);
    --admin-shadow-card:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 32px rgba(15, 23, 42, 0.08);
    --admin-amber: rgb(245, 158, 11);
    --admin-amber-dark: rgb(217, 119, 6);
    --admin-blue: rgb(14, 165, 233);
    --admin-green: rgb(22, 163, 74);
    --admin-red: rgb(220, 38, 38);
    --admin-gray: rgb(100, 116, 139);
}

/*
|--------------------------------------------------------------------------
| 2. Topbar y menú de usuario
|--------------------------------------------------------------------------
*/

.fi-topbar {
    min-height: 4rem;
}

.fi-topbar .fi-user-menu {
    position: fixed !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    z-index: 60 !important;
}

.fi-topbar .fi-user-menu > button {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 9999px !important;
    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.18),
        0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

@media (max-width: 768px) {
    .fi-topbar .fi-user-menu {
        right: 1rem !important;
        bottom: 1rem !important;
    }

    .fi-topbar .fi-user-menu > button {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
}

/*
|--------------------------------------------------------------------------
| 3. Layout principal
|--------------------------------------------------------------------------
*/

.fi-main,
.fi-main > .fi-page,
.fi-page-content {
    max-width: none !important;
}

.fi-wi-widget {
    min-width: 0 !important;
}

@media (min-width: 1024px) {
    .fi-main {
        padding-inline-start: 1rem !important;
        padding-inline-end: 1rem !important;
    }

    .fi-page {
        gap: 1rem !important;
    }
}

@media (min-width: 1280px) {
    .fi-main {
        padding-inline-start: 1.25rem !important;
        padding-inline-end: 1.25rem !important;
    }
}

/*
|--------------------------------------------------------------------------
| 4. Calendario responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    .fc {
        width: 100%;
        font-size: 12px;
    }

    .fc .fc-toolbar.fc-header-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .fc .fc-toolbar-chunk {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .fc .fc-toolbar-chunk:first-child {
        order: 1 !important;
        flex-wrap: wrap !important;
    }

    .fc .fc-toolbar-chunk:nth-child(2) {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .fc .fc-toolbar-chunk:last-child {
        order: 2 !important;
        margin-left: auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .fc .fc-toolbar-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .fc .fc-button {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .fc .fc-view-harness {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .fc .fc-timeGridWeek-view,
    .fc .fc-dayGridMonth-view {
        min-width: 860px !important;
    }

    .fc .fc-timeGridDay-view {
        min-width: 100% !important;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: 12px !important;
        line-height: 1.15 !important;
        padding: 6px 2px !important;
    }

    .fc .fc-timegrid-slot-label {
        font-size: 11px !important;
    }

    .fc-event {
        font-size: 11px !important;
        line-height: 1.2 !important;
        padding: 3px 4px !important;
        border-radius: 6px !important;
    }

    .fc-event-title,
    .fc-event-time {
        white-space: normal !important;
        line-height: 1.2 !important;
    }
}

@media (min-width: 769px) {
    .fc .fc-toolbar-title {
        font-size: 24px !important;
        font-weight: 700 !important;
    }

    .fc .fc-button {
        border-radius: 8px !important;
    }

    .fc-event {
        border-radius: 8px !important;
        padding: 4px 6px !important;
    }
}

/*
|--------------------------------------------------------------------------
| 5. Tablas en móvil: formato card
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    .fi-ta {
        border-radius: var(--admin-card-radius) !important;
        overflow: hidden !important;
    }

    .fi-ta-content,
    .fi-ta-table {
        overflow-x: visible !important;
    }

    .fi-ta-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .fi-ta-header,
    .fi-ta-header-toolbar,
    .fi-ta-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }

    .fi-ta-search-field {
        width: 100% !important;
        max-width: 100% !important;
    }

    .fi-ta-table thead {
        display: none !important;
    }

    .fi-ta-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        background: rgb(248, 250, 252) !important;
    }

    .fi-ta-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid var(--admin-border-color) !important;
        border-radius: var(--admin-card-radius) !important;
        background: #ffffff !important;
        box-shadow: var(--admin-shadow-soft) !important;
        overflow: hidden !important;
        padding: 0.75rem !important;
        row-gap: 0.35rem !important;
        column-gap: 0.75rem !important;
    }

    .fi-ta-table td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
    }

    .fi-ta-table td,
    .fi-ta-table td * {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .fi-ta-table td:first-child {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 0.15rem !important;
    }

    .fi-ta-table td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        color: rgb(15, 23, 42) !important;
    }

    .fi-ta-table td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        color: rgb(71, 85, 105) !important;
    }

    .fi-ta-table td:nth-child(n + 4):not(:last-child) {
        grid-column: 2 / 4 !important;
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-top: 0.35rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 9999px !important;
        background: rgb(248, 250, 252) !important;
        color: rgb(51, 65, 85) !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    .fi-ta-table td:last-child {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        padding-top: 0.05rem !important;
    }

    .fi-ta-actions,
    .fi-ta-actions-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
    }

    .fi-ta-actions a,
    .fi-ta-actions button {
        min-height: 2rem !important;
    }

    .fi-ta-empty-state,
    .fi-ta-empty-state-content {
        padding: 1rem !important;
    }

    .fi-ta-pagination {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
        padding: 0.75rem !important;
    }
}

@media (min-width: 769px) {
    .fi-ta-table tbody tr {
        transition:
            background-color 150ms ease,
            box-shadow 150ms ease;
    }

    .fi-ta-table tbody tr:hover {
        background-color: rgba(251, 191, 36, 0.04) !important;
    }
}

/*
|--------------------------------------------------------------------------
| 6. Dashboard negocio
|--------------------------------------------------------------------------
*/

.business-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.business-dashboard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.business-dashboard__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--admin-amber);
}

.business-dashboard__title {
    margin: 0.15rem 0 0;
    font-size: 1.18rem;
    font-weight: 850;
    line-height: 1.2;
    color: rgb(15, 23, 42);
}

.business-dashboard__subtitle {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgb(100, 116, 139);
}

.business-dashboard__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    background: rgb(254, 243, 199);
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: rgb(146, 64, 14);
}

.business-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.business-dashboard__stats--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-dashboard__stat {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    padding: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.business-dashboard__stat--primary {
    background:
        linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.98));
}

.business-dashboard__stat--money {
    background:
        linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.business-dashboard__stat-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgb(100, 116, 139);
}

.business-dashboard__stat-value {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    color: rgb(15, 23, 42);
}

.business-dashboard__stat-value--money {
    color: var(--admin-amber-dark);
}

.business-dashboard__stat-value--warning {
    color: rgb(202, 138, 4);
}

.business-dashboard__stat-value--info {
    color: var(--admin-blue);
}

.business-dashboard__stat-value--success {
    color: var(--admin-green);
}

.business-dashboard__stat-value--muted {
    color: var(--admin-gray);
}

.business-dashboard__panel {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.business-dashboard__panel--highlight {
    background:
        linear-gradient(135deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.business-dashboard__panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0.8rem 0.95rem;
    background: rgba(248, 250, 252, 0.82);
}

.business-dashboard__panel-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 850;
    color: rgb(15, 23, 42);
}

.business-dashboard__panel-header p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgb(100, 116, 139);
}

.business-dashboard__confirmation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.75rem;
}

.business-dashboard__mini-stat {
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0.7rem;
}

.business-dashboard__mini-stat span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgb(100, 116, 139);
}

.business-dashboard__mini-stat strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.1rem;
    font-weight: 900;
    color: rgb(15, 23, 42);
}

.business-dashboard__appointments {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
}

.business-dashboard__appointment {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.85rem;
    background: rgb(248, 250, 252);
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: 0.7rem;
}

.business-dashboard__appointment-main {
    min-width: 0;
}

.business-dashboard__appointment-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 850;
    color: rgb(15, 23, 42);
}

.business-dashboard__appointment-main span {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgb(71, 85, 105);
}

.business-dashboard__appointment-main small {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.74rem;
    color: rgb(100, 116, 139);
}

.business-dashboard__appointment-side {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
}

.business-dashboard__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.25rem 0.52rem;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
    background: rgb(226, 232, 240);
    color: rgb(51, 65, 85);
}

.business-dashboard__status--scheduled {
    background: rgb(254, 243, 199);
    color: rgb(146, 64, 14);
}

.business-dashboard__status--confirmed {
    background: rgb(224, 242, 254);
    color: rgb(3, 105, 161);
}

.business-dashboard__status--completed {
    background: rgb(220, 252, 231);
    color: rgb(22, 101, 52);
}

.business-dashboard__status--cancelled {
    background: rgb(254, 226, 226);
    color: rgb(153, 27, 27);
}

.business-dashboard__status--no-show {
    background: rgb(229, 231, 235);
    color: rgb(55, 65, 81);
}

.business-dashboard__status--waiting {
    background: rgb(254, 243, 199);
    color: rgb(146, 64, 14);
}

.business-dashboard__status--not-sent {
    background: rgb(255, 237, 213);
    color: rgb(194, 65, 12);
}

.business-dashboard__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem;
}

.business-dashboard__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: rgb(248, 250, 252);
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    color: rgb(51, 65, 85);
}

.business-dashboard__list-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-dashboard__list-item strong {
    display: inline-flex;
    min-width: 1.65rem;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(255, 237, 213);
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    color: rgb(194, 65, 12);
}

.business-dashboard__empty {
    margin: 0;
    padding: 0.65rem 0.2rem;
    font-size: 0.85rem;
    color: rgb(100, 116, 139);
}

@media (max-width: 768px) {
    .business-dashboard__stats,
    .business-dashboard__stats--compact,
    .business-dashboard__confirmation-grid {
        grid-template-columns: 1fr;
    }

    .business-dashboard__appointment {
        flex-direction: column;
    }

    .business-dashboard__appointment-side {
        justify-content: flex-start;
    }
}

/*
|--------------------------------------------------------------------------
| 7. Customer profile summary
|--------------------------------------------------------------------------
*/

.customer-profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.customer-profile-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.98));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.customer-profile-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(217, 119, 6);
}

.customer-profile-title {
    margin: 0.2rem 0 0;
    font-size: 1.75rem;
    font-weight: 850;
    color: rgb(15, 23, 42);
}

.customer-profile-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    color: rgb(100, 116, 139);
}

.customer-profile-contact {
    display: grid;
    gap: 0.75rem;
    min-width: 260px;
}

.customer-profile-contact div,
.customer-profile-card,
.customer-profile-activity-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background: #ffffff;
    padding: 0.9rem;
}

.customer-profile-contact span,
.customer-profile-card span,
.customer-profile-info-list span,
.customer-profile-activity-card span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgb(100, 116, 139);
}

.customer-profile-contact strong,
.customer-profile-card strong,
.customer-profile-info-list strong,
.customer-profile-activity-card strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: rgb(15, 23, 42);
}

.customer-profile-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.customer-profile-card strong {
    font-size: 1.35rem;
}

.customer-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.customer-profile-info-list {
    display: grid;
    gap: 0.85rem;
}

.customer-profile-notes p {
    margin: 0.35rem 0 0;
    color: rgb(51, 65, 85);
    line-height: 1.5;
}

.customer-profile-activity {
    display: grid;
    gap: 0.75rem;
}

.customer-profile-activity-card p {
    margin: 0.35rem 0 0;
    color: rgb(51, 65, 85);
}

.customer-profile-activity-card small {
    display: block;
    margin-top: 0.35rem;
    color: rgb(100, 116, 139);
}

.customer-profile-services,
.customer-profile-history {
    display: grid;
    gap: 0.65rem;
}

.customer-profile-service-item,
.customer-profile-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    background: rgb(248, 250, 252);
    padding: 0.85rem 1rem;
}

.customer-profile-service-item strong,
.customer-profile-history-main strong {
    display: block;
    font-weight: 800;
    color: rgb(15, 23, 42);
}

.customer-profile-service-item span,
.customer-profile-history-main span,
.customer-profile-history-main small {
    display: block;
    margin-top: 0.2rem;
    color: rgb(100, 116, 139);
    font-size: 0.85rem;
}

.customer-profile-service-item > div:last-child,
.customer-profile-history-side {
    text-align: right;
    flex-shrink: 0;
}

.customer-profile-history-side strong {
    display: block;
    margin-top: 0.35rem;
    color: rgb(15, 23, 42);
}

.customer-profile-status {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
    background: rgb(226, 232, 240);
    color: rgb(51, 65, 85);
}

.customer-profile-status--scheduled {
    background: rgb(254, 243, 199);
    color: rgb(146, 64, 14);
}

.customer-profile-status--confirmed {
    background: rgb(224, 242, 254);
    color: rgb(3, 105, 161);
}

.customer-profile-status--completed {
    background: rgb(220, 252, 231);
    color: rgb(22, 101, 52);
}

.customer-profile-status--cancelled {
    background: rgb(254, 226, 226);
    color: rgb(153, 27, 27);
}

.customer-profile-status--no-show {
    background: rgb(229, 231, 235);
    color: rgb(55, 65, 81);
}

.customer-profile-empty {
    margin: 0;
    color: rgb(100, 116, 139);
}

@media (max-width: 1024px) {
    .customer-profile-header,
    .customer-profile-grid {
        grid-template-columns: 1fr;
    }

    .customer-profile-header {
        display: grid;
    }

    .customer-profile-contact {
        min-width: 0;
    }

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

@media (max-width: 640px) {
    .customer-profile-metrics {
        grid-template-columns: 1fr;
    }

    .customer-profile-service-item,
    .customer-profile-history-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-profile-service-item > div:last-child,
    .customer-profile-history-side {
        text-align: left;
    }
}

/*
|--------------------------------------------------------------------------
| Sticky calendar on dashboard
|--------------------------------------------------------------------------
|
| El dashboard de métricas puede crecer mucho en altura.
| En escritorio mantenemos el calendario visible mientras se hace scroll.
|
| Usamos :has(.fc) para detectar el widget que contiene FullCalendar
| sin tener que tocar la vista Blade del plugin.
|
*/

@media (min-width: 1280px) {
    .fi-wi-widget:has(.fc) {
        position: sticky !important;
        top: 5rem !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 6rem) !important;
        overflow: auto !important;
        z-index: 20 !important;
    }

    /*
     | Evita que el scroll interno del calendario quede feo.
     */
    .fi-wi-widget:has(.fc)::-webkit-scrollbar {
        width: 8px;
    }

    .fi-wi-widget:has(.fc)::-webkit-scrollbar-track {
        background: transparent;
    }

    .fi-wi-widget:has(.fc)::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: rgba(148, 163, 184, 0.45);
    }

    .fi-wi-widget:has(.fc)::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.6);
    }
}

/*
|--------------------------------------------------------------------------
| No sticky en tablet/móvil
|--------------------------------------------------------------------------
|
| En pantallas pequeñas el calendario ya tiene scroll horizontal,
| así que no conviene fijarlo.
|
*/

@media (max-width: 1279px) {
    .fi-wi-widget:has(.fc) {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
/*
|--------------------------------------------------------------------------
| FullCalendar - franjas no disponibles del trabajador
|--------------------------------------------------------------------------
*/

.fc .worker-unavailable-slot {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(107, 114, 128, 0.22) 0,
        rgba(107, 114, 128, 0.22) 6px,
        rgba(107, 114, 128, 0.08) 6px,
        rgba(107, 114, 128, 0.08) 12px
    ) !important;
    opacity: 1 !important;
}

.fi-main .fc .fc-bg-event.worker-unavailable-slot {
    pointer-events: none;
}