/* ==========================================================
   KC METEO — RADAR KPI v2
   ========================================================== */


.kc-radar-situation-v2 {

  display:
    none;

  margin-bottom:
    10px;

  padding:
    10px;

  border-radius:
    12px;

  background:
    rgba(13, 39, 52, .68);
}


body.kc-radar-mode
.kc-radar-situation-v2 {

  display:
    block;
}


/*
 * Cuando KPI v2 está operativo,
 * sustituimos el resumen pequeño anterior.
 */

body.kc-radar-kpi-v2
.kc-radar-summary {

  display:
    none;
}


.kc-radar-situation-head {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    10px;

  margin-bottom:
    8px;
}


.kc-radar-situation-head > div {

  display:
    grid;

  gap:
    2px;
}


.kc-radar-situation-head strong {

  font-size:
    10px;
}


.kc-radar-situation-head small {

  font-size:
    7px;

  color:
    rgba(153, 186, 197, .66);
}


.kc-radar-situation-time {

  white-space:
    nowrap;

  font-size:
    8px;

  color:
    rgba(101, 219, 209, .95);
}


.kc-radar-status-strip {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    8px;

  padding:
    7px 9px;

  border-radius:
    9px;

  background:
    rgba(31, 91, 100, .25);
}


.kc-radar-status-strip strong {

  font-size:
    10px;
}


.kc-radar-status-strip span {

  font-size:
    7px;

  color:
    rgba(170, 203, 211, .75);
}


.kc-radar-situation-text {

  margin:
    0 0 9px 0;

  line-height:
    1.45;

  font-size:
    8px;

  color:
    rgba(225, 236, 239, .88);
}


.kc-radar-kpi-grid {

  display:
    grid;

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

  gap:
    6px;
}


.kc-radar-kpi-grid article {

  min-width:
    0;

  padding:
    7px;

  border-radius:
    9px;

  background:
    rgba(5, 26, 37, .55);
}


.kc-radar-kpi-grid span {

  display:
    block;

  margin-bottom:
    4px;

  font-size:
    6.5px;

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


.kc-radar-kpi-grid strong {

  display:
    block;

  margin-bottom:
    2px;

  font-size:
    10px;

  white-space:
    nowrap;
}


.kc-radar-kpi-grid small {

  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    6px;

  color:
    rgba(132, 165, 176, .55);
}


.kc-radar-window-summary {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    8px;

  padding-top:
    7px;

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


.kc-radar-window-summary span {

  font-size:
    6.5px;

  color:
    rgba(145, 178, 188, .62);
}


.kc-radar-window-summary strong {

  font-size:
    6.5px;

  text-align:
    right;

  color:
    rgba(215, 229, 233, .80);
}


.kc-radar-situation-v2 footer {

  margin-top:
    7px;

  font-size:
    5.8px;

  color:
    rgba(127, 158, 168, .48);
}


@media (
  max-width: 1100px
) {

  .kc-radar-kpi-grid {

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

}


/* ==========================================================
   KC METEO — RADAR KPI v2.1
   LEGIBILIDAD OPERACIONAL
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEDOR PRINCIPAL DE SITUACIÓN
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-situation-v2 {

  padding:
    14px;

  margin-bottom:
    14px;

  border-radius:
    14px;
}


/* ----------------------------------------------------------
   CABECERA
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-situation-head {

  margin-bottom:
    11px;
}


body.kc-radar-mode
.kc-radar-situation-head strong {

  font-size:
    14px;

  line-height:
    1.2;
}


body.kc-radar-mode
.kc-radar-situation-head small {

  margin-top:
    3px;

  font-size:
    10px;

  line-height:
    1.25;
}


body.kc-radar-mode
.kc-radar-situation-time {

  font-size:
    11px;

  font-weight:
    700;
}


/* ----------------------------------------------------------
   ESTADO GENERAL
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-status-strip {

  min-height:
    42px;

  padding:
    9px 11px;

  margin-bottom:
    10px;
}


body.kc-radar-mode
.kc-radar-status-strip strong {

  font-size:
    15px;

  line-height:
    1.15;
}


body.kc-radar-mode
.kc-radar-status-strip span {

  font-size:
    10px;

  line-height:
    1.2;
}


/* ----------------------------------------------------------
   RESUMEN TEXTUAL
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-situation-text {

  margin:
    0 0 12px 0;

  font-size:
    11.5px;

  line-height:
    1.5;

  color:
    rgba(235, 243, 245, .94);
}


/* ----------------------------------------------------------
   KPI
   De 3 columnas pequeñas a 2 columnas legibles.
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-kpi-grid {

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

  gap:
    8px;
}


body.kc-radar-mode
.kc-radar-kpi-grid article {

  min-height:
    62px;

  padding:
    10px 11px;

  border-radius:
    10px;
}


body.kc-radar-mode
.kc-radar-kpi-grid span {

  margin-bottom:
    5px;

  font-size:
    9.5px;

  line-height:
    1.15;
}


body.kc-radar-mode
.kc-radar-kpi-grid strong {

  margin-bottom:
    4px;

  font-size:
    18px;

  line-height:
    1.05;
}


body.kc-radar-mode
.kc-radar-kpi-grid small {

  font-size:
    8.5px;

  line-height:
    1.2;
}


/* ----------------------------------------------------------
   VENTANA OBSERVADA
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-window-summary {

  margin-top:
    10px;

  padding-top:
    9px;
}


body.kc-radar-mode
.kc-radar-window-summary span {

  font-size:
    9px;
}


body.kc-radar-mode
.kc-radar-window-summary strong {

  font-size:
    9px;

  line-height:
    1.3;
}


/* ----------------------------------------------------------
   NOTA METODOLÓGICA
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-situation-v2 footer {

  margin-top:
    9px;

  font-size:
    8px;

  line-height:
    1.3;
}


/* ==========================================================
   PANEL ANALÍTICO INFERIOR
   ========================================================== */

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

  padding:
    16px;
}


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

  margin-bottom:
    14px;
}


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

  font-size:
    17px;
}


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

  margin-top:
    3px;

  font-size:
    10px;
}


/* ----------------------------------------------------------
   GRÁFICAS
   ---------------------------------------------------------- */

body.kc-radar-mode
.kc-radar-chart-card,

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

  padding:
    12px;

  margin-bottom:
    12px;

  border-radius:
    13px;
}


body.kc-radar-mode
.kc-radar-chart-card header,

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

  margin-bottom:
    9px;
}


body.kc-radar-mode
.kc-radar-chart-card header strong,

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

  font-size:
    12px;
}


body.kc-radar-mode
.kc-radar-chart-card header small,

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

  font-size:
    9px;
}


body.kc-radar-mode
.kc-radar-chart-card svg {

  height:
    105px;
}


/* ----------------------------------------------------------
   DISTRIBUCIÓN N1–N7
   ---------------------------------------------------------- */

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

  gap:
    7px;
}


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

  grid-template-columns:
    14px
    28px
    minmax(0, 1fr)
    48px;

  gap:
    7px;
}


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

  width:
    12px;

  height:
    12px;
}


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

  font-size:
    9px;

  font-weight:
    600;
}


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

  font-size:
    10px;

  font-weight:
    700;
}


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

  height:
    7px;
}


/* ----------------------------------------------------------
   PIE DEL PANEL
   ---------------------------------------------------------- */

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

  font-size:
    8px;

  line-height:
    1.3;
}


/* ----------------------------------------------------------
   PANTALLAS GRANDES
   ---------------------------------------------------------- */

@media (
  min-width: 1400px
) {

  body.kc-radar-mode
  .kc-radar-kpi-grid strong {

    font-size:
      19px;
  }


  body.kc-radar-mode
  .kc-radar-situation-text {

    font-size:
      12px;
  }

}


/* ----------------------------------------------------------
   PANTALLAS PEQUEÑAS
   ---------------------------------------------------------- */

@media (
  max-width: 1050px
) {

  body.kc-radar-mode
  .kc-radar-kpi-grid {

    grid-template-columns:
      1fr;
  }

}