/* HUB: o ranking anônimo das comandas (patch 18). Usado na página /hub e na aba HUB do app.
   Só variáveis de cor (--papel, --tinta, --cinza...): no app ele pega o design de quem está vendo (Recibo, Noturno, Kraft). */
.hub{ display:grid; gap:12px; container-type:inline-size; }
.hub-modos{ display:grid; grid-template-columns:repeat(3, 1fr); border:1.5px solid var(--tinta); background:var(--papel); }
.hub-modos button{ min-height:46px; border:0; border-left:1.5px solid var(--tinta); background:transparent; font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta); cursor:pointer; transition:transform 160ms var(--ease-out); }
.hub-modos button:first-child{ border-left:0; }
.hub-modos button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); }
.hub-modos button:active{ transform:scale(.97); }
.hub-campos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hub-campos.com-pais .hub-busca{ grid-column:1 / -1; }   /* com o País são 5 campos: a busca ocupa a linha inteira */
@container (min-width:640px){
  .hub-campos{ grid-template-columns:1fr 1fr 1fr 1.3fr; }
  .hub-campos.com-pais{ grid-template-columns:1fr 1fr 1fr 1fr 1.3fr; }
  .hub-campos.com-pais .hub-busca{ grid-column:auto; }
}
.hub-campo{ display:grid; gap:4px; min-width:0; }
.hub-campo[hidden]{ display:none; }
.hub-campo label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza); }
.hub-campo .sel{ position:relative; }
.hub-campo .sel::after{ content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:2px solid var(--tinta); border-bottom:2px solid var(--tinta);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.hub-campo select, .hub-campo input{ width:100%; min-height:46px; margin:0; padding:0 12px; border:1.5px solid var(--tinta); border-radius:0; background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:14px; }
.hub-campo select{ appearance:none; -webkit-appearance:none; padding-right:36px; }

.hub-topo{ text-align:center; }
.hub-topo b{ display:block; font-size:17px; letter-spacing:.2em; text-transform:uppercase; }
.hub-topo span{ display:block; font-size:13px; color:var(--cinza); margin-top:4px; }
.hub-picote{ border-top:2px dashed var(--pontilhado); margin:18px 0; }
.hub-rot{ display:flex; justify-content:space-between; gap:12px; margin:0 0 4px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cinza); }

.hub-lista{ list-style:none; margin:0; padding:0; }
.hub-lista li{ border-bottom:1px dashed var(--pontilhado); }
.hub-lista li:last-child{ border-bottom:0; }
.hub-lista summary{ display:grid; grid-template-columns:2.2em 1fr; gap:0 6px; padding:12px 0; cursor:pointer; list-style:none; }
.hub-lista summary::-webkit-details-marker{ display:none; }
.hub-pos{ font-size:13px; color:var(--cinza); padding-top:2px; font-variant-numeric:tabular-nums; }
.hub-lin{ display:flex; align-items:baseline; gap:.5em; }
.hub-lin::after{ content:""; order:1; flex:1 1 1em; border-bottom:2px dotted var(--pontilhado); position:relative; top:-.3em; }
.hub-lin b{ min-width:0; font-size:16px; letter-spacing:-.01em; overflow-wrap:anywhere; }
.hub-nt{ order:2; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.hub-meta{ display:block; margin-top:3px; font-size:12px; color:var(--cinza); }
.hub-meta .mais{ white-space:nowrap; }
.hub-meta .mais::before{ content:"+ notas"; text-decoration:underline; text-underline-offset:3px; }
details[open] .hub-meta .mais::before{ content:"− notas"; }
.hub-notas{ margin:0 0 14px 2.2em; padding:10px 12px; background:var(--realce); font-size:13px; }
.hub-linha{ display:flex; align-items:baseline; gap:.5em; padding:3px 0; }
.hub-linha::after{ content:""; order:1; flex:1 1 1em; border-bottom:2px dotted var(--pontilhado); position:relative; top:-.3em; }
.hub-linha span:last-child{ order:2; font-weight:700; font-variant-numeric:tabular-nums; }
.hub-linha.forte span{ font-weight:700; }
.hub-maps{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta); }
@media (hover:hover) and (pointer:fine){ .hub-lista summary:hover{ background:var(--realce); } }

.hub-vazio{ text-align:center; padding:26px 0 8px; color:var(--cinza); font-size:14px; }
.hub-vazio b{ display:block; color:var(--tinta); font-size:16px; margin-bottom:6px; }
.hub-vazio.erro b{ color:var(--carimbo); }
.hub-btn{ margin-top:14px; min-height:44px; padding:0 16px; border:1.5px solid var(--tinta); background:var(--papel); font-family:inherit; font-size:12px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta); cursor:pointer; transition:transform 160ms var(--ease-out); }
.hub-btn:active{ transform:scale(.97); }
.hub-mostrar{ display:block; margin:14px auto 0; }
.hub-mostrar[hidden]{ display:none; }
.hub-regras .hub-linha{ font-size:13px; }
.hub-regras .hub-linha span:first-child{ white-space:nowrap; }
.hub-regras .hub-linha span:last-child{ text-align:right; }