/* ============================================================================
   Tema do Mimir Scan — a identidade visual da marca aplicada ao app (21/09).

   Fonte da verdade: a landing (`mimir-landing-page/public/styles.css`) — logo
   real, Geist para a interface, Geist Mono para rótulos/números/botões e o
   acento teal. Aqui vive a versão CLARA dessa identidade (decisão do usuário em
   21/09: o app fica claro; Resultados e Escaneando vivem de foto de carta).

   Como funciona: este arquivo é carregado POR ÚLTIMO em toda página e define os
   tokens que os outros CSS consomem (`var(--acento-forte)` no lugar do #1877f2
   de antes). Mudar a marca = mudar os tokens aqui. Componentes novos do design
   system (aviso sonoro, tooltip, interruptor, cabeçalho de grupo) também moram
   aqui, porque são usados por mais de uma tela.

   As telas Tailwind (scanning.html, scanning_mobile.html) recebem os mesmos
   tokens por `utils/tema_tailwind.js`, que remapeia a escala `blue` do Tailwind
   para a escala teal abaixo — sem tocar centenas de classes.
   ========================================================================== */
/* Fontes da marca (Geist + Geist Mono), servidas daqui: os arquivos vêm do design system. */
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500 700; font-style: normal; font-display: swap; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); }

:root {
    /* fontes */
    --fonte-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fonte-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;

    /* Design system Mimir, variante clara ("negativo"): bg = negativo, surface = cinza-100,
       ink = ink-black, border = cinza-300, border-strong = cinza-500. */
    --fundo: #f2f5f5;
    --superficie: #e7edee;
    --superficie-2: #dce4e5;
    --linha: #b9c4c6;
    --linha-2: #76858a;
    --texto: #10151a;
    --texto-2: #39444b;
    --texto-3: #76858a;

    /* acento: petróleo. `--acento` = petroleo-300 (avatar, aba ativa, foco, selos, progresso);
       `--acento-forte` = petroleo-700, a cor de ação do tema claro (botões, links; 8,5:1). */
    --acento: #34d3c4;
    --acento-tinta: #10151a;          /* texto sobre o acento vivo */
    --acento-forte: #0e4f4b;
    --acento-forte-hover: #0a2e2c;
    --acento-suave: #cfeeea;          /* fundo de chip/linha selecionada */
    --acento-glow: rgba(52, 211, 196, 0.35);
    --violeta: #8b7cf7;               /* só como ponta do degradê funcional */

    /* semânticas — separadas do acento de propósito */
    --ok: #167a36;
    --aviso: #d97706;
    --perigo: #b91c1c;

    /* cantos geométricos, sem sombra */
    --raio-sm: 4px;
    --raio: 8px;
    --raio-lg: 12px;
}

/* Borda em degradê funcional (petróleo→violeta a 55%): cartões e botão secundário do design system. */
.borda-degrade {
    border: 1px solid transparent;
    background: linear-gradient(var(--fundo), var(--fundo)) padding-box,
                linear-gradient(45deg, rgba(52, 211, 196, 0.55), rgba(139, 124, 247, 0.55)) border-box;
}

/* ---------------------------------------------------------------- base -- */
body {
    font-family: var(--fonte-ui);
    background-color: var(--fundo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}
/* `bg-gray-100` do Tailwind (scanning.html) é classe e venceria o seletor de elemento. */
body.bg-gray-100 { background-color: var(--fundo); }
/* O scan mobile é escuro por desenho e fica escuro: só fonte e acento entram lá. */
body.tema-escuro { background-color: #0d1117; color: #e7edee; }

h1, h2, h3 { letter-spacing: -0.01em; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ------------------------------------------------------- barra do topo -- */
/* A barra (utils/barra.css) já consome os tokens; aqui só o que é da marca. */
.barra-topo { font-family: var(--fonte-ui); border-bottom: 1px solid var(--linha); box-shadow: none; }
.barra-logo img { height: 22px; }           /* o logo real é largo (4,7:1); 22 px = altura da landing */
.barra-titulo { font-size: 15px; }
.barra-avatar { background: var(--acento); color: var(--acento-tinta); font-family: var(--fonte-mono); }
.barra-divisor { background: var(--linha-2); }

/* ------------------------------------------------------ abas (loja/admin) -- */
.abas .aba.ativa { border-bottom-color: var(--acento); }

/* ---------------------------------------------- aviso sonoro (scan) -- */
/* Botão-pílula ao lado do status do scan: liga/desliga o beep de "insira a
   próxima carta". `aria-pressed` diz o estado; o texto acompanha. */
.som-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--linha-2);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-2);
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    cursor: pointer;
    line-height: 1.2;
}
.som-btn:hover { border-color: var(--acento-forte); color: var(--acento-forte); }
.som-btn[aria-pressed="false"] { color: var(--texto-3); }
.som-btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- tooltip -- */
/* Balão preto de dica, ancorado num `.tem-balao` (position: relative). Aparece
   no hover E no foco do teclado; o Rotacionar travado usa isto. */
.tem-balao { position: relative; }
.balao {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--texto);
    color: #ffffff;
    font-family: var(--fonte-ui);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 30;
}
.balao::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: var(--texto);
    transform: rotate(45deg);
}
.tem-balao:hover .balao, .tem-balao:focus-within .balao, .tem-balao.balao-aberto .balao { opacity: 1; transform: none; }
/* Botão "travado": continua clicável para o hover/foco existir, mas se declara
   indisponível (aria-disabled) e o handler ignora o clique. */
[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .balao { transition: none; } }

/* ------------------------------------------------ interruptor (toggle) -- */
.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--linha-2);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto-2);
    font-family: var(--fonte-mono);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.interruptor .trilho {
    width: 26px; height: 14px; border-radius: 7px;
    background: var(--linha-2); position: relative; flex-shrink: 0;
    transition: background 0.15s ease;
}
.interruptor .trilho::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 10px; height: 10px; border-radius: 50%; background: #ffffff;
    transition: left 0.15s ease;
}
.interruptor[aria-pressed="true"] { border-color: var(--acento-forte); background: var(--acento-suave); color: var(--acento-forte); }
.interruptor[aria-pressed="true"] .trilho { background: var(--acento-forte); }
.interruptor[aria-pressed="true"] .trilho::after { left: 14px; }

/* ------------------------------------- grupos da grid (agrupar iguais) -- */
/* Cabeçalho de grupo do Tabulator quando "Agrupar iguais" está ligado. */
.tabulator .tabulator-row.tabulator-group {
    background: var(--superficie-2);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    padding: 8px 10px;
    font-family: var(--fonte-ui);
    font-size: 13px;
    color: var(--texto);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
}
.tabulator .tabulator-row.tabulator-group .tabulator-arrow { margin: 0 2px 0 0; }
.grupo-cb { width: 15px; height: 15px; margin: 0; accent-color: var(--acento-forte); cursor: pointer; }
.grupo-nome { font-weight: 600; }
.grupo-meta { color: var(--texto-3); font-size: 12px; }
.grupo-qtd {
    margin-left: auto;
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    color: var(--acento-forte);
    background: var(--acento-suave);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
/* O CSS padrão do Tabulator pinta os <span> do cabeçalho de grupo de vermelho (era o contador dele). */
.tabulator .tabulator-row.tabulator-group span { color: inherit; margin-left: 0; }
.tabulator .tabulator-row.tabulator-group .grupo-meta { color: var(--texto-3); }
.tabulator .tabulator-row.tabulator-group .grupo-qtd { color: var(--acento-forte); }
/* Cópias do grupo com preços diferentes: o export as junta com um preço só.
   Texto em âmbar escuro — o `--aviso` puro sobre o claro fica em ~3:1. */
.grupo-aviso-preco {
    font-size: 12px;
    background: #fef3c7;
    border: 1px solid var(--aviso);
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
}
.tabulator .tabulator-row.tabulator-group .grupo-aviso-preco { color: #92400e; }

/* ---------------------------------------------------- alerta de confiança -- */
/* "!" de baixa confiança da identificação (15/10): ao lado do nome, no card da detecção
   e na coluna Nome da listagem. Âmbar escuro sobre âmbar claro (~7:1) — o `--aviso` puro
   como texto não passaria. É botão: o clique pergunta se a carta está certa. */
.alerta-confianca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #f59e0b;
    background: #fef3c7;
    color: #92400e;
    font-family: var(--fonte-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.alerta-confianca:hover { background: #fde68a; }
.alerta-confianca:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Toque: alvo maior sem mudar o desenho (a área de clique cresce, o círculo não). */
@media (pointer: coarse) {
    .alerta-confianca { position: relative; }
    .alerta-confianca::after { content: ""; position: absolute; inset: -10px -6px; }
}

/* ------------------------------------------------- ícones do design system -- */
/* Ícones de interface (assets/icons/): `<nome>_claro.svg` no tema claro, `<nome>.svg` no escuro.
   São <img> de cor fixa: nunca recolorir. Estados (alerta/erro/sucesso) sempre ao lado de uma palavra. */
.ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; flex: none; }
.ico-lg { width: 40px; height: 40px; margin: 0 auto 8px; display: block; }

/* ------------- ícones do design system via máscara (variante _atual, currentColor) -- */
/* Troca o Font Awesome: <i class="ic ic-salvar"></i> herda cor e tamanho do texto. Só a forma
   entra na máscara; o acento do ícone não aparece (cor única), o que é o desejado em botões. */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor;
      -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-spin { animation: ic-giro 1s linear infinite; }
@keyframes ic-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ic-spin { animation-duration: 3s; } }
.ic-salvar { --ic: url("../assets/icons/salvar_atual.svg"); }
.ic-editar { --ic: url("../assets/icons/editar_atual.svg"); }
.ic-excluir { --ic: url("../assets/icons/excluir_atual.svg"); }
.ic-busca { --ic: url("../assets/icons/busca_atual.svg"); }
.ic-bloqueado { --ic: url("../assets/icons/bloqueado_atual.svg"); }
.ic-sucesso { --ic: url("../assets/icons/sucesso_atual.svg"); }
.ic-alerta { --ic: url("../assets/icons/alerta_atual.svg"); }
.ic-erro { --ic: url("../assets/icons/erro_atual.svg"); }
.ic-atualizar { --ic: url("../assets/icons/atualizar_atual.svg"); }
.ic-condicao { --ic: url("../assets/icons/condicao_atual.svg"); }
.ic-lote { --ic: url("../assets/icons/lote_atual.svg"); }
.ic-lista-vazia { --ic: url("../assets/icons/lista-vazia_atual.svg"); }
.ic-arquivo-csv { --ic: url("../assets/icons/arquivo-csv_atual.svg"); }
.ic-baixar { --ic: url("../assets/icons/baixar_atual.svg"); }
.ic-enviar { --ic: url("../assets/icons/enviar_atual.svg"); }
.ic-seta-esquerda { --ic: url("../assets/icons/seta-esquerda_atual.svg"); }
.ic-seta-direita { --ic: url("../assets/icons/seta-direita_atual.svg"); }
.ic-seta-externa { --ic: url("../assets/icons/seta-externa_atual.svg"); }
.ic-chevron-baixo { --ic: url("../assets/icons/chevron-baixo_atual.svg"); }
.ic-copiar { --ic: url("../assets/icons/copiar_atual.svg"); }
.ic-olho { --ic: url("../assets/icons/olho_atual.svg"); }
.ic-olho-fechado { --ic: url("../assets/icons/olho-fechado_atual.svg"); }
.ic-filtro-limpar { --ic: url("../assets/icons/filtro-limpar_atual.svg"); }
.ic-caret-baixo { --ic: url("../assets/icons/caret-baixo_atual.svg"); }
.ic-ordenar-az-asc { --ic: url("../assets/icons/ordenar-az-asc_atual.svg"); }
.ic-ordenar-az-desc { --ic: url("../assets/icons/ordenar-az-desc_atual.svg"); }
.ic-ordenar-19-asc { --ic: url("../assets/icons/ordenar-19-asc_atual.svg"); }
.ic-ordenar-19-desc { --ic: url("../assets/icons/ordenar-19-desc_atual.svg"); }
.ic-fechar { --ic: url("../assets/icons/fechar_atual.svg"); }
.ic-info { --ic: url("../assets/icons/info_atual.svg"); }
.ic-arquivo-excel { --ic: url("../assets/icons/arquivo-excel_atual.svg"); }
.ic-arquivo-texto { --ic: url("../assets/icons/arquivo-texto_atual.svg"); }
.ic-carregando { --ic: url("../assets/icons/carregando_atual.svg"); }