/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

@font-face {
    font-family: 'Quicksand';
    src: url('/wp-content/themes/hello-elementor-child/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700; /* Define el rango de peso que soporta la fuente */
    font-style: normal;
}

body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400; /* Ajusta esto para usar diferentes pesos */
}

/* Oculta todas las imágenes inicialmente */
img {
    visibility: hidden;
}


:root {
    --page-title-display: inherit !important;
}

.page-header {
    font-family: 'Quicksand', sans-serif;
    color: black;
    margin: 10px 10px 5px;
}

/* Estilo por defecto para pantallas grandes */
.page-header h1 {
    font-size: 28px;
	font-weight: 800;
}

/* Media query para dispositivos grandes (tablets en horizontal o pantallas pequeñas de desktop) */
@media (max-width: 992px) {
    .page-header h1 {
        font-size: 26px; /* Tamaño de fuente ajustado para estos dispositivos */
    }
}

/* Media query para tablets en vertical */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 24px; /* Tamaño de fuente más pequeño para tablets */
    }
}

/* Media query para móviles */
@media (max-width: 575px) {
    .page-header .entry-title {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
}

/* Media query para móviles */
@media (max-width: 480px) {
    .page-header h1 {
        font-size: 22px; /* Tamaño de fuente aún más pequeño para móviles */
    }
}




.text-justify {
	text-align: justify !important;
}
.amazon-auto-links {
	padding: 20px 0 40px;
}

.elementor-button .elementor-align-icon-left {
  align-self: center;
	font-size: 1.5em;
}

.post-tags {
	display: none;
}





#colophon.site-footer {
    max-width: none;
    padding: 30px 0;
}

.site-footer {
    background-color: #ffffff; /* Color de fondo del footer */
    padding: 20px 0; /* Espaciado interno del footer */
    text-align: center; /* Alinear el contenido del footer al centro */
    width: 100%; /* Asegurar que el footer ocupe el ancho completo */
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.5); /* Sombreado en la parte superior */
}

.footer-navigation ul {
    list-style: none; /* Remover estilos de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Disposición horizontal de los ítems */
    justify-content: center; /* Centrar los ítems horizontalmente */
    gap: 20px; /* Espacio entre los ítems */
}

.footer-navigation a {
    text-decoration: none; /* Remover el subrayado de los enlaces */
    color: #333 !important; /* Color del texto de los enlaces */
    font-size: 1.2em; /* Aumentar el tamaño de la fuente en la lista */
}

.footer-credits {
    margin-top: 20px; /* Espacio entre el menú y los créditos */
    font-size: 0.9em; /* Reducir el tamaño de la fuente en los créditos */
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .footer-navigation ul {
        flex-direction: column; /* Cambia la disposición de los ítems a vertical */
        align-items: center; /* Alinea los ítems al centro */
    }
}

.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que el menú se mantenga por encima de otros contenidos */
    color: #000000 !important;
    max-width: 100vw !important;
    background-color: white !important;
    border-bottom: 2px solid #000; /* Añade un borde en la parte inferior con el color deseado */
    padding-bottom: 0 !important;
}

main#content {
    padding-top: 140px;
}

.site-header p.last-updated-date, #mobile-elements p.last-updated-date{
    color: #000000 !important;
    font-size: .6em;
}

.site-header img {
    height: 65px;
    width: 121px;
    object-fit: contain;
}

/* Alinea todo el contenido de la columna a la derecha */
.site-header .col-md-4.text-md-right {
  text-align: right;
}

/* Estilos para el formulario de búsqueda y el icono de login */
.site-header .col-md-4.text-md-right > * {
  display: inline-block; /* Muestra los elementos en línea */
  vertical-align: middle; /* Alinea verticalmente los elementos */
}

/* Opcional: Ajusta el margen entre el buscador y el icono de login */
.site-header .col-md-4.text-md-right > a {
    color: #000000 !important;
    margin-left: 10px; /* Ajusta el espacio entre el buscador y el icono de login */
    margin-right: 20px;
}

.site-header .search-field, #mobile-elements .search-field {
    width: 100%; /* Hace que el campo de búsqueda ocupe todo el ancho de su contenedor (el formulario) */
    box-sizing: border-box; /* Asegura que el padding y el borde del input se incluyan en su ancho total */
    height: 30px;
    color: #000000 !important;
    font-size: 14px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23aaa" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128s128 57.2 128 128c0 70.7-57.2 128-128 128z"/></svg>');
    background-position: 15px center;
    background-size: 15px;
    background-repeat: no-repeat;
    padding-left: 35px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Aplica Flexbox al contenedor que tiene el formulario de búsqueda y el icono de login */
.site-header .col-md-4.text-md-right {
  display: flex; /* Activa Flexbox */
  justify-content: flex-end; /* Alinea los elementos a la derecha */
  align-items: center; /* Centra los elementos verticalmente */
  gap: 10px; /* Añade un espacio entre los elementos del flexbox */
}

/* Estilo para el formulario de búsqueda */
.site-header .search-form, #mobile-elements .search-form {
  flex-grow: 1; /* Hace que el formulario de búsqueda ocupe el espacio disponible */
  margin: 0; /* Elimina cualquier margen predeterminado */
}

/* Oculta el botón de búsqueda */
.site-header input.search-submit, #mobile-elements input.search-submit {
  display: none; /* Oculta el botón de búsqueda */
}

.main-navigation {
    color: #000000 !important;
    margin: 10px 0 0;
    text-align: center;
}


.main-navigation ul {
    list-style: none; /* Elimina los estilos de lista predeterminados */
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 0; /* Elimina el relleno predeterminado */
    display: inline-block; /* Permite centrar la lista */
}

.main-navigation li {
    display: inline-block; /* Muestra los elementos del menú en línea */
    margin-right: 20px; /* Espacio entre los elementos del menú */
}

.main-navigation li:last-child {
    margin-right: 0; /* Elimina el margen del último elemento para evitar espacios adicionales */
}

.main-navigation a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #000 !important; /* Color del texto de los enlaces */
}

/* Estilos para submenús */
.main-navigation ul ul {
    display: none; /* Oculta los submenús */
    position: absolute; /* Posiciona los submenús fuera del flujo de documentos */
    background-color: #fff; /* Fondo de los submenús */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Sombra opcional para los submenús */
    padding: 30px 50px; /* Relleno alrededor de los enlaces de los submenús */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    top: 140px;
}

/* Estilo para el ícono del menú */
.main-navigation .submenu-toggle {
    cursor: pointer;
    margin-left: 10px;
    /* Añade estilos adicionales si es necesario */
}

i.submenu-toggle {
    color: #666;
    display: inline-block; /* Asegura que el ícono se pueda transformar */
    transform: translateY(2px); /* Ajusta este valor según sea necesario para bajar el ícono */
}

/* Oculta los submenús inicialmente */
.main-navigation .sub-menu {
    display: none;
}

.sub-menu {
    margin: 10px 0; /* Ajusta el margen superior e inferior según necesites */
    padding: 10px; /* Añade relleno dentro del submenú para separar los bordes de los elementos internos */
    background-color: #ffffff; /* Establece un fondo blanco para el estilo de tarjeta */
    border: 1px solid #dddddd; /* Añade un borde ligero */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra suave para un efecto 3D */
    border-radius: 5px; /* Bordes redondeados para la tarjeta */
}

.sub-menu .menu-item {
    margin-bottom: 10px; /* Añade un margen en la parte inferior de cada elemento del submenú */
    background: #f9f9f9; /* Fondo para cada elemento del submenú */
    border: 1px solid #eee; /* Borde ligero para cada elemento */
    border-radius: 3px; /* Bordes redondeados */
    /*padding: 5px 10px;*/ /* Relleno dentro de cada elemento */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.sub-menu .menu-item:last-child {
    margin-bottom: 0; /* Elimina el margen inferior del último elemento para mantener uniformidad */
}

.menu-item a {
    padding: 5px 5px; /* Aumenta el relleno alrededor del texto */
    margin: 5px 0; /* Ajusta el margen para dar espacio entre elementos */
    display: inline-block; /* Esto permite que el relleno y el margen sean efectivos */
    border-radius: 5px; /* Opcional: bordes redondeados para un look de "tarjeta" */
}

.menu-item a:hover, .menu-item a:active {
    background-color: #f5f5dc; /* Color de fondo en hover o activo */
}

.menu-item a:hover, .menu-item a:active {
    background-color: #f5f5dc; /* Cambia el fondo a amarillo en hover o activo */
}

.submenu-toggle {
    padding: 5px 10px; /* Añade relleno alrededor del ícono para más espacio */
    margin-left: 5px; /* Añade un margen para separarlo del texto si es necesario */
    border-radius: 5px; /* Opcional: bordes redondeados */
    display: inline-block; /* Esto permite que el relleno y el margen sean efectivos */
}

.submenu-toggle:hover {
    background-color: #a3da8d; /* Color de fondo en hover o activo */
}

.submenu-toggle:hover {
    background-color: #a3da8d; /* Cambia el fondo a verde en hover o activo */
}

.menu-item a, .submenu-toggle {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.submenu-close {
    position: absolute;
    top: 10px; /* Ajusta según necesites */
    right: 10px; /* Ajusta según necesites */
    cursor: pointer;
    z-index: 1001; /* Asegúrate de que esté por encima de los contenidos del submenú */
}

/* Estilo para el ícono de FontAwesome */
.submenu-close i {
    font-size: 18px; /* Ajusta el tamaño según necesites */
    color: #333; /* Ajusta el color según necesites */
}

.main-navigation .sub-menu {
    transition: all 0.3s ease-in-out;
}

/* Oculta el contenedor de elementos móviles en pantallas más grandes */
#mobile-elements {
    display: none;
}

@media (max-width: 768px) { /* Ajusta este valor según tu punto de ruptura para móviles */
    .main-navigation {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
    }

    .main-navigation .menu-item {
        display: inline-block;
        flex: 0 0 auto; /* Evita que los elementos del menú se estiren */
    }

    .site-header .text-md-left, .site-header .text-md-right {
        display: none !important;
    }
    #mobile-elements {
        display: block;
    }

    .site-header {
        padding: 10px 5px 0 !important;
    }

    /* Estilos para submenús en dispositivos móviles */
    .main-navigation .sub-menu {
        display: none; /* Los submenús se muestran como bloques */
        width: 100%;
        height: calc(100% - 130px);
        position: fixed;
        top: 130px;
        background-color: #fff;
        z-index: 1000;
        box-shadow: none;
        overflow: auto;
    }

    .submenu-close .close {
        display: block; /* Muestra el botón de cierre */
        text-align: right; /* Alinea el ícono a la derecha */
        padding: 10px; /* Espaciado alrededor del ícono */
    }

    /* Asegura que los elementos de submenú se muestren de manera vertical */
    .main-navigation .sub-menu .menu-item {
        display: block; /* Muestra los elementos del submenú en bloques, uno debajo del otro */
    }

    main#content {
        padding-top: 135px;
    }

}



.page-content {
    font-family: 'Quicksand', sans-serif;
    color: black;
}
.page-content a{
    text-decoration: none !important;
}

.page-content section .container {
    margin-top: 10px;
}






.noticia {
    margin-bottom: 20px; /* Espacio entre noticias */
    padding-bottom: 15px; /* Espaciado al final de cada noticia */
}

/* Estilos para enlaces dentro de .noticia */
.noticia a {
    color: black;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

/* Subrayado solo para el título al hacer hover */
.noticia a:hover h3 {
    text-decoration: underline;
}

/* Estilos para el título, leyenda de la imagen y párrafos */
.noticia h3 {
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px; /* Espaciado sobre el título */
    margin-bottom: 10px; /* Espaciado debajo del título */
    color: black; /* Color del título */
}

.noticia h3.noticia-destacada {
    font-size: 1.5em;
}

.noticia .imagen-caption {
    font-size: small;
    color: #666; /* Color para la leyenda de la imagen */
    margin-top: 5px; /* Espaciado sobre la leyenda */
    margin-bottom: 15px; /* Espaciado debajo de la leyenda */
}

.noticia p {
    font-size: 1em; /* Tamaño del texto */
    text-align: justify;
    line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
    margin-bottom: 10px; /* Espaciado entre párrafos */
    color: black; /* Color del párrafo */
}

.contenedor-imagen-16-9 {
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
}

.contenedor-imagen-16-9 .imagen-16-9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}






.titular {
    display: flex; /* Añadir flexbox */
    flex-direction: column; /* Orientación vertical */
    justify-content: space-between; /* Espaciado entre elementos */
    height: 100%; /* Altura completa */
}

.titular a {
    color: black;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.titular a:hover h3{
    text-decoration: underline;
    color: black;
}

.titular-titulo {
    color: black;
    font-size: 1.2em;
    font-weight: 800;
    margin-bottom: 15px; /* Ajusta según tus necesidades */
}

.linea-separadora {
    height: 1px;
    background-color: black; /* Color de la línea */
    width: 100%; /* Asegurar que ocupe todo el ancho */
    margin-top: auto; /* Empujar al fondo si se usa flexbox */
}















.wpp-populares {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 0 0 15px 0;
    text-align: justify;
}

.wpp-populares .titulo-mas-leidos {
    background: beige;
    text-align: center;
    padding: 10px 5px;
    font-size: 1.5em;
    font-weight: 800;
    margin-bottom: 10px;
    cursor: pointer;
}

.wpp-populares .lista-populares {
    list-style: none;
    padding: 0;
}

.wpp-populares .lista-populares li {
    margin-bottom: 10px;
}

.wpp-populares .lista-populares a {
    color: black;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.wpp-populares .lista-populares a:hover {
    text-decoration: underline !important;
    color: black;
}







/* Estilos para el layout de grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
    grid-gap: 20px; /* Espacio entre las columnas y filas */
    margin-bottom: 20px;
}

/* Estilos para el contenedor de adsense */
.google-auto-placed.ap_container {
    margin: 30px 0;
}
.contenedor-adsense-estatico {
    padding: 15px 0;
}
.contenedor-adsense {
    position: sticky;
    top: 150px; /* Ajusta según sea necesario */
}

.titulo-categoria {
    color: black !important;
    display: block;
    width: 100%; /* Ancho al 100% */
    text-decoration: none;
    margin: 10px 0;
}

.titulo-categoria:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
    background-color: beige;
}

#titulo-nacional {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    color: black;
    margin: 0 2px 0 0;
    background-image: url('https://torrijostoday.com/wp-content/uploads/2023/02/espana-1.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se muestre completa */
}

.titulo-categoria h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    color: black;
    margin: 0 2px 0 0;
}

.video_responsive {
    margin-top: 20px; /* Espacio en la parte superior */
    margin-bottom: 20px; /* Espacio en la parte inferior */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    position: relative; /* Posicionamiento relativo para el video */
    padding-bottom: 56.25%; /* Proporción para videos 16:9 */
    height: 0; /* Evita que el contenedor tenga altura propia */
}

.video_responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mini-noticias-relacionadas {
    margin: 0;
    padding: 15px 0 0;
    border-style: solid;
    border-width: 0;
    border-radius: 0;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,.5);
}

.mini-noticia {
    margin: 0px;
    padding: 0px;
}

/* Estilos para dispositivos más grandes */
.col-imagen {
    width: 20% !important;
}

.col-texto {
    width: 80% !important;
}

.mini-noticia-titulo {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    font-style: normal !important;
    color: #000 !important;
    text-align: justify;
}

.mini-noticia-titulo:hover {
    text-decoration: underline !important;
}

/* Media query para dispositivos tablet y móviles */
@media (max-width: 1024px) {
    .col-imagen {
        width: 40% !important; /* Ajusta el ancho para la vista móvil */
    }

    .col-texto {
        width: 60% !important; /* Ajusta el ancho para la vista móvil */
        padding: 0 !important;
    }

    /* Ajustes para el título en vista móvil */
    .mini-noticia-titulo {
        margin: 0;
        font-size: 14px !important; /* Reducir el tamaño de fuente para dispositivos móviles */
    }
}




.lista-empleos {
    list-style: none;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.lista-empleos li {
    width: 50%; /* Ajusta esto para controlar el número de columnas */
    padding: 5px; /* Espaciado alrededor de las tarjetas */
}

.lista-empleos li.doble {
    width: 100%; /* Ajusta esto para controlar el número de columnas */
    padding: 5px; /* Espaciado alrededor de las tarjetas */
}

.lista-empleos li a {
    display: block;
    background: #fff; /* Fondo de la tarjeta */
    padding: 20px; /* Espaciado interno de la tarjeta */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra de la tarjeta */
    border-radius: 5px; /* Bordes redondeados de la tarjeta */
    color: #333; /* Color del texto */
    text-decoration: none; /* Remover el subrayado del enlace */
    transition: all 0.3s ease; /* Transición suave para hover */
}

.lista-empleos li a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
    transform: translateY(-5px); /* Elevación sutil en hover */
}





/* Estilo para dispositivos de escritorio */
.contenedor-flex {
    display: flex;
    align-items: flex-start; /* Ajusta esto según necesites */
}

.imagen-populares {
    flex: 1; /* Ajusta la proporción de la imagen respecto al texto */
    width: 100%; /* Asegura que el div ocupe todo el ancho asignado */
    height: 150px; /* Ajusta la altura deseada */
    background-size: cover; /* Asegura que la imagen cubra todo el espacio disponible */
    background-position: center; /* Centra la imagen en el div */
    margin-right: 20px; /* Espacio entre la imagen y el texto */
}

.texto-populares {
    flex: 3; /* Ajusta la proporción del texto respecto a la imagen */
}

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
    .contenedor-flex {
        flex-direction: column;
    }

    .imagen-populares {
        margin-right: 0;
        margin-bottom: 20px; /* Espacio entre la imagen y el texto */
        width: auto; /* Permite que el div ajuste su ancho en móviles */
        height: 200px; /* Puedes ajustar la altura para móviles si es necesario */
    }
}


.wpp-populares {
    width: 100%;
    padding: 10px;
}

.titulo-mas-leidos {
    margin-bottom: 15px;
}

.lista-populares {
    list-style-type: none;
    padding: 0;
}

.lista-populares .post-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.post-thumbnail {
    flex: 0 0 33%;
    max-width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.post-info {
    flex: 1 0 66%;
    max-width: 66%;
}

.post-info a {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: normal; /* Permitir que el título se ajuste a varias líneas */
    text-overflow: ellipsis;
}

.post-info a:hover {
    text-decoration: underline;
}

.post-excerpt {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
    white-space: normal; /* Permitir que el texto se ajuste a varias líneas */
}

/* Media queries for mobile devices */
@media (max-width: 768px) {
    .lista-populares .post-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-thumbnail {
        flex: 0 0 auto;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 10px; /* Espacio entre la imagen y el texto */
    }

    .post-info {
        flex: 1 0 100%;
        max-width: 100%;
    }
}



/* Estilos para el contenedor principal donde se alinean los meses */
#calendar {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas */
    grid-template-rows: repeat(3, 1fr); /* Tres filas */
    gap: 20px; /* Espacio entre los calendarios de cada mes */
    padding: 20px;
    max-width: 1200px; /* Ajusta según el tamaño de tu pantalla */
    margin: auto; /* Centrar el calendario en la página */
}

/* Ajustes para cada contenedor de mes dentro del calendario */
.month-container {
    border: 1px solid #ccc;
    padding: 5px;
    display: flex;
    flex-direction: column; /* Organiza el título y los días verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
}

/* Estilos para la cabecera de los días y los días mismos */
.days-header, .days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 días de la semana */
    width: 100%; /* Asegura que la cuadrícula ocupa todo el ancho del contenedor */
}

.day-header, .day {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px; /* Reducir la altura para adaptarse al espacio más pequeño */
    font-size: 10px; /* Reducir el tamaño del texto para una mejor visualización */
}

.day {
    border: 1px solid #ccc;
    cursor: pointer;
}

/* Estilos específicos para días con y sin noticias */
.has-news {
    background-color: #4CAF50; /* Verde para días con noticias */
    color: white;
}

.no-news-last-year {
    background-color: #007BFF; /* Azul */
    color: white;
}

.future-day {
    background-color: #f8f9fa; /* Un color neutral, similar al de los días sin eventos */
    color: #212529; /* Un color de texto estándar */
}

.day-button, .empty {
    background-color: #f0f0f0;
    margin: 1px;
    padding: 3px; /* Reducir el padding para manejar el espacio reducido */
}

.day-button:hover {
    background-color: #e0e0e0;
}

.year-btn.active {
    background-color: #4CAF50; /* Verde */
    color: white;
}
.year-btn {
    font-size: smaller;
}

.result-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.result-modal-content {
    background-color: #fefefe;
    margin: 150px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.titulares {
    font-size: 1.5em;
    text-align: center;
}

#years-list {
    margin: -30px auto -10px;
    width: fit-content;
}

/* Estilo para moviles */
@media (max-width: 768px) {
    #calendar {
        display: grid;
        grid-template-columns: 1fr; /* Una única columna */
        gap: 10px; /* Reducir el espacio entre los calendarios de cada mes */
        padding: 10px;
        width: 100%; /* Usa todo el ancho disponible */
        margin: auto; /* Centrar el calendario en la página */
    }
    .day-button {
        padding: 8px; /* Aumentar el padding para facilitar la interacción táctil */
        font-size: 14px; /* Aumentar el tamaño del texto para mejor legibilidad en móviles */
    }

    .result-modal-content {
        margin: 150px auto;
        width: 90%; /* Hacer que la modal sea más ancha en dispositivos móviles para mejor aprovechamiento del espacio */
    }

    .day-header, .day {
        height: 30px; /* Reducir la altura para adaptarse al espacio más pequeño */
    }

    #years-list {
        margin: 15px auto;
    }
}


.aviso-publi {
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-style: italic;
}
.anuncio {
    padding: 5px;
    border: 1px solid lightgrey;
}


/*anuncios*/
.anuncio-300-300 {
    cursor: pointer;
    position: relative;
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.anuncio-300-250 {
    cursor: pointer;
    position: relative;
    max-width: 300px;
    max-height: 250px;
    margin: 0 auto;
    overflow: hidden;
}
.anuncio-960-150 {
    cursor: pointer;
    position: relative;
    max-width: 960px;
    max-height: 150px;
    margin: 0 auto;
    overflow: hidden;
}


/*branding_tarifa_plana*/
.branding_tarifa_plana {
    padding: 10px 0 0;
}
.branding_tarifa_plana-300-300 {
    cursor: pointer;
    position: relative;
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.branding_tarifa_plana-300-250 {
    cursor: pointer;
    position: relative;
    max-width: 300px;
    max-height: 250px;
    margin: 15px auto;
    overflow: hidden;
}

.branding_tarifa_plana-960-150 {
    cursor: pointer;
    position: relative;
    max-width: 960px;
    max-height: 150px;
    margin: 15px auto;
    overflow: hidden;
}
/* Regla para mostrar el branding_tarifa_plana de 960x150 en escritorio */
@media (min-width: 768px) {
  .branding_tarifa_plana-300-250 {
    display: none;
  }

  .branding_tarifa_plana-960-150 {
    display: block;
  }
}
/* Regla para mostrar el branding_tarifa_plana de 300x300 en móvil */
@media (max-width: 767px) {
  .branding_tarifa_plana-960-150 {
    display: none;
  }

  .branding_tarifa_plana-300-250 {
    display: block;
  }
}


#tarteaucitronIcon img {
  width: 32px !important;
  height: 32px !important;
  display: inline !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}