/* ---------------------------------------------------------------------------
   NOTAS DE UN DÍA: lectura de los instrumentos manuales y observaciones.
   El icono va en una columna al margen izquierdo de la tabla de días; el contenido se
   muestra en el modal #modal-notas-dia (ver js/notas_dia/notas_dia.js y
   classes/NotasDia.php).
   --------------------------------------------------------------------------- */

/* Columna del margen izquierdo: la ⓘ tiene que parecer que flota fuera de la tabla, sin
   nada que delate que ocupa una columna.

   Para eso hay que quitar dos cosas además del borde de la propia celda: el borde del
   <table>, que si no recorre el borde superior e inferior también por delante de esta
   columna, y el fondo de la fila resumen, que se pinta por detrás de la celda aunque
   ésta sea transparente (por eso el azul se pone celda a celda, ver DatosDiarios).
   El recuadro visible lo siguen dibujando los bordes de las celdas de datos. */
.tabla-con-notas {
  border: none;
}

.col-nota {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  /* La columna se encoge a lo que lleve dentro: con los dos iconos mide unos 34 px y con
     uno solo, la mitad. El truco del width al 1% es lo que hace que la tabla le dé el
     mínimo necesario en vez de repartirle espacio; importa en el móvil, donde cada píxel
     de más empuja el resto de columnas. */
  width: 1%;
  min-width: 0;
  padding: 0 4px 0 0 !important;
  text-align: right !important;
  line-height: 0;
  white-space: nowrap;
}

/* Los dos iconos en fila, nunca uno debajo del otro */
.col-nota__iconos {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
}

/* Cada icono en su hueco de ancho fijo, ocupado o no: es lo que mantiene los copos
   alineados en la misma columna a lo largo de todo el mes. */
.col-nota__hueco {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  flex: 0 0 14px;
}

.icono-nota-dia {
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.85;
}

.icono-nota-dia:hover {
  opacity: 1;
}

/* Líneas de las observaciones manuales recientes, en /actuales, encima de la sensación
   térmica. No son un titular de sección: son renglones con la misma letra que la tabla que
   encabezan, y solo aparecen los días en que hay algo que contar. Como mucho hay dos —la de
   hoy y la de ayer—, y lo normal es que no haya ninguna.

   El subrayado de puntos es la pista de que se pueden pulsar, el mismo recurso que usa ahí
   al lado el "1h:" de la lluvia. */
.obs-recientes {
  margin-bottom: 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  text-align: center;
}

/* Solo entre líneas: la separación con la tabla ya la pone el margen del bloque */
.obs-reciente + .obs-reciente {
  margin-top: 4px;
}

/* En móvil, un renglón entero de separación con lo de abajo. Ahí las dos columnas se apilan
   y la línea queda pegada a la tabla de datos, tan cerca que se lee como si fuera su primera
   fila; despegada se ve que es otra cosa. En pantalla ancha no hace falta, porque ya está
   sola encima de su columna. */
@media screen and (max-width: 679px) {
  .obs-recientes {
    margin-bottom: 22px;
  }
}

.obs-reciente__texto {
  border-bottom: 1px dotted #aaa;
}

/* El ojo que abre la línea. Un pelo por debajo de la base del texto, que es donde se
   asienta un dibujo redondo al lado de una mayúscula.

   En rojo, el mismo #ff0000 que las marcas de máxima de esta página: la línea aparece de
   uvas a peras y en medio de una columna de datos en blanco, así que el color es lo que
   hace que se vea que ahí hay algo distinto. El dibujo se pinta con currentColor, de modo
   que basta con darle color aquí. */
.obs-reciente__simbolo {
  position: relative;
  top: 2px;
  margin-right: 5px;
  color: #ff0000;
}

.obs-reciente__icono {
  position: relative;
  top: 2px;
  margin-left: 4px;
}

.nota-dia__titulo {
  margin: 14px 0 6px;
  font-size: 1em;
}

.nota-dia__titulo:first-child {
  margin-top: 0;
}

.nota-dia__tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.nota-dia__tabla th,
.nota-dia__tabla td {
  padding: 5px 6px;
  border-bottom: 1px solid #e3e3e3;
  text-align: right;
  white-space: nowrap;
}

.nota-dia__tabla th:first-child,
.nota-dia__tabla td:first-child {
  text-align: left;
  white-space: normal;
}

/* La foto del instrumento, en la fila de su variable. Pequeña pero suficiente: va
   recortada a la escala, así que a este tamaño ya se lee la marca del capilar. Sin visor
   ni ampliación —el enlace la abre en una pestaña— porque este mismo HTML se pinta dentro
   del popup y también suelto en el panel de /historicos, y un lightbox tendría que
   funcionar en los dos sitios. */
.nota-dia__foto {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Estrecha a propósito: en la nota basta con reconocer que hay una foto del instrumento,
   y quien quiera leer la marca del capilar pulsa Ampliar y se lleva los 800 px. Se deja
   más margen de alto que de ancho porque una foto de termómetro suele ser vertical, y
   apretarla por el alto la dejaría en un sello ilegible. */
.nota-dia__foto img {
  max-width: 64px;
  max-height: 110px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  /* La lupa del cursor es la primera pista de que la miniatura se puede pulsar */
  cursor: zoom-in;
  transition: border-color .15s;
}

.nota-dia__foto:hover img,
.nota-dia__foto:focus img {
  border-color: #31C5F2;
}

/* El rótulo, debajo de la miniatura. Sin él nadie descubre que hay una foto grande
   detrás: una imagen pequeña dentro de una tabla no parece pulsable. */
.nota-dia__ampliar {
  display: block;
  margin-top: 3px;
  color: #1b6ea8;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.nota-dia__ampliar::before {
  /* Lupa, en texto: dentro del atributo data-nota no conviene meter un SVG entero */
  content: "\1F50D\FE0E";
  margin-right: 3px;
}

.nota-dia__foto:hover .nota-dia__ampliar,
.nota-dia__foto:focus .nota-dia__ampliar {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .nota-dia__foto img { transition: none; }
}

/* En pantalla ancha se le da algo más, pero sin pasarse: sigue siendo un aviso de que hay
   foto, no la foto. */
@media screen and (min-width: 700px) {
  .nota-dia__foto img {
    max-width: 90px;
    max-height: 150px;
  }
}

/* La foto de una observación escrita. Comparte el enlace y el rótulo "Ampliar" con la del
   termómetro, pero no el tamaño: aquella es un sello que avisa de que hay foto, y esta se
   mira —el granizo junto a la regla es el dato del que habla el texto—. */
.nota-dia__figura {
  margin: 0 0 10px;
}

.nota-dia__foto--obs img {
  max-width: 200px;
  /* Sin tope de alto: una foto vertical se vería como un sello si se le apretara el alto,
     que es justo lo que aquí no interesa. El ancho ya la contiene. */
  max-height: none;
}

/* El "Ampliar" va centrado bajo el sello del termómetro, dentro de su celda. Aquí no:
   debajo de una foto ancha, con el pie a la izquierda, centrarlo lo dejaría descolgado
   entre dos textos alineados al margen. */
.nota-dia__foto--obs .nota-dia__ampliar {
  text-align: left;
}

/* El pie: qué se ve en la foto, y con qué se midió si es una medida. Va debajo y pequeño,
   como una nota al margen, para que no compita con el texto de la observación. */
.nota-dia__pie-foto {
  margin-top: 4px;
  max-width: 260px;
  font-size: 0.85em;
  line-height: 1.35;
  opacity: 0.8;
}

@media screen and (min-width: 700px) {
  .nota-dia__foto--obs img { max-width: 260px; }
}

/* La celda de la foto no necesita el nowrap ni el alineado a la derecha del resto */
.nota-dia__tabla td:has(> .nota-dia__foto) {
  text-align: center;
  padding: 6px;
}

/* Los encabezados sí parten línea: "Sensor digital (automático)" en una sola línea
   obligaría a una columna más ancha que la pantalla de un móvil. Los valores siguen
   sin partirse, que es donde molesta. */
.nota-dia__tabla th {
  font-weight: 600;
  opacity: 0.7;
  white-space: normal;
  vertical-align: bottom;
}

.nota-dia__nieve {
  margin: 6px 0;
}

.nota-dia__pie {
  margin: 6px 0;
  font-size: 0.9em;
  opacity: 0.75;
}

.nota-dia__obs {
  margin: 0 0 8px;
}

.nota-dia__tipo {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: 10px;
  background: #31C5F2;
  color: #fff;
  font-size: 0.8em;
  vertical-align: 1px;
}

/* Notas mostradas en la propia página, sin popup:

     .nota-mes       observaciones del mes entero, bajo la tabla de días
     .nota-dia-panel notas de un día concreto en /historicos, entre resumen y gráficas

   Llevan color de texto propio porque van sobre el fondo oscuro de la web: heredarlo
   dejaría letra clara sobre el recuadro claro. */
.nota-mes,
.nota-dia-panel {
  margin: 14px auto 0;
  padding: 10px 16px;
  max-width: 700px;
  border-left: 3px solid #31C5F2;
  border-radius: 8px;
  background: #f7fbfd;
  color: rgba(0, 0, 0, 0.8);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  line-height: 1.5;
  text-align: left;
}

.nota-dia-panel {
  margin-bottom: 14px;
}

.nota-mes .nota-dia__titulo,
.nota-dia-panel .nota-dia__titulo {
  color: #1b1b61;
}

/* La firma de quien observó, debajo de su observación. Alineada a la derecha y en cursiva,
   como se firma: se lee al terminar el texto y no compite con él. Solo la llevan las
   observaciones que vienen de fuera, así que en la mayoría de las notas no aparece. */
.nota-dia__observador {
  margin: -2px 0 10px;
  font-size: 0.85em;
  font-style: italic;
  text-align: right;
  opacity: 0.8;
}

/* La invitación a colaborar, detrás de las observaciones del día. Separada por un filete y
   en letra algo menor: es un aparte nuestro, no una anotación más de ese día, y quien viene
   a mirar los datos tiene que poder saltársela de un vistazo.

   Se ve en dos sitios: dentro del globo del día (.modal__content, sin padding lateral) y en
   el panel de /historicos (.nota-dia-panel, con 16 px a cada lado). De ahí que el filete
   base vaya a secas y el desbordamiento hasta los bordes se le dé solo en el panel. */
.nota-dia__colabora {
  /* Un renglón entero de aire por encima. Pegada a la observación se leía como una línea
     más de ella; separada así se ve de un vistazo que es otra cosa. */
  margin-top: 26px;
  padding-top: 14px;
  /* Filete de verdad, no una insinuación: es lo que marca que aquí se acaba lo anotado de
     ese día y empieza un aparte nuestro. */
  border-top: 1px solid rgba(27, 27, 97, 0.35);
  font-size: 0.95em;
  opacity: 0.85;
}

/* En el recuadro del panel el filete cruza de lado a lado: el margen negativo lo lleva
   hasta los bordes y el padding devuelve el texto a su sitio. */
.nota-dia-panel .nota-dia__colabora {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.nota-dia__colabora strong {
  color: #1b1b61;
}

/* Dónde están las de los demás días. Solo sale en el globo que se abre desde /actuales.
   Lleva su propio filete: son dos cosas distintas —una pide, la otra indica el camino— y
   sin la raya se leían como un mismo párrafo largo. */
.nota-dia__otros-dias {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 27, 97, 0.35);
  font-size: 0.9em;
  opacity: 0.75;
}

/* El enlace hay que vestirlo entero: los de la web son blancos por defecto (van sobre el
   fondo azul oscuro), y aquí, dentro del recuadro claro, uno blanco sería invisible. */
.nota-dia__colabora a,
.nota-dia__colabora a:link,
.nota-dia__colabora a:visited,
.nota-dia__otros-dias a,
.nota-dia__otros-dias a:link,
.nota-dia__otros-dias a:visited {
  color: #1b6ea8;
  text-decoration: underline;
}

.nota-dia__colabora a:hover,
.nota-dia__colabora a:focus,
.nota-dia__otros-dias a:hover,
.nota-dia__otros-dias a:focus {
  color: #0f4f7d;
}

/* ---------------------------------------------------------------------------
   HISTORIAL DE CORRECCIONES SOBRE LOS DATOS (final de /climaticos).

   Mismo lenguaje visual que las observaciones: recuadro claro con filete azul a
   la izquierda, esquinas redondeadas y Verdana. Son cosas de la misma familia —
   apuntes nuestros sobre los datos, no los datos en sí — y conviene que se lean
   igual. Antes estas reglas vivían en css/graficas.css, que esta página no
   carga, así que el bloque salía sin ningún estilo.
   --------------------------------------------------------------------------- */

.historial-correcciones {
  max-width: 700px;
  margin: 50px auto 30px;
  text-align: left;
}

.historial-correcciones__titulo {
  margin: 0 0 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #1b1b61;
  text-align: center;
}

.historial-correcciones__intro {
  margin: 0 0 22px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

.historial-correcciones__item,
.aviso-correccion {
  margin-bottom: 12px;
  padding: 10px 16px;
  border-left: 3px solid #31C5F2;
  border-radius: 8px;
  background: #f7fbfd;
  color: rgba(0, 0, 0, 0.8);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  line-height: 1.5;
}

.historial-correcciones__cabecera,
.aviso-correccion__cabecera {
  margin: 0 0 6px;
  font-weight: bold;
}

/* Las variables afectadas, con la misma píldora que el tipo de una observación */
.historial-correcciones__variables,
.aviso-correccion__variables {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: 10px;
  background: #31C5F2;
  color: #fff;
  font-size: 0.9em;
  font-weight: normal;
  vertical-align: 1px;
}

.historial-correcciones__accion,
.aviso-correccion__accion {
  margin: 0 0 6px;
}

.historial-correcciones__motivo,
.aviso-correccion__motivo {
  margin: 0;
}

.historial-correcciones__fecha {
  margin: 6px 0 0;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Aviso de que el registro sigue abierto. Va aparte de los items y sin el filete
   azul, para que no se lea como una corrección más de la lista. */
.historial-correcciones__pendiente {
  margin: 18px 0 0;
  padding: 10px 16px;
  border: 1px dashed #cfd8dc;
  border-radius: 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.55);
}

/* En móvil el bloque ocupa todo el ancho de pantalla y los recuadros quedarían
   pegados a los bordes */
@media (max-width: 720px) {
  .historial-correcciones {
    padding: 0 12px;
  }
}

/* ---------------------------------------------------------------------------
   AVISO DE DATOS CORREGIDOS en el periodo consultado (/historicos).

   Es el mismo contenido que el historial de /climaticos, así que se le da la misma
   forma y se comparten los selectores. Solo cambia el encabezado, en ámbar: aquí sí
   es un aviso sobre lo que se está mirando en ese momento, no un registro histórico.

   Antes vivía en css/graficas.css, que se enlaza sin versión: quien tuviera el fichero
   cacheado de antes de que existieran estas reglas veía el aviso sin ningún estilo.
   --------------------------------------------------------------------------- */

.aviso-correccion {
  max-width: 700px;
  margin: 0 auto 20px;
  /* La sección de /historicos centra su contenido; los items del historial no lo notan
     porque su contenedor fija text-align:left, pero este va suelto en la página. */
  text-align: left;
}

.aviso-correccion__titulo {
  margin: 0 0 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  font-weight: bold;
  color: #8a6314;
  text-align: center;
}

.aviso-correccion__item + .aviso-correccion__item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dfeaf0;
}

/* Va al final a propósito: la regla base .aviso-correccion de aquí arriba fija el
   margen, y si esta media query fuese antes la pisaría por orden de aparición. */
@media (max-width: 720px) {
  .aviso-correccion {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* Aviso de que un periodo no tiene resumen. Comparte la caja con .aviso-correccion pero
   en gris: no ha pasado nada con los datos, simplemente no llegan al mínimo. */
.aviso-sin-datos {
  border-left-color: #cfd8dc;
  background: #f7f7f8;
}

.aviso-sin-datos .aviso-correccion__motivo {
  margin-top: 6px;
  font-size: 0.9em;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   FICHA DE UN DÍA al pulsar un punto de una nube de /climaticos
   (ver graficas/js/DiaNubePopup.js y templates/modals/modal-dia-nube.tpl)
   --------------------------------------------------------------------------- */

.dia-nube__valor {
  margin: 0 0 12px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.95em;
  font-weight: bold;
  color: #1b1b61;
  text-align: center;
}

/* El alto lo marca la proporción de la gráfica (ver DiaNubePopup.js), no una altura
   fija del contenedor.

   Con altura fija se solapaba el enlace de abajo: exportar_png.js añade a cada gráfica
   su botón de descarga como HERMANO del canvas, y Chart.js dimensiona el canvas al alto
   del padre sin descontar hermanos, así que el canvas se salía por abajo exactamente el
   alto del botón. Dejando crecer al contenedor caben los dos sin pelearse.

   El min-height sostiene el recuadro mientras se cargan los datos, que es cuando el
   mensaje de estado está solo. */
.dia-nube__grafica {
  position: relative;
  min-height: 120px;
}

.dia-nube__estado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.dia-nube__estado:empty {
  display: none;
}

.dia-nube__pie {
  margin: 22px 0 4px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82em;
  text-align: center;
}

/* Área de pulsación cómoda, sobre todo con el dedo */
.dia-nube__pie a {
  display: inline-block;
  padding: 6px 10px;
  color: #1a6d85;
}

/* Copo que acompaña al título "Nieve en el suelo" dentro de la ficha del día.
   Hereda el color del título (currentColor) para no introducir un azul suelto. */
.nota-dia__icono {
  vertical-align: -2px;
  margin-right: 5px;
  opacity: 0.75;
}

/* Copo en la fila del día: marca la nieve en el suelo sin abrir nada. Lo que significa
   está en la leyenda del pie de la tabla, no repetido en cada día. */
.icono-nieve-dia {
  display: inline-block;
  color: #3884d6;
  vertical-align: middle;
  margin-right: 3px;
}
.icono-nieve-dia .nota-dia__icono {
  margin-right: 0;
  opacity: 1;
}

/* Leyenda del copo, bajo la tabla del mes */
.leyenda-nieve {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 700px;
  margin: 10px auto 20px;
  padding: 8px 14px;
  border-left: 3px solid #31C5F2;
  border-radius: 8px;
  background: #f7fbfd;
  color: rgba(0, 0, 0, 0.75);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.78em;
  line-height: 1.5;
  text-align: left;
}
.leyenda-nieve__icono {
  flex: 0 0 auto;
  color: #3884d6;
  margin-top: 2px;
}
.leyenda-nieve__icono .nota-dia__icono {
  margin-right: 0;
  opacity: 1;
}

@media (max-width: 720px) {
  .leyenda-nieve { margin-left: 12px; margin-right: 12px; }
}

/* Gráfica que acompaña a una observación (js/notas_dia/grafica_nota.js).
   Vive en dos sitios de tamaño muy distinto: el popup del día, estrecho, y el panel de
   /historicos, ancho. Por eso el ancho es el del hueco y la altura, fija: así el canvas
   tiene siempre una caja con medidas propias, que es lo que Chart.js necesita para
   dibujarse (responsive con maintainAspectRatio en false). */
.nota-dia__grafica {
  margin: 10px 0 4px;
}
.nota-dia__grafica-titulo {
  margin: 0 0 4px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
.nota-dia__grafica-caja {
  position: relative;
  width: 100%;
  height: 215px;
}

/* En el móvil el popup deja poco alto: a tamaño de escritorio empujaría el texto fuera de
   la pantalla y habría que hacer scroll para ver de qué habla la observación. */
@media (max-width: 720px) {
  .nota-dia__grafica-caja { height: 175px; }
}