:root {
    --teste-cinza: #8fa0ad;
    --teste-azul: #44baff;
}

.capa-homologacao .capa-conteudo {
    padding-top: 42px;
    padding-bottom: 38px;
}

.capa-homologacao h1 {
    max-width: 980px;
    font-size: 4.2rem;
    line-height: 1.02;
}

.capa-homologacao p {
    max-width: 810px;
}

.painel-progresso {
    width: min(var(--largura), calc(100% - 32px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(100px, 0.55fr));
    border: 1px solid var(--linha);
    border-radius: 8px;
    overflow: hidden;
    background: var(--superficie);
}

.progresso-principal,
.contador-teste {
    min-width: 0;
    padding: 17px 18px;
}

.contador-teste {
    border-left: 1px solid var(--linha);
}

.progresso-principal span,
.contador-teste span {
    display: block;
    color: var(--apoio);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.progresso-principal strong,
.contador-teste strong {
    display: block;
    margin-top: 3px;
    color: var(--texto);
    font-size: 1.45rem;
}

.contador-teste.aprovado strong {
    color: var(--verde);
}

.contador-teste.falhou strong {
    color: var(--vermelho);
}

.contador-teste.impedido strong {
    color: var(--amarelo);
}

.trilho-progresso {
    height: 8px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 4px;
    background: #05090c;
}

.trilho-progresso span {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ciano);
    box-shadow: 0 0 16px rgba(53, 227, 240, 0.72);
    transition: width 180ms ease;
}

.filtros-homologacao {
    width: min(var(--largura), calc(100% - 32px));
    margin: 18px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.filtro-teste {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--superficie);
    color: var(--apoio);
    cursor: pointer;
    font-weight: 800;
}

.filtro-teste:hover,
.filtro-teste:focus-visible,
.filtro-teste.ativo {
    border-color: var(--ciano);
    background: #113039;
    color: var(--texto);
    outline: none;
}

.filtros-homologacao .busca-manual {
    min-width: min(100%, 290px);
    margin-left: auto;
}

.roteiro-layout {
    width: min(var(--largura), calc(100% - 32px));
    margin: 28px auto 72px;
}

.fase-teste {
    margin: 0 0 18px;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: var(--fundo-2);
    overflow: clip;
}

.fase-teste > summary {
    min-height: 76px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.fase-teste > summary::-webkit-details-marker {
    display: none;
}

.fase-teste > summary:hover,
.fase-teste > summary:focus-visible {
    background: #0f1b22;
    outline: none;
}

.fase-numero {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--ciano);
    border-radius: 50%;
    background: #0e2d34;
    color: var(--ciano);
    font-weight: 900;
}

.fase-titulo {
    min-width: 0;
    display: grid;
    flex: 1;
}

.fase-titulo strong {
    color: var(--texto);
    font-size: 1.08rem;
}

.fase-titulo span {
    color: var(--apoio);
    font-size: 0.86rem;
}

.fase-contagem {
    color: var(--apoio);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.fase-seta {
    color: var(--ciano);
    transition: transform 160ms ease;
}

.fase-teste[open] .fase-seta {
    transform: rotate(180deg);
}

.fase-corpo {
    padding: 0 20px 22px;
    border-top: 1px solid var(--linha);
}

.introducao-fase {
    max-width: 900px;
    margin: 20px 0;
    color: var(--apoio);
}

.captura-homologacao {
    margin: 22px 0 26px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
    gap: 20px;
    align-items: center;
}

.captura-homologacao .abrir-captura {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: #04070a;
    cursor: zoom-in;
}

.captura-homologacao img {
    width: 100%;
    height: auto;
}

.legenda-captura {
    display: grid;
    gap: 12px;
}

.legenda-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.legenda-item > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--amarelo);
    border-radius: 50%;
    color: var(--amarelo);
    font-size: 0.76rem;
    font-weight: 900;
}

.legenda-item strong,
.legenda-item small {
    display: block;
}

.legenda-item strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.legenda-item small {
    margin-top: 2px;
    color: var(--apoio);
    font-size: 0.79rem;
}

.teste-caso {
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid var(--linha);
}

.teste-caso:first-of-type {
    border-top: 0;
}

.teste-caso[hidden] {
    display: none;
}

.teste-cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 235px);
    gap: 20px;
    align-items: start;
}

.teste-identidade {
    min-width: 0;
}

.teste-codigo {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--ciano);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.teste-identidade h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1.22rem;
    line-height: 1.25;
}

.teste-identidade p {
    max-width: 800px;
    margin: 7px 0 0;
    color: var(--apoio);
}

.controle-status {
    display: grid;
    gap: 5px;
}

.controle-status label {
    color: var(--apoio);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.controle-status select {
    width: 100%;
    min-height: 43px;
    padding: 8px 34px 8px 11px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #091117;
    color: var(--texto);
    cursor: pointer;
}

.teste-caso.status-aprovado .controle-status select {
    border-color: var(--verde);
    color: var(--verde);
}

.teste-caso.status-falhou .controle-status select {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.teste-caso.status-impedido .controle-status select {
    border-color: var(--amarelo);
    color: var(--amarelo);
}

.teste-grade {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
    gap: 18px;
}

.passos-teste,
.resultado-esperado {
    min-width: 0;
}

.passos-teste h4,
.resultado-esperado h4,
.notas-teste label {
    margin: 0 0 9px;
    color: var(--texto);
    font-size: 0.84rem;
    text-transform: uppercase;
}

.passos-teste ol {
    margin: 0;
    padding-left: 21px;
    color: var(--apoio);
}

.passos-teste li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.passos-teste strong {
    color: var(--texto);
}

.resultado-esperado {
    padding: 15px 16px;
    align-self: stretch;
    border-left: 3px solid var(--verde);
    background: #0e2118;
}

.resultado-esperado p,
.resultado-esperado ul {
    margin: 0;
    color: #dcfbe7;
}

.resultado-esperado ul {
    padding-left: 19px;
}

.resultado-esperado li + li {
    margin-top: 5px;
}

.notas-teste {
    margin-top: 15px;
}

.notas-teste label {
    display: block;
}

.notas-teste textarea {
    width: 100%;
    min-height: 82px;
    resize: vertical;
    padding: 11px 12px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #080e13;
    color: var(--texto);
    line-height: 1.45;
}

.notas-teste textarea:focus {
    border-color: var(--ciano);
    box-shadow: 0 0 0 3px rgba(53, 227, 240, 0.12);
    outline: none;
}

.salvo-local {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: var(--teste-cinza);
    font-size: 0.72rem;
}

.etiquetas-teste {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.etiqueta-teste {
    padding: 4px 8px;
    border: 1px solid var(--linha);
    border-radius: 4px;
    color: var(--apoio);
    font-size: 0.7rem;
    font-weight: 800;
}

.matriz-permissoes {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    background: var(--superficie);
}

.matriz-permissoes th,
.matriz-permissoes td {
    padding: 12px 13px;
    border: 1px solid var(--linha);
    text-align: left;
    vertical-align: top;
}

.matriz-permissoes th {
    color: var(--ciano);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.matriz-permissoes td {
    color: var(--apoio);
}

.matriz-permissoes td:first-child {
    color: var(--texto);
    font-weight: 800;
}

.resumo-final {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--ciano);
    border-radius: 8px;
    background: #0b1a21;
}

.resumo-final h2 {
    margin: 0;
}

.resumo-final p {
    color: var(--apoio);
}

.resumo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.botao-perigo {
    border-color: var(--vermelho);
    color: #ffdfe2;
}

.nenhum-teste {
    padding: 34px 18px;
    color: var(--apoio);
    text-align: center;
}

.rodape-homologacao {
    padding: 28px 16px 48px;
    border-top: 1px solid var(--linha);
    color: var(--apoio);
    text-align: center;
}

@media (max-width: 900px) {
    .painel-progresso {
        grid-template-columns: repeat(2, 1fr);
    }

    .progresso-principal {
        grid-column: 1 / -1;
    }

    .contador-teste:nth-child(2n) {
        border-left: 0;
    }

    .contador-teste {
        border-top: 1px solid var(--linha);
    }

    .captura-homologacao,
    .teste-grade {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .capa-homologacao .capa-conteudo {
        padding-top: 34px;
    }

    .capa-homologacao h1 {
        font-size: 2.4rem;
    }

    .filtros-homologacao .busca-manual {
        width: 100%;
        margin-left: 0;
    }

    .fase-teste > summary {
        padding: 15px;
    }

    .fase-corpo {
        padding: 0 15px 18px;
    }

    .fase-contagem {
        display: none;
    }

    .teste-cabecalho {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .matriz-permissoes {
        display: block;
        overflow-x: auto;
    }

    .resumo-final {
        padding: 19px 16px;
    }
}

@media print {
    .barra-progresso-leitura,
    .topo-manual,
    .filtros-homologacao,
    .controle-status,
    .salvo-local,
    .voltar-topo,
    .resumo-acoes {
        display: none !important;
    }

    .capa-homologacao {
        border: 0;
    }

    .painel-progresso,
    .fase-teste,
    .resumo-final {
        break-inside: avoid;
        border-color: #9aa3aa;
        background: #fff;
        color: #111;
    }

    .fase-teste {
        overflow: visible;
    }

    .fase-teste > .fase-corpo {
        display: block !important;
    }

    .teste-caso {
        break-inside: avoid;
    }

    .notas-teste textarea {
        min-height: 54px;
        border-color: #bbb;
        background: #fff;
        color: #111;
    }
}