/** * nube-temperaturas.css — estilo del selector de fechas (flatpickr) y del selector de * rango de años de las gráficas "Nube de mínimas/máximas diarias" (/climaticos). * * flatpickr pinta su calendario flotante en un elemento aparte, añadido a , con * su propia fuente de fábrica — no hereda el Verdana del resto de la web (ver body en * css/custom.css) a menos que se fuerce aquí. */ .nube-calendario-wrap { margin-top: 16px; text-align: center; font-family: Verdana, Geneva, sans-serif; } .nube-calendario-label { display: block; margin-bottom: 6px; font-size: 0.85em; color: rgba(0, 0, 0, 0.55); } .nube-rango-wrap { margin-bottom: 14px; text-align: center; font-family: Verdana, Geneva, sans-serif; } .nube-rango-label { display: inline-block; margin-right: 8px; font-size: 0.85em; color: rgba(0, 0, 0, 0.55); } .nube-percentiles-wrap { margin-top: 10px; text-align: center; font-family: Verdana, Geneva, sans-serif; } .nube-percentil-check { display: inline-block; margin: 0 10px; font-size: 0.85em; color: rgba(0, 0, 0, 0.6); cursor: pointer; user-select: none; } .nube-percentil-check input { cursor: pointer; vertical-align: -1px; } .nube-calendario-input, .nube-rango-select { font-family: Verdana, Geneva, sans-serif; font-size: 0.85em; color: #1a6d85; background-color: #fff; border: 1px solid #31c5f2; border-radius: 6px; padding: 6px 12px; outline: none; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .nube-calendario-input { text-align: center; min-width: 200px; } .nube-calendario-input:hover, .nube-rango-select:hover { border-color: #1a9fc7; } .nube-calendario-input:focus, .nube-rango-select:focus { border-color: #1a9fc7; box-shadow: 0 0 0 3px rgba(49, 197, 242, 0.2); } /* --- Calendario flotante de flatpickr --- */ .flatpickr-calendar { font-family: Verdana, Geneva, sans-serif; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); border: 1px solid #e3e3e3; } .flatpickr-months .flatpickr-month { color: #1a6d85; fill: #1a6d85; } .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font-family: Verdana, Geneva, sans-serif; color: #1a6d85; } span.flatpickr-weekday { font-family: Verdana, Geneva, sans-serif; color: #7c96a0; font-weight: bold; } .flatpickr-day { border-radius: 6px; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #2f6fed; border-color: #2f6fed; } .flatpickr-day.today { border-color: #f2994a; } .flatpickr-day.today:hover { background: #f2994a; border-color: #f2994a; color: #fff; } .flatpickr-day:hover { background: #eaf6fb; } /* --- Icono + modal de info suelto de una gráfica (p. ej. la de mínimas del día meteorológico, explicando por qué su ventana llega hasta las 10h) --- */ /* Mismo icono "i" que el resto de la web (/images/icons/masinfo.png): este botón solo lo posiciona junto al texto, el círculo y el color ya vienen en la imagen. */ .nube-info-btn { display: inline-flex; vertical-align: middle; margin-left: 6px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0; } .nube-info-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); /* Por encima de cualquier elemento de la cabecera: el logo/título ".logotexto" del sitio usa z-index:3000 y si no, se veía por encima del fondo oscurecido del modal. */ z-index: 9999; align-items: center; justify-content: center; padding: 16px; } .nube-info-overlay.abierto { display: flex; } .nube-info-caja { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; /* Si el texto es más alto que la pantalla (típico en móvil), la caja no crece más allá del viewport: se queda con scroll propio en vez de desbordar por arriba/abajo sin forma de llegar a leerlo. */ max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; font-family: Verdana, Geneva, sans-serif; font-size: 0.85em; line-height: 1.5; color: #333; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); position: relative; } .nube-info-caja p { margin: 0 0 10px; } .nube-info-caja p:last-child { margin-bottom: 0; } .nube-info-cerrar { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; line-height: 1; color: #888; cursor: pointer; padding: 4px; } .nube-info-cerrar:hover { color: #333; } /* En móvil, una caja pegada casi a los bordes de la pantalla (con casi el 100% del alto/ancho) se lee mal y apenas deja ver que hay algo detrás — la hacemos más pequeña y claramente "flotando" en el centro, no ocupando toda la pantalla. */ @media screen and (max-width: 600px) { .nube-info-caja { width: 90%; max-width: 340px; max-height: 85vh; padding: 16px; font-size: 0.8em; } } /* La leyenda de color de las matrices se mudó a css/matriz_leyenda.css: la usan dos páginas que no comparten ninguna hoja de estilos, y aquí solo la veía /climaticos. */