@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-latin-v1.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/inter-latin-v1.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-latin-v1.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/montserrat-semibold-latin-v1.woff2") format("woff2");
}

:root {
    --brand-primary: #6D28D9;
    --brand-neutral: #17111F;
    --brand-primary-soft: #F3E8FF;
    --whatsapp-brand-green: #25D366;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --font-title: "Inter", "Segoe UI", Arial, sans-serif;
    --font-brand: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
    --font-button: "Inter", "Segoe UI", Arial, sans-serif;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --bg: #F8F5FF;
    --surface: #ffffff;
    --surface-soft: #FBF9FF;
    --surface-strong: #EEE7F7;
    --ink: #17111F;
    --muted: #17111F;
    --muted-soft: #17111F;
    --line: #DED3EB;
    --line-strong: #CDBBDD;
    --border: #DED3EB;
    --text: #17111F;
    --sidebar: #F3EDFB;
    --sidebar-soft: #ffffff;
    --sidebar-line: rgba(62, 20, 112, 0.16);
    --accent-violet: #6D28D9;
    --accent-purple: #9333EA;
    --accent-amber: #b7791f;
    --accent-amber-text: #96620a;
    --accent-rose: #be4b5b;
    --accent-blue: #2563eb;
    --link-blue: #1f6fd6;
    --link-blue-dark: #7cc8ff;
    --positive: #087f6f;
    --danger: #c23d42;
    --shadow-card: 0 1px 2px rgba(43, 47, 51, 0.06), 0 10px 24px rgba(43, 47, 51, 0.05);
    --shadow-lift: 0 8px 22px rgba(43, 47, 51, 0.09);
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-regular);
    line-height: 1.42;
    letter-spacing: 0;
}

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

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: 0;
}

button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
    font-family: var(--font-button);
    font-weight: var(--font-medium);
}

.app-shell {
    --active-sidebar-width: 272px;
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 0.18s ease;
}

.app-shell.is-sidebar-collapsed {
    --active-sidebar-width: 78px;
    grid-template-columns: 78px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px 16px;
    border-right: 1px solid #d7e0e4;
    background: var(--sidebar);
    color: #000000;
    transition: padding 0.18s ease;
}

.sidebar-toggle {
    position: absolute;
    top: 22px;
    right: -17px;
    z-index: 120;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-primary);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.sidebar-toggle::before {
    width: 9px;
    height: 9px;
    margin-left: 3px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: margin 0.18s ease, transform 0.18s ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    border-color: rgba(109, 40, 217, 0.28);
    outline: none;
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.13);
}

.app-shell.is-sidebar-collapsed .sidebar {
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
}

.app-shell.is-sidebar-collapsed .sidebar-toggle::before {
    margin-right: 3px;
    margin-left: 0;
    transform: rotate(225deg);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 10px 12px;
    border: 1px solid #ccd7dd;
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 2px 10px rgba(16, 24, 32, 0.09);
}

.brand-copy,
.nav-label,
.sidebar-logout-label {
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.14s ease, width 0.18s ease;
    white-space: nowrap;
}

.app-shell.is-sidebar-collapsed .brand {
    justify-content: center;
    gap: 0;
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
}

.app-shell.is-sidebar-collapsed .brand-copy,
.app-shell.is-sidebar-collapsed .nav-label,
.app-shell.is-sidebar-collapsed .sidebar-logout-label {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.brand-logo {
    width: 50px;
    height: 50px;
    filter: none;
    object-fit: contain;
}

.brand-mark-dark {
    display: none;
}

.brand .brand-wordmark,
.brand strong,
.brand small {
    display: block;
}

.brand .brand-wordmark {
    width: 142px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand .brand-wordmark-dark {
    display: none;
}

html[data-theme="dark"] .app-shell .brand-mark-light,
html[data-theme="dark"] .app-shell .brand .brand-wordmark-light {
    display: none;
}

html[data-theme="dark"] .app-shell .brand-mark-dark,
html[data-theme="dark"] .app-shell .brand .brand-wordmark-dark {
    display: block;
}

.brand strong {
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
}

.brand small {
    margin-top: 3px;
    color: var(--muted);
}

.brand-name {
    font-family: var(--font-brand);
    font-weight: 600;
}

.brand-primary {
    color: var(--brand-primary);
}

.brand-neutral {
    color: #000000;
}

.nav-list {
    display: grid;
    gap: 5px;
    margin-top: 22px;
}

.app-shell.is-sidebar-collapsed .nav-list,
.app-shell.is-sidebar-collapsed .sidebar-session {
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 8px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

.app-shell.is-sidebar-collapsed .nav-link {
    justify-content: center;
    gap: 0;
    padding-right: 0;
    padding-left: 0;
}

.nav-link:hover,
.nav-link.is-active {
    background: var(--brand-primary);
    color: #fff;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: currentColor;
    box-shadow: none;
    overflow: hidden;
}

.sidebar-logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: currentColor;
}

.nav-icon svg,
.sidebar-logout-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.nav-link:not(:hover):not(.is-active) .nav-icon-violet { color: var(--accent-violet); }
.nav-link:not(:hover):not(.is-active) .nav-icon-teal { color: var(--accent-purple); }
.nav-link:not(:hover):not(.is-active) .nav-icon-amber { color: var(--accent-amber); }
.nav-link:not(:hover):not(.is-active) .nav-icon-rose { color: var(--accent-rose); }
.nav-link:not(:hover):not(.is-active) .nav-icon-blue { color: var(--accent-blue); }

.app-shell.is-sidebar-collapsed .nav-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.nav-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: var(--accent-violet);
}

.nav-dot-violet { background: var(--accent-violet); }
.nav-dot-teal { background: var(--accent-purple); }
.nav-dot-amber { background: var(--accent-amber); }
.nav-dot-rose { background: var(--accent-rose); }
.nav-dot-blue { background: var(--accent-blue); }

.sidebar-session {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.sidebar-logout-form {
    margin: 0;
}

.sidebar-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(248, 113, 113, 0.55);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.app-shell.is-sidebar-collapsed .sidebar-logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-height: 52px;
    margin: 0 auto;
    padding: 0;
}

.app-shell.is-sidebar-collapsed .sidebar-logout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
}

.app-shell.is-sidebar-collapsed .sidebar-logout-icon-image {
    transform: translateX(2px);
}

.sidebar-logout-button:hover {
    border-color: rgba(254, 202, 202, 0.8);
    background: rgba(185, 28, 28, 0.18);
}

.sidebar-footer {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--sidebar-line);
    border-radius: 8px;
    color: var(--ink);
}

.sidebar-footer strong {
    color: inherit;
    font-size: 16px;
}

.content {
    min-width: 0;
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 20px 30px 44px;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.topbar-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.topbar-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-width: 0;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.topbar-parking-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.topbar-user {
    display: grid;
    gap: 2px;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-card);
}

.topbar-user span {
    font-size: 11px;
    font-weight: var(--font-semibold);
    line-height: 1;
    text-transform: uppercase;
}

.topbar-user strong {
    max-width: 220px;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-form {
    margin: 0;
}

.logout-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(185, 28, 28, 0.35);
    border-radius: 8px;
    background: #b91c1c;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.logout-button:hover {
    border-color: rgba(153, 27, 27, 0.5);
    background: #991b1b;
}

.topbar-main,
.topbar-side,
.summary-copy,
.module-hero > div:first-child {
    min-width: 0;
}

.topbar h1,
.summary-copy h2,
.panel h2,
.module-hero h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: 0;
}

.topbar h1 {
    font-size: 31px;
}

.parking-title-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.parking-title-lead {
    color: var(--muted);
    font-weight: var(--font-medium);
}

/* El nombre del estacionamiento activo abre la lista de todos los estacionamientos. */
.parking-title-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(560px, 68vw);
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.parking-title-name > span {
    overflow: hidden;
    border-bottom: 2px solid rgba(109, 40, 217, 0.3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parking-title-name::after {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 7px solid currentColor;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    opacity: 0.75;
    content: "";
}

.parking-title-name:hover > span,
.parking-title-name:focus-visible > span {
    border-bottom-color: currentColor;
}

.parking-switch-hint {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.parking-switch-panel {
    width: min(760px, 100%);
}

.parking-switch-list {
    display: grid;
    gap: 12px;
}

.parking-switch-option {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.parking-switch-option:hover,
.parking-switch-option:focus-visible {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card);
}

.parking-switch-option.is-active {
    border-color: rgba(109, 40, 217, 0.45);
    background: rgba(109, 40, 217, 0.07);
}

.parking-switch-option-logo {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
}

.parking-switch-option-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.parking-switch-option-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.parking-switch-option-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
}

.parking-switch-option-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(109, 40, 217, 0.14);
    color: var(--accent-purple);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.parking-switch-option-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px 16px;
}

.parking-switch-option-fields > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
}

.parking-switch-option-fields small {
    color: var(--muted);
    font-size: 11px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.summary-copy h2 {
    max-width: 620px;
    font-size: 27px;
}

.module-hero h2 {
    max-width: 760px;
    font-size: 26px;
}

.panel h2 {
    font-size: 20px;
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.year-form,
.month-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.year-form label,
.month-form label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

select,
.search-input {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

select {
    min-width: 96px;
    padding: 0 10px;
}

.search-input {
    width: 260px;
    padding: 0 13px;
}

.search-input::placeholder,
input::placeholder {
    color: var(--muted-soft);
}

.summary-band,
.module-hero,
.panel,
.kpi-card,
.module-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.summary-band {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(620px, 1.55fr);
    gap: 24px;
    align-items: center;
    padding: 22px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.kpi-grid-wide {
    margin: 16px 0 0;
}

.kpi-card {
    display: flex;
    position: relative;
    min-width: 0;
    min-height: 96px;
    overflow: hidden;
    padding: 15px 16px;
    box-shadow: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kpi-card span {
    display: block;
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
}

.kpi-card strong {
    display: block;
    margin-top: 12px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    font-variant-numeric: tabular-nums;
}

a.kpi-card {
    color: inherit;
    text-decoration: none;
}

.kpi-card.is-clickable {
    cursor: pointer;
}

.kpi-card.is-clickable:hover,
.kpi-card.is-clickable:focus-visible {
    border-color: var(--brand-neutral);
    box-shadow: 0 0 0 2px rgba(0, 108, 122, 0.14);
    outline: 0;
}

.kpi-card-map-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.kpi-card-map-button strong {
    white-space: normal;
}

.kpi-card-map-button:hover strong,
.kpi-card-map-button:focus-visible strong {
    color: var(--accent-blue);
}

.tone-positive strong { color: var(--positive); }
.tone-danger strong { color: var(--danger); }
.tone-blue strong { color: var(--accent-blue); }
.tone-partial strong { color: #7b3fc6; }
.tone-strong strong { color: var(--accent-violet); }

.service-billing-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
}

.service-billing-panel.tone-vencida {
    border-color: rgba(194, 61, 66, 0.34);
}

.service-billing-panel.tone-pendiente {
    border-color: rgba(183, 121, 31, 0.34);
}

.service-billing-panel.tone-pagada,
.service-billing-panel.tone-gratis,
.service-billing-panel.tone-bonificada {
    border-color: rgba(8, 127, 111, 0.34);
}

.service-billing-copy h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}

.service-billing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
}

.service-billing-action {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.service-billing-action > strong {
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.service-billing-action form {
    margin: 0;
}

.service-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 700;
}

.service-status.is-paid {
    border-color: rgba(8, 127, 111, 0.25);
    color: var(--positive);
}

.service-status.is-warning {
    border-color: rgba(183, 121, 31, 0.25);
    color: var(--accent-amber-text);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.module-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 186px;
    overflow: hidden;
    padding: 18px 18px 16px;
    box-shadow: none;
}

.module-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--accent-violet);
    content: "";
}

.module-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}

.module-card h3 {
    max-width: 440px;
    margin: 0;
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.module-pill {
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.accent-violet .module-pill,
.accent-violet::before { background: var(--accent-violet); }
.accent-purple .module-pill,
.accent-purple::before { background: var(--accent-purple); }
.accent-amber .module-pill,
.accent-amber::before { background: var(--accent-amber); }
.accent-rose .module-pill,
.accent-rose::before { background: var(--accent-rose); }
.accent-blue .module-pill,
.accent-blue::before { background: var(--accent-blue); }

.module-metrics {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

.module-metrics span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
    min-height: 32px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.module-metrics small {
    min-width: 0;
    color: var(--muted);
}

.module-metrics strong {
    white-space: nowrap;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
    gap: 14px 18px;
    margin-top: 18px;
}

.report-contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-message-header {
    align-items: center;
    gap: 12px;
}

.report-message-header h2 {
    margin: 0;
}

.report-stay-calculator-shell.public-design {
    --public-accent: var(--brand-primary);
    --public-ink: var(--ink);
    --public-muted: var(--muted);
    display: block;
    min-height: 0;
    background: transparent;
    color: var(--ink);
}

.report-stay-calculator-shell .report-stay-calculator {
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.report-stay-calculator-shell .public-calculation-mode,
.report-stay-calculator-shell .public-cyclic-field,
.report-stay-calculator-shell .public-calculation-result-panel,
.report-stay-calculator-shell .public-calculation-facts article {
    border-color: var(--line);
    background: var(--surface);
}

.report-stay-calculator-shell .public-cyclic-day {
    border-color: var(--line-strong);
    background: var(--surface-soft);
    color: var(--ink);
}

.report-stay-calculator-shell .public-cyclic-field p,
.report-stay-calculator-shell .public-selected-vehicle-models {
    color: var(--muted);
}

.entry-form.compact-form.report-message-contact-form {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr) auto;
    align-items: end;
}

.report-message-contact-form button {
    width: auto;
    min-width: 180px;
}

.report-message-preset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.report-message-preset-current {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.report-message-preset-current > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.report-message-preset-current strong {
    overflow-wrap: anywhere;
}

.report-message-helper {
    margin: 12px 0 14px;
    color: var(--muted);
}

.report-message-name-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--ink);
}

.report-message-name-choice[hidden] {
    display: none;
}

.report-message-name-choice > span {
    font-size: 13px;
    font-weight: 800;
}

.report-message-name-choice select {
    width: 100%;
}

.entry-form.report-pdf-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.report-pdf-primary-fields {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.report-pdf-primary-fields > * {
    flex: 1 1 0;
    min-width: 0;
}

.report-pdf-form > .report-pdf-actions {
    grid-column: 1 / -1;
}

.report-pdf-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    padding-top: 2px;
}

.report-pdf-form .report-pdf-actions button {
    min-width: 190px;
}

.report-pdf-model-field {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}

.report-pdf-model-field > legend {
    padding: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-pdf-model-help {
    margin: 5px 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.report-pdf-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.report-pdf-model-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.report-pdf-model-card:hover {
    border-color: var(--accent-purple);
    transform: translateY(-1px);
}

.report-pdf-model-card.is-selected,
.report-pdf-model-card:has(input:checked) {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple) 28%, transparent);
}

.report-pdf-model-card:focus-within {
    outline: 2px solid var(--accent-purple);
    outline-offset: 3px;
}

.report-pdf-model-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.report-pdf-model-thumbnail {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #cbd5dc;
    border-radius: 8px;
    background: #dfe8ea;
    box-shadow: 0 8px 18px rgba(10, 32, 38, 0.12);
}

.report-pdf-model-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
    background: #fff;
}

.report-pdf-model-thumbnail img.is-page-changing {
    animation: report-pdf-model-page-change 260ms ease-out;
}

.report-pdf-model-page {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(14, 37, 43, 0.88);
    box-shadow: 0 3px 10px rgba(10, 32, 38, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

@keyframes report-pdf-model-page-change {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 1;
    }
}

.report-pdf-model-thumbnail-loading {
    max-width: 180px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.report-pdf-model-thumbnail.is-ready .report-pdf-model-thumbnail-loading {
    display: none;
}

.report-pdf-model-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.report-pdf-model-copy strong {
    font-size: 16px;
}

.report-pdf-model-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.report-pdf-preview {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.report-pdf-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.report-pdf-preview-heading > div {
    display: grid;
    gap: 3px;
}

.report-pdf-preview-heading span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.report-pdf-preview-heading strong {
    color: var(--ink);
    font-size: 18px;
}

.report-pdf-preview-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.report-pdf-preview-stage {
    display: grid;
    place-items: center;
    min-height: 640px;
    padding: 18px;
    background: #102329;
}

.report-pdf-preview.has-preview .report-pdf-preview-stage {
    display: block;
    min-height: 0;
    padding: 0;
}

.report-pdf-preview-pages {
    display: grid;
    gap: 24px;
    justify-items: start;
    background: #102329;
}

.report-pdf-preview-pages[hidden] {
    display: none;
}

.report-pdf-preview-placeholder {
    display: grid;
    gap: 8px;
    max-width: 460px;
    padding: 28px;
    border: 1px dashed rgba(190, 228, 231, 0.45);
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
}

.report-pdf-preview-placeholder strong {
    font-size: 18px;
}

.report-pdf-preview-placeholder span {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
}

.report-pdf-preview-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    background: #fff;
}

.report-pdf-preview-image[hidden] {
    display: none;
}

.report-pdf-preview-status {
    min-height: 20px;
    margin: 0;
    padding: 9px 16px 11px;
    color: var(--muted);
    font-size: 12px;
}

.report-pdf-preview.is-loading .report-pdf-preview-stage {
    cursor: progress;
}

.report-pdf-preview.has-error .report-pdf-preview-placeholder {
    border-color: color-mix(in srgb, var(--danger) 62%, transparent);
}

@media (max-width: 1100px) {
    .report-pdf-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.report-contact-form .span-2,
.report-contact-form button {
    grid-column: 1 / -1;
}

.report-contact-form .contact-add-button {
    grid-column: auto;
    justify-self: start;
    min-width: 150px;
    width: auto;
    padding-inline: 22px;
}

.report-contact-panel .panel-header {
    margin-bottom: 12px;
}

.contacts-group-panel .panel-header {
    margin-bottom: 12px;
}

.contacts-group-content {
    display: grid;
    gap: 12px;
}

.contacts-filter-panel {
    overflow: hidden;
}

.contact-filter-tabs {
    display: inline-grid;
    grid-auto-columns: minmax(130px, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    width: min(100%, 420px);
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fbfc;
}

.contact-filter-button {
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.contact-filter-button.is-active {
    background: var(--brand-neutral);
    color: #fff;
}

.contacts-filter-content {
    display: grid;
    gap: 12px;
}

.contact-filter-section[hidden] {
    display: none;
}

.contact-subsection {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.contact-subsection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
}

.contact-subsection-summary::-webkit-details-marker {
    display: none;
}

.contact-subsection .report-contact-form,
.contact-subsection .report-contact-table {
    margin: 0 14px 14px;
}

.report-contact-table table {
    min-width: 720px;
}

.contact-phone-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-phone-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-phone-country-flag {
    width: 24px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid rgba(24, 35, 42, 0.18);
    border-radius: 3px;
    background: #ffffff;
    object-fit: cover;
    vertical-align: middle;
}

.employee-phone-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.employee-phone-field > input {
    width: 100%;
    min-width: 0;
}

.contact-phone-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-phone-status.is-no-verificable {
    border-color: rgba(191, 118, 24, 0.42);
    background: rgba(191, 118, 24, 0.12);
    color: #8a5109;
}

.contact-phone-status.is-incorrecto {
    border-color: rgba(190, 63, 76, 0.4);
    background: rgba(190, 63, 76, 0.12);
    color: #9e2635;
}

.contacts-module {
    display: grid;
    margin-top: 18px;
    gap: 14px;
}

/* La geometría de estas tarjetas es la de `.panel.collapsible-panel`; acá sólo
   queda lo propio de Contactos: el contenido va pegado al padding del panel. */
.contacts-module > .report-contact-panel {
    margin-top: 0;
}

.contacts-module .report-contact-form,
.contacts-module .report-contact-table,
.contacts-module .contact-filter-tabs {
    margin: 0;
}

.contacts-module .report-contact-form + .report-contact-table,
.contacts-module .contacts-filter-content {
    margin-top: 18px;
}

:is(.report-contact-table, .report-kpi-table) .contact-client-row.has-multiple-vehicles > td {
    border-bottom-color: #c4b5fd;
    background: #f3edff;
    transition: background-color 160ms ease;
}

:is(.report-contact-table, .report-kpi-table) .contact-client-row.has-multiple-vehicles > td:first-child {
    box-shadow: inset 4px 0 0 #7c3aed;
}

:is(.report-contact-table, .report-kpi-table) .contact-client-row.has-multiple-vehicles:hover > td {
    background: #ede3ff;
}

:is(.report-contact-table, .report-kpi-table) .contact-client-row.has-multiple-vehicles.is-expanded > td {
    background: #e7d9ff;
}

.contact-client-row.has-multiple-vehicles {
    cursor: pointer;
}

.contact-client-expand {
    display: grid;
    grid-template-columns: minmax(0, auto) max-content 18px;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 4px 6px 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.contact-client-expand:focus-visible {
    border-radius: 6px;
    outline: 3px solid rgba(124, 58, 237, 0.32);
    outline-offset: 2px;
}

.contact-client-expand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-client-vehicle-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid #5b21b6;
    border-radius: 999px;
    background: #6d28d9;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-client-expand-indicator {
    width: 9px;
    height: 9px;
    border-right: 2px solid #6d28d9;
    border-bottom: 2px solid #6d28d9;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}

.contact-client-row.is-expanded .contact-client-expand-indicator {
    transform: translateY(2px) rotate(225deg);
}

:is(.report-contact-table, .report-kpi-table) .contact-client-vehicles-row > td {
    padding: 0;
    border-bottom-color: #c4b5fd;
    background: #faf7ff;
    white-space: normal;
}

.contact-client-vehicles-detail {
    display: grid;
    padding: 12px 18px 14px 22px;
}

.contact-client-vehicles-list {
    display: grid;
    gap: 8px;
}

.contact-client-vehicle-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid #d8c6ff;
    border-radius: 8px;
    background: #ffffff;
}

.contact-client-vehicle-item > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.contact-client-vehicle-item small {
    color: #634d86;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-client-vehicle-item strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.work-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.public-link-slug-field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.public-link-slug-field > span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-right: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 600;
}

.public-link-slug-field input {
    border: 0;
    border-radius: 0;
}

.public-link-qr-section {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding-top: 4px;
}

.public-link-qr-title {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.public-link-qr-frame {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 168px;
    height: 168px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.public-link-qr {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.public-link-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.panel {
    min-width: 0;
    padding: 18px 20px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.collapsible-panel {
    overflow: visible;
}

.collapsible-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
    padding: 12px 14px;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f6fafb;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.collapsible-summary::-webkit-details-marker {
    display: none;
}

.collapsible-summary:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.18);
    outline-offset: 4px;
    border-radius: 8px;
}

.collapsible-panel[open] > .collapsible-summary {
    margin-bottom: 14px;
    border-color: rgba(109, 40, 217, 0.28);
    background: #e8f5f7;
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.collapsible-panel:not([open]) > .collapsible-summary {
    background: #f6fafb;
}

.collapsible-panel[open] > .collapsible-summary .collapsible-heading {
    color: var(--brand-primary);
}

/* Tarjeta desplegable: el diseño de la pestaña Contactos, común a todo el panel.
   El summary ocupa la tarjeta entera (de ahí los márgenes laterales negativos),
   así que el recuadro dentro del recuadro desaparece; el padding lateral de la
   tarjeta es el que insetea el contenido cuando se abre. La lista suma los
   desplegables anidados, que son tarjetas con la misma pinta pero sin `.panel`. */
:is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel {
    padding: 0 20px 20px;
    border-radius: 12px;
}

:is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel:not([open]) {
    padding-bottom: 0;
}

:is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel > .collapsible-summary {
    align-items: center;
    min-height: 72px;
    margin: 0 -20px;
    padding: 16px 18px;
    border: 0;
    border-radius: 12px 12px 0 0;
}

:is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel:not([open]) > .collapsible-summary {
    border-radius: 12px;
}

:is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel[open] > .collapsible-summary {
    margin-bottom: 18px;
}

/* El editor de bloques maqueta su contenido en grilla: ahí el hueco lo pone el
   `gap`, y el margen de abajo del summary se le sumaría. */
.public-block-editor.collapsible-panel {
    row-gap: 18px;
}

.public-block-editor.collapsible-panel[open] > .collapsible-summary {
    margin-bottom: 0;
}

/* Hermano general y no adyacente: varias pestañas intercalan modales ocultos
   entre tarjeta y tarjeta, y con `+` esos huecos se quedaban en la medida vieja. */
.panel.collapsible-panel ~ .panel.collapsible-panel,
:is(.public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel ~ :is(.public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel {
    margin-top: 14px;
}

/* Las pestañas que envuelven sus tarjetas en una grilla ya separan con `gap`;
   sumarles el margen de arriba las dejaría al doble de distancia. */
.contacts-module > .panel.collapsible-panel ~ .panel.collapsible-panel,
.variables-shell > .panel.collapsible-panel ~ .panel.collapsible-panel,
.employee-management-form > .panel.collapsible-panel ~ .panel.collapsible-panel,
.public-page-form-shell > .panel.collapsible-panel ~ .panel.collapsible-panel,
.parking-maintenance-content > .panel.collapsible-panel ~ .panel.collapsible-panel,
.tools-shell > .panel.collapsible-panel ~ .panel.collapsible-panel,
.visibility-management-form > .panel.collapsible-panel ~ .panel.collapsible-panel,
.work-grid > .panel.collapsible-panel ~ .panel.collapsible-panel {
    margin-top: 0;
}

.app-shell .collapsible-panel .collapsible-panel {
    border-color: #ead3a7;
    background: #fffdf8;
}

.app-shell .collapsible-panel .collapsible-panel[open] {
    border-color: rgba(183, 121, 31, 0.42);
}

.app-shell .collapsible-panel .collapsible-panel > .collapsible-summary {
    border-color: #ead3a7;
    background: #fffaf0;
}

.app-shell .collapsible-panel .collapsible-panel:not([open]) > .collapsible-summary {
    background: #fffaf0;
}

.app-shell .collapsible-panel .collapsible-panel[open] > .collapsible-summary {
    border-color: rgba(183, 121, 31, 0.34);
    background: #fff2d6;
    box-shadow: inset 3px 0 0 var(--accent-amber);
}

.app-shell .collapsible-panel .collapsible-panel[open] > .collapsible-summary .collapsible-heading {
    color: #8a570f;
}

.app-shell .collapsible-panel .collapsible-panel > .collapsible-summary .collapsible-indicator {
    color: #8a570f;
    border-color: #ead3a7;
}

.collapsible-title {
    display: block;
    min-width: 0;
}

.collapsible-title .eyebrow {
    display: block;
}

.collapsible-heading {
    display: block;
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.collapsible-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--brand-primary);
    background: #fff;
}

.collapsible-indicator::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease, margin 0.18s ease;
}

.collapsible-panel[open] > .collapsible-summary .collapsible-indicator::before {
    margin-top: 3px;
    transform: rotate(225deg);
}

.module-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
}

.module-hero.accent-purple { border-top: 4px solid var(--accent-purple); }
.module-hero.accent-amber { border-top: 4px solid var(--accent-amber); }
.module-hero.accent-rose { border-top: 4px solid var(--accent-rose); }
.module-hero.accent-blue { border-top: 4px solid var(--accent-blue); }
.module-hero.accent-violet { border-top: 4px solid var(--accent-violet); }

.module-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.module-control-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 0;
}

.module-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.summary-panel-header {
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.summary-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.summary-filter-form label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-width: 0;
    min-height: 46px;
    padding: 7px 10px 7px 12px;
    border: 1px solid #c8dde3;
    border-radius: 8px;
    background: #f7fbfc;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
}

.summary-filter-form select {
    height: 36px;
    min-width: 136px;
    border-color: #8fa9b3;
    background-color: #fff;
    color: var(--ink);
    font-weight: 800;
}

.summary-month-panel .summary-filter-form {
    padding: 0;
}

.notice {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-weight: 600;
}

.notice-ok {
    color: var(--positive);
    border-color: rgba(8, 127, 111, 0.25);
    background: #f2fbf8;
}

.notice-error {
    color: var(--danger);
    border-color: rgba(194, 61, 66, 0.25);
    background: #fff6f6;
}

.notice + .notice,
.notice + .module-control-row {
    margin-top: 14px;
}

.module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-top: 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.module-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.module-tabs a:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.module-tabs a.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.form-panel {
    margin-top: 18px;
}

.entry-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    align-items: end;
}

.variables-form {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.balance-schedule-panel {
    display: grid;
    gap: 14px;
}

.balance-schedule-panel > .panel-header {
    margin-bottom: 0;
}

.balance-period-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.balance-schedule-help {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.balance-payment-alerts {
    display: grid;
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid rgba(183, 121, 31, 0.35);
    border-radius: 8px;
    background: rgba(245, 166, 35, 0.09);
    color: var(--ink);
    font-size: 13px;
}

.balance-payment-alerts ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

.balance-payment-alerts li span {
    margin-right: 6px;
    font-weight: 800;
}

.balance-payment-alerts li.is-danger {
    color: var(--danger);
}

.balance-schedule-form {
    align-items: end;
}

.balance-credit-fields {
    display: contents;
}

.balance-credit-fields[hidden] {
    display: none;
}

.balance-config-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 0 22px;
    border-bottom: 1px solid var(--line);
}

.balance-config-add > div:first-child {
    display: grid;
    gap: 6px;
}

.balance-config-add h2,
.balance-config-list-section h2 {
    margin: 0;
}

.balance-config-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.balance-config-list-section {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding-top: 8px;
}

.balance-config-list-section > .panel-header {
    margin-bottom: 0;
}

.balance-config-scroll {
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.variable-row-grid.balance-service-row-grid {
    grid-template-columns: minmax(190px, 1.25fr) repeat(3, minmax(160px, 1fr)) 188px;
    min-width: 900px;
}

.variable-row-grid.balance-card-row-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(100px, 0.65fr) repeat(4, minmax(145px, 0.9fr)) 188px;
    min-width: 1170px;
}

.balance-config-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.balance-config-cell strong {
    font-size: 14px;
}

.balance-config-actions {
    align-self: stretch;
    min-height: 44px;
}

.balance-config-actions .inline-form,
.balance-config-actions .mini-button {
    width: 100%;
}

.balance-config-empty {
    grid-column: 1 / -1;
}

.balance-config-modal-panel {
    width: min(1040px, 100%);
}

.balance-config-modal-form {
    align-items: end;
}

.balance-config-modal-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
}

.balance-rule-field {
    display: grid;
    align-content: end;
    gap: 7px;
    min-width: 0;
}

.entry-form .balance-rule-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    filter: none;
    align-self: stretch;
}

.entry-form .balance-rule-open:hover,
.entry-form .balance-rule-open:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
    outline: 0;
    filter: none;
}

.entry-form .balance-rule-open > span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.entry-form .balance-rule-open small {
    flex: 0 0 auto;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.record-modal.balance-rule-modal {
    z-index: 95;
}

.record-modal-panel.balance-rule-modal-panel {
    width: min(720px, 100%);
}

.balance-rule-modal-copy {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.balance-rule-form {
    display: grid;
    gap: 18px;
}

.balance-rule-options-fieldset,
.balance-rule-details {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.balance-rule-options-fieldset > legend,
.balance-rule-details > legend,
.balance-rule-details > label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.balance-rule-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 9px;
}

.balance-rule-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 70px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.balance-rule-option[hidden],
.balance-rule-details[hidden] {
    display: none;
}

.balance-rule-option:hover,
.balance-rule-option:has(input:focus-visible) {
    border-color: var(--brand-primary);
}

.balance-rule-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.1);
}

.balance-rule-option > input {
    flex: 0 0 auto;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.balance-rule-option > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.balance-rule-option strong {
    font-size: 13px;
}

.balance-rule-option small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.balance-rule-details {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.balance-rule-details > label {
    display: grid;
    gap: 7px;
}

.balance-rule-details input[type="number"] {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.balance-rule-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.balance-rule-weekdays label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.balance-rule-weekdays input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.balance-rule-weekdays span {
    display: grid;
    min-height: 40px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.balance-rule-weekdays input:checked + span {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.balance-rule-weekdays input:focus-visible + span {
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

.balance-rule-error {
    margin: -4px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(194, 61, 66, 0.32);
    border-radius: 8px;
    background: rgba(194, 61, 66, 0.08);
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
}

.balance-rule-modal-actions {
    padding-top: 2px;
}

.location-section {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
}

.owner-section {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    align-items: end;
}

.tools-management-form {
    display: grid;
    gap: 22px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
}

.tools-toggle-card {
    display: grid;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.tools-toggle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.tools-install-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.tools-install-row[hidden] {
    display: none;
}

.tools-actions {
    display: flex;
    justify-content: flex-end;
}

.tools-save-button {
    min-width: 220px;
    min-height: 44px;
    border: 0;
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.16);
    cursor: pointer;
}

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

    .tools-actions {
        justify-content: stretch;
    }

    .tools-save-button {
        width: 100%;
    }
}
.location-section > label,
.location-section > .logo-upload-field {
    grid-column: span 2;
    min-width: 0;
    order: 20;
}

.location-section .location-company-field {
    order: 1;
}

.location-section .location-parking-field {
    order: 2;
}

.location-section .location-email-field {
    order: 3;
}

.location-section .logo-upload-field {
    order: 4;
}

.location-section .availability-field {
    order: 5;
}

.location-section .location-site-field {
    order: 6;
}

.location-section .location-phone-field {
    order: 7;
    grid-column: span 4;
}

.location-section .employee-enable-field {
    order: 8;
    grid-column: span 2;
}

.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) .location-whatsapp-field {
    grid-column: span 2;
    order: 6;
}

.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) .location-phone-field {
    grid-column: span 2;
    order: 7;
}

.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) .location-site-field {
    order: 8;
}

.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) .employee-enable-field {
    order: 9;
}

.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) :is(.location-phone-field, .location-whatsapp-field) .phone-field {
    width: 100%;
    max-width: none;
}

.parking-entry-modes-field {
    grid-column: 1 / -1;
    order: 9;
    min-width: 0;
    margin: 6px 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
}

.location-section[data-location-kind="estacionamiento"] .parking-entry-modes-field {
    order: 10;
}

.parking-entry-modes-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px 16px;
    min-width: 0;
}

.entry-form .parking-entry-mode-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.entry-form .parking-entry-mode-field .field-label-row {
    align-items: flex-start;
    width: 100%;
    min-height: 0;
}

.entry-form .parking-entry-mode-field select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
}

.parking-multiple-vehicles-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: span 3;
    align-items: end;
    gap: 12px 16px;
    min-width: 0;
}

.parking-multiple-vehicles-settings > .parking-entry-mode-field {
    align-self: end;
    width: 100%;
}

.entry-form .parking-entry-mode-field input[type="number"] {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
}

.parking-max-vehicles-error {
    display: block;
    margin-top: 0;
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.parking-max-vehicles-error[hidden] {
    display: none !important;
}

.entry-form [data-parking-max-vehicles-input][aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

@media (min-width: 721px) {
    [data-parking-max-vehicles-field] {
        position: relative;
    }

    .parking-max-vehicles-error {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: 0;
    }
}

@media (min-width: 1101px) {
    .parking-multiple-vehicles-settings:has(.parking-max-vehicles-error:not([hidden])) {
        padding-bottom: 54px;
    }
}

.parking-fraction-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    order: 11;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.parking-fraction-settings[hidden],
.parking-fraction-settings > [hidden] {
    display: none;
}

.entry-form .parking-fraction-settings > label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.parking-fraction-settings > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

[data-parking-tools-form] .parking-entry-modes-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
}

[data-parking-tools-form] .parking-configuration-entry-modes-grid > .parking-entry-fraction-settings {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-column: 1 / -1;
    order: initial;
    gap: 12px 16px;
}

[data-parking-tools-form] .parking-entry-fraction-settings .field-label-row {
    align-items: flex-start;
    width: 100%;
    min-height: 0;
}

[data-parking-tools-form] .parking-entry-fraction-settings :is(select, input) {
    width: 100%;
    min-width: 0;
    height: 42px;
}

[data-parking-tools-form] .parking-entry-mode-field-cyclic {
    grid-column: 1;
}

[data-parking-tools-form] .parking-configuration-entry-modes-grid > .parking-entry-mode-field {
    align-self: end;
}

.location-relation-context {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1440px) {
    .parking-entry-modes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [data-parking-tools-form] .parking-entry-modes-grid,
    [data-parking-tools-form] .parking-configuration-entry-modes-grid > .parking-entry-fraction-settings {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cyclic-help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cyclic-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.cyclic-help-popover[hidden] {
    display: none;
}

.cyclic-help-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: auto;
    left: 0;
    display: grid;
    min-width: 260px;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(16, 24, 33, 0.16);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.location-section .address-map-field {
    grid-column: span 4;
    order: 21;
}

/* La plantilla es la misma para Vehículos, que no acomoda la Configuración en
   subdesplegables: allá el bloque de Cajas se queda con el ancho genérico. */
.location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) .variable-select-list-field.location-cash-field {
    grid-column: span 2;
    order: 22;
}

/* El renglón del rótulo de Dirección mide lo mismo que los rótulos vecinos
   (País, Provincia, Ciudad); con altura extra el texto y "Ver mapa" quedaban
   flotando más arriba que el resto. */
.location-section .address-map-field > .field-label-row {
    min-height: 0;
    align-items: baseline;
}

.location-section .location-social-grid {
    grid-column: 1 / -1;
    order: 24;
}

.location-section .space-location-list-grid {
    grid-column: 1 / -1;
    order: 23;
}

.location-section .floor-control-field {
    grid-column: span 1;
    order: 23;
}

.location-section .variable-select-list-field {
    grid-column: span 1;
    order: 26;
}

.variables-shell {
    display: grid;
    margin-top: 18px;
    gap: 14px;
}

.variables-shell > .panel.collapsible-panel {
    margin-top: 0;
}

.variables-start-row {
    grid-column-start: 1;
}

.variable-list-field {
    align-self: stretch;
}

.variable-list-field textarea[hidden] {
    display: none;
}

.variable-list-heading,
.variable-select-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.variable-select-list-field {
    align-self: stretch;
}

.variable-select-list-heading small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
}

.parking-cashbox-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.entry-form .parking-cashbox-field > .variable-select-list-heading {
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-cashbox-picker {
    position: relative;
    display: block;
    width: 100%;
}

.entry-form .parking-cashbox-open {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 42px 0 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    filter: none;
}

.entry-form .parking-cashbox-open::after {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    content: "";
    transform: rotate(45deg);
}

.entry-form .parking-cashbox-open[aria-expanded="true"]::after {
    top: 20px;
    transform: rotate(-135deg);
}

.entry-form .parking-cashbox-open:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
    outline-offset: 1px;
}

.entry-form .parking-cashbox-open [data-parking-cashbox-summary] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parking-cashbox-menu {
    position: absolute;
    z-index: 45;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    display: grid;
    gap: 8px;
    min-width: min(320px, calc(100vw - 48px));
    max-height: min(330px, 48vh);
    padding: 9px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(16, 24, 33, 0.2);
}

.parking-cashbox-menu[hidden] {
    display: none;
}

.parking-cashbox-options {
    display: grid;
    gap: 7px;
}

.entry-form .parking-cashbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
}

.entry-form .parking-cashbox-option:hover,
.entry-form .parking-cashbox-option:focus-within {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
}

.entry-form .parking-cashbox-option.is-selected {
    border-color: color-mix(in srgb, var(--brand-primary) 64%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface));
    color: var(--brand-primary);
}

.entry-form .parking-cashbox-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-primary);
}

.entry-form .parking-cashbox-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-form .parking-cashbox-add {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    background: #bbf7d0;
    color: #14532d;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    filter: none;
}

.entry-form .parking-cashbox-add:hover,
.entry-form .parking-cashbox-add:focus-visible {
    border-color: #10b981;
    background: #a7f3d0;
    outline: 2px solid color-mix(in srgb, #10b981 30%, transparent);
    outline-offset: 1px;
}

.variable-time-range-field {
    align-self: end;
}

.variable-time-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.floor-control-field {
    align-self: stretch;
}

.space-location-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.space-location-list-grid .variable-select-list-field {
    min-width: 0;
}

.space-location-list-grid .variable-select-list-field select {
    min-height: 52px;
}

.space-location-list-grid .floor-control-field {
    min-width: 0;
}

.space-location-list-grid .space-list-control-field .floor-control-row {
    grid-template-columns: minmax(0, 1fr);
}

.space-location-list-grid .space-list-control-field .floor-control-row:has(
    .variable-list-add:not([hidden])
) {
    grid-template-columns: minmax(72px, 1fr) 30px;
}

.entry-form .space-location-list-grid .variable-list-add[hidden] {
    display: none;
}

.floor-control-row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 30px;
    gap: 8px;
    align-items: center;
}

.space-zone-control-field .floor-control-row {
    grid-template-columns: 30px;
    justify-content: start;
}

.arca-connection-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    min-width: 0;
}

.arca-connection-summary[hidden] {
    display: none;
}

.arca-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.arca-status-pill.is-connected {
    border-color: rgba(15, 118, 110, 0.28);
    background: rgba(15, 118, 110, 0.08);
    color: var(--brand-primary);
}

.arca-login-status {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.arca-login-status[hidden] {
    display: none;
}

.arca-captcha-box {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.arca-captcha-box[hidden] {
    display: none;
}

.arca-captcha-image {
    width: min(240px, 100%);
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.arca-login-status.is-error {
    border-color: rgba(185, 28, 28, 0.24);
    background: rgba(185, 28, 28, 0.08);
    color: #991b1b;
}

.arca-login-status.is-ok {
    border-color: rgba(15, 118, 110, 0.28);
    background: rgba(15, 118, 110, 0.08);
    color: var(--brand-primary);
}

.entry-form .variable-list-add,
.variable-collapsible-section .variable-list-add {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.entry-form .variable-list-add:hover,
.variable-collapsible-section .variable-list-add:hover {
    background: var(--brand-primary);
    filter: none;
}

.entry-form .variable-list-add.is-inactive,
.entry-form .variable-list-add.is-inactive:hover,
.variable-collapsible-section .variable-list-add.is-inactive,
.variable-collapsible-section .variable-list-add.is-inactive:hover {
    background: #d7e1e5;
    color: #000000;
    filter: none;
}

.entry-form .variable-list-add.variable-list-add-inline,
.variable-collapsible-section .variable-list-add.variable-list-add-inline {
    min-width: 22px;
    width: 22px;
    height: 22px;
    font-size: 15px;
}

.variable-list-display {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-height: 110px;
    max-height: 180px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-transform: none;
}

.variable-list-chip,
.variable-list-empty {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.variable-list-empty {
    grid-column: 1 / -1;
    justify-content: center;
    color: var(--muted);
    font-weight: 600;
}

.variable-form-section,
.variable-grid-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
    padding-top: 4px;
}

.variable-collapsible-section {
    display: block;
}

.variable-collapsible-summary {
    grid-column: 1 / -1;
}

.variable-collapsible-body {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* Subdesplegables dentro de una tarjeta del panel de variables: agrupan los
   campos por tema. El borde, el fondo y el resto del formato salen de la
   familia de tarjetas desplegables de 00-report.css; acá va sólo lo propio. */
.variables-subsection {
    grid-column: 1 / -1;
    min-width: 0;
}

/* Las dos grillas que las contienen ya separan con `gap`: sumarles el margen
   entre tarjetas hermanas las dejaría al doble de distancia. */
.location-section > .variables-subsection.collapsible-panel ~ .variables-subsection.collapsible-panel,
.variables-subsection-stack > .variables-subsection.collapsible-panel ~ .variables-subsection.collapsible-panel {
    margin-top: 0;
}

/* Cabecera más baja que la del panel que las contiene, para que se lea cuál
   es la tarjeta padre. Necesita el .collapsible-panel para ganarle al
   min-height de la familia. */
.variables-subsection.collapsible-panel > .variables-subsection-summary {
    min-height: 58px;
}

.variables-subsection-summary .collapsible-heading {
    font-size: 17px;
}

.variables-subsection-body {
    min-width: 0;
}

/* El orden de los campos ahora es el del DOM: los `order` de .location-section
   ordenaban UNA grilla que ya no existe, y dentro de cada subsección dejaban
   el foco del tabulador y lo que se ve en secuencias distintas. */
.variables-subsection-body > * {
    order: 0;
}

/* Dirección conserva el ancho de un campo normal en escritorio; en los
   breakpoints de dos/una columna se adapta con la grilla general. */
.variables-subsection-body .address-map-field {
    grid-column: span 2;
}

.variables-subsection-body .location-phone-field {
    grid-column: span 2;
}

.variables-subsection-body > .contact-fields-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 14px;
    min-width: 0;
}

/* Herramientas replica la cuadrícula estable de Registros sin tocar la
   composición especial de Información básica (logos y marcas). */
[data-parking-tools-form] :is(.parking-tools-field-grid, .contact-fields-grid, .location-social-grid) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
}

/* El estado de validación de Email se muestra debajo del campo y no debe
   empujar toda su celda hacia arriba respecto de los demás contactos. */
[data-parking-tools-form] .contact-fields-grid {
    align-items: start;
}

[data-parking-tools-form] .parking-tools-field-grid > :is(label, .address-map-field) {
    grid-column: auto;
    min-width: 0;
}

[data-parking-tools-form] .space-location-list-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 13px;
    align-items: end;
}

[data-parking-tools-form] .location-site-field > .institutional-contact-label {
    display: flex;
    align-items: center;
    min-height: 24px;
}

@media (max-width: 1100px) {
    [data-parking-tools-form] :is(.parking-tools-field-grid, .contact-fields-grid, .location-social-grid),
    [data-parking-tools-form] .space-location-list-grid,
    [data-parking-tools-form] .parking-configuration-entry-modes-grid,
    [data-parking-tools-form] .parking-configuration-entry-modes-grid > .parking-entry-fraction-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-multiple-vehicles-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    [data-parking-tools-form] :is(.parking-tools-field-grid, .contact-fields-grid, .location-social-grid),
    [data-parking-tools-form] .space-location-list-grid,
    [data-parking-tools-form] .parking-configuration-entry-modes-grid,
    [data-parking-tools-form] .parking-configuration-entry-modes-grid > .parking-entry-fraction-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .parking-multiple-vehicles-settings {
        grid-template-columns: minmax(0, 1fr);
        grid-column: 1 / -1;
    }
}

.rental-unit-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.rental-unit-contact-grid > .location-phone-field {
    grid-column: auto;
}

.contact-list-field,
.contact-fields-grid > .location-site-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.contact-list-heading {
    min-height: 24px;
    padding-inline-end: 41px;
}

/* "Validar correo" acompaña al rótulo de Email en la misma línea del
   asterisco; el "+" de agregar queda empujado al final. */
.contact-email-heading {
    justify-content: flex-start;
}

.contact-email-heading > .contact-list-add {
    margin-inline-start: auto;
}

.location-email-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.contact-list-heading > .institutional-contact-label {
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

html[data-theme="dark"] .app-shell .contact-list-heading > .institutional-contact-label {
    color: #ffffff;
}

.contact-list-add {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(109, 40, 217, 0.45);
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.contact-repeat-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.contact-repeat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.contact-repeat-row > :is(input, .phone-field) {
    width: 100%;
    min-width: 0;
}

.contact-email-row {
    grid-template-areas:
        "email-actions ."
        "email-input email-remove"
        "email-status .";
    align-items: center;
}

/* La primera fila no lleva sus acciones adentro (están en el rótulo), así que
   no reserva el renglón de arriba. */
.contact-email-row.is-primary-email-row {
    grid-template-areas:
        "email-input email-remove"
        "email-status .";
}

.contact-email-row > .location-email-actions {
    grid-area: email-actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    min-height: 16px;
}

.contact-email-row > input[name="ubicacion_email"] {
    grid-area: email-input;
}

.contact-email-row > .contact-row-remove {
    grid-area: email-remove;
}

.contact-email-row > .employee-validation-status {
    grid-area: email-status;
    min-height: 0;
    color: #000000;
}

.contact-email-row > .employee-validation-status:empty {
    display: none;
}

html[data-theme="dark"] .app-shell .contact-email-row > .employee-validation-status {
    color: #ffffff;
}

.contact-row-remove {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    cursor: pointer;
}

.contact-row-remove svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.contact-fields-grid > .location-site-field input {
    width: 100%;
}

/* Condiciones no tiene campos sueltos: sólo apila sus dos subdesplegables. */
.variables-subsection-stack {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.rental-unit-entry-form {
    align-items: start;
}

.rental-unit-entry-section {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.rental-unit-entry-section + .rental-unit-entry-section {
    margin-top: 2px;
}

.rental-unit-entry-section-summary {
    min-height: 54px;
    align-items: center;
    padding: 12px 14px;
}

.rental-unit-entry-section-summary .collapsible-heading {
    font-size: 17px;
}

.rental-unit-entry-section[open] > .rental-unit-entry-section-summary {
    margin-bottom: 0;
}

.rental-unit-entry-section-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.rental-unit-entry-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

/* Mismo chip que los modelos de `.space-vehicle-picker`, con los selectores
   pesados que hacen falta acá: `.entry-form label` apila etiqueta y campo, y
   `.variable-collapsible-section input` estira los inputs a 42 px de alto. */
.fleet-equipment-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px;
    align-self: stretch;
}

.entry-form label.fleet-equipment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
}

.entry-form label.fleet-equipment-option:has(input:checked) {
    border-color: var(--brand-primary);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.fleet-equipment-grid .fleet-equipment-option input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px !important;
    min-width: 16px;
    height: 16px !important;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.fleet-equipment-option span {
    flex: 1 1 auto;
    min-width: 0;
}

html[data-theme="dark"] .app-shell .entry-form label.fleet-equipment-option {
    border-color: #405861;
    background: #172329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form label.fleet-equipment-option:has(input:checked) {
    border-color: #A855F7;
    background: #0d5962;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #A855F7;
}

/* El textarea a lo ancho arranca fila propia: con `span 2` se metía en el
   primer hueco libre y dejaba un agujero en la fila anterior. */
[data-fleet-unit-entry-form] .rental-unit-entry-section-body > label.span-2 {
    grid-column: 1 / -1;
}

.rental-space-detail-editor {
    display: grid;
    grid-column: 1 / -1 !important;
    gap: 10px;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
}

.rental-space-detail-list {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    padding: 2px 2px 4px;
}

.rental-space-detail-row,
.rental-space-detail-header {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(120px, 0.65fr) minmax(150px, 0.75fr) minmax(280px, 1.45fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    min-width: 0;
}

.rental-space-detail-row.has-floor,
.rental-space-detail-row.has-space,
.rental-space-detail-header.has-floor,
.rental-space-detail-header.has-space {
    grid-template-columns: minmax(170px, 1fr) minmax(120px, 0.65fr) minmax(150px, 0.75fr) minmax(130px, 0.7fr) minmax(280px, 1.45fr);
}

.rental-space-detail-row.has-floor.has-space,
.rental-space-detail-header.has-floor.has-space {
    grid-template-columns: minmax(160px, 1fr) minmax(110px, 0.6fr) minmax(145px, 0.7fr) minmax(110px, 0.55fr) minmax(160px, 0.9fr) minmax(260px, 1.35fr);
}

.rental-space-detail-header span {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.rental-space-detail-name,
.rental-space-detail-empty {
    display: flex;
    align-items: center;
    min-height: 42px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.rental-space-detail-empty {
    color: var(--muted);
    font-weight: 600;
}

.rental-space-detail-row input {
    min-width: 0;
}

.rental-space-detail-row input[readonly][data-rental-space-furniture-open="1"] {
    cursor: pointer;
}

.rental-space-detail-row input[readonly][data-rental-space-furniture-open="1"]:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18);
}

.rental-space-detail-row select {
    min-width: 0;
}

.rental-unit-media-section-body,
.rental-period-prices-section-body {
    align-items: start;
}

.rental-period-rate-grid {
    grid-column: 1 / -1;
    width: 100%;
}

.rental-period-rate {
    min-height: 100%;
}

.rental-period-rate > .vehicle-period-rate-field,
.rental-period-rate-controls > .vehicle-period-rate-field,
.rental-period-rate-controls > .vehicle-rate-rounding {
    width: 100%;
}

html[data-theme="dark"] .app-shell .rental-period-rate .vehicle-period-rate-field :is(input[readonly], input:disabled),
html[data-theme="dark"] .app-shell .rental-period-rate .vehicle-period-rate-field.is-inactive input {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
    box-shadow: none;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .rental-period-rate .vehicle-rate-rounding {
    border-color: #405861;
    background: #172329;
}

.rental-space-media-editor {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.rental-space-media-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 650;
}

.rental-space-media-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 14px;
    min-width: 0;
}

.rental-space-media-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.rental-space-media-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rental-space-media-card-heading strong {
    min-width: 0;
    color: var(--ink);
    font-size: 16px;
}

.rental-space-media-card-heading span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.entry-form label.rental-space-media-description {
    display: grid;
    gap: 6px;
}

.rental-space-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 10px;
}

.rental-space-media-item {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.rental-space-media-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    background: #071419;
    object-fit: contain;
}

.rental-space-media-item figcaption {
    display: grid;
    gap: 7px;
}

.rental-space-media-item figcaption strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-space-media-item textarea,
.rental-space-media-description textarea {
    resize: vertical;
}

.rental-space-media-remove {
    justify-self: start;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d64063;
    border-radius: 7px;
    background: transparent;
    color: #b91f45;
    font-weight: 800;
    cursor: pointer;
}

.rental-space-media-remove:is(:hover, :focus-visible) {
    background: #d64063;
    color: #ffffff;
}

.entry-form label.rental-space-media-upload {
    width: fit-content;
    max-width: 100%;
}

.rental-space-media-card > small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.rental-furniture-open {
    margin-top: 8px;
    width: fit-content;
}

.rental-furniture-inline {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.rental-furniture-inline[hidden] {
    display: none !important;
}

.record-modal-panel.rental-furniture-panel {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: min(88vh, 820px);
}

.rental-furniture-list {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.rental-furniture-search {
    display: grid;
    gap: 8px;
    min-width: 0;
    font-weight: 800;
    color: var(--ink);
}

.rental-furniture-search span,
.rental-furniture-table-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.rental-furniture-search input {
    width: 100%;
}

.rental-furniture-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    align-items: center;
}

.rental-furniture-suggestion {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.rental-furniture-suggestion:is(:hover, :focus-visible),
.rental-furniture-suggestion.is-custom {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.rental-furniture-suggestion-note,
.rental-furniture-empty {
    color: var(--muted);
    font-weight: 700;
}

.rental-furniture-table-wrap {
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
}

.rental-furniture-table {
    display: grid;
    gap: 8px;
    min-width: 860px;
}

.rental-furniture-table-head,
.rental-furniture-selected-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.05fr) repeat(3, minmax(100px, 0.6fr)) minmax(260px, 1.5fr) 42px;
    gap: 10px;
    align-items: center;
}

.rental-furniture-selected {
    display: grid;
    gap: 8px;
}

.rental-furniture-selected-row {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.rental-furniture-selected-row input {
    min-width: 0;
    width: 100%;
}

.rental-furniture-selected-row input[readonly] {
    font-weight: 800;
}

.rental-furniture-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--danger);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.rental-furniture-remove:is(:hover, :focus-visible) {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.rental-furniture-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.rental-furniture-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
}

.rental-furniture-choice input {
    width: auto;
}

@media (max-width: 980px) {
    .rental-space-detail-row,
    .rental-space-detail-header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

html[data-theme="dark"] {
    color-scheme: dark;
    background: #151a1d;
}

html[data-theme="dark"] body {
    background: #151a1d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell {
    --bg: #151a1d;
    --surface: #20282c;
    --surface-soft: #273136;
    --surface-strong: #303c42;
    --ink: #eef4f5;
    --muted: #b8c4c8;
    --muted-soft: #8f9ea4;
    --line: #3b4a51;
    --line-strong: #53656d;
    --border: #3b4a51;
    --text: #eef4f5;
    --brand-neutral: #eef4f5;
    --brand-primary-soft: rgba(0, 127, 143, 0.22);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.24);
    --shadow-lift: 0 18px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .report-stay-calculator-shell .public-price-grid :is(input, select, .public-time24),
html[data-theme="dark"] .report-stay-calculator-shell .public-cyclic-grid .public-time24 {
    border-color: var(--line-strong);
    background: #182126;
    color: var(--ink);
}

html[data-theme="dark"] .report-stay-calculator-shell .public-time24-badge {
    border-color: rgba(82, 216, 228, 0.38);
    background: rgba(82, 216, 228, 0.12);
    color: #D8B4FE;
}

html[data-theme="dark"] .report-stay-calculator-shell .public-calculation-mode label {
    color: var(--ink);
}

html[data-theme="dark"] .report-stay-calculator-shell .public-calculation-mode label:has(input:checked) {
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .report-stay-calculator-shell .public-vehicle-model-popover {
    border-color: var(--line-strong);
    background: #182126;
    color: var(--ink);
}

html[data-theme="dark"] .report-stay-calculator-shell .public-vehicle-model-popover article {
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .content {
    background: #151a1d;
}

html[data-theme="dark"] .topbar-greeting,
html[data-theme="dark"] .year-form label,
html[data-theme="dark"] .month-form label,
html[data-theme="dark"] .kpi-card span,
html[data-theme="dark"] th,
html[data-theme="dark"] .module-tabs a,
html[data-theme="dark"] .summary-filter-form label,
html[data-theme="dark"] .entry-form label,
html[data-theme="dark"] .variable-row-grid > span {
    color: var(--muted);
}

html[data-theme="dark"] .entry-form .parking-entry-mode-field {
    color: var(--ink);
}

html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .topbar-greeting strong,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .module-hero h2,
html[data-theme="dark"] .summary-copy h2,
html[data-theme="dark"] .collapsible-heading,
html[data-theme="dark"] td,
html[data-theme="dark"] .parking-title-separator {
    color: var(--ink);
}

html[data-theme="dark"] .summary-band,
html[data-theme="dark"] .module-hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .year-form,
html[data-theme="dark"] .month-form,
html[data-theme="dark"] .module-tabs,
html[data-theme="dark"] .summary-filter-form label,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .service-billing-panel,
html[data-theme="dark"] .parking-config-list,
html[data-theme="dark"] .parking-config-item,
html[data-theme="dark"] .employee-row,
html[data-theme="dark"] .record-modal-panel,
html[data-theme="dark"] .variable-dialog-panel,
html[data-theme="dark"] .rental-unit-entry-section,
html[data-theme="dark"] .variables-subsection,
html[data-theme="dark"] .rental-space-detail-name,
html[data-theme="dark"] .rental-space-detail-empty {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] select,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .parking-title-picker select,
html[data-theme="dark"] .entry-form input,
html[data-theme="dark"] .entry-form select,
html[data-theme="dark"] .entry-form textarea,
html[data-theme="dark"] .variable-collapsible-section input,
html[data-theme="dark"] .variable-collapsible-section select,
html[data-theme="dark"] .variable-collapsible-section textarea,
html[data-theme="dark"] .location-country-button,
html[data-theme="dark"] .country-picker-button:not(:where(.public-page-owner-preview *)),
html[data-theme="dark"] .rental-broker-open,
html[data-theme="dark"] .parking-cashbox-open,
html[data-theme="dark"] .rental-guarantee-picker-button,
html[data-theme="dark"] .money-prefix-field,
html[data-theme="dark"] .entry-form .cycle-days-field,
html[data-theme="dark"] .rental-unit-table-field {
    border-color: var(--line);
    background: #182023;
    color: var(--ink);
}

html[data-theme="dark"] .entry-form input::placeholder,
html[data-theme="dark"] .entry-form textarea::placeholder,
html[data-theme="dark"] .search-input::placeholder,
html[data-theme="dark"] input::placeholder {
    color: var(--muted-soft);
}

html[data-theme="dark"] option {
    background: #182023;
    color: var(--ink);
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] table,
html[data-theme="dark"] .country-picker-menu:not(:where(.public-page-owner-preview *)),
html[data-theme="dark"] .location-country-menu,
html[data-theme="dark"] .rental-broker-menu,
html[data-theme="dark"] .parking-cashbox-menu,
html[data-theme="dark"] .rental-guarantee-picker-menu {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] th,
html[data-theme="dark"] .availability-table th,
html[data-theme="dark"] .availability-next-table th,
html[data-theme="dark"] .ipc-view-table th {
    background: var(--surface-soft);
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-bottom-color: var(--line);
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .country-picker-option:hover:not(:where(.public-page-owner-preview *)),
html[data-theme="dark"] .country-picker-option.is-selected:not(:where(.public-page-owner-preview *)),
html[data-theme="dark"] .location-country-option:hover,
html[data-theme="dark"] .location-country-option.is-selected,
html[data-theme="dark"] .rental-broker-option:hover,
html[data-theme="dark"] .rental-broker-option:focus-visible,
html[data-theme="dark"] .rental-guarantee-option:hover,
html[data-theme="dark"] .rental-guarantee-option:focus-visible {
    background: var(--surface-strong);
    color: var(--ink);
}

html[data-theme="dark"] .collapsible-summary {
    border-color: var(--line);
    background: #222c31;
}

html[data-theme="dark"] .collapsible-panel[open] > .collapsible-summary {
    border-color: rgba(39, 193, 207, 0.36);
    background: #1d3338;
}

html[data-theme="dark"] .collapsible-panel:not([open]) > .collapsible-summary {
    background: #222c31;
}

html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel,
html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel > .collapsible-summary,
html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel:not([open]) > .collapsible-summary {
    border-color: #66502d;
    background: #241f18;
}

html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel[open] > .collapsible-summary {
    border-color: rgba(255, 184, 77, 0.36);
    background: #332817;
}

html[data-theme="dark"] .collapsible-indicator,
html[data-theme="dark"] .record-modal-close,
html[data-theme="dark"] .sidebar-toggle {
    border-color: var(--line);
    background: #1b2428;
    color: #27c1cf;
}

html[data-theme="dark"] .entry-form .rental-broker-open,
html[data-theme="dark"] .entry-form .parking-cashbox-open,
html[data-theme="dark"] .entry-form .rental-guarantee-picker-button,
html[data-theme="dark"] .entry-form .rental-broker-option,
html[data-theme="dark"] .entry-form .rental-guarantee-option,
html[data-theme="dark"] .rental-guarantee-option {
    background: #182023;
    color: var(--ink);
}

html[data-theme="dark"] .entry-form .parking-cashbox-option {
    border-color: var(--line);
    background: #182023;
    color: var(--ink);
}

html[data-theme="dark"] .entry-form .parking-cashbox-option:hover,
html[data-theme="dark"] .entry-form .parking-cashbox-option:focus-within {
    border-color: #27c1cf;
    background: var(--surface-strong);
}

html[data-theme="dark"] .entry-form .parking-cashbox-option.is-selected {
    border-color: rgba(39, 193, 207, 0.7);
    background: rgba(0, 127, 143, 0.24);
    color: #71d9e3;
}

html[data-theme="dark"] .entry-form .parking-cashbox-field > .variable-select-list-heading {
    color: #ffffff;
}

html[data-theme="dark"] .entry-form .rental-broker-option.is-selected,
html[data-theme="dark"] .entry-form .rental-broker-option[aria-pressed="true"],
html[data-theme="dark"] .entry-form .rental-guarantee-option.is-selected,
html[data-theme="dark"] .entry-form .rental-guarantee-option[aria-pressed="true"],
html[data-theme="dark"] .rental-guarantee-option.is-selected,
html[data-theme="dark"] .rental-guarantee-option[aria-pressed="true"] {
    background: rgba(0, 127, 143, 0.2);
    color: #71d9e3;
}

html[data-theme="dark"] .money-prefix-field > span,
html[data-theme="dark"] .percentage-symbol,
html[data-theme="dark"] .rental-guarantee-picker-field,
html[data-theme="dark"] .cycle-days-field legend,
html[data-theme="dark"] .cycle-row-title {
    color: var(--ink);
}

html[data-theme="dark"] .tariff-increase-row,
html[data-theme="dark"] .tariff-increase-row:hover {
    background: rgba(8, 127, 111, 0.18);
}

html[data-theme="dark"] .tariff-preview-row.tariff-month-past td,
html[data-theme="dark"] .tariff-preview-row.tariff-month-past.tariff-increase-row td {
    background: rgba(194, 61, 66, 0.24);
}

html[data-theme="dark"] .tariff-preview-row.tariff-month-current td,
html[data-theme="dark"] .tariff-preview-row.tariff-month-current.tariff-increase-row td {
    background: rgba(183, 121, 31, 0.22);
}

html[data-theme="dark"] .notice-ok {
    border-color: rgba(8, 127, 111, 0.38);
    background: rgba(8, 127, 111, 0.16);
}

html[data-theme="dark"] .notice-error {
    border-color: rgba(194, 61, 66, 0.42);
    background: rgba(194, 61, 66, 0.16);
}

html[data-theme="dark"] .record-modal-backdrop {
    background: rgba(3, 7, 10, 0.72);
}

html[data-theme="dark"] .module-tabs a:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

html[data-theme="dark"] .module-tabs a.is-active,
html[data-theme="dark"] .nav-link.is-active,
html[data-theme="dark"] .nav-link:hover {
    color: #ffffff;
}

@media (max-width: 620px) {
    .rental-space-detail-row {
        grid-template-columns: 1fr;
    }

    .rental-unit-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.variable-grid-heading-actions {
    justify-content: flex-end;
}

.variable-form-section h3,
.variable-grid-heading h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.location-country-picker {
    position: relative;
    display: block;
    min-width: 0;
    text-transform: none;
}

.entry-form .location-country-button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.location-flag {
    width: 24px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    background: #fff;
    object-fit: cover;
}

.location-country-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-country-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 45;
    display: none;
    width: min(260px, calc(100vw - 48px));
    max-height: 300px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.location-country-picker.is-open .location-country-menu {
    display: grid;
    gap: 2px;
}

.entry-form .location-country-option {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.entry-form .location-country-option:hover,
.entry-form .location-country-option.is-selected {
    background: var(--surface-strong);
}

.location-country-option img {
    width: 24px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    background: #fff;
    object-fit: cover;
}

.location-country-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variable-grid-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.field-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.field-label-row > span:first-child {
    min-width: 0;
}

.entry-form .map-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-height: 0;
    text-transform: none;
}

.entry-form .map-text-link,
.entry-form .floor-list-link,
.entry-form .ipc-view-link {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.entry-form .map-text-link:hover,
.entry-form .floor-list-link:hover,
.entry-form .ipc-view-link:hover {
    background: transparent;
    color: #00525d;
    filter: none;
    text-decoration: underline;
}

.entry-form .map-text-link:focus-visible {
    background: transparent;
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: none;
}

.entry-form .ipc-view-link {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 3px;
    text-transform: none;
}

.entry-form .ipc-view-link:hover {
    color: #1d4ed8;
    text-decoration-thickness: 0.14em;
}

.entry-form .ipc-view-link:focus-visible {
    background: transparent;
    outline: 2px solid currentColor;
    outline-offset: 3px;
    box-shadow: none;
}

.night-surcharge-mode-field .field-label-line {
    display: block;
}

.night-surcharge-mode-field .required-mark {
    margin-left: 3px;
}

.variable-grid-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.space-pagination-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 28px;
}

.space-pagination {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.space-pagination[hidden] {
    display: none !important;
}

.entry-form .space-page-size-control,
.variable-collapsible-section .space-page-size-control,
.variable-collapsible-section .space-page-picker {
    display: inline-flex;
    align-items: center;
    grid-template-columns: none;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
}

.variable-collapsible-section .space-page-size-select {
    width: 76px;
    min-width: 76px;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
}

.variable-collapsible-section .space-page-select {
    width: 64px;
    min-width: 64px;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
}

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

.variable-collapsible-section .space-page-button {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--brand-primary);
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
}

.variable-collapsible-section .space-page-button-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.variable-collapsible-section .space-page-button:hover {
    border-color: #9333EA;
    background: #9333EA;
    color: #ffffff;
    filter: none;
}

.variable-collapsible-section .space-page-button:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 1px;
    filter: none;
}

.variable-collapsible-section .space-page-button[hidden] {
    display: none !important;
}

.variable-row-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(130px, 180px) 188px;
    gap: 8px;
    align-items: center;
}

.variable-row-grid-vehicles {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    padding-bottom: 4px;
    overflow-x: auto;
}

.variable-row-grid-discounts {
    grid-template-columns: minmax(110px, 0.55fr) minmax(170px, 1fr) minmax(190px, 1.1fr) 188px;
}

.variable-row-grid-discounts > .discount-filter-empty {
    grid-column: 1 / -1;
    margin: 0;
}

.discount-value-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.discount-value-cell > input {
    flex: 1 1 auto;
    min-width: 0;
}

.discount-value-cell > .cyclic-help-wrap {
    flex: 0 0 auto;
}

.discount-value-cell > .cyclic-help-wrap[hidden] {
    display: none;
}

.discount-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
}

.discount-filter-toolbar[hidden] {
    display: none;
}

.discount-filter-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.discount-filter-control > select {
    width: auto;
    min-width: 128px;
}

.vehicle-category-toolbar,
.variable-collection-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    padding: 0 2px 4px;
}

.variable-collection-toolbar {
    grid-column: 1 / -1;
}

.variable-collection-toolbar-split {
    justify-content: space-between;
}

.variable-collection-toolbar-split .variable-grid-actions {
    justify-content: flex-start;
}

.vehicle-category-add-button,
.variable-collection-add-button {
    flex: 0 0 auto;
    gap: 7px;
    min-width: 168px;
}

.vehicle-category-add-button > span:first-child,
.variable-collection-add-button > span:first-child {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 17px;
    line-height: 1;
}

.vehicle-category-table-head,
.variable-row-grid-vehicles .variable-row {
    display: grid;
    grid-template-columns:
        minmax(140px, 0.82fr)
        minmax(190px, 1.16fr)
        repeat(5, minmax(100px, 0.62fr))
        minmax(118px, 0.68fr)
        180px;
    gap: 8px;
    align-items: stretch;
    min-width: 1280px;
}

.vehicle-category-table-head {
    padding: 0 12px 4px;
}

.vehicle-category-table-head > span {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.vehicle-category-table-head .variable-column-heading-action {
    gap: 6px;
}

.variable-row-grid-vehicles .variable-row {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.variable-row-grid-vehicles .variable-row:hover {
    border-color: var(--line-strong);
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.06);
}

.vehicle-category-cell {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.vehicle-category-cell-label {
    display: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.vehicle-category-main-cell strong,
.vehicle-category-cell output,
.vehicle-category-cell-value {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vehicle-category-models-cell small,
.vehicle-category-rate-cell small {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-category-rate-detail-spacer {
    min-height: 1.2em;
}

.vehicle-category-rate-cell {
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.vehicle-category-capacity-cell {
    justify-items: center;
    text-align: center;
}

.vehicle-category-capacity-cell output {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.variable-row-grid-vehicles .variable-row-actions {
    align-self: center;
    justify-content: flex-end;
}

.variable-row-grid-spaces {
    grid-template-columns: minmax(150px, 1fr) repeat(var(--space-vehicle-count, 1), minmax(110px, 140px)) 188px;
}

.variable-row-grid-spaces.has-floors {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 210px) repeat(var(--space-vehicle-count, 1), minmax(100px, 132px)) 198px;
}

.variable-row-grid-spaces.has-locations {
    grid-template-columns:
        minmax(120px, 1fr)
        repeat(var(--space-location-count, 1), minmax(110px, 150px))
        repeat(var(--space-vehicle-count, 1), minmax(92px, 118px))
        198px;
}

.variable-row-grid-spaces.has-key-policy {
    grid-template-columns: minmax(150px, 1fr) repeat(var(--space-vehicle-count, 1), minmax(100px, 132px)) minmax(112px, 140px) 188px;
}

.variable-row-grid-spaces.has-floors.has-key-policy {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 210px) repeat(var(--space-vehicle-count, 1), minmax(92px, 124px)) minmax(112px, 140px) 198px;
}

.variable-row-grid-spaces.has-locations.has-key-policy {
    grid-template-columns:
        minmax(120px, 1fr)
        repeat(var(--space-location-count, 1), minmax(105px, 140px))
        repeat(var(--space-vehicle-count, 1), minmax(88px, 112px))
        minmax(112px, 140px)
        198px;
}

.variable-row-grid-spaces:not(.is-rental-units) {
    gap: 10px;
    align-items: stretch;
}

@supports (grid-template-columns: subgrid) {
    .variable-row-grid-spaces:not(.is-rental-units) > .variable-row:not([hidden]) {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        gap: inherit;
        align-items: stretch;
        min-width: 0;
        border-radius: 10px;
    }

    .variable-row-grid-spaces:not(.is-rental-units) > .variable-row:has(> select:focus) {
        background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--brand-primary) 10%, var(--surface)),
            0 0 0 1px color-mix(in srgb, var(--brand-primary) 38%, var(--line));
    }
}

@supports not (grid-template-columns: subgrid) {
    .variable-row-grid-spaces:not(.is-rental-units) > .variable-row:has(> select:focus) > :not([hidden]) {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    }
}

.variable-row-grid-spaces:not(.is-rental-units) :is(input[name="espacio_nombre"], [data-space-entry-field], [data-space-zone-field], [data-space-floor-field], [data-space-key-required-field], .space-vehicle-column) {
    min-height: 46px;
    font-size: 14px;
    font-weight: 800;
}

.variable-row-grid-spaces:not(.is-rental-units) input[name="espacio_nombre"] {
    background: #f8fbfc;
}

.variable-row-grid-spaces:not(.is-rental-units) :is([data-space-entry-field], [data-space-zone-field], [data-space-floor-field], [data-space-key-required-field]) {
    background-color: #fff;
}

.variable-row-grid-spaces:not(.is-rental-units) .variable-row-actions {
    align-self: stretch;
}

.variable-row-grid-spaces.is-rental-units {
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(78px, 0.55fr)
        minmax(120px, 0.8fr)
        minmax(120px, 0.9fr)
        minmax(130px, 0.9fr)
        minmax(130px, 0.8fr)
        minmax(120px, 0.8fr)
        188px;
}

.variable-row-grid-spaces.is-rental-units.has-floors {
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(78px, 0.55fr)
        minmax(120px, 0.8fr)
        minmax(120px, 0.9fr)
        minmax(130px, 0.9fr)
        minmax(130px, 0.8fr)
        minmax(120px, 0.8fr)
        188px;
}

.variable-row-grid-spaces.is-rental-units [data-space-floor-field] {
    display: none !important;
}

.rental-unit-table-field {
    min-width: 0;
}

.variable-row-grid > span {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.variable-row-grid > .variable-column-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.variable-row-grid > .variable-column-heading-action {
    justify-content: flex-start;
}

.variable-row {
    display: contents;
}

.variable-row[hidden] {
    display: none;
}

.employee-management-form {
    display: grid;
    margin-top: 18px;
    gap: 14px;
}

.employee-management-form > .panel.collapsible-panel {
    margin-top: 0;
}

.employee-management-form > .collapsible-panel > .collapsible-summary .collapsible-title {
    display: grid;
    gap: 3px;
}

.employee-management-form > .collapsible-panel > .collapsible-summary .collapsible-title small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.employee-management-section > .variable-collapsible-body {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.employee-absence-body {
    display: grid;
    gap: 14px;
}

.employee-absence-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.employee-absence-toolbar p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.employee-absence-toolbar .button {
    width: auto;
    flex: 0 0 auto;
}

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

.employee-absence-row {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(145px, 0.7fr)
        minmax(145px, 0.7fr)
        minmax(220px, 1.35fr)
        auto;
    align-items: end;
    gap: 12px;
    padding: 14px 14px 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(43, 47, 51, 0.05);
}

.employee-absence-row::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
}

.employee-absence-row.is-certificate::before {
    background: #b5475a;
}

.employee-absence-row.is-vacation::before {
    background: #c68a18;
}

.employee-absence-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.employee-absence-row :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    text-transform: none;
}

.employee-absence-delete {
    min-height: 42px;
}

.employee-absence-empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
}

.employee-section-save {
    justify-self: end;
    width: auto;
}

.employee-list {
    display: grid;
    gap: 12px;
}

.employee-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1.25fr) minmax(120px, 0.65fr) minmax(130px, 0.7fr) minmax(190px, 1fr) minmax(210px, 1fr) minmax(150px, 0.75fr) minmax(96px, auto) minmax(230px, auto);
    gap: 12px 14px;
    align-items: center;
    padding: 14px 14px 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.employee-row::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--employee-color, var(--brand-primary));
}

.employee-row:hover {
    border-color: rgba(109, 40, 217, 0.34);
    box-shadow: 0 12px 28px rgba(43, 47, 51, 0.08);
    transform: translateY(-1px);
}

.employee-row.is-disabled {
    background: #f4f8f8;
    opacity: 1;
}

.employee-cell {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.employee-cell span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.employee-cell strong,
.employee-cell small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.employee-cell strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.25;
}

.employee-cell small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.employee-color-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--employee-color, var(--brand-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--employee-color, var(--brand-primary)) 16%, transparent);
}

.employee-verified-badge {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--brand-primary);
}

.employee-verified-badge::before {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.employee-verified-badge[hidden],
.employee-hidden-file {
    display: none;
}

.employee-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
}

.employee-actions .mini-button {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1500px) {
    .employee-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .employee-actions {
        grid-column: 1 / -1;
        justify-self: end;
        width: min(100%, 430px);
    }
}

.employee-empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
}

.employee-dialog-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-dialog-layout {
    display: block;
    min-height: 0;
    overflow: visible;
}

.employee-dialog-main {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    min-height: auto;
    overflow: visible;
    margin-bottom: 16px;
}

.employee-modal-section {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.05);
}

.employee-modal-summary {
    align-items: center;
    min-height: 56px;
    margin: 0;
    padding: 13px 16px;
    background: linear-gradient(180deg, #fff 0%, #f8fbfb 100%);
    cursor: pointer;
}

.employee-modal-summary .collapsible-heading {
    font-size: 18px;
}

.employee-modal-section[open] > .employee-modal-summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.employee-section-body {
    padding: 16px;
}

.employee-section-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

.employee-section-grid > .employee-schedule-field,
.employee-section-grid > .employee-rotation-box,
.employee-section-grid > .employee-rotation-preview {
    grid-column: 1 / -1;
}

.employee-function-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.employee-function-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 34px;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.employee-function-row:hover {
    border-color: rgba(109, 40, 217, 0.32);
    background: #fdfefe;
}

.employee-function-row input[type="checkbox"],
.employee-toggle-line input {
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.employee-color-field {
    align-content: start;
}

.employee-color-control {
    display: inline-flex;
    align-items: center;
    height: 42px;
}

.employee-color-control input[type="color"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--employee-color, var(--brand-primary));
}

.employee-color-control input[type="color"] {
    overflow: hidden;
    cursor: pointer;
}

.employee-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.employee-color-control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 999px;
}

.employee-info-button {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 1px solid var(--brand-primary);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
}

.field-label-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.employee-salary-taxed-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.employee-salary-taxed-field > legend {
    width: 100%;
    margin: 0;
    padding: 0;
}

.employee-salary-taxed-controls {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    min-width: 0;
}

.employee-salary-taxed-controls > :is(input, select) {
    min-width: 0;
}

.employee-salary-taxed-preview {
    min-height: 15px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

@media (max-width: 720px) {
    .employee-salary-taxed-controls {
        grid-template-columns: 1fr;
    }
}

.recargo-switch-heading {
    align-items: center;
}

.recargo-switch-field.is-disabled input[data-recargo-switch-input] {
    background: var(--surface-soft);
    color: var(--muted);
    cursor: default;
}

.mini-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
}

.mini-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mini-switch span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #dfe8eb;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mini-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 33, 0.2);
    transition: transform 0.15s ease;
}

.mini-switch input:checked + span {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.mini-switch input:checked + span::after {
    transform: translateX(16px);
}

.employee-validate-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.employee-validation-status,
[data-employee-contract-current] {
    min-height: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.employee-schedule-field input {
    cursor: pointer;
}

.employee-section-grid input[readonly][role="button"] {
    cursor: pointer;
}

.employee-section-grid input[readonly][role="button"]:hover:not(:disabled) {
    border-color: rgba(109, 40, 217, 0.42);
}

.employee-section-grid input[readonly][role="button"]:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.18);
}

.employee-section-grid input[readonly][role="button"]:disabled {
    border-color: #d5dfe2;
    background: #edf2f3;
    color: #000000;
    opacity: 1;
}

.employee-schedule-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.employee-shift-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid #8fa9b4;
    border-radius: 999px;
    background: #edf4f6;
    color: #000000;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.employee-shift-chip.is-rotated {
    border-color: #83c7ac;
    background: #e8f7ee;
    color: #146c35;
}

.employee-schedule-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.employee-schedule-preview[hidden] {
    display: none;
}

.employee-schedule-preview span {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.employee-rotation-box {
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.employee-rotation-box label {
    margin: 0;
}

.employee-rotation-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fbfdfd 0%, #f4f9fa 100%);
}

.employee-rotation-box:has(.employee-rotation-settings:not([hidden])) .employee-rotation-intro {
    border-bottom: 1px solid var(--line);
}

.entry-form .employee-rotation-intro .employee-toggle-line {
    display: flex;
    align-items: center;
    align-self: auto;
    min-width: 0;
    min-height: 32px;
    gap: 9px;
    padding: 0;
    cursor: pointer;
}

.entry-form .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"] {
    appearance: none;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid #9bb0b8;
    border-radius: 999px;
    background: radial-gradient(circle at 8px 50%, #ffffff 0 6px, transparent 6.5px), #dfe8eb;
    box-shadow: inset 0 0 0 1px rgba(49, 75, 86, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.entry-form .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"]:checked {
    border-color: var(--brand-primary);
    background: radial-gradient(circle at calc(100% - 8px) 50%, #ffffff 0 6px, transparent 6.5px), var(--brand-primary);
}

.entry-form .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"]:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

.entry-form .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"]:disabled {
    opacity: 0.58;
}

.employee-rotation-intro-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    color: var(--ink);
    line-height: 1.25;
    text-transform: none;
}

.employee-rotation-intro-copy strong {
    font-size: 13px;
    font-weight: 800;
}

.employee-rotation-intro-copy small {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
}

.employee-rotation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid #c3d0d5;
    border-radius: 999px;
    background: #edf2f4;
    color: #000000;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.employee-rotation-status.is-active {
    border-color: #72bea0;
    background: #e2f5eb;
    color: #146c35;
}

.employee-rotation-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    background: #f7fafb;
}

.employee-rotation-settings[hidden],
.employee-rotation-source-panel[hidden] {
    display: none !important;
}

.employee-rotation-step {
    display: grid;
    align-content: start;
    gap: 11px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d7e3e7;
    border-radius: 8px;
    background: #ffffff;
}

.employee-rotation-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.employee-rotation-step-heading > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.employee-rotation-step-heading strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.employee-rotation-step-heading small {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.employee-rotation-step-number {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.employee-rotation-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.employee-rotation-duration-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.employee-rotation-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.entry-form .employee-rotation-presets button {
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #c7d6db;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    box-shadow: none;
    filter: none;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.entry-form .employee-rotation-presets button:hover:not(:disabled) {
    border-color: rgba(109, 40, 217, 0.42);
    background: #f1f9fa;
    color: var(--brand-primary);
    filter: none;
}

.entry-form .employee-rotation-presets button:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.18);
    outline-offset: 1px;
}

.entry-form .employee-rotation-presets button[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.08);
}

.entry-form .employee-rotation-presets button:disabled {
    border-color: #d5dfe2;
    background: #edf2f3;
    color: #000000;
    opacity: 1;
    box-shadow: none;
}

.employee-rotation-field-error {
    display: block;
    color: var(--danger);
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.35;
    text-transform: none;
}

.employee-rotation-field-error[hidden] {
    display: none !important;
}

.entry-form .employee-rotation-duration-field input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(197, 43, 77, 0.12);
    outline: 0;
}

.employee-rotation-source-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.employee-rotation-source-options .employee-rotation-source-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    padding: 8px 9px;
    border: 1px solid #cfdde1;
    border-radius: 8px;
    background: #fbfdfd;
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.employee-rotation-source-option > input[type="radio"] {
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.employee-rotation-source-option > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.employee-rotation-source-option strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.employee-rotation-source-option small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.employee-rotation-source-option:hover:not(:has(input:disabled)) {
    border-color: rgba(109, 40, 217, 0.38);
    background: #f3fafb;
}

.employee-rotation-source-option:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.18);
    outline-offset: 1px;
}

.employee-rotation-source-option:is(.is-selected, :has(input:checked)) {
    border-color: var(--brand-primary);
    background: #eef9fa;
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.employee-rotation-source-option:has(input:disabled) {
    border-color: #d7e0e3;
    background: #f0f4f5;
    color: #000000;
    opacity: 1;
    box-shadow: none;
}

.employee-rotation-source-option:has(input:disabled) :is(strong, small) {
    color: inherit;
}

.employee-rotation-source-panel {
    display: grid;
    min-width: 0;
    padding: 10px;
    border: 1px solid #d7e3e7;
    border-radius: 8px;
    background: #f7fafb;
}

.employee-rotation-source-panel > label {
    min-width: 0;
}

.employee-rotation-guidance {
    grid-column: 1 / -1;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #d5e1e5;
    border-radius: 7px;
    background: #f2f6f7;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    text-transform: none;
}

.employee-rotation-reciprocity {
    margin: 9px 0 0;
    padding: 8px 10px;
    border: 1px solid #9cc3d5;
    border-radius: 7px;
    background: #eaf4f9;
    color: #1f4a5c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    text-transform: none;
}

.employee-rotation-reciprocity[hidden] {
    display: none !important;
}

.employee-rotation-preview {
    --employee-rotation-base-border: #9eb4bd;
    --employee-rotation-base-surface: #f4f8fa;
    --employee-rotation-rotated-border: #83c7ac;
    --employee-rotation-rotated-surface: #e8f7ee;
    display: block;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.employee-rotation-preview[hidden] {
    display: none !important;
}

.employee-rotation-calendar {
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.employee-rotation-calendar[open] > .employee-rotation-calendar-summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.employee-rotation-calendar-summary {
    align-items: center;
    min-height: 52px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: #f5fafb;
}

.employee-rotation-calendar-summary .collapsible-heading {
    font-size: 16px;
}

.employee-rotation-calendar-summary strong {
    display: none;
}

.employee-rotation-calendar-summary small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.employee-rotation-calendar-body {
    min-width: 0;
    overflow: visible;
    padding: 12px;
}

.employee-rotation-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    margin-bottom: 10px;
}

.employee-rotation-overview:empty {
    display: none;
}

.employee-rotation-phase {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--employee-rotation-base-border);
    border-left: 4px solid #6d8d99;
    border-radius: 8px;
    background: var(--employee-rotation-base-surface);
}

.employee-rotation-phase.is-rotated {
    border-color: var(--employee-rotation-rotated-border);
    border-left-color: #2f9a68;
    background: var(--employee-rotation-rotated-surface);
}

.employee-rotation-phase.is-incomplete {
    border-color: #d6b45d;
    border-left-color: #c18a12;
    background: #fff9e8;
}

.employee-rotation-phase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-bottom: 2px;
}

.employee-rotation-phase-duration {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid rgba(82, 102, 110, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #000000;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}

.employee-rotation-phase > strong {
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.employee-rotation-phase > small {
    min-width: 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.employee-rotation-phase > p {
    min-width: 0;
    margin: 2px 0 0;
    color: #000000;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.employee-rotation-phase.is-incomplete > p {
    color: #715816;
}

.employee-rotation-phase.is-incomplete .employee-shift-chip,
.employee-rotation-preview-cell.is-incomplete .employee-shift-chip {
    border-color: #c59a31;
    background: #fff2c9;
    color: #73510b;
}

.employee-rotation-preview-notice {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #dcc27c;
    border-radius: 7px;
    background: #fff8e5;
    color: #66501a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.employee-rotation-preview-notice[hidden] {
    display: none !important;
}

.employee-rotation-day-detail {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d5e1e5;
    border-radius: 8px;
    background: #ffffff;
}

.employee-rotation-day-detail > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 10px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.employee-rotation-day-detail > summary::-webkit-details-marker {
    display: none;
}

.employee-rotation-day-detail > summary::after {
    content: "";
    justify-self: center;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    transform: rotate(45deg);
    transition: transform 0.15s ease, margin 0.15s ease;
}

.employee-rotation-day-detail[open] > summary {
    border-bottom: 1px solid #d5e1e5;
    background: #f5fafb;
}

.employee-rotation-day-detail[open] > summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.employee-rotation-day-detail > summary:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.18);
    outline-offset: -3px;
}

.employee-rotation-day-detail > summary span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.employee-rotation-day-detail > summary small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.employee-rotation-day-detail-body {
    min-width: 0;
    overflow: visible;
    padding: 10px;
}

.employee-rotation-preview-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    overflow: visible;
    background: transparent;
}

.employee-rotation-preview-cell {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 5px;
    min-height: 100px;
    padding: 8px;
    border: 1px solid var(--employee-rotation-base-border);
    border-radius: 7px;
    background: var(--employee-rotation-base-surface);
}

.employee-rotation-preview-cell.is-base {
    border-color: var(--employee-rotation-base-border);
    background: var(--employee-rotation-base-surface);
}

.employee-rotation-preview-cell.is-rotated {
    border-color: var(--employee-rotation-rotated-border);
    background: var(--employee-rotation-rotated-surface);
}

.employee-rotation-preview-cell.is-change {
    border-left: 4px solid #d8a526;
}

.employee-rotation-preview-cell.is-sample-jump {
    border-top: 2px dashed #d8a526;
}

.employee-rotation-preview-cell.is-incomplete {
    border-color: #d6b45d;
    background: #fff9e8;
}

.employee-rotation-preview-cell strong,
.employee-rotation-preview-cell small {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.employee-rotation-preview-cell strong {
    color: var(--ink);
    font-size: 13px;
}

.employee-rotation-preview-cell small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.employee-rotation-preview-cell.is-rotated small {
    color: #146c35;
}

.employee-rotation-preview-cell.is-incomplete small {
    color: #715816;
}

.employee-contract-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.employee-contract-section:not([open]) {
    grid-template-rows: auto;
}

.employee-contract-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.employee-contract-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-right: auto;
}

.employee-contract-actions .button {
    width: auto;
    min-width: 132px;
}

.employee-contract-preview {
    display: grid;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.employee-contract-preview[hidden] {
    display: none;
}

.employee-contract-preview iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

.employee-contract-preview .empty-state {
    display: grid;
    place-items: center;
}
.entry-form .variable-row .mini-button,
.variable-collapsible-section .variable-row .mini-button {
    min-width: 0;
    width: 88px;
    height: 42px;
    padding: 0 10px;
}

.variable-collapsible-section .variable-row .mini-button.wide {
    width: 188px;
}

.variable-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.variable-collapsible-section input,
.variable-collapsible-section select,
.variable-collapsible-section textarea {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
}

.variable-collapsible-section select[multiple] {
    height: 86px;
    padding: 8px 10px;
}

.rental-broker-picker {
    position: relative;
    display: block;
    width: 100%;
}

.rental-broker-open {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.rental-broker-open::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    transform: rotate(45deg);
    pointer-events: none;
}

.rental-broker-open[aria-expanded="true"]::after {
    top: 20px;
    transform: rotate(-135deg);
}

.rental-broker-menu {
    position: absolute;
    z-index: 35;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    gap: 8px;
    max-height: min(280px, 42vh);
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(20, 40, 45, 0.16);
}

.rental-broker-menu[hidden] {
    display: none;
}

.rental-broker-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    width: 100%;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.rental-broker-option::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-primary);
    opacity: 0;
    transform: translateY(-50%);
}

.rental-broker-option:hover,
.rental-broker-option:focus-visible {
    border-color: rgba(109, 40, 217, 0.22);
    background: #f7fbfc;
    outline: none;
}

.rental-broker-option.is-selected,
.rental-broker-option[aria-pressed="true"] {
    border-color: var(--line);
    color: var(--brand-primary);
}

.rental-broker-option.is-selected::after,
.rental-broker-option[aria-pressed="true"]::after {
    opacity: 1;
}

/* El listado de estacionamientos es un desplegable más del formulario: la caja
   la pone .panel y acá sólo queda la grilla interna del cuerpo. */
.parking-config-list {
    grid-column: 1 / -1;
    margin-top: 2px;
}

.parking-config-list-body {
    display: grid;
    gap: 8px;
}

.parking-config-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.parking-config-table {
    width: 100%;
    min-width: 1140px;
    border-collapse: collapse;
    color: var(--ink);
}

.parking-config-table :is(th, td) {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.parking-config-table thead th {
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.parking-config-table tbody tr:last-child :is(th, td) {
    border-bottom: 0;
}

.parking-config-table tbody th {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.parking-config-table tbody td:nth-child(2),
.parking-config-table tbody td:nth-child(3),
.parking-config-table tbody td:nth-child(4),
.parking-config-table tbody td:nth-child(5) {
    white-space: normal;
}

.parking-config-table tbody tr.is-active :is(th, td) {
    background: rgba(109, 40, 217, 0.07);
}

.parking-config-table tbody tr.parking-config-draft :is(th, td) {
    background: rgba(109, 40, 217, 0.04);
    border-bottom-style: dashed;
}

/* El nombre se muestra tal cual se cargó: acá no se grita en mayúsculas. */
.parking-config-table tbody th.parking-config-name {
    text-transform: none;
}

.parking-config-features-row > td {
    padding-top: 4px;
}

.parking-config-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.parking-config-features li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.parking-config-features strong {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.parking-config-spaces-column {
    width: 86px;
    text-align: center !important;
}

.parking-config-actions-column {
    width: 322px;
}

.parking-config-table .parking-config-actions-column,
.parking-config-actions {
    white-space: nowrap;
}

.parking-config-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.parking-config-actions .mini-button {
    flex: 0 0 auto;
    min-width: 92px;
}

.parking-select-button:disabled,
.parking-select-button[disabled] {
    border-color: rgba(109, 40, 217, 0.28);
    background: rgba(109, 40, 217, 0.12);
    color: var(--brand-primary);
    cursor: default;
}

.parking-draft-pill {
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
    cursor: default;
}

.space-vehicle-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.space-vehicle-column.is-selected {
    border-color: var(--brand-primary);
    background: rgba(109, 40, 217, 0.14);
    color: #004f59;
}

.space-vehicle-column:hover {
    border-color: rgba(109, 40, 217, 0.32);
    color: var(--brand-primary);
}

.space-vehicle-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    align-self: stretch;
}

.space-vehicle-picker-title,
.space-vehicle-picker-empty {
    grid-column: 1 / -1;
    color: #000;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.space-vehicle-picker-empty {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
    text-transform: none;
}

.space-vehicle-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.space-vehicle-option input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px !important;
    min-width: 16px;
    height: 16px !important;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

[data-space-modal] .space-vehicle-option {
    cursor: pointer;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

[data-space-modal] .space-vehicle-option:hover {
    border-color: #8B5CF6;
    background: #f1fafa;
}

[data-space-modal] .space-vehicle-option:has(input:checked) {
    border-color: #8B5CF6;
    background: #e7f7f8;
    color: #004f59;
    box-shadow: inset 3px 0 0 #8B5CF6;
}

[data-space-modal] .space-vehicle-option:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 1px;
}

.variable-row select[aria-disabled="true"] {
    pointer-events: none;
}

.compact-form {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 12px;
}

.entry-form label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.entry-form [hidden] {
    display: none !important;
}

.parking-client-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-client-flags > .field-label-line {
    flex: 0 0 100%;
}

.parking-client-flags.has-client-switch > .field-label-line,
.parking-client-flags.has-client-switch .parking-client-change-link {
    order: 1;
}

.parking-client-flags.has-client-switch > .field-label-line {
    flex: 0 0 auto;
}

.parking-client-flags.has-client-switch::after {
    content: "";
    order: 2;
    flex: 0 0 100%;
}

.parking-client-flags.has-client-switch .parking-client-check {
    order: 3;
}

.entry-form .parking-client-change-link {
    align-self: center;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.entry-form .parking-client-check {
    position: relative;
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.entry-form .parking-registration-contract-client-flags .parking-client-check {
    box-sizing: border-box;
    flex: 0 1 170px;
    width: 170px;
    max-width: 100%;
}

.entry-form .parking-client-check:not(:has(input:disabled)):hover {
    border-color: var(--brand-primary);
}

.entry-form .parking-client-check:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.entry-form .parking-client-check:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
    outline-offset: 2px;
}

.entry-form .parking-client-check.is-locked {
    cursor: default;
    opacity: 1;
}

.entry-form .parking-client-check input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.entry-form .parking-client-check:has(input:disabled),
.entry-form .parking-client-check:has(input:disabled) input {
    cursor: default;
}

.parking-registration-contract-fields,
.parking-registration-existing-contract-fields,
.parking-registration-contract-vehicles,
.parking-registration-simple-vehicle {
    grid-column: 1 / -1;
    min-width: 0;
}

.parking-registration-simple-primary-fields:not([hidden]) {
    display: contents;
}

.entry-form[data-parking-registration-create-form] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parking-registration-contract-holder {
    display: contents;
}

.parking-registration-contract-holder.is-contract-active,
.parking-registration-contract-fields,
.parking-registration-existing-contract-fields {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
}

.parking-registration-contract-holder.is-contract-active {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    scroll-margin-top: 1rem;
}

#parking-registration-contract.is-contract-active:target {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.parking-registration-contract-fields > h3,
.parking-registration-existing-contract-fields > h3,
.parking-registration-contract-vehicles > h3 {
    display: block;
    margin: 0 0 13px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.parking-registration-contract-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
}

.parking-registration-existing-contract-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parking-registration-simple-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
}

.parking-alternative-vehicles-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.parking-alternative-vehicles-heading :is(h3, p, small) {
    margin: 0;
    color: var(--ink);
}

.parking-alternative-vehicles-heading h3 {
    font-size: 15px;
}

.parking-alternative-vehicles-heading p,
.parking-alternative-vehicles-heading small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.parking-alternative-vehicle-list {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
}

.parking-registration-simple-vehicle-list > .panel.collapsible-panel.parking-registration-simple-vehicle-panel {
    min-width: 0;
    margin: 0;
    border-radius: 12px;
}

.parking-registration-simple-vehicle-body {
    min-width: 0;
}

.parking-registration-simple-vehicle-summary {
    align-items: center;
}

.parking-registration-simple-vehicle-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    margin-top: 13px;
}

.parking-alternative-vehicle-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 13px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.parking-registration-simple-vehicle-grid.parking-alternative-vehicle-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.record-modal-parking-vehicle-grid > .parking-alternative-vehicles-heading,
.record-modal-parking-vehicle-grid > .parking-alternative-vehicle-list {
    grid-column: 1 / -1;
}

.entry-form .parking-alternative-vehicle-remove {
    display: inline-grid;
    place-items: center;
    align-self: end;
    justify-self: end;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .parking-alternative-vehicle-remove[hidden] {
    display: none;
}

.entry-form .parking-alternative-vehicle-remove svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.entry-form .parking-alternative-vehicle-remove:not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--danger) 84%, #000000);
    color: #ffffff;
    filter: none;
}

.entry-form .parking-alternative-vehicle-remove:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--danger) 28%, transparent);
    outline-offset: 2px;
}

.entry-form .parking-alternative-vehicle-remove[aria-disabled="true"] {
    border: 2px solid var(--danger);
    background: transparent;
    color: var(--danger);
    opacity: 1;
    cursor: default;
}

html[data-theme="dark"] .app-shell .entry-form .parking-alternative-vehicle-remove:not([aria-disabled="true"]) {
    background: var(--danger);
    color: #ffffff;
    box-shadow: none;
}

.parking-contract-alternative-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
    align-items: end;
    gap: 13px;
    min-width: 0;
}

.parking-registration-space-vehicle-count {
    width: auto;
    min-width: 0;
    margin: 0;
}

.parking-registration-contract-vehicle[data-registration-simple-space="1"]
    .parking-registration-contract-vehicle-person-grid:not(:has(> label:not([hidden]))) {
    display: none;
}

.parking-contract-alternative-list {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
}

.parking-contract-alternative-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 13px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.parking-registration-contract-vehicle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 13px;
}

.parking-registration-contract-vehicle-person-grid,
.parking-registration-contract-vehicle-contact-grid,
.record-modal-parking-primary-grid,
.record-modal-parking-vehicle-grid,
.record-modal-parking-period-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    min-width: 0;
    gap: 13px;
}

.parking-registration-contract-vehicle-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
    align-items: end;
    min-width: 0;
    gap: 13px;
}

.record-modal-parking-primary-grid,
.record-modal-parking-vehicle-grid,
.record-modal-parking-period-grid {
    grid-column: 1 / -1;
}

.record-modal-form > .parking-client-flags {
    grid-column: 1 / -1;
}

.parking-registration-contract-grid .field-label-line,
.parking-registration-contract-vehicle-grid .field-label-line,
.parking-registration-contract-holder-grid .field-label-line {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}

.parking-registration-dni-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.parking-registration-dni-field > input {
    width: 100%;
}

.parking-registration-dni-field > .field-label-row {
    flex-wrap: wrap;
}

.parking-registration-dni-field > .field-label-row > label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.parking-registration-nationality-picker {
    z-index: 20;
    margin-left: auto;
}

.parking-registration-nationality-picker.is-open {
    z-index: 1000;
}

.entry-form .parking-registration-nationality-button {
    display: inline-flex;
    max-width: 220px;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.entry-form .parking-registration-nationality-button .country-selected-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
}

.entry-form :is(
    .parking-registration-nationality-button [data-country-selected-name],
    #parking-registration-nationality-link-color
) {
    color: inherit !important;
}

.parking-registration-nationality-picker .country-picker-menu {
    right: 0;
    left: auto;
    text-align: left;
}

.parking-registration-price-mode-field {
    align-self: end;
}

.parking-registration-contract-vehicle-occupancy {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
    gap: 10px;
}

.parking-registration-contract-vehicle-occupancy > h4 {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

.parking-registration-contract-vehicle-occupancy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    min-width: 0;
    gap: 13px;
}

.parking-registration-category-prices-modal {
    z-index: 120;
}

/* La agenda de aumentos y los botones de categoría necesitan aire también sin
   contrato: el panel usa siempre el ancho grande de los modales de
   Condiciones. */
.parking-registration-category-prices-panel {
    align-self: center;
    width: min(980px, calc(100vw - 48px));
}

/* Con un contrato activo el ancho es el mismo: la clase queda por
   compatibilidad con los flujos que la siguen alternando. */
.parking-registration-category-prices-panel.is-contract-active {
    width: min(980px, calc(100vw - 48px));
}

/* Botones de categorías del acuerdo: mismo lenguaje visual que los de "Tipo
   de registro". Apagar una categoría la saca de las tablas y del acuerdo. */
.parking-registration-category-toggle-row {
    padding-bottom: 2px;
}

/* El acuerdo a la izquierda y la agenda de aumentos a su derecha. Con muchas
   categorías los botones se quedan con el renglón y la agenda cae abajo sola:
   por eso las dos piezas piden un ancho mínimo y el contenedor envuelve. */
.parking-registration-agreement-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 0;
    gap: 16px 24px;
}

.parking-registration-agreement-head > .parking-registration-category-toggle-row {
    flex: 1 1 260px;
    min-width: 0;
}

.parking-registration-agreement-head > .parking-registration-price-adjustment {
    flex: 1 1 380px;
    min-width: 0;
    padding-top: 0;
    border-top: 0;
}

.parking-registration-agreement-head > .parking-registration-price-adjustment[hidden] {
    display: none;
}

/* Barra de filtros del modal: lee igual que la de Registro de clientes y sólo
   recorta lo que se mira, nunca lo que se guarda. */
.parking-registration-modal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    min-width: 0;
    gap: 10px 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.parking-registration-modal-filters[hidden] {
    display: none;
}

.parking-registration-modal-filters-title {
    align-self: center;
    margin-right: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.entry-form .parking-registration-modal-filters > label {
    display: grid;
    min-width: 0;
    gap: 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.entry-form .parking-registration-modal-filters select {
    min-width: 168px;
}

/* Filtro visual por categoría de las tablas del acuerdo. */
.entry-form .parking-registration-category-filter-field {
    display: grid;
    min-width: 0;
    gap: 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.entry-form .parking-registration-category-filter-field select {
    min-width: 180px;
}

/* Sin ninguna categoría para elegir la barra queda vacía: se esconde entera
   para no dejar un recuadro con la palabra "Filtros" y nada más. */
.parking-registration-modal-filters:not(:has(label:not([hidden]))) {
    display: none;
}

.parking-registration-category-prices-panel .record-modal-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.parking-registration-category-prices-table,
.parking-registration-category-prices-body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.parking-registration-category-prices-head,
.parking-registration-category-price-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(150px, 1fr);
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.parking-registration-category-price-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

.parking-registration-category-prices-head {
    padding: 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-registration-category-price-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.parking-registration-category-price-row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

.entry-form .parking-registration-category-price-row > label {
    display: grid;
    align-content: center;
    min-width: 0;
}

.parking-registration-category-price-row input {
    width: 100%;
}

.parking-registration-category-price-row small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.parking-registration-category-prices-note {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.parking-registration-discount-preview-row {
    grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 0.9fr) minmax(150px, 1fr);
}

.parking-registration-discount-preview-row > label {
    display: grid;
    align-content: center;
    min-width: 0;
}

.parking-registration-discount-preview-row > span,
.parking-registration-discount-preview-row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

.entry-form .parking-registration-discount-preview-percentage,
.entry-form .parking-registration-price-adjustment > label,
.entry-form .parking-registration-price-adjustment-choice-row > label {
    display: grid;
    justify-self: start;
    min-width: 0;
    gap: 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.parking-registration-price-adjustment-choice-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.parking-registration-price-adjustment-choice-row > label,
.parking-registration-price-adjustment-choice-row input {
    width: 100%;
    min-width: 0;
}

.parking-registration-price-adjustment-choice-row > label[hidden] {
    display: none;
}

@media (min-width: 721px) {
    .parking-registration-price-adjustment-choice-row
        > [data-registration-price-adjustment-notification-date-field] {
        max-width: 320px;
    }
}

/* El selector de aumento vive dentro del modal de importes. Se presenta como
   un control de formulario, no como la acción primaria del alta. El id gana a
   la regla histórica de `.entry-form button` también en el tema oscuro. */
.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger,
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    filter: none;
}

.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger::after,
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* Chevron hacia abajo, como el de los selects: es un campo más. */
    transform: rotate(45deg);
}

.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:hover,
.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger[aria-expanded="true"],
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:hover,
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger[aria-expanded="true"] {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
    filter: none;
}

.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:focus-visible,
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
    outline-offset: 2px;
}

.entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:disabled,
.entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:disabled {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
    cursor: default;
}

.parking-registration-increase-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En el tema oscuro los campos van más oscuros que el panel. El disparador es
   un campo más, pero como es un `button` quedaba afuera de esa lista y se veía
   gris al lado de los selects. El id del modal ya gana por especificidad, así
   que la corrección tiene que nombrarlo igual de fuerte. */
html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-fields .parking-registration-increase-trigger,
html[data-theme="dark"] .app-shell .entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger {
    border-color: var(--line-strong);
    background: #121a1e;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:hover,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-fields .parking-registration-increase-trigger[aria-expanded="true"],
html[data-theme="dark"] .app-shell .entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:hover,
html[data-theme="dark"] .app-shell .entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger[aria-expanded="true"] {
    border-color: var(--line-strong);
    background: #182023;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:disabled,
html[data-theme="dark"] .app-shell .entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:disabled {
    border-color: var(--line-strong);
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-fields .parking-registration-increase-trigger:focus-visible,
html[data-theme="dark"] .app-shell .entry-form #parking-registration-category-prices-dialog .parking-registration-increase-trigger:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.32);
}

/* Este diálogo se abre desde el modal de importes (z-index 120). Aunque el
   anterior se oculte durante la edición, queda explícitamente por encima para
   evitar que futuros cambios de transición mezclen ambos backdrops. */
.parking-registration-contract-increase-modal {
    z-index: 140;
}

.parking-registration-contract-increase-panel {
    align-self: center;
    grid-template-rows: auto auto auto minmax(0, auto) auto;
    width: min(760px, 100%);
    max-height: min(88dvh, 780px);
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

.parking-registration-contract-increase-panel .record-modal-header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.parking-registration-contract-increase-panel .record-modal-header h2,
.parking-registration-contract-increase-panel .increment-mode-option,
.parking-registration-contract-increase-panel .increment-mode-option strong,
.parking-registration-contract-increase-panel .increment-mode-option small,
.parking-registration-contract-increase-panel .increment-ipc-summary,
.parking-registration-contract-increase-panel .increment-ipc-summary strong,
.parking-registration-contract-increase-panel .increment-ipc-summary small,
.parking-registration-contract-increase-panel .increment-example,
.parking-registration-contract-increase-panel .increment-example-row,
.parking-registration-contract-increase-panel .increment-example-row strong,
.parking-registration-contract-increase-panel .increment-example-row span,
.parking-registration-contract-increase-panel .increment-example-empty {
    color: var(--ink);
}

.parking-registration-contract-increase-panel .increment-mode-option {
    border-color: var(--line);
    background: var(--surface);
    font-size: 14px;
    line-height: 1.35;
    text-transform: none;
}

.parking-registration-contract-increase-panel .increment-mode-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

.parking-registration-contract-increase-panel .increment-mode-option:focus-within {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
    outline-offset: 2px;
}

.parking-registration-contract-increase-panel .increment-mode-option input {
    appearance: auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--brand-primary);
}

.parking-registration-contract-increase-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    min-width: 0;
}

.parking-registration-contract-increase-form > label {
    color: var(--ink);
}

.parking-registration-contract-increase-form [data-registration-contract-increase-fixed-control] {
    grid-column: 1 / -1;
    justify-self: start;
    width: min(340px, 100%);
}

.parking-registration-contract-increase-panel .increment-ipc-summary {
    grid-column: 1 / -1;
}

.parking-registration-contract-increase-panel .increment-ipc-list span {
    border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
    color: var(--ink);
    white-space: nowrap;
}

.parking-registration-contract-increase-panel .increment-example {
    border-color: var(--line);
    background: var(--surface-soft);
}

.parking-registration-contract-increase-panel .increment-example-row {
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme="dark"] .app-shell .variable-increment-panel.parking-registration-contract-increase-panel :is(
    .increment-mode-option,
    .increment-mode-option strong,
    .increment-mode-option small,
    .increment-ipc-summary,
    .increment-ipc-summary strong,
    .increment-ipc-summary small,
    .increment-ipc-list span,
    .increment-example,
    .increment-example-row,
    .increment-example-row strong,
    .increment-example-row span,
    .increment-example-empty
) {
    color: var(--ink);
}

/* Cancelar debe seguir siendo una acción neutral aunque todo el diálogo esté
   anidado dentro del formulario principal. */
.entry-form #parking-registration-contract-increase-dialog .record-modal-actions .button-neutral,
.entry-form #parking-registration-contract-increase-dialog .record-modal-actions .button-neutral:hover,
.entry-form #parking-registration-contract-increase-dialog .record-modal-actions .button-neutral:focus-visible {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
    filter: none;
}

.entry-form #parking-registration-contract-increase-dialog .record-modal-actions .button-neutral:hover,
.entry-form #parking-registration-contract-increase-dialog .record-modal-actions .button-neutral:focus-visible {
    background: var(--surface-soft);
}

/* Cancelar va en rojo, pero `.entry-form button` pinta del color de la marca a
   todo lo que cuelga del alta: hay que nombrarlo con el modal adelante. */
.entry-form .record-modal-actions .button-danger,
.entry-form .record-modal-actions .button-danger:hover,
.entry-form .record-modal-actions .button-danger:focus-visible {
    background: var(--danger);
    color: #ffffff;
}

.parking-registration-discount-schedule {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.parking-registration-discount-schedule[hidden] {
    display: none;
}

.parking-registration-discount-schedule-row {
    grid-template-columns: minmax(110px, 0.9fr) minmax(100px, 0.8fr) minmax(130px, 1fr) minmax(80px, 0.6fr) minmax(150px, 1fr);
}

.parking-registration-discount-schedule-row > span,
.parking-registration-discount-schedule-row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

/* Las categorías de un mismo aumento comparten banda. El siguiente mes
   alterna el tono y el tercero vuelve al primero, sin necesitar un color por
   cada fecha del calendario. */
.parking-registration-discount-schedule-row[data-registration-price-adjustment-month-band="even"] {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 13%, var(--surface));
}

.parking-registration-discount-schedule-row[data-registration-price-adjustment-month-band="odd"] {
    border-color: color-mix(in srgb, var(--accent-amber) 48%, var(--line));
    background: color-mix(in srgb, var(--accent-amber) 13%, var(--surface));
}

/* Modal de multa por mes: mismo lenguaje que la agenda de aumentos, con una
   fila por mes del contrato y bandas alternadas. */
.parking-registration-penalty-modal {
    z-index: 120;
}

.parking-registration-penalty-panel {
    align-self: center;
    width: min(720px, 100%);
}

.parking-registration-penalty-panel .record-modal-header p {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.parking-registration-penalty-note {
    margin: 0;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.parking-registration-penalty-schedule-row {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr);
}

.parking-registration-penalty-schedule-row[data-registration-price-adjustment-month-band="even"] {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 13%, var(--surface));
}

.parking-registration-penalty-schedule-row[data-registration-price-adjustment-month-band="odd"] {
    border-color: color-mix(in srgb, var(--accent-amber) 48%, var(--line));
    background: color-mix(in srgb, var(--accent-amber) 13%, var(--surface));
}

.parking-registration-price-adjustment {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.parking-registration-price-adjustment-title {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

.parking-registration-primary-occupancy:not([hidden]) {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
}

.parking-registration-primary-occupancy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 13px;
    min-width: 0;
}

.parking-registration-primary-occupancy > h4 {
    display: none;
}

.parking-registration-primary-occupancy.is-contract-active {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
}

.parking-registration-primary-occupancy.is-contract-active > h4 {
    display: block;
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

.parking-registration-primary-occupancy.is-contract-active .parking-registration-primary-occupancy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
}

.parking-registration-contract-holder-grid {
    display: contents;
}

.parking-registration-contract-holder.is-contract-active .parking-registration-contract-holder-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
}

/* Los cinco checks van juntos y arriba de todo: con el ancho de dos
   columnas se partían en dos filas y el bloque quedaba más alto que los campos
   de al lado. */
/* Con `repeat(auto-fit, ...)` el `1 / -1` se queda en una sola columna cuando la
   grilla colapsa, así que la fila completa se pide sólo donde los cinco checks
   entran de verdad. El selector le gana por especificidad a `.span-2`, que vive
   en una parte posterior de la hoja. */
@media (min-width: 820px) {
    .entry-form .parking-registration-contract-client-flags,
    .parking-registration-contract-holder .parking-registration-contract-client-flags {
        grid-column: 1 / -1;
    }
}

.entry-form :is(
    .parking-registration-contract-check,
    .parking-registration-existing-contract-check
) {
    min-height: 38px;
    background: var(--surface);
    color: var(--ink);
}

.parking-registration-submit-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.entry-form[data-parking-registration-create-form] .parking-registration-submit-actions {
    justify-content: flex-end;
}

.entry-form .parking-registration-submit-actions > button {
    margin: 0;
}

.entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button {
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: #000000;
}

.entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button:hover,
.entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button:focus-visible {
    border-color: var(--line-strong);
    background: var(--line);
    color: #000000;
    filter: none;
}

.parking-registration-contract-pdf-button:disabled {
    cursor: default;
    opacity: 1;
}

.parking-registration-contract-vehicles {
    display: grid;
    gap: 12px;
}

.parking-registration-contract-vehicles > h3 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.parking-registration-contract-vehicles > [data-registration-contract-count-field] {
    width: min(100%, 270px);
}

.parking-registration-contract-availability {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 34%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.parking-registration-contract-availability.is-error {
    border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
    color: var(--danger);
}

.parking-registration-existing-contract-fields {
    display: grid;
    gap: 12px;
}

.parking-registration-existing-contract-fields select {
    width: 100%;
    min-width: 0;
}

.parking-registration-existing-contract-reservation {
    margin: 8px 0 12px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 34%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.parking-registration-contract-vehicle-list {
    display: grid;
    gap: 12px;
}

.parking-registration-contract-vehicle-list > .panel.collapsible-panel.parking-registration-contract-vehicle {
    margin-top: 0;
}

.parking-registration-contract-vehicle {
    min-width: 0;
    margin: 0;
    border-radius: 12px;
}

.parking-registration-contract-vehicle-body {
    min-width: 0;
}

.parking-registration-contract-vehicle-summary {
    align-items: center;
}

.parking-registration-contract-vehicle.is-incomplete > .parking-registration-contract-vehicle-summary,
.app-shell .parking-registration-contract-vehicle.is-incomplete > .parking-registration-contract-vehicle-summary {
    background: #fff4f4;
    box-shadow: inset 4px 0 0 var(--danger);
}

.parking-registration-contract-vehicle.is-complete > .parking-registration-contract-vehicle-summary,
.app-shell .parking-registration-contract-vehicle.is-complete > .parking-registration-contract-vehicle-summary {
    background: #eefaf6;
    box-shadow: inset 4px 0 0 var(--positive);
}

.parking-registration-contract-vehicle.is-incomplete,
.app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-incomplete {
    border-color: var(--danger);
}

.parking-registration-contract-vehicle.is-complete,
.app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-complete {
    border-color: var(--positive);
}

.app-shell .parking-registration-contract-vehicle.is-incomplete > .parking-registration-contract-vehicle-summary .collapsible-indicator {
    border-color: var(--danger);
    color: var(--danger);
}

.app-shell .parking-registration-contract-vehicle.is-complete > .parking-registration-contract-vehicle-summary .collapsible-indicator {
    border-color: var(--positive);
    color: var(--positive);
}

.app-shell .panel.collapsible-panel.parking-registration-contract-vehicle > .parking-registration-contract-vehicle-summary .collapsible-heading {
    color: #000000;
}

/* El placeholder del contacto cambia según el país elegido, así que el
   selector estable es el atributo del campo y no el texto de ejemplo. */
.entry-form input:is(
    [data-phone-example],
    [placeholder="11 1234-5678"],
    [placeholder="ejemplo@correo.com"]
)::placeholder {
    color: #8a989b;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .entry-form input:is(
    [data-phone-example],
    [placeholder="11 1234-5678"],
    [placeholder="ejemplo@correo.com"]
)::placeholder {
    color: #7f9299;
    opacity: 1;
}

/* Iconitos de estado del contacto: miniaturas de los círculos de acciones de
   contacto, verdes cuando el número acompaña (móvil apto para WhatsApp,
   formato telefónico del país) y rojos cuando no. Van pegados al texto del
   rótulo "Contacto", en la misma línea del label, no adentro del campo. */
.phone-status-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.phone-status-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: #ffffff;
}

.phone-status-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.phone-status-icon.is-ok {
    background: #22c55e;
}

.phone-status-icon.is-bad {
    background: var(--danger);
}

.parking-registration-contract-vehicle :is(input, select):invalid {
    border-color: var(--danger);
}

@media (max-width: 1100px) {
    .entry-form[data-parking-registration-create-form],
    .parking-registration-contract-holder.is-contract-active .parking-registration-contract-holder-grid,
    .parking-registration-existing-contract-grid,
    .parking-registration-simple-vehicle-grid,
    .parking-registration-contract-vehicle-person-grid,
    .parking-registration-contract-vehicle-contact-grid,
    .parking-registration-contract-vehicle-occupancy-grid,
    .parking-registration-primary-occupancy-grid,
    .record-modal-parking-primary-grid,
    .record-modal-parking-vehicle-grid,
    .record-modal-parking-period-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-contract-alternative-actions,
    .parking-registration-contract-vehicle-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 42px;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .parking-alternative-vehicle-row,
    .parking-registration-simple-vehicle-grid.parking-alternative-vehicle-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }

    .parking-contract-alternative-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-alternative-vehicle-row > label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .entry-form .parking-alternative-vehicle-remove {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 720px) {
    .entry-form[data-parking-registration-create-form],
    .parking-registration-contract-holder.is-contract-active .parking-registration-contract-holder-grid,
    .parking-registration-contract-grid,
    .parking-registration-existing-contract-grid,
    .parking-registration-contract-vehicle-grid,
    .parking-registration-contract-vehicle-person-grid,
    .parking-registration-contract-vehicle-contact-grid,
    .parking-registration-contract-vehicle-occupancy-grid,
    .parking-registration-simple-vehicle-grid,
    .parking-registration-primary-occupancy-grid,
    .record-modal-parking-primary-grid,
    .record-modal-parking-vehicle-grid,
    .record-modal-parking-period-grid {
        grid-template-columns: 1fr;
    }

    .parking-contract-alternative-actions,
    .parking-registration-contract-vehicle-details-grid {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .parking-contract-alternative-actions > label,
    .parking-registration-contract-vehicle-details-grid > label {
        grid-column: 1;
    }

    .parking-contract-alternative-actions > label:nth-of-type(1),
    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(1) {
        grid-row: 1;
    }

    .parking-contract-alternative-actions > label:nth-of-type(2),
    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(2) {
        grid-row: 2;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(3) {
        grid-row: 3;
    }

    .parking-registration-contract-vehicle-details-grid > label:nth-of-type(4) {
        grid-row: 4;
    }

    .parking-alternative-vehicle-row,
    .parking-registration-simple-vehicle-grid.parking-alternative-vehicle-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .parking-contract-alternative-row {
        grid-template-columns: 1fr;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(1),
    .parking-alternative-vehicle-row > label:nth-of-type(2),
    .parking-alternative-vehicle-row > label:nth-of-type(3) {
        grid-column: 1 / -1;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(1) {
        grid-row: 1;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(2) {
        grid-row: 2;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(3) {
        grid-row: 3;
    }

    .parking-alternative-vehicle-row > label:nth-of-type(4) {
        grid-column: 1;
        grid-row: 4;
    }

    .entry-form .parking-alternative-vehicle-remove {
        grid-column: 2;
        grid-row: 4;
    }

    .parking-alternative-vehicles-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .parking-registration-simple-vehicle-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parking-registration-simple-vehicle-actions .parking-alternative-vehicle-remove {
        align-self: flex-end;
    }

    .parking-registration-category-prices-head {
        display: none;
    }

    .parking-registration-category-price-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .entry-form .parking-registration-category-filter-field {
        width: 100%;
        margin-left: 0;
    }

    .entry-form .parking-registration-category-filter-field select {
        width: 100%;
        min-width: 0;
    }

    .parking-registration-price-adjustment-choice-row {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .parking-registration-contract-increase-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        gap: 14px;
        padding: 20px 16px 16px;
    }

    .parking-registration-contract-increase-form {
        grid-template-columns: 1fr;
    }

    .parking-registration-contract-increase-form [data-registration-contract-increase-fixed-control] {
        width: 100%;
    }

    .parking-registration-contract-increase-panel .increment-example-row {
        grid-template-columns: 1fr;
    }

}

.entry-form .parking-client-check.is-locked input {
    cursor: default;
}

.parking-client-picker-field {
    display: grid;
    align-self: end;
    min-width: 0;
    gap: 6px;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-client-picker-button {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #000000;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.entry-form .parking-client-picker-button {
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: #000000;
}

.parking-client-picker-button::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    transform: rotate(45deg);
}

.parking-client-picker-button:hover,
.parking-client-picker-button:focus-visible,
.entry-form .parking-client-picker-button:hover,
.entry-form .parking-client-picker-button:focus-visible {
    border-color: var(--brand-primary);
    background: #fff;
    color: var(--ink);
    filter: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
    outline: none;
}

.parking-client-picker-button.is-empty {
    color: var(--muted);
}

.parking-client-picker-button:disabled {
    cursor: default;
    opacity: 1;
}

.required-mark {
    color: var(--danger);
    font-weight: 800;
}

.field-label-line {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Una etiqueta que entra en dos renglones deja el asterisco contra el borde
   derecho: como caja flex, el texto es un ítem que se queda con toda la línea
   y empuja la marca al final. Cuando adentro no hay más que el texto y el
   asterisco, se arma como texto corrido y el asterisco sigue a la última
   palabra. Las etiquetas con un ícono o un botón adentro siguen en flex. */
.field-label-line:has(> .required-mark):not(:has(> *:not(.required-mark))) {
    display: inline;
}

.field-label-line:has(> .required-mark):not(:has(> *:not(.required-mark)))
    > .required-mark {
    margin-left: 3px;
}

.institutional-contact-label {
    display: inline-grid;
    grid-template-columns: 1.6em minmax(0, auto);
    align-items: center;
    column-gap: 0.4em;
    min-width: 0;
}

.institutional-contact-icon {
    display: block;
    width: 1.6em;
    max-width: none;
    height: 1em;
    object-fit: contain;
    object-position: center;
    justify-self: center;
    filter: brightness(0) saturate(100%);
}

html[data-theme="dark"] .app-shell .institutional-contact-icon {
    filter: none;
}

.gastos-field-tools {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    text-transform: none;
}

.gastos-label-row {
    justify-content: flex-start;
}

.panel.gastos-collapsible-panel {
    margin-top: 18px;
}

.panel.gastos-collapsible-panel ~ .panel.gastos-collapsible-panel {
    margin-top: 14px;
}

.parking-maintenance-content {
    display: grid;
    gap: 14px;
}

.parking-maintenance-subpanel {
    min-width: 0;
    margin: 0;
    padding: 12px;
    box-shadow: none;
}

.parking-maintenance-subpanel > .collapsible-summary .collapsible-heading {
    font-size: 17px;
}

.parking-maintenance-subpanel-body {
    min-width: 0;
}

.parking-maintenance-keys-body,
.parking-maintenance-keys-history {
    display: grid;
    gap: 14px;
}

.parking-maintenance-keys-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.parking-maintenance-keys-summary article,
.parking-maintenance-keys-total {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    background: var(--surface-soft);
}

.parking-maintenance-keys-summary span,
.parking-maintenance-keys-total small {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.parking-maintenance-keys-summary strong,
.parking-maintenance-keys-total output {
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.parking-maintenance-key-estimate {
    border-color: var(--brand-primary) !important;
}

.parking-maintenance-keys-change-note {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.parking-maintenance-keys-form {
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(135px, 0.7fr)
        minmax(180px, 1fr)
        minmax(165px, 0.9fr)
        minmax(175px, 0.9fr);
    align-items: end;
}

.parking-maintenance-keys-total {
    min-height: 64px;
}

.parking-maintenance-keys-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.parking-maintenance-keys-history h3 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
}

.parking-maintenance-keys-history .table-wrap {
    border: 1px solid var(--line);
    border-radius: 10px;
}

.parking-maintenance-keys-history table {
    min-width: 680px;
}

.parking-maintenance-keys-history tbody tr:hover {
    background: var(--surface-soft);
}

.parking-maintenance-intro {
    max-width: 840px;
    margin: 0;
    color: var(--muted);
}

.parking-maintenance-form,
.parking-maintenance-edit-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.parking-maintenance-form > .parking-maintenance-item-field,
.parking-maintenance-form > .parking-maintenance-description-field {
    grid-column: span 2;
}

.parking-maintenance-units-editor {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.parking-maintenance-units-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.parking-maintenance-units-heading > div {
    display: grid;
    gap: 3px;
}

.entry-form .parking-maintenance-unit-add,
.entry-form .parking-maintenance-unit-remove {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.entry-form .parking-maintenance-unit-add:disabled {
    cursor: default;
    opacity: 1;
}

.entry-form .parking-maintenance-unit-remove {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    align-self: end;
    background: var(--danger);
}

.parking-maintenance-units-list {
    display: grid;
    gap: 10px;
}

.parking-maintenance-unit-row {
    display: grid;
    grid-template-columns:
        minmax(145px, 1fr)
        minmax(180px, 1.15fr)
        minmax(135px, 0.85fr)
        minmax(150px, 0.9fr)
        minmax(120px, 0.75fr)
        minmax(120px, 0.75fr)
        auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}

.parking-maintenance-unit-row > label {
    min-width: 0;
}

.parking-maintenance-unit-schedule {
    display: grid;
    min-height: 64px;
    align-content: center;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.parking-maintenance-unit-schedule small,
.parking-maintenance-renew-schedule small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.parking-maintenance-unit-schedule strong,
.parking-maintenance-renew-schedule strong {
    color: var(--ink);
    font-size: 13px;
}

.record-modal-panel.parking-maintenance-catalog-panel {
    width: min(840px, 100%);
    max-height: min(86vh, 760px);
    overflow-x: hidden;
    overflow-y: auto;
    gap: 18px;
    padding: 28px 26px 22px;
}

.parking-maintenance-catalog-panel .record-modal-header {
    padding-right: 36px;
}

.parking-maintenance-catalog-panel .record-modal-header h2 {
    font-size: 23px;
}

.parking-maintenance-catalog-panel .record-modal-close {
    top: 12px;
    right: 12px;
}

.parking-maintenance-catalog-panel .record-modal-header p {
    max-width: 610px;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.parking-maintenance-type-form,
.parking-maintenance-type-row {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.parking-maintenance-type-row {
    background: var(--surface);
}

.parking-maintenance-type-fields {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.25fr)
        repeat(2, minmax(180px, 1fr));
    gap: 14px;
    align-items: start;
}

.parking-maintenance-type-name-field,
.parking-maintenance-type-month-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.parking-maintenance-type-name-field .field-label-line {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.parking-maintenance-type-rule {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.parking-maintenance-type-form [hidden],
.parking-maintenance-type-row [hidden] {
    display: none;
}

.parking-maintenance-type-name-field > input,
.parking-maintenance-type-month-field > input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.parking-maintenance-type-name-field > input:focus,
.parking-maintenance-type-month-field > input:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(124, 58, 237, 0.14);
}

.parking-maintenance-type-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.parking-maintenance-type-choice legend {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.parking-maintenance-type-form .parking-maintenance-radio-options,
.parking-maintenance-type-row .parking-maintenance-radio-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.parking-maintenance-type-form .parking-maintenance-radio-options label,
.parking-maintenance-type-row .parking-maintenance-radio-options label {
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.parking-maintenance-type-form .parking-maintenance-radio-options input,
.parking-maintenance-type-row .parking-maintenance-radio-options input {
    width: 15px;
    min-width: 15px;
    height: 15px;
    accent-color: var(--brand-primary);
}

.parking-maintenance-type-form
    .parking-maintenance-radio-options label:has(input:checked),
.parking-maintenance-type-row
    .parking-maintenance-radio-options label:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.parking-maintenance-type-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.parking-maintenance-catalog-list {
    display: grid;
    gap: 12px;
}

.parking-maintenance-catalog-list > h3 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.parking-maintenance-catalog-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.parking-maintenance-catalog-table-head,
.parking-maintenance-type-record {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr) 92px;
    gap: 12px;
    align-items: center;
}

.parking-maintenance-catalog-table-head {
    min-height: 40px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.parking-maintenance-catalog-table-head > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.parking-maintenance-type-record {
    min-height: 58px;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.parking-maintenance-catalog-table-head + .parking-maintenance-type-record {
    border-top: 0;
}

.parking-maintenance-type-record > :is(strong, span) {
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.parking-maintenance-type-record-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.parking-maintenance-type-edit-button {
    min-width: 76px;
    border-color: var(--accent-blue);
    background: var(--accent-blue);
    color: #fff;
}

.parking-maintenance-type-edit-button:hover,
.parking-maintenance-type-edit-button:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.parking-maintenance-catalog-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.parking-maintenance-catalog-actions {
    padding-top: 2px;
}

@media (max-width: 820px) {
    .record-modal-panel.parking-maintenance-catalog-panel {
        width: min(100%, calc(100vw - 24px));
        padding: 24px 20px 18px;
    }

    .parking-maintenance-type-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-type-name-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .parking-maintenance-type-fields {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-type-name-field {
        grid-column: auto;
    }

    .parking-maintenance-catalog-table-head {
        display: none;
    }

    .parking-maintenance-type-record {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 12px;
    }

    .parking-maintenance-catalog-cell {
        display: grid;
        grid-template-columns: minmax(105px, 0.55fr) minmax(0, 1fr);
        gap: 8px;
    }

    .parking-maintenance-catalog-cell::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .parking-maintenance-type-record-actions {
        justify-content: stretch;
    }

    .parking-maintenance-type-edit-button {
        width: 100%;
    }

}

.parking-maintenance-renew-schedule {
    display: grid;
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.parking-maintenance-renew-schedule > span {
    display: grid;
    gap: 4px;
    min-height: 64px;
    align-content: center;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.parking-maintenance-deadline-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-maintenance-deadline-choice legend {
    margin: 0 0 6px;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-transform: inherit;
}

html[data-theme="dark"] .entry-form .parking-maintenance-deadline-choice {
    color: var(--muted);
}

.parking-maintenance-radio-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entry-form .parking-maintenance-radio-options label {
    display: inline-flex;
    min-width: 74px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.entry-form .parking-maintenance-radio-options input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.entry-form .parking-maintenance-radio-options label:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.parking-maintenance-notice-field {
    grid-column: span 2;
}

.parking-maintenance-date-inputs {
    display: grid;
    grid-template-columns: minmax(135px, 1fr) minmax(94px, auto);
    align-items: center;
    gap: 8px;
}

.parking-maintenance-countdown {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
}

.parking-maintenance-countdown.is-futuro {
    border-color: rgba(8, 127, 111, 0.28);
    color: var(--positive);
    background: rgba(8, 127, 111, 0.09);
}

.parking-maintenance-countdown.is-hoy {
    border-color: rgba(183, 121, 31, 0.3);
    color: #8a570f;
    background: rgba(183, 121, 31, 0.1);
}

.parking-maintenance-countdown.is-pasado {
    border-color: rgba(194, 61, 66, 0.3);
    color: var(--danger);
    background: rgba(194, 61, 66, 0.09);
}

.parking-maintenance-form-actions,
.parking-maintenance-edit-actions {
    grid-column: 1 / -1;
}

.parking-maintenance-form-actions,
.parking-maintenance-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.parking-maintenance-table {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.parking-maintenance-table-head,
.parking-maintenance-record-summary {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.8fr)
        minmax(95px, 0.7fr)
        minmax(115px, 0.85fr)
        minmax(105px, 0.75fr)
        minmax(115px, 0.8fr)
        minmax(135px, 1.05fr)
        repeat(2, minmax(95px, 0.7fr))
        minmax(130px, 1fr)
        minmax(110px, 0.8fr)
        minmax(105px, 0.75fr);
    gap: 8px;
    align-items: stretch;
    min-width: 1340px;
}

.parking-maintenance-table-head {
    min-height: 42px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.parking-maintenance-table-head > span {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-maintenance-list {
    display: grid;
    gap: 0;
    min-width: 1340px;
}

.parking-maintenance-record {
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
}

.parking-maintenance-record:first-child {
    border-top: 0;
}

.parking-maintenance-record-summary {
    min-height: 58px;
    padding: 5px 12px;
    background: var(--surface);
}

.parking-maintenance-record:hover .parking-maintenance-record-summary {
    background: var(--surface-soft);
}

.parking-maintenance-record-cell,
.parking-maintenance-record-status {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    padding: 7px 6px;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.parking-maintenance-record-item strong {
    font-size: 14px;
}

.parking-maintenance-record-detail-button {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--link-blue);
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.parking-maintenance-record-detail-button:hover {
    color: #174fa3;
}

.parking-maintenance-record-detail-button:focus-visible {
    border-radius: 3px;
    outline: 3px solid rgba(31, 111, 214, 0.3);
    outline-offset: 3px;
}

.parking-maintenance-ipc-help {
    display: inline-grid;
    width: 100%;
    grid-template-columns: max-content 16px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.parking-maintenance-ipc-help-button {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--link-blue);
    background: var(--link-blue);
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.parking-maintenance-ipc-help-button:hover,
.parking-maintenance-ipc-help-button:focus-visible {
    border-color: #174fa3;
    background: #174fa3;
}

.parking-maintenance-ipc-help-button:focus-visible {
    outline: 3px solid rgba(31, 111, 214, 0.3);
    outline-offset: 2px;
}

.parking-maintenance-ipc-comment.cyclic-help-popover {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
    padding: 7px 8px;
    border-left: 3px solid var(--link-blue);
    background: var(--surface-soft);
    box-shadow: none;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.parking-maintenance-record-stacked {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.parking-maintenance-record-stacked small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.parking-maintenance-record-estimate strong {
    color: var(--brand-primary);
}

.parking-maintenance-record-status {
    justify-content: flex-start;
}

.parking-maintenance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.parking-maintenance-status.is-vigente {
    border-color: rgba(8, 127, 111, 0.28);
    color: var(--positive);
    background: rgba(8, 127, 111, 0.09);
}

.parking-maintenance-status:is(.is-proximo, .is-vence-hoy) {
    border-color: rgba(183, 121, 31, 0.3);
    color: #8a570f;
    background: rgba(183, 121, 31, 0.1);
}

.parking-maintenance-status.is-vencido {
    border-color: rgba(194, 61, 66, 0.3);
    color: var(--danger);
    background: rgba(194, 61, 66, 0.09);
}

.parking-maintenance-status.is-aviso {
    border-color: rgba(183, 121, 31, 0.3);
    color: #8a570f;
    background: rgba(183, 121, 31, 0.1);
}

.parking-maintenance-record-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.parking-maintenance-record-detail {
    display: grid;
    gap: 14px;
}

.parking-maintenance-record-detail[hidden],
.parking-maintenance-record-body [data-maintenance-record-edit-content][hidden],
.parking-maintenance-record-panel [data-maintenance-record-edit-from-detail][hidden] {
    display: none;
}

.parking-maintenance-record-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.parking-maintenance-record-detail-grid article {
    min-width: 0;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.parking-maintenance-record-detail-grid article > span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-maintenance-record-detail-grid article > strong:not(.parking-maintenance-status) {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.parking-maintenance-record-detail-grid article > small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.parking-maintenance-record-detail-grid .parking-maintenance-record-detail-wide {
    grid-column: span 2;
}

.record-modal-panel.parking-maintenance-record-panel {
    width: min(1120px, 100%);
    max-height: min(90vh, 860px);
    overflow-x: hidden;
    overflow-y: auto;
}

.parking-maintenance-record-panel .record-modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.parking-maintenance-record-panel .parking-maintenance-record-body {
    padding: 0;
}

.parking-maintenance-record-panel > .record-modal-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.parking-maintenance-renew-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.parking-maintenance-renewal-filter-form {
    grid-template-columns: repeat(2, minmax(180px, 240px)) auto;
    justify-content: start;
    margin-bottom: 14px;
}

.parking-maintenance-renewals-table-wrap {
    border: 1px solid var(--line);
    border-radius: 10px;
}

.parking-maintenance-renewals-table {
    min-width: 960px;
}

.parking-maintenance-renewals-table th:last-child,
.parking-maintenance-renewals-table td:last-child {
    width: 170px;
    text-align: right;
}

.parking-maintenance-renewals-table tbody tr:hover {
    background: var(--surface-soft);
}

.parking-maintenance-renewal-amount {
    font-weight: 800;
}

.parking-maintenance-renewal-amount.is-estimated {
    color: var(--brand-primary);
}

.parking-maintenance-renewal-amount.is-paid {
    color: var(--positive);
}

.parking-maintenance-renewal-amount.is-notice {
    color: var(--muted);
}

.parking-maintenance-renewal-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.parking-maintenance-renewal-status.is-registrada {
    border-color: rgba(8, 127, 111, 0.28);
    color: var(--positive);
    background: rgba(8, 127, 111, 0.09);
}

.parking-maintenance-renewal-status:is(.is-pendiente, .is-hoy, .is-aviso) {
    border-color: rgba(183, 121, 31, 0.3);
    color: #8a570f;
    background: rgba(183, 121, 31, 0.1);
}

.parking-maintenance-renewal-status.is-vencida {
    border-color: rgba(194, 61, 66, 0.3);
    color: var(--danger);
    background: rgba(194, 61, 66, 0.09);
}

.parking-maintenance-renewal-status.is-espera {
    opacity: 1;
}

.parking-maintenance-renewal-button {
    min-width: 145px;
    border-color: var(--accent-blue) !important;
    background: var(--accent-blue) !important;
    color: #fff !important;
    white-space: nowrap;
}

.parking-maintenance-renewal-button:hover,
.parking-maintenance-renewal-button:focus-visible {
    border-color: #1d4ed8 !important;
    background: #1d4ed8 !important;
    color: #fff !important;
}

.parking-maintenance-renewal-action-state {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.record-modal-panel.parking-maintenance-renew-panel {
    width: min(900px, 100%);
}

.parking-maintenance-renew-manual-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
}

.parking-maintenance-renew-manual-fields[hidden],
.parking-maintenance-renew-catalog-fields[hidden],
.parking-maintenance-renew-catalog-fields > [hidden],
.parking-maintenance-renew-schedule[hidden],
.parking-maintenance-renew-estimate[hidden] {
    display: none;
}

.parking-maintenance-renew-catalog-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
}

.parking-maintenance-renew-estimate {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

.parking-maintenance-renew-amount-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.parking-maintenance-renew-heading,
.parking-maintenance-payment-history-heading {
    display: grid;
    align-self: center;
    gap: 3px;
}

.parking-maintenance-renew-heading,
.parking-maintenance-renew-actions {
    grid-column: 1 / -1;
}

.parking-maintenance-renew-primary-field,
.parking-maintenance-renew-payment-field {
    grid-column: span 2;
}

.parking-maintenance-renew-primary-field input[readonly] {
    background: var(--surface);
    cursor: default;
}

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

.parking-maintenance-payment-history {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.parking-maintenance-payment-history-table {
    display: grid;
    grid-template-columns: minmax(140px, 0.5fr) minmax(160px, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.parking-maintenance-payment-history-table > span,
.parking-maintenance-payment-history-table > strong {
    min-width: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.parking-maintenance-payment-history-table > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

.parking-maintenance-payment-history-table > :nth-child(even) {
    border-left: 1px solid var(--line);
}

.parking-maintenance-payment-history-header {
    color: var(--muted);
    background: var(--surface-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .parking-maintenance-keys-summary,
    .parking-maintenance-keys-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-form,
    .parking-maintenance-edit-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-renew-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-renew-manual-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-record-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-renew-heading,
    .parking-maintenance-renew-actions {
        grid-column: 1 / -1;
    }

    .parking-maintenance-renew-primary-field,
    .parking-maintenance-renew-payment-field {
        grid-column: auto;
    }

    .parking-maintenance-notice-field {
        grid-column: 1 / -1;
    }

    .parking-maintenance-form-actions,
    .parking-maintenance-edit-actions {
        grid-column: 1 / -1;
    }

    .parking-maintenance-unit-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-maintenance-unit-remove {
        justify-self: end;
    }
}

@media (max-width: 720px) {
    .parking-maintenance-keys-summary,
    .parking-maintenance-keys-form {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-keys-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parking-maintenance-keys-actions button {
        width: 100%;
    }

    .parking-maintenance-form,
    .parking-maintenance-edit-form {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-form > .parking-maintenance-item-field,
    .parking-maintenance-form > .parking-maintenance-description-field {
        grid-column: auto;
    }

    .parking-maintenance-units-heading {
        align-items: flex-start;
    }

    .parking-maintenance-unit-row {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-unit-remove {
        justify-self: end;
    }

    .parking-maintenance-notice-field {
        grid-column: auto;
    }

    .parking-maintenance-renew-form {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-renewal-filter-form,
    .parking-maintenance-renew-manual-fields,
    .parking-maintenance-renew-catalog-fields,
    .parking-maintenance-record-detail-grid {
        grid-template-columns: 1fr;
    }

    .parking-maintenance-record-detail-grid .parking-maintenance-record-detail-wide {
        grid-column: auto;
    }

    .parking-maintenance-renew-actions button {
        width: 100%;
    }

    .parking-maintenance-renew-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parking-maintenance-renew-schedule {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .parking-maintenance-payment-history-table {
        grid-template-columns: minmax(105px, 0.65fr) minmax(0, 1fr);
    }

    .parking-maintenance-table {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .parking-maintenance-table-head {
        display: none;
    }

    .parking-maintenance-list {
        gap: 10px;
        min-width: 0;
    }

    .parking-maintenance-record,
    .parking-maintenance-record:first-child {
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .parking-maintenance-record-summary {
        grid-template-columns: 1fr;
        gap: 8px;
        min-width: 0;
        padding: 12px;
    }

    .parking-maintenance-record-cell,
    .parking-maintenance-record-status {
        display: grid;
        grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
    }

    .parking-maintenance-record-cell::before,
    .parking-maintenance-record-status::before {
        align-self: center;
        color: var(--muted);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .parking-maintenance-record-stacked::before {
        grid-row: 1 / span 3;
    }

    .parking-maintenance-record-stacked > strong,
    .parking-maintenance-record-stacked > small {
        grid-column: 2;
    }

    .parking-maintenance-form-actions,
    .parking-maintenance-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parking-maintenance-form-actions button,
    .parking-maintenance-edit-actions button {
        width: 100%;
    }
}

html[data-theme="dark"] .app-shell .parking-maintenance-status:is(.is-proximo, .is-vence-hoy, .is-aviso) {
    color: #ffd28a;
}

html[data-theme="dark"] .app-shell .parking-maintenance-panel {
    --ink: #fff;
    --text: #fff;
    --muted: #fff;
    --muted-soft: #fff;
    color: #fff;
}

html[data-theme="dark"] .app-shell .parking-maintenance-record-detail-button {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .parking-maintenance-record-detail-button:hover {
    color: #b8e2ff;
}

html[data-theme="dark"] .app-shell .parking-maintenance-ipc-help-button {
    border-color: var(--link-blue-dark);
    background: var(--link-blue-dark);
    color: #000000;
}

html[data-theme="dark"] .app-shell .parking-maintenance-ipc-help-button:hover,
html[data-theme="dark"] .app-shell .parking-maintenance-ipc-help-button:focus-visible {
    border-color: #b8e2ff;
    background: #b8e2ff;
}

html[data-theme="dark"] .app-shell .parking-maintenance-panel :is(
    input,
    select,
    textarea
) {
    color: #fff;
}

html[data-theme="dark"] .app-shell .parking-maintenance-panel :is(
    input,
    textarea
)::placeholder {
    color: #e4edef;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .parking-maintenance-countdown.is-hoy {
    color: #ffd28a;
}

html[data-theme="dark"] .app-shell .parking-maintenance-record-estimate strong,
html[data-theme="dark"] .app-shell .parking-maintenance-renewal-amount:is(
    .is-estimated,
    .is-paid
) {
    color: #fff;
}

html[data-theme="dark"] .app-shell .parking-maintenance-renewal-status:is(
    .is-pendiente,
    .is-hoy,
    .is-aviso
) {
    border-color: rgba(251, 191, 36, 0.58);
    color: #fde68a;
    background: rgba(217, 119, 6, 0.2);
}

.gastos-entry-form {
    grid-template-columns:
        minmax(180px, 0.85fr)
        minmax(210px, 0.95fr)
        minmax(240px, 1.05fr)
        minmax(300px, 1.35fr);
}

.gastos-entry-form .gastos-provider-field {
    grid-column: 1;
}

.gastos-entry-form .gastos-property-field {
    grid-column: 1 / -1;
}

.gastos-entry-form .gastos-name-field {
    grid-column: 2;
}

.gastos-entry-form .gastos-category-field {
    grid-column: 3;
}

.gastos-entry-form .gastos-subcategory-field {
    grid-column: 4;
    min-width: 0;
}

.gastos-entry-form .gastos-field-tools {
    flex: 0 0 auto;
    white-space: nowrap;
}

.gastos-entry-form .gastos-method-field {
    grid-column: 1;
}

.gastos-card-field {
    display: grid;
    align-self: end;
    gap: 6px;
    min-width: 0;
}

.gastos-card-field > label {
    min-width: 0;
}

.entry-form select[data-gastos-card-select] option[data-gastos-card-add-option] {
    background-color: var(--brand-primary);
    color: #ffffff;
    font-weight: 800;
}

.gastos-entry-form.uses-card .gastos-method-field {
    grid-column: 1;
    grid-row: 2;
}

.gastos-entry-form.uses-card .gastos-card-field {
    grid-column: 2;
    grid-row: 2;
}

.gastos-entry-form.uses-card .gastos-payment-date-field {
    grid-column: 3;
    grid-row: 2;
}

.gastos-entry-form.uses-card .gastos-amount-field {
    grid-column: 4;
    grid-row: 2;
}

.gastos-entry-form.uses-card .gastos-invoice-field {
    grid-column: 2;
    grid-row: 3;
}

.gastos-entry-form.uses-card .gastos-description-field {
    grid-column: 3 / 5;
    grid-row: 3;
}

.gastos-entry-form.uses-card.is-credit .gastos-installments-field,
.gastos-entry-form.uses-card:not(.is-credit) .gastos-frequency-field {
    grid-column: 1;
    grid-row: 3;
}

.gastos-entry-form.uses-card.is-credit .gastos-installment-start-field {
    grid-column: 2;
    grid-row: 3;
}

.gastos-entry-form.uses-card.is-credit .gastos-invoice-field {
    grid-column: 3;
}

.gastos-entry-form.uses-card.is-credit .gastos-description-field {
    grid-column: 4;
}

.gastos-entry-form .gastos-payment-date-field {
    grid-column: 2;
}

.gastos-entry-form .gastos-amount-field {
    grid-column: 3;
}

.gastos-entry-form .gastos-invoice-field {
    grid-column: 4;
}

.gastos-entry-form .gastos-installments-field,
.gastos-entry-form .gastos-frequency-field {
    grid-column: 1;
}

.gastos-entry-form .gastos-installment-start-field,
.gastos-entry-form .gastos-frequency-day-field {
    grid-column: 2;
}

.gastos-entry-form .gastos-description-field {
    grid-column: 3 / 5;
}

.gastos-entry-form:where(:not(.is-credit):not(.has-frequency-day)) .gastos-description-field {
    grid-column: 2 / 5;
}

.gastos-entry-form .gastos-description-field textarea {
    height: 42px;
    min-height: 42px;
}

.gastos-items-editor {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.gastos-items-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.gastos-items-heading > .field-label-line {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.gastos-items-balance {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
    text-transform: none;
}

.gastos-items-balance[data-state="error"] {
    color: var(--danger);
}

.gastos-items-balance[data-state="success"] {
    color: #176b3a;
}

.gastos-items-balance[data-state="legacy"] {
    color: #7a5a00;
}

.gastos-items-list {
    display: grid;
    gap: 9px;
}

.gastos-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) 32px;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.gastos-item-row label {
    min-width: 0;
}

.gastos-item-row input[readonly] {
    background: var(--surface-strong);
    cursor: default;
}

.gastos-item-row.is-invalid input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(194, 61, 66, 0.16);
}


/* El gris distingue los modos que no se pueden combinar. El texto conserva
   negro/blanco puro y no se usa opacidad para comunicar el bloqueo. */
.entry-form .parking-client-check.is-registration-mode-locked {
    border-color: #9aa5ad;
    background: #d9dee1;
    color: #000000;
    cursor: default;
    opacity: 1;
}
.entry-form .gastos-item-add,
.entry-form .gastos-item-remove {
    display: inline-grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    place-items: center;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    text-transform: none;
}

.entry-form .gastos-item-add {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.entry-form .gastos-item-add:disabled {
    border-color: var(--line);
    background: var(--surface-strong);
    color: var(--muted);
    cursor: default;
    opacity: 1;
}

.entry-form .gastos-item-remove {
    border: 1px solid var(--danger);
    background: #fff;
    color: var(--danger);
}

.entry-form .gastos-item-add:focus-visible,
.entry-form .gastos-item-remove:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

.gastos-item-error {
    grid-column: 1 / -1;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.gastos-entry-form > .gastos-form-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(170px, 220px) minmax(180px, 260px);
    gap: 13px;
    align-items: end;
    justify-content: end;
    min-width: 0;
    padding-top: 2px;
}

.gastos-entry-form .gastos-form-actions .gastos-receipt-field,
.gastos-entry-form .gastos-form-actions .gastos-submit-button {
    grid-column: auto;
    width: 100%;
    min-width: 0;
}

.gastos-entry-form .gastos-form-actions .gastos-submit-button {
    justify-self: stretch;
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

.gastos-entry-form .gastos-form-actions .payment-file-control,
.gastos-entry-form .gastos-form-actions .file-upload {
    width: 100%;
}

.file-upload.gastos-compact-upload {
    width: min(220px, 100%);
    min-width: 0;
    min-height: 34px;
}

.file-upload.gastos-compact-upload span {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.file-upload:focus-within span {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

.gastos-provider-form {
    display: block;
}

.gastos-provider-grid {
    display: grid;
    gap: 13px;
    align-items: end;
    /* Igual que el alta de Registros, cada fila comparte guías verticales.
       En escritorio son cinco columnas: cinco campos arriba y cuatro campos
       más las acciones abajo. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gastos-provider-row {
    display: grid;
    gap: 13px;
    align-items: end;
    grid-template-columns:
        minmax(180px, 0.85fr)
        minmax(210px, 0.95fr)
        minmax(240px, 1.05fr)
        minmax(300px, 1.35fr);
}

.gastos-provider-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.gastos-provider-form label {
    display: grid;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.gastos-provider-form input,
.gastos-provider-form select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #000000;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
}

.gastos-provider-form input:focus,
.gastos-provider-form select:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

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

.gastos-provider-row .gastos-list-actions {
    align-self: end;
    min-height: 42px;
}

.gastos-provider-reason-field,
.gastos-provider-country-field,
.gastos-provider-state-field,
.gastos-provider-city-field,
.gastos-provider-tax-field,
.gastos-provider-contact-field,
.gastos-provider-email-field,
.gastos-provider-address-field,
.gastos-provider-note-field {
    min-width: 0;
}

.gastos-provider-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: auto;
    gap: 10px;
}

.gastos-provider-error {
    grid-column: 1 / -1;
    margin: 0;
}

.gastos-provider-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
}

.gastos-provider-note-field {
    min-width: 0;
}

.gastos-provider-actions {
    justify-content: stretch;
    margin-top: 0;
}

.gastos-provider-list-panel {
    width: min(1500px, calc(100vw - 32px));
}

.gastos-provider-count {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.gastos-provider-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(170px, 0.8fr));
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
}

.gastos-provider-filter-bar label,
.gastos-provider-picker-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.gastos-provider-filter-bar :is(input, select) {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}

.gastos-provider-table-wrap {
    max-height: min(58vh, 600px);
    overflow: auto;
}

.gastos-provider-table {
    min-width: 1390px;
}

.gastos-provider-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.gastos-provider-table td {
    max-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gastos-provider-table td:first-child {
    min-width: 180px;
}

.gastos-provider-table td:last-child {
    min-width: 150px;
}

.gastos-provider-table .gastos-list-actions {
    flex-wrap: nowrap;
}

.record-modal-panel.gastos-provider-picker-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(560px, 100%);
    max-height: min(82vh, 680px);
}

.gastos-provider-picker-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.gastos-provider-picker-filters .gastos-provider-search-field {
    grid-column: 1 / -1;
}

.gastos-provider-picker-results {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    max-height: 430px;
    overflow: auto;
    padding: 2px;
}

.gastos-provider-picker-option {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    width: 100%;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.gastos-provider-picker-option:hover,
.gastos-provider-picker-option:focus-visible,
.gastos-provider-picker-option[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: #f3fbfc;
    outline: none;
}

.gastos-provider-picker-option :is(strong, span, small) {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.gastos-provider-picker-option strong {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.gastos-provider-picker-option :is(span, small) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.gastos-provider-picker-option.is-none {
    grid-template-columns: 1fr;
}

.gastos-provider-picker-open,
.entry-form .gastos-provider-picker-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.gastos-provider-picker-open::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    transform: rotate(45deg);
}

.gastos-provider-picker-open:hover,
.gastos-provider-picker-open:focus-visible,
.entry-form .gastos-provider-picker-open:hover,
.entry-form .gastos-provider-picker-open:focus-visible {
    border-color: var(--brand-primary);
    background: #fff;
    color: var(--ink);
    filter: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
    outline: none;
}

.gastos-provider-picker-open [data-gastos-provider-picker-value] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-modal[data-gastos-provider-picker-modal] {
    z-index: 1004;
}

.gastos-provider-table tr[hidden],
.gastos-provider-picker-option[hidden] {
    display: none;
}

.gastos-provider-modal-copy strong {
    color: var(--ink);
    font-size: 14px;
}

.gastos-provider-modal-copy span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.gastos-provider-edit-panel {
    width: min(780px, calc(100vw - 32px));
}

.gastos-provider-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gastos-provider-edit-form .record-modal-actions {
    grid-column: 1 / -1;
}

@media (max-width: 1600px) {
    .gastos-provider-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gastos-provider-grid > .gastos-provider-note-field,
    .gastos-provider-grid > .gastos-provider-actions {
        grid-column: span 2;
    }
}

@media (max-width: 1280px) {
    .gastos-provider-grid,
    .gastos-provider-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gastos-provider-grid > label {
        grid-column: auto;
    }

    .gastos-provider-grid > .gastos-provider-note-field,
    .gastos-provider-grid > .gastos-provider-actions {
        grid-column: 1 / -1;
    }

    .gastos-provider-row .gastos-list-actions {
        justify-content: flex-start;
    }
}

.gastos-record-filter-form label {
    min-width: 150px;
    color: #000000;
}

.gastos-record-filter-form label:nth-of-type(3),
.gastos-record-filter-form label:nth-of-type(4) {
    min-width: 190px;
}

.gastos-record-filter-form select {
    color: #000000;
}

.gastos-distribution-toolbar {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.gastos-distribution-filter-form {
    display: grid;
    width: min(720px, 100%);
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    overflow: visible;
}

.gastos-distribution-filter-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
}

.gastos-distribution-filter-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.gastos-distribution-filter-group {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--ink);
}

.gastos-distribution-filter-dropdown[open] {
    z-index: 40;
}

.gastos-distribution-filter-dropdown > summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.gastos-distribution-filter-dropdown > summary::-webkit-details-marker {
    display: none;
}

.gastos-distribution-filter-dropdown > summary:hover,
.gastos-distribution-filter-dropdown[open] > summary {
    border-color: rgba(0, 122, 133, 0.72);
    box-shadow: 0 0 0 2px rgba(0, 122, 133, 0.12);
}

.gastos-distribution-filter-dropdown > summary:focus-visible {
    outline: 3px solid rgba(0, 122, 133, 0.24);
    outline-offset: 2px;
}

.gastos-distribution-filter-summary-copy {
    display: grid;
    min-width: 0;
}

.gastos-distribution-filter-summary-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gastos-distribution-filter-field > select {
    width: 100%;
    min-height: 38px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.gastos-distribution-filter-dropdown > summary .collapsible-indicator {
    flex: 0 0 auto;
}

.gastos-distribution-filter-dropdown[open] > summary .collapsible-indicator::before {
    margin-top: 3px;
    transform: rotate(225deg);
}

.gastos-distribution-filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 100%;
    min-width: 250px;
    max-height: min(360px, 55vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: 0 16px 34px rgba(13, 31, 35, 0.2);
}

.gastos-distribution-filter-cards,
.gastos-distribution-filter-cards.is-methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.gastos-distribution-filter-form .gastos-distribution-filter-card {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.gastos-distribution-filter-card:hover {
    border-color: rgba(0, 122, 133, 0.58);
    transform: translateY(-1px);
}

.gastos-distribution-filter-card input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    accent-color: var(--accent-purple);
}

.gastos-distribution-filter-card span {
    overflow: hidden;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gastos-distribution-filter-card.is-selected {
    border-color: rgba(0, 122, 133, 0.58);
    background: rgba(0, 122, 133, 0.1);
}

.gastos-distribution-filter-card.is-mantenimiento.is-selected {
    border-color: rgba(139, 92, 246, 0.62);
    background: rgba(139, 92, 246, 0.12);
}

.gastos-distribution-filter-card.is-mantenimiento-estimado.is-selected {
    border-color: rgba(245, 158, 11, 0.68);
    background: rgba(245, 158, 11, 0.13);
}

.gastos-distribution-filter-card:has(input:focus-visible) {
    outline: 3px solid rgba(0, 122, 133, 0.24);
    outline-offset: 2px;
}

.gastos-distribution-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: -4px 0 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.gastos-distribution-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.gastos-distribution-legend i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-primary), var(--accent-purple));
}

.gastos-distribution-legend .is-mantenimiento {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.gastos-distribution-legend .is-mantenimiento-estimado {
    background: linear-gradient(135deg, #d97706, #fbbf24);
}

.gastos-distribution-series[hidden],
.gastos-distribution-series .bar-row[hidden],
.gastos-distribution-expenses[hidden],
.gastos-distribution-expense[hidden],
.gastos-distribution-legend span[hidden],
.gastos-distribution-segment[hidden],
.gastos-distribution-empty[hidden] {
    display: none !important;
}

.gastos-distribution-expenses {
    display: grid;
    gap: 12px;
}

.gastos-distribution-expense {
    display: grid;
    grid-template-columns: minmax(150px, 0.35fr) minmax(260px, 1fr) minmax(230px, auto);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.gastos-distribution-expense:hover {
    border-color: var(--accent-purple);
}

.gastos-distribution-expense[aria-disabled="true"] {
    cursor: default;
}

.gastos-distribution-expense[aria-disabled="true"]:hover {
    border-color: var(--line);
}

.gastos-distribution-expense.is-mantenimiento {
    border-left: 4px solid #8b5cf6;
    background:
        linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent 28%),
        var(--surface-soft);
}

.gastos-distribution-expense.is-mantenimiento[aria-disabled="true"]:hover {
    border-left-color: #8b5cf6;
}

.gastos-distribution-expense.is-mantenimiento-estimado {
    border-left: 4px solid #f59e0b;
    background:
        linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent 28%),
        var(--surface-soft);
}

.gastos-distribution-expense.is-mantenimiento-estimado[aria-disabled="true"]:hover {
    border-left-color: #f59e0b;
}

.gastos-distribution-expense:focus-visible {
    border-color: var(--accent-purple);
    outline: 3px solid rgba(0, 122, 133, 0.24);
    outline-offset: 2px;
}

.gastos-distribution-expense-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.gastos-distribution-expense-copy strong,
.gastos-distribution-expense-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gastos-distribution-expense-copy strong {
    font-size: 15px;
    line-height: 1.3;
}

.gastos-distribution-expense-copy small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.gastos-distribution-expense > .bar-value {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gastos-distribution-expense > .bar-value small {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .gastos-distribution-toolbar,
    .gastos-distribution-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .gastos-distribution-toolbar {
        width: 100%;
    }

    .gastos-distribution-filter-form {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .gastos-distribution-filter-popover {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 6px;
    }

    .gastos-distribution-filter-cards,
    .gastos-distribution-filter-cards.is-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .gastos-distribution-filter-cards,
    .gastos-distribution-filter-cards.is-methods,
    .gastos-distribution-filter-cards.is-months {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gastos-edit-panel {
    width: min(1040px, 100%);
}

.record-modal-panel.gastos-detail-panel {
    width: min(1540px, 100%);
    max-height: calc(100vh - 16px);
}

.gastos-detail-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
    gap: 18px;
    min-height: 0;
}

.gastos-detail-main {
    min-width: 0;
}

.gastos-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gastos-detail-grid article {
    min-width: 0;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.gastos-detail-grid article[hidden] {
    display: none;
}

.gastos-detail-grid .gastos-detail-wide {
    grid-column: 1 / -1;
}

.gastos-detail-grid span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.gastos-detail-grid strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.35;
}

.gastos-detail-items {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.gastos-detail-items-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gastos-detail-items-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}

.gastos-detail-items-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gastos-detail-items-list span,
.gastos-detail-items-list strong {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

.gastos-detail-installments > p {
    margin: -1px 0 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.gastos-installment-schedule-table {
    min-width: 780px;
}

.gastos-installment-schedule-table tr.is-pagado td:nth-child(4) {
    color: var(--positive);
    font-weight: 800;
}

.gastos-installment-schedule-table tr.is-pendiente td:nth-child(4) {
    color: var(--accent);
    font-weight: 800;
}

.gastos-installment-schedule-table tr.is-a-vencer td:nth-child(4) {
    color: var(--accent-violet);
    font-weight: 800;
}

.gastos-installment-schedule-table tr.is-vencido td:nth-child(4) {
    color: var(--danger);
    font-weight: 800;
}

.gastos-installment-receipts {
    display: grid;
    gap: 4px;
}

.gastos-installment-receipts a {
    color: var(--link-blue);
    font-weight: 700;
    text-decoration: none;
}

.gastos-installment-receipts a:hover,
.gastos-installment-receipts a:focus-visible {
    text-decoration: underline;
}

.gastos-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 680px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.gastos-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.gastos-preview-header > span {
    min-width: 0;
}

.gastos-preview-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.gastos-preview-header strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gastos-pdf-preview {
    position: relative;
    display: grid;
    min-height: 620px;
    place-items: center;
    overflow: hidden;
    background: #f8fafb;
}

.gastos-preview-panel:not(.has-file) {
    min-height: 0;
    align-self: start;
}

.gastos-preview-panel:not(.has-file) .gastos-pdf-preview {
    min-height: 150px;
}

.gastos-pdf-preview iframe,
.gastos-image-preview {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 620px;
    border: 0;
    background: #fff;
}

.gastos-image-preview {
    max-width: 100%;
    max-height: 620px;
    padding: 12px;
    object-fit: contain;
}

.gastos-preview-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 12px rgba(18, 35, 42, 0.16);
}

.gastos-preview-selector {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    place-items: center;
    cursor: pointer;
}

.gastos-preview-selector[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.gastos-detail-actions {
    flex-wrap: wrap;
    padding-top: 2px;
}

.gastos-detail-actions .inline-form .button {
    width: 100%;
}

.gastos-detail-receipt-existing {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.gastos-detail-receipt-upload[hidden],
.gastos-detail-receipt-existing[hidden],
.gastos-detail-actions [hidden],
.gastos-preview-panel [hidden] {
    display: none !important;
}

.gastos-detail-upload-button {
    cursor: pointer;
}

.gastos-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.record-modal-actions .gastos-cancel-button {
    border: 1px solid #f0646a;
    background: #f0646a;
    color: #000;
}

.record-modal-actions .gastos-cancel-button:hover,
.record-modal-actions .gastos-cancel-button:focus-visible {
    border-color: #f0646a;
    background: #f0646a;
    color: #000;
    filter: brightness(1.04);
}

.gastos-edit-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gastos-edit-form .gastos-edit-items-field,
.gastos-edit-form .gastos-edit-description-field,
.gastos-edit-form .gastos-receipt-field,
.gastos-edit-form .record-modal-actions {
    grid-column: 1 / -1;
}

.gastos-edit-form .gastos-edit-description-field textarea {
    min-height: 90px;
}

.gastos-cell-descripcion {
    min-width: 240px;
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gastos-name-edit-button {
    display: inline;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--link-blue);
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.gastos-name-edit-button:hover,
.gastos-name-edit-button:focus-visible {
    background: transparent;
    color: #1557a8;
    filter: none;
    text-decoration: underline;
}

.gastos-readonly-name {
    display: inline-grid;
    gap: 2px;
    font-weight: 700;
}

.gastos-readonly-name small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

html[data-theme="dark"] .app-shell .gastos-name-edit-button {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .gastos-name-edit-button:hover,
html[data-theme="dark"] .app-shell .gastos-name-edit-button:focus-visible {
    color: #b8e2ff;
}

.gastos-edit-form .record-modal-actions {
    margin-top: 2px;
}

@media (max-width: 1180px) {
    .gastos-detail-layout {
        grid-template-columns: 1fr;
    }

    .gastos-preview-panel {
        min-height: 460px;
    }

    .gastos-pdf-preview,
    .gastos-pdf-preview iframe,
    .gastos-image-preview {
        min-height: 420px;
    }

    .gastos-image-preview {
        max-height: 420px;
    }
}

.entry-form .gastos-plus-button {
    display: inline-grid;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.entry-form .gastos-link-button {
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    text-transform: none;
}

.entry-form .gastos-plus-button:hover {
    filter: none;
    background: #00525d;
}

.entry-form .gastos-link-button:hover {
    background: transparent;
    color: #00525d;
    filter: none;
    text-decoration: underline;
}

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

    .gastos-entry-form .gastos-provider-field,
    .gastos-entry-form .gastos-name-field,
    .gastos-entry-form .gastos-category-field,
    .gastos-entry-form .gastos-subcategory-field,
    .gastos-entry-form .gastos-method-field,
    .gastos-entry-form .gastos-card-field,
    .gastos-entry-form .gastos-payment-date-field,
    .gastos-entry-form .gastos-amount-field,
    .gastos-entry-form .gastos-invoice-field,
    .gastos-entry-form .gastos-installments-field,
    .gastos-entry-form .gastos-installment-start-field,
    .gastos-entry-form .gastos-frequency-field,
    .gastos-entry-form .gastos-frequency-day-field,
    .gastos-entry-form .gastos-description-field,
    .gastos-entry-form > .gastos-form-actions,
    .gastos-entry-form.is-credit > .gastos-form-actions,
    .gastos-entry-form.has-frequency-day > .gastos-form-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .gastos-entry-form > .gastos-form-actions,
    .gastos-entry-form.is-credit > .gastos-form-actions,
    .gastos-entry-form.has-frequency-day > .gastos-form-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        padding-top: 0;
    }

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

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

    .gastos-detail-grid .gastos-detail-wide {
        grid-column: auto;
    }

    .gastos-preview-panel {
        min-height: 360px;
    }

    .gastos-pdf-preview,
    .gastos-pdf-preview iframe,
    .gastos-image-preview {
        min-height: 320px;
    }

    .gastos-image-preview {
        max-height: 320px;
    }

    .gastos-provider-grid,
    .gastos-provider-row {
        grid-template-columns: 1fr;
    }

    .gastos-provider-new-grid .gastos-provider-note-field {
        grid-column: 1 / -1;
    }

    .gastos-provider-actions {
        justify-content: stretch;
    }

    .gastos-provider-edit-form {
        grid-template-columns: 1fr;
    }

    .gastos-provider-filter-bar,
    .gastos-provider-picker-filters {
        grid-template-columns: 1fr 1fr;
    }

    .gastos-provider-search-field {
        grid-column: 1 / -1;
    }

    .gastos-provider-picker-option {
        grid-template-columns: 1fr;
    }

    .gastos-provider-picker-option.is-none {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .gastos-provider-actions {
        grid-template-columns: 1fr;
    }

    .gastos-provider-filter-bar,
    .gastos-provider-picker-filters {
        grid-template-columns: 1fr;
    }

    .gastos-provider-search-field {
        grid-column: auto;
    }

    .gastos-item-row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .gastos-item-name-field {
        grid-column: 1 / -1;
    }

    .gastos-item-amount-field {
        grid-column: 1;
    }

    .gastos-item-remove {
        grid-column: 2;
    }

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

    .gastos-items-balance {
        text-align: left;
    }

    .gastos-entry-form > .gastos-form-actions,
    .gastos-entry-form.is-credit > .gastos-form-actions,
    .gastos-entry-form.has-frequency-day > .gastos-form-actions {
        grid-template-columns: 1fr;
    }

    .gastos-detail-receipt-existing {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .gastos-detail-receipt-existing .inline-form,
    .gastos-detail-receipt-existing .button,
    .gastos-detail-receipt-upload,
    .gastos-detail-receipt-upload .gastos-compact-upload {
        width: 100%;
    }
}

.gastos-list-panel {
    width: min(900px, calc(100vw - 32px));
    max-height: min(84vh, 720px);
    gap: 20px;
    padding: 30px 28px 24px;
}

.gastos-list-form {
    display: grid;
    gap: 14px;
}

.gastos-add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gastos-add-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.gastos-new-rows {
    display: grid;
    gap: 8px;
}

.gastos-list-divider {
    height: 1px;
    margin: 2px 0;
    background: var(--line);
}

.gastos-list-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(280px, 1.4fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.gastos-list-row.gastos-category-row {
    grid-template-columns: minmax(180px, 1fr) auto;
}

.gastos-list-row input,
.gastos-list-row select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

.gastos-list-row input[readonly],
.gastos-list-row select:disabled {
    background: var(--surface-soft);
    color: var(--ink);
    opacity: 1;
}

.gastos-list-row:not(.is-editing) [data-gastos-editable] {
    pointer-events: none;
}

.gastos-list-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.gastos-list-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
}

.gastos-list-row label input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    accent-color: var(--danger);
}

.gastos-list-row button {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.gastos-list-row .mini-button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
}

.gastos-add-header .mini-button {
    min-width: 86px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.gastos-list-actions .mini-button.edit,
.gastos-add-header .mini-button.edit {
    border-color: var(--accent-blue);
    background: var(--accent-blue);
    color: #fff;
}

.gastos-list-actions .mini-button.edit:hover,
.gastos-add-header .mini-button.edit:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.gastos-list-row.is-new {
    background: var(--surface-soft);
}

@media (max-width: 720px) {
    .gastos-list-row,
    .gastos-list-row.gastos-category-row {
        grid-template-columns: 1fr;
    }
}

.entry-form input,
.entry-form select,
.entry-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #000000;
    text-transform: none;
}

.percentage-field {
    position: relative;
    display: block;
    min-width: 0;
}

.entry-form .percentage-field input {
    padding-right: 34px;
}

.money-prefix-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.money-prefix-field > span {
    padding-left: 12px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.entry-form .money-prefix-field input {
    height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding-left: 8px;
}

.money-prefix-field:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.entry-form .money-prefix-field input:focus {
    border-color: transparent;
    outline: none;
}

.rental-guarantee-picker-field {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.rental-guarantee-picker-button {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.rental-guarantee-picker-button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-guarantee-picker-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    transform: translateY(-65%) rotate(45deg);
}

.rental-guarantee-picker-button[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(225deg);
}

.rental-guarantee-picker-button:hover,
.rental-guarantee-picker-button:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.rental-guarantee-picker-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.rental-guarantee-picker-menu[hidden] {
    display: none;
}

.rental-guarantee-option {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.rental-guarantee-option::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: transparent;
}

.rental-guarantee-option:hover,
.rental-guarantee-option:focus-visible {
    border-color: rgba(109, 40, 217, 0.22);
    background: #f7fbfc;
    outline: none;
}

.rental-guarantee-option.is-selected,
.rental-guarantee-option[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.rental-guarantee-option.is-selected::after,
.rental-guarantee-option[aria-pressed="true"]::after {
    background: var(--brand-primary);
}

.rental-guarantee-picker-button:disabled,
.rental-guarantee-option:disabled {
    cursor: default;
    opacity: 1;
}

.percentage-symbol {
    position: absolute;
    top: 0;
    right: 12px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.entry-form select.is-placeholder {
    color: var(--muted-soft);
}

.entry-form select.is-placeholder option {
    color: #000000;
}

.entry-form input,
.entry-form select {
    height: 42px;
    padding: 0 12px;
}

.entry-form .mini-switch input {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.entry-form textarea {
    min-height: 120px;
    padding: 10px 12px;
    resize: vertical;
}

.rate-form-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 13px;
    align-items: end;
    min-width: 0;
    padding-top: 2px;
}

.rate-form-section + .rate-form-section {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.rate-form-section h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus,
.search-input:focus,
.year-form select:focus,
.month-form select:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.entry-form input.is-client-locked,
.entry-form .country-picker.is-client-locked .country-picker-button {
    border-color: #cfdde1;
    background: #f2f6f7;
    color: #000000;
    cursor: default;
}

.entry-form input.is-client-locked:focus {
    border-color: #cfdde1;
    outline: none;
}

[data-variable-increment-trigger],
[data-rental-increase-trigger],
[data-variable-increment] {
    cursor: pointer;
}

.table-gap {
    margin-top: 12px;
}

.read-only-lists textarea {
    background: var(--surface-soft);
}

.entry-form .cycle-days-field {
    grid-column: 1 / -1;
    align-self: stretch;
    display: block;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow-x: auto;
}

.cycle-days-field legend {
    padding: 0 4px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Cada celda de horario es el mismo reloj que "común", así que la columna
   necesita el ancho de "HH:MM:00" más la flechita. */
.cycle-schedule-grid {
    display: grid;
    grid-template-columns: minmax(112px, 1.1fr) repeat(7, minmax(112px, 1fr));
    align-items: center;
    gap: 8px;
    min-width: 1000px;
}

.cycle-schedule-corner {
    min-height: 36px;
}

.cycle-day-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.entry-form .cycle-day-cell:not(:has(input:disabled)):hover {
    border-color: var(--brand-primary);
}

.entry-form .cycle-day-cell:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.entry-form .cycle-day-cell:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
    outline-offset: 2px;
}

.entry-form .cycle-day-cell:has(input:disabled),
.entry-form .cycle-day-cell:has(input:disabled) input {
    cursor: default;
}

.cycle-row-title {
    color: #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.cycle-day-cell input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.cycle-schedule-grid > input[type="time"] {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
}

/* El reloj de la grilla no tiene etiqueta propia: la fila y la columna ya
   dicen qué hora es. Va más bajo y más angosto que el de "Ingreso y egreso"
   para que las siete columnas entren en el mismo renglón. */
.app-shell .entry-form .cycle-schedule-grid > .parking-registration-time24 {
    min-width: 0;
}

.app-shell .entry-form .cycle-schedule-grid .parking-registration-clock-summary {
    height: 36px;
    min-height: 36px;
    gap: 6px;
    padding: 0 8px;
}

.phone-field {
    display: grid;
    grid-template-columns: 120px minmax(140px, 1fr);
    gap: 8px;
    max-width: 480px;
}

.country-select-wrap {
    position: relative;
    display: block;
    min-width: 0;
}

.country-select-wrap select {
    width: 100%;
    padding-left: 44px;
}

.country-flag {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    width: 24px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    background: #fff;
    object-fit: cover;
    transform: translateY(-50%);
    pointer-events: none;
}

.country-picker {
    position: relative;
    z-index: 8;
    text-transform: none;
}

.country-picker.is-open {
    z-index: 1000;
}

.country-picker-button {
    display: grid;
    grid-template-columns: 26px auto;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
}

.country-selected-flag,
.country-picker-option img {
    width: 24px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    background: #fff;
    object-fit: cover;
}

.country-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1001;
    display: none;
    width: min(320px, calc(100vw - 48px));
    max-height: 290px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.country-picker.is-open .country-picker-menu {
    display: grid;
    gap: 2px;
}

.country-picker-option {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.country-picker-option:hover,
.country-picker-option.is-selected {
    background: var(--surface-strong);
}

.country-picker-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nationality-picker .country-picker-button {
    grid-template-columns: 26px minmax(0, 1fr);
    justify-content: start;
    height: 42px;
}

.nationality-picker [data-country-selected-name] {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-form button,
.variables-shell > button[type="submit"] {
    min-width: 160px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.entry-form .cyclic-help-button {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    flex: 0 0 17px;
}

.variables-shell > .variables-save-button {
    justify-self: end;
    min-width: 220px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.16);
}

.entry-form button:hover,
.variables-shell > button[type="submit"]:hover {
    filter: brightness(1.05);
}

.entry-form .rental-broker-open,
.entry-form .rental-guarantee-picker-button {
    min-width: 0;
    height: 42px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    box-shadow: none;
    filter: none;
}

.entry-form .rental-broker-open {
    padding: 0 34px 0 12px;
}

.entry-form .rental-guarantee-picker-button {
    min-height: 42px;
    padding: 0 38px 0 12px;
}

.entry-form .rental-broker-open::after,
.entry-form .rental-guarantee-picker-button::after {
    border-right-color: var(--line-strong);
    border-bottom-color: var(--line-strong);
}

.entry-form .rental-broker-open:hover,
.entry-form .rental-broker-open:focus-visible,
.entry-form .rental-guarantee-picker-button:hover,
.entry-form .rental-guarantee-picker-button:focus-visible {
    border-color: var(--brand-primary);
    background: #ffffff;
    color: var(--ink);
    filter: none;
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.entry-form .rental-broker-option,
.entry-form .rental-guarantee-option {
    min-width: 0;
    height: auto;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    background: #ffffff;
    color: var(--ink);
    box-shadow: none;
    filter: none;
}

.entry-form .rental-broker-option {
    padding-right: 38px;
}

.entry-form .rental-broker-option:hover,
.entry-form .rental-broker-option:focus-visible,
.entry-form .rental-guarantee-option:hover,
.entry-form .rental-guarantee-option:focus-visible {
    border-color: rgba(109, 40, 217, 0.22);
    background: #f7fbfc;
    color: var(--ink);
    filter: none;
}

.entry-form .rental-broker-option.is-selected,
.entry-form .rental-broker-option[aria-pressed="true"],
.entry-form .rental-guarantee-option.is-selected,
.entry-form .rental-guarantee-option[aria-pressed="true"] {
    border-color: var(--line);
    background: #ffffff;
    color: var(--brand-primary);
}

.entry-form .text-action-link {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1d6fd8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.entry-form .text-action-link:hover {
    filter: none;
    color: #6D28D9;
    text-decoration: underline;
}

.entry-form .text-action-link[hidden] {
    display: none;
}

.entry-form .country-picker-button {
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.entry-form .country-picker-option {
    min-width: 0;
    height: auto;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
}

.entry-form .country-picker-option:hover,
.entry-form .country-picker-option.is-selected {
    background: var(--surface-strong);
    filter: none;
}

.file-upload {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
}

.file-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--brand-primary);
    font-weight: 600;
}

.file-upload.file-upload-accent span {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.file-upload.file-upload-accent:hover span {
    filter: brightness(0.96);
}

.rental-document-group {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
    align-self: end;
    min-width: 0;
}

.rental-document-dropdown {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.rental-document-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 14px;
    border-bottom: 1px solid transparent;
    background: #f6fafb;
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.rental-document-dropdown[open] > .rental-document-summary {
    border-bottom-color: rgba(109, 40, 217, 0.2);
    background: #e8f5f7;
    color: var(--brand-primary);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.rental-document-summary::-webkit-details-marker {
    display: none;
}

.rental-document-content {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.rental-document-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) max-content max-content;
    gap: 8px;
    align-items: center;
}

.rental-document-toolbar select {
    min-width: 0;
}

.rental-document-toolbar select.is-complete {
    border-color: rgba(8, 127, 111, 0.48);
    background: #eefaf6;
    color: #087f6f;
}

.rental-document-toolbar select.is-incomplete {
    border-color: rgba(194, 61, 66, 0.58);
    background: #fff4f4;
    color: #b4232a;
}

.rental-document-toolbar select option.is-complete {
    background: #eefaf6;
    color: #087f6f;
}

.rental-document-toolbar select option.is-incomplete {
    background: #fff4f4;
    color: #b4232a;
}

.rental-document-requirements {
    padding: 8px 10px;
    border: 1px solid #d7e4e7;
    border-radius: 8px;
    background: #f5fafb;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.entry-form .rental-document-toolbar .mini-button,
.entry-form .rental-document-inner-actions .mini-button {
    min-width: 0;
    width: auto;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.entry-form .rental-document-toolbar .mini-button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.entry-form .rental-document-toolbar .mini-button:disabled {
    cursor: default;
    opacity: 1;
}

.rental-document-item {
    display: grid;
    gap: 8px;
}

.rental-document-card {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.rental-document-card.is-complete {
    border-color: rgba(8, 127, 111, 0.42);
    background: #eefaf6;
    box-shadow: inset 4px 0 0 var(--positive);
}

.rental-document-card.is-incomplete {
    border-color: rgba(194, 61, 66, 0.38);
    background: #fff4f4;
    box-shadow: inset 4px 0 0 var(--danger);
}

.rental-document-card [data-rental-document-required].is-missing {
    border-color: rgba(194, 61, 66, 0.58);
    background: #fffafa;
}

.rental-document-upload.is-missing span {
    border-color: rgba(194, 61, 66, 0.68);
    background: #c23d42;
}

.rental-document-fields {
    display: grid;
    gap: 8px;
}

.rental-document-fields-comprobantes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-document-fields-garante {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-guarantee-section {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.rental-guarantee-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.rental-guarantee-summary::-webkit-details-marker {
    display: none;
}

.rental-guarantee-body {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.rental-document-files {
    display: grid;
    gap: 8px;
}

.rental-document-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.rental-document-inner-actions {
    display: flex;
    justify-content: flex-start;
}

.rental-document-group .file-upload {
    min-width: 0;
}

.rental-document-upload {
    justify-self: start;
    width: min(280px, 100%);
}

@media (max-width: 720px) {
    .rental-document-toolbar,
    .rental-document-fields-comprobantes,
    .rental-document-fields-garante {
        grid-template-columns: 1fr;
    }

    .rental-document-upload {
        width: 100%;
    }
}
.payment-receipt-field {
    display: grid;
    gap: 6px;
    align-self: end;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.payment-receipt-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 24px;
}

.payment-file-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

.payment-file-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: center;
    min-width: 0;
}

.payment-file-control .file-upload {
    grid-column: 1 / -1;
    min-width: 0;
}

.payment-file-control .payment-file-upload-field > [data-file-label] {
    justify-content: flex-start;
    overflow: hidden;
    padding: 0 12px;
    border-color: var(--border);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.payment-receipt-heading + .payment-file-control {
    display: block;
}

.payment-receipt-heading + .payment-file-control .file-upload {
    display: flex;
    width: 100%;
    height: 42px;
    min-height: 42px;
}

.payment-receipt-heading + .payment-file-control .payment-file-upload-field > [data-file-label] {
    height: 42px;
    min-height: 42px;
}

.payment-file-control .payment-file-upload-field:hover > [data-file-label],
.payment-file-control .payment-file-upload-field:focus-within > [data-file-label] {
    border-color: var(--brand-primary);
    filter: none;
}

.payment-file-control .payment-file-upload-field:focus-within > [data-file-label] {
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

html[data-theme="dark"] .app-shell .payment-file-control .payment-file-upload-field:focus-within > [data-file-label] {
    outline-color: rgba(109, 40, 217, 0.32);
}

.payment-receipt-help {
    margin-left: 4px;
}

.payment-receipt-help-popover {
    width: min(310px, calc(100vw - 48px));
    min-width: 0;
}

.payment-file-selected {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.entry-form .payment-file-clear,
.payment-file-clear {
    grid-column: 2;
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(194, 61, 66, 0.35);
    border-radius: 8px;
    background: #fff;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
}

.entry-form .payment-file-clear:hover,
.payment-file-clear:hover {
    background: rgba(194, 61, 66, 0.08);
    filter: none;
}

.entry-form .payment-receipt-heading :is(.payment-file-add, .payment-file-clear) {
    display: inline-grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
}

.entry-form .payment-receipt-heading .payment-file-add {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
}

.entry-form .payment-receipt-heading .payment-file-add:hover,
.entry-form .payment-receipt-heading .payment-file-add:focus-visible {
    filter: brightness(1.06);
}

.entry-form .payment-receipt-heading .payment-file-clear {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.entry-form .payment-receipt-heading .payment-file-clear:hover,
.entry-form .payment-receipt-heading .payment-file-clear:focus-visible {
    background: var(--danger);
    filter: brightness(1.06);
}

.payment-receipt-heading .payment-file-clear svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.record-modal.payment-receipt-manager-modal {
    z-index: 96;
}

.record-modal-panel.payment-receipt-manager-panel {
    width: min(980px, 100%);
    max-height: min(92dvh, 820px);
}

.payment-receipt-manager-list {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.payment-receipt-manager-list:empty {
    display: none;
}

.payment-receipt-manager-item {
    display: grid;
    grid-template-rows: 92px auto;
    flex: 0 0 132px;
    width: 132px;
    min-width: 132px;
    min-height: 126px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.payment-receipt-manager-item:hover,
.payment-receipt-manager-item:focus-visible,
.payment-receipt-manager-item[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: var(--surface);
    color: var(--ink);
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
    outline-offset: 1px;
    filter: none;
}

.payment-receipt-manager-thumb {
    display: grid;
    place-items: center;
    width: 100%;
    height: 92px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-soft);
}

.payment-receipt-manager-thumb img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;
}

.payment-receipt-manager-pdf-tile {
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 850;
}

.payment-receipt-manager-pdf-tile svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.payment-receipt-manager-item-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 7px 3px 1px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-receipt-manager-preview {
    display: grid;
    min-height: min(52vh, 430px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    place-items: center;
}

.payment-receipt-manager-preview :is(img, iframe) {
    grid-area: 1 / 1;
    width: 100%;
    height: min(52vh, 430px);
    border: 0;
    background: var(--surface);
}

.payment-receipt-manager-preview img {
    padding: 10px;
    object-fit: contain;
}

.payment-receipt-manager-preview .empty-state {
    grid-area: 1 / 1;
}

.payment-receipt-manager-actions {
    flex-wrap: wrap;
}

@media (max-width: 620px) {
    .record-modal.payment-receipt-manager-modal {
        padding: 10px;
    }

    .payment-receipt-manager-preview,
    .payment-receipt-manager-preview :is(img, iframe) {
        height: 42vh;
        min-height: 280px;
    }

    .payment-receipt-manager-actions > .button {
        width: 100%;
    }
}

.payment-preview-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.payment-preview-files[hidden] {
    display: none;
}

.logo-upload-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    align-self: stretch;
    /* Sin esto el grid reparte el alto sobrante entre sus filas y el campo con
       menos filas (la imagen de marca) queda desalineado del logo. */
    align-content: start;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.logo-upload-heading {
    min-width: 0;
    /* El "!" va pegado al título; el estado, que suele estar vacío, se corre
       solo al extremo cuando tiene texto. */
    justify-content: flex-start;
}

.logo-upload-heading .logo-upload-status {
    margin-left: auto;
}

.logo-upload-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
}

.logo-upload-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    gap: 8px;
    min-width: 0;
    align-items: center;
}

.logo-upload-preview {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0, 38, 43, 0.12);
}

.logo-file-upload {
    min-width: 0;
    min-height: 42px;
}

.logo-file-upload > [data-file-label] {
    min-height: 42px;
    gap: 9px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.logo-file-upload > [data-file-label]::before {
    content: "↑";
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.logo-file-upload:hover > [data-file-label] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.28);
}

.logo-file-upload:active > [data-file-label] {
    transform: translateY(0);
}

.logo-upload-control > .logo-file-upload:first-child,
.logo-upload-actions:not(.has-logo) .logo-file-upload,
.logo-upload-actions-simple .logo-file-upload {
    grid-column: 1 / -1;
}

.entry-form .logo-remove-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(194, 61, 66, 0.45);
    border-radius: 10px;
    background: var(--danger);
    color: #ffffff;
    font-weight: 750;
    box-shadow: 0 8px 18px rgba(194, 61, 66, 0.18);
}

.entry-form .logo-remove-button:hover,
.entry-form .logo-remove-button:focus-visible {
    background: var(--danger);
    color: #ffffff;
    filter: brightness(1.06);
    outline: 3px solid rgba(194, 61, 66, 0.2);
    outline-offset: 2px;
}

.logo-download-button {
    display: inline-grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    border: 1px solid var(--brand-primary);
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
    cursor: pointer;
}

.logo-download-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-download-button:hover,
.logo-download-button:focus-visible {
    color: #ffffff;
    filter: brightness(1.08);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

.logo-upload-status {
    min-width: 0;
    max-width: 72%;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.logo-upload-status.is-selected {
    color: var(--brand-primary);
    font-weight: 750;
}

.logo-upload-status.is-pending-delete {
    color: var(--danger);
    font-weight: 750;
}

.public-image-upload-field {
    min-width: 0;
}

.public-image-upload-control {
    grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
}

.public-image-upload-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.availability-field input[readonly] {
    cursor: pointer;
}

[data-availability-modal] {
    padding: 12px;
}

[data-availability-modal] .variable-dialog-panel {
    width: min(1040px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 34px 30px 26px;
}

.availability-dialog-form {
    display: grid;
    gap: 12px;
}

.availability-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) minmax(150px, 170px) repeat(2, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.availability-row label {
    display: grid;
    gap: 6px;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.availability-day,
.availability-all-day {
    min-height: 52px;
    grid-template-columns: auto 1fr;
    align-items: center;
    text-transform: none;
}

.availability-day input[type="checkbox"],
.availability-all-day input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.availability-row input[type="time"] {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
}

.availability-row.is-all-day input[type="time"] {
    background: var(--surface-soft);
    color: var(--muted);
}

.panel-actions,
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.row-actions {
    min-width: 210px;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.mini-button,
.inline-form .mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.mini-button:hover {
    border-color: rgba(109, 40, 217, 0.32);
    color: var(--brand-primary);
}

.mini-button.edit {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.mini-button.edit:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    filter: brightness(1.04);
}

.parking-edit-button,
.parking-edit-button:hover {
    border-color: var(--accent-blue);
    background: var(--accent-blue);
    color: #fff;
}

.mini-button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.mini-button.danger:hover {
    border-color: #9f2f34;
    background: #9f2f34;
    color: #fff;
}

.detail-panel {
    display: grid;
    gap: 18px;
}

.mini-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

.mini-kpi {
    display: grid;
    gap: 6px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.mini-kpi span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mini-kpi strong {
    color: var(--text);
    font-size: 1.05rem;
}

.mini-kpi.tone-positive strong {
    color: #047c72;
}

.mini-kpi.tone-danger strong {
    color: #c83d4b;
}

.mini-kpi.tone-partial strong {
    color: #7b3fc6;
}

.mini-kpi.tone-fragmented strong,
.kpi-card.tone-fragmented strong {
    color: #0b5f9c;
}

.span-2 {
    grid-column: span 2;
}

.bars {
    display: grid;
    gap: 12px;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.36fr) minmax(140px, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 14px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(216, 227, 229, 0.75);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.bar-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-row strong {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: right;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bar-row strong small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    height: 14px;
    overflow: hidden;
    border: 1px solid rgba(109, 40, 217, 0.08);
    border-radius: 999px;
    background: #edf4f5;
}

.bar-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-primary), var(--accent-purple));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.bar-row.is-negative .bar-track i {
    background: linear-gradient(90deg, #c23d42, #e86d73);
}

/* Métricas de consultas públicas */
.metrics-panels {
    gap: 14px;
}

.metrics-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.metrics-chart-section {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.metrics-chart-section > h3 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    line-height: 1.25;
}

.metrics-chart {
    min-width: 0;
}

.metrics-columns-viewport {
    max-width: 100%;
    overflow-x: auto;
    padding: 12px 10px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 44px,
            color-mix(in srgb, var(--line) 72%, transparent) 45px
        ),
        var(--surface-soft);
    scrollbar-width: thin;
}

.metrics-columns-plot {
    display: grid;
    grid-template-columns: repeat(var(--metrics-chart-count), minmax(30px, 1fr));
    gap: 8px;
    min-width: max(100%, calc(var(--metrics-chart-count) * 40px));
}

.metrics-column {
    display: grid;
    grid-template-rows: 24px 180px 28px;
    gap: 5px;
    min-width: 0;
    color: var(--text);
    text-align: center;
}

.metrics-column-value {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.metrics-column-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    height: 180px;
    border-bottom: 2px solid var(--line);
}

.metrics-column-track i {
    display: block;
    width: min(76%, 34px);
    min-height: 0;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, var(--accent-purple), var(--brand-primary));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.metrics-column-track i[style="height: 0%"] {
    height: 2px !important;
    background: var(--line);
    box-shadow: none;
}

.metrics-column-label {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metrics-bars-chart .bar-row {
    grid-template-columns: minmax(120px, 0.3fr) minmax(180px, 1fr) minmax(84px, auto);
}

.metrics-bars-chart .bar-label,
.metrics-bars-chart .bar-value,
.metrics-bars-chart .bar-value small {
    color: var(--text);
}

.metrics-record-count {
    color: var(--text);
    font-weight: 700;
    text-align: right;
}

@media (max-width: 900px) {
    .metrics-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .metrics-columns-viewport {
        padding-inline: 8px;
    }

    .metrics-bars-chart .bar-row {
        grid-template-columns: 88px minmax(120px, 1fr);
    }
}

.gastos-distribution-panel .bar-row {
    grid-template-columns: minmax(88px, 0.28fr) minmax(260px, 1fr) minmax(230px, auto);
    min-height: 58px;
    padding: 10px 12px;
}

.gastos-distribution-panel .bar-label {
    font-size: 15px;
    line-height: 1.3;
}

.gastos-distribution-panel .bar-value {
    font-size: 17px;
    line-height: 1.2;
}

.gastos-distribution-panel .bar-value small {
    font-size: 13px;
    line-height: 1.3;
}

.gastos-distribution-panel .gastos-distribution-track {
    position: relative;
    isolation: isolate;
    height: 28px;
}

.gastos-distribution-panel .gastos-distribution-track > i {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
}

.gastos-distribution-panel
    .gastos-distribution-track
    > .gastos-distribution-segment {
    border-radius: 999px;
}

.gastos-distribution-panel
    .gastos-distribution-track
    > .gastos-distribution-segment.is-gastos {
    background: linear-gradient(90deg, var(--brand-primary), var(--accent-purple));
}

.gastos-distribution-panel
    .gastos-distribution-track
    > .gastos-distribution-segment.is-mantenimiento {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.gastos-distribution-panel
    .gastos-distribution-track
    > .gastos-distribution-segment.is-mantenimiento-estimado {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.gastos-distribution-panel .bar-row .gastos-distribution-percentage {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: #000000;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.gastos-distribution-panel .gastos-distribution-expense .gastos-distribution-percentage {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: #000000;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1380px) {
    .variable-row-grid-vehicles {
        overflow-x: visible;
    }

    .vehicle-category-table-head {
        display: none;
    }

    .variable-row-grid-vehicles .variable-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        min-width: 0;
        padding: 12px;
    }

    .vehicle-category-cell-label {
        display: block;
    }

    .vehicle-category-main-cell {
        grid-column: span 2;
    }

    .vehicle-category-models-cell {
        grid-column: span 3;
    }

    .vehicle-category-rate-cell {
        padding: 10px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .vehicle-category-capacity-cell {
        grid-column: 1 / span 2;
        justify-items: start;
        padding-top: 10px;
        border-top: 1px solid var(--line);
        text-align: left;
    }

    .variable-row-grid-vehicles .variable-row .variable-row-actions {
        grid-column: 4 / -1;
        justify-self: end;
    }
}

@media (max-width: 820px) {
    .gastos-distribution-panel .bar-row,
    .gastos-distribution-expense {
        grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
        gap: 8px 10px;
        min-height: 76px;
    }

    .gastos-distribution-panel .bar-value,
    .gastos-distribution-expense > .bar-value {
        grid-column: 2;
        text-align: right;
    }
}

@media (max-width: 520px) {
    .gastos-distribution-panel .bar-row,
    .gastos-distribution-expense {
        grid-template-columns: 1fr;
    }

    .gastos-distribution-panel :is(.bar-label, .bar-track, .bar-value, .gastos-distribution-expense-copy) {
        grid-column: 1;
    }

    .gastos-distribution-panel .bar-value,
    .gastos-distribution-expense > .bar-value {
        text-align: left;
        white-space: normal;
    }

    .gastos-distribution-panel .bar-value small,
    .gastos-distribution-expense-copy strong,
    .gastos-distribution-expense-copy small {
        white-space: normal;
    }
}

.insight-list {
    display: grid;
    gap: 8px;
}

.insight-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.insight-item strong,
.insight-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-item small {
    margin-top: 3px;
    color: var(--muted);
}

.availability-panel {
    margin-top: 18px;
}

.topbar > div > .eyebrow,
.availability-panel .panel-header .eyebrow {
    display: none;
}

.availability-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.availability-chips .empty-state {
    width: 100%;
    padding: 18px 0;
    text-align: left;
}

.availability-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(8, 127, 111, 0.2);
    border-radius: 999px;
    background: #f2fbf8;
    color: var(--positive);
    font-weight: 600;
}

.availability-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.availability-view-toggle {
    display: inline-flex;
    gap: 3px;
    min-height: 40px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.availability-view-toggle button {
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.availability-view-toggle button.is-active {
    background: var(--accent-purple);
    color: #ffffff;
}

.availability-panel .availability-view-toggle {
    gap: 10px;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
}

.availability-panel .availability-view-toggle button {
    flex: 0 1 170px;
    width: 170px;
    max-width: 100%;
    min-width: 92px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.availability-panel .availability-view-toggle button:hover {
    border-color: var(--brand-primary);
}

.availability-panel .availability-view-toggle button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
    outline-offset: 2px;
}

.availability-panel .availability-view-toggle button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.availability-hour-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
}

.availability-hour-controls [hidden] {
    display: none;
}

.availability-filter label {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.availability-filter select,
.availability-filter input {
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.availability-cell {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.availability-space-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--link-blue);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.availability-space-button:hover,
.availability-space-button:focus-visible {
    border-color: rgba(124, 58, 237, 0.38);
    background: rgba(124, 58, 237, 0.1);
    color: #006b76;
    outline: none;
}

.availability-wrap {
    max-height: 620px;
}

.availability-table {
    min-width: 1180px;
    table-layout: fixed;
}

.availability-table th:first-child,
.availability-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 96px;
    background: #fff;
}

.availability-table th:nth-child(2),
.availability-table td:nth-child(2) {
    position: sticky;
    left: 96px;
    z-index: 2;
    width: 102px;
    background: #fff;
}

.availability-panel[data-availability-resource-label="espacio"] .availability-table th:nth-child(2),
.availability-panel[data-availability-resource-label="espacio"] .availability-table td:nth-child(2) {
    width: 168px;
}

.availability-table th {
    text-align: center;
}

.availability-table th[data-availability-axis] {
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.availability-table th[data-availability-day-jump] {
    cursor: pointer;
}

.availability-table th[data-availability-day-jump]:hover,
.availability-table th[data-availability-day-jump]:focus-visible {
    background: #e7f5f6;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.22);
    color: #006b76;
    outline: none;
}

.availability-table th:first-child,
.availability-table th:nth-child(2) {
    z-index: 3;
    background: var(--surface-soft);
}

.availability-table td {
    padding: 8px;
    text-align: center;
}

.availability-action-cell,
.availability-table td[data-availability-slot] {
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.availability-occupied-cell,
.availability-table td[data-availability-occupancy] {
    cursor: pointer;
}

.availability-block-cell {
    position: relative;
    background: #fff3f5;
    box-shadow:
        inset 0 2px 0 rgba(180, 35, 50, 0.42),
        inset 0 -2px 0 rgba(180, 35, 50, 0.42);
}

.availability-block-cell.is-partial {
    background: #f5edff;
    box-shadow:
        inset 0 2px 0 rgba(109, 40, 168, 0.4),
        inset 0 -2px 0 rgba(109, 40, 168, 0.4);
}

.availability-block-cell.is-fragmented {
    background: #e5f3ff;
    box-shadow:
        inset 0 2px 0 rgba(18, 94, 156, 0.4),
        inset 0 -2px 0 rgba(18, 94, 156, 0.4);
}

.availability-block-cell.is-reserved {
    background: #fff4cf;
    box-shadow:
        inset 0 2px 0 rgba(183, 121, 0, 0.46),
        inset 0 -2px 0 rgba(183, 121, 0, 0.46);
}

.availability-block-cell.is-block-start {
    border-left: 2px solid #b42332;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.availability-block-cell.is-block-end {
    border-right: 2px solid #b42332;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.availability-block-cell.is-partial.is-block-start {
    border-left-color: #6d28a8;
}

.availability-block-cell.is-partial.is-block-end {
    border-right-color: #6d28a8;
}

.availability-block-cell.is-fragmented.is-block-start {
    border-left-color: #125e9c;
}

.availability-block-cell.is-fragmented.is-block-end {
    border-right-color: #125e9c;
}

.availability-block-cell.is-reserved.is-block-start {
    border-left-color: #b77900;
}

.availability-block-cell.is-reserved.is-block-end {
    border-right-color: #b77900;
}

.availability-block-cell:hover {
    background: #ffe5ea;
}

.availability-block-cell.is-partial:hover {
    background: #eee1ff;
}

.availability-block-cell.is-fragmented:hover {
    background: #d5eaff;
}

.availability-block-cell.is-reserved:hover {
    background: #ffe8a3;
}

.availability-block-cell.is-entry-day::before,
.availability-block-cell.is-exit-day::after {
    position: absolute;
    top: 2px;
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.availability-block-cell.is-entry-day::before {
    left: 2px;
    content: "I";
    background: #6D28D9;
}

.availability-block-cell.is-exit-day::after {
    right: 2px;
    content: "E";
    background: #8a1f2c;
}

.availability-table tbody tr:hover td:first-child,
.availability-table tbody tr:hover td:nth-child(2) {
    background: #fbf8fb;
}

.availability-cell {
    line-height: 18px;
    color: transparent;
}

.availability-slot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #146c35;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.availability-action-cell:hover,
.availability-table td[data-availability-slot]:hover {
    background: #f3fbf7;
}

.availability-action-cell:hover .availability-slot-button,
.availability-table td[data-availability-slot]:hover .availability-slot-button,
.availability-slot-button:hover {
    box-shadow: 0 0 0 2px rgba(8, 127, 111, 0.18);
}

.availability-slot-button:active,
.availability-slot-button:focus-visible {
    outline: 2px solid #6D28D9;
    outline-offset: 2px;
    background: #007e8f;
    color: #fff;
}

.availability-cell.is-free,
.availability-status.is-free {
    background: #e8f7ee;
    color: #146c35;
}

.availability-cell.is-occupied,
.availability-status.is-occupied {
    background: #f9d7dc;
    color: #8a1f2c;
}

.availability-cell.is-partial,
.availability-status.is-partial {
    background: #eadcfb;
    color: #6d28a8;
}

.availability-cell.is-fragmented,
.availability-status.is-fragmented {
    background: #dceeff;
    color: #0b4f82;
}

.availability-cell.is-reserved,
.availability-status.is-reserved {
    background: #ffe7a3;
    color: #6b4300;
}

.availability-status.is-positive {
    background: #e8f7ee;
    color: #146c35;
}

.availability-table :is(th:first-child, td:first-child) {
    box-shadow: 1px 0 0 rgba(216, 227, 229, 0.95);
}

.availability-table :is(th:nth-child(2), td:nth-child(2)) {
    box-shadow: 1px 0 0 rgba(216, 227, 229, 0.95);
}

.availability-hour-wrap {
    max-height: min(66vh, 620px);
}

.availability-hour-table {
    min-width: 1900px;
    font-variant-numeric: tabular-nums;
}

.availability-hour-table th[data-availability-axis="horas"] {
    padding: 7px 6px;
}

.availability-hour-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(109, 40, 217, 0.15);
    border-radius: 999px;
    background: #edf8f9;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: none;
}

.availability-hour-table td {
    height: 52px;
    padding: 6px;
}

.availability-hour-cell {
    min-width: 68px;
}

.availability-hour-table .availability-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 48px;
    height: 34px;
    border-radius: 8px;
    line-height: 1.15;
}

.availability-hour-slot-button {
    border: 1px dashed rgba(8, 127, 111, 0.34);
    background: #f2fbf8;
    color: #146c35;
}

.availability-hour-block {
    border: 1px solid rgba(138, 31, 44, 0.22);
    box-shadow: inset 0 -2px 0 rgba(138, 31, 44, 0.1);
}

.availability-hour-block.is-partial {
    border-color: rgba(109, 40, 168, 0.26);
    box-shadow: inset 0 -2px 0 rgba(109, 40, 168, 0.1);
}

.availability-hour-block.is-fragmented {
    border-color: rgba(18, 94, 156, 0.3);
    box-shadow: inset 0 -2px 0 rgba(18, 94, 156, 0.12);
}

.availability-hour-block.is-reserved {
    border-color: rgba(183, 121, 0, 0.38);
    box-shadow: inset 0 -2px 0 rgba(183, 121, 0, 0.14);
}

.availability-hour-cell-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.availability-hour-cell-action {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #f2fbf8;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.availability-hour-cell-mark {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-block;
    width: 6px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: currentColor;
    color: transparent;
}

.availability-hour-block.is-partial .availability-hour-cell-mark {
    border: 1px solid currentColor;
    background: transparent;
}

.availability-hour-block.is-fragmented .availability-hour-cell-mark {
    border: 1px solid currentColor;
    border-radius: 2px;
    background: transparent;
}

.availability-hour-block.is-reserved .availability-hour-cell-mark {
    width: auto;
    height: auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    font-size: 11px;
    font-weight: 900;
}

.availability-hour-table td[data-availability-slot] {
    background: #fbfffd;
}

.availability-hour-table td[data-availability-occupancy] {
    background: #fff8fa;
}

.availability-hour-table td[data-availability-status="Parcial"] {
    background: #fbf7ff;
}

.availability-hour-table td[data-availability-status="Fragmentado"] {
    background: #f4f9ff;
}

.availability-hour-table td[data-availability-status="Reservado"] {
    background: #fffaf0;
}

.availability-hour-table td[data-availability-slot]:hover .availability-hour-slot-button,
.availability-hour-slot-button:hover {
    border-color: rgba(8, 127, 111, 0.58);
    background: #e5f8ef;
}

/* El calendario es un desplegable del apartado Empleados: el encabezado lo pone
   el <summary>, así que acá sólo queda el cuerpo. */
.employee-calendar-body {
    display: grid;
    gap: 0;
    min-width: 0;
}

.employee-month-calendar,
.employee-hour-list {
    display: grid;
    gap: 14px;
}

/* El `display: grid` de arriba le ganaba al `hidden` del navegador, así que la
   vista por horas se dibujaba abajo del mes aunque estuviera apagada. */
.employee-month-calendar[hidden],
.employee-hour-list[hidden] {
    display: none;
}

.employee-calendar-filter {
    align-items: end;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.04);
}

.employee-calendar-filter .availability-hour-controls {
    align-items: end;
}

.employee-month-weekdays,
.employee-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.employee-month-weekdays span {
    min-height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #eef6f7;
    color: #000000;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.employee-month-day {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 158px;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(43, 47, 51, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.employee-month-day.has-events {
    border-color: rgba(109, 40, 217, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
}

.employee-month-day.has-absences {
    border-color: rgba(198, 138, 24, 0.42);
    box-shadow: inset 0 3px 0 rgba(198, 138, 24, 0.42);
}

.employee-month-day:hover {
    border-color: rgba(109, 40, 217, 0.42);
    box-shadow: 0 12px 26px rgba(16, 24, 33, 0.09);
    transform: translateY(-1px);
}

.employee-month-day.is-outside {
    min-height: 158px;
    border-style: dashed;
    background: #f5f8f9;
    opacity: 1;
    cursor: default;
    box-shadow: none;
}

.employee-month-day.is-today {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 18px rgba(37, 99, 235, 0.07);
}

.employee-month-day.is-selected {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 2px rgba(109, 40, 217, 0.24), 0 12px 26px rgba(109, 40, 217, 0.08);
}

.employee-month-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.employee-month-day-head strong {
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
}

.employee-month-day-head small {
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef6f7;
    color: #000000;
    font-size: 11px;
    font-weight: 800;
}

.employee-day-timelines {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.employee-day-event {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--employee-color, var(--brand-primary)) 20%, var(--line));
    border-left: 4px solid var(--employee-color, var(--brand-primary));
    border-radius: 8px;
    background: color-mix(in srgb, var(--employee-color, var(--brand-primary)) 8%, #ffffff);
}

.employee-day-event.is-absence {
    border-left-color: #c68a18;
    border-color: rgba(198, 138, 24, 0.28);
    background: #fff8e8;
}

.employee-day-event.is-certificado-medico {
    border-left-color: #b5475a;
    border-color: rgba(181, 71, 90, 0.28);
    background: #fff2f4;
}

.employee-day-event-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.employee-day-event-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-day-track {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(196, 209, 212, 0.46);
    overflow: hidden;
}

.employee-day-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: 999px;
}

.employee-day-time,
.employee-day-extra {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.employee-day-extra {
    display: inline-flex;
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0f4f5;
    color: #000000;
}

.employee-hour-list-head,
.employee-hour-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) 92px repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
}

.employee-hour-list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #eef6f7;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.employee-hour-list-head strong {
    color: var(--ink);
    text-transform: none;
}

.employee-hour-row {
    position: relative;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.05);
}

.employee-hour-row::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--employee-color, var(--brand-primary));
}

.employee-hour-person {
    min-width: 0;
}

.employee-hour-person strong {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    color: var(--ink);
    font-size: 15px;
}

.employee-hour-person small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.employee-hour-timeline {
    position: relative;
    grid-column: 3 / -1;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(196, 209, 212, 0.42) 1px, transparent 1px) 0 0 / calc(100% / 24) 100%, linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    overflow: hidden;
}

.employee-hour-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(87, 105, 112, 0.24);
}

.employee-hour-grid-line.is-6 { left: 25%; }
.employee-hour-grid-line.is-12 { left: 50%; }
.employee-hour-grid-line.is-18 { left: 75%; }

.employee-hour-bar {
    position: absolute;
    top: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(16, 24, 33, 0.12);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-hour-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.employee-hour-absence {
    margin: 7px;
    border: 1px solid rgba(198, 138, 24, 0.34);
    border-radius: 8px;
    background: #fff6df;
    color: #7a5200;
}

.employee-hour-absence.is-certificado-medico {
    border-color: rgba(181, 71, 90, 0.34);
    background: #fff0f3;
    color: #8f2e40;
}

.availability-status.is-vacation {
    border: 1px solid rgba(198, 138, 24, 0.35);
    background: #fff1c9;
    color: #704900;
}

.availability-status.is-medical {
    border: 1px solid rgba(181, 71, 90, 0.35);
    background: #ffe3e8;
    color: #8f2e40;
}

.availability-action-cell.is-availability-selected,
.availability-table td.is-availability-selected {
    background: #c9f1df;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.42);
}

.availability-table th.is-availability-selected {
    background: #c9f1df;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.42);
    color: #6D28D9;
}

.availability-action-cell.is-availability-anchor,
.availability-table td.is-availability-anchor {
    background: #a8e7ce;
    box-shadow: inset 0 0 0 3px rgba(124, 58, 237, 0.58);
}

.availability-table th.is-availability-anchor {
    background: #a8e7ce;
    box-shadow: inset 0 0 0 3px rgba(124, 58, 237, 0.58);
    color: #004b56;
}

.availability-table td.is-availability-invalid {
    background: #fbe1e5;
    box-shadow: inset 0 0 0 2px rgba(138, 31, 44, 0.26);
}

.availability-table th.is-availability-invalid {
    background: #fbe1e5;
    box-shadow: inset 0 0 0 2px rgba(138, 31, 44, 0.26);
    color: #8a1f2c;
}

.availability-action-cell.is-availability-selected .availability-slot-button,
.availability-slot-button.is-availability-selected {
    background: #007e8f;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    color: #fff;
}

.availability-action-cell.is-availability-anchor .availability-slot-button,
.availability-slot-button.is-availability-anchor {
    background: #6D28D9;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28);
    color: #fff;
}

.availability-action-cell.is-availability-invalid .availability-slot-button,
.availability-slot-button.is-availability-invalid {
    background: #b42332;
    box-shadow: 0 0 0 3px rgba(180, 35, 50, 0.18);
    color: #fff;
}

body.availability-selecting {
    user-select: none;
}

.availability-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 74px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.availability-state-summary {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.availability-reservation-note {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    color: #6b4300;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.availability-reservation-note time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.table-panel {
    margin-top: 18px;
}

.work-grid > .table-panel,
.work-grid > .panel {
    margin-top: 0;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

th,
td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

td {
    color: var(--ink);
}

tbody tr:hover {
    background: #fbf8fb;
}

.tariff-increase-row {
    background: #e9f8ee;
}

.tariff-increase-row:hover {
    background: #dff3e7;
}

.tariff-preview-row.tariff-month-past td {
    background: #f8d7da;
    color: #721c24;
}

.tariff-preview-row.tariff-month-past.tariff-increase-row td {
    background: #f8d7da;
    color: #721c24;
}

.tariff-preview-row.tariff-month-current td,
.tariff-preview-row.tariff-month-current.tariff-increase-row td {
    background: #fff3cd;
    box-shadow: inset 0 0 0 999px rgba(183, 121, 31, 0.08);
}

.tariff-preview-row.tariff-month-current td:first-child {
    border-left: 4px solid var(--accent-amber);
    font-weight: 800;
}

.summary-month-table {
    min-width: 1240px;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.summary-month-table th,
.summary-month-table td {
    overflow: hidden;
    padding: 13px 16px;
    text-overflow: ellipsis;
}

.summary-month-table th {
    white-space: normal;
    line-height: 1.22;
}

.summary-month-table .summary-number-cell {
    text-align: right;
}

.summary-month-table .summary-text-cell {
    text-align: left;
}

.summary-col-mes,
.summary-col-month { width: 150px; }
.summary-col-category { width: 18%; }
.summary-col-espacio { width: 12%; }
.summary-col-cliente { width: 22%; }
.summary-col-registro { width: 22%; }
.summary-col-vehiculo { width: 17%; }
.summary-col-cobrado { width: 13%; }
.summary-col-saldo { width: 14%; }
.summary-col-gastado { width: 13%; }
.summary-col-neto { width: 13%; }
.summary-col-estado { width: 9%; }
.summary-col-contratos { width: 16%; }
.summary-col-total { width: 20%; }
.summary-col-saldo { width: 20%; }

.summary-month-row.month-state-past td {
    background: #f8d7da;
    color: #721c24;
}

.summary-month-row.month-state-current td {
    background: #fff3cf;
}

.summary-month-row.month-state-current td:first-child {
    border-left: 4px solid var(--accent-amber);
    color: #7a5416;
}

.summary-month-row.month-state-future td {
    background: #edf8f0;
}

/* Vista de un mes puntual: la fila cuenta el estado de pago del registro. */
.summary-month-row.month-state-unpaid td {
    background: #f8d7da;
    color: #721c24;
}

.summary-month-row.month-state-partial td {
    background: #fff3cf;
}

.summary-month-row.month-state-partial td:first-child {
    border-left: 4px solid var(--accent-amber);
    color: #7a5416;
}

.summary-month-row.month-state-paid td {
    background: #dff4e6;
}

.summary-month-row.month-state-due-soon td {
    background: #ffe8d9;
    color: #7a3a10;
}

.summary-month-table tbody td:first-child {
    font-weight: 600;
}

.summary-month-table th[data-col-key="mes"],
.summary-month-table td[data-col-key="mes"] {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.summary-month-table .summary-paid-cell {
    background: #dff4e6;
    color: #17311d;
    font-weight: 600;
}

.summary-month-table .summary-missing-cell {
    background: #fbe1e5;
    color: #4a1f26;
    font-weight: 600;
}

.summary-month-table .summary-net-cell {
    font-weight: 700;
}

.summary-month-panel .summary-filter-form {
    padding: 0;
}

.summary-month-panel .table-wrap {
    margin-top: 4px;
}

.record-filter-form.summary-period-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    padding: 2px 0 4px;
}

.record-filter-form.summary-period-filter-form label,
.record-filter-form.summary-period-filter-form select {
    width: 100%;
    min-width: 0;
}

.summary-month-row[data-summary-row-detail] {
    cursor: pointer;
}

.summary-row-detail-button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 22px 0 0;
    border: 0;
    background: transparent;
    color: var(--link-blue);
    font: inherit;
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.summary-row-detail-button::after {
    content: "›";
    position: absolute;
    right: 4px;
    color: currentColor;
    font-size: 20px;
    line-height: 1;
}

.summary-month-row[data-summary-row-detail]:hover td,
.summary-month-row[data-summary-row-detail]:focus-within td {
    box-shadow: inset 0 2px 0 rgba(124, 58, 237, 0.34), inset 0 -2px 0 rgba(124, 58, 237, 0.34);
}

.summary-row-detail-button:focus-visible {
    border-radius: 4px;
    outline: 3px solid rgba(124, 58, 237, 0.24);
    outline-offset: 4px;
}

.availability-summary-row-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.availability-summary-row-grid .availability-summary-card strong {
    font-size: 18px;
    line-height: 1.25;
}

tr[data-payment-row] {
    cursor: pointer;
}

tr[data-payment-row].payment-state-pagado td {
    background: #d8f3dc;
    color: #000;
}

tr[data-payment-row].payment-state-parcial td {
    background: #e9d8fd;
    color: #000;
}

tr[data-payment-row].payment-state-deuda td {
    background: #f8d7da;
    color: #000;
}

tr[data-payment-row].payment-out-of-terms td {
    background: #fff1c2;
    color: #2f2200;
}

tr[data-payment-row].payment-out-of-terms td[data-col-key="fecha_pago"],
tr[data-payment-row].payment-out-of-terms td[data-col-key="comprobante"] {
    color: #8a5a00;
    font-weight: 900;
}

tr.record-row-blacklist td {
    background: #e5e7eb;
    color: #000000;
}

tr.record-row-blacklist:hover td {
    background: #d7dbe1;
}

tr.record-row-blacklist .record-row-button {
    color: #000000;
    font-weight: 800;
}

tr.record-row-ended td {
    background: #fde2e5;
    color: #7f1d1d;
}

tr.record-row-ended:hover td {
    background: #fbd3d8;
}

tr.record-row-blacklist.record-row-ended td {
    background: #e5e7eb;
    color: #000000;
}

tr.record-row-blacklist.record-row-ended:hover td {
    background: #d7dbe1;
}

tr.record-row-active-now td:first-child {
    border-left: 4px solid #007e8f;
}

tr.record-row-active-now td {
    box-shadow: inset 0 0 0 999px rgba(124, 58, 237, 0.035);
}

tr.record-row-blacklist td:first-child,
tr.record-row-blacklist.record-row-active-now td:first-child {
    border-left: 4px solid #6b7280;
}

tr.record-row-blacklist.record-row-active-now td {
    box-shadow: inset 0 0 0 999px rgba(55, 65, 81, 0.035);
}

tr[data-payment-row].payment-state-pagado .payment-row-button,
tr[data-payment-row].payment-state-parcial .payment-row-button,
tr[data-payment-row].payment-state-deuda .payment-row-button {
    color: #000;
}

.record-row-button,
.payment-row-button {
    color: var(--brand-primary);
    font-weight: 600;
}

tr[data-payment-row]:hover .payment-row-button,
.record-row-button:hover,
.payment-row-button:hover {
    text-decoration: underline;
}

.record-row-button,
.payment-row-button {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.record-name-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: min(320px, 42vw);
}

.record-name-cell .record-row-button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-contact-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.record-contact-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #fff;
    line-height: 1;
    text-decoration: none;
}

.record-contact-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.record-contact-icon.whatsapp {
    background: #22c55e;
}

.record-contact-icon.phone {
    background: #0ea5e9;
}

.whatsapp-chatbot-panel .panel-header {
    align-items: center;
}

.whatsapp-chatbot-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafb;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.whatsapp-chatbot-status.is-positive {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.whatsapp-chatbot-status.is-warning {
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.whatsapp-chatbot-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.whatsapp-chatbot-connect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.whatsapp-chatbot-connect-button {
    min-height: 38px;
}

.whatsapp-chatbot-billing {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
}

.whatsapp-chatbot-check {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(217, 119, 6, 0.28);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
}

.whatsapp-chatbot-check.is-ok {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.whatsapp-chatbot-technical {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.whatsapp-chatbot-technical summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.whatsapp-chatbot-technical-grid {
    margin-top: 12px;
}

.record-contact-icon.email {
    background: var(--brand-primary);
}

.record-contact-icon:hover {
    text-decoration: none;
    filter: brightness(0.95);
}

.record-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 12px;
}

.record-filter-form label {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.record-filter-form input,
.record-filter-form select {
    min-height: 38px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.record-filter-form .mini-button {
    min-height: 38px;
}

.availability-results-toolbar {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 12px;
    margin: 2px 0 14px;
}

.availability-results-toolbar > .record-pagination-toolbar {
    min-width: 0;
    margin: 0;
}

.availability-results-toolbar > .availability-expandable-search {
    flex: 0 1 auto;
    margin-left: auto;
}

/* La lupa ocupa el lugar de un control compacto y despliega el campo sin
   desplazar toda la botonera. El estado cerrado no deja un input oculto en el
   orden de tabulación; el controlador de JS sincroniza tabindex y aria-hidden. */
.expandable-filter-search {
    position: relative;
    display: inline-flex;
    width: 42px;
    max-width: 100%;
    min-height: 42px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    transition: width 180ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.record-filter-form > .expandable-filter-search {
    margin-left: auto;
}

.expandable-filter-search.is-expanded {
    width: min(360px, 100%);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.expandable-filter-search:focus-within {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.expandable-filter-search-toggle,
.expandable-filter-search-clear {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000000;
    cursor: pointer;
}

.expandable-filter-search-toggle svg,
.expandable-filter-search-clear svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.expandable-filter-search-toggle:focus-visible,
.expandable-filter-search-clear:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
    outline-offset: -4px;
}

.expandable-filter-search-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    visibility: hidden;
}

.expandable-filter-search.is-expanded .expandable-filter-search-field {
    visibility: visible;
}

.expandable-filter-search .expandable-filter-search-field > input[type="search"] {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 40px 0 2px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
}

.expandable-filter-search .expandable-filter-search-field > input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.expandable-filter-search .expandable-filter-search-field > input[type="search"]::placeholder {
    color: var(--placeholder);
}

.expandable-filter-search-clear {
    position: absolute;
    top: 0;
    right: 0;
}

.expandable-filter-search-clear[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .record-filter-form > .expandable-filter-search.is-expanded,
    .availability-results-toolbar > .expandable-filter-search.is-expanded,
    .record-pagination-toolbar-with-search > .expandable-filter-search.is-expanded {
        flex: 1 0 100%;
        width: 100%;
    }

    .availability-results-toolbar {
        flex-wrap: wrap;
    }

    .availability-results-toolbar > .record-pagination-toolbar {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-start;
    }

    .availability-results-toolbar > .availability-expandable-search:not(.is-expanded) {
        flex: 0 0 42px;
    }

    .availability-panel .availability-view-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .availability-panel .availability-view-toggle button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .availability-results-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: end;
    }

    .availability-results-toolbar > .record-pagination-toolbar {
        grid-column: 1;
        width: 100%;
    }

    .availability-results-toolbar > .availability-expandable-search:not(.is-expanded) {
        grid-column: 2;
        justify-self: end;
        margin-left: 0;
    }

    .availability-results-toolbar > .availability-expandable-search.is-expanded {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Registros usa el mismo paginador visual que Configuración > Espacios. Estas
   reglas viven después del molde general de `.mini-button` para que el círculo
   teal no vuelva a convertirse en un botón rectangular neutro. */
.record-pagination-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    margin: 2px 0 14px;
}

.record-pagination-toolbar-with-search {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.record-pagination-toolbar-with-search > .expandable-filter-search {
    flex: 0 1 360px;
    margin-left: auto;
}

.record-pagination-toolbar[hidden] {
    display: none !important;
}

.record-pagination {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.record-pagination[hidden] {
    display: none !important;
}

.record-page-size-control,
.record-page-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.record-page-size-select {
    width: 76px;
    min-width: 76px;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
}

.record-page-select {
    width: 64px;
    min-width: 64px;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
}

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

.record-pagination .record-page-button {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--brand-primary);
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
}

.record-pagination .record-page-button-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.record-pagination .record-page-button:hover {
    border-color: #9333EA;
    background: #9333EA;
    color: #ffffff;
    filter: none;
}

.record-pagination .record-page-button:focus-visible {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 1px;
    filter: none;
}

.record-pagination .record-page-button[hidden] {
    display: none !important;
}

.record-linked-list {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f6fbfc;
}

.record-linked-list[hidden] {
    display: none;
}

.record-modal-form .record-linked-list,
.record-modal-form .record-client-history {
    grid-column: 1 / -1;
}

.record-modal-form .record-linked-list {
    border-color: #c7d7ed;
    background: #f6f9ff;
    box-shadow: inset 4px 0 0 #2563eb;
}

.record-modal-form .record-linked-list .field-label-line {
    color: #1e3a8a;
}

.record-linked-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.record-modal-form .record-linked-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.record-linked-selects {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.record-linked-select-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.record-linked-select-field select {
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}

.record-linked-item {
    display: grid;
    gap: 2px;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.entry-form .record-linked-item {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #d6e0f2;
    background: #ffffff;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
}

.entry-form .record-linked-item:hover,
.entry-form .record-linked-item:focus-visible {
    border-color: #2563eb;
    background: #eff6ff;
    filter: none;
    outline: none;
}

.record-linked-item strong {
    font-size: 13px;
}

.record-linked-item span {
    color: var(--muted);
}

.record-linked-item.is-current {
    border-color: var(--brand-primary);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.field-hint,
.client-suggestion {
    display: block;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
}

.parking-contact-label-line {
    gap: 6px;
}

.parking-contact-label-line > .client-suggestion {
    display: inline;
    line-height: 1.2;
}

.record-client-history {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f6fbfc;
}

.record-client-history[hidden] {
    display: none;
}

.record-client-history .field-label-line {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.record-client-history-note {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
}

.record-client-history-note .record-client-history-owner {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff0b8;
    box-shadow: inset 0 -2px 0 #f97316;
    font-size: inherit;
    font-weight: 900;
    line-height: inherit;
    text-decoration: none;
    white-space: normal;
}

.record-client-history-note .record-client-history-owner:hover,
.record-client-history-note .record-client-history-owner:focus-visible {
    border-color: #f59e0b;
    background: #ffe08a;
    filter: none;
    outline: 2px solid rgba(194, 65, 12, 0.28);
    outline-offset: 2px;
    text-decoration: none;
}

.empty-state {
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
}

.button[hidden],
.inline-form[hidden] {
    display: none !important;
}

.button-secondary {
    background: var(--danger);
}

.button-compact {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.button-danger {
    background: var(--danger);
}

.button-neutral {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}
.record-modal[hidden] {
    display: none;
}

.record-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

@media (min-width: 1281px) {
    .app-shell .record-modal {
        inset: 0 0 0 var(--active-sidebar-width);
    }
}

.record-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 33, 0.54);
}

.record-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(980px, 100%);
    max-height: min(86vh, 760px);
    overflow: auto;
    padding: 28px 22px 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.record-modal-panel.parking-record-editor-panel {
    width: min(1480px, 100%);
    max-height: min(92dvh, 900px);
}

.parking-record-editor-panel .record-modal-form[data-parking-client-form] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parking-registration-create-modal {
    z-index: 82;
}

.record-modal-panel.parking-registration-create-panel {
    width: min(1380px, 100%);
    max-height: min(94dvh, 940px);
}

.parking-registration-create-modal-body,
.parking-registration-create-modal-body > form {
    min-width: 0;
}

.parking-registration-create-modal-body > form {
    margin: 0;
}

.parking-registration-create-modal-body .parking-registration-submit-actions {
    justify-content: flex-end;
}

.parking-record-editor-panel .record-modal-form > label:has(> .phone-field),
.parking-record-editor-panel .record-modal-form > label:has(> input[name="email"]),
.parking-registration-create-panel [data-registration-primary-contact],
.parking-registration-create-panel [data-registration-primary-email] {
    align-self: center;
    width: 100%;
    min-width: 0;
}

.parking-record-editor-panel .phone-field,
.parking-registration-create-panel .phone-field {
    width: 100%;
    max-width: none;
}

.parking-record-editor-panel .phone-field {
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
    min-width: 0;
}

.parking-record-editor-panel .phone-field > :is(.country-picker, input) {
    min-width: 0;
}

.parking-record-editor-panel input[name="email"],
.parking-registration-create-panel input[name="email"] {
    width: 100%;
}

@media (max-width: 1100px) {
    .parking-record-editor-panel .record-modal-form[data-parking-client-form] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .parking-record-editor-panel .record-modal-form[data-parking-client-form] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.record-modal-header,
.record-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.record-modal-header {
    align-items: flex-start;
    padding-right: 44px;
}

.record-modal-header h2 {
    margin: 0;
    font-size: 24px;
}

.record-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.record-modal-close:hover {
    filter: brightness(1.06);
}

.entry-form .record-modal-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.parking-client-modal {
    z-index: 105;
}

.parking-client-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: min(560px, 100%);
    max-height: min(82vh, 680px);
}

.parking-existing-contract-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.parking-existing-contract-panel :is(
    .parking-client-list-meta,
    .parking-client-empty
) {
    color: var(--ink);
}

.parking-existing-contract-panel .parking-client-list-item.is-selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.parking-client-type-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: min(320px, 100%);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f6fafb;
}

.parking-client-type-toggle[hidden] {
    display: none !important;
}

.parking-client-type-toggle button {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.parking-client-type-toggle button.is-active,
.parking-client-type-toggle button:focus-visible {
    background: var(--brand-primary);
    color: #fff;
    outline: none;
}

.parking-client-search-field {
    display: grid;
    gap: 6px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-client-search-field input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.parking-client-search-field input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
}

.parking-client-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    max-height: 430px;
    overflow: auto;
    padding: 2px;
}

.parking-client-list-item {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.parking-client-list-item[hidden] {
    display: none !important;
}

.parking-client-list-item:hover,
.parking-client-list-item:focus-visible {
    border-color: var(--brand-primary);
    background: #f3fbfc;
    outline: none;
}

.parking-client-list-name {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.parking-client-list-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.parking-client-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.parking-record-picker-button {
    min-height: 58px;
    padding: 7px 14px;
}

.parking-record-picker-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parking-record-picker-selection {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(72px, 0.55fr) minmax(0, 1.45fr);
    gap: 14px;
    min-width: 0;
}

.parking-record-picker-selection[hidden] {
    display: none;
}

.parking-record-picker-value,
.contact-record-picker-value {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.parking-record-picker-value small,
.contact-record-picker-value small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.parking-record-picker-value strong,
.contact-record-picker-value strong {
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.contact-record-picker-modal {
    z-index: 105;
}

.contact-record-picker-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: min(960px, 100%);
}

.contact-record-picker-panel .record-modal-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.contact-record-picker-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}

.contact-record-picker-filters label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.contact-record-picker-filters label > span {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-record-picker-filters select {
    width: 100%;
    min-height: 42px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.contact-record-picker-filters select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
}

.contact-record-picker-list {
    grid-template-columns: 1fr;
}

.contact-record-picker-option {
    grid-template-columns: minmax(84px, 0.65fr) minmax(180px, 1.65fr) minmax(110px, 0.85fr) minmax(76px, 0.55fr);
    align-items: center;
    gap: 16px;
}

.contact-record-picker-overdue strong {
    font-variant-numeric: tabular-nums;
}

.contact-record-picker-overdue.is-overdue strong {
    color: var(--danger);
}

.contact-record-picker-option.is-selected,
.contact-record-picker-option[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: #eef9fa;
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

/* El alta de empleados es un desplegable del apartado, no una ventana
   emergente: crece con su contenido y la página es la que scrollea. */
.employee-entry-panel {
    margin-top: 18px;
}

.employee-entry-body {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.employee-entry-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 820px) {
    .employee-entry-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-entry-actions > .button {
        width: 100%;
    }
}

.entry-form .employee-info-button {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
}

.entry-form .employee-toggle-line {
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 8px;
    min-height: 42px;
    padding: 0;
}

.employee-function-row input[type="checkbox"],
.entry-form .employee-toggle-line input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

.app-notice-modal[hidden] {
    display: none;
}

.app-notice-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.app-notice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 33, 0.54);
}

.app-notice-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(520px, 100%);
    padding: 26px 22px 20px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand-primary);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
}

.app-notice-copy {
    display: grid;
    gap: 8px;
    padding-right: 38px;
}

.app-notice-copy h2,
.app-notice-copy p {
    margin: 0;
}

.app-notice-copy h2 {
    color: var(--ink);
    font-size: 24px;
    line-height: 1.16;
}

.app-notice-copy p:not(.eyebrow) {
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

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

html[data-theme="dark"] .app-notice-backdrop {
    background: rgba(3, 7, 10, 0.76);
}

html[data-theme="dark"] .app-notice-panel {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
}

.app-notice-modal .record-modal-close.app-notice-close {
    border: 0;
    background: var(--danger);
    color: #ffffff;
}

.app-notice-modal .record-modal-close.app-notice-close:hover {
    background: var(--danger);
    color: #ffffff;
    filter: none;
}

.app-notice-modal .record-modal-close.app-notice-close:focus-visible {
    background: var(--danger);
    color: #ffffff;
    outline: 3px solid #000000;
    outline-offset: 2px;
    filter: none;
}

html[data-theme="dark"] .app-notice-modal .record-modal-close.app-notice-close:focus-visible {
    outline-color: #ffffff;
}

html[data-theme="dark"] .app-notice-actions .button {
    border: 1px solid #6f858e;
    color: #ffffff;
}

html[data-theme="dark"] .app-notice-actions .button-neutral {
    border-color: #6f858e;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-notice-actions .button-neutral:hover,
html[data-theme="dark"] .app-notice-actions .button-neutral:focus-visible {
    background: #26363d;
    color: #ffffff;
    filter: none;
}

.record-modal-form {
    margin: 0;
}

.contact-message-panel {
    width: min(780px, 100%);
}

.contact-message-form {
    display: grid;
    gap: 16px;
}

.contact-message-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.contact-message-tab {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.contact-message-tab.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.contact-message-pane {
    display: none;
    gap: 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-message-pane.is-active {
    display: grid;
}

.contact-message-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.contact-message-pane-header .button {
    text-transform: none;
}

.contact-message-context-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.contact-message-period-field,
.contact-message-category-field {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.space-vehicle-option.is-disabled {
    background: var(--surface-soft);
    color: var(--muted);
    opacity: 1;
    cursor: default;
}

.space-vehicle-option.is-disabled input {
    cursor: default;
}

.contact-message-period-field select,
.contact-message-category-field select {
    height: 38px;
    min-width: 180px;
}

.contact-message-pane textarea {
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    line-height: 1.45;
    resize: vertical;
    text-transform: none;
}

.contact-message-pane textarea:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.contact-message-example {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    white-space: pre-wrap;
}

.contact-message-example[hidden] {
    display: none;
}

.contact-message-tags {
    display: grid;
    gap: 8px;
}

.contact-message-tags-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.contact-message-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-message-tag-group[hidden] {
    display: none;
}

.contact-message-tag {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-transform: none;
}

.contact-message-tag:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.contact-message-modal .record-modal-actions {
    justify-content: flex-end;
}

.availability-detail-panel {
    width: min(760px, calc(100vw - 32px));
    padding: 30px;
    gap: 18px;
}

.availability-detail-header {
    padding-right: 44px;
}

.availability-detail-header .eyebrow {
    margin: 0 0 4px;
}

.availability-detail-header h2 {
    margin: 0;
}

.availability-detail-text {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.45;
    white-space: normal;
}

.availability-detail-item {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.availability-detail-item.is-wide {
    grid-column: span 2;
}

.availability-detail-item.is-full {
    grid-column: 1 / -1;
}

.availability-detail-item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.availability-detail-item strong {
    min-width: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.availability-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 14px;
}

.availability-choice-panel {
    width: min(620px, calc(100vw - 32px));
    padding: 30px;
    gap: 16px;
}

.availability-choice-copy {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.availability-choice-actions {
    display: flex;
    justify-content: flex-start;
}

.availability-choice-list-wrap {
    display: grid;
    gap: 8px;
}

.availability-choice-list-wrap[hidden] {
    display: none;
}

.availability-choice-list {
    display: grid;
    gap: 8px;
}

.availability-choice-item {
    width: 100%;
}

.availability-kpi-panel {
    width: min(980px, calc(100vw - 32px));
    padding: 30px;
    gap: 18px;
}

.availability-kpi-body {
    display: grid;
    gap: 18px;
}

.gastos-kpi-panel {
    width: min(1480px, calc(100vw - 32px));
}

.report-kpi-panel {
    width: min(1180px, calc(100vw - 32px));
}

.report-kpi-summary {
    grid-template-columns: minmax(0, 1fr);
}

.report-kpi-summary .availability-summary-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
    min-height: 104px;
}

.report-kpi-summary .availability-summary-card > span {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.1;
}

.report-kpi-summary .availability-summary-card > strong {
    font-size: clamp(24px, 2.5vw, 30px);
    line-height: 1;
    text-align: right;
}

.report-kpi-summary .availability-summary-card > small {
    grid-column: 1 / -1;
}

.report-kpi-table {
    min-width: 820px;
}

.report-kpi-table td:first-child {
    font-weight: 900;
}

.report-kpi-contact-link {
    color: var(--link-blue);
    font-weight: 800;
    text-decoration: none;
}

.report-kpi-contact-link:hover,
.report-kpi-contact-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.report-kpi-empty {
    margin: 0;
}

.report-increase-notice-button {
    width: 100%;
    min-width: 104px;
    white-space: nowrap;
}

.gastos-kpi-note {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 700;
}

.gastos-kpi-table {
    min-width: 1080px;
}

.gastos-kpi-action-row {
    cursor: pointer;
}

.gastos-kpi-action-row:hover td,
.gastos-kpi-action-row:focus-visible td {
    background: rgba(109, 40, 217, 0.08);
}

.gastos-kpi-action-row:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: -3px;
}

.gastos-kpi-total-row {
    border-top: 2px solid var(--line-strong);
    background: var(--surface-soft);
    font-weight: 900;
}

.gastos-kpi-total-row td:last-child {
    color: var(--accent);
}

.gastos-kpi-summary .tone-danger strong {
    color: var(--danger);
}

.gastos-kpi-summary .tone-positive strong {
    color: var(--positive);
}

.availability-kpi-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.availability-kpi-controls label {
    display: grid;
    gap: 6px;
    min-width: 180px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.availability-kpi-controls select {
    width: 100%;
}

.availability-kpi-content {
    display: grid;
    gap: 18px;
}

.payment-day-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.payment-day-bar {
    display: grid;
    gap: 7px;
    min-height: 74px;
    padding: 10px;
    border: 1px solid #cfe2e7;
    border-radius: 8px;
    background: #f7fbfc;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.payment-day-bar:is(:disabled, .is-empty) {
    cursor: default;
    opacity: 1;
    pointer-events: none;
}

.payment-day-bar.is-active {
    border-color: var(--brand-primary);
    background: #e5fbfd;
    box-shadow: inset 0 0 0 2px rgba(0, 113, 124, 0.24);
}

.payment-day-bar i {
    display: block;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dcebee;
}

.payment-day-bar b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-primary);
}

.payment-day-bar small {
    color: #000000;
    font-weight: 800;
}

.payment-space-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 22px;
}

.payment-space-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid #d3e3e7;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    box-shadow: var(--shadow-card);
}

.payment-space-card.is-overdue {
    border-left: 5px solid #e05a64;
}

.payment-space-card.is-paid {
    border-left: 5px solid #087f6f;
}

.payment-space-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.payment-space-card-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.08;
}

.payment-space-card-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.payment-space-card-header strong {
    display: inline-grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding: 0 12px;
    border-radius: 8px;
    background: #10242a;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.payment-space-card.is-paid .payment-space-card-header strong {
    background: #087f6f;
}

.payment-space-card.is-overdue .payment-space-card-header strong {
    background: #c74450;
}

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

.payment-space-filters label {
    display: grid;
    gap: 5px;
    min-width: 160px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-space-filters select {
    width: 100%;
    min-height: 40px;
}

.payment-space-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 10px;
}

.payment-space-list .empty-state {
    grid-column: 1 / -1;
    min-height: 62px;
    padding: 18px;
    border: 1px dashed #c8dce2;
    border-radius: 8px;
    background: #f6fafb;
    text-align: left;
}

.payment-space-chip {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 62px;
    padding: 8px;
    border: 1px solid #bfd5dc;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 rgba(16, 24, 32, 0.06);
}

.payment-space-chip.is-paid {
    border-color: rgba(8, 127, 111, 0.34);
    background: #e8fbf7;
    color: #064f47;
}

.payment-space-chip.is-overdue {
    border-color: rgba(199, 68, 80, 0.34);
    background: #fff0f2;
    color: #8f2430;
}

.payment-space-chip:hover,
.payment-space-chip:focus-visible {
    outline: 0;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(16, 24, 32, 0.12);
}

@media (max-width: 860px) {
    .payment-space-summary {
        grid-template-columns: 1fr;
    }

    .payment-space-card-header {
        align-items: center;
    }

    .payment-space-list {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    }

    .payment-space-chip {
        min-height: 54px;
        font-size: 14px;
    }
}

.availability-kpi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.availability-summary-card,
.availability-kpi-insight {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #d7e4e7;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
}

.availability-summary-card.is-primary {
    border-color: rgba(0, 113, 124, 0.28);
    background: linear-gradient(180deg, #effbfb 0%, #ffffff 100%);
}

.availability-summary-card span,
.availability-kpi-insight span {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.availability-summary-card strong,
.availability-kpi-insight strong {
    min-width: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.availability-summary-card small,
.availability-kpi-insight small {
    min-width: 0;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
}

.availability-kpi-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.availability-next-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d7e4e7;
    border-radius: 8px;
    background: #ffffff;
}

.availability-next-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.availability-next-table th,
.availability-next-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #e2ecef;
    color: var(--ink);
    text-align: left;
    vertical-align: middle;
}

.availability-next-table th {
    background: #f5fafb;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.availability-next-table tbody tr:last-child td {
    border-bottom: 0;
}

.availability-next-table td {
    font-size: 15px;
    font-weight: 700;
}

.availability-next-table td.is-space {
    color: var(--primary);
    font-size: 18px;
    font-weight: 900;
}

.availability-next-table td.is-time {
    text-align: center;
    font-weight: 900;
}

.payment-overdue-table :is(th:nth-child(5), td:nth-child(5)) {
    background: rgba(180, 35, 50, 0.14);
    color: #b42332;
    font-weight: 900;
}

.availability-show-all-actions {
    display: flex;
    justify-content: flex-start;
}

.availability-show-all-link {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.availability-show-all-link:hover {
    background: transparent;
    color: #1d4ed8;
    filter: none;
    text-decoration: underline;
}

.availability-kpi-section {
    display: grid;
    gap: 10px;
}

.availability-kpi-section h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 16px;
}

.availability-percent-row {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(140px, 1fr) minmax(112px, auto);
    gap: 14px;
    align-items: center;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #dce8ea;
    border-radius: 8px;
    background: #ffffff;
}

.availability-percent-label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.availability-percent-label span {
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.availability-percent-label small {
    min-width: 0;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.availability-percent-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7f0f2;
    box-shadow: inset 0 0 0 1px rgba(0, 91, 105, 0.06);
}

.availability-percent-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #007985 0%, #19a7a5 58%, #6bd2ba 100%);
}

.availability-percent-value {
    display: grid;
    gap: 4px;
    justify-items: end;
    min-width: 0;
    text-align: right;
}

.availability-percent-value strong {
    min-width: 0;
    color: #006a76;
    font-size: 17px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.availability-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf3f5;
    color: #000000;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}

.availability-delta.is-up {
    background: #e8f8ee;
    color: #15803d;
}

.availability-delta.is-down {
    background: #fdecec;
    color: #c2393f;
}

.availability-delta.is-flat {
    background: #eef3f5;
    color: #000000;
}

.availability-space-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.availability-space-list span,
.availability-space-list button {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.availability-space-list button:hover,
.availability-space-list button:focus-visible {
    border-color: var(--brand-primary);
    background: #eff7f8;
    outline: none;
}

.availability-space-list .availability-space-item.is-free {
    border-color: rgba(20, 108, 53, 0.28);
    background: #e8f7ee;
    color: #146c35;
}

.availability-space-list .availability-space-item.is-occupied {
    border-color: rgba(138, 31, 44, 0.28);
    background: #f9d7dc;
    color: #8a1f2c;
}

.availability-space-list .availability-space-item.is-partial {
    border-color: rgba(109, 40, 168, 0.28);
    background: #eadcfb;
    color: #6d28a8;
}

.availability-space-list .availability-space-item.is-fragmented {
    border-color: rgba(22, 111, 168, 0.32);
    background: #dceffc;
    color: #165f91;
}

.availability-space-list .availability-space-item.is-reserved {
    border-color: rgba(166, 94, 0, 0.34);
    background: #fff0cf;
    color: #8a4f00;
}

.availability-space-list .availability-space-item.is-free:hover,
.availability-space-list .availability-space-item.is-free:focus-visible {
    border-color: rgba(20, 108, 53, 0.45);
    background: #d9f1e3;
}

.availability-space-list .availability-space-item.is-occupied:hover,
.availability-space-list .availability-space-item.is-occupied:focus-visible {
    border-color: rgba(138, 31, 44, 0.45);
    background: #f4c5cd;
}

.availability-space-list .availability-space-item.is-partial:hover,
.availability-space-list .availability-space-item.is-partial:focus-visible {
    border-color: rgba(109, 40, 168, 0.45);
    background: #dfcdf7;
}

.availability-space-list .availability-space-item.is-fragmented:hover,
.availability-space-list .availability-space-item.is-fragmented:focus-visible {
    border-color: rgba(22, 111, 168, 0.5);
    background: #cbe7f9;
}

.availability-space-list .availability-space-item.is-reserved:hover,
.availability-space-list .availability-space-item.is-reserved:focus-visible {
    border-color: rgba(166, 94, 0, 0.52);
    background: #ffe5af;
}

.availability-space-groups {
    display: grid;
    gap: 14px;
}

.availability-space-group {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.availability-space-group h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}

@media (max-width: 720px) {
    .availability-detail-panel {
        width: min(100%, calc(100vw - 24px));
        padding: 26px 18px 18px;
    }

    .availability-detail-text {
        grid-template-columns: 1fr;
    }

    .availability-detail-item.is-wide {
        grid-column: auto;
    }

    .availability-choice-panel {
        width: min(100%, calc(100vw - 24px));
        padding: 26px 18px 18px;
    }

    .availability-kpi-panel {
        width: min(100%, calc(100vw - 24px));
        padding: 26px 18px 18px;
    }

    .availability-kpi-controls label {
        min-width: min(100%, 180px);
    }

    .availability-summary-card strong,
    .availability-kpi-insight strong {
        font-size: 19px;
    }

    .availability-percent-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .availability-percent-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .availability-percent-value {
        align-self: start;
    }
}

.record-modal-actions {
    justify-content: flex-end;
}

.vehicle-data-panel {
    width: min(720px, 100%);
}

.vehicle-data-message {
    padding: 10px 12px;
    border: 1px solid rgba(31, 111, 216, 0.22);
    border-radius: 8px;
    background: #f4f8ff;
    color: #31506f;
    font-size: 14px;
}

.vehicle-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.vehicle-data-grid article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.vehicle-data-grid span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.vehicle-data-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

.payment-modal-panel {
    width: min(1120px, 100%);
}

.payment-detail-panel {
    width: min(1640px, 100%);
    max-height: calc(100vh - 16px);
}

.payment-editor-panel {
    width: min(1240px, 100%);
}

.variable-increment-panel {
    width: min(760px, 100%);
}

.variable-list-panel {
    width: min(520px, 100%);
}

.variable-dialog-panel {
    width: min(560px, 100%);
}

[data-floor-modal] .variable-dialog-panel {
    width: min(860px, 100%);
}

[data-vehicle-modal] .variable-dialog-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    width: min(1440px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: hidden;
}

@media (min-width: 1281px) {
    .app-shell [data-vehicle-modal] .variable-dialog-panel {
        width: min(1440px, calc(100vw - var(--active-sidebar-width) - 48px));
    }
}

.rental-unit-dialog-panel {
    width: min(860px, 100%);
}

[data-floor-setup-modal].record-modal {
    padding: 8px;
}

[data-floor-setup-modal] .variable-dialog-panel {
    width: min(1320px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
}

.variable-ipc-view-panel {
    width: min(1180px, 100%);
}

.location-map-panel {
    width: min(900px, 100%);
}

.location-map-frame {
    width: 100%;
    height: min(62vh, 520px);
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    overflow: hidden;
}

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

.variable-dialog-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.floor-modal-rows {
    display: grid;
    grid-column: 1 / -1;
    gap: 13px;
    min-width: 0;
}

.floor-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: end;
    gap: 13px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.floor-modal-row.is-parking-location-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 34px;
}

.floor-modal-row.is-zone-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
}

.floor-modal-row + .floor-modal-row {
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.entry-form .floor-modal-row-remove {
    display: inline-grid;
    grid-column: -2 / -1;
    grid-row: 1;
    place-items: center;
    align-self: end;
    justify-self: end;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .floor-modal-row-remove:hover {
    background: color-mix(in srgb, var(--danger) 84%, #000000);
    color: #ffffff;
    filter: none;
}

.entry-form .floor-modal-row-remove:focus-visible {
    background: var(--danger);
    color: #ffffff;
    outline: 3px solid color-mix(in srgb, var(--danger) 28%, transparent);
    outline-offset: 2px;
    filter: none;
}

.floor-modal-row-remove svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.floor-modal-row-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.variable-dialog-form > .floor-modal-add-another {
    grid-column: 1 / -1;
    justify-self: start;
    border: 1px solid var(--line);
    background: #fff;
    color: #000000;
}

@media (max-width: 700px) {
    .floor-modal-row,
    .floor-modal-row.is-parking-location-row,
    .floor-modal-row.is-zone-row {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .floor-modal-row.is-parking-location-row > label:first-of-type {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .floor-modal-row.is-parking-location-row > :is([data-floor-modal-address-field], [data-floor-modal-entry-field]) {
        grid-column: 1;
        grid-row: 2;
    }

    .floor-modal-row.is-parking-location-row > [data-floor-modal-floor-field] {
        grid-column: 1;
        grid-row: 3;
    }

    .entry-form .floor-modal-row-remove {
        grid-column: 2;
        grid-row: 1;
    }

    .entry-form .floor-modal-row.is-parking-location-row .floor-modal-row-remove {
        grid-row: 2;
    }

    .entry-form .floor-modal-row.is-zone-row .floor-modal-row-remove {
        grid-row: 3;
    }
}

.vehicle-category-dialog-form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 16px;
    min-height: 0;
    padding: 22px 26px;
    overflow-y: auto;
}

[data-vehicle-modal] .record-modal-header {
    padding: 22px 70px 16px 26px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

[data-vehicle-modal] .record-modal-close {
    top: 18px;
    right: 20px;
}

[data-vehicle-modal] .record-modal-actions {
    justify-content: flex-end;
    padding: 14px 26px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

[data-vehicle-modal] .record-modal-actions .button {
    min-width: 132px;
}

[data-vehicle-modal] .record-modal-actions .button:not(.category-dialog-cancel) {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

[data-vehicle-modal] .record-modal-actions .category-dialog-cancel {
    border-color: #f0646a;
    background: #f0646a;
    color: #000000;
}

[data-vehicle-modal] .record-modal-actions .category-dialog-cancel:hover,
[data-vehicle-modal] .record-modal-actions .category-dialog-cancel:focus-visible {
    border-color: #f0646a;
    background: #f0646a;
    color: #000000;
    filter: brightness(1.04);
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.vehicle-category-dialog-disclosure {
    display: block;
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-section > .vehicle-category-dialog-summary {
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 13px 16px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
    color: var(--ink);
    box-shadow: none;
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-section:not([open]) > .vehicle-category-dialog-summary {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-section[open] > .vehicle-category-dialog-summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-strong);
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-section > .vehicle-category-dialog-summary:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.34);
    outline-offset: -3px;
}

.vehicle-category-dialog-summary .collapsible-title {
    flex: 1 1 auto;
}

.vehicle-category-dialog-summary .collapsible-heading {
    font-size: 16px;
}

.app-shell [data-vehicle-modal] .vehicle-category-dialog-section > .vehicle-category-dialog-section-body {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
}

.vehicle-category-dialog-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.vehicle-category-dialog-section-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.vehicle-category-dialog-section-head p,
.vehicle-category-dialog-summary-meta {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
    text-transform: none;
}

.vehicle-category-dialog-summary-meta {
    flex: 0 0 auto;
    margin-left: auto;
}

.vehicle-category-basics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.5fr);
    gap: 12px;
}

.vehicle-category-period-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
}

.vehicle-period-rate {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.vehicle-period-rate-title {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.vehicle-period-rate-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.vehicle-period-rate :is(input, select) {
    width: 100%;
    min-width: 0;
}

.vehicle-period-rate-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.vehicle-period-rate-field > span {
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
    text-transform: uppercase;
}

.vehicle-period-rate-label-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.vehicle-period-rate-label-row > label {
    display: block;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-transform: inherit;
}

.vehicle-rate-fraction-base {
    white-space: nowrap;
}

[data-vehicle-modal-rate-fraction-base] {
    color: var(--brand-primary);
    font-weight: 850;
}

.entry-form .vehicle-rate-help-button {
    position: relative;
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    flex-basis: 14px;
    font-size: 10px;
}

.entry-form .vehicle-rate-help-button::before {
    position: absolute;
    width: 30px;
    height: 30px;
    content: "";
}

.entry-form .vehicle-rate-help-button:focus-visible {
    outline: 2px solid #6D28D9;
    outline-offset: 2px;
}

.vehicle-rate-help-popover {
    top: auto;
    right: auto;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    width: min(260px, calc(100vw - 48px));
    min-width: 220px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.vehicle-rate-fraction-help-popover {
    width: min(330px, calc(100vw - 48px));
}

.vehicle-rate-rounding {
    display: grid;
    min-width: 0;
    gap: 8px;
    margin: 2px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.vehicle-rate-rounding legend {
    padding: 0 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.vehicle-rate-rounding-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(72px, 0.65fr);
    gap: 8px;
}

.vehicle-rate-rounding-controls label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.vehicle-rate-rounding-controls label > span {
    color: var(--ink);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    text-transform: uppercase;
}

.vehicle-rate-rounding output {
    min-height: 17px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.vehicle-rate-rounding.is-disabled input {
    border-color: #c5cfd3;
    background: #e6eaec;
    color: #000000;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}

.vehicle-period-rate-field :is(input[readonly], input:disabled),
.vehicle-period-rate-field.is-inactive input {
    border-color: #c5cfd3;
    background: #e6eaec;
    color: #000000;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}

.vehicle-period-rate-field.is-inactive > span,
.vehicle-period-rate-derived > span {
    color: #000000;
}

.vehicle-period-rate small {
    min-height: 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.vehicle-category-models-section {
    padding-top: 2px;
}

[data-vehicle-modal] .space-vehicle-picker {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

[data-vehicle-modal] .space-vehicle-option {
    min-height: 42px;
    border-color: #b8c9ce;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

[data-vehicle-modal] .space-vehicle-option-choice {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    text-transform: inherit;
    cursor: pointer;
}

[data-vehicle-modal] .space-vehicle-option-choice > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-vehicle-modal] .vehicle-model-info-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #8B5CF6;
    border-radius: 999px;
    background: #8B5CF6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

[data-vehicle-modal] .vehicle-model-info-button:hover {
    filter: brightness(1.08);
}

[data-vehicle-modal] .vehicle-model-info-button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

[data-vehicle-modal] .space-vehicle-option:has(input:checked) {
    border-color: #8B5CF6;
    background: #e7f7f8;
    color: #004f59;
}

[data-vehicle-modal] .space-vehicle-option:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 1px;
}

.rental-property-type-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.rental-property-type-field > input[type="hidden"] {
    display: none;
}

.rental-property-type-other:not([hidden]) {
    display: grid;
    gap: 6px;
    margin-top: 4px;
}

.rental-property-type-open.is-placeholder {
    color: var(--muted);
}

.rental-property-type-panel {
    width: min(820px, 100%);
}

[data-rental-property-type-modal] .rental-property-type-options {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    max-height: min(52vh, 460px);
    overflow: auto;
    padding: 2px;
}

[data-rental-property-type-modal] .space-vehicle-option {
    min-height: 42px;
    border-color: #b8c9ce;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

[data-rental-property-type-modal] .space-vehicle-option-choice {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    text-transform: inherit;
    cursor: pointer;
}

[data-rental-property-type-modal] .space-vehicle-option-choice > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-rental-property-type-modal] .space-vehicle-option input[type="radio"] {
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-primary);
}

[data-rental-property-type-modal] .vehicle-model-info-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #8B5CF6;
    border-radius: 999px;
    background: #8B5CF6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

[data-rental-property-type-modal] .vehicle-model-info-button:hover {
    filter: brightness(1.08);
}

[data-rental-property-type-modal] .vehicle-model-info-button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

.rental-space-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.rental-space-preview-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 22px;
}

.entry-form .rental-space-preview-label > label {
    display: block;
    min-width: 0;
}

.entry-form .rental-space-info-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    margin-left: 3px;
    padding: 0;
    border: 1px solid #8B5CF6;
    border-radius: 999px;
    background: #8B5CF6;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.entry-form .rental-space-info-button:hover {
    filter: brightness(1.08);
}

.entry-form .rental-space-info-button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

[data-rental-property-type-modal] .space-vehicle-option:has(input:checked) {
    border-color: #8B5CF6;
    background: #e7f7f8;
    color: #004f59;
}

[data-rental-property-type-modal] .space-vehicle-option:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 1px;
}

.rental-property-type-image {
    aspect-ratio: auto;
}

[data-vehicle-modal] .space-vehicle-option.is-disabled {
    border-color: rgba(213, 53, 84, 0.72);
    background: #e3e6e8;
    color: #000000;
    box-shadow: inset 3px 0 0 var(--danger);
    opacity: 1;
    cursor: help;
}

[data-vehicle-modal] .space-vehicle-option.is-disabled .space-vehicle-option-choice {
    cursor: help;
}

[data-vehicle-modal] .space-vehicle-option.is-disabled .space-vehicle-option-choice input {
    pointer-events: none;
}

[data-vehicle-modal] .space-vehicle-option.is-disabled:hover {
    border-color: var(--danger);
    background: #d9dde0;
}

[data-vehicle-modal] .space-vehicle-option.is-disabled:focus-within {
    border-color: var(--danger);
    outline: 3px solid rgba(213, 53, 84, 0.24);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .space-vehicle-option {
    border-color: #405861;
    background: #172329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .space-vehicle-option:has(input:checked) {
    border-color: #A855F7;
    background: #0d5962;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .space-vehicle-option.is-disabled {
    border-color: #f0646a;
    background: #30373b;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #f0646a;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .space-vehicle-option.is-disabled:hover {
    border-color: #ff7a80;
    background: #394145;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .space-vehicle-option.is-disabled:focus-within {
    border-color: #ff7a80;
    outline-color: rgba(240, 100, 106, 0.48);
}

html[data-theme="dark"] .app-shell [data-space-modal] .space-vehicle-picker-title {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-space-modal] .space-vehicle-option {
    border-color: #405861;
    background: #172329;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell [data-space-modal] .space-vehicle-option:hover {
    border-color: #A855F7;
    background: #20343b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-space-modal] .space-vehicle-option:has(input:checked) {
    border-color: #A855F7;
    background: #0d5962;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #A855F7;
}

html[data-theme="dark"] .app-shell [data-space-modal] .space-vehicle-option:focus-within {
    border-color: #A855F7;
    outline-color: rgba(42, 196, 207, 0.44);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-model-info-button {
    border-color: #A855F7;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-model-info-button:focus-visible {
    outline-color: rgba(105, 210, 218, 0.55);
}

html[data-theme="dark"] .app-shell .rental-property-type-field {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-rental-property-type-modal] .space-vehicle-option {
    border-color: #405861;
    background: #172329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-rental-property-type-modal] .space-vehicle-option:has(input:checked) {
    border-color: #A855F7;
    background: #0d5962;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-rental-property-type-modal] .vehicle-model-info-button {
    border-color: #A855F7;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-rental-property-type-modal] .vehicle-model-info-button:focus-visible {
    outline-color: rgba(105, 210, 218, 0.55);
}

html[data-theme="dark"] .app-shell .entry-form .rental-space-info-button {
    border-color: #A855F7;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .rental-space-info-button:focus-visible {
    outline-color: rgba(105, 210, 218, 0.55);
}

.vehicle-model-image-comment {
    position: fixed;
    z-index: 96;
    width: min(320px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(14, 31, 36, 0.28);
}

.vehicle-model-image-comment[hidden] {
    display: none;
}

.vehicle-model-occupied-comment {
    position: fixed;
    z-index: 96;
    width: min(320px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid rgba(213, 53, 84, 0.72);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(14, 31, 36, 0.28);
}

.vehicle-model-occupied-comment[hidden] {
    display: none;
}

.vehicle-model-occupied-comment p {
    margin: 0;
    padding: 10px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.vehicle-model-image-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
}

.vehicle-model-image-comment-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
}

.vehicle-model-image-comment-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.vehicle-model-image-comment-close:hover {
    background: var(--danger);
    color: #ffffff;
    filter: none;
}

.vehicle-model-image-comment-close:focus-visible {
    background: var(--danger);
    color: #ffffff;
    outline: 3px solid #000000;
    outline-offset: 2px;
    filter: none;
}

html[data-theme="dark"] .vehicle-model-image-comment-close:focus-visible {
    outline-color: #ffffff;
}

.vehicle-model-image-stage {
    display: grid;
    place-items: center;
    min-height: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f4f7f8;
    overflow: hidden;
}

.vehicle-model-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    max-height: min(300px, calc(100dvh - 90px));
    object-fit: contain;
}

.rental-space-image {
    aspect-ratio: auto;
}

html[data-theme="dark"] .app-shell .vehicle-model-image-comment,
html[data-theme="dark"] .app-shell .vehicle-model-occupied-comment,
html[data-theme="dark"] .app-shell .vehicle-model-image-stage {
    border-color: #405861;
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .vehicle-model-occupied-comment {
    border-color: #f0646a;
    background: #252c30;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .vehicle-model-occupied-comment p {
    background: rgba(240, 100, 106, 0.12);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-period-rate-field :is(input[readonly], input:disabled),
html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-period-rate-field.is-inactive input {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
    box-shadow: none;
    opacity: 1;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-period-rate-field.is-inactive > span,
html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-period-rate-derived > span {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal-rate-fraction-base] {
    color: #C084FC;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-rate-rounding {
    border-color: #405861;
    background: #172329;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-rate-rounding.is-disabled input {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-rate-help-popover {
    border-color: #405861;
    background: #172329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-rate-help-button:focus-visible {
    outline-color: #C084FC;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .record-modal-actions .category-dialog-cancel,
html[data-theme="dark"] .app-shell [data-vehicle-modal] .record-modal-actions .category-dialog-cancel:hover,
html[data-theme="dark"] .app-shell [data-vehicle-modal] .record-modal-actions .category-dialog-cancel:focus-visible {
    border-color: #f0646a;
    background: #f0646a;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .record-modal-actions .button:not(.category-dialog-cancel) {
    border-color: #2aaeba;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section {
    border-color: #38515a;
    background: #11191c;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section > .vehicle-category-dialog-summary,
html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section:not([open]) > .vehicle-category-dialog-summary {
    border-color: transparent;
    background: linear-gradient(135deg, #202e33 0%, #182328 100%);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section[open] > .vehicle-category-dialog-summary {
    border-bottom: 1px solid #34545c;
    background: linear-gradient(135deg, #18363b 0%, #16272b 100%);
    box-shadow: inset 4px 0 0 #25bac8;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section[open] > .vehicle-category-dialog-summary .collapsible-heading {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section > .vehicle-category-dialog-summary .collapsible-indicator {
    border-color: #4c6872;
    background: #10191d;
    color: #6ee1e8;
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-category-dialog-form > .vehicle-category-dialog-section > .vehicle-category-dialog-summary:focus-visible {
    outline-color: #6ee1e8;
}

@media (max-width: 1180px) {
    .vehicle-category-period-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    [data-vehicle-modal] {
        padding: 8px;
    }

    .vehicle-model-image {
        max-height: min(300px, calc(100dvh - 90px));
    }

    [data-vehicle-modal] .variable-dialog-panel {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    [data-vehicle-modal] .record-modal-header {
        padding: 18px 58px 14px 18px;
    }

    [data-vehicle-modal] .record-modal-close {
        top: 14px;
        right: 14px;
    }

    .vehicle-category-dialog-form {
        gap: 18px;
        padding: 18px;
    }

    .vehicle-category-dialog-section-head:not(.vehicle-category-dialog-summary) {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .vehicle-category-dialog-section-head p,
    .vehicle-category-dialog-summary-meta {
        text-align: left;
    }

    .vehicle-category-basics-grid,
    .vehicle-category-period-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-vehicle-modal] .record-modal-actions {
        padding: 12px 18px;
    }
}

@media (max-width: 700px) {
    .variable-collection-toolbar-split {
        align-items: stretch;
        flex-direction: column;
    }

    .variable-collection-toolbar-split .variable-collection-add-button {
        width: 100%;
    }

    .variable-collection-toolbar-split .space-pagination-toolbar,
    .record-pagination-toolbar {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media (max-width: 520px) {
    .vehicle-category-toolbar,
    .variable-collection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .vehicle-category-add-button,
    .variable-collection-add-button {
        width: 100%;
    }

    .variable-collection-toolbar-split .space-pagination,
    .record-pagination {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .vehicle-category-basics-grid,
    .vehicle-category-period-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-rate-rounding-controls {
        grid-template-columns: 1fr;
    }

    .vehicle-period-rate-controls {
        grid-template-columns: 1fr;
    }

    [data-vehicle-modal] .record-modal-actions .button {
        flex: 1 1 0;
        min-width: 0;
    }
}


.parking-contracts-table {
    min-width: 1080px;
}

.parking-contracts-content {
    min-width: 0;
}

.parking-contract-entry-filter {
    display: grid;
    gap: 6px;
    min-width: min(320px, 100%);
}

.parking-contracts-filter-form > label {
    color: #000000;
}

.parking-contract-entry-filter > .field-label-line {
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.parking-contract-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.parking-contract-filter-button {
    width: 170px;
    max-width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.parking-contract-filter-button:hover {
    border-color: var(--brand-primary);
}

.parking-contract-filter-button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.parking-contract-filter-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
    outline-offset: 2px;
}

.parking-contracts-table td[data-col-key="espacios"] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parking-contract-row {
    cursor: pointer;
}

.parking-contracts-table .parking-contract-row > td {
    border-bottom-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: background-color 160ms ease;
}

.parking-contracts-table .parking-contract-row > td:first-child {
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

.parking-contracts-table .parking-contract-row:hover > td {
    background: var(--surface-soft);
}

.parking-contracts-table .parking-contract-row.is-expanded > td {
    background: var(--surface-strong);
}

.parking-contracts-table .parking-contract-detail-row > td {
    padding: 0;
    border-bottom-color: var(--line);
    background: var(--surface-soft);
    white-space: normal;
}

.parking-contracts-table .parking-contract-detail-item {
    border-color: var(--line);
    background: var(--surface);
}

.parking-contracts-table .parking-contract-detail-item small {
    color: var(--ink);
}

.parking-contracts-table .contact-client-expand:focus-visible {
    outline-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

.parking-contracts-table .contact-client-vehicle-count {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.parking-contracts-table .contact-client-expand-indicator {
    border-color: var(--brand-primary);
}

.parking-contract-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.parking-contract-state.is-vigente,
.parking-contract-state.is-ocupando {
    border-color: #a7e3bf;
    background: #e9f8ee;
    color: #1b6b3a;
}

.parking-contract-state.is-por_comenzar,
.parking-contract-state.is-programado {
    border-color: #ead3a7;
    background: #fdf4e3;
    color: #8a5a12;
}

.parking-contract-state.is-reserva {
    border-color: #c4b5fd;
    background: #f3edff;
    color: #5b21b6;
}

.parking-contract-state.is-finalizado {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
}

.parking-contract-row.is-finalizado .contact-client-expand-name {
    color: var(--ink);
}

.parking-contract-detail-item {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.parking-contract-detail-item.is-reserva {
    border-style: dashed;
}

.parking-contract-detail-item .parking-contract-state {
    justify-self: start;
}

/* --- Editor de plano de la unidad amueblada ------------------------------ */

.rental-space-plan {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    margin: -4px 0 4px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-primary);
    border-radius: 10px;
    padding: 14px;
    background: var(--surface);
}

.rental-space-plan[hidden] {
    display: none;
}

.plan-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.plan-toolbar-separador {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin: 0 4px;
}

.rental-space-plan .plan-boton {
    min-width: 0;
    height: auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rental-space-plan .plan-boton:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.rental-space-plan .plan-boton:disabled {
    opacity: 0.45;
    cursor: default;
}

.rental-space-plan .plan-boton-peligro:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

.plan-cuerpo {
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.plan-medidas {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
}

.rental-space-plan .plan-boton-zoom {
    width: 36px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 760px) {
    .plan-cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

.plan-paleta {
    display: grid;
    gap: 8px;
    align-content: start;
    max-height: 620px;
    overflow-y: auto;
    padding-right: 4px;
}

.plan-categoria {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft, #f6f9f9);
}

.plan-categoria > summary {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    list-style: none;
}

.plan-categoria > summary::-webkit-details-marker {
    display: none;
}

.plan-categoria > summary::after {
    content: "";
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.plan-categoria[open] > summary::after {
    transform: rotate(225deg);
}

.plan-categoria-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 8px 8px;
}

.rental-space-plan .plan-item {
    min-width: 0;
    height: auto;
    white-space: normal;
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 8px 4px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    cursor: grab;
    touch-action: none;
}

.rental-space-plan .plan-item:hover {
    border-color: var(--brand-primary);
}

.rental-space-plan .plan-item svg {
    width: 54px;
    height: 40px;
}

.plan-lienzo-marco {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.plan-lienzo {
    width: 100%;
    height: 620px;
    max-height: 70vh;
    cursor: grab;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    touch-action: none;
    display: block;
}

.plan-lienzo:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.plan-fantasma {
    position: fixed;
    z-index: 400;
    width: 64px;
    height: 48px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.85;
}

.plan-fantasma svg {
    width: 100%;
    height: 100%;
}

/* Piezas del dibujo del plano (claro) */
.plan-piso {
    fill: #fdfefe;
}

.plan-grilla {
    fill: none;
    stroke: #dde7e9;
    stroke-width: 1;
}

.plan-pared {
    fill: none;
    stroke: #37474d;
    stroke-width: 12;
}

.plan-medida-texto {
    font-size: 24px;
    font-weight: 600;
    fill: var(--muted);
}

.plan-mueble {
    cursor: move;
}

.pf-cuerpo {
    fill: #f1f5f5;
    stroke: #43555b;
    stroke-width: 3;
}

.pf-suave {
    fill: #d7e2e4;
    stroke: #43555b;
    stroke-width: 2;
}

.pf-detalle {
    fill: none;
    stroke: #43555b;
    stroke-width: 2;
}

.pf-trazos {
    fill: none;
    stroke: #43555b;
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

.pf-suave-linea {
    fill: none;
    stroke: #7a8d93;
    stroke-width: 3;
}

.plan-seleccion-marco {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 2.5;
    stroke-dasharray: 10 7;
}

.plan-seleccion-linea {
    stroke: var(--brand-primary);
    stroke-width: 2.5;
}

.plan-asa {
    fill: #ffffff;
    stroke: var(--brand-primary);
    stroke-width: 3;
    cursor: pointer;
}

.plan-asa[data-plan-asa="tamano"] {
    cursor: nwse-resize;
}

.plan-asa[data-plan-asa="rotar"] {
    cursor: grab;
}

/* Tema oscuro del editor de plano: misma receta que el resto del panel. */
html[data-theme="dark"] .rental-space-plan {
    border-color: #38515a;
    border-left-color: #25bac8;
    background: #11191c;
}

html[data-theme="dark"] .plan-categoria {
    background: #182023;
    border-color: #3b4a51;
}

html[data-theme="dark"] .rental-space-plan .plan-item,
html[data-theme="dark"] .rental-space-plan .plan-boton {
    background: #121a1e;
    border-color: #53656d;
    color: var(--ink);
}

html[data-theme="dark"] .rental-space-plan .plan-item:hover,
html[data-theme="dark"] .rental-space-plan .plan-boton:hover:not(:disabled) {
    border-color: #A855F7;
    color: #6ee1e8;
}

html[data-theme="dark"] .rental-space-plan .plan-boton-peligro:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

html[data-theme="dark"] .plan-lienzo {
    background: #10181b;
    border-color: #53656d;
}

html[data-theme="dark"] .plan-piso {
    fill: #162125;
}

html[data-theme="dark"] .plan-grilla {
    stroke: #24333a;
}

html[data-theme="dark"] .plan-pared {
    stroke: #9db4bb;
}

html[data-theme="dark"] .plan-medida-texto {
    fill: #ffd18a;
}

html[data-theme="dark"] .pf-cuerpo {
    fill: #223037;
    stroke: #9db4bb;
}

html[data-theme="dark"] .pf-suave {
    fill: #2d3f47;
    stroke: #9db4bb;
}

html[data-theme="dark"] .pf-detalle,
html[data-theme="dark"] .pf-trazos {
    stroke: #9db4bb;
}

html[data-theme="dark"] .pf-suave-linea {
    stroke: #6f858c;
}

html[data-theme="dark"] .plan-seleccion-marco,
html[data-theme="dark"] .plan-seleccion-linea {
    stroke: #A855F7;
}

html[data-theme="dark"] .plan-asa {
    fill: #0d5962;
    stroke: #A855F7;
}

/* La regla global de :disabled del tema oscuro (13-publica-5) pisa la opacidad
   de los botones del plano; acá se restituye la señal de deshabilitado. */
html[data-theme="dark"] .app-shell .entry-form .rental-space-plan .plan-boton.plan-boton:disabled {
    opacity: 0.45;
    color: var(--muted);
    background: #121a1e;
}

.rental-space-plan .plan-buscar {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
}

.plan-sin-resultados {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.plan-categoria[hidden],
.plan-item[hidden] {
    display: none !important;
}

.plan-asa-sala {
    cursor: move;
}

html[data-theme="dark"] .rental-space-plan .plan-medidas {
    color: #ffd18a;
}

/* Divisiones visibles de la tabla de registros por ubicación física. */
.record-location-group-row td {
    padding: 9px 14px;
    border-block: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: #000;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: left;
}

html[data-theme="dark"] .app-shell .record-location-group-row td {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: #fff;
}
/* --- Plano editable de Estacionamiento ---------------------------------- */

.parking-floor-plan {
    display: grid;
    gap: 14px;
    color: var(--ink);
}

.parking-floor-plan [hidden] {
    display: none !important;
}

.parking-floor-plan > .parking-floor-plan-section-panel ~ .parking-floor-plan-section-panel {
    margin-top: 0;
}

.parking-floor-plan-section-host,
.parking-floor-plan-editor-surface {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.parking-floor-plan-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.parking-floor-plan-save {
    flex: 0 0 auto;
}

.parking-floor-plan-save:disabled {
    border-color: var(--danger);
    background: var(--surface-soft, var(--surface));
    color: var(--ink);
    cursor: default;
}

.parking-floor-plan-blocked-notice {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 2px solid var(--danger);
    border-radius: 10px;
    background: #fff0f2;
    color: var(--ink);
}

.parking-floor-plan-blocked-notice h3,
.parking-floor-plan-blocked-notice p {
    margin: 0;
    color: var(--ink);
}

.parking-floor-plan-blocked-notice p {
    line-height: 1.5;
}

.parking-floor-plan-recovery {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 2px solid #b7791f;
    border-radius: 10px;
    background: #fff4cc;
    color: var(--ink);
}

.parking-floor-plan-recovery h3,
.parking-floor-plan-recovery p,
.parking-floor-plan-recovery ul {
    margin: 0;
    color: var(--ink);
}

.parking-floor-plan-recovery p,
.parking-floor-plan-recovery ul {
    margin-top: 6px;
    line-height: 1.5;
}

.parking-floor-plan-recovery-confirm {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.4;
}

.parking-floor-plan-recovery-confirm input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #b7791f;
}

.parking-floor-plan-recovery-confirm input:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.parking-floor-plan-context-button:focus-visible,
.parking-floor-plan-palette-item:focus-visible,
.parking-floor-plan-attribute-option:focus-visible,
.parking-floor-plan-palette-group > summary:focus-visible,
.parking-floor-plan-canvas:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.parking-floor-plan-palette-item:disabled {
    border-style: dashed;
    border-color: var(--line-strong);
    background: var(--surface-soft, var(--surface));
    color: var(--ink);
    cursor: default;
}

.parking-floor-plan-measures {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.parking-floor-plan-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 225px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.parking-floor-plan-palette-column {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
}

.parking-floor-plan-search-label {
    display: grid;
    gap: 5px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.parking-floor-plan-search-label input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
}

.parking-floor-plan-search-label input::placeholder {
    color: var(--placeholder);
}

.parking-floor-plan-no-results,
.parking-floor-plan-palette-empty {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.45;
}

.parking-floor-plan-palette {
    display: grid;
    gap: 8px;
    max-height: 650px;
    overflow-y: auto;
    padding-right: 3px;
}

.parking-floor-plan-palette-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft, var(--surface));
}

.parking-floor-plan-palette-group > summary {
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.parking-floor-plan-palette-group > summary::-webkit-details-marker {
    display: none;
}

.parking-floor-plan-palette-group > summary::after {
    content: "";
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 3px;
    border-right: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    transform: rotate(45deg);
}

.parking-floor-plan-palette-group[open] > summary::after {
    transform: rotate(225deg);
}

.parking-floor-plan-palette-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 7px 7px;
}

.parking-floor-plan-context-items {
    display: grid;
    gap: 6px;
    padding: 0 7px 7px;
}

.parking-floor-plan-attribute-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 7px 7px;
}

.parking-floor-plan-context-button {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.parking-floor-plan-context-button:hover,
.parking-floor-plan-context-button[aria-pressed="true"] {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.parking-floor-plan-attribute-option {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}

.parking-floor-plan-attribute-option:hover:not(:disabled) {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.parking-floor-plan-attribute-option[aria-pressed="true"] {
    border-color: #075f66;
    background: #075f66;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #ffffff;
}

.parking-floor-plan-attribute-option:disabled {
    border-style: dashed;
    border-color: var(--line-strong);
    background: var(--surface-soft, var(--surface));
    color: var(--ink);
    cursor: default;
}

.parking-floor-plan-palette-empty {
    grid-column: 1 / -1;
    padding: 7px;
    border: 1px dashed var(--line-strong);
    border-radius: 7px;
}

.parking-floor-plan-palette-item {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 92px;
    height: auto;
    padding: 7px 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    cursor: grab;
    touch-action: none;
}

.parking-floor-plan-palette-item:hover:not(:disabled) {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.parking-floor-plan-palette-item[aria-pressed="true"],
.parking-floor-plan-palette-item[aria-current="true"] {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.parking-floor-plan-palette-item.is-measured {
    border-color: #0b5735;
    background: #146c43;
    color: #ffffff;
}

.parking-floor-plan-palette-item.is-measured .parking-floor-plan-palette-item-name,
.parking-floor-plan-palette-item.is-measured small,
.parking-floor-plan-palette-item.is-measured .parking-floor-plan-palette-item-state {
    color: #ffffff;
}

.parking-floor-plan-palette-item.is-measured:hover:not(:disabled) {
    border-color: #ffffff;
    box-shadow: inset 0 0 0 1px #ffffff;
}

.parking-floor-plan-palette-item svg {
    width: 58px;
    height: 46px;
    overflow: visible;
}

.parking-floor-plan-palette-item-name {
    color: var(--ink);
    font-weight: 800;
}

.parking-floor-plan-palette-item small,
.parking-floor-plan-palette-item-state {
    color: var(--ink);
    font-size: 10px;
}

.parking-floor-plan-palette-item-state {
    font-weight: 800;
}

.parking-floor-plan-stage {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.parking-floor-plan-canvas-frame {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
}

.parking-floor-plan-canvas {
    display: block;
    width: 100%;
    height: 650px;
    max-height: 72vh;
    min-height: 440px;
    background: var(--surface);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.parking-floor-plan-measures,
.parking-floor-plan-status {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.45;
}

.parking-floor-plan-status {
    min-height: 18px;
    font-weight: 700;
}

.parking-floor-plan-status[data-kind="error"] {
    color: var(--danger);
}

.parking-floor-plan-status[data-kind="success"] {
    color: var(--success, var(--ink));
}

.parking-floor-plan-status-action {
    color: var(--ink);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.parking-floor-plan-empty {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    background: var(--surface-soft, var(--surface));
}

.parking-floor-plan-empty h3,
.parking-floor-plan-empty p {
    margin: 0;
    color: var(--ink);
}

.parking-floor-plan-empty p {
    line-height: 1.5;
}

.parking-floor-plan-drag-ghost {
    position: fixed;
    z-index: 500;
    width: 70px;
    height: 56px;
    padding: 5px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 2px solid var(--brand-primary);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: 0 8px 24px #00000033;
}

.parking-floor-plan-drag-ghost svg {
    width: 100%;
    height: 100%;
}

/* Lienzo SVG */
.parking-floor-plan-site {
    fill: #ffffff;
}

.parking-floor-plan-grid {
    fill: none;
    stroke: #d7e2e5;
    stroke-width: 1;
}

.parking-floor-plan-grid-fill {
    pointer-events: none;
}

.parking-floor-plan-site-wall {
    fill: none;
    stroke: #102329;
    stroke-width: 12;
    stroke-linejoin: round;
}

.parking-floor-plan-wall-measure {
    fill: var(--ink);
    font-size: 22px;
    font-weight: 800;
    pointer-events: none;
}

.parking-floor-plan-element {
    cursor: move;
}

.parking-floor-plan-element.is-locked {
    cursor: pointer;
}

.parking-floor-plan-element-label {
    fill: var(--ink);
    stroke: var(--surface);
    stroke-width: 5px;
    paint-order: stroke;
    font-size: 20px;
    font-weight: 800;
    pointer-events: none;
}

.parking-floor-plan-icon-body,
.parking-floor-plan-icon-space {
    fill: #eff7f7;
    stroke: #102329;
    stroke-width: 3;
}

.parking-floor-plan-unit-preview,
.parking-floor-plan-unit-selection,
.parking-floor-plan-unit-preview .parking-floor-plan-icon-space,
.parking-floor-plan-unit-selection .parking-floor-plan-icon-space {
    fill: #b9f3ce;
    stroke: #146c43;
    stroke-width: 4;
}

.parking-floor-plan-unit-attributes {
    fill: var(--ink);
    stroke: var(--surface);
    stroke-width: 4px;
    paint-order: stroke;
    font-size: 16px;
    font-weight: 800;
    pointer-events: none;
}

.parking-floor-plan-icon-solid {
    fill: #51717a;
    stroke: #102329;
    stroke-width: 3;
}

.parking-floor-plan-icon-solid-line {
    fill: none;
    stroke: #102329;
    stroke-width: 8;
}

.parking-floor-plan-icon-detail,
.parking-floor-plan-icon-soft-line,
.parking-floor-plan-icon-arrow {
    fill: none;
    stroke: #102329;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.parking-floor-plan-icon-dash {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-dasharray: 16 12;
}

.parking-floor-plan-icon-road {
    fill: #8ca3aa;
    stroke: #102329;
    stroke-width: 3;
}

.parking-floor-plan-icon-mark {
    fill: #ffffff;
    stroke: #102329;
    stroke-width: 2;
}

.parking-floor-plan-icon-arrow-fill {
    fill: #087f88;
    stroke: #102329;
    stroke-width: 2;
}

.parking-floor-plan-icon-cover {
    fill: #b7edf1;
    fill-opacity: 0.72;
    stroke: #087f88;
    stroke-width: 3;
    stroke-dasharray: 10 6;
}

.parking-floor-plan-icon-area {
    fill: #ffe7a3;
    fill-opacity: 0.66;
    stroke: #9b6100;
    stroke-width: 3;
    stroke-dasharray: 10 6;
}

.parking-floor-plan-icon-warning,
.parking-floor-plan-icon-warning-fill {
    fill: none;
    stroke: #9b6100;
    stroke-width: 4;
}

.parking-floor-plan-icon-warning-fill {
    fill: #ffd166;
}

.parking-floor-plan-icon-detail-fill {
    fill: #d4e9eb;
    stroke: #102329;
    stroke-width: 2;
}

.parking-floor-plan-icon-stop {
    fill: #d12c45;
    stroke: #102329;
    stroke-width: 2;
}

.parking-floor-plan-icon-go {
    fill: #198754;
    stroke: #102329;
    stroke-width: 2;
}

.parking-floor-plan-selection-box {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 3;
    stroke-dasharray: 10 7;
}

.parking-floor-plan-selection-line {
    stroke: var(--brand-primary);
    stroke-width: 3;
}

.parking-floor-plan-handle,
.parking-floor-plan-site-corner {
    fill: var(--surface);
    stroke: var(--brand-primary);
    stroke-width: 3;
    cursor: pointer;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle="resize"] {
    cursor: nwse-resize;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle^="resize-"] {
    r: 20px;
    transform-box: fill-box;
    transform-origin: center;
    transition: r 140ms ease, stroke-width 140ms ease;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle="resize-nw"],
.parking-floor-plan-handle[data-parking-floor-plan-handle="resize-se"] {
    cursor: nwse-resize;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle="resize-ne"],
.parking-floor-plan-handle[data-parking-floor-plan-handle="resize-sw"] {
    cursor: nesw-resize;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle^="resize-"]:hover,
.parking-floor-plan-handle[data-parking-floor-plan-handle^="resize-"]:focus-visible {
    r: 24px;
    stroke-width: 5;
    outline: none;
}

.parking-floor-plan-handle[data-parking-floor-plan-handle="rotate"] {
    cursor: grab;
}

.parking-floor-plan-site-corner {
    cursor: move;
}

.parking-floor-plan-lock-mark {
    fill: var(--danger);
    stroke: var(--surface);
    stroke-width: 3;
}

html[data-theme="dark"] .parking-floor-plan-palette-column,
html[data-theme="dark"] .parking-floor-plan-empty,
html[data-theme="dark"] .parking-floor-plan-drag-ghost {
    background: #11191c;
    border-color: #53656d;
}

html[data-theme="dark"] .parking-floor-plan-recovery {
    border-color: #ffd166;
    background: #332200;
}

html[data-theme="dark"] .parking-floor-plan-blocked-notice {
    background: #2d0e13;
}

html[data-theme="dark"] .parking-floor-plan-context-button,
html[data-theme="dark"] .parking-floor-plan-attribute-option,
html[data-theme="dark"] .parking-floor-plan-palette-item,
html[data-theme="dark"] .parking-floor-plan-search-label input {
    background: #121a1e;
    border-color: #53656d;
    color: var(--ink);
}

html[data-theme="dark"] .parking-floor-plan-attribute-option[aria-pressed="true"] {
    border-color: #6ee1e8;
    background: #075f66;
    color: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-palette-item.is-measured {
    border-color: #72e6a4;
    background: #0b5735;
    color: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-palette-item.is-measured .parking-floor-plan-palette-item-name,
html[data-theme="dark"] .parking-floor-plan-palette-item.is-measured small,
html[data-theme="dark"] .parking-floor-plan-palette-item.is-measured .parking-floor-plan-palette-item-state {
    color: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-palette-group {
    background: #182328;
    border-color: #53656d;
}

html[data-theme="dark"] .parking-floor-plan-canvas-frame,
html[data-theme="dark"] .parking-floor-plan-canvas {
    background: #10181b;
    border-color: #53656d;
}

html[data-theme="dark"] .parking-floor-plan-site {
    fill: #162125;
}

html[data-theme="dark"] .parking-floor-plan-grid {
    stroke: #2b3d43;
}

html[data-theme="dark"] .parking-floor-plan-site-wall {
    stroke: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-element-label {
    fill: var(--ink);
    stroke: #162125;
}

html[data-theme="dark"] .parking-floor-plan-icon-body,
html[data-theme="dark"] .parking-floor-plan-icon-space,
html[data-theme="dark"] .parking-floor-plan-icon-detail-fill {
    fill: #26383e;
    stroke: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-unit-preview,
html[data-theme="dark"] .parking-floor-plan-unit-selection,
html[data-theme="dark"] .parking-floor-plan-unit-preview .parking-floor-plan-icon-space,
html[data-theme="dark"] .parking-floor-plan-unit-selection .parking-floor-plan-icon-space {
    fill: #146c43;
    stroke: #72e6a4;
}

html[data-theme="dark"] .parking-floor-plan-icon-solid {
    fill: #6f8991;
    stroke: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-icon-solid-line,
html[data-theme="dark"] .parking-floor-plan-icon-detail,
html[data-theme="dark"] .parking-floor-plan-icon-soft-line,
html[data-theme="dark"] .parking-floor-plan-icon-arrow {
    stroke: #ffffff;
}

html[data-theme="dark"] .parking-floor-plan-handle,
html[data-theme="dark"] .parking-floor-plan-site-corner {
    fill: #0d5962;
    stroke: #6ee1e8;
}

html[data-theme="dark"] .parking-floor-plan-selection-box,
html[data-theme="dark"] .parking-floor-plan-selection-line {
    stroke: #6ee1e8;
}

@media (max-width: 760px) {
    .parking-floor-plan-save {
        width: 100%;
    }

    .parking-floor-plan-save-row {
        display: grid;
    }

    .parking-floor-plan-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .parking-floor-plan-palette-column {
        grid-column: auto;
    }

    .parking-floor-plan-palette {
        max-height: 360px;
    }

    .parking-floor-plan-palette-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .parking-floor-plan-canvas {
        height: 520px;
        min-height: 360px;
    }
}

@media (max-width: 460px) {
    .parking-floor-plan-palette-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vehicle-period-rate.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}

[data-vehicle-modal] .vehicle-period-rate input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(194, 61, 66, 0.18);
}

html[data-theme="dark"] .app-shell [data-vehicle-modal] .vehicle-period-rate input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(240, 100, 106, 0.22);
}

.vehicle-period-rate.is-invalid small {
    color: var(--danger);
}

.dialog-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.variable-ipc-view-filters {
    grid-template-columns: minmax(160px, 220px);
    align-items: end;
}

.ipc-view-status {
    min-height: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.ipc-view-table-wrap {
    max-height: min(58vh, 520px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.ipc-view-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #fff;
}

.ipc-view-table th,
.ipc-view-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
}

.ipc-view-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    font-weight: 800;
}

.ipc-view-table tbody tr:last-child td {
    border-bottom: 0;
}

.ipc-view-table td:first-child,
.ipc-view-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    font-weight: 800;
}

.ipc-view-table th:first-child {
    z-index: 3;
    background: var(--surface-soft);
}

.ipc-view-empty {
    color: var(--muted);
}

.ipc-view-loaded {
    color: var(--ink);
    font-weight: 800;
}

.ipc-view-upcoming {
    background: #fff7d6;
    color: #7c4a03;
    font-weight: 800;
}

.floor-list {
    display: grid;
    gap: 8px;
}

.floor-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.floor-list-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    gap: 8px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.floor-list-columns::after {
    content: "";
    width: 68px;
}

.floor-list-columns.is-zone-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.floor-list-row.is-entry-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
}

.floor-list-row.is-zone-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.floor-list-name,
.floor-list-address,
.floor-list-relation {
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.floor-list-address {
    color: var(--ink);
    font-weight: 600;
}

.floor-list-relation {
    color: var(--ink);
    font-weight: 600;
}

.floor-list-address.is-empty,
.floor-list-relation.is-empty {
    color: var(--muted);
    font-style: italic;
}

.floor-list-empty {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
}

.floor-setup-form {
    align-items: start;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 14px;
}

.floor-setup-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.floor-setup-grid-heading,
.floor-setup-section {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.72fr) repeat(var(--floor-vehicle-count, 1), minmax(170px, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
    min-width: max-content;
}

.floor-setup-grid-heading {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.floor-setup-vehicle-group-heading {
    grid-column: 3 / -1;
}

.floor-setup-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.floor-setup-section:last-child {
    border-bottom: 0;
}

.floor-setup-vehicle-counts {
    display: contents;
}

.floor-setup-vehicle-count {
    display: grid;
    gap: 7px;
    align-content: end;
    box-sizing: border-box;
    min-width: 0;
}

.floor-setup-name-field,
.floor-setup-total-field {
    display: grid;
    align-content: end;
    box-sizing: border-box;
    min-width: 0;
    padding-top: 24px;
}

.floor-setup-vehicle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.floor-setup-vehicle-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floor-setup-vehicle-name strong {
    color: var(--brand-primary);
}

.floor-setup-ratio {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(109, 40, 217, 0.2);
    border-radius: 999px;
    background: rgba(109, 40, 217, 0.08);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.entry-form .floor-setup-help {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    border: 0;
    cursor: pointer;
}

.floor-setup-vehicle-count.is-disabled {
    opacity: 1;
}

.floor-setup-form input {
    height: 44px;
}

.button:disabled {
    cursor: default;
    opacity: 1;
}

.increment-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.increment-mode-grid[hidden] {
    display: none;
}

.increment-mode-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.increment-mode-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: #eef8f9;
}

.increment-mode-option input {
    margin-top: 3px;
}

.increment-mode-option span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.increment-mode-option strong {
    color: var(--ink);
}

.increment-mode-option small,
.increment-source {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.variable-increment-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.variable-increment-modal:not(.is-ipc-mode) [data-variable-ipc-control],
.variable-increment-modal.is-ipc-mode [data-variable-fixed-control] {
    display: none;
}

.increment-ipc-summary {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    align-self: end;
    min-width: 0;
    display: grid;
    grid-column: 1 / -1;
    gap: 6px;
}

.increment-ipc-summary strong {
    color: var(--ink);
    font-size: 13px;
}

.increment-ipc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.increment-ipc-list span {
    padding: 5px 8px;
    border: 1px solid #cfe3e7;
    border-radius: 8px;
    background: #f4fbfc;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.increment-example {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #cfe3e7;
    border-radius: 8px;
    background: #f4fbfc;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.increment-example-summary,
.increment-example-empty {
    margin: 0;
}

.increment-example-summary {
    font-size: 17px;
    font-weight: 800;
}

.increment-example-empty {
    color: var(--muted);
    font-weight: 600;
}

.increment-example-list {
    display: grid;
    gap: 8px;
}

.increment-example-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, auto) minmax(150px, auto);
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(109, 40, 217, 0.12);
    border-radius: 8px;
    background: #fff;
}

.increment-example-row strong,
.increment-example-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.increment-example-row span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.increment-example-row span:last-child {
    color: var(--ink);
}

.increment-source {
    margin: 0;
    word-break: break-word;
}

.payment-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
}

.payment-detail-main {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.payment-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payment-detail-grid article {
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.payment-detail-grid span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.payment-detail-grid strong {
    color: var(--ink);
    font-size: 20px;
}

.payment-detail-grid article[data-payment-detail-status-card][data-payment-status="paid"] {
    border: 2px solid #078557;
    background: #c9f1df;
    box-shadow: inset 6px 0 0 #078557;
}

.payment-detail-grid article[data-payment-detail-status-card][data-payment-status="unpaid"] {
    border: 2px solid #b42332;
    background: #fbe1e5;
    box-shadow: inset 6px 0 0 #b42332;
}

.payment-detail-grid article[data-payment-detail-status-card][data-payment-status]:is([data-payment-status="paid"], [data-payment-status="unpaid"]) :is(span, strong) {
    color: #000000;
}

.payment-movements-table .payment-movement-row {
    cursor: pointer;
}

.payment-movements-table .payment-movement-row td {
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.payment-movements-table .payment-movement-row:not(.is-selected):hover td {
    background: #edf8f9;
    color: #000000;
}

.payment-movements-table .payment-movement-row.is-selected td {
    border-top: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    background: #6D28D9;
    color: #ffffff;
    font-weight: 800;
}

.payment-movements-table .payment-movement-row.is-selected td:first-child {
    border-left: 2px solid var(--brand-primary);
    box-shadow: inset 6px 0 0 var(--brand-primary);
}

.payment-movements-table .payment-movement-row.is-selected td:last-child {
    border-right: 2px solid var(--brand-primary);
}

.payment-movements-table .payment-movement-row.is-selected:hover td {
    background: #004f59;
    color: #ffffff;
}

.payment-movement-choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: max-content;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.payment-movement-choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-primary);
}

.payment-movement-choice input:focus-visible {
    outline: 3px solid var(--brand-neutral);
    outline-offset: 3px;
}

.payment-movements-table .payment-movement-row.is-selected .payment-movement-choice input:focus-visible {
    outline-color: #ffffff;
}

.payment-preview-panel {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.payment-preview-panel[hidden] {
    display: none;
}

.payment-register-filter[hidden] {
    display: none !important;
}

.payment-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.payment-preview-header::-webkit-details-marker {
    display: none;
}

.payment-preview-header::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--ink);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.payment-preview-panel[open] .payment-preview-header::after {
    transform: rotate(225deg);
}

.payment-preview-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-preview-header strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-pdf-preview {
    display: grid;
    place-items: center;
    min-height: 520px;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background: #f8fafb;
}

.payment-preview-panel:not(.has-pdf) .payment-pdf-preview {
    min-height: 120px;
}

.payment-pdf-preview iframe {
    width: 100%;
    height: 100%;
    min-height: 640px;
    border: 0;
    background: #fff;
}

.payment-editor-form {
    display: grid;
    gap: 16px;
}

.entry-form option.payment-caja-add-option,
html[data-theme="dark"] .entry-form option.payment-caja-add-option {
    background: #bbf7d0;
    color: #14532d;
    font-weight: 800;
}

.payment-caja-modal {
    z-index: 100;
}

.payment-caja-panel {
    align-self: center;
    width: min(440px, 100%);
}

.record-modal.payment-caja-modal {
    align-items: center;
}

.payment-caja-form {
    display: grid;
    gap: 16px;
}

.payment-caja-form label {
    display: grid;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

.payment-caja-form input {
    width: 100%;
}

.payment-caja-form .form-error {
    margin: 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
}

.payment-editor-summary {
    margin: 0;
}

.payment-lines {
    display: grid;
    gap: 14px;
}

.payment-add-line-row {
    display: flex;
    justify-content: flex-start;
}

.payment-add-button {
    gap: 8px;
}

.payment-line {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.payment-line legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    color: var(--brand-primary);
    font-weight: 800;
}

body.modal-open {
    overflow: hidden;
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.public-parking-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.public-header p,
.public-header small {
    color: var(--muted);
}

.public-page {
    min-height: 100vh;
    background: var(--bg);
}

.public-shell {
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 32px 18px;
}

.public-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.public-header-content {
    min-width: 0;
    width: 100%;
}

.public-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.public-header h1 {
    margin: 2px 0 6px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.public-header p,
.public-header small {
    display: block;
    margin: 0;
}

.public-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 2px;
}

.public-location-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.public-location-text small {
    min-width: 0;
}

.public-map-link {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.public-map-link:hover,
.public-map-link:focus-visible {
    background: transparent;
    color: #1d4ed8;
    text-decoration: underline;
}

.public-whatsapp-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 16px;
}

.public-map-panel {
    display: grid;
    gap: 16px;
}

.public-map-panel .panel-header {
    align-items: center;
}

.public-map-panel .panel-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.public-map-canvas {
    width: 100%;
    min-height: min(56vh, 520px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.public-panel {
    margin-top: 0;
}

.public-owner-preview {
    margin-top: 18px;
}

.public-price-form {
    display: block;
    overflow: visible;
}

.public-price-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) repeat(2, minmax(230px, 1fr)) minmax(140px, 0.55fr);
    gap: 12px;
    align-items: end;
    overflow: visible;
}

.public-price-grid label,
.public-price-grid .public-date-time-field {
    display: grid;
    gap: 8px;
    color: #000;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.public-price-grid input,
.public-price-grid select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 14px;
    font-weight: 600;
}

.public-date-time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px;
}

.public-price-form.is-cyclic-mode .public-date-time {
    grid-template-columns: minmax(0, 1fr);
}

.public-price-form.is-cyclic-mode .public-date-time .public-time24,
.public-price-form [data-public-simple-time-field][hidden] {
    display: none !important;
}

.public-date-time-field {
    min-width: 0;
}

.public-date-time-field > .field-label-line {
    justify-content: space-between;
}

.public-price-grid button {
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.public-price-result {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(240px, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.public-price-result strong {
    display: block;
    margin: 4px 0;
    color: var(--brand-primary);
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1;
}

.public-price-result span {
    color: var(--muted);
    font-weight: 700;
}

.public-price-summary {
    display: grid;
    align-content: center;
    gap: 7px;
}

.public-price-detail {
    grid-column: 1 / -1;
}

.public-price-detail tr.is-total td {
    border-top: 2px solid rgba(126, 34, 206, 0.36);
    font-weight: 900;
}

.public-price-detail table :is(th, td).public-discount-column {
    border-left: 1px solid rgba(140, 234, 242, 0.34);
    border-right: 1px solid rgba(140, 234, 242, 0.34);
    background: #6d28d9 !important;
    color: #ffffff !important;
    font-weight: 900;
}

.public-price-detail table tr.is-total .public-discount-column {
    background: #0d7240 !important;
    color: #ffffff !important;
}

.public-page .notice {
    margin-bottom: 16px;
}

.public-page .public-shell {
    width: min(100%, 1180px);
}

.public-site {
    --public-accent: #7E22CE;
    --public-accent-strong: #5b21b6;
    --public-bg: #faf5ff;
    --public-surface: #ffffff;
    --public-soft: #f3e8ff;
    --public-ink: #000000;
    --public-muted: #000000;
    display: grid;
    gap: 18px;
    color: var(--public-ink);
}

.public-template-urbana {
    --public-accent: #d9a441;
    --public-accent-strong: #8a5b11;
    --public-bg: #15191f;
    --public-surface: #222832;
    --public-soft: #2f3844;
    --public-ink: #ffffff;
    --public-muted: #ffffff;
}

.public-template-mapa {
    --public-accent: #146b4f;
    --public-accent-strong: #0b4a38;
    --public-bg: #eef7f1;
    --public-surface: #ffffff;
    --public-soft: #dcefe5;
    --public-ink: #000000;
    --public-muted: #000000;
}

.public-template-compacta {
    --public-accent: #b93848;
    --public-accent-strong: #8f2634;
    --public-bg: #f8f7f3;
    --public-surface: #ffffff;
    --public-soft: #efe8de;
    --public-ink: #000000;
    --public-muted: #000000;
}

.public-site-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 20px;
    align-items: stretch;
    min-height: 520px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 20%, transparent);
    border-radius: 8px;
    background: var(--public-bg);
}

.public-template-compacta .public-site-hero {
    min-height: 420px;
    grid-template-columns: minmax(0, 1fr);
}

.public-template-mapa .public-site-hero {
    grid-template-columns: minmax(320px, 0.76fr) minmax(420px, 1.24fr);
}

.public-site-copy,
.public-site-visual {
    min-width: 0;
}

.public-site-copy {
    display: grid;
    align-content: center;
    gap: 18px;
}

.public-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--public-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.public-site-copy h1 {
    margin: 0;
    color: var(--public-ink);
    font-size: clamp(38px, 7vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.public-site-copy p {
    max-width: 620px;
    margin: 0;
    color: var(--public-muted);
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.45;
}

.public-hero-actions,
.public-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.public-hero-stats span,
.public-site-grid article,
.public-rate-list article {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 18%, transparent);
    border-radius: 8px;
    background: var(--public-surface);
    color: var(--public-ink);
}

.public-hero-stats strong,
.public-site-grid strong,
.public-rate-list strong {
    color: var(--public-accent);
    font-size: 24px;
    line-height: 1;
}

.public-site-visual {
    min-height: 360px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--public-soft);
}

.public-site-visual img,
.public-hero-map {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.public-site-grid,
.public-rate-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.public-site-grid span,
.public-rate-list span,
.public-site-contact span,
.public-section-head span {
    color: var(--public-accent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-site-section,
.public-site-contact,
.public-price-result {
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 16%, transparent);
    border-radius: 8px;
    background: var(--public-surface);
    color: var(--public-ink);
}

.public-section-head {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
}

.public-section-head h2,
.public-site-contact h2 {
    margin: 0;
    color: var(--public-ink);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
}

.public-section-head p,
.public-site-contact p,
.public-rate-list small {
    margin: 0;
    color: var(--public-muted);
}

.public-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-chip-list span {
    padding: 10px 13px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 22%, transparent);
    border-radius: 8px;
    background: var(--public-soft);
    color: var(--public-ink);
    font-weight: 800;
}

.public-rates-section {
    display: grid;
    gap: 16px;
}

.public-price-grid {
    grid-template-columns: minmax(180px, 0.8fr) repeat(2, minmax(230px, 1fr)) minmax(140px, 0.55fr);
}

.public-price-grid input,
.public-price-grid select {
    border-color: color-mix(in srgb, var(--public-accent) 24%, var(--line));
}

.public-price-grid button,
.public-site .button:not(.button-neutral) {
    background: var(--public-accent);
}

.public-site .button:not(.button-neutral):hover,
.public-price-grid button:hover {
    background: var(--public-accent-strong);
}

.public-price-result {
    align-items: center;
}

.public-price-result strong {
    color: var(--public-accent);
}

.public-map-panel {
    gap: 14px;
}

.public-site-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.public-template-compacta .public-site-grid,
.public-template-compacta .public-rate-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-page-admin-panel {
    display: grid;
    gap: 16px;
}

.public-page-builder-parking details.public-page-admin-panel:not([open]) {
    gap: 0;
}

.public-page-config-form {
    align-items: start;
}

.public-template-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.public-template-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 112px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.public-template-option.is-selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.12);
}

.public-template-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.public-page-admin-meta {
    display: flex;
    justify-content: flex-end;
}

.public-page-preview-panel {
    overflow: hidden;
}

.public-page-owner-preview {
    margin-top: 0;
}

.public-page-builder {
    position: relative;
    display: grid;
    margin-top: 18px;
    gap: 14px;
}

.public-page-form-shell {
    display: grid;
    gap: 14px;
}

.public-page-form-shell > .panel.collapsible-panel {
    margin-top: 0;
}

.public-builder-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1fr);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(126, 34, 206, 0.22);
    border-radius: 8px;
    background: #102329;
    color: #ffffff;
}

.public-builder-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    min-width: 0;
    padding: clamp(24px, 4vw, 44px);
}

.public-builder-copy .eyebrow {
    color: #65c9d4;
}

.public-builder-link-editor {
    display: grid;
    grid-template-columns: minmax(260px, 680px) auto auto auto;
    gap: 12px;
    align-items: end;
}

.public-builder-link-editor label {
    display: grid;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-link-subdomain-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(5, 15, 18, 0.72);
}

.public-link-subdomain-field input {
    width: 100%;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.public-link-subdomain-field input[readonly] {
    cursor: default;
}

.public-link-subdomain-field input:not([readonly]) {
    background: rgba(255, 255, 255, 0.08);
    outline: 2px solid rgba(138, 231, 239, 0.36);
    outline-offset: -2px;
}

.public-link-subdomain-field > span {
    padding: 0 16px;
    color: #D8B4FE;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.public-link-path-field {
    grid-template-columns: auto minmax(0, 1fr);
}

.public-builder-copy h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: 0;
}

.public-builder-copy p:not(.eyebrow) {
    max-width: 660px;
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.45;
}

.public-builder-link-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.public-builder-link-row input {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0 14px;
    font-weight: 800;
}

.public-builder-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.public-builder-stats span {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    font-weight: 700;
}

.public-builder-stats strong {
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
}

.public-builder-image {
    min-width: 0;
    min-height: 430px;
    position: relative;
}

.public-builder-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 35, 41, 0.55), rgba(16, 35, 41, 0));
    pointer-events: none;
}

.public-builder-image img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.public-page-builder-parking .public-builder-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.58fr);
    min-height: 0;
    background:
        radial-gradient(circle at 12% 12%, rgba(101, 201, 212, 0.18), transparent 34%),
        linear-gradient(135deg, #0b242a 0%, #102f35 56%, #172f2d 100%);
}

.public-page-builder-parking .public-builder-copy {
    padding: clamp(24px, 3vw, 38px);
}

.public-builder-share {
    display: grid;
    align-content: center;
    gap: 14px;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(4, 15, 19, 0.28);
}

.public-builder-qr-section {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.public-builder-qr-section .public-link-qr-title {
    color: #D8B4FE;
}

.public-builder-qr-section .public-link-qr-frame {
    width: min(100%, 220px);
    padding: 14px;
    border-radius: 8px;
    background: #ffffff;
}

.public-builder-qr-section .public-link-qr {
    width: 100%;
}

.public-builder-qr-section .actions-row {
    justify-content: flex-start;
}

.public-builder-share .public-builder-data {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.public-builder-share .public-builder-data span {
    color: #D8B4FE;
}

.public-builder-share .public-builder-data strong {
    color: #ffffff;
}

.public-builder-share .public-builder-data small {
    color: #ffffff;
}

.public-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 18px;
    align-items: start;
}

.public-page-builder-parking .public-builder-grid {
    grid-template-columns: minmax(0, 1fr);
}

.public-builder-panel-header {
    padding-bottom: 0;
}

.public-page-config-form {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 0.85fr) minmax(320px, 1.2fr);
    gap: 16px;
}

.public-page-config-form > .public-config-disclosure {
    grid-column: 1 / -1;
}

.public-page-config-fields {
    display: grid;
    grid-column: 1 / -1;
    gap: 16px;
    min-width: 0;
}

.public-page-config-fields > .public-config-disclosure {
    grid-column: 1 / -1;
}

.public-page-config-form .public-template-picker {
    grid-column: 1 / -1;
}

.public-page-owner-preview:not(.is-public-preview-ready) [data-public-template-stage] > .public-site > [data-public-block]:not([data-public-block~="portada"]) {
    display: none !important;
}

.public-config-disclosure {
    display: block;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.public-config-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.public-config-disclosure > summary::-webkit-details-marker {
    display: none;
}

.public-config-disclosure > summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #edf7f8;
    color: var(--brand-primary);
    font-size: 20px;
    line-height: 1;
}

.public-config-disclosure > .collapsible-summary {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
}

.public-config-disclosure > .collapsible-summary::after {
    content: none;
    display: none;
}

.public-config-disclosure[open] > summary {
    border-bottom: 1px solid var(--line);
}

.public-config-disclosure[open] > summary::after {
    content: "-";
}

.public-config-disclosure[open] > .collapsible-summary {
    border-bottom: 0;
}

.public-config-disclosure > :not(summary) {
    margin: 16px;
}

.public-page-config-form > button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 448px);
    min-width: 220px;
}

.public-page-config-form textarea {
    min-height: 150px;
    resize: vertical;
}

.public-char-counter {
    justify-self: end;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.public-page-config-form textarea.is-over-limit {
    border-color: #c63d45;
}

.public-template-picker {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
}

.public-template-option {
    --template-accent: #6fd4e5;
    --template-shadow: rgba(13, 74, 81, 0.18);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
    min-height: 310px;
    gap: 12px;
    padding: 14px;
    overflow: hidden;
    cursor: default;
    text-transform: none;
}

.public-template-option[hidden] {
    display: none !important;
}

.public-template-option > .public-template-choice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
    min-width: 0;
    color: inherit;
    cursor: pointer;
    text-transform: none;
}

.public-template-option input {
    grid-row: 2;
}

.public-template-choice > .public-template-real-thumbnail {
    display: block;
    grid-column: 1 / -1;
    gap: 0;
}

.public-template-preview {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--template-accent) 45%, transparent);
    border-radius: 8px;
    background: #071114;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 28px var(--template-shadow);
}

.public-template-preview-sheet {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease;
}

.public-template-preview-sheet.is-active {
    opacity: 1;
    visibility: visible;
}

.public-template-preview-sheet > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-template-preview-pagination {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 16px);
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(3, 14, 18, 0.82);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.public-template-preview.is-preview-active .public-template-preview-pagination {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .public-template-preview-sheet {
        transition: none;
    }
}

.public-template-option-clasica {
    --template-accent: #5F7A4A;
    --template-shadow: rgba(160, 106, 69, 0.2);
}

.public-template-option-urbana {
    --template-accent: #f2c35f;
    --template-shadow: rgba(122, 45, 22, 0.22);
}

.public-template-option-mapa {
    --template-accent: #3A7FA3;
    --template-shadow: rgba(79, 175, 142, 0.2);
}

.public-template-option-compacta {
    --template-accent: #ff9dab;
    --template-shadow: rgba(189, 90, 106, 0.18);
}

.public-template-option-nocturna {
    --template-accent: #56c6ff;
    --template-shadow: rgba(16, 45, 107, 0.24);
}

.public-template-option-coral {
    --template-accent: #f2b35f;
    --template-shadow: rgba(143, 61, 33, 0.2);
}

.public-template-copy {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.public-template-copy strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.15;
    text-transform: none;
}

.public-template-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.public-template-visualize {
    justify-self: stretch;
    width: 100%;
    min-height: 42px;
    margin-top: auto;
}

.public-block-picker {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
}

.public-block-builder {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
}

.public-block-sequence {
    display: grid;
    gap: 13px;
}

.public-block-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-block-picker-head strong {
    color: var(--ink);
    font-size: 15px;
}

.public-block-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
}

.public-block-fixed-row,
.public-block-order-list {
    display: grid;
    gap: 13px;
}

/* Cada bloque se lee como los subdesplegables de «Información del
   Estacionamiento»: mismo alto, mismo radio y el mismo par borde/fondo que la
   cabecera cerrada de esas tarjetas. */
.public-block-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 118px;
    padding: 12px;
    border: 1px solid #d7e4e8;
    border-radius: 12px;
    background: #f6fafb;
    cursor: pointer;
    text-transform: none;
}

.public-page-builder-parking .public-block-option[hidden],
.public-page-builder-parking .public-block-option.is-template-hidden {
    display: none !important;
}

.public-block-option.is-enabled {
    border-color: #d7e4e8;
    background: #f6fafb;
    box-shadow: none;
}

.public-block-option.is-disabled {
    background: #f4f7f7;
    opacity: 1;
}

.public-block-option[data-public-block-option="precio_disponibilidad"].is-disabled {
    border-color: #d7e4e8;
    background: #f6fafb;
    opacity: 1;
    box-shadow: none;
}

.public-block-option.is-editing {
    border-color: #22b8c7;
    background: #087985;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(34, 184, 199, 0.18);
}

.public-block-option.is-editing :is(strong, small),
.public-block-option.is-editing .public-block-fixed-label,
.public-block-option.is-editing .public-block-drag-handle {
    color: #ffffff;
}

.public-block-option.is-editing .public-block-number {
    background: #D8B4FE;
    color: #000000;
}

/* El alto, el padding y el ancho de los controles de la derecha son los de la
   cabecera de un subdesplegable (58px de mínimo, 16/18 de padding y un control
   de 34px), para que las dos listas se lean como la misma tarjeta. */
.public-block-builder .public-block-option {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 58px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
}

.public-block-option-fixed {
    cursor: pointer;
}

.public-block-builder .public-block-option-fixed {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.public-block-builder .public-block-number {
    min-width: 34px;
    height: 34px;
}

/* Sin descripción debajo, el título toma el cuerpo del .collapsible-heading de
   los subdesplegables. */
.public-block-builder .public-block-option strong {
    font-size: 17px;
    line-height: 1.2;
}

.public-block-option.is-dragging {
    opacity: 0.54;
    transform: scale(0.99);
}

.public-block-number {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border-radius: 8px;
    background: #e3eef0;
    color: #000000;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.public-block-option.is-disabled .public-block-number {
    background: #d8e4e6;
    color: #000000;
    font-size: 11px;
}

.public-block-option[data-public-block-option="precio_disponibilidad"].is-disabled .public-block-number {
    background: #e3eef0;
    color: #000000;
    font-size: 14px;
}

.public-block-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.public-block-drag-handle,
.public-block-fixed-label {
    justify-self: end;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.public-block-drag-handle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(126, 34, 206, 0.08);
    color: var(--brand-primary);
    cursor: grab;
    touch-action: none;
}

.public-block-drag-handle[hidden] {
    display: none;
}

.public-block-drag-handle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.public-block-drag-handle:hover,
.public-block-drag-handle:focus-visible {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.14);
    outline: 3px solid rgba(34, 184, 199, 0.24);
    outline-offset: 2px;
}

.public-block-drag-handle:active,
.public-block-option.is-dragging .public-block-drag-handle {
    cursor: grabbing;
}

.public-block-option:focus-visible {
    outline: 3px solid rgba(34, 184, 199, 0.28);
    outline-offset: 2px;
}

.public-block-visibility-toggle {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    justify-self: start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.public-block-visibility-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.public-block-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.public-block-option strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.15;
}

.public-block-option small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.public-block-order-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: end;
}

.public-block-order-controls .mini-button {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    line-height: 1;
}

.public-block-editors {
    display: grid;
    gap: 14px;
}

.public-block-editors > .public-block-editor.collapsible-panel {
    margin-bottom: 0;
}

.public-block-editors > .public-block-editor.collapsible-panel ~ .public-block-editor.collapsible-panel {
    margin-top: 0;
}

.public-block-editor {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
    margin: 0 0 4px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfb;
}

.public-block-editor[hidden] {
    display: none;
}

/* Portada va sin tarjeta: ni la línea que la enmarcaba ni el fondo propio, así
   que los rótulos arrancan alineados con las filas de bloques de arriba. La
   variante oscura se repite porque la regla de 13-publica-5.css pinta
   `.public-block-editor` con más especificidad. */
.public-page-builder-parking .public-block-editor[data-public-block-editor="portada"],
html[data-theme="dark"] .app-shell .public-page-builder-parking .public-block-editor[data-public-block-editor="portada"] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.public-block-editor > summary {
    display: none;
}

.public-block-editor h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.15;
}

.public-block-editor p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}

.public-block-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.public-page-builder-parking .public-block-editor-grid > label,
.public-page-builder-parking .public-block-editor-grid > .public-short-text-field,
.public-page-builder-parking .public-mars-merged-fields > label {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.public-page-builder-parking .public-block-editor-grid > label > :is(input, select, textarea),
.public-page-builder-parking .public-block-editor-grid > .public-short-text-field > textarea,
.public-page-builder-parking .public-mars-merged-fields > label > :is(input, select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.45;
    box-shadow: inset 0 1px 2px rgba(43, 47, 51, 0.08);
}

.public-page-builder-parking .public-block-editor-grid > label > textarea,
.public-page-builder-parking .public-block-editor-grid > .public-short-text-field > textarea,
.public-page-builder-parking .public-mars-merged-fields > label > textarea {
    resize: vertical;
}

.public-page-builder-parking .public-block-editor-grid > label > :is(input, select, textarea):focus,
.public-page-builder-parking .public-block-editor-grid > .public-short-text-field > textarea:focus,
.public-page-builder-parking .public-mars-merged-fields > label > :is(input, select, textarea):focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.18);
    outline-offset: 1px;
}

.public-block-editor-grid .span-2 {
    grid-column: 1 / -1;
}

.public-block-example-slot {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
}

.public-block-example-slot.has-inline-preview {
    margin-top: 4px;
}

.public-block-inline-preview.public-page-owner-preview {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(7, 31, 36, 0.1);
}

.public-page-builder-parking
    .public-block-editor[data-public-block-editor="calculo"]
    .public-block-example-slot.has-inline-preview:has(.public-price-grid-single-time),
.public-page-builder-parking
    .public-block-editor[data-public-block-editor="calculo"]
    .public-block-inline-preview.public-page-owner-preview:has(.public-price-grid-single-time) {
    overflow: visible;
}

.public-page-builder-parking
    .public-page-owner-preview
    .public-template-clasica
    .public-price-grid.public-price-grid-single-time {
    grid-template-columns:
        minmax(250px, 1.15fr)
        repeat(2, minmax(185px, 0.75fr))
        minmax(150px, 0.62fr)
        minmax(180px, 0.78fr);
}

@media (max-width: 1120px) {
    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-clasica
        .public-price-grid.public-price-grid-single-time {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-clasica
        .public-price-grid.public-price-grid-single-time {
        grid-template-columns: 1fr;
    }
}

/* Un solo Guardar para toda la página: va afuera de los bloques, debajo del
   último (Footer) y contra el borde derecho. */
.public-page-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.public-block-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--brand-primary);
    border-radius: 10px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.public-block-save-button:hover {
    color: #ffffff;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.28);
}

.public-block-save-button:focus-visible {
    color: #ffffff;
    outline: 3px solid rgba(109, 40, 217, 0.24);
    outline-offset: 3px;
}

.public-block-save-button:active {
    transform: translateY(0);
}

.public-block-inline-preview [data-public-template-stage] {
    display: block;
}

.public-block-inline-preview [data-public-template-stage] > .public-site {
    min-height: 0;
}

.public-block-inline-preview .public-design-banner {
    min-height: 76px;
    padding: 16px 24px;
}

.public-block-inline-preview .public-design-banner h2 {
    font-size: clamp(22px, 2.4vw, 30px);
}

.public-block-inline-preview .public-design :is(.visual-footer, .urban-footer, .map-footer, .direct-footer) {
    padding: 24px 24px 14px;
}

/* La preview achica el padding del footer, así que el CTA integrado necesita
   márgenes negativos a esa medida para seguir llegando de punta a punta. */
.public-block-inline-preview .public-template-clasica .visual-footer .public-footer-cta.public-design-banner {
    margin: -24px -24px 0;
}

.public-block-inline-preview .public-footer-grid {
    gap: 22px;
}

.public-block-inline-preview .public-footer-logo-row strong {
    font-size: 32px;
}

.public-footer-social-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-blog-editor-items {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.public-blog-compose {
    width: 100%;
    min-width: 0;
    padding-top: 12px;
}

.public-blog-selector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.public-blog-new-entry,
.public-blog-edit-form {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.public-blog-selector-head > strong {
    color: var(--ink);
    font-size: 14px;
    text-transform: uppercase;
}

.public-blog-selector-head small {
    color: var(--muted);
    font-weight: 700;
}

.public-blog-title-field {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-weight: 800;
}

.public-blog-title-field > :is(input, textarea) {
    width: 100%;
}

.public-blog-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-blog-editor .public-blog-item-actions .mini-button:not(:disabled),
.public-blog-editor .public-blog-item-actions .mini-button:not(:disabled):hover,
.public-blog-editor .public-blog-item-actions .mini-button:not(:disabled):focus-visible,
.public-blog-editor .public-blog-modal-save-button,
.public-blog-editor .public-blog-modal-save-button:hover,
.public-blog-editor .public-blog-modal-save-button:focus-visible {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
    filter: none;
}

.public-blog-editor .public-blog-item-actions .mini-button:focus-visible,
.public-blog-editor .public-blog-modal-save-button:focus-visible {
    outline: 3px solid rgba(126, 34, 206, 0.24);
    outline-offset: 2px;
}

.public-blog-editor .public-blog-item-actions .mini-button:disabled {
    border-color: #b5c2c7;
    background: #e2e8eb;
    color: #000000;
    cursor: default;
    opacity: 1;
}

.public-blog-next-block-button[hidden] {
    display: none;
}

.public-blog-editor .public-blog-edit-modal .record-modal-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
}

.public-blog-editor .public-blog-edit-modal .record-modal-close:hover,
.public-blog-editor .public-blog-edit-modal .record-modal-close:focus-visible {
    background: var(--danger);
    color: #ffffff;
}

.public-blog-edit-modal-panel {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(1100px, 100%);
    max-height: min(90vh, 860px);
    overflow: hidden;
}

.public-blog-edit-form {
    min-height: 0;
    padding: 2px 8px 2px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.public-blog-modal-block-actions {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.public-blog-modal-actions {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.public-blog-editor .public-blog-modal-actions .button-neutral,
.public-blog-editor .public-blog-modal-actions .button-neutral:hover,
.public-blog-editor .public-blog-modal-actions .button-neutral:focus-visible {
    border-color: var(--line);
    background: #ffffff;
    color: #000000;
    filter: none;
}

.public-blog-entry-selector {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(126, 34, 206, 0.06);
}

.public-blog-entry-selector > strong {
    color: var(--ink);
    font-size: 13px;
    text-transform: uppercase;
}

.public-blog-entry-selector select {
    width: 100%;
    min-height: 52px;
}

.public-blog-entries-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.public-comments-table.public-blog-entries-table {
    min-width: 680px;
}

.public-comments-table.public-blog-entries-table th:nth-child(1) {
    width: 46%;
}

.public-comments-table.public-blog-entries-table th:nth-child(2) {
    width: 25%;
}

.public-comments-table.public-blog-entries-table th:nth-child(3) {
    width: 29%;
}

.public-comments-table.public-blog-entries-table tbody th {
    background: var(--surface);
    color: var(--ink);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.public-blog-entries-table tbody tr.is-active :is(th, td) {
    background: rgba(126, 34, 206, 0.08);
}

.public-blog-entry-title-cell {
    white-space: normal;
}

.public-blog-entry-title-cell strong {
    display: block;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.public-blog-entry-actions {
    min-width: 210px;
}

.public-blog-selector-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.public-blog-selector-pager small {
    color: var(--muted);
    font-weight: 700;
}

.public-blog-page-button {
    min-width: 34px;
    font-size: 16px;
    line-height: 1;
}

.public-blog-page-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.public-blog-selector-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.public-blog-selector-option {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.public-blog-selector-option.is-active {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.12);
    box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.14);
}

.public-blog-selector-option img,
.public-blog-selector-thumb {
    width: 56px;
    min-width: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: rgba(126, 34, 206, 0.12);
    object-fit: cover;
}

.public-blog-selector-option > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-blog-selector-option strong,
.public-blog-selector-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-blog-selector-option strong {
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
}

.public-blog-selector-option small,
.public-blog-entry-selector > small {
    color: var(--muted);
    font-weight: 800;
}

.public-blog-editor-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
}

.public-blog-editor-item-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.public-blog-editor-item-head strong {
    color: var(--ink);
    font-size: 15px;
}

.public-blog-block-list {
    display: grid;
    gap: 12px;
}

.public-blog-block {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(126, 34, 206, 0.24);
    border-radius: 8px;
    background: rgba(126, 34, 206, 0.06);
}

.public-blog-block-head,
.public-blog-block-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.public-blog-block-head strong {
    color: var(--ink);
    font-size: 13px;
    text-transform: uppercase;
}

.public-blog-block-actions {
    justify-content: flex-start;
}

.public-blog-character-counter {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid rgba(240, 82, 92, 0.5);
    border-radius: 8px;
    color: #ff5d68;
    font-size: 13px;
    font-weight: 900;
}

.public-blog-character-counter[hidden] {
    display: none;
}

.public-blog-image-field .public-image-upload-control {
    align-items: start;
    gap: 12px;
}

.public-blog-image-preview-shell {
    position: relative;
    display: inline-grid;
    width: min(100%, 320px);
    max-width: 100%;
}

.public-blog-image-preview-shell[hidden],
.public-blog-image-preview-remove[hidden] {
    display: none;
}

.public-blog-image-field .logo-file-upload {
    width: min(100%, 220px);
    flex: 0 0 auto;
}

.public-blog-image-field .public-image-upload-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    aspect-ratio: auto;
    object-fit: contain;
}

.public-blog-image-preview-remove {
    position: absolute;
    z-index: 2;
    top: -8px;
    right: -8px;
    display: inline-grid;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid rgba(157, 45, 50, 0.38);
    border-radius: 50%;
    background: #ffffff;
    color: var(--danger);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(72, 19, 22, 0.24);
}

.public-blog-image-preview-remove:hover,
.public-blog-image-preview-remove:focus-visible {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
    outline: 3px solid rgba(194, 61, 66, 0.2);
    outline-offset: 2px;
    filter: none;
    transform: none;
}

.public-blog-text-field {
    display: grid;
    gap: 8px;
    align-content: start;
}

.public-blog-text-counter {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.public-blog-text-counter.is-valid {
    color: #147d4d;
}

.public-blog-text-counter.is-warning,
.public-blog-text-counter.is-over-limit {
    color: var(--danger);
}

.public-blog-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.public-blog-format-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 1px solid rgba(126, 34, 206, 0.35);
    border-radius: 6px;
    background: rgba(126, 34, 206, 0.1);
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.public-blog-format-button:hover,
.public-blog-format-button:focus-visible {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.18);
    outline: none;
}
.entry-form .public-blog-block-head .mini-button,
.entry-form .public-blog-block-head .mini-button:hover,
.entry-form .public-blog-block-head .mini-button:focus-visible {
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(126, 34, 206, 0.35);
    background: #ffffff;
    color: var(--ink);
    filter: none;
}

.entry-form .public-blog-format-button,
.entry-form .public-blog-format-button:hover,
.entry-form .public-blog-format-button:focus-visible {
    width: 34px;
    min-width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(126, 34, 206, 0.35);
    background: rgba(126, 34, 206, 0.1);
    color: var(--ink);
    filter: none;
}

.entry-form .public-blog-block-head .mini-button:hover,
.entry-form .public-blog-block-head .mini-button:focus-visible,
.entry-form .public-blog-format-button:hover,
.entry-form .public-blog-format-button:focus-visible {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.18);
}

.public-blog-editor textarea[name^="pagina_web_blog_texto"] {
    min-height: 132px;
}

.public-blog-add-button {
    justify-self: start;
}

.public-comments-editor {
    display: grid;
    gap: 14px;
}

.public-comments-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.public-comments-toolbar > small {
    color: var(--muted);
    font-weight: 700;
}

.public-comment-add-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(126, 34, 206, 0.2);
}

.public-comment-add-button:hover,
.public-comment-add-button:focus-visible {
    filter: brightness(1.08);
    outline: 3px solid rgba(126, 34, 206, 0.2);
    outline-offset: 2px;
}

.public-comments-view-all-button {
    min-height: 42px;
}

.public-comments-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.public-comments-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    table-layout: fixed;
}

.public-comments-table th,
.public-comments-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.public-comments-table th {
    background: color-mix(in srgb, var(--surface) 88%, var(--brand-primary) 12%);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-comments-table th:nth-child(1) {
    width: 17%;
}

.public-comments-table th:nth-child(2) {
    width: 42%;
}

.public-comments-table th:nth-child(3) {
    width: 16%;
}

.public-comments-table th:nth-child(4) {
    width: 9%;
    text-align: center;
}

.public-comments-table th:nth-child(5) {
    width: 16%;
}

.public-comments-table tbody tr:last-child td {
    border-bottom: 0;
}

.public-comment-text-cell {
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.45;
}

.public-comment-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.public-comment-country img {
    width: 26px;
    height: 18px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    object-fit: cover;
}

.public-comment-visible-check {
    display: grid;
    place-items: center;
    margin: 0;
}

.public-comment-visible-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.public-comment-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
}

.public-comment-actions .mini-button {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0 10px;
}

.public-comment-modal-panel {
    width: min(760px, 100%);
}

.public-comment-modal-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.public-comment-modal-form .nationality-picker,
.public-comment-modal-form .country-picker-button {
    width: 100%;
}

.public-comment-country-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

html[data-theme="dark"] .public-comment-country-field {
    color: var(--muted);
}

.public-comment-modal-form textarea {
    min-height: 142px;
    resize: vertical;
}

.public-comment-modal-visible {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.public-comment-modal-visible input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--brand-primary);
}

.public-comments-all-panel {
    width: min(1180px, 100%);
    max-height: min(90vh, 860px);
}

.public-comments-table-wrap-all {
    max-height: min(62vh, 620px);
    overflow: auto;
}

.public-comments-table-wrap-all thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.public-comment-counter {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.public-comment-counter.is-warning {
    color: #ff6b75;
}

.country-picker [data-country-selected-name].is-placeholder {
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 700px) {
    .public-comment-modal-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-comment-modal-form > .span-2 {
        grid-column: auto;
    }

    .public-comments-toolbar > small {
        width: 100%;
    }
}

.public-block-editor[data-public-block-editor="portada"] label:has([name="pagina_web_titulo"]),
.public-block-editor[data-public-block-editor="portada"] label:has([name="pagina_web_subtitulo"]),
.public-block-editor[data-public-block-editor="portada"] label:has([name="pagina_web_cta_principal"]),
.public-block-editor[data-public-block-editor="portada"] label:has([name="pagina_web_cta_secundaria"]),
.public-block-editor[data-public-block-editor="precio_disponibilidad"] .public-block-visibility-toggle {
    display: none;
}

.public-block-editor[data-public-block-editor="mapa"] .public-block-visibility-toggle {
    display: none;
}

.public-block-editor[data-public-block-editor="portada"] .public-hero-image-field .public-image-upload-control {
    align-items: start;
    gap: 12px;
}

/* El disparador de la imagen de portada es el mismo círculo que Información
   básica de Configuración, así que hereda de .logo-actions-icons y no lleva
   ancho propio. */

.public-image-upload-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 24px;
}

.public-field-info {
    position: relative;
    display: inline-flex;
    align-self: center;
    text-transform: none;
}

.public-field-info-button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--brand-primary);
    cursor: help;
    box-shadow: none;
    transform: translateY(-2px);
}

.public-field-info-button svg {
    width: 15px;
    height: 15px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.public-field-info-button circle {
    fill: currentColor;
    stroke: none;
}

.public-field-info-button:hover {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    outline: none;
    filter: none;
    transform: translateY(-2px);
}

.public-field-info-button:focus-visible {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.16);
    outline-offset: 2px;
    filter: none;
    transform: translateY(-2px);
}

.public-field-info-tooltip {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: calc(100% + 112px);
    width: min(360px, calc(100vw - 72px));
    padding: 11px 13px;
    border: 1px solid rgba(109, 40, 217, 0.24);
    border-radius: 10px;
    background: #ffffff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    box-shadow: 0 12px 30px rgba(20, 48, 54, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-3px, -50%);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.public-field-info:hover .public-field-info-tooltip,
.public-field-info:focus-within .public-field-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    pointer-events: auto;
}

/* En Configuración el logo y la imagen de marca caen en la última columna de
   su subsección: ahí un globo que sale hacia la derecha se va de la página y
   deja barra de scroll horizontal. El de esos dos campos baja en vez de
   correrse al costado, y se ancla al rótulo —no al botón "!", que mide 18 px—
   para no pasar nunca del ancho de su campo. */
.variables-subsection-body .logo-upload-heading {
    position: relative;
}

.variables-subsection-body .logo-field-info {
    position: static;
}

.variables-subsection-body .logo-field-info .public-field-info-tooltip {
    top: calc(100% + 9px);
    left: 0;
    right: auto;
    max-width: 100%;
    transform: translateY(-3px);
}

.variables-subsection-body .logo-field-info:hover .public-field-info-tooltip,
.variables-subsection-body .logo-field-info:focus-within .public-field-info-tooltip {
    transform: translateY(0);
}

/* En el alta de Registros el globo cuelga del rótulo "Nombre", que cae en la
   primera columna de una grilla angosta: saliendo al costado se iría de la
   tarjeta. Éste baja, y se ancla al rótulo y no al botón "!", que mide 18 px. */
.registration-holder-field-info {
    position: static;
}

.field-label-line:has(.registration-holder-field-info) {
    position: relative;
}

.registration-holder-field-info .public-field-info-tooltip {
    top: calc(100% + 9px);
    left: 0;
    right: auto;
    transform: translateY(-3px);
}

.registration-holder-field-info:hover .public-field-info-tooltip,
.registration-holder-field-info:focus-within .public-field-info-tooltip {
    transform: translateY(0);
}

/* Una condición por renglón. */
.public-field-info-line {
    display: block;
}

.public-field-info-line + .public-field-info-line {
    margin-top: 3px;
}

.public-image-dimension-warning {
    display: inline-flex;
    flex: 0 0 100%;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    min-width: 0;
    max-width: min(520px, 100%);
    margin-top: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(183, 121, 31, 0.4);
    border-radius: 9px;
    background: #fff8e8;
    color: #6b4300;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: left;
    text-transform: none;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(88, 55, 0, 0.1);
}

.public-image-dimension-warning[hidden] {
    display: none;
}

.public-image-dimension-warning-mark {
    display: inline-grid;
    flex: 0 0 17px;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--accent-amber);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

@media (min-width: 641px) and (max-width: 760px) {
    .public-field-info-tooltip {
        left: calc(100% + 72px);
        width: min(280px, calc(100vw - 72px));
    }
}

@media (max-width: 640px) {
    .public-field-info {
        position: static;
    }

    .public-image-upload-heading {
        position: relative;
        z-index: 20;
    }

    .public-field-info-tooltip {
        top: calc(100% + 9px);
        left: 0;
        transform: translateY(-3px);
    }

    .public-field-info:hover .public-field-info-tooltip,
    .public-field-info:focus-within .public-field-info-tooltip {
        transform: translateY(0);
    }
}

.public-hero-image-preview-frame {
    position: relative;
    display: inline-flex;
    align-self: start;
    width: 42px;
    height: 42px;
    overflow: visible;
}

.public-hero-image-preview-frame[hidden] {
    display: none;
}

.public-hero-image-preview-frame .public-image-upload-preview {
    width: 42px;
    height: 42px;
    aspect-ratio: 1;
    object-fit: cover;
}

.public-image-upload-control
    > .public-hero-image-preview-frame[hidden]
    + .logo-upload-actions {
    grid-column: 1 / -1;
}

.public-page-builder-parking .public-block-editor textarea[data-public-progressive-textarea] {
    height: 52px;
    min-height: 52px;
    padding: 14px 16px;
    overflow: hidden;
    border-color: rgba(109, 40, 217, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f8fbfb);
    resize: none;
    box-shadow: 0 8px 22px rgba(43, 47, 51, 0.08);
    transition:
        min-height 180ms ease,
        height 180ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.public-page-builder-parking .public-block-editor textarea[data-public-progressive-textarea].is-expanded {
    height: 112px;
    min-height: 112px;
    overflow: auto;
    resize: vertical;
}

.public-page-builder-parking .public-block-editor textarea[data-public-progressive-textarea]:hover {
    border-color: rgba(109, 40, 217, 0.45);
}

.public-page-builder-parking .public-block-editor textarea[data-public-progressive-textarea]:focus {
    border-color: var(--brand-primary);
    background: var(--surface);
    outline: 3px solid rgba(109, 40, 217, 0.14);
    outline-offset: 1px;
    box-shadow: 0 10px 26px rgba(109, 40, 217, 0.12);
}

/* El textarea sigue siendo el valor que se guarda, pero el usuario edita esta
   superficie visual: el formato se ve aplicado y nunca como etiquetas HTML. */
.public-page-builder-parking .public-hero-rich-editor[hidden] {
    display: none;
}

/* El textarea conserva el valor que se envía y el fallback sin JavaScript.
   Cuando el editor visual ya está listo debe quedar una sola superficie
   visible, incluso frente a las reglas de formulario que fuerzan display. */
.public-page-builder-parking textarea[data-public-hero-text-source][hidden] {
    display: none !important;
}

.public-page-builder-parking .public-hero-rich-editor {
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(109, 40, 217, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f8fbfb);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 22px rgba(43, 47, 51, 0.08);
    transition:
        min-height 180ms ease,
        height 180ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.public-page-builder-parking .public-hero-rich-editor.is-expanded {
    height: 112px;
    min-height: 112px;
    overflow: auto;
    resize: vertical;
}

.public-page-builder-parking .public-hero-rich-editor:hover {
    border-color: rgba(109, 40, 217, 0.45);
}

.public-page-builder-parking .public-hero-rich-editor:focus {
    border-color: var(--brand-primary);
    background: var(--surface);
    outline: 3px solid rgba(109, 40, 217, 0.14);
    outline-offset: 1px;
    box-shadow: 0 10px 26px rgba(109, 40, 217, 0.12);
}

.public-page-builder-parking .public-hero-rich-editor.is-over-limit,
.public-page-builder-parking .public-hero-rich-editor[aria-invalid="true"] {
    border-color: var(--danger);
}

.public-hero-format-button[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.12);
    color: var(--brand-primary);
}

.public-hero-rich-editor:empty::before {
    color: var(--muted);
    content: attr(data-placeholder);
    font-weight: 700;
    pointer-events: none;
}

.public-hero-rich-editor > :is(p, div) {
    margin: 0;
    font-weight: inherit;
}

.public-hero-rich-editor > :is(p, div) + :is(p, div) {
    margin-top: 0.7em;
}

.public-hero-rich-editor [data-public-hero-align="centro"],
.public-hero-rich-editor .public-hero-align-center {
    text-align: center;
}

.public-hero-rich-editor [data-public-hero-align="derecha"],
.public-hero-rich-editor .public-hero-align-right {
    text-align: right;
}

.public-short-text-feedback {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.public-page-builder-parking .public-short-text-feedback .public-char-counter {
    min-height: 18px;
    margin-left: auto;
    padding-right: 2px;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

.public-page-builder-parking
    .public-short-text-feedback
    .public-char-counter.is-at-limit {
    color: var(--danger);
}

.public-page-builder-parking .public-char-counter[hidden] {
    display: none;
}

.public-short-text-error {
    display: block;
    position: relative;
    max-width: min(100%, 520px);
    margin-top: -2px;
    padding: 7px 10px;
    border: 1px solid rgba(194, 61, 66, 0.46);
    border-radius: 8px;
    background: #fff2f3;
    color: #a52f35;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(194, 61, 66, 0.12);
}

.public-short-text-error::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 18px;
    width: 9px;
    height: 9px;
    border-top: 1px solid rgba(194, 61, 66, 0.46);
    border-left: 1px solid rgba(194, 61, 66, 0.46);
    background: #fff2f3;
    transform: rotate(45deg);
}

.public-short-text-error[hidden] {
    display: none;
}

.app-notice-modal.public-short-text-validation-notice .app-notice-panel {
    gap: 14px;
    width: min(420px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    padding: 24px 20px 18px;
}

.app-notice-modal.public-short-text-validation-notice .app-notice-copy h2 {
    font-size: 20px;
}

.app-notice-modal.public-short-text-validation-notice .app-notice-close {
    border: 0;
    background: var(--danger);
    color: #ffffff;
}

.public-page-builder-parking
    textarea[data-public-hero-text][aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(194, 61, 66, 0.14);
}

.public-block-editor textarea[name="pagina_web_precio_titulo"] {
    min-height: 86px;
}

.public-mars-merged-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(109, 40, 217, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(rgba(109, 40, 217, 0.08), rgba(109, 40, 217, 0.08)),
        var(--surface);
}

.public-mars-merged-fields[hidden] {
    display: none;
}

.public-calculation-vehicle-picker,
.public-calculation-discount-preview,
.public-price-period-picker {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Un solo formato para todos los rótulos de sección del editor, tomado del
   de "Imagen de portada" (.logo-upload-field en 04-ocupacion). */
.public-field-heading,
.public-calculation-vehicle-picker legend,
.public-calculation-discount-preview legend,
.public-price-period-picker legend {
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

/* El rótulo puede llevar el globo de ayuda al lado. */
.public-block-editor-grid legend:has(.public-field-heading) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.public-block-editor[data-public-block-editor="calculo"] .public-calculation-vehicle-picker legend {
    margin-bottom: 6px;
    line-height: 1.35;
}

.public-block-editor[data-public-block-editor="calculo"] .public-calculation-discount-preview legend {
    margin-bottom: 6px;
    line-height: 1.35;
}

.public-calculation-vehicle-options,
.public-price-period-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-calculation-vehicle-check,
.public-calculation-discount-check,
.public-price-period-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 118px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
}

.public-calculation-vehicle-check input,
.public-calculation-discount-check input,
.public-price-period-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.public-calculation-vehicle-check:has(input:checked),
.public-calculation-discount-check:has(input:checked),
.public-price-period-check:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.public-page-builder-parking .public-price-period-check > span {
    color: var(--brand-primary);
}

.public-page-builder-parking .public-price-period-check:has(input:checked) > span {
    color: #ffffff;
}

html[data-theme="dark"]
    .app-shell
    .public-page-builder-parking
    .public-price-period-check:not(:has(input:checked))
    > span {
    color: #D8B4FE;
}

.public-mars-merged-fields .public-price-period-check:focus-within {
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

.public-calculation-vehicle-check:has(input:checked) > span {
    color: #ffffff;
}

.public-calculation-discount-check:has(input:checked) > span {
    color: #ffffff;
}

.public-calculation-discount-preview {
    display: grid;
    gap: 8px;
}

.public-block-editor[data-public-block-editor="calculo"] .public-calculation-discount-preview {
    gap: 10px;
    margin-top: 6px;
}

.public-calculation-discount-preview > legend {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-block-editor[data-public-block-editor="calculo"] .public-calculation-discount-preview > legend {
    line-height: 1.35;
}

.public-block-editor[data-public-block-editor="calculo"] > p {
    margin-top: 6px;
    line-height: 1.55;
}

.public-calculation-discount-preview > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-calculation-discount-check {
    display: inline-grid;
    gap: 4px;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.public-calculation-discount-check {
    cursor: pointer;
}

.public-calculation-discount-empty {
    display: grid;
    flex: 1 1 100%;
    gap: 4px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
}

.public-calculation-discount-empty strong {
    color: var(--ink);
}

.public-calculation-discount-empty small {
    line-height: 1.45;
}

/* Los modales del editor de Página web tienen que quedar por encima de la
   vista previa embebida: su barra sticky usa z-index 220 y taparía los
   botones del aviso. Solo el recortador de imagen (4000) queda arriba. */
.public-page-builder .record-modal {
    z-index: 230;
}

.public-footer-redes-field {
    display: grid;
    gap: 14px;
    margin: 14px 2px 6px;
    padding: 0;
    border: 0;
}

.public-footer-redes-field > legend {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

/* Dos columnas: a la izquierda las redes con link cargado, a la derecha las
   que faltan configurar. En pantallas angostas quedan una debajo de la otra. */
.public-footer-redes-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px;
    align-items: start;
}

.public-footer-redes-group {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.public-footer-redes-group-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-footer-redes-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.public-footer-redes-empty {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
}

.public-footer-red-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    min-width: 118px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
}

.public-footer-red-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.public-footer-red-icon {
    display: inline-grid;
    place-items: center;
}

.public-footer-red-check svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
}

.public-footer-red-check:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.public-footer-red-check:focus-within,
.public-footer-red-check.is-unloaded:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

/* Una red sin cargar se lee completa pero se distingue: borde punteado y
   clic que abre el cuadro para pegarle el link. */
.public-footer-red-check.is-unloaded {
    border-style: dashed;
    color: var(--muted);
    cursor: pointer;
    opacity: 0.75;
}

.public-footer-red-check.is-unloaded:hover {
    color: var(--ink);
    opacity: 1;
}

.public-footer-link-panel {
    max-width: 520px;
}

.public-footer-link-form {
    display: grid;
    gap: 8px;
    padding: 0 24px;
}

.public-footer-link-form label {
    color: var(--ink);
    font-weight: 900;
}

.public-footer-link-form input {
    width: 100%;
}

.public-footer-link-help {
    color: var(--muted);
    line-height: 1.5;
}

.location-social-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.location-social-section > div {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
}

.location-social-section strong {
    color: var(--ink);
    font-size: 16px;
}

.location-social-section small {
    color: var(--muted);
    font-weight: 800;
}

.location-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.location-social-grid label {
    min-width: 0;
}

.location-social-field {
    display: grid;
    gap: 6px;
}

.social-input-control {
    position: relative;
    display: block;
    min-width: 0;
}

.entry-form .social-input-control > input {
    padding-right: 46px;
}

.entry-form .social-error-button {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(194, 61, 66, 0.28);
    transform: translateY(-50%);
}

.entry-form .social-error-button[hidden] {
    display: none;
}

.entry-form .social-error-button:hover,
.entry-form .social-error-button:focus-visible {
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    filter: brightness(1.08);
}

.entry-form .social-error-button:focus-visible {
    outline: 3px solid rgba(194, 61, 66, 0.24);
    outline-offset: 2px;
}

.location-social-field .social-input-control > input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(194, 61, 66, 0.12);
}

.social-validation-toast[hidden] {
    display: none;
}

.social-validation-toast {
    position: fixed;
    z-index: 145;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 11px;
    width: min(430px, calc(100vw - 36px));
    padding: 15px;
    border: 1px solid rgba(194, 61, 66, 0.36);
    border-left: 4px solid var(--danger);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 18px 46px rgba(16, 24, 33, 0.24);
    text-align: left;
    text-transform: none;
}

.social-validation-toast-mark {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.social-validation-toast-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.social-validation-toast-copy strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.25;
}

.social-validation-toast-copy > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}

.entry-form .social-validation-toast-close {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
}

.entry-form .social-validation-toast-close:hover,
.entry-form .social-validation-toast-close:focus-visible {
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--ink);
    filter: none;
}

.variables-shell :is(input:not([type="hidden"]), select, textarea, button)[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(194, 61, 66, 0.14);
}

@media (max-width: 980px) {
    .space-location-list-grid,
    .location-social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .space-location-list-grid,
    .location-social-grid {
        grid-template-columns: 1fr;
    }
}

.public-builder-side {
    display: grid;
    gap: 18px;
}

.public-builder-side .public-link-qr-section {
    width: 100%;
}

.public-builder-data {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fbfb;
}

.public-builder-data span {
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-builder-data strong {
    color: var(--ink);
    font-size: 22px;
}

.public-builder-data small {
    color: var(--muted);
    font-weight: 700;
}

.public-page-preview-panel {
    padding: 0;
}

.public-page-preview-panel > .panel-header {
    padding: 22px;
}

.public-page-preview-panel[open] > .panel-header {
    margin-bottom: 0;
    padding-bottom: 14px;
}

.public-page-owner-preview {
    padding: 22px;
}

.public-site {
    --public-accent: #7E22CE;
    --public-accent-strong: #5b21b6;
    --public-bg: #faf5ff;
    --public-surface: #ffffff;
    --public-soft: #f3e8ff;
    --public-ink: #000000;
    --public-muted: #000000;
    gap: 22px;
}

.public-site-hero {
    position: relative;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.46fr);
    min-height: min(76vh, 720px);
    overflow: hidden;
    padding: clamp(24px, 4vw, 56px);
    border: 0;
    background: #102329;
    color: #ffffff;
}

.public-site-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.public-site-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 26, 31, 0.92) 0%, rgba(8, 26, 31, 0.72) 42%, rgba(8, 26, 31, 0.22) 100%),
        linear-gradient(0deg, rgba(8, 26, 31, 0.62), rgba(8, 26, 31, 0.08));
}

.public-site-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-site-copy,
.public-site-visual {
    position: relative;
    z-index: 1;
}

.public-site-copy {
    align-content: center;
    gap: 20px;
}

.public-brand-row {
    color: #75d6df;
}

.public-site-copy h1 {
    max-width: 760px;
    color: #ffffff;
    font-size: clamp(44px, 7vw, 88px);
}

.public-site-copy p {
    max-width: 620px;
    color: #ffffff;
}

.public-site-visual {
    align-self: end;
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

.public-availability-card,
.public-quick-card,
.public-hours-card {
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
}

.public-quick-card {
    transform: translateX(-28px);
}

.public-hours-card {
    transform: translateX(-8px);
}

.public-availability-card span,
.public-quick-card span,
.public-hours-card span {
    color: var(--public-accent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-availability-card strong,
.public-quick-card strong,
.public-hours-card strong {
    color: #000000;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
}

.public-hours-card strong {
    font-size: 20px;
    line-height: 1.25;
}

.public-availability-card small,
.public-quick-card small,
.public-hours-card small {
    color: #000000;
    font-weight: 700;
}

.public-hero-stats span {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.public-hero-stats strong {
    color: #ffffff;
}

.public-site-grid article,
.public-rate-list article,
.public-site-section,
.public-site-contact,
.public-price-result {
    box-shadow: 0 16px 38px rgba(15, 35, 41, 0.08);
}

.payment-return-page {
    min-height: 100vh;
    background: var(--surface-soft);
}

.payment-return {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.account-payment {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.payment-return > img {
    width: min(220px, 64vw);
    margin-bottom: 18px;
}

.account-payment > img {
    width: min(220px, 64vw);
    margin-bottom: 18px;
}

.payment-return-panel {
    width: min(560px, 100%);
}

.account-payment-panel {
    width: min(640px, 100%);
    border-top: 5px solid var(--accent-amber);
}

.account-payment-panel.tone-vencida {
    border-top-color: var(--danger);
}

.account-payment-panel.tone-pagada,
.account-payment-panel.tone-gratis,
.account-payment-panel.tone-bonificada {
    border-top-color: var(--positive);
}

.payment-return-panel h1 {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.account-payment-panel h1 {
    margin: 0 0 12px;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.05;
}

.account-payment-message {
    max-width: 56ch;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.account-payment form {
    margin: 0;
}

.service-config-form {
    display: grid;
    gap: 12px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid rgba(183, 121, 31, 0.28);
    border-radius: 8px;
    background: #fffaf1;
}

.service-config-form p {
    margin: 0;
    color: var(--muted);
}

.service-config-form .service-config-title {
    color: var(--ink);
    font-size: 1rem;
    font-weight: var(--font-semibold);
}

.service-config-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(110px, 140px) minmax(120px, 150px);
    gap: 10px;
}

.service-config-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.service-config-form input,
.service-config-form select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 12px;
    text-transform: none;
}

.payment-return-data {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.payment-return-data div {
    display: grid;
    gap: 4px;
}

.payment-return-data dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.payment-return-data dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.account-settings-tabs {
    margin: 0 0 16px;
}

.account-settings-shell {
    display: grid;
    gap: 16px;
}

.account-settings-panel {
    padding: 0;
    overflow: hidden;
}

.account-settings-panel[hidden] {
    display: none !important;
}

.account-settings-panel-header {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.account-settings-panel-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.15;
}

.account-settings-form,
.account-fiscal-form {
    padding: 18px 20px 20px;
}

.account-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.account-settings-form label,
.account-fiscal-row label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.account-settings-form input,
.account-settings-form select,
.account-settings-form textarea,
.account-fiscal-row input,
.account-fiscal-row select,
.account-fiscal-row textarea {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
}

.account-settings-form textarea,
.account-fiscal-row textarea {
    min-height: 86px;
    padding: 10px 12px;
    resize: vertical;
}

.account-settings-form input:focus,
.account-settings-form select:focus,
.account-settings-form textarea:focus,
.account-fiscal-row input:focus,
.account-fiscal-row select:focus,
.account-fiscal-row textarea:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.account-settings-form input[readonly] {
    background: var(--surface-soft);
    color: var(--muted);
}

.account-fiscal-form {
    display: grid;
    gap: 14px;
}

.account-fiscal-list {
    display: grid;
    gap: 14px;
}

.account-fiscal-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

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

.account-settings-form .span-2,
.account-fiscal-row .span-2 {
    grid-column: span 2;
}

.account-fiscal-remove {
    align-self: end;
    min-height: 46px;
}

.account-plan-empty {
    min-height: 120px;
    padding: 18px 20px 20px;
}

.account-plan-checkout {
    width: 100%;
    margin: 0;
    padding: 18px 20px 20px;
}

.account-plan-checkout .plan-checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 22px;
}

.account-plan-checkout .plan-picker {
    overflow-x: auto;
}

.account-plan-checkout .plan-picker-row {
    grid-template-columns: minmax(190px, 0.95fr) repeat(5, minmax(120px, 1fr));
    min-width: 980px;
}

.account-plan-checkout .plan-picker-heading span,
.account-plan-checkout .plan-picker-module,
.account-plan-checkout .plan-option {
    min-height: 70px;
    padding: 14px 16px;
}

.account-plan-checkout .plan-picker-module {
    font-size: 16px;
    line-height: 1.25;
}

.account-plan-checkout .plan-option {
    gap: 6px;
}

.account-plan-checkout .plan-option-price {
    min-height: 36px;
}

.account-plan-checkout .plan-summary {
    top: 18px;
    gap: 14px;
    padding: 20px;
}

.account-plan-checkout .plan-summary h2 {
    font-size: clamp(32px, 3vw, 42px);
}

.account-plan-checkout .plan-summary-discounts article {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--muted);
}

.account-plan-checkout .plan-summary-discounts article.is-active {
    border-color: #6ac7cf;
    background: var(--brand-primary);
    color: #ffffff;
}

.account-plan-checkout .plan-summary-discounts article span,
.account-plan-checkout .plan-summary-discounts article strong {
    color: inherit;
}

@media (max-width: 1180px) {
    .account-plan-checkout .plan-checkout-layout {
        grid-template-columns: 1fr;
    }

    .account-plan-checkout .plan-summary {
        position: static;
    }
}

html[data-theme="dark"] .app-shell .account-fiscal-row {
    border-color: #5e737c;
    background: #172126;
}

html[data-theme="dark"] .app-shell .account-settings-panel {
    border-color: #425760;
    background: #202a2f;
}

html[data-theme="dark"] .app-shell .account-plan-checkout :is(.plan-picker, .plan-summary) {
    border-color: var(--line-strong);
    background: #172126;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-picker-row {
    border-top-color: var(--line-strong);
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-picker-heading {
    background: #111a1e;
}

html[data-theme="dark"] .app-shell .account-plan-checkout :is(.plan-picker-heading span, .plan-picker-module, .plan-option) {
    border-left-color: var(--line-strong);
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-option {
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-option:has(input:checked) {
    background: rgba(0, 127, 143, 0.24);
}

html[data-theme="dark"] .app-shell .account-plan-checkout :is(.plan-picker-module, .plan-option span, .plan-price-current, .plan-summary h2, .plan-summary dd, .plan-summary dt small) {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .account-plan-checkout :is(.plan-option small, .plan-summary dt) {
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-summary-discounts article {
    border-color: var(--line-strong);
    background: #121a1e;
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .account-plan-checkout .plan-summary-discounts article.is-active {
    border-color: #6ac7cf;
    background: var(--brand-primary);
    color: #ffffff;
}

.calculation-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.calculation-summary pre {
    margin: 0;
    color: var(--muted);
    font: inherit;
    white-space: pre-wrap;
}

.message-box {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}

.plan-checkout-body {
    min-height: 100vh;
    background: #f6f9f9;
    color: var(--ink);
}

.plan-checkout {
    display: grid;
    gap: 22px;
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 42px;
}

.plan-checkout-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.plan-checkout-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-family: var(--font-brand);
    font-weight: var(--font-semibold);
}

.plan-checkout-brand .brand-mark {
    width: clamp(58px, 5vw, 70px);
    height: clamp(58px, 5vw, 70px);
    object-fit: contain;
}

.plan-checkout-brand .brand-wordmark {
    width: clamp(190px, 24vw, 290px);
    max-width: 46vw;
    height: auto;
    object-fit: contain;
}

.plan-checkout-head h1 {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: var(--font-semibold);
    line-height: 1.15;
}

.plan-checkout-head p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.plan-period-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(98px, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.plan-period-toggle label,
.plan-option {
    cursor: pointer;
}

.plan-period-toggle input,
.plan-option input {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.plan-period-toggle span,
.plan-period-toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: var(--font-semibold);
}

.plan-period-toggle label:has(input:checked) {
    background: var(--brand-neutral);
    color: #ffffff;
}

.plan-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 18px;
    align-items: start;
}

.plan-picker,
.plan-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.plan-picker {
    overflow: hidden;
}

.plan-picker-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.95fr) repeat(5, minmax(104px, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
}

.plan-picker-row:first-child {
    border-top: 0;
}

.plan-picker-heading {
    background: var(--brand-neutral);
    color: #ffffff;
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.plan-picker-heading span,
.plan-picker-module,
.plan-option {
    min-height: 76px;
    padding: 14px;
    border-left: 1px solid var(--line);
}

.plan-picker-heading span:first-child,
.plan-picker-module {
    border-left: 0;
}

.plan-picker-module {
    display: flex;
    align-items: center;
    color: var(--ink);
    font-size: 18px;
    font-weight: var(--font-semibold);
}

.plan-option {
    display: grid;
    align-content: center;
    gap: 5px;
    background: #ffffff;
}

.plan-option span {
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.plan-option small {
    color: var(--muted);
    font-weight: var(--font-medium);
}

.plan-option-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.plan-price-original {
    color: #000000;
    text-decoration: line-through;
}

.plan-price-current {
    color: var(--ink);
}

.plan-price-period {
    font-size: 11px;
}

.plan-option:has(input:checked) {
    background: var(--brand-primary-soft);
    box-shadow: inset 0 0 0 3px var(--brand-primary);
}

.plan-summary {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
    padding: 22px;
}

.plan-summary-period-toggle {
    justify-self: start;
}

.plan-summary h2 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 38px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

.plan-summary dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.plan-summary dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.plan-summary dt {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-weight: var(--font-medium);
}

.plan-summary dt small {
    color: var(--ink);
    font-size: 12px;
    font-weight: var(--font-semibold);
}

.plan-summary dd {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.plan-summary-discounts {
    display: grid;
    gap: 8px;
}

.plan-summary-discounts article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--brand-neutral);
    color: #ffffff;
}

.plan-summary-discounts article.is-active {
    border-color: #6ac7cf;
    background: var(--brand-primary);
}

.plan-summary-discounts span {
    color: #ffffff;
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.plan-summary-discounts strong {
    white-space: nowrap;
}

.plan-checkout-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #ffffff;
    font-weight: var(--font-semibold);
}

@media (max-width: 1040px) {
    .plan-checkout-head,
    .plan-checkout-layout {
        grid-template-columns: 1fr;
    }

    .plan-period-toggle {
        justify-self: start;
    }

    .plan-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .plan-checkout {
        width: min(100% - 24px, 1320px);
        padding-top: 18px;
    }

    .plan-checkout-head {
        padding: 18px;
    }

    .plan-checkout-brand .brand-mark {
        width: 54px;
        height: 54px;
    }

    .plan-checkout-brand .brand-wordmark {
        width: 180px;
        max-width: 54vw;
    }

    .plan-period-toggle {
        width: 100%;
    }

    .plan-picker {
        display: grid;
        gap: 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .plan-picker-heading {
        display: none;
    }

    .plan-picker-row {
        grid-template-columns: 1fr;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .plan-picker-module,
    .plan-option {
        min-height: 0;
        border-left: 0;
    }

    .plan-option {
        border-top: 1px solid var(--line);
    }
}

.landing-body {
    min-height: 100vh;
    background: #f6f9f9;
    overflow-x: hidden;
}

.login-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #e8f5f6 0%, #f6fbfb 100%);
}

.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 104px 16px 48px;
}

.login-panel {
    display: grid;
    gap: 22px;
    width: min(100%, 480px);
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.login-panel > .notice {
    margin-top: 0;
}

.login-brand {
    --login-brand-size: 36px;
    position: absolute;
    top: 32px;
    left: clamp(24px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--brand-primary);
}

.login-brand .brand-mark {
    width: var(--login-brand-size);
    height: var(--login-brand-size);
    object-fit: contain;
}

.login-brand .brand-wordmark,
.login-brand strong,
.login-brand small {
    display: block;
}

.login-brand .brand-wordmark {
    width: 118px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.login-brand strong {
    font-family: var(--font-brand);
    font-size: var(--login-brand-size);
    line-height: 1;
}

.login-brand small {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 600;
}

.login-copy {
    display: grid;
    gap: 10px;
}

.login-copy h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.12;
}

.login-copy p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

.login-form {
    display: grid;
    gap: 13px;
}

.login-help {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.google-auth-form {
    display: grid;
    gap: 8px;
}

.google-auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #5f6368;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.google-auth-button:disabled {
    cursor: wait;
    opacity: 1;
}

.google-auth-logo {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.google-auth-status {
    min-height: 17px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.google-auth-status.is-error {
    color: var(--danger);
}

.google-auth-status:empty {
    display: none;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.login-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.login-form input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-transform: none;
}

.password-field {
    position: relative;
    display: block;
}

.login-form .password-field input {
    padding-right: 46px;
}

.login-form .password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    place-items: center;
    transform: translateY(-50%);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.login-form .password-toggle:hover,
.login-form .password-toggle:focus-visible {
    background: rgba(109, 40, 217, 0.08);
    color: var(--brand-primary);
}

.login-form .password-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.password-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.password-toggle[aria-pressed="true"] .password-toggle-slash {
    display: none;
}

.login-forgot-password {
    width: fit-content;
    margin-top: -2px;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-forgot-password:hover,
.login-forgot-password:focus-visible,
.login-back:hover,
.login-back:focus-visible {
    color: var(--accent-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-forgot-password:focus-visible,
.login-back:focus-visible {
    border-radius: 3px;
    outline: 3px solid rgba(109, 40, 217, 0.14);
    outline-offset: 3px;
}

.login-form input:focus {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.14);
}

.login-form > button[type="submit"] {
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.login-form > button[type="submit"]:hover,
.login-form > button[type="submit"]:focus-visible {
    background: #004e58;
}

.login-form > button[type="submit"]:focus-visible,
.login-resend-form button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.2);
    outline-offset: 2px;
}

.login-code-input {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-align: center;
}

.login-resend-form {
    display: grid;
    margin-top: -12px;
}

.login-resend-form button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(109, 40, 217, 0.38);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-primary);
    font-weight: 600;
    cursor: pointer;
}

.login-resend-form button:hover,
.login-resend-form button:focus-visible {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.login-disabled {
    padding: 13px 14px;
    border: 1px solid rgba(194, 61, 66, 0.25);
    border-radius: 8px;
    background: #fff6f6;
    color: var(--danger);
    font-weight: 600;
}

.login-back {
    width: fit-content;
    color: var(--brand-primary);
    font-weight: 600;
}

@media (max-width: 560px) {
    .login-page {
        align-items: start;
        padding: 84px 14px 28px;
    }

    .login-brand {
        --login-brand-size: 30px;
        top: 22px;
        left: 20px;
    }

    .login-panel {
        gap: 19px;
        padding: 26px 22px;
    }

    .login-copy h1 {
        font-size: 28px;
    }

    .login-code-input {
        font-size: 18px;
        letter-spacing: 0.22em;
    }
}

.legal-page {
    display: grid;
    min-height: 100vh;
    padding: 32px 16px;
    place-items: start center;
}

.legal-panel {
    display: grid;
    gap: 24px;
    width: min(100%, 860px);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.legal-head {
    display: grid;
    gap: 10px;
}

.legal-head h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    line-height: 1.05;
}

.legal-head p:not(.eyebrow) {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.legal-content {
    display: grid;
    gap: 22px;
}

.legal-content section {
    display: grid;
    gap: 10px;
}

.legal-content h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 20px;
}

.legal-content ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.55;
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}
.landing-page {
    --muted: #000000;
    --muted-soft: #000000;
    --landing-scale: 0.855;
    --landing-wide: 1800px;
    --landing-wide-half: 900px;
    --landing-page-gutter: 48px;
    --landing-page-gutter-half: 24px;
    --landing-section-pad: 29px;
    --landing-section-inline: max(
        calc(var(--landing-page-gutter-half) + var(--landing-section-pad)),
        calc(50vw - var(--landing-wide-half) + var(--landing-section-pad))
    );
    width: 116.959064%;
    max-width: none;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    zoom: var(--landing-scale);
}

.landing-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    padding: 24px 29px 72px;
    background: linear-gradient(180deg, #e8f5f6 0%, #f6fbfb 100%);
}

.landing-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 92px;
    background: #ffffff;
    content: "";
}

.landing-nav {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px 26px;
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin: 0 auto;
}

.landing-brand,
.landing-nav-links,
.landing-nav-actions {
    display: flex;
    align-items: center;
}

.landing-brand {
    justify-self: start;
    gap: 14px;
}

.landing-brand > span {
    display: flex;
    align-items: center;
    min-width: 0;
}

.landing-brand .brand-mark {
    width: 46.8px;
    height: 46.8px;
    object-fit: contain;
}

.landing-brand .brand-wordmark {
    display: block;
    width: clamp(150px, 14.4vw, 204px);
    max-width: 28.8vw;
    height: auto;
    object-fit: contain;
}

.landing-brand .brand-wordmark-dark {
    display: none;
}

.landing-nav-links {
    grid-column: 2;
    justify-self: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted);
    font-size: 18px;
    font-weight: 600;
}

.landing-nav-actions {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
    gap: 12px;
}

.landing-nav-menu {
    position: relative;
}

.landing-nav-menu summary {
    list-style: none;
    cursor: pointer;
}

.landing-nav-menu summary::-webkit-details-marker {
    display: none;
}

.landing-nav-menu summary::after {
    display: inline-block;
    margin-left: 6px;
    color: var(--brand-primary);
    content: "▾";
}

.landing-nav-menu > div {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 4px;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-lift);
}

.landing-nav-menu > div a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    white-space: nowrap;
}

.landing-nav-menu > div a:hover {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.landing-command,
.landing-register,
.landing-primary,
.landing-secondary,
.price-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    font-family: var(--font-button);
    font-weight: var(--font-semibold);
}

.landing-command {
    padding: 0 15px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 18px;
}

.landing-register {
    padding: 0 15px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    font-size: 18px;
}

.landing-hero-art {
    position: absolute;
    right: max(24px, calc((100vw - var(--landing-wide)) / 2));
    bottom: 116px;
    z-index: 1;
    width: 780px;
    max-width: 50vw;
    height: auto;
}

.landing-hero-copy {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin: 118px auto 0;
    padding-right: 680px;
}

.landing-hero-copy .eyebrow {
    color: var(--brand-primary);
    max-width: 760px;
    margin-bottom: 18px;
    font-size: 32.4px;
    line-height: 1.08;
}

.landing-hero-copy .eyebrow span {
    display: block;
    white-space: nowrap;
}

.landing-hero-copy h1 {
    margin: 0;
    max-width: 620px;
    font-size: 52.2px;
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0;
}

.landing-hero-copy .landing-brand-title {
    font-family: var(--font-brand);
    font-weight: 600;
}

.landing-hero-copy p:not(.eyebrow) {
    max-width: 690px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 16.2px;
    white-space: nowrap;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.landing-primary {
    padding: 0 18px;
    background: var(--brand-primary);
    color: #fff;
}

.landing-secondary {
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--ink);
}

.price-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
}

.landing-trust {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: calc(100% - var(--landing-page-gutter));
    max-width: 1500px;
    margin: -24px auto 0;
}

.landing-trust article {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 138px;
    padding: 24px 22px 22px;
    text-align: center;
    border: 1px solid rgba(216, 227, 229, 0.88);
    border-top: 5px solid var(--brand-primary);
    border-radius: 8px;
    background: #f7fbfb;
    box-shadow: 0 14px 30px rgba(43, 47, 51, 0.09);
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.landing-trust article:nth-child(1) {
    --scroll-motion-delay: 0.14s;
}

.landing-trust article:nth-child(2) {
    border-top-color: var(--accent-amber);
    background: #fff8ed;
    --scroll-motion-delay: 0.3s;
}

.landing-trust article:nth-child(3) {
    border-top-color: var(--accent-blue);
    background: #f5f8ff;
    --scroll-motion-delay: 0.46s;
}

.landing-trust article:nth-child(4) {
    border-top-color: var(--accent-rose);
    background: #fff6f8;
    --scroll-motion-delay: 0.62s;
}

.landing-trust strong {
    font-size: 22px;
    line-height: 1.15;
    text-align: center;
}

.landing-trust span {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.45;
}

@keyframes landingTrustCardEnter {
    0% {
        opacity: 0;
        transform: translateY(54px) scale(0.92);
        filter: blur(5px);
    }

    68% {
        opacity: 1;
        transform: translateY(-6px) scale(1.01);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.landing-trust.is-scroll-motion-ready article {
    opacity: 0;
    transform: translateY(54px) scale(0.92);
    filter: blur(5px);
}

.landing-trust.is-scroll-motion-visible article {
    animation: landingTrustCardEnter 1.08s cubic-bezier(0.18, 0.88, 0.24, 1) var(--scroll-motion-delay, 0s) both;
}

.landing-section,
.landing-feature,
.landing-final {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 82px var(--landing-section-inline);
}

.landing-section-head {
    display: grid;
    gap: 8px;
    max-width: 720px;
    margin-bottom: 24px;
}

.landing-benefits .landing-section-head {
    max-width: 1180px;
    margin-bottom: 22px;
}

.landing-benefits {
    padding-bottom: 46px;
}

.landing-benefits .landing-section-head .eyebrow {
    font-size: 15px;
}

.landing-section-head h2,
.feature-copy h2,
.landing-final h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
}

.landing-section-head p:not(.eyebrow),
.feature-copy p,
.landing-final p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

.benefit-grid,
.faq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.benefit-grid article,
.faq-grid article,
.price-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.benefit-grid article,
.faq-grid article {
    display: grid;
    gap: 10px;
    min-height: 220px;
    padding: 22px;
}

.benefit-grid article {
    position: relative;
    align-content: start;
    gap: 10px;
    min-height: 152px;
    overflow: hidden;
    border-color: rgba(196, 209, 212, 0.72);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    box-shadow: 0 10px 24px rgba(43, 47, 51, 0.08);
    padding: 18px 20px 20px;
}

.benefit-grid article::before {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-primary);
    content: "";
}

.benefit-grid article:nth-child(2)::before {
    background: var(--accent-purple);
}

.benefit-grid article:nth-child(3)::before {
    background: var(--accent-amber);
}

.benefit-grid article:nth-child(4)::before {
    background: var(--accent-blue);
}

.benefit-grid span {
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
}

.benefit-grid h3,
.faq-grid h3,
.price-card h3 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.18;
}

.benefit-grid p,
.faq-grid p {
    margin: 0;
    color: var(--muted);
}

.benefit-grid p {
    font-size: 16px;
    line-height: 1.38;
}

.landing-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1fr);
    gap: 44px;
    align-items: center;
}

.feature-alt {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 0.88fr);
}

.module-feature {
    position: relative;
    gap: 38px;
    margin-top: 0;
    margin-bottom: 24px;
    overflow: hidden;
    padding-top: 46px;
    padding-bottom: 46px;
    border: 1px solid rgba(196, 209, 212, 0.76);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 55%, #eef8f8 100%);
    box-shadow: 0 14px 34px rgba(43, 47, 51, 0.07);
}

.module-feature::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: var(--accent-purple);
    content: "";
}

.module-feature-estacionamiento {
    border-color: rgba(183, 121, 31, 0.22);
    background: linear-gradient(135deg, #ffffff 0%, #fffaf2 55%, #f3fbfb 100%);
}

.module-feature-estacionamiento::before {
    background: var(--accent-amber);
}

.module-feature-flota {
    margin-bottom: 20px;
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 55%, #eef8f8 100%);
}

.module-feature-flota::before {
    background: var(--accent-blue);
}

.module-feature-balance {
    margin-bottom: 24px;
}

.landing-feature img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
}

.module-feature img {
    max-height: 450px;
}

.feature-copy {
    display: grid;
    gap: 14px;
}

.module-feature .feature-copy {
    max-width: 710px;
}

.module-detail-link {
    justify-self: start;
    width: fit-content;
    margin-top: 4px;
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: var(--font-semibold);
    box-shadow: 0 14px 28px rgba(109, 40, 217, 0.18);
}

.module-detail-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(109, 40, 217, 0.18);
}

.module-feature-estacionamiento .module-detail-link {
    background: var(--accent-amber);
    box-shadow: 0 10px 20px rgba(183, 121, 31, 0.15);
}

.module-feature-estacionamiento .module-detail-link:hover {
    box-shadow: 0 14px 24px rgba(183, 121, 31, 0.2);
}

.module-feature-flota .module-detail-link {
    background: var(--accent-blue);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.14);
}

.module-feature-flota .module-detail-link:hover {
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.18);
}

.module-feature-balance .module-detail-link {
    background: var(--accent-violet);
    box-shadow: 0 14px 28px rgba(109, 40, 217, 0.18);
}

.module-feature-balance .module-detail-link:hover {
    box-shadow: 0 16px 28px rgba(109, 40, 217, 0.22);
}

.feature-copy ul,
.price-card ul {
    display: grid;
    gap: 9px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.feature-copy li,
.price-card li {
    position: relative;
    padding-left: 24px;
    color: var(--muted);
}

.feature-copy li::before,
.price-card li::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--brand-primary);
    content: "";
}

.landing-references {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    background: #ffffff;
}

.landing-references .landing-section-head {
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin-right: auto;
    margin-left: auto;
    padding-right: 58px;
    padding-left: 58px;
}

.references-carousel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: center;
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin: 0 auto;
    padding: 0 58px;
}

.references-viewport {
    overflow: hidden;
}

.references-track {
    display: flex;
    gap: 14px;
    overflow: visible;
    padding: 2px 0 6px;
    scrollbar-width: none;
    transform: translate3d(0, 0, 0);
}

.references-track::-webkit-scrollbar {
    display: none;
}

.references-track.is-reference-moving {
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.42, 0, 0.2, 1);
    will-change: transform;
}

.reference-card {
    position: relative;
    display: grid;
    flex: 0 0 calc((100% - 28px) / 3);
    gap: 10px;
    min-width: 0;
    min-height: 176px;
    padding: 18px 20px 16px;
    overflow: hidden;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-radius: 8px;
    background: linear-gradient(180deg, #f7fbfa 0%, #f3f8f7 100%);
    box-shadow: 0 10px 22px rgba(43, 47, 51, 0.06);
    cursor: default;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.reference-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--brand-primary);
    content: "";
}

.reference-card p {
    margin: 0;
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.45;
    display: block;
    overflow: visible;
}

.reference-card strong {
    align-self: end;
    color: var(--ink);
    font-size: 15.5px;
}

.reference-card > span {
    margin-top: -6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.reference-location,
.reference-country {
    display: inline-flex;
    align-items: center;
}

.reference-location {
    flex-wrap: wrap;
    gap: 2px 4px;
}

.reference-country {
    gap: 5px;
    white-space: nowrap;
}

.reference-flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(43, 47, 51, 0.12);
    object-fit: cover;
    vertical-align: -0.08em;
}

.reference-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(109, 40, 217, 0.2);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-primary);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(43, 47, 51, 0.08);
}

.reference-control:disabled {
    cursor: default;
    opacity: 1;
}

.landing-pricing {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    background: var(--brand-neutral);
    color: #fff;
    --price-plan-list-min: 150px;
    --price-action-width: min(92%, 218px);
}

.pricing-inner {
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin-right: auto;
    margin-left: auto;
}

#pricing-module-inmuebles:checked ~ .pricing-inner {
    --pricing-module-accent: var(--accent-purple);
    --pricing-module-border: #5bb7c0;
    --pricing-module-shadow: rgba(11, 127, 137, 0.2);
}

#pricing-module-estacionamiento:checked ~ .pricing-inner {
    --pricing-module-accent: var(--accent-amber);
    --pricing-module-border: #dfae65;
    --pricing-module-shadow: rgba(183, 121, 31, 0.22);
}

#pricing-module-flota:checked ~ .pricing-inner {
    --pricing-module-accent: var(--accent-blue);
    --pricing-module-border: #86a7f5;
    --pricing-module-shadow: rgba(37, 99, 235, 0.18);
}

.landing-pricing .landing-section-head h2,
.landing-pricing .landing-section-head p {
    color: #fff;
}

.pricing-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 24px;
    max-width: none;
}

.pricing-head h2,
.pricing-head p {
    max-width: 900px;
}

.pricing-controls {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.pricing-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 4px;
    min-height: 46px;
    padding: 4px;
    border: 1px solid rgba(231, 243, 244, 0.58);
    border-radius: 8px;
    background: #F3E8FF;
}

.pricing-module-toggle {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
}

.pricing-period-input {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pricing-toggle-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    color: var(--ink);
    font-weight: var(--font-semibold);
    cursor: pointer;
}

.pricing-toggle-annual {
    color: var(--brand-primary);
}

.pricing-module-inmuebles {
    color: var(--accent-purple);
}

.pricing-module-estacionamiento {
    color: var(--accent-amber-text);
}

.pricing-module-flota {
    color: var(--accent-blue);
}

#pricing-monthly:checked ~ .pricing-inner .pricing-toggle-monthly {
    background: #111417;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 20, 23, 0.16);
}

#pricing-annual:checked ~ .pricing-inner .pricing-toggle-annual {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22);
}

#pricing-module-inmuebles:checked ~ .pricing-inner .pricing-module-inmuebles {
    background: var(--accent-purple);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(11, 127, 137, 0.22);
}

#pricing-module-estacionamiento:checked ~ .pricing-inner .pricing-module-estacionamiento {
    background: var(--accent-amber);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(183, 121, 31, 0.22);
}

#pricing-module-flota:checked ~ .pricing-inner .pricing-module-flota {
    background: var(--accent-blue);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

#pricing-monthly:focus-visible ~ .pricing-inner .pricing-toggle-monthly,
#pricing-annual:focus-visible ~ .pricing-inner .pricing-toggle-annual,
#pricing-module-inmuebles:focus-visible ~ .pricing-inner .pricing-module-inmuebles,
#pricing-module-estacionamiento:focus-visible ~ .pricing-inner .pricing-module-estacionamiento,
#pricing-module-flota:focus-visible ~ .pricing-inner .pricing-module-flota {
    outline: 3px solid rgba(231, 243, 244, 0.86);
    outline-offset: 3px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.price-card {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 14px;
    padding: 22px;
    color: var(--ink);
}

.price-card.is-featured {
    border-color: var(--pricing-module-border, #66b5bd);
    box-shadow: 0 12px 34px var(--pricing-module-shadow, rgba(109, 40, 217, 0.2));
}

.price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 52px;
    margin: 0;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
}

.price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-value > b {
    color: inherit;
    font: inherit;
}

.price-value.billing-annual {
    display: none;
}

#pricing-annual:checked ~ .pricing-inner .billing-monthly {
    display: none;
}

#pricing-annual:checked ~ .pricing-inner .price-value.billing-annual {
    display: flex;
}

.price small,
.price-value > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.price-card li {
    font-size: 15px;
    line-height: 1.32;
}

.price-plan-list strong {
    color: var(--ink);
}

.landing-pricing .price-card li::before {
    background: var(--pricing-module-accent, var(--brand-primary));
}

.price-card a {
    align-self: end;
    justify-self: center;
    width: var(--price-action-width);
    margin-top: 6px;
    background: var(--brand-neutral);
    color: #fff;
}

.price-card.is-featured a {
    width: min(86%, 204px);
    background: var(--pricing-module-accent, var(--brand-primary));
}

.pricing-discounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.pricing-discounts article {
    display: grid;
    gap: 8px;
    min-height: 146px;
    padding: 22px;
    border: 1px solid rgba(231, 243, 244, 0.34);
    border-radius: 8px;
    background: rgba(231, 243, 244, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pricing-discounts article.is-active {
    border-color: var(--pricing-module-border, #66b5bd);
    background: var(--pricing-module-accent, var(--brand-primary));
    box-shadow: 0 16px 32px var(--pricing-module-shadow, rgba(109, 40, 217, 0.22));
}

.pricing-discounts article[data-discount-card="annual"].is-active {
    border-color: rgba(190, 75, 91, 0.72);
    background: var(--accent-rose);
    box-shadow: 0 16px 32px rgba(190, 75, 91, 0.24);
}

.pricing-discounts span {
    color: #ffffff;
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.pricing-discounts strong {
    color: #fff;
    font-size: 30px;
    line-height: 1;
}

.pricing-discounts p,
.pricing-note {
    margin: 0;
    color: #ffffff;
}

.pricing-note {
    margin-top: 16px;
    font-weight: 600;
}

.landing-faq {
    background: #fff;
}

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

.faq-grid article {
    min-height: 150px;
}

.landing-contact {
    background: #f8fbfb;
    padding-bottom: 70px;
}

.landing-contact-head {
    display: grid;
    gap: 8px;
    max-width: 760px;
    margin-bottom: 26px;
}

.landing-contact-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.08;
}

.landing-contact-form {
    display: grid;
    gap: 22px;
    align-items: start;
    max-width: 1320px;
}

.landing-contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(320px, 520px);
    gap: 18px 32px;
    align-items: start;
}

.landing-contact-fields {
    display: grid;
    gap: 14px;
}

.landing-contact-message {
    display: grid;
    gap: 14px;
}

.landing-contact-form label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-size: 16px;
    font-weight: var(--font-medium);
}

.landing-contact-phone-field {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-size: 16px;
    font-weight: var(--font-medium);
}

.landing-phone-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

.landing-phone-country {
    min-width: 0;
}

.landing-contact-form input,
.landing-contact-form textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

.landing-contact-form input {
    min-height: 50px;
    padding: 0 14px;
}

.landing-contact .country-picker-button {
    grid-template-columns: 24px auto;
    justify-content: center;
    min-height: 50px;
    height: 100%;
    padding: 0 10px;
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card);
}

.landing-contact .country-picker-menu {
    z-index: 2000;
    width: min(320px, calc(100vw - 32px));
}

.landing-contact .country-picker.is-open {
    z-index: 3000;
}

.landing-contact-form textarea {
    min-height: 170px;
    resize: vertical;
    padding: 14px;
}

.landing-contact-form input:focus,
.landing-contact-form textarea:focus {
    outline: 3px solid rgba(109, 40, 217, 0.14);
    border-color: var(--brand-primary);
}

.landing-contact-submit {
    justify-self: start;
    border: 0;
    font-family: var(--font-button);
    font-weight: var(--font-semibold);
    background: var(--brand-primary);
    color: #ffffff;
    cursor: pointer;
}

.landing-contact-notice {
    max-width: 760px;
    margin: 0;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 600;
}

.landing-contact-notice.is-ok {
    background: rgba(0, 105, 122, 0.1);
    color: var(--brand-primary);
}

.landing-contact-notice.is-error {
    background: rgba(191, 72, 72, 0.1);
    color: #9f2f2f;
}

.landing-final {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-top: 82px;
    padding-bottom: 100px;
}

.landing-final img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.landing-final > div {
    display: grid;
    gap: 18px;
}

.landing-bottom-bar {
    background:
        radial-gradient(circle at 18% 18%, rgba(11, 127, 137, 0.26), transparent 30%),
        linear-gradient(135deg, #063942 0%, #004f5a 52%, #06343d 100%);
    color: #ffffff;
}

.landing-bottom-inner {
    display: grid;
    gap: clamp(9px, 1.25vw, 14px);
    padding: clamp(18px, 2.35vw, 25px) var(--landing-section-inline) clamp(11px, 1.45vw, 14px);
}

.landing-bottom-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.18fr) minmax(170px, 0.58fr) minmax(260px, 0.82fr) minmax(180px, 0.54fr);
    gap: clamp(16px, 2.7vw, 38px);
    align-items: start;
}

.landing-bottom-brand,
.landing-bottom-column {
    display: grid;
    gap: 8px;
    align-content: start;
}

.landing-bottom-brand-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.landing-bottom-logo {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.16);
}

.landing-bottom-logo img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.landing-bottom-brand strong {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: clamp(24px, 2.5vw, 31px);
    font-weight: var(--font-regular);
    line-height: 0.98;
    letter-spacing: 0;
}

.landing-bottom-brand p {
    max-width: 300px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 400;
    line-height: 1.22;
}

.landing-bottom-column h2 {
    margin: 0;
    color: #4fe2e2;
    font-family: var(--font-title);
    font-size: clamp(14px, 1.08vw, 15px);
    font-weight: 400;
    line-height: 1.1;
}

.landing-bottom-column a {
    color: #ffffff;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.landing-bottom-product,
.landing-bottom-legal nav {
    gap: 6px;
}

.landing-bottom-column a:hover {
    color: #ffffff;
    opacity: 1;
}

.landing-bottom-email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.landing-bottom-email svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #4fe2e2;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-bottom-legal {
    gap: 14px;
}

.landing-bottom-legal nav {
    display: grid;
}

.landing-bottom-socials {
    display: flex;
    gap: 8px;
}

.landing-bottom-social {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #4fe2e2;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
}

.landing-bottom-social:hover {
    background: rgba(79, 226, 226, 0.1);
}

.landing-bottom-social img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.landing-bottom-copy {
    margin: 0;
    padding-top: clamp(8px, 1.05vw, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
}

.module-public-hero {
    padding: 24px 58px 76px;
    background: linear-gradient(180deg, #e8f5f6 0%, #ffffff 100%);
}

.module-public-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
    gap: 48px;
    align-items: center;
    width: calc(100% - var(--landing-page-gutter));
    max-width: var(--landing-wide);
    margin: 78px auto 0;
}

.module-public-copy {
    display: grid;
    gap: 16px;
}

.module-public-copy h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 46px;
    font-weight: var(--font-semibold);
    line-height: 1.06;
}

.module-public-copy p:not(.eyebrow) {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.48;
}

.module-public-hero-inner > img {
    width: 100%;
    border: 1px solid rgba(216, 227, 229, 0.72);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(43, 47, 51, 0.12);
}

.module-public-section {
    padding-top: 68px;
}

.module-public-benefits,
.module-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.module-public-benefits article {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 132px;
    padding: 20px;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-left: 5px solid var(--brand-primary);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.38;
    box-shadow: var(--shadow-card);
}

.module-public-benefits article strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.28;
}

.module-public-benefits article span {
    display: block;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.46;
}

.module-plan-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 312px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.module-plan-card.is-featured {
    border-color: rgba(109, 40, 217, 0.36);
    box-shadow: 0 14px 34px rgba(109, 40, 217, 0.14);
}

.module-plan-card span {
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.module-plan-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 30px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

.module-plan-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}

.module-plan-card ul {
    display: grid;
    gap: 9px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.module-plan-card li {
    position: relative;
    padding-left: 22px;
    color: var(--muted);
}

.module-plan-card li::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-primary);
    content: "";
}

@media (max-width: 1180px) {
    .location-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .location-section > label,
    .location-section > .logo-upload-field,
    .location-section .location-phone-field,
    .location-section .employee-enable-field,
    .space-location-list-grid,
    .location-section .floor-control-field,
    .location-section .variable-select-list-field {
        grid-column: span 1;
    }

    .location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) :is(.location-phone-field, .location-whatsapp-field) {
        grid-column: span 1;
    }

    .location-section .address-map-field,
    .location-section .variable-select-list-field.location-cash-field {
        grid-column: span 1;
    }

    .location-section .location-social-grid,
    .location-section .space-location-list-grid {
        grid-column: 1 / -1;
    }

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

    .parking-entry-modes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .landing-page {
        --landing-page-gutter: 56px;
        --landing-page-gutter-half: 28px;
        --landing-section-pad: 28px;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell.is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        align-items: stretch;
        height: auto;
        padding: 18px 16px;
    }

    .sidebar-toggle {
        display: none;
    }

    .app-shell.is-sidebar-collapsed .brand {
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 12px;
    }

    .app-shell.is-sidebar-collapsed .brand-copy,
    .app-shell.is-sidebar-collapsed .nav-label,
    .app-shell.is-sidebar-collapsed .sidebar-logout-label {
        width: auto;
        opacity: 1;
        pointer-events: auto;
    }

    .app-shell.is-sidebar-collapsed .nav-link {
        justify-content: flex-start;
        gap: 10px;
        padding: 0 12px;
    }

    .app-shell.is-sidebar-collapsed .sidebar-logout-button {
        display: inline-flex;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 0 14px;
    }

    .nav-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sidebar-footer {
        display: none;
    }

    .summary-band,
    .module-hero,
    .service-billing-panel,
    .work-grid {
        grid-template-columns: 1fr;
    }

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

    .service-billing-action {
        justify-items: start;
    }

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

    .landing-hero {
        min-height: 700px;
        padding: 22px 28px 58px;
    }

    .landing-hero-copy {
        max-width: var(--landing-wide);
        margin-top: 100px;
        padding-right: min(48vw, 560px);
    }

    .landing-hero-copy .eyebrow {
        font-size: 28.8px;
    }

    .landing-hero-copy h1 {
        font-size: 43.2px;
    }

    .landing-hero-copy p:not(.eyebrow) {
        white-space: normal;
    }

    .landing-hero-art {
        bottom: 96px;
        width: 560px;
        max-width: 48vw;
    }

    .landing-section,
    .landing-feature,
    .landing-final {
        padding-right: var(--landing-section-inline);
        padding-left: var(--landing-section-inline);
    }

    .landing-references {
        padding-right: 0;
        padding-left: 0;
    }

    .landing-pricing {
        padding-right: 0;
        padding-left: 0;
    }

    .landing-references .landing-section-head,
    .references-carousel {
        padding-right: 28px;
        padding-left: 28px;
    }

    .module-public-hero-inner {
        grid-template-columns: 1fr;
    }

    .module-public-benefits,
    .module-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

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

    .payment-pdf-preview {
        min-height: 360px;
    }

    .payment-pdf-preview iframe {
        min-height: 420px;
    }
}

@media (max-width: 820px) {
    .landing-page {
        --landing-page-gutter: 32px;
        --landing-page-gutter-half: 16px;
        --landing-section-pad: 16px;
    }

    .content {
        padding: 16px;
    }

    .balance-rule-options {
        grid-template-columns: 1fr;
    }

    .balance-rule-weekdays {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .entry-form.compact-form.report-message-contact-form {
        grid-template-columns: 1fr;
    }

    .report-message-contact-form button {
        width: 100%;
    }

    .report-message-preset-row {
        align-items: stretch;
        flex-direction: column;
    }

    .report-message-preset-row .button {
        width: 100%;
    }

    .report-message-name-choice {
        grid-template-columns: 1fr;
    }

    .entry-form.report-pdf-form {
        grid-template-columns: 1fr;
    }

    .report-pdf-primary-fields {
        flex-direction: column;
    }

    .report-pdf-primary-fields > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .report-pdf-model-grid {
        grid-template-columns: 1fr;
    }

    .report-pdf-preview-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-pdf-preview-heading p {
        text-align: left;
    }

    .report-pdf-preview-stage {
        min-height: 520px;
        padding: 8px;
    }

    .report-pdf-preview-image {
        width: 100%;
    }

    .report-pdf-form > .span-2 {
        grid-column: auto;
    }

    .report-pdf-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .report-pdf-form .report-pdf-actions button {
        width: 100%;
    }

    .topbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .topbar-side {
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }

    .topbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-parking-logo {
        width: 40px;
        height: 40px;
    }

    .topbar-user {
        width: 100%;
    }

    .topbar-user strong {
        max-width: none;
    }

    .logout-button {
        width: 100%;
    }

    .topbar h1 {
        font-size: 27px;
    }

    .parking-title-picker {
        align-items: center;
    }

    .parking-title-name {
        max-width: 100%;
    }

    .summary-copy h2,
    .module-hero h2 {
        font-size: 23px;
    }

    .nav-list,
    .module-grid,
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .module-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .module-control-row {
        align-items: stretch;
        flex-direction: column;
    }

    .module-filters {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }

    .summary-panel-header,
    .summary-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .summary-filter-form,
    .summary-filter-form label {
        width: 100%;
    }

    .summary-filter-form {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .summary-filter-form select {
        width: min(100%, 220px);
    }

    .record-filter-form.summary-period-filter-form {
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
        margin-left: 0;
    }

    .record-filter-form.summary-period-filter-form label,
    .record-filter-form.summary-period-filter-form select {
        width: 100%;
        min-width: 0;
    }

    .search-input,
    .year-form,
    .month-form {
        width: 100%;
    }

    .module-tabs {
        width: 100%;
    }

    .module-tabs a {
        flex: 1 1 auto;
    }

    .entry-form,
    .variables-form,
    .compact-form {
        grid-template-columns: 1fr;
    }

    .vehicle-period-rate-controls {
        grid-template-columns: 1fr;
    }

    .location-section {
        grid-template-columns: 1fr;
    }

    .variables-subsection-body.location-section > .variable-select-list-field.location-cash-field {
        grid-column: 1 / -1;
    }

    .parking-entry-modes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking-fraction-settings {
        grid-template-columns: 1fr;
    }

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

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

    .variable-row-grid > span {
        display: none;
    }

    .balance-config-add {
        align-items: stretch;
        flex-direction: column;
    }

    .balance-config-add-actions {
        justify-content: space-between;
    }

    .balance-config-scroll {
        overflow: visible;
        padding-bottom: 0;
    }

    .variable-row-grid.balance-service-row-grid,
    .variable-row-grid.balance-card-row-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .balance-config-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        min-width: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
    }

    .balance-config-cell {
        display: grid;
        grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
    }

    .balance-config-cell::before {
        align-self: center;
        color: var(--muted);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .variable-row-grid-vehicles .variable-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .variable-row-grid-vehicles .vehicle-category-main-cell,
    .variable-row-grid-vehicles .vehicle-category-models-cell {
        grid-column: 1 / -1;
    }

    .variable-row-grid-vehicles .vehicle-category-capacity-cell {
        grid-column: 1;
    }

    .variable-row-grid-vehicles .variable-row .variable-row-actions {
        grid-column: 2;
        justify-self: end;
    }

    .entry-form .variable-row .mini-button,
    .variable-collapsible-section .variable-row .mini-button {
        width: 100%;
    }

    .variables-shell > .variables-save-button {
        justify-self: stretch;
        width: 100%;
    }

    .floor-setup-form,
    .floor-setup-section,
    .floor-setup-vehicle-counts,
    .availability-row {
        grid-template-columns: 1fr;
    }

    .floor-setup-grid-heading {
        display: none;
    }

    .floor-setup-section {
        min-width: 0;
    }

    .floor-setup-name-field,
    .floor-setup-total-field {
        padding-top: 0;
    }

    .floor-setup-vehicle-counts {
        display: grid;
        gap: 8px;
    }

    .span-2,
    .location-phone-field {
        grid-column: auto;
    }

    .location-section:is([data-location-kind="estacionamiento"], [data-location-kind="alquileres"]) :is(.location-phone-field, .location-whatsapp-field) {
        grid-column: auto;
    }

    .phone-field {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .contact-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-shell {
        padding: 16px;
    }

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

    .public-location-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-whatsapp-button {
        width: 100%;
    }

    .landing-map-head,
    .landing-map-summary {
        grid-template-columns: 1fr;
    }

    .landing-map-open {
        width: 100%;
    }

    .landing-map-shell,
    .landing-map-canvas {
        min-height: 360px;
        height: 360px;
    }

    .public-link-slug-field {
        grid-template-columns: 1fr;
    }

    .public-link-slug-field > span {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .public-link-qr-frame {
        width: 150px;
        height: 150px;
    }

    .public-link-qr {
        justify-self: start;
        width: 132px;
        height: 132px;
    }

    .public-price-grid,
    .public-price-result {
        grid-template-columns: 1fr;
    }

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

    .public-price-detail {
        grid-column: auto;
    }

    .country-picker-menu {
        width: min(310px, calc(100vw - 48px));
    }

    .record-modal {
        align-items: stretch;
        padding: 12px;
    }

    .record-modal-panel {
        max-height: calc(100vh - 24px);
        padding: 16px;
    }

    .record-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .record-modal-actions .button,
    .record-modal-actions .inline-form {
        width: 100%;
    }

    .record-modal-actions .inline-form .button {
        width: 100%;
    }

    .parking-record-picker-selection {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .contact-record-picker-option {
        grid-template-columns: minmax(88px, 0.75fr) minmax(0, 1.25fr);
        gap: 10px 14px;
    }

    .contact-record-picker-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-record-picker-list {
        grid-template-columns: 1fr;
    }

    .report-message-header {
        align-items: stretch;
        flex-direction: column;
    }

    .report-message-header .button {
        width: 100%;
    }

    .contact-message-tabs {
        grid-template-columns: 1fr;
    }

    .increment-mode-grid {
        grid-template-columns: 1fr;
    }

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

    .employee-dialog-layout {
        display: block;
    }

    .employee-dialog-main {
        margin-bottom: 16px;
    }

    .employee-entry-body {
        gap: 12px;
    }

    .employee-month-calendar {
        overflow-x: auto;
    }

    .employee-month-weekdays,
    .employee-month-grid {
        min-width: 760px;
        grid-template-columns: repeat(7, minmax(96px, 1fr));
    }

    .employee-month-day,
    .employee-month-day.is-outside {
        min-height: 132px;
    }

    .employee-hour-list-head {
        display: none;
    }

    .employee-hour-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .employee-hour-timeline {
        grid-column: auto;
    }

    .employee-contract-section {
        position: static;
    }

    .employee-contract-actions {
        align-items: stretch;
        flex: 1 0 100%;
        flex-direction: column;
        margin-right: 0;
    }

    .employee-contract-actions .button {
        width: 100%;
    }

    .employee-contract-preview {
        min-height: 220px;
    }

    .employee-actions {
        justify-content: stretch;
    }

    .employee-actions .mini-button {
        flex: 1;
    }

    .employee-section-grid,
    .employee-function-list {
        grid-template-columns: 1fr;
    }

    .employee-rotation-intro {
        align-items: center;
        flex-direction: row;
    }

    .employee-rotation-settings {
        grid-template-columns: 1fr;
    }

    .employee-rotation-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-rotation-calendar-body,
    .employee-rotation-day-detail-body {
        min-width: 0;
        overflow: visible;
    }

    .employee-rotation-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-rotation-preview-cell {
        min-height: 88px;
    }

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

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

    .payment-pdf-preview {
        min-height: 300px;
    }

    .payment-pdf-preview iframe {
        min-height: 320px;
    }

    .landing-hero {
        min-height: 0;
        padding: 18px 16px 36px;
    }

    .landing-hero::after {
        display: none;
    }

    .landing-nav {
        display: flex;
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-brand .brand-mark {
        width: 37.2px;
        height: 37.2px;
    }

    .landing-brand .brand-wordmark {
        width: 162px;
        max-width: 38.4vw;
    }

    .landing-nav-links {
        align-items: stretch;
        width: 100%;
        flex-direction: column;
    }

    .landing-nav-actions {
        align-items: stretch;
        width: 100%;
        flex-direction: column;
    }

    .landing-nav-menu > div {
        position: static;
        margin-top: 8px;
        box-shadow: var(--shadow-card);
    }

    .landing-command,
    .landing-register,
    .landing-primary,
    .landing-secondary {
        width: 100%;
    }

    .landing-hero-copy {
        max-width: none;
        margin-top: 48px;
        padding-right: 0;
    }

    .landing-hero-copy h1 {
        font-size: 34.2px;
    }

    .landing-hero-copy p:not(.eyebrow) {
        font-size: 14.4px;
    }

    .landing-hero-copy .eyebrow {
        font-size: 27px;
    }

    .landing-hero-art {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        max-width: 100%;
        width: 100%;
        margin-top: 26px;
    }

    .landing-trust,
    .benefit-grid,
    .landing-faq-inner,
    .faq-grid,
    .landing-contact-form,
    .module-public-benefits,
    .module-plan-grid,
    .pricing-grid,
    .pricing-discounts,
    .landing-feature,
    .feature-alt,
    .landing-final {
        grid-template-columns: 1fr;
    }

    .landing-trust {
        width: auto;
        margin: 0 16px;
    }

    .landing-section,
    .landing-feature,
    .landing-final,
    .module-public-hero {
        padding: 42px 16px;
    }

    .landing-bottom-inner {
        gap: 14px;
        padding: 20px 16px 13px;
    }

    .landing-bottom-main {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .landing-bottom-brand,
    .landing-bottom-column,
    .landing-bottom-legal nav {
        justify-items: center;
        text-align: center;
    }

    .landing-bottom-brand-line {
        justify-content: center;
    }

    .landing-bottom-brand p {
        text-align: center;
    }

    .landing-bottom-socials {
        justify-content: center;
    }

    .landing-bottom-copy {
        padding-top: 11px;
    }

    .landing-contact-form textarea {
        min-height: 172px;
    }

    .landing-benefits {
        padding-bottom: 30px;
    }

    .module-feature {
        gap: 24px;
        margin-bottom: 18px;
        padding: 30px 18px;
    }

    .module-feature-flota {
        margin-bottom: 16px;
    }

    .module-feature img {
        max-height: 320px;
    }

    .module-public-hero-inner {
        width: 100%;
        margin-top: 44px;
    }

    .module-public-copy h1 {
        font-size: 34px;
    }

    .landing-references {
        padding-right: 0;
        padding-left: 0;
    }

    .landing-pricing {
        padding-right: 0;
        padding-left: 0;
    }

    .landing-references .landing-section-head,
    .references-carousel {
        padding-right: 16px;
        padding-left: 16px;
    }

    .references-carousel {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 8px;
    }

    .reference-control {
        width: 38px;
        height: 38px;
        font-size: 26px;
    }

    .reference-card {
        flex-basis: 100%;
    }

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

    .landing-section-head h2,
    .landing-contact-head h2,
    .feature-copy h2,
    .landing-final h2 {
        font-size: 28px;
    }

    .benefit-grid article,
    .faq-grid article {
        min-height: 0;
    }

    .price {
        font-size: 44px;
    }

    .pricing-head {
        grid-template-columns: 1fr;
    }

    .pricing-controls {
        grid-row: auto;
        grid-column: auto;
        justify-content: stretch;
        width: 100%;
    }

    .pricing-toggle {
        width: 100%;
        max-width: none;
    }

    .pricing-module-toggle {
        grid-template-columns: 1fr;
    }

    .bar-row {
        grid-template-columns: 62px minmax(120px, 1fr);
        gap: 8px 10px;
        padding: 8px;
    }

    .bar-row strong {
        grid-column: 2;
        text-align: left;
    }

    .kpi-card strong {
        font-size: 27px;
    }
}

@media (max-width: 520px) {
    .employee-rotation-intro {
        gap: 8px;
        padding: 9px 10px;
    }

    .employee-rotation-intro-copy small {
        font-size: 11px;
    }

    .employee-rotation-status {
        padding-inline: 7px;
        font-size: 10px;
    }

    .employee-rotation-settings {
        gap: 10px;
        padding: 10px;
    }

    .employee-rotation-step {
        padding: 10px;
    }

    .employee-rotation-rule-grid,
    .employee-rotation-source-options,
    .employee-rotation-overview,
    .employee-rotation-preview-grid {
        grid-template-columns: 1fr;
    }

    .employee-rotation-calendar-body {
        padding: 10px;
    }

    .employee-rotation-day-detail > summary {
        grid-template-columns: minmax(0, 1fr) 18px;
    }

    .employee-rotation-day-detail > summary small {
        grid-row: 2;
        grid-column: 1;
        text-align: left;
    }

    .employee-rotation-day-detail > summary::after {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .employee-rotation-preview-cell {
        min-height: 0;
    }
}
/* Landing layout alignment */
.landing-page {
    --landing-max: 1400px;
    --landing-gutter: clamp(16px, 3vw, 48px);
    --landing-container-max: calc(var(--landing-max) + var(--landing-gutter) + var(--landing-gutter));
    --landing-nav-inline: max(var(--landing-gutter), calc((100vw - var(--landing-container-max)) / 2 + var(--landing-gutter)));
    --landing-nav-space: 96px;
    --landing-brand-wordmark-width: clamp(144px, 13.8vw, 180px);
    --landing-brand-mark-size: clamp(60.3px, 5.78vw, 75.4px);
    --landing-section-space: clamp(58px, 7vw, 88px);
    --landing-compact-section-space: clamp(29px, 3.5vw, 44px);
    width: 100%;
    max-width: none;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    zoom: 1;
}

.landing-page img {
    max-width: 100%;
}

.landing-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.08fr);
    grid-template-areas: "copy art";
    gap: clamp(18px, 3vw, 42px);
    align-items: center;
    width: 100%;
    max-width: var(--landing-container-max);
    min-height: 0;
    overflow: visible;
    margin: 0 auto;
    padding: 24px var(--landing-gutter) clamp(54px, 7vw, 78px);
    background: transparent;
}

.landing-hero::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    background: linear-gradient(180deg, #e8f5f6 0%, #f6fbfb 100%);
    content: "";
    transform: translateX(-50%);
}

.landing-hero::after {
    display: none;
}

.landing-hero .landing-nav {
    grid-area: nav;
    width: 100%;
    max-width: none;
    padding: 0;
}

.landing-nav {
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
}

.landing-brand .brand-mark {
    width: var(--landing-brand-mark-size);
    height: var(--landing-brand-mark-size);
}

.landing-brand .brand-wordmark {
    width: var(--landing-brand-wordmark-width);
    max-width: none;
}

.landing-nav-links {
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    gap: 12px 14px;
    font-size: 16px;
}

.landing-nav-actions {
    justify-content: flex-end;
    gap: 12px;
}

.landing-command,
.landing-register {
    font-size: 16px;
}

.landing-hero-copy {
    grid-area: copy;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: 0;
}

.landing-hero-copy .eyebrow {
    max-width: 760px;
    font-size: clamp(25px, 3vw, 34px);
}

.landing-hero-copy p:not(.eyebrow) {
    max-width: 620px;
    white-space: normal;
}

.landing-hero-art {
    position: relative;
    grid-area: art;
    z-index: 1;
    inset: auto;
    justify-self: end;
    width: min(100%, 640px);
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.landing-trust,
.landing-section,
.landing-feature,
.landing-final {
    width: 100%;
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.landing-trust {
    align-items: stretch;
    max-width: var(--landing-container-max);
    margin-top: -24px;
    margin-bottom: clamp(44px, 5vw, 72px);
}

.landing-map-page {
    background:
        radial-gradient(circle at 8% 30%, rgba(11, 127, 137, 0.13), transparent 30rem),
        radial-gradient(circle at 94% 68%, rgba(183, 121, 31, 0.12), transparent 32rem),
        linear-gradient(180deg, #f6fbfb 0%, #f4f7f7 100%);
}

.landing-map-section {
    position: relative;
    display: grid;
    gap: 22px;
    margin-top: clamp(22px, 4vw, 46px);
    margin-bottom: clamp(34px, 5vw, 62px);
}

.landing-map-page .landing-map-section {
    padding-top: calc(var(--landing-nav-space) + 42px);
}

.landing-map-results {
    display: grid;
    gap: 22px;
}

.landing-map-results[hidden],
.landing-map-category-notice[hidden] {
    display: none !important;
}

.landing-map-picker {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(24px, 3vw, 36px);
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(109, 40, 217, 0.28);
    border-radius: 16px;
    background: linear-gradient(135deg, #064f59 0%, #08717d 66%, #1f5594 145%);
    box-shadow: 0 22px 52px rgba(109, 40, 217, 0.22);
}

.landing-map-picker::before,
.landing-map-picker::after {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.landing-map-picker::before {
    top: -170px;
    right: -74px;
    width: 360px;
    height: 360px;
    background: rgba(255, 255, 255, 0.1);
}

.landing-map-picker::after {
    right: 18%;
    bottom: -230px;
    width: 420px;
    height: 420px;
    background: rgba(183, 121, 31, 0.2);
}

.landing-map-picker-copy {
    display: grid;
    gap: 10px;
    max-width: 820px;
}

.landing-map-picker-kicker {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-map-picker h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1.04;
}

.landing-map-picker-copy > p:last-child {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.52;
}

.landing-map-picker-form,
.landing-map-picker-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.landing-map-picker-form fieldset {
    display: grid;
    gap: 18px;
}

.landing-map-picker-form legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.landing-map-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.landing-map-type-card {
    --landing-map-type-accent: var(--brand-primary);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    align-content: start;
    min-height: 156px;
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #000000;
    cursor: pointer;
    box-shadow: 0 13px 30px rgba(4, 42, 49, 0.16);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.landing-map-type-card-property {
    --landing-map-type-accent: #8f590b;
}

.landing-map-type-card-vehicle {
    --landing-map-type-accent: #255b9b;
}

.landing-map-type-card:hover {
    border-color: color-mix(in srgb, var(--landing-map-type-accent) 48%, transparent);
    box-shadow: 0 17px 36px rgba(4, 42, 49, 0.22);
    transform: translateY(-2px);
}

.landing-map-type-card:has(input:focus-visible) {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.landing-map-type-card:has(input:checked) {
    border-color: var(--landing-map-type-accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 17px 36px rgba(4, 42, 49, 0.22);
}

.landing-map-type-card:has(input:checked)::after {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: var(--landing-map-type-accent);
    color: #ffffff;
    content: "\2713";
    font-size: 14px;
    font-weight: 700;
}

.landing-map-type-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.landing-map-type-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--landing-map-type-accent) 12%, white);
    color: var(--landing-map-type-accent);
}

.landing-map-type-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.landing-map-type-copy {
    display: grid;
    gap: 5px;
    align-content: center;
    padding-right: 20px;
}

.landing-map-type-copy strong {
    color: inherit;
    font-size: clamp(17px, 1.55vw, 20px);
    line-height: 1.12;
}

.landing-map-type-copy small {
    color: #000000;
    font-size: 13px;
    line-height: 1.35;
}

.landing-map-type-state {
    grid-column: 2;
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--landing-map-type-accent) 10%, white);
    color: var(--landing-map-type-accent);
    font-size: 12px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

.landing-map-picker-submit {
    justify-self: end;
    min-width: 210px;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: #ffffff;
    color: var(--brand-primary);
    box-shadow: 0 10px 24px rgba(4, 42, 49, 0.2);
}

.landing-map-picker-submit:hover:not(:disabled),
.landing-map-picker-submit:focus-visible:not(:disabled) {
    background: #fff8ed;
    color: #004d57;
    transform: translateY(-1px);
}

.landing-map-picker-submit:disabled {
    cursor: default;
    opacity: 1;
}

.landing-map-category-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(109, 40, 217, 0.2);
    border-left: 6px solid var(--accent-amber);
    border-radius: 14px;
    background: linear-gradient(110deg, rgba(231, 243, 244, 0.98) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(255, 248, 237, 0.98) 100%);
    box-shadow: var(--shadow-card);
}

.landing-map-category-notice > div {
    display: grid;
    gap: 8px;
}

.landing-map-category-notice .landing-map-picker-kicker {
    color: var(--brand-primary);
}

.landing-map-category-notice h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.1;
}

.landing-map-category-notice p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.landing-map-page .landing-map-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
}

.landing-map-head {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    overflow: hidden;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(109, 40, 217, 0.26);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #08717d 72%, #1f5594 145%);
    box-shadow: 0 18px 42px rgba(109, 40, 217, 0.2);
}

.landing-map-head::before,
.landing-map-head::after {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.landing-map-head::before {
    top: -118px;
    right: -36px;
    width: 270px;
    height: 270px;
    background: rgba(255, 255, 255, 0.1);
}

.landing-map-head::after {
    right: -74px;
    bottom: -132px;
    width: 310px;
    height: 310px;
    background: rgba(183, 121, 31, 0.2);
}

.landing-map-head .landing-section-head {
    max-width: 920px;
    margin: 0;
}

.landing-map-head .landing-section-head p:not(.eyebrow) {
    max-width: 840px;
    color: #ffffff;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.52;
}

.landing-map-open {
    min-height: 44px;
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: #ffffff;
    color: var(--brand-primary);
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(4, 42, 49, 0.2);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.landing-map-open:hover:not(:disabled),
.landing-map-open:focus-visible:not(:disabled) {
    background: #fff8ed;
    box-shadow: 0 14px 30px rgba(4, 42, 49, 0.25);
    transform: translateY(-1px);
}

.landing-map-open:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.48);
    outline-offset: 3px;
}

.landing-map-open:disabled {
    cursor: wait;
    opacity: 1;
}

.landing-map-summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(230px, 0.6fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(231, 243, 244, 0.98) 0%, rgba(255, 255, 255, 0.94) 58%, rgba(255, 248, 237, 0.98) 100%);
    box-shadow: var(--shadow-card);
}

.landing-map-summary span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--brand-primary);
    font-weight: var(--font-semibold);
}

.landing-map-summary span::before {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent-purple);
    box-shadow: 0 0 0 5px rgba(11, 127, 137, 0.12);
    content: "";
}

.landing-map-summary strong {
    padding-left: 18px;
    border-left: 1px solid rgba(109, 40, 217, 0.16);
    color: var(--ink);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
}

.landing-map-summary p {
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid rgba(183, 121, 31, 0.2);
    color: var(--muted);
    font-size: 15px;
    line-height: 1.42;
}

.landing-map-shell {
    position: relative;
    min-height: clamp(340px, 52vw, 620px);
    padding: 8px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--accent-purple) 68%, var(--accent-amber) 118%);
    box-shadow: 0 20px 48px rgba(109, 40, 217, 0.2);
}

.landing-map-canvas {
    width: 100%;
    height: clamp(340px, 52vw, 620px);
    overflow: hidden;
    border: 0;
    border-radius: 9px;
    background: var(--brand-primary-soft);
}

.landing-map-info-window {
    color: #000000;
    color-scheme: light;
    font-family: var(--font-body);
    line-height: 1.45;
}

.landing-map-info-window a {
    color: var(--brand-primary);
    font-weight: var(--font-semibold);
}

.landing-map-list {
    display: grid;
    gap: 14px;
}

.landing-map-list-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(196, 209, 212, 0.86);
    padding-bottom: 12px;
}

.landing-map-list-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.15;
}

.landing-map-list-head span,
.landing-map-empty {
    color: var(--muted);
    font-weight: var(--font-semibold);
}

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

.landing-map-list-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(196, 209, 212, 0.86);
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(231, 243, 244, 0.84) 0%, rgba(255, 255, 255, 0.9) 44%);
    box-shadow: 0 8px 20px rgba(43, 47, 51, 0.05);
}

.landing-map-list-item:nth-child(3n + 2) {
    border-left-color: var(--accent-amber);
}

.landing-map-list-item:nth-child(3n + 3) {
    border-left-color: var(--accent-blue);
}

.landing-map-list-item h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.2;
}

.landing-map-list-item p,
.landing-map-list-item span {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
}

.landing-map-list-actions {
    display: grid;
    gap: 6px;
    justify-items: end;
    white-space: nowrap;
}

.landing-map-list-actions small {
    color: var(--muted);
    font-weight: var(--font-semibold);
}

.landing-map-list-actions a {
    color: var(--brand-primary);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.landing-map-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed rgba(196, 209, 212, 0.95);
    border-radius: 8px;
    background: rgba(231, 243, 244, 0.56);
}

@media (max-width: 1040px) {
    .landing-map-type-grid {
        grid-template-columns: 1fr;
    }

    .landing-map-type-card {
        min-height: 0;
    }
}

@media (max-width: 820px) {
    .landing-map-picker {
        padding: 26px 20px;
    }

    .landing-map-type-grid,
    .landing-map-category-notice,
    .landing-map-head,
    .landing-map-summary {
        grid-template-columns: 1fr;
    }

    .landing-map-picker-submit,
    .landing-map-category-notice .landing-primary {
        width: 100%;
    }

    .landing-map-picker-submit {
        justify-self: stretch;
    }

    .landing-map-head {
        align-items: stretch;
        padding: 24px 20px;
    }

    .landing-map-open {
        width: 100%;
    }

    .landing-map-summary strong,
    .landing-map-summary p {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(109, 40, 217, 0.14);
        border-left: 0;
    }

    .landing-map-shell {
        height: auto;
        min-height: 0;
        padding: 5px;
        border-radius: 12px;
    }

    .landing-map-canvas {
        border-radius: 8px;
    }

    .landing-map-list-head,
    .landing-map-list-item {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .landing-map-list-head {
        display: grid;
    }

    .landing-map-list-actions {
        justify-items: start;
        white-space: normal;
    }
}

.landing-trust article,
.benefit-grid article,
.faq-grid article,
.price-card {
    height: 100%;
}

.landing-section,
.landing-feature,
.landing-final {
    padding-top: var(--landing-section-space);
    padding-bottom: var(--landing-section-space);
}

.landing-section-head,
.landing-contact-head {
    max-width: 760px;
}

.landing-benefits .landing-section-head {
    gap: 20px;
    max-width: 700px;
    margin-bottom: 0;
}

.landing-benefits .landing-section-head h2 span {
    display: block;
}

.pricing-grid {
    align-items: stretch;
}

.landing-benefits {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.74fr);
    gap: clamp(34px, 5vw, 78px);
    align-items: center;
}

.landing-benefits .landing-section-head p:not(.eyebrow) {
    max-width: 660px;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.52;
}

.benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.6vw, 28px);
    align-items: start;
}

.benefit-grid article {
    display: grid;
    grid-template-columns: minmax(74px, 0.2fr) minmax(0, 1fr);
    gap: clamp(18px, 2.8vw, 28px);
    align-items: start;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.benefit-grid article::before {
    display: none;
}

.benefit-grid span {
    display: block;
    color: #be4b5b;
    font-family: var(--font-title);
    font-size: clamp(52px, 7vw, 82px);
    font-weight: var(--font-semibold);
    line-height: 0.85;
    letter-spacing: 0;
}

.landing-benefits.is-scroll-motion-ready .benefit-grid article {
    opacity: 0;
    transform: translateX(-76px);
    will-change: transform, opacity;
}

.landing-benefits.is-scroll-motion-visible .benefit-grid article {
    animation: benefitBlockEnter 0.78s cubic-bezier(0.18, 0.84, 0.28, 1) var(--scroll-motion-delay, 0s) both;
}

.landing-benefits .benefit-grid article:nth-child(1) {
    --scroll-motion-delay: 0s;
}

.benefit-grid article:nth-child(2) span {
    color: #9333EA;
}

.landing-benefits .benefit-grid article:nth-child(2) {
    --scroll-motion-delay: 0.13s;
}

.benefit-grid article:nth-child(3) span {
    color: #b7791f;
}

.landing-benefits .benefit-grid article:nth-child(3) {
    --scroll-motion-delay: 0.26s;
}

.benefit-grid article:nth-child(4) span {
    color: #2563eb;
}

.landing-benefits .benefit-grid article:nth-child(4) {
    --scroll-motion-delay: 0.39s;
}

@keyframes benefitBlockEnter {
    0% {
        opacity: 0;
        transform: translateX(-76px);
    }

    72% {
        opacity: 1;
        transform: translateX(6px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-trust.is-scroll-motion-visible article,
    .landing-benefits.is-scroll-motion-visible .benefit-grid article,
    .landing-faq.is-scroll-motion-visible .faq-grid summary {
        animation: none;
    }

    .landing-trust.is-scroll-motion-ready article,
    .landing-benefits.is-scroll-motion-ready .benefit-grid article,
    .landing-faq.is-scroll-motion-ready .faq-grid summary {
        opacity: 1;
        transform: none;
        filter: none;
        will-change: auto;
    }
}

.benefit-grid h3 {
    margin-top: 6px;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.12;
}

.benefit-grid p {
    max-width: 460px;
    margin-top: 8px;
    font-size: 17px;
    line-height: 1.45;
}

.landing-feature,
.feature-alt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 58px);
}

.module-feature {
    margin-top: 0;
    margin-bottom: clamp(18px, 3vw, 28px);
    padding: clamp(38px, 5vw, 58px) var(--landing-gutter);
    border-right: 1px solid rgba(196, 209, 212, 0.76);
    border-left: 1px solid rgba(196, 209, 212, 0.76);
    border-radius: 8px;
}

.module-feature::before {
    border-radius: 8px 0 0 8px;
}

.module-feature img,
.landing-feature img,
.landing-final img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.module-feature .feature-copy {
    max-width: 560px;
}

.feature-alt .feature-copy {
    justify-self: end;
}

.landing-references,
.landing-pricing,
.landing-faq,
.landing-contact {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.landing-references {
    padding-top: var(--landing-section-space);
    padding-bottom: var(--landing-section-space);
}

.landing-references .landing-section-head,
.references-carousel,
.pricing-inner {
    width: 100%;
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.references-track {
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
}

.reference-card {
    height: 100%;
}

.landing-pricing {
    padding-top: var(--landing-section-space);
    padding-bottom: var(--landing-section-space);
    background: var(--brand-neutral);
    box-shadow: 0 0 0 100vmax var(--brand-neutral);
    clip-path: inset(0 -100vmax);
    color: #fff;
}

.landing-benefits,
.landing-references,
.landing-pricing,
.landing-faq,
.landing-contact {
    padding-top: var(--landing-compact-section-space);
    padding-bottom: var(--landing-compact-section-space);
}

.pricing-inner {
    display: grid;
    gap: 18px;
}

.landing-faq-inner,
.landing-contact > .landing-contact-head,
.landing-contact > .landing-contact-form {
    width: 100%;
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.landing-contact > .landing-contact-head h2 {
    max-width: 760px;
}

.pricing-head {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 660px);
    align-items: end;
    margin-bottom: 6px;
}

.pricing-head h2,
.pricing-head p {
    max-width: 760px;
}

.pricing-controls {
    justify-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    gap: 10px;
    max-width: 660px;
    width: 100%;
}

.price-card {
    grid-template-rows: auto auto minmax(var(--price-plan-list-min), 1fr) auto;
}

.landing-pricing.is-single-module .price-card {
    grid-template-rows: auto auto minmax(var(--price-plan-list-min), 1fr) auto;
    align-content: stretch;
}

.landing-pricing.is-single-module .price-card a {
    align-self: end;
    margin-top: 6px;
}

.landing-pricing.is-single-module {
    --price-plan-list-min: clamp(66px, 5vw, 88px);
}

.landing-pricing.is-two-modules {
    --price-plan-list-min: clamp(112px, 7vw, 138px);
}

.landing-pricing.is-three-modules {
    --price-plan-list-min: clamp(150px, 9vw, 178px);
}

.price-card a {
    height: 48px;
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

.landing-contact-form {
    width: 100%;
    max-width: none;
}

.landing-final {
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
}

.landing-bottom-inner {
    width: 100%;
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.module-public-hero {
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.module-public-hero .landing-nav,
.module-public-hero-inner,
.module-public-section {
    width: 100%;
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--landing-gutter);
    padding-left: var(--landing-gutter);
}

.module-public-hero .landing-nav,
.module-public-hero-inner {
    padding-right: 0;
    padding-left: 0;
}

.landing-page .landing-hero,
.landing-page .module-public-hero {
    padding-top: calc(var(--landing-nav-space) + 24px);
}

.landing-page .landing-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px var(--landing-nav-inline);
    border-bottom: 1px solid rgba(0, 105, 122, 0.12);
    background: rgba(232, 245, 246, 0.94);
    box-shadow: 0 1px 0 rgba(43, 47, 51, 0.04);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: padding 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, opacity 0.18s ease, transform 0.22s ease, visibility 0s linear;
}

.landing-theme-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    box-shadow: none;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.landing-theme-toggle span {
    font-size: 19px;
    line-height: 1;
}

.landing-theme-toggle:hover {
    background: transparent;
    color: var(--brand-primary);
    box-shadow: none;
    transform: translateY(-1px);
}

.landing-theme-toggle:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.22);
    outline-offset: 3px;
}

.landing-page .landing-brand .brand-mark,
.landing-page .landing-brand .brand-wordmark,
.landing-page .landing-nav-links,
.landing-page .landing-nav-actions,
.landing-page .landing-command,
.landing-page .landing-register,
.landing-page .landing-theme-toggle {
    transition: width 0.22s ease, height 0.22s ease, font-size 0.22s ease, gap 0.22s ease, min-height 0.22s ease, padding 0.22s ease, opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.landing-page.is-nav-compact .landing-nav {
    --landing-brand-wordmark-width: clamp(120px, 10.8vw, 144px);
    --landing-brand-mark-size: clamp(50.2px, 4.52vw, 60.3px);
    padding-top: 6px;
    padding-bottom: 6px;
    background: rgba(232, 245, 246, 0.72);
    box-shadow: 0 14px 34px rgba(0, 55, 70, 0.13);
}

.landing-page.is-nav-compact .landing-nav-links {
    gap: 8px 12px;
    font-size: 14px;
}

.landing-page.is-nav-compact .landing-command,
.landing-page.is-nav-compact .landing-register {
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 14px;
}

.landing-page.is-nav-compact .landing-theme-toggle {
    width: 28px;
    height: 28px;
}

.landing-page.is-nav-hidden .landing-nav {
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.landing-page section[id] {
    scroll-margin-top: calc(var(--landing-nav-space) + 18px);
}

.landing-page #contacto {
    scroll-margin-top: 0;
}

.legal-document {
    display: grid;
    gap: clamp(26px, 4vw, 42px);
    max-width: min(100%, 960px);
    padding-top: calc(var(--landing-nav-space) + clamp(36px, 5vw, 64px));
    padding-bottom: clamp(56px, 7vw, 88px);
}

.legal-document-head {
    display: grid;
    gap: 12px;
}

.legal-document-head h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 600;
    line-height: 1.04;
}

.legal-document-head p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.58;
}

.legal-document-head .eyebrow {
    color: var(--brand-primary);
}

.legal-document-head .legal-updated {
    color: var(--ink);
    font-weight: 600;
}

.legal-index {
    display: grid;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.legal-index h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.16;
}

.legal-index ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.45;
}

.legal-index a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.legal-index a:hover {
    color: var(--brand-primary);
}

.legal-document-content {
    display: grid;
    gap: clamp(28px, 4vw, 44px);
}

.legal-document-content section {
    display: grid;
    gap: 11px;
}

.legal-document-content h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    line-height: 1.16;
}

.legal-document-content p,
.legal-document-content li {
    color: var(--muted);
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.68;
}

.legal-document-content p {
    margin: 0;
}

.legal-document-content ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.legal-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legal-contact-links a {
    color: var(--ink);
    font-size: clamp(15px, 1.12vw, 17px);
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

.legal-contact-links a:hover {
    color: var(--brand-primary);
}

.landing-faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
}

.landing-faq-content {
    min-width: 0;
}

.landing-faq .landing-section-head {
    max-width: none;
    margin-bottom: 16px;
    text-align: left;
}

.landing-faq .landing-section-head h2 {
    max-width: none;
    font-size: 36.1px;
}

.landing-faq .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.landing-faq-art {
    width: 100%;
    max-width: 520px;
    justify-self: end;
    object-fit: contain;
}

.faq-grid details {
    border-top: 1px solid rgba(196, 209, 212, 0.78);
}

.faq-grid details:last-child {
    border-bottom: 1px solid rgba(196, 209, 212, 0.78);
}

.faq-grid summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

.landing-faq .faq-grid details:nth-child(1) summary {
    --scroll-motion-delay: 0s;
}

.landing-faq .faq-grid details:nth-child(2) summary {
    --scroll-motion-delay: 0.13s;
}

.landing-faq .faq-grid details:nth-child(3) summary {
    --scroll-motion-delay: 0.26s;
}

.landing-faq .faq-grid details:nth-child(4) summary {
    --scroll-motion-delay: 0.39s;
}

.landing-faq.is-scroll-motion-ready .faq-grid summary {
    opacity: 0;
    transform: translateX(-76px);
    will-change: transform, opacity;
}

.landing-faq.is-scroll-motion-visible .faq-grid summary {
    animation: benefitBlockEnter 0.78s cubic-bezier(0.18, 0.84, 0.28, 1) var(--scroll-motion-delay, 0s) both;
}

.faq-grid summary::-webkit-details-marker {
    display: none;
}

.faq-grid summary::after {
    color: var(--brand-primary);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    content: "+";
}

.faq-grid details[open] summary::after {
    content: "-";
}

.faq-grid details p {
    max-width: 760px;
    margin: -6px 0 22px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
}

.landing-contact {
    background: #f8fbfb;
    box-shadow: 0 0 0 100vmax #f8fbfb;
}

.landing-contact > .landing-contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    justify-content: center;
    justify-items: center;
    margin: 0 auto;
}

.landing-contact .landing-contact-head {
    max-width: none;
    margin-bottom: 0;
    text-align: center;
}

.landing-contact .landing-contact-head h2 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(34px, 3.4vw, 48px);
}

.landing-contact .landing-contact-fields {
    width: 100%;
    max-width: 520px;
}

.landing-contact .landing-contact-layout {
    width: min(100%, 1098px);
    grid-template-columns: minmax(300px, 520px) minmax(380px, 520px);
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
    justify-content: center;
}

.landing-contact .landing-contact-message {
    width: 100%;
    max-width: 520px;
}

.landing-contact .landing-message-field textarea {
    min-height: 178px;
}

.landing-contact .landing-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

.landing-contact-art {
    display: none;
}

.landing-cta-strip {
    padding: clamp(14px, 1.9vw, 22px) var(--landing-gutter);
    background: #eef8f8;
}

.landing-cta-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 4vw, 54px);
    width: 100%;
    max-width: var(--landing-container-max);
    margin: 0 auto;
}

.landing-cta-strip h2 {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: clamp(20px, 2.05vw, 27px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
}

.landing-cta-strip .landing-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

.landing-cta-strip .landing-actions a {
    min-height: 36px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 14px;
    font-weight: 400;
}

.landing-contact-form input::placeholder,
.landing-contact-form textarea::placeholder {
    color: rgba(43, 47, 51, 0.48);
}

html[data-landing-theme="dark"] {
    background: #0f1416;
    color-scheme: dark;
}

html[data-landing-theme="dark"] body.landing-body {
    background: #0f1416;
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-page {
    --ink: #ffffff;
    --muted: #ffffff;
    --muted-soft: #ffffff;
    --line: rgba(196, 224, 226, 0.2);
    --line-strong: rgba(196, 224, 226, 0.3);
    color: var(--ink);
    background: #0f1416;
}

html[data-landing-theme="dark"] .landing-map-page {
    background:
        radial-gradient(circle at 8% 30%, rgba(11, 127, 137, 0.22), transparent 30rem),
        radial-gradient(circle at 94% 68%, rgba(183, 121, 31, 0.14), transparent 32rem),
        #0f1416;
}

html[data-landing-theme="dark"] .landing-map-picker {
    border-color: rgba(120, 205, 210, 0.24);
    background: linear-gradient(135deg, #053f48 0%, #075e68 66%, #193f78 145%);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-map-type-card {
    border-color: rgba(196, 224, 226, 0.16);
    background: rgba(15, 20, 22, 0.92);
    color: #ffffff;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.26);
}

html[data-landing-theme="dark"] .landing-map-type-card-parking {
    --landing-map-type-accent: #78cdd2;
}

html[data-landing-theme="dark"] .landing-map-type-card-property {
    --landing-map-type-accent: #dfae65;
}

html[data-landing-theme="dark"] .landing-map-type-card-vehicle {
    --landing-map-type-accent: #83ace4;
}

html[data-landing-theme="dark"] .landing-map-type-card:hover,
html[data-landing-theme="dark"] .landing-map-type-card:has(input:checked) {
    border-color: var(--landing-map-type-accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 17px 36px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-map-type-copy small {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-map-type-icon,
html[data-landing-theme="dark"] .landing-map-type-state {
    background: color-mix(in srgb, var(--landing-map-type-accent) 22%, #11191b);
}

html[data-landing-theme="dark"] .landing-map-category-notice {
    border-color: rgba(120, 205, 210, 0.22);
    border-left-color: #d49a43;
    background: linear-gradient(110deg, #172b2f 0%, #172124 58%, #211d16 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

html[data-landing-theme="dark"] .landing-map-category-notice .landing-map-picker-kicker {
    color: #8bdcdf;
}

html[data-landing-theme="dark"] .landing-map-category-notice :is(h2, p) {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-map-head {
    border-color: rgba(120, 205, 210, 0.22);
    background: linear-gradient(135deg, #064b55 0%, #0b7079 72%, #193f78 145%);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.32);
}

html[data-landing-theme="dark"] .landing-map-head::after {
    background: rgba(183, 121, 31, 0.24);
}

html[data-landing-theme="dark"] .landing-map-open {
    background: #ffffff;
    color: #6D28D9;
}

html[data-landing-theme="dark"] .landing-map-page :is(
    .landing-map-head h2,
    .landing-map-head p,
    .landing-map-summary span,
    .landing-map-summary strong,
    .landing-map-summary p,
    .landing-map-list-head h2,
    .landing-map-list-head span,
    .landing-map-list-item h3,
    .landing-map-list-item p,
    .landing-map-list-item span,
    .landing-map-list-actions small,
    .landing-map-empty
) {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-map-summary {
    border-color: rgba(120, 205, 210, 0.22);
    background: linear-gradient(110deg, #172b2f 0%, #172124 58%, #211d16 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .landing-map-summary strong {
    border-color: rgba(120, 205, 210, 0.22);
}

html[data-landing-theme="dark"] .landing-map-summary p {
    border-color: rgba(223, 174, 101, 0.24);
}

html[data-landing-theme="dark"] .landing-map-summary span::before {
    background: #78cdd2;
    box-shadow: 0 0 0 5px rgba(120, 205, 210, 0.14);
}

html[data-landing-theme="dark"] .landing-map-shell {
    background: linear-gradient(135deg, #08717d 0%, #9333EA 68%, #9b681d 118%);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-map-canvas {
    background: #172124;
}

html[data-landing-theme="dark"] .landing-map-list-head {
    border-bottom-color: rgba(196, 224, 226, 0.22);
}

html[data-landing-theme="dark"] .landing-map-list-item {
    border-top-color: rgba(196, 224, 226, 0.18);
    border-right-color: rgba(196, 224, 226, 0.18);
    border-bottom-color: rgba(196, 224, 226, 0.18);
    background: linear-gradient(100deg, rgba(109, 40, 217, 0.24) 0%, #172124 44%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

html[data-landing-theme="dark"] .landing-map-list-actions a {
    color: #78cdd2;
}

html[data-landing-theme="dark"] .landing-map-empty {
    border-color: rgba(196, 224, 226, 0.26);
    background: rgba(23, 33, 36, 0.9);
}

html[data-landing-theme="dark"] .legal-document-head h1,
html[data-landing-theme="dark"] .legal-index a,
html[data-landing-theme="dark"] .legal-contact-links a {
    color: #ffffff;
    opacity: 1;
}

html[data-landing-theme="dark"] .legal-index a:hover,
html[data-landing-theme="dark"] .legal-contact-links a:hover {
    color: #C084FC;
}

html[data-landing-theme="dark"] .landing-benefits {
    position: relative;
    background: #0f1416;
    box-shadow: 0 0 0 100vmax #0f1416;
    clip-path: inset(0 -100vmax);
}

html[data-landing-theme="dark"] .landing-hero::before {
    background: linear-gradient(180deg, #13282b 0%, #0f1416 100%);
}

html[data-landing-theme="dark"] .landing-page .landing-nav {
    border-bottom-color: rgba(196, 224, 226, 0.16);
    background: rgba(15, 20, 22, 0.82);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-page.is-nav-compact .landing-nav {
    background: rgba(15, 20, 22, 0.74);
}

html[data-landing-theme="dark"] .landing-brand .brand-neutral,
html[data-landing-theme="dark"] .landing-nav-links,
html[data-landing-theme="dark"] .landing-nav-menu summary {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-brand .brand-primary,
html[data-landing-theme="dark"] .landing-nav-menu summary::after {
    color: #C084FC;
}

html[data-landing-theme="dark"] .landing-hero-copy .eyebrow {
    color: #C084FC;
}

html[data-landing-theme="dark"] .landing-brand .brand-wordmark-light {
    display: none;
}

html[data-landing-theme="dark"] .landing-brand .brand-wordmark-dark {
    display: block;
}

html[data-landing-theme="dark"] .landing-theme-toggle {
    border-color: transparent;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

html[data-landing-theme="dark"] .landing-theme-toggle:hover {
    background: transparent;
    color: #C084FC;
    box-shadow: none;
}

html[data-landing-theme="dark"] .landing-theme-toggle:focus-visible {
    outline-color: rgba(79, 226, 226, 0.36);
}

html[data-landing-theme="dark"] .landing-register {
    border-color: rgba(43, 47, 51, 0.16);
    background: rgba(255, 255, 255, 0.88);
    color: #000000;
}

html[data-landing-theme="dark"] .landing-secondary {
    border-color: rgba(196, 224, 226, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-nav-menu > div {
    border-color: rgba(196, 224, 226, 0.2);
    background: #151e21;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-nav-menu > div a {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-nav-menu > div a:hover {
    background: rgba(79, 226, 226, 0.12);
    color: #C084FC;
}

html[data-landing-theme="dark"] .reference-card,
html[data-landing-theme="dark"] .faq-grid article,
html[data-landing-theme="dark"] .price-card {
    border-color: rgba(196, 224, 226, 0.2);
    background: linear-gradient(180deg, #172124 0%, #12191c 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .landing-trust article {
    border-color: rgba(64, 169, 179, 0.34);
    border-top-color: rgba(39, 193, 207, 0.78);
    background: linear-gradient(180deg, rgba(109, 40, 217, 0.24) 0%, rgba(18, 25, 28, 0.97) 100%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(118, 224, 229, 0.08);
}

html[data-landing-theme="dark"] .landing-trust article:nth-child(2) {
    border-color: rgba(183, 121, 31, 0.34);
    border-top-color: rgba(218, 157, 65, 0.78);
    background: linear-gradient(180deg, rgba(183, 121, 31, 0.22) 0%, rgba(21, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .landing-trust article:nth-child(3) {
    border-color: rgba(37, 99, 235, 0.32);
    border-top-color: rgba(92, 145, 255, 0.76);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(18, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .landing-trust article:nth-child(4) {
    border-color: rgba(190, 75, 91, 0.34);
    border-top-color: rgba(224, 108, 124, 0.76);
    background: linear-gradient(180deg, rgba(190, 75, 91, 0.2) 0%, rgba(18, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .benefit-grid article {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html[data-landing-theme="dark"] .benefit-grid h3 {
    color: #ffffff;
}

html[data-landing-theme="dark"] .benefit-grid p {
    color: #ffffff;
}

html[data-landing-theme="dark"] .benefit-grid span {
    color: #f4808f;
}

html[data-landing-theme="dark"] .benefit-grid article:nth-child(2) span {
    color: #C084FC;
}

html[data-landing-theme="dark"] .benefit-grid article:nth-child(3) span {
    color: #dfae65;
}

html[data-landing-theme="dark"] .benefit-grid article:nth-child(4) span {
    color: #86a7f5;
}

html[data-landing-theme="dark"] .module-feature {
    border-color: rgba(196, 224, 226, 0.18);
    background: linear-gradient(135deg, #12191c 0%, #172326 58%, #102629 100%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .module-feature-estacionamiento {
    border-color: rgba(223, 174, 101, 0.28);
    background: linear-gradient(135deg, #12191c 0%, #1d1a13 58%, #102629 100%);
}

html[data-landing-theme="dark"] .module-feature-flota {
    border-color: rgba(134, 167, 245, 0.24);
    background: linear-gradient(135deg, #12191c 0%, #141d2b 58%, #102629 100%);
}

html[data-landing-theme="dark"] .landing-references {
    background: #12191c;
    box-shadow: 0 0 0 100vmax #12191c;
    clip-path: inset(0 -100vmax);
}

html[data-landing-theme="dark"] .landing-faq {
    background: #0f1416;
}

html[data-landing-theme="dark"] .reference-card p,
html[data-landing-theme="dark"] .reference-card strong,
html[data-landing-theme="dark"] .price-card h3,
html[data-landing-theme="dark"] .price-plan-list strong {
    color: #ffffff;
}

html[data-landing-theme="dark"] .reference-control {
    border-color: rgba(79, 226, 226, 0.24);
    background: #151e21;
    color: #C084FC;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .landing-pricing {
    background: #191f23;
    box-shadow: 0 0 0 100vmax #191f23;
}

html[data-landing-theme="dark"] .price-card {
    color: #ffffff;
}

html[data-landing-theme="dark"] .price small,
html[data-landing-theme="dark"] .price-value > span {
    color: #ffffff;
}

html[data-landing-theme="dark"] .price-card a {
    background: #F3E8FF;
    color: #000000;
}

html[data-landing-theme="dark"] .price-card.is-featured a {
    background: var(--pricing-module-accent, var(--brand-primary));
    color: #ffffff;
}

html[data-landing-theme="dark"] .pricing-toggle {
    border-color: rgba(196, 224, 226, 0.22);
    background: #12191c;
}

html[data-landing-theme="dark"] .pricing-toggle-option {
    color: #ffffff;
}

html[data-landing-theme="dark"] #pricing-monthly:checked ~ .pricing-inner .pricing-toggle-monthly {
    background: #F3E8FF;
    color: #000000;
}

html[data-landing-theme="dark"] #module-plans-monthly:checked ~ .landing-section-head .module-plan-toggle-monthly {
    background: #F3E8FF;
    color: #000000;
}

html[data-landing-theme="dark"] .pricing-discounts article {
    border-color: rgba(196, 224, 226, 0.16);
    background: rgba(255, 255, 255, 0.07);
}

html[data-landing-theme="dark"] .pricing-discounts article.is-active {
    border-color: var(--pricing-module-border, #66b5bd);
    background: var(--pricing-module-accent, var(--brand-primary));
    box-shadow: 0 16px 32px var(--pricing-module-shadow, rgba(109, 40, 217, 0.22));
}

html[data-landing-theme="dark"] .pricing-discounts article[data-discount-card="annual"].is-active {
    border-color: rgba(190, 75, 91, 0.82);
    background: var(--accent-rose);
    box-shadow: 0 16px 32px rgba(190, 75, 91, 0.34);
}

html[data-landing-theme="dark"] .faq-grid details {
    border-top-color: rgba(196, 224, 226, 0.22);
}

html[data-landing-theme="dark"] .faq-grid details:last-child {
    border-bottom-color: rgba(196, 224, 226, 0.22);
}

html[data-landing-theme="dark"] .landing-contact {
    background: #12191c;
    box-shadow: 0 0 0 100vmax #12191c;
}

html[data-landing-theme="dark"] .landing-contact-form label,
html[data-landing-theme="dark"] .landing-contact-phone-field {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-contact-form input,
html[data-landing-theme="dark"] .landing-contact-form textarea,
html[data-landing-theme="dark"] .landing-contact .country-picker-button {
    border-color: rgba(196, 224, 226, 0.28);
    background: #172124;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

html[data-landing-theme="dark"] .landing-contact .country-picker-menu {
    border-color: rgba(196, 224, 226, 0.22);
    background: #151e21;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

html[data-landing-theme="dark"] .landing-contact .country-picker-option {
    color: #ffffff;
}

html[data-landing-theme="dark"] .landing-contact .country-picker-option:hover,
html[data-landing-theme="dark"] .landing-contact .country-picker-option.is-selected {
    background: rgba(79, 226, 226, 0.14);
}

html[data-landing-theme="dark"] .landing-contact-form input::placeholder,
html[data-landing-theme="dark"] .landing-contact-form textarea::placeholder {
    color: rgba(224, 241, 242, 0.54);
}

html[data-landing-theme="dark"] .landing-contact-form input:focus,
html[data-landing-theme="dark"] .landing-contact-form textarea:focus {
    border-color: #C084FC;
    outline-color: rgba(79, 226, 226, 0.22);
}

html[data-landing-theme="dark"] .landing-cta-strip {
    background: #0e3c43;
}

html[data-landing-theme="dark"] .landing-cta-strip h2 {
    color: #ffffff;
}

@media (max-width: 1180px) {
    .landing-page {
        --landing-brand-wordmark-width: 162px;
        --landing-brand-mark-size: 67.8px;
    }

    .landing-hero {
        grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1fr);
    }

    .landing-nav-links {
        font-size: 15px;
    }

    .landing-command,
    .landing-register {
        font-size: 15px;
    }

    .landing-trust,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-benefits {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .landing-cta-strip-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .pricing-head {
        grid-template-columns: 1fr;
    }

    .pricing-controls {
        grid-row: auto;
        grid-column: auto;
        justify-self: end;
        width: min(100%, 660px);
    }

    .landing-bottom-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 29px;
    }

    .landing-bottom-legal {
        gap: 14px;
    }

    .landing-contact .landing-contact-layout {
        grid-template-columns: minmax(280px, 1fr) minmax(360px, 1fr);
    }

    .landing-contact-art {
        grid-column: 1 / -1;
        width: min(100%, 420px);
        justify-self: end;
    }
}

@media (max-width: 820px) {
    .landing-page {
        --landing-nav-space: 110px;
        --landing-brand-wordmark-width: min(120px, 32.4vw);
        --landing-brand-mark-size: min(50.2px, 13.56vw);
        --landing-section-space: 42px;
        --landing-compact-section-space: 21px;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "art";
        gap: 28px;
        padding: 18px var(--landing-gutter) 42px;
    }

    .landing-nav {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .landing-page .landing-nav {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .landing-nav-links {
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        flex-direction: column;
    }

    .landing-page .landing-nav-links {
        align-items: center;
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        width: auto;
        margin-left: auto;
        font-size: 13px;
    }

    .landing-page .landing-nav-links > a,
    .landing-page .landing-nav-menu {
        display: none;
    }

    .landing-page .landing-nav-actions {
        align-items: center;
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .landing-page .landing-command,
    .landing-page .landing-register {
        flex: 1 1 136px;
        width: auto;
        min-height: 34px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 13px;
    }

    .landing-page.is-nav-compact .landing-nav {
        --landing-brand-wordmark-width: min(96px, 30vw);
        --landing-brand-mark-size: min(40.2px, 12.57vw);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .landing-hero-copy {
        margin-top: 0;
    }

    .landing-hero-copy .eyebrow {
        font-size: clamp(24px, 8vw, 30px);
    }

    .landing-hero-copy .eyebrow span {
        white-space: normal;
    }

    .landing-hero-copy p:not(.eyebrow) {
        font-size: 15px;
    }

    .landing-hero-copy p:not(.eyebrow) br,
    .landing-section-head p:not(.eyebrow) br,
    .landing-trust span br {
        display: inline;
    }

    .landing-hero-copy p:not(.eyebrow) br::after,
    .landing-section-head p:not(.eyebrow) br::after,
    .landing-trust span br::after {
        content: " ";
    }

    .landing-section-head h2,
    .landing-contact-head h2,
    .feature-copy h2,
    .landing-final h2 {
        font-size: clamp(25px, 7vw, 28px);
        overflow-wrap: break-word;
    }

    .landing-hero-copy p:not(.eyebrow),
    .landing-section-head p:not(.eyebrow),
    .landing-trust span {
        overflow-wrap: break-word;
    }

    .landing-hero-art {
        justify-self: center;
        width: 100%;
        max-height: 320px;
        margin-top: 0;
    }

    .landing-trust,
    .benefit-grid,
    .landing-faq-inner,
    .faq-grid,
    .landing-contact-form,
    .landing-contact-layout,
    .pricing-grid,
    .pricing-discounts,
    .landing-feature,
    .feature-alt,
    .landing-final {
        grid-template-columns: 1fr;
    }

    .pricing-controls {
        justify-self: stretch;
        max-width: none;
        width: 100%;
    }

    .landing-faq-inner {
        gap: 24px;
    }

    .landing-faq .landing-section-head h2 {
        font-size: clamp(23.75px, 6.65vw, 26.6px);
    }

    .landing-faq-art {
        max-width: 430px;
        justify-self: center;
    }

    .pricing-toggle {
        width: 100%;
        max-width: none;
    }

    .pricing-module-toggle {
        grid-template-columns: 1fr;
    }

    .landing-trust {
        margin-top: 0;
        margin-bottom: 34px;
    }

    .landing-benefits {
        gap: 28px;
    }

    .benefit-grid {
        gap: 22px;
    }

    .benefit-grid article {
        grid-template-columns: minmax(116px, 0.32fr) minmax(0, 1fr);
        gap: 16px;
    }

    .benefit-grid span {
        font-size: clamp(44px, 14vw, 60px);
    }

    .module-feature {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .module-feature img,
    .landing-feature img,
    .landing-final img {
        max-height: 320px;
    }

    .feature-alt .feature-copy {
        justify-self: stretch;
    }

    .landing-contact-submit,
    .module-detail-link {
        width: 100%;
    }

    .landing-contact > .landing-contact-form {
        grid-template-columns: 1fr;
    }

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

    .landing-contact-art {
        width: min(100%, 360px);
        max-height: 240px;
        justify-self: center;
    }

    .landing-contact .landing-contact-head h2 {
        white-space: normal;
    }

    .landing-cta-strip-inner {
        gap: 16px;
    }

    .landing-cta-strip .landing-actions {
        width: 100%;
    }

    .landing-cta-strip .landing-actions a {
        flex: 1 1 150px;
        justify-content: center;
    }

    .faq-grid summary {
        padding: 18px 0;
        font-size: 20px;
    }

    .landing-bottom-inner {
        gap: 14px;
    }

    .landing-bottom-main {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .landing-bottom-brand,
    .landing-bottom-column,
    .landing-bottom-legal nav {
        justify-items: center;
        text-align: center;
    }

    .landing-bottom-brand-line {
        justify-content: center;
    }

    .landing-bottom-brand p {
        text-align: center;
    }

    .landing-bottom-socials {
        justify-content: center;
    }

    .landing-bottom-copy {
        padding-top: 11px;
    }
}

@media (max-width: 520px) {
    .parking-entry-modes-grid {
        grid-template-columns: 1fr;
    }

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

    .variable-row-grid-vehicles .vehicle-category-main-cell,
    .variable-row-grid-vehicles .vehicle-category-models-cell,
    .variable-row-grid-vehicles .vehicle-category-capacity-cell,
    .variable-row-grid-vehicles .variable-row .variable-row-actions {
        grid-column: auto;
    }

    .variable-row-grid-vehicles .variable-row .variable-row-actions {
        justify-self: stretch;
    }

    .landing-bottom-brand-line {
        align-items: center;
        flex-direction: column;
        gap: 8px;
    }

    .landing-bottom-logo {
        width: 38px;
        height: 38px;
    }

    .landing-bottom-logo img {
        width: 27px;
        height: 27px;
    }

    .landing-bottom-social {
        width: 32px;
        height: 32px;
    }

    .landing-bottom-social img {
        width: 19px;
        height: 19px;
    }
}
/* Estacionamiento module landing */
.module-public-page-estacionamiento {
    background: #ffffff;
}

.module-public-page-estacionamiento .module-public-hero {
    background: linear-gradient(180deg, #e8f5f6 0%, #f9fdfd 64%, #ffffff 100%);
    padding-bottom: clamp(14px, 2vw, 24px);
}

.module-public-page-estacionamiento .module-public-hero-inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(480px, 1fr);
    gap: clamp(24px, 3.5vw, 46px);
    margin-top: clamp(18px, 3vw, 32px);
}

.module-public-page-estacionamiento .module-public-copy {
    gap: 14px;
}

.module-public-page-estacionamiento .module-public-copy h1 {
    max-width: 660px;
    font-family: var(--font-title);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: var(--font-semibold);
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.module-public-page-estacionamiento .module-public-copy p:not(.eyebrow) {
    max-width: 650px;
    color: #000000;
    font-size: clamp(17px, 1.5vw, 20px);
}

.module-public-page-estacionamiento .module-public-copy .landing-actions {
    margin-top: 12px;
}

.module-public-page-estacionamiento .module-public-copy .landing-secondary {
    border-color: var(--brand-neutral);
    background: var(--brand-neutral);
    color: #ffffff;
}

.module-public-page-estacionamiento .module-public-section-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(196, 209, 212, 0.76);
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 20px 48px rgba(109, 40, 217, 0.12);
}

.module-public-page-estacionamiento .module-public-hero-visual {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.module-public-page-estacionamiento .module-public-hero-visual > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
    filter: drop-shadow(0 24px 28px rgba(19, 60, 65, 0.2));
}

.module-public-page-estacionamiento .module-public-section {
    width: calc(100% - var(--landing-gutter) - var(--landing-gutter));
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-top: clamp(18px, 2.5vw, 32px);
    padding-right: 0;
    padding-bottom: clamp(18px, 2.5vw, 32px);
    padding-left: 0;
}

.module-public-page-estacionamiento .landing-section-head {
    max-width: 790px;
    gap: 6px;
    margin-bottom: 10px;
}

.module-public-page-estacionamiento .landing-section-head p:not(.eyebrow) {
    max-width: 760px;
}

.module-public-page-estacionamiento .module-public-points .landing-section-head {
    max-width: none;
}

.module-public-page-estacionamiento .module-public-points .landing-section-head h2 {
    max-width: none;
    white-space: nowrap;
}

.module-public-page-estacionamiento .module-functions-section .landing-section-head {
    max-width: none;
}

.module-public-page-estacionamiento .module-functions-section .landing-section-head h2 {
    max-width: none;
    font-size: clamp(34px, 3.15vw, 48px);
    white-space: nowrap;
}

.module-public-page-estacionamiento .module-public-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-public-page-estacionamiento .module-public-benefits article {
    align-content: center;
    justify-items: center;
    min-height: 136px;
    padding: 14px 16px;
    border-top-width: 1px;
    border-left: 5px solid var(--brand-primary);
    background: #f7fbfb;
    color: var(--ink);
    text-align: center;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.module-public-page-estacionamiento .module-public-benefits article:nth-child(2) {
    border-left-color: var(--accent-amber);
    background: #fff8ed;
}

.module-public-page-estacionamiento .module-public-benefits article:nth-child(3) {
    border-left-color: var(--accent-blue);
    background: #f5f8ff;
}

.module-public-page-estacionamiento .module-public-benefits.is-scroll-motion-ready article {
    opacity: 0;
    transform: translateY(54px) scale(0.92);
    filter: blur(5px);
}

.module-public-page-estacionamiento .module-public-benefits.is-scroll-motion-visible article {
    animation: landingTrustCardEnter 1.08s cubic-bezier(0.18, 0.88, 0.24, 1) var(--scroll-motion-delay, 0s) both;
}

.module-public-page-estacionamiento .module-public-benefits article:nth-child(1) {
    --scroll-motion-delay: 0.14s;
}

.module-public-page-estacionamiento .module-public-benefits article:nth-child(2) {
    --scroll-motion-delay: 0.3s;
}

.module-public-page-estacionamiento .module-public-benefits article:nth-child(3) {
    --scroll-motion-delay: 0.46s;
}

@media (prefers-reduced-motion: reduce) {
    .module-public-page-estacionamiento .module-public-benefits.is-scroll-motion-visible article {
        animation: none;
    }

    .module-public-page-estacionamiento .module-public-benefits.is-scroll-motion-ready article {
        opacity: 1;
        transform: none;
        filter: none;
        will-change: auto;
    }
}

.module-public-page-estacionamiento .module-feature-list {
    gap: 12px;
}

.module-public-page-estacionamiento .module-feature-list article {
    gap: 12px;
    min-height: 0;
    padding: 14px;
}

.module-public-page-estacionamiento .module-feature-list span {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.module-public-split,
.module-functions-layout,
.module-how-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
}

.module-functions-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: stretch;
}

.module-public-page-estacionamiento .module-functions-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
    align-items: start;
}

.module-public-split-copy {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.module-feature-list,
.module-step-list {
    display: grid;
    gap: 14px;
}

.module-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-functions-section .module-feature-list {
    align-content: start;
    grid-auto-rows: auto;
    height: auto;
}

.module-feature-list article,
.module-step-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.module-functions-section .module-public-section-image {
    align-self: center;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    background: linear-gradient(180deg, #eefafa 0%, #f8fdfd 100%);
}

.module-public-page-estacionamiento .module-functions-visual {
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    margin-right: -15%;
    margin-left: -15%;
}

.module-public-page-estacionamiento .module-functions-visual .module-public-section-image {
    position: absolute;
    bottom: -3.4%;
    left: 0;
    width: 100%;
    height: 103.4%;
    aspect-ratio: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 24px 28px rgba(19, 60, 65, 0.2));
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-functions-visual .module-public-section-image {
    filter:
        drop-shadow(0 30px 32px rgba(0, 0, 0, 0.46))
        drop-shadow(0 8px 18px rgba(0, 111, 120, 0.14));
}

.module-feature-list span,
.module-step-list span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

.module-feature-list h3,
.module-step-list h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: var(--font-semibold);
    line-height: 1.18;
}

.module-feature-list p,
.module-step-list p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

.module-how-layout {
    grid-template-columns: minmax(420px, 0.96fr) minmax(0, 1fr);
}

.module-step-list {
    align-content: center;
}

.module-public-page-estacionamiento .module-public-plans {
    width: calc(100% - var(--landing-gutter) - var(--landing-gutter));
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding: clamp(18px, 2.5vw, 32px) 0;
}

.module-public-page-estacionamiento .module-public-plans .landing-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    max-width: none;
}

.module-public-page-estacionamiento .module-public-plans .landing-section-head h2 {
    grid-column: 1 / -1;
    max-width: none;
    white-space: nowrap;
}

.module-plan-period-toggle {
    justify-self: end;
    margin-top: 0;
}

#module-plans-monthly:checked ~ .landing-section-head .module-plan-toggle-monthly {
    background: #111417;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 20, 23, 0.16);
}

#module-plans-annual:checked ~ .landing-section-head .module-plan-toggle-annual {
    background: var(--accent-amber);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(183, 121, 31, 0.22);
}

#module-plans-monthly:focus-visible ~ .landing-section-head .module-plan-toggle-monthly,
#module-plans-annual:focus-visible ~ .landing-section-head .module-plan-toggle-annual {
    outline: 3px solid rgba(183, 121, 31, 0.3);
    outline-offset: 3px;
}

.module-public-page-estacionamiento .module-plan-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.module-public-page-estacionamiento .module-plan-card {
    grid-template-rows: auto auto auto minmax(150px, 1fr) auto;
    min-height: 368px;
}

.module-public-page-estacionamiento .module-plan-card.is-featured {
    border-color: #dfae65;
    box-shadow: 0 18px 42px rgba(183, 121, 31, 0.2);
}

.module-public-page-estacionamiento .module-plan-card li::before {
    background: var(--accent-amber);
}

.module-plan-price {
    min-height: 30px;
}

.module-plan-price-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--ink);
    font-family: var(--font-title);
    line-height: 1;
}

.module-plan-price-value strong {
    font-size: 30px;
    font-weight: var(--font-semibold);
}

.module-plan-price-value small {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-semibold);
}

.module-plan-price-value.billing-annual,
.module-plan-action.module-plan-action-annual {
    display: none;
}

#module-plans-annual:checked ~ .module-plan-grid .billing-monthly,
#module-plans-annual:checked ~ .module-plan-grid .module-plan-action-monthly {
    display: none;
}

#module-plans-annual:checked ~ .module-plan-grid .module-plan-price-value.billing-annual {
    display: flex;
}

#module-plans-annual:checked ~ .module-plan-grid .module-plan-action-annual {
    display: inline-flex;
}

.module-plan-annual-discount {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 22px;
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-radius: 8px;
    background: #f8fbfb;
    box-shadow: 0 10px 24px rgba(43, 47, 51, 0.07);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.module-plan-annual-discount span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.module-plan-annual-discount strong {
    color: var(--ink);
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
}

.module-plan-annual-discount p {
    margin: 0;
    color: var(--muted);
}

#module-plans-annual:checked ~ .module-plan-annual-discount {
    border-color: rgba(190, 75, 91, 0.72);
    background: var(--accent-rose);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(190, 75, 91, 0.24);
}

#module-plans-annual:checked ~ .module-plan-annual-discount span,
#module-plans-annual:checked ~ .module-plan-annual-discount strong,
#module-plans-annual:checked ~ .module-plan-annual-discount p {
    color: #ffffff;
}

.module-plan-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: var(--font-semibold);
}

.module-plan-card.is-featured .module-plan-action {
    background: var(--brand-neutral);
}

.module-public-page-estacionamiento .module-plan-action {
    background: var(--brand-neutral);
}

.module-public-page-estacionamiento .module-plan-card.is-featured .module-plan-action {
    background: var(--accent-amber);
}

.module-plan-comparison-section {
    background: #f8fbfb;
    box-shadow: 0 0 0 100vmax #f8fbfb;
    clip-path: inset(0 -100vmax);
}

.module-compare-scroll {
    overflow-x: auto;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.module-compare-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) repeat(var(--compare-cols), minmax(132px, 1fr));
    min-width: 920px;
}

.module-compare-cell {
    display: grid;
    align-items: center;
    min-height: 56px;
    padding: 13px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.25;
}

.module-compare-cell:nth-child(6n) {
    border-right: 0;
}

.module-compare-grid .module-compare-cell:nth-last-child(-n + 6) {
    border-bottom: 0;
}

.module-compare-corner,
.module-compare-plan {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef8f8;
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.module-compare-plan {
    justify-items: center;
    text-align: center;
}

.module-compare-feature {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #ffffff;
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.module-compare-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 8px;
    background: #f4f8f8;
    color: var(--muted);
    font-weight: var(--font-medium);
}

.module-compare-value.is-strong {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.module-compare-value.is-check {
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 17px;
    font-weight: var(--font-semibold);
}

.module-compare-value.is-empty {
    background: transparent;
    color: #000000;
}

.module-public-page-estacionamiento .module-plan-comparison-section {
    background: #eef5f5;
    box-shadow: 0 0 0 100vmax #eef5f5;
}

.module-public-page-estacionamiento .module-plan-comparison-section .landing-section-head {
    max-width: none;
}

.module-public-page-estacionamiento .module-plan-comparison-section .landing-section-head h2 {
    max-width: none;
    white-space: nowrap;
}

.module-public-page-estacionamiento .module-compare-scroll {
    border-color: var(--line-strong);
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(43, 47, 51, 0.08);
}

.module-public-page-estacionamiento .module-compare-cell {
    border-color: #d8e3e5;
    background: #ffffff;
}

.module-public-page-estacionamiento .module-compare-cell.is-alternate {
    background: rgba(183, 121, 31, 0.09);
}

.module-public-page-estacionamiento .module-compare-corner,
.module-public-page-estacionamiento .module-compare-plan {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.14);
}

.module-public-page-estacionamiento .module-compare-corner {
    background: #172f33;
}

.module-public-page-estacionamiento .module-compare-plan.is-featured {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: none;
}

.module-public-page-estacionamiento .module-compare-feature {
    padding-left: 18px;
    background: #ffffff;
    box-shadow: inset 4px 0 0 #172f33;
}

.module-public-page-estacionamiento .module-compare-feature.is-alternate {
    background: rgba(183, 121, 31, 0.09);
}

.module-public-page-estacionamiento .module-compare-cell.is-featured:not(.module-compare-plan) {
    border-right-color: #d8e3e5;
    border-left: 1px solid #d8e3e5;
    background: #ffffff;
    box-shadow: none;
}

.module-public-page-estacionamiento .module-compare-cell.is-featured.is-alternate {
    background: rgba(183, 121, 31, 0.09);
}

.module-public-page-estacionamiento .module-compare-data {
    justify-items: center;
    text-align: center;
}

.module-public-page-estacionamiento .module-compare-value.is-strong,
.module-public-page-estacionamiento .module-compare-value.is-check {
    border: 1px solid rgba(109, 40, 217, 0.12);
    box-shadow: none;
}

.module-public-page-estacionamiento .module-compare-cell.is-featured .module-compare-value.is-strong,
.module-public-page-estacionamiento .module-compare-cell.is-featured .module-compare-value.is-check {
    border-color: rgba(109, 40, 217, 0.12);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    box-shadow: none;
}

.module-public-faq .faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: min(780px, 100%);
    padding-right: 0;
    padding-left: 0;
}

.module-public-faq .faq-grid summary {
    padding: 15px 0;
    font-size: 18px;
}

.module-public-faq .faq-grid details p {
    margin: -4px 0 16px;
    font-size: 15px;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid.is-scroll-motion-ready details {
    opacity: 0;
    transform: translateX(-76px);
    will-change: transform, opacity;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid.is-scroll-motion-visible details {
    animation: benefitBlockEnter 0.78s cubic-bezier(0.18, 0.84, 0.28, 1) var(--scroll-motion-delay, 0s) both;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid details:nth-child(1) {
    --scroll-motion-delay: 0s;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid details:nth-child(2) {
    --scroll-motion-delay: 0.13s;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid details:nth-child(3) {
    --scroll-motion-delay: 0.26s;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid details:nth-child(4) {
    --scroll-motion-delay: 0.39s;
}

.module-public-page-estacionamiento .module-public-faq .faq-grid details:nth-child(5) {
    --scroll-motion-delay: 0.52s;
}

@media (prefers-reduced-motion: reduce) {
    .module-public-page-estacionamiento .module-public-faq .faq-grid.is-scroll-motion-visible details {
        animation: none;
    }

    .module-public-page-estacionamiento .module-public-faq .faq-grid.is-scroll-motion-ready details {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

.module-public-faq-content {
    min-width: 0;
}

.module-public-page-estacionamiento .module-public-faq {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.5fr);
    gap: clamp(32px, 4vw, 68px);
    align-items: center;
}

.module-public-page-estacionamiento .module-public-faq .landing-section-head,
.module-public-page-estacionamiento .module-public-faq .faq-grid {
    max-width: none;
}

.module-public-faq-cta-art {
    display: block;
    width: min(100%, 480px);
    height: auto;
    max-height: 440px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 18px 24px rgba(21, 47, 51, 0.12));
    pointer-events: none;
    user-select: none;
}

.module-final-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    width: calc(100% - var(--landing-gutter) - var(--landing-gutter));
    max-width: var(--landing-container-max);
    margin-right: auto;
    margin-left: auto;
    padding: clamp(18px, 2.5vw, 32px) 0;
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 0 0 100vmax var(--brand-primary);
    clip-path: inset(0 -100vmax);
}

.module-final-cta h2,
.module-final-cta p {
    margin: 0;
    color: #ffffff;
}

.module-final-cta h2 {
    max-width: 760px;
    font-family: var(--font-title);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.06;
}

.module-final-cta p:not(.eyebrow) {
    max-width: 640px;
    margin-top: 12px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.45;
}

.module-final-cta .landing-primary {
    min-width: 280px;
    background: #ffffff;
    color: var(--brand-primary);
}

@media (max-width: 1280px) {
    .module-public-page-estacionamiento .module-public-hero-visual > img,
    .module-public-page-estacionamiento .module-public-section-image {
        max-height: 520px;
    }

    .module-public-page-estacionamiento .module-functions-visual {
        margin-right: -8%;
        margin-left: -8%;
    }

    .module-public-page-estacionamiento .module-plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .module-public-page-estacionamiento .module-public-plans .landing-section-head h2 {
        white-space: normal;
    }
}

@media (max-width: 980px) {
    .module-public-page-estacionamiento .module-public-points .landing-section-head h2,
    .module-public-page-estacionamiento .module-functions-section .landing-section-head h2 {
        white-space: normal;
    }

    .module-public-page-estacionamiento .module-plan-comparison-section .landing-section-head h2 {
        white-space: normal;
    }

    .module-public-page-estacionamiento .module-public-hero-inner,
    .module-public-page-estacionamiento .module-public-benefits,
    .module-public-page-estacionamiento .module-public-faq,
    .module-feature-list,
    .module-functions-layout,
    .module-how-layout,
    .module-public-page-estacionamiento .module-plan-grid,
    .module-final-cta {
        grid-template-columns: 1fr;
    }

    .module-public-page-estacionamiento .module-public-plans .landing-section-head {
        grid-template-columns: 1fr;
    }

    .module-plan-period-toggle {
        justify-self: start;
    }

    .module-public-page-estacionamiento .module-plan-card {
        min-height: 0;
    }

    .module-final-cta .landing-primary {
        width: 100%;
        min-width: 0;
    }

    .module-public-page-estacionamiento .module-public-faq {
        gap: 18px;
    }

    .module-public-page-estacionamiento .module-functions-visual {
        width: 100%;
        height: min(76vw, 520px);
        margin: 8px 0 0;
    }

    .module-public-faq-cta-art {
        width: min(100%, 300px);
        max-height: 300px;
        margin: 8px auto 0;
    }
}

@media (max-width: 820px) {
    .module-public-page-estacionamiento .module-public-hero-inner {
        margin-top: 16px;
    }

    .module-public-page-estacionamiento .module-public-copy h1 {
        font-size: clamp(28px, 8vw, 32px);
    }

    .module-public-page-estacionamiento .module-public-hero-visual > img,
    .module-public-page-estacionamiento .module-public-section-image {
        max-height: 320px;
    }

    .module-public-page-estacionamiento .module-public-section,
    .module-public-page-estacionamiento .module-public-plans {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .module-final-cta {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .module-feature-list article,
    .module-step-list article {
        padding: 16px;
    }

    .module-plan-annual-discount {
        grid-template-columns: auto 1fr;
        gap: 8px 14px;
        padding: 15px 16px;
    }

    .module-plan-annual-discount p {
        grid-column: 1 / -1;
    }

    .module-compare-scroll {
        margin-right: calc(var(--landing-gutter) * -1);
        border-right: 0;
        border-radius: 8px 0 0 8px;
    }

    .module-public-faq-cta-art {
        width: min(82vw, 260px);
        max-height: 260px;
    }
}

@media (max-width: 1040px) {
    .public-builder-hero,
    .public-builder-grid,
    .public-site-hero,
    .public-template-mapa .public-site-hero,
    .public-site-contact {
        grid-template-columns: 1fr;
    }

    .public-builder-link-row {
        grid-template-columns: 1fr;
    }

    .public-builder-link-editor {
        grid-template-columns: 1fr;
    }

    .public-page-builder-parking .public-builder-hero {
        grid-template-columns: 1fr;
    }

    .public-builder-share {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-left: 0;
    }

    .public-page-config-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-site-grid,
    .public-rate-list,
    .public-template-picker,
    .public-block-grid,
    .public-block-fixed-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .public-builder-hero {
        min-height: 0;
    }

    .public-builder-copy {
        padding: 20px;
    }

    .public-builder-copy h2 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .public-builder-image,
    .public-builder-image img {
        min-height: 260px;
    }

    .public-builder-stats,
    .public-page-config-form {
        grid-template-columns: 1fr;
    }

    .public-block-builder .public-block-option {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .public-block-drag-handle,
    .public-block-fixed-label {
        grid-column: 2;
        justify-self: start;
    }

    .public-site-hero {
        min-height: 0;
        padding: 16px;
    }

    .public-site-copy h1 {
        font-size: clamp(32px, 12vw, 48px);
    }

    .public-hero-stats,
    .public-site-grid,
    .public-rate-list,
    .public-template-compacta .public-site-grid,
    .public-template-compacta .public-rate-list,
    .public-template-picker,
    .public-block-grid,
    .public-block-fixed-row,
    .public-block-order-list,
    .public-block-editor-grid {
        grid-template-columns: 1fr;
    }

    .public-mars-merged-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-mars-merged-fields .public-price-period-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-mars-merged-fields .public-price-period-check {
        width: 100%;
        min-width: 0;
    }

    .public-site-section,
    .public-site-contact,
    .public-price-result {
        padding: 16px;
    }

    .public-site-visual,
    .public-hero-map {
        min-height: 0;
    }

    .public-quick-card,
    .public-hours-card {
        transform: none;
    }

    .public-hero-actions .button,
    .public-contact-actions .button {
        width: 100%;
    }

    .public-blog-item-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .public-blog-editor .public-blog-item-actions .mini-button {
        width: 100%;
    }

    .public-blog-edit-modal {
        padding: 8px;
    }

    .public-blog-edit-modal-panel {
        max-height: calc(100dvh - 16px);
        padding: 18px 14px 14px;
    }

    .public-blog-edit-form {
        padding-right: 2px;
    }
}

/* Module pages aligned with landing */
.app-shell {
    background: linear-gradient(180deg, #e8f5f6 0%, #f6fbfb 38%, #f4f7f7 100%);
}

/* El panel usa todo el ancho que le deja la barra lateral: nada de centrarlo
   con un tope de 1512 px, que en pantallas anchas dejaba franjas vacías. */
.content {
    max-width: none;
    margin: 0;
    padding: 0 clamp(18px, 2.4vw, 34px) 46px;
    background: transparent;
}

/* La cabecera no tiene superficie propia: se lee como la primera línea del
   contenido, así los apartados de abajo se quedan con toda la pantalla. */
.topbar {
    position: static;
    z-index: 80;
    min-height: 0;
    margin-bottom: 14px;
    padding: 14px 0 0;
    background: transparent;
    color: #000000;
}

.topbar h1 {
    color: #000000;
}

.topbar .parking-title-lead,
.topbar .year-form label,
.topbar .month-form label {
    color: #000000;
}

.topbar h1 {
    font-size: clamp(24px, 2.4vw, 32px);
}

.topbar .year-form,
.topbar .month-form {
    border-color: rgba(109, 40, 217, 0.14);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 28px rgba(0, 55, 70, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar select {
    border-color: rgba(109, 40, 217, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: #000000;
}

/* Sin recuadro detrás del logo: va suelto al lado del nombre. */
.topbar-parking-logo {
    width: clamp(38px, 3.4vw, 48px);
    height: clamp(38px, 3.4vw, 48px);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.module-control-row {
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}

.module-tabs,
.year-form,
.month-form,
.summary-filter-form label {
    border-color: rgba(196, 209, 212, 0.82);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 26px rgba(43, 47, 51, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.module-tabs a,
.module-tabs a.is-active,
.module-tabs a:hover,
.year-form,
.month-form,
.summary-filter-form label,
.module-card,
.kpi-card,
.panel,
.module-hero,
.summary-band,
.module-public-benefits article,
.module-feature-list article,
.module-step-list article,
.module-plan-card,
.module-compare-scroll {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.module-tabs a:hover {
    transform: translateY(-1px);
    border-color: rgba(109, 40, 217, 0.22);
    background: rgba(231, 243, 244, 0.82);
    color: var(--ink);
}

.module-tabs a.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.18);
}

.summary-band,
.module-hero,
.panel,
.kpi-card,
.module-card {
    border-color: rgba(196, 209, 212, 0.84);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 251, 0.94) 100%);
    box-shadow: 0 12px 30px rgba(43, 47, 51, 0.07);
}

.module-card:hover,
.kpi-card.is-clickable:hover,
.kpi-card.is-clickable:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(109, 40, 217, 0.24);
    box-shadow: 0 18px 38px rgba(43, 47, 51, 0.11);
}

.module-hero {
    overflow: hidden;
    padding: clamp(18px, 2.4vw, 26px);
}

.module-hero.accent-purple,
.module-hero.accent-amber,
.module-hero.accent-rose,
.module-hero.accent-blue,
.module-hero.accent-violet {
    border-top-width: 5px;
}

.kpi-card {
    min-height: 104px;
}

.kpi-card strong {
    letter-spacing: 0;
}

.module-public-hero {
    padding: calc(var(--landing-nav-space) + 24px) var(--landing-gutter) clamp(54px, 7vw, 78px);
    background: linear-gradient(180deg, #e8f5f6 0%, #f6fbfb 72%, #ffffff 100%);
}

.module-public-hero-inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.08fr);
    gap: clamp(24px, 4vw, 52px);
    max-width: var(--landing-container-max);
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
}

.module-public-copy h1 {
    max-width: 760px;
    font-size: clamp(38px, 4.6vw, 62px);
    line-height: 1.03;
}

.module-public-copy p:not(.eyebrow) {
    font-size: clamp(16px, 1.25vw, 19px);
}

.module-public-hero-inner > img,
.module-public-section-image {
    border-color: rgba(196, 209, 212, 0.76);
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(109, 40, 217, 0.12);
}

.module-public-section,
.module-public-plans {
    max-width: var(--landing-container-max);
    padding: var(--landing-section-space) var(--landing-gutter);
}

.module-public-section .landing-section-head,
.module-public-plans .landing-section-head {
    max-width: 820px;
    margin-bottom: 18px;
}

.module-public-benefits article,
.module-feature-list article,
.module-step-list article,
.module-plan-card {
    border-color: rgba(196, 209, 212, 0.82);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.module-public-benefits article:hover,
.module-feature-list article:hover,
.module-step-list article:hover,
.module-plan-card:hover {
    transform: translateY(-2px);
    border-color: rgba(109, 40, 217, 0.24);
    box-shadow: 0 18px 38px rgba(43, 47, 51, 0.11);
}

.module-plan-card.is-featured {
    border-color: rgba(109, 40, 217, 0.36);
    box-shadow: 0 18px 42px rgba(109, 40, 217, 0.16);
}

.module-plan-action:hover,
.module-plan-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(109, 40, 217, 0.2);
}

.module-public-page-estacionamiento .module-plan-action:hover,
.module-public-page-estacionamiento .module-plan-action:focus-visible {
    box-shadow: 0 14px 28px rgba(17, 20, 23, 0.22);
}

.module-public-page-estacionamiento .module-plan-card.is-featured .module-plan-action:hover,
.module-public-page-estacionamiento .module-plan-card.is-featured .module-plan-action:focus-visible {
    box-shadow: 0 14px 28px rgba(183, 121, 31, 0.24);
}

.module-plan-comparison-section {
    background: #f8fbfb;
}

.module-compare-scroll {
    border-color: rgba(196, 209, 212, 0.84);
    box-shadow: 0 12px 30px rgba(43, 47, 51, 0.07);
}

html[data-theme="dark"] .app-shell {
    background: linear-gradient(180deg, #13282b 0%, #0f1416 42%, #151a1d 100%);
}

html[data-theme="dark"] .content {
    background: transparent;
}

html[data-theme="dark"] .topbar {
    border-bottom-color: transparent;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
}

html[data-theme="dark"] .topbar h1 {
    color: #ffffff;
}

html[data-theme="dark"] .topbar .parking-title-lead {
    color: #ffffff;
}

html[data-theme="dark"] .topbar .year-form label,
html[data-theme="dark"] .topbar .month-form label {
    color: #000000;
}

html[data-theme="dark"] .topbar .year-form,
html[data-theme="dark"] .topbar .month-form {
    border-color: rgba(43, 47, 51, 0.14);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

html[data-theme="dark"] .topbar-parking-logo {
    border: 0;
    background: none;
    box-shadow: none;
}

html[data-theme="dark"] .topbar select {
    border-color: rgba(43, 47, 51, 0.16);
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
}

html[data-theme="dark"] .module-tabs,
html[data-theme="dark"] .year-form,
html[data-theme="dark"] .month-form,
html[data-theme="dark"] .summary-filter-form label {
    background: rgba(32, 40, 44, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .summary-band,
html[data-theme="dark"] .module-hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .module-card {
    border-color: rgba(196, 224, 226, 0.2);
    background: linear-gradient(180deg, #172124 0%, #12191c 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .module-tabs a:hover {
    border-color: rgba(79, 226, 226, 0.22);
    background: rgba(79, 226, 226, 0.1);
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-public-hero {
    background: linear-gradient(180deg, #13282b 0%, #0f1416 74%, #0f1416 100%);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-public-hero-visual > img {
    filter:
        drop-shadow(0 32px 34px rgba(0, 0, 0, 0.48))
        drop-shadow(0 10px 20px rgba(0, 111, 120, 0.16));
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento,
html[data-landing-theme="dark"] .module-plan-comparison-section {
    background: #0f1416;
}

html[data-landing-theme="dark"] .module-public-benefits article,
html[data-landing-theme="dark"] .module-feature-list article,
html[data-landing-theme="dark"] .module-step-list article,
html[data-landing-theme="dark"] .module-plan-card,
html[data-landing-theme="dark"] .module-compare-scroll {
    border-color: rgba(196, 224, 226, 0.2);
    background: linear-gradient(180deg, #172124 0%, #12191c 100%);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .module-public-benefits article strong {
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-plan-annual-discount {
    border-color: rgba(196, 224, 226, 0.2);
    background: linear-gradient(180deg, #172124 0%, #12191c 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .module-plan-annual-discount span,
html[data-landing-theme="dark"] .module-plan-annual-discount strong,
html[data-landing-theme="dark"] .module-plan-annual-discount p {
    color: #ffffff;
}

html[data-landing-theme="dark"] #module-plans-annual:checked ~ .module-plan-annual-discount {
    border-color: rgba(190, 75, 91, 0.82);
    background: var(--accent-rose);
    box-shadow: 0 16px 32px rgba(190, 75, 91, 0.34);
}

html[data-landing-theme="dark"] #module-plans-annual:checked ~ .module-plan-annual-discount span,
html[data-landing-theme="dark"] #module-plans-annual:checked ~ .module-plan-annual-discount strong,
html[data-landing-theme="dark"] #module-plans-annual:checked ~ .module-plan-annual-discount p {
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-public-benefits article {
    border-left-color: rgba(39, 193, 207, 0.78);
    background: linear-gradient(180deg, rgba(109, 40, 217, 0.24) 0%, rgba(18, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-public-benefits article:nth-child(2) {
    border-left-color: rgba(218, 157, 65, 0.78);
    background: linear-gradient(180deg, rgba(183, 121, 31, 0.22) 0%, rgba(21, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-public-benefits article:nth-child(3) {
    border-left-color: rgba(92, 145, 255, 0.76);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(18, 25, 28, 0.97) 100%);
}

html[data-landing-theme="dark"] .module-public-copy p:not(.eyebrow),
html[data-landing-theme="dark"] .module-feature-list p,
html[data-landing-theme="dark"] .module-step-list p,
html[data-landing-theme="dark"] .module-plan-card p,
html[data-landing-theme="dark"] .module-plan-card li,
html[data-landing-theme="dark"] .module-compare-cell {
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-feature-list h3,
html[data-landing-theme="dark"] .module-step-list h3,
html[data-landing-theme="dark"] .module-plan-card h3,
html[data-landing-theme="dark"] .module-compare-corner,
html[data-landing-theme="dark"] .module-compare-plan,
html[data-landing-theme="dark"] .module-compare-feature {
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-compare-corner,
html[data-landing-theme="dark"] .module-compare-plan {
    background: #172f33;
}

html[data-landing-theme="dark"] .module-compare-feature {
    background: #12191c;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-plan-comparison-section {
    background: #0f1416;
    box-shadow: 0 0 0 100vmax #0f1416;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-scroll {
    border-color: rgba(196, 224, 226, 0.24);
    background: #151e21;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell {
    border-color: rgba(196, 224, 226, 0.16);
    background: #151e21;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell.is-alternate {
    background: rgba(183, 121, 31, 0.15);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-corner,
html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-plan {
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-corner {
    background: #172f33;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-plan.is-featured {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: none;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-feature {
    background: #151e21;
    box-shadow: inset 4px 0 0 #2a737b;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-feature.is-alternate {
    background: rgba(183, 121, 31, 0.15);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell.is-featured:not(.module-compare-plan) {
    border-color: rgba(196, 224, 226, 0.16);
    background: #151e21;
    box-shadow: none;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell.is-featured.is-alternate {
    background: rgba(183, 121, 31, 0.15);
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-value.is-strong,
html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-value.is-check {
    border-color: rgba(39, 193, 207, 0.3);
    background: rgba(39, 193, 207, 0.16);
    color: #7ed9df;
    box-shadow: none;
}

html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell.is-featured .module-compare-value.is-strong,
html[data-landing-theme="dark"] .module-public-page-estacionamiento .module-compare-cell.is-featured .module-compare-value.is-check {
    border-color: rgba(39, 193, 207, 0.3);
    background: rgba(39, 193, 207, 0.16);
    color: #7ed9df;
}

@media (max-width: 980px) {
    .topbar,
    .module-control-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .topbar-side,
    .topbar-actions,
    .module-filters {
        justify-content: flex-start;
    }

    .module-public-hero-inner,
    .module-public-page-estacionamiento .module-public-hero-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .content {
        padding-right: 16px;
        padding-bottom: 34px;
        padding-left: 16px;
    }

    .topbar {
        min-height: 0;
        margin-right: 0;
        margin-left: 0;
        padding: 12px 0 0;
    }

    .topbar h1 {
        font-size: clamp(22px, 6.4vw, 28px);
    }

    .module-tabs,
    .module-filters,
    .topbar-actions {
        width: 100%;
    }

    .module-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .module-public-hero {
        padding-top: calc(var(--landing-nav-space) + 18px);
        padding-bottom: 42px;
    }

    .module-public-copy h1 {
        font-size: clamp(28px, 8vw, 34px);
    }

    .module-public-benefits,
    .module-plan-grid,
    .module-public-page-estacionamiento .module-public-benefits,
    .module-public-page-estacionamiento .module-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Public parking landing: full-screen, long-form page */
.public-page {
    background: #ffffff;
}

.public-page .public-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.public-landing {
    --public-accent: #7E22CE;
    --public-accent-strong: #5b21b6;
    --public-highlight: #d9a441;
    --public-ink: #000000;
    --public-muted: #000000;
    --public-soft: #faf5ff;
    --public-line: #e9d5ff;
    display: block;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: var(--public-ink);
}

.public-template-urbana {
    --public-accent: #0f766e;
    --public-accent-strong: #0a504b;
    --public-highlight: #f0b84f;
    --public-soft: #edf6f4;
}

.public-template-mapa {
    --public-accent: #146b4f;
    --public-accent-strong: #0b4a38;
    --public-highlight: #66b5bd;
    --public-soft: #eef7f1;
}

.public-template-compacta {
    --public-accent: #9f3341;
    --public-accent-strong: #762632;
    --public-highlight: #7E22CE;
    --public-soft: #f7f2f0;
}

.public-landing-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px clamp(18px, 4vw, 64px) 32px;
    overflow: hidden;
    background: #0b242b;
    color: #ffffff;
}

.public-landing-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.public-landing-media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(7, 26, 31, 0.72);
    content: "";
}

.public-landing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-landing-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100%, 1760px);
    margin: 0 auto;
}

.public-landing-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
    color: #ffffff;
}

.public-landing-brand img,
.public-landing-brand > span {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    object-fit: cover;
}

.public-landing-brand > span {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.public-landing-brand strong {
    display: block;
    max-width: 380px;
    overflow: hidden;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-landing-links {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.public-landing-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 800;
}

.public-landing-links a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.public-landing-links .public-landing-nav-cta {
    background: #ffffff;
    color: var(--public-accent-strong);
}

.public-landing-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    width: min(100%, 1760px);
    margin: 0 auto;
    padding: 48px 0 28px;
}

.public-landing-copy {
    display: grid;
    gap: 22px;
    max-width: 940px;
}

.public-landing-section-head > span,
.public-landing-panel-copy > span,
.public-landing-calculator-head > span {
    color: #69d4dd;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.public-landing-copy h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-title);
    font-size: 92px;
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.public-landing-copy p {
    max-width: 740px;
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.45;
}

.public-landing-actions,
.public-landing-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.public-landing-primary,
.public-landing-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 900;
}

.public-landing-primary {
    border: 1px solid var(--public-accent);
    background: var(--public-accent);
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(126, 34, 206, 0.28);
}

.public-landing-primary:hover {
    background: var(--public-accent-strong);
    color: #ffffff;
}

.public-landing-secondary {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.public-landing-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-whatsapp-link {
    gap: 9px;
}

.public-whatsapp-link svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
}

.public-landing-nav-cta.public-whatsapp-link {
    background: #25d366;
    color: #083b1f;
}

.public-landing-nav-cta.public-whatsapp-link:hover {
    background: #35df73;
    color: #052b17;
}

.public-whatsapp-float {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: var(--whatsapp-brand-green);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(5, 43, 23, 0.24);
}

.public-whatsapp-float:hover {
    background: var(--whatsapp-brand-green);
    color: #ffffff;
    transform: translateY(-1px);
}

.public-whatsapp-float svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}

.public-whatsapp-float span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.public-page-owner-preview {
    position: relative;
}

.public-page-owner-preview .public-whatsapp-float {
    position: absolute;
    right: 34px;
    bottom: 34px;
}

.public-landing-hero-card {
    display: grid;
    gap: 14px;
    align-self: center;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--public-ink);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.public-landing-hero-card > span {
    color: var(--public-accent);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-landing-hero-card > strong {
    color: var(--public-accent-strong);
    font-size: 92px;
    line-height: 0.9;
}

.public-landing-hero-card > small {
    color: var(--public-muted);
    font-size: 16px;
    font-weight: 800;
}

.public-landing-hero-card div {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--public-line);
}

.public-landing-hero-card p {
    display: grid;
    gap: 3px;
    margin: 0;
    color: var(--public-muted);
    font-weight: 700;
    line-height: 1.35;
}

.public-landing-hero-card b {
    color: var(--public-ink);
    font-size: 13px;
    text-transform: uppercase;
}

.public-landing-hero-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 1760px);
    margin: 0 auto;
}

.public-landing-hero-strip article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.public-landing-hero-strip span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-landing-hero-strip strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.public-landing-section {
    width: min(100% - 64px, 1680px);
    margin: 0 auto;
    padding: 112px 0;
}

.public-landing-section-head {
    display: grid;
    gap: 14px;
    max-width: 920px;
    margin-bottom: 36px;
}

.public-landing-section-head > span,
.public-landing-panel-copy > span,
.public-landing-calculator-head > span {
    color: var(--public-accent);
}

.public-landing-section-head h2,
.public-landing-panel-copy h2,
.public-landing-contact h2 {
    margin: 0;
    color: var(--public-ink);
    font-family: var(--font-title);
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.public-landing-section-head p,
.public-landing-panel-copy p,
.public-landing-contact p {
    max-width: 780px;
    margin: 0;
    color: var(--public-muted);
    font-size: 19px;
    line-height: 1.5;
}

.public-landing-intro {
    padding-top: 126px;
}

.public-landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-landing-feature-grid article,
.public-landing-rate-cards article {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(20, 34, 41, 0.08);
}

.public-landing-feature-grid article > span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--public-soft);
    color: var(--public-accent);
    font-weight: 900;
}

.public-landing-feature-grid h3 {
    margin: 0;
    color: var(--public-ink);
    font-size: 26px;
}

.public-landing-feature-grid p {
    margin: 0;
    color: var(--public-muted);
    font-size: 16px;
    line-height: 1.5;
}

.public-landing-vehicles,
.public-landing-location {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 44px;
    align-items: center;
}

.public-landing-vehicles {
    width: 100%;
    max-width: none;
    padding: 118px max(32px, calc((100vw - 1680px) / 2));
    background: var(--public-soft);
}

.public-landing-panel-copy {
    display: grid;
    gap: 14px;
}

.public-landing-chip-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.public-landing-chip-wall span {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 22%, #ffffff);
    border-radius: 8px;
    background: #ffffff;
    color: var(--public-ink);
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 14px 34px rgba(20, 34, 41, 0.07);
}

.public-landing-models {
    display: grid;
    gap: 28px;
}

.public-landing-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-landing-model-grid article {
    display: grid;
    gap: 12px;
    min-height: 188px;
    padding: 26px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(20, 34, 41, 0.07);
}

.public-landing-model-grid article span {
    color: var(--public-accent);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-landing-model-grid article strong {
    color: var(--public-ink);
    font-size: 24px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.public-landing-model-grid article small {
    align-self: end;
    color: var(--public-muted);
    font-size: 14px;
    font-weight: 800;
}

.public-landing-rates {
    display: grid;
    gap: 26px;
}

.public-landing-rate-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-landing-rate-cards article span {
    color: var(--public-accent);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-landing-rate-cards article strong {
    color: var(--public-ink);
    font-size: 42px;
    line-height: 1;
}

.public-landing-rate-cards article small {
    color: var(--public-muted);
    font-weight: 800;
}

.public-landing-calculator {
    display: grid;
    gap: 22px;
    padding: 28px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: #f8fbfb;
    box-shadow: 0 18px 44px rgba(20, 34, 41, 0.08);
}

.public-landing-calculator-head {
    display: grid;
    gap: 4px;
}

.public-landing-calculator-head h3 {
    margin: 0;
    color: var(--public-ink);
    font-size: 34px;
    line-height: 1;
}

.public-landing .public-price-grid {
    grid-template-columns: minmax(190px, 0.85fr) repeat(2, minmax(260px, 1fr)) minmax(190px, 0.7fr);
    gap: 14px;
}

.public-landing .public-price-grid label,
.public-landing .public-price-grid .public-date-time-field {
    gap: 8px;
    color: var(--public-ink);
    font-size: 13px;
    font-weight: 900;
}

.public-landing .public-price-grid input,
.public-landing .public-price-grid select {
    min-height: 54px;
    border-color: var(--public-line);
    background: #ffffff;
    font-size: 16px;
}

.public-landing .public-price-grid button {
    min-height: 54px;
    background: var(--public-accent);
    font-size: 16px;
    font-weight: 900;
}

.public-landing .public-price-grid button:hover {
    background: var(--public-accent-strong);
}

.public-landing-result {
    margin-top: 0;
}

.public-landing-location {
    padding-top: 96px;
}

.public-landing-location .public-landing-secondary {
    border-color: var(--public-line);
    background: #ffffff;
    color: var(--public-accent);
}

.public-landing-location .public-landing-secondary:hover {
    border-color: var(--public-accent);
    background: var(--public-soft);
    color: var(--public-accent-strong);
}

.public-landing-map,
.public-landing-map-fallback {
    min-height: 560px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    background: var(--public-soft);
    box-shadow: 0 18px 44px rgba(20, 34, 41, 0.08);
}

.public-landing-map-fallback {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
}

.public-landing-map-fallback strong {
    color: var(--public-ink);
    font-size: 28px;
}

.public-landing-map-fallback span {
    color: var(--public-muted);
    font-weight: 800;
}

.public-landing-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    width: min(100% - 64px, 1680px);
    margin: 22px auto 0;
    padding: 56px;
    border-radius: 8px;
    background: #102329;
    color: #ffffff;
}

.public-landing-contact h2,
.public-landing-contact p {
    color: #ffffff;
}

.public-landing-contact p {
    color: #ffffff;
}

.public-landing-contact .public-landing-secondary {
    border-color: rgba(255, 255, 255, 0.22);
}

.public-landing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(100% - 64px, 1680px);
    margin: 0 auto;
    padding: 34px 0;
    color: var(--public-muted);
}

.public-landing-footer strong {
    color: var(--public-ink);
    font-size: 18px;
}

.public-landing-footer small {
    color: var(--public-muted);
    font-weight: 700;
}

.public-page-owner-preview .public-landing-hero {
    min-height: 820px;
}

@media (max-width: 1160px) {
    .public-landing-copy h1 {
        font-size: 72px;
    }

    .public-landing-hero-inner,
    .public-landing-vehicles,
    .public-landing-location,
    .public-landing-contact {
        grid-template-columns: 1fr;
    }

    .public-landing-hero-card {
        max-width: 620px;
    }

    .public-landing .public-price-grid,
    .public-landing-model-grid,
    .public-landing-rate-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .public-landing-hero {
        min-height: 100svh;
        padding: 18px 16px 22px;
    }

    .public-landing-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-landing-brand strong {
        max-width: calc(100vw - 116px);
        font-size: 20px;
    }

    .public-landing-links {
        width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: flex-start;
    }

    .public-landing-links a {
        flex: 1 1 calc(50% - 4px);
    }

    .public-landing-links .public-landing-nav-cta {
        flex-basis: 100%;
    }

    .public-landing-hero-inner {
        padding: 34px 0 22px;
    }

    .public-landing-copy h1 {
        font-size: 52px;
    }

    .public-landing-copy p {
        font-size: 18px;
    }

    .public-landing-hero-card {
        padding: 20px;
    }

    .public-landing-hero-card > strong {
        font-size: 68px;
    }

    .public-landing-hero-strip,
    .public-landing-feature-grid,
    .public-landing-chip-wall,
    .public-landing-model-grid,
    .public-landing .public-price-grid,
    .public-landing-rate-cards {
        grid-template-columns: 1fr;
    }

    .public-landing-section,
    .public-landing-contact,
    .public-landing-footer {
        width: min(100% - 32px, 1680px);
    }

    .public-landing-section {
        padding: 72px 0;
    }

    .public-landing-vehicles {
        padding: 72px 16px;
    }

    .public-landing-section-head h2,
    .public-landing-panel-copy h2,
    .public-landing-contact h2 {
        font-size: 40px;
    }

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

    .public-landing-map,
    .public-landing-map-fallback {
        min-height: 360px;
    }

    .public-landing-contact {
        padding: 28px;
    }

    .public-landing-contact-actions,
    .public-landing-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .public-landing-primary,
    .public-landing-secondary {
        width: 100%;
    }

    .public-landing-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
    }

    .public-whatsapp-float svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 520px) {
    .public-landing-copy h1 {
        font-size: 42px;
    }

    .public-landing-section-head h2,
    .public-landing-panel-copy h2,
    .public-landing-contact h2 {
        font-size: 34px;
    }

    .public-landing-rate-cards article strong {
        font-size: 34px;
    }
}
/* Shared typography for WorKraken public pages and module screens. */
.landing-page,
.module-landing-page,
.plan-checkout,
.app-shell {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
}

.brand-name,
.brand strong,
.landing-brand strong,
.plan-checkout-brand .brand-name {
    font-family: var(--font-brand);
    font-weight: var(--font-semibold);
}

.landing-page :is(h1, h2, h3),
.module-landing-page :is(h1, h2, h3),
.plan-checkout :is(h1, h2, h3),
.app-shell :is(.topbar h1, .summary-copy h2, .panel h2, .module-hero h2, .module-card h3) {
    font-family: var(--font-title);
    font-weight: var(--font-semibold);
}

.landing-page :is(.landing-command, .landing-register, .landing-primary, .landing-secondary, .module-detail-link, .price-card a, .module-plan-action, .landing-contact-submit),
.plan-checkout :is(.plan-checkout-submit, .plan-period-toggle label),
.app-shell :is(button, .button, .logout-button) {
    font-family: var(--font-button);
    font-weight: var(--font-semibold);
}

.landing-page :is(p, li, label, input, textarea, small),
.module-landing-page :is(p, li, label, input, textarea, small),
.plan-checkout :is(p, li, label, input, small, dt),
.app-shell :is(p, li, label, input, select, textarea, small) {
    font-family: var(--font-body);
}

/* Public parking landing: Urbana template */
.public-template-urbana.public-landing {
    --public-accent: #d9a441;
    --public-accent-strong: #a87516;
    --public-highlight: #13a8a0;
    --public-ink: #000000;
    --public-muted: #000000;
    --public-soft: #f4efe5;
    --public-line: #d8d1c3;
    background: #111820;
}

.public-template-urbana .public-landing-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(18px, 3vw, 38px) clamp(16px, 4vw, 68px) clamp(22px, 4vw, 44px);
    background: #111820;
}

.public-template-urbana .public-landing-media::after {
    background:
        linear-gradient(90deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.88) 38%, rgba(17, 24, 32, 0.46) 68%, rgba(17, 24, 32, 0.18) 100%),
        linear-gradient(0deg, rgba(17, 24, 32, 0.76) 0%, rgba(17, 24, 32, 0.14) 42%, rgba(17, 24, 32, 0.58) 100%);
}

.public-template-urbana .public-landing-media img {
    filter: saturate(0.86) contrast(1.08);
    object-position: center;
}

.public-template-urbana .public-landing-nav {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(17, 24, 32, 0.62);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.public-template-urbana .public-landing-brand img,
.public-template-urbana .public-landing-brand > span {
    width: 58px;
    height: 58px;
    border-color: rgba(217, 164, 65, 0.46);
    background: rgba(217, 164, 65, 0.12);
}

.public-template-urbana .public-landing-brand strong {
    max-width: 460px;
    color: #ffffff;
}

.public-template-urbana .public-landing-links {
    border: 0;
    background: transparent;
}

.public-template-urbana .public-landing-links a {
    color: #ffffff;
}

.public-template-urbana .public-landing-links a:hover {
    background: rgba(217, 164, 65, 0.13);
    color: #ffffff;
}

.public-template-urbana .public-landing-links .public-landing-nav-cta {
    background: #fff8e8;
    color: #000000;
}

.public-template-urbana .public-landing-nav-cta.public-whatsapp-link {
    background: #26d36d;
    color: #052b17;
}

.public-template-urbana .public-landing-hero-inner {
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.6fr);
    align-items: end;
    padding: clamp(48px, 8vw, 118px) 0 clamp(24px, 4vw, 42px);
}

.public-template-urbana .public-landing-copy {
    align-self: center;
    gap: 20px;
    max-width: 1060px;
}

.public-template-urbana .public-landing-copy h1 {
    max-width: 1020px;
    color: #ffffff;
    font-size: clamp(54px, 9vw, 118px);
    line-height: 0.9;
}

.public-template-urbana .public-landing-copy p {
    max-width: 760px;
    color: #ffffff;
    font-size: clamp(18px, 2vw, 24px);
}

.public-template-urbana .public-landing-primary {
    border-color: var(--public-accent);
    background: var(--public-accent);
    color: #000000;
    box-shadow: 0 20px 42px rgba(217, 164, 65, 0.28);
}

.public-template-urbana .public-landing-primary:hover {
    background: #efc464;
    color: #000000;
}

.public-template-urbana .public-landing-secondary {
    border-color: rgba(255, 248, 232, 0.24);
    background: rgba(255, 248, 232, 0.08);
    color: #ffffff;
}

.public-template-urbana .public-landing-secondary:hover {
    border-color: rgba(217, 164, 65, 0.56);
    background: rgba(217, 164, 65, 0.12);
}

.public-template-urbana .public-landing-hero-card {
    align-self: end;
    gap: 16px;
    padding: 24px;
    border-color: rgba(255, 248, 232, 0.15);
    background: rgba(18, 24, 32, 0.9);
    color: #ffffff;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-template-urbana .public-landing-hero-card > span {
    color: var(--public-accent);
}

.public-template-urbana .public-landing-hero-card > strong {
    color: #ffffff;
    font-size: clamp(70px, 8vw, 112px);
}

.public-template-urbana .public-landing-hero-card > small,
.public-template-urbana .public-landing-hero-card p {
    color: #ffffff;
}

.public-template-urbana .public-landing-hero-card div {
    border-top-color: rgba(255, 248, 232, 0.14);
}

.public-template-urbana .public-landing-hero-card b {
    color: #ffffff;
}

.public-template-urbana .public-landing-hero-strip {
    gap: 0;
    border: 1px solid rgba(255, 248, 232, 0.12);
    border-radius: 8px;
    background: rgba(18, 24, 32, 0.78);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.public-template-urbana .public-landing-hero-strip article {
    border: 0;
    border-right: 1px solid rgba(255, 248, 232, 0.1);
    border-radius: 0;
    background: transparent;
}

.public-template-urbana .public-landing-hero-strip article:last-child {
    border-right: 0;
}

.public-template-urbana .public-landing-hero-strip span {
    color: #ffffff;
}

.public-template-urbana .public-landing-hero-strip strong {
    color: #ffffff;
}

.public-template-urbana .public-landing-intro,
.public-template-urbana .public-landing-rates {
    width: 100%;
    max-width: none;
    padding-right: max(24px, calc((100vw - 1680px) / 2));
    padding-left: max(24px, calc((100vw - 1680px) / 2));
}

.public-template-urbana .public-landing-intro {
    padding-top: clamp(76px, 8vw, 132px);
    padding-bottom: clamp(72px, 8vw, 118px);
    background: #111820;
}

.public-template-urbana .public-landing-section-head h2,
.public-template-urbana .public-landing-panel-copy h2,
.public-template-urbana .public-landing-contact h2 {
    letter-spacing: 0;
}

.public-template-urbana .public-landing-intro .public-landing-section-head h2,
.public-template-urbana .public-landing-intro .public-landing-section-head p {
    color: #ffffff;
}

.public-template-urbana .public-landing-intro .public-landing-section-head p {
    color: #ffffff;
}

.public-template-urbana .public-landing-feature-grid {
    gap: 0;
    border: 1px solid rgba(255, 248, 232, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.public-template-urbana .public-landing-feature-grid article {
    border: 0;
    border-right: 1px solid rgba(255, 248, 232, 0.1);
    border-radius: 0;
    background: #17212b;
    box-shadow: none;
}

.public-template-urbana .public-landing-feature-grid article:last-child {
    border-right: 0;
}

.public-template-urbana .public-landing-feature-grid article > span {
    background: rgba(217, 164, 65, 0.12);
    color: var(--public-accent);
}

.public-template-urbana .public-landing-feature-grid h3 {
    color: #ffffff;
}

.public-template-urbana .public-landing-feature-grid p {
    color: #ffffff;
}

.public-template-urbana .public-landing-vehicles {
    grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr);
    padding-top: clamp(74px, 8vw, 116px);
    padding-bottom: clamp(74px, 8vw, 116px);
    background: #f4efe5;
}

.public-template-urbana .public-landing-vehicles .public-landing-panel-copy h2,
.public-template-urbana .public-landing-location .public-landing-panel-copy h2 {
    color: #000000;
}

.public-template-urbana .public-landing-chip-wall {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.public-template-urbana .public-landing-chip-wall span {
    min-height: 92px;
    border-color: #d8d1c3;
    background: #fffaf0;
    color: #000000;
    box-shadow: none;
}

.public-template-urbana .public-landing-chip-wall span:nth-child(3n + 1) {
    background: #121820;
    color: #ffffff;
}

.public-template-urbana .public-landing-models {
    width: 100%;
    max-width: none;
    padding: clamp(78px, 8vw, 126px) max(24px, calc((100vw - 1680px) / 2));
    background: #0f6f68;
}

.public-template-urbana .public-landing-models .public-landing-section-head h2,
.public-template-urbana .public-landing-models .public-landing-section-head p {
    color: #ffffff;
}

.public-template-urbana .public-landing-models .public-landing-section-head p {
    color: #ffffff;
}

.public-template-urbana .public-landing-model-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.public-template-urbana .public-landing-model-grid article {
    border-color: rgba(255, 248, 232, 0.18);
    background: rgba(255, 250, 240, 0.96);
    box-shadow: none;
}

.public-template-urbana .public-landing-model-grid article span {
    color: #0f6f68;
}

.public-template-urbana .public-landing-model-grid article strong {
    color: #000000;
}

.public-template-urbana .public-landing-rates {
    padding-top: clamp(78px, 8vw, 124px);
    padding-bottom: clamp(82px, 8vw, 132px);
    background: #ffffff;
}

.public-template-urbana .public-landing-rate-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.public-template-urbana .public-landing-rate-cards article {
    border-color: #ded6c8;
    background: #fffaf0;
    box-shadow: none;
}

.public-template-urbana .public-landing-rate-cards article strong {
    color: #000000;
}

.public-template-urbana .public-landing-calculator {
    border-color: #d6c9b5;
    background: #121820;
    color: #ffffff;
    box-shadow: 0 24px 70px rgba(18, 24, 32, 0.18);
}

.public-template-urbana .public-landing-calculator h3,
.public-template-urbana .public-landing-calculator label {
    color: #ffffff;
}

.public-template-urbana .public-price-grid input,
.public-template-urbana .public-price-grid select {
    border-color: rgba(255, 248, 232, 0.18);
    background: #fffaf0;
    color: #000000;
}

.public-template-urbana .public-price-grid button {
    background: var(--public-accent);
    color: #000000;
}

.public-template-urbana .public-price-result {
    border-color: #d6c9b5;
    background: #fffaf0;
    box-shadow: none;
}

.public-template-urbana .public-landing-location {
    grid-template-columns: minmax(280px, 0.52fr) minmax(0, 1.48fr);
    width: 100%;
    max-width: none;
    padding: clamp(78px, 8vw, 126px) max(24px, calc((100vw - 1680px) / 2));
    background: #f7f7f2;
}

.public-template-urbana .public-landing-location .public-landing-secondary {
    border-color: #d8d1c3;
    background: #ffffff;
    color: #000000;
}

.public-template-urbana .public-landing-map,
.public-template-urbana .public-landing-map-fallback {
    min-height: 520px;
    border-color: #cfc6b8;
    background: #e9e3d8;
    box-shadow: none;
}

.public-template-urbana .public-landing-contact {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: clamp(48px, 6vw, 78px) max(24px, calc((100vw - 1680px) / 2));
    border-radius: 0;
    background: #111820;
}

.public-template-urbana .public-landing-contact .public-landing-secondary {
    border-color: rgba(255, 248, 232, 0.22);
    background: transparent;
    color: #ffffff;
}

.public-template-urbana .public-landing-footer {
    width: 100%;
    max-width: none;
    padding: 28px max(24px, calc((100vw - 1680px) / 2));
    background: #0c1117;
    color: #ffffff;
}

.public-template-urbana .public-landing-footer strong {
    color: #ffffff;
}

.public-template-urbana .public-landing-footer small {
    color: #ffffff;
}

.public-page-owner-preview .public-template-urbana .public-landing-hero {
    min-height: 760px;
}

@media (max-width: 1160px) {
    .public-template-urbana .public-landing-hero-inner,
    .public-template-urbana .public-landing-vehicles,
    .public-template-urbana .public-landing-location {
        grid-template-columns: 1fr;
    }

    .public-template-urbana .public-landing-hero-card {
        max-width: none;
    }

    .public-template-urbana .public-landing-feature-grid {
        grid-template-columns: 1fr;
    }

    .public-template-urbana .public-landing-feature-grid article {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 248, 232, 0.1);
    }

    .public-template-urbana .public-landing-feature-grid article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 840px) {
    .public-template-urbana .public-landing-nav {
        width: 100%;
        padding: 8px;
    }

    .public-template-urbana .public-landing-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
    }

    .public-template-urbana .public-landing-links a {
        width: 100%;
        flex: none;
        min-height: 40px;
        padding: 0 10px;
    }

    .public-template-urbana .public-landing-links .public-landing-nav-cta {
        grid-column: 1 / -1;
    }

    .public-template-urbana .public-landing-copy {
        width: min(100%, calc(100vw - 40px));
        max-width: calc(100vw - 40px);
        min-width: 0;
    }

    .public-template-urbana .public-landing-copy h1 {
        max-width: 100%;
        font-size: clamp(38px, 10.5vw, 50px);
        line-height: 0.96;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .public-template-urbana .public-landing-copy p {
        max-width: 100%;
        font-size: 17px;
        overflow-wrap: anywhere;
    }

    .public-template-urbana .public-landing-actions,
    .public-template-urbana .public-landing-actions a {
        width: min(100%, calc(100vw - 40px));
        max-width: calc(100vw - 40px);
    }

    .public-template-urbana .public-landing-hero-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-template-urbana .public-landing-hero-strip article:nth-child(2n) {
        border-right: 0;
    }

    .public-template-urbana .public-landing-hero-strip article:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 248, 232, 0.1);
    }

    .public-template-urbana .public-landing-intro,
    .public-template-urbana .public-landing-models,
    .public-template-urbana .public-landing-rates,
    .public-template-urbana .public-landing-location,
    .public-template-urbana .public-landing-contact,
    .public-template-urbana .public-landing-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .public-template-urbana .public-landing-chip-wall,
    .public-template-urbana .public-landing-model-grid,
    .public-template-urbana .public-landing-rate-cards {
        grid-template-columns: 1fr;
    }

    .public-template-urbana .public-landing-map,
    .public-template-urbana .public-landing-map-fallback {
        min-height: 340px;
    }
}

@media (max-width: 520px) {
    .public-template-urbana .public-landing-hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    .public-template-urbana .public-landing-nav,
    .public-template-urbana .public-landing-copy,
    .public-template-urbana .public-landing-actions,
    .public-template-urbana .public-landing-hero-card,
    .public-template-urbana .public-landing-hero-strip {
        width: 100%;
        max-width: 350px;
        margin-right: auto;
        margin-left: 0;
    }

    .public-template-urbana .public-landing-links {
        width: 100%;
    }

    .public-template-urbana .public-landing-copy h1 {
        font-size: clamp(34px, 10vw, 44px);
    }

    .public-template-urbana .public-landing-copy p {
        max-width: 330px;
        font-size: 16px;
    }

    .public-template-urbana .public-landing-actions a {
        width: 100%;
        max-width: 330px;
    }
}

/* Public parking landing: four separate designs */
.public-design {
    --public-nav-height: 86px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
    color: #000000;
}

.public-design :is(h1, h2, h3, p) {
    margin: 0;
}

.public-design :is(h1, h2, h3) {
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: 0;
}

.public-design a {
    text-decoration: none;
}

.public-design [data-public-block] {
    scroll-margin-top: calc(var(--public-nav-height) + 18px);
}

.public-design-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: inherit;
}

.public-design-brand img,
.public-design-brand > span {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
}

.public-design-brand > span {
    display: grid;
    place-items: center;
    background: currentColor;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.public-design-brand strong {
    max-width: 300px;
    overflow: hidden;
    font-size: 21px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 220;
    order: -200;
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(360px, auto) minmax(180px, 0.8fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: var(--public-nav-height);
    margin-bottom: 0;
    padding: 10px max(18px, calc((100vw - 1680px) / 2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(8, 18, 22, 0.96);
    color: #ffffff;
    box-shadow: 0 18px 54px rgba(5, 21, 26, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (min-width: 761px) {
    .public-page .public-site {
        padding-top: var(--public-nav-height);
    }

    .public-page .public-site > .public-sticky-nav {
        position: fixed;
        right: 0;
        left: 0;
    }
}

.public-design > .public-sticky-nav + [data-public-block~="portada"] {
    padding-top: clamp(28px, 4vw, 56px);
}

.public-sticky-nav .public-design-brand img,
.public-sticky-nav .public-design-brand > span {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.92);
}

.public-sticky-nav .public-design-brand > span {
    color: #000000;
}

.public-sticky-nav .public-design-brand strong,
.public-sticky-nav .public-sticky-links a,
.public-sticky-nav .public-sticky-socials a {
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36);
}

.public-sticky-links,
.public-sticky-socials,
.public-sticky-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.public-sticky-links {
    justify-content: center;
}

.public-sticky-actions {
    justify-content: flex-end;
}

.public-sticky-links a,
.public-sticky-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    color: currentColor;
    font-size: 17px;
    font-weight: 900;
}

.public-sticky-links > a:hover,
.public-sticky-links > a:focus-visible,
.public-sticky-socials a:hover,
.public-sticky-socials a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.public-sticky-cta {
    background: #7E22CE;
    color: #ffffff !important;
}

.public-sticky-theme {
    min-height: 42px;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.public-design-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Sin esto el `display: flex` de autor le gana al [hidden] de la UA y la fila
   vacía sigue ocupando su lugar en la grilla, sumando el gap y dejando un
   hueco grande abajo del texto de la portada. */
.public-design-actions[hidden] {
    display: none;
}

/* Los <a> que el server-render manda ocultos no deben verse ni un frame antes
   de que el JS acomode la selección. */
.public-design-actions a[hidden] {
    display: none;
}

/* Un acceso rápido que es una red social lleva su ícono al lado del nombre,
   con las mismas medidas que el botón de WhatsApp. */
.public-design .public-design-actions a[data-public-portada-red] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-design .public-design-actions a[data-public-portada-red] svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
}

.public-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: currentColor;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    cursor: pointer;
}

.public-theme-toggle:hover,
.public-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.public-theme-toggle-icon {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}

.public-theme-toggle[aria-pressed="true"] .public-theme-toggle-icon {
    transform: rotate(180deg);
}

.public-design :is(.visual-primary, .visual-secondary, .visual-nav-cta, .urban-primary, .urban-secondary, .urban-nav-cta, .map-primary, .map-secondary, .direct-primary, .direct-nav-cta) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 900;
}

.public-design .public-whatsapp-link {
    gap: 8px;
}

.public-design .public-whatsapp-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.public-design .public-price-grid {
    display: grid;
    grid-template-columns: minmax(230px, 0.86fr) repeat(2, minmax(280px, 1fr)) minmax(160px, 0.56fr);
    align-items: end;
    gap: 12px;
}

.public-design .public-price-grid label,
.public-design .public-price-grid .public-date-time-field {
    display: grid;
    position: relative;
    gap: 8px;
    color: inherit;
    font-size: 13px;
    font-weight: 900;
}

.public-design .public-price-grid input,
.public-design .public-price-grid select {
    min-height: 52px;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font-size: 16px;
}

.public-design .public-price-grid button {
    min-height: 52px;
    border-radius: 8px;
    font-weight: 900;
}

.public-design-calculator-head {
    display: grid;
    gap: 4px;
}

.public-design :is(.visual-calculator, .urban-calculator, .map-calculator, .direct-calculator) {
    display: grid;
    position: relative;
    overflow: visible;
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
}

.public-design-calculator-head span,
.public-design :is(.visual-copy, .visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .urban-copy, .urban-band, .urban-section-head, .urban-location, .map-vehicles, .map-section-head, .direct-copy, .direct-proof, .direct-rates) > span,
.public-design :is(.direct-card, .visual-summary) > span {
    color: currentColor;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-design-calculator-head h3 {
    font-size: 30px;
    line-height: 1;
}

.public-calculation-slot:not(:has([data-public-calculation-result])) {
    display: none;
}

.public-calculation-slot {
    overflow: visible;
}

.public-calculation-result-panel {
    display: grid;
    gap: 16px;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 18px;
    border: 1px solid rgba(20, 34, 41, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
}

.public-calculation-total {
    display: grid;
    gap: 5px;
}

.public-calculation-facts span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-calculation-total strong {
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
}

.public-calculation-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.public-calculation-facts article {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(20, 34, 41, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.64);
}

.public-calculation-facts article.public-discount-fact {
    border-color: rgba(126, 34, 206, 0.72);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(126, 34, 206, 0.08));
    box-shadow: inset 4px 0 0 #007e8f;
}

.public-calculation-facts article.public-discount-total-fact {
    border-color: rgba(37, 211, 102, 0.72);
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(124, 58, 237, 0.08));
    box-shadow: inset 4px 0 0 #25d366;
}

.public-discount-facts {
    grid-column: 1 / -1;
    margin-top: 2px;
}

.public-calculation-facts strong {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.35;
}

.public-selected-vehicle-models {
    color: var(--public-muted, #000000);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.public-vehicle-label-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.public-design .public-price-grid .public-vehicle-info-trigger {
    display: inline-grid;
    place-items: center;
    width: 1.35em;
    min-width: 1.35em;
    height: 1.35em;
    min-height: 1.35em;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: 1em;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.public-design .public-price-grid .public-vehicle-info-trigger:hover,
.public-design .public-price-grid .public-vehicle-info-trigger:focus-visible {
    background: rgba(126, 34, 206, 0.12);
}

.public-vehicle-model-popover {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 18px 42px rgba(6, 22, 28, 0.18);
    text-transform: none;
}

.public-vehicle-model-popover[hidden] {
    display: none !important;
}

.public-vehicle-model-popover > strong {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-vehicle-model-popover [data-public-vehicle-model-list] {
    display: grid;
    max-height: 240px;
    overflow: auto;
    gap: 8px;
}

.public-vehicle-model-popover article {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid rgba(20, 34, 41, 0.12);
    border-radius: 8px;
    background: #f7fbfc;
}

.public-vehicle-model-popover article strong {
    color: #7E22CE;
    font-size: 13px;
    font-weight: 900;
}

.public-vehicle-model-popover article span,
.public-vehicle-model-empty {
    margin: 0;
    color: #000000;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.public-calculation-mode {
    display: inline-flex;
    width: fit-content;
    padding: 4px;
    border: 1px solid rgba(126, 34, 206, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    gap: 4px;
}

.public-calculation-mode label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 6px;
    color: var(--public-ink, #000000);
    cursor: pointer;
    font-weight: 900;
    white-space: nowrap;
}

.public-calculation-mode input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.public-calculation-mode label:has(input:checked) {
    background: var(--public-accent, #7E22CE);
    color: #ffffff;
}

.public-cyclic-field {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(20, 34, 41, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
}

.public-cyclic-field[hidden] {
    display: none !important;
}

.public-cyclic-field legend {
    padding: 0 6px;
    font-weight: 900;
}

.public-cyclic-field p {
    margin: 0;
    color: var(--public-muted, #000000);
    font-weight: 800;
}

.public-cyclic-grid {
    display: grid;
    grid-template-columns: minmax(72px, 0.45fr) repeat(7, minmax(124px, 1fr));
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.public-cyclic-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px;
    border: 1px solid rgba(126, 34, 206, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--public-ink, #000000);
    font-weight: 900;
    gap: 6px;
}

.public-cyclic-day input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
}

.public-cyclic-row-title {
    align-self: center;
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-cyclic-visit {
    display: contents;
}

.public-cyclic-visit-separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 4px 2px;
    border-top: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    color: inherit;
}

.public-cyclic-visit-separator > strong {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-cyclic-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    gap: 6px;
}

.public-cyclic-remove-button > span[aria-hidden="true"] {
    font-size: 20px;
    font-weight: 700;
}

.public-cyclic-remove-button:hover,
.public-cyclic-remove-button:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.public-time24.is-overlapping {
    outline: 2px solid var(--public-cyclic-overlap-color, var(--danger, #c23d42));
    outline-offset: 2px;
}

.public-cyclic-overlap-error {
    margin: 0;
    color: var(--public-cyclic-overlap-color, var(--danger, #c23d42));
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.public-cyclic-add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.public-cyclic-add-row[hidden] {
    display: none !important;
}

.public-cyclic-add-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: 1px solid var(--public-accent, #7E22CE);
    border-radius: 50%;
    background: var(--public-accent, #7E22CE);
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.public-cyclic-add-button:hover,
.public-cyclic-add-button:focus-visible {
    border-color: var(--public-accent-strong, #005761);
    background: var(--public-accent-strong, #005761);
}

.public-cyclic-add-button[hidden] {
    display: none !important;
}

.public-time24 {
    display: grid;
    grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr);
    align-items: center;
    min-width: 136px;
    min-height: 48px;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.public-time24[hidden] {
    display: none !important;
}

.public-time24:focus-within {
    border-color: var(--public-accent, #007f8f);
    box-shadow: 0 0 0 3px rgba(0, 127, 143, 0.16);
}

.public-time24[aria-disabled="true"] {
    opacity: 1;
}

.public-time24 > select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.public-time24-picker {
    display: block;
    position: relative;
    min-width: 150px;
    overflow: visible;
}

.public-time24-picker[open] {
    z-index: 120;
}

.public-time24-picker > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 14px;
    list-style: none;
    cursor: pointer;
    gap: 12px;
}

.public-time24-picker > summary::-webkit-details-marker {
    display: none;
}

.public-time24-picker > summary:focus-visible {
    outline: none;
}

.public-time24-picker [data-public-time24-display].is-placeholder {
    color: #596d75;
}

.public-time24-picker-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}

.public-time24-picker[open] .public-time24-picker-arrow {
    transform: translateY(2px) rotate(225deg);
}

.public-time24-picker-popover {
    position: absolute;
    z-index: 1;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
    align-items: end;
    min-width: 250px;
    padding: 12px;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 18px 42px rgba(6, 22, 28, 0.22);
    gap: 8px;
}

.public-time24-picker:not([open]) > .public-time24-picker-popover {
    display: none;
}

.public-time24-picker-popover label {
    display: grid;
    gap: 4px;
    color: inherit;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-design .public-price-grid .public-time24-picker-popover select {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border-color: rgba(20, 34, 41, 0.18);
    background: #ffffff;
    color: #000000;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.public-time24-picker-separator {
    display: grid;
    place-items: center;
    min-height: 42px;
    font-size: 18px;
}

.public-design .public-price-grid .public-time24-picker-popover button {
    grid-column: 1 / -1;
    min-height: 38px;
}

.public-time24 > select:disabled {
    cursor: default;
}

.public-time24-separator {
    color: currentColor;
    font-size: 16px;
    line-height: 1;
}

.public-time24.is-compact {
    min-width: 124px;
    min-height: 42px;
}

.public-time24.is-compact > select {
    min-height: 40px;
    font-size: 13px;
}

.public-time24-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(0, 127, 143, 0.28);
    border-radius: 999px;
    background: rgba(0, 127, 143, 0.1);
    color: var(--public-accent, #7E22CE);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: none;
}

.public-price-form.is-cyclic-mode .public-time24-badge {
    display: none;
}

.public-calculation-discounts {
    display: grid;
    gap: 10px;
}

.public-calculation-discounts > span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-calculation-discounts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-discount-card {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid rgba(126, 34, 206, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    font-weight: 900;
    gap: 8px;
}

.public-discount-card input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.public-discount-card strong {
    color: var(--public-accent, #7E22CE);
}

.public-discount-info-trigger {
    display: inline-grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.public-discount-info,
.public-calculation-availability-warning,
.public-availability-warning {
    margin: 0;
    color: #e34858;
    font-weight: 900;
    line-height: 1.4;
}

.public-availability-warning span {
    margin-right: 4px;
    color: #e34858;
}

.public-config-needed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 180px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(126, 34, 206, 0.22);
    border-radius: 8px;
    background: var(--public-surface, #ffffff);
    color: var(--public-ink, #000000);
}

.public-config-needed > div {
    display: grid;
    gap: 8px;
}

.public-config-needed span {
    color: var(--public-accent, #7E22CE);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-config-needed strong {
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.08;
}

.public-config-needed p {
    margin: 0;
    color: var(--public-muted, #000000);
    font-weight: 800;
}

.public-config-needed a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--public-accent, #7E22CE);
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.public-design :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.public-design :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats) article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 16px;
    border-radius: 8px;
}

.public-design :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats) span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-design :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats) strong {
    font-size: 31px;
    line-height: 1;
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list, .visual-model-grid, .urban-model-grid, .map-model-list, .direct-model-list) {
    display: grid;
    gap: 16px;
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list) {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.public-design :is(.visual-model-grid, .urban-model-grid, .map-model-list, .direct-model-list) {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list, .visual-model-grid, .urban-model-grid, .map-model-list, .direct-model-list) article {
    display: grid;
    gap: 10px;
    min-height: 150px;
    padding: 22px;
    border-radius: 8px;
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list, .visual-model-grid, .urban-model-grid, .map-model-list, .direct-model-list) article span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list) article strong {
    font-size: clamp(44px, 4.6vw, 60px);
    line-height: 1;
}

.public-design :is(.visual-model-grid, .urban-model-grid, .map-model-list, .direct-model-list) article strong {
    font-size: 22px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.public-design :is(.visual-chip-wall, .urban-chip-rail, .map-chip-grid, .direct-chip-list) {
    display: grid;
    gap: 12px;
}

.public-design :is(.visual-chip-wall, .urban-chip-rail, .map-chip-grid) {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.public-design :is(.visual-chip-wall, .urban-chip-rail, .map-chip-grid, .direct-chip-list) span {
    display: grid;
    place-items: center;
    min-height: 72px;
    padding: 14px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.public-design :is(.visual-map, .urban-map, .map-hero-canvas, .direct-map, .public-design-map-fallback) {
    min-height: 340px;
    border-radius: 8px;
    overflow: hidden;
}

.public-design-map-fallback {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 26px;
    text-align: center;
}

.public-design :is(.visual-result, .urban-result, .map-result, .direct-result) {
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
}

.public-design :is(.visual-result, .urban-result, .map-result, .direct-result) > div:first-child {
    display: grid;
    gap: 5px;
}

.public-design :is(.visual-result, .urban-result, .map-result, .direct-result) > div:first-child span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-design :is(.visual-result, .urban-result, .map-result, .direct-result) > div:first-child strong {
    font-size: 46px;
    line-height: 1;
}

.public-contact-block {
    padding: clamp(62px, 8vw, 112px) max(18px, calc((100vw - 1680px) / 2));
}

.public-contact-form {
    display: grid;
    gap: 28px;
}

.public-contact-head {
    display: grid;
    gap: 8px;
}

.public-contact-head span {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-contact-head h2 {
    max-width: 820px;
    font-size: 52px;
    line-height: 1.06;
    font-weight: 750;
}

.public-contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.48fr) minmax(360px, 1fr);
    gap: 22px;
    align-items: stretch;
}

.public-contact-fields,
.public-contact-message {
    display: grid;
    gap: 12px;
}

.public-contact-fields {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.public-contact-phone-field {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
}

.public-phone-row {
    display: grid;
    grid-template-columns: minmax(116px, 0.24fr) minmax(0, 1fr);
    gap: 10px;
}

.public-contact-form .country-picker {
    position: relative;
    min-width: 0;
}

.public-contact-form .country-picker-button {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 17px;
    font-weight: 750;
}

.public-contact-form .country-picker-menu {
    z-index: 12;
    max-height: 260px;
}

.public-contact-form .country-picker-option {
    color: #000000;
}

.public-contact-message {
    grid-template-rows: auto 1fr;
}

.public-contact-form label {
    display: grid;
    gap: 8px;
    color: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.public-contact-phone-field {
    color: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.public-contact-form .field-label-line {
    color: currentColor;
}

.public-contact-form .required-mark {
    color: #ff6976;
}

.public-contact-form input,
.public-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(20, 34, 41, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
}

.public-contact-form input {
    min-height: 52px;
    padding: 0 16px;
}

.public-contact-form textarea {
    min-height: 260px;
    padding: 15px 16px;
    resize: vertical;
}

.public-contact-submit {
    justify-self: start;
    min-height: 52px;
    min-width: 180px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 900;
}

.public-contact-notice {
    max-width: 760px;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 800;
}

.public-contact-notice.is-ok {
    background: rgba(20, 107, 79, 0.12);
    color: #146b4f;
}

.public-contact-notice.is-error {
    background: rgba(159, 51, 65, 0.14);
    color: #9f3341;
}

.visual-contact {
    background: #102329;
    color: #ffffff;
}

.visual-contact .public-contact-submit {
    background: #ffffff;
    color: #7E22CE;
}

.urban-contact {
    background:
        radial-gradient(circle at 92% 10%, rgba(242, 195, 95, 0.16), transparent 34%),
        #2a120c;
    color: #ffffff;
}

.urban-contact .public-contact-head h2 {
    color: #ffffff;
}

.urban-contact .public-contact-form input,
.urban-contact .public-contact-form textarea,
.urban-contact .public-contact-form .country-picker-button {
    border-color: rgba(255, 176, 106, 0.32);
    background: #1b0f0b;
    color: #ffffff;
}

.urban-contact .public-contact-form input::placeholder,
.urban-contact .public-contact-form textarea::placeholder {
    color: rgba(255, 240, 223, 0.58);
}

.urban-contact .public-contact-submit {
    background: #f2c35f;
    color: #000000;
}

.map-contact {
    background:
        radial-gradient(circle at 94% 12%, rgba(204, 249, 255, 0.28), transparent 32%),
        linear-gradient(135deg, #e9fbff 0%, #bdeef8 100%);
    color: #083746;
}

.map-contact .public-contact-submit {
    background: #0b7892;
    color: #ffffff;
}

.direct-contact {
    background: #231a1f;
    color: #ffffff;
}

.direct-contact .public-contact-submit {
    background: #ffffff;
    color: #9f3341;
}

.public-design :is(.visual-footer, .urban-footer, .map-footer, .direct-footer) {
    display: grid;
    gap: 20px;
    padding: 28px max(28px, calc((100vw - 1680px) / 2)) 16px;
    background: #004f56;
    color: #ffffff;
}

/* Design 1: Impacto visual */
.public-design-visual {
    background: #f7fbfb;
}

.visual-hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px max(22px, calc((100vw - 1760px) / 2)) 32px;
    overflow: hidden;
    color: #ffffff;
}

.visual-hero-without-image {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(
            135deg,
            var(--public-accent-strong, #004f56),
            var(--public-accent, #7E22CE)
        );
}

.visual-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.visual-media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(6, 45, 53, 0.86), rgba(6, 45, 53, 0.48) 55%, rgba(6, 45, 53, 0.16));
    content: "";
}

.visual-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100% - 44px, 1760px);
    margin: 0 auto;
}

.visual-nav > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
}

.visual-nav a {
    color: #ffffff;
    font-weight: 900;
}

.visual-nav > div > a {
    padding: 11px 12px;
    border-radius: 8px;
}

.visual-nav-cta,
.visual-primary {
    border: 1px solid rgba(141, 226, 235, 0.52);
    background: linear-gradient(135deg, #D8B4FE 0%, #2fb8c5 58%, #7E22CE 100%);
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(126, 34, 206, 0.28);
}

.visual-secondary {
    border: 1px solid rgba(255, 220, 142, 0.58);
    background: rgba(255, 232, 171, 0.16);
    color: #ffffff;
}

.visual-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 82px);
    width: min(100% - 44px, 1760px);
    min-height: calc(100svh - 110px);
    margin: 0 auto;
    padding: 42px 0;
}

.visual-copy {
    display: grid;
    gap: 20px;
    max-width: 980px;
}

.visual-copy h1 {
    max-width: 1040px;
    color: #ffffff;
    font-size: clamp(56px, 8.5vw, 120px);
    line-height: 0.9;
    overflow-wrap: anywhere;
}

.visual-copy p {
    max-width: 760px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.45;
    white-space: pre-line;
}

.visual-summary {
    display: grid;
    gap: 14px;
    padding: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #000000;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.visual-summary > strong {
    color: #7E22CE;
    font-size: 96px;
    line-height: 0.9;
}

.visual-summary p {
    display: grid;
    gap: 4px;
    color: #000000;
    font-weight: 800;
}

.visual-summary b {
    color: #000000;
    font-size: 12px;
    text-transform: uppercase;
}

.visual-stats {
    width: min(100% - 44px, 1760px);
    margin: 0 auto;
}

.visual-stats article {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
}

.public-design-visual :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location) {
    display: grid;
    gap: 24px;
    width: min(100% - 64px, 1680px);
    margin: 0 auto;
    padding: 58px 0;
}

.public-design-visual .visual-availability {
    padding-top: clamp(92px, 8vw, 132px);
}

.public-design-visual .visual-calculation {
    padding-top: clamp(112px, 8vw, 150px);
}

.public-design-visual :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location) h2 {
    max-width: 920px;
    color: #000000;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1;
}

.visual-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.visual-feature-grid article,
.visual-feature-grid a,
.visual-rate-grid article,
.visual-model-grid article {
    border: 1px solid #d4e5e7;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(20, 34, 41, 0.08);
}

.visual-feature-grid article,
.visual-feature-grid a {
    display: grid;
    gap: 12px;
    padding: 24px;
    border-radius: 8px;
    color: inherit;
}

.public-availability-cards {
    align-items: stretch;
}

.public-availability-card {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(20, 34, 41, 0.12);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.public-availability-card > * {
    position: relative;
    z-index: 1;
}

.public-availability-card::after {
    position: absolute;
    right: -44px;
    bottom: -56px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    content: "";
    pointer-events: none;
}

.public-availability-card:hover,
.public-availability-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 56px rgba(20, 34, 41, 0.14);
}

.public-availability-card h3 {
    color: #000000;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
}

.public-availability-card-spaces span {
    color: #000000;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-availability-card-spaces strong {
    color: #000000;
    font-size: clamp(58px, 8vw, 104px);
    line-height: 0.9;
}

.public-availability-card p,
.public-vehicle-category-grid p,
.public-category-note {
    color: #000000;
    font-size: 16px;
    line-height: 1.45;
}

.visual-feature-grid .public-availability-card-spaces {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(135deg, #bff8fb 0%, #66d3dd 52%, #7E22CE 100%);
    border-color: #75d6df;
}

.visual-feature-grid .public-availability-card-address {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
        linear-gradient(135deg, #fff5cf 0%, #f4c654 54%, #c86d1d 100%);
    border-color: #f5c95d;
}

.visual-feature-grid .public-availability-card-contact {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.46), transparent 28%),
        linear-gradient(135deg, #ffe2e8 0%, #f3889b 54%, #b83252 100%);
    border-color: #f59aaa;
}

.public-availability-card-spaces h3,
.public-availability-card-address h3,
.public-availability-card-contact h3,
.public-availability-card-spaces p,
.public-availability-card-address p,
.public-availability-card-contact p {
    color: #000000;
}

.public-design:not([data-public-theme="dark"]) :is(.public-availability-card h3, .public-category-card-head strong) {
    color: #000000 !important;
}

.public-design:not([data-public-theme="dark"]) :is(.public-availability-card p, .public-vehicle-category-grid p, .public-category-note) {
    color: #000000 !important;
}

.public-category-price-panel {
    display: grid;
    gap: 14px;
}

.public-period-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.public-period-selector button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #7E22CE;
    border-radius: 8px;
    background: #7E22CE;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none;
}

.public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #d8a526;
    background: #f2c25f;
    color: #000000;
    box-shadow: none;
}

.public-period-selector button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.public-period-selector button:is(.is-active, [aria-pressed="true"]):focus-visible {
    box-shadow: none;
}

.public-vehicle-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.public-vehicle-category-grid article {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid #cfe5e7;
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #edf7f7);
    box-shadow: 0 14px 34px rgba(20, 34, 41, 0.07);
}

.public-vehicle-category-grid article:nth-child(3n + 2) {
    background: linear-gradient(145deg, #fffaf0, #ffe6ad);
}

.public-vehicle-category-grid article:nth-child(3n) {
    background: linear-gradient(145deg, #f5fff8, #bdeccf);
}

.public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #80d8df;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.72), transparent 32%),
        linear-gradient(145deg, #f4ffff 0%, #d7f7f8 52%, #bceef1 100%);
}

.public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #f1c86b;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.62), transparent 32%),
        linear-gradient(145deg, #fff9e8 0%, #ffe9ad 52%, #f5cf70 100%);
}

.public-vehicle-category-grid article:nth-child(3n) {
    border-color: #ee9cad;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.62), transparent 32%),
        linear-gradient(145deg, #fff1f5 0%, #ffd2db 52%, #f3a0b2 100%);
}

.public-category-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.public-category-card-head strong {
    color: #000000;
    font-size: 24px;
    line-height: 1.05;
}

.public-category-price {
    color: #7E22CE;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.public-category-price b {
    font: inherit;
}

/* Inmuebles: los nombres de unidad son largos, el precio baja a su propia fila. */
.public-rental-unit-cards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.public-rental-unit-cards .public-category-card-head {
    grid-template-columns: minmax(0, 1fr);
}

.public-rental-unit-cards .public-category-card-head strong {
    font-size: 20px;
    line-height: 1.2;
}

.public-rental-unit-cards .public-category-price {
    font-size: clamp(24px, 2.4vw, 32px);
}

.public-design :is(.visual-rate-grid, .urban-rate-grid, .map-rate-grid, .direct-rate-list) strong b {
    font: inherit;
}

.public-category-note {
    max-width: 900px;
    padding: 18px 20px;
    border: 1px solid #cfe5e7;
    border-radius: 8px;
    background: #ffffff;
}

.visual-chip-wall span {
    border: 1px solid #d4e5e7;
    background: #ffffff;
    color: #7E22CE;
}

.visual-calculator,
.visual-result {
    border: 1px solid #d4e5e7;
    background: #eef7f7;
}

.visual-location {
    grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
    align-items: center;
    padding: clamp(96px, 7vw, 128px) 32px 24px;
    border-radius: 0;
    background: transparent;
}

.public-design-visual .visual-location {
    padding: clamp(96px, 7vw, 128px) 32px 24px;
}

.visual-location > div {
    display: grid;
    align-content: center;
    gap: 12px;
    padding-top: clamp(22px, 4vw, 68px);
}

.visual-map-pin {
    position: relative;
    display: inline-block;
    justify-self: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50% 50% 50% 0;
    background: #e53935;
    box-shadow: 0 12px 24px rgba(148, 25, 25, 0.22);
    transform: rotate(-45deg);
}

.visual-map-pin::after {
    position: absolute;
    inset: 19px;
    border-radius: 999px;
    background: #b91c1c;
    content: "";
}

.visual-map,
.visual-location .public-design-map-fallback {
    border: 1px solid #d4e5e7;
    background: transparent;
}

.public-template-clasica {
    --tierra-green: #5F7A4A;
    --tierra-green-hover: #526A40;
    --tierra-clay: #A06A45;
    --tierra-clay-hover: #8C5D3D;
    --tierra-dark-green: #13180F;
    --tierra-dark-green-raised: #212B1A;
    --tierra-dark-clay: #20150E;
    --tierra-dark-clay-raised: #382518;
    --public-accent: var(--tierra-green);
    --public-accent-strong: var(--tierra-green-hover);
    --public-surface: #ffffff;
    --public-soft: rgba(95, 122, 74, 0.2);
    --public-ink: #000000;
    --public-muted: #000000;
    --public-line: rgba(95, 122, 74, 0.35);
}

.public-template-clasica.public-design-visual {
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-location {
    padding: clamp(48px, 3.5vw, 64px) 32px 24px;
}

.public-template-clasica .public-sticky-nav {
    border-bottom-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(90deg, #5F7A4A 0%, #5F7A4A 62%, #A06A45 100%);
    color: #ffffff;
    box-shadow: 0 18px 54px rgba(32, 21, 14, 0.28);
}

.public-template-clasica .public-sticky-links > a:hover,
.public-template-clasica .public-sticky-links > a:focus-visible,
.public-template-clasica .public-sticky-socials a:hover,
.public-template-clasica .public-sticky-socials a:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.public-template-clasica .public-sticky-theme {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-template-clasica .public-sticky-cta {
    border: 1px solid #ffffff;
    background: #A06A45;
    color: #ffffff !important;
}

.public-template-clasica .tierra-hero {
    min-height: clamp(560px, 78svh, 820px);
    contain: paint;
}

.public-template-clasica .tierra-hero .visual-hero-grid {
    min-height: clamp(450px, calc(78svh - 110px), 710px);
}

.public-template-clasica .tierra-hero-media {
    block-size: 100%;
    max-block-size: 100%;
    margin: 0;
    overflow: hidden;
    overflow: clip;
    contain: strict;
}

.public-template-clasica .tierra-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.public-template-clasica .visual-media img {
    filter: brightness(0.48) saturate(0.86);
}

.public-template-clasica .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(95, 122, 74, 0.35), rgba(95, 122, 74, 0.2) 58%, rgba(160, 106, 69, 0.2)),
        linear-gradient(180deg, rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.35));
}

.public-template-clasica .visual-copy {
    width: fit-content;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, #5F7A4A 0%, #5F7A4A 52%, #A06A45 100%);
    box-shadow: 0 28px 72px rgba(19, 24, 15, 0.28);
}

.public-template-clasica .visual-copy :is(h1, p) {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(19, 24, 15, 0.35);
}

.public-template-clasica .visual-primary,
.public-template-clasica .visual-nav-cta {
    border-color: #ffffff;
    background: #5F7A4A;
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(19, 24, 15, 0.28);
}

.public-template-clasica .visual-primary:hover,
.public-template-clasica .visual-primary:focus-visible,
.public-template-clasica .visual-nav-cta:hover,
.public-template-clasica .visual-nav-cta:focus-visible {
    background: #526A40;
}

.public-template-clasica .visual-secondary {
    border-color: #ffffff;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica .visual-secondary:hover,
.public-template-clasica .visual-secondary:focus-visible {
    background: #8C5D3D;
}
.public-template-clasica :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog, .visual-comments) {
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-blog {
    padding-block: clamp(31px, 4vw, 56px);
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
}

.public-template-clasica .visual-blog .public-blog-section-head-scrollable {
    margin-inline-start: 56px;
}

.public-template-clasica .visual-blog .public-blog-grid p strong {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

@media (max-width: 640px) {
    .public-template-clasica .visual-blog .public-blog-section-head-scrollable {
        margin-inline-start: 48px;
    }

    .public-page-builder-parking
        .public-block-example-slot[data-public-block-example-slot="blog"]
        .public-template-clasica
        .visual-blog
        .public-blog-section-head-scrollable {
        margin-inline-start: 56px;
    }
}

/* Las franjas de Tierra se tocan entre sí: sin el gap del shell no quedan
   líneas blancas entre bloques (se nota sobre el CTA marrón y el footer). */
.public-template-clasica.public-design-visual {
    gap: 0;
}

.public-template-clasica .visual-availability {
    padding-top: clamp(46px, 4vw, 66px);
}

/* Franja a sangre completa: el fondo cubre todo el ancho y el contenido
   conserva la columna centrada de 1680px que usan las demás secciones. */
.public-template-clasica .visual-calculation {
    width: 100%;
    padding-top: clamp(56px, 4vw, 75px);
    padding-inline: max(32px, calc((100% - 1680px) / 2));
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
}

.public-template-clasica :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .public-section-head h2),
.public-template-clasica .visual-location > div > p,
.public-template-clasica .public-models-block > p {
    color: #000000;
}

.public-template-clasica :is(.visual-feature-grid article, .visual-feature-grid a, .visual-rate-grid article, .visual-model-grid article, .public-blog-grid article, .public-blog-card, .public-blog-entry, .public-reference-card) {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 18px 44px rgba(95, 122, 74, 0.2);
}

.public-template-clasica .public-blog-card:nth-child(odd),
.public-template-clasica .public-blog-grid article:nth-child(odd) {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
}

.public-template-clasica .public-blog-card:nth-child(even),
.public-template-clasica .public-blog-grid article:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
}

.public-template-clasica .public-blog-grid :is(span, strong, p, small),
.public-template-clasica :is(.public-blog-card-more, .public-blog-read-more) {
    color: #000000;
}

.public-template-clasica .public-blog-carousel-button {
    border-color: #5F7A4A;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica .visual-comments .public-reference-card:nth-child(odd) {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
}

.public-template-clasica .visual-comments .public-reference-card:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
}

.public-template-clasica .visual-comments .public-reference-card::before {
    background: #A06A45;
}

.public-template-clasica .visual-comments .public-reference-card :is(p, strong, .public-reference-location) {
    color: #000000;
}

.public-template-clasica .visual-comments .public-reference-control {
    border-color: #A06A45;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica .visual-feature-grid .public-availability-card-spaces {
    border-color: #5F7A4A;
    background: #5F7A4A;
}

.public-template-clasica .visual-feature-grid .public-availability-card-address {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.3), rgba(160, 106, 69, 0.3)),
        #ffffff;
}

.public-template-clasica .visual-feature-grid .public-availability-card-contact {
    border-color: #A06A45;
    background: #A06A45;
}

.public-template-clasica .public-availability-card-spaces :is(h3, p, span, strong),
.public-template-clasica .public-availability-card-contact :is(h3, p) {
    color: #ffffff !important;
}

.public-template-clasica .public-availability-card-address :is(h3, p),
.public-template-clasica:not([data-public-theme="dark"]) :is(.public-vehicle-category-grid p, .public-category-note, .public-category-card-head strong) {
    color: #000000 !important;
}

.public-template-clasica .public-period-selector button,
.public-template-clasica .public-price-grid button,
.public-template-clasica .public-calculation-mode label:has(input:checked) {
    border-color: #5F7A4A;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica .public-period-selector button:hover,
.public-template-clasica .public-period-selector button:focus-visible,
.public-template-clasica .public-price-grid button:hover,
.public-template-clasica .public-price-grid button:focus-visible {
    background: #526A40;
}

.public-template-clasica .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #A06A45;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica .public-category-price,
.public-template-clasica .public-category-price b {
    color: #000000;
}

.public-template-clasica .public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #5F7A4A;
    background: #ffffff;
}

.public-template-clasica .public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
}

.public-template-clasica .public-vehicle-category-grid article:nth-child(3n) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
}

.public-template-clasica :is(.visual-chip-wall span, .visual-calculator, .visual-result, .public-category-note, .public-calculation-result-panel) {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-chip-wall span,
.public-template-clasica .public-calculation-mode,
.public-template-clasica .public-discount-card {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
    color: #000000;
}

.public-template-clasica :is(.public-cyclic-field, .public-cyclic-day) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
    color: #000000;
}

.public-template-clasica .public-time24-badge {
    border-color: #5F7A4A;
    background: rgba(95, 122, 74, 0.2);
    color: #000000;
}

.public-template-clasica .public-time24:focus-within {
    border-color: #5F7A4A;
    box-shadow: 0 0 0 3px rgba(95, 122, 74, 0.2);
}

.public-template-clasica :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: #5F7A4A;
}

.public-template-clasica:not([data-public-theme="dark"]) :is(.public-discount-info, .public-calculation-availability-warning, .public-availability-warning, .required-mark) {
    color: #000000;
}

.public-template-clasica:not([data-public-theme="dark"]) .public-contact-notice {
    border: 1px solid #A06A45;
    background: rgba(160, 106, 69, 0.2);
    color: #000000;
}

.public-template-clasica :is(.public-calculation-facts article, .public-vehicle-model-popover, .public-vehicle-model-popover article) {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-map-pin {
    background: #e53935;
    box-shadow: 0 12px 24px rgba(148, 25, 25, 0.22);
}

.public-template-clasica .visual-map-pin::after {
    background: #b91c1c;
}

.public-template-clasica :is(.visual-map, .visual-location .public-design-map-fallback) {
    border-color: #5F7A4A;
}

.public-template-clasica .visual-banner {
    background:
        radial-gradient(circle at 100% 50%, rgba(95, 122, 74, 0.35), transparent 28%),
        #A06A45;
    color: #ffffff;
}

.public-template-clasica .visual-banner :is(h2, p) {
    color: #ffffff;
}

.public-template-clasica .visual-banner .public-banner-primary {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-banner .public-banner-secondary {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-template-clasica .visual-contact {
    background:
        radial-gradient(circle at 92% 8%, rgba(160, 106, 69, 0.35), transparent 32%),
        #5F7A4A;
    color: #ffffff;
}

.public-template-clasica .visual-contact.public-contact-block.public-parking-contact {
    padding-block: clamp(31px, 4vw, 56px);
    padding-inline: max(18px, calc((100% - 1680px) / 2));
}

.public-template-clasica .visual-contact :is(.public-contact-head h2, .public-contact-head span, label, .field-label-line) {
    color: #ffffff;
}

.public-template-clasica .visual-contact .public-contact-form :is(input, textarea, .country-picker-button) {
    border-color: #A06A45;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-contact .public-contact-form :is(input, textarea)::placeholder {
    color: #000000;
    opacity: 1;
}

.public-template-clasica .visual-contact .public-contact-submit {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-contact.public-parking-contact .public-contact-submit {
    justify-self: end;
}

.public-template-clasica .visual-footer {
    background: linear-gradient(135deg, #5F7A4A 0%, #5F7A4A 48%, #A06A45 100%);
    color: #ffffff;
}

/* El CTA integrado abre el footer como una fila de punta a punta: los márgenes
   negativos cancelan el padding del footer para que la banda quede igual que
   cuando el CTA era un bloque suelto. El aviso de "cargar WhatsApp" comparte la
   clase pero no es la banda: conserva su recuadro adentro del padding.
   El fondo es un velo translúcido: deja ver el mismo degradé del footer para
   que la banda se lea como parte de él y no como un bloque marrón aparte. */
.public-template-clasica .visual-footer .public-footer-cta.public-design-banner {
    margin: -28px calc(-1 * max(28px, (100vw - 1680px) / 2)) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(rgba(32, 21, 14, 0.22), rgba(32, 21, 14, 0.22));
    color: #ffffff;
}

.public-template-clasica .visual-footer .public-footer-cta :is(h2, p) {
    color: #ffffff;
}

.public-template-clasica .visual-footer .public-footer-cta .public-banner-primary {
    min-width: clamp(200px, 16vw, 280px);
    min-height: 48px;
    padding: 0 32px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica .visual-footer :is(.public-footer-logo-row strong, .public-footer-brand p, .public-footer-column, .public-footer-column > strong, .public-footer-column a, .public-footer-email span, .public-footer-bottom) {
    color: #ffffff;
}

.public-template-clasica .visual-footer .public-footer-socials a {
    border-color: #ffffff;
    color: #ffffff;
}

.public-template-clasica .visual-footer .public-footer-socials a:hover,
.public-template-clasica .visual-footer .public-footer-socials a:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-template-clasica .public-whatsapp-float,
.public-template-clasica .public-whatsapp-float:hover,
.public-template-clasica .public-whatsapp-float:focus-visible,
.public-template-clasica .public-whatsapp-float:active {
    border-color: #ffffff;
    background: var(--whatsapp-brand-green);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(19, 24, 15, 0.28);
}

.public-template-clasica.public-blog-list-page:not([data-public-theme="dark"]) {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
    color: #000000;
}

.public-template-clasica.public-blog-list-page:not([data-public-theme="dark"]) .public-blog-list-hero :is(h1, p, span),
.public-template-clasica.public-blog-list-page:not([data-public-theme="dark"]) .public-blog-list-card :is(h2, p, small, a) {
    color: #000000;
}

.public-template-clasica.public-blog-list-page:not([data-public-theme="dark"]) .public-blog-list-card:nth-child(odd) {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
}

.public-template-clasica.public-blog-list-page:not([data-public-theme="dark"]) .public-blog-list-card:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
}

.public-template-clasica.public-blog-detail-page:not([data-public-theme="dark"]) {
    background: #ffffff;
    color: #000000;
}

.public-template-clasica.public-blog-detail-page:not([data-public-theme="dark"]) :is(.public-blog-detail-head, .public-blog-entry-text, .public-blog-entry-text p) {
    color: #000000;
}

.public-template-clasica.public-blog-detail-page:not([data-public-theme="dark"]) .public-blog-detail-back {
    border-color: #A06A45;
    background: rgba(160, 106, 69, 0.2);
    color: #000000;
}

.public-template-compacta.public-design-visual {
    background: #fff3f6;
    color: #000000;
}

.public-template-compacta .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(58, 20, 31, 0.9), rgba(151, 59, 78, 0.58) 58%, rgba(245, 159, 169, 0.2)),
        linear-gradient(180deg, rgba(255, 214, 205, 0.1), rgba(255, 182, 193, 0.18));
}

.public-template-compacta .visual-primary,
.public-template-compacta .visual-nav-cta,
.public-template-compacta .public-banner-primary,
.public-template-compacta .public-contact-submit {
    border-color: rgba(245, 159, 169, 0.58);
    background: linear-gradient(135deg, #ffd6cd 0%, #f59faa 48%, #b83252 100%);
    color: #000000;
    box-shadow: 0 18px 38px rgba(184, 50, 82, 0.22);
}

.public-template-compacta .visual-secondary,
.public-template-compacta .public-banner-secondary {
    border-color: rgba(255, 221, 187, 0.68);
    background: rgba(255, 221, 187, 0.16);
    color: #ffffff;
}

.public-template-compacta :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog, .visual-comments) {
    background: #fff3f6;
    color: #000000;
}

.public-template-compacta .visual-availability {
    background:
        radial-gradient(circle at 96% 0%, rgba(255, 214, 205, 0.46), transparent 30%),
        #fff3f6;
}

.public-template-compacta .visual-calculation {
    background:
        radial-gradient(circle at 8% 8%, rgba(245, 159, 169, 0.26), transparent 34%),
        #fff7ee;
}

.public-template-compacta :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .public-section-head h2) {
    color: #000000;
}

.public-template-compacta :is(.visual-feature-grid article, .visual-feature-grid a, .visual-rate-grid article, .visual-model-grid article, .public-blog-grid article, .public-blog-card, .public-blog-entry, .public-reference-card) {
    border-color: #f0b5c2;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 214, 205, 0.26), transparent 34%),
        #ffffff;
    color: #000000;
    box-shadow: 0 18px 44px rgba(90, 28, 46, 0.09);
}

.public-template-compacta .visual-comments .public-reference-card::before {
    background: #d95d7a;
}

.public-template-compacta .visual-comments .public-reference-control {
    border-color: #f0b5c2;
    background: #fff8f9;
    color: #b83252;
}

.public-template-compacta .visual-feature-grid .public-availability-card-spaces {
    border-color: #f2a2b4;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(135deg, #fff0f3 0%, #f59faa 54%, #b83252 100%);
}

.public-template-compacta .visual-feature-grid .public-availability-card-address {
    border-color: #eab16f;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.46), transparent 28%),
        linear-gradient(135deg, #fff4df 0%, #f0b56c 54%, #a85b27 100%);
}

.public-template-compacta .visual-feature-grid .public-availability-card-contact {
    border-color: #c592d6;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.44), transparent 28%),
        linear-gradient(135deg, #fbecff 0%, #d59adb 52%, #7b3a86 100%);
}

.public-template-compacta :is(.public-availability-card h3, .public-availability-card p, .public-availability-card-spaces span, .public-availability-card-spaces strong) {
    color: #000000 !important;
}

.public-template-compacta .public-period-selector button {
    border-color: #b83252;
    background: #b83252;
    color: #ffffff;
}

.public-template-compacta .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #f0b56c;
    background: #f0b56c;
    color: #000000;
}

.public-template-compacta .public-category-price {
    color: #b83252;
}

.public-template-compacta .public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #f1aaba;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.68), transparent 32%),
        linear-gradient(145deg, #fff5f7 0%, #ffdbe3 52%, #f5b6c5 100%);
}

.public-template-compacta .public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #e8b578;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.62), transparent 32%),
        linear-gradient(145deg, #fff8ed 0%, #ffe0b3 52%, #efc07f 100%);
}

.public-template-compacta .public-vehicle-category-grid article:nth-child(3n) {
    border-color: #c69bd6;
    background:
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.62), transparent 32%),
        linear-gradient(145deg, #fcf0ff 0%, #ebcef2 52%, #d8abd8 100%);
}

.public-template-compacta :is(.visual-chip-wall span, .visual-calculator, .visual-result, .public-category-note) {
    border-color: #f0b5c2;
    background: #fff8f9;
    color: #b83252;
}

.public-template-compacta .visual-location {
    background:
        radial-gradient(circle at 8% 14%, rgba(245, 159, 169, 0.2), transparent 30%),
        linear-gradient(135deg, #fff7ee 0%, #fff3f6 100%);
}

.public-template-compacta :is(.visual-map, .visual-location .public-design-map-fallback) {
    border-color: #f0b5c2;
    background: #fff8f9;
}

.public-template-compacta .visual-map-pin {
    background: #d95d7a;
    box-shadow: 0 16px 34px rgba(184, 50, 82, 0.28);
}

.public-template-compacta .visual-map-pin::after {
    background: #8e243d;
}

.public-template-compacta .visual-banner {
    background:
        radial-gradient(circle at 100% 50%, rgba(255, 214, 205, 0.24), transparent 28%),
        linear-gradient(135deg, #8e243d 0%, #5b1e32 100%);
    color: #ffffff;
}

.public-template-compacta .visual-contact {
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 214, 205, 0.2), transparent 32%),
        linear-gradient(135deg, #6b2238 0%, #351722 100%);
    color: #ffffff;
}

.public-template-compacta .visual-contact .public-contact-head h2 {
    color: #ffffff;
}

.public-template-compacta .visual-footer {
    background: #351722;
    color: #ffffff;
}

.public-template-nocturna.public-design-visual {
    background: #071416;
}

.public-template-nocturna .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(7, 20, 22, 0.94), rgba(7, 20, 22, 0.68) 58%, rgba(7, 20, 22, 0.28)),
        linear-gradient(180deg, rgba(141, 226, 235, 0.16), rgba(200, 242, 97, 0.08));
}

.public-template-nocturna .visual-copy > span,
.public-template-nocturna .public-section-head span,
.public-template-nocturna .visual-vehicles > div > span,
.public-template-nocturna .visual-models > div > span,
.public-template-nocturna .visual-rates > div > span,
.public-template-nocturna .visual-location > div > span {
    color: #c8f261;
}

.public-template-nocturna .visual-primary,
.public-template-nocturna .visual-nav-cta,
.public-template-nocturna .public-banner-primary,
.public-template-nocturna .public-contact-submit {
    background: #D8B4FE;
    color: #000000;
}

.public-template-nocturna :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog) {
    background: #0d2024;
    color: #ffffff;
}

.public-template-nocturna :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .public-section-head h2) {
    color: #ffffff;
}

.public-template-nocturna :is(.visual-feature-grid article, .visual-rate-grid article, .visual-model-grid article, .public-blog-grid article, .public-blog-card, .public-blog-entry) {
    border-color: rgba(141, 226, 235, 0.28);
    background: #122b31;
    color: #ffffff;
    box-shadow: none;
}

.public-template-nocturna :is(.visual-chip-wall span, .visual-calculator, .visual-result) {
    border-color: rgba(141, 226, 235, 0.28);
    background: #10262b;
    color: #D8B4FE;
}

.public-template-nocturna .visual-contact {
    background: #071416;
}

.public-template-coral.public-design-visual {
    background: #fff7f4;
}

.public-template-coral .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(16, 75, 90, 0.9), rgba(16, 75, 90, 0.56) 56%, rgba(242, 109, 91, 0.22)),
        linear-gradient(180deg, rgba(255, 247, 244, 0.1), rgba(242, 109, 91, 0.2));
}

.public-template-coral .visual-primary,
.public-template-coral .visual-nav-cta,
.public-template-coral .public-banner-primary,
.public-template-coral .public-contact-submit {
    background: #f26d5b;
    color: #ffffff;
}

.public-template-coral .visual-secondary,
.public-template-coral .public-banner-secondary {
    border-color: rgba(255, 255, 255, 0.44);
}

.public-template-coral :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog) {
    background: #fff7f4;
    color: #000000;
}

.public-template-coral :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .public-section-head h2) {
    color: #000000;
}

.public-template-coral :is(.visual-feature-grid article, .visual-rate-grid article, .visual-model-grid article, .public-blog-grid article, .public-blog-card, .public-blog-entry) {
    border-color: #f3c6be;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 18px 44px rgba(242, 109, 91, 0.11);
}

.public-template-coral :is(.visual-chip-wall span, .visual-calculator, .visual-result) {
    border-color: #f3c6be;
    background: #ffffff;
    color: #000000;
}

.public-template-coral .visual-contact {
    background: #104b5a;
}

/* Design 2: Marte */
.public-design-urban {
    background: #1b0f0b;
    color: #ffffff;
}

.urban-hero {
    padding: 22px max(18px, calc((100vw - 1680px) / 2)) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(217, 103, 47, 0.22), transparent 32%),
        linear-gradient(135deg, #1b0f0b 0%, #30150d 52%, #5c2112 100%);
}

.urban-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px;
    border: 1px solid rgba(255, 176, 106, 0.24);
    border-radius: 8px;
    background: rgba(255, 176, 106, 0.08);
}

.urban-nav > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.urban-nav a {
    color: #ffffff;
    font-weight: 900;
}

.urban-nav > div > a {
    padding: 11px 12px;
}

.urban-nav-cta,
.urban-primary {
    background: #e86f32;
    color: #000000;
}

.urban-secondary {
    border: 1px solid rgba(255, 240, 223, 0.28);
    color: #ffffff;
}

.urban-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.5fr);
    gap: clamp(18px, 3vw, 42px);
    align-items: stretch;
    padding: clamp(42px, 7vw, 112px) 0 clamp(28px, 5vw, 72px);
}

.urban-status {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 420px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 240, 223, 0.22), transparent 36%),
        linear-gradient(145deg, #f2c35f 0%, #e86f32 48%, #7a2d16 100%);
    color: #000000;
    box-shadow: 0 28px 90px rgba(91, 33, 18, 0.42);
}

.urban-status > span {
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.urban-status > strong {
    font-size: clamp(86px, 9vw, 136px);
    line-height: 0.82;
}

.urban-status > b {
    font-size: 32px;
}

.urban-status > p {
    max-width: 520px;
    margin: 0;
    color: #000000;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.35;
}

.urban-status .public-category-price-panel {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.urban-status .public-period-selector {
    gap: 6px;
}

.urban-status .public-period-selector button {
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(27, 15, 11, 0.24);
    background: rgba(255, 240, 223, 0.68);
    color: #000000;
}

.urban-status .public-period-selector button.is-active {
    background: #1b0f0b;
    color: #ffffff;
}

.urban-status-rate-list {
    display: grid;
    gap: 9px;
}

.urban-status-rate-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(255, 240, 223, 0.18);
    border-radius: 8px;
    background: rgba(27, 15, 11, 0.88);
    color: #ffffff;
}

.urban-status-rate-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.urban-status-rate-title > span {
    font-size: 16px;
    font-weight: 950;
}

.urban-model-info {
    display: inline-grid;
    place-items: center;
    width: 1.2em;
    height: 1.2em;
    min-width: 1.2em;
    padding: 0;
    border: 1px solid rgba(247, 207, 114, 0.72);
    border-radius: 999px;
    background: rgba(247, 207, 114, 0.18);
    color: #f7cf72;
    font: inherit;
    font-size: 0.8em;
    line-height: 1;
    cursor: pointer;
}

.urban-model-info[aria-expanded="true"] {
    background: #f7cf72;
    color: #000000;
}

.urban-status-rate-list article strong {
    color: #f7cf72;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    text-align: right;
}

.urban-status-rate-list article small {
    grid-column: 1 / -1;
    color: #ffffff;
    font-weight: 800;
}

.urban-model-info-text {
    padding: 10px 12px;
    border: 1px solid rgba(247, 207, 114, 0.22);
    border-radius: 8px;
    background: rgba(247, 207, 114, 0.1);
    color: #ffffff !important;
    line-height: 1.45;
}

.urban-model-info-text[hidden] {
    display: none;
}

.urban-copy {
    display: grid;
    align-content: center;
    gap: 20px;
}

.urban-copy h1 {
    display: grid;
    gap: 0.04em;
    max-width: 920px;
    color: #ffffff;
    font-size: clamp(46px, 5.5vw, 88px);
    line-height: 0.9;
    overflow-wrap: normal;
}

.urban-copy h1 > span {
    display: block;
}

.urban-copy .urban-title-prefix {
    white-space: nowrap;
}

.urban-copy .urban-title-name {
    overflow-wrap: anywhere;
}

.urban-copy p {
    max-width: 760px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.45;
}

.urban-metrics {
    padding-bottom: 28px;
}

.urban-metrics article {
    border: 1px solid rgba(255, 176, 106, 0.2);
    background: #2a120c;
}

.public-design-urban :is(.urban-band, .urban-models, .urban-rates, .urban-location) {
    display: grid;
    gap: 28px;
    padding: clamp(70px, 8vw, 124px) max(18px, calc((100% - 1680px) / 2));
}

.urban-band {
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr);
    align-items: center;
    background:
        radial-gradient(circle at 92% 14%, rgba(242, 195, 95, 0.2), transparent 30%),
        linear-gradient(135deg, #5c2112 0%, #2a120c 100%);
    color: #ffffff;
}

.urban-band h2,
.urban-section-head h2,
.urban-location h2 {
    max-width: 900px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1;
}

.urban-chip-rail span {
    border: 1px solid rgba(242, 195, 95, 0.44);
    background: #f2c35f;
    color: #000000;
}

.urban-models {
    background:
        radial-gradient(circle at 12% 0%, rgba(232, 111, 50, 0.28), transparent 34%),
        linear-gradient(160deg, #240d08 0%, #6a2513 100%);
}

.urban-model-grid article,
.urban-rate-grid article {
    border: 1px solid rgba(242, 195, 95, 0.28);
    background:
        radial-gradient(circle at 96% 8%, rgba(242, 195, 95, 0.12), transparent 32%),
        #3a1a10;
    color: #ffffff;
}

.urban-rates {
    background:
        radial-gradient(circle at 100% 0%, rgba(232, 111, 50, 0.18), transparent 34%),
        #1b0f0b;
    color: #ffffff;
}

.urban-calculator,
.urban-result {
    border: 1px solid rgba(242, 195, 95, 0.32);
    background: #2a120c;
    color: #ffffff;
}

.urban-location {
    grid-template-columns: minmax(420px, 0.46fr) minmax(0, 1fr);
    align-items: center;
    background:
        radial-gradient(circle at 12% 16%, rgba(242, 195, 95, 0.18), transparent 28%),
        linear-gradient(135deg, #3a1a10 0%, #7a2d16 100%);
    color: #ffffff;
}

.urban-location-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    justify-self: start;
    gap: 14px;
    width: 100%;
    max-width: 520px;
    text-align: left;
}

.urban-location-copy .urban-location-pin {
    justify-self: center;
}

.urban-location-copy :is(h2, p) {
    color: #ffffff;
}

.urban-location-copy p {
    max-width: 480px;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
}

@media (min-width: 1121px) {
    .urban-location {
        column-gap: clamp(52px, 5vw, 84px);
    }

    .urban-location-copy {
        padding-left: clamp(20px, 3vw, 48px);
        transform: translateY(-12px);
    }

    .urban-location :is(.urban-map, .public-design-map-fallback) {
        width: calc(100% - clamp(18px, 2.5vw, 36px));
        justify-self: end;
    }
}

.urban-map,
.urban-location .public-design-map-fallback {
    border: 1px solid rgba(242, 195, 95, 0.38);
    background: #2a120c;
}

.urban-footer {
    background: #160b08;
    color: #ffffff;
}

.public-design-urban .public-period-selector button {
    border-color: rgba(242, 195, 95, 0.34);
    background: #5c2112;
    color: #ffffff;
}

.public-design-urban .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #f2c35f;
    background: #f2c35f;
    color: #000000;
}

.public-design-urban .public-category-price {
    color: #f2c35f;
}

.public-design-urban :is(.public-category-card-head strong, .urban-model-grid article strong, .urban-rate-grid article strong) {
    color: #ffffff !important;
}

.public-design-urban :is(.public-vehicle-category-grid p, .public-category-note, .urban-rate-grid article small, .urban-model-grid article small) {
    color: #ffffff !important;
}

.public-design-urban .public-category-note,
.public-design-urban :is(.public-discount-card, .public-config-needed, .public-calculation-mode, .public-cyclic-field, .public-calculation-result-panel) {
    border-color: rgba(242, 195, 95, 0.28);
    background: #3a1a10;
    color: #ffffff;
}

.public-design-urban .public-price-grid :is(input, select, .public-time24),
.public-design-urban .public-cyclic-grid .public-time24 {
    border-color: rgba(242, 195, 95, 0.28);
    background: #1b0f0b;
    color: #ffffff;
}

.public-design-urban .public-price-grid.public-price-grid-single-time {
    grid-template-columns:
        minmax(250px, 1.15fr)
        repeat(2, minmax(185px, 0.75fr))
        minmax(150px, 0.62fr)
        minmax(180px, 0.78fr);
}

.public-design-urban .public-time24-picker-popover {
    border-color: rgba(242, 195, 95, 0.28);
    background: #2a120c;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(27, 15, 11, 0.46);
}

.public-design-urban .public-price-grid .public-time24-picker-popover select {
    border-color: rgba(242, 195, 95, 0.28);
    background: #1b0f0b;
    color: #ffffff;
}

.public-design-urban .public-time24-picker [data-public-time24-display].is-placeholder {
    color: rgba(255, 240, 223, 0.58);
}

.public-design-urban .public-price-grid :is(input, select)::placeholder {
    color: rgba(255, 240, 223, 0.56);
}

.public-design-urban .public-price-grid button,
.public-design-urban .public-contact-submit {
    background: #e86f32;
    color: #000000;
}

.public-design-urban .public-calculation-mode label,
.public-design-urban .public-cyclic-day {
    border-color: rgba(242, 195, 95, 0.28);
    background: #2a120c;
    color: #ffffff;
}

.public-design-urban .public-calculation-mode label:has(input:checked) {
    border-color: #f2c35f;
    background: #7a2d16;
    color: #ffffff;
}

.public-design-urban .public-calculation-facts article {
    border-color: rgba(242, 195, 95, 0.24);
    background: #2a120c;
}

.public-design-urban .public-calculation-facts article.public-discount-fact {
    border-color: #e86f32;
    background: linear-gradient(135deg, rgba(232, 111, 50, 0.28), rgba(42, 18, 12, 0.92));
    box-shadow: inset 4px 0 0 #e86f32;
}

.public-design-urban .public-calculation-facts article.public-discount-total-fact {
    border-color: #f2c35f;
    background: linear-gradient(135deg, rgba(242, 195, 95, 0.24), rgba(42, 18, 12, 0.92));
    box-shadow: inset 4px 0 0 #f2c35f;
}

.public-design-urban .public-price-detail :is(th, td).public-discount-column {
    background: rgba(232, 111, 50, 0.18);
    color: #f7cf72;
}

.public-design-urban .public-price-detail tr.is-total .public-discount-column {
    background: rgba(242, 195, 95, 0.2);
    color: #f2c35f;
}

.public-design-urban .public-map-info-window a {
    color: #7a2d16 !important;
}

/* Design 3: Urano */
.public-design-map {
    background: #eefcff;
    color: #000000;
}

.map-first {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(32px, 5vw, 72px) max(18px, calc((100vw - 1680px) / 2)) clamp(54px, 6vw, 84px);
    background:
        radial-gradient(circle at 82% 14%, rgba(204, 249, 255, 0.68), transparent 30%),
        radial-gradient(circle at 18% 92%, rgba(89, 200, 216, 0.22), transparent 34%),
        linear-gradient(135deg, #f7fdff 0%, #d7f7ff 42%, #72d9e7 100%);
}

.map-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.map-hero-media::after {
    position: absolute;
    inset: 0;
    content: "";
}

.map-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.map-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.map-links a {
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #0b7084;
    font-weight: 900;
}

.map-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 580px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
}

.map-hero-canvas,
.map-first .public-design-map-fallback {
    width: 100%;
    height: clamp(360px, 42vh, 540px);
    min-height: 0;
    border: 1px solid rgba(82, 196, 216, 0.46);
    background: #dff8ff;
    box-shadow: 0 24px 60px rgba(23, 102, 130, 0.16);
}

.map-arrival-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(24px, 4vw, 46px);
    border-radius: 8px;
    border: 1px solid rgba(82, 196, 216, 0.34);
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 237, 249, 0.32), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 251, 255, 0.86));
    box-shadow: 0 18px 44px rgba(8, 55, 70, 0.12);
}

.map-arrival-card h1 {
    color: #000000;
    font-size: clamp(58px, 7vw, 112px);
    line-height: 0.94;
    overflow-wrap: anywhere;
}

.map-arrival-card p {
    color: #000000;
    font-size: 19px;
    line-height: 1.45;
}

.map-arrival-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.map-arrival-card dl div {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(82, 196, 216, 0.28);
    background: rgba(224, 248, 255, 0.78);
}

.map-arrival-card dt {
    color: #0b7892;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.map-arrival-card dd {
    margin: 0;
    font-weight: 900;
}

.map-primary {
    background: #0b7892;
    color: #ffffff;
}

.map-secondary {
    border: 1px solid rgba(11, 120, 146, 0.34);
    color: #0b7084;
    background: rgba(255, 255, 255, 0.52);
}

.map-stats {
    margin-top: 18px;
}

.map-stats article {
    border: 1px solid rgba(82, 196, 216, 0.34);
    background: rgba(255, 255, 255, 0.76);
}

.public-design-map :is(.map-vehicles, .map-rates, .map-consult) {
    display: grid;
    gap: 24px;
    padding: clamp(72px, 8vw, 118px) max(18px, calc((100vw - 1680px) / 2));
}

.public-design-map .map-vehicles {
    padding-block: clamp(36px, 4vw, 59px);
    background:
        radial-gradient(circle at 95% 6%, rgba(204, 249, 255, 0.48), transparent 28%),
        #f7fdff;
}

.public-design-map .map-rates {
    padding-block: clamp(36px, 4vw, 59px);
}

.public-design-map .map-model-list article {
    align-content: center;
    min-height: 72px;
    padding: 18px 22px;
}

.map-vehicles h2,
.map-section-head h2 {
    max-width: 860px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.map-chip-grid span {
    border: 1px solid rgba(82, 196, 216, 0.34);
    background: #dff8ff;
    color: #0b7084;
}

.map-model-list article,
.map-rate-grid article {
    border: 1px solid rgba(82, 196, 216, 0.34);
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 237, 249, 0.18), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #e9fbff 100%);
    box-shadow: 0 14px 36px rgba(8, 55, 70, 0.08);
}

.map-rates {
    background:
        linear-gradient(135deg, #e9fbff 0%, #cceffc 100%);
}

.map-consult {
    background: #f6fdff;
}

.map-calculator,
.map-result {
    border: 1px solid rgba(82, 196, 216, 0.34);
    background: #e9fbff;
}

.map-footer {
    background: #083746;
    color: #ffffff;
}

/* Design 4: Reserva rapida */
.public-design-direct {
    background: #fff9f7;
    color: #000000;
}

.direct-hero {
    padding: 22px max(18px, calc((100vw - 1560px) / 2)) clamp(54px, 8vw, 96px);
    background: #fff9f7;
}

.direct-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(36px, 6vw, 82px);
}

.direct-nav-link,
.direct-nav-cta,
.direct-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
}

.direct-nav-link {
    border: 1px solid #ead8dc;
    color: #000000;
}

.direct-nav-cta,
.direct-primary {
    background: #9f3341;
    color: #ffffff;
}

.direct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
    gap: clamp(24px, 5vw, 78px);
    align-items: start;
}

.direct-copy {
    display: grid;
    gap: 20px;
}

.direct-copy h1 {
    max-width: 900px;
    color: #000000;
    font-size: clamp(52px, 8vw, 112px);
    line-height: 0.9;
    overflow-wrap: anywhere;
}

.direct-copy p {
    max-width: 700px;
    color: #000000;
    font-size: 21px;
    line-height: 1.45;
}

.direct-stats {
    margin-top: 18px;
}

.direct-stats article {
    border: 1px solid #ead8dc;
    background: #ffffff;
}

.direct-card {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid #ead8dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(35, 26, 31, 0.12);
}

.direct-card > strong {
    color: #9f3341;
    font-size: clamp(44px, 5vw, 66px);
    line-height: 0.95;
}

.direct-calculator {
    border-top: 1px solid #ead8dc;
    padding-top: 18px;
}

.direct-calculator .public-price-grid {
    grid-template-columns: 1fr;
}

.direct-calculator .public-date-time {
    grid-template-columns: 1fr 1fr;
}

.direct-proof {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.6fr);
    gap: 28px;
    align-items: center;
    padding: clamp(68px, 8vw, 112px) max(18px, calc((100vw - 1560px) / 2));
    background: #231a1f;
    color: #ffffff;
}

.direct-proof img {
    width: 100%;
    min-height: 420px;
    border-radius: 8px;
    object-fit: cover;
}

.direct-proof h2 {
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1;
}

.direct-result {
    width: min(100% - 36px, 1560px);
    margin: 26px auto;
    border: 1px solid #ead8dc;
    background: #ffffff;
}

.direct-lists {
    display: grid;
    grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
    gap: 26px;
    padding: clamp(68px, 8vw, 112px) max(18px, calc((100vw - 1560px) / 2));
}

.direct-lists > div {
    display: grid;
    gap: 18px;
}

.direct-lists h2,
.direct-rates h2,
.direct-location h2 {
    font-size: clamp(34px, 4vw, 54px);
}

.direct-chip-list {
    grid-template-columns: 1fr;
}

.direct-chip-list span {
    background: #ffffff;
    color: #9f3341;
    border: 1px solid #ead8dc;
}

.direct-model-list article,
.direct-rate-list article {
    border: 1px solid #ead8dc;
    background: #ffffff;
}

.direct-rates {
    display: grid;
    gap: 22px;
    padding: clamp(68px, 8vw, 112px) max(18px, calc((100vw - 1560px) / 2));
    background: #fff0e8;
}

.direct-location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
    gap: 26px;
    align-items: center;
    padding: clamp(68px, 8vw, 112px) max(18px, calc((100vw - 1560px) / 2));
}

.direct-map,
.direct-location .public-design-map-fallback {
    border: 1px solid #ead8dc;
    background: #ffffff;
}

.direct-footer {
    background: #231a1f;
    color: #ffffff;
}

.public-design :is(.visual-footer, .urban-footer, .map-footer, .direct-footer) {
    background: #004f56;
    color: #ffffff;
}

.public-footer-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(170px, 0.55fr) minmax(230px, 0.7fr) minmax(250px, 0.8fr);
    gap: clamp(24px, 5vw, 92px);
    align-items: start;
    width: 100%;
}

.public-footer-brand {
    display: grid;
    gap: 12px;
    max-width: 410px;
}

.public-footer-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.public-footer-logo-row img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.public-footer-logo-fallback {
    display: inline-grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #ffffff;
    color: #004f56;
    font-size: 18px;
    font-weight: 900;
}

.public-footer-logo-row strong {
    color: #ffffff;
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.public-footer-brand p {
    max-width: 360px;
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.35;
}

.public-footer-brand p.public-footer-address {
    font-weight: 400;
}

.public-footer-column {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #ffffff;
}

/* El display propio gana sobre el [hidden] del navegador: sin esta regla la
   columna "Redes" seguiría a la vista al desmarcar todas las redes. */
.public-footer-column[hidden] {
    display: none;
}

.public-footer-column > strong {
    color: #55e4ea;
    font-size: 16px;
    font-weight: 900;
}

.public-footer-column a {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.25;
    text-decoration: none;
}

.public-footer-column a:hover,
.public-footer-column a:focus-visible {
    color: #55e4ea;
}

.public-footer-email {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.public-footer-email span {
    color: #55e4ea;
}

/* Reutiliza exactamente los pictogramas de Informacion del Estacionamiento.
   La mascara toma el color del modelo: blanco en Tierra, marron en Marte y
   negro/blanco segun el tema de Urano. */
.public-footer-email .public-footer-contact-icon {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: inherit;
    background: currentColor;
}

.public-footer-contact-icon-mail {
    -webkit-mask: url("/static/contact-icons/mail.png") center / contain no-repeat;
    mask: url("/static/contact-icons/mail.png") center / contain no-repeat;
}

.public-footer-contact-icon-phone {
    -webkit-mask: url("/static/contact-icons/telefono.png") center / contain no-repeat;
    mask: url("/static/contact-icons/telefono.png") center / contain no-repeat;
}

/* La bandera del teléfono replica la ficha de Contacto del panel: mismo
   recorte 24x16 apoyado en blanco, para que el país configurado se lea igual
   acá que en la Configuración del estacionamiento. */
.public-footer-email .public-footer-phone-flag {
    width: 24px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid rgba(24, 35, 42, 0.18);
    border-radius: 3px;
    background: #ffffff;
    object-fit: cover;
}

.public-footer-legal {
    gap: 14px;
}

.public-footer-bottom {
    display: grid;
    justify-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 15px;
}

.public-models-block {
    display: grid;
    gap: 16px;
}

.public-models-block > p {
    max-width: 860px;
    margin: 0;
    color: currentColor;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    opacity: 1;
}

.public-social-links,
.visual-socials,
.urban-socials,
.map-socials,
.direct-socials {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Los botones del footer se acomodan en una grilla de hasta 4 columnas
   (4 x 2 con las 8 redes) para no invadir las columnas vecinas. */
.public-footer-socials {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 10px;
    justify-content: start;
    align-items: center;
}

/* El display de los botones pisa el [hidden] del navegador: sin esta regla
   las redes destildadas seguirían visibles en la vista previa del editor. */
.public-footer-socials a[hidden] {
    display: none;
}

.public-social-links a,
.visual-socials a,
.urban-socials a,
.map-socials a,
.direct-socials a,
.public-footer-socials a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.visual-socials a {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.urban-socials a,
.direct-socials a {
    background: rgba(255, 248, 232, 0.1);
    color: currentColor;
}

.map-socials a {
    background: #ffffff;
    color: #146b4f;
}

.public-footer-socials a {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #55e4ea;
    border-radius: 999px;
    color: #ffffff;
    opacity: 1;
}

.public-footer-socials a:hover,
.public-footer-socials a:focus-visible {
    background: rgba(85, 228, 234, 0.14);
    color: #55e4ea;
}

.public-footer-socials a svg,
.public-social-links a svg,
.visual-socials a svg,
.urban-socials a svg,
.map-socials a svg,
.direct-socials a svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
}

.public-footer-socials a svg {
    width: 22px;
    height: 22px;
}

.public-footer-socials .public-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.public-social-icon {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.direct-nav-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

[data-public-block][hidden] {
    display: none !important;
}

.public-design-blog {
    display: grid;
    gap: 24px;
    padding: clamp(62px, 8vw, 112px) max(18px, calc((100vw - 1680px) / 2));
}

.public-section-head {
    display: grid;
    gap: 8px;
    max-width: 900px;
}

.public-section-head span {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-section-head h2 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1;
}

.public-section-head p {
    margin: 0;
    color: currentColor;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    opacity: 1;
}

.public-gallery-grid,
.public-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.public-blog-carousel {
    position: relative;
    min-width: 0;
}

.public-blog-carousel.is-scrollable {
    padding: 0 54px;
    overflow: hidden;
}

.public-blog-grid.is-scrollable {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow: hidden;
    padding: 2px 2px 6px;
    scrollbar-width: none;
    transform: translate3d(0, 0, 0);
}

.public-blog-grid.is-scrollable::-webkit-scrollbar {
    display: none;
}

.public-blog-grid.is-scrollable.is-blog-moving {
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.42, 0, 0.2, 1);
    will-change: transform;
}

.public-blog-grid.is-scrollable .public-blog-card,
.public-blog-grid.is-scrollable article {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
}

.public-blog-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 999px;
    background: var(--public-surface, #ffffff);
    color: var(--public-ink, #000000);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(7, 31, 36, 0.16);
    transform: translateY(-50%);
}

.public-blog-carousel-prev {
    left: 0;
}

.public-blog-carousel-next {
    right: 0;
}

.public-blog-carousel-button:disabled {
    cursor: default;
    opacity: 1;
}

/* La vista previa vive dentro de .entry-form: reservamos columnas para que
   sus controles no hereden el ancho de los botones del formulario ni tapen las fotos. */
.public-page-builder-parking
    .public-block-example-slot[data-public-block-example-slot="blog"]
    .public-blog-carousel.is-scrollable {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 0;
    overflow: visible;
}

.public-page-builder-parking
    .public-block-example-slot[data-public-block-example-slot="blog"]
    .public-blog-carousel-button {
    position: static;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--public-accent, #087a8a) 42%, transparent);
    border-radius: 50%;
    background: color-mix(
        in srgb,
        var(--public-accent, #087a8a) 18%,
        var(--public-surface, #ffffff)
    );
    color: var(--public-accent, #087a8a);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(7, 31, 36, 0.16);
    transform: none;
}

@media (min-width: 1121px) {
    .public-page-builder-parking
        .public-block-editor[data-public-block-editor="mapa"]
        .public-block-example-slot[data-public-block-example-slot="mapa"]
        .public-block-inline-preview
        .visual-location > div:first-child {
        padding-top: 0;
        transform: translateY(-24px);
    }
}

@media (max-width: 900px) {
    .public-blog-grid.is-scrollable .public-blog-card,
    .public-blog-grid.is-scrollable article {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 640px) {
    .public-blog-carousel.is-scrollable {
        padding: 0 46px;
    }

    .public-blog-grid.is-scrollable .public-blog-card,
    .public-blog-grid.is-scrollable article {
        flex-basis: 100%;
    }
}

.public-gallery-grid figure {
    display: grid;
    gap: 10px;
    margin: 0;
}

.public-gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
}

.public-gallery-grid figcaption {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-gallery-grid figcaption span {
    opacity: 1;
}

.public-blog-grid article,
.public-blog-card {
    display: grid;
    align-content: space-between;
    gap: 16px;
    min-height: 178px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: currentColor;
    text-decoration: none;
}

.public-blog-card > img,
.public-blog-grid article > img {
    width: calc(100% + 40px);
    max-width: none;
    aspect-ratio: 16 / 9;
    margin: -20px -20px 0;
    object-fit: cover;
}

.public-blog-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    width: calc(100% + 40px);
    margin: -20px -20px 0;
}

.public-blog-media img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    margin: 0;
    border-radius: 0;
}

.public-blog-media-count-1 img {
    aspect-ratio: 16 / 10;
}

.public-blog-media-count-2 img {
    aspect-ratio: 4 / 3;
}

.public-blog-grid article > div,
.public-blog-card > div {
    display: grid;
    gap: 10px;
}

.public-blog-grid span {
    font-size: 13px;
    font-weight: 900;
    opacity: 1;
    text-transform: uppercase;
}

.public-blog-grid strong {
    font-size: 22px;
    line-height: 1.15;
}

.public-blog-card-more,
.public-blog-read-more {
    width: fit-content;
    color: #2f9dff;
    font-weight: 900;
    text-decoration: none;
}

.public-blog-card-more {
    font-size: 15px;
    opacity: 1;
    text-transform: none;
}

.public-blog-read-more {
    font-size: 18px;
}

.public-blog-card:hover .public-blog-card-more,
.public-blog-card:focus-visible .public-blog-card-more,
.public-blog-read-more:hover,
.public-blog-read-more:focus-visible {
    color: #6ac2ff;
    text-decoration: underline;
}

.public-blog-grid p,
.public-blog-grid small {
    margin: 0;
    line-height: 1.45;
    opacity: 1;
}

.public-blog-grid p {
    white-space: pre-line;
}

.public-blog-entry-list {
    display: grid;
    gap: 18px;
}

.public-blog-entry {
    display: none;
    gap: 18px;
    scroll-margin-top: 110px;
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid currentColor;
    border-radius: 8px;
    color: currentColor;
}

.public-blog-entry:target {
    display: grid;
}

.public-blog-entry h3 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
}

.public-blog-entry-image {
    width: 100%;
    max-height: 560px;
    border-radius: 8px;
    object-fit: cover;
}

.public-blog-entry-image-main {
    aspect-ratio: 16 / 9;
}

.public-blog-entry p {
    margin: 0;
    max-width: 980px;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.62;
}

.public-blog-detail-page {
    display: block;
    min-height: 100vh;
    padding: 0;
    background: #f7fbfa;
    color: #000000;
}

.public-blog-detail-page > .public-sticky-nav {
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.8fr) minmax(150px, 0.55fr);
    margin-bottom: 0;
}

.public-blog-detail-page .public-sticky-links {
    justify-self: center;
    justify-content: space-between;
    width: min(100%, 860px);
}

.public-blog-detail-page .public-sticky-links > a {
    min-width: 94px;
}

.public-blog-detail-article {
    display: grid;
    gap: clamp(22px, 4vw, 42px);
    padding: clamp(28px, 5vw, 72px) max(18px, calc((100vw - 1360px) / 2));
}

.public-blog-detail-back {
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: currentColor;
    font-weight: 900;
    text-decoration: none;
}

.public-blog-detail-head {
    max-width: 1240px;
    margin: 0 auto;
    text-align: left;
}

.public-blog-detail-head h1 {
    margin: 0;
    font-size: clamp(34px, 7vw, 78px);
    line-height: 0.98;
}

.public-blog-detail-head > p:first-child {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    opacity: 1;
    text-transform: uppercase;
}

.public-blog-detail-head > p:not(:first-child) {
    font-weight: 400;
    line-height: 1.55;
    opacity: 1;
}

.public-blog-detail-body {
    display: grid;
    gap: clamp(18px, 3vw, 34px);
    width: min(100%, 1320px);
    margin: 0 auto;
}

.public-blog-entry-text {
    display: grid;
    gap: 14px;
    max-width: 980px;
}

.public-blog-entry-text p {
    margin: 0;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 400;
    line-height: 1.68;
}

.public-blog-entry-text strong {
    font-weight: 900;
}

.public-blog-list-page {
    min-height: 100vh;
    background: #071418;
    color: #ffffff;
}

.public-blog-list-page > .public-sticky-nav {
    margin-bottom: 0;
}

.public-blog-list-wrap {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(34px, 5vw, 78px) max(18px, calc((100vw - 1460px) / 2)) clamp(58px, 8vw, 110px);
}

.public-blog-list-hero {
    display: grid;
    gap: 12px;
    max-width: 980px;
}

.public-blog-list-hero p,
.public-blog-list-hero span {
    margin: 0;
    color: #ffffff;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
}

.public-blog-list-hero p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-blog-list-hero h1 {
    margin: 0;
    font-size: clamp(58px, 9vw, 128px);
    line-height: 0.92;
}

.public-blog-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.public-blog-list-card {
    display: grid;
    align-content: start;
    overflow: hidden;
    border: 1px solid rgba(116, 214, 223, 0.36);
    border-radius: 8px;
    background: #142328;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
}

.public-blog-list-image {
    display: block;
    min-height: 260px;
    background: rgba(255, 255, 255, 0.06);
}

.public-blog-list-image img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.public-blog-list-card > div {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.public-blog-list-card small {
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-blog-list-card h2 {
    margin: 0;
    font-size: clamp(25px, 2.8vw, 38px);
    line-height: 1.05;
}

.public-blog-list-card h2 a {
    color: inherit;
    text-decoration: none;
}

.public-blog-list-card p {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.48;
}

.public-comments-block {
    display: grid;
    gap: 26px;
    padding: clamp(34px, 6vw, 78px) max(18px, calc((100vw - 1480px) / 2));
}

.public-references-head {
    max-width: 1100px;
}

.public-references-head h2 {
    max-width: none;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
}

.public-references-head p {
    max-width: 980px;
    font-size: clamp(18px, 2vw, 24px);
}

.public-references-carousel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 14px;
    align-items: center;
}

.public-references-viewport {
    overflow: hidden;
}

.public-references-track {
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow: visible;
    padding: 2px 0 6px;
    scrollbar-width: none;
    transform: translate3d(0, 0, 0);
}

.public-references-track::-webkit-scrollbar {
    display: none;
}

.public-references-track.is-reference-moving {
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.42, 0, 0.2, 1);
    will-change: transform;
}

.public-reference-card {
    position: relative;
    display: grid;
    flex: 0 0 calc((100% - 28px) / 3);
    gap: 16px;
    align-content: start;
    min-width: 0;
    min-height: 220px;
    padding: 28px 30px 26px;
    overflow: hidden;
    border: 1px solid rgba(196, 209, 212, 0.82);
    border-radius: 8px;
    background: linear-gradient(180deg, #f7fbfa 0%, #f3f8f7 100%);
    box-shadow: 0 10px 22px rgba(43, 47, 51, 0.06);
}

.public-reference-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--brand-primary);
    content: "";
}

.public-reference-card p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.48;
}

.public-reference-card strong {
    align-self: end;
    color: var(--ink);
    font-size: clamp(17px, 1.35vw, 21px);
}

.public-reference-location {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: -10px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.public-reference-flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(43, 47, 51, 0.12);
    object-fit: cover;
}

.public-references-carousel > .public-reference-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: 42px;
    min-width: 0;
    height: 42px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(109, 40, 217, 0.2);
    border-radius: 50%;
    background: #ffffff;
    color: var(--brand-primary);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(43, 47, 51, 0.08);
}

.public-reference-control:disabled {
    cursor: default;
    opacity: 1;
}

@media (max-width: 900px) {
    .public-blog-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-reference-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

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

    .public-references-carousel {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    .public-references-carousel > .public-reference-control {
        width: 36px;
        height: 36px;
        font-size: 26px;
    }

    .public-reference-card {
        flex-basis: 100%;
        min-height: 230px;
        padding: 24px;
    }

    .public-blog-list-image,
    .public-blog-list-image img {
        min-height: 210px;
    }
}

.public-design[data-public-theme="dark"].public-blog-detail-page {
    background: #081216;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-blog-entry-text p {
    color: #ffffff;
}
.visual-gallery,
.visual-blog {
    background: #f6f3ec;
    color: #000000;
}

.urban-gallery {
    background:
        radial-gradient(circle at 12% 0%, rgba(242, 195, 95, 0.16), transparent 32%),
        #2a120c;
    color: #ffffff;
}

.urban-blog {
    background:
        radial-gradient(circle at 10% 0%, rgba(232, 111, 50, 0.18), transparent 32%),
        #2a120c;
    color: #ffffff;
}

.urban-blog .public-blog-card {
    border-color: rgba(255, 176, 106, 0.26);
    background: #3a1a10;
    color: #ffffff;
    box-shadow: 0 18px 48px rgba(27, 15, 11, 0.22);
}

.urban-blog .public-blog-card-more {
    color: #f7cf72;
}

.urban-blog .public-blog-carousel-button {
    border-color: rgba(242, 195, 95, 0.36);
    background: #f2c35f;
    color: #000000;
}

.public-template-urbana[data-public-theme="dark"] .urban-blog :is(
    .public-section-head h2,
    .public-blog-grid p,
    .public-blog-grid small
) {
    color: #ffffff !important;
    opacity: 1;
}

.public-template-urbana :is(
    .public-blog-grid p,
    .public-blog-list-card p,
    .public-blog-entry-text p
) strong {
    color: inherit !important;
    font: inherit;
}

.urban-comments {
    background:
        radial-gradient(circle at 88% 10%, rgba(242, 195, 95, 0.18), transparent 32%),
        linear-gradient(135deg, #3a1a10 0%, #1b0f0b 100%);
    color: #ffffff;
}

.urban-comments .public-reference-card {
    border-color: rgba(242, 195, 95, 0.26);
    background:
        linear-gradient(180deg, #4b1e10 0%, #2a120c 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(27, 15, 11, 0.2);
}

.urban-comments .public-reference-card::before {
    background: #e86f32;
}

.urban-comments .public-reference-card p,
.urban-comments .public-reference-card strong,
.urban-comments .public-reference-location {
    color: #ffffff;
}

.urban-comments .public-reference-location {
    opacity: 1;
}

.urban-comments .public-reference-control {
    border-color: rgba(242, 195, 95, 0.3);
    background: #f2c35f;
    color: #000000;
}

.map-gallery {
    background: #f7fdff;
    color: #083746;
}

.map-blog {
    background: #e9fbff;
    color: #083746;
}

.map-comments {
    background: #f6fdff;
    color: #083746;
}

.map-comments .public-reference-card::before {
    background: #72d9e7;
}

.direct-gallery {
    background: #fff9f7;
    color: #000000;
}

.direct-blog {
    background: #231a1f;
    color: #ffffff;
}

.public-design-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    min-height: 88px;
    padding: 18px max(40px, calc((100vw - 1680px) / 2));
}

.public-banner-copy {
    display: grid;
    gap: 4px;
}

.public-design-banner h2 {
    max-width: 1120px;
    margin: 0;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.1;
}

.public-design-banner p {
    max-width: 860px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    opacity: 1;
}

.public-banner-primary,
.public-banner-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 900;
}

.public-banner-actions {
    justify-content: flex-end;
}

.visual-banner,
.urban-banner,
.map-banner,
.direct-banner {
    background: #0d4b52;
    color: #ffffff;
}

.visual-banner .public-banner-primary,
.urban-banner .public-banner-primary,
.map-banner .public-banner-primary,
.direct-banner .public-banner-primary {
    background: #007681;
    color: #ffffff;
}

.visual-banner .public-banner-secondary,
.urban-banner .public-banner-secondary,
.map-banner .public-banner-secondary,
.direct-banner .public-banner-secondary {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.urban-banner {
    background:
        radial-gradient(circle at 100% 50%, rgba(247, 207, 114, 0.2), transparent 28%),
        linear-gradient(135deg, #5c2112 0%, #2a120c 100%);
    color: #ffffff;
}

.urban-banner .public-banner-primary {
    background: #f2c35f;
    color: #000000;
}

.map-banner {
    background:
        radial-gradient(circle at 98% 50%, rgba(204, 249, 255, 0.24), transparent 28%),
        linear-gradient(135deg, #148eab 0%, #083746 100%);
    color: #ffffff;
}

.map-banner .public-banner-primary {
    background: #ccf9ff;
    color: #083746;
}

.urban-banner .public-banner-secondary {
    border-color: rgba(255, 240, 223, 0.28);
    background: rgba(255, 240, 223, 0.08);
    color: #ffffff;
}

html[data-public-parking-theme="dark"] body.public-page {
    background: #0f171b;
    color-scheme: dark;
}

.public-design[data-public-theme="dark"] {
    --public-cyclic-overlap-color: #ff9ca1;
    background: #0f171b;
    color: #ffffff;
    color-scheme: dark;
}

.public-design[data-public-theme="dark"] .public-sticky-nav {
    border-bottom-color: #36505a;
    background: rgba(15, 23, 27, 0.92);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.public-design[data-public-theme="dark"] .public-sticky-links > a:hover,
.public-design[data-public-theme="dark"] .public-sticky-links > a:focus-visible,
.public-design[data-public-theme="dark"] .public-sticky-socials a:hover,
.public-design[data-public-theme="dark"] .public-sticky-socials a:focus-visible {
    background: rgba(141, 226, 235, 0.12);
}

.public-design[data-public-theme="dark"] .public-sticky-theme {
    border-color: #47626b;
    background: rgba(255, 255, 255, 0.08);
}

.public-design[data-public-theme="dark"] .public-sticky-cta {
    background: #D8B4FE;
    color: #000000 !important;
}

.public-design[data-public-theme="dark"] :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .urban-band, .urban-models, .urban-rates, .urban-location, .map-first, .map-vehicles, .map-rates, .map-consult, .map-standalone-location, .direct-hero, .direct-lists, .direct-rates, .direct-location, .visual-gallery, .visual-blog, .urban-gallery, .urban-blog, .map-gallery, .map-blog, .direct-gallery, .direct-blog, .visual-comments, .urban-comments, .map-comments, .direct-comments, .visual-banner, .urban-banner, .map-banner, .direct-banner, .public-contact-block) {
    background: #0f171b;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .urban-band h2, .urban-section-head h2, .urban-location h2, .map-vehicles h2, .map-section-head h2, .direct-copy h1, .direct-lists h2, .direct-rates h2, .direct-location h2, .public-section-head h2, .public-contact-head h2) {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .visual-location > div > p {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-copy p, .urban-copy p, .map-arrival-card p, .direct-copy p, .public-blog-grid p, .public-blog-grid small, .public-blog-entry p, .public-reference-card p, .public-contact-form label) {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .visual-media::after {
    background: linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(4, 18, 23, 0.92), rgba(4, 18, 23, 0.64) 55%, rgba(4, 18, 23, 0.22));
}

.public-design[data-public-theme="dark"] :is(.visual-summary, .map-arrival-card, .direct-card, .visual-feature-grid article, .visual-feature-grid a, .visual-rate-grid article, .visual-model-grid article, .public-vehicle-category-grid article, .public-category-note, .urban-model-grid article, .urban-rate-grid article, .map-model-list article, .map-rate-grid article, .direct-model-list article, .direct-rate-list article, .public-blog-grid article, .public-blog-card, .public-blog-entry, .public-reference-card) {
    border-color: #36505a;
    background: #172329;
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

.public-design[data-public-theme="dark"] :is(.visual-summary > strong, .visual-summary b, .map-arrival-card h1, .map-arrival-card dd, .direct-card > strong, .public-blog-grid strong, .public-blog-entry h3, .public-reference-card strong) {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-reference-location {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-reference-control {
    border-color: rgba(79, 226, 226, 0.24);
    background: #151e21;
    color: #C084FC;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.public-design[data-public-theme="dark"] .public-blog-grid span {
    color: #D8B4FE;
    opacity: 1;
}

.public-design[data-public-theme="dark"] .public-blog-grid p {
    opacity: 1;
}

.public-design[data-public-theme="dark"] :is(.visual-summary p) {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .visual-feature-grid .public-availability-card-spaces {
    background: linear-gradient(135deg, #12383d 0%, #1b636c 60%, #7de1e9 100%);
    border-color: #2c8f99;
}

.public-design[data-public-theme="dark"] .visual-feature-grid .public-availability-card-address {
    background: linear-gradient(135deg, #392a13 0%, #70531d 60%, #f2c25f 100%);
    border-color: #b9862e;
}

.public-design[data-public-theme="dark"] .visual-feature-grid .public-availability-card-contact {
    background: linear-gradient(135deg, #3a1c24 0%, #753441 58%, #f59aaa 100%);
    border-color: #c96278;
}

.public-design[data-public-theme="dark"] :is(.public-availability-card h3, .public-category-card-head strong) {
    color: #ffffff !important;
}

.public-design[data-public-theme="dark"] :is(.public-availability-card-spaces span, .public-availability-card-spaces strong) {
    color: #ffffff !important;
}

.public-design[data-public-theme="dark"] .public-category-price {
    color: #D8B4FE;
}

.public-design[data-public-theme="dark"] :is(.public-availability-card p, .public-vehicle-category-grid p, .public-category-note) {
    color: #ffffff !important;
}

.public-design[data-public-theme="dark"] .public-period-selector button {
    border-color: #0b6f78;
    background: #0b6f78;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #f2c25f;
    background: #f2c25f;
    color: #000000;
}

.public-design[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #2a8790;
    background:
        radial-gradient(circle at 96% 8%, rgba(141, 226, 235, 0.18), transparent 32%),
        linear-gradient(145deg, #11282e 0%, #173f47 54%, #1f6670 100%);
}

.public-design[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #9e772c;
    background:
        radial-gradient(circle at 96% 8%, rgba(240, 199, 103, 0.16), transparent 32%),
        linear-gradient(145deg, #2c2415 0%, #4a3617 54%, #74521b 100%);
}

.public-design[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n) {
    border-color: #9a5262;
    background:
        radial-gradient(circle at 96% 8%, rgba(245, 154, 170, 0.16), transparent 32%),
        linear-gradient(145deg, #2e1720 0%, #4c2130 54%, #723144 100%);
}

.public-design[data-public-theme="dark"] .visual-location {
    background: transparent;
}

.public-design[data-public-theme="dark"] :is(.visual-chip-wall span, .urban-chip-rail span, .map-chip-grid span, .direct-chip-list span, .map-arrival-card dl div) {
    border: 1px solid #36505a;
    background: #203238;
    color: #D8B4FE;
}

.public-design[data-public-theme="dark"] :is(.visual-calculator, .visual-result, .urban-calculator, .urban-result, .map-calculator, .map-result, .direct-result, .public-calculation-result-panel) {
    border-color: #36505a;
    background: #172329;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.public-discount-card, .public-config-needed, .public-calculation-mode, .public-cyclic-field) {
    border-color: #36505a;
    background: #172329;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-config-needed p,
.public-design[data-public-theme="dark"] .public-selected-vehicle-models,
.public-design[data-public-theme="dark"] .public-cyclic-field p {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-vehicle-model-popover {
    border-color: rgba(255, 255, 255, 0.18);
    background: #142229;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.public-design[data-public-theme="dark"] .public-vehicle-model-popover article {
    border-color: rgba(255, 255, 255, 0.14);
    background: #101a1f;
}

.public-design[data-public-theme="dark"] .public-vehicle-model-popover article strong {
    color: #8ce8f0;
}

.public-design[data-public-theme="dark"] .public-vehicle-model-popover article span,
.public-design[data-public-theme="dark"] .public-vehicle-model-empty {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-calculation-facts article {
    border-color: #36505a;
    background: #101a1f;
}

.public-design[data-public-theme="dark"] .public-calculation-facts article.public-discount-fact {
    border-color: #52d8e4;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(16, 26, 31, 0.9));
    box-shadow: inset 4px 0 0 #52d8e4;
}

.public-design[data-public-theme="dark"] .public-calculation-facts article.public-discount-total-fact {
    border-color: rgba(37, 211, 102, 0.78);
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.24), rgba(16, 26, 31, 0.9));
    box-shadow: inset 4px 0 0 #25d366;
}

.public-design[data-public-theme="dark"] .public-price-detail :is(th, td).public-discount-column {
    background: rgba(126, 34, 206, 0.24);
    color: #D8B4FE;
}

.public-design[data-public-theme="dark"] .public-price-detail tr.is-total .public-discount-column {
    background: rgba(37, 211, 102, 0.18);
    color: #9af0bb;
}

.public-design[data-public-theme="dark"] .public-price-grid :is(input, select, .public-time24),
.public-design[data-public-theme="dark"] .public-cyclic-grid .public-time24,
.public-design[data-public-theme="dark"] .public-contact-form :is(input, textarea, .country-picker-button) {
    border-color: #47626b;
    background: #101a1f;
    color: #ffffff;
}

.app-shell .public-page-builder-parking .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-time24 select option {
    background: #20150E;
    color: #ffffff;
}

.app-shell .public-page-builder-parking .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-time24-picker-popover {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.app-shell .public-page-builder-parking .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-time24-picker-popover select {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff;
}

.app-shell .public-page-builder-parking .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-time24-picker [data-public-time24-display].is-placeholder {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-contact-form .country-picker-menu {
    border-color: #47626b;
    background: #101a1f;
}

.public-design[data-public-theme="dark"] .public-time24-badge {
    border-color: rgba(82, 216, 228, 0.38);
    background: rgba(82, 216, 228, 0.12);
    color: #D8B4FE;
}

.public-design[data-public-theme="dark"] .public-contact-form .country-picker-option {
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-contact-form .country-picker-option:hover,
.public-design[data-public-theme="dark"] .public-contact-form .country-picker-option.is-selected {
    background: #17323a;
}

.public-design[data-public-theme="dark"] .public-price-grid :is(input, select)::placeholder,
.public-design[data-public-theme="dark"] .public-contact-form :is(input, textarea)::placeholder {
    color: #8fa5ad;
}

.public-design[data-public-theme="dark"] .public-calculation-mode label,
.public-design[data-public-theme="dark"] .public-cyclic-day {
    border-color: #36505a;
    background: #101a1f;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-calculation-mode label:has(input:checked) {
    background: #007987;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-map, .urban-map, .map-hero-canvas, .direct-map, .public-design-map-fallback) {
    border: 1px solid #36505a;
    background: #142229;
}

.public-design[data-public-theme="dark"] .visual-map {
    background: transparent;
}

.public-map-canvas :is(.gm-style-iw, .gm-style-iw-c, .gm-style-iw-d),
.public-map-canvas :is(.gm-style-iw, .gm-style-iw-c, .gm-style-iw-d) * {
    color: #000000 !important;
}

.public-map-canvas .gm-style-iw-c {
    max-width: 240px !important;
    padding: 10px 12px !important;
}

.public-map-canvas .gm-style-iw-d {
    overflow: hidden !important;
}

.public-map-info-window {
    display: grid;
    gap: 3px;
    max-width: 210px;
    color: #000000;
    font-size: 14px;
    line-height: 1.25;
}

.public-map-info-window a {
    color: #7E22CE !important;
    font-weight: 900;
    text-decoration: none;
}

.public-map-info-window span {
    color: #000000 !important;
}

.public-design[data-public-theme="dark"] :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats) article {
    border-color: #36505a;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.map-links a, .direct-nav-link, .map-socials a) {
    border: 1px solid #36505a;
    background: #172329;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.public-theme-toggle, .visual-nav > div, .urban-nav) {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-primary, .visual-nav-cta, .map-primary, .direct-nav-cta, .direct-primary, .public-banner-primary, .public-contact-submit) {
    background: #D8B4FE;
    color: #000000;
}

.public-design[data-public-theme="dark"] :is(.visual-primary, .visual-nav-cta) {
    border-color: rgba(141, 226, 235, 0.54);
    background: linear-gradient(135deg, #D8B4FE 0%, #2db8c5 58%, #04717d 100%);
    color: #000000;
}

.public-design[data-public-theme="dark"] :is(.visual-secondary, .urban-secondary, .map-secondary, .public-banner-secondary) {
    border-color: #47626b;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .visual-secondary {
    border-color: rgba(230, 184, 92, 0.58);
    background: rgba(230, 184, 92, 0.16);
    color: #ffe7a8;
}

.public-design[data-public-theme="dark"] :is(.urban-primary, .urban-nav-cta) {
    background: #e6b85c;
    color: #000000;
}

.public-design[data-public-theme="dark"] .direct-banner .public-banner-primary {
    background: #ff7f93;
    color: #000000;
}

.public-design[data-public-theme="dark"] .public-design-banner {
    background: #0d4b52;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-design-banner .public-banner-primary {
    background: #007681;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] .public-design-banner .public-banner-secondary {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-contact, .urban-contact, .map-contact, .direct-contact) {
    background: #12383d;
    color: #ffffff;
}

.public-design[data-public-theme="dark"] :is(.visual-footer, .urban-footer, .map-footer, .direct-footer) {
    background: #004f56;
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] {
    background: #061a26;
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] :is(.map-first, .map-vehicles, .map-rates, .map-consult, .map-standalone-location, .map-gallery, .map-blog, .map-comments) {
    background: #061a26;
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] .map-first {
    background:
        radial-gradient(circle at 82% 18%, rgba(142, 238, 255, 0.2), transparent 32%),
        radial-gradient(circle at 12% 86%, rgba(80, 181, 215, 0.16), transparent 34%),
        linear-gradient(135deg, #061a26 0%, #0a2f43 50%, #11546a 100%);
}

.public-design-map[data-public-theme="dark"] .map-vehicles {
    background:
        radial-gradient(circle at 95% 6%, rgba(142, 238, 255, 0.14), transparent 30%),
        linear-gradient(135deg, #061a26 0%, #092536 100%);
}

.public-design-map[data-public-theme="dark"] .map-rates {
    background:
        radial-gradient(circle at 100% 0%, rgba(80, 181, 215, 0.16), transparent 34%),
        linear-gradient(135deg, #071f2e 0%, #0b3448 100%);
}

.public-design-map[data-public-theme="dark"] .map-consult,
.public-design-map[data-public-theme="dark"] .map-blog,
.public-design-map[data-public-theme="dark"] .map-comments {
    background: #071f2e;
}

.public-design-map[data-public-theme="dark"] :is(.map-arrival-card, .map-model-list article, .map-rate-grid article, .public-blog-card, .public-reference-card) {
    border-color: rgba(142, 238, 255, 0.26);
    background:
        radial-gradient(circle at 100% 0%, rgba(142, 238, 255, 0.12), transparent 32%),
        #0d3042;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.public-design-map[data-public-theme="dark"] :is(.map-arrival-card h1, .map-arrival-card dd, .map-vehicles h2, .map-section-head h2, .public-section-head h2, .public-contact-head h2, .public-blog-card strong, .public-reference-card strong) {
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] :is(.map-arrival-card p, .public-blog-card p, .public-reference-card p, .public-contact-form label) {
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] :is(.map-arrival-card dl div, .map-chip-grid span, .map-calculator, .map-result) {
    border-color: rgba(142, 238, 255, 0.24);
    background: #082839;
    color: #8eeeff;
}

.public-design-map[data-public-theme="dark"] :is(.map-hero-canvas, .map-first .public-design-map-fallback) {
    border-color: rgba(142, 238, 255, 0.3);
    background: #082839;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.public-design-map[data-public-theme="dark"] :is(.map-primary, .public-period-selector button.is-active, .public-period-selector button[aria-pressed="true"], .public-price-grid button, .public-contact-submit) {
    border-color: #8eeeff;
    background: #8eeeff;
    color: #000000;
}

.public-design-map[data-public-theme="dark"] :is(.map-secondary, .public-banner-secondary) {
    border-color: rgba(142, 238, 255, 0.28);
    background: rgba(142, 238, 255, 0.08);
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] :is(.public-period-selector button, .public-calculation-mode label:has(input:checked)) {
    border-color: rgba(82, 196, 216, 0.58);
    background: #0b5268;
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] .map-contact {
    background:
        radial-gradient(circle at 92% 12%, rgba(142, 238, 255, 0.16), transparent 32%),
        linear-gradient(135deg, #0a2f43 0%, #061a26 100%);
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] .map-banner {
    background:
        radial-gradient(circle at 98% 50%, rgba(142, 238, 255, 0.18), transparent 28%),
        linear-gradient(135deg, #0b5268 0%, #061a26 100%);
    color: #ffffff;
}

.public-design-map[data-public-theme="dark"] .map-banner .public-banner-primary {
    background: #8eeeff;
    color: #000000;
}

.public-design-map[data-public-theme="dark"] .map-footer {
    background: #03111a;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] {
    --public-accent: #5F7A4A;
    --public-accent-strong: #526A40;
    --public-surface: #212B1A;
    --public-soft: #382518;
    --public-ink: #ffffff;
    --public-muted: #ffffff;
    --public-line: rgba(160, 106, 69, 0.35);
    background: #13180F;
    color: #ffffff;
    color-scheme: dark;
}

.public-template-clasica.public-design-visual[data-public-theme="dark"],
.public-template-clasica.public-blog-list-page[data-public-theme="dark"],
.public-template-clasica.public-blog-detail-page[data-public-theme="dark"] {
    background: #13180F;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-sticky-nav {
    border-bottom-color: #A06A45;
    background: linear-gradient(90deg, #212B1A 0%, #212B1A 58%, #382518 100%);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-sticky-theme {
    border-color: #A06A45;
    background: rgba(160, 106, 69, 0.2);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-sticky-cta {
    border-color: #ffffff;
    background: #A06A45;
    color: #ffffff !important;
}

/* Las iniciales de la marca sin logo van sobre caja clara: el blanco forzado
   del tema oscuro las dejaba invisibles. */
.public-template-clasica[data-public-theme="dark"] .public-sticky-nav .public-design-brand > span {
    color: #0b2d34 !important;
}

.public-template-clasica[data-public-theme="dark"] .public-footer-logo-fallback {
    color: #004f56 !important;
}

.public-template-clasica[data-public-theme="dark"] .visual-media img {
    filter: brightness(0.38) saturate(0.8);
}

.public-template-clasica[data-public-theme="dark"] .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(95, 122, 74, 0.35), rgba(95, 122, 74, 0.2) 58%, rgba(160, 106, 69, 0.2)),
        linear-gradient(180deg, rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.35));
}

.public-template-clasica[data-public-theme="dark"] :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog, .visual-comments) {
    background: #13180F;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-blog {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #13180F;
}

.public-template-clasica[data-public-theme="dark"] .visual-comments {
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #20150E;
}

.public-template-clasica[data-public-theme="dark"] .visual-calculation {
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #20150E;
}

.public-template-clasica[data-public-theme="dark"] .visual-location {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #13180F;
}

.public-template-clasica[data-public-theme="dark"] :is(
    .visual-intro h2,
    .visual-vehicles h2,
    .visual-models h2,
    .visual-rates h2,
    .visual-location h2,
    .public-section-head h2,
    .visual-location > div > p,
    .public-models-block > p
) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(.visual-feature-grid article, .visual-feature-grid a, .visual-rate-grid article, .visual-model-grid article, .public-vehicle-category-grid article, .public-category-note, .public-blog-grid article, .public-blog-card, .public-blog-entry, .public-reference-card) {
    border-color: #5F7A4A;
    background: #212B1A;
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

.public-template-clasica[data-public-theme="dark"] .public-blog-card:nth-child(odd),
.public-template-clasica[data-public-theme="dark"] .public-blog-grid article:nth-child(odd) {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #212B1A;
}

.public-template-clasica[data-public-theme="dark"] .public-blog-card:nth-child(even),
.public-template-clasica[data-public-theme="dark"] .public-blog-grid article:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
}

.public-template-clasica[data-public-theme="dark"] .public-blog-grid :is(span, strong, p, small),
.public-template-clasica[data-public-theme="dark"] :is(.public-blog-card-more, .public-blog-read-more) {
    color: #ffffff;
    opacity: 1;
}

.public-template-clasica[data-public-theme="dark"] .public-blog-carousel-button {
    border-color: #ffffff;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-comments .public-reference-card:nth-child(odd) {
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #212B1A;
}

.public-template-clasica[data-public-theme="dark"] .visual-comments .public-reference-card:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
}

.public-template-clasica[data-public-theme="dark"] .visual-comments .public-reference-card :is(p, strong, .public-reference-location) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-comments .public-reference-control {
    border-color: #ffffff;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-feature-grid .public-availability-card-spaces {
    border-color: #ffffff;
    background: #5F7A4A;
}

.public-template-clasica[data-public-theme="dark"] .visual-feature-grid .public-availability-card-address {
    border-color: #ffffff;
    background: #A06A45;
}

.public-template-clasica[data-public-theme="dark"] .visual-feature-grid .public-availability-card-contact {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
}

.public-template-clasica[data-public-theme="dark"] :is(
    .public-availability-card h3,
    .public-availability-card p,
    .public-availability-card-spaces span,
    .public-availability-card-spaces strong,
    .public-category-card-head strong,
    .public-category-price,
    .public-category-price b,
    .public-vehicle-category-grid p,
    .public-category-note
) {
    color: #ffffff !important;
}

.public-template-clasica[data-public-theme="dark"] .public-period-selector button,
.public-template-clasica[data-public-theme="dark"] .public-price-grid button,
.public-template-clasica[data-public-theme="dark"] .public-calculation-mode label:has(input:checked) {
    border-color: #ffffff;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #ffffff;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #212B1A;
}

.public-template-clasica[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
}

.public-template-clasica[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n) {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #20150E;
}

.public-template-clasica[data-public-theme="dark"] :is(.visual-chip-wall span, .visual-calculator, .visual-result, .public-calculation-result-panel, .public-category-note) {
    border-color: #5F7A4A;
    background: #212B1A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(.public-calculation-mode, .public-discount-card, .public-cyclic-field, .public-cyclic-day) {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(
    .public-calculation-mode label,
    .public-cyclic-field legend,
    .public-cyclic-field p,
    .public-cyclic-row-title,
    .public-cyclic-day,
    .public-selected-vehicle-models,
    .public-calculation-facts span,
    .public-calculation-facts strong
) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(.public-calculation-facts article, .public-vehicle-model-popover, .public-vehicle-model-popover article) {
    border-color: #5F7A4A;
    background: #212B1A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-vehicle-model-popover :is(strong, span),
.public-template-clasica[data-public-theme="dark"] .public-vehicle-model-empty,
.public-template-clasica[data-public-theme="dark"] .public-time24-badge {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-time24-badge {
    border-color: #5F7A4A;
    background: rgba(95, 122, 74, 0.2);
}

.public-template-clasica[data-public-theme="dark"] .public-price-grid :is(input, select, .public-time24),
.public-template-clasica[data-public-theme="dark"] .public-cyclic-grid .public-time24,
.public-template-clasica[data-public-theme="dark"] .public-contact-form :is(input, textarea, .country-picker-button),
.public-template-clasica[data-public-theme="dark"] .public-time24-picker-popover,
.public-template-clasica[data-public-theme="dark"] .public-time24-picker-popover select,
.public-template-clasica[data-public-theme="dark"] .public-contact-form .country-picker-menu {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .public-price-grid :is(input, select)::placeholder,
.public-template-clasica[data-public-theme="dark"] .public-contact-form :is(input, textarea)::placeholder,
.public-template-clasica[data-public-theme="dark"] .public-time24-picker [data-public-time24-display].is-placeholder {
    color: #ffffff;
    opacity: 1;
}

.public-template-clasica[data-public-theme="dark"] .public-contact-form .country-picker-option,
.public-template-clasica[data-public-theme="dark"] .public-time24 select option {
    background: #20150E;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(.public-discount-info, .public-calculation-availability-warning, .public-availability-warning, .required-mark) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-map-pin {
    background: #e53935;
    box-shadow: 0 12px 24px rgba(148, 25, 25, 0.22);
}

.public-template-clasica[data-public-theme="dark"] .visual-map-pin::after {
    background: #b91c1c;
}

.public-template-clasica[data-public-theme="dark"] :is(.visual-map, .visual-location .public-design-map-fallback) {
    border-color: #A06A45;
}

.public-template-clasica[data-public-theme="dark"] :is(.visual-primary, .visual-nav-cta) {
    border-color: #ffffff;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-secondary {
    border-color: #ffffff;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-banner {
    background:
        radial-gradient(circle at 100% 50%, rgba(95, 122, 74, 0.35), transparent 28%),
        #A06A45;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-banner :is(h2, p) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-banner .public-banner-primary {
    border: 1px solid #ffffff;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-banner .public-banner-secondary {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact {
    background:
        radial-gradient(circle at 92% 8%, rgba(160, 106, 69, 0.35), transparent 32%),
        #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact {
    background:
        radial-gradient(circle at 92% 8%, rgba(160, 106, 69, 0.2), transparent 32%),
        var(--tierra-dark-clay);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact :is(.public-contact-head h2, .public-contact-head span, label, .field-label-line) {
    color: #ffffff;
}

/* El formulario comparte estas superficies dentro y fuera del editor. La
   clase visual-contact aporta la especificidad necesaria para que el tema
   oscuro del app-shell no cambie la previsualización. */
.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form :is(input, textarea, .country-picker-button, .country-picker-menu) {
    border-color: var(--tierra-clay);
    background: var(--tierra-dark-clay-raised);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form .country-picker-option {
    background: var(--tierra-dark-clay-raised);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form .country-picker-option:hover,
.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form .country-picker-option.is-selected {
    border-color: var(--tierra-clay);
    background: rgba(160, 106, 69, 0.2);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form :is(input, textarea, .country-picker-button):focus,
.public-template-clasica[data-public-theme="dark"] .visual-contact.public-parking-contact .public-contact-form :is(input, textarea, .country-picker-button):focus-visible {
    border-color: #ffffff;
    outline: 3px solid rgba(160, 106, 69, 0.35);
    outline-offset: 2px;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact .public-contact-submit {
    border: 1px solid #ffffff;
    background: #A06A45;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-contact .public-contact-notice {
    background: rgba(160, 106, 69, 0.35);
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-footer {
    border-top: 1px solid #A06A45;
    background:
        radial-gradient(circle at 92% 12%, rgba(95, 122, 74, 0.2), transparent 34%),
        #20150E;
    color: #ffffff;
}

/* En oscuro la banda es arcilla translúcida sobre el fondo casi negro del
   footer, cerrada con el mismo filete #A06A45 del borde superior. */
.public-template-clasica[data-public-theme="dark"] .visual-footer .public-footer-cta.public-design-banner {
    border-bottom: 1px solid #A06A45;
    background: linear-gradient(rgba(160, 106, 69, 0.26), rgba(160, 106, 69, 0.26));
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-footer .public-footer-cta .public-banner-primary {
    border: 1px solid #ffffff;
    background: #5F7A4A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-footer :is(.public-footer-logo-row strong, .public-footer-brand p, .public-footer-column, .public-footer-column > strong, .public-footer-column a, .public-footer-email span, .public-footer-bottom) {
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] .visual-footer .public-footer-socials a {
    border-color: #ffffff;
    color: #ffffff;
}

.public-template-clasica.public-blog-list-page[data-public-theme="dark"] .public-blog-list-hero :is(h1, p, span),
.public-template-clasica.public-blog-list-page[data-public-theme="dark"] .public-blog-list-card :is(h2, p, small, a),
.public-template-clasica.public-blog-detail-page[data-public-theme="dark"] :is(.public-blog-detail-head, .public-blog-entry-text, .public-blog-entry-text p, .public-blog-detail-back) {
    color: #ffffff;
}

.public-template-clasica.public-blog-list-page[data-public-theme="dark"] .public-blog-list-card:nth-child(odd) {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #212B1A;
}

.public-template-clasica.public-blog-list-page[data-public-theme="dark"] .public-blog-list-card:nth-child(even) {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
}

.public-template-clasica.public-blog-detail-page[data-public-theme="dark"] .public-blog-detail-back {
    border-color: #A06A45;
    background: rgba(160, 106, 69, 0.2);
}

.public-template-compacta.public-design-visual[data-public-theme="dark"] {
    background: #1c0d13;
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .visual-media::after {
    background:
        linear-gradient(var(--public-hero-overlay-angle, 90deg), rgba(28, 13, 19, 0.94), rgba(88, 27, 45, 0.72) 58%, rgba(169, 72, 93, 0.28)),
        linear-gradient(180deg, rgba(245, 159, 169, 0.12), rgba(240, 181, 108, 0.08));
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location, .visual-gallery, .visual-blog, .visual-comments) {
    background: #1c0d13;
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .visual-availability {
    background:
        radial-gradient(circle at 96% 0%, rgba(245, 159, 169, 0.16), transparent 30%),
        linear-gradient(135deg, #1c0d13 0%, #30111c 100%);
}

.public-template-compacta[data-public-theme="dark"] .visual-calculation {
    background:
        radial-gradient(circle at 8% 8%, rgba(240, 181, 108, 0.14), transparent 34%),
        linear-gradient(135deg, #241016 0%, #3a1722 100%);
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .public-section-head h2) {
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-feature-grid article, .visual-feature-grid a, .visual-rate-grid article, .visual-model-grid article, .public-vehicle-category-grid article, .public-category-note, .public-blog-grid article, .public-blog-card, .public-blog-entry, .public-reference-card) {
    border-color: rgba(245, 159, 169, 0.24);
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 159, 169, 0.12), transparent 32%),
        #2a121a;
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

.public-template-compacta[data-public-theme="dark"] :is(.public-availability-card h3, .public-availability-card p, .public-availability-card-spaces span, .public-availability-card-spaces strong, .public-category-card-head strong) {
    color: #ffffff !important;
}

.public-template-compacta[data-public-theme="dark"] .public-category-price {
    color: #ff9faf;
}

.public-template-compacta[data-public-theme="dark"] .visual-feature-grid .public-availability-card-spaces {
    border-color: #b44863;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 214, 205, 0.16), transparent 28%),
        linear-gradient(135deg, #3a1722 0%, #83304a 58%, #d95d7a 100%);
}

.public-template-compacta[data-public-theme="dark"] .visual-feature-grid .public-availability-card-address {
    border-color: #a86a34;
    background:
        radial-gradient(circle at 88% 18%, rgba(240, 181, 108, 0.16), transparent 28%),
        linear-gradient(135deg, #341c12 0%, #7b4520 58%, #c7833b 100%);
}

.public-template-compacta[data-public-theme="dark"] .visual-feature-grid .public-availability-card-contact {
    border-color: #834b90;
    background:
        radial-gradient(circle at 88% 18%, rgba(213, 154, 219, 0.16), transparent 28%),
        linear-gradient(135deg, #27122f 0%, #5c2b68 58%, #9e5ca5 100%);
}

.public-template-compacta[data-public-theme="dark"] .public-period-selector button {
    border-color: #a9485d;
    background: #7c2a41;
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #f0b56c;
    background: #f0b56c;
    color: #000000;
}

.public-template-compacta[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 1) {
    border-color: #b44863;
    background:
        radial-gradient(circle at 96% 8%, rgba(245, 159, 169, 0.16), transparent 32%),
        linear-gradient(145deg, #2a121a 0%, #421726 54%, #662239 100%);
}

.public-template-compacta[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n + 2) {
    border-color: #a86a34;
    background:
        radial-gradient(circle at 96% 8%, rgba(240, 181, 108, 0.14), transparent 32%),
        linear-gradient(145deg, #2b1810 0%, #442714 54%, #68401f 100%);
}

.public-template-compacta[data-public-theme="dark"] .public-vehicle-category-grid article:nth-child(3n) {
    border-color: #834b90;
    background:
        radial-gradient(circle at 96% 8%, rgba(213, 154, 219, 0.14), transparent 32%),
        linear-gradient(145deg, #24122b 0%, #3d1f49 54%, #5e3270 100%);
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-chip-wall span, .visual-calculator, .visual-result, .public-calculation-result-panel) {
    border-color: rgba(245, 159, 169, 0.24);
    background: #2a121a;
    color: #ff9faf;
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-primary, .visual-nav-cta, .public-banner-primary, .public-contact-submit) {
    border-color: rgba(245, 159, 169, 0.52);
    background: linear-gradient(135deg, #ffb3bd 0%, #d95d7a 52%, #8e243d 100%);
    color: #000000;
}

.public-template-compacta[data-public-theme="dark"] .visual-secondary {
    border-color: rgba(240, 181, 108, 0.5);
    background: rgba(240, 181, 108, 0.13);
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .visual-location {
    background:
        radial-gradient(circle at 8% 14%, rgba(245, 159, 169, 0.16), transparent 30%),
        linear-gradient(135deg, #241016 0%, #1c0d13 100%);
}

.public-template-compacta[data-public-theme="dark"] :is(.visual-map, .visual-location .public-design-map-fallback) {
    border-color: rgba(245, 159, 169, 0.24);
    background: #2a121a;
}

.public-template-compacta[data-public-theme="dark"] .visual-banner,
.public-template-compacta[data-public-theme="dark"] .visual-contact {
    background:
        radial-gradient(circle at 92% 8%, rgba(245, 159, 169, 0.16), transparent 32%),
        linear-gradient(135deg, #5b1e32 0%, #1c0d13 100%);
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .visual-footer {
    background: #16080d;
    color: #ffffff;
}

.public-template-compacta[data-public-theme="dark"] .visual-comments .public-reference-card::before {
    background: #d95d7a;
}

.public-template-compacta[data-public-theme="dark"] .visual-comments .public-reference-control {
    border-color: rgba(245, 159, 169, 0.24);
    background: #2a121a;
    color: #ff9faf;
}

.public-design-urban[data-public-theme="dark"] :is(.urban-band, .urban-models, .urban-rates, .urban-location, .urban-gallery, .urban-blog, .urban-comments, .urban-contact) {
    background:
        radial-gradient(circle at 88% 8%, rgba(232, 111, 50, 0.18), transparent 32%),
        #1b0f0b;
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] .urban-band {
    background:
        radial-gradient(circle at 92% 14%, rgba(242, 195, 95, 0.16), transparent 30%),
        linear-gradient(135deg, #5c2112 0%, #1b0f0b 100%);
}

.public-design-urban[data-public-theme="dark"] .urban-models {
    background:
        radial-gradient(circle at 12% 0%, rgba(232, 111, 50, 0.24), transparent 34%),
        linear-gradient(160deg, #1b0f0b 0%, #5c2112 100%);
}

.public-design-urban[data-public-theme="dark"] .urban-location {
    background:
        radial-gradient(circle at 12% 16%, rgba(242, 195, 95, 0.16), transparent 28%),
        linear-gradient(135deg, #2a120c 0%, #6a2513 100%);
}

.public-design-urban[data-public-theme="dark"] :is(.urban-model-grid article, .urban-rate-grid article, .public-reference-card, .public-blog-card, .public-category-note, .public-discount-card, .public-config-needed, .public-calculation-mode, .public-cyclic-field, .public-calculation-result-panel, .public-calculation-facts article) {
    border-color: rgba(242, 195, 95, 0.26);
    background: #2a120c;
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] :is(.urban-model-grid article strong, .urban-rate-grid article strong, .public-blog-grid strong, .public-reference-card strong, .public-category-card-head strong) {
    color: #ffffff !important;
}

.public-design-urban[data-public-theme="dark"] :is(.public-blog-grid p, .public-blog-grid small, .public-reference-card p, .public-reference-location, .public-vehicle-category-grid p, .public-category-note) {
    color: #ffffff !important;
}

.public-design-urban[data-public-theme="dark"] .public-category-price {
    color: #f7cf72;
}

.public-design-urban[data-public-theme="dark"] :is(.public-period-selector button, .public-calculation-mode label, .public-cyclic-day, .urban-chip-rail span) {
    border-color: rgba(242, 195, 95, 0.3);
    background: #3a1a10;
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] :is(.public-period-selector button.is-active, .public-period-selector button[aria-pressed="true"], .public-calculation-mode label:has(input:checked)) {
    border-color: #f2c35f;
    background: #f2c35f;
    color: #000000;
}

.public-design-urban[data-public-theme="dark"] :is(.visual-primary, .urban-primary, .urban-nav-cta, .public-banner-primary, .public-contact-submit, .public-price-grid button) {
    background: #e86f32;
    color: #000000;
}

.public-design-urban[data-public-theme="dark"] :is(.urban-secondary, .public-banner-secondary) {
    border-color: rgba(255, 240, 223, 0.28);
    background: rgba(255, 240, 223, 0.08);
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] .urban-banner {
    background:
        radial-gradient(circle at 100% 50%, rgba(242, 195, 95, 0.2), transparent 28%),
        linear-gradient(135deg, #5c2112 0%, #1b0f0b 100%);
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] :is(.urban-map, .public-design-map-fallback) {
    border-color: rgba(242, 195, 95, 0.3);
    background: #2a120c;
}

.public-design-urban[data-public-theme="dark"] :is(.public-price-grid input, .public-price-grid select, .public-price-grid .public-time24, .public-cyclic-grid .public-time24, .public-contact-form input, .public-contact-form textarea, .public-contact-form .country-picker-button, .public-contact-form .country-picker-menu) {
    border-color: rgba(242, 195, 95, 0.28);
    background: #1b0f0b;
    color: #ffffff;
}

.public-design-urban[data-public-theme="dark"] .public-time24-badge {
    border-color: rgba(242, 195, 95, 0.44);
    background: rgba(242, 195, 95, 0.14);
    color: #f7cf72;
}

.public-design-urban[data-public-theme="dark"] .public-calculation-facts article.public-discount-fact {
    border-color: #e86f32;
    background: linear-gradient(135deg, rgba(232, 111, 50, 0.28), rgba(42, 18, 12, 0.94));
    box-shadow: inset 4px 0 0 #e86f32;
}

.public-design-urban[data-public-theme="dark"] .public-calculation-facts article.public-discount-total-fact {
    border-color: #f2c35f;
    background: linear-gradient(135deg, rgba(242, 195, 95, 0.22), rgba(42, 18, 12, 0.94));
    box-shadow: inset 4px 0 0 #f2c35f;
}

.public-design-urban[data-public-theme="dark"] .public-price-detail :is(th, td).public-discount-column {
    background: rgba(232, 111, 50, 0.24);
    color: #f7cf72;
}

.public-design-urban[data-public-theme="dark"] .public-price-detail tr.is-total .public-discount-column {
    background: rgba(242, 195, 95, 0.18);
    color: #f2c35f;
}

.public-design-urban[data-public-theme="dark"] .urban-footer {
    background: #160b08;
    color: #ffffff;
}

@media (max-width: 1120px) {
    .visual-hero-grid,
    .visual-location,
    .urban-hero-grid,
    .urban-band,
    .public-design-gallery,
    .public-design-blog,
    .public-design-banner,
    .urban-location,
    .map-hero-grid,
    .direct-grid,
    .direct-proof,
    .direct-lists,
    .direct-location {
        grid-template-columns: 1fr;
    }

    .urban-status {
        min-height: 300px;
    }

    .direct-card {
        position: static;
    }

    .public-design .public-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-design-urban .public-price-grid.public-price-grid-single-time {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .public-sticky-nav {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .public-sticky-links,
    .public-sticky-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .public-sticky-links > a,
    .public-sticky-theme,
    .public-sticky-cta {
        flex: 1 1 130px;
    }

    .visual-nav,
    .urban-nav,
    .map-topbar,
    .direct-nav,
    .public-design :is(.visual-footer, .urban-footer, .map-footer, .direct-footer) {
        align-items: flex-start;
        flex-direction: column;
    }

    .visual-nav > div,
    .urban-nav > div,
    .map-links {
        width: 100%;
    }

    .visual-copy h1,
    .map-arrival-card h1,
    .direct-copy h1 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .urban-copy h1 {
        font-size: clamp(32px, 10vw, 48px);
    }

    .visual-copy p,
    .urban-copy p,
    .map-arrival-card p,
    .direct-copy p {
        font-size: 17px;
    }

    .public-design :is(.visual-stats, .urban-metrics, .map-stats, .direct-stats),
    .public-calculation-facts,
    .visual-feature-grid,
    .public-design .public-price-grid,
    .direct-calculator .public-date-time {
        grid-template-columns: 1fr;
    }

    .public-design-urban .public-price-grid.public-price-grid-single-time {
        grid-template-columns: 1fr;
    }

    .public-calculation-mode {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-calculation-mode label {
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
        white-space: normal;
        text-align: center;
    }

    .public-cyclic-field {
        padding: 14px;
    }

    .public-cyclic-grid {
        grid-template-columns: minmax(66px, 0.45fr) repeat(7, minmax(116px, 1fr));
    }

    .public-design :is(.visual-intro, .visual-vehicles, .visual-models, .visual-rates, .visual-location),
    .public-design-urban :is(.urban-band, .urban-models, .urban-rates, .urban-location),
    .public-design-map :is(.map-vehicles, .map-rates, .map-consult),
    .direct-proof,
    .public-contact-block,
    .public-design-gallery,
    .public-design-blog,
    .public-design-banner,
    .direct-lists,
    .direct-rates,
    .direct-location {
        padding-right: 16px;
        padding-left: 16px;
    }

    .public-design :is(.visual-map, .urban-map, .map-hero-canvas, .direct-map, .public-design-map-fallback) {
        min-height: 340px;
    }

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

    .public-contact-head h2 {
        font-size: 38px;
        line-height: 1.08;
    }

    .public-contact-submit {
        width: 100%;
    }

    .public-design-actions,
    .public-design-actions a,
    .public-design-banner .public-design-actions,
    .public-design-banner .public-design-actions a,
    .public-design :is(.visual-primary, .visual-secondary, .visual-nav-cta, .urban-primary, .urban-secondary, .urban-nav-cta, .map-primary, .map-secondary, .direct-primary, .direct-nav-cta) {
        width: 100%;
    }

    .public-banner-actions {
        justify-content: stretch;
    }

    .public-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .public-footer-bottom {
        justify-items: start;
        text-align: left;
    }
}

html:not([data-theme="dark"]) .app-shell :is(label, legend, .field-label-line, .entry-form label, .gastos-provider-form label, .parking-client-flags, .parking-client-picker-field, .parking-client-search-field, .rental-guarantee-picker-field, .cycle-days-field legend, .cycle-row-title, .variable-row-grid > span, th) {
    color: #000000;
}

html[data-theme="dark"] {
    --bg: #11181b;
    --surface: #202a2f;
    --surface-soft: #263238;
    --surface-strong: #304047;
    --ink: #f4f8f9;
    --muted: #f4f8f9;
    --muted-soft: #9fb1b8;
    --line: #425760;
    --line-strong: #5e737c;
    --border: #425760;
    --text: #f4f8f9;
    --sidebar: #17111F;
    --sidebar-soft: #374047;
    --sidebar-line: rgba(255, 255, 255, 0.12);
    --brand-primary: #6D28D9;
    --brand-primary-soft: rgba(109, 40, 217, 0.3);
    --accent-purple: #6D28D9;
    --accent-violet: #6D28D9;
    --accent-amber-text: var(--accent-amber);
    --positive: #28b99f;
    --danger: #f0646a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 34px rgba(0, 0, 0, 0.24);
    --shadow-lift: 0 20px 44px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .content {
    background: var(--bg);
    color: var(--ink);
}

html[data-theme="dark"] .app-shell :is(.summary-band, .module-hero, .panel, .kpi-card, .module-card, .year-form, .month-form, .module-tabs, .service-billing-panel, .parking-config-list, .parking-config-item, .employee-row, .record-modal-panel, .variable-dialog-panel, .rental-unit-entry-section, .variables-subsection, .gastos-list-row, .gastos-provider-row, .gastos-provider-picker-option, .gastos-list-panel) {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .app-shell :is(.topbar h1, .topbar-greeting strong, .panel h2, .module-hero h2, .summary-copy h2, .record-modal-header h2, .kpi-card strong, .kpi-card b, .collapsible-heading, .variable-form-section h3, .variable-grid-heading h3, .rate-form-section h3, .parking-title-separator, .gastos-provider-modal-copy strong, td, .entry-form strong) {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell :is(.topbar-greeting, .year-form label, .month-form label, .kpi-card span, .summary-filter-form label, .entry-form label, .gastos-provider-form label, .parking-client-flags, .parking-client-picker-field, .parking-client-search-field, .rental-guarantee-picker-field, .cycle-days-field legend, .cycle-row-title, .variable-row-grid > span, .field-label-line, legend, th, small, .muted, .gastos-provider-modal-copy span) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.vehicle-category-table-head > span, .vehicle-category-cell-label, .variable-row-grid > span, .variable-column-heading > span, th) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .vehicle-period-rate.is-invalid small {
    color: var(--danger);
}

/* La preview de la página pública trae sus propios campos, con el color del
   modelo y del modo (claro u oscuro) que eligió el dueño. El tema oscuro del
   panel no tiene que pisarlos: `:not(:where(...))` los excluye sin mover la
   especificidad, así que los recuadros se ven como en la página publicada. */
html[data-theme="dark"] .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search-input, .money-prefix-field, .entry-form .cycle-days-field, .country-picker-button, .location-country-button, .parking-client-picker-button, .company-selector-button, .parking-cashbox-open, .payment-file-upload-field > [data-file-label], .rental-broker-open, .rental-guarantee-picker-button, .rental-unit-table-field, .gastos-provider-picker-open, .gastos-provider-form input, .gastos-provider-form select):not(:where(.public-page-owner-preview *)) {
    border-color: var(--line-strong);
    background: #121a1e;
    color: var(--ink);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search-input, .country-picker-button, .location-country-button, .parking-client-picker-button, .company-selector-button, .parking-cashbox-open, .rental-broker-open, .rental-guarantee-picker-button, .gastos-provider-picker-open):focus,
html[data-theme="dark"] .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search-input, .country-picker-button, .location-country-button, .parking-client-picker-button, .company-selector-button, .parking-cashbox-open, .rental-broker-open, .rental-guarantee-picker-button, .gastos-provider-picker-open):focus-visible,
html[data-theme="dark"] .app-shell .money-prefix-field:focus-within {
    border-color: var(--brand-primary);
    outline: 3px solid rgba(109, 40, 217, 0.32);
}

html[data-theme="dark"] .app-shell .location-social-field .social-input-control > input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(240, 100, 106, 0.18);
}

html[data-theme="dark"] .app-shell .social-validation-toast {
    border-color: rgba(240, 100, 106, 0.42);
    border-left-color: var(--danger);
    background: #1f2a2f;
    color: #ffffff;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .app-shell .social-validation-toast-copy strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .social-validation-toast-copy > span {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .social-validation-toast-close {
    background: transparent;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variables-shell :is(input:not([type="hidden"]), select, textarea, button)[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(240, 100, 106, 0.2);
}

html[data-theme="dark"] .app-shell :is(input, textarea, .search-input):not(:where(.public-page-owner-preview *))::placeholder {
    color: #9aaeb6;
    opacity: 1;
}

/* Con la página en modo claro, lo que el navegador dibuja solo (el cursor, la
   barra del textarea, el ícono del calendario) tiene que salir claro y no con
   el esquema oscuro del panel. Va en :where() para no pisar el color-scheme
   que declara cada modelo. */
:where(html[data-theme="dark"] .app-shell .public-page-owner-preview .public-site:not([data-public-theme="dark"])) {
    color-scheme: normal;
}

html[data-theme="dark"] .app-shell :is(select.is-placeholder, .entry-form select.is-placeholder, .entry-form select.is-placeholder option) {
    color: var(--muted-soft);
}

html[data-theme="dark"] .app-shell option {
    background: #121a1e;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .variable-row-grid-spaces:not(.is-rental-units) input[name="espacio_nombre"],
html[data-theme="dark"] .app-shell .variable-row-grid-spaces:not(.is-rental-units) [data-space-entry-field],
html[data-theme="dark"] .app-shell .variable-row-grid-spaces:not(.is-rental-units) [data-space-zone-field],
html[data-theme="dark"] .app-shell .variable-row-grid-spaces:not(.is-rental-units) [data-space-floor-field],
html[data-theme="dark"] .app-shell .variable-row-grid-spaces:not(.is-rental-units) [data-space-key-required-field] {
    border-color: #48606a;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .space-vehicle-column {
    border-color: #324a53;
    background: #17262c;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .space-vehicle-column.is-selected {
    border-color: #0c7d89;
    background: #0c6f79;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .space-vehicle-column:hover {
    border-color: #1395a3;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-mode-option {
    border-color: #48606a;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-mode-option:has(input:checked) {
    border-color: #0c7d89;
    background: #102f35;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-mode-option strong,
html[data-theme="dark"] .app-shell .variable-increment-panel .increment-example-row strong,
html[data-theme="dark"] .app-shell .variable-increment-panel .increment-ipc-summary strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-increment-panel :is(.increment-mode-option small, .increment-example-row span, .increment-example-empty, .increment-source) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-example {
    border-color: #48606a;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-example-row {
    border-color: #324a53;
    background: #17262c;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-example-row span:last-child {
    color: #79e0d1;
}

html[data-theme="dark"] .app-shell .variable-increment-panel .increment-ipc-list span {
    border-color: #0c6f79;
    background: #102f35;
    color: #79e0d1;
}

html[data-theme="dark"] .app-shell :is(input:disabled, select:disabled, textarea:disabled, button:disabled, .entry-form input.is-client-locked, .entry-form .country-picker.is-client-locked .country-picker-button) {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
    opacity: 1;
    cursor: default;
}

html[data-theme="dark"] .app-shell :is(.money-prefix-field > span, .percentage-symbol) {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .rental-guarantee-picker-button::after,
html[data-theme="dark"] .app-shell .rental-broker-open::after {
    border-color: var(--line-strong);
}

html[data-theme="dark"] .app-shell .module-tabs {
    background: #202a2f;
}

html[data-theme="dark"] .app-shell .module-tabs a {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .module-tabs a:hover {
    background: #29383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .module-tabs a.is-active {
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .collapsible-summary {
    border-color: #48606a;
    background: #27353b;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .collapsible-panel[open] > .collapsible-summary {
    border-color: rgba(109, 40, 217, 0.72);
    background: #183134;
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

html[data-theme="dark"] .app-shell .collapsible-panel:not([open]) > .collapsible-summary {
    background: #27353b;
}

html[data-theme="dark"] .app-shell .collapsible-panel[open] > .collapsible-summary .collapsible-heading {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-entry-panel {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-summary {
    border-color: var(--line);
    background: linear-gradient(180deg, #18363a 0%, #142b2f 100%);
    color: var(--ink);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar {
    border-color: #2e6970;
    background: #172126;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar:not([open]) > .employee-rotation-calendar-summary {
    border-color: #2e6970;
    background: linear-gradient(180deg, #18363a 0%, #142b2f 100%);
    color: #ffffff;
    box-shadow: inset 4px 0 0 #19a6b3;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar:not([open]) > .employee-rotation-calendar-summary :is(.collapsible-heading, .collapsible-indicator) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar:not([open]) > .employee-rotation-calendar-summary .collapsible-indicator {
    border-color: #526b75;
    background: #172126;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar[open] > .employee-rotation-calendar-summary {
    border-color: #2e6970;
    background: linear-gradient(180deg, #17373b 0%, #132d31 100%);
    color: #ffffff;
    box-shadow: inset 4px 0 0 #19a6b3;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar[open] > .employee-rotation-calendar-summary :is(.collapsible-heading, .collapsible-indicator) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-modal-section .employee-rotation-calendar[open] > .employee-rotation-calendar-summary .collapsible-indicator {
    border-color: #526b75;
    background: #172126;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-function-row {
    border-color: var(--line);
    background: #172126;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-function-row:hover {
    border-color: #526b75;
    background: #29383e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-info-button {
    border-color: #2aaeba;
    background: #121a1e;
    color: #C084FC;
}

html[data-theme="dark"] .app-shell [data-employee-modal] [data-employee-contract-current] {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-section-grid input[readonly][role="button"]:hover:not(:disabled),
html[data-theme="dark"] .app-shell [data-employee-modal] .employee-section-grid input[readonly][role="button"]:focus-visible {
    border-color: #C084FC;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-section-grid input[readonly][role="button"]:focus-visible {
    outline-color: rgba(105, 210, 218, 0.28);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-section-grid input[readonly][role="button"]:disabled {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-contract-actions .button {
    border: 1px solid #6f858e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-contract-actions .button-danger {
    border-color: #9f1f3b;
    background: #9f1f3b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-contract-actions .button-neutral {
    border-color: #6f858e;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-box {
    border-color: var(--line);
    background: #172126;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview {
    --employee-rotation-base-border: #4d6872;
    --employee-rotation-base-surface: #202f36;
    --employee-rotation-rotated-border: #397b66;
    --employee-rotation-rotated-surface: #17352d;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-intro {
    border-bottom-color: var(--line);
    background: linear-gradient(180deg, #233138 0%, #1c292e 100%);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"] {
    border-color: #607780;
    background: radial-gradient(circle at 8px 50%, #ffffff 0 6px, transparent 6.5px), #425760;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"]:checked {
    border-color: #31aeba;
    background: radial-gradient(circle at calc(100% - 8px) 50%, #ffffff 0 6px, transparent 6.5px), #7C3AED;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-intro .employee-toggle-line input[type="checkbox"][role="switch"]:focus-visible {
    border-color: #C084FC;
    outline-color: rgba(105, 210, 218, 0.3);
}

html[data-theme="dark"] .app-shell [data-employee-modal] :is(.employee-rotation-intro-copy small, .employee-rotation-calendar-summary small) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-status {
    border-color: #526871;
    background: #26343a;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-status.is-active {
    border-color: #397b66;
    background: #17352d;
    color: #79e0d1;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-settings {
    background: #151f23;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-step {
    border-color: var(--line);
    background: #1d292e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-step-heading strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-step-heading small {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-step-number {
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .entry-form .employee-rotation-presets button {
    border-color: #50666f;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .entry-form .employee-rotation-presets button:hover:not(:disabled) {
    border-color: #4fbcc5;
    background: #1b363b;
    color: #9ce5ea;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .entry-form .employee-rotation-presets button:focus-visible {
    border-color: #C084FC;
    outline-color: rgba(105, 210, 218, 0.28);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .entry-form .employee-rotation-presets button[aria-pressed="true"] {
    border-color: #2aaeba;
    background: #14383d;
    color: #9ce5ea;
    box-shadow: inset 0 0 0 1px rgba(105, 210, 218, 0.12);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .entry-form .employee-rotation-presets button:disabled {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-field-error {
    color: #ff8b91;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-options .employee-rotation-source-option {
    border-color: #48606a;
    background: #172126;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-option :is(strong, small) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-option:hover:not(:has(input:disabled)) {
    border-color: #4caab3;
    background: #203238;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-option:focus-within {
    border-color: #C084FC;
    outline-color: rgba(105, 210, 218, 0.28);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-option:is(.is-selected, :has(input:checked)) {
    border-color: #2aaeba;
    background: #17363b;
    box-shadow: inset 3px 0 0 #2aaeba;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-option:has(input:disabled) {
    border-color: #35464d;
    background: #1a2428;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-source-panel {
    border-color: #425760;
    background: #182429;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-guidance {
    border-color: #425760;
    background: #202a2f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-notice {
    border-color: #8d7130;
    background: #302817;
    color: #f3d98e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-reciprocity {
    border-color: #3f6f83;
    background: #16303a;
    color: #bfe0ec;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-shift-chip {
    border-color: #607985;
    background: #24343b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-shift-chip.is-rotated {
    border-color: #397b66;
    background: #17352d;
    color: #79e0d1;
}

html[data-theme="dark"] .app-shell [data-employee-modal] :is(.employee-rotation-preview, .employee-contract-preview) {
    border-color: var(--line);
    background: #172126;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase {
    border-color: var(--employee-rotation-base-border);
    border-left-color: #73909b;
    background: var(--employee-rotation-base-surface);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase.is-rotated {
    border-color: var(--employee-rotation-rotated-border);
    border-left-color: #3ea878;
    background: var(--employee-rotation-rotated-surface);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase :is(strong, small) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase > p {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase-duration {
    border-color: #51666e;
    background: rgba(18, 26, 30, 0.72);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase.is-incomplete {
    border-color: #8d7130;
    border-left-color: #d3a733;
    background: #302817;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-phase.is-incomplete > p {
    color: #f3d98e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] :is(.employee-rotation-phase.is-incomplete, .employee-rotation-preview-cell.is-incomplete) .employee-shift-chip {
    border-color: #9d7d31;
    background: #3b3018;
    color: #f3d98e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-day-detail {
    border-color: #425760;
    background: #172126;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-day-detail[open] > summary {
    border-bottom-color: #425760;
    background: #202d32;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-day-detail > summary :is(span, small) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-day-detail > summary::after {
    border-color: #C084FC;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-day-detail > summary:focus-visible {
    outline-color: rgba(105, 210, 218, 0.3);
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-contract-preview .empty-state {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell {
    border-color: var(--line);
    background: #1d292e;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell.is-base {
    background: #202f36;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell.is-rotated {
    border-color: #397b66;
    background: #17352d;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell.is-rotated small {
    color: #79e0d1;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell.is-incomplete {
    border-color: #8d7130;
    background: #302817;
}

html[data-theme="dark"] .app-shell [data-employee-modal] .employee-rotation-preview-cell.is-incomplete small {
    color: #f3d98e;
}

html[data-theme="dark"] .app-shell .collapsible-indicator,
html[data-theme="dark"] .app-shell .record-modal-close,
html[data-theme="dark"] .app-shell .sidebar-toggle {
    border-color: #526b75;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .record-modal-close {
    border-color: rgba(255, 255, 255, 0.28);
    background: var(--danger);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .app-shell .record-modal-close:hover,
html[data-theme="dark"] .app-shell .record-modal-close:focus-visible {
    background: #ff6b73;
    color: #ffffff;
    outline: none;
}

html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel,
html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel > .collapsible-summary,
html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel:not([open]) > .collapsible-summary {
    border-color: #725a32;
    background: #2b261c;
}

html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel[open] > .collapsible-summary {
    border-color: rgba(230, 169, 75, 0.58);
    background: #3b2f1c;
    box-shadow: inset 4px 0 0 #d99b36;
}

html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel[open] > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .collapsible-panel .collapsible-panel > .collapsible-summary .collapsible-indicator {
    color: #ffd18a;
}

html[data-theme="dark"] .app-shell :is(.table-wrap, table, .country-picker-menu, .location-country-menu, .rental-broker-menu, .rental-guarantee-picker-menu, .parking-client-results):not(:where(.public-page-owner-preview *)) {
    border-color: var(--line);
    background: #202a2f;
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .app-shell :is(th, .availability-table th, .availability-next-table th, .ipc-view-table th) {
    background: #2a383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(td, th) {
    border-bottom-color: #364a52;
}

html[data-theme="dark"] .app-shell tbody tr:hover {
    background: #29383e;
}

html[data-theme="dark"] .app-shell :is(.country-picker-option, .location-country-option, .rental-broker-option, .rental-guarantee-option, .parking-client-result):not(:where(.public-page-owner-preview *)) {
    border-color: transparent;
    background: #172126;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell :is(.country-picker-option:hover, .country-picker-option.is-selected, .location-country-option:hover, .location-country-option.is-selected, .rental-broker-option:hover, .rental-broker-option:focus-visible, .rental-guarantee-option:hover, .rental-guarantee-option:focus-visible, .parking-client-result:hover):not(:where(.public-page-owner-preview *)) {
    border-color: #526b75;
    background: #29383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.rental-broker-option.is-selected, .rental-broker-option[aria-pressed="true"], .rental-guarantee-option.is-selected, .rental-guarantee-option[aria-pressed="true"]) {
    border-color: var(--brand-primary);
    background: rgba(109, 40, 217, 0.35);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.rental-broker-option.is-selected, .rental-broker-option[aria-pressed="true"], .rental-guarantee-option.is-selected, .rental-guarantee-option[aria-pressed="true"])::after {
    background: var(--brand-primary);
}

html[data-theme="dark"] .app-shell .parking-client-type-toggle {
    border-color: var(--line);
    background: #172126;
}

html[data-theme="dark"] .app-shell .parking-client-type-toggle button,
html[data-theme="dark"] .app-shell .parking-client-check {
    border-color: var(--line-strong);
    background: #121a1e;
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .parking-client-type-toggle button.is-active,
html[data-theme="dark"] .app-shell .parking-client-type-toggle button:focus-visible,
html[data-theme="dark"] .app-shell .parking-client-check:has(input:checked) {
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.parking-client-list-item, .gastos-provider-picker-option) {
    border-color: var(--line);
    background: #121a1e;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .contact-record-picker-filters select {
    border-color: var(--line);
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(
    .parking-client-list-item:hover,
    .parking-client-list-item:focus-visible,
    .gastos-provider-picker-option:hover,
    .gastos-provider-picker-option:focus-visible
) {
    border-color: #526b75;
    background: #29383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-record-picker-option.is-selected,
html[data-theme="dark"] .app-shell .contact-record-picker-option[aria-pressed="true"] {
    border-color: #C084FC;
    background: #17363c;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #C084FC;
}

html[data-theme="dark"] .app-shell :is(.parking-record-picker-value, .contact-record-picker-value) small {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell :is(.parking-record-picker-value, .contact-record-picker-value) strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-record-picker-overdue.is-overdue strong {
    color: var(--danger);
}

html[data-theme="dark"] .app-shell .parking-client-list-item .parking-client-list-name {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .parking-client-list-item .parking-client-list-meta {
    color: var(--muted) !important;
}

html[data-theme="dark"] .app-shell .parking-client-list-item:hover .parking-client-list-meta,
html[data-theme="dark"] .app-shell .parking-client-list-item:focus-visible .parking-client-list-meta {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell :is(.entry-form button:not(.rental-broker-open):not(.rental-broker-option):not(.rental-guarantee-picker-button):not(.rental-guarantee-option):not(.parking-cashbox-open):not(.parking-cashbox-add):not(.text-action-link):not(.gastos-link-button):not(.map-text-link):not(.floor-list-link):not(.ipc-view-link):not(.social-error-button):not(.social-validation-toast-close):not(.mini-button):not(.cyclic-help-button):not(.payment-file-clear):not(.payment-amount-suggestion-option):not(.payment-discount-picker-open):not(.payment-discount-picker-option):not(.country-picker-button):not(.location-country-button):not(.parking-client-picker-button):not(.parking-registration-increase-trigger):not(.company-selector-button):not(.gastos-provider-picker-open):not(.balance-rule-open):not(.logo-remove-button):not(.record-modal-close):not(.parking-registration-contract-pdf-button):not(.floor-modal-add-another):not(.floor-modal-row-remove):not(.split-picker-open):not(.split-picker-option):not(.select-clear-button):not(.button-danger):not(.plan-boton):not(.plan-item), .variables-shell > button[type="submit"], .button-primary, .mini-button.edit) {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .logo-upload-field {
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .entry-form .logo-remove-button {
    border-color: rgba(240, 100, 106, 0.58);
    background: #b92f4f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .logo-remove-button:focus-visible {
    outline-color: #ff8da8;
}

html[data-theme="dark"] .app-shell .logo-download-button {
    border-color: #C084FC;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .logo-file-upload:focus-within > [data-file-label],
html[data-theme="dark"] .app-shell .logo-download-button:focus-visible {
    outline-color: #C084FC;
}

html[data-theme="dark"] .app-shell .logo-upload-status.is-selected {
    color: #C084FC;
}

html[data-theme="dark"] .app-shell .logo-upload-status.is-pending-delete {
    color: #ff8da8;
}

html[data-theme="dark"] .app-shell :is(.button-secondary, .entry-form .text-action-link, .entry-form .gastos-link-button, .entry-form .map-text-link, .entry-form .floor-list-link, .entry-form .ipc-view-link) {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .entry-form .map-text-link {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-link-button {
    background: transparent;
    box-shadow: none;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-link-button:hover {
    background: transparent;
    text-decoration-color: currentColor;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-link-button:focus-visible {
    background: transparent;
    outline: 2px solid rgba(124, 200, 255, 0.72);
    outline-offset: 3px;
    text-decoration: none;
}

html[data-theme="dark"] .app-shell :is(.notice, .notice-ok, .notice-error) {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .notice-ok {
    border-color: rgba(40, 185, 159, 0.42);
    background: rgba(40, 185, 159, 0.15);
}

html[data-theme="dark"] .app-shell .notice-error {
    border-color: rgba(240, 100, 106, 0.46);
    background: rgba(240, 100, 106, 0.16);
}

html[data-theme="dark"] .app-shell .public-page-builder {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell :is(.public-template-option, .public-block-option, .public-builder-data, .public-block-editor, .public-config-disclosure) {
    border-color: #526a73;
    background: #162126;
    color: var(--ink);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .public-blog-selector-option {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-option.is-active {
    border-color: #C084FC;
    background: #17353a;
}

html[data-theme="dark"] .app-shell :is(.public-template-option:hover, .public-template-option:focus-within, .public-block-option:hover, .public-block-option:focus-within) {
    border-color: #78cbd5;
    background: #1b2b31;
}

html[data-theme="dark"] .app-shell .public-template-option.is-selected {
    border-color: #C084FC;
    background: #17353a;
    box-shadow: 0 0 0 2px rgba(123, 216, 226, 0.18);
}

html[data-theme="dark"] .app-shell .sidebar {
    border-right-color: rgba(0, 0, 0, 0.08);
    background: var(--sidebar);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .brand {
    border-color: rgba(255, 255, 255, 0.14);
    background: #465057;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .app-shell :is(.nav-link, .brand-neutral) {
    color: #ffffff;
}

/* Mismo borde y mismo degradado que la cabecera cerrada de un subdesplegable de
   «Información del Estacionamiento». */
html[data-theme="dark"] .app-shell .public-block-builder .public-block-option {
    border-color: #38515a;
    background: linear-gradient(135deg, #202e33 0%, #182328 100%);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .public-block-option.is-enabled:not(.is-editing) {
    border-color: #38515a;
    background: linear-gradient(135deg, #202e33 0%, #182328 100%);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .public-block-option.is-disabled {
    background: #141d21;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .public-block-option[data-public-block-option="precio_disponibilidad"].is-disabled {
    border-color: #38515a;
    background: linear-gradient(135deg, #202e33 0%, #182328 100%);
    opacity: 1;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .public-block-option.is-editing {
    border-color: #92edf5;
    background: #087985;
    box-shadow: 0 0 0 3px rgba(146, 237, 245, 0.2);
}

html[data-theme="dark"] .app-shell :is(.public-template-copy strong, .public-block-picker-head strong, .public-block-option strong, .public-builder-data strong, .public-block-editor h3) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.public-template-copy small, .public-block-option small, .public-builder-data small, .public-block-editor p) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-edit-form {
    border-color: #526a73;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-compose {
    background: transparent;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-head > strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-head small,
html[data-theme="dark"] .app-shell .public-blog-text-counter {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-text-counter.is-valid {
    color: #79e0ac;
}

html[data-theme="dark"] .app-shell .public-blog-text-counter.is-warning,
html[data-theme="dark"] .app-shell .public-blog-text-counter.is-over-limit {
    color: #ff8da8;
}

html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-item-actions .mini-button:not(:disabled),
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-item-actions .mini-button:not(:disabled):hover,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-item-actions .mini-button:not(:disabled):focus-visible,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-save-button,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-save-button:hover,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-save-button:focus-visible {
    border-color: #C084FC;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-item-actions .mini-button:disabled {
    border-color: #526a73;
    background: #263238;
    color: #ffffff;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .public-blog-modal-block-actions,
html[data-theme="dark"] .app-shell .public-blog-modal-actions {
    border-top-color: #526a73;
}

html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-actions .button-neutral,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-actions .button-neutral:hover,
html[data-theme="dark"] .app-shell .public-blog-editor .public-blog-modal-actions .button-neutral:focus-visible {
    border-color: #6f858e;
    background: #f7fafb;
    color: #000000;
}

html[data-theme="dark"] .app-shell .public-blog-entry-selector {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-entries-table tbody tr.is-active :is(th, td) {
    background: #17363c;
}

html[data-theme="dark"] .app-shell .public-blog-entry-title-cell strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-option {
    border-color: #526a73;
    background: #132329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-option.is-active {
    border-color: #C084FC;
    background: #12383d;
    box-shadow: 0 0 0 2px rgba(123, 216, 226, 0.2);
}

html[data-theme="dark"] .app-shell .public-blog-entry-selector > strong,
html[data-theme="dark"] .app-shell .public-blog-selector-option strong,
html[data-theme="dark"] .app-shell .public-blog-editor-item-head strong,
html[data-theme="dark"] .app-shell .public-blog-title-field {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-selector-option small,
html[data-theme="dark"] .app-shell .public-blog-entry-selector > small,
html[data-theme="dark"] .app-shell .public-blog-edit-form small {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-editor :is(input, textarea) {
    border-color: #526a73;
    background: #0f171b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-editor :is(input, textarea)::placeholder {
    color: #9bb0b8;
}

html[data-theme="dark"] .app-shell .public-blog-format-button {
    border-color: #526a73;
    background: #15282e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-blog-format-button:hover,
html[data-theme="dark"] .app-shell .public-blog-format-button:focus-visible {
    border-color: #C084FC;
    background: #12383d;
}

html[data-theme="dark"] .app-shell .entry-form .public-blog-block-head .mini-button,
html[data-theme="dark"] .app-shell .entry-form .public-blog-block-head .mini-button:hover,
html[data-theme="dark"] .app-shell .entry-form .public-blog-block-head .mini-button:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .public-blog-format-button,
html[data-theme="dark"] .app-shell .entry-form .public-blog-format-button:hover,
html[data-theme="dark"] .app-shell .entry-form .public-blog-format-button:focus-visible {
    border-color: #526a73;
    background: #15282e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .public-blog-block-head .mini-button:hover,
html[data-theme="dark"] .app-shell .entry-form .public-blog-block-head .mini-button:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .public-blog-format-button:hover,
html[data-theme="dark"] .app-shell .entry-form .public-blog-format-button:focus-visible {
    border-color: #C084FC;
    background: #12383d;
}

html[data-theme="dark"] .app-shell .public-blog-image-field .logo-file-upload span {
    border-color: #78cbd5;
    background: #10282e;
    color: #D8B4FE;
}

html[data-theme="dark"] .app-shell .public-config-disclosure > summary {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-config-disclosure > summary::after {
    background: #101a1f;
    color: #C084FC;
}

html[data-theme="dark"] .app-shell .public-config-disclosure[open] > summary {
    border-bottom-color: #526a73;
}

html[data-theme="dark"] .app-shell .public-field-info-button {
    border-color: transparent;
    background: transparent;
    color: #D8B4FE;
}

html[data-theme="dark"] .app-shell .public-field-info-button:hover,
html[data-theme="dark"] .app-shell .public-field-info-button:focus-visible {
    border-color: transparent;
    background: rgba(105, 210, 218, 0.14);
    color: #D8B4FE;
}

/* El rótulo de sección conserva su color aunque sea un <label>, que la regla
   general de labels del tema oscuro pinta de blanco puro. */
html[data-theme="dark"] .app-shell .public-field-heading {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .public-field-info-tooltip {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .app-shell .public-image-dimension-warning {
    border-color: rgba(231, 185, 92, 0.52);
    background: #2b2417;
    color: #ffe0a0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .app-shell .public-block-editor textarea[data-public-progressive-textarea] {
    border-color: #526a73;
    background: linear-gradient(180deg, #111c21, #0f171b);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .app-shell .public-block-editor textarea[data-public-progressive-textarea]:hover,
html[data-theme="dark"] .app-shell .public-block-editor textarea[data-public-progressive-textarea]:focus {
    border-color: #78cbd5;
}

html[data-theme="dark"] .app-shell .public-hero-rich-editor {
    border-color: #526a73;
    background: linear-gradient(180deg, #111c21, #0f171b);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .app-shell .public-hero-rich-editor:hover,
html[data-theme="dark"] .app-shell .public-hero-rich-editor:focus {
    border-color: #78cbd5;
}
html[data-theme="dark"] .app-shell .public-short-text-feedback .public-char-counter {
    color: #D8B4FE;
}

html[data-theme="dark"]
    .app-shell
    .public-short-text-feedback
    .public-char-counter.is-at-limit {
    color: #ff979b;
}

html[data-theme="dark"] .app-shell .public-short-text-error {
    border-color: rgba(255, 139, 147, 0.62);
    background: #32191e;
    color: #ffd4d7;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .app-shell .public-short-text-error::before {
    border-color: rgba(255, 139, 147, 0.62);
    background: #32191e;
}

html[data-theme="dark"] .app-shell .public-block-save-button,
html[data-theme="dark"] .app-shell .public-block-save-button:hover,
html[data-theme="dark"] .app-shell .public-block-save-button:focus-visible {
    border-color: #C084FC;
    background: #7C3AED;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.public-block-drag-handle, .public-block-fixed-label, .public-block-visibility-toggle) {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-block-drag-handle:is(:hover, :focus-visible) {
    border-color: #C084FC;
    background: #17353a;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-block-number {
    background: #263941;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-block-option.is-editing .public-block-number {
    background: #92edf5;
    color: #000000;
}

html[data-theme="dark"] .app-shell .public-block-option.is-disabled .public-block-number {
    background: #31464e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-block-option[data-public-block-option="precio_disponibilidad"].is-disabled .public-block-number {
    background: #263941;
    color: #ffffff;
    font-size: 14px;
}

html[data-theme="dark"] .app-shell .public-builder-data span {
    color: #C084FC;
}

html[data-theme="dark"] .app-shell :is(.public-template-option input, .public-block-option input) {
    accent-color: #C084FC;
}

html[data-theme="dark"] .app-shell .public-template-preview {
    border-color: rgba(123, 216, 226, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .app-shell .public-template-option-clasica {
    --template-shadow: rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .app-shell .public-builder-link-row input {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .record-modal-backdrop {
    background: rgba(2, 7, 9, 0.78);
}

.parking-client-flags.has-client-switch > .field-label-line,
.parking-client-flags.has-client-switch .parking-client-change-link {
    transform: translateY(16px);
}

html[data-theme="dark"] .app-shell :is(
    label,
    legend,
    .field-label-line,
    .parking-client-flags,
    .parking-client-picker-field,
    .parking-client-search-field,
    .rental-guarantee-picker-field,
    .cycle-row-title,
    .availability-detail-item span,
    .availability-summary-card span,
    .availability-kpi-insight span,
    .availability-summary-card small,
    .availability-kpi-insight small,
    .availability-percent-label span,
    .availability-percent-label small,
    .availability-percent-value strong,
    .parking-client-list-meta,
    .rental-document-summary,
    .rental-document-requirements,
    .rental-guarantee-summary
) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell :is(.record-modal-form .record-linked-list, .record-modal-form .record-client-history) {
    border-color: #90a4ae;
    background: #e2eaee;
    color: #000000;
    box-shadow: inset 4px 0 0 #007e8f;
}

html[data-theme="dark"] .app-shell :is(.record-modal-form .record-linked-list, .record-modal-form .record-client-history) .field-label-line {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .record-modal-form .record-linked-items {
    gap: 10px;
}

html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item {
    border-color: #6d28d9;
    background: #00717b;
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(16, 24, 32, 0.18);
}

html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item:hover,
html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item:focus-visible {
    border-color: #004f59;
    background: #6D28D9;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item strong,
html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item span {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .record-modal-form .record-linked-item span {
    opacity: 1;
}

html[data-theme="dark"] .app-shell .record-client-history-note {
    color: #000000;
}

html[data-theme="dark"] .app-shell .record-client-history-note span {
    color: #000000 !important;
}

html:not([data-theme="dark"]) .app-shell :is(
    label,
    legend,
    .field-label-line,
    .parking-client-flags,
    .parking-client-picker-field,
    .parking-client-search-field,
    .rental-guarantee-picker-field,
    .cycle-row-title,
    .availability-detail-item span,
    .availability-summary-card span,
    .availability-kpi-insight span,
    .parking-client-list-meta,
    .rental-document-summary,
    .rental-guarantee-summary
) {
    color: #000000;
}

html[data-theme="dark"] .app-shell :is(.record-row-button, .payment-row-button, tbody td a:not(.record-contact-icon), .parking-client-list-name, .text-action-link, .gastos-link-button, .map-text-link, .floor-list-link, .ipc-view-link, .parking-client-change-link, .availability-show-all-link) {
    color: var(--link-blue-dark) !important;
    font-weight: 800;
}

html:not([data-theme="dark"]) .app-shell :is(.record-row-button, .payment-row-button, tbody td a:not(.record-contact-icon), .parking-client-list-name, .text-action-link, .gastos-link-button, .map-text-link, .floor-list-link, .ipc-view-link, .parking-client-change-link, .availability-show-all-link) {
    color: var(--link-blue) !important;
    font-weight: 800;
}

html[data-theme="dark"] .app-shell .record-client-history-note .record-client-history-owner,
html:not([data-theme="dark"]) .app-shell .record-client-history-note .record-client-history-owner {
    color: #6b2108 !important;
}

html[data-theme="dark"] .app-shell .record-client-history-note .record-client-history-owner:hover,
html[data-theme="dark"] .app-shell .record-client-history-note .record-client-history-owner:focus-visible,
html:not([data-theme="dark"]) .app-shell .record-client-history-note .record-client-history-owner:hover,
html:not([data-theme="dark"]) .app-shell .record-client-history-note .record-client-history-owner:focus-visible {
    color: #451a03 !important;
}

html[data-theme="dark"] .app-shell .record-modal-panel {
    border-color: #5e737c;
    background: #1f2a2f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .record-modal-form {
    gap: 16px;
}

html[data-theme="dark"] .app-shell .record-modal-actions .button,
html[data-theme="dark"] .app-shell .availability-detail-actions .button,
html[data-theme="dark"] .app-shell .availability-choice-actions .button {
    border: 1px solid #6f858e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.button-neutral, .record-modal-actions .button-neutral, .availability-detail-actions .button-neutral) {
    border-color: #6f858e;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.button-neutral:hover, .record-modal-actions .button-neutral:hover, .availability-detail-actions .button-neutral:hover) {
    background: #26363d;
    color: #ffffff;
    filter: none;
}

html[data-theme="dark"] .app-shell :is(button:disabled, .button:disabled, .button.is-disabled) {
    color: #ffffff;
}

/* El checkbox real cubre toda la pastilla para ampliar el área de clic. La regla
   global de campos deshabilitados no debe volverlo opaco y tapar su etiqueta. */
html[data-theme="dark"] .app-shell .entry-form .parking-client-check > input[type="checkbox"]:disabled {
    border: 0;
    background: transparent;
    opacity: 0;
}

html[data-theme="dark"] .app-shell .entry-form .parking-client-check.is-registration-mode-locked {
    border-color: #687780;
    background: #465158;
    color: #ffffff;
    opacity: 1;
}

html[data-theme="dark"] .app-shell :is(select[data-occupancy-space-field], select[data-rental-unit-contract-select], select[data-rental-document-select]) {
    color: #ffffff;
    font-weight: 800;
}

html[data-theme="dark"] .app-shell .availability-detail-panel,
html[data-theme="dark"] .app-shell .availability-choice-panel,
html[data-theme="dark"] .app-shell .availability-kpi-panel {
    border-color: #5e737c;
    background: #1f2a2f;
}

html[data-theme="dark"] .app-shell .availability-detail-item,
html[data-theme="dark"] .app-shell .availability-summary-card,
html[data-theme="dark"] .app-shell .availability-kpi-insight,
html[data-theme="dark"] .app-shell .availability-percent-row,
html[data-theme="dark"] .app-shell .availability-next-table-wrap {
    border-color: #5e737c;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-detail-item strong,
html[data-theme="dark"] .app-shell .availability-choice-copy,
html[data-theme="dark"] .app-shell .availability-next-table td,
html[data-theme="dark"] .app-shell .availability-next-table th,
html[data-theme="dark"] .app-shell .availability-kpi-section h3,
html[data-theme="dark"] .app-shell .availability-space-list :is(span, button) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-next-table th {
    background: #26363d;
}

html[data-theme="dark"] .app-shell .payment-overdue-table :is(th:nth-child(5), td:nth-child(5)) {
    background: rgba(255, 115, 125, 0.18);
    color: #ff9aa2;
}

html[data-theme="dark"] .app-shell .availability-next-table td.is-space,
html[data-theme="dark"] .app-shell .availability-show-all-link {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-choice-list-wrap .field-label-line {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-choice-panel .availability-choice-item {
    border-color: #78cbd5;
    background: #10282e;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #00a2b4;
}

html[data-theme="dark"] .app-shell .availability-choice-panel .availability-choice-item:hover,
html[data-theme="dark"] .app-shell .availability-choice-panel .availability-choice-item:focus-visible {
    border-color: #9be7dd;
    background: #12343a;
    color: #ffffff;
    filter: none;
    outline: 2px solid rgba(123, 216, 226, 0.34);
    outline-offset: 2px;
}

html[data-theme="dark"] .app-shell .availability-choice-panel .availability-choice-item strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-choice-panel .availability-choice-item span {
    color: #ffffff;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .availability-percent-track {
    background: #0f171a;
}

html[data-theme="dark"] .app-shell .availability-percent-track span {
    background: var(--brand-primary);
}

html[data-theme="dark"] .app-shell .availability-space-list :is(span, button) {
    border-color: #5e737c;
    background: #172126;
}

html[data-theme="dark"] .app-shell .rental-document-dropdown,
html[data-theme="dark"] .app-shell .rental-guarantee-section {
    border-color: #5e737c;
    background: #172126;
}

html[data-theme="dark"] .app-shell .rental-document-summary {
    border-bottom-color: transparent;
    background: #27353b;
}

html[data-theme="dark"] .app-shell .rental-document-dropdown[open] > .rental-document-summary {
    border-bottom-color: rgba(109, 40, 217, 0.72);
    background: #183134;
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

html[data-theme="dark"] .app-shell .rental-document-content,
html[data-theme="dark"] .app-shell .rental-guarantee-body {
    background: #172126;
}

html[data-theme="dark"] .app-shell .rental-document-requirements,
html[data-theme="dark"] .app-shell .rental-document-card,
html[data-theme="dark"] .app-shell .rental-document-card.is-complete,
html[data-theme="dark"] .app-shell .rental-document-card.is-incomplete {
    border-color: #5e737c;
    background: #1f2a2f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .rental-document-toolbar select.is-complete,
html[data-theme="dark"] .app-shell .rental-document-toolbar select.is-incomplete {
    border-color: #5e737c;
    background: #121a1e;
    color: #ffffff;
}

/* Ajuste final de contraste: links azules y estados con color propio en modo oscuro. */
html[data-theme="dark"] .app-shell .kpi-card.tone-positive strong,
html[data-theme="dark"] .app-shell .mini-kpi.tone-positive strong {
    color: #65dfbe;
}

html[data-theme="dark"] .app-shell .kpi-card.tone-danger strong,
html[data-theme="dark"] .app-shell .mini-kpi.tone-danger strong {
    color: #ff737d;
}

html[data-theme="dark"] .app-shell .kpi-card.tone-blue strong {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .kpi-card.tone-partial strong,
html[data-theme="dark"] .app-shell .mini-kpi.tone-partial strong {
    color: #d3b3ff;
}

html[data-theme="dark"] .app-shell .kpi-card.tone-strong strong {
    color: #9be7dd;
}

html[data-theme="dark"] .app-shell .kpi-card-map-button:hover strong,
html[data-theme="dark"] .app-shell .kpi-card-map-button:focus-visible strong {
    color: var(--link-blue-dark);
}

html:not([data-theme="dark"]) .app-shell .kpi-card-map-button:hover strong,
html:not([data-theme="dark"]) .app-shell .kpi-card-map-button:focus-visible strong {
    color: var(--link-blue);
}

html[data-theme="dark"] .app-shell .availability-table {
    background: #11191d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table th {
    border-color: #40555e;
    background: #27363c;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table td {
    border-color: #40555e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table :is(th:first-child, th:nth-child(2)) {
    background: #2b3a40;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table :is(td:first-child, td:nth-child(2)) {
    background: #172126;
}

html[data-theme="dark"] .app-shell .availability-table tbody td:first-child {
    color: var(--link-blue-dark);
    font-weight: 900;
}

html[data-theme="dark"] .app-shell .availability-space-button {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .availability-space-button:hover,
html[data-theme="dark"] .app-shell .availability-space-button:focus-visible {
    border-color: #78cbd5;
    background: rgba(124, 58, 237, 0.24);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table tbody tr:hover :is(td:first-child, td:nth-child(2)) {
    background: #223239;
}

html[data-theme="dark"] .app-shell .availability-table td[data-availability-slot] {
    background: #10191d;
}

html[data-theme="dark"] .app-shell .availability-action-cell:hover,
html[data-theme="dark"] .app-shell .availability-table td[data-availability-slot]:hover {
    background: #183033;
}

html[data-theme="dark"] .app-shell .availability-block-cell {
    background: rgba(255, 115, 125, 0.18);
    box-shadow:
        inset 0 2px 0 rgba(255, 115, 125, 0.58),
        inset 0 -2px 0 rgba(255, 115, 125, 0.58);
}

html[data-theme="dark"] .app-shell .availability-block-cell:hover {
    background: rgba(255, 115, 125, 0.26);
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial {
    background: rgba(211, 179, 255, 0.17);
    box-shadow:
        inset 0 2px 0 rgba(211, 179, 255, 0.54),
        inset 0 -2px 0 rgba(211, 179, 255, 0.54);
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial:hover {
    background: rgba(211, 179, 255, 0.25);
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-block-start {
    border-left-color: #ff737d;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-block-end {
    border-right-color: #ff737d;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial.is-block-start {
    border-left-color: #d3b3ff;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial.is-block-end {
    border-right-color: #d3b3ff;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-entry-day::before {
    background: #65dfbe;
    color: #08201d;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-exit-day::after {
    background: #ff737d;
    color: #290b0f;
}

html[data-theme="dark"] .app-shell .availability-slot-button {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(101, 223, 190, 0.18);
    color: #9af0d7;
}

html[data-theme="dark"] .app-shell .availability-action-cell:hover .availability-slot-button,
html[data-theme="dark"] .app-shell .availability-table td[data-availability-slot]:hover .availability-slot-button,
html[data-theme="dark"] .app-shell .availability-slot-button:hover {
    background: rgba(101, 223, 190, 0.3);
    box-shadow: 0 0 0 2px rgba(101, 223, 190, 0.28);
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-free, .availability-status.is-free, .availability-status.is-positive) {
    border: 1px solid rgba(101, 223, 190, 0.5);
    background: rgba(101, 223, 190, 0.18);
    color: #9af0d7;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-occupied, .availability-status.is-occupied) {
    border: 1px solid rgba(255, 115, 125, 0.52);
    background: rgba(255, 115, 125, 0.2);
    color: #ff9da5;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-partial, .availability-status.is-partial) {
    border: 1px solid rgba(211, 179, 255, 0.52);
    background: rgba(211, 179, 255, 0.18);
    color: #dec8ff;
}

html[data-theme="dark"] .app-shell .availability-table :is(th:first-child, td:first-child),
html[data-theme="dark"] .app-shell .availability-table :is(th:nth-child(2), td:nth-child(2)) {
    box-shadow: 1px 0 0 #40555e;
}

html[data-theme="dark"] .app-shell .availability-hour-heading {
    border-color: rgba(123, 216, 226, 0.28);
    background: #17353a;
    color: #9be7dd;
}

html[data-theme="dark"] .app-shell .availability-hour-table .availability-cell,
html[data-theme="dark"] .app-shell .availability-hour-table .availability-slot-button {
    width: 100%;
    height: 34px;
    border-radius: 8px;
}

html[data-theme="dark"] .app-shell .availability-hour-slot-button {
    border-color: rgba(101, 223, 190, 0.4);
    background: rgba(101, 223, 190, 0.14);
    color: #9af0d7;
}

html[data-theme="dark"] .app-shell .availability-hour-cell-action {
    background: rgba(101, 223, 190, 0.2);
}

html[data-theme="dark"] .app-shell .availability-hour-block {
    border-color: rgba(255, 115, 125, 0.44);
    box-shadow: inset 0 -2px 0 rgba(255, 115, 125, 0.14);
}

html[data-theme="dark"] .app-shell .availability-hour-block.is-partial {
    border-color: rgba(211, 179, 255, 0.46);
    box-shadow: inset 0 -2px 0 rgba(211, 179, 255, 0.14);
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-slot] {
    background: #10191d;
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-occupancy] {
    background: rgba(255, 115, 125, 0.08);
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-status="Parcial"] {
    background: rgba(211, 179, 255, 0.08);
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-slot]:hover .availability-hour-slot-button,
html[data-theme="dark"] .app-shell .availability-hour-slot-button:hover {
    border-color: rgba(101, 223, 190, 0.62);
    background: rgba(101, 223, 190, 0.24);
}

html[data-theme="dark"] .app-shell .availability-view-toggle {
    border-color: #748992;
    background: #dfe8ed;
}

html[data-theme="dark"] .app-shell .availability-view-toggle button {
    color: #000000;
}

html[data-theme="dark"] .app-shell .availability-view-toggle button.is-active {
    background: #007e8f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-panel .availability-view-toggle {
    border-color: transparent;
    background: transparent;
}

html[data-theme="dark"] .app-shell .availability-panel .availability-view-toggle button {
    border-color: #687780;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-panel .availability-view-toggle button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .expandable-filter-search {
    border-color: #687780;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .expandable-filter-search.is-expanded {
    border-color: var(--brand-primary);
}

html[data-theme="dark"] .app-shell .expandable-filter-search:focus-within {
    outline-color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.expandable-filter-search-toggle, .expandable-filter-search-clear) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .expandable-filter-search .expandable-filter-search-field > input[type="search"] {
    border: 0;
    background: transparent;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-block-cell {
    background: #e9b9c2;
    color: #16090d;
    box-shadow:
        inset 0 2px 0 rgba(121, 28, 42, 0.46),
        inset 0 -2px 0 rgba(121, 28, 42, 0.46);
}

html[data-theme="dark"] .app-shell .availability-block-cell:hover {
    background: #df9eac;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial {
    background: #d4c1ec;
    color: #160b28;
    box-shadow:
        inset 0 2px 0 rgba(91, 41, 138, 0.42),
        inset 0 -2px 0 rgba(91, 41, 138, 0.42);
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-partial:hover {
    background: #c3abe3;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-reserved {
    background: #ebcb74;
    color: #211600;
    box-shadow:
        inset 0 2px 0 rgba(111, 72, 0, 0.48),
        inset 0 -2px 0 rgba(111, 72, 0, 0.48);
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-reserved:hover {
    background: #dfb94e;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-reserved.is-block-start {
    border-left-color: #9c6500;
}

html[data-theme="dark"] .app-shell .availability-block-cell.is-reserved.is-block-end {
    border-right-color: #9c6500;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-free, .availability-status.is-free, .availability-status.is-positive) {
    border-color: rgba(35, 113, 82, 0.46);
    background: #bbe7d2;
    color: #082019;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-occupied, .availability-status.is-occupied) {
    border-color: rgba(121, 28, 42, 0.5);
    background: #e9b9c2;
    color: #16090d;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-partial, .availability-status.is-partial) {
    border-color: rgba(91, 41, 138, 0.48);
    background: #d4c1ec;
    color: #160b28;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-reserved, .availability-status.is-reserved) {
    border-color: rgba(111, 72, 0, 0.52);
    background: #ebcb74;
    color: #211600;
}

html[data-theme="dark"] .app-shell .availability-reservation-note {
    color: #f1cf79;
}

html[data-theme="dark"] .app-shell .availability-reservation-note time {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-status="Ocupado"] {
    background: #3d2a2f;
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-status="Parcial"] {
    background: #342d43;
}

html[data-theme="dark"] .app-shell .availability-hour-table td[data-availability-status="Reservado"] {
    background: #40351f;
}

html[data-theme="dark"] .app-shell .availability-hour-block {
    border-color: rgba(121, 28, 42, 0.52);
    background: #e9b9c2;
    color: #16090d;
    box-shadow: inset 0 -2px 0 rgba(121, 28, 42, 0.18);
}

html[data-theme="dark"] .app-shell .availability-hour-block.is-partial {
    border-color: rgba(91, 41, 138, 0.5);
    background: #d4c1ec;
    color: #160b28;
    box-shadow: inset 0 -2px 0 rgba(91, 41, 138, 0.16);
}

html[data-theme="dark"] .app-shell .availability-hour-block.is-reserved {
    border-color: rgba(111, 72, 0, 0.54);
    background: #ebcb74;
    color: #211600;
    box-shadow: inset 0 -2px 0 rgba(111, 72, 0, 0.2);
}

html[data-theme="dark"] .app-shell .availability-hour-cell-action {
    background: rgba(8, 32, 25, 0.16);
    color: #082019;
}

html[data-theme="dark"] .app-shell .availability-action-cell.is-availability-selected,
html[data-theme="dark"] .app-shell .availability-table td.is-availability-selected,
html[data-theme="dark"] .app-shell .availability-table th.is-availability-selected {
    background: rgba(101, 223, 190, 0.24);
    box-shadow: inset 0 0 0 2px rgba(101, 223, 190, 0.58);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-action-cell.is-availability-anchor,
html[data-theme="dark"] .app-shell .availability-table td.is-availability-anchor,
html[data-theme="dark"] .app-shell .availability-table th.is-availability-anchor {
    background: rgba(124, 200, 255, 0.24);
    box-shadow: inset 0 0 0 3px rgba(124, 200, 255, 0.58);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-table td.is-availability-invalid,
html[data-theme="dark"] .app-shell .availability-table th.is-availability-invalid {
    background: rgba(255, 115, 125, 0.24);
    box-shadow: inset 0 0 0 2px rgba(255, 115, 125, 0.58);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .availability-action-cell.is-availability-selected .availability-slot-button,
html[data-theme="dark"] .app-shell .availability-slot-button.is-availability-selected,
html[data-theme="dark"] .app-shell .availability-action-cell.is-availability-anchor .availability-slot-button,
html[data-theme="dark"] .app-shell .availability-slot-button.is-availability-anchor {
    background: #7cc8ff;
    color: #07161d;
}

html[data-theme="dark"] .app-shell .availability-action-cell.is-availability-invalid .availability-slot-button,
html[data-theme="dark"] .app-shell .availability-slot-button.is-availability-invalid {
    background: #ff737d;
    color: #290b0f;
}

html[data-theme="dark"] .app-shell .availability-space-list :is(span, button) {
    border-color: #5e737c;
    background: #172126;
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .availability-space-list .availability-space-item.is-free {
    border-color: rgba(101, 223, 190, 0.5);
    background: rgba(101, 223, 190, 0.16);
    color: #9af0d7;
}

html[data-theme="dark"] .app-shell .availability-space-list .availability-space-item.is-occupied {
    border-color: rgba(255, 115, 125, 0.52);
    background: rgba(255, 115, 125, 0.18);
    color: #ff9da5;
}

html[data-theme="dark"] .app-shell .availability-space-list .availability-space-item.is-partial {
    border-color: rgba(211, 179, 255, 0.52);
    background: rgba(211, 179, 255, 0.18);
    color: #dec8ff;
}

html[data-theme="dark"] .app-shell .availability-space-list .availability-space-item.is-fragmented {
    border-color: rgba(103, 185, 241, 0.58);
    background: rgba(103, 185, 241, 0.18);
    color: #a9dcff;
}

html[data-theme="dark"] .app-shell .availability-space-list .availability-space-item.is-reserved {
    border-color: rgba(255, 199, 102, 0.58);
    background: rgba(255, 199, 102, 0.18);
    color: #ffd994;
}

html[data-theme="dark"] .app-shell :is(.availability-cell.is-fragmented, .availability-status.is-fragmented) {
    border: 1px solid #67b9f1;
    background: #cce8fa;
    color: #08263b;
}

html[data-theme="dark"] .app-shell .availability-hour-table .availability-hour-block.is-fragmented {
    border-color: #67b9f1;
    background: #cce8fa;
    color: #08263b;
    box-shadow: none;
}

/* En tema oscuro el estado se expresa en el chip/cuadrado. La celda queda
   neutra para evitar bandas rosadas o violetas que dominan toda la grilla. */
html[data-theme="dark"] .app-shell :is(
    .availability-block-cell,
    .availability-block-cell:hover,
    .availability-block-cell.is-partial,
    .availability-block-cell.is-partial:hover,
    .availability-block-cell.is-fragmented,
    .availability-block-cell.is-fragmented:hover,
    .availability-block-cell.is-reserved,
    .availability-block-cell.is-reserved:hover,
    .availability-hour-table td[data-availability-occupancy],
    .availability-hour-table td[data-availability-status="Ocupado"],
    .availability-hour-table td[data-availability-status="Parcial"],
    .availability-hour-table td[data-availability-status="Fragmentado"],
    .availability-hour-table td[data-availability-status="Reservado"]
) {
    border-color: #40555e;
    background: #10191d;
    color: #ffffff;
    box-shadow: none;
}

.app-shell .availability-detail-text {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.app-shell .availability-detail-text .availability-detail-item.is-wide {
    grid-column: auto;
}

.app-shell .availability-detail-text .availability-detail-item:last-child:nth-child(odd) {
    justify-self: center;
    width: min(100%, 440px);
}

html[data-theme="dark"] .app-shell .availability-next-table td.is-space {
    color: var(--link-blue-dark);
}

/* Resumen: tablas oscuras legibles. */
html[data-theme="dark"] .app-shell .summary-month-panel {
    border-color: #435962;
    background: #172126;
}

html[data-theme="dark"] .app-shell .summary-month-table {
    background: #11191d;
}

html[data-theme="dark"] .app-shell .summary-month-table th {
    border-bottom-color: #4b626c;
    background: #26363d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-table td {
    border-bottom-color: #344851;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-filter-form label {
    border-color: #49636e;
    background: #1b2a30;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-filter-form select {
    border-color: #5d7680;
    background: #10191d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-past td {
    background: #231b21;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-current td {
    background: #2a281c;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-current td:first-child {
    color: #ffd27d;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-future td {
    background: #17251f;
}

html[data-theme="dark"] .app-shell .summary-month-table .summary-paid-cell {
    background: #17302d;
    color: #9af0d7;
}

html[data-theme="dark"] .app-shell .summary-month-table .summary-missing-cell {
    background: #322328;
    color: #ffb6bd;
}

html[data-theme="dark"] .app-shell .summary-month-table .summary-net-cell {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-day-bar {
    border-color: #4b626c;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-day-bar.is-active {
    border-color: #65dfbe;
    background: #17302d;
    box-shadow: inset 0 0 0 2px rgba(101, 223, 190, 0.32);
}

html[data-theme="dark"] .app-shell .payment-day-bar i {
    background: #2b3b42;
}

html[data-theme="dark"] .app-shell .payment-day-bar b {
    background: #65dfbe;
}

html[data-theme="dark"] .app-shell .payment-day-bar small {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-card {
    border-color: #48616b;
    background: linear-gradient(180deg, #17262c 0%, #121d22 100%);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-card-header h2,
html[data-theme="dark"] .app-shell .payment-space-card-header p,
html[data-theme="dark"] .app-shell .payment-space-filters label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-card-header strong {
    background: #0b1519;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-card.is-paid .payment-space-card-header strong {
    background: #087f6f;
}

html[data-theme="dark"] .app-shell .payment-space-card.is-overdue .payment-space-card-header strong {
    background: #b93f4b;
}

html[data-theme="dark"] .app-shell .payment-space-list .empty-state {
    border-color: #48616b;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-chip {
    border-color: #5e737c;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-space-chip.is-paid {
    border-color: rgba(101, 223, 190, 0.42);
    background: #17302d;
    color: #a7f3df;
}

html[data-theme="dark"] .app-shell .payment-space-chip.is-overdue {
    border-color: rgba(255, 139, 147, 0.44);
    background: #322328;
    color: #ffb6bd;
}

/* Cobros: tintes de estado suaves y badges compactos en modo oscuro. */
html[data-theme="dark"] .app-shell .payment-register-table-wrap {
    border-color: #344b54;
    background: #131c20;
    scrollbar-color: #536a74 #111a1e;
}

html[data-theme="dark"] .app-shell .payment-register-table {
    background: #172126;
}

html[data-theme="dark"] .app-shell .payment-register-table th {
    border-bottom-color: #45606a;
    background: #203139;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-register-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] .app-shell .payment-register-table-wrap::-webkit-scrollbar-track {
    background: #111a1e;
}

html[data-theme="dark"] .app-shell .payment-register-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid #111a1e;
    border-radius: 999px;
    background: #536a74;
}

html[data-theme="dark"] .app-shell tr[data-payment-row] {
    --payment-row-background: #172126;
    --payment-row-hover: #223138;
    --payment-row-tint: rgba(120, 144, 154, 0.025);
    --payment-row-tint-hover: rgba(120, 144, 154, 0.06);
    --payment-row-accent: #78909a;
    --payment-row-status: #ffffff;
    --payment-status-background: rgba(120, 144, 154, 0.12);
    --payment-status-border: rgba(120, 144, 154, 0.34);
}

html[data-theme="dark"] .app-shell tr[data-payment-row]:nth-child(even) {
    --payment-row-background: #1a252a;
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-pagado {
    --payment-row-tint: rgba(53, 185, 155, 0.085);
    --payment-row-tint-hover: rgba(53, 185, 155, 0.14);
    --payment-row-accent: #35b99b;
    --payment-row-status: #8be8cf;
    --payment-status-background: rgba(53, 185, 155, 0.12);
    --payment-status-border: rgba(53, 185, 155, 0.34);
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-parcial {
    --payment-row-tint: rgba(155, 125, 224, 0.09);
    --payment-row-tint-hover: rgba(155, 125, 224, 0.15);
    --payment-row-accent: #9b7de0;
    --payment-row-status: #cdb9ff;
    --payment-status-background: rgba(155, 125, 224, 0.14);
    --payment-status-border: rgba(155, 125, 224, 0.38);
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-deuda {
    --payment-row-tint: rgba(212, 92, 104, 0.085);
    --payment-row-tint-hover: rgba(212, 92, 104, 0.145);
    --payment-row-accent: #c85461;
    --payment-row-status: #ffadb5;
    --payment-status-background: rgba(200, 84, 97, 0.12);
    --payment-status-border: rgba(200, 84, 97, 0.34);
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-sin-datos {
    --payment-row-tint: rgba(120, 144, 154, 0.025);
    --payment-row-tint-hover: rgba(120, 144, 154, 0.06);
    --payment-row-accent: #78909a;
    --payment-row-status: #ffffff;
    --payment-status-background: rgba(120, 144, 154, 0.12);
    --payment-status-border: rgba(120, 144, 154, 0.34);
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-out-of-terms {
    --payment-row-tint: rgba(214, 163, 71, 0.095);
    --payment-row-tint-hover: rgba(214, 163, 71, 0.155);
    --payment-row-accent: #d6a347;
    --payment-row-status: #f6d485;
    --payment-status-background: rgba(214, 163, 71, 0.12);
    --payment-status-border: rgba(214, 163, 71, 0.34);
}

html[data-theme="dark"] .app-shell tr[data-payment-row] td {
    border-bottom-color: #304249;
    background-color: var(--payment-row-background);
    background-image: linear-gradient(0deg, var(--payment-row-tint), var(--payment-row-tint));
    color: #ffffff;
    transition: background-color 160ms ease;
}

html[data-theme="dark"] .app-shell tr[data-payment-row]:hover td {
    background-color: var(--payment-row-hover);
    background-image: linear-gradient(0deg, var(--payment-row-tint-hover), var(--payment-row-tint-hover));
}

html[data-theme="dark"] .app-shell tr[data-payment-row].payment-out-of-terms td[data-col-key="fecha_pago"] {
    color: var(--payment-row-status);
    font-weight: 900;
}

html[data-theme="dark"] .app-shell tr[data-payment-row] .payment-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--payment-status-border);
    border-radius: 999px;
    background: var(--payment-status-background);
    color: var(--payment-row-status);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

html[data-theme="dark"] .app-shell tr[data-payment-row] .payment-status-badge::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--payment-row-accent);
    content: "";
    flex: 0 0 auto;
}

html[data-theme="dark"] .app-shell tr[data-payment-row] .payment-row-button,
html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-pagado .payment-row-button,
html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-parcial .payment-row-button,
html[data-theme="dark"] .app-shell tr[data-payment-row].payment-state-deuda .payment-row-button {
    color: var(--link-blue-dark) !important;
    font-weight: 900;
}

html[data-theme="dark"] .app-shell :is(.payment-modal-panel, .payment-detail-panel, .payment-editor-panel) {
    border-color: #5e737c;
    background: #1f2a2f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.gastos-detail-panel, .gastos-edit-panel) {
    border-color: #5e737c;
    background: #1f2a2f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-items-editor {
    border-color: #526b75;
    background: #172126;
}

html[data-theme="dark"] .app-shell .gastos-items-heading > .field-label-line,
html[data-theme="dark"] .app-shell .gastos-detail-items,
html[data-theme="dark"] .app-shell .gastos-detail-items-list :is(span, strong) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-items-balance {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-items-balance[data-state="error"],
html[data-theme="dark"] .app-shell .gastos-item-error {
    color: #ff8da8;
}

html[data-theme="dark"] .app-shell .gastos-items-balance[data-state="success"] {
    color: #7ee2a8;
}

html[data-theme="dark"] .app-shell .gastos-items-balance[data-state="legacy"] {
    color: #ffd76a;
}

html[data-theme="dark"] .app-shell .gastos-item-row input[readonly] {
    background: #26363d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-item-add {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-item-add:disabled {
    border-color: #526b75;
    background: #29383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .gastos-item-remove {
    border-color: #ff6d91;
    background: #172126;
    color: #ff8da8;
}

html[data-theme="dark"] .app-shell .record-modal-actions .gastos-cancel-button,
html[data-theme="dark"] .app-shell .record-modal-actions .gastos-cancel-button:hover,
html[data-theme="dark"] .app-shell .record-modal-actions .gastos-cancel-button:focus-visible {
    border-color: #9f1f3b;
    background: #9f1f3b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .record-modal-actions .button-danger,
html[data-theme="dark"] .app-shell .record-modal-actions .button-danger:hover,
html[data-theme="dark"] .app-shell .record-modal-actions .button-danger:focus-visible,
html[data-theme="dark"] .app-notice-modal .app-notice-actions .button-danger,
html[data-theme="dark"] .app-notice-modal .app-notice-actions .button-danger:hover,
html[data-theme="dark"] .app-notice-modal .app-notice-actions .button-danger:focus-visible {
    border-color: #9f1f3b;
    background: #9f1f3b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-cancel-button {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.gastos-detail-grid article, .gastos-preview-panel) {
    border-color: #5e737c;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-detail-grid :is(span, strong),
html[data-theme="dark"] .app-shell .gastos-preview-header strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-preview-header {
    border-bottom-color: #5e737c;
}

html[data-theme="dark"] .app-shell .gastos-pdf-preview {
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-pdf-preview .empty-state {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-image-preview {
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .gastos-preview-switcher {
    border-color: #526b75;
    background: rgba(23, 33, 38, 0.94);
}

html[data-theme="dark"] .app-shell .gastos-preview-selector {
    border-color: #526b75;
    background: #29383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-preview-selector[aria-pressed="true"] {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell :is(.payment-detail-grid article, .payment-line, .payment-preview-panel, .payment-editor-summary) {
    border-color: #5e737c;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article[data-payment-detail-status-card][data-payment-status="paid"] {
    border-color: #36d69b;
    background: #07543f;
    box-shadow: inset 6px 0 0 #36d69b;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article[data-payment-detail-status-card][data-payment-status="unpaid"] {
    border-color: #ff6684;
    background: #6b1d35;
    box-shadow: inset 6px 0 0 #ff6684;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article[data-payment-detail-status-card][data-payment-status]:is([data-payment-status="paid"], [data-payment-status="unpaid"]) :is(span, strong) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-detail-grid :is(span, strong),
html[data-theme="dark"] .app-shell .payment-line legend,
html[data-theme="dark"] .app-shell .payment-preview-header strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article:has([data-payment-detail-field="total"]) strong,
html[data-theme="dark"] .app-shell .payment-detail-grid article:has([data-payment-detail-field="fechaPago"]) strong {
    color: #9be7dd;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article:has([data-payment-detail-field="pagado"]) strong {
    color: #65dfbe;
}

html[data-theme="dark"] .app-shell .payment-detail-grid article:has([data-payment-detail-field="saldo"]) strong {
    color: #ff8b93;
}

html[data-theme="dark"] .app-shell .payment-movements-wrap,
html[data-theme="dark"] .app-shell .payment-movements-table {
    border-color: #5e737c;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-movements-table th {
    border-bottom-color: #425760;
    background: #2a383e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-movements-table td {
    border-bottom-color: #364a52;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-movements-table .payment-movement-row:hover td {
    background: #223239;
}

html[data-theme="dark"] .app-shell .payment-movements-table .payment-movement-row.is-selected td {
    border-top-color: #37e0df;
    border-bottom-color: #37e0df;
    background: #07545d;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .payment-movements-table .payment-movement-row.is-selected td:first-child {
    border-left-color: #37e0df;
    box-shadow: inset 6px 0 0 #37e0df;
}

html[data-theme="dark"] .app-shell .payment-movements-table .payment-movement-row.is-selected td:last-child {
    border-right-color: #37e0df;
}

html[data-theme="dark"] .app-shell .payment-movements-table .payment-movement-row.is-selected:hover td {
    background: #09636d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-pdf-preview {
    border-color: #5e737c;
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-pdf-preview .empty-state {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-file-selected {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-file-clear {
    border-color: rgba(255, 115, 125, 0.52);
    background: #172126;
    color: #ff8b93;
}

html[data-theme="dark"] .app-shell .payment-file-clear:hover {
    background: rgba(255, 115, 125, 0.16);
}

html[data-theme="dark"] .app-shell .entry-form .payment-receipt-heading .payment-file-clear,
html[data-theme="dark"] .app-shell .entry-form .payment-receipt-heading .payment-file-clear:hover,
html[data-theme="dark"] .app-shell .entry-form .payment-receipt-heading .payment-file-clear:focus-visible {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design:not([data-public-theme="dark"]) :is(.visual-intro h2, .visual-vehicles h2, .visual-models h2, .visual-rates h2, .visual-location h2, .urban-band h2, .urban-section-head h2, .urban-location h2, .map-arrival-card h1, .map-vehicles h2, .map-section-head h2, .direct-copy h1, .direct-lists h2, .direct-rates h2, .direct-location h2, .public-section-head h2, .public-contact-head h2) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design:not([data-public-theme="dark"]) :is(.visual-feature-grid article, .visual-rate-grid article, .visual-model-grid article, .map-arrival-card, .map-model-list article, .map-rate-grid article, .direct-card, .direct-model-list article, .direct-rate-list article, .public-blog-grid article, .public-blog-card, .public-blog-entry) {
    color: #000000;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design:not([data-public-theme="dark"]) :is(.urban-copy p, .map-arrival-card p, .direct-copy p, .public-blog-grid p, .public-blog-grid small, .public-blog-entry p) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview
    .public-template-urbana.public-design-urban:not([data-public-theme="dark"])
    .urban-blog
    :is(.public-section-head h2, .public-blog-grid p, .public-blog-grid small) {
    color: #000000 !important;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design.public-design-urban:not([data-public-theme="dark"]) .urban-location-copy :is(h2, p) {
    color: #ffffff !important;
}

html .app-shell .public-page-owner-preview .public-design.public-design-urban:not([data-public-theme="dark"]) .urban-rates .urban-section-head h2 {
    color: #000000 !important;
}

html .app-shell .public-page-owner-preview
    .public-template-urbana.public-design-urban:not([data-public-theme="dark"])
    .urban-rates
    :is(
        .public-calculation-mode label,
        .public-price-form label,
        .public-date-time-field,
        .field-label-line,
        .public-cyclic-field legend,
        .public-cyclic-field p,
        .public-cyclic-row-title,
        .public-cyclic-day
    ) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design:not([data-public-theme="dark"]) :is(.public-availability-card h3, .public-category-card-head strong) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design:not([data-public-theme="dark"]) :is(.public-availability-card p, .public-vehicle-category-grid p, .public-category-note) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design[data-public-theme="dark"] :is(h1, h2, h3, strong, dd, label) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design[data-public-theme="dark"] :is(p, small, .public-blog-grid p, .public-blog-grid small, .public-blog-entry p) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design[data-public-theme="dark"] .visual-location > div > p {
    color: #ffffff !important;
}

/* Keep the classic dark calculator preview isolated from the editor theme. */
.app-shell .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-price-form .public-price-grid :is(label, .public-date-time-field, .field-label-line) {
    color: #ffffff !important;
}

.app-shell .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] .public-price-form :is(.public-calculation-mode label, .public-cyclic-field legend, .public-cyclic-field p, .public-cyclic-row-title, .public-cyclic-day) {
    color: #ffffff !important;
}

.public-design .public-period-selector button:is(.is-active, [aria-pressed="true"]),
html[data-theme="dark"] .app-shell .public-page-owner-preview .public-design .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #f2c25f !important;
    background: #f2c25f !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.public-template-clasica .public-period-selector button:is(.is-active, [aria-pressed="true"]),
html[data-theme="dark"] .app-shell .public-page-owner-preview .public-template-clasica .public-period-selector button:is(.is-active, [aria-pressed="true"]) {
    border-color: #A06A45 !important;
    background: #A06A45 !important;
    color: #ffffff !important;
}

.public-template-clasica.public-design-visual:not([data-public-theme="dark"]) .visual-footer {
    background: linear-gradient(135deg, #5F7A4A 0%, #5F7A4A 48%, #A06A45 100%);
    color: #ffffff;
}

.public-template-clasica.public-design-visual[data-public-theme="dark"] .visual-footer {
    border-top-color: #A06A45;
    background:
        radial-gradient(circle at 92% 12%, rgba(95, 122, 74, 0.2), transparent 34%),
        #20150E;
    color: #ffffff;
}

.public-template-clasica.public-design-visual:not([data-public-theme="dark"])
    .visual-feature-grid
    .public-availability-card-spaces
    :is(h3, p, span, strong),
.public-template-clasica.public-design-visual:not([data-public-theme="dark"])
    .visual-feature-grid
    .public-availability-card-contact
    :is(h3, p) {
    color: #ffffff !important;
}

.public-template-clasica.public-design-visual:not([data-public-theme="dark"])
    .visual-feature-grid
    .public-availability-card-address
    :is(h3, p) {
    color: #000000 !important;
}

.public-template-clasica.public-design-visual[data-public-theme="dark"]
    .visual-feature-grid
    .public-availability-card
    :is(h3, p, span, strong) {
    color: #ffffff !important;
}

.public-template-clasica[data-public-theme="dark"] .visual-copy :is(h1, p) {
    color: #ffffff !important;
}

.public-template-clasica .public-price-detail table :is(th, td).public-discount-column {
    border-color: #A06A45;
    background: #5F7A4A !important;
    color: #ffffff !important;
}

.public-template-clasica .public-price-detail table tr.is-total .public-discount-column {
    background: #A06A45 !important;
    color: #ffffff !important;
}

.public-template-clasica .public-price-grid .public-vehicle-info-trigger:hover,
.public-template-clasica .public-price-grid .public-vehicle-info-trigger:focus-visible {
    background: rgba(95, 122, 74, 0.2);
}

.public-template-clasica :is(
    .public-section-head p,
    .public-blog-grid span,
    .public-blog-grid p,
    .public-blog-grid small,
    .public-blog-detail-head > p,
    .public-design-banner p,
    .public-time24[aria-disabled="true"]
) {
    opacity: 1;
}

.public-template-clasica:not([data-public-theme="dark"]) .public-config-needed {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000;
}

.public-template-clasica:not([data-public-theme="dark"]) .public-config-needed :is(span, strong, p),
.public-template-clasica:not([data-public-theme="dark"]) .public-discount-card strong,
.public-template-clasica:not([data-public-theme="dark"]) .public-availability-warning span {
    color: #000000 !important;
    opacity: 1;
}

.public-template-clasica .public-config-needed a {
    border: 1px solid #ffffff;
    background: #5F7A4A;
    color: #ffffff !important;
}

.public-template-clasica:not([data-public-theme="dark"]) :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-vehicle-model-popover,
    .public-vehicle-model-popover article,
    .public-contact-form .country-picker-menu,
    .public-contact-form .country-picker-option
) {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000 !important;
}

/* Con el panel en modo oscuro, la regla genérica de inputs oscuros del
   app-shell le gana a la de arriba por especificidad; este refuerzo mantiene
   blancos los campos de la preview clara (Vehículo, Ingreso, Egreso). */
html[data-theme="dark"] .app-shell .public-template-clasica:not([data-public-theme="dark"]) :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select
) {
    border-color: #5F7A4A;
    background: #ffffff;
    color: #000000 !important;
    color-scheme: light;
}

html[data-theme="dark"] .app-shell .public-template-clasica:not([data-public-theme="dark"]) .public-price-grid select option {
    background: #ffffff;
    color: #000000 !important;
}

.public-template-clasica:not([data-public-theme="dark"]) :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-clasica:not([data-public-theme="dark"])
    .public-time24-picker
    [data-public-time24-display].is-placeholder {
    color: #000000 !important;
    opacity: 1;
}

.public-template-clasica:not([data-public-theme="dark"]) .public-time24 select option,
.public-template-clasica:not([data-public-theme="dark"]) .public-vehicle-model-popover article :is(strong, span),
.public-template-clasica:not([data-public-theme="dark"]) .public-vehicle-model-empty {
    background: #ffffff;
    color: #000000 !important;
}

.public-template-clasica:not([data-public-theme="dark"]) .public-contact-form .country-picker-option:hover,
.public-template-clasica:not([data-public-theme="dark"]) .public-contact-form .country-picker-option.is-selected {
    border-color: #5F7A4A;
    background: rgba(95, 122, 74, 0.2);
    color: #000000 !important;
}

.public-template-clasica:not([data-public-theme="dark"])
    .public-calculation-facts
    article.public-discount-fact {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #ffffff;
    color: #000000;
    box-shadow: inset 4px 0 0 #5F7A4A;
}

.public-template-clasica:not([data-public-theme="dark"])
    .public-calculation-facts
    article.public-discount-total-fact {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #ffffff;
    color: #000000;
    box-shadow: inset 4px 0 0 #A06A45;
}

.public-template-clasica:not([data-public-theme="dark"]) :is(
    .public-blog-card:hover .public-blog-card-more,
    .public-blog-card:focus-visible .public-blog-card-more,
    .public-blog-read-more:hover,
    .public-blog-read-more:focus-visible
) {
    color: #000000;
}

.public-template-clasica[data-public-theme="dark"] .public-config-needed {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-vehicle-model-popover,
    .public-contact-form .country-picker-menu,
    .public-contact-form .country-picker-option
) {
    border-color: #A06A45;
    background: #20150E;
    color: #ffffff !important;
}

.public-template-clasica[data-public-theme="dark"] .public-vehicle-model-popover article {
    border-color: #5F7A4A;
    background: #212B1A;
    color: #ffffff;
}

.public-template-clasica[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-clasica[data-public-theme="dark"]
    .public-time24-picker
    [data-public-time24-display].is-placeholder {
    color: #ffffff !important;
    opacity: 1;
}

.public-template-clasica[data-public-theme="dark"] .public-time24 select option {
    background: #20150E;
    color: #ffffff !important;
}

.public-template-clasica[data-public-theme="dark"] .public-contact-form .country-picker-option:hover,
.public-template-clasica[data-public-theme="dark"] .public-contact-form .country-picker-option.is-selected {
    border-color: #A06A45;
    background: rgba(160, 106, 69, 0.2);
    color: #ffffff !important;
}

.public-template-clasica[data-public-theme="dark"]
    .public-calculation-facts
    article.public-discount-fact {
    border-color: #5F7A4A;
    background:
        linear-gradient(rgba(95, 122, 74, 0.2), rgba(95, 122, 74, 0.2)),
        #212B1A;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #5F7A4A;
}

.public-template-clasica[data-public-theme="dark"]
    .public-calculation-facts
    article.public-discount-total-fact {
    border-color: #A06A45;
    background:
        linear-gradient(rgba(160, 106, 69, 0.2), rgba(160, 106, 69, 0.2)),
        #382518;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #A06A45;
}

.public-template-clasica[data-public-theme="dark"] :is(
    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small,
    label,
    legend,
    dt,
    dd,
    a,
    button,
    input,
    select,
    textarea,
    option,
    th,
    td
) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-template-clasica:not([data-public-theme="dark"]) :is(
    .visual-intro h2,
    .visual-vehicles h2,
    .visual-models h2,
    .visual-rates h2,
    .visual-location h2,
    .visual-location > div > p,
    .public-section-head h2,
    .public-blog-grid span,
    .public-blog-grid strong,
    .public-blog-grid p,
    .public-blog-grid small,
    .public-reference-card p,
    .public-reference-card strong,
    .public-reference-location,
    .public-category-card-head strong,
    .public-category-price,
    .public-vehicle-category-grid p,
    .public-category-note,
    .public-price-form label,
    .public-date-time-field,
    .field-label-line
) {
    color: #000000 !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-template-clasica:not([data-public-theme="dark"]) :is(
    .public-sticky-nav,
    .public-sticky-nav a,
    .public-sticky-nav strong,
    .visual-copy h1,
    .visual-copy p,
    .visual-primary,
    .visual-secondary,
    .public-availability-card-spaces h3,
    .public-availability-card-spaces p,
    .public-availability-card-spaces span,
    .public-availability-card-spaces strong,
    .public-availability-card-contact h3,
    .public-availability-card-contact p,
    .visual-banner h2,
    .visual-banner p,
    .visual-contact h2,
    .visual-contact label,
    .visual-footer,
    .visual-footer a,
    .visual-footer strong,
    .visual-footer p
) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] :is(
    h1,
    h2,
    h3,
    p,
    small,
    strong,
    dd,
    dt,
    label,
    legend,
    .field-label-line,
    .public-reference-location,
    .public-category-price,
    .public-category-note,
    .public-time24-badge,
    .public-selected-vehicle-models
) {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .public-page-owner-preview .public-template-clasica[data-public-theme="dark"] :is(
    .public-sticky-links a,
    .public-sticky-socials a,
    .public-sticky-cta,
    .public-theme-toggle,
    .visual-primary,
    .visual-secondary,
    .public-banner-primary,
    .public-banner-secondary,
    .public-contact-submit,
    .public-period-selector button,
    .public-price-grid button,
    .public-reference-control,
    .public-blog-carousel-button,
    .public-footer-column a,
    .public-footer-socials a
) {
    color: #ffffff !important;
}

/* Keep the Marte editor preview compact without changing the published page. */
.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.58fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: center;
    padding: clamp(34px, 4vw, 60px) 0;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-status {
    min-height: 0;
    gap: 12px;
    padding: clamp(24px, 2.4vw, 30px);
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-status .public-category-price-panel {
    gap: 10px;
    margin-top: 4px;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .public-period-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .public-period-selector button {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-status-rate-list article {
    grid-template-columns: minmax(96px, 0.62fr) minmax(140px, 1fr);
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-status-rate-list article strong {
    display: block;
    width: 100%;
    min-width: 0;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-status-rate-list article strong b {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    white-space: nowrap;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-model-info {
    display: inline-grid;
    width: 1.2em;
    min-width: 1.2em;
    height: 1.2em;
    min-height: 1.2em;
    padding: 0;
    border: 1px solid rgba(247, 207, 114, 0.72);
    border-radius: 999px;
    background: rgba(247, 207, 114, 0.18);
    color: #f7cf72;
    box-shadow: none;
    font: inherit;
    font-size: 0.8em;
    line-height: 1;
}

.public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-model-info[aria-expanded="true"] {
    background: #f7cf72;
    color: #000000;
}

@media (max-width: 1120px) {
    .public-page-builder-parking .public-page-owner-preview .public-design-urban .urban-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .public-page-builder-parking .public-page-owner-preview .public-design-urban .public-period-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .account-settings-form,
    .account-fiscal-row {
        grid-template-columns: 1fr;
    }

    .account-settings-form .span-2,
    .account-fiscal-row .span-2 {
        grid-column: auto;
    }

    .account-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .legal-document {
        max-width: none;
        padding-top: calc(var(--landing-nav-space) + 28px);
    }

    .legal-index ol {
        grid-template-columns: 1fr;
    }
}

/* Final cascade for the landing-aligned module shell */
html[data-theme="dark"] .app-shell {
    background: linear-gradient(180deg, #13282b 0%, #0f1416 42%, #151a1d 100%);
}

html[data-theme="dark"] .app-shell .content {
    background: transparent;
}

html[data-theme="dark"] .app-shell .topbar {
    border-bottom-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .topbar h1 {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell :is(.topbar .parking-title-lead, .topbar .year-form label, .topbar .month-form label) {
    color: var(--muted);
}

html[data-theme="dark"] .app-shell :is(.topbar .year-form, .topbar .month-form) {
    border-color: var(--line);
    background: rgba(32, 40, 44, 0.86);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .app-shell .topbar-parking-logo {
    border: 0;
    background: none;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .topbar select {
    border-color: var(--line-strong);
    background: #121a1e;
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .parking-title-name > span {
    border-bottom-color: rgba(196, 224, 226, 0.35);
}

html[data-theme="dark"] .app-shell .parking-switch-option.is-active {
    border-color: rgba(39, 193, 207, 0.45);
    background: rgba(39, 193, 207, 0.12);
}

html[data-theme="dark"] .app-shell .parking-switch-option-badge {
    background: rgba(39, 193, 207, 0.18);
    color: #7ed9df;
}

html[data-theme="dark"] .app-shell :is(.summary-band, .module-hero, .panel, .kpi-card, .module-card) {
    border-color: rgba(196, 224, 226, 0.2);
    background: linear-gradient(180deg, #172124 0%, #12191c 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

/* Distribución principal: superficies y textos legibles en modo oscuro. */
html[data-theme="dark"] .app-shell .bar-row {
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .app-shell .bar-row .bar-label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .bar-row .bar-value {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .bar-row .bar-value small {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .bar-track {
    border-color: var(--line);
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .gastos-distribution-panel .gastos-distribution-percentage {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

html[data-theme="dark"] .app-shell :is(.module-tabs, .module-control-row .year-form, .module-control-row .month-form, .summary-filter-form label) {
    background: rgba(32, 40, 44, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .app-shell :is(
    .gastos-distribution-filter-dropdown > summary,
    .gastos-distribution-filter-popover,
    .gastos-distribution-filter-field > select
) {
    border-color: rgba(196, 224, 226, 0.2);
    background: #182023;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-summary-copy strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-form .gastos-distribution-filter-card {
    border-color: rgba(196, 224, 226, 0.2);
    background: rgba(32, 40, 44, 0.78);
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-form .gastos-distribution-filter-card.is-selected {
    border-color: rgba(34, 211, 238, 0.52);
    background: rgba(0, 122, 133, 0.23);
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-form .gastos-distribution-filter-card.is-mantenimiento.is-selected {
    border-color: rgba(167, 139, 250, 0.66);
    background: rgba(124, 58, 237, 0.23);
}

html[data-theme="dark"] .app-shell .gastos-distribution-filter-form .gastos-distribution-filter-card.is-mantenimiento-estimado.is-selected {
    border-color: rgba(251, 191, 36, 0.68);
    background: rgba(217, 119, 6, 0.24);
}

.availability-kpi-panel:not(.gastos-kpi-panel) {
    width: min(1080px, calc(100vw - 32px));
}

.availability-kpi-panel.report-kpi-panel {
    width: min(1180px, calc(100vw - 32px));
}

.record-modal.report-kpi-modal {
    z-index: 130;
}

.availability-kpi-panel.is-finance-summary {
    width: min(1240px, calc(100vw - 32px));
}

.availability-kpi-panel.is-parking-config-overview {
    width: min(1380px, calc(100vw - 32px));
}

.availability-kpi-panel.is-parking-contracts {
    width: min(1380px, calc(100vw - 32px));
}

html[data-theme="dark"] .app-shell .parking-contracts-filter-form > label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .parking-contract-entry-filter > .field-label-line {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .parking-contract-filter-button {
    border-color: var(--line-strong);
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .parking-contract-filter-button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button:hover,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-submit-actions > .parking-registration-contract-pdf-button:focus-visible {
    color: #ffffff;
}

@media (min-width: 1281px) {
    .app-shell .availability-kpi-panel.report-kpi-panel {
        width: min(1180px, calc(100vw - var(--active-sidebar-width) - 48px));
    }

    .app-shell .availability-kpi-panel.is-finance-summary {
        width: min(1240px, calc(100vw - var(--active-sidebar-width) - 48px));
    }

    .app-shell .availability-kpi-panel.is-parking-config-overview {
        width: min(1380px, calc(100vw - var(--active-sidebar-width) - 48px));
    }

    .app-shell .availability-kpi-panel.is-parking-contracts {
        width: min(1380px, calc(100vw - var(--active-sidebar-width) - 48px));
    }
}

.availability-summary-card.is-positive strong,
.availability-summary-table td.is-positive {
    color: var(--positive);
}

.availability-summary-card.is-danger strong,
.availability-summary-table td.is-danger {
    color: var(--danger);
}

.availability-summary-card.is-warning strong,
.availability-summary-table td.is-warning {
    color: #9a640e;
}

.availability-percent-row {
    min-height: 68px;
    padding: 12px 14px;
}

.availability-percent-label span {
    font-size: 15px;
}

.availability-percent-label small {
    font-size: 13px;
    line-height: 1.3;
}

.availability-percent-track {
    position: relative;
    height: 22px;
}

.availability-percent-track .availability-percent-fill {
    position: absolute;
    inset: 0 auto 0 0;
}

.availability-percent-track-value {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #000000;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

.availability-percent-value strong {
    font-size: 21px;
    font-weight: 900;
}

.availability-delta {
    padding: 5px 9px;
    font-size: 12px;
}

.availability-summary-table-wrap {
    border-radius: 10px;
}

.availability-summary-table {
    min-width: 760px;
}

.availability-summary-table th,
.availability-summary-table td {
    font-variant-numeric: tabular-nums;
}

.availability-summary-table td.is-number,
.availability-summary-table th.is-number {
    text-align: right;
}

html[data-theme="dark"] .app-shell .availability-kpi-panel {
    border-color: #516972;
    background: linear-gradient(155deg, #1d2d33 0%, #162126 62%, #121b1f 100%);
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] .app-shell .report-kpi-contact-link {
    color: var(--link-blue-dark);
}

html[data-theme="dark"] .app-shell .availability-kpi-panel .record-modal-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(174, 207, 214, 0.2);
}

html[data-theme="dark"] .app-shell .availability-summary-card,
html[data-theme="dark"] .app-shell .availability-kpi-insight {
    border-color: #49626c;
    background: linear-gradient(145deg, #1d2c32 0%, #172126 100%);
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-primary {
    border-color: #35aeba;
    background: linear-gradient(135deg, rgba(13, 139, 151, 0.29) 0%, #172126 76%);
    box-shadow: inset 4px 0 0 #45c9d1;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-positive {
    border-color: rgba(101, 223, 190, 0.42);
    background: linear-gradient(145deg, rgba(43, 151, 122, 0.17), #172126 75%);
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-danger {
    border-color: rgba(255, 127, 144, 0.45);
    background: linear-gradient(145deg, rgba(188, 61, 82, 0.18), #172126 75%);
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-primary.is-positive {
    box-shadow: inset 4px 0 0 #65dfbe;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-primary.is-danger {
    box-shadow: inset 4px 0 0 #ff7f90;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-primary.is-neutral {
    box-shadow: inset 4px 0 0 #b8c8cd;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-warning {
    border-color: rgba(246, 190, 90, 0.45);
    background: linear-gradient(145deg, rgba(177, 116, 24, 0.18), #172126 75%);
}

html[data-theme="dark"] .app-shell .availability-summary-card > span,
html[data-theme="dark"] .app-shell .availability-kpi-insight > span {
    color: #ffffff !important;
    font-size: 13px;
}

html[data-theme="dark"] .app-shell .availability-summary-card strong,
html[data-theme="dark"] .app-shell .availability-kpi-insight strong {
    color: #ffffff;
    font-size: 24px;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-positive strong {
    color: #82e8cd;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-danger strong {
    color: #ff9eaa;
}

html[data-theme="dark"] .app-shell .availability-summary-card.is-warning strong {
    color: #ffd485;
}

html[data-theme="dark"] .app-shell .availability-summary-card small,
html[data-theme="dark"] .app-shell .availability-kpi-insight small {
    color: #ffffff !important;
    font-size: 13px;
}

html[data-theme="dark"] .app-shell .report-kpi-summary .availability-summary-card > span {
    font-size: clamp(18px, 2vw, 24px);
}

html[data-theme="dark"] .app-shell .report-kpi-summary .availability-summary-card > strong {
    font-size: clamp(24px, 2.5vw, 30px);
}

html[data-theme="dark"] .app-shell .availability-percent-row {
    border-color: #48616a;
    background: linear-gradient(90deg, #19272c 0%, #142024 100%);
}

html[data-theme="dark"] .app-shell .availability-percent-label span {
    color: #ffffff !important;
    font-size: 15px;
}

html[data-theme="dark"] .app-shell .availability-percent-label small {
    color: #ffffff !important;
    font-size: 13px;
}

html[data-theme="dark"] .app-shell .availability-percent-track {
    border: 1px solid #3e5963;
    background: #0a1418;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] .app-shell .availability-percent-track .availability-percent-fill {
    background: linear-gradient(90deg, #087f8e 0%, #17a8ad 54%, #55d8bd 100%);
    box-shadow: 0 0 14px rgba(49, 198, 190, 0.2);
}

html[data-theme="dark"] .app-shell .availability-percent-track-value {
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

html[data-theme="dark"] .app-shell .availability-percent-value strong {
    color: #8ce8e1 !important;
    font-size: 22px;
}

html[data-theme="dark"] .app-shell .availability-delta.is-up {
    border: 1px solid rgba(52, 211, 153, 0.38);
    background: rgba(52, 211, 153, 0.16);
    color: #95f1bd !important;
}

html[data-theme="dark"] .app-shell .availability-delta.is-down {
    border: 1px solid rgba(251, 113, 133, 0.4);
    background: rgba(251, 113, 133, 0.16);
    color: #ffabb7 !important;
}

html[data-theme="dark"] .app-shell .availability-delta.is-flat {
    border: 1px solid rgba(166, 185, 193, 0.34);
    background: rgba(148, 163, 184, 0.16);
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .availability-summary-table-wrap {
    border-color: #49626c;
    background: #121c20;
}

html[data-theme="dark"] .app-shell .availability-summary-table th {
    border-bottom-color: #526b75;
    background: #293b42;
    color: #ffffff;
    font-size: 12px;
}

html[data-theme="dark"] .app-shell .availability-summary-table td {
    border-bottom-color: #344b54;
    background: #172329;
    color: #ffffff;
    font-size: 15px;
}

html[data-theme="dark"] .app-shell .availability-summary-table tbody tr:nth-child(even) td {
    background: #1a292f;
}

html[data-theme="dark"] .app-shell .availability-summary-table tbody tr:hover td {
    background: #21353d;
}

html[data-theme="dark"] .app-shell .availability-kpi-panel.is-parking-config-overview .availability-summary-card > span,
html[data-theme="dark"] .app-shell .availability-kpi-panel.is-parking-config-overview .availability-kpi-insight > span,
html[data-theme="dark"] .app-shell .availability-kpi-panel.is-parking-config-overview .availability-summary-table th {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .availability-summary-table td.is-positive {
    color: #82e8cd;
}

html[data-theme="dark"] .app-shell .availability-summary-table td.is-danger {
    color: #ff9eaa;
}

html[data-theme="dark"] .app-shell .availability-summary-table td.is-warning {
    color: #ffd485;
}

/* Resumen: jerarquía temporal sobria y colores financieros reservados para los importes. */
html[data-theme="dark"] .app-shell .summary-month-table th {
    border-bottom-color: #3b515a;
    background: #26363d;
    color: #ffffff;
    font-size: 13px;
}

html[data-theme="dark"] .app-shell .summary-month-table td {
    background: #172329;
    border-bottom-color: #2d424a;
    color: #ffffff;
    font-size: 15px;
}

html[data-theme="dark"] .app-shell .summary-month-row {
    --summary-row-bg: #17242a;
    --summary-row-fg: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-past {
    --summary-row-bg: #241e22;
    --summary-row-fg: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-current {
    --summary-row-bg: #173038;
    --summary-row-fg: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-past td,
html[data-theme="dark"] .app-shell .summary-month-row.month-state-current td,
html[data-theme="dark"] .app-shell .summary-month-row.month-state-future td {
    background: var(--summary-row-bg);
    color: var(--summary-row-fg);
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-past td:first-child {
    border-left: 4px solid #a95e6a;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-current td:first-child {
    border-left: 4px solid #36aeb8;
}

html[data-theme="dark"] .app-shell .summary-month-row td.summary-paid-cell {
    background:
        linear-gradient(rgba(43, 132, 108, 0.14), rgba(43, 132, 108, 0.14)),
        var(--summary-row-bg);
    color: #7fd0bb;
}

html[data-theme="dark"] .app-shell .summary-month-row td.summary-missing-cell {
    background:
        linear-gradient(rgba(170, 69, 88, 0.13), rgba(170, 69, 88, 0.13)),
        var(--summary-row-bg);
    color: #e493a1;
}

html[data-theme="dark"] .app-shell .summary-month-row td.summary-net-cell.summary-net-positive {
    color: #7fd0bb;
}

html[data-theme="dark"] .app-shell .summary-month-row td.summary-net-cell.summary-net-danger {
    color: #e493a1;
}

html[data-theme="dark"] .app-shell .summary-month-row td.summary-net-cell.summary-net-neutral {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-row-detail-button {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-past .summary-row-detail-button {
    color: #d9909c;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-current .summary-row-detail-button {
    color: #82d3d8;
}

html[data-theme="dark"] .app-shell .summary-month-row.month-state-future .summary-row-detail-button {
    color: #77bdd8;
}

html[data-theme="dark"] .app-shell .summary-row-detail-button::after {
    opacity: 0.72;
}

html[data-theme="dark"] .app-shell .availability-summary-row-grid .availability-summary-card strong {
    font-size: 18px;
}

html[data-theme="dark"] .app-shell .summary-month-row[data-summary-row-detail]:hover td,
html[data-theme="dark"] .app-shell .summary-month-row[data-summary-row-detail]:focus-within td {
    box-shadow: inset 0 1px 0 rgba(94, 206, 214, 0.42), inset 0 -1px 0 rgba(94, 206, 214, 0.42);
}

html[data-theme="dark"] .app-shell .summary-row-detail-button:focus-visible {
    outline-color: rgba(85, 216, 223, 0.52);
}

html[data-theme="dark"] .app-shell .summary-tariff-panel,
html[data-theme="dark"] .app-shell .summary-tariff-panel > .collapsible-summary {
    border-color: #435d67;
    background: #172329;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel[open] > .collapsible-summary {
    border-color: #398c98;
    background: #193138;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-past td,
html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-past.tariff-increase-row td {
    background: #321f26;
    color: #f2cbd2;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current td,
html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current.tariff-increase-row td {
    background: #19363c;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current td:first-child {
    border-left-color: #45c9d1;
    color: #9aebef;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-increase-row:not(.tariff-month-past):not(.tariff-month-current) td {
    background: rgba(174, 112, 24, 0.22);
    color: #ffe0a0;
}

/* Resumen oscuro: cada estado del mes y cada movimiento con su propio color:
   rojo = mes vencido, ámbar = mes en curso, cian = mes futuro; verde = cobrado,
   azul = saldo pendiente, naranja = gastado, celeste = enlaces de detalle. */
html[data-theme="dark"] .app-shell #resumen-registros,
html[data-theme="dark"] .app-shell .summary-tariff-panel {
    border-color: #435d67;
    background: #172329;
}

html[data-theme="dark"] .app-shell #resumen-registros > .table-wrap,
html[data-theme="dark"] .app-shell .summary-tariff-panel > .table-wrap,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-table,
html[data-theme="dark"] .app-shell .summary-tariff-panel table {
    border-color: #435d67;
    background: #11191d;
}

html[data-theme="dark"] .app-shell #resumen-registros:not([open]) > .collapsible-summary,
html[data-theme="dark"] .app-shell .summary-tariff-panel:not([open]) > .collapsible-summary {
    border-color: #48606a;
    background: #27353b;
}

html[data-theme="dark"] .app-shell #resumen-registros[open] > .collapsible-summary,
html[data-theme="dark"] .app-shell .summary-tariff-panel[open] > .collapsible-summary {
    border-color: #398c98;
    background: #193138;
    box-shadow: inset 4px 0 0 #45c9d1;
}

html[data-theme="dark"] .app-shell #resumen-registros > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .summary-tariff-panel > .collapsible-summary .collapsible-heading {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros > .collapsible-summary .collapsible-indicator,
html[data-theme="dark"] .app-shell .summary-tariff-panel > .collapsible-summary .collapsible-indicator {
    border-color: #526b75;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros > .collapsible-summary:focus-visible,
html[data-theme="dark"] .app-shell .summary-tariff-panel > .collapsible-summary:focus-visible {
    outline-color: #C084FC;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-period-filter-form label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-period-filter-form select {
    border-color: #5d7680;
    background: #10191d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-period-filter-form select:focus,
html[data-theme="dark"] .app-shell #resumen-registros .summary-period-filter-form select:focus-visible {
    border-color: #C084FC;
    outline-color: #C084FC;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-table th,
html[data-theme="dark"] .app-shell .summary-tariff-panel th {
    border-bottom-color: #4b626c;
    background: #26363d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-table td,
html[data-theme="dark"] .app-shell .summary-tariff-panel td {
    border-bottom-color: #344851;
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row {
    --summary-row-bg: #172126;
    --summary-row-fg: #ffffff;
    --summary-row-line: #2c3d46;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-past {
    --summary-row-bg: #3b1220;
    --summary-row-fg: #ff9fb0;
    --summary-row-line: #5e2130;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-current {
    --summary-row-bg: #3d2e06;
    --summary-row-fg: #ffd166;
    --summary-row-line: #6b5410;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-future {
    --summary-row-bg: #0c2e3a;
    --summary-row-fg: #9fdcf2;
    --summary-row-line: #164a5c;
}

/* Vista de un mes puntual: rojo = vencido, ámbar = pago parcial, verde =
   pagado o cancelado (deuda saldada), naranja = pendiente por vencer según el
   aviso de Notificaciones; un pendiente lejano queda neutro. */
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-unpaid {
    --summary-row-bg: #3b1220;
    --summary-row-fg: #ff9fb0;
    --summary-row-line: #5e2130;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-partial {
    --summary-row-bg: #3d2e06;
    --summary-row-fg: #ffd166;
    --summary-row-line: #6b5410;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-paid {
    --summary-row-bg: #0e3424;
    --summary-row-fg: #93eec2;
    --summary-row-line: #1c503a;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-due-soon {
    --summary-row-bg: #44200a;
    --summary-row-fg: #ffb181;
    --summary-row-line: #6e3a16;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-past td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-current td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-future td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-unpaid td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-partial td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-paid td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-due-soon td {
    background: var(--summary-row-bg);
    color: var(--summary-row-fg);
    border-bottom-color: var(--summary-row-line);
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-past td:first-child {
    border-left: 4px solid #f43f5e;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-current td:first-child {
    border-left: 4px solid #f5a623;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-future td:first-child {
    border-left: 4px solid #22a3c9;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-unpaid td:first-child {
    border-left: 4px solid #f43f5e;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-partial td:first-child {
    border-left: 4px solid #f5a623;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-paid td:first-child {
    border-left: 4px solid #2fbd7d;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-due-soon td:first-child {
    border-left: 4px solid #ff7f3f;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td.summary-paid-cell {
    background: #0d4030;
    color: #8ef0bf;
}

/* Gastado en naranja: no se confunde con el rojo de un mes vencido. */
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td.summary-missing-cell {
    background: #4a2208;
    color: #ffab76;
}

/* El saldo pendiente conserva su bloque azul: pendiente no es vencido. */
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td[data-col-key="saldo"].summary-missing-cell {
    border-inline-start: 3px solid #66a8ff;
    background: #17335e;
    color: #bcd9ff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td.summary-net-cell.summary-net-positive {
    color: #7ef0b0;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td.summary-net-cell.summary-net-danger {
    color: #ffaab9;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row td.summary-net-cell.summary-net-neutral {
    color: var(--summary-row-fg);
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-past .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-current .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-future .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-unpaid .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-partial .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-paid .summary-row-detail-button,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row.month-state-due-soon .summary-row-detail-button {
    color: #7cc8ff;
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row[data-summary-row-detail]:hover td,
html[data-theme="dark"] .app-shell #resumen-registros .summary-month-row[data-summary-row-detail]:focus-within td {
    box-shadow: inset 0 1px 0 rgba(94, 206, 214, 0.42), inset 0 -1px 0 rgba(94, 206, 214, 0.42);
}

html[data-theme="dark"] .app-shell #resumen-registros .summary-row-detail-button:focus-visible {
    outline-color: #C084FC;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row td {
    background: #172126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-past td,
html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-past.tariff-increase-row td {
    border-bottom-color: #5e2130;
    background: #3b1220;
    color: #ff9fb0;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current td,
html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current.tariff-increase-row td {
    border-bottom-color: #6b5410;
    background: #3d2e06;
    color: #ffd166;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-current td:first-child {
    border-left: 4px solid #f5a623;
    color: #ffd166;
}

html[data-theme="dark"] .app-shell .summary-tariff-panel .tariff-preview-row.tariff-month-future.tariff-increase-row:not(.tariff-month-past):not(.tariff-month-current) td {
    border-bottom-color: #287052;
    background: #0e4734;
    color: #9df0c5;
}

html[data-theme="dark"] .app-shell .report-message-header .button-neutral {
    border-color: #5d7882;
    background: #122126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .report-message-header .button-neutral:hover,
html[data-theme="dark"] .app-shell .report-message-header .button-neutral:focus-visible {
    border-color: #C084FC;
    background: #17363c;
    color: #ffffff;
    outline: 2px solid rgba(105, 210, 218, 0.25);
    outline-offset: 2px;
}

html[data-theme="dark"] .app-shell .report-message-contact-form {
    padding: 16px;
    border: 1px solid #3f5963;
    border-radius: 10px;
    background: #10191d;
    box-shadow: inset 4px 0 0 rgba(53, 185, 195, 0.72);
}

html[data-theme="dark"] .app-shell .report-message-contact-form label {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .report-message-preset-row {
    padding: 12px;
    border: 1px solid #3f5963;
    border-radius: 9px;
    background: #122126;
}

html[data-theme="dark"] .app-shell .report-message-preset-current > span {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .report-message-preset-current strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .report-message-helper {
    margin: 12px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(77, 183, 194, 0.3);
    border-radius: 8px;
    background: rgba(24, 77, 84, 0.22);
    color: #ffffff;
    font-size: 13px;
}

html[data-theme="dark"] .app-shell .report-message-name-choice {
    border-color: #3f5963;
    background: #122126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .report-message-panel .calculation-summary {
    border-color: #47616b;
    background: #152126;
    box-shadow: inset 4px 0 0 #28b99f;
}

html[data-theme="dark"] .app-shell .report-message-panel .calculation-summary strong {
    color: #7fe2cc;
    font-size: 20px;
}

html[data-theme="dark"] .app-shell .report-message-panel .calculation-summary pre {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .report-message-panel .message-box {
    border-color: #48616b;
    background: #0c1519;
    color: #ffffff;
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .app-shell .report-message-panel .actions-row .button-secondary {
    border: 1px solid #9e7538;
    background: rgba(217, 155, 54, 0.14);
    color: #ffd18a;
}

html[data-theme="dark"] .app-shell .report-message-panel .actions-row .button-secondary:hover,
html[data-theme="dark"] .app-shell .report-message-panel .actions-row .button-secondary:focus-visible {
    border-color: #d99b36;
    background: rgba(217, 155, 54, 0.24);
    color: #ffe5af;
    outline: 2px solid rgba(217, 155, 54, 0.22);
    outline-offset: 2px;
}

html[data-theme="dark"] .app-shell .contact-message-panel {
    border-color: #55717c;
    background: linear-gradient(155deg, #1d2d33 0%, #141e22 100%);
    box-shadow: 0 30px 82px rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .app-shell .contact-message-panel .record-modal-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(174, 207, 214, 0.22);
}

html[data-theme="dark"] .app-shell .contact-message-tabs {
    padding: 7px;
    border: 1px solid #405a64;
    border-radius: 10px;
    background: #0e181c;
}

html[data-theme="dark"] .app-shell .contact-message-tab {
    border-color: #405a64;
    background: #17252a;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .contact-message-tab:hover,
html[data-theme="dark"] .app-shell .contact-message-tab:focus-visible {
    border-color: #65cbd3;
    background: #1b343a;
    color: #ffffff;
    outline: 2px solid rgba(101, 203, 211, 0.22);
    outline-offset: 1px;
}

html[data-theme="dark"] .app-shell .contact-message-tab.is-active {
    border-color: #70d8df;
    background: linear-gradient(135deg, #7C3AED 0%, #056874 100%);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .app-shell .contact-message-pane.is-active {
    gap: 12px;
    padding: 18px;
    border: 1px solid #405b65;
    border-radius: 10px;
    background: #152126;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-message-pane-header > span {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.015em;
}

html[data-theme="dark"] .app-shell .contact-message-period-field,
html[data-theme="dark"] .app-shell .contact-message-category-field {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-shell .contact-message-period-field select,
html[data-theme="dark"] .app-shell .contact-message-category-field select,
html[data-theme="dark"] .app-shell .contact-message-pane textarea {
    border-color: #526c76;
    background: #0d171b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-message-pane textarea {
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.3);
    caret-color: #7be1e7;
}

html[data-theme="dark"] .app-shell .contact-message-pane textarea:focus {
    border-color: #65cbd3;
    outline-color: rgba(101, 203, 211, 0.24);
}

html[data-theme="dark"] .app-shell .contact-message-example {
    border-color: #48636d;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-message-tags {
    padding: 12px;
    border: 1px solid #3d5660;
    border-radius: 9px;
    background: #101a1f;
}

html[data-theme="dark"] .app-shell .contact-message-tags-label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-message-tag {
    border-color: #3f737b;
    background: #143037;
    color: #91e2e7;
}

html[data-theme="dark"] .app-shell .contact-message-tag:hover,
html[data-theme="dark"] .app-shell .contact-message-tag:focus-visible {
    border-color: #7be1e7;
    background: #1a464d;
    color: #ffffff;
    outline: 2px solid rgba(123, 225, 231, 0.2);
    outline-offset: 1px;
}

html[data-theme="dark"] .app-shell .contact-message-modal .record-modal-actions {
    padding-top: 14px;
    border-top: 1px solid rgba(174, 207, 214, 0.2);
}

html[data-theme="dark"] .app-shell .contact-message-modal .record-modal-actions .button:not(.button-neutral) {
    border-color: #1595a1;
    background: #7C3AED;
    color: #ffffff;
}

/* La tarjeta desplegable en oscuro: nació en la agenda de Contactos y ahora es
   la de todo el panel, anidadas incluidas (por eso pisa el ámbar heredado). */
html[data-theme="dark"] .app-shell :is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel {
    border-color: #38515a;
    background: #11191c;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .app-shell :is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel > .collapsible-summary,
html[data-theme="dark"] .app-shell :is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel:not([open]) > .collapsible-summary {
    border-color: transparent;
    background: linear-gradient(135deg, #202e33 0%, #182328 100%);
}

html[data-theme="dark"] .app-shell :is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel[open] > .collapsible-summary {
    border-bottom: 1px solid #34545c;
    background: linear-gradient(135deg, #18363b 0%, #16272b 100%);
    box-shadow: inset 4px 0 0 #25bac8;
}

html[data-theme="dark"] .app-shell :is(.panel, .public-block-editor, .rental-unit-entry-section, .employee-modal-section, .variables-subsection).collapsible-panel > .collapsible-summary .collapsible-indicator {
    border-color: #4c6872;
    background: #10191d;
    color: #6ee1e8;
}

html[data-theme="dark"] .app-shell .contacts-module .contact-phone-status.is-no-verificable {
    border-color: rgba(236, 170, 77, 0.5);
    background: rgba(165, 100, 20, 0.22);
    color: #f5c476;
}

html[data-theme="dark"] .app-shell .contacts-module .contact-phone-status.is-incorrecto {
    border-color: rgba(238, 112, 126, 0.52);
    background: rgba(151, 42, 57, 0.23);
    color: #ff9ca8;
}

html[data-theme="dark"] .app-shell .contacts-module .contact-filter-tabs {
    border-color: #3c555e;
    background: #10191d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .app-shell .contacts-module .contact-filter-button {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contacts-module .contact-filter-button:hover,
html[data-theme="dark"] .app-shell .contacts-module .contact-filter-button:focus-visible {
    background: #24343a;
    color: #ffffff;
    outline: 0;
}

html[data-theme="dark"] .app-shell .contacts-module .contact-filter-button.is-active {
    background: #087f8f;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table,
html[data-theme="dark"] .app-shell .contacts-module .report-contact-table table {
    border-color: #344b54;
    background: #10181b;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table th {
    border-bottom-color: #405a64;
    background: #25363c;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table td {
    border-bottom-color: #2c4149;
    background: #121c20;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table tbody tr:nth-child(even) td {
    background: #162226;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table tbody tr:hover td {
    background: #20343a;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table .contact-client-row.has-multiple-vehicles > td,
html[data-theme="dark"] .app-shell .report-kpi-table .contact-client-row.has-multiple-vehicles > td {
    border-bottom-color: #66527f;
    background: #282038;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table .contact-client-row.has-multiple-vehicles > td:first-child,
html[data-theme="dark"] .app-shell .report-kpi-table .contact-client-row.has-multiple-vehicles > td:first-child {
    box-shadow: inset 4px 0 0 #a78bfa;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table .contact-client-row.has-multiple-vehicles:hover > td,
html[data-theme="dark"] .app-shell .report-kpi-table .contact-client-row.has-multiple-vehicles:hover > td {
    background: #33274b;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table .contact-client-row.has-multiple-vehicles.is-expanded > td,
html[data-theme="dark"] .app-shell .report-kpi-table .contact-client-row.has-multiple-vehicles.is-expanded > td {
    background: #3a2b55;
}

html[data-theme="dark"] .app-shell .contact-client-expand:focus-visible {
    outline-color: rgba(167, 139, 250, 0.58);
}

html[data-theme="dark"] .app-shell .contact-client-vehicle-count {
    border-color: #a78bfa;
    background: #6d28d9;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .contact-client-expand-indicator {
    border-color: #c4b5fd;
}

html[data-theme="dark"] .app-shell .contacts-module .report-contact-table .contact-client-vehicles-row > td,
html[data-theme="dark"] .app-shell .report-kpi-table .contact-client-vehicles-row > td {
    border-bottom-color: #66527f;
    background: #1d1827;
}

html[data-theme="dark"] .app-shell .contact-client-vehicle-item small {
    color: #c7b7e8;
}

html[data-theme="dark"] .app-shell .contact-client-vehicle-item {
    border-color: #5f4b80;
    background: #292036;
}

html[data-theme="dark"] .app-shell .contact-client-vehicle-item strong {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .parking-contracts-table .contact-client-expand:focus-visible {
    outline-color: color-mix(in srgb, var(--brand-primary) 48%, transparent);
}

html[data-theme="dark"] .app-shell .parking-contracts-table .contact-client-vehicle-count {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .parking-contracts-table .contact-client-expand-indicator {
    border-color: var(--brand-primary);
}

html[data-theme="dark"] .app-shell .parking-contracts-table .parking-contract-detail-item {
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme="dark"] .app-shell .parking-contracts-table .parking-contract-detail-item small {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .contacts-module .empty-state {
    color: #ffffff;
}

@media (max-width: 720px) {
    .availability-percent-label span {
        font-size: 15px;
    }

    .availability-percent-value strong {
        font-size: 20px;
    }

    .availability-percent-track {
        height: 24px;
    }

    .contact-message-pane-header,
    .contact-message-context-fields,
    .contact-message-period-field,
    .contact-message-category-field {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-message-pane-header .button,
    .contact-message-period-field select,
    .contact-message-category-field select {
        width: 100%;
        min-width: 0;
    }

    html[data-theme="dark"] .app-shell .contact-message-pane.is-active {
        padding: 14px;
    }

    .contacts-module .report-contact-panel > .collapsible-summary {
        padding: 14px;
    }

    .contacts-module .report-contact-table {
        margin: 14px;
    }

    .contacts-module .contact-filter-tabs {
        width: calc(100% - 28px);
        margin: 14px 14px 0;
    }

    .contact-client-expand {
        grid-template-columns: minmax(0, 1fr) max-content 18px;
    }

    .contact-client-vehicle-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table-wrap {
    border-color: #48606a;
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table,
html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table td {
    border-bottom-color: #3b515a;
    background: #172329;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table th {
    border-bottom-color: #526b75;
    background: #273940;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table td:first-child {
    background: #1d2b31;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-table th:first-child {
    background: #273940;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-loaded {
    color: #69e3d0;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-empty,
html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-status {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .variable-ipc-view-panel .ipc-view-upcoming {
    background: #4a3916;
    color: #ffda7a;
}

html[data-theme="dark"] .app-shell .parking-contract-state.is-vigente,
html[data-theme="dark"] .app-shell .parking-contract-state.is-ocupando {
    border-color: #2f6b48;
    background: #1d3a2a;
    color: #a7e3bf;
}

html[data-theme="dark"] .app-shell .parking-contract-state.is-por_comenzar,
html[data-theme="dark"] .app-shell .parking-contract-state.is-programado {
    border-color: #7a5f2a;
    background: #3a2f18;
    color: #f0d9a6;
}

html[data-theme="dark"] .app-shell .parking-contract-state.is-reserva {
    border-color: #66527f;
    background: #2b2340;
    color: #d5c6f5;
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-incomplete > .parking-registration-contract-vehicle-summary {
    background: #3b2023;
    box-shadow: inset 4px 0 0 var(--danger);
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-complete > .parking-registration-contract-vehicle-summary {
    background: #18372d;
    box-shadow: inset 4px 0 0 #45c98f;
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-incomplete {
    border-color: var(--danger);
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-complete {
    border-color: #45c98f;
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-incomplete > .parking-registration-contract-vehicle-summary .collapsible-indicator {
    border-color: var(--danger);
    color: var(--danger);
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle.is-complete > .parking-registration-contract-vehicle-summary .collapsible-indicator {
    border-color: #45c98f;
    color: #45c98f;
}

html[data-theme="dark"] .app-shell .panel.collapsible-panel.parking-registration-contract-vehicle > .parking-registration-contract-vehicle-summary .collapsible-heading {
    color: #ffffff;
}

/* Los registros conservan segundos, mientras la carga manual pide sólo HH:MM.
   El editor se superpone como una nota y no modifica la grilla del formulario. */
.app-shell .entry-form .parking-registration-contract-time-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.app-shell .entry-form .parking-registration-contract-time-field > .field-label-line {
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-shell .entry-form .parking-registration-time-label-row {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.app-shell .entry-form .parking-registration-time-label-row > .field-label-line {
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-shell .entry-form .parking-registration-current-time {
    gap: 6px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.app-shell .entry-form .parking-registration-current-time time {
    display: inline-block;
    min-width: 8ch;
    text-align: right;
}

.app-shell .entry-form .parking-registration-time24 {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000000;
}

.app-shell .entry-form .parking-registration-clock-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    cursor: pointer;
    list-style: none;
}

.app-shell .entry-form .parking-registration-clock-summary::-webkit-details-marker {
    display: none;
}

.app-shell .entry-form .parking-registration-clock-summary:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.28);
    outline-offset: 2px;
}

.app-shell .entry-form .parking-registration-clock[aria-disabled="true"] > .parking-registration-clock-summary {
    cursor: default;
}

.app-shell .entry-form .parking-registration-clock-value {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: inherit;
}

.app-shell .entry-form .parking-registration-clock-value.is-placeholder {
    color: var(--placeholder);
}

.app-shell .entry-form .parking-registration-clock-indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform 160ms ease;
}

.app-shell .entry-form .parking-registration-clock[open] .parking-registration-clock-indicator {
    transform: rotate(225deg) translate(-2px, 2px);
}

.app-shell .entry-form .parking-registration-time24:focus-within,
.app-shell .entry-form .parking-registration-time24[open] {
    box-shadow: none;
}

.app-shell .entry-form .parking-registration-time24:focus-within > .parking-registration-clock-summary,
.app-shell .entry-form .parking-registration-time24[open] > .parking-registration-clock-summary {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
}

.app-shell .entry-form .parking-registration-time24.is-invalid > .parking-registration-clock-summary {
    border-color: var(--danger);
}

.app-shell .entry-form .parking-registration-clock-panel {
    position: fixed;
    z-index: 96;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: min(420px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(16, 24, 33, 0.22);
    color: #000000;
}

.app-shell .entry-form .parking-registration-clock:not([open]) > .parking-registration-clock-panel {
    display: none;
}

.app-shell .entry-form .parking-registration-clock-face {
    width: clamp(104px, 38%, 142px);
    min-width: 104px;
    flex: 0 1 142px;
    aspect-ratio: 1;
}

.app-shell .entry-form .parking-registration-clock-face svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.app-shell .entry-form .parking-registration-clock-ring {
    fill: #ffffff;
    stroke: var(--line);
    stroke-width: 2;
}

.app-shell .entry-form .parking-registration-clock-numbers text,
.app-shell .entry-form .parking-registration-clock-hour-inner-numbers text {
    fill: #000000;
    font-size: 8px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.app-shell .entry-form .parking-registration-clock-hour-inner-numbers text {
    font-size: 6.5px;
}

.app-shell .entry-form .parking-registration-clock[data-parking-clock-step="minute"]
    .parking-registration-clock-hour-inner-numbers {
    display: none;
}

.app-shell .entry-form .parking-registration-clock-hand {
    stroke: var(--brand-primary);
    stroke-linecap: round;
}

.app-shell .entry-form .parking-registration-clock-hand.is-hour {
    stroke-width: 4;
}

.app-shell .entry-form .parking-registration-clock-hand.is-minute {
    display: none;
    stroke-width: 3;
}

.app-shell .entry-form .parking-registration-clock[data-parking-clock-step="minute"]
    .parking-registration-clock-hand.is-hour {
    display: none;
}

.app-shell .entry-form .parking-registration-clock[data-parking-clock-step="minute"]
    .parking-registration-clock-hand.is-minute {
    display: block;
}

.app-shell .entry-form .parking-registration-clock-pin {
    fill: var(--brand-primary);
}

.app-shell .entry-form .parking-registration-clock-editor-label {
    display: grid;
    flex: 1 1 190px;
    min-width: 178px;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.app-shell .entry-form .parking-registration-clock-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app-shell .entry-form .parking-registration-clock-format {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-shell .entry-form .parking-registration-clock-editor {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
}

.app-shell .entry-form .parking-registration-clock-editor:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
}

.app-shell .entry-form .parking-registration-clock-editor > input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #000000;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: center;
}

html[data-theme] .app-shell .entry-form .parking-registration-clock-editor > input {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-shell .entry-form .parking-registration-clock-editor > input:is(:focus, :focus-visible),
html[data-theme] .app-shell .entry-form .parking-registration-clock-editor > input:is(:focus, :focus-visible) {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.app-shell .entry-form .parking-registration-clock-separator {
    color: #000000;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-shell .entry-form .parking-registration-clock-done {
    min-height: 44px;
    margin-left: auto;
    padding-inline: 18px;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-contract-time-field > .field-label-line,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-time-label-row > .field-label-line {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-panel,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-editor {
    border-color: var(--line);
    background: #182023;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-time24 {
    background: transparent;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-summary {
    border-color: var(--line-strong);
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form :is(
    .parking-registration-clock-summary,
    .parking-registration-clock-value,
    .parking-registration-clock-editor-label,
    .parking-registration-clock-editor > input,
    .parking-registration-clock-separator
) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-ring {
    fill: #182023;
    stroke: var(--line);
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-numbers text,
html[data-theme="dark"] .app-shell .entry-form .parking-registration-clock-hour-inner-numbers text {
    fill: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .parking-registration-time24.is-invalid > .parking-registration-clock-summary {
    border-color: var(--danger);
}

@media (max-width: 720px) {
    .app-shell .entry-form .parking-registration-clock-panel {
        align-items: stretch;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    .app-shell .entry-form .parking-registration-clock-face {
        margin-inline: auto;
    }

    .app-shell .entry-form .parking-registration-clock-editor-label {
        flex-basis: 100%;
    }
}
/* Panel administrador de la página pública: paleta oficial WorKraken. */
.app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary {
    border-color: #6D28D9;
    background: #F3E8FF;
    color: #000000;
}

.app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel)[open] > .collapsible-summary {
    border-color: #6D28D9;
    background: #F3E8FF;
    box-shadow: inset 4px 0 0 #6D28D9;
}

.app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary .collapsible-heading {
    color: #000000;
}

.app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel)[open] > .collapsible-summary .collapsible-heading {
    color: #6D28D9;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel {
    border-color: #6D28D9;
    background: #F3E8FF;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary,
.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel:not([open]) > .collapsible-summary {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: #F3E8FF;
    color: #000000;
    box-shadow: none;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel[open] > .collapsible-summary {
    border-bottom: 1px solid #6D28D9;
    background: #F3E8FF;
    box-shadow: inset 4px 0 0 #6D28D9;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary .collapsible-heading {
    color: #000000;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel[open] > .collapsible-summary .collapsible-heading {
    color: #6D28D9;
}

.app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary > .collapsible-indicator,
.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary > .collapsible-indicator {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #6D28D9;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure > .collapsible-summary::after {
    content: none;
    display: none;
}

.app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure > .collapsible-summary:focus-visible {
    outline-color: #6D28D9;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel {
    border-color: #6D28D9;
    background: #17111F;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary,
html[data-theme="dark"] .app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel)[open] > .collapsible-summary {
    border-color: #9333EA;
    background: #17111F;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #9333EA;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel)[open] > .collapsible-summary .collapsible-heading {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary,
html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel:not([open]) > .collapsible-summary {
    border: 0;
    background: #17111F;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel[open] > .collapsible-summary {
    border-bottom: 1px solid #9333EA;
    background: #17111F;
    box-shadow: inset 4px 0 0 #9333EA;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel[open] > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .public-page-builder-parking :is(.public-page-link-panel, .public-page-admin-panel) > .collapsible-summary > .collapsible-indicator,
html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure.collapsible-panel > .collapsible-summary > .collapsible-indicator {
    border: 0;
    background: transparent;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure > .collapsible-summary:focus-visible {
    outline-color: #9333EA;
}

@media (max-width: 720px) {
    .app-shell .public-page-builder-parking .public-page-admin-panel .public-config-disclosure > .collapsible-summary {
        min-height: 52px;
        padding: 0 14px;
    }
}

/* Modelo Marte: paleta y temas aislados de los demás modelos públicos. */
.public-template-urbana.public-design-urban {
    --mars-orange: #D96B2B;
    --mars-amber: #E3B341;
    --mars-red: #E63946;
    --mars-brown: #3B211B;
    --mars-orange-soft: rgba(217, 107, 43, 0.18);
    --mars-orange-medium: rgba(217, 107, 43, 0.25);
    --mars-amber-soft: rgba(227, 179, 65, 0.18);
    --mars-amber-medium: rgba(227, 179, 65, 0.25);
    --mars-red-soft: rgba(230, 57, 70, 0.18);
    --mars-red-medium: rgba(230, 57, 70, 0.25);
    --mars-energy-gradient: linear-gradient(
        112deg,
        var(--mars-amber) 0%,
        var(--mars-orange) 52%,
        var(--mars-red) 100%
    );
    --mars-paper: #FFF9F4;
    --mars-surface: #FFFFFF;
    --mars-dark-text: #FFFFFF;
    --mars-dark-raised: #4A2A23;
    --public-accent: var(--mars-orange);
    --public-accent-strong: #BF5720;
    --public-surface: var(--mars-surface);
    --public-soft: var(--mars-orange-soft);
    --public-ink: var(--mars-brown);
    --public-muted: var(--mars-brown);
    --public-line: rgba(217, 107, 43, 0.3);
    background: var(--mars-paper);
    color: var(--mars-brown);
}

.public-template-urbana [data-public-price-value][hidden] {
    display: none !important;
}

.public-template-urbana .public-sticky-nav {
    border-bottom-color: rgba(59, 33, 27, 0.3);
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
    box-shadow: 0 16px 42px rgba(59, 33, 27, 0.18);
}

.public-template-urbana .public-sticky-nav :is(
    .public-design-brand strong,
    .public-sticky-links a,
    .public-theme-toggle
) {
    color: var(--mars-brown);
}

.public-template-urbana .public-sticky-links > a:hover,
.public-template-urbana .public-sticky-links > a:focus-visible {
    background: rgba(227, 179, 65, 0.25);
}

.public-template-urbana .public-sticky-theme {
    border-color: rgba(59, 33, 27, 0.3);
    background: rgba(227, 179, 65, 0.25);
}

.public-template-urbana .urban-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 12px max(18px, calc((100vw - 1680px) / 2)) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(217, 107, 43, 0.18), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(227, 179, 65, 0.18), transparent 30%),
        radial-gradient(circle at 82% 88%, rgba(230, 57, 70, 0.15), transparent 32%),
        var(--mars-paper);
}

.public-template-urbana .urban-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.public-template-urbana .urban-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.78) contrast(0.9);
}

.public-template-urbana .urban-hero-media::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(112deg, rgba(255, 249, 244, 0.62), rgba(217, 107, 43, 0.34) 54%, rgba(230, 57, 70, 0.32)),
        linear-gradient(rgba(255, 249, 244, 0.2), rgba(255, 249, 244, 0.2));
    content: "";
}

.public-template-urbana .urban-hero-grid {
    align-items: center;
    padding: clamp(28px, 4vw, 56px) 0 clamp(24px, 3.5vw, 48px);
}

.public-template-urbana .urban-copy {
    gap: 18px;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(59, 33, 27, 0.24);
    border-radius: 8px;
    background: rgba(255, 249, 244, 0.78);
    box-shadow: 0 24px 64px rgba(59, 33, 27, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.public-template-urbana .urban-copy :is(h1, p) {
    color: var(--mars-brown);
}

.public-template-urbana .urban-copy p {
    opacity: 1;
}

.public-template-urbana :is(
    .urban-primary,
    .urban-nav-cta,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button
) {
    border-color: var(--mars-orange);
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
    box-shadow: none;
}

.public-template-urbana :is(
    .urban-primary,
    .urban-nav-cta,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button
):hover,
.public-template-urbana :is(
    .urban-primary,
    .urban-nav-cta,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button
):focus-visible {
    background: linear-gradient(
        104deg,
        var(--mars-amber) -10%,
        var(--mars-orange) 38%,
        var(--mars-red) 100%
    );
    color: var(--mars-brown);
}

.public-template-urbana .urban-secondary {
    border-color: var(--mars-orange);
    background: linear-gradient(
        112deg,
        rgba(227, 179, 65, 0.15),
        rgba(217, 107, 43, 0.2) 52%,
        rgba(230, 57, 70, 0.15)
    );
    color: var(--mars-brown);
}

.public-template-urbana .urban-secondary:hover,
.public-template-urbana .urban-secondary:focus-visible {
    background: linear-gradient(
        112deg,
        rgba(227, 179, 65, 0.25),
        rgba(217, 107, 43, 0.25) 52%,
        rgba(230, 57, 70, 0.25)
    );
}

.public-template-urbana .urban-status {
    min-height: 360px;
    border: 1px solid rgba(59, 33, 27, 0.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(227, 179, 65, 0.25), transparent 38%),
        linear-gradient(
            145deg,
            var(--mars-amber) 0%,
            var(--mars-orange) 55%,
            var(--mars-red) 100%
        );
    color: var(--mars-brown);
    box-shadow: 0 24px 64px rgba(59, 33, 27, 0.22);
}

.public-template-urbana .urban-status > p {
    color: var(--mars-brown);
    opacity: 1;
}

.public-template-urbana .urban-status .public-period-selector button {
    border-color: rgba(59, 33, 27, 0.3);
    background: rgba(255, 249, 244, 0.25);
    color: var(--mars-brown);
}

.public-template-urbana .urban-status .public-period-selector button:is(
    .is-active,
    [aria-pressed="true"]
),
html[data-theme="dark"] .app-shell .public-page-owner-preview
    .public-template-urbana
    .urban-status
    .public-period-selector
    button:is(.is-active, [aria-pressed="true"]) {
    border-color: var(--mars-brown) !important;
    background: var(--mars-brown) !important;
    color: var(--mars-paper) !important;
}

.public-template-urbana .urban-status-rate-list article {
    border-color: rgba(227, 179, 65, 0.25);
    background: var(--mars-brown);
    color: var(--mars-dark-text);
}

.public-template-urbana .urban-status-rate-list article strong,
.public-template-urbana .public-category-price,
.public-template-urbana .public-calculation-total > strong {
    color: var(--mars-amber);
}

.public-template-urbana .urban-status-rate-list article small {
    color: var(--mars-dark-text);
    opacity: 1;
}

.public-template-urbana .urban-model-info {
    border-color: rgba(227, 179, 65, 0.3);
    background: rgba(227, 179, 65, 0.18);
    color: var(--mars-amber);
}

.public-template-urbana .urban-model-info[aria-expanded="true"] {
    background: var(--mars-amber);
    color: var(--mars-brown);
}

.public-template-urbana .urban-model-info-text {
    border-color: rgba(227, 179, 65, 0.25);
    background: rgba(227, 179, 65, 0.15);
    color: var(--mars-dark-text) !important;
}

.public-template-urbana :is(
    .urban-rates,
    .urban-blog,
    .urban-comments,
    .urban-contact
) {
    background:
        radial-gradient(circle at 8% 12%, rgba(227, 179, 65, 0.18), transparent 34%),
        radial-gradient(circle at 52% 100%, rgba(217, 107, 43, 0.15), transparent 36%),
        radial-gradient(circle at 94% 8%, rgba(230, 57, 70, 0.15), transparent 32%),
        var(--mars-paper);
    color: var(--mars-brown);
}

.public-template-urbana .urban-blog {
    background:
        linear-gradient(
            120deg,
            rgba(227, 179, 65, 0.18),
            rgba(217, 107, 43, 0.15) 54%,
            rgba(230, 57, 70, 0.15)
        ),
        var(--mars-paper);
}

.public-template-urbana .urban-comments {
    background:
        linear-gradient(
            120deg,
            rgba(230, 57, 70, 0.15),
            rgba(217, 107, 43, 0.18) 54%,
            rgba(227, 179, 65, 0.18)
        ),
        var(--mars-paper);
}

.public-template-urbana :is(
    .urban-section-head h2,
    .public-section-head h2,
    .public-section-head p,
    .public-contact-head h2,
    .public-contact-form label,
    .public-contact-form .field-label-line
) {
    color: var(--mars-brown) !important;
}

.public-template-urbana :is(
    .urban-calculator,
    .urban-result,
    .public-blog-card,
    .public-blog-grid article,
    .public-reference-card,
    .public-config-needed,
    .public-calculation-mode,
    .public-cyclic-field,
    .public-calculation-result-panel,
    .public-calculation-facts article
) {
    border-color: rgba(217, 107, 43, 0.3);
    background: var(--mars-surface);
    color: var(--mars-brown);
    box-shadow: 0 14px 36px rgba(59, 33, 27, 0.1);
}

.public-template-urbana .public-blog-card:nth-child(even),
.public-template-urbana .public-reference-card:nth-child(even) {
    border-color: rgba(227, 179, 65, 0.3);
    background:
        linear-gradient(
            128deg,
            rgba(227, 179, 65, 0.15),
            rgba(217, 107, 43, 0.15) 58%,
            rgba(230, 57, 70, 0.15)
        ),
        var(--mars-surface);
}

.public-template-urbana :is(
    .public-blog-grid strong,
    .public-blog-grid p,
    .public-blog-grid small,
    .public-blog-card-more,
    .public-reference-card p,
    .public-reference-card strong,
    .public-reference-location,
    .public-calculation-mode label,
    .public-cyclic-field legend,
    .public-cyclic-field p,
    .public-cyclic-row-title,
    .public-cyclic-day
) {
    color: var(--mars-brown) !important;
}

.public-template-urbana :is(.public-blog-carousel-button, .public-reference-control) {
    border-color: var(--mars-orange);
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
}

.public-template-urbana .public-calculation-mode label,
.public-template-urbana .public-cyclic-day {
    border-color: rgba(217, 107, 43, 0.3);
    background: rgba(217, 107, 43, 0.15);
}

.public-template-urbana .public-calculation-mode label:has(input:checked) {
    border-color: var(--mars-orange);
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
}

.public-template-urbana :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-cyclic-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-contact-form input,
    .public-contact-form textarea,
    .public-contact-form .country-picker-button,
    .public-contact-form .country-picker-menu
) {
    border-color: rgba(217, 107, 43, 0.3);
    background: var(--mars-surface);
    color: var(--mars-brown);
}

.public-template-urbana :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-urbana .public-time24-picker [data-public-time24-display].is-placeholder {
    color: var(--mars-brown);
    opacity: 0.58;
}

.public-template-urbana .public-time24-badge {
    border-color: rgba(227, 179, 65, 0.3);
    background: rgba(227, 179, 65, 0.18);
    color: var(--mars-brown);
}

.public-template-urbana .public-calculation-facts article.public-discount-fact {
    border-color: var(--mars-orange);
    background:
        radial-gradient(circle at 100% 0%, rgba(230, 57, 70, 0.15), transparent 42%),
        linear-gradient(rgba(217, 107, 43, 0.18), rgba(217, 107, 43, 0.18)),
        var(--mars-surface);
    box-shadow: inset 4px 0 0 var(--mars-orange);
}

.public-template-urbana .public-calculation-facts article.public-discount-total-fact {
    border-color: var(--mars-amber);
    background:
        linear-gradient(rgba(227, 179, 65, 0.18), rgba(227, 179, 65, 0.18)),
        var(--mars-surface);
    box-shadow: inset 4px 0 0 var(--mars-amber);
}

.public-template-urbana .public-price-detail :is(th, td).public-discount-column {
    background: rgba(217, 107, 43, 0.18);
    color: var(--mars-brown);
}

.public-template-urbana .public-price-detail tr.is-total .public-discount-column {
    background: rgba(227, 179, 65, 0.25);
    color: var(--mars-brown);
}

.public-template-urbana .urban-banner {
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
}

.public-template-urbana .urban-banner :is(h2, p) {
    color: var(--mars-brown);
}

.public-template-urbana .urban-location {
    background:
        radial-gradient(circle at 12% 16%, rgba(227, 179, 65, 0.25), transparent 30%),
        linear-gradient(
            128deg,
            var(--mars-amber) 0%,
            var(--mars-orange) 58%,
            var(--mars-red) 100%
        );
    color: var(--mars-brown);
}

.public-template-urbana .urban-location-copy :is(h2, p) {
    color: var(--mars-brown);
}

.public-template-urbana :is(.urban-map, .public-design-map-fallback) {
    border-color: rgba(59, 33, 27, 0.3);
    background: var(--mars-paper);
}

.public-template-urbana .urban-contact {
    border-color: rgba(217, 107, 43, 0.3);
}

.public-template-urbana .public-contact-notice {
    border-color: rgba(227, 179, 65, 0.3);
    background: rgba(227, 179, 65, 0.18);
    color: var(--mars-brown);
}

.public-template-urbana .urban-footer {
    border-top-color: rgba(227, 179, 65, 0.3);
    background: var(--mars-energy-gradient);
    color: var(--mars-brown);
}

.public-template-urbana .urban-footer :is(
    .public-footer-brand strong,
    .public-footer-brand p,
    .public-footer-column,
    .public-footer-column > strong,
    .public-footer-column a,
    .public-footer-email,
    .public-footer-bottom
) {
    color: var(--mars-brown);
}

.public-template-urbana .public-footer-socials a {
    border-color: rgba(59, 33, 27, 0.3);
    background: rgba(227, 179, 65, 0.18);
    color: var(--mars-brown);
}

.public-template-urbana .public-whatsapp-float {
    border-color: #ffffff;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(5, 43, 23, 0.28);
}

.public-template-urbana .public-whatsapp-float:is(:hover, :focus-visible, :active) {
    border-color: #ffffff;
    background: #25d366;
    color: #ffffff;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] {
    --mars-night-base: #140C0A;
    --mars-night-surface: #21110E;
    --mars-night-raised: #321A14;
    --mars-night-raised-alt: #3A1D16;
    --mars-night-yellow: var(--mars-amber);
    --mars-night-orange: var(--mars-orange);
    --mars-night-red: var(--mars-red);
    --mars-night-text: #FFFFFF;
    --mars-night-muted: #FFFFFF;
    --mars-night-line: rgba(227, 179, 65, 0.3);
    --mars-night-control-line: rgba(227, 179, 65, 0.58);
    --mars-night-gradient: var(--mars-energy-gradient);
    --mars-night-gradient-hover: linear-gradient(
        112deg,
        #F0C55A 0%,
        #E77B32 52%,
        #EC4D59 100%
    );
    --mars-night-hero-gradient:
        radial-gradient(circle at 8% 12%, rgba(227, 179, 65, 0.3), transparent 34%),
        radial-gradient(circle at 54% 8%, rgba(217, 107, 43, 0.28), transparent 40%),
        radial-gradient(circle at 88% 88%, rgba(230, 57, 70, 0.32), transparent 40%),
        linear-gradient(135deg, #140C0A 0%, #25130D 48%, #310E14 100%);
    --mars-night-panel-gradient:
        radial-gradient(circle at 100% 0%, rgba(227, 179, 65, 0.18), transparent 36%),
        linear-gradient(
            145deg,
            #80651F 0%,
            #8E3E1D 55%,
            #801D27 100%
        );
    --mars-night-deep-gradient:
        radial-gradient(circle at 8% 8%, rgba(227, 179, 65, 0.16), transparent 34%),
        radial-gradient(circle at 52% 100%, rgba(217, 107, 43, 0.18), transparent 40%),
        radial-gradient(circle at 94% 8%, rgba(230, 57, 70, 0.2), transparent 38%),
        linear-gradient(135deg, var(--mars-night-base) 0%, #25130D 48%, #2B0D12 100%);
    --mars-night-nav-gradient: linear-gradient(
        112deg,
        #80651F 0%,
        #8E3E1D 52%,
        #801D27 100%
    );
    --mars-dark-text: var(--mars-night-text);
    --mars-dark-raised: var(--mars-night-raised);
    --public-accent: var(--mars-night-orange);
    --public-accent-strong: var(--mars-night-red);
    --public-surface: var(--mars-night-raised);
    --public-soft: rgba(226, 112, 34, 0.18);
    --public-ink: var(--mars-night-text);
    --public-muted: var(--mars-night-muted);
    --public-line: var(--mars-night-line);
    background: var(--mars-night-base);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-sticky-nav {
    border-bottom-color: var(--mars-night-line);
    background: var(--mars-night-nav-gradient);
    color: var(--mars-night-text);
    box-shadow: 0 16px 42px rgba(9, 5, 3, 0.48);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-sticky-nav :is(
    .public-design-brand strong,
    .public-sticky-links a,
    .public-theme-toggle
) {
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-sticky-links > a:is(:hover, :focus-visible) {
    background: rgba(227, 179, 65, 0.16);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-sticky-theme {
    border-color: rgba(227, 179, 65, 0.42);
    background: rgba(20, 12, 10, 0.42);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-hero {
    background: var(--mars-night-hero-gradient);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-hero-media img {
    filter: brightness(0.48) saturate(0.76) contrast(0.94);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-hero-media::after {
    background:
        linear-gradient(112deg, rgba(20, 12, 10, 0.56), rgba(142, 62, 29, 0.34) 54%, rgba(128, 29, 39, 0.36)),
        linear-gradient(rgba(9, 5, 3, 0.18), rgba(9, 5, 3, 0.18));
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-copy {
    border-color: var(--mars-night-line);
    background: rgba(20, 12, 10, 0.78);
    box-shadow: 0 24px 64px rgba(9, 5, 3, 0.42);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-copy :is(h1, p) {
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-primary,
    .urban-nav-cta,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid > button[type="submit"],
    .public-blog-carousel-button,
    .public-reference-control
) {
    border-color: var(--mars-night-yellow);
    background: var(--mars-night-gradient);
    color: var(--mars-night-base);
    box-shadow: 0 10px 24px rgba(9, 5, 3, 0.28);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-primary,
    .urban-nav-cta,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid > button[type="submit"],
    .public-blog-carousel-button,
    .public-reference-control
):is(:hover, :focus-visible) {
    background: var(--mars-night-gradient-hover);
    color: var(--mars-night-base);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-primary,
    .urban-nav-cta,
    .urban-secondary,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid > button[type="submit"],
    .public-blog-carousel-button,
    .public-reference-control,
    .public-whatsapp-float
):focus-visible {
    outline: 3px solid var(--mars-night-text);
    outline-offset: 2px;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-secondary {
    border-color: var(--mars-night-control-line);
    background: #28130F;
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-secondary:is(:hover, :focus-visible) {
    border-color: var(--mars-night-yellow);
    background: rgba(217, 107, 43, 0.24);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-status {
    border-color: var(--mars-night-line);
    background: var(--mars-night-panel-gradient);
    color: var(--mars-night-text);
    box-shadow: 0 24px 64px rgba(9, 5, 3, 0.48);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-status > p {
    color: var(--mars-night-muted);
    opacity: 1;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status .public-period-selector button {
    border-color: var(--mars-night-control-line);
    background: #28130F;
    color: var(--mars-night-text);
    box-shadow: inset 0 1px 0 rgba(255, 248, 241, 0.08);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status .public-period-selector
    button:not(.is-active):not([aria-pressed="true"]):is(:hover, :focus-visible) {
    border-color: var(--mars-night-orange);
    background: rgba(217, 107, 43, 0.24);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status .public-period-selector button:focus-visible {
    outline: 3px solid var(--mars-night-text);
    outline-offset: 2px;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status .public-period-selector button:is(.is-active, [aria-pressed="true"]),
html[data-theme="dark"] .app-shell .public-page-owner-preview
    .public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status
    .public-period-selector
    button:is(.is-active, [aria-pressed="true"]) {
    border-color: var(--mars-night-yellow) !important;
    background: var(--mars-night-gradient) !important;
    color: var(--mars-night-base) !important;
    box-shadow:
        0 0 0 1px rgba(227, 179, 65, 0.26),
        0 8px 18px rgba(230, 57, 70, 0.28) !important;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-status-rate-list article {
    border-color: var(--mars-night-line);
    background: rgba(20, 12, 10, 0.84);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-rates,
    .urban-blog,
    .urban-comments,
    .urban-contact,
    .urban-location
) {
    background: var(--mars-night-deep-gradient);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-location {
    background: var(--mars-night-panel-gradient);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-section-head h2,
    .public-section-head h2,
    .public-section-head p,
    .public-contact-head h2,
    .public-contact-form label,
    .public-contact-form .field-label-line,
    .urban-location-copy h2,
    .urban-location-copy p
) {
    color: var(--mars-night-text) !important;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .urban-calculator,
    .urban-result,
    .public-blog-card,
    .public-blog-grid article,
    .public-reference-card,
    .public-category-note,
    .public-discount-card,
    .public-config-needed,
    .public-calculation-mode,
    .public-cyclic-field,
    .public-calculation-result-panel,
    .public-calculation-facts article
) {
    border-color: var(--mars-night-line);
    background: var(--mars-night-raised);
    color: var(--mars-night-text);
    box-shadow: 0 14px 36px rgba(9, 5, 3, 0.36);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-blog-card:nth-child(even),
.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-reference-card:nth-child(even) {
    border-color: var(--mars-night-line);
    background:
        linear-gradient(
            128deg,
            rgba(242, 188, 56, 0.1),
            rgba(226, 112, 34, 0.16) 58%,
            rgba(217, 74, 43, 0.14)
        ),
        var(--mars-night-raised-alt);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .public-blog-grid strong,
    .public-blog-grid p,
    .public-blog-grid small,
    .public-blog-card-more,
    .public-reference-card p,
    .public-reference-card strong,
    .public-reference-location,
    .public-calculation-mode label,
    .public-cyclic-field legend,
    .public-cyclic-field p,
    .public-cyclic-row-title,
    .public-cyclic-day
) {
    color: var(--mars-night-text) !important;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-calculation-mode label,
.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-cyclic-day {
    border-color: var(--mars-night-control-line);
    background: #28130F;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    :is(
        .public-calculation-mode label:has(input:checked),
        .public-cyclic-day:has(input:checked)
    ) {
    border-color: var(--mars-night-yellow);
    background: var(--mars-night-gradient);
    color: var(--mars-night-base) !important;
    box-shadow: 0 6px 16px rgba(230, 57, 70, 0.24);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    :is(
        .public-calculation-mode label:not(:has(input:checked)),
        .public-cyclic-day:not(:has(input:checked))
    ):is(:hover, :focus-within) {
    border-color: var(--mars-night-orange);
    background: rgba(217, 107, 43, 0.22);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    :is(.public-calculation-mode label, .public-cyclic-day):focus-within {
    outline: 3px solid var(--mars-night-text);
    outline-offset: 2px;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-cyclic-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-contact-form input,
    .public-contact-form textarea,
    .public-contact-form .country-picker-button,
    .public-contact-form .country-picker-menu
) {
    border-color: var(--mars-night-line);
    background: var(--mars-night-base);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-price-grid .public-vehicle-info-trigger {
    border-color: currentColor;
    background: transparent;
    color: var(--mars-night-yellow);
    box-shadow: none;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-price-grid .public-vehicle-info-trigger:is(:hover, :focus-visible) {
    background: rgba(227, 179, 65, 0.18);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-price-grid .public-time24-picker-popover button {
    border-color: var(--mars-night-control-line);
    background: var(--mars-night-raised-alt);
    color: var(--mars-night-text);
    box-shadow: none;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-time24-picker
    [data-public-time24-display].is-placeholder {
    color: var(--mars-night-text);
    opacity: 0.62;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(
    .public-time24-badge,
    .public-contact-notice
) {
    border-color: var(--mars-night-line);
    background: rgba(227, 179, 65, 0.14);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-price-detail :is(th, td).public-discount-column {
    background: rgba(217, 107, 43, 0.18);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-calculation-facts article.public-discount-fact {
    border-color: var(--mars-night-red);
    background:
        radial-gradient(circle at 100% 0%, rgba(227, 179, 65, 0.14), transparent 42%),
        linear-gradient(rgba(230, 57, 70, 0.16), rgba(217, 107, 43, 0.16)),
        var(--mars-night-raised);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .public-calculation-facts article.public-discount-total-fact {
    border-color: var(--mars-night-yellow);
    background:
        linear-gradient(rgba(227, 179, 65, 0.16), rgba(217, 107, 43, 0.14)),
        var(--mars-night-raised);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-banner {
    background: var(--mars-night-panel-gradient);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-banner :is(h2, p) {
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] :is(.urban-map, .public-design-map-fallback) {
    border-color: var(--mars-night-line);
    background: var(--mars-night-raised);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-footer {
    border-top-color: var(--mars-night-line);
    background: var(--mars-night-nav-gradient);
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .urban-footer :is(
    .public-footer-brand strong,
    .public-footer-brand p,
    .public-footer-column,
    .public-footer-column > strong,
    .public-footer-column a,
    .public-footer-email,
    .public-footer-bottom
) {
    color: var(--mars-night-text);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-footer-socials a {
    border-color: rgba(227, 179, 65, 0.42);
    background: rgba(20, 12, 10, 0.42);
    color: var(--mars-night-text);
}

.public-template-urbana .urban-contact.public-parking-contact .public-contact-submit {
    justify-self: end;
    color: #ffffff;
}

.public-template-urbana
    .urban-contact.public-parking-contact
    .public-contact-submit:is(:hover, :focus-visible) {
    color: #ffffff;
}

.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-contact.public-parking-contact
    .public-contact-submit,
.public-template-urbana.public-design-urban[data-public-theme="dark"]
    .urban-contact.public-parking-contact
    .public-contact-submit:is(:hover, :focus-visible) {
    color: #ffffff;
}

.public-page-builder-parking
    .public-page-owner-preview
    .public-template-urbana
    .urban-hero-grid {
    padding: clamp(28px, 3.5vw, 48px) 0;
}

@media (max-width: 760px) {
    .public-template-urbana .urban-hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    .public-template-urbana .urban-hero-grid,
    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-urbana
        .urban-hero-grid {
        gap: 24px;
        padding: 24px 0 30px;
    }

    .public-template-urbana .urban-status {
        min-height: 0;
        padding: 22px 18px;
    }

    .public-template-urbana .urban-status > strong {
        font-size: clamp(68px, 24vw, 96px);
    }

    .public-template-urbana .urban-status > b {
        font-size: clamp(24px, 8vw, 30px);
    }

    .public-template-urbana .urban-status-rate-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Empleados y calendario: superficies oscuras coherentes y legibles. */
html[data-theme="dark"] .app-shell .employee-management-form > .collapsible-panel > .collapsible-summary .collapsible-title small,
html[data-theme="dark"] .app-shell .employee-absence-toolbar p,
html[data-theme="dark"] .app-shell .employee-absence-row label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-absence-row {
    border-color: #3b4e56;
    background: #162126;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .app-shell .employee-absence-row :is(input, select) {
    border-color: #4a6069;
    background: #10191d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-absence-empty {
    border-color: #40545d;
    background: #10191d;
    color: #ffffff;
}

/* El borde y el fondo los pone la tarjeta desplegable de todo el panel; acá
   sólo queda el color del texto de adentro. */
html[data-theme="dark"] .app-shell .employee-calendar-panel {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-calendar-filter {
    border-color: #40545d;
    background: linear-gradient(180deg, #182429 0%, #131d21 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .app-shell .employee-calendar-filter label {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-calendar-filter :is(select, input) {
    border-color: #4a6069;
    background: #0f181c;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-calendar-filter :is(select, input):focus {
    border-color: #37aebb;
    box-shadow: 0 0 0 3px rgba(55, 174, 187, 0.18);
}

html[data-theme="dark"] .app-shell .employee-calendar-panel .availability-view-toggle {
    border-color: #4a6069;
    background: #0f181c;
}

html[data-theme="dark"] .app-shell .employee-calendar-panel .availability-view-toggle button {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-calendar-panel .availability-view-toggle button:hover {
    background: #213238;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-calendar-panel .availability-view-toggle button.is-active {
    background: #7C3AED;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(8, 127, 139, 0.32);
}

html[data-theme="dark"] .app-shell .employee-month-weekdays span {
    border-color: #3f535c;
    background: #1a292e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-month-day {
    border-color: #3b4f57;
    background: linear-gradient(180deg, #172126 0%, #121b1f 100%);
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .app-shell .employee-month-day.has-events {
    border-color: rgba(67, 181, 193, 0.42);
    background: linear-gradient(180deg, #192a2f 0%, #142126 100%);
}

html[data-theme="dark"] .app-shell .employee-month-day.has-absences {
    border-color: rgba(232, 179, 75, 0.62);
    box-shadow: inset 0 3px 0 rgba(232, 179, 75, 0.56), 0 7px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .app-shell .employee-month-day:hover {
    border-color: #57c1cc;
    background: linear-gradient(180deg, #1d3036 0%, #17262b 100%);
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .app-shell .employee-month-day.is-outside {
    border-color: #31434a;
    background: #0c1316;
    opacity: 1;
}

html[data-theme="dark"] .app-shell .employee-month-day.is-today {
    border-color: #6da8ff;
    box-shadow: inset 0 0 0 1px rgba(109, 168, 255, 0.32), 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .app-shell .employee-month-day.is-selected {
    border-color: #43b5c1;
    box-shadow: inset 0 0 0 2px rgba(67, 181, 193, 0.32), 0 12px 27px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .app-shell .employee-month-day-head strong,
html[data-theme="dark"] .app-shell .employee-hour-list-head strong,
html[data-theme="dark"] .app-shell .employee-hour-person strong,
html[data-theme="dark"] .app-shell .employee-day-event-name {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-month-day-head small {
    background: #22343b;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-day-event {
    border-color: color-mix(in srgb, var(--employee-color, #43b5c1) 38%, #40545d);
    border-left-color: var(--employee-color, #43b5c1);
    background: color-mix(in srgb, var(--employee-color, #43b5c1) 16%, #131e22);
}

html[data-theme="dark"] .app-shell .employee-day-event.is-absence {
    border-color: rgba(232, 179, 75, 0.46);
    border-left-color: #e8b34b;
    background: #332b18;
}

html[data-theme="dark"] .app-shell .employee-day-event.is-certificado-medico {
    border-color: rgba(240, 125, 145, 0.48);
    border-left-color: #f07d91;
    background: #352127;
}

html[data-theme="dark"] .app-shell .employee-day-track {
    background: #31454d;
}

html[data-theme="dark"] .app-shell :is(.employee-day-time, .employee-day-extra, .employee-hour-person small) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-day-extra {
    background: #223138;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-hour-list-head {
    border-color: #40545d;
    background: #1a292e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-hour-row {
    border-color: #3b4f57;
    background: #162126;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .app-shell .employee-hour-timeline {
    border-color: #40545d;
    background:
        linear-gradient(90deg, rgba(133, 159, 169, 0.18) 1px, transparent 1px) 0 0 / calc(100% / 24) 100%,
        linear-gradient(180deg, #10191d 0%, #131e22 100%);
}

html[data-theme="dark"] .app-shell .employee-hour-grid-line {
    background: rgba(168, 190, 198, 0.24);
}

html[data-theme="dark"] .app-shell .employee-hour-empty {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .employee-hour-absence {
    border-color: rgba(232, 179, 75, 0.46);
    background: #332b18;
    color: #f0ca7e;
}

html[data-theme="dark"] .app-shell .employee-hour-absence.is-certificado-medico {
    border-color: rgba(240, 125, 145, 0.48);
    background: #352127;
    color: #f4a6b4;
}

html[data-theme="dark"] .app-shell .availability-status.is-vacation {
    border-color: rgba(232, 179, 75, 0.48);
    background: #3a3019;
    color: #f0ca7e;
}

html[data-theme="dark"] .app-shell .availability-status.is-medical {
    border-color: rgba(240, 125, 145, 0.5);
    background: #3a2229;
    color: #f4a6b4;
}

@media (max-width: 1180px) {
    .employee-absence-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-absence-detail {
        grid-column: 1 / -1;
    }

    .employee-absence-delete {
        justify-self: end;
    }
}

@media (max-width: 720px) {
    .employee-absence-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-absence-toolbar .button,
    .employee-section-save {
        width: 100%;
    }

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

    .employee-absence-detail {
        grid-column: auto;
    }

    .employee-absence-delete {
        width: 100%;
        justify-self: stretch;
    }
}

/* Modelo Urano: azul principal, verde aurora y superficies responsivas al tema. */
.public-template-mapa {
    --uranus-blue: #3A7FA3;
    --uranus-green: #4FAF8E;
    --uranus-petrol: #17343D;
    --uranus-white: #FFFFFF;
    --uranus-black: #000000;
    --uranus-blue-soft: rgba(58, 127, 163, 0.18);
    --uranus-blue-medium: rgba(58, 127, 163, 0.25);
    --uranus-green-soft: rgba(79, 175, 142, 0.15);
    --uranus-green-medium: rgba(79, 175, 142, 0.25);
    --public-accent: var(--uranus-blue);
    --public-accent-strong: var(--uranus-petrol);
    --public-highlight: var(--uranus-green);
    --public-surface: var(--uranus-white);
    --public-soft: var(--uranus-blue-soft);
    --public-ink: var(--uranus-black);
    --public-muted: var(--uranus-black);
    --public-line: rgba(58, 127, 163, 0.3);
}

.public-template-mapa.public-design-map:not([data-public-theme="dark"]) {
    background: var(--uranus-white);
    color: var(--uranus-black);
    color-scheme: light;
}

.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-nav {
    border-bottom-color: rgba(58, 127, 163, 0.3);
    background: rgba(58, 127, 163, 0.22);
    color: var(--uranus-black);
    box-shadow: 0 16px 44px rgba(23, 52, 61, 0.15);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-nav :is(
    .public-design-brand strong,
    .public-design-brand > span,
    .public-sticky-links a,
    .public-sticky-socials a,
    .public-theme-toggle
) {
    color: var(--uranus-black);
    text-shadow: none;
}

.public-template-mapa:not([data-public-theme="dark"])
    .public-sticky-nav
    .public-design-brand
    img,
.public-template-mapa:not([data-public-theme="dark"])
    .public-sticky-nav
    .public-design-brand
    > span {
    border-color: rgba(58, 127, 163, 0.3);
    background: rgba(255, 255, 255, 0.3);
}

.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-links > a:hover,
.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-links > a:focus-visible,
.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-socials a:hover,
.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-socials a:focus-visible {
    background: rgba(79, 175, 142, 0.25);
}

.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-theme {
    border-color: rgba(23, 52, 61, 0.3);
    background: rgba(255, 255, 255, 0.25);
    color: var(--uranus-black);
}

.public-template-mapa:not([data-public-theme="dark"]) :is(
    .map-arrival-card h1,
    .map-arrival-card p,
    .map-arrival-card dd,
    .map-vehicles h2,
    .map-section-head h2,
    .public-section-head h2,
    .public-section-head p,
    .public-contact-head h2,
    .public-contact-head p,
    .public-contact-form label,
    .public-contact-form .field-label-line,
    .public-blog-grid strong,
    .public-blog-grid p,
    .public-blog-grid small,
    .public-blog-card-more,
    .public-reference-card strong,
    .public-reference-card p,
    .public-reference-location,
    .public-calculation-mode label,
    .public-cyclic-field legend,
    .public-cyclic-field p,
    .public-cyclic-row-title,
    .public-cyclic-day
) {
    color: var(--uranus-black) !important;
}

.public-template-mapa .map-first {
    background:
        radial-gradient(circle at 88% 12%, rgba(58, 127, 163, 0.25), transparent 34%),
        radial-gradient(circle at 10% 88%, rgba(79, 175, 142, 0.18), transparent 38%),
        var(--uranus-white);
}

/* A 0.52 y con el velo encima la portada cargada quedaba como marca de
   agua. El texto vive en tarjetas propias, así que la foto puede verse. */
.public-template-mapa .map-hero-media img {
    opacity: 0.9;
    filter: saturate(0.9);
}

.public-template-mapa .map-hero-media::after {
    background:
        linear-gradient(115deg, rgba(79, 175, 142, 0.15), rgba(58, 127, 163, 0.18)),
        linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}

.public-template-mapa .map-hero-canvas,
.public-template-mapa .map-first .public-design-map-fallback {
    border-color: rgba(58, 127, 163, 0.3);
    background: var(--uranus-blue-soft);
    box-shadow: 0 24px 60px rgba(23, 52, 61, 0.18);
}

.public-template-mapa .map-arrival-card {
    border-color: rgba(58, 127, 163, 0.3);
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 175, 142, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(225, 246, 250, 0.56));
    color: var(--uranus-black);
    box-shadow: 0 18px 44px rgba(23, 52, 61, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.public-template-mapa .map-arrival-card h1 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.public-template-mapa .map-arrival-card dt,
.public-template-mapa .public-design-calculator-head > span,
.public-template-mapa :is(.map-vehicles, .map-section-head, .public-section-head) > span {
    color: var(--uranus-blue);
}

.public-template-mapa .map-arrival-card dl div,
.public-template-mapa .map-chip-grid span {
    border-color: rgba(58, 127, 163, 0.3);
    background: rgba(79, 175, 142, 0.15);
    color: var(--uranus-black);
}

.public-template-mapa :is(
    .map-vehicles,
    .map-standalone-location,
    .map-gallery,
    .map-comments
) {
    background:
        radial-gradient(circle at 92% 8%, rgba(79, 175, 142, 0.18), transparent 32%),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa :is(.map-rates, .map-blog) {
    background:
        radial-gradient(circle at 8% 12%, rgba(58, 127, 163, 0.18), transparent 34%),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa .map-consult {
    background:
        linear-gradient(rgba(79, 175, 142, 0.15), rgba(79, 175, 142, 0.15)),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa :is(
    .map-model-list article,
    .map-rate-grid article,
    .map-calculator,
    .map-result,
    .public-blog-card,
    .public-blog-grid article,
    .public-reference-card,
    .public-config-needed,
    .public-calculation-mode,
    .public-cyclic-field,
    .public-calculation-result-panel,
    .public-calculation-facts article
) {
    border-color: rgba(58, 127, 163, 0.3);
    background:
        linear-gradient(rgba(58, 127, 163, 0.15), rgba(58, 127, 163, 0.15)),
        var(--uranus-white);
    color: var(--uranus-black);
    box-shadow: 0 14px 36px rgba(23, 52, 61, 0.15);
}

.public-template-mapa :is(.public-blog-card, .public-reference-card):nth-child(even) {
    border-color: rgba(79, 175, 142, 0.3);
    background:
        linear-gradient(rgba(79, 175, 142, 0.18), rgba(79, 175, 142, 0.18)),
        var(--uranus-white);
}

.public-template-mapa :is(
    .map-primary,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button,
    .public-blog-carousel-button,
    .public-reference-control,
    .public-sticky-cta,
    .public-cyclic-add-button
) {
    border-color: var(--uranus-green);
    background: var(--uranus-green);
    color: var(--uranus-black) !important;
}

.public-template-mapa :is(
    .map-primary,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button,
    .public-blog-carousel-button,
    .public-reference-control,
    .public-sticky-cta,
    .public-cyclic-add-button
):hover,
.public-template-mapa :is(
    .map-primary,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button,
    .public-blog-carousel-button,
    .public-reference-control,
    .public-sticky-cta,
    .public-cyclic-add-button
):focus-visible {
    border-color: var(--uranus-blue);
    background: var(--uranus-blue);
    color: var(--uranus-black) !important;
}

.public-template-mapa :is(.map-secondary, .public-banner-secondary) {
    border-color: rgba(58, 127, 163, 0.3);
    background: rgba(58, 127, 163, 0.18);
    color: var(--uranus-black);
}

.public-template-mapa :is(.map-secondary, .public-banner-secondary):hover,
.public-template-mapa :is(.map-secondary, .public-banner-secondary):focus-visible {
    background: rgba(79, 175, 142, 0.25);
    color: var(--uranus-black);
}

.public-template-mapa .public-period-selector button,
.public-template-mapa .public-calculation-mode label,
.public-template-mapa .public-cyclic-day {
    border-color: rgba(58, 127, 163, 0.3);
    background: rgba(58, 127, 163, 0.15);
    color: var(--uranus-black);
}

.public-template-mapa .public-period-selector button:is(.is-active, [aria-pressed="true"]),
.public-template-mapa .public-calculation-mode label:has(input:checked) {
    border-color: var(--uranus-blue) !important;
    background: var(--uranus-blue) !important;
    color: var(--uranus-black) !important;
}

.public-template-mapa :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-cyclic-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-contact-form input,
    .public-contact-form textarea,
    .public-contact-form .country-picker-button,
    .public-contact-form .country-picker-menu
) {
    border-color: rgba(58, 127, 163, 0.3);
    background: var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-mapa .public-time24-picker [data-public-time24-display].is-placeholder {
    color: var(--uranus-black);
    opacity: 0.58;
}

.public-template-mapa .public-time24-badge,
.public-template-mapa .public-contact-notice {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(79, 175, 142, 0.18);
    color: var(--uranus-black);
}

.public-template-mapa .public-calculation-facts article.public-discount-fact {
    border-color: var(--uranus-blue);
    background:
        linear-gradient(rgba(58, 127, 163, 0.18), rgba(58, 127, 163, 0.18)),
        var(--uranus-white);
    box-shadow: inset 4px 0 0 var(--uranus-blue);
}

.public-template-mapa .public-calculation-facts article.public-discount-total-fact {
    border-color: var(--uranus-green);
    background:
        linear-gradient(rgba(79, 175, 142, 0.18), rgba(79, 175, 142, 0.18)),
        var(--uranus-white);
    box-shadow: inset 4px 0 0 var(--uranus-green);
}

.public-template-mapa .public-price-detail :is(th, td).public-discount-column {
    background: rgba(58, 127, 163, 0.18);
    color: var(--uranus-black);
}

.public-template-mapa .public-price-detail tr.is-total .public-discount-column {
    background: rgba(79, 175, 142, 0.25);
    color: var(--uranus-black);
}

.public-template-mapa .map-banner {
    background:
        radial-gradient(circle at 96% 50%, rgba(255, 255, 255, 0.25), transparent 32%),
        linear-gradient(135deg, var(--uranus-green) 0%, var(--uranus-blue) 100%);
    color: var(--uranus-black);
}

.public-template-mapa .map-banner :is(h2, p) {
    color: var(--uranus-black);
}

.public-template-mapa .map-contact {
    background:
        radial-gradient(circle at 92% 12%, rgba(79, 175, 142, 0.18), transparent 34%),
        linear-gradient(rgba(58, 127, 163, 0.18), rgba(58, 127, 163, 0.18)),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa .map-footer {
    border-top: 1px solid rgba(58, 127, 163, 0.3);
    background:
        linear-gradient(rgba(79, 175, 142, 0.15), rgba(79, 175, 142, 0.15)),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa .map-footer :is(
    .public-footer-brand strong,
    .public-footer-brand p,
    .public-footer-column,
    .public-footer-column > strong,
    .public-footer-column a,
    .public-footer-email,
    .public-footer-email span,
    .public-footer-bottom
) {
    color: var(--uranus-black);
}

.public-template-mapa .public-footer-socials a,
.public-template-mapa .map-socials a,
.public-template-mapa .public-whatsapp-float {
    border-color: var(--uranus-green);
    background: var(--uranus-green);
    color: var(--uranus-black);
}

.public-template-mapa.public-blog-list-page:not([data-public-theme="dark"]),
.public-template-mapa.public-blog-detail-page:not([data-public-theme="dark"]) {
    background:
        radial-gradient(circle at 90% 4%, rgba(58, 127, 163, 0.18), transparent 30%),
        var(--uranus-white);
    color: var(--uranus-black);
}

.public-template-mapa:not([data-public-theme="dark"]) :is(
    .public-blog-list-hero h1,
    .public-blog-list-hero p,
    .public-blog-list-hero span,
    .public-blog-list-card h2,
    .public-blog-list-card p,
    .public-blog-list-card small,
    .public-blog-list-card a,
    .public-blog-detail-head,
    .public-blog-detail-head h1,
    .public-blog-entry-text,
    .public-blog-entry-text p,
    .public-blog-detail-back
) {
    color: var(--uranus-black);
}

.public-template-mapa:not([data-public-theme="dark"]) .public-blog-list-card {
    border-color: rgba(58, 127, 163, 0.3);
    background:
        linear-gradient(rgba(79, 175, 142, 0.15), rgba(79, 175, 142, 0.15)),
        var(--uranus-white);
    box-shadow: 0 16px 38px rgba(23, 52, 61, 0.15);
}

.public-template-mapa[data-public-theme="dark"] {
    --public-surface: var(--uranus-petrol);
    --public-soft: var(--uranus-blue-soft);
    --public-ink: var(--uranus-white);
    --public-muted: var(--uranus-white);
    --public-line: rgba(58, 127, 163, 0.3);
    background: var(--uranus-petrol);
    color: var(--uranus-white);
    color-scheme: dark;
}

.public-template-mapa[data-public-theme="dark"] .public-sticky-nav {
    border-bottom-color: rgba(79, 175, 142, 0.3);
    background: rgba(58, 127, 163, 0.2);
    color: var(--uranus-white);
    box-shadow: 0 16px 44px rgba(23, 52, 61, 0.3);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.public-template-mapa[data-public-theme="dark"] .public-sticky-nav :is(
    .public-design-brand strong,
    .public-design-brand > span,
    .public-sticky-links a,
    .public-sticky-socials a,
    .public-theme-toggle
) {
    color: var(--uranus-white);
    text-shadow: none;
}

.public-template-mapa[data-public-theme="dark"]
    .public-sticky-nav
    .public-design-brand
    img,
.public-template-mapa[data-public-theme="dark"]
    .public-sticky-nav
    .public-design-brand
    > span {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(255, 255, 255, 0.2);
}

.public-template-mapa[data-public-theme="dark"] .public-sticky-links > a:hover,
.public-template-mapa[data-public-theme="dark"] .public-sticky-links > a:focus-visible,
.public-template-mapa[data-public-theme="dark"] .public-sticky-socials a:hover,
.public-template-mapa[data-public-theme="dark"] .public-sticky-socials a:focus-visible {
    background: rgba(79, 175, 142, 0.25);
}

.public-template-mapa[data-public-theme="dark"] .public-sticky-theme {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(23, 52, 61, 0.25);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] :is(
    h1,
    h2,
    h3,
    p,
    strong,
    small,
    dd,
    label,
    .field-label-line,
    .public-blog-card-more,
    .public-reference-location,
    .public-blog-list-card a,
    .public-blog-detail-back
) {
    color: var(--uranus-white) !important;
}

.public-template-mapa[data-public-theme="dark"] .map-first {
    background:
        radial-gradient(circle at 86% 14%, rgba(58, 127, 163, 0.3), transparent 36%),
        radial-gradient(circle at 12% 88%, rgba(79, 175, 142, 0.18), transparent 38%),
        var(--uranus-petrol);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .map-hero-media img {
    opacity: 0.72;
    filter: brightness(0.72) saturate(0.85);
}

.public-template-mapa[data-public-theme="dark"] .map-hero-media::after {
    background:
        linear-gradient(115deg, rgba(23, 52, 61, 0.2), rgba(58, 127, 163, 0.16)),
        linear-gradient(rgba(23, 52, 61, 0.15), rgba(23, 52, 61, 0.2));
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-vehicles,
    .map-rates,
    .map-consult,
    .map-standalone-location,
    .map-gallery,
    .map-blog,
    .map-comments,
    .map-contact
) {
    background:
        radial-gradient(circle at 92% 8%, rgba(58, 127, 163, 0.2), transparent 34%),
        var(--uranus-petrol);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] :is(.map-rates, .map-blog, .map-contact) {
    background:
        radial-gradient(circle at 10% 12%, rgba(79, 175, 142, 0.18), transparent 34%),
        var(--uranus-petrol);
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-arrival-card,
    .map-model-list article,
    .map-rate-grid article,
    .map-calculator,
    .map-result,
    .public-blog-card,
    .public-blog-grid article,
    .public-reference-card,
    .public-config-needed,
    .public-calculation-mode,
    .public-cyclic-field,
    .public-calculation-result-panel,
    .public-calculation-facts article,
    .public-blog-list-card
) {
    border-color: rgba(58, 127, 163, 0.3);
    background: rgba(58, 127, 163, 0.18);
    color: var(--uranus-white);
    box-shadow: 0 16px 38px rgba(23, 52, 61, 0.3);
}

.public-template-mapa[data-public-theme="dark"]
    :is(.public-blog-card, .public-reference-card):nth-child(even) {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(79, 175, 142, 0.18);
}

.public-template-mapa[data-public-theme="dark"] .map-arrival-card dl div,
.public-template-mapa[data-public-theme="dark"] .map-chip-grid span {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(79, 175, 142, 0.15);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-arrival-card dt,
    .public-design-calculator-head > span,
    .map-vehicles > div > span,
    .map-section-head > span,
    .public-section-head > span,
    .public-category-price,
    .public-calculation-total > strong
) {
    color: var(--uranus-green) !important;
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-hero-canvas,
    .map-first .public-design-map-fallback
) {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(58, 127, 163, 0.18);
    box-shadow: 0 24px 60px rgba(23, 52, 61, 0.3);
}

.public-template-mapa[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-price-grid select,
    .public-price-grid .public-time24,
    .public-cyclic-grid .public-time24,
    .public-time24-picker-popover,
    .public-time24-picker-popover select,
    .public-contact-form input,
    .public-contact-form textarea,
    .public-contact-form .country-picker-button,
    .public-contact-form .country-picker-menu
) {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(58, 127, 163, 0.15);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] :is(
    .public-price-grid input,
    .public-contact-form input,
    .public-contact-form textarea
)::placeholder,
.public-template-mapa[data-public-theme="dark"]
    .public-time24-picker
    [data-public-time24-display].is-placeholder {
    color: var(--uranus-white);
    opacity: 0.68;
}

.public-template-mapa[data-public-theme="dark"] .public-time24-badge,
.public-template-mapa[data-public-theme="dark"] .public-contact-notice,
.public-template-mapa[data-public-theme="dark"] .public-calculation-mode label,
.public-template-mapa[data-public-theme="dark"] .public-cyclic-day,
.public-template-mapa[data-public-theme="dark"] .public-period-selector button {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(79, 175, 142, 0.15);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"]
    .public-period-selector
    button:is(.is-active, [aria-pressed="true"]),
.public-template-mapa[data-public-theme="dark"]
    .public-calculation-mode
    label:has(input:checked) {
    border-color: var(--uranus-green) !important;
    background: var(--uranus-green) !important;
    color: var(--uranus-petrol) !important;
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-primary,
    .public-banner-primary,
    .public-contact-submit,
    .public-price-grid button,
    .public-blog-carousel-button,
    .public-reference-control,
    .public-sticky-cta,
    .public-cyclic-add-button
) {
    border-color: var(--uranus-green) !important;
    background: var(--uranus-green) !important;
    color: var(--uranus-petrol) !important;
}

.public-template-mapa[data-public-theme="dark"] :is(
    .map-secondary,
    .public-banner-secondary
) {
    border-color: rgba(79, 175, 142, 0.3);
    background: rgba(58, 127, 163, 0.22);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .public-calculation-facts article.public-discount-fact,
.public-template-mapa[data-public-theme="dark"] .public-price-detail :is(th, td).public-discount-column {
    border-color: var(--uranus-blue);
    background: rgba(58, 127, 163, 0.25);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .public-calculation-facts article.public-discount-total-fact,
.public-template-mapa[data-public-theme="dark"]
    .public-price-detail
    tr.is-total
    .public-discount-column {
    border-color: var(--uranus-green);
    background: rgba(79, 175, 142, 0.25);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .map-banner {
    background:
        radial-gradient(circle at 96% 50%, rgba(79, 175, 142, 0.2), transparent 32%),
        linear-gradient(rgba(58, 127, 163, 0.25), rgba(58, 127, 163, 0.25)),
        var(--uranus-petrol);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .map-banner :is(h2, p) {
    color: var(--uranus-white) !important;
}

.public-template-mapa[data-public-theme="dark"] .map-footer {
    border-top-color: rgba(79, 175, 142, 0.3);
    background:
        linear-gradient(rgba(58, 127, 163, 0.2), rgba(58, 127, 163, 0.2)),
        var(--uranus-petrol);
    color: var(--uranus-white);
}

.public-template-mapa[data-public-theme="dark"] .map-footer :is(
    .public-footer-brand strong,
    .public-footer-brand p,
    .public-footer-column,
    .public-footer-column > strong,
    .public-footer-column a,
    .public-footer-email,
    .public-footer-email span,
    .public-footer-bottom
) {
    color: var(--uranus-white) !important;
}

.public-template-mapa[data-public-theme="dark"] .public-footer-socials a,
.public-template-mapa[data-public-theme="dark"] .map-socials a,
.public-template-mapa[data-public-theme="dark"] .public-whatsapp-float {
    border-color: var(--uranus-green);
    background: var(--uranus-green);
    color: var(--uranus-petrol);
}

.public-template-mapa.public-blog-list-page[data-public-theme="dark"],
.public-template-mapa.public-blog-detail-page[data-public-theme="dark"] {
    background:
        radial-gradient(circle at 90% 4%, rgba(58, 127, 163, 0.25), transparent 30%),
        var(--uranus-petrol);
    color: var(--uranus-white);
}

@media (max-width: 760px) {
    .public-template-mapa .map-first {
        padding-right: 16px;
        padding-left: 16px;
    }

    .public-template-mapa .map-hero-grid,
    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-mapa
        .map-hero-grid {
        gap: 22px;
    }

    .public-template-mapa .map-arrival-card {
        gap: 15px;
        padding: 22px 18px;
    }

    .public-template-mapa .map-arrival-card h1 {
        font-size: clamp(42px, 15vw, 64px);
    }

    .public-template-mapa .map-hero-canvas,
    .public-template-mapa .map-first .public-design-map-fallback {
        height: clamp(320px, 64vh, 440px);
    }

    .public-template-mapa .public-sticky-nav {
        background: rgba(58, 127, 163, 0.25);
    }
}

/* Identidad externa: ningún modelo ni modo puede tematizar WhatsApp. */
html body .public-whatsapp-float,
html body .public-whatsapp-float:is(:hover, :focus, :focus-visible, :active) {
    background: var(--whatsapp-brand-green) !important;
    color: #ffffff !important;
}

/* ===== Portada 1600 × 700 (2,3:1), navbar traslúcida y recortador ===== */

.public-sticky-nav {
    transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.public-site[data-hide-nav-before-footer] > .public-sticky-nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.18s ease, transform 0.22s ease, visibility 0s linear;
}

.public-site[data-hide-nav-before-footer] > .public-sticky-nav.is-nav-hidden {
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

@media (prefers-reduced-motion: reduce) {
    .public-site[data-hide-nav-before-footer] > .public-sticky-nav,
    .public-site[data-hide-nav-before-footer] > .public-sticky-nav.is-nav-hidden {
        transition: none;
    }
}

.public-template-clasica .public-sticky-nav {
    background: linear-gradient(90deg, rgba(95, 122, 74, 0.84) 0%, rgba(95, 122, 74, 0.84) 62%, rgba(160, 106, 69, 0.84) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-template-clasica .public-sticky-nav.is-nav-compact {
    background: linear-gradient(90deg, rgba(95, 122, 74, 0.7) 0%, rgba(95, 122, 74, 0.7) 62%, rgba(160, 106, 69, 0.7) 100%);
    box-shadow: 0 14px 34px rgba(32, 21, 14, 0.22);
}

.public-template-clasica[data-public-theme="dark"] .public-sticky-nav {
    background: linear-gradient(90deg, rgba(33, 43, 26, 0.86) 0%, rgba(33, 43, 26, 0.86) 58%, rgba(56, 37, 24, 0.86) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-template-clasica[data-public-theme="dark"] .public-sticky-nav.is-nav-compact {
    background: linear-gradient(90deg, rgba(33, 43, 26, 0.74) 0%, rgba(33, 43, 26, 0.74) 58%, rgba(56, 37, 24, 0.74) 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

/* El recuadro de la portada deja más imagen visible sin perder contraste. */
.public-template-clasica .visual-copy {
    max-width: min(900px, 100%);
    padding-inline: clamp(22px, 3vw, 40px);
    background: linear-gradient(135deg, rgba(95, 122, 74, 0.56) 0%, rgba(95, 122, 74, 0.56) 52%, rgba(160, 106, 69, 0.56) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.public-template-urbana .public-sticky-nav {
    background: linear-gradient(112deg, rgba(227, 179, 65, 0.86) 0%, rgba(217, 107, 43, 0.86) 52%, rgba(230, 57, 70, 0.86) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-template-urbana .public-sticky-nav.is-nav-compact {
    background: linear-gradient(112deg, rgba(227, 179, 65, 0.72) 0%, rgba(217, 107, 43, 0.72) 52%, rgba(230, 57, 70, 0.72) 100%);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-sticky-nav {
    background: linear-gradient(112deg, rgba(128, 101, 31, 0.86) 0%, rgba(142, 62, 29, 0.86) 52%, rgba(128, 29, 39, 0.86) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-template-urbana.public-design-urban[data-public-theme="dark"] .public-sticky-nav.is-nav-compact {
    background: linear-gradient(112deg, rgba(128, 101, 31, 0.72) 0%, rgba(142, 62, 29, 0.72) 52%, rgba(128, 29, 39, 0.72) 100%);
}

.public-template-mapa:not([data-public-theme="dark"]) .public-sticky-nav.is-nav-compact {
    background: rgba(58, 127, 163, 0.3);
}

.public-template-mapa[data-public-theme="dark"] .public-sticky-nav.is-nav-compact {
    background: rgba(58, 127, 163, 0.28);
}

/* Bloque de portada Tierra con proporción 2,3:1 en escritorio: la imagen
   cubre desde la barra (que se ve traslúcida encima) hasta el final del
   bloque. En pantallas chicas se conserva el alto anterior. */
@media (min-width: 761px) {
    .public-template-clasica .tierra-hero {
        aspect-ratio: 1600 / 700;
        min-height: max-content;
    }

    .public-template-clasica .tierra-hero .visual-hero-grid {
        min-height: 0;
        height: 100%;
    }

    .public-design.public-template-clasica > .public-sticky-nav + [data-public-block~="portada"].tierra-hero {
        margin-top: calc(-1 * var(--public-nav-height));
        padding-top: calc(var(--public-nav-height) + 24px);
    }
}

/* Modales del recortador y de error de imagen */
.image-tool-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.image-tool-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 14, 18, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.image-tool-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(720px, 100%);
    max-height: min(90vh, 780px);
    overflow: auto;
    padding: 20px;
    border-radius: 14px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 24px 64px rgba(5, 21, 26, 0.42);
}

.image-error-modal .image-tool-modal-panel {
    width: min(460px, 100%);
}

/* El editor de identidad se habilita explícitamente desde el caller. Tiene una
   mesa de trabajo amplia sin cambiar el tamaño de los recortadores de portada
   y Blog, que comparten el mismo módulo. */
.image-crop-modal-identity .image-tool-modal-panel {
    width: min(1080px, 100%);
    max-height: min(94dvh, 940px);
    padding: 24px;
}

.image-crop-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    align-items: start;
    gap: 24px;
    min-width: 0;
}

/* La mesa siempre es cuadrada. El recorte real conserva su propia proporción:
   un logo 1:1 ocupa todo el espacio y una marca horizontal queda centrada. */
.image-crop-workspace {
    display: grid;
    place-items: center;
    width: min(680px, 100%);
    aspect-ratio: 1;
    min-width: 0;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(127, 127, 127, 0.55);
    border-radius: 12px;
}

.image-crop-workspace[data-image-crop-editor-theme="light"] {
    border-color: #000000;
    background: #ffffff;
}

.image-crop-workspace[data-image-crop-editor-theme="dark"] {
    border-color: #ffffff;
    background: #0b171b;
}

.image-crop-modal-identity .image-crop-frame {
    --image-crop-max-height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: inherit;
}

.image-crop-editor-controls {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.image-crop-editor-theme {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.image-crop-editor-theme-label {
    padding: 0;
    font-size: 13px;
    font-weight: 700;
}

.image-crop-editor-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.image-crop-editor-theme-option {
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(127, 127, 127, 0.65);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.image-crop-editor-theme-option.is-selected {
    border-color: #0b7285;
    background: #0b7285;
    color: #ffffff;
}

.image-crop-editor-theme-option:focus-visible,
.image-crop-center:focus-visible,
.image-tool-modal-download:focus-visible,
.image-tool-modal-delete:focus-visible {
    outline: 3px solid #0b7285;
    outline-offset: 2px;
}

.image-crop-editor-controls :is(.image-crop-zoom, .image-crop-aspect) {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 6px 12px;
}

.image-crop-editor-controls :is(.image-crop-zoom-label, .image-crop-aspect-label) {
    text-align: left;
}

.image-crop-editor-controls :is(.image-crop-zoom-range, .image-crop-aspect-range) {
    grid-column: 1 / -1;
    grid-row: 2;
}

.image-crop-center {
    justify-self: start;
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid rgba(127, 127, 127, 0.65);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.image-tool-modal-title {
    margin: 0;
    font-size: 18px;
    padding-right: 32px;
}

/* Cerrar: el mismo botón circular rojo con la cruz que usa la imagen de portada. */
.image-tool-modal-close {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(72, 19, 22, 0.24);
}

.image-tool-modal-close:hover,
.image-tool-modal-close:focus-visible {
    background: var(--danger);
    color: #ffffff;
    outline: 3px solid #000000;
    outline-offset: 2px;
    filter: none;
    transform: none;
}

/* Formas disponibles dentro del recortador compartido por Configuración y Blog. */
.image-crop-shape {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.image-crop-shape-label {
    font-size: 13px;
    font-weight: 600;
}

.image-crop-shape-options {
    display: flex;
    gap: 8px;
}

/* Un ícono por forma: el cuadrado y el círculo se ven tal cual quedará el logo. */
.image-crop-shape-option {
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, 0.45);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.image-crop-shape-option svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.image-crop-shape-option.is-selected {
    background: #0b7285;
    border-color: transparent;
    color: #ffffff;
}

.image-crop-shape-option.is-selected svg {
    fill: rgba(255, 255, 255, 0.22);
}

.image-crop-shape-option:disabled {
    border-color: rgba(127, 127, 127, 0.28);
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
    cursor: default;
    opacity: 1;
}

.image-crop-shape-option:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.image-tool-modal-message {
    margin: 0;
    line-height: 1.45;
}

.image-tool-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.image-tool-modal-accept,
.image-tool-modal-cancel,
.image-tool-modal-replace,
.image-tool-modal-delete,
.image-tool-modal-download {
    min-height: 40px;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* "Cambiar imagen" queda a la izquierda, separado de Cancelar y Aplicar. */
.image-tool-modal-replace {
    margin-right: auto;
    border-color: rgba(127, 127, 127, 0.55);
    background: transparent;
    color: inherit;
}

.image-tool-modal-replace:hover,
.image-tool-modal-replace:focus-visible {
    border-color: rgba(11, 114, 133, 0.75);
}

.image-tool-modal-accept {
    background: #0b7285;
    color: #ffffff;
}

.image-tool-modal-accept:hover,
.image-tool-modal-accept:focus-visible {
    background: #095e6d;
}

.image-tool-modal-cancel {
    background: transparent;
    border-color: rgba(127, 127, 127, 0.55);
    color: inherit;
}

.image-tool-modal-delete {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.image-tool-modal-download {
    border-color: #0b7285;
    background: transparent;
    color: inherit;
}

.image-tool-modal-download:disabled {
    cursor: wait;
}

.image-crop-modal-identity .image-tool-modal-actions {
    flex-wrap: wrap;
}

/* El alto del recuadro está topeado para que la forma, el zoom y los botones
   entren en el modal sin scrollear; el JS traduce ese tope a un max-width según
   la proporción, que es lo único que puede acotar el alto sin romperla. */
.image-crop-frame {
    --image-crop-max-height: min(46vh, 380px);
    position: relative;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
    aspect-ratio: 1600 / 700;
    border-radius: 10px;
    background: #0b171b;
    cursor: grab;
    touch-action: none;
}

.image-crop-frame.is-dragging {
    cursor: grabbing;
}

/* Las guías aparecen únicamente mientras la gravedad mantiene el centro. */
.image-crop-axis-guide {
    position: absolute;
    z-index: 3;
    display: block;
    pointer-events: none;
    background: #00b8d4;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
}

.image-crop-axis-guide[hidden] {
    display: none;
}

.image-crop-axis-guide-vertical {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
}

.image-crop-axis-guide-horizontal {
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    transform: translateY(-0.5px);
}

/* El corte redondo se marca con un anillo claro y otro oscuro pegados al borde
   del círculo, más el velo que apaga las esquinas descartadas. Sólo con velo no
   se ve: oscurecer un logo que ya es oscuro no cambia casi nada. Los anillos van
   hacia adentro porque el círculo es tangente a los cuatro lados del recuadro y
   cualquier anillo hacia afuera queda cortado por el overflow. */
.image-crop-frame-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.92),
        inset 0 0 0 4px rgba(4, 12, 16, 0.55),
        0 0 0 100vmax rgba(4, 12, 16, 0.6);
    pointer-events: none;
}

.image-crop-workspace[data-image-crop-editor-theme="light"] .image-crop-frame-circle::after {
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.9),
        inset 0 0 0 4px rgba(255, 255, 255, 0.8),
        0 0 0 100vmax rgba(255, 255, 255, 0.72);
}

/* En alto contraste el navegador descarta box-shadow: ahí el círculo se marca
   con el mismo par claro/oscuro, pero con colores del sistema. */
@media (forced-colors: active) {
    .image-crop-frame-circle::after {
        border: 2px solid CanvasText;
        outline: 2px solid Canvas;
        outline-offset: -4px;
    }
}

.image-crop-picture {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    user-select: none;
    pointer-events: none;
}

/* El zoom y el ancho del recuadro son la misma fila —nombre, barra y número— y
   comparten la grilla para que las dos barras arranquen y terminen igual. Las
   columnas de los costados son fijas: si no, la fila se corre al pasar de 9 % a
   100 % o de 700 a 2100 px. */
.image-crop-zoom,
.image-crop-aspect {
    display: grid;
    grid-template-columns: 132px minmax(0, 320px) 104px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.image-crop-zoom-label,
.image-crop-aspect-label {
    text-align: right;
}

.image-crop-zoom-range,
.image-crop-aspect-range {
    width: 100%;
    min-width: 0;
}

/* Una imagen que ya está en el mínimo no se puede acercar; el estado del
   control lo comunica sin atenuar el texto de la fila. */
.image-crop-zoom.is-disabled {
    opacity: 1;
}

.image-crop-zoom-range:disabled {
    cursor: default;
}

.image-crop-zoom-value,
.image-crop-aspect-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* En pantallas angostas no entran las tres columnas: el nombre y el número
   comparten una línea y la barra se estira debajo, a lo ancho del modal. */
@media (max-width: 620px) {
    .image-crop-zoom,
    .image-crop-aspect {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: stretch;
        gap: 6px 12px;
    }

    .image-crop-zoom-label,
    .image-crop-aspect-label {
        text-align: left;
    }

    .image-crop-zoom-range,
    .image-crop-aspect-range {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .image-crop-modal-identity.image-tool-modal {
        padding: 12px;
    }

    .image-crop-modal-identity .image-tool-modal-panel {
        max-height: calc(100dvh - 24px);
        padding: 18px;
    }

    .image-crop-modal-identity .image-tool-modal-actions {
        align-items: stretch;
    }

    .image-crop-modal-identity .image-tool-modal-actions > :is(
        .image-tool-modal-replace,
        .image-tool-modal-cancel,
        .image-tool-modal-delete,
        .image-tool-modal-download,
        .image-tool-modal-accept
    ) {
        flex: 1 1 calc(50% - 10px);
        margin-right: 0;
    }
}

@media (max-width: 840px) {
    .image-crop-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .image-crop-workspace {
        width: min(560px, 100%);
    }
}

/* Forma del logo (se elige dentro del recorte) e imagen de marca en Configuración */
[data-logo-upload-field][data-logo-forma="circular"] .logo-upload-preview,
[data-identity-theme-upload][data-logo-forma="circular"] .logo-upload-preview {
    border-radius: 50%;
}

.logo-upload-preview-marca,
[data-marca-upload-field] .logo-upload-preview,
[data-identity-image-kind="brand"] .logo-upload-preview {
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.identity-image-upload-field {
    align-self: start;
}

/* Mantiene las dos ternas de identidad en el orden visual del formulario:
   nombre, logo e imagen del nombre de empresa; luego los del estacionamiento. */
.location-section .identity-company-image-field {
    order: 1;
}

.location-section .identity-parking-image-field {
    order: 2;
}

.identity-theme-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.identity-theme-panel {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.identity-theme-panel[data-identity-theme-panel="light"] {
    background: #ffffff;
    color: #000000;
}

.identity-theme-panel[data-identity-theme-panel="dark"] {
    border-color: #35515a;
    background: #0b171b;
    color: #ffffff;
}

.identity-theme-panel-label {
    min-width: 0;
    color: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    text-transform: none;
}

.identity-theme-panel > .identity-image-field {
    min-width: 0;
}

.identity-upload-heading {
    min-height: 42px;
    justify-content: space-between;
}

.identity-upload-launcher,
.entry-form .identity-upload-launcher {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--brand-primary);
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
}

.identity-upload-launcher:hover,
.identity-upload-launcher:focus-visible,
.entry-form .identity-upload-launcher:hover,
.entry-form .identity-upload-launcher:focus-visible {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.identity-theme-panel .logo-upload-control {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
}

/* Los logos son cuadrados o circulares: el bloque de atrás acompaña esa forma
   en vez de estirarse como un rectángulo ancho. Las imágenes de marca sí son
   apaisadas y conservan el panel rectangular. */
[data-identity-theme-upload][data-identity-image-kind="logo"] .identity-theme-toolbar {
    grid-template-columns: repeat(2, max-content);
}

[data-identity-theme-upload][data-identity-image-kind="logo"] .identity-theme-panel {
    justify-items: center;
    width: max-content;
    min-width: 92px;
}

[data-identity-theme-upload][data-identity-image-kind="logo"] .identity-theme-panel .logo-upload-control {
    width: 56px;
    height: 56px;
    min-height: 0;
    justify-content: center;
}

[data-identity-theme-upload][data-identity-image-kind="logo"] .logo-upload-preview {
    width: 56px;
    height: 56px;
}

[data-identity-theme-upload] .logo-upload-preview {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.identity-theme-panel[data-identity-theme-panel="dark"] .logo-upload-preview {
    border: 0;
    background: transparent;
}

.identity-theme-panel > .logo-upload-status {
    max-width: 100%;
    text-align: left;
}

.identity-theme-panel > .logo-upload-status:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 760px) {
    .variables-subsection-body.location-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .variables-subsection-body.location-section > label,
    .variables-subsection-body.location-section > .logo-upload-field {
        grid-column: 1 / -1;
    }

    .identity-theme-panel .logo-upload-preview-marca {
        max-width: 82px;
    }

}

@media (max-width: 420px) {
    .identity-theme-toolbar {
        gap: 6px;
    }

    .identity-theme-panel {
        padding: 6px;
    }

    .identity-theme-panel .logo-upload-preview-marca {
        max-width: min(82px, 100%);
    }

}

/* El botón "!" hereda el min-width y el padding de los botones del formulario
   (.entry-form button los estira a 160 px): acá se lo devuelve a su círculo. */
.entry-form .public-field-info-button,
.logo-field-info .public-field-info-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.entry-form .public-field-info-button:hover,
.entry-form .public-field-info-button:focus-visible {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    filter: none;
    transform: translateY(-2px);
}

html[data-theme="dark"] .app-shell .entry-form .public-field-info-button {
    border-color: transparent;
    background: transparent;
    color: #D8B4FE;
}

html[data-theme="dark"] .app-shell .entry-form .public-field-info-button:hover,
html[data-theme="dark"] .app-shell .entry-form .public-field-info-button:focus-visible {
    border-color: transparent;
    background: rgba(105, 210, 218, 0.14);
    color: #D8B4FE;
}

/* Accesos rápidos y alineación del cuadro: los tres modelos comparten los
   mismos chips para mantener un solo formato de opciones. */
.public-portada-buttons-field,
.public-portada-posicion-field {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.public-portada-buttons-field legend,
.public-portada-posicion-field legend {
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-portada-buttons-field[hidden],
.public-portada-posicion-field[hidden] {
    display: none !important;
}

.public-portada-buttons-hint {
    margin: 0;
    font-size: 13px;
    opacity: 1;
}

.public-portada-buttons-options,
.public-portada-posicion-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Un solo tamaño de chip para Accesos rápidos y Alineación del cuadro: 44 px de
   alto y 118 px de ancho mínimo, para que todos midan igual y ninguno quede
   más chico por tener el nombre más corto. `position: relative` sólo ancla el
   checkbox escondido. */
.public-portada-button-check,
.public-portada-posicion-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    min-width: 118px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

/* El !important evita que la regla oscura de inputs deshabilitados del
   app-shell vuelva visible el checkbox nativo dentro del chip. */
.public-portada-button-check input,
.public-portada-posicion-option input {
    position: absolute;
    opacity: 0 !important;
    pointer-events: none;
}

.public-portada-button-check:has(input:checked),
.public-portada-posicion-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

.public-page-builder-parking .public-portada-button-check > span,
.public-page-builder-parking .public-portada-posicion-option > span {
    color: var(--brand-primary);
}

.public-page-builder-parking .public-portada-button-check:has(input:checked) > span,
.public-page-builder-parking .public-portada-posicion-option:has(input:checked) > span {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-page-builder-parking .public-portada-button-check:not(:has(input:checked)) > span,
html[data-theme="dark"] .app-shell .public-page-builder-parking .public-portada-posicion-option:not(:has(input:checked)) > span {
    color: #D8B4FE;
}

/* El JS deshabilita solo los no marcados al llegar al tope de 2. */
.public-portada-button-check:has(input:disabled),
.public-portada-posicion-option:has(input:disabled) {
    cursor: default;
    opacity: 1;
}

/* Logo circular e imagen de marca en la página pública */
.public-design-brand-circular img:not(.public-design-brand-marca) {
    border-radius: 50%;
}

.public-identity-image-dark {
    display: none;
}

.public-design[data-public-theme="dark"] .public-identity-image-light {
    display: none;
}

.public-design[data-public-theme="dark"] .public-identity-image-dark {
    display: block;
}

/* Las variantes creadas específicamente para fondo oscuro suelen ser blancas
   o transparentes: no deben quedar sobre la placa clara del logo diurno. */
.public-design[data-public-theme="dark"]
    .public-sticky-nav
    .public-design-brand
    img.public-identity-image-dark-explicit:not(.public-design-brand-marca) {
    border-color: rgba(255, 255, 255, 0.24);
    background: transparent;
}

.public-identity-image-dark[hidden] {
    display: none !important;
}

.public-design[data-public-theme="dark"] .public-identity-image-light.identity-theme-fallback {
    display: block;
}

.public-sticky-nav .public-design-brand .public-design-brand-marca {
    width: auto;
    max-width: 162px;
    height: 54px;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

.public-footer-logo-circular img {
    border-radius: 50%;
}

.public-design .public-sticky-nav .public-design-brand img.public-design-brand-marca {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ===== Posición del bloque de portada (izquierda o derecha) ===== */

.visual-hero.is-hero-right .visual-copy {
    justify-self: end;
}

@media (min-width: 1121px) {
    .public-template-urbana .urban-hero {
        padding-inline: max(18px, calc((100vw - 1760px) / 2));
    }

    .public-template-urbana .urban-hero-grid,
    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-urbana
        .urban-hero-grid {
        gap: clamp(48px, 3.2vw, 60px);
    }

    .urban-hero.is-hero-right .urban-hero-grid {
        grid-template-columns: minmax(360px, 0.5fr) minmax(0, 1fr);
    }

    .public-page-builder-parking
        .public-page-owner-preview
        .public-template-urbana
        .urban-hero.is-hero-right
        .urban-hero-grid {
        grid-template-columns: minmax(400px, 0.58fr) minmax(0, 1fr);
    }

    .public-template-mapa .map-first {
        padding-inline: max(18px, calc((100vw - 1760px) / 2));
    }

    .public-template-mapa .map-hero-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        gap: clamp(40px, 2.6vw, 52px);
    }

    .public-template-mapa .map-first.is-hero-right .map-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    }

    .public-template-mapa .map-arrival-card h1 {
        font-size: clamp(52px, 5vw, 96px);
    }

    .public-template-mapa :is(.map-hero-canvas, .map-first .public-design-map-fallback) {
        width: 95%;
        height: clamp(350px, 41vh, 440px);
        justify-self: end;
    }

    .public-template-mapa .map-first.is-hero-right
        :is(.map-hero-canvas, .public-design-map-fallback) {
        justify-self: start;
    }

    .map-first:not(.is-hero-right) .map-arrival-card,
    .urban-hero.is-hero-right .urban-status {
        grid-column: 1;
        grid-row: 1;
    }

    .map-first:not(.is-hero-right) :is(.map-hero-canvas, .public-design-map-fallback),
    .urban-hero.is-hero-right .urban-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .map-first.is-hero-right .map-arrival-card {
        grid-column: 2;
    }
}

/* El degradado oscuro acompaña al bloque: si el texto va a la derecha, el
   lado oscuro de la imagen también. */
.visual-hero.is-hero-right {
    --public-hero-overlay-angle: 270deg;
}

@media (max-width: 760px) {
    .visual-hero.is-hero-right .visual-copy {
        justify-self: stretch;
    }
}

/* ===== Barra de formato y etiquetas del texto de portada ===== */

.public-hero-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.public-hero-format-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

.public-hero-format-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.public-hero-format-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.public-hero-format-button:hover,
.public-hero-format-button:focus-visible {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.public-hero-toolbar-separator {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--line);
}

/* Las etiquetas son botones sueltos de la misma barra que B / I / U, no un
   recuadro aparte. Cuando no entran al lado del grupo de formato bajan a su
   propio renglón (y a un segundo si hacen falta) en vez de superponerse con el
   estilo de letra o la alineación. Sin tope de alto a propósito: un scroll
   acá escondería etiquetas. */
.public-hero-tags-group {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.public-hero-tag-button {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-transform: none;
}

.public-hero-tag-button:hover,
.public-hero-tag-button:focus-visible {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.08);
    color: var(--brand-primary);
}

/* Texto de portada con formato: párrafos reales y alineación por párrafo. */
.public-hero-description {
    display: grid;
    gap: 20px;
}

.public-hero-description[hidden] {
    display: none;
}

/* La alineación se mide contra el ancho del bloque, no contra el max-width
   heredado del párrafo suelto que había antes. */
.public-hero-description > p {
    max-width: none;
    margin: 0;
}

.public-hero-align-center {
    text-align: center;
}

.public-hero-align-right {
    text-align: right;
}

/* La barra de formato en el editor oscuro y el foco visible por teclado. */
html[data-theme="dark"] .app-shell .public-hero-format-button {
    border-color: #526a73;
    background: #111c21;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-hero-tag-button {
    border-color: #3f737b;
    background: #143037;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-hero-tag-button:hover,
html[data-theme="dark"] .app-shell .public-hero-tag-button:focus-visible {
    border-color: #7be1e7;
    background: #1a464d;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-hero-toolbar-separator {
    background: #526a73;
}

html[data-theme="dark"] .app-shell .public-hero-format-button:hover,
html[data-theme="dark"] .app-shell .public-hero-format-button:focus-visible {
    border-color: #7fd4de;
    color: #7fd4de;
}

.public-hero-format-button:focus-visible,
.public-hero-tag-button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.35);
    outline-offset: 1px;
}

/* Sin imagen el fondo de reemplazo también acompaña al bloque de texto. */
.visual-hero-without-image.is-hero-right {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(225deg, var(--public-accent-strong), var(--public-accent));
}

/* --- Portada: círculo de ayuda, láminas sugeridas ------------------------- */

/* El editor de Página web no es un .entry-form, así que no le llega el 17 px
   que en Configuración achica el círculo (03-gastos.css). Se replica acá para
   que el "!" de Portada se vea igual al de Modalidades de ingreso. */
.public-image-upload-heading .cyclic-help-button,
.public-portada-apartados-field > legend .cyclic-help-button,
.public-portada-buttons-field > legend .cyclic-help-button {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    flex: 0 0 17px;
    font-size: 11px;
}

/* El <legend> es display:block y dejaría el círculo apoyado sobre la línea
   base del rótulo. */
.public-portada-buttons-field > legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Las seis portadas predeterminadas dentro del recorte. */
.image-crop-presets {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.image-crop-presets-label {
    padding: 0;
    font-size: 12px;
    font-weight: 600;
}

.image-crop-presets-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.image-crop-preset-option {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, 0.45);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.image-crop-preset-option img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 700;
    object-fit: cover;
}

.image-crop-preset-option:hover,
.image-crop-preset-option:focus-visible {
    border-color: #0b7285;
    outline: none;
}

.image-crop-preset-option[disabled] {
    cursor: progress;
    opacity: 0.55;
}

.image-crop-presets-help {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.75;
}

/* La etiqueta de una red se publica como enlace. Se distingue por el subrayado
   y NO por el color: 20-texto-legible.css fuerza el color del texto de portada
   y hay un contrato de contraste que lo verifica. */
.public-hero-description a,
.public-hero-tag-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* En el editor, las etiquetas que van a quedar clickeables se marcan igual. */
.public-hero-tag-button-red {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Accesos rápidos: número de orden e ícono de red --------------------- */

/* El número aparece sólo en los accesos elegidos: es su posición en la web. */
.public-portada-button-order {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.public-portada-button-check:not(:has(input:checked)) .public-portada-button-order {
    display: none;
}

html[data-theme="dark"] .app-shell .public-portada-button-order {
    background: rgba(255, 255, 255, 0.22);
}

/* --- Orden de Apartado (barra de arriba de la página pública) ------------- */

.public-portada-apartados-field {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.public-portada-apartados-field > legend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.public-portada-apartados-field[hidden] {
    display: none !important;
}

/* Horizontal a propósito: se leen de izquierda a derecha, igual que en la web. */
.public-portada-apartados-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Mismo alto que los chips de accesos rápidos, para que las dos filas del
   bloque se lean iguales. Sin número: la posición ya se ve en la fila. */
.public-portada-apartado-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 6px 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 900;
    line-height: 1.2;
    cursor: default;
    user-select: none;
}

.public-portada-apartado-chip.is-dragging {
    opacity: 0.54;
}

/* El mismo dibujo que el control de arrastre de las filas de bloques
   (.public-block-drag-handle), pero como decorado: es un <span>, no toma foco
   ni responde al clic, y sólo avisa que el chip se puede reacomodar. */
.public-portada-apartado-handle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(126, 34, 206, 0.08);
    color: var(--brand-primary);
    cursor: grab;
    touch-action: none;
}

.public-portada-apartado-handle:active {
    cursor: grabbing;
}

.public-portada-apartado-handle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-theme="dark"] .app-shell .public-portada-apartado-chip {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .public-portada-apartado-handle {
    border-color: #526a73;
    background: #101a1f;
    color: #ffffff;
}
/* Apartado Visualización: elegir qué cuadros y desplegables se ven. */

/* Apagar una pieza es ponerle `hidden`, y esa regla vive en la hoja del
   navegador: cualquier `display` de acá le gana y la pieza se sigue viendo.
   Varias tarjetas y paneles marcados traen el suyo (`.kpi-card`,
   `.variable-collapsible-section`, `.public-page-admin-panel`), así que la
   marca se apaga desde su propio atributo, que pesa más que una clase sola. */
.kpi-card[hidden],
[data-visual-id][hidden] {
    display: none;
}

.visibility-management-form {
    display: grid;
    gap: 14px;
}

/* El formulario separa las tarjetas con su `gap`. Los márgenes que traen las
   tarjetas desplegables sueltas en la página se sumaban a ese hueco y dejaban
   los apartados al doble de distancia que en las demás pestañas. */
.visibility-management-form > .visibility-panel {
    margin-top: 0;
}

.visibility-body {
    display: grid;
    gap: 20px;
    margin-top: 4px;
}

.visibility-section-title {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.visibility-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.visibility-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.visibility-name {
    font-size: 14px;
    font-weight: 700;
}

/* Los dos globos son los mismos de Configuración: un clic los abre, otro clic o
   Escape los cierran. Van pegados al switch, y el nombre empuja a los tres
   contra el borde derecho de la tarjeta. */
.visibility-name {
    flex: 1;
}

.visibility-hints {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

/* El ojo es un dibujo, no un carácter: el botón lo encoge al tamaño del "!". */
.visibility-hint-eye svg {
    width: 14px;
    height: 14px;
}

/* Amarillo con líneas negras el ojo de la pieza que aparece siempre: no necesita
   ningún dato cargado para dibujarse. Las demás quedan en el teal de la marca,
   que es el aviso de que hay una condición que cumplir antes de verlas. */
.visibility-hint-eye-siempre {
    background: #ffd600;
    color: #000;
}

/* Repetir ambos colores con la especificidad del tema oscuro evita que las reglas
   generales del botón conviertan el dibujo en blanco sobre teal. */
html[data-theme="dark"] .app-shell .visibility-hint-eye-siempre {
    background: #ffd600;
    color: #000;
}

/* Los dos globos cuelgan de su botón, y el de la derecha se saldría de la
   tarjeta: cada uno se corre lo justo para caer adentro. */
.visibility-hint-popover {
    left: auto;
    right: -74px;
    min-width: 220px;
    max-width: 280px;
    font-weight: 600;
}

.visibility-hint-wrap-cuando .visibility-hint-popover {
    right: -44px;
}

/* La vista previa es la pantalla de verdad: se abre la pestaña adentro de un
   marco, así los desplegables se abren y los cuadros abren su ventana. */
.visibility-preview-screen {
    display: grid;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.visibility-preview-marco {
    display: block;
    width: 100%;
    min-height: 120px;
    border: 0;
    background: transparent;
}

/* Las piezas que la pantalla todavía no dibuja se ven iguales a las demás, con
   un dato de ejemplo; qué les falta lo dice el círculo de su casilla. */
.visibility-preview-ejemplo-texto {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.visibility-preview-note {
    margin: 0;
    padding: 16px 4px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.visibility-actions {
    display: flex;
    justify-content: flex-end;
}

.visibility-actions .button {
    min-width: 220px;
    min-height: 44px;
}

@media (max-width: 760px) {
    .visibility-list {
        grid-template-columns: 1fr;
    }

    .visibility-actions {
        justify-content: stretch;
    }

    .visibility-actions .button {
        width: 100%;
    }
}
/* Tachito para vaciar un desplegable: va arriba a la derecha del cuadro, en la
   misma franja que el nombre del campo, y sólo aparece cuando hay algo elegido.

   Va en un círculo rojo lleno, el mismo molde que el círculo del signo de
   admiración: los dos son botoncitos sueltos sobre el borde del campo y con el
   tacho apenas dibujado a línea no se leía que fuera un botón. */

.has-select-clear {
    position: relative;
}

/* Se lo nombra con el campo adelante porque si no hereda el molde de los
   botones del formulario (`.entry-form button` los estira a 160 x 42). */
.has-select-clear > .select-clear-button {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    place-items: center;
    width: 19px;
    min-width: 19px;
    max-width: 19px;
    height: 19px;
    min-height: 19px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    line-height: 0;
    box-shadow: none;
    cursor: pointer;
}

.has-select-clear > .select-clear-button[hidden] {
    display: none;
}

/* El icono es chico a propósito; el área que responde al dedo no. */
.has-select-clear > .select-clear-button::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.has-select-clear > .select-clear-button svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.has-select-clear > .select-clear-button:hover,
.has-select-clear > .select-clear-button:focus-visible {
    background: color-mix(in srgb, var(--danger) 82%, #000);
    color: #fff;
    filter: none;
}

/* El tema oscuro le apaga el fondo a casi todos los botones del formulario:
   este tiene que seguir siendo el mismo círculo rojo en los dos temas. */
html[data-theme="dark"] .app-shell .has-select-clear > .select-clear-button {
    background: var(--danger);
    color: #fff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .has-select-clear > .select-clear-button:hover,
html[data-theme="dark"] .app-shell .has-select-clear > .select-clear-button:focus-visible {
    background: color-mix(in srgb, var(--danger) 78%, #fff);
    color: #fff;
}

/* Selector de dos columnas: conserva un select nativo como fuente de verdad,
   pero muestra las opciones con el dato principal a la izquierda y su detalle
   a la derecha, como el selector de meses y saldos de Cobros. */
.floor-modal-entry-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.floor-modal-entry-field > [data-floor-modal-entry-label] {
    padding-right: 26px;
}

.split-picker {
    position: relative;
    display: block;
    min-width: 0;
}

.split-picker-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.entry-form .split-picker-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .split-picker-open:hover,
.entry-form .split-picker-open:focus-visible,
.entry-form .split-picker-open[aria-expanded="true"] {
    border-color: var(--brand-primary);
    background: #ffffff;
    color: #000000;
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 26%, transparent);
    outline-offset: 1px;
    filter: none;
}

.entry-form .split-picker-open[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(194, 61, 66, 0.14);
}

.split-picker-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.split-picker-primary,
.split-picker-secondary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.split-picker-primary {
    flex: 1 1 auto;
    font-weight: 700;
}

.split-picker-secondary {
    flex: 0 1 55%;
    font-weight: 600;
    text-align: right;
}

.split-picker-open > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.16s ease;
}

.split-picker-open[aria-expanded="true"] > svg {
    transform: rotate(180deg);
}

.split-picker-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    left: 0;
    display: block;
    width: 100%;
    max-height: min(280px, calc(100vh - 24px));
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    overflow-y: auto;
}

.split-picker-menu[hidden] {
    display: none;
}

.entry-form .split-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .split-picker-option:hover,
.entry-form .split-picker-option:focus-visible,
.entry-form .split-picker-option[aria-selected="true"] {
    background: var(--brand-primary);
    color: #ffffff;
    outline: none;
    filter: none;
}

html[data-theme="dark"] .app-shell .floor-modal-entry-field {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .split-picker-open,
html[data-theme="dark"] .app-shell .split-picker-menu,
html[data-theme="dark"] .app-shell .entry-form .split-picker-option {
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .split-picker-open:hover,
html[data-theme="dark"] .app-shell .entry-form .split-picker-open:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .split-picker-open[aria-expanded="true"] {
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .split-picker-option:hover,
html[data-theme="dark"] .app-shell .entry-form .split-picker-option:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .split-picker-option[aria-selected="true"] {
    background: var(--brand-primary);
    color: #ffffff;
}
/* Sugerencias de cobro: reemplazan el historial opaco del navegador por
   importes calculados para el registro, mes y descuento elegidos. */

.payment-amount-field {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 6px;
}

.entry-form .payment-amount-field > label {
    display: block;
    min-width: 0;
}

.payment-amount-suggestions {
    position: absolute;
    z-index: 45;
    top: calc(100% + 6px);
    right: 0;
    width: min(440px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.payment-amount-suggestions[hidden] {
    display: none;
}

.payment-editor-amount-field .payment-amount-suggestions {
    right: auto;
    left: 0;
}

.payment-amount-suggestion-heading,
.entry-form .payment-amount-suggestion-option {
    display: grid;
    grid-template-columns: minmax(120px, 0.85fr) minmax(170px, 1.15fr);
    align-items: center;
    gap: 12px;
}

.payment-amount-suggestion-heading {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: #000000;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-amount-suggestion-list {
    display: grid;
    max-height: 280px;
    overflow-y: auto;
}

.entry-form .payment-amount-suggestion-option {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 48px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    text-align: left;
    box-shadow: none;
    filter: none;
}

.entry-form .payment-amount-suggestion-option:last-child {
    border-bottom: 0;
}

.entry-form .payment-amount-suggestion-option strong,
.entry-form .payment-amount-suggestion-option span {
    color: #000000;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.entry-form .payment-amount-suggestion-option strong {
    font-size: 16px;
    font-weight: 900;
}

.entry-form .payment-amount-suggestion-option span {
    font-size: 13px;
    font-weight: 750;
}

.entry-form .payment-amount-suggestion-option:hover,
.entry-form .payment-amount-suggestion-option:focus-visible {
    background: #e7f5f7;
    color: #000000;
    filter: none;
    outline: 2px solid var(--brand-neutral);
    outline-offset: -2px;
}

.entry-form .payment-amount-suggestion-option[aria-selected="true"] {
    background: #dff1f4;
    color: #000000;
}

.payment-amount-suggestion-empty {
    display: block;
    padding: 13px 12px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

html[data-theme="dark"] .app-shell .payment-amount-suggestions,
html[data-theme="dark"] .app-shell .payment-amount-suggestion-heading,
html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option {
    background: #0c2428;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-amount-suggestion-heading {
    background: #123238;
}

html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option strong,
html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option span,
html[data-theme="dark"] .app-shell .payment-amount-suggestion-empty {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option:hover,
html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .payment-amount-suggestion-option[aria-selected="true"] {
    background: #16434a;
    color: #ffffff;
}

@media (max-width: 520px) {
    .payment-amount-suggestion-heading,
    .entry-form .payment-amount-suggestion-option {
        grid-template-columns: minmax(105px, 0.8fr) minmax(135px, 1.2fr);
        gap: 8px;
    }
}

/* El descuento conserva el select nativo como valor del formulario, pero se
   presenta con el mismo patrón de dos columnas que las sugerencias de monto. */
.payment-discount-field {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.payment-discount-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.entry-form .payment-discount-edit-link {
    flex: 0 0 auto;
    color: var(--link-blue);
    text-transform: none;
}

.payment-discount-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.entry-form .payment-discount-picker-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .payment-discount-picker-open:hover,
.entry-form .payment-discount-picker-open:focus-visible,
.entry-form .payment-discount-picker-open[aria-expanded="true"] {
    border-color: var(--brand-primary);
    background: #ffffff;
    color: #000000;
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 26%, transparent);
    outline-offset: 1px;
    filter: none;
}

.payment-discount-picker-open > span {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-discount-picker-open svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.16s ease;
}

.payment-discount-picker-open[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.payment-discount-picker-menu {
    position: absolute;
    z-index: 92;
    top: calc(100% + 6px);
    right: 0;
    display: block;
    width: min(360px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    text-transform: none;
}

.payment-discount-picker-menu[hidden] {
    display: none;
}

.payment-discount-picker-heading,
.entry-form .payment-discount-picker-option {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.75fr);
    align-items: center;
    gap: 12px;
}

.payment-discount-picker-heading {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: #000000;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-discount-picker-list {
    display: grid;
    max-height: 280px;
    overflow-y: auto;
}

.entry-form .payment-discount-picker-option {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 48px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    filter: none;
}

.entry-form .payment-discount-picker-option:last-child {
    border-bottom: 0;
}

.entry-form .payment-discount-picker-option strong,
.entry-form .payment-discount-picker-option span {
    color: #000000;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.entry-form .payment-discount-picker-option strong {
    font-size: 15px;
    font-weight: 900;
}

.entry-form .payment-discount-picker-option span {
    font-size: 13px;
    font-weight: 750;
}

.entry-form .payment-discount-picker-option:hover,
.entry-form .payment-discount-picker-option:focus-visible {
    background: #e7f5f7;
    color: #000000;
    outline: 2px solid var(--brand-neutral);
    outline-offset: -2px;
    filter: none;
}

.entry-form .payment-discount-picker-option[aria-selected="true"] {
    background: #dff1f4;
    color: #000000;
}

.payment-discount-edit-panel {
    width: min(720px, 100%);
}

.payment-discount-edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.75fr);
    gap: 18px;
}

.payment-discount-edit-fields {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
}

.payment-discount-edit-fields label {
    min-width: 0;
}

.payment-discount-edit-fields textarea {
    min-height: 104px;
    resize: vertical;
}

.payment-discount-edit-copy {
    margin: 6px 0 0;
    color: #000000;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}

.payment-discount-edit-preview {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
    color: #000000;
}

.payment-discount-edit-preview h3 {
    margin: 0 0 12px;
    color: #000000;
    font-size: 15px;
    line-height: 1.25;
}

.payment-discount-edit-preview dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.payment-discount-edit-preview dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.payment-discount-edit-preview dl > div:last-child {
    border-bottom: 0;
}

.payment-discount-edit-preview dt,
.payment-discount-edit-preview dd {
    min-width: 0;
    margin: 0;
    color: #000000;
    line-height: 1.3;
}

.payment-discount-edit-preview dt {
    font-size: 12px;
    font-weight: 700;
}

.payment-discount-edit-preview dd {
    font-size: 13px;
    font-weight: 850;
    text-align: right;
    overflow-wrap: anywhere;
}

.payment-discount-edit-preview-total dd {
    color: var(--brand-primary);
    font-size: 16px;
}

.payment-discount-edit-fields small,
.payment-discount-edit-error {
    color: #000000;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-transform: none;
}

.payment-discount-edit-error {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--danger);
    font-weight: 800;
}

.payment-discount-edit-form > .record-modal-actions {
    grid-column: 1 / -1;
}

.payment-register-table td[data-col-key="descripcion"],
.payment-movement-description {
    white-space: pre-line;
}

/* El detalle prioriza los datos operativos; las tarjetas funcionan como un
   resumen compacto y la descripción completa queda en cada movimiento. */
.payment-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 180px));
    justify-content: start;
    gap: 8px;
}

.payment-detail-grid article {
    min-height: 0;
    padding: 9px 11px;
}

.payment-detail-grid span {
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.2;
}

.payment-detail-grid strong {
    font-size: 14px;
    line-height: 1.25;
}

[data-payment-edit-modal][data-payment-editor-mode="add"] .payment-editor-summary {
    display: none;
}

[data-payment-edit-modal][data-payment-editor-mode="add"] .payment-lines > .payment-line:first-child {
    padding: 0;
    border: 0;
    background: transparent;
}

[data-payment-edit-modal][data-payment-editor-mode="add"] .payment-lines > .payment-line:first-child > legend {
    display: none;
}

.entry-form [data-payment-caja-select],
.entry-form [data-payment-caja-select] option,
.parking-cashbox-field,
.parking-cashbox-field :is(button, label, span, small) {
    font-family: var(--font-body);
}

html[data-theme="dark"] .app-shell .payment-discount-field,
html[data-theme="dark"] .app-shell .payment-discount-picker-menu,
html[data-theme="dark"] .app-shell .payment-discount-picker-heading,
html[data-theme="dark"] .app-shell .payment-discount-edit-fields small {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-discount-edit-copy,
html[data-theme="dark"] .app-shell .payment-discount-edit-preview,
html[data-theme="dark"] .app-shell .payment-discount-edit-preview h3,
html[data-theme="dark"] .app-shell .payment-discount-edit-preview :is(dt, dd) {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-discount-edit-preview {
    border-color: #5e737c;
    border-left-color: var(--brand-neutral);
    background: #123238;
}

html[data-theme="dark"] .app-shell .payment-discount-edit-preview-total dd {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-open,
html[data-theme="dark"] .app-shell .payment-discount-picker-menu,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option {
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-discount-picker-heading {
    background: #123238;
}

html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option strong,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option span {
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-open:hover,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-open:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-open[aria-expanded="true"] {
    background: #121a1e;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option:hover,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option:focus-visible,
html[data-theme="dark"] .app-shell .entry-form .payment-discount-picker-option[aria-selected="true"] {
    background: #16434a;
    color: #ffffff;
}

html[data-theme="dark"] .app-shell .payment-discount-edit-error {
    color: var(--danger);
}

@media (max-width: 640px) {
    .record-modal.payment-discount-edit-modal {
        padding: 12px;
    }

    .payment-discount-edit-panel {
        max-height: calc(100dvh - 24px);
        padding: 26px 16px 16px;
    }

    .payment-discount-edit-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .payment-discount-edit-fields,
    .payment-discount-edit-preview {
        grid-column: 1;
        grid-row: auto;
    }

    .payment-discount-edit-form > .record-modal-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .payment-discount-edit-form > .record-modal-actions > .button {
        width: 100%;
        min-width: 0;
    }
}

/* Cobros separados por comprobantes de pagos distintos */

.payment-multi-cobros {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}

.payment-multi-cobros[hidden] {
    display: none;
}

[data-payment-create-form][data-payment-multi-cobros-activo="1"] .payment-receipt-number-field,
[data-payment-create-form][data-payment-multi-cobros-activo="1"] .payment-date-field,
[data-payment-create-form][data-payment-multi-cobros-activo="1"] .payment-month-field,
[data-payment-create-form][data-payment-multi-cobros-activo="1"] .payment-discount-field,
[data-payment-create-form][data-payment-multi-cobros-activo="1"] .payment-amount-field {
    display: none;
}

.payment-cobro-panel {
    border: 1px solid var(--line-strong);
    border-radius: 12px;
}

.payment-cobro-panel > .collapsible-summary {
    padding: 10px 14px;
}

.payment-cobro-summary-amount {
    font-weight: 700;
}

.payment-cobro-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px 14px 14px;
}

.payment-cobro-body label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.payment-cobro-files {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.payment-cobro-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-cobro-discount-note {
    grid-column: 1 / -1;
    margin: 0;
}

.payment-receipt-manager-entry {
    display: grid;
    flex: 0 0 132px;
    align-content: start;
    gap: 6px;
    min-width: 132px;
}

.payment-receipt-manager-entry > .payment-receipt-manager-item {
    flex: none;
    width: 100%;
    min-width: 0;
}

.payment-receipt-manager-cobro {
    width: 100%;
    min-height: 34px;
    font-size: 0.85rem;
}
/* Selector y ficha de empresa dentro de Configuración de Estacionamiento. */
.location-section > .company-selector-field {
    display: grid;
    grid-column: span 2;
    gap: 7px;
    min-width: 0;
}

.entry-form .company-selector-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    filter: none;
}

.entry-form .company-selector-button:hover,
.entry-form .company-selector-button:focus-visible {
    border-color: var(--brand-primary);
    background: #fff;
    color: var(--ink);
    filter: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
    outline: none;
}

.company-selector-button [data-company-selector-name] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-selector-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    transform: rotate(45deg);
}

.company-selector-modal {
    /* El selector debe cubrir también la navegación apilada en móvil. */
    z-index: 130;
}

.company-selector-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    width: min(900px, 100%);
    max-height: min(860px, calc(100vh - 34px));
    padding: 0;
    overflow: hidden;
}

.company-selector-panel.is-catalog-view {
    width: min(560px, 100%);
    max-height: min(82vh, 680px);
}

.company-selector-panel.is-editor-view {
    width: min(900px, 100%);
}

.company-selector-panel > .record-modal-header {
    padding: 24px 68px 18px 24px;
    border-bottom: 1px solid var(--line);
}

.company-selector-layout {
    display: grid;
    gap: 0;
    min-height: 0;
    padding: 0 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.company-catalog-view {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 20px 0 24px;
}

.company-catalog-view[hidden],
.company-editor[hidden] {
    display: none;
}

.company-catalog-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.company-catalog-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.company-catalog-option {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    box-shadow: none;
    cursor: pointer;
}

.company-catalog-option:is(:hover, :focus-visible) {
    border-color: var(--brand-primary);
    background: #fff;
    color: var(--ink);
    filter: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.13);
    outline: none;
}

.company-catalog-option.is-selected {
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.company-catalog-company {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.company-catalog-company :is(strong, small) {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-catalog-company strong {
    font-size: 14px;
    font-weight: 800;
}

.company-catalog-company small {
    font-size: 12px;
    font-weight: 600;
}

.company-catalog-option-action {
    justify-self: end;
    min-width: 86px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.company-catalog-option.is-selected .company-catalog-option-action {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--ink);
}

.company-create-button {
    min-height: 42px;
    white-space: nowrap;
}

.company-editor-help {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}

.company-editor {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 20px 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.company-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    min-width: 0;
}

.company-editor-section-title {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}

.company-editor-section-title.is-first {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.company-editor-grid > label {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.company-contact-list-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.company-contact-heading {
    min-height: 24px;
    justify-content: space-between;
    gap: 8px;
    padding-inline-end: 42px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-contact-repeat-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.company-contact-repeat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.company-contact-repeat-row > :is(input, .phone-field) {
    min-width: 0;
}

.company-contact-repeat-row .phone-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
}

.company-editor-grid :is(input, select, .location-country-picker) {
    width: 100%;
    min-width: 0;
}

.company-editor-grid > .company-address-field {
    grid-column: 1 / -1;
}

.company-contact-list-field[data-company-contact-list-field="email"] {
    grid-column: 1 / -1;
}

.company-editor-error,
.company-catalog-error {
    margin: 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
}

.company-selector-actions {
    padding: 15px 24px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.company-selector-actions .button {
    min-width: 118px;
}

/* Los cuatro datos de contacto comparten una fila. Las reglas históricas de
   teléfono/WhatsApp eran para la grilla exterior y no deben ensanchar estas
   columnas internas. */
.location-section[data-location-kind="estacionamiento"] .contact-fields-grid > :is(.contact-list-field, .location-site-field),
.location-section[data-location-kind="alquileres"] .contact-fields-grid > :is(.contact-list-field, .location-site-field) {
    grid-column: auto;
    order: 0;
}

.entry-form .contact-list-add,
.entry-form .contact-row-remove {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    color: #fff;
    filter: none;
}

.entry-form .contact-list-add {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    background: var(--brand-primary);
}

.entry-form .contact-row-remove {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    background: var(--danger);
}

.entry-form .contact-row-remove[hidden] {
    display: none;
}

html[data-theme="dark"] .app-shell .entry-form .company-selector-button,
html[data-theme="dark"] .app-shell .company-catalog-option {
    border-color: var(--line-strong);
    background: #121a1e;
    color: #fff;
}

html[data-theme="dark"] .app-shell .company-catalog-option:is(:hover, :focus-visible, .is-selected) {
    border-color: var(--brand-primary);
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .entry-form .company-selector-button:is(:hover, :focus-visible) {
    border-color: var(--brand-primary);
    background: #121a1e;
}

html[data-theme="dark"] .app-shell .company-catalog-option :is(strong, span, small) {
    color: #fff;
}

html[data-theme="dark"] .app-shell :is(
    .company-selector-panel > .record-modal-header,
    .company-editor-section-title,
    .company-selector-actions
) {
    border-color: #42545c;
}

html[data-theme="dark"] .app-shell .company-selector-actions {
    background: #1f2a2f;
}

html[data-theme="dark"] .app-shell .entry-form :is(.contact-list-add, .contact-row-remove) {
    color: #fff;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .entry-form .contact-list-add {
    background: var(--brand-primary);
}

html[data-theme="dark"] .app-shell .entry-form .contact-row-remove {
    background: var(--danger);
}

@media (max-width: 650px) {
    .company-selector-modal {
        padding: 8px;
    }

    .company-selector-panel {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .company-selector-panel:is(.is-catalog-view, .is-editor-view) {
        width: calc(100vw - 16px);
    }

    .company-selector-panel > .record-modal-header {
        padding: 18px 58px 14px 16px;
    }

    .company-selector-layout {
        padding: 0 16px;
    }

    .company-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-catalog-option {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
    }

    .company-catalog-option-action {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .company-editor-grid > .company-address-field {
        grid-column: 1;
    }

    .company-contact-list-field[data-company-contact-list-field="email"] {
        grid-column: 1;
    }

    .company-selector-actions {
        padding: 12px 16px;
    }

    .company-selector-actions .button {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* Notificaciones, Visualización y Configuración no llevan nombre: van como
   campana, ojo y llave pegados al borde derecho de la fila de pestañas. La barra
   se estira a todo el ancho para que la llave quede lo más a la derecha posible. */

/* Crece hasta llenar la fila (sin `width: 100%`, para no aplastar los filtros
   de mes y año cuando la pestaña los muestra). */
.module-tabs.has-icon-tabs {
    flex: 1 1 auto;
}

.module-tabs .module-tabs-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.module-tabs a.module-tab-icon {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    padding: 0;
}

.module-tabs a.module-tab-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

@media (max-width: 820px) {
    /* En pantalla angosta las pestañas ya ocupan todo el ancho y se reparten:
       los iconos no se estiran, pero siguen cerrando la fila por la derecha. */
    .module-tabs .module-tabs-icons {
        flex: 0 0 auto;
    }
}
/* Apartado Herramientas: el Conector, las cámaras, la barrera y el portón. */

.tools-shell {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

/* La primera tarjeta arranca pegada al título: el `gap` de la grilla separa las
   demás. El margen entre hermanas lo anula 00-report.css junto con el de las
   otras pestañas que envuelven sus tarjetas en una grilla; puesto acá perdía la
   cascada contra el selector de hermanos y quedaban al doble de distancia. */
.tools-shell > .panel.collapsible-panel {
    margin-top: 0;
}

.tools-body {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.tools-note {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.tools-note-muted {
    color: var(--muted);
}

/* El renglón que cuenta si el Conector ya se anotó. Arranca apagado —es una
   espera, no un dato— y se pone verde cuando la máquina aparece. */
.tools-connector-notice {
    color: var(--muted);
}

.tools-connector-notice.tone-positive {
    color: var(--positive);
}

.tools-connector-notice[hidden] {
    display: none;
}

.tools-fields {
    margin-top: 0;
}

.tools-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tools-actions-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* La ayuda va en su propio renglón: al lado del switch le comía el ancho al
   nombre, que terminaba partido en dos líneas. */
.visibility-toggle.tools-toggle {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 6px;
}

.visibility-toggle.tools-toggle > .visibility-name {
    order: 1;
}

.visibility-toggle.tools-toggle > .mini-switch {
    order: 2;
}

.tools-toggle-hint {
    flex: 1 0 100%;
    order: 3;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.tools-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.tools-chip.tone-positive {
    border-color: color-mix(in srgb, var(--positive) 45%, var(--line));
    background: color-mix(in srgb, var(--positive) 12%, var(--surface));
    color: var(--positive);
}

.tools-chip.tone-danger {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger);
}

/* A medio camino: el grabador con canales sin cargar y la cámara que el
   Conector todavía está buscando. El ámbar ya significa eso en este apartado. */
.tools-chip.tone-partial {
    border-color: color-mix(in srgb, var(--accent-amber) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-amber) 12%, var(--surface));
    color: var(--accent-amber);
}

/* Las cámaras cargadas son una grilla, una fila por cámara, como la tabla de
   Registros: un grabador de cuatro entra en cuatro renglones que se leen de un
   vistazo, en vez de cuatro fichas desplegables con todos sus campos abiertos.
   El orden de las filas es el orden del mosaico. */
.tools-cameras-wrap {
    margin-top: 2px;
}

.tools-cameras-table {
    width: 100%;
    min-width: 1480px;
}

.tools-cameras-table td {
    vertical-align: middle;
}

.tools-cameras-table input,
.tools-cameras-table select {
    width: 100%;
    min-width: 0;
}

/* El ancho de cada columna va con el selector de la tabla adelante: la regla
   general de arriba es más específica y, sin esto, le ganaba a todas —el nombre
   quedaba en una cajita de dos letras—. */
.tools-cameras-table .tools-camera-nombre {
    min-width: 170px;
}

.tools-cameras-table .tools-camera-host,
.tools-cameras-table .tools-camera-usuario,
.tools-cameras-table .tools-camera-clave {
    min-width: 130px;
}

.tools-cameras-table .tools-camera-ruta {
    min-width: 230px;
}

.tools-cameras-table .tools-camera-canal,
.tools-cameras-table .tools-camera-puerto {
    min-width: 74px;
}

.tools-cameras-table select {
    min-width: 150px;
}

.tools-camera.is-dragging {
    opacity: 0.5;
}

/* El ojito de la contraseña de la cámara. La caja es la misma del login, pero
   acá el campo vive en la grilla de campos del panel. */
.tools-password-field {
    position: relative;
    display: block;
}

.tools-password-field > input {
    width: 100%;
    padding-right: 44px;
}

.tools-password-field > .password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    place-items: center;
    transform: translateY(-50%);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.tools-password-field > .password-toggle:hover,
.tools-password-field > .password-toggle:focus-visible {
    background: rgba(109, 40, 217, 0.08);
    color: var(--brand-primary);
}

/* El mosaico: cuántas cámaras entran a la vez lo elige el dueño arriba, y las
   que no entran esperan su página. */
.tools-wall-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tools-wall-toolbar > .tools-connect-modes {
    margin-bottom: 0;
}

.tools-wall {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    grid-template-columns: repeat(var(--tools-wall-columns, 2), minmax(0, 1fr));
}

.tools-wall[data-tools-wall-columns="1"] {
    --tools-wall-columns: 1;
}

.tools-wall[data-tools-wall-columns="2"] {
    --tools-wall-columns: 2;
}

.tools-wall[data-tools-wall-columns="3"] {
    --tools-wall-columns: 3;
}

.tools-wall-tile {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.tools-wall-tile[hidden] {
    display: none;
}

.tools-wall-tile-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tools-wall-tile-name {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tools-wall-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.tools-wall-pager[hidden] {
    display: none;
}

.tools-wall-page-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

/* La pantalla guarda su lugar aunque no haya imagen: sin alto propio, prender
   el vivo empujaría todo el formulario hacia abajo de un salto. */
.tools-camera-live-screen {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 180px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.tools-camera-live-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    object-fit: contain;
    background: #000;
}

/* El apagado no deja un rectángulo negro: `display: block` le gana al atributo
   `hidden`, y el mosaico quedaba con un cuadro negro por cámara aunque ninguna
   estuviera transmitiendo. */
.tools-camera-live-video[hidden] {
    display: none;
}

.tools-camera-live-state {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* Con video el cartel pasa a ser un rótulo encima, no un párrafo debajo: el
   estado tiene que verse sin correr el cuadro de lugar. */
.tools-camera-live-video:not([hidden]) + .tools-camera-live-state {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--positive) 18%, var(--surface));
    color: var(--positive);
    font-size: 12px;
}

/* Las máquinas con el Conector prendido: una grilla con una fila por PC, como
   la de Registros. Se lee de un vistazo cuántas hay, cuál está vinculada y cuál
   atiende el video —el turno 1 es la que lo hace—. */
.tools-servers-wrap {
    margin-top: 2px;
}

.tools-servers-table {
    width: 100%;
    /* Siete columnas cortas: la grilla general pide 900px y dejaba la barra de
       scroll puesta con la mitad de la tabla vacía. */
    min-width: 660px;
}

.tools-machine-turn-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tools-machine-turn {
    min-width: 22px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

/* El asa: se arrastra desde acá y no desde la fila entera, para que se pueda
   seleccionar el nombre sin empezar un arrastre. */
.tools-machine-handle {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(126, 34, 206, 0.08);
    color: var(--brand-primary);
    cursor: grab;
    touch-action: none;
}

.tools-machine-handle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tools-machine-handle:hover,
.tools-machine-handle:focus-visible {
    border-color: var(--brand-primary);
    background: rgba(126, 34, 206, 0.14);
    outline: 3px solid rgba(34, 184, 199, 0.24);
    outline-offset: 2px;
}

.tools-machine-handle:active,
.tools-machine.is-dragging .tools-machine-handle {
    cursor: grabbing;
}

.tools-machine.is-dragging {
    opacity: 0.5;
}

.tools-machine-name {
    width: 100%;
    min-width: 150px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.tools-machine-meta {
    color: var(--ink);
    font-size: 12px;
}

.tools-machine-actions-cell {
    text-align: right;
}

/* Conectar una cámara: los tres caminos —red, serie, QR— comparten el pie de
   usuario y contraseña, así que el que está elegido se marca en el botón. */
.tools-connect-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tools-connect-mode.is-active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.tools-connect-step {
    display: grid;
    gap: 10px;
}

/* Los tres caminos se apagan con `hidden`, pero las clases de arriba fijan un
   `display` que le gana al atributo: sin estas reglas se ven los tres a la vez
   —el campo de la serie y el botón del QR aparecían dentro de "Buscar en la
   red"—. Lo mismo con el pie de usuario y contraseña, que es `.entry-form`. */
.tools-connect-step[hidden],
.tools-connect-alta[hidden] {
    display: none;
}

.tools-connect-alta {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.tools-connect-qr {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.tools-connect-qr-button {
    cursor: pointer;
}

/* El campo de archivo se maneja desde el botón, pero no se esconde con
   `hidden`: así sigue existiendo para quien navega con el teclado. */
.tools-connect-qr-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
}

.tools-connect-qr-state,
.tools-connect-state {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.tools-connect-state[data-tono="positive"] {
    color: var(--positive);
}

.tools-connect-state[data-tono="danger"] {
    color: var(--danger);
}

.tools-connect-state[data-tono="partial"] {
    color: var(--accent-amber);
}

.tools-discovered-table [data-tools-camera-pick].is-active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.tools-access-block {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.tools-discovered-wrap {
    margin-top: 2px;
}

.tools-discovered-table {
    width: 100%;
}

.tools-empty {
    margin: 0;
}

html[data-theme="dark"] .app-shell .tools-access-block,
html[data-theme="dark"] .app-shell .tools-chip {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .tools-chip.tone-positive {
    color: var(--positive);
}

html[data-theme="dark"] .app-shell .tools-chip.tone-danger {
    color: var(--danger);
}

html[data-theme="dark"] .app-shell .tools-chip.tone-partial {
    color: var(--accent-amber);
}

@media (max-width: 760px) {
    .tools-actions {
        align-items: stretch;
    }

    /* En el teléfono no entran cuatro cuadros de video uno al lado del otro:
       sea cual sea el mosaico elegido, van de a uno por renglón. El selector
       lleva el atributo a propósito: sin él le gana la regla de las columnas. */
    .tools-wall[data-tools-wall-columns] {
        --tools-wall-columns: 1;
    }
}
/* Página 404 jugable: una sola composición con identidad visual WorKraken. */
.error-game-page {
    --error-game-bg: #edf8f8;
    --error-game-surface: #ffffff;
    --error-game-surface-soft: #e2f2f3;
    --error-game-message-bg: #dff4f5;
    --error-game-line: #b8d8dc;
    --error-game-violet: #6D28D9;
    --error-game-violet-strong: #4C1D95;
    --error-game-yellow: #ffd166;
    --error-game-violet: #7c3aed;
    --error-game-coral: #ff806d;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background:
        radial-gradient(circle at 5% 14%, rgba(255, 209, 102, 0.38), transparent 19rem),
        radial-gradient(circle at 94% 76%, rgba(124, 58, 237, 0.14), transparent 25rem),
        linear-gradient(145deg, var(--error-game-bg), #ffffff);
    color: var(--ink);
}

html[data-theme="dark"] .error-game-page {
    --error-game-bg: #0f181c;
    --error-game-surface: #1a282d;
    --error-game-surface-soft: #26383e;
    --error-game-message-bg: #123139;
    --error-game-line: #49636b;
    --error-game-violet: #A855F7;
    --error-game-violet-strong: #7E22CE;
    background:
        radial-gradient(circle at 5% 14%, rgba(255, 209, 102, 0.16), transparent 19rem),
        radial-gradient(circle at 94% 76%, rgba(124, 58, 237, 0.2), transparent 25rem),
        var(--error-game-bg);
    color: #ffffff;
}

.error-game-header {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 60px;
    padding: 8px clamp(16px, 4vw, 56px);
    border-bottom: 1px solid var(--error-game-line);
    background: var(--error-game-surface);
    box-shadow: 0 7px 24px rgba(109, 40, 217, 0.08);
}

.error-game-brand,
.error-game-header-actions,
.error-game-theme,
.error-game-home-link {
    display: inline-flex;
    align-items: center;
}

.error-game-brand {
    gap: 9px;
    min-width: 0;
}

.error-game-mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.error-game-wordmark-wrap {
    display: inline-grid;
    align-items: center;
}

.error-game-wordmark {
    grid-area: 1 / 1;
    width: 122px;
    max-height: 27px;
    object-fit: contain;
    object-position: left center;
}

.error-game-wordmark-dark {
    display: none;
}

html[data-theme="dark"] .error-game-wordmark-light {
    display: none;
}

html[data-theme="dark"] .error-game-wordmark-dark {
    display: block;
}

.error-game-header-actions {
    justify-content: flex-end;
    gap: 8px;
}

.error-game-theme,
.error-game-home-link {
    justify-content: center;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid var(--error-game-line);
    border-radius: 10px;
    background: var(--error-game-surface);
    color: var(--ink);
    font-weight: 750;
    cursor: pointer;
}

.error-game-theme {
    gap: 7px;
}

.error-game-theme-icon {
    font-size: 18px;
    line-height: 1;
}

.error-game-theme:is(:hover, :focus-visible),
.error-game-home-link:is(:hover, :focus-visible) {
    border-color: var(--error-game-violet);
    background: var(--error-game-surface-soft);
}

.error-game-main {
    display: grid;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.error-game-visual {
    display: grid;
    grid-template-columns: clamp(270px, 20vw, 360px) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
    background:
        radial-gradient(circle at 4% 84%, rgba(255, 209, 102, 0.34), transparent 16rem),
        radial-gradient(circle at 18% 16%, rgba(124, 58, 237, 0.1), transparent 22rem),
        var(--error-game-surface);
}

.error-game-message {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    overflow: visible;
    padding: clamp(26px, 3vw, 54px);
    background: transparent;
    isolation: isolate;
}

.error-game-message::before,
.error-game-message::after {
    position: absolute;
    z-index: -1;
    content: "";
    transform: rotate(18deg);
}

.error-game-message::before {
    top: 26%;
    right: -20px;
    width: 92px;
    height: 92px;
    border-radius: 28px;
    background: rgba(255, 128, 109, 0.28);
}

.error-game-message::after {
    bottom: 8%;
    left: -22px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
}

.error-game-message-copy {
    position: relative;
    z-index: 2;
}

.error-game-code {
    display: inline-flex;
    margin: 0 0 16px;
    padding: 7px 11px;
    border: 1px solid #d99b18;
    border-radius: 999px;
    background: var(--error-game-yellow);
    color: #000000;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.error-game-message h1 {
    max-width: 7ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 3.4vw, 60px);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.error-game-message-copy > p:last-child {
    max-width: 27ch;
    margin: 18px 0 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.45;
}

.error-game-illustration-frame {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    margin-top: 22px;
}

.error-game-illustration {
    display: block;
    width: min(100%, clamp(230px, 18vw, 320px));
    height: auto;
    max-height: min(48svh, 480px);
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(109, 40, 217, 0.22));
}

.error-game-play {
    display: grid;
    min-width: 0;
    min-height: 0;
    padding: clamp(8px, 1vw, 16px);
    background: transparent;
}

.error-game-stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.error-game-board-slot {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 256px;
    container-type: size;
}

.error-game-board {
    position: relative;
    width: 100%;
    width: min(100cqw, 150cqh);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #000000;
    border-radius: 12px;
    background: #000000;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    isolation: isolate;
}

.error-game-board canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background: #000000;
    touch-action: none;
}

.error-game-board canvas:focus-visible {
    outline: 5px solid var(--error-game-violet);
    outline-offset: -8px;
}

.error-game-pause-float {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #000000;
    border-radius: 10px;
    background: var(--error-game-yellow);
    color: #000000;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000000;
}

.error-game-pause-float[hidden] {
    display: none;
}

.error-game-pause-float:is(:hover, :focus-visible) {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000000;
}

.error-game-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 12px;
    pointer-events: none;
}

.error-game-overlay[hidden] {
    display: none;
}

.error-game-overlay-panel {
    width: min(310px, 100%);
    padding: 18px;
    border: 3px solid var(--error-game-yellow);
    border-radius: 16px;
    background: var(--error-game-violet-strong);
    color: #ffffff;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
    text-align: center;
    pointer-events: auto;
}

.error-game-overlay-panel h2 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.error-game-settings {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(82px, 0.75fr);
    gap: 7px;
    margin-top: 12px;
}

.error-game-scenario,
.error-game-level {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #ffffff;
    text-align: left;
}

.error-game-scenario > span,
.error-game-level > span {
    color: #ffffff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-game-scenario select,
.error-game-level select {
    width: 100%;
    min-height: 44px;
    padding: 6px 34px 6px 10px;
    border: 2px solid #000000;
    border-radius: 9px;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.error-game-scenario select:disabled,
.error-game-level select:disabled {
    border-style: dashed;
    background: var(--error-game-surface-soft);
    color: var(--ink);
    cursor: default;
}

.error-game-settings[hidden],
.error-game-legend[hidden] {
    display: none;
}

.error-game-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.error-game-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
}

.error-game-legend i {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    outline: 2px solid #000000;
}

.error-game-legend-player {
    background: var(--error-game-violet);
    box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.46);
}

.error-game-legend-player::after {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 6px solid var(--error-game-yellow);
    content: "";
}

.error-game-legend-rival {
    background: radial-gradient(circle at 35% 30%, #f59aaa, #7c3aed 58%, #5b21b6);
}

.error-game-primary {
    min-width: 132px;
    min-height: 44px;
    margin-top: 12px;
    padding: 9px 18px;
    border: 2px solid #000000;
    border-radius: 10px;
    background: var(--error-game-yellow);
    color: #000000;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000000;
}

.error-game-primary:is(:hover, :focus-visible) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000;
}

.error-game-play[data-game-state="won"] .error-game-overlay {
    align-items: end;
}

.error-game-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-height: 800px) and (min-width: 901px) {
    .error-game-visual {
        grid-template-columns: clamp(270px, 21vw, 310px) minmax(0, 1fr);
    }

    .error-game-message {
        padding: 24px;
    }

    .error-game-message h1 {
        font-size: 39px;
    }

    .error-game-message-copy > p:last-child {
        margin-top: 13px;
        font-size: 15px;
    }

    .error-game-illustration-frame {
        margin-top: 15px;
    }

    .error-game-illustration {
        width: 210px;
        max-height: 315px;
    }
}

@media (max-width: 900px) {
    .error-game-main {
        width: 100%;
        padding: 0;
    }

    .error-game-visual {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .error-game-message {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 150px;
        align-items: center;
        gap: 20px;
        padding: 18px 24px;
    }

    .error-game-code {
        margin-bottom: 10px;
    }

    .error-game-message h1 {
        max-width: none;
        font-size: 35px;
        line-height: 1;
    }

    .error-game-message-copy > p:last-child {
        max-width: 42ch;
        margin-top: 10px;
        font-size: 15px;
    }

    .error-game-illustration-frame {
        margin: 0;
    }

    .error-game-illustration {
        width: 126px;
        max-height: 168px;
    }

    .error-game-play {
        padding: 12px;
    }

    .error-game-stage {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .error-game-header {
        min-height: 58px;
        padding: 7px 11px;
    }

    .error-game-mark {
        width: 36px;
        height: 36px;
    }

    .error-game-wordmark {
        width: 104px;
    }

    .error-game-theme span:not(.error-game-theme-icon) {
        display: none;
    }

    .error-game-theme {
        width: 44px;
        padding: 7px;
    }

    .error-game-home-link {
        min-height: 44px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .error-game-main {
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    .error-game-message {
        grid-template-columns: minmax(0, 1fr) 106px;
        gap: 12px;
        padding: 13px 15px;
    }

    .error-game-code {
        margin-bottom: 7px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .error-game-message h1 {
        font-size: clamp(27px, 8vw, 32px);
    }

    .error-game-message-copy > p:last-child {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.35;
    }

    .error-game-illustration {
        width: 96px;
        max-height: 136px;
    }

    .error-game-play {
        padding: 8px;
    }

    .error-game-board {
        border-radius: 9px;
    }

    .error-game-overlay-panel {
        width: min(230px, 100%);
        padding: 10px;
        border-width: 2px;
        border-radius: 12px;
    }

    .error-game-overlay-panel h2 {
        font-size: 23px;
    }

    .error-game-settings {
        gap: 5px;
        margin-top: 7px;
    }

    .error-game-scenario,
    .error-game-level {
        gap: 2px;
    }

    .error-game-scenario > span,
    .error-game-level > span {
        font-size: 9px;
    }

    .error-game-scenario select,
    .error-game-level select {
        min-height: 44px;
        padding: 5px 24px 5px 7px;
        font-size: 11px;
    }

    .error-game-legend {
        gap: 15px;
        margin-top: 7px;
        font-size: 10px;
    }

    .error-game-legend i {
        width: 16px;
        height: 16px;
    }

    .error-game-legend-player::after {
        top: 3px;
        left: 4px;
    }

    .error-game-primary {
        margin-top: 8px;
    }

}

@media (max-width: 440px) {
    .error-game-wordmark-wrap {
        display: none;
    }
}

@media (max-width: 370px) {
    .error-game-message {
        grid-template-columns: minmax(0, 1fr) 88px;
        padding-inline: 12px;
    }

    .error-game-message h1 {
        font-size: 26px;
    }

    .error-game-message-copy > p:last-child {
        font-size: 12px;
    }

    .error-game-illustration {
        width: 82px;
        max-height: 112px;
    }

    .error-game-legend {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-game-primary,
    .error-game-pause-float {
        transform: none !important;
    }
}
/* Apartado Notificaciones: el historial y qué aviso llega de cada apartado. */

.notifications-shell,
.notifications-management-form {
    display: grid;
    gap: 14px;
}

.notifications-shell {
    margin-top: 18px;
}

/* Las tarjetas desplegables sueltas traen su propio margen y se sumaba al `gap`
   de la grilla: los dos desplegables quedaban al doble de distancia que en las
   demás pestañas. */
.notifications-shell > .panel.collapsible-panel,
.notifications-management-form > .panel.collapsible-panel {
    margin-top: 0;
}

.notifications-body {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

/* La frase corta separa el nombre del panel de la decisión que se toma adentro,
   sin competir con el título. */
.notifications-settings-subtitle {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* Los desplegables anidados generales son ámbar. En Notificaciones ese color
   se reserva para lo que de verdad está pendiente; los apartados usan la
   superficie neutra del panel y teal cuando están abiertos. */
.app-shell .notifications-settings-panel .notifications-group {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.app-shell .notifications-settings-panel .notifications-group > .collapsible-summary,
.app-shell .notifications-settings-panel .notifications-group:not([open]) > .collapsible-summary {
    align-items: center;
    min-height: 54px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 11px;
    background: var(--surface-soft);
    box-shadow: none;
}

.app-shell .notifications-settings-panel .notifications-group[open] > .collapsible-summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 11px 11px 0 0;
    background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface));
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.app-shell .notifications-settings-panel .notifications-group > .collapsible-summary:hover {
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface-soft));
}

.app-shell .notifications-settings-panel .notifications-group[open] > .collapsible-summary .collapsible-heading {
    color: var(--brand-primary);
}

.app-shell .notifications-settings-panel .notifications-group > .collapsible-summary .collapsible-indicator {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-color: var(--line);
    background: var(--surface);
    color: var(--brand-primary);
}

.notifications-group > .collapsible-summary .collapsible-heading {
    font-size: 15px;
}

.notifications-group-title {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notifications-group-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.notifications-group-status,
.notifications-group-pending {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.notifications-group-pending {
    border-color: color-mix(in srgb, var(--accent-amber) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-amber) 12%, var(--surface));
    color: #8a570f;
}

.notifications-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    margin: 0;
    padding: 14px;
    /* Cada casilla es tan alta como lo que tiene adentro: el aviso sin campo de
       anticipación no se estira hasta el alto del que sí lo tiene. */
    align-items: start;
}

/* Cabecera y anticipación forman una tarjeta única. El contenedor dibuja el
   borde; las dos filas interiores sólo ordenan el contenido. */
.notifications-list > .notification-card {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(16, 24, 33, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.notifications-list > .notification-card:has(.mini-switch input:not(:checked)) {
    border-color: color-mix(in srgb, var(--line-strong) 36%, var(--line));
    background: var(--surface-soft);
    box-shadow: none;
}

.notifications-list > .notification-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--line));
    box-shadow: 0 10px 26px rgba(16, 24, 33, 0.08);
    transform: translateY(-1px);
}

.notifications-list > .notification-card:focus-within {
    border-color: color-mix(in srgb, var(--brand-primary) 58%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.notifications-list > .notification-card > .visibility-toggle {
    min-height: 58px;
    padding: 12px 14px;
    border: 0;
    border-radius: 11px;
    background: transparent;
}

.notifications-list > .notification-card:has(.notification-lead) > .visibility-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.notification-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 11px 11px;
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-soft));
}

.notification-lead-label,
.notification-lead-suffix {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* Los dos campos son chicos a propósito: el molde de `.entry-form` los estira a
   todo el ancho y acá tienen que entrar en una línea con su rótulo. */
.notifications-list .notification-lead-amount {
    width: 68px;
    min-width: 68px;
    min-height: 38px;
    padding: 4px 8px;
    border-color: var(--line);
    background: var(--surface);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.notifications-list .notification-lead-unit {
    width: auto;
    min-width: 104px;
    min-height: 38px;
    padding: 4px 28px 4px 9px;
    border-color: var(--line);
    background-color: var(--surface);
    font-size: 13px;
    font-weight: 700;
}

.notifications-list :is(.notification-lead-amount, .notification-lead-unit):focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
    outline: none;
}

/* Un color por urgencia en la primera columna del historial: el vencido pide
   atención hoy y el programado puede esperar. */
.notification-row td:first-child {
    border-left: 3px solid transparent;
}

.notification-row-danger td:first-child {
    border-left-color: var(--danger);
}

.notification-row-strong td:first-child {
    border-left-color: var(--accent-amber);
}

.notification-row-blue td:first-child {
    border-left-color: var(--accent-blue);
}

.notification-title {
    font-weight: 700;
}

/* Los filtros son los mismos de la tabla de Registros; acá sólo se los despega
   del borde de arriba del desplegable. */
.notifications-filter-form {
    margin-bottom: 4px;
}

/* Una fila escondida por el filtro: `hidden` sola pierde contra el `display`
   que la tabla le da a sus filas. */
.notification-row[hidden] {
    display: none;
}

.notifications-empty-filter {
    margin: 0;
    padding: 18px 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Ninguna notificación es un aviso pelado: cada fila termina en el botón que la
   resuelve, y el color dice de qué tipo es sin tener que leerlo. */
.notification-action-cell {
    white-space: nowrap;
}

.notification-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* Chequear lleva a otra pestaña del mismo panel: se queda con el color de link
   de la app. Los otros dos hacen algo —abren WhatsApp, arman un PDF— y por eso
   van pintados. */
.notification-action-chequear {
    color: var(--link-blue);
}

html[data-theme="dark"] .app-shell .notification-action-chequear {
    color: var(--link-blue-dark);
}

.notification-action:hover,
.notification-action:focus-visible {
    filter: brightness(1.08);
}

/* El verde es el de WhatsApp, que es adonde lleva el botón. */
.notification-action-avisar {
    border-color: transparent;
    background: #128c7e;
    color: #fff;
}

.notification-action-generar {
    border-color: transparent;
    background: var(--accent-blue);
    color: #fff;
}

/* `19-notificaciones.css` se concatena después de los temas generales. Estas
   reglas específicas impiden que el estilo ámbar de cualquier subdesplegable
   vuelva marrones los apartados en modo oscuro. */
html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group {
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group > .collapsible-summary,
html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group:not([open]) > .collapsible-summary {
    border-color: var(--line);
    background: var(--surface-soft);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group[open] > .collapsible-summary {
    border-color: var(--line);
    background: color-mix(in srgb, #27c1cf 10%, var(--surface));
    box-shadow: inset 3px 0 0 #27c1cf;
}

html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group > .collapsible-summary:hover {
    background: color-mix(in srgb, #27c1cf 8%, var(--surface-soft));
}

html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group[open] > .collapsible-summary .collapsible-heading,
html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group > .collapsible-summary .collapsible-indicator {
    color: #7ee6ef;
}

html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group > .collapsible-summary .collapsible-indicator,
html[data-theme="dark"] .app-shell .notifications-settings-panel .notifications-group-status,
html[data-theme="dark"] .app-shell .notifications-list > .notification-card,
html[data-theme="dark"] .app-shell .notifications-list :is(.notification-lead-amount, .notification-lead-unit) {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .notifications-list > .notification-card:has(.mini-switch input:not(:checked)) {
    border-color: color-mix(in srgb, var(--line-strong) 34%, var(--line));
    background: var(--surface-soft);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .notifications-group-pending {
    border-color: color-mix(in srgb, var(--accent-amber) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-amber) 14%, var(--surface));
    color: var(--accent-amber);
}

html[data-theme="dark"] .app-shell .notification-lead {
    border-top-color: var(--line);
    background: color-mix(in srgb, #27c1cf 6%, var(--surface-soft));
}

@media (max-width: 760px) {
    .notifications-settings-subtitle {
        max-width: 34ch;
    }

    .app-shell .notifications-settings-panel .notifications-group > .collapsible-summary,
    .app-shell .notifications-settings-panel .notifications-group:not([open]) > .collapsible-summary {
        padding: 10px 12px;
    }

    .notifications-group-title {
        align-items: flex-start;
        gap: 8px;
    }

    .notifications-group-meta {
        flex-wrap: wrap;
    }

    .notifications-list {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .notifications-list > .notification-card:hover {
        transform: none;
    }

    .notifications-settings-panel .visibility-actions {
        justify-content: stretch;
    }

    .notifications-settings-panel .visibility-actions .button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .notifications-group-title {
        display: grid;
        justify-content: stretch;
    }

    .notifications-group-meta {
        justify-content: flex-start;
    }

    .notifications-group-status,
    .notifications-group-pending {
        min-height: 22px;
        padding: 2px 7px;
        font-size: 10px;
    }

    .notifications-list > .notification-card > .visibility-toggle {
        gap: 10px;
        padding: 11px 12px;
    }

    .notification-lead {
        display: grid;
        grid-template-columns: minmax(58px, 68px) minmax(0, 1fr) auto;
        gap: 6px;
        padding: 10px 12px 12px;
    }

    .notification-lead-label {
        grid-column: 1 / -1;
    }

    .notifications-list .notification-lead-amount,
    .notifications-list .notification-lead-unit {
        width: 100%;
        min-width: 0;
    }

    .notifications-list .visibility-hint-popover {
        min-width: min(220px, calc(100vw - 44px));
        max-width: min(280px, calc(100vw - 44px));
    }
}
/* Tema compartido de las páginas independientes de WorKraken.

   El shell, la landing y los sitios públicos conservan sus composiciones
   propias; todos leen la misma preferencia. Este bloque completa las vistas
   que antes no tenían modo oscuro (acceso, registro, checkout, retorno de
   pagos y páginas públicas simples). */

.workraken-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid #6d28d9;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-weight: var(--font-semibold);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(62, 20, 112, 0.16);
}

.workraken-theme-toggle:hover,
.workraken-theme-toggle:focus-visible {
    border-color: #5b21b6;
    outline: 3px solid rgba(109, 40, 217, 0.24);
    outline-offset: 2px;
}

.workraken-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.workraken-theme-toggle-sun,
html[data-theme="dark"] .workraken-theme-toggle-moon {
    display: none;
}

html[data-theme="dark"] .workraken-theme-toggle-sun {
    display: block;
}

html[data-theme="dark"] :is(.login-body, .plan-checkout-body, .payment-return-page, .public-page) {
    background: radial-gradient(circle at 50% 0%, #2d1450 0%, #13091f 42%, #08040d 100%);
    color: #ffffff;
}

html[data-theme="dark"] :is(
    .login-panel,
    .plan-checkout-head,
    .plan-picker,
    .plan-summary,
    .payment-return-panel,
    .account-payment-panel
) {
    border-color: #6d28d9;
    background: #17111f;
    color: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] :is(
    .login-panel,
    .plan-checkout,
    .payment-return-panel,
    .account-payment-panel
) :is(h1, h2, h3, p, label, small, strong, dt, dd, a) {
    color: #ffffff;
}

html[data-theme="dark"] :is(.login-form input, .google-auth-button) {
    border-color: #8b5cf6;
    background: #0d0714;
    color: #ffffff;
}

html[data-theme="dark"] .service-config-form :is(input, select) {
    border-color: #8b5cf6;
    background: #0d0714;
    color: #ffffff;
}

html[data-theme="dark"] .login-divider::before,
html[data-theme="dark"] .login-divider::after,
html[data-theme="dark"] .plan-picker-row,
html[data-theme="dark"] .plan-picker-heading span,
html[data-theme="dark"] :is(.plan-picker-module, .plan-option),
html[data-theme="dark"] .plan-summary dl div {
    border-color: #5b4674;
}

html[data-theme="dark"] :is(.plan-option, .plan-summary-discounts article) {
    background: #21162e;
    color: #ffffff;
}

html[data-theme="dark"] .plan-option:has(input:checked) {
    background: #2f174b;
    box-shadow: inset 0 0 0 3px #a855f7;
}

html[data-theme="dark"] .workraken-theme-toggle {
    border-color: #c084fc;
    background: #17111f;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .public-site {
    --public-accent: #c084fc;
    --public-accent-strong: #a855f7;
    --public-bg: #0d0714;
    --public-surface: #17111f;
    --public-soft: #21162e;
    --public-ink: #ffffff;
    --public-muted: #ffffff;
}

.workraken-brand-asset-dark {
    display: none !important;
}

html[data-theme="dark"] .workraken-brand-asset-light {
    display: none !important;
}

html[data-theme="dark"] .workraken-brand-asset-dark {
    display: block !important;
}

@media (max-width: 560px) {
    .workraken-theme-toggle {
        top: 14px;
        right: 14px;
        width: 42px;
        padding: 8px;
        justify-content: center;
    }

    .workraken-theme-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* Contrato de legibilidad del producto.

   El texto común tiene sólo dos colores: negro sobre superficies claras y
   blanco sobre superficies oscuras. Los grises se reservan para ejemplos que
   todavía no son un valor del campo; por eso los placeholders tienen su token
   propio y no reutilizan `--muted` ni `--muted-soft`. Esta hoja es la última de
   la cascada para que el contrato también alcance componentes antiguos. */
:root,
html:not([data-theme="dark"]) .app-shell,
html:not([data-landing-theme="dark"]) .landing-page,
.public-site.public-design:not([data-public-theme="dark"]) {
    --ink: #000000;
    --text: #000000;
    --muted: #000000;
    --muted-soft: #000000;
    --public-ink: #000000;
    --public-muted: #000000;
    --placeholder: #66757a;
}

html[data-theme="dark"],
html[data-theme="dark"] .app-shell,
html[data-landing-theme="dark"],
html[data-landing-theme="dark"] .landing-page,
.public-site.public-design[data-public-theme="dark"] {
    --ink: #ffffff;
    --text: #ffffff;
    --muted: #ffffff;
    --muted-soft: #ffffff;
    --public-ink: #ffffff;
    --public-muted: #ffffff;
    --placeholder: #9aaeb6;
}

/* Marte claro usa fondos de papel en portada, cálculo y blog. Las reglas
   históricas del modelo oscuro y del panel administrador no deben convertir
   ese contenido en blanco cuando la página se previsualiza dentro del shell
   oscuro. El identificador inexistente eleva la especificidad de la regla
   para que el contrato gane también frente a declaraciones con !important. */
.public-template-urbana.public-design-urban:not([data-public-theme="dark"]) :is(
    .urban-copy .public-hero-description,
    .urban-copy .public-hero-description *,
    .urban-rates .urban-section-head h2,
    .urban-rates .public-calculation-mode label,
    .urban-rates .public-price-form label,
    .urban-rates .public-date-time-field,
    .urban-rates .field-label-line,
    .urban-rates .public-cyclic-field legend,
    .urban-rates .public-cyclic-field p,
    .urban-rates .public-cyclic-row-title,
    .urban-rates .public-cyclic-day,
    .urban-blog .public-section-head h2,
    .urban-blog .public-blog-grid strong,
    .urban-blog .public-blog-grid p,
    .urban-blog .public-blog-grid p *,
    .urban-blog .public-blog-grid small,
    .urban-blog .public-blog-card-more,
    #texto-legible-marte-claro
) {
    color: #000000 !important;
    opacity: 1;
}

/* El CTA integrado de Tierra descansa sobre un velo oscuro en los dos temas,
   así que su título y su bajada son blancos por contrato, también dentro de la
   preview del panel: reglas del app-shell como `.panel h2` (que resuelven
   var(--ink) en negro cuando la página está en claro) no deben pintarlos. */
:is(
    .public-template-clasica .visual-footer .public-footer-cta,
    #texto-legible-cta-tierra
) :is(h2, p) {
    color: #ffffff !important;
    opacity: 1;
}

/* En el panel oscuro, Tierra clara conserva el footer blanco por contrato,
   pero el botón claro del CTA integrado necesita texto negro. */
html[data-theme="dark"]
    .app-shell
    .public-page-owner-preview
    .public-template-clasica:not([data-public-theme="dark"])
    .visual-footer
    .public-footer-cta
    .public-banner-primary {
    color: #000000 !important;
}

/* Un placeholder escrito por el navegador es el único texto que se mantiene
   gris. `!important` neutraliza reglas históricas de plantillas públicas que
   fijaban el ejemplo en negro o blanco. El identificador deliberadamente
   inexistente eleva la especificidad de :is() sin exigir cambios de marcado. */
:is(
    input,
    textarea,
    .search-input,
    #texto-legible-placeholder-navegador
)::placeholder {
    color: var(--placeholder) !important;
    opacity: 1;
}

/* Los <select> no implementan ::placeholder: el sincronizador les agrega esta
   clase mientras su valor está vacío. Los selectores personalizados usan la
   misma marca, por lo que quedan bajo el mismo contrato. */
:is(
    select.is-placeholder,
    [data-country-selected-name].is-placeholder,
    .rental-property-type-open.is-placeholder,
    .split-picker-open.is-placeholder,
    .parking-client-picker-button.is-empty,
    .company-selector-button.is-empty,
    .parking-record-picker-placeholder,
    [data-public-time24-display].is-placeholder,
    #texto-legible-placeholder-selector
) {
    color: var(--placeholder) !important;
    opacity: 1;
}

:is(select.is-placeholder, #texto-legible-placeholder-selector) option[value=""] {
    color: var(--placeholder) !important;
}

:is(select.is-placeholder, #texto-legible-placeholder-selector) option:not([value=""]) {
    color: var(--ink) !important;
}