/* ==========================================================================
   Tema Nocturne (dark) — recriação fiel de design_handoff_trilha_saas/_ds/
   nocturne-.../styles.css, aplicada em cima do app REAL (esta folha é a que
   public/index.html, auth-v2.html e confirmar-avaliacoes.html carregam).

   Estratégia: toda variável/classe que já existia (--bg, --surface, --text,
   --accent, --line, .card, .btn, .pill, .field, .modal, .act, etc.) foi
   MANTIDA com o mesmo nome — só o valor virou Nocturne — assim nenhuma
   linha de app.js precisou mudar por causa do CSS. As variáveis com nome
   --color-* são os tokens Nocturne originais (mesmo nome usado no design
   system); as variáveis "antigas" (--bg, --accent, --green-b, etc.) viraram
   apelidos delas.

   Desvio deliberado do Nocturne "puro" (documentado porque é importante
   saber o motivo): o design system é mono-accent (só uma cor de destaque)
   porque nasceu pra material de apresentação/marketing. Este app é uma
   ferramenta de operação de verdade — o técnico precisa reconhecer erro/
   sucesso/atraso batendo o olho, sem ler texto. Por isso foram criadas
   3 rampas extras (--success, --error, --warning) seguindo o MESMO método
   do resto do sistema (baixo croma, luminosidade parecida com o accent),
   só pra estados em que a distinção de cor é funcional, não decorativa.
   "Info" não ganhou rampa própria — usa o próprio accent, mantendo o
   espírito mono onde a distinção não é crítica. Ver README.md do handoff:
   "Rampas tonais 100–900 para neutral, accent e accent-2".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Tokens Nocturne (mesmo nome do design system original) ---- */
  --color-bg:#161826; --color-surface:#232532; --color-text:#e9e9ed;
  --color-accent:#9184d9; --color-accent-2:#a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100:#f3f5fe; --color-neutral-200:#e4e7f5; --color-neutral-300:#cfd3e5;
  --color-neutral-400:#b2b6ca; --color-neutral-500:#9397ab; --color-neutral-600:#75798c;
  --color-neutral-700:#595d6c; --color-neutral-800:#3f424d; --color-neutral-900:#292b31;

  --color-accent-100:#f5f4ff; --color-accent-200:#e7e5fe; --color-accent-300:#d2cefd;
  --color-accent-400:#b5abfc; --color-accent-500:#968ae0; --color-accent-600:#796cbf;
  --color-accent-700:#5d5294; --color-accent-800:#423a6a; --color-accent-900:#2b2741;

  --font-heading:'Inter',system-ui,sans-serif; --font-heading-weight:500;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --shadow-sm:0 0 0 1px #3f424d;
  --shadow-md:0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.65);

  /* ---- Rampas de status (ver nota de desvio acima) ---- */
  --success:#7fceac; --success-b: color-mix(in srgb, #7fceac 16%, var(--color-surface));
  --error:#e2908f; --error-b: color-mix(in srgb, #e2908f 16%, var(--color-surface));
  --warning:#d3b273; --warning-b: color-mix(in srgb, #d3b273 16%, var(--color-surface));
  --info: var(--color-accent-300); --info-b: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  /* Laranja próprio pro botão Quiz — distinto do dourado de --warning
     (usado por GDOOR/avisos), pra não confundir os dois significados. */
  --orange:#e0964f; --orange-b: color-mix(in srgb, #e0964f 16%, var(--color-surface));
  /* Azul próprio pro estado "não agendado" do calendário da Agenda (ver
     .status-dot.azul/.cc-status.azul) — mesmos componentes de #7fceac
     (--success, o verde de "confirmado"), só trocando qual canal fica mais
     alto, pra manter o mesmo tom/luminosidade e só a matiz mudar pra azul. */
  --blue:#7facce; --blue-b: color-mix(in srgb, #7facce 16%, var(--color-surface));

  /* ---- Apelidos: mesmos nomes de variável usados em todo app.js/styles.css ---- */
  --bg:var(--color-bg); --surface:var(--color-surface);
  --line:var(--color-divider); --line2: color-mix(in srgb, var(--color-text) 26%, transparent);
  --text:var(--color-text); --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --accent:var(--color-accent); --accent-d:var(--color-accent-400);
  --radius:var(--radius-md);

  --success-t:var(--success); --error-t:var(--error); --warning-t:var(--warning); --info-t:var(--info); --orange-t:var(--orange); --blue-t:var(--blue);
  --green-b:var(--success-b); --green-t:var(--success-t);
  --red-b:var(--error-b); --red-t:var(--error-t);
  --gray-b:var(--color-neutral-800); --gray-t:var(--color-neutral-300);
  /* Kron/Uniplus/Gdoor (as 3 "famílias" de sistema do cliente) reaproveitam
     as 3 rampas de status acima em vez de ganhar uma paleta própria — evita
     inventar mais matizes só pra rotular categoria, mesma lógica aplicada
     nas atividades (ver corPorTipoAtividadeEtapa em app.js: virou etiqueta
     de texto neutra, sem fundo colorido). */
  --kron-b:var(--info-b); --kron-t:var(--info);
  --uni-b:var(--success-b); --uni-t:var(--success);
  --gdoor-b:var(--warning-b); --gdoor-t:var(--warning);
}
/* Avisa o navegador que a página é escura — controles nativos que o CSS não
   alcança diretamente (checkbox/radio sem o componente .chk, o popup do
   calendário de <input type="date">, barra de rolagem) passam a vir no
   tom escuro do próprio navegador em vez de brancos por padrão. */
:root{color-scheme:dark}

/* ==========================================================================
   Tema "Admin Logic" (ver design.md) — alternativa clara/corporativa ao
   Nocturne acima, escolhida em Ajustes > Gerais > Aparência (ver
   aplicarTema/mudarTema em app.js) e persistida em tecnicos.tema. Só
   redefine os MESMOS tokens (--color-*, --radius-*, --shadow-*, --font-*)
   em vez de reintroduzir classes novas — todo componente do resto do app
   (.card, .btn, .pill, .field, table, etc.) já lê essas variáveis, então
   herda o tema novo automaticamente, sem precisar de override próprio.
   Exceções apontadas nos comentários abaixo: tokens que no bloco Nocturne
   acima são cor literal (não derivada de --color-text/--color-surface) e
   por isso, sem redefinição aqui, ficariam claros demais/escuros demais
   também no tema claro. */
html[data-theme="admin-logic"]{
  color-scheme:light;
  --color-bg:#f7f9fb; --color-surface:#ffffff; --color-text:#191c1e;
  --color-accent:#0f2d7b; --color-accent-2:#97378d;
  /* --line/--color-divider é cor literal no bloco Nocturne (não deriva de
     --color-text) — sem isso o divisor ficaria quase invisível num fundo
     claro. --line2/--muted continuam sem override: já derivam de
     var(--color-text), que muda sozinho pro tom escuro certo aqui. */
  --color-divider:#c5c5d3;
  --accent-d:#0a2166;
  /* --info é cor literal no Nocturne (lilás claro, pensado pra fundo
     escuro) — ilegível em cima do tingimento claro de --info-b, que já
     deriva corretamente de --color-accent/--color-surface. */
  --info:#0f2d7b;

  --font-heading:'Public Sans',system-ui,sans-serif; --font-heading-weight:600;

  /* design.md: elementos padrão 4px, contêineres 8px — mais discreto que os
     8/14px do Nocturne (pensado pra telas de apresentação, não pra
     densidade de dados administrativos). */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;

  /* design.md: sombra só "ambient" (difusa, baixa opacidade) em vez do
     contorno sólido do Nocturne — cor de contorno vem de --color-divider. */
  --shadow-sm:0 0 0 1px var(--color-divider);
  --shadow-md:0 0 0 1px var(--color-divider), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:0 0 0 1px var(--color-divider), 0 8px 24px rgba(0,0,0,.08);
}
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap');

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}

/* Portal do parceiro e acompanhamento de indicações. */
.parceiro-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.parceiro-banner{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.parceiro-banner img{width:100%;aspect-ratio:16/9;height:auto;display:block;object-fit:cover;background:var(--color-neutral-800)}.parceiro-banner-body{display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px}.parceiro-banner h3{font-size:19px;line-height:1.2;margin:0}.parceiro-banner-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:2px}.parceiro-banner-prices div{display:flex;flex-direction:column;gap:5px}.parceiro-banner-prices span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.parceiro-banner-prices strong{font-size:17px;line-height:1.1}.parceiro-banner-body>.btn{align-self:flex-start}.indicacao-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.indicacao-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px;text-align:left;color:var(--text);cursor:pointer}.indicacao-card:hover{border-color:var(--accent)}.indicacao-card span{font-size:12px;display:block;color:var(--muted);line-height:1.25}.indicacao-card b{font-size:24px;display:block;margin-top:5px}.accordion{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--surface)}.accordion h3{margin:0 0 9px;font-size:16px}.accordion-item{padding:10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}.accordion-item span{font-size:12px;color:var(--muted)}.atacado-linha{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);gap:15px}.atacado-linha small{display:block;color:var(--muted)}.atacado-linha input{width:78px}.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.page-head h1{margin:0}.page-head .sub{margin:4px 0 0}
.cp-abas{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line)}.cp-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-weight:600;padding:10px 16px;cursor:pointer}.cp-tab:hover{color:var(--text)}.cp-tab.on{color:var(--accent);border-bottom-color:var(--accent)}.cp-indicacoes-concluidas{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 5%,var(--surface));font-size:12px}.cp-indicacoes-concluidas span,.cp-indicacoes-concluidas small{color:var(--muted)}
@media(max-width:700px){.parceiro-banners{grid-template-columns:1fr}.parceiro-banner-prices{grid-template-columns:1fr 1fr}.indicacao-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.accordion-item{display:block}.accordion-item span{display:block;margin-top:4px}.page-head{display:block}.page-head .btn{margin-top:14px}}
.parceiro-banner-description{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

/* Alinhamento vertical padrão de qualquer ícone Phosphor usado inline com
   texto (ex.: <i class="ph ph-calendar-blank"></i> Data) — Phosphor sempre
   marca o ícone com a classe de peso "ph" ou "ph-fill" além do nome do
   ícone, então isso cobre todo uso sem precisar repetir style por linha. */
i.ph,i.ph-fill{vertical-align:-2px}

/* Funil de propostas */
.propostas-kanban{display:grid;grid-template-columns:repeat(4,minmax(245px,1fr));gap:14px;overflow-x:auto;padding:4px 2px 18px}
.proposta-kanban-col{min-height:520px;background:color-mix(in srgb,var(--surface) 78%,var(--bg));border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px}
.proposta-kanban-col.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}

/* Kanban operacional de indicações: a conclusão é protegida e só acontece
   pelo botão do card, porque também gera a premiação do parceiro. */
.indicacoes-kanban{display:grid;grid-template-columns:repeat(5,minmax(246px,1fr));gap:14px;overflow-x:auto;padding:4px 2px 18px}
.indicacao-kanban-col{display:flex;flex-direction:column;min-height:560px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface) 78%,var(--bg));transition:border-color .15s,background .15s}
.indicacao-kanban-col.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.indicacao-kanban-col.is-locked{background:color-mix(in srgb,var(--green-b) 18%,var(--bg))}
.indicacao-kanban-col-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:2px 2px 13px;border-bottom:1px solid var(--line)}
.indicacao-kanban-col-header b{min-width:26px;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;text-align:center}
.indicacao-kanban-col-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.indicacao-kanban-col-title i{color:var(--accent);font-size:16px}
.indicacao-kanban-col-hint{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.3}
.indicacao-kanban-list{display:flex;flex:1;flex-direction:column;gap:10px;padding-top:12px}
.indicacao-kanban-empty{padding:20px 8px;border:1px dashed var(--line2);border-radius:var(--radius);color:var(--muted);font-size:12px;text-align:center}
.indicacao-kanban-card{display:flex;flex-direction:column;gap:12px;padding:13px;border:1px solid var(--line2);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);cursor:grab;transition:border-color .15s,opacity .15s,transform .15s}
.indicacao-kanban-card:hover{border-color:var(--accent)}
.indicacao-kanban-card:active{cursor:grabbing}
.indicacao-kanban-card.is-dragging{opacity:.45;transform:rotate(1deg)}
.indicacao-kanban-card.is-completed{cursor:default;border-color:color-mix(in srgb,var(--green-t) 30%,var(--line2))}
.indicacao-kanban-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.indicacao-kanban-card-identidade{display:flex;min-width:0;flex-direction:column;gap:3px}
.indicacao-kanban-card-identidade strong{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.indicacao-kanban-card-identidade span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.indicacao-drag-icon{flex:none;color:var(--muted);font-size:18px}
.indicacao-kanban-meta{display:flex;flex-direction:column;gap:6px;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px}
.indicacao-kanban-meta span{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.indicacao-kanban-meta i{flex:none;color:var(--accent);font-size:14px}
.indicacao-kanban-toggles{display:flex;flex-direction:column;gap:2px}
.indicacao-kanban-toggles .ios-toggle{font-size:12px}
.indicacao-kanban-toggles input.ios-switch{flex-basis:38px;width:38px;height:22px}
.indicacao-kanban-toggles input.ios-switch::after{width:16px;height:16px}
.indicacao-kanban-toggles input.ios-switch:checked::after{transform:translateX(16px)}
.indicacao-concluir{align-self:stretch;margin-top:auto}
.indicacao-premiacao-gerada{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:var(--radius);background:var(--green-b);color:var(--green-t);font-size:12px;font-weight:600}
.indicacao-premiacao-gerada i{font-size:16px}
@media(max-width:1200px){.indicacoes-kanban{grid-template-columns:repeat(5,270px)}}
@media(max-width:700px){.indicacao-kanban-col{min-height:470px}.indicacoes-kanban{grid-template-columns:repeat(5,calc(100vw - 58px));gap:10px}.indicacao-kanban-card{padding:12px}}
.proposta-kanban-col>header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:2px 2px 12px;border-bottom:1px solid var(--line)}
.proposta-kanban-col h3{margin:0;font-size:15px;font-weight:600}.proposta-kanban-col header small{color:var(--muted);font-size:11px}
.kanban-stage-status{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:3px 6px;border-radius:999px}
.proposta-kanban-dropzone{display:flex;flex-direction:column;gap:10px;padding-top:12px;min-height:450px}.kanban-empty{color:var(--muted);font-size:12px;text-align:center;padding:24px 8px;border:1px dashed var(--line);border-radius:var(--radius)}
.proposta-kanban-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:13px;cursor:grab;transition:border-color .15s,transform .15s,opacity .15s}.proposta-kanban-card:hover{border-color:var(--accent)}.proposta-kanban-card:active{cursor:grabbing}.proposta-kanban-card.is-dragging{opacity:.45;transform:rotate(1deg)}
.proposta-card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.proposta-card-top strong{font-size:14px;line-height:1.3}.icon-btn{background:none;border:0;color:var(--muted);padding:2px 0;cursor:pointer}.icon-btn:hover{color:var(--error)}
.proposta-card-owner,.proposta-card-meta span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}.proposta-card-owner{margin-top:9px}.proposta-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--info)}.status-dot.status-aceita{background:var(--success)}.status-dot.status-recusada{background:var(--error)}.status-dot.status-enviada{background:var(--warning)}
.proposta-card-values{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.proposta-card-values span{display:flex;flex-direction:column;gap:1px}.proposta-card-values small,.proposta-card-list small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.proposta-card-values b{font-size:12px}.proposta-card-list{display:flex;flex-direction:column;gap:3px;margin-top:9px;font-size:11px}.proposta-card-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.etapas-propostas-config{display:flex;flex-direction:column;gap:12px}.etapa-proposta-config{border:1px solid var(--line);border-radius:var(--radius);padding:12px}.etapa-proposta-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.etapa-proposta-fields{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:8px}.etapa-proposta-fields .field{margin:0}.etapa-proposta-fields label{font-size:10px}.etapa-proposta-fields select{width:100%;font-size:11px}
@media(max-width:1100px){.propostas-kanban{grid-template-columns:repeat(4,270px)}.etapa-proposta-fields{grid-template-columns:1fr 1fr}.etapa-proposta-fields .field:first-child{grid-column:1/-1}}

/* Base pra qualquer input/select/textarea da tela, mesmo os que não estão
   dentro de um <div class="field"> (ex.: linhas de formulário construídas
   soltas, como os campos de horário oferecido em oferecerHorariosModal —
   ver .oh-data/.oh-hora em app.js). A regra mais específica ".field
   input,.field select" abaixo continua existindo, mas isso garante que
   nenhum campo escapa do tema por ter ficado fora de um .field. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select, textarea{
  padding:9px 11px;border:1px solid var(--line2);border-radius:var(--radius);
  font-size:14px;background:var(--surface);color:var(--text);font-family:inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus, textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Tipografia: Inter em tudo (Nocturne não usa serif); hierarquia vem de
   tamanho/espaço, nunca de peso além de 500 — "Do not bolden headings past
   their 500 weight" (readme.md do design system). */
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:-0.015em}
h1{font-size:34px;line-height:1.2}
h2{font-size:26px;line-height:1.25}
h3{font-size:18px;line-height:1.3}

:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}

.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--line);padding:0 24px;height:58px;position:sticky;top:0;z-index:10}
.brand{font-weight:500;font-size:16px;display:flex;align-items:center;gap:10px}
/* .brand-click: a logomarca/nome vira o atalho pro Dashboard (ver
   irParaDashboard em app.js) — só na área do técnico, não na do cliente. */
.brand-click{cursor:pointer;border-radius:var(--radius-sm);padding:4px 8px;margin:-4px -8px;transition:background .15s}
.brand-click:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.brand-click:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topbar-usuario{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
/* Marca — caixa com borda accent, mesmo tratamento do .brand-mark em
   design_handoff_trilha_saas/Trilha App.dc.html (substitui o glifo ◗ solto
   de antes por um ícone Phosphor dentro de uma moldura consistente). */
.brand-mark{width:28px;height:28px;border-radius:var(--radius-sm);border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:15px;flex:none}
nav{display:flex;gap:4px}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;font-size:14px;color:var(--muted);cursor:pointer}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
/* Limite em percentual (não px fixo) — acompanha a largura da janela em vez
   de travar num valor absoluto; sobra uma margem proporcional em qualquer
   monitor. .largura-total (telas de Atividades/kanban, ver viewAtividadesCliente
   em app.js) continua removendo o limite por completo quando precisa da
   largura cheia mesmo. */
main{max-width:96%;margin:0 auto;padding:24px}
@media (min-width:761px){
  #app.largura-total{max-width:none}
}

/* ===== Navegação (área do técnico) =====
   Estrutura/estados vêm de NAV_TREE em app.js (renderNav/navTabBtn/
   selecionarL1). Nível 1: no desktop virou blocos grandes com ícone no
   topbar; no mobile continua a barra inferior fixa de sempre (ícone
   pequeno + rótulo). Nível 2: não fica mais fixo na tela em nenhum dos dois
   formatos — vira um mosaico flutuante (#nav-l2-mosaic, mesmo componente
   pros dois) que abre por cima do conteúdo ao pressionar um bloco de nível
   1, e fecha ao pressionar o mesmo bloco de novo, escolher um item, ou
   clicar fora. .nav-desktop-only/.nav-mobile-only alternam conforme o
   breakpoint no fim deste bloco — precisa bater com NAV_MOBILE_BREAKPOINT
   em app.js. */
.nav-tab{background:none;border:none;cursor:pointer;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center}

.nav-tab-d1{flex-direction:column;gap:5px;padding:10px 20px;font-size:12.5px;border-radius:var(--radius);border:1px solid transparent}
.nav-tab-d1:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.nav-d1-ic{font-size:22px;line-height:1;color:var(--muted)}
.nav-tab-d1.on{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:var(--accent);color:var(--accent)}
.nav-tab-d1.on .nav-d1-ic{color:var(--accent)}

.nav-mobile-l1{position:fixed;left:0;right:0;bottom:0;background:var(--surface);gap:0;
  border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20;
  box-shadow:0 -2px 10px rgba(0,0,0,0.35)}
.nav-tab-m1{flex:1;flex-direction:column;gap:3px;font-size:11px;padding:4px 0}
.nav-tab-m1.on{color:var(--accent)}
.nav-m1-ic{font-size:20px;line-height:1}

/* Mosaico flutuante de nível 2 */
.nav-l2-mosaic.hidden{display:none}
.nav-l2-mosaic{position:fixed;inset:0;z-index:30}
.nav-l2-backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--color-neutral-900) 65%, transparent)}
.nav-l2-painel{position:absolute;top:70px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:16px;max-width:520px;width:calc(100% - 32px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.nav-l2-bloco{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 12px;font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.nav-l2-bloco:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.nav-l2-ic{font-size:22px;line-height:1}
.nav-l2-bloco.on{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:var(--accent);color:var(--accent)}

.nav-mobile-only{display:none}
@media (max-width:860px){
  .nav-desktop-only{display:none}
  .nav-mobile-only{display:flex}
  #app{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .nav-l2-painel{top:auto;bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ===== Sidebar (tema admin-logic, desktop) =====
   Substitui a barra horizontal de nível 1 + mosaico flutuante SÓ nesse
   tema e só a partir do breakpoint desktop (mesmo NAV_MOBILE_BREAKPOINT de
   app.js) — no tema padrão e em qualquer celular a navegação continua
   sendo #nav-l1/#nav-mobile-l1/#nav-l2-mosaic de sempre (ver renderNav/
   renderNavSidebar em app.js). Escondida por padrão aqui embaixo; a regra
   dentro do media query é o único lugar que liga o layout de duas colunas. */
.nav-sidebar{display:none}
@media (min-width:861px){
  html[data-theme="admin-logic"] #app-container{display:flex;align-items:stretch}
  html[data-theme="admin-logic"] .app-content-col{flex:1;min-width:0}
  html[data-theme="admin-logic"] #nav-l1{display:none}
  html[data-theme="admin-logic"] .nav-sidebar{
    display:flex;flex-direction:column;gap:2px;flex:none;width:248px;
    height:100vh;position:sticky;top:0;overflow-y:auto;
    background:var(--surface);border-right:1px solid var(--line);padding:16px 10px;
  }
}
.nav-sidebar-secao{
  font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:16px 10px 6px;
}
.nav-sidebar-secao:first-child{padding-top:6px}
.nav-sidebar-item{
  display:flex;align-items:center;gap:10px;text-align:left;
  background:none;border:none;border-radius:var(--radius-sm);padding:8px 10px;
  font-size:13.5px;color:var(--text);cursor:pointer;font-family:inherit;
}
.nav-sidebar-item i.ph{font-size:17px;color:var(--muted);flex:none}
.nav-sidebar-item:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.nav-sidebar-item.on{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);font-weight:500}
.nav-sidebar-item.on i.ph{color:var(--accent)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.mc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm)}
/* Rótulo em caixa alta com leve espaçamento entre letras — o mesmo
   tratamento "kicker" usado no protótipo Trilha (.card-kicker) pra dar mais
   hierarquia visual entre o rótulo pequeno e o número grande abaixo dele. */
.mc .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:500;display:flex;align-items:center;gap:5px}
.mc .v{font-size:26px;font-weight:500;margin-top:6px;font-family:var(--font-heading)}
.mc .v.alert{color:var(--red-t)}

.rowhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.rowhead h2{font-size:18px;margin:0;font-weight:500}

/* Accordion nativo (<details>/<summary>) — usado no "Log de alertas" do
   Follow up. Some o marcador padrão do navegador e usa um ícone Phosphor
   próprio, que gira ao abrir. */
.log-alertas summary,.regua-indicadores summary{list-style:none;cursor:pointer}
.log-alertas summary::-webkit-details-marker,.regua-indicadores summary::-webkit-details-marker{display:none}
.log-alertas .log-alertas-caret,.regua-indicadores .regua-indicadores-caret{color:var(--muted);transition:transform .15s}
.log-alertas[open] .log-alertas-caret,.regua-indicadores[open] .regua-indicadores-caret{transform:rotate(180deg)}

/* Tabela — regra de linha esmaecendo nas pontas (assinatura Nocturne: ver
   .table em _ds/.../styles.css). Aplicada no seletor de elemento (não numa
   classe) porque o app usa <table> puro em várias telas. */
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:11px 14px}
td{padding:12px 14px;vertical-align:middle}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
thead tr{background:linear-gradient(to right,transparent,var(--line) 48px,var(--line) calc(100% - 48px),transparent) no-repeat bottom / 100% 1px}
tbody tr{background:linear-gradient(to right,transparent,color-mix(in srgb, var(--text) 8%, transparent) 48px,color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px),transparent) no-repeat bottom / 100% 1px}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:
  linear-gradient(color-mix(in srgb, var(--text) 4%, transparent),color-mix(in srgb, var(--text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
  linear-gradient(to right,transparent,color-mix(in srgb, var(--text) 8%, transparent) 48px,color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px),transparent) no-repeat bottom / 100% 1px}
.sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* Pills — mesma ideia do .tag do design system (etiqueta pequena tingida
   pelas rampas), só que sob o nome de classe que já existia no app. */
.pill{font-size:11px;padding:3px 10px;border-radius:calc(var(--radius) * 0.75);display:inline-block;white-space:nowrap}
/* Pill clicável (ex.: status na tabela "Próximos compromissos") — reseta o
   visual padrão de <button> pra parecer exatamente com um .pill comum. */
button.pill{border:none;font:inherit;cursor:pointer}
button.pill:hover{filter:brightness(1.15)}
.pill.Kron{background:var(--kron-b);color:var(--kron-t)}
.pill.Uniplus{background:var(--uni-b);color:var(--uni-t)}
.pill.Gdoor{background:var(--gdoor-b);color:var(--gdoor-t)}
.pill.ok{background:var(--green-b);color:var(--green-t)}
.pill.late{background:var(--red-b);color:var(--red-t)}
.pill.done{background:var(--gray-b);color:var(--gray-t)}
.pill.info{background:var(--info-b);color:var(--info-t)}
.pill.azul{background:var(--blue-b);color:var(--blue-t)}
/* Etiqueta neutra pro tipo de atividade (Configuração/Treinamento/
   Finalização) — ver corPorTipoAtividadeEtapa em app.js: antes eram 3
   cores de fundo na linha inteira, agora é só esta etiqueta ao lado do
   nome, no espírito mono-accent do Nocturne. */
.pill.neutral{background:var(--color-neutral-800);color:var(--color-neutral-200)}

/* Status de vídeos assistidos por treinamento — bolinha usada no card de
   atividade do kanban (ver videoStatusDotHTML em app.js; antes ficava na
   extinta coluna "Vídeos" de Próximos Compromissos). Cores saturadas com
   glow (fora do padrão discreto do resto do app) de propósito: pedido
   explícito pra chamar atenção do técnico sobre quem ainda não assistiu
   nada. */
.video-circ{width:10px;height:10px;border-radius:50%;flex:none}
.video-circ.vazio{background:var(--color-neutral-800)}
.video-circ.red{background:#ff2d2d;box-shadow:0 0 6px 1px rgba(255,45,45,.75)}
.video-circ.yellow{background:#ffe600;box-shadow:0 0 6px 1px rgba(255,230,0,.75)}
.video-circ.green{background:#22ff5c;box-shadow:0 0 6px 1px rgba(34,255,92,.75)}
.video-circ.white{background:#ffffff;box-shadow:0 0 6px 1px rgba(255,255,255,.9);border:1px solid var(--line2)}

.spinner{width:13px;height:13px;border:2px solid color-mix(in srgb, var(--text) 20%, transparent);border-top-color:currentColor;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ajustes → Atividades de Onboarding: layout mestre-detalhe (lista de
   Etapas à esquerda, Atividades Padrão da etapa selecionada à direita —
   ver viewConfigOnboarding em app.js). Empilha em telas estreitas porque a
   lista de etapas fica ilegível espremida ao lado da tabela de detalhe. */
/* Topo da tela de detalhe do cliente: card de dados da empresa lado a lado
   com "Usuários da empresa" (ver viewDetalhe em app.js). Empilha em telas
   estreitas, mesmo breakpoint usado no resto do app. */
/* align-items:stretch (não flex-start) para "Dados do cliente" e "Usuários
   da empresa" sempre terem a mesma altura, mesmo com quantidade diferente
   de conteúdo em cada um. */
.detalhe-topo{display:flex;gap:16px;align-items:stretch;margin-bottom:16px}
.detalhe-topo>.card{flex:1;min-width:0;margin-bottom:0}
@media (max-width: 760px){
  .detalhe-topo{flex-direction:column}
  .detalhe-topo>.card{width:100%}
}

.onb-layout{display:flex;gap:24px;align-items:flex-start}
.onb-etapas-lista{flex:0 0 260px;display:flex;flex-direction:column;gap:8px}
.onb-etapas-lista--proporcional{flex:0 0 30%}
.onb-detalhe{flex:1;min-width:0}
.onb-etapa-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--radius);cursor:pointer;background:var(--surface);transition:border-color .15s;width:100%;text-align:left;font:inherit}
.onb-etapa-item:hover{border-color:var(--accent-d)}
.onb-etapa-item.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface))}
/* Conteúdo textual do item (nome, contadores, ações) — isolado num wrapper
   próprio pra poder ser escondido no rail de ícones do mobile sem mexer em
   cada tela que monta o item de um jeito diferente. */
.onb-etapa-texto{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Ícone do item — imagem do Grupo (videos_de.icone_url) ou avatar com a
   inicial do nome como fallback quando não há ícone próprio (Etapas,
   Treinamentos etc. não têm imagem cadastrada). Único elemento visível no
   rail do mobile (ver media query abaixo). */
.onb-etapa-icone{width:32px;height:32px;border-radius:8px;flex:none;object-fit:cover}
.onb-etapa-icone-fallback{display:flex;align-items:center;justify-content:center;background:var(--line2);color:var(--muted);font-weight:700;font-size:13px}
.onb-etapa-item.on .onb-etapa-icone-fallback{background:var(--accent);color:#fff}
/* Número de ordem da etapa no fluxo — mesma posição no array retornado
   por /api/etapas (ORDER BY ordem), só exibido como referência visual. */
.onb-etapa-ordem{width:22px;height:22px;border-radius:50%;background:var(--line2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;flex:none;margin-top:1px}
.onb-etapa-item.on .onb-etapa-ordem{background:var(--accent);color:#fff}
/* Mobile: a lista mestre vira um rail estreito só de ícones (em vez de
   empilhar acima do detalhe) — o detalhe continua ao lado, à direita,
   igual ao desktop. Clicar num ícone seleciona o item, igual antes. */
@media (max-width: 760px){
  .onb-etapas-lista{flex:0 0 64px;gap:6px}
  .onb-etapas-lista h3{display:none}
  .onb-etapa-item{justify-content:center;padding:8px;gap:0}
  .onb-etapa-texto{display:none}
}

/* Tabela do detalhe (.onb-detalhe) vira uma pilha de cards no mobile — cada
   <tr> um card, cada <td> uma linha "rótulo: valor" usando data-label (ver
   renderConfigAtividadesPadrao/renderTabelaAtPadrao/renderSistemasDetalhe em
   app.js, que já anotam os <td> com esse atributo). O <tr> vira flex-wrap em
   vez de block pra dar suporte a dois tipos de célula:
   - a maioria ocupa a linha inteira (flex-basis:100%), na ordem do DOM
     (que precisa bater com o <thead> do desktop, por isso não reordenamos
     o HTML — só o layout visual via `order`);
   - .onb-td-tags é pra campo curto (Tempo, Carregar para, Finalidade...):
     largura automática, sem rótulo, e `order` alto pra agrupar todas no
     final do card, uma do lado da outra, como tags. .onb-td-oculto-mobile
     é pra campo redundante no card (ex: Etapa, já implícito em qual etapa
     está selecionada à esquerda) — some por completo, não linha nem tag.
   A coluna de arrastar (.handle-col) também some — reordenar por toque não
   faz sentido nesse formato. */
@media (max-width: 760px){
  .onb-detalhe table{display:block;width:100%}
  .onb-detalhe thead{display:none}
  .onb-detalhe tbody{display:block}
  .onb-detalhe tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;margin-bottom:10px;border:1px solid var(--line2);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
  .onb-detalhe td{flex:0 0 100%;padding:6px 0;border:none}
  .onb-detalhe td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
  .onb-detalhe td.handle-col,.onb-detalhe td.onb-td-oculto-mobile{display:none}
  .onb-detalhe td.onb-td-tags{flex:0 0 auto;order:10;padding:2px 0}
  .onb-detalhe td.onb-td-tags::before{content:none}
  /* Célula de ação (botão Editar etc.) nunca tem data-label — fica sempre
     por último, depois das tags. */
  .onb-detalhe td:not([data-label]){order:20}
}

/* Alça de arrastar (drag handle) — reordenação por drag-and-drop das
   Etapas (ver renderOnbEtapasLista) e da tabela de Atividades Padrão (ver
   renderTabelaAtPadrao/wireDragReordenar em app.js). Só o próprio handle
   inicia o arrasto (mousedown liga draggable=true no item pai) — clicar em
   qualquer outro lugar da linha continua selecionando/navegando normal. */
.drag-handle{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;border-radius:5px}
.drag-handle:hover{color:var(--text);background:color-mix(in srgb, var(--text) 8%, transparent)}
.drag-handle.desabilitado{cursor:not-allowed;opacity:.35}
.drag-handle:active{cursor:grabbing}
.onb-etapa-item.arrastando{opacity:.4}
tr.arrastando{opacity:.4}
.chk-row.arrastando{opacity:.4}
th.handle-col,td.handle-col{width:30px;padding-left:14px;padding-right:0}

/* Rolagem própria pra lista de cards (ex.: Treinamentos na tela Vídeos —
   ver renderTreinamentosListaVideos em app.js), sem depender do título/
   filtro acima, que ficam fixos fora deste bloco. Sem isso, uma lista longa
   de cards empurrava a página inteira pra baixo em vez de rolar só ali. */
.onb-lista-scroll{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding-right:4px}
@media (max-width: 760px){
  .onb-lista-scroll{max-height:50vh}
}

/* Accordion da tela de Vídeos em telas ≤760px — substitui a tabela de 6
   colunas, que não cabe sem forçar zoom/scroll horizontal (ver
   renderAccordionVideos/renderListaVideos em app.js). Mesmo breakpoint do
   .onb-layout acima, que já empilha a lista de treinamentos nessa largura. */
.videos-accordion{display:flex;flex-direction:column;gap:8px}
.acc-item{border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.acc-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:transparent;border:none;text-align:left;cursor:pointer;color:var(--text);font-family:inherit}
.acc-header .ph-caret-down{flex:none;transition:transform 0.15s;color:var(--muted)}
.acc-body{display:none;padding:0 14px 14px;border-top:1px solid var(--line)}
.acc-item.aberto .acc-body{display:block;padding-top:12px}
.acc-item.aberto .acc-header .ph-caret-down{transform:rotate(180deg)}
/* Wrapper genérico de lista de accordion (ver .acc-item acima) — usado hoje
   pelo accordion de Contabilidades em Ajustes > Gerais (ver
   renderContabAccordion em app.js). */
.acc-list{display:flex;flex-direction:column;gap:8px}

/* Alternância "Servidor local"/"Servidor web" da conexão de WhatsApp (ver
   quadro Whatsapp em viewConfigGerais, app.js) — dois blocos lado a lado em
   vez de um switch pequeno, porque cada modo precisa de uma frase
   explicando quando usar, não só um rótulo curto. */
.toggle-modo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media (max-width: 760px){ .toggle-modo{grid-template-columns:1fr} }
.toggle-opt{border:1px solid var(--line2);border-radius:var(--radius);padding:12px 14px;cursor:pointer;text-align:left;background:transparent;font-family:inherit;color:var(--text);display:flex;gap:11px;align-items:flex-start}
.toggle-opt:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.toggle-opt.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent)}
.toggle-opt.selected:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}
.toggle-icon{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid var(--line2);color:var(--muted)}
.toggle-opt.selected .toggle-icon{border-color:var(--accent);color:var(--accent)}
.toggle-title{font-weight:500;font-size:13.5px;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.toggle-title .dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted);flex:none}
.toggle-opt.selected .toggle-title .dot{background:var(--accent);border-color:var(--accent)}
.toggle-desc{font-size:12px;color:var(--muted);line-height:1.5;display:block}

/* Chip-toggle: rótulo + switch estilo iOS, pra opção booleana simples e
   independente (ver "Opções" de modalNovoCliente em app.js) — diferente de
   .toggle-opt (escolha exclusiva entre 2 modos, com ícone/descrição): aqui
   cada chip liga/desliga sozinho, sem exclusividade entre eles. Rótulo e
   switch ficam colados, alinhados à direita da linha (não espalhados nas
   duas pontas como numa linha de Ajustes do iOS) — largura própria via
   width:100%, não depende do container pai esticar os filhos.
   ::after desenha a trilha (pill que muda de cor); ::before é o círculo do
   switch, posicionado em relação ao próprio botão (position:relative) já
   que ::before/::after são irmãos, não dá pra um ancorar no outro. */
.chip-toggle{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;border:none;border-radius:var(--radius-sm);padding:6px 0;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-align:right;cursor:pointer;transition:color .15s}
.chip-toggle:hover{color:var(--text)}
.chip-toggle[data-on="1"]{color:var(--text)}
.chip-toggle::after{content:"";flex:0 0 40px;width:40px;height:24px;border-radius:999px;background:var(--line2);transition:background .2s}
.chip-toggle[data-on="1"]::after{background:var(--accent)}
.chip-toggle::before{content:"";position:absolute;right:18px;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateY(-50%);transition:right .2s;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.chip-toggle[data-on="1"]::before{right:2px}

/* Switch iOS: reservado para escolhas booleanas. Checkboxes de seleção de
   tarefas, pessoas e itens continuam quadrados para não confundir "marcar"
   com "ligar/desligar" uma configuração. */
.ios-toggle{display:flex!important;align-items:center;justify-content:flex-start;gap:14px;cursor:pointer;color:var(--text);font-size:14px;line-height:1.4;text-align:left}
/* O rótulo acompanha o lado do próprio controle: switch à direita forma um
   grupo alinhado à direita; switch à esquerda mantém a leitura pela esquerda. */
.ios-toggle:has(> input:last-child){justify-content:flex-end;text-align:right}
.ios-toggle:has(> input:first-child){justify-content:flex-start;text-align:left}
input.ios-switch{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 44px;width:44px;height:26px;margin:0;border:0;border-radius:999px;background:var(--line2);cursor:pointer;transition:background .2s}
input.ios-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.32);transition:transform .2s}
input.ios-switch:checked{background:var(--orange)}
input.ios-switch:checked::after{transform:translateX(18px)}
input.ios-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input.ios-switch:disabled{opacity:.5;cursor:not-allowed}

.bar{height:6px;width:100px;background:var(--color-neutral-800);border-radius:20px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent)}

/* "Double setting toggle": duas opções fixas (ex. Dia/Período) num mesmo
   pill, só uma ativa por vez — diferente do ios-toggle (booleano) e do
   chip-toggle (liga/desliga). Ver filtro de Sessões de caixa. */
.seg-toggle{display:inline-flex;background:var(--surface2, var(--line2));border-radius:999px;padding:3px;gap:2px}
.seg-toggle button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13px;padding:7px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.seg-toggle button[aria-pressed="true"]{background:var(--card, var(--surface));color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.seg-toggle button:not([aria-pressed="true"]):hover{color:var(--text)}

/* Botões — outline, nunca preenchido (readme.md: "the primary is an accent
   outline, never a fill"). Hover/active vêm da rampa do accent, não de
   trocar a cor de fundo por outra sólida. */
.btn{background:transparent;border:1px solid var(--line2);border-radius:var(--radius);padding:8px 14px;font-size:13.5px;cursor:pointer;color:var(--text);font-family:var(--font-heading);font-weight:500}
.btn:hover{background:color-mix(in srgb, var(--text) 7%, transparent)}
.btn:active{background:color-mix(in srgb, var(--text) 14%, transparent)}
.btn.primary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.btn.primary:active{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.btn.danger{color:var(--red-t);border-color:var(--red-t)}
.btn.danger:hover{background:color-mix(in srgb, var(--red-t) 12%, transparent)}
.btn.success{color:var(--green-t);border-color:var(--green-t)}
.btn.success:hover{background:color-mix(in srgb, var(--green-t) 12%, transparent)}
.btn.warning{color:var(--warning-t);border-color:var(--warning-t)}
.btn.warning:hover{background:color-mix(in srgb, var(--warning-t) 12%, transparent)}
.btn.orange{color:var(--orange-t);border-color:var(--orange-t)}
.btn.orange:hover{background:color-mix(in srgb, var(--orange-t) 12%, transparent)}
/* Exceção pontual ao padrão "outline, nunca preenchido" acima — pedido
   específico do usuário pro botão "Ver Kanban..." no card Andamento, pra
   destacar mais que os outros botões dessa tela. */
.btn.roxo{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.roxo:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn.ghost:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13.5px;padding:0;margin-bottom:12px}
.back:hover{color:var(--text)}

.card{background:var(--surface);border-radius:12px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.parceiros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.parceiro-card{display:flex;flex-direction:column;min-height:196px;padding:16px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.parceiro-card:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.parceiro-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.parceiro-card h4{margin:0;font-size:16px;font-weight:500;line-height:1.3}
.parceiro-card-topo .sub{margin:5px 0 0}
.parceiro-card-info{display:flex;flex-direction:column;gap:3px;margin-top:20px}
.parceiro-card-info span{font-size:12px;color:var(--muted)}
.parceiro-card-info strong{font-size:14px;font-weight:500}
.parceiro-card-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.tecnicos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:stretch}
.tecnico-card{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm)}
.tecnico-card:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.tecnico-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:54px}
.tecnico-card-identidade{min-width:0}
.tecnico-card h3{margin:0;font-size:17px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.tecnico-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tecnico-card-topo>.pill{flex:none}
.tecnico-card-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.tecnico-card-label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tecnico-card-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:10px}
.tecnico-card-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.tecnico-card-info-wide{grid-column:1/-1}
.tecnico-card-info .k{font-size:11.5px;color:var(--muted)}
.tecnico-card-info .v{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.tecnico-card-permissoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.tecnico-permissao{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--bg) 48%,var(--surface));font-size:12.5px;cursor:pointer}
.tecnico-permissao span{min-width:0;overflow-wrap:anywhere}
.tecnico-card-sem-acesso{margin-top:10px;padding:10px 12px;border:1px dashed var(--line2);border-radius:var(--radius);font-size:12px;color:var(--muted)}
.tecnico-card-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.tecnico-card-acoes .btn{flex:1;min-width:118px}
@media (max-width:560px){.tecnicos-grid{grid-template-columns:1fr}.tecnico-card-info-grid,.tecnico-card-permissoes{grid-template-columns:1fr}.tecnico-card-acoes .btn{min-width:0}}
.negociacao-resumo{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.negociacao-bloco{margin-top:18px}
.negociacao-bloco h4{margin:0 0 6px;font-size:14px;font-weight:500}
.negociacao-bloco p{margin:0}
.negociacao-precos{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.negociacao-precos div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.usuario-parceiro-acoes{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media (max-width: 560px){.parceiros-grid{grid-template-columns:1fr}.parceiro-card{min-height:0}.parceiro-card-acoes .btn{flex:1}.usuario-parceiro-acoes{justify-content:flex-start}.act{flex-wrap:wrap}.act .body{min-width:100%}}
.atividade-selecao-lista{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.atividade-selecao{display:grid;grid-template-columns:15% 85%;align-items:flex-start;gap:0;padding:12px;border:1px solid var(--line2);border-radius:var(--radius);cursor:pointer;background:var(--surface)}
.atividade-selecao:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.atividade-selecao input{width:auto!important;justify-self:center;margin-top:3px}
.atividade-selecao span{display:flex;flex-direction:column;gap:3px;min-width:0}
.atividade-selecao small{color:var(--muted);font-size:12px}
.checkbox-lista-item{display:grid;grid-template-columns:15% 85%;align-items:center;gap:0;width:100%;box-sizing:border-box;padding:10px 12px;cursor:pointer;border:1px solid var(--line2);border-radius:var(--radius);text-align:left}
.checkbox-lista-item:hover{border-color:var(--accent-d);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.checkbox-lista-item>input[type="checkbox"]{width:auto;margin:0;justify-self:center}
.checkbox-lista-item>:not(input){min-width:0;text-align:left;overflow-wrap:anywhere}
.checkbox-lista-item-sem-checkbox{display:flex;align-items:flex-start;gap:0;cursor:default}
.checkbox-lista-item-sem-checkbox:hover{border-color:var(--line2);background:var(--surface)}
.card.destaque-temporario{outline:2px solid var(--accent);outline-offset:2px}
.card h3{margin:0 0 14px;font-size:16px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px}
.fld .k{font-size:12px;color:var(--muted)}
.fld .val{font-size:14px;margin-top:3px}

.andamento-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.andamento-title{font-weight:500;font-size:15px}
.andamento-pct{font-size:12px;color:var(--muted);margin-top:8px}
.andamento-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.andamento-info-grid .k{font-size:12px;color:var(--muted)}
.andamento-info-grid .val{font-size:14px;margin-top:3px}
/* Variante sem borda/espaçamento superior — usada quando a grade é o
   primeiro elemento do card (ver renderizarStatusCliente). */
.andamento-info-grid-topo{margin-top:0;padding-top:0;border-top:none}
.andamento-banner{margin-top:12px;padding:9px 12px;border-radius:8px;font-size:12.5px;display:flex;align-items:center;gap:6px}
.andamento-banner.ok{background:var(--green-b);color:var(--green-t)}
.andamento-banner.late{background:var(--red-b);color:var(--red-t)}
.andamento-proximos{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.andamento-proximos-title{font-weight:500;font-size:11.5px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.andamento-proximos-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.andamento-proximos-list li{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.andamento-proximos-list .data{flex:0 0 auto;font-weight:500;color:var(--accent);font-size:12px;min-width:48px}
.andamento-proximos-list .nome{color:var(--text)}

/* Timeline visual de marcos (etapas) — bolinhas ligadas por uma linha
   horizontal, cor conforme o status de cada etapa (ver etapasStatusCliente
   em server.js e renderTimelineEtapas em app.js). Usada tanto no card
   "Andamento da implantação" do técnico quanto no resumo da área do
   cliente — mesmo componente nos dois lugares. */
.etapa-timeline{display:flex;margin-top:16px}
.etapa-timeline-item{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.etapa-timeline-item:not(:last-child)::after{content:'';position:absolute;top:9px;left:50%;width:100%;height:2px;background:#fff;z-index:0}
.etapa-timeline-dot{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px var(--surface)}
.etapa-timeline-dot.status-concluida{background:var(--success)}
.etapa-timeline-dot.status-atual{background:var(--warning)}
.etapa-timeline-dot.status-proxima{background:var(--color-neutral-500)}
/* Leitura rápida do cronograma: concluída em verde neon, etapa atual em
   amarelo ouro e próximas etapas em cinza claro. */
.etapa-timeline-dot.status-concluida{background:#39ff6a}
.etapa-timeline-dot.status-atual{background:#f2c94c}
.etapa-timeline-dot.status-proxima{background:#d9dee8}
.etapa-timeline-label{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.35;padding:0 6px;word-break:break-word}
.etapa-timeline-item.status-atual .etapa-timeline-label{color:var(--text);font-weight:500}
.etapa-timeline-item.clicavel{cursor:pointer}
.etapa-timeline-item.clicavel:hover .etapa-timeline-label{color:var(--text)}
.etapa-timeline-item.clicavel.aberta .etapa-timeline-dot{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.etapa-timeline-item.clicavel.aberta .etapa-timeline-label{color:var(--text);font-weight:500}

/* Accordion aberto ao clicar numa bolinha da timeline (só no dashboard do
   técnico — ver renderAccordionAndamento em app.js). Reusa .data-card da
   tela Atividades; aqui só acrescenta a visão recolhida e o botão de
   recolher de volta. */
.andamento-accordion-body{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.data-card.colapsado{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.data-card.colapsado:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}
.data-card.colapsado .data-card-data{flex:1}
.data-card-recolher{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;padding:4px 2px;margin-bottom:4px}
.data-card-recolher:hover{color:var(--text)}

/* Componente de busca "digite para pesquisar" — substitui <select> longos
   onde o usuário precisa achar um registro específico numa lista que pode
   crescer bastante (ver montarBuscaComSugestoes em app.js). */
.autocomplete-wrap{position:relative}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line2);border-top:none;border-radius:0 0 8px 8px;max-height:220px;overflow:auto;box-shadow:var(--shadow-md)}
.autocomplete-item{padding:8px 12px;font-size:13.5px;cursor:pointer}
.autocomplete-item:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.autocomplete-empty{padding:8px 12px;font-size:12.5px;color:var(--muted)}

/* Botão flutuante "Concluir e Assinar" da aba Meu progresso (cliente) —
   fica acima da tabbar inferior, sempre visível desde o primeiro voto. */
.progresso-flutuante{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:55;
  background:var(--surface);box-shadow:var(--shadow-md);
  border-radius:14px;padding:10px;display:flex;justify-content:center;
  width:calc(100% - 40px);max-width:460px}
.progresso-flutuante.hidden{display:none}
.progresso-flutuante .btn{width:100%}

/* Barra full-width de status da conexão do WhatsApp de Envios (aba Envios)
   — só informativa; conectar/desconectar continua em Configurações →
   Whatsapp (ver renderBarraConexaoEnvios/irParaConfigWhatsapp em app.js). */
.conexao-bar{width:100%;box-sizing:border-box;padding:11px 16px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:500;margin-bottom:20px;flex-wrap:wrap}
.conexao-bar.ok{background:var(--green-b);color:var(--green-t)}
.conexao-bar.erro{background:var(--red-b);color:var(--red-t)}
.conexao-bar.info{background:var(--info-b);color:var(--info-t)}
.conexao-bar.neutro{background:var(--color-neutral-800);color:var(--muted)}
.conexao-bar a{color:inherit;font-weight:500;text-decoration:underline;white-space:nowrap;cursor:pointer}

/* Selo bem visível de atividade atrasada, na listagem de atividades do
   cliente (ver diasAtrasoAtividade/viewDetalhe em app.js). */
.atraso-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--red-t);color:var(--color-bg);font-size:14px;font-weight:700;
  margin-right:8px;flex:none;vertical-align:middle;box-shadow:0 0 0 3px var(--red-b)}

.act{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.act:last-child{border-bottom:none}
.chk{width:20px;height:20px;border:1.5px solid var(--accent);background:var(--surface);border-radius:5px;flex:none;margin-top:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-bg);font-size:13px}
.chk.on{background:var(--accent);border-color:var(--accent);color:#fff}
.act .body{flex:1}
.act .name{font-size:14px}
.act .name.done{text-decoration:line-through;color:var(--muted)}
.meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:16px}
.meta span{display:inline-flex;align-items:center;gap:4px}
.act .rm{background:none;border:none;color:var(--red-t);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:6px;line-height:1}
.act .rm:hover{background:var(--red-b)}
.tag-extra{font-size:10px;background:var(--info-b);color:var(--info-t);padding:1px 7px;border-radius:12px;margin-left:8px}
.lista-onboardings{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.linha-onboarding{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--radius-sm)}

/* Tela Atividades (kanban por data) — ver viewAtividadesCliente em app.js.
   Colunas = datas previstas (mais "Sem data"); dentro delas, um .data-card
   por etapa agrupando as atividades daquela etapa nessa data. */
/* "Voltar" + título + a barra de rolagem sempre visíveis (pedido do
   usuário) — sticky logo abaixo do .topbar (58px de altura). background
   sólido pra cobrir os cards que passam por baixo ao rolar a página. */
.atividades-topo-fixo{position:sticky;top:58px;z-index:6;background:var(--bg);padding:10px 0 6px}
/* Barra "sósia" da rolagem real do .kanban-wrap (sincronizada por JS nos
   dois sentidos, ver sincronizarRailRolagem em app.js) — só existe pra
   poder ficar sticky junto do cabeçalho; a real fica presa lá embaixo,
   correndo com o quadro. Mesma altura/visual da barra nativa do
   .kanban-wrap. Escondida no mobile (lá a navegação é por botões
   anterior/próxima, não por scroll horizontal — ver #kanban-mobile-nav). */
.kanban-scroll-rail{overflow-x:auto;overflow-y:hidden;height:8px;margin-top:8px}
.kanban-scroll-rail::-webkit-scrollbar{height:8px}
.kanban-scroll-rail::-webkit-scrollbar-track{background:var(--line)}
.kanban-scroll-rail::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
#kanban-scroll-rail-inner{height:1px}
/* Rolagem horizontal — a barra de verdade é a #kanban-scroll-rail sticky lá
   em cima (ver .atividades-topo-fixo), sincronizada por JS com o scroll
   real deste wrapper. A barra NATIVA daqui fica escondida (::-webkit-
   scrollbar/scrollbar-width abaixo) — sem isso apareciam DUAS barras roxas
   empilhadas (a sticky + esta), como reportado pelo usuário. scroll-snap
   também foi removido: ele brigava com a atribuição contínua de scrollLeft
   feita pela sincronização da barra sticky, travando a rolagem em vários
   pontos em vez de deslizar liso. */
.kanban-wrap{
  display:flex;gap:16px;
  /* Contra-intuitivo, mas correto: o rotateX abaixo espelha tudo em torno
     do centro vertical do wrapper (cuja altura é a da coluna mais alta).
     "flex-end" aqui é o que vira "encostado no topo" DEPOIS do espelhamento
     — com flex-start, só a coluna mais alta ficava no topo; as mais curtas
     apareciam grudadas embaixo. */
  align-items:flex-end;
  overflow-x:auto;overflow-y:hidden;
  padding-top:10px;
  scroll-behavior:smooth;
  transform:rotateX(180deg);
  scrollbar-width:none;
}
.kanban-wrap::-webkit-scrollbar{display:none}
.kanban-col{background:var(--surface);border-radius:12px;padding:14px;box-shadow:var(--shadow-sm);flex:0 0 300px;max-width:300px;transform:rotateX(180deg)}
.kanban-col-header{font-size:14px;font-weight:500;margin-bottom:12px}
.kanban-col-title-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.kanban-col-title{min-width:0;line-height:1.35}
.kanban-col-count{font-size:11px;color:var(--muted);background:var(--color-neutral-800);border-radius:10px;padding:2px 8px}
.kanban-col-tecnicos{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:12px;font-weight:400;color:var(--muted)}
.kanban-col-tecnico{display:flex;justify-content:space-between;align-items:center;gap:6px}
.kanban-col-tecnico .btn.sm{padding:2px 7px}
.kanban-col-body{display:flex;flex-direction:column;gap:12px}

/* Barra de ações em lote (Finalizar/Mudar Data) — uma por coluna de data na
   tela Atividades e uma por etapa aberta no accordion "Andamento" (ver
   renderBarraAcoesLote em app.js). Sem Excluir em lote — removido a pedido
   do usuário. */
.lote-acoes{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:8px;margin-bottom:12px;flex-wrap:wrap}
.lote-acoes-info{font-size:11px;color:var(--muted)}
.lote-acoes-btns{display:flex;gap:6px}

.data-card{border:1px solid var(--line);border-radius:10px;padding:12px}
.data-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.data-card-header-info{min-width:0}
.data-card-data{font-size:12.5px;font-weight:600;color:var(--text)}
/* Badges da etapa (tipo de atividade/execução — ver badgesEtapa em app.js),
   uma vez só junto do nome da etapa, não mais repetidas por atividade. */
.data-card-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
/* Ícone de "mudar data" no cabeçalho do card — pedido do usuário pra
   destacar mais que o resto do card: 50% maior, fundo branco, traço
   amarelo (em vez do padrão ghost roxo transparente). */
.mudar-data-header{background:#fff;border-color:#fff;flex:none}
.mudar-data-header:hover{background:#fff}
.mudar-data-header i{font-size:1.5em;color:var(--warning-t)}
.data-card-itens{display:flex;flex-direction:column;gap:10px}
.data-card-item{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.data-card-item .chk{width:18px;height:18px;font-size:11px;flex:none;margin-top:1px}
/* Atividade concluída não tem checkbox (ver renderCardEtapa em app.js) —
   este espaço reserva a mesma largura do .chk pra o texto ficar alinhado
   com o das atividades pendentes, em vez de colar na borda esquerda. */
.chk-spacer{width:18px;flex:none}
.data-card-item-nome{cursor:pointer;flex:1;min-width:0;word-break:break-word}
.data-card-item-nome.done,.data-card-item.done{text-decoration:line-through;color:var(--muted)}
/* Excluir atividade (à direita do nome, ver renderCardEtapa/wireAcoesKanban) */
.data-card-item-delete{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:4px;flex:none;font-size:13px;line-height:1}
.data-card-item-delete:hover{color:var(--red-t);background:color-mix(in srgb, var(--red-t) 12%, transparent)}
/* Técnico + status do agendamento de CADA atividade (ver metaAtividade em
   app.js) — repete por linha, diferente das badges de etapa acima. Indent
   26px = largura do checkbox (18px) + gap (8px), pra alinhar com o nome. */
.atividade-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin:3px 0 0 26px;flex-wrap:wrap}
.atividade-meta-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted)}
.atividade-meta-dot.ok{background:var(--green-t)}
.atividade-meta-dot.late{background:var(--red-t)}
.atividade-meta-tec{color:var(--text);font-weight:500}
.atividade-meta-sep{opacity:.6}
.atividade-meta-status.ok{color:var(--green-t)}
.atividade-meta-status.late{color:var(--red-t)}

/* Variante compacta: card totalmente concluído (todos os itens daquela data
   já feitos) — menor, riscado, sem ação em lote, só "Reabrir". */
.data-card.done{padding:8px 12px}
.data-card.done .data-card-itens{gap:2px;margin-bottom:6px}
.data-card.done .data-card-item{font-size:12px;text-decoration:line-through;color:var(--muted)}
.atividade-tempo{font-size:11px;color:var(--muted);white-space:nowrap;flex:none}

/* Tickets do Beemore: a cor é reforçada pelo texto alternativo no quadrado
   para que prioridade não dependa apenas de percepção visual. */
.tickets-grid th:first-child,.tickets-grid td:first-child{width:24px;padding-right:0}
.tickets-grid td{vertical-align:middle}
.ticket-prioridade{display:inline-block;width:14px;height:14px;border-radius:2px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .16)}
.ticket-prioridade.baixa{background:#22c55e}
.ticket-prioridade.media{background:#3b82f6}
.ticket-prioridade.alta{background:#eab308}
.ticket-prioridade.urgente{background:#ef4444}
.ticket-prioridade.sem-prioridade{background:var(--line2)}
.ticket-descricao{white-space:pre-wrap;max-height:35vh;overflow:auto}
.ticket-resumo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin:12px 0;font-size:12px;color:var(--muted)}
.ticket-detalhes summary{cursor:pointer;font-weight:600;font-size:13px}
.ticket-detalhes dl{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:7px 12px;margin:10px 0 0;max-height:28vh;overflow:auto;font-size:12px}
.ticket-detalhes dt{font-weight:600;color:var(--muted)}
.ticket-detalhes dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.ticket-resumo{grid-template-columns:1fr}.ticket-detalhes dl{grid-template-columns:1fr;gap:2px}.ticket-detalhes dd{margin-bottom:8px}}

.kanban-mobile-nav{display:none}
@media (max-width:760px){
  .kanban-mobile-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .kanban-mobile-titulo{font-size:14px;font-weight:500}
  /* No mobile a "página" é trocada pelos botões ◀▶ (ver renderizar em
     viewAtividadesCliente), não por rolagem — desliga o truque da barra
     no topo e o snap, que não se aplicam aqui. Sem o rotateX, o alinhamento
     volta a ser o normal (flex-start = topo), diferente do desktop acima. */
  .kanban-wrap{overflow-x:visible;scroll-snap-type:none;transform:none;padding-top:0;align-items:flex-start}
  .kanban-col{flex:1 1 auto;max-width:none;transform:none}
  .kanban-scroll-rail{display:none}
}

/* Card "Vídeos deste onboarding" (detalhe do cliente, lado técnico) — ver
   renderVideosCliente em app.js: agrupado por etapa (título maior e
   negrito), atividade (só negrito) e os vídeos daquela atividade lado a
   lado, cada um com o checkbox de visibilidade pro cliente. */
.videos-cliente-etapa{margin:22px 0 4px;font-family:var(--font-heading);font-weight:700;font-size:16px;letter-spacing:-0.01em}
.videos-cliente-etapa:first-child{margin-top:0}
.videos-cliente-atividade{margin:12px 0 8px;font-size:13.5px;font-weight:700;color:var(--text)}
.videos-cliente-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:6px}
.videos-cliente-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.videos-cliente-item .name{font-size:13.5px;font-weight:500}
.videos-cliente-item .sub{margin:4px 0 8px}
.videos-cliente-item label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}

.overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--color-neutral-900) 65%, transparent);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.hidden{display:none}
.modal{background:var(--surface);border-radius:12px;padding:22px 24px;width:100%;max-width:540px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal h3{margin:0 0 16px;font-size:17px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
/* Mesmo visual de ".field label", mas para textos que NÃO rotulam um único
   campo de formulário (ex.: título de um grupo de checkboxes, ou legenda de
   uma área de pré-visualização) — usar <label> nesses casos é semanticamente
   errado (acessibilidade exige que todo <label> aponte pra um controle via
   for=id) e gera aviso no navegador. */
.field-caption{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:var(--radius);font-size:14px;background:var(--surface);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
/* Textarea (longtext/memorando) fica largo por padrão (ver regra acima) —
   só redimensiona verticalmente, pra não voltar a ficar estreito arrastando
   a borda lateral. */
.field textarea{resize:vertical;font-family:inherit}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contrato-modal-form{display:flex;flex-direction:column;gap:18px}.contrato-form-section{padding-top:16px;border-top:1px solid var(--line)}.contrato-form-section:first-child{padding-top:0;border-top:0}.contrato-form-section h4{margin:0 0 10px;font-size:14px}.contrato-form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.contrato-form-grid .field{margin:0;min-width:0}.contrato-form-grid .span-2{grid-column:span 2}.contrato-form-grid .span-3{grid-column:span 3}.contrato-form-grid .span-4{grid-column:span 4}.contrato-form-grid .span-6{grid-column:span 6}.contrato-form-grid .span-7{grid-column:span 7}.contrato-form-grid .span-8{grid-column:span 8}.contrato-form-grid .span-12{grid-column:span 12}.contrato-form-grid input[readonly]{background:color-mix(in srgb,var(--surface) 78%,var(--bg));color:var(--muted);cursor:not-allowed}.contrato-auto-renovar{display:flex;flex-direction:column;justify-content:flex-end}.switch-label{display:flex;align-items:center;gap:8px;min-height:39px;font-size:13px;color:var(--text);cursor:pointer}.switch-label input{width:auto!important;margin:0}@media(max-width:640px){.contrato-modal-form{gap:16px}.contrato-form-grid{grid-template-columns:1fr}.contrato-form-grid .span-2,.contrato-form-grid .span-3,.contrato-form-grid .span-4,.contrato-form-grid .span-6,.contrato-form-grid .span-7,.contrato-form-grid .span-8,.contrato-form-grid .span-12{grid-column:1}.contrato-form-section{padding-top:14px}.contrato-form-section h4{margin-bottom:8px}}
/* Uma forma de pagamento (ou repasse) por linha: forma/conta flexíveis,
   valor fixo e o botão de remover só o tamanho do texto — ver PDV e
   fechamento de caixa. */
.pagamento-linha{display:grid;grid-template-columns:1.3fr 1.3fr 140px auto;gap:10px;align-items:end}
@media(max-width:640px){.pagamento-linha{grid-template-columns:1fr}}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.hint{font-size:12px;color:var(--info-t);background:var(--info-b);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);border-radius:8px;padding:9px 12px;margin-bottom:16px}
.rota-simulacao-resultado{margin-top:14px;margin-bottom:0;min-height:18px}.rota-simulacao-metrica{display:inline-block;margin-top:5px;font-size:15px;font-weight:700;color:var(--text)}

.empty{text-align:center;color:var(--muted);padding:40px;background:var(--surface);border:1px dashed var(--line2);border-radius:12px}

/* Catálogo administrativo de Projetos/Workflows. A capa permite reconhecer o
   item rapidamente, enquanto tags e preços continuam legíveis sem depender
   da largura de uma tabela. */
.projetos-workflows-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.projeto-workflow-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.projeto-workflow-capa{display:flex;flex:0 0 160px;width:100%;height:160px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;background:var(--color-neutral-800);color:var(--color-neutral-200);text-align:center}
.projeto-workflow-capa i{font-size:27px}.projeto-workflow-capa span{font-size:11px;font-weight:600}.projeto-workflow-capa.com-imagem{padding:0}.projeto-workflow-capa img{display:block;width:100%;height:100%;object-fit:cover}
.projeto-workflow-corpo{display:flex;flex:1;min-width:0;flex-direction:column;gap:12px;padding:15px}
.projeto-workflow-titulo h3{margin:0;font-size:16px;line-height:1.25;overflow-wrap:anywhere}.projeto-workflow-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.projeto-workflow-tags .pill{display:inline-flex;align-items:center;gap:4px}
.projeto-workflow-descricao{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.projeto-workflow-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;margin:0}.projeto-workflow-dados div:last-child{grid-column:span 2}.projeto-workflow-dados dt{color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.projeto-workflow-dados dd{margin:3px 0 0;font-size:12px;font-weight:500;overflow-wrap:anywhere}
.projeto-workflow-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:auto}.projeto-workflow-acoes .btn{min-height:32px}
@media(max-width:560px){.projetos-workflows-grid{grid-template-columns:1fr;gap:12px}.projeto-workflow-capa{flex-basis:140px;height:140px}.projeto-workflow-corpo{padding:13px}.projeto-workflow-acoes .btn{flex:1;justify-content:center}}

/* Skeleton screen: blocos pulsantes no lugar do conteúdo real, mostrados na
   hora (sem esperar resposta do servidor) — ver skeletonLinhas/
   skeletonCards/skeletonTabela em app.js. */
.skeleton-linha{height:12px;border-radius:4px;background:var(--line);margin-bottom:8px;animation:skeleton-pulso 1.1s ease-in-out infinite}
.skeleton-linha:last-child{margin-bottom:0}
@keyframes skeleton-pulso{0%,100%{opacity:.5}50%{opacity:1}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);box-shadow:var(--shadow-md);color:var(--text);padding:10px 18px;border-radius:8px;font-size:13.5px;z-index:100}
.toast.hidden{display:none}
/* !important de propósito: ".hidden" é uma classe utilitária que precisa
   sempre vencer, não importa qual outra classe de componente esteja
   aplicada junto nem a ordem delas no arquivo — sem isso, uma classe de
   componente com display próprio (mesma especificidade de seletor único)
   podia sobrepor o "display:none" dependendo da ordem no arquivo (caso
   real: a antiga ".notif-bar" aparecia vazia mesmo com "hidden" presente). */
.hidden{display:none !important}


/* ===== CLIENTE LAYOUT (área do cliente, estilo app mobile) ===== */
#app-container.login-hidden,#cliente-container.login-hidden{display:none !important}
#cliente-main.cliente-main-full{max-width:720px;margin:0 auto;padding:20px 20px calc(88px + env(safe-area-inset-bottom))}

/* Catálogo de séries: a área do cliente passa a apresentar o onboarding
   como conteúdo a explorar. Mantém o tema do app e usa a metáfora de série
   apenas para orientação: projeto, temporada e episódio continuam claros. */
#cliente-main.cliente-main-full:has(.series-hero){max-width:1120px}
.series-hero{display:grid;grid-template-columns:minmax(250px,36%) 1fr;min-height:330px;margin:-20px -20px 36px;overflow:hidden;background:#202238;border-bottom:1px solid var(--line)}
.series-hero-poster{min-height:250px;position:relative;overflow:hidden}.series-hero-poster .serie-art{min-height:330px}
.serie-art{height:100%;min-height:126px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(145deg,hsl(var(--poster-hue) 42% 35%),hsl(calc(var(--poster-hue) + 45deg) 40% 15%) 70%,#090a12);isolation:isolate}.serie-art::before{content:'';position:absolute;inset:-20%;background:radial-gradient(circle at 68% 20%,hsl(var(--poster-hue) 80% 72% / .34),transparent 34%),radial-gradient(circle at 20% 90%,hsl(calc(var(--poster-hue) + 30deg) 85% 54% / .3),transparent 32%);filter:blur(3px);z-index:-1}.serie-art::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,transparent 45%,rgba(0,0,0,.84));z-index:-1}.serie-art-grid{position:absolute;inset:10% -12% -10%;border:1px solid rgba(255,255,255,.16);transform:perspective(250px) rotateX(54deg) rotateZ(-12deg);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 40px hsl(var(--poster-hue) 90% 65% / .2)}.serie-art-glow{position:absolute;width:90px;height:90px;right:18%;top:18%;border-radius:50%;background:hsl(var(--poster-hue) 100% 82% / .7);filter:blur(20px);opacity:.5}.serie-art-title{position:relative;color:#fff;font-weight:700;font-size:clamp(15px,2vw,26px);line-height:1.08;max-width:85%;text-shadow:0 2px 14px rgba(0,0,0,.7);letter-spacing:-.03em;z-index:1}.serie-art-hero .serie-art-title{font-size:clamp(22px,3vw,42px);max-width:76%}
.series-hero-copy{align-self:end;max-width:690px;padding:42px 48px}.series-hero-copy .pill{margin-bottom:16px}.series-hero-copy h1{margin:0;color:#fff;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em}.series-hero-copy p{margin:12px 0 20px;color:var(--color-neutral-200);font-size:15px;max-width:62ch}.series-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--color-neutral-300);font-size:12px}.series-meta span{display:inline-flex;align-items:center;gap:5px}.series-cta{margin-top:25px}
.series-rail{padding-bottom:24px}.series-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}.series-section-heading h2{margin:0;font-size:22px}.series-section-heading p{margin:3px 0 0;color:var(--muted);font-size:13px}.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.serie-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}.serie-poster{height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--color-neutral-200);background:#30334b;position:relative}.serie-poster i{font-size:30px}.serie-poster span{font-size:11px;letter-spacing:.12em;font-weight:700}.serie-tone-1 .serie-poster{background:#3f344d}.serie-tone-2 .serie-poster{background:#29434b}.serie-tone-3 .serie-poster{background:#474035}.serie-card-copy{padding:14px}.serie-card-copy h3{font-size:16px;margin:0 0 5px}.serie-card-copy p{height:42px;overflow:hidden;margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.45}.serie-card-bloqueada .serie-card-copy .btn{width:100%;justify-content:center}.series-empty{padding:22px 0;color:var(--muted);font-size:13px}.demo-consent{display:flex;align-items:flex-start;gap:9px;margin:16px 0;font-size:12.5px;line-height:1.45;color:var(--color-neutral-200);cursor:pointer}.demo-consent input{margin-top:3px;accent-color:var(--accent)}
@media(max-width:680px){#cliente-main.cliente-main-full:has(.series-hero){max-width:720px}.series-hero{grid-template-columns:1fr;min-height:0;margin:-20px -20px 28px}.series-hero-poster{min-height:168px}.series-hero-poster .serie-art{min-height:210px}.series-hero-copy{padding:24px 20px 28px}.series-hero-copy h1{font-size:31px}.series-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.serie-poster{height:105px}.serie-card-copy{padding:11px}.serie-card-copy h3{font-size:14px}.serie-card-copy p{height:54px;font-size:11.5px}.serie-card-copy .btn{font-size:11px;padding:7px 8px}.ctab{font-size:10px}}
@media(max-width:390px){.series-grid{grid-template-columns:1fr}.serie-card-copy p{height:auto}}

/* Minha série: fluxo vertical de temporadas com cartões cinematográficos */
.serie-page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:10px 0 26px}.serie-page-heading h1{margin:4px 0 8px;font-size:clamp(28px,4vw,42px)}.serie-page-heading p{margin:0;color:var(--muted);max-width:58ch}.serie-kicker,.temporada-kicker{font-size:11px;letter-spacing:.14em;color:var(--accent-d);font-weight:700}.serie-total{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.serie-total strong{font-size:34px;color:var(--accent)}.serie-total span{font-size:12px;color:var(--muted)}
.serie-cronograma{padding:16px 18px;margin-bottom:26px;background:color-mix(in srgb,var(--surface) 88%,var(--accent));border:1px solid var(--line);border-radius:var(--radius-lg)}.serie-cronograma-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.serie-cronograma-title i{color:var(--accent);font-size:20px}.serie-cronograma-title small{margin-left:auto;color:var(--muted);font-weight:400;font-size:11px}.serie-cronograma .etapa-timeline{margin-top:16px}
.temporadas-stack{display:flex;flex-direction:column;gap:30px}.temporada-serie{position:relative}.temporada-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:10px}.temporada-header h2{margin:3px 0 2px;font-size:24px}.temporada-header p{margin:0;color:var(--muted);font-size:12px}.temporada-pct{font-size:20px;font-weight:600;color:var(--accent)}.temporada-progress{height:4px;background:color-mix(in srgb,var(--surface) 60%,var(--line));border-radius:99px;overflow:hidden;margin-bottom:15px}.temporada-progress span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .35s ease-out}.atividades-serie-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.atividade-serie-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .18s ease, border-color .18s ease}.atividade-serie-card:hover{transform:translateY(-2px);border-color:var(--accent)}.atividade-serie-card.concluida{border-color:color-mix(in srgb,var(--success) 45%,var(--line))}.atividade-media{height:168px;background:#090a12;position:relative;overflow:hidden}.atividade-media>img{width:100%;height:100%;object-fit:cover;display:block}.atividade-poster-fallback{width:100%;height:100%}.atividade-poster-fallback .serie-art{min-height:100%;padding:18px}.atividade-play{position:absolute;left:16px;bottom:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4)}.atividade-play.inativo{background:rgba(30,31,46,.82);color:var(--muted);cursor:not-allowed}.atividade-concluida{position:absolute;right:12px;top:12px;padding:5px 8px;border-radius:999px;background:rgba(10,26,20,.86);color:var(--success);font-size:10px;font-weight:700;letter-spacing:.04em}.atividade-serie-body{padding:14px 16px 16px}.atividade-serie-body h3{font-size:18px;margin:0 0 4px}.atividade-resumo{font-size:13px;color:var(--accent-d);margin:0 0 8px}.atividade-sinopse{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;min-height:56px}.mais-link{border:0;background:none;color:var(--accent);padding:0;font:inherit;cursor:pointer}.atividade-actions{display:flex;align-items:center;gap:8px;margin-top:14px}.manual-link{display:inline-flex;text-decoration:none}.manual-placeholder{font-size:11px;color:var(--muted);flex:1}.atividade-watch{margin-left:auto}.atividade-watch:disabled{opacity:.55;cursor:not-allowed}.atividade-episodios{display:flex;gap:7px;margin-top:12px;overflow:auto}.atividade-episodios button{width:64px;height:38px;padding:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#000;cursor:pointer;flex:none}.atividade-episodios img{width:100%;height:100%;object-fit:cover}.serie-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.serie-rating-label{font-size:11px;color:var(--muted);margin-right:2px}.serie-stars{display:flex;gap:2px}.serie-star{border:0;background:none;color:var(--color-neutral-600);font-size:17px;padding:1px;cursor:pointer;line-height:1}.serie-star.on{color:#e8c468}.serie-star:not(:disabled):hover{color:#f2d486}.serie-star:disabled{cursor:default}.serie-rating-status{font-size:10px;color:var(--success);margin-left:auto}.temporada-confirmacao{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--accent) 60%,var(--line));border-radius:var(--radius);font-size:12px;color:var(--muted)}.temporada-confirmacao i{color:var(--accent);margin-right:4px}
@media(max-width:680px){.serie-page-heading{align-items:flex-start}.serie-total{align-items:flex-end}.serie-total strong{font-size:28px}.serie-page-heading h1{font-size:28px}.serie-cronograma-title{align-items:flex-start;flex-wrap:wrap}.serie-cronograma-title small{width:100%;margin-left:28px}.atividades-serie-lista{grid-template-columns:1fr}.atividade-media{height:188px}.temporada-confirmacao{align-items:flex-start;flex-direction:column}.temporada-confirmacao .btn{width:100%}}

.agenda-central-dia-itens{position:relative}
/* Card com scroll próprio: sem isso, a régua de horas rolava junto com a
   página inteira e saía de vista ao ver atividades mais tarde no dia. */
.agenda-central-escala-scroll{max-height:min(70vh,640px);overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 8px 10px 6px}
/* Régua vertical de horários da escala (ver posicionarHorasAgendaCentral) —
   coluna estreita ao lado dos blocos do dia, com marcadores de hora cheia
   alinhados ao mesmo eixo vertical dos cards. */
.agenda-central-escala{display:grid;grid-template-columns:44px 1fr;gap:0;margin-bottom:4px}
.agenda-central-escala-horas{position:sticky;left:0}
.agenda-central-escala-hora{position:absolute;left:0;right:10px;transform:translateY(-6px);font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.agenda-central-escala-hora::after{content:"";position:absolute;top:6px;right:-8px;width:5px;height:1px;background:var(--line)}
.agenda-central-escala-hora.hora-cheia{color:var(--text);font-weight:700}
.agenda-central-escala-hora.hora-cheia::after{width:9px;background:var(--accent)}
.agenda-central-escala-temporal{position:relative}
.agenda-central-escala-temporal .agenda-central-escala-horas{position:relative;height:100%;}
.agenda-central-escala-temporal .agenda-central-dia-itens{height:100%;}
.agenda-central-escala-temporal .agenda-central-dia-itens::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--agenda-escala-passo) - 1px),var(--line) var(--agenda-escala-passo));pointer-events:none;z-index:0}
.agenda-central-escala-temporal .agenda-central-dia-itens::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--agenda-escala-hora) - 1px),var(--line-strong) var(--agenda-escala-hora));pointer-events:none;z-index:0}
.agenda-central-bloco-temporal{position:absolute;left:10px;right:10px;z-index:2;overflow:visible}
.agenda-central-fora-expediente{position:absolute;left:0;right:0;z-index:1;background:color-mix(in srgb,var(--warning) 7%,transparent);border-top:1px dashed var(--warning);border-bottom:1px dashed color-mix(in srgb,var(--warning) 36%,transparent);pointer-events:none}
.agenda-central-fora-expediente span{position:absolute;right:12px;top:5px;color:var(--warning);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.agenda-central-fim-jornada{position:absolute;left:0;right:0;z-index:3;border-top:1px solid var(--warning);pointer-events:none}
.agenda-central-fim-jornada span{position:absolute;left:10px;top:4px;padding:1px 5px;border-radius:4px;background:var(--surface);color:var(--warning);font-size:10px;font-weight:700;white-space:nowrap}
.agenda-central-atrasado{border-color:var(--warning) !important;background:color-mix(in srgb,var(--warning) 12%,var(--surface))}
.agenda-central-atraso-aviso{display:flex;align-items:center;gap:5px;color:var(--warning-t);font-weight:600;font-size:12px;margin-top:6px}
.agenda-central-atraso-aviso i{font-size:15px}
.agenda-central-concluido{opacity:.55}
.agenda-central-agora-linha{position:absolute;left:0;right:0;height:0;border-top:2px dashed var(--error);z-index:3;pointer-events:none}
.agenda-central-agora-label{position:absolute;left:10px;top:-9px;background:var(--error);color:#fff;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap}
/* Bloco "fantasma": horário original de um atraso próprio, separado do bloco
   real (ver docs/decisions/0008 e o esboço aprovado da Agenda Central). */
.agenda-central-atraso-fantasma{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text) 8%,var(--surface)),color-mix(in srgb,var(--text) 8%,var(--surface)) 6px,var(--surface) 6px,var(--surface) 12px);border:1px dashed var(--line);color:var(--muted);opacity:.75}
.agenda-central-atraso-fantasma div:first-child{text-decoration:line-through}
/* Realce de "atropelamento": a linha do agora cruzando um bloco em
   andamento. */
.agenda-central-atropelado{box-shadow:0 0 0 2px var(--error) inset}

/* Estado concluído: destaque imediato e inequívoco, sem depender só do ícone. */
.atividade-serie-card.concluida{border:2px solid #22ff5c;box-shadow:0 0 0 1px rgba(34,255,92,.6),0 0 18px rgba(34,255,92,.42)}
.atividade-concluida{z-index:2;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid rgba(101,255,157,.65);border-radius:999px;background:rgba(7,35,20,.94);color:#b8ffcf;font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.1;white-space:nowrap;box-shadow:0 5px 16px rgba(0,0,0,.34)}
.atividade-concluida i{font-size:15px}
.serie-inline-close{z-index:3}
.player-training-error{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 0,#2b1740 0,transparent 55%),#11121a;color:#fff}
.player-training-error>i{font-size:28px;color:#e8c468}.player-training-error strong{font-size:14px;max-width:34ch}.player-training-error span{font-size:12px;color:#c5c5d0;max-width:42ch}.player-training-error .btn{margin-top:3px}
.training-player-shield{position:absolute;z-index:1;inset:0;cursor:default}
.training-player-controls{position:absolute;z-index:2;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(7,10,13,.88);color:#c9fbd8;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.training-player-controls .btn{min-height:30px}.training-player-controls span{font-size:11px;font-weight:600;white-space:nowrap}.training-player-controls span i{color:#22ff5c;font-size:14px;vertical-align:-2px}
@media(max-width:480px){.training-player-controls{left:8px;bottom:8px;padding:6px 7px}.training-player-controls span{display:none}}

/* Avaliação do treinamento: leitura vertical e alvos grandes para toque. */
#cliente-main .serie-rating{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px;padding-top:15px}
#cliente-main .serie-rating .serie-rating-label{margin:0;font-size:16px;font-weight:700;line-height:1.2;color:var(--text)}
#cliente-main .serie-rating .serie-stars{display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#cliente-main .serie-rating .serie-star{display:grid;place-items:center;min-height:48px;padding:4px;border-radius:9px;font-size:clamp(30px,7vw,38px);line-height:1}
#cliente-main .serie-rating .serie-star:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
#cliente-main .serie-rating .serie-rating-status{margin-left:0;font-size:11px}
.series-hero-poster .serie-art,.serie-poster .serie-art{width:100%;height:100%}
.serie-inline-player[data-countdown]::after{content:attr(data-countdown);position:absolute;left:14px;bottom:14px;padding:7px 11px;border-radius:999px;background:rgba(10,10,16,.88);color:#fff;font-size:12px;font-weight:600;letter-spacing:.01em;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.serie-art-upload{background-size:cover;background-position:center}.serie-card-copy{display:flex;flex-direction:column;min-height:190px}.serie-card-copy p{flex:1}.serie-card-copy>button{margin-top:auto}.serie-itens-modal{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.serie-itens-modal strong{font-size:13px}.serie-itens-modal ul{margin:8px 0 0;padding-left:20px;color:var(--muted)}.serie-itens-modal li{margin:4px 0}.projeto-capa-preview{display:block;width:220px;max-height:100px;object-fit:cover;border-radius:var(--radius);margin-top:8px;border:1px solid var(--line)}.upload-status{margin:8px 0 0;font-size:12px;color:var(--muted)}.upload-status.pendente{color:var(--info-t)}.upload-status.enviando{color:var(--info-t);font-weight:600}.upload-status.erro{color:var(--error-t);font-weight:600}

.cliente-tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);
  border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20;
  box-shadow:0 -2px 10px rgba(0,0,0,0.35)}
.ctab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);font-size:11px;cursor:pointer;padding:4px 0}
.ctab .ctab-ic{font-size:20px;line-height:1}
.ctab.on{color:var(--accent)}

.onboarding-resumo{padding:16px;border-bottom:1px solid var(--line);background:var(--surface);border-radius:var(--radius);margin-bottom:20px}
.onboarding-resumo-pct{font-size:28px;font-weight:500;color:var(--accent);font-family:var(--font-heading)}

/* Agenda por data */
.agenda-card{transition:opacity 0.2s}
.agenda-card .agenda-dim{transition:opacity 0.2s}
.agenda-card.agenda-bloqueado .agenda-dim{opacity:0.55}
.agenda-card.agenda-concluido .agenda-item{color:var(--muted);text-decoration:line-through}
.agenda-item{font-size:13.5px;padding:3px 0}
.agenda-item-duracao{color:var(--muted);font-size:12px}
.agenda-total-dia{font-weight:500}
/* Atividades no mesmo horário agrupadas sob um "às HH:MM" único (ver
   renderizarAgendaCliente em app.js) — a hora não repete em cada linha. */
.agenda-hora-grupo{margin:4px 0}
.agenda-hora-label{font-size:11.5px;font-weight:600;color:var(--accent-d);letter-spacing:.02em;margin-bottom:2px}
.agenda-item-agrupado{padding-left:14px}
.agenda-card.agenda-concluido .agenda-hora-label{color:var(--muted)}

/* Aviso "assista os vídeos pra liberar" — precisa saltar aos olhos mesmo
   dentro de um card bloqueado (esmaecido), por isso fica fora do
   .agenda-dim e usa um amarelo neon com leve glow. */
.aviso-liberacao-neon{
  font-size:12.5px;
  font-weight:600;
  color:#eaff00;
  text-shadow:0 0 6px rgba(234,255,0,0.65), 0 0 14px rgba(234,255,0,0.35);
}

/* Player da Minha série: camada flutuante com área de vídeo ampla e tela
   cheia nativa, sem alterar o tamanho dos cards da temporada. */
.serie-player-open{overflow:hidden}
.serie-player-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,34px);background:rgba(8,8,14,.86);backdrop-filter:blur(5px);overscroll-behavior:contain}
.serie-player-overlay.hidden{display:none}
.serie-player-dialog{width:min(1280px,100%);max-height:calc(100vh - clamp(24px,6vw,68px));display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.58)}
.serie-player-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px 14px;background:color-mix(in srgb,var(--surface) 88%,var(--accent));border-bottom:1px solid var(--line)}
.serie-player-kicker{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--accent-d)}
.serie-player-header h2{margin:2px 0 0;font-size:clamp(18px,2.2vw,25px);line-height:1.2}
.serie-player-header p{margin:3px 0 0;color:var(--muted);font-size:12px}
.serie-player-close{width:36px;height:36px;flex:none;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--text);display:grid;place-items:center;font-size:20px;cursor:pointer}
.serie-player-close:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.serie-player-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:0;background:#050509}
.serie-player-stage iframe{display:block;width:100%;height:100%;border:0}
.serie-player-stage[data-countdown]::after{content:attr(data-countdown);position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:999px;background:rgba(10,10,16,.9);color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 14px rgba(0,0,0,.35);pointer-events:none}
.serie-player-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.serie-player-actions{display:flex;align-items:center;gap:8px}
.serie-player-dialog:fullscreen{width:100vw;height:100vh;max-height:none;border:0;border-radius:0}
.serie-player-dialog:fullscreen .serie-player-stage{flex:1;aspect-ratio:auto}
@media(max-width:620px){.serie-player-overlay{padding:0;align-items:flex-end}.serie-player-dialog{width:100%;max-height:100vh;border-radius:16px 16px 0 0}.serie-player-header{padding:14px 16px 11px}.serie-player-footer{padding:10px 12px;flex-wrap:wrap}.serie-player-footer>#serie-player-fullscreen{order:2}.serie-player-actions{order:1;width:100%;justify-content:flex-end}.serie-player-actions .btn{flex:1}.serie-player-actions .btn.primary{flex:2}}

/* Calendário de compromissos (Agenda do técnico) — master-detail: mini-mês
   só com bolinhas de status (ver renderCalendarioAgenda em app.js) + board
   de dias úteis com um card por compromisso. Reaproveita as classes de pill
   já existentes (late/ok/Kron/azul/done) tanto pra bolinha quanto pro card,
   sem duplicar a paleta de status — ver pillClasseStatusCalendario. */
.agenda-calendario-layout{display:flex;align-items:flex-start;gap:20px}
.agenda-calendario-layout.mobile{flex-direction:column}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.status-dot.late{background:var(--red-t)}
.status-dot.ok{background:var(--green-t)}
.status-dot.Kron{background:var(--kron-t)}
.status-dot.azul{background:var(--blue-t)}
.status-dot.done{background:var(--gray-t)}

.mini-cal{flex:none;width:272px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px}
.agenda-calendario-layout.mobile .mini-cal{width:100%}
.mini-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mini-cal-head strong{font-size:13px}
.mini-cal-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:4px}
.mini-cal-semana span{text-align:center;font-size:10px;font-weight:700;color:var(--muted)}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:3px}
.mini-cal-dia{position:relative;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:8px;font-size:11.5px;color:var(--text);background:transparent;border:0;cursor:pointer;font-family:inherit}
.mini-cal-dia.vazio{cursor:default}
.mini-cal-dia:not(.vazio):hover{background:color-mix(in srgb, var(--text) 8%, transparent)}
.mini-cal-dia.hoje{box-shadow:inset 0 0 0 1px var(--accent)}
.mini-cal-dia.selecionado{background:var(--accent);color:var(--color-bg);font-weight:700}
.mini-cal-dots{display:flex;gap:2px;height:4px}
.mini-cal-legenda{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.mini-cal-legenda>div{display:flex;align-items:center;gap:7px}

.board-wrap{flex:1;min-width:0}
.board-titulo{font-size:12px;color:var(--muted);margin-bottom:10px}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.agenda-calendario-layout.mobile .board{grid-template-columns:1fr;margin-top:14px}
.board-col-head{display:flex;flex-direction:column;align-items:center;padding-bottom:8px;margin-bottom:8px;border-bottom:2px solid var(--line)}
.board-col-head.hoje{border-bottom-color:var(--accent)}
.board-dow{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.board-dom{font-size:15px;font-weight:700;margin-top:1px}
.board-col-head.hoje .board-dom{color:var(--accent)}
.board-vazio{font-size:11px;color:var(--muted);text-align:center;padding:10px 4px}
.compromisso-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 11px 9px;margin-bottom:9px;cursor:pointer;transition:border-color .15s ease}
.compromisso-card:hover{border-color:var(--accent)}
.cc-cliente{font-size:12.5px;font-weight:600;margin-bottom:4px;line-height:1.25}
.cc-hora{font-size:11px;color:var(--muted);margin-bottom:2px}
.cc-hora.sem-hora{font-style:italic}
.cc-total{font-size:10.5px;color:var(--muted);margin-bottom:7px}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.board-avatares{display:flex}
.board-avatar{width:18px;height:18px;border-radius:50%;background:var(--color-neutral-800);color:var(--color-neutral-200);border:1.5px solid var(--surface);font-size:8px;font-weight:700;display:grid;place-items:center;margin-left:-6px}
.board-avatares .board-avatar:first-child{margin-left:0}
.cc-status{font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px;white-space:nowrap}
.cc-status.late{background:var(--red-b);color:var(--red-t)}
.cc-status.ok{background:var(--green-b);color:var(--green-t)}
.cc-status.Kron{background:var(--kron-b);color:var(--kron-t)}
.cc-status.azul{background:var(--blue-b);color:var(--blue-t)}
.cc-status.done{background:var(--gray-b);color:var(--gray-t)}

.board-pager{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.board-pager-titulo{font-size:13px;font-weight:600;text-align:center}
.board-pager-titulo span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
/* Sino de notificações no cabeçalho (fora das telas que trocam, tanto área
   técnico quanto área cliente) — substitui a antiga barra fixa embaixo do
   header. Só o contador fica sempre visível; a lista (.notif-item abaixo)
   é montada sob demanda dentro do modal, ver abrirPainelNotificacoes em
   app.js. */
.topbar-sino{position:relative;background:none;border:none;color:var(--muted);cursor:pointer;font-size:19px;padding:4px;display:flex;align-items:center;border-radius:var(--radius-sm)}
.topbar-sino:hover{color:var(--text);background:color-mix(in srgb, var(--text) 6%, transparent)}
.topbar-sino-badge{position:absolute;top:-2px;right:-2px;background:var(--red-t);color:var(--color-bg);font-size:10px;font-weight:600;border-radius:8px;min-width:15px;height:15px;line-height:15px;text-align:center;padding:0 3px;box-sizing:border-box}

/* Conteúdo do painel de notificações (dentro do modal, ver
   #notif-painel-corpo em app.js) — cada notificação como uma linha. */
.notif-item{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.notif-item:last-child{border-bottom:none}
.notif-item .notif-texto{flex:1;min-width:0}
.notif-item .notif-titulo{font-weight:500}
.notif-item .notif-msg{color:var(--muted);font-size:12px}
.notif-item .notif-acoes{display:flex;align-items:center;gap:6px;flex-shrink:0}
.notif-dispensar{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 4px;line-height:1}
.notif-dispensar:hover{color:var(--text)}

/* Estrelas de avaliação, com a legenda de cada nota sempre visível
   embaixo da própria estrela (em vez de só mostrar a legenda da nota
   selecionada numa linha à parte). Mantido um tom de dourado (em vez de
   virar accent) porque "estrela dourada" é uma convenção universal que o
   usuário reconhece de cara — ajustado só o tom pra ter contraste melhor
   num fundo escuro. */
.estrelas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:4px}
.estrela-col{cursor:pointer;text-align:center;padding:4px 2px;border-radius:8px;transition:background 0.15s}
.estrela-col:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}
.estrela-col .estrela{font-size:22px;line-height:1;color:var(--line2);display:block}
.estrela-col .estrela.on{color:#e8c468}
.estrela-legenda{font-size:10.5px;color:var(--muted);line-height:1.25;margin-top:4px}

.atividade-videos-header{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
.atividade-videos-header:first-of-type{margin-top:4px}
.atividade-videos-header .sub{font-weight:400;margin-top:0}

/* Agrupamento por data em "Meu progresso" (ver renderizarProgressoCliente
   em app.js) — mesmo espírito do cabeçalho de data da aba Vídeos acima,
   só sem o degradê de cor (não precisa: normalmente é só o grupo mais
   recente pendente por vez). */
.progresso-grupo{margin-bottom:22px}
.progresso-grupo-header{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
.progresso-grupo:first-of-type .progresso-grupo-header{margin-top:4px}

/* Card-resumo de um grupo já assinado (bloqueado + recebimento confirmado
   por WhatsApp) — colapsado por padrão, expande ao clicar no cabeçalho pra
   mostrar a tabela Treinamento/Estrelas (mesmo formato da página pública
   confirmar-avaliacoes.html). */
.progresso-assinado-header{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}
.progresso-assinado-header .ph-caret-down{transition:transform 0.15s;display:inline-block;vertical-align:-2px}
.progresso-assinado-detalhe{display:none}
.progresso-assinado.aberto .progresso-assinado-detalhe{display:block}
.progresso-assinado.aberto .progresso-assinado-header .ph-caret-down{transform:rotate(180deg)}

/* Contêiner de cada data na aba Vídeos — a cor da borda (5px) é definida
   inline por grupo, pois acompanha o mesmo degradê do fundo do cabeçalho
   (ver renderizarVideosPorData em app.js). Aqui só as propriedades fixas. */
.grupo-data-videos{border-radius:12px;padding:14px;margin-bottom:22px}
.grupo-data-videos:first-of-type{margin-top:4px}

/* auto-fill + minmax: quantas colunas cabem lado a lado é decidido pelo
   navegador a cada largura de tela — sem media query pra manter (o
   #cliente-main.cliente-main-full tem 720px de largura máxima, então isto
   já garante 3 colunas no desktop/tablet e cai pra 1 sozinho no celular,
   sempre que houver vídeos suficientes pra preencher a linha). 180px (em
   vez de 200px) pra caber 3 colunas com folga um pouco maior dentro dos
   720px do container, em vez de ficar justo. max-width:900px removido:
   nunca fazia efeito, já que o pai é sempre mais estreito que isso. */
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.video-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative}
.video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* Vídeo assistido: linha fina + brilho, no espírito Nocturne ("a line and
   a glow rather than a flood") — mantém a borda fina de 2px (antes era
   neon verde de 10px, fora do estilo do sistema), só trocando a cor do
   accent (roxo) pro verde neon já usado como indicador de "assistido" em
   outras telas (ver .video-circ.green), a pedido do usuário. */
.video-card.watched{border:2px solid #22ff5c;box-shadow:0 0 0 1px #22ff5c, 0 0 18px rgba(34,255,92,.55)}
.video-card.expanded{grid-column:1 / -1;cursor:default;max-width:640px}
.video-card.expanded:hover{transform:none;box-shadow:none}
.video-inline-actions{display:flex;gap:10px;margin-top:10px}
.video-thumb{width:100%;padding-top:56.25%;background:#000;position:relative;overflow:hidden}
.video-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.video-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);font-size:40px;color:var(--text)}
.video-info{padding:12px 14px}
.video-title{font-size:14px;font-weight:500;line-height:1.3;color:var(--text)}
.video-desc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.video-status{position:absolute;top:8px;right:8px;background:color-mix(in srgb, var(--color-bg) 80%, transparent);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:13px}
.video-status.watched{background:var(--green-b);color:var(--green-t)}
.video-thumb-duracao{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.75);color:#fff;font-size:11px;font-weight:500;padding:2px 6px;border-radius:4px;line-height:1.4}

.cliente-topbar{padding-left:24px;padding-right:24px}

/* Nome do usuário/contabilidade no Portal do Parceiro (ver
   #topbar-parceiro-usuario em index.html): em telas estreitas não cabe na
   mesma linha da marca + botão Sair, então quebra pra uma segunda linha em
   vez de cortar com reticências — o pedido era "sempre visível". */
@media(max-width:600px){
  .cliente-topbar{flex-wrap:wrap;height:auto;min-height:58px;row-gap:6px}
  #topbar-parceiro-usuario{order:3;width:100%;max-width:none;white-space:normal;text-align:left;margin:0!important}
}

/* Player de vídeo (toca inline na página, dentro do card) */
.video-player-container{width:100%;padding-top:56.25%;position:relative;background:#000;margin-bottom:16px;border-radius:8px}
.video-player-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:8px}

/* ---------- PDV (Vendas > PDV) ----------
   Visual de referência pedido pelo usuário: caixa tradicional de loja física
   (barra escura de topo/rodapé, grid de itens, caixa vermelha de total,
   atalhos de teclado). Usa os mesmos tokens do resto do app (--color-neutral-*
   pras barras escuras, --error pro total) em vez de cores fixas, pra
   continuar coerente com o tema. */
.pdv-wrap{display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:520px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.pdv-autorizacao{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--warning);border-radius:var(--radius);background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--text);font-size:13px;font-weight:600}
.pdv-autorizacao i{font-size:18px;flex:none}.pdv-autorizacao.autorizada{border-color:var(--warning);background:color-mix(in srgb,var(--warning) 12%,var(--surface))}.pdv-autorizacao.negada{border-color:var(--error);background:color-mix(in srgb,var(--error) 10%,var(--surface))}
.pdv-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;
  background:var(--color-neutral-900);color:var(--color-neutral-200);font-size:12.5px;font-weight:500;flex-wrap:wrap}
.pdv-topbar b{color:#fff}
.pdv-corpo{flex:1;display:flex;min-height:0;background:var(--color-neutral-800)}
.pdv-esq{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--color-neutral-500);padding:20px;text-align:center}
.pdv-esq i{font-size:96px;opacity:.5}
.pdv-esq .pdv-esq-titulo{font-size:22px;font-weight:600;color:var(--color-neutral-400)}
.pdv-dir{flex:1.3;display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--color-neutral-700)}
.pdv-grid-wrap{flex:1;overflow:auto;background:var(--color-neutral-800)}
.pdv-grid{width:100%;border-collapse:collapse;font-size:13px}
.pdv-grid thead th{position:sticky;top:0;background:var(--color-neutral-700);color:var(--color-neutral-200);
  text-align:left;padding:8px 10px;font-weight:600;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase}
.pdv-grid thead th.num,.pdv-grid td.num{text-align:right}
.pdv-grid tbody td{padding:7px 10px;color:var(--color-neutral-200);border-bottom:1px solid var(--color-neutral-700)}
.pdv-grid tbody tr:hover{background:color-mix(in srgb, #fff 4%, transparent)}
.pdv-grid .rm-item{background:none;border:none;color:var(--error);cursor:pointer;font-size:15px;padding:0 4px}
.pdv-vazio{padding:26px;text-align:center;color:var(--color-neutral-500);font-size:13px}
.pdv-status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 14px;
  background:var(--color-neutral-900);color:var(--color-neutral-300);font-size:12.5px;border-top:1px solid var(--color-neutral-700)}
.pdv-status-row b{color:#fff;font-weight:600}
.pdv-status-row .btn{padding:3px 9px;font-size:11.5px}
.pdv-totais{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:1px;background:var(--color-neutral-700)}
.pdv-totais>div{background:var(--color-neutral-900);padding:8px 12px;text-align:right}
.pdv-totais label{display:block;font-size:10.5px;color:var(--color-neutral-500);text-transform:uppercase;letter-spacing:.02em}
.pdv-totais .valor{font-size:17px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.pdv-total-box{background:var(--error) !important}
.pdv-total-box label{color:color-mix(in srgb, #000 35%, var(--error))}
.pdv-total-box .valor{color:#2a0a08;font-size:20px}
.pdv-footer{display:flex;align-items:stretch;gap:0;background:var(--color-neutral-900);border-top:1px solid var(--color-neutral-700)}
.pdv-footer-btn{border:none;background:transparent;color:var(--color-neutral-300);padding:12px 16px;font-size:13px;
  cursor:pointer;font-family:inherit;font-weight:500;display:flex;align-items:center;gap:6px}
.pdv-footer-btn:hover{background:color-mix(in srgb, #fff 6%, transparent)}
.pdv-footer-btn.esc{color:var(--error)}
.pdv-footer-btn.enter{color:var(--success);margin-left:auto}
.pdv-busca-wrap{flex:1;padding:8px 12px;display:flex;align-items:center}
.pdv-busca-wrap input{width:100%;background:var(--color-neutral-800);border:1px solid var(--color-neutral-700);color:#fff}
.pdv-statusbar{background:var(--color-neutral-700);color:var(--color-neutral-300);text-align:center;
  padding:9px;font-size:13px;font-weight:600;letter-spacing:.04em}
.pdv-produto-sugestoes{position:absolute;bottom:100%;left:12px;right:12px;background:var(--color-neutral-800);
  border:1px solid var(--color-neutral-600);border-radius:var(--radius);max-height:220px;overflow:auto;box-shadow:var(--shadow-md)}
.pdv-produto-sugestao{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;color:var(--color-neutral-200);font-size:13px}
.pdv-produto-sugestao:hover,.pdv-produto-sugestao.on{background:var(--accent);color:#fff}
@media (max-width: 860px){
  .pdv-corpo{flex-direction:column}
  .pdv-esq{display:none}
  .pdv-totais{grid-template-columns:1fr 1fr}
  .pdv-wrap{height:auto}
  .pdv-autorizacao{align-items:flex-start}
}

/* ---------- Impressão (Cálculo AGR / Cálculo Parceiro) ----------
   `.no-print` marca controles de tela (filtros, botões, nav) que não fazem
   sentido no papel; `.print-only` é o inverso (só aparece impresso, ex.:
   competência ao lado do título). O resto da folha some por padrão — nav,
   modal overlay etc — só o conteúdo principal (#app) permanece. */
.print-only{display:none}
@media print{
  #nav-l1, #nav-sidebar, .nav-mobile-l1, .nav-l2-mosaic, .topbar, #toast, .no-print, #aviso-banco-teste{display:none !important}
  .print-only{display:inline}
  body, #app{background:#fff;color:#000}
  #app{max-width:none;padding:0}
  /* `table{background:var(--surface)}` (tela) fica escuro nos temas escuros
     e nunca era resetado aqui — cabeçalho e linhas saíam com o fundo do
     tema em vez de branco. */
  table, thead tr, tbody tr{background:none !important}
  .print-tabela th, .print-tabela td{color:#000;border-color:#ccc}
  .pill{border:1px solid #999;background:none !important;color:#000 !important}
}

/* Relatório de reajustes aprovados (ver mostrarRelatorioReajustes em
   app.js): a linha de mensalidades fica logo abaixo da linha do contrato,
   recuada e menor, pra não competir com a tabela principal. */
.rel-reaj-mensalidades-row td{padding:0 14px 14px 34px;border:0}
.rel-reaj-mensalidades{width:auto;min-width:320px;font-size:12px}
.rel-reaj-mensalidades th{padding:6px 10px;font-size:10px}
.rel-reaj-mensalidades td{padding:6px 10px}

/* Impressão dedicada da lista de vendas (Cálculo AGR > Vendas lançadas, ver
   calculoAgrImprimirVendas em app.js) — some por padrão em qualquer
   impressão (mesmo princípio do bloco acima) e só aparece quando o botão
   "Imprimir lista" marca <body class="ca-imprimir-vendas">, escondendo a
   tabela de apuração AGR nesse instante pra não misturar as duas na folha. */
@media print{
  .ca-vendas-secao{display:none}
  body.ca-imprimir-vendas .ca-vendas-secao{display:block}
  body.ca-imprimir-vendas .print-tabela:not(.ca-vendas-tabela){display:none !important}
}

/* Relatório de impressão do Cálculo Parceiro (ver calculoParceiroImprimir
   em app.js) — os cards da tela já são .no-print (feitos pra interação,
   não pra imprimir); #cp-relatorio-impressao começa vazio e escondido,
   preenchido na hora de imprimir com todos os parceiros (ou só os
   selecionados, com aviso) e só aparece nesse instante. */
#cp-relatorio-impressao{display:none}
@media print{
  body.cp-imprimindo #cp-relatorio-impressao{display:block}
}

/* Impressão a partir de dentro de um modal (ex.: Cálculo AGR/Cálculo
   Parceiro > Detalhes > Imprimir) — o modal (#overlay, position:fixed) não
   tinha isolamento próprio de impressão, então "Imprimir" ali imprimia o
   #app inteiro por baixo dele também, produzindo algo parecido com uma
   captura de tela em vez de um relatório limpo. Isola só o conteúdo do
   modal quando ele está aberto — sem precisar de nenhuma classe nova no
   JS, cobre qualquer modal com botão de imprimir, atual ou futuro. */
@media print{
  body:has(#overlay:not(.hidden)) > *:not(#overlay){display:none !important}
  #overlay:not(.hidden){position:static;background:none;padding:0;display:block}
  #overlay:not(.hidden) .modal{max-width:none;max-height:none;box-shadow:none;background:#fff;color:#000;padding:0}
  #overlay:not(.hidden) .modal .no-print{display:none !important}
  #overlay:not(.hidden) .modal table{color:#000;border-color:#ccc}
  #overlay:not(.hidden) .modal .pill{border:1px solid #999;background:none !important;color:#000 !important}
}

/* ---------- Overlay de pré-visualização/edição de documento ----------
   Ver abrirPreviewEdicaoDocumento em app.js (Ajustes > Gerais > Documentos >
   Pré-visualizar). `.preview-doc-aberto` na <body> marca que o overlay está
   montado, pra imprimir só ele (mesmo princípio do bloco acima, mas via
   classe na body em vez do #app ser sempre o alvo — aqui o conteúdo fica
   fora de #app, direto como filho da body). */
.preview-busca-item{padding:10px;cursor:pointer;border-bottom:1px solid var(--line)}
.preview-busca-item:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.preview-doc-overlay{position:fixed;inset:0;z-index:500;background:var(--bg);overflow:auto}
.preview-doc-barra{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:10px 20px;background:var(--panel, #1c1c1e);border-bottom:1px solid var(--line);font-size:13px}
.preview-doc-papel{max-width:820px;margin:24px auto 80px}
.preview-doc-pagina{background:#fff;color:#1a1a1a;font-family:Georgia,'Times New Roman',serif;
  padding:56px 64px 80px;line-height:1.55;font-size:14px;white-space:pre-wrap;word-wrap:break-word;
  box-shadow:0 1px 6px rgba(0,0,0,.25);margin-bottom:24px;outline:none}
@media print{
  body.preview-doc-aberto > *:not(.preview-doc-overlay){display:none !important}
  .preview-doc-overlay{position:static;background:#fff;overflow:visible}
  .preview-doc-barra{display:none}
  .preview-doc-papel{margin:0;max-width:none}
  .preview-doc-pagina{box-shadow:none;margin:0;page-break-after:always}
  .preview-doc-pagina:last-child{page-break-after:auto}
}

/* Faixa fixa de aviso do modo "banco de teste" (ver renderAvisoBancoTeste
   em app.js) — cor de alerta bem diferente do resto da UI de propósito,
   pra ser impossível confundir com uso normal. */
#aviso-banco-teste{
  position:sticky;top:0;z-index:9999;width:100%;text-align:center;
  background:repeating-linear-gradient(45deg,#f5a623,#f5a623 12px,#111 12px,#111 24px);
  color:#111;font-weight:700;font-size:12.5px;letter-spacing:.02em;
  padding:6px 10px;text-shadow:0 1px 0 rgba(255,255,255,.35)
}

/* =======================================================================
   Identidade Royal — paleta oficial extraída das logomarcas
   #3D2817 marrom profundo | #D9B878 marrom-claro | #C85A3A terracota
   ======================================================================= */
:root{
  --royal-brown:#3D2817;
  --royal-brown-2:#5A3B24;
  --royal-light:#D9B878;
  --royal-coral:#C85A3A;
  --royal-cream:#FBF8F3;

  --color-bg:var(--royal-brown);
  --color-surface:#4A311F;
  --color-text:#FFF9EF;
  --color-accent:var(--royal-light);
  --color-accent-2:var(--royal-coral);
  --color-divider:rgba(217,184,120,.25);
  --color-neutral-100:#FFF9EF; --color-neutral-200:#F2DFC0; --color-neutral-300:#D9B878;
  --color-neutral-400:#C8A56F; --color-neutral-500:#B18D5B; --color-neutral-600:#8D6C46;
  --color-neutral-700:#6D4A2D; --color-neutral-800:#55371F; --color-neutral-900:#2B1B10;
  --color-accent-100:#FFF9EF; --color-accent-200:#F7EBD3; --color-accent-300:#EAD19C;
  --color-accent-400:#D9B878; --color-accent-500:#BD9654; --color-accent-600:#946F35;
  --color-accent-700:#725126; --color-accent-800:#533A1D; --color-accent-900:#382714;
  --success:#9FD2A8; --success-b:rgba(159,210,168,.18);
  --error:#F0A18A; --error-b:rgba(240,161,138,.18);
  --warning:var(--royal-light); --warning-b:rgba(217,184,120,.18);
  --info:var(--royal-light); --info-b:rgba(217,184,120,.18);
  --orange:var(--royal-coral); --orange-b:rgba(200,90,58,.2);
  --blue:#9CC8D8; --blue-b:rgba(156,200,216,.18);
  --font-heading:'Inter',system-ui,sans-serif;
  --shadow-sm:0 0 0 1px rgba(217,184,120,.22);
  --shadow-md:0 0 0 1px rgba(217,184,120,.28),0 6px 18px rgba(25,13,6,.35);
  --shadow-lg:0 0 0 1px rgba(217,184,120,.34),0 16px 40px rgba(25,13,6,.5);
}

html[data-theme="admin-logic"]{
  color-scheme:light;
  --color-bg:var(--royal-cream); --color-surface:#FFFFFF; --color-text:#2B2118;
  --color-accent:var(--royal-brown); --color-accent-2:var(--royal-coral);
  --color-divider:#E5D8C7; --accent-d:#6B4326;
  --color-neutral-100:#FFFDF9; --color-neutral-200:#F7EFE3; --color-neutral-300:#E8D6BC;
  --color-neutral-400:#CBB18D; --color-neutral-500:#9E8465; --color-neutral-600:#7B6044;
  --color-neutral-700:#61462E; --color-neutral-800:#EDE1D0; --color-neutral-900:#3D2817;
  --info:var(--royal-brown); --info-b:rgba(61,40,23,.1);
  --success:#2F7A46; --success-b:#E5F3E7; --error:#A53C2B; --error-b:#FBE8E4;
  --warning:#8A641A; --warning-b:#FAF0D5; --orange:var(--royal-coral); --orange-b:#FBE9E3;
  --blue:#2F6C81; --blue-b:#E3F1F5;
  --line2:#BCA990; --muted:#6C5A48;
  --shadow-sm:0 0 0 1px var(--color-divider);
  --shadow-md:0 0 0 1px var(--color-divider),0 4px 12px rgba(61,40,23,.08);
  --shadow-lg:0 0 0 1px var(--color-divider),0 8px 24px rgba(61,40,23,.12);
}

.brand-mark{border-color:var(--royal-light);background:var(--royal-brown);border-radius:8px}
.brand-mark img{display:block}
.btn.roxo,.btn.primary{border-color:var(--royal-coral);color:var(--royal-coral)}
.btn.roxo{background:var(--royal-coral);color:#fff}
.btn.roxo:hover{background:#A9472D;border-color:#A9472D}
.tab.on{border-bottom-color:var(--royal-coral)}

@media (min-width:861px){
  #app-container{display:flex;align-items:stretch}
  .app-content-col{flex:1;min-width:0}
  #nav-l1{display:none}
  .nav-sidebar{
    display:flex;flex-direction:column;gap:2px;flex:none;width:248px;
    height:100vh;position:sticky;top:0;overflow-y:auto;
    background:var(--royal-brown);border-right:0;padding:18px 12px;color:var(--royal-light);
  }
  .nav-sidebar::before{
    content:'';display:block;height:58px;margin:0 12px 20px;background:url('logo-oval-monocromatica.svg') center/contain no-repeat;
  }
  .nav-sidebar-secao{color:var(--royal-light);opacity:.82}
  .nav-sidebar-item{color:var(--royal-light)}
  .nav-sidebar-item i.ph{color:var(--royal-light);opacity:.9}
  .nav-sidebar-item:hover{background:rgba(217,184,120,.14)}
  .nav-sidebar-item.on{background:var(--royal-light);color:var(--royal-brown);font-weight:700}
  .nav-sidebar-item.on i.ph{color:var(--royal-brown)}

  html[data-theme="admin-logic"] .nav-sidebar{
    background:var(--royal-brown);border-right:0;padding:18px 12px;color:var(--royal-light);
  }
  html[data-theme="admin-logic"] .nav-sidebar::before{display:none}
  html[data-theme="admin-logic"] .nav-sidebar-secao{color:var(--royal-light);opacity:.82}
  html[data-theme="admin-logic"] .nav-sidebar-item{color:var(--royal-light)}
  html[data-theme="admin-logic"] .nav-sidebar-item i.ph{color:var(--royal-light);opacity:.9}
  html[data-theme="admin-logic"] .nav-sidebar-item:hover{background:rgba(217,184,120,.14)}
  html[data-theme="admin-logic"] .nav-sidebar-item.on{background:var(--royal-light);color:var(--royal-brown);font-weight:700}
  html[data-theme="admin-logic"] .nav-sidebar-item.on i.ph{color:var(--royal-brown)}
}

@media (min-width:861px){
  html[data-theme="admin-logic"] .nav-sidebar{
    background:var(--royal-brown);border-right:0;padding:18px 12px;color:var(--royal-light);
  }
  html[data-theme="admin-logic"] .nav-sidebar::before{
    content:'';display:block;height:58px;margin:0 12px 20px;background:url('logo-oval-monocromatica.svg') center/contain no-repeat;
  }
  html[data-theme="admin-logic"] .nav-sidebar-secao{color:var(--royal-light);opacity:.82}
  html[data-theme="admin-logic"] .nav-sidebar-item{color:var(--royal-light)}
  html[data-theme="admin-logic"] .nav-sidebar-item i.ph{color:var(--royal-light);opacity:.9}
  html[data-theme="admin-logic"] .nav-sidebar-item:hover{background:rgba(217,184,120,.14)}
  html[data-theme="admin-logic"] .nav-sidebar-item.on{background:var(--royal-light);color:var(--royal-brown);font-weight:700}
  html[data-theme="admin-logic"] .nav-sidebar-item.on i.ph{color:var(--royal-brown)}
}

.preview-doc-barra{background:var(--royal-brown);color:var(--royal-light)}
.preview-doc-pagina{border-top:6px solid var(--royal-brown)}

.prop-a4-logo{display:flex;align-items:center;gap:10px}
.prop-a4-logo img{width:150px;height:auto;display:block}
.prop-a4-logo span{font-size:16px !important;letter-spacing:1px !important}

/* PDV — sugestões legíveis em repouso, hover e seleção. */
.pdv-produto-sugestoes{
  background:#FFF9EF;
  border-color:#BCA990;
}
.pdv-produto-sugestao{
  color:#3D2817;
  border-bottom:1px solid #E5D8C7;
}
.pdv-produto-sugestao:hover,
.pdv-produto-sugestao.on{
  background:#D9B878;
  color:#3D2817;
}
.pdv-produto-sugestao:last-child{border-bottom:0}

/* Contraste do PDV no tema claro: os neutros 200/400/500 são claros por
   definição para textos sobre barras escuras, mas aqui ficam sobre a área
   clara do carrinho. Usa tons da identidade Royal com contraste AA. */
html[data-theme="admin-logic"] .pdv-corpo,
html[data-theme="admin-logic"] .pdv-grid-wrap{
  background:var(--royal-cream);
}
html[data-theme="admin-logic"] .pdv-esq{
  color:var(--royal-brown-2);
}
html[data-theme="admin-logic"] .pdv-esq i{
  opacity:.9;
}
html[data-theme="admin-logic"] .pdv-esq .pdv-esq-titulo{
  color:var(--accent-d);
}
html[data-theme="admin-logic"] .pdv-grid tbody td{
  color:var(--royal-brown);
  border-bottom-color:var(--line2);
}
html[data-theme="admin-logic"] .pdv-vazio{
  color:var(--royal-brown-2);
}
html[data-theme="admin-logic"] .pdv-busca-wrap input{
  background:var(--surface);
  border-color:var(--line2);
  color:var(--text);
}

/* Badges neutras aparecem sobre cartões brancos na tela de Parceiros. */
html[data-theme="admin-logic"] .pill.neutral{
  background:var(--color-neutral-300);
  color:var(--royal-brown);
  border:1px solid var(--color-neutral-400);
}

/* O valor e o rótulo do total precisam permanecer brancos sobre a faixa
   terracota, inclusive no tema claro e em telas de apuração. */
.pdv-total-box label,
.pdv-total-box .valor{
  color:#fff !important;
}

/* PDV — textos de ação sempre brancos para leitura imediata nas faixas
   escuras e nos botões de operação. */
.pdv-wrap .pdv-footer-btn,
.pdv-wrap .pdv-status-row .btn,
.pdv-wrap .pdv-topbar .btn{
  color:#fff;
}
.pdv-wrap .pdv-footer-btn:hover,
.pdv-wrap .pdv-status-row .btn:hover,
.pdv-wrap .pdv-topbar .btn:hover{
  color:#fff;
}

@media print{
  body, #app{background:#fff;color:#2B2118}
  .print-tabela th{background:#F3E8D7;color:#3D2817}
  .print-tabela td{color:#2B2118;border-color:#DCCBB4}
}
/* Configuração de logomarcas */
.logos-config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.logo-config-item{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.logo-config-item img{width:100%;height:92px;object-fit:contain;background:#3d2817;border-radius:8px;padding:10px}
.logo-config-item label{font-weight:700}
.pp-parcelas-grid{display:grid;gap:8px;max-width:680px}
.pp-parcela-row{display:grid;grid-template-columns:90px minmax(150px,1fr) minmax(130px,1fr);gap:8px;align-items:center}
.pp-parcela-row>span{font-size:13px;color:var(--muted)}
@media (max-width:760px){.logos-config-grid{grid-template-columns:1fr}}
@media (max-width:560px){.pp-parcela-row{grid-template-columns:1fr 1fr}.pp-parcela-row>span{grid-column:1/-1}}

/* Estados da Minha série: verde identifica vídeo assistido, não apenas
   uma atividade encerrada pelo técnico. */
#cliente-main .atividade-serie-card.concluida{border:1px solid var(--line);box-shadow:none}
#cliente-main .atividade-serie-card.concluida:hover{border-color:var(--accent)}
#cliente-main .atividade-serie-card.video-assistido{border:2px solid #22ff5c;box-shadow:0 0 0 1px rgba(34,255,92,.6),0 0 18px rgba(34,255,92,.42)}
#cliente-main .atividade-serie-card.video-assistido:hover{border-color:#22ff5c}
#cliente-main .atividade-concluida{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:calc(100% - 24px);white-space:normal;line-height:1.15}
#cliente-main .atividade-concluida-main{display:inline-flex;align-items:center;gap:6px}
#cliente-main .atividade-concluida-aviso{font-size:10px;font-weight:700;letter-spacing:.04em;color:#f5d7a0}
#cliente-main .serie-rating .serie-rating-status.aguardando{display:block;max-width:58ch;color:var(--muted);font-size:11px;line-height:1.35;font-weight:500}

/* Minha série: fluxo vertical de temporadas com cartões cinematográficos */
.serie-page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:10px 0 26px}.serie-page-heading h1{margin:4px 0 8px;font-size:clamp(28px,4vw,42px)}.serie-page-heading p{margin:0;color:var(--muted);max-width:58ch}.serie-kicker,.temporada-kicker{font-size:11px;letter-spacing:.14em;color:var(--accent-d);font-weight:700}.serie-total{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.serie-total strong{font-size:34px;color:var(--accent)}.serie-total span{font-size:12px;color:var(--muted)}
.serie-cronograma{padding:16px 18px;margin-bottom:26px;background:color-mix(in srgb,var(--surface) 88%,var(--accent));border:1px solid var(--line);border-radius:var(--radius-lg)}.serie-cronograma-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.serie-cronograma-title i{color:var(--accent);font-size:20px}.serie-cronograma-title small{margin-left:auto;color:var(--muted);font-weight:400;font-size:11px}.serie-cronograma .etapa-timeline{margin-top:16px}
.temporadas-stack{display:flex;flex-direction:column;gap:30px}.temporada-serie{position:relative}.temporada-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:10px}.temporada-header h2{margin:3px 0 2px;font-size:24px}.temporada-header p{margin:0;color:var(--muted);font-size:12px}.temporada-pct{font-size:20px;font-weight:600;color:var(--accent)}.temporada-progress{height:4px;background:color-mix(in srgb,var(--surface) 60%,var(--line));border-radius:99px;overflow:hidden;margin-bottom:15px}.temporada-progress span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .35s ease-out}.atividades-serie-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.atividade-serie-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .18s ease,border-color .18s ease}.atividade-serie-card:hover{transform:translateY(-2px);border-color:var(--accent)}.atividade-serie-card.concluida{border-color:color-mix(in srgb,var(--success) 45%,var(--line))}.atividade-media{height:168px;background:#090a12;position:relative;overflow:hidden}.atividade-media>img{width:100%;height:100%;object-fit:cover;display:block}.atividade-poster-fallback{width:100%;height:100%}.atividade-poster-fallback .serie-art{min-height:100%;padding:18px}.atividade-play{position:absolute;left:16px;bottom:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4)}.atividade-play.inativo{background:rgba(30,31,46,.82);color:var(--muted);cursor:not-allowed}.atividade-concluida{position:absolute;right:12px;top:12px;padding:5px 8px;border-radius:999px;background:rgba(10,26,20,.86);color:var(--success);font-size:10px;font-weight:700;letter-spacing:.04em}.atividade-serie-body{padding:14px 16px 16px}.atividade-serie-body h3{font-size:18px;margin:0 0 4px}.atividade-resumo{font-size:13px;color:var(--accent-d);margin:0 0 8px}.atividade-sinopse{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;min-height:56px}.mais-link{border:0;background:none;color:var(--accent);padding:0;font:inherit;cursor:pointer}.atividade-actions{display:flex;align-items:center;gap:8px;margin-top:14px}.manual-link{display:inline-flex;text-decoration:none}.manual-placeholder{font-size:11px;color:var(--muted);flex:1}.atividade-watch{margin-left:auto}.atividade-watch:disabled{opacity:.55;cursor:not-allowed}.atividade-episodios{display:flex;gap:7px;margin-top:12px;overflow:auto}.atividade-episodios button{width:64px;height:38px;padding:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#000;cursor:pointer}.atividade-episodios img{width:100%;height:100%;object-fit:cover}.serie-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.serie-rating-label{font-size:11px;color:var(--muted);margin-right:2px}.serie-stars{display:flex;gap:2px}.serie-star{border:0;background:none;color:var(--color-neutral-600);font-size:17px;padding:1px;cursor:pointer;line-height:1}.serie-star.on{color:#e8c468}.serie-star:not(:disabled):hover{color:#f2d486}.serie-star:disabled{cursor:default}.serie-rating-status{font-size:10px;color:var(--success);margin-left:auto}.temporada-confirmacao{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--accent) 60%,var(--line));border-radius:var(--radius);font-size:12px;color:var(--muted)}.temporada-confirmacao i{color:var(--accent);margin-right:4px}.serie-inline-player{position:absolute;inset:0;background:#000}.serie-inline-player iframe{width:100%;height:100%;border:0}.serie-inline-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;cursor:pointer}
@media(max-width:680px){.serie-page-heading{align-items:flex-start}.serie-total{align-items:flex-end}.serie-total strong{font-size:28px}.serie-page-heading h1{font-size:28px}.serie-cronograma-title{align-items:flex-start;flex-wrap:wrap}.serie-cronograma-title small{width:100%;margin-left:28px}.atividades-serie-lista{grid-template-columns:1fr}.atividade-media{height:188px}.temporada-confirmacao{align-items:flex-start;flex-direction:column}.temporada-confirmacao .btn{width:100%}}