body {
  padding-top: 171px;
  margin: 0;
  /*margen pagina desde arriba.*/
  width: 100%;
}

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*para pie de pag debajo*/

html,
body {
  height: 100%;
  width: 100%;
}

/*Diseños links*/
a.neutro:link {
  color: rgb(0, 0, 0) !important;
}

a.neutro:visited {
  color: rgb(0, 0, 0) !important;
}

a.neutro:active {
  color: rgb(0, 0, 0) !important;
}

a.neutro:hover {
  color: #3b3b3b !important;
}

a:link {
  color: #fff;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: #fff;
}

a:active {
  color: #fff;
}

a:hover {
  color: #ffffff;
}

.negro {
  color: #0000ff;
}

/* Responsive Texto y interiores*/

.content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
  /*para pie de pag debajo*/
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -0em;
  text-align: center;
  /*Responsive Tamaño movil*/
}

/*Tabla historicos tamaño escritorio*/

.tabla1 {
  font-family: Verdana, Arial, Helvetica, san-serif;
  font-size: 12px;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border: black 1px solid;
}

/*Tabla meses*/

.tabla2 {
  align-content: center;
  font-family: Verdana, Arial, Helvetica, san-serif;
  font-size: 10px;
  text-align: center;
  width: 95%;
  border-collapse: collapse;
  border: black 1px solid;
}

.tabla3 {
  align-content: center;
  font-family: Verdana, Arial, Helvetica, san-serif;
  font-size: 11px;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

/* Rejilla fina y sólida. Sin esto las celdas heredan el borde 'inset' que el navegador
   pone por el atributo border="1" del HTML: una línea biselada en 3D, con dos tonos de
   gris, que envejece la tabla. El color se mantiene en negro, que es como estaba: lo que
   cambia es el trazo, ahora limpio y de un solo tono. */
.tabla3 td,
.tabla3 th {
  border: 1px solid #000;
}

.unidades {
  text-align: center;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 11px;
  width: 98%;
  margin-left: 5px;
  margin-right: 5px;
}

/*Recorte de imagenes ult 24h*/

img.recorteimg {
  -webkit-clip-path: polygon(0.65% 9%, 99% 9%, 99% 99%, 0.65% 95%);
  -moz-clip-path: polygon(0.65% 9%, 99% 9%, 99% 99%, 0.65% 95%);
  clip-path: polygon(0.65% 9%, 99% 9%, 99% 99%, 0.65% 95%);
}

/* HOVER STYLES popup explicativo */

#pop-up {
  display: none;
  position: absolute;
  width: 380px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

#pop-up2 {
  display: none;
  position: absolute;
  width: 350px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

#pop-up3 {
  display: none;
  position: absolute;
  width: 350px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

#piepagina {
  width: 100%;
  height: 50px;
  position: absolute;
  text-align: center;
  background-color: #0e0e0e;
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 4em;
}

#temp {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 63px;
  text-align: center;
}

/* Unidad ºC de la temperatura grande: más pequeña, algo elevada y separada, para
   que no compita con el número. Hereda el color de #temp (cambia según la temp) */
#temp .temp-unidad {
  font-size: 0.60em;
  vertical-align: 0.50em;
  margin-left: 10px;
}

.columna1,
.columna2,
.columna3,
.columna4,
.columna5,
.columna6,
.columna7,
.columna8,
.columna9,
.columna10,
.columna11,
.columna12,
.columna13,
.columna14,
.columna15,
.columna16,
.columna17 {
  width: 100%;
}

.columna18 {
  display: block;
  width: 100%;
  padding: 0px 10px;
}

/*BOTON OBTENER MES ANTERIOR, DE LA PAGINA DATOSMES.PHP*/

.new_buttons {
  font-size: 0.7em;
  font-weight: bold;
  color: #31c5f2;
  background-color: white;
  border: 1px solid #31c5f2;
  border-radius: 5px;
  padding: 2px 4px;
  vertical-align: 0.5px;
}

.new_buttons:hover {
  color: white;
  background-color: #31c5f2;
}

/*SELECTS CONSULTA DATOS EXTREMOS*/

select.datos_extremos option {
  padding: 2px 7px;
}

/*Divs resultados datos extremos*/

div.resultados_extremos > table {
  margin: 0 auto;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.8em;
  border-collapse: separate;
  border-spacing: 0.7em;
  min-width: 30%;
}

div.resultados_extremos > table > caption {
  padding: 5px 0px 20px 0px;
  opacity: 0.8;
  font-size: 1em;
}

div.resultados_extremos tr {
  margin-top: 15px;
  margin-bottom: 15px;
}

div.resultados_extremos td:nth-child(1) {
  text-align: right;
  padding-right: 10px;
  font-weight: bold;
}

div.resultados_extremos td:nth-child(2) {
  text-align: left;
  padding-left: 10px;
}

/*Contenedor tabla ultimo año (datosAno.php)*/

#tablas_ultimos_anos {
  text-align: center;
}

.tabla-resumen-mes2 {
  margin: 0 auto;
  border-collapse: collapse;
}

.tabla-resumen-mes2 td {
  border: 0;
}

.tabla-resumen-mes2 td:first-child {
  min-width: 192px;
  text-align: left;
  padding-right: 5px;
}

.tabla-resumen-mes2 td:last-child {
  min-width: 80px;
  text-align: left;
  padding-left: 5px;
}

/* En pantallas estrechas las dos tablas resumen (columna17) se apilan en una
sola columna: cada tabla toma el ancho de su contenido y sus columnas quedan
desalineadas entre sí. Forzamos la misma geometría en ambas. */
@media (max-width: 979px) {
  .columna17 .Interiores4 {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
  }

  .columna17 .tabla-resumen-mes2 {
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
    table-layout: fixed;
  }

  .columna17 .tabla-resumen-mes2 td:first-child {
    width: 62%;
    min-width: 0;
  }

  .columna17 .tabla-resumen-mes2 td:last-child {
    width: 38%;
    min-width: 0;
  }
}

.tabla-resumen-mes3 td:first-child {
  min-width: 195px;
  text-align: left;
  padding-right: 5px;
}

.tabla-resumen-mes3 td:last-child {
  min-width: 140px;
  text-align: left;
  padding-left: 5px;
}

/*Responsive tamaño tableta*/

@media (min-width: 680px) {
  .columna1 {
    width: 50%;
  }
  .columna2 {
    width: 50%;
  }
  .columna3 {
    width: 50%;
  }
  .columna4 {
    width: 50%;
  }
  .columna5 {
    width: 100%;
  }
  .columna6 {
    width: 100%;
  }
  .columna7 {
    width: 50%;
  }
  .columna8 {
    width: 50%;
  }
  .columna9 {
    width: 50%;
  }
  .columna10 {
    width: 50%;
  }
  .columna11 {
    width: 50%;
  }
  .columna12 {
    width: 50%;
  }
  .columna13 {
    width: 50%;
  }
  .columna14 {
    width: 50%;
  }
  .columna15 {
    width: 50%;
  }
  .columna16 {
    width: 50%;
  }
  .columna17 {
    width: 100%;
  }

  .columna18 {
    /*display: block;*/
    width: 100%;
    padding: 0px 50px;
  }
}

/*Responsive Tamaño escritorio*/

@media (min-width: 980px) {
  .columna1 {
    width: 60%;
  }
  .columna2 {
    width: 40%;
  }
  .columna3 {
    width: 60%;
  }
  .columna4 {
    width: 40%;
  }
  .columna5 {
    width: 100%;
  }
  .columna6 {
    width: 100%;
  }
  .columna7 {
    width: 33%;
  }
  .columna8 {
    width: 33%;
  }
  .columna9 {
    width: 33%;
  }
  .columna10 {
    width: 33%;
  }
  .columna11 {
    width: 33%;
  }
  .columna12 {
    width: 33%;
  }
  .columna13 {
    width: 33%;
  }
  .columna14 {
    width: 33%;
  }
  .columna15 {
    width: 33%;
  }
  .columna16 {
    width: 33%;
  }
  .columna17 {
    width: 50%;
  }

  .columna17:first-child {
    text-align: right;
    padding-right: 30px;
  }

  .columna17:last-child {
    text-align: left;
    padding-left: 30px;
  }

  .columna18 {
    display: flex;
  }
  .content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #distviento {
    /* width: 200%;
    margin-left: -43vw !important; */
    width: 50% !important;
  }
  .ir-arriba {
    display: none;
    padding: 20px;
    font-size: 35px;
    color: deepskyblue;
    line-height: 30px;
    opacity: 0.8;
    line-height: 0.5;
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
  }
}

#content p {
  font-family: Verdana, Geneva, sans-serif;
  text-align: left;
}

.Estilo11 {
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000;
  text-align: center;
  font-weight: normal;
}

.Estilo110 {
  font-size: 21px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000;
  text-align: center;
  font-weight: normal;
}

/* En móvil viento + humedad + precipitación no caben en una línea a 21px, así que se
   reduce ahí. El tamaño se adapta al ancho con clamp: ~19px en móviles anchos, y menos
   en los estrechos (iPhone SE 320px…) para que "dirección a velocidad" del viento no
   parta en dos líneas. Tope máximo 19px; mínimo 15px. */
@media screen and (max-width: 480px) {
  .Estilo110 {
    font-size: clamp(15px, 4.9vw, 19px);
  }
}

/* Flechas de máximo/mínimo (temp máx/mín, racha máx, humedad máx/mín).
   La barra horizontal se dibuja con border para que quede pegada a la punta;
   el line-height regula esa distancia. */
/* Flecha + barra dibujadas como un único SVG (no como glifo de texto ↑/↓ con la barra
   aparte). Con el glifo, la separación barra-punta variaba en cada sitio por redondeo
   sub-píxel — según dónde cayera la flecha en su línea — y en iOS el glifo caía en otra
   fuente y se veía más largo y fino. Con el SVG la geometría es exacta e idéntica en
   los 5 sitios, escala sin artefactos y no depende de la fuente del sistema.
   El hueco entre la barra y la punta va dentro del propio dibujo. */
.flecha-max,
.flecha-min {
  display: inline-block;
  width: 10px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.flecha-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cg fill='none' stroke='%23ff0000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.4 1H7.6'/%3E%3Cpath d='M4.5 10.2V2.65M2.3 4.85 4.5 2.65 6.7 4.85'/%3E%3C/g%3E%3C/svg%3E");
}

.flecha-min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cg fill='none' stroke='%230000ff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.4 10H7.6'/%3E%3Cpath d='M4.5 0.8V8.35M2.3 6.15 4.5 8.35 6.7 6.15'/%3E%3C/g%3E%3C/svg%3E");
}

/* Temp. máx/mín bajo la temperatura: rejilla de columnas para que ambas líneas cuadren
   verticalmente aunque tengan distinto nº de caracteres. Cada trozo en su columna:
   flecha | número (der. → alinea la coma, siempre 1 decimal) | ºC | guion | hora (izq. →
   alinea el ':', siempre HH:MM). Es inline-table para centrarse dentro de la celda. */
.temp-maxmin {
  display: inline-table;
  border-collapse: collapse;
  font-size: 12px;
  color: #000;
  line-height: 1.25;
}

.temp-maxmin td {
  padding: 0 2px;
  vertical-align: middle;
  white-space: nowrap;
}

.temp-maxmin .tmm-num {
  text-align: right;
}

.temp-maxmin .tmm-hora {
  text-align: right;
  color: #888;
}

/* Selector Sol/Sombra de la sensación térmica (segmentado tipo pastilla). El JS
   (js/actuales/sensacion_toggle.js) cambia el valor y recuerda la elección. */
.sel-solsombra {
  display: inline-flex;
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
  vertical-align: middle;
  margin-left: 3px;
}

.sel-solsombra .sel-opt {
  border: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.5;
  padding: 3px 6px;   /* alto suficiente para tocar bien con el dedo (igual en móvil y escritorio) */
  cursor: pointer;
}

/* Cada zona con su color base: sombra en gris claro, sol en amarillo ligero.
   Padding horizontal asimétrico: "Sol" más ancho (más área de toque) y "Sombra" al mínimo,
   para igualar el ancho de ambas zonas (la palabra "Sombra" es más larga). */
.sel-solsombra .sel-opt[data-modo="sombra"] {
  background: #f4f4f4;
  color: #555;
  padding-left: 2px;
  padding-right: 2px;
}

.sel-solsombra .sel-opt[data-modo="sol"] {
  background: #fdf3c0;
  color: #7a6417;
  padding-left: 13px;
  padding-right: 13px;
}

/* La zona seleccionada solo cambia con un detalle sutil: la negrita del texto. */
.sel-solsombra .sel-opt.activo {
  font-weight: 700;
}

/* Tabla de datos secundarios de Actuales en estilo "ficha": etiqueta a la izquierda
   (gris oscuro), valor a la derecha alineado y en negro para resaltar. Sin líneas.
   Acotado a esta tabla (no afecta al bloque UV/AQI, que va aparte). */
/* Tabla a ancho completo; etiqueta a la izquierda, valor a la izquierda en columna. */
.InterioresDatosSecundarios table td:first-child {
  text-align: left;
  vertical-align: middle;
  color: #555;
  padding-left: 10px;
}

.InterioresDatosSecundarios table td:last-child {
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  color: #000;
  padding-left: 16px;
  padding-right: 24px;
  position: relative;
}

/* Los iconos de info (i) y el de tendencia de presión siguen a textos de distinta
   longitud, así que caían desalineados. Los centro todos en la misma columna, situada
   justo después del dato más largo (para que no queden lejos del texto). El truco:
   right ancla la x, y translateX(50%) desplaza cada icono la mitad de SU ancho, así el
   CENTRO cae en el mismo punto aunque midan distinto (14px las "i", 22px la tendencia).
   !important para ganar a los position/top/margin inline de cada icono. */
.InterioresDatosSecundarios table td:last-child img[data-micromodal-trigger],
.InterioresDatosSecundarios table td:last-child .tend-presion {
  position: absolute !important;
  right: 19px;
  top: 50% !important;
  transform: translate(50%, -50%);
  margin: 0 !important;
}

/* La flecha de tendencia queda separada del "hPa" (se desplaza a la derecha respecto a
   la columna de las "i"; asoma un par de px al espacio libre de columna2, sin recorte). */
.InterioresDatosSecundarios table td:last-child .tend-presion {
  right: 9px;
}

/* El icono de tendencia (SVG 14px) y el "²" de W/m² inflaban la altura de línea de
   sus filas; centrando el valor (arriba) y anulando el line-height del sup, el dato
   queda a la misma altura en todas las filas y el interlineado es uniforme. */
.InterioresDatosSecundarios sup {
  line-height: 0;
}

/* La sensación térmica destaca solo un pelín: 1px más grande y SIN negrita
   (en Verdana el peso 500/600 se pinta como bold, por eso resaltaba de más). */
#sensacion-valor {
  font-size: 14px;
  font-weight: normal;
}

/* En móvil el texto de alrededor es menor, así que la flecha se reduce en proporción.
   Al ser SVG basta con cambiar la caja: el hueco barra-punta escala solo. */
@media screen and (max-width: 480px) {
  .flecha-max,
  .flecha-min {
    width: 9px;
    height: 11px;
  }
}

.Estilo21 {
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000;
  text-align: left;
  font-weight: normal;
}

.Estilo10 {
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000;
  text-align: right;
  font-weight: normal;
}

.Estilo9 {
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000;
  text-align: right;
  font-weight: normal;
}

.EstiloSuave {
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  font-weight: lighter;
  color: #000;
  text-align: right;
}

.Estilo8 {
  font-size: 14px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  color: #000;
  width: 100%;
  text-align: center;
}

/* Última actualización: todo en negrita; la jerarquía es sutil, solo por color:
   etiquetas en gris oscuro y la fecha/hora en negro (dato) */
#ultima-actualizacion {
  font-weight: bold;
  color: #3a3a3a;
}

#ultima-actualizacion .ua-dato {
  color: #000;
}

#content p {
  text-align: center;
}

.Estilo111 {
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #ff0000;
  font-size: 12px;
  text-align: center;
}

.Estilo2 {
  font-family: "Tempus Sans ITC";
  font-size: 36px;
}

.Estilo3 {
  font-size: 11px;
  font-family: "Tempus Sans ITC";
}

#content .Estilo11 tr td {
  font-size: 13px;
}

.k {
  font-weight: normal;
}

.Estilo19 {
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #0000ff;
  font-size: 12px;
  text-align: center;
}

.Estilo20 {
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  color: #000000;
  font-size: 12px;
  text-align: center;
}

.EstiloTemp {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 63px;
  text-align: center;
}

/*Fin texto e interiores*/

.Interiores0 {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.Interiores1 {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px; /*TODO*/
  text-align: center;
}

.Interiores2 {
  max-width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-top: 20px;
  text-align: center;
}

.Interiores3 {
  max-width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 0px;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  font-weight: bold;
}

.Interiores4 {
  max-width: 400px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 20px;
  text-align: center;
  display: inline-block;
}

.Interiores5 {
  max-width: 400px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  display: inline-block;
}

.tablaColorear tr:hover {
  background-color: #f2f2f2;
}

.tabla-AlturaFilas1 td {
  height: 20px;
}

.tabla-AlturaFilas2 td {
  height: 20px;
  padding-left: 20px;
}

.tabla-UltimosDatosActuales td {
  height: 20px;
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 2px;
  padding-top: 2px;
  text-align: center;
  border-bottom: 1px solid lightgray;
  padding-bottom: 3px;
  font-size: 0.9em;
}

.tabla-UltimosDatosActuales th {
  text-align: center;
  border-bottom: 2px solid lightgray;
}

.tabla-AlturaFilas3 td,
.tabla-AlturaFilas3 th {
  height: 17px;
}

#graficas-chart {
  width: 80%;
  margin: 20px auto;
}

#graficas-chart > div {
  margin: 0px auto 50px auto;
}

.temp {
  max-width: 100%;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
  text-align: center;
}

.tempMax {
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  text-align: center;
}

.tempMin {
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-top: 0px;
  text-align: center;
}

.viento {
  width: 30%;
  float: left;
  padding-right: 5px;
}

.humedad {
  width: 30%;
  margin: 0 auto;
  padding-right: 5px;
  padding-left: 5px;
}

.precip {
  width: 30%;
  float: right;
  padding-left: 5px;
}

.InterioresWebcam {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

#actuales .InterioresWebcam {
  padding-top: 60px;
}

.InterioresDatosSecundarios {
  max-width: 350px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
}

.InterioresTablaMes {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
}

.InterioresTimelapse {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.social {
  padding-top: 20px;
  width: 100%;
  height: 20px;
  position: absolute;
  /* antes fixed */
  top: 0;
  left: 0px;
  padding-right: 20px;
  text-align: right;
  font-size: 15px;
  color: #fff;
}

.transpagris {
  margin-top: 190px;
  display: block;
  width: 100%;
  height: 60px;
  position: absolute;
  /* antes fixed */
  top: 0;
  left: 0px;
  text-align: left;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* Logotipo: un único SVG con las letras en curvas (ver tools/generar_logo_svg.py).
   El margen izquierdo es el de siempre, referido a la TINTA de las letras y no a la caja
   del texto: el <div> antiguo empezaba en 20 y la primera letra caía en 22, porque la «M»
   entra 2 px en su caja.

   El de arriba ya no: se calcula para CENTRAR el logo en la banda gris, que es donde tiene
   que estar y donde ya está el menú de la derecha.
       margin-top = margin-top de .transpagris + (alto de la banda − alto del logo) / 2
                  = 190 + (60 − 29.38) / 2 = 205.31
   Antes ponía 211.56, que reproducía milimétricamente dónde caía el <div> de texto
   anterior; el problema es que aquella posición ya estaba 6 px baja, y el SVG heredó el
   defecto al copiarla. Si se cambia el alto de la banda, este número va detrás. */
.logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 205.31px;
  margin-left: 22.34px;
  width: 171.6px;
  z-index: 3000;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.menu_bar {
  /* es la foto de fondo, no incluye menu*/
  /*display:none;*/
  display: block;
  height: 250px;
  width: 100%;
  position: absolute;
  /* antes fixed */
  top: 0px;
  background-size: cover;
}

.menu_bar .bt-menu {
  display: none;
}

header {
  width: 100%;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
}

header nav {
  text-align: right;
  background: #3cf;
  z-index: 1000;
  max-width: 1500px;
  width: 100%;
  margin: 20px auto;
}

header nav ul {
  list-style: none;
}

header nav ul li {
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 3;
}

header nav ul li:hover {
  background: #6cf;
}

header nav ul li a {
  color: #fff;
  display: block;
  text-decoration: none;
  padding: 20px;
}

header nav ul li a span {
  margin-right: 10px;
}

header nav ul li:hover .children {
  display: block;
}

/* El submenú va un punto más oscuro que la raíz (#3cf), para que se vea de un vistazo
   dónde empieza y dónde acaba.

   #2fbceb es exactamente #3cf con un 8 % de negro encima. Va como color OPACO y no como
   rgba(0,0,0,0.08) porque aquí, en escritorio, este bloque es un desplegable flotante que
   cae sobre el contenido de la página: con un color translúcido se leería el texto de
   debajo. En móvil el resultado es el mismo, porque allí el submenú se despliega en línea
   sobre el propio #3cf del nav.

   Si algún día cambia el #3cf del menú, este color va detrás: es el mismo tono con un 8 %
   de negro. */
header nav ul li .children {
  display: none;
  background: #2fbceb;
  position: absolute;
  width: 150%;
  z-index: 1000;
}

header nav ul li .children li {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

header nav ul li .children li a {
  display: block;
}

header nav ul li .children li a span {
  float: right;
  position: relative;
  top: 3px;
  margin-right: 0;
  margin-left: 10px;
}

header nav ul li .caret {
  position: relative;
  top: 3px;
  margin-left: 10px;
  margin-right: 0px;
}

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

/*RESPONSIVE TELEFONO*/

@media screen and (max-width: 980px) {
  /* Estas CUATRO medidas van juntas y hay que moverlas a la vez: el alto de la foto de
     cabecera (.menu_bar, 150px), el hueco que le deja el contenido (este padding, 2px menos
     a propósito, como estaba), la banda gris del título (.transpagris, que muere en el borde
     de abajo de la foto) y la altura a la que cae el título (.logo). Si se cambia el alto de
     la barra, los otros tres números van detrás. */
  body {
    padding-top: 148px;
    /*margen pagina desde arriba. Antes tenia 80. afecta al menu azul */
  }
  .transpagris {
    /* La banda gris del título tiene que morir justo en el borde de abajo de la foto:
       margin-top + height = alto de .menu_bar (110 + 40 = 150). Era 82 cuando la barra
       medía 122; si se vuelve a cambiar el alto, este número va detrás. */
    margin-top: 110px;
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    /* antes fixed */
    top: 0;
    left: 0px;
    text-align: left;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
  }
  /* En móvil el logo va centrado. Antes eran dos cajas al 100 % / 99 % de ancho con
     text-align: center; ahora se centra el propio enlace con márgenes automáticos, que
     en posicionamiento absoluto necesitan left y right fijados a la vez. */
  .logo {
    /* Mismo cálculo que en escritorio, con las medidas de aquí: 110 + (40 − 29.38) / 2.
       Antes eran 117.56, que arrastraban el mismo desvío de 2 px de la posición antigua. */
    margin-top: 115.31px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
  .menu_bar {
    display: block;
    width: 100%;
    /* 150 y no los 122 de antes: la franja se veía demasiado estrecha para lo que son estas
       panorámicas. Ojo con el efecto de "cover": cuanto más alta es la barra, MENOS ancho de
       foto entra (a 122px cabían 768 de los 1300 px; a 150px caben 625), así que al tocar
       este número hay que revisar los encuadres de POSICIONES_MOVIL en
       js/basicos/imagen_hora.js. */
    height: 150px;
    position: absolute;
    /* antes fixed */
    top: 0px;
    left: 0px;
    /*background:#3CF;*/
    /* Encuadre horizontal de la foto de cabecera. En esta franja tan baja el "cover" recorta
       más de un tercio del ancho de la foto, y algunas panorámicas tienen el motivo fuera de
       ese recorte. El valor lo fija js/basicos/imagen_hora.js SOLO para las fotos que lo
       piden (ahí está la lista y el porqué de cada una); el 0% del fallback es el
       comportamiento de siempre para todas las demás. */
    background-position: var(--cabecera-pos-x, 0%) 0%;
  }
  .menu_bar .bt-menu {
    display: block;
    padding: 15px;
    color: #fff;
    overflow: hidden;
    font-size: 26px;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    text-decoration: none;
    width: 50px;
    z-index: 1000;
  }
  /*icono menu*/
  .menu_bar span {
    float: left;
    font-size: 20px;
    z-index: 5;
  }
  /* El panel arranca en 148px —el mismo padding-top del body de más arriba, que es el alto
     de la foto de cabecera— así que lo que le queda de pantalla es 100% MENOS 148, no menos
     80. Con el 80 el panel medía 68px más de lo que cabe, y al ser `fixed` esos 68px se
     quedaban fuera para siempre: con un submenú desplegado, y aun habiendo llegado al tope
     del scroll interno, "Fotos" y "Contacta" no había forma de alcanzarlas. Medido en
     320x568 y en 375x812; los 68px eran constantes, no dependían del alto de la pantalla.

     Este 148 es el quinto número atado al alto de la cabecera: si se cambia .menu_bar, va
     detrás de los otros cuatro documentados arriba (body, .transpagris, .logo). */
  header nav {
    width: 100%;
    height: calc(100% - 148px);
    position: fixed;
    right: 100%;
    margin: 0;
    overflow: scroll;
    z-index: 1000;
  }
  header nav ul li {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  header nav ul li a {
    display: block;
  }
  header nav ul li:hover .children {
    display: none;
  }
  /* El fondo del submenú (#2fbceb) no se repite aquí: lo pone la regla general de más
     arriba y vale igual para móvil, donde estas entradas se despliegan EN LÍNEA dentro de
     la misma columna que las de primer nivel y la sangría de 20px del enlace era lo único
     que las separaba. Probado también un 5 % de negro, que no llegaba a distinguirse. */
  header nav ul li .children {
    width: 100%;
    position: relative;
  }
  header nav ul li .children li a {
    margin-left: 20px;
  }
  header nav ul li .caret {
    float: right;
  }
  #graficas-chart {
    width: 90%;
  }
  #distviento {
    /* width: 200%;
    margin-left: -43vw !important; */
    width: 100% !important;
  }

  #tabla-datos-wrapper {
    overflow-x: scroll;
  }
}

#content .Estilo9 {
  text-align: left;
}

span#desv-temp-media-mes {
  font-size: 0.8em;
  font-weight: bold;
  position: relative;
  bottom: 1px;
}

span.rojo {
  color: red;
}

span.azul {
  color: blue;
}

.enlace_ver_mas {
  color: blue !important;
  text-decoration: underline;
  font-size: 0.7em;
  font-family: Verdana, Geneva, sans-serif;
}

.enlace_ver_mas:hover {
  color: rgb(160, 160, 224) !important;
  text-decoration: underline;
}

.enlace_ver_mas:visited {
  color: blue;
}

.extremos_actuales ul li {
  text-align: center;
}

.extremos_actuales {
  width: 100%;
}

.extremos_actuales .Interiores1 {
  padding-right: 15px;
  padding-left: 15px;
}

@media screen and (min-width: 350px) and (max-width: 450px) {
  .extremos_actuales .Interiores1 {
    padding-right: 25px;
    padding-left: 25px;
  }
}

.efemerides_actuales,
.astronomicos_actuales {
  width: 100%;
}

/* Titular de "Información astronómica" en /actuales: enlaza entero a /astronomicos,
   texto incluido, no solo el icono de la derecha.

   El color hay que repetirlo en :link y :visited —y el :hover aparte— porque más arriba
   hay un "a:link { color:#fff }" global que gana por llevar pseudoclase, y sin esto el
   titular saldría blanco sobre blanco. Mismo motivo que .eclipse-verfotos.

   Se deja negro y sin subrayado para no cambiar el aspecto del bloque: es un titular,
   no un enlace de cuerpo de texto. El subrayado aparece solo al pasar por encima, que
   es lo que avisa de que se puede pulsar. */
.astro-enlace-titulo,
.astro-enlace-titulo:link,
.astro-enlace-titulo:visited {
  color: #000;
  text-decoration: none;
}

.astro-enlace-titulo:hover,
.astro-enlace-titulo:focus {
  color: #000;
  text-decoration: underline;
}

.eclipse_actuales {
  width: 100%;
}

/*
 * Orden flexbox en /actuales.
 * acthtx.tpl (secciones WeatherLink) se incluye primero y pone en el DOM:
 *   1. columna1  2. columna2  3. columna4/astronomicos
 * El resto de secciones se añaden después en actuales.tpl.
 * Los valores de `order` restauran el orden visual original sin cambiar el DOM.
 */
body#actuales .content > .efemerides_actuales {
  order: 3;
}
body#actuales .content > .extremos_actuales {
  order: 4;
}
body#actuales .content > .astronomicos_actuales {
  order: 5;
}
body#actuales .content > .eclipse_actuales {
  order: 6;
}
body#actuales .content > .columna5 {
  order: 7;
}
body#actuales .content > .columna6 {
  order: 8;
}

.eclipse-titulo {
  margin-top: 20px;
}

/* Enlace a la galería del eclipse, en la línea de debajo del título. Va como pastilla
   amarilla y no como enlace de texto: en esta página el bloque del eclipse compite con
   media docena de widgets de datos, y un enlace discreto se perdía entre ellos. El
   amarillo es el único color cálido de /actuales, así que destaca sin desentonar. */
.eclipse-verfotos {
  margin: 8px 0 0;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.85em;
}

/* El color hay que repetirlo en :link y :visited: más arriba hay un "a:link { color:#fff }"
   global que gana por llevar pseudoclase, y sin esto el texto sale blanco sobre blanco.
   Es el mismo motivo por el que a.new_buttons.webcam-lapse los repite. */
.eclipse-verfotos a,
.eclipse-verfotos a:link,
.eclipse-verfotos a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid #e0a800;
  border-radius: 999px;
  background: #ffd45e;
  /* Marrón oscuro y no negro: sobre el amarillo contrasta de sobra para leerse y no
     queda tan duro como el negro puro. */
  color: #4a3600;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.eclipse-verfotos a:hover,
.eclipse-verfotos a:focus {
  background: #ffc42e;
  border-color: #c08e00;
  text-decoration: none;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .eclipse-verfotos a,
  .eclipse-verfotos a:link,
  .eclipse-verfotos a:visited {
    transition: none;
  }

  .eclipse-verfotos a:hover,
  .eclipse-verfotos a:focus {
    transform: none;
  }
}

/* El icono va con stroke="currentColor", así que se tiñe solo del color del texto */
.eclipse-verfotos__icono {
  flex-shrink: 0;
}

.eclipse-countdown-outer {
  max-width: 800px;
  margin: 20px auto 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.eclipse-countdown-wrapper {
  background-image: url("/images/eclipse/eclipse_fondo_fino.png");
  background-size: cover;
  background-position: 20% center;
  background-repeat: no-repeat;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  border-radius: 8px;
}

@media screen and (min-width: 700px) {
  .eclipse-countdown-wrapper {
    background-position: left center;
  }
}

.eclipse-countdown {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.eclipse-countdown__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.8);
}

.eclipse-countdown__value {
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.eclipse-countdown__label {
  font-size: 0.8em;
  margin-top: 3px;
}

.eclipse-countdown--done .eclipse-countdown__value {
  color: #ffd24a;
}

@media screen and (max-width: 699px) {
  .eclipse-countdown__value {
    font-size: 18px;
  }

  .eclipse-countdown {
    margin-left: 50px;
  }
}

@media screen and (min-width: 700px) {
  .efemerides_actuales {
    width: 56%;
  }

  .extremos_actuales {
    width: 40%;
  }

  .extremos_actuales .Interiores1 {
    margin: 0 auto;
  }
}

@media screen and (min-width: 980px) {
  .extremos_actuales {
    width: 25%;
  }

  .extremos_actuales .Interiores1 {
    margin: 0 auto;
  }

  .astronomicos_actuales {
    width: 35%;
  }

  .efemerides_actuales {
    width: 40%;
  }
}

.animacion {
  animation-name: parpadeo;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name: parpadeo;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes parpadeo {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes parpadeo {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   FILTROS DE LA GALERÍA

   OJO con los colores: /fotos va sobre fondo CLARO, no sobre el azul oscuro del resto de la
   web (usa layouts/layout_content.tpl). Las pastillas se dibujan por tanto con letra oscura
   y borde gris; en blanco sobre blanco no se veía absolutamente nada.

   Cada filtro es un enlace, no un botón: se comparte, se abre en otra pestaña y funciona
   sin JavaScript. Por eso hay que vestirlos enteros, que los enlaces de la web son blancos
   por defecto y aquí desaparecerían.
   --------------------------------------------------------------------------- */

#fotos .galeria-filtros {
  max-width: 700px;
  margin: 0 auto 22px;
  font-family: Verdana, Geneva, sans-serif;
}

#fotos .galeria-filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* El rótulo del grupo ("Tema", "Estación"), en la misma fila que sus pastillas */
#fotos .galeria-filtros__titulo {
  margin-right: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

#fotos .galeria-filtro,
#fotos .galeria-filtro:link,
#fotos .galeria-filtro:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid #c9ced6;
  border-radius: 14px;
  background: #fff;
  color: #1b1b61;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

#fotos .galeria-filtro:hover,
#fotos .galeria-filtro:focus {
  background: #eaf7fd;
  border-color: #31c5f2;
}

/* El activo se rellena: en una fila de pastillas iguales, el borde solo no basta para ver
   cuál está puesta. Pulsarlo otra vez lo quita, y por eso su enlace apunta a la galería
   sin ese filtro (lo monta la plantilla). */
#fotos .galeria-filtro--activo,
#fotos .galeria-filtro--activo:link,
#fotos .galeria-filtro--activo:visited {
  background: #1b1b61;
  border-color: #1b1b61;
  color: #fff;
  font-weight: bold;
}

/* Cuántas fotos hay de cada cosa. En la galería entera, no dentro del filtro puesto: si
   contara lo que queda, al filtrar todos los demás se irían a cero. */
#fotos .galeria-filtro__cuenta {
  font-size: 10px;
  opacity: 0.6;
}

#fotos .galeria-filtro--activo .galeria-filtro__cuenta {
  opacity: 0.8;
}

#fotos .galeria-filtros__resumen,
#fotos .galeria-vacia {
  margin: 10px 0 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
}

#fotos .galeria-vacia {
  margin: 26px 0;
}

/* Sobre fondo claro el celeste de la marca se lee mal, así que los enlaces van en el azul
   oscuro del título de la página. */
#fotos .galeria-filtros__resumen a,
#fotos .galeria-filtros__resumen a:link,
#fotos .galeria-filtros__resumen a:visited,
#fotos .galeria-vacia a,
#fotos .galeria-vacia a:link,
#fotos .galeria-vacia a:visited {
  color: #1b6ea8;
  text-decoration: underline;
}

/* El rótulo del grupo, también oscuro y no heredado */
#fotos .galeria-filtros__titulo {
  color: rgba(0, 0, 0, 0.55);
}

/* align-items centra cada miniatura en su fila: las miniaturas conservan la orientación
   de la foto, así que en una misma fila conviven verticales y apaisadas con distinta
   altura y sin esto las bajas quedarían colgando de la línea de arriba. */
#fotos .galeria {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Sin medidas ni recorte aquí: el tamaño lo traen los atributos width/height del <img>,
   que el servidor calcula por foto para que quepa en un cuadrado de 150 conservando su
   proporción (apaisada 150x100, vertical 100x150).

   No volver a poner aquí width/height ni max-*: en cuanto el CSS manda sobre el tamaño, el
   navegador deja de reservar el hueco de las miniaturas sin cargar y la rejilla salta
   según van apareciendo. */
#fotos .galeria a img {
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  display: block;
}

#fotos .galeria a img:hover {
  transform: scale(1.05);
}

/* Bloques de resumen de /historicos (título de sección + tabla de datos).
   Antes eran <h1> con estilos en línea: letra enorme y atenuada al 60%, que no se
   parecía a nada del resto de la web. Ahora usan .Estilo8 y .tabla-resumen-mes2,
   las mismas clases que /mensuales. */
.bloque-resumen-historico {
  margin: 20px 0;
}

.bloque-resumen-historico .Estilo8 {
  margin-bottom: 14px;
}

/* Hueco entre grupos (temperaturas / precipitación / presión) */
.bloque-resumen-historico .fila-separadora td {
  height: 12px;
  padding: 0;
}

/* =====================================================
   Webcam de /actuales: botón del timelapse
   ===================================================== */

/* El enlace al timelapse imita al resto de botones de la fila, pero es un <a>.

   El color hay que repetirlo en :link y :visited: más arriba hay un "a:link { color:#fff }"
   global, y aunque .new_buttons define el azul, la regla global gana por llevar
   pseudoclase. Sin esto el texto sale blanco sobre blanco y solo se lee al pasar el ratón. */
a.new_buttons.webcam-lapse,
a.new_buttons.webcam-lapse:link,
a.new_buttons.webcam-lapse:visited {
  display: inline-block;
  margin-left: 5px;
  color: #31c5f2;
  text-decoration: none;
  cursor: pointer;
}

a.new_buttons.webcam-lapse:hover {
  color: #fff;
  background-color: #31c5f2;
}