/* MEGATIEMPO - INFORME DIARIO
UPDATE:25/09/2024
ivan.hermosilla@megamedia.cl

INDICE:
----------------------------------------
    1. Generales
    2. Especial: Informe diario
    3. Responsive
*/

/*1. Generales 
---------------------------------*/
/* Colores */
:root {
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-blue: #07369E;
    --color-blue-sky: #00C9FF;
    --color-yellow: #FFC200;
    --color-grey-light: #e8e8ee;
    --color-grey-dark: #484955;
    --color-grey-dark-night: #252729;
    --color-red: #E2192C;
}

/*2. Especial: Informe diario
---------------------------------*/
.especialInformeDiario {
    display: flex;
    position: relative;
    width: 100%;
    margin: 30px 0;
}
.especialInformeDiario .box {
    display: block;
    position: relative;
    width: 1290px;
    margin: 0 auto;
}
.especialInformeDiario .box .contenedor {
    display: block;
    position: relative;
    width: 960px;
    float: left;
}
.especialInformeDiario .box .contenedor .titulo {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 0 10px 0;
}
.especialInformeDiario .box .contenedor .titulo h3 {
    font-weight: 900;
    font-size: 3.2em;
    color: var(--color-grey-dark);
}
.especialInformeDiario .box .contenedor .titulo h3:hover {
    opacity: 0.75;
}
.especialInformeDiario .box .contenedor .contenido {
    display: inline-block;
    position: relative;
    width: 100%;
}
.especialInformeDiario .box .contenedor .contenido .nota  {
    display: block;
    position: relative;
    width: 32%;
    height: 305px;
    float: left;
    margin: 0 2% 0 0;
}
.especialInformeDiario .box .contenedor .contenido .widget  {
    display: block;
    position: relative;
    width: 66%;
    height: 470px;
    float: left;
    margin: 0;
}
.especialInformeDiario .box .contenedor .contenido .widget iframe {
    width: 100%;
    height: 470px;
    border: 0;
}
.especialInformeDiario .box .contenedor .contenido .nota  article figure {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background-color: var(--color-grey-light);
    width: 100%;
    height: 173px;
}
.especialInformeDiario .box .contenedor .contenido .nota  article figure img {
    width: 100%;
    height: 174px;
}
.especialInformeDiario .box .contenedor .contenido .nota  article figure img[alt]:after {
    display: block;
    position: absolute;
    border-radius: 10px 10px 0 0;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    content: attr(alt);
    background-color: var(--color-grey-light);
    color: transparent;
    z-index: 9;
}
.especialInformeDiario .box .contenedor .contenido .nota  article figure img:hover {
    opacity: 0.75;
}
.especialInformeDiario .box .contenedor .contenido .nota  article .titular {
    display: block;
    width: 100%;
    height: 134px;
    background-color:  var(--color-white);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    margin: -2px 0 0 0;
}
.especialInformeDiario .box .contenedor .contenido .nota  article .titular h2 {
    color: var(--color-grey-dark);
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.3em;
}
.especialInformeDiario .box .contenedor .contenido .nota  article .titular h2:hover {
    opacity: 0.75;
}


.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad {
display: inline-block;
width: 100%;
background-color: #FFF;
padding: 20px;
border-radius: 10px;
margin: 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box {
display: block;
position: relative;
width: 100%;
padding: 0;
margin: 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenedor {
    width: 100%;
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .titulo {
display: inline-block;
position: relative;
width: 100%;
margin: 0 0 10px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .titulo h2 {
font-weight: 900;
font-size: 3.2em;
color: #484947;
padding: 10px 0 0 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido {
display: inline-block;
position: relative;
width: 100%
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box {
display: block;
position: relative;
width: 100%
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos {
display: inline-block;
position: relative;
width: 100%;
margin: 0;
padding: 30px;
border: 2px solid #F3F3F3;
border-radius: 30px;
background: rgb(243,243,243);
background: linear-gradient(-180deg,rgba(243,243,243,1) 0%,rgba(243,243,243,0) 30%)
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left {
display: block;
position: relative;
width: 100%;
float: left;
text-align: center
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right {
display: block;
position: relative;
width: 100%;
float: left
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .localidad {
font-weight: 900;
font-size: 2em;
color: #25262A;
padding: 0 0 10px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .clima {
font-weight: 700;
font-size: 1.4em;
color: #25262A;
padding: 0 0 3px 0;
text-transform: capitalize
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura {
display: inline-block;
position: relative;
width: 100%;
margin: 10px 0 4px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .icono {
display: block;
position: relative;
width: 50%;
float: left;
text-align: right;
padding: 0 4px 0 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .icono img {
width: 50px
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .cifra {
display: block;
position: relative;
width: 50%;
float: left;
text-align: left;
padding: 0 0 0 4px
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .leyenda {
display: flex;
justify-content: center;
padding: 4px 0 0 0;
width: 100%;
text-align: center;
font-size: 1.4em;
font-weight: 400;
margin: -2px 0 10px 0;
border-top: 1px solid #f3f3f3
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .cifra p {
font-weight: 900;
font-size: 4em;
color: #25262A
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv {
display: block;
position: relative;
width: 150px;
margin: 0 auto
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .uv {
display: block;
position: relative;
width: 100%;
background-color: #fff;
border: 2px solid #d6d7d9;
font-size: 1.2em;
font-weight: 700;
color: #25262a;
text-transform: uppercase;
text-align: left;
padding: 4px 30px;
border-radius: 20px
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice {
display: block;
position: absolute;
top: 0;
right: -4px;
background-color: #fff;
border: 2px solid #25262a;
width: 60%;
float: right;
z-index: 9;
font-size: 1.2em;
font-weight: 700;
color: #25262a;
text-align: center;
padding: 4px;
border-radius: 20px;
text-transform: capitalize
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice.bajo {
border: 2px solid #2CD3B5
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice.moderado {
border: 2px solid #2ED366
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice.alto {
border: 2px solid #E6B310
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice.muy-alto {
border: 2px solid #EA7910
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice.extremo {
border: 2px solid #f44336
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item {
display: block;
position: relative;
width: 23%;
margin: 30px 2% 0 0;
float: left;
text-align: center
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item:nth-child(6n) {
display: block;
position: relative;
width: 23%;
margin: 30px 0 0 0;
float: left;
text-align: center
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .calendario {
font-weight: 400;
font-size: 1.4em;
color: #25262A;
padding: 0 0 6px 0;
text-transform: uppercase
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .calendario .fecha {
font-weight: 700
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .icono img {
width: 50px
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .max {
font-weight: 700;
font-size: 1.4em;
color: #e49b11;
padding: 4px 0 3px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .max span {
color: #25262A;
padding: 0 0 0 6px;
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .min {
font-weight: 700;
font-size: 1.4em;
color: #17a1c3;
padding: 0 0 3px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .min span {
color: #25262A;
padding: 0 0 0 6px;
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenedor .sinDatos {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
padding: 60px 30px;
border: 2px solid #F3F3F3;
border-radius: 30px;
background: rgb(243,243,243);
background: linear-gradient(-180deg,rgba(243,243,243,1) 0%,rgba(243,243,243,0) 50%)
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenedor .sinDatos svg {
width: 60px;
height: 60px;
fill: #ececec
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenedor .sinDatos h3 {
color: var(--color-grey-dark);
font-size: 2em;
padding: 10px 0 4px 0
}
.especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenedor .sinDatos p {
color: var(--color-grey-dark);
font-size: 1.4em
}


/*3. Responsive 
---------------------------------*/

/* Mobile */
@media (min-width: 0px) and (max-width: 767px) {

    /*2. Especial: Informe diario
    ---------------------------------*/
    .especialInformeDiario {
        padding: 0 10px;
    }
    .especialInformeDiario .box {
        width: 100%;
    }
    .especialInformeDiario .box .contenedor {
        width: 100%;
    }
    .especialInformeDiario .box .contenedor .titulo h3 {
        font-size: 2.8em;
    }
    .especialInformeDiario .box .contenedor .contenido .nota {
        width: 100%;
        height: auto;
    }
    .especialInformeDiario .box .contenedor .contenido .widget {
        width: 100%;
        height: auto;
        margin: 10px 0 0 0;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure {
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        padding-bottom: 55.5%;
        overflow: hidden;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure img {
        display: block;
        width: 500px;
        height: auto;
        min-height: 1px;
        min-width: 1px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular {
        height: auto;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular h2 {
        font-size: 2em;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) { 

   /*2. Especial: Informe diario
    ---------------------------------*/
    .especialInformeDiario .box {
        width: 720px;
    }
    .especialInformeDiario .box .contenedor {
        width: 720px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure {
        width: 230px;
        height: 130px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure img {
        width: 230px;
        height: 130px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular {
        height: 170px;
        padding: 10px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular h2 {
        font-size: 1.6em;
    }
    
}

/* Tablet */
@media (min-width: 1024px) and (max-width: 1160px) { 

    /*2. Especial: Informe diario
    ---------------------------------*/
    .especialInformeDiario .box {
        width: 1000px;
    }
    .especialInformeDiario .box .contenedor {
        width: 670px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure {
        width: 100%;
        height: 120px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure img {
        width: 100%;
        height: 121px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular {
        height: 170px;
        padding: 10px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular h2 {
        font-size: 1.6em;
    }

}

/* Laptop */
@media (min-width: 1161px) and (max-width: 1289px) {

    /*2. Especial: Informe diario
    ---------------------------------*/
    .especialInformeDiario .box {
        width: 1160px;
    }
    .especialInformeDiario .box .contenedor {
        width: 830px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure {
        width: 100%;
        height: 149px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article figure img {
        width: 100%;
        height: 150px;
    }
    .especialInformeDiario .box .contenedor .contenido .nota article .titular {
        height: 170px;
    }

}


@media (min-width: 0) and (max-width:4000px) {

    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad {
        padding:20px
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .titulo h2 {
        font-size: 2.6em
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos {
        margin: 4px 0 0 0;
        padding: 20px 10px 0 10px;
        border-radius: 10px;
        background: linear-gradient(-180deg,rgba(243,243,243,1) 0%,rgba(243,243,243,0) 20%)
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left {
        width: 100%
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .localidad {
        font-size: 1.8em;
        text-align: left;
        border-bottom: 1px solid #ebebeb;
        margin: 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right {
        width: 100%;
        margin: 30px 0 0 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura {
        width: 50%;
        float: left
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv {
        width: 50%;
        float: left;
        text-align: left
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .clima {
        width: 50%;
        float: right;
        text-align: left;
        margin: 20px 0 0 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .leyenda {
        display: flex;
        justify-content: center;
        padding: 4px 0 0 0;
        width: 70%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.2em
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .icono {
        width: 40%;
        text-align: center
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .temperatura .cifra {
        width: 60%
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .indice {
        width: 70%
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item {
        width: 100%;
        margin: 0 0 10px 0;
        border-bottom: 1px solid #f3f3f3;
        padding: 0 0 10px 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item + .item + .item + .item {
        border-bottom: 0px solid #f3f3f3;
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item:nth-child(6n) {
        width: 100%;
        margin: 0;
        border-bottom: 0;
        padding: 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .calendario {
        width: 25%;
        float: left;
        text-align: center;
        padding: 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .icono {
        width: 25%;
        float: left;
        text-align: left
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .max {
        width: 25%;
        float: left;
        text-align: left;
        padding: 10px 0 0 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .min {
        width: 25%;
        float: left;
        text-align: left;
        padding: 10px 0 0 0
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .calendario .fecha {
        display: block;
        font-size: 1.4em
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .right .item .icono img {
        width: 40px
    }
    .especialInformeDiario .box .contenedor .contenido .widget #w_pronosticoLocalidad .box .contenido .box .datos .left .indiceUv .uv {
        padding: 4px 20px
    }

}