/* Arcanys E-commerce — paleta do Manual da Marca (dourado #E4BA4C, azuis #02457C, #021D38, #12CDF0).
   Cores de status não estão no manual: proposta de extensão (ver prototipo/LEIA-ME.md). */
:root {
  --dourado: #E4BA4C; --azul-medio: #02457C; --azul-escuro: #021D38; --azul-claro: #12CDF0;
  --fundo: #F3F5F8; --cartao: #FFFFFF; --texto: #0D1B2A; --suave: #5A6878; --borda: #DCE2EA;
  --ok: #157F4C; --ok-fundo: #E3F4EA; --aviso: #8A5A00; --aviso-fundo: #FBF0D6; --erro: #B42318; --erro-fundo: #FDE7E5;
  --info-fundo: #E3EEF8; --info-texto: #0B3358; --aviso-texto: #5E3D00; --erro-texto: #7A1810;
  --neutro-fundo: #EEF1F5; --linha-hover: #F8FAFC; --campo-fundo: #FFFFFF; --trilho: #E6EBF1;
  --primario-hover: #013663; --destaque-hover: #D9AB36; --veu: rgba(2,29,56,.45); --sombra: rgba(2,29,56,.18);
  --titulos: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue", "Work Sans", Arial, sans-serif;
  --textos: "Work Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --fundo: #0A1520; --cartao: #0F1F30; --texto: #E6EDF5; --suave: #93A4B7; --borda: #213549;
  --ok: #5FD39A; --ok-fundo: #10301F; --aviso: #F0C766; --aviso-fundo: #33270B; --erro: #FF8F86; --erro-fundo: #3A1512;
  --info-fundo: #0E2A45; --info-texto: #BFD9F2; --aviso-texto: #F6DFA6; --erro-texto: #FFC9C4;
  --neutro-fundo: #1A2B3D; --linha-hover: #132739; --campo-fundo: #0D1C2B; --trilho: #1E3247;
  --primario-hover: #0A5A9C; --veu: rgba(0,0,0,.55); --sombra: rgba(0,0,0,.4); color-scheme: dark;
} }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--textos); color: var(--texto); background: var(--fundo); }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.1rem; }
a { color: var(--azul-medio); }
@media (prefers-color-scheme: dark) { a { color: var(--azul-claro); } }
button, select, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, tr.clicavel:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Login */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--azul-escuro); }
.cartao-login { width: min(400px, 100%); background: var(--cartao); border-radius: 14px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cartao-login .marca-login { display: flex; flex-direction: column; align-items: center; background: var(--azul-escuro); border-radius: 10px; margin: -8px -8px 20px; padding: 6px 0 14px; }
.cartao-login .marca-login img { width: 120px; height: 120px; margin: -16px 0 -20px; }
.cartao-login small { color: var(--dourado); letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; font-weight: 600; }

/* Estrutura */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { background: var(--azul-escuro); color: #E8EEF5; display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; flex-direction: column; align-items: center; padding: 4px 0 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.marca img { width: 128px; height: 128px; display: block; margin: -18px 0 -22px; }
.marca small { color: var(--dourado); letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; font-weight: 600; }
.seletor { margin: 0 4px 14px; }
.seletor label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #9FB3C8; }
.seletor select { width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; }
.seletor select option { color: #0D1B2A; }
nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 1px 0; border-radius: 8px; color: #C9D6E3; text-decoration: none; font-weight: 500; }
nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
nav a.ativo { background: rgba(18,205,240,.12); color: #fff; box-shadow: inset 3px 0 0 var(--azul-claro); }
.usuario { margin-top: auto; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #C9D6E3; }
.usuario strong { color: #fff; display: block; }
.usuario button { margin-top: 8px; background: none; border: 1px solid rgba(255,255,255,.2); color: #C9D6E3; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.principal { min-width: 0; }
.topo { display: none; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.menu-movel { border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--texto); }
.conteudo { padding: 24px 28px 64px; max-width: 1280px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.cabecalho p { margin: 4px 0 0; color: var(--suave); }
.cabecalho .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Componentes */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primario { background: var(--azul-medio); color: #fff; } .btn-primario:hover { background: var(--primario-hover); }
.btn-destaque { background: var(--dourado); color: var(--azul-escuro); } .btn-destaque:hover { background: var(--destaque-hover); }
.btn-secundario { background: var(--cartao); color: var(--texto); border-color: var(--borda); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; }
.grade { display: grid; gap: 16px; } .g2 { grid-template-columns: 3fr 2fr; } .g4 { grid-template-columns: repeat(4, 1fr); }
.indicador .valor { font-family: var(--titulos); font-size: 1.8rem; font-weight: 600; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.indicador .rotulo { color: var(--suave); font-size: .85rem; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-ok { background: var(--ok-fundo); color: var(--ok); } .e-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.e-erro { background: var(--erro-fundo); color: var(--erro); } .e-info { background: var(--info-fundo); color: var(--info-texto); }
.e-neutro { background: var(--neutro-fundo); color: var(--suave); }
.fonte { font-size: .72rem; padding: 1px 7px; border-radius: 6px; background: var(--neutro-fundo); color: var(--suave); white-space: nowrap; }
.fonte.antigo { background: var(--info-fundo); color: var(--info-texto); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr.clicavel { cursor: pointer; } tr.clicavel:hover td { background: var(--linha-hover); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); }
.mini { font-size: .8rem; color: var(--suave); }
.vazio { padding: 28px; text-align: center; color: var(--suave); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtro { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 6px 12px; border-radius: 99px; cursor: pointer; font-size: .85rem; }
.filtro.ativo { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }
.passos { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.passo { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 0; color: var(--suave); font-weight: 500; }
.passo .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borda); font-size: .8rem; font-weight: 700; }
.passo.feito .n { background: var(--azul-medio); border-color: var(--azul-medio); color: #fff; }
.passo.atual { color: var(--texto); } .passo.atual .n { border-color: var(--dourado); color: var(--azul-escuro); background: var(--dourado); }
.passo + .passo::before { content: ""; width: 28px; height: 2px; background: var(--borda); margin-right: 8px; }
.aviso-caixa { border-radius: 10px; padding: 12px 14px; font-size: .9rem; }
.aviso-caixa.amarelo { background: var(--aviso-fundo); color: var(--aviso-texto); }
.aviso-caixa.azul { background: var(--info-fundo); color: var(--info-texto); }
.aviso-caixa.vermelho { background: var(--erro-fundo); color: var(--erro-texto); }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: .85rem; color: var(--suave); margin-bottom: 4px; }
.campo input, .campo select { width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--campo-fundo); color: var(--texto); }
.copiar { display: flex; gap: 8px; } .copiar input { flex: 1; min-width: 0; }
.erro-form { color: var(--erro); margin: 8px 0 0; } .ok-form { color: var(--ok); margin: 8px 0 0; }

/* Gaveta de detalhe */
.veu { position: fixed; inset: 0; background: var(--veu); z-index: 20; }
.gaveta { position: fixed; top: 0; right: 0; height: 100vh; width: min(540px, 100vw); background: var(--cartao); z-index: 21; overflow-y: auto; padding: 24px; box-shadow: -8px 0 32px var(--sombra); }
.gaveta .fechar { float: right; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--suave); }
.gaveta td { padding: 8px 10px; font-size: .88rem; }

@media (max-width: 1080px) { .g2 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; width: 260px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; }
  .topo { display: flex; }
  .conteudo { padding: 18px 16px 80px; }
  .cabecalho .acoes { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }