/* central.css — Central do Lojista, direção B "Ficha de balcão"
   (aprovada por Josef em 12/10/2026; prévia em
   .equipe/site-v2-central-lojista/previas/b-ficha.html).
   Usado pela lista (central-do-lojista.html) e pelas páginas de texto
   (central-do-lojista/<slug>.html), ambas geradas por
   scripts/gerar-paginas-blog.js. Carregado depois de base.css.
   O que é só da página de texto fica em central-texto.css.

   Ideia: o fichário que fica no balcão da loja. A Central é uma gaveta de
   fichas; as categorias são as abas; cada ficha traz no topo uma régua com
   marcas (a cor diz a área) e, no pé, o que fazer. A bolinha de área é a
   mesma da Central Visual de Processos. */

:root{
  /* apoio de categoria (verde = Vendas e Produtos, azul = Gestão e Mercado),
     com versões claras para fundo escuro; só marcam categoria, não são
     identidade nova */
  --azul:#2E6DB4;--verde:#2F8A63;--azul-claro:#8DB8EA;--verde-claro:#7FCFA8;
  --ficha:#FFFDF8;
  --borda:rgb(14 30 51 / .16);
  --topo:64px;
}
html{scroll-padding-top:calc(var(--topo) + 1rem)}
body{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- ajustes sobre o cabeçalho/rodapé de base.css ---------- */
:focus-visible{outline:2px solid var(--marinho-800);outline-offset:3px}
.topo :focus-visible,.faixa :focus-visible,.convite :focus-visible,.rodape :focus-visible,.barra :focus-visible{outline-color:var(--ouro)}
.nav a[aria-current="page"]{color:var(--papel);border-color:var(--ouro)}
.rod-grid h2{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ouro-claro);margin-bottom:.7rem}
.rodape,.rod-base{color:rgb(247 245 241 / .72)}
.rod-base a,.rod-equipe{color:inherit}

/* ---------- categoria: bolinha da Central Visual + régua ---------- */
.c-vendas,.c-produtos{--c:var(--verde);--cc:var(--verde-claro)}
.c-gestao,.c-mercado{--c:var(--azul);--cc:var(--azul-claro)}
.c-outra{--c:var(--marinho-800);--cc:var(--ouro-claro)}
/* bolinha cheia (Vendas, Gestão) ou vazada (Produtos, Mercado): a cor se
   repete entre duas categorias, a forma desempata e o nome está sempre escrito */
.bola{width:12px;height:12px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 0 3px var(--vao,var(--papel)),0 0 0 5px var(--c)}
.c-produtos .bola,.c-mercado .bola{background:var(--vao,var(--papel))}
.ficha{--vao:var(--ficha)}

/* régua: linha de base na cor da área, marca miúda a cada 8px e marca
   maior a cada 48px, como a régua de balcão de armarinho */
.regua{height:14px;border-top:3px solid var(--c);
  background:
    repeating-linear-gradient(90deg,var(--c) 0 1.5px,transparent 1.5px 48px) 0 0/100% 11px no-repeat,
    repeating-linear-gradient(90deg,var(--c) 0 1px,transparent 1px 8px) 0 0/100% 5px no-repeat;
  opacity:.9}

/* =====================================================================
   A LISTA — faixa marinho, abas do fichário, gaveta de fichas
   ===================================================================== */
.faixa{background:var(--marinho-900);color:#C9D2DD;border-bottom:1px solid rgb(201 162 75 / .3)}
.faixa-in{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;padding:clamp(2rem,6vw,4.2rem) 0 clamp(1.6rem,4vw,2.4rem)}
.trilha{font-size:.8125rem;color:#C9D2DD}
.trilha a{color:var(--papel)}
.faixa h1{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.7rem,7.5vw,5.2rem);line-height:.98;letter-spacing:-.03em;color:var(--papel)}

/* abas: no computador, encostadas no pé da faixa como divisórias de fichário.
   Sem JavaScript ficam escondidas (atributo hidden) e todas as fichas aparecem. */
.abas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding-bottom:1.2rem}
.abas .todas{grid-column:1 / -1}
.aba{--vao:var(--marinho-900);display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.55rem 1rem;border:1px solid rgb(247 245 241 / .26);border-radius:6px;color:var(--papel);font-size:.9rem;text-align:left;line-height:1.25;transition:background .2s,border-color .2s,color .2s}
.aba .bola{--c:var(--cc)}
.aba:hover{border-color:var(--ouro);background:rgb(247 245 241 / .06)}
.aba[aria-pressed="true"]{--vao:var(--papel);background:var(--papel);color:var(--tinta);border-color:var(--papel);font-weight:500}
.aba[aria-pressed="true"] .bola{--c:var(--c-forte)}
.aba.c-vendas,.aba.c-produtos{--c-forte:var(--verde)}
.aba.c-gestao,.aba.c-mercado{--c-forte:var(--azul)}
.aba .qtd{margin-left:auto;font-size:.8rem}
@media(max-width:479px){.aba{padding:.55rem .75rem;gap:.6rem}.aba .qtd{display:none}.abas .todas .qtd{display:inline}}
@media(min-width:900px){
  .abas{display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin-bottom:-1px}
  .aba{border-radius:6px 6px 0 0;border-bottom-color:transparent;padding:.6rem 1.15rem}
  .aba[aria-pressed="true"]{border-color:var(--papel)}
  .aba .qtd{margin-left:.35rem}
}

.gaveta{padding:clamp(1.8rem,4vw,2.8rem) 0 clamp(3rem,7vw,5rem)}
.gaveta-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;align-items:baseline;margin-bottom:1.3rem;color:var(--suave);font-size:.9rem}
.gaveta-cab strong{color:var(--tinta);font-weight:500}
.fichas{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr));gap:1.4rem}
.vazio{color:var(--suave);padding:1.2rem 0;font-size:.95rem}

.ficha{position:relative;background:var(--ficha);border:1px solid var(--borda);border-radius:4px;display:flex;flex-direction:column;transition:border-color .2s}
.ficha:hover{border-color:var(--marinho-800)}
.ficha:has(h2 a:focus-visible){outline:2px solid var(--marinho-800);outline-offset:4px}
.ficha-in{padding:1.2rem 1.4rem 1.3rem;display:flex;flex-direction:column;flex:1}
@media(min-width:600px){.ficha-in{padding:1.4rem 1.8rem 1.5rem}}
.ficha-cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem}
.cat{display:inline-flex;align-items:center;gap:.75rem;font-size:.86rem;font-weight:500;color:var(--tinta)}
.ficha-n{font-size:.8rem;color:var(--suave);font-variant-numeric:tabular-nums}
.ficha h2{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 36;font-size:clamp(1.35rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--marinho-800);text-wrap:balance}
.ficha h2 a{color:inherit;text-decoration:none}
.ficha h2 a::after{content:"";position:absolute;inset:0}
.ficha h2 a:focus-visible{outline:none}
.ficha:hover h2 a{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:.2em}
.ficha .resumo{margin-top:.6rem;color:var(--suave);font-size:.98rem;line-height:1.6}

/* o verso da ficha: o que fazer, separado por um picote */
.fazer{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed rgb(14 30 51 / .3)}
.fazer-tit{font-size:.8125rem;font-weight:600;color:var(--tinta);margin-bottom:.45rem}
.fazer ol{list-style:none;counter-reset:f}
.fazer li{counter-increment:f;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.5rem;font-size:.92rem;line-height:1.45;color:var(--tinta);padding:.22rem 0}
.fazer li::before{content:counter(f);display:grid;place-items:center;width:1.3rem;height:1.3rem;margin-top:.05rem;border:1.5px solid var(--marinho-800);border-radius:3px;font-size:.72rem;font-weight:600;color:var(--marinho-800)}
.ficha-pe{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:1.1rem;font-size:.82rem;color:var(--suave)}
.ficha-pe .abrir{font-weight:600;color:var(--marinho-800);border-bottom:1.5px solid var(--ouro);padding-bottom:1px}

/* Central ainda sem textos (estado vazio honesto, sem prometer data) */
.vazio-central{position:relative;background:var(--ficha);border:1px solid var(--borda);border-radius:4px;max-width:40rem}
.vazio-central .ficha-in{gap:.8rem;align-items:flex-start}
.vazio-central h2{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 36;font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.2;color:var(--marinho-800)}
.vazio-central p{color:var(--suave);line-height:1.6;max-width:46ch}