/* ctxd-ficha-v3.css (= v2 + §9) · 5-nov-2026 · móvil de la ficha de evento (captura de Jose en iPhone, /events/planet-a-…)
   Va DESPUÉS de ctxd-movil-v3.css (misma precedencia ctxd-nav). Solo CSS, sin tocar nodos de React.
   1) Barra «Mi día»: ctxd-nav-v6 la fija a 80 px del borde (html[data-hx] .ctxd-bar{bottom:max(bajo,80px)}) pensando en
      la barra de pestañas, pero en /events/* esa barra está oculta (ctxd-movil-v3 §1) → flotaba a media pantalla con
      contenido por debajo. Ahora: pegada abajo si no hay barra fija debajo; encima de la pila (#ctxd-tab, #t3a-barra,
      #ctabar) si la hay (--ctxd-pila lo mide ctxd-movil-v3.js capas-home).
   2) Aviso «Avisos en iPhone» (.ctxd-av): c-ux-v1.css pone position:relative a todo <button> sin .absolute → la ×
      caía en su propia línea a la izquierda. Y estaba a 4.5rem del borde (misma pestaña fantasma) tapando la barra.
   3) «Armar mi Perfect Day con este evento» en 2 líneas (letra grande en iPhone): el icono quedaba suelto a la izquierda.
      Ahora el icono va en la línea del texto y el texto centrado. */

@media (max-width:1023.98px){
  /* 1) sin barra fija debajo (ficha de evento con la de compra oculta) */
  html[data-hx]:has(link[rel="canonical"][href*="ctxplorer.com/events/"]):not([data-ctxd-pila]) .ctxd-bar{
    bottom:env(safe-area-inset-bottom,0px)!important}
  /* con barra fija debajo: justo encima (la pila ya incluye su safe-area) */
  html[data-hx][data-ctxd-pila] .ctxd-bar{bottom:calc(var(--ctxd-pila) + 8px)!important}
}

/* 2) aviso de alertas */
.ctxd-av>button.x{position:absolute!important;top:6px!important;right:6px!important;left:auto!important;
  display:flex!important;align-items:center;justify-content:center;margin:0!important}
@media (max-width:767.98px){
  html:has(link[rel="canonical"][href*="ctxplorer.com/events/"]):not([data-ctxd-pila]) .ctxd-av{
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  html[data-ctxd-pila] .ctxd-av{bottom:calc(var(--ctxd-pila) + 12px)}
  /* con la barra «Mi día» visible, encima de ella (61 px) */
  html:has(link[rel="canonical"][href*="ctxplorer.com/events/"]):not([data-ctxd-pila]):has(.ctxd-bar:not([hidden])) .ctxd-av{
    bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
  html[data-ctxd-pila]:has(.ctxd-bar:not([hidden])) .ctxd-av{bottom:calc(var(--ctxd-pila) + 76px)}
  .ctxd-av{max-height:calc(100dvh - 140px);overflow-y:auto}

  /* 3) botón principal de la ficha: icono en la línea del texto */
  .t3a-acc .t3a-btn--pri{display:block;text-align:center;padding:13px 20px;text-wrap:balance}
  .t3a-acc .t3a-btn--pri .t3a-i{display:inline-block;vertical-align:-4px;margin-right:8px}
  .t3a-acc .t3a-btn--pri>span{display:inline}
}

/* 4) Hero de la ficha: en móvil c-ux-v1 baja el bloque del título (categoría, H1, recinto y fecha) debajo de la foto
      (padding-top 56.25vw + overlay en flujo), pero ctxd-movil-v3 le puso aspect-ratio:16/9 al contenedor, que tiene
      overflow:hidden → el título quedaba recortado e invisible. El contenedor vuelve a crecer con su contenido. */
@media (max-width:767.98px){
  article.min-h-screen>div.relative.w-full.overflow-hidden.mb-8{aspect-ratio:auto!important;height:auto!important}
}

@media (max-width:767.98px){
  /* 5) «Reseñas» del bundle vacía (su contenido lo oculta ctxd: las opiniones van en #t3a-rev) → caja gris de 50 px */
  #section-reviews:has(section[data-ctxd-hide]):not(:has(section:not([data-ctxd-hide]))){display:none}

  /* 6) hueco en blanco antes del pie (pb-16 del main + mt-16 del footer = 128 px) */
  footer.border-t.mt-16{margin-top:16px}

  /* 7) pie: «Descubre en México» a todo el ancho y en 2 columnas (antes dejaba vacía la columna izquierda) */
  footer div.grid.grid-cols-2>nav:has(a[href="/search?date=weekend"]){grid-column:1/-1}
  footer div.grid.grid-cols-2>nav:has(a[href="/search?date=weekend"])>ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:0}
  footer div.grid.grid-cols-2>nav:has(a[href="/search?date=weekend"])>ul>li{margin-top:0!important}

  /* 8) formulario de opinión: el botón del selector de archivos con el estilo de la web */
  #t3a-rev-media{font-size:14px;max-width:100%}
  #t3a-rev-media::file-selector-button{min-height:44px;padding:0 16px;margin-right:12px;border-radius:10px;
    border:1px solid var(--ctxd-border-strong,#d4d4d8);background:var(--ctxd-card,#fff);color:var(--fg,#18181b);font:inherit;font-weight:600}
}

/* 9) al añadir a «Mi día» salen a la vez el aviso breve «Agregado…» y el de alertas (.ctxd-av), uno encima del otro:
      mientras el de alertas está abierto, el breve no se pinta (la barra «Mi día» ya confirma el añadido) */
@media (max-width:767.98px){
  html:has(.ctxd-av) .ctxd-root>.ctxd-toast{visibility:hidden!important}
}

/* 10) guía «Qué hacer gratis hoy»: si hoy no hay planes el resumen trae 2 contadores, no 3 → sin columna vacía */
.gx-sum:not(:has(>a:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))!important}