/*
* shared/components.css — componentes compartilhados do design system (Sprint 13)
* ------------------------------------------------------------------
* Começa com a TAB BAR canônica: a mesma altura, fonte, peso, padding e
* sublinhado ativo em todos os módulos. Antes cada módulo replicava
* .tabs__tab/.tabs__bar com valores divergentes (13 vs 13.5px, 400 vs 500 vs
* 600, 0.5 vs 1 vs 2px de borda, padding diferente) — por isso pareciam de
* alturas/tamanhos diferentes.
*
* Consome as variáveis do shared/tokens.css. INCLUIR DEPOIS do tokens.css:
*
*
* O módulo NÃO deve redefinir .tabs__bar/.tabs__tab/.tabs__pane localmente (senão a regra
* de página vence e volta a divergir). S45: o apelido .tabs foi aposentado e os
* três consumidores (Alertas, Sincronia, Sugestões) migraram para a barra canônica.
* ------------------------------------------------------------------
*/
/* S45: o apelido .tabs saiu como CLASSE — ele e o .tab-bar eram seletores da
MESMA regra, e o DS absorvia a divergência em vez de resolvê-la.
S46 · BEM: .tabs VOLTA, agora como nome do BLOCO, não como apelido da faixa.
A faixa, o botão e o painel são três peças de UM componente, e nenhuma delas
existe sozinha — em BEM isso as torna elementos, e elemento precisa de bloco.
NENHUMA
nova no HTML: o bloco nomeia a família, não a ancestralidade,
então .tabs__pane segue irmão de .tabs__bar como sempre foi. */
.tabs__bar{
display:flex;
align-items:center;
gap:2px;
background:transparent; /* S38: tab-bar transparente — acompanha o container (page-bg direto ou card --surface); nao conflita em nenhum contexto */
border-bottom:1px solid var(--border);
padding:0 12px;
overflow-x:auto;
overflow-y:hidden;
}
/* S49: a aba nao declarava DISPLAY nenhum. Como a .tabs__bar e flex, a aba ja
era blockificada — mas sem ser ela propria um contexto flex, nao havia gap, e
o icone alinhava por BASELINE (o .icon traz vertical-align:-0.125em). Sem
espacamento no componente, cada consumidor improvisou o seu, e viraram quatro
dialetos: margin-right .35em inline (16 pontos), .4em no helper icL() dos
E-mails, um span.ti + espaco literal no Alertas (e a .ti nao existe em CSS
nenhum) e nada nas abas sem icone. Agora o vao vem daqui, 6px, o mesmo do
.chip e do .button — e o icone passa a alinhar pelo CENTRO.
ATENCAO: esta regra e a remocao dos margin-right inline sao UM commit so.
Com os dois vivendo juntos o vao vira 10,55px em toda aba com icone. */
.tabs__tab{
display:inline-flex;
align-items:center;
gap:6px;
/* S49: 13px, 500 e 1.3 eram numeros crus, e os tres ja existiam no tokens.css
com EXATAMENTE estes valores — --fs-sm, --fw-medium e --lh-tight. Zero
pixel, e por isso este pedaco viaja num commit separado: um passo cuja
conferencia e "nada mudou" nao pode andar junto de um que muda medida. */
font-family:var(--font,inherit);
font-size:var(--fs-sm);
font-weight:var(--fw-medium);
line-height:var(--lh-tight);
padding:11px 16px;
border:none;
background:none;
color:var(--text2);
border-bottom:2px solid transparent;
margin-bottom:-1px;
white-space:nowrap;
cursor:pointer;
transition:color .15s,border-color .15s;
}
.tabs__tab:hover{ color:var(--text); }
.tabs__tab.tabs__tab--active{
color:var(--blue);
border-bottom-color:var(--blue);
font-weight:600;
}
[data-theme="dark"] .tabs__tab.tabs__tab--active{
color:var(--accent);
border-bottom-color:var(--accent);
}
/* A terceira peça da família (S45): .tabs__bar é a faixa, .tabs__tab é o botão,
.tabs__pane é o conteúdo. Faltava no DS, e por isso a área de conteúdo de uma
aba tinha QUATRO nomes: .tab-content (Metas, Roadmap), .tab-pane (Sugestões)
e .pane (Sincronia — que ainda acumulava layout junto do estado).
Só ESTADO: o painel não declara largura, respiro nem fundo. */
.tabs__pane{ display:none; }
.tabs__pane--active{ display:block; }
/* -- Modal de confirmacao/aviso estilizado (uiConfirm/uiAlert) — compartilhado
(S20 · fatoracao; antes duplicado em roadmap/sincronia/metas/index).
S46 · BEM: o bloco era .ui-modal, com .ui-btn dentro. O prefixo "ui-" não
era abreviação — era DESVIO DE COLISÃO: esta família nasceu depois do
.modal canônico e precisava de um nome livre. E "ui-" não descreve nada,
porque o arquivo inteiro é UI. Agora o nome diz o papel: isto é o DIÁLOGO
DE CONFIRMAÇÃO, e o .modal é o modal de formulário. São coisas diferentes,
com valores diferentes — .confirm__button é 13px/600/9-16 e o .btn é
14px/500/6-12 —, e por isso não foram fundidos aqui: fundir muda pixel.
A fusão vira item de backlog, agora com nome próprio em vez de escondida
atrás de um prefixo defensivo. -- */
.confirm__overlay{position:fixed;inset:0;background:var(--overlay);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;animation:uiFade .15s ease}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
.confirm{width:100%;max-width:380px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden;animation:uiPop .18s ease}
@keyframes uiPop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.confirm__head{display:flex;align-items:center;gap:10px;padding:17px 19px 10px}
.confirm__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
/* ⚠ Emitidas por TERNÁRIO em scripts/core/modal.js:26 e :43 —
${o.danger ? "confirm__icon--danger" : "confirm__icon--info"}
NENHUMA das duas aparece como class="…" no markup: grep de atributo não as
acha, e a --info é o ramo PADRÃO de todo uiConfirm/uiAlert não-destrutivo.
Os nomes antigos eram .q e .d, e a auditoria da S46 chegou a dar a .q como
morta antes de ler o modal.js. Nome pela SEVERIDADE e não pelo desenho:
o ícone é sobrescrevível (o.icon), e o fechamento.js:715 já manda um
triângulo de aviso pelo ramo azul — "question" descreveria o conteúdo, que
não é garantido. Os tokens são os mesmos de .alert--info e .badge--info. */
.confirm__icon--info{background:var(--blue2s);color:var(--blue2)}
.confirm__icon--danger{background:var(--red2);color:var(--red)}
/* S38: glifo centrado no circulo — bloco + tamanho explicito, sem o vertical-align
inline (que era so p/ alinhar com texto) atrapalhar a centralizacao do flex. */
.confirm__icon .icon{display:block;width:18px;height:18px;vertical-align:0}
.confirm__title{font-size:15px;font-weight:700;color:var(--text);line-height:1.25}
.confirm__body{padding:0 19px 4px;font-size:13px;color:var(--text2);line-height:1.55}
/* S48 — o corpo do confirm aceita `bodyHtml` com mais de um parágrafo, e não
dizia nada sobre o espaço entre eles: quem passava dois dependia da margem
nativa do navegador. Nas 7 páginas que já zeravam o espaço nativo, dois
parágrafos sairiam COLADOS — só não aconteceu porque o único consumidor com
dois (o desativar do Links) estava numa página sem reset. Com o reset agora
canônico, a regra tem de ser do componente. */
.confirm__body p + p{margin-top:var(--sp-2)}
.confirm__warn{margin:12px 19px 2px;background:var(--orange2);border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);border-radius:8px;padding:9px 11px;font-size:12px;color:var(--gold-fg);line-height:1.45;display:flex;gap:7px}
.confirm__foot{display:flex;justify-content:flex-end;gap:9px;padding:17px 19px}
.confirm__button{font-family:inherit;font-size:13px;font-weight:600;border-radius:8px;padding:9px 16px;cursor:pointer;border:1px solid transparent}
.confirm__button--ghost{background:none;border-color:var(--border);color:var(--text2)}
.confirm__button--primary{background:var(--accent);color:#fff}
.confirm__button--danger{background:var(--red,#A32D2D);color:#fff}
/* ==== BOTAO canonico (S29 . CSS-A) — GXON re-expresso nos tokens ====
S46 · BEM: .btn virou .button. Foi a unica abreviacao MANTIDA na decisao
inicial de 24/08 — "btn" e lingua franca de design system, reconhece-se em
vez de decifrar-se — e o Pablo reverteu a decisao no mesmo dia: se .tbl,
.crumb e .dlist sairam, o .btn sai junto, e o arquivo fica sem excecao.
CUIDADO REGISTRADO: o Shell tem .btn-primary, .btn-sm e .btn-cancel LOCAIS
(styles/pages/index.css:165,197,234), com valores proprios e usadas SOZINHAS,
nunca com .btn. Colidiam de nome com estes modificadores; a colisao morre com
este rename, e as tres seguem intactas ate a sprint das 36 locais.
Familia "acao": sincronia/sugestoes/e-mails/diagramacao usam isto.
Chips de barra (metas/roadmap), controles de tabela (index) e SSO (login)
seguem LOCAIS por ora (papeis distintos; migram depois). */
.button{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-base);font-weight:var(--fw-medium);line-height:1.5;padding:6px 12px;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;transition:color .15s,background-color .15s,border-color .15s,transform .12s}
.button:active{transform:scale(.982)}
.button:disabled,.button.button--disabled{opacity:.65;pointer-events:none}
.button--sm{padding:4px 8px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.button--lg{padding:8px 16px;font-size:var(--fs-lg);border-radius:var(--r-lg)}
/* .btn-icon REDEFINIDO na S45. Ele fixava 36x36 e tinha ZERO consumidores
desde que nasceu (S29) — CSS morto, mesma categoria do .toggle* verde que a
S38 removeu. O 36 fixo tornava a composição impossível: .btn-sm só mexe em
padding, então .btn-icon.btn-sm continuava 36. A saída seria um .btn-icon-sm
fundindo forma e tamanho, contra a gramatica da familia (papel + aparencia +
tamanho). Agora a FORMA é quadrada e o TAMANHO vem da classe de tamanho.
O ícone também é declarado: sem isso a caixa volta a ser consequência do
conteúdo — foi assim que a matriz do Fechamento virou 22px com padding:3px. */
.button--icon{width:32px;height:32px;padding:0}
.button--icon.button--sm{width:24px;height:24px}
.button--icon.button--lg{width:40px;height:40px}
.button--icon .icon{width:16px;height:16px}
/* Botão sem caixa: só o ícone/rótulo, sem fundo nem borda até o hover.
É o papel que o .fc-icbtn (Fechamento) implementava local. */
.button--bare{background:none;border-color:transparent;color:var(--text2)}
.button--bare:hover{background:var(--surface2);color:var(--accent)}
.button--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.button--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button--primary:disabled{background:var(--border2);border-color:var(--border2)}
.button--secondary{background:var(--surface2);color:var(--text);border-color:var(--border)}
.button--secondary:hover{background:var(--surface3)}
.button--danger{background:var(--red);color:#fff;border-color:var(--red)}
.button--success{background:var(--green);color:#fff;border-color:var(--green)}
.button--ghost{background:none;color:var(--text2);border-color:var(--border)}
.button--ghost:hover{background:var(--surface2)}
.button--outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.button--outline:hover{background:var(--accent);color:#fff}
.button--outline:disabled{color:var(--text3);border-color:var(--border);background:transparent;cursor:not-allowed}
.button--subtle-danger{background:var(--red2);color:var(--red);border-color:var(--red2)}
.button--subtle-success{background:var(--green2);color:var(--green);border-color:var(--green2)}
/* S49: --subtle-warning FECHA a familia. Ela tinha danger e success e nao tinha
aviso — e o buraco doia: o "Completar config." do Metas usava --orange SOLIDO
com branco, o tratamento mais pesado que existe, para uma pendencia que
aparece tres vezes na mesma tela. O par (--yellow2 + --gold-fg) e exatamente o
do .badge--warning, entao aviso passa a ter a mesma voz seja ele estatico ou
clicavel. Precedente registrado neste arquivo: as variantes de .alert sem
consumidor ficaram porque "familia de severidade incompleta e pior que
variante sem uso". */
.button--subtle-warning{background:var(--yellow2);color:var(--gold-fg);border-color:var(--yellow2)}
/* ==== TOAST canonico (S29 . CSS-B) — pill central, tokens GXON ==== */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);max-width:min(400px,calc(100vw - 40px));background:var(--navy);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.5;padding:10px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:9999;text-align:center}
/* S46 · BEM: os estados eram .show e .warn — palavras comuns SEM prefixo num
arquivo global, a armadilha que a regra da S45 descreve. E .show era pior
que ambígua: o MESMO nome serve o toast, o .modal-ov, o overlay local do
Metas e — congelado — o Bootstrap, que põe e tira .show no dropdown e no
tooltip. Trocar "show" em massa quebraria os quatro; só os do toast mudam
aqui, um a um, e os do overlay do modal viraram .modal-overlay--open.
ORDEM IMPORTA: .toast--visible e .toast--warn têm a mesma especificidade da
.toast (antes era 0,2,0 contra 0,1,0) e só vencem por virem DEPOIS no
arquivo. Não mover para cima. */
.toast--visible{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--warn{background:var(--red);color:#fff}
/* ==== SPINNER canonico (S29 . CSS-B) — anel branco p/ contextos escuros ==== */
.spinner{display:inline-block;width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner--sm{width:16px;height:16px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ==== BADGE canonico (S29 . CSS-B) — GXON 6px, status subtle, tokens ==== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1.4;border-radius:var(--r-sm);white-space:nowrap;vertical-align:baseline}
.badge--success{background:var(--green2);color:var(--green)}
.badge--warning{background:var(--yellow2);color:var(--gold-fg)}
.badge--danger{background:var(--red2);color:var(--red)}
.badge--info{background:var(--blue2s);color:var(--blue2)}
.badge--neutral{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
/* S46: .badge-purple REMOVIDA. Nasceu na S29 e nunca teve consumidor — conferido
contra markup, interpolação e className. Além de morta, nomeava a COR e não o
papel, contra a regra da S45: as irmãs dizem severidade (success/warning/
danger/info/neutral) e ela dizia "roxo". Se um dia voltar, volta pelo papel. */
.badge--solid{background:var(--accent);color:#fff}
/* ==== CHIP canonico (S29 . CSS-B) — INTERATIVO (par do badge) ====
Regra de ouro: se CLICA, e chip; se so INFORMA, e badge — e os dois
NUNCA se parecem. Badge = estatico (sem borda de acao, sem cursor).
Chip = borda + cursor + hover + estado .chip--active + "x" removivel.
Filtros/selecoes/remocao viram chip; status/contagem viram badge. */
/* S49: font-family:inherit ENTROU, e nao e cosmetica. O .chip nasceu na S29 sem
declarar fonte, e enquanto todo consumidor era isso passou — span herda
do body. Botao NAO herda: