/* ============================================================================
   sistema.css — tokens y base tipografica de la parte publica
   ----------------------------------------------------------------------------
   Se carga despues de main.css y antes del resto de nuestras hojas, asi que
   todo lo de aqui esta disponible para comun.css, header.css, event-grid.css,
   detalle.css, checkout.css, footer.css, banner.css y menuPerfil.css.

   --primary/--secondary/--footerColor/--footerTextColor los sigue inyectando
   el tenant desde el <style> en linea de layout.html, que va antes de
   cualquier <link> y usa !important: nada de aqui los pisa.

   --light/--dark/--text vienen de dark.css y se conservan porque los usan
   main.css, buscador.css, calendario.css, menuPerfil.css e inIframe.css.
   Ojo: estan invertidos respecto a lo que nombran (--light es el fondo de
   pagina, --dark el color de texto). Los tokens semanticos de abajo son los
   que hay que usar en codigo nuevo.
   ========================================================================= */

:root {
    /* --- marca: valores por defecto --------------------------------------- */
    /* El <style> del tenant en layout.html va dentro de th:if="${primaryColor
       != ''}", asi que un tenant sin color configurado dejaria estos tokens sin
       definir y cualquier var(--primary) seria invalido: botones sin fondo,
       pasos sin marcar, foco invisible. Estos valores solo actuan en ese caso;
       cuando el tenant si los inyecta gana su declaracion, que va con
       !important. */
    --primary: #17a5b8;
    --secondary: #7c7c7c;
    --footerColor: #1f2933;
    --footerTextColor: #ffffff;

    /* --- texto ------------------------------------------------------------ */
    --ink: #535353;         /* igual que --dark/--text heredados */
    --ink-muted: #6b7280;
    --ink-faint: #9a9a9a;

    /* --- superficies ------------------------------------------------------ */
    --surface: #ffffff;
    --surface-sunken: #fbfaf9;

    /* --- lineas ----------------------------------------------------------- */
    --line: #e5e7eb;
    --line-field: #d8d4cf;

    /* --- tipografia ------------------------------------------------------- */
    /* Bricolage Grotesque se usa a 600: es la que da voz propia a los
       titulos sin competir con Manrope, que se queda en la interfaz. */
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* --- radios ----------------------------------------------------------- */
    --r-sm: 4px;
    --r-md: 8px;
    --r-btn: 10px;
    --r-card: 12px;

    /* --- elevacion -------------------------------------------------------- */
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
    --shadow-raise: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .14);

    /* --- disponibilidad: una sola escala para todo el sitio --------------- */
    --ok-bg: #edf7ee;
    --ok-fg: #2c6e33;
    --ok-line: #cfe7d2;
    --warn-bg: #fdf4e3;
    --warn-fg: #8a5a10;
    --warn-line: #f2e0bb;
    --hot-bg: #fdeeea;
    --hot-fg: #a33a25;
    --hot-line: #f5d3ca;
    --out-bg: #f4f4f4;
    --out-fg: #757575;
    --out-line: #dcdcdc;

    /* --- medidas ---------------------------------------------------------- */
    --container: 1200px;
    --tap: 44px;            /* objetivo tactil minimo */
}

/* ============================================================================
   Contenedor
   Sustituye al padding en porcentaje que usaban .event-detail-top y compania,
   que en pantallas anchas estiraba la linea de texto.
   ========================================================================= */
.container {
    max-width: var(--container);
    padding-left: 24px;
    padding-right: 24px;
}

/* ============================================================================
   Distintivos de disponibilidad
   Antes habia dos paletas: .high/.medium/.low/.sold-out en detalle.css y
   .normal/.urgente/.agotado escritas en linea dentro de ventaCruzada.html.
   Ahora es una sola, y ventaCruzada usa los mismos nombres que genera el JS
   de eventoDetalle.
   ========================================================================= */
.disponibilidad-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    line-height: 18px;
    padding: 3px 10px;
    white-space: nowrap;
    width: fit-content;
}

.disponibilidad-badge.high {
    background-color: var(--ok-bg);
    border: 1px solid var(--ok-line);
    color: var(--ok-fg);
}

.disponibilidad-badge.medium {
    background-color: var(--warn-bg);
    border: 1px solid var(--warn-line);
    color: var(--warn-fg);
}

.disponibilidad-badge.low {
    background-color: var(--hot-bg);
    border: 1px solid var(--hot-line);
    color: var(--hot-fg);
}

.disponibilidad-badge.sold-out {
    background-color: var(--out-bg);
    border: 1px solid var(--out-line);
    color: var(--out-fg);
}

/* Marca de "ya esta en tu compra" en la venta cruzada. */
.en-cesta-badge {
    align-items: center;
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
    border-radius: 999px;
    color: var(--ok-fg);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    line-height: 18px;
    padding: 2px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.en-cesta-badge::before {
    content: "\2713";
    font-weight: 700;
}

/* ============================================================================
   Dialogos de SweetAlert
   La libreria no estaba tematizada, asi que su boton de confirmar salia con el
   morado que trae por defecto en medio de una interfaz que no tiene morado.
   Su regla usa :where(), asi que basta con igualar la clase.
   ========================================================================= */
.swal2-styled.swal2-confirm {
    background-color: var(--primary);
}

.swal2-styled.swal2-confirm:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ============================================================================
   Accesibilidad: foco visible y coherente en todo lo interactivo.
   Antes solo lo tenian los .share-menu-item.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}