/* =============================================================================
   Ecoparque tenant theme — initial pilot
   -----------------------------------------------------------------------------
   Scoped under `body.tenant-ecoparque` so it only applies on the Ecoparque host
   and never leaks into EntradasBA. The base app still drives layout/structure;
   this file only overrides palette, typography, and a handful of component
   surfaces to match the Figma reference in
   `fan_factory/ecoparque-figma-exports/`. Expand iteratively as more screens
   are reviewed.

   Color tokens (sourced from Commons/Tenants/Ecoparque.cs):
     --tenant-color-primary    = #A1BB2E  (lime — hero/brand accents)
     --tenant-color-secondary  = #282213  (very dark brown — headings/footer)
     --tenant-color-tertiary   = #F3CC00  (yellow — highlights)

   Ecoparque-specific extras (not yet in TenantColors):
     --eco-cta-blue            = #1455CE  (CTA button)
     --eco-hero-teal           = #1AB2A5  (hero gradient)
     --eco-footer-dark         = #0C5960  (footer background)
     --eco-surface-light       = #F6F7F8  (page background)
   ============================================================================= */

body.tenant-ecoparque {
    --eco-cta-blue: #1455CE;
    --eco-cta-blue-hover: #0E3FA4;
    --eco-hero-teal: #1AB2A5;
    --eco-hero-teal-dark: #0D8A80;
    --eco-footer-dark: #0C5960;
    --eco-surface-light: #F6F7F8;
    --eco-input-border: #D5D9DD;
    --eco-muted: #6B7280;

    background-color: var(--eco-surface-light);
    font-family: "Nunito", "Open Sans", system-ui, -apple-system, sans-serif;
    color: var(--tenant-color-secondary);
}

/* --- loading + home hero (pre-existing) --- */
body.tenant-ecoparque .loadingPage {
    background-image: url("/images/tenant/ecoparque/bg-loading.png") !important;
}
body.tenant-ecoparque .pagelayout .home .home-top {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%) !important;
}

/* --- header ---
 * Figma layout: logo left, nav links centered, blue CTA right, with a
 * yellow accent line directly below the header bar.
 *
 * The base markup (HeaderSitePublic.razor) wraps logo + .menu in
 * `.header-top` and the nav in a separate `.navbar` row. We use
 * `display: contents` on `.header-top` so its children become direct
 * flex items of `.cont-1470`, then reorder via `order` to get the
 * three-column layout without changing the .razor file.
 */
body.tenant-ecoparque .HeaderSitePublic,
body.tenant-ecoparque header.HeaderSitePublic {
    background-color: #FFFFFF;
    border-bottom: 4px solid var(--tenant-color-tertiary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 10;
}

body.tenant-ecoparque .HeaderSitePublic .cont-1470 {
    display: flex !important;
    align-items: center;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 72px;
}

/* Flatten .header-top so logo + .menu become siblings of .navbar */
body.tenant-ecoparque .HeaderSitePublic .header-top {
    display: contents;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > a {
    order: 1;
    flex: 0 0 auto;
    display: inline-block;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > a img {
    max-height: 44px;
    width: auto;
    display: block;
}

body.tenant-ecoparque .HeaderSitePublic .navbar {
    order: 2;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Right-side cluster: only the blue CTA. Hide cart/login/lang/hamburger
 * — Ecoparque header in Figma shows just nav + CTA. */
body.tenant-ecoparque .HeaderSitePublic .header-top > .menu {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > .menu > *:not(.btn-header-cta) {
    display: none;
}

/* Nav links as plain text — the .mud-nav-link sets dark color, but the
 * inner .mud-nav-link-text div carries MudBlazor's default near-white
 * color (#F3F6F9) which wins over the parent. Override both. */
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
    background: none !important;
    border: none !important;
    color: var(--tenant-color-secondary) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px !important;
    white-space: nowrap;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link .mud-nav-link-text {
    color: var(--tenant-color-secondary) !important;
    font-size: 14px;
    font-weight: 600;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link:hover,
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link:hover .mud-nav-link-text {
    color: var(--eco-cta-blue) !important;
    background: none !important;
}

/* "Secciones" label hidden — Figma doesn't show it */
body.tenant-ecoparque .HeaderSitePublic .menuTop h5 {
    display: none;
}

/* Header CTA button (Conseguí tu entrada) */
body.tenant-ecoparque .btn-header-cta {
    background-color: var(--eco-cta-blue) !important;
    border-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .btn-header-cta::before {
    content: "\f02d5"; /* Material Symbols Rounded "confirmation_number" - approximate */
}
body.tenant-ecoparque .btn-header-cta:hover {
    background-color: var(--eco-cta-blue-hover) !important;
    border-color: var(--eco-cta-blue-hover) !important;
    color: #FFFFFF !important;
}

/* Hide hamburger on desktop — nav is always visible */
body.tenant-ecoparque .HeaderSitePublic .hamburger-public {
    display: none;
}

@media (max-width: 1199px) {
    body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
        font-size: 13px;
        padding: 6px 8px !important;
    }
}

@media (max-width: 991px) {
    body.tenant-ecoparque .HeaderSitePublic .cont-1470 {
        flex-wrap: wrap;
        gap: 8px;
    }
    body.tenant-ecoparque .HeaderSitePublic .navbar {
        order: 4;
        flex-basis: 100%;
        justify-content: flex-start;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop {
        flex-wrap: wrap;
        gap: 0;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
        padding: 8px 0 !important;
        width: 100%;
    }
    /* Hide the language switcher in the mobile menu (Ecoparque only ever
     * has es-AR, but the mobile menuTop renders a separate switcher block
     * even for single-locale tenants if .btn-idiomas-mb was visible). */
    body.tenant-ecoparque .HeaderSitePublic .menuTop .btn-idiomas-mb {
        display: none;
    }
    /* Hamburger isn't wired to actually toggle, hide it for now so we just
     * show the inline mobile nav. */
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public {
        display: none;
    }
}

body.tenant-ecoparque .HeaderSitePublic .btn-tertiary,
body.tenant-ecoparque .HeaderSitePublic .btn-shop {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .HeaderSitePublic .btn-tertiary:hover,
body.tenant-ecoparque .HeaderSitePublic .btn-shop:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
}
body.tenant-ecoparque .HeaderSitePublic .btn-outline-tertiary {
    border-color: var(--eco-cta-blue);
    color: var(--eco-cta-blue);
    background-color: transparent;
}
body.tenant-ecoparque .HeaderSitePublic .btn-outline-tertiary:hover {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
}

/* --- primary buttons (app-wide) --- */
body.tenant-ecoparque .btn-primary {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-primary:hover,
body.tenant-ecoparque .btn-primary:focus {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-outline-primary {
    color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    background-color: transparent;
}
body.tenant-ecoparque .btn-outline-primary:hover {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-secondary {
    background-color: var(--tenant-color-primary);
    border-color: var(--tenant-color-primary);
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .btn-secondary:hover {
    background-color: #8DA825;
    border-color: #8DA825;
}

/* --- MudBlazor button overrides (ticketera pages use them) --- */
body.tenant-ecoparque .mud-button-filled-primary {
    background-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
}
body.tenant-ecoparque .mud-button-filled-primary:hover {
    background-color: var(--eco-cta-blue-hover) !important;
}
body.tenant-ecoparque .mud-button-outlined-primary {
    border-color: var(--eco-cta-blue) !important;
    color: var(--eco-cta-blue) !important;
}
body.tenant-ecoparque .mud-button-filled-secondary {
    background-color: var(--tenant-color-primary) !important;
    color: var(--tenant-color-secondary) !important;
}

/* --- headings --- */
body.tenant-ecoparque h1,
body.tenant-ecoparque h2,
body.tenant-ecoparque h3,
body.tenant-ecoparque h4,
body.tenant-ecoparque h5 {
    color: var(--tenant-color-secondary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.tenant-ecoparque .hero-top h1 {
    color: #FFFFFF;
}

/* --- links --- */
body.tenant-ecoparque a {
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque a:hover {
    color: var(--eco-cta-blue-hover);
}

/* --- footer --- */
body.tenant-ecoparque footer,
body.tenant-ecoparque .footer,
body.tenant-ecoparque .SiteFooter {
    background-color: #002733;
    color: #FFFFFF;
}
/* Remove the separator line between .top (hidden) and .bottom */
body.tenant-ecoparque footer .bottom {
    border-top: none;
    padding-top: 24px;
}
body.tenant-ecoparque footer a,
body.tenant-ecoparque .footer a,
body.tenant-ecoparque .SiteFooter a {
    color: #FFFFFF;
}
body.tenant-ecoparque footer a:hover,
body.tenant-ecoparque .footer a:hover,
body.tenant-ecoparque .SiteFooter a:hover {
    color: var(--tenant-color-primary);
}

/* --- cards / event boxes --- */
body.tenant-ecoparque .box-item,
body.tenant-ecoparque .card,
body.tenant-ecoparque .seccion-resumen {
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --- badges --- */
body.tenant-ecoparque .badge.badge-default {
    background-color: var(--tenant-color-primary);
    color: var(--tenant-color-secondary);
}

/* --- guest checkout form (Figma Paso 3) --- */
/* The base .ticketeralayout .ticketeraBody::after CSS paints a full-size
 * white overlay at z-index 1 to create the split-background effect used by
 * the seat-map layout. Our guest form sits inside ticketeraBody for layout
 * consistency, so we need position:relative + z-index > 1 to sit above that
 * overlay. Same trick the base sheet uses for .selector-vista and friends. */
body.tenant-ecoparque .guest-checkout-form {
    position: relative;
    z-index: 5;
    padding: 28px 32px;
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.tenant-ecoparque .guest-checkout-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}
body.tenant-ecoparque .guest-checkout-icon {
    font-size: 28px;
    color: var(--eco-cta-blue);
    flex-shrink: 0;
    margin-top: 2px;
}
body.tenant-ecoparque .guest-checkout-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .guest-checkout-subtitle {
    font-size: 13px;
    color: var(--eco-muted);
    margin-bottom: 0;
    line-height: 1.5;
}
/* Two-column email row */
body.tenant-ecoparque .guest-email-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
/* Two-column doc row */
body.tenant-ecoparque .guest-doc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
body.tenant-ecoparque .guest-checkout-form .form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .guest-checkout-form .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tenant-color-secondary);
    margin-bottom: 6px;
}
body.tenant-ecoparque .guest-checkout-form .form-control {
    padding: 10px 14px;
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    font-size: 15px;
    background-color: #FFFFFF;
    transition: border-color 120ms ease;
}
body.tenant-ecoparque .guest-checkout-form .form-control:focus {
    outline: none;
    border-color: var(--eco-cta-blue);
    box-shadow: 0 0 0 3px rgba(20, 85, 206, 0.12);
}
body.tenant-ecoparque .guest-checkout-error {
    margin-top: 8px;
    padding: 10px 14px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-size: 14px;
}
body.tenant-ecoparque .guest-checkout-form .acciones {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}
body.tenant-ecoparque .btn-guest-continue {
    background-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
body.tenant-ecoparque .btn-guest-continue:hover {
    background-color: var(--eco-cta-blue-hover) !important;
}

/* --- carrito / checkout panels --- */
body.tenant-ecoparque .box-timer {
    background-color: var(--eco-surface-light);
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    padding: 10px 16px;
}

/* --- hero breadcrumb --- */
body.tenant-ecoparque .seccion-carrito .hero-top {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
}
body.tenant-ecoparque .seccion-carrito .hero-top h1,
body.tenant-ecoparque .seccion-carrito .hero-top p {
    color: #FFFFFF;
}
body.tenant-ecoparque .breadcrumb-item a,
body.tenant-ecoparque .breadcrumb-item.active {
    color: #FFFFFF;
}

/* =============================================================================
   Ecoparque-specific home page (Tenants/ecoparque/Home.razor) — Figma V2
   ============================================================================= */

/* Reset base layout interference so hero butts up against header */
body.tenant-ecoparque main {
    background-color: var(--eco-surface-light);
}
body.tenant-ecoparque main > .SiteMainPage {
    margin-top: 0 !important;
}
body.tenant-ecoparque .layerOverlay {
    background-color: transparent !important;
}
body.tenant-ecoparque .pagelayout {
    background-color: var(--eco-surface-light);
}

/* ── Full-width hero ─────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-home-hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center 55%;
    display: flex;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
body.tenant-ecoparque .eco-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    width: 100%;
}
body.tenant-ecoparque .eco-hero-content {
    max-width: 560px;
    width: 100%;
}
body.tenant-ecoparque .eco-hero-content h1 {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.tenant-ecoparque .eco-hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
body.tenant-ecoparque .eco-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    display: inline-block;
}
body.tenant-ecoparque .eco-dot--active {
    background: #FFFFFF;
}

/* ── Info bar ────────────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-info-bar {
    background-color: var(--tenant-color-secondary);
    color: #FFFFFF;
    padding: 12px 0;
}
body.tenant-ecoparque .eco-info-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
body.tenant-ecoparque .eco-info-bar-cta {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    font-weight: 600;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
body.tenant-ecoparque .eco-info-bar-cta:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
}
body.tenant-ecoparque .eco-info-bar-inner > p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
body.tenant-ecoparque .eco-info-bar-inner > p strong {
    color: var(--tenant-color-tertiary);
    font-weight: 700;
}

/* ── Actividades section ─────────────────────────────────────────────────── */
/* Floral decorative strip between info-bar and Actividades section */
body.tenant-ecoparque .eco-visitas-especiales {
    background-color: var(--eco-surface-light);
    padding: 56px 0 64px;
    background-image: url('/img/ecoparque/floral.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
}
body.tenant-ecoparque .eco-visitas-especiales h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-section-lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--eco-muted);
    margin: 0 0 36px 0;
    max-width: 680px;
}
body.tenant-ecoparque .eco-visitas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
body.tenant-ecoparque .eco-visita-card {
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease;
    cursor: pointer;
}
body.tenant-ecoparque .eco-visita-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}
body.tenant-ecoparque .eco-visita-img {
    height: 200px;
    background-size: cover;
    background-position: center 60%;
    position: relative;
}
body.tenant-ecoparque .eco-visita-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%);
}
body.tenant-ecoparque .eco-visita-body {
    padding: 20px 22px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.tenant-ecoparque .eco-visita-body h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-visita-body > p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--eco-muted);
    margin-bottom: 12px;
    flex: 1;
}
body.tenant-ecoparque .eco-visita-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
body.tenant-ecoparque .eco-visita-price,
body.tenant-ecoparque .eco-visita-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-visita-price strong,
body.tenant-ecoparque .eco-visita-duration strong {
    color: var(--tenant-color-secondary);
    font-weight: 600;
}
body.tenant-ecoparque .eco-visita-price .material-symbols-rounded,
body.tenant-ecoparque .eco-visita-duration .material-symbols-rounded {
    font-size: 16px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-visita-btn {
    align-self: flex-start;
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    font-weight: 600;
    padding: 9px 20px;
}
body.tenant-ecoparque .eco-visita-btn:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
}

/* ── Home info cards grid ────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-home-info-cards {
    background-color: #FFFFFF;
    padding: 0 0 0 0;
}

/* ── Social links section ────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-social-section {
    background-color: var(--eco-surface-light);
    padding: 40px 0 48px;
    border-top: 1px solid var(--eco-input-border);
}
body.tenant-ecoparque .eco-social-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 16px;
}
body.tenant-ecoparque .eco-social-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
body.tenant-ecoparque .eco-social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tenant-color-secondary);
    font-weight: 500;
    font-size: 15px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.tenant-ecoparque .eco-social-link:hover {
    border-color: var(--eco-cta-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    color: var(--eco-cta-blue);
    text-decoration: none;
}
body.tenant-ecoparque .eco-social-link .material-symbols-rounded:first-child {
    color: var(--eco-cta-blue);
    font-size: 22px;
}
body.tenant-ecoparque .eco-social-arrow {
    margin-left: auto;
    font-size: 20px;
    color: var(--eco-muted);
}

@media (max-width: 991px) {
    body.tenant-ecoparque .eco-visitas-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-social-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.tenant-ecoparque .eco-home-hero {
        min-height: 280px;
        background-position: center 60%;
    }
    body.tenant-ecoparque .eco-hero-content h1 {
        font-size: 28px;
    }
    body.tenant-ecoparque .eco-info-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    body.tenant-ecoparque .eco-info-bar-inner > p {
        font-size: 13px;
    }
    body.tenant-ecoparque .eco-visitas-especiales {
        padding: 40px 0 48px;
    }
    body.tenant-ecoparque .eco-visitas-especiales h2 {
        font-size: 22px;
    }
}


/* =============================================================================
   Purchase flow — Ticketera layout
   Verified selectors from live HTML inspection 2026-04-17:
     HEADER.headerTicketera
     DIV.ticketeraTop > .cont-1170 > .box-info > (.img-evento + .txt)
     DIV.ticketeraBody > .cont-1170 > (.selector-vista + .sidebar-resumen)
     .selector-vista > .entradas-tipo > .entrada > .Row
     .entrada > .Row > .contador > button
     .sidebar-resumen > .column-sticky
   ============================================================================= */

/* --- Header bar — white + yellow bottom line (Figma V2) --- */
body.tenant-ecoparque .headerTicketera {
    background-color: #FFFFFF;
    border-bottom: 3px solid var(--tenant-color-primary);
    padding: 12px 0;
}
body.tenant-ecoparque .headerTicketera img {
    max-height: 40px;
}
body.tenant-ecoparque .headerTicketera a,
body.tenant-ecoparque .headerTicketera .nav,
body.tenant-ecoparque .headerTicketera .nav a {
    color: var(--tenant-color-secondary);
}

/* --- Date bar (replaces dark venue banner) — light gray strip --- */
body.tenant-ecoparque .ticketeraTop {
    background: #F0F2F5;
    color: #6c757d;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}
body.tenant-ecoparque .ticketeraTop .box-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}
/* Hide venue image thumbnail — show only the date text */
body.tenant-ecoparque .ticketeraTop .img-evento {
    display: none;
}
/* Hide visit name (p and h4), show only date/time (span) */
body.tenant-ecoparque .ticketeraTop .txt p,
body.tenant-ecoparque .ticketeraTop .txt h4 {
    display: none;
}
body.tenant-ecoparque .ticketeraTop .txt span {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}
/* Calendar icon before the date text */
body.tenant-ecoparque .ticketeraTop .txt::before {
    content: 'calendar_today';
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    color: #6c757d;
    vertical-align: -3px;
    margin-right: 6px;
}
body.tenant-ecoparque .ticketeraTop .box-timer,
body.tenant-ecoparque .ticketeraTop .timer {
    background-color: #fff3cd;
    color: #856404;
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 13px;
}

/* --- Main body area --- */
body.tenant-ecoparque .ticketeraBody {
    background-color: var(--eco-surface-light);
    padding: 32px 0;
    min-height: 60vh;
}

/* Two-column layout: entries left + sidebar right */
body.tenant-ecoparque .ticketeraBody > .cont-1170 {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* --- Left column (selector-vista) --- */
body.tenant-ecoparque .selector-vista {
    flex: 1;
    min-width: 0;
}
body.tenant-ecoparque .selector-vista > h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--tenant-color-secondary);
}

/* Purchase notice banner — teal (matches Figma CABA resident notice) */
body.tenant-ecoparque .purchase-notice {
    background-color: #1AB2A5;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}
body.tenant-ecoparque .purchase-notice .material-symbols-rounded {
    color: #FFFFFF;
    font-size: 24px;
    flex-shrink: 0;
}
body.tenant-ecoparque .purchase-notice p {
    margin: 0;
    color: #FFFFFF;
}

/* Ticket type rows */
body.tenant-ecoparque .entradas-tipo .entrada {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 150ms ease;
}
body.tenant-ecoparque .entradas-tipo .entrada:hover {
    border-color: var(--eco-cta-blue);
}
body.tenant-ecoparque .entradas-tipo .entrada .Row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 2px;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
    font-size: 14px;
    color: var(--eco-muted);
    margin-bottom: 0;
}

/* Counter buttons */
body.tenant-ecoparque .contador {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .contador button {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}
body.tenant-ecoparque .contador button:hover {
    background-color: var(--eco-cta-blue-hover);
}
body.tenant-ecoparque .contador span,
body.tenant-ecoparque .contador .cantidad {
    font-size: 16px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    color: var(--tenant-color-secondary);
}

/* --- Right sidebar --- */
body.tenant-ecoparque .sidebar-resumen {
    flex: 0 0 340px;
}
body.tenant-ecoparque .sidebar-resumen .column-sticky {
    position: sticky;
    top: 20px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.tenant-ecoparque .sidebar-resumen h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .sidebar-resumen .seleccion {
    padding: 16px 0;
    border-bottom: 1px dashed var(--eco-input-border);
    margin-bottom: 16px;
    color: var(--eco-muted);
    font-size: 14px;
}
body.tenant-ecoparque .sidebar-resumen .box-bottom {
    padding-top: 8px;
}
body.tenant-ecoparque .sidebar-resumen .box-bottom h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
body.tenant-ecoparque .sidebar-resumen .row-total {
    font-weight: 700;
    font-size: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--eco-input-border);
    margin-top: 8px;
}
body.tenant-ecoparque .sidebar-resumen .btn-primary {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
}
body.tenant-ecoparque .sidebar-resumen .btn-outline-primary {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
}

/* Also used as sidebar-pago on payment pages */
body.tenant-ecoparque .sidebar-pago {
    flex: 0 0 340px;
}
body.tenant-ecoparque .sidebar-pago .column-sticky {
    position: sticky;
    top: 20px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   Visita detail page — /visitas/{id}
   HTML: .pagelayout > .seccion-establecimientos > .ficha-establecimiento
         .detalle-contenido > .layout > (.main + .sidebar)
   ============================================================================= */

body.tenant-ecoparque .ficha-establecimiento .top {
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    color: #FFFFFF;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
}
body.tenant-ecoparque .ficha-establecimiento .top h1 {
    color: #FFFFFF;
    font-size: 32px;
}
body.tenant-ecoparque .ficha-establecimiento .top .breadcrumb-item a,
body.tenant-ecoparque .ficha-establecimiento .top .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

/* Calendar date picker */
body.tenant-ecoparque .selector-header-azul {
    background-color: var(--eco-footer-dark) !important;
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
}
body.tenant-ecoparque .selector-header-azul h4,
body.tenant-ecoparque .selector-header-azul i {
    color: #FFFFFF;
}
body.tenant-ecoparque .selector-contenido-unificado {
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
}
body.tenant-ecoparque .fecha-card {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body.tenant-ecoparque .fecha-card:hover:not(.no-disponible) {
    background-color: rgba(161, 187, 46, 0.1);
}
body.tenant-ecoparque .fecha-card.seleccionada {
    background-color: var(--tenant-color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--tenant-color-primary) !important;
}
body.tenant-ecoparque .fecha-card.seleccionada * {
    color: #FFFFFF !important;
}
body.tenant-ecoparque .dia-numero.numero-seleccionado {
    background-color: var(--tenant-color-primary);
    color: #FFFFFF;
    border-radius: 50%;
}

/* Monthly grid calendar (CalendarStyle = MonthlyGrid) */
body.tenant-ecoparque .calendar-grid-wrapper {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .calendar-grid-body {
    flex: 1;
}
body.tenant-ecoparque .eco-calendar-date-header {
    background: #2563EB;
    color: #FFFFFF;
    text-align: center;
    padding: 12px 16px 14px;
}
body.tenant-ecoparque .eco-calendar-date-year {
    display: block;
    font-size: 13px;
    opacity: 0.8;
}
body.tenant-ecoparque .eco-calendar-date-day {
    display: block;
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
}
body.tenant-ecoparque .calendar-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
}
body.tenant-ecoparque .calendar-grid-month {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--eco-muted);
    padding: 0 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body.tenant-ecoparque .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 8px 32px;
}
body.tenant-ecoparque .calendar-grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    cursor: default;
    transition: background-color 150ms ease, color 150ms ease;
}
body.tenant-ecoparque .calendar-grid-cell.empty {
    visibility: hidden;
}
body.tenant-ecoparque .calendar-grid-cell.no-disponible {
    color: #CCC;
}
body.tenant-ecoparque .calendar-grid-cell.disponible {
    background-color: var(--tenant-color-primary);
    color: #FFFFFF;
    cursor: pointer;
}
body.tenant-ecoparque .calendar-grid-cell.disponible:hover {
    background-color: #8DA825;
}
body.tenant-ecoparque .calendar-grid-cell.seleccionado {
    background-color: var(--eco-footer-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(12, 89, 96, 0.3);
}

/* Entries section in detail */
body.tenant-ecoparque .seccion-entradas .entradas-header {
    background-color: var(--eco-footer-dark);
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    cursor: pointer;
}
body.tenant-ecoparque .seccion-entradas .entradas-header h4,
body.tenant-ecoparque .seccion-entradas .entradas-header i {
    color: #FFFFFF;
}
body.tenant-ecoparque .seccion-entradas .entradas-contenido {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
}
body.tenant-ecoparque .seccion-entradas .entrada-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--eco-input-border);
}
body.tenant-ecoparque .seccion-entradas .entrada-item:last-child {
    border-bottom: none;
}

/* Detail page two-column layout */
body.tenant-ecoparque .detalle-contenido .layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
body.tenant-ecoparque .detalle-contenido .layout > .main {
    flex: 1;
    min-width: 0;
}
body.tenant-ecoparque .detalle-contenido .layout > .sidebar {
    flex: 0 0 320px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Price display */
body.tenant-ecoparque .precio-desde h4 {
    font-size: 28px;
    font-weight: 800;
    color: var(--tenant-color-secondary);
}

/* Más información accordion */
body.tenant-ecoparque .mas-informacion-section .mud-expand-panel {
    border-radius: 8px !important;
    border: 1px solid var(--eco-input-border) !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
}

/* =============================================================================
   Guest checkout form — /checkout
   HTML: .ticketeraBody > .cont-1170 > .guest-checkout-form
   Already has good base styling from lines ~177-253 above.
   These additions handle the ticketera layout wrapper.
   ============================================================================= */

/* Guest form + sidebar: full two-column layout (matching TurnosCantidad) */
body.tenant-ecoparque .ticketeraBody > .cont-1170:has(.guest-checkout-form) {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    max-width: none;
    margin: 0;
}
body.tenant-ecoparque .ticketeraBody > .cont-1170:has(.guest-checkout-form) .guest-checkout-form {
    flex: 1;
    min-width: 0;
    margin: 0;
}
@media (max-width: 768px) {
    body.tenant-ecoparque .guest-email-row,
    body.tenant-ecoparque .guest-doc-row {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .ticketeraBody > .cont-1170:has(.guest-checkout-form) {
        flex-direction: column;
    }
}

/* =============================================================================
   Payment page — pago-vista wrapper + componente-de-pago
   ============================================================================= */

/* Override main.css gray background/padding on .pago-vista for ecoparque */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .pago-vista {
    background: transparent !important;
    padding: 0 !important;
}
body.tenant-ecoparque .pago-vista::after {
    display: none !important;
}

/* =============================================================================
   Payment page — componente-de-pago
   ============================================================================= */

body.tenant-ecoparque .componente-de-pago .box-tarjeta {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* Each accordion panel is its own white card */
body.tenant-ecoparque .componente-de-pago .mud-expansion-panels {
    background: transparent;
    box-shadow: none;
}
body.tenant-ecoparque .componente-de-pago .mud-expand-panel {
    background: #FFFFFF;
    border-radius: 8px !important;
    border: 1px solid var(--eco-input-border);
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
body.tenant-ecoparque .componente-de-pago .mud-expand-panel:last-child {
    margin-bottom: 0;
}
body.tenant-ecoparque .componente-de-pago .box-tarjeta h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
/* "Tarjetas habilitadas" label + card logos — give space before accordion */
body.tenant-ecoparque .tarjetas-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--eco-muted);
    margin-bottom: 10px;
}
body.tenant-ecoparque .componente-de-pago .tarjetas {
    margin-bottom: 20px;
}
/* Coupon not yet needed for ecoparque — hide everywhere */
body.tenant-ecoparque .panel-descuento {
    display: none;
}
/* Countdown timer not shown for ecoparque */
body.tenant-ecoparque .ticketeraTop .box-timer,
body.tenant-ecoparque .box-timer {
    display: none !important;
}
/* Hide "Datos del titular" heading — Figma shows fields inline without section label */
body.tenant-ecoparque .panel-pago .datos h5 {
    display: none;
}
/* Payment method accordion item — match ecoparque's softer corner radius */
body.tenant-ecoparque .panel-pago .mud-expand-panel-header {
    border-radius: 8px;
}
/* Confirmation screen overrides */
body.tenant-ecoparque .status-success .status-title {
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .status-success i.fa-circle-check {
    color: #28a745;
    font-size: 40px;
}
body.tenant-ecoparque .mp-return-home {
    color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
}

/* Zero-value reservation (Pago_Valorcero) */
body.tenant-ecoparque .componente-de-pago-gratuito .box-tarjeta {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    max-width: 560px;
}
body.tenant-ecoparque .componente-de-pago-gratuito .banner-reserva {
    background-color: rgba(161, 187, 46, 0.12);
    border: 1px solid var(--tenant-color-primary);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
body.tenant-ecoparque .componente-de-pago-gratuito .banner-reserva .material-symbols-rounded {
    color: var(--tenant-color-primary);
    font-size: 24px;
}

/* =============================================================================
   Mis Entradas + E-Ticket pages
   ============================================================================= */

body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
    padding: 24px 0;
}
body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero .breadcrumb-item a,
body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

/* MudTabs on mis-entradas */
body.tenant-ecoparque .cuenta-mis-entradas .mud-tabs .mud-tab.mud-tab-active {
    color: var(--eco-cta-blue) !important;
}
body.tenant-ecoparque .cuenta-mis-entradas .mud-tabs .mud-tab-slider {
    background-color: var(--eco-cta-blue) !important;
}

/* Ticket cards in list */
body.tenant-ecoparque .cuenta-mis-entradas .entrada {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 150ms ease;
}
body.tenant-ecoparque .cuenta-mis-entradas .entrada:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* E-Ticket page */
body.tenant-ecoparque .cuenta-eticket .entradas-hero {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
    padding: 24px 0;
}
body.tenant-ecoparque .cuenta-eticket .ticket {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    max-width: 480px;
    margin: 24px auto;
}
body.tenant-ecoparque .cuenta-eticket .ticket-header {
    background-color: var(--eco-hero-teal);
    padding: 20px;
    text-align: center;
}

/* =============================================================================
   MudBlazor component overrides
   ============================================================================= */

body.tenant-ecoparque .mud-snackbar {
    font-family: inherit;
}
body.tenant-ecoparque .mud-expansion-panels.rounded-panels .mud-expand-panel {
    border-radius: 8px !important;
    overflow: hidden;
}

/* =============================================================================
   Mobile responsive
   ============================================================================= */

@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeraBody > .cont-1170 {
        flex-direction: column;
    }
    body.tenant-ecoparque .sidebar-resumen,
    body.tenant-ecoparque .sidebar-pago {
        flex: unset;
        width: 100%;
    }
    body.tenant-ecoparque .detalle-contenido .layout {
        flex-direction: column;
    }
    body.tenant-ecoparque .detalle-contenido .layout > .sidebar {
        flex: unset;
        width: 100%;
    }
}

@media (max-width: 768px) {
    body.tenant-ecoparque .ticketeraTop .box-info {
        flex-direction: column;
        text-align: center;
    }
    body.tenant-ecoparque .selector-vista > h1 {
        font-size: 18px;
    }
    body.tenant-ecoparque .precio-desde h4 {
        font-size: 22px;
    }
}

/* --- Cómo llegar + Mapa placeholder sections --- */
body.tenant-ecoparque .eco-como-llegar {
    background-color: #FFFFFF;
    padding: 72px 0;
}
body.tenant-ecoparque .eco-como-llegar h2,
body.tenant-ecoparque .eco-mapa h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-como-llegar p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--eco-muted);
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-mapa {
    background-color: var(--eco-surface-light);
    padding: 72px 0;
}

/* ── VisitaDetalle (Ecoparque) ───────────────────────────────────────────── */

body.tenant-ecoparque .eco-detalle-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

body.tenant-ecoparque .eco-visita-detalle {
    background: var(--eco-surface-light);
}

/* Breadcrumb */
body.tenant-ecoparque .eco-detalle-breadcrumb {
    padding: 16px 0 8px;
}
body.tenant-ecoparque .eco-detalle-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--eco-muted);
    text-decoration: none;
}
body.tenant-ecoparque .eco-detalle-breadcrumb a:hover {
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-detalle-breadcrumb .material-symbols-rounded {
    font-size: 18px;
}

/* Hero */
body.tenant-ecoparque .eco-detalle-hero {
    width: 100%;
    height: 340px;
    background-color: #c8d8b0;
    background-size: cover;
    background-position: center 60%;
    margin-bottom: 40px;
}

/* Two-column layout */
body.tenant-ecoparque .eco-detalle-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    padding-bottom: 48px;
}
body.tenant-ecoparque .eco-detalle-main {
    min-width: 0;
}
body.tenant-ecoparque .eco-detalle-descripcion {
    font-size: 16px;
    line-height: 1.7;
    color: var(--eco-muted);
    margin-bottom: 32px;
}

/* Más información */
body.tenant-ecoparque .eco-mas-info {
    margin-bottom: 40px;
}
body.tenant-ecoparque .eco-mas-info h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-info-panels .mud-expand-panel {
    border: 1px solid #e2e6ea;
    border-radius: 8px !important;
    margin-bottom: 8px;
    background: #fff;
}
body.tenant-ecoparque .eco-info-panels .mud-expand-panel-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
}
body.tenant-ecoparque .eco-panel-icon {
    font-size: 20px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-panel-chevron {
    font-size: 20px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-panel-content {
    padding: 4px 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-panel-content p {
    margin-bottom: 4px;
}

/* Ubicación */
body.tenant-ecoparque .eco-ubicacion-section {
    margin-bottom: 40px;
}
body.tenant-ecoparque .eco-ubicacion-section h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-ubicacion-address,
body.tenant-ecoparque .eco-ubicacion-hours {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    color: var(--eco-muted);
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-ubicacion-address .material-symbols-rounded,
body.tenant-ecoparque .eco-ubicacion-hours .material-symbols-rounded {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-mapa iframe {
    width: 100%;
    border-radius: 8px;
    display: block;
    margin-top: 12px;
}

/* Sidebar */
body.tenant-ecoparque .eco-detalle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 80px;
}

/* CTA card */
body.tenant-ecoparque .eco-cta-card {
    background-color: var(--eco-footer-dark);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
}
body.tenant-ecoparque .eco-cta-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-cta-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
}
body.tenant-ecoparque .eco-cta-card .btn-primary {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    font-weight: 600;
    padding: 10px;
}

/* Sidebar mini-cards */
body.tenant-ecoparque .eco-visit-mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2e6ea;
    transition: box-shadow 0.15s;
}
body.tenant-ecoparque .eco-visit-mini-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.tenant-ecoparque .eco-visit-mini-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #c8d8b0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
body.tenant-ecoparque .eco-visit-mini-body {
    min-width: 0;
}
body.tenant-ecoparque .eco-visit-mini-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 2px;
}
body.tenant-ecoparque .eco-visit-mini-body small {
    font-size: 12px;
    color: var(--eco-muted);
}

/* Bottom info cards */
body.tenant-ecoparque .eco-detalle-info-cards {
    background: #fff;
    border-top: 1px solid #e2e6ea;
    padding: 32px 0 40px;
}
body.tenant-ecoparque .eco-info-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
body.tenant-ecoparque .eco-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--eco-surface-light);
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e2e6ea;
    transition: box-shadow 0.15s;
}
body.tenant-ecoparque .eco-info-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
}
body.tenant-ecoparque .eco-info-card .material-symbols-rounded {
    font-size: 28px;
    color: var(--eco-cta-blue);
    flex-shrink: 0;
    margin-top: 2px;
}
body.tenant-ecoparque .eco-info-card strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-info-card p {
    font-size: 12px;
    color: var(--eco-muted);
    margin: 0;
    line-height: 1.4;
}

/* Turno selector overlay */
body.tenant-ecoparque .eco-turno-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 500;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 60px;
}
body.tenant-ecoparque .eco-visita-detalle--blurred {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}
body.tenant-ecoparque .eco-turno-panel {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 900px;
}
body.tenant-ecoparque .eco-turno-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-turno-title .material-symbols-rounded {
    font-size: 22px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-info-bar-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: #e8f8f7;
    color: #0D8A80;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 24px;
}
body.tenant-ecoparque .eco-info-bar-inline .material-symbols-rounded {
    font-size: 16px;
}
body.tenant-ecoparque .eco-volver-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: var(--eco-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
body.tenant-ecoparque .eco-volver-link:hover {
    color: var(--eco-cta-blue);
}

/* "Otras visitas" below overlay */
body.tenant-ecoparque .eco-turno-otras {
    width: 100%;
    max-width: 900px;
    margin-top: 32px;
    color: #fff;
}
body.tenant-ecoparque .eco-turno-otras h6 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-turno-otras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
body.tenant-ecoparque .eco-turno-otra-card {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}
body.tenant-ecoparque .eco-turno-otra-card:hover {
    background: rgba(255,255,255,0.2);
}
body.tenant-ecoparque .eco-turno-otra-img {
    height: 80px;
    background-color: rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
}
body.tenant-ecoparque .eco-turno-otra-body {
    padding: 10px 12px;
}
body.tenant-ecoparque .eco-turno-otra-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
body.tenant-ecoparque .eco-turno-otra-body p {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-detalle-layout {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-detalle-sidebar {
        position: static;
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.tenant-ecoparque .eco-turno-otras-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px) {
    body.tenant-ecoparque .eco-detalle-hero {
        height: 200px;
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-turno-otras-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-turno-panel {
        padding: 20px 16px;
    }
}

/* ── Footer: ecoparque overrides ──────────────────────────────────────────── */

/* Remove the arrepentimiento button (not applicable for ecoparque) */
body.tenant-ecoparque #arrepentimiento {
    display: none !important;
}

/* Remove the GCBA social links + phone section from the footer top */
body.tenant-ecoparque footer .top {
    display: none !important;
}

/* ── Header: yellow underline per Figma ───────────────────────────────────── */

body.tenant-ecoparque .HeaderSitePublic {
    border-bottom: 3px solid var(--tenant-color-primary);
}

/* ── EcoEventosCalendario (monthly grid for ticketera eventos) ────────────── */

body.tenant-ecoparque .calendar-grid-wrapper {
    margin-top: 1.5rem;
}

body.tenant-ecoparque .calendar-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

body.tenant-ecoparque .calendar-grid-month {
    font-weight: 700;
    font-size: 1rem;
    text-transform: capitalize;
    color: #282213;
}

body.tenant-ecoparque .calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

body.tenant-ecoparque .calendar-grid-header span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    padding: 4px 0;
}

body.tenant-ecoparque .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding-bottom: 32px;
}

body.tenant-ecoparque .calendar-grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: default;
    transition: background 0.15s;
}

body.tenant-ecoparque .calendar-grid-cell.disponible {
    background: #A1BB2E;
    color: #fff;
    cursor: pointer;
}

body.tenant-ecoparque .calendar-grid-cell.disponible:hover {
    background: #8aa525;
}

body.tenant-ecoparque .calendar-grid-cell.seleccionado {
    background: #1455CE;
    color: #fff;
}

body.tenant-ecoparque .calendar-grid-cell.no-disponible {
    color: #ccc;
}

body.tenant-ecoparque .calendar-grid-cell.empty {
    visibility: hidden;
}

/* Calendar + time-slot side by side */
body.tenant-ecoparque .eco-calendar-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

/* No date selected: calendar centred, no empty white right half */
body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) {
    justify-content: center;
}
body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) .calendar-grid-wrapper {
    flex: 0 0 auto;
    max-width: 320px;
    min-width: 0;
}

/* Date selected: calendar fixed left, slots fill right */
body.tenant-ecoparque .eco-calendar-row.eco-date-selected .calendar-grid-wrapper {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 0;
}

body.tenant-ecoparque .eco-calendar-row .eco-horarios-dia {
    flex: 1;
    min-width: 200px;
    margin-top: 0;
}

/* Time-slot panel — transparent on dark page background */
body.tenant-ecoparque .eco-horarios-dia {
    background: transparent;
    padding: 0 8px;
}

body.tenant-ecoparque .eco-horarios-fecha-label {
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

body.tenant-ecoparque .eco-horarios-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.tenant-ecoparque .eco-horario-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 12px 0;
}

body.tenant-ecoparque .eco-horario-hora {
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Calendar legend */
body.tenant-ecoparque .calendar-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}

body.tenant-ecoparque .cal-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

body.tenant-ecoparque .cal-dot.disponible  { background: #A1BB2E; }
body.tenant-ecoparque .cal-dot.seleccionado { background: #1455CE; }
body.tenant-ecoparque .cal-dot.agotado     { background: #6c757d; }

/* Date + tabs on same row */
body.tenant-ecoparque .eco-horarios-top-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-horarios-top-row .eco-horarios-fecha-label {
    font-weight: 700;
    font-size: 15px;
    color: #FFFFFF;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Time-slot tabs */
body.tenant-ecoparque .eco-horarios-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-horarios-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
body.tenant-ecoparque .eco-horarios-tab.active {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* 2-col info cards variant for detalle page */
body.tenant-ecoparque .eco-info-cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 575px) {
    body.tenant-ecoparque .eco-info-cards-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* === V2 additions === */

/* --- Footer cleanup --- */
body.tenant-ecoparque footer .social-links,
body.tenant-ecoparque footer .phones,
body.tenant-ecoparque footer .redes-sociales,
body.tenant-ecoparque footer ul.social,
body.tenant-ecoparque footer .footer-social { display: none !important; }

/* --- Info card colors --- */
body.tenant-ecoparque .eco-info-card--yellow { background: #F5C400; color: #1a1a2e; border-color: #F5C400; }
body.tenant-ecoparque .eco-info-card--yellow .material-symbols-rounded { color: #1a1a2e; }
body.tenant-ecoparque .eco-info-card--teal { background: #2DC7B7; color: #fff; border-color: #2DC7B7; }
body.tenant-ecoparque .eco-info-card--teal .material-symbols-rounded { color: #fff; }
body.tenant-ecoparque .eco-info-card--blue { background: #1B9BC2; color: #fff; border-color: #1B9BC2; }
body.tenant-ecoparque .eco-info-card--blue .material-symbols-rounded { color: #fff; }
body.tenant-ecoparque .eco-info-card--dark { background: #6B7280; color: #fff; border-color: #6B7280; }
body.tenant-ecoparque .eco-info-card--dark .material-symbols-rounded { color: #fff; }
body.tenant-ecoparque .eco-info-card--yellow strong,
body.tenant-ecoparque .eco-info-card--yellow p { color: #1a1a2e; }
body.tenant-ecoparque .eco-info-card--teal strong,
body.tenant-ecoparque .eco-info-card--teal p,
body.tenant-ecoparque .eco-info-card--blue strong,
body.tenant-ecoparque .eco-info-card--blue p,
body.tenant-ecoparque .eco-info-card--dark strong,
body.tenant-ecoparque .eco-info-card--dark p { color: inherit; }

/* --- Calendar selector page (EcoTicketeraSeleccion) --- */
body.tenant-ecoparque .eco-selector-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}
body.tenant-ecoparque .eco-selector-wrapper {
    background: url('/img/ecoparque/swans.png') center/cover no-repeat;
    min-height: 500px;
    position: relative;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.tenant-ecoparque .eco-selector-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #002733 0%, rgba(0,39,51,0.75) 100%);
}
body.tenant-ecoparque .eco-selector-wrapper > * { position: relative; z-index: 1; width: 100%; }
body.tenant-ecoparque .eco-selector-header {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    padding: 0 20px;
}
body.tenant-ecoparque .eco-selector-header p {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-selector-info-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
}
body.tenant-ecoparque .eco-selector-calendar-wrap {
    max-width: 900px;
    margin: 0 auto;
}
body.tenant-ecoparque .eco-selector-volver {
    display: block;
    text-align: center;
    color: #aaa;
    font-size: 14px;
    margin-top: 16px;
    text-decoration: none;
}
body.tenant-ecoparque .eco-selector-volver:hover { color: #fff; text-decoration: underline; }
body.tenant-ecoparque .eco-selector-otras-visitas {
    padding: 40px 0;
    background: #fff;
}
body.tenant-ecoparque .eco-selector-otras-visitas h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Outer card is transparent — only the calendar grid gets a white card */
body.tenant-ecoparque .eco-selector-wrapper .selector-funciones-actividad {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    max-width: 720px;
    margin: 0 auto;
}
/* The eco-selector-header already provides the "Seleccioná una fecha" heading —
   hide the duplicate header-azul banner inside the calendar card */
body.tenant-ecoparque .eco-selector-wrapper .selector-header-azul {
    display: none;
}

/* --- Checkout date bar refinement (paso 2/3/4) --- */
body.tenant-ecoparque .ticketeraTop .txt p:not(.fecha-funcion) { display: none; }
body.tenant-ecoparque .ticketeraTop img.img-evento,
body.tenant-ecoparque .ticketeraTop .img-evento { display: none !important; }
/* Show short date format "Viernes 6 de abril", hide full date+time */
body.tenant-ecoparque .ticketeraTop .txt > span:not(.fecha-funcion-date) { display: none !important; }
body.tenant-ecoparque .ticketeraTop .txt .fecha-funcion-date { display: inline; }

/* --- Paso 2 CABA resident banner (extra selector) --- */
body.tenant-ecoparque .aviso-residente-caba {
    background: #1db9c8;
    color: #fff;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

/* --- Confirmation page --- */
body.tenant-ecoparque .compra-exitosa-container {
    text-align: center;
    max-width: 600px;
    margin: 60px auto;
    padding: 0 20px;
}
body.tenant-ecoparque .compra-exitosa-check {
    color: #28a745;
    font-size: 64px;
    margin-bottom: 20px;
}