/* ==========================================================================
   base.css — variáveis (cores da marca, tipografia), modo claro/escuro e reset

   Cores da marca DD Digital (do logótipo):
     verde-escuro  #0d261f   (o "D" escuro)
     verde-lima    #83d23b → #aadd3a   (o "D" verde, em degradé)
   Para mudar a cor de destaque, altera --lime/--lime-2 (botões, gráficos) e --accent (texto).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Marca */
  --brand-dark: #0d261f;
  --brand-deep: #174735;
  --lime: #a9dd3b;
  --lime-2: #83d23b;
  --lime-soft: #c9f27a;

  /* Superfícies e texto */
  --bg: #e8efe2;
  --panel: rgba(255, 255, 255, .58);          /* o "painel" grande onde vive cada página */
  --surface: #ffffff;
  --surface-2: #f1f6ec;
  --text: #0d261f;
  --text-2: #4b5f57;
  --text-3: #5f716a;
  --border: rgba(13, 38, 31, .08);
  --border-strong: rgba(13, 38, 31, .18);

  /* Cor de destaque (texto, ligações, separador ativo) e o que fica "em cima" da lima */
  --accent: #2f7a0c;
  --accent-ink: #0d261f;
  --accent-soft: #e5f3d0;

  /* Degradés */
  --grad-lime: linear-gradient(135deg, #83d23b 0%, #aadd3a 100%);
  --grad-dark: linear-gradient(165deg, #174735 0%, #0d261f 100%);
  --grad-side: linear-gradient(175deg, #1a4a37 0%, #0f2f24 45%, #0a1f19 100%);

  /* Estados: pago (verde), pendente (âmbar), atrasado (vermelho) */
  --ok: #17724a;      --ok-bg: #e0f2e7;
  --warn: #8a5700;    --warn-bg: #fcefd2;
  --danger: #b42318;  --danger-bg: #fde9e7;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(13, 38, 31, .04), 0 10px 30px rgba(13, 38, 31, .08);
  --shadow-lg: 0 30px 70px rgba(13, 38, 31, .22);
  --shadow-btn: 0 8px 18px rgba(131, 210, 59, .38);

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 236px;
  --gap-page: 20px;                           /* margem entre o menu, o painel e a janela */

  /* Ícone de pesquisa (SVG em data-URI não pode usar variáveis) */
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5f57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5f57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Tema escuro: o atributo data-theme é posto por js/theme-init.js (preferência guardada ou a do sistema) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07140f;
    --panel: rgba(255, 255, 255, .035);
    --surface: #10241c;
    --surface-2: #163027;
    --text: #edf3e6;
    --text-2: #a9bbb0;
    --text-3: #8ba296;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .2);

    --accent: #a9dd3b;
    --accent-ink: #0d261f;
    --accent-soft: rgba(169, 221, 59, .14);

    --grad-dark: linear-gradient(165deg, #1d5340 0%, #0f2f24 100%);
    --grad-side: linear-gradient(175deg, #123a2b 0%, #0b241b 50%, #07170f 100%);

    --ok: #5cc690;      --ok-bg: rgba(92, 198, 144, .14);
    --warn: #e8b550;    --warn-bg: rgba(232, 181, 80, .14);
    --danger: #f2877d;  --danger-bg: rgba(242, 135, 125, .14);

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
    --shadow-btn: 0 8px 18px rgba(131, 210, 59, .22);

    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bbb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bbb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Fundo suave com "brilhos" de verde, como nas referências */
  background:
    radial-gradient(900px 520px at 10% 4%, rgba(169, 221, 59, .20), transparent 62%),
    radial-gradient(800px 600px at 96% 92%, rgba(46, 140, 100, .16), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Foco visível para quem navega com o teclado */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--text-2); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }

/* Imagens que só aparecem num dos temas (logótipo escuro / claro) */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }

/* Só para leitores de ecrã */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}