/*
 * Fase 5 — Pulido visual BS5 → parity con BS3.
 *
 * Se carga DESPUÉS de bootstrap-5.min.css, bootstrap3-compat.css y los
 * custom*.css del sitio. Sólo contiene overrides que refinan la
 * apariencia para mantener el look original donde BS5 cambió defaults o
 * donde el markup migrado dejó de matchear selectores antiguos.
 * Cada bloque documenta su motivo.
 */


/* =============================================================
 * 1. .nav-tabs — BS5 mueve .active del <li> al <a class="nav-link">
 * Los custom*.css estilan .nav-tabs > li.active > a; replicamos el
 * color para el nuevo selector .nav-tabs .nav-link.active.
 * ============================================================= */

/* cartelera.php — hereda colores morados de custom.css:1578 */
.nav-tabs .nav-link {
    color: #808080;
    font-family: 'radikalregular';
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 1em;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent;
    isolation: auto;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    color: #fff !important;
    background-color: #9937ce;
    border: 1px solid #9937ce;
    border-bottom-color: transparent;
    cursor: default;
}

/* premios.php — usa .nav-tabs2 con colores propios (customPremios2018.css:1748).
   El selector `.nav-tabs > li > a` coloreaba TODOS los tabs con bg morado;
   en BS5 migrado eso se consigue con .nav-tabs .nav-link, que ya estilamos
   arriba en gris. Para premios, añadimos override específico vía .nav-tabs2. */
.nav-tabs2 .nav-link {
    color: #fff !important;
    background-color: #430b79;
    border: 1px solid #430b79;
    border-bottom-color: transparent;
    font-family: 'radikalregular';
}
.nav-tabs2 .nav-link:hover,
.nav-tabs2 .nav-link.active,
.nav-tabs2 .nav-link.active:hover,
.nav-tabs2 .nav-link.active:focus {
    color: #fff !important;
    background-color: #2e0259;
    border: 1px solid #2e0259;
    border-bottom-color: transparent;
    cursor: default;
}


/* =============================================================
 * 2. Navbar — BS5 añade padding al .nav-link (0.5rem 1rem) y padding
 *    a .navbar (0.5rem var(--bs-navbar-padding-x)).
 *    Custom.css tiene `.navbar-inverse .navbar-nav > li > a` sin padding
 *    explícito; adaptamos a la métrica original para que el menú no se
 *    vuelva demasiado alto ni acolchado.
 * ============================================================= */

.navbar.navbar-inverse {
    --bs-navbar-padding-y: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 50px;
}

.navbar-inverse .navbar-nav .nav-link {
    padding: 15px 15px;
    line-height: 2em;
    color: #fff;
    font-family: 'radikallight';
    letter-spacing: 1px;
    text-transform: uppercase;
}
.navbar-inverse .navbar-nav .nav-link:hover,
.navbar-inverse .navbar-nav .nav-link:focus {
    background: #2a2048;
    color: #fff;
}

/* .current_page_item sigue estando en el <li>; heredando del custom.css:136.
   Pero ese selector usaba `.navbar-inverse .navbar-nav > li.current_page_item a`
   — sigue matcheando en BS5 porque tenemos <li class="nav-item current_page_item"><a>.
   Nada que hacer aquí, sólo confirmar que el token `.current_page_item` sí matchea. */

/* brand: mantener el logo con el tamaño histórico */
.navbar-brand {
    padding: 5px 20px 5px 30px;
    margin-right: 0;
}
.navbar-brand img {
    width: 180px;
    height: auto;
}

/* el ítem "Escenia" (amarillo) — .yellow sigue aplicando al <li> */
.navbar-nav > li.yellow > .nav-link {
    background: url(../img/bgMenuEscenia.jpg) repeat-y !important;
}


/* =============================================================
 * 3. Carousel — controles .left / .right (BS3) ya no existen como
 *    posicionamiento en BS5; el CSS custom del sitio no los posiciona.
 *    Los migramos a flex para que los botones queden a los lados y los
 *    íconos bootstrap icons se vean centrados.
 * ============================================================= */
.carousel-control.left,
.carousel-control.right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #9937ce;
    font-size: 1.6rem;
    text-decoration: none;
    z-index: 5;
    opacity: .8;
}
.carousel-control.left:hover,
.carousel-control.right:hover {
    color: #430b79;
    opacity: 1;
}
.carousel-control.left  { left: -10px; }
.carousel-control.right { right: -10px; }


/* =============================================================
 * 4. .container anidado dentro de .row
 *    BS5 aplica gutters vía CSS vars (--bs-gutter-x: 1.5rem); los .row
 *    tienen margin-left/right: -.75rem que, sumado al padding del
 *    .container interno, puede producir scroll horizontal.
 *    custom.css:147 ya setea .row { margin: 0 } — reforzamos con
 *    gutter-x = 0 para que no se active el padding lateral nuevo.
 * ============================================================= */
.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-right: 0;
    margin-left: 0;
}
.row > * {
    padding-right: 0;
    padding-left: 0;
}
/* Excepciones: dentro de un nav-tabs/tabs/filtros, recuperar un mínimo
   de padding entre columnas para que no queden pegadas visualmente.
   Usamos .gx-2 como escape hatch donde se necesite. */


/* =============================================================
 * 5. form-control (contacto.php usa clases custom, no .form-control,
 *    pero el form incluye inputs type=text cuyos estilos BS5 resetea
 *    vía box-sizing y font-family. Asegurar herencia tipográfica.)
 * ============================================================= */
.formaContacto input[type="text"],
.formaContacto textarea {
    box-sizing: border-box;
    font-family: 'radikallight';
}


/* =============================================================
 * 6. Botones .btn — BS5 cambia line-height a 1.5, font-size 1rem,
 *    padding .375rem .75rem. Los .btn-yellow/.btn-tran/.btn-morado etc.
 *    del sitio asumen más altura. Restaurar altura BS3 para que los
 *    CTAs no se vean más pequeños.
 * ============================================================= */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}
.btn-primary,
.btn-yellow,
.btn-morado,
.btn-negro,
.btn-tran,
.btn-todo,
.btn-buscar,
.btn-comprar,
.btn-leer,
.btn-novedades {
    font-family: 'radikalregular';
}


/* =============================================================
 * 7. Dropdown — alineamos el dropdown-menu al submenú custom.
 *    BS5 añade padding/margen distintos; el filtro de cartelera usa
 *    .submenu-filtros y .submenu-main con reglas en custom_boletos.css
 *    que no cambian; sólo aseguramos que el dropdown-menu abra sin
 *    desbordar y que el caret se esconda (ya en el shim).
 * ============================================================= */
.dropdown-menu {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    font-family: 'radikalregular';
}
.dropdown-menu > li > a,
.dropdown-menu a.submenu-filtros,
.dropdown-menu a[onclick] {
    display: block;
    padding: 6px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
}
.dropdown-menu > li > a:hover,
.dropdown-menu a.submenu-filtros:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}


/* =============================================================
 * 8. Tipografía base — BS5 usa system-ui 1rem / line-height 1.5.
 *    El sitio se diseñó con fonts radikal y line-height ~1.42;
 *    apretamos line-height global para que los textos no se desplacen.
 * ============================================================= */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}


/* =============================================================
 * 9. Carousel indicators — BS5 espera <button> pero el markup del
 *    sitio usa <ol><li>. El default de <ol> muestra numeración (1,2,3),
 *    por eso forzamos list-style:none y escondemos cualquier texto
 *    interno con text-indent + color transparente.
 * ============================================================= */
.carousel-indicators {
    list-style: none;
    padding-left: 0;
}
.carousel-indicators li {
    cursor: pointer;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0;
    text-indent: -999px;
    color: transparent;
    font-size: 0;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}
.carousel-indicators li::marker {
    content: '';
}
.carousel-indicators li.active {
    opacity: 1;
}


/* =============================================================
 * 10. Form labels nativas en BS5 (form-label) — no las usamos, así que
 *     no añadimos nada. El <label class="control-label"> legacy sigue
 *     estilado por custom.css:59.
 * ============================================================= */


/* =============================================================
 * 11. Navbar fixed-top — en BS5 por default no deja espacio arriba
 *     del body. Nuestro menu.php usa fixed-top; añadimos padding-top
 *     al body en páginas donde aplica (cartelera.php, prensa.php,
 *     carteleraDetalle.php, notaResena.php usan includes/menu.php,
 *     los demás usan menu_boletos.php que NO es fixed).
 * ============================================================= */
body:has(nav.fixed-top) {
    padding-top: 70px;
}


/* =============================================================
 * 12. Overlay de cartelera (containers ehover13) — los <a> dentro del
 *     overlay salen subrayados por default del navegador. La versión
 *     BS3 original no los subrayaba. Reset explícito.
 * ============================================================= */
.hover .overlay a,
.hover .overlay a:hover,
.hover .overlay a:focus,
.overlay a,
.overlay a:hover {
    text-decoration: none;
    color: #fff;
}


/* =============================================================
 * 13. Sección "Prensa y Comunidad" (index.php)
 *     - Título H2 + underline a la izquierda, mismo padding que el
 *       H2 de "CARTELERA" (seParteTit padding-top:10px).
 *     - Grupo de wrap1/wrap2/wrap3 centrado (los 3 caben juntos).
 * ============================================================= */
.seParte h2 {
    padding-top: 10px;
    text-align: left;
}
.seParte #divPrensa {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    margin-top: 20px;
}
.seParte #divPrensa > a,
.seParte #divPrensa > [class^="wrap"] {
    float: none;
}

/* Los wraps tenían height: 262px fija y los image-overlay 130/262px; eso
   recortaba títulos largos ("Células creativas. Intervenciones artísticas.") y
   descripciones. Dejamos que ambos crezcan verticalmente con min-height,
   pero conservamos las anchuras originales para preservar la composición
   (wrap1 con imagen + panel morado a la izquierda, wrap2/3 con caption
   semitransparente al pie de la imagen). */
.seParte [class^="wrap"] {
    height: auto !important;
    min-height: 262px;
    overflow: visible !important;
}
.seParte [class^="image-overlay"] {
    height: auto !important;
    padding-bottom: 16px;
    box-sizing: border-box;
}
.seParte .image-overlay1 { min-height: 262px; }
/* overlay2 y overlay3 deben tener exactamente la misma altura aunque su
   contenido sea distinto. Fijamos alto común generoso para que encaje el
   caption más largo (overlay2) sin que overlay3 quede más corto. */
.seParte .image-overlay2,
.seParte .image-overlay3 {
    min-height: 160px;
    height: 160px !important;
}

.seParte [class^="wrap"] h5 {
    line-height: 1.25;
    word-break: break-word;
}
/* Título específico de wrap1 — "Células creativas. Intervenciones artísticas."
   Requiere line-height:1 y padding 0/20/0 para caber junto al desc. */
.seParte .wrap1 h5 {
    line-height: 1;
    padding: 0px 20px 0px;
}
.seParte [class^="wrap"] p {
    line-height: 1.35;
    padding-bottom: 8px;
    word-break: break-word;
}
/* prensaHome guarda el desc en HTML con <p> anidados — reset de espacios
   internos para que el texto respire. */
.seParte [class^="image-overlay"] p {
    margin: 0;
}
.seParte [class^="image-overlay"] p + p {
    padding-top: 6px;
}

/* Grid de cartelera (#Grid / #portfoliolist) — centrar ítems flotados.
   Los cards tienen width fijo + margin-right 38px y flotan izquierda; en
   pantallas anchas quedaba hueco a la derecha. Con flex-wrap + center se
   reparten equitativamente. */
#Grid > div,
#Grid > section,
#Grid {
    text-align: initial;
}
#portfoliolist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
}


/* =============================================================
 * 14. Footer — submenuF (nav horizontal) contiene <li> con float:right.
 *     Necesita clearfix para que la ul ocupe la altura correcta dentro
 *     del nuevo .row flex; y queremos alinear verticalmente con el logo.
 * ============================================================= */
ul.submenuF {
    display: block;
    overflow: hidden;       /* clearfix de los floats internos */
    padding-left: 0;
    margin: 0;
}
ul.submenuF li {
    margin: 0;
}


/* Encabezado "ESPACIOS" — el .row.container tiene la combinación de
   clases heredada. La clase .sin de custom_boletos.css fija
   padding-left: 0 !important; lo sobrescribimos con !important para
   que el título respete el margen de 15px del borde izquierdo. */
.row.container.txtTitulo.sinBread {
    padding-left: 15px !important;
}


/* =============================================================
 * Espacios.php (Fase 5, reconstruido) — 5 banners, uno por sala.
 * Estructura BS5: <section class="espacio-banner"> con la imagen de fondo
 * aplicada en CSS, un overlay morado y un grid interno que coloca:
 *   - LOGO    → col-md-3 (izquierda)
 *   - INFO    → col-md-3 offset-md-2 (centro: icon + AFORO + número + botones)
 * ============================================================= */
.espacio-banner {
    position: relative;
    min-height: 320px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;
}
.espacio-banner .espacio-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.espacio-banner .espacio-content {
    position: relative;
    z-index: 2;
    padding: 30px 40px;
    min-height: 320px;
}

/* Logo a la izquierda */
.espacio-banner .espacio-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .espacio-banner .espacio-logo-wrap { justify-content: flex-start; }
}
.espacio-banner .espacio-logo {
    max-height: 180px;
    max-width: 100%;
    width: auto;
    height: auto;
}

/* Bloque info centrado: icono + AFORO + número + botones */
.espacio-banner .espacio-info {
    color: #fff;
}
.espacio-banner .aforo-icon {
    display: block;
    margin: 0 auto 6px;
    width: 54px;
    height: auto;
    filter: brightness(0) invert(1);   /* pinta el PNG de aforo en blanco */
}
.espacio-banner .aforo-label,
.espacio-banner .aforo-number {
    font-family: 'radikalregular';
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: #fff;
    margin: 0;
}
.espacio-banner .aforo-number {
    font-family: 'radikalbold';
    margin-bottom: 14px;
}

/* Botones largos uno debajo de otro */
.espacio-banner .espacio-info .btn-tran {
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 7px 18px;
    color: #fff;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    font-family: 'radikalregular';
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.espacio-banner .espacio-info .btn-tran:hover,
.espacio-banner .espacio-info .btn-tran:focus {
    background: #fff;
    color: #3a0273;
}

/* Mobile: los dos cols se apilan; el logo queda centrado arriba y el
   bloque info debajo. padding menor en el banner. */
@media (max-width: 767.98px) {
    .espacio-banner {
        min-height: 0;
    }
    .espacio-banner .espacio-content {
        padding: 24px 18px;
        min-height: 0;
    }
    .espacio-banner .espacio-logo { max-height: 140px; }
    .espacio-banner .aforo-label,
    .espacio-banner .aforo-number { font-size: 24px; }
}

/* Footer con padding lateral general; la fila de logos (más abajo) se
   ensancha todavía más para que los 6 logos queden más al centro. */
.row.negro {
    padding-left: 80px;
    padding-right: 80px;
}
.row.negro + .row.negro {
    padding-left: 220px;
    padding-right: 220px;
}
.row.bgFooter {
    padding-left: 80px;
    padding-right: 80px;
}
@media (max-width: 1199.98px) {
    .row.negro + .row.negro {
        padding-left: 120px;
        padding-right: 120px;
    }
}
@media (max-width: 991.98px) {
    .row.negro,
    .row.bgFooter {
        padding-left: 40px;
        padding-right: 40px;
    }
    .row.negro + .row.negro {
        padding-left: 60px;
        padding-right: 60px;
    }
}
@media (max-width: 575.98px) {
    .row.negro,
    .row.negro + .row.negro,
    .row.bgFooter {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =============================================================
 * 16. Secciones CARTELERA y PRENSA con bg blanco; sólo la franja de
 *     filtros arriba conserva el gris #f2f2f3 original (.filtro-cartelera).
 * ============================================================= */
.filtro {
    background: #fff !important;
}
.seParte {
    background: #fff !important;
}
.filtro-cartelera {
    background: #f2f2f3;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 0;
}
/* Título CARTELERA justo debajo de la franja de filtros, alineado izquierda */
.filtro .seParteTit,
.filtro .seParteTit h2 {
    text-align: left;
    padding-left: 0;
}
.filtro .seParteTit {
    margin-top: 30px;
    margin-bottom: 20px;
}
.filtro .seParteTit img {
    display: block;
}
.seParte .seParteTit,
.seParte > .container > .row > .col-md-10 {
    padding-left: 0;
}


/* =============================================================
 * 15. Filtros de cartelera (filtrosIndex2020.php rediseñado Fase 5)
 *     - Los 4 widgets viven en una sola row flex (bootstrap .row .g-2).
 *     - Look: botón pill por filtro, consistente, con caret y hover.
 *     - Mobile: se apilan vertical por col-12.
 * ============================================================= */
.filtro-cartelera .dropdown { display: block; }
.filtro-cartelera .filtro-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;           /* altura fija para los 4 filtros */
    padding: 0 16px;
    font-family: 'radikalregular';
    font-size: 14px;
    line-height: 1.2;
    color: #000;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.filtro-cartelera .filtro-btn > i { margin-right: 6px; }
.filtro-cartelera .filtro-btn:hover,
.filtro-cartelera .filtro-btn[aria-expanded="true"] {
    border-color: #9937ce;
    color: #9937ce;
}
.filtro-cartelera .filtro-btn .caret {
    margin-left: 8px;
    border-top-color: #6c6c6c;
}
.filtro-cartelera .filtro-btn:hover .caret,
.filtro-cartelera .filtro-btn[aria-expanded="true"] .caret {
    border-top-color: #9937ce;
}

.filtro-cartelera .dropdown-menu {
    min-width: 100%;
    max-width: 360px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 4px 0;
    margin-top: 4px;
}
.filtro-cartelera .dropdown-item {
    padding: 8px 16px;
    font-family: 'radikalregular';
    font-size: 13px;
    color: #333;
    white-space: normal;   /* permite wrap en nombres largos de sala */
    cursor: pointer;
}
.filtro-cartelera .dropdown-item:hover,
.filtro-cartelera .dropdown-item:focus {
    background: #f3ecfa;
    color: #9937ce;
}
.filtro-cartelera .dropdown-header {
    padding: 8px 16px 4px;
    font-family: 'radikalbold';
    font-size: 12px;
    text-transform: uppercase;
    color: #6c6c6c;
}

/* calendario dentro de dropdown: que crezca lo que necesite */
.filtro-cartelera .calendario-dropdown {
    min-width: 320px;
    max-width: none;
    padding: 10px;
}
.filtro-cartelera .calendario-agenda {
    width: 100%;
}

/* input de búsqueda + botón — alineados en una sola línea */
.filtro-cartelera .buscar-wrap {
    box-sizing: border-box;
    gap: 6px;
    height: 42px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}
.filtro-cartelera .buscar-wrap:focus-within {
    border-color: #9937ce;
}
.filtro-cartelera .buscar-icon {
    color: #9937ce;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.filtro-cartelera .buscar-wrap .form-control {
    flex: 1;
    border: 0;
    box-shadow: none;
    padding: 6px 4px;
    font-family: 'radikalregular';
    font-size: 14px;
}
.filtro-cartelera .buscar-wrap .form-control:focus {
    outline: none;
    box-shadow: none;
}
.filtro-cartelera .buscar-wrap .btn-buscar {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ---- Calendario dentro del dropdown --------------------------------- */
/* El calendario original usa floats y width:20px por celda (≈147px de grid).
   Dentro del dropdown-menu de BS5 el layout quedaba roto porque:
   - los .titCal, .calRenglon traen `display: inline` y floats, y el
     dropdown-menu no contiene los floats;
   - faltaba ancho mínimo; y el header (.bgCalendario) solo daba 20px.
   Aquí lo reconstruimos como una rejilla CSS de 7 columnas fijas. */
.filtro-cartelera .calendario-dropdown {
    min-width: 260px;
    padding: 8px 10px;
}
.filtro-cartelera .calendario-dropdown .bgCalendario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    border-top: 0 !important;
    height: auto;
    padding: 0 0 6px;
    margin: 0;
}
.filtro-cartelera .calendario-dropdown .calPrev,
.filtro-cartelera .calendario-dropdown .calNext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
.filtro-cartelera .calendario-dropdown .calPrev a,
.filtro-cartelera .calendario-dropdown .calNext a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 1;
    color: #000 !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
}
.filtro-cartelera .calendario-dropdown .calPrev a:hover,
.filtro-cartelera .calendario-dropdown .calNext a:hover {
    background: #f0e6fa;
    color: #9937ce !important;
}
.filtro-cartelera .calendario-dropdown .calMes {
    flex: 1;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'radikalregular';
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    width: auto !important;
}
.filtro-cartelera .calendario-dropdown .calMes span {
    display: inline-block;
    letter-spacing: 1px;
}
.filtro-cartelera .calendario-dropdown .titCal,
.filtro-cartelera .calendario-dropdown .calRenglon {
    display: block !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    height: auto !important;
}
.filtro-cartelera .calendario-dropdown .titCal ul,
.filtro-cartelera .calendario-dropdown .calRenglon ul {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    list-style: none;
    padding-left: 0;
    margin: 0 0 2px;
}
.filtro-cartelera .calendario-dropdown .titCal ul li,
.filtro-cartelera .calendario-dropdown .calRenglon ul li {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.filtro-cartelera .calendario-dropdown .titCal ul li {
    font-family: 'radikalbold';
    color: #6c6c6c !important;
    height: 22px;
    border-bottom: 1px solid #eee;
}
.filtro-cartelera .calendario-dropdown .calRenglon ul br { display: none; }
.filtro-cartelera .calendario-dropdown .calRenglon ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #fff !important;
    background: #9937ce;
    border-radius: 50%;
    text-decoration: none;
}
.filtro-cartelera .calendario-dropdown .calRenglon ul li a:hover {
    background: #430b79;
}
.filtro-cartelera .calendario-dropdown .hayTaller {
    width: auto !important;
    height: 28px !important;
    min-width: 0 !important;
}
/* link "Cerrar" debajo del calendario */
.filtro-cartelera .calendario-dropdown a[onclick*="ocultaCalen"] {
    display: block;
    padding-top: 6px;
    font-size: 12px;
    color: #6c6c6c;
    text-align: center;
    cursor: pointer;
}
.filtro-cartelera .calendario-dropdown a[onclick*="ocultaCalen"]:hover {
    color: #9937ce;
    text-decoration: none;
}