/* =====================================================================
   PAINEL DE CONTROLE — COMPONENTES
   ===================================================================== */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Textura de grão — a do site, reduzida.
   Sobre claro o ruído pesa mais, por isso 0.02 e não 0.04. */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  opacity:.6;
}

h1,h2,h3,h4 { font-family: var(--disp); font-weight:800; line-height:1.15; letter-spacing:-0.02em; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }

a { color: var(--acento-texto); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- BARRA SUPERIOR ---- */
.topo {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-4); flex-wrap:wrap;
  padding: var(--e-3) clamp(var(--e-4), 3vw, var(--e-6));
  background: rgba(245,244,240,0.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--linha);
}
/* A logo é branca sobre transparente.
   brightness(0) torna-a preta — sem invert, ao contrário do site. */
.logo img { height:28px; width:auto; display:block; filter: brightness(0); }

/* Em ecran estreito a navegacao rola em vez de partir a linha. */
.nav-links {
  display:flex; gap: clamp(var(--e-3), 2vw, var(--e-5)); align-items:center;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--e-2)); padding:0 var(--e-2);
}
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { white-space:nowrap; }
.nav-links a {
  font-family:var(--disp); font-weight:600; font-size:var(--t-sm);
  color:var(--tinta); letter-spacing:-0.01em;
}
h1 { margin-bottom:0; }
.nav-links a.activo { color:var(--acento-texto); }

/* ---- ESTRUTURA ----
   Grelhas fluidas: auto-fit + minmax decide sozinho quantas
   colunas cabem. Sem breakpoint a adivinhar tamanhos de ecran. */
.envelope {
  max-width: var(--largura-max);
  margin:0 auto;
  padding: clamp(var(--e-4), 3vw, var(--e-6));
  position:relative; z-index:2;
}
.grelha { display:grid; gap: clamp(var(--e-3), 2vw, var(--e-5)); }
.grelha-4 { grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr)); }
.grelha-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Cartoes da mesma linha: altura igual (e' o que da' a linha
   limpa) com o conteudo ancorado no topo. O vazio que aparecia
   antes vinha de margin-top:auto no rodape, nao do stretch. */
.grelha > .cartao { display:flex; flex-direction:column; }
.cartao-rodape { padding-top:var(--e-3); }
/* So' a nota final desce: o conteudo fica no topo, a linha de
   base alinha em baixo. Nenhum buraco no meio do conteudo. */
.grelha-4 > .cartao > .cartao-nota { margin-top:auto; }

/* Nada transborda horizontalmente. */
html, body { overflow-x:hidden; }
img, svg { max-width:100%; height:auto; }

/* ---- CARTÃO ---- */
.cartao {
  background:var(--fundo-alto);
  border:1px solid var(--linha);
  border-radius:var(--r-cartao);
  padding:var(--e-5);
  box-shadow:var(--sombra);
}
.cartao-titulo {
  font-family:var(--disp); font-weight:700; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:1.2px; color:var(--cinza);
  margin-bottom:var(--e-4);
}

/* ---- ANATOMIA DO CARTÃO DE TOPO ----
   Os quatro cartoes da primeira linha seguem a mesma estrutura:
   rotulo, destaque, corpo, nota. E' a repeticao da estrutura que
   os faz ler como uma linha unica — nao o facto de terem a mesma
   altura. Alturas iguais sem estrutura igual parecem desalinhadas. */
.cartao-destaque {
  font-family:var(--disp); font-weight:800; font-size:var(--t-lg);
  line-height:1.2; letter-spacing:-0.02em;
}
.cartao-corpo {
  font-size:var(--t-sm); color:var(--cinza); line-height:1.55;
  margin-top:var(--e-3);
}
.cartao-corpo strong { color:var(--tinta); font-weight:600; }
.cartao-nota {
  margin-top:var(--e-4); padding-top:var(--e-3);
  border-top:1px solid var(--linha);
  font-size:var(--t-xs); color:var(--cinza-fraco);
  letter-spacing:.2px;
}

/* ---- MÉTRICA ---- */
.metrica { font-family:var(--disp); font-weight:800; font-size:var(--t-xl); line-height:1; letter-spacing:-0.03em; }
.metrica-nota { font-size:var(--t-sm); color:var(--cinza); margin-top:var(--e-3); line-height:1.5; }

/* ---- PÍLULA DE ESTADO ---- */
.pilula {
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:var(--e-1) var(--e-3);
  border-radius:var(--r-pilula);
  font-family:var(--disp); font-weight:600;
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:1px;
  white-space:nowrap;
}
.pilula::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pilula.aceita     { color:var(--ok);        background:var(--ok-fundo); }
.pilula.andamento  { color:var(--andamento); background:var(--andamento-fundo); }
.pilula.revisao    { color:var(--revisao);   background:var(--revisao-fundo); }
.pilula.bloqueada  { color:var(--bloqueado); background:var(--bloqueado-fundo); }
.pilula.pendente   { color:var(--inerte);    background:var(--inerte-fundo); }

/* ---- BARRA DE PROGRESSO ---- */
.barra { height:6px; background:var(--fundo-baixo); border-radius:var(--r-pilula); overflow:hidden; }
.barra-fita { height:100%; background:var(--gradiente); border-radius:var(--r-pilula); transition:width .4s ease; }

/* ---- BOTÃO ---- */
.btn {
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:var(--e-3) var(--e-5); line-height:1.2;
  border-radius:var(--r-pilula); border:none; cursor:pointer;
  font-family:var(--disp); font-weight:700; font-size:var(--t-sm);
  letter-spacing:-0.01em; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--sombra-alta); }
.btn-principal { background:var(--tinta); color:var(--fundo); }
.btn-acento    { background:var(--gradiente); color:#fff; }
.btn-linha     { background:transparent; color:var(--tinta); border:1px solid var(--linha-forte); }

/* ---- TABELA ----
   Em ecran largo comporta-se como tabela. Abaixo de 760px cada
   linha vira cartao empilhado: nada de rolagem lateral nem
   colunas cortadas. O rotulo vem de data-rotulo. */
.tabela { width:100%; border-collapse:collapse; }
.tabela th {
  font-family:var(--disp); font-weight:700; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:1px; color:var(--cinza);
  text-align:left; padding:var(--e-3); border-bottom:1px solid var(--linha-forte);
}
.tabela td { padding:var(--e-4) var(--e-3); border-bottom:1px solid var(--linha); vertical-align:top; }
.tabela tbody tr:hover { background:var(--fundo-baixo); }

@media (max-width:760px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display:block; width:100%; }
  .tabela thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

  .tabela tbody tr {
    background:var(--fundo-alto);
    border:1px solid var(--linha);
    border-radius:var(--r-cartao);
    padding:var(--e-4);
    margin-bottom:var(--e-3);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:var(--e-2) var(--e-4);
    align-items:center;
  }
  .tabela tbody tr:hover { background:var(--fundo-alto); }
  .tabela td { border:none; padding:0; }

  /* codigo da entrega ancora no canto, titulo ao lado */
  .tabela td[data-rotulo="#"] { grid-row:1; grid-column:1; font-size:var(--t-lg); }
  .tabela td[data-rotulo="Entrega"] { grid-row:1; grid-column:2; }

  /* os restantes ocupam a largura toda, com rotulo visivel */
  .tabela td[data-rotulo="Estado"],
  .tabela td[data-rotulo="Progresso"],
  .tabela td[data-rotulo="Tempo"] {
    grid-column:1 / -1;
    width:auto !important;
    display:flex; align-items:center; gap:var(--e-3);
    padding-top:var(--e-2);
    border-top:1px solid var(--linha);
  }
  .tabela td[data-rotulo="Estado"] { border-top:none; padding-top:var(--e-3); }
  .tabela td[data-rotulo]::before {
    content:attr(data-rotulo);
    font-family:var(--disp); font-weight:700; font-size:var(--t-xs);
    text-transform:uppercase; letter-spacing:1px; color:var(--cinza);
    flex:0 0 84px;
  }
  .tabela td[data-rotulo="#"]::before,
  .tabela td[data-rotulo="Entrega"]::before { display:none; }
  .tabela td[data-rotulo="Progresso"] > div { flex:1; }
}

/* ---- COMENTÁRIO ----
   A distinção interno/partilhado é deliberadamente forte.
   Ver secção 5 da spec: não é uma caixa discreta.
   Compacto de propósito: cabem três sem rolar. */
.comentario { padding:var(--e-4); border-radius:var(--r-campo); margin-bottom:var(--e-3); font-size:var(--t-sm); line-height:1.5; }
.comentario-corpo {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.comentario-partilhado { background:var(--fundo-alto); border:1px solid var(--linha); }
.comentario-interno {
  background:#fdf4e3;
  border:1px solid rgba(138,90,0,0.25);
  border-left:4px solid var(--revisao);
}
.comentario-cabeca {
  display:flex; align-items:center; gap:var(--e-3);
  margin-bottom:var(--e-2); font-size:var(--t-xs);
}
.comentario-autor { font-family:var(--disp); font-weight:700; }
.comentario-data { color:var(--cinza); font-size:var(--t-xs); }
.etiqueta-interno {
  margin-left:auto;
  font-family:var(--disp); font-weight:700; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:1px;
  color:var(--revisao); background:rgba(138,90,0,0.12);
  padding:2px var(--e-2); border-radius:var(--r-pilula);
}

/* ---- CAMPOS ---- */
.campo {
  width:100%; padding:var(--e-3) var(--e-4);
  border:1px solid var(--linha-forte); border-radius:var(--r-campo);
  font-family:var(--corpo); font-size:var(--t-md);
  background:var(--fundo-alto); color:var(--tinta);
}
.campo:focus { outline:2px solid var(--acento); outline-offset:1px; border-color:transparent; }

/* ---- FOCO GLOBAL — acessibilidade ---- */
:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }

/* ---- IMPRESSÃO — os relatórios saem daqui ---- */
@media print {
  body::before { display:none; }
  .topo, .btn { display:none; }
  .cartao { box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
}