/* v10.10.9 — PORTARIA E CONFERENTE EM TELA DE COMPUTADOR.
 * Tudo aqui só vale com body.op-desk (computador com mouse e tela de 1200 px
 * ou mais — ver js/operacaoDesktop.js). No celular e no tablet nada muda: as regras abaixo
 * de "fora do computador" só escondem os pedaços que existem só no desktop. */

/* ---------- fora do computador: como sempre ---------- */
.op-grupo, .op-ico, .op-cab { display: none; }

/* ---------- computador ---------- */
body.op-desk .conf-wrap { max-width: 1840px; padding: 18px 26px 60px; display: grid; column-gap: 24px; align-items: start; }

/* menu de abas vira a coluna da esquerda, fixa ao rolar (só o menu principal:
 * as abas internas de uma tela, como Chegada/No pátio/Retirada, ficam como são) */
body.op-desk .conf-topbar { padding-right: 72px; } /* o botão do tema não cobre mais o "Sair" */
body.op-desk :is(#portariaTabs, #confTabs) { grid-area: tabs; display: flex; flex-direction: column; gap: 2px; margin: 0; position: sticky; top: 14px; max-height: calc(100vh / var(--z, 1) - 28px); overflow: auto; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: 0 1px 2px rgba(15, 35, 70, .04); }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab { position: relative; display: block; flex: none; width: 100%; min-width: 0; text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; line-height: 1.25; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab:has(.contagem:not(:empty)) { padding-right: 104px; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab br { display: none; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab:hover:not(.active) { background: var(--bg); }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab.active { background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(11, 31, 58, .22); }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .op-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .op-sub .op-par { display: none; }
/* no computador o Histórico sobe para "Consultas" (no celular a ordem das abas continua a de sempre) */
body.op-desk #portariaTabs > [data-tab="historico"] { order: 1; }
body.op-desk #portariaTabs > .op-grupo-rotina { order: 2; }
body.op-desk #portariaTabs > :is([data-tab="turno"], [data-tab="tarefas"], [data-tab="cadastros"]) { order: 3; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab.active .op-sub { color: rgba(255, 255, 255, .72); }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .contagem { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; display: flex; gap: 4px; align-items: center; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .contagem:not(:empty) { background: #e8eef7; color: var(--navy); border-radius: 999px; padding: 2px 9px; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab.active .contagem:not(:empty) { background: rgba(255, 255, 255, .16); color: #fff; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .contagem br { display: none; }
body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .contagem > * { margin: 0 !important; }
body.op-desk .op-grupo { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); font-weight: 800; padding: 12px 12px 4px; }
body.op-desk .op-grupo:first-child { padding-top: 4px; }
body.op-desk .op-ico { display: inline; }

/* blocos (cartões) das telas em duas colunas */
body.op-desk .op-duas { display: grid; gap: 16px 22px; align-items: start; }
body.op-desk .op-bloco { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; min-width: 0; }
body.op-desk .op-bloco > h3:first-child { margin-top: 0; }
body.op-desk .op-bloco .conf-acoes-topo { margin-bottom: 0; }

/* ---------- PORTARIA ---------- */
body.op-desk #telaPrincipal .conf-wrap { grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "resumo resumo" "tabs cab" "tabs conteudo"; grid-template-rows: auto auto 1fr; }
body.op-desk #resumoTurnoPort { grid-area: resumo; min-width: 0; }
body.op-desk #resumoTurnoPort .resumo-turno { margin: 0 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: center; }
body.op-desk #resumoTurnoPort .rt-topo { margin: 0; flex-direction: column; align-items: flex-start; }
body.op-desk #resumoTurnoPort .rt-alerta { grid-column: 1 / -1; margin: 0; }
body.op-desk #portariaConteudo { grid-area: conteudo; min-width: 0; }
body.op-desk .op-cab { grid-area: cab; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
body.op-desk .op-cab-tit b { display: block; font-size: 22px; color: var(--navy); font-weight: 900; }
body.op-desk .op-cab-tit span { font-size: 13px; color: var(--text-muted); }
body.op-desk .op-cab-rel { text-align: right; }
body.op-desk .op-cab-rel b { display: block; font-size: 26px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
body.op-desk .op-cab-rel span { font-size: 12.5px; color: var(--text-muted); text-transform: capitalize; }
/* visitantes: ações e agendadas à esquerda, quem está dentro à direita */
body.op-desk .op-visitantes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "acoes dentro" "agenda dentro"; grid-template-rows: auto 1fr; }
/* coleta: registrar e o pátio à esquerda, pedidos aguardando à direita */
body.op-desk .op-coleta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "acoes pedidos" "saida pedidos" "semveic pedidos"; grid-template-rows: auto auto 1fr; }
/* carga fracionada e devolução: registrar à esquerda, quem está no pátio à direita */
body.op-desk .op-entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "acoes saida"; }
body.op-desk .op-entrada .op-a-acoes p { margin-bottom: 0; }
body.op-desk .op-a-acoes { grid-area: acoes; }
body.op-desk .op-a-agenda { grid-area: agenda; }
body.op-desk .op-a-dentro { grid-area: dentro; }
body.op-desk .op-a-pedidos { grid-area: pedidos; background: transparent; border: 0; padding: 0; }
body.op-desk .op-a-pedidos .coleta-aguard { margin: 0; }
body.op-desk .op-a-saida { grid-area: saida; }
body.op-desk .op-a-semveic { grid-area: semveic; background: transparent; border: 0; padding: 0; }
body.op-desk .op-a-semveic:empty { display: none; }
body.op-desk .coleta-aguard-linha { font-size: 14px; }
/* expedição (consulta) e histórico: cartões em colunas */
body.op-desk .op-grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
body.op-desk .op-grade-cartoes > .tarefa-card { margin: 0; }
body.op-desk #listaHistoricoPortaria:has(> .tarefa-card) { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; align-items: start; }
body.op-desk #listaHistoricoPortaria:has(> .tarefa-card) > :not(.tarefa-card) { grid-column: 1 / -1; }
body.op-desk #listaHistoricoPortaria > .tarefa-card { margin: 0; }
/* listas de cartões ocupam a largura em colunas */
body.op-desk :is(#listaVisitantesAbertos, #listaAgendados, #listaVisitasAbertas, #listaRecebimentosAbertos, #listaDevolucoesAbertas) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
body.op-desk :is(#listaVisitantesAbertos, #listaAgendados, #listaVisitasAbertas, #listaRecebimentosAbertos, #listaDevolucoesAbertas) > .tarefa-card { margin: 0; }
body.op-desk :is(#listaVisitantesAbertos, #listaAgendados, #listaVisitasAbertas, #listaRecebimentosAbertos, #listaDevolucoesAbertas) > :not(.tarefa-card) { grid-column: 1 / -1; }

/* ---------- CONFERENTE ---------- */
body.op-desk #telaTarefas .conf-wrap { grid-template-columns: 270px minmax(0, 1fr) 300px; grid-template-areas: "resumo resumo resumo" "placar busca novo" "tabs docs docs" "tabs off off" "tabs lista lista"; grid-template-rows: auto auto auto auto 1fr; }
/* v11.3.2 — resumo do dia: faixa de largura total no topo */
body.op-desk #resumoDiaConf { grid-area: resumo; min-width: 0; }
body.op-desk #resumoDiaConf .resumo-dia { display: flex; align-items: center; gap: 18px; padding: 10px 16px; }
body.op-desk #resumoDiaConf .rd-ola { margin: 0; min-width: 190px; }
body.op-desk #resumoDiaConf .rd-tiles { flex: 1; }
body.op-desk #resumoDiaConf .rd-tile { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; }
body.op-desk #resumoDiaConf .rd-tile b { display: inline; font-size: 22px; }
body.op-desk #resumoDiaConf .rd-tile span { display: inline; font-size: 12.5px; }
body.op-desk #placarConferente { grid-area: placar; min-width: 0; }
body.op-desk #placarConferente > * { margin-bottom: 0 !important; }
body.op-desk #docsConferente { grid-area: docs; min-width: 0; }
body.op-desk #telaTarefas .conf-acoes-topo { grid-area: novo; margin: 0; }
body.op-desk #telaTarefas .conf-acoes-topo .btn-grande { padding: 11px 14px; }
body.op-desk #telaTarefas .conf-wrap > .toolbar { grid-area: busca; margin: 0 !important; }
body.op-desk #offlineBanner { grid-area: off; }
body.op-desk #listaTarefas { grid-area: lista; min-width: 0; margin-top: 14px; }
body.op-desk #confTabs { margin-top: 14px; top: 14px; }
/* em separação / aguardando coleta: pedidos em grade + o painel do tempo parado fixo à direita */
body.op-desk .op-conf-lista { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "dica lado" "filtro lado" "cards lado"; grid-template-rows: auto auto 1fr; gap: 10px 20px; }
body.op-desk .op-conf-lista > .op-bloco { background: transparent; border: 0; padding: 0; }
body.op-desk .op-a-dica { grid-area: dica; margin: 0 !important; }
body.op-desk .op-a-filtro { grid-area: filtro; }
body.op-desk .op-a-filtro:empty { display: none; }
body.op-desk .op-a-cards { grid-area: cards; min-width: 0; }
body.op-desk .op-a-lado { grid-area: lado; position: sticky; top: 14px; max-height: calc(100vh / var(--z, 1) - 28px); overflow: auto; }
body.op-desk .op-a-lado .ind-parado { margin-bottom: 10px; }
body.op-desk .op-a-lado .ind-parado .tiles { grid-template-columns: repeat(3, 1fr); }
body.op-desk #cardsPedidos .grupo-carga { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 0 0 18px; align-items: start; }
body.op-desk #cardsPedidos .grupo-carga-tit, body.op-desk #cardsPedidos .sub-carga { grid-column: 1 / -1; margin: 0; }
body.op-desk #cardsPedidos .tarefa-card { margin: 0; height: 100%; display: flex; flex-direction: column; }
body.op-desk #cardsPedidos .tarefa-card > .btn-grande:last-child { margin-top: auto !important; }
/* cargas fracionadas, contêineres, devoluções, inventário e tarefas: cartões em grade */
body.op-desk #listaTarefas:has(> .tarefa-card) { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
body.op-desk #listaTarefas:has(> .tarefa-card) > :not(.tarefa-card) { grid-column: 1 / -1; }
body.op-desk #listaTarefas > .tarefa-card { margin: 0; }

/* janelas (pedido, recebimento) um pouco mais largas no computador */
body.op-desk .modal { max-width: 760px; }

:root[data-tema='escuro'] body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .contagem:not(:empty) { background: #1d3353; color: #cfe0ff; }

/* tela baixa (notebook 1366×768): o menu da esquerda fica mais compacto para caber inteiro */
@media (max-height: 860px) {
  body.op-desk :is(#portariaTabs, #confTabs) .conf-tab { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
  body.op-desk :is(#portariaTabs, #confTabs) .conf-tab .op-sub { font-size: 11px; }
  body.op-desk .op-grupo { padding: 8px 12px 2px; }
  body.op-desk .conf-wrap { padding-top: 12px; }
}
/* tema escuro: o painel "tempo parado" tinha fundo branco com letra clara (ilegível) */
:root[data-tema='escuro'] body.op-desk .ind-parado { background: var(--card); }
:root[data-tema='escuro'] body.op-desk .ind-parado :is([style*="var(--navy)"], .tile .v) { color: #cfe0ff !important; }

/* v11.3.4 — abas com ícone em span próprio: no computador, ícone e nome lado a lado */
body.op-desk :is(#portariaTabs, #confTabs) .ct-ico { margin-right: 5px; }