/* ============================================================
   comparador.css · MeteoVilatorrada
   Comparador de modelos + previsión por horas.
   Todo encapsulado bajo la clase .cmp.
   ============================================================ */

.cmp {
  /* paleta (se sobrescribe en tema claro) */
  --cmp-a: #50d8f3;
  --cmp-b: #a990ff;
  --cmp-sun: #ffd166;
  --cmp-green: #5ee3a1;
  --cmp-pink: #ff7aa8;

  --cmp-txt: #e8f4f8;
  --cmp-muted: #9db4bd;
  --cmp-dim: #7f9aa6;
  --cmp-line: rgba(210, 240, 248, .12);
  --cmp-line-soft: rgba(210, 240, 248, .08);
  --cmp-inner: rgba(8, 24, 35, .5);
  --cmp-grid: rgba(200, 235, 248, .09);
  --cmp-grid-v: rgba(200, 235, 248, .05);
  --cmp-axis: #8ba7b3;
  --cmp-dot: #06131d;
  --cmp-tip-bg: #071b28;
  --cmp-rain: #63c8f5;

  margin: 28px 0 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--cmp-line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(16, 43, 57, .78), rgba(6, 19, 29, .82));
  box-shadow: 0 20px 60px #00000028;
}

.cmp *,
.cmp *::before,
.cmp *::after { box-sizing: border-box; }

.cmp svg { display: block; }

/* ---------- cabecera ---------- */
.cmpHead { margin-bottom: 16px; }
.cmpHead b {
  display: block;
  font-size: 22px; letter-spacing: -.5px; line-height: 1.2;
  color: #e0edf0;
}
.cmpHead small {
  display: block; margin-top: 4px;
  color: var(--cmp-muted); font-size: 12px; letter-spacing: 2px;
}
.cmpHead--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.cmpHorasNav { display: flex; gap: 6px; }
.cmpNavBtn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(140, 200, 240, .3);
  background: rgba(8, 22, 36, .9);
  color: #cfeaff; padding: 0;
  transition: background .16s, transform .16s, opacity .18s;
}
.cmpNavBtn:hover { background: rgba(16, 44, 66, .95); transform: scale(1.06); }
.cmpNavBtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmpNavBtn:first-child svg { transform: rotate(180deg); }
.cmpNavBtn.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- iconos animados ---------- */
.wx { width: 40px; height: 40px; overflow: visible; }
.wx [class^="wx-"], .wx [class*=" wx-"] { transform-box: fill-box; transform-origin: center; }
.wx path, .wx circle, .wx rect { vector-effect: non-scaling-stroke; }

.wx-rays { animation: wxSpin 26s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
.wx-rays--small { transform-origin: 31px 17px; animation-duration: 38s; }
.wx-rays path { stroke: #ffc247; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.wx-core { animation: wxPulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wx-cloud { fill: url(#cmpCloudGrad2); animation: wxDrift 9s ease-in-out infinite alternate; }
.wx-moon { animation: wxPulse 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wx-star { animation: wxTwinkle 3.6s ease-in-out infinite; }
.wx-drop {
  stroke: #7fd2ff; stroke-width: 2.4; stroke-linecap: round; fill: none;
  animation: wxFall 1.5s linear infinite;
}
.wx-drops--drizzle .wx-drop { animation-duration: 2.2s; stroke-width: 2; }
.wx-flake path { stroke: #cbe9ff; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wx-flake { animation: wxSnow 4.2s linear infinite; }
.wx-fog path {
  stroke: #a9c3d6; stroke-width: 2.6; stroke-linecap: round; fill: none;
  animation: wxFog 5.5s ease-in-out infinite alternate;
}
.wx-fog path + path { animation-delay: -2.4s; }
.wx-bolt { animation: wxFlash 5s steps(1) infinite; }

@keyframes wxSpin { to { transform: rotate(360deg); } }
@keyframes wxPulse {
  0%, 100% { opacity: .92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes wxDrift {
  from { transform: translateX(-2.5px); }
  to { transform: translateX(2.5px); }
}
@keyframes wxFall {
  0% { transform: translateY(-3px); opacity: 0; }
  18% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}
@keyframes wxSnow {
  0% { transform: translateY(-3px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(6px) rotate(140deg); opacity: 0; }
}
@keyframes wxFog {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}
@keyframes wxFlash {
  0%, 88%, 100% { opacity: 1; }
  90% { opacity: .15; }
  92% { opacity: 1; }
  94% { opacity: .3; }
  96% { opacity: 1; }
}
@keyframes wxTwinkle {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

/* ---------- comparativa general ---------- */
.cmpHero {
  display: grid;
  grid-template-columns: minmax(190px, 220px) 1fr minmax(190px, 220px);
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.cmpModel {
  position: relative;
  padding: 12px 14px 11px;
  border-radius: 16px;
  border: 1px solid rgba(80, 216, 243, .28);
  background: linear-gradient(135deg, rgba(18, 66, 88, .55), rgba(6, 26, 38, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.cmpModel--b {
  border-color: rgba(169, 144, 255, .3);
  background: linear-gradient(135deg, rgba(56, 42, 100, .5), rgba(14, 18, 36, .5));
}
.cmpModelHead { display: flex; align-items: center; gap: 12px; }

.cmpFlag {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 16px -8px #000;
}
.cmpFlag svg { width: 100%; height: 100%; }

.cmpModelId { flex: 1; min-width: 0; }
.cmpModelId h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.cmpModelId p { margin: 0; font-size: 12px; color: var(--cmp-muted); }

.cmpMore {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--cmp-muted); cursor: pointer;
  transition: background .16s, color .16s;
}
.cmpMore:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cmpMore svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cmpMore[aria-expanded="true"] svg { transform: rotate(180deg); }

.cmpUpdated {
  margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid rgba(210, 240, 248, .14);
  font-size: 10.5px; color: var(--cmp-muted);
}
.cmpUpdated span { color: var(--cmp-txt); }

.cmpPop {
  position: absolute; z-index: 30;
  left: 0; right: 0; top: calc(100% + 8px);
  padding: 11px 13px; border-radius: 12px;
  background: var(--cmp-tip-bg);
  border: 1px solid rgba(210, 240, 248, .2);
  box-shadow: 0 28px 44px -18px #000;
}
.cmpPop dl { display: grid; gap: 6px; margin: 0; font-size: 10.5px; }
.cmpPop dl > div { display: flex; justify-content: space-between; gap: 12px; }
.cmpPop dt { color: var(--cmp-muted); }
.cmpPop dd { margin: 0; color: var(--cmp-txt); font-weight: 500; text-align: right; }

.cmpVerdict { text-align: center; }
.cmpVerdict h4 {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cmp-muted);
}
.cmpMetrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.cmpMetric { display: flex; align-items: flex-start; gap: 9px; text-align: left; }
.cmpMetricIcon {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}
.cmpMetricIcon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmpMetricIcon--sun { color: var(--cmp-sun); background: rgba(255, 209, 102, .1); border-color: rgba(255, 209, 102, .25); }
.cmpMetricIcon--cyan { color: var(--cmp-a); background: rgba(80, 216, 243, .1); border-color: rgba(80, 216, 243, .24); }
.cmpMetricIcon--violet { color: var(--cmp-b); background: rgba(169, 144, 255, .1); border-color: rgba(169, 144, 255, .24); }
.cmpMetricIcon--green { color: var(--cmp-green); background: rgba(94, 227, 161, .1); border-color: rgba(94, 227, 161, .24); }

.cmpMetricBody { display: flex; flex-direction: column; min-width: 0; }
.cmpMetricBody small { font-size: 10.5px; color: var(--cmp-muted); white-space: nowrap; }
.cmpMetricValue {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmpMetricValue--sun { color: var(--cmp-sun); }
.cmpMetricValue--cyan { color: var(--cmp-a); }
.cmpMetricValue--violet { color: #c2b0ff; }
.cmpMetricValue--green { color: var(--cmp-green); }
.cmpMetricBody em { font-style: normal; font-size: 9.5px; color: var(--cmp-dim); }

/* ---------- paneles ---------- */
.cmpPanel {
  border: 1px solid var(--cmp-line-soft);
  border-radius: 16px;
  background: var(--cmp-inner);
}

/* ---------- gráfico ---------- */
.cmpChartPanel { padding: 8px 10px 4px; }

.cmpChartHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 2px 4px 6px;
}
.cmpTabs { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.cmpTab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  color: var(--cmp-muted); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: color .16s, background .16s, border-color .16s;
}
.cmpTab svg { width: 15px; height: 15px; opacity: .72; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmpTab:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.cmpTab.is-active {
  color: #f0faff;
  background: linear-gradient(180deg, rgba(80, 216, 243, .26), rgba(30, 110, 145, .22));
  border-color: rgba(80, 216, 243, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.cmpTab.is-active svg { opacity: 1; color: var(--cmp-a); }

.cmpLegend { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--cmp-muted); }
.cmpLegend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cmpLegend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px -1px var(--c); }
.cmpLegend--sm { gap: 12px; font-size: 10px; }
.cmpLegend--sm i { width: 7px; height: 7px; }

.cmpStage { position: relative; padding: 0 6px 2px; }
.cmpSvg { width: 100%; height: 300px; overflow: visible; }

.cmpGrid { stroke: var(--cmp-grid); stroke-width: 1; }
.cmpGridV { stroke: var(--cmp-grid-v); }
.cmpAxisText { fill: var(--cmp-axis); font-size: 10px; font-family: inherit; }
.cmpAxisText--dow { fill: var(--cmp-muted); }
.cmpAxisText--day { fill: var(--cmp-dim); }
.cmpLine { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmpDot { stroke-width: 1.6; }
.cmpCursor { stroke: rgba(190, 230, 255, .35); stroke-width: 1; stroke-dasharray: 3 4; }

.cmpExpand {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(140, 200, 240, .3);
  background: rgba(8, 22, 36, .9);
  color: #cfeaff;
  transition: background .16s, transform .16s;
}
.cmpExpand:hover { background: rgba(16, 44, 66, .95); transform: translateY(-50%) scale(1.06); }
.cmpExpand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cmpTip {
  position: absolute; z-index: 10; min-width: 152px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--cmp-tip-bg);
  border: 1px solid rgba(126, 182, 224, .3);
  box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .9);
  font-size: 11px; pointer-events: none;
  transform: translate(-50%, -8px);
}
.cmpTip h5 { margin: 0 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cmp-muted); }
.cmpTip ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cmpTip li { display: flex; align-items: center; gap: 8px; color: var(--cmp-txt); }
.cmpTip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.cmpTip b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- carruseles ---------- */
.cmpRailPanel {
  display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 7px;
  margin-top: 12px; padding: 7px;
}
.cmpBadge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 14px 10px; border-radius: 12px; text-align: center;
  border: 1px solid rgba(80, 216, 243, .18);
  background: linear-gradient(150deg, rgba(20, 66, 92, .5), rgba(7, 24, 37, .45));
}
.cmpRailPanel--b .cmpBadge {
  border-color: rgba(169, 144, 255, .2);
  background: linear-gradient(150deg, rgba(56, 42, 100, .45), rgba(14, 18, 36, .45));
}
.cmpBadge .cmpFlag { width: 38px; height: 38px; margin-bottom: 2px; }
.cmpBadge h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cmpBadge p { margin: 0; font-size: 10.5px; color: var(--cmp-muted); }

.cmpBtnGhost {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(150, 205, 240, .28);
  background: rgba(255, 255, 255, .04);
  font-size: 10.5px; font-weight: 500; color: var(--cmp-txt);
  text-decoration: none; transition: background .16s, gap .16s;
}
.cmpBtnGhost:hover { background: rgba(255, 255, 255, .09); gap: 10px; }
.cmpBtnGhost svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.cmpRailWrap { position: relative; min-width: 0; }

/* barra de desplazamiento visible bajo los recuadros */
.cmpRail,
.cmpHorasTrack {
  display: flex; gap: 7px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 2px 2px 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cmpRail::-webkit-scrollbar,
.cmpHorasTrack::-webkit-scrollbar { height: 0; display: none; }

/* barra de desplazamiento propia (siempre visible bajo las tarjetas) */
.cmpScrollbar {
  position: relative;
  height: 8px;
  margin: 6px 2px 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(210, 240, 248, .06);
  cursor: pointer;
  touch-action: none;
}
.cmpScrollbar i {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 25%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(80, 216, 243, .9), rgba(169, 144, 255, .9));
  box-shadow: 0 0 10px -2px rgba(80, 216, 243, .7);
  transition: background .16s;
}
.cmpScrollbar:hover i { background: linear-gradient(90deg, #50d8f3, #a990ff); }
.cmpScrollbar.is-hidden { display: none; }

.cmpRailBtn {
  position: absolute; top: 50%; margin-top: -14px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(140, 200, 240, .3);
  background: rgba(7, 20, 33, .92); color: #d5eeff;
  box-shadow: 0 10px 22px -10px #000;
  transition: opacity .18s, background .16s, transform .16s;
}
.cmpRailBtn:hover { background: rgba(18, 48, 72, .96); transform: scale(1.08); }
.cmpRailBtn--prev { left: -9px; }
.cmpRailBtn--next { right: -9px; }
.cmpRailBtn--prev svg { transform: rotate(180deg); }
.cmpRailBtn.is-hidden { opacity: 0; pointer-events: none; }
.cmpRailBtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tarjeta de día ---------- */
.cmpDay {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  flex: 0 0 146px; width: 146px; min-width: 146px;
  padding: 9px 11px 10px;
  border-radius: 12px;
  border: 1px solid rgba(210, 240, 248, .1);
  background: linear-gradient(180deg, rgba(18, 50, 70, .45), rgba(7, 22, 33, .5));
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}
.cmpRailPanel--b .cmpDay {
  border-color: rgba(169, 144, 255, .12);
  background: linear-gradient(180deg, rgba(46, 34, 82, .4), rgba(12, 16, 30, .5));
}
.cmpDay:hover { transform: translateY(-2px); border-color: rgba(150, 210, 250, .45); }
.cmpRailPanel--b .cmpDay:hover { border-color: rgba(200, 170, 255, .45); }

.cmpDayTop { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 13px; }
.cmpDayTag { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-a); }
.cmpRailPanel--b .cmpDayTag { color: var(--cmp-b); }
.cmpDayDate { font-size: 12px; font-weight: 600; color: #dceffb; }
.cmpRailPanel--b .cmpDayDate { color: #e6dcff; }

.cmpDayIcon { display: flex; justify-content: center; padding: 3px 0 1px; }
.cmpDayIcon .mm { width: 48px; height: 48px; }

.cmpDayTemps { display: flex; align-items: baseline; gap: 4px; margin: 0; font-variant-numeric: tabular-nums; }
.cmpDayTemps b { font-size: 16px; font-weight: 700; color: #fff; }
.cmpDayTemps i { font-style: normal; font-size: 12px; color: var(--cmp-muted); }

.cmpDayText { margin: 0; font-size: 10.5px; line-height: 1.3; color: var(--cmp-txt); }

/* precipitación: texto + barra visual */
.cmpRain { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }
.cmpRainTxt {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--cmp-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cmpRainTxt svg { width: 11px; height: 11px; fill: none; stroke: var(--cmp-rain); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmpRainBar {
  display: block; height: 5px; border-radius: 99px;
  background: rgba(120, 190, 230, .13);
  overflow: hidden;
}
.cmpRainBar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #4fb8e8, #8fe0ff);
  box-shadow: 0 0 8px -1px rgba(99, 200, 245, .8);
  transition: width .3s ease;
}

.cmpDayWind, .cmpHourWind {
  display: flex; align-items: center; gap: 5px;
  margin: 0; font-size: 10px; color: var(--cmp-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cmpWindArrow {
  display: inline-flex; flex: none;
  transform: rotate(var(--rot, 0deg));
  color: var(--cmp-a);
}
.cmpRailPanel--b .cmpWindArrow { color: var(--cmp-b); }
.cmpWindArrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmpWindTxt b { color: var(--cmp-txt); font-weight: 600; }

/* alertas en la tarjeta */
.cmpAlerts { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.cmpAlert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  color: #08141d;
  background: var(--al, #ffd166);
  border: 1px solid color-mix(in srgb, var(--al, #ffd166) 70%, #000);
  box-shadow: 0 0 14px -4px var(--al);
  cursor: pointer; text-align: left;
  transition: transform .16s, filter .16s;
}
.cmpAlert:hover { transform: translateY(-1px); filter: brightness(1.12); }
.cmpAlert i { width: 6px; height: 6px; border-radius: 50%; background: #08141d; flex: none; opacity: .75; }

/* puntos de alerta (tarjetas de hora): columna en el lateral */
.cmpAlerts--dots {
  position: absolute; right: 7px; top: 30px;
  flex-direction: column; flex-wrap: nowrap; gap: 4px;
  margin: 0;
}
.cmpDots { display: inline-flex; align-items: center; gap: 4px; }
.cmpDot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--al) 65%, #000);
  background: var(--al);
  box-shadow: 0 0 10px -1px var(--al);
  cursor: pointer;
}

.cmpDay.has-alert {
  border-color: var(--al, #ffd166);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al, #ffd166) 45%, transparent),
              0 0 18px -8px var(--al, #ffd166);
}
.cmpDay.is-today {
  border-color: rgba(80, 216, 243, .6);
  background: linear-gradient(180deg, rgba(26, 76, 100, .62), rgba(8, 26, 40, .7));
  box-shadow: 0 0 0 1px rgba(80, 216, 243, .28), 0 0 26px -8px rgba(80, 216, 243, .55);
}
.cmpRailPanel--b .cmpDay.is-today {
  border-color: rgba(190, 160, 255, .55);
  background: linear-gradient(180deg, rgba(62, 46, 108, .6), rgba(14, 18, 36, .7));
  box-shadow: 0 0 0 1px rgba(190, 160, 255, .22), 0 0 26px -8px rgba(169, 144, 255, .5);
}

/* ---------- variantes de tarjeta ---------- */
.cmpHorasTrack { min-height: 210px; }

.cmpDay--hour {
  flex: 0 0 136px; width: 136px; min-width: 136px;
}
.cmpDay--hour .cmpDayIcon .mm { width: 44px; height: 44px; }
.cmpDay--hour .cmpDayTemps b { font-size: 17px; }

.cmpDay--tiny {
  flex: none; width: auto; min-width: 0;
  padding: 8px 9px 9px;
}
.cmpDay--tiny .cmpDayIcon .mm { width: 36px; height: 36px; }
.cmpDay--tiny .cmpDayTemps b { font-size: 14px; }
.cmpDay--tiny .cmpDayTop { justify-content: flex-start; }
.cmpDay--tiny .cmpDayText { font-size: 9.5px; }
.cmpDay--tiny .cmpRainTxt,
.cmpDay--tiny .cmpDayWind { font-size: 9px; }
.cmpDay--tiny .cmpDayWind .cmpWindTxt b { font-weight: 700; }

.cmpHour {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 118px; width: 118px; min-width: 118px;
  padding: 9px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(210, 240, 248, .1);
  background: linear-gradient(180deg, rgba(18, 50, 70, .42), rgba(7, 22, 33, .5));
  scroll-snap-align: start;
  transition: transform .18s, border-color .18s, background .18s;
}
.cmpHour:hover { transform: translateY(-2px); border-color: rgba(150, 210, 250, .38); }

.cmpHourTop { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cmpHourDate { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--cmp-dim); }
.cmpHourTime { font-size: 13px; font-weight: 700; color: #eaf7ff; font-variant-numeric: tabular-nums; }
.cmpHourIcon { display: flex; justify-content: center; padding: 2px 0 1px; }
.cmpHourIcon .wx { width: 36px; height: 36px; }
.cmpHourTemp { margin: 0; font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cmpHourDesc { margin: 0; font-size: 10px; line-height: 1.3; color: var(--cmp-txt); }

/* ---------- bloque inferior ---------- */
.cmpBottom { display: grid; grid-template-columns: 1.02fr 1.25fr .92fr; gap: 12px; margin-top: 12px; }

.cmpMini { padding: 9px 12px 10px; display: flex; flex-direction: column; min-width: 0; }
.cmpMiniHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.cmpMiniHead h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--cmp-txt); }
.cmpMiniHead h3 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--cmp-a); }
.cmpMiniHead h3 .cmpUnit { color: var(--cmp-dim); font-weight: 500; }
.cmpMiniHead h3 .cmpBulb { color: var(--cmp-sun); }

.cmpMiniBody { flex: 1; min-height: 0; min-width: 0; position: relative; }
.cmpMiniChart { width: 100%; height: 118px; }
.cmpMiniChart text { fill: var(--cmp-dim); font-size: 8.5px; font-family: inherit; }

.cmpWindGrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: 100%; min-width: 0; max-width: 100%; min-height: 96px; }
.cmpWindCol { display: grid; grid-template-rows: auto auto auto; justify-items: center; align-items: center; align-content: space-between; gap: 3px; }
.cmpWindPair { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.cmpWindPair .cmpWindArrow svg { width: 13px; height: 13px; }
.cmpWindVal { font-size: 8.5px; line-height: 1; color: #9fdcf8; font-variant-numeric: tabular-nums; }
.cmpWindVal--b { color: #c9b8ff; }
.cmpWindArrow--b { color: var(--cmp-b) !important; }
.cmpWindDate { font-size: 8.5px; color: var(--cmp-dim); align-self: end; }

.cmpSummaryList { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.cmpSummaryList li { position: relative; padding-left: 16px; font-size: 11px; line-height: 1.55; color: var(--cmp-txt); }
.cmpSummaryList li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px -2px var(--c); }

.cmpEmpty { padding: 18px; text-align: center; color: var(--cmp-muted); font-size: 12px; }

/* ---------- diálogos ---------- */
.cmpDialog {
  width: min(1240px, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 1px solid rgba(126, 182, 224, .24);
  border-radius: 18px;
  background: linear-gradient(180deg, #0b2033, #071523);
  color: var(--cmp-txt);
  box-shadow: 0 50px 90px -30px #000;
}
.cmpDialog::backdrop { background: rgba(2, 8, 14, .76); backdrop-filter: blur(6px); }

.cmpDialogHead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 18px 10px;
}
.cmpDialogHead h3 { margin: 0; font-size: 17px; font-weight: 700; color: #eaf7ff; }
.cmpDialogSub { margin: 3px 0 0; font-size: 11px; color: var(--cmp-muted); letter-spacing: .02em; }
.cmpDialogHeadRow { display: flex; align-items: center; gap: 12px; }
.cmpDialogIcon .wx { width: 46px; height: 46px; }
.cmpDialogBody { padding: 0 18px 18px; overflow: auto; max-height: 72vh; }
.cmpDialogClose {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(140, 200, 240, .28);
  background: rgba(255, 255, 255, .04); color: #d5eeff;
}
.cmpDialogClose:hover { background: rgba(255, 255, 255, .1); }
.cmpDialogClose svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cmpModalStats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cmpModalStat { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(210, 240, 248, .1); }
.cmpModalStat small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cmp-dim); }
.cmpModalStat b { display: block; font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cmpModalText { margin: 0 0 10px; font-size: 12px; color: var(--cmp-muted); }

.cmpModalSub { margin: 14px 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--cmp-muted); font-weight: 700; }
.cmpModalHours { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }


.cmpModalAlerts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.cmpAlert--lg { padding: 8px 10px; border-radius: 10px; font-size: 11px; gap: 8px; flex-wrap: wrap; }
.cmpAlert--lg b { font-size: 12px; }
.cmpAlert--lg span { font-weight: 500; opacity: .85; }
.cmpNoAlerts { margin: 8px 0 0; font-size: 11px; color: var(--cmp-dim); }

.cmpAlertDialog { width: min(560px, 94vw); }
.cmpAlertLevel {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  color: #0b1620; background: var(--al, #ffd166);
}
.cmpAlertDesc { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--cmp-txt); }
.cmpAlertSim { margin: 14px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 10.5px; line-height: 1.5; color: var(--cmp-dim); background: rgba(255, 255, 255, .04); border: 1px dashed rgba(210, 240, 248, .18); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .cmpHero { grid-template-columns: 1fr 1fr; }
  .cmpVerdict { grid-column: 1 / -1; order: 3; }
  .cmpMetrics { max-width: 760px; margin: 0 auto; }
  .cmpBottom { grid-template-columns: 1fr 1fr; }
  .cmpSummary { grid-column: 1 / -1; }
  .cmpSummaryList { grid-template-columns: 1fr 1fr; gap: 7px 20px; }
  .cmpModalStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cmpSvg { height: 260px; }
  .cmpHero { grid-template-columns: 1fr; gap: 12px; }
  .cmpMetrics { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .cmpVerdict { text-align: left; }
  .cmpVerdict h4 { text-align: center; }
  .cmpRailPanel { grid-template-columns: 118px minmax(0, 1fr); }
  .cmpBottom { grid-template-columns: 1fr; }
  .cmpSummaryList { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cmp { margin-top: 20px; padding: 16px 12px; border-radius: 20px; }
  .cmpHead b { font-size: 18px; }
  .cmpHead small { font-size: 9.5px; letter-spacing: 1.2px; line-height: 1.5; }

  .cmpChartHead { gap: 8px; }
  .cmpTabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .cmpTab { flex: none; padding: 6px 11px; font-size: 12px; }
  .cmpLegend { font-size: 9.5px; gap: 11px; }
  .cmpSvg { height: 230px; }
  .cmpExpand { display: none; }

  .cmpRailPanel { grid-template-columns: 1fr; }
  .cmpBadge { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 12px; text-align: left; }
  .cmpBadge .cmpFlag { width: 30px; height: 30px; margin: 0; }
  .cmpBadge p { display: none; }
  .cmpBadge .cmpBtnGhost { margin: 0 0 0 auto; }
  .cmpRailBtn { display: none; }

  .cmpDay { flex-basis: 138px; width: 138px; min-width: 138px; }
  .cmpDay--hour { flex-basis: 128px; width: 128px; min-width: 128px; }
  .cmpMiniChart { height: 108px; }
  .cmpNavBtn { display: none; }

  .cmpDialog { width: 94vw; }
  .cmpDialogHead { padding: 14px 14px 8px; }
  .cmpDialogBody { padding: 0 14px 14px; }
  .cmpModalStats { grid-template-columns: 1fr 1fr; }
  .cmpModalHours { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ============================================================
   TEMA CLARO
   ============================================================ */
body.tema-claro .cmp {
  --cmp-a: #0e93b8;
  --cmp-b: #6f4fd0;
  --cmp-sun: #c47f00;
  --cmp-green: #0e9e6a;
  --cmp-pink: #d6336c;
  --cmp-txt: #12242e;
  --cmp-muted: #5a7080;
  --cmp-dim: #7b8f9b;
  --cmp-line: #d0dce5;
  --cmp-line-soft: #e0e8ee;
  --cmp-inner: #f8fafc;
  --cmp-grid: rgba(30, 60, 80, .1);
  --cmp-grid-v: rgba(30, 60, 80, .06);
  --cmp-axis: #7b8f9b;
  --cmp-dot: #ffffff;
  --cmp-tip-bg: #ffffff;
  --cmp-rain: #0e93b8;

  background: #ffffff;
  border-color: #d0dce5;
  box-shadow: 0 10px 30px #0a1a2410;
}
body.tema-claro .cmpHead b { color: #0a1a24; }
body.tema-claro .cmpHead small { color: #5a7080; }
body.tema-claro .cmpModel { background: linear-gradient(135deg, #eef8fc, #ffffff); border-color: #b9dbe8; }
body.tema-claro .cmpModel--b { background: linear-gradient(135deg, #f2edfd, #ffffff); border-color: #d5c8f5; }
body.tema-claro .cmpModelId h3 { color: #0a1a24; }
body.tema-claro .cmpUpdated { border-top-color: #e0e8ee; color: #5a7080; }
body.tema-claro .cmpUpdated span { color: #1a3040; }
body.tema-claro .cmpPanel { background: #f8fafc; border-color: #e0e8ee; }
body.tema-claro .cmpTab { color: #5a7080; }
body.tema-claro .cmpTab:hover { background: #eef4f8; color: #0a1a24; }
body.tema-claro .cmpTab.is-active { color: #06303f; background: linear-gradient(180deg, #d8f2fb, #bfe9f7); border-color: #7fd0e8; }
body.tema-claro .cmpTab.is-active svg { color: #0e93b8; }
body.tema-claro .cmpBadge { background: #f0f8fb; border-color: #cfe5ee; }
body.tema-claro .cmpRailPanel--b .cmpBadge { background: #f4f0fd; border-color: #ddd3f6; }
body.tema-claro .cmpBadge h3 { color: #0a1a24; }
body.tema-claro .cmpBtnGhost { border-color: #cfe0ea; background: #ffffff; color: #1a3040; }
body.tema-claro .cmpBtnGhost:hover { background: #f0f6fa; }

body.tema-claro .cmpDay { background: #ffffff; border-color: #e2eaf0; }
body.tema-claro .cmpRailPanel--b .cmpDay { background: #ffffff; border-color: #e8e2f5; }
body.tema-claro .cmpDayDate,
body.tema-claro .cmpDayTemps b,
body.tema-claro .cmpHourTemp,
body.tema-claro .cmpHourTime { color: #0a1a24; }
body.tema-claro .cmpDayText,
body.tema-claro .cmpHourDesc { color: #1a3040; }
body.tema-claro .cmpDayWind,
body.tema-claro .cmpHourWind,
body.tema-claro .cmpRainTxt { color: #5a7080; }
body.tema-claro .cmpWindTxt b { color: #1a3040; }
body.tema-claro .cmpDay.is-today { background: #eef9fd; border-color: #7fd0e8; box-shadow: 0 0 0 1px #b7e6f4, 0 8px 20px -12px #0e93b8; }
body.tema-claro .cmpRailPanel--b .cmpDay.is-today { background: #f5f1fe; border-color: #b9a4ee; box-shadow: 0 0 0 1px #d5c8f5, 0 8px 20px -12px #6f4fd0; }
body.tema-claro .cmpHour { background: #ffffff; border-color: #e2eaf0; }
body.tema-claro .cmpScrollbar { background: #e8eef3; border-color: #dbe5ec; }
body.tema-claro .cmpRailBtn,
body.tema-claro .cmpNavBtn,
body.tema-claro .cmpExpand { background: #ffffff; border-color: #cfe0ea; color: #1a3040; }
body.tema-claro .cmpMiniHead h3 { color: #0a1a24; }
body.tema-claro .cmpSummaryList li { color: #1a3040; }
body.tema-claro .cmpAlert { background: rgba(10, 30, 45, .04); }

body.tema-claro .cmpDialog { background: #ffffff; border-color: #d0dce5; color: #12242e; }
body.tema-claro .cmpDialogHead h3 { color: #0a1a24; }
body.tema-claro .cmpDialogClose { border-color: #cfe0ea; background: #f8fafc; color: #1a3040; }
body.tema-claro .cmpModalStat { background: #f6f9fb; border-color: #e2eaf0; }
body.tema-claro .cmpModalStat b { color: #0a1a24; }
body.tema-claro .cmpModalText { color: #5a7080; }
body.tema-claro .cmpAlertSim { background: #f6f9fb; border-color: #dbe5ec; color: #5a7080; }

/* contraste de iconos en tema claro */
body.tema-claro .wx-cloud { fill: #b7cfe0; filter: drop-shadow(0 1px 1.5px rgba(20, 50, 70, .28)); }
body.tema-claro .wx-drop { stroke: #2f9de0; }
body.tema-claro .wx-flake path { stroke: #6aa8cc; }
body.tema-claro .wx-fog path { stroke: #8aa3b3; }
body.tema-claro .wx-rays path { stroke: #e0a21f; }




/* bloque fuera de pantalla (contenedores heredados que el JS del sitio necesita) */
.cmp-off {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1200px !important;
  height: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- modelos compactos ---------- */
.cmpModel--mini {
  padding: 7px 10px;
  border-radius: 12px;
}
.cmpModel--mini .cmpModelHead { gap: 8px; }
.cmpModel--mini .cmpFlag { width: 22px; height: 22px; }
.cmpModel--mini .cmpModelId h3 { font-size: 12px; }
.cmpModel--mini .cmpModelId p { font-size: 9.5px; }
.cmpModel--mini .cmpMore { width: 18px; height: 18px; }
.cmpModel--mini .cmpMore svg { width: 12px; height: 12px; }
.cmpModel--mini .cmpUpdated {
  margin-top: 5px; padding-top: 4px;
  font-size: 9px; line-height: 1.3;
}
.cmpModel--mini .cmpUpdated span { font-size: 9px; }

/* ---------- tira de cabecera de cada previsión ---------- */
.cmpRailPanel {
  display: block;
  padding: 6px 8px 8px;
}
.cmpRailHead {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--cmp-line-soft);
}
.cmpRailHead .cmpFlag { width: 20px; height: 20px; }
.cmpRailHead b { font-size: 12px; font-weight: 800; letter-spacing: .01em; color: var(--cmp-txt); }
.cmpRailSub { font-size: 10px; color: var(--cmp-muted); }
.cmpRailHead .cmpBtnGhost { margin: 0 0 0 auto; padding: 4px 10px; font-size: 9.5px; }
.cmpRailPanel--b .cmpRailHead b { color: #e6dcff; }

body.tema-claro .cmpRailHead { border-bottom-color: #e0e8ee; }
body.tema-claro .cmpRailHead b { color: #0a1a24; }

/* ============================================================
   CICLO DEL DÍA · rediseño
   ============================================================ */
.solarVisual {
  position: relative;
  overflow: hidden;
  margin: 28px 0 0;
  padding: 22px 24px 18px;
  border-radius: 24px;
  border: 1px solid rgba(210, 240, 248, .12);
  background:
    radial-gradient(120% 100% at 78% -20%, rgba(255, 176, 80, .2), transparent 58%),
    radial-gradient(90% 80% at 10% 0%, rgba(90, 130, 255, .14), transparent 60%),
    linear-gradient(145deg, rgba(16, 43, 57, .86), rgba(6, 19, 29, .92));
  box-shadow: 0 20px 60px #00000028;
}
.solarVisual::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 120%, rgba(255, 200, 120, .12), transparent 70%);
  pointer-events: none;
}

.solarVisualHead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.solarVisualHead b {
  font-size: 22px; letter-spacing: -.5px; color: #e8f4f8;
  display: flex; align-items: center; gap: 8px;
}
.solarVisualHead small {
  display: block; margin-top: 4px;
  color: #9db4bd; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
.moonPhase {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(160, 180, 255, .28);
  background: rgba(120, 140, 255, .1);
  color: #dfe6ff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.moonPhase span { font-size: 15px; color: #cfd8ff; filter: drop-shadow(0 0 8px rgba(160, 180, 255, .8)); }
.moonPhase b { font-size: 10px; letter-spacing: .14em; }

.solarSelect { margin: 4px 0 16px; }
.solarSelect label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9db4bd;
}
.solarSelect input {
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(210, 240, 248, .14);
  background: rgba(6, 20, 32, .6); color: #eaf7ff;
  font-size: 12px; min-width: 240px;
}
.solarSelect input:focus { outline: none; border-color: rgba(80, 216, 243, .6); }

/* pista del sol */
.solarVisualTrack {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 14px;
}
.solarNight {
  width: 46px; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(70, 90, 160, .15), rgba(50, 60, 120, .55));
  flex: none;
}
.solarNight.dusk { background: linear-gradient(90deg, rgba(120, 70, 130, .55), rgba(60, 50, 110, .15)); }

.solarLight {
  position: relative;
  flex: 1;
  height: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2d2a63 0%, #b56a3c 18%, #ffb347 42%, #ffd166 58%, #ffbd59 76%, #7a3f5f 100%);
  box-shadow: 0 0 30px -6px rgba(255, 180, 90, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.solarOrb {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc247 55%, #ff9d2e);
  color: #6b4a00;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, .16), 0 0 30px rgba(255, 190, 80, .9);
  animation: solarPulse 3.4s ease-in-out infinite;
  z-index: 2;
}
.solarOrb::before {
  content: "";
  position: absolute; inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255, 210, 120, .55) 12deg 18deg, transparent 18deg 40deg);
  animation: solarSpin 18s linear infinite;
  opacity: .8;
}
.solarOrb span { font-size: 18px; line-height: 1; }
.solarOrb small {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .1em; color: #ffd9a0; white-space: nowrap;
  background: rgba(6, 20, 32, .75); padding: 2px 7px; border-radius: 99px;
  border: 1px solid rgba(255, 200, 120, .3);
}
.solarOrb.moon {
  background: radial-gradient(circle at 35% 30%, #f2f4ff, #c9d2ff 55%, #8f9bff);
  box-shadow: 0 0 0 6px rgba(160, 180, 255, .14), 0 0 26px rgba(150, 170, 255, .8);
}
.solarOrb.moon small { color: #d8e0ff; border-color: rgba(160, 180, 255, .35); background: rgba(10, 14, 34, .8); }

.solarPeak {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: rgba(255, 210, 120, .55);
}

@keyframes solarPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 209, 102, .14), 0 0 24px rgba(255, 190, 80, .8); }
  50% { box-shadow: 0 0 0 9px rgba(255, 209, 102, .08), 0 0 40px rgba(255, 190, 80, 1); }
}
@keyframes solarSpin { to { transform: rotate(360deg); } }

/* horas */
.solarLabels {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 26px;
}
.solarLabels > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1px solid rgba(210, 240, 248, .1);
  background: linear-gradient(160deg, rgba(10, 28, 42, .75), rgba(6, 18, 28, .7));
}
.solarLabels b { font-size: 19px; font-weight: 800; color: #eaf7ff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.solarLabels small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #8ba4b0; }
.solarLabels .solarMid { border-color: rgba(255, 200, 110, .38); background: rgba(255, 209, 102, .07); }
.solarLabels .solarMid b { color: #ffd9a0; }

.solarScale {
  display: flex; justify-content: space-between; gap: 6px;
  margin-top: 12px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #7f9aa6;
}
.solarScale span {
  padding: 4px 9px; border-radius: 99px;
  border: 1px solid rgba(210, 240, 248, .08);
  background: rgba(255, 255, 255, .02);
}
.solarDuracion {
  margin-top: 12px;
  font-size: 11px; color: #9db4bd;
}
.solarDuracion b { color: #eaf7ff; }

/* tema claro */
body.tema-claro .solarVisual {
  background:
    radial-gradient(120% 100% at 78% -20%, #ffe9c9, transparent 58%),
    linear-gradient(145deg, #ffffff, #f4f8fb);
  border-color: #d0dce5;
  box-shadow: 0 10px 30px #0a1a2410;
}
body.tema-claro .solarVisualHead b { color: #0a1a24; }
body.tema-claro .moonPhase { border-color: #d5d9f5; background: #eef0fd; color: #3a3f66; }
body.tema-claro .solarLabels > span { background: #f8fafc; border-color: #e2eaf0; }
body.tema-claro .solarLabels b { color: #0a1a24; }
body.tema-claro .solarLabels small { color: #5a7080; }
body.tema-claro .solarScale span { border-color: #e2eaf0; color: #6b8291; }
body.tema-claro .solarDuracion { color: #5a7080; }
body.tema-claro .solarDuracion b { color: #1a3040; }
body.tema-claro .solarOrb small { background: #ffffff; color: #7a5200; border-color: #ffd9a0; }

@media (max-width: 700px) {
  .solarVisual { padding: 16px 12px; border-radius: 20px; }
  .solarVisualHead b { font-size: 18px; }
  .solarLabels { grid-template-columns: 1fr; gap: 6px; margin-top: 22px; }
  .solarLabels > span { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 8px 11px; }
  .solarScale { font-size: 8px; }
  .solarOrb { width: 32px; height: 32px; }
  .solarSelect input { min-width: 0; width: 100%; }
}

/* refuerzo de especificidad: el sitio tiene estilos sueltos en el body */
.solarVisual .solarLabels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 26px;
}
.solarVisual .solarLabels > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1px solid rgba(210, 240, 248, .1);
  background: linear-gradient(160deg, rgba(10, 28, 42, .75), rgba(6, 18, 28, .7));
}
.solarVisual .solarLabels b { font-size: 19px; }
.solarVisual .solarLabels small { font-size: 9px; letter-spacing: .14em; }
.solarVisual .solarLight { flex: 1; height: 14px; border-radius: 99px; }
.solarVisual .solarVisualTrack { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; }
.solarVisual .solarScale {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f9aa6;
}
.solarVisual .solarDuracion { margin-top: 12px; font-size: 11px; color: #9db4bd; }

body.tema-claro .solarVisual .solarLabels > span { background: #f8fafc; border-color: #e2eaf0; }
body.tema-claro .solarVisual .solarLabels b { color: #0a1a24; }
body.tema-claro .solarVisual .solarLabels small { color: #5a7080; }

@media (max-width: 700px) {
  .solarVisual .solarLabels { grid-template-columns: 1fr; gap: 6px; }
  .solarVisual .solarLabels > span { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* fuera el modal de evolución que salta al volver de enlaces externos */
#evoModal { display: none !important; }

/* cámara: marco más alto para reducir las bandas negras */
.camera { height: 660px !important; }
@media (max-width: 900px) { .camera { height: 420px !important; } }

/* ciclo del día: más vida */
.solarVisual { overflow: hidden; }
.solarVisual::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background:
    radial-gradient(38% 42% at 70% 22%, rgba(255, 190, 90, .22), transparent 60%),
    radial-gradient(30% 30% at 18% 8%, rgba(90, 130, 255, .18), transparent 65%);
  animation: solarSky 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes solarSky {
  from { transform: translateX(-2%) scale(1); opacity: .75; }
  to   { transform: translateX(2%) scale(1.06); opacity: 1; }
}
.solarVisual .solarLight {
  height: 18px;
  background-size: 220% 100%;
  animation: solarFlow 16s linear infinite;
}
@keyframes solarFlow { to { background-position: -220% 0; } }
.solarVisual .solarOrb { width: 46px; height: 46px; }
.solarVisual .solarOrb::after {
  content: ""; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 205, 110, .45), transparent 70%);
  animation: solarHalo 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes solarHalo {
  0%, 100% { transform: scale(.85); opacity: .5; }
  50% { transform: scale(1.15); opacity: .95; }
}
.solarVisual .solarLabels > span { transition: transform .25s, border-color .25s; }
.solarVisual .solarLabels > span:hover { transform: translateY(-2px); border-color: rgba(255, 215, 140, .45); }

/* ===== Ciclo del día: arco solar ===== */
.solarVisual { padding-bottom: 12px; }
.solarVisual .solarVisualTrack {
  position: relative;
  padding-top: 96px;
  margin-top: 6px;
}
.solarVisual .solarVisualTrack::before {
  content: "";
  position: absolute; left: 4%; right: 4%; top: 0; height: 190px;
  border: 1px dashed rgba(255, 210, 140, .28);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.solarVisual .solarVisualTrack::after {
  content: "";
  position: absolute; left: 4%; right: 4%; top: 0; height: 190px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 190, 90, .12), transparent 70%);
  pointer-events: none;
}
.solarVisual .solarLabels b { font-size: 26px; letter-spacing: -.03em; }
.solarVisual .solarLabels small { font-size: 10px; }
.solarVisual .solarLabels > span { padding: 12px 15px; }
.solarVisual .moonPhase { backdrop-filter: blur(6px); }

/* el sol/luna sube por el arco según su posición */
.solarVisual .solarOrb {
  transform: translate(-50%, calc(-50% - var(--lift, 0px))) !important;
  transition: left .7s linear, transform .7s linear;
}

/* buscador de localidad integrado en el ciclo del día */
.solarVisual .solarSelect {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: -10px 0 6px;
}
.solarVisual .solarSelect > label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 34px;
  border-radius: 999px;
  border: 1px solid rgba(210, 240, 248, .16);
  background: rgba(8, 22, 35, .6);
  color: #9db4bd;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  position: relative;
  backdrop-filter: blur(6px);
}
.solarVisual .solarSelect > label::before {
  content: "📍";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .8;
}
.solarVisual .solarSelect input {
  min-width: 210px;
  padding: 2px 0;
  border: 0; background: transparent;
  color: #eaf7ff; font-size: 12px; letter-spacing: 0;
  text-transform: none;
}
.solarVisual .solarSelect input:focus { outline: none; }
.solarVisual .solarResultados {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 270px; z-index: 30;
  border-radius: 12px;
  border: 1px solid rgba(126, 182, 224, .28);
  background: #071b28;
  box-shadow: 0 24px 40px -18px #000;
  overflow: hidden;
}
.solarVisual .solarResultados:empty { display: none; }
.solarVisual .solarResultados > * {
  display: block; padding: 9px 12px;
  font-size: 12px; color: #dceffb; cursor: pointer;
  border-bottom: 1px solid rgba(210, 240, 248, .07);
}
.solarVisual .solarResultados > *:hover { background: rgba(80, 216, 243, .12); }

body.tema-claro .solarVisual .solarSelect > label { background: #fff; border-color: #d0dce5; color: #5a7080; }
body.tema-claro .solarVisual .solarSelect input { color: #0a1a24; }
body.tema-claro .solarVisual .solarResultados { background: #fff; border-color: #d0dce5; }
body.tema-claro .solarVisual .solarResultados > * { color: #1a3040; }

@media (max-width: 700px) {
  .solarVisual .solarSelect { justify-content: stretch; }
  .solarVisual .solarSelect > label { width: 100%; }
  .solarVisual .solarSelect input { min-width: 0; width: 100%; }
  .solarVisual .solarResultados { width: 100%; }
}

/* pestañas de avisos / mis alertas */
.alertasTabs {
  display: flex; gap: 6px;
  margin: 28px 0 0;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(210, 240, 248, .12);
  background: rgba(8, 22, 35, .5);
  width: fit-content;
}
.alertasTabs .cmpTab { padding: 8px 16px; }
body.tema-claro .alertasTabs { background: #f4f8fb; border-color: #d0dce5; }

/* buscador: pastilla compacta (oculta la etiqueta de texto) */
.solarVisual .solarSelect > label { font-size: 0 !important; gap: 0 !important; padding: 6px 14px 6px 30px !important; }
.solarVisual .solarSelect input { font-size: 12px !important; }
.solarVisual .solarVisualTrack { padding-top: 62px !important; }
.solarVisual .solarVisualTrack::before,
.solarVisual .solarVisualTrack::after { height: 150px !important; }

/* quitar la caja vacía del selector */
.solarVisual .solarSelect {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

/* arco limpio, sin guiones ni emojis */
.solarVisual .solarVisualTrack::before {
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 205, 130, .22) 18%, rgba(255, 215, 150, .3) 50%, rgba(255, 205, 130, .22) 82%, transparent);
  height: 2px !important;
  top: 148px !important;
  border-radius: 2px;
  box-shadow: 0 0 26px 2px rgba(255, 190, 110, .18);
}
.solarVisual .solarSelect > label::before { content: none !important; }
.solarVisual .solarSelect > label { padding-left: 14px !important; }
.solarVisual .solarScale span { background: transparent !important; border: 0 !important; color: #7f9aa6 !important; }

/* ===== Ciclo del día (nuevo) ===== */
.solarVisual { position: relative; overflow: hidden; }
.solarVisual .solarTop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.solarVisual .solarTitles b { display: block; font-size: 22px; letter-spacing: -.5px; color: #e8f4f8; }
.solarVisual .solarTitles small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 2px; color: #9db4bd; text-transform: uppercase; }
.solarVisual .solarRight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.solarVisual .solarSelect { position: relative; }
.solarVisual .solarSelect input {
  width: 210px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(210, 240, 248, .16); background: rgba(8, 22, 35, .6);
  color: #eaf7ff; font-size: 12px;
}
.solarVisual .solarSelect input:focus { outline: none; border-color: rgba(80, 216, 243, .6); }
.solarVisual .solarResultados {
  position: absolute; top: calc(100% + 6px); right: 0; width: 250px; z-index: 40;
  border-radius: 12px; border: 1px solid rgba(126, 182, 224, .28);
  background: #071b28; box-shadow: 0 24px 40px -18px #000; overflow: hidden;
}
.solarVisual .solarResultados:empty { display: none; }
.solarVisual .solarResultados > * { display: block; padding: 9px 12px; font-size: 12px; color: #dceffb; cursor: pointer; border-bottom: 1px solid rgba(210, 240, 248, .07); }
.solarVisual .solarResultados > *:hover { background: rgba(80, 216, 243, .12); }

.solarVisual .solarScene { position: relative; height: 290px; margin-top: 4px; border-radius: 18px; overflow: hidden; }
.solarVisual .solarArt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.solarVisual .solarOrbWrap { position: absolute; inset: 0; }
.solarVisual .solarOrb {
  position: absolute; top: calc(93.5% - var(--lift, 0px)); left: 50%;
  width: 46px; height: 46px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(circle at 34% 30%, #fff4cc, #ffc247 55%, #ff9a2e) !important;
  box-shadow: 0 0 0 8px rgba(255, 209, 102, .12), 0 0 44px rgba(255, 190, 80, .85) !important;
  transition: left .7s linear, top .7s linear;
  display: grid; place-items: center;
}
.solarVisual .solarOrb span { display: none; }
.solarVisual .solarOrb small {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; letter-spacing: .1em; color: #ffe1b0; white-space: nowrap;
  background: rgba(5, 16, 26, .82); padding: 3px 8px; border-radius: 99px;
  border: 1px solid rgba(255, 200, 120, .32);
}

.solarVisual .solarTimes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: -26px; position: relative; z-index: 2; padding: 0 6px; }
.solarVisual .solarTimes > div { display: flex; flex-direction: column; gap: 2px; }
.solarVisual .solarTimes > div:nth-child(2) { align-items: center; }
.solarVisual .solarTimes > div:nth-child(3) { align-items: flex-end; }
.solarVisual .solarTimes b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.solarVisual .solarTimes .solarMid b { color: #ffd9a0; }
.solarVisual .solarTimes small { font-size: 9.5px; letter-spacing: .16em; color: #8ba4b0; text-transform: uppercase; }

.solarVisual .solarFoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; color: #9db4bd; }
.solarVisual .solarFoot b { color: #eaf7ff; }

@media (max-width: 700px) {
  .solarVisual .solarScene { height: 230px; }
  .solarVisual .solarSelect input { width: 100%; }
  .solarVisual .solarTimes b { font-size: 20px; }
}

/* posición exacta del astro dentro de la escena */
.solarVisual .solarOrbWrap { position: absolute; left: 0; top: 0; width: 100%; height: 290px; }
.solarVisual .solarOrb { top: calc(271px - var(--lift, 0px)) !important; }
@media (max-width: 700px) {
  .solarVisual .solarOrbWrap { height: 230px; }
  .solarVisual .solarOrb { top: calc(215px - var(--lift, 0px)) !important; }
}

.solarVisual .solarOrbWrap { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 290px !important; z-index: 3; }
.solarVisual .solarOrb { z-index: 4 !important; }

.solarVisual .solarScene { position: relative; }

/* pestañas de avisos: solo una sección visible, pase lo que pase */
body[data-alertas-tab="mis-avisos"] #mis-alertas { display: none !important; }
body[data-alertas-tab="mis-alertas"] #mis-avisos { display: none !important; }

/* el astro antiguo queda siempre oculto */
.solarVisual .solarOrb { display: none !important; }

/* sol del ciclo: rayos girando y núcleo que late, como los de arriba */
.solarVisual .sunRays {
  stroke: #ffd98a; stroke-width: 3; stroke-linecap: round; fill: none;
  transform-box: fill-box; transform-origin: center;
  animation: solarSpin 16s linear infinite, sunTwinkle 3.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 90, .7));
}
.solarVisual .sunCore {
  transform-box: fill-box; transform-origin: center;
  animation: sunCorePulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 190, 80, .95));
}
.solarVisual .sunHalo { animation: sunHaloPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sunCorePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes sunHaloPulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes sunTwinkle {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

.solarVisual .solarStars circle { fill: #dfe9ff; opacity: .55; animation: sunTwinkle 4s ease-in-out infinite; }
.solarVisual .solarStars circle:nth-child(2n) { animation-delay: 1.2s; }
.solarVisual .solarStars circle:nth-child(3n) { animation-delay: 2.1s; }
.solarVisual .solarMoon { opacity: 0; transition: opacity .6s; }
.solarVisual.night .solarMoon { opacity: 1; }
.solarVisual.night .solarStars circle { opacity: .95; }

/* ===== Ciclo del día: dial circular ===== */
.solarVisual .solarDial { position: relative; width: min(460px, 100%); margin: 8px auto 0; aspect-ratio: 1; }
.solarVisual .dialSvg { width: 100%; height: 100%; display: block; overflow: visible; }
.solarVisual .dialBase { fill: none; stroke: rgba(150, 190, 230, .12); stroke-width: 3; }
.solarVisual .dialDayArc { fill: none; stroke: url(#dialDay); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(255, 190, 90, .55)); }
.solarVisual .dialNightArc { fill: none; stroke: rgba(110, 140, 220, .35); stroke-width: 5; stroke-dasharray: 2 9; }
.solarVisual .dialDur { fill: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.solarVisual .dialDurLbl { fill: #8ba4b0; font-size: 8px; letter-spacing: 2px; }
.solarVisual .dialRays { stroke: #ffdc9a; stroke-width: 2.6; stroke-linecap: round; fill: none; transform-box: fill-box; transform-origin: center; animation: solarSpin 18s linear infinite; }
.solarVisual .dialCore { transform-box: fill-box; transform-origin: center; animation: sunCorePulse 3.2s ease-in-out infinite; }
.solarVisual .dialLabels { position: absolute; inset: 0; pointer-events: none; }
.solarVisual .dialLabels > span { position: absolute; display: flex; flex-direction: column; gap: 1px; }
.solarVisual .dialLabels b { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.solarVisual .dialLabels small { font-size: 8.5px; letter-spacing: .18em; color: #8ba4b0; }
.solarVisual .dOut { left: -6px; top: 50%; transform: translateY(-50%); }
.solarVisual .dSet { right: -6px; top: 50%; transform: translateY(-50%); text-align: right; }
.solarVisual .dMid { left: 50%; top: -8px; transform: translateX(-50%); text-align: center; }
.solarVisual .solarFoot { text-align: center; margin-top: 6px; font-size: 10.5px; color: #7f9aa6; }
.solarVisual.night .dialDayArc { opacity: .35; }
@media (max-width: 700px) { .solarVisual .solarDial { width: 100%; } .solarVisual .dialLabels b { font-size: 17px; } .solarVisual .dialDur { font-size: 24px; } }

/* iconos del ciclo 24h con el estilo de la web */
#ciclo24 .c24-evento .c24-ic { display: flex; justify-content: center; margin-bottom: 4px; }
#ciclo24 .c24-evento .c24-ic svg { width: 26px; height: 26px; }

#ciclo24 .c24-icono svg { width: 17px; height: 17px; display: block; }
.heroSub, #hero-sub { margin-top: 14px !important; }

/* aviso oficial sobre las tarjetas */
.heroAviso { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:8px 13px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.04em; cursor:pointer; width:fit-content; border:1px solid; animation:haGlow 2.6s ease-in-out infinite; }
.heroAviso[hidden]{display:none !important}
.heroAviso i{font-style:normal; opacity:.65; font-weight:600}
.ha-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.heroAviso[data-nivel="rojo"]{color:#ff5b52;border-color:#ff5b52;background:rgba(255,60,48,.14)}
.heroAviso[data-nivel="naranja"]{color:#ffa63d;border-color:#ffa63d;background:rgba(255,150,40,.14)}
.heroAviso[data-nivel="amarillo"]{color:#ffd60a;border-color:#ffd60a;background:rgba(255,210,10,.12)}
@keyframes haGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 22px -6px currentColor}}
.heroAvisoDlg{border:1px solid #29445c;background:#0a1a26;color:#e8f4f8;border-radius:16px;padding:18px;max-width:520px;width:92vw}
.heroAvisoDlg::backdrop{background:rgba(2,8,14,.72)}
.ha-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.18em;color:#8ba4b0;margin-bottom:12px}
.ha-head button{background:none;border:0;color:#9db4bd;font-size:16px;cursor:pointer}
.ha-item{border-left:3px solid #31546e;padding:8px 10px;margin-bottom:8px;background:rgba(255,255,255,.03);border-radius:8px;font-size:13px}
.ha-item.rojo{border-color:#ff5b52}.ha-item.naranja{border-color:#ffa63d}.ha-item.amarillo{border-color:#ffd60a}
.ha-item p{margin:6px 0 2px;font-size:12px;color:#c8dbe1}
.ha-item small{color:#7f9aa6;font-size:10px}

/* aviso alineado a la derecha, junto a la temperatura y sobre las tarjetas */
.heroFusion { position: relative; }
.heroAviso { margin: 0 4px 8px auto !important; align-self: flex-end; }

/* aviso centrado sobre la M, colores saturados que respiran */
.heroAviso {
  position: absolute !important;
  left: 50% !important;
  top: 30% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 6;
}
.heroAviso[data-nivel="rojo"] { background: #e01b1b !important; color: #fff !important; border-color: #ff8080 !important; }
.heroAviso[data-nivel="naranja"] { background: #e07a00 !important; color: #fff !important; border-color: #ffb347 !important; }
.heroAviso[data-nivel="amarillo"] { background: #d4b800 !important; color: #1a1400 !important; border-color: #ffe94d !important; }
.heroAviso { animation: haBreath 2.4s ease-in-out infinite !important; }
@keyframes haBreath {
  0%, 100% { box-shadow: 0 0 0 1px currentColor, 0 0 18px -6px currentColor; }
  50% { box-shadow: 0 0 0 1px currentColor, 0 0 46px 0 currentColor; }
}
.heroAviso .ha-dot { background: #fff !important; box-shadow: 0 0 12px #fff !important; }

/* aviso en forma de triángulo */
.heroAviso {
  width: 78px !important; height: 92px !important;
  background: none !important; border: 0 !important;
  display: flex !important; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: none !important; animation: none !important;
}
.ha-tri b { color: #fff; font-size: 22px; line-height: 1; font-weight: 900; }
.heroAviso[data-nivel="naranja"] .heroAviso[data-nivel="amarillo"] .heroAviso[data-nivel="amarillo"] .ha-tri b { color: #1a1400; }
@keyframes haTriBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 50, 50, .7)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 26px rgba(255, 50, 50, 1)); }
}

/* aviso en cuadro (más limpio que el triángulo) */
.ha-tri b { font-size: 30px !important; }
.heroAviso { gap: 6px !important; }

.heroAviso { height: auto !important; }

/* vuelta a la píldora en línea */
.heroAviso {
  width: auto !important; height: auto !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
}
.heroAviso i { font-style: normal; opacity: .7; }
.heroAviso { animation: haBreath 2.4s ease-in-out infinite !important; }

/* aviso centrado en el hueco, multilínea */
.heroAviso {
  position: absolute !important;
  left: 50% !important;
  top: 30% !important;
  transform: translate(-50%, -50%) !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  text-align: center !important;
  white-space: normal !important;
  max-width: min(680px, 78%) !important;
  line-height: 1.25 !important;
}
.heroAviso .ha-line { display: block; font-size: 11px; letter-spacing: .02em; }
.heroAviso .ha-line b { font-weight: 900; }
.heroAviso .ha-ver { display: block; margin-top: 3px; font-size: 9px; opacity: .75; letter-spacing: .14em; text-transform: uppercase; }
.heroAviso .ha-more { opacity: .8; font-style: italic; }

/* cada aviso con su raya de color */
.heroAviso .ha-line {
  display: block;
  width: 100%;
  text-align: left;
  padding: 2px 8px 2px 9px;
  border-left: 3px solid rgba(255,255,255,.35);
  border-radius: 3px;
  background: rgba(0,0,0,.12);
}
.heroAviso .ha-line.rojo { border-left-color: #ff3b30; }
.heroAviso .ha-line.naranja { border-left-color: #ff9f0a; }
.heroAviso .ha-line.amarillo { border-left-color: #ffd60a; }

/* bloque centrado con márgenes simétricos y respiración */
.heroAviso {
  left: 50% !important;
  right: auto !important;
  top: 32% !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  max-width: min(700px, calc(100% - 44px)) !important;
  padding: 9px 14px !important;
}
.heroAviso .ha-line {
  animation: haLineBreath 2.4s ease-in-out infinite;
}
@keyframes haLineBreath {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

/* cada línea con su color, no todo rojo */
.heroAviso {
  background: rgba(6, 16, 26, .92) !important;
  color: #e8f4f8 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(6px);
}
.heroAviso[data-nivel="rojo"] { border-color: #ff3b30 !important; }
.heroAviso[data-nivel="naranja"] { border-color: #ff9f0a !important; }
.heroAviso[data-nivel="amarillo"] { border-color: #ffd60a !important; }

.heroAviso .ha-line {
  width: 100% !important;
  text-align: left !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  border-left: 4px solid !important;
  font-size: 11.5px !important;
}
.heroAviso .ha-line.rojo { background: rgba(255, 59, 48, .16) !important; border-left-color: #ff3b30 !important; }
.heroAviso .ha-line.naranja { background: rgba(255, 159, 10, .16) !important; border-left-color: #ff9f0a !important; }
.heroAviso .ha-line.amarillo { background: rgba(255, 214, 10, .14) !important; border-left-color: #ffd60a !important; }
.heroAviso .ha-line.rojo b { color: #ff8a84 !important; }
.heroAviso .ha-line.naranja b { color: #ffc46a !important; }
.heroAviso .ha-line.amarillo b { color: #ffe97a !important; }
.heroAviso .ha-ver { color: #9db4bd !important; }

/* fondo neutro con la misma especificidad que los niveles */
.heroAviso[data-nivel="rojo"],
.heroAviso[data-nivel="naranja"],
.heroAviso[data-nivel="amarillo"] {
  background: rgba(6, 16, 26, .94) !important;
  color: #e8f4f8 !important;
}

/* solo las líneas, sin recuadro y con aire respecto a los cuadros */
.heroAviso,
.heroAviso[data-nivel="rojo"],
.heroAviso[data-nivel="naranja"],
.heroAviso[data-nivel="amarillo"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  top: 27% !important;
  gap: 5px !important;
}
.heroAviso .ha-line {
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 0 16px -8px currentColor;
  animation: haLineBreath 2.4s ease-in-out infinite !important;
}
.heroAviso .ha-ver { display: none !important; }

/* líneas con color sólido, sin transparencia */
.heroAviso .ha-line.rojo { background: #d81f1a !important; color: #fff !important; }
.heroAviso .ha-line.naranja { background: #e07a00 !important; color: #fff !important; }
.heroAviso .ha-line.amarillo { background: #e0c200 !important; color: #1a1400 !important; }
.heroAviso .ha-line.rojo b, .heroAviso .ha-line.naranja b { color: #fff !important; }
.heroAviso .ha-line.amarillo b { color: #1a1400 !important; }
.heroAviso .ha-line { box-shadow: none !important; border-left-color: rgba(255,255,255,.55) !important; }

/* respiración más lenta */
.heroAviso, .heroAviso .ha-line { animation-duration: 5.5s !important; }

.heroAviso .ha-left { display: block; font-size: 9.5px; opacity: .8; font-style: normal; letter-spacing: .04em; margin-top: 1px; }

/* bordes gruesos, líneas separadas y respiración en el borde */
.heroAviso { gap: 10px !important; }
.heroAviso .ha-line {
  border-left-width: 6px !important;
  padding: 6px 11px !important;
  animation: haBorderBreath 5.5s ease-in-out infinite !important;
  opacity: 1 !important;
}
@keyframes haBorderBreath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 10px -6px currentColor; }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 26px -2px currentColor; }
}
.heroAviso .ha-line.rojo { border-left-color: #ff8a84 !important; }
.heroAviso .ha-line.naranja { border-left-color: #ffc46a !important; }
.heroAviso .ha-line.amarillo { border-left-color: #ffe97a !important; }

/* letras negras y borde respirando despacio */
.heroAviso .ha-line,
.heroAviso .ha-line b,
.heroAviso .ha-line .ha-left { color: #000 !important; }
.heroAviso .ha-line { animation-duration: 8s !important; }

/* negro en todos los niveles, con la misma especificidad */
.heroAviso .ha-line.rojo,
.heroAviso .ha-line.naranja,
.heroAviso .ha-line.amarillo,
.heroAviso .ha-line.rojo b,
.heroAviso .ha-line.naranja b,
.heroAviso .ha-line.amarillo b,
.heroAviso .ha-line.rojo .ha-left,
.heroAviso .ha-line.naranja .ha-left,
.heroAviso .ha-line.amarillo .ha-left {
  color: #000 !important;
}

/* filas más grandes y texto blanco otra vez */
.heroAviso .ha-line,
.heroAviso .ha-line.rojo,
.heroAviso .ha-line.naranja,
.heroAviso .ha-line.amarillo {
  padding: 11px 16px !important;
  font-size: 13px !important;
  border-left-width: 7px !important;
  color: #fff !important;
}
.heroAviso .ha-line b,
.heroAviso .ha-line.rojo b,
.heroAviso .ha-line.naranja b,
.heroAviso .ha-line.amarillo b,
.heroAviso .ha-line .ha-left,
.heroAviso .ha-line.rojo .ha-left,
.heroAviso .ha-line.naranja .ha-left,
.heroAviso .ha-line.amarillo .ha-left {
  color: #fff !important;
}
.heroAviso .ha-line.amarillo,
.heroAviso .ha-line.amarillo b,
.heroAviso .ha-line.amarillo .ha-left { color: #201800 !important; }
.heroAviso .ha-left { font-size: 11px !important; opacity: .95 !important; }
.heroAviso { gap: 12px !important; }

/* todas las filas con el mismo ancho y alineadas */
.heroAviso { align-items: stretch !important; }
.heroAviso .ha-line { display: block !important; width: 100% !important; text-align: left !important; }
.heroAviso { min-width: 300px !important; }

/* en flujo: pegado justo encima de las tarjetas y alineado con su borde superior */
.heroAviso {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  margin: 4px auto 10px !important;
  width: fit-content !important;
  max-width: 82% !important;
  min-width: 300px !important;
}

/* el bloque ocupa el ancho de la fila de tarjetas */
.heroAviso {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 4px 0 10px !important;
  align-self: stretch !important;
}
.heroAviso .ha-line { width: 100% !important; }

/* desde la temperatura hacia la derecha */
.heroAviso {
  margin: 4px 0 10px 34% !important;
  width: auto !important;
  max-width: none !important;
  align-self: stretch !important;
}

/* alineado con la temperatura, a su derecha */
.heroAviso {
  position: absolute !important;
  left: 34% !important;
  right: 0 !important;
  top: 13% !important;
  margin: 0 !important;
  width: auto !important;
  transform: none !important;
}

.heroAviso { top: 5% !important; }

/* aprovechar el hueco: columnas en vez de una sola columna */
.heroAviso {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  left: 34% !important;
  right: 0 !important;
  top: 6% !important;
  align-content: start !important;
  width: auto !important;
}
.heroAviso .ha-line {
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  border-left-width: 6px !important;
}
.heroAviso .ha-left { font-size: 9.5px !important; }

.heroAviso { top: 3.5% !important; gap: 6px !important; }
.heroAviso .ha-line { padding: 7px 11px !important; }

/* columnas automáticas: los avisos caben en una fila sobre las tarjetas */
.heroAviso {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  top: 2% !important;
  gap: 6px !important;
}
.heroAviso .ha-line { padding: 6px 10px !important; font-size: 11px !important; }
.heroAviso .ha-left { font-size: 9px !important; }

/* centrado en la zona libre del recuadro, en columnas */
.heroAviso {
  left: 50% !important;
  right: auto !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  width: min(620px, 62%) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
}

/* mismo aire arriba y abajo */
.heroAviso { top: 31% !important; }

.heroAviso { top: 26.5% !important; }

.heroAviso { top: 22% !important; }

.heroAviso { top: 18.5% !important; }

.heroAviso { position: absolute !important; top: 18.5% !important; }

/* marcos que respiran de forma bien visible */
@keyframes haFrame {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 0 4px -2px currentColor; border-left-color: rgba(255,255,255,.25); }
  50%      { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 22px 2px currentColor; border-left-color: #fff; }
}
.heroAviso .ha-line {
  animation: haFrame 4.5s ease-in-out infinite !important;
  border-left-width: 7px !important;
}
.heroAviso .ha-line.rojo { border-left-color: #ff8a84 !important; }
.heroAviso .ha-line.naranja { border-left-color: #ffc46a !important; }
.heroAviso .ha-line.amarillo { border-left-color: #ffe97a !important; }

/* saturación alta + respiración por brillo (imposible de tapar) */
.heroAviso .ha-line.rojo { background: #ff1f1f !important; }
.heroAviso .ha-line.naranja { background: #ff8c00 !important; }
.heroAviso .ha-line.amarillo { background: #ffd400 !important; }
@keyframes haBright {
  0%, 100% { filter: brightness(.72) saturate(1.1); }
  50% { filter: brightness(1.25) saturate(1.5); }
}
.heroAviso .ha-line { animation: haBright 3.2s ease-in-out infinite !important; }

.heroAviso .ha-line { animation-duration: 6s !important; }

/* avisos oficiales: tarjetas rayadas */
.cmpDay:has(.cmpAlert) {
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 80, 60, .16) 0 7px,
    rgba(255, 80, 60, 0) 7px 14px) !important;
}
.cmpDay--state:has(.cmpAlert) {
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 160, 40, .16) 0 7px,
    rgba(255, 160, 40, 0) 7px 14px) !important;
}

/* rayas diagonales en las tarjetas con aviso oficial */
.cmpDay.has-alert {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--al, #ff5b52) 26%, transparent) 0 7px,
    transparent 7px 14px) !important;
}

/* marca horizontal en la parte inferior de la tarjeta */
.cmpDay.has-alert {
  background-image: none !important;
  box-shadow: inset 0 -4px 0 var(--al, #ff5b52), 0 0 18px -8px var(--al, #ff5b52) !important;
  border-bottom-color: transparent !important;
}

/* vuelta a las rayas diagonales */
.cmpDay.has-alert {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--al, #ff5b52) 26%, transparent) 0 7px,
    transparent 7px 14px) !important;
  box-shadow: none !important;
}

/* móvil: avisos en una columna, en flujo y sin tapar las tarjetas */
@media (max-width: 760px) {
  .heroAviso {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    margin: 8px 0 12px !important;
    gap: 6px !important;
  }
  .heroAviso .ha-line { font-size: 11px !important; padding: 8px 10px !important; }
  .heroAviso .ha-left { font-size: 9.5px !important; }
}

/* iconos del ciclo más grandes */
#ciclo24 .c24-evento .c24-ic svg { width: 36px !important; height: 36px !important; }
#ciclo24 .c24-evento .c24-ic { margin-bottom: 6px; }

/* luna grande en la tarjeta de fase */
#ciclo24 .c24-datoFase { display: flex; align-items: center; gap: 14px; }
#ciclo24 .c24-moon { width: 74px; height: 74px; flex: 0 0 74px; filter: drop-shadow(0 0 18px rgba(200, 220, 255, .35)); }
#ciclo24 .c24-moon svg { width: 100%; height: 100%; }

/* luna grande en la tarjeta de fase */
#ciclo24 .c24-datoFase { display: flex; align-items: center; gap: 14px; }
#ciclo24 .c24-moon { width: 74px; height: 74px; flex: 0 0 74px; filter: drop-shadow(0 0 20px rgba(200, 220, 255, .4)); }
#ciclo24 .c24-moon svg { width: 100%; height: 100%; display: block; }

/* iconos de MeteoMotion en las alertas oficiales */
#avisos-zona-list .avisoIcon svg { width: 32px; height: 32px; display: block; }
#avisos-zona-list .avisoIcon { display: flex; align-items: center; justify-content: center; }

/* modal de avisos y alertas */
.avisosModal { width: min(760px, 94vw); max-height: 86vh; overflow: auto; border-radius: 18px; border: 1px solid #2a4258; background: #081420; color: #e8f4f8; padding: 18px; }
.avisosModal::backdrop { background: rgba(2, 8, 14, .75); }
.avisosModalHead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .18em; color: #8ba4b0; margin-bottom: 10px; }
.avisosModalHead button { background: none; border: 0; color: #9db4bd; font-size: 17px; cursor: pointer; }
.avisosModal .alertasTabs { margin-top: 0; }

/* radar de lluvia */
.radarSec { margin: 26px 0; }
.radarHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.radarHead b { font-size: 13px; letter-spacing: .18em; color: #e8f4f8; }
.radarSub { font-size: 9px; letter-spacing: .16em; color: #7f9aa6; }
.radarHora { margin-left: auto; font-size: 12px; color: #8fe0ff; font-variant-numeric: tabular-nums; }
.radarPlay { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #2a4258; background: #0b1b2b; color: #cfe6f2; cursor: pointer; }
.radarBody { display: flex; gap: 10px; max-width: 760px; margin: 0 auto; align-items: stretch; }
.radarMap { flex: 1; aspect-ratio: 1 / 1; min-height: 0; border-radius: 16px; overflow: hidden; border: 1px solid #19344c; }
.radarRailCol { width: 92px; flex: 0 0 92px; display: flex; flex-direction: column; gap: 6px; }
.radarScrub { display: none; }
.radarPlay { width: 100%; height: 32px; border-radius: 10px; cursor: pointer; background: #102436; color: #e6edf3; border: 1px solid #1d3d59; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.radarPlay:hover { border-color: #6cc7ff; }
.radarRail { flex: 1; overflow-y: auto; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: rgba(6,18,30,.82); border: 1px solid #19344c; scrollbar-width: thin; }
.radarRail .f { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #9fb3c4;
  padding: 3px 4px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.radarRail .f:hover { background: rgba(255,255,255,.08); }
.radarRail .f .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.radarRail .f.on { background: #0e3a25; color: #7bffb4; }
.radarRail .h { font-size: 8px; letter-spacing: .12em; font-weight: 700; padding: 4px 4px 2px; color: #728596; }
.radarRail .h.prev { color: #ffcf6b; }
.radarFoot { font-size: 9.5px; color: #6c8798; margin-top: 6px; }
.radarFoot a { color: #63d8ff; }
@media (max-width: 700px) { .radarMap, .radarRail { height: 260px; } .radarRail { width: 64px; } }

/* etiquetas del radar (fondo claro) */
.radarRail .h { color: #6b7780; }

/* etiquetas del radar sobre mapa claro */
.townWrap { background: none; border: 0; }
.town { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; font-size: 13px;
        color: #fff; font-weight: 700; letter-spacing: .1px; text-shadow: -1px -1px 0 #000,-1px 0px 0 #000,-1px 1px 0 #000,0px -1px 0 #000,0px 1px 0 #000,1px -1px 0 #000,1px 0px 0 #000,1px 1px 0 #000; }
.town.t1 { font-size: 16px; font-weight: 800; color: #fff; text-shadow: -2px -2px 0 #000,-2px 0px 0 #000,-2px 2px 0 #000,0px -2px 0 #000,0px 2px 0 #000,2px -2px 0 #000,2px 0px 0 #000,2px 2px 0 #000; }
.town.t2 { font-size: 14px; font-weight: 700; color: #fff; text-shadow: -1px -1px 0 #000,-1px 0px 0 #000,-1px 1px 0 #000,0px -1px 0 #000,0px 1px 0 #000,1px -1px 0 #000,1px 0px 0 #000,1px 1px 0 #000; }
.town.t3 { font-size: 12px; font-weight: 600; color: #fff; text-shadow: -1px -1px 0 #000,-1px 0px 0 #000,-1px 1px 0 #000,0px -1px 0 #000,0px 1px 0 #000,1px -1px 0 #000,1px 0px 0 #000,1px 1px 0 #000; }
.comarca { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; font-size: 9px;
           letter-spacing: 1.6px; text-transform: uppercase; color: #7b8894; opacity: .95;
           text-shadow: 0 0 3px #fff, 0 0 5px #fff; }

/* columna de zoom del radar */
.radarZoomCol { width: 36px; flex: 0 0 36px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 8px 4px; background: rgba(6,16,26,.8); border: 1px solid #19344c; border-radius: 12px; }
.radarZoomCol .zb { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #29445c;
  background: #102436; color: #e6edf3; font-size: 15px; line-height: 1; cursor: pointer; }
.radarZoomCol .zb:hover { border-color: #6cc7ff; }
.radarZoomCol .sliderWrap { position: relative; flex: 1; width: 100%; min-height: 120px; }
.radarZoomCol input[type=range] { position: absolute; top: 50%; left: 50%; width: 120px; height: 20px;
  transform: translate(-50%,-50%) rotate(-90deg); accent-color: #6cc7ff; background: transparent; }

/* panel lateral del radar (portada) */
.radarBody { max-width: 1080px; }
.radarSide { width: 210px; flex: 0 0 210px; display: flex; flex-direction: column; gap: 8px; }
.rCard { background: rgba(6,18,30,.78); border: 1px solid #19344c; border-radius: 12px; padding: 10px 11px; }
.rCard h4 { margin: 0 0 7px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8ba7bd; font-weight: 700; }
.rRow { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; color: #cfe0ee; }
.rRow b { font-variant-numeric: tabular-nums; color: #fff; }
.rBars { display: flex; align-items: flex-end; gap: 2px; height: 54px; }
.rBars .b { flex: 1; background: linear-gradient(180deg,#6cc7ff,#2a6f9e); border-radius: 2px 2px 0 0; min-height: 2px; }
.rBars .b.zero { background: #1b2b3a; }
.rTotal { margin-top: 6px; font-size: 11px; color: #9fb3c4; }
.rTotal b { color: #fff; }
.rLegend { display: flex; height: 9px; border-radius: 5px; overflow: hidden; }
.rLegend i { flex: 1; }
.rLegendTxt { display: flex; justify-content: space-between; font-size: 9px; color: #7d8ea0; margin-top: 3px; }

.radarRailCol .radarHora { font-size: 10px; line-height: 1.3; text-align: center; color: #cfe0ee;
  background: rgba(6,18,30,.8); border: 1px solid #19344c; border-radius: 9px; padding: 4px 3px; }

.cmpSelect { margin-left: auto; background: #10263b; color: #dcecf8; border: 1px solid #29445c;
  border-radius: 8px; padding: 4px 6px; font-size: 11px; font-weight: 700; cursor: pointer; }
.cmpSelect:hover { border-color: #00c8ff; }

/* ===== RADAR EN MÓVIL: mapa a lo ancho, debajo lista y tarjetas ===== */
@media (max-width: 900px) {
  .radarBody { flex-wrap: wrap; max-width: 100%; gap: 8px; }

  /* zoom arriba, a todo el ancho */
  .radarZoomCol { order: 0; flex: 1 1 100%; height: 36px; flex-direction: row;
    padding: 5px 12px; gap: 10px; border-radius: 0; border-left: 0; border-right: 0;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .radarZoomCol .sliderWrap { flex: 1; width: auto; min-height: 0; height: 100%; }
  .radarZoomCol input[type=range] { width: 100%; left: 0; transform: translate(0,-50%) rotate(0deg); }
  .radarZoomCol .zb { width: 26px; height: 26px; flex: 0 0 26px; }

  /* mapa a todo el ancho */
  .radarMap { order: 1; flex: 1 1 100%; min-width: 0; height: auto !important; aspect-ratio: 1 / 1; }

  /* barra inferior: play a la izquierda + horas en horizontal */
  .radarRailCol { order: 2; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
    background: rgba(6,16,26,.9); border-top: 1px solid #19344c; border-bottom: 1px solid #19344c;
    border-radius: 0; padding: 6px 10px;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .radarPlay { flex: 0 0 34px; width: 34px; padding: 0; font-size: 14px; height: 34px; border-radius: 9px; margin-right: 2px; }
  .radarHora { display: none; }
  .radarPlay { white-space: nowrap; overflow: hidden; }
  .radarRail { display: flex; flex: 1 1 0; min-width: 0; width: auto !important; height: 40px !important; flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding: 4px; gap: 4px; }
  .radarRail .h { display: none; }
  .radarRail .f { flex: 0 0 auto; font-size: 9.5px; padding: 3px 6px; white-space: nowrap; }

  .radarScrub { display: block; flex: 1 1 100%; width: 100%; padding: 2px 0 0; }
  .radarScrub input { width: 100%; accent-color: #6cc7ff; height: 18px; }

  .radarSide { order: 3; flex: 1 1 100%; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .radarSide .rCard { flex: 1 1 150px; }
}