/* WINCO_REALTIME_SIGNALS_V1 */

:root{
    --signal-online:#25d366;
    --signal-online-soft:rgba(37,211,102,.14);
    --signal-online-line:rgba(37,211,102,.34);

    --signal-warn:#facc15;
    --signal-warn-soft:rgba(250,204,21,.12);
    --signal-warn-line:rgba(250,204,21,.28);

    --signal-danger:#fb7185;
    --signal-danger-soft:rgba(251,113,133,.12);
    --signal-danger-line:rgba(251,113,133,.28);

    --signal-info:#38bdf8;
    --signal-info-soft:rgba(56,189,248,.12);
    --signal-info-line:rgba(56,189,248,.26);
}

/* Ponto luminoso base */
.winco-signal-dot{
    width:9px;
    height:9px;
    border-radius:999px;
    display:inline-block;
    flex:0 0 auto;
    position:relative;
    background:rgba(255,255,255,.35);
    box-shadow:0 0 0 4px rgba(255,255,255,.04);
}

.winco-signal-dot::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:999px;
    opacity:.28;
    background:currentColor;
    filter:blur(8px);
}

.winco-signal-online .winco-signal-dot,
.winco-signal-dot.online{
    background:var(--signal-online);
    color:var(--signal-online);
    box-shadow:0 0 0 4px rgba(37,211,102,.10), 0 0 18px rgba(37,211,102,.42);
}

.winco-signal-warn .winco-signal-dot,
.winco-signal-dot.warn{
    background:var(--signal-warn);
    color:var(--signal-warn);
    box-shadow:0 0 0 4px rgba(250,204,21,.09), 0 0 18px rgba(250,204,21,.28);
}

.winco-signal-danger .winco-signal-dot,
.winco-signal-dot.danger{
    background:var(--signal-danger);
    color:var(--signal-danger);
    box-shadow:0 0 0 4px rgba(251,113,133,.09), 0 0 18px rgba(251,113,133,.30);
}

.winco-signal-info .winco-signal-dot,
.winco-signal-dot.info{
    background:var(--signal-info);
    color:var(--signal-info);
    box-shadow:0 0 0 4px rgba(56,189,248,.08), 0 0 18px rgba(56,189,248,.28);
}

/* Badges/status minimalistas */
.winco-signal-online,
.status-online,
.status-working,
.status-active{
    border-color:var(--signal-online-line) !important;
    background:var(--signal-online-soft) !important;
    color:#bbf7d0 !important;
}

.winco-signal-warn,
.status-warn,
.status-pending,
.status-qr{
    border-color:var(--signal-warn-line) !important;
    background:var(--signal-warn-soft) !important;
    color:#fde68a !important;
}

.winco-signal-danger,
.status-offline,
.status-error,
.status-danger{
    border-color:var(--signal-danger-line) !important;
    background:var(--signal-danger-soft) !important;
    color:#fecdd3 !important;
}

.winco-signal-info,
.status-processing,
.status-restarting{
    border-color:var(--signal-info-line) !important;
    background:var(--signal-info-soft) !important;
    color:#bae6fd !important;
}

/* Opera??o ativa: barra lateral premium */
.winco-operation-live{
    position:relative;
    overflow:hidden;
}

.winco-operation-live::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(37,211,102,.95), rgba(37,211,102,.18));
    box-shadow:0 0 22px rgba(37,211,102,.34);
}

.winco-operation-live::after{
    content:"";
    position:absolute;
    right:18px;
    top:18px;
    width:10px;
    height:10px;
    border-radius:999px;
    background:#25d366;
    box-shadow:0 0 0 5px rgba(37,211,102,.10), 0 0 22px rgba(37,211,102,.44);
}

/* Opera??o aguardando conex?o */
.winco-operation-waiting{
    position:relative;
    overflow:hidden;
}

.winco-operation-waiting::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(250,204,21,.86), rgba(250,204,21,.12));
    box-shadow:0 0 18px rgba(250,204,21,.22);
}

/* Opera??o offline/erro */
.winco-operation-offline{
    position:relative;
    overflow:hidden;
}

.winco-operation-offline::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(251,113,133,.82), rgba(251,113,133,.10));
    box-shadow:0 0 18px rgba(251,113,133,.22);
}

/* Linha real-time para listas/cards */
.winco-realtime-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.winco-realtime-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* Pulse s? em elementos realmente online */
@keyframes wincoSignalPulse{
    0%{ opacity:.75; transform:scale(.96); }
    50%{ opacity:1; transform:scale(1.08); }
    100%{ opacity:.75; transform:scale(.96); }
}

.winco-signal-pulse .winco-signal-dot::after,
.winco-operation-live::after{
    animation:wincoSignalPulse 2.4s ease-in-out infinite;
}

/* Evita exagero visual */
@media(prefers-reduced-motion: reduce){
    .winco-signal-pulse .winco-signal-dot::after,
    .winco-operation-live::after{
        animation:none !important;
    }
}