/* UX del streaming: estado + reintento */

.stream-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    min-height: 28px;
}

.stream-status-text {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(47, 95, 63, 0.16);
    background: #f2f8f4;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2f5f3f;
}

.stream-status-text::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2f5f3f;
    box-shadow: 0 0 0 4px rgba(47, 95, 63, 0.14);
}

.stream-status-text.status-connecting {
    color: #a85f00;
    border-color: rgba(168, 95, 0, 0.25);
    background: #fff7ec;
}

.stream-status-text.status-connecting::before {
    background: #a85f00;
    box-shadow: 0 0 0 4px rgba(168, 95, 0, 0.16);
}

.stream-status-text.status-live {
    color: #00753a;
    border-color: rgba(0, 117, 58, 0.22);
    background: #eefbf4;
}

.stream-status-text.status-live::before {
    background: #00a651;
    box-shadow: 0 0 0 4px rgba(0, 166, 81, 0.14);
}

.stream-status-text.status-error {
    color: #c62828;
    border-color: rgba(198, 40, 40, 0.25);
    background: #fff2f2;
}

.stream-status-text.status-error::before {
    background: #c62828;
    box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.12);
}

.stream-retry-btn {
    border: 1px solid rgba(198, 40, 40, 0.28);
    background: #fff5f5;
    color: #b71c1c;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
    width: fit-content;
}

.stream-retry-btn:hover {
    background: #ffe9e9;
}

@media (max-width: 600px) {
    .stream-status-wrap {
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .stream-status-text {
        text-align: center;
    }
}