/* MeteoArpon - estilos comunes */ :root { --ion-color-primary: #3880ff; /* --- Semáforo de estado de la estación --- */ --color-semaforo-verde: #2ecc71; --color-semaforo-naranja: #f39c12; --color-semaforo-rojo: #e74c3c; /* --- Globos ("badges") de medidas, fondo pastel + texto legible --- */ --color-viento-bg: #d9f2e3; --color-viento-texto: #1e7a44; --color-viento-linea: #2ecc71; --color-racha-bg: #fbdcd9; --color-racha-texto: #a3352b; --color-racha-linea: #e74c3c; --color-temp-bg: #fde3cc; --color-temp-texto: #a15b12; --color-temp-linea: #f39c12; --color-presion-bg: #d9e6fb; --color-presion-texto: #1e4e9c; --color-presion-linea: #3880ff; } /* --- Tema oscuro --- Se activa poniendo data-theme="oscuro" en (ver services/ajustes.js). Solo tocamos las variables de Ionic que afectan a fondo/texto; los colores de semáforo y globos se mantienen igual en ambos temas (son informativos). */ [data-theme="oscuro"] { --ion-background-color: #121212; --ion-background-color-rgb: 18, 18, 18; --ion-text-color: #f1f1f1; --ion-text-color-rgb: 241, 241, 241; --ion-toolbar-background: #1c1c1c; --ion-toolbar-color: #f1f1f1; --ion-item-background: #1c1c1c; --ion-border-color: #333333; --ion-color-medium: #a0a0a0; --ion-color-light: #2a2a2a; --ion-color-light-shade: #333333; --ion-color-dark: #f1f1f1; } [data-theme="oscuro"] .station-item { border-bottom-color: var(--ion-border-color); } /* --- Predicciones --- */ .mensaje-estado { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; font-size: 13px; color: var(--ion-color-medium); background: var(--ion-color-light, #f4f4f4); } .mensaje-estado--vacio { flex-direction: row; align-items: center; justify-content: space-between; } .prediccion-item { border-bottom: 1px solid var(--ion-color-light-shade, #e0e0e0); padding: 8px 4px; } .prediccion-item__cabecera { display: flex; align-items: center; gap: 10px; cursor: pointer; } .prediccion-item__cabecera:focus-visible { outline: 2px solid var(--ion-color-primary); outline-offset: -2px; } .prediccion-modelo { font-size: 11px; color: var(--ion-color-medium); } .prediccion-item__tabla { margin-top: 8px; } .tabla-prediccion { width: 100%; border-collapse: collapse; font-size: 12px; } .tabla-prediccion th, .tabla-prediccion td { padding: 4px 6px; text-align: center; white-space: nowrap; } .tabla-prediccion th:first-child, .tabla-prediccion td:first-child { text-align: left; font-weight: 600; color: var(--ion-color-medium); } .tabla-prediccion td.badge--viento { background: var(--color-viento-bg); color: var(--color-viento-texto); } .tabla-prediccion td.badge--temp { background: var(--color-temp-bg); color: var(--color-temp-texto); } .tabla-prediccion td.badge--presion { background: var(--color-presion-bg); color: var(--color-presion-texto); } .pendiente--pequena { min-height: auto; padding: 8px; font-size: 12px; } /* --- Mapa --- */ #mapa { display: block; /* El tamaño real (ancho/alto en px) lo fija js/pages/mapa.js midiendo el hueco disponible de ion-content, en vez de confiar en position:absolute a través del Shadow DOM de Ionic (poco fiable: en pruebas reales se expandía por encima del header/footer). */ } .leaflet-container { background: var(--ion-background-color, #fff); } [data-theme="oscuro"] .leaflet-tile { filter: brightness(0.8) contrast(1.05); } .mapa-callout { font-size: 10px; line-height: 1.3; background: var(--ion-background-color, #fff); color: var(--ion-text-color, #222); border-radius: 5px; padding: 3px 5px; min-width: 140px; cursor: pointer; } .mapa-callout__linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mapa-callout__nombre { font-weight: 700; font-size: 11px; } .mapa-callout__estrella { color: #ffb400; } .mapa-callout__sinpred { color: var(--ion-color-medium); font-style: italic; } .mapa-callout .semaforo { display: inline-block; width: 7px; height: 7px; margin-right: 1px; vertical-align: middle; } /* Colores por variable, consistentes con las demás páginas */ .mapa-callout .v-viento { color: var(--color-viento-texto); } .mapa-callout .v-racha { color: var(--color-racha-texto); } .mapa-callout .v-temp { color: var(--color-temp-texto); } .mapa-callout .v-presion { color: var(--color-presion-texto); } /* Tabla de predicción: filas = variable, columnas = hora, todo alineado */ .mapa-callout__pred { border-collapse: collapse; margin-top: 1px; } .mapa-callout__pred td { padding: 0 3px 0 0; text-align: right; font-variant-numeric: tabular-nums; } .mapa-callout__pred td:first-child { font-weight: 700; text-align: left; padding-right: 4px; } .mapa-callout__pred-cabecera td { color: var(--ion-color-medium); font-weight: 600; border-bottom: 1px solid var(--ion-color-light-shade, #e0e0e0); } ion-content { --padding-bottom: 8px; } /* Placeholder de "sin contenido todavía" / estados de carga y error */ .pendiente { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--ion-color-medium); font-style: italic; text-align: center; padding: 24px; } .pendiente--error { color: var(--color-semaforo-rojo); font-style: normal; } /* --- Botón de icono en el header (favoritas) --- */ .header-icon-btn { background: none; border: none; color: inherit; font-size: 22px; padding: 6px; line-height: 0; } .header-icon-btn[aria-pressed="true"] { color: #ffd54a; } /* --- Listado de estaciones --- */ #stations-list { display: flex; flex-direction: column; } .station-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--ion-color-light-shade, #e0e0e0); cursor: pointer; } .station-item .toggle-activo { flex: 0 0 auto; } .station-item:focus-visible { outline: 2px solid var(--ion-color-primary); outline-offset: -2px; } .semaforo { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; } .semaforo--verde { background: var(--color-semaforo-verde); } .semaforo--naranja { background: var(--color-semaforo-naranja); } .semaforo--rojo { background: var(--color-semaforo-rojo); } .station-info { flex: 1 1 auto; min-width: 0; } .station-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .station-concello { font-size: 12px; color: var(--ion-color-medium); } .station-badges { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; max-width: 40%; justify-content: flex-end; } .badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .badge--viento { background: var(--color-viento-bg); color: var(--color-viento-texto); } .badge--racha { background: var(--color-racha-bg); color: var(--color-racha-texto); } .badge--temp { background: var(--color-temp-bg); color: var(--color-temp-texto); } .badge--presion { background: var(--color-presion-bg); color: var(--color-presion-texto); } .fav-btn { flex: 0 0 auto; background: none; border: none; font-size: 22px; color: #ffb400; padding: 4px; line-height: 0; } /* --- Modal de histórico --- */ #historico-graficos { display: flex; flex-direction: column; gap: 24px; } .historico-grafico h3 { font-size: 14px; margin: 0 0 8px; color: var(--ion-color-dark); }