select.datos_extremos {
    border-radius: 5px;
    border: 1px solid #94918a;
}

select.datos_extremos::-webkit-scrollbar {
    width: 10px;
}


select.datos_extremos::-webkit-scrollbar-thumb {
    border-radius: 5px;
    border: 1px solid rgb(193, 193, 193);
}

.content .resultados_extremos > table > caption {
    min-width: 380px;
    background-color: #ececec75;
    padding: 5px;
    margin: 20px;
    border: 1px solid #b3969694;
    border-radius: 5px;
}

.contenedor_extremos {
    width: 100%;
    /* max-width: 400px; */
}

/* El hueco inferior lo aporta ahora el botón de exportar (.exportar-extremos), que va
   justo debajo de la tabla; si se dejara aquí, el botón quedaría muy separado de ella */
.resultados_extremos {
    padding-bottom: 10px;
}

/* Botón de guardar imagen: pegado a la tabla y con aire antes del bloque siguiente
   ("Últimos datos extremos registrados"). El layout de pestañas se come ~28px, así que
   con 70 queda un hueco visible de unos 40 */
.exportar-extremos {
    margin-bottom: 70px;
}

.table_extremos {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
}

.table_extremos .caption {
    padding: 5px 10px;
    margin-bottom: 20px;
    background: #fff2c4;
    color: #163f6c;
    border-radius: 5px;
}

.table_extremos .tr {
    display: flex;
    margin: 5px 0px;
}

.table_extremos .tr .td:first-child {
    width: 40%;
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
}

.table_extremos .tr .td:last-child {
    width: 60%;
    padding-left: 10px;
    text-align: left;
}

.table_extremos .highlight {
    background: #f1ff98;
    border-radius: 5px;
}

.li_widget_extremos a {
    width: 100%;
    height: 100%;
    color: black;
}

@media (max-width: 389px){
    .datos_extremos.selector_periodo {
        max-width: 70px;
    }

    .datos_extremos.selector_variable {
        max-width: 210px;
    }
}
/* Cada registro del top 10 enlaza a su periodo en datos históricos.
   La fila pasa a ser un <a>, así que hay que quitarle el aspecto de enlace y
   devolverle el color del texto: lo que invita a pulsar es la fila entera, no un
   subrayado. */
.table_extremos .tr--enlace {
    color: inherit;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .12s;
}

.table_extremos .tr--enlace:hover,
.table_extremos .tr--enlace:focus-visible {
    background: #e8f1fb;
}

/* La fila resaltada (se llega a ella desde el widget de últimos extremos) mantiene su
   amarillo al pasar por encima: si no, el hover lo tapaba y parecía otra fila */
.table_extremos .tr--enlace.highlight:hover,
.table_extremos .tr--enlace.highlight:focus-visible {
    background: #eaf58a;
}