/* Sistema visual.
   Denso como uma planilha, acabado como um app. Tudo em variavel: para mudar
   a cara do sistema inteiro, mexa so no bloco :root. */

/* ESCONDIDO E ESCONDIDO. Precisa vir com `!important` e precisa vir primeiro.

   O navegador esconde `[hidden]` com uma regra propria, mas regra de agente
   perde para QUALQUER regra nossa que defina `display` no mesmo elemento.
   Entao `.barra-lote { display: flex }` fazia a barra continuar na tela com
   `hidden` ligado - e junto com ela os botoes da selecao anterior, incluindo
   a lixeira em lote, que abria "vai apagar 2 pedidos" depois de a pessoa ter
   limpado a selecao.

   Sem esta linha, todo `display` novo num elemento que usa `hidden` reabre o
   mesmo buraco, e ele nao aparece em teste que olha o atributo: o atributo
   estava certo o tempo todo. So aparece medindo a altura na tela. */
[hidden] { display: none !important; }

:root {
  /* superficies, do fundo para a frente */
  --fundo:      #0b0d12;
  --superficie: #12151d;
  --elevado:    #171b25;
  --realce:     #1e2330;

  --borda:       #232936;
  --borda-forte: #333b4d;

  --texto:   #e8ebf2;
  --texto-2: #98a2b8;
  --texto-3: #7d8699;   /* 5.1:1 no fundo escuro */

  --acento:      #5b7cfa;
  --acento-forte:#7290ff;
  --acento-suave: rgba(91, 124, 250, 0.15);
  --acento-linha: rgba(91, 124, 250, 0.4);

  /* semanticas: dessaturadas o suficiente para 900 linhas nao cansarem a vista */
  --cinza:   #8b95ab;
  --azul:    #4d92f0;
  --verde:   #35c07a;
  --laranja: #eda042;
  --vermelho:#ef5d6b;
  --roxo:    #a473ee;
  --amarelo: #e0b418;
  --bordo:   #d9455f;

  --cinza-fundo:   rgba(139, 149, 171, 0.14);
  --azul-fundo:    rgba(77, 146, 240, 0.15);
  --verde-fundo:   rgba(53, 192, 122, 0.15);
  --laranja-fundo: rgba(237, 160, 66, 0.16);
  --vermelho-fundo:rgba(239, 93, 107, 0.15);
  --roxo-fundo:    rgba(164, 115, 238, 0.15);
  --amarelo-fundo: rgba(224, 180, 24, 0.18);
  --bordo-fundo:   rgba(217, 69, 95, 0.15);

  --linha-altura: 34px;
  --raio:  10px;
  --raio-p: 7px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .35);
  --sombra-3: 0 16px 48px rgba(0, 0, 0, .5);

  --texto-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                 "Segoe UI", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei UI", "Microsoft YaHei", Roboto, Ubuntu,
                 "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
          "Roboto Mono", Consolas, "Liberation Mono", monospace;
}

:root[data-tema="claro"] {
  --fundo:      #f7f8fa;
  --superficie: #ffffff;
  --elevado:    #ffffff;
  --realce:     #f0f2f6;

  --borda:       #e3e7ee;
  --borda-forte: #cbd2de;

  --texto:   #131722;
  --texto-2: #596174;
  --texto-3: #6b7387;   /* 4.7:1 no fundo claro */

  --acento:      #3d63e8;
  --acento-forte:#2f52d4;
  --acento-suave: rgba(61, 99, 232, 0.1);
  --acento-linha: rgba(61, 99, 232, 0.35);

  --cinza:   #6b7488;
  --azul:    #2b74d4;
  --verde:   #17915a;
  --laranja: #b57415;
  --vermelho:#d13544;
  --roxo:    #7c43d3;
  --amarelo: #97700a;
  --bordo:   #a32133;

  --cinza-fundo:   rgba(107, 116, 136, 0.1);
  --azul-fundo:    rgba(43, 116, 212, 0.1);
  --verde-fundo:   rgba(23, 145, 90, 0.1);
  --laranja-fundo: rgba(181, 116, 21, 0.12);
  --vermelho-fundo:rgba(209, 53, 68, 0.1);
  --roxo-fundo:    rgba(124, 67, 211, 0.1);
  --amarelo-fundo: rgba(151, 112, 10, 0.14);
  --bordo-fundo:   rgba(163, 33, 51, 0.1);

  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-2: 0 4px 14px rgba(16, 24, 40, .08);
  --sombra-3: 0 18px 44px rgba(16, 24, 40, .16);
}

* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--fundo); color: var(--texto);
  font: 400 13.5px/1.5 var(--texto-fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
.icone { flex: none; display: block; }

/* ================================================================ chassi */
#app { display: flex; height: 100vh; }

.lateral {
  width: 218px; flex: none; display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--borda);
  transition: width .16s ease;
}
.lateral.fechada { width: 62px; }
.lateral.fechada .rotulo-nav,
.lateral.fechada .marca span,
.lateral.fechada .usuario-info { display: none; }
.lateral.fechada .item-nav { justify-content: center; padding-inline: 0; }
.lateral.fechada .selo-nav {
  position: absolute; top: 5px; right: 8px; min-width: 7px; height: 7px;
  padding: 0; font-size: 0; border-radius: 50%;
}

.marca {
  display: flex; align-items: center; gap: 10px; height: 58px;
  padding: 0 16px; flex: none; font-weight: 640; font-size: 14.5px;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--borda);
}
.marca .sinal {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--verde); box-shadow: 0 0 0 3px var(--verde-fundo);
  transition: .2s;
}
.marca .sinal.offline {
  background: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-fundo);
}

nav.navegacao { flex: 1; padding: 10px 10px; overflow-y: auto; overflow-x: hidden; }
.item-nav {
  position: relative; width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; margin-bottom: 2px; border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--texto-2); cursor: pointer;
  font-weight: 500; font-size: 13.5px; text-align: left; white-space: nowrap;
  transition: background .12s, color .12s;
}
.item-nav:hover { background: var(--realce); color: var(--texto); }
.item-nav.ativo { background: var(--acento-suave); color: var(--acento-forte); }
.item-nav.ativo .icone { color: var(--acento); }
.selo-nav {
  margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px;
  border-radius: 10px; background: var(--vermelho); color: #fff;
  font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.selo-nav.calmo { background: var(--realce); color: var(--texto-2); }

.rodape-lateral {
  flex: none; padding: 10px; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 6px;
}
.usuario-linha {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: var(--raio-p); overflow: hidden;
}
.avatar {
  width: 27px; height: 27px; flex: none; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-forte);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.usuario-info { min-width: 0; }
.usuario-info b { display: block; font-size: 12.5px; font-weight: 600;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-info span { font-size: 11px; color: var(--texto-3); }

/* =============================================================== conteudo */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecalho {
  flex: none; height: 58px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  /* Em janela estreita o cabecalho rola em vez de estourar para fora. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.cabecalho::-webkit-scrollbar { display: none; }
.cabecalho > * { flex: none; }
.cabecalho h1 {
  margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 0 1 auto;
}
.cabecalho .subtitulo {
  font-size: 12.5px; color: var(--texto-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.espaco { flex: 1 1 auto; min-width: 8px; }

@media (max-width: 1180px) {
  .cabecalho .subtitulo { display: none; }
}

.tela { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tela.ativa { display: flex; }
.rolagem { flex: 1; min-height: 0; overflow: auto; padding: 22px 20px 40px; }

/* ================================================================ botoes */
.btn {
  height: 34px; padding: 0 13px; border-radius: var(--raio-p); cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--elevado);
  color: var(--texto); font-weight: 500; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--realce); border-color: var(--texto-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
  box-shadow: var(--sombra-1);
}
.btn.primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.btn.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* "Marcar como entregue", na barra de acoes em lote.
   Vermelho porque e a cor que ele PRODUZ - a mesma do check da linha e da
   etiqueta Entregue. Nao e o vermelho de perigo: e o codigo de cor do
   status, o mesmo que a equipe le na lista o dia inteiro.
   Ele fica ao lado do "Apagar", que e vermelho VAZADO. Cheio contra vazado
   e a diferenca que separa os dois de relance - por isso o Apagar continua
   sem preenchimento; se os dois fossem cheios, seriam dois botoes vermelhos
   iguais lado a lado, e um deles nao tem volta. */
.btn.entregue {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
  box-shadow: var(--sombra-1);
}
.btn.entregue:hover:not(:disabled) {
  filter: brightness(1.08); background: var(--vermelho);
  border-color: var(--vermelho);
}
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover:not(:disabled) { background: var(--realce); color: var(--texto); }
.btn.p { height: 29px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn.quadrado { width: 34px; padding: 0; }
.btn.quadrado.p { width: 29px; }

.campo {
  height: 34px; padding: 0 11px; border-radius: var(--raio-p);
  background: var(--elevado); border: 1px solid var(--borda);
  color: var(--texto); outline: none; transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
textarea.campo { height: auto; padding: 9px 11px; line-height: 1.5; }
select.campo { cursor: pointer; }
.campo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo::placeholder { color: var(--texto-3); }

.campo-busca { position: relative; display: flex; align-items: center; }
.campo-busca .icone { position: absolute; left: 10px; color: var(--texto-3); pointer-events: none; }
.campo-busca .campo { padding-left: 32px; }

.barra {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 20px; border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.separador { width: 1px; height: 20px; background: var(--borda); margin: 0 2px; }

.segmentos {
  display: inline-flex; background: var(--realce); border-radius: var(--raio-p);
  padding: 3px; gap: 2px;
}
.segmentos button {
  height: 26px; padding: 0 11px; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--texto-2); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; transition: .12s;
}
.segmentos button:hover { color: var(--texto); }
.segmentos button.ativo {
  background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-1); font-weight: 600;
}

/* ================================================================= grade */
.grade-caixa {
  flex: 1; min-height: 0; overflow: auto; position: relative;
  background: var(--fundo); outline: none;
  /* Sem isto, arrastar na grade seleciona o TEXTO (aquele azul forte do
     navegador) em vez das celulas. No Excel, arrastar marca celula. */
  user-select: none; -webkit-user-select: none;
}
/* Dentro do editor a selecao de texto volta ao normal. */
.grade-caixa .editor, .grade-caixa input, .grade-caixa textarea {
  user-select: text; -webkit-user-select: text;
}
table.grade {
  border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums; width: max-content; min-width: 100%;
}

table.grade th {
  position: sticky; top: 0; z-index: 3; height: 36px; padding: 0 10px;
  background: var(--superficie); color: var(--texto-3);
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--borda-forte);
  user-select: none; cursor: pointer; transition: color .12s;
}
table.grade th:hover { color: var(--texto-2); }
table.grade th.ordenada { color: var(--acento); }
table.grade th .seta { margin-left: 5px; font-size: 9px; vertical-align: 1px; }
table.grade th .puxador {
  position: absolute; right: -2px; top: 6px; width: 5px; height: 24px;
  cursor: col-resize; z-index: 4; border-radius: 3px;
}
table.grade th .puxador:hover { background: var(--acento); }
table.grade tr.filtros th {
  top: 36px; height: 34px; padding: 0 5px;
  border-bottom: 1px solid var(--borda); background: var(--superficie);
  cursor: default;
}
table.grade tr.filtros input {
  width: 100%; height: 24px; padding: 0 8px; border-radius: 5px;
  background: var(--fundo); border: 1px solid var(--borda);
  color: var(--texto); font-size: 12px; font-weight: 400;
  text-transform: none; letter-spacing: 0; outline: none;
}
table.grade tr.filtros input:focus { border-color: var(--acento); }
table.grade tr.filtros input::placeholder { color: var(--texto-3); }

table.grade td {
  height: var(--linha-altura); padding: 0 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  /* Grade fechada, como no Excel: risco embaixo E entre as colunas. */
  border-bottom: 1px solid var(--borda);
  border-right: 1px solid var(--borda);
  color: var(--texto-2);
}
table.grade th { border-right: 1px solid var(--borda); }

/* Comeco de um novo dia: risco mais grosso, para ler os blocos de longe. */
/* A faixa que abre cada dia. Era so uma borda de 2px; agora e um bloco com
   a data escrita dentro, para bater o olho e saber de que dia e a parte da
   lista que se esta lendo. */
table.grade tr.faixa-dia > td {
  height: 26px; padding: 0; background: var(--realce);
  border-top: 2px solid var(--borda-forte);
  border-bottom: 1px solid var(--borda);
  position: sticky; left: 0;   /* a data acompanha a rolagem lateral */
}
table.grade tr.faixa-dia .rotulo-dia {
  position: sticky; left: 10px;
  display: inline-block; padding: 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--texto-2); font-variant-numeric: tabular-nums;
}
/* A primeira linha do bloco nao repete a borda: a faixa logo acima ja separa. */
table.grade tr.inicio-grupo > td { border-top: 0; }

/* ------------------------------------------------- caixinhas de marcacao */
.caixinha {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; border-radius: 4px;
  border: 1.5px solid var(--borda-forte); background: var(--elevado);
  cursor: pointer; display: grid; place-content: center; flex: none;
  transition: background .1s, border-color .1s;
}
.caixinha:hover { border-color: var(--acento); }
.caixinha:checked, .caixinha:indeterminate {
  background: var(--acento); border-color: var(--acento);
}
.caixinha:checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.caixinha:indeterminate::after {
  content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px;
}
td.celula-marcar, th:has(> .caixinha) { text-align: center; padding: 0; }
td.celula-marcar { display: table-cell; }
td.celula-marcar .caixinha { margin: 0 auto; }

table.grade tr.marcada > td { background: var(--acento-suave); }
table.grade tr.marcada:hover > td { background: var(--acento-suave); filter: brightness(1.15); }
table.grade tr.marcada > td.fixa { background: var(--acento-suave); }

/* --------------------------------------------------- barra de acoes em lote */
.barra-lote {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; background: var(--acento-suave);
  border-bottom: 1px solid var(--acento-linha);
  /* Sem a quebra, em tela menor os ultimos botoes saiam para fora da tela -
     e o de sair da selecao era justamente o ultimo. */
  flex-wrap: wrap;
}
.barra-lote .conta-lote { font-weight: 640; color: var(--acento-forte); }
/* Sair da selecao fica GRUDADO na contagem, no comeco da barra: e a
   primeira coisa que a pessoa procura quando quer sair. */
.btn-sair-selecao {
  height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento);
  color: #fff; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-sair-selecao:hover { filter: brightness(1.1); }
.barra-lote.faixa-visita {
  background: var(--realce); border-bottom-color: var(--borda);
}
.barra-lote .detalhe { color: var(--texto-2); font-size: 12.5px; }
table.grade td.forte { font-weight: 650; }
table.grade tbody tr:hover > td { background: var(--realce); }
table.grade td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grade td.cod { font-family: var(--mono); font-size: 12px; letter-spacing: -.2px; }
table.grade td.data { font-variant-numeric: tabular-nums; }

.fixa { position: sticky; z-index: 2; background: var(--fundo); }
th.fixa { z-index: 5; background: var(--superficie); }
tr:hover td.fixa { background: var(--realce); }
.fixa.ultima { box-shadow: 1px 0 0 var(--borda-forte); }

td.sel { background: var(--acento-suave) !important; }
td.cursor {
  background: var(--acento-suave) !important;
  box-shadow: inset 0 0 0 2px var(--acento); border-radius: 2px;
}
/* Cursor sobre celula fora da selecao: so o contorno. */
td.cursor.sem-fundo { background: transparent !important; }
td.achada { background: var(--laranja-fundo) !important; }

td .editor {
  width: 100%; height: 100%; border: 0; outline: 0; padding: 0;
  background: transparent; color: var(--texto); font: inherit;
}

/* ---------------------------------------------------------------------
   Cor da linha INTEIRA pelo status, como na planilha do WPS: quando o
   pedido passa da alfandega o texto todo fica verde, quando e conferido
   fica todo vermelho. A faixa na borda esquerda reforca de longe.
   --------------------------------------------------------------------- */
table.grade tr[data-status="POSTADO"] > td { color: var(--texto-2); }
table.grade tr[data-status="INTERNACIONAL"] > td { color: var(--azul); }
table.grade tr[data-status="LIBERADO"] > td { color: var(--verde); }
table.grade tr[data-status="ENTREGUE_CORREIOS"] > td { color: var(--laranja); }
table.grade tr[data-status="CONFIRMADO"] > td { color: var(--vermelho); }
table.grade tr[data-status="INSPECAO"] > td { color: var(--amarelo); }
table.grade tr[data-status="SEM_CODIGO"] > td { color: var(--roxo); }
/* Cancelado: existe no historico mas nao conta para nada. Fica apagado. */
table.grade tr[data-status="CANCELADO"] > td { color: var(--texto-3); opacity: .65; }
table.grade tr[data-status="PROBLEMA"] > td { color: var(--bordo); }

/* Estas precisam ganhar da cor da linha. */
table.grade td.negativo { color: var(--vermelho); font-weight: 700; }
table.grade td.positivo { color: var(--verde); font-weight: 700; }

/* faixa de status na primeira celula */
td.faixa { border-left: 3px solid var(--cinza); }
tr[data-status="INTERNACIONAL"] td.faixa { border-left-color: var(--azul); }
tr[data-status="LIBERADO"]      td.faixa { border-left-color: var(--verde); }
tr[data-status="ENTREGUE_CORREIOS"] td.faixa { border-left-color: var(--laranja); }
tr[data-status="CONFIRMADO"]    td.faixa { border-left-color: var(--vermelho); }
tr[data-status="INSPECAO"]      td.faixa { border-left-color: var(--amarelo); }
tr[data-status="SEM_CODIGO"]    td.faixa { border-left-color: var(--roxo); }
tr[data-status="CANCELADO"]     td.faixa { border-left-color: var(--texto-3); }
tr[data-status="PROBLEMA"]      td.faixa { border-left-color: var(--bordo); }

tr.salvando td.faixa { border-left-color: var(--acento) !important; }
tr.salvando td.faixa::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acento); animation: pulsar 1s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .3; } }
tr.erro > td { background: var(--vermelho-fundo) !important; }

/* ============================================================== etiquetas */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; height: 21px;
  padding: 0 9px 0 7px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; letter-spacing: -.005em;
  background: var(--cinza-fundo); color: var(--cinza);
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                    background: currentColor; flex: none; }
.etiqueta.POSTADO { background: var(--cinza-fundo); color: var(--cinza); }
.etiqueta.INTERNACIONAL { background: var(--azul-fundo); color: var(--azul); }
.etiqueta.LIBERADO { background: var(--verde-fundo); color: var(--verde); }
.etiqueta.ENTREGUE_CORREIOS { background: var(--laranja-fundo); color: var(--laranja); }
.etiqueta.CONFIRMADO { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta.INSPECAO { background: var(--amarelo-fundo); color: var(--amarelo); }
.etiqueta.SEM_CODIGO { background: var(--roxo-fundo); color: var(--roxo); }
.etiqueta.CANCELADO { background: var(--cinza-fundo); color: var(--texto-3); }
.etiqueta.PROBLEMA { background: var(--bordo-fundo); color: var(--bordo); }
.etiqueta.critico { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta.atencao { background: var(--laranja-fundo); color: var(--laranja); }
.etiqueta.aviso { background: var(--cinza-fundo); color: var(--texto-3); }
.etiqueta.simples::before { display: none; padding-left: 9px; }
/* Raio dentro da etiqueta: mudou pelo rastreio, sem ninguem mexer. */
.etiqueta .icone { margin-left: 1px; opacity: .85; }

.acoes-linha { display: flex; gap: 4px; align-items: center; }
/* ------------------------------------------------ acoes da linha */
/* Cada acao com a cor do que ela produz - e a cor que faz achar o botao
   certo sem ler o tooltip. O que estava feio antes nao era a cor: era a
   BORDA colorida em volta de cada um, que virava tres caixinhas vazias
   competindo. Agora a cor vive no fundo suave e no icone, sem contorno, e
   os botoes leem como um grupo. */
.acoes-linha { display: inline-flex; align-items: center; gap: 3px; }

.btn-linha {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 0; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  transition: background .12s, transform .08s, box-shadow .12s;
  background: var(--realce); color: var(--texto-3);
}
.btn-linha:hover { transform: translateY(-1px); }
.btn-linha:active { transform: none; }
.btn-linha:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Confirmar entrega: vermelho, a cor do status que ele produz. */
.btn-linha.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.btn-linha.vermelho:hover { box-shadow: 0 0 0 1px var(--vermelho) inset; }

/* Liberado na alfandega. */
.btn-linha.verde { background: var(--verde-fundo); color: var(--verde); }
.btn-linha.verde:hover { box-shadow: 0 0 0 1px var(--verde) inset; }

/* Inspecao: travou, precisa de alguem. */
.btn-linha.amarelo { background: var(--amarelo-fundo); color: var(--amarelo); }
.btn-linha.amarelo:hover { box-shadow: 0 0 0 1px var(--amarelo) inset; }

/* Ver rastreio: consulta, nao muda nada - azul de informacao. */
.btn-linha.azul { background: var(--azul-fundo); color: var(--azul); }
.btn-linha.azul:hover { box-shadow: 0 0 0 1px var(--azul) inset; }

/* Editar: neutro. Mexe em tudo, nao significa nenhum status. */
.btn-linha.neutro { background: var(--realce); color: var(--texto-2); }
.btn-linha.neutro:hover { box-shadow: 0 0 0 1px var(--borda-forte) inset; }

/* Apagar: cinza em repouso, vermelho so quando o cursor chega. Em cor
   permanente ela puxava o olho o tempo todo para a unica acao da linha que
   nao tem volta - e ainda competia com o vermelho do check de conferir
   entrega, que fica a tres botoes dali. Cinza aqui nao e falta de cor: e a
   escolha de nao chamar atencao para o que ninguem deveria clicar sem
   querer. */
.btn-linha.apagar { background: var(--realce); color: var(--texto-3); }
.btn-linha.apagar:hover {
  background: var(--bordo-fundo); color: var(--bordo);
  box-shadow: 0 0 0 1px var(--bordo) inset;
}

/* A unica que grita: a transportadora entregou e esta linha espera alguem
   conferir. Destacar so ela e o que faz o destaque valer. */
.btn-linha.vermelho.cheio {
  background: var(--vermelho); color: #fff;
}
.btn-linha.vermelho.cheio:hover { filter: brightness(1.08); }
.btn-linha.destaque { background: var(--laranja); color: #17120a; }

/* ============================================================== cartoes */
.cartoes {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 15px 16px; position: relative;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.cartao .topo-cartao {
  display: flex; align-items: center; gap: 8px; color: var(--texto-3);
  margin-bottom: 10px;
}
.cartao .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .055em;
  font-weight: 600; line-height: 1.35;
  /* Quebra em duas linhas em vez de cortar: "Entregue nos ultimos 30 dias"
     virava "Entregue nos ulti..." e perdia justamente o que especifica. */
}
.cartao .topo-cartao { align-items: flex-start; }
.cartao .valor {
  font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.cartao .nota { font-size: 12px; color: var(--texto-3); margin-top: 5px; }

/* Detalhe por modelo dentro do cartao de estoque. */
.detalhe-modelos {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--borda);
}
.modelo-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px; border-radius: 20px; background: var(--realce);
  font-size: 12px; cursor: pointer; transition: .12s;
}
.modelo-chip:hover { background: var(--acento-suave); }
.modelo-chip b { font-weight: 600; color: var(--texto-2); }
.modelo-chip i {
  font-style: normal; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.modelo-chip.negativo i { color: var(--vermelho); }
.cartao.clicavel { cursor: pointer; }
.cartao.clicavel:hover {
  border-color: var(--borda-forte); transform: translateY(-1px);
  box-shadow: var(--sombra-2);
}
.cartao.destaque-verde   { --tom: var(--verde); }
.cartao.destaque-laranja { --tom: var(--laranja); }
.cartao.destaque-azul    { --tom: var(--azul); }
.cartao.destaque-vermelho{ --tom: var(--vermelho); }
.cartao.destaque-roxo    { --tom: var(--roxo); }
.cartao.destaque-cinza   { --tom: var(--cinza); }
.cartao[class*="destaque-"] .topo-cartao { color: var(--tom); }
.cartao[class*="destaque-"] .valor { color: var(--texto); }

/* Faixa de aviso no topo do Painel. */

.secao { margin-top: 26px; }
.secao:first-child { margin-top: 0; }
.secao > h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); margin: 0 0 11px; font-weight: 650;
  display: flex; align-items: center; gap: 8px;
}
.secao > h2 .conta {
  color: var(--texto-2); background: var(--realce); border-radius: 20px;
  padding: 1px 8px; font-size: 11px; letter-spacing: 0; text-transform: none;
}

/* ================================================================ tabelas */
.quadro {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden;
}
table.dados { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.dados th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .055em; color: var(--texto-3); font-weight: 650;
  padding: 10px 14px; border-bottom: 1px solid var(--borda);
  background: var(--elevado); white-space: nowrap;
}
table.dados td {
  padding: 10px 14px; border-bottom: 1px solid var(--borda);
  color: var(--texto-2);
}
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr:hover td { background: var(--realce); }
table.dados td.forte { color: var(--texto); font-weight: 600; }
table.dados td.num, table.dados th.num { text-align: right; }
table.dados td.cod { font-family: var(--mono); font-size: 12px; }
table.dados .zero { color: var(--texto-3); }
.positivo { color: var(--verde); font-weight: 600; }
.negativo { color: var(--vermelho); font-weight: 600; }

.barra-mini {
  height: 5px; border-radius: 3px; background: var(--realce);
  overflow: hidden; min-width: 54px;
}
.barra-mini > i { display: block; height: 100%; background: var(--tom, var(--acento)); }

/* Cartao de pedido, usado no modal de confirmar entrega. */
.achado {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px; background: var(--elevado); border-left: 3px solid var(--tom, var(--acento));
}
.achado .titulo { font-size: 19px; font-weight: 650; letter-spacing: -.02em;
                  display: flex; align-items: center; gap: 10px; }
.achado dl { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr;
             gap: 6px 14px; font-size: 12.5px; align-items: center; }
.achado dt { color: var(--texto-3); }
.achado dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--texto); }
.contagem { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.contagem .campo { width: 78px; text-align: center; font-family: var(--mono);
                   font-size: 16px; font-weight: 600; }

/* ================================================================= modal */
.veu {
  position: fixed; inset: 0; background: rgba(4, 6, 10, .6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(4px); animation: aparecer .14s ease-out;
}
@keyframes aparecer { from { opacity: 0; } }
.modal {
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 14px; box-shadow: var(--sombra-3);
  width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  animation: subir .16s cubic-bezier(.2, .8, .3, 1);
}
@keyframes subir { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal > header {
  padding: 16px 20px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal > header h2 { margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.modal .corpo { padding: 20px; overflow-y: auto; }
.modal > footer {
  padding: 14px 20px; border-top: 1px solid var(--borda);
  display: flex; gap: 8px; justify-content: flex-end; background: var(--elevado);
  border-radius: 0 0 14px 14px;
}
.modal label { display: block; margin-bottom: 14px; }
.modal label > span {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3); margin-bottom: 6px; font-weight: 650;
}
.modal .grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modal .ajuda { color: var(--texto-3); font-size: 12.5px; margin: 0 0 14px; line-height: 1.6; }
.modal textarea { min-height: 150px; font-family: var(--mono); font-size: 12px; resize: vertical; }

/* ================================================================ avisos */
#avisos { position: fixed; right: 20px; bottom: 20px; z-index: 200;
          display: grid; gap: 9px; justify-items: end; }
.aviso {
  background: var(--elevado); border: 1px solid var(--borda-forte);
  border-left: 3px solid var(--acento); border-radius: var(--raio);
  padding: 12px 16px; box-shadow: var(--sombra-3); max-width: 390px;
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  animation: entrar .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateX(16px); } }
.aviso.ok { border-left-color: var(--verde); }
.aviso.ok .icone { color: var(--verde); }
.aviso.ruim { border-left-color: var(--vermelho); }
.aviso.ruim .icone { color: var(--vermelho); }

/* ============================================================== diversos */
.linha-do-tempo { display: grid; }
.evento {
  display: grid; grid-template-columns: 136px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--borda);
}
.evento:last-child { border-bottom: 0; }
.evento time { color: var(--texto-3); font-family: var(--mono); font-size: 11.5px; }
.evento .fonte { color: var(--texto-3); font-size: 11px; margin-top: 3px; }

.vazio {
  padding: 64px 24px; text-align: center; color: var(--texto-3);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.vazio .icone { color: var(--borda-forte); }
.vazio b { color: var(--texto-2); font-weight: 600; font-size: 14px; }
.vazio p { margin: 0; font-size: 13px; max-width: 340px; }

/* ------------------------------------------------------ saidas / vendas */
/* Grafico de barras em SVG inline: nada de biblioteca externa, porque o app
   precisa abrir na China sem depender de CDN. O SVG estica na largura
   (preserveAspectRatio=none) e a altura fica fixa, entao a barra nao deforma
   de um jeito estranho quando a serie e curta. */
.caixa-grafico { padding: 14px 16px 10px; }
.grafico-saidas {
  display: block; width: 100%; height: 132px;
  fill: var(--vermelho); opacity: .85;
}
.grafico-saidas rect { transition: opacity .12s; }
.grafico-saidas rect:hover { opacity: .6; }
.extremos-grafico {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 6px; color: var(--texto-3); font-size: 11.5px;
}
.extremos-grafico span:nth-child(2) { color: var(--texto-2); font-weight: 600; }

.linha-variacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: -4px 0 8px;
}
.detalhe-periodo:not(:empty) { margin-top: 10px; }
.detalhe-periodo .ajuda { padding: 10px 2px; }

.campo.compacto { width: auto; min-width: 150px; padding: 7px 10px; }
table.dados.compacta td, table.dados.compacta th {
  padding: 6px 10px; font-size: 12.5px;
}
/* Lancamento desfeito: continua visivel no extrato, mas riscado e apagado,
   para nao ser confundido com movimento que ainda vale. */
tr.desfeito td { opacity: .5; text-decoration: line-through; }
tr.desfeito td.acoes { opacity: 1; text-decoration: none; }

/* O realce ao passar o mouse ja vem de table.dados; aqui so o cursor. */
tr.clicavel { cursor: pointer; }

.barra-status {
  flex: none; display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; row-gap: 2px;
  padding: 4px 20px; min-height: 32px; border-top: 1px solid var(--borda);
  background: var(--superficie); font-size: 12px; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.barra-status .rot { color: var(--texto-3); }
.barra-status strong { font-weight: 600; color: var(--texto); }
.barra-status .destaque strong { color: var(--acento); }
.barra-status .atalhos { color: var(--texto-3); font-family: var(--mono); font-size: 11px; }

/* --------------------------------------------------------------------------
   Janela de localizar, no estilo do WPS: os resultados ficam DENTRO dela e a
   tabela nao muda de forma.

   `position: fixed` e nao `absolute`: a janela precisa continuar no lugar
   enquanto a pessoa rola a tabela atras dela, senao ela sobe junto com o
   conteudo e some da tela justamente quando ha muito o que procurar.

   Sem veu por tras de proposito - ver o comentario em `abrirLocalizar`.
   -------------------------------------------------------------------------- */
.painel-localizar {
  position: fixed; top: 96px; right: 28px; z-index: 60; width: 372px;
  display: flex; flex-direction: column;
  border-radius: 12px; background: var(--elevado);
  border: 1px solid var(--borda-forte); box-shadow: var(--sombra-3);
}
.painel-localizar > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--borda);
  cursor: move; user-select: none;
}
.painel-localizar > header b { font-size: 13px; }
.painel-localizar > .corpo { padding: 12px 14px 10px; }
.painel-localizar .campo-busca { width: 100%; }
.painel-localizar .campo-busca .campo { width: 100%; }

.painel-localizar .linha-acoes {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
}
.painel-localizar .contador {
  color: var(--texto-3); min-width: 52px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 12px;
}

/* A lista rola por dentro: a janela nao pode crescer ate sair da tela
   quando a busca casa muita coisa. */
.lista-localizar {
  margin-top: 10px; max-height: 264px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 8px;
}
.lista-localizar table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lista-localizar thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 7px 10px; background: var(--realce); color: var(--texto-3);
  font-weight: 600; font-size: 11px; letter-spacing: .02em;
  border-bottom: 1px solid var(--borda);
}
.lista-localizar tbody tr { cursor: pointer; }
.lista-localizar tbody tr:hover { background: var(--realce); }
.lista-localizar tbody tr.atual { background: var(--amarelo-fundo); }
.lista-localizar td {
  padding: 6px 10px; border-bottom: 1px solid var(--borda);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lista-localizar td.cod { font-family: var(--mono); color: var(--texto-3); width: 68px; }
.lista-localizar td.valor { max-width: 168px; }
.lista-localizar tbody tr:last-child td { border-bottom: none; }

.rodape-localizar {
  padding: 9px 2px 2px; color: var(--texto-3); font-size: 11.5px;
}

/* A gaveta de opcoes comeca fechada, como o "更多选项" do WPS. */
.painel-localizar .btn.fantasma.aberto .icone { transform: rotate(180deg); }
.painel-localizar > .corpo > .btn.fantasma {
  margin-top: 8px; gap: 4px; padding: 0 6px; height: 24px;
  font-size: 11.5px; color: var(--texto-3);
}
.opcoes-localizar {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 10px 12px;
  background: var(--realce); border-radius: 8px;
}
/* A gaveta fecha pela regra geral de `[hidden]` la no topo do arquivo. */
.opcoes-localizar label {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  cursor: pointer;
}
.opcoes-localizar label.onde { cursor: default; }
.opcoes-localizar label.onde span { flex: none; color: var(--texto-3); }
.opcoes-localizar select.campo { flex: 1; height: 26px; font-size: 12px; }
.opcoes-localizar input[type=checkbox] { flex: none; }

.entrada-login { height: 100vh; width: 100%; display: flex; align-items: center;
                 justify-content: center; background: var(--fundo); }
.entrada-login form {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: 32px; width: 356px; box-shadow: var(--sombra-3);
}
.entrada-login .emblema {
  width: 42px; height: 42px; border-radius: 11px; background: var(--acento-suave);
  color: var(--acento); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.entrada-login h1 { margin: 0 0 5px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.entrada-login p.sub { margin: 0 0 24px; color: var(--texto-3); font-size: 13px; }
.entrada-login .campo { margin-bottom: 10px; }
.entrada-login .btn { width: 100%; margin-top: 6px; }
.entrada-login .erro { color: var(--vermelho); font-size: 12.5px; margin: 0 0 10px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borda-forte); border-radius: 7px;
  border: 3.5px solid var(--fundo); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--texto-3); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Janela de computador estreita: a lateral vira uma tira de icones para
   devolver largura ao conteudo.

   O `:not([data-movel="1"])` e obrigatorio. No celular a lateral e uma
   GAVETA que abre por cima da tela, com largura de sobra - e esta regra,
   escrita antes de a gaveta existir, escondia os nomes das telas dentro
   dela. O resultado era uma gaveta de 280px com nove icones sem legenda e
   um espaco vazio do lado. */
@media (max-width: 900px) {
  :root:not([data-movel="1"]) .lateral { width: 62px; }
  :root:not([data-movel="1"]) .lateral .rotulo-nav,
  :root:not([data-movel="1"]) .lateral .marca span,
  :root:not([data-movel="1"]) .lateral .usuario-info { display: none; }
  .conferencia { grid-template-columns: 1fr; }
  .bipagem { border-right: 0; border-bottom: 1px solid var(--borda); }
}

/* --------------------------------------------------- lapis do saldo */
/* Onze linhas com um botao sempre visivel viram ruido competindo com o
   numero, que e o dado. Ele aparece quando o cursor entra na linha, e
   sempre que ganha foco - senao quem navega por teclado nunca o alcanca. */
.cel-saldo { white-space: nowrap; }
.cel-saldo .editar-saldo {
  margin-left: 6px; vertical-align: middle;
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .cel-saldo .editar-saldo,
.cel-saldo .editar-saldo:focus-visible { opacity: 1; }
@media (hover: none) { .cel-saldo .editar-saldo { opacity: 1; } }

/* ------------------------------------------- avisos ao cadastrar pedido */
/* Amarelo pede atencao e deixa seguir; vermelho barra. A diferenca precisa
   ser visivel antes de ler, porque uma delas nao tem escolha do outro lado. */
/* O painel e filho do grid do formulario; e ELE que precisa atravessar as
   duas colunas. Pondo o span na caixa de dentro, o aviso saia espremido em
   meia largura, com o texto quebrando em quatro linhas. */
.painel-avisos {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
}
.avisos-cadastro {
  border: 1px solid var(--amarelo);
  background: var(--amarelo-fundo);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.avisos-cadastro.bloqueio {
  border-color: var(--vermelho); background: var(--vermelho-fundo);
}
.avisos-cadastro p {
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--amarelo); display: flex; gap: 8px; align-items: flex-start;
}
.avisos-cadastro.bloqueio p { color: var(--vermelho); }
.avisos-cadastro .icone { flex: none; margin-top: 2px; }

/* ------------------------------------------------- aviso de versao nova */
.faixa-atualizacao {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 10px;
  background: var(--elevado); border: 1px solid var(--borda-forte);
  box-shadow: 0 8px 30px -8px rgba(0,0,0,.35);
  font-size: 13px; color: var(--texto);
}
.faixa-atualizacao .icone { color: var(--acento); }



/* ------------------------------------------------------ apagar pedido */
/* Discreto ate o cursor chegar: a unica acao da linha que nao tem volta nao
   pode competir por atencao com o check de conferir entrega, que fica a
   dois botoes dali. */
/* A regra de .btn-linha.apagar mora junto com as outras acoes da linha, la
   em cima. Aqui existia uma segunda copia dela, escrita quando a lixeira foi
   criada - e por vir depois no arquivo, era ela que valia, sobrescrevendo a
   primeira sem aviso. Duas regras para o mesmo seletor em pontos distantes
   do arquivo e o tipo de coisa que so aparece medindo a cor computada. */
.btn.perigoso { color: var(--vermelho); border-color: var(--borda); }
.btn.perigoso:hover {
  border-color: var(--vermelho); background: var(--vermelho-fundo);
}
.espaco-pequeno { width: 12px; flex: none; }
.lista-apagar {
  margin: 10px 0 0; padding: 10px 12px; list-style: none;
  background: var(--realce); border: 1px solid var(--borda);
  border-radius: 8px; max-height: 200px; overflow: auto;
  font-size: 12.5px; display: flex; flex-direction: column; gap: 5px;
}
.lista-apagar .cod { font-family: var(--mono); color: var(--texto-2); }

/* ------------------------------------- bolinha de cor no filtro */
/* Mesma cor do status na lista: verde liberado, vermelho entregue, amarelo
   inspecao. Assim o filtro e a linha falam a mesma lingua, e o olho ja sabe
   o que vai achar antes de clicar. */
.segmentos .com-bolinha { display: inline-flex; align-items: center; gap: 7px; }
.segmentos .com-bolinha::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.segmentos .bolinha-verde::before    { background: var(--verde); }
.segmentos .bolinha-vermelho::before { background: var(--vermelho); }
.segmentos .bolinha-amarelo::before  { background: var(--amarelo); }

/* --------------------------------- ordem pela metade: preencher o resto */
/* Nao e uma etiqueta de status: e uma tarefa. Por isso tem cara de botao,
   com a cor de atencao - a ordem esta parada esperando alguem. */
.btn-completar {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--amarelo); background: var(--amarelo-fundo);
  border: 1px dashed var(--amarelo);
}
.btn-completar:hover { background: var(--amarelo); color: #fff; border-style: solid; }
.btn-completar .quantos {
  background: rgba(0,0,0,.12); border-radius: 10px;
  padding: 0 5px; font-variant-numeric: tabular-nums;
}
.ja-preenchido {
  grid-column: 1 / -1; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-3);
}
.ja-preenchido .pares {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px;
}
.ja-preenchido i { color: var(--texto-3); font-style: normal; opacity: .75; }

/* ------------------------------- campo que falta no preencher o restante */
/* O triangulo no rotulo e a moldura no campo: os dois juntos deixam achar o
   que falta sem ler, mesmo com treze campos na tela. */
.grade-form label.exige > span { color: var(--amarelo); font-weight: 700; }
/* `.icone` e display:block por padrao, o que jogava o triangulo para a
   linha de baixo e fazia todo rotulo marcado ocupar duas linhas. */
.grade-form label.exige > span { display: inline-flex; align-items: center; gap: 5px; }
.grade-form label.exige > span .icone { display: inline-block; flex: none; }
.campo.falta {
  border-color: var(--amarelo);
  background: var(--amarelo-fundo);
}
.campo.falta:focus { border-color: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo-fundo); }
.aviso-falta {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  color: var(--amarelo); margin: 0 0 4px;
}


/* --------------------------------------------------------------------------
   Marca das tres regras na lista (conta usada ha pouco, CPF repetido, CPF
   da lista negra). Fica na propria celula do dado que motivou a regra.

   `inline-flex` e obrigatorio aqui: `.icone` e `display:block`, e dentro de
   um span comum ele empurraria o texto para a linha de baixo, engordando a
   linha inteira da tabela. Ja aconteceu com o triangulo dos rotulos.
   -------------------------------------------------------------------------- */
.marca-regra {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; padding: 1px 5px 1px 4px; border-radius: 6px;
  line-height: 1.5;
}
.marca-regra .icone { flex: none; }
.marca-regra .texto { overflow: hidden; text-overflow: ellipsis; }

/* Aviso: a pessoa decidiu seguir e tinha o direito de decidir. Chama o olho
   sem gritar. */
.marca-regra.aviso { background: var(--amarelo-fundo); color: var(--amarelo); }

/* Bloqueio: CPF da lista negra nao deveria estar aqui de jeito nenhum. Usa o
   bordo, a mesma cor da unica outra acao sem volta do sistema. */
.marca-regra.bloqueio { background: var(--bordo-fundo); color: var(--bordo); }

/* Enquanto ha texto na busca, os filtros de status nao valem: a busca
   procura em tudo. Apagados na tela em vez de escondidos - sumir faria a
   pessoa procurar um botao que ela sabe que existe. */
.segmentos.apagados { opacity: .4; }
.segmentos.apagados button { pointer-events: none; }


/* --------------------------------------------------------------------------
   Confirmacao de apagar. Um pedido de etapa 1 nao tem produto nem rastreio,
   e por isso a lista precisa mostrar conta, CPF e numero - senao ele fica
   identico a uma linha de teste vazia, que foi como duas ordens reais se
   perderam.
   -------------------------------------------------------------------------- */
.lista-apagar li {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; border-bottom: 1px solid var(--borda);
}
.lista-apagar li:last-child { border-bottom: none; }
.lista-apagar li .cod {
  flex: none; font-family: var(--mono); color: var(--texto-3); font-size: 11.5px;
}
.lista-apagar li b { font-weight: 500; }
.lista-apagar li .icone { flex: none; color: var(--bordo); }

/* A linha que carrega dado de cliente fica marcada: e a diferenca entre
   apagar um teste e apagar um pedido de alguem. */
.lista-apagar li.com-cliente b { color: var(--bordo); font-weight: 600; }

.avisos-cadastro.perigo {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  padding: 10px 12px; border-radius: 8px;
  /* Borda propria: a classe base pinta a de aviso (amarela), e aqui a
     mensagem e de perigo. Duas cores na mesma caixa confundem o que a
     cor deveria estar dizendo. */
  border: 1px solid var(--bordo);
  background: var(--bordo-fundo); color: var(--bordo); font-size: 12px;
  line-height: 1.45;
}
.avisos-cadastro.perigo .icone { flex: none; margin-top: 1px; }


/* --------------------------------------------------------------------------
   Colagem do WPS: uma linha por coluna, com o dado de exemplo ao lado.

   O exemplo nao e enfeite. Conta e loja tem o mesmo formato, e escolher
   entre as duas num seletor sem ver o conteudo e adivinhacao - vendo
   "rafaellagoplay13" do lado, a conferencia leva um segundo.
   -------------------------------------------------------------------------- */
.linha-mapeamento {
  display: grid; grid-template-columns: 26px 168px 1fr;
  gap: 10px; align-items: center;
}
.linha-mapeamento .num {
  font-family: var(--mono); font-size: 11px; color: var(--texto-3);
  text-align: right;
}
.linha-mapeamento .exemplo {
  font-size: 11.5px; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aviso-colagem {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--realce); font-size: 12.5px;
}
.aviso-colagem .ajuda { font-size: 11.5px; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Atualizacoes: a linha do tempo do que o sistema fez sozinho.

   Um trilho vertical com um ponto por fato, na cor do status que o fato
   produziu - o mesmo codigo de cor das etiquetas e das linhas da lista. O
   ponto e vazado (anel) de proposito: cheio, oito pontos coloridos empilhados
   viram um semaforo gritando; o anel marca a cor sem pesar.
   -------------------------------------------------------------------------- */
.feed { position: relative; padding: 4px 0 6px; }
.feed::before {
  content: ""; position: absolute; left: 27px; top: 18px; bottom: 18px;
  width: 2px; border-radius: 1px; background: var(--borda);
}
.feed-dia {
  position: relative; z-index: 1; margin-top: 6px;
  padding: 8px 16px 4px 48px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-3);
}
.feed-item {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px 10px 48px;
  transition: background .12s;
}
.feed-item:hover { background: var(--realce); }
.feed-ponto {
  position: absolute; left: 22px; top: 15px; width: 12px; height: 12px;
  border-radius: 50%; z-index: 1; flex: none;
  background: var(--superficie); border: 3px solid var(--tom, var(--cinza));
}
/* O fundo do anel acompanha o realce do hover, senao fica um quadrado claro. */
.feed-item:hover .feed-ponto { background: var(--realce); }
.feed-corpo {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  /* Texto sem espaco (o sku de 10 mil letras que entrou num ataque) quebra
     dentro da coluna em vez de empurrar a hora para fora da tela. */
  overflow-wrap: anywhere;
}
.feed-troca { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.feed-troca > .icone { color: var(--texto-3); flex: none; }
.feed-texto { font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.feed-meta {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--texto-3);
}
.feed-meta b { color: var(--texto-2); font-weight: 600; }
.feed-meta .cod { font-family: var(--mono); font-size: 11.5px; letter-spacing: -.2px; }
.feed-lado { display: flex; align-items: center; gap: 8px; flex: none; margin-top: 1px; }
.feed-lado time {
  font-family: var(--mono); font-size: 11.5px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
/* O botao de ir ate o pedido aparece quando o cursor chega, como o lapis do
   saldo - e sempre que ganha foco, senao o teclado nunca o alcanca. */
.feed-lado .ir-pedido { opacity: 0; transition: opacity .12s ease; }
.feed-item:hover .ir-pedido,
.feed-lado .ir-pedido:focus-visible { opacity: 1; }
@media (hover: none) { .feed-lado .ir-pedido { opacity: 1; } }


/* No feed, a troca de codigo mostra o antigo riscado e o novo em destaque -
   a mesma leitura do que aparece na lista quando a Cainiao troca. */
.feed-troca .cod.riscado { text-decoration: line-through; color: var(--texto-3); }
.feed-troca .cod.forte { color: var(--texto); font-weight: 600; }
.feed-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-3);
}


/* No feed, o autor de uma acao MANUAL fica marcado: e o que separa "o
   sistema fez" de "fulano fez". Fundo suave e nome forte, como uma etiqueta
   de pessoa. */
.feed-autor {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 6px; border-radius: 20px;
  background: var(--acento-suave); color: var(--acento);
  font-weight: 600; font-size: 11px;
}
/* O icone de usuario deixa claro de relance que aquilo e uma PESSOA, e nao
   um codigo ou um rotulo. `flex: none` para nao encolher. */
.feed-autor .icone { flex: none; }
.feed-qtd { color: var(--texto-3); font-size: 12px; }


/* ==========================================================================
   CELULAR
   ==========================================================================

   Regra unica de entrada: `:root[data-movel="1"]`, ligado pelo app.js. Nao
   existe media query de celular espalhada por este arquivo de proposito - a
   tela do celular nao e a de computador encolhida, ela troca de ESTRUTURA
   (a grade vira cartoes, a lateral vira gaveta), e essa decisao tem que ser
   uma so, tomada num lugar so. Duas definicoes de "e celular" - uma aqui e
   outra no JavaScript - saem de sincronia no primeiro ajuste de largura, e
   ai o app desenha cartoes com o CSS da planilha.

   O `.grupo-lote { display: contents }` la embaixo e a mesma ideia ao
   contrario: o app.js monta um DOM so, e no computador os grupos somem para
   a barra continuar sendo a fila horizontal que sempre foi.
   -------------------------------------------------------------------------- */

/* A altura da janela no celular muda enquanto a pessoa rola (a barra de
   endereco some e volta). Com 100vh o rodape fica escondido atras dela; dvh
   acompanha. O 100vh continua para quem nao tem dvh. */
:root[data-movel="1"] #app { height: 100vh; height: 100dvh; }

/* Campo com menos de 16px faz o iPhone dar zoom sozinho ao focar, e a tela
   fica torta ate a pessoa fechar o teclado e voltar o zoom na mao.
   O `select` fica de fora: ele nao abre teclado, entao nao provoca o zoom -
   e com 16px o seletor de idioma comia um terco do cabecalho. */
:root[data-movel="1"] .campo,
:root[data-movel="1"] input,
:root[data-movel="1"] textarea { font-size: 16px; }
:root[data-movel="1"] select.campo { font-size: 13px; height: 36px; }
:root[data-movel="1"] .cabecalho select.campo { font-size: 12.5px; max-width: 104px; }

/* Alvo de toque: 24px de botao e o tamanho de uma unha, nao de um polegar. */
:root[data-movel="1"] .btn { height: 40px; padding: 0 14px; }
:root[data-movel="1"] .btn.p { height: 36px; padding: 0 12px; font-size: 13px; }
:root[data-movel="1"] .btn.quadrado { width: 40px; padding: 0; }
:root[data-movel="1"] .btn.quadrado.p { width: 36px; }
:root[data-movel="1"] .btn-linha { width: 38px; height: 38px; border-radius: 10px; }
/* "Completar dados" tem cara de etiqueta mas e um botao, e e o unico caminho
   para terminar uma ordem pela metade. Com 22px ele era a menor coisa
   clicavel da tela. */
:root[data-movel="1"] .btn-completar { height: 34px; padding: 0 12px; font-size: 12.5px; }
:root[data-movel="1"] .caixinha { width: 21px; height: 21px; border-radius: 6px; }
:root[data-movel="1"] .caixinha:checked::after { width: 5px; height: 11px; }

/* ------------------------------------------------------------ gaveta */
/* No computador a lateral encolhe para uma tira de icones. Num celular nao
   sobra largura nem para a tira: ela sai da tela e volta por cima, com veu
   atras - o padrao que todo mundo ja conhece do proprio telefone. */
:root[data-movel="1"] .lateral {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
  width: min(280px, 84vw); transform: translateX(-100%);
  transition: transform .2s ease; box-shadow: var(--sombra-3);
  padding-bottom: env(safe-area-inset-bottom);
}
:root[data-movel="1"] .lateral.aberta { transform: none; }
:root[data-movel="1"] .lateral .item-nav { padding: 12px 12px; font-size: 15px; }
:root[data-movel="1"] .lateral .marca { height: 56px; }

.veu-lateral {
  position: fixed; inset: 0; z-index: 94;
  background: rgba(4, 6, 10, .5); backdrop-filter: blur(2px);
  animation: aparecer .14s ease-out;
}
/* No computador nao ha gaveta, entao nao pode haver veu - ele cobriria a
   tela inteira sem que nada o tivesse aberto. */
:root:not([data-movel="1"]) .veu-lateral { display: none !important; }

/* -------------------------------------------------- cabecalho e acoes */
:root[data-movel="1"] .cabecalho { height: 54px; padding: 0 10px; gap: 8px; }
:root[data-movel="1"] .cabecalho h1 { font-size: 15.5px; }
:root[data-movel="1"] .cabecalho .subtitulo { display: none; }

/* As acoes da tela nao cabem ao lado do titulo: com "Sincronizar",
   "Exportar", idioma e tema o titulo era empurrado para fora da tela. Elas
   ganham uma faixa propria que rola de lado quando forem muitas. */
.faixa-acoes {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.faixa-acoes::-webkit-scrollbar { display: none; }
.faixa-acoes > #acoes-tela { display: flex; align-items: center; gap: 8px; }
.faixa-acoes > #acoes-tela > * { flex: none; }
/* Tela sem acao nenhuma nao ganha uma faixa vazia de 53px. */
.faixa-acoes:has(> #acoes-tela:empty) { display: none; }

/* ------------------------------------------------------ barra da lista */
:root[data-movel="1"] .barra { padding: 10px 10px; gap: 8px; }
/* Os filtros de status passam de cinco: em vez de quebrarem em duas linhas
   e empurrarem a lista para baixo, eles rolam de lado numa linha so. */
:root[data-movel="1"] .barra .segmentos {
  display: flex; max-width: 100%; overflow-x: auto;
  scrollbar-width: none; flex: 1 0 100%;
}
:root[data-movel="1"] .segmentos::-webkit-scrollbar { display: none; }
:root[data-movel="1"] .segmentos button { height: 32px; flex: none; }
:root[data-movel="1"] .barra .espaco { display: none; }

/* ------------------------------------------------- rolagem das telas */
:root[data-movel="1"] .rolagem { padding: 14px 12px 40px; }
:root[data-movel="1"] .secao { margin-top: 20px; }

/* Dois cartoes por linha em vez de um so: os numeros do Painel sao curtos, e
   uma coluna unica obrigava a rolar a tela inteira para ver seis numeros. */
:root[data-movel="1"] .cartoes {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
}
:root[data-movel="1"] .cartao { padding: 12px 13px; }
:root[data-movel="1"] .cartao .valor { font-size: 23px; }

/* Tabela larga rola dentro do proprio quadro, e nao empurra a pagina de
   lado. Sem isto o corpo inteiro andava e o cabecalho saia do lugar. */
:root[data-movel="1"] .quadro { overflow-x: auto; }
:root[data-movel="1"] table.dados th,
:root[data-movel="1"] table.dados td { padding: 9px 10px; }

/* A linha do tempo do rastreio em duas colunas espremia a hora e o texto em
   trinta caracteres cada. Empilhados, os dois cabem. */
:root[data-movel="1"] .evento { grid-template-columns: 1fr; gap: 3px; }

/* Localizar e busca dentro da tabela: sem tabela, sem painel. O botao ja nao
   e desenhado no celular; a regra fecha a porta para quem chegar por atalho
   de teclado num tablet com teclado. */
:root[data-movel="1"] .painel-localizar { display: none !important; }

/* A caixa de entrada tinha largura fixa de 356px: num celular de 360px ela
   encostava nas duas bordas. */
:root[data-movel="1"] .entrada-login { height: 100dvh; padding: 16px; }
:root[data-movel="1"] .entrada-login form {
  width: 100%; max-width: 380px; padding: 24px 20px;
}

:root[data-movel="1"] .barra-status { padding: 4px 12px; gap: 14px; }
:root[data-movel="1"] .barra-status .atalhos { display: none; }

/* Aviso no rodape nao pode ficar por baixo da barra de acoes em lote. */
:root[data-movel="1"] #avisos {
  left: 10px; right: 10px; bottom: 10px; justify-items: stretch;
}
:root[data-movel="1"] .aviso { max-width: none; }
:root[data-movel="1"] .faixa-atualizacao {
  left: 10px; right: 10px; bottom: 10px; transform: none;
}

/* ------------------------------------------------------------- modais */
/* Modal centrado com 24px de folga vira uma caixinha no meio do celular. Aqui
   ele sobe do rodape e ocupa a largura toda, como toda janela de celular. */
:root[data-movel="1"] .veu { padding: 0; align-items: flex-end; }
:root[data-movel="1"] .modal {
  width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0;
  border-bottom: 0;
}
:root[data-movel="1"] .modal > footer {
  border-radius: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
/* Confirmar e cancelar ocupando a largura toda: sao os dois alvos que a
   pessoa procura sem olhar. */
:root[data-movel="1"] .modal > footer .btn { flex: 1; }
:root[data-movel="1"] .modal .grade-form { grid-template-columns: 1fr; }
:root[data-movel="1"] .modal .corpo { padding: 16px; }
:root[data-movel="1"] .linha-mapeamento { grid-template-columns: 22px 1fr; }
:root[data-movel="1"] .linha-mapeamento .exemplo { grid-column: 2; }

/* ==================================================== lista de ordens */
/* A grade tipo planilha nao existe nesta largura (veja web/movel.js). Cada
   ordem vira um cartao, os cartoes ficam num balao por dia, e o dia mais
   novo abre em cima. */
.lista-movel {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; background: var(--fundo);
}
.lista-movel-corpo { padding: 10px 10px 24px; }

/* Com ordem marcada, a barra de acoes cobre o pe da lista. O espaco extra
   garante que o ultimo cartao continue alcancavel. */
.lista-movel.selecionando .lista-movel-corpo { padding-bottom: 210px; }

.lista-movel-vazia {
  padding: 48px 20px; text-align: center; color: var(--texto-3); margin: 0;
}

.balao-dia {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
}
/* A data acompanha a rolagem: com doze ordens no mesmo dia, quem esta no
   meio do balao continua sabendo de que dia esta lendo. */
.balao-cabeca {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px 9px 12px; background: var(--realce);
  border-bottom: 1px solid var(--borda);
}
.balao-data {
  font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--texto); flex: none;
}
.balao-conta {
  font-size: 11.5px; color: var(--texto-3); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-marcar-dia {
  flex: none; height: 30px; padding: 0 11px; border-radius: 15px;
  border: 1px solid var(--borda-forte); background: var(--elevado);
  color: var(--texto-2); font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.btn-marcar-dia.ativo {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* ------------------------------------------------------ cartao da ordem */
.cartao-ordem {
  display: flex; align-items: stretch; gap: 2px;
  border-top: 1px solid var(--borda);
  border-left: 3px solid var(--tom, var(--cinza));
  background: var(--superficie);
}
.balao-dia > .cartao-ordem:first-of-type { border-top: 0; }
.cartao-ordem.marcada { background: var(--acento-suave); }

/* A cor da faixa e a MESMA da etiqueta e da linha da planilha: quem usa as
   duas telas nao precisa aprender dois codigos de cor. */
.cartao-ordem[data-status="INTERNACIONAL"]     { --tom: var(--azul); }
.cartao-ordem[data-status="LIBERADO"]          { --tom: var(--verde); }
.cartao-ordem[data-status="ENTREGUE_CORREIOS"] { --tom: var(--laranja); }
.cartao-ordem[data-status="CONFIRMADO"]        { --tom: var(--vermelho); }
.cartao-ordem[data-status="INSPECAO"]          { --tom: var(--amarelo); }
.cartao-ordem[data-status="SEM_CODIGO"]        { --tom: var(--roxo); }
.cartao-ordem[data-status="PROBLEMA"]          { --tom: var(--bordo); }
.cartao-ordem[data-status="CANCELADO"]         { --tom: var(--texto-3); }

/* A caixinha tem 21px; o alvo de toque tem a coluna inteira. Acertar 21px
   com o polegar em movimento e sorte, e marcar a ordem errada e o tipo de
   erro que so se descobre depois de rastrear o lote errado. */
.marcar-ordem {
  flex: none; width: 46px; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 14px; cursor: pointer;
}
.conteudo-ordem { flex: 1; min-width: 0; padding: 11px 12px 11px 0; }
.cartao-miolo { display: flex; flex-direction: column; gap: 7px; }

.cartao-topo { display: flex; align-items: center; gap: 8px; }
.cartao-qtd {
  flex: none; font-size: 12.5px; font-weight: 650; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cartao-identidade { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cartao-identidade b {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-conta {
  font-size: 12px; color: var(--texto-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O codigo de rastreio e o que se leva para o site dos Correios e da
   Cainiao. Tocar copia - no celular nao ha como selecionar treze caracteres
   de fonte monoespacada com o dedo sem pegar a linha inteira. */
.cartao-codigo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  max-width: 100%; padding: 5px 10px; border-radius: 8px;
  border: 1px dashed var(--borda-forte); background: var(--realce);
  font-family: var(--mono); font-size: 13px; letter-spacing: -.2px;
  color: var(--texto); cursor: pointer;
}
.cartao-codigo .icone { color: var(--texto-3); flex: none; }
.cartao-codigo span { overflow: hidden; text-overflow: ellipsis; }
.cartao-codigo.vazio {
  border-style: solid; border-color: var(--borda); color: var(--texto-3);
  font-family: var(--texto-fonte); font-size: 12px; cursor: default;
}

.cartao-evento {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-3);
  /* Duas linhas bastam para saber o que aconteceu; o texto inteiro esta no
     rastreio, a um toque daqui. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.cartao-acoes { margin-top: 2px; }
.cartao-acoes .acoes-linha { flex-wrap: wrap; gap: 6px; }

.ver-mais-movel { width: 100%; margin: 4px 0 8px; }

/* ================================================= barra de acoes em lote */
/* No computador ela e uma faixa no topo da lista. No celular ela desce para
   o rodape - e a ferramenta principal da tela (marcar ordens e abrir os
   sites de rastreio), e no topo ficava fora do alcance do polegar. */
.grupo-lote { display: contents; }
.rotulo-lote { display: none; }

:root[data-movel="1"] .barra-lote:not(.faixa-visita) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--elevado); border-top: 1px solid var(--acento-linha);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .28);
}
:root[data-movel="1"] .barra-lote:not(.faixa-visita) .grupo-lote {
  display: flex; align-items: center; gap: 8px;
}
:root[data-movel="1"] .barra-lote:not(.faixa-visita) .rotulo-lote {
  display: block; font-size: 11px; font-weight: 650; color: var(--texto-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: -2px;
}
/* Os espacadores existem para empurrar botao na fila horizontal. Numa barra
   vertical eles viram linhas em branco. */
:root[data-movel="1"] .barra-lote:not(.faixa-visita) > .espaco,
:root[data-movel="1"] .barra-lote:not(.faixa-visita) > .espaco-pequeno {
  display: none;
}
:root[data-movel="1"] .barra-lote .btn-sair-selecao { height: 32px; }
:root[data-movel="1"] .barra-lote .conta-lote { font-size: 14px; }
/* Tres sites, tres tercos: nenhum e mais importante que o outro, e assim
   nenhum fica pequeno demais para acertar. */
:root[data-movel="1"] .barra-lote .grupo-lote.rastreio .btn { flex: 1; min-width: 0; }
:root[data-movel="1"] .barra-lote .grupo-lote:last-child .btn { flex: 1; }

:root[data-movel="1"] .barra-lote.faixa-visita { padding: 9px 12px; }

/* --------------------------------------------- data de entrega na conferencia */
/* A caixa de conferencia e a que abre com a mercadoria na frente da pessoa.
   O campo da data fica destacado do resto porque ele e o unico ali que se
   mexe: o resto e leitura. */
.campo-entrega {
  display: block; margin: 16px 0 0; padding: 12px 14px;
  background: var(--realce); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.campo-entrega > span {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3); margin-bottom: 6px;
  font-weight: 650;
}
.campo-entrega .campo { width: 100%; }
.campo-entrega .ajuda {
  display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.5;
  color: var(--texto-3);
}
/* ------------------------------------------------------- campo de data */
/* A data e escrita como TEXTO, no formato do site, e o calendario do sistema
   fica ao lado. O `input type=date` sozinho nao servia: ele desenha a data no
   formato do NAVEGADOR, e com a tela em chines aparecia 15/01/2026 no meio de
   uma tela que mostra 2026-01-15 em todo o resto. O calendario dele continua,
   porque no celular e o unico jeito decente de escolher um dia com o dedo. */
.campo-data { position: relative; display: flex; align-items: center; gap: 6px; }
.campo-data > .campo { flex: 1; min-width: 0; }

/* Dentro da celula da grade o espaco e o da linha: sem folga nenhuma. */
.editor-data {
  position: relative; display: flex; align-items: center; gap: 2px;
  width: 100%; height: 100%;
}
.editor-data > .editor { flex: 1; min-width: 0; }

.abrir-calendario {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: var(--raio-p);
  border: 1px solid var(--borda); background: var(--elevado);
  color: var(--texto-3); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.abrir-calendario:hover { background: var(--realce); color: var(--texto); }
.editor-data .abrir-calendario {
  width: 22px; height: 22px; border: 0; background: transparent;
}
.editor-data .abrir-calendario:hover { background: var(--realce); }
:root[data-movel="1"] .abrir-calendario { width: 38px; height: 38px; }

/* O `type=date` existe so para ABRIR o seletor nativo: ele nunca aparece.
   Nao pode ser `display:none` - `showPicker()` recusa abrir num campo que
   nao esta renderizado. Fica com um pixel, transparente e fora do toque. */
.calendario-oculto {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}

/* Dentro do lapis o formulario tem duas colunas. A data de entrega e um
   bloco com titulo e explicacao: em meia largura o texto quebrava em cinco
   linhas ao lado de um campo vazio. */
.grade-form > .campo-entrega.largura-toda { grid-column: 1 / -1; }

/* --------------------------------- o codigo da ultima ordem, no aviso */
/* A conta so libera quando o rastreio mostra a entrada na alfandega chinesa.
   Enquanto nao mostra, a verdade so esta na Cainiao - e o aviso carrega o
   caminho ate la em vez de pedir para a pessoa copiar o codigo e procurar. */
.aviso-com-link { display: flex; flex-direction: column; gap: 8px; }
.aviso-com-link > p { margin: 0; }
.aviso-ultima-ordem {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-left: 22px;   /* alinha com o texto, depois do icone do aviso */
}
.aviso-ultima-ordem .rotulo { font-size: 12px; color: var(--texto-2); }
/* O botao e a palavra "Cainiao" formam uma coisa so e quebram juntos. */
.aviso-ultima-ordem .alvo {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.aviso-ultima-ordem .btn { gap: 6px; }
.aviso-ultima-ordem code {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: -.2px;
}
.aviso-ultima-ordem .onde {
  font-size: 12px; font-weight: 600; color: var(--texto-2);
}
.aviso-com-link > .ajuda {
  padding-left: 22px; font-size: 11.5px; line-height: 1.5;
  color: var(--texto-3);
}