/* ════════════════════════════════════════════════════════
   BARCINO DESIGN TOKENS
   Brand constants — stable across light and dark themes
   ════════════════════════════════════════════════════════ */
:root {
    color-scheme: light dark;
    font-family: "Inter", system-ui, sans-serif;

    --bc-grana:       #c0364d;
    --bc-grana-soft:  #d94d63;
    --bc-grana-deep:  #8b1a2f;
    --bc-navy:        #0f1d44;
    --bc-navy-deep:   #0a1430;
    --bc-navy-soft:   #16285a;
    --bc-cream:       #f3eee5;
    --bc-cream-deep:  #ebe4d6;
    --bc-ink:         #0a0e1f;

    /* Primary accent — always grana in both themes; at :root so body-level
       elements (dialogs, overlays) inherit without needing .rz-material-dark */
    --rz-primary:                var(--bc-grana);
    --rz-primary-light:          var(--bc-grana-soft);
    --rz-primary-lighter:        rgba(192, 54, 77, 0.12);
    --rz-primary-dark:           var(--bc-grana-deep);
    --rz-primary-darker:         #6b1424;
    --rz-on-primary:             #ffffff;
    --rz-on-primary-lighter:     var(--bc-grana);

    /* HSL components — Radzen v10 builds focus rings from these */
    --rz-primary-h:              349;
    --rz-primary-s:              55%;
    --rz-primary-l:              48%;

    /* ── DisponibilidadPublica calendar level tokens (light) ── */
    --dp-lvl0-bg:            #fbf8f1;
    --dp-lvl0-dot:           rgba(10, 14, 31, .45);
    --dp-lvl1-bg:            rgba(168, 117, 16, .10);
    --dp-lvl1-dot:           #a87510;
    --dp-lvl2-bg:            rgba(46, 128, 71, .10);
    --dp-lvl2-dot:           #3a5fb0;
    --dp-lvl3-bg:            rgba(46, 128, 71, .18);
    --dp-lvl3-dot:           #2e8047;
    --dp-cell-border:        rgba(10, 14, 31, .08);
    --dp-sel-ring:           rgba(192, 54, 77, .15);
    --dp-surface-alt:        #fbf8f1;
    --dp-surface:            #ffffff;
    --dp-success:            #2e8047;
    --dp-warn:               #a87510;
    --dp-warn-bg:            rgba(168, 117, 16, .10);
    --dp-info:               #3a5fb0;
    --dp-nocturno-bg:        rgba(58, 95, 176, .10);
    --dp-nocturno-color:     #3a5fb0;
}

/* ════════════════════════════════════════════════════════
   RADZEN OVERRIDES — both themes
   Sidebar and topbar: always institutional dark (navy-deep)
   Primary accent: grana
   ════════════════════════════════════════════════════════ */
.rz-material,
.rz-material-dark {
    /* Header — always navy-deep */
    --rz-header-background-color:              var(--bc-navy-deep);
    --rz-header-color:                         var(--bc-cream);
    --rz-header-shadow:                        none;

    /* Sidebar — always navy-deep */
    --rz-sidebar-background-color:             var(--bc-navy-deep);
    --rz-sidebar-color:                        rgba(243, 238, 229, 0.7);
    --rz-sidebar-border-inline-end:            1px solid rgba(243, 238, 229, 0.06);

    /* Sidebar hamburger toggle */
    --rz-sidebar-toggle-color:                 var(--bc-cream);
    --rz-sidebar-toggle-hover-color:           var(--bc-cream);
    --rz-sidebar-toggle-background-color:      transparent;
    --rz-sidebar-toggle-hover-background-color: rgba(243, 238, 229, 0.06);
    --rz-sidebar-toggle-border:                none;

    /* Navigation menu items */
    --rz-panel-menu-item-border:               none;
    --rz-panel-menu-item-color:                rgba(243, 238, 229, 0.7);
    --rz-panel-menu-item-background-color:     var(--bc-navy-deep);
    --rz-panel-menu-item-hover-color:          var(--bc-cream);
    --rz-panel-menu-item-hover-background-color: rgba(243, 238, 229, 0.06);
    --rz-panel-menu-item-active-color:         var(--bc-cream);
    --rz-panel-menu-item-active-background-color: rgba(192, 54, 77, 0.18);
    --rz-panel-menu-item-active-indicator:     var(--bc-grana);
    --rz-panel-menu-icon-color:                rgba(243, 238, 229, 0.5);
    --rz-panel-menu-item-2nd-level-border:     none;
    --rz-panel-menu-item-2nd-level-color:      rgba(243, 238, 229, 0.55);
    --rz-panel-menu-item-2nd-level-background-color: var(--bc-navy-deep);
    --rz-panel-menu-item-2nd-level-hover-background-color: rgba(243, 238, 229, 0.06);
    --rz-panel-menu-item-2nd-level-active-background-color: rgba(192, 54, 77, 0.18);
    --rz-panel-menu-item-2nd-level-active-color: var(--bc-cream);
}

/* Header and sidebar explicit color (fallback for elements that don't inherit via variable) */
.rz-header {
    color: var(--bc-cream);
}

.rz-sidebar {
    color: rgba(243, 238, 229, 0.7);
}

/* Active nav indicator — Material theme hides this with display:none; re-enable it */
.rz-panel-menu .rz-navigation-item-wrapper-active:before {
    display: block;
    inset-inline-start: 0;
}

/* Sidebar nav click ripple: in light mode --rz-base-300 is #e0e0e0 (light gray),
   which flashes over the dark navy sidebar and hides cream text. Mirror dark theme's
   subtle transparent overlay to keep the sidebar visually consistent in both modes. */
.rz-material .rz-sidebar .rz-panel-menu .rz-navigation-item-link {
    background: radial-gradient(circle, transparent 1%, rgba(243, 238, 229, 0.08) 1%) center/15000% !important;
}

.rz-material .rz-sidebar .rz-panel-menu .rz-navigation-item-link:active {
    background-color: rgba(243, 238, 229, 0.08) !important;
}

/* Active nav icon — grana, independent from text color (cream) */
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: var(--bc-grana-soft);
}

/* ════════════════════════════════════════════════════════
   GRID / TABLE — typography & structure (both themes)
   ════════════════════════════════════════════════════════ */
.rz-material,
.rz-material-dark {
    /* Header typography */
    --rz-grid-header-text-transform:        uppercase;
    --rz-grid-header-font-size:             0.6875rem;
    --rz-grid-header-font-weight:           700;
    --rz-grid-header-cell-padding:          0.875rem 1rem;
    --rz-grid-header-title-padding-inline:  0 0;

    /* Cell spacing */
    --rz-grid-cell-padding:                 1rem 1rem;
    --rz-grid-cell-font-size:               0.875rem;

    /* Border radius */
    --rz-grid-border-radius:                6px;
    --rz-card-border-radius:                6px;

    /* Pager — sizing */
    --rz-pager-padding:                                  0.625rem 1.25rem;
    --rz-pager-button-border-radius:                     4px;
    --rz-pager-numeric-button-selected-background-color: var(--bc-grana);
    --rz-pager-numeric-button-selected-color:            #ffffff;
    --rz-pager-numeric-button-selected-border:           none;
}

/* ════════════════════════════════════════════════════════
   LIGHT THEME — content area + grid colors
   ════════════════════════════════════════════════════════ */
.rz-material {
    --bc-text-soft:                         rgba(10, 14, 31, 0.65);
    --bc-border-color:                      rgba(10, 14, 31, 0.08);
    --rz-body-background-color:             var(--bc-cream);
    --rz-layout-background-color:           var(--bc-cream);
    --rz-base-background-color:             #ffffff;
    --rz-text-color:                        var(--bc-ink);

    /* Grid */
    --rz-grid-header-background-color:      #faf6ed;
    --rz-grid-background-color:             #ffffff;
    --rz-grid-stripe-background-color:      #fbf8f1;
    --rz-grid-stripe-odd-background-color:  #ffffff;
    --rz-grid-toolbar-background-color:     #ffffff;
    --rz-grid-hover-background-color:       var(--bc-cream-deep);
    --rz-grid-cell-border:                  1px solid rgba(10, 14, 31, 0.07);
    --rz-grid-header-cell-border-bottom:    1px solid rgba(10, 14, 31, 0.12);
    --rz-grid-border:                       1px solid rgba(10, 14, 31, 0.08);
    --rz-grid-foot-background-color:        #faf6ed;

    /* Card */
    --rz-card-border:                       1px solid rgba(10, 14, 31, 0.08);
    --rz-card-shadow:                       0 1px 4px rgba(10, 14, 31, 0.06);
}

/* ════════════════════════════════════════════════════════
   DARK THEME — content area + grid colors
   ════════════════════════════════════════════════════════ */
.rz-material-dark {
    --rz-header-background-color:           var(--bc-navy);
    --rz-body-background-color:             #0c1426;
    --rz-layout-background-color:           #0c1426;
    --rz-base-background-color:             var(--bc-navy);
    --rz-text-color:                        var(--bc-cream);

    /* Grid */
    --rz-grid-header-background-color:      var(--bc-navy-deep);
    --rz-grid-background-color:             var(--bc-navy);
    --rz-grid-stripe-background-color:      #13213f;
    --rz-grid-stripe-odd-background-color:  var(--bc-navy);
    --rz-grid-toolbar-background-color:     var(--bc-navy);
    --rz-grid-hover-background-color:       var(--bc-navy-soft);
    --rz-grid-cell-border:                  1px solid rgba(243, 238, 229, 0.07);
    --rz-grid-header-cell-border-bottom:    1px solid rgba(243, 238, 229, 0.12);
    --rz-grid-border:                       1px solid rgba(243, 238, 229, 0.1);
    --rz-grid-foot-background-color:        var(--bc-navy-deep);

    /* Card */
    --rz-card-border:                       1px solid rgba(243, 238, 229, 0.1);
    --rz-card-shadow:                       0 1px 6px rgba(0, 0, 0, 0.3);

    --bc-text-soft:                         rgba(243, 238, 229, 0.65);
    --bc-border-color:                      rgba(243, 238, 229, 0.1);

    /* ── DisponibilidadPublica calendar level tokens (dark) ── */
    --dp-lvl0-bg:            #16285a;
    --dp-lvl0-dot:           rgba(243, 238, 229, .40);
    --dp-lvl1-bg:            rgba(232, 169, 59, .15);
    --dp-lvl1-dot:           #e8a93b;
    --dp-lvl2-bg:            rgba(90, 180, 112, .15);
    --dp-lvl2-dot:           #5b8cd9;
    --dp-lvl3-bg:            rgba(46, 128, 71, .18);
    --dp-lvl3-dot:           #5ab470;
    --dp-cell-border:        rgba(243, 238, 229, .10);
    --dp-sel-ring:           rgba(217, 77, 99, .25);
    --dp-surface-alt:        #16285a;
    --dp-surface:            #0f1d44;
    --dp-success:            #5ab470;
    --dp-warn:               #e8a93b;
    --dp-warn-bg:            rgba(232, 169, 59, .15);
    --dp-info:               #5b8cd9;
    --dp-nocturno-bg:        rgba(91, 140, 217, .18);
    --dp-nocturno-color:     #5b8cd9;
}

/* Radzen material-dark applies a transparent or body-coloured background to cards,
   bypassing --rz-base-background-color. Force navy explicitly. */
.rz-material-dark .rz-card {
    background-color: var(--bc-navy);
}

/* ════════════════════════════════════════════════════════
   FLUSH CARD — grid/table extends to card edges
   ════════════════════════════════════════════════════════ */
.rz-card.bc-card-flush {
    padding: 0;
    overflow: hidden;
}

.bc-card-title,
.bc-card-toolbar {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

/* ════════════════════════════════════════════════════════
   PAGER — compact, mono, uppercase
   Multiple selector variants because Radzen v10 class names
   differ between minor versions.
   ════════════════════════════════════════════════════════ */

/* Count summary "1-3 DE 3" — all possible containers */
.rz-pager-info,
.rz-pager-info span,
.rz-paginator-left-content,
.rz-paginator-left-content span {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 0.6875rem !important;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase !important;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65)) !important;
}

/* Page size label "POR PÁGINA" — direct span children of the page-size li */
.rz-page-size-description,
.rz-pager-page-size > span,
.rz-pager li:last-child > span,
.rz-paginator-right-content > span {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 0.6875rem !important;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase !important;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65)) !important;
    margin-left: 0.375rem;
}

/* Page size dropdown — compact height */
.rz-grid-pager .rz-dropdown,
.rz-pager-page-size .rz-dropdown {
    height: 1.75rem !important;
    min-height: unset !important;
}

.rz-grid-pager .rz-dropdown .rz-state-default,
.rz-pager-page-size .rz-dropdown .rz-state-default {
    height: 1.75rem !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
}

/* Dropdown label (the visible "10" value) */
.rz-grid-pager .rz-dropdown-label,
.rz-pager-page-size .rz-dropdown-label {
    height: 1.75rem !important;
    line-height: 1.75rem !important;
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.06em;
    padding: 0 2rem 0 0.625rem !important;
}

/* Dropdown panel list items */
.rz-grid-pager .rz-dropdown-panel .rz-dropdown-item {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    padding: 0.375rem 0.75rem;
}

/* Page number buttons — compact */
.rz-grid-pager .rz-paginator-element {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 0.75rem !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ════════════════════════════════════════════════════════
   FILTER POPUP + DROPDOWNS
   rz-overlaypanel is appended to <body>, outside .rz-material-dark scope.
   Dark theme overrides must use html:has(.rz-material-dark).
   --bc-* tokens are at :root so they resolve at body level.
   ════════════════════════════════════════════════════════ */

/* Sede y Estado filtran con estado propio (no con el filtro nativo del grid), así que Radzen no añade
   .rz-grid-filter-active a su icono. Cuando hay filtro aplicado marcamos la cabecera con
   .bc-col-filter-active (HeaderCssClass) y replicamos el resaltado nativo del icono —mismos tokens de
   tema, incluido el relleno (--rz-icon-fill) que lo pinta sólido— para que se vea en rojo como el resto. */
.bc-col-filter-active .rz-grid-filter-icon {
    color: var(--rz-grid-header-filter-icon-active-color) !important;
    --rz-icon-fill: 1;
}

/* BOTH THEMES — base popup shape */
.rz-overlaypanel {
    border-radius: 6px !important;
    overflow: hidden !important;
}

.rz-overlaypanel .rz-grid-filter-buttons {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
    display: flex !important;
}

.rz-overlaypanel .rz-grid-filter-label {
    font-family: "Inter", sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* DARK THEME — popup container */
html:has(.rz-material-dark) .rz-overlaypanel {
    background-color: var(--bc-navy-soft) !important;
    border: 1px solid rgba(243, 238, 229, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
    color: var(--bc-cream) !important;
}

/* DARK THEME — filter label */
html:has(.rz-material-dark) .rz-overlaypanel .rz-grid-filter-label {
    color: rgba(243, 238, 229, 0.65) !important;
}

/* DARK THEME — text inputs */
html:has(.rz-material-dark) .rz-overlaypanel .rz-textbox {
    background-color: var(--bc-navy) !important;
    border-color: rgba(243, 238, 229, 0.14) !important;
    color: var(--bc-cream) !important;
}

html:has(.rz-material-dark) .rz-overlaypanel .rz-textbox:focus {
    border-color: var(--bc-grana) !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 54, 77, 0.3) !important;
}

/* DARK THEME — operator dropdown trigger (visible label + arrow) */
html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-label {
    background-color: var(--bc-navy) !important;
    border-color: rgba(243, 238, 229, 0.14) !important;
    color: var(--bc-cream) !important;
}

html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-trigger {
    background-color: var(--bc-navy) !important;
    border-color: rgba(243, 238, 229, 0.14) !important;
    color: rgba(243, 238, 229, 0.65) !important;
}

/* DARK THEME — operator dropdown panel (options list, rendered inside the overlaypanel) */
html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-panel {
    background-color: var(--bc-navy-soft) !important;
    border: 1px solid rgba(243, 238, 229, 0.12) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-item {
    color: var(--bc-cream) !important;
}

html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-item:hover,
html:has(.rz-material-dark) .rz-overlaypanel .rz-dropdown-item.rz-state-highlight {
    background-color: rgba(192, 54, 77, 0.18) !important;
    color: var(--bc-cream) !important;
}

/* DARK THEME — filter buttons footer */
html:has(.rz-material-dark) .rz-overlaypanel .rz-grid-filter-buttons {
    border-top: 1px solid rgba(243, 238, 229, 0.1) !important;
    background-color: var(--bc-navy-soft) !important;
}

/* Focus ring — grana inside the layout (for scoped elements) */
.rz-material .rz-state-focus,
.rz-material .rz-inputtext:focus,
.rz-material-dark .rz-state-focus,
.rz-material-dark .rz-inputtext:focus {
    outline: none;
    border-color: var(--bc-grana) !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 54, 77, 0.3) !important;
}

/* Focus ring — grana for body-level popup inputs (both themes) */
.rz-overlaypanel .rz-state-focus,
.rz-overlaypanel .rz-inputtext:focus {
    outline: none !important;
    border-color: var(--bc-grana) !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 54, 77, 0.3) !important;
}

/* ════════════════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════════════════ */
.bc-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 2.25rem 1.75rem;
    border-bottom: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
    margin-bottom: 1.5rem;
}

.bc-page-header-content {
    flex: 1;
    min-width: 0;
}

.bc-page-header-breadcrumb {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    margin-bottom: 0.625rem;
}

.bc-page-header-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bc-grana);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.bc-page-header-eyebrow-line {
    display: block;
    width: 1.375rem;
    height: 1.5px;
    background: var(--bc-grana);
    flex-shrink: 0;
}

.bc-page-header-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: 2.75rem;
    margin: 0;
    color: var(--rz-text-color);
}

.bc-page-header-title--italic {
    font-weight: 400;
    font-style: italic;
    color: var(--bc-grana);
}

.bc-title-accent {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: var(--bc-grana);
}

.bc-page-header-sub {
    font-size: 0.875rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    margin-top: 0.625rem;
    margin-bottom: 0;
    max-width: 45rem;
    line-height: 1.55;
}

.bc-page-header-actions {
    flex-shrink: 0;
    align-self: center;
}

/* ════════════════════════════════════════════════════════
   HTML / BODY
   ════════════════════════════════════════════════════════ */
html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bc-navy-deep);
    color: var(--bc-ink);
}

body {
    min-height: 100vh;
}

input,
button {
    font: inherit;
}

a {
    color: inherit;
}

h1:focus {
    outline: none;
}

/* ════════════════════════════════════════════════════════
   FORM FIELDS
   ════════════════════════════════════════════════════════ */
.barcino-required-mark {
    color: var(--bc-grana);
}

/* ════════════════════════════════════════════════════════
   FORM VALIDATION
   ════════════════════════════════════════════════════════ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2e8b57;
}

.invalid {
    outline: 1px solid #c0392b;
}

.validation-message {
    color: #c0392b;
}

/* ════════════════════════════════════════════════════════
   BLAZOR ERROR BOUNDARY
   ════════════════════════════════════════════════════════ */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxibnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem 1rem / 1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ════════════════════════════════════════════════════════
   DASHBOARD HERO — light + dark variants
   ════════════════════════════════════════════════════════ */
.dashboard-hero {
    background: linear-gradient(135deg, #17352d 0%, #2c5b4f 100%);
    color: #f7f1e7;
}

.rz-material-dark .dashboard-hero {
    background: linear-gradient(135deg, var(--bc-navy-deep) 0%, var(--bc-navy) 100%);
    color: var(--bc-cream);
}

/* ════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════ */
.session-timeout-form {
    display: none;
}

@media (max-width: 900px) {
    .landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-block: 2rem;
    }

    .landing-copy h1 {
        max-width: none;
    }

    .landing-highlights {
        grid-template-columns: 1fr;
    }
}

.barcino-error-detail {
    margin: 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--bc-cream-deep, #ebe4d6);
    border: 1px solid rgba(10, 14, 31, 0.1);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--bc-ink, #0a0e1f);
}

html:has(.rz-material-dark) .barcino-error-detail {
    background: var(--bc-navy-deep, #0a1430);
    border-color: rgba(243, 238, 229, 0.12);
    color: var(--bc-cream, #f3eee5);
}

/* ════════════════════════════════════════════════════════
   TOPBAR — 64px height, brand, icon buttons, user section
   ════════════════════════════════════════════════════════ */

.rz-header {
    height: 64px !important;
    min-height: 64px !important;
}

.rz-header .rz-row {
    height: 64px;
    padding-block: 0 !important;
    padding-inline: 1.5rem;
    align-items: center !important;
}

/* Sidebar hamburger toggle — bordered square like the design */
.rz-header .rz-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid rgba(243, 238, 229, 0.18) !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Brand title — Fraunces display font */
.bc-header-brand {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: 1.125rem;
    color: var(--bc-cream);
    white-space: nowrap;
}

.bc-header-brand-accent {
    font-style: italic;
    font-weight: 400;
    color: var(--bc-grana-soft);
}

/* Theme toggle and other icon-only buttons */
.bc-topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(243, 238, 229, 0.18);
    color: var(--bc-cream);
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
    line-height: 0;
}

.bc-topbar-icon-btn:hover {
    background: rgba(243, 238, 229, 0.06);
}

/* Language label — JetBrains Mono, muted cream */
.bc-header-lang-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 238, 229, 0.55);
    white-space: nowrap;
}

/* Language dropdown — styled as a bordered button */
.bc-header-lang-wrapper .rz-dropdown {
    min-width: 7.5rem !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid rgba(243, 238, 229, 0.18) !important;
    border-radius: 4px !important;
}

.bc-header-lang-wrapper .rz-dropdown .rz-state-default {
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.bc-header-lang-wrapper .rz-dropdown .rz-dropdown-label {
    flex: 1 !important;
    height: auto !important;
    line-height: normal !important;
    color: var(--bc-cream) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0 0 0 0.875rem !important;
    background: transparent !important;
}

.bc-header-lang-wrapper .rz-dropdown .rz-dropdown-trigger {
    color: var(--bc-cream) !important;
    padding: 0 0.5rem !important;
    flex-shrink: 0 !important;
}

.bc-header-lang-wrapper .rz-dropdown:hover {
    background: rgba(243, 238, 229, 0.06) !important;
}

/* User info block — avatar + name + role, separated by left border */
.bc-header-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.375rem 0 0.875rem;
    border-left: 1px solid rgba(243, 238, 229, 0.12);
    height: 36px;
}

/* Circular avatar with user initial in Fraunces italic */
.bc-header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bc-grana-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.bc-header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.bc-header-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bc-cream);
    white-space: nowrap;
}

.bc-header-user-role {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    color: var(--bc-grana-soft);
    text-transform: uppercase;
    margin-top: 0.125rem;
}

/* Cart CTA button — grana-filled, the primary topbar action */
.bc-topbar-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    height: 36px;
    border-radius: 4px;
    background: var(--bc-grana);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(192, 54, 77, 0.35);
}

.bc-topbar-cart:hover {
    background: var(--bc-grana-deep);
    color: #fff;
    box-shadow: 0 2px 12px rgba(192, 54, 77, 0.45);
}

/* Cesta bloqueada mientras se tramita el pago (página de checkout) */
.bc-topbar-cart--locked,
.bc-topbar-cart--locked:hover {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bc-grana);
    box-shadow: none;
}

/* Count badge inside the cart button */
.bc-topbar-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #fff;
    color: var(--bc-grana);
    font-size: 0.5625rem;
    font-weight: 800;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    line-height: 1;
    flex-shrink: 0;
}

/* Logout button — outlined, muted, matching topbar aesthetic */
.bc-topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 4px;
    background: rgba(243, 238, 229, 0.04);
    border: 1px solid rgba(243, 238, 229, 0.18);
    color: var(--bc-cream);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: inherit;
    transition: background 0.12s;
    white-space: nowrap;
    line-height: 1;
}

.bc-topbar-logout:hover {
    background: rgba(243, 238, 229, 0.08);
}

/* ─── Barra superior compacta en móvil ───
   Ocultamos idioma y datos de usuario; cesta y cerrar sesión quedan
   reducidos a su icono para que todo quepa en pantallas pequeñas. */
@media (max-width: 768px) {
    /* La cabecera nunca debe partirse en dos filas (las acciones caían
       a una segunda línea y se solapaban con el contenido). Marca a la
       izquierda, acciones ancladas a la derecha, todo en una sola fila. */
    .rz-header .rz-row {
        flex-wrap: nowrap;
    }

    /* La marca se acorta a solo "Barcino" para dejar sitio a las acciones */
    .bc-header-brand-prefix {
        display: none;
    }

    .bc-topbar-actions {
        flex-shrink: 0;
        gap: 0.4rem;
    }

    /* Sin selector de idioma ni bloque de usuario (avatar + nombre) */
    .bc-header-lang,
    .bc-header-user {
        display: none !important;
    }

    /* Cesta: solo icono, ancho fijo cuadrado */
    .bc-topbar-cart {
        width: 36px;
        padding: 0;
        gap: 0;
        justify-content: center;
        position: relative;
    }

    .bc-topbar-cart-label {
        display: none;
    }

    /* El contador pasa a ser una pegatina en la esquina del icono */
    .bc-topbar-cart-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 16px;
        height: 16px;
        box-shadow: 0 0 0 2px var(--rz-header-background-color);
    }

    /* Cerrar sesión: solo icono, ancho fijo cuadrado */
    .bc-topbar-logout {
        width: 36px;
        height: 36px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .bc-topbar-logout-label {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════
   MIS RESERVAS
   ════════════════════════════════════════════════════════ */

.mr-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mr-stats {
    display: flex;
    align-items: center;
    gap: 1.625rem;
}

.mr-stat {
    text-align: center;
}

.mr-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1;
}

.mr-stat-label {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.5875rem;
    letter-spacing: 0.12em;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    margin-top: 3px;
    text-transform: uppercase;
}

.mr-stat-sep {
    width: 1px;
    height: 2rem;
    background: var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

/* ── Tabs ── */
.mr-tabs {
    display: flex;
    border-bottom: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
    margin-bottom: 1.5rem;
}

.mr-tab {
    padding: 0.75rem 1.125rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    transition: color 0.15s;
}

.mr-tab:hover { color: var(--rz-text-color); }

.mr-tab--active {
    color: var(--bc-grana);
    border-bottom-color: var(--bc-grana);
}

.mr-tab-badge {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--rz-base-background-color);
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    border: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

.mr-tab-badge--active {
    background: var(--bc-grana);
    color: #fff;
    border-color: transparent;
}

/* ── DateBlock ── */
.mr-date-block {
    width: 76px;
    flex-shrink: 0;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
    background: var(--rz-base-background-color);
    overflow: hidden;
}

.mr-date-block--accent {
    border-color: var(--bc-grana);
    background: rgba(192, 54, 77, 0.06);
}

.rz-material-dark .mr-date-block--accent {
    background: rgba(192, 54, 77, 0.12);
}

.mr-date-mon {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    padding: 6px 0 2px;
    text-transform: uppercase;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
}

.mr-date-block--accent .mr-date-mon { color: var(--bc-grana); }

.mr-date-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 0.95;
    color: var(--rz-text-color);
}

.mr-date-block--accent .mr-date-day { color: var(--bc-grana); }

.mr-date-dow {
    font-size: 9.5px;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    padding: 3px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Featured next reservation card ── */
.mr-next-card {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

.mr-next-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--bc-grana);
}

.mr-next-card-body {
    padding: 1.375rem 1.625rem 1.375rem 1.875rem;
}

.mr-next-card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.125rem;
    flex-wrap: wrap;
}

.mr-next-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bc-grana);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mr-countdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(46, 128, 71, 0.1);
    color: #2e8047;
    font-size: 0.75rem;
    font-weight: 700;
}

.rz-material-dark .mr-countdown-pill {
    background: rgba(90, 180, 112, 0.15);
    color: #5ab470;
}

.mr-next-content {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    flex-wrap: wrap;
}

.mr-next-info { flex: 1; min-width: 220px; }

.mr-unit-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.mr-sede-name {
    font-size: 1.6875rem;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1.05;
}

.mr-next-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.mr-next-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.mr-next-price { text-align: right; flex-shrink: 0; }

.mr-price-big {
    font-size: 2.125rem;
    font-weight: 700;
    color: var(--bc-grana);
    line-height: 1;
}

.mr-price-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.5875rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
}

.mr-next-actions {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Section heading ── */
.mr-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.125rem;
}

.mr-section-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    white-space: nowrap;
}

.mr-section-line {
    flex: 1;
    height: 1px;
    background: var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

.mr-section-right {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.65625rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Compact reservation row ── */
.mr-row {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════
   COMO LLEGAR DIALOG — body-level (outside component scope)
   ════════════════════════════════════════════════════════ */
.clg-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem 0 0.5rem;
}

.clg-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.clg-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(192, 54, 77, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bc-grana);
}

html:has(.rz-material-dark) .clg-icon-wrap {
    background: rgba(192, 54, 77, 0.18);
}

.clg-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, rgba(10,14,31,.5));
    margin-bottom: 3px;
}

.clg-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color, var(--bc-ink));
}

.clg-sub {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, rgba(10,14,31,.55));
    margin-top: 2px;
}

.clg-maps-row {
    padding-top: 0.25rem;
    border-top: 1px solid var(--rz-grid-cell-border, rgba(10,14,31,.08));
}

html:has(.rz-material-dark) .clg-maps-row {
    border-top-color: rgba(243,238,229,.1);
}

.clg-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--bc-grana);
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.15s;
    width: 100%;
    justify-content: center;
}
.clg-maps-btn:hover { background: var(--bc-grana-deep); }

/* ════════════════════════════════════════════════════════
   END COMO LLEGAR DIALOG
   ════════════════════════════════════════════════════════ */

.mr-row-info { flex: 1; min-width: 0; }

.mr-row-info-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
}

.mr-row-sede {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1.1;
}

.mr-row-sede--cancelled {
    text-decoration: line-through;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
}

.mr-row-meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.mr-row-price { text-align: right; flex-shrink: 0; min-width: 78px; }

.mr-row-price-num {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1;
}

.mr-row-price-num--cancelled {
    text-decoration: line-through;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
}

.mr-row-price-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.5625rem;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ── Status badges ── */
.mr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mr-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mr-badge--confirmed {
    background: rgba(46, 128, 71, 0.1);
    color: #2e8047;
}

.rz-material-dark .mr-badge--confirmed {
    background: rgba(90, 180, 112, 0.15);
    color: #5ab470;
}

.mr-badge--pending {
    background: rgba(168, 117, 16, 0.1);
    color: #a87510;
}

.rz-material-dark .mr-badge--pending {
    background: rgba(232, 169, 59, 0.15);
    color: #e8a93b;
}

.mr-badge--completed {
    background: var(--rz-base-background-color);
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    border: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

.mr-badge--cancelled {
    background: rgba(192, 54, 77, 0.08);
    color: var(--bc-grana-deep);
}

.rz-material-dark .mr-badge--cancelled {
    background: rgba(192, 54, 77, 0.15);
    color: var(--bc-grana-soft);
}

/* ── Unit badge (F11 / F7) ── */
.mr-unit-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.mr-unit-badge--f11 {
    background: var(--bc-grana);
    color: #fff;
}

.mr-unit-badge--f7 {
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    border: 1px solid var(--bc-border-color, rgba(10, 14, 31, 0.08));
}

/* ── Empty state ── */
.mr-empty {
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--bc-text-soft, rgba(10, 14, 31, 0.65));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mr-empty-icon {
    display: inline-flex;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.mr-empty-text { font-size: 0.875rem; }

/* ════════════════════════════════════════════════════════
   RESERVA EXTERNA — diálogo de confirmación de bloqueo
   (overlay Radzen fuera de .rz-material-dark: el dark usa html:has(...))
   ════════════════════════════════════════════════════════ */

/* Neutraliza el chrome del diálogo Radzen: la tarjeta .re-dialog aporta todo el estilo. */
.reserva-externa-dialog,
.reserva-externa-dialog.rz-dialog {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}
.reserva-externa-dialog .rz-dialog-content {
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
.reserva-externa-dialog .rz-dialog-titlebar { display: none !important; }

.re-dialog {
    font-family: "Inter", system-ui, sans-serif;
    background: #fff;
    border: 1px solid rgba(10, 14, 31, 0.06);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(15, 29, 68, 0.22);
    max-height: 86vh;
    overflow-y: auto;
}
html:has(.rz-material-dark) .re-dialog {
    background: var(--bc-navy);
    border-color: rgba(243, 238, 229, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Header */
.re-header { display: flex; align-items: flex-start; gap: 0.85rem; }
.re-lock {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bc-cream);
    color: var(--bc-navy);
    border: 1px solid rgba(10, 14, 31, 0.06);
}
.re-lock svg { width: 20px; height: 20px; }
html:has(.rz-material-dark) .re-lock {
    background: var(--bc-navy-soft);
    color: var(--bc-cream);
    border-color: rgba(243, 238, 229, 0.1);
}

.re-titles { flex: 1; min-width: 0; padding-top: 2px; }
.re-eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b06a10;
    margin-bottom: 0.3rem;
}
html:has(.rz-material-dark) .re-eyebrow { color: #f0b968; }
.re-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--rz-text-color);
}

.re-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(10, 14, 31, 0.12);
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.re-close svg { width: 16px; height: 16px; }
.re-close:hover { background: rgba(10, 14, 31, 0.05); color: var(--rz-text-color); }
html:has(.rz-material-dark) .re-close { border-color: rgba(243, 238, 229, 0.18); }
html:has(.rz-material-dark) .re-close:hover { background: rgba(243, 238, 229, 0.08); color: var(--bc-cream); }

.re-desc {
    margin: 1rem 0 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

/* Lista de franjas agrupada por día */
.re-groups { display: flex; flex-direction: column; gap: 0.85rem; }
.re-group {
    border: 1px solid rgba(10, 14, 31, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bc-cream) 28%, #fff);
}
html:has(.rz-material-dark) .re-group {
    background: var(--bc-navy-soft);
    border-color: rgba(243, 238, 229, 0.1);
}
.re-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(10, 14, 31, 0.08);
    background: color-mix(in srgb, var(--bc-cream) 52%, #fff);
}
html:has(.rz-material-dark) .re-group-head {
    background: rgba(243, 238, 229, 0.04);
    border-bottom-color: rgba(243, 238, 229, 0.08);
}
.re-group-date {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--rz-text-secondary-color);
}
.re-group-count {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b06a10;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.2em 0.6em;
    border-radius: 999px;
}
html:has(.rz-material-dark) .re-group-count { color: #f0b968; border-color: rgba(245, 158, 11, 0.32); }

.re-rows { display: flex; flex-direction: column; }
.re-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid rgba(10, 14, 31, 0.06);
}
.re-row:first-child { border-top: none; }
html:has(.rz-material-dark) .re-row { border-top-color: rgba(243, 238, 229, 0.07); }

.re-pitch-wrap { flex-shrink: 0; display: flex; }
.re-pitch { width: 34px; height: 24px; }
.re-pitch-border,
.re-pitch-line,
.re-pitch-circle {
    stroke: rgba(10, 14, 31, 0.35);
    stroke-width: 1.3;
    fill: none;
}
.re-pitch-half { fill: rgba(192, 54, 77, 0.16); stroke: none; }
html:has(.rz-material-dark) .re-pitch-border,
html:has(.rz-material-dark) .re-pitch-line,
html:has(.rz-material-dark) .re-pitch-circle { stroke: rgba(243, 238, 229, 0.4); }
html:has(.rz-material-dark) .re-pitch-half { fill: rgba(217, 77, 99, 0.32); }

.re-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.25em 0.55em;
    border-radius: 7px;
}
.re-badge--f11 {
    background: rgba(10, 14, 31, 0.06);
    color: var(--rz-text-secondary-color);
    border: 1px solid rgba(10, 14, 31, 0.12);
}
.re-badge--f7 {
    background: rgba(192, 54, 77, 0.1);
    color: var(--bc-grana);
    border: 1px solid rgba(192, 54, 77, 0.3);
}
html:has(.rz-material-dark) .re-badge--f11 {
    background: rgba(243, 238, 229, 0.08);
    color: rgba(243, 238, 229, 0.7);
    border-color: rgba(243, 238, 229, 0.14);
}
html:has(.rz-material-dark) .re-badge--f7 {
    background: rgba(217, 77, 99, 0.16);
    color: var(--bc-grana-soft);
    border-color: rgba(217, 77, 99, 0.4);
}

.re-campo {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.re-time {
    flex-shrink: 0;
    font-family: "JetBrains Mono", "Fira Mono", monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

/* Footer */
.re-footer { margin-top: 1.4rem; display: flex; justify-content: flex-end; gap: 0.6rem; }
.re-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.re-btn svg { width: 15px; height: 15px; }
.re-btn:active { transform: translateY(1px); }
.re-btn--ghost {
    background: transparent;
    color: var(--rz-text-secondary-color);
    border-color: rgba(10, 14, 31, 0.15);
}
.re-btn--ghost:hover { background: rgba(10, 14, 31, 0.05); color: var(--rz-text-color); }
html:has(.rz-material-dark) .re-btn--ghost { border-color: rgba(243, 238, 229, 0.2); color: rgba(243, 238, 229, 0.75); }
html:has(.rz-material-dark) .re-btn--ghost:hover { background: rgba(243, 238, 229, 0.08); color: var(--bc-cream); }
.re-btn--danger {
    background: var(--bc-grana);
    color: #fff;
    border-color: var(--bc-grana);
    box-shadow: 0 6px 16px rgba(192, 54, 77, 0.3);
}
.re-btn--danger:hover { background: var(--bc-grana-deep); border-color: var(--bc-grana-deep); }

/* ── Fix: overlays a pantalla completa (position: fixed) dentro del cuerpo Radzen ──
   Radzen aplica `transform: translateZ(0)` a `.rz-body` (el contenedor de scroll)
   como hint de compositing GPU. Un `transform` en un ancestro hace que `.rz-body`
   pase a ser el bloque contenedor de los hijos `position: fixed`; así, un overlay
   `inset: 0` se ancla al contenido desplazable en lugar del viewport. Con pocas
   filas no se nota, pero con muchas el modal deja de centrarse y el fondo gris no
   llega hasta abajo. Solo mientras hay un modal abierto quitamos ese transform,
   para que `position: fixed` vuelva a resolverse contra el viewport (el scroll
   sigue funcionando vía overflow:auto). Afecta a los overlays/paneles a pantalla
   completa de la app:
     · .ra-modal-overlay  → ReservasAdmin.razor (liberar/devolver reserva)
     · .priv-modal-overlay → Privacidad.razor (modal de confirmación)
     · .cp-overlay        → DisponibilidadPublica.razor (fondo de la cesta; el
                            panel lateral .cp-panel se abre junto a este overlay) */
.rz-layout .rz-body:has(.ra-modal-overlay, .priv-modal-overlay, .cp-overlay) {
    transform: none;
}