/* ==========================================================
   KC METEO — ANALYTICS PANEL v1
   ========================================================== */

:root {
  --kc-analytics-width: clamp(400px, 32vw, 520px);
}


/* ----------------------------------------------------------
   HEADER ACTIONS
   ---------------------------------------------------------- */

.kc-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: auto;
  margin-right: 12px;
}


.kc-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  padding: 0 14px;

  border: 1px solid rgba(102, 222, 214, .34);
  border-radius: 999px;

  background:
    rgba(18, 47, 58, .72);

  color:
    rgba(238, 252, 251, .96);

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.kc-header-action:hover {
  background:
    rgba(27, 91, 94, .80);

  border-color:
    rgba(102, 222, 214, .78);

  transform:
    translateY(-1px);
}


.windy-source {
  margin-left: 0 !important;
}


/* ----------------------------------------------------------
   MAIN LAYOUT
   ---------------------------------------------------------- */


.windy-main {
  overflow: hidden;
}






/* ----------------------------------------------------------
   MAPA — PANEL DERECHO RESERVADO
   ---------------------------------------------------------- */

#weatherMap {
  right:
    var(--kc-analytics-width)
    !important;

  width:
    auto
    !important;

  transition:
    right .22s ease;
}


body.kc-analysis-collapsed
#weatherMap {
  right: 0 !important;
  width: auto !important;
}


/* ----------------------------------------------------------
   ANALYTICS PANEL
   ---------------------------------------------------------- */

.kc-analytics-panel {

  position: absolute;

  top: 0;
  right: 0;
  bottom: 145px;


  width:
    var(--kc-analytics-width);

  box-sizing: border-box;

  padding:
    14px 14px 22px;

  overflow-y: auto;
  overflow-x: hidden;

  z-index: 1200;

  background:
    linear-gradient(
      180deg,
      rgba(10, 28, 39, .985),
      rgba(12, 34, 46, .985)
    );

  border-left:
    1px solid
    rgba(120, 223, 216, .16);

  box-shadow:
    -14px 0 34px
    rgba(0, 0, 0, .17);

  color:
    rgba(241, 249, 250, .96);

  transition:
    transform .22s ease;
}


.kc-analytics-panel::-webkit-scrollbar {
  width: 6px;
}


.kc-analytics-panel::-webkit-scrollbar-thumb {
  border-radius: 10px;

  background:
    rgba(157, 197, 204, .25);
}


/* ----------------------------------------------------------
   PANEL HEADER
   ---------------------------------------------------------- */

.kc-analytics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}


.kc-analytics-kicker {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(94, 224, 209, .92);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .14em;
  text-transform: uppercase;
}


.kc-analytics-head strong {
  display: block;

  font-size: 16px;
  line-height: 1.25;
}


.kc-analytics-head small {
  display: block;

  margin-top: 4px;

  color:
    rgba(184, 205, 213, .75);

  font-size: 10px;
}


.kc-analysis-collapse {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border:
    1px solid
    rgba(111, 220, 211, .25);

  border-radius: 10px;

  background:
    rgba(28, 60, 71, .72);

  color:
    rgba(235, 250, 249, .94);

  cursor: pointer;

  font-size: 17px;
}


/* ----------------------------------------------------------
   SITUATION
   ---------------------------------------------------------- */

.kc-situation {
  padding: 12px;

  margin-bottom: 10px;

  border-radius: 14px;

  background:
    rgba(27, 57, 73, .72);

  border:
    1px solid
    rgba(126, 209, 204, .12);
}


.kc-situation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}


.kc-situation-title strong {
  font-size: 12px;
}


.kc-situation-title span {
  color:
    rgba(177, 201, 210, .76);

  font-size: 9px;
}


.kc-situation-grid {
  display: grid;

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

  gap: 6px;
}


.kc-situation-metric {
  min-width: 0;

  padding: 8px 4px;

  border-radius: 10px;

  background:
    rgba(8, 28, 40, .52);

  text-align: center;
}


.kc-situation-metric span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(170, 197, 206, .72);

  font-size: 8px;

  white-space: nowrap;
}


.kc-situation-metric strong {
  display: block;

  overflow: hidden;

  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ----------------------------------------------------------
   CHART CARDS
   ---------------------------------------------------------- */

.kc-chart-card {
  padding: 10px 11px 8px;

  margin-bottom: 9px;

  border-radius: 14px;

  background:
    rgba(25, 52, 68, .68);

  border:
    1px solid
    rgba(123, 202, 199, .10);
}


.kc-chart-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;

  gap: 8px;

  margin-bottom: 5px;
}


.kc-chart-card header strong {
  font-size: 11px;
}


.kc-chart-card header small {
  color:
    rgba(172, 198, 207, .68);

  font-size: 8px;
}


.kc-chart {
  display: block;

  width: 100%;
  height: 96px;
}


/* Grid */

.kc-chart-grid {
  stroke:
    rgba(170, 199, 209, .10);

  stroke-width: 1;
}


.kc-chart-separator {
  stroke:
    rgba(170, 199, 209, .16);

  stroke-width: 1;
  stroke-dasharray: 3 4;
}


/* Lines */

.kc-chart-line-temp {
  fill: none;

  stroke:
    rgb(244, 176, 72);

  stroke-width: 2.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kc-chart-line-wind {
  fill: none;

  stroke:
    rgb(107, 222, 215);

  stroke-width: 2.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kc-chart-line-humidity {
  fill: none;

  stroke:
    rgb(81, 164, 223);

  stroke-width: 2.2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kc-chart-line-cloud {
  fill: none;

  stroke:
    rgb(217, 226, 231);

  stroke-width: 2.2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kc-chart-bar {
  fill:
    rgba(65, 174, 222, .82);
}


.kc-chart-bar.active {
  fill:
    rgba(96, 223, 214, .96);
}


.kc-chart-dot {
  fill:
    rgba(244, 248, 249, .96);
}


.kc-chart-day-label {
  fill:
    rgba(172, 199, 207, .62);

  font-size: 7px;

  text-anchor: middle;
}


.kc-chart-legend {
  display: flex;
  align-items: center;

  gap: 13px;

  min-height: 15px;

  margin-top: -1px;

  color:
    rgba(173, 198, 207, .72);

  font-size: 8px;
}


.kc-chart-legend span {
  display: inline-flex;
  align-items: center;

  gap: 5px;
}


.kc-legend-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.kc-legend-humidity {
  background:
    rgb(81, 164, 223);
}


.kc-legend-cloud {
  background:
    rgb(217, 226, 231);
}


/* ----------------------------------------------------------
   MAP RESTORE BUTTON
   ---------------------------------------------------------- */

.kc-analysis-restore {
  position: absolute;

  top: 18px;
  right: 14px;

  z-index: 1300;

  display: none;

  min-width: 110px;
  height: 36px;

  padding: 0 13px;

  border:
    1px solid
    rgba(104, 222, 214, .40);

  border-radius: 999px;

  background:
    rgba(10, 34, 46, .90);

  color:
    rgba(240, 251, 250, .96);

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


/* ----------------------------------------------------------
   COLLAPSED MODE
   ---------------------------------------------------------- */

body.kc-analysis-collapsed
#weatherMap {
  width: 100% !important;
}


body.kc-analysis-collapsed
.kc-analytics-panel {
  transform:
    translateX(101%);
}


body.kc-analysis-collapsed
.kc-analysis-restore {
  display: block;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (
  max-width: 1180px
) {

  :root {
    --kc-analytics-width: 390px;
  }

}


@media (
  max-width: 900px
) {

  #weatherMap {
    width: 100% !important;
  }


  .kc-analytics-panel {
    width:
      min(
        92vw,
        420px
      );

    transform:
      translateX(101%);
  }


  body.kc-analysis-mobile-open
  .kc-analytics-panel {
    transform:
      translateX(0);
  }


  .kc-header-action {
    padding:
      0 10px;

    font-size:
      10px;
  }

}


/* ==========================================================
   KC METEO — ANALYTICS v1.1
   Right-side map controls stay inside map viewport
   ========================================================== */

body:not(.kc-analysis-collapsed)
.windy-secondary-tools {
  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


body:not(.kc-analysis-collapsed)
.windy-layer-stack {
  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


body:not(.kc-analysis-collapsed)
.windy-flyout {
  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


body:not(.kc-analysis-collapsed)
.windy-picker {
  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


body:not(.kc-analysis-collapsed)
.kc-weather-field-legend {
  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


/* Timeline continúa ocupando todo el ancho */

.windy-timeline {
  z-index: 1400 !important;
}


/* Panel no invade timeline */

.kc-analytics-panel {
  z-index: 1250;
}


/* El botón para recuperar Análisis queda sobre el mapa */

.kc-analysis-restore {
  right: 14px;
  z-index: 1450;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .kc-analytics-panel {
    bottom: 0;
  }


  body:not(.kc-analysis-collapsed)
  .windy-secondary-tools,

  body:not(.kc-analysis-collapsed)
  .windy-layer-stack,

  body:not(.kc-analysis-collapsed)
  .windy-flyout,

  body:not(.kc-analysis-collapsed)
  .windy-picker,

  body:not(.kc-analysis-collapsed)
  .kc-weather-field-legend {

    right: 14px !important;
  }

}


/* ==========================================================
   KC METEO — HEADER REPORT TOOLS v1
   ========================================================== */

.kc-source-tools {
  display: flex !important;
  align-items: center;
  gap: 8px;

  margin-left: auto !important;
}


.kc-source-label {
  color: rgba(211, 228, 231, .86);
  font-size: 11px;
  white-space: nowrap;
}


.kc-source-label strong {
  color: rgba(100, 226, 209, .98);
  font-weight: 800;
}


.kc-report-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 29px;
  padding: 0 10px;

  border: 1px solid rgba(103, 222, 214, .34);
  border-radius: 999px;

  background: rgba(22, 57, 65, .72);

  color: rgba(239, 251, 250, .96);

  font-size: 10px;
  font-weight: 800;

  text-decoration: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.kc-report-download:hover {
  background: rgba(32, 102, 101, .88);
  border-color: rgba(103, 222, 214, .86);
  transform: translateY(-1px);
}


/* IDs usados por app.js, pero ya no visibles */

.kc-source-internal {
  display: none !important;
}


/*
 * Las acciones que Analytics v1 intentaba inyectar
 * dinámicamente ya no son necesarias.
 */

.kc-header-actions {
  display: none !important;
}


/* KC METEO — ANALYTICS FORCE v1.2 */


/* ==========================================================
   1. USAR TODO EL ANCHO DE LA VENTANA
   ========================================================== */

body.windy-ui main.windy-main {

  position: fixed !important;

  left: 0 !important;
  right: 0 !important;

  top: 52px !important;
  bottom: 0 !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* ==========================================================
   2. MAPA + PANEL ANALÍTICO
   ========================================================== */

:root {

  --kc-analytics-width:
    clamp(
      420px,
      31vw,
      520px
    );
}


/*
 * Es deliberadamente más específico que:
 *
 * .windy-ui #weatherMap {
 *   inset: 0 !important;
 *   width: 100% !important;
 * }
 */

body.windy-ui:not(.kc-analysis-collapsed)
#weatherMap {

  position: absolute !important;

  inset:
    0
    var(--kc-analytics-width)
    0
    0
    !important;

  width: auto !important;
  height: 100% !important;

  max-width: none !important;

  margin: 0 !important;
}


/* Modo mapa completo */

body.windy-ui.kc-analysis-collapsed
#weatherMap {

  inset: 0 !important;

  width: auto !important;
  height: 100% !important;

  max-width: none !important;
}


/* ==========================================================
   3. PANEL DERECHO
   ========================================================== */

body.windy-ui
.kc-analytics-panel {

  display: block !important;

  position: absolute !important;

  top: 0 !important;
  right: 0 !important;

  /*
   * Dejamos libre el timeline inferior.
   */
  bottom: 145px !important;

  width:
    var(--kc-analytics-width)
    !important;

  max-width: none !important;

  z-index: 1250 !important;

  transform:
    translateX(0);
}


/* ==========================================================
   4. CONTROLES DEL MAPA
   quedan justo antes del panel
   ========================================================== */

body.windy-ui:not(.kc-analysis-collapsed)
.windy-secondary-tools,

body.windy-ui:not(.kc-analysis-collapsed)
.windy-layer-stack,

body.windy-ui:not(.kc-analysis-collapsed)
.windy-flyout,

body.windy-ui:not(.kc-analysis-collapsed)
.windy-picker,

body.windy-ui:not(.kc-analysis-collapsed)
.kc-weather-field-legend {

  right:
    calc(
      var(--kc-analytics-width)
      + 14px
    )
    !important;
}


/* ==========================================================
   5. TIMELINE
   ========================================================== */

body.windy-ui
.windy-timeline {

  left: 16px !important;
  right: 16px !important;

  width: auto !important;
  max-width: none !important;

  z-index: 1400 !important;
}


/* ==========================================================
   6. MAPA COMPLETO
   ========================================================== */

body.kc-analysis-collapsed
.kc-analytics-panel {

  transform:
    translateX(101%)
    !important;
}


body.kc-analysis-collapsed
.kc-analysis-restore {

  display: block !important;
}


/* ==========================================================
   7. RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

  body.windy-ui
  #weatherMap {

    inset: 0 !important;

    width: auto !important;
  }


  body.windy-ui
  .kc-analytics-panel {

    width:
      min(
        92vw,
        420px
      )
      !important;

    bottom: 0 !important;

    transform:
      translateX(101%);
  }

}


/* END KC METEO — ANALYTICS FORCE v1.2 */