/* ============================================================
   AMF — Identidade Institucional aplicada ao Painel de Projetos
   Tokens e proporcoes vindos de SITE AMF/site/assets/amf.css e de
   SITE AMF/tools/theme/REFERENCIA-DESIGN.md (extraidos do site no ar).

   Este arquivo entra DEPOIS do <style> de cada pagina: os tokens do
   :root de lá já sao os institucionais; aqui ficam (1) a assinatura
   tipografica, (2) o preloader azul, (3) os ajustes de forma e
   movimento que o site tem e o app nao tinha.
   ============================================================ */

:root {
  /* paleta institucional — mesma nomenclatura do site */
  --brand: #055FFB;
  --brand-600: #0a4fd8;
  --brand-50: #EAF1FE;
  --ink: #1B1E22;
  --navy: #040D1C;
  --mist: #F3F4F6;
  --line: #E6EAF0;
  --muted: #5B6472;
  --muted-soft: #99A2B1;

  /* raios: pilula e midia vem do site; o card do app e mais contido que
     os 30px do site porque aqui a densidade de dados e muito maior */
  --r-pill: 999px;
  --r-media: 15px;

  /* a curva que o site usa em praticamente tudo */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-carousel: cubic-bezier(.16, 1, .3, 1);
}

/* ===================== ASSINATURA TIPOGRAFICA ===========================
   Inter em tudo, -0.04em nos titulos, entrelinha perto de 1 nos grandes.  */

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.04em; }
h1 { line-height: 1.04; }
h2 { line-height: 1.06; }
h3 { line-height: 1.1; }
h4 { line-height: 1.2; }

/* Numeros grandes (KPI, meta do dia, valor do funil): o site usa peso alto
   com entrelinha curta e o mesmo espacamento negativo. */
.kpi .value,
.f-val,
.goal-hero-num,
.kb-row .kb-val,
.tl-label .tl-goal-val {
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Palavra destacada: serif italico, maior que o texto ao redor (o papel que
   .destaque1 cumpre no site). Disponivel para titulos do app. */
.em {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: -.04em;
}

/* Rotulos em caixa alta: o site nunca passa de .08em e usa peso 700. */
.section-label, .section-title, .kpi .label,
.goal-hero-label, .src-title, .tl-label .tl-goal-label {
  letter-spacing: .08em;
}

/* ===================== FORMA — pilulas e molduras ======================= */

/* Botao: o site nao tem botao de canto arredondado curto, tem pilula. */
.btn, .btn-salvar, .mini-btn, .icon-btn, .day-tab, .btn-add-chk,
.kb-move, .kb-edit, .ev-caret, .del-data {
  border-radius: var(--r-pill);
}
.mini-btn, .icon-btn, .ev-caret, .chk-box { border-radius: 12px; }

/* Movimento: a curva do site em lugar do "transition: .15s" linear. */
.btn, .btn-salvar, .tabs button, .mode-switch button, .seg button,
.day-tab, .folder-card, a.card, .proj-card, .kb-task, .resp-chip,
.mini-btn, .kb-move, .kb-edit, .chk-box, .task-check, .btn-add-chk {
  transition: transform .35s var(--ease), background-color .25s ease,
              border-color .25s ease, color .25s ease, box-shadow .35s var(--ease);
}

/* O realce do site e escala + sombra azul, nao brilho. */
.btn:hover, .btn-salvar:hover { transform: scale(1.03); filter: none; }
.btn:active, .btn-salvar:active { transform: scale(.985); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(var(--accent-rgb), .28); }

/* Foco visivel na cor institucional (acessibilidade + identidade). */
:is(.btn, .btn-salvar, .tabs button, .mode-switch button, .seg button,
    .day-tab, .mini-btn, .kb-move, .kb-edit, a.card, .folder-card,
    .proj-card):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ===================== PRELOADER — logo vazado ==========================
   Copia da peca de assinatura do site: tela azul institucional, o brasao
   se desenha em traco, preenche de branco, e depois vira um buraco que
   engole a tela. Sem dependencia externa (o site usa GSAP; aqui e rAF).  */

.amf-preloader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: #055FFB;
  overflow: hidden; isolation: isolate;
}
.amf-preloader-reveal {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  visibility: hidden; opacity: 0;
  overflow: hidden; pointer-events: none;
}
.amf-preloader-logo-wrap {
  position: relative; z-index: 2;
  width: clamp(150px, 13vw, 230px); aspect-ratio: 40 / 30;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.94);
  will-change: transform, opacity;
}
.amf-preloader-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.amf-preloader-logo path {
  fill: transparent;
  /* 2.5 em vez dos 1.25 do site: o brasao tem muito mais detalhe que um
     logotipo em texto e o traco fino desaparecia no azul. */
  stroke: #FFFFFF; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
html.amf-preloader-active, body.amf-preloader-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Rede de seguranca sem JS: se amf-intro.js nao carregar (offline, arquivo
   movido), o azul sai sozinho em vez de cobrir o painel para sempre. Com o
   script funcionando o preloader e removido em ~2,5s e isto nunca dispara.
   O caso de JS desligado e coberto pelo <noscript> na propria pagina. */
.amf-preloader { animation: amf-preloader-escape 0s linear 8s forwards; }
@keyframes amf-preloader-escape {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* A pagina sobe junto com o fim do zoom — o mesmo encaixe que no site faz a
   intro da hero comecar dentro do zoom, nao depois dele. */
html.amf-preloader-active body > .wrap { opacity: 0; transform: translate3d(0, 18px, 0); }
body > .wrap {
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}

/* ===================== movimento reduzido ============================== */
@media (prefers-reduced-motion: reduce) {
  html.amf-preloader-active body > .wrap { opacity: 1; transform: none; }
  body > .wrap, .btn, .btn-salvar, .tabs button, .mode-switch button,
  .seg button, .day-tab, .folder-card, a.card, .proj-card, .kb-task {
    transition: none;
  }
  .btn:hover, .btn-salvar:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================= CHROME DO PAINEL — toques institucionais ==============
   O que vem daqui para baixo nao existia no app: sao as marcas do site
   aplicadas as pecas que o painel ja tinha.                               */

/* ---- Cabecalho do dashboard + assinatura do projeto --------------------
   A cor que o gestor escolhe no projeto aparece NESTA faixa (e no quadrado
   do logo), nao repintando a interface. Ver applyTheme() no dashboard. */
header.top {
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
header.top::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 3px;
  width: clamp(72px, 20%, 200px); border-radius: var(--r-pill);
  background: linear-gradient(90deg,
              var(--project, var(--brand)), var(--project-soft, var(--brand-50)));
}
.brand .logo {
  background: linear-gradient(135deg,
              var(--project, var(--brand)), var(--project-deep, var(--brand-600)));
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .45);
}
.brand h1 { font-size: 21px; letter-spacing: -.035em; }

/* Marca institucional no canto: o brasao volta ao Painel e e o unico lugar
   da tela que nao muda de projeto para projeto. */
.amf-voltar {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; text-decoration: none;
  white-space: nowrap; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.amf-voltar img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.amf-voltar:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-50); }

/* ---- Abas: pilula azul cheia na ativa, como os botoes do site ---------- */
.tabs button.active {
  background: var(--brand); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .45);
}
.tabs button:hover:not(.active) { border-color: var(--brand); color: var(--brand); }

/* ---- Molduras internas: a familia de raios do site --------------------- */
.panel, .kpi { border-radius: var(--radius); }
.kb-card, .kb-col, .ev-card, .proj-card, .dayprog, .modal-box { border-radius: 18px; }
.wk-col, .cal-cell, .chk-block, .rec-block, .det-desc, .table-wrap { border-radius: var(--r-media); }
.cal-head, .tl-col-head { border-radius: 10px; }
.modal-box { border-radius: 24px; box-shadow: var(--shadow-float); }

/* ---- Rotulo de secao: caixa alta discreta, como no site ----------------
   O site usa --muted-soft (#99A2B1) nesses rotulos, mas la eles sao maiores;
   aqui sao 11px em caixa alta, e #99A2B1 no branco da ~2,5:1. Fica no
   --muted (~6:1), que e legivel e continua discreto. */
.section-title, .section-label { color: var(--muted); font-weight: 700; }

/* ---- Tabela: cabecalho em mist, linha do hover em azul lavado ---------- */
th { color: var(--muted); }

/* ---- Toast: cartao branco com a sombra tingida de azul ---------------- */
.toast {
  background: #fff; color: var(--ink);
  border-radius: var(--r-pill); box-shadow: var(--shadow-float);
}

/* ---- Campos de formulario ---------------------------------------------
   A borda institucional (--line, #E6EAF0) da ~1,2:1 no branco. Num divisor
   decorativo isso esta certo — e o valor do site. Num CAMPO, a borda e o
   que diz onde clicar, entao ali ela escurece um pouco; junto com o
   preenchimento em mist, o campo fica claramente delimitado. */
input, select, textarea, .busca-box { border-color: #d7dee9; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }


/* ===================== TEMA ESCURO =====================================
   Mesma paleta institucional do app de Marketing: #011e39 de fundo, #c4986b
   de ação, branco no texto. Os degraus intermediários são tirados dessas três
   — o azul clareado em degraus para as superfícies, o branco puxado para o
   azul nos textos secundários.

   O dourado assume o lugar do azul: azul da marca sobre azul-escuro não se lê.
   E como texto branco sobre dourado tem contraste ruim, existe --on-brand: o
   que se escreve EM CIMA da cor de ação.

   Este app tem tokens que o de Marketing não tem — os pares -wash e -line de
   cada situação, que desenham fundo e borda de chip. Eles são rgba() com a cor
   escrita por extenso, então precisam ser redefinidos aqui um a um: no escuro,
   um lavado de 8% some.
   ====================================================================== */

:root[data-tema="claro"], :root:not([data-tema]) {
  --on-brand: #ffffff;
  --accent-rgb: 5,95,251;
}

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

  --bg:      #011E39;
  --bg-2:    #0B3A64;      /* mist: campos, chips, colunas do quadro */
  --card:    #062B4E;
  --card-2:  #0B3A64;
  --border:  #1D6193;
  --text:    #FFFFFF;
  --text-dim:#9FB6C7;

  --accent:     #C4986B;
  --accent-2:   #D8B189;
  --accent-rgb: 196,152,107;
  --on-brand:   #011E39;

  /* Situação: os tons do tema claro foram calibrados PARA BRANCO e somem no
     azul escuro (#0c7d50 é verde quase preto). Mesmo significado, claros o
     bastante para se lerem. */
  --green:  #46C98A;
  --red:    #F0908A;
  --yellow: #E5C36B;

  /* Lavados e bordas: 8% de uma cor clara sobre fundo escuro não aparece.
     Sobem para 16% e 40%. */
  --green-wash:  rgba(70, 201, 138, .16);
  --green-line:  rgba(70, 201, 138, .40);
  --red-wash:    rgba(240, 144, 138, .16);
  --red-line:    rgba(240, 144, 138, .40);
  --amber-wash:  rgba(229, 195, 107, .16);
  --amber-line:  rgba(229, 195, 107, .40);
  --accent-wash: rgba(196, 152, 107, .16);
  --accent-line: rgba(196, 152, 107, .44);

  /* Sombra colorida some no escuro; o que dá relevo é preto. */
  --shadow:       0 1px 2px rgba(0,0,0,.5), 0 18px 34px -20px rgba(0,0,0,.75);
  --shadow-float: 0 10px 22px -8px rgba(0,0,0,.55), 0 34px 60px -26px rgba(0,0,0,.8);
}

:root[data-tema="escuro"] body { background: var(--bg); color: var(--text); }

/* O botão do tema: mesma peça nas duas telas, que aqui não têm cabeçalho
   montado por script. */
.tema-bt{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border:0;
  border-radius:12px;background:var(--bg-2);color:var(--text);cursor:pointer;
  transition:background-color .2s ease,color .2s ease;}
.tema-bt:hover{background:var(--border);}
.tema-bt:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.4);}
/* Na capa não existe cabeçalho: o botão fica no canto, acima de tudo. */
.tema-bt.solto{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;z-index:40;
  box-shadow:var(--shadow);}
@media (prefers-reduced-motion: reduce){ .tema-bt{transition:none;} }