/* ---------------------------------------------------------------------------
   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;
  width: 18px;
  min-width: 18px;
  padding: 0 4px 0 0 !important;
  text-align: right !important;
  line-height: 0;
}

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

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

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

/* 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;
}

/* ---------------------------------------------------------------------------
   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;
}