/* clima.css — Data Layer de Clima (Conagua · SMN) */

/* Separador dentro del panel DATA LAYERS */
.dl-seccion-clima{
  font-family:'Barlow Condensed',sans-serif; font-size:10.5px; letter-spacing:2px; font-weight:700;
  color:var(--verde-osc); padding:9px 6px 3px; margin-top:4px; border-top:1px solid var(--borde);
}

/* ── Control flotante CLIMA · CONAGUA (topleft) ── */
.clima-ctrl{
  background:#fff; border:1px solid var(--borde); border-radius:14px; color:var(--texto); font-family:'Barlow',sans-serif; font-size:12.5px;
  box-shadow:0 10px 30px -8px rgba(16,40,28,.3); min-width:220px; overflow:hidden;
}
.clima-ctrl-head{
  all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 12px; font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:1.8px; font-weight:700; color:#fff;
  background:var(--verde);
}
.clima-ctrl-head:focus-visible{ outline:2px solid #fff; outline-offset:-3px }
.clima-ctrl-head > span:first-child{ flex:1 }
.clima-ctrl-badge{ background:#fff; color:var(--verde-osc); border-radius:20px; padding:1px 7px; font-size:11px; letter-spacing:0 }
.clima-ctrl-chev{ width:7px; height:7px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); transition:transform .2s }
.clima-ctrl.abierto .clima-ctrl-chev{ transform:rotate(45deg) }
.clima-ctrl-body{ display:none; padding:4px 12px 12px }
.clima-ctrl.abierto .clima-ctrl-body{ display:block }
.clima-ctrl-t{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.5px; font-size:10.5px; color:var(--gris); text-transform:uppercase; margin:10px 0 4px }
.clima-ctrl label{ display:flex; align-items:center; gap:7px; padding:3px 0; cursor:pointer }
.clima-ctrl input{ accent-color:var(--verde); margin:0 }
.clima-cnt{ margin-left:auto; background:var(--verde-claro); border-radius:10px; padding:0 7px; font-size:11px; color:var(--verde-osc); font-weight:700 }
.clima-ctrl-lista{
  all:unset; box-sizing:border-box; display:block; width:100%; text-align:center; margin-top:8px; padding:6px;
  border-radius:9px; background:var(--verde-claro); border:1px solid var(--verde-borde); color:var(--verde-osc); cursor:pointer; font-weight:700;
}
.clima-ctrl-lista:hover{ background:#D7F0E1 }
.clima-ley{ display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px }
.clima-ley i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px }
.clima-ctrl-upd{ margin-top:10px; font-size:11px; color:var(--gris-claro) }

/* ── Panel de detalle CAP (sobre el mapa, derecha) ── */
.cap-panel{
  --sev:#ffd400;
  position:absolute; top:104px; right:22px; width:380px; max-width:calc(100% - 44px); max-height:calc(100% - 126px);
  display:none; flex-direction:column; z-index:900;
  background:#fff; color:var(--tinta); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px -10px rgba(16,40,28,.45); font-family:'Barlow',sans-serif; border:1px solid var(--borde);
}
.cap-panel.abierto{ display:flex }
.cap-cerrar{
  position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#0f2233; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.cap-head{ display:flex; align-items:center; gap:10px; background:var(--verde-prof); color:#fff; padding:12px 44px 12px 14px; margin:10px 10px 0; border-radius:10px }
.cap-head-org{ font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:1px; line-height:1.1; color:#9fe8e0 }
.cap-head-org small{ display:block; font-weight:400; font-size:9.5px; letter-spacing:.3px; color:#cfeeea }
.cap-head-evento{ flex:1; text-align:center; font-weight:700; font-size:16px }
.cap-head-cap{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; letter-spacing:1px }
.cap-nav{ margin:8px 10px 0; background:var(--fondo-suave); border-radius:10px; padding:8px 8px 10px; border:1px solid var(--borde) }
.cap-nav-lbl{ font-size:12px; font-weight:600; color:#30465a; margin:0 4px 6px }
.cap-nav-lbl b{ color:var(--verde-osc) }
.cap-nav-row{ display:flex; align-items:center; gap:6px }
.cap-prev,.cap-next{ flex:none; width:26px; height:26px; border-radius:50%; border:none; background:var(--verde); color:#fff; font-size:17px; line-height:1; cursor:pointer }
.cap-chips{ flex:1; display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px }
.cap-chip{
  flex:none; display:flex; align-items:center; gap:6px; max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:1px solid #cfdbe5; background:#f5f9fc; border-radius:20px; padding:4px 10px; font-size:11.5px; color:#20364a; cursor:pointer; font-family:inherit;
}
.cap-chip.activo{ border-color:var(--c); box-shadow:0 0 0 2px color-mix(in oklab, var(--c) 45%, transparent); background:#fff }
.cap-chip-dot{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none }
.cap-chip b{ background:#e6eef4; border-radius:50%; width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex:none }
.cap-body{ overflow-y:auto; padding:10px 14px 12px }
.cap-titulo{ background:var(--sev); color:#111; text-align:center; font-weight:700; font-size:14.5px; padding:9px 10px; border-radius:8px; box-shadow:0 2px 0 rgba(0,0,0,.08) }
.cap-sec{ margin-top:12px }
.cap-sec-t{ font-weight:700; font-size:13.5px; color:#10263a; margin-bottom:3px }
.cap-sec p{ margin:0; font-size:13px; line-height:1.45; color:#1f3345 }
.cap-desc{ font-weight:600 }
.cap-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.cap-pill{ background:#fff; border:1px solid #d6e3ec; border-radius:20px; padding:4px 10px; font-size:12px; color:#30465a }
.cap-pill b{ color:#10263a }
.cap-pill b.sev{ background:var(--sev); color:#111; border-radius:12px; padding:1px 8px }
.cap-pie{ margin-top:14px; padding-top:8px; border-top:1px solid #d6e3ec; display:flex; flex-direction:column; gap:6px; font-size:10.5px; color:#5a7288 }
.cap-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; color:#1f3345; cursor:pointer }

/* ── Ciclones ── */
.ciclon-pt{
  width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #111; color:#111;
  font:700 11px/18px 'Barlow',sans-serif; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.5)
}
.ciclon-pt.m{ background:#fff; color:#b71c1c; border-color:#b71c1c }
.ciclon-pt.t{ background:#fffde7 }
.ciclon-pt.d{ background:#e3f2fd; color:#0d47a1; border-color:#0d47a1 }
.ciclon-espiral{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:radial-gradient(circle,#ff5252 0 45%, #b71c1c 70%); box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 0 18px #ff1744;
  animation:ciclon-gira 3s linear infinite;
}
@keyframes ciclon-gira{ to{ transform:rotate(-360deg) } }
@media (prefers-reduced-motion: reduce){ .ciclon-espiral{ animation:none } }

/* ── METAR (temperatura observada) ── */
.metar{ display:flex; flex-direction:column; align-items:center; gap:0; pointer-events:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)) }
.metar-ico{ font-size:22px; line-height:24px }
.metar-t{
  background:#fff; color:var(--tinta); font:700 11.5px/1 'Barlow',sans-serif; padding:3px 6px; border-radius:6px;
  border:1px solid rgba(0,0,0,.08); border-bottom:3px solid var(--tc); white-space:nowrap
}

/* ── Pronóstico ── */
.pron-lbl{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; width:max-content; max-width:120px;
  background:rgba(255,255,255,.94); color:var(--tinta); border-radius:7px; padding:2px 6px; font:600 11px 'Barlow',sans-serif;
  box-shadow:0 1px 4px rgba(0,0,0,.2); border:1px solid var(--borde)
}
.pron-lbl span{ font-size:15px }
.pron-lbl i{ font-style:normal; font-size:10.5px; color:var(--azul); width:100%; text-align:center }
.pron-dias{
  display:flex; align-items:center; gap:4px; background:#fff;
  border:1px solid var(--borde); border-radius:12px; padding:5px; color:var(--gris); font:600 12.5px 'Barlow',sans-serif;
  box-shadow:0 8px 24px -8px rgba(16,40,28,.35)
}
.pron-dias > span{ padding:0 6px }
.pron-dias button{ border:1px solid var(--borde); background:#fff; color:var(--texto); border-radius:7px; padding:5px 10px; cursor:pointer; font:inherit }
.pron-dias button.activo{ background:var(--verde); border-color:var(--verde); color:#fff }
.pron-tab{ width:100%; border-collapse:collapse; font-size:11.5px }
.pron-tab th{ text-align:left; color:var(--gris); font-weight:600; border-bottom:1px solid var(--borde); padding:3px 4px }
.pron-tab td{ padding:4px; border-bottom:1px solid var(--borde); color:var(--texto); white-space:nowrap }
.pron-tab td:first-child{ white-space:normal }

/* ── Popups y tooltips de clima ── */
.clima-popup .leaflet-popup-content-wrapper{ padding:0; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--borde); box-shadow:0 12px 30px -8px rgba(16,40,28,.4) }
.clima-popup .leaflet-popup-content{ margin:0; min-width:220px }
.clima-popup .leaflet-popup-tip{ background:#fff }
.clima-popup a.leaflet-popup-close-button{ color:#fff }
.clima-pop-h{ color:#fff; font:700 13px 'Barlow Condensed',sans-serif; letter-spacing:.6px; padding:8px 28px 8px 12px }
.clima-pop-b{ padding:9px 12px 10px; color:var(--texto); font:12.5px/1.55 'Barlow',sans-serif }
.clima-pop-b b{ color:var(--tinta) }
.clima-pop-big{ font:700 28px/1.1 'Barlow Condensed',sans-serif; color:var(--tinta) }
.clima-pop-f{ margin-top:6px; font-size:11px; color:var(--gris-claro) }
.clima-tip{ background:#fff; color:var(--tinta); border:1px solid var(--borde); font:12px 'Barlow',sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.15) }
.clima-tip::before{ display:none }

/* Mini leyenda (rayos) */
.clima-mini-ley{
  background:#fff; color:var(--texto); border:1px solid var(--borde); border-radius:12px; padding:8px 11px;
  font:12px/1.6 'Barlow',sans-serif; box-shadow:0 8px 24px -8px rgba(16,40,28,.35)
}
.clima-mini-ley span{ margin-right:8px }
.clima-mini-ley i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:3px; border:1px solid #3d2a00; vertical-align:-1px }
.clima-mini-ley small{ color:var(--gris-claro) }

/* ── Tarjeta lateral Clima · Conagua ── */
.clima-sub{ display:flex; justify-content:space-between; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.4px;
  font-size:11.5px; color:var(--gris); text-transform:uppercase; margin:12px 0 6px }
.clima-sub span{ background:var(--verde-claro); border-radius:10px; padding:0 8px; color:var(--verde-osc) }
.clima-item{
  all:unset; box-sizing:border-box; width:100%; display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  padding:8px 10px; margin-bottom:6px; border-radius:10px; border:1px solid var(--borde); border-left:4px solid var(--c);
  background:#fff; transition:background .15s, box-shadow .15s
}
.clima-item:hover,.clima-item:focus-visible{ background:var(--fondo-suave); box-shadow:0 4px 12px -6px rgba(16,40,28,.3) }
.clima-item-dot{ width:8px; height:8px; border-radius:50%; background:var(--c); margin-top:5px; flex:none }
.clima-item-txt{ font-size:12.5px; color:var(--tinta); line-height:1.35 }
.clima-item-txt small{ display:block; color:var(--gris); font-size:11.5px }
.clima-vacio{ font-size:12.5px; color:var(--gris); padding:4px 2px }
.clima-fuente{ margin-top:10px; font-size:11px; color:var(--gris-claro) }
.clima-punto{ background:var(--verde-claro); border:1px solid var(--verde-borde); border-radius:12px; padding:10px 11px; margin-top:2px }
.clima-punto-h{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px; color:var(--verde-osc); font-size:13px; margin-bottom:6px; text-transform:uppercase }
.clima-punto-av{ border-left:3px solid var(--c); padding:5px 8px; margin-bottom:5px; font-size:12.5px; color:var(--tinta); background:#fff; border-radius:0 8px 8px 0 }
.clima-punto-av small{ color:var(--gris) }
.clima-punto-ok{ font-size:12.5px; color:var(--verde-osc); font-weight:600 }
.clima-punto-met{ margin-top:6px; font-size:13px; color:var(--tinta) }
.clima-punto-met small{ color:var(--gris) }

/* Barra de sesión (cuando el login está activo) */
.sesion-chip{ position:absolute; top:10px; right:14px; z-index:5; display:none; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--borde); border-radius:20px; padding:4px 6px 4px 12px;
  color:var(--texto); font:12px 'Barlow',sans-serif; box-shadow:var(--sombra) }
.sesion-chip.visible{ display:flex }
.sesion-chip button{ border:none; border-radius:14px; background:var(--verde); color:#fff; padding:4px 10px; cursor:pointer; font:inherit }
.sesion-chip button:hover{ background:#c0392b }

@media (max-width: 760px){
  .cap-panel{ top:auto; bottom:12px; right:12px; left:12px; width:auto; max-width:none; max-height:65% }
}