/* =============================================================================
   agendaMagia design system
   Palette derived from the brand logo: violet #3812a5 + cyan #71f8fd.
   ========================================================================== */

:root {
    /* The whole client is light-only, by design: no dark palette exists for any vertical.
       "light" is the widely supported form; "only light" additionally opts out of user-agent
       forced dark (Chrome auto dark theme on Android, Edge "force dark"), and browsers that
       don't understand it fall back to the declaration above. */
    color-scheme: light;
    color-scheme: only light;
    --aq-primary: #4f2ed9;
    --aq-primary-dark: #3812a5;
    --aq-primary-deep: #23085f;
    --aq-primary-soft: rgba(79, 46, 217, 0.1);
    --aq-accent: #71f8fd;
    --aq-accent-dark: #0e7490;
    /* Accent ramp for accent-filled CTAs (the member login button): --aq-accent at 0%,
       --aq-accent-grad-end at 100%, --aq-on-accent as the label, --aq-accent-glow as the
       drop shadow. Both ramp stops are picked to clear 4.5:1 against --aq-on-accent, so
       they move together or not at all. */
    --aq-accent-grad-end: #22d3ee;
    --aq-accent-glow: rgba(113, 248, 253, 0.4);
    --aq-on-accent: #06283b;
    --aq-bg: #f6f6fb;
    --aq-surface: #ffffff;
    --aq-border: #e6e5f0;
    --aq-text: #1f2937;
    --aq-muted: #6b7280;
    --aq-radius: 0.875rem;
    --aq-radius-sm: 0.5rem;
    --aq-shadow: 0 1px 2px rgba(35, 8, 95, 0.05), 0 1px 3px rgba(35, 8, 95, 0.08);
    --aq-shadow-lg: 0 8px 24px rgba(35, 8, 95, 0.12);
    --aq-sidebar-gradient: linear-gradient(180deg, #1b0a4d 0%, #3812a5 100%);
    /* Prime-time cells in the booking grid (TurnoGrid). Lives here, not in a per-vertical block:
       the grid is drawn by every open-slots vertical and they all share one palette. */
    --aq-slot-hot: #D6F84B;
    --aq-slot-hot-text: #3f4d05;
    --aq-safe-top: env(safe-area-inset-top, 0px);
    --aq-safe-bottom: env(safe-area-inset-bottom, 0px);
    --aq-safe-left: env(safe-area-inset-left, 0px);
    --aq-safe-right: env(safe-area-inset-right, 0px);
}

/* =============================================================================
   Per-vertical identity. ThemeService stamps data-facility-type on <html>, and
   that key now drives artwork only — the icon mosaic behind the member login
   (see the ".rt-hero-mosaic" rules further down). The palette above is the whole
   platform's: every vertical looks like the brand, so the chrome that is drawn
   for the deep violet (nav labels at 72% white, the cyan active marker, the
   frosted cards) never lands on a colour it was not designed for.
   ========================================================================== */

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--aq-bg);
    color: var(--aq-text);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--aq-primary);
}

    a:hover, .btn-link:hover {
        color: var(--aq-primary-dark);
    }

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--aq-radius-sm);
    font-weight: 500;
}

.btn-primary {
    color: #fff;
    background-color: var(--aq-primary);
    border-color: var(--aq-primary);
    box-shadow: 0 2px 6px rgba(79, 46, 217, 0.3);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--aq-primary-dark) !important;
        border-color: var(--aq-primary-dark) !important;
    }

.btn-outline-primary {
    color: var(--aq-primary);
    border-color: var(--aq-primary);
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background-color: var(--aq-primary) !important;
        border-color: var(--aq-primary) !important;
        color: #fff;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 46, 217, 0.2);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
    border-radius: var(--aq-radius-sm);
    border-color: var(--aq-border);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--aq-primary);
        box-shadow: 0 0 0 0.2rem rgba(79, 46, 217, 0.15);
    }

.form-check-input:checked {
    background-color: var(--aq-primary);
    border-color: var(--aq-primary);
}

/* ---------- Surfaces ---------- */

.card {
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    box-shadow: var(--aq-shadow);
    background-color: var(--aq-surface);
}

.list-group {
    border-radius: var(--aq-radius);
    box-shadow: var(--aq-shadow);
}

.list-group-item {
    border-color: var(--aq-border);
}

.alert {
    border-radius: var(--aq-radius);
}

.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--aq-muted);
}

.table > :not(caption) > * > * {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--aq-primary-soft);
}

.text-muted {
    color: var(--aq-muted) !important;
}

.content {
    padding-top: 1.1rem;
}

/* ---------- Dashboard stat cards ---------- */

.rt-stat {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background-color: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    box-shadow: var(--aq-shadow);
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    a.rt-stat:hover {
        color: inherit;
        box-shadow: var(--aq-shadow-lg);
        transform: translateY(-2px);
    }

.rt-stat-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--aq-primary) 0%, var(--aq-primary-dark) 100%);
}

    .rt-stat-icon svg {
        width: 1.375rem;
        height: 1.375rem;
        fill: #fff;
    }

    .rt-stat-icon.teal {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    }

    .rt-stat-icon.amber {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .rt-stat-icon.rose {
        background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    }

.rt-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.rt-stat-label {
    font-size: 0.8125rem;
    color: var(--aq-muted);
    margin: 0;
}

/* ---------- Auth (login / register) ---------- */

.rt-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--aq-sidebar-gradient);
    padding: calc(1.5rem + var(--aq-safe-top)) 1rem calc(1.5rem + var(--aq-safe-bottom));
}

.rt-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

    .rt-auth-brand img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
    }

.rt-auth-card {
    width: 100%;
    max-width: 26rem;
    background-color: var(--aq-surface);
    border-radius: var(--aq-radius);
    box-shadow: var(--aq-shadow-lg);
    padding: 1.75rem 1.5rem;
}

.rt-auth-footer {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

    .rt-auth-footer a {
        color: var(--aq-accent);
        font-weight: 600;
    }

        .rt-auth-footer a:hover {
            color: #fff;
        }

/* ---------- Validation ---------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem calc(0.7rem + var(--aq-safe-bottom)) 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ---------- Boot splash ---------- */

.rt-splash {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--aq-sidebar-gradient);
    position: relative;
}

.rt-splash-logo {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    /* Centered over the progress ring: splash centers the ring, the logo sits in its middle. */
    top: calc(50% - 3.25rem);
    left: 50%;
    transform: translate(-50%, -50%);
}

.rt-splash-brand {
    margin-top: 1rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.loading-progress {
    display: block;
    width: 7rem;
    height: 7rem;
    margin-bottom: 0.5rem;
    transform: translateY(-1.25rem);
}

    .loading-progress circle {
        fill: none;
        stroke: rgba(255, 255, 255, 0.2);
        stroke-width: 0.5rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #71f8fd;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 600;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Cargando");
    }

code {
    color: #c02d76;
}

/* =============================================================================
   Mobile-first polish.

   The design floor is 360 CSS px: Galaxy A15/A16, Galaxy S25, Moto G15, Moto G35
   and Redmi 14C all report 360px wide regardless of their very different physical
   panels. The iPhone 16 is the roomy one at 393px. So anything that fits 360 fits
   the fleet, and 575.98px (Bootstrap's sm breakpoint) is the switch for phone
   layouts — it also catches the same phones held in a split view.
   ========================================================================== */

/* Comfortable touch targets (Apple HIG: ≥44px). Gated on the pointer *or* a phone-shaped
   viewport, not the pointer alone: some Android webviews report `pointer: fine`, and a viewport
   360px wide — or 360px tall, which is the same phone in landscape — is a phone whatever the
   media query claims. The height clause matters: rotated, these phones are 800px wide and the
   width clause alone would drop every target back to mouse size. */
@media (pointer: coarse), (max-width: 575.98px), (max-height: 480px) {
    .btn {
        min-height: 2.75rem;
    }

    .btn-sm {
        padding: 0.4rem 0.75rem;
        min-height: 2.5rem;
    }

    .nav-link, .form-select, .form-control {
        min-height: 2.75rem;
    }

    /* Mobile Safari zooms the whole page when a focused field is under 16px, and never
       zooms back out. Bootstrap's own .form-control is already 16px; the -sm variants and
       the assistant's compact input are not, and those are what triggered it. Pinning the
       computed size (not the rem scale) keeps the field legible without the zoom jump —
       and Android's font scaling still applies to everything around it. */
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="password"], input[type="date"], input[type="time"], input[type="search"],
    textarea, select {
        font-size: 16px;
    }
}

/* Nothing may push the page sideways: an overflowing media element is the usual culprit. */
img, svg, video, canvas {
    max-width: 100%;
}

/* Flex/grid children default to min-width:auto, which lets a long word (an e-mail, a facility
   name) refuse to shrink and widen the whole row. At 360px that is the difference between a
   tidy column and a horizontally scrolling page. */
.card-body, .list-group-item, .rt-stat, .user-chip {
    min-width: 0;
}

/* Tables inside .table-responsive scroll instead of squashing columns */
.table-responsive > .table {
    white-space: nowrap;
}

    .table-responsive > .table td:last-child .btn + .btn {
        margin-left: 0.25rem;
    }

/* =============================================================================
   .rt-cards — data tables that turn into cards on phones.

   A staff table carries five or six columns plus a stack of action buttons. Inside
   .table-responsive that is a 700px-wide row on a 360px screen, so the operator swipes
   sideways to reach "Cancelar" and loses sight of whose reservation it belongs to. Below
   576px the table stops being a table: the header row is dropped and each row becomes a
   card that prints its own labels from data-label, with the first cell as the card title
   and the (unlabelled) action cell as a full-width button row underneath.

   Contract for the markup: label every data cell with data-label, and leave the action
   cell and any colspan editor cell unlabelled.
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Beats the .table-responsive > .table rule above (same specificity, declared later). */
    .table-responsive > .rt-cards {
        white-space: normal;
    }

    /* With the row wrapped there is nothing left to scroll, and a live scroll container
       would still swallow vertical drags at the edges. */
    .table-responsive:has(> .rt-cards) {
        overflow-x: visible;
    }

    .rt-cards,
    .rt-cards > tbody,
    .rt-cards > tbody > tr,
    .rt-cards > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .rt-cards > thead {
        display: none;
    }

    .rt-cards > tbody > tr {
        margin-bottom: 0.75rem;
        padding: 0.85rem 0.95rem;
        border: 1px solid var(--aq-border);
        border-radius: var(--aq-radius);
        background-color: var(--aq-surface);
        box-shadow: var(--aq-shadow);
    }

        /* Zebra striping and row-state tints land on the cells, not the row. Clear them so the
           card reads as one surface, then re-state the two tints that carry meaning as an edge
           marker — a pending client still has to stand out in a list.

           Bootstrap 5.3 paints both with `box-shadow: inset 0 0 0 9999px` rather than a
           background, so clearing background-color alone left every odd card grey. */
        .rt-cards > tbody > tr > td {
            background-color: transparent !important;
            box-shadow: none !important;
            border: 0;
            padding: 0.3rem 0;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem;
            text-align: right;
            overflow-wrap: anywhere;
        }

        .rt-cards > tbody > tr.table-warning {
            border-color: #ffc107;
            box-shadow: inset 4px 0 0 #ffc107, var(--aq-shadow);
        }

        .rt-cards > tbody > tr.table-danger {
            border-color: #dc3545;
            box-shadow: inset 4px 0 0 #dc3545, var(--aq-shadow);
        }

    .rt-cards > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--aq-muted);
    }

    /* First cell is the card's headline, not a label/value pair. */
    .rt-cards > tbody > tr > td[data-label]:first-child {
        display: block;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--aq-text);
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--aq-border);
    }

    /* Unlabelled cells (actions, colspan editors) are plain blocks. */
    .rt-cards > tbody > tr > td:not([data-label]),
    .rt-cards > tbody > tr > td[data-label]:first-child {
        text-align: left;
    }

        .rt-cards > tbody > tr > td:not([data-label])::before,
        .rt-cards > tbody > tr > td[data-label]:first-child::before {
            content: none;
        }

    .rt-cards > tbody > tr > td:not([data-label]) {
        display: block;
    }

    /* The action cell: a divider, then buttons that share the width instead of queueing up
       in a 30px-tall row. :has keeps the divider off cells whose row has no actions. */
    .rt-cards > tbody > tr > td:not([data-label]):not([colspan]):has(.btn) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px dashed var(--aq-border);
    }

        /* Buttons sit bare in some tables and inside a .d-flex wrapper in others. Both end up
           the same width here: 8rem is the flex basis, so two fit a 360px card and a third
           wraps to its own full-width row rather than shrinking to a stub. */
        .rt-cards > tbody > tr > td:not([data-label]):not([colspan]) .btn {
            flex: 1 1 8rem;
            margin: 0 !important;
        }

        /* Wrappers and the inline error/feedback lines each claim their own row. (The buttons
           inside grow to fill it, so the wrapper's own justify-content stops mattering.) */
        .rt-cards > tbody > tr > td:not([data-label]):not([colspan]) > div {
            flex: 1 1 100%;
        }

    /* A labelled cell can still carry an action (the subscription column's "Cancelar"). Keep the
       label/value line intact and drop the button onto its own row beneath it. */
    .rt-cards > tbody > tr > td[data-label]:has(.btn) {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

        .rt-cards > tbody > tr > td[data-label]:has(.btn) .btn {
            flex: 1 1 100%;
            margin: 0 !important;
        }

    /* Full 44px inside a card, overriding the 40px .btn-sm compromise: these are the row's
       primary actions and "Eliminar" sits next to "Editar", so a mis-tap is expensive. */
    .rt-cards .btn,
    .rt-cards .btn-sm {
        min-height: 2.75rem;
    }

    /* The inline editors already lay themselves out with .row/.col-md-*, which stack here. */
    .rt-cards > tbody > tr > td[colspan] {
        display: block;
        padding: 0;
    }

    /* An expansion row (the class roster, the "anotar cliente" picker) is a second <tr>, so
       card-per-row would set it adrift from the class it opened. Docked to the card above:
       square top corners, no gap, no top border. */
    /* No negative margin here: the :has(+ .rt-card-sub) rule below already zeroes the preceding
       card's margin-bottom, so pulling up as well would overlap the two by 12px. */
    .rt-cards > tbody > tr.rt-card-sub {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: var(--aq-bg);
        box-shadow: none;
    }

        .rt-cards > tbody > tr:has(+ .rt-card-sub) {
            margin-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow: none;
        }
}

/* Public member nav: brand row + horizontally scrollable link row */
.public-nav-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem;
}

    .public-nav-links::-webkit-scrollbar {
        display: none;
    }

    .public-nav-links .nav-link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        border-radius: 0.375rem;
    }

        .public-nav-links .nav-link.active {
            background-color: var(--aq-primary-soft);
            color: var(--aq-primary);
        }

/* Public member nav container: white surface card */
.aq-public-nav {
    background-color: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    box-shadow: var(--aq-shadow);
}

.rt-brand-logo {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    vertical-align: -0.4375rem;
}

/* Staff calendar: the week grid scrolls sideways on narrow screens */
.cal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Smaller page titles on phones */
@media (max-width: 575.98px) {
    h1, .h1 {
        font-size: 1.5rem;
    }

    h2, .h2 {
        font-size: 1.25rem;
    }
}

/* ============================================================================
   Member portal "Mis turnos" — immersive login: a themed gradient behind a
   seamless mosaic of activity icons (health, fitness, workshops), with the
   frosted-glass card on top. Deliberately photo-free. Shown only while logged
   out; it takes over the viewport (position:fixed) so it escapes the narrow
   public container. Pure CSS + a static SVG tile — no JS, which the production
   CSP forbids inline anyway.
   ========================================================================== */

.rt-member-hero {
    position: fixed;
    inset: 0;
    z-index: 900; /* over the public layout/nav, under the assistant fab (1050) */
    overflow: hidden;
    background: var(--aq-primary-deep);
}

/* --- themed gradient + activity-icon mosaic (no photos) --- */
.rt-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg, #3812a5 0%, #23085f 52%, #0e7490 100%);
}

/* The mosaic tile is seamless, so it repeats at its natural size on any viewport instead of
   being stretched — icons stay the same size on a phone and on a 4K screen. */
.rt-hero-mosaic {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: url("../img/mis-turnos/mosaic-studio.svg");
    background-repeat: repeat;
    background-size: 720px 720px;
}

/* Per-vertical mosaic. ThemeService stamps data-facility-type on <html> and only the icon set
   changes with it: a clinic shows stethoscopes where a club shows rackets, over the same brand
   gradient above. The default is the "studio" key (deportivo/general). */
:root[data-facility-type="courts"] .rt-hero-mosaic { background-image: url("../img/mis-turnos/mosaic-courts.svg"); }
:root[data-facility-type="clinic"] .rt-hero-mosaic { background-image: url("../img/mis-turnos/mosaic-clinic.svg"); }
:root[data-facility-type="beauty"] .rt-hero-mosaic { background-image: url("../img/mis-turnos/mosaic-beauty.svg"); }
:root[data-facility-type="courses"] .rt-hero-mosaic { background-image: url("../img/mis-turnos/mosaic-courses.svg"); }

/* --- Page banner (turnos/clases headers) --- */
/* A compact title band in the brand gradient. No photo and no mosaic: those belong to the login
   takeover only, so the inner pages stay quiet. */
.rt-page-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 108px;
    margin-bottom: 1.25rem;
    border-radius: var(--aq-radius);
    overflow: hidden;
    background: var(--aq-sidebar-gradient);
    box-shadow: 0 6px 20px rgba(20, 10, 60, 0.18);
}

.rt-page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.22) 100%);
}

.rt-page-banner-content {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.25rem;
    color: #fff;
}

.rt-page-banner-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.rt-page-banner-sub {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* --- vignette that keeps the login card readable over the mosaic --- */
.rt-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0) 100%);
}

/* --- top nav inside the takeover --- */
.rt-hero-nav {
    position: absolute;
    z-index: 5;
    top: calc(1rem + var(--aq-safe-top));
    left: calc(1.25rem + var(--aq-safe-left));
    right: calc(1.25rem + var(--aq-safe-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
}

.rt-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

    .rt-hero-brand img {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.4375rem;
    }

.rt-hero-links {
    display: flex;
    gap: 1rem;
}

    .rt-hero-links a {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
    }

        .rt-hero-links a:hover {
            color: #fff;
        }

/* --- scroll/center wrapper (tall register form can scroll) --- */
.rt-hero-scroll {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(4.5rem + var(--aq-safe-top)) 1rem calc(2rem + var(--aq-safe-bottom));
}

/* Auto margins center the card vertically when there's room, but collapse and
   let it scroll from the top when the content is taller than the viewport. */
    .rt-hero-scroll .rt-member-glass {
        margin-top: auto;
        margin-bottom: auto;
    }

/* --- frosted glass card --- */
.rt-member-glass {
    width: 100%;
    max-width: 27rem;
    padding: 1.9rem 1.6rem;
    border-radius: 1.25rem;
    color: #fff;
    background: rgba(20, 12, 48, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

.rt-hero-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aq-accent);
    margin-bottom: 0.5rem;
}

.rt-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 1rem;
}

/* legibility of the reused Bootstrap form controls on dark glass */
.rt-member-glass h5 {
    color: #fff;
}

.rt-member-glass .form-control {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

    .rt-member-glass .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .rt-member-glass .form-control:focus {
        background-color: rgba(255, 255, 255, 0.16);
        border-color: var(--aq-accent);
        box-shadow: 0 0 0 0.2rem rgba(113, 248, 253, 0.25);
        color: #fff;
    }

.rt-member-glass .btn-primary {
    background: linear-gradient(135deg, var(--aq-accent) 0%, var(--aq-accent-grad-end) 100%);
    border-color: transparent;
    color: var(--aq-on-accent);
    box-shadow: 0 8px 22px var(--aq-accent-glow);
}

    /* Hover collapses the ramp to the flat (lighter) accent. Deliberately not a lighten:
       the courses indigo carries a white label, so lightening would erode its contrast —
       flattening lifts it in every vertical. */
    .rt-member-glass .btn-primary:hover,
    .rt-member-glass .btn-primary:focus,
    .rt-member-glass .btn-primary:active {
        background: var(--aq-accent) !important;
        border-color: transparent !important;
        color: var(--aq-on-accent);
        box-shadow: 0 10px 26px var(--aq-accent-glow);
    }

.rt-member-glass .btn-link {
    color: var(--aq-accent);
}

    .rt-member-glass .btn-link:hover {
        color: #fff;
    }

.rt-member-glass .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 575.98px) {
    .rt-member-glass {
        padding: 1.5rem 1.25rem;
    }

    /* Scale the tile down on phones so the icons don't read as oversized blobs. */
    .rt-hero-mosaic {
        background-size: 480px 480px;
    }
}

/* Help pages: server-rendered manual markup */
.rt-help {
    max-width: 760px;
}

    .rt-help h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .rt-help h2 {
        font-size: 1.2rem;
        margin-top: 1.75rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--aq-border);
    }

    .rt-help h3 {
        font-size: 1.05rem;
        margin-top: 1.25rem;
    }

    .rt-help li {
        margin-bottom: 0.25rem;
    }

/* ── Member class-booking screen (/clases/{slug}) ─────────────────────────────── */
.rt-classes-page {
    max-width: 680px;
}

/* Credit balance pinned above the list */
.rt-balance-card {
    position: sticky;
    top: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--aq-radius);
    color: #fff;
    background: linear-gradient(120deg, var(--aq-primary-deep) 0%, var(--aq-primary) 70%, #7a5cf0 100%);
    box-shadow: var(--aq-shadow-lg);
}

    .rt-balance-card.rt-balance-empty {
        background: linear-gradient(120deg, #6d1b4b 0%, #b23a67 100%);
    }

    .rt-balance-card.rt-balance-anon {
        background: linear-gradient(120deg, var(--aq-primary-deep) 0%, var(--aq-accent-dark) 100%);
    }

.rt-balance-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.rt-balance-count {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--aq-accent);
}

.rt-balance-sub {
    font-size: 0.8rem;
    opacity: 0.85;
}

.rt-balance-warn {
    font-size: 0.75rem;
    text-align: right;
    max-width: 40%;
    opacity: 0.95;
}

/* Week pager above the class list */
.rt-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rt-week-nav .btn {
    border-radius: 999px;
    width: 2.1rem;
}

.rt-week-label {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Date group header bar */
.rt-day-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--aq-sidebar-gradient);
    color: #fff;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.rt-day-ico {
    font-size: 0.9rem;
}

/* Class cards */
.rt-class-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rt-class-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-left: 6px solid var(--aq-primary);
    border-radius: var(--aq-radius);
    padding: 0.7rem 0.9rem;
    box-shadow: var(--aq-shadow);
    transition: transform 0.08s ease, box-shadow 0.12s ease;
    cursor: pointer;
}

    .rt-class-card:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: var(--aq-shadow-lg);
    }

    .rt-class-card:disabled {
        cursor: default;
    }

    .rt-class-card.is-full {
        opacity: 0.55;
    }

    .rt-class-card.is-mine {
        border-color: #22c55e;
        border-left-color: #22c55e;
        background: #f2fdf5;
    }

    /* Per-discipline accent colors (stable per service) */
    .rt-class-card.accent-1 { border-left-color: #f7b733; }
    .rt-class-card.accent-2 { border-left-color: #c084fc; }
    .rt-class-card.accent-3 { border-left-color: #38bdf8; }
    .rt-class-card.accent-4 { border-left-color: #fb7185; }
    .rt-class-card.accent-5 { border-left-color: #34d399; }

    .rt-class-card.is-mine.accent-1,
    .rt-class-card.is-mine.accent-2,
    .rt-class-card.is-mine.accent-3,
    .rt-class-card.is-mine.accent-4,
    .rt-class-card.is-mine.accent-5 {
        border-left-color: #22c55e;
    }

.rt-class-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rt-class-name {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--aq-text);
}

.rt-class-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--aq-primary);
}

.rt-class-metrics {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-shrink: 0;
}

.rt-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 2.6rem;
}

.rt-metric-label {
    font-size: 0.72rem;
    color: var(--aq-muted);
}

.rt-metric-value {
    font-weight: 600;
    color: var(--aq-text);
}

.rt-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border-radius: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: #c084fc;
}

.rt-pill-mine {
    background: #22c55e;
}

.rt-pill-full {
    background: #9ca3af;
}

/* Business panel occupancy grid. Cells are shaded inline by occupancy; these rules only keep the
   grid compact and legible when a facility runs a wide span of hours. */
.rt-heat th,
.rt-heat td {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
}

.rt-heat-cell {
    border-radius: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* A .rt-heat table is a real matrix — hours × days, months × retention — so unlike the .rt-cards
   lists it stays a table on a phone and scrolls inside its .table-responsive wrapper. The label
   column is pinned instead, because a scrolled-away row header leaves the numbers meaningless. */
@media (max-width: 575.98px) {
    .rt-heat {
        font-size: 0.75rem;
    }

        .rt-heat th:first-child,
        .rt-heat td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: var(--aq-surface);
        }
}

/* =============================================================================
   Phone layout adjustments (≤575.98px)

   Everything below assumes the 360px floor. Rules that only needed a smaller type
   scale live in the earlier max-width block; these change layout.
   ========================================================================== */

@media (max-width: 575.98px) {
    /* The credit banner is a two-column flex. At 360px the right-hand warning was squeezed to
       ~140px and wrapped to four lines next to a huge number, so it stacks instead. */
    .rt-balance-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .rt-balance-warn {
        max-width: 100%;
        text-align: left;
    }

    /* A .btn-group of three at 360px leaves ~100px per button; let toolbars wrap instead of
       overflowing, and let each group span the row. */
    .btn-toolbar {
        width: 100%;
    }

    .btn-toolbar > .btn-group {
        flex: 1 1 auto;
    }

    /* Long facility/service names in a page banner had nowhere to break. */
    .rt-page-banner-title,
    .rt-page-banner-sub {
        overflow-wrap: anywhere;
    }

    /* Cards and list rows: reclaim the horizontal padding the content actually needs. */
    .card-body {
        padding: 0.9rem;
    }

    .list-group-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* =============================================================================
   Landscape (≈800×360 on every phone in the fleet).

   Height, not width, is the constraint here: 360px of it, minus the browser chrome.
   Anything that centres itself in the viewport or reserves a fixed vertical band has
   to give way, or the login card ends up taller than the screen with no way to reach
   the button.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 480px) {
    /* Centring is what breaks: the card is taller than the viewport, so auto margins push
       its top off-screen. Anchor to the top and let the wrapper scroll. */
    .rt-hero-scroll {
        justify-content: flex-start;
        padding-top: calc(3.5rem + var(--aq-safe-top));
    }

        .rt-hero-scroll .rt-member-glass {
            margin-top: 0;
            margin-bottom: 0;
        }

    .rt-member-glass {
        padding: 1.1rem 1.25rem;
    }

    .rt-hero-title {
        font-size: 1.25rem;
        margin-bottom: 0.6rem;
    }

    .rt-auth {
        justify-content: flex-start;
        overflow-y: auto;
    }

    .rt-auth-card {
        padding: 1.25rem 1.25rem;
    }

    .rt-auth-brand {
        margin-bottom: 0.75rem;
        font-size: 1.125rem;
    }

    /* A 108px title band costs a third of the usable height for no information. */
    .rt-page-banner {
        min-height: 72px;
        margin-bottom: 0.75rem;
    }

    .rt-page-banner-content {
        padding: 0.6rem 1rem;
    }

    /* Sideways is exactly what there is room for here, so the card un-stacks — and it stops
       being sticky, because pinning it to a 360px-tall viewport eats the list it belongs to. */
    .rt-balance-card {
        position: static;
        flex-direction: row;
        align-items: center;
    }
}

/* =============================================================================
   Large system font.

   Android's display-size / font-size sliders are used heavily on the budget phones in
   this list (Redmi 14C, Moto G15/G35 ship with large-text profiles on some carriers),
   and iOS Dynamic Type does the same. rem-based spacing scales with it, which is
   correct — but anything measured against the fixed 360px viewport has to stop
   competing for the row.
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Every label/value pair in a card: the value keeps the room it needs and the label
       wraps, rather than the pair forcing the card wider than the screen. */
    .rt-cards > tbody > tr > td::before {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Stat tiles are a fixed 2-up grid; at 200% text the icon has to stop reserving width. */
    .rt-stat {
        gap: 0.6rem;
        padding: 0.85rem;
    }

    .rt-stat-label {
        overflow-wrap: anywhere;
    }

    /* Nav pills, day headers and badges: let them grow taller instead of clipping. */
    .public-nav-links .nav-link,
    .rt-day-header,
    .rt-week-label {
        overflow-wrap: anywhere;
    }
}