/* 17nudos – widgets en directo */
:root{
	--n17-bg:#0A141C; --n17-card:#102230; --n17-card2:#13293A; --n17-line:#1E3442; --n17-line2:#3A5A6E;
	--n17-text:#EAF2F6; --n17-muted:#9DB3C0; --n17-soft:#C9D8E1;
	--n17-orange:#F26A21; --n17-orange-t:#F58A4E; --n17-blue:#5CC8E8; --n17-green:#8FD14F; --n17-red:#FF5A5F;
	--n17-display:'Barlow Condensed',sans-serif; --n17-body:Inter,system-ui,sans-serif;
}
.n17-card{box-sizing:border-box;width:100%;background:var(--n17-card);border:1px solid var(--n17-line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:18px;color:var(--n17-text);font-family:var(--n17-body);line-height:1.5}
.n17-card *{box-sizing:border-box}
.n17-row{display:flex;gap:12px}.n17-between{justify-content:space-between}.n17-center{align-items:center}.n17-end{align-items:flex-end}.n17-wrap{flex-wrap:wrap}
.n17-col{display:flex;flex-direction:column}
.n17-title{margin:0;font-family:var(--n17-display);font-weight:600;font-size:26px;line-height:1.1;color:var(--n17-text)}
.n17-title-lg{font-size:30px}
.n17-subtitle{font-size:15px;color:var(--n17-muted)}
.n17-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n17-muted)}
.n17-sub{font-size:12px;color:var(--n17-muted)}
.n17-live{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--n17-orange-t)}
.n17-dot{width:8px;height:8px;border-radius:999px;background:var(--n17-orange);display:inline-block;animation:n17pulse 2s infinite}
.n17-dot-w{background:#fff;width:6px;height:6px}
@keyframes n17pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.n17-dot{animation:none}}

/* Estación */
.n17-big{font-family:var(--n17-display);font-weight:700;font-size:88px;line-height:.9}
.n17-big small{font-size:24px;font-weight:600;color:var(--n17-muted);margin-left:6px}
.n17-compass-wrap{align-items:center;gap:4px}
.n17-compass text{font:11px var(--n17-body);fill:var(--n17-muted)}
.n17-compass-bg{fill:var(--n17-bg);stroke:#22404F;stroke-width:2}
.n17-compass-hub{fill:var(--n17-text)}
.n17-needle{transform-origin:60px 60px;transition:transform .8s ease}
.n17-needle path{fill:var(--n17-orange)}.n17-needle line{stroke:var(--n17-orange);stroke-width:3;stroke-linecap:round}
.n17-dir{font-family:var(--n17-display);font-weight:700;font-size:24px;line-height:1}
.n17-windname{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n17-orange-t)}
.n17-grid2,.n17-grid3,.n17-grid4{display:grid;gap:12px}
.n17-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.n17-grid3{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n17-line);padding-top:16px}
.n17-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.n17-grid3 strong,.n17-grid4 strong{font-weight:600;font-size:18px}
.n17-tile{background:var(--n17-bg);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column}
.n17-mid{font-family:var(--n17-display);font-weight:700;font-size:40px;line-height:1.1}
.n17-mid small{font-size:18px;color:var(--n17-muted)}
.n17-blue{color:var(--n17-blue)}.n17-orange{color:var(--n17-orange-t)}
.n17-foot{flex-wrap:wrap;font-size:13px;color:var(--n17-muted)}
.n17-foot strong{color:var(--n17-text);font-weight:600}

/* Cámaras / Windy */
.n17-cam{padding:16px;gap:14px}
.n17-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#050B10}
.n17-video-wide{aspect-ratio:21/9}
.n17-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.n17-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:#C9262C;color:#fff;font:600 12px var(--n17-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;pointer-events:none}
.n17-cam-title{font-size:24px;padding:0 4px 4px}

/* Gráfica */
.n17-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--n17-soft)}
.n17-legend span{display:inline-flex;align-items:center;gap:8px}
.n17-lg-dot{width:8px;height:8px;border-radius:999px;background:var(--n17-red);display:inline-block}
.n17-lg-line{width:18px;height:3px;border-radius:2px;display:inline-block}
.n17-bg-blue{background:var(--n17-blue)}.n17-bg-green{background:var(--n17-green)}
.n17-chart svg{width:100%;height:auto;display:block}
.n17-chart img{width:100%;max-width:640px;height:auto;display:block;margin:0 auto;border-radius:10px;background:#fff}
.n17-chart text{font-family:var(--n17-body)}
.n17-windguru{gap:20px}
.n17-wg-box{background:#fff;border-radius:12px;padding:12px;overflow-x:auto;min-height:200px}

@media (max-width:640px){
	.n17-card{padding:18px;border-radius:16px}
	.n17-big{font-size:68px}
	.n17-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.n17-title-lg{font-size:26px}
}