@import '_content/Creapptivo.Commerce.Ui/Creapptivo.Commerce.Ui.6x8mlnmx36.bundle.scp.css';

/* /Components/Layout/Hoja.razor.rz.scp.css */
/*
    Con los tokens del kit (README §6): crema de los boletos, tinta sobre crema, radio de tarjeta.

    Las pantallas que el kit no diseña —pago, «tus boletos», pago de prueba, «no encontrado»— las
    viste esta hoja con esos tokens (decisión del PO, 2026-09-30). A los componentes de Radzen se les
    reasignan sus variables en vez de pisar sus selectores: los colores llegan solos a cada
    componente y no hay que ganarle en especificidad a cada uno.
*/
.ccp-hoja-marco[b-lfgnn5hb8w] {
    padding: 0 0 88px;
}

.ccp-hoja[b-lfgnn5hb8w] {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 22px;
    background: var(--v-cream);
    color: var(--pt-ink-body);
    box-shadow: var(--v-sh);
    --rz-text-color: var(--pt-ink-body);
    --rz-text-title-color: var(--pt-ink);
    --rz-text-secondary-color: var(--pt-muted);
    --rz-card-border-radius: 14px;
}

    /* Los títulos, con la letra de títulos del sitio. */
    .ccp-hoja[b-lfgnn5hb8w]  :is(h2, h3, .rz-text-h5, .rz-text-h6) {
        font-family: var(--pt-display);
        font-weight: 800;
    }

    /*
        🔴 **El amarillo es solo para acciones de compra** (regla 1 del kit): «Apartar y pagar» y el
        pago. Se marca botón por botón con `ccp-accion-compra`, nunca por tipo de botón, para que un
        «Reintentar» o un «Dar por pagada» no se vuelvan amarillos por accidente. Es el mismo botón
        que «Continuar al pago» del kit (`.bt-pay`).
    */
    .ccp-hoja[b-lfgnn5hb8w]  .ccp-accion-compra {
        --rz-primary: var(--pt-accent);
        --rz-primary-dark: var(--pt-accent-edge);
        --rz-primary-darker: var(--pt-accent-edge);
        --rz-on-primary: var(--pt-ink);
        min-height: 52px;
        padding: 0 28px;
        border: 2px solid var(--pt-accent-edge);
        border-radius: 999px;
        box-shadow: 0 4px 0 var(--pt-accent-edge);
        color: var(--pt-ink);
        font-family: var(--pt-display);
        font-size: 17px;
        font-weight: 800;
    }

@media (max-width: 767px) {
    .ccp-hoja-marco[b-lfgnn5hb8w] {
        padding-bottom: 56px;
    }

    .ccp-hoja[b-lfgnn5hb8w] {
        padding: 20px 16px;
    }
}
/* /Components/Layout/StorefrontLayout.razor.rz.scp.css */
/*
    Aviso del propio Blazor cuando cae el circuito. Es HTML del marco y no un componente: si el
    circuito cayó, es lo único que sigue en pie para decírselo a quien está usando la pantalla.

    Nace oculto y lo enseña el propio Blazor. Sin esta regla se ve siempre, y quien entra a comprar
    lee que ocurrió un error que no ocurrió.

    Es lo único de este marco con CSS aislado. Lo demás es el cascarón del sitio del parque y lleva
    sus clases globales tal cual (US-062): el aislamiento reescribiría sus selectores. La cabecera y
    el pie propios de US-054, que vivían aquí, los sustituyó el del kit.
*/
#blazor-error-ui[b-74l2zmfl33] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #2b1a0d;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-74l2zmfl33] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/TituloDePagina.razor.rz.scp.css */
/*
    El header del sitio va en posición absoluta sobre lo que haya debajo: sin héroe, este espacio es
    lo que evita que tape el título. Barra superior (36 px) más la altura del header, que mide
    `pt-shell.js` en --v-head; la reserva es la misma que usa la hoja del kit en el héroe.
*/
.ccp-titulo-de-pagina[b-jtuvbfpzi1] {
    padding: calc(36px + var(--v-head, 90px) + 32px) 0 8px;
}

    .ccp-titulo-de-pagina .v-head[b-jtuvbfpzi1] {
        margin-bottom: 28px;
    }