/*
Theme Name: wswelba
Theme URI: https://www.subelaweb.com
Version: 4.0
Description: Este el template de foileando.com
Author: Subelaweb
Author URI: https://www.subelaweb.com
Template: astra
*/

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.login-container{background:#fff;padding:40px;border-radius:16px;box-shadow:0 20px 40px #0000001a;max-width:400px;width:100%;text-align:center}
.login-container h1{margin-bottom:30px;color:#333}
.login-form .form-group{margin-bottom:20px;text-align:left}
.login-form label{display:block;margin-bottom:5px;font-weight:600;color:#555}
.login-form input[type="text"],.login-form input[type="password"]{width:100%;padding:12px;border:2px solid #e1e1e1;border-radius:8px;font-size:16px;transition:border-color .3s}
.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{border-color:#667eea;outline:none}
.login-form .submit-btn{width:100%;padding:12px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}
.login-form .submit-btn:hover{background:#5a6fd8}
.login-form .error{color:#e74c3c;margin-top:10px;font-size:14px}
.meteo-dashboard{max-width:1200px;margin:0 auto;padding:20px}
.meteo-header{text-align:center;margin-bottom:30px}
.meteo-header h1{font-size:2.5rem;color:#0f0f0f;margin-bottom:10px}
.meteo-header p{font-size:1.1rem;color:#6b7280}
.meteo-grid {
    display: grid;
    /* Cambiado de 1fr 1fr a auto-fit */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px;
    margin-bottom: 40px;
}
.meteo-speed-gauge,.meteo-direction-compass{background:#fff;border:1px solid #0f0f0f1a;border-radius:16px;box-shadow:0 6px 10px #0000001a;padding:24px;text-align:center}
.gauge-title,.compass-title{font-weight:800;font-size:16px;letter-spacing:.2px;text-transform:uppercase;margin-bottom:12px;color:#0f0f0f}
.gauge-value,.compass-value{font-size:24px;font-weight:900;margin-bottom:20px;color:#0f0f0f}
.svg-wrap{width:min(320px,100%);aspect-ratio:1/1;margin:0 auto 20px}
.svg-wrap svg{width:100%;height:100%;display:block}
.gauge-info,.compass-info{margin-top:10px}
.gust-info,.direction-text{font-size:24px;color:#6b7280;font-weight:600}
.last-update{font-size:12px;color:#9ca3af;margin-top:8px}
.meteo-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.stat-card{background:#0b0b0b;color:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 8px 20px #00000026}
.stat-label{font-size:12px;opacity:.75;font-weight:800;letter-spacing:.2px;text-transform:uppercase;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:900;margin-bottom:6px}
.stat-unit{font-size:18px;font-weight:700}
.stat-desc{font-size:12px;opacity:.7}
.station-widget{margin-bottom:20px}
.station-summary-card{background:#fff;border:1px solid #0f0f0f1a;border-radius:12px;padding:20px;box-shadow:0 4px 12px #00000014;transition:transform 0.2s,box-shadow .2s}
.station-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}
.station-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.station-header h3{margin:0;font-size:1.2rem;color:#0f0f0f}
.station-status{display:flex;align-items:center;gap:8px}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.online{background:#2ecc71}
.status-dot.offline{background:#e74c3c}
.status-text{font-size:.9rem;color:#6b7280}
.station-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.metric{text-align:center}
.metric-label{font-size:.8rem;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.metric-value{font-size:1.4rem;font-weight:700;color:#0f0f0f}
.metric-unit{font-size:.9rem;font-weight:600}
.station-actions{text-align:center}
.view-details-btn{display:inline-block;padding:8px 16px;background:#667eea;color:#fff;text-decoration:none;border-radius:6px;font-size:.9rem;font-weight:600;transition:background .2s}
.view-details-btn:hover{background:#5a6fd8}
.meteo-header{text-align: center}
.meteo-featured{margin:40px 0;padding:30px;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:16px}
.meteo-featured h2{text-align:center;margin-bottom:30px;color:#0f0f0f}
.meteo-detailed-grid{display:grid;grid-template-columns:1fr;gap:30px;justify-items:center}
.meteo-station-detail{max-width:1200px;margin:0 auto;padding:20px}
.meteo-station-detail .hero{text-align:center;margin-bottom:40px}
.meteo-station-detail .hero h1{font-size:2.2rem;margin-bottom:10px}
.meteo-station-detail .hero p{font-size:1rem;color:#6b7280}
.meteo-station-detail .grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:40px}
.meteo-station-detail .card{background:#fff;border:1px solid #0f0f0f1a;border-radius:16px;box-shadow:0 12px 30px #0000001a;overflow:hidden}
.meteo-station-detail .card-head{padding:20px;border-bottom:1px solid #0f0f0f1a;display:flex;justify-content:space-between;align-items:center}
.meteo-station-detail .title{font-weight:800;font-size:16px;letter-spacing:.2px;text-transform:uppercase;color:#0f0f0f}
.meteo-station-detail .chip{font-size:14px;font-weight:700;color:#0f0f0f}
.meteo-station-detail .card-body{padding:20px}
.meteo-station-detail .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}
.meteo-station-detail .stat{background:#0b0b0b;color:#fff;border-radius:12px;padding:20px;text-align:center}
.meteo-station-detail .stat .k{font-size:12px;opacity:.75;font-weight:800;letter-spacing:.2px;text-transform:uppercase;margin-bottom:8px}
.meteo-station-detail .stat .v{font-size:24px;font-weight:900;margin-bottom:6px}
.meteo-station-detail .stat .s{font-size:12px;opacity:.7}
.meteo-station-detail .chart-wrap{margin-bottom:40px}
.meteo-station-detail .chart-body{padding:30px}
.meteo-station-detail .chart-placeholder{border:1px dashed #d1d5db;border-radius:12px;padding:40px;color:#6b7280;background:#fafafa;font-size:16px;text-align:center}
.station-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:30px;border-top:1px solid #e5e7eb}
.station-links{display:flex;gap:10px}
.nav-btn{display:inline-block;padding:10px 20px;background:#667eea;color:#fff;text-decoration:none;border-radius:8px;font-size:.9rem;font-weight:600;transition:background .2s}
.nav-btn:hover{background:#5a6fd8}
.nav-btn.secondary{background:#6b7280}
.nav-btn.secondary:hover{background:#4b5563}
.sponsor-strip{background:#f8fafc;border-bottom:1px solid #e5e7eb}
.sponsor-strip__inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.sponsor-strip__item{display:flex;align-items:center;justify-content:center;min-height:52px;padding:5px;border-radius:5px;transition:transform .2s,background .2s}
.sponsor-strip__item{cursor:pointer}
.sponsor-strip__item:hover{transform:translateY(-2px);background:#ffffff;cursor:pointer}
.sponsor-strip__item img{max-height:60px;max-width:80px;width:auto;height:auto;object-fit:contain;display:block;filter:grayscale(5%);opacity:.95}
@media (max-width: 768px) {
.meteo-dashboard{padding:15px}
.meteo-header h1{font-size:2rem}
.meteo-grid{grid-template-columns:1fr;gap:20px}
.meteo-detailed-grid{grid-template-columns:1fr;gap:20px}
.station-metrics{grid-template-columns:1fr;gap:12px}
.meteo-featured{padding:20px}
.meteo-station-detail .grid{grid-template-columns:1fr;gap:20px}
.meteo-station-detail .stats{grid-template-columns:1fr}
.station-navigation{flex-direction:column;gap:20px}
.station-links{width:100%;justify-content:center}
.sponsor-strip__inner{padding:8px 14px;gap:12px}
.sponsor-strip__item{min-height:44px}
.sponsor-strip__item img{max-height:40px;max-width:120px}
}
@media (max-width: 480px) {
.meteo-header h1{font-size:1.8rem}
.meteo-station-detail .hero h1{font-size:1.8rem}
.station-summary-card{padding:16px}
.meteo-station-detail .card-head,.meteo-station-detail .card-body{padding:16px}
.meteo-station-detail .stat{padding:16px}
.sponsor-strip__inner{gap:10px}
.sponsor-strip__item img{max-width:100px}
}