/* =============================================================================
   ESTILOS DE LOS WIDGETS DE CLIMA Y COTIZACIONES
   =============================================================================

   Estos dos widgets van a estar en muchos diarios a la vez. Si todos se ven
   igual, el sistema se nota: el lector percibe "una plantilla" en vez de un
   diario. Por eso hay estilos que cambian la FORMA, no solo el color; diez
   variaciones cromaticas de la misma tarjeta se ven iguales a los tres meses.

   Los nombres se comparten entre los dos widgets a proposito, para que un
   diario elija una familia y queden hermanados en vez de chocar entre si.

   Variable de color: --w-acento (la define el diario desde el editor).
   ========================================================================== */

.widget-weather,
.widget-currency {
    --w-acento: var(--primary, #2E5BFF);
}

/* =============================================================================
   1. MINIMAL — sin recuadro, solo tipografia. Editorial y discreto.
   ========================================================================== */

.widget.wstyle-minimal {
    background: none;
    box-shadow: none;
    border: none;
    border-top: 2px solid var(--w-acento);
    border-radius: 0;
    padding: 14px 0 0;
}

.widget.wstyle-minimal .widget-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #7A8496);
    margin-bottom: 10px;
}

.widget.wstyle-minimal .weather-content,
.widget.wstyle-minimal .currency-content {
    padding: 0;
}

.widget.wstyle-minimal .dolar-item,
.widget.wstyle-minimal .currency-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* =============================================================================
   2. COMPACTO — todo en una linea. Sirve arriba de la portada o en el pie,
   no solo en la barra lateral.
   ========================================================================== */

.widget.wstyle-compacto {
    padding: 10px 14px;
}

.widget.wstyle-compacto .widget-title {
    display: none; /* en una sola linea el titulo sobra: el dato se explica solo */
}

.widget.wstyle-compacto .weather-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget.wstyle-compacto .weather-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.widget.wstyle-compacto .weather-icon { font-size: 20px; color: var(--w-acento); }
.widget.wstyle-compacto .temp-value   { font-size: 20px; font-weight: 800; }
.widget.wstyle-compacto .temp-feels,
.widget.wstyle-compacto .weather-desc,
.widget.wstyle-compacto .weather-details,
.widget.wstyle-compacto .weather-updated,
.widget.wstyle-compacto .currency-updated,
.widget.wstyle-compacto .currency-base { display: none; }

.widget.wstyle-compacto .weather-location {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.widget.wstyle-compacto .dolar-list {
    display: flex;
    gap: 18px;
    margin: 0;
}

.widget.wstyle-compacto .dolar-item {
    border: none;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.widget.wstyle-compacto .dolar-nombre { margin: 0; font-size: 12px; }
.widget.wstyle-compacto .dolar-valores { gap: 8px; }
.widget.wstyle-compacto .dolar-valor { flex-direction: row; align-items: baseline; gap: 4px; }
.widget.wstyle-compacto .dolar-valor small { font-size: 9px; }
.widget.wstyle-compacto .dolar-valor strong { font-size: 13px; }

/* =============================================================================
   3. OSCURO — panel negro con los numeros en color. Serio y con peso.
   ========================================================================== */

.widget.wstyle-oscuro {
    background: #14161c;
    border: none;
    box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.6);
}

.widget.wstyle-oscuro .widget-title,
.widget.wstyle-oscuro .weather-location,
.widget.wstyle-oscuro .dolar-nombre,
.widget.wstyle-oscuro .currency-code,
.widget.wstyle-oscuro .temp-value {
    color: #fff;
}

.widget.wstyle-oscuro .widget-title { border-bottom-color: rgba(255, 255, 255, 0.12); }
.widget.wstyle-oscuro .widget-title i { color: var(--w-acento); }

.widget.wstyle-oscuro .weather-icon,
.widget.wstyle-oscuro .dolar-valor strong,
.widget.wstyle-oscuro .currency-rate {
    color: var(--w-acento);
}

.widget.wstyle-oscuro .temp-feels,
.widget.wstyle-oscuro .weather-desc,
.widget.wstyle-oscuro .weather-details,
.widget.wstyle-oscuro .weather-updated,
.widget.wstyle-oscuro .currency-updated,
.widget.wstyle-oscuro .currency-base,
.widget.wstyle-oscuro .dolar-valor small {
    color: rgba(255, 255, 255, 0.55);
}

.widget.wstyle-oscuro .dolar-item,
.widget.wstyle-oscuro .currency-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   4. TABLERO — monoespaciada, tipo terminal financiera. Le queda especialmente
   bien a cotizaciones.
   ========================================================================== */

.widget.wstyle-tablero {
    background: #0b0f14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.widget.wstyle-tablero .widget-title {
    /* Sobre el casi negro de este estilo, un acento medio no se lee: el azul
       #2e5bff daba 3,71, por debajo del minimo de 4,5. La variante aclarada
       mantiene el tono del diario y pasa. Si el acento ya se lee, es el mismo. */
    color: var(--w-acento-oscuro, var(--w-acento));
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.widget.wstyle-tablero .dolar-nombre,
.widget.wstyle-tablero .currency-code,
.widget.wstyle-tablero .weather-location {
    color: #cfd6e4;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.widget.wstyle-tablero .dolar-valor strong,
.widget.wstyle-tablero .currency-rate,
.widget.wstyle-tablero .temp-value {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    color: #4ade80; /* verde de terminal: es el codigo visual del rubro */
}

.widget.wstyle-tablero .dolar-valor small,
.widget.wstyle-tablero .temp-feels,
.widget.wstyle-tablero .weather-desc,
.widget.wstyle-tablero .weather-details,
.widget.wstyle-tablero .weather-updated,
.widget.wstyle-tablero .currency-updated,
.widget.wstyle-tablero .currency-base {
    /* Estaba en 0,5, que sobre el negro de este estilo da 4,02 de contraste:
       por debajo del minimo de 4,5. Con 0,72 da 7,0 y sigue leyendose como el
       dato secundario que es. Medido, no mirado. */
    color: rgba(207, 214, 228, 0.72);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
}

.widget.wstyle-tablero .weather-icon { color: #4ade80; }

.widget.wstyle-tablero .dolar-item,
.widget.wstyle-tablero .currency-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

/* =============================================================================
   5. CONTORNO — sin relleno, con un borde grueso del color elegido.
   =============================================================================

   Reemplaza al estilo "Vidrio" que habia antes. El vidrio esmerilado necesita
   algo detras para desenfocar, y el fondo de los diarios es de color plano:
   el efecto no se veia nunca, asi que era una opcion muerta en la lista.
   Este se apoya en el borde y funciona sobre cualquier fondo. */

.widget.wstyle-contorno {
    background: none;
    box-shadow: none;
    border: 2px solid var(--w-acento);
    border-radius: var(--radius-lg, 14px);
}

.widget.wstyle-contorno .widget-title {
    color: var(--w-acento-texto, var(--w-acento));
    border-bottom: 2px solid var(--w-acento);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.widget.wstyle-contorno .weather-icon,
.widget.wstyle-contorno .temp-value,
.widget.wstyle-contorno .dolar-valor strong,
.widget.wstyle-contorno .currency-rate {
    color: var(--w-acento-texto, var(--w-acento));
}

.widget.wstyle-contorno .dolar-item,
.widget.wstyle-contorno .currency-item {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   6. DEGRADADO — el color del diario, en degradado.
   ========================================================================== */

.widget.wstyle-degradado {
    /* El extremo claro arrancaba en el acento puro. Con un acento vivo —el azul
       #2e5bff de este diario, por ejemplo— el texto secundario blanco al 75%
       daba 3,6 de contraste sobre esa punta, por debajo del minimo de 4,5. Se le
       baja un escalon al extremo claro: el degradado se sigue viendo igual de
       vivo y aparece el margen que faltaba. Medido: 3,6 -> 5,5. */
    background: linear-gradient(135deg, color-mix(in srgb, var(--w-acento) 82%, #000), color-mix(in srgb, var(--w-acento) 45%, #000));
    border: none;
    color: #fff;
}

.widget.wstyle-degradado .widget-title,
.widget.wstyle-degradado .weather-location,
.widget.wstyle-degradado .temp-value,
.widget.wstyle-degradado .dolar-nombre,
.widget.wstyle-degradado .currency-code,
.widget.wstyle-degradado .dolar-valor strong,
.widget.wstyle-degradado .currency-rate,
.widget.wstyle-degradado .weather-icon {
    color: #fff;
}

.widget.wstyle-degradado .widget-title { border-bottom-color: rgba(255, 255, 255, 0.25); }

.widget.wstyle-degradado .temp-feels,
.widget.wstyle-degradado .weather-desc,
.widget.wstyle-degradado .weather-details,
.widget.wstyle-degradado .weather-updated,
.widget.wstyle-degradado .currency-updated,
.widget.wstyle-degradado .currency-base,
.widget.wstyle-degradado .dolar-valor small,
.widget.wstyle-degradado .weather-details span {
    /* 0,75 no alcanzaba sobre la punta clara del degradado. Con 0,85 sigue
       leyendose como texto secundario y pasa el minimo. El span va listado
       porque tiene su propio gris puesto sobre el elemento y le gana al
       contenedor. */
    color: rgba(255, 255, 255, 0.85);
}

.widget.wstyle-degradado .dolar-item,
.widget.wstyle-degradado .currency-item {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Navegadores sin color-mix: degradado simple, no un fondo plano. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .widget.wstyle-degradado {
        background: linear-gradient(135deg, var(--w-acento), rgba(0, 0, 0, 0.55));
    }
}

/* =============================================================================
   7. TITULAR — el numero como protagonista. Muy visual.
   ========================================================================== */

.widget.wstyle-titular .widget-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted, #7A8496);
    border: none;
    margin-bottom: 2px;
}

.widget.wstyle-titular .weather-main {
    display: block;
    text-align: center;
}

.widget.wstyle-titular .weather-icon { display: none; }

.widget.wstyle-titular .temp-value {
    font-family: var(--font-display, inherit);
    font-size: 58px;
    font-weight: 800;
    line-height: 1;
    color: var(--w-acento-texto, var(--w-acento));
    display: block;
}

.widget.wstyle-titular .temp-feels { display: none; }

.widget.wstyle-titular .weather-location,
.widget.wstyle-titular .weather-desc {
    text-align: center;
}

.widget.wstyle-titular .weather-desc {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.widget.wstyle-titular .dolar-item {
    text-align: center;
    padding: 14px 0;
}

.widget.wstyle-titular .dolar-valores { justify-content: center; gap: 26px; }

.widget.wstyle-titular .dolar-valor strong {
    font-family: var(--font-display, inherit);
    font-size: 26px;
    color: var(--w-acento-texto, var(--w-acento));
}

/* =============================================================================
   8. CIELO (solo clima) — el fondo cambia segun lo que esta pasando afuera.
   El lector entiende de un vistazo sin leer una palabra.
   ========================================================================== */

.widget.wstyle-cielo {
    border: none;
    color: #fff;
    box-shadow: 0 8px 26px -14px rgba(0, 0, 0, 0.5);
}

.widget.wstyle-cielo .widget-title,
.widget.wstyle-cielo .weather-location,
.widget.wstyle-cielo .temp-value,
.widget.wstyle-cielo .weather-icon,
.widget.wstyle-cielo .weather-desc {
    color: #fff;
}

.widget.wstyle-cielo .widget-title { border-bottom-color: rgba(255, 255, 255, 0.25); }

.widget.wstyle-cielo .temp-feels,
.widget.wstyle-cielo .weather-details,
.widget.wstyle-cielo .weather-updated {
    color: rgba(255, 255, 255, 0.8);
}

.widget.wstyle-cielo .weather-icon { font-size: 34px; }

.widget.cielo-despejado { background: linear-gradient(160deg, #f6b93b, #e58e26); }
.widget.cielo-parcial   { background: linear-gradient(160deg, #74b9ff, #a29bfe); }
.widget.cielo-nublado   { background: linear-gradient(160deg, #6b7280, #434a57); } /* oscurecido: con #7f8c9b el texto blanco daba 3,43 de contraste */
.widget.cielo-lluvia    { background: linear-gradient(160deg, #4b6cb7, #182848); }
.widget.cielo-tormenta  { background: linear-gradient(160deg, #373b44, #4286f4); }
.widget.cielo-nieve     { background: linear-gradient(160deg, #a8c8e8, #6a89a7); }
.widget.cielo-niebla    { background: linear-gradient(160deg, #a9b3bd, #7a8494); }

/* De noche manda la hora sobre la condicion: un degradado de mediodia a las
   once de la noche se ve mal aunque el cielo este despejado. */
.widget.cielo-noche  { background: linear-gradient(160deg, #1e3163, #0b1229); }


/* =============================================================================
   9. CINTA (solo cotizaciones) — desplazamiento continuo, tipo ticker.
   ========================================================================== */

.widget.wstyle-cinta {
    background: #14161c;
    border: none;
    padding: 0;
    overflow: hidden;
}

.widget.wstyle-cinta .widget-title { display: none; }
.widget.wstyle-cinta .currency-content { padding: 0; }
.widget.wstyle-cinta .currency-updated,
.widget.wstyle-cinta .currency-base { display: none; }

.widget.wstyle-cinta .dolar-list,
.widget.wstyle-cinta .currency-list {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 11px 0;
    white-space: nowrap;
    /* La cinta se desplaza sola; el ancho lo da el contenido. */
    animation: cinta-desplazar 26s linear infinite;
    width: max-content;
}

.widget.wstyle-cinta:hover .dolar-list,
.widget.wstyle-cinta:hover .currency-list {
    animation-play-state: paused; /* para poder leer el numero */
}

.widget.wstyle-cinta .dolar-item,
.widget.wstyle-cinta .currency-item {
    border: none;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.widget.wstyle-cinta .dolar-nombre {
    margin: 0;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.widget.wstyle-cinta .dolar-valores { gap: 12px; }
.widget.wstyle-cinta .dolar-valor { flex-direction: row; align-items: baseline; gap: 5px; }
.widget.wstyle-cinta .dolar-valor small { color: rgba(255, 255, 255, 0.5); font-size: 9px; }
.widget.wstyle-cinta .dolar-valor strong { color: var(--w-acento); font-size: 14px; }
.widget.wstyle-cinta .currency-code { color: #fff; }
.widget.wstyle-cinta .currency-rate { color: var(--w-acento); }

@keyframes cinta-desplazar {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Una cinta en movimiento permanente molesta a mucha gente y hace imposible
   leer para quien tiene dificultades motrices o de atencion. */
@media (prefers-reduced-motion: reduce) {
    .widget.wstyle-cinta .dolar-list,
    .widget.wstyle-cinta .currency-list {
        animation: none;
        flex-wrap: wrap;
        white-space: normal;
        width: auto;
        padding: 11px 14px;
    }
}

/* =============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    .widget.wstyle-titular .temp-value { font-size: 44px; }
    .widget.wstyle-titular .dolar-valor strong { font-size: 21px; }

    .widget.wstyle-compacto .weather-content { flex-wrap: wrap; gap: 8px; }
    .widget.wstyle-compacto .dolar-list { flex-wrap: wrap; gap: 12px; }
}

/* =============================================================================
   El icono del titulo
   =============================================================================
   El icono del encabezado hereda el color de acento del DIARIO, no el del
   estilo del widget. Sobre los fondos oscuros o de color eso lo deja rojo
   (o del color que sea el sitio) donde deberia acompanar al estilo. Se ve
   como si estuviera mal puesto. */

.widget.wstyle-cielo .widget-title i,
.widget.wstyle-degradado .widget-title i {
    color: #fff;
}

.widget.wstyle-tablero .widget-title i,
.widget.wstyle-contorno .widget-title i,
.widget.wstyle-titular .widget-title i,
.widget.wstyle-minimal .widget-title i {
    color: var(--w-acento-texto, var(--w-acento));
}

/* Todos los iconos del cuerpo, no solo el del titulo.
   El del pin de la ciudad y los de humedad y viento tambien heredan el color
   de acento del DIARIO, asi que sobre fondo oscuro quedaban rojos. Se listan
   aparte porque estan dentro de .weather-location y .weather-details. */

.widget.wstyle-cielo .weather-location i,
.widget.wstyle-cielo .weather-details i,
.widget.wstyle-degradado .weather-location i,
.widget.wstyle-degradado .weather-details i,
.widget.wstyle-oscuro .weather-location i,
.widget.wstyle-oscuro .weather-details i {
    color: rgba(255, 255, 255, 0.75);
}

.widget.wstyle-tablero .weather-location i,
.widget.wstyle-tablero .weather-details i {
    color: rgba(207, 214, 228, 0.5);
}

.widget.wstyle-contorno .weather-location i,
.widget.wstyle-contorno .weather-details i {
    color: var(--w-acento);
}

/* Y los NUMEROS que van al lado de esos iconos: la humedad y el viento.
   Cuando se arreglaron los iconos quedo afuera el <span> que los acompaña, que
   tiene su propio gris (#6b7280) puesto por style.css sobre el propio span. La
   regla de arriba apunta al contenedor .weather-details, asi que el color del
   span le gana por ir sobre el elemento mismo: sobre el panel negro daba 3,74
   de contraste, por debajo del minimo de 4,5. Medido, no mirado.
   Con 0,75 —el mismo valor que los iconos— da 10,6. */

.widget.wstyle-cielo .weather-details span,
.widget.wstyle-degradado .weather-details span,
.widget.wstyle-oscuro .weather-details span {
    color: rgba(255, 255, 255, 0.75);
}

.widget.wstyle-tablero .weather-details span {
    color: rgba(207, 214, 228, 0.72);
}

/* Foto tiene el mismo agujero: su regla tambien apunta al contenedor. */
.widget.wstyle-foto .weather-details span {
    color: rgba(255, 255, 255, 0.8);
}

/* =============================================================================
   FOTO — fondo propio, con modo normal o vidrio esmerilado
   =============================================================================

   Los fondos predefinidos se dibujan con CSS y no son imagenes. Tres razones:
   no hay que verificar la licencia de nada, no suman peso al paquete (que se
   despliega en todos los sitios) y se tinen con el color de cada diario, asi
   que no terminan viendose iguales en todos lados, que es lo que este trabajo
   vino a evitar.

   Para una foto de verdad esta la biblioteca del sitio, donde cada diario pone
   la suya con la licencia que quiera.

   Aca el modo vidrio SI tiene sentido: hay algo detras para desenfocar. Como
   estilo suelto sobre el fondo plano del diario no se veia, por eso se saco. */

.widget.wstyle-foto {
    position: relative;
    border: none;
    overflow: hidden;
    background-color: #223;
    background-size: cover;
    background-position: center;
    color: #fff;
}


/* --- Modo normal: velo oscuro para que el texto se lea sobre cualquier fondo.
   Sin esto, una foto clara deja el texto blanco ilegible. --- */
.widget.wstyle-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    /* El velo arrancaba en 0,25 arriba. Sobre los fondos mas claros de la lista
       —el verde del "aurora", por ejemplo— el texto secundario quedaba en 3,0 de
       contraste en la parte de arriba del recuadro. Con 0,42 pasa el minimo en
       todo el alto y la foto se sigue viendo. El text-shadow ayuda a la vista
       pero NO cuenta para la medicion, asi que no alcanzaba con eso. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.7));
    pointer-events: none;
}

.widget.wstyle-foto > * {
    position: relative; /* por encima del velo */
}

.widget.wstyle-foto .widget-title,
.widget.wstyle-foto .widget-title i,
.widget.wstyle-foto .weather-location,
.widget.wstyle-foto .temp-value,
.widget.wstyle-foto .weather-icon,
.widget.wstyle-foto .weather-desc,
.widget.wstyle-foto .dolar-nombre,
.widget.wstyle-foto .currency-code,
.widget.wstyle-foto .dolar-valor strong,
.widget.wstyle-foto .currency-rate {
    color: #fff;
}

.widget.wstyle-foto .widget-title {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.widget.wstyle-foto .temp-feels,
.widget.wstyle-foto .weather-details,
.widget.wstyle-foto .weather-details i,
.widget.wstyle-foto .weather-location i,
.widget.wstyle-foto .weather-updated,
.widget.wstyle-foto .currency-updated,
.widget.wstyle-foto .currency-base,
.widget.wstyle-foto .dolar-valor small {
    color: rgba(255, 255, 255, 0.8);
}

.widget.wstyle-foto .dolar-item,
.widget.wstyle-foto .currency-item {
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* --- Modo vidrio: el contenido va sobre un panel esmerilado --- */

.widget.wstyle-foto.foto-vidrio::before {
    /* El velo se atenua: el desenfoque ya aporta contraste y dos capas
       oscuras juntas apagan la imagen. */
    background: rgba(0, 0, 0, 0.15);
}

.widget.wstyle-foto.foto-vidrio .weather-content,
.widget.wstyle-foto.foto-vidrio .currency-content {
    background: rgba(255, 255, 255, 0.13);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius, 10px);
    padding: 14px;
}

.widget.wstyle-foto.foto-vidrio .widget-title {
    /* Queda sobre la imagen, sin panel: necesita sombra para despegarse. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    border-bottom: none;
}

/* Sin soporte de desenfoque el panel queda solido, no transparente e
   ilegible sobre la foto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .widget.wstyle-foto.foto-vidrio .weather-content,
    .widget.wstyle-foto.foto-vidrio .currency-content {
        background: rgba(20, 22, 28, 0.72);
    }
}

/* =============================================================================
   Fondos predefinidos — dibujados con CSS, tenidos con el color del diario
   ========================================================================== */

/* Ondas: color que fluye, sin trama.
   Es el unico de los seis SIN textura repetida, y ahi esta su diferencia: los
   otros cinco tienen trama (anillos, puntos, rayas, manchas, circulos). Se
   probo con franjas y quedaba igual que Diagonales, solo que en otro angulo.
   Las manchas van bien contrastadas para que se lea como color en movimiento
   y no como un degradado plano. */
.widget.fondo-ondas {
    background-image:
        radial-gradient(ellipse 65% 45% at 12% 8%, var(--w-acento), transparent 70%),
        radial-gradient(ellipse 55% 40% at 88% 42%, #7b5cff, transparent 68%),
        radial-gradient(ellipse 75% 50% at 40% 105%, var(--w-acento), transparent 72%),
        linear-gradient(160deg, #1b2340, #0b0f1e);
}

/* Lineas topograficas.
   La textura va bien marcada a proposito: con opacidad baja, a 300px de ancho
   —que es lo que mide una barra lateral— el fondo se leia como un rectangulo
   azul cualquiera, indistinguible de los demas. */
.widget.fondo-topografico {
    background-image:
        repeating-radial-gradient(circle at 28% 18%, transparent 0 13px, rgba(255, 255, 255, 0.17) 13px 15px),
        linear-gradient(150deg, var(--w-acento), #10131f);
}

/* Puntos */
.widget.fondo-puntos {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.32) 1.9px, transparent 2px),
        linear-gradient(140deg, var(--w-acento), #12162a);
    background-size: 12px 12px, cover;
}

/* Diagonales */
.widget.fondo-diagonales {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px),
        linear-gradient(140deg, var(--w-acento), #141726);
}

/* Aurora: manchas de color desenfocadas */
.widget.fondo-aurora {
    background-image:
        radial-gradient(circle at 15% 25%, var(--w-acento), transparent 45%),
        radial-gradient(circle at 85% 20%, #7b5cff, transparent 45%),
        radial-gradient(circle at 60% 90%, #00c48c, transparent 45%),
        linear-gradient(160deg, #0f1424, #070a14);
}

/* Bokeh: circulos de luz */
.widget.fondo-bokeh {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0 22px, transparent 23px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.13) 0 34px, transparent 35px),
        radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.1) 0 16px, transparent 17px),
        linear-gradient(150deg, var(--w-acento), #0e1120);
}

/* =============================================================================
   Cielos claros: texto oscuro
   =============================================================================
   Un cielo despejado es ambar brillante, y el texto blanco encima daba una
   relacion de contraste de 1,77 — practicamente ilegible, aunque de reojo
   "se entienda". Oscurecer el ambar habria arruinado la idea (un sol no es
   marron), asi que sobre los cielos claros el texto pasa a oscuro.

   Los cielos oscuros (lluvia, tormenta, nublado, noche) siguen con texto
   blanco, que es lo que corresponde ahi. */

.widget.cielo-despejado,
.widget.cielo-parcial,
.widget.cielo-nieve,
.widget.cielo-niebla {
    color: #1a1d26;
}

.widget.cielo-despejado .widget-title,
.widget.cielo-despejado .widget-title i,
.widget.cielo-despejado .weather-location,
.widget.cielo-despejado .temp-value,
.widget.cielo-despejado .weather-icon,
.widget.cielo-despejado .weather-desc,
.widget.cielo-parcial .widget-title,
.widget.cielo-parcial .widget-title i,
.widget.cielo-parcial .weather-location,
.widget.cielo-parcial .temp-value,
.widget.cielo-parcial .weather-icon,
.widget.cielo-parcial .weather-desc,
.widget.cielo-nieve .widget-title,
.widget.cielo-nieve .widget-title i,
.widget.cielo-nieve .weather-location,
.widget.cielo-nieve .temp-value,
.widget.cielo-nieve .weather-icon,
.widget.cielo-nieve .weather-desc,
.widget.cielo-niebla .widget-title,
.widget.cielo-niebla .widget-title i,
.widget.cielo-niebla .weather-location,
.widget.cielo-niebla .temp-value,
.widget.cielo-niebla .weather-icon,
.widget.cielo-niebla .weather-desc {
    color: #1a1d26;
}

.widget.cielo-despejado .temp-feels,
.widget.cielo-despejado .weather-details,
.widget.cielo-despejado .weather-details i,
.widget.cielo-despejado .weather-location i,
.widget.cielo-despejado .weather-updated,
.widget.cielo-parcial .temp-feels,
.widget.cielo-parcial .weather-details,
.widget.cielo-parcial .weather-details i,
.widget.cielo-parcial .weather-location i,
.widget.cielo-parcial .weather-updated,
.widget.cielo-nieve .temp-feels,
.widget.cielo-nieve .weather-details,
.widget.cielo-nieve .weather-details i,
.widget.cielo-nieve .weather-location i,
.widget.cielo-nieve .weather-updated,
.widget.cielo-niebla .temp-feels,
.widget.cielo-niebla .weather-details,
.widget.cielo-niebla .weather-details i,
.widget.cielo-niebla .weather-location i,
.widget.cielo-niebla .weather-updated {
    color: rgba(26, 29, 38, 0.72);
}

.widget.cielo-despejado .widget-title,
.widget.cielo-parcial .widget-title,
.widget.cielo-nieve .widget-title,
.widget.cielo-niebla .widget-title {
    border-bottom-color: rgba(26, 29, 38, 0.25);
}