/* ====================================================================
   PRONTI • AURORA STUDIO (mid‑light, vibrant, professional)
   - High readability (AA/AAA where it matters)
   - Subtle gradients & depth
   - Carefully tuned animations (respect reduced motion)
   - Tailored components for the three "Reservar" views
   - FullCalendar polished: borders, headers, hover & click selection
   - Sticky footer fix
   - Bootstrap-friendly (no collisions; custom utils prefixed with u-)
   ==================================================================== */

/* ===============================
   0) ROOT THEME & GLOBAL TOKENS
   =============================== */

:root {
    /* Backgrounds */
    --bg: #eaf3fb; /* más celeste que gris */
    --bg-soft: #f2f7fc; /* paneles con azul claro */
    --surface: #ffffff; /* tarjetas / nav */
    --surface-2: #f6faff; /* sutil elevado */
    /* Borders */
    --line: #cfd9ec; /* más suave y azulado */
    --line-strong: #b5c6e0;
    /* Text colors */
    --text: #0f172a; /* azul marino profundo */
    --muted: #5f6c85; /* gris-azul medio */
    --text-inv: #ffffff;
    /* Accent gradient (azul → celeste) */
    --accent-1: #4f8dff; /* azul medio */
    --accent-2: #28c0ff; /* celeste brillante */
    /* Semantic states */
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;
    /* Radii */
    --r-xs: .4rem;
    --r-sm: .55rem;
    --r-md: .85rem;
    --r-lg: 1.15rem;
    --r-xl: 1.65rem;
    /* Shadows (más difusas, celeste-gris) */
    --shadow-1: 0 6px 18px rgba(40, 164, 255, .08);
    --shadow-2: 0 12px 36px rgba(40, 164, 255, .12);
    --shadow-3: 0 18px 54px rgba(40, 164, 255, .18);
    /* Typography */
    --ff: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    /* Motion */
    --ease-1: cubic-bezier(.2,.7,.2,1);
    --ease-2: cubic-bezier(.16,.84,.44,1);
    --dur-1: .14s;
    --dur-2: .22s;
    --dur-3: .4s;
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }
}

/* ===============================
   1) GLOBAL RESET & APP SHELL
   =============================== */

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

html {
    font-size: 16px
}

@media (max-width:575.98px) {
    html {
        font-size: 15px
    }
}

body {
    margin: 0;
    display: flex; /* sticky footer layout */
    flex-direction: column;
    min-height: 100vh;
    background: radial-gradient(900px 620px at -10% -20%, rgba(106,92,255,.14), transparent 55%), radial-gradient(900px 620px at 110% -10%, rgba(40,164,255,.12), transparent 55%), var(--bg);
    color: var(--text);
    font-family: var(--ff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1 0 auto
}
/* push footer to bottom */
body > .container,
body > .container-fluid {
    flex: 1 0 auto
}
/* keep footer at the end even with wrappers */
footer {
    flex-shrink: 0
}

.hidden {
    display: none !important
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 1rem 0
}

/* Scrollbars (WebKit) */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

*::-webkit-scrollbar-thumb {
    background: #cdd5e7;
    border-radius: 10px;
    border: 2px solid #f0f3fb
}

    *::-webkit-scrollbar-thumb:hover {
        background: #b8c2da
    }

*::-webkit-scrollbar-track {
    background: #f0f3fb;
    border-radius: 10px
}

/* Focus ring (accessibility) */
:where(button, [type="button"], [type="submit"], [type="reset"], a, input, select, textarea):focus-visible {
    outline: 2px solid #90c2ff;
    outline-offset: 2px;
}

/* ===============================
   2) HEADER / NAVBAR / FOOTER
   =============================== */

/* ── Pronti Nav ── */
.pronti-nav {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 6px 24px rgba(79, 70, 229, .04);
    padding: .4rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .3s ease;
    font-family: 'Inter', var(--ff);
}

.pronti-nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.nav-logo-img {
    max-height: 38px;
    transition: transform .2s ease;
}

.nav-logo-img:hover {
    transform: scale(1.05);
}

.nav-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.nav-brand-text {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.5px;
    color: var(--text);
}

/* Nav Links */
.pronti-nav .nav-link {
    color: var(--text) !important;
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .75rem !important;
    border-radius: var(--r-sm);
    transition: all .15s ease;
    position: relative;
}

.pronti-nav .nav-link:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(14, 165, 233, .08));
    color: #4f46e5 !important;
    transform: translateY(-1px);
}

.pronti-nav .nav-link i {
    font-size: .9rem;
    opacity: .7;
    transition: opacity .15s ease;
}

.pronti-nav .nav-link:hover i {
    opacity: 1;
}

/* Dropdown */
.pronti-dropdown {
    background: rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .04) !important;
    padding: .5rem !important;
    min-width: 220px;
    animation: dropdownIn .15s ease;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pronti-dropdown .dropdown-header {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: .5rem .75rem .25rem;
}

.pronti-dropdown .dropdown-item {
    color: var(--text) !important;
    font-size: .85rem;
    font-weight: 500;
    padding: .5rem .75rem;
    border-radius: var(--r-xs);
    transition: all .12s ease;
}

.pronti-dropdown .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(14, 165, 233, .06)) !important;
    color: #4f46e5 !important;
    transform: translateX(3px);
}

.pronti-dropdown .dropdown-item i {
    opacity: .5;
    font-size: .8rem;
    width: 20px;
    text-align: center;
}

.pronti-dropdown .dropdown-item:hover i {
    opacity: 1;
}

.pronti-dropdown .dropdown-divider {
    margin: .35rem .5rem;
    border-color: rgba(0, 0, 0, .06);
}

/* User Section */
.nav-user-section {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(0, 0, 0, .08);
}

.nav-user-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: var(--surface-2);
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
}

.nav-user-badge i {
    font-size: .9rem;
    opacity: .6;
}

.nav-user-badge .badge {
    font-size: .65rem;
    font-weight: 600;
    padding: .25em .5em;
}

.nav-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted);
    transition: all .15s ease;
    text-decoration: none !important;
}

.nav-logout-btn:hover {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

/* CTA Button */
.nav-cta-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: .45rem 1.1rem !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(79, 70, 229, .25);
    transition: all .2s ease !important;
}

.nav-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(79, 70, 229, .35);
    filter: brightness(1.08);
}

/* Toggler */
.pronti-nav .navbar-toggler {
    color: var(--text);
    padding: .4rem;
    border-radius: var(--r-sm);
    transition: background .15s ease;
}

.pronti-nav .navbar-toggler:hover {
    background: rgba(0, 0, 0, .05);
}

/* Responsive */
@media (max-width: 991.98px) {
    .pronti-nav .navbar-collapse {
        padding: .75rem 0;
    }

    .nav-user-section {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, .06);
        padding-top: .75rem;
        margin-top: .5rem;
    }

    /* Fix: dropdown must flow inline (not overlay) inside collapsed navbar */
    .pronti-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        inset: unset !important;
        transform: none !important;
        margin: 0 !important;
    }

    .pronti-dropdown {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: none;
        padding: 0 0 0 1rem !important;
    }
}

/* ── Pronti Footer ── */
.pronti-footer {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding: .75rem 0;
    color: var(--muted);
    flex-shrink: 0;
}

.footer-link {
    color: var(--muted);
    text-decoration: none !important;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: color .15s ease;
}

.footer-link:hover {
    color: var(--accent-1);
}

.footer-link i {
    font-size: .95rem;
}

/* ── Dashboard Components ── */
.dash-welcome {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
    color: white;
    border-radius: var(--r-lg);
    padding: 1.75rem 2rem;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
}

.dash-welcome::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.dash-welcome::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: 20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, .04);
    border-radius: 50%;
}

.dash-kpi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all .2s ease;
    box-shadow: var(--shadow-1);
}

.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.dash-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dash-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    letter-spacing: -.5px;
}

.dash-kpi-label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: .15rem;
}

.dash-action-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    text-align: center;
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    height: 100%;
}

.dash-action-card i {
    font-size: 1.6rem;
}

.dash-action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: rgba(99, 102, 241, .3);
    color: var(--text);
}

.dash-stat-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--stat-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: color-mix(in srgb, var(--stat-color, #6366f1) 5%, white);
}

.dash-stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--stat-color, #6366f1);
}

/* Legacy compat — keep old navbar-light selectors working */
.navbar-light .navbar-nav .nav-link { color: var(--text) !important; }
.navbar-light .dropdown-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.navbar-light .dropdown-item { color: var(--text) }
.navbar-light .dropdown-item:hover { background: #eef4ff }

/* Override old footer if still used */
footer:not(.pronti-footer) {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
    border-top: 1px solid var(--line);
    padding: .95rem 0;
    color: var(--muted);
}

/* ===============================
   3) TYPOGRAPHY / LINKS
   =============================== */

h1, h2, h3, h4, h5 {
    color: var(--text);
    margin: .3rem 0 .6rem;
    letter-spacing: .2px
}

.lead {
    color: #253154;
    font-size: 1.125rem
}

a {
    color: #2b6bff;
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }

small, .text-muted {
    color: var(--muted) !important
}

/* ===============================
   4) CARDS / PANELS
   =============================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    color: var(--text);
    padding: 1.2rem; /* generous padding */
    transition: transform var(--dur-1) var(--ease-1), box-shadow var(--dur-2) var(--ease-2), border-color var(--dur-1) var(--ease-1);
}

    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
        border-color: var(--line-strong)
    }

.card-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    padding: .75rem 1rem;
    border-radius: var(--r-md) var(--r-md) 0 0
}

.card-footer {
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    padding: .75rem 1rem;
    border-radius: 0 0 var(--r-md) var(--r-md)
}

.card.selected {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(106,92,255,.35), 0 12px 28px rgba(40,164,255,.22);
    background: linear-gradient(180deg, rgba(106,92,255,.10), rgba(40,164,255,.08));
}

/* ===============================
   5) BUTTONS
   =============================== */

.btn {
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: transform var(--dur-1) var(--ease-1), filter var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1);
    font-weight: 700;
}

    .btn:active {
        transform: translateY(1px)
    }

.btn-primary {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    color: #061024;
    box-shadow: 0 8px 22px rgba(40,164,255,.24);
}

    .btn-primary:hover {
        filter: brightness(1.05)
    }

.btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #06140a
}

.btn-warning {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #201402
}

.btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #210b0b
}

.btn-outline-primary {
    color: #2b6bff;
    border-color: #bcd6ff;
    background: transparent
}

    .btn-outline-primary:hover {
        background: #eaf2ff
    }

.btn-link {
    color: #2b6bff
}

#btnTerminarReserva, #btnTerminarReservaYSeguir {
    font-weight: 800
}

/* ===============================
   6) FORMS
   =============================== */

.form-label {
    color: var(--muted);
    font-size: .94rem
}

.form-control, .form-select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], textarea {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: .68rem .8rem;
    transition: border-color var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1);
}

    .form-control:focus, .form-select:focus, textarea:focus, input:focus {
        border-color: #7aa8ff;
        box-shadow: 0 0 0 .2rem rgba(40,164,255,.18);
        outline: 0;
    }

.input-group .input-group-text {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: #273152
}

/* switches */
.form-check-input:checked {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
}

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(40,164,255,.22)
}

.form-switch {
    padding-left: 0
}

    .form-switch .form-check-input {
        width: 2.5rem;
        height: 1.3rem;
        margin-left: 0
    }

/* validation */
.is-invalid {
    border-color: #ff8b8b
}

.is-valid {
    border-color: #84d59a
}

.invalid-feedback, .valid-feedback {
    font-size: .9rem
}

/* ===============================
   7) ALERTS / BADGES / PILLS
   =============================== */

.alert {
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-1);
}

.alert-success {
    background: #e9fbf1;
    color: #0f5a32
}

.alert-danger {
    background: #ffecec;
    color: #8e1515
}

.alert-warning {
    background: #fff6e6;
    color: #7a4a00
}

.alert-info {
    background: #e6f6ff;
    color: #0b4c6e
}

.badge {
    font-weight: 700;
    border-radius: 999px;
    padding: .3rem .6rem;
}

.badge-success {
    background: #16a34a;
    color: #fff
}

.badge-warning {
    background: #f59e0b;
    color: #201402
}

.badge-danger {
    background: #ef4444;
    color: #fff
}

.badge-info {
    background: #0ea5e9;
    color: #07222b
}

/* ===============================
   8) TABLES
   =============================== */

.table {
    color: var(--text);
    --bs-table-bg: transparent;
    border-color: var(--line);
}

    .table thead th {
        background: var(--surface-2);
        border-bottom: 1px solid var(--line);
        color: #222b47;
        font-weight: 700;
    }

    .table td, .table th {
        border-color: var(--line) !important
    }

.table-hover tbody tr:hover {
    background: #f4f7ff
}

.table-striped tbody tr:nth-of-type(odd) {
    background: #fafbff
}

.table-sm td, .table-sm th {
    padding: .5rem .6rem
}

/* ===============================
   9) MODALS / TOASTS
   =============================== */

.modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
}

.modal-header {
    border-bottom: 1px solid var(--line)
}

.modal-footer {
    border-top: 1px solid var(--line)
}

.modal-header.bg-danger {
    background: #ffefef !important;
    color: #7c1111
}

.toast {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    border-radius: var(--r-md)
}

.toast-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line)
}

/* ===============================
   10) BREADCRUMBS / PAGINATION / TABS
   =============================== */

.breadcrumb {
    background: transparent;
    margin-bottom: .75rem
}

    .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        color: #8a94ac
    }

.pagination .page-link {
    color: #2b6bff;
    border-color: var(--line)
}

    .pagination .page-link:hover {
        background: #eef4ff
    }

.pagination .active .page-link {
    background: #2b6bff;
    border-color: #2b6bff;
    color: #fff
}

.nav-tabs .nav-link {
    border: 1px solid var(--line);
    color: #2a3552
}

    .nav-tabs .nav-link.active {
        background: #eef4ff;
        border-color: #bcd6ff;
        color: #1c2746
    }

/* ===============================
   11) WIZARD (ReservarCliente)
   =============================== */

.stepper {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: .75rem 0 1rem;
}

    .stepper .step {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: #3a4463;
        font-weight: 700;
    }

.step .dot {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eaf0ff;
    border: 1px solid #cfe1ff;
    color: #2a3552;
}

.step.active .dot {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
    color: #061024;
}

.step.done .dot {
    background: #dff7ec;
    border-color: #b7e9cc;
    color: #0a4a2a
}

.sucursales-wrapper,
.tiposervicio-wrapper,
.servicios-wrapper,
#calendario-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 1rem;
    margin-top: .75rem;
}
/* Cards de opciones con más click area */
.card.opcion-sucursal,
.card.opcion-tipo {
    cursor: pointer;
    user-select: none
}

    .card.opcion-sucursal:hover,
    .card.opcion-tipo:hover {
        background: linear-gradient(180deg, rgba(106,92,255,.08), rgba(40,164,255,.06))
    }

#btnConfirmar, #btnAplicarDescuento {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border: 0;
    color: #061024;
    font-weight: 800;
    padding: .7rem 1.1rem;
    border-radius: var(--r-sm);
    box-shadow: 0 8px 22px rgba(40,164,255,.24);
}

/* ===============================
   12) RESERVA CREATE / INDEX (layout helpers)
   =============================== */

#calendario-container, .calendario {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: .6rem;
    color: var(--text);
    min-height: 420px;
    overflow-x: auto;
}

.turnos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.tarjetaTurno {
    border-left: 4px solid transparent;
    background: linear-gradient(180deg, rgba(106,92,255,.10), rgba(40,164,255,.08));
    border-radius: var(--r-sm);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}

.datos-turno {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
    gap: .45rem 1rem;
    margin-bottom: .6rem;
}

    .datos-turno .etiqueta {
        font-weight: 800
    }

.dato-comentarios {
    grid-column: 1 / -1
}

/* Alert spacing */
.mensaje {
    margin: .6rem 0
}

/* ===============================
   13) FULLCALENDAR POLISH
   =============================== */

/* Toolbar */
.fc .fc-toolbar-title {
    font-weight: 900;
    letter-spacing: .2px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fc .fc-button {
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    transition: background var(--dur-1) var(--ease-1);
}

    .fc .fc-button:hover {
        background: #f2f6ff
    }

.fc .fc-button-active {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
    border-color: transparent !important;
    color: #061024 !important;
}

/* Headers */
.fc-col-header, .fc-col-header-cell {
    background: var(--surface-2);
    border-color: var(--line);
}

.fc .fc-col-header-cell-cushion {
    color: #1f2a47;
    font-weight: 800;
    text-transform: capitalize;
    text-decoration: none;
}

/* Grid lines */
.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--line)
}

/* Day number (month) */
.fc-daygrid-day-number {
    color: #2a3552;
    font-weight: 800;
    border-radius: .5rem;
    padding: .2rem .35rem;
}

/* Hover day (month) */
.fc-daygrid-day:hover .fc-daygrid-day-frame {
    background: #eef4ff
}

/* Today */
.fc .fc-day-today {
    background: #e9f2ff !important;
    outline: 2px solid #bcd6ff;
    outline-offset: -2px;
}

/* Drag selection highlight */
.fc .fc-highlight {
    background: rgba(40,164,255,.20);
    border: 2px solid #28a4ff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Click selection custom (class added from JS) */
.fc-cell-selected {
    position: relative;
    background: rgba(106,92,255,.18) !important;
}

    .fc-cell-selected::after {
        content: "";
        position: absolute;
        inset: 2px;
        border: 2px dashed rgba(106,92,255,.75);
        border-radius: .6rem;
        pointer-events: none;
    }

/* Events */
.fc .fc-event {
    border: 0;
    border-left: 4px solid transparent;
    background: linear-gradient(90deg, rgba(106,92,255,.22), rgba(40,164,255,.22));
    color: #0a1739;
    border-radius: .7rem;
    padding: .18rem .38rem;
    box-shadow: 0 8px 18px rgba(20,26,42,.16);
}

    .fc .fc-event:hover {
        filter: brightness(1.03)
    }

/* Month: no time, title bold */
.fc-daygrid-event {
    padding: .08rem .28rem
}

.fc-daygrid-dot-event .fc-event-time,
.fc-daygrid-block-event .fc-event-time {
    display: none
}

.fc-daygrid-event .fc-event-title {
    white-space: normal;
    line-height: 1.15;
    font-weight: 900;
    font-size: .9rem;
    overflow-wrap: anywhere;
    color: #0a1739;
}

/* Week/Day: title → time */
.fc-timegrid-event .fc-event-main {
    padding: .24rem .48rem
}

.fc-timegrid-event .fc-event-title {
    font-weight: 900;
    line-height: 1.15;
    color: #0a1739
}

.fc-timegrid-event .fc-event-time {
    display: block;
    font-size: .8rem;
    color: #42507a;
    margin-top: .12rem
}

/* Slots */
.fc-timegrid-slot {
    height: 2.2rem
}

    .fc-timegrid-slot:hover {
        background: #f2f7ff
    }

/* Now indicator (week/day) */
.fc .fc-now-indicator-line {
    border-color: #ff4d4d
}

.fc .fc-now-indicator-arrow {
    border-color: #ff4d4d;
    border-width: 6px
}

/* Responsive toolbar */
@media (max-width:575.98px) {
    .fc-header-toolbar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "title title title" "nav . views";
        align-items: center;
        gap: .25rem;
    }

        .fc-header-toolbar .fc-toolbar-chunk:first-child {
            grid-area: nav
        }

        .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
            grid-area: title
        }

        .fc-header-toolbar .fc-toolbar-chunk:last-child {
            grid-area: views
        }

    .fc .fc-toolbar-title {
        font-size: 1rem;
        text-align: center
    }

    .fc .fc-button {
        font-size: .82rem;
        padding: .32rem .54rem
    }

    .fc-button-active {
        box-shadow: none !important
    }
}

/* ===============================
   14) SELECT2 (if used)
   =============================== */

.select2-container .select2-selection--single {
    height: 42px;
    padding: 6px 12px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px
}

.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2)
}

.select2-results__option--highlighted {
    background: #eef4ff;
    color: #1f2a47
}

/* ===============================
   15) UTILITIES (prefijo u-)
   =============================== */

.u-shadow-1 {
    box-shadow: var(--shadow-1)
}

.u-shadow-2 {
    box-shadow: var(--shadow-2)
}

.u-shadow-3 {
    box-shadow: var(--shadow-3)
}

.u-rounded-xs {
    border-radius: var(--r-xs)
}

.u-rounded-sm {
    border-radius: var(--r-sm)
}

.u-rounded-md {
    border-radius: var(--r-md)
}

.u-rounded-lg {
    border-radius: var(--r-lg)
}

.u-rounded-xl {
    border-radius: var(--r-xl)
}

.u-surface {
    background: var(--surface)
}

.u-surface-2 {
    background: var(--surface-2)
}

.u-border {
    border: 1px solid var(--line)
}

.u-border-strong {
    border: 1px solid var(--line-strong)
}

/* Spacing utilities will be programmatically added below */

/* ===============================
   16) PRINT OVERRIDES (safe)
   =============================== */

@media print {
    body {
        background: #fff
    }

    .navbar, footer {
        display: none !important
    }

    .card, .modal-content {
        box-shadow: none !important
    }
}

/* ===============================
   17) KEYFRAMES (subtle)
   =============================== */

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.fade-in {
    animation: fade-in var(--dur-3) var(--ease-2) both
}

.pop-in {
    animation: pop-in var(--dur-2) var(--ease-2) both
}


#overlay-cargando {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 1.2rem;
    color: #555;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #ccc;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
}
/* --- Color utilities ------------------------------------------- */
.u-text-text {
    color: var(--text) !important
}

.u-bg-text {
    background: var(--text) !important;
    color: #fff
}

.u-border-text {
    border-color: var(--text) !important
}

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

.u-bg-muted {
    background: var(--muted) !important;
    color: #fff
}

.u-border-muted {
    border-color: var(--muted) !important
}

.u-text-accent1 {
    color: var(--accent-1) !important
}

.u-bg-accent1 {
    background: var(--accent-1) !important;
    color: #fff
}

.u-border-accent1 {
    border-color: var(--accent-1) !important
}

.u-text-accent2 {
    color: var(--accent-2) !important
}

.u-bg-accent2 {
    background: var(--accent-2) !important;
    color: #fff
}

.u-border-accent2 {
    border-color: var(--accent-2) !important
}

.u-text-success {
    color: var(--success) !important
}

.u-bg-success {
    background: var(--success) !important;
    color: #fff
}

.u-border-success {
    border-color: var(--success) !important
}

.u-text-warning {
    color: var(--warning) !important
}

.u-bg-warning {
    background: var(--warning) !important;
    color: #fff
}

.u-border-warning {
    border-color: var(--warning) !important
}

.u-text-danger {
    color: var(--danger) !important
}

.u-bg-danger {
    background: var(--danger) !important;
    color: #fff
}

.u-border-danger {
    border-color: var(--danger) !important
}

.u-text-info {
    color: var(--info) !important
}

.u-bg-info {
    background: var(--info) !important;
    color: #fff
}

.u-border-info {
    border-color: var(--info) !important
}
/* --- Flex utilities -------------------------------------------- */
.u-flex {
    display: flex
}

.u-inline-flex {
    display: inline-flex
}

.u-flex-col {
    flex-direction: column
}

.u-items-center {
    align-items: center
}

.u-justify-center {
    justify-content: center
}

.u-justify-between {
    justify-content: space-between
}

.u-flex-1 {
    flex: 1 1 auto
}

.u-flex-none {
    flex: none
}

.u-wrap {
    flex-wrap: wrap
}

.u-nowrap {
    flex-wrap: nowrap
}
/* --- Grid utilities -------------------------------------------- */
.u-grid {
    display: grid
}

.u-grid-1 {
    grid-template-columns: repeat(1, minmax(0,1fr))
}

.u-grid-2 {
    grid-template-columns: repeat(2, minmax(0,1fr))
}

.u-grid-3 {
    grid-template-columns: repeat(3, minmax(0,1fr))
}

.u-grid-4 {
    grid-template-columns: repeat(4, minmax(0,1fr))
}

.u-grid-5 {
    grid-template-columns: repeat(5, minmax(0,1fr))
}

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

.u-grid-12 {
    grid-template-columns: repeat(12, minmax(0,1fr))
}

.u-grid-auto-120 {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
}

.u-grid-auto-140 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
}

.u-grid-auto-160 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
}

.u-grid-auto-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.u-grid-auto-240 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.u-grid-auto-280 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.u-grid-auto-320 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
}

/* --- Elevation helpers -------------------------------------------- */
.u-elev-0 {
    box-shadow: none
}

.u-elev-1 {
    box-shadow: var(--shadow-1)
}

.u-elev-2 {
    box-shadow: var(--shadow-2)
}

.u-elev-3 {
    box-shadow: var(--shadow-3)
}

/* --- Width helpers ------------------------------------------------ */
.u-w-100 {
    width: 100%
}

.u-h-100 {
    height: 100%
}

.u-maxw-480 {
    max-width: 480px
}

.u-maxw-640 {
    max-width: 640px
}

.u-maxw-960 {
    max-width: 960px
}

.u-maxw-1200 {
    max-width: 1200px
}

/* --- Text helpers ------------------------------------------------- */
.u-text-center {
    text-align: center
}

.u-text-right {
    text-align: right
}

.u-text-left {
    text-align: left
}

.u-fw-700 {
    font-weight: 700
}

.u-fw-800 {
    font-weight: 800
}

.u-fw-900 {
    font-weight: 900
}

/* --- Radius tokens mapping --------------------------------------- */
.u-rounded {
    border-radius: var(--r-sm)
}

.u-rounded-lg {
    border-radius: var(--r-lg)
}

.u-rounded-full {
    border-radius: 999px
}

/* --- Hide/show ---------------------------------------------------- */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.u-visible {
    visibility: visible
}

.u-invisible {
    visibility: hidden
}

/* --- Anim helpers ------------------------------------------------- */
.u-fade-in {
    animation: fade-in var(--dur-3) var(--ease-2) both
}

.u-pop-in {
    animation: pop-in var(--dur-2) var(--ease-2) both
}

/* --- Helper for sticky footer when extra wrappers exist ----------- */
.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column
}

    .app-shell main {
        flex: 1 0 auto
    }


/* ===== Sticky footer SANO (flex layout) ===== */
html, body {
    height: 100%;
}

body {
    min-height: 100vh; /* o 100dvh si te gusta */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* previene saltos por ancho */
}

/* Header arriba, footer abajo, el main ocupa el resto */
#MiHeader {
    flex: 0 0 auto;
}

main[role="main"] {
    flex: 1 0 auto; /* crece y empuja el footer */
    min-width: 0; /* evita overflow de grids/calendario */
}

footer.footer {
    flex-shrink: 0;
    margin-top: auto; /* clave: lo “pega” al final de la columna */
    position: relative !important; /* neutraliza fixed/absolute previos */
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1; /* por si hay pseudo-fondos */
}

    /* Si alguna regla vieja fijó el footer: lo anulamos */
    footer.footer.is-fixed,
    footer.footer.fixed,
    .footer[style*="position:fixed"] {
        position: relative !important;
    }

/* Opcional: si usás body::before como velo/fondo, asegurá que no tape al footer */
body::before {
    z-index: 0; /* y el footer está en 1 */
}

/* ====== FullCalendar – theme limpio y legible ====== */
.fc {
    --fc-border-color: rgba(0,0,0,.08);
    --fc-now-indicator-color: #ff4d4f;
    --fc-today-bg: rgba(52, 152, 219, 0.06);
    --fc-slot-bg: transparent;
    font-size: 14px;
}

/* Encabezados de días */
.fc-col-header, .fc-col-header-cell {
    background: linear-gradient(180deg, #f9fafb, #f2f4f7);
    border-bottom: 1px solid var(--fc-border-color);
}

.fc .fc-col-header-cell-cushion {
    padding: .5rem .25rem;
    font-weight: 600;
    color: #222;
    text-decoration: none;
}

/* Hoy destacado */
.fc .fc-day-today {
    background: var(--fc-today-bg) !important;
}

/* Slots horarios: líneas sutiles y hover */
.fc-timegrid-slot {
    height: auto; /* deja que calcule; no forzar alturas fijas */
    border-bottom: 1px dashed rgba(0,0,0,.06);
}

    .fc-timegrid-slot:hover {
        background: rgba(33, 150, 243, .06);
    }

/* Etiquetas de hora: claras */
.fc .fc-timegrid-axis-cushion {
    color: #6b7280;
    font-weight: 500;
}

/* Contenedor de eventos: que no “salga” */
.fc-timegrid-event, .fc-v-event, .fc-h-event {
    border: 1px solid rgba(0,0,0,.12);
    background: #111827; /* base oscura elegante */
    color: #E5E7EB;
    border-radius: .5rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    overflow: hidden;
}

/* Estado hover / focus */
.fc-event:hover, .fc-event:focus {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

/* Contenido del evento: 2 líneas con ellipsis */
.evt-wrap {
    padding: .35rem .45rem .4rem;
    line-height: 1.2;
}

.evt-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.evt-title {
    font-weight: 700;
    font-size: .92rem;
}

.evt-meta {
    font-size: .78rem;
    color: #c7cbd3;
    margin-top: .1rem;
}

/* Indicador de “ahora” bien visible */
.fc .fc-timegrid-now-indicator-line {
    border-color: #ff4d4f;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: #ff4d4f transparent transparent;
}

/* Selección de celda por click/drag */
.fc-cell-selected,
.fc .fc-highlight {
    background: rgba(80, 140, 255, .18);
    box-shadow: inset 0 0 0 2px rgba(80, 140, 255, .35);
    border-radius: .35rem;
}

/* Toolbar: contraste y botones */
.fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}

.fc .fc-button {
    border-radius: .6rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #111827;
    padding: .35rem .6rem;
    transition: all .15s ease;
}

    .fc .fc-button:hover {
        background: #f3f4f6;
    }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.fc .fc-today-button.fc-button-primary:disabled {
    opacity: .5;
    background: #f3f4f6;
    color: #6b7280;
}

/* Evita desbordes laterales en contenedor */
#calendario-container {
    overflow: hidden; /* o auto si querés scroll horizontal */
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    background: #fff;
}
/* ===== FullCalendar: estilo prolijo y legible ===== */
.fc {
    --fc-border-color: rgba(0,0,0,.08);
    --fc-now-indicator-color: #ff4d4f;
    --fc-today-bg: rgba(33, 150, 243, .06);
    font-size: 14px;
}

/* Encabezados */
.fc-col-header, .fc-col-header-cell {
    background: linear-gradient(180deg, #f9fafb, #f2f4f7);
    border-bottom: 1px solid var(--fc-border-color);
}

.fc .fc-col-header-cell-cushion {
    padding: .5rem .25rem;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
}

/* Hoy */
.fc .fc-day-today {
    background: var(--fc-today-bg) !important;
}

/* Slots y ejes */
.fc-timegrid-slot {
    border-bottom: 1px dashed rgba(0,0,0,.06);
}

    .fc-timegrid-slot:hover {
        background: rgba(33, 150, 243, .06);
    }

.fc .fc-timegrid-axis-cushion {
    color: #6b7280;
    font-weight: 500;
}

/* Eventos: caja prolija y sin desbordes */
.fc-timegrid-event,
.fc-v-event, .fc-h-event {
    border: 1px solid rgba(0,0,0,.12);
    background: #111827; /* fondo oscuro elegante */
    color: #E5E7EB; /* texto claro */
    border-radius: .6rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    overflow: hidden; /* nunca salir de la casilla */
}

.fc-event:hover, .fc-event:focus {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

/* Contenido del evento: 2 líneas con ellipsis */
.evt-wrap {
    padding: .38rem .48rem .44rem;
    line-height: 1.2;
}

.evt-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evt-title {
    font-weight: 800;
    font-size: .92rem;
}

.evt-meta {
    font-size: .78rem;
    color: #c7cbd3;
    margin-top: .12rem;
}

/* Indicador de ahora */
.fc .fc-timegrid-now-indicator-line {
    border-color: #ff4d4f;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: #ff4d4f transparent transparent;
}

/* Selección por click/drag */
.fc-cell-selected, .fc .fc-highlight {
    background: rgba(80, 140, 255, .18);
    box-shadow: inset 0 0 0 2px rgba(80, 140, 255, .35);
    border-radius: .35rem;
}

.fc-slot-active {
    outline: 2px solid rgba(80,140,255,.6);
    outline-offset: -2px;
}

/* Toolbar */
.fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #111827;
}

.fc .fc-button {
    border-radius: .6rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #111827;
    padding: .35rem .6rem;
    transition: all .15s ease;
}

    .fc .fc-button:hover {
        background: #f3f4f6;
    }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

/* Contenedor del calendario */
#calendario-container {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .8rem;
    overflow: hidden;
}

/* línea en cada slot */
.fc-timegrid-slot {
    border-bottom: 1px solid rgba(0,0,0,.08);
}

    /* refuerzo visual justo en los :30 */
    .fc-timegrid-slot[data-time$=":30:00"] {
        background-image: linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,.06));
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
    }

/* etiquetas hh:mm siempre visibles cada 30' */
.fc .fc-timegrid-axis-cushion {
    font-variant-numeric: tabular-nums;
}
#calendario-container .fc .fc-timegrid-slot.fc-slot-active::after,
#calendario-container .fc .fc-timegrid-slot.is-slot-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid rgba(80, 140, 255, .7);
    border-radius: .5rem;
    pointer-events: none;
}

/* Hover de slot (no interfiere con el activo) */
#calendario-container .fc .fc-timegrid-slot:hover {
    background: rgba(33, 150, 243, .08) !important;
}
/* línea suave en cada slot y refuerzo en los :30 */
.fc-timegrid-slot {
    border-bottom: 1px solid rgba(0,0,0,.08);
}

    .fc-timegrid-slot[data-time$=":30:00"] {
        background-image: linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,.06));
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
    }


/* --- Navbar siempre por encima --- */
#MiHeader,
#MiHeader .navbar {
    position: relative;
    z-index: 3000; /* > que cualquier hero/banner */
    overflow: visible; /* evita que se recorte el dropdown */
}

    /* Dropdowns de la navbar por encima de todo */
    #MiHeader .navbar .dropdown-menu {
        position: absolute;
        z-index: 3500 !important; /* pisa stacking contexts ajenos */
    }

    /* En móvil, cuando se expande el menú colapsado */
    #MiHeader .navbar-collapse {
        position: relative;
        z-index: 3200;
       
    }

/* ======== SOLO MOBILE (≤576px) ======== */
@media (max-width: 576px) {

    /* Paso 1: Sucursales */
    #paso1 .sucursales-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
    }

        #paso1 .sucursales-wrapper > .card {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            float: none !important;
            display: block !important;
        }

    /* Paso 2: Tipo de servicio */
    #paso2 .tiposervicio-wrapper,
    #tipos-container {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
    }

        #paso2 .tiposervicio-wrapper > .card,
        #tipos-container > .card,
        #paso2 .opcion-tipo {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            float: none !important;
            display: block !important;
        }

    /* Paso 3: Servicios (renderizados por JS en #servicios-container) */
    #paso3 .servicios-wrapper,
    #servicios-container {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
    }

        #paso3 .servicios-wrapper > .card,
        #servicios-container > .card,
        #paso3 .opcion-servicio {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            float: none !important;
            display: block !important;
        }

    /* Paso 4: Empleados (ya se ven en columna, reforzamos igual) */
    #paso4 .empleados-wrapper,
    #empleados-container {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
    }

        #paso4 .empleados-wrapper > .card,
        #empleados-container > .card,
        #paso4 .opcion-empleado {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            float: none !important;
            display: block !important;
        }

    /* Fechas y horarios: ancho completo y scroll horizontal si hace falta */
    #contenedor-fechas,
    #calendario-horarios {
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* Botones bajo el calendario: columna y full width */
    #crearReserva .d-flex.gap-3 {
        flex-direction: column !important;
        gap: .75rem !important;
    }

        #crearReserva .d-flex.gap-3 > .btn,
        #crearReserva .btn {
            width: 100% !important;
        }
}
/* ===== Forzar 1 columna solo en Sucursales, Tipos y Servicios ===== */
@media (max-width: 768px) {
    .sucursales-wrapper,
    .tiposervicio-wrapper,
    .servicios-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important; /* una columna */
        gap: 1rem !important;
        margin-top: .75rem !important;
    }

        .sucursales-wrapper > .card,
        .tiposervicio-wrapper > .card,
        .servicios-wrapper > .card {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
        }
}

/* Altura máxima del carrusel (ajustá a gusto) */
.hero-wrapper {
    --hero-h: min(70vh, 760px);
}

/* Mantener una “lona” estable para que todas se vean completas */
#galeriaCarousel,
#galeriaCarousel .carousel-inner,
#galeriaCarousel .carousel-item {
    height: var(--hero-h);
    background: var(--bg, #edf1f7); /* color de fondo detrás de la imagen */
}

/* La imagen SIEMPRE completa (sin recorte) */
.img-galeria {
    width: 100%;
    height: 100%;
    object-fit: contain; /* <- clave para que no haga zoom */
    object-position: center;
    display: block;
    background: transparent; /* sin fondos raros */
}

/* ----- Flechas personalizadas de alto contraste ----- */
#galeriaCarousel .carousel-control-prev,
#galeriaCarousel .carousel-control-next {
    width: 12%;
    opacity: 1;
}

#galeriaCarousel .carousel-control-prev-icon,
#galeriaCarousel .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(255,255,255,.85); /* círculo claro */
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    background-size: 46% 46%;
    background-position: center;
    background-repeat: no-repeat;
    filter: none; /* sin filtros que las aclaren */
}

/* SVGs oscuros (usa tu --text si la tenés definida) */
#galeriaCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23141a2a'%3E%3Cpath d='M11 14L5 8l6-6' stroke='%23141a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

#galeriaCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23141a2a'%3E%3Cpath d='M5 2l6 6-6 6' stroke='%23141a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Hover un poco más marcado */
#galeriaCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#galeriaCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(255,255,255,.95);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Opcional: indicadores (puntitos) con buen contraste */
#galeriaCarousel .carousel-indicators [data-bs-target] {
    background-color: #141a2a;
}

#galeriaCarousel .carousel-indicators .active {
    background-color: #28a4ff; /* tu accent-2 si querés */
}












/* ====== Grid responsivo para las cards ====== */
.grid-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

/* ====== Card base ====== */
.cardx {
    --radius: 16px;
    --shadow: 0 6px 18px rgba(20,26,42,0.08);
    --shadow-hover: 0 10px 24px rgba(20,26,42,0.14);
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--line, #d9deea);
    border-radius: var(--radius);
    background: var(--surface, #fff);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: pointer;
}

    .cardx:is(:hover, :focus-visible) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
        border-color: var(--line-strong, #c6cce0);
        outline: none;
    }

    .cardx.is-selected {
        border-color: transparent;
        box-shadow: 0 0 0 2px var(--accent-1, #6a5cff), 0 10px 24px rgba(20,26,42,0.14);
    }

/* ====== Zona de imagen ====== */
.cardx-media {
    aspect-ratio: 4 / 3;
    width: 100%;
    position: relative;
    background: var(--bg-soft, #f4f7fc);
    overflow: hidden;
}

    .cardx-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cardx-media::after {
        /* sutil gradiente inferior para legibilidad del título si va sobre imagen */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 50%);
        opacity: .25;
        pointer-events: none;
    }

/* ====== Cuerpo ====== */
.cardx-body {
    padding: .75rem .9rem 1rem .9rem;
}

.cardx-title {
    margin: .25rem 0 0 0;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text, #141a2a);
    font-weight: 700;
    letter-spacing: .2px;
}

/* Texto secundario (opcional, precio/duración/rol) */
.cardx-meta {
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--muted, #606a84);
}

/* ====== Estado disabled (por si lo necesitás) ====== */
.cardx[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* ====== Placeholder sin imagen ====== */
.cardx-media.no-image {
    display: grid;
    place-items: center;
    color: var(--muted, #606a84);
    font-size: .9rem;
}

    .cardx-media.no-image::before {
        content: "Sin imagen";
    }

/* Accesibilidad: foco visible en teclado */
.cardx:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-2, #28a4ff), var(--shadow-hover);
}



#mostrarOcultarSelectCliente {
    
    border: 1px solid grey !important;

}

/*BORRAR ESTO DSP ES PARA LOS BOTONES LOGIN DEMO*/
#loguearseDemo {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px; /* espacio entre elementos */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

    #loguearseDemo p {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 10px;
        text-align: center;
    }

    #loguearseDemo input[type="submit"] {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 8px;
        background: linear-gradient(90deg, #6a5cff, #28a4ff);
        color: white;
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.1s ease, opacity 0.2s ease;
    }

        #loguearseDemo input[type="submit"]:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }

/* ===============================
   TOAST NOTIFICATIONS
   =============================== */
.pronti-toast {
    opacity: 0;
    transform: translateX(40px) scale(.95);
    transition: all .35s var(--ease-1);
    pointer-events: none;
}
.pronti-toast.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}
.pronti-toast.hide {
    opacity: 0;
    transform: translateX(40px) scale(.9);
}
.pronti-toast-inner {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.15rem;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    min-width: 260px;
}

/* ===============================
   SUCCESS MODAL (Reservation created)
   =============================== */
.success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay .3s ease;
}
.success-modal-card {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-3);
    max-width: 420px;
    width: 90%;
    animation: successPopIn .4s var(--ease-1);
}
.success-modal-card .success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16,185,129,.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1rem;
}
.success-modal-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .5rem;
}
.success-modal-card p {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.success-modal-card .btn-group-success {
    display: flex;
    gap: .75rem;
    justify-content: center;
}
.success-modal-card .btn-success-primary {
    padding: .65rem 1.5rem;
    border: none;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: white;
    transition: all .2s ease;
}
.success-modal-card .btn-success-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79,141,255,.3);
}
.success-modal-card .btn-success-secondary {
    padding: .65rem 1.5rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    background: transparent;
    color: var(--text);
    transition: all .2s ease;
}
.success-modal-card .btn-success-secondary:hover {
    border-color: var(--accent-1);
    color: var(--accent-1);
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes successPopIn {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===============================
   LOADING BUTTON STATE
   =============================== */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btnSpin .6s linear infinite;
    right: 12px;
    top: 50%;
    margin-top: -9px;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ===============================
   EDIT RESERVA - Professional Layout
   =============================== */
.edit-reserva-container {
    max-width: 960px;
    margin: 0 auto;
}
.edit-reserva-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.edit-reserva-header .reserva-id-badge {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: white;
    font-weight: 700;
    font-size: .85rem;
    padding: .35rem .85rem;
    border-radius: var(--r-sm);
}
.edit-reserva-header h2 {
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    color: var(--text);
}
.edit-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.edit-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    background: var(--surface-2);
}
.edit-card-body {
    padding: 1.25rem;
}
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
}
.estado-badge.pendiente { background: rgba(245,158,11,.12); color: #b45309; }
.estado-badge.confirmada { background: rgba(14,165,233,.12); color: #0369a1; }
.estado-badge.completada { background: rgba(16,163,127,.12); color: #047857; }
.estado-badge.cancelada { background: rgba(239,68,68,.12); color: #b91c1c; }
.estado-badge.noasistio { background: rgba(107,114,128,.12); color: #4b5563; }

.status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}
.status-actions .btn-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .82rem;
    border: 1.5px solid;
    background: transparent;
    cursor: pointer;
    transition: all .2s ease;
}
.status-actions .btn-status:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.status-actions .btn-status.confirmar { border-color: #0ea5e9; color: #0ea5e9; }
.status-actions .btn-status.confirmar:hover { background: #0ea5e9; color: white; }
.status-actions .btn-status.completar { border-color: #10b981; color: #10b981; }
.status-actions .btn-status.completar:hover { background: #10b981; color: white; }
.status-actions .btn-status.cancelar { border-color: #ef4444; color: #ef4444; }
.status-actions .btn-status.cancelar:hover { background: #ef4444; color: white; }
.status-actions .btn-status.noasistio { border-color: #6b7280; color: #6b7280; }
.status-actions .btn-status.noasistio:hover { background: #6b7280; color: white; }

.servicios-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.servicios-table thead th {
    background: var(--surface-2);
    padding: .7rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.servicios-table tbody td {
    padding: .75rem .85rem;
    font-size: .88rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.servicios-table tbody tr:last-child td {
    border-bottom: none;
}
.servicios-table tbody tr:hover {
    background: rgba(99,102,241,.03);
}
.servicios-table .precio-cell {
    font-weight: 700;
    color: var(--accent-1);
}
.servicios-table .actions-cell {
    display: flex;
    gap: .35rem;
}
.servicios-table .actions-cell a {
    padding: .3rem .6rem;
    border-radius: var(--r-xs);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid;
    transition: all .15s ease;
}
.servicios-table .actions-cell .btn-edit-srv {
    border-color: #f59e0b;
    color: #f59e0b;
}
.servicios-table .actions-cell .btn-edit-srv:hover {
    background: #f59e0b;
    color: white;
}
.servicios-table .actions-cell .btn-del-srv {
    border-color: #ef4444;
    color: #ef4444;
}
.servicios-table .actions-cell .btn-del-srv:hover {
    background: #ef4444;
    color: white;
}