/* ============================================================ The Cartographer — Reset & Global Styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ Bootstrap override — garantiza la cadena de altura 100% Bootstrap no fija height en html/body; lo hacemos nosotros para evitar que #map-container resuelva a 0 px. ============================================================ */ html, body { width: 100%; height: 100%; min-height: 100vh; /* fallback moderno */ min-height: -webkit-fill-available; /* iOS Safari: excluye chrome del navegador */ font-family: 'Inter', 'Segoe UI', sans-serif; background: #0d0d0d; color: #e0e0e0; overflow: hidden; } #app { width: 100%; height: 100vh; height: var(--app-height, 100vh); /* actualizado por JS en iOS */ } /* ============================================================ Bootstrap ↔ Leaflet compatibility fixes Bootstrap Reboot interfiere con Leaflet de 3 formas: 1. svg { overflow: hidden } → rompe la capa SVG de Leaflet 2. img { max-width: 100% } → puede colapsar los tiles 3. * { box-sizing: border-box } → afecta contenedores internos Estos overrides deben ir DESPUÉS de bootstrap.min.css. ============================================================ */ /* 1. SVG — crítico: la capa de vectores de Leaflet necesita overflow visible */ .leaflet-pane svg, .leaflet-zoom-animated, .leaflet-image-layer, .leaflet-layer svg { overflow: visible; } /* 2. Tiles — Bootstrap pone max-width:100% en img; los tiles tienen dimensiones fijas en inline style (256px) pero max-width las limita */ .leaflet-tile-container img, .leaflet-tile { max-width: none; max-height: none; } /* 3. Box-sizing — Leaflet calcula tamaños internamente con content-box */ .leaflet-container, .leaflet-container * { box-sizing: content-box; } /* Excepción: el propio contenedor usa border-box (estándar moderno) */ .leaflet-container { box-sizing: border-box; } /* Leaflet crea .leaflet-container; le damos altura explícita (Leaflet la necesita en píxeles para calcular tiles) --app-height es la altura real del viewport visible en iOS. */ .leaflet-container { width: 100% !important; height: 100vh !important; height: var(--app-height, 100vh) !important; } /* ============================================================ Grayscale Tile Layer — CSS filter applied directly to the tiles rendered by Leaflet inside the tile pane. ============================================================ */ /* * Aplica el filtro grayscale al contenedor de teselas. * * IMPORTANTE: En iOS Safari/WebKit, el filtro CSS combinado con las * transformaciones GPU de Leaflet causa que los tiles sean invisibles. * No hay workaround conocido que funcione en todas las versiones de iOS. * Por eso, el filtro se desactiva completamente en Safari (ver regla * .leaflet-safari más abajo). En iOS el mapa se verá en color. */ .leaflet-container .leaflet-tile-pane { -webkit-filter: grayscale(1) contrast(1.08) brightness(0.92); filter: grayscale(1) contrast(1.08) brightness(0.92); } /* * Leaflet 1.9 añade mix-blend-mode:plus-lighter a los tiles. * Lo revertimos a normal para evitar problemas de compositing. */ .leaflet-container .leaflet-tile-pane img.leaflet-tile, .leaflet-container img.leaflet-tile { mix-blend-mode: normal !important; } /* * Safari/iOS: DESACTIVAR COMPLETAMENTE el filtro. * Leaflet aplica .leaflet-safari en navegadores Safari. * El filtro CSS con las transformaciones GPU de Leaflet es incompatible * con el motor de compositing de WebKit en iOS. * * Usamos dos selectores: .leaflet-safari (detectado por Leaflet) y * .is-ios (detectado por nuestro script en ) como backup. */ .leaflet-safari .leaflet-tile-pane, .is-ios .leaflet-tile-pane { -webkit-filter: none !important; filter: none !important; } .leaflet-safari img.leaflet-tile, .is-ios img.leaflet-tile { mix-blend-mode: normal !important; } /* ============================================================ Map Container ============================================================ */ #map-container { width: 100%; /* Usa --app-height directamente para no depender de la cadena 100%. En iOS, el div padre resuelve la variable pero el navegador puede no recalcular el 100% hijo a tiempo antes de que Leaflet mida el contenedor. Con la variable directa se garantiza el valor correcto. */ height: 100vh; height: var(--app-height, 100vh); position: relative; } /* ============================================================ Barra de control — botones cuadrados bajo el zoom de Leaflet ============================================================ */ .ctrl-bar { position: absolute; top: 80px; /* justo bajo los botones +/- de Leaflet (~64px) */ left: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; } .ctrl-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 20, 0.82); border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #8a9eae; font-size: 0.9rem; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.15s, color 0.15s, border-color 0.15s; padding: 0; touch-action: manipulation; /* elimina el retraso de 300ms en iOS Safari */ -webkit-tap-highlight-color: transparent; /* quita el flash azul al tocar en iOS */ } .ctrl-btn:hover { background: rgba(50, 55, 65, 0.92); color: #d0dde8; border-color: rgba(255, 255, 255, 0.22); } .ctrl-btn--active { background: rgba(20, 45, 80, 0.92) !important; color: #7ab8f5 !important; border-color: rgba(80, 150, 220, 0.5) !important; } .ctrl-btn--logged { color: #4caf82 !important; border-color: rgba(76, 175, 130, 0.4) !important; } .ctrl-btn--logged:hover { color: #6fcfa0 !important; } /* ============================================================ Panel lateral — aparece a la derecha de la barra de control ============================================================ */ .ctrl-panel-wrap { position: absolute; top: 80px; left: 52px; /* 10px + 34px botón + 8px gap */ z-index: 950; width: 286px; max-height: calc(100vh - 100px); pointer-events: auto; } /* Panel más ancho cuando está activo el panel de meteorología (2 columnas) */ .ctrl-panel-wrap--weather { width: min(620px, calc(100vw - 80px)); } /* Transición de apertura/cierre del panel lateral */ .ctrl-slide-enter-active, .ctrl-slide-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; } .ctrl-slide-enter-from, .ctrl-slide-leave-to { opacity: 0; transform: translateX(-10px); } /* ============================================================ Overrides para modo embedded (paneles dentro del ctrl-panel-wrap) ============================================================ */ .route-panel--embedded, .weather-panel--embedded { position: static !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-height: 0; max-height: calc(100dvh - 100px); max-height: calc(100svh - 100px); overflow-y: auto; } /* En modo embedded la col de pronóstico y la de mapas fluyen sin scroll propio; el panel padre (overflow-y: auto) gestiona el scroll vertical. */ .weather-panel--embedded .weather-panel__body { flex: none; overflow: visible; } .weather-panel--embedded .weather-panel__scroll { overflow-y: visible; overflow-x: visible; } .weather-panel--embedded .weather-panel__maps-col { overflow: visible; } /* ============================================================ HUD Cluster — contenedor superior izquierdo (legacy, no usado) ============================================================ */ .hud-cluster { position: absolute; top: 16px; left: 58px; /* deja espacio al zoom control de Leaflet */ z-index: 1000; display: flex; flex-direction: column; gap: 5px; width: 186px; pointer-events: none; /* el cluster no bloquea el mapa */ } .hud-cluster > *, .hud-cluster .map-btn, .hud-cluster .route-panel-widget, .hud-cluster .weather-panel-widget { pointer-events: auto; } /* ============================================================ HUD Overlay — badge informativo ============================================================ */ .hud { background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 10px 16px; pointer-events: none; user-select: none; } .hud__title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #c8c8c8; display: flex; align-items: center; gap: 5px; } .hud__subtitle { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; color: #787878; margin-top: 2px; } /* ============================================================ Map button — dentro del hud-cluster (ancho completo) ============================================================ */ .map-btn { width: 100%; height: 30px; background: rgba(20, 20, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #a0a0a0; font-size: 0.78rem; display: flex; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.15s, color 0.15s, border-color 0.15s; } .map-btn:hover { background: rgba(50, 50, 50, 0.92); color: #e0e0e0; border-color: rgba(255, 255, 255, 0.22); } /* ============================================================ Map Toggle — rocker switch (visibilidad de capa de rutas) ============================================================ */ .map-toggle { width: 100%; height: 30px; background: rgba(20, 20, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #a0a0a0; font-size: 0.78rem; display: flex; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none; margin: 0; } .map-toggle:hover { background: rgba(50, 50, 50, 0.92); color: #e0e0e0; border-color: rgba(255, 255, 255, 0.22); } .map-toggle__input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } /* Pastilla del rocker */ .map-toggle__rocker { width: 28px; height: 15px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; position: relative; flex-shrink: 0; transition: background 0.2s; } /* Botón circular del rocker */ .map-toggle__rocker::after { content: ''; position: absolute; width: 11px; height: 11px; background: #555; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s, background 0.2s; } /* Estado activo (rutas visibles) */ .map-toggle--active { background: rgba(20, 40, 70, 0.88); color: #a0c4ff; border-color: rgba(100, 150, 220, 0.3); } .map-toggle--active:hover { background: rgba(30, 55, 95, 0.92); color: #c4d8ff; border-color: rgba(100, 150, 220, 0.45); } .map-toggle--active .map-toggle__rocker { background: rgba(41, 128, 185, 0.55); } .map-toggle--active .map-toggle__rocker::after { transform: translateX(13px); background: #7ab8f5; } .map-toggle--sm { padding: 0.3rem 0.6rem; font-size: 0.75rem; min-height: 2rem; } /* ============================================================ Route Panel Widget ============================================================ */ .route-panel-widget { position: relative; display: flex; flex-direction: column; gap: 0; } .route-panel-toggle { justify-content: flex-start; } .route-panel-toggle--active { background: rgba(30, 45, 70, 0.92) !important; color: #a0c4ff !important; border-color: rgba(100, 150, 220, 0.35) !important; } .route-badge { background: rgba(100, 150, 220, 0.3); border-radius: 10px; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; color: #a0c4ff; margin-left: auto; margin-right: 4px; } .route-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 900; width: 276px; max-height: 480px; background: rgba(10, 15, 24, 0.96); border: 1px solid rgba(100, 150, 220, 0.2); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65); display: flex; flex-direction: column; overflow: hidden; } .route-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .route-panel__title { font-size: 0.78rem; font-weight: 700; color: #c8dcff; letter-spacing: 0.03em; } .route-panel__icon-btn { background: none; border: none; color: #6889a8; font-size: 0.9rem; cursor: pointer; padding: 3px 5px; border-radius: 4px; transition: color 0.15s, background 0.15s; display: flex; align-items: center; } .route-panel__icon-btn:hover { color: #a0c4ff; background: rgba(255,255,255,0.05); } .route-panel__body { overflow-y: auto; flex: 1; max-height: 240px; } .route-panel__state { font-size: 0.73rem; color: #6889a8; padding: 14px 12px; display: flex; align-items: center; gap: 6px; } .route-panel__state--error { color: #ff9999; } .route-panel__list { list-style: none; margin: 0; padding: 4px 0; } .route-list-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .route-list-item:last-child { border-bottom: none; } .route-list-item:hover { background: rgba(100, 150, 220, 0.1); } .difficulty-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .difficulty-dot--easy { background: #27ae60; } .difficulty-dot--medium { background: #e67e22; } .difficulty-dot--hard { background: #e74c3c; } .route-list-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .route-list-item__name { font-size: 0.75rem; font-weight: 600; color: #c8dcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .route-list-item__meta { font-size: 0.67rem; color: #5a7898; } .route-list-item__arrow { color: #3a5878; font-size: 0.8rem; flex-shrink: 0; transition: color 0.15s; } .route-list-item:hover .route-list-item__arrow { color: #7ab8f5; } /* Visibilidad individual de ruta */ .route-list-item__vis { background: none; border: none; color: #5a7898; font-size: 0.78rem; cursor: pointer; padding: 3px 5px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; transition: color 0.15s, background 0.15s; line-height: 1; } .route-list-item__vis:hover { color: #a0c4ff; background: rgba(100, 150, 220, 0.12); } .route-list-item__vis--hidden { color: #334455; } .route-list-item__vis--hidden:hover { color: #6a8898; } /* Botón de descarga GPX */ .route-list-item__dl { background: none; border: none; color: #5a7898; font-size: 0.78rem; cursor: pointer; padding: 3px 5px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; transition: color 0.15s, background 0.15s; line-height: 1; } .route-list-item__dl:hover { color: #7de8a0; background: rgba(80, 200, 120, 0.12); } .route-list-item__dl:disabled { opacity: 0.5; cursor: default; } /* Ítem con ruta oculta — atenúa nombre y meta */ .route-list-item--hidden .route-list-item__name { opacity: 0.4; } .route-list-item--hidden .route-list-item__meta { opacity: 0.3; } .route-list-item__delete { background: none; border: none; color: #5a3a3a; font-size: 0.78rem; cursor: pointer; padding: 3px 5px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; transition: color 0.15s, background 0.15s; line-height: 1; } .route-list-item__delete:hover:not(:disabled) { color: #ff7070; background: rgba(200, 50, 50, 0.15); } .route-list-item__delete:disabled { opacity: 0.5; cursor: default; } .route-panel__footer { padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .route-panel__auth-hint { font-size: 0.72rem; color: #4a6070; line-height: 1.55; text-align: center; padding: 6px 4px; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; } .route-panel__btn { width: 100%; padding: 6px 10px; border-radius: 6px; font-size: 0.74rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: background 0.15s, color 0.15s; border: 1px solid transparent; } .route-panel__btn--primary { background: rgba(41, 128, 185, 0.25); color: #7ab8f5; border-color: rgba(41, 128, 185, 0.3); } .route-panel__btn--primary:hover { background: rgba(41, 128, 185, 0.4); color: #a8d4ff; } .route-panel__btn--secondary { background: rgba(255, 255, 255, 0.04); color: #8099b8; border-color: rgba(255, 255, 255, 0.1); } .route-panel__btn--secondary:hover { background: rgba(255, 255, 255, 0.08); color: #c0d4f0; } .route-panel__user-bar { display: flex; align-items: center; gap: 6px; font-size: 0.73rem; color: #7ab8f5; padding: 2px 0; } /* ── Upload form ────────────────────────────────────────────── */ .upload-form { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; } .upload-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; color: #d0d8e8; font-size: 0.72rem; padding: 5px 9px; width: 100%; transition: border-color 0.15s; box-sizing: border-box; } .upload-input:focus { outline: none; border-color: rgba(100, 150, 220, 0.5); } .upload-input::placeholder { color: #3a4a5a; } .upload-textarea { resize: none; min-height: 46px; } .upload-select { -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236889a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; } .upload-file-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #7ab8f5; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(100, 150, 220, 0.3); border-radius: 5px; padding: 6px 9px; cursor: pointer; transition: background 0.15s, border-color 0.15s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .upload-file-label:hover { background: rgba(100, 150, 220, 0.1); border-color: rgba(100, 150, 220, 0.5); } .upload-file-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .upload-msg { font-size: 0.7rem; margin: 0; display: flex; align-items: center; gap: 4px; } .upload-msg--error { color: #ff9999; } .upload-msg--ok { color: #63e6a0; } /* ============================================================ Login Modal ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .login-modal { background: rgba(12, 18, 28, 0.98); border: 1px solid rgba(100, 150, 220, 0.28); border-radius: 12px; padding: 28px 32px; width: min(360px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75); } .login-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .login-modal__title { font-size: 0.92rem; font-weight: 700; color: #c8dcff; letter-spacing: 0.04em; } .login-modal__form { display: flex; flex-direction: column; gap: 14px; } .login-modal__field { display: flex; flex-direction: column; gap: 5px; } .login-modal__label { font-size: 0.72rem; font-weight: 600; color: #6889a8; letter-spacing: 0.06em; text-transform: uppercase; } .login-modal__input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; color: #e0e8f4; font-size: 0.85rem; padding: 9px 13px; transition: border-color 0.15s, box-shadow 0.15s; } .login-modal__input:focus { outline: none; border-color: rgba(100, 150, 220, 0.6); box-shadow: 0 0 0 3px rgba(100, 150, 220, 0.15); } .login-modal__input::placeholder { color: #2a3a4a; } .login-modal__error { font-size: 0.73rem; color: #ff9999; margin: -4px 0 0; display: flex; align-items: center; gap: 5px; } .login-modal__submit { width: 100%; padding: 9px 14px; background: rgba(41, 128, 185, 0.3); border: 1px solid rgba(41, 128, 185, 0.4); border-radius: 7px; color: #a0c4ff; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; margin-top: 4px; } .login-modal__submit:hover:not(:disabled) { background: rgba(41, 128, 185, 0.5); color: #c8e0ff; } .login-modal__submit:disabled { opacity: 0.55; cursor: default; } .login-modal__hint { font-size: 0.67rem; color: #3a4f62; margin: 14px 0 0; text-align: center; line-height: 1.6; } .login-modal__hint code { color: #5a8fc0; font-family: monospace; font-size: 0.72rem; } /* ============================================================ Panel de autenticación unificado (LoginModal reemplazado) ============================================================ */ .auth-panel { background: rgba(14, 22, 32, 0.96); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); } .auth-panel__header { display: flex; align-items: center; padding: 12px 14px 10px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #8aafc8; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; } .auth-panel__title { font-weight: 600; } /* Tabs */ .auth-panel__tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .auth-panel__tab { flex: 1; padding: 8px 4px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #5a7890; font-size: 0.72rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; justify-content: center; gap: 3px; } .auth-panel__tab:hover { color: #9ab8d0; } .auth-panel__tab.active { color: #7ab8f5; border-bottom-color: #7ab8f5; } /* Formulario */ .auth-panel__form { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .auth-panel__label { font-size: 0.72rem; color: #6a8fa8; margin-bottom: 2px; display: flex; align-items: center; } .auth-panel__input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #d0dde8; font-size: 0.8rem; padding: 6px 10px; outline: none; transition: border-color 0.15s, background 0.15s; } .auth-panel__input:focus { border-color: rgba(100, 170, 240, 0.5); background: rgba(255, 255, 255, 0.08); } .auth-panel__input::placeholder { color: #2a3a4a; } /* Botones */ .auth-panel__btn { width: 100%; padding: 8px 12px; border: none; border-radius: 6px; font-size: 0.8rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, opacity 0.15s; margin-top: 4px; } .auth-panel__btn--primary { background: linear-gradient(135deg, #2a6aad, #1a4a8a); color: #e8f3ff; } .auth-panel__btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, #3a7abd, #2a5a9a); } .auth-panel__btn--primary:disabled { opacity: 0.55; cursor: default; } .auth-panel__btn--secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #9ab8d0; } .auth-panel__btn--secondary:hover { background: rgba(255, 255, 255, 0.10); color: #c0d8ea; } /* Mensajes */ .auth-panel__msg { margin: 8px 14px 0; padding: 7px 10px; border-radius: 6px; font-size: 0.75rem; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; } .auth-panel__msg--error { background: rgba(200, 60, 60, 0.15); border: 1px solid rgba(200, 80, 80, 0.3); color: #e07070; } .auth-panel__msg--ok { background: rgba(60, 160, 100, 0.15); border: 1px solid rgba(60, 160, 100, 0.3); color: #70c890; } /* Vista logueado */ .auth-panel__logged { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .auth-panel__user-info { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #b0ccdf; } .auth-panel__badge { font-size: 0.64rem; background: rgba(90, 160, 100, 0.2); border: 1px solid rgba(90, 175, 110, 0.35); color: #7acc90; border-radius: 4px; padding: 1px 6px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-left: auto; } /* Nota de ayuda */ .auth-panel__hint { font-size: 0.67rem; color: #3a4f62; margin: 6px 0 0; text-align: center; line-height: 1.6; } /* ── Spin animation (refresh icon) ──────────────────────────── */ @keyframes spin-refresh { to { transform: rotate(360deg); } } .spin { animation: spin-refresh 0.8s linear infinite; } /* ============================================================ Crosshair — centre indicator ============================================================ */ .crosshair { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); z-index: 300; /* encima del mapa (0) pero debajo de todo el UI (≥500) */ pointer-events: none; } .crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(220, 220, 220, 0.55); border-radius: 1px; } .crosshair::before { /* horizontal bar */ width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); } .crosshair::after { /* vertical bar */ width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } /* ============================================================ Coordinates bar — bottom centre ============================================================ */ .coords-bar { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(10, 10, 10, 0.68); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 5px 18px; font-size: 0.7rem; letter-spacing: 0.08em; color: #909090; pointer-events: none; white-space: nowrap; } .coords-bar span { color: #c0c0c0; font-weight: 600; } /* ============================================================ Leaflet overrides — keep attribution minimal & dark ============================================================ */ .leaflet-control-attribution { background: rgba(10, 10, 10, 0.55) !important; color: #555 !important; font-size: 0.6rem !important; border-radius: 4px 0 0 0 !important; } .leaflet-control-attribution a { color: #666 !important; } .leaflet-control-zoom a { background: rgba(20, 20, 20, 0.82) !important; color: #a0a0a0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .leaflet-control-zoom a:hover { background: rgba(40, 40, 40, 0.92) !important; color: #e0e0e0 !important; } /* ============================================================ Spinner — se usa Bootstrap .spinner-border ============================================================ */ /* Ajuste de color para el spinner de carga de rutas/elevación */ .spinner-border.text-info { color: #a0c4ff !important; } /* ============================================================ RouteLayer UI — estado flotante (esquina superior derecha del mapa) ============================================================ */ .route-layer-ui { position: absolute; top: 12px; right: 52px; /* deja espacio a los controles de zoom */ z-index: 500; pointer-events: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .route-status { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .route-status--loading { background: rgba(20, 30, 50, 0.78); color: #a0c4ff; } .route-status--count { background: rgba(10, 20, 30, 0.65); color: #7ab8f5; } .route-status--error { background: rgba(80, 20, 20, 0.80); color: #ffaaaa; pointer-events: auto; } /* Vue transition helper */ .fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* ============================================================ Leaflet route tooltip ============================================================ */ .route-tooltip { background: rgba(10, 15, 25, 0.88) !important; border: 1px solid rgba(120, 160, 220, 0.35) !important; color: #d8e8ff !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important; } .route-tooltip::before { display: none !important; } /* ============================================================ ElevationPanel — panel deslizable en la parte inferior ============================================================ */ .elevation-panel { position: absolute; bottom: 32px; /* por encima de la barra de coords */ left: 50%; transform: translateX(-50%); z-index: 600; width: min(620px, calc(100vw - 24px)); background: rgba(10, 15, 24, 0.93); border: 1px solid rgba(100, 150, 220, 0.22); border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; } .elevation-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .elevation-panel__title { font-size: 0.78rem; font-weight: 700; color: #c8dcff; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bootstrap .btn-close.btn-close-white maneja la apariencia; sólo necesitamos dimensiones y posición */ .elevation-panel__close { flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; } .elevation-panel__close:hover { opacity: 1; } .elevation-panel__state { font-size: 0.73rem; color: #8099b8; min-height: 32px; display: flex; align-items: center; gap: 6px; } .elevation-panel__state--error { color: #ff9999; } .elevation-panel__stats { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 2px 0; } .stat { font-size: 0.72rem; font-weight: 600; color: #a8c4e8; display: flex; align-items: center; gap: 4px; } .stat__icon { color: #5a8bbf; font-size: 0.85rem; line-height: 1; } /* SVG chart */ .elevation-chart { width: 100%; height: auto; display: block; border-radius: 4px; background: rgba(255, 255, 255, 0.02); } /* Vue panel slide transition */ .panel-slide-enter-active { transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .panel-slide-leave-active { transition: opacity 0.18s ease, transform 0.2s ease; } .panel-slide-enter-from { opacity: 0; transform: translateX(-50%) translateY(14px); } .panel-slide-leave-to { opacity: 0; transform: translateX(-50%) translateY(10px); } /* ============================================================ SettingsModal — modal de configuración meteorológica ============================================================ */ .settings-modal { background: rgba(10, 15, 24, 0.97); border: 1px solid rgba(100, 150, 220, 0.22); border-radius: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.70); width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; } .settings-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .settings-modal__title { font-size: 0.82rem; font-weight: 700; color: #c8dcff; letter-spacing: 0.03em; display: flex; align-items: center; } .settings-modal__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; } .settings-modal__section { display: flex; flex-direction: column; gap: 8px; } .settings-modal__label { font-size: 0.74rem; font-weight: 600; color: #7a9dc0; letter-spacing: 0.03em; display: flex; align-items: center; } .settings-modal__providers { display: flex; flex-direction: column; gap: 5px; } .settings-provider-card { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .settings-provider-card--active { border-color: rgba(100, 150, 220, 0.4); background: rgba(30, 50, 90, 0.35); } .settings-provider-card__input { display: none; } .settings-provider-card__name { font-size: 0.78rem; font-weight: 700; color: #c8dcff; } .settings-provider-card__desc { font-size: 0.68rem; color: #5a7898; } .settings-modal__key-row { display: flex; gap: 6px; } .settings-modal__input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #d0e4ff; font-size: 0.78rem; padding: 7px 10px; outline: none; font-family: 'Courier New', monospace; transition: border-color 0.15s; } .settings-modal__input:focus { border-color: rgba(100, 150, 220, 0.45); } .settings-modal__input::placeholder { color: #3a5065; } .settings-modal__eye-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #6889a8; width: 34px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: color 0.15s, border-color 0.15s; } .settings-modal__eye-btn:hover { color: #a0c4ff; border-color: rgba(100, 150, 220, 0.3); } .settings-modal__hint { font-size: 0.68rem; color: #4a6880; display: flex; align-items: center; gap: 3px; margin: 0; } .settings-modal__link { color: #5a90c0; text-decoration: none; } .settings-modal__link:hover { color: #7ab8f5; text-decoration: underline; } .settings-modal__footer { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); justify-content: flex-end; } .settings-modal__cancel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #7890a8; font-size: 0.77rem; padding: 6px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; } .settings-modal__cancel:hover { background: rgba(255, 255, 255, 0.1); color: #b0c8e0; } .settings-modal__save { background: rgba(30, 80, 150, 0.55); border: 1px solid rgba(100, 160, 240, 0.35); border-radius: 6px; color: #a0c8ff; font-size: 0.77rem; font-weight: 600; padding: 6px 18px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background 0.15s, border-color 0.15s; } .settings-modal__save:hover:not(:disabled) { background: rgba(40, 100, 180, 0.7); border-color: rgba(120, 180, 255, 0.5); } .settings-modal__save:disabled { opacity: 0.4; cursor: default; } /* ============================================================ WeatherPanel — panel flotante meteorológico ============================================================ */ .weather-panel-widget { position: relative; display: flex; flex-direction: column; gap: 0; } .weather-panel-toggle { justify-content: flex-start; gap: 7px; } .weather-panel-toggle--active { background: rgba(20, 40, 80, 0.88) !important; color: #90d4ff !important; border-color: rgba(80, 160, 220, 0.35) !important; } /* ── Panel contenedor ──────────────────────────────────────────────── */ .weather-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 900; /* Responsive: usa todo el espacio disponible con límites mínimos/máximos */ width: min(620px, calc(100vw - 80px)); min-width: 280px; height: auto; min-height: 300px; max-height: calc(100dvh - 120px); max-height: calc(100svh - 120px); background: rgba(8, 14, 24, 0.96); border: 1px solid rgba(80, 150, 220, 0.2); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65); display: flex; flex-direction: column; overflow: hidden; } .weather-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; gap: 8px; } .weather-panel__title { font-size: 0.78rem; font-weight: 700; color: #b8d8ff; letter-spacing: 0.03em; flex-shrink: 0; } /* ── Selector de proveedor en la cabecera ─────────────────────────── */ .wp-provider-tabs { display: flex; gap: 3px; flex-shrink: 0; } .wp-provider-tab { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(80, 140, 200, 0.15); border-radius: 5px; color: #5a7898; font-size: 0.60rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .wp-provider-tab:hover { background: rgba(80, 140, 200, 0.14); color: #90c0e8; border-color: rgba(80, 140, 200, 0.3); } .wp-provider-tab--active { background: rgba(50, 110, 200, 0.28); border-color: rgba(80, 160, 240, 0.55); color: #90d4ff; } /* ── Sin API Key ────────────────────────────────────────────────────── */ .weather-panel__no-key { font-size: 0.74rem; color: #7a9ab8; padding: 12px 14px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .weather-panel__cfg-link { background: none; border: none; color: #5a90cc; font-size: 0.74rem; cursor: pointer; padding: 0; text-decoration: underline; } .weather-panel__cfg-link:hover { color: #7ab8f5; } /* ── Buscador ───────────────────────────────────────────────────────── */ .weather-panel__search { padding: 8px 10px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex-shrink: 0; position: relative; } .weather-panel__search-wrap { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 5px 9px; } .weather-panel__search-icon { font-size: 0.75rem; color: #4a6878; flex-shrink: 0; } .weather-panel__search-input { background: none; border: none; color: #c0d8f0; font-size: 0.76rem; outline: none; flex: 1; min-width: 0; } .weather-panel__search-input::placeholder { color: #3a5568; } .weather-panel__spinner { color: #5a9acc; width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .weather-panel__err { font-size: 0.68rem; color: #ff8888; margin: 5px 0 0; display: flex; align-items: center; gap: 4px; } /* ── Resultados de búsqueda ─────────────────────────────────────────── */ .weather-search-results { list-style: none; margin: 5px 0 0; padding: 0; background: rgba(8, 14, 24, 0.98); border: 1px solid rgba(80, 150, 220, 0.2); border-radius: 6px; max-height: 180px; overflow-y: auto; position: absolute; left: 10px; right: 10px; z-index: 1000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } .weather-search-results__item { display: flex; align-items: center; gap: 7px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.12s; } .weather-search-results__item:last-child { border-bottom: none; } .weather-search-results__item:hover { background: rgba(60, 120, 200, 0.18); } .weather-search-results__icon { color: #3a6888; font-size: 0.72rem; flex-shrink: 0; } .weather-search-results__name { font-size: 0.75rem; font-weight: 600; color: #b8d4f0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .weather-search-results__id { font-size: 0.64rem; color: #3a5870; font-family: monospace; flex-shrink: 0; } /* ── Estado carga / error ───────────────────────────────────────────── */ .weather-panel__state { font-size: 0.73rem; color: #6889a8; padding: 10px 12px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .weather-panel__state--error { color: #ff9999; } /* ── Municipio seleccionado ─────────────────────────────────────────── */ .weather-panel__location { display: flex; align-items: baseline; gap: 4px; padding: 8px 12px 4px; flex-shrink: 0; } .weather-panel__location-name { font-size: 0.82rem; font-weight: 700; color: #c8e4ff; } .weather-panel__location-prov { font-size: 0.70rem; color: #4a6878; } /* ── Forecast strip (scroll horizontal) ─────────────────────────────── */ .weather-forecast-strip { display: flex; gap: 6px; padding: 8px 10px 12px; overflow-x: auto; flex-shrink: 0; scrollbar-width: thin; scrollbar-color: rgba(80, 140, 200, 0.3) transparent; } .weather-forecast-strip::-webkit-scrollbar { height: 4px; } .weather-forecast-strip::-webkit-scrollbar-track { background: transparent; } .weather-forecast-strip::-webkit-scrollbar-thumb { background: rgba(80, 140, 200, 0.3); border-radius: 2px; } /* ── Tarjeta de día ──────────────────────────────────────────────────── */ .weather-day-card { min-width: 64px; flex-shrink: 0; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(80, 140, 200, 0.14); border-radius: 8px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: background 0.15s, border-color 0.15s; } .weather-day-card:hover { background: rgba(60, 120, 200, 0.12); border-color: rgba(80, 150, 220, 0.28); } .weather-day-card__date { font-size: 0.64rem; font-weight: 700; color: #6a90b8; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .weather-day-card__icon { font-size: 1.3rem; line-height: 1; } /* Colores de iconos de cielo */ .bi-sun-fill { color: #f5c842; } .bi-cloud-sun { color: #a0c8e8; } .bi-cloud-sun-fill { color: #a0c8e8; } .bi-cloud-fill { color: #8099b8; } .bi-clouds { color: #8099b8; } .bi-clouds-fill { color: #6a829a; } .bi-cloud { color: #8099b8; } .bi-cloud-drizzle { color: #70a8d8; } .bi-cloud-drizzle-fill { color: #5a98cc; } .bi-cloud-rain { color: #5090cc; } .bi-cloud-rain-fill { color: #3878b8; } .bi-cloud-snow { color: #b8d8f8; } .bi-snow { color: #c8e4ff; } .bi-snow2 { color: #b0d0f0; } .bi-cloud-sleet { color: #90b8d8; } .bi-cloud-sleet-fill { color: #80a8c8; } .bi-cloud-lightning-rain { color: #e8b040; } .bi-cloud-lightning-rain-fill { color: #e0a030; } .bi-moon-stars-fill { color: #d8c090; } .bi-cloud-moon { color: #9098b8; } .bi-cloud-moon-fill { color: #8090b0; } .bi-wind { color: #6899b8; } .weather-day-card__temps { display: flex; flex-direction: column; align-items: center; gap: 2px; } .weather-day-card__tmax { font-size: 0.80rem; font-weight: 700; line-height: 1; } .weather-day-card__tmin { font-size: 0.68rem; font-weight: 400; opacity: 0.75; line-height: 1; } .weather-day-card__precip { font-size: 0.64rem; color: #6090c8; display: flex; align-items: center; gap: 2px; white-space: nowrap; } .weather-day-card__wind { font-size: 0.62rem; color: #4a7898; display: flex; align-items: center; gap: 2px; white-space: nowrap; } /* ── Estado vacío ───────────────────────────────────────────────────── */ .weather-panel__empty { font-size: 0.72rem; color: #4a6878; padding: 12px 14px; display: flex; align-items: center; gap: 5px; } /* ── Mapas meteorológicos — acordeón con miniatura ──────────────────── */ .weather-panel__section { padding: 0.5rem 0.75rem 0.6rem; border-top: 1px solid rgba(255,255,255,0.07); } .weather-panel__section-title { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #888; margin-bottom: 0.3rem; } /* Acordeón de capas */ .wmap-item { border-top: 1px solid rgba(255,255,255,0.05); } .wmap-item:first-of-type { border-top: none; } .wmap-item__header { display: flex; align-items: center; gap: 0.45rem; width: 100%; background: none; border: none; padding: 0.4rem 0.1rem; font-size: 0.76rem; color: #9ab8cc; cursor: pointer; text-align: left; transition: color 0.15s; } .wmap-item__header:hover, .wmap-item__header--open { color: #c8e0ee; } .wmap-item__icon { font-size: 0.8rem; opacity: 0.75; flex-shrink: 0; } .wmap-item__label { flex: 1; } .wmap-item__chevron { font-size: 0.6rem; opacity: 0.5; transition: transform 0.2s ease; flex-shrink: 0; } .wmap-item__body { padding: 0 0.1rem 0.55rem; } .wmap-item__loading, .wmap-item__error { font-size: 0.7rem; padding: 0.3rem 0; display: flex; align-items: center; gap: 0.3rem; } .wmap-item__loading { color: #6a8898; } .wmap-item__error { color: #e08050; } .wmap-item__thumb { width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); display: block; background: rgba(0,0,0,0.3); } .weather-panel__layers-nokey { font-size: 0.7rem; color: #c8a44a; margin-bottom: 0.4rem; } /* Aviso "requiere sesión" en sección de mapas meteorológicos */ .weather-panel__auth-req { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #c8a44a; padding: 8px 4px 6px; opacity: 0.85; } /* ══════════════════════════════════════════════════════════════════════════ WeatherPanel rediseño — scroll wrapper + tarjeta hero + highlights + lista ══════════════════════════════════════════════════════════════════════════ */ /* Scroll wrapper: todo el contenido bajo el header fijo */ .weather-panel__scroll { flex: 1 1 auto; min-width: 260px; max-width: 320px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgba(255, 255, 255, 0.05); scrollbar-width: thin; scrollbar-color: rgba(80, 140, 200, 0.2) transparent; } .weather-panel__scroll::-webkit-scrollbar { width: 3px; } .weather-panel__scroll::-webkit-scrollbar-track { background: transparent; } .weather-panel__scroll::-webkit-scrollbar-thumb { background: rgba(80, 140, 200, 0.25); border-radius: 2px; } /* ── Cuerpo dual: pronóstico (izq) + mapas (der) ──────────────────── */ .weather-panel__body { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: row; overflow: hidden; } /* Columna derecha — lista de mapas meteorológicos */ .weather-panel__maps-col { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(80, 140, 200, 0.2) transparent; } .weather-panel__maps-col::-webkit-scrollbar { width: 3px; } .weather-panel__maps-col::-webkit-scrollbar-track { background: transparent; } .weather-panel__maps-col::-webkit-scrollbar-thumb { background: rgba(80, 140, 200, 0.25); border-radius: 2px; } /* ── Tarjeta principal — día actual ──────────────────────────────── */ .wp-hero { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 12px; background: linear-gradient(135deg, rgba(15, 30, 68, 0.65) 0%, rgba(8, 16, 40, 0.45) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .wp-hero__left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .wp-hero__temp { font-size: 2.2rem; font-weight: 700; color: #e8f4ff; line-height: 1; letter-spacing: -0.02em; } .wp-hero__tmin { font-size: 1rem; font-weight: 400; color: #7a9ab8; } .wp-hero__desc { font-size: 0.76rem; color: #8ab0d0; text-transform: capitalize; margin-top: 4px; } .wp-hero__loc { font-size: 0.70rem; color: #5a7898; display: flex; align-items: center; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-hero__date { font-size: 0.63rem; color: #3a5570; margin-top: 2px; } .wp-hero__icon-wrap { width: 68px; height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .wp-hero__sky-icon { font-size: 2.8rem !important; line-height: 1 !important; filter: drop-shadow(0 0 12px rgba(130, 190, 255, 0.2)); } /* ── Grid de destacados ────────────────────────────────────────── */ .wp-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .wp-hl-card { background: rgba(255, 255, 255, 0.034); border: 1px solid rgba(80, 140, 200, 0.1); border-radius: 8px; padding: 8px 10px 7px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; position: relative; } .wp-hl-card__label { font-size: 0.58rem; color: #4a6880; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; } .wp-hl-card__value { font-size: 1.25rem; font-weight: 700; color: #c8e0f8; line-height: 1.15; } .wp-hl-card__unit { font-size: 0.60rem; font-weight: 400; color: #4a6880; margin-left: 1px; } .wp-hl-card__sub { font-size: 0.58rem; color: #3a5870; margin-top: 2px; } .wp-hl-card__wave { width: 100%; height: 16px; margin-top: 4px; } .wp-hl-card__gauge { display: block; width: 56px; height: 32px; margin: 3px 0 1px; } /* ── Previsión — lista vertical 7 días ────────────────────────────── */ .wp-forecast { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 2px; } .wp-forecast__title { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #3a5870; padding: 8px 12px 4px; } .wp-fc-row { display: grid; grid-template-columns: 52px 18px 1fr auto auto; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.03); transition: background 0.12s; } .wp-fc-row:last-child { border-bottom: none; } .wp-fc-row:hover { background: rgba(60, 120, 200, 0.07); } .wp-fc-row--today { background: rgba(50, 100, 180, 0.09); } .wp-fc-row__date { font-size: 0.70rem; color: #6a8aaa; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-fc-row__icon { font-size: 0.95rem; text-align: center; } .wp-fc-row__temps { font-size: 0.74rem; font-weight: 600; color: #c0d8f0; white-space: nowrap; } .wp-fc-row__sep { color: #2a4860; font-weight: 400; } .wp-fc-row__tmin { font-weight: 400; opacity: 0.55; } .wp-fc-row__precip { font-size: 0.65rem; color: #4a80be; display: flex; align-items: center; gap: 3px; justify-content: flex-end; min-width: 36px; } .wp-fc-row__wind { font-size: 0.60rem; color: #d0a040; display: flex; align-items: center; gap: 2px; min-width: 28px; } /* ── Comparación de temperaturas por proveedor ─────────────────────── */ .wp-temps-compare { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .wp-temps-compare__title { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #3a5870; margin-bottom: 6px; } .wp-temps-compare__grid { display: flex; gap: 8px; flex-wrap: wrap; } .wp-temp-item { display: flex; align-items: center; gap: 6px; background: rgba(30, 50, 80, 0.3); padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; } .wp-temp-item__provider { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 4px; border-radius: 3px; opacity: 0.9; } .wp-temp-item__provider--aemet { background: #2a6090; color: #fff; } .wp-temp-item__provider--owm { background: #e06020; color: #fff; } .wp-temp-item__provider--metno { background: #308060; color: #fff; } .wp-temp-item__max { font-weight: 600; } .wp-temp-item__min { font-weight: 400; opacity: 0.65; } /* ── Badges de proveedores en la tarjeta hero ──────────────────────── */ .wp-hero__providers { display: flex; gap: 4px; margin-top: 6px; } .wp-provider-badge { width: 16px; height: 16px; border-radius: 50%; font-size: 0.55rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; } .wp-provider-badge--aemet { background: #2a6090; } .wp-provider-badge--owm { background: #e06020; } .wp-provider-badge--metno { background: #308060; } /* ── Indicadores de proveedores en tarjetas de destacados ───────────── */ .wp-hl-card__providers { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .wp-hl-prov { font-size: 0.50rem; font-weight: 600; padding: 1px 3px; border-radius: 3px; color: #fff; opacity: 0.8; } .wp-hl-prov--aemet { background: #2a6090; } .wp-hl-prov--owm { background: #e06020; } .wp-hl-prov--metno { background: #308060; } /* ── Gráfico de tendencia 5 días ───────────────────────────────────── */ .wp-trend { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .wp-trend__title { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #3a5870; margin-bottom: 6px; } .wp-trend__legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .wp-trend__leg { font-size: 0.55rem; display: flex; align-items: center; gap: 3px; color: rgba(255, 255, 255, 0.6); } .wp-trend__leg i { font-size: 0.40rem; } .wp-trend__leg--tmax i { color: #ff6b6b; } .wp-trend__leg--tmin i { color: #4dabf7; } .wp-trend__leg--precip i { color: #69db7c; } .wp-trend__leg--wind i { color: #ffd43b; } .wp-trend__chart { width: 100%; height: auto; max-height: 130px; background: rgba(20, 35, 55, 0.5); border-radius: 8px; } /* ══════════════════════════════════════════════════════════════════════════ USERS PANEL — gestión de usuarios (admin only) ══════════════════════════════════════════════════════════════════════════ */ .users-panel-widget { width: 100%; } .users-panel { background: rgba(12, 22, 36, 0.97); border: 1px solid rgba(100, 140, 200, 0.18); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; } .users-panel--embedded { position: static !important; border-radius: 0 0 10px 10px; border-top: none; max-height: calc(100vh - 160px); } .users-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } .users-panel__title { font-size: 0.82rem; font-weight: 600; color: #c8d8f0; letter-spacing: 0.02em; } .users-panel__footer { padding: 10px 10px 12px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } /* Lista de usuarios */ .users-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; } .user-item { border-bottom: 1px solid rgba(255,255,255,0.05); } .user-item:last-child { border-bottom: none; } .user-item__row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; transition: background 0.12s; } .user-item__row:hover { background: rgba(80,120,180,0.08); } .user-item__icon { font-size: 1rem; color: #5a7898; flex-shrink: 0; } .user-item__icon--admin { color: #7ab8f5; } .user-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .user-item__name { font-size: 0.78rem; font-weight: 600; color: #c8d8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-item__meta { font-size: 0.65rem; color: #5a7898; margin-top: 1px; } /* Botones de acción */ .user-item__btn { background: none; border: none; color: #5a7898; font-size: 0.78rem; cursor: pointer; padding: 3px 5px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; transition: color 0.15s, background 0.15s; line-height: 1; } .user-item__btn:hover:not(:disabled) { color: #a0c4ff; background: rgba(100,150,220,0.12); } .user-item__btn--admin { color: #7ab8f5; } .user-item__btn--admin:hover:not(:disabled) { color: #a0c4ff; } .user-item__btn--danger:hover:not(:disabled) { color: #f08080; background: rgba(220,80,80,0.12); } .user-item__btn--save:hover:not(:disabled) { color: #7de8a0; background: rgba(80,200,120,0.12); } .user-item__btn:disabled { opacity: 0.4; cursor: default; } /* Edición inline de contraseña */ .user-item__pwd-row { display: flex; align-items: center; gap: 4px; padding: 4px 10px 8px; flex-wrap: wrap; } .user-item__pwd-input { flex: 1; min-width: 120px; background: rgba(255,255,255,0.06); border: 1px solid rgba(100,140,200,0.3); border-radius: 4px; color: #c8d8f0; font-size: 0.72rem; padding: 3px 8px; outline: none; } .user-item__pwd-input:focus { border-color: rgba(100,160,240,0.6); } .user-item__pwd-err { font-size: 0.65rem; color: #e08050; width: 100%; margin-top: 2px; } /* Formulario de creación */ .users-create-form { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; } .users-create-form__row { display: flex; flex-direction: column; gap: 4px; } .users-create-form__input { background: rgba(255,255,255,0.06); border: 1px solid rgba(100,140,200,0.3); border-radius: 4px; color: #c8d8f0; font-size: 0.72rem; padding: 4px 8px; outline: none; width: 100%; } .users-create-form__input:focus { border-color: rgba(100,160,240,0.6); } .users-create-form__check { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #a0b4c8; cursor: pointer; } .users-create-form__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; } /* ══════════════════════════════════════════════════════════════════════════ PESTAÑAS del panel meteorológico (Sanabria / Buscar) ══════════════════════════════════════════════════════════════════════════ */ .weather-tab-bar { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.15); } .weather-tab { flex: 1; background: none; border: none; padding: 7px 6px; font-size: 0.70rem; font-weight: 500; color: #5a7890; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: color 0.15s, background 0.15s; border-bottom: 2px solid transparent; } .weather-tab:hover { color: #8ab8d8; background: rgba(255,255,255,0.04); } .weather-tab--active { color: #a8d0e8; border-bottom-color: #4a9ac8; background: rgba(74,154,200,0.06); } .weather-tab-pane { max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } /* ── Lista de municipios del área Sanabria ──────────────────────────────── */ .area-mun-list { padding: 4px 0; } .area-mun-card { border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.12s; } .area-mun-card:last-child { border-bottom: none; } .area-mun-card:hover { background: rgba(255,255,255,0.04); } .area-mun-card--expanded { background: rgba(74,154,200,0.06); } .area-mun-card--error { cursor: default; opacity: 0.65; } .area-mun-card__header { display: flex; align-items: center; gap: 6px; padding: 7px 12px; } .area-mun-card__name { font-size: 0.72rem; font-weight: 600; color: #b0c8d8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .area-mun-card__icon { font-size: 0.95rem; flex-shrink: 0; } .area-mun-card__temps { font-size: 0.70rem; font-weight: 600; display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .area-mun-card__chevron { font-size: 0.60rem; color: #4a6878; flex-shrink: 0; margin-left: 2px; } .area-mun-card__err-badge { font-size: 0.65rem; color: #e07050; margin-left: auto; } /* Tira de días incrustada en tarjeta municipio */ .weather-forecast-strip--inline { padding: 4px 8px 8px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.12); overflow-x: auto; display: flex; gap: 4px; } .weather-day-card--sm { min-width: 46px; max-width: 52px; padding: 5px 3px; } .weather-day-card--sm .weather-day-card__date { font-size: 0.60rem; } .weather-day-card--sm .weather-day-card__icon { font-size: 1.05rem; } .weather-day-card--sm .weather-day-card__tmax { font-size: 0.72rem; } .weather-day-card--sm .weather-day-card__tmin { font-size: 0.60rem; } /* ══════════════════════════════════════════════════════════════════════════ SECCIÓN DE CAPAS DEL MAPA ══════════════════════════════════════════════════════════════════════════ */ .weather-layers-section { border-top: 1px solid rgba(255,255,255,0.08); padding: 6px 0 4px; background: rgba(0,0,0,0.12); } .weather-layers-section__title { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #3a5868; padding: 2px 12px 4px; } .weather-layer-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer; transition: background 0.12s; margin: 0; } .weather-layer-toggle:hover { background: rgba(255,255,255,0.04); } .weather-layer-toggle__label { font-size: 0.70rem; color: #7a99b0; display: flex; align-items: center; flex: 1; } .weather-layer-toggle__badge { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(225,80,50,0.25); color: #e05030; padding: 1px 5px; border-radius: 3px; margin-right: 4px; animation: blink-badge 2s infinite; } @keyframes blink-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Form switch mínimo en el panel (Bootstrap 5 override para tamaño pequeño) */ .weather-layer-toggle .form-check-input { width: 2rem; height: 1rem; cursor: pointer; background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); } .weather-layer-toggle .form-check-input:checked { background-color: #3a8ab8; border-color: #3a8ab8; } /* ══════════════════════════════════════════════════════════════════════════ MARCADORES DE ESTACIONES METEOROLÓGICAS EN EL MAPA ══════════════════════════════════════════════════════════════════════════ */ /* Icono del marcador (DivIcon) */ .weather-station-marker { background: rgba(10, 18, 28, 0.85); border: 1px solid rgba(74, 154, 200, 0.55); border-radius: 5px; padding: 2px 5px; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); white-space: nowrap; font-family: inherit; cursor: pointer; pointer-events: auto; } .wsm-temp { font-size: 0.72rem; font-weight: 700; color: #a0d0e8; } .wsm-prec { font-size: 0.64rem; color: #5090cc; } .wsm-wind { font-size: 0.60rem; color: #5a7a90; } /* Popup de estación (wrapper Leaflet) */ .wsp-popup .leaflet-popup-content-wrapper { background: rgba(10, 18, 28, 0.93); border: 1px solid rgba(74, 154, 200, 0.35); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.7); color: #b0c8d8; padding: 0; } .wsp-popup .leaflet-popup-tip { background: rgba(10, 18, 28, 0.93); } .wsp-popup .leaflet-popup-content { margin: 0; } .wsp { padding: 8px 12px; min-width: 140px; } .wsp__title { font-size: 0.78rem; font-weight: 700; color: #a8d0e8; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 4px; } .wsp__row { font-size: 0.70rem; color: #8098b0; padding: 1px 0; } .wsp__date { font-size: 0.62rem; color: #3a5868; margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); } /* Radar overlay — borde suave en el mapa */ .weather-radar-overlay { mix-blend-mode: screen; filter: saturate(1.4) brightness(1.15); } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE — Mobile-first breakpoints Regla: sólo ajustes de layout/tamaño; sin cambios de color, icono ni funcionalidad. Todas las clases referenciadas existen en el desktop CSS. ══════════════════════════════════════════════════════════════════════════ */ /* ── Utilidades SVH (viewport dinámico, descuenta chrome del navegador) ── */ /* Se usa --dvh como fallback cuando dvh no es soportado (Safari < 15.4) */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ── Teléfono — hasta 575 px ── */ @media (max-width: 575px) { /* 1. Barra de control: respetar zona segura (notch / Dynamic Island) ---- */ .ctrl-bar { top: calc(80px + var(--safe-top)); left: calc(10px + var(--safe-left)); } /* 2. Panel lateral: ancho dinámico, nunca desborda la pantalla ---------- */ /* 56 = 10px margen + 38px botón (táctil) + 8px gap */ .ctrl-panel-wrap { top: calc(80px + var(--safe-top)); left: calc(56px + var(--safe-left)); width: calc(100vw - 64px); /* 64 = 56 + 8px margen derecho */ max-height: calc(100svh - 100px); /* svh descuenta la URL bar */ max-height: calc(100dvh - 100px); /* dvh: fallback moderno */ } /* 3. Paneles embebidos: misma lógica de altura -------------------------- */ .route-panel--embedded, .weather-panel--embedded { max-height: calc(100svh - 100px); max-height: calc(100dvh - 100px); } /* 4. Botones ctrl-btn: más grandes para dedos (38 × 38 px) -------------- */ .ctrl-btn { width: 38px; height: 38px; font-size: 1rem; } /* 5. Barra de coordenadas: tamaño reducido, respeta home indicator ------ */ .coords-bar { font-size: 0.60rem; padding: 4px 10px; letter-spacing: 0.04em; max-width: calc(100vw - 120px); bottom: calc(20px + var(--safe-bottom)); overflow: hidden; text-overflow: ellipsis; } /* 6. Panel de elevación: sube sobre la coords-bar ----------------------- */ .elevation-panel { bottom: calc(56px + var(--safe-bottom)); width: calc(100vw - 16px); } /* 7. Estado de carga de rutas (esquina superior derecha) --------------- */ .route-layer-ui { right: calc(8px + var(--safe-right)); } /* 8. Formulario de subida: área de texto más alta en móvil -------------- */ .upload-textarea { min-height: 60px; } /* 9. Scroll táctil nativo en contenedores con overflow ------------------ */ .route-panel__body, .weather-tab-pane { -webkit-overflow-scrolling: touch; scrollbar-width: none; } } /* ── Tablet portrait — 576 px a 767 px ── */ @media (min-width: 576px) and (max-width: 767px) { /* Panel lateral: un poco más ancho que en móvil pero menos que desktop */ .ctrl-panel-wrap { width: 300px; max-height: calc(100dvh - 100px); max-height: calc(100svh - 100px); } .route-panel--embedded, .weather-panel--embedded { max-height: calc(100dvh - 100px); max-height: calc(100svh - 100px); } /* Barra de control: pequeño margen extra de safe-area */ .ctrl-bar { top: calc(80px + var(--safe-top)); } .ctrl-panel-wrap { top: calc(80px + var(--safe-top)); } .coords-bar { bottom: calc(28px + var(--safe-bottom)); font-size: 0.67rem; } .elevation-panel { bottom: calc(48px + var(--safe-bottom)); } } /* ── Desktop: garantizar que los paneles no corten con URL bars en ── */ /* browsers como Chrome que reportan 100vh incluyendo la chrome. */ @media (min-width: 768px) { .ctrl-panel-wrap, .route-panel--embedded, .weather-panel--embedded { max-height: calc(100vh - 100px); } } /* ── Meteorología: apila columnas en móvil y tablet (< 768 px) ── */ @media (max-width: 767px) { /* En pantalla estrecha el panel de clima ocupa el mismo ancho que el resto */ .ctrl-panel-wrap--weather { width: calc(100vw - 64px); } /* Cambiar el body a columna única */ .weather-panel--embedded .weather-panel__body { flex-direction: column; } /* El borde separador pasa de vertical a horizontal */ .weather-panel--embedded .weather-panel__scroll { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex: none; max-width: none; width: 100%; } /* La columna de mapas ocupa el ancho completo */ .weather-panel--embedded .weather-panel__maps-col { flex: none; width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════ PORTRAIT MODE — Layout adaptado para orientación vertical ────────────────────────────────────────────────────────────────────────── En portrait la pantalla es alta y estrecha. La ctrl-bar pasa a ser una fila horizontal fija en la parte inferior (patrón bottom-nav de mapas móviles). Los paneles abren como bottom-sheets sobre ella, dejando el mapa visible en la zona superior. Regla: sólo se cambian posición y layout; colores, sombras e iconos se heredan íntegramente de las reglas de escritorio. ══════════════════════════════════════════════════════════════════════════ */ /* ── Teléfono portrait (≤ 575 px de ancho, orientación vertical) ──────── */ @media (max-width: 575px) and (orientation: portrait) { /* 1. ctrl-bar → fila horizontal centrada en la parte inferior ────────── */ .ctrl-bar { top: auto; bottom: calc(16px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); flex-direction: row; gap: 6px; /* Sin ancho fijo: se adapta al nº de botones (usuario anónimo vs admin) */ } /* 2. ctrl-panel-wrap → bottom-sheet sobre la barra de botones ─────────── */ .ctrl-panel-wrap { top: auto; bottom: calc(70px + var(--safe-bottom)); /* altura ctrl-bar ~48 + gap */ left: 50%; transform: translateX(-50%); width: calc(100vw - 16px); /* 130 px = ctrl-bar + margen inferior + espacio para ver el mapa */ max-height: calc(var(--app-height, 100svh) - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; } /* Panel de meteo: mismo ancho que el resto en portrait ─────────────── */ .ctrl-panel-wrap--weather { width: calc(100vw - 16px); } /* 3. Paneles embedded: el padre (ctrl-panel-wrap) gestiona el scroll ─── */ /* Eliminar max-height propio para que no aparezca scroll anidado. */ .route-panel--embedded, .weather-panel--embedded { max-height: none; overflow-y: visible; } /* 4. Transición del panel: desliza hacia arriba en lugar de a la derecha */ .ctrl-slide-enter-from, .ctrl-slide-leave-to { opacity: 0; transform: translateY(12px); } /* 5. Coords-bar → parte superior (la inferior la ocupa la ctrl-bar) ──── */ .coords-bar { bottom: auto; top: calc(10px + var(--safe-top)); font-size: 0.60rem; padding: 4px 10px; max-width: calc(100vw - 24px); /* Centrar respecto al viewport (hereda transform: translateX(-50%)) */ } /* 6. Panel de elevación: encima de la ctrl-bar ──────────────────────── */ .elevation-panel { bottom: calc(74px + var(--safe-bottom)); width: calc(100vw - 16px); } /* 7. Route-layer-ui: esquina superior derecha sin solapar la coords-bar */ .route-layer-ui { top: calc(10px + var(--safe-top)); right: calc(8px + var(--safe-right)); } /* 8. Zoom control de Leaflet: no queda tapado por la ctrl-bar inferior */ /* Se sube al margen superior junto al zoom nativo de Leaflet. */ .leaflet-bottom.leaflet-left { bottom: calc(74px + var(--safe-bottom)); } } /* ── Tablet portrait (576 px – 1024 px de ancho, orientación vertical) ── */ @media (min-width: 576px) and (max-width: 1024px) and (orientation: portrait) { /* Panel lateral: acotado para dejar mapa visible en portrait tablet ─── */ .ctrl-panel-wrap { max-height: calc(var(--app-height, 100dvh) - 120px); max-height: calc(100dvh - 120px); } /* Paneles embedded: heredan el límite del padre ────────────────────── */ .route-panel--embedded, .weather-panel--embedded { max-height: calc(100dvh - 120px); } /* Panel de meteo en portrait tablet: ancho razonable (no 620 px) ───── */ .ctrl-panel-wrap--weather { width: min(360px, calc(100vw - 64px)); } /* Meteo: columna única (el ancho no da para dos columnas en portrait) ── */ .weather-panel--embedded .weather-panel__body { flex-direction: column; } .weather-panel--embedded .weather-panel__scroll { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex: none; max-width: none; width: 100%; } .weather-panel--embedded .weather-panel__maps-col { flex: none; width: 100%; } /* coords-bar: algo más arriba del indicador home del tablet ──────────── */ .coords-bar { bottom: calc(32px + var(--safe-bottom)); } /* elevation-panel: sube para no solapar coords-bar ────────────────── */ .elevation-panel { bottom: calc(58px + var(--safe-bottom)); } }