/* Chismy — clima OpenWeatherMap (tema sunshine-liquidglass)
   --------------------------------------------------------------------------
   Acabado glass de la tarjeta del home (#chismy_weather_card, portada del
   widget de clima del tema wondertag) y de la píldora "Usar mi ubicación".
   Usa las recetas/variables del propio tema (stylesheet/glassliquid/
   sunshine-liquidglass.css: --lg-radius-card, --lg-blur-mult). El widget
   oscuro del sidebar (.wow_weather, style.css) se conserva tal cual; solo se
   estiliza aquí la píldora que le añadimos. */

.chismy_weather_card {
	margin: 0 0 15px;
	border-radius: var(--lg-radius-card, 28px);
	padding: 16px 20px 14px;
	background: rgba(255, 255, 255, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	-webkit-backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
	backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
	color: #3f4a5a;
}

body.lg-night .chismy_weather_card {
	background: rgba(21, 27, 38, 0.5);
	border-color: rgba(255, 255, 255, 0.14);
	color: #cfd8e6;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.chismy_weather_card_head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.chismy_weather_card .chismy_weather_icon {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	margin: -6px 0;
}

.chismy_weather_temp_box {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.chismy_weather_temp {
	font-size: 38px;
	font-weight: 600;
}

.chismy_weather_condition {
	font-size: 17px;
	font-weight: 500;
	margin-top: 2px;
}

.chismy_weather_condition_sub {
	font-size: 13.5px;
	opacity: 0.75;
}

.chismy_weather_condition_sub:first-letter {
	text-transform: capitalize;
}

.chismy_weather_meta {
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
}

.chismy_weather_zone {
	font-weight: 500;
	opacity: 0.85;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chismy_weather_feels {
	opacity: 0.75;
}

/* Viento / Humedad / Amanecer / Atardecer */
.chismy_weather_stats {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.chismy_weather_stats > div {
	position: relative;
	flex: 1;
	text-align: center;
	padding: 9px 6px;
	border-radius: var(--lg-radius-field, 12px);
}

.chismy_weather_stats > div:before {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0.07;
	border-radius: inherit;
}

.chismy_weather_stats p {
	margin: 0 0 2px;
	font-size: 12px;
	opacity: 0.75;
	position: relative;
}

.chismy_weather_stats span {
	font-size: 14.5px;
	font-weight: 600;
	position: relative;
}

/* Pronóstico compacto (4 días, sigue siendo el del perfil/ciudad) */
.chismy_weather_forecast {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.chismy_weather_forecast > div {
	flex: 1;
	text-align: center;
	font-size: 12.5px;
	padding: 7px 4px;
	border-radius: var(--lg-radius-field, 12px);
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

body.lg-night .chismy_weather_forecast > div {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
}

.chismy_weather_forecast > div > div {
	font-weight: 500;
	opacity: 0.85;
	margin-bottom: 2px;
}

/* Píldora de geolocalización (también dentro del widget oscuro .wow_weather) */
.chismy_weather_geo_row {
	text-align: center;
	margin-top: 12px;
}

.chismy_weather_geo_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(64, 158, 255, 0.45);
	border-radius: 999px;
	padding: 5px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	color: var(--lg-accent, var(--main-color, #409eff));
	background: rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
	backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chismy_weather_geo_btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(64, 158, 255, 0.25);
}

.chismy_weather_geo_btn svg {
	margin-top: -2px;
}

body.lg-night .chismy_weather_geo_btn {
	background: rgba(255, 255, 255, 0.08);
}

/* Variante sobre el widget oscuro del sidebar (.wow_weather es #2d3a4f) */
.wow_weather .chismy_weather_geo_btn {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.wow_weather .chismy_weather_geo_btn:hover {
	box-shadow: 0 4px 14px rgba(255, 255, 255, 0.18);
}

/* Nota del fallback (visible tras denegar el permiso) */
.chismy_weather_geo_note {
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	opacity: 0.7;
}

/* Móvil: la tarjeta respira igual en columnas estrechas */
@media (max-width: 600px) {
	.chismy_weather_card_head {
		flex-wrap: wrap;
	}
	.chismy_weather_meta {
		margin-left: 0;
		text-align: left;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}
	.chismy_weather_stats,
	.chismy_weather_forecast {
		flex-wrap: wrap;
	}
	.chismy_weather_stats > div,
	.chismy_weather_forecast > div {
		flex: 1 1 40%;
	}
}

/* ==========================================================================
   Barra de saludo glass + cluster de clima (2026-10-23, parte 20)
   --------------------------------------------------------------------------
   .greetalert (layout/home/content.phtml: la barra "Buenas noches, {nombre}"
   + frase motivacional) pasa de caja BLANCA opaca a capsula liquid glass con
   el mismo lenguaje que las cards del feed y que .chismy_weather_card de
   arriba: rgba translucido + backdrop blur (--lg-blur-mult) + borde claro +
   inner highlight + sombra suave. El acento por franja horaria que pinta el
   JS (border-left-color inline) se conserva: por eso el borde exterior se
   declara por lados (top/right/bottom) y el izquierdo queda en style.css
   (.greetalert{border-left:2.5px solid}). Dark: body.lg-night.
   El cluster de la derecha (.chismy-greet-weather) se rellena desde
   javascript/chismy-weather-geo.js con el MISMO proxy xhr/chismy_weather.php
   (s=city en DOM ready / s=precise con la caché GPS); si el endpoint no
   responde (sin weather_key) queda "—" y la barra sigue funcionando. El
   dismiss (cookie day_status + data-dismiss="alert") no se toca. */

.greetalert {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 50px 13px 18px;
	background: rgba(255, 255, 255, 0.42);
	border-top: 1px solid rgba(255, 255, 255, 0.55);
	border-right: 1px solid rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 22px;
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 var(--lg-glass-highlight, rgba(255, 255, 255, 0.9));
	-webkit-backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
	backdrop-filter: blur(calc(12px * var(--lg-blur-mult, 1))) saturate(1.5);
	color: #3f4a5a;
}

body.lg-night .greetalert {
	background: rgba(21, 27, 38, 0.5);
	border-top-color: rgba(255, 255, 255, 0.14);
	border-right-color: rgba(255, 255, 255, 0.14);
	border-bottom-color: rgba(255, 255, 255, 0.14);
	color: #cfd8e6;
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Saludo + frase: glow blanco sutil (pedido explicito del usuario, mismo
   tratamiento que la portada del perfil: blanco tambien de noche). */
.greetalert .small-texts,
.greetalert p {
	padding-right: 0;
	text-shadow: var(--lg-glow-white);
}

.greetalert .small-texts {
	font-size: 17px;
}

#daynightmsg {
	flex: 1 1 auto;
	min-width: 0;
}

/* La imagen decorativa del saludo (park/desert/sea) pasa a inline junto al
   texto: antes era absoluta (right:35px) y pisaria el cluster de clima. */
.greetalert .small-texts img {
	position: static;
	right: auto;
	top: auto;
	transform: none;
	width: 30px;
	height: 30px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Boton x: circulo glass discreto (antes era el .close plano de Bootstrap). */
.greetalert .close {
	right: 10px;
	top: 10px;
	position: absolute;
	transform: none;
	float: none;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 1px 0 var(--lg-glass-highlight, rgba(255, 255, 255, 0.9));
	-webkit-backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
	backdrop-filter: blur(calc(8px * var(--lg-blur-mult, 1)));
	color: inherit;
	opacity: 0.75;
	text-shadow: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.greetalert .close:hover {
	opacity: 1;
	transform: scale(1.06);
}

body.lg-night .greetalert .close {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.22);
}

/* --- Cluster de clima a la derecha ---------------------------------------- */
.chismy-greet-weather {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	padding: 8px 14px 8px 12px;
	border-radius: var(--lg-radius-field, 12px);
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

body.lg-night .chismy-greet-weather {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.10);
}

.chismy-greet-weather-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.greetalert .chismy-greet-weather-icon {
	position: static;
	right: auto;
	top: auto;
	transform: none;
	width: 44px;
	height: 44px;
	margin: -4px 0;
	flex: 0 0 auto;
}

.chismy-greet-weather-tempbox {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.chismy-greet-weather-temp {
	font-size: 30px;
	font-weight: 600;
}

.chismy-greet-weather-desc {
	font-size: 12.5px;
	opacity: 0.8;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chismy-greet-weather-desc:first-letter {
	text-transform: capitalize;
}

/* Pildora GPS: la MISMA .chismy_weather_geo_btn de la tarjeta (el handler
   delegado de chismy-weather-geo.js la cubre; click = ubicacion precisa),
   discreta hasta que el puntero pasa por el cluster. */
.chismy-greet-weather .chismy-greet-weather-geo {
	padding: 4px 9px;
	opacity: 0.55;
}

.chismy-greet-weather:hover .chismy-greet-weather-geo,
.chismy-greet-weather .chismy-greet-weather-geo:hover,
.chismy-greet-weather .chismy-greet-weather-geo:focus {
	opacity: 1;
}

.chismy-greet-weather-metrics {
	display: flex;
	align-items: center;
	gap: 12px;
}

.chismy-greet-weather-metric {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	opacity: 0.85;
	white-space: nowrap;
}

.chismy-greet-weather-metric svg {
	opacity: 0.7;
	flex: 0 0 auto;
}

.chismy-greet-weather-metric b {
	font-weight: 600;
}

/* Movil: el cluster se envuelve bajo el saludo (sigue siendo vidrio) y lo
   primero que se sacrifica es la fila secundaria de metricas. */
@media (max-width: 640px) {
	.greetalert {
		flex-wrap: wrap;
		padding: 13px 46px 13px 16px;
	}
	.chismy-greet-weather {
		width: 100%;
		align-items: stretch;
	}
	.chismy-greet-weather-head {
		width: 100%;
	}
	.chismy-greet-weather-metrics {
		justify-content: space-between;
	}
}

@media (max-width: 420px) {
	.chismy-greet-weather-metrics {
		display: none;
	}
}

/* ==========================================================================
   Unidad °C/°F + ciudad SOLO con ubicación precisa (2026-10-24)
   --------------------------------------------------------------------------
   - Chips glass "°C | °F" (.chismy_weather_unit_toggle /
     .chismy_weather_unit_btn) en el cluster de la barra de saludo y en la
     card de sidebar; el chip activo lleva .active (lo marca
     javascript/chismy-weather-geo.js con la unidad del render).
   - Nombre de ciudad SOLO con precisión GPS: las 3 superficies (saludo
     .chismy-greet-weather-city, sidebar .wow_weather_timezone,
     weather-section .chismy_weather_zone) quedan OCULTAS salvo que su
     contenedor esté en data-precise="1" (lo pone el JS al renderizar con
     s=precise; sin caché GPS válida lo pone a "0"). Sin precisión la píldora
     GPS pasa a prominente (.chismy_weather_geo_prominent, etiqueta "Activa
     tu ubicación"). */

.chismy_weather_unit_toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
	backdrop-filter: blur(calc(10px * var(--lg-blur-mult, 1)));
}

.chismy_weather_unit_btn {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	color: inherit;
	opacity: 0.75;
	transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.chismy_weather_unit_btn:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.chismy_weather_unit_btn.active {
	opacity: 1;
	background: rgba(255, 255, 255, 0.85);
	color: #14365f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body.lg-night .chismy_weather_unit_toggle {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
}

body.lg-night .chismy_weather_unit_btn.active {
	background: rgba(255, 255, 255, 0.22);
	color: #eaf2f8;
}

/* Variante sobre el widget oscuro del sidebar (.wow_weather es #2d3a4f). */
.wow_weather .chismy_weather_unit_btn {
	color: #fff;
}

.wow_weather .chismy_weather_unit_btn.active {
	background: rgba(255, 255, 255, 0.9);
	color: #1c2b3a;
}

/* Chips del cluster de saludo: compactos. */
.chismy-greet-weather-units .chismy_weather_unit_btn {
	padding: 2px 8px;
	font-size: 11.5px;
}

/* --- Ciudad SOLO con ubicación precisa (data-precise="1" del JS) ---------- */
.chismy_weather_card .chismy_weather_zone,
.wow_weather .wow_weather_timezone,
.chismy-greet-weather .chismy-greet-weather-city {
	display: none;
}

.chismy_weather_card[data-precise="1"] .chismy_weather_zone,
.wow_weather[data-precise="1"] .wow_weather_timezone,
.chismy-greet-weather[data-precise="1"] .chismy-greet-weather-city {
	display: block;
}

.chismy-greet-weather-city {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Píldora GPS prominente mientras la precisión NO está activa ---------- */
.chismy_weather_geo_btn.chismy_weather_geo_prominent {
	opacity: 1;
	padding: 7px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: var(--lg-accent, var(--main-color, #409eff));
	border-color: transparent;
	box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--lg-accent, #409eff) 55%, transparent);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.chismy_weather_geo_btn.chismy_weather_geo_prominent:hover {
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--lg-accent, #409eff) 65%, transparent);
}

/* En el cluster del saludo (píldora icon-only hasta ahora) y sobre el widget
   oscuro del sidebar el mismo acento, con padding explicito que gana al de
   la píldora discreta. */
.chismy-greet-weather .chismy_weather_geo_btn.chismy_weather_geo_prominent,
.wow_weather .chismy_weather_geo_btn.chismy_weather_geo_prominent {
	opacity: 1;
	padding: 6px 14px;
	color: #fff;
	background: var(--lg-accent, var(--main-color, #409eff));
	border-color: transparent;
}

body.lg-night .chismy_weather_geo_btn.chismy_weather_geo_prominent,
body.lg-night .wow_weather .chismy_weather_geo_btn.chismy_weather_geo_prominent {
	color: #0b1522;
	background: #9dc7ff;
}