/* Torreserver — Dashboard de Incidentes
   Estilos próprios sobre o Bootstrap (apenas CSS; nenhum script no cliente). */

:root {
    --ts-fundo: #0f1419;
    --ts-superficie: #171d25;
    --ts-superficie-alta: #1f2732;
    --ts-borda: #2b3542;
    --ts-texto: #e6edf3;
    --ts-texto-apoio: #93a1b0;
    --ts-destaque: #2f81f7;
    --ts-destaque-forte: #1f6feb;
    --ts-ok: #2ea043;
    --ts-aviso: #d29922;
    --ts-erro: #f85149;
    --ts-raio: 8px;

    /* Severidade P1-P4. Cada nível tem uma cor sólida para texto/borda e uma
       versão translúcida para fundo, mantendo o contraste no tema escuro. */
    --ts-p1: #f85149;
    --ts-p1-fundo: rgba(248, 81, 73, 0.12);
    --ts-p2: #db7c22;
    --ts-p2-fundo: rgba(219, 124, 34, 0.12);
    --ts-p3: #d29922;
    --ts-p3-fundo: rgba(210, 153, 34, 0.12);
    --ts-p4: #2f81f7;
    --ts-p4-fundo: rgba(47, 129, 247, 0.12);
    --ts-operacional: #2ea043;
    --ts-operacional-fundo: rgba(46, 160, 67, 0.12);

    /* Monitorando: a correção já foi aplicada e só se acompanha a
       estabilidade. Tom neutro de propósito — reservar o azul vivo para o
       Mitigado, onde ainda há uma correção definitiva pendente. */
    --ts-monitorando: #8b9bab;
    --ts-monitorando-fundo: rgba(139, 155, 171, 0.1);
}

body.ts-body {
    background-color: var(--ts-fundo);
    color: var(--ts-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.ts-body--centralizado {
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ts-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Topo -------------------------------------------------------------------- */

.ts-topo {
    background-color: var(--ts-superficie);
    border-bottom: 1px solid var(--ts-borda);
}

.ts-topo__conteudo {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 60px;
}

.ts-marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ts-texto);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
}

.ts-marca__leve {
    color: var(--ts-texto-apoio);
    font-weight: 400;
}

.ts-marca__ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ts-ok);
    display: inline-block;
}

.ts-nav {
    display: flex;
    gap: 4px;
}

.ts-nav__item {
    color: var(--ts-texto-apoio);
    padding: 8px 12px;
    border-radius: var(--ts-raio);
    text-decoration: none;
}

.ts-nav__item:hover,
.ts-nav__item:focus-visible {
    background-color: var(--ts-superficie-alta);
    color: var(--ts-texto);
}

.ts-usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-usuario__nome {
    color: var(--ts-texto-apoio);
    font-size: 0.9rem;
}

.ts-form-inline {
    display: inline;
    margin: 0;
}

/* Conteúdo ---------------------------------------------------------------- */

.ts-principal {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 48px;
}

.ts-titulo {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 20px;
}

.ts-titulo--secao {
    font-size: 1.15rem;
    margin-top: 32px;
}

.ts-texto-apoio {
    color: var(--ts-texto-apoio);
    margin: 0 0 16px;
}

.ts-painel {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 24px;
}

.ts-painel--estreito {
    max-width: 520px;
}

.ts-aviso {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 32px;
    max-width: 560px;
}

.ts-rodape {
    border-top: 1px solid var(--ts-borda);
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    padding: 16px 0;
}

/* Cartão de acesso -------------------------------------------------------- */

.ts-cartao-acesso {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-radius: 12px;
    padding: 36px;
    width: 100%;
    max-width: 420px;
}

.ts-cartao-acesso__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.ts-cartao-acesso__subtitulo {
    color: var(--ts-texto-apoio);
    margin: 4px 0 28px;
    font-size: 0.95rem;
}

/* Formulários ------------------------------------------------------------- */

.ts-campo {
    margin-bottom: 18px;
}

.ts-campo--inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-campo__rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--ts-texto-apoio);
}

.ts-campo__rotulo-inline {
    font-size: 0.9rem;
    color: var(--ts-texto-apoio);
    margin: 0;
}

.ts-campo__entrada {
    width: 100%;
    background-color: var(--ts-fundo);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    color: var(--ts-texto);
    padding: 10px 12px;
    font-size: 0.95rem;
}

.ts-campo__entrada:focus {
    border-color: var(--ts-destaque);
    outline: 2px solid rgba(47, 129, 247, 0.35);
    outline-offset: 1px;
}

.ts-campo__ajuda {
    color: var(--ts-texto-apoio);
    font-size: 0.8rem;
    margin: 6px 0 0;
}

.ts-botao {
    border: 1px solid transparent;
    border-radius: var(--ts-raio);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 10px 18px;
    text-decoration: none;
    display: inline-block;
}

.ts-botao--primario {
    background-color: var(--ts-destaque-forte);
    color: #fff;
}

.ts-botao--primario:hover,
.ts-botao--primario:focus-visible {
    background-color: var(--ts-destaque);
    color: #fff;
}

.ts-botao--fantasma {
    background-color: transparent;
    border-color: var(--ts-borda);
    color: var(--ts-texto-apoio);
    padding: 6px 14px;
}

.ts-botao--fantasma:hover,
.ts-botao--fantasma:focus-visible {
    color: var(--ts-texto);
    border-color: var(--ts-texto-apoio);
}

.ts-botao--bloco {
    width: 100%;
}

/* Alertas e etiquetas ----------------------------------------------------- */

.ts-alerta {
    border-radius: var(--ts-raio);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    border: 1px solid;
}

.ts-alerta__lista {
    margin: 0;
    padding-left: 18px;
}

.ts-alerta--erro {
    background-color: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.4);
    color: #ffb3ae;
}

.ts-alerta--aviso {
    background-color: rgba(210, 153, 34, 0.1);
    border-color: rgba(210, 153, 34, 0.4);
    color: #e9c46a;
}

.ts-alerta--sucesso {
    background-color: rgba(46, 160, 67, 0.1);
    border-color: rgba(46, 160, 67, 0.4);
    color: #7ee2a8;
}

.ts-etiqueta {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 2px 10px;
    border: 1px solid;
    margin-right: 4px;
}

.ts-etiqueta--ok {
    color: #7ee2a8;
    border-color: rgba(46, 160, 67, 0.5);
}

.ts-etiqueta--inativo {
    color: var(--ts-texto-apoio);
    border-color: var(--ts-borda);
}

.ts-etiqueta--aviso {
    color: #e9c46a;
    border-color: rgba(210, 153, 34, 0.5);
}

/* Tabela ------------------------------------------------------------------ */

.ts-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.ts-tabela__legenda {
    caption-side: top;
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    padding-bottom: 12px;
    text-align: left;
}

.ts-tabela th,
.ts-tabela td {
    border-bottom: 1px solid var(--ts-borda);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.9rem;
}

.ts-tabela th {
    color: var(--ts-texto-apoio);
    font-weight: 500;
}

.ts-codigo-erro {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    margin: 16px 0;
}

/* =========================================================================
   Incidentes — severidade, status, linha do tempo e status page
   ========================================================================= */

.ts-cabecalho-secao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ts-titulo--compacto {
    margin: 4px 0 0;
}

.ts-subtitulo {
    font-size: 0.95rem;
    color: var(--ts-texto-apoio);
    font-weight: 500;
    margin: 24px 0 8px;
}

.ts-texto {
    white-space: pre-wrap;
    line-height: 1.55;
    margin: 0 0 8px;
}

.ts-espaco-topo {
    margin-top: 24px;
}

.ts-referencia {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.8rem;
    color: var(--ts-texto-apoio);
    letter-spacing: 0.04em;
}

/* Severidade --------------------------------------------------------------- */

.ts-severidade {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid;
    white-space: nowrap;
}

.ts-severidade--p1 { color: var(--ts-p1); border-color: var(--ts-p1); background: var(--ts-p1-fundo); }
.ts-severidade--p2 { color: var(--ts-p2); border-color: var(--ts-p2); background: var(--ts-p2-fundo); }
.ts-severidade--p3 { color: var(--ts-p3); border-color: var(--ts-p3); background: var(--ts-p3-fundo); }
.ts-severidade--p4 { color: var(--ts-p4); border-color: var(--ts-p4); background: var(--ts-p4-fundo); }

/* Status ------------------------------------------------------------------- */

.ts-estado {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 3px 10px;
    border: 1px solid var(--ts-borda);
    color: var(--ts-texto-apoio);
    white-space: nowrap;
}

.ts-estado--investigando { color: var(--ts-p1); border-color: rgba(248, 81, 73, 0.45); }
.ts-estado--identificado { color: var(--ts-p2); border-color: rgba(219, 124, 34, 0.45); }
.ts-estado--monitorando  { color: var(--ts-monitorando); border-color: rgba(139, 155, 171, 0.4); background: var(--ts-monitorando-fundo); }
.ts-estado--resolvido    { color: var(--ts-ok); border-color: rgba(46, 160, 67, 0.45); }

.ts-marcadores {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Lista do painel ---------------------------------------------------------- */

.ts-lista-incidentes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts-incidente {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-left: 3px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 14px 18px;
}

.ts-incidente--p1 { border-left-color: var(--ts-p1); }
.ts-incidente--p2 { border-left-color: var(--ts-p2); }
.ts-incidente--p3 { border-left-color: var(--ts-p3); }
.ts-incidente--p4 { border-left-color: var(--ts-p4); }

.ts-incidente__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ts-incidente__titulo {
    color: var(--ts-texto);
    font-weight: 500;
    text-decoration: none;
    flex: 1;
    min-width: 200px;
}

.ts-incidente__titulo:hover { color: var(--ts-destaque); }

.ts-incidente__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--ts-texto-apoio);
}

.ts-painel--vazio {
    color: var(--ts-texto-apoio);
    text-align: center;
    padding: 32px;
}

.ts-painel--formulario { max-width: 720px; }

.ts-acoes {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Resumo do painel --------------------------------------------------------- */

.ts-resumo {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ts-resumo__item {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 16px 24px;
    min-width: 120px;
}

.ts-resumo__numero {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
}

.ts-resumo__rotulo {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
}

/* Nota interna ------------------------------------------------------------- */

.ts-nota-interna {
    background-color: var(--ts-superficie-alta);
    border: 1px dashed var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 14px 16px;
}

.ts-campo__ajuda--alerta {
    color: var(--ts-aviso);
}

.ts-definicoes {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.ts-definicoes dt { color: var(--ts-texto-apoio); font-weight: 400; }
.ts-definicoes dd { margin: 0; }

/* Linha do tempo ----------------------------------------------------------- */

.ts-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-timeline__item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

.ts-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background-color: var(--ts-borda);
}

.ts-timeline__marcador {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid currentColor;
    margin-top: 5px;
    flex-shrink: 0;
    background-color: var(--ts-fundo);
}

/* O marcador herda a cor do estado, mas nunca o fundo do selo. */
.ts-timeline__marcador.ts-estado--investigando,
.ts-timeline__marcador.ts-estado--identificado,
.ts-timeline__marcador.ts-estado--mitigado,
.ts-timeline__marcador.ts-estado--monitorando,
.ts-timeline__marcador.ts-estado--resolvido {
    background-color: var(--ts-fundo);
}

.ts-timeline__corpo { flex: 1; }

.ts-timeline__cabecalho {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.ts-timeline__cabecalho time {
    color: var(--ts-texto-apoio);
    font-size: 0.8rem;
}

/* =========================================================================
   Status page pública
   ========================================================================= */

.ts-topo--publico { background-color: var(--ts-superficie); }

.ts-secao { margin-bottom: 40px; }

.ts-situacao {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 40px;
}

.ts-situacao__farol {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.ts-situacao__texto {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--ts-texto);
}

.ts-situacao--operacional { color: var(--ts-operacional); border-color: var(--ts-operacional); background: var(--ts-operacional-fundo); }
.ts-situacao--p1 { color: var(--ts-p1); border-color: var(--ts-p1); background: var(--ts-p1-fundo); }
.ts-situacao--p2 { color: var(--ts-p2); border-color: var(--ts-p2); background: var(--ts-p2-fundo); }
.ts-situacao--p3 { color: var(--ts-p3); border-color: var(--ts-p3); background: var(--ts-p3-fundo); }
.ts-situacao--p4 { color: var(--ts-p4); border-color: var(--ts-p4); background: var(--ts-p4-fundo); }

.ts-cartao-incidente {
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-left: 3px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 22px 26px;
    margin-bottom: 16px;
}

.ts-cartao-incidente--p1 { border-left-color: var(--ts-p1); }
.ts-cartao-incidente--p2 { border-left-color: var(--ts-p2); }
.ts-cartao-incidente--p3 { border-left-color: var(--ts-p3); }
.ts-cartao-incidente--p4 { border-left-color: var(--ts-p4); }

.ts-cartao-incidente__cabecalho {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ts-cartao-incidente__titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.ts-cartao-incidente__inicio {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.ts-timeline--publica {
    border-top: 1px solid var(--ts-borda);
    padding-top: 18px;
}

.ts-historico {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
}

.ts-historico__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ts-borda);
    flex-wrap: wrap;
}

.ts-historico__item:last-child { border-bottom: none; }

.ts-historico__titulo { flex: 1; min-width: 200px; }

.ts-historico__data,
.ts-historico__duracao {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
}
/* =========================================================================
   Serviços — árvore de cadastro e grade da status page
   ========================================================================= */

.ts-arvore {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-arvore--raiz > .ts-arvore__item + .ts-arvore__item {
    margin-top: 6px;
}

.ts-arvore .ts-arvore {
    margin-left: 22px;
    margin-top: 4px;
    border-left: 1px solid var(--ts-borda);
    padding-left: 12px;
}

.ts-arvore__linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background-color: var(--ts-superficie-alta);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    flex-wrap: wrap;
}

.ts-arvore__linha--inativo { opacity: 0.55; }

.ts-arvore__nome { font-weight: 500; }

.ts-arvore__descricao {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
}

.ts-arvore__acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-link-acao {
    background: none;
    border: none;
    padding: 0;
    color: var(--ts-texto-apoio);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
}

.ts-link-acao:hover { color: var(--ts-destaque); }
.ts-link-acao--perigo:hover { color: var(--ts-erro); }

.ts-form-embutido {
    background-color: var(--ts-fundo);
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 18px;
    margin: 8px 0 8px 22px;
    max-width: 560px;
}

.ts-form-embutido__titulo {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    margin: 0 0 14px;
}

/* Grade pública de serviços ------------------------------------------------ */

.ts-servicos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-servicos--raiz > .ts-servico + .ts-servico { margin-top: 8px; }

.ts-servicos .ts-servicos {
    margin-left: 26px;
    margin-top: 6px;
}

.ts-servicos .ts-servicos .ts-servico + .ts-servico { margin-top: 6px; }

.ts-servico__linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background-color: var(--ts-superficie);
    border: 1px solid var(--ts-borda);
    border-left: 3px solid;
    border-radius: var(--ts-raio);
    flex-wrap: wrap;
}

.ts-servico__farol {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.ts-servico__nome {
    font-weight: 500;
    color: var(--ts-texto);
}

.ts-servico__descricao {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
}

.ts-servico__estado {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 500;
}

.ts-servico--operacional { color: var(--ts-operacional); }
.ts-servico--operacional > .ts-servico__linha { border-left-color: var(--ts-operacional); }

.ts-servico--p1 { color: var(--ts-p1); }
.ts-servico--p1 > .ts-servico__linha { border-left-color: var(--ts-p1); background-color: var(--ts-p1-fundo); }

.ts-servico--p2 { color: var(--ts-p2); }
.ts-servico--p2 > .ts-servico__linha { border-left-color: var(--ts-p2); background-color: var(--ts-p2-fundo); }

.ts-servico--p3 { color: var(--ts-p3); }
.ts-servico--p3 > .ts-servico__linha { border-left-color: var(--ts-p3); background-color: var(--ts-p3-fundo); }

.ts-servico--p4 { color: var(--ts-p4); }
.ts-servico--p4 > .ts-servico__linha { border-left-color: var(--ts-p4); background-color: var(--ts-p4-fundo); }

/* Sub-níveis um pouco menores, para hierarquia visual */
.ts-servico--nivel2 .ts-servico__linha,
.ts-servico--nivel3 .ts-servico__linha {
    padding: 10px 16px;
    font-size: 0.92rem;
}

/* =========================================================================
   Seleção de nível e de serviços no formulário
   ========================================================================= */

.ts-grupo {
    border: none;
    margin: 0 0 22px;
    padding: 0;
}

.ts-grupo legend {
    padding: 0;
    margin-bottom: 10px;
}

.ts-niveis {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-nivel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    cursor: pointer;
    background-color: var(--ts-fundo);
}

.ts-nivel:hover { border-color: var(--ts-texto-apoio); }

/* :has() permite destacar o cartão inteiro do rádio marcado, sem script. */
.ts-nivel:has(.ts-nivel__radio:checked) {
    border-color: currentColor;
    background-color: var(--ts-superficie-alta);
}

.ts-nivel__radio { accent-color: currentColor; flex-shrink: 0; }

.ts-nivel__selo {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 26px;
}

.ts-nivel__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ts-texto);
}

.ts-nivel__texto span {
    color: var(--ts-texto-apoio);
    font-size: 0.82rem;
}

.ts-nivel--p1 { color: var(--ts-p1); }
.ts-nivel--p2 { color: var(--ts-p2); }
.ts-nivel--p3 { color: var(--ts-p3); }
.ts-nivel--p4 { color: var(--ts-p4); }

.ts-nivel--estado-investigando { color: var(--ts-p1); }
.ts-nivel--estado-identificado { color: var(--ts-p2); }
.ts-nivel--estado-mitigado     { color: var(--ts-p4); }
.ts-nivel--estado-monitorando  { color: var(--ts-monitorando); }
.ts-nivel--estado-resolvido    { color: var(--ts-ok); }

.ts-estado--mitigado { color: var(--ts-p4); border-color: rgba(47, 129, 247, 0.45); }

.ts-servicos-selecao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 10px 14px;
    background-color: var(--ts-fundo);
}

.ts-servico-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin: 0;
}

.ts-servico-opcao:hover { color: var(--ts-destaque); }

/* O recuo comunica o nível; o serviço principal fica rente à esquerda. */
.ts-servico-opcao--nivel1 {
    font-weight: 600;
    margin-top: 8px;
}

.ts-servico-opcao--nivel1:first-child { margin-top: 0; }

.ts-servico-opcao--nivel2 { padding-left: 30px; }

.ts-servico-opcao--nivel3 {
    padding-left: 58px;
    color: var(--ts-texto-apoio);
}

/* Fio vertical ligando os subserviços ao pai. */
.ts-servico-opcao--nivel2,
.ts-servico-opcao--nivel3 { position: relative; }

.ts-servico-opcao--nivel2::before,
.ts-servico-opcao--nivel3::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--ts-borda);
}

.ts-servico-opcao--nivel2::before { left: 11px; }
.ts-servico-opcao--nivel3::before { left: 39px; }

.ts-servico-opcao__nome { line-height: 1.4; }

.ts-campo__entrada--curto { max-width: 260px; }

.ts-cartao-incidente__servicos { color: var(--ts-texto-apoio); }
.ts-form-embutido--solto {
    margin: 0;
    max-width: none;
    border: none;
    padding: 0;
    background: none;
}
/* Histórico expansível ------------------------------------------------------
   O <details> nativo cuida do abrir/fechar; aqui só o visual. */

.ts-historico__item { padding: 0; display: block; }

.ts-historico__detalhe { width: 100%; }

.ts-historico__resumo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    flex-wrap: wrap;
}

/* Esconde o triângulo padrão do navegador para usar a seta própria. */
.ts-historico__resumo::-webkit-details-marker { display: none; }
.ts-historico__resumo::marker { content: ""; }

.ts-historico__resumo:hover { background-color: var(--ts-superficie-alta); }

.ts-historico__resumo:focus-visible {
    outline: 2px solid var(--ts-destaque);
    outline-offset: -2px;
}

.ts-historico__seta {
    width: 0;
    height: 0;
    flex-shrink: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--ts-texto-apoio);
    transition: transform 0.15s ease;
}

.ts-historico__detalhe[open] .ts-historico__seta {
    transform: rotate(90deg);
}

.ts-historico__corpo {
    padding: 4px 18px 20px 46px;
    border-top: 1px solid var(--ts-borda);
    margin-top: 2px;
}

.ts-historico__corpo .ts-definicoes {
    margin-bottom: 20px;
    padding-top: 16px;
}

.ts-historico__corpo .ts-timeline--publica {
    border-top: 1px solid var(--ts-borda);
    padding-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .ts-historico__seta { transition: none; }
}

@media (max-width: 640px) {
    .ts-historico__corpo { padding-left: 18px; }
}
/* Credencial exibida uma unica vez ---------------------------------------- */

.ts-credencial {
    background-color: rgba(210, 153, 34, 0.08);
    border: 1px solid var(--ts-aviso);
    border-radius: var(--ts-raio);
    padding: 22px 26px;
    margin-bottom: 24px;
}

.ts-credencial__titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: #e9c46a;
}

.ts-credencial__valor {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    background-color: var(--ts-fundo);
    border: 1px dashed var(--ts-aviso);
    border-radius: var(--ts-raio);
    padding: 14px 18px;
    margin: 0 0 14px;
    user-select: all;
    word-break: break-all;
}

.ts-credencial__aviso {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    margin: 0 0 6px;
}

.ts-campo__entrada--mini {
    width: auto;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.ts-acoes-linha {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Correcao definitiva agendada -------------------------------------------- */

.ts-correcao-agendada {
    background-color: var(--ts-p4-fundo);
    border-left: 3px solid var(--ts-p4);
    border-radius: var(--ts-raio);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.ts-correcao-agendada strong { color: var(--ts-p4); }
.ts-correcao-agendada .ts-texto { margin: 6px 0 0; }

.ts-restabelecido {
    color: var(--ts-operacional);
    font-size: 0.85rem;
    margin: 0 0 14px;
}

.ts-grupo--condicional {
    border: 1px dashed var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 16px 18px;
}

.ts-grupo--condicional legend { padding: 0 8px; }
/* Correlacao entre incidentes ---------------------------------------------- */

.ts-relacionados {
    color: var(--ts-texto-apoio);
    font-size: 0.85rem;
    border-top: 1px dashed var(--ts-borda);
    padding-top: 10px;
    margin: 12px 0 0;
}

.ts-relacionado-opcao {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 0.88rem;
    margin: 0;
}

.ts-relacionado-opcao:hover { color: var(--ts-destaque); }

.ts-relacionado-opcao__titulo { flex: 1; }

.ts-relacionado-opcao__data {
    color: var(--ts-texto-apoio);
    font-size: 0.8rem;
}

/* Zona de exclusao definitiva ---------------------------------------------- */

.ts-zona-perigo {
    border: 1px solid rgba(248, 81, 73, 0.35);
    border-radius: var(--ts-raio);
    margin-top: 40px;
}

.ts-zona-perigo__resumo {
    padding: 12px 18px;
    cursor: pointer;
    color: var(--ts-erro);
    font-size: 0.9rem;
    list-style: none;
}

.ts-zona-perigo__resumo::-webkit-details-marker { display: none; }
.ts-zona-perigo__resumo::marker { content: ""; }
.ts-zona-perigo__resumo::before { content: "\26A0  "; }

.ts-zona-perigo__corpo {
    padding: 4px 18px 20px;
    border-top: 1px solid rgba(248, 81, 73, 0.25);
}

.ts-zona-perigo__corpo .ts-texto { padding-top: 14px; }

.ts-botao--perigo {
    background-color: transparent;
    border-color: var(--ts-erro);
    color: var(--ts-erro);
}

.ts-botao--perigo:hover,
.ts-botao--perigo:focus-visible {
    background-color: var(--ts-erro);
    color: #fff;
}

/* Estados operacionais na status page -------------------------------------- */

.ts-situacao--observacao,
.ts-servico--observacao { color: var(--ts-monitorando); }

.ts-situacao--observacao {
    border-color: var(--ts-monitorando);
    background: var(--ts-monitorando-fundo);
}

.ts-servico--observacao > .ts-servico__linha {
    border-left-color: var(--ts-monitorando);
    background-color: var(--ts-monitorando-fundo);
}

.ts-situacao--manutencao,
.ts-servico--manutencao { color: var(--ts-p4); }

.ts-situacao--manutencao { border-color: var(--ts-p4); background: var(--ts-p4-fundo); }

.ts-servico--manutencao > .ts-servico__linha {
    border-left-color: var(--ts-p4);
    background-color: var(--ts-p4-fundo);
}

.ts-situacao--pendente,
.ts-servico--pendente { color: var(--ts-p4); }

.ts-situacao--pendente { border-color: var(--ts-p4); background: var(--ts-p4-fundo); }

.ts-servico--pendente > .ts-servico__linha {
    border-left-color: var(--ts-p4);
    background-color: var(--ts-p4-fundo);
}

.ts-situacao--leve,
.ts-servico--leve { color: var(--ts-p3); }

.ts-situacao--leve { border-color: var(--ts-p3); background: var(--ts-p3-fundo); }

.ts-servico--leve > .ts-servico__linha {
    border-left-color: var(--ts-p3);
    background-color: var(--ts-p3-fundo);
}

.ts-situacao--severa,
.ts-servico--severa { color: var(--ts-p2); }

.ts-situacao--severa { border-color: var(--ts-p2); background: var(--ts-p2-fundo); }

.ts-servico--severa > .ts-servico__linha {
    border-left-color: var(--ts-p2);
    background-color: var(--ts-p2-fundo);
}

.ts-situacao--indisponivel,
.ts-servico--indisponivel { color: var(--ts-p1); }

.ts-situacao--indisponivel { border-color: var(--ts-p1); background: var(--ts-p1-fundo); }

.ts-servico--indisponivel > .ts-servico__linha {
    border-left-color: var(--ts-p1);
    background-color: var(--ts-p1-fundo);
}
/* Verificacao em duas etapas ---------------------------------------------- */

.ts-qrcode {
    background-color: #fff;
    border-radius: var(--ts-raio);
    padding: 16px;
    display: inline-block;
    margin: 12px 0 20px;
    line-height: 0;
}

.ts-qrcode svg {
    width: 200px;
    height: 200px;
    display: block;
}

.ts-chave-manual {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    background-color: var(--ts-fundo);
    border: 1px dashed var(--ts-borda);
    border-radius: var(--ts-raio);
    padding: 12px 16px;
    margin: 6px 0 22px;
    user-select: all;
    word-break: break-all;
}

.ts-campo__entrada--codigo {
    max-width: 200px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.25em;
    text-align: center;
}

.ts-codigos {
    list-style: none;
    margin: 0 0 16px;
    padding: 16px 18px;
    background-color: var(--ts-fundo);
    border: 1px dashed var(--ts-aviso);
    border-radius: var(--ts-raio);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 20px;
}

.ts-codigos__item {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
    user-select: all;
}

.ts-separador {
    border: none;
    border-top: 1px solid var(--ts-borda);
    margin: 24px 0;
}

.ts-alternativa {
    margin-top: 18px;
    text-align: center;
    font-size: 0.85rem;
}

.ts-alternativa a { color: var(--ts-texto-apoio); }
.ts-alternativa a:hover { color: var(--ts-destaque); }