/* Visual novo do Norte (02/11/2026, D0 do plano da Interpartner). Família visual da Interpartner (desenho/familia.css):
   Montserrat da própria pasta, selo com o logo, a régua do dia, cartões com ação, abas fixas Hoje, Espelho e Ajuda,
   tema claro e escuro. DESLIGADO no padrão: o visual de sempre não muda. "Experimentar o visual novo" (fim da tela
   inicial) liga este arquivo só neste celular (o <link data-pele> do index.html) e põe a classe visual-novo no <html>.
   Tudo aqui vale só com html.visual-novo; as telas que já existiam ganham só a letra, as cores do tema e rótulos sem
   caixa alta (o nome, a ordem e o lugar de cada coisa ficam como sempre foram).
   Letra: Montserrat, licença SIL Open Font License 1.1 (assets/fonts/OFL.txt), os mesmos arquivos do Compasso. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html.visual-novo {
  --verde: #008D45; --verde-mata: #006B33; --verde-fundo: #004F25; --verde-claro: #2FB46A;
  --papel: #EEF3EF; --superficie: #FFFFFF; --superficie-suave: #F4FAF6; --suave: #E9F6EF;
  --tinta: #15241C; --grafite: #728579; --fio: #E4ECE7; --futuro: #D5DED8;
  --ambar: #D98A2B; --ambar-suave: #FBF1E3; --ambar-texto: #8A5513; --vermelho: #C8372D; --vermelho-suave: #FBE9E7;
  --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 8px 18px rgba(0,141,69,.28);
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* as variáveis que as telas de sempre usam, apontadas para a família (no claro são as mesmas cores) */
  --ui: var(--fonte); --ink: var(--tinta); --muted: var(--grafite); --line: var(--fio);
  --soft: var(--suave); --soft2: var(--superficie-suave); --amber: var(--ambar); --amberS: var(--ambar-suave);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html.visual-novo {
    --papel: #0E1A13; --superficie: #16261C; --superficie-suave: #1B2E22; --suave: #1F3A2A;
    --tinta: #E8F1EB; --grafite: #9DB3A5; --fio: #284335; --futuro: #2C4336;
    --ambar-suave: #3A2B14; --ambar-texto: #F0B56A; --vermelho-suave: #3C1C19;
    --sombra-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
    --sombra-2: 0 10px 30px rgba(0,0,0,.5);
    --redS: var(--vermelho-suave);
    color-scheme: dark;
  }
}

html.visual-novo body { font-family: var(--fonte); color: var(--tinta); background: var(--papel); font-variant-numeric: tabular-nums; }
html.visual-novo .app { background: var(--papel);
  background-image: radial-gradient(600px 400px at 100% -10%, rgba(0,141,69,.10), transparent 60%),
                    radial-gradient(500px 300px at -10% 110%, rgba(0,107,51,.08), transparent 60%); }
html.visual-novo.nh-com-abas .app { padding-bottom: 86px; }

/* ---------- as telas de sempre, no visual novo: só letra, tema e rótulo sem caixa alta ---------- */
html.visual-novo .st { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--grafite); }
html.visual-novo thead th, html.visual-novo .tot div small { text-transform: none; letter-spacing: 0; }
html.visual-novo .field label { letter-spacing: 0; }
html.visual-novo .card, html.visual-novo .mirror-hd, html.visual-novo .tot div, html.visual-novo table,
html.visual-novo .he-day, html.visual-novo .sheet, html.visual-novo .motbtn,
html.visual-novo .field2 input, html.visual-novo .field2 textarea { background: var(--superficie); color: var(--tinta); border-color: var(--fio); }
html.visual-novo thead th { background: var(--superficie-suave); }
html.visual-novo tr.wd { background: var(--superficie-suave); }
html.visual-novo .comp .ic, html.visual-novo .btn-ghost, html.visual-novo .shutter { background: var(--suave); }
html.visual-novo .warn { background: var(--ambar-suave); color: var(--ambar-texto); border-color: transparent; }
html.visual-novo .warn b { color: var(--ambar-texto); }
html.visual-novo .he-extra { background: var(--ambar-suave); color: var(--ambar-texto); border-color: transparent; }
html.visual-novo .signbar { background: linear-gradient(transparent, var(--papel) 26%); }
html.visual-novo .signed { background: var(--suave); border-color: var(--fio); }
html.visual-novo .signed b { color: var(--tinta); }
html.visual-novo .consent { background: var(--superficie-suave); border-color: var(--fio); }
html.visual-novo .grip { background: var(--fio); }
@media (prefers-color-scheme: dark) {
  html.visual-novo .comp .ic, html.visual-novo .btn-ghost, html.visual-novo .shutter, html.visual-novo .comp .chev { color: var(--verde-claro); }
  html.visual-novo .pill.ok, html.visual-novo .tg.normal { background: var(--suave); color: var(--verde-claro); }
  html.visual-novo .pill.pend, html.visual-novo .tg.inconsistente, html.visual-novo .tg.sem_dados { background: var(--ambar-suave); color: var(--ambar-texto); }
  html.visual-novo .he-amt { background: var(--ambar-suave); color: var(--ambar-texto); }
  html.visual-novo .he-foot.pend, html.visual-novo .he-ends .late { color: var(--ambar-texto); }
  html.visual-novo .he-day.done { background: var(--superficie); border-color: var(--fio); }
  html.visual-novo .he-summary .n, html.visual-novo .he-dur, html.visual-novo .he-foot.ok,
  html.visual-novo .he-day.done .he-amt { color: var(--verde-claro); }
  html.visual-novo .motbtn.on { background: var(--suave); color: var(--verde-claro); }
  html.visual-novo .tg.dsr, html.visual-novo .tg.livre, html.visual-novo .tg.futuro, html.visual-novo .tg.inativo { background: var(--superficie-suave); color: var(--grafite); }
  html.visual-novo .tg.sabado, html.visual-novo .tg.banco { background: #1C2B3D; color: #8DB8E8; }
  html.visual-novo .tg.feriado, html.visual-novo .tg.folga, html.visual-novo .tg.domingo,
  html.visual-novo .tg.justificado, html.visual-novo .tg.ferias, html.visual-novo .tg.licenca, html.visual-novo .tg.atestado { background: #2A2238; color: #C4A8E8; }
  html.visual-novo .tg.falta { background: var(--vermelho-suave); color: #F2A49B; }
  html.visual-novo .signed small, html.visual-novo .evi .e span { color: var(--grafite); }
}

/* ---------- a aba Hoje, a Ajuda e as abas (classes nh-*, só existem no visual novo) ---------- */
.nh-cab { background: linear-gradient(150deg, var(--verde) 0%, var(--verde-mata) 55%, var(--verde-fundo) 100%); color: #fff;
  padding: 18px 20px 46px; border-radius: 0 0 26px 26px; box-shadow: 0 10px 24px rgba(0,79,37,.25); position: relative; overflow: hidden; }
.nh-cab::before { content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.nh-marca { display: flex; align-items: center; gap: 12px; position: relative; }
.nh-marca strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em; display: block; line-height: 1; }
.nh-marca span { font-size: 12px; font-weight: 600; opacity: .85; display: block; margin-top: 4px; }
.nh-selo { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.16); flex: none; }
.nh-selo img { width: 40px; height: 40px; object-fit: contain; display: block; }
.nh-sair { position: absolute; right: 16px; top: 18px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 14px; border-radius: 12px; border: 0; min-height: 44px; z-index: 2; }
.nh-ola { margin-top: 18px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; position: relative; }
.nh-quando { font-size: 13px; font-weight: 600; opacity: .9; margin-top: 3px; position: relative; }
.nh-miolo { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 14px; margin-top: -30px; position: relative; }
.nh-cartao { background: var(--superficie); color: var(--tinta); border-radius: 14px; box-shadow: var(--sombra-1); padding: 16px 18px; }
.nh-cartao h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.nh-cartao h3 { font-size: 15px; font-weight: 700; }
.nh-cartao p { font-weight: 500; }
.nh-hero { border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--sombra-2); position: relative; overflow: hidden; }
.nh-hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--verde), var(--verde-claro)); }
.nh-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nh-previa { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--grafite); background: var(--superficie-suave);
  border: 1px solid var(--fio); border-radius: 999px; padding: 3px 9px; }
.nh-manchete { font-size: 14.5px; font-weight: 600; margin-top: 12px; line-height: 1.45; }
.nh-manchete b { font-weight: 800; }
.nh-relogio { font-size: 12.5px; color: var(--grafite); margin-top: 8px; line-height: 1.45; }
.nh-relogio.atencao, .nh-relogio.falha { color: var(--ambar-texto); font-weight: 600; }

/* a régua do dia: 6h às 20h, uma bolinha por marcação, a pílula "agora" */
.nh-regua { margin-top: 10px; }
.nh-trilho { position: relative; height: 70px; margin: 0 6px; }
.nh-linha { position: absolute; left: 0; right: 0; top: 32px; height: 6px; border-radius: 3px; background: var(--futuro); }
.nh-feito { position: absolute; left: 0; top: 32px; height: 6px; border-radius: 3px; width: var(--ate); background: linear-gradient(90deg, var(--verde-mata), var(--verde)); }
.nh-grad i { position: absolute; top: 26px; width: 1.5px; height: 18px; background: var(--fio); left: var(--x); }
.nh-grad i.maior { height: 22px; top: 24px; background: var(--grafite); opacity: .6; }
.nh-marca-dia { position: absolute; top: 22px; left: var(--x); transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--verde); box-shadow: 0 2px 8px rgba(0,79,37,.25); display: grid; place-items: center; }
.nh-marca-dia::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.nh-marca-dia.saida { border-color: var(--verde-mata); }
.nh-marca-dia.saida::after { background: var(--verde-mata); }
.nh-marca-dia span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 800; color: var(--tinta); white-space: nowrap; }
.nh-marca-dia.saida span { top: auto; bottom: 28px; }
.nh-marca-dia.borda-ini span { left: 0; transform: none; } .nh-marca-dia.borda-fim span { left: auto; right: 0; transform: none; }
.nh-agora { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff;
  background: var(--verde-fundo); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.nh-agora::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; background: var(--verde-fundo); transform: translateX(-50%); }
.nh-agora.borda-ini { transform: translateX(-12px); } .nh-agora.borda-ini::after { left: 12px; }
.nh-agora.borda-fim { transform: translateX(calc(-100% + 12px)); } .nh-agora.borda-fim::after { left: auto; right: 11px; transform: none; }
.nh-escala { display: flex; justify-content: space-between; margin: 2px 6px 0; font-size: 12px; font-weight: 600; color: var(--grafite); }

/* cartões com ação: a borda esquerda diz o estado */
.nh-acao { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.nh-acao p { color: var(--grafite); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.nh-acao.pronto { border-left: 5px solid var(--verde); }
.nh-acao.atencao { border-left: 5px solid var(--ambar); }
.nh-acao.falha { border-left: 5px solid var(--grafite); grid-template-columns: 1fr; }
.nh-acao.empilha { grid-template-columns: 1fr; }
.nh-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 11px 16px; min-height: 44px;
  font-weight: 700; font-size: 14px; white-space: nowrap; border: 0; font-family: inherit; }
.nh-botao.principal { color: #fff; background: linear-gradient(135deg, var(--verde), var(--verde-mata)); box-shadow: var(--sombra-botao); }
.nh-botao.suave { background: var(--suave); color: var(--verde-mata); }
.nh-botao.fantasma { background: transparent; color: var(--verde-mata); }
.nh-botao.largo { width: 100%; }

/* convite do tour: discreto, nunca abre sozinho */
.nh-convite { display: grid; gap: 8px; background: var(--superficie); border: 1px dashed var(--fio); border-radius: 14px; padding: 12px 14px;
  font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.nh-convite-botoes { display: flex; justify-content: flex-end; gap: 6px; }
.nh-falha { text-align: center; padding: 26px 18px; color: var(--grafite); font-weight: 600; font-size: 13.5px; line-height: 1.5; }

/* Ajuda */
.nh-perguntas details { border-top: 1px solid var(--fio); padding: 12px 0; }
.nh-perguntas details:first-of-type { border-top: 0; }
.nh-perguntas summary { font-weight: 700; font-size: 14px; cursor: pointer; min-height: 24px; }
.nh-perguntas details p { color: var(--grafite); font-size: 13px; margin-top: 8px; line-height: 1.5; }
.nh-nota { font-size: 12px; color: var(--grafite); text-align: center; line-height: 1.5; padding: 0 12px; }

/* abas fixas: Hoje, Espelho, Ajuda */
.nh-abas { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 40; background: var(--superficie);
  border-top: 1px solid var(--fio); display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(0,79,37,.08); }
.nh-abas button { background: transparent; border: 0; color: var(--grafite); font-family: inherit; font-size: 12px; font-weight: 700; display: flex;
  flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 10px; min-height: 48px; }
.nh-abas svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.nh-abas button[aria-current="page"] { color: var(--verde-mata); background: var(--suave); }

@media (prefers-color-scheme: dark) {
  .nh-botao.suave, .nh-botao.fantasma, .nh-abas button[aria-current="page"] { color: var(--verde-claro); }
  .nh-agora { background: var(--verde-claro); color: var(--verde-fundo); }
  .nh-agora::after { background: var(--verde-claro); }
  .nh-cab { box-shadow: 0 10px 24px rgba(0,0,0,.35); }
}

/* ---------- o tour (padrão da casa, sem biblioteca; folha de baixo no celular) ---------- */
.nt-mascara { position: fixed; inset: 0; z-index: 60; background: transparent; }
.nt-furo { position: fixed; z-index: 61; pointer-events: none; border-radius: 16px;
  box-shadow: 0 0 0 3px var(--verde-claro), 0 0 0 9px rgba(47,180,106,.25), 0 0 0 9999px rgba(10,30,18,.62); }
.nt-folha { position: fixed; left: 0; right: 0; z-index: 62; max-width: 480px; margin: 0 auto; background: var(--superficie); color: var(--tinta);
  box-shadow: 0 -10px 30px rgba(0,0,0,.25); padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
.nt-folha.embaixo { bottom: 0; border-radius: 22px 22px 0 0; }
.nt-folha.emcima { top: 0; border-radius: 0 0 22px 22px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.nt-alca { width: 44px; height: 5px; border-radius: 3px; background: var(--fio); margin: 0 auto 10px; }
.nt-passo { font-size: 12px; font-weight: 800; color: var(--verde-mata); }
.nt-folha h3 { font-size: 16px; font-weight: 800; margin: 4px 0 6px; }
.nt-folha p { font-size: 13.5px; color: var(--grafite); line-height: 1.5; font-weight: 500; }
.nt-pe { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.nt-pontos { display: flex; gap: 5px; }
.nt-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--fio); }
.nt-pontos i.atual { background: var(--verde); width: 18px; border-radius: 4px; }
.nt-botoes { display: flex; gap: 6px; margin-left: auto; }
@media (prefers-color-scheme: dark) { .nt-passo { color: var(--verde-claro); } }
@media (prefers-reduced-motion: no-preference) {
  .nh-marca-dia { animation: nh-surge .35s ease-out both; }
  @keyframes nh-surge { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
}