/* =============================================================================
   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 {
    color: 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 {
    color: rgba(207, 214, 228, 0.5);
    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. VIDRIO — translucido con desenfoque sobre lo que haya detras.
   ========================================================================== */

.widget.wstyle-vidrio {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.25);
}

.widget.wstyle-vidrio .widget-title {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

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

/* Sin soporte de desenfoque queda un fondo solido, no uno transparente
   ilegible sobre cualquier cosa. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .widget.wstyle-vidrio { background: rgba(255, 255, 255, 0.94); }
}

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

.widget.wstyle-degradado {
    background: linear-gradient(135deg, var(--w-acento), color-mix(in srgb, var(--w-acento) 55%, #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 {
    color: rgba(255, 255, 255, 0.75);
}

.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);
    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);
}

/* =============================================================================
   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, #7f8c9b, #57606f); }
.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); }

/* =============================================================================
   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-vidrio .widget-title i,
.widget.wstyle-titular .widget-title i,
.widget.wstyle-minimal .widget-title i {
    color: var(--w-acento);
}