:root {
    color-scheme: light;
    --font-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --bg: #f5f4f9;
    --panel: #ffffff;
    --panel-soft: #f3f1f8;
    --ink: #35334a;
    --heading: #211d39;
    --muted: #716d85;
    --subtle: #827d95;
    --line: #e5e1ee;
    --primary: #7050d4;
    --primary-strong: #5938b6;
    --primary-soft: #eee8fc;
    --primary-soft-ink: #5835ac;
    --accent: #c2721c;
    --success: #21815e;
    --danger: #b42318;
    --sidebar: #211d38;
    --sidebar-ink: #ffffff;
    --sidebar-muted: #aaa3c4;
    --sidebar-link: #ded9ee;
    --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: #211d38;
    --sidebar-danger: #fda4af;
    --input-bg: #ffffff;
    --row-hover: #f7f4ff;
    --panel-shadow: rgba(40, 28, 79, .045);
    --backdrop: rgba(15, 23, 42, .45);
    --login-gradient-start: #211d38;
    --login-gradient-mid: #4f368b;
    --login-gradient-end: #bd6b79;
    --login-shadow: rgba(0, 0, 0, .25);
    --info-border: #ded5f5;
    --info-bg: #f0ebfc;
    --info-ink: #5835ac;
    --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;
    --violet: #7050d4;
    --violet-bg: #f0eafa;
    --violet-ink: #5835ac;
    --coral: #cf6352;
    --coral-bg: #fff0e9;
    --coral-ink: #a44738;
    --mint: #258267;
    --mint-bg: #e6f5ee;
    --mint-ink: #1c7057;
    --amber: #b97b20;
    --amber-bg: #fff4da;
    --amber-ink: #8b5b12;
    --sky: #397daf;
    --sky-bg: #e9f2fd;
    --sky-ink: #2b6799;
    --radius-panel: 18px;
    --radius-control: 11px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14121f;
    --panel: #201c30;
    --panel-soft: #29233b;
    --ink: #e9e3f4;
    --heading: #f7f2ff;
    --muted: #b4abc7;
    --subtle: #a297b8;
    --line: #3b334e;
    --primary: #b39af5;
    --primary-strong: #c6b0ff;
    --primary-soft: #33264e;
    --primary-soft-ink: #dacaff;
    --accent: #f0ad4e;
    --success: #55d6a0;
    --danger: #ff9188;
    --sidebar: #191525;
    --sidebar-muted: #b1a6c8;
    --sidebar-link: #e2daef;
    --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: #1b1729;
    --row-hover: #2c2440;
    --panel-shadow: rgba(0, 0, 0, .28);
    --backdrop: rgba(0, 0, 0, .68);
    --login-gradient-start: #100c1d;
    --login-gradient-mid: #302049;
    --login-gradient-end: #773e63;
    --login-shadow: rgba(0, 0, 0, .52);
    --info-border: #4f3b70;
    --info-bg: #2c2242;
    --info-ink: #dacaff;
    --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: #2c2242;
    --on-primary: #211334;
    --violet: #b39af5;
    --violet-bg: #302442;
    --violet-ink: #d6c3ff;
    --coral: #f59d86;
    --coral-bg: #3c272c;
    --coral-ink: #ffb7a3;
    --mint: #74ceaa;
    --mint-bg: #1b3530;
    --mint-ink: #94e0bf;
    --amber: #efc16c;
    --amber-bg: #382f22;
    --amber-ink: #f3cf8b;
    --sky: #90bbf0;
    --sky-bg: #232e43;
    --sky-ink: #a9ccfa;
}

* {
    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: #db5893;
    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);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    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: center;
    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;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.nav-divider {
    width: 100%;
    margin: .65rem 0;
    border: 0;
    border-top: 1px solid #ffffff;
    flex-shrink: 0;
}

.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);
}

.nav-group > summary {
    list-style: none;
    cursor: pointer;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-item > .nav-group-chevron {
    margin-left: auto;
    font-size: .75rem;
    transition: transform .15s ease;
}

.nav-group[open] > summary > .nav-group-chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: .35rem 0 .35rem 1.4rem;
    padding-left: .5rem;
    border-left: 1px solid var(--sidebar-line);
}

.nav-submenu .nav-item {
    font-size: .85rem;
}

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

.sidebar-footer {
    display: grid;
    gap: .65rem;
    position: relative;
    flex-shrink: 0;
    padding-top: .85rem;
    border-top: 1px solid var(--sidebar-line);
}

.account-toggle {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .65rem;
    border: 0;
    border-radius: 10px;
    background: var(--sidebar-control);
    color: var(--sidebar-ink);
    text-align: left;
    cursor: pointer;
}
.account-toggle:hover, .account-toggle[aria-expanded="true"] { background: var(--sidebar-hover); }
.account-toggle:focus-visible { outline: 2px solid var(--sidebar-ink); outline-offset: 3px; }
.account-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    font-size: .95rem;
    font-weight: 800;
}
.account-info { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.account-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .65rem; }
.avatar-option { position: relative; min-width: 0; cursor: pointer; }
.avatar-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-option-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; height: 100%; padding: .8rem .35rem; border: 2px solid var(--line); border-radius: var(--radius-control); background: var(--panel); color: var(--muted); font-size: .78rem; font-weight: 700; text-align: center; }
.avatar-option-content > img, .avatar-option-initials { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.avatar-option-initials { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-soft-ink); font-size: 1.4rem; font-weight: 800; }
.avatar-option:hover .avatar-option-content { border-color: var(--primary); }
.avatar-option > input:checked + .avatar-option-content { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); box-shadow: 0 0 0 1px var(--primary); }
.avatar-option > input:focus-visible + .avatar-option-content { outline: 3px solid var(--primary); outline-offset: 3px; }
.avatar-option > input:disabled + .avatar-option-content { opacity: .65; cursor: wait; }
.account-name, .account-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { font-size: .9rem; font-weight: 700; }
.account-username { color: var(--sidebar-muted); font-size: .78rem; }
.account-chevron { font-size: .7rem; }
.account-toggle[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-menu {
    position: absolute;
    bottom: calc(100% + .35rem);
    left: 0;
    right: 0;
    padding: .35rem;
    border: 1px solid var(--sidebar-line);
    border-radius: 10px;
    background: var(--sidebar);
    box-shadow: 0 8px 24px var(--panel-shadow);
    z-index: 1;
}
.account-menu .logout-link { width: 100%; cursor: pointer; }
.confirmation-details:empty { display: none; }

.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;
}

#settings-form {
    width: 100%;
    gap: 1.5rem;
}

.settings-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.settings-preferences { min-width: 0; gap: 1.5rem; }
@media (max-width: 980px) {
    .settings-columns { grid-template-columns: minmax(0, 1fr); }
}

#settings-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
}

#settings-form legend {
    padding: 0 .5rem;
    color: var(--heading);
    font-weight: 800;
}

#settings-form p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.appearance-switch {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    width: min(100%, 280px);
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.appearance-switch-thumb {
    position: absolute;
    z-index: -1;
    inset: 5px auto 5px 5px;
    width: calc((100% - 10px) / 2);
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 2px 8px var(--panel-shadow);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.appearance-switch[aria-checked="true"] .appearance-switch-thumb {
    transform: translateX(100%);
}

.appearance-switch-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 1;
    min-height: 44px;
    font-weight: 800;
    transition: color .2s ease;
}

.appearance-switch[aria-checked="false"] .appearance-switch-light,
.appearance-switch[aria-checked="true"] .appearance-switch-dark {
    color: #fff;
}

.appearance-switch:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.appearance-switch:disabled {
    cursor: wait;
    opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
    .appearance-switch-thumb,
    .appearance-switch-option {
        transition: none;
    }
}

.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-online #online-users-value span {
    color: var(--ink);
}

.metric-card strong, .metric-card-online #online-users-value span {
    font-size: 2rem;
    letter-spacing: -.025em;
}

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

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

.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; }
.metric-grid.occupancy-today-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 980px) {
    .metric-grid.occupancy-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .occupancy-today-grid > :first-child { grid-column: 1 / -1; }
}
.occupancy-projection { gap: .5rem; }
.occupancy-projection span { padding: 0; }
.occupancy-value-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.occupancy-value-row > strong { flex-shrink: 0; }
.occupancy-trend { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); margin-left: auto; }
.occupancy-trend--up { color: var(--success); }
.occupancy-trend--down { color: var(--danger); }
.metric-card .occupancy-trend i { color: inherit; font-size: 1rem; }
#occupancy-dashboard .metric-card .occupancy-change { color: inherit; font-size: .9rem; font-weight: 600; line-height: 1.4; }

.metric-card-online small {
    margin-top: .65rem;
    color: var(--success-ink);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.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;
    align-content: center;
    gap: 1rem;
    padding: 1rem;
}

.login-footer {
    margin: 0;
    width: min(100%, 430px);
    color: #fff;
    font-size: .85rem;
    line-height: 1.5;
    text-align: center;
}

.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;
}

.login-password-field {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
}

.login-form .login-password-field input {
    border-radius: 0;
}

.login-password-field input::-ms-reveal {
    display: none;
}

.password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.password-toggle[hidden] {
    display: none;
}

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

.password-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -4px;
}

.remember-session {
    display: flex;
    justify-self: start;
    width: fit-content;
    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(77vw, 290px);
        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,
.rate-card input,
.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;
}

.rate-card input:focus,
.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-nav:disabled,
.picker-shortcut:disabled,
.picker-shortcut[aria-disabled="true"],
.picker-shortcut[aria-disabled="true"]:hover,
.picker-shortcut[aria-disabled="true"]:focus-visible,
.picker-cell:disabled,
.picker-cell[aria-disabled="true"],
.picker-cell[aria-disabled="true"]:hover,
.picker-cell[aria-disabled="true"]:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--subtle);
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.picker-availability-message {
    margin: .75rem 0 0;
    color: var(--ink);
    font-size: .8rem;
    line-height: 1.5;
}

.picker-availability-message:empty {
    display: 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,
.rate-card 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,
.rate-card 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;
}

.confirmation-dialog[data-tone="cancel"] .confirmation-icon,
.confirmation-dialog[data-tone="open"] .confirmation-icon {
    color: #422006;
    background: #fbbf24;
}

[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;
    text-align: center;
}

.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;
}

.notification-stack {
    position: fixed;
    inset: 96px 24px auto auto;
    z-index: 10000;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100dvh - 112px);
    margin: 0;
    padding: 0;
    border: 0;
    overflow: auto;
    overflow-x: hidden;
    background: transparent;
    color: #fff;
    pointer-events: none;
}

.notification-stack::backdrop {
    background: transparent;
    pointer-events: none;
}

.notification-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 18px;
    border: 1px solid #303030;
    border-radius: 16px;
    background: #000;
    color: #fff;
    box-shadow: 0 8px 24px #0003;
    font-size: .9rem;
    line-height: 1.5;
    pointer-events: auto;
    animation: notification-enter .4s cubic-bezier(.22, 1, .36, 1) both;
}

.notification-toast-exiting {
    pointer-events: none;
    animation: notification-exit .45s ease-in both;
}

.notification-icon {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 1.2rem;
}

.notification-toast[data-notification-type="success"] .notification-icon {
    color: #4ade80;
}

.notification-toast[data-notification-type="error"] .notification-icon {
    color: #f87171;
}

.notification-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-close {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    height: 28px;
    margin-top: -3px;
    margin-left: auto;
    padding: 0;
    border-radius: 7px;
    color: #fff;
    border: 0;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
}

.notification-close:hover {
    background: #ffffff26;
}

.notification-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@keyframes notification-enter {
    from { opacity: 0; transform: translateX(calc(100% + 32px)); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes notification-exit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(calc(100% + 32px)); }
}

@media (max-width: 600px) {
    .notification-stack { top: 80px; right: 16px; max-height: calc(100dvh - 96px); }
}

@media (prefers-reduced-motion: reduce) {
    .notification-toast { animation: none; }
    .notification-toast-exiting { animation: notification-fade .45s ease-out both; }
}

@keyframes notification-fade {
    from { opacity: 1; }
    to { opacity: 0; }
}

.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);
}

.mvc-dialog.reservation-dialog {
    width: min(1040px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.reservation-dialog .dialog-heading {
    margin-bottom: .5rem;
}

.reservation-dialog .panel-help {
    margin: .35rem 0;
}

.reservation-dialog .panel-help:empty {
    display: none;
}

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

.reservation-form-column {
    align-content: start;
    gap: .65rem;
}

.reservation-form-column .form-grid {
    gap: .65rem;
}

.reservation-dialog .reservation-duration {
    padding: .65rem .75rem;
    font-size: .85rem;
}

.reservation-dialog .dialog-actions {
    margin-top: .75rem;
}

@media (max-width: 760px) {
    .reservation-form-grid {
        grid-template-columns: 1fr;
        gap: .65rem;
    }
}

.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;
    }
}

/* Tarifas por alojamiento */
.rates-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
.rates-cards > .empty-state { grid-column: 1 / -1; }
.rate-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--border-color, #8292a544); border-radius: 16px; display: grid; gap: 1rem; overflow-wrap: anywhere; }
.rate-card h3, .rate-card p { margin: 0; }
.rate-card label { display: grid; gap: .5rem; }
.rate-card.rate-card-pending { border: 2px solid #f59e0b; box-shadow: 0 0 0 2px #f59e0b18; }
.rate-pending-label { color: #b45309; font-weight: 700; font-size: .9rem; }
[data-theme="dark"] .rate-pending-label { color: #fbbf24; }
.pending-rates-notice { position: sticky; top: 1rem; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; width: fit-content; max-width: 100%; margin: 0 auto 1.25rem; padding: 1rem 1.25rem; border: 2px solid #f59e0b; border-radius: 16px; background: #fffbeb; color: #92400e; box-shadow: 0 4px 16px #00000018; text-align: center; }
.pending-rates-notice[hidden] { display: none; }
.pending-rates-notice p { margin: 0; }
.pending-rates-notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pending-rates-notice a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
[data-theme="dark"] .pending-rates-notice { background: #3a2a12; color: #fcd34d; }
.rates-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; }
.rate-bar { display: grid; gap: .5rem; }
.rate-bar progress { width: 100%; accent-color: #3576d3; }

@media (min-width: 768px) {
    .rates-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rates-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* El resumen anterior y el panel de temporada comparten la misma grilla. */
body[data-page="dashboard"] .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: 1.5rem; }
body[data-page="dashboard"] .metric-card { min-width: 0; }
body[data-page="dashboard"] .metric-card strong { overflow-wrap: anywhere; }
body[data-page="dashboard"] .dashboard-details { margin-top: 1rem; }
@media (max-width: 980px) {
    body[data-page="dashboard"] .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body[data-page="dashboard"] .metric-grid { grid-template-columns: 1fr; }
    body[data-page="dashboard"] .occupancy-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="dashboard"] .occupancy-today-grid > .metric-card { grid-column: 1 / -1; }
    body[data-page="dashboard"] .occupancy-today-grid > .occupancy-agenda-card { grid-column: auto; }
}

/* Identidad Complex: superficies suaves, navegación tinta y acentos por indicador. */
::selection { background: var(--primary-soft); color: var(--primary-soft-ink); }
body { -webkit-font-smoothing: antialiased; }
.app-shell { grid-template-columns: 264px minmax(0, 1fr); }
.content { padding: 1.5rem 2rem 2rem; }
.sidebar {
    padding: 1.65rem 1rem 1rem;
    gap: .75rem;
    background: radial-gradient(ellipse at 0 0, #443163 0, transparent 52%), var(--sidebar);
    border-right: 1px solid var(--sidebar-line);
}
.sidebar-brand { min-height: 50px; }
.sidebar-logo { width: 166px; }
.side-nav { gap: .25rem; scrollbar-width: thin; scrollbar-color: #645578 transparent; }
.nav-section-label { color: var(--sidebar-muted); padding: .5rem 1rem .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nav-divider { border-color: var(--sidebar-line); margin: .65rem .75rem .1rem; width: auto; }
.nav-item { min-height: 46px; padding: .7rem .85rem; border-radius: var(--radius-control); font-size: .94rem; font-weight: 500; transition: background .18s, color .18s; }
.nav-item > i { color: #b5a3db; font-size: .93rem; }
.nav-item-active, .nav-item-active:hover, .nav-item-active:focus {
    background: #8061d5;
    color: #fff;
    box-shadow: 0 4px 12px #100b2429;
    font-weight: 700;
}
.nav-item-active > i { color: #fff; }
.nav-submenu { border-color: #645578; }
.nav-submenu .nav-item { font-size: .85rem; }
.sidebar-footer { padding-top: .85rem; }
.account-toggle { border: 1px solid var(--sidebar-line); border-radius: 13px; padding: .7rem; background: var(--sidebar-control); }
.account-avatar { border-radius: 12px; background: #e8dcff; color: #573b91; }
.account-name { font-size: .9rem; }
.account-username { font-size: .8rem; }
.account-menu { border-radius: 13px; }
.topbar { padding: 0 0 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); gap: 1.25rem; }
.topbar-heading { min-width: 0; }
.topbar-eyebrow { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.topbar-eyebrow > span { color: var(--subtle); margin: 0 .4rem; }
.topbar h1 { margin: .3rem 0 0; font-size: clamp(1.35rem, 1.8vw, 1.8rem); font-weight: 800; letter-spacing: -.045em; }
.argentina-clock-label { font-size: .78rem; }
.argentina-clock time { font-size: 1rem; }
.season-selector { min-width: min(260px, 100%); }
.season-selector label { font-size: .8rem; }
.season-selector select { font-size: .94rem; background: var(--panel); }
.season-banner { border-radius: var(--radius-control); padding: .75rem 1rem; font-size: .9rem; margin-bottom: 1.5rem; }
.panel, .metric-card { border-radius: var(--radius-panel); box-shadow: 0 3px 14px var(--panel-shadow); }
.panel { padding: 1.4rem; }
.panel-title { color: var(--heading); font-weight: 800; letter-spacing: -.035em; }
.panel-help { line-height: 1.65; }
.table-toolbar { padding-bottom: .5rem; gap: 1rem; }
.btn, .icon-btn, .primary-login { border-radius: var(--radius-control); font-size: .94rem; }
.btn { padding: .7rem 1rem; }
.btn-primary, .icon-btn { color: var(--on-primary); }
.btn-primary, .primary-login { box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 18%, transparent); }
.btn-primary:hover:not(:disabled) { background: var(--primary-strong); }
.btn-success, .icon-btn.success { background: #247d5f; }
.btn-danger, .icon-btn.danger { background: #bb4c53; }
.icon-btn { width: 34px; height: 34px; background: var(--primary-soft); color: var(--primary-soft-ink); }
.icon-btn.danger { background: var(--danger-bg); color: var(--danger-ink); }
.icon-btn.success { background: var(--success-bg); color: var(--success-ink); }
.icon-btn.warning { background: var(--warning-bg); color: var(--warning-ink); }
.btn-secondary { background: var(--panel); }
.data-table { font-size: .94rem; }
.data-table th { background: var(--panel-soft); font-size: .78rem; padding-block: .85rem; font-weight: 800; letter-spacing: .05em; }
.data-table td { padding-block: 1rem; }
.data-table tbody > tr { transition: background .15s; }
.data-table tbody > tr:hover { background: var(--row-hover); }
.status-pill, .read-only-tag { font-size: .8rem; padding: .3rem .65rem; }
.season-selector select, .audit-filters select, .finance-chart-toolbar select, .rate-card input,
.mvc-dialog input, .mvc-dialog select, .mvc-dialog textarea, .form-picker-trigger {
    border-radius: var(--radius-control);
    background-color: var(--input-bg);
    font-size: .96rem;
}
.form-grid label, .rate-card label, .audit-filters label { font-size: .9rem; }
.mvc-dialog { border-radius: 22px; box-shadow: 0 28px 90px var(--panel-shadow); }
.dialog-heading { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { font-weight: 800; letter-spacing: -.035em; }
.dialog-close { border-radius: 10px; background: var(--panel-soft); }
.dialog-actions { padding-top: 1rem; border-top: 1px solid var(--line); }
.empty-state { padding: 3.5rem 1.5rem !important; font-size: .96rem; }
.rate-card { border-color: var(--line); background: var(--panel); border-top: 3px solid var(--primary); }
#settings-form fieldset { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
#settings-form legend { padding: 0 .5rem; font-weight: 700; font-size: .85rem; }
#settings-types label { padding: .55rem .7rem; border-radius: 8px; background: var(--panel); }
.calendar-count-card { border-top: 3px solid var(--violet); }
.calendar-count-card:nth-child(2) { border-top-color: var(--mint); }
.calendar-count-card:nth-child(3) { border-top-color: var(--coral); }
.calendar-weekday { background: var(--panel-soft); color: var(--muted); }
.calendar-day-today { background: var(--primary-soft); }

.dashboard-welcome {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.65rem 1.8rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(110deg, var(--panel) 20%, var(--violet-bg) 100%);
}
.dashboard-welcome::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 200px;
    height: 200px;
    right: -45px;
    top: -75px;
    border: 28px solid color-mix(in srgb, var(--violet) 10%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 28px color-mix(in srgb, var(--coral) 7%, transparent);
    pointer-events: none;
}
.welcome-eyebrow { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: .7rem; color: var(--primary-soft-ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.dashboard-welcome h2 { font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 800; letter-spacing: -.045em; }
.dashboard-welcome p { max-width: 80%; font-size: .96rem; }
.occupancy-heading { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem; letter-spacing: -.025em; }
.occupancy-heading::before { content: ""; width: 5px; height: 17px; border-radius: 3px; background: var(--primary); }
.occupancy-note { font-size: .9rem; line-height: 1.65; }
.metric-grid { gap: .9rem; }
.metric-card {
    --card-accent: var(--violet);
    --card-bg: var(--violet-bg);
    --card-ink: var(--violet-ink);
    position: relative;
    min-height: 164px;
    padding: 1.2rem;
    gap: .45rem;
    border: 1px solid color-mix(in srgb, var(--card-accent) 18%, var(--panel));
    background: linear-gradient(145deg, var(--card-bg), color-mix(in srgb, var(--card-bg) 65%, var(--panel)));
    box-shadow: 0 3px 12px var(--panel-shadow);
    transition: box-shadow .2s, border-color .2s;
}
.metric-card:nth-child(5n + 2) { --card-accent: var(--mint); --card-bg: var(--mint-bg); --card-ink: var(--mint-ink); }
.metric-card:nth-child(5n + 3) { --card-accent: var(--coral); --card-bg: var(--coral-bg); --card-ink: var(--coral-ink); }
.metric-card:nth-child(5n + 4) { --card-accent: var(--amber); --card-bg: var(--amber-bg); --card-ink: var(--amber-ink); }
.metric-card:nth-child(5n + 5) { --card-accent: var(--sky); --card-bg: var(--sky-bg); --card-ink: var(--sky-ink); }
.metric-card:hover { border-color: color-mix(in srgb, var(--card-accent) 45%, var(--panel)); box-shadow: 0 6px 20px var(--panel-shadow); }
.metric-card > i, .metric-card > .metric-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-accent) 12%, var(--panel));
    color: var(--card-ink);
    font-size: 1rem;
}
.metric-card > span { padding: .2rem 0 0; color: var(--card-ink); font-size: .875rem; font-weight: 600; }
.metric-card strong, .metric-card-online #online-users-value span { color: var(--heading); font-size: clamp(1.65rem, 2.3vw, 2.3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric-card small, #occupancy-dashboard .metric-card small { color: var(--muted); font-size: .8rem; line-height: 1.6; }
.metric-card-online { --card-accent: var(--mint); --card-bg: var(--mint-bg); --card-ink: var(--mint-ink); }
.metric-card-online > small { color: var(--mint-ink); }
.metric-card-online > small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .35rem; border-radius: 50%; background: var(--mint); }
.metric-money-row strong { font-size: 1.35rem; }
.occupancy-projection { min-height: 130px; }
body[data-page="dashboard"] .occupancy-today-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.occupancy-today-grid > .metric-card:first-child { grid-column: span 2; }
.occupancy-today-grid > .metric-card:nth-child(2),
.occupancy-today-grid > .metric-card:nth-child(3) { --card-accent: var(--mint); --card-bg: var(--mint-bg); --card-ink: var(--mint-ink); }
.occupancy-today-grid > .metric-card:nth-child(4),
.occupancy-today-grid > .metric-card:nth-child(5) { --card-accent: var(--sky); --card-bg: var(--sky-bg); --card-ink: var(--sky-ink); }
.occupancy-today-grid > .metric-card:nth-child(6) { --card-accent: var(--amber); --card-bg: var(--amber-bg); --card-ink: var(--amber-ink); }
.occupancy-today-grid > .metric-card:nth-child(7) { --card-accent: var(--sky); --card-bg: var(--sky-bg); --card-ink: var(--sky-ink); }
body[data-page="dashboard"] #metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1201px) {
    body[data-page="dashboard"] #metric-grid:has(> .metric-card:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
#metric-grid > .metric-card-online { grid-column: span 2; --card-accent: var(--mint); --card-bg: var(--mint-bg); --card-ink: var(--mint-ink); }
body[data-page="dashboard"] .occupancy-grid:not(.occupancy-today-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-version { font-size: .78rem; }

.login-page { background: radial-gradient(ellipse at 8% 20%, #7451b84d, transparent 50%), linear-gradient(125deg, var(--login-gradient-start), var(--login-gradient-mid) 75%, var(--login-gradient-end)); }
.login-shell { grid-template-columns: minmax(0, 540px) minmax(0, 420px); justify-content: center; gap: 1.5rem 5rem; padding: 3rem; }
.login-intro { color: #fff; justify-self: start; }
.login-eyebrow { display: inline-block; margin-bottom: 1.5rem; color: #d2bdf9; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.login-intro h1 { margin: 0 0 1.5rem; font-size: clamp(2.6rem, 4.7vw, 4.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -.06em; }
.login-rotating-text { display: inline-grid; vertical-align: bottom; }
.login-rotating-word { grid-area: 1 / 1; white-space: nowrap; visibility: hidden; }
.login-rotating-word.is-active, .login-rotating-word.is-leaving { visibility: visible; }
.login-rotating-letter { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.25em); transition: opacity .22s ease, transform .22s ease; transition-delay: var(--letter-delay); }
.login-rotating-word.is-active .login-rotating-letter { opacity: 1; transform: translateY(0); }
.login-rotating-word.is-leaving .login-rotating-letter { opacity: 0; transform: translateY(-.25em); }
@media (prefers-reduced-motion: reduce) {
    .login-rotating-letter { transition: none; transform: none; }
}
.login-intro p { color: #d2c8e4; font-size: .92rem; line-height: 1.9; }
.login-features { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.login-features > span { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px solid #ffffff26; border-radius: 10px; color: #eee5ff; background: #ffffff09; font-size: .82rem; }
.login-features > span:nth-child(2) i { color: #94ddbf; }
.login-features > span:nth-child(3) i { color: #f3be91; }
.login-panel { width: 100%; border: 1px solid var(--line); border-radius: 24px; padding: 2.3rem; }
.login-logo { width: 180px; }
.login-heading { text-align: center; margin-top: 1.5rem; }
.login-heading h2 { margin: 0; color: var(--heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -.035em; }
.login-heading p { color: var(--muted); font-size: .9rem; margin: .5rem 0 0; }
.login-form { gap: .85rem; }
.login-field { background: var(--panel-soft); border-radius: var(--radius-control); }
.login-field > i { color: var(--primary); }
.login-form .login-field input { border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: 1rem; }
.primary-login { min-height: 48px; font-family: var(--font-sans); }
.login-footer { grid-column: 2; color: #d2c8e4; font-size: .8rem; }

@media (min-width: 981px) and (max-width: 1200px) {
    .content { padding: 1.25rem; }
    body[data-page="dashboard"] .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-card { padding: 1rem; }
}
@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .content { padding: 1.25rem; }
    .sidebar { padding-top: 1rem; }
    .topbar { gap: .8rem; }
    .data-table tbody > tr { border-radius: 14px; }
    body[data-page="dashboard"] .occupancy-today-grid, body[data-page="dashboard"] #metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-shell { gap: 2rem; padding: 2rem; }
    .login-panel { padding: 1.75rem; }
}
@media (max-width: 600px) {
    .content { padding: 1rem; }
    .topbar-eyebrow { font-size: .65rem; letter-spacing: .05em; }
    .topbar { padding-bottom: 1rem; margin-bottom: 1rem; }
    .panel { padding: 1rem; }
    .dashboard-welcome { padding: 1.2rem; border-radius: 16px; margin-bottom: 1.25rem; }
    .dashboard-welcome p { max-width: 100%; font-size: .9rem; }
    .welcome-eyebrow { font-size: .68rem; }
    .metric-card { min-height: 145px; padding: 1rem; border-radius: 15px; }
    .metric-card > i { width: 32px; height: 32px; border-radius: 10px; }
    .metric-card > span { font-size: .85rem; }
    body[data-page="dashboard"] .occupancy-today-grid > .metric-card:first-child { grid-column: 1 / -1; }
    body[data-page="dashboard"] .occupancy-grid:not(.occupancy-today-grid) { grid-template-columns: 1fr; }
    .login-shell { grid-template-columns: minmax(0, 420px); gap: 1.5rem; padding: 2rem 1rem; }
    .login-intro { justify-self: center; text-align: center; }
    .login-eyebrow { margin-bottom: .8rem; }
    .login-intro h1 { font-size: 2.4rem; margin-bottom: .8rem; }
    .login-intro p { margin: 0; font-size: .9rem; }
    .login-features { display: none; }
    .login-panel { padding: 1.5rem; }
    .login-footer { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-item, .metric-card, .data-table tbody > tr { transition: none; }
}

body[data-page="dashboard"] #metric-grid.admin-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-page="dashboard"] #metric-grid.admin-metric-grid > .metric-card { grid-column: auto; overflow-wrap: anywhere; }
body[data-page="dashboard"] .dashboard-details, body[data-page="dashboard"] .dashboard-details iframe { min-width: 0; max-width: 100%; }
@media (max-width: 980px) {
    body[data-page="dashboard"] #metric-grid.admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body[data-page="dashboard"] #metric-grid.admin-metric-grid { grid-template-columns: minmax(0, 1fr); }
}