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: black 1px solid;
}

.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;
}

.logotexto {
  margin-top: 205px;
  margin-left: 20px;
  display: block;
  width: 200px;
  height: 40px;
  position: absolute;
  /* antes fixed */
  top: 0;
  left: 0px;
  z-index: 3000;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  font-size: 24px;
  color: #fff;
  text-align: left;
  text-decoration: none;
}

.logotextoinferior {
  margin-top: 228px;
  margin-left: 21px;
  display: block;
  z-index: 3000;
  height: 4px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0px;
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  font-size: 9px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  letter-spacing: 3.8px;
}

.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-image: url(../../Documents/Sitio%20sin%20nombre%202/DSC03961.JPG)
    50% 50% no-repeat;
  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;
}

header nav ul li .children {
  display: none;
  background: #3cf;
  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) {
  body {
    padding-top: 120px;
    /*margen pagina desde arriba. Antes tenia 80. afecta al menu azul */
  }
  .transpagris {
    margin-top: 82px;
    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;
  }
  .logotexto {
    margin-top: 83px;
    margin-left: 0px;
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    /* antes fixed */
    top: 0;
    left: 0px;
    z-index: 3000;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-size: 24px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  .logotextoinferior {
    margin-top: 107px;
    margin-left: 3px;
    display: block;
    z-index: 3000;
    height: 40px;
    width: 99%;
    position: absolute;
    top: 0;
    left: 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-size: 9px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    letter-spacing: 3.8px;
  }
  .menu_bar {
    display: block;
    width: 100%;
    height: 122px;
    position: absolute;
    /* antes fixed */
    top: 0px;
    background-image: url(../../Documents/Sitio%20sin%20nombre%202/DSC03961.JPG);
    left: 0px;
    /*background:#3CF;*/
  }
  .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;
  }
  header nav {
    width: 100%;
    height: calc(100% - 80px);
    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;
  }
  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%;
}

.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;
}

.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;
  }
}

#fotos .galeria {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#fotos .galeria a img {
  width: 150px; /* miniatura visible */
  height: 100px; /* o auto si prefieres mantener proporciones */
  object-fit: cover; /* recorta sin deformar */
  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);
}