/* Aba do tipo do contrato ENCAIXADA na linha ("folha saindo do envelope") — abas Contratos do admin e do painel da empresa (27/10/2026).
   A linha ganha contorno; a aba usa a mesma borda/fundo e cobre a borda de cima dela, ficando grudada. */
:root { --env-borda: #b9dcdc; --env-fundo: #f8fcfc; }
tr.linha-tipo-contrato td { padding: 18px 0 0 !important; border: none !important; background: transparent !important; }
.faixa-tipo { position: relative; top: 2px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin-left: 14px;
    padding: 5px 14px 6px; border: 2px solid var(--env-borda); border-bottom: none; border-radius: 12px 12px 0 0;
    background: var(--env-fundo); font-size: .66rem; font-weight: 800; letter-spacing: .6px;
    box-shadow: 0 -3px 8px rgba(0,128,128,.06); }
.faixa-tipo i { font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.faixa-tce { color: #006666; } .faixa-tce i { background: #0d9488; }
.faixa-aditivo { color: #1d4ed8; } .faixa-aditivo i { background: #2563eb; }
/* a linha do contrato vira o "envelope" */
tr.linha-tipo-contrato + tr > td { border-top: 2px solid var(--env-borda) !important; border-bottom: 2px solid var(--env-borda) !important; }
tr.linha-tipo-contrato + tr:not([style]) > td { background: var(--env-fundo) !important; }
tr.linha-tipo-contrato + tr > td:first-child { border-left: 2px solid var(--env-borda) !important; }
tr.linha-tipo-contrato + tr > td:last-child { border-right: 2px solid var(--env-borda) !important; }
tr.linha-tipo-contrato + tr:hover > td { --env-fundo: #f1f9f9; }
@media (max-width: 768px) {
    .responsive-table tr.linha-tipo-contrato { margin: 16px 0 0 !important; border: none !important; box-shadow: none !important;
        background: transparent !important; padding: 0 !important; }
    .responsive-table tr.linha-tipo-contrato td { display: block !important; padding: 0 !important; text-align: left !important;
        justify-content: flex-start !important; }
    .responsive-table tr.linha-tipo-contrato td > div { text-align: left !important; margin: 0 !important; width: 100% !important;
        display: block; justify-content: flex-start !important; }
    .responsive-table tr.linha-tipo-contrato td::before { content: none !important; display: none !important; }
    .responsive-table tr.linha-tipo-contrato + tr { margin-top: 0 !important; border: 2px solid var(--env-borda) !important;
        border-radius: 0 12px 12px 12px !important; background: var(--env-fundo); }
    .responsive-table tr.linha-tipo-contrato + tr > td { border-left: none !important; border-right: none !important; border-top: none !important;
        border-bottom: 1px solid #e3eeee !important; }
    .responsive-table tr.linha-tipo-contrato + tr > td:last-child { border-bottom: none !important; }
    .faixa-tipo { margin-left: 0; }
}

/* Abas da cadeia (TCE / ADITIVO 1 / ADITIVO 2) lado a lado: a ativa encaixa no envelope, as outras ficam atrás */
.faixa-abas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-left: 14px; }
.faixa-aba { margin-left: 0; cursor: pointer; font-family: inherit; transition: background-color .15s, color .15s, opacity .15s; }
.faixa-aba:not(.active) { top: 0; opacity: .72; background: #eef5f5; color: #64748b; box-shadow: none;
    border-color: #d5e6e6; border-bottom: 2px solid var(--env-borda); border-radius: 10px 10px 0 0; padding: 4px 11px; }
.faixa-aba:not(.active) i { background: #94a3b8; }
.faixa-aba:not(.active):hover { opacity: 1; color: #0f3d3d; background: #e3f0f0; }
.faixa-aba:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.faixa-st { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-left: 2px; }
.faixa-st.st-ativo { background: #16a34a; } .faixa-st.st-pend { background: #2563eb; }
.faixa-st.st-deslig { background: #dc2626; } .faixa-st.st-desist { background: #6b7280; }
@media (max-width: 768px) { .faixa-abas { margin-left: 0; } .faixa-aba { font-size: .62rem; } }

/* COR DO ENVELOPE = SITUAÇÃO do contrato selecionado (05/11/2026, pedido do usuário) — mesmas cores da bolinha da aba:
   pendente azul · ativo verde · desligado vermelho · desistente cinza, em DEGRADÊ (forte à esquerda → branco). A classe fica
   na linha da aba (env-st-*) e vale para ela e para a linha do contrato logo abaixo; trocar TCE/ADITIVO troca a cor (base.html). */
tr.linha-tipo-contrato.env-st-pend, tr.linha-tipo-contrato.env-st-pend + tr { --env-borda: #93c5fd; --env-fundo: #e8f1ff; }
tr.linha-tipo-contrato.env-st-ativo, tr.linha-tipo-contrato.env-st-ativo + tr { --env-borda: #86d9a5; --env-fundo: #e3f7ea; }
tr.linha-tipo-contrato.env-st-deslig, tr.linha-tipo-contrato.env-st-deslig + tr { --env-borda: #f3a5a5; --env-fundo: #fdeaea; }
tr.linha-tipo-contrato.env-st-desist, tr.linha-tipo-contrato.env-st-desist + tr { --env-borda: #cbd5e1; --env-fundo: #eef1f5; }
tr.linha-tipo-contrato[class*="env-st-"] + tr { background: linear-gradient(90deg, var(--env-fundo) 0%, #ffffff 78%) !important; }
tr.linha-tipo-contrato[class*="env-st-"] + tr > td { background: transparent !important; box-shadow: none !important; --bs-table-accent-bg: transparent; --bs-table-bg-state: transparent; }  /* sem o cinza do table-hover por cima do degradê */
/* hover: só muda a cor (05/11/2026). NÃO usar filter/transform/opacity na linha: criam um "contexto de empilhamento" e o
   menu (dropdown) aberto na linha fica POR BAIXO da linha seguinte — bug do menu "Documentos do Candidato" */
tr.linha-tipo-contrato.env-st-pend + tr:hover { --env-fundo: #dbe9ff; }
tr.linha-tipo-contrato.env-st-ativo + tr:hover { --env-fundo: #d3f2de; }
tr.linha-tipo-contrato.env-st-deslig + tr:hover { --env-fundo: #fbdcdc; }
tr.linha-tipo-contrato.env-st-desist + tr:hover { --env-fundo: #e4e8ee; }
@media (max-width: 768px) {
    .responsive-table tr.linha-tipo-contrato[class*="env-st-"] + tr { background: linear-gradient(180deg, var(--env-fundo) 0%, #ffffff 70%) !important; }
}
tr.linha-tipo-contrato.env-st-pend .faixa-tipo.active { color: #1d4ed8; } tr.linha-tipo-contrato.env-st-pend .faixa-tipo.active i { background: #2563eb; }
tr.linha-tipo-contrato.env-st-ativo .faixa-tipo.active { color: #15803d; } tr.linha-tipo-contrato.env-st-ativo .faixa-tipo.active i { background: #16a34a; }
tr.linha-tipo-contrato.env-st-deslig .faixa-tipo.active { color: #b91c1c; } tr.linha-tipo-contrato.env-st-deslig .faixa-tipo.active i { background: #dc2626; }
tr.linha-tipo-contrato.env-st-desist .faixa-tipo.active { color: #475569; } tr.linha-tipo-contrato.env-st-desist .faixa-tipo.active i { background: #6b7280; }