/*
 * D·Central — identidade visual Dome (fonte única de verdade).
 *
 * Fontes, cores, sombras e estados de TODO o ambiente moram aqui, nos temas
 * claro e escuro. É carregado pelo app principal (client/index.html) e pelo
 * News (public/newsfeed/index.html).
 *
 * Regra: os demais CSS não usam cor literal nem nome de fonte — só var(--token).
 * Para mudar a cara da plataforma, mude este arquivo.
 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  /* Tipografia — Outfit é a fonte da marca, em títulos, números e texto. */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Paleta da marca Dome (igual nos dois temas). */
  --dome-orange: #fe6337;
  --dome-orange-strong: #e84e20;
  --dome-orange-tint: #ff9277;
  --dome-black: #050505;

  /* Logo sobre superfície do tema (cartão de login etc.). Sobre fundo preto fixo, use sempre a versão clara. */
  --logo-on-surface: url("/brand/dome-logo-dark.png");

  /* Superfícies */
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-hover: #fff8f5;
  --surface-selected: #fff4ef;
  --overlay: rgba(11, 12, 12, 0.62);
  /* Fundo sempre branco: logos de cliente e QR code precisam dele nos dois temas. */
  --plate: #ffffff;
  --on-plate: #5f5c58;

  /* Texto */
  --text: #111111;
  --muted: #747775;
  --on-brand: #ffffff;

  /* Bordas */
  --line: #e2dfdc;
  --border-soft: #ebe8e5;
  --input-border: #d4d0cc;

  /* Marca aplicada: --brand para preenchimento/borda/ícone, --brand-ink para texto. */
  --brand: var(--dome-orange);
  --brand-strong: var(--dome-orange-strong);
  --brand-tint: var(--dome-orange-tint);
  --brand-ink: #c9431c;
  --brand-soft: #fff0eb;
  --brand-line: #ffd3c4;
  --brand-glow: rgba(254, 99, 55, 0.16);
  --focus-ring: rgba(254, 99, 55, 0.36);

  /* Áreas sempre escuras (sidebar, timer de acesso, login), nos dois temas. */
  --sidebar-bg: var(--dome-black);
  --sidebar-panel: #141414;
  --sidebar-hover: #1c1c1c;
  --sidebar-line: #2c2c2c;
  --sidebar-text: #c7c7c5;
  --sidebar-muted: #9b9b99;
  /* Campo da busca do menu: preto puro, um tom abaixo do fundo, para quase sumir na sidebar. */
  --sidebar-input-bg: #000000;
  --on-dark: #ffffff;
  --on-dark-muted: #dededb;
  --on-dark-brand: #ffb199;

  /* Estados: --X serve para texto, ícone e preenchimento; --X-soft é o fundo tingido. */
  --success: #1d8049;
  --success-soft: #e2f3e8;
  --success-line: #b9dfc8;
  --success-strong: #176044;
  --warning: #a86b0c;
  --warning-soft: #fcf0d9;
  --warning-line: #f0d896;
  --danger: #bd3528;
  --danger-soft: #fbe4e1;
  --danger-line: #f1cbc8;
  --danger-strong: #9d3030;
  --info: #2c68a8;
  --info-soft: #e3edf8;
  --info-line: #c5d6f2;
  --attention: #a44f13;
  --attention-soft: #fee9d8;
  --violet: #6f45b8;
  --violet-soft: #eee7fa;
  --slate: #46546a;
  --neutral: #5f5c58;
  --neutral-soft: #efeeeb;
  --neutral-dot: #aaa6a2;
  --star: #f3b62b;

  /* Aniversários: pop-ups e cartões festivos (modelos confete, bolo e presente). */
  --party-pink: #f0457e;
  --party-yellow: #f7b928;
  --party-teal: #17a99a;
  --party-violet: #7b5cf0;
  --party-orange: #fe6337;
  --party-ink: #3b1640;
  --party-glow: rgba(240, 69, 126, 0.22);
  --party-confete-from: #fff1e3;
  --party-confete-to: #ffe1ee;
  --party-bolo-from: #fff6d9;
  --party-bolo-to: #ffdfe8;
  --party-presente-from: #e5f3ff;
  --party-presente-to: #ece4ff;
  /* Boneco que dança depois do envio do cartão: sombra no chão e bolinhas do chapéu. */
  --party-floor: rgba(17, 17, 17, 0.12);
  --party-sparkle: rgba(255, 255, 255, 0.55);

  /* Nota interna do ticket */
  --note-bg: #fffbec;
  --note-line: #d4a923;

  /* Gráficos */
  --chart-1: var(--brand);
  --chart-2: #4f709b;
  --chart-3: #2f9e72;
  --chart-4: #e4a84c;
  --chart-muted: #aeb5bd;
  --chart-track: #edf0f1;
  /* Growth Assessment: pessoa × automação, par validado para daltonismo (protan/deutan/tritan) e contraste. */
  --growth-human: #e8562b;
  --growth-human-soft: #fdeee8;
  --growth-auto: #2f6fc4;
  --growth-auto-soft: #eaf1fb;
  /* Capacity de Desenvolvimento: prioridade em um tom só (mais escuro = mais urgente) e mapa de calor da carga. */
  --capacity-urgent: #1c4f8f;
  --capacity-high: #3a7bd5;
  --capacity-normal: #93bdf0;
  --capacity-past: #bdbab5;
  /* Capacity de Suporte: reserva para os chamados que ainda vão chegar, fora da escala das prioridades. */
  --capacity-reserve: #b7a6dc;
  --capacity-heat-1: #e3edf8;
  --capacity-heat-2: #b5cff0;
  --capacity-heat-3: #7eaae4;
  --capacity-heat-4: #3f7bc9;
  --capacity-heat-5: #1c4f8f;
  --capacity-heat-ink: #ffffff;
  /* Ganhos do D·Central: economia realizada (sólida) e prevista (mesmo tom, mais claro). */
  --gains-done: #1d8049;
  --gains-planned: #a7d8bb;

  /* RBAC: um tom por nível de acesso (Nenhum azul, Ver verde, Criar amarelo, Editar laranja, Completo vermelho). */
  --level-none: #2c68a8;
  --level-none-soft: #e3edf8;
  --level-none-line: #c5d6f2;
  --level-view: #1d8049;
  --level-view-soft: #e2f3e8;
  --level-view-line: #b9dfc8;
  --level-create: #7a6200;
  --level-create-soft: #fcf3c4;
  --level-create-line: #ead77a;
  --level-edit: #b0500d;
  --level-edit-soft: #fde4cf;
  --level-edit-line: #f5bf90;
  --level-full: #b02a1e;
  --level-full-soft: #fbdcd8;
  --level-full-line: #eeb2ab;

  /* Metodologia de Implantação: trilha da jornada (o laranja escurece até a virada; a Operação Assistida esmaece). */
  --method-seg-1: #ffc9b6;
  --method-seg-1-ink: #5c200c;
  --method-seg-3: #e84e20;
  --method-seg-4: #c9431c;
  --method-seg-5: #9e3415;
  --method-seg-oa-from: #3b3b3b;
  --method-seg-oa-to: #c4c0bc;
  --method-seg-oa-ink: #ffffff;
  --method-dots: #e4e1dd;

  /* Elevação */
  --shadow-sm: 0 2px 5px rgba(17, 17, 17, 0.03);
  --shadow: 0 14px 38px rgba(17, 17, 17, 0.09);
  --shadow-pop: 0 18px 45px rgba(17, 17, 17, 0.16);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.24);
  --shadow-float: 0 12px 28px rgba(17, 17, 17, 0.28);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --logo-on-surface: url("/brand/dome-logo-light-horizontal.png");

  --bg: #111315;
  --surface: #1b1d1f;
  --surface-2: #222527;
  --surface-hover: #272524;
  --surface-selected: #30241f;
  --overlay: rgba(0, 0, 0, 0.7);

  --text: #f2f1ef;
  --muted: #9a9b98;

  --line: #2d3033;
  --border-soft: #2a2d2f;
  --input-border: #3a3e42;

  --brand-ink: #ff9b7c;
  --brand-soft: #3a241d;
  --brand-line: #5a3226;

  --success: #4cc27f;
  --success-soft: #173222;
  --success-line: #2a5240;
  --success-strong: #1f7a54;
  --warning: #e2a64a;
  --warning-soft: #352a14;
  --warning-line: #5a4c1f;
  --danger: #ff6b5c;
  --danger-soft: #3a1c19;
  --danger-line: #6a3430;
  --danger-strong: #b23a32;
  --info: #6ea5e0;
  --info-soft: #1a2a3b;
  --info-line: #2e4763;
  --attention: #f0a35e;
  --attention-soft: #3a2616;
  --violet: #b393ee;
  --violet-soft: #2a2140;
  --slate: #a9b6ca;
  --neutral: #c2bfbb;
  --neutral-soft: #26292b;
  --neutral-dot: #77736f;
  --star: #f3b62b;

  --party-pink: #ff6b9a;
  --party-yellow: #ffcb4d;
  --party-teal: #3cc9b8;
  --party-violet: #a48bff;
  --party-orange: #ff7a52;
  --party-ink: #fff0f6;
  --party-glow: rgba(255, 107, 154, 0.28);
  --party-confete-from: #3b2418;
  --party-confete-to: #3a1d2b;
  --party-bolo-from: #382e14;
  --party-bolo-to: #3a1f2a;
  --party-presente-from: #16283a;
  --party-presente-to: #281f40;
  --party-floor: rgba(0, 0, 0, 0.45);
  --party-sparkle: rgba(255, 255, 255, 0.45);

  --note-bg: #29261a;
  --note-line: #c49a2c;

  --chart-2: #7fa3d1;
  --chart-3: #4cc27f;
  --chart-4: #e2b44a;
  --chart-muted: #5c6166;
  --chart-track: #2a2d2f;
  --growth-human: #e8562b;
  --growth-human-soft: #3a241d;
  --growth-auto: #5b8fe8;
  --growth-auto-soft: #1a2a3b;
  --capacity-urgent: #a9cdf7;
  --capacity-high: #5b9be6;
  --capacity-normal: #2f5f99;
  --capacity-past: #55595d;
  --capacity-reserve: #6c5c96;
  --capacity-heat-1: #1c2a3a;
  --capacity-heat-2: #23405f;
  --capacity-heat-3: #2e5c8e;
  --capacity-heat-4: #4a86c9;
  --capacity-heat-5: #8bbaf0;
  --capacity-heat-ink: #0d1620;
  --gains-done: #4cc27f;
  --gains-planned: #2f6247;

  --level-none: #6ea5e0;
  --level-none-soft: #1a2a3b;
  --level-none-line: #2e4763;
  --level-view: #4cc27f;
  --level-view-soft: #173222;
  --level-view-line: #2a5240;
  --level-create: #ecd24a;
  --level-create-soft: #353012;
  --level-create-line: #5e5420;
  --level-edit: #ff9a4d;
  --level-edit-soft: #3d2512;
  --level-edit-line: #6a3f1e;
  --level-full: #ff6b5c;
  --level-full-soft: #3e1b18;
  --level-full-line: #70322c;

  --method-seg-1: #5a3226;
  --method-seg-1-ink: #ffd3c4;
  --method-seg-3: #e84e20;
  --method-seg-4: #c9431c;
  --method-seg-5: #9e3415;
  --method-seg-oa-from: #77736f;
  --method-seg-oa-to: #2a2d2f;
  --method-seg-oa-ink: #ffffff;
  --method-dots: #25282a;

  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.25);
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Slides do All Hands: sempre no tema claro, iguais na tela e no PDF exportado. */
.ah-slide {
  color-scheme: light;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --text: #111111;
  --muted: #747775;
  --line: #e2dfdc;
  --border-soft: #ebe8e5;
  --brand-ink: #c9431c;
  --brand-soft: #fff0eb;
  --brand-line: #ffd3c4;
  --success: #1d8049;
  --success-soft: #e2f3e8;
  --warning: #a86b0c;
  --warning-soft: #fcf0d9;
  --danger: #bd3528;
  --danger-soft: #fbe4e1;
  --info-soft: #e3edf8;
  --chart-2: #4f709b;
  --chart-3: #2f9e72;
  --chart-4: #e4a84c;
  --chart-muted: #aeb5bd;
  --chart-track: #edf0f1;
  --neutral-soft: #efeeeb;
  --shadow-sm: 0 2px 5px rgba(17, 17, 17, 0.03);
}

/* Relatório de horas e e-mail de saldo do Faturamento: é o que o cliente recebe, então sempre no tema claro. */
.bl-report,
.bl-mail {
  color-scheme: light;
  --surface: #ffffff;
  --surface-2: #f7f5f3;
  --text: #161616;
  --muted: #6b6b6b;
  --line: #e6e2de;
  --border-soft: #f0ece9;
  --brand-ink: #c9431c;
  --success: #1d8049;
  --warning: #a86b0c;
  --warning-ink: #8a6a2c;
}

/* PDFs dos Testes e do report de implantação: sempre no tema claro, mesmo com o tema escuro ligado. */
@media print {
  body:has(.tests-result), body:has(.impl) {
    color-scheme: light;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --text: #111111;
    --muted: #747775;
    --line: #e2dfdc;
    --border-soft: #ebe8e5;
    --brand-ink: #c9431c;
    --brand-soft: #fff0eb;
    --success: #1d8049;
    --success-soft: #e2f3e8;
    --warning: #a86b0c;
    --warning-soft: #fcf0d9;
    --danger: #bd3528;
    --danger-soft: #fbe4e1;
    --info: #2c68a8;
    --info-soft: #e3edf8;
    --on-brand: #ffffff;
    --input-border: #d4d0cc;
    --slate: #46546a;
    --violet: #6f45b8;
    --violet-soft: #eee7fa;
    --neutral-soft: #efeeeb;
    --shadow: 0 14px 38px rgba(17, 17, 17, 0.09);
  }

  /* One Page do Comercial: papel claro mesmo com o tema escuro, inclusive as margens da folha. */
  html:root:has(.crm-op) { color-scheme: light; background: #ffffff; }
  body:has(.crm-op) {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --text: #111111;
    --muted: #747775;
    --line: #e2dfdc;
    --border-soft: #ebe8e5;
    --input-border: #d4d0cc;
    --brand-soft: #fff0eb;
    --brand-line: #ffd3c4;
    --success: #1d8049;
    --success-soft: #e2f3e8;
    --warning: #a86b0c;
    --danger: #bd3528;
    --danger-soft: #fbe4e1;
    --neutral: #5f5c58;
    --neutral-soft: #efeeeb;
    --chart-2: #4f709b;
    --chart-3: #2f9e72;
    --chart-4: #e4a84c;
    --chart-muted: #aeb5bd;
    --chart-track: #edf0f1;
  }
}

/* Base comum aos dois apps */
:root {
  font-family: var(--font-sans);
  font-synthesis: none;
  color: var(--text);
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Campos sem estilo próprio seguem o tema (no dark, o padrão do navegador fica cinza). */
:where(input, select, textarea) {
  background-color: var(--surface);
  color: inherit;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

:where(button, input, select, textarea, a, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}