/* ==========================================================
   KC METEO — RADAR SPATIAL v1
   ========================================================== */


.kc-radar-spatial {

  display:
    none;

  margin-bottom:
    12px;
}


body.kc-radar-mode
.kc-radar-spatial-v1,
body.kc-radar-mode
.kc-radar-spatial {

  display:
    block;
}


/*
 * Cuando Spatial v1 funciona,
 * la distribución N1-N7 deja de ocupar
 * espacio principal.
 */

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

  display:
    none
    !important;
}


.kc-radar-spatial-card {

  margin-bottom:
    10px;

  padding:
    12px;

  border-radius:
    13px;

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


.kc-radar-spatial-card header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    10px;
}


.kc-radar-spatial-card header > div {

  display:
    grid;

  gap:
    2px;
}


.kc-radar-spatial-card header strong {

  font-size:
    12px;
}


.kc-radar-spatial-card header small,
.kc-radar-spatial-card header > span {

  font-size:
    9px;

  color:
    rgba(149, 183, 194, .70);
}


.kc-radar-zones {

  display:
    grid;

  gap:
    6px;
}


.kc-radar-zone-row {

  display:
    grid;

  grid-template-columns:
    25px
    minmax(0, 1fr)
    88px;

  gap:
    8px;

  align-items:
    center;

  min-height:
    47px;

  padding:
    7px 8px;

  border-radius:
    9px;

  background:
    rgba(5, 27, 38, .55);
}


.kc-radar-zone-rank {

  display:
    grid;

  place-items:
    center;

  width:
    23px;

  height:
    23px;

  border-radius:
    50%;

  background:
    rgba(66, 185, 179, .17);

  color:
    rgba(101, 224, 213, .98);

  font-size:
    10px;

  font-weight:
    800;
}


.kc-radar-zone-main {

  min-width:
    0;
}


.kc-radar-zone-main strong {

  display:
    block;

  margin-bottom:
    3px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;
}


.kc-radar-zone-main small {

  display:
    block;

  font-size:
    8px;

  color:
    rgba(151, 184, 194, .68);
}


.kc-radar-zone-value {

  text-align:
    right;
}


.kc-radar-zone-value strong {

  display:
    block;

  margin-bottom:
    2px;

  font-size:
    14px;
}


.kc-radar-zone-value small {

  display:
    block;

  font-size:
    8px;

  color:
    rgba(150, 190, 198, .74);
}


.kc-radar-core-kpis {

  display:
    grid;

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

  gap:
    7px;

  margin-bottom:
    8px;
}


.kc-radar-core-kpis article {

  padding:
    8px 9px;

  border-radius:
    9px;

  background:
    rgba(5, 27, 38, .55);
}


.kc-radar-core-kpis span {

  display:
    block;

  margin-bottom:
    4px;

  font-size:
    8px;

  color:
    rgba(147, 180, 190, .68);
}


.kc-radar-core-kpis strong {

  display:
    block;

  font-size:
    15px;
}


.kc-radar-primary-core {

  display:
    grid;

  grid-template-columns:
    1.3fr
    .7fr
    1.3fr;

  gap:
    6px;

  padding:
    8px 9px;

  border-radius:
    9px;

  background:
    rgba(29, 78, 83, .19);
}


.kc-radar-primary-core > div {

  min-width:
    0;
}


.kc-radar-primary-core span {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    7px;

  color:
    rgba(148, 181, 191, .65);
}


.kc-radar-primary-core strong {

  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;
}


.kc-radar-spatial-empty {

  padding:
    10px;

  border-radius:
    9px;

  font-size:
    9px;

  color:
    rgba(159, 190, 199, .72);

  background:
    rgba(5, 27, 38, .45);
}