ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
.PublicidadSuperior:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

.PublicidadLateralDerecho:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}


body{padding: 0; margin: 0; font:normal 14px/18px Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6, p, span, strong{ margin: 0; padding: 0;}
ul{ margin: 0; padding: 0;}
ul li{ margin: 0; padding: 0; list-style: none;}
a{ display: inline-block; margin: 0; padding: 0; text-decoration: none; outline: none;}
a:focus{ outline: none; text-decoration: none; }
a:active{ outline: none; text-decoration: none; }
a:hover{ outline: none; text-decoration: none; }

a.Interno{ display: inline-block; margin: 0; padding: 0; outline: none; font:normal 12px Arial, Helvetica, sans-serif;color:#005b94; text-decoration: underline;}
a.Interno:focus{ outline: none; text-decoration: underline;}
a.Interno:active{ outline: none;text-decoration: underline;}
a.Interno:hover{ outline: none;text-decoration: underline;}

img{outline: none; text-decoration: none;}

/*1140 / 12 = 95 */
/*160 - 640 - 340*/
/*14% 56% 30%*/


/*CABECERA*/

.main_head{width: 100%; float: left;}
.container{max-width: 1140px; margin: 0 auto;}
.main_head_in{width: 100%; float: left;border-bottom: 1px solid #E1E1E1; background-color: #f6f6f6; height: 48px;}
.main_head_lf{width: auto; float: left; height: 48px;}
.main_head_lf img{width: 285px;}
.main_head_lf a{height: 48px;}
.main_head_rt{width: auto; float: right; margin-top: auto; margin-bottom: auto;}
.desk_menu{ display: block;}
.main_head_menu{width: auto; float: right; padding-right: 10px; margin-top: 24px;}
.main_head_menu > ul{margin: 0; padding: 0;}
.main_head_menu > ul > li{margin: 0; padding: 0; float: left; background: url(/imagenes/sep.png) no-repeat right center; }
.main_head_menu > ul > li > a{font-style: normal; font-size: 115%;   color: #005b94; padding: 0 10px; margin:0;}
.main_head_menu > ul > li:hover > a{color: #7ABDE8;}
.main_head_menu > ul > li:last-child{background: none; }
.main_head_menu > ul > li:first-child > a{padding-left: 0 !important;}
.main_head_menu > ul > li:last-child > a{padding-right: 0 !important;}
.menu_toggle {display: none; margin-right: 15px; margin-top: 12px; }


/*BANNERS*/
.PublicidadSuperior{width: 100%; max-height: 260px; text-align: center; float: left; padding: 2px;}
.PublicidadLateralDerecho {width: 100%; max-height: 610px; text-align: center; padding-top: 2px; padding-bottom: 2px; float: left}
.PublicidadContenido{width: 100%; text-align: center; float: left;padding: 2px; margin-bottom: 10px;}


/*CUERPO*/
.index_bodysec{width: 100%; float: left;}
.index_bodysec_in{width: 100%;float: left; padding-top: 3px;}

.index_bodysecL{width: 160px; float: left;}

.index_bodysecR{width: 980px; float: left;}
.index_bodycenter{width:632px; float: left; margin-left: 4px; margin-right: 4px; height: 100%}
.index_bodyRMenu{width: 340px; float: right;}


/*MENU IZQUIERDO*/
.MenuIzquierdo{width: 100%; float: left; margin-bottom: 10px;}
.MenuIzquierdo_Titulo{width: 100%;float: left; color: #005b94; background: #f0f7fd; height: 30px; line-height: 30px; text-align: center; border-bottom: 2px solid #7ABDE8; font-size: 105%;}
.index_bodysecLisT2_list{width: 100%; float: left;}
.index_bodysecLisT2_list ul{margin: 0; padding: 0; }
.index_bodysecLisT2_list ul li{margin: 0; padding: 0; float: left; width: 100%; border-bottom: 1px solid #E1E1E1;}
.index_bodysecLisT2_list ul li a.submenu {background: #f0f7fd; padding-left: 25px; color: #000000; width: 135px; float: left; line-height: 25px; font-style: normal; font-size: 90%;}
.index_bodysecLisT2_list ul li a{background: #f6f6f6; padding-left: 8px; color: #000000; width: 152px; float: left; line-height: 28px; font-style: normal; font-size: 100%;}


.index_bodysecLisT2_list ul li:hover a{background: #E1E1E1; color: #005b94;}
.FormBuscar  {text-align: center; float: left; margin: 5px;}
.TxtBusqueda { line-height: 20px; border: 1px solid #666666;
    font-size: 80%;
    background-color: #FFFFFF;
    width: 130px;
    margin-bottom: 5px;}
/*MENU DERECHO*/
.MenuDerecho{width:100%; margin-bottom: 10px; margin-top: 5px; float: left;}
.MenuDerecho_Titulo{width: 100%;float: left; color: #005b94; background: #f0f7fd; height: 30px; line-height: 30px; text-align: center; border-bottom: 2px solid #7ABDE8; font-size: 105%}
.MenuDerecho_Caja {width: 100%; background: #f6f6f6; border-bottom: 1px solid #E1E1E1; float: left;}

.MenuDerechoSus{width:100%; margin-top: 5px; margin-bottom: 5px; float: left; border: 1px solid #7abde8;}
.MenuDerecho_TituloSus{width: 100%;float: left; color: #005b94; background: #cce5fe; height: 30px; line-height: 30px; text-align: center; border-bottom: 2px solid #005b94; font-size: 105%}
.MenuDerecho_CajaSus {width: 100%; color: #ffffff; background: #f0f7fd; border-bottom: 1px solid #E1E1E1; float: left;}
/*.MenuDerecho_CajaSus {width: 100%; background: #f6f6f6; border-bottom: 1px solid #E1E1E1; float: left;} */

#GotaCorreo {
    position: relative;
    top: 50px;
    left: 5px;
    width: 40px;
    height: 50px;
    background-image: url(/imagenes/gota-correo.gif);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

.TextoCaja {display:block;padding-left: 15px; font-style: normal; font-size: 95%; color: #005b94; line-height: 30px; }
#TxtEmail { line-height: 20px; border: 1px solid #666666;
    font-size: 80%;
    background-color: #FFFFFF;
    width: 300px;
    margin-bottom: 5px;
    display: block;
}
#BtSus {
    line-height: 20px;
    margin-top: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}
/*.FormSuscripcion  {text-align: center; float: left; margin: 10px; width: 100%;}*/
.FormSuscripcion {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.TextoCajaSus2 { clear: both; padding-left: 5px; padding-bottom: 5px; float: left; color: #7ABDE8;}
.TextoCajaSus2 > a{font-style: normal; font-size: 90%;   color: #005b94; padding: 0 10px; margin:0; text-decoration: underline}
.TextoCajaSus2 > a:hover{color: #005b94;}

.textopeque7 {
    padding-left: 5px;
    font-size: 7pt;
}

.MenuDerecho_CajaWebmaster {width: 100%; background: #f6f6f6; border-bottom: 1px solid #E1E1E1; float: left; padding-top: 3px; padding-bottom: 3px;}
.ImagenWebmaster { width: 160px; float: left; padding: 5px; height: 120px;}
.CodigoWebmaster {float: right; padding-top: 8px; padding-right: 5px}
.ImagenWebmaster2 { width: 88px; float: left; padding-top: 45px; padding-left: 45px;}

/*CENTRAL*/
.btn-whatsapp {
    display: inline-block;
    padding: 5px 10px;
    font-size: 9pt;
    color: #fff;
    background-color: #25D366; /* Color del logo de WhatsApp */
    text-decoration: none;
    border-radius: 2px;
}

.SeccionCentral {width: 100%; margin-bottom: 10px; float: left;}
.SeccionCentral_Titulo{width: 100%;float: left;  background: #f6f6f6; height: 30px; line-height: 30px; text-align: left; border-bottom: 2px solid #8f8f8f;}
.SeccionCentral_TituloTexto {font-size: 120%; color: #5e5e5e; margin-left: 25px; font-weight: bold; }
.SeccionCentral_Caja {width: 100%; float: left;}

.Separador { height: 4px; float: left; width: 100%}

.Anuncio { padding-left: 25px; color:#7abde8; font-size: 10px; }

.FilaSeccion { float: left; line-height: 34px; height: 34px; padding-top: 1px; padding-bottom: 2px; width: 100%; color: #6d6d6d; font-size: 120%;}
.Campo {width: 373px; border-left-width: 4px; border-left-style: solid; border-left-color: #d1e3f7; padding-left:5px; margin-left: 15px; background-color: #F8F8F8;  float: left; }
.Resultado { width: 60px;  background-color: #F8F8F8; text-align: right; padding-right: 10px;  float: left; }
.Unidad { width: 40px; float: left; background-color: #F8F8F8; height: 34px; line-height: 28px;}
.Unidad2 { width: 40px; float: left; background-color: #F8F8F8;}
.Grafico { text-align: center; margin: 0 auto; clear: left}
.CampoInf {width: 40%; border-left-width: 4px; border-left-style: solid; border-left-color: #d1e3f7; padding-left:5px; margin-left: 15px; background-color: #F8F8F8;  float: left; }
.ResultadoInf { width: 54%;  background-color: #F8F8F8; text-align: left; float: left; }


.Tabla { background-color: #f0f7fd;  border: 1px solid #7abde8; }
.Tabla .ResultadoCampo:hover {background: #f6f6f6;}
.Tabla .Campos td { font-size: 85%; height: 30px; line-height: 30px; background-color: #d8ebf9; border-bottom: 1px solid #7abde8; color: #5e5e5e; text-align: center; }
.Tabla  a { display: inline-block; float: left; color: #404040; font-size: 100%; font-weight: bold; text-decoration: none; padding-left: 18px;  line-height: 30px; }
.TiempoReal { float: left; line-height: 30px; }
.TiempoReal > img { vertical-align: middle; }
.TiempoReal2 { float: left; width: 16px; height: 16px; }
.Tabla .ResultadoCampo td { font-size: 85%; height: 30px; line-height: 30px; border-bottom: 1px solid #FFFFFF; color: #5e5e5e; padding-left: 5px; text-align: center; }
.Tabla .Campos .Campo1 {width: 332px;}
.Tabla .Campos .Campo2 {width: 90px;}
.Tabla .Campos .Campo3 {width: 90px;}
.Tabla .Campos .Campo4 {width: 90px;}

.Tabla .CamposP td { font-size: 85%; height: 30px; line-height: 30px; background-color: #d8ebf9; border-bottom: 1px solid #7abde8; color: #5e5e5e; text-align: center; }
.Tabla .ResultadoCampoP:hover {background: #f6f6f6;}
.Tabla .ResultadoCampoP td { font-size: 85%; height: 30px; line-height: 30px; border-bottom: 1px solid #FFFFFF; color: #5e5e5e; padding-left: 5px; text-align: center; }
.Tabla .CamposP .Campo1P {width: 300px;}
.Tabla .CamposP .Campo2P {width: 100px;}
.Tabla .CamposP .Campo3P {width: 50px;}
.Tabla .CamposP .Campo4P {width: 50px;}
.Tabla .CamposP .Campo5P {width: 50px;}
.Tabla .CamposP .Campo6P {width: 50px;}
.Tabla .CamposP .Campo7P {width: 50px;}
.Tabla .CamposP .Campo8P {width: 50px;}

.AvisoTiempoReal {font-size: 85%; padding: 10px; text-align: center;}

.Contactar {width: 100%; line-height: 30px; float: left; background-color: #F8F8F8;}
.ContactarCampo {width: 40%; float: left; text-align: right; padding-right: 10px;}
.BotonEnviar {float: left; width: 100%; text-align: center; line-height: 40px;}

.Mapa {width: 100%; height: 540px; margin: 0 auto;}

#afsanalytics {text-align: center;}

.SelectMovil {display: none;}
/*160 - 640 - 340*/
/*(min-width:820px) and */



/*Primero reducimos la columna derecha hasta 170px*/


@media only screen and (min-width:990px) and (max-width:1160px) {
    .container { width: 970px;}
    .index_bodysecR { width: 810px; }
    .index_bodyRMenu { width: 162px; float: left; margin: 4px; text-align: center;}
    #TxtEmail {width: 150px;}
    .PublicidadLateralDerecho{width: 100%; float: left; margin-top: 10px; }
    .TextoCaja { padding: 2px; line-height: 25px; text-align: center ;}
    .ImagenWebmaster { padding: 0;}
}

@media only screen and (min-width:820px) and (max-width:990px) {
    .container { width: 800px;}
    .index_bodysecR { width: 632px; }
    .index_bodyRMenu { width: 632px; float: left; margin: 4px; text-align: center;}
    .MenuDerecho{width:50%; margin-top: 5px; margin-left: 5px;   margin-bottom: 0; float: right;}
    .CodigoWebmaster {width: 40%;}
    .CodigoWebmaster > textarea {width: 90%; height: 100px; }
    .PublicidadLateralDerecho{width: 48%; float: left; margin-top: 10px; }
}

@media only screen and (min-width:744px) and (max-width:820px) {
    .container { width: 724px;}
    .index_bodysecR { width: 564px; }
    .index_bodyRMenu { width: 564px; float: left; margin: 4px; text-align: center;}
    .MenuDerecho{width:50%; margin-top: 5px; margin-left: 5px;   margin-bottom: 0; float: right;}
    .CodigoWebmaster {width: 30%;}
    .CodigoWebmaster > textarea {width: 90%; height: 100px; }
    .PublicidadLateralDerecho{width: 48%; float: left; margin-top: 10px; }

    .index_bodycenter{width:560px; float: left; margin-left: 2px; margin-right: 2px; height: 100%}
    #TxtEmail {  width: 200px; }
    .Tabla .Campos .Campo1 {width: 260px;}
    .Tabla .CamposP .Campo1P {width: 300px;}
    .Tabla .CamposP .Campo2P {width: 100px;}
    .Campo { width: 304px;}
}

@media only screen and (min-width:584px) and (max-width:744px) {
    .container { width: 564px;}
    .desk_menu {display: none; }
    .menu_toggle {display: block; }
    .index_bodysecL { display: none; }
    .SelectMovil {display: block; margin-bottom: 15px; text-align: center;}

    .index_bodysecR { width: 564px; }
    .index_bodyRMenu { width: 564px; float: left; margin: 4px; text-align: center;}
    .MenuDerecho{width:50%; margin-top: 5px; margin-left: 5px;   margin-bottom: 0; float: right;}
    .CodigoWebmaster {width: 30%;}
    .CodigoWebmaster > textarea {width: 90%; height: 100px; }
    .PublicidadLateralDerecho{width: 48%; float: left; margin-top: 10px; }

    .index_bodycenter{width:560px; float: left; margin-left: 2px; margin-right: 2px; height: 100%}
    #TxtEmail {  width: 200px; }
    .Tabla .Campos .Campo1 {width: 260px;}
    .Tabla .CamposP .Campo1P {width: 300px;}
    .Tabla .CamposP .Campo2P {width: 100px;}
    .Campo { width: 304px;}

    .ad_centro{display: none!important;}
}

@media only screen and (min-width:325px) and (max-width:584px) {
    .container { max-width: 564px; width: 100%}
    .desk_menu {display: none;}
    .menu_toggle {display: block; }
    .index_bodysecL { display: none; float: none;}
    .SelectMovil {display: block; margin-bottom: 15px; text-align: center;}

    .index_bodysecR { max-width: 564px; width: 100%}
    .index_bodyRMenu { margin: 0 auto; float: none;}
    .index_bodycenter{width:100%; margin-left: 0; margin-right: 0;}
    .Grafico > img {max-width: 99%;}
    .SeccionCentral_Titulo {height: 25px; line-height: 25px; }
    .SeccionCentral_TituloTexto {font-size: 100%; color: #5e5e5e; margin-left: 10px;}
    .FilaSeccion { line-height: 25px; height: 25px;  font-size: 90%; padding-bottom: 1px;}
    .Campo {width: 58%; margin-left: 2px; border-left-width: 3px; padding-left: 3px; }
    .Resultado { width: 12%;   padding-right: 1px;  float: left; }
    .Unidad{ width: 7%; line-height: 18px; height: 25px;}
    .Unidad2 { width: 7%;}
    .CampoInf {width: 40%; margin-left: 2px; border-left-width: 1px; padding-left: 3px; }
    .ResultadoInf { width: 54%;   padding-right: 1px;  float: left; }

    .Separador {height: 2px;}

    #TxtEmail {  width: 300px; }

    .Tabla { width: 100%; }
    .Tabla  a { font-size: 95%; padding-left: 5px;}
    .Tabla .Campos td { font-size: 95%; height: 25px; line-height: 25px; }
    .TiempoReal { float: left; line-height: 25px; }
    .TiempoReal > img { vertical-align: middle; }
    .TiempoReal2 { float: left; width: 16px; height: 16px; }
    .Tabla .ResultadoCampo td { font-size: 95%; height: 25px; line-height: 25px;padding-left: 2px; }
    .Tabla .Campos .Campo1 {width: auto;}
    .Tabla .Campos .Campo2 {width: auto;}
    .Tabla .Campos .Campo3 {width: auto;}
    .Tabla .Campos .Campo4 {width: auto;}

    .Tabla .CamposP td { font-size: 75%; height: 25px; line-height: 25px; }
    .Tabla .ResultadoCampoP td { font-size: 75%; height: 25px; line-height: 25px;padding-left: 2px; }
    .Tabla .CamposP .Campo1P {width: auto;}
    .Tabla .CamposP .Campo2P {width: auto;}
    .Tabla .CamposP .Campo3P {width: auto;}
    .Tabla .CamposP .Campo4P {width: auto;}
    .Tabla .CamposP .Campo5P {width: auto;}
    .Tabla .CamposP .Campo6P {width: auto;}
    .Tabla .CamposP .Campo7P {width: auto;}
    .Tabla .CamposP .Campo8P {width: auto;}

    /*MENU IZQUIERDO*/
    .index_bodysecL {width: 75%;  display: none;}
    .MenuIzquierdo{ margin-bottom: 2px;}
    .MenuIzquierdo_Titulo{height: 25px; line-height: 25px; font-size: 105%;}
    .index_bodysecLisT2_list ul li a{ width: 98%; padding-left: 2%;}
    .index_bodysecLisT2_list ul li a.submenu {width: 94%; padding-left: 6%;}

    .ad_centro{display: none!important;}
}

@media only screen and (max-width:325px) {
    .container { width: 100%}
    .desk_menu {display: none;}
    .main_head_lf {width: 85%;}
    .main_head_lf img{width: 85%; }
    .menu_toggle {display: block; }

    .index_bodysecR { width: 100%}
    .index_bodysecRindex_bodysecR { width: 100%}
    .index_bodyRMenu {width: 99%;}
    .index_bodycenter{width:100%; margin-left: 0; margin-right: 0;}
    .Grafico > img {max-width: 99%;}
    .SeccionCentral_Titulo {height: 25px; line-height: 25px; }
    .SeccionCentral_TituloTexto {font-size: 95%; color: #5e5e5e; margin-left: 10px;}
    .FilaSeccion { line-height: 25px; height: 25px;  font-size: 85%; padding-bottom: 1px;}
    .Campo {width: 58%; margin-left: 2px; border-left-width: 3px; padding-left: 3px; }
    .Resultado { width: 12%;   padding-right: 1px;  float: left; }
    .Unidad{ width: 7%; line-height: 18px; height: 25px;}
    .Unidad2 { width: 7%;}
    .Separador {height: 2px;}
    .CampoInf {width: 40%; margin-left: 2px; border-left-width: 3px; padding-left: 3px; }
    .ResultadoInf { width: 52%;   padding-right: 1px;  float: left; }


    .Tabla { width: 100%; }
    .Tabla  a { font-size: 90%; padding-left: 5px;}
    .Tabla .Campos td { font-size: 90%; height: 25px; line-height: 25px; }
    .TiempoReal { float: left; line-height: 25px; }
    .TiempoReal > img { vertical-align: middle; }
    .TiempoReal2 { float: left; width: 16px; height: 16px; }
    .Tabla .ResultadoCampo td { font-size: 90%; height: 25px; line-height: 25px;padding-left: 2px; }
    .Tabla .Campos .Campo1 {width: auto;}
    .Tabla .Campos .Campo2 {width: auto;}
    .Tabla .Campos .Campo3 {width: auto;}
    .Tabla .Campos .Campo4 {width: auto;}

    .Tabla .CamposP td { font-size: 75%; height: 25px; line-height: 25px; }
    .Tabla .ResultadoCampoP td { font-size: 75%; height: 25px; line-height: 25px;padding-left: 2px; }
    .Tabla .CamposP .Campo1P {width: auto;}
    .Tabla .CamposP .Campo2P {width: auto;}
    .Tabla .CamposP .Campo3P {width: auto;}
    .Tabla .CamposP .Campo4P {width: auto;}
    .Tabla .CamposP .Campo5P {width: auto;}
    .Tabla .CamposP .Campo6P {width: auto;}
    .Tabla .CamposP .Campo7P {width: auto;}
    .Tabla .CamposP .Campo8P {width: auto;}

    .MenuDerecho_CajaWebmaster {float: left; text-align: center;}
    .ImagenWebmaster { float: none; margin: 0 auto;}
    .CodigoWebmaster {float: none; margin: 0 auto;}
    .ImagenWebmaster2 { width: 88px; float: none; padding:5px; margin: 0 auto;}

    .SelectMovil {display: block; margin-bottom: 15px; text-align: center;}

    /*MENU IZQUIERDO*/
    .index_bodysecL {width: 75%;  display: none;}
    .MenuIzquierdo{ margin-bottom: 2px;}
    .MenuIzquierdo_Titulo{height: 25px; line-height: 25px; font-size: 105%;}
    .index_bodysecLisT2_list ul li a{ width: 98%; padding-left: 2%;}
    .index_bodysecLisT2_list ul li a.submenu {width: 94%; padding-left: 6%;}

    .ad_centro{display: none!important;}
}

/* Contenedor general */
#mapa-precipitaciones {
    text-align: center;
    margin: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

/* Envoltorio para poder posicionar la barra dentro de la imagen */
#mapa-precipitaciones .mapa-wrapper {
    position: relative;
    display: inline-block; /* se ajusta al ancho de la imagen */
}

/* Radios ocultos (solo usamos las labels) */
#mapa-precipitaciones input[type="radio"] {
    display: none;
}

/* Barra flotante en esquina superior derecha */
#mapa-precipitaciones .time-bar {
    position: absolute;
    top: 2px;
    right: 8px;
    background: rgba(255, 255, 255, 0.85);
    padding: 3px 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
    white-space: nowrap;

    z-index: 20;  /* por encima del mapa y del radar */

    display: block;
    text-align: right;
}

/* Bloque de botones 1h/6h/12h/24h */
#mapa-precipitaciones .time-bar .time-buttons {
    margin-bottom: 3px;
}

/* Botones de intervalo de tiempo */
#mapa-precipitaciones .time-bar label {
    padding: 2px 6px;
    border: 1px solid #999;
    background: #eee;
    cursor: pointer;
    user-select: none;
    margin-left: 2px;
    font-size: 11px;
    width: 32px;
}

/* Label activa según el radio seleccionado */
#mapa-precipitaciones:not(.radar-mode) #mp-1h:checked  ~ .time-bar label[for="mp-1h"],
#mapa-precipitaciones:not(.radar-mode) #mp-6h:checked  ~ .time-bar label[for="mp-6h"],
#mapa-precipitaciones:not(.radar-mode) #mp-12h:checked ~ .time-bar label[for="mp-12h"],
#mapa-precipitaciones:not(.radar-mode) #mp-24h:checked ~ .time-bar label[for="mp-24h"] {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
}


/* Barra de controles de radar */
#mapa-precipitaciones .radar-bar {
    margin-bottom: 1px;
    text-align: center;
    width: 100%;
}

/* Botones de radar (prev / toggle / play / next) */
#mapa-precipitaciones .radar-btn {
    padding: 1px 6px;
    margin: 0 1px;
    border: 1px solid #999;
    background: #eee;
    cursor: pointer;
    font-size: 11px;
    line-height: 15px;
}

/* Botón radar activo (modo radar) */
#mapa-precipitaciones .radar-btn.radar-active {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
}

/* Información de fecha del radar: oculta si no estamos en modo radar */
#mapa-precipitaciones .radar-info {
    font-size: 11px;
    text-align: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 4px;
    padding-bottom: 0;
    display: none;
    line-height: 15px;
}

#mapa-precipitaciones .radar-info.radar-info-visible {
    display: block;
}

/* Contenedor de imágenes: posición relativa
   para poder superponer el radar sobre el mapa */
#mapa-precipitaciones .imagenes {
    position: relative;
    z-index: 1;
}

/* Imágenes de precipitación: por defecto ocultas */
#mapa-precipitaciones .imagenes img.img-1h,
#mapa-precipitaciones .imagenes img.img-6h,
#mapa-precipitaciones .imagenes img.img-12h,
#mapa-precipitaciones .imagenes img.img-24h {
    display: none;        /* luego se pone en block con las reglas :checked */
    width: 98%;
    height: auto;
    border: 1px solid #ccc;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 1;
}

/* Mostrar la imagen correspondiente al radio seleccionado */
#mp-1h:checked  ~ .imagenes .img-1h,
#mp-6h:checked  ~ .imagenes .img-6h,
#mp-12h:checked ~ .imagenes .img-12h,
#mp-24h:checked ~ .imagenes .img-24h {
    display: block;
}

/* Imagen de radar, superpuesta sobre el mapa */
#mapa-precipitaciones .imagenes img.img-radar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 98%;
    height: auto;
    pointer-events: none;           /* que no bloquee los clics del mapa */
    border: 1px solid transparent;
    box-sizing: border-box;
    display: none;                  /* oculta por defecto */
    z-index: 2;                     /* por encima de las de lluvia */
}

/* Cuando el JS añade esta clase, el radar se ve */
#mapa-precipitaciones .imagenes img.img-radar.radar-visible {
    display: block;
}