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


/*
 * Crossfade seguro.
 * NO modificar transform de Leaflet.
 */

.kc-radar-pane img {
  transition:
    opacity
    480ms
    ease
    !important;
}


/* Radar = vista inicial */

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


/*
 * Ocultar solamente los símbolos
 * de lluvia del estado interno
 * mientras visualizamos radar.
 */

body.kc-radar-mode
.kc-rain-marker {
  display:
    none
    !important;
}


/*
 * La leyenda del campo pronosticado
 * tampoco debe confundirse con radar.
 */

body.kc-radar-mode
.kc-weather-field-legend {
  display:
    none
    !important;
}


/* ==========================================================
   TIMELINE RADAR
   ========================================================== */

.kc-radar-timeline {

  display:
    none;

  position:
    fixed;

  left:
    16px;

  right:
    16px;

  bottom:
    14px;

  z-index:
    1400;

  box-sizing:
    border-box;

  min-height:
    106px;

  padding:
    12px 16px;

  border-radius:
    16px;

  border:
    1px solid
    rgba(128, 188, 198, .18);

  background:
    rgba(8, 29, 40, .91);

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, .30);

  backdrop-filter:
    blur(10px);
}


body.kc-radar-mode
.kc-radar-timeline {
  display:
    block;
}


.kc-radar-head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    10px;
}


.kc-radar-head > div:first-child {

  display:
    flex;

  align-items:
    baseline;

  gap:
    8px;
}


.kc-radar-head strong {

  color:
    rgba(246, 250, 251, .98);

  font-size:
    12px;
}


.kc-radar-head small {

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

  font-size:
    9px;
}


.kc-radar-current {

  display:
    flex;

  align-items:
    baseline;

  gap:
    6px;
}


.kc-radar-current span {

  color:
    rgba(153, 185, 196, .68);

  font-size:
    8px;
}


.kc-radar-current strong {

  color:
    rgba(103, 225, 213, .98);

  font-size:
    13px;
}


.kc-radar-controls {

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;
}


.kc-radar-play {

  width:
    34px;

  height:
    34px;

  border:
    0;

  border-radius:
    50%;

  cursor:
    pointer;

  color:
    #f3f9fa;

  background:
    rgba(56, 154, 158, .88);

  font-size:
    13px;
}


.kc-radar-play:hover {

  background:
    rgba(69, 181, 181, .98);
}


.kc-radar-edge {

  color:
    rgba(172, 198, 206, .76);

  font-size:
    9px;

  text-align:
    center;
}


#kcRadarRange {

  width:
    100%;

  cursor:
    pointer;

  accent-color:
    rgb(77, 194, 188);
}


/* Radar primero en jerarquía visual */

#radarTool b {

  font-size:
    15px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 900px
) {

  .kc-radar-timeline {

    left:
      10px;

    right:
      10px;

    bottom:
      10px;

    min-height:
      100px;
  }

}