/* Portal do cliente — GPS IT
   Tokens e telas do handoff `design/design_handoff_portal_cliente`.

   Folha separada da interna (gps.css) de propósito: a paleta do portal é outra
   (--borda #C9CDD6 contra #dde1e8, --hairline #E3E6EC contra #edeff3) e
   misturar as duas faria uma tela puxar o token da outra sem ninguém notar.

   Sem sombra, sem gradiente, sem raio em nenhum elemento. Hierarquia por borda
   e fundo. */

:root {
  --navy:        #1F3864;
  --navy-linha:  #4A6094;
  --navy-fraco:  #93A3C4;
  --navy-claro:  #C7D0E2;
  --laranja:     #F47B20;
  --laranja-esc: #DB6A15;
  --laranja-bg:  #FDF6F0;
  --laranja-br:  #F0DCC9;
  --texto:       #1F3864;
  --texto-2:     #4A5568;
  --texto-3:     #6B7280;
  --texto-4:     #9AA2B1;
  --borda:       #C9CDD6;
  --hairline:    #E3E6EC;
  --fundo-app:   #EDEFF3;
  --superficie:  #FFFFFF;
  --superficie-2:#F7F8FA;
  --chip-bg:     #EEF1F6;
  --neutro-bg:   #F5F6F8;
  --linha-hover: #F2F5FA;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px;
  --e-6:24px; --e-7:28px; --e-8:32px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo-app);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

/* O outline nunca é removido: é o único indicador de foco para quem navega
   por teclado, e o portal é usado por gente que nunca viu esta tela. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}

/* ---------- cabeçalho ---------- */

.p-barra {
  height: 60px;
  background: var(--navy);
  padding: 0 var(--e-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-barra-esq, .p-barra-dir { display: flex; align-items: center; gap: 14px; }
.p-barra img { height: 26px; width: auto; display: block; }
.p-divisor { width: 1px; height: 18px; background: var(--navy-linha); }
.p-barra-titulo { font-size: 13px; color: var(--navy-claro); }
.p-barra-cliente { font-size: 13px; color: var(--navy-claro); }
.p-sair {
  font-size: 13px; color: #fff;
  border-bottom: 1px solid var(--laranja);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit; cursor: pointer; padding: 0;
}
.p-voltar-barra { font-size: 13px; color: var(--navy-claro); }

/* ---------- página ---------- */

.p-pagina { max-width: 1180px; margin: 0 auto; padding: var(--e-6) var(--e-7) var(--e-5); }
.p-col { display: flex; flex-direction: column; gap: var(--e-5); }

.p-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); }
.p-topo h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.p-topo .sub { font-size: 13px; color: var(--texto-3); }

/* busca */
.p-busca {
  display: flex; align-items: center; gap: 8px;
  width: 340px; height: 38px; padding: 0 12px;
  border: 1px solid var(--borda); background: var(--superficie);
}
.p-busca .lupa { color: var(--texto-3); font-size: 15px; }
.p-busca input {
  flex: 1; border: 0; outline: none; background: none;
  font-family: inherit; font-size: 13px; color: var(--texto);
}

/* ---------- filtros ---------- */

.p-filtros {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.p-seg { display: flex; border: 1px solid var(--borda); background: var(--superficie); }
.p-seg > * {
  padding: 7px 14px; font-size: 12.5px; color: var(--texto-2);
  border-left: 1px solid var(--borda); white-space: nowrap;
}
.p-seg > *:first-child { border-left: 0; }
/* margin-left explícito: no celular o chip vira flex e o espaço entre o
   rótulo e a contagem, que era um nó de texto, desaparece. */
.p-seg .conta { font-family: var(--mono); color: var(--texto-3); margin-left: 5px; }
.p-seg .ativo { background: var(--navy); color: #fff; font-weight: 600; }
.p-seg .ativo .conta { color: var(--navy-claro); }
.p-seg > *:not(.ativo):hover { background: var(--linha-hover); }

.p-ano { display: flex; align-items: center; gap: 10px; }
.p-ano-rot {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3);
}
.p-seg .valor-ano { font-family: var(--mono); font-size: 12.5px; }
.p-seg .valor-ano.ativo { background: var(--chip-bg); color: var(--navy); }

/* ---------- etiqueta de situação ---------- */

.p-etq {
  display: inline-block;
  font-family: var(--mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 10.5px; padding: 3px 8px; white-space: nowrap;
}
.p-etq.andamento { border: 1px solid var(--navy); background: var(--chip-bg); color: var(--navy); }
.p-etq.concluido { background: var(--navy); color: #fff; }
.p-etq.cancelado { border: 1px solid var(--borda); background: var(--neutro-bg); color: var(--texto-3); }
.p-etq.grande { font-size: 11px; padding: 5px 10px; }

/* Laranja não é usado em etiqueta: fica reservado para a etapa atual da régua,
   botões de ação e avisos de exceção. Se todo estado virar laranja, o laranja
   para de significar algo. */

/* ---------- tabela de pedidos ---------- */

.p-tabela { width: 100%; border-collapse: collapse; }
.p-tabela thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3);
  text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--navy);
}
.p-tabela th.num, .p-tabela td.num { text-align: right; }
.p-tabela tbody td {
  border-bottom: 1px solid var(--hairline);
  padding: 13px 12px 13px 0; vertical-align: top;
}
.p-tabela tbody td:last-child { padding-right: 0; }
/* Zebra foi testada no desenho e descartada: com hairline em cada linha e
   linhas de duas alturas de texto, o cinza alternado brigava com os cinzas que
   carregam informação (a etiqueta e o trilho da régua). */
.p-tabela tbody tr:hover { background: var(--linha-hover); }

.p-num-pedido {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--borda);
}
.p-tabela tbody tr:hover .p-num-pedido { border-bottom-color: var(--navy); }
.p-itens-resumo { font-size: 12.5px; color: var(--texto-3); margin-top: 3px; }
.p-data { font-family: var(--mono); font-size: 13px; }
.p-valor { font-family: var(--mono); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-valor.apagado { color: var(--texto-3); font-weight: 400; }

/* mini-régua na lista */
.p-mini-regua { display: flex; gap: 3px; width: 150px; margin-top: 7px; }
.p-mini-regua span { height: 5px; flex: 1; background: var(--hairline); }
.p-mini-regua span.vencida { background: var(--navy); }
.p-mini-regua span.atual   { background: var(--laranja); }

/* ---------- paginação ---------- */

.p-paginacao {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--e-1);
}
.p-paginacao .contagem { font-size: 12.5px; color: var(--texto-3); }

/* Só no celular: no desktop a paginação numerada dá conta. */
.p-carregar { display: none; }

/* ---------- detalhe ---------- */

.p-voltar { display: block; padding: 22px 28px 0; font-size: 13px; color: var(--texto-2); }
.p-voltar:hover { color: var(--navy); }

.p-cab-pedido {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-8); padding: var(--e-4) var(--e-7) var(--e-6);
  border-bottom: 1px solid var(--hairline);
}
.p-cab-pedido .linha1 { display: flex; align-items: center; gap: 14px; }
.p-numero-grande {
  font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.01em;
}
.p-cab-pedido .meta { font-size: 14px; color: var(--texto-2); margin-top: 6px; }
.p-total-rot {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3);
}
.p-total-valor {
  font-family: var(--mono); font-size: 28px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.p-cab-dir { text-align: right; white-space: nowrap; }

.p-corpo { display: grid; grid-template-columns: 1fr 340px; }
.p-esq {
  border-right: 1px solid var(--hairline);
  padding: var(--e-6) var(--e-7) var(--e-8);
  display: flex; flex-direction: column; gap: 30px;
}
.p-rail {
  background: var(--superficie-2);
  padding: var(--e-6) var(--e-6) var(--e-8);
  display: flex; flex-direction: column; gap: var(--e-6);
}

.p-secao {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3);
}
.p-secao-linha { display: flex; align-items: baseline; justify-content: space-between; }
.p-secao-linha .conta { font-size: 12.5px; color: var(--texto-3); }

/* réguas paralelas */
.p-trilhas { border: 1px solid var(--borda); background: var(--superficie-2); margin-top: var(--e-3); }
.p-trilha {
  display: grid; grid-template-columns: 112px 1fr;
  padding: var(--e-4) 18px; border-top: 1px solid var(--hairline);
}
.p-trilha:first-child { border-top: 0; }
.p-trilha-rot {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--navy);
}
/* O estado curto ao lado do rótulo é afordância de celular: lá a legenda
   abaixo da régua não cabe. No desktop ela existe e diria a mesma coisa duas
   vezes, colada no rótulo. */
.p-trilha-estado { display: none; }

.p-regua { display: flex; gap: var(--e-1); }
.p-regua span { height: 8px; flex: 1; background: var(--hairline); }
.p-regua span.vencida { background: var(--navy); }
.p-regua span.atual   { background: var(--laranja); }
.p-regua-legenda {
  display: flex; justify-content: space-between; gap: var(--e-3);
  font-size: 12.5px; margin-top: 6px; color: var(--texto-2);
}
.p-regua-legenda .atual { color: var(--navy); font-weight: 600; }
.p-regua-legenda .nao-iniciada { color: var(--texto-3); }

/* A régua responde ONDE ESTÁ, nunca QUANDO CHEGA. Não inventar previsão, não
   derivar estimativa de média histórica. */
.p-aviso-prazo {
  border-left: 3px solid var(--laranja);
  background: var(--laranja-bg);
  padding: 14px var(--e-4);
  font-size: 13.5px; line-height: 1.6;
}
.p-nota { font-size: 12.5px; color: var(--texto-3); }

/* itens */
.p-itens { width: 100%; border-collapse: collapse; margin-top: var(--e-3); }
.p-itens thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3);
  text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--navy);
}
.p-itens th.num, .p-itens td.num { text-align: right; }
.p-itens tbody td { border-bottom: 1px solid var(--hairline); padding: 14px 0; vertical-align: top; }
.p-sku { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.p-desc { font-size: 13px; color: var(--texto-2); max-width: 420px; line-height: 1.5; margin-top: 3px; }
.p-renovacao {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--e-2);
  border: 1px solid var(--borda); background: var(--neutro-bg); padding: 4px var(--e-2);
}
.p-renovacao .rot {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; color: var(--texto-3);
}
.p-renovacao .data { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.p-itens td.qtd, .p-itens td.unit { font-family: var(--mono); font-size: 13.5px; }
/* No celular a coluna Qtd. some e a quantidade migra para a linha de preço,
   como "6 × R$ 83,55" — o comprador confere quantidade e unitário juntos. */
.so-celular { display: none; }
.p-itens td.tot { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.p-itens tr.total td { border-bottom: 0; padding-top: var(--e-4); font-weight: 600; }
.p-itens tr.total .tot { font-size: 16px; }

/* histórico */
.p-hist { margin-top: var(--e-3); }
.p-hist-linha {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--e-4);
  padding: var(--e-3) 0; border-top: 1px solid var(--hairline);
}
.p-hist-linha:last-child { border-bottom: 1px solid var(--hairline); }
.p-hist-data { font-family: var(--mono); font-size: 13px; color: var(--texto-2); }
.p-hist-texto { font-size: 13.5px; }
.p-hist-linha:first-child .p-hist-texto strong { font-weight: 600; }

/* rail */
.p-resumo-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 13px;
}
.p-resumo-linha:last-child { border-bottom: 1px solid var(--hairline); }
.p-resumo-linha .rot { color: var(--texto-2); }
.p-resumo-linha .val { font-family: var(--mono); font-weight: 500; }
.p-resumo-linha .val.forte { font-weight: 600; }

.p-ajuda {
  background: var(--superficie); border: 1px solid var(--borda);
  padding: 15px; display: flex; flex-direction: column; gap: 10px;
}
.p-ajuda p { margin: 0; font-size: 13.5px; color: var(--texto-2); }
.p-ajuda .num { font-family: var(--mono); font-weight: 600; color: var(--navy); }
.p-ajuda .canal { font-family: var(--mono); font-size: 12px; color: var(--texto-3); }

/* ---------- botões ---------- */

.p-botao {
  display: inline-block; text-align: center;
  background: var(--laranja); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border: 0; cursor: pointer;
  transition: background-color 80ms linear;
}
.p-botao:hover { background: var(--laranja-esc); }
.p-botao.largo { width: 100%; padding: 14px; font-size: 14.5px; }
.p-botao-2 {
  display: inline-block; background: var(--superficie);
  border: 1px solid var(--navy); color: var(--navy);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 14px; cursor: pointer;
}
.p-botao-2:hover { background: var(--chip-bg); }

/* ---------- quadros de estado ---------- */

.p-quadro {
  border: 1px solid var(--borda); padding: var(--e-6) var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start;
}
.p-quadro.excecao { border-left: 3px solid var(--laranja); padding: var(--e-5) 18px; }
.p-quadro.suave { background: var(--superficie-2); padding: var(--e-5) 18px; gap: 10px; }
.p-quadro-rot {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3);
}
.p-quadro.excecao .p-quadro-rot { color: var(--laranja); }
.p-quadro h2 { margin: 0; font-size: 15px; font-weight: 600; }
.p-quadro p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--texto-2); }

/* ---------- login ---------- */

.p-login-fundo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--e-5);
}
.p-cartao { width: 390px; background: var(--superficie); border: 1px solid var(--borda); }
.p-cartao-marca {
  background: var(--navy); padding: 26px var(--e-6) var(--e-6);
  display: flex; flex-direction: column; gap: 10px;
}
/* A logo é branca: só sobre navy. `width:auto` + `align-self` senão estica. */
.p-cartao-marca img { height: 38px; width: auto; align-self: flex-start; display: block; }
.p-cartao-marca span {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy-fraco);
}
.p-cartao-corpo { padding: 26px var(--e-6) var(--e-7); display: flex; flex-direction: column; gap: var(--e-5); }
.p-campo { display: flex; flex-direction: column; gap: 6px; }
.p-campo label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.p-campo input {
  height: 46px; padding: 0 12px; border: 1px solid var(--borda);
  font-family: var(--sans); font-size: 14px; color: var(--navy); background: var(--superficie);
}
.p-campo input.mono { font-family: var(--mono); }
.p-campo input:focus {
  border-color: var(--navy);
  outline: 2px solid var(--laranja); outline-offset: -1px;
}
.p-esqueci { text-align: center; font-size: 13px; color: var(--texto-2); padding: 6px; }
.p-cartao-rodape {
  border-top: 1px solid var(--hairline); padding-top: 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--texto-3);
}
.p-erro {
  border-left: 3px solid var(--laranja); background: var(--laranja-bg);
  padding: 10px 14px; font-size: 13px;
}

/* ---------- cartões (celular) ---------- */

.p-cartoes { display: none; flex-direction: column; gap: 14px; }
.p-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 15px; border: 1px solid var(--borda); background: var(--superficie);
}
.p-card.andamento { border-left: 3px solid var(--laranja); }
.p-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.p-card-num { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.p-card-valor { font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-card-linha { font-size: 12.5px; color: var(--texto-3); line-height: 1.5; }
.p-card .p-etq { align-self: flex-start; }

/* indicador HTMX: faixa laranja, não spinner */
.p-alvo { position: relative; }
.p-alvo.htmx-request::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--laranja);
}

/* ---------- celular ---------- */

@media (max-width: 720px) {
  .p-barra { height: 52px; padding: 0 var(--e-4); }
  .p-barra img { height: 22px; }
  .p-barra-titulo, .p-divisor { display: none; }
  .p-barra-cliente { font-size: 12px; max-width: 190px; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }

  .p-pagina { padding: var(--e-4); gap: 14px; }
  .p-topo { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .p-topo h1 { font-size: 19px; }
  .p-busca { width: 100%; height: 44px; }
  .p-busca input { font-size: 14px; }

  /* filtros viram chips roláveis; nada rola na horizontal exceto eles */
  .p-filtros { border-bottom: 0; padding-bottom: 0; }
  .p-seg {
    border: 0; gap: var(--e-2); overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .p-seg > * {
    border: 1px solid var(--borda); height: 44px; display: flex;
    align-items: center; padding: 0 14px; flex: none;
  }
  .p-ano { display: none; }

  /* a tabela deixa de ser tabela */
  .p-tabela, .p-paginacao { display: none; }
  .p-carregar { display: block; width: 100%; text-align: center; padding: 13px; }
  .p-cartoes { display: flex; }

  .p-corpo { grid-template-columns: 1fr; }
  .p-esq { border-right: 0; padding: var(--e-4); gap: 22px; }
  .p-rail { background: none; padding: 0 var(--e-4) var(--e-6); gap: 22px; }

  .p-voltar { display: none; }
  .p-cab-pedido {
    flex-direction: column; align-items: stretch; gap: var(--e-3);
    padding: var(--e-4) var(--e-4) var(--e-4);
  }
  .p-cab-pedido .linha1 { justify-content: space-between; }
  .p-numero-grande { font-size: 26px; }
  .p-total-valor { font-size: 19px; }
  .p-total-rot { font-size: 9.5px; }
  .p-cab-dir { text-align: right; }

  .p-trilha { grid-template-columns: 1fr; gap: var(--e-2); }
  .p-regua-legenda { display: none; }
  .p-trilha-topo { display: flex; align-items: baseline; justify-content: space-between; }
  .p-trilha-estado { display: inline; font-size: 12px; color: var(--texto-2); }

  .p-itens thead { display: none; }
  .p-itens, .p-itens tbody, .p-itens tr, .p-itens td { display: block; width: auto; }
  .p-itens tbody tr {
    border: 1px solid var(--borda); background: var(--superficie);
    padding: var(--e-3); margin-bottom: 10px;
  }
  .p-itens tbody td { border: 0; padding: 0; }
  .p-itens td.qtd { display: none; }
  .so-celular { display: inline; }
  .p-itens td.unit, .p-itens td.tot {
    display: inline-block; text-align: left; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--hairline); width: 49%;
  }
  .p-itens td.tot { text-align: right; }
  .p-itens tr.total td { display: block; width: auto; text-align: right; border: 0; }

  .p-hist-linha { grid-template-columns: 78px 1fr; gap: var(--e-3); }
  .p-hist-data { font-size: 12px; }
  .p-hist-texto { font-size: 13px; }
}

/* Mesma barra de espera das telas internas — o portal faz três consultas e
   cada uma custa uma viagem de rede inteira. */
#progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(0, 0, 0, .08); z-index: 100; overflow: hidden;
}
#progresso span {
  display: block; height: 100%; width: 40%;
  background: #F47B20;
  animation: progresso-desliza 1.1s ease-in-out infinite;
}
@keyframes progresso-desliza {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  #progresso span { width: 100%; animation: none; }
}

/* O botão diz que foi ele: a barra do topo é de 3px e o cartão de login fica
   no meio da tela, longe dela. */
.p-botao[disabled] {
  background: var(--laranja); opacity: .55;
  cursor: default; pointer-events: none;
}

/* "Em registro" no lugar do numero. Nao e mono nem tabular: nao e um numero, e
   imita-lo como se fosse faria o cliente tentar cita-lo. */
.p-sem-numero {
  font-family: inherit; font-variant-numeric: normal;
  letter-spacing: 0; font-style: italic; font-weight: 500;
}

/* Trocar senha — mesma moldura da tela de entrar (2026-09-23). */
.p-troca-intro { margin: 0 0 16px; font-size: 14px; color: var(--texto-2); line-height: 1.5; }
.p-dica { font-size: 12px; color: var(--texto-3); }
.p-troca-sair { margin: 14px 0 0; text-align: center; }
.p-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--texto-2); text-decoration: underline;
}