/* temp-widget.css */
temp-int-widget-view .temp-gauge-container {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:opacity .3s ease
}

temp-int-widget-view.loaded .temp-gauge-container {
    opacity:1
}

temp-int-widget-view .temp-gauge-bg {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .1);
    position: relative;
    overflow: hidden;
    mask-image: url(../../static/images/widgets/temp-bg.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position:center
}

temp-int-widget-view .temp-gauge-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: conic-gradient(from 180deg, transparent 0deg, transparent 36deg, rgba(var(--purple-raw), 1) 36deg, rgba(var(--darkblue-raw), 1) 84deg, rgba(var(--lightblue-raw), 1) 132deg, rgba(var(--green-raw), 1) 180deg, rgba(var(--yellow-raw), 1) 228deg, rgba(var(--orange-raw), 1) 276deg, rgba(var(--red-raw), 1) 324deg, transparent 324deg, transparent 360deg);
    border-radius: 50%;
    animation: gaugeShimmer 10s ease-in-out infinite;
    opacity:.8
}

temp-int-widget-view:not([data-temp]) .temp-gauge-bg::before {
    background:var(--widget-empty)
}

temp-int-widget-view .temp-gauge-inner {
    mask-image: url(../../static/images/widgets/temp-bg.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    aspect-ratio: 1/1;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, .1);
    opacity:1
}

temp-int-widget-view .temp-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 30%;
    background: var(--white);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(-90deg);
    transition: all .7s ease;
    opacity: 0;
    box-shadow:0 0 10px rgba(0, 0, 0, .2)
}

temp-int-widget-view.loaded .temp-needle {
    opacity:1
}

temp-int-widget-view:not([data-temp]) .temp-needle {
    opacity: 0
}

@starting-style {
    temp-int-widget-view .temp-needle {
        opacity: 0;
        transform: translate(-50%, -100%) rotate(-90deg);
    }
}

temp-int-widget-view .temp-needle::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: var(--white);
    border-radius: 50%;
    box-shadow:0 0 15px rgba(0, 0, 0, .6)
}

temp-int-widget-view .temp-needle::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    background: var(--image-temp-arrow-tip);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain
}

@keyframes gaugeShimmer {
    0%, 100% {
        opacity:.9
    }

    50% {
        opacity: 1
    }
}
.temp-trend {
    margin-top: 4px;
    font-size: 0.85em;
    opacity: 0.85;
}

.trend-hot {
    color: var(--red); /* rojo */
}

.trend-stable {
    color: var(--green); /* verde */
}

.trend-cold {
    color: var(--lightblue); /* azul */
}