/* ==========================================================================
   AZTECH METAL - TODOS LOS CONCIERTOS (eventos.html)

   Cartel primero, como Dice, con la identidad de la casa: negro, rojo,
   letra condensada, esquinas rectas. Página completa: la barra de búsqueda
   y los cuatro filtros plegados se quedan pegados bajo la cabecera.
   ========================================================================== */

.ex-pagina {
  --ex-tinta: #0A0A0C;
  --ex-hueso: #F0EBE3;
  --ex-hueso-2: rgba(240, 235, 227, .64);
  --ex-hueso-3: rgba(240, 235, 227, .4);
  --ex-linea: rgba(255, 255, 255, .09);
  --ex-caja: #121014;
  --ex-rojo: var(--red-fill, #D91F26);
  --ex-rojo-luz: var(--neon-crimson, #FF3B34);
  --ex-curva: cubic-bezier(.16, 1, .3, 1);
  background: var(--ex-tinta);
  color: var(--ex-hueso);
}
.nx-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --cab (alto de la cabecera del sitio) y --barra los mide eventos.js. */
.ex-app { --pega: calc(var(--cab, 0px) + var(--barra, 0px)); max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 3.2vw, 3rem) 3rem; }

/* --------------------------------------------------------------- cabeza */
.ex-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1rem, 2vw, 1.6rem) 0 .9rem; }
.ex-h1 { margin: 0; font: 400 clamp(2rem, 3.6vw, 3.1rem)/.95 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.ex-h1 em { font-style: normal; color: var(--ex-rojo-luz); }
.ex-sub { margin: .4rem 0 0; font-size: .9rem; color: var(--ex-hueso-2); }

.ex-vistas { display: flex; flex: none; border: 1px solid var(--ex-linea); }
.ex-vista {
  display: inline-flex; align-items: center; gap: .45rem; padding: .62rem .9rem;
  background: transparent; border: 0; color: var(--ex-hueso-2); cursor: pointer;
  font: 700 .72rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.ex-vista + .ex-vista { border-left: 1px solid var(--ex-linea); }
.ex-vista svg { width: 16px; height: 16px; }
.ex-vista:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.ex-vista[aria-pressed="true"] { background: var(--ex-rojo); color: #fff; }
.ex-vista:focus-visible, .ex-btn:focus-visible, .ex-dia:focus-visible, .ex-cal-nav:focus-visible { outline: 2px solid var(--ex-rojo-luz); outline-offset: 2px; }

/* ---------------------------------------------------- búsqueda y filtros */
.ex-barra {
  position: sticky; top: var(--cab, 0px); z-index: 40;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem 0;
}
/* El fondo cubre también el margen del contenedor. Sin backdrop-filter ni
   clip-path: el primero atraparía el panel fijo del teléfono y el segundo
   recortaría el panel que cuelga de la barra. */
.ex-barra::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(1rem, 3.2vw, 3rem)); z-index: -1; background: var(--ex-tinta); border-bottom: 1px solid var(--ex-linea); }
.ex-busca { position: relative; }
.ex-busca > svg { position: absolute; left: 1rem; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--ex-hueso-3); pointer-events: none; }
.ex-busca input {
  width: 100%; height: 48px; padding: 0 1rem 0 2.9rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0;
  background: var(--ex-caja); color: #fff; font: 400 1.02rem var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.ex-busca input::placeholder { color: var(--ex-hueso-3); }
.ex-busca input:focus { outline: none; border-color: var(--ex-rojo-luz); box-shadow: 0 0 0 3px rgba(255, 59, 52, .18); }
.ex-sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: .3rem 0;
  background: #161216; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 22px 50px rgba(0, 0, 0, .7);
}
.ex-sugerencias li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; align-items: baseline; gap: .8rem; padding: .6rem 1rem; cursor: pointer; }
.ex-sugerencias li:hover, .ex-sugerencias li[aria-selected="true"] { background: rgba(255, 59, 52, .12); }
.ex-sugerencias i { font: 700 .62rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-rojo-luz); }
.ex-sugerencias b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sugerencias small { color: var(--ex-hueso-3); font-size: .78rem; }

/* Las cuatro pastillas. Dicen el filtro o, si está puesto, lo que eligiste. */
.ex-filtros { display: flex; gap: .45rem; }
.ex-pildora {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; height: 48px; min-width: 7.6rem; max-width: 15rem; padding: 0 .85rem 0 1rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: var(--ex-hueso); cursor: pointer;
  font: 700 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
.ex-pildora span { overflow: hidden; text-overflow: ellipsis; }
.ex-pildora svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ex-curva); }
.ex-pildora:hover { border-color: rgba(255, 255, 255, .5); }
.ex-pildora.is-on { background: rgba(255, 59, 52, .14); border-color: var(--ex-rojo-luz); color: #fff; letter-spacing: .04em; }
.ex-pildora.is-abierta { border-color: #fff; }
.ex-pildora.is-abierta svg { transform: rotate(180deg); }
.ex-pildora:focus-visible, .ex-op:focus-visible, .ex-panel-x:focus-visible, .ex-limpiar:focus-visible { outline: 2px solid var(--ex-rojo-luz); outline-offset: 2px; }

/* El panel cuelga de la barra, alineado a la derecha, bajo las pastillas. */
.ex-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(34rem, 100%); max-height: calc(100dvh - var(--pega) - 1.5rem);
  background: #151116; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 70px rgba(0, 0, 0, .8);
  animation: ex-panel .28s var(--ex-curva);
}
@keyframes ex-panel { from { opacity: 0; transform: translateY(-8px); } }
.ex-panel-cab { display: none; }
.ex-panel-cuerpo { overflow-y: auto; padding: .4rem 1.1rem 1rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ex-rojo) transparent; }
.ex-bloque + .ex-bloque { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ex-linea); }
.ex-bloque-t { margin: .6rem 0 .5rem; font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ex-hueso-3); }
.ex-ops { display: grid; gap: .3rem; }
.ex-ops--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-op {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 42px; padding: .45rem .75rem; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid transparent; color: var(--ex-hueso);
  font: 600 .86rem/1.2 var(--font-data, 'Barlow', sans-serif);
  transition: background-color .15s, border-color .15s;
}
.ex-op span { display: grid; min-width: 0; }
.ex-op small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 500; color: var(--ex-hueso-3); }
.ex-op i { flex: none; font: 600 .72rem var(--font-data, 'Barlow', sans-serif); font-style: normal; color: var(--ex-hueso-3); font-variant-numeric: tabular-nums; }
.ex-op:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.ex-op.is-on { background: var(--ex-rojo); border-color: var(--ex-rojo); color: #fff; }
.ex-op.is-on i, .ex-op.is-on small { color: rgba(255, 255, 255, .85); }
.ex-op:disabled { opacity: .3; cursor: default; }
.ex-panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.1rem; border-top: 1px solid var(--ex-linea); }
.ex-btn--ver { min-height: 42px; padding: .5rem 1.2rem; font-size: .7rem; }
.ex-panel-x { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 1px solid rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.ex-panel-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Bajo la barra: la cuenta, quitar filtros y compartir la búsqueda. */
.ex-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .9rem 0 .2rem; scroll-margin-top: var(--pega); }
.ex-cuenta { margin: 0; font: 600 .8rem var(--font-data, 'Barlow', sans-serif); color: var(--ex-hueso-2); }
.ex-cuenta b { font: 400 1.35rem/1 var(--font-display); color: #fff; margin-right: .2rem; }
.ex-activos { display: flex; flex-wrap: wrap; gap: .35rem; }
.ex-limpiar { background: none; border: 0; padding: .3rem .2rem; color: var(--ex-hueso-2); cursor: pointer; font: 600 .74rem var(--font-data, 'Barlow', sans-serif); text-decoration: underline; text-underline-offset: 3px; }
.ex-limpiar:hover:not(:disabled) { color: #fff; }
.ex-limpiar:disabled { opacity: .3; cursor: default; text-decoration: none; }
.ex-compartir-busqueda {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .4rem .2rem;
  background: none; border: 0; color: var(--ex-hueso-2); cursor: pointer;
  font: 700 .68rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s;
}
.ex-compartir-busqueda svg { width: 15px; height: 15px; }
.ex-compartir-busqueda:hover { color: #fff; }
.ex-compartir-busqueda:focus-visible { outline: 2px solid var(--ex-rojo-luz); outline-offset: 2px; }

/* ----------------------------------------------------------- resultados */
.ex-mes + .ex-mes { margin-top: 1.4rem; }
/* El mes se pega justo bajo la barra. */
.ex-mes-t {
  position: sticky; top: var(--pega); z-index: 5; display: flex; align-items: baseline; gap: .55rem; margin: 0 0 1rem; padding: .7rem 0 .6rem;
  background: rgba(10, 10, 12, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  border-bottom: 1px solid var(--ex-linea);
}
.ex-mes-t span { color: var(--ex-rojo-luz); }
.ex-mes-t i { margin-left: auto; font: 600 .7rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-hueso-3); }

/* ------------------------------------------------------------- tarjetas */
.ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 1.3rem 1rem; }
.ex-card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0;
  background: var(--ex-caja); border: 1px solid var(--ex-linea);
  transition: transform .35s var(--ex-curva), border-color .25s, box-shadow .35s;
}
.ex-card:hover, .ex-card:focus-within { transform: translateY(-4px); border-color: rgba(255, 59, 52, .5); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .9); }
.ex-card-cara, .ex-fila-mini { position: relative; isolation: isolate; }
.ex-card-cara { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1418; }
/* El cartel completo; el marco se llena con el mismo cartel desenfocado (eventos.js pone --src). */
.ex-card-cara::before, .ex-fila-mini::before {
  content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--src) center / cover no-repeat;
  filter: blur(20px) brightness(.5) saturate(1.25); opacity: 0; transition: opacity .5s;
}
.ex-card-cara.lista::before, .ex-fila-mini.lista::before { opacity: 1; }
.ex-card-cara img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ex-curva); }
.ex-card:hover .ex-card-cara img { transform: scale(1.04); }
.ex-sin-cartel { position: absolute; inset: 0; display: grid; place-content: center; gap: .4rem; padding: 1rem; text-align: center; background: linear-gradient(160deg, #2a0606, #0d0a0b 70%); }
.ex-sin-cartel b { font: 400 1.8rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.ex-sin-cartel i { font: 600 .66rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-hueso-2); }
.ex-card-fecha, .ex-fila-fecha { display: grid; justify-items: center; line-height: 1; }
.ex-card-fecha { position: absolute; left: 0; top: 0; padding: .45rem .6rem .4rem; background: var(--ex-rojo); color: #fff; }
.ex-card-fecha b, .ex-fila-fecha b { font: 400 1.7rem/1 var(--font-display); }
.ex-card-fecha i, .ex-fila-fecha i { font: 700 .6rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.ex-card-fecha u, .ex-fila-fecha u { margin-top: .15rem; text-decoration: none; font: 600 .55rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ex-card-gratis { position: absolute; right: .5rem; top: .5rem; padding: .28rem .5rem; background: var(--ex-hueso); color: #111; font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.ex-card-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .35rem; padding: .85rem .9rem .95rem; min-width: 0; } /* minmax: el pie más ancho no estira la tarjeta */
.ex-card-t { margin: 0; font: 400 1.55rem/1.02 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.ex-card-t a { color: #fff; text-decoration: none; }
.ex-card-t a:hover { color: var(--ex-rojo-luz); }
.ex-card-t a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta lleva a la ficha */
.ex-card { position: relative; }
.ex-lugar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem; margin: .1rem 0 0; font: 600 .76rem/1.4 var(--font-data, 'Barlow', sans-serif); color: rgba(255, 255, 255, .86); }
.ex-lugar svg { width: 13px; height: 13px; fill: none; stroke: var(--ex-rojo-luz); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ex-lugar a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.ex-lugar a:hover { color: var(--ex-rojo-luz); text-decoration-color: currentColor; }
.ex-lugar i { font-style: normal; font-weight: 500; color: var(--ex-hueso-3); }
.ex-card-pie { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; padding-top: .65rem; border-top: 1px solid var(--ex-linea); }
.ex-precio { font: 700 .8rem var(--font-data, 'Barlow', sans-serif); color: #fff; white-space: nowrap; }
.ex-acciones { display: flex; align-items: center; gap: .35rem; }
.ex-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 32px; padding: .4rem .6rem;
  border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; cursor: pointer; text-decoration: none;
  font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.ex-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ex-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.ex-btn:active { transform: scale(.97); }
.ex-btn--rojo { background: var(--ex-rojo); border-color: var(--ex-rojo); }
.ex-btn--rojo:hover { background: var(--red-fill-hover, #F0272F); border-color: var(--red-fill-hover, #F0272F); }
.ex-btn--apagado { color: var(--ex-hueso-3); border-style: dashed; cursor: default; }
.ex-btn--icono { width: 32px; padding: 0; }
.ex-btn--icono svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- lista */
.ex-lista { list-style: none; margin: 0; padding: 0; }
.ex-fila {
  display: grid; grid-template-columns: 3.4rem 3rem minmax(0, 1.7fr) minmax(0, 1.25fr) minmax(0, .9fr) 6.6rem auto;
  align-items: center; gap: .9rem; padding: .7rem .6rem; border-bottom: 1px solid var(--ex-linea);
  transition: background-color .2s;
}
.ex-fila:hover { background: rgba(255, 255, 255, .03); }
.ex-fila-fecha { padding: .35rem 0; background: rgba(255, 59, 52, .12); border: 1px solid rgba(255, 59, 52, .35); color: #fff; }
.ex-fila-mini { display: block; width: 3rem; height: 3rem; overflow: hidden; background: #1a1418; }
.ex-fila-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ex-fila-que { display: grid; gap: .1rem; min-width: 0; }
.ex-fila-t { font: 400 1.3rem/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-decoration: none; }
.ex-fila-t:hover { color: var(--ex-rojo-luz); }
.ex-fila-que small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--ex-hueso-2); }
.ex-fila .ex-lugar { margin: 0; }
.ex-fila-gen { display: grid; font: 600 .74rem var(--font-data, 'Barlow', sans-serif); color: var(--ex-hueso-2); }
.ex-fila-gen i { font-style: normal; font-weight: 500; color: var(--ex-hueso-3); }

/* ----------------------------------------------------------- calendario */
.ex-cal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-top: .6rem; }
.ex-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.ex-cal-t { margin: 0; font: 400 clamp(1.7rem, 2.8vw, 2.4rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.ex-cal-t span { color: var(--ex-rojo-luz); }
.ex-cal-nav { display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.ex-cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ex-cal-nav:hover:not(:disabled) { border-color: #fff; }
.ex-cal-nav:disabled { opacity: .25; cursor: default; }
.ex-cal-sem, .ex-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ex-cal-sem span { padding-bottom: .35rem; font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ex-hueso-3); text-align: center; }
.ex-dia {
  position: relative; display: grid; align-content: start; gap: .25rem; min-height: 88px; padding: .4rem .45rem; overflow: hidden;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--ex-linea); color: var(--ex-hueso-3); text-align: left;
}
.ex-dia b { position: relative; z-index: 1; font: 400 1.15rem/1 var(--font-display); }
.ex-dia--vacio { background: none; border-color: transparent; }
.ex-dia--pasado { opacity: .4; }
.ex-dia--hoy { border-color: rgba(255, 255, 255, .45); color: #fff; }
.ex-dia--con { cursor: pointer; color: #fff; background: #1a1418; transition: border-color .2s, transform .2s var(--ex-curva); }
.ex-dia--con:hover { border-color: rgba(255, 59, 52, .7); transform: translateY(-2px); }
.ex-dia--con.is-on { border-color: var(--ex-rojo-luz); box-shadow: inset 0 0 0 1px var(--ex-rojo-luz); }
.ex-dia-foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; filter: grayscale(.3); transition: opacity .25s; }
.ex-dia--con:hover .ex-dia-foto, .ex-dia--con.is-on .ex-dia-foto { opacity: .45; }
.ex-dia-nombres { position: relative; z-index: 1; display: grid; gap: .1rem; min-width: 0; }
.ex-dia-nombres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .64rem/1.2 var(--font-data, 'Barlow', sans-serif); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.ex-dia-nombres em { font: 700 .6rem var(--font-data, 'Barlow', sans-serif); font-style: normal; color: var(--ex-rojo-luz); }
.ex-cal-nota { margin: .7rem 0 0; font-size: .8rem; color: var(--ex-hueso-3); }
.ex-cal-dia { position: sticky; top: calc(var(--pega) + 1rem); padding: 1rem 1.1rem; background: var(--ex-caja); border: 1px solid var(--ex-linea); }
.ex-cal-dia-t { margin: 0 0 .5rem; font: 400 1.5rem/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.ex-cal-dia-t b { font-weight: 400; color: var(--ex-rojo-luz); }
.ex-lista--dia .ex-fila { grid-template-columns: 3.4rem minmax(0, 1fr) auto; grid-template-areas: "f q a" "f l a"; row-gap: .25rem; padding-inline: 0; }
.ex-lista--dia .ex-fila-fecha { grid-area: f; }
.ex-lista--dia .ex-fila-que { grid-area: q; }
.ex-lista--dia .ex-lugar { grid-area: l; }
.ex-lista--dia .ex-acciones { grid-area: a; }
.ex-lista--dia .ex-fila-mini, .ex-lista--dia .ex-fila-gen, .ex-lista--dia .ex-precio { display: none; }
.ex-vacio-dia { margin: 0; color: var(--ex-hueso-2); font-size: .92rem; }

/* ---------------------------------------------------------------- vacío */
.ex-vacio { display: grid; justify-items: center; gap: .7rem; max-width: 30rem; margin: 3rem auto; text-align: center; }
.ex-vacio b { font: 400 2rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.ex-vacio p { margin: 0; color: var(--ex-hueso-2); }
.ex-sin-js { padding: 2rem 0; color: var(--ex-hueso-2); }
.ex-sin-js a { color: var(--ex-rojo-luz); }

/* ------------------------------------------------------ menú de compartir */
.ex-menu {
  position: fixed; z-index: 60; display: grid; min-width: 11rem; padding: .3rem 0;
  background: #161216; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 22px 50px rgba(0, 0, 0, .75);
}
.ex-menu a, .ex-menu button {
  display: block; width: 100%; padding: .65rem 1rem; background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--ex-hueso); text-decoration: none; font: 600 .8rem var(--font-data, 'Barlow', sans-serif);
}
.ex-menu a:hover, .ex-menu button:hover, .ex-menu a:focus-visible, .ex-menu button:focus-visible { background: rgba(255, 59, 52, .14); outline: none; }

/* ------------------------------------------------------------ movimiento */
@media (prefers-reduced-motion: no-preference) {
  .ex-card, .ex-fila { animation: ex-entra .55s var(--ex-curva) backwards; animation-delay: calc(var(--i, 0) * 32ms); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}
@keyframes ex-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ex-sube { from { transform: translateY(100%); } }
@keyframes ex-velo { from { opacity: 0; } }

/* ------------------------------------------------------------- teléfono */
@media (max-width: 1100px) {
  /* Buscador arriba; las cuatro pastillas abajo, del mismo ancho. */
  .ex-barra { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .ex-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-pildora { min-width: 0; max-width: none; }
  .ex-fila { grid-template-columns: 3.4rem 3rem minmax(0, 1.6fr) minmax(0, 1.2fr) 6rem auto; }
  .ex-fila-gen { display: none; }
}
@media (max-width: 860px) {
  .ex-cal { grid-template-columns: minmax(0, 1fr); }
  .ex-cal-dia { position: static; }
}
@media (max-width: 760px) {
  .ex-cabeza { flex-direction: column; align-items: stretch; gap: .8rem; padding-bottom: .6rem; }
  .ex-vistas { align-self: stretch; }
  .ex-vista { flex: 1; justify-content: center; padding: .6rem .4rem; }
  .ex-barra { padding: .55rem 0; }
  .ex-busca input { height: 44px; font-size: 1rem; }
  .ex-filtros { gap: .3rem; }
  .ex-pildora { height: 40px; padding: 0 .5rem 0 .6rem; gap: .25rem; font-size: .66rem; letter-spacing: .06em; }
  .ex-pildora svg { width: 12px; height: 12px; }
  .ex-compartir-busqueda span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* El panel sube desde abajo, con velo; el velo es el propio contenedor de filtros. */
  .ex-filtros.abierto::before { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .66); animation: ex-velo .25s; }
  .ex-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82dvh; border-width: 1px 0 0; animation: ex-sube .32s var(--ex-curva); }
  .ex-panel-cab { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem .2rem; }
  .ex-panel-cab b { font: 400 1.6rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
  .ex-panel-cuerpo { padding: 0 1rem .8rem; }
  .ex-panel-pie { padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
  .ex-btn--ver { flex: 1; }
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .6rem; }
  .ex-card-cuerpo { padding: .65rem .65rem .75rem; }
  .ex-card-t { font-size: 1.25rem; }
  .ex-card-pie .ex-acciones { width: 100%; }
  .ex-card-pie .ex-btn:not(.ex-btn--icono) { flex: 1; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; } /* "Boletos por anunciar" no cabía junto a compartir */
  .ex-fila { grid-template-columns: 3.2rem minmax(0, 1fr) auto; grid-template-areas: "f q a" "f l a"; row-gap: .25rem; padding-inline: 0; }
  .ex-fila-fecha { grid-area: f; }
  .ex-fila-que { grid-area: q; }
  .ex-fila .ex-lugar { grid-area: l; }
  .ex-fila .ex-acciones { grid-area: a; flex-direction: column; align-items: stretch; }
  .ex-fila-mini, .ex-fila-gen, .ex-fila .ex-precio { display: none; }
  .ex-dia { min-height: 54px; padding: .3rem; }
  .ex-dia-nombres span { display: none; }
  .ex-dia-nombres em { display: none; }
  .ex-dia--con::after { content: ""; position: absolute; left: .35rem; bottom: .35rem; width: 7px; height: 7px; background: var(--ex-rojo-luz); }
}