/* ═══════════════════════════════════════════════════════════════════
   TRIPLACE MATRIX — a folha de estilo, e é uma só.

   ESTAVA COPIADA EM QUATRO TEMPLATES. A paleta, os botões, as pastilhas
   dos filtros — tudo repetido, e a começar a divergir: o âmbar já era
   `#f3b64a` num ficheiro e `#edc84f` noutro. Uma cor com dois valores
   não é uma cor, é um bug à espera.

   ── A PALETA ───────────────────────────────────────────────────────

   Verde de fósforo sobre um chão muito escuro, mas isto é uma
   FERRAMENTA DE TRABALHO e não um protector de ecrã. A primeira versão
   era preto puro com o texto todo em verde saturado e cansava a vista
   em dez minutos; quem abre isto vai estar cá uma hora com uma lista de
   contagem na mão.

   · o chão não é preto puro — preto puro contra texto claro vibra;
   · o texto é quase-branco com inclinação verde, não verde;
   · o VERDE é acento: o título, o que está activo, o que TEM stock;
   · a LARANJA (#f09018) é a da Triplace, medida nos pixéis do logotipo
     e não escolhida a olho. Vive no cabeçalho — assinatura, filtro
     activo, o que responde ao rato — porque o âmbar do aviso mora no
     corpo da tabela, e duas cores quentes na mesma coluna deixavam de
     significar cada uma a sua coisa. Separam-se por zona, não por tom;
   · o âmbar e o vermelho são as duas coisas que custam dinheiro
     (discordar, e estar negativo). São as únicas que fogem à paleta.

   ── A LETRA ────────────────────────────────────────────────────────

   Monoespaçada SÓ NOS NÚMEROS, que é onde ela ganha: as colunas alinham
   sem se lhes tocar. Os nomes vão em letra normal, que se lê muito
   melhor — e um nome de produto não precisa de alinhar com nada.

   ── OS TAMANHOS ────────────────────────────────────────────────────

   Três, e cada um é um sítio real:

     telemóvel   de pé na loja, uma mão na caixa. Tudo em cartões, nada
                 na horizontal, e os alvos de toque com 44px.
     tablet      sentado ao balcão. Tabela, mas com menos colunas.
     ecrã        a olhar para tudo de uma vez.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --fundo:    #101613;
  --painel:   #16201b;
  --alto:     #1d2a23;
  --borda:    #263630;
  --borda-2:  #1c2822;

  --texto:    #d5e3da;
  --suave:    #92a99c;
  --fraco:    #62796e;

  --verde:    #4fe08a;
  --verde-2:  #2f9e63;
  --verde-3:  #1f6b45;

  --ambar:    #edc84f;
  --vermelho: #f87171;

  --laranja:   #f09018;
  --laranja-2: #c4741a;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
          "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  /* O ALVO DE TOQUE. 44px e' o minimo com que um dedo acerta sem
     pensar; abaixo disso falha-se e carrega-se outra vez, e uma
     ferramenta que se usa de pe' nao pode pedir pontaria. */
  --toque: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Impede o iOS de aumentar a letra quando se roda o telemovel. */
  -webkit-text-size-adjust: 100%;
}
a { color: var(--verde-2); text-decoration: none; }
a:hover { color: var(--laranja); }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
img { max-width: 100%; }

/* ── o cabeçalho ──────────────────────────────────────────────────── */
header {
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
  box-shadow: inset 0 -2px 0 rgba(240,144,26,.28);
  padding: 13px 20px 11px;
  position: sticky; top: 0; z-index: 20;
}
header.linha { display: flex; align-items: center; gap: 16px;
               flex-wrap: wrap; padding: 12px 20px; }
.topo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
h1 {
  margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600;
  letter-spacing: .3em; white-space: nowrap;
}
h1 .tri { color: var(--laranja); }
h1 .mat { color: var(--verde); }
h1 small { font-family: var(--sans); font-size: 12px; letter-spacing: 0;
           color: var(--fraco); margin-left: 10px; font-weight: 400; }
.fontes { color: var(--fraco); font-size: 11.5px; font-family: var(--mono); }
.fontes b { color: var(--suave); font-weight: 600; }
.euzinho { color: var(--fraco); font-size: 11.5px; font-family: var(--mono); }
.espaco { flex: 1 1 auto; }

.idade { font-family: var(--mono); font-size: 11px; color: var(--fraco);
         border: 1px solid var(--borda); border-radius: 3px;
         padding: 1px 7px; text-decoration: none; white-space: nowrap; }
.idade:hover { border-color: var(--laranja-2); color: var(--laranja); }
.a-refazer { color: var(--laranja); border-color: var(--laranja-2); }

/* ── as pastilhas ─────────────────────────────────────────────────── */
.barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
         margin-top: 11px; }
.chip, button.chip, a.chip {
  border: 1px solid var(--borda); background: var(--fundo);
  color: var(--suave); padding: 5px 11px; border-radius: 3px;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--laranja-2); color: var(--texto); }
.chip.on { background: var(--laranja); border-color: var(--laranja);
           color: #1a1005; font-weight: 700; }
.chip .n { font-family: var(--mono); font-size: 11px; opacity: .75;
           margin-left: 6px; }
.chip.on .n { opacity: .85; }

input[type=search], input[type=text], input[type=password],
input[type=number], select.chip {
  background: var(--fundo); border: 1px solid var(--borda);
  color: var(--texto); font: inherit; font-size: 12px;
  padding: 5px 11px; border-radius: 3px;
}
input::placeholder { color: var(--fraco); }
input[type=search] { min-width: 210px; }

/* ── botões ───────────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; }
.b-sim { border: 1px solid var(--verde-2); background: transparent;
         color: var(--verde); font-weight: 600; padding: 6px 15px;
         border-radius: 3px; }
.b-sim:hover { background: var(--verde-3); color: #eafff2; }
.b-nao { border: 1px solid var(--borda); background: transparent;
         color: var(--fraco); font-weight: 600; padding: 6px 15px;
         border-radius: 3px; }
.b-nao:hover { border-color: var(--vermelho); color: var(--vermelho); }
.b-forte { border: 1px solid var(--laranja); background: var(--laranja);
           color: #1a1005; font-weight: 700; padding: 7px 18px;
           border-radius: 3px; }
.b-forte:hover { background: var(--laranja-2); border-color: var(--laranja-2); }

/* ── marcas ───────────────────────────────────────────────────────── */
.marca { display: inline-block; padding: 1px 7px; border-radius: 3px;
         font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
         text-transform: uppercase; white-space: nowrap; }
.m-neg { background: rgba(248,113,113,.12); color: var(--vermelho);
         border: 1px solid rgba(248,113,113,.3); }
.m-con { background: rgba(237,200,79,.12); color: var(--ambar);
         border: 1px solid rgba(237,200,79,.32); }
.m-dub { color: var(--fraco); border: 1px solid var(--borda); }
.m-err { background: rgba(240,144,26,.14); color: var(--laranja);
         border: 1px solid rgba(240,144,26,.35); }
.m-ok  { background: rgba(79,224,138,.1); color: var(--verde);
         border: 1px solid rgba(79,224,138,.28); }

/* ── números e estados ────────────────────────────────────────────── */
.num, .cel { text-align: right; font-family: var(--mono);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.ha   { color: var(--verde); }
.zero { color: var(--fraco); }
.neg  { color: var(--vermelho); font-weight: 700; }
.nao  { color: var(--borda); }
.diz  { color: var(--suave); font-size: 12px; }
.quando { color: var(--fraco); font-size: 10.5px; font-family: var(--mono); }
code { font-family: var(--mono); color: var(--verde); }

.aviso { color: var(--suave); font-size: 12.5px; padding: 11px 14px;
         border: 1px solid var(--borda); border-left: 3px solid var(--laranja);
         background: var(--painel); border-radius: 0 4px 4px 0; }
.aviso b { color: var(--texto); }
.vazio { padding: 60px 20px; text-align: center; color: var(--fraco); }

/* ══ TABLET ════════════════════════════════════════════════════════
   Entre 761 e 1100: a tabela cabe, mas apertada. O que sai é o que
   menos custa perder num ecrã em que ainda se vê tudo — a linha do EAN
   por baixo do nome, e o intervalo, que é uma estimativa e não um
   facto. As colunas dos canais e a da verdade ficam todas. */
@media (min-width: 761px) and (max-width: 1100px) {
  .meta { display: none; }
  .entre { display: none; }
  th.entre { display: none; }
  .produto { max-width: 300px; }
  .diz { font-size: 11.5px; }
}

/* ══ TELEMÓVEL ═════════════════════════════════════════════════════
   Abaixo de 760 a tabela vira cartões. A saída fácil era `overflow-x` e
   deixar arrastar de lado — mas quem abre isto num telemóvel está de pé
   na loja com uma caixa na mão, e arrastar na horizontal para ver o
   stock do Vendus é a pior coisa que se lhe pode pedir. */
@media (max-width: 760px) {
  body { font-size: 14px; }
  header { padding: 11px 13px 9px; }
  header.linha { padding: 10px 13px; gap: 10px; }
  h1 { font-size: 13px; letter-spacing: .2em; }
  .fontes { font-size: 10.5px; line-height: 1.7; }

  /* A BARRA DE FILTROS ROLA NA HORIZONTAL, e é o único sítio onde isso
     é aceitável: são pastilhas, vê-se logo que há mais, e o dedo já
     está habituado a varrer uma fila de etiquetas. */
  .barra { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px;
           scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .barra::-webkit-scrollbar { display: none; }
  .espaco { display: none; }
  input[type=search] { min-width: 145px; order: -1; }

  /* TUDO O QUE SE TOCA TEM 44px. */
  .chip, button.chip, a.chip, .b-sim, .b-nao, .b-forte,
  input, select { min-height: var(--toque); }
  .chip, a.chip { padding: 0 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   A BARRA MESTRA

   Uma linha: assinatura, abas, procura, quem está. Estava espalhada por
   duas e misturada com os filtros da matriz e com as datas dos canais —
   e o resultado era quatro filas antes de se chegar à primeira linha de
   dados.

   AS ABAS SÃO ABAS e não pastilhas: têm uma risca por baixo quando estão
   activas, que é o que as pessoas esperam de uma navegação. As pastilhas
   ficam para os filtros, que são outra coisa — escolhem o que se vê
   dentro de uma página, não para onde se vai.
   ═══════════════════════════════════════════════════════════════════ */
header.mestra {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--painel); border-bottom: 1px solid var(--borda);
  box-shadow: inset 0 -2px 0 rgba(240,144,26,.28);
  padding: 0 18px; min-height: 52px;
  position: sticky; top: 0; z-index: 30;
}
/* `.assinatura` E NAO `.marca`. O `.marca` ja' era das etiquetas de
   estado (negativo, contradicao) e as regras delas -- caixa pequena,
   maiusculas, moldura -- iam aplicar-se ao nome do projecto. Duas coisas
   com o mesmo nome numa folha de estilo e' uma colisao a' espera, e esta
   apanhava-se so' ao olhar para o ecra. */
.assinatura { font-family: var(--mono); font-size: 14px; font-weight: 600;
              letter-spacing: .26em; white-space: nowrap;
              text-decoration: none; }
.assinatura .tri { color: var(--laranja); }
.assinatura .mat { color: var(--verde); }
.assinatura:hover { opacity: .85; }

.abas { display: flex; gap: 2px; align-items: stretch; align-self: stretch; }
.aba {
  display: flex; align-items: center; padding: 0 14px;
  color: var(--suave); font-size: 13px; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.aba:hover { color: var(--texto); background: rgba(240,144,26,.06); }
.aba.on { color: var(--laranja); border-bottom-color: var(--laranja);
          font-weight: 600; }
.aba.destaque { color: var(--verde); }
.aba.destaque:hover { color: var(--verde); }
.aba.destaque.on { color: var(--laranja); }

.procura { flex: 1 1 200px; max-width: 340px; margin-left: auto; }
.procura input { width: 100%; }
.canto { display: flex; gap: 7px; align-items: center; }

@media (max-width: 900px) {
  header.mestra { gap: 10px; padding: 8px 12px; }
  .marca { font-size: 12px; letter-spacing: .18em; }
  /* AS ABAS ROLAM, e é o único sítio onde isso serve: são poucas,
     vê-se logo que há mais, e o dedo varre uma fila de etiquetas sem
     pensar. */
  .abas { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none;
          border-top: 1px solid var(--borda-2); padding-top: 2px; }
  .abas::-webkit-scrollbar { display: none; }
  .aba { padding: 10px 13px; min-height: var(--toque); }
  .procura { order: 2; flex: 1 1 120px; max-width: none; margin-left: 0; }
  .canto { order: 1; }
  .euzinho { display: none; }
}

/* ── A LINHA DOS FILTROS ───────────────────────────────────────────
   Por baixo da barra mestra, e só na matriz. São dezasseis e contam-se
   a olho: esconder metade num menu poupava espaço e custava a única
   coisa que eles têm de bom — ver de relance que há 1553 em falta sem
   clicar em nada. */
.filtros { background: var(--painel); border-bottom: 1px solid var(--borda);
           padding: 9px 18px 10px; position: sticky; top: 52px; z-index: 25; }
.filtros .barra { margin-top: 0; }
.filtros .fontes { margin-top: 8px; display: flex; gap: 10px;
                   align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  /* A barra mestra passa a duas linhas no telemovel, e o `top` fixo
     deixaria um buraco ou tapava os filtros. Solta-se. */
  .filtros { position: static; padding: 8px 12px 9px; }
}

/* ── VERIFICADO ───────────────────────────────────────────────────────
   O mesmo verde do `.m-ok`. Uma cor nova para um estado novo obriga a
   aprende-la; reusar a que ja' quer dizer "esta bem" nao obriga a nada. */
.confirmado { color: var(--verde); font-weight: 600; white-space: nowrap; }
.m-ver { background: rgba(79,224,138,.14); color: var(--verde);
         border: 1px solid rgba(79,224,138,.3); }

/* O botao «sincronizar» do cabecalho: um chip que e' um botao. */
.sinc-chip { display: inline; margin: 0; }
.sinc-chip button.chip { font: inherit; cursor: pointer; }
.sinc-chip button.chip:disabled { opacity: .7; cursor: progress; }
th.sel, td.sel { width: 28px; padding-right: 0; text-align: center; }
td.sel input, th.sel input { width: 16px; height: 16px; cursor: pointer; }
.barra-bulk { position: sticky; top: 0; z-index: 5; display: flex; gap: 12px; align-items: center;
  margin: 8px 16px 0; padding: 8px 12px; border-radius: 5px; font-size: 13px;
  background: rgba(237,200,79,.14); border: 1px solid rgba(237,200,79,.45); }
/* ── O RELATORIO DA ACCAO ───────────────────────────────────────────── */
details.relatorio { margin: 8px 16px 0; padding: 8px 12px; border-radius: 5px; font-size: 13px;
  background: rgba(120,180,255,.07); border: 1px solid rgba(120,180,255,.3); }
details.relatorio summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
details.relatorio summary .quando { font-family: var(--mono); font-size: 11px; opacity: .6; }
details.relatorio table { margin-top: 8px; border-collapse: collapse; width: 100%; }
details.relatorio td { padding: 3px 8px; vertical-align: top; border-top: 1px solid rgba(255,255,255,.05); }
details.relatorio td.r-est { font-family: var(--mono); width: 1.5em; text-align: center; }
details.relatorio td.r-prod { white-space: nowrap; max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
details.relatorio td.r-canal { font-family: var(--mono); font-size: 11.5px; opacity: .75; white-space: nowrap; }
details.relatorio tr.r-feito td.r-est { color: var(--verde, #4fe08a); }
details.relatorio tr.r-falhou td { color: #ffb3ad; }
details.relatorio tr.r-falhou td.r-est { color: #ff6b61; font-weight: bold; }
details.relatorio tr.r-saltado td { color: rgba(237,200,79,.9); }
details.relatorio tr.r-info td { opacity: .7; }
.r-n { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,.06); }
.r-n.r-feito { color: var(--verde, #4fe08a); }
.r-n.r-falhou { color: #ff6b61; }
.r-n.r-saltado { color: rgba(237,200,79,.9); }
/* ── A ESPERA ─────────────────────────────────────────────────────────── */
#veu-espera { position: fixed; inset: 0; z-index: 1000; background: rgba(5,8,6,.72);
  display: flex; align-items: center; justify-content: center; }
#veu-espera[hidden] { display: none; }
.caixa-espera { background: #0e1512; border: 1px solid rgba(120,180,255,.4); border-radius: 8px;
  padding: 22px 28px; text-align: center; font-size: 15px; min-width: 280px; }
.caixa-espera .sub { font-family: var(--mono); font-size: 11.5px; opacity: .6; margin-top: 6px; }
.roda { width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid rgba(120,180,255,.25); border-top-color: #78b4ff; animation: rodar .9s linear infinite; }
@keyframes rodar { to { transform: rotate(360deg); } }
.sinc-feito { margin: 8px 16px 0; padding: 8px 12px; border-radius: 5px; font-size: 13px;
  background: rgba(79,224,138,.10); border: 1px solid rgba(79,224,138,.35); }

/* Tirar um anuncio do canal, na ficha do produto. */
.canal form.tirar { margin-top: 8px; }
.canal .chip.perigo { border-color: rgba(240,74,74,.5); color: #f0a0a0; font: inherit; cursor: pointer; }
.canal .chip.perigo:hover { border-color: #f04a4a; color: #fff; }
.canal .tirado { margin-top: 8px; font-size: 12px; color: var(--laranja); }
.canal form.refrescar { margin: 8px 0 0; }
.canal form.corrigir { margin: 8px 0 0; }
tr.ausente form.criar-aqui { display: inline; margin-left: 6px; }
tr.ausente .motivo { font-size: .85em; color: var(--mau, #b3261e); margin-top: 3px; max-width: 34em; line-height: 1.3; }
tr.ausente .motivo .quando { opacity: .6; }
form.por-foto { margin-top: 8px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
form.por-foto input[type=file] { max-width: 220px; font-size: 12px; }
form.por-foto.tem summary { cursor: pointer; opacity: .7; font-size: 12px; }
form.por-foto.tem details[open] summary { margin-bottom: 6px; }
form.por-ean { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.por-ean input { width: 12em; font: inherit; padding: 2px 6px; }
form.por-ean.outro { margin-top: 4px; opacity: .75; }
form.por-ean.outro input { width: 15em; font-size: .9em; }
.canal .tirar { display: flex; gap: 6px; flex-wrap: wrap; }
.canal .tirar form { margin: 0; }
form.arquivar { margin: 14px 0; }