:root {
    color-scheme: light;
    --font-sans: "Manrope", "Segoe UI", sans-serif;
    --bg: #f7f8fb;
    --panel: #ffffff;
    --panel-soft: #f1f5f9;
    --ink: #17202a;
    --heading: #1e293b;
    --muted: #687385;
    --subtle: #94a3b8;
    --line: #dfe5ee;
    --primary: #176b87;
    --primary-strong: #104f67;
    --primary-soft: #dff3fa;
    --primary-soft-ink: #104f67;
    --accent: #d48b2a;
    --success: #23845b;
    --danger: #b42318;
    --sidebar: #102a43;
    --sidebar-ink: #ffffff;
    --sidebar-muted: #9fb3c8;
    --sidebar-link: #d9e2ec;
    --sidebar-line: rgba(255, 255, 255, .18);
    --sidebar-hover: rgba(255, 255, 255, .11);
    --sidebar-control: rgba(255, 255, 255, .08);
    --sidebar-control-active: #ffffff;
    --sidebar-control-active-ink: #102a43;
    --sidebar-danger: #fda4af;
    --input-bg: #ffffff;
    --row-hover: #f8fafc;
    --panel-shadow: rgba(16, 42, 67, .05);
    --backdrop: rgba(15, 23, 42, .45);
    --login-gradient-start: #102a43;
    --login-gradient-mid: #176b87;
    --login-gradient-end: #d48b2a;
    --login-shadow: rgba(0, 0, 0, .25);
    --info-border: #bae6fd;
    --info-bg: #f0f9ff;
    --info-ink: #075985;
    --warning-border: #fed7aa;
    --warning-bg: #fff7ed;
    --warning-ink: #9a3412;
    --notice-border: #fbbf24;
    --notice-bg: #fffbeb;
    --notice-ink: #92400e;
    --neutral-bg: #e2e8f0;
    --neutral-ink: #475569;
    --success-bg: #dcfce7;
    --success-ink: #166534;
    --danger-bg: #fee2e2;
    --danger-ink: #b42318;
    --alert-error-bg: #fee4e2;
    --alert-info-bg: #e0f2fe;
    --on-primary: #ffffff;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #09111f;
    --panel: #111d2e;
    --panel-soft: #17263a;
    --ink: #edf4fb;
    --heading: #f7fbff;
    --muted: #b5c2d1;
    --subtle: #91a2b6;
    --line: #34465d;
    --primary: #45a9ca;
    --primary-strong: #79cbea;
    --primary-soft: #173f50;
    --primary-soft-ink: #bdeeff;
    --accent: #f0ad4e;
    --success: #55d6a0;
    --danger: #ff9188;
    --sidebar: #061321;
    --sidebar-muted: #aabbd0;
    --sidebar-link: #dce8f5;
    --sidebar-line: rgba(255, 255, 255, .22);
    --sidebar-hover: rgba(255, 255, 255, .14);
    --sidebar-control: rgba(255, 255, 255, .1);
    --sidebar-danger: #ffaaa3;
    --input-bg: #0c1727;
    --row-hover: #17283c;
    --panel-shadow: rgba(0, 0, 0, .28);
    --backdrop: rgba(0, 0, 0, .68);
    --login-gradient-start: #030a13;
    --login-gradient-mid: #0b3444;
    --login-gradient-end: #6f4615;
    --login-shadow: rgba(0, 0, 0, .52);
    --info-border: #28647a;
    --info-bg: #102f3d;
    --info-ink: #bdeeff;
    --warning-border: #8a5426;
    --warning-bg: #382311;
    --warning-ink: #ffd4a3;
    --notice-border: #8b6a25;
    --notice-bg: #342a12;
    --notice-ink: #ffe29a;
    --neutral-bg: #29384b;
    --neutral-ink: #d7e1ec;
    --success-bg: #153d2d;
    --success-ink: #a7f3d0;
    --danger-bg: #49201f;
    --danger-ink: #ffc0ba;
    --alert-error-bg: #49201f;
    --alert-info-bg: #102f3d;
    --on-primary: #06131c;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea,
body .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button {
    font-family: var(--font-sans);
}

select {
    color-scheme: light;
}

:root[data-theme="dark"] select {
    color-scheme: dark;
}

select option {
    background: var(--panel) linear-gradient(var(--panel), var(--panel));
    color: var(--ink);
    font-weight: 500;
}

select option:hover,
select option:focus {
    background: var(--primary-soft) linear-gradient(var(--primary-soft), var(--primary-soft));
    color: var(--primary-soft-ink);
}

select option:checked {
    background: var(--primary) linear-gradient(var(--primary), var(--primary));
    color: var(--on-primary);
    font-weight: 700;
}

select option:disabled {
    background: var(--panel-soft) linear-gradient(var(--panel-soft), var(--panel-soft));
    color: var(--subtle);
}

.table-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}
.table-toolbar { flex-wrap: wrap; }
.confirmation-dialog[data-tone="export"] .confirmation-icon {
    color: var(--primary-soft-ink);
    background: var(--primary-soft);
}

/* Personaliza el panel completo de opciones cuando el navegador lo permite. */
@supports (appearance: base-select) {
    select,
    ::picker(select) {
        appearance: base-select;
    }

    ::picker(select) {
        margin-block: .25rem;
        padding: .25rem;
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        color: var(--ink);
        box-shadow: 0 12px 28px var(--panel-shadow);
    }

    select option {
        min-height: 40px;
        padding: .55rem .75rem;
        border-radius: 6px;
    }
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.dashboard-welcome {
    margin-bottom: 2rem;
}

.dashboard-welcome h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--heading);
}

.dashboard-welcome h2 span {
    font-weight: 700;
    color: var(--primary);
}

.dashboard-welcome .welcome-icon {
    margin-left: .2rem;
    color: #f59e0b;
    font-size: .9em;
    transform: rotate(-12deg);
}

.dashboard-welcome p {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.app-version {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 2rem;

    font-size: 0.85rem;
    color: var(--subtle);
}

.app-version i {
    font-size: 0.8rem;
}

.app-version span {
    font-weight: 600;
    color: var(--muted);
}

.sidebar {
    background: var(--sidebar);
    color: var(--sidebar-ink);
    min-height: 100vh;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 0;
}

.brand-lockup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-logo {
    width: 230px;
    max-width: 80%;
    height: auto;
    object-fit: contain;
    display: block;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sidebar-logo {
    width: 180px;
    max-width: 80%;
    height: auto;
    object-fit: contain;
    display: block;
}

.sidebar-brand,
.brand-lockup {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.section-kicker {
    color: var(--sidebar-muted);
    display: block;
    margin: 0;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.nav-item {
    color: var(--sidebar-link);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 44px;
    padding: .75rem .85rem;
    border-radius: 8px;
}

.nav-item > i {
    width: 1.15rem;
    flex: 0 0 1.15rem;
    text-align: center;
}

.nav-item:hover,
.nav-item:focus {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink);
}

.nav-item-active,
.nav-item-active:hover,
.nav-item-active:focus {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
}

.logout-link {
    color: var(--sidebar-danger);
}

.sidebar-footer {
    display: grid;
    gap: .65rem;
}

.theme-picker {
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.theme-picker-label {
    display: block;
    margin: 0 .2rem .35rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}

.theme-option {
    min-height: 38px;
    padding: .45rem .55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.theme-option:hover {
    border-color: var(--line);
    color: var(--ink);
}

.theme-option:focus-visible {
    outline: 3px solid var(--primary-soft);
    outline-offset: 2px;
}

.theme-option-active,
.theme-option-active:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

.sidebar .theme-picker {
    border-color: var(--sidebar-line);
    background: var(--sidebar-control);
}

.sidebar .theme-picker-label,
.sidebar .theme-option {
    color: var(--sidebar-link);
}

.sidebar .theme-option:hover {
    border-color: var(--sidebar-line);
    color: var(--sidebar-ink);
}

.sidebar .theme-option-active,
.sidebar .theme-option-active:hover {
    border-color: var(--sidebar-control-active);
    background: var(--sidebar-control-active);
    color: var(--sidebar-control-active-ink);
}

.login-theme-picker {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.login-theme-picker .theme-picker {
    width: min(100%, 220px);
}

.content {
    min-width: 0;
    padding: 1.25rem;
}

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.topbar h1 {
    margin: .15rem 0 0;
    font-size: clamp(1.35rem, 2vw, 2rem);
    letter-spacing: -.025em;
}

.menu-toggle,
.sidebar-close,
.menu-button,
.backdrop {
    display: none;
}

.page-grid {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.panel,
.metric-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px var(--panel-shadow);
}

.panel {
    padding: 1rem;
}

.panel-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

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

.table-toolbar .panel-title {
    margin: 0;
}

.field-stack {
    display: grid;
    gap: .75rem;
}

.dialog-fields {
    padding-top: .75rem;
}

.form-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
    width: 100%;
}

.form-field > label,
.form-field .ui-outputlabel {
    color: var(--muted-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}

.responsive-dialog {
    max-width: calc(100vw - 2rem);
}

.responsive-dialog .ui-dialog-content {
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.dialog-fields > *,
.dialog-fields .ui-float-label,
.dialog-fields .form-field {
    min-width: 0;
    width: 100%;
}

.dialog-fields .ui-inputfield,
.dialog-fields .ui-inputnumber,
.dialog-fields .ui-inputnumber-input,
.dialog-fields .ui-selectonemenu,
.dialog-fields .ui-autocomplete,
.dialog-fields .ui-calendar,
.dialog-fields textarea {
    width: 100%;
}

.dialog-fields .ui-autocomplete,
.dialog-fields .ui-calendar {
    display: flex;
}

.dialog-fields .ui-autocomplete-input,
.dialog-fields .ui-calendar .ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

.dialog-fields textarea {
    max-width: 100%;
    resize: vertical;
}

.dialog-fields .ui-inputfield,
.dialog-fields .ui-selectonemenu,
.dialog-fields .ui-button {
    min-height: 42px;
}

.dialog-actions {
    justify-content: flex-end;
}

.form-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

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

.metric-card {
    padding: 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-card span {
    color: var(--muted);
    font-size: .92rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.metric-card strong {
    font-size: 2rem;
    letter-spacing: -.025em;
}

.metric-card i {
    color: var(--primary);
    font-size: 1.4rem;
}

.metric-card-online i {
    color: var(--success-ink);
}

.occupancy-heading {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.occupancy-heading small, .occupancy-note, #occupancy-dashboard .metric-card small {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 400;
}

.occupancy-heading small { margin-left: .5rem; }
.occupancy-note { margin: 0 0 1rem; }
.occupancy-grid { padding-bottom: 1.5rem; }
.occupancy-projection { gap: .5rem; }
.occupancy-projection span { padding: 0; }
.occupancy-projection progress {
    width: 100%;
    height: .5rem;
    accent-color: var(--primary);
}

.metric-card-online small {
    color: var(--success-ink);
    font-size: .75rem;
    font-weight: 700;
}

.metric-money-list {
    display: grid;
    gap: .65rem;
}

.metric-money-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.metric-money-row + .metric-money-row {
    border-top: 1px solid var(--line);
    padding-top: .65rem;
}

.metric-money-row small {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .15rem .4rem;
}

.metric-money-row strong {
    font-size: 1.35rem;
    text-align: right;
}

.money-positive strong {
    color: var(--success);
}

.money-negative strong {
    color: var(--danger);
}

.table-panel {
    overflow-x: auto;
}

.table-panel .ui-datatable {
    min-width: 0;
}

.table-panel .ui-datatable table {
    width: 100%;
}

.table-panel .ui-datatable td {
    overflow-wrap: anywhere;
}

.table-panel .ui-paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: .35rem;
}

.finance-chart-section {
    margin-bottom: 1rem;
}

.finance-chart-toolbar {
    align-items: flex-start;
}

.finance-chart-toolbar .panel-help {
    margin: .35rem 0 0;
}

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

.finance-chart-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.finance-chart-card h3 {
    margin: 0;
    font-size: 1rem;
}

.finance-chart-currency {
    margin: .3rem 0 .75rem;
    color: var(--muted);
    font-size: .85rem;
}

.finance-pie-chart {
    display: block;
    width: 100%;
    height: 320px;
}

.finance-chart-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--muted);
    text-align: center;
}

.finance-chart-empty i {
    font-size: 2rem;
}

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--login-gradient-start) 0%, var(--login-gradient-mid) 58%, var(--login-gradient-end) 100%);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-panel {
    width: min(100%, 430px);
    background: var(--panel);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 24px 70px var(--login-shadow);
}

.login-form {
    margin-top: 1.5rem;
    display: grid;
    gap: .75rem;
}

.login-form .login-field input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: var(--input-bg);
    color: var(--ink);
    border-radius: 0 8px 8px 0;
    padding: .75rem;
    font: inherit;
}

.login-field {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    cursor: text;
}

.login-field > i {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    color: var(--ink);
    pointer-events: none;
}

.login-field:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.login-form .login-field input:focus {
    outline: none;
}

.remember-session {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    cursor: pointer;
    color: var(--ink);
}

.remember-session input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
}

.remember-session input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.remember-help {
    color: var(--ink);
    line-height: 1.5;
}

.primary-login {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
}

.primary-login:hover {
    background: var(--primary-strong);
}

.alert-error,
.alert-info {
    padding: .75rem;
    border-radius: 8px;
}

.alert-error {
    background: var(--alert-error-bg);
    color: var(--danger);
}

.alert-info {
    background: var(--alert-info-bg);
    color: var(--primary-strong);
}

.schedule-panel {
    min-height: 70vh;
}

.calendar-overview {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-count-card {
    min-height: 150px;
}

.calendar-count-card strong {
    color: var(--primary);
}

.calendar-count-card small {
    color: var(--muted);
}

.calendar-count-heading,
.calendar-toolbar,
.tenant-legend-list,
.tenant-legend-item {
    display: flex;
    align-items: center;
}

.calendar-count-heading {
    gap: .5rem;
}

.calendar-count-heading i {
    color: var(--primary);
    font-size: 1.25rem;
}

.calendar-count-heading span {
    padding: 0;
    color: var(--heading);
    font-weight: 700;
}

.calendar-legend {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.calendar-legend .panel-title,
.calendar-legend .panel-help,
.calendar-toolbar .panel-title,
.calendar-toolbar .panel-help {
    margin: 0;
}

.tenant-legend-list {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.tenant-legend-item {
    gap: .45rem;
    padding: .35rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
}

.tenant-color {
    width: .8rem;
    height: .8rem;
    flex: 0 0 .8rem;
    border: 2px solid;
    border-radius: 50%;
}

.calendar-toolbar {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-actions,
.calendar-month-navigation,
.calendar-day-number {
    display: flex;
    align-items: center;
}

.calendar-actions {
    gap: .5rem;
}

.calendar-month-navigation {
    justify-content: center;
    gap: 1rem;
    padding: .5rem 0 1rem;
}

.calendar-month-navigation h2 {
    width: min(320px, 55vw);
    margin: 0;
    color: var(--heading);
    font-size: 1.35rem;
    text-align: center;
}

.calendar-grid-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.real-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(135px, 1fr));
    min-width: 945px;
}

.calendar-weekday {
    padding: .65rem .5rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.calendar-weekday:nth-child(7) {
    border-right: 0;
}

.calendar-day {
    min-width: 0;
    min-height: 150px;
    padding: .45rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.calendar-day:nth-child(7n + 14) {
    border-right: 0;
}

.calendar-day:nth-last-child(-n + 7) {
    border-bottom: 0;
}

.calendar-day-outside {
    background: var(--panel-soft);
}

.calendar-day-outside .calendar-day-number {
    opacity: .48;
}

.calendar-day-today {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.calendar-day-number {
    justify-content: space-between;
    min-height: 1.8rem;
    margin-bottom: .3rem;
    color: var(--heading);
    font-size: .88rem;
    font-weight: 800;
}

.today-label {
    padding: .1rem .35rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    font-size: .65rem;
    text-transform: uppercase;
}

.calendar-day-bookings {
    display: grid;
    gap: .3rem;
}

.calendar-booking {
    display: grid;
    gap: .08rem;
    min-width: 0;
    padding: .35rem .4rem;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .15);
    line-height: 1.25;
}

.calendar-booking strong,
.calendar-booking span,
.calendar-booking small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-booking strong {
    font-size: .75rem;
}

.calendar-booking span,
.calendar-booking small {
    font-size: .66rem;
}

.calendar-booking small {
    font-weight: 800;
}

.argentina-clock {
    margin-left: auto;
    display: grid;
    flex-shrink: 0;
}

.argentina-clock-label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.argentina-clock time {
    font-size: 1.12rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.season-selector[hidden] {
    display: none;
}

.season-selector {
    min-width: min(320px, 100%);
    display: grid;
    gap: .3rem;
}

.season-selector label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.season-selector .ui-selectonemenu {
    width: 100%;
}

.season-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: -.35rem 0 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--info-border);
    border-radius: 8px;
    background: var(--info-bg);
    color: var(--info-ink);
    font-size: .9rem;
}

.season-banner-empty {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-ink);
}

.impersonation-banner {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .75rem .85rem;
    border: 1px solid var(--notice-border);
    border-radius: 8px;
    background: var(--notice-bg);
    color: var(--notice-ink);
}

.impersonation-banner[hidden] {
    display: none;
}

.impersonation-banner .ui-button {
    margin-left: auto;
    white-space: nowrap;
}

.season-banner a {
    margin-left: auto;
    color: inherit;
    font-weight: 700;
}

.read-only-tag,
.status-pill {
    display: inline-flex;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.read-only-tag,
.status-closed {
    background: var(--neutral-bg);
    color: var(--neutral-ink);
}

.status-active {
    background: var(--success-bg);
    color: var(--success-ink);
}

.status-reserva-activa {
    background: var(--success-bg);
    color: var(--success-ink);
}

.status-reserva-finalizada {
    background: var(--info-bg);
    color: var(--info-ink);
}

.status-reserva-cancelada {
    background: var(--danger-bg);
    color: var(--danger-ink);
}

.status-inactive {
    background: var(--danger-bg);
    color: var(--danger-ink);
}

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

.audit-intro .panel-title,
.audit-intro .panel-help {
    margin-bottom: .25rem;
}

.audit-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    margin-bottom: 1rem;
}

.audit-filters > div {
    display: grid;
    gap: .3rem;
}

.audit-filters label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.audit-filters .ui-selectonemenu {
    width: 100%;
}

.audit-action-creacion {
    background: var(--success-bg);
    color: var(--success-ink);
}

.audit-action-eliminacion {
    background: var(--danger-bg);
    color: var(--danger-ink);
}

.audit-action-restauracion {
    background: var(--info-bg);
    color: var(--info-ink);
}

.audit-detail-heading,
.audit-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.audit-detail-heading {
    align-items: center;
    margin-bottom: 1rem;
}

.audit-detail {
    display: block;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    line-height: 1.7;
    white-space: pre-wrap;
}

.audit-detail-meta {
    flex-direction: column;
    margin-top: 1rem;
    color: var(--muted);
    font-size: .88rem;
}

.panel-help,
.muted-text {
    color: var(--muted);
    font-size: .88rem;
}

.date-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.date-fields > div {
    display: grid;
    gap: .3rem;
}

body .ui-widget-content,
body .ui-dialog .ui-dialog-titlebar,
body .ui-dialog .ui-dialog-content,
body .ui-confirm-dialog .ui-dialog-content,
body .ui-overlaypanel,
body .ui-selectonemenu-panel,
body .ui-autocomplete-panel,
body .ui-datepicker,
body .ui-menu {
    border-color: var(--line);
    background: var(--panel);
    color: var(--ink);
}

body .ui-inputfield,
body .ui-selectonemenu,
body .ui-selectonemenu .ui-selectonemenu-label,
body .ui-autocomplete-input,
body textarea.ui-inputfield {
    border-color: var(--line);
    background: var(--input-bg);
    color: var(--ink);
}

body .ui-inputfield::placeholder,
body textarea.ui-inputfield::placeholder {
    color: var(--subtle);
    opacity: 1;
}

body .ui-selectonemenu .ui-selectonemenu-trigger,
body .ui-datepicker .ui-datepicker-header,
body .ui-paginator {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--ink);
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item,
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item,
body .ui-menu .ui-menuitem-link {
    color: var(--ink);
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight,
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight,
body .ui-menu .ui-menuitem-link:hover {
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

body .ui-datatable .ui-datatable-data > tr {
    background: var(--panel);
    color: var(--ink);
}

body .ui-datatable .ui-datatable-data > tr:hover {
    background: var(--row-hover);
}

body .ui-datatable .ui-datatable-data > tr > td,
body .ui-datatable .ui-datatable-thead > tr > th {
    border-color: var(--line);
}

body .ui-datatable .ui-datatable-thead > tr > th {
    background: var(--panel-soft);
    color: var(--ink);
}

body .ui-paginator .ui-paginator-page,
body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last,
body .ui-datepicker a,
body .ui-datepicker th,
body .ui-datepicker td {
    color: var(--ink);
}

body .ui-paginator .ui-paginator-page.ui-state-active,
body .ui-datepicker td > a.ui-state-active {
    background: var(--primary);
    color: var(--on-primary);
}

body .ui-widget-overlay {
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

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

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 310px);
        z-index: 30;
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    .menu-toggle:checked ~ .sidebar {
        transform: translateX(0);
    }

    .menu-toggle:checked ~ .backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--backdrop);
        z-index: 20;
    }

    .sidebar-close,
    .menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        cursor: pointer;
    }

    .sidebar-close {
        margin-left: auto;
    }

    .menu-button {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--ink);
    }

    .page-grid,
    .metric-grid,
    .finance-charts-grid,
    .calendar-overview {
        grid-template-columns: 1fr;
    }

    #metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #metric-grid > .money-positive,
    #metric-grid > .money-negative {
        grid-column: 1 / -1;
    }

    .calendar-legend {
        display: grid;
    }

    .tenant-legend-list {
        justify-content: flex-start;
    }

    .audit-filters {
        grid-template-columns: 1fr 1fr;
    }

    .content {
        padding: 1rem;
    }

    /* En tablet y celular cada registro se presenta como una card, sin tabla ancha. */
    .content .table-scroll {
        overflow-x: visible;
    }

    .data-table {
        display: block;
        min-width: 0;
    }

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

    .data-table tbody {
        display: grid;
        gap: .85rem;
    }

    .data-table tbody > tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--panel);
        box-shadow: 0 5px 14px var(--panel-shadow);
    }

    .data-table tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
        gap: .75rem;
        width: 100%;
        padding: .7rem .8rem;
        overflow-wrap: anywhere;
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }

    .data-table tbody > tr > td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .data-table tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .data-table tbody > tr > td.actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .35rem;
        white-space: normal;
    }

    .data-table tbody > tr > td.actions::before {
        width: max(8rem, 30%);
        flex: 0 0 max(8rem, 30%);
    }

    .data-table tbody > tr > td.actions .icon-btn {
        margin: 0;
    }

    .data-table tbody > tr > td.empty-state {
        display: block;
        border: 0;
    }

    .data-table tbody > tr > td.empty-state::before {
        content: none;
    }

    /* El calendario conserva siempre sus siete columnas dentro del viewport. */
    .calendar-grid-scroll {
        overflow-x: hidden;
    }

    .real-calendar {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-weekday {
        min-width: 0;
        padding: .55rem .2rem;
        font-size: .68rem;
    }

    .calendar-day {
        min-height: 118px;
        padding: .28rem;
    }

    .calendar-day-number {
        min-height: 1.4rem;
        margin-bottom: .18rem;
        font-size: .76rem;
    }

    .calendar-day-number span {
        display: none;
    }

    .calendar-day-bookings {
        gap: .18rem;
    }

    .real-calendar .calendar-booking {
        gap: .04rem;
        margin-top: 0;
        padding: .24rem .2rem;
        border-left-width: 3px;
        font-size: .62rem;
        line-height: 1.2;
    }

    .real-calendar .calendar-booking strong {
        font-size: .62rem;
    }

    .real-calendar .calendar-booking span,
    .real-calendar .calendar-booking small {
        font-size: .56rem;
    }
}

@media (max-width: 560px) {
    .content {
        padding: .75rem;
    }

    .panel {
        padding: .8rem;
    }

    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .season-selector {
        width: 100%;
        margin-left: 0;
    }

    .impersonation-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .impersonation-banner .ui-button {
        width: 100%;
        margin-left: 0;
    }

    .metric-card {
        min-height: 96px;
    }

    .table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-chart-toolbar .ui-selectonebutton {
        display: flex;
        width: 100%;
    }

    .finance-chart-toolbar .ui-selectonebutton .ui-button {
        flex: 1 1 50%;
        width: auto;
    }

    .finance-pie-chart {
        height: 280px;
    }

    .calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-toolbar .ui-button {
        flex: 1 1 auto;
    }

    .calendar-actions {
        width: 100%;
    }

    .calendar-actions .ui-button:first-child {
        flex: 1 1 auto;
    }

    .audit-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-filters {
        grid-template-columns: 1fr;
    }

    .table-toolbar .ui-button {
        width: 100%;
    }

    .responsive-dialog,
    .responsive-confirm-dialog {
        left: .5rem !important;
        right: .5rem !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: 0;
    }

    .responsive-dialog .ui-dialog-titlebar,
    .responsive-confirm-dialog .ui-dialog-titlebar {
        padding: .85rem 1rem;
    }

    .responsive-dialog .ui-dialog-content,
    .responsive-confirm-dialog .ui-dialog-content {
        max-height: calc(100vh - 5.5rem);
        max-height: calc(100dvh - 5.5rem);
        padding: .85rem;
        overflow-y: auto;
    }

    .responsive-dialog .ui-dialog-title {
        max-width: calc(100% - 2.5rem);
        white-space: normal;
    }

    .dialog-fields {
        gap: 1rem;
    }

    .dialog-fields .ui-inputfield,
    .dialog-fields .ui-selectonemenu,
    .dialog-fields .ui-button {
        min-height: 44px;
    }

    .date-fields {
        grid-template-columns: 1fr;
    }

    .dialog-actions {
        flex-direction: column;
    }

    .dialog-actions .ui-button {
        width: 100%;
        margin: 0;
    }

    .data-table tbody > tr > td {
        grid-template-columns: minmax(6.25rem, 38%) minmax(0, 1fr);
        gap: .55rem;
        padding: .65rem .7rem;
    }

    .data-table tbody > tr > td.actions::before {
        width: max(6.25rem, 38%);
        flex-basis: max(6.25rem, 38%);
    }

    .calendar-month-navigation {
        gap: .45rem;
    }

    .calendar-month-navigation h2 {
        width: auto;
        flex: 1 1 auto;
        font-size: 1rem;
    }

    .calendar-month-navigation .btn {
        min-width: 40px;
        padding: .5rem;
    }

    .calendar-weekday {
        padding: .45rem .05rem;
        font-size: .58rem;
        letter-spacing: 0;
    }

    .calendar-day {
        min-height: 88px;
        padding: .16rem;
    }

    .calendar-day-number {
        min-height: 1.15rem;
        margin-bottom: .1rem;
        font-size: .67rem;
    }

    .real-calendar .calendar-booking {
        min-height: 1.15rem;
        padding: .18rem .12rem;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 3px;
    }

    .real-calendar .calendar-booking strong {
        font-size: .54rem;
        line-height: 1.15;
    }

    .real-calendar .calendar-booking span,
    .real-calendar .calendar-booking small {
        display: none;
    }
}

@media (max-width: 640px) {
    .table-panel {
        overflow-x: visible;
    }

    .table-panel .ui-datatable-reflow .ui-datatable-data > tr {
        display: block;
        margin-bottom: .85rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        overflow: hidden;
    }

    .table-panel .ui-datatable-reflow .ui-datatable-data > tr > td {
        width: 100% !important;
        padding: .75rem;
        border-width: 0 0 1px;
        border-color: var(--line);
        white-space: normal;
    }

    .table-panel .ui-datatable-reflow .ui-datatable-data > tr > td:last-child {
        border-bottom: 0;
    }

    .table-panel .ui-datatable-reflow .ui-column-title {
        min-width: 42%;
        margin-right: .65rem;
        color: var(--muted);
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.4;
        text-transform: uppercase;
        vertical-align: top;
    }

    .table-panel .ui-datatable-reflow td:last-child .ui-button {
        min-width: 42px;
        min-height: 42px;
        margin-top: .25rem;
    }

    .table-panel .ui-datatable-reflow .ui-datatable-emptymessage {
        border: 0;
        text-align: center;
    }

    .table-panel .ui-paginator {
        padding: .6rem .25rem;
    }
}

/* Componentes nativos de las vistas Spring MVC/Thymeleaf. */
.button-reset {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.btn,
.icon-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.btn {
    min-height: 42px;
    padding: .65rem 1rem;
}

.btn > i {
    margin-right: .35rem;
}

.btn[aria-label] > i {
    margin-right: 0;
}

.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:disabled,
.icon-btn:disabled {
    cursor: not-allowed;
    opacity: .42;
}

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

.btn-success, .icon-btn.success {
    color: #fff;
    background: #16a34a;
}

.btn-danger {
    color: #fff;
    background: #dc2626;
}

.btn-secondary {
    color: var(--ink);
    border-color: var(--line);
    background: var(--panel-soft);
}

.btn-warning, .icon-btn.warning {
    color: #422006;
    background: #fbbf24;
}

.btn-small {
    min-height: 34px;
    padding: .4rem .7rem;
    font-size: .82rem;
}

.icon-btn {
    width: 38px;
    height: 38px;
    margin: .15rem;
    color: #fff;
    background: var(--primary);
}

.icon-btn.danger {
    background: #dc2626;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
}

.data-table th,
.data-table td {
    padding: .9rem .8rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--muted);
    font-size: .76rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table .actions {
    white-space: nowrap;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.empty-state {
    padding: 2.5rem !important;
    color: var(--muted);
    text-align: center !important;
}

.season-selector select,
.audit-filters select,
.finance-chart-toolbar select,
.mvc-dialog input,
.mvc-dialog select,
.mvc-dialog textarea {
    width: 100%;
    min-height: 44px;
    padding: .68rem .75rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: var(--panel);
    font: inherit;
}

.mvc-dialog textarea {
    resize: vertical;
}

.mvc-dialog input:focus,
.mvc-dialog select:focus,
.mvc-dialog textarea:focus,
.season-selector select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Selectores de fecha y horario consistentes en todos los navegadores. */
.form-picker {
    position: relative;
    width: 100%;
    min-width: 0;
}

.mvc-dialog .form-picker-native {
    position: absolute;
    inset: 50% auto auto .75rem;
    width: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.form-picker-trigger {
    width: 100%;
    min-height: 44px;
    padding: 0 0 0 .8rem;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: .65rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: var(--input-bg);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.form-picker-trigger:hover {
    border-color: var(--primary);
    background: var(--panel-soft);
}

.form-picker-trigger:focus-visible,
.form-picker-open .form-picker-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.form-picker-invalid .form-picker-trigger {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

.form-picker-value {
    min-width: 0;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-picker-value.is-placeholder {
    color: var(--subtle);
    font-weight: 500;
}

.form-picker-icon {
    width: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-left: 1px solid var(--line);
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

.form-picker-panel {
    position: fixed;
    z-index: 2147483647;
    inset: auto;
    width: min(350px, calc(100vw - 4.75rem));
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: .85rem;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 18px 45px color-mix(in srgb, var(--backdrop) 55%, transparent);
}

.form-picker-panel-time {
    width: min(370px, calc(100vw - 4.75rem));
    max-height: min(530px, calc(100vh - 8rem));
    max-height: min(530px, calc(100dvh - 1.5rem));
    overflow-y: auto;
}

.form-picker-panel[hidden] {
    display: none;
}

.picker-calendar-heading,
.picker-time-heading,
.picker-panel-footer {
    display: flex;
    align-items: center;
}

.picker-calendar-heading {
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .7rem;
}

.picker-calendar-heading strong {
    color: var(--heading);
    font-size: .95rem;
    text-align: center;
}

.picker-nav {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--primary);
    cursor: pointer;
}

.picker-nav:hover,
.picker-nav:focus-visible,
.picker-shortcut:hover,
.picker-shortcut:focus-visible {
    border-color: var(--primary);
    outline: none;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

.picker-weekdays,
.picker-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .28rem;
}

.picker-weekdays {
    margin-bottom: .28rem;
}

.picker-weekdays span {
    padding: .25rem 0;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.picker-cell {
    min-width: 0;
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: none;
    background: var(--panel-soft);
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}

.picker-cell:hover,
.picker-cell:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    transform: translateY(-1px);
}

.picker-cell.is-selected,
.picker-cell.is-selected:hover,
.picker-cell.is-selected:focus-visible {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 32%, transparent);
}

.picker-day-outside {
    border-color: transparent;
    background: transparent;
    color: var(--subtle);
}

.picker-day-today:not(.is-selected) {
    border: 2px solid var(--accent);
    color: var(--heading);
}

.picker-cell:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--subtle);
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.picker-panel-footer {
    justify-content: flex-end;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
}

.picker-shortcut,
.picker-confirm {
    min-height: 38px;
    padding: .45rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--primary-strong);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.picker-shortcut i {
    margin-right: .35rem;
}

.picker-time-heading {
    gap: .55rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
}

.picker-time-heading i {
    font-size: 1.05rem;
}

.picker-time-section {
    margin-top: .8rem;
}

.picker-section-label {
    display: block;
    margin-bottom: .4rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.picker-hours-grid,
.picker-minutes-grid {
    display: grid;
    gap: .32rem;
}

.picker-hours-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.picker-minutes-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.picker-time-cell {
    min-height: 36px;
}

.picker-confirm {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.picker-confirm:hover,
.picker-confirm:focus-visible {
    outline: none;
    background: var(--primary-strong);
}

.picker-confirm:disabled {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--subtle);
    cursor: not-allowed;
}

.field-stack label,
.form-grid label,
.audit-filters label,
.finance-chart-toolbar label {
    display: grid;
    gap: .42rem;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.mvc-dialog .dialog-fields label {
    color: var(--ink);
}

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

.checkbox-field {
    display: flex !important;
    align-items: center;
    gap: .6rem !important;
    color: var(--ink) !important;
}

.checkbox-field input {
    width: 20px;
    min-height: 20px;
    accent-color: var(--primary);
}

.mvc-dialog {
    width: min(520px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.35rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.mvc-dialog-wide {
    width: min(680px, calc(100% - 2rem));
}

.mvc-dialog::backdrop {
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
}

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

.dialog-heading h2 {
    margin: 0;
    font-size: 1.15rem;
}

.confirmation-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.confirmation-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: var(--danger-ink);
    border-radius: 50%;
    background: var(--danger-bg);
    font-size: 1.05rem;
}

.confirmation-dialog[data-tone="restore"] .confirmation-icon,
.confirmation-dialog[data-tone="open"] .confirmation-icon {
    color: #166534;
    background: #dcfce7;
}

[data-theme="dark"] .confirmation-dialog[data-tone="restore"] .confirmation-icon,
[data-theme="dark"] .confirmation-dialog[data-tone="open"] .confirmation-icon {
    color: #bbf7d0;
    background: #153d28;
}

.confirmation-dialog[data-tone="warning"] .confirmation-icon {
    color: var(--warning-ink);
    background: var(--warning-bg);
}

.confirmation-message {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.55;
}

.confirmation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--line);
}

.confirmation-details > div {
    min-width: 0;
    padding: .8rem .9rem;
    background: var(--panel-soft);
}

.confirmation-details dt {
    margin-bottom: .2rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.confirmation-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 700;
}

.confirmation-note {
    display: flex;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .75rem .85rem;
    color: var(--muted);
    border-radius: 8px;
    background: var(--panel-soft);
    font-size: .82rem;
    line-height: 1.5;
}

.confirmation-note::before {
    content: "\f05a";
    color: var(--primary);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.dialog-close {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: var(--muted);
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    cursor: pointer;
}

.mvc-dialog form {
    margin: 0;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
}

.dialog-fields small {
    font-weight: 500;
}

.mvc-message {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid;
    border-radius: 9px;
}

.mvc-message-info {
    color: #166534;
    border-color: #86efac;
    background: #f0fdf4;
}

.mvc-message-error {
    color: #991b1b;
    border-color: #fca5a5;
    background: #fef2f2;
}

.mvc-message button {
    margin-left: auto;
    color: inherit;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
}

[data-theme="dark"] .mvc-message-info {
    color: #bbf7d0;
    border-color: #166534;
    background: #052e16;
}

[data-theme="dark"] .mvc-message-error {
    color: #fecaca;
    border-color: #991b1b;
    background: #450a0a;
}

.metric-icon {
    font-size: 1.25rem;
}

.css-pie {
    width: 190px;
    height: 190px;
    margin: 1rem auto;
    border: 8px solid var(--panel);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line);
}

.chart-legend {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.chart-legend li {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}

.chart-legend li > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.finance-chart-card h3 {
    margin-bottom: 0;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin: .25rem .5rem .25rem 0;
}

.calendar-legend-item i {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
}

.calendar-day-number span {
    margin-left: .35rem;
    color: var(--primary);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.real-calendar .calendar-booking {
    display: grid;
    gap: .2rem;
    margin-top: .3rem;
    padding: .4rem;
    border-left: 4px solid;
    border-radius: 5px;
    color: var(--ink);
    font-size: .72rem;
    line-height: 1.4;
}

.real-calendar .calendar-booking strong,
.real-calendar .calendar-booking span,
.real-calendar .calendar-booking small {
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .72rem;
    line-height: 1.4;
}

.real-calendar .calendar-booking strong {
    font-size: .8rem;
}

.real-calendar .calendar-booking .calendar-booking-schedule {
    padding: .3rem .4rem;
    border-radius: 4px;
    background: var(--panel);
    color: var(--heading);
    font-size: .8rem;
    font-weight: 800;
}

.calendar-grid-scroll {
    overflow-x: auto;
}

.real-calendar {
    min-width: 945px;
    grid-template-columns: repeat(7, minmax(135px, 1fr));
}

.real-calendar .calendar-day {
    min-height: 150px;
    padding: .5rem;
}

.real-calendar .calendar-day-number {
    font-size: 1rem;
}

.real-calendar .calendar-weekday {
    font-size: .8rem;
    padding: .65rem .5rem;
}

.reservation-duration {
    display: grid;
    gap: .35rem;
    padding: .8rem 1rem;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.reservation-duration small {
    color: var(--muted);
}

.calendar-day-trigger,
.calendar-mobile-help {
    display: none;
}

.calendar-reservation-detail {
    padding: .85rem;
    margin-bottom: .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    overflow-wrap: anywhere;
}

.calendar-reservation-detail h3 {
    margin: 0;
    font-size: 1rem;
}

.calendar-detail-movement {
    color: var(--heading);
    font-weight: 800;
    margin: .5rem 0;
}

.calendar-reservation-detail dl {
    margin: 0;
    display: grid;
    gap: .6rem;
}

.calendar-reservation-detail dt {
    color: var(--muted);
    font-size: .8rem;
}

.calendar-reservation-detail dd {
    margin: .1rem 0 0;
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .calendar-grid-scroll {
        overflow-x: hidden;
    }

    .real-calendar {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .real-calendar .calendar-day {
        position: relative;
        min-height: 85px;
        padding: .18rem;
    }

    .calendar-mobile-help {
        display: block;
    }

    .calendar-day-trigger {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        z-index: 1;
    }

    .calendar-day-trigger:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .real-calendar .calendar-day-number {
        font-size: .75rem;
    }

    .real-calendar .calendar-weekday {
        font-size: .62rem;
        padding: .5rem 0;
        letter-spacing: 0;
    }

    .real-calendar .calendar-booking {
        padding: .2rem .1rem;
        gap: 0;
        border-left-width: 3px;
    }

    .real-calendar .calendar-booking strong {
        font-size: .6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .real-calendar .calendar-booking span,
    .real-calendar .calendar-booking small {
        display: none;
    }
}

.audit-detail {
    max-height: 280px;
    overflow: auto;
    padding: 1rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    white-space: pre-wrap;
    font: inherit;
}

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

    .dialog-actions {
        flex-direction: column;
    }

    .dialog-actions .btn {
        width: 100%;
    }

    .mvc-dialog {
        padding: 1rem;
    }

    .form-picker-panel,
    .form-picker-panel-time {
        width: min(350px, calc(100vw - 4rem));
    }

    .picker-hours-grid,
    .picker-minutes-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .confirmation-details {
        grid-template-columns: 1fr;
    }
}