/* ==========================================================================
   CNPGolden — componentes (F1 do rebranding)
   --------------------------------------------------------------------------
   Peças reutilizáveis das páginas novas. Regras:
   - só tokens de tokens.css (nenhuma cor ou tamanho escrito aqui);
   - prefixo ui- para não colidir com o CSS das páginas antigas;
   - raio pequeno, nada de borda colorida de um lado só, sombra só no que
     flutua (menu, gaveta, modal, aviso);
   - todo ícone de ação vem com rótulo de texto.
   Macros Jinja correspondentes: templates/partials/_ui.html.
   Vitrine: /_estilo (só no papel "tudo").
   ========================================================================== */

/* Ícone do sprite (static/icones/sprite.svg) */
.icone {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}
.icone--g { width: 1.25em; height: 1.25em; }

/* Texto só para leitor de tela */
.ui-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Botão: primário (uma por tela), secundário, fantasma, perigo
   -------------------------------------------------------------------------- */
.ui-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 40px;
    padding: 0 var(--esp-4);
    border: 1px solid transparent;
    border-radius: var(--raio-2);
    font: inherit;
    font-size: var(--tam-3);
    font-weight: var(--peso-forte);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--mov-rapido) var(--mov-curva),
                border-color var(--mov-rapido) var(--mov-curva),
                color var(--mov-rapido) var(--mov-curva);
}
.ui-botao:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
.ui-botao[disabled], .ui-botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ui-botao--primario { background: var(--cor-acao); color: var(--cor-acao-texto); }
.ui-botao--primario:hover { background: var(--cor-acao-hover); color: var(--cor-acao-texto); }

.ui-botao--secundario {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda-forte);
}
.ui-botao--secundario:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }

.ui-botao--fantasma { background: transparent; color: var(--cor-texto-2); }
.ui-botao--fantasma:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }

.ui-botao--perigo { background: var(--cor-superficie); color: var(--cor-erro); border-color: var(--cor-borda-forte); }
.ui-botao--perigo:hover { background: var(--cor-erro-fundo); color: var(--cor-erro); }

.ui-botao--p { min-height: 32px; padding: 0 var(--esp-3); font-size: var(--tam-2); }
.ui-botao--bloco { width: 100%; }

/* Custo em créditos dentro do botão: "Ver telefone e e-mail · 1 crédito" */
.ui-botao-custo {
    font-weight: var(--peso-normal);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Selo (situação cadastral, matriz/filial, estado)
   -------------------------------------------------------------------------- */
.ui-selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 2px var(--esp-2);
    border-radius: var(--raio-pilula);
    font-size: var(--tam-1);
    font-weight: var(--peso-forte);
    line-height: 1.5;
    white-space: nowrap;
    background: var(--cor-neutro-fundo);
    color: var(--cor-neutro);
}
.ui-selo--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.ui-selo--alerta  { background: var(--cor-alerta-fundo);  color: var(--cor-alerta); }
.ui-selo--erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro); }
.ui-selo--info    { background: var(--cor-info-fundo);    color: var(--cor-info); }
.ui-selo--marca   { background: var(--cor-marca-suave);   color: var(--cor-marca-texto); }

/* --------------------------------------------------------------------------
   Lista rótulo/valor (dados da ficha)
   -------------------------------------------------------------------------- */
.ui-dados {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--esp-2) var(--esp-6);
    margin: 0;
}
.ui-dados dt {
    color: var(--cor-texto-3);
    font-size: var(--tam-2);
    padding-top: 1px;
}
.ui-dados dd {
    margin: 0;
    color: var(--cor-texto);
    font-size: var(--tam-3);
    display: flex;
    align-items: baseline;
    gap: var(--esp-2);
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 560px) {
    .ui-dados { grid-template-columns: 1fr; gap: 2px; }
    .ui-dados dd { margin-bottom: var(--esp-3); }
}

/* Botão de copiar: aparece no hover/foco da linha, sempre no toque */
.ui-copiar {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 0;
    border-radius: var(--raio-1);
    background: transparent;
    color: var(--cor-texto-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--mov-rapido) var(--mov-curva);
}
.ui-dados dd:hover .ui-copiar, .ui-copiar:focus-visible { opacity: 1; }
.ui-copiar:hover { color: var(--cor-texto); background: var(--cor-superficie-2); }
@media (hover: none) { .ui-copiar { opacity: 1; } }

/* Fonte e data do dado ("Receita Federal · base de 13/10/2026") */
.ui-fonte {
    display: flex;
    align-items: center;
    gap: var(--esp-1);
    color: var(--cor-texto-3);
    font-size: var(--tam-1);
}

/* --------------------------------------------------------------------------
   Cartão
   -------------------------------------------------------------------------- */
.ui-cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-3);
}
.ui-cartao-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--cor-borda);
}
.ui-cartao-cabeca h2, .ui-cartao-cabeca h3 {
    margin: 0;
    font-size: var(--tam-4);
    font-weight: var(--peso-forte);
    color: var(--cor-texto);
}
.ui-cartao-corpo { padding: var(--esp-5); }
.ui-cartao-pe {
    padding: var(--esp-3) var(--esp-5);
    border-top: 1px solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */
.ui-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tam-3);
    color: var(--cor-texto);
}
.ui-tabela th {
    text-align: left;
    font-size: var(--tam-2);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-3);
    padding: var(--esp-2) var(--esp-3);
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
}
.ui-tabela td {
    padding: var(--esp-3);
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: top;
}
.ui-tabela tbody tr:hover { background: var(--cor-superficie-2); }
.ui-tabela td.num, .ui-tabela th.num { text-align: right; }
.ui-tabela a { color: var(--cor-texto); font-weight: var(--peso-medio); }
.ui-tabela a:hover { color: var(--cor-link-hover); }

/* --------------------------------------------------------------------------
   Abas
   -------------------------------------------------------------------------- */
.ui-abas {
    display: flex;
    gap: var(--esp-1);
    border-bottom: 1px solid var(--cor-borda);
    overflow-x: auto;
}
.ui-aba {
    padding: var(--esp-3) var(--esp-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cor-texto-2);
    font: inherit;
    font-size: var(--tam-3);
    font-weight: var(--peso-medio);
    cursor: pointer;
    white-space: nowrap;
}
.ui-aba:hover { color: var(--cor-texto); }
.ui-aba[aria-selected="true"] { color: var(--cor-texto); border-bottom-color: var(--cor-acao); }
.ui-aba:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Avatar (foto do Google ou iniciais)
   -------------------------------------------------------------------------- */
.ui-avatar {
    --tam-avatar: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tam-avatar);
    height: var(--tam-avatar);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cor-marca-suave);
    color: var(--cor-marca-texto);
    font-size: calc(var(--tam-avatar) * 0.4);
    font-weight: var(--peso-forte);
    line-height: 1;
    user-select: none;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--g { --tam-avatar: 48px; }
.ui-avatar--p { --tam-avatar: 24px; }

/* --------------------------------------------------------------------------
   Saldo de créditos (topo da página)
   -------------------------------------------------------------------------- */
.ui-saldo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 32px;
    padding: 0 var(--esp-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pilula);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-size: var(--tam-2);
    font-weight: var(--peso-forte);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.ui-saldo .icone { color: var(--cor-marca-texto); }
.ui-saldo:hover { border-color: var(--cor-borda-forte); color: var(--cor-texto); }
.ui-saldo--baixo { border-color: var(--cor-alerta); }

/* --------------------------------------------------------------------------
   Gaveta (menu do usuário, histórico no celular)
   -------------------------------------------------------------------------- */
.ui-gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: var(--z-gaveta);
    background: var(--cor-sobreposicao);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mov-medio) var(--mov-curva);
}
.ui-gaveta {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-gaveta) + 1);
    width: min(360px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--cor-superficie);
    border-left: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-3);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--mov-medio) var(--mov-curva), visibility var(--mov-medio);
}
.ui-gaveta.is-aberta { transform: none; visibility: visible; }
.ui-gaveta.is-aberta + .ui-gaveta-fundo,
.ui-gaveta-fundo.is-aberto { opacity: 1; pointer-events: auto; }
.ui-gaveta-cabeca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-5);
    border-bottom: 1px solid var(--cor-borda);
}
.ui-gaveta-corpo { flex: 1; overflow-y: auto; padding: var(--esp-3) 0; }
.ui-gaveta-grupo { padding: var(--esp-2) 0; }
.ui-gaveta-grupo + .ui-gaveta-grupo { border-top: 1px solid var(--cor-borda); }
.ui-gaveta-titulo {
    padding: var(--esp-2) var(--esp-5);
    color: var(--cor-texto-3);
    font-size: var(--tam-1);
    font-weight: var(--peso-medio);
}
.ui-gaveta-link {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-5);
    color: var(--cor-texto);
    font-size: var(--tam-3);
    text-decoration: none;
}
.ui-gaveta-link:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.ui-gaveta-link .icone { color: var(--cor-texto-3); }
.ui-fechar {
    margin-left: auto;
    display: inline-flex;
    padding: var(--esp-2);
    border: 0;
    border-radius: var(--raio-2);
    background: transparent;
    color: var(--cor-texto-2);
    cursor: pointer;
}
.ui-fechar:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }

/* --------------------------------------------------------------------------
   Modal (<dialog>): confirmação de custo antes de toda ação paga
   -------------------------------------------------------------------------- */
.ui-modal {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-3);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra-3);
}
.ui-modal::backdrop { background: var(--cor-sobreposicao); }
.ui-modal-corpo { padding: var(--esp-6); }
.ui-modal-corpo h2 {
    margin: 0 0 var(--esp-2);
    font-size: var(--tam-5);
    font-weight: var(--peso-forte);
}
.ui-modal-corpo p { margin: 0 0 var(--esp-3); color: var(--cor-texto-2); font-size: var(--tam-3); }
.ui-modal-custo {
    display: flex;
    justify-content: space-between;
    padding: var(--esp-3) 0;
    border-top: 1px solid var(--cor-borda);
    font-size: var(--tam-3);
    font-variant-numeric: tabular-nums;
}
.ui-modal-custo + .ui-modal-custo { border-top-style: dashed; }
.ui-modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-6);
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-superficie-2);
    border-radius: 0 0 var(--raio-3) var(--raio-3);
}

/* --------------------------------------------------------------------------
   Aviso rápido (toast)
   -------------------------------------------------------------------------- */
.ui-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--esp-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    transform: translateX(-50%);
    pointer-events: none;
}
.ui-toast {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-2);
    background: var(--cor-texto);
    color: var(--cor-fundo);
    font-size: var(--tam-3);
    box-shadow: var(--sombra-2);
    animation: ui-toast-entra var(--mov-medio) var(--mov-curva);
}
.ui-toast--erro { background: var(--cor-erro); color: #fff; }
@keyframes ui-toast-entra { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Estado vazio (ensina o próximo passo; pode ter o clipe do tutorial)
   -------------------------------------------------------------------------- */
.ui-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-10) var(--esp-6);
    text-align: center;
    color: var(--cor-texto-2);
}
.ui-vazio-icone {
    display: inline-flex;
    padding: var(--esp-3);
    border-radius: 50%;
    background: var(--cor-superficie-2);
    color: var(--cor-texto-3);
    font-size: var(--tam-6);
}
.ui-vazio h3 { margin: 0; color: var(--cor-texto); font-size: var(--tam-4); font-weight: var(--peso-forte); }
.ui-vazio p { margin: 0; max-width: 46ch; font-size: var(--tam-3); }
.ui-vazio-video {
    width: min(480px, 100%);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-3);
    background: var(--cor-superficie-2);
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Esqueleto (carregamento no formato final, sem spinner)
   -------------------------------------------------------------------------- */
.ui-esqueleto {
    display: block;
    height: 0.9em;
    border-radius: var(--raio-1);
    background: linear-gradient(90deg, var(--cor-superficie-2) 25%, var(--cor-superficie-3) 50%, var(--cor-superficie-2) 75%);
    background-size: 200% 100%;
    animation: ui-esqueleto 1.4s ease-in-out infinite;
}
@keyframes ui-esqueleto { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-esqueleto { animation: none; } }

/* --------------------------------------------------------------------------
   Anúncio: espaço reservado (sem pulo de layout) e rótulo "Publicidade".
   O aviso "navegue sem anúncios" fica FORA deste contêiner (política AdSense).
   -------------------------------------------------------------------------- */
.ui-anuncio {
    min-height: var(--altura-anuncio, 280px);
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}
.ui-anuncio::before {
    content: 'Publicidade';
    color: var(--cor-texto-3);
    font-size: var(--tam-1);
}
.ui-sem-anuncio {
    color: var(--cor-texto-3);
    font-size: var(--tam-1);
}
.ui-sem-anuncio a { color: var(--cor-texto-2); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Botão de tema (claro/escuro): só aparece em página com data-tema-pronto
   -------------------------------------------------------------------------- */
.ui-tema {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-2);
    background: var(--cor-superficie);
    color: var(--cor-texto-2);
    cursor: pointer;
}
:root[data-tema-pronto] .ui-tema { display: inline-flex; }
.ui-tema:hover { color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.ui-tema .icone-escuro { display: none; }
:root[data-tema="escuro"] .ui-tema .icone-claro { display: none; }
:root[data-tema="escuro"] .ui-tema .icone-escuro { display: inline; }
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .ui-tema .icone-claro { display: none; }
    :root[data-tema="auto"] .ui-tema .icone-escuro { display: inline; }
}