/* ===========================================================================
   O CAIS · ADMINISTRAÇÃO — a folha de estilo da casa
   ===========================================================================
   ⭐ TUDO O QUE É COR, ESPAÇO, CANTO E SOMBRA VIVE AQUI EM CIMA, num sítio só.
      Mudar o roxo da casa é mudar UMA linha, e muda no painel inteiro.
      [[ilha-um-sitio-so]]

   ⛔⛔ ESTAVA TUDO NUM `<style>` DENTRO DO HTML, e lá dentro havia DUAS cores
      inventadas — `--risca` (7 usos) e `--cor` (2 usos) — que NUNCA foram
      definidas em lado nenhum. Em CSS isso não dá erro: a declaração inteira
      é deitada fora em silêncio. O resultado, no ar:
        · os cartões dos caixas ficavam SEM BORDA nenhuma (`.cx`, `.soma`)
        · as linhas das tabelas ficavam SEM RISCA a separar (`.cx__l`, `.tab td`)
        · e a aba onde ele está NÃO ficava roxa (`.aba--aqui`)
      Era exactamente isto que fazia o ecrã dos caixas ler-se como uma papa.
      [[ilha-hidden-vs-display]] é a mesma família: CSS que falha calado.

   ⚠️ Telemóvel primeiro. Ele abre isto do telefone, na loja, com pressa.
      Nada de modo escuro — foi decidido, e mantém-se.
   =========================================================================== */

:root {
  /* ── A MARCA ─────────────────────────────────────────────────────────── */
  --ilha-cor:        #9727B3;   /* o roxo da casa */
  --ilha-cor-fundo:  #f7ecfa;   /* o mesmo roxo, lavado, para fundos */
  --ilha-cor-forte:  #7a1f92;   /* premido */
  --ilha-cor2:       #EF892E;   /* o laranja: só para o que ESPERA por ele */
  --ilha-cor2-fundo: #fff6ec;

  /* ── DIZER SIM, NÃO E CUIDADO ────────────────────────────────────────── */
  --bom:        #14622a;  --bom-fundo:  #eaf7ed;
  --mau:        #c0181f;  --mau-fundo:  #fdecec;
  --atencao:    #a95a10;  --atencao-fundo: #fff8ec;

  /* ── TINTA E PAPEL ───────────────────────────────────────────────────── */
  /* ⚠️ MEDIDAS, não gosto. As três tintas foram calculadas contra o papel
     (#fff) e contra o fundo da página (#fafafb), e todas passam os 4,5:1 que a
     norma pede para texto corrido. O cinzento claro que aqui estava — #94949e —
     dava 2,88:1: lia-se bem no Mac, e no telemóvel ao sol do balcão, não.
     Quem lê isto tem 40 e tal anos e está com pressa. */
  --texto:  #16161a;      /* o que se lê        · 17,3:1 */
  --fraco:  #5c5c64;      /* o que acompanha    ·  6,3:1 */
  --tenue:  #717179;      /* o que quase não conta · 4,6:1 */
  --fundo:  #fafafb;      /* o papel da página */
  --papel:  #ffffff;      /* o papel dos cartões */
  --risca:  #e6e6ea;      /* ⭐ a risca. ERA ESTA QUE FALTAVA. */
  --risca-forte: #d3d3da;

  /* ── ESPAÇO ──────────────────────────────────────────────────────────── */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  /* ── CANTOS ──────────────────────────────────────────────────────────── */
  --raio-p: 8px; --raio: 12px; --raio-g: 16px; --raio-pastilha: 999px;

  /* ── SOMBRAS. Discretas: isto é uma ferramenta, não uma montra. ──────── */
  --sombra-1: 0 1px 2px rgba(20, 20, 30, .05);
  --sombra-2: 0 2px 8px rgba(20, 20, 30, .07), 0 1px 2px rgba(20, 20, 30, .05);
  --sombra-3: 0 18px 50px rgba(20, 20, 30, .28);

  /* ── LETRA ───────────────────────────────────────────────────────────── */
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-marca: "Belleza", var(--letra);

  /* ⚠️ Os nomes VELHOS continuam a valer. Havia HTML e JavaScript à espera
     deles; tirá-los era partir o ecrã para ganhar arrumação. */
  --roxo: var(--ilha-cor);
  --laranja: var(--ilha-cor2);
  --linha: var(--risca);
  --cor: var(--ilha-cor);   /* ⭐ a segunda que faltava */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
  padding: 0 0 var(--e7);
  /* ⚠️ O telemóvel do Silva tem entalhe. Sem isto o conteúdo mete-se debaixo
     da barra de baixo e o último botão da página fica só meio a apanhar. */
  padding-bottom: calc(var(--e7) + env(safe-area-inset-bottom, 0px));
}

.folha { max-width: 640px; margin: 0 auto; padding: 0 var(--e4); }
/* ⚠️ A entrada não alarga com a folha: no computador os campos iam a 1092 px
   com o Entrar pequeno à esquerda. Ao telemóvel não muda nada. */
#entrada { max-width: 420px; margin: 0 auto; }

/* ⛔ NUNCA se esconde com `display:none` à mão — é sempre o `hidden`, e é o
   `hidden` que manda. [[ilha-hidden-vs-display]] */
[hidden] { display: none !important; }

/* ===========================================================================
   TIPOGRAFIA
   =========================================================================== */
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: var(--e5) 0 var(--e1); }
h2 { font-size: 18px; font-weight: 700; margin: var(--e5) 0 var(--e2); }
.sub { color: var(--fraco); margin: 0 0 var(--e5); font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   O TOPO — fica colado, para trocar de página sem subir a rolar
   =========================================================================== */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--risca);
  padding-top: env(safe-area-inset-top, 0px);
}
.topo__folha { max-width: 640px; margin: 0 auto; padding: 0 var(--e4); }
.marca { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) 0 var(--e2); }
.marca__nome { font-family: var(--letra-marca); font-size: 21px; color: var(--ilha-cor); letter-spacing: .01em; }
.marca__onde { font-size: 13px; color: var(--fraco); font-weight: 600; }
.marca__quem { margin-left: auto; font-size: 14px; color: var(--fraco); }

/* ── O MENU. Ao telemóvel roda na horizontal em vez de partir linhas. ───── */
.abas {
  display: flex; gap: var(--e1); overflow-x: auto; margin: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; margin: 0; background: none; color: var(--fraco);
  border: 0; border-bottom: 2.5px solid transparent; border-radius: 0;
  padding: var(--e3) var(--e3) 10px; font-size: 15px; font-weight: 600;
  white-space: nowrap; cursor: pointer; min-height: 0;
  transition: color .15s ease, border-color .15s ease;
}
.aba:hover { color: var(--texto); }
.aba .icone { width: 17px; height: 17px; }
.aba--aqui { color: var(--ilha-cor); border-bottom-color: var(--ilha-cor); }

/* ⭐ Uma bolinha laranja na aba quando há alguém à espera de resposta. */
.aba__pinta {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ilha-cor2);
  box-shadow: 0 0 0 3px var(--ilha-cor2-fundo);
}

/* ===========================================================================
   OS BOTÕES
   =========================================================================== */
button { font: inherit; cursor: pointer; }

.principal, .pequeno, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 700; border: 1px solid transparent; border-radius: var(--raio);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.principal {
  width: 100%; background: var(--ilha-cor); color: #fff;
  font-size: 16px; padding: 14px 18px; margin-top: var(--e4); min-height: 50px;
  box-shadow: var(--sombra-1);
}
.principal:hover:not([disabled]) { background: var(--ilha-cor-forte); }
.principal[disabled], .pequeno[disabled] { opacity: .45; cursor: not-allowed; }

.pequeno {
  background: var(--papel); color: var(--texto); border-color: var(--risca-forte);
  padding: 9px 13px; font-size: 14px; min-height: 40px; box-shadow: var(--sombra-1);
}
.pequeno:hover:not([disabled]) { background: var(--fundo); border-color: var(--tenue); }
.pequeno--mau { background: var(--mau-fundo); color: var(--mau); border-color: #f6d4d4; }
.pequeno--mau:hover:not([disabled]) { background: #fbdede; }
/* ⭐ O atalho do período que está escolhido fica marcado — senão não se sabe
   se o que está no ecrã é "hoje" ou "os 30 dias" de há bocado. */
.pequeno--aqui { background: var(--ilha-cor); color: #fff; border-color: var(--ilha-cor); }
.pequeno--aqui:hover { background: var(--ilha-cor-forte); }
.pequeno .icone { width: 15px; height: 15px; }

/* ⛔ TECLADO. Sem isto, quem anda de Tab não vê onde está — e não se governa
   um painel de dinheiro às cegas. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--ilha-cor);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* ===========================================================================
   OS CAMPOS
   =========================================================================== */
label { display: block; font-weight: 600; font-size: 14px; margin: var(--e4) 0 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px;   /* ⚠️ 16px ou o iPhone dá zoom */
  padding: 12px 14px; color: var(--texto); background: var(--papel);
  border: 1px solid var(--risca-forte); border-radius: var(--raio);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--ilha-cor);
  box-shadow: 0 0 0 3px var(--ilha-cor-fundo);
}
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ilha-cor); flex: none; }
/* ⭐ As escolhas de uma resposta só (o crédito: «Todos os meses» ou «Só desta vez»). Sem isto apanhavam o
   `width: 100%` dos campos e as palavras partiam-se uma por linha. 44px de toque. */
input[type="radio"] { width: 22px; height: 22px; accent-color: var(--ilha-cor); flex: none; margin: 0; padding: 0; }
.escolhas { border: 0; padding: 0; margin: var(--e3) 0 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.escolhas legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.escolha { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 44px; font-weight: 600; cursor: pointer; }
textarea { resize: vertical; min-height: 92px; }
::placeholder { color: var(--tenue); }

/* ⭐ Um campo que está mal diz o que está mal, por baixo dele. */
input.campo--mau, textarea.campo--mau { border-color: var(--mau); background: #fffbfb; }
.campo__erro { color: var(--mau); font-size: 13px; font-weight: 600; margin: 6px 0 0; }

/* ===========================================================================
   OS RECADOS
   =========================================================================== */
.aviso {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: 12px 14px; border-radius: var(--raio); margin: var(--e4) 0;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
}
.aviso--mau { background: var(--mau-fundo); color: var(--mau); border-color: #f6d4d4; }
.aviso--bom { background: var(--bom-fundo); color: var(--bom); border-color: #cce8d4; }
.aviso .icone { flex: none; margin-top: 1px; }

/* ⛔ O TEXTO QUE NÃO PODE PASSAR DESPERCEBIDO: uma leitura que falhou, uma
   loja que não entra nos totais. Nunca é uma linha cinzenta discreta. */
.grito {
  display: flex; gap: var(--e2); align-items: flex-start;
  color: var(--mau); font-weight: 700; font-size: 14.5px; line-height: 1.45;
  background: var(--mau-fundo); border: 1px solid #f6d4d4;
  border-radius: var(--raio); padding: 12px 14px; margin: var(--e3) 0;
}
.grito--atencao { color: var(--atencao); background: var(--atencao-fundo); border-color: #f3ddb8; }
.grito .icone { flex: none; margin-top: 1px; }

/* ===========================================================================
   CARTÕES
   =========================================================================== */
.cartao, .loja, .cx, .soma, .regras {
  background: var(--papel); border: 1px solid var(--risca);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1);
}
.loja { padding: var(--e4) var(--e4) var(--e3); margin-bottom: var(--e3); }
.loja--muda { border-color: #f0c9c9; background: #fffbfb; }

.loja__topo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.loja__nome { font-weight: 700; font-size: 17px; }
/* ⭐⭐ O NÚMERO POR QUE ELE ABRE O PAINEL. Do tamanho do que vale, e igual ao
   do cartão dos caixas — as duas páginas leem-se da mesma maneira. */
.loja__grande {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.loja__quantas { color: var(--fraco); font-size: 14px; margin: 2px 0 var(--e3); }
.loja--muda .loja__grande { color: var(--tenue); }

.loja__linhas > div {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: 6px 0; border-top: 1px solid var(--risca); font-variant-numeric: tabular-nums;
}
.loja__linhas > div:first-child { border-top: 0; }
.loja__linhas span { color: var(--fraco); }
.loja__linhas b { white-space: nowrap; }
.loja__pe {
  margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--risca);
  font-size: 13px; color: var(--tenue);
}

/* ── Os selos de estado ─────────────────────────────────────────────────── */
.selo, .etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--raio-pastilha); white-space: nowrap;
}
.selo { margin-left: auto; color: #fff; }
.selo--bom   { background: var(--bom-fundo);  color: var(--bom);      border: 1px solid #cce8d4; }
.selo--calmo { background: #f1f1f4;           color: var(--fraco);    border: 1px solid var(--risca); }
.selo--mau   { background: var(--mau-fundo);  color: var(--mau);      border: 1px solid #f6d4d4; }
.selo__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ⭐ A loja sem sinal pisca. Não é enfeite: é a única maneira de dar por um Pi
   desligado sem ser pela menina a telefonar. */
.selo--mau .selo__ponto { animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .selo--mau .selo__ponto { animation: none; } }

.etiqueta { background: var(--ilha-cor-fundo); color: var(--ilha-cor); vertical-align: 2px; }

/* ===========================================================================
   OS PEDIDOS — alguém está PARADO ao balcão à espera desta decisão
   =========================================================================== */
.pedido {
  border: 1.5px solid var(--ilha-cor2); border-radius: var(--raio-g);
  background: var(--ilha-cor2-fundo); padding: var(--e4);
  margin-bottom: var(--e3); box-shadow: var(--sombra-2);
}
.pedido__topo { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.pedido__topo .icone { color: var(--ilha-cor2); }
.pedido__que { margin: var(--e2) 0 var(--e1); }
/* ⭐ O detalhe do pedido é o que ele decide (o artigo, a percentagem e o tecto):
   com a tinta do texto e peso 600, e não com o cinzento das legendas. */
.pedido .pedido__detalhe { color: var(--texto); font-weight: 600; }
.pedido__accoes { display: flex; gap: var(--e2); margin-top: var(--e3); }
.pedido__accoes .principal { width: auto; flex: 1; margin-top: 0; padding: 12px 16px; }
.pedido__accoes .pequeno { min-height: 50px; padding: 12px 18px; }

/* ===========================================================================
   AS OPERADORAS
   =========================================================================== */
.pessoa {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--risca);
}
.pessoa__nome { font-weight: 700; font-size: 16px; }
.pessoa__meta { color: var(--fraco); font-size: 13.5px; display: flex; align-items: center; gap: 5px; }
.pessoa__meta .icone { width: 14px; height: 14px; color: var(--tenue); }
.pessoa__accoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pessoa--fora .pessoa__nome { color: var(--tenue); text-decoration: line-through; }

.regras { padding: var(--e4); margin: var(--e4) 0; }
.regras__titulo { font-weight: 800; font-size: 16px; margin-bottom: var(--e3); }
.regras__grupo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  margin: var(--e4) 0 var(--e1);
}
.regras__grupo--sim { color: var(--bom); }
.regras__grupo--pedir { color: var(--atencao); }
.regras__grupo--depende { color: var(--fraco); }
.regras__lista { margin: 0; padding-left: 22px; }
.regras__lista li { padding: 3px 0; }

details { margin-top: var(--e6); border-top: 1px solid var(--risca); padding-top: var(--e4); }
summary {
  font-weight: 700; cursor: pointer; font-size: 16px; list-style: none;
  display: flex; align-items: center; gap: 7px; padding: var(--e2) 0;
}
summary::-webkit-details-marker { display: none; }
summary .icone { color: var(--ilha-cor); }

/* ===========================================================================
   O CALENDÁRIO DOS CAIXAS E O RESUMO DO DIA (Silva, 13/10/2026)
   ===========================================================================
   ⭐ Um quadrado por dia, com o que se vendeu, a fita das lojas e a cara do dia (certa, falta, sobra,
   aberta). Por baixo, o dia escolhido: um cartão por loja, FECHADO, que abre ao clique.
   ⚠️ As cores das lojas só servem a fita e a pinta ao lado do nome; o estado nunca se diz só pela cor,
   leva sempre um desenho e, no resumo, a palavra. */
:root { --loja-azeitao: #2f86c9; --loja-samora: #2a9647; --loja-amora: #e07b1f; }
/* A cor da loja é uma classe: quem não tem a sua (uma loja nova) fica a cinzento. */
.lj__pinta, .cal__fita i { background: var(--tenue); }
.lj__pinta.loja--azeitao, .cal__fita i.loja--azeitao { background: var(--loja-azeitao); }
.lj__pinta.loja--samora, .cal__fita i.loja--samora { background: var(--loja-samora); }
.lj__pinta.loja--amora, .cal__fita i.loja--amora { background: var(--loja-amora); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tom--bom { color: var(--bom); } .tom--mau { color: var(--mau); } .tom--atencao { color: var(--atencao); }

.cal { background: var(--papel); border: 1px solid var(--risca); border-radius: var(--raio-g); box-shadow: var(--sombra-1); padding: var(--e4); }
.cal__nav { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
/* ⭐ A barra do cabeçalho, igual à das vendas da Bússola (Silva, 13/10/2026): borda roxa, fundo roxo muito leve,
   o período à esquerda em maiúsculas pequenas e o total com a contagem à direita, na mesma linha de base. */
.cal__barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e1) var(--e4);
  margin-top: var(--e3); padding: var(--e3) 14px; border: 1px solid var(--ilha-cor); border-radius: var(--raio-p);
  background: var(--ilha-cor-fundo); background: color-mix(in srgb, var(--ilha-cor-fundo) 40%, transparent);
}
.cal__mes { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); }
.cal__nota { font-size: 13px; color: var(--atencao); font-weight: 600; margin-top: var(--e1); }
.cal__nota:empty { display: none; }
/* ⭐ Um cartão por loja, por baixo da barra, como no calendário de vendas da Bússola (Silva, 13/10/2026): a cor da
   loja na borda da esquerda, o vendido no mês em grande, e por baixo as vendas e o talão médio. */
.cal__lojas { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e2); }
.cal__lojas:empty { display: none; }
.cal__loja { display: grid; align-content: start; gap: 1px; min-width: 0; padding: var(--e2) var(--e3); background: var(--papel); border: 1px solid var(--risca); border-left: 3px solid var(--tenue); border-radius: var(--raio-p); font-variant-numeric: tabular-nums; }
.cal__loja.loja--azeitao { border-left-color: var(--loja-azeitao); }
.cal__loja.loja--samora { border-left-color: var(--loja-samora); }
.cal__loja.loja--amora { border-left-color: var(--loja-amora); }
.cal__loja-n { font-size: 14px; font-weight: 700; color: var(--texto); }
.cal__loja b { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--texto); }
.cal__loja span:not(.cal__loja-n) { font-size: 12.5px; color: var(--fraco); }
.cal__loja span.tom--atencao { color: var(--atencao); font-weight: 600; }
.cal__seta { min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; }
#cal-hoje { min-height: 44px; }
.cal__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.cal__total b { font-size: 22px; font-weight: 800; line-height: 1; color: var(--ilha-cor); letter-spacing: -.02em; }
.cal__legenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e3) 0; font-size: 13px; color: var(--fraco); }
.cal__legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.cal__grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__sem { text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); padding-bottom: 2px; }
.cal__espera { min-height: 76px; border-radius: var(--raio-p); }
.cal__dia {
  display: grid; align-content: start; gap: 1px; min-height: 76px; padding: 6px 7px; text-align: left;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--risca); border-radius: var(--raio-p);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; min-width: 0;
}
.cal__dia:hover:not([disabled]) { border-color: var(--tenue); background: var(--papel); }
.cal__dia[aria-pressed="true"] { border-color: var(--ilha-cor); background: var(--ilha-cor-fundo); box-shadow: inset 0 0 0 1px var(--ilha-cor); }
.cal__dia[disabled] { opacity: .45; cursor: not-allowed; }
.cal__n { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--fraco); }
.cal__hoje { color: var(--ilha-cor); }
.cal__v { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cal__q { font-size: 12px; color: var(--fraco); }
.cal__fita { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 3px; background: var(--risca); }
.cal__fita i { display: block; min-width: 2px; }
.cal__estado { display: inline-flex; align-items: center; gap: 6px; }
.cal__estado .icone { width: 15px; height: 15px; stroke-width: 2.4; }
.cal__estado--certa { color: var(--bom); } .cal__estado--falta { color: var(--mau); }
.cal__estado--atencao { color: var(--atencao); } .cal__estado--aberta { color: var(--fraco); }
#cal-recado .grito { margin-top: var(--e3); }

.dia__frases { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e1); }
.dia__frases li { align-items: flex-start; font-weight: 600; }
.dia__frases li .icone { margin-top: 3px; }
.dia__lojas { display: grid; gap: var(--e3); align-items: start; }
@media (min-width: 760px) { .dia__lojas { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } }

/* O cartão da loja: fechado é uma linha; a seta roda quando abre. */
details.lj { margin: 0; padding: 0; border-top: 1px solid var(--risca); }
.lj__s { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e3); row-gap: 2px; align-items: center; padding: var(--e3) var(--e4); min-height: 44px; border-radius: var(--raio-g); }
.lj__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.lj__topo .cx__loja { display: inline-flex; align-items: center; gap: 8px; }
.lj__pinta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lj__e { grid-column: 1; font-size: 13px; font-weight: 700; color: var(--fraco); }
.lj__seta { grid-column: 2; grid-row: 1 / span 2; color: var(--fraco); display: grid; place-items: center; }
.lj__seta .icone { color: inherit; transition: transform .15s; }
details.lj[open] > .lj__s .lj__seta .icone { transform: rotate(180deg); }
details.lj[open] > .lj__s { border-bottom: 1px solid var(--risca); border-radius: var(--raio-g) var(--raio-g) 0 0; }
@media (prefers-reduced-motion: reduce) { .lj__seta .icone { transition: none; } }
.lj__c { padding: var(--e1) var(--e4) var(--e4); }

/* As secções de uma caixa: Abertura, Vendas, Contagem da caixa, Fecho. */
.sec { border: 1px solid var(--risca); border-radius: var(--raio); padding: var(--e2) var(--e3); margin-top: var(--e3); background: var(--fundo); }
.sec--fecho { border-color: var(--risca-forte); }
.sec__t { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); flex-wrap: wrap; padding-bottom: var(--e1); }
.sec__t b { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sec__t span { font-size: 13px; color: var(--fraco); }
.sec__t + .cx__l { border-top: 0; }
.sec .cx__l b { text-align: right; white-space: normal; }
.sec .cx__l--forte b { font-size: 17px; }
.sec .cx__l b.tom--bom, .lj__tab .tom--bom { color: var(--bom); }
.sec .cx__l b.tom--mau, .lj__tab .tom--mau { color: var(--mau); }
.sec .cx__l b.tom--atencao, .lj__tab .tom--atencao { color: var(--atencao); }
.lj__dz { font-size: 13px; font-weight: 800; margin-left: 6px; white-space: nowrap; }
.lj__selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--raio-pastilha); font-size: 13px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.lj__selo .icone { width: 13px; height: 13px; stroke-width: 2.6; }
.lj__selo--bom { background: var(--bom-fundo); color: var(--bom); }
.lj__selo--mau { background: var(--mau-fundo); color: var(--mau); }
.lj__selo--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.lj__tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; font-size: 14px; }
.lj__tab th, .lj__tab td { padding: 6px 0 6px 6px; text-align: right; border-top: 1px solid var(--risca); font-weight: 600; overflow-wrap: anywhere; }
.lj__tab thead th { border-top: 0; font-size: 12px; color: var(--fraco); font-weight: 700; }
.lj__tab th[scope="row"] { text-align: left; padding-left: 0; color: var(--fraco); width: 31%; }
.lj__tab td[colspan] { text-align: left; }
.lj__tot th, .lj__tot td { font-weight: 800; color: var(--texto); }
.lj__tot th[scope="row"] { color: var(--texto); }
.lj__pecas { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 var(--e2); }
.lj__peca { border: 1px solid var(--risca-forte); background: var(--papel); border-radius: var(--raio-p); padding: 2px 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.lj__mais { margin-top: var(--e3); padding-top: var(--e1); }
details.lj__mais > summary { font-size: 14px; min-height: 44px; }

.varios { margin-top: var(--e6); }

@media (max-width: 460px) {
  .cal { padding: var(--e3) var(--e2); }
  .cal__grelha { gap: 3px; }
  .cal__dia { padding: 4px 3px; min-height: 66px; }
  .cal__n { font-size: 11px; }
  .cal__n .cal__estado .icone { width: 12px; height: 12px; }
  .cal__v { font-size: 13px; }
  .cal__q { font-size: 11px; }
  /* Ao telemóvel o «hoje» não cabe ao lado do número: desce para a linha de baixo, sem o ponto. */
  .cal__hoje-ponto { display: none; }
  .cal__hoje-diz { display: block; font-size: 10px; line-height: 1; }
  .lj__tab { font-size: 13px; }
}

/* ===========================================================================
   OS CAIXAS
   =========================================================================== */
.filtro { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-bottom: var(--e3); }
.filtro label { margin: 0; font-weight: 600; color: var(--fraco); }
/* ⚠️ `min-width:0` e `flex:1`: sem isto os dois campos de data não cabem na
   linha do telemóvel e o "a" do meio ficava órfão numa linha sozinho. */
.filtro input[type="date"] { width: auto; flex: 1 1 130px; min-width: 0; margin: 0; min-height: 40px; }

.somas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e2); margin: var(--e1) 0 var(--e5); }
.soma { padding: var(--e3) var(--e4); }
.soma__r { font-size: 12.5px; color: var(--fraco); font-weight: 600; }
.soma__v { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.cx { padding: var(--e4) var(--e4) var(--e3); margin-bottom: var(--e3); }
.cx__topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e2); padding-bottom: var(--e3); border-bottom: 1px solid var(--risca);
}
.cx__loja { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.cx__vendido { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; }
.cx__h {
  font-size: 12px; color: var(--fraco); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin: var(--e4) 0 var(--e1);
}
.cx__l {
  display: flex; justify-content: space-between; gap: var(--e3); padding: 7px 0;
  border-top: 1px solid var(--risca); font-variant-numeric: tabular-nums;
}
.cx__l:first-of-type, .cx__h + .cx__l { border-top: 0; }
.cx__l span { color: var(--fraco); }
.cx__l b { white-space: nowrap; color: var(--texto); }
.cx__nada { color: var(--tenue); font-size: 14px; padding: var(--e1) 0; }
/* O fecho em palavras, antes dos números (04/10/2026): «FALTA DINHEIRO», «SOBRA DINHEIRO», «CAIXA CERTA». */
.cx__veredicto { border-radius: 8px; padding: var(--e2) var(--e3); margin: var(--e2) 0; overflow-wrap: anywhere; }
.cx__veredicto b { display: block; font-size: 16px; }
.cx__veredicto span { display: block; font-size: 14px; color: var(--texto); margin-top: 2px; }
.cx__veredicto--bom { background: var(--bom-fundo); }      .cx__veredicto--bom b { color: var(--bom); }
.cx__veredicto--mau { background: var(--mau-fundo); }      .cx__veredicto--mau b { color: var(--mau); }
.cx__veredicto--atencao { background: var(--atencao-fundo); } .cx__veredicto--atencao b { color: var(--atencao); }
.cx__veredicto + .cx__l { border-top: 0; }
/* O talão do fecho, linha a linha, como sai no papel (04/10/2026). */
.cx__talao { border: 1px solid var(--risca); border-radius: 8px; padding: var(--e2) var(--e3); margin: var(--e2) 0; }
.cx__talao__t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); }
.cx__talao__s { font-size: 13px; font-weight: 700; color: var(--fraco); margin-top: var(--e2); }
.cx__talao .cx__l { padding: 5px 0; }
.cx__talao__s + .cx__l { border-top: 0; }
.cx__l--forte span { color: var(--texto); font-weight: 700; }
.cx__desc { padding: var(--e2) 0; border-top: 1px solid var(--risca); }
.cx__h + .cx__desc { border-top: 0; }
.cx__desc__c { display: flex; justify-content: space-between; gap: var(--e2); font-weight: 700; }
.cx__desc__q { font-size: 13px; color: var(--fraco); font-weight: 400; }

.tab { width: 100%; border-collapse: collapse; margin-bottom: var(--e5); font-size: 15px; }
.tab th { text-align: left; font-size: 12.5px; color: var(--fraco); font-weight: 700; padding: 6px 8px; }
.tab td { padding: 9px 8px; border-top: 1px solid var(--risca); vertical-align: top; }
.tab td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tab__vazia { color: var(--tenue); padding: var(--e3) var(--e2); }
.artigo { display: block; font-size: 13px; color: var(--fraco); }

/* ===========================================================================
   ⭐ À ESPERA, E VAZIO — as duas coisas que um ecrã tem de saber dizer
   ===========================================================================
   ⛔ "não sei" ≠ "não tem". Um ecrã que ainda não leu NÃO se pode parecer com
      um ecrã que leu e não encontrou nada. [[ilha-nao-sei-vs-nao-tem]] */
.esqueleto {
  background: linear-gradient(90deg, #eeeef2 25%, #f6f6f9 50%, #eeeef2 75%);
  background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--raio-p); height: 14px;
}
@keyframes brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }
.esqueleto--cartao {
  height: auto; background: var(--papel); border: 1px solid var(--risca);
  border-radius: var(--raio-g); padding: var(--e4); margin-bottom: var(--e3); animation: none;
}
.esqueleto--titulo { height: 19px; width: 45%; margin-bottom: var(--e3); }
.esqueleto--linha  { height: 13px; margin-top: 11px; }
.esqueleto--curta  { width: 62%; }

.vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e2); padding: var(--e6) var(--e4); color: var(--fraco);
  background: var(--papel); border: 1px dashed var(--risca-forte); border-radius: var(--raio-g);
}
.vazio .icone { width: 26px; height: 26px; color: var(--tenue); }
.vazio__t { font-weight: 700; color: var(--texto); }
.vazio__p { font-size: 14px; max-width: 34ch; margin: 0; }

/* ===========================================================================
   OS ÍCONES — desenhados aqui dentro, não vêm da internet
   ===========================================================================
   ⚠️ Nada de CDN: o painel abre-se na loja, com a internet que houver, e um
      ícone que não chega deixa botões sem nada lá dentro. */
.icone { width: 18px; height: 18px; flex: none; stroke-width: 2; }

/* ===========================================================================
   ⭐ ECRÃS GRANDES — o telemóvel manda, mas ele também abre isto no computador
   ===========================================================================
   ⚠️ Não havia UM `@media` no painel inteiro: no computador eram 620 px de
      coluna no meio de um ecrã vazio, e os cartões das lojas em fila indiana. */
@media (min-width: 760px) {
  .folha, .topo__folha { max-width: 1000px; padding: 0 var(--e5); }
  body { font-size: 16px; }
  h1 { font-size: 28px; }
  #lojas, #rasto { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--e3); align-items: start; }
  #lojas > .loja, #rasto > .cx { margin-bottom: 0; }
  /* ⚠️ Os avisos e os totais atravessam a grelha toda: um "falta uma loja"
     espremido numa coluna passa despercebido. */
  #rasto > .somas, #rasto > .grito, #rasto > .cx__nada, #rasto > .vazio,
  #lojas > .somas, #lojas > .grito, #lojas > .vazio { grid-column: 1 / -1; }
  .principal { width: auto; min-width: 220px; }
  .pedido__accoes .principal { min-width: 0; }
}
@media (min-width: 1180px) {
  .folha, .topo__folha { max-width: 1140px; }
}

/* ===========================================================================
   A JANELA DE PERGUNTAR
   ===========================================================================
   ⚠️ Estava escrita à mão dentro do JavaScript, em `style.cssText`. Uma janela
      com estilo próprio é uma janela que fica para trás no dia em que a casa
      mudar de cor. */
.janela {
  border: 0; border-radius: var(--raio-g); padding: var(--e5);
  max-width: min(430px, 92vw); box-shadow: var(--sombra-3);
  color: var(--texto); font: inherit; background: var(--papel);
}
.janela::backdrop { background: rgba(20, 20, 30, .45); }
.janela__t { font-weight: 800; font-size: 19px; margin-bottom: var(--e3); }
.janela__pe { display: flex; gap: var(--e2); margin-top: var(--e5); }
.janela__pe > button { flex: 1; min-height: 48px; margin-top: 0; width: auto; }

/* ⭐ Uma linha para tocar: a caixa e o nome da loja, com área a sério.
   ⚠️ 48 px de alto não é enfeite — é o dedo de quem está atrás do balcão. */
.escolha {
  display: flex; gap: var(--e3); align-items: center;
  padding: 10px 2px; font-size: 16px; font-weight: 500; margin: 0;
  min-height: 48px; cursor: pointer;
}

/* ===========================================================================
   ⚠️ MEDIDO NO ECRÃ, NÃO A OLHO   [[ilha-testar-o-que-se-ve]]
   ===========================================================================
   Num telemóvel de 375 px o menu pedia 460 px e só tinha 343: a quarta aba —
   o DESCONTO, a que manda no dinheiro das três lojas — ficava fora do ecrã,
   sem nada a dizer que estava ali. Rolar de lado só descobre quem já sabe.
   As quatro repartem agora a largura e cabem todas. */
@media (max-width: 460px) {
  .aba { flex: 1 1 auto; justify-content: center; padding: 12px 6px; font-size: 14px; gap: 5px; }
  /* ⚠️ Com os ícones ainda pedia 382 px para 343. Ao telemóvel a PALAVRA
     ganha ao desenho: "Desconto" cortado ao meio não se lê de maneira nenhuma,
     e um ícone sozinho obriga a adivinhar. Os ícones voltam no tablet. */
  .aba .icone { display: none; }
  .marca__nome { font-size: 19px; }
}

/* ⚠️ O detalhe do pedido levava os 24 px de fundo que valem para as legendas
   soltas da página, e abria um buraco entre "2,40 €" e "expira em 3 min" —
   a ler como se faltasse ali alguma coisa. */
.pedido__que .sub, .pedido .sub { margin-bottom: 0; }