/* ============================================================
   CLIMA — chip de la barra superior. Va con clima.js
============================================================ */
.clima-chip{
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  background:var(--panel); border:1px solid var(--linea);
  border-radius:999px; padding:4px 12px; white-space:nowrap;
  font-size:12.5px; color:var(--gris);
}
.clima-ico{font-size:15px; line-height:1}
.clima-temp{font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums}
/* Es el texto mas largo de la barra ("Ushuaia . Chaparrones de nieve .
   viento 11 km/h") y el menos urgente: que se corte el antes de que algo
   se caiga a otro renglon. */
.clima-txt{font-size:12px; overflow:hidden; text-overflow:ellipsis; min-width:0}
@media (max-width:820px){ .clima-txt{display:none} }

/* ---------- El chip ahora abre un panel ---------- */
/* min-width:0 para poder achicarse dentro de .barra-tools, y el max-width
   del chip para que el recorte OCURRA: es inline-flex, asi que sin tope se
   queda en su ancho natural y se le monta encima al boton de fotos. */
.clima-wrap{position:relative; min-width:0}
.clima-chip{cursor:pointer; max-width:100%}
.clima-chip:hover{border-color:var(--azul)}
.clima-chip[aria-expanded="true"]{border-color:var(--azul); background:var(--resalte)}
.clima-flecha{font-size:10px; opacity:.7}

.clima-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:800;
  width:min(340px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:0 16px 44px rgba(0,0,0,.18);
  overflow:hidden; color:var(--tinta);
}
.clima-panel-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--linea); background:var(--suave);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gris);
}
.clima-ciudades{display:flex; gap:4px}
.clima-ciu{
  border:1px solid var(--linea); background:var(--panel); color:var(--gris);
  font:inherit; font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0;
  padding:3px 8px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.clima-ciu:hover{border-color:var(--azul)}
.clima-ciu.activa{border-color:var(--azul); color:var(--azul); background:var(--resalte)}

/* Tira de los próximos días */
.clima-tira{display:flex; gap:4px; padding:8px; overflow-x:auto}
.clima-dia{
  flex:1 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:42px; padding:6px 4px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:none; color:inherit; font:inherit;
}
.clima-dia:hover{background:var(--resalte)}
.clima-dia.activo{border-color:var(--azul); background:var(--resalte)}
.clima-dia-nom{font-size:10px; color:var(--gris); text-transform:capitalize}
.clima-dia-ico{font-size:16px; line-height:1.2}
.clima-dia-max{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.clima-dia-min{font-size:10.5px; color:var(--gris); font-variant-numeric:tabular-nums}

/* Detalle del día elegido */
.clima-detalle{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-top:1px solid var(--linea);
}
.clima-det-ico{font-size:34px; line-height:1}
.clima-det-cuerpo{min-width:0}
.clima-det-fecha{font-size:11.5px; color:var(--gris)}
.clima-det-temp{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:1px}
.clima-det-temp b{font-size:22px; font-variant-numeric:tabular-nums}
.clima-det-min{font-size:13px; color:var(--gris); font-variant-numeric:tabular-nums}
.clima-det-txt{font-size:12.5px}
.clima-det-extra{font-size:11.5px; color:var(--gris); margin-top:3px}
.clima-vacio{font-size:12.5px; color:var(--gris); margin:0}

.clima-panel-pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; border-top:1px solid var(--linea); background:var(--suave);
}
.clima-panel-pie label{font-size:11.5px; color:var(--gris)}
.clima-panel-pie input{
  border:1px solid var(--linea); border-radius:6px; padding:3px 7px;
  font:inherit; font-size:12px; background:var(--panel); color:inherit;
}