.clima-tv{height:100vh;min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px;overflow:hidden}.topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;background:linear-gradient(135deg,rgba(8,20,37,.92),rgba(18,48,78,.72));border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.brand{font-weight:1000;text-transform:uppercase;text-decoration:none;letter-spacing:.04em;color:#fff;white-space:nowrap}.title{font-weight:800;color:#dff7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-spacer{flex:1}.status-pill{font-size:12px;border:1px solid var(--stroke);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.06);color:var(--muted);white-space:nowrap}.status-pill[data-status=online],.status-pill[data-status=fixture],.status-pill[data-status=cache_fresh],.status-pill[data-status=fresh]{color:#d7ffe3;border-color:rgba(34,197,94,.42)}.status-pill[data-status=partial],.status-pill[data-status=stale],.status-pill[data-status=cache_stale]{color:#fff0c2;border-color:rgba(245,158,11,.5)}.status-pill[data-status=error]{color:#ffd4d4;border-color:rgba(239,68,68,.5)}#clock{font-weight:800;white-space:nowrap}#refreshBtn,.operator-trigger,.mini-btn{border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.10);color:var(--text);padding:9px 12px;border-radius:12px}.alert-band{flex:0 0 auto;display:flex;align-items:center;gap:12px;border-radius:16px;border:1px solid var(--stroke);padding:8px 12px;background:rgba(34,211,238,.12);min-height:36px}.alert-band[data-level=yellow]{background:rgba(234,179,8,.15)}.alert-band[data-level=orange]{background:rgba(245,128,11,.18)}.alert-band[data-level=red]{background:rgba(239,68,68,.18)}.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:10px;flex:1 1 auto;min-height:0;overflow:hidden}.map-panel,.sidebar{position:relative;background:linear-gradient(180deg,rgba(10,22,39,.82),rgba(3,9,18,.92));border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.map-panel{height:100%;min-height:0;--map-fit-scale:1}.map-watermark{position:absolute;left:16px;top:16px;z-index:5;color:rgba(238,247,255,.55);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.map-toolbar{position:absolute;right:14px;top:14px;z-index:40;display:flex;gap:6px;padding:5px;border:1px solid rgba(158,216,255,.22);border-radius:999px;background:rgba(2,8,18,.64);backdrop-filter:blur(12px)}.map-toolbar button{min-width:34px;height:30px;border:1px solid rgba(34,211,238,.26);border-radius:999px;background:rgba(34,211,238,.10);color:#eef7ff;font-weight:900}.map-toolbar button:hover,.map-toolbar button:focus{border-color:rgba(34,211,238,.72);outline:none;background:rgba(34,211,238,.18)}.svg-map{position:absolute;inset:34px 8px 8px 8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.svg-map svg{height:min(calc(96% * var(--map-fit-scale,1)),calc(760px * var(--map-fit-scale,1)));width:auto;max-width:calc(95% * var(--map-fit-scale,1));aspect-ratio:780/773;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));transition:height .16s ease,max-width .16s ease}.pin-layer{position:absolute;inset:0;z-index:10;pointer-events:none;contain:layout paint}.pin-layer .weather-pin{pointer-events:auto}.focus-card{position:absolute;left:16px;bottom:16px;z-index:30;width:min(280px,calc(100% - 32px));border:1px solid rgba(158,216,255,.32);border-radius:18px;background:rgba(2,8,18,.74);box-shadow:var(--shadow);padding:9px 10px;backdrop-filter:blur(14px)}.sidebar{height:100%;min-height:0;display:flex;flex-direction:column;padding:10px;gap:10px}.control-grid{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.control-grid input{grid-column:1/-1}.control-grid input,.control-grid select{width:100%;border:1px solid var(--stroke);background:rgba(255,255,255,.08);color:var(--text);border-radius:13px;padding:10px;outline:none}.control-grid option{background:#0b1b31}.sidebar-block{border:1px solid rgba(158,216,255,.16);border-radius:18px;padding:10px;background:rgba(255,255,255,.04);overflow:hidden}.sidebar-block h2{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#b9d9ee}.grow{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.place-list{display:flex;flex-direction:column;gap:7px;overflow:auto;min-height:0;max-height:none;padding-right:3px}.ticker{flex:0 0 40px;height:40px;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;background:#050b15;box-shadow:var(--shadow);white-space:nowrap}.ticker-track{display:inline-block;padding:10px 0 0 100%;animation:ticker 42s linear infinite;font-weight:800;color:#dff7ff}@keyframes ticker{to{transform:translateX(-100%)}}@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;padding-left:12px;white-space:normal}}
/* Compatibility hardening */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* J360 LOCAL EDIT: en modo embed (?embed=1) ocultamos componentes que duplican
   info con el shell de jujuy360.com /clima/ o que no aportan al visitante:
   - .focus-card: duplicaba el .local-weather-card que ya aparece junto al
     muni elegido al hacer click ("localclick-fix" v2.3.2).
   - .ticker (footer): se reemplaza por un weather-ticker propio en el shell
     de /clima/ que vive ARRIBA, donde antes estaba el dollar ticker, con
     boton "EN VIVO" + marquesina de munis. Asi liberamos la franja inferior
     del iframe y eliminamos la duplicacion de "EN VIVO · S.S. de Jujuy ..."
   - #metricSelect: el dropdown "Temperatura/Viento/Humedad/Precipitacion"
     no aporta valor al visitante (filtra una metrica que solo afecta al
     orden de la lista; el ranking ya muestra los 4 ejes en bloques).
   - .diagnostics-block: panel tecnico ("Modo broadcast / API / Cache / ...")
     util para el operator pero ruido para visitantes.
   - sidebar-block ranking: por default queda colapsado a ~62px porque el
     flex del sidebar lo comprime. Le damos min-height 240px para mostrar
     los 4 bloques (mas calidas / mas frias / mas viento / lluvia) completos.
   - .ranking-block button: reducir padding para que entren los items con
     scrollHeight=387px en un block de 240px. */
.clima-tv[data-embed="true"] .focus-card{display:none !important;}
.clima-tv[data-embed="true"] .ticker{display:none !important;}
.clima-tv[data-embed="true"] #metricSelect{display:none !important;}
.clima-tv[data-embed="true"] .diagnostics-block{display:none !important;}
/* .topbar interno (JUJUY360 · Clima por gobiernos locales · hora · Actualizar
   · OP): redundante con el __tv-header del shell de /clima/ (breadcrumb +
   kicker "EN VIVO"). El JS de la app sigue corriendo sobre los elementos
   ocultos (clock, refreshBtn, etc) sin error — solo no se ven. */
.clima-tv[data-embed="true"] .topbar{display:none !important;}
/* .alert-band ("Alertas oficiales · Verificar alertas vigentes en el SMN…"):
   en modo embed se oculta aca y se re-emite al PIE de /clima/ (el shortcode
   renderiza su propio cartel de alertas SMN al final del contenido). */
.clima-tv[data-embed="true"] .alert-band{display:none !important;}
.clima-tv[data-embed="true"]{gap:8px;}
.clima-tv[data-embed="true"] .control-grid{grid-template-columns:1fr 1fr !important;}
.clima-tv[data-embed="true"] .sidebar-block:not(.grow):not(.diagnostics-block){
  flex:0 0 auto !important;
  min-height:240px !important;
}
.clima-tv[data-embed="true"] .ranking-block{padding:6px !important;}
.clima-tv[data-embed="true"] .ranking-block h3{margin-bottom:4px !important; font-size:11px !important;}
.clima-tv[data-embed="true"] .ranking-block button{padding:4px 6px !important; font-size:11px !important;}
.clima-tv[data-embed="true"] .ranking-block button strong{font-size:12px !important;}
/* J360 LOCAL EDIT: la .local-weather-card (card "CLIMA LOCAL · [muni]" que
   aparece al seleccionar un gobierno local) se posicionaba con left:X% +
   translate(-50%) y se DESBORDABA del borde del mapa (el user lo reporto:
   "el margen se va para afuera"). La anclamos al borde con margen interno
   FIJO de 16px, sin translateX — asi nunca se sale del contenedor. El
   anclaje (izq/der) lo decide la clase slot-left/slot-right que pone el JS
   segun de que lado del mapa esta el muni. */
.clima-tv[data-embed="true"] .local-weather-card{
  transform:translateY(-50%) !important;
}
.clima-tv[data-embed="true"] .local-weather-card.slot-right{
  left:auto !important; right:16px !important;
}
.clima-tv[data-embed="true"] .local-weather-card.slot-left{
  left:16px !important; right:auto !important;
}
@media (max-width:720px){
  .clima-tv[data-embed="true"] .local-weather-card.slot-right{right:10px !important;}
  .clima-tv[data-embed="true"] .local-weather-card.slot-left{left:10px !important;}
}