/* ==========================================================================================
   Agenda — docas, horário da semana, indisponibilidades e complexidade de carga.
   Só tokens do design system; nenhum valor literal de cor, fonte ou espaço.
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------
   Página da doca
   ------------------------------------------------------------------------------------------ */

/* O fieldset só existe para desligar tudo de uma vez no modo de consulta; sem moldura própria. */
.wms-doca__campos {
    display: flex;
    flex-direction: column;
    gap: var(--gap-secao);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

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

.wms-doca__dia {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    align-items: center;
    gap: var(--espaco-3);
    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);
    transition: background-color var(--transicao), border-color var(--transicao);
}

.wms-doca__dia--fechado {
    background: var(--cor-fundo-sutil);
    color: var(--cor-texto-tenue);
}

.wms-doca__dia--aberto {
    border-color: var(--cor-primaria-200);
    box-shadow: var(--sombra-1);
}

.wms-doca__dia-nome {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    font-weight: var(--fonte-peso-medio);
}

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

.wms-doca__dia-horas .rz-form-field {
    width: 7.5rem;
}

.wms-doca__pausa {
    margin-inline: var(--espaco-2);
}

.wms-doca__fechado {
    grid-column: 2 / -1;
    font-size: var(--fonte-tam-sm);
    font-style: italic;
}

.wms-doca__cabecalho-da-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
}

.wms-doca__grupo {
    margin: var(--espaco-3) 0 var(--espaco-2);
    font-size: var(--fonte-tam-sm);
    font-weight: var(--fonte-peso-forte);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: var(--fonte-espaco-rotulo);
}

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

.wms-doca__indisponibilidade {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-left-width: var(--borda-largura-forte);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-doca__indisponibilidade--vigente {
    border-left-color: var(--cor-status-bloqueado);
    background: var(--cor-status-bloqueado-fundo);
}

.wms-doca__indisponibilidade--futura {
    border-left-color: var(--cor-aviso);
}

.wms-doca__indisponibilidade--passada {
    color: var(--cor-texto-secundario);
}

.wms-doca__indisponibilidade-periodo {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    white-space: nowrap;
}

.wms-doca__indisponibilidade-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    min-width: 0;
}

/* ------------------------------------------------------------------------------------------
   Listagem de docas
   ------------------------------------------------------------------------------------------ */

.wms-doca__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-1);
}

.wms-doca__dias {
    display: inline-flex;
    gap: var(--espaco-1);
}

.wms-doca__dia-curto {
    padding: 0 var(--espaco-1);
    border-radius: var(--raio-sm);
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
}

.wms-doca__dia-curto--aberto {
    background: var(--cor-primaria-100);
    color: var(--cor-primaria-800);
    font-weight: var(--fonte-peso-medio);
}

/* ------------------------------------------------------------------------------------------
   Complexidade de carga
   ------------------------------------------------------------------------------------------ */

.wms-complexidade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--painel-largura);
    align-items: start;
    gap: var(--gap-pagina);
}

.wms-complexidade__grupos {
    display: flex;
    flex-direction: column;
    gap: var(--gap-secao);
}

.wms-complexidade__grupo {
    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-complexidade__grupo-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-3);
}

.wms-complexidade__veiculo {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    font-size: var(--fonte-tam-lg);
    font-weight: var(--fonte-peso-medio);
}

.wms-complexidade__sem-faixa {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-md);
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
    font-size: var(--fonte-tam-sm);
}

.wms-complexidade__tabela {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.wms-complexidade__tabela th {
    padding: var(--espaco-1) var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-medio);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--fonte-espaco-rotulo);
}

.wms-complexidade__tabela td {
    padding: var(--espaco-1) var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-complexidade__tabela tr:last-child td {
    border-bottom: 0;
}

.wms-complexidade__fator {
    width: 7rem;
    text-align: right;
}

.wms-complexidade__tabela th.wms-complexidade__fator {
    text-align: right;
}

.wms-complexidade__filtros {
    display: flex;
    justify-content: flex-end;
}

.wms-complexidade__inativa td {
    color: var(--cor-texto-tenue);
}

.wms-complexidade__acoes {
    width: 8rem;
    text-align: right;
}

/* A lacuna é onde o cálculo seria recusado: não pode passar por linha comum. */
.wms-complexidade__lacuna td {
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
    font-size: var(--fonte-tam-sm);
    font-weight: var(--fonte-peso-medio);
}

.wms-complexidade__lacuna .rzi {
    vertical-align: middle;
    margin-right: var(--espaco-1);
}

.wms-complexidade__simulador {
    position: sticky;
    top: var(--espaco-4);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-elevado);
    box-shadow: var(--sombra-2);
}

.wms-complexidade__simulador form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-campo);
}

.wms-complexidade__resultado {
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    background: var(--cor-info-fundo);
    animation: wms-complexidade-surge var(--transicao-media) var(--curva);
}

.wms-complexidade__resultado--recusa {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

.wms-complexidade__resultado--recusa p {
    margin: 0;
}

.wms-complexidade__minutos {
    margin: 0 0 var(--espaco-2);
    font-size: var(--fonte-tam-lg);
}

.wms-complexidade__minutos .wms-quantidade {
    font-size: var(--fonte-tam-2xl);
    font-weight: var(--fonte-peso-forte);
}

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

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

.wms-complexidade__termos dd {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.wms-complexidade__conta {
    font-family: var(--fonte-mono);
}

@keyframes wms-complexidade-surge {
    from {
        opacity: 0;
        transform: translateY(var(--espaco-1));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wms-doca__dia,
    .wms-complexidade__resultado {
        transition: none;
        animation: none;
    }
}

@media (max-width: 64rem) {
    .wms-complexidade {
        grid-template-columns: minmax(0, 1fr);
    }

    .wms-complexidade__simulador {
        position: static;
    }

    .wms-doca__dia {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------------------------
   Agenda das docas — a grade do dia
   A grade é CSS grid: uma faixa por doca, uma coluna por intervalo de 15 minutos. Intervalo e
   caminhão ocupam a mesma linha da grade, posicionados pela coluna; o caminhão fica por cima.
   ------------------------------------------------------------------------------------------ */

.wms-agenda {
    gap: var(--gap-secao);
}

.wms-agenda__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-3);
}

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

.wms-grade {
    --grade-rotulo: 11rem;
    --grade-coluna-min: 1.75rem;
    --grade-altura-faixa: 3.25rem;

    display: flex;
    flex-direction: column;
    overflow-x: auto;
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
}

.wms-grade__cabeca,
.wms-grade__linha {
    display: grid;
    grid-template-columns: var(--grade-rotulo) minmax(calc(var(--grade-colunas) * var(--grade-coluna-min)), 1fr);
    min-width: max-content;
}

.wms-grade__cabeca {
    position: sticky;
    top: 0;
    z-index: var(--camada-conteudo);
    background: var(--cor-fundo-sutil);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-secundario);
}

.wms-grade__linha + .wms-grade__linha {
    border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-grade__rotulo {
    position: sticky;
    left: 0;
    z-index: var(--camada-conteudo);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-1) var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-3);
    background: var(--cor-fundo-superficie);
    border-right: var(--borda-largura) solid var(--cor-borda);
    font-size: var(--fonte-tam-sm);
}

.wms-grade__cabeca .wms-grade__rotulo {
    background: var(--cor-fundo-sutil);
    font-weight: var(--fonte-peso-medio);
}

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

.wms-grade__ocupacao {
    margin-left: auto;
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-pilula);
    background: var(--cor-fundo-sutil);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fonte-peso-medio);
}

.wms-grade__ocupacao--alerta {
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
}

.wms-grade__horas,
.wms-grade__faixa {
    display: grid;
    grid-template-columns: repeat(var(--grade-colunas), minmax(var(--grade-coluna-min), 1fr));
}

.wms-grade__hora {
    grid-row: 1;
    padding: var(--espaco-2) var(--espaco-1);
    border-left: var(--borda-largura) solid var(--cor-borda);
    font-variant-numeric: tabular-nums;
}

.wms-grade__faixa {
    grid-template-rows: var(--grade-altura-faixa);
}

.wms-grade__intervalo {
    grid-row: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--borda-largura) solid var(--cor-neutra-100);
    background: transparent;
    transition: background-color var(--transicao);
}

.wms-grade__intervalo--livre {
    cursor: pointer;
}

.wms-grade__intervalo--livre:hover,
.wms-grade__intervalo--livre:focus-visible {
    background: var(--cor-primaria-100);
    outline: none;
    box-shadow: inset var(--foco-anel);
}

.wms-grade__intervalo--fechado {
    background: repeating-linear-gradient(
        135deg, var(--cor-fundo-sutil), var(--cor-fundo-sutil) var(--espaco-1), transparent var(--espaco-1), transparent var(--espaco-2));
}

.wms-grade__intervalo--pausa {
    background: var(--cor-neutra-200);
}

.wms-grade__intervalo--indisponivel {
    background: var(--cor-erro-fundo);
}

.wms-grade__intervalo--passado {
    background: var(--cor-neutra-050);
}

.wms-grade__bloco {
    grid-row: 1;
    z-index: var(--camada-conteudo);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: var(--espaco-1) var(--borda-largura);
    padding: 0 var(--espaco-2);
    border: var(--borda-largura) solid currentColor;
    border-left-width: var(--borda-largura-forte);
    border-radius: var(--raio-md);
    font-size: var(--fonte-tam-xs);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--sombra-1);
    transition: box-shadow var(--transicao);
}

.wms-grade__bloco:hover {
    box-shadow: var(--sombra-2);
}

.wms-grade__bloco:focus-visible {
    outline: none;
    box-shadow: var(--foco-anel);
}

.wms-grade__bloco-numero {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    font-weight: var(--fonte-peso-forte);
    white-space: nowrap;
}

.wms-grade__bloco-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cor-texto-secundario);
}

.wms-grade__bloco--inspecao { color: var(--cor-status-inspecao); background: var(--cor-status-inspecao-fundo); }
.wms-grade__bloco--quarentena { color: var(--cor-status-quarentena); background: var(--cor-status-quarentena-fundo); }
.wms-grade__bloco--devolvido { color: var(--cor-status-devolvido); background: var(--cor-status-devolvido-fundo); }
.wms-grade__bloco--avariado { color: var(--cor-status-avariado); background: var(--cor-status-avariado-fundo); }
.wms-grade__bloco--liberado { color: var(--cor-status-liberado); background: var(--cor-status-liberado-fundo); }
.wms-grade__bloco--vencido { color: var(--cor-status-vencido); background: var(--cor-status-vencido-fundo); }
.wms-grade__bloco--reprovado { color: var(--cor-status-reprovado); background: var(--cor-status-reprovado-fundo); }
.wms-grade__bloco--bloqueado { color: var(--cor-status-bloqueado); background: var(--cor-status-bloqueado-fundo); }

.wms-grade__legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2) var(--espaco-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-secundario);
}

.wms-grade__legenda li {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
}

.wms-grade__amostra {
    display: inline-block;
    width: var(--espaco-4);
    height: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-sm);
}

/* ------------------------------------------------------------------------------------------
   Ocupação do dia e dos sete seguintes
   ------------------------------------------------------------------------------------------ */

.wms-ocupacao__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fonte-tam-sm);
    font-variant-numeric: tabular-nums;
}

.wms-ocupacao__tabela th,
.wms-ocupacao__tabela td {
    padding: var(--espaco-1) var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
    text-align: center;
}

.wms-ocupacao__tabela tbody th {
    text-align: left;
}

.wms-ocupacao__dia {
    padding: var(--espaco-1) var(--espaco-2);
    border: 0;
    border-radius: var(--raio-md);
    background: transparent;
    color: var(--cor-texto-secundario);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--transicao);
}

.wms-ocupacao__dia:hover,
.wms-ocupacao__dia:focus-visible {
    background: var(--cor-primaria-100);
    outline: none;
}

.wms-ocupacao__dia--escolhido .wms-ocupacao__dia {
    background: var(--cor-primaria-150);
    color: var(--cor-primaria-800);
    font-weight: var(--fonte-peso-forte);
}

.wms-ocupacao__celula--alerta {
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
    font-weight: var(--fonte-peso-forte);
}

.wms-ocupacao__celula--fechada {
    color: var(--cor-texto-tenue);
}

/* ------------------------------------------------------------------------------------------
   Novo agendamento — o formulário com a prévia ao lado
   ------------------------------------------------------------------------------------------ */

.wms-agendamento__formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--gap-secao);
    align-items: start;
}

.wms-agendamento__campos {
    display: flex;
    flex-direction: column;
    gap: var(--gap-campo);
    min-width: 0;
}

.wms-previa {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    padding: var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-primaria-200);
    border-radius: var(--raio-lg);
    background: var(--cor-primaria-050);
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicao), background-color var(--transicao);
}

.wms-previa--recusada {
    border-color: var(--cor-erro);
    background: var(--cor-erro-fundo);
}

.wms-previa p {
    margin: 0;
}

.wms-previa__destaque {
    display: flex;
    flex-direction: column;
}

.wms-previa__rotulo {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-secundario);
    letter-spacing: var(--fonte-espaco-rotulo);
    text-transform: uppercase;
}

.wms-previa__hora {
    font-size: var(--fonte-tam-2xl);
    font-weight: var(--fonte-peso-forte);
    font-variant-numeric: tabular-nums;
}

.wms-previa__linha,
.wms-previa__alerta,
.wms-previa__recusa,
.wms-previa__livre {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-1);
    font-size: var(--fonte-tam-sm);
}

.wms-previa__conta {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-secundario);
}

.wms-previa__alerta {
    color: var(--cor-aviso);
}

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

.wms-previa__livre {
    color: var(--cor-sucesso);
}

/* ------------------------------------------------------------------------------------------
   Página do agendamento
   ------------------------------------------------------------------------------------------ */

.wms-agendamento {
    gap: var(--gap-secao);
}

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

.wms-agendamento__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-agendamento__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-agendamento__dados dt {
    color: var(--cor-texto-secundario);
}

.wms-agendamento__dados dd {
    margin: 0;
}

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

.wms-agendamento__secao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
}

.wms-agendamento__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fonte-tam-sm);
}

.wms-agendamento__tabela th,
.wms-agendamento__tabela td {
    padding: var(--espaco-1) var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
    text-align: left;
}

.wms-agendamento__divergencias,
.wms-agendamento__avisos,
.wms-agendamento__plano {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding-left: var(--espaco-4);
    font-size: var(--fonte-tam-sm);
}

/* ------------------------------------------------------------------------------------------
   Portaria do dia
   ------------------------------------------------------------------------------------------ */

.wms-portaria__fases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--espaco-4);
    align-items: start;
}

.wms-portaria__fase {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-3);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-sutil);
}

.wms-portaria__fase-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: var(--fonte-tam-md);
    font-weight: var(--fonte-peso-forte);
}

.wms-portaria__contagem {
    min-width: var(--espaco-5);
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-pilula);
    background: var(--cor-fundo-superficie);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wms-portaria__cartao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-left: var(--borda-largura-forte) solid var(--cor-borda-forte);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.wms-portaria__cartao:hover {
    box-shadow: var(--sombra-2);
}

.wms-portaria__cartao--pendente {
    border-left-color: var(--cor-aviso);
}

.wms-portaria__cartao--alerta {
    border-left-color: var(--cor-erro);
}

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

.wms-portaria__doca {
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

.wms-portaria__cartao-topo .wms-status {
    margin-left: auto;
}

.wms-portaria__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-1);
    margin: 0;
    font-size: var(--fonte-tam-sm);
}

.wms-portaria__sinal {
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-pilula);
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-medio);
}

.wms-portaria__sinal--noprazo { background: var(--cor-fundo-sutil); color: var(--cor-texto-secundario); }
.wms-portaria__sinal--adiantado { background: var(--cor-info-fundo); color: var(--cor-info); }
.wms-portaria__sinal--nohorario { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.wms-portaria__sinal--atrasado { background: var(--cor-erro-fundo); color: var(--cor-erro); }

.wms-portaria__alerta {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    margin: 0;
    color: var(--cor-erro);
    font-size: var(--fonte-tam-sm);
    font-weight: var(--fonte-peso-medio);
}

.wms-portaria__divergencia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    padding: var(--espaco-1) var(--espaco-2);
    border-radius: var(--raio-md);
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
    font-size: var(--fonte-tam-sm);
}

.wms-portaria__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin-top: var(--espaco-1);
}

.wms-portaria__agendado,
.wms-portaria__pendencias {
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-sutil);
    font-size: var(--fonte-tam-sm);
}

.wms-portaria__agendado p,
.wms-portaria__pendencias ul {
    margin: 0;
}

/* A carreta: outros clientes no mesmo caminhão — no formulário de agendar e na página do agendamento. */
.wms-agendamento__carreta {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-sutil);
    font-size: var(--fonte-tam-sm);
    box-shadow: var(--sombra-1);
}

.wms-agendamento__carreta .rzi {
    flex-shrink: 0;
    color: var(--cor-marca);
    font-size: var(--fonte-tam-2xl);
}

.wms-agendamento__carreta-lista {
    margin: var(--espaco-2) 0 0;
    padding-left: var(--espaco-4);
}

/* Os clientes que o caminhão traz, no cartão da portaria. */
.wms-portaria__clientes {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fonte-tam-sm);
}

.wms-portaria__clientes .wms-codigo {
    margin-right: var(--espaco-1);
}

.wms-portaria__ordem {
    margin-left: var(--espaco-2);
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-pilula);
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
    font-size: var(--fonte-tam-xs);
}

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

/* A geração das ordens: um agendamento por linha, com o que falta e a ordem que nasceu. */
.wms-geracao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wms-geracao__agendamento {
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-left-width: var(--espaco-1);
    border-left-color: var(--cor-sucesso);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.wms-geracao__agendamento--pendente {
    border-left-color: var(--cor-aviso);
}

.wms-geracao__agendamento--gerada {
    border-left-color: var(--cor-borda);
    background: var(--cor-fundo-sutil);
}

.wms-geracao__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    font-weight: var(--fonte-peso-medio);
}

.wms-geracao__detalhe,
.wms-geracao__pendencia,
.wms-geracao__repetida {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    margin: var(--espaco-1) 0 0;
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-geracao__pendencia,
.wms-geracao__repetida {
    color: var(--cor-aviso);
}

@media (max-width: 48rem) {
    .wms-agendamento__formulario {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wms-grade__intervalo,
    .wms-grade__bloco,
    .wms-ocupacao__dia,
    .wms-previa,
    .wms-portaria__cartao,
    .wms-geracao__agendamento {
        transition: none;
    }
}