/* ============================================================
   TMLC · custom.css  — CSS personalizado consolidado del tema
   ------------------------------------------------------------
   Migrado desde Personalizar → CSS adicional para que el tema
   no dependa del Customizer. Cargado por functions.php
   (tmlc_estilos_personalizados) después de style.css.

   Ajustes vs. el CSS adicional original:
   - El bloque del hero mobile (#imagen_contenido_mobile) se
     adaptó a la imagen real <img> (Feature 3). El alto/recorte
     ahora lo maneja style.css.
   - La franja sólida de "agotadas" (.is-solid) vive en style.css
     y se controla por evento (Feature 2).
   ============================================================ */

/* Oculta formularios #1 y #2 del footer SOLO en la página 2828 */
#page-2828 #footer .form_1,
#page-2828 #footer .form_2,
#page-2828 #gform_wrapper_1,
#page-2828 #gform_wrapper_2 {
  display: none !important;
}

/* Opcional: si queda un espacio vacío, compacta el contenedor */
#page-2828 #footer #forms {
  gap: 0 !important;         /* si usas grid/flex con gap */
  margin: 0 !important;
  padding: 0 !important;
}

/* (Etapa 2) Los parches por ID de #page-2828 (Convocatoria) y #page-2733
   (Programa U Mayor) para ocultar el banner vacío y compensar el menú fijo
   se reemplazaron por la lógica de page.php (#header condicional) + la clase
   .sin-header en style.css. */

/* marquesina */

/* =========================================================
   HOME DESTACADO (TMLC) – IMÁGENES + BOTÓN (restaurado)
   Supuestos:
   - Desktop: 2000×720  => 25/9
   - Mobile:  729×521   => 729/521
   ========================================================= */

/* 1) Mostrar solo 1 imagen según breakpoint */
#contenido_destacado_home #imagen_contenido_home { display: block !important; }
#contenido_destacado_home #imagen_contenido_mobile { display: none !important; }

@media (max-width: 767px){
  #contenido_destacado_home #imagen_contenido_home { display: none !important; }
  #contenido_destacado_home #imagen_contenido_mobile { display: block !important; }
}

/* 2) Reset del alto/padding del tema (evita recortes) + imagen completa */
#contenido_destacado_home > #imagen_contenido_home{
  width: 100% !important;
  float: left;
  padding: 0 !important;
  height: auto !important;

  position: relative;
  overflow: hidden;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important; /* imagen completa */
  background-color: #000;             /* relleno si sobra espacio */
}

/* 3) Proporción fija (ya acordada) */
#contenido_destacado_home > #imagen_contenido_home{
  aspect-ratio: 25 / 9 !important;
}

/* 4) RESTAURAR BOTÓN: NO usar el .wrap global (1240px) dentro del hero */
#contenido_destacado_home #imagen_contenido_home .wrap,
#contenido_destacado_home #imagen_contenido_mobile .wrap{
  width: 100% !important;
  margin: 0 !important;
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  pointer-events: none; /* para que solo el link sea clickeable */
}

/* el H5 no debe empujar nada */
#contenido_destacado_home #imagen_contenido_home .wrap h5,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5{
  margin: 0 !important;
}

/* 5) Estética del botón tipo theme (pill negro + borde blanco + sombra) */
#contenido_destacado_home #imagen_contenido_home .wrap h5 a,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5 a{
  pointer-events: auto;
  display: inline-block;
  text-decoration: none;

  background: #000;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;

  /* tamaño “como theme”, pero responsive */
  padding: clamp(12px, 1.3vw, 18px) clamp(22px, 2.6vw, 44px);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1;

  /* sombra blanca estilo “sticker” */
  box-shadow: 6px 6px 0 #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover desktop (opcional, similar al resto del theme) */
@media (hover:hover){
  #contenido_destacado_home #imagen_contenido_home .wrap h5 a:hover,
  #contenido_destacado_home #imagen_contenido_mobile .wrap h5 a:hover{
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #fff;
  }
}

/* 6) Marquesina siempre debajo */
#contenido_destacado_home .marquesina{
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 0;
}
/* ===== ELIMINAR “BOTÓN FANTASMA” DEL TEMA + DEJAR 1 SOLO BOTÓN ===== */
#contenido_destacado_home #imagen_contenido_home .wrap h5,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#contenido_destacado_home #imagen_contenido_home .wrap h5 a,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5 a{
  /* reset duro de estilos del tema que “inflan” el botón */
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  border: 0 !important;

  /* por si el tema usa fondos o pseudo-elementos para el pill */
  background: transparent !important;
  padding: 0 !important;
}

/* Mata pseudo-elementos que suelen crear el pill grande */
#contenido_destacado_home #imagen_contenido_home .wrap h5 a::before,
#contenido_destacado_home #imagen_contenido_home .wrap h5 a::after,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5 a::before,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5 a::after{
  content: none !important;
  display: none !important;
}

/* ===== ESTILO FINAL (1 SOLO BOTÓN) ===== */
#contenido_destacado_home #imagen_contenido_home .wrap,
#contenido_destacado_home #imagen_contenido_mobile .wrap{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
  z-index: 2;
}

#contenido_destacado_home #imagen_contenido_home .wrap h5 a,
#contenido_destacado_home #imagen_contenido_mobile .wrap h5 a{
  pointer-events: auto;
  display: inline-block !important;
  text-decoration: none !important;

  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;

  padding: clamp(12px, 1.3vw, 18px) clamp(22px, 2.6vw, 44px) !important;
  font-size: clamp(14px, 1.2vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  box-shadow: 6px 6px 0 #fff !important;
}
/* Mobile: bajar el botón para no tapar texto */
@media (max-width: 767px){
  #contenido_destacado_home #imagen_contenido_mobile .wrap{
    align-items: flex-end !important;
    padding-bottom: 44px !important; /* ajusta 32–64px según necesites */
  }
}

/* Página Transparencia – estilos encapsulados */
.tmlc-transparencia{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px;
}

.tmlc-transparencia__title{
  margin: 0 0 10px 0;
}

.tmlc-transparencia__intro{
  margin: 0 0 22px 0;
  opacity: .9;
}

/* Acordeones */
.tmlc-transparencia details{
  display: block;
}

.t-acc{
  border: 1px solid rgba(17,35,55,.14);
  border-radius: 12px;
  background: #fff;
  margin: 0 0 12px 0;
  overflow: hidden;
}

.t-acc__sum{
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  position: relative;
}

.t-acc__sum::-webkit-details-marker{ display:none; }

.t-acc__sum::after{
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  opacity: .7;
}

.t-acc[open] > .t-acc__sum::after{
  content: "–";
}

/* Subacordeones (años / subvención) */
.t-sub{
  border-top: 1px solid rgba(17,35,55,.10);
  background: rgba(17,35,55,.03);
}

.t-sub__sum{
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  list-style: none;
  position: relative;
}

.t-sub__sum::-webkit-details-marker{ display:none; }

.t-sub__sum::after{
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  opacity: .7;
}

.t-sub[open] > .t-sub__sum::after{
  transform: translateY(-50%) rotate(90deg);
}

/* Listas de archivos */
.t-files{
  margin: 0;
  padding: 0 16px 14px 34px;
}

.t-files li{
  margin: 8px 0;
}

.t-files a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Descarga directa */
.t-direct{
  margin-top: 18px;
  padding: 16px;
  border: 1px dashed rgba(17,35,55,.25);
  border-radius: 12px;
  background: rgba(17,35,55,.02);
}

.t-direct__title{
  margin: 0 0 10px 0;
  font-size: 1.05em;
}

/* Imagen principal */
#contenido_single #contenido_general #content_principal > p.beethoven-programa{
  width: calc(100% + 534px) !important;
  max-width: none !important;
  margin-left: -534px !important;
  margin-right: 0 !important;
  margin-bottom: 24px !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

#contenido_single #contenido_general #content_principal > p.beethoven-programa picture,
#contenido_single #contenido_general #content_principal > p.beethoven-programa img{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

/* Texto debajo */
#contenido_single #contenido_general #content_principal > p.beethoven-programa ~ p{
  width: 960px !important;
  max-width: 960px !important;
  margin-left: -394px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Tablet y mobile: vuelve al flujo normal */
@media (max-width: 1240px){
  #contenido_single #contenido_general #content_principal > p.beethoven-programa{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }

  #contenido_single #contenido_general #content_principal > p.beethoven-programa ~ p{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px){
  #contenido_single #contenido_general #content_principal > p.beethoven-programa{
    margin-bottom: 16px !important;
  }
}

#header[style*="WEB_SLIDE_UM_US-scaled.jpg"] + #contenido_single #sidebar #plano > h3.circulo{
  display: none !important;
}

/* Ficha Artística: corregir título para todos los posts que tengan #elenco */
#elenco .titulo h4{
  color: #FFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: normal !important;
  margin-left: 28px !important;
  margin-bottom: 0 !important;
}


/* ================================================================
   BANNER DE EVENTOS - modo picture (single.php)
   - Desktop: alto fijo 640px, imagen llena el contenedor (cover)
   - Mobile: imagen mobile dicta el alto, ratio nativo sin recortes
   - Solo aplica a #header.header-picture-mode
   ================================================================ */

/* Contenedor */
#header.header-picture-mode {
    position: relative;
    width: 100%;
    float: left;
    height: 640px;            /* alto fijo en desktop */
    background: #000;
    background-image: none;
    background-size: auto;
    overflow: hidden;
}

/* La imagen llena el contenedor sin bandas (recorta minimo en bordes) */
#header.header-picture-mode .header-picture {
    display: block;
    width: 100%;
    height: 100%;
}

#header.header-picture-mode .header-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay con titulo + CTA, sobrepuesto y centrado */
#header.header-picture-mode #header_overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header.header-picture-mode #header_overlay .wrap {
    width: 92%;
    text-align: center;
}

/* Titulo escalable: de 24px en pantallas chicas a 70px en desktop */
#header.header-picture-mode #header_overlay h1.post_title {
    font-size: clamp(24px, 5.5vw, 70px);
    line-height: 1.15;
    margin-bottom: 18px;
}

/* En mobile: la imagen dicta el alto del contenedor, sin recortes */
@media (max-width: 767px) {
    #header.header-picture-mode {
        height: auto;
    }
    #header.header-picture-mode .header-picture img {
        height: auto;
        /* con height:auto el object-fit deja de tener efecto, la imagen
           toma su ratio nativo automaticamente */
    }
    #header.header-picture-mode #header_overlay h5 {
        font-size: 13px;
        padding: 10px 22px 10px 46px;
        background-position: 14px center;
        box-shadow: 4px 4px 0 #ffffff;
    }
    #header.header-picture-mode #header_overlay h5:hover {
        box-shadow: 6px 6px 0 #ffffff;
    }
}

/* ================================================================
   BANNER DE EVENTOS - modo picture con blur de extension (single.php)
   - Contenedor: altura responsiva basada en el alto natural de la
     imagen segun el ancho del viewport, con tope de 640px
   - Cuando se activa el tope, aparecen franjas SOLO laterales que
     se rellenan con una version blureada de la misma imagen
   - Mobile: imagen mobile dicta el alto, sin franjas, blur apagado
   - margin-top compensa el menu fijo (el theme NO usa spacer real)
   - z-index: 0 crea stacking context propio para que los hijos del
     banner queden detras del menu (z-index: 2) al hacer scroll
   - Solo aplica a #header.header-picture-mode
   ================================================================ */

/* Contenedor:
   --menu-h se calcula del CSS del #menu del theme:
   desktop: padding-top 22 + logo 50 + padding-bottom 22 = 94px
   mobile:  padding-top 14 + logo 40 + padding-bottom 14 = 68px */
#header.header-picture-mode {
    --menu-h: 94px;
    position: relative;
    z-index: 0;                /* stacking context propio */
    width: 100%;
    float: left;
    height: auto;              /* sobrescribe height:640px del original */
    margin-top: var(--menu-h); /* compensa el menu fijo del theme */
    background: #000;
    background-image: none;
    background-size: auto;
    overflow: hidden;
}

@media (max-width: 767px) {
    #header.header-picture-mode { --menu-h: 68px; }
}

/* Capa de fondo: la misma imagen blureada llena el contenedor.
   URLs vienen de las CSS vars que el single.php pasa inline. */
#header.header-picture-mode .header-bg-blur {
    /* Ya no se usa: con object-fit:cover la imagen llena el contenedor
       y no quedan franjas laterales que rellenar con blur. */
    display: none;
}

/* La imagen principal: altura responsiva con tope de 640px que
   activa las franjas laterales blureadas */
#header.header-picture-mode .header-picture {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

#header.header-picture-mode .header-picture img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    /* cover: bajo el punto de quiebre la imagen se ve completa a ancho
       total (alto = ancho/ratio); al llegar a max-height 640px se mantiene
       el alto y la imagen hace zoom recortando arriba/abajo en vez de
       dejar franjas laterales. El quiebre = 640 x (ancho/alto de la imagen). */
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
}

/* Overlay con titulo + CTA */
#header.header-picture-mode #header_overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header.header-picture-mode #header_overlay .wrap {
    width: 92%;
    text-align: center;
}

/* Titulo escalable: de 24px en pantallas chicas a 70px en desktop */
#header.header-picture-mode #header_overlay h1.post_title {
    font-size: clamp(24px, 5.5vw, 70px);
    line-height: 1.15;
    margin-bottom: 18px;
}

/* Toggle "Mostrar título" desactivado: se quita la capa oscura del overlay
   para que la imagen del banner se vea en su forma original. El botón
   "Compra tu entrada" (si existe) se mantiene visible encima. */
#header.header-picture-mode #header_overlay.sin-capa {
    background: transparent;
}

/* Toggle ACF "Mostrar título sobre el banner" desactivado: el H1 se oculta
   visualmente pero sigue en el DOM para SEO y lectores de pantalla. */
#header.header-picture-mode #header_overlay h1.post_title.tmlc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* En mobile: imagen mobile, alto natural, sin tope ni blur */
@media (max-width: 767px) {
    #header.header-picture-mode {
        height: auto;
    }
    #header.header-picture-mode .header-bg-blur {
        display: none;
    }
    #header.header-picture-mode .header-picture img {
        max-height: none;
    }
    #header.header-picture-mode #header_overlay h5 {
        font-size: 13px;
        padding: 10px 22px 10px 46px;
        background-position: 14px center;
        box-shadow: 4px 4px 0 #ffffff;
    }
    #header.header-picture-mode #header_overlay h5:hover {
        box-shadow: 6px 6px 0 #ffffff;
    }
}

/* FORM 12 - Dia del Patrimonio (pagina 3673) */

/* 1) Tokens del tema orbital - paleta negra */
body#page-3673 #gform_wrapper_12[data-form-theme="orbital"].gform-theme,
body#page-3673 [data-parent-form="12_0"] {
  --gf-color-primary: #222 !important;
  --gf-color-primary-rgb: 34, 34, 34 !important;
  --gf-color-primary-darker: #000 !important;
  --gf-color-primary-lighter: #444 !important;
  --gf-color-primary-contrast: #fff !important;
  --gf-ctrl-label-color-primary: #222 !important;
  --gf-ctrl-label-color-secondary: #222 !important;
}

/* 2) Wrapper */
body#page-3673 #gform_wrapper_12 {
  width: 100%;
  float: left;
  margin: 20px 0 60px 0;
}

/* 3) Titulo y descripcion */
body#page-3673 #gform_wrapper_12 .gform_heading {
  margin-bottom: 30px;
}
body#page-3673 #gform_wrapper_12 .gform_title {
  color: #222;
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
}
body#page-3673 #gform_wrapper_12 .gform_description {
  margin: 0;
}

/* 4) Forzar visibilidad de TODOS los labels y legends del form 12 */
body#page-3673 #gform_wrapper_12 .gfield_label,
body#page-3673 #gform_wrapper_12 .gform-field-label,
body#page-3673 #gform_wrapper_12 fieldset.gfield--type-radio legend,
body#page-3673 #gform_wrapper_12 fieldset.gfield--type-checkbox legend,
body#page-3673 #gform_wrapper_12 fieldset.gfield--type-name legend {
  display: block !important;
  color: #222 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  visibility: visible !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Excepcion: labels al lado de cada radio/checkbox NO van en bold */
body#page-3673 #gform_wrapper_12 .gchoice label,
body#page-3673 #gform_wrapper_12 .gchoice .gform-field-label {
  display: inline-block !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  margin: 0 !important;
  width: auto !important;
}

/* 5) Obligatorio mas discreto */
body#page-3673 #gform_wrapper_12 .gfield_required,
body#page-3673 #gform_wrapper_12 .gfield_required_text {
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-left: 4px;
}

/* 6) Grid flexible para los campos */
body#page-3673 #gform_wrapper_12 .gform_fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
body#page-3673 #gform_wrapper_12 .gfield {
  width: 100%;
  margin: 0;
  float: none !important;
}
body#page-3673 #gform_wrapper_12 .gfield.gfield--width-half {
  width: calc(50% - 8px);
}

/* 7) Inputs / select / textarea ocupan todo el ancho */
body#page-3673 #gform_wrapper_12 .ginput_container input,
body#page-3673 #gform_wrapper_12 .ginput_container select,
body#page-3673 #gform_wrapper_12 .ginput_container textarea {
  width: 100% !important;
  margin-bottom: 0 !important;
  float: none !important;
}

body#page-3673 #gform_wrapper_12 input[type="number"] {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* 8) Date picker */
body#page-3673 #gform_wrapper_12 .ginput_container_date {
  position: relative;
}
body#page-3673 #gform_wrapper_12 .ginput_container_date input[type="text"] {
  padding-right: 48px !important;
}
body#page-3673 #gform_wrapper_12 .gfield_date_year,
body#page-3673 #gform_wrapper_12 .gform-datepicker-icon-container {
  margin-top: 0 !important;
}

/* 9) Sublabels */
body#page-3673 #gform_wrapper_12 .gform-datepicker__separator-label,
body#page-3673 #gform_wrapper_12 .ginput_container_date .screen-reader-text {
  font-size: 12px;
  color: #888;
}

/* 10) Radios - una opcion por linea */
body#page-3673 #gform_wrapper_12 .ginput_container_radio .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
body#page-3673 #gform_wrapper_12 .gchoice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
body#page-3673 #gform_wrapper_12 .gchoice input[type="radio"] {
  margin: 0;
  width: auto !important;
  flex-shrink: 0;
}

/* 11) Espacio entre bloques full-width */
body#page-3673 #gform_wrapper_12 .gfield--type-radio,
body#page-3673 #gform_wrapper_12 .gfield--type-select {
  margin-top: 8px;
}

/* 12) Footer / boton Enviar */
body#page-3673 #gform_wrapper_12 .gform_footer {
  margin-top: 24px;
  padding: 0;
}
body#page-3673 #gform_wrapper_12 .gform_footer input[type="submit"] {
  margin-top: 0 !important;
}

/* 13) Validacion */
body#page-3673 #gform_wrapper_12 .gfield_validation_message,
body#page-3673 #gform_wrapper_12 .validation_message {
  color: #c00 !important;
  font-size: 13px !important;
  margin-top: 6px;
}

/* 14) Mobile */
@media (max-width: 768px) {
  body#page-3673 #gform_wrapper_12 .gfield.gfield--width-half {
    width: 100%;
  }
  body#page-3673 #gform_wrapper_12 .gform_title {
    font-size: 24px;
  }
}

/* FORM 12 - Fix icono calendario e iquerypopup */

/* Anclaje del contenedor */
body#page-3673 #gform_wrapper_12 .ginput_container_date {
  position: relative !important;
  display: block !important;
}

/* Espacio para el icono dentro del input */
body#page-3673 #gform_wrapper_12 .ginput_container_date input[type="text"] {
  padding-right: 50px !important;
}

/* Icono del calendario superpuesto */
body#page-3673 #gform_wrapper_12 .ginput_container_date img,
body#page-3673 #gform_wrapper_12 .ginput_container_date button,
body#page-3673 #gform_wrapper_12 .ginput_container_date .ui-datepicker-trigger,
body#page-3673 #gform_wrapper_12 .ginput_container_date .gform-datepicker__button,
body#page-3673 #gform_wrapper_12 .ginput_container_date .gform-datepicker-icon-container {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  display: block !important;
}

/* POPUP jQuery UI Datepicker - se inyecta en el body, por eso scopeo con body#page-3673 */

body#page-3673 #ui-datepicker-div,
body#page-3673 .ui-datepicker {
  background: #fff !important;
  border: 1px solid #E2E2E2 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10) !important;
  padding: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #222 !important;
  width: 280px !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

/* Header */
body#page-3673 .ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border: none !important;
  position: relative !important;
  padding: 4px 0 12px 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* Botones prev/next */
body#page-3673 .ui-datepicker .ui-datepicker-prev,
body#page-3673 .ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 2px !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 1px solid #E2E2E2 !important;
  border-radius: 50% !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  display: block !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-prev { left: 2px !important; }
body#page-3673 .ui-datepicker .ui-datepicker-next { right: 2px !important; }

/* Flechas con pseudo-elementos */
body#page-3673 .ui-datepicker .ui-datepicker-prev::before,
body#page-3673 .ui-datepicker .ui-datepicker-next::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 7px !important;
  height: 7px !important;
  border-top: 2px solid #222 !important;
  border-right: 2px solid #222 !important;
  text-indent: 0 !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-prev::before {
  transform: translate(-25%, -50%) rotate(-135deg) !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-next::before {
  transform: translate(-75%, -50%) rotate(45deg) !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-prev:hover,
body#page-3673 .ui-datepicker .ui-datepicker-next:hover {
  background: #F4F2F0 !important;
}

/* Selects mes/year */
body#page-3673 .ui-datepicker .ui-datepicker-title {
  text-align: center !important;
  margin: 0 36px !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  line-height: 1.4 !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-month,
body#page-3673 .ui-datepicker .ui-datepicker-year {
  background: #F4F2F0 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #222 !important;
  cursor: pointer !important;
  outline: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Tabla de dias */
body#page-3673 .ui-datepicker table.ui-datepicker-calendar {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar th {
  text-align: center !important;
  padding: 6px 0 !important;
  font-weight: 600 !important;
  color: #888 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  background: transparent !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td {
  text-align: center !important;
  padding: 1px !important;
  border: none !important;
  background: transparent !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td a,
body#page-3673 .ui-datepicker .ui-datepicker-calendar td span {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;
  color: #222 !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  font-size: 13px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td a:hover {
  background: #F4F2F0 !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a {
  background: #F4F2F0 !important;
  font-weight: 700 !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
body#page-3673 .ui-datepicker .ui-datepicker-calendar td .ui-state-active {
  background: #000 !important;
  color: #fff !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
body#page-3673 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span {
  color: #ccc !important;
}
body#page-3673 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span {
  color: #ccc !important;
  cursor: default !important;
}

/* FORM 12 - Forzar visibilidad de radios y checkboxes nativos */

body#page-3673 #gform_wrapper_12 input[type="radio"],
body#page-3673 #gform_wrapper_12 input[type="checkbox"],
body#page-3673 #gform_wrapper_12 .gfield-choice-input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  opacity: 1 !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  accent-color: #000 !important;
  vertical-align: middle !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Eliminar el circulo personalizado del tema orbital que podria estar
   superponiendose o quedando invisible */
body#page-3673 #gform_wrapper_12 .gchoice label::before,
body#page-3673 #gform_wrapper_12 .gchoice label::after,
body#page-3673 #gform_wrapper_12 .gfield_radio label::before,
body#page-3673 #gform_wrapper_12 .gfield_radio label::after {
  content: none !important;
  display: none !important;
}

/* Asegurar que el label vaya despues del radio con buen espaciado */
body#page-3673 #gform_wrapper_12 .gchoice {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body#page-3673 #gform_wrapper_12 .gchoice label,
body#page-3673 #gform_wrapper_12 .gfield_radio label {
  display: inline-block !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-weight: 400 !important;
}

/* ===========================================================
   CARTELERA HOME — imagen mobile 1:1 por espectaculo
   - Con "Imagen mobile (cartelera)" elegida  -> cuadrado 1:1 (cover)
   - Sin imagen mobile -> imagen desktop respetando su proporcion (sin recorte)
   Las variables --cart-mobile y --cart-ratio las inyecta front-page.php.
   Solo aplica al home (#cartelera_home).
   =========================================================== */
@media (max-width: 767px){
  /* Espectaculo CON imagen mobile 1:1 */
  #cartelera_home .imagen_cartelera.has-mobile{
    background-image: var(--cart-mobile) !important;
    background-position: center center !important;
    background-size: cover;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  /* Espectaculo SIN imagen mobile: proporcion natural de la desktop, sin recorte */
  #cartelera_home .imagen_cartelera.no-mobile{
    background-size: cover;
    height: auto !important;
    aspect-ratio: var(--cart-ratio, 290 / 340);
  }
}

/* ===========================================================
   Huincha "agotadas" — se adapta SIEMPRE a la altura de la imagen
   (la huincha ahora vive dentro de .imagen_cartelera en todas las
   plantillas: front-page.php, page-estrenos.php). Aplica en cualquier
   vista y viewport.
   =========================================================== */
.imagen_cartelera .soldout-ribbon{
  top: 0;
  height: 100% !important;
  box-sizing: border-box; /* incluye el padding en el alto -> calza exacto con la imagen */
  container-type: size;   /* permite escalar el texto con cqh (alto de la huincha) */
}

/* En movil el texto vertical se escala al alto disponible para que SIEMPRE
   quepa en una sola columna (problema en imagenes de 2 columnas / horizontales,
   que quedan bajas). Distinto cap para cada texto por su largo. */
@media (max-width: 767px){
  .imagen_cartelera .soldout-ribbon span{
    white-space: nowrap;
  }
  .imagen_cartelera .soldout-ribbon.soldout-general span{
    font-size: clamp(11px, 6cqh, 22px);
  }
  .imagen_cartelera .soldout-ribbon.soldout-vecino span{
    font-size: clamp(9px, 5cqh, 17px);
  }
}

/* ================================================================
   POSICIÓN DEL BOTÓN SOBRE LA IMAGEN MOBILE DEL DESTACADO (HOME)
   Controlada por el campo ACF "Posición botón (mobile)", que imprime
   la clase .pos-boton-{valor} en el .wrap de #imagen_contenido_mobile.
   Eje vertical: "centro" (al medio) o "fondo" (abajo).
   Eje horizontal: izquierda / centro / derecha.
   Estas reglas van al final a propósito: por especificidad + !important
   prevalecen sobre la regla mobile genérica anterior del .wrap.
   ================================================================ */
@media (max-width: 767px){
  /* Margen interno para que el botón no quede pegado a los bordes */
  #contenido_destacado_home #imagen_contenido_mobile .wrap[class*="pos-boton-"]{
    padding: 28px !important;
    box-sizing: border-box !important; /* el padding no debe sumar ancho extra */
  }

  /* --- Eje vertical --- */
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro-izquierda,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro-derecha{
    align-items: center !important;
  }
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-izquierda,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-centro,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-derecha{
    align-items: flex-end !important;
  }

  /* --- Eje horizontal --- */
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro-izquierda,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-izquierda{
    justify-content: flex-start !important;
  }
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-centro{
    justify-content: center !important;
  }
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-centro-derecha,
  #contenido_destacado_home #imagen_contenido_mobile .wrap.pos-boton-fondo-derecha{
    justify-content: flex-end !important;
  }
}


/* ================================================================
   POSICIÓN DEL BOTÓN SOBRE LA IMAGEN DESKTOP DEL DESTACADO (HOME)
   Controlada por el campo ACF "Posición botón (desktop)", que imprime
   la clase .pos-boton-desktop-{valor} en el .wrap de #imagen_contenido_home.
   #imagen_contenido_home está oculto en mobile, así que estas reglas
   solo afectan a escritorio. Eje vertical: "centro" (al medio) o
   "fondo" (abajo); eje horizontal: izquierda / centro / derecha.
   ================================================================ */
/* Margen interno para que el botón no quede pegado a los bordes */
#contenido_destacado_home #imagen_contenido_home .wrap[class*="pos-boton-desktop-"]{
  padding: 48px !important;
  box-sizing: border-box !important; /* el padding no debe sumar ancho extra */
}

/* --- Eje vertical --- */
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro-izquierda,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro-derecha{
  align-items: center !important;
}
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-izquierda,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-centro,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-derecha{
  align-items: flex-end !important;
}

/* --- Eje horizontal --- */
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro-izquierda,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-izquierda{
  justify-content: flex-start !important;
}
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-centro{
  justify-content: center !important;
}
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-centro-derecha,
#contenido_destacado_home #imagen_contenido_home .wrap.pos-boton-desktop-fondo-derecha{
  justify-content: flex-end !important;
}