/* ==========================================================================
   Listado público de eventos ([eventos] / [eventos_listado]).
   Hereda tipografía y colores del tema; solo define lo mínimo bajo --eventos-color-*.
   ========================================================================== */

.eventos-lista,
.evento-detalle,
.evento-inscripcion {
    --eventos-color-texto: var(--wp--preset--color--contrast, #1b1d29);
    --eventos-color-fondo: var(--wp--preset--color--base, #fff);
    --eventos-color-suave: color-mix(in srgb, var(--eventos-color-texto) 6%, var(--eventos-color-fondo));
    --eventos-color-linea: color-mix(in srgb, var(--eventos-color-texto) 12%, transparent);
    --eventos-color-tenue: color-mix(in srgb, var(--eventos-color-texto) 62%, var(--eventos-color-fondo));
    --eventos-color-exito: #16794a;
    --eventos-color-aviso: #8a5a00;
    --eventos-radio: 18px;
    color: var(--eventos-color-texto);
}

/* alignwide da más ancho en temas de bloques (ahí ya es margin auto), pero algunos temas clásicos lo
   estiran con márgenes negativos que en pantallas angostas se comen el margen lateral del tema: Astra
   pone -20px por debajo de 1200px y el texto queda pegado a la orilla. Estas vistas llevan formularios y
   botones: nunca deben salirse del contenedor. !important como el propio núcleo en los layouts restringidos. */
.eventos-lista.alignwide,
.evento-detalle.alignwide {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 100%;
}

.eventos-lista *,
.eventos-lista *::before,
.eventos-lista *::after,
.evento-detalle *,
.evento-detalle *::before,
.evento-detalle *::after {
    box-sizing: border-box;
}

/* --- Barra: conteo + categorías ------------------------------------------------ */

.eventos-lista__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.eventos-lista__conteo {
    margin: 0;
    color: var(--eventos-color-tenue);
    font-size: .95em;
}

.eventos-lista__limpiar {
    color: var(--eventos-color-texto);
    font-size: .95em;
    font-weight: 600;
}

.eventos-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Buscador y filtros ------------------------------------------------------- */

.eventos-filtros {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(20px, 3vw, 28px);
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--eventos-color-linea);
    border-radius: var(--eventos-radio);
    background: var(--eventos-color-suave);
}

/* Sin breakpoints: el campo crece mucho más que el botón; si no caben, el botón baja a su propia
   línea y ocupa todo el ancho. */
.eventos-filtros__busqueda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eventos-filtros__entrada {
    position: relative;
    display: flex;
    flex: 999 1 16rem;
}

.eventos-lista .eventos-filtros__entrada svg {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 20px;
    height: 20px;
    margin: 0;
    color: var(--eventos-color-tenue);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.eventos-lista .eventos-filtros input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 0 18px 0 50px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 999px;
    background: var(--eventos-color-fondo);
    color: var(--eventos-color-texto);
    font: inherit;
    font-size: 1rem;
}

.eventos-lista .eventos-filtros :is(input[type="search"], select):focus {
    border-color: var(--eventos-color-texto);
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 22%, transparent);
    outline-offset: 0;
}

.eventos-filtros__boton {
    flex: 1 1 auto;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}

.eventos-filtros__boton:hover {
    opacity: .88;
}

.eventos-filtros__boton:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

/* Panel plegable de filtros (details/summary nativos). */
.eventos-filtros__mas > summary {
    list-style: none;
}

.eventos-filtros__mas > summary::-webkit-details-marker {
    display: none;
}

.eventos-filtros__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 999px;
    background: var(--eventos-color-fondo);
    color: var(--eventos-color-texto);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s;
}

.eventos-filtros__toggle:hover {
    border-color: var(--eventos-color-texto);
}

.eventos-filtros__toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

.eventos-lista .eventos-filtros__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

/* Flecha que gira al abrir. */
.eventos-filtros__toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s;
}

.eventos-filtros__mas[open] > .eventos-filtros__toggle::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.eventos-filtros__contador {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
    font-size: 12px;
    font-weight: 700;
}

.eventos-filtros__panel {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--eventos-color-linea);
}

.eventos-filtros__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.eventos-filtros__campo {
    display: grid;
    flex: 1 1 12rem;
    gap: 4px;
    max-width: 18rem;
}

.eventos-filtros__campo > span {
    color: var(--eventos-color-tenue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.eventos-lista .eventos-filtros select {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 36px 0 14px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 12px;
    background-color: var(--eventos-color-fondo);
    color: var(--eventos-color-texto);
    font: inherit;
}

.eventos-filtros__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

.eventos-filtros__check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--eventos-color-texto);
}

.eventos-filtros__categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Radios con aspecto de píldora: el input queda accesible pero invisible. */
.eventos-filtros__categorias .eventos-chip {
    position: relative;
    cursor: pointer;
}

.eventos-filtros__categorias .eventos-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eventos-filtros__categorias .eventos-chip:has(input:checked) {
    border-color: var(--eventos-color-texto);
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
}

.eventos-filtros__categorias .eventos-chip:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

.eventos-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 999px;
    background: var(--eventos-color-fondo);
    color: var(--eventos-color-texto);
    font-size: .9em;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.eventos-chip:hover {
    border-color: var(--eventos-color-texto);
}

.eventos-chip[aria-current="page"] {
    border-color: var(--eventos-color-texto);
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
}

/* --- Cuadrícula y tarjeta ------------------------------------------------------ */

.eventos-lista__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: clamp(16px, 2.5vw, 28px);
}

.eventos-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--eventos-color-linea);
    border-radius: var(--eventos-radio);
    background: var(--eventos-color-fondo);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.eventos-card:hover {
    border-color: transparent;
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    transform: translateY(-3px);
}

.eventos-card:focus-within {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 55%, transparent);
    outline-offset: 3px;
}

.eventos-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--eventos-card-tono, 220) 70% 88%), hsl(calc(var(--eventos-card-tono, 220) + 40) 65% 78%));
}

.eventos-card__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.eventos-card:hover .eventos-card__imagen {
    transform: scale(1.04);
}

.eventos-card__inicial {
    color: hsl(var(--eventos-card-tono, 220) 45% 30%);
    font-size: clamp(56px, 8vw, 84px);
    font-weight: 800;
    line-height: 1;
    opacity: .55;
}

/* Hoja de calendario sobre la imagen */
.eventos-card__hoja {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 6px 10px 7px;
    border-radius: 12px;
    background: var(--eventos-color-fondo);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
    color: var(--eventos-color-texto);
    line-height: 1;
    text-align: center;
}

.eventos-card__hoja-dia {
    font-size: 24px;
    font-weight: 800;
}

.eventos-card__hoja-mes {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eventos-card__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
}

/* Categorías como píldoras discretas; reinicio explícito de ul/li porque temas y núcleo añaden sangría y viñetas. */
.eventos-lista .eventos-card__categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    list-style: none;
}

.eventos-lista .eventos-card__categoria {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--eventos-color-suave);
    color: var(--eventos-color-texto);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eventos-lista .eventos-card__categoria::marker {
    content: none;
}

.eventos-lista .eventos-card__categoria--mas {
    border: 1px solid var(--eventos-color-linea);
    background: transparent;
    color: var(--eventos-color-tenue);
}

.eventos-lista .eventos-card__titulo {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.25;
}

.eventos-card__enlace {
    color: inherit;
    text-decoration: none;
}

.eventos-card__enlace:focus {
    outline: none;
}

/* Toda la tarjeta es clicable. */
.eventos-card__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Reinicio explícito (y con más especificidad) de la sangría, viñetas y centrados que el navegador,
   el núcleo de WP o el tema aplican a ul/li/svg: fecha y lugar deben empezar al inicio del renglón,
   alineados con la categoría y el título. */
.eventos-lista .eventos-card__meta {
    display: grid;
    justify-items: start;
    gap: 6px;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    color: var(--eventos-color-tenue);
    font-size: .92em;
    text-align: start;
    list-style: none;
}

.eventos-lista .eventos-card__meta li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    text-align: start;
    list-style: none;
}

.eventos-lista .eventos-card__meta li::marker {
    content: none;
}

.eventos-lista .eventos-card__meta svg,
.eventos-lista .eventos-lista__vacio svg {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.eventos-card__extracto {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--eventos-color-tenue);
    font-size: .92em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.eventos-card__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--eventos-color-linea);
}

.eventos-card__precio {
    font-size: 1em;
    font-weight: 400;
}

/* Estado de inscripciones */
.eventos-estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--eventos-color-suave);
    color: var(--eventos-color-tenue);
    font-size: 12.5px;
    font-weight: 700;
}

.eventos-estado::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.eventos-estado--abierta {
    background: color-mix(in srgb, var(--eventos-color-exito) 12%, var(--eventos-color-fondo));
    color: var(--eventos-color-exito);
}

.eventos-estado--abierta::before {
    box-shadow: 0 0 0 0 currentColor;
    animation: eventos-pulso 2s infinite;
}

.eventos-estado--pronto {
    background: color-mix(in srgb, var(--eventos-color-aviso) 12%, var(--eventos-color-fondo));
    color: var(--eventos-color-aviso);
}

@keyframes eventos-pulso {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Paginación ------------------------------------------------------------------ */

.eventos-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-top: clamp(24px, 4vw, 40px);
}

.eventos-lista .eventos-paginacion__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eventos-paginacion__numeros li {
    margin: 0;
}

.eventos-paginacion__numero,
.eventos-paginacion__paso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 999px;
    color: var(--eventos-color-texto);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s;
}

a.eventos-paginacion__numero:hover,
.eventos-paginacion__paso:hover {
    border-color: var(--eventos-color-texto);
}

.eventos-paginacion__numero[aria-current="page"] {
    border-color: var(--eventos-color-texto);
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
}

.eventos-paginacion :is(a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

.eventos-paginacion__hueco {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--eventos-color-tenue);
}

/* Eventos pasados: presentes pero sin competir con los próximos. */
.eventos-card--finalizado .eventos-card__media {
    filter: grayscale(.9);
    opacity: .75;
}

.eventos-lista__pasados {
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: 20px;
    border-top: 1px solid var(--eventos-color-linea);
}

.eventos-lista__pasados > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--eventos-color-tenue);
    font-weight: 700;
    cursor: pointer;
}

/* --- Estado vacío ---------------------------------------------------------------- */

.eventos-lista__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: clamp(40px, 8vw, 72px) 24px;
    border: 1.5px dashed var(--eventos-color-linea);
    border-radius: var(--eventos-radio);
    color: var(--eventos-color-tenue);
    text-align: center;
}

/* Misma especificidad que la regla compartida de iconos y declarada después: gana el tamaño grande. */
.eventos-lista .eventos-lista__vacio svg {
    width: 44px;
    height: 44px;
    margin: 0 0 4px;
}

.eventos-lista__vacio p {
    margin: 0;
}

.eventos-lista__vacio-titulo {
    color: var(--eventos-color-texto);
    font-size: 1.15em;
    font-weight: 700;
}

.eventos-lista__vacio .eventos-chip {
    margin-top: 8px;
}

/* ==========================================================================
   Detalle del evento (estructura de Events Manager): título y botón con la imagen a la derecha;
   descripción a la izquierda y cuándo/dónde/inscripciones + mapa a la derecha; boletos abajo.
   Sin breakpoints fijos: las columnas se apilan solas cuando no caben.
   ========================================================================== */

.evento-detalle {
    display: grid;
    gap: clamp(24px, 4vw, 44px);
    color: var(--eventos-color-texto);
}

/* Solo la estructura propia; la descripción y el formulario conservan los márgenes del tema. */
.evento-detalle :is(h1, h2, h3, h4, p, ul):not(.evento-detalle__contenido *, .evento-inscripcion *) {
    margin: 0;
}

.evento-detalle .evento-icono {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.eventos-volver a {
    color: var(--eventos-color-tenue, currentColor);
    font-weight: 600;
    text-decoration: none;
}

.eventos-volver a:hover {
    color: var(--eventos-color-texto, currentColor);
}

/* --- Encabezado: título y botón a la izquierda, imagen a la derecha -------------------
   flex-wrap: lado a lado cuando caben; en pantallas angostas la imagen baja bajo el botón. */

.evento-detalle__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
}

.evento-detalle__cabecera-texto {
    display: grid;
    flex: 1 1 24rem;
    gap: 16px;
    min-width: 0;
}

/* --evento-imagen-ancho lo calcula la plantilla: hasta 1.25 × el ancho original (sin perder nitidez), tope 480 px. */
.evento-detalle__media {
    flex: 0 1 auto;
    width: var(--evento-imagen-ancho, auto);
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}

/* --- Banda con la imagen desenfocada de fondo ------------------------------------------
   La imagen ampliada y desenfocada da el color del evento sin que se note su resolución; la capa oscura
   (más densa del lado del texto) asegura el contraste del texto blanco con cualquier imagen.
   wrap-reverse: en pantallas angostas el póster queda arriba del título sin cambiar el orden del HTML. */

.evento-detalle__cabecera--con-imagen {
    --eventos-color-texto: #fff;
    --eventos-color-fondo: #16192b;
    --eventos-color-tenue: rgba(255, 255, 255, .8);
    --eventos-color-suave: rgba(255, 255, 255, .16);
    position: relative;
    isolation: isolate;
    flex-wrap: wrap-reverse;
    overflow: hidden;
    padding: clamp(24px, 5vw, 56px);
    border-radius: var(--eventos-radio);
    background: #16192b;
    color: var(--eventos-color-texto);
}

.evento-detalle .evento-detalle__fondo {
    position: absolute;
    inset: -10%;
    z-index: -2;
    width: 120%;
    max-width: none;
    height: 120%;
    object-fit: cover;
    filter: blur(48px) saturate(1.4);
}

.evento-detalle__cabecera--con-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(10, 12, 22, .86) 0%, rgba(10, 12, 22, .66) 60%, rgba(10, 12, 22, .45) 100%);
}

.evento-detalle__cabecera--con-imagen .evento-detalle__titulo {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.evento-detalle__cabecera--con-imagen .eventos-estado {
    background: var(--eventos-color-suave);
    color: var(--eventos-color-texto);
}

.evento-detalle .evento-detalle__imagen {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* --- Cuerpo: descripción a la izquierda, tarjetas + mapa a la derecha ------------------
   En el HTML el lateral va primero; row-reverse lo pinta a la derecha y, al apilarse, queda arriba. */

.evento-detalle__cuerpo {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 48px);
}

.evento-detalle__lateral {
    display: grid;
    flex: 1 1 20rem;
    gap: 14px;
    min-width: 0;
}

.evento-detalle__principal {
    display: grid;
    flex: 2 1 28rem;
    min-width: 0;
}

/* Mapa compacto bajo las tarjetas. */
.evento-detalle__mapa iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 280px;
    border: 0;
    border-radius: var(--eventos-radio);
    background: var(--eventos-color-suave);
}

/* --- Navegación de regreso dentro de la tarjeta del título ----------------------------
   Píldora translúcida sobre la banda (usa los tokens: blanca con imagen, gris sin imagen). */

.evento-detalle__navegacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 4px;
}

.evento-detalle a.evento-detalle__volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid color-mix(in srgb, var(--eventos-color-texto) 20%, transparent);
    border-radius: 999px;
    background: var(--eventos-color-suave);
    color: var(--eventos-color-texto);
    font-size: .9em;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background-color .15s, border-color .15s;
}

.evento-detalle a.evento-detalle__volver:hover {
    border-color: color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    background: color-mix(in srgb, var(--eventos-color-texto) 22%, transparent);
    color: var(--eventos-color-texto);
}

.evento-detalle a.evento-detalle__volver:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

.evento-detalle a.evento-detalle__volver .evento-icono {
    width: 16px;
    height: 16px;
}

/* Segundo camino (inscripción → listado): sin fondo para no competir con "Volver al evento". */
.evento-detalle a.evento-detalle__volver--secundario {
    padding: 0 4px;
    border-color: transparent;
    background: none;
    color: var(--eventos-color-tenue);
    backdrop-filter: none;
}

.evento-detalle a.evento-detalle__volver--secundario:hover {
    border-color: transparent;
    background: none;
    color: var(--eventos-color-texto);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Textos del encabezado --------------------------------------------------------- */

.evento-detalle .evento-detalle__categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.evento-detalle__categorias li {
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--eventos-color-suave);
    font-size: 13px;
    font-weight: 600;
}

/* Título protagonista: líneas balanceadas para que un nombre largo no deje una palabra suelta. */
.evento-detalle .evento-detalle__titulo {
    max-width: 30ch;
    color: inherit;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
    text-wrap: balance;
}

.evento-detalle__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--eventos-color-tenue);
    font-size: clamp(1.05em, 1.6vw, 1.2em);
}

.evento-detalle__resumen time::first-letter {
    text-transform: uppercase;
}

.evento-detalle__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 6px;
}

/* --- Botones (primario: ver boletos; secundario: calendario y cómo llegar) ---------
   Selectores con .evento-detalle a… para ganarle al subrayado y color de enlaces del tema. */

.evento-detalle a.evento-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s, transform .15s;
}

.evento-detalle a.evento-boton:active {
    transform: translateY(1px);
}

.evento-detalle a.evento-boton:focus-visible,
.eventos-volver a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

.evento-detalle a.evento-boton--primario {
    min-height: 56px;
    padding: 0 30px;
    font-size: 1.05em;
    border: 0;
    background: var(--eventos-color-texto);
    color: var(--eventos-color-fondo);
}

.evento-detalle a.evento-boton--primario:is(:hover, :focus-visible) {
    color: var(--eventos-color-fondo);
    opacity: .88;
}

.evento-detalle a.evento-boton--secundario {
    align-self: flex-start;
    min-height: 44px;
    margin-top: auto;
    padding: 0 18px;
    border: 1px solid var(--eventos-color-linea);
    background: var(--eventos-color-fondo);
    color: var(--eventos-color-texto);
    font-size: .95em;
    font-weight: 600;
}

.evento-detalle a.evento-boton--secundario:is(:hover, :focus-visible) {
    border-color: var(--eventos-color-texto);
    background: var(--eventos-color-suave);
    color: var(--eventos-color-texto);
}

.evento-detalle a.evento-boton--secundario .evento-icono {
    width: 18px;
    height: 18px;
}

.evento-detalle__precio {
    font-size: 1.15em;
    font-weight: 700;
}

/* Vista de inscripción: boleto elegido junto al título (tarjeta translúcida sobre la banda). */
.evento-detalle__boleto-elegido {
    display: grid;
    justify-self: start;
    gap: 4px;
    max-width: 100%;
    margin-top: 6px;
    padding: 16px 22px;
    border: 1px solid color-mix(in srgb, var(--eventos-color-texto) 22%, transparent);
    border-radius: 16px;
    background: var(--eventos-color-suave);
    backdrop-filter: blur(6px);
}

.evento-detalle__boleto-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--eventos-color-tenue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.evento-detalle .evento-detalle__boleto-etiqueta .evento-icono {
    width: 16px;
    height: 16px;
}

.evento-detalle__boleto-nombre {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
}

.evento-detalle__boleto-precio {
    font-size: 1.1em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.evento-detalle__boleto-precio small {
    color: var(--eventos-color-tenue);
    font-size: .8em;
    font-weight: 500;
}

.evento-detalle a.evento-detalle__boleto-cambiar {
    justify-self: start;
    margin-top: 4px;
    color: var(--eventos-color-texto);
    font-size: .95em;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.evento-detalle a.evento-detalle__boleto-cambiar:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eventos-color-texto) 45%, transparent);
    outline-offset: 2px;
}

/* --- Cuándo / Dónde / Inscripciones (apiladas junto a la imagen) ------------------ */

.evento-detalle__info {
    display: grid;
    gap: 12px;
}

.evento-detalle__bloque {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: var(--eventos-radio);
}

.evento-detalle .evento-detalle__bloque h2 {
    color: var(--eventos-color-tenue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.evento-detalle .evento-detalle__lineas {
    display: grid;
    gap: 12px;
    padding: 0;
    list-style: none;
}

.evento-detalle__lineas li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.evento-detalle__lineas li > span::first-letter {
    text-transform: uppercase;
}

.evento-detalle__lineas strong {
    display: block;
}

.evento-detalle__nota {
    display: block;
    color: var(--eventos-color-tenue);
    font-size: .95em;
}

.eventos-estado--finalizado,
.eventos-estado--sin_boletos {
    background: var(--eventos-color-suave);
    color: var(--eventos-color-tenue);
}

/* --- Acerca del evento ------------------------------------------------------------- */

/* Columna izquierda del cuerpo, junto a las tarjetas. */
.evento-detalle__descripcion {
    display: grid;
    gap: 14px;
}

.evento-detalle .evento-detalle__descripcion h2,
.evento-detalle .evento-detalle__boletos h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.evento-detalle__contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --- Boletos disponibles (destino del botón superior) ----------------------------- */

.evento-detalle__boletos {
    display: grid;
    gap: 18px;
    padding-top: clamp(24px, 4vw, 36px);
    border-top: 1px solid var(--eventos-color-linea);
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
}

.evento-detalle__boletos:focus {
    outline: none;
}

.evento-detalle .evento-boletos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
}

.evento-boleto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--eventos-color-linea);
    border-radius: 14px;
}

.evento-boleto--pronto {
    border-style: dashed;
    color: var(--eventos-color-tenue);
}

.evento-boleto__datos {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.evento-boleto__vigencia {
    color: var(--eventos-color-tenue);
    font-size: .9em;
}

.evento-boleto__precio {
    flex-shrink: 0;
    font-size: 1.2em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Pago abierto: aclaración bajo el "Desde $X". */
.evento-boleto__nota {
    display: block;
    color: var(--eventos-color-tenue);
    font-size: .65em;
    font-weight: 600;
    text-align: right;
}

/* Precio + botón "Inscribirme": se mantienen juntos y bajan bajo el nombre si no caben. */
.evento-boleto__compra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-left: auto;
}

.evento-detalle a.evento-boton--compacto {
    min-height: 44px;
    padding: 0 20px;
    font-size: .95em;
}

/* Vista de inscripción: a todo el ancho; el formulario se organiza en pasos + resumen fijo (inscripcion.css). */
.evento-detalle__inscripcion {
    display: grid;
    gap: 18px;
}

.evento-detalle .evento-detalle__inscripcion > h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

/* Salto suave del botón superior a los boletos, solo si el usuario no pidió reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.evento-detalle) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eventos-lista *,
    .eventos-lista *::before,
    .evento-detalle *,
    .evento-detalle *::before {
        animation: none !important;
        transition: none !important;
    }
}