/* ========================================
   Variáveis do componente
   ======================================== */
:root {
    /* Cores das tarjas por gravidade (mantidas como variáveis para contraste correto) */
    --nox-incidente-critico-bg: var(--nox-danger, #dc3545);
    --nox-incidente-critico-bg-hover: #c12d3c;
    --nox-incidente-critico-texto: #ffffff;
    --nox-incidente-aviso-bg: var(--nox-warning, #ffc107);
    --nox-incidente-aviso-bg-hover: #e9b206;
    --nox-incidente-aviso-texto: #4a3700;
}

/* ========================================
   Layout: empurra todo o site para baixo da tarja
   Só aplica quando há incidente (classe no body), impacto zero no caso comum
   ======================================== */
body.nox-has-incidente {
    display: flex;
    flex-direction: column;
}

body.nox-has-incidente .nox-container {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* ========================================
   Container das tarjas (uma por incidente, empilhadas)
   ======================================== */
.nox-incidente-tarjas {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Bloco principal: a tarja
   ======================================== */
.nox-incidente-tarja {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    transition: background-color var(--nox-transition-speed, 0.3s) var(--nox-transition-timing, ease);
    animation: nox-incidente-slide-down 0.3s ease;
}

/* ========================================
   Elementos do bloco
   ======================================== */
.nox-incidente-tarja__icone {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.nox-incidente-tarja__texto {
    flex: 1 1 auto;
    /* min-width: 0 é necessário para o item flex encolher e o ellipsis funcionar */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nox-incidente-tarja__acao {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    opacity: 0.85;
}

/* ========================================
   Modificadores por gravidade
   ======================================== */
.nox-incidente-tarja--critico {
    background-color: var(--nox-incidente-critico-bg);
    color: var(--nox-incidente-critico-texto);
}

.nox-incidente-tarja--critico:hover {
    background-color: var(--nox-incidente-critico-bg-hover);
}

.nox-incidente-tarja--aviso {
    background-color: var(--nox-incidente-aviso-bg);
    color: var(--nox-incidente-aviso-texto);
}

.nox-incidente-tarja--aviso:hover {
    background-color: var(--nox-incidente-aviso-bg-hover);
}

/* ========================================
   Detalhe do incidente (conteúdo do popup)
   ======================================== */
.nox-incidente-detalhe {
    padding: 4px 8px 12px;
    color: var(--nox-text-dark, #333333);
}

.nox-incidente-detalhe__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.nox-incidente-detalhe__chip--critico {
    background-color: var(--nox-incidente-critico-bg);
    color: var(--nox-incidente-critico-texto);
}

.nox-incidente-detalhe__chip--aviso {
    background-color: var(--nox-incidente-aviso-bg);
    color: var(--nox-incidente-aviso-texto);
}

.nox-incidente-detalhe__data {
    margin: 14px 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nox-text-dark, #333333);
}

.nox-incidente-detalhe__recursos {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: var(--nox-bg-light, #f8f9fa);
    border-radius: 6px;
}

.nox-incidente-detalhe__recursos-titulo {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nox-text-muted, #6c757d);
}

.nox-incidente-detalhe__recursos-valor {
    margin: 0;
    font-size: 14px;
    color: var(--nox-text-dark, #333333);
}

.nox-incidente-detalhe__titulo {
    margin: 16px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nox-text-dark, #333333);
}

.nox-incidente-detalhe__resumo-label {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nox-text-dark, #333333);
}

.nox-incidente-detalhe__resumo {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    color: var(--nox-text-muted, #6c757d);
}

.nox-incidente-detalhe__timestamp {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    color: var(--nox-text-muted, #6c757d);
}

.nox-incidente-detalhe__link {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nox-primary, #17B5C6);
}

/* ========================================
   Animações
   ======================================== */
@keyframes nox-incidente-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}