/* Tokens do sistema (Sistema_de_Estilos: o arquivo de tokens; o CLAUDE.md do projeto crava o nome
   style.css). Único lugar onde hex de cor existe. Família de cor: --cor-primaria. Tema: light.
   O bloco da marca é literal do paleta.py; texto na cor da marca usa --cor-primaria-texto
   (4.69:1), nunca --cor-primaria (3.63:1 sobre branco). */
:root {
  --cor-primaria: #3387E9;
  --cor-primaria-hover: #1872DC;
  --cor-primaria-escura: #135AAD;
  --cor-primaria-suave: #E7EFF8;
  --cor-primaria-soft: rgba(51, 135, 233, 0.12);
  --cor-primaria-sombra: rgba(51, 135, 233, 0.15);
  --cor-primaria-texto: #1872DC;
  --texto-sobre-cor-primaria: #000000;

  /* Superfícies e texto (tema light) */
  --fundo: #F5F7FA;
  --branco: #FFFFFF;
  --borda: #E5E7EB;
  --borda-forte: #CBD5E1;
  --borda-campo: #7C8798;   /* contorno de campo: 3.64:1 sobre branco (WCAG 1.4.11 pede 3:1) */
  --texto: #0F172A;
  --texto-suave: #334155;
  --texto-secundario: #475569;
  --texto-fraco: #64748B;
  --texto-invertido: #FFFFFF;
  --scrim: rgba(15, 23, 42, 0.55);
  --scrim-leve: rgba(15, 23, 42, 0.45);
  --pista-rolagem: rgba(15, 23, 42, 0.14);
  --fundo-barra-lote: #1E293B;   /* faixa escura da seleção em lote (Padrao_Selecao_em_Lote) */

  /* Estados */
  --vermelho: #B91C1C;
  --vermelho-suave: #FEE2E2;
  --ambar: #B45309;
  --ambar-suave: #FEF3C7;
  --verde: #15803D;
  --verde-suave: #DCFCE7;
  --verde-escuro: #16A34A;   /* pista do toggle ligado (Padrao_Toggle_OnOff); 3.3:1 sobre branco */
  --azul-info: #1D4ED8;
  --azul-suave: #DBEAFE;

  /* Tipografia: Inter em tudo; Sora só em h1-h5, título da topbar, marca e kpi-valor */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-h3: 17px;
  --fs-h2: 18px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* Espaço */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;   /* entre blocos de primeiro nível (Padrao_Espacamento_e_Respiro) */
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;

  /* Raio e sombra */
  --raio-sm: 8px;
  --raio-grupo: 7px;        /* grupo de chips (Padrao_Toggle_Tipos tipo 1) */
  --raio-grupo-item: 5px;   /* chip dentro do grupo */
  --raio: 12px;
  --raio-lg: 18px;
  --raio-full: 9999px;
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra: 0 4px 14px rgba(15, 23, 42, 0.08);
  --sombra-md: 0 8px 24px rgba(15, 23, 42, 0.12);   /* popovers e dropdowns (Padrao_Box_Card) */
  --sombra-lg: 0 20px 50px rgba(15, 23, 42, 0.25);
  --sombra-marca: 0 2px 8px var(--cor-primaria-sombra);
  --sombra-marca-forte: 0 4px 14px var(--cor-primaria-sombra);
  --contorno-ativo-claro: inset 0 0 0 2px rgba(255, 255, 255, 0.4);   /* item ativo sobre fundo da marca */
  --anel-foco: 0 0 0 3px var(--cor-primaria-soft);
  /* foco de campo: borda de 2px no azul escuro (6.3:1 no branco) + o halo suave */
  --anel-foco-campo: 0 0 0 1px var(--cor-primaria-escura), 0 0 0 4px var(--cor-primaria-soft);
  --linha-foco: inset 0 -2px 0 var(--cor-primaria-escura);
  --anel-erro: 0 0 0 3px var(--vermelho-suave);
  --transicao: .18s ease;

  /* Camadas: modal a 200 (Padrao_Modal); ordem da Padrao_Elevacao_Zindex:
     toast > modal > overlay > dropdown > sticky > sidebar. Dropdown dentro de modal sobe pelo
     top-layer do <dialog class="popup-centrado">, não por camada numérica. */
  --z-base: 0;
  --z-sidebar: 40;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 150;
  --z-modal: 200;
  --z-loading: 350;
  --z-toast: 400;
  --z-tooltip: 450;

  /* Medidas */
  --h-controle: 40px;
  --h-controle-sm: 36px;   /* botão pequeno e menu sanduíche da tabela (Padrao_Tabela) */
  --sidebar-width: 248px;   /* sobrescrito pelo sidebar_largura.js antes do render */
  --topbar-h: 60px;
}

/* ------------------------------------------------------------ Upload (Padrao_Upload_Arquivo)
   Drop e clique no mesmo label; 3 estados: tracejado, hover na cor da marca, carregado em verde. */
.im-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.im-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 150px; padding: var(--sp-5); border: 2px dashed var(--borda-forte); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto-suave); text-align: center; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.im-drop:hover, .im-drop.over { border-style: solid; border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.im-drop:focus-visible { outline: none; box-shadow: var(--anel-foco-campo); }
.im-drop.loaded { border-style: solid; border-color: var(--verde); background: var(--verde-suave); color: var(--verde); }
.im-drop.erro { border-color: var(--vermelho); background: var(--vermelho-suave); }
.im-icone { font-size: 36px; color: var(--texto-fraco); line-height: 1; }
.im-drop.loaded .im-icone { color: var(--verde); }
.im-titulo { font-size: var(--fs-md); font-weight: 600; color: var(--texto); }
.im-sub { font-size: var(--fs-xs); color: var(--texto-secundario); }
.im-arq { font-size: var(--fs-sm); font-weight: 600; color: var(--verde); overflow-wrap: anywhere; }
.im-arq:empty { display: none; }
.im-inp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.im-acao { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.im-msg { font-size: var(--fs-sm); color: var(--texto-secundario); min-width: 0; overflow-wrap: anywhere; }
.im-msg.ok { color: var(--verde); }
.im-msg.erro { color: var(--vermelho); }
.im-previa { display: flex; align-items: center; gap: var(--sp-3); }
.im-previa img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco); }