/* Pele da família visual da Interpartner no Compasso: 1ª camada da D0 do plano (01/11/2026; regra 26: "o compasso
   atual é bem utilizado, não pode mudar bruscamente").
   Fica POR CIMA do styles.css: troca tokens (cores, sombras, raios) e acabamento. O HTML não muda e nada muda de
   lugar, de tamanho, de nome nem some (prova de layout caixa a caixa contra o código do ar: d0/provas).
   "Visual anterior" (fim do menu, por aparelho, 30 dias) desliga este arquivo e o marca-icones.css juntos (pele.js).
   Fonte do desenho: desenho/familia.css e DESENHO.md do plano. Cor só por token; nenhum hex fora do :root.
   Caixa alta, espaçamento entre letras, tamanho e peso de letra ficam como estão nesta camada: mudam a largura do texto
   (prova de layout de 01/11: uma seção do menu cabia numa linha sem maiúscula e o resto do menu subia 11 px). Saem
   com cada tela tocada, na camada dela. */

/* Ícones de traço no lugar dos emojis dos botões, SEM mudar o texto: a fonte desenha o mesmo caractere com outro
   traço. Largura de cada glifo = a do emoji no Chrome do Windows; ascent/descent = os da Segoe UI Emoji/Symbol (as
   fontes que desenham esses emojis hoje), para a linha ficar da mesma altura. Gerada por ops/pictogramas/gerar.mjs. */
@font-face {
  font-family: 'Compasso Pictogramas';
  src: url(assets/fonts/pictogramas.otf?v=20261101-pele) format('opentype');
  font-weight: 100 900;
  font-display: swap;
  ascent-override: 107.91015625%;
  descent-override: 25.09765625%;
  line-gap-override: 0%;
  unicode-range: U+FE0F, U+2715, U+270F, U+1F4E5, U+1F4C4, U+1F6AA, U+2713, U+1F5A8, U+2B07, U+2192, U+25B6, U+1F4CB, U+21A9, U+1F4CA, U+2795, U+2190, U+26D4;
}

:root {
  /* família (desenho/familia.css) */
  --verde: #008D45;
  --verde-mata: #006B33;
  --verde-fundo: #004F25;
  --verde-claro: #2FB46A;
  --papel: #EEF3EF;
  --superficie-suave: #F4FAF6;
  --suave: #E9F6EF;
  --tinta: #15241C;
  --tinta-2: #4A5D52;
  --grafite: #728579;
  --fio: #E4ECE7;
  --ambar: #D98A2B;
  --vermelho: #C8372D;
  --superficie: #FFFFFF;
  --futuro: #D5DED8;          /* dia que ainda não chegou (régua do ciclo, camada 2) */
  --sombra-1: 0 1px 2px rgba(0,79,37,.06), 0 4px 14px rgba(0,79,37,.08);
  --sombra-2: 0 10px 30px rgba(0,79,37,.14);
  --sombra-botao: 0 4px 12px rgba(0,141,69,.24);

  /* os tokens que o styles.css já usa, agora com os valores da família */
  --bg: var(--papel);
  --border: var(--fio);
  --text: var(--tinta);
  --text-2: var(--tinta-2);
  --text-3: var(--grafite);
  --warn: var(--ambar);
  --error: var(--vermelho);
  --success: var(--verde);
  --ip-green-light: var(--suave);
  --ip-green-soft: var(--superficie-suave);
  --shadow-sm: 0 1px 2px rgba(0,79,37,.06);
  --shadow: var(--sombra-1);
  --shadow-lg: var(--sombra-2);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

body {
  font-family: 'Compasso Pictogramas', 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--papel);
  background-image: radial-gradient(900px 500px at 100% -10%, rgba(0,141,69,.10), transparent 60%),
                    radial-gradient(700px 400px at -10% 110%, rgba(0,107,51,.08), transparent 60%);
}

/* ---------- lateral ---------- */
.sidebar { background: linear-gradient(180deg, var(--verde-mata) 0%, var(--verde-fundo) 100%); }
/* logo no selo: a MESMA caixa de 78 px de largura e a mesma altura de antes (proporção do logo-branco.png), com o
   logo dentro; o nome "Compasso" e o menu não se movem. */
.sidebar-brand img {
  box-sizing: border-box;
  aspect-ratio: 1358 / 1080;
  padding: 7px 9px;
  object-fit: contain;
  background: rgba(255,255,255,.14);
  border-radius: 18px;
  opacity: 1;
}
.sidebar-brand small { opacity: .78; }
.nav-section { color: rgba(255,255,255,.62); }
.badge-mini { border-radius: 999px; }
.nav-item { border-radius: 10px; color: rgba(255,255,255,.84); }
.nav-item:hover { background: rgba(255,255,255,.10); }

/* ícones de traço do menu (máscaras em marca-icones.css): o glifo antigo continua no lugar, invisível, e segura o
   tamanho; o desenho novo entra por cima, na cor do texto do item. */
.nav-item .ico, .sidebar-brand .brand-mark { position: relative; }
.nav-item .ico::before, .sidebar-brand .brand-mark::before {
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / 16px 16px no-repeat;
  mask: var(--icone) center / 16px 16px no-repeat;
}

/* ---------- conteúdo ---------- */
.card, .kpi { border-color: transparent; box-shadow: var(--sombra-1); }

.btn, .btn-back { border-radius: 12px; }
.btn-primary { background: linear-gradient(135deg, var(--verde), var(--verde-mata)); box-shadow: var(--sombra-botao); }
.btn-primary:hover { background: linear-gradient(135deg, var(--verde-mata), var(--verde-fundo)); }
.btn-ghost:hover, .btn-back:hover { border-color: var(--verde); color: var(--verde-mata); }