/* KC METEO — RADAR ANALYTICS v1 */


body.kc-radar-mode
.windy-controls {
  display:
    none
    !important;
}


/* No mezclar símbolos de pronóstico con radar */

body.kc-radar-mode
.kc-temperature-marker,

body.kc-radar-mode
.kc-rain-marker,

body.kc-radar-mode
.kc-wind-marker,

body.kc-radar-mode
.kc-humidity-marker,

body.kc-radar-mode
.kc-cloud-marker {

  display:
    none
    !important;
}


.kc-radar-analytics {

  display:
    none;

  padding:
    14px;

  box-sizing:
    border-box;
}


body.kc-radar-mode
.kc-radar-analytics {

  display:
    block;
}


.kc-radar-analytics-head {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  margin-bottom:
    12px;
}


.kc-radar-analytics-head > div {

  display:
    grid;

  gap:
    2px;
}


.kc-radar-analytics-head strong {

  font-size:
    14px;
}


.kc-radar-analytics-head small {

  color:
    rgba(156,192,202,.72);

  font-size:
    9px;
}


#kcRadarAnalyticsClose {

  width:
    28px;

  height:
    28px;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.08);

  color:
    white;

  cursor:
    pointer;
}


.kc-radar-summary {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    6px;

  margin-bottom:
    10px;
}


.kc-radar-summary > div {

  padding:
    8px 7px;

  border-radius:
    10px;

  background:
    rgba(12,36,49,.62);
}


.kc-radar-summary span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    rgba(151,185,196,.72);

  font-size:
    7px;
}


.kc-radar-summary strong {

  font-size:
    10px;
}


.kc-radar-chart-card,

.kc-radar-level-card {

  margin-bottom:
    9px;

  padding:
    9px 10px;

  border-radius:
    12px;

  background:
    rgba(14,39,52,.58);
}


.kc-radar-chart-card header,

.kc-radar-level-card header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    baseline;

  margin-bottom:
    6px;
}


.kc-radar-chart-card header strong,

.kc-radar-level-card header strong {

  font-size:
    9px;
}


.kc-radar-chart-card header small,

.kc-radar-level-card header small {

  color:
    rgba(150,183,194,.66);

  font-size:
    7px;
}


.kc-radar-chart-card svg {

  display:
    block;

  width:
    100%;

  height:
    86px;
}


.kc-radar-line {

  fill:
    none;

  stroke:
    rgba(84,207,198,.96);

  stroke-width:
    2;

  vector-effect:
    non-scaling-stroke;
}


.kc-radar-point {

  fill:
    rgba(90,213,204,.92);
}


.kc-radar-point.active {

  fill:
    rgba(255,191,62,1);
}


.kc-radar-guide {

  stroke:
    rgba(255,191,62,.92);

  stroke-width:
    1.3;

  stroke-dasharray:
    3 2;

  vector-effect:
    non-scaling-stroke;
}


.kc-radar-levels {

  display:
    grid;

  gap:
    5px;
}


.kc-radar-level-row {

  display:
    grid;

  grid-template-columns:
    12px
    20px
    minmax(0,1fr)
    40px;

  gap:
    6px;

  align-items:
    center;
}


.kc-radar-swatch {

  width:
    10px;

  height:
    10px;

  border-radius:
    3px;
}


.kc-radar-level-name,

.kc-radar-level-row strong {

  font-size:
    7px;
}


.kc-radar-level-row strong {

  text-align:
    right;
}


.kc-radar-level-bar {

  height:
    5px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.07);
}


.kc-radar-level-bar i {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    rgba(84,207,198,.86);
}


.kc-radar-analysis-foot {

  display:
    flex;

  justify-content:
    space-between;

  color:
    rgba(143,174,184,.58);

  font-size:
    7px;
}


@media (
  max-width: 1100px
) {

  .kc-radar-summary {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


/* ==========================================================
   KC METEO — RADAR PANEL SIMPLIFICADO
   KPI sustituyen gráficas de cobertura/intensidad
   ========================================================== */

body.kc-radar-mode
.kc-radar-chart-card {
  display:
    none
    !important;
}


/* Distribución pasa a ser el bloque analítico principal */

body.kc-radar-mode
.kc-radar-level-card {

  margin-top:
    12px;

  padding:
    14px;

  border-radius:
    14px;

  background:
    rgba(14, 39, 52, .72);
}


body.kc-radar-mode
.kc-radar-level-card header {

  margin-bottom:
    12px;
}


body.kc-radar-mode
.kc-radar-level-card header strong {

  font-size:
    13px;

  line-height:
    1.2;
}


body.kc-radar-mode
.kc-radar-level-card header small {

  font-size:
    10px;

  font-weight:
    600;

  color:
    rgba(103, 225, 213, .90);
}


body.kc-radar-mode
.kc-radar-levels {

  gap:
    9px;
}


body.kc-radar-mode
.kc-radar-level-row {

  grid-template-columns:
    16px
    30px
    minmax(0, 1fr)
    50px;

  gap:
    8px;
}


body.kc-radar-mode
.kc-radar-swatch {

  width:
    14px;

  height:
    14px;

  border-radius:
    3px;
}


body.kc-radar-mode
.kc-radar-level-name {

  font-size:
    10px;

  font-weight:
    700;
}


body.kc-radar-mode
.kc-radar-level-bar {

  height:
    8px;
}


body.kc-radar-mode
.kc-radar-level-row strong {

  font-size:
    10px;

  font-weight:
    700;
}


/* Más espacio útil para los bloques futuros */

body.kc-radar-mode
.kc-radar-analysis-foot {

  margin-top:
    10px;

  padding-top:
    8px;

  border-top:
    1px solid rgba(255,255,255,.06);
}