/* ==========================================================================================
   Qualidade — documentos do SGI, revisões e painel.
   Só tokens do design system; nenhum valor literal de cor, fonte ou espaço.
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------
   Página do documento
   ------------------------------------------------------------------------------------------ */

.wms-qualidade__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--gap-secao);
}

.wms-qualidade__cartao {
    padding: var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
}

.wms-qualidade__dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--espaco-1) var(--espaco-3);
    margin: 0;
    font-size: var(--fonte-tam-sm);
}

.wms-qualidade__dados dt {
    color: var(--cor-texto-secundario);
}

.wms-qualidade__dados dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wms-qualidade__destaque {
    font-size: var(--fonte-tam-lg);
    font-weight: var(--fonte-peso-forte);
}

.wms-qualidade__secao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}

.wms-qualidade__arquivo {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-primaria-600);
    text-decoration: none;
    transition: color var(--transicao);
}

.wms-qualidade__arquivo:hover,
.wms-qualidade__arquivo:focus-visible {
    color: var(--cor-primaria-700);
    text-decoration: underline;
}

.wms-qualidade__revisoes {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wms-qualidade__revisao {
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-left-width: var(--espaco-1);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-qualidade__revisao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2);
}

.wms-qualidade__revisao-linha {
    margin: var(--espaco-1) 0 0;
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-qualidade__revisao-linha--recusa {
    color: var(--cor-status-reprovado);
}

.wms-qualidade__avisos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fonte-tam-sm);
}

.wms-qualidade__avisos li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

/* ------------------------------------------------------------------------------------------
   Leitura, assinatura e treinamento
   ------------------------------------------------------------------------------------------ */

.wms-qualidade__leitor {
    width: 100%;
    min-height: 70vh;
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-assinatura {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    max-width: 40rem;
}

.wms-assinatura__quadro {
    width: 100%;
    height: 12rem;
    border: var(--borda-largura-forte) dashed var(--cor-borda-forte);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    color: var(--cor-texto);
    touch-action: none;
    cursor: crosshair;
    transition: border-color var(--transicao);
}

.wms-assinatura__quadro:hover {
    border-color: var(--cor-primaria-600);
}

.wms-assinatura--desabilitada .wms-assinatura__quadro {
    pointer-events: none;
    opacity: 0.5;
}

.wms-assinatura__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
}

/* A assinatura é feita com o dedo, no celular: os botões em volta dela têm o alvo de toque mínimo. */
.wms-assinatura__rodape .rz-button,
.wms-qualidade__destinatario .rz-button {
    min-width: var(--alvo-min);
    min-height: var(--alvo-min);
}

.wms-assinatura__dica {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-qualidade__participante {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-qualidade__participante-fim {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2);
}

/* Quem leu e quem falta, e o que a pessoa já assinou: uma linha por registro, o nome à esquerda e a situação à direita. */
.wms-qualidade__registros {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: var(--espaco-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fonte-tam-sm);
}

.wms-qualidade__registro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    padding: var(--espaco-1) var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-qualidade__registro:last-child {
    border-bottom: none;
}

.wms-qualidade__registro-nome {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
}

/* ------------------------------------------------------------------------------------------
   Filas — minhas revisões e aprovação
   ------------------------------------------------------------------------------------------ */

.wms-qualidade__fila {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wms-qualidade__item {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    padding: var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.wms-qualidade__item:hover {
    border-color: var(--cor-borda-forte);
    box-shadow: var(--sombra-2);
}

.wms-qualidade__item--vencido {
    border-left: var(--espaco-1) solid var(--cor-status-vencido);
}

.wms-qualidade__item-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2);
}

.wms-qualidade__item-linha {
    margin: 0;
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-qualidade__item-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espaco-3);
}

.wms-qualidade__prazo {
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto);
}

.wms-qualidade__propria {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-qualidade__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-6) var(--espaco-4);
    border: var(--borda-largura) dashed var(--cor-borda);
    border-radius: var(--raio-lg);
    color: var(--cor-texto-secundario);
    text-align: center;
}

.wms-qualidade__vazio .rzi {
    font-size: var(--fonte-tam-3xl);
    color: var(--cor-sucesso);
}

/* ------------------------------------------------------------------------------------------
   Painel
   ------------------------------------------------------------------------------------------ */

.wms-qualidade__numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--espaco-3);
}

.wms-qualidade__numero {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    padding: var(--espaco-4);
    border-radius: var(--raio-lg);
    border-top: var(--espaco-1) solid var(--cor-borda);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-qualidade__numero-valor {
    font-size: var(--fonte-tam-3xl);
    font-weight: var(--fonte-peso-forte);
    color: var(--cor-texto);
    font-variant-numeric: tabular-nums;
}

.wms-qualidade__numero--vigente { border-top-color: var(--cor-status-liberado); }
.wms-qualidade__numero--vencido { border-top-color: var(--cor-status-vencido); }
.wms-qualidade__numero--revisao { border-top-color: var(--cor-status-inspecao); }
.wms-qualidade__numero--alerta { border-top-color: var(--cor-aviso); }

.wms-qualidade__grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--gap-secao);
}

.wms-qualidade__barras {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wms-qualidade__barra-linha {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--espaco-3);
    row-gap: var(--espaco-1);
    align-items: center;
    font-size: var(--fonte-tam-sm);
}

.wms-qualidade__barra-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fonte-peso-medio);
}

.wms-qualidade__barra {
    display: flex;
    height: var(--espaco-3);
    overflow: hidden;
    border-radius: var(--raio-pilula);
    background: var(--cor-fundo-sutil);
}

.wms-qualidade__barra-parte {
    height: 100%;
    transition: width var(--transicao-media);
}

.wms-qualidade__barra-parte--vigente { background: var(--cor-status-liberado); }
.wms-qualidade__barra-parte--revisao { background: var(--cor-status-inspecao); }
.wms-qualidade__barra-parte--vencido { background: var(--cor-status-vencido); }

.wms-qualidade__barra-numeros {
    grid-column: 2;
    color: var(--cor-texto-secundario);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
    .wms-qualidade__barra-linha {
        grid-template-columns: 1fr;
    }

    .wms-qualidade__barra-numeros {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wms-qualidade__item,
    .wms-qualidade__arquivo,
    .wms-qualidade__barra-parte,
    .wms-assinatura__quadro {
        transition: none;
    }
}

/* O cabeçalho da pessoa bloqueada: o ícone do cadeado em cor de alerta, com o número ao lado. */
.wms-topo__botao--alerta {
    color: var(--cor-status-vencido);
}

.wms-topo__botao--alerta .wms-topo__selo {
    background: var(--cor-status-vencido);
}

/* Os destinatários da leitura, no formulário do documento. */
.wms-qualidade__destinatarios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin: var(--espaco-2) 0 0;
    padding: 0;
    list-style: none;
}

.wms-qualidade__destinatario {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: var(--espaco-1) var(--espaco-1) var(--espaco-1) var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-pilula);
    background: var(--cor-fundo-sutil);
    font-size: var(--fonte-tam-sm);
}