:root { /* MODO CLARO (Default) */ --bg-page: #f5f5f7; --bg-card: #ffffff; --text-main: #1d1d1f; --text-muted: #86868b; --border: rgba(0,0,0,0.08); --pc-blue: #0f2645; --brand-blue: #0066cc; --row-offline: #f5f5f4; --text-offline: #a8a29e; --buffer-px: 60px; --pc-blue-light: #1e3a8a; --pc-wine: #800020; --pc-copper: #b87333; --pc-green-dark: #065f46; --title-unique: #0f2645; } /* MODO OSCURO PREMIUM (APPLE STYLE) */ body.dark-mode { --bg-page: #000000; --bg-card: rgba(28, 28, 30, 0.65); --text-main: #f5f5f7; --text-muted: #a1a1aa; --border: rgba(255,255,255,0.08); --pc-blue: #0a84ff; --brand-blue: #0a84ff; --row-offline: rgba(44, 44, 46, 0.4); --text-offline: #636366; --title-unique: #ffffff; } /* Efecto luz interior Apple para tarjetas en modo oscuro */ body.dark-mode .card { box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); } body.dark-mode .m-box { box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-page); margin: 0; color: var(--text-main); transition: background-color 0.3s, color 0.3s; } /* --- ENCABEZADO CENTRADO (ATMOSFÉRICO DEGRADADO & GLASS) --- */ .top-header { background: linear-gradient(90deg, rgba(11, 27, 50, 0.85) 0%, rgba(23, 50, 99, 0.85) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.3); color: white; padding: 0 40px; display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 9999; height: 80px; } .header-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; width: max-content; } .header-center img { height: 65px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); } .header-titles { display: flex; flex-direction: column; text-align: left; gap: 2px; } .head-title-1 { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 2.5px; text-transform: uppercase; margin: 0; } .head-title-2 { font-size: 22px; font-weight: 900; color: #ffffff; letter-spacing: -0.5px; text-transform: uppercase; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.4); line-height: 1.1; } .head-title-3 { font-size: 10px; font-weight: 800; color: #f1f5f9; letter-spacing: 1px; text-transform: uppercase; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); padding: 3px 10px 3px 8px; border-radius: 6px; width: max-content; margin-top: 3px; display: flex; align-items: center; gap: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .pc-drop-icon { width: 11px; height: 11px; color: #38bdf8; filter: drop-shadow(0 0 3px #38bdf8); } /* --- MENÚ DESPLEGABLE PREMIUM --- */ .menu-container { position: absolute; right: 40px; display: flex; gap: 10px;} .mac-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: white; padding: 10px 24px; font-weight: 700; font-size: 11px; cursor: pointer; transition: all 0.2s ease; border-radius: 50px; /* Píldora perfecta estilo Apple */ box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Ligera sombra flotante */ text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Inter', sans-serif; outline: none !important; -webkit-tap-highlight-color: transparent; } .mac-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } .dropdown-content { display: none; position: absolute; right: 0; top: 100%; margin-top: 10px; min-width: 250px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; box-shadow: 0 15px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.2) inset; padding: 8px; z-index: 10000; } .dropdown-content.show { display: block; animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes popIn { 0% { opacity: 0; transform: scale(0.95) translateY(-10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .dropdown-content a { color: #1d1d1f; padding: 10px 14px; text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 13px; border-radius: 10px; margin-bottom: 2px; text-transform: none; outline: none !important; letter-spacing: -0.2px; transition: all 0.1s; cursor: pointer; } .dropdown-content a:hover { background-color: #0071e3; color: white; } /* MAGIA: Elimina la línea azul en toda la página táctil */ * { -webkit-tap-highlight-color: transparent !important; outline: none !important; } .menu-icon-sf { width: 16px; height: 16px; color: currentColor; opacity: 0.8; } .menu-separator { height: 1px; background: rgba(0,0,0,0.08); margin: 6px 0; } /* --- MENÚ MODO OSCURO --- */ body.dark-mode .dropdown-content { background: rgba(28, 28, 30, 0.75); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } body.dark-mode .dropdown-content a { color: #f5f5f7; } body.dark-mode .menu-separator { background: rgba(255,255,255,0.08); } /* --- MÉTRICAS PREMIUM --- */ .metrics-row { padding: 30px 40px 20px 40px; display: grid; grid-template-columns: 0.8fr 1fr 1fr 1.3fr 1fr; gap: 20px; } .m-box { position: relative; /* MAGIA: Evita que el badge se salga de la tarjeta */ background-color: var(--bg-card); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); padding: 25px 20px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); border-top: 3px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease; } .m-box:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } .m-title { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 6px;} .m-val { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; color: var(--text-main); display: flex; align-items: baseline; gap: 6px;} .m-unit { font-size: 14px; font-weight: 700; color: #86868b; letter-spacing: 0;} .m-station { font-size: 11px; font-weight: 700; color: #86868b; margin-top: 8px; text-transform: uppercase;} .sync-dot-premium { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; animation: pulseGlow 2s infinite; } .dot-static { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; opacity: 0.8; } @keyframes pulseGlow { 0% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.6; } } #net-error-badge { display: none; position: absolute; top: -12px; right: -8px; background: #ef4444; color: white; font-size: 9px; font-weight: 900; padding: 5px 12px; border-radius: 20px; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5); animation: pulseAlertGlow 1.5s infinite; letter-spacing: 0.5px; white-space: nowrap !important; border: 2px solid var(--bg-card); z-index: 10; } @keyframes pulseAlertGlow { 0% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 45px rgba(239, 68, 68, 0.8); border-color: rgba(239, 68, 68, 1); } 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); } } .pulse-alert { animation: pulseAlertGlow 1.5s infinite !important; } .main-container { padding: 0 40px 30px 40px; } .card{background:var(--bg-card);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:24px;padding:35px;box-shadow:0 20px 40px rgba(0,0,0,.3);border:1px solid var(--border);margin-bottom:30px;transition:all .4s cubic-bezier(.25,.8,.25,1)} .panel-title, .chart-title-dyn, #tabla-seccion .panel-title { font-family: 'Inter', sans-serif !important; font-size: 20px !important; font-weight: 800 !important; color: var(--title-unique) !important; margin-bottom: 4px !important; text-transform: uppercase !important; text-align: center !important; letter-spacing: 1.5px !important; } .instruction-text { text-align: center; font-size: 11px; font-weight: 500; color: #94a3b8; margin-bottom: 20px; display: block; letter-spacing: 0.5px; } .chart-subtitle-dyn { font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; color: #86868b !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-align: center !important; margin-bottom: 25px !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; } .mid-layout { display: grid; grid-template-columns: 440px 1fr; gap: 30px; margin-bottom: 25px; align-items: stretch;} .smart-panel { display: flex; flex-direction: column; gap: 20px; position: relative; border-left: 6px solid transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; box-sizing: border-box;} .sp-header { display: flex; flex-direction: column; align-items: center; background: rgba(128, 128, 128, 0.05); padding: 20px; border-radius: 30px; border: 1px solid var(--border); margin: 0 10px 20px 10px; backdrop-filter: blur(10px); } body.dark-mode .sp-header { background: rgba(255, 255, 255, 0.03); border-color: rgba(255,255,255,0.1); } .sp-info-group { display: flex; flex-direction: column; align-items: center; gap: 2px; } .sp-station-name { font-size: 20px; font-weight: 700; color: var(--pc-blue); letter-spacing: -0.5px; margin: 0; text-align: center; border: none; background: transparent; padding: 0; box-shadow: none;} body.dark-mode .sp-station-name { color: #f1f5f9; } .sp-conexion-text { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.2px; } #sp-fecha-val, #sp-hora-val { font-weight: 700; color: var(--text-main); } .sp-status { font-size: 9px; font-weight: 800; padding: 5px 14px; border-radius: 20px; margin-top: 8px; letter-spacing: 1px; color: #10b981; background: rgba(16, 185, 129, 0.15); border: none;} .sp-status.offline { color: #ef4444; background: rgba(239, 68, 68, 0.15); } .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0 10px;} .sp-stat { background: #f5f5f7; padding: 18px 10px; border-radius: 18px; border: none; text-align: center; transition: background-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sp-stat:hover { box-shadow: 0 0 15px rgba(0, 102, 204, 0.15); } body.dark-mode .sp-stat { background: #1c1c1e; } .sp-lbl { font-size: 9px; font-weight: 800; color: #86868b; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 4px;} .sp-val { font-size: 22px; font-weight: 900; color: var(--text-main); transition: color 0.3s; letter-spacing: -0.5px;} .sp-chart-title { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #86868b; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 35px; margin-bottom: 12px; margin-left: 10px; display: flex; align-items: center; } .sp-chart-title::before { content: ""; display: inline-block; width: 3px; height: 14px; background: #0a84ff; border-radius: 4px; margin-right: 10px; } body.dark-mode .sp-chart-title { color: #a1a1aa; } .sp-chart-box { height: 160px; width: 100%; position: relative; margin-top: 5px !important; padding-bottom: 5px; } .sp-chart-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .sp-chart-inner { min-width: 100%; height: 160px; position: relative; padding-bottom: 5px; } /* --- MAPA --- */ .map-wrapper { position: relative; height: 100%; min-height: auto; padding: 0; overflow: hidden; border-radius: 16px;} #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background-color: var(--bg-page); transition: background-color 0.3s;} /* --- MAGIA CSS: FILTRO DE SUAVIZADO EXTREMO PARA SATELITE --- */ .blur-ir { filter: blur(7.5px) contrast(1.5) saturate(1.2); transform: scale(1.05); } .blur-vis { filter: blur(5px) contrast(1.5); transform: scale(1.05); } /* ======================================================== ESTILO APPLE PARA TODOS LOS CONTROLES Y ZOOM DEL MAPA ======================================================== */ #map-online-badge { position: absolute; top: 15px; left: 55px; z-index: 400; background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 8px 14px; border-radius: 20px; font-size: 12px; font-weight: 900; color: #10b981; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important; display: flex; align-items: center; gap: 6px; transition: all 0.3s; } body.dark-mode #map-online-badge { background: rgba(28, 28, 30, 0.65) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; } .map-controls-br { position: absolute; top: 75px; right: 15px; z-index: 400; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: all 0.3s; } /* Botones "FIJAR MAPA" y "CENTRAR XALAPA" */ .map-btn { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 10px 16px; border-radius: 14px; font-weight: 800; font-size: 10px; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important; color: var(--text-main); text-transform: uppercase; transition: all 0.3s; letter-spacing: 0.5px; } body.dark-mode .map-btn { background: rgba(28, 28, 30, 0.65) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .map-btn:hover { color: var(--brand-blue); transform: translateX(-3px); } .leaflet-custom-layer-ctrl { position: absolute; top: 15px; right: 15px; z-index: 9999; } /* Botón de Capas (Icono Cuadrados) */ .layer-toggle-btn { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; width: 44px; height: 44px; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important; display: flex; justify-content: center; align-items: center; transition: 0.2s; } body.dark-mode .layer-toggle-btn { background: rgba(28, 28, 30, 0.65) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .layer-toggle-btn svg { width: 24px; height: 24px; fill: var(--text-main); } /* Panel Desplegable de Capas (Copia del menú principal SIN difuminar) */ .custom-layer-panel { display: none; position: absolute; top: 0; right: 50px; background: rgba(255, 255, 255, 0.8) !important; /* Copia del dropdown-content */ backdrop-filter: none !important; /* 🔥 Cero difuminado, fondo nítido */ -webkit-backdrop-filter: none !important; border: 1px solid rgba(0,0,0,0.1) !important; /* Copia del dropdown-content */ padding: 25px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.2) inset !important; /* Copia del dropdown-content */ width: 180px; z-index: 9999 !important; } body.dark-mode .custom-layer-panel { background: rgba(28, 28, 30, 0.75) !important; /* Copia del dropdown-content oscuro */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .custom-layer-panel.active { display: block !important; animation: fadeIn 0.2s ease-out; } /* 🚀 TRANSICIÓN SUAVE (CROSSFADE) PARA LOS MAPAS */ .leaflet-layer, .leaflet-image-layer { transition: opacity 0.5s ease-in-out !important; } /* --- BOTONES DEL ZOOM LEAFLET (+ y -) --- */ .leaflet-bar { border: none !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important; border-radius: 14px !important; overflow: hidden; background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.dark-mode .leaflet-bar { background: rgba(28, 28, 30, 0.65) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; } .leaflet-control-zoom-in, .leaflet-control-zoom-out { background: transparent !important; color: var(--text-main) !important; font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Helvetica, sans-serif !important; font-weight: 500 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; transition: background-color 0.2s ease !important; } body.dark-mode .leaflet-control-zoom-in, body.dark-mode .leaflet-control-zoom-out { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .leaflet-control-zoom-out { border-bottom: none !important; } .leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover { background: rgba(128, 128, 128, 0.1) !important; } .lyr-title { font-size: 11px; font-weight: 900; color: var(--pc-blue); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); padding-bottom: 8px;} .lyr-option { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer;} input[type="radio"], input[type="checkbox"] { accent-color: var(--brand-blue); cursor: pointer; width: 16px; height: 16px;} input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; margin: 15px 0 5px 0; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--brand-blue); cursor: pointer; margin-top: -7px; box-shadow: 0 2px 6px rgba(0,0,0,0.3);} input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #cbd5e1; border-radius: 2px; } .station-marker { position: relative; width: 0; height: 0; pointer-events: visible; transition: opacity 0.3s; } .buffer-container { position: absolute; width: calc(var(--buffer-px) * 2); height: calc(var(--buffer-px) * 2); left: calc(var(--buffer-px) * -1); top: calc(var(--buffer-px) * -1); border-radius: 50%; overflow: hidden; z-index: 1; pointer-events: none; border: none; transition: border-color 0.3s;} .rain-svg { width: 100%; height: 200%; animation: rainFall linear infinite; } .center-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; z-index: 3; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; pointer-events: auto; transition: transform 0.2s;} .center-dot:hover { transform: scale(1.3); } .pulse-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; z-index: 2; animation: pulse 2s infinite ease-out; pointer-events: none; } .station-label { position: absolute; left: 50%; transform: translateX(-50%); top: 18px; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; z-index: 99999 !important; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.2s; color: #0f172a; font-family: 'Inter', sans-serif !important;} .station-label .st-name { color: #0f172a; display: block; font-weight: 800;} body.dark-mode .station-label { background: #1e293b !important; color: white !important; border-color: #334155; } body.dark-mode .st-name { color: #f1f5f9 !important; } @keyframes rainFall { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes pulse { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } .btn-sim { font-family: 'Inter', sans-serif !important; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; width: 100%; border-radius: 14px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; transition: all 0.2s ease; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.02); } body.dark-mode .btn-sim { background: rgba(28, 28, 30, 0.6); } .btn-pause { color: #d97706; } .btn-pause:hover { border-color: #d97706; background: rgba(217, 119, 6, 0.05); } .btn-play { color: #10b981; } .btn-play:hover { border-color: #10b981; background: rgba(16, 185, 129, 0.05); } .btn-reset { color: var(--brand-blue); } .btn-reset:hover { border-color: var(--brand-blue); background: rgba(0, 102, 204, 0.05); } #grafica-seccion { background: var(--bg-card) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); border-radius: 24px; padding: 30px; box-shadow: 0 12px 40px rgba(0,0,0,0.03); } body.dark-mode #grafica-seccion { border-color: rgba(255,255,255,0.08); } .chart-container { position: relative; height: 550px; width: 100%; } .chart-scroll-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .chart-inner { width: 100%; height: 100%; min-width: 1200px; padding-bottom: 10px; } .custom-x-axis { text-align: center; margin-top: 25px; font-family: 'Inter', sans-serif !important; } .custom-x-axis .x-bold { font-size: 14px !important; font-weight: 800 !important; color: var(--title-unique) !important; letter-spacing: 1px !important; text-transform: uppercase; display: inline-block; margin: 0 4px; } .custom-x-axis .x-sep { font-size: 14px; color: #cbd5e1; margin: 0 4px; font-weight: 300; display: inline-block; } .custom-x-axis .x-light { font-size: 14px !important; font-weight: 400 !important; color: var(--title-unique) !important; opacity: 0.85; text-transform: uppercase; display: inline-block; margin: 0 4px; } table { width: 100%; border-collapse: collapse; table-layout: fixed; } th { padding: 20px 10px; font-family: 'Inter', sans-serif; font-size: 11px; color: #86868b; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; border-bottom: 1px solid rgba(0,0,0,0.05); } th:nth-child(1) { text-align: left; width: 22%; } th:nth-child(2) { text-align: left; width: 13%; } th:nth-child(3) { text-align: center; width: 14%; } th:nth-child(4) { text-align: center; width: 15%; } th:nth-child(5) { text-align: center; width: 13%; } th:nth-child(6) { text-align: center; width: 11%; } th:nth-child(7) { text-align: right; width: 12%; } td { padding: 16px 10px; font-size: 14px; color: var(--text-main); border-bottom: 1px solid rgba(0,0,0,0.03); } tbody tr:nth-child(even):not(.row-fueradelinea):not(.row-desconectada) { background-color: rgba(0,0,0,0.01); } tbody tr:nth-child(odd):not(.row-fueradelinea):not(.row-desconectada) { background-color: rgba(0,0,0,0.03); } tr:hover td { background-color: rgba(128,128,128,0.05) !important; } tr.row-fueradelinea td { background: repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0.015), rgba(0, 0, 0, 0.015) 10px, rgba(0, 0, 0, 0.035) 10px, rgba(0, 0, 0, 0.035) 20px ) !important; opacity: 0.6; transition: opacity 0.3s; } tr.row-fueradelinea:hover td { opacity: 0.8; } body.dark-mode tr.row-fueradelinea td { background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015) 10px, rgba(255, 255, 255, 0.035) 10px, rgba(255, 255, 255, 0.035) 20px ) !important; } tr.row-desconectada td { opacity: 0.85; background-color: rgba(225, 29, 72, 0.04) !important; } body.dark-mode tr.row-desconectada td { background-color: rgba(225, 29, 72, 0.08) !important; } .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; } .badge { padding: 6px 12px; border-radius: 12px; font-size: 10px; font-weight: 800; display: inline-block; min-width: 90px; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; } .trend-badge { font-size: 16px; font-weight: 900; } body.dark-mode td { border-bottom: 1px solid rgba(255,255,255,0.05); } body.dark-mode th { border-bottom: 1px solid rgba(255,255,255,0.1); } /* --- BOTÓN MOSTRAR MÁS ESTACIONES --- */ #btn-toggle-tabla { background: var(--bg-card); color: var(--pc-blue); border: 1px solid var(--border); padding: 12px 24px; border-radius: 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-top: 15px; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 8px; } body.dark-mode #btn-toggle-tabla { background: rgba(28, 28, 30, 0.6); color: #f1f5f9; } #btn-toggle-tabla:hover { border-color: var(--brand-blue); transform: translateY(-2px); } /* Ocultar filas 7 en adelante (COMPUTADORA Y TABLET HORIZONTAL - 6 filas) */ @media (min-width: 768px) and (orientation: landscape) { #tabla-seccion table:not(.expanded) tbody tr:nth-child(n+7) { display: none !important; } } /* Ocultar filas 5 en adelante (CELULAR Y TABLET VERTICAL - 4 filas) */ @media (max-width: 1400px) and (orientation: portrait), (max-width: 767px) { #tabla-seccion table:not(.expanded) tbody tr:nth-child(n+5) { display: none !important; } } /* --- CONTENEDOR DE MAPAS DOBLES --- */ .mapas-dobles-container { display: grid; gap: 30px; margin-bottom: 30px; } @media (min-width: 1001px) { .mapas-dobles-container { grid-template-columns: 1fr 1fr; align-items: stretch; /* <-- MAGIA: Obliga a ambas tarjetas a medir exactamente lo mismo */ } /* NUEVO: AJUSTE DE TÍTULOS A UN SOLO RENGLÓN PARA PC */ .mapas-dobles-container .chart-title-dyn { font-size: 18px !important; /* Letra ligeramente más pequeña */ letter-spacing: 0.5px !important; /* Menos espacio entre letras para ahorrar espacio */ white-space: nowrap !important; /* Obliga a que el texto no baje al segundo renglón */ overflow: hidden !important; text-overflow: ellipsis !important; /* Si la pantalla es muy justa, pondrá "..." al final en lugar de romper el diseño */ } } @media (max-width: 1000px) { .mapas-dobles-container { grid-template-columns: 1fr; gap: 12px; margin-bottom: 10px; } } /* 1. PRIMERO EL FOOTER GENERAL (PARA PC) */ .footer { text-align: center; margin: 40px 0 30px 0; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 15px; font-family: 'Inter', sans-serif !important; } .footer-legend { font-size: 8.5px !important; font-weight: 600 !important; color: #86868b !important; text-transform: uppercase !important; letter-spacing: 1.8px !important; display: flex; align-items: center; justify-content: center; } .footer-credits { font-size: 10px !important; font-weight: 500 !important; color: #94a3b8 !important; letter-spacing: 1px; text-transform: uppercase; } .footer-credits b { font-weight: 800 !important; color: var(--pc-blue) !important; margin-left: 5px; } /* 2. DESPUÉS LA VERSIÓN MÓVIL (SOBREESCRIBE LO ANTERIOR EN CELULARES) */ /* --- FOOTER PREMIUM MÓVIL --- */ @media (max-width: 1024px) { .footer { background: transparent; border-radius: 0; padding: 20px 10px; margin: 20px 0; box-shadow: none; border: none; border-top: 1px solid var(--border); } .footer-legend { flex-direction: row; gap: 0; width: auto; border-bottom: none; padding-bottom: 0; font-size: 7.5px !important; } .footer-legend span { display: inline; margin: 0 8px; } .footer-credits { font-size: 9px !important; margin-top: 12px; width: 100%; } } /* --- BOTÓN FLOTANTE VOLVER ARRIBA --- */ #btn-subir { position: fixed; bottom: 30px; right: 30px; z-index: 999999; background: var(--brand-blue); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } #btn-subir.show { opacity: 1; pointer-events: auto; transform: translateY(0); } #btn-subir:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.4); } @media (max-width: 1024px) { #btn-subir { bottom: 20px; right: 20px; width: 45px; height: 45px; } } /* FILTRO MÁGICO PARA CALLES: Borde oscuro para que se lean sobre nubes blancas */ .white-labels img { filter: invert(100%) grayscale(100%) brightness(250%) contrast(200%) drop-shadow(0px 0px 2px rgba(0,0,0,1)) drop-shadow(0px 0px 4px rgba(0,0,0,1)); } @media (max-width: 1024px) { /* SE ELIMINÓ LA REGLA QUE MATABA EL "TRANSPARENTOSO" */ .top-header { flex-direction: column; height: auto; padding: 15px; position: relative; transform: translateZ(0); -webkit-transform: translateZ(0); background: linear-gradient(90deg, rgb(11, 27, 50) 0%, rgb(23, 50, 99) 100%) !important; } /* ASIGNAMOS UN AZUL MÁS PROFUNDO (Y NO NEGRO) PARA EL MODO OSCURO */ body.dark-mode .top-header { background: linear-gradient(90deg, rgb(6, 14, 25) 0%, rgb(12, 25, 48) 100%) !important; } .header-center { position: relative; left: auto; transform: none; flex-direction: column; text-align: center; gap: 10px; width: 100%; } .menu-container { position: relative; right: auto; margin-top: 10px; display: flex; justify-content: center; width: 100%; } /* MENÚ TRANSPARENTOSO MODO CLARO */ .dropdown-content { right: auto !important; left: 50% !important; transform: translateX(-50%) translateZ(0) !important; top: 100%; z-index: 9999; transform-origin: top center; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; will-change: transform, opacity; transition: none !important; } .dropdown-content a { color: #1d1d1f !important; text-shadow: none !important; } /* MENÚ TRANSPARENTOSO MODO OSCURO */ body.dark-mode .dropdown-content { background: rgba(20, 20, 24, 0.55) !important; border-color: rgba(255,255,255,0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.dark-mode .dropdown-content a { color: #f5f5f7 !important; text-shadow: none !important; } .dropdown-content.show { display: block !important; animation: popIn 0.2s ease-out forwards; } .head-title-1 { font-size: 18px; line-height: 1.2; text-align: center; margin-bottom: 4px; } .head-title-2 { font-size: 13px; text-align: center; margin-bottom: 2px;} .head-title-3 { font-size: 10px; text-align: center; } /* 🚀 FIX: Las tarjetas se hacen más anchas si la pantalla es de Tablet */ .metrics-row { display: flex; flex-wrap: wrap; padding: 15px; gap: 10px; } .m-box { padding: 15px 10px; box-sizing: border-box; flex: 1 1 45%; } .m-box:nth-child(1) { order: 1; } .m-box:nth-child(2) { order: 2; } .m-box:nth-child(3) { order: 3; } .m-box:nth-child(5) { order: 4; } .m-box:nth-child(4) { order: 5; flex: 1 1 100%; } .m-val { font-size: 20px; } #estado-txt { white-space: normal !important; line-height: 1.2; font-size: 15px !important; } .mid-layout { display: flex; flex-direction: column; gap: 15px;} .smart-panel { width: 100%; height: auto; border-left: none; border-top: 6px solid transparent; padding: 15px;} .sp-station-name { font-size: 20px; } .sp-stat { padding: 10px; } .sp-val { font-size: 16px; } .sp-chart-box { height: 120px; margin-top: 5px;} .main-container { padding: 0 15px 15px 15px; } .chart-scroll-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;} .chart-inner { width: 900px; height: 300px; position: relative; padding-bottom: 15px;} #tabla-seccion table thead { display: none; } #tabla-seccion table, #tabla-seccion tbody { display: block; width: 100%; } #tabla-seccion tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05); padding: 15px; position: relative; opacity: 1 !important; } #tabla-seccion tr.row-fueradelinea td { opacity: 0.5 !important; } #tabla-seccion tr.row-desconectada td { opacity: 0.8 !important; } #tabla-seccion td { display: flex; flex-direction: column; text-align: left !important; padding: 0; border: none; } #tabla-seccion td:nth-child(1) { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; font-weight: 900; font-size: 16px; color: var(--pc-blue); border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 4px; padding-right: 120px; } #tabla-seccion td:nth-child(2) { position: absolute; top: 15px; right: 15px; font-size: 11px; } #tabla-seccion td:nth-child(2)::before { display: none !important; } #tabla-seccion td:nth-child(4), #tabla-seccion td:nth-child(6), #tabla-seccion td:nth-child(7) { align-items: flex-end; text-align: right !important; } #tabla-seccion td::before { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } #tabla-seccion td:nth-child(1)::before { display: none; } #tabla-seccion td:nth-child(3)::before { content: "Acumulado"; } #tabla-seccion td:nth-child(4)::before { content: "Tasa (mm/h)"; } #tabla-seccion td:nth-child(5)::before { content: "Clasificación"; } #tabla-seccion td:nth-child(6)::before { content: "Tendencia"; text-align: right;} #tabla-seccion td:nth-child(7)::before { content: "Última Conexión"; text-align: right;} } /* --- SOLUCIÓN CLICS MAPA CELULAR (Olmo y Castillo) --- */ /* ======================================================================= MODO MÓVIL Y TABLET EN VERTICAL (Toda la pantalla cambia a 1 columna) ======================================================================= */ @media (max-width: 1400px) and (orientation: portrait), (max-width: 767px) { .map-wrapper { height: auto !important; display: flex !important; flex-direction: column !important; padding: 0 !important; } #map { position: relative !important; height: 420px !important; /* Se amplía para que Olmo y Castillo no queden tapadas por el simulador */ width: 100% !important; order: 1; /* El mapa va arriba */ border-radius: 20px 20px 0 0 !important; z-index: 1; } .sim-map-hud { position: relative !important; height: auto !important; order: 2; /* El simulador va abajo del mapa */ border-radius: 0 0 20px 20px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; border-top: none !important; z-index: 500; } } .chart-scroll-wrapper::-webkit-scrollbar, .sp-chart-scroll::-webkit-scrollbar { height: 8px; } .chart-scroll-wrapper::-webkit-scrollbar-track, .sp-chart-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); border-radius: 10px; margin: 0 15px; } .chart-scroll-wrapper::-webkit-scrollbar-thumb, .sp-chart-scroll::-webkit-scrollbar-thumb { background: rgba(134, 134, 139, 0.4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .chart-scroll-wrapper::-webkit-scrollbar-thumb:hover, .sp-chart-scroll::-webkit-scrollbar-thumb:hover { background: rgba(134, 134, 139, 0.7); border: 2px solid transparent; background-clip: padding-box; } body.dark-mode .chart-scroll-wrapper::-webkit-scrollbar-track, body.dark-mode .sp-chart-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } body.dark-mode .chart-scroll-wrapper::-webkit-scrollbar-thumb, body.dark-mode .sp-chart-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border: 2px solid transparent; background-clip: padding-box; } .sp-chart-box { position: relative; padding-bottom: 5px; } .static-x-axis { text-align: center; font-size: 10px; font-weight: bold; color: #86868b; font-family: 'Inter', sans-serif; margin-top: 5px; text-transform: none; } .scroll-arrow-left, .scroll-arrow-right { position: absolute; bottom: 1px; font-size: 22px; font-weight: 900; color: var(--pc-blue); opacity: 0.5; z-index: 999; transition: opacity 0.3s; pointer-events: auto; cursor: pointer; } body.dark-mode .scroll-arrow-left, body.dark-mode .scroll-arrow-right { color: white; } .scroll-arrow-left { left: 0px; } .scroll-arrow-right { right: 0px; } .sp-chart-box:hover .scroll-arrow-left, .sp-chart-box:hover .scroll-arrow-right { opacity: 0.8; } .sp-chart-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 5px; padding: 0 15px; box-sizing: border-box; } .sp-chart-scroll::-webkit-scrollbar { height: 4px; } .sp-chart-scroll::-webkit-scrollbar-track { background: transparent; } .sp-chart-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.2); border-radius: 10px; } .sp-chart-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); } body.dark-mode .sp-chart-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } /* 🚀 FIX: padding-right evita que el último píxel del número redondo (0, 8) sea decapitado */ .text-gradient-blue { background: linear-gradient(135deg, #0a84ff 0%, #32ade6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-right: 4px; } .text-gradient-copper { background: linear-gradient(135deg, #b87333 0%, #d4955b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-right: 4px; } .skeleton { background: linear-gradient(90deg, rgba(134,134,139,0.1) 25%, rgba(134,134,139,0.3) 50%, rgba(134,134,139,0.1) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; color: transparent !important; border-radius: 8px; display: inline-block; min-width: 60px; min-height: 24px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- SIMULADOR INTEGRADO AL MAPA (BARRA INFERIOR COMPLETA - ESTILO HUD PRO) --- */ .sim-map-hud { position: absolute; bottom: 0; left: 0; right: 0; z-index: 500; width: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 0 0 16px 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -10px 30px rgba(0,0,0,0.1); padding: 15px 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; transition: all 0.3s ease; box-sizing: border-box; flex-wrap: wrap; } body.dark-mode .sim-map-hud { background: rgba(28, 28, 30, 0.75); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -10px 30px rgba(0,0,0,0.4); } .sim-hud-title { font-size: 11px; font-weight: 900; color: var(--pc-blue); letter-spacing: 1.5px; text-transform: uppercase; border-right: 1px solid var(--border); padding-right: 20px; display: flex; align-items: center; gap: 8px; white-space: nowrap; } body.dark-mode .sim-hud-title { color: #f1f5f9; } .sim-map-hud select, .sim-map-hud .btn-sim { font-size: 10px !important; padding: 10px 15px !important; border-radius: 12px !important; } .sim-hud-val-box { display: flex; align-items: center; flex: 1; gap: 20px; padding: 0 10px; } @media (max-width: 1250px) { .sim-map-hud { flex-direction: column; align-items: stretch; padding: 15px; gap: 15px; border-radius: 0 0 16px 16px; } .sim-hud-title { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 10px; justify-content: center; } .sim-hud-val-box { padding: 0; } .map-controls-br { bottom: 180px !important; } } @keyframes pulseExtreme { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } .alerta-extrema { animation: pulseExtreme 0.05s infinite; font-weight: bold; } @keyframes pulseHigh { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } .alerta-alta { animation: pulseHigh 0.3s infinite; font-weight: bold; } @keyframes pulseWarning { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .alerta-media { animation: pulseWarning 0.7s infinite; } #mapa-seccion, #sim-seccion, #grafica-seccion, #tabla-seccion { scroll-margin-top: 100px; } html { scroll-behavior: smooth; } /* --- CUSTOM SELECT PREMIUM (HUD SIMULADOR) --- */ .custom-select-wrapper { position: relative; flex: 1; max-width: 250px; } .custom-select-btn { background: var(--bg-card); border: 1px solid var(--border); padding: 10px 15px; border-radius: 12px; font-size: 10px; font-weight: 800; color: var(--pc-blue); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.02); font-family: 'Inter', sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; } body.dark-mode .custom-select-btn { color: #f1f5f9; background: rgba(28, 28, 30, 0.6); } .custom-select-btn:hover { border-color: var(--brand-blue); } .custom-select-menu { display: none; position: absolute; bottom: 100%; left: 0; width: 100%; margin-bottom: 8px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; padding: 8px; z-index: 10000; box-shadow: 0 -10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.2) inset; max-height: 200px; /* <--- OBLIGA A SCROLL SI LA PANTALLA ES CHAPARRITA */ overflow-y: auto; } .custom-select-menu.show { display: block; animation: popUpSelect 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes popUpSelect { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .custom-select-item { padding: 10px 14px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; color: #1d1d1f; border-radius: 8px; cursor: pointer; transition: background 0.1s; text-transform: uppercase; } .custom-select-item:hover { background: #0a84ff; color: white; } .custom-select-divider { height: 1px; background: rgba(0,0,0,0.08); margin: 6px 0; } body.dark-mode .custom-select-menu { background: rgba(28, 28, 30, 0.85); border-color: rgba(255,255,255,0.08); } body.dark-mode .custom-select-item { color: #f5f5f7; } body.dark-mode .custom-select-divider { background: rgba(255,255,255,0.08); } .custom-select-menu::-webkit-scrollbar { width: 4px; } .custom-select-menu::-webkit-scrollbar-thumb { background: rgba(134, 134, 139, 0.4); border-radius: 10px; } body.dark-mode .custom-select-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } /* ========================================================= COMPRESIÓN DE PANEL PARA LAPTOPS Y MONITORES ========================================================= */ @media (min-width: 1001px) { .mid-layout { height: calc(100vh - 280px); min-height: 600px; gap: 20px; } #panel-activa { padding: 20px 25px !important; gap: 12px !important; overflow-y: auto; } #panel-activa::-webkit-scrollbar { width: 4px; } #panel-activa::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } #panel-activa .instruction-text { margin-bottom: 10px !important; } .sp-header { padding: 12px !important; margin-bottom: 10px !important; border-radius: 20px !important; } .sp-station-name { font-size: 18px !important; } .sp-stat { padding: 12px 10px !important; border-radius: 14px !important; } .sp-val { font-size: 18px !important; } .sp-grid { gap: 10px !important; } .sp-chart-title { margin-top: 20px !important; margin-bottom: 8px !important; font-size: 12px !important; } .sp-chart-box, .sp-chart-inner { height: 135px !important; } } /* --- ESTILO PARA RAYOS EN EL MAPA WEB --- */ .rayo-live-icon { font-size: 18px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0px 0px 8px rgba(250, 204, 21, 1.0)); animation: parpadeoRayo 1s infinite alternate; } @keyframes parpadeoRayo { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.8)); } } /* ======================================================================= MODO MÓVIL Y TABLET EN VERTICAL (Toda la pantalla cambia a 1 columna) ======================================================================= */ @media (max-width: 1400px) and (orientation: portrait), (max-width: 767px) { /* AJUSTE PARA MAPA Y SIMULADOR */ .top-header { padding: 15px 10px; /* Restauramos tu azul de día, pero en sólido para evitar que se atore el celular */ background: linear-gradient(90deg, rgb(11, 27, 50) 0%, rgb(23, 50, 99) 100%) !important; } body.dark-mode .top-header { background: linear-gradient(90deg, rgb(6, 14, 25) 0%, rgb(12, 25, 48) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } .head-title-1 { font-size: 10px; letter-spacing: 0.5px; } .head-title-2 { font-size: 15px; } .head-title-3 { margin: 5px auto 0 auto !important; justify-content: center !important; } .mac-btn { padding: 8px 15px; font-size: 10px; } .metrics-row { padding: 10px; gap: 8px; } .m-box { padding: 12px 8px !important; border-radius: 16px !important; } /* 🚀 FIX: Hacemos que el valor y la unidad jamás se bajen de renglón y el mm/h sea más compacto */ .m-val { font-size: 20px; white-space: nowrap; } .m-unit { font-size: 11px !important; } .m-title { font-size: 9px; letter-spacing: 0; } #estado-txt { font-size: 14px !important; } .main-container { padding: 0 10px 15px 10px; } .mid-layout { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px !important; } #mapa-seccion { order: 1; } #panel-activa { order: 2; gap: 6px !important; } .card { padding: 15px !important; margin-bottom: 15px !important; border-radius: 20px; } .panel-title, .chart-title-dyn { font-size: 14px !important; letter-spacing: 1px !important; } /* Ajuste de espacios blancos en el panel de monitoreo MÁS ESTRICTO */ .instruction-text { margin-bottom: 0 !important; line-height: 1.1; } .sp-header { padding: 4px 10px !important; margin-bottom: 4px !important; margin-top: 4px !important; border-radius: 12px !important;} .sp-station-name { font-size: 16px !important; } .sp-val { font-size: 16px !important; } .sp-stat { padding: 6px 4px !important; border-radius: 12px !important;} .sp-grid { gap: 4px !important; } /* FIX MARCO BLANCO DEL MAPA CELULAR Y ALTURA GIGANTE PARA TABLET */ #mapa-seccion.card { padding: 0 !important; overflow: hidden; } /* Magia: La altura se calcula en base a la pantalla, ideal para la Tab S9+ */ .map-wrapper { height: 65vh !important; min-height: 500px !important; max-height: 800px !important; } #map { border-radius: 20px !important; } /* SE PEGA MAS EL SIMULADOR */ .sim-map-hud { padding: 10px 12px !important; gap: 6px !important; border-radius: 0 0 20px 20px !important; } .sim-hud-val-box { width: 100%; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; margin-top: -2px !important;} .sim-hud-val-box input[type="range"] { flex: 1 1 100%; } .sim-map-hud .btn-sim { padding: 10px !important; font-size: 10px !important; } .custom-select-wrapper { width: 100%; max-width: 100%; margin-top: -4px !important;} .sim-hud-title { padding-bottom: 2px !important; border-bottom: none !important; margin-bottom: 0 !important; justify-content: center !important;} /* Menú de Capas más compacto en Celular */ .custom-layer-panel { width: 150px !important; padding: 10px !important; right: 45px !important; top: 0 !important; } .lyr-title { font-size: 9px !important; margin-top: 8px !important; margin-bottom: 4px !important; padding-bottom: 2px !important; } .lyr-option { font-size: 10px !important; margin-bottom: 4px !important; gap: 4px !important; } input[type="radio"], input[type="checkbox"] { width: 12px !important; height: 12px !important; } input[type="range"] { margin: 8px 0 2px 0 !important; } /* Ajuste gráfica celular: ENCAPSULAR HORAS (Sin Scroll) */ .sp-chart-title { margin-top: 10px !important; margin-bottom: 4px !important; } .sp-chart-box, .sp-chart-inner { height: 120px !important; min-width: 100% !important; width: 100% !important; } .sp-chart-scroll { overflow-x: hidden !important; } /* Ajuste gráfica celular: ENCAPSULAR HORAS (Sin Scroll) */ .sp-chart-title { margin-top: 10px !important; margin-bottom: 4px !important; } #dyn-date-int, #dyn-date-acum { font-size: 7.5px !important; padding: 2px 6px !important; letter-spacing: 0.5px !important; border-radius: 8px !important; } .sp-chart-box, .sp-chart-inner { height: 120px !important; min-width: 100% !important; width: 100% !important; } .chart-scroll-wrapper { padding-bottom: 15px !important; } .chart-container { height: 320px !important; } .chart-inner { height: 320px !important; min-width: 800px !important; padding-bottom: 0px !important; margin-bottom: 15px !important; } /* Letra más pequeña en mapa móvil y badges ajustados */ #map-online-badge { top: 10px !important; left: 10px !important; padding: 4px 8px !important; font-size: 9px !important; } .leaflet-custom-layer-ctrl { top: 10px !important; right: 10px !important; } /* AQUÍ ESTÁ LA CORRECCIÓN DEL HUECO Y TAMAÑOS: */ .layer-toggle-btn { width: 36px !important; height: 36px !important; } .map-controls-br { top: 58px !important; right: 10px !important; gap: 6px !important; } .map-btn { padding: 6px 10px !important; font-size: 8px !important; } /* REDONDEADAS COMO PASTILLA CIRCULAR */ .station-label { padding: 3px 8px !important; border-radius: 20px !important;} .station-label .st-name { font-size: 8.5px !important; } .station-label span:nth-child(2) { font-size: 7px !important; margin-top: 1px !important;} .center-dot { width: 8px !important; height: 8px !important; left: -4px !important; top: -4px !important; } /* Estatus Inline - AHORA A 3 COLUMNAS MÁS COMPACTO */ #tabla-seccion tr { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; grid-template-rows: auto auto auto !important; /* 3 explicit rows */ padding: 12px 15px !important; gap: 8px 10px !important; position: relative; } #tabla-seccion td { padding: 0 !important; font-size: 14px; display: flex !important; flex-direction: column !important; } #tabla-seccion td::before { margin-bottom: 2px !important; font-size: 10px; } /* Renglón 1: Nombre (Izquierda) + Estado (Derecha) */ #tabla-seccion td:nth-child(1) { grid-area: 1 / 1 / 2 / 3 !important; flex-direction: row !important; align-items: center !important; padding-bottom: 6px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 4px !important; padding-right: 0 !important; } #tabla-seccion td:nth-child(2) { grid-area: 1 / 3 / 2 / 4 !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; padding-bottom: 6px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 4px !important; position: static !important; margin-top: 0 !important; } /* Renglón 2: Acumulado + Tasa + Clasificación */ #tabla-seccion td:nth-child(3) { grid-area: 2 / 1 / 3 / 2 !important; align-items: flex-start !important; margin-bottom: 2px !important; } #tabla-seccion td:nth-child(4) { grid-area: 2 / 2 / 3 / 3 !important; align-items: center !important; text-align: center !important; margin-bottom: 2px !important; } #tabla-seccion td:nth-child(5) { grid-area: 2 / 3 / 3 / 4 !important; align-items: flex-end !important; justify-content: flex-start !important; border: none !important; margin-bottom: 2px !important; margin-top: 0 !important; padding-top: 0 !important; } /* Renglón 3: Última conexión + Tendencia */ #tabla-seccion td:nth-child(7) { grid-area: 3 / 1 / 4 / 3 !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; border-top: none !important; padding-top: 2px !important; margin-top: 0 !important; } #tabla-seccion td:nth-child(7) br { display: none !important; } /* Ocultar el salto de línea para celular */ #tabla-seccion td:nth-child(7) span { margin-left: 2px; } #tabla-seccion td:nth-child(6) { grid-area: 3 / 3 / 4 / 4 !important; align-items: flex-end !important; justify-content: flex-start !important; border-top: none !important; padding-top: 2px !important; margin-top: 0 !important; height: auto !important; } } /* --- ESTILOS ZOOM LEAFLET PERSONALIZADO --- */ @media (max-width: 1024px) { .leaflet-control-zoom { top: 25px !important; /* Ligeramente más arriba */ left: 10px !important; } .leaflet-control-zoom a { width: 28px !important; /* Menos ancho */ height: 32px !important; line-height: 32px !important; font-size: 16px !important; } } /* ========================================== */ /* GLOBO EMERGENTE DE INSTALACIÓN (PWA) */ /* ========================================== */ #pwa-popup { display: none; position: fixed; top: 25px; /* <-- AHORA APARECE ARRIBA */ left: 50%; transform: translateX(-50%); background-color: rgba(15, 23, 42, 0.65); /* <-- TRANSPARENCIA ELEGANTE */ backdrop-filter: blur(20px); /* <-- EFECTO CRISTAL (GLASSMORPHISM) */ -webkit-backdrop-filter: blur(20px); color: #f8fafc; padding: 20px 25px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(59, 130, 246, 0.3); z-index: 999999999; /* <--- 9 nueves para asegurar que esté sobre el login */ text-align: center; font-family: 'Inter', sans-serif; width: 85%; max-width: 350px; animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideDown { from { top: -100px; opacity: 0; } to { top: 25px; opacity: 1; } } #pwa-popup h4 { margin: 0 0 10px 0; color: #38bdf8; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;} #pwa-popup p { margin: 0 0 15px 0; font-size: 13px; line-height: 1.5; color: #cbd5e1; font-weight: 500; } #pwa-popup button { background: linear-gradient(135deg, #0a84ff 0%, #005bb5 100%); color: white; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 800; cursor: pointer; width: 100%; font-family: 'Inter', sans-serif; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4); letter-spacing: 0.5px; } #pwa-popup button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 132, 255, 0.6); } #pwa-cerrar { position: absolute; top: 8px; right: 12px; background: none !important; color: #94a3b8 !important; width: auto !important; padding: 0 !important; font-size: 24px; border: none; cursor: pointer; transition: color 0.2s; } #pwa-cerrar:hover { color: #f8fafc !important; } /* Estilo base del título para PC */ .splash-title { color: white; font-size: 20px; font-weight: 900; margin-top: 40px; margin-bottom: 5px; letter-spacing: 1px; text-align: center; text-shadow: 0 4px 10px rgba(0,0,0,0.5); padding: 0 15px; } /* MAGIA RESPONSIVA: Se hace más pequeño exclusivamente en celulares para que quepa en una sola línea */ @media (max-width: 1024px) { .splash-title { font-size: 15px !important; letter-spacing: 0.5px !important; white-space: nowrap !important; } } /* Animaciones exclusivas para la pantalla de carga */ @keyframes latidoLogo { 0% { transform: scale(1); filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); } 50% { transform: scale(1.05); filter: drop-shadow(0 20px 30px rgba(10, 132, 255, 0.4)); } 100% { transform: scale(1); filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); } } @keyframes parpadeoTexto { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } /* ===== CLASES ADAPTABLES (MÁGIA CLARO/OSCURO) ===== */ .apple-pill, .apple-hud { background: var(--bg-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .apple-hud { border-radius: 20px; padding: 15px 30px; } /* TRUCO GIS DEFINITIVO: DOBLE SOMBRA NEGRA PARA LA LÍNEA BLANCA */ .borde-xalapa-pro { filter: drop-shadow(0px 0px 3px rgba(0,0,0,1)) drop-shadow(0px 3px 6px rgba(0,0,0,0.8)); } /* --- BOTONES DE CONTROL MANUAL (SATÉLITE) --- */ .frame-btn { background: rgba(134, 134, 139, 0.15); border: none; color: var(--text-main); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.2s ease; } .frame-btn:hover { background: var(--brand-blue); color: white; transform: scale(1.05); } body.dark-mode .frame-btn { background: rgba(255, 255, 255, 0.1); } body.dark-mode .frame-btn:hover { background: var(--brand-blue); } /* Botones de Cámara (Derecha) */ .apple-cam-btn { background: var(--bg-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--text-main); border: 1px solid var(--border); padding: 10px 18px; border-radius: 14px; font-weight: 800; font-size: 10px; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.5px; font-family: 'Inter', sans-serif; text-transform: uppercase; box-shadow: 0 6px 15px rgba(0,0,0,0.08); } .apple-cam-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,102,204,0.15); } .frame-btn-grupo { background: transparent; border: none; color: var(--text-muted); width: 28px; /* Reducido de 36px a 28px */ height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .frame-btn-grupo:hover { background: var(--bg-card); color: var(--text-main); } .frame-btn-salto { background: transparent; border: none; color: var(--text-muted); width: 24px; /* Súper compacto (24px) para que no roben espacio */ height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .frame-btn-salto:hover { background: var(--bg-card); color: var(--brand-blue); } /* Líneas Separadoras del HUD */ .hud-separator { width: 1px; height: 45px; background: var(--border); margin: 0; } /* Control de Velocidad (Segmented Control iOS) */ .ios-segmented-control { display: flex; background: var(--border); border-radius: 10px; padding: 3px; } .spd-btn { background: transparent; color: var(--text-muted); border: none; padding: 6px 16px; font-size: 10px; font-weight: 800; cursor: pointer; border-radius: 8px; transition: all 0.2s; font-family: 'Inter', sans-serif; } .spd-btn:hover { color: var(--text-main); } .spd-btn.active { background: var(--brand-blue); color: white; box-shadow: 0 2px 8px rgba(0,102,204,0.4); } /* Píldora Infrarrojo/Visible */ .switch-btn { padding: 8px 24px; border-radius: 25px; font-weight: 800; font-size: 11px; cursor: pointer; transition: all 0.3s; letter-spacing: 0.5px; border: none; font-family: 'Inter', sans-serif; } .switch-btn.active { background: var(--brand-blue); color: white; box-shadow: 0 4px 15px rgba(0,102,204,0.4); } .switch-btn.inactive { background: transparent; color: var(--text-muted); } /* --- MAQUILLAJE PARA INFRARROJO (IR) --- */ .blur-cloud-ir { filter: blur(6.8px) contrast(1.2) saturate(1.8); /* 🚀 MEJORA: translateZ(0) fuerza a usar la Tarjeta Gráfica (GPU) */ transform: scale(1.05) translateZ(0); transition: opacity 0.2s ease-in-out; /* 🚀 MEJORA: Prepara al navegador para animar sin trabarse */ will-change: opacity, filter; } /* --- MAQUILLAJE PARA VISIBLE (VIS) --- */ .blur-cloud-vis { filter: blur(1.8px) contrast(1.2) saturate(0.9); transform: scale(1.05) translateZ(0); transition: opacity 0.2s ease-in-out; will-change: opacity, filter; } /* --- MAQUILLAJE HÍBRIDO (IR SOBRE VIS) --- */ .blur-cloud-ir-mix { filter: blur(6.8px) contrast(1.2) saturate(2.3); transform: scale(1.05) translateZ(0); transition: opacity 0.2s ease-in-out; mix-blend-mode: multiply; will-change: opacity, filter; } /* Estilo Apple para el Zoom (Adaptable Claro/Oscuro) */ #map-loop-sat .leaflet-control-zoom { border: 1px solid var(--border) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; border-radius: 12px !important; overflow: hidden; } #map-loop-sat .leaflet-control-zoom a { background: var(--bg-card) !important; backdrop-filter: blur(20px); color: var(--text-main) !important; border-bottom: 1px solid var(--border) !important; font-family: 'Inter', sans-serif !important; font-weight: bold; transition: all 0.2s ease; } #map-loop-sat .leaflet-control-zoom a:hover { color: var(--brand-blue) !important; background: var(--border) !important; } #map-loop-sat .leaflet-control-zoom a:last-child { border-bottom: none !important; } /* ===================================================================== */ /* RESPONSIVE MÓVIL: HUD SATELITAL INTEGRADO (ESTÉTICA MINIMALISTA PRO) */ /* ===================================================================== */ @media (max-width: 850px) { /* TÍTULO LIGERAMENTE MÁS GRANDE EN UN RENGLÓN */ #seccion-visor-loop .panel-title { font-size: 17.5px !important; /* Ligeramente más grande */ letter-spacing: 0px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 2px !important; } #seccion-visor-loop .instruction-text { font-size: 9.5px !important; /* Ligeramente más grande */ letter-spacing: 0px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 12px !important; } /* --- BOTÓN PLAY/PAUSA MÓVIL COMPACTO --- */ #btnPlayLoop { padding: 8px 10px !important; font-size: 9.5px !important; letter-spacing: 0px !important; } /* 1. Transforma el contenedor */ #seccion-visor-loop .map-wrapper { height: auto !important; display: flex !important; flex-direction: column !important; background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; } /* El mapa ocupa la mitad superior */ #map-loop-sat { position: relative !important; height: 400px !important; width: 100% !important; order: 1 !important; border-radius: 20px 20px 0 0 !important; border: 1px solid var(--border) !important; border-bottom: none !important; } /* 2. HUD Satelital Inferior (Gris claro) */ .apple-hud { position: relative !important; order: 2 !important; left: 0 !important; bottom: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; border-radius: 0 0 20px 20px !important; border: 1px solid var(--border) !important; border-top: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; padding: 15px 18px !important; background: #f4f4f5 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto auto !important; gap: 12px 15px !important; box-sizing: border-box !important; } body.dark-mode .apple-hud { background: #18181b !important; box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important; } /* Desempaquetar contenedores originales */ .apple-hud > div:nth-child(1), .apple-hud > div:nth-child(5) { display: contents !important; } .hud-separator { display: none !important; } /* ======================================= */ /* FILA 1: PAUSA (Izquierda) y VELOCIDAD (Derecha) */ /* ======================================= */ #control-reproduccion { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: 34px !important; font-size: 10px !important; letter-spacing: 0.5px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .apple-hud > div:nth-child(3) { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; justify-content: center !important; align-items: center !important; margin: 0 !important; width: 100% !important; } .apple-hud > div:nth-child(3) > span { display: none !important; } .ios-segmented-control { width: 100%; height: 34px; box-sizing: border-box; } .spd-btn { flex: 1; padding: 0 !important; font-size: 9px !important; display: flex; align-items: center; justify-content: center; } /* ======================================= */ /* FILA 2: PANEL DE ESTADO TIPO DISPLAY */ /* ======================================= */ .apple-hud > div:nth-child(1) > div { grid-column: 1 / 3 !important; grid-row: 2 / 3 !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; align-items: center !important; background: #ffffff !important; padding: 10px 15px !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.04) !important; box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important; width: 100% !important; box-sizing: border-box !important; border-left: none !important; } body.dark-mode .apple-hud > div:nth-child(1) > div { background: #27272a !important; border-color: rgba(255,255,255,0.05) !important; } /* Título "Actualización 10 min" FORZADO A UN RENGLÓN */ .apple-hud > div:nth-child(1) > div > div { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; } .apple-hud > div:nth-child(1) > div > div > span:nth-child(2) { font-size: 9px !important; /* Más grande que Captura */ white-space: nowrap !important; display: inline-block !important; } /* Subtítulo "Captura GOES" */ #lblHoraCaptura { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; text-align: left !important; margin-top: 3px !important; font-size: 7.5px !important; /* Más pequeño que Actualización */ white-space: nowrap !important; } /* Reloj Grande a la derecha */ #lblHoraFrame { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; font-size: 20px !important; margin: 0 !important; text-align: right !important; } /* ======================================= */ /* FILA 3: SLIDERS OPACIDAD */ /* ======================================= */ .apple-hud > div:nth-child(5) > div:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; width: 100% !important; } .apple-hud > div:nth-child(5) > div:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; width: 100% !important; } .apple-hud > div:nth-child(5) > div > div { margin-bottom: 4px !important; } .apple-hud > div:nth-child(5) > div > div > span:first-child { font-size: 8px !important; white-space: nowrap !important; } #valNubes, #valEsri { font-size: 10px !important; } input[type="range"] { margin: 2px 0 0 0 !important; } /* ========================================================= */ /* CONTROLES FLOTANTES EN EL MAPA */ /* ========================================================= */ /* Ajuste de botones para celular */ .switch-btn { padding: 6px 10px !important; font-size: 8.5px !important; } #alerta-rayos-ui { top: 55px !important; /* En celulares lo subimos un poquito para ahorrar espacio */ } .map-controls-br { top: 75px !important; right: 10px !important; gap: 6px !important; z-index: 500 !important; } .apple-cam-btn { padding: 6px 10px !important; font-size: 8px !important; background: rgba(255,255,255,0.9) !important; } body.dark-mode .apple-cam-btn { background: rgba(28,28,30,0.9) !important; } } /* ========================================================= RESCATE DE CONTRASTE: ESTILO "DARK GLASS" PREMIUM ========================================================= */ /* 1. La píldora central (Infrarrojo / Híbrido / Visible) */ body.dark-mode #seccion-visor-loop .map-wrapper > div:nth-child(2) { background: rgba(20, 20, 24, 0.65) !important; /* Negro cristalino */ backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde de luz */ box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; } /* 2. Aclarar las letras de los botones inactivos */ body.dark-mode .switch-btn.inactive { color: #94a3b8 !important; /* Gris elegante, no tan blanco */ } /* 3. Botones flotantes (Mapa Libre, Centrar) */ body.dark-mode #seccion-visor-loop .apple-cam-btn { background: rgba(20, 20, 24, 0.65) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #f8fafc !important; box-shadow: 0 6px 15px rgba(0,0,0,0.8) !important; } /* 4. Controles de Zoom (+ y -) */ body.dark-mode #map-loop-sat .leaflet-control-zoom { background: rgba(20, 20, 24, 0.65) !important; backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } /* 5. HUD Inferior (Panel de reproducción y opacidad) */ body.dark-mode .apple-hud { background: rgba(15, 15, 18, 0.80) !important; /* Negro profundo ahumado */ backdrop-filter: blur(35px) !important; -webkit-backdrop-filter: blur(35px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.20) !important; /* Luz zenital sutil */ box-shadow: 0 -10px 40px rgba(0,0,0,0.9) !important; } /* 6. Íconos del reproductor y textos de velocidad */ body.dark-mode .frame-btn-grupo, body.dark-mode .frame-btn-salto, body.dark-mode .spd-btn { color: #94a3b8 !important; } /* ========================================================= AJUSTES FINALES: MÓVIL, FOOTER Y BOTÓN (MODO OSCURO) ========================================================= */ /* ========================================================= FIX DEFINITIVO 1: MATA LA LÍNEA BLANCA DEL CELULAR ========================================================= */ @media (max-width: 850px) { body.dark-mode #seccion-visor-loop #map-loop-sat { border-bottom: 0px solid transparent !important; } body.dark-mode #seccion-visor-loop .apple-hud { border-top: 0px solid transparent !important; } } /* ========================================================= FIX DEFINITIVO 2: MEJORA DE CONTRASTE EN TARJETAS (MODO OSCURO) ========================================================= */ body.dark-mode { /* Pasamos de un rgba(28,28,30) a un gris asfalto elegante (38,38,42) */ --bg-card: rgba(38, 38, 42, 0.75); /* 🚀 MATAMOS EL MARCO BLANCO: Lo bajamos a 0.02 para que sea invisible */ --border: rgba(255, 255, 255, 0.02); } /* ========================================================= FIX DEFINITIVO 3: ADIÓS EFECTO 3D Y MARCOS DUPLICADOS ========================================================= */ /* 1. ELIMINAR EFECTO 3D DE TODAS LAS TARJETAS (M-BOX Y CARDS) */ /* Quitamos el "inset" (luz interior) para que se vean 100% planas y lisas como en el modo claro, conservando solo su borde exterior iluminado. */ body.dark-mode .card, body.dark-mode .m-box { box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; } /* 2. ELIMINAR EL MARCO BLANCO DEL MAPA SATELITAL (ESCRITORIO) */ body.dark-mode #seccion-visor-loop .map-wrapper { border: none !important; } /* 3. ELIMINAR EL MARCO BLANCO DEL MAPA SATELITAL (CELULAR) */ @media (max-width: 850px) { body.dark-mode #map-loop-sat { border: none !important; } body.dark-mode .apple-hud { border: none !important; /* Dejamos solo una línea casi invisible (5%) para separar sutilmente los botones de la imagen */ border-top: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: none !important; } } /* ========================================================= DARK GLASS PARA BOTONES DEL MAPA PRINCIPAL (ESTACIONES) ========================================================= */ body.dark-mode #map-online-badge, body.dark-mode .layer-toggle-btn, body.dark-mode .map-btn { background: rgba(20, 20, 24, 0.65) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #f8fafc !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; /* Sombra sutil y plana */ } /* Color blanco para el ícono de las capas para que haga contraste */ body.dark-mode .layer-toggle-btn svg { fill: #f8fafc !important; } /* ========================================================= POSICIÓN MÓVIL: BOTONES MÁS AL NORTE Y PEGADOS AL MENÚ ========================================================= */ @media (max-width: 1024px) { .map-controls-br { top: 52px !important; /* Sube los botones justo debajo del menú de capas */ gap: 5px !important; /* Los pega un poquito más entre sí */ } } #pwa-popup { display: none; position: fixed; top: 25px; left: 50%; transform: translateX(-50%); /* Magia de transparencia: Bajó de 0.75 a 0.50 */ background-color: rgba(15, 23, 42, 0.50); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); color: #f8fafc; padding: 20px 25px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(59, 130, 246, 0.3); z-index: 999999999; text-align: center; font-family: 'Inter', sans-serif; width: 85%; max-width: 350px; animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Nueva animación para que baje desde el techo suavemente */ @keyframes slideDown { from { top: -100px; opacity: 0; } to { top: 25px; opacity: 1; } } #pwa-popup h4 { margin: 0 0 10px 0; color: #38bdf8; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;} #pwa-popup p { margin: 0 0 15px 0; font-size: 13px; line-height: 1.5; color: #cbd5e1; font-weight: 500; } #pwa-popup button { background: linear-gradient(135deg, #0a84ff 0%, #005bb5 100%); color: white; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 800; cursor: pointer; width: 100%; font-family: 'Inter', sans-serif; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4); letter-spacing: 0.5px; } #pwa-popup button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 132, 255, 0.6); } #pwa-cerrar { position: absolute; top: 8px; right: 12px; background: none !important; color: #94a3b8 !important; width: auto !important; padding: 0 !important; font-size: 24px; border: none; cursor: pointer; transition: color 0.2s; } #pwa-cerrar:hover { color: #f8fafc !important; }