/* ── WeatherWidget.razor ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap');

.weather-hud-panel {
    font-family: var(--atlas-font-display);
    background: rgba(8, 12, 20, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    height: 65px;
    width: 100%;
    max-width: 1050px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid rgba(0, 229, 255, 0.3);
}

/* Icon Matrix Node: bloque .data-index-node/.icon-matrix/.matrix-row/.matrix-cell ELIMINADO
   (2026-07-17, F3): CSS muerto (sin uso en el markup) y .matrix-cell colisionaba con
   access-matrix.css. Recuperable de git si el widget vuelve a necesitarlo. */

.hud-label-primary { font-size: 0.6rem; color: rgba(255, 255, 255, 0.5); font-weight: 900; letter-spacing: 0.2em; }
.hud-label-secondary { font-size: 0.75rem; color: var(--atlas-white); font-weight: 800; letter-spacing: 0.1em; }
.hud-status-node { font-size: 0.65rem; color: var(--atlas-cyan); font-weight: 700; border: 1px solid rgba(0, 229, 255, 0.3); padding: 0 4px; border-radius: 2px; }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #00ffbc; animation: live-pulse 1s ease-in-out infinite; }

/* Metrics Readability */
.metric-label-lg { font-size: 0.75rem; color: var(--atlas-white); font-weight: 800; letter-spacing: 0.25em; margin-bottom: -2px; }
.metric-value-huge { font-size: 1.8rem; font-weight: 900; color: var(--atlas-white); letter-spacing: -1px; line-height: 1.2; }
.metric-unit-lg { font-size: 0.95rem; font-weight: 800; color: var(--atlas-white); margin-left: 4px; }

.weather-hud-item { border-right: 1px solid rgba(255,255,255,0.08); padding: 0 25px; flex-shrink: 0; }
.weather-hud-item:last-child { border: none; }

/* Health Module */
.health-bar-mini { width: 50px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.health-fill { height: 100%; background: #00ffbc; box-shadow: 0 0 8px #00ffbc; }
.fill-90 { width: 98%; }
.health-percent { font-size: 0.95rem; font-weight: 900; color: var(--atlas-white); }

@keyframes live-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* .text-cyan-neon y .text-amber-neon ELIMINADOS (2026-07-17, F3): muertos aquí (ni el markup del
   widget ni ningún JS los usa desde este componente; solo qatarPM.js, cubierto por qatarPm.css)
   y colisionaban con las versiones con text-shadow de technification.css/qatarPm.css. */
.text-purple-neon { color: #a29bfe; }
.text-indigo-neon { color: #6c5ce7; }

/* Metric SVG Icons */
.metric-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.weather-hud-item:hover .metric-icon {
    transform: scale(1.12);
}

.metric-icon-cyan {
    color: var(--atlas-cyan);
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}
.metric-icon-purple {
    color: #a29bfe;
    filter: drop-shadow(0 0 6px rgba(162, 155, 254, 0.5));
}
.metric-icon-amber {
    color: #ffc107;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.5));
}
.metric-icon-indigo {
    color: #6c5ce7;
    filter: drop-shadow(0 0 6px rgba(108, 92, 231, 0.5));
}