/* Base Coccoa de las páginas públicas de compra (evento, confirmación,
checkout, respuestas de pago, tienda y producto).
Va DESPUÉS de tokens.css y ANTES del CSS propio de la página y de la marca
(public/_brand_styles.html). Todo lo de aquí usa :where() para quedar con
especificidad 0: el CSS de marca anterior (custom_css) y el de cada página
le ganan siempre, y un tema nuevo entra por las variables --c-*.
Sin tema = base Coccoa (landing). Con tema = las mismas reglas con los --c-*
del tema. Nunca se aplica al dashboard ni a los checkouts de terceros (Bold,
ePayco, Wompi, Mercado Pago), y los QR quedan siempre negro sobre blanco. */
/* body y títulos con el peso de su elemento (0,0,1): le ganan por orden al reboot de
Bootstrap / landing/css/styles.css que algunas páginas de compra siguen cargando
(body { font-family; color; background } y h1-h6 en Newsreader). */
body:where(.cc-public) {
margin: 0;
min-height: 100vh;
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--c-font);
-webkit-font-smoothing: antialiased;
}
:where(.cc-public) [hidden] { display: none !important; }
/* Sin Bootstrap (confirmación, envío) width:100% + padding desbordaría a 390 px. */
:where(.cc-public), :where(.cc-public) *, :where(.cc-public) *::before, :where(.cc-public) *::after {
box-sizing: border-box;
}
:where(.cc-public) :focus-visible {
outline: 2px solid var(--c-pink);
outline-offset: 2px;
}
:where(.cc-public) :is(h1, h2, h3, h4, h5, h6), :where(.cc-public .cc-heading) {
font-family: var(--c-font-heading);
text-transform: var(--c-heading-transform);
letter-spacing: var(--c-heading-tracking);
color: var(--c-heading);
text-shadow: var(--c-heading-shadow);
}
/* ── Fondo de página ─────────────────────────────────────────────────────
como primer hijo de . Cada página da su fondo por defecto con
--cc-bg-default, --cc-blur-default, --cc-overlay-default y
--cc-media-opacity-default (p. ej. la compra de evento: el flyer tenue sobre
el color de la base). Un tema que define fondo emite --c-page-* y gana. */
:where(.cc-bg) {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
background: var(--c-bg);
}
:where(.cc-bg__media) {
position: absolute;
inset: calc(-2 * var(--c-page-blur, var(--cc-blur-default, 0px)));
background: var(--c-page-bg, var(--cc-bg-default, none));
background-size: cover;
background-position: center;
filter: blur(var(--c-page-blur, var(--cc-blur-default, 0px)));
opacity: var(--c-page-media-opacity, var(--cc-media-opacity-default, 1));
}
:where(.cc-bg)::after {
content: "";
position: absolute;
inset: 0;
background: var(--c-page-overlay, var(--cc-overlay-default, transparent));
}
/* ── Superficies ─────────────────────────────────────────────────────────── */
:where(.cc-surface) {
background: var(--c-surface);
color: var(--c-ink);
border: var(--c-border-width) var(--c-border-style) var(--c-border);
border-radius: var(--c-radius-card);
box-shadow: var(--c-shadow-card);
}
/* Tarjetas de vidrio: solo con data-brand-glass en (backdrop-filter con
cualquier valor vuelve a la tarjeta contenedor de lo position:fixed). */
:where(html[data-brand-glass] .cc-surface) {
-webkit-backdrop-filter: blur(var(--c-surface-blur));
backdrop-filter: blur(var(--c-surface-blur));
}
:where(.cc-muted) { color: var(--c-muted); }
:where(.cc-eyebrow-pub) {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--c-brand-ink);
}
:where(.cc-pill-pub) {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--c-radius-pill);
font-size: 13px;
font-weight: 600;
background: var(--c-hover);
color: var(--c-ink);
}
:where(.cc-pill-pub)::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-pink);
}
/* ── Botones ─────────────────────────────────────────────────────────────── */
:where(.cc-btn) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 calc(20px * var(--c-space));
border: 1px solid var(--c-btn-outline);
border-radius: var(--c-radius-control);
background: var(--c-btn-fill);
color: var(--c-btn-fill-ink);
font: inherit;
font-weight: 700;
font-size: 16px;
text-transform: var(--c-btn-transform);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, filter 0.15s ease;
}
:where(.cc-btn):hover { color: var(--c-btn-fill-ink); filter: brightness(0.92); }
:where(.cc-btn):disabled, :where(.cc-btn)[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
:where(.cc-btn--block) { width: 100%; }
:where(.cc-btn--ghost) {
background: transparent;
color: var(--c-ink);
border-color: var(--c-border);
}
:where(.cc-btn--ghost):hover { background: var(--c-hover); color: var(--c-ink); filter: none; }
/* ── Campos ──────────────────────────────────────────────────────────────── */
:where(.cc-input) {
width: 100%;
min-height: 46px;
padding: 10px 14px;
border: 1px solid var(--c-input-border);
border-radius: var(--c-radius-input);
background: var(--c-input-bg);
color: var(--c-ink);
font: inherit;
}
:where(.cc-input)::placeholder { color: var(--c-placeholder); }
:where(.cc-input):focus { outline: none; border-color: var(--c-border-hover); box-shadow: 0 0 0 4px var(--c-focus-ring); }
/* Selector de cantidad */
:where(.cc-qty) { display: inline-flex; align-items: center; gap: 8px; }
:where(.cc-qty__btn) {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--c-border);
border-radius: var(--c-qty-radius);
background: var(--c-qty-bg);
color: var(--c-qty-ink);
font-size: 20px;
font-weight: 700;
cursor: pointer;
}
:where(.cc-soldout) {
opacity: 0.6;
border-style: var(--c-soldout-border-style) !important;
}
/* ── Componente de estado (respuestas de pago) ───────────────────────────
*/
:where(.cc-status) {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: calc(14px * var(--c-space));
padding: calc(32px * var(--c-space)) calc(24px * var(--c-space));
}
:where(.cc-status__icon) {
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 30px;
background: var(--c-hover);
color: var(--c-ink);
}
:where(.cc-status--ok .cc-status__icon) { background: var(--c-ok-bg); color: var(--c-ok-ink); }
:where(.cc-status--warn .cc-status__icon) { background: var(--c-warn-bg); color: var(--c-warn-ink); }
:where(.cc-status--danger .cc-status__icon) { background: var(--c-danger-bg); color: var(--c-danger-ink); }
:where(.cc-status--pending .cc-status__icon) { background: var(--c-brand-soft); color: var(--c-brand-ink); }
:where(.cc-status__title) { margin: 0; font-size: calc(26px * var(--c-heading-scale)); font-weight: 800; line-height: 1.15; }
:where(.cc-status__text) { margin: 0; max-width: 46ch; color: var(--c-muted); font-size: 15.5px; line-height: 1.55; }
:where(.cc-status__actions) { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
:where(.cc-spinner-pub) {
width: 28px;
height: 28px;
border: 3px solid var(--c-border);
border-top-color: var(--c-brand-ink);
border-radius: 50%;
animation: cc-pub-spin 0.8s linear infinite;
}
@keyframes cc-pub-spin { to { transform: rotate(360deg); } }
/* ── Cabecera y pie mínimos (páginas que no usan el shell completo) ───────
Respuestas que se recargan solas y checkouts: sin consultas extra ni