/* =====================================================================
   RCC · camada de identidade visual.
   Carregada SEMPRE (dev com Tailwind CDN e produção com CSS compilado),
   antes do Tailwind. Aqui vivem: fontes auto-hospedadas, tokens de cor
   (claro/escuro), tipografia global e ajustes do modo escuro.
   Os templates continuam usando utilitários Tailwind normalmente.
   ===================================================================== */

/* ---------- Fontes auto-hospedadas (mesmos arquivos da landing) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;
  src:url("../fonts/inter.260c81a4759b.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;
  src:url("../fonts/fraunces.069cb90e11a3.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 700;
  src:url("../fonts/fraunces-italic.fa7ce081be5e.woff2") format("woff2");font-display:swap}

/* ---------- Tokens de cor ----------
   Neutros levemente AQUECIDOS (base marrom-acinzentada) para casar com o
   vermelho e o dourado da marca — a mesma temperatura da landing. */
:root{
  --rf-charcoal:32 29 26;    /* #201D1A — tinta (texto forte) */
  --rf-slate:94 88 78;       /* #5E584E — texto secundário */
  --rf-light:243 241 237;    /* #F3F1ED — fundo da página / hover */
  --rf-border:226 221 212;   /* #E2DDD4 — bordas discretas */
  --rf-card:255 255 255;     /* superfície dos cartões */
}
html.dark{
  --rf-charcoal:232 228 221; /* texto claro */
  --rf-slate:163 156 145;    /* texto secundário */
  --rf-light:26 24 21;       /* fundo da página / hover */
  --rf-border:58 54 47;      /* bordas discretas */
  --rf-card:36 33 29;        /* superfície dos cartões/menus */
}

/* ---------- Tipografia global ---------- */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Título de página: a serifada da casa (Fraunces), a mesma da landing.
   Pega o padrão usado em ~110 telas (h1 com tracking-tight) sem editar
   template por template. O tamanho continua vindo do utilitário text-2xl. */
h1.tracking-tight{
  font-family:"Fraunces","Georgia",serif;
  font-weight:600;
  letter-spacing:0;
  font-variation-settings:"opsz" 28;
}
/* Números tabulares de verdade (colunas de dinheiro alinham no dígito). */
.tabular-nums{font-feature-settings:"tnum" 1;}
/* Em TABELA, todo número é tabular por padrão (sistema financeiro: as colunas
   de dinheiro/data alinham no dígito sem precisar da classe em cada célula). */
table{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
/* Seleção de texto com o dourado da marca (era o azul padrão do navegador). */
::selection{background-color:rgb(188 139 31/0.25);}
/* Geometria mais precisa: o raio de 16px (rounded-2xl) espalhado pelo sistema
   dava aparência "inflada"; 12px mantém a suavidade com mais rigor. */
.rounded-2xl{border-radius:0.75rem;}

/* ---------- Modo escuro: superfícies e tons fixos do Tailwind ---------- */
/* Superfície "charcoal" (botões escuros, cartão Total em carteira): no escuro a
   variável vira cor de TEXTO claro; quem usa como FUNDO ficaria claro com texto
   branco ilegível. Mantém o fundo escuro de verdade. */
.dark .bg-rf-charcoal{background-color:rgb(52 48 42);}
.dark .hover\:bg-black:hover{background-color:rgb(23 21 18);}
.dark .bg-white{background-color:rgb(var(--rf-card));}
.dark .bg-white\/90{background-color:rgb(var(--rf-card)/0.9);}
.dark .bg-white\/95{background-color:rgb(var(--rf-card)/0.95);}
.dark .bg-green-100{background-color:rgb(34 197 94/0.18);}
.dark .text-green-700{color:#5dd47e;}
.dark .bg-gray-100{background-color:rgb(var(--rf-light));}
.dark .bg-gray-200,.dark .bg-gray-300{background-color:rgb(var(--rf-border));}
.dark .bg-gray-400{background-color:rgb(var(--rf-slate));}
.dark .text-gray-600{color:rgb(var(--rf-slate));}
/* Cores de agrupamento (pastéis): no escuro viram tinta translúcida p/ o
   texto claro continuar legível por cima. */
.dark .bg-sky-100{background-color:rgb(56 189 248/0.16);}
.dark .bg-amber-100{background-color:rgb(245 158 11/0.16);}
.dark .bg-emerald-100{background-color:rgb(16 185 129/0.16);}
.dark .bg-violet-100{background-color:rgb(139 92 246/0.16);}
.dark .bg-pink-100{background-color:rgb(236 72 153/0.16);}
.dark .bg-teal-100{background-color:rgb(20 184 166/0.16);}
.dark .bg-orange-100{background-color:rgb(249 115 22/0.16);}
.dark .bg-indigo-100{background-color:rgb(99 102 241/0.16);}
.dark .bg-lime-100{background-color:rgb(132 204 22/0.16);}
.dark .bg-fuchsia-100{background-color:rgb(217 70 239/0.16);}
.dark .bg-cyan-100{background-color:rgb(34 211 238/0.16);}
.dark .bg-rose-100{background-color:rgb(244 63 94/0.16);}

/* ---------- Selos de status (hex da paleta fixa) no modo escuro ----------
   Mesmo tratamento dos pastéis acima: o fundo claro vira tinta translúcida e o
   texto clareia, senão os selos ficam como "etiquetas acesas" na tela escura. */
.dark .bg-\[\#E3F4E7\]{background-color:rgb(46 157 72/0.18);}
.dark .text-\[\#2E9D48\]{color:#5dd47e;}
.dark .bg-\[\#FBE3E4\]{background-color:rgb(195 31 35/0.18);}
.dark .text-rf-red{color:#E36A6D;}
.dark .hover\:text-rf-red:hover{color:#E36A6D;}
.dark .bg-\[\#FEF3C7\]{background-color:rgb(180 83 9/0.18);}
.dark .bg-\[\#FEF3C7\]\/40{background-color:rgb(180 83 9/0.12);}
.dark .text-\[\#B45309\],.dark .text-\[\#92400E\]{color:#e8a85c;}
.dark .bg-\[\#EDE9FE\]{background-color:rgb(109 40 217/0.2);}
.dark .text-\[\#6D28D9\]{color:#b79df2;}
.dark .hover\:bg-\[\#EDE9FE\]:hover{background-color:rgb(109 40 217/0.2);}
.dark .bg-\[\#CCFBF1\]{background-color:rgb(15 118 110/0.25);}
.dark .text-\[\#0F766E\]{color:#4fd1c5;}
/* Avisos âmbar (ex.: exposição do sacado na Nova Operação). */
.dark .bg-amber-50{background-color:rgb(245 158 11/0.12);}
.dark .border-amber-300,.dark .border-amber-400{border-color:rgb(245 158 11/0.4);}
.dark .text-amber-700{color:#e8a85c;}
.dark .text-amber-800{color:#e8b577;}
.dark .text-amber-900{color:#e8c588;}

/* Destaque da coluna Valor: cinza neutro bem sutil (não usa cor da marca
   p/ não confundir com os destaques de emitente/cedente, que são coloridos). */
.col-valor{background-color:rgb(94 88 78/0.06);}
.dark .col-valor{background-color:rgb(255 255 255/0.05);}

/* ---------- Nova Operação: linha em digitação ganha um realce suave ---------- */
.linha-titulo:focus-within{
  background-color:rgb(212 154 26/0.09);
  box-shadow:inset 2px 0 0 rgb(188 139 31/0.75);
}
.dark .linha-titulo:focus-within{background-color:rgb(212 154 26/0.12);}

/* ---------- Ícone do botão de tema: lua no claro, sol no escuro ---------- */
.tema-icone-escuro{display:none;}
.dark .tema-icone-claro{display:none;}
.dark .tema-icone-escuro{display:block;}

/* ---------- Menu do celular: seções recolhíveis (<details>) ---------- */
#menu-mobile details > summary{list-style:none;}
#menu-mobile details > summary::-webkit-details-marker{display:none;}
.acc-seta{transition:transform .15s ease;}
#menu-mobile details[open] > summary .acc-seta{transform:rotate(180deg);}

/* ---------- Impressão: só o conteúdo vai para o papel/PDF ---------- */
@media print{
  header, #menu-mobile, .no-print{display:none !important;}
  body{background:#fff !important;}
  main{display:block;}
}