@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --black: #050505;
    --yellow: #ffc400;
    --yellow-soft: #fff3d8;
    --bg: #fff8f1;
    --white: #ffffff;
    --text: #111111;
    --muted: #777777;
    --border: #eeeeee;
    --success: #10b981;
    --danger: #fb7185;
     --brand: #ffc400;
    --brand-dark: #e0ac00;
    --brand-soft: #fff3c4;
    --text-dark: #1a1a1a;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dashboard-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    background: var(--black);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 0px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--yellow);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-title {
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .04em;
}

.brand-subtitle {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
}

.nav-link,
.sidebar-bottom button {
    width: 100%;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: var(--white);
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.nav-link:hover,
.sidebar-bottom button:hover {
    background: transparent;
    color: var(--yellow);
    
}

.nav-link.active {
    color: var(--black);
    background: #fafafa;
    border-right: 3px solid var(--yellow);
    font-weight: 800;
}

.sidebar-bottom {
    padding-top: 20px;
    border-top: 1px solid var(--yellow);
}

.main {
    margin-left: 260px;
    min-height: 100vh;
}

.topbar {
    height: 68px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.search {
    position: relative;
    width: 100%;
    max-width: 620px;
}

.search input {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--yellow-soft);
    padding: 0 18px 0 42px;
    outline: none;
}

.search span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #99845a;
    font-size: 20px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.icon-btn {
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    position: relative;
}

.notification-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 999px;
    right: 4px;
    top: 4px;
}

.book-btn {
    background: var(--yellow);
    color: var(--black);
    border: 0;
    border-radius: 10px;
    height: 42px;
    padding: 0 20px;
    font-weight: 900;
    cursor: pointer;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--black);
    border: 2px solid var(--yellow);
    color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.dashboard-content {
    padding: 34px;
    max-width: 1440px;
}

.welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.welcome h1 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 40px;
    color: var(--black);
    letter-spacing: -0.04em;
}

.welcome p {
    margin: 6px 0 0;
    color: #555;
}

.period-tabs {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px;
    display: flex;
}

.period-tabs button {
    border: 0;
    background: transparent;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
}

.period-tabs button.active {
    background: var(--yellow);
    color: var(--black);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 34px;
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 22px rgba(0,0,0,.025);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--yellow);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-up {
    color: var(--success);
    font-size: 12px;
    font-weight: 900;
}

.metric-down {
    color: var(--danger);
    font-size: 12px;
    font-weight: 900;
}

.card-label {
    color: #c4a970;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
}

.card-value {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 900;
}

.widgets-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 26px;
    align-items: start;
}

.panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 22px rgba(0,0,0,.025);
}

.panel-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header h2 {
    margin: 0;
    font-size: 22px;
    font-family: Manrope, sans-serif;
}

.panel-link {
    color: var(--yellow);
    font-weight: 800;
    text-decoration: none;
}

.schedule-list {
    padding: 24px;
    display: grid;
    gap: 24px;
}

.appointment {
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: center;
    position: relative;
}

.appointment.active::before {
    content: "";
    position: absolute;
    left: -24px;
    width: 4px;
    height: 48px;
    background: var(--yellow);
    border-radius: 0 4px 4px 0;
}

.appointment-time {
    font-size: 13px;
    color: #c4a970;
    font-weight: 900;
}

.appointment.active .appointment-time {
    color: var(--black);
}

.appointment-card {
    background: var(--yellow-soft);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.appointment.active .appointment-card {
    background: #fff;
    border: 1px solid rgba(255,196,0,.5);
}

.client-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.initials {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #fff;
    color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.client-name {
    font-weight: 900;
}

.client-service {
    color: #b9a986;
    font-size: 13px;
}

.appointment-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}

.meta-label {
    font-size: 10px;
    color: #b9a986;
    text-transform: uppercase;
    font-weight: 900;
}

.meta-value {
    font-size: 13px;
    font-weight: 700;
}

.status {
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.status.confirmed {
    background: #ecfdf5;
    color: #059669;
}

.status.ongoing {
    background: #fff7d6;
    color: #9a7300;
}

.status.pending {
    background: #f3f3f3;
    color: #555;
}

.side-widgets {
    display: grid;
    gap: 26px;
}

.chart {
    height: 210px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 8px 34px;
}

.bar {
    width: 28px;
    border-radius: 10px 10px 0 0;
    background: var(--yellow-soft);
    position: relative;
}

.bar span {
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #c4a970;
}

.bar strong {
    display: block;
    width: 100%;
    background: var(--yellow);
    position: absolute;
    bottom: 0;
    border-radius: 10px 10px 0 0;
}

.chart-footer {
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.small-label {
    color: #c4a970;
    font-size: 12px;
}

.small-value {
    font-weight: 900;
    font-size: 14px;
}

.activity-list {
    display: grid;
    gap: 20px;
}

.activity {
    display: flex;
    gap: 14px;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 7px;
    background: var(--yellow);
}

.activity-dot.green { background: #34d399; }
.activity-dot.red { background: var(--danger); }
.activity-dot.blue { background: #60a5fa; }

.activity p {
    margin: 0;
    font-size: 14px;
}

.activity small {
    display: block;
    margin-top: 4px;
    color: #c4a970;
}

.full-btn {
    width: 100%;
    height: 46px;
    margin-top: 24px;
    border: 0;
    background: var(--yellow-soft);
    color: var(--black);
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
}

.mobile-fab {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar {
        display: none;
    }

    .main {
        margin-left: 0;
    }

    .stats-grid,
    .widgets-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0 18px;
    }

    .top-actions .book-btn,
    .top-actions .icon-btn {
        display: none;
    }

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

    .mobile-fab {
        display: flex;
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 58px;
        height: 58px;
        border: 0;
        border-radius: 999px;
        background: var(--yellow);
        color: var(--black);
        align-items: center;
        justify-content: center;
        z-index: 99;
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }
}

@media (max-width: 640px) {
    .dashboard-content {
        padding: 24px 18px;
    }

    .welcome h1 {
        font-size: 32px;
    }

    .period-tabs {
        width: 100%;
    }

    .period-tabs button {
        flex: 1;
        padding: 10px 8px;
    }

    .appointment-card,
    .appointment-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* CENTERS CAROUSEL */

.centers-section {
    margin-bottom: 28px;
}

.centers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.centers-header h2 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.centers-controls {
    display: flex;
    gap: 8px;
}

.center-arrow {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: #111111;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: .2s ease;
}

.center-arrow:hover {
    background: var(--yellow);
    border-color: var(--yellow);
}

.centers-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-snap-type: x mandatory;
}

.centers-carousel::-webkit-scrollbar {
    height: 6px;
}

.centers-carousel::-webkit-scrollbar-thumb {
    background: #e6d7a8;
    border-radius: 999px;
}

.center-card {
    min-width: 260px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    scroll-snap-align: start;
    box-shadow: 0 4px 18px rgba(0,0,0,.035);
    transition: .2s ease;
}

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

.center-card.active {
    border: 2px solid var(--yellow);
    box-shadow: 0 8px 24px rgba(255,196,0,.16);
}

.center-image {
    width: 72px;
    height: 58px;
    border-radius: 10px;
    flex: 0 0 auto;
    background:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
        url("https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=300&q=80");
    background-size: cover;
    background-position: center;
}

.center-image.image-2 {
    background-image:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
        url("https://images.unsplash.com/photo-1512690459411-b9245aed614b?auto=format&fit=crop&w=300&q=80");
}

.center-image.image-3 {
    background-image:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
        url("https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?auto=format&fit=crop&w=300&q=80");
}

.center-image.image-4 {
    background-image:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
        url("https://images.unsplash.com/photo-1600948836101-f9ffda59d250?auto=format&fit=crop&w=300&q=80");
}

.center-info h3 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 900;
}

.center-info p {
    margin: 0 0 7px;
    color: #777;
    font-size: 11px;
}

.center-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 900;
}

.center-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
}

.center-status.open {
    background: #ecfdf5;
    color: #059669;
}

.center-status.open::before {
    background: #10b981;
}

.center-status.closed {
    background: #f5f5f5;
    color: #777;
}

.center-status.closed::before {
    background: #999;
}

.center-card {
    cursor: pointer;
}

.center-card.active {
    border: 2px solid var(--yellow);
    box-shadow: 0 8px 24px rgba(255,196,0,.22);
}
.center-data-area {
    position: relative;
}

.center-data-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 241, .78);
    backdrop-filter: blur(4px);
    z-index: 8;
    border-radius: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    font-weight: 900;
    color: #111;
}

.center-data-area.is-loading .center-data-loader {
    display: flex;
}

.loader-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(255,196,0,.28);
    border-top-color: var(--yellow);
    animation: dashboard-spin .7s linear infinite;
}

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

.empty-centers {
    background: #ffffff;
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 24px;
    color: #777;
    font-weight: 700;
}
.centers-carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 10px;
}

.centers-carousel::-webkit-scrollbar {
    height: 6px;
}

.centers-carousel::-webkit-scrollbar-thumb {
    background: #e6d7a8;
    border-radius: 999px;
}

.center-card {
    flex: 0 0 260px;
    width: 260px;
}

.center-card.active {
    border: 2px solid var(--yellow);
}

.center-card .center-image {
    width: 72px;
    height: 58px;
}

.center-info {
    min-width: 0;
}

.center-info h3,
.center-info p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.center-card {
    position: relative;
    padding-right: 48px;
}

.center-actions {
    position: absolute;
    bottom: 8px;
    right: 3px;
    display: flex;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
}

.center-card:hover .center-actions {
    opacity: 1;
    pointer-events: auto;
}

.center-action-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: #fff7df;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.center-action-btn span {
    font-size: 17px;
}

.center-action-btn:hover {
    background: var(--yellow);
}

.center-action-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

.center-edit-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    align-items: start;
}

.center-edit-left,
.center-edit-right {
    display: grid;
    gap: 24px;
}

.center-edit-card {
    padding: 28px;
}

.edit-card-header,
.service-menu-header,
.service-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.edit-card-header h2,
.service-menu-header h2 {
    margin: 0 0 24px;
    font-size: 22px;
    font-family: Manrope, sans-serif;
}

.text-yellow {
    color: var(--yellow);
}

.edit-form-group {
    margin-bottom: 20px;
}

.edit-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #c4a970;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

.edit-form-group input,
.edit-form-group textarea,
.hours-row input,
.social-input input {
    width: 100%;
    border: 1px solid #eadcc3;
    background: #fff4df;
    border-radius: 9px;
    padding: 14px 16px;
    font-size: 15px;
    outline: none;
    font-family: Inter, sans-serif;
}

.edit-form-group textarea {
    resize: vertical;
}

.edit-form-group input:focus,
.edit-form-group textarea:focus,
.hours-row input:focus,
.social-input input:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255,196,0,.16);
}

.edit-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hours-row {
    display: grid;
    grid-template-columns: 130px 1fr 20px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.closed-day {
    grid-column: span 3;
    height: 44px;
    border: 1px dashed #ef4444;
    background: #fff7f7;
    color: #b91c1c;
    border-radius: 9px;
    font-weight: 900;
    cursor: pointer;
}

.social-input {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff4df;
    border: 1px solid #eadcc3;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.social-input span {
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    color: #777;
}

.social-input input {
    border: 0;
    background: transparent;
    padding: 10px 4px;
}

.outline-btn {
    height: 46px;
    border: 2px solid var(--yellow);
    background: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.outline-btn:hover {
    background: var(--yellow);
}

.service-menu-header h2 {
    margin-bottom: 0;
}

.service-menu-header > div {
    display: flex;
    gap: 12px;
}

.service-category {
    background: #fff;
    border: 1px solid #eadcc3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,.025);
}

.service-category-header {
    padding: 20px 28px;
    background: #fff4df;
    border-bottom: 1px solid #eadcc3;
}

.service-category-header h3 {
    margin: 0;
    font-size: 18px;
}

.mini-icon-btn {
    border: 0;
    background: transparent;
    color: #c4a970;
    cursor: pointer;
}

.mini-icon-btn:hover {
    color: #111;
}

.service-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px;
    gap: 18px;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #f0e5d4;
}

.service-row p {
    margin: 6px 0 0;
    color: #c4a970;
    font-size: 13px;
}

.service-row > span {
    color: #c4a970;
    font-size: 13px;
}

.add-service-line {
    width: 100%;
    height: 52px;
    border: 0;
    background: #fffaf1;
    color: #c4a970;
    font-weight: 900;
    cursor: pointer;
}

.add-service-line:hover {
    color: #111;
    background: #fff4df;
}

.empty-service {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #c4a970;
    gap: 12px;
}

.empty-service .material-symbols-outlined {
    font-size: 42px;
    opacity: .55;
}

@media (max-width: 1100px) {
    .center-edit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .edit-form-row,
    .hours-row,
    .service-row {
        grid-template-columns: 1fr;
    }

    .service-menu-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-menu-header > div {
        width: 100%;
        flex-direction: column;
    }

    .outline-btn,
    .service-menu-header .book-btn {
        width: 100%;
        justify-content: center;
    }
}
.edit-current-center {
    background: #fff;
    border: 2px solid var(--yellow);
    border-radius: 16px;
    padding: 14px;
    margin: 24px 0 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 8px 28px rgba(255,196,0,.13);
}

.edit-current-center-image {
    width: 92px;
    height: 72px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
}

.edit-current-center-info {
    flex: 1;
    min-width: 0;
}

.edit-current-center-info span {
    display: block;
    color: #c4a970;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .12em;
    margin-bottom: 4px;
}

.edit-current-center-info h2 {
    margin: 0 0 4px;
    font-family: Manrope, sans-serif;
    font-size: 22px;
    font-weight: 900;
}

.edit-current-center-info p {
    margin: 0;
    color: #777;
    font-size: 14px;
}

@media (max-width: 640px) {
    .edit-current-center {
        align-items: flex-start;
        flex-direction: column;
    }

    .edit-current-center-image {
        width: 100%;
        height: 150px;
    }
}
.center-edit-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin: 26px 0 32px;
    overflow-x: auto;
}

.center-tab {
    border: 0;
    background: transparent;
    padding: 16px 24px;
    font-weight: 800;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.center-tab:hover {
    color: #111;
}

.center-tab.active {
    color: #111;
    background: #fffaf0;
    border-bottom-color: var(--yellow);
    border-radius: 12px 12px 0 0;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.add-center-card {
    border: 2px dashed #e6d7a8;
    background: #fffaf0;
    justify-content: center;
}

.add-center-card.active {
    border-style: solid;
}

.add-center-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--yellow);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-center-icon span {
    font-size: 34px;
}

.center-panel {
    display: none;
}

.center-panel.active {
    display: block;
}

.center-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

.center-chip {
    border: 0;
    border-radius: 999px;
    background: #f3f3f3;
    color: #555;
    padding: 12px 22px;
    font-weight: 900;
    cursor: pointer;
}

.center-chip.active {
    background: var(--yellow);
    color: #111;
}

.only-delete {
    opacity: 0;
}

.center-card:hover .only-delete {
    opacity: 1;
}


.center-info-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
}

.center-info-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.center-info-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge-active {
    background: #d9f7e7;
    color: #1c9c5e;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

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

.form-group label {
    font-size: 12px;
    font-weight: 700;
    color: #777;
    margin-bottom: 6px;
    display: block;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 0;
    background: #f6ecd8;
    font-weight: 600;
}

.hours-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.hours-row {
    display: grid;
    grid-template-columns: 100px 1fr 20px 1fr 60px;
    align-items: center;
    gap: 10px;
}

.hours-row.disabled {
    opacity: 0.4;
}

.switch {
    position: relative;
    width: 42px;
    height: 22px;
}

.switch input {
    display: none;
}

.switch span {
    position: absolute;
    background: #ddd;
    border-radius: 999px;
    width: 100%;
    height: 100%;
}

.switch span::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: .2s;
}

.switch input:checked + span {
    background: var(--yellow);
}

.switch input:checked + span::after {
    left: 23px;
}

.center-image-preview {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin: 10px 0;
}

.center-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f6ecd8;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.social-input input {
    border: 0;
    background: transparent;
    width: 100%;
}
.card-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}

.section-save-btn {
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--yellow);
    color: #111;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255,196,0,.18);
    transition: .2s ease;
}

.section-save-btn:hover {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 28px 0 24px;
}

.quick-stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 22px rgba(0,0,0,.025);
}

.quick-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.quick-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: var(--yellow);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-stat-icon.blue {
    background: #a5eeff;
}

.quick-stat-icon.neutral {
    background: #eee4d4;
}

.quick-stat-card p {
    margin: 0 0 6px;
    color: #c4a970;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 900;
}

.quick-stat-card strong {
    font-size: 27px;
    font-weight: 900;
}

.quick-stat-up {
    color: #10b981;
    font-size: 12px;
    font-weight: 900;
}

.quick-stat-down {
    color: #fb7185;
    font-size: 12px;
    font-weight: 900;
}

.quick-stat-muted {
    color: #8a7a5a;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
}
.hidden-section {
    display: none !important;
}

.visible-section {
    display: block;
}
.chips-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    margin: 8px 0;
}

.chips-loader span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--yellow);
    animation: chips-dot 0.7s infinite alternate;
}

.chips-loader span:nth-child(2) {
    animation-delay: .15s;
}

.chips-loader span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes chips-dot {
    from {
        opacity: .35;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.is-switching-section .dashboard-section {
    opacity: .25;
    pointer-events: none;
}

.section-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 26px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.section-header {
    margin-bottom: 16px;
}

.section-header h2 {
    margin: 0;
    font-size: 18px;
}

.section-header span {
    font-size: 13px;
    color: #777;
}
.center-chips {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f7f8fa;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.schedule-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: start;
}

.weekly-schedule {
    display: grid;
    gap: 16px;
}

.schedule-day {
    background: #fffaf1;
    border: 1px solid #eadcc3;
    border-radius: 14px;
    padding: 16px;
}

.schedule-day.is-closed {
    opacity: .65;
}

.schedule-day-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.schedule-day-head strong {
    display: block;
    font-size: 16px;
}

.schedule-day-head small {
    color: #9c875b;
    font-size: 12px;
}

.schedule-toggle {
    position: relative;
    width: 46px;
    height: 24px;
    flex: 0 0 auto;
}

.schedule-toggle input {
    display: none;
}

.schedule-toggle span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d9d9d9;
    cursor: pointer;
    transition: .2s ease;
}

.schedule-toggle span::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
    background: #fff;
    border-radius: 999px;
    transition: .2s ease;
}

.schedule-toggle input:checked + span {
    background: var(--yellow);
}

.schedule-toggle input:checked + span::after {
    left: 25px;
}

.schedule-slots {
    display: grid;
    gap: 10px;
}

.schedule-slot {
    display: grid;
    grid-template-columns: 1fr 20px 1fr 34px;
    gap: 10px;
    align-items: center;
}

.schedule-slot input {
    height: 42px;
    border: 1px solid #eadcc3;
    background: #fff;
    border-radius: 9px;
    padding: 0 10px;
    font-weight: 700;
}

.schedule-slot span {
    text-align: center;
    color: #9c875b;
    font-weight: 900;
}

.slot-remove,
.holiday-delete {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #fff1f1;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-remove span,
.holiday-delete span {
    font-size: 18px;
}

.add-slot-btn {
    margin-top: 12px;
    height: 38px;
    border: 1px dashed #d6bb75;
    background: #fff;
    border-radius: 9px;
    color: #7a5a00;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}

.add-slot-btn:hover {
    background: var(--yellow);
    color: #111;
}

.schedule-day.is-closed .schedule-slots,
.schedule-day.is-closed .add-slot-btn {
    display: none;
}

.badge-muted {
    background: #f2ead8;
    color: #7a673d;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.holiday-form {
    background: #fffaf1;
    border: 1px solid #eadcc3;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
}

.holiday-closed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4f4632;
    font-weight: 800;
    margin: 4px 0 16px;
}

.holiday-closed-row input {
    width: 18px;
    height: 18px;
}

.holiday-special-hours {
    margin-bottom: 16px;
}

.holiday-special-hours .schedule-slot {
    grid-template-columns: 1fr 20px 1fr;
}

.holiday-list {
    display: grid;
    gap: 10px;
}

.holiday-item {
    background: #fff;
    border: 1px solid #eadcc3;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.holiday-item strong {
    display: block;
    font-size: 15px;
}

.holiday-item small {
    display: block;
    color: #9c875b;
    margin-top: 4px;
}

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

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

    .schedule-slot span {
        display: none;
    }

    .slot-remove {
        width: 100%;
    }
}
.schedule-sections {
    display: grid;
    gap: 28px;
}

.schedule-card {
    background: #fff;
    border: 1px solid #eadcc3;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.035);
    overflow: hidden;
}

.schedule-card.compact {
    max-width: 760px;
}

.schedule-card.wide {
    max-width: 100%;
}

.schedule-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0e6d3;
}

.schedule-card-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-card-header h3 .material-symbols-outlined {
    color: #8a6900;
    font-size: 19px;
}

.schedule-card-header small {
    color: #8e7c5a;
    font-style: italic;
    font-size: 12px;
}

.weekly-compact {
    padding: 8px 24px 0;
}

.weekly-day {
    display: grid;
    grid-template-columns: 135px 1fr 150px;
    gap: 18px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #f2eadb;
}

.weekly-day:last-child {
    border-bottom: 0;
}

.day-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    cursor: pointer;
}

.day-check input {
    display: none;
}

.day-check span {
    width: 17px;
    height: 17px;
    border: 1px solid #d7c9ad;
    border-radius: 4px;
    background: #fff;
    position: relative;
}

.day-check input:checked + span {
    background: #8a6900;
    border-color: #8a6900;
}

.day-check input:checked + span::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-check strong {
    font-size: 14px;
}

.day-slots {
    display: grid;
    gap: 9px;
}

.day-slot {
    display: inline-grid;
    grid-template-columns: 90px 16px 90px 24px;
    align-items: center;
    gap: 6px;
    width: max-content;
}

.day-slot input {
    height: 36px;
    border: 1px solid #e6ddcf;
    border-radius: 8px;
    background: #f8f8f8;
    padding: 0 8px;
    font-size: 13px;
}

.day-slot span {
    color: #6d5a31;
    font-weight: 800;
    text-align: center;
}

.slot-remove {
    border: 0;
    background: transparent;
    color: #c02626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-remove .material-symbols-outlined {
    font-size: 17px;
}

.add-slot-inline {
    border: 0;
    background: transparent;
    color: #7b5d00;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
}

.add-slot-inline .material-symbols-outlined {
    font-size: 17px;
}

.weekly-day.is-closed .day-slots {
    color: #999;
    font-style: italic;
    font-size: 13px;
    padding-top: 8px;
}

.weekly-day.is-closed .add-slot-inline {
    display: none;
}

.weekly-day.is-closed .day-slots .day-slot {
    display: none;
}

.schedule-actions {
    padding: 18px 24px 22px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f2eadb;
}

.holiday-editor {
    padding: 22px 24px 16px;
}

.holiday-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 18px;
}

.holiday-field label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: #8e7c5a;
    margin-bottom: 7px;
}

.holiday-field input {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #fff3df;
    padding: 0 12px;
}

.holiday-options {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #4a3a19;
}

.holiday-options label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.holiday-options input {
    accent-color: #8a6900;
}

.holiday-special-box {
    background: #fafafa;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.holiday-special-slots {
    display: grid;
    gap: 10px;
    margin-bottom: 8px;
}

.holiday-add-btn {
    height: 42px;
    padding: 0 18px;
}

.holiday-table {
    margin: 0 24px 18px;
    border: 1px solid #eee3cf;
    border-radius: 10px;
    overflow: hidden;
}

.holiday-table-head,
.holiday-table-row {
    display: grid;
    grid-template-columns: 150px 1fr 150px 40px;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
}

.holiday-table-head {
    background: #faf8f4;
    color: #8e7c5a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.holiday-table-row {
    background: #fff;
    border-top: 1px solid #eee3cf;
}

.holiday-table-row span {
    font-weight: 700;
    font-size: 13px;
}

.holiday-table-row strong {
    font-size: 13px;
}

.holiday-table-row em {
    width: fit-content;
    padding: 4px 8px;
    background: #f8eeee;
    color: #8c1d1d;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.holiday-delete {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
}

.holiday-delete .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 900px) {
    .weekly-day {
        grid-template-columns: 1fr;
        gap: 10px;
    }

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

    .holiday-table-head,
    .holiday-table-row {
        grid-template-columns: 1fr;
    }
}

.schedule-clean {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee4d4;
    overflow: hidden;
    margin-bottom: 26px;
}

.schedule-clean .schedule-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #f0e6d3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule-clean .schedule-card-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.week-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1e8d8;
    overflow-x: auto;
}

.week-tab {
    border: 0;
    background: transparent;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 800;
    color: #5f5649;
    cursor: pointer;
}

.week-tab.active {
    background: #806000;
    color: #fff;
}

.weekly-tab-content {
    padding: 22px;
}

.weekly-day-panel {
    display: none;
}

.weekly-day-panel.active {
    display: block;
}

.weekly-day-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.weekly-day-head h3 {
    margin: 0;
    font-size: 18px;
}

.weekly-day-head p {
    margin: 4px 0 0;
    color: #8f7951;
}

.schedule-toggle {
    width: 46px;
    height: 24px;
    position: relative;
}

.schedule-toggle input {
    display: none;
}

.schedule-toggle span {
    position: absolute;
    inset: 0;
    background: #d8d8d8;
    border-radius: 999px;
    cursor: pointer;
}

.schedule-toggle span::after {
    content: "";
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: .2s;
}

.schedule-toggle input:checked + span {
    background: #806000;
}

.schedule-toggle input:checked + span::after {
    left: 25px;
}

.day-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
}

.day-slot {
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    gap: 12px;
    align-items: center;
    grid-column: span 2;
}

.day-slot input,
.holiday-slot input {
    height: 46px;
    border: 1px solid #eadcc3;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 800;
    background: #fff;
}

.slot-remove,
.holiday-delete {
    border: 0;
    background: transparent;
    color: #c92a2a;
    cursor: pointer;
}

.add-slot-inline {
    width: 100%;
    height: 44px;
    margin-top: 18px;
    border: 1px dashed #d6bb75;
    background: transparent;
    border-radius: 10px;
    color: #806000;
    font-weight: 900;
    cursor: pointer;
}

.schedule-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
}

.holiday-editor {
    padding: 22px;
}

.holiday-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.holiday-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 900;
    color: #6d6047;
}

.holiday-field input {
    width: 100%;
    height: 44px;
    border: 0;
    background: #fff3df;
    border-radius: 8px;
    padding: 0 12px;
}

.holiday-options {
    display: flex;
    gap: 30px;
    margin: 22px 0;
    font-weight: 800;
}

.holiday-options input {
    accent-color: #806000;
}

.holiday-special-box {
    background: #fafafa;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.holiday-slot {
    display: grid;
    grid-template-columns: 110px 110px 34px;
    gap: 10px;
    align-items: center;
}

.holiday-add-btn {
    width: 150px;
    height: 44px;
    border: 2px solid #ffbd00;
    border-radius: 8px;
    background: white;
    font-weight: 900;
}

.holiday-table {
    padding: 0 22px 22px;
    display: grid;
    gap: 10px;
}

.holiday-table-row {
    display: grid;
    grid-template-columns: 140px 1fr 120px 34px;
    gap: 14px;
    align-items: center;
    border: 1px solid #eee4d4;
    border-radius: 8px;
    padding: 14px;
}

.holiday-table-row small {
    display: block;
    color: #8f7951;
    font-size: 11px;
    font-weight: 900;
}

.holiday-table-row strong {
    display: block;
    margin-top: 4px;
}

.holiday-table-row em {
    background: #f6ead4;
    color: #806000;
    border-radius: 999px;
    padding: 4px 8px;
    font-style: normal;
    font-weight: 900;
    font-size: 11px;
}
.holiday-list-area,
.holiday-editor-area {
    padding: 24px;
}

.holiday-list-area {
    border-bottom: 1px solid #f0e6d3;
}

.holiday-editor-area {
    background: #fffdf8;
}

.holiday-area-title {
    margin-bottom: 16px;
}

.holiday-area-title h4 {
    margin: 0;
    font-size: 18px;
    font-family: Manrope, sans-serif;
}

.holiday-area-title p {
    margin: 4px 0 0;
    color: #9c875b;
    font-size: 13px;
}

.holiday-table {
    display: grid;
    gap: 10px;
    padding: 0;
}

.holiday-table-row {
    display: grid;
    grid-template-columns: 140px 1fr 160px 78px;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 12px;
    padding: 14px 16px;
}

.holiday-table-row:hover {
    border-color: #ffc400;
    box-shadow: 0 8px 18px rgba(126, 94, 0, .08);
}

.holiday-table-row small {
    display: block;
    color: #9c875b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
}

.holiday-table-row strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}

.holiday-table-row em {
    display: inline-block;
    margin-top: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f6ead4;
    color: #806000;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.holiday-table-row em.special {
    background: #fff3bf;
    color: #7a5a00;
}

.holiday-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.holiday-edit,
.holiday-delete {
    width: 31px;
    height: 31px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.holiday-edit {
    color: #806000;
}

.holiday-delete {
    color: #dc2626;
}

.holiday-edit:hover {
    background: #fff3bf;
}

.holiday-delete:hover {
    background: #fff1f1;
}

.holiday-edit span,
.holiday-delete span {
    font-size: 18px;
}

.holiday-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.holiday-main-btn {
    height: 44px;
    border: 2px solid #ffbd00;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-weight: 900;
    padding: 0 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.holiday-main-btn:hover {
    background: #ffbd00;
}

.holiday-cancel-btn {
    height: 44px;
    border: 1px solid #d6bb75;
    border-radius: 8px;
    background: #fff;
    color: #806000;
    font-weight: 900;
    padding: 0 16px;
    cursor: pointer;
}

@media (max-width: 800px) {
    .holiday-table-row {
        grid-template-columns: 1fr;
    }

    .holiday-actions {
        justify-content: flex-start;
    }

    .holiday-form-actions {
        flex-direction: column;
    }

    .holiday-main-btn,
    .holiday-cancel-btn {
        width: 100%;
        justify-content: center;
    }
}
.service-check input {
    display: none;
}

.service-check span {
    display: inline-flex;
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff3df;
    color: #806000;
    border: 1px solid #eadcc3;
    font-weight: 900;
    cursor: pointer;
}

.service-check input:checked + span {
    background: #806000;
    color: #fff;
    border-color: #806000;
}

.workers-section {
    background: #fff8f1;
}

.workers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.worker-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.worker-add-btn .material-symbols-outlined {
    font-size: 18px;
}

.workers-carousel {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 22px;
    margin-bottom: 32px;
}

.worker-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.035);
    transition: .2s ease;
}

.worker-card:hover {
    transform: translateY(-2px);
    border-color: #ffc400;
}

.worker-card.active {
    border: 2px solid #ffc400;
    box-shadow: 0 10px 24px rgba(126, 94, 0, .12);
}

.worker-avatar {
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    border-radius: 999px;
    overflow: hidden;
    background: #f6ead4;
}

.worker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-card h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
}

.worker-card p {
    margin: 5px 0 14px;
    color: #8f7951;
    font-size: 13px;
}

.worker-badges {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.worker-badges span,
.worker-badges strong {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 900;
}

.worker-badges span {
    background: #eefaf2;
    color: #15803d;
}

.worker-badges span.muted {
    background: #f1f1f1;
    color: #777;
}

.worker-badges strong {
    background: #fff3bf;
    color: #946200;
}

.worker-detail-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 18px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 34px;
    box-shadow: 0 10px 26px rgba(0,0,0,.04);
}

.worker-detail-left {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 26px;
}

.worker-photo-large {
    width: 170px;
    height: 170px;
    border-radius: 14px;
    background: #101820;
    overflow: hidden;
    position: relative;
}

.worker-photo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-photo-large span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #22c55e;
    border: 3px solid #fff;
}

.worker-detail-info h2 {
    margin: 0;
    font-size: 28px;
}

.worker-detail-info p {
    margin: 5px 0 2px;
    color: #8f7951;
    font-weight: 700;
}

.worker-detail-info small {
    color: #9b8a6f;
}

.worker-skills {
    margin-top: 24px;
}

.worker-skills h4,
.worker-performance h4,
.worker-activity h4 {
    margin: 0 0 14px;
    color: #9c875b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#workerDetailSkills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#workerDetailSkills span {
    background: #fff3df;
    color: #a16800;
    border: 1px solid #f0d9a9;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 800;
}

.worker-add-skill {
    margin-top: 10px;
    border: 0;
    background: #f5f5f5;
    color: #999;
    border-radius: 8px;
    padding: 8px 11px;
    cursor: pointer;
    font-weight: 800;
}

.worker-detail-side {
    display: grid;
    gap: 26px;
}

.worker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dark-btn {
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #1f1710;
    color: #fff;
    font-weight: 900;
    padding: 0 18px;
    cursor: pointer;
}

.worker-performance {
    background: #fffdf8;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #f0e6d3;
}

.worker-progress-row {
    margin-bottom: 16px;
}

.worker-progress-row:last-child {
    margin-bottom: 0;
}

.worker-progress-row div:first-child {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 7px;
}

.worker-progress-row span {
    color: #8f7951;
}

.worker-progress-row strong {
    color: #111;
}

.worker-progress {
    height: 7px;
    background: #f3ead7;
    border-radius: 999px;
    overflow: hidden;
}

.worker-progress i {
    display: block;
    height: 100%;
    background: #ffc400;
    border-radius: 999px;
}

.worker-activity {
    background: #fffdf8;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #f0e6d3;
}

.worker-activity-item {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

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

.worker-activity-item .material-symbols-outlined {
    font-size: 18px;
    color: #a16800;
}

.worker-activity-item strong {
    display: block;
    font-size: 13px;
}

.worker-activity-item small {
    display: block;
    margin-top: 2px;
    color: #9b8a6f;
}

@media (max-width: 1100px) {
    .workers-carousel {
        grid-template-columns: repeat(2, 1fr);
    }

    .worker-detail-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .workers-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .workers-carousel {
        grid-template-columns: 1fr;
    }

    .worker-detail-left {
        grid-template-columns: 1fr;
    }

    .worker-photo-large {
        width: 100%;
        height: 220px;
    }

    .worker-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
.workers-section {
    display: grid;
    gap: 24px;
}

.workers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workers-header .book-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.worker-list-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,.035);
    transition: .2s ease;
}

.worker-list-card:hover {
    border-color: #ffc400;
    transform: translateY(-2px);
}

.worker-list-card.active {
    border: 2px solid #ffc400;
    box-shadow: 0 10px 24px rgba(126, 94, 0, .12);
}

.worker-list-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #fff3bf;
    color: #806000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.worker-list-card h3 {
    margin: 0;
    font-size: 16px;
}

.worker-list-card p {
    margin: 4px 0 0;
    color: #9c875b;
    font-size: 13px;
}

.worker-status {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 8px;
}

.worker-status.active {
    background: #eefaf2;
    color: #15803d;
}

.worker-edit-card {
    padding: 26px;
}

.worker-edit-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0e6d3;
}

.worker-edit-header h2 {
    margin: 0;
}

.worker-edit-header p {
    margin: 5px 0 0;
    color: #9c875b;
    font-weight: 800;
}

.worker-delete-btn {
    height: 42px;
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #dc2626;
    border-radius: 10px;
    font-weight: 900;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.worker-delete-btn:hover {
    background: #fee2e2;
}

.worker-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.worker-form-grid .full {
    grid-column: 1 / -1;
}

.worker-edit-block {
    margin-top: 24px;
}

.worker-edit-block h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.worker-edit-block input[type="text"] {
    width: 100%;
    height: 46px;
    border: 1px solid #eadcc3;
    background: #fff3df;
    border-radius: 9px;
    padding: 0 12px;
}

.worker-edit-block small {
    display: block;
    margin-top: 6px;
    color: #9c875b;
}

.worker-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}



.worker-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0e6d3;
}

@media (max-width: 800px) {
    .workers-header,
    .worker-edit-header {
        flex-direction: column;
    }

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

    .worker-form-actions {
        flex-direction: column;
    }

    .worker-form-actions button,
    .worker-delete-btn {
        width: 100%;
        justify-content: center;
    }
}
.worker-form-grid.compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.worker-form-grid.compact .full {
    grid-column: 1 / -1;
}

.worker-detail-info .form-group label,
.worker-skills h4 {
    font-size: 11px;
    font-weight: 900;
    color: #9c875b;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.worker-detail-info input,
.worker-skills input {
    width: 100%;
    height: 42px;
    border: 1px solid #eadcc3;
    background: #fff3df;
    border-radius: 9px;
    padding: 0 12px;
    font-weight: 700;
}

.worker-skills {
    margin-top: 20px;
}

.worker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.worker-delete-btn {
    height: 44px;
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #dc2626;
    border-radius: 10px;
    font-weight: 900;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.worker-delete-btn:hover {
    background: #fee2e2;
}
.worker-detail-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 18px;
    padding: 28px;
    display: grid;
    grid-template-columns: 170px 1.1fr .8fr 1fr;
    gap: 28px;
    align-items: start;
}

.worker-profile-main input {
    border: 0;
    background: transparent;
    width: 100%;
}

.worker-name-input {
    font-size: 28px;
    font-weight: 900;
    color: #111;
}

.worker-role-input {
    font-size: 14px;
    font-weight: 800;
    color: #8f7951;
}

.worker-email-input {
    font-size: 13px;
    color: #9b8a6f;
}

.worker-skills input {
    margin-top: 8px;
    width: 100%;
    border: 1px solid #f0d9a9;
    background: #fff3df;
    border-radius: 9px;
    padding: 10px;
    color: #a16800;
    font-weight: 800;
}

.worker-delete-link {
    margin-top: 18px;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-weight: 900;
    cursor: pointer;
}
.worker-detail-card {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr;
    gap: 30px;
    background: #fff;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid #eee;
}

/* FOTO */
.worker-photo img {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    object-fit: cover;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    display: block;
    margin-top: 8px;
}

/* INFO */
.worker-info h2 {
    font-size: 24px;
    font-weight: 900;
}

.worker-role {
    color: #888;
    font-weight: 700;
}

.worker-email {
    font-size: 13px;
    color: #aaa;
}

.worker-skills span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: #fff3df;
    color: #a16800;
    margin: 4px;
    font-weight: 800;
}

/* PERFORMANCE */
.worker-performance .metric {
    margin-bottom: 16px;
}

.bar {
    height: 6px;
    background: #eee;
    border-radius: 4px;
    margin-top: 4px;
}

.bar i {
    display: block;
    height: 100%;
    background: #f59e0b;
    border-radius: 4px;
}

/* ACCIONES */
.worker-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delete-link {
    margin-top: 10px;
    color: red;
    background: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.workers-list {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 6px 0 24px;
    scroll-snap-type: x mandatory;
}

.worker-list-card {
    width: 150px;
    min-width: 150px;
    min-height: 165px;
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.035);
    transition: .2s ease;
    scroll-snap-align: start;
    position: relative;
}

.worker-list-card:hover {
    transform: translateY(-2px);
    border-color: #ffc400;
}

.worker-list-card.active {
    border: 2px solid #ffc400;
    box-shadow: 0 10px 24px rgba(126, 94, 0, .12);
}

.worker-list-avatar {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    overflow: hidden;
    background: #fff3bf;
    color: #806000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 12px;
}

.worker-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-list-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.worker-list-card p {
    margin: 5px 0 12px;
    color: #9c875b;
    font-size: 11px;
    line-height: 1.2;
}

.worker-status {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eefaf2;
    color: #15803d;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.worker-status.top-rated {
    background: #fff3bf;
    color: #a16800;
}
.workers-list {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 6px 0 24px;
}

.worker-list-card {
    width: 150px;
    min-width: 150px;
    height: 165px;
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.worker-list-card.active {
    border: 2px solid #ffc400;
}

.worker-list-avatar {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.worker-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-list-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
}

.worker-list-card p {
    margin: 5px 0 10px;
    color: #9c875b;
    font-size: 11px;
}

.worker-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto;
}

.worker-status {
    position: static !important;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.worker-status.active {
    background: #eefaf2;
    color: #15803d;
}

.worker-status.top-rated {
    background: #fff3bf;
    color: #a16800;
}
.worker-list-card {
    justify-content: flex-start !important;
    overflow: hidden;
}

.worker-list-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 auto 12px !important;
    background: #fff3bf !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.worker-list-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 999px !important;
}

.worker-list-card h3 {
    margin-top: 0 !important;
}
.workers-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 0 22px;
}

.worker-list-card {
    width: 215px;
    min-width: 215px;
    height: 68px;
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.035);
    transition: .2s ease;
}

.worker-list-card.active {
    border: 2px solid #806000;
}

.worker-list-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #f6ead4;
}

.worker-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.worker-list-card h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
}

.worker-list-card p {
    margin: 3px 0 0;
    color: #9c875b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.worker-badges,
.worker-status {
    display: none !important;
}
.invite-worker-card {
    justify-content: center;
    border: 2px dashed #d3c5ab;
    color: #806000;
    font-weight: 900;
}

.invite-worker-card span {
    font-size: 19px;
}
.worker-editor-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(126, 94, 0, .06);
}

.worker-editor-header {
    background: #fff3df;
    border-bottom: 1px solid #eee4d4;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.worker-editor-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.worker-editor-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.worker-editor-title span {
    color: #806000;
}

.worker-active-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: #6f5a2c;
    font-size: 13px;
}

.worker-active-toggle input {
    display: none;
}

.worker-active-toggle span {
    width: 38px;
    height: 21px;
    background: #d8d1c3;
    border-radius: 999px;
    position: relative;
}

.worker-active-toggle span::after {
    content: "";
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 999px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: .2s;
}

.worker-active-toggle input:checked + span {
    background: #806000;
}

.worker-active-toggle input:checked + span::after {
    left: 19px;
}

.worker-editor-body {
    padding: 30px 34px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 46px;
}

.worker-editor-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.worker-photo-editor {
    width: 165px;
    height: 165px;
    border: 4px solid #806000;
    border-radius: 999px;
    padding: 5px;
    position: relative;
}

.worker-photo-editor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.worker-photo-editor button {
    position: absolute;
    right: 2px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border: 0;
    background: #806000;
    color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.worker-socials {
    width: 100%;
}

.worker-socials h4,
.worker-services-head label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8f7951;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eadcc3;
}

.worker-social-input {
    position: relative;
    margin-bottom: 10px;
}

.worker-social-input span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #9c875b;
}

.worker-social-input input {
    width: 100%;
    height: 36px;
    border: 1px solid #eadcc3;
    border-radius: 7px;
    padding: 0 12px 0 42px;
    background: #fff;
    font-size: 13px;
}

.worker-editor-main {
    display: grid;
    gap: 24px;
}

.worker-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
}

.worker-form-grid label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: #8f7951;
}

.worker-form-grid input {
    height: 42px;
    border: 1px solid #eadcc3;
    background: #fff;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 700;
}

.worker-services-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.worker-services-head button {
    border: 0;
    background: transparent;
    color: #806000;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.worker-services-pills {
    background: #fff3df;
    border: 1px solid #eadcc3;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.worker-services-pills span {
    background: #ffdb93;
    color: #795f23;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 13px;
}

.worker-services-pills span i {
    font-style: normal;
    margin-left: 6px;
    opacity: .7;
}

.add-worker-service {
    border: 1px solid #806000;
    background: #fff;
    color: #806000;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.worker-next-availability {
    background: #f8ecdb;
    border-radius: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 16px;
}

.worker-next-availability > div {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #806000;
}

.worker-next-availability p {
    margin: 4px 0 0;
    color: #8f7951;
    font-size: 13px;
}

.worker-next-availability button {
    background: #fff;
    border: 1px solid #d3c5ab;
    border-radius: 8px;
    height: 38px;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
}

.worker-editor-footer {
    border-top: 1px solid #eee4d4;
    padding: 22px 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.worker-editor-footer > div {
    display: flex;
    gap: 14px;
    align-items: center;
}

.worker-delete-btn {
    height: 44px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.worker-cancel-btn {
    border: 0;
    background: transparent;
    font-weight: 900;
    color: #6d6047;
    cursor: pointer;
}

.worker-save-btn {
    height: 46px;
    border: 0;
    background: #806000;
    color: #fff;
    border-radius: 999px;
    padding: 0 28px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.worker-save-btn {
    height: 46px;
    border: 0;
    background: var(--brand);
    color: var(--text-dark);
    border-radius: 999px;
    padding: 0 28px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
}

.worker-save-btn:hover {
    background: var(--brand-dark);
}
.worker-delete-btn {
    height: 44px;
    border: 1px solid #f3c2c2;
    background: #fff;
    color: #d93636;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
}

.worker-delete-btn:hover {
    background: #ffecec;
}
.worker-cancel-btn {
    border: 1px solid #e7dcc8;
    background: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 800;
    color: #6d6047;
    cursor: pointer;
    transition: .2s;
}

.worker-cancel-btn:hover {
    background: #faf6ef;
}
.add-worker-service {
    border: 1px solid var(--brand);
    background: #fff;
    color: #b28700;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: .2s;
}

.add-worker-service:hover {
    background: var(--brand-soft);
}
.worker-services-head button {
    border: 0;
    background: transparent;
    color: #b28700;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.worker-services-head button:hover {
    text-decoration: underline;
}
.worker-next-availability button {
    background: #fff;
    border: 1px solid #e7dcc8;
    border-radius: 8px;
    height: 38px;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
}

.worker-next-availability button:hover {
    background: #faf6ef;
}
.services-section {
    display: grid;
    gap: 24px;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.section-kicker {
    display: block;
    color: #b28700;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.services-header h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
}

.services-actions {
    display: flex;
    gap: 12px;
}

.services-actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.services-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 32px;
    align-items: start;
}

.services-list {
    display: grid;
    gap: 34px;
}

.service-category-block {
    display: grid;
    gap: 14px;
}

.service-category-title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

.service-category-title::after {
    content: "";
    height: 1px;
    background: #eadcc3;
}

.service-category-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.service-category-title span {
    color: #9c875b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-item {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 18px;
    display: grid;
    grid-template-columns: 92px 1fr auto 48px;
    gap: 18px;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(126, 94, 0, .04);
    transition: .2s;
}

.service-item:hover,
.service-item.active {
    border-color: #ffc400;
    box-shadow: 0 12px 28px rgba(255, 196, 0, .12);
}

.service-thumb {
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff3df;
}

.service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-main h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.service-main p {
    margin: 8px 0 10px;
    color: #b6a07b;
    font-size: 13px;
    line-height: 1.35;
}

.service-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8f7951;
    font-size: 13px;
    font-weight: 700;
}

.service-meta .material-symbols-outlined {
    font-size: 17px;
}

.service-item > strong {
    font-size: 20px;
    color: #806000;
}

.service-edit-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #ffc400;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.service-detail-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(126, 94, 0, .08);
    position: sticky;
    top: 96px;
}

.service-detail-header {
    background: #fff3df;
    border-bottom: 1px solid #eee4d4;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-detail-header h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
}

.service-detail-header span {
    background: #fff0b3;
    color: #806000;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-image-editor {
    margin: 26px 24px 20px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #fff3df;
}

.service-image-editor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .75;
}

.service-image-editor button {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(255, 248, 242, .55);
    color: #806000;
    font-weight: 900;
    cursor: pointer;
}

.service-form {
    padding: 0 24px 24px;
    display: grid;
    gap: 18px;
}

.service-form label {
    display: block;
    margin-bottom: 7px;
    color: #8f7951;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.service-form input,
.service-form textarea,
.service-form select {
    width: 100%;
    border: 1px solid #eadcc3;
    background: #fff3df;
    border-radius: 10px;
    padding: 13px 14px;
    font-weight: 700;
    outline: none;
}

.service-form textarea {
    resize: vertical;
}

.service-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.price-input {
    position: relative;
}

.price-input span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    color: #9c875b;
}

.price-input input {
    padding-right: 34px;
}

.service-form small {
    display: block;
    color: #c0aa82;
    margin: -2px 0 10px;
}

.overlap-box {
    background: #fff3df;
    border: 1px solid #eadcc3;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.overlap-box span {
    background: #fff;
    border: 1px solid #eadcc3;
    color: #6d6047;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 800;
    font-size: 12px;
}

.overlap-box span i {
    font-style: normal;
    margin-left: 6px;
}

.overlap-box button {
    border: 1px dashed #806000;
    background: #fff;
    color: #806000;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.service-detail-footer {
    border-top: 1px solid #eee4d4;
    margin: 0 24px 24px;
    padding-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.service-delete-btn,
.service-save-btn {
    height: 56px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.service-delete-btn {
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
}

.service-delete-btn:hover {
    background: #fff1f1;
}

.service-save-btn {
    border: 0;
    background: #ffc400;
    color: #1a1a1a;
    box-shadow: 0 8px 18px rgba(255, 196, 0, .22);
}

.service-save-btn:hover {
    background: #e0ac00;
}

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

    .service-detail-card {
        position: static;
    }
}

@media (max-width: 700px) {
    .services-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-actions {
        width: 100%;
        flex-direction: column;
    }

    .service-item {
        grid-template-columns: 72px 1fr;
    }

    .service-item > strong,
    .service-edit-btn {
        grid-column: 2;
    }

    .service-form-row,
    .service-detail-footer {
        grid-template-columns: 1fr;
    }
}
.reservations-section {
    display: grid;
    gap: 22px;
}

.reservations-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.reservations-header .book-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reservations-toolbar {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reservation-worker-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reservation-worker-filters button {
    height: 36px;
    border: 0;
    background: #fff3df;
    color: #806000;
    border-radius: 10px;
    padding: 0 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.reservation-worker-filters button.active {
    background: #ffc400;
    color: #1a1a1a;
}

.reservation-worker-filters img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
}

.reservations-filter-btn {
    width: 42px;
    height: 42px;
    border: 0;
    background: #fff;
    color: #8f7951;
    border-left: 1px solid #eee4d4;
    cursor: pointer;
}

.reservations-calendar {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 560px;
}

.calendar-grid {
    position: relative;
    display: grid;
    grid-template-columns: 72px repeat(7, 1fr);
    grid-template-rows: 72px repeat(6, 78px);
    min-width: 920px;
}

.calendar-time-spacer {
    border-right: 1px solid #f1eadf;
    border-bottom: 1px solid #f1eadf;
    background: #fff;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f1eadf;
    border-right: 1px solid #f8f1e8;
    background: #fff;
}

.calendar-day span {
    font-size: 10px;
    font-weight: 900;
    color: #b6a07b;
}

.calendar-day strong {
    margin-top: 4px;
    font-size: 17px;
    color: #8f7951;
}

.calendar-day.active {
    background: #fff8ec;
}

.calendar-day.active span,
.calendar-day.active strong {
    color: #806000;
}

.calendar-day.muted {
    opacity: .45;
}

.calendar-hour {
    border-right: 1px solid #f1eadf;
    border-bottom: 1px solid #f8f1e8;
    padding-top: 10px;
    text-align: center;
    color: #b6a07b;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
}

.calendar-cell {
    border-right: 1px solid #f8f1e8;
    border-bottom: 1px solid #f8f1e8;
    background: #fff;
}

.current-time-line {
    position: absolute;
    left: 72px;
    right: 0;
    height: 2px;
    background: #00d5ff;
    z-index: 5;
}

.current-time-line span {
    position: absolute;
    left: -39px;
    top: -10px;
    background: #00bcd4;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    padding: 3px 6px;
    font-weight: 900;
}

.booking-card {
    z-index: 10;
    margin: 8px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,.06);
    font-size: 11px;
    overflow: hidden;
}

.booking-card strong {
    display: block;
    font-weight: 900;
    line-height: 1.2;
}

.booking-card p {
    margin: 4px 0 0;
    font-size: 10px;
    color: #8f7951;
}

.booking-card small {
    display: block;
    margin-top: 10px;
    font-weight: 900;
}

.booking-card span {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-yellow {
    background: #fff3df;
    border-left: 4px solid #ffc400;
    color: #6b4e00;
}

.booking-yellow.strong {
    background: #ffe7a8;
}

.booking-muted {
    background: #e9dfcf;
    color: #6d6047;
}

.booking-blue {
    background: #d8fbff;
    color: #006877;
    border: 1px solid #9be8f0;
}

.calendar-floating-btn {
    position: absolute;
    right: 26px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background: #ffc400;
    color: #1a1a1a;
    box-shadow: 0 12px 24px rgba(255, 196, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calendar-floating-btn .material-symbols-outlined {
    font-size: 30px;
}

@media (max-width: 1000px) {
    .reservations-calendar {
        overflow-x: auto;
    }

    .reservations-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}
.calendar-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-nav button {
    height: 38px;
    border: 1px solid #eadcc3;
    background: #fff;
    color: #806000;
    border-radius: 10px;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
}

.calendar-nav button:hover {
    background: #fff3df;
}

.reservations-header p {
    margin: 6px 0 0;
    color: #8f7951;
    font-weight: 800;
}

.calendar-loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 14px;
}

.calendar-loader span {
    width: 15px;
    height: 15px;
    background: #ffc400;
    border-radius: 999px;
    animation: calendarDots .8s infinite alternate;
}

.calendar-loader span:nth-child(2) {
    animation-delay: .15s;
}

.calendar-loader span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes calendarDots {
    from {
        opacity: .25;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.reservations-calendar.is-loading {
    opacity: .35;
    pointer-events: none;
}

.calendar-cell.closed-cell {
    background: rgba(220, 38, 38, .10);
    border-color: rgba(220, 38, 38, .22);
    position: relative;
}

.calendar-cell.closed-cell::after {
    content: "Cerrado";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(220, 38, 38, .65);
    font-size: 10px;
    font-weight: 900;
}

.reservation-worker-filters button {
    transition: .2s;
}

.reservation-worker-filters button.active {
    background: #ffc400;
    color: #1a1a1a;
}
.clients-section {
    display: grid;
    gap: 22px;
}

.clients-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.client-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.client-filters button {
    height: 36px;
    border: 1px solid #eadcc3;
    background: #fff;
    color: #8f7951;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.client-filters button.active {
    background: #fff3df;
    border-color: #ffc400;
    color: #b28700;
}

.clients-topbar .book-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.client-letters {
    padding: 14px 16px;
    display: flex;
    gap: 18px;
    align-items: center;
    overflow-x: auto;
}

.client-letters button {
    min-width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8f7951;
    font-weight: 900;
    cursor: pointer;
}

.client-letters button.active {
    background: #ffc400;
    color: #1a1a1a;
}

.clients-list {
    display: grid;
    gap: 16px;
}

.client-card,
.client-row-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(126, 94, 0, .04);
    overflow: hidden;
}

.client-card-head,
.client-row-card {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
}

.client-main-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-main-info img,
.client-initials {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    object-fit: cover;
}

.client-initials {
    background: #f3eadb;
    color: #9c875b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.client-main-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

.client-main-info p {
    margin: 3px 0 0;
    color: #8f7951;
    font-size: 13px;
}

.client-last-date {
    text-align: right;
}

.client-last-date span {
    display: block;
    color: #b6a07b;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 900;
}

.client-last-date strong {
    color: #4b4030;
    font-size: 14px;
}

.client-actions {
    display: flex;
    gap: 8px;
}

.client-actions button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #fff3df;
    color: #b28700;
    cursor: pointer;
}

.client-actions .client-delete,
.client-actions button:last-child {
    background: #fff1f1;
    color: #dc2626;
}

.client-card-body {
    border-top: 1px solid #eee4d4;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr;
}

.client-card-body section {
    padding: 24px;
    border-right: 1px solid #eee4d4;
}

.client-card-body section:last-child {
    border-right: 0;
}

.client-card-body h4 {
    margin: 0 0 18px;
    color: #b6a07b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

.client-info-grid,
.client-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}

.client-info-grid small,
.client-stats-grid small {
    display: block;
    color: #b6a07b;
    font-size: 10px;
    font-weight: 900;
}

.client-info-grid strong,
.client-stats-grid strong {
    display: block;
    margin-top: 4px;
    color: #2a241c;
    font-size: 13px;
}

.client-stats-grid div {
    background: #fffdf8;
    border: 1px solid #eee4d4;
    border-radius: 10px;
    padding: 13px;
}

.client-stats-grid strong {
    font-size: 20px;
}

.client-stats-grid .money {
    color: #00a99d;
}

.client-stats-grid .vip {
    display: inline-block;
    background: #fff3c4;
    color: #b28700;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
}

.client-note {
    color: #6d6047;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    background: #fffdf8;
    border-radius: 12px;
    padding: 16px;
}

.update-notes-btn {
    margin-top: 12px;
    border: 0;
    background: transparent;
    color: #b28700;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

@media (max-width: 950px) {
    .client-card-body {
        grid-template-columns: 1fr;
    }

    .client-card-body section {
        border-right: 0;
        border-bottom: 1px solid #eee4d4;
    }

    .client-card-body section:last-child {
        border-bottom: 0;
    }

    .client-card-head,
    .client-row-card {
        grid-template-columns: 1fr;
    }

    .client-last-date {
        text-align: left;
    }
}
#section-clientes .clients-section {
    display: grid;
    gap: 22px;
}

#section-clientes .client-letters {
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
}

#section-clientes .client-letters button {
    min-width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8f7951;
    font-weight: 900;
    cursor: pointer;
}

#section-clientes .client-letters button.active {
    background: #ffc400;
    color: #1a1a1a;
}

#section-clientes .clients-list {
    display: grid;
    gap: 16px;
}

#section-clientes .client-card,
#section-clientes .client-row-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(126, 94, 0, .04);
    overflow: hidden;
}

#section-clientes .client-card-head {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
}

#section-clientes .client-main-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

#section-clientes .client-main-info img,
#section-clientes .client-initials {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    object-fit: cover;
}

#section-clientes .client-main-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

#section-clientes .client-main-info p {
    margin: 3px 0 0;
    color: #8f7951;
    font-size: 13px;
}

#section-clientes .client-last-date {
    text-align: right;
}

#section-clientes .client-last-date span {
    display: block;
    color: #b6a07b;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 900;
}

#section-clientes .client-last-date strong {
    color: #4b4030;
    font-size: 14px;
}

#section-clientes .client-actions {
    display: flex;
    gap: 8px;
}

#section-clientes .client-actions button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #fff3df;
    color: #b28700;
    cursor: pointer;
}

#section-clientes .client-actions button:last-child {
    background: #fff1f1;
    color: #dc2626;
}

#section-clientes .client-card-body {
    border-top: 1px solid #eee4d4;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr;
}

#section-clientes .client-card-body section {
    padding: 24px;
    border-right: 1px solid #eee4d4;
}

#section-clientes .client-card-body section:last-child {
    border-right: 0;
}

#section-clientes .client-card-body h4 {
    margin: 0 0 18px;
    color: #b6a07b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

#section-clientes .client-info-grid,
#section-clientes .client-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}

#section-clientes .client-info-grid small,
#section-clientes .client-stats-grid small {
    display: block;
    color: #b6a07b;
    font-size: 10px;
    font-weight: 900;
}

#section-clientes .client-info-grid strong,
#section-clientes .client-stats-grid strong {
    display: block;
    margin-top: 4px;
    color: #2a241c;
    font-size: 13px;
}

#section-clientes .client-stats-grid div {
    background: #fffdf8;
    border: 1px solid #eee4d4;
    border-radius: 10px;
    padding: 13px;
}

#section-clientes .client-stats-grid strong {
    font-size: 20px;
}

#section-clientes .client-stats-grid .money {
    color: #00a99d;
}

#section-clientes .client-stats-grid .vip {
    display: inline-block;
    background: #fff3c4;
    color: #b28700;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
}

#section-clientes .client-note {
    color: #6d6047;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    background: #fffdf8;
    border-radius: 12px;
    padding: 16px;
}
.stats-section {
    display: grid;
    gap: 24px;
}

.stats-main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.stats-main-header h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 900;
}

.stats-main-header p {
    margin: 6px 0 0;
    color: #8f7951;
    font-weight: 700;
}

.stats-period-badge {
    background: #fff3df;
    border: 1px solid #eadcc3;
    color: #806000;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 900;
}

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

.stats-summary-card {
    background: #fff;
    border: 1px solid #eee4d4;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 22px rgba(126, 94, 0, .04);
}

.stats-summary-card span {
    display: block;
    color: #b6a07b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.stats-summary-card strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    font-weight: 950;
    color: #201b11;
}

.stats-summary-card small {
    display: block;
    margin-top: 6px;
    color: #8f7951;
    font-weight: 700;
}

.stats-summary-card.income strong {
    color: #00a99d;
}

.stats-summary-card.success strong {
    color: #16a34a;
}

.stats-summary-card.danger strong {
    color: #dc2626;
}

.stats-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
    gap: 24px;
    align-items: start;
}

.weekly-stats-card {
    padding: 24px;
}

.stats-card-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.stats-card-header h3,
.ranking-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.stats-card-header p {
    margin: 4px 0 0;
    color: #8f7951;
    font-weight: 700;
}

.week-stat-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.week-stat-filters button {
    border: 1px solid #eadcc3;
    background: #fff;
    color: #806000;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    cursor: pointer;
}

.week-stat-filters button.active {
    background: #ffc400;
    color: #1a1a1a;
    border-color: #ffc400;
}

.weekly-bars {
    display: grid;
    gap: 16px;
}

.weekly-bar-row {
    display: grid;
    grid-template-columns: 36px 1fr 40px;
    gap: 12px;
    align-items: center;
}

.weekly-bar-row span {
    color: #8f7951;
    font-weight: 900;
}

.weekly-bar-row div {
    height: 14px;
    background: #fff3df;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #eadcc3;
}

.weekly-bar-row div i {
    display: block;
    height: 100%;
    background: #ffc400;
    border-radius: 999px;
}

.weekly-bar-row strong {
    text-align: right;
    font-weight: 950;
}

.stats-rankings {
    display: grid;
    gap: 16px;
}

.ranking-card {
    padding: 22px;
}

.ranking-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #eee4d4;
}

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

.ranking-row span {
    color: #4b4030;
    font-weight: 800;
}

.ranking-row strong {
    color: #806000;
    font-weight: 950;
}

@media (max-width: 1100px) {
    .stats-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .stats-main-header,
    .stats-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-summary-grid {
        grid-template-columns: 1fr;
    }
}
.finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.finance-card {
    padding: 24px;
}

.finance-card-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
}

.finance-card-header p {
    margin: 6px 0 0;
    color: #8f7951;
    font-weight: 700;
}

.finance-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.stats-filter-buttons button, .finance-filters button {
    border: 1px solid #eadcc3;
    background: #fff;
    color: #806000;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    cursor: pointer;
}

.stats-filter-buttons button.active, .finance-filters button.active {
    background: #ffc400;
    border-color: #ffc400;
    color: #1a1a1a;
}

.finance-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 18px 0;
}

.finance-date-range label,
.expense-form label {
    display: block;
    color: #b6a07b;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 6px;
}

.finance-date-range input,
.expense-form input,
.expense-form select {
    width: 100%;
    height: 44px;
    border: 1px solid #eadcc3;
    background: #fff8ec;
    border-radius: 10px;
    padding: 0 12px;
    font-weight: 800;
}

.finance-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.finance-kpis article {
    background: #fffdf8;
    border: 1px solid #eee4d4;
    border-radius: 12px;
    padding: 14px;
}

.finance-kpis span {
    display: block;
    color: #b6a07b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-kpis strong {
    display: block;
    margin-top: 7px;
    font-size: 22px;
    font-weight: 950;
}

.finance-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.finance-actions .book-btn,
.expense-form .book-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.expense-form {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr .8fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 20px;
}

.expenses-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.expense-row {
    display: grid;
    grid-template-columns: 1fr auto 42px;
    gap: 14px;
    align-items: center;
    background: #fffdf8;
    border: 1px solid #eee4d4;
    border-radius: 12px;
    padding: 14px;
}

.expense-row strong {
    color: #201b11;
    font-weight: 950;
}

.expense-row span {
    display: block;
    margin-top: 4px;
    color: #8f7951;
    font-size: 12px;
    font-weight: 700;
}

.expense-delete {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #fff1f1;
    color: #dc2626;
    cursor: pointer;
}

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

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

@media (max-width: 700px) {
    .finance-date-range,
    .finance-kpis,
    .expense-form {
        grid-template-columns: 1fr;
    }
}
.yocutz-datepicker,
.flatpickr-input {
    width: 100%;
    height: 44px;
    border: 1px solid #eadcc3;
    background: #fff8ec;
    border-radius: 10px;
    padding: 0 42px 0 14px;
    font-weight: 800;
    color: #201b11;
}

.flatpickr-calendar {
    border: 1px solid #eadcc3 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(126, 94, 0, .14) !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

.flatpickr-months {
    background: #fff3df !important;
    padding: 8px 0 !important;
}

.flatpickr-current-month {
    font-weight: 900 !important;
    color: #201b11 !important;
}

.flatpickr-weekdays {
    background: #fff8ec !important;
}

.flatpickr-weekday {
    color: #8f7951 !important;
    font-weight: 900 !important;
}

.flatpickr-day {
    border-radius: 10px !important;
    font-weight: 800 !important;
    color: #201b11 !important;
}

.flatpickr-day:hover {
    background: #fff3c4 !important;
    border-color: #fff3c4 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #ffc400 !important;
    border-color: #ffc400 !important;
    color: #1a1a1a !important;
}

.flatpickr-day.today {
    border-color: #806000 !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #b6a07b !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #806000 !important;
    fill: #806000 !important;
}

.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar input.cur-year {
    font-weight: 900 !important;
    color: #201b11 !important;
}
.date-input-wrap {
    position: relative;
    width: 100%;
}

.date-input-wrap input,
.date-input-wrap .flatpickr-input {
    width: 100%;
    padding-right: 44px;
}

.date-input-wrap .material-symbols-outlined {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #806000;
    pointer-events: none;
}
.date-input-wrap {
    position: relative;
    width: 100%;
}

.date-input-wrap input,
.date-input-wrap .flatpickr-input {
    width: 100%;
    height: 44px; /* 👈 CLAVE */
    padding: 0 44px 0 14px;
    display: flex;
    align-items: center;
}

.date-input-wrap .material-symbols-outlined {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(0%);
    font-size: 20px;
    color: #806000;
    pointer-events: none;
    line-height: 1; /* 👈 evita desalineado */
}
.booking-custom-range {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    margin: 18px 0;
    padding: 16px;
    background: #fff8ec;
    border: 1px solid #f0d9ad;
    border-radius: 16px;
}

.booking-state-filters {
    margin: 14px 0 18px;
}

@media (max-width: 900px) {
    .booking-custom-range {
        grid-template-columns: 1fr;
    }
}
.booking-custom-range {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 18px 0;
    padding: 16px;
    background: #fff8ec;
    border: 1px solid #f0d9ad;
    border-radius: 16px;
}

/* cada bloque */
.booking-custom-range .form-group {
    flex: 1;
    min-width: 0;
}

/* botón alineado */
.booking-custom-range .book-btn {
    height: 44px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .booking-custom-range {
        flex-direction: column;
        align-items: stretch;
    }
}

.media-card {
    padding: 24px;
}

.media-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.media-card-header h3 {
    margin: 0;
    font-size: 20px;
}

.media-card-header p {
    margin: 4px 0 0;
    color: #8f7951;
    font-size: 14px;
}

.media-card-header .material-symbols-outlined {
    color: #ffc400;
}

.logo-preview-box {
    width: 100%;
    height: 170px;
    border-radius: 18px;
    overflow: hidden;
    background: #f8eddb;
    border: 1px solid #ead8b9;
    margin-bottom: 14px;
}

.logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-upload-card {
    min-height: 110px;
    border: 2px dashed #e4c27c;
    background: #fff8ef;
    border-radius: 16px;
    color: #806000;
    font-weight: 800;
    cursor: pointer;
}
.media-card {
    padding: 24px;
}

.media-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.media-card-header h3 {
    margin: 0;
    font-size: 20px;
}

.media-card-header p {
    margin: 4px 0 0;
    color: #8f7951;
    font-size: 14px;
}

.media-card-header .material-symbols-outlined {
    color: #ffc400;
}

.logo-preview-box {
    width: 100%;
    height: 170px;
    border-radius: 18px;
    overflow: hidden;
    background: #f8eddb;
    border: 1px solid #ead8b9;
    margin-bottom: 14px;
}

.logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-upload-card {
    min-height: 110px;
    border: 2px dashed #e4c27c;
    background: #fff8ef;
    border-radius: 16px;
    color: #806000;
    font-weight: 800;
    cursor: pointer;
}
.stats-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.stats-filter-buttons {
    display: flex;
    gap: 8px;
}

.stats-filter-buttons button {
    background: #f3e8d5;
    border: 1px solid #e0cfae;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.stats-filter-buttons button.active {
    background: #f7b500;
    color: #000;
    border-color: #f7b500;
}

.stats-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-custom-range input {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e0cfae;
    background: #fff;
}
.stats-summary-panel {
    background: #fff;
    border: 1px solid #eadcc7;
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 18px 45px rgba(80, 55, 20, .06);
}

.stats-summary-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.stats-summary-toolbar h3 {
    margin: 4px 0 2px;
    font-size: 22px;
}

.stats-summary-toolbar p {
    margin: 0;
    color: #8b806f;
    font-size: 14px;
}

.stats-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stats-filter-buttons button {
    border: 1px solid #ead7ad;
    background: #fff7e8;
    color: #7a5a00;
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.stats-filter-buttons button:hover {
    background: #fff0cc;
    border-color: #ffc400;
}

.stats-filter-buttons button.active {
    background: #ffc400;
    border-color: #ffc400;
    color: #1f1600;
    box-shadow: 0 8px 18px rgba(255, 196, 0, .25);
}

.stats-custom-range {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    background: #fff8ed;
    border: 1px dashed #e2c68d;
    border-radius: 16px;
}

.stats-custom-range > div {
    flex: 1;
}

.stats-custom-range label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #9a7a34;
}

.stats-custom-range input {
    width: 100%;
}
.quick-stats-title-filtered {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.quick-stats-title-filtered small {
    display: block;
    margin-top: 4px;
    color: #8f7951;
    font-weight: 800;
}

.quick-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff8ef;
    border: 1px solid #ead8b7;
    padding: 6px;
    border-radius: 16px;
}

.quick-stats-filters button {
    border: 0;
    background: transparent;
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    color: #806000;
}

.quick-stats-filters button.active {
    background: #ffc400;
    color: #21160d;
    box-shadow: 0 8px 18px rgba(255, 196, 0, .22);
}

.quick-custom-range {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
    padding: 14px;
    background: #fff8ef;
    border: 1px solid #ead8b7;
    border-radius: 18px;
}

.quick-custom-range label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 900;
    color: #9b7a35;
    text-transform: uppercase;
}

@media (max-width: 800px) {
    .quick-stats-title-filtered {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-custom-range {
        grid-template-columns: 1fr;
    }
}

.quick-stats-loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 12px 0 18px;
}

.quick-stats-loader span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffc400;
    animation: quickDots 0.8s infinite ease-in-out;
}

.quick-stats-loader span:nth-child(2) {
    animation-delay: .12s;
}

.quick-stats-loader span:nth-child(3) {
    animation-delay: .24s;
}

@keyframes quickDots {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.quick-stats-grid.is-loading {
    opacity: .35;
    pointer-events: none;
    transition: .2s ease;
}

.stats-summary-loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 18px 0;
}

.stats-summary-loader span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #ffc400;
    animation: statsDotPulse .85s infinite ease-in-out;
}

.stats-summary-loader span:nth-child(2) {
    animation-delay: .12s;
}

.stats-summary-loader span:nth-child(3) {
    animation-delay: .24s;
}

@keyframes statsDotPulse {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.stats-summary-grid.is-loading {
    opacity: .35;
    pointer-events: none;
    filter: blur(1px);
}


.finance-loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 18px 0;
}

.finance-loader span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #ffc400;
    animation: financeDots .85s infinite ease-in-out;
}

.finance-loader span:nth-child(2) {
    animation-delay: .12s;
}

.finance-loader span:nth-child(3) {
    animation-delay: .24s;
}

@keyframes financeDots {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.finance-kpis.is-loading {
    opacity: .35;
    pointer-events: none;
    filter: blur(1px);
}


.booking-stats-loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 18px 0;
}

.booking-stats-loader span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #ffc400;
    animation: bookingStatsDots .85s infinite ease-in-out;
}

.booking-stats-loader span:nth-child(2) {
    animation-delay: .12s;
}

.booking-stats-loader span:nth-child(3) {
    animation-delay: .24s;
}

@keyframes bookingStatsDots {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

#bookingStatsBars.is-loading {
    opacity: .35;
    pointer-events: none;
    filter: blur(1px);
}

.sidebar-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:20px 10px;
    text-decoration:none;
}

.sidebar-logo img{
   
    max-width:-webkit-fill-available;
    height:auto;
    object-fit:contain;
}
.sidebar-panel-title{
    width:100%;
    padding:0 22px 18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--yellow);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.autocomplete-field {
    position: relative;
}

.autocomplete-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    overflow: hidden;
    z-index: 50;
}

.autocomplete-results.active {
    display: block;
}

.autocomplete-option {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-weight: 800;
}

.autocomplete-option:hover {
    background: #fff4d6;
}

.autocomplete-option small {
    display: block;
    margin-top: 3px;
    color: #777;
    font-weight: 600;
}
.center-chips.is-disabled {
    opacity: .35;
    pointer-events: none;
    filter: grayscale(1);
}

.book-btn.is-loading {
    opacity: .65;
    pointer-events: none;
}
.owner-work-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.owner-work-btn {
    border: 1px solid rgba(0,0,0,.12);
    background: #f6ead5;
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 900;
    cursor: pointer;
}

.owner-work-btn.active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #000;
}

.section-save-btn.is-loading {
    opacity: .65;
    pointer-events: none;
}
.owner-work-box{
    margin-top:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:18px;
    background:#111827;
}

.owner-work-header{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:18px;
}

.owner-work-header span{
    color:#ffc400;
    font-size:24px;
}

.owner-work-header h3{
    margin:0;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.owner-work-header p{
    margin:4px 0 0;
    color:#9ca3af;
    font-size:13px;
}

.owner-work-options{
    display:flex;
    gap:12px;
}

.owner-work-btn{
    flex:1;
    border:none;
    background:#1f2937;
    border-radius:16px;
    padding:18px;
    color:#fff;
    cursor:pointer;
    transition:.2s;
    border:2px solid transparent;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.owner-work-btn span{
    font-size:26px;
}

.owner-work-btn strong{
    font-size:13px;
}

.owner-work-btn.active{
    border-color:#ffc400;
    background:#2a3445;
}
.owner-work-box {
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    grid-column: 1 / -1;
}

.owner-work-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.owner-work-header span {
    color: var(--yellow);
    font-size: 24px;
}

.owner-work-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.owner-work-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.owner-work-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.owner-work-btn {
    border: 1px solid var(--border);
    background: var(--input-bg);
    border-radius: 14px;
    padding: 16px;
    color: var(--text);
    cursor: pointer;
    transition: .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
}

.owner-work-btn span {
    font-size: 22px;
}

.owner-work-btn.active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #000;
    box-shadow: 0 8px 20px rgba(255,196,0,.22);
}
.logo-preview-box {
    width: 140px;
    height: 140px;
    border-radius: 18px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Galería */
.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.gallery-image-card,
.gallery-upload-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 92px;
    max-height: 120px;
    border-radius: 16px;
    overflow: hidden;
}

.gallery-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge pendiente */
.gallery-pending-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 999px;
}

/* Botón eliminar */
.gallery-delete-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(220, 38, 38, .92);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.gallery-delete-btn span {
    font-size: 17px;
}
.worker-editor-card {
    position: relative;
}

.worker-editor-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: 24px;
    background: rgba(15, 23, 42, .88);
    backdrop-filter: blur(4px);
}
.worker-list-avatar img,
#workerDetailImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-list-avatar-fallback,
.worker-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcc00, #ff9500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
}

.worker-list-avatar-fallback .material-symbols-outlined,
.worker-avatar-fallback .material-symbols-outlined {
    font-size: 28px;
}

.worker-editor-card {
    position: relative;
}

.worker-editor-loader {
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: 24px;
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(4px);
}

.worker-extra-editor {
    margin-top: 22px;
}

.worker-section-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    background: #fff4dc;
    border: 1px solid #f0d8a8;
    padding: 8px;
    border-radius: 18px;
}

.worker-section-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 900;
    color: #8a6a20;
    cursor: pointer;
}

.worker-section-tab.active {
    background: #ffc400;
    color: #111;
    box-shadow: 0 8px 18px rgba(255, 196, 0, .25);
}

.worker-section-panel {
    display: none;
}

.worker-section-panel.active {
    display: block;
}

.worker-schedule-box,
.worker-vacations-box {
    background: #fff4dc;
    border: 1px solid #efd39b;
    border-radius: 18px;
    padding: 18px;
}

.worker-schedule-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.worker-schedule-toggle-row strong {
    display: block;
    font-size: 16px;
    font-weight: 950;
    color: #111;
}

.worker-schedule-toggle-row p {
    margin: 5px 0 0;
    color: #8a6a20;
    font-weight: 700;
}

.worker-custom-schedule {
    margin-top: 18px;
}

.worker-days-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.worker-days-selector button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e3c47a;
    background: #fff;
    color: #8a6a20;
    font-weight: 950;
    cursor: pointer;
}

.worker-days-selector button.active {
    background: #ffc400;
    color: #111;
    border-color: #ffc400;
}

.worker-day-editor {
    background: #fff;
    border: 1px solid #efd39b;
    border-radius: 16px;
    padding: 16px;
}

.worker-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.worker-day-head strong {
    font-size: 17px;
    font-weight: 950;
}

.worker-day-toggle {
    border: 1px solid #22c55e;
    background: #dcfce7;
    color: #15803d;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 900;
    cursor: pointer;
}

.worker-day-toggle.closed {
    border-color: #ef4444;
    background: #fee2e2;
    color: #b91c1c;
}

.worker-hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.worker-hours-block label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 950;
    color: #8a6a20;
    text-transform: uppercase;
}

.worker-hours-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worker-hours-row input {
    width: 100%;
    border: 1px solid #ead2a3;
    border-radius: 12px;
    padding: 10px;
    font-weight: 900;
}

.worker-vacations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.worker-empty-vacations {
    padding: 14px;
    background: #fff;
    border: 1px dashed #d9bd79;
    border-radius: 14px;
    color: #8a6a20;
    font-weight: 800;
}

.worker-vacation-card {
    background: #fff;
    border: 1px solid #ead2a3;
    border-radius: 16px;
    padding: 14px;
}

.worker-vacation-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr auto;
    gap: 10px;
    align-items: end;
}

.worker-vacation-row label {
    display: block;
    font-size: 11px;
    font-weight: 950;
    color: #8a6a20;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.worker-vacation-row input {
    width: 100%;
    border: 1px solid #ead2a3;
    border-radius: 12px;
    padding: 10px;
    font-weight: 800;
}

.worker-remove-vacation {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #ef4444;
    background: #fee2e2;
    color: #b91c1c;
    cursor: pointer;
}

.worker-add-vacation-btn {
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: #ffc400;
    color: #111;
    padding: 13px 18px;
    font-weight: 950;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.worker-services-selector,
.worker-services-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.worker-service-chip {
    border: 0;
    background: #f4f4f4;
    color: #3f3f3f;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 15px;
}

.worker-service-chip:hover {
    transform: translateY(-1px);
}

.worker-service-chip.active {
    background: #ffc400;
    color: #111;
    box-shadow: 0 8px 20px rgba(255, 196, 0, .35);
}
.worker-vacations-box {
    padding: 22px;
    border-radius: 22px;
    background: #fff7e6;
    border: 1px solid #ead7aa;
}

.worker-vacations-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.worker-empty-vacations {
    color: #8a6a1f;
    font-weight: 800;
}

.worker-vacation-card {
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ead7aa;
    box-shadow: 0 8px 22px rgba(120, 90, 20, .08);
}

.worker-vacation-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.worker-date-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: #fff7e6;
    border: 1px solid #ead7aa;
}

.worker-date-card span {
    color: #a47600;
}

.worker-date-card small {
    display: block;
    font-weight: 900;
    color: #8a6a1f;
    margin-bottom: 4px;
}

.worker-date-card input,
.worker-vacation-reason {
    width: 100%;
    border: 0;
    background: transparent;
    font-weight: 800;
    outline: none;
}

.worker-vacation-reason {
    padding: 14px;
    border-radius: 14px;
    background: #fff7e6;
    border: 1px solid #ead7aa;
    margin-bottom: 14px;
}

.worker-remove-vacation {
    width: 100%;
    border: 1px solid #ef4444;
    background: #fff1f1;
    color: #dc2626;
    padding: 12px;
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
}

.worker-add-vacation-btn {
    margin-top: 18px;
    width: 100%;
    border: 0;
    background: #ffc400;
    color: #111;
    padding: 15px;
    border-radius: 18px;
    font-weight: 900;
    cursor: pointer;
}

.worker-empty-vacations {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px dashed #d8b45c;
    color: #8a6a1f;
}

.worker-empty-vacations span {
    font-size: 34px;
    color: #a47600;
}

.worker-empty-vacations strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
    color: #111;
}

.worker-empty-vacations p {
    margin: 4px 0 0;
    font-weight: 700;
}

.worker-vacation-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.worker-vacation-card-head strong {
    font-size: 18px;
    font-weight: 950;
    color: #111;
}

.worker-remove-vacation {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid #ef4444;
    background: #fff1f1;
    color: #dc2626;
    cursor: pointer;
}

.worker-vacation-reason-box {
    display: block;
    padding: 14px;
    border-radius: 16px;
    background: #fff7e6;
    border: 1px solid #ead7aa;
}

.worker-vacation-reason-box small {
    display: block;
    margin-bottom: 6px;
    color: #8a6a1f;
    font-weight: 950;
    text-transform: uppercase;
}

.worker-vacation-reason-box input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
}
.worker-vacations-box {
    padding: 26px;
    border-radius: 26px;
    background: #fffdf8;
    border: 1px solid #ead7aa;
    box-shadow: 0 18px 40px rgba(120, 90, 20, .08);
}

.worker-vacations-header h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 950;
    color: #111;
}

.worker-vacations-header p {
    margin: 6px 0 24px;
    color: #6b7280;
    font-weight: 700;
}

.worker-empty-vacations {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 20px;
    background: #fff8e8;
    border: 1px dashed #d8b45c;
    margin-bottom: 22px;
}

.worker-empty-vacations > span {
    font-size: 38px;
    color: #a47600;
}

.worker-empty-vacations strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
    color: #111;
}

.worker-empty-vacations p {
    margin: 4px 0 0;
    color: #7a6325;
    font-weight: 700;
}

.worker-vacation-card {
    display: flex;
    gap: 22px;
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #ead7aa;
    box-shadow: 0 10px 30px rgba(120, 90, 20, .08);
    margin-bottom: 24px;
}

.worker-vacation-main-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff4d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.worker-vacation-main-icon span {
    color: #a47600;
    font-size: 34px;
}

.worker-vacation-content {
    flex: 1;
}

.worker-vacation-card-head,
.worker-vacation-new-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.worker-vacation-card-head strong,
.worker-vacation-new-head strong {
    font-size: 22px;
    font-weight: 950;
    color: #111;
}

.worker-vacation-new-head span {
    color: #111;
    font-weight: 700;
}

.worker-remove-vacation {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid #ff3b3b;
    background: #fff5f5;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worker-remove-vacation span {
    font-size: 28px;
}

.worker-vacation-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.worker-vacation-summary > div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: #fffaf0;
    border: 1px solid #ead7aa;
}

.worker-vacation-summary span {
    color: #a47600;
    font-size: 30px;
}

.worker-vacation-summary small {
    display: block;
    color: #6b7280;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.worker-vacation-summary strong {
    display: block;
    margin-top: 4px;
    color: #111;
    font-size: 16px;
    font-weight: 950;
}

.worker-vacation-new-card {
    padding: 24px;
    border-radius: 24px;
    background: #fffaf0;
    border: 1px solid #ead7aa;
}

.worker-vacation-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.worker-date-card,
.worker-vacation-reason-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    background: #fff8e8;
    border: 1px solid #ead7aa;
}

.worker-date-card > span,
.worker-vacation-reason-box > span {
    color: #a47600;
    font-size: 30px;
}

.worker-date-card small,
.worker-vacation-reason-box small {
    display: block;
    color: #8a6a1f;
    font-weight: 950;
    margin-bottom: 5px;
}

.worker-date-card input,
.worker-vacation-reason-box input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111;
    font-size: 16px;
    font-weight: 900;
}

.worker-vacation-reason-box {
    margin-bottom: 18px;
}

.worker-add-vacation-btn {
    width: 100%;
    min-height: 64px;
    border: 0;
    border-radius: 20px;
    background: #ffc400;
    color: #111;
    font-size: 18px;
    font-weight: 950;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 28px;
    box-shadow: 0 12px 26px rgba(255, 196, 0, .28);
}

.worker-add-vacation-btn span {
    font-size: 30px;
}

@media (max-width: 900px) {
    .worker-vacation-summary,
    .worker-vacation-dates {
        grid-template-columns: 1fr;
    }

    .worker-vacation-card {
        flex-direction: column;
    }
}

.worker-vacations-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.worker-vacation-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ead7aa;
}

.worker-vacation-row-main {
    display: grid;
    grid-template-columns: 120px 190px 1fr;
    gap: 14px;
    align-items: center;
    width: 100%;
}

.worker-vacation-row-main strong {
    font-weight: 950;
    color: #111;
}

.worker-vacation-row-main span {
    font-weight: 900;
    color: #8a6a1f;
}

.worker-vacation-row-main em {
    font-style: normal;
    font-weight: 800;
    color: #555;
}

.worker-remove-vacation {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #ef4444;
    background: #fff1f1;
    color: #dc2626;
    cursor: pointer;
}

.worker-vacation-inline-form {
    display: grid;
    grid-template-columns: 170px 170px 1fr 150px;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border-radius: 20px;
    background: #fff8e8;
    border: 1px solid #ead7aa;
}

.worker-vacation-inline-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.worker-vacation-inline-form small {
    font-weight: 950;
    color: #8a6a1f;
    text-transform: uppercase;
}

.worker-vacation-inline-form input {
    height: 46px;
    border-radius: 14px;
    border: 1px solid #ead7aa;
    background: #fff;
    padding: 0 12px;
    font-weight: 800;
}

.worker-vacation-inline-form button {
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #ffc400;
    color: #111;
    font-weight: 950;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.worker-vacation-row-card{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:22px;
    border-radius:26px;

    background:#fff;
    border:1px solid #ead8a2;

    margin-bottom:14px;
}

.worker-vacation-row-left{
    display:flex;
    align-items:center;
    gap:22px;

    flex:1;
}

.worker-vacation-icon{
    width:72px;
    height:72px;
    border-radius:50%;

    background:#f8efd8;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#b8860b;
}

.worker-vacation-icon .material-symbols-outlined{
    font-size:36px;
}

.worker-vacation-main-info strong{
    display:block;

    font-size:20px;
    font-weight:800;

    margin-bottom:12px;
}

.worker-vacation-dates-inline{
    display:flex;
    align-items:center;
    gap:24px;
}

.worker-vacation-date-block,
.worker-vacation-reason-inline{
    display:flex;
    flex-direction:column;
}

.worker-vacation-date-block small,
.worker-vacation-reason-inline small{
    font-size:12px;
    font-weight:800;
    color:#6b7280;

    margin-bottom:4px;
}

.worker-vacation-date-block span,
.worker-vacation-reason-inline span{
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.worker-vacation-separator{
    width:1px;
    height:58px;
    background:#f1e4ba;
}

.worker-remove-vacation{
    width:64px;
    height:64px;

    border-radius:20px;

    border:2px solid #ff4d4f;
    background:#fff;

    color:#ff4d4f;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.2s;
}

.worker-remove-vacation:hover{
    background:#fff1f1;
}

.worker-remove-vacation .material-symbols-outlined{
    font-size:30px;
}

/* =========================================
   OVERLAP CHIPS
========================================= */

.service-overlap-head {
    margin-bottom: 14px;
}

.service-overlap-head label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #1f1f1f;
    margin-bottom: 4px;
}

.service-overlap-head small {
    color: #8b8b8b;
    font-size: 13px;
}

.service-overlap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.service-overlap-chip {
    border: 1px solid #e4d2a3;
    background: #f8f5ee;
    border-radius: 16px;

    min-width: 180px;

    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;

    transition: all .2s ease;
}

.service-overlap-chip:hover {
    transform: translateY(-1px);
    border-color: #c89b2d;
}

.service-overlap-chip.active {
    background: #fff8df;
    border-color: #ffc400;
    box-shadow: 0 4px 14px rgba(255,196,0,.14);
}

.service-overlap-chip div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-overlap-chip strong {
    font-size: 14px;
    font-weight: 800;
    color: #1f1f1f;
}

.service-overlap-chip span:not(.material-symbols-outlined) {
    font-size: 12px;
    font-weight: 700;
    color: #9c7a18;
}

.service-overlap-chip .material-symbols-outlined {
    font-size: 22px;
    color: #b5b5b5;
    transition: .2s;
}

.service-overlap-chip.active .material-symbols-outlined {
    color: #ffc400;
}
.service-overlap-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.service-overlap-chip {
    border: none;
    background: #ebe7dc;
    border-radius: 999px;
    min-height: 54px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;
    transition: all .2s ease;

    font-weight: 700;
    color: #2b2b2b;
}

.service-overlap-chip:hover {
    transform: translateY(-1px);
}

.service-overlap-chip.active {
    background: #ffc400;
    color: #111;
    box-shadow: 0 6px 18px rgba(255,196,0,.25);
}

.service-overlap-chip div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-overlap-chip strong {
    font-size: 15px;
    line-height: 1.1;
}

.service-overlap-chip span {
    font-size: 12px;
    opacity: .7;
}

.service-overlap-chip .material-symbols-outlined {
    font-size: 22px;
    margin-left: 10px;
}
@media (max-width: 768px) {

    .service-overlap-chips {
        grid-template-columns: 1fr;
    }

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

.service-item {
    position: relative;
    min-height: 190px;
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(255, 196, 0, .18);
    box-shadow: 0 18px 40px rgba(0,0,0,.045);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-main h4 {
    font-size: 22px;
    line-height: 1.05;
    margin: 0;
}

.service-main p {
    font-size: 14px;
    color: #a88a4a;
    line-height: 1.35;
    margin: 8px 0 0;
}

.service-item > strong {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 24px;
    color: #7a5a00;
}

.service-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #927037;
}

.service-edit-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #ffc400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-overlap-badge {
    position: absolute;
    left: 22px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}
.service-overlap-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.service-overlap-chip {
    min-height: 62px;
    border: 1px solid #e5dcc8;
    background: #ebe7dc;
    border-radius: 18px;
    padding: 10px 12px;

    display: grid;
    grid-template-columns: 1fr 24px;
    align-items: center;
    gap: 8px;

    cursor: pointer;
    transition: all .2s ease;
    text-align: left;
    overflow: hidden;
}

.service-overlap-chip:hover {
    transform: translateY(-1px);
    border-color: #ffc400;
}

.service-overlap-chip.active {
    background: #ffc400;
    border-color: #ffc400;
    box-shadow: 0 8px 20px rgba(255, 196, 0, .22);
}

.service-overlap-chip div {
    min-width: 0;
}

.service-overlap-chip strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    white-space: normal;
}

.service-overlap-chip div > span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #9b7a22;
}

.service-overlap-chip .material-symbols-outlined {
    font-size: 22px;
    color: #9b927d;
    justify-self: end;
}

.service-overlap-chip.active .material-symbols-outlined {
    color: #111;
}
.service-item {
    position: relative;
    min-height: 190px;
    padding: 24px 22px 72px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(255, 196, 0, .22);
    box-shadow: 0 18px 40px rgba(0,0,0,.045);
}

.service-main {
    padding-right: 72px;
}

.service-main h4 {
    font-size: 22px;
    line-height: 1.05;
    margin: 0 0 8px;
    max-width: 100%;
    word-break: normal;
}

.service-item > strong {
    position: absolute;
    top: 24px;
    right: 22px;
    min-width: 56px;
    text-align: right;
    font-size: 24px;
    color: #7a5a00;
    z-index: 2;
}
.service-overlap-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
}

.service-overlap-chip {
    min-height: 58px;
    width: 100%;
    border: 1px solid #e5dcc8;
    background: #ebe7dc;
    border-radius: 18px;
    padding: 10px 14px;

    display: grid;
    grid-template-columns: 1fr 26px;
    align-items: center;
    gap: 12px;

    text-align: left;
    cursor: pointer;
    transition: all .2s ease;
}

.service-overlap-chip.active {
    background: #ffc400;
    border-color: #ffc400;
    box-shadow: 0 8px 20px rgba(255,196,0,.20);
}

.service-overlap-chip div {
    min-width: 0;
}

.service-overlap-chip strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
    color: #111;
}

.service-overlap-chip div > span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 800;
    color: #9b7a22;
}

.service-overlap-chip .material-symbols-outlined {
    justify-self: end;
    font-size: 23px;
    color: #9b927d;
}

.service-overlap-chip.active .material-symbols-outlined {
    color: #111;
}
.service-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.service-card-title h4 {
    margin: 0;
    font-size: 22px;
    line-height: 1.05;
}

.service-card-price {
    font-size: 24px;
    font-weight: 900;
    color: #7a5a00;
    white-space: nowrap;
}

.service-card-badges {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.service-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff3cf;
    color: #8a6a18;
    font-size: 12px;
    font-weight: 900;
}

.service-main p {
    margin-top: 14px;
    color: #a17a30;
    line-height: 1.35;
}
.schedules-section {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
}

.schedules-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.schedule-save-main {
    border: 0;
    background: #111827;
    color: #fff;
    border-radius: 12px;
    padding: 13px 20px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.schedule-main-tabs {
    display: flex;
    gap: 8px;
    margin: 22px 0 28px;
}

.schedule-main-tabs button {
    border: 0;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 900;
    cursor: pointer;
}

.schedule-main-tabs button.active {
    background: #fff4c2;
    color: #8a6400;
    box-shadow: inset 0 -3px 0 #ffc400;
}

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

.schedule-tab-panel.active {
    display: block;
}

.schedule-week-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 18px;
}

.schedule-day-card {
    background: #fff;
    border: 1px solid #eee3c8;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.schedule-day-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.schedule-day-main strong {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: #111;
}

.schedule-day-main p {
    margin: 4px 0 0;
    color: #22a35a;
    font-size: 12px;
    font-weight: 800;
}

.schedule-day-status {
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.schedule-day-status.open {
    background: #22c55e;
    color: #fff;
}

.schedule-day-status.closed {
    background: #e5e7eb;
    color: #6b7280;
}

.schedule-day-hours {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.schedule-day-hours div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.schedule-day-hours label {
    font-size: 11px;
    font-weight: 900;
    color: #6b7280;
}

.schedule-day-hours input {
    width: 115px;
    border: 1px solid #e6d7b8;
    border-radius: 10px;
    padding: 9px;
    font-weight: 800;
    background: #fffaf0;
}

.schedule-split-layout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
}

.schedule-list-card,
.schedule-form-card {
    background: #fff;
    border: 1px solid #eee3c8;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.schedule-list-card h3,
.schedule-form-card h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 900;
}

.schedule-list-card p {
    margin: 0 0 18px;
    color: #8a7350;
    font-weight: 700;
}

.schedule-special-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee3c8;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 12px;
    background: #fffaf0;
}

.schedule-special-row strong {
    display: block;
    font-weight: 900;
}

.schedule-special-row span {
    display: block;
    margin-top: 4px;
    color: #8a6400;
    font-weight: 900;
}

.schedule-special-row p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.schedule-delete-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #ef4444;
    background: #fff1f2;
    color: #dc2626;
    cursor: pointer;
}

.schedule-empty-state {
    border: 1px dashed #e8d8ad;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: #8a7350;
    background: #fffaf0;
}

.schedule-empty-state span {
    font-size: 36px;
    color: #b88600;
}

.schedule-empty-state strong {
    display: block;
    margin-top: 8px;
    color: #111;
    font-weight: 900;
}

.schedule-form-card .form-group {
    margin-bottom: 14px;
}

.schedule-form-card label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #8a7350;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.schedule-form-card input {
    width: 100%;
    border: 1px solid #e6d7b8;
    background: #fff4df;
    border-radius: 12px;
    padding: 13px;
    font-weight: 800;
}

.schedule-status-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}

.schedule-status-options button {
    border: 1px solid #e6d7b8;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 12px;
    font-weight: 900;
    cursor: pointer;
}

.schedule-status-options button.active {
    background: #ffc400;
    color: #111;
    border-color: #ffc400;
}

.schedule-hours-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1200px) {
    .schedule-week-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .schedule-week-grid,
    .schedule-split-layout {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   OFFERS / PROMOCIONES
===================================================== */

.offers-section {
    background: #0b0f17;
    border-radius: 26px;
    padding: 30px;
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.offers-header h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 950;
}

.offers-header p {
    color: rgba(255,255,255,.68);
    margin-top: 8px;
}

.offers-layout {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 26px;
    margin-top: 26px;
}

.offers-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 18px;
    align-content: start;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 22px;
}

.offer-item {
    min-height: 230px;
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 38px rgba(0,0,0,.20);
    position: relative;
    cursor: pointer;
    transition: .2s ease;
}

.offer-item:hover,
.offer-item.active {
    border-color: #ffc400;
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(255,196,0,.12);
}

.add-offer-card {
    border: 1px dashed rgba(255,196,0,.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    text-align: center;
    background: radial-gradient(circle at top, rgba(255,196,0,.12), rgba(255,255,255,.025));
}

.offer-add-icon {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    border: 1px solid #ffc400;
    color: #ffc400;
    display: grid;
    place-items: center;
}

.offer-add-icon span {
    font-size: 34px;
}

.offer-item h4 {
    color: #fff;
    font-size: 21px;
    font-weight: 950;
    margin: 0;
    line-height: 1.1;
}

.offer-item p {
    color: rgba(255,255,255,.62);
    font-weight: 700;
    line-height: 1.45;
    margin: 12px 0;
}

.offer-title-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.offer-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 950;
    color: #ffc400;
    border: 1px solid rgba(255,196,0,.85);
    background: rgba(255,196,0,.10);
    padding: 6px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.offer-badge.inactive {
    color: #9ca3af;
    border-color: rgba(156,163,175,.4);
    background: rgba(156,163,175,.12);
}

.offer-meta {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 14px;
    color: rgba(255,255,255,.72);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-edit-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.offer-edit-btn:hover {
    background: #ffc400;
    color: #111;
}

.offer-detail-card {
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    overflow: hidden;
}

.offer-detail-header {
    padding: 26px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.offer-detail-header h3 {
    font-size: 26px;
    font-weight: 950;
    margin: 0;
    color: #fff;
}

.offer-detail-header p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.60);
    font-weight: 700;
}

#offerEditorStatus {
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(255,196,0,.12);
    border: 1px solid rgba(255,196,0,.25);
    color: #ffc400;
    font-size: 12px;
    font-weight: 950;
}

.offer-form {
    padding: 26px;
}

.offer-form .form-group label {
    color: rgba(255,255,255,.86);
    font-weight: 950;
}

.offer-form input,
.offer-form textarea {
    width: 100%;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    font-weight: 800;
    outline: none;
}

.offer-form input:focus,
.offer-form textarea:focus {
    border-color: #ffc400;
    box-shadow: 0 0 0 3px rgba(255,196,0,.12);
}

.offer-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.offer-type-selector button {
    min-height: 78px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.72);
    font-weight: 950;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.offer-type-selector button span {
    font-size: 26px;
}

.offer-type-selector button.active {
    border-color: #ffc400;
    color: #ffc400;
    background: rgba(255,196,0,.10);
}

.offer-discount-grid,
.offer-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.offer-active-row {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offer-active-row strong {
    color: #fff;
    font-weight: 950;
}

.offer-active-row p {
    color: rgba(255,255,255,.58);
    margin: 4px 0 0;
    font-weight: 700;
}

.offer-detail-footer {
    padding: 22px 26px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.offer-delete-btn,
.offer-save-btn {
    min-height: 50px;
    border-radius: 14px;
    padding: 0 20px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.offer-delete-btn {
    background: rgba(239,68,68,.10);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.55);
}

.offer-save-btn {
    background: #ffc400;
    color: #111;
    border: 1px solid #ffc400;
}

.offer-detail-footer .worker-cancel-btn {
    min-height: 50px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    padding: 0 18px;
    font-weight: 950;
    margin-right: 10px;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 1200px) {
    .offers-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .offers-list {
        grid-template-columns: 1fr;
    }

    .offer-type-selector,
    .offer-discount-grid,
    .offer-dates-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================

   CLIENTES · DARK PREMIUM YOCUTZ

===================================================== */
.clients-search-panel {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.clients-search-box {
    height: 58px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
}

.clients-search-box span {
    color: rgba(255,196,0,0.9);
}

.clients-search-box input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
    outline: none;
}

.clients-search-box input::placeholder {
    color: rgba(255,255,255,0.35);
}

.client-letters button.disabled,
.client-letters button:disabled {
    opacity: .22;
    cursor: not-allowed;
    pointer-events: none;
}

.clients-results-head {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clients-results-head strong {
    color: #FFC400;
    font-size: 24px;
    font-weight: 950;
    margin-right: 8px;
}

.clients-results-head span,
.clients-results-head small {
    color: rgba(255,255,255,0.58);
    font-weight: 800;
}

.clients-pagination {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.clients-pagination button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.clients-pagination button:hover:not(:disabled) {
    border-color: rgba(255,196,0,0.45);
    color: #FFC400;
}

.clients-pagination button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.clients-pagination span {
    color: rgba(255,255,255,0.68);
    font-weight: 900;
}

@media (max-width: 1100px) {
    .clients-search-panel {
        grid-template-columns: 1fr;
    }
}

.clients-search-panel {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 26px;
}

.client-letters {
    overflow: visible !important;
    min-width: 0;
}

#clientLetters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center;
    max-height: none !important;
}

#clientLetters button {
    flex: 0 0 auto;
}

.clients-search-box {
    min-height: 74px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,196,0,0.24);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}

.clients-search-box span {
    color: #FFC400;
    font-size: 26px;
}

.clients-search-box input {
    width: 100%;
    height: 48px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    outline: none;
}

.clients-search-box input::placeholder {
    color: rgba(255,255,255,0.45);
    font-weight: 700;
}

.clients-results-head {
    margin-bottom: 18px;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clients-results-head div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.clients-results-head strong {
    color: #FFC400;
    font-size: 24px;
    font-weight: 950;
}

.clients-results-head span,
.clients-results-head small {
    color: rgba(255,255,255,0.62);
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .clients-search-panel {
        grid-template-columns: 1fr;
    }
}

.clients-topbar-readonly {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    align-items: center;
    margin: 18px 0 22px;
}

.clients-readonly-text {
    color: rgba(255,255,255,0.58);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.clients-search-box {
    height: 56px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,196,0,0.22);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
}

.clients-search-box span {
    color: #FFC400;
    font-size: 24px;
}

.clients-search-box input {
    flex: 1;
    height: 44px;
    border: 0;
    background: transparent;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.clients-search-box input::placeholder {
    color: rgba(255,255,255,0.42);
}

#clientLetters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center;
    overflow: visible !important;
    white-space: nowrap;
}

.client-letters {
    overflow: visible !important;
    padding: 16px !important;
}

#clientLetters button {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
}

#clientLetters button span {
    position: relative;
    z-index: 2;
}

#clientLetters button sup {
    position: absolute;
    top: -9px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255,196,0,0.18);
    border: 1px solid rgba(255,196,0,0.35);
    color: #FFC400;
    font-size: 10px;
    font-weight: 950;
    display: flex;
    align-items: center;
    justify-content: center;
}

#clientLetters button.active sup {
    background: #111;
    color: #FFC400;
    border-color: rgba(0,0,0,0.3);
}

#clientLetters button.disabled sup,
#clientLetters button:disabled sup {
    opacity: .35;
}

.client-letters button.disabled,
.client-letters button:disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

.clients-results-head {
    display: none !important;
}

@media (max-width: 1100px) {
    .clients-topbar-readonly {
        grid-template-columns: 1fr;
    }

    #clientLetters {
        overflow-x: auto !important;
        padding-bottom: 6px;
    }
}

.clients-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.clients-total-btn {
    height: 54px;
    padding: 0 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,196,0,0.32);
    background: rgba(255,196,0,0.08);
    color: #FFC400;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 900;
}

.clients-total-btn .material-symbols-outlined {
    font-size: 22px;
}

.clients-inline-search {
    height: 54px;
    min-width: 320px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,196,0,0.22);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
}

.clients-inline-search .material-symbols-outlined {
    color: #FFC400;
    font-size: 22px;
}

.clients-inline-search input {
    flex: 1;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.clients-inline-search input::placeholder {
    color: rgba(255,255,255,0.42);
}
/* =====================================================
   FIX CLIENTES TOOLBAR + LETRAS
===================================================== */

.clients-topbar {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
}

.clients-inline-search {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    flex: 0 0 360px !important;
}

.client-letters {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#clientLetters {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(28, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: visible !important;
}

#clientLetters button {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    flex: unset !important;
}

#clientLetters button span {
    font-size: 12px !important;
}

#clientLetters button sup {
    top: -7px !important;
    right: -3px !important;
}

.clients-inline-search input::placeholder {
    color: rgba(255,255,255,0.48) !important;
    opacity: 1 !important;
    font-weight: 700;
}

.clients-inline-search input {
    color: #fff !important;
}


/* =====================================================
   CLIENTS SKELETON LOADER
===================================================== */

.clients-loading {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.client-skeleton-card {
    border-radius: 28px;
    border: 1px solid rgba(255,196,0,0.10);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.02)
        );
    padding: 24px;
}

.client-skeleton-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.skeleton-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}

.client-skeleton-texts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.w-220 { width: 220px; }
.w-160 { width: 160px; }

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

.skeleton-box {
    height: 92px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.08),
        transparent
    );
    animation: shimmerMove 1.5s infinite;
}

@keyframes shimmerMove {
    100% {
        left: 140%;
    }
}

/* =====================================================
   FIX BUSCADOR CLIENTES
===================================================== */

.clients-inline-search {
    background: rgba(255, 196, 0, 0.08); !important;
    border: 1px solid rgba(255, 196, 0, 0.42) !important;
    
}

.clients-inline-search:focus-within {
    border-color: #FFC400 !important;
    box-shadow:
        0 0 0 3px rgba(255,196,0,0.18),
        0 14px 32px rgba(0,0,0,0.28) !important;
}

.clients-inline-search input,
.clients-inline-search input:focus,
.clients-inline-search input:active {
    background: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #ffc400 !important;
    caret-color: #FFC400 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.clients-inline-search input::placeholder {
    color: rffc400 !important;
    -webkit-text-fill-color: rffc400 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.clients-inline-search input::selection {
    background: rgba(255,196,0,0.35) !important;
    color: #ffc400 !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.clients-inline-search input::placeholder {
    transition: opacity .18s ease;
}

.clients-inline-search input:focus::placeholder {
    opacity: 0 !important;
}
/* =====================================================
   RESERVAS · FESTIVOS + FIX ALTURA CALENDARIO
===================================================== */

.reservation-closures-panel {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.closure-chip {
    border-radius: 16px;
    padding: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.18);
}

.closure-chip span {
    display: block;
    color: #ef4444;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.closure-chip strong {
    display: block;
    color: #2b2113;
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 4px;
}

.closure-chip small {
    color: rgba(43, 33, 19, 0.62);
    font-size: 12px;
    font-weight: 800;
}

/* Calendario compacto y uniforme */
#calendarGrid {
    display: grid !important;
    grid-template-columns: 72px repeat(7, minmax(120px, 1fr)) !important;
    grid-auto-rows: 54px !important;
    align-items: stretch !important;
}

#calendarGrid .calendar-day,
#calendarGrid .calendar-time-spacer {
    min-height: 72px !important;
}

#calendarGrid .calendar-hour,
#calendarGrid .calendar-cell {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
}

#calendarGrid .closed-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.20) !important;
}

/* Quitar el Cerrado negro y dejar solo el rojo */
#calendarGrid .closed-cell {
    font-size: 0 !important;
}

#calendarGrid .closed-cell span {
    font-size: 11px !important;
    color: #ef4444 !important;
    font-weight: 950 !important;
}

/* Reservas más compactas */
#calendarGrid .occupied-cell {
    padding: 4px !important;
    overflow: hidden !important;
}

#calendarGrid .booking-dynamic {
    height: auto;
}

#calendarGrid .booking-dynamic strong {

    font-size: 12px;

    line-height: 1.1;

    margin-bottom: 3px;

}

#calendarGrid .booking-dynamic p {
    font-size: 10px !important;
    line-height: 1.15;
}

#calendarGrid .booking-dynamic small {
    font-size: 10px !important;
}

@media (max-width: 1200px) {
    .reservation-closures-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================
   YOCUTZ · RESERVAS CALENDARIO PREMIUM
===================================================== */

.reservations-calendar {
    overflow: hidden !important;
    border-radius: 26px !important;
    background: #fff !important;
}

#calendarGrid {
    display: grid !important;
    grid-template-columns: 72px repeat(7, minmax(130px, 1fr)) !important;
    grid-auto-rows: 52px !important;
    gap: 0 !important;
    border: 1px solid rgba(151, 120, 65, .16);
    border-radius: 22px;
    overflow: hidden;
}

#calendarGrid .calendar-time-spacer,
#calendarGrid .calendar-day {
    height: 78px !important;
    background: #fffaf0 !important;
    border-bottom: 1px solid rgba(151, 120, 65, .16);
}

#calendarGrid .calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8a6f3d;
}

#calendarGrid .calendar-day span {
    font-size: 11px;
    font-weight: 950;
    color: #b29a70;
}

#calendarGrid .calendar-day strong {
    font-size: 20px;
    font-weight: 950;
    color: #7c5f22;
}

#calendarGrid .calendar-day.active {
    background: linear-gradient(180deg, #fff4d2, #fffaf0) !important;
}

#calendarGrid .calendar-hour {
    height: 52px !important;
    background: #fff !important;
    border-right: 1px solid rgba(151, 120, 65, .14);
    border-bottom: 1px solid rgba(151, 120, 65, .10);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 12px 12px 0 0;
    color: #b09662;
    font-size: 12px;
    font-weight: 950;
}

#calendarGrid .calendar-cell {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border: 0 !important;
    border-right: 1px solid rgba(151, 120, 65, .10) !important;
    border-bottom: 1px solid rgba(151, 120, 65, .10) !important;
    background: #fff !important;
    box-sizing: border-box;
}

#calendarGrid .free-cell {
    cursor: pointer;
    transition: .18s ease;
}

#calendarGrid .free-cell:hover {
    background: rgba(255, 196, 0, .08) !important;
}

#calendarGrid .free-cell .free-dot {
    display: none;
}

#calendarGrid .closed-cell {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(239,68,68,.055),
            rgba(239,68,68,.055) 8px,
            rgba(239,68,68,.085) 8px,
            rgba(239,68,68,.085) 16px
        ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

#calendarGrid .closed-cell span {
    font-size: 11px !important;
    color: #ef4444 !important;
    font-weight: 950 !important;
}

#calendarGrid .occupied-cell {
    padding: 7px !important;
    overflow: hidden !important;
    background: #fff !important;
}

#calendarGrid .booking-dynamic {
    width: 100%;
    border-radius: 12px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-left: 4px solid var(--worker-color, #FFC400);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    cursor: pointer;
    transition: .18s ease;
}

#calendarGrid .booking-dynamic:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

#calendarGrid .booking-dynamic strong {
    display: block;
    color: #171717;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

#calendarGrid .booking-dynamic p {
    margin: 5px 0 0;
    color: #81693c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#calendarGrid .booking-dynamic small {
    display: inline-block;
    margin-top: 5px;
    color: #111;
    font-size: 10px;
    font-weight: 950;
}

.booking-stack-card {
    background: #111827 !important;
    border-color: rgba(255,196,0,.28) !important;
    border-left-color: #FFC400 !important;
}

.booking-stack-card strong,
.booking-stack-card p,
.booking-stack-card small {
    color: #fff !important;
}

/* =====================================================
   SWEETALERT · MODAL RESERVA YOCUTZ
===================================================== */

.yocutz-booking-popup {
    width: 560px !important;
    border-radius: 26px !important;
    padding: 0 !important;
    background: #0B1220 !important;
    color: #fff !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,196,0,.22) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.45) !important;
}

.yocutz-booking-popup .swal2-title {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    padding: 26px 28px 0 !important;
    text-align: left !important;
}

.yocutz-booking-popup .swal2-html-container {
    margin: 0 !important;
    padding: 20px 28px 0 !important;
    text-align: left !important;
}

.booking-detail-modal {
    display: grid;
    gap: 16px;
}

.booking-detail-summary {
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,196,0,.10);
    border: 1px solid rgba(255,196,0,.25);
}

.booking-detail-summary span {
    display: block;
    color: #FFC400;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.booking-detail-summary strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
}

.booking-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.booking-field label {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 900;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 14px;
    padding: 13px 14px;
    font-weight: 800;
    outline: none;
}

.booking-field textarea {
    min-height: 86px;
    resize: vertical;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
    border-color: #FFC400;
    box-shadow: 0 0 0 3px rgba(255,196,0,.13);
}

.yocutz-booking-popup .swal2-actions {
    padding: 22px 28px 26px !important;
    margin: 0 !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.yocutz-booking-popup .swal2-confirm,
.yocutz-booking-popup .swal2-deny,
.yocutz-booking-popup .swal2-cancel {
    border-radius: 14px !important;
    padding: 13px 18px !important;
    font-weight: 950 !important;
}

/* =====================================================
   YOCUTZ · CALENDARIO RESERVAS FINAL
===================================================== */

.reservations-calendar {
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
}

#calendarGrid {
    display: grid !important;
    grid-template-columns: 72px repeat(7, minmax(125px, 1fr)) !important;
    grid-auto-rows: 62px !important;
    gap: 0 !important;
    align-items: stretch !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(151,120,65,.14) !important;
}

#calendarGrid > * {
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Cabecera */
#calendarGrid .calendar-time-spacer,
#calendarGrid .calendar-day {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    background: #fffaf0 !important;
    border-bottom: 1px solid rgba(151,120,65,.14) !important;
}

#calendarGrid .calendar-time-spacer {
    border-top-left-radius: 24px !important;
}

#calendarGrid .calendar-day {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid rgba(151,120,65,.10) !important;
}

#calendarGrid .calendar-day span {
    font-size: 11px !important;
    font-weight: 950 !important;
    color: #b29a70 !important;
}

#calendarGrid .calendar-day strong {
    font-size: 20px !important;
    font-weight: 950 !important;
    color: #7c5f22 !important;
}

#calendarGrid .calendar-day.active {
    background: linear-gradient(180deg, #fff4d2, #fffaf0) !important;
}

/* Horas y celdas */
#calendarGrid .calendar-hour,
#calendarGrid .calendar-cell {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#calendarGrid .calendar-hour {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 13px 12px 0 0 !important;
    background: #fff !important;
    border-right: 1px solid rgba(151,120,65,.12) !important;
    border-bottom: 1px solid rgba(151,120,65,.10) !important;
    color: #b09662 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

#calendarGrid .calendar-cell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
    border-right: 1px solid rgba(151,120,65,.10) !important;
    border-bottom: 1px solid rgba(151,120,65,.10) !important;
}

/* Cerrado */
#calendarGrid .closed-cell {
    font-size: 0 !important;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(239,68,68,.045),
            rgba(239,68,68,.045) 8px,
            rgba(239,68,68,.075) 8px,
            rgba(239,68,68,.075) 16px
        ) !important;
}

#calendarGrid .closed-cell span {
    font-size: 10px !important;
    color: #ef4444 !important;
    font-weight: 950 !important;
}

/* Huecos libres */
#calendarGrid .free-cell {
    cursor: pointer !important;
    transition: .18s ease !important;
}

#calendarGrid .free-cell:hover {
    background: rgba(255,196,0,.08) !important;
}

#calendarGrid .free-cell .free-dot {
    display: none !important;
}

/* Citas */
#calendarGrid .occupied-cell {
    padding: 6px !important;
}

#calendarGrid .booking-dynamic {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 100% !important;
    border-radius: 14px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: #fff !important;
    border: 1px solid rgba(151,120,65,.14) !important;
    border-left: 5px solid var(--worker-color, #FFC400) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.07) !important;
    transition: .18s ease !important;
}

#calendarGrid .booking-dynamic:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
}

#calendarGrid .booking-dynamic strong,
#calendarGrid .booking-dynamic p,
#calendarGrid .booking-dynamic small {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#calendarGrid .booking-dynamic strong {
    color: #171717 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
}

#calendarGrid .booking-dynamic p {
    margin: 3px 0 0 !important;
    color: #81693c !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

#calendarGrid .booking-dynamic small {
    margin-top: 3px !important;
    color: #111 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

/* Citas agrupadas */
#calendarGrid .booking-stack-card {
    background: #0B1220 !important;
    border-left-color: #FFC400 !important;
}

#calendarGrid .booking-stack-card strong,
#calendarGrid .booking-stack-card p,
#calendarGrid .booking-stack-card small {
    color: #fff !important;
}

/* Festivos / cierres */
.reservation-closures-panel {
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.closure-chip {
    min-height: auto !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(239,68,68,.08) !important;
    border: 1px solid rgba(239,68,68,.18) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.closure-chip span {
    color: #ef4444 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.closure-chip strong {
    color: #2b2113 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.closure-chip small {
    color: rgba(43,33,19,.62) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* =====================================================
   MULTI RESERVAS EN MISMA CELDA
===================================================== */

#calendarGrid .occupied-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 2px !important;

    width: 100% !important;
    height: 100% !important;

    padding: 2px !important;
    overflow: hidden !important;
}

/* Cada reserva ocupa una columna */
#calendarGrid .occupied-cell .booking-dynamic {
    flex: 1 1 0 !important;

    width: 50% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;

    border-radius: 10px !important;

    padding: 6px 7px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    overflow: hidden !important;
}

/* Texto más compacto */
#calendarGrid .occupied-cell .booking-dynamic strong {
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
}

#calendarGrid .occupied-cell .booking-dynamic p {
    font-size: 9px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    opacity: .75 !important;
}

#calendarGrid .occupied-cell .booking-dynamic small {
    font-size: 9px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

/* Si hay solo UNA reserva, ocupa todo */
#calendarGrid .occupied-cell:has(.booking-dynamic:only-child)
.booking-dynamic {
    width: 100% !important;
}

/* =====================================================
   FIX RESERVAS OCUPANDO TODA LA CELDA
===================================================== */

#calendarGrid .occupied-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 2px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#calendarGrid .occupied-cell .booking-dynamic {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding: 8px 9px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Si hay 2 citas, cada una ocupa media celda */
#calendarGrid .occupied-cell .booking-dynamic:not(:only-child) {
    width: 50% !important;
}

/* Bordes suaves solo dentro de la celda */
#calendarGrid .occupied-cell .booking-dynamic:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

#calendarGrid .occupied-cell .booking-dynamic:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* =====================================================
   RESERVAS · LÍNEA DE TIEMPO ACTUAL AJUSTADA
===================================================== */

#calendarGrid {
    position: relative !important;
}

.calendar-now-line {
    position: absolute;
    left: 72px;
    right: 0;
    height: 2px;
    background: #00bcd4;
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 188, 212, .35);
}

.calendar-now-line::before {
    content: "";
    position: absolute;
    left: -6px;
    top: -5px;
    width: 12px;
    height: 12px;
    background: #00bcd4;
    border-radius: 999px;
}

.calendar-now-line span {
    position: absolute;
    left: -42px;
    top: -11px;
    background: #00bcd4;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    border-radius: 999px;
    padding: 3px 7px;
    box-shadow: 0 6px 18px rgba(0, 188, 212, .35);
}

#calendarGrid {
    position: relative !important;
}

.calendar-now-line {
    position: absolute;
    left: 72px;
    right: 0;
    height: 2px;
    background: #00bcd4;
    z-index: 60;
    pointer-events: none;
}

.calendar-now-line span {
    position: absolute;
    left: -42px;
    top: -11px;
    background: #00bcd4;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    border-radius: 999px;
    padding: 3px 7px;
}

#calendarGrid {
    position: relative !important;
}

.calendar-now-line {
    position: absolute;
    left: 72px;
    right: 0;
    height: 2px;
    background: #00bcd4;
    z-index: 80;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 188, 212, .35);
}

.calendar-now-line::before {
    content: "";
    position: absolute;
    left: -6px;
    top: -5px;
    width: 12px;
    height: 12px;
    background: #00bcd4;
    border-radius: 999px;
}

.calendar-now-line span {
    position: absolute;
    left: -44px;
    top: -11px;
    background: #00bcd4;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    border-radius: 999px;
    padding: 3px 7px;
}

/* Selector trabajadores con color asociado */
.reservation-worker-filters .worker-filter-chip {
    border: 1px solid color-mix(in srgb, var(--worker-color) 35%, transparent) !important;
    background: color-mix(in srgb, var(--worker-color) 12%, #fff) !important;
    color: #4a3715 !important;
}

.worker-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--worker-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--worker-color) 16%, transparent);
}

.reservation-worker-filters .worker-filter-chip.active {
    background: var(--worker-color) !important;
    border-color: var(--worker-color) !important;
    color: #fff !important;
}

.reservation-worker-filters .worker-filter-chip.active .worker-filter-avatar {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
}

.reservation-worker-filters .worker-filter-chip.active .worker-color-dot {
    background: #fff !important;
}
.reservations-calendar {
    max-height: 72vh;
    overflow: auto !important;
    position: relative;
}

#calendarGrid .calendar-time-spacer,
#calendarGrid .calendar-day {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

#calendarGrid .calendar-time-spacer {
    left: 0;
    z-index: 45 !important;
}

#calendarGrid .calendar-hour {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
}

.reservations-calendar {
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}

#calendarGrid .calendar-time-spacer,
#calendarGrid .calendar-day {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
}

#calendarGrid .calendar-time-spacer {
    left: 0 !important;
    z-index: 100 !important;
}

#calendarGrid .calendar-hour {
    position: sticky !important;
    left: 0 !important;
    z-index: 70 !important;
    background: #fff !important;
}

.calendar-now-line {
    z-index: 80 !important;
}

.reservations-calendar {
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}

#calendarGrid .calendar-time-spacer,
#calendarGrid .calendar-day {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
}

#calendarGrid .calendar-time-spacer {
    left: 0 !important;
    z-index: 100 !important;
}

#calendarGrid .calendar-hour {
    position: sticky !important;
    left: 0 !important;
    z-index: 70 !important;
    background: #fff !important;
}

.calendar-now-line {
    z-index: 80 !important;
}
.reservations-calendar {
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}

.calendar-days-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: 72px repeat(7, minmax(120px, 1fr)) !important;
    height: 72px !important;
    background: #fffaf0 !important;
    border-bottom: 1px solid rgba(151,120,65,.14) !important;
}

.calendar-days-sticky .calendar-time-spacer,
.calendar-days-sticky .calendar-day {
    height: 72px !important;
    background: #fffaf0 !important;
}

.calendar-days-sticky .calendar-day {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid rgba(151,120,65,.10) !important;
}

.calendar-days-sticky .calendar-day span {
    font-size: 11px !important;
    font-weight: 950 !important;
    color: #b29a70 !important;
}

.calendar-days-sticky .calendar-day strong {
    font-size: 20px !important;
    font-weight: 950 !important;
    color: #7c5f22 !important;
}

.calendar-month-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7c5f22 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}
.calendar-days-sticky .calendar-day.active {
    background: linear-gradient(180deg, #fff4d2, #fffaf0) !important;
}

/* Ahora el grid ya no tiene cabecera dentro */
#calendarGrid {
    grid-template-columns: 72px repeat(7, minmax(120px, 1fr)) !important;
}
.calendar-days-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: 72px repeat(7, minmax(120px, 1fr)) !important;
    height: 72px !important;
    background: #fffaf0 !important;
    border-bottom: 1px solid rgba(151,120,65,.14) !important;
}
.reservations-calendar {
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}
/* =====================================================
   RESERVAS · CABECERA MES DIAGONAL
===================================================== */

.calendar-month-cell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7c5f22 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    overflow: hidden !important;
}

.month-split-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent calc(50% - 1px),
        rgba(151,120,65,.18) 50%,
        transparent calc(50% + 1px)
    );
    pointer-events: none;
}

.month-split-cell .month-top {
    position: absolute;
    top: 13px;
    left: 14px;
    font-size: 13px;
    font-weight: 950;
    color: #7c5f22;
}

.month-split-cell .month-bottom {
    position: absolute;
    right: 14px;
    bottom: 13px;
    font-size: 13px;
    font-weight: 950;
    color: #7c5f22;
}


.multi-booking-list {
    display: grid;
    gap: 12px;
}

.multi-booking-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
}

.multi-booking-item strong {
    display: block;
    color: #fff;
    font-weight: 950;
    margin-bottom: 4px;
}

.multi-booking-item span {
    display: block;
    color: #FFC400;
    font-weight: 850;
    font-size: 13px;
}

.multi-booking-item small {
    display: block;
    color: rgba(255,255,255,.65);
    margin-top: 4px;
    font-weight: 750;
}

/* ================================
   YOCUTZ BOOKING MODALS
================================ */

.yocutz-booking-popup {
    border-radius: 24px !important;
    padding: 0 !important;
    width: 720px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
}

.yocutz-booking-popup .swal2-title {
    text-align: left !important;
    padding: 28px 32px 10px !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    color: #0B1220 !important;
}

.yocutz-booking-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 32px 24px !important;
    color: #0B1220 !important;
}

.yocutz-booking-popup .swal2-actions {
    padding: 0 32px 30px !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.yocutz-booking-popup .swal2-confirm,
.yocutz-booking-popup .swal2-deny,
.yocutz-booking-popup .swal2-cancel {
    border-radius: 14px !important;
    padding: 13px 20px !important;
    font-weight: 950 !important;
}

.booking-detail-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,196,0,.45);
    background: #fff8df;
    border-radius: 16px;
}

.booking-detail-summary span {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 950;
    color: #9a7415;
}

.booking-detail-summary strong {
    font-size: 20px;
    font-weight: 950;
    color: #111827;
}

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

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.booking-field label {
    font-size: 12px;
    font-weight: 950;
    color: #6b5a35;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(151,120,65,.22);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fffaf0;
    color: #111827;
    font-weight: 850;
    outline: none;
}

.booking-field textarea {
    min-height: 92px;
    resize: vertical;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
    border-color: #FFC400;
    box-shadow: 0 0 0 3px rgba(255,196,0,.18);
}

.booking-create-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 22px;
}

.booking-create-side {
    border: 1px solid rgba(14,165,233,.18);
    background: linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.8));
    border-radius: 18px;
    padding: 18px;
}

.booking-create-side .side-label {
    color: #2563eb;
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 18px;
}

.booking-create-side .side-date {
    display: block;
    font-size: 24px;
    font-weight: 950;
    color: #0B1220;
}

.booking-create-side .side-time {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 850;
    color: #0B1220;
}

.booking-create-side .side-duration {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(14,165,233,.16);
    font-weight: 900;
    color: #2563eb;
}

.quick-booking-popup {
    border-radius: 24px !important;
    width: 520px !important;
    background: #ffffff !important;
    padding: 30px !important;
}

.quick-booking-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(239,68,68,.10);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.quick-booking-title {
    text-align: center;
    font-size: 25px;
    font-weight: 950;
    color: #0B1220;
}

.quick-booking-sub {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 22px;
    color: #374151;
    font-size: 16px;
    font-weight: 700;
}

.quick-booking-actions {
    display: grid;
    gap: 12px;
}

.quick-action-btn {
    width: 100%;
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 15px;
    background: #fff;
    padding: 15px;
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.quick-action-btn:hover {
    background: #fffaf0;
    border-color: rgba(255,196,0,.45);
}

.quick-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,196,0,.15);
}

.quick-action-text strong {
    display: block;
    font-weight: 950;
    color: #111827;
}

.quick-action-text small {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    font-weight: 700;
}

.multi-booking-list {
    display: grid;
    gap: 12px;
}

.multi-booking-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(151,120,65,.18);
    background: #fffaf0;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
}

.multi-booking-item:hover {
    border-color: #FFC400;
    background: #fff5d6;
}

.multi-booking-item strong {
    display: block;
    color: #111827;
    font-weight: 950;
    margin-bottom: 4px;
}

.multi-booking-item span {
    display: block;
    color: #9a7415;
    font-weight: 850;
    font-size: 13px;
}

.multi-booking-item small {
    display: block;
    color: #6b7280;
    margin-top: 4px;
    font-weight: 750;
}

.quick-booking-popup {
    width: 560px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 42px 36px 34px !important;
    border-radius: 26px !important;
    background: #fff !important;
}

.quick-booking-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

.quick-booking-icon {
    background: rgba(255,196,0,.14) !important;
    color: #efb000 !important;
}

.quick-action-edit {
    border-color: rgba(255,196,0,.35) !important;
    background: rgba(255,196,0,.05) !important;
}

.quick-action-edit .quick-action-icon {
    background: rgba(255,196,0,.16) !important;
    color: #efb000 !important;
}

.quick-action-add {
    border-color: rgba(14,165,233,.22) !important;
    background: rgba(14,165,233,.04) !important;
}

.quick-action-add .quick-action-icon {
    background: rgba(14,165,233,.12) !important;
    color: #0ea5e9 !important;
}

.quick-action-cancel .quick-action-icon {
    background: rgba(17,24,39,.08) !important;
    color: #111827 !important;
}

.quick-action-arrow {
    color: #111827;
    font-size: 24px;
}
/* =====================================================
   MODAL PREMIUM DETALLE RESERVA
===================================================== */

.yocutz-booking-detail-popup {
    width: min(1080px, calc(100vw - 32px)) !important;
    max-width: min(1080px, calc(100vw - 32px)) !important;

    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;

    max-height: calc(100vh - 32px) !important;
}
.yocutz-booking-popup-container .swal2-html-container,
.yocutz-booking-detail-popup .swal2-html-container {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}



.yocutz-booking-detail-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

.booking-detail-premium {
    position: relative;

    padding: 28px 28px 0;

    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.booking-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #111827;
    cursor: pointer;
}

.booking-detail-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 950;
    color: #0B1220;
}

.booking-detail-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 26px;
    align-items: start;
}

.booking-detail-sidebar {
    background: linear-gradient(180deg, #fff4cf, #fffaf0);
    border-radius: 18px;
    padding: 18px;

    position: sticky;

    top: 0;
}

.booking-side-date {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(151,120,65,.18);
}

.booking-side-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255,196,0,.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f3b400;
}

.booking-side-icon .material-symbols-outlined {
    font-size: 42px;
}

.booking-side-date span,
.booking-side-status span {
    display: block;
    color: #6b7280;
    font-weight: 850;
    font-size: 13px;
}

.booking-side-date strong {
    display: block;
    font-size: 21px;
    font-weight: 950;
    color: #0B1220;
    margin-top: 4px;
}

.booking-side-status {
    text-align: center;
    padding: 18px 0 20px;
    border-bottom: 1px solid rgba(151,120,65,.18);
}

.status-pill {
    width: fit-content;
    margin: 8px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 16px;
    background: rgba(16,185,129,.12);
    color: #065f46;
    font-weight: 950;
    text-transform: capitalize;
}

.status-pill i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
}

.status-cancelada {
    background: rgba(239,68,68,.12);
    color: #991b1b;
}

.status-cancelada i {
    background: #ef4444;
}

.status-pendiente {
    background: rgba(245,158,11,.14);
    color: #92400e;
}

.status-pendiente i {
    background: #f59e0b;
}

.booking-side-meta {
    display: grid;
    gap: 10px;
    padding: 18px 0;
}
.booking-side-meta > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
}

.booking-side-meta .material-symbols-outlined {
    color: #374151;
    font-size: 22px;
}

.booking-side-meta p {
    margin: 0;
}

.booking-side-meta small,
.booking-side-client small,
.booking-extra-card small {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 850;
}

.booking-side-meta strong,
.booking-side-client strong,
.booking-extra-card strong {
    display: block;
    font-size: 14px;
    color: #111827;
    font-weight: 950;
}

.booking-side-client {
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.14);
    border-radius: 16px;
    padding: 16px;
}

.booking-side-client-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(37,99,235,.12);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.booking-side-client p {
    margin: 0 0 12px;
}

.booking-side-client button {
    width: 100%;
    border: 1px solid rgba(37,99,235,.18);
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    font-weight: 950;
    color: #111827;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.booking-warning-box {
    border: 1px solid rgba(255,196,0,.34);
    background: #fffaf0;
    color: #4b5563;
    border-radius: 14px;
    padding: 15px 18px;
    font-weight: 850;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.booking-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 24px;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-field.full {
    grid-row: span 2;
}

.booking-field label {
    color: #4b5563;
    font-size: 13px;
    font-weight: 950;
}

.booking-input-icon {
    position: relative;
}

.booking-input-icon > .material-symbols-outlined {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    font-size: 23px;
    pointer-events: none;
}

.booking-input-icon select {
    padding-left: 56px !important;
}

.booking-field select,
.booking-field textarea {
    width: 100%;
    border: 1px solid #d7dde7;
    background: #fff;
    border-radius: 12px;
    min-height: 58px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 850;
    color: #111827;
    outline: none;
}

.booking-field textarea {
    min-height: 100px;
    padding: 18px;
    resize: vertical;
}

.booking-field select:focus,
.booking-field textarea:focus {
    border-color: #FFC400;
    box-shadow: 0 0 0 3px rgba(255,196,0,.16);
}

.booking-extra-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin: 28px 0 18px;
}

.booking-extra-title span {
    font-size: 13px;
    font-weight: 950;
    color: #4b5563;
    text-transform: uppercase;
}

.booking-extra-title::after {
    content: "";
    height: 1px;
    background: #e5e7eb;
}

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

.booking-extra-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    background: #fff;
}

.booking-extra-card p {
    margin: 0;
}

.booking-extra-card em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    color: #6b7280;
    font-weight: 750;
}

.booking-change-date-box {
    margin-top: 24px;
    padding: 15px 18px;
    border: 1px solid rgba(37,99,235,.14);
    background: #eff6ff;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 14px;
    align-items: center;
    color: #1e40af;
    font-weight: 850;
}

.booking-change-date-box p {
    margin: 0;
}

.booking-change-date-box button {
    border: 1px solid rgba(37,99,235,.18);
    background: #fff;
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 950;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.booking-detail-actions {
    margin: 26px -28px 0;

    padding: 18px 28px;

    position: sticky;

    bottom: 0;

    background: #fff;

    z-index: 20;
    border-top: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 14px;
    background: #fff;
}

.booking-detail-actions button {
    min-height: 58px;
    border-radius: 13px;
    border: 1px solid #d7dde7;
    font-weight: 950;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.btn-change-date {
    background: #fff;
    color: #111827;
}

.btn-save-booking {
    background: #FFC400;
    border-color: #FFC400 !important;
    color: #111827;
}

.btn-cancel-booking {
    background: #e11d2f;
    border-color: #e11d2f !important;
    color: #fff;
}

@media (max-width: 980px) {

    .booking-detail-layout {
        grid-template-columns: 1fr;
    }

    .booking-detail-sidebar {
        position: relative;
        top: auto;
    }

    .booking-edit-grid {
        grid-template-columns: 1fr;
    }

    .booking-extra-grid {
        grid-template-columns: 1fr;
    }

    .booking-change-date-box {
        grid-template-columns: 1fr;
    }

    .booking-detail-actions {
        grid-template-columns: 1fr;
    }

    .booking-detail-title {
        font-size: 24px;
        padding-right: 40px;
    }
}

.booking-detail-clean {
    position: relative;
    padding: 30px 30px 0;
}

.yocutz-booking-detail-popup {
    width: min(860px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.yocutz-booking-detail-html {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.booking-detail-title {
    margin: 0 44px 24px 0;
    text-align: left;
    font-size: 28px;
    font-weight: 950;
    color: #0B1220;
}

.booking-top-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.booking-top-summary > div {
    border: 1px solid rgba(151,120,65,.18);
    background: #fff8df;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 5px;
}

.booking-top-summary .material-symbols-outlined {
    color: #b98900;
    font-size: 26px;
}

.booking-top-summary small {
    color: #7c6b42;
    font-size: 12px;
    font-weight: 900;
}

.booking-top-summary strong {
    color: #0B1220;
    font-size: 18px;
    font-weight: 950;
}

.booking-warning-box.compact {
    margin-bottom: 20px;
    padding: 13px 16px;
}

.booking-edit-grid.clean {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.booking-edit-grid.clean .booking-field.full {
    grid-column: 1 / -1;
    grid-row: auto;
}

.booking-field textarea {
    min-height: 110px;
}

.booking-extra-grid.clean {
    grid-template-columns: repeat(2, 1fr);
}

.booking-detail-actions.clean {
    margin: 26px -30px 0;
    padding: 18px 30px;
    grid-template-columns: 1fr 1.2fr 1.2fr;
}

@media (max-width: 900px) {
    .booking-top-summary,
    .booking-edit-grid.clean,
    .booking-extra-grid.clean,
    .booking-detail-actions.clean {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   MODAL PREMIUM NUEVA RESERVA
===================================================== */

.yocutz-booking-create-popup {
    width: min(980px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.yocutz-booking-create-html {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.booking-create-premium {
    position: relative;
    padding: 34px;
    color: #0B1220;
}

.booking-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0B1220;
    cursor: pointer;
}

.booking-modal-close .material-symbols-outlined {
    font-size: 26px;
}

.booking-create-title {
    margin: 0 44px 28px 0;
    font-size: 30px;
    font-weight: 950;
    color: #0B1220;
}

.booking-create-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255,196,0,.45);
    background: linear-gradient(180deg, #fffaf0, #fff7dc);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
}

.booking-create-summary-bar > div {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border-right: 1px solid rgba(151,120,65,.16);
}

.booking-create-summary-bar > div:last-child {
    border-right: 0;
}

.booking-create-summary-bar .material-symbols-outlined {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,196,0,.24);
    color: #0B1220;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.booking-create-summary-bar p {
    margin: 0;
}

.booking-create-summary-bar small {
    display: block;
    color: #6b5a35;
    font-size: 12px;
    font-weight: 950;
}

.booking-create-summary-bar strong {
    display: block;
    color: #0B1220;
    font-size: 20px;
    font-weight: 950;
    margin-top: 2px;
}

.booking-available-pill {
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(34,197,94,.16);
    color: #15803d !important;
    font-size: 14px !important;
}

.booking-create-form-premium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 26px;
}

.booking-create-form-premium .booking-field.full {
    grid-column: 1 / -1;
}

.booking-input-icon,
.booking-textarea-icon {
    position: relative;
}

.booking-input-icon > .material-symbols-outlined,
.booking-textarea-icon > .material-symbols-outlined {
    position: absolute;
    left: 18px;
    color: #6b7280;
    font-size: 24px;
    pointer-events: none;
}

.booking-input-icon > .material-symbols-outlined {
    top: 50%;
    transform: translateY(-50%);
}

.booking-textarea-icon > .material-symbols-outlined {
    top: 20px;
}

.booking-create-form-premium input,
.booking-create-form-premium select,
.booking-create-form-premium textarea {
    width: 100%;
    border: 1px solid #d7dde7;
    background: #fff;
    border-radius: 14px;
    color: #111827;
    font-weight: 850;
    outline: none;
    font-size: 16px;
}

.booking-create-form-premium input,
.booking-create-form-premium select {
    min-height: 58px;
    padding: 0 18px 0 56px;
}

.booking-create-form-premium textarea {
    min-height: 128px;
    padding: 20px 18px 18px 56px;
    resize: vertical;
}

.booking-create-form-premium input:focus,
.booking-create-form-premium select:focus,
.booking-create-form-premium textarea:focus {
    border-color: #FFC400;
    box-shadow: 0 0 0 3px rgba(255,196,0,.16);
}

.booking-create-info-box {
    margin-top: 28px;
    border: 1px solid rgba(255,196,0,.38);
    background: #fffaf0;
    border-radius: 16px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 14px;
}

.booking-create-info-box > .material-symbols-outlined {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFC400;
    color: #0B1220;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-create-info-box p {
    margin: 0;
    color: #4b5563;
    font-weight: 750;
}

.booking-create-info-box strong {
    display: block;
    color: #0B1220;
    font-size: 16px;
    font-weight: 950;
    margin-bottom: 3px;
}

.booking-create-actions {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.booking-create-actions button {
    min-height: 56px;
    border-radius: 14px;
    padding: 0 28px;
    border: 1px solid #d7dde7;
    font-size: 16px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.btn-create-cancel {
    background: #fff;
    color: #111827;
}

.btn-create-save {
    background: #FFC400;
    border-color: #FFC400 !important;
    color: #111827;
}

@media (max-width: 900px) {
    .booking-create-premium {
        padding: 26px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    .booking-create-summary-bar,
    .booking-create-form-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-create-summary-bar > div {
        border-right: 0;
        border-bottom: 1px solid rgba(151,120,65,.16);
    }

    .booking-create-summary-bar > div:last-child {
        border-bottom: 0;
    }

   .booking-create-actions.booking-edit-actions {

        display: grid !important;

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 8px !important;

    }

    .booking-create-actions.booking-edit-actions button {

        width: 100% !important;

        min-width: 0 !important;

        padding: 0 8px !important;

        font-size: 12px !important;

        min-height: 48px !important;

        justify-content: center !important;

    }

    .booking-create-actions.booking-edit-actions .material-symbols-outlined {

        font-size: 18px !important;

    }

    .booking-create-actions button {
        width: 100%;
        justify-content: center;
    }
}




.btn-edit-delete {
    background: #e11d2f;
    border-color: #e11d2f !important;
    color: #fff;
}

.booking-edit-actions {
    justify-content: space-between;
}

.booking-edit-actions button {
    min-width: 210px;
}

.booking-input-icon input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.quick-stats-premium .quick-stats-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 1fr) minmax(220px, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.quick-stats-premium .quick-stat-card {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.quick-stats-premium .quick-stat-card-main {
    grid-row: span 2 !important;
}

.quick-stats-premium .quick-stat-card-wide {
    grid-column: span 2 !important;
}

.quick-stats-premium .quick-stats-bottom {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.quick-stats-premium .quick-stats-bottom article {
    margin: 0 !important;
}
.quick-stats-premium.is-loading {
    position: relative;
    pointer-events: none;
}

.quick-stats-premium.is-loading::after {
    content: "Cargando estadísticas...";
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(3px);
    font-weight: 900;
    color: #111827;
}


/* =========================
   FLATPICKR · DÍAS DESACTIVADOS
========================= */

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background: #f1ece3 !important;
    color: #c8b89a !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    opacity: .55;
}

/* Día actual deshabilitado */
.flatpickr-day.today.flatpickr-disabled {
    border-color: #d8c29a !important;
}

/* Hover solo en días activos */
.flatpickr-day:not(.flatpickr-disabled):hover {
    background: rgba(255, 196, 0, 0.12);
    border-color: #ffc400;
}

/* Día seleccionado */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #ffc400 !important;
    border-color: #ffc400 !important;
    color: #111 !important;
}

/* Calendario premium YOCUTZ */
.flatpickr-calendar {
    border-radius: 22px !important;
    border: 1px solid rgba(212, 175, 55, 0.22) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
}

.flatpickr-months {
    padding-top: 10px;
}

.flatpickr-current-month {
    font-weight: 800;
}

.flatpickr-weekday {
    color: #9b7a2f !important;
    font-weight: 700;
}

/* =========================
   OFERTAS · AJUSTE VISUAL
========================= */

.offers-section {
    background: #ffffff;
    border-radius: 22px;
}

.offers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: 24px;
    align-items: start;
}

.offers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    background: #fffaf0;
    border: 1px solid rgba(212, 175, 55, .24);
    border-radius: 22px;
    padding: 20px;
    min-height: 360px;
}

.offer-detail-card {
    background: #fffaf0;
    border: 1px solid rgba(212, 175, 55, .28);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 16px 35px rgba(15, 23, 42, .08);
    color: #111827;
}

.offer-detail-header h3,
.offer-detail-header p,
.offer-form label,
.offer-active-row strong,
.offer-active-row p {
    color: #111827;
}

.offer-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.offer-detail-header span,
#offerEditorStatus {
    background: #ffc400;
    color: #111827;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 12px;
}

.offer-form input,
.offer-form textarea,
.offer-form select {
    width: 100%;
    background: #fff;
    border: 1px solid #ead7ad;
    border-radius: 12px;
    min-height: 46px;
    color: #111827;
    font-weight: 700;
}

.offer-form textarea {
    padding: 12px 14px;
}

.offer-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.offer-type-selector button {
    border-radius: 14px;
    border: 1px solid #ead7ad;
    background: #fff;
    color: #111827;
    font-weight: 900;
    padding: 12px;
}

.offer-type-selector button.active {
    background: #ffc400;
    border-color: #ffc400;
}

.offer-dates-grid,
.offer-discount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.offer-active-row {
    background: #fff;
    border: 1px solid #ead7ad;
    border-radius: 16px;
    padding: 14px;
}

.offer-detail-footer {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.offer-detail-footer > div {
    display: flex;
    gap: 10px;
}

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

    .offer-detail-card {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .offers-list,
    .offer-dates-grid,
    .offer-discount-grid,
    .offer-type-selector {
        grid-template-columns: 1fr;
    }

    .offer-detail-footer,
    .offer-detail-footer > div {
        flex-direction: column;
        width: 100%;
    }

    .offer-detail-footer button {
        width: 100%;
    }
}

/* =========================
   FIX OFERTAS · TEXTOS VISIBLES
========================= */

.offers-section,
.offers-section * {
    color: #111827;
}

.offer-card,
.offer-item,
.offers-list article {
    background: #fffaf0;
    color: #111827;
}

.offer-card h3,
.offer-card p,
.offer-card span,
.offer-card small,
.offer-card strong,
.offers-list h3,
.offers-list p,
.offers-list span,
.offers-list small,
.offers-list strong {
    color: #111827 !important;
}

.add-offer-card,
.invite-offer-card {
    background: linear-gradient(135deg, #fff8df, #ffffff);
    border: 1.5px dashed #ffc400;
}

.add-offer-card *,
.invite-offer-card * {
    color: #111827 !important;
}

.offer-edit-btn,
.offer-card button {
    color: #111827 !important;
}

.offer-detail-card,
.offer-detail-card * {
    color: #111827;
}

.offer-type-selector button.active,
.offer-save-btn {
    color: #111827 !important;
}

/* =========================
   OFERTAS · ESTILO COMO SERVICIOS
========================= */

.offers-section {
    background: #fff;
    border-radius: 24px;
}

.offers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    align-items: start;
}

.offers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    background: #fff;
    border: none;
    padding: 0;
    min-height: auto;
}

.offers-list article,
.offer-card,
.add-offer-card {
    min-height: 250px;
    background: #fff;
    border: 1.5px solid rgba(255, 196, 0, .45);
    border-radius: 22px;
    padding: 24px;
    box-shadow: none;
    color: #111827 !important;
    position: relative;
}

.offers-list article.active,
.offer-card.active,
.offers-list article:hover {
    border-color: #ffc400;
    box-shadow: 0 18px 35px rgba(255, 196, 0, .12);
}

.add-offer-card,
.offers-list article:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-style: solid;
}

.add-offer-card .material-symbols-outlined,
.offers-list article:first-child .material-symbols-outlined {
    font-size: 32px;
    color: #111827 !important;
    margin-bottom: 22px;
}

.offers-list h3,
.offer-card h3 {
    font-size: 22px;
    line-height: 1.05;
    font-weight: 950;
    color: #111827 !important;
    margin: 0 0 16px;
}

.offers-list p,
.offer-card p {
    color: #111827 !important;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 26px;
}

.offers-list small,
.offer-card small,
.offers-list span,
.offer-card span {
    color: #7a5b00 !important;
    font-weight: 800;
}

.offer-card .offer-badge,
.offers-list .offer-badge,
.offer-card [class*="badge"] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff7d6;
    border: 1px solid #ffc400;
    color: #7a5b00 !important;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 950;
}

.offer-card button,
.offers-list article button {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffc400;
    color: #111827 !important;
    border: none;
    display: grid;
    place-items: center;
}

.offer-card button span,
.offers-list article button span {
    color: #111827 !important;
}

/* Editor lateral igual que servicios */
.offer-detail-card {
    background: #fff4df;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 22px;
    overflow: hidden;
    padding: 0;
    color: #111827;
}

.offer-detail-header {
    background: #fff0d5;
    padding: 24px;
    border-bottom: 1px solid rgba(212, 175, 55, .28);
}

.offer-detail-header h3 {
    font-size: 24px;
    font-weight: 950;
    color: #111827;
    margin: 0;
}

.offer-detail-header p {
    color: #111827;
    font-weight: 800;
    margin-top: 8px;
}

.offer-form {
    padding: 22px 24px;
}

.offer-form label {
    color: #8a6a24 !important;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.offer-form input,
.offer-form textarea {
    background: #fff7e7 !important;
    border: 1px solid #ead7ad !important;
    border-radius: 12px !important;
    color: #111827 !important;
    font-weight: 800;
}

.offer-type-selector button {
    background: #fffaf0;
    border: 1px solid #ead7ad;
    color: #111827 !important;
    border-radius: 16px;
    min-height: 76px;
    font-weight: 900;
}

.offer-type-selector button.active {
    background: #ffc400;
    border-color: #ffc400;
}

.offer-detail-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(212, 175, 55, .24);
    background: #fffaf0;
}

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


/* =========================================================
   QUICK STATS HERO
========================================================= */

.quick-stats-hero{
    padding:28px;
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(255,196,0,.08), transparent 22%),
        #f7f7f7;
    border:1px solid #ececec;
    overflow:hidden;
    position:relative;
}

.quick-stats-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.quick-stats-title h2{
    font-size:34px;
    line-height:1;
    margin:8px 0 10px;
    font-weight:800;
    color:#111827;
    letter-spacing:-1px;
}

.quick-stats-title small{
    font-size:15px;
    color:#8b7355;
    font-weight:600;
}

.quick-stats-filters{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    background:#f2ede3;
    border:1px solid #ead9ab;
    border-radius:18px;
    padding:8px;
}

.quick-stats-filters button{
    border:none;
    background:transparent;
    height:42px;
    padding:0 18px;
    border-radius:14px;
    font-weight:700;
    font-size:14px;
    color:#7b5a00;
    cursor:pointer;
    transition:.18s ease;
}

.quick-stats-filters button.active{
    background:#ffc400;
    color:#111;
    box-shadow:0 6px 18px rgba(255,196,0,.28);
}

.quick-custom-range{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
    margin-bottom:26px;
}

.quick-custom-range > div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.quick-custom-range label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
    color:#8b7355;
}

.quick-custom-range input{
    height:48px;
    border-radius:14px;
    border:1px solid #ead9ab;
    background:#fff;
    padding:0 16px;
    font-size:15px;
    font-weight:600;
}

/* =========================================================
   GRID
========================================================= */

.quick-hero-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-areas:
        "revenue bookings free"
        "revenue cancel cancel";
    gap:18px;
}

.quick-hero-revenue{
    grid-area:revenue;
}

.quick-hero-card[data-stat="bookings"]{
    grid-area:bookings;
}

.quick-hero-card[data-stat="freeSlots"]{
    grid-area:free;
}

.quick-hero-card[data-stat="cancellations"]{
    grid-area:cancel;
}

/* =========================================================
   REVENUE CARD
========================================================= */

.quick-hero-revenue{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,#111827 0%,#1f2937 100%);
    border-radius:28px;
    padding:30px;
    min-height:290px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#fff;
}

.quick-hero-revenue::before{
    content:'';
    position:absolute;
    right:-120px;
    top:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,196,0,.12);
}

.quick-hero-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    background:#ffc400;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    box-shadow:0 10px 30px rgba(255,196,0,.25);
}

.quick-hero-icon .material-symbols-outlined{
    font-size:36px;
    color:#111;
}

.quick-hero-revenue p{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    color:#ffe08a;
    margin:0 0 12px;
}

.quick-hero-revenue strong{
    display:block;
    font-size:58px;
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:14px;
    font-weight:900;
}

.quick-hero-revenue small{
    font-size:16px;
    color:rgba(255,255,255,.72);
    font-weight:500;
}

.quick-mini-chart{
    position:absolute;
    right:28px;
    bottom:24px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    height:100px;
}

.quick-mini-chart span{
    width:12px;
    border-radius:999px;
    background:linear-gradient(to top,#ffc400, #ffe89b);
    opacity:.95;
}

/* =========================================================
   MINI CARDS
========================================================= */

.quick-hero-card{
    background:#fff;
    border-radius:24px;
    border:1px solid #ececec;
    padding:24px;
    min-height:136px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:.18s ease;
    position:relative;
    overflow:hidden;
}

.quick-hero-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,.06);
}

.quick-hero-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.quick-hero-card-top span.material-symbols-outlined{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.quick-hero-card.blue .material-symbols-outlined{
    background:#dff4ff;
    color:#0091d5;
}

.quick-hero-card.green .material-symbols-outlined{
    background:#e6f9eb;
    color:#1f9c4b;
}

.quick-hero-card.red .material-symbols-outlined{
    background:#ffe7e7;
    color:#e03d3d;
}

.quick-hero-card-top small{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#8b7355;
    font-weight:800;
}

.quick-hero-card strong{
    font-size:48px;
    line-height:1;
    font-weight:900;
    color:#111827;
    margin-bottom:10px;
    letter-spacing:-2px;
}

.quick-hero-card p{
    margin:0 0 12px;
    font-size:14px;
    font-weight:700;
    color:#7c6b52;
}

.quick-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    width:fit-content;
}

.quick-hero-card.blue .quick-hero-badge{
    background:#eef8ff;
    color:#0077b3;
}

.quick-hero-card.green .quick-hero-badge{
    background:#eefcf2;
    color:#22884b;
}

.quick-hero-card.red .quick-hero-badge{
    background:#fff0f0;
    color:#d53c3c;
}

/* =========================================================
   LOADER
========================================================= */

.quick-stats-loader{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    z-index:50;
}

.quick-stats-premium.is-loading .quick-stats-loader{
    display:flex;
}

.quick-stats-loader span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ffc400;
    animation:quickPulse .9s infinite ease-in-out;
}

.quick-stats-loader span:nth-child(2){
    animation-delay:.15s;
}

.quick-stats-loader span:nth-child(3){
    animation-delay:.3s;
}

@keyframes quickPulse{
    0%,100%{
        transform:scale(.7);
        opacity:.5;
    }

    50%{
        transform:scale(1);
        opacity:1;
    }
}

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

@media (max-width: 1180px){

    .quick-hero-grid{
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "revenue revenue"
            "bookings free"
            "cancel cancel";
    }

    .quick-hero-revenue{
        min-height:240px;
    }
}

@media (max-width: 768px){

    .quick-stats-title{
        flex-direction:column;
    }

    .quick-stats-title h2{
        font-size:28px;
    }

    .quick-custom-range{
        grid-template-columns:1fr;
    }

    .quick-hero-grid{
        grid-template-columns:1fr;
        grid-template-areas:
            "revenue"
            "bookings"
            "free"
            "cancel";
    }

    .quick-hero-revenue{
        min-height:auto;
    }

    .quick-hero-revenue strong{
        font-size:42px;
    }

    .quick-hero-card strong{
        font-size:40px;
    }

    .quick-mini-chart{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:24px;
    }
}

/* =========================================================
   ADVANCED STATS · KPIs NEGOCIO
========================================================= */

.advanced-kpi-panel {
    position: relative;
    margin-top: 26px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 196, 0, .10), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
    border: 1px solid rgba(212, 175, 55, .22);
    box-shadow: 0 20px 55px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.advanced-kpi-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 24px;
}

.advanced-kpi-toolbar h3 {
    margin: 8px 0 8px;
    font-size: 32px;
    line-height: 1;
    font-weight: 950;
    color: #111827;
    letter-spacing: -1px;
}

.advanced-kpi-toolbar p {
    margin: 0;
    color: #8b7355;
    font-weight: 700;
}

.advanced-kpi-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.advanced-kpi-card {
    position: relative;
    min-height: 158px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(234, 215, 173, .85);
    overflow: hidden;
    transition: .18s ease;
}

.advanced-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.advanced-kpi-card > span {
    display: block;
    margin-bottom: 12px;
    color: #8a6a24;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.advanced-kpi-card strong {
    display: block;
    font-size: 36px;
    line-height: 1;
    color: #111827;
    font-weight: 950;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.advanced-kpi-card small {
    color: #7c6b52;
    font-size: 13px;
    font-weight: 700;
}

.advanced-kpi-card-main {
    grid-row: span 2;
    min-height: 334px;
    padding: 30px;
    background:
        radial-gradient(circle at 80% 15%, rgba(255, 196, 0, .20), transparent 30%),
        linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.advanced-kpi-card-main > span {
    color: #ffe08a;
}

.advanced-kpi-card-main strong {
    color: #ffffff;
    font-size: 56px;
}

.advanced-kpi-card-main small {
    color: rgba(255,255,255,.72);
    font-size: 15px;
}

.advanced-kpi-icon {
    position: absolute;
    top: 28px;
    left: 28px;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #ffc400;
    display: grid;
    place-items: center;
    box-shadow: 0 16px 34px rgba(255, 196, 0, .26);
}

.advanced-kpi-icon .material-symbols-outlined {
    font-size: 36px;
    color: #111827;
}

.advanced-kpi-card.warning {
    background: #fff8e1;
    border-color: rgba(255, 196, 0, .55);
}

.advanced-kpi-card.warning strong {
    font-size: 28px;
}

.advanced-kpi-card.danger {
    background: #fff1f1;
    border-color: rgba(239, 68, 68, .22);
}

.advanced-kpi-card.danger > span {
    color: #b91c1c;
}

.advanced-kpi-card.danger strong {
    color: #dc2626;
}

/* Reutiliza botones de filtro dentro de estadísticas */
.advanced-kpi-panel .stats-filter-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f2ede3;
    border: 1px solid #ead9ab;
    border-radius: 18px;
    padding: 8px;
}

.advanced-kpi-panel .stats-filter-buttons button {
    border: none;
    background: transparent;
    height: 40px;
    padding: 0 16px;
    border-radius: 13px;
    font-weight: 800;
    font-size: 13px;
    color: #7b5a00;
    cursor: pointer;
}

.advanced-kpi-panel .stats-filter-buttons button.active {
    background: #ffc400;
    color: #111827;
    box-shadow: 0 6px 18px rgba(255,196,0,.25);
}

.advanced-kpi-panel .stats-custom-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 14px;
    margin: 0 0 22px;
}

.advanced-kpi-panel .stats-custom-range label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 950;
    color: #8a6a24;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Loader encima del panel */
.advanced-kpi-panel .stats-summary-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(4px);
}

.advanced-kpi-panel.is-loading .stats-summary-loader {
    display: flex;
}

.advanced-kpi-panel .stats-summary-loader span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffc400;
    animation: advancedKpiPulse .9s infinite ease-in-out;
}

.advanced-kpi-panel .stats-summary-loader span:nth-child(2) {
    animation-delay: .15s;
}

.advanced-kpi-panel .stats-summary-loader span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes advancedKpiPulse {
    0%, 100% {
        transform: scale(.7);
        opacity: .45;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    .advanced-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .advanced-kpi-card-main {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 260px;
    }
}

@media (max-width: 780px) {
    .advanced-kpi-panel {
        padding: 20px;
    }

    .advanced-kpi-toolbar {
        flex-direction: column;
    }

    .advanced-kpi-toolbar h3 {
        font-size: 26px;
    }

    .advanced-kpi-grid,
    .advanced-kpi-panel .stats-custom-range {
        grid-template-columns: 1fr;
    }

    .advanced-kpi-card-main strong {
        font-size: 42px;
    }
}

.advanced-health-section{
    margin-bottom:32px;
}

.advanced-health-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:26px;
}

.advanced-health-header h2{
    font-size:52px;
    line-height:1;
    margin:10px 0 14px;
    color:#0f172a;
    font-weight:900;
}

.advanced-health-header p{
    font-size:17px;
    color:#7c6d56;
    font-weight:600;
}

.advanced-health-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:24px;
    margin-bottom:24px;
}

.health-hero-card{
    position:relative;
    overflow:hidden;
    border-radius:36px;
    padding:34px;
    min-height:360px;
    background:
        radial-gradient(circle at top left, rgba(255,199,0,.18), transparent 22%),
        radial-gradient(circle at 80% 20%, rgba(255,210,0,.16), transparent 28%),
        linear-gradient(135deg,#081226 0%,#0b1735 45%,#1b2435 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.health-hero-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.health-hero-icon{
    width:92px;
    height:92px;
    border-radius:28px;
    background:#ffcb05;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 40px rgba(255,203,5,.35);
}

.health-hero-icon span{
    font-size:42px;
    color:#0f172a;
}

.health-score{
    text-align:right;
}

.health-score span{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.75;
    margin-bottom:4px;
}

.health-score strong{
    font-size:64px;
    line-height:1;
    font-weight:900;
}

.health-hero-content{
    margin-top:auto;
}

.health-hero-label{
    display:block;
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#ffe082;
    margin-bottom:14px;
}

.health-hero-content strong{
    display:block;
    font-size:82px;
    line-height:.95;
    font-weight:900;
    margin-bottom:14px;
}

.health-hero-content small{
    font-size:24px;
    font-weight:700;
    opacity:.8;
}

.health-mini-chart{
    position:absolute;
    right:30px;
    bottom:34px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    height:140px;
}

.health-mini-chart span{
    width:16px;
    border-radius:999px;
    background:linear-gradient(to top,#ffcb05,#ffe580);
    box-shadow:0 0 18px rgba(255,203,5,.4);
}

.health-hero-footer{
    display:flex;
    gap:32px;
    margin-top:26px;
}

.health-hero-footer label{
    display:block;
    font-size:12px;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:4px;
}

.health-hero-footer strong{
    font-size:22px;
    font-weight:800;
}

.health-hero-footer .positive{
    color:#4ade80;
}

.health-kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.health-kpi-card{
    background:#fff;
    border-radius:28px;
    padding:30px;
    border:1px solid #f1dfae;
    min-height:170px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.health-kpi-card span{
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#a17814;
    margin-bottom:18px;
}

.health-kpi-card strong{
    font-size:62px;
    line-height:1;
    font-weight:900;
    color:#0f172a;
    margin-bottom:14px;
}

.health-kpi-card small{
    font-size:18px;
    color:#7c6d56;
    font-weight:700;
}

.health-kpi-card.warning{
    background:#fff9ea;
}

.business-insights-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.business-alert-card{
    border-radius:28px;
    padding:28px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    border:1px solid #ece3cb;
    background:#fff;
}

.business-alert-icon{
    width:66px;
    height:66px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.business-alert-icon span{
    font-size:34px;
}

.business-alert-card span{
    display:block;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    margin-bottom:10px;
}

.business-alert-card strong{
    display:block;
    font-size:28px;
    line-height:1.1;
    font-weight:900;
    margin-bottom:12px;
    color:#0f172a;
}

.business-alert-card p{
    font-size:16px;
    line-height:1.5;
    color:#7c6d56;
    font-weight:600;
}

.business-alert-card.danger{
    background:#fff4f4;
    border-color:#ffd7d7;
}

.business-alert-card.danger .business-alert-icon{
    background:#ffe5e5;
    color:#dc2626;
}

.business-alert-card.success{
    background:#f4fff7;
    border-color:#d7f7e1;
}

.business-alert-card.success .business-alert-icon{
    background:#dff7e8;
    color:#16a34a;
}

.business-alert-card.info{
    background:#f8fbff;
    border-color:#dcecff;
}

.business-alert-card.info .business-alert-icon{
    background:#e5f1ff;
    color:#2563eb;
}

@media(max-width:1400px){

    .advanced-health-grid{
        grid-template-columns:1fr;
    }

    .business-insights-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){

    .advanced-health-header{
        flex-direction:column;
    }

    .health-kpi-grid{
        grid-template-columns:1fr;
    }

    .health-hero-content strong{
        font-size:58px;
    }

    .health-kpi-card strong{
        font-size:44px;
    }
}

.premium-stats-layout{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(340px,.9fr);
    gap:24px;
    align-items:start;
    margin-top:28px;
}

.premium-bookings-panel{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.10), transparent 28%),
        linear-gradient(180deg,#111827 0%,#0f172a 100%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    padding:28px;
    min-height:620px;
}

.premium-bookings-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(223,255,0,.03),
            transparent 35%
        );
    pointer-events:none;
}

.premium-panel-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:24px;
}

.premium-panel-header h3{
    color:#fff;
    font-size:28px;
    font-weight:800;
    margin:6px 0 8px;
}

.premium-panel-header p{
    color:#8c97ad;
    font-size:14px;
    line-height:1.5;
}

.premium-booking-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.premium-booking-filters button{
    border:none;
    background:#1b2436;
    color:#9aa6bd;
    padding:11px 18px;
    border-radius:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.premium-booking-filters button:hover{
    transform:translateY(-1px);
    background:#263147;
    color:#fff;
}

.premium-booking-filters button.active{
    background:#dfff00;
    color:#111;
    box-shadow:0 0 18px rgba(223,255,0,.35);
}

.premium-state-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:28px;
}

.premium-state-filters button{
    border:none;
    background:rgba(255,255,255,.04);
    color:#b8c2d8;
    padding:10px 16px;
    border-radius:999px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.premium-state-filters button:hover{
    background:rgba(255,255,255,.08);
}

.premium-state-filters button.active{
    background:rgba(223,255,0,.14);
    color:#dfff00;
    border:1px solid rgba(223,255,0,.25);
}

.premium-booking-empty{
    min-height:420px;
    border-radius:24px;
    border:1px dashed rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,.01)
        );
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.premium-booking-empty-icon{
    width:88px;
    height:88px;
    border-radius:26px;
    background:
        linear-gradient(
            135deg,
            rgba(223,255,0,.18),
            rgba(223,255,0,.05)
        );
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    box-shadow:0 0 30px rgba(223,255,0,.12);
}

.premium-booking-empty-icon .material-symbols-outlined{
    color:#dfff00;
    font-size:42px;
}

.premium-booking-empty h4{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.premium-booking-empty p{
    color:#94a3b8;
    max-width:380px;
    line-height:1.7;
    font-size:15px;
}

.premium-ranking-column{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.premium-ranking-card{
    background:
        linear-gradient(180deg,#121b2b 0%,#0f172a 100%);
    border-radius:24px;
    border:1px solid rgba(255,255,255,.06);
    padding:24px;
    overflow:hidden;
    position:relative;
}

.premium-ranking-card::before{
    content:'';
    position:absolute;
    top:-60px;
    right:-60px;
    width:180px;
    height:180px;
    background:radial-gradient(circle,rgba(223,255,0,.08),transparent 70%);
    pointer-events:none;
}

.premium-ranking-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
}

.premium-ranking-header h3{
    color:#fff;
    margin-top:5px;
    font-size:21px;
    font-weight:800;
}

.premium-ranking-header .material-symbols-outlined{
    color:#dfff00;
    font-size:28px;
}

.premium-ranking-row{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:18px;
}

.premium-ranking-row strong{
    color:#fff;
    font-size:15px;
}

.premium-ranking-row small{
    color:#8fa0bf;
    margin-top:4px;
    display:block;
}

.premium-ranking-progress{
    width:100%;
    height:10px;
    background:rgba(255,255,255,.05);
    border-radius:999px;
    overflow:hidden;
}

.premium-ranking-progress i{
    display:block;
    height:100%;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #dfff00,
            #b6ff00
        );
    box-shadow:0 0 18px rgba(223,255,0,.35);
}

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

.premium-hour-card{
    border-radius:20px;
    padding:18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );
    border:1px solid rgba(255,255,255,.05);
    transition:.25s;
}

.premium-hour-card:hover{
    transform:translateY(-3px);
    border-color:rgba(223,255,0,.18);
}

.premium-hour-card span{
    display:block;
    color:#8fa0bf;
    font-size:13px;
    margin-bottom:8px;
}

.premium-hour-card strong{
    color:#fff;
    font-size:28px;
    font-weight:800;
}

.premium-hour-bars{
    display:flex;
    align-items:flex-end;
    gap:5px;
    margin-top:16px;
    height:40px;
}

.premium-hour-bars i{
    flex:1;
    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            #dfff00,
            rgba(223,255,0,.18)
        );
}

.premium-hour-bars i:nth-child(1){height:40%;}
.premium-hour-bars i:nth-child(2){height:65%;}
.premium-hour-bars i:nth-child(3){height:100%;}
.premium-hour-bars i:nth-child(4){height:75%;}

@media(max-width:1200px){

    .premium-stats-layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .premium-panel-header{
        flex-direction:column;
    }

    .premium-hours-grid{
        grid-template-columns:1fr;
    }

    .premium-bookings-panel{
        padding:22px;
    }

}

.premium-bookings-panel .ranking-empty,
.premium-ranking-card .ranking-empty {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 22px 0;
}

.premium-bookings-panel .weekly-bar-row {
    display: grid;
    grid-template-columns: 52px 1fr 42px;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.premium-bookings-panel .weekly-bar-row span,
.premium-bookings-panel .weekly-bar-row strong {
    color: #ffffff;
    font-weight: 800;
}

.premium-bookings-panel .weekly-bar-row div {
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
}

.premium-bookings-panel .weekly-bar-row div i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff00, #ffc400);
    box-shadow: 0 0 18px rgba(223,255,0,.35);
}

.premium-ranking-card .ranking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.premium-ranking-card .ranking-row:last-child {
    border-bottom: none;
}

.premium-ranking-card .ranking-row span {
    color: #ffffff;
    font-weight: 800;
}

.premium-ranking-card .ranking-row strong {
    color: #dfff00;
    font-weight: 900;
}
.premium-bars-chart {
    width: 100%;
    margin-top: 24px;
}

.premium-bar-chart-row {
    display: grid;
    grid-template-columns: 70px 1fr 48px;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.premium-bar-chart-row span {
    color: #cbd5e1;
    font-weight: 800;
    font-size: 14px;
}

.premium-bar-chart-row strong {
    color: #dfff00;
    font-weight: 900;
    font-size: 18px;
    text-align: right;
}

.premium-bar-chart-row div {
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
}

.premium-bar-chart-row div i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff00, #ffc400);
    box-shadow: 0 0 18px rgba(223,255,0,.28);
}


.premium-mixed-chart {
    width: 100%;
    margin-top: 28px;
}

.premium-mixed-row {
    display: grid;
    grid-template-columns: 78px 1fr 46px;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.premium-mixed-row span {
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 900;
}

.premium-mixed-row strong {
    color: #dfff00;
    font-size: 20px;
    font-weight: 950;
    text-align: right;
}

.premium-mixed-row.is-empty span,
.premium-mixed-row.is-empty strong {
    color: rgba(203,213,225,.35);
}

.premium-stacked-bar,
.premium-single-bar {
    height: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
    display: flex;
}

.premium-stacked-bar i,
.premium-single-bar i {
    height: 100%;
    display: block;
}

.premium-stacked-bar .completed {
    background: linear-gradient(90deg, #dfff00, #ffc400);
}

.premium-stacked-bar .pending {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.premium-stacked-bar .cancelled {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.premium-single-bar i {
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff00, #ffc400);
}

.premium-chart-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    color: #94a3b8;
    font-weight: 800;
}

.premium-chart-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-chart-legend i {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.premium-chart-legend .completed {
    background: #dfff00;
}

.premium-chart-legend .pending {
    background: #38bdf8;
}

.premium-chart-legend .cancelled {
    background: #ef4444;
}
.premium-mixed-chart {
    width: 100%;
    margin-top: 28px;
}

.premium-mixed-row {
    display: grid;
    grid-template-columns: 78px 1fr 46px;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.premium-mixed-row span {
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 900;
}

.premium-mixed-row strong {
    color: #dfff00;
    font-size: 20px;
    font-weight: 950;
    text-align: right;
}

.premium-mixed-row.is-empty span,
.premium-mixed-row.is-empty strong {
    color: rgba(203,213,225,.35);
}

.premium-stacked-bar,
.premium-single-bar {
    height: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    display: flex;
}

.premium-stacked-bar i,
.premium-single-bar i {
    height: 100%;
    display: block;
}

.premium-stacked-bar .completed {
    background: linear-gradient(90deg, #dfff00, #ffc400);
}

.premium-stacked-bar .pending {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.premium-stacked-bar .cancelled {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.premium-single-bar i {
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff00, #ffc400);
}

.premium-chart-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    color: #94a3b8;
    font-weight: 800;
}

.premium-chart-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-chart-legend i {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.premium-chart-legend .completed {
    background: #dfff00;
}

.premium-chart-legend .pending {
    background: #38bdf8;
}

.premium-chart-legend .cancelled {
    background: #ef4444;
}



.premium-chart-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.12), transparent 26%),
        linear-gradient(135deg, #071226 0%, #020817 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 24px 80px rgba(0,0,0,.38);
    min-height: 520px;
}

.premium-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px;
}

.premium-chart-header span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    color: #dfff00;
}

.premium-chart-header h2 {
    margin: 8px 0 8px;
    font-size: 42px;
    line-height: 1;
    color: #fff;
    font-weight: 950;
}

.premium-chart-header p {
    color: #94a3b8;
    font-size: 16px;
    font-weight: 600;
}

.premium-chart-canvas-wrap {
    position: relative;
    height: 390px;
}

.premium-chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.premium-chart-legend div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #cbd5e1;
    font-weight: 800;
    font-size: 13px;
}

.premium-chart-legend i {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.premium-chart-legend .completed {
    background: #dfff00;
    box-shadow: 0 0 14px rgba(223,255,0,.5);
}

.premium-chart-legend .pending {
    background: #38bdf8;
    box-shadow: 0 0 14px rgba(56,189,248,.45);
}

.premium-chart-legend .cancelled {
    background: #ff4d6d;
    box-shadow: 0 0 14px rgba(255,77,109,.45);
}

@media(max-width: 900px) {
    .premium-chart-header {
        flex-direction: column;
    }

    .premium-chart-header h2 {
        font-size: 34px;
    }

    .premium-chart-canvas-wrap {
        height: 320px;
    }
}

.premium-insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.premium-insight-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 26px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.10), transparent 28%),
        linear-gradient(135deg, #071226 0%, #020817 100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 22px 70px rgba(0,0,0,.32);
}

.premium-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.premium-insight-header h3 {
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    margin-top: 8px;
    font-weight: 950;
}

.premium-insight-icon {
    color: #dfff00;
    font-size: 34px;
    filter: drop-shadow(0 0 14px rgba(223,255,0,.45));
}

.premium-empty-mini {
    color: #94a3b8;
    font-weight: 800;
    padding: 22px 0;
}

.premium-service-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.premium-service-rank {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-weight: 950;
}

.premium-service-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-weight: 900;
    margin-bottom: 8px;
}

.premium-service-head span {
    color: #dfff00;
}

.premium-service-bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.premium-service-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff00, #ffc400);
    box-shadow: 0 0 16px rgba(223,255,0,.35);
}

.premium-worker-row {
    display: grid;
    grid-template-columns: 48px 1fr 46px;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.premium-worker-row:last-child {
    border-bottom: none;
}

.premium-worker-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, rgba(223,255,0,.35), rgba(255,255,255,.06));
    color: #dfff00;
    font-weight: 950;
}

.premium-worker-info strong {
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: 900;
}

.premium-worker-info span {
    color: #94a3b8;
    display: block;
    margin-top: 4px;
    font-weight: 700;
}

.premium-worker-count {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    color: #dfff00;
    font-weight: 950;
    font-size: 20px;
}

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

.premium-hour-box {
    min-height: 104px;
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
    text-align: center;
}

.premium-hour-box span {
    color: #cbd5e1;
    font-weight: 800;
}

.premium-hour-box strong {
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    margin-top: 10px;
    font-weight: 950;
}

.premium-hour-box small {
    color: #94a3b8;
    font-weight: 700;
}

.premium-hour-box.medium {
    background: linear-gradient(135deg, rgba(255,196,0,.28), rgba(255,255,255,.05));
    border-color: rgba(255,196,0,.25);
}

.premium-hour-box.high {
    background: linear-gradient(135deg, rgba(223,255,0,.92), rgba(255,196,0,.65));
    border-color: rgba(223,255,0,.55);
    box-shadow: 0 0 30px rgba(223,255,0,.35);
}

.premium-hour-box.high span,
.premium-hour-box.high strong,
.premium-hour-box.high small {
    color: #071226;
}

.premium-heat-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: #94a3b8;
    font-weight: 700;
    font-size: 13px;
}

.premium-heat-legend div {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.premium-heat-legend i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1e293b, #ffc400, #dfff00);
}

.premium-insight-cta {
    width: 100%;
    margin-top: 18px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: #cbd5e1;
    font-weight: 850;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.premium-insight-cta:hover {
    color: #dfff00;
    border-color: rgba(223,255,0,.25);
}

.advanced-kpi-panel.is-loading,
.premium-bookings-panel.is-loading,
.premium-insights-grid.is-loading {
    position: relative;
    pointer-events: none;
}

.advanced-kpi-panel.is-loading .advanced-health-grid,
.advanced-kpi-panel.is-loading .business-insights-grid,
.premium-bookings-panel.is-loading .premium-chart-card,
.premium-insights-grid.is-loading .premium-insight-card {
    opacity: .28;
    filter: blur(1px);
}

#statsSummaryLoader,
#bookingStatsLoader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 18px 0;
    position: relative;
    z-index: 20;
}

#statsSummaryLoader span,
#bookingStatsLoader span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ffc400;
    animation: yocutzLoaderDot .8s infinite ease-in-out alternate;
}

#statsSummaryLoader span:nth-child(2),
#bookingStatsLoader span:nth-child(2) {
    animation-delay: .12s;
}

#statsSummaryLoader span:nth-child(3),
#bookingStatsLoader span:nth-child(3) {
    animation-delay: .24s;
}

@keyframes yocutzLoaderDot {
    from {
        transform: translateY(0);
        opacity: .45;
    }

    to {
        transform: translateY(-8px);
        opacity: 1;
    }
}
.stats-global-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 22px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.10), transparent 28%),
        linear-gradient(135deg, #071226 0%, #020817 100%);
    border: 1px solid rgba(255,255,255,.07);
}

.stats-global-toolbar h3 {
    color: #fff;
    font-size: 34px;
    line-height: 1;
    margin: 8px 0 10px;
    font-weight: 950;
}

.stats-global-toolbar p {
    color: #94a3b8;
    font-size: 16px;
    font-weight: 700;
}

.stats-global-filters {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.stats-global-toolbar .premium-booking-filters,
.stats-global-toolbar .premium-state-filters {
    justify-content: flex-end;
    margin: 0;
}

.premium-stats-layout {
    display: block;
}

.premium-stats-content {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(360px, .9fr);
    gap: 24px;
    align-items: start;
}

.premium-stats-content .premium-bookings-panel {
    min-width: 0;
}

.premium-stats-content .premium-insights-grid {
    min-width: 0;
}

.booking-custom-range {
    margin-bottom: 22px;
}

#bookingStatsLoader {
    margin: 0 0 22px;
}

@media (max-width: 1200px) {
    .premium-stats-content {
        grid-template-columns: 1fr;
    }

    .stats-global-toolbar {
        flex-direction: column;
    }

    .stats-global-filters {
        align-items: flex-start;
        width: 100%;
    }

    .stats-global-toolbar .premium-booking-filters,
    .stats-global-toolbar .premium-state-filters {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .stats-global-toolbar {
        padding: 22px;
        border-radius: 24px;
    }

    .stats-global-toolbar h3 {
        font-size: 28px;
    }

    .stats-global-filters,
    .stats-global-toolbar .premium-booking-filters,
    .stats-global-toolbar .premium-state-filters {
        width: 100%;
    }

    .stats-global-toolbar .premium-booking-filters,
    .stats-global-toolbar .premium-state-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
}
.stats-inner-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0;
    padding: 10px;
    border-radius: 24px;
    background: rgba(2,8,23,.04);
    border: 1px solid rgba(0,0,0,.06);
}

.stats-inner-tabs button {
    border: 0;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.75);
    color: #6f5b24;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stats-inner-tabs button.active {
    background: #ffc400;
    color: #111827;
    box-shadow: 0 12px 26px rgba(255,196,0,.28);
}

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

.stats-tab-panel.active {
    display: block;
}

.payroll-section {
    padding: 28px;
    border-radius: 28px;
}

.payroll-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.payroll-header h3 {
    font-size: 34px;
    margin: 6px 0;
}

.payroll-header p {
    color: #85724f;
    font-weight: 700;
}

.payroll-toolbar {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

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

.payroll-card {
    border-radius: 22px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fffaf1;
}

.payroll-card.empty {
    grid-column: 1 / -1;
    min-height: 190px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #7b6a4a;
}

.payroll-card.empty span {
    font-size: 42px;
    color: #ffc400;
}

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

    .payroll-header {
        flex-direction: column;
    }
}
/* =========================================================
   FINANCE PREMIUM UI
========================================================= */

.finance-premium-wrapper{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* =========================================================
   TOP TABS
========================================================= */

.finance-top-tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.finance-top-tabs button{
    border:none;
    background:#161616;
    color:#9b9b9b;
    padding:14px 22px;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.25s ease;
    border:1px solid rgba(255,255,255,.05);
}

.finance-top-tabs button:hover{
    transform:translateY(-2px);
    color:#fff;
    border-color:rgba(223,255,0,.2);
}

.finance-top-tabs button.active{
    background:#dfff00;
    color:#000;
    box-shadow:0 10px 25px rgba(223,255,0,.2);
}

/* =========================================================
   TOPBAR
========================================================= */

.finance-premium-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:24px;
}

.finance-period-selector{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.finance-period-selector button{
    background:#111;
    border:1px solid rgba(255,255,255,.06);
    color:#cfcfcf;
    border-radius:14px;
    padding:12px 18px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:.2s ease;
}

.finance-period-selector button.active{
    background:#dfff00;
    color:#000;
}

.finance-date-display{
    display:flex;
    align-items:center;
    gap:10px;
    color:#bdbdbd;
    font-size:14px;
}

.finance-date-display span{
    color:#dfff00;
}

/* =========================================================
   KPI GRID
========================================================= */

.finance-kpi-premium-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.finance-kpi-premium{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:26px;
    min-height:150px;
    background:#111;
    border:1px solid rgba(255,255,255,.05);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:.25s ease;
}

.finance-kpi-premium:hover{
    transform:translateY(-4px);
}

.finance-kpi-premium.income{
    background:linear-gradient(135deg,#182400,#0e1400);
}

.finance-kpi-premium.expenses{
    background:linear-gradient(135deg,#241616,#140c0c);
}

.finance-kpi-premium.profit{
    background:linear-gradient(135deg,#15221a,#0d1510);
}

.finance-kpi-premium.ticket{
    background:linear-gradient(135deg,#1c1a2a,#13111d);
}

.finance-kpi-premium.bookings{
    background:linear-gradient(135deg,#16212c,#0d141c);
}

.finance-kpi-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.finance-kpi-icon span{
    font-size:28px;
    color:#dfff00;
}

.finance-kpi-premium span{
    color:#9d9d9d;
    font-size:13px;
    display:block;
    margin-bottom:6px;
}

.finance-kpi-premium strong{
    color:#fff;
    font-size:32px;
    line-height:1;
    display:block;
    margin-bottom:10px;
}

.finance-kpi-premium small{
    color:#7ee787;
    font-size:13px;
}

/* =========================================================
   MAIN GRID
========================================================= */

.finance-main-grid{
    display:grid;
    grid-template-columns:1.5fr .9fr;
    gap:24px;
}

.finance-left-column,
.finance-right-column{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* =========================================================
   CARDS
========================================================= */

.finance-chart-card,
.finance-add-expense-card,
.finance-side-card{
    border-radius:28px;
    padding:28px;
    background:#111;
    border:1px solid rgba(255,255,255,.05);
    overflow:hidden;
}

.finance-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px;
}

.finance-card-header h3{
    color:#fff;
    font-size:22px;
    margin:0 0 6px;
}

.finance-card-header p{
    color:#8e8e8e;
    margin:0;
    font-size:14px;
}

/* =========================================================
   CHART
========================================================= */

.finance-chart-placeholder{
    height:360px;
    border-radius:22px;
    background:#0b0b0b;
    border:1px solid rgba(255,255,255,.04);
    padding:20px;
}

/* =========================================================
   EXPENSE FORM
========================================================= */

.finance-expense-type-tabs{
    display:flex;
    gap:12px;
    margin-bottom:26px;
    flex-wrap:wrap;
}

.finance-expense-type-tabs button{
    border:none;
    background:#1a1a1a;
    color:#aaa;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
    transition:.2s ease;
    font-weight:600;
}

.finance-expense-type-tabs button.active{
    background:#dfff00;
    color:#000;
}

.finance-expense-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.finance-form-row{
    display:grid;
    grid-template-columns:1fr 1fr .5fr;
    gap:18px;
}

.finance-form-row .small{
    max-width:160px;
}

.finance-expense-form .form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.finance-expense-form label{
    color:#d0d0d0;
    font-size:13px;
    font-weight:600;
}

.finance-expense-form input,
.finance-expense-form select{
    width:100%;
    height:52px;
    border-radius:16px;
    background:#0c0c0c;
    border:1px solid rgba(255,255,255,.06);
    padding:0 16px;
    color:#fff;
    font-size:14px;
}

.finance-expense-form input:focus,
.finance-expense-form select:focus{
    outline:none;
    border-color:#dfff00;
}

.finance-repeat-box{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    border-radius:18px;
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.05);
}

.finance-repeat-box strong{
    color:#fff;
    display:block;
    margin-bottom:4px;
}

.finance-repeat-box small{
    color:#7f7f7f;
}

.finance-form-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}

/* =========================================================
   SWITCH
========================================================= */

.finance-switch{
    position:relative;
    width:54px;
    height:30px;
    flex-shrink:0;
}

.finance-switch input{
    display:none;
}

.finance-switch span{
    position:absolute;
    inset:0;
    background:#2a2a2a;
    border-radius:999px;
    transition:.25s;
}

.finance-switch span::before{
    content:'';
    position:absolute;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    top:4px;
    left:4px;
    transition:.25s;
}

.finance-switch input:checked + span{
    background:#dfff00;
}

.finance-switch input:checked + span::before{
    transform:translateX(24px);
}

/* =========================================================
   EXPENSES LIST
========================================================= */

.finance-expenses-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.finance-expense-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
    border-radius:18px;
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.04);
}

.finance-expense-item strong{
    color:#fff;
    display:block;
    margin-bottom:5px;
}

.finance-expense-item small{
    color:#8a8a8a;
}

.finance-expense-right span{
    color:#ff8585;
    font-size:18px;
    font-weight:700;
}

/* =========================================================
   FIXED LIST
========================================================= */

.finance-fixed-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.finance-fixed-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.finance-fixed-item span{
    color:#bdbdbd;
}

.finance-fixed-item strong{
    color:#fff;
}

.finance-fixed-total{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.finance-fixed-total span{
    color:#9d9d9d;
}

.finance-fixed-total strong{
    color:#dfff00;
    font-size:24px;
}

/* =========================================================
   DISTRIBUTION
========================================================= */

.finance-distribution-chart{
    height:260px;
    margin-top:10px;
}

.finance-report-actions{
    display:flex;
    gap:14px;
    margin-top:24px;
}

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

@media(max-width:1400px){

    .finance-kpi-premium-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:1100px){

    .finance-main-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .finance-kpi-premium-grid{
        grid-template-columns:1fr;
    }

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

    .finance-premium-topbar{
        flex-direction:column;
        align-items:flex-start;
    }

}


.finance-premium-wrapper {
    background:
        radial-gradient(circle at 85% 5%, rgba(223,255,0,.08), transparent 28%),
        linear-gradient(180deg, #05070d 0%, #07101d 100%);
    border-radius: 34px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 90px rgba(0,0,0,.18);
}

.finance-premium-wrapper .panel.card {
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.05), transparent 28%),
        linear-gradient(135deg, #111827 0%, #05070d 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.finance-premium-topbar {
    background: rgba(255,255,255,.035);
    border-radius: 24px;
    padding: 18px 20px;
}

.finance-card-header select,
.finance-premium-wrapper select {
    height: 42px;
    border-radius: 14px;
    padding: 0 38px 0 14px;
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 800;
    cursor: pointer;
}

.finance-card-header select:focus,
.finance-premium-wrapper select:focus {
    outline: none;
    border-color: rgba(223,255,0,.55);
    box-shadow: 0 0 0 4px rgba(223,255,0,.08);
}

.finance-card-header select option,
.finance-premium-wrapper select option {
    background: #0b1220;
    color: #fff;
}

.finance-kpi-premium {
    min-height: 132px;
    padding: 22px;
}

.finance-kpi-premium strong {
    font-size: 28px;
}

.finance-chart-card,
.finance-add-expense-card,
.finance-side-card {
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.045), transparent 30%),
        linear-gradient(135deg, #111827 0%, #05070d 100%);
}

.finance-chart-placeholder {
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.07);
}

.finance-expense-form input,
.finance-expense-form select {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}

.finance-expense-item,
.finance-repeat-box {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.08);
}

.finance-fixed-item {
    border-bottom-color: rgba(255,255,255,.08);
}

.finance-fixed-total {
    border-top-color: rgba(223,255,0,.22);
}

.finance-distribution-chart {
    min-height: 260px;
    border-radius: 22px;
    background: rgba(0,0,0,.22);
    border: 1px dashed rgba(255,255,255,.08);
}

.finance-report-actions {
    align-items: center;
}

.finance-premium-wrapper .outline-btn {
    background: rgba(255,255,255,.04);
    color: #fff;
    border-color: rgba(255,196,0,.7);
}

.finance-premium-wrapper .outline-btn:hover {
    background: rgba(255,196,0,.12);
}

.finance-main-grid {
    align-items: start;
}

.finance-right-column {
    position: sticky;
    top: 100px;
}

@media(max-width: 1100px) {
    .finance-right-column {
        position: static;
    }
}

.finance-chart-placeholder {
    position: relative;
}

.finance-chart-empty {
    position: absolute;
    inset: 22px;
    border-radius: 22px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px;
    z-index: 2;
}

.finance-chart-empty span {
    font-size: 48px;
    color: #dfff00;
    margin-bottom: 14px;
}

.finance-chart-empty strong {
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

.finance-chart-empty p {
    color: #94a3b8;
    max-width: 460px;
    font-weight: 700;
    line-height: 1.45;
}

.finance-chart-empty .book-btn {
    margin-top: 18px;
}
.finance-custom-range {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}

.finance-custom-range .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finance-custom-range label {
    color: #cbd5e1;
    font-weight: 800;
    font-size: 13px;
}

.finance-custom-range input {
    height: 50px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    padding: 0 44px 0 16px;
}

.finance-custom-range .date-input-wrap {
    position: relative;
}

.finance-custom-range .date-input-wrap span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #dfff00;
}

@media(max-width: 800px) {
    .finance-custom-range {
        grid-template-columns: 1fr;
    }
}

.finance-stats-loader{
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:30px 0;
}

.finance-stats-loader span{
    width:12px;
    height:12px;
    border-radius:999px;
    background:#dfff00;
    animation:financeLoader .9s infinite ease-in-out;
}

.finance-stats-loader span:nth-child(2){
    animation-delay:.15s;
}

.finance-stats-loader span:nth-child(3){
    animation-delay:.3s;
}

@keyframes financeLoader{

    0%,100%{
        transform:translateY(0);
        opacity:.4;
    }

    50%{
        transform:translateY(-8px);
        opacity:1;
    }

}


.finance-date-display{
    position:relative;
    min-height:42px;
}

.finance-date-loader{
    display:none;
    align-items:center;
    gap:5px;
    margin-left:10px;
}

.finance-date-loader span{
    width:6px;
    height:6px;
    border-radius:999px;
    background:#dfff00;
    animation:financeDateDots .9s infinite ease-in-out;
}

.finance-date-loader span:nth-child(2){
    animation-delay:.15s;
}

.finance-date-loader span:nth-child(3){
    animation-delay:.3s;
}

@keyframes financeDateDots{

    0%,100%{
        transform:translateY(0);
        opacity:.35;
    }

    50%{
        transform:translateY(-4px);
        opacity:1;
    }

}

.finance-expense-item{
    gap:16px;
}

.finance-expense-main{
    min-width:0;
}

.finance-expense-main strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.finance-expense-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.finance-expense-actions{
    display:flex;
    gap:8px;
}

.finance-expense-actions button{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    color:#cbd5e1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s ease;
}

.finance-expense-actions button span{
    font-size:20px;
}

.finance-expense-edit:hover{
    color:#dfff00;
    border-color:rgba(223,255,0,.45);
    background:rgba(223,255,0,.08);
}

.finance-expense-delete:hover{
    color:#ff7b7b;
    border-color:rgba(255,123,123,.45);
    background:rgba(255,123,123,.08);
}


.finance-financial-row{
    display:grid;
    grid-template-columns:1.4fr 50px .9fr 50px 1.2fr;
    gap:18px;
    align-items:end;
}

.finance-money-box{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.finance-money-box label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    color:#fff;
}

.finance-money-box small{
    color:rgba(255,255,255,.45);
    font-size:13px;
}

.finance-money-input{
    position:relative;
    display:flex;
    align-items:center;
}

.finance-money-input .material-symbols-outlined{
    position:absolute;
    left:18px;
    color:rgba(255,255,255,.55);
    font-size:21px;
}

.finance-money-input input,
.finance-money-input select{
    width:100%;
    height:78px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    padding:0 22px 0 58px;
    color:#fff;
    font-size:19px;
    font-weight:700;
}

.finance-money-box.total input{
    border:1px solid rgba(223,255,0,.5);
    color:#dfff00;
    box-shadow:0 0 25px rgba(223,255,0,.08);
}

.finance-money-operator{
    display:flex;
    align-items:center;
    justify-content:center;
    height:78px;
    font-size:34px;
    font-weight:900;
    color:rgba(255,255,255,.45);
}

.finance-tooltip-trigger{
    cursor:pointer;
    font-size:18px;
    color:#dfff00;
}

@media(max-width:1200px){

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

    .finance-money-operator{
        display:none;
    }

}
.finance-form-row.three{
    display:grid;
    grid-template-columns:1fr 1fr .8fr;
    gap:22px;
}

.finance-form-row.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.finance-form-row.dates{
    display:grid;
    grid-template-columns:1fr 1fr 1.4fr;
    gap:22px;
    align-items:end;
}

.finance-form-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:30px 0 24px;
}

.finance-form-subtitle{
    color:#fff;
    font-size:22px;
    font-weight:900;
    margin:0 0 18px;
}

.finance-financial-row{
    display:grid;
    grid-template-columns:1.2fr 40px .85fr 40px 1.05fr;
    gap:18px;
    align-items:end;
}

.finance-money-box{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.finance-money-box label{
    display:flex;
    align-items:center;
    gap:8px;
    color:#f8fafc;
    font-size:16px;
    font-weight:900;
}

.finance-money-box small{
    color:rgba(255,255,255,.48);
    font-size:13px;
    font-weight:700;
}

.finance-money-input{
    position:relative;
    display:flex;
    align-items:center;
}

.finance-money-input > .material-symbols-outlined{
    position:absolute;
    left:18px;
    z-index:2;
    color:rgba(255,255,255,.6);
    font-size:22px;
}

.finance-money-input input,
.finance-money-input select{
    width:100%;
    height:72px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:#fff;
    padding:0 20px 0 56px;
    font-size:20px;
    font-weight:900;
    outline:none;
}

.finance-money-input select{
    appearance:auto;
}

.finance-money-box.total .finance-money-input input{
    border-color:rgba(223,255,0,.75);
    color:#dfff00;
    box-shadow:0 0 28px rgba(223,255,0,.08);
}

.finance-money-operator{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.55);
    font-size:34px;
    font-weight:950;
}

.finance-tooltip-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.finance-tooltip-trigger{
    color:#dfff00;
    font-size:20px;
    cursor:pointer;
}

.finance-tooltip-box{
    position:absolute;
    right:0;
    bottom:calc(100% + 12px);
    width:260px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(223,255,0,.75);
    background:#101827;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.2s ease;
    z-index:30;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.finance-tooltip-box::after{
    content:"";
    position:absolute;
    right:18px;
    bottom:-7px;
    width:12px;
    height:12px;
    background:#101827;
    border-right:1px solid rgba(223,255,0,.75);
    border-bottom:1px solid rgba(223,255,0,.75);
    transform:rotate(45deg);
}

.finance-tooltip-wrap:hover .finance-tooltip-box,
.finance-tooltip-wrap:focus-within .finance-tooltip-box,
.finance-tooltip-wrap.is-open .finance-tooltip-box{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.finance-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:18px;
    margin-top:34px;
}

@media(max-width:1200px){
    .finance-form-row.three,
    .finance-form-row.two,
    .finance-form-row.dates,
    .finance-financial-row{
        grid-template-columns:1fr;
    }

    .finance-money-operator{
        display:none;
    }
}
.finance-mini-loader{
    min-height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.finance-mini-loader span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#dfff00;
    animation:financeDots .9s infinite ease-in-out;
}

.finance-mini-loader span:nth-child(2){
    animation-delay:.15s;
}

.finance-mini-loader span:nth-child(3){
    animation-delay:.3s;
}

@keyframes financeDots{
    0%,100%{
        opacity:.35;
        transform:translateY(0);
    }

    50%{
        opacity:1;
        transform:translateY(-5px);
    }
}


.finance-edit-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.finance-edit-modal.is-open{
    display:flex;
}

.finance-edit-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.78);
    backdrop-filter:blur(10px);
}

.finance-edit-dialog{
    position:relative;
    width:min(1080px, 96vw);
    max-height:92vh;
    overflow:auto;
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.08), transparent 30%),
        linear-gradient(145deg,#111827,#070b14);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 40px 120px rgba(0,0,0,.6);
}

.finance-edit-close{
    position:absolute;
    top:22px;
    right:22px;
    width:42px;
    height:42px;
    border:0;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
}

.finance-edit-header{
    padding:34px 38px 22px;
}

.finance-edit-header h3{
    margin:0;
    font-size:34px;
    color:#fff;
}

.finance-edit-header p{
    margin:8px 0 0;
    color:rgba(255,255,255,.62);
    font-weight:700;
}

.finance-edit-body{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:30px;
    padding:0 38px 34px;
}

.finance-edit-left,
.finance-edit-right{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.finance-edit-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.finance-edit-two.compact{
    grid-template-columns:1fr .65fr;
}

.finance-edit-modal .form-group label{
    color:#d7dde8;
    font-weight:900;
    margin-bottom:8px;
}

.finance-edit-modal input,
.finance-edit-modal select,
.finance-edit-modal textarea{
    width:100%;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:#fff;
    padding:18px 18px;
    font-size:16px;
    font-weight:700;
    outline:none;
}

.finance-edit-modal textarea{
    resize:vertical;
    min-height:120px;
}

.finance-edit-summary{
    padding:24px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.1);
}

.finance-edit-summary h4{
    margin:0 0 18px;
    color:#fff;
    font-size:22px;
}

.finance-edit-summary-row,
.finance-edit-summary-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    color:rgba(255,255,255,.7);
}

.finance-edit-summary-row strong{
    color:#fff;
}

.finance-edit-summary-total{
    margin-top:12px;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:20px;
}

.finance-edit-summary-total span{
    color:#dfff00;
    font-weight:900;
}

.finance-edit-summary-total strong{
    color:#dfff00;
    font-size:30px;
}

.finance-edit-type label{
    display:block;
    color:#d7dde8;
    font-weight:900;
    margin-bottom:10px;
}

.finance-edit-type-buttons{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
}

.finance-edit-type-buttons button{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:#fff;
    padding:14px 10px;
    border-radius:16px;
    font-weight:900;
    cursor:pointer;
}

.finance-edit-type-buttons button.active{
    border-color:#ffc400;
    color:#ffc400;
}

.finance-edit-repeat{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.1);
}

.finance-edit-repeat strong{
    display:block;
    color:#fff;
}

.finance-edit-repeat small{
    color:rgba(255,255,255,.55);
}

.finance-edit-footer{
    display:flex;
    justify-content:flex-end;
    gap:16px;
    padding:24px 38px 34px;
    border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:900px){
    .finance-edit-body,
    .finance-edit-two,
    .finance-edit-two.compact{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   CATEGORY GRID
========================================================= */

.finance-category-card {
    overflow: hidden;
}

.finance-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.finance-category-item {
    position: relative;
    overflow: hidden;

    padding: 18px;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border: 1px solid rgba(255,255,255,.06);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.finance-category-item:hover {
    transform: translateY(-3px);

    border-color: rgba(223,255,0,.25);

    box-shadow:
        0 0 0 1px rgba(223,255,0,.08),
        0 12px 28px rgba(0,0,0,.35);
}

.finance-category-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.finance-category-icon {
    width: 46px;
    height: 46px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(223,255,0,.18),
            rgba(223,255,0,.08)
        );

    border: 1px solid rgba(223,255,0,.18);
}

.finance-category-icon span {
    color: #dfff00;
    font-size: 22px;
}

.finance-category-percent {
    font-size: 13px;
    font-weight: 700;
    color: #dfff00;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(223,255,0,.08);

    border: 1px solid rgba(223,255,0,.15);
}

.finance-category-item strong {
    display: block;

    font-size: 15px;
    font-weight: 700;

    color: #fff;

    margin-bottom: 10px;
}

.finance-category-price {
    font-size: 26px;
    font-weight: 800;

    line-height: 1;

    color: #fff;

    margin-bottom: 8px;
}

.finance-category-item small {
    display: block;

    font-size: 12px;
    color: rgba(255,255,255,.55);

    margin-bottom: 14px;
}

.finance-category-progress {
    position: relative;

    width: 100%;
    height: 7px;

    overflow: hidden;
    border-radius: 999px;

    background: rgba(255,255,255,.06);
}

.finance-category-progress span {
    position: absolute;
    inset: 0 auto 0 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #dfff00,
            #c8ff00
        );
}

.finance-category-total {
    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid rgba(223,255,0,.12);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.finance-category-total span {
    color: rgba(255,255,255,.6);
    font-size: 14px;
}

.finance-category-total strong {
    font-size: 32px;
    font-weight: 900;

    color: #dfff00;
}

/* =========================================================
   FIXED COMPACT
========================================================= */

.finance-fixed-compact-card .finance-fixed-list.compact {
    margin-top: 18px;
}

.finance-fixed-compact-card .finance-fixed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    border-bottom: 1px solid rgba(255,255,255,.05);
}

.finance-fixed-compact-card .finance-fixed-row:last-child {
    border-bottom: 0;
}

.finance-fixed-compact-card .finance-fixed-row span {
    font-size: 14px;
    color: rgba(255,255,255,.7);
}

.finance-fixed-compact-card .finance-fixed-row strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

/* =========================================================
   DISTRIBUTION CARD
========================================================= */

.finance-distribution-card .finance-distribution-chart {
    position: relative;

    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;
}

.finance-distribution-card canvas {
    max-width: 100%;
    max-height: 320px;
}

#expensesDistributionEmpty {
    position: absolute;
    inset: 0;

    display: none;
    place-items: center;
    text-align: center;

    border-radius: 20px;

    border: 1px dashed rgba(255,255,255,.08);

    background: rgba(255,255,255,.02);

    padding: 30px;
}

#expensesDistributionEmpty span {
    font-size: 46px;
    color: rgba(223,255,0,.45);

    margin-bottom: 10px;
}

#expensesDistributionEmpty strong {
    display: block;

    color: #fff;
    font-size: 17px;

    margin-bottom: 8px;
}

#expensesDistributionEmpty p {
    color: rgba(255,255,255,.55);
    font-size: 13px;

    max-width: 240px;
}

/* =========================================================
   PERIOD CHIP
========================================================= */

.finance-period-chip {
    padding: 7px 12px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    color: #dfff00;

    background: rgba(223,255,0,.08);

    border: 1px solid rgba(223,255,0,.16);
}

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

@media (max-width: 768px) {

    .finance-category-grid {
        grid-template-columns: 1fr;
    }

    .finance-category-price {
        font-size: 22px;
    }

    .finance-category-total strong {
        font-size: 24px;
    }

    .finance-distribution-card .finance-distribution-chart {
        min-height: 260px;
    }
}

.finance-top-tabs {
    display: flex;
    align-items: center;
    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 26px;
}

.finance-top-tabs button {

    position: relative;

    height: 52px;
    padding: 0 24px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    color: rgba(255,255,255,.65);

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.finance-top-tabs button:hover {

    transform: translateY(-2px);

    border-color: rgba(223,255,0,.18);

    color: #fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );
}

.finance-top-tabs button.active {

    color: #000;

    border-color: transparent;

    background:
        linear-gradient(
            180deg,
            #e6ff00,
            #dfff00
        );

    box-shadow:
        0 0 0 1px rgba(223,255,0,.12),
        0 10px 28px rgba(223,255,0,.22);
}

.finance-top-tabs button.active::before {

    content: '';

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.45),
            rgba(255,255,255,0)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    pointer-events: none;
}

/* MOBILE */

@media (max-width: 768px) {

    .finance-top-tabs {
        gap: 10px;
    }

    .finance-top-tabs button {

        height: 46px;

        padding: 0 18px;

        font-size: 13px;

        border-radius: 14px;
    }
}


.finance-top-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.finance-top-tabs button {

    width: auto !important;
    min-width: unset !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto !important;

    height: 52px;

    padding: 0 24px !important;

    border-radius: 18px !important;

    border: 1px solid rgba(255,255,255,.06) !important;

    background: rgba(255,255,255,.04) !important;

    color: rgba(255,255,255,.72) !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    white-space: nowrap;

    cursor: pointer;

    transition: .25s ease;
}

.finance-top-tabs button:hover {

    transform: translateY(-2px);

    border-color: rgba(223,255,0,.18) !important;

    color: #fff !important;

    background: rgba(255,255,255,.08) !important;
}

.finance-top-tabs button.active {

    background: #dfff00 !important;

    color: #000 !important;

    border-color: transparent !important;

    box-shadow:
        0 10px 30px rgba(223,255,0,.22);
}

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

.finance-tab-panel.active {
    display: block;
}

.finance-module-placeholder {
    min-height: 360px;
    padding: 42px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.08), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.finance-module-placeholder h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}

.finance-module-placeholder p {
    margin: 0;
    max-width: 680px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.finance-expenses-manager {
    padding: 28px;
    border-radius: 28px;
}

.finance-expenses-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.finance-expenses-head h3 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.finance-expenses-head p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.55);
    font-weight: 700;
}

.finance-expenses-filters {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
}

.finance-search-box {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
}

.finance-search-box input,
.finance-expenses-filters select {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: #fff;
    padding: 0 14px;
    font-weight: 700;
}

.finance-search-box input {
    border: 0;
    background: transparent;
    padding: 0;
}

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

.finance-expenses-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
}

.finance-expenses-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.finance-expenses-table th {
    padding: 16px 14px;
    text-align: left;
    color: rgba(255,255,255,.6);
    font-size: 12px;
    font-weight: 900;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.finance-expenses-table td {
    padding: 15px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.finance-expenses-table tr:last-child td {
    border-bottom: 0;
}

.finance-expense-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    color: #9dff7a;
    background: rgba(157,255,122,.12);
    font-size: 11px;
    font-weight: 900;
}

.finance-expense-table-actions {
    display: flex;
    gap: 8px;
}

.finance-expense-table-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #ff8585;
    cursor: pointer;
}

.finance-expense-table-actions button:first-child {
    color: #ffc400;
}

.finance-expenses-summary {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    position: sticky;
    top: 18px;
    height: fit-content;
}

.finance-expenses-summary h4 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.finance-expenses-summary p {
    margin: 4px 0 16px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    font-weight: 700;
}

.finance-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 700;
}

.finance-summary-row strong {
    color: #fff;
}

.finance-summary-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 14px 0;
}

.finance-expenses-summary h5 {
    color: #fff;
    margin: 0 0 12px;
    font-size: 14px;
}

.finance-summary-category {
    margin-bottom: 12px;
}

.finance-summary-category-top {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}

.finance-summary-progress {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.finance-summary-progress span {
    display: block;
    height: 100%;
    background: #dfff00;
    border-radius: inherit;
}

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

    .finance-expenses-summary {
        position: static;
    }

    .finance-expenses-filters {
        grid-template-columns: 1fr;
    }
}

.finance-expenses-table-wrap {
    overflow-x: visible;
}

.finance-expenses-table {
    min-width: 0;
    table-layout: fixed;
}

.finance-expenses-table th,
.finance-expenses-table td {
    padding: 14px 10px;
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
}

.finance-expenses-table th:nth-child(4),
.finance-expenses-table td:nth-child(4),
.finance-expenses-table th:nth-child(6),
.finance-expenses-table td:nth-child(6),
.finance-expenses-table th:nth-child(7),
.finance-expenses-table td:nth-child(7) {
    display: none;
}

.finance-expenses-table th:nth-child(1),
.finance-expenses-table td:nth-child(1) {
    width: 105px;
}

.finance-expenses-table th:nth-child(2),
.finance-expenses-table td:nth-child(2) {
    width: 150px;
}

.finance-expenses-table th:nth-child(3),
.finance-expenses-table td:nth-child(3) {
    width: 95px;
}

.finance-expenses-table th:nth-child(8),
.finance-expenses-table td:nth-child(8),
.finance-expenses-table th:nth-child(9),
.finance-expenses-table td:nth-child(9) {
    width: 82px;
}

.finance-expenses-table th:nth-child(10),
.finance-expenses-table td:nth-child(10) {
    width: 92px;
}

.finance-expenses-table th:nth-child(11),
.finance-expenses-table td:nth-child(11) {
    width: 95px;
}

.finance-expense-table-actions {
    justify-content: flex-end;
}

.finance-expense-table-actions button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}


.finance-expenses-layout {
    grid-template-columns: minmax(0, 1fr) 240px;
}

/*
|--------------------------------------------------------------------------
| ADD EXPENSE PREMIUM
|--------------------------------------------------------------------------
*/

.finance-add-expense-premium{
    padding:28px;
    overflow:hidden;
}

.finance-expense-premium-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:26px;
    align-items:start;
}

.finance-expense-premium-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/*
|--------------------------------------------------------------------------
| STEPS
|--------------------------------------------------------------------------
*/

.finance-expense-step{
    display:flex;
    align-items:center;
    gap:14px;
}

.finance-expense-step span{
    width:36px;
    height:36px;
    border-radius:12px;
    background:linear-gradient(135deg,#dfff00,#b8ff00);
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:15px;
    flex-shrink:0;
}

.finance-expense-step h4{
    margin:0;
    color:#fff;
    font-size:18px;
    font-weight:800;
}

.finance-expense-step p{
    margin:2px 0 0;
    color:rgba(255,255,255,.55);
    font-size:13px;
}

/*
|--------------------------------------------------------------------------
| TYPE CARDS
|--------------------------------------------------------------------------
*/

.finance-expense-type-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.finance-expense-type-cards button{
    position:relative;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(
        180deg,
        rgba(20,25,40,.95),
        rgba(10,14,24,.95)
    );
    border-radius:18px;
    padding:18px;
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:.25s ease;
}

.finance-expense-type-cards button:hover{
    transform:translateY(-2px);
    border-color:rgba(223,255,0,.35);
}

.finance-expense-type-cards button.active{
    border-color:#dfff00;
    box-shadow:
        0 0 0 1px rgba(223,255,0,.25),
        0 10px 30px rgba(223,255,0,.12);
}

.finance-expense-type-cards button .material-symbols-outlined{
    font-size:28px;
    color:#dfff00;
}

.finance-expense-type-cards button strong{
    color:#fff;
    font-size:15px;
    font-weight:800;
}

.finance-expense-type-cards button small{
    color:rgba(255,255,255,.5);
    line-height:1.4;
    font-size:12px;
}

/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.finance-form-divider{
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );
}

.finance-form-row{
    display:grid;
    gap:16px;
}

.finance-form-row.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

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

.finance-form-row.four{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.finance-add-expense-premium .form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.finance-add-expense-premium .form-group label{
    font-size:13px;
    color:rgba(255,255,255,.65);
    font-weight:700;
}

.finance-add-expense-premium input,
.finance-add-expense-premium select{
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:#fff;
    padding:0 18px;
    font-size:14px;
    transition:.2s ease;
}

.finance-add-expense-premium input:focus,
.finance-add-expense-premium select:focus{
    outline:none;
    border-color:#dfff00;
    box-shadow:0 0 0 4px rgba(223,255,0,.08);
}

/*
|--------------------------------------------------------------------------
| MONEY
|--------------------------------------------------------------------------
*/

.finance-money-premium-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr 1.2fr;
    gap:18px;
}

.finance-money-box{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:20px;
}

.finance-money-box.total{
    border-color:rgba(223,255,0,.35);
    box-shadow:0 10px 30px rgba(223,255,0,.08);
}

.finance-money-box label{
    display:block;
    margin-bottom:12px;
    font-size:13px;
    color:rgba(255,255,255,.7);
    font-weight:700;
}

.finance-money-input{
    display:flex;
    align-items:center;
    gap:12px;
}

.finance-money-input .material-symbols-outlined{
    color:#dfff00;
    font-size:22px;
}

.finance-money-input input,
.finance-money-input select{
    flex:1;
    background:transparent;
    border:none;
    color:#fff;
    font-size:24px;
    font-weight:800;
    padding:0;
    height:auto;
}

.finance-money-input input:focus,
.finance-money-input select:focus{
    box-shadow:none;
}

.finance-money-box small{
    display:block;
    margin-top:10px;
    color:rgba(255,255,255,.45);
    font-size:12px;
}

/*
|--------------------------------------------------------------------------
| MORE DETAILS
|--------------------------------------------------------------------------
*/

.finance-more-details-btn{
    height:52px;
    border-radius:16px;
    border:1px dashed rgba(223,255,0,.35);
    background:rgba(223,255,0,.04);
    color:#dfff00;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    transition:.2s ease;
    font-weight:700;
}

.finance-more-details-btn:hover{
    background:rgba(223,255,0,.08);
}

.finance-extra-details{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:24px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.finance-expense-live-summary{
    position:sticky;
    top:24px;
    border-radius:28px;
    padding:24px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right,
            rgba(223,255,0,.12),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(18,24,38,.98),
            rgba(8,12,20,.98)
        );
}

.finance-live-summary-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
}

.finance-live-summary-header .material-symbols-outlined{
    width:52px;
    height:52px;
    border-radius:18px;
    background:rgba(223,255,0,.12);
    color:#dfff00;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.finance-live-summary-header h4{
    margin:0;
    color:#fff;
    font-size:18px;
    font-weight:800;
}

.finance-live-summary-header p{
    margin:4px 0 0;
    color:rgba(255,255,255,.5);
    font-size:13px;
}

.finance-live-total{
    padding:22px;
    border-radius:22px;
    background:rgba(223,255,0,.06);
    border:1px solid rgba(223,255,0,.2);
    margin-bottom:22px;
}

.finance-live-total span{
    display:block;
    color:rgba(255,255,255,.6);
    margin-bottom:8px;
    font-size:13px;
}

.finance-live-total strong{
    color:#dfff00;
    font-size:38px;
    font-weight:900;
}

.finance-live-summary-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:24px;
}

.finance-live-summary-list div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.finance-live-summary-list span{
    color:rgba(255,255,255,.55);
    font-size:13px;
}

.finance-live-summary-list strong{
    color:#fff;
    font-size:14px;
    font-weight:800;
}

/*
|--------------------------------------------------------------------------
| REPEAT BOX
|--------------------------------------------------------------------------
*/

.finance-repeat-box.premium{
    padding:18px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.finance-repeat-box.premium strong{
    display:block;
    color:#fff;
    margin-bottom:4px;
}

.finance-repeat-box.premium small{
    color:rgba(255,255,255,.5);
    line-height:1.5;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.finance-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:14px;
    margin-top:10px;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px){

    .finance-expense-premium-layout{
        grid-template-columns:1fr;
    }

    .finance-expense-live-summary{
        position:relative;
        top:auto;
    }
}

@media (max-width: 768px){

    .finance-expense-type-cards{
        grid-template-columns:1fr;
    }

    .finance-money-premium-grid{
        grid-template-columns:1fr;
    }

    .finance-form-row.two,
    .finance-form-row.three,
    .finance-form-row.four{
        grid-template-columns:1fr;
    }

    .finance-live-total strong{
        font-size:30px;
    }
}


/*
|--------------------------------------------------------------------------
| BOTTOM SUMMARY
|--------------------------------------------------------------------------
*/

.finance-expense-bottom-summary{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin-top:10px;
}

.finance-bottom-summary-card{
    border-radius:22px;
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );
}

.finance-bottom-summary-card.total{
    border-color:rgba(223,255,0,.35);
    background:
        linear-gradient(
            180deg,
            rgba(223,255,0,.08),
            rgba(223,255,0,.03)
        );
}

.finance-bottom-summary-card span{
    display:block;
    margin-bottom:10px;
    color:rgba(255,255,255,.55);
    font-size:13px;
}

.finance-bottom-summary-card strong{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.finance-bottom-summary-card.total strong{
    color:#dfff00;
    font-size:28px;
}

@media (max-width: 1100px){

    .finance-expense-bottom-summary{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 640px){

    .finance-expense-bottom-summary{
        grid-template-columns:1fr;
    }
}

/*
|--------------------------------------------------------------------------
| PREMIUM EXPENSE FORM — OPTION 5
|--------------------------------------------------------------------------
*/

.finance-expense-premium-layout{
    display:block;
}

.finance-add-expense-premium{
    padding:42px;
    border-radius:32px;
    overflow:hidden;
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.finance-add-expense-premium .finance-card-header{
    margin-bottom:34px;
}

.finance-add-expense-premium .finance-card-header h3{
    font-size:36px;
    font-weight:900;
    color:#fff;
    margin:0 0 8px;
    letter-spacing:-1px;
}

.finance-add-expense-premium .finance-card-header p{
    color:rgba(255,255,255,.55);
    font-size:16px;
    margin:0;
}

/*
|--------------------------------------------------------------------------
| STEPS
|--------------------------------------------------------------------------
*/

.finance-expense-step{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.finance-expense-step span{
    width:52px;
    height:52px;
    border-radius:18px;
    background:#dfff00;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:22px;
    flex-shrink:0;
}

.finance-expense-step h4{
    margin:0;
    color:#fff;
    font-size:30px;
    font-weight:900;
    line-height:1;
}

.finance-expense-step p{
    margin:6px 0 0;
    color:rgba(255,255,255,.55);
    font-size:15px;
}

/*
|--------------------------------------------------------------------------
| TYPE CARDS
|--------------------------------------------------------------------------
*/

.finance-expense-type-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-bottom:40px;
}

.finance-expense-type-cards button{
    min-height:190px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(20,25,40,.96),
            rgba(10,14,24,.96)
        );
    padding:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
    cursor:pointer;
    transition:.25s ease;
    position:relative;
}

.finance-expense-type-cards button:hover{
    transform:translateY(-4px);
    border-color:rgba(223,255,0,.35);
}

.finance-expense-type-cards button.active{
    border:2px solid #dfff00;
    box-shadow:
        0 0 0 1px rgba(223,255,0,.18),
        0 20px 50px rgba(223,255,0,.08);
}

.finance-expense-type-cards button .material-symbols-outlined{
    font-size:54px;
    color:#dfff00;
}

.finance-expense-type-cards button strong{
    color:#fff;
    font-size:24px;
    font-weight:900;
}

.finance-expense-type-cards button small{
    color:rgba(255,255,255,.55);
    font-size:15px;
    line-height:1.5;
}

/*
|--------------------------------------------------------------------------
| DIVIDERS
|--------------------------------------------------------------------------
*/

.finance-form-divider{
    height:1px;
    margin:38px 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}

/*
|--------------------------------------------------------------------------
| FORM GRID
|--------------------------------------------------------------------------
*/

.finance-form-row{
    display:grid;
    gap:28px;
}

.finance-form-row.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

.finance-add-expense-premium .form-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.finance-add-expense-premium .form-group label{
    color:rgba(255,255,255,.75);
    font-size:15px;
    font-weight:800;
}

.finance-add-expense-premium input,
.finance-add-expense-premium select{
    height:72px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:#fff;
    padding:0 22px;
    font-size:17px;
    transition:.22s ease;
}

.finance-add-expense-premium input:focus,
.finance-add-expense-premium select:focus{
    outline:none;
    border-color:#dfff00;
    box-shadow:
        0 0 0 5px rgba(223,255,0,.08);
}

.finance-add-expense-premium input::placeholder{
    color:rgba(255,255,255,.35);
}

/*
|--------------------------------------------------------------------------
| MONEY BLOCKS
|--------------------------------------------------------------------------
*/

.finance-money-premium-grid{
    display:grid;
    grid-template-columns:1fr 60px 1fr 60px 1fr;
    gap:28px;
    align-items:center;
}

.finance-money-premium-grid::before{
    content:"×";
    grid-column:2;
    text-align:center;
    color:rgba(255,255,255,.6);
    font-size:42px;
    font-weight:900;
}

.finance-money-premium-grid::after{
    content:"=";
    grid-column:4;
    text-align:center;
    color:rgba(255,255,255,.6);
    font-size:42px;
    font-weight:900;
}

.finance-money-premium-grid .finance-money-box:nth-child(1){
    grid-column:1;
}

.finance-money-premium-grid .finance-money-box:nth-child(2){
    grid-column:3;
}

.finance-money-premium-grid .finance-money-box:nth-child(3){
    grid-column:5;
}

.finance-money-box{
    min-height:190px;
    border-radius:30px;
    padding:28px;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.finance-money-box.total{
    border:2px solid rgba(223,255,0,.55);
    box-shadow:
        0 20px 50px rgba(223,255,0,.08);
}

.finance-money-box label{
    color:rgba(255,255,255,.7);
    font-size:15px;
    margin-bottom:18px;
    font-weight:800;
}

.finance-money-input{
    display:flex;
    align-items:center;
    gap:18px;
}

.finance-money-input .material-symbols-outlined{
    color:#dfff00;
    font-size:34px;
}

.finance-money-input input,
.finance-money-input select{
    background:transparent;
    border:none;
    padding:0;
    height:auto;
    font-size:46px;
    font-weight:900;
    color:#fff;
}

.finance-money-input input:focus,
.finance-money-input select:focus{
    box-shadow:none;
}

.finance-money-box small{
    margin-top:16px;
    color:rgba(255,255,255,.45);
    font-size:13px;
}

/*
|--------------------------------------------------------------------------
| EXTRA DETAILS BUTTON
|--------------------------------------------------------------------------
*/

.finance-more-details-btn{
    margin-top:24px;
    height:70px;
    border-radius:22px;
    border:1px dashed rgba(223,255,0,.4);
    background:rgba(223,255,0,.04);
    color:#dfff00;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.finance-more-details-btn:hover{
    background:rgba(223,255,0,.08);
}

.finance-more-details-btn .material-symbols-outlined{
    font-size:28px;
}

/*
|--------------------------------------------------------------------------
| EXTRA DETAILS PANEL
|--------------------------------------------------------------------------
*/

.finance-extra-details{
    margin-top:24px;
    border-radius:28px;
    padding:28px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
}

/*
|--------------------------------------------------------------------------
| SUMMARY
|--------------------------------------------------------------------------
*/

.finance-expense-bottom-summary{
    display:grid;
    grid-template-columns:260px repeat(4,1fr);
    gap:20px;
    margin-top:36px;
}

.finance-bottom-summary-card{
    min-height:140px;
    border-radius:28px;
    padding:26px;
    border:1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.finance-bottom-summary-card.total{
    border:2px solid rgba(223,255,0,.45);
    background:
        linear-gradient(
            180deg,
            rgba(223,255,0,.08),
            rgba(223,255,0,.03)
        );
}

.finance-bottom-summary-card span{
    display:block;
    margin-bottom:12px;
    color:rgba(255,255,255,.55);
    font-size:14px;
}

.finance-bottom-summary-card strong{
    color:#fff;
    font-size:28px;
    font-weight:900;
    line-height:1.2;
}

.finance-bottom-summary-card.total strong{
    color:#dfff00;
    font-size:52px;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.finance-form-actions{
    display:flex;
    justify-content:center;
    gap:24px;
    margin-top:38px;
}

.finance-form-actions .outline-btn,
.finance-form-actions .book-btn{
    min-width:240px;
    height:70px;
    border-radius:22px;
    font-size:17px;
    font-weight:800;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .finance-money-premium-grid{
        grid-template-columns:1fr;
    }

    .finance-money-premium-grid::before,
    .finance-money-premium-grid::after{
        display:none;
    }

    .finance-money-premium-grid .finance-money-box:nth-child(1),
    .finance-money-premium-grid .finance-money-box:nth-child(2),
    .finance-money-premium-grid .finance-money-box:nth-child(3){
        grid-column:auto;
    }

    .finance-expense-bottom-summary{
        grid-template-columns:repeat(2,1fr);
    }

    .finance-bottom-summary-card.total{
        grid-column:1 / -1;
    }
}

@media(max-width:768px){

    .finance-add-expense-premium{
        padding:24px;
    }

    .finance-expense-type-cards,
    .finance-form-row.two,
    .finance-expense-bottom-summary{
        grid-template-columns:1fr;
    }

    .finance-money-input input,
    .finance-money-input select{
        font-size:34px;
    }

    .finance-bottom-summary-card.total strong{
        font-size:40px;
    }

    .finance-form-actions{
        flex-direction:column;
    }

    .finance-form-actions .outline-btn,
    .finance-form-actions .book-btn{
        width:100%;
    }
}



/* COMPACTAR FORMULARIO AÑADIR GASTO */

.finance-add-expense-premium{
    padding:28px !important;
}

.finance-add-expense-premium .finance-card-header{
    margin-bottom:22px !important;
}

.finance-add-expense-premium .finance-card-header h3{
    font-size:26px !important;
}

.finance-add-expense-premium .finance-card-header p{
    font-size:13px !important;
}

.finance-expense-step{
    gap:12px !important;
    margin-bottom:16px !important;
}

.finance-expense-step span{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:16px !important;
}

.finance-expense-step h4{
    font-size:22px !important;
}

.finance-expense-step p{
    font-size:12px !important;
    margin-top:2px !important;
}

.finance-expense-type-cards{
    gap:16px !important;
    margin-bottom:24px !important;
}

.finance-expense-type-cards button{
    min-height:120px !important;
    border-radius:20px !important;
    padding:18px !important;
    gap:8px !important;
}

.finance-expense-type-cards button .material-symbols-outlined{
    font-size:20px !important;
}

.finance-expense-type-cards button strong{
    font-size:17px !important;
}

.finance-expense-type-cards button small{
    font-size:12px !important;
}

.finance-form-divider{
    margin:24px 0 !important;
}

.finance-form-row{
    gap:18px !important;
}

.finance-add-expense-premium .form-group label{
    font-size:12px !important;
}

.finance-add-expense-premium input,
.finance-add-expense-premium select{
    height:48px !important;
    border-radius:14px !important;
    font-size:13px !important;
    padding:0 14px !important;
}

.finance-money-premium-grid{
    gap:16px !important;
    grid-template-columns:1fr 34px 1fr 34px 1fr !important;
}

.finance-money-premium-grid::before,
.finance-money-premium-grid::after{
    font-size:26px !important;
}

.finance-money-box{
    min-height:115px !important;
    border-radius:18px !important;
    padding:16px !important;
}

.finance-money-box label{
    font-size:12px !important;
    margin-bottom:10px !important;
}

.finance-money-input .material-symbols-outlined{
    font-size:22px !important;
}

.finance-money-input input,
.finance-money-input select{
    font-size:22px !important;
}

.finance-money-box small{
    font-size:11px !important;
    margin-top:8px !important;
}

.finance-more-details-btn{
    height:46px !important;
    border-radius:14px !important;
    font-size:13px !important;
    margin-top:18px !important;
}

.finance-expense-bottom-summary{
    grid-template-columns:180px repeat(4,1fr) !important;
    gap:12px !important;
    margin-top:22px !important;
}

.finance-bottom-summary-card{
    min-height:86px !important;
    border-radius:16px !important;
    padding:14px !important;
}

.finance-bottom-summary-card span{
    font-size:11px !important;
    margin-bottom:6px !important;
}

.finance-bottom-summary-card strong{
    font-size:16px !important;
}

.finance-bottom-summary-card.total strong{
    font-size:26px !important;
}

.finance-form-actions{
    margin-top:22px !important;
    gap:14px !important;
}

.finance-form-actions .outline-btn,
.finance-form-actions .book-btn{
    min-width:150px !important;
    height:46px !important;
    border-radius:14px !important;
    font-size:13px !important;
}



.finance-money-clean-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.finance-money-clean-box{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    border-radius:18px;
    padding:18px;
}

.finance-money-clean-box.total{
    border-color:#dfff00;
    background:rgba(223,255,0,.04);
}

.finance-money-clean-box label{
    display:block;
    color:rgba(255,255,255,.75);
    font-size:13px;
    font-weight:800;
    margin-bottom:10px;
}

.finance-money-clean-box input,
.finance-money-clean-box select{
    width:100%;
    height:48px !important;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    color:#fff;
    font-size:26px !important;
    font-weight:900;
}

.finance-money-clean-box small{
    display:block;
    color:rgba(255,255,255,.45);
    font-size:11px;
    margin-top:8px;
}

.finance-more-details-btn{
    width:100%;
    height:48px !important;
    border-radius:14px !important;
    margin-top:18px !important;
}

/*
|--------------------------------------------------------------------------
| INFO TOOLTIP
|--------------------------------------------------------------------------
*/

.finance-info-tooltip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finance-info-tooltip .material-symbols-outlined {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    color: rgba(223,255,0,.95);

    background: rgba(223,255,0,.08);

    border: 1px solid rgba(223,255,0,.14);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.finance-info-tooltip:hover .material-symbols-outlined {
    background: rgba(223,255,0,.14);
    border-color: rgba(223,255,0,.35);
    transform: translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| TOOLTIP BOX
|--------------------------------------------------------------------------
*/

.finance-info-tooltip-box {
    position: absolute;

    top: calc(100% + 14px);
    right: 0;

    width: 260px;

    padding: 14px 16px;

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(14,18,32,.98),
            rgba(7,10,20,.98)
        );

    border: 1px solid rgba(223,255,0,.16);

    box-shadow:
        0 20px 60px rgba(0,0,0,.55);

    color: rgba(255,255,255,.82);

    font-size: 13px;
    line-height: 1.6;

    z-index: 50;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px)
        scale(.96);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

/*
|--------------------------------------------------------------------------
| TOOLTIP ARROW
|--------------------------------------------------------------------------
*/

.finance-info-tooltip-box::before {
    content: '';

    position: absolute;

    top: -7px;
    right: 16px;

    width: 12px;
    height: 12px;

    background: #0d1324;

    border-left: 1px solid rgba(223,255,0,.16);
    border-top: 1px solid rgba(223,255,0,.16);

    transform: rotate(45deg);
}

/*
|--------------------------------------------------------------------------
| SHOW
|--------------------------------------------------------------------------
*/

.finance-info-tooltip:hover .finance-info-tooltip-box,
.finance-info-tooltip.active .finance-info-tooltip-box {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

/* FIX TOOLTIPS DENTRO DE TARJETAS DE TIPO DE GASTO */

.finance-expense-type-cards button{
    position:relative;
    overflow:visible !important;
}

.finance-expense-type-cards .finance-box-tooltip{
    position:absolute;
    top:14px;
    right:14px;
    z-index:20;
}

.finance-expense-type-cards .finance-box-tooltip > .material-symbols-outlined{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#dfff00;
    background:rgba(223,255,0,.08);
    border:1px solid rgba(223,255,0,.25);
}

.finance-expense-type-cards .finance-box-tooltip-content{
    position:absolute;
    top:36px;
    right:0;
    width:230px;
    padding:12px 14px;
    border-radius:14px;
    background:#0b1020;
    border:1px solid rgba(223,255,0,.22);
    box-shadow:0 20px 45px rgba(0,0,0,.55);
    color:#fff !important;
    font-size:12px;
    line-height:1.45;
    text-align:left;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    pointer-events:none;
}

.finance-expense-type-cards .finance-box-tooltip:hover .finance-box-tooltip-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Evita que el texto del tooltip herede estilos raros del botón */
.finance-expense-type-cards .finance-box-tooltip-content *{
    color:#fff !important;
}

/* Ajuste para que el icono principal de la tarjeta no se confunda con el info */
.finance-expense-type-cards button > .material-symbols-outlined:not(.finance-box-tooltip .material-symbols-outlined){
    margin-top:18px;
}

/* UNIFICAR TODOS LOS TOOLTIP INFO FINANCE */

.finance-info-tooltip,
.finance-box-tooltip{
    position:absolute;
    top:0px;
    right:18px;
    z-index:50;
    width:34px;
    height:34px;
}

.finance-info-tooltip > .material-symbols-outlined,
.finance-box-tooltip > .material-symbols-outlined{
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:17px !important;
    color:#dfff00 !important;
    background:rgba(223,255,0,.12) !important;
    border:1px solid rgba(223,255,0,.35) !important;
    box-shadow:0 0 0 1px rgba(223,255,0,.06), 0 8px 22px rgba(0,0,0,.28) !important;
    cursor:pointer;
}

.finance-info-tooltip-box,
.finance-box-tooltip-content{
    position:absolute !important;
    top:48px !important;
    right:0 !important;
    width:260px !important;
    padding:16px 18px !important;
    border-radius:18px !important;
    background:#090e1b !important;
    border:1px solid rgba(223,255,0,.22) !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.55 !important;
    text-align:left !important;
    box-shadow:0 22px 55px rgba(0,0,0,.55) !important;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    pointer-events:none;
    transition:.2s ease;
}

.finance-info-tooltip-box::before,
.finance-box-tooltip-content::before{
    content:"";
    position:absolute;
    top:-7px;
    right:18px;
    width:12px;
    height:12px;
    background:#090e1b;
    border-left:1px solid rgba(223,255,0,.22);
    border-top:1px solid rgba(223,255,0,.22);
    transform:rotate(45deg);
}

.finance-info-tooltip:hover .finance-info-tooltip-box,
.finance-info-tooltip.active .finance-info-tooltip-box,
.finance-box-tooltip:hover .finance-box-tooltip-content,
.finance-box-tooltip.active .finance-box-tooltip-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Para que las cards permitan que el tooltip sobresalga */
.finance-expense-type-cards button,
.finance-money-clean-box,
.finance-add-expense-card,
.finance-add-expense-premium,
.form-group{
    position:relative;
    overflow:visible !important;
}

/* Evita que el tooltip se mezcle con el texto de la card */
.finance-box-tooltip-content,
.finance-info-tooltip-box{
    font-weight:600 !important;
    letter-spacing:0 !important;
}

.finance-box-tooltip-content *,
.finance-info-tooltip-box *{
    color:#fff !important;
}

/* ICONO INFO SIMPLE COMO FOTO 1 */

.finance-info-tooltip > .material-symbols-outlined,
.finance-box-tooltip > .material-symbols-outlined{
    width:auto !important;
    height:auto !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;

    font-size:34px !important;
    color:#dfff00 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    transition:.18s ease;
}

/* HOVER */

.finance-info-tooltip:hover > .material-symbols-outlined,
.finance-box-tooltip:hover > .material-symbols-outlined{
    transform:scale(1.08);
    opacity:1;
}

/* POSICIÓN */

.finance-info-tooltip,
.finance-box-tooltip{
    position:absolute;
    top:18px;
    right:18px;
    z-index:50;
}

/* TOOLTIP */

.finance-info-tooltip-box,
.finance-box-tooltip-content{
    position:absolute !important;
    top:48px !important;
    right:0 !important;

    width:260px;
    padding:16px 18px;

    border-radius:18px;

    background:#090e1b;
    border:1px solid rgba(223,255,0,.18);

    color:#fff !important;
    font-size:13px;
    line-height:1.55;
    text-align:left;

    box-shadow:0 20px 50px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);

    transition:.2s ease;

    pointer-events:none;
}

/* PUNTA */

.finance-info-tooltip-box::before,
.finance-box-tooltip-content::before{
    content:"";

    position:absolute;
    top:-7px;
    right:18px;

    width:12px;
    height:12px;

    background:#090e1b;

    border-left:1px solid rgba(223,255,0,.18);
    border-top:1px solid rgba(223,255,0,.18);

    transform:rotate(45deg);
}

/* SHOW */

.finance-info-tooltip:hover .finance-info-tooltip-box,
.finance-box-tooltip:hover .finance-box-tooltip-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* FIX TOOLTIP EN INPUTS / SELECTS */

.finance-form-row .form-group{
    position: relative;
}

.finance-form-row .form-group .finance-box-tooltip{
    top: 50px !important;
    right: 16px !important;
    width: auto !important;
    height: auto !important;
}

/* Icono más pequeño dentro de inputs */
.finance-form-row .form-group .finance-box-tooltip > .material-symbols-outlined{
    font-size: 24px !important;
}

/* Deja espacio al icono dentro de inputs/selects */
.finance-form-row .form-group input,
.finance-form-row .form-group select{
    padding-right: 54px !important;
}

/* Tooltip desplegado en inputs */
.finance-form-row .form-group .finance-box-tooltip-content{
    top: 36px !important;
    right: 0 !important;
}

/* En las cards grandes se mantiene como está */
.finance-expense-type-cards .finance-box-tooltip,
.finance-money-clean-box .finance-box-tooltip{
    top: 18px !important;
    right: 18px !important;
}

/* En las cajas de importe no añadimos padding extra */
.finance-money-clean-box input,
.finance-money-clean-box select{
    padding-right: 0 !important;
}


.finance-expenses-advanced-filters{
    display:grid;
    grid-template-columns:1fr 1fr auto auto;
    gap:14px;
    align-items:end;
    margin:18px 0 22px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.08);
}

.finance-expenses-advanced-filters .form-group{
    margin:0;
}

.finance-expenses-advanced-filters input{
    height:48px;
}

/* TOM SELECT / YOCUTZ PREMIUM SELECTS */

.ts-wrapper{
    width:100%;
    min-width:0;
}

.ts-control{
    min-height:54px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:#111827 !important;
    color:#fff !important;
    padding:0 44px 0 16px !important;
    box-shadow:none !important;
    font-weight:800 !important;
}

.ts-control input{
    color:#fff !important;
}

.ts-control .item{
    color:#fff !important;
}

.ts-dropdown{
    background:#0b1020 !important;
    border:1px solid rgba(223,255,0,.28) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
    color:#fff !important;
    margin-top:8px !important;
    z-index:99999 !important;
}

.ts-dropdown .option{
    padding:12px 16px !important;
    color:#fff !important;
    background:transparent !important;
    font-weight:700 !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover{
    background:rgba(223,255,0,.12) !important;
    color:#dfff00 !important;
}

.ts-dropdown .optgroup-header{
    padding:12px 16px 8px !important;
    color:#dfff00 !important;
    background:#080d18 !important;
    font-size:12px !important;
    font-weight:900 !important;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.ts-wrapper.single .ts-control:after{
    border-color:#fff transparent transparent transparent !important;
    right:18px !important;
}

.ts-wrapper.focus .ts-control{
    border-color:#dfff00 !important;
    box-shadow:0 0 0 3px rgba(223,255,0,.12) !important;
}

.ts-wrapper.disabled .ts-control{
    opacity:.55;
    cursor:not-allowed;
}

.yc-select-option,
.yc-select-item{
    color:inherit;
}

/* FIX TOM SELECT EN FILTROS FINANCE */

.finance-expenses-filters .ts-control{
    height:54px !important;
    min-height:54px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 44px 0 18px !important;
}

.finance-expenses-filters .ts-control .item,
.finance-expenses-filters .ts-control input{
    color:#fff !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1 !important;
}

.finance-expenses-filters .ts-wrapper.single .ts-control:after{
    top:50% !important;
    transform:translateY(-35%) !important;
}

/* Placeholder / texto inicial más visible */
.ts-control input::placeholder{
    color:rgba(255,255,255,.72) !important;
    opacity:1 !important;
}

.ts-control .item[data-value=""]{
    color:rgba(255,255,255,.85) !important;
}

/* Dropdown más alineado y sin look raro */
.ts-dropdown{
    padding:8px !important;
}

.ts-dropdown .option{
    border-radius:10px !important;
    margin-bottom:3px !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover{
    background:rgba(223,255,0,.14) !important;
    color:#dfff00 !important;
}

/* Lupa del buscador principal */
.finance-search-box .material-symbols-outlined{
    color:rgba(255,255,255,.55) !important;
}

.finance-search-box input::placeholder{
    color:rgba(255,255,255,.55) !important;
}

/* Placeholder visible */
.finance-expenses-filters .ts-control input{
    color:#fff !important;
}

.finance-expenses-filters .ts-control input::placeholder{
    color:rgba(255,255,255,.55) !important;
    opacity:1 !important;
    font-weight:700 !important;
}

/* Flecha dropdown */
.finance-expenses-filters .ts-wrapper.single .ts-control::after{
    content:'' !important;
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    width:8px !important;
    height:8px !important;
    border-right:2px solid rgba(255,255,255,.7) !important;
    border-bottom:2px solid rgba(255,255,255,.7) !important;
    transform:translateY(-70%) rotate(45deg) !important;
    pointer-events:none !important;
}

/* TOM SELECT - APPLE / IOS STYLE YOCUTZ */

.ts-dropdown{
    background:#0b1020 !important;
    border:1px solid rgba(223,255,0,.22) !important;
    border-radius:18px !important;
    padding:14px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
    overflow:hidden !important;
}

.ts-dropdown-content{
    max-height:260px !important;
    padding-right:8px !important;
}

.ts-dropdown .optgroup{
    padding:0 0 14px !important;
    margin-bottom:14px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.ts-dropdown .optgroup:last-child{
    border-bottom:none !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.ts-dropdown .optgroup-header{
    padding:0 10px 8px !important;
    background:transparent !important;
    color:rgba(255,255,255,.48) !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}

.ts-dropdown .option{
    padding:11px 16px 11px 28px !important;
    border-radius:12px !important;
    color:#fff !important;
    background:transparent !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    margin:2px 0 !important;
    transition:.18s ease !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover{
    background:rgba(223,255,0,.12) !important;
    color:#dfff00 !important;
}

.ts-dropdown .selected{
    color:#dfff00 !important;
    background:rgba(223,255,0,.10) !important;
}

.ts-dropdown-content::-webkit-scrollbar{
    width:6px;
}

.ts-dropdown-content::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
    border-radius:999px;
}

.ts-dropdown-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.45);
    border-radius:999px;
}

.ts-dropdown-content::-webkit-scrollbar-thumb:hover{
    background:#dfff00;
}

/* FINANCE TAXES DASHBOARD */

.finance-taxes-dashboard{
    padding:24px;
    border-radius:24px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.08), transparent 34%),
        linear-gradient(180deg,#101722,#090e18);
}

.finance-taxes-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.finance-taxes-header h3{
    margin:0;
    font-size:30px;
    color:#fff;
}

.finance-taxes-header p{
    margin:6px 0 0;
    color:rgba(255,255,255,.62);
    font-weight:700;
}

.finance-taxes-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.finance-taxes-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:20px;
}

.finance-tax-kpi-card,
.finance-tax-chart-card,
.finance-tax-breakdown-card,
.finance-tax-detail-card{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(15,23,42,.72);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.finance-tax-kpi-card{
    padding:22px;
}

.finance-tax-kpi-card span{
    display:block;
    color:rgba(255,255,255,.72);
    font-weight:700;
    margin-bottom:12px;
}

.finance-tax-kpi-card strong{
    display:block;
    color:#fff;
    font-size:28px;
    margin-bottom:10px;
}

.finance-tax-kpi-card small{
    color:rgba(255,255,255,.58);
    font-weight:700;
}

.finance-tax-kpi-card.result{
    border-color:rgba(223,255,0,.55);
    background:linear-gradient(135deg,rgba(223,255,0,.15),rgba(15,23,42,.72));
}

.finance-tax-kpi-card.result strong,
.finance-tax-kpi-card.result span{
    color:#dfff00;
}

.finance-taxes-main-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:20px;
    margin-bottom:20px;
}

.finance-tax-chart-card,
.finance-tax-breakdown-card,
.finance-tax-detail-card{
    padding:20px;
}

.finance-tax-chart-wrap{
    height:300px;
    margin-top:12px;
}

.finance-tax-chart-wrap canvas{
    width:100%;
    height:100%;
}

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

.finance-tax-table th,
.finance-tax-table td{
    padding:15px 12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    text-align:left;
    color:#fff;
    font-weight:700;
}

.finance-tax-table th{
    color:rgba(255,255,255,.58);
    font-size:12px;
    text-transform:uppercase;
}

.finance-tax-table td:not(:first-child),
.finance-tax-table th:not(:first-child){
    text-align:right;
}

.finance-tax-detail-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:16px;
}

.finance-tax-detail-grid article{
    padding:18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.03);
}

.finance-tax-detail-grid span{
    color:rgba(255,255,255,.66);
    font-weight:700;
}

.finance-tax-detail-grid strong{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:24px;
}

.finance-tax-detail-grid small{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.52);
    font-weight:700;
}

.finance-tax-warning{
    margin-top:18px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(223,255,0,.18);
    background:rgba(223,255,0,.05);
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,.78);
    font-weight:700;
}

.finance-tax-warning span{
    color:#dfff00;
}

@media(max-width:1200px){
    .finance-taxes-kpi-grid,
    .finance-tax-detail-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .finance-taxes-main-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .finance-taxes-header{
        flex-direction:column;
    }

    .finance-taxes-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .finance-taxes-kpi-grid,
    .finance-tax-detail-grid{
        grid-template-columns:1fr;
    }
}

#taxQuarterSelector + .ts-wrapper .ts-dropdown-content,
.finance-taxes-actions .ts-dropdown-content{
    max-height:360px !important;
}

.finance-taxes-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.finance-taxes-actions .ts-wrapper,
.finance-taxes-actions select{
    min-width:170px;
}

#taxYearSelector + .ts-wrapper{
    min-width:130px;
}

.finance-taxes-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.finance-taxes-actions .ts-wrapper,
.finance-taxes-actions select{
    min-width:170px;
}

#taxYearSelector + .ts-wrapper{
    min-width:130px;
}

.finance-taxes-actions .book-btn{
    min-width:130px;
    white-space:nowrap;
}

.finance-taxes-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.finance-taxes-actions .ts-wrapper{
    width:180px !important;
    min-width:180px !important;
}

.finance-taxes-actions .ts-control{
    height:52px !important;
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 42px 0 18px !important;
    border-radius:14px !important;
    background:#111827 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
    font-weight:900 !important;
    position:relative !important;
}

.finance-taxes-actions .ts-control .item,
.finance-taxes-actions .ts-control input{
    color:#fff !important;
    font-weight:900 !important;
    line-height:1 !important;
}

.finance-taxes-actions .ts-wrapper.single .ts-control::after{
    content:'' !important;
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    width:8px !important;
    height:8px !important;
    border-right:2px solid rgba(255,255,255,.75) !important;
    border-bottom:2px solid rgba(255,255,255,.75) !important;
    transform:translateY(-70%) rotate(45deg) !important;
    pointer-events:none !important;
}

.finance-taxes-actions .book-btn{
    height:52px !important;
    min-width:138px !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
}
#exportTaxPdfBtn.is-loading{
    opacity:.65;
    pointer-events:none;
}

#exportTaxPdfBtn.is-loading::after{
    content:'';
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid rgba(0,0,0,.25);
    border-top-color:#000;
    animation:financeTaxSpin .7s linear infinite;
}

/* FINANCE REPORTS DASHBOARD */

.finance-reports-dashboard{
    padding:24px;
    border-radius:24px;
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.08), transparent 34%),
        linear-gradient(180deg,#101722,#090e18);
}

.finance-reports-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.finance-reports-header h3{
    margin:0;
    font-size:30px;
    color:#fff;
}

.finance-reports-header p{
    margin:6px 0 0;
    color:rgba(255,255,255,.62);
    font-weight:700;
}

.finance-reports-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.finance-reports-actions .ts-wrapper{
    width:180px !important;
    min-width:180px !important;
}

.finance-reports-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:22px;
}

.finance-report-type-card{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(15,23,42,.72);
    border-radius:20px;
    padding:22px;
    min-height:260px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.finance-report-type-card.featured{
    border-color:rgba(223,255,0,.42);
    background:
        radial-gradient(circle at top right, rgba(223,255,0,.12), transparent 34%),
        rgba(15,23,42,.82);
}

.finance-report-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:rgba(223,255,0,.12);
    color:#dfff00;
}

.finance-report-icon span{
    font-size:26px;
}

.finance-report-type-card span{
    color:#dfff00;
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.finance-report-type-card strong{
    display:block;
    margin-top:6px;
    color:#fff;
    font-size:19px;
}

.finance-report-type-card p{
    margin:10px 0 0;
    color:rgba(255,255,255,.58);
    font-weight:700;
    line-height:1.45;
}

.finance-report-type-card button{
    margin-top:auto;
}

.finance-reports-history{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(15,23,42,.72);
    border-radius:20px;
    padding:20px;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.finance-reports-list{
    margin-top:16px;
    display:grid;
    gap:12px;
}

.finance-report-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    padding:16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
}

.finance-report-row h4{
    margin:0;
    color:#fff;
    font-size:16px;
}

.finance-report-row p{
    margin:5px 0 0;
    color:rgba(255,255,255,.55);
    font-weight:700;
}

.finance-report-row-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.finance-report-row-actions a,
.finance-report-row-actions button{
    height:40px;
    padding:0 14px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    text-decoration:none;
}

@media(max-width:1300px){
    .finance-reports-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:760px){
    .finance-reports-header{
        flex-direction:column;
    }

    .finance-reports-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .finance-reports-actions .ts-wrapper{
        width:100% !important;
        min-width:100% !important;
    }

    .finance-reports-grid{
        grid-template-columns:1fr;
    }

    .finance-report-row{
        grid-template-columns:1fr;
    }
}
.finance-report-history-card{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;
    margin-bottom:12px;

    background:#07142b;
    border:1px solid rgba(223,255,0,.15);
    border-radius:16px;
}

.finance-report-history-main strong{
    display:block;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.finance-report-history-main small{
    color:#7f8ba3;
}

.finance-report-history-type{
    color:#dfff00;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.finance-report-history-summary{
    display:flex;
    gap:24px;
}

.finance-report-history-summary span{
    display:block;
    color:#7f8ba3;
    font-size:11px;
}

.finance-report-history-summary strong{
    color:#fff;
}

.finance-report-history-summary .positive{
    color:#22c55e;
}

.finance-report-history-summary .negative{
    color:#ef4444;
}
/* ==========================
   INFORMES PDF
========================== */

.finance-reports-dashboard{
    background:#eef1f5;
    border-radius:24px;
    padding:32px;
}

.finance-reports-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;
}

.finance-reports-header h3{
    font-size:42px;
    font-weight:800;
    color:#111;
    margin:0;
}

.finance-reports-header p{
    margin-top:8px;
    color:#555;
    font-size:16px;
}

.finance-reports-actions{
    display:flex;
    gap:12px;
}

.finance-reports-actions select{
    height:46px;
    border:1px solid #d7dce3;
    border-radius:12px;
    background:#fff;
    padding:0 16px;
}

/* ==========================
   CARDS SUPERIORES
========================== */

.finance-reports-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-bottom:40px;
}

.finance-report-type-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    border:1px solid #e3e7ee;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.25s;
}

.finance-report-type-card:hover{
    transform:translateY(-3px);
}

.finance-report-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#f5f6f8;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.finance-report-icon .material-symbols-outlined{
    color:#c99717;
}

.finance-report-type-card span{
    display:block;
    font-size:12px;
    text-transform:uppercase;
    color:#c99717;
    font-weight:700;
    margin-bottom:8px;
}

.finance-report-type-card strong{
    display:block;
    font-size:28px;
    line-height:1.1;
    margin-bottom:12px;
    color:#111;
}

.finance-report-type-card p{
    color:#555;
    min-height:80px;
}

/* ==========================
   BOTONES
========================== */

.finance-report-type-card .book-btn{
    width:100%;
    justify-content:center;
    background:linear-gradient(
        180deg,
        #d8ad39,
        #b98816
    );
    border:none;
    color:#111;
    font-weight:700;
    border-radius:12px;
    height:46px;
}

.finance-report-type-card .outline-btn{
    width:100%;
    justify-content:center;
    border-radius:12px;
}

/* ==========================
   HISTORIAL
========================== */

.finance-reports-history{
    margin-top:20px;
}

.finance-reports-history h3{
    font-size:36px;
    font-weight:800;
    color:#111;
    margin-bottom:6px;
}

.finance-reports-history p{
    color:#666;
    margin-bottom:24px;
}

.finance-reports-list{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e5e7eb;
}

/* ==========================
   FILA INFORME
========================== */

.finance-report-history-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 26px;
    border-bottom:1px solid #eceff3;
    background:#fff;
}

.finance-report-history-card:last-child{
    border-bottom:none;
}

.finance-report-history-main{
    display:flex;
    align-items:center;
    gap:16px;
}

.finance-report-history-main strong{
    color:#111;
    font-size:20px;
    font-weight:700;
}

.finance-report-history-main small{
    color:#777;
}

.finance-report-history-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
}

.finance-report-history-icon span{
    color:#c99717;
}

.finance-report-history-type{
    display:none;
}

/* ==========================
   ESTADO
========================== */

.finance-report-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:#dff5df;
    color:#217a2e;
    font-weight:700;
    margin-right:20px;
}

.finance-report-status .material-symbols-outlined{
    font-size:18px;
}

/* ==========================
   RESUMENES
========================== */

.finance-report-history-summary{
    display:none;
}

/* ==========================
   ACCIONES
========================== */

.finance-report-history-actions{
    display:flex;
    gap:10px;
}

.finance-report-history-actions a,
.finance-report-history-actions button{
    height:42px;
    border-radius:10px;
    padding:0 18px;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}

.finance-report-history-actions .book-btn{
    background:#c99717;
    border:none;
    color:#111;
}

.finance-report-history-actions .outline-btn{
    background:#fff;
    border:1px solid #d8dce2;
}

.danger-outline-btn{
    background:#fff;
    border:1px solid #ef4444;
    color:#ef4444;
}
/* ==========================
   INFORMES - MODO CLARO PREMIUM
========================== */

.finance-reports-dashboard {
    background: #eef3f7 !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 22px !important;
    padding: 34px !important;
    color: #111 !important;
}

.finance-reports-header h3,
.finance-reports-history h3 {
    color: #050505 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    margin: 0 0 6px !important;
}

.finance-reports-header p,
.finance-reports-history p {
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.finance-reports-actions select {
    background: #f8fafc !important;
    color: #111 !important;
    border: 1px solid #cfd6df !important;
    border-radius: 10px !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-weight: 600 !important;
}

/* CARDS SUPERIORES */

.finance-reports-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
}

.finance-report-type-card {
    background: #fff !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 16px !important;
    padding: 22px !important;
    color: #111 !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12) !important;
}

.finance-report-type-card.featured {
    border-color: #c99717 !important;
}

.finance-report-type-card span {
    color: #c99717 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.finance-report-type-card strong {
    color: #050505 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.finance-report-type-card p {
    color: #222 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.finance-report-icon {
    background: #f1f4f7 !important;
}

.finance-report-icon span {
    color: #c99717 !important;
}

/* BOTONES CARDS */

.finance-report-type-card .book-btn,
.finance-report-type-card .outline-btn {
    background: linear-gradient(180deg, #d7ad3a, #b88714) !important;
    color: #111 !important;
    border: none !important;
    border-radius: 10px !important;
    height: 42px !important;
    font-weight: 900 !important;
    width: 100% !important;
    justify-content: center !important;
}

/* HISTORIAL */

.finance-reports-history {
    margin-top: 26px !important;
}

.finance-reports-list {
    background: #fff !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}

.finance-report-history-card {
    background: #fff !important;
    border-bottom: 1px solid #dde3ea !important;
    border-radius: 0 !important;
    padding: 18px 20px !important;
    color: #111 !important;
}

.finance-report-history-card:last-child {
    border-bottom: none !important;
}

.finance-report-history-main strong {
    color: #111 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.finance-report-history-main small {
    color: #555 !important;
}

.finance-report-history-icon {
    background: #f6f7f9 !important;
}

.finance-report-history-icon span {
    color: #c99717 !important;
}

/* Estado */

.finance-report-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #dff5df !important;
    color: #1f7a35 !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

/* Ocultar resumen para estilo tabla limpio */

.finance-report-history-summary {
    display: none !important;
}

/* Acciones */

.finance-report-history-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.finance-report-history-actions a,
.finance-report-history-actions button {
    height: 38px !important;
    min-width: 86px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

.finance-report-history-actions .outline-btn {
    background: #c99717 !important;
    color: #111 !important;
    border: none !important;
}

.finance-report-history-actions .book-btn {
    background: #c99717 !important;
    color: #111 !important;
    border: none !important;
}

.finance-report-history-actions .danger-outline-btn {
    background: #fff !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
}
.finance-report-type-card{
    position:relative;
    min-height:260px;
    padding:24px;
    overflow:hidden;
}

[data-generate-report].is-loading {
    pointer-events: none;
    opacity: .85;
    cursor: wait;
}

.yc-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #111827;
    border-radius: 50%;
    animation: ycSpin .75s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}

.outline-btn .yc-btn-spinner {
    border-color: rgba(17,24,39,.25);
    border-top-color: #111827;
}

.book-btn .yc-btn-spinner {
    border-color: rgba(255,255,255,.45);
    border-top-color: #111827;
}

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


.rank-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffc400;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 900;
    color: #06162b;
}


/*SECCION IA */
/* ==========================================================
   YOCUTZ AI - OPCIÓN 3 OSCURA TECNOLÓGICA
========================================================== */

.ai-tech-dashboard {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 0%, rgba(124, 58, 237, .25), transparent 32%),
        radial-gradient(circle at 18% 15%, rgba(34, 211, 238, .12), transparent 28%),
        linear-gradient(135deg, #050814 0%, #0b1020 48%, #111827 100%);
    border: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
    color: #ffffff;
}

.ai-tech-sidebar {
    padding: 24px 18px;
    background: rgba(3, 7, 18, .58);
    border-right: 1px solid rgba(148, 163, 184, .14);
}

.ai-tech-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.ai-tech-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(124, 58, 237, .18);
    color: #a855f7;
    box-shadow: 0 0 28px rgba(124, 58, 237, .35);
}

.ai-tech-brand strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.ai-tech-brand small {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-top: 2px;
}

.ai-tech-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-tech-menu span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 13px;
    border-radius: 13px;
}

.ai-tech-menu span.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .85), rgba(79, 70, 229, .65));
    color: #ffffff;
    box-shadow: 0 14px 35px rgba(124, 58, 237, .28);
}

.ai-tech-menu .material-symbols-outlined {
    font-size: 20px;
}

.ai-health-card {
    margin-top: 36px;
    padding: 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 197, 94, .22), transparent 48%),
        rgba(15, 23, 42, .78);
    border: 1px solid rgba(34, 197, 94, .22);
    text-align: center;
}

.ai-health-card span {
    display: block;
    color: #cbd5e1;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 12px;
}

.ai-health-card strong {
    display: block;
    font-size: 48px;
    font-weight: 950;
    color: #ffffff;
}

.ai-health-card small {
    display: block;
    margin-top: 8px;
    color: #22c55e;
    font-weight: 900;
}

.ai-tech-main {
    padding: 28px;
}

.ai-tech-header {
    margin-bottom: 22px;
}

.ai-tech-header h3 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 950;
}

.ai-tech-header p {
    color: #9ca3af;
}

#generateAiInsightsBtn {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    border: 1px solid rgba(168, 85, 247, .5);
    box-shadow: 0 18px 45px rgba(124, 58, 237, .32);
}

.ai-tech-kpis {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.ai-tech-kpis .finance-ai-kpi {
    background:
        radial-gradient(circle at 88% 10%, rgba(124, 58, 237, .18), transparent 38%),
        rgba(15, 23, 42, .74);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    padding: 20px;
}

.ai-tech-kpis .finance-ai-kpi > span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.ai-kpi-income > span {
    background: rgba(34, 197, 94, .14);
    color: #22c55e;
    box-shadow: 0 0 22px rgba(34, 197, 94, .28);
}

.ai-kpi-expenses > span {
    background: rgba(244, 63, 94, .14);
    color: #fb7185;
    box-shadow: 0 0 22px rgba(244, 63, 94, .28);
}

.ai-kpi-profit > span {
    background: rgba(16, 185, 129, .14);
    color: #34d399;
    box-shadow: 0 0 22px rgba(16, 185, 129, .28);
}

.ai-kpi-margin > span {
    background: rgba(168, 85, 247, .16);
    color: #a855f7;
    box-shadow: 0 0 22px rgba(168, 85, 247, .3);
}

.ai-tech-kpis strong {
    color: #c4b5fd;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

.ai-tech-kpis h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 950;
    margin: 8px 0 4px;
}

.ai-tech-kpis p {
    color: #94a3b8;
    font-size: 12px;
}

.ai-tech-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
}

.ai-tech-card {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .88), rgba(8, 13, 23, .9)) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .25);
}

.ai-tech-card h4 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.ai-tech-card .premium-empty-mini {
    background: rgba(255, 255, 255, .035);
    border: 1px dashed rgba(168, 85, 247, .24);
    color: #9ca3af;
    border-radius: 16px;
    padding: 18px;
}

.ai-summary-card {
    background:
        radial-gradient(circle at 85% 10%, rgba(34, 211, 238, .12), transparent 30%),
        rgba(2, 6, 23, .48);
    border: 1px solid rgba(34, 211, 238, .16);
    border-radius: 18px;
    padding: 20px;
}

.ai-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.ai-summary-label {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}

.ai-summary-card h3 {
    margin: 6px 0 2px;
    font-size: 34px;
    font-weight: 950;
    color: #ffffff;
}

.ai-summary-card p {
    color: #9ca3af;
}

.ai-score-ring {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 26px;
    font-weight: 950;
    background:
        radial-gradient(circle, #0f172a 52%, transparent 54%),
        conic-gradient(#22c55e 0 70%, rgba(255,255,255,.12) 70% 100%);
    box-shadow: 0 0 35px rgba(34, 197, 94, .22);
}

.ai-score-warning {
    background:
        radial-gradient(circle, #0f172a 52%, transparent 54%),
        conic-gradient(#f59e0b 0 55%, rgba(255,255,255,.12) 55% 100%);
}

.ai-score-danger {
    background:
        radial-gradient(circle, #0f172a 52%, transparent 54%),
        conic-gradient(#ef4444 0 45%, rgba(255,255,255,.12) 45% 100%);
}

.ai-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ai-summary-metrics div {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 12px;
}

.ai-summary-metrics span {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    margin-bottom: 5px;
}

.ai-summary-metrics strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.ai-summary-text {
    color: #cbd5e1;
    line-height: 1.55;
}

.ai-summary-text strong {
    color: #22c55e;
}

.ai-insight-item,
.ai-alert-item,
.ai-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(2, 6, 23, .44);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
}

.ai-item-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(124, 58, 237, .18);
    color: #a855f7;
}

.ai-alert-item .ai-item-icon,
.ai-danger .ai-item-icon {
    background: rgba(239, 68, 68, .14);
    color: #ef4444;
}

.ai-action-item .ai-item-icon {
    background: rgba(34, 197, 94, .14);
    color: #22c55e;
}

.ai-item-content {
    flex: 1;
}

.ai-item-content strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.ai-item-content p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
}

.ai-impact-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.ai-impact-high {
    background: rgba(239, 68, 68, .15);
    color: #fb7185;
}

.ai-impact-medium {
    background: rgba(245, 158, 11, .16);
    color: #fbbf24;
}

.ai-impact-low {
    background: rgba(34, 197, 94, .15);
    color: #22c55e;
}

.ai-tech-bottom {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ai-mini-insight {
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 18px;
    padding: 18px;
}

.ai-mini-insight .material-symbols-outlined {
    color: #a855f7;
    margin-bottom: 12px;
}

.ai-mini-insight small {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 6px;
}

.ai-mini-insight strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
}

@media (max-width: 1200px) {
    .ai-tech-dashboard {
        grid-template-columns: 1fr;
    }

    .ai-tech-sidebar {
        display: none;
    }

    .ai-tech-kpis,
    .ai-tech-bottom {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-tech-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .ai-tech-main {
        padding: 18px;
    }

    .finance-ai-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #generateAiInsightsBtn {
        width: 100%;
    }

    .ai-tech-kpis,
    .ai-tech-bottom,
    .ai-summary-metrics {
        grid-template-columns: 1fr;
    }
}
.ai-tech-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-tech-filters select {
    height: 42px;
    min-width: 145px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .24);
    background: rgba(2, 6, 23, .55);
    color: #ffffff;
    padding: 0 14px;
    font-weight: 700;
    outline: none;
}

.ai-tech-filters select:focus {
    border-color: rgba(168, 85, 247, .75);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}

@media (max-width: 900px) {
    .ai-tech-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .ai-tech-filters select,
    .ai-tech-filters button {
        flex: 1;
        min-width: 160px;
    }
}
/* FIX LAYOUT IA OPCIÓN 3 */
.finance-ai-dashboard.ai-tech-dashboard {
    width: 100%;
}

.ai-tech-main {
    min-width: 0;
}

.ai-tech-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ai-tech-kpis.finance-ai-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.ai-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.ai-tech-bottom {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.ai-tech-kpis .finance-ai-kpi {
    width: auto !important;
    min-width: 0;
}

.ai-tech-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.ai-tech-filters select {
    min-width: 150px;
}

@media (max-width: 1200px) {
    .ai-tech-kpis.finance-ai-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .ai-tech-kpis.finance-ai-kpis,
    .ai-tech-grid,
    .ai-tech-bottom {
        grid-template-columns: 1fr !important;
    }
}
.ai-tech-dashboard {
    grid-template-columns: 220px minmax(0, 1fr);
}
ai-tech-dashboard-no-sidebar {

    display: block !important;

    grid-template-columns: none !important;

}

.ai-tech-dashboard-no-sidebar .ai-tech-main {

    width: 100%;

    padding: 32px;

}

.ai-tech-dashboard-no-sidebar .ai-tech-kpis.finance-ai-kpis {

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

}
/* ==========================================================
   FIX FINAL IA SIN SIDEBAR - OPCIÓN 3
========================================================== */

.finance-ai-dashboard.ai-tech-dashboard.ai-tech-dashboard-no-sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px !important;
    box-sizing: border-box !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-header > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-filters {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-filters select,
.ai-tech-dashboard-no-sidebar .ai-tech-filters button {
    height: 46px !important;
    min-width: 150px !important;
    width: auto !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-kpis.finance-ai-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 26px 0 18px !important;
}

.ai-tech-dashboard-no-sidebar .finance-ai-kpi {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

.ai-tech-dashboard-no-sidebar .ai-tech-bottom {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.ai-tech-dashboard-no-sidebar .ai-mini-insight {
    width: auto !important;
    min-width: 0 !important;
}

/* Evita que estilos antiguos compriman los textos */
.ai-tech-dashboard-no-sidebar h2,
.ai-tech-dashboard-no-sidebar h3,
.ai-tech-dashboard-no-sidebar h4,
.ai-tech-dashboard-no-sidebar p,
.ai-tech-dashboard-no-sidebar strong,
.ai-tech-dashboard-no-sidebar small {
    max-width: none !important;
    white-space: normal !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .ai-tech-dashboard-no-sidebar .ai-tech-header {
        flex-direction: column !important;
    }

    .ai-tech-dashboard-no-sidebar .ai-tech-filters {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .ai-tech-dashboard-no-sidebar .ai-tech-kpis.finance-ai-kpis,
    .ai-tech-dashboard-no-sidebar .ai-tech-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ai-tech-dashboard-no-sidebar .ai-tech-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .ai-tech-dashboard-no-sidebar .ai-tech-main {
        padding: 18px !important;
    }

    .ai-tech-dashboard-no-sidebar .ai-tech-kpis.finance-ai-kpis,
    .ai-tech-dashboard-no-sidebar .ai-tech-bottom {
        grid-template-columns: 1fr !important;
    }

    .ai-tech-dashboard-no-sidebar .ai-tech-filters select,
    .ai-tech-dashboard-no-sidebar .ai-tech-filters button {
        width: 100% !important;
    }
}
.ai-tech-filters {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px;
    border-radius: 18px;
    background: rgba(2, 6, 23, .45);
    border: 1px solid rgba(148, 163, 184, .16);
}

.ai-tech-filters select {
    height: 44px !important;
    min-width: 165px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 13px !important;
    background: rgba(15, 23, 42, .9) !important;
    color: #ffffff !important;
    padding: 0 14px !important;
    font-weight: 900 !important;
    outline: none !important;
}

.ai-tech-filters select:focus {
    border-color: rgba(168, 85, 247, .75) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .18) !important;
}

.ai-tech-filters button {
    height: 44px !important;
    white-space: nowrap;
}
/* ==========================================================
   AI FILTERS PREMIUM PILL
========================================================== */

.ai-tech-filters {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .82), rgba(30, 20, 70, .72)) !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 55px rgba(0,0,0,.28),
        0 0 55px rgba(124,58,237,.16) !important;
}

.ai-tech-filters select {
    height: 58px !important;
    min-width: 185px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    background:
        linear-gradient(180deg, rgba(15,23,42,.98), rgba(8,13,23,.94)) !important;
    color: #ffffff !important;
    padding: 0 44px 0 52px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 24px rgba(0,0,0,.20) !important;
    appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #94a3b8 50%),
        linear-gradient(135deg, #94a3b8 50%, transparent 50%),
        linear-gradient(180deg, rgba(15,23,42,.98), rgba(8,13,23,.94)) !important;
    background-position:
        calc(100% - 24px) 25px,
        calc(100% - 17px) 25px,
        0 0 !important;
    background-size:
        8px 8px,
        8px 8px,
        100% 100% !important;
    background-repeat: no-repeat !important;
}

.ai-tech-filters select:hover,
.ai-tech-filters select:focus {
    border-color: rgba(168, 85, 247, .72) !important;
    box-shadow:
        0 0 0 3px rgba(124,58,237,.14),
        0 0 28px rgba(124,58,237,.24) !important;
}

.ai-tech-filters #aiPeriodSelector {
    min-width: 210px !important;
}

.ai-tech-filters #aiYearSelector {
    min-width: 150px !important;
}

/* Iconos visuales sobre los selects */
.ai-tech-filters::before {
    content: "calendar_month";
    font-family: "Material Symbols Outlined";
    position: absolute;
    margin-left: 28px;
    color: #a855f7;
    font-size: 25px;
    pointer-events: none;
    z-index: 4;
}

.ai-tech-filters::after {
    content: "calendar_today";
    font-family: "Material Symbols Outlined";
    position: absolute;
    margin-left: 252px;
    color: #a855f7;
    font-size: 23px;
    pointer-events: none;
    z-index: 4;
}

.ai-tech-filters {
    position: relative !important;
}

#generateAiInsightsBtn {
    height: 58px !important;
    min-width: 230px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(216, 180, 254, .55) !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(135deg, #a855f7 0%, #7c3aed 52%, #5b21b6 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 18px 45px rgba(124,58,237,.42),
        0 0 55px rgba(168,85,247,.28) !important;
    transition: all .2s ease !important;
}

#generateAiInsightsBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 24px 60px rgba(124,58,237,.50),
        0 0 75px rgba(168,85,247,.35) !important;
}

#generateAiInsightsBtn .material-symbols-outlined {
    font-size: 23px !important;
    vertical-align: -6px !important;
    margin-right: 7px !important;
}

/* Responsive */
@media (max-width: 900px) {
    .ai-tech-filters {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .ai-tech-filters::before,
    .ai-tech-filters::after {
        display: none !important;
    }

    .ai-tech-filters select,
    #generateAiInsightsBtn {
        width: 100% !important;
        min-width: 100% !important;
    }
}
/* FIX DEFINITIVO SELECTORES IA */

.ai-tech-filters::before,
.ai-tech-filters::after {
    display: none !important;
    content: none !important;
}

.ai-tech-filters {
    gap: 10px !important;
    padding: 8px !important;
}

.ai-tech-filters select {
    height: 54px !important;
    min-width: 120px !important;
    padding: 0 34px 0 18px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

.ai-tech-filters #aiPeriodSelector {
    min-width: 130px !important;
}

.ai-tech-filters #aiYearSelector {
    min-width: 105px !important;
}

#generateAiInsightsBtn {
    height: 54px !important;
    min-width: 230px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
}
/* FIX DEFINITIVO SELECTORES IA */

.ai-tech-filters::before,
.ai-tech-filters::after {
    display: none !important;
    content: none !important;
}

.ai-tech-filters {
    gap: 10px !important;
    padding: 8px !important;
}

.ai-tech-filters select {
    height: 54px !important;
    min-width: 120px !important;
    padding: 0 34px 0 18px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

.ai-tech-filters #aiPeriodSelector {
    min-width: 130px !important;
}

.ai-tech-filters #aiYearSelector {
    min-width: 105px !important;
}

#generateAiInsightsBtn {
    height: 54px !important;
    min-width: 230px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
}

/* AJUSTE VISUAL FINAL TOOLBAR IA */

.ai-tech-filters {
    padding: 9px 10px !important;
    border-radius: 24px !important;
    gap: 10px !important;
    background: rgba(8, 13, 30, .72) !important;
    border: 1px solid rgba(168, 85, 247, .22) !important;
}

.ai-tech-filters select {
    height: 52px !important;
    border-radius: 17px !important;
    background: rgba(15, 23, 42, .92) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.ai-tech-filters #aiPeriodSelector {
    min-width: 145px !important;
}

.ai-tech-filters #aiYearSelector {
    min-width: 100px !important;
}

#generateAiInsightsBtn {
    height: 52px !important;
    min-width: 235px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    padding: 0 28px !important;
}

#generateAiInsightsBtn .material-symbols-outlined {
    font-size: 22px !important;
    margin-right: 8px !important;
}
/* =====================================================
   YOCUTZ AI BUSINESS V2
===================================================== */

.ai-business-ai {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding:25px;
}

/* HEADER */

.ai-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.ai-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ai-logo-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #8b5cf6,
        #3b82f6
    );

    box-shadow:
        0 0 30px rgba(139,92,246,.35);
}

.ai-logo-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.ai-title h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.ai-title p {
    margin: 4px 0 0;
    color: #94a3b8;
}

/* FILTROS */

.ai-filters-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-filters-v2 select {
    height: 48px;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.08);

    background: #0f172a;

    color: white;

    padding: 0 14px;

    font-weight: 600;
}

.ai-analyze-btn {
    height: 48px;

    padding: 0 22px;

    border-radius: 14px;

    border: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;

    color: white;

    font-weight: 700;

    background: linear-gradient(
        135deg,
        #8b5cf6,
        #6366f1
    );

    box-shadow:
        0 10px 25px rgba(99,102,241,.30);
}

/* =====================================================
   RESUMEN SUPERIOR
===================================================== */

.ai-top-summary {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 18px;
}

.ai-health-ring-card,
.ai-summary-metric {
    background: #111827;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.06);

    padding: 24px;
}

.ai-health-ring-card {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ai-health-ring {
    width: 110px;
    height: 110px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
    font-weight: 800;
    color: white;

    background:
        radial-gradient(
            circle,
            #111827 55%,
            transparent 56%
        ),
        conic-gradient(
            #22c55e 0%,
            #22c55e 75%,
            rgba(255,255,255,.08) 75%
        );
}

.ai-health-ring-card small {
    color: #94a3b8;
    font-size: 12px;
}

.ai-health-ring-card h3 {
    margin: 6px 0;
    color: white;
    font-size: 26px;
}

.ai-health-ring-card p {
    color: #22c55e;
    font-weight: 700;
}

.ai-summary-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-summary-metric small {
    color: #94a3b8;
}

.ai-summary-metric h3 {
    margin-top: 8px;
    color: white;
    font-size: 28px;
}

/* =====================================================
   GRID
===================================================== */

.ai-grid-3 {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}

.ai-card-large {
    background: #111827;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.06);

    padding: 24px;

    min-height: 320px;
}

.ai-card-large h3 {
    margin-top: 0;

    color: white;

    font-size: 18px;

    font-weight: 700;
}

/* =====================================================
   RECOMENDACIÓN
===================================================== */

.ai-main-recommendation {
    background:
        linear-gradient(
            135deg,
            #1e1b4b,
            #312e81
        );

    border-radius: 24px;

    padding: 24px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-main-recommendation strong {
    color: white;
    font-size: 18px;
}

.ai-main-recommendation p {
    color: #cbd5e1;
    margin-top: 8px;
}

.ai-plan-btn {
    border: 0;

    cursor: pointer;

    padding: 14px 22px;

    border-radius: 14px;

    color: white;

    font-weight: 700;

    background: linear-gradient(
        135deg,
        #8b5cf6,
        #6366f1
    );
}

/* =====================================================
   HOVER
===================================================== */

.ai-card-large:hover,
.ai-summary-metric:hover,
.ai-health-ring-card:hover {
    transform: translateY(-2px);

    transition: .25s;

    border-color:
        rgba(139,92,246,.30);
}

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

@media(max-width:1400px){

    .ai-top-summary{
        grid-template-columns:
            repeat(2,1fr);
    }

    .ai-grid-3{
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:900px){

    .ai-header-v2{
        flex-direction:column;
        align-items:flex-start;
    }

    .ai-filters-v2{
        width:100%;
        flex-wrap:wrap;
    }

    .ai-grid-3{
        grid-template-columns:1fr;
    }

    .ai-top-summary{
        grid-template-columns:1fr;
    }

    .ai-main-recommendation{
        flex-direction:column;
        gap:20px;
        align-items:flex-start;
    }

}

/* =====================================================
   YOCUTZ AI - BADGES Y CABECERAS
===================================================== */

.ai-card-large h3 {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.ai-card-large h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
}

/* Badge superior */

.ai-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 800;
}

/* =====================================================
   TABLAS IA
===================================================== */

.ai-table {
    width: 100%;
}

.ai-table-header {
    display: grid;
    grid-template-columns: 1.5fr .7fr .7fr;
    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid rgba(148,163,184,.15);
}

.ai-table-header span {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .05em;
}

/* =====================================================
   SOMBRAS PREMIUM
===================================================== */

.ai-card-large:hover {
    transform: translateY(-2px);

    border-color: rgba(168,85,247,.30) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 30px rgba(124,58,237,.08);
}

.ai-card-large {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* =====================================================
   OFERTAS INTELIGENTES
===================================================== */

.ai-offer-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-offer-row:hover {
    background: rgba(124,58,237,.08);
}

.ai-offer-row b {
    font-size: 15px;
}

/* =====================================================
   SERVICIOS INFRAVALORADOS
===================================================== */

.ai-service-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-service-row:hover {
    background: rgba(250,204,21,.06);
}

/* =====================================================
   CAMPAÑAS
===================================================== */

.ai-campaign-line strong {
    color: #22d3ee;
}

.ai-campaign-line:last-child strong {
    color: #22c55e;
}

/* =====================================================
   SCORE RING
===================================================== */

.ai-health-ring {
    width: 120px;
    height: 120px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;
    font-weight: 900;

    color: #ffffff;

    background:
        radial-gradient(circle, #07111f 58%, transparent 60%),
        conic-gradient(
            #22c55e 0%,
            #22c55e 68%,
            rgba(255,255,255,.08) 68%
        );

    box-shadow:
        0 0 35px rgba(34,197,94,.18),
        inset 0 0 30px rgba(34,197,94,.10);
}

/* =====================================================
   BOTONES
===================================================== */

.ai-plan-btn {
    min-width: 220px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7c3aed
        );

    border: 0;

    color: white;

    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(124,58,237,.35);
}

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

    box-shadow:
        0 20px 45px rgba(124,58,237,.45);
}

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

@media (max-width: 1400px) {

    .ai-grid-3 {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 900px) {

    .ai-grid-3 {
        grid-template-columns: 1fr;
    }

    .ai-top-summary {
        grid-template-columns: 1fr;
    }

    .ai-risk-panel {
        grid-template-columns: 1fr;
        justify-items: center;
    }

}

/* =====================================================
   YOCUTZ AI - BADGES Y CABECERAS
===================================================== */

.ai-card-large h3 {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.ai-card-large h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
}

/* Badge superior */

.ai-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 800;
}

/* =====================================================
   TABLAS IA
===================================================== */

.ai-table {
    width: 100%;
}

.ai-table-header {
    display: grid;
    grid-template-columns: 1.5fr .7fr .7fr;
    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid rgba(148,163,184,.15);
}

.ai-table-header span {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .05em;
}

/* =====================================================
   SOMBRAS PREMIUM
===================================================== */

.ai-card-large:hover {
    transform: translateY(-2px);

    border-color: rgba(168,85,247,.30) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 30px rgba(124,58,237,.08);
}

.ai-card-large {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* =====================================================
   OFERTAS INTELIGENTES
===================================================== */

.ai-offer-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-offer-row:hover {
    background: rgba(124,58,237,.08);
}

.ai-offer-row b {
    font-size: 15px;
}

/* =====================================================
   SERVICIOS INFRAVALORADOS
===================================================== */

.ai-service-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-service-row:hover {
    background: rgba(250,204,21,.06);
}

/* =====================================================
   CAMPAÑAS
===================================================== */

.ai-campaign-line strong {
    color: #22d3ee;
}

.ai-campaign-line:last-child strong {
    color: #22c55e;
}

/* =====================================================
   SCORE RING
===================================================== */

.ai-health-ring {
    width: 120px;
    height: 120px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;
    font-weight: 900;

    color: #ffffff;

    background:
        radial-gradient(circle, #07111f 58%, transparent 60%),
        conic-gradient(
            #22c55e 0%,
            #22c55e 68%,
            rgba(255,255,255,.08) 68%
        );

    box-shadow:
        0 0 35px rgba(34,197,94,.18),
        inset 0 0 30px rgba(34,197,94,.10);
}

/* =====================================================
   BOTONES
===================================================== */

.ai-plan-btn {
    min-width: 220px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7c3aed
        );

    border: 0;

    color: white;

    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(124,58,237,.35);
}

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

    box-shadow:
        0 20px 45px rgba(124,58,237,.45);
}

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

@media (max-width: 1400px) {

    .ai-grid-3 {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 900px) {

    .ai-grid-3 {
        grid-template-columns: 1fr;
    }

    .ai-top-summary {
        grid-template-columns: 1fr;
    }

    .ai-risk-panel {
        grid-template-columns: 1fr;
        justify-items: center;
    }

}


/* =====================================================
   YOCUTZ AI - BADGES Y CABECERAS
===================================================== */

.ai-card-large h3 {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.ai-card-large h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
}

/* Badge superior */

.ai-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 800;
}

/* =====================================================
   TABLAS IA
===================================================== */

.ai-table {
    width: 100%;
}

.ai-table-header {
    display: grid;
    grid-template-columns: 1.5fr .7fr .7fr;
    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid rgba(148,163,184,.15);
}

.ai-table-header span {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .05em;
}

/* =====================================================
   SOMBRAS PREMIUM
===================================================== */

.ai-card-large:hover {
    transform: translateY(-2px);

    border-color: rgba(168,85,247,.30) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 30px rgba(124,58,237,.08);
}

.ai-card-large {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* =====================================================
   OFERTAS INTELIGENTES
===================================================== */

.ai-offer-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-offer-row:hover {
    background: rgba(124,58,237,.08);
}

.ai-offer-row b {
    font-size: 15px;
}

/* =====================================================
   SERVICIOS INFRAVALORADOS
===================================================== */

.ai-service-row {
    border-radius: 14px;
    padding: 14px;

    margin-bottom: 8px;

    background: rgba(255,255,255,.02);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-service-row:hover {
    background: rgba(250,204,21,.06);
}

/* =====================================================
   CAMPAÑAS
===================================================== */

.ai-campaign-line strong {
    color: #22d3ee;
}

.ai-campaign-line:last-child strong {
    color: #22c55e;
}

/* =====================================================
   SCORE RING
===================================================== */

.ai-health-ring {
    width: 120px;
    height: 120px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;
    font-weight: 900;

    color: #ffffff;

    background:
        radial-gradient(circle, #07111f 58%, transparent 60%),
        conic-gradient(
            #22c55e 0%,
            #22c55e 68%,
            rgba(255,255,255,.08) 68%
        );

    box-shadow:
        0 0 35px rgba(34,197,94,.18),
        inset 0 0 30px rgba(34,197,94,.10);
}

/* =====================================================
   BOTONES
===================================================== */

.ai-plan-btn {
    min-width: 220px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7c3aed
        );

    border: 0;

    color: white;

    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(124,58,237,.35);
}

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

    box-shadow:
        0 20px 45px rgba(124,58,237,.45);
}

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

@media (max-width: 1400px) {

    .ai-grid-3 {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 900px) {

    .ai-grid-3 {
        grid-template-columns: 1fr;
    }

    .ai-top-summary {
        grid-template-columns: 1fr;
    }

    .ai-risk-panel {
        grid-template-columns: 1fr;
        justify-items: center;
    }

}
/* FILTROS */

.ai-filters-v2 {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

}

.ai-filters-v2 select {

    height: 54px !important;

    min-width: 170px !important;

    border-radius: 15px !important;

    border: 1px solid rgba(148, 163, 184, .25) !important;

    background: rgba(15, 23, 42, .88) !important;

    color: #fff !important;

    padding: 0 16px !important;

    font-size: 15px !important;

    font-weight: 900 !important;

    outline: none !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;

}

.ai-analyze-btn {

    height: 54px !important;

    min-width: 225px !important;

    border: 0 !important;

    border-radius: 15px !important;

    background:

        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 26%),

        linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, #5b21b6 100%) !important;

    color: #fff !important;

    font-size: 15px !important;

    font-weight: 950 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    box-shadow:

        0 18px 45px rgba(124,58,237,.38),

        inset 0 1px 0 rgba(255,255,255,.25) !important;

}
/* TOP SUMMARY */

.ai-top-summary {

    display: grid !important;

    grid-template-columns: 1.45fr 1fr 1fr 1fr !important;

    gap: 16px !important;

}

.ai-health-ring-card,

.ai-summary-metric {

    min-height: 150px !important;

    border-radius: 20px !important;

    padding: 24px !important;

    background:

        radial-gradient(circle at 92% 0%, rgba(124,58,237,.14), transparent 36%),

        linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,13,23,.98)) !important;

    border: 1px solid rgba(148,163,184,.16) !important;

    box-shadow: 0 20px 45px rgba(0,0,0,.24) !important;

}

.ai-health-ring-card {

    display: flex !important;

    align-items: center !important;

    gap: 24px !important;

}

.ai-health-ring {

    width: 112px !important;

    height: 112px !important;

    border-radius: 50% !important;

    display: grid !important;

    place-items: center !important;

    background:

        radial-gradient(circle, #0f172a 55%, transparent 57%),

        conic-gradient(#22c55e 0 24%, #22d3ee 24% 72%, rgba(255,255,255,.10) 72% 100%) !important;

    box-shadow:

        0 0 35px rgba(34,197,94,.18),

        inset 0 0 25px rgba(34,197,94,.08) !important;

}

.ai-health-ring span {

    color: #fff !important;

    font-size: 36px !important;

    font-weight: 950 !important;

}

.ai-health-ring-card small,

.ai-summary-metric small {

    display: block !important;

    color: #94a3b8 !important;

    font-size: 12px !important;

    font-weight: 900 !important;

    text-transform: uppercase !important;

    margin-bottom: 10px !important;

}

.ai-health-ring-card h3,

.ai-summary-metric h3 {

    margin: 0 !important;

    color: #fff !important;

    font-size: 32px !important;

    font-weight: 950 !important;

    letter-spacing: -1px !important;

}

.ai-health-ring-card p {

    margin: 8px 0 0 !important;

    color: #22c55e !important;

    font-weight: 900 !important;

}

.ai-summary-metric {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

}

.ai-summary-metric:nth-child(2) h3 {

    color: #22c55e !important;

}

.ai-summary-metric:nth-child(3) h3 {

    color: #60a5fa !important;

}

.ai-summary-metric:nth-child(4) h3 {

    color: #a855f7 !important;

}

/* GRID CARDS */
/* GRID CARDS */

.ai-grid-3 {

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

}

.ai-card-large {

    position: relative !important;

    overflow: hidden !important;

    min-height: 320px !important;

    padding: 24px !important;

    border-radius: 20px !important;

    background:

        radial-gradient(circle at 96% 0%, rgba(124,58,237,.13), transparent 36%),

        linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,13,23,.98)) !important;

    border: 1px solid rgba(148,163,184,.16) !important;

    box-shadow: 0 20px 50px rgba(0,0,0,.25) !important;

}

.ai-card-large::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 34%);

    pointer-events: none;

}

.ai-card-large h3 {

    position: relative !important;

    margin: 0 0 20px !important;

    padding-bottom: 15px !important;

    color: #fff !important;

    font-size: 19px !important;

    font-weight: 950 !important;

    letter-spacing: -.4px !important;

}

.ai-card-large h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 48px;

    height: 3px;

    border-radius: 999px;

    background: currentColor;

}

.ai-grid-3:nth-of-type(1) .ai-card-large:nth-child(1) h3 { color: #fb7185 !important; }

.ai-grid-3:nth-of-type(1) .ai-card-large:nth-child(2) h3 { color: #60a5fa !important; }

.ai-grid-3:nth-of-type(1) .ai-card-large:nth-child(3) h3 { color: #4ade80 !important; }

.ai-grid-3:nth-of-type(2) .ai-card-large:nth-child(1) h3 { color: #facc15 !important; }

.ai-grid-3:nth-of-type(2) .ai-card-large:nth-child(2) h3 { color: #a855f7 !important; }

.ai-grid-3:nth-of-type(2) .ai-card-large:nth-child(3) h3 { color: #22d3ee !important; }

/* FILAS */

.ai-offer-row,

.ai-service-row {

    display: grid !important;

    grid-template-columns: 1.4fr .55fr .75fr !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 14px !important;

    margin-bottom: 9px !important;

    border-radius: 14px !important;

    background: rgba(255,255,255,.025) !important;

    border: 1px solid rgba(255,255,255,.06) !important;

}

.ai-offer-row strong,

.ai-service-row strong {

    display: block !important;

    color: #fff !important;

    font-size: 14px !important;

    font-weight: 950 !important;

    line-height: 1.25 !important;

}

.ai-offer-row span,

.ai-service-row span {

    display: block !important;

    margin-top: 4px !important;

    color: #94a3b8 !important;

    font-size: 12px !important;

    font-weight: 700 !important;

}

.ai-offer-row em,

.ai-service-row em {

    justify-self: center !important;

    padding: 6px 10px !important;

    border-radius: 999px !important;

    background: rgba(251,113,133,.14) !important;

    color: #fb7185 !important;

    font-size: 12px !important;

    font-style: normal !important;

    font-weight: 950 !important;

}

.ai-service-row em {

    background: rgba(250,204,21,.14) !important;

    color: #facc15 !important;

}

.ai-offer-row b,

.ai-service-row b {

    justify-self: end !important;

    color: #22c55e !important;

    font-size: 14px !important;

    font-weight: 950 !important;

}

/* HORAS VALLE */

.ai-hour-row {

    display: grid !important;

    grid-template-columns: 1.2fr 1fr 45px !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 12px 0 !important;

    border-bottom: 1px solid rgba(148,163,184,.10) !important;

}

.ai-hour-row strong {

    display: block !important;

    color: #fff !important;

    font-size: 14px !important;

    font-weight: 950 !important;

}

.ai-hour-row span {

    color: #94a3b8 !important;

    font-size: 12px !important;

}

.ai-hour-progress {

    height: 8px !important;

    border-radius: 999px !important;

    background: rgba(59,130,246,.16) !important;

    overflow: hidden !important;

}

.ai-hour-progress span {

    display: block !important;

    height: 100% !important;

    border-radius: 999px !important;

    background: linear-gradient(90deg, #38bdf8, #2563eb) !important;

}

.ai-hour-row em {

    color: #fff !important;

    font-style: normal !important;

    font-size: 13px !important;

    font-weight: 950 !important;

    text-align: right !important;

}

/* FORECAST / CAMPAÑAS */

.ai-forecast-line,

.ai-campaign-line {

    display: flex !important;

    justify-content: space-between !important;

    gap: 16px !important;

    padding: 13px 0 !important;

    border-bottom: 1px solid rgba(148,163,184,.12) !important;

}

.ai-forecast-line span,

.ai-campaign-line span {

    color: #94a3b8 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

}

.ai-forecast-line strong,

.ai-campaign-line strong {

    color: #22c55e !important;

    font-size: 15px !important;

    font-weight: 950 !important;

    text-align: right !important;

}

.ai-forecast-line .negative {

    color: #fb7185 !important;

}

.ai-forecast-line.featured {

    border-top: 1px solid rgba(148,163,184,.22) !important;

    margin-top: 8px !important;

    padding-top: 16px !important;

}

/* CLIENTES EN RIESGO */

.ai-risk-panel {

    display: grid !important;

    grid-template-columns: 118px 1fr !important;

    gap: 20px !important;

    align-items: center !important;

}

.ai-risk-number {

    width: 112px !important;

    height: 112px !important;

    border-radius: 50% !important;

    display: grid !important;

    place-items: center !important;

    background:

        radial-gradient(circle, #0f172a 54%, transparent 56%),

        conic-gradient(#a855f7 0 72%, rgba(255,255,255,.12) 72% 100%) !important;

    box-shadow: 0 0 32px rgba(168,85,247,.24) !important;

}

.ai-risk-number strong {

    color: #fff !important;

    font-size: 34px !important;

    font-weight: 950 !important;

}

.ai-risk-number span {

    margin-top: -32px !important;

    color: #cbd5e1 !important;

    font-size: 12px !important;

}

.ai-risk-lines p {

    display: flex !important;

    justify-content: space-between !important;

    gap: 12px !important;

    margin: 0 !important;

    padding: 10px 0 !important;

    border-bottom: 1px solid rgba(148,163,184,.12) !important;

}

.ai-risk-lines span {

    color: #94a3b8 !important;

    font-size: 13px !important;

}

.ai-risk-lines strong {

    color: #fff !important;

    font-weight: 950 !important;

}

/* RECOMENDACIÓN */

.ai-main-recommendation {

    padding: 24px 28px !important;

    border-radius: 22px !important;

    background:

        radial-gradient(circle at 0% 50%, rgba(168,85,247,.28), transparent 28%),

        linear-gradient(135deg, rgba(49,46,129,.95), rgba(76,29,149,.92)) !important;

    border: 1px solid rgba(216,180,254,.18) !important;

    box-shadow: 0 22px 55px rgba(124,58,237,.24) !important;

}

.ai-main-recommendation strong {

    color: #fff !important;

    font-size: 21px !important;

    font-weight: 950 !important;

}

.ai-main-recommendation p {

    color: #dbeafe !important;

    font-weight: 700 !important;

}

.ai-plan-btn {

    min-width: 210px !important;

    height: 50px !important;

    border: 0 !important;

    border-radius: 14px !important;

    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;

    color: white !important;

    font-weight: 950 !important;

    box-shadow: 0 18px 42px rgba(124,58,237,.35) !important;

}

/* RESPONSIVE */

@media (max-width: 1300px) {

    .ai-top-summary,

    .ai-grid-3 {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    }

}

@media (max-width: 800px) {

    .ai-business-ai {

        padding: 18px !important;

    }

    .ai-header-v2 {

        flex-direction: column !important;

        align-items: flex-start !important;

    }

    .ai-filters-v2 {

        width: 100% !important;

        flex-wrap: wrap !important;

    }

    .ai-filters-v2 select,

    .ai-analyze-btn {

        width: 100% !important;

    }

    .ai-top-summary,

    .ai-grid-3 {

        grid-template-columns: 1fr !important;

    }

    .ai-risk-panel {

        grid-template-columns: 1fr !important;

        justify-items: center !important;

    }

}

/* ==========================================================
   MODAL PLAN COMPLETO IA
========================================================== */

.ai-plan-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 40px;
}

.ai-plan-modal.open {
    display: flex;
}

.ai-plan-modal-backdrop {
    position: absolute;
    inset: 0;

    backdrop-filter: blur(12px);
    background: rgba(2, 6, 23, .78);
}

.ai-plan-modal-panel {
    position: relative;

    width: 100%;
    max-width: 1400px;
    max-height: 90vh;

    overflow-y: auto;

    border-radius: 28px;

    background:
        radial-gradient(circle at top right,
            rgba(124,58,237,.25),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071223 0%,
            #081425 100%
        );

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);

    padding: 30px;
}

.ai-plan-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
    margin-bottom: 28px;
}

.ai-plan-kicker {
    display: inline-flex;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(139,92,246,.15);

    color: #c084fc;

    font-size: 12px;
    font-weight: 700;
}

.ai-plan-modal-header h2 {
    margin-top: 12px;
    margin-bottom: 8px;

    color: #fff;

    font-size: 34px;
    font-weight: 900;
}

.ai-plan-modal-header p {
    color: #94a3b8;
}

.ai-plan-close {
    width: 46px;
    height: 46px;

    border: none;

    cursor: pointer;

    border-radius: 14px;

    background: rgba(255,255,255,.06);

    color: #fff;
}

.ai-plan-close:hover {
    background: rgba(255,255,255,.12);
}

.ai-plan-modal-summary {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 16px;

    margin-bottom: 26px;
}

.ai-plan-modal-summary article {
    padding: 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);
}

.ai-plan-modal-summary span {
    display: block;

    color: #94a3b8;

    font-size: 12px;
    margin-bottom: 8px;
}

.ai-plan-modal-summary strong {
    color: #fff;

    font-size: 30px;
    font-weight: 900;
}

.ai-plan-modal-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);

    gap: 20px;
}

.ai-plan-section {
    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 22px;

    padding: 22px;
}

.ai-plan-section.wide {
    grid-column: span 2;
}

.ai-plan-section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
}

.ai-plan-section-title h3 {
    margin: 0;

    color: #fff;

    font-size: 18px;
    font-weight: 800;
}

.ai-plan-section-title span {
    font-size: 28px;
}

.ai-plan-section-title.pink span {
    color: #ec4899;
}

.ai-plan-section-title.cyan span {
    color: #22d3ee;
}

.ai-plan-section-title.purple span {
    color: #a855f7;
}

.ai-plan-section-title.yellow span {
    color: #facc15;
}

.ai-plan-section-title.green span {
    color: #22c55e;
}

.ai-plan-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding: 14px;

    border-radius: 16px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.05);
}

.ai-plan-item strong {
    display: block;

    color: #fff;
}

.ai-plan-item small {
    color: #94a3b8;
}

.ai-plan-item-value {
    color: #22c55e;
    font-weight: 800;
}

.ai-plan-empty {
    color: #94a3b8;

    padding: 16px;

    border-radius: 14px;

    background: rgba(255,255,255,.03);
}

.ai-plan-forecast {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 16px;
}

.ai-plan-forecast-card {
    padding: 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);
}

.ai-plan-forecast-card span {
    display: block;

    color: #94a3b8;

    margin-bottom: 10px;
}

.ai-plan-forecast-card strong {
    color: #fff;

    font-size: 24px;
    font-weight: 900;
}

.ai-plan-modal-footer {
    margin-top: 28px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-top: 24px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.ai-plan-modal-footer strong {
    display: block;

    color: #fff;

    margin-bottom: 6px;
}

.ai-plan-modal-footer p {
    color: #94a3b8;
}

.ai-plan-primary-btn {
    border: none;

    cursor: pointer;

    padding: 14px 28px;

    border-radius: 16px;

    color: #fff;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7c3aed
        );

    box-shadow:
        0 15px 35px rgba(124,58,237,.35);
}

.ai-plan-primary-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 1000px) {

    .ai-plan-modal-grid {
        grid-template-columns: 1fr;
    }

    .ai-plan-section.wide {
        grid-column: auto;
    }

    .ai-plan-forecast {
        grid-template-columns: repeat(2,1fr);
    }

    .ai-plan-modal-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .ai-plan-modal {
        padding: 12px;
    }

    .ai-plan-modal-panel {
        padding: 20px;
    }

    .ai-plan-forecast {
        grid-template-columns: 1fr;
    }

    .ai-plan-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-plan-primary-btn {
        width: 100%;
    }
}
/* ========================================
   MODAL RESPONSIVE
======================================== */

.ai-plan-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
    padding: 20px;
}

.ai-plan-modal.open {
    display: flex;
}

.ai-plan-modal-content {
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.08);
}

.ai-plan-body {
    padding: 24px;
}

.ai-plan-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.ai-plan-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 20px;
}

.ai-plan-card h3 {
    margin-bottom: 18px;
}

/* ==========================
   TABLET
========================== */

@media (max-width: 1200px) {

    .ai-plan-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

/* ==========================
   SMARTPHONE
========================== */

@media (max-width: 768px) {

    .ai-plan-modal {
        padding: 0;
    }

    .ai-plan-modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .ai-plan-body {
        padding: 16px;
    }

    .ai-plan-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ai-plan-card {
        padding: 16px;
    }

    .ai-plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ai-plan-stats {
        grid-template-columns: 1fr;
    }

    .ai-plan-forecast-grid {
        grid-template-columns: 1fr;
    }

}
.ai-plan-modal {
    z-index: 999999 !important;
}

.ai-plan-modal-backdrop {
    z-index: 999999 !important;
}

.ai-plan-modal-panel {
    z-index: 1000000 !important;
}


/* =====================================================
   FIX Z-INDEX SWEETALERT VS MODAL IA
===================================================== */

.ai-plan-modal {
    z-index: 2147483000 !important;
}

.ai-plan-modal.open {
    z-index: 2147483000 !important;
}

.ai-plan-modal-backdrop {
    z-index: 2147483001 !important;
}

.ai-plan-modal-panel {
    z-index: 2147483002 !important;
}

/* SweetAlert siempre por encima de cualquier modal */
.swal2-container {
    z-index: 2147483647 !important;
}
/*END SECCION IA*/
/* =====================================================
   PLANES IA CREADOS
===================================================== */

.ai-saved-plans-section {
    margin-top: 26px;
    padding: 26px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 90% 0%, rgba(124,58,237,.18), transparent 32%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,13,23,.98));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.ai-saved-plans-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}

.ai-saved-plans-header h3 {
    margin: 10px 0 6px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

.ai-saved-plans-header p {
    color: #94a3b8;
    margin: 0;
}

.ai-refresh-plans-btn {
    height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(168,85,247,.35);
    border-radius: 14px;
    background: rgba(124,58,237,.14);
    color: #fff;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.ai-saved-plans-list {
    display: grid;
    gap: 14px;
}

.ai-saved-plan-card {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}

.ai-saved-plan-card strong {
    color: #fff;
    font-size: 16px;
    font-weight: 950;
}

.ai-saved-plan-card small {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
}

.ai-saved-plan-metric span {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.ai-saved-plan-metric b {
    display: block;
    margin-top: 4px;
    color: #22c55e;
    font-size: 16px;
}

.ai-saved-plan-actions {
    display: flex;
    gap: 10px;
}

.ai-saved-plan-actions button {
    height: 38px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.8);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

@media(max-width: 900px) {
    .ai-saved-plans-header {
        flex-direction: column;
    }

    .ai-saved-plan-card {
        grid-template-columns: 1fr;
    }

    .ai-saved-plan-actions {
        flex-direction: column;
    }
}

.ai-saved-plan-wrapper {
    border-radius: 20px;
}

.ai-saved-plan-card {
    grid-template-columns: 1.4fr .7fr .9fr .6fr auto;
}

.ai-plan-accordion {
    display: none;
    padding: 18px;
    margin-top: -4px;
    border: 1px solid rgba(148,163,184,.14);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(2,6,23,.38);
}

.ai-plan-accordion.open {
    display: block;
}

.ai-plan-task-list {
    display: grid;
    gap: 12px;
}

.ai-plan-task {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
}

.ai-plan-task input {
    display: none;
}

.ai-task-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid rgba(168,85,247,.7);
    margin-top: 3px;
}

.ai-plan-task.is-done .ai-task-check {
    background: #22c55e;
    border-color: #22c55e;
}

.ai-plan-task strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.ai-plan-task p {
    margin: 4px 0;
    color: #94a3b8;
    font-size: 13px;
}

.ai-plan-task small {
    color: #22c55e;
    font-weight: 800;
}

.ai-plan-task.is-done {
    opacity: .72;
}

.ai-plan-task.is-done strong {
    text-decoration: line-through;
}

.ai-plan-accordion-empty {
    color: #94a3b8;
}
.ai-task-save-status {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.ai-task-save-status.is-saving {
    color: #facc15;
    background: rgba(250,204,21,.12);
}

.ai-task-save-status.is-saved {
    color: #22c55e;
    background: rgba(34,197,94,.12);
}

.ai-task-save-status.is-error {
    color: #fb7185;
    background: rgba(251,113,133,.12);
}

.ai-plan-task.is-saving {
    opacity: .82;
}
.ai-task-save-status {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .25s ease, transform .25s ease;
}

.ai-task-save-status.is-visible,
.ai-task-save-status.is-saving,
.ai-task-save-status.is-error {
    opacity: 1;
    transform: translateY(0);
}

.ai-task-save-status.is-fading {
    opacity: 0;
    transform: translateY(-3px);
}



/* SIDEBAR NAV PREMIUM */

.sidebar {
    width: 260px;
    padding: 24px 18px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
}

.sidebar-nav-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #b8beca;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: all .2s ease;
}

.sidebar-nav-item .material-symbols-outlined {
    font-size: 22px;
    color: #8f96a3;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.sidebar-nav-item:hover .material-symbols-outlined {
    color: #dfff00;
}

.sidebar-nav-item.active {
    background: linear-gradient(135deg, rgba(223,255,0,.18), rgba(223,255,0,.08));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(223,255,0,.22);
}

.sidebar-nav-item.active .material-symbols-outlined {
    color: #dfff00;
}

.sidebar-panel-title {
    margin-top: 28px;
    padding: 0 6px;
    color: #dfff00;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.center-chips {
    display: none !important;
}
#ia-estadisticas {
    width: 100% !important;
    display: block !important;
}

#ia-estadisticas.visible-section {
    display: block !important;
}

#ia-estadisticas .finance-ai-dashboard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}

#ia-estadisticas .ai-business-ai {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
}

#ia-estadisticas .ai-header-v2 {
    display: flex !important;
}

#ia-estadisticas .ai-top-summary,
#ia-estadisticas .ai-grid-3 {
    display: grid !important;
}

#ia-estadisticas .ai-card-large,
#ia-estadisticas .ai-summary-metric,
#ia-estadisticas .ai-health-ring-card,
#ia-estadisticas .ai-main-recommendation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dashboard-section.hidden-section {
    display: none !important;
}

.dashboard-section.visible-section {
    display: block !important;
}

#ia-estadisticas.hidden-section {
    display: none !important;
}

#ia-estadisticas.visible-section {
    display: block !important;
}
@media (max-width: 1023px) {
  .yc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    background: #050505;
    overflow-y: auto;
  }

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

  .yc-main-content {
    margin-left: 0 !important;
    width: 100%;
  }

  .yc-mobile-menu-btn {
    display: inline-flex;
  }

  .yc-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .yc-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 1024px) {
  .yc-mobile-menu-btn,
  .yc-menu-overlay {
    display: none !important;
  }

  .yc-sidebar {
    transform: none !important;
  }
}

@media (max-width: 1024px) {
    .sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        z-index: 9999;
        background: var(--black);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
    }

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

    .main {
        margin-left: 0;
    }

    .stats-grid,
    .widgets-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0 18px;
    }

    .top-actions .book-btn,
    .top-actions .icon-btn {
        display: none;
    }

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

    .mobile-fab {
        display: flex;
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 58px;
        height: 58px;
        border: 0;
        border-radius: 999px;
        background: var(--yellow);
        color: var(--black);
        align-items: center;
        justify-content: center;
        z-index: 99;
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }
}
.mobile-fab {
    display: flex;
    position: fixed;
    left: 18px;
    top: 18px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--yellow);
    color: var(--black);
    align-items: center;
    justify-content: center;
    z-index: 10000;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.topbar {
    padding-left: 76px;
}