:root{
  /* Cores da marca Papoi (16/09, 9ª rodada) — extraídas do degradê da
     logo: roxo/pink -> azul -> ciano -> laranja. --primary é o tom usado
     em botões/estados normais (âncora do degradê); --brand-gradient é o
     degradê completo, usado em botões primários e no item ativo da barra
     lateral, pra realmente "trazer a marca" sem exagerar num degradê em
     cada cantinho da tela. */
  --primary:#6D63E0;
  --primary-dark:#5148C4;
  --brand-pink:#8C6FE0;
  --brand-blue:#6C7EF2;
  --brand-cyan:#6FA9FE;
  --brand-orange:#FB9B18;
  --brand-orange-dark:#FB5A2E;
  --brand-gradient:linear-gradient(100deg,var(--brand-pink) 0%,var(--brand-blue) 30%,var(--brand-cyan) 55%,var(--brand-orange) 85%,var(--brand-orange-dark) 100%);
  --bg:#f5f7f6;
  --card:#ffffff;
  --border:#e2e6e4;
  --text:#1c2521;
  --muted:#6b7670;
  --danger:#c0392b;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}
/* Pedido da Raquel: Arial bold em títulos e botões, Arial normal no
   resto do texto. Formulários já herdavam font-family; os outros
   controles (button/select/textarea) não herdam por padrão em todo
   navegador, então força aqui. */
button,input,select,textarea{font-family:inherit;}
h1,h2,h3,h4,h5,h6{font-weight:700;}
button{font-weight:700;}
.screen{min-height:100vh;}
.center{display:flex;align-items:center;justify-content:center;padding:24px;}
.muted{color:var(--muted);}
.auth-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px;
  width:100%;
  max-width:360px;
}
.auth-card h1{font-size:20px;margin:0 0 4px;}
.auth-card label{display:block;font-size:13px;margin:14px 0 4px;color:var(--muted);}
.auth-card input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:14px;}
.btn-primary{
  margin-top:18px;width:100%;padding:10px;border:none;border-radius:8px;
  background:var(--brand-gradient);color:#fff;font-size:14px;cursor:pointer;
}
.btn-primary:hover{filter:brightness(0.93);}
.btn-secondary{
  padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;
}
.btn-secondary.danger{color:var(--danger);border-color:var(--danger);}
/* Alterna Painel/Histórico desta rede no Gerenciamento de Mídias nativo (26ª rodada). */
.btn-secondary.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;}
.error{color:var(--danger);font-size:13px;margin-top:10px;}

/* Tela de login (16/09, 9ª rodada — mockup enviado pela Raquel): painel
   dividido em 2, degradê colorido à esquerda com a logo em branco, form
   à direita sobre um fundo claro com uma curva grande separando os dois
   lados. Gradiente aproximado por amostragem de cor do mockup (vermelho
   no canto superior esquerdo, azul/roxo no topo, magenta no meio, ciano
   embaixo à esquerda, laranja embaixo à direita) — não é um gradiente
   CSS padrão de 2 pontos, por isso várias camadas de radial-gradient. */
/* 13ª rodada: em vez de aproximar o degradê do mockup com CSS gradients
   (ficava mais "lavado"/menos fiel), usamos a foto real do degradê
   recortada do mockup em alta resolução (public/img/login-bg.jpg) como
   plano de fundo do painel esquerdo — bate exatamente com o enviado pela
   Raquel. O painel esquerdo agora cobre a tela inteira (position:absolute)
   por baixo do painel direito, que fica por cima com sua curva grande
   (border-bottom-left-radius) — assim a curva realmente revela o degradê
   colorido por baixo, em vez de revelar só um fundo neutro. */
.login-screen{position:relative;min-height:100vh;overflow:hidden;}
.login-left{
  position:absolute;inset:0;z-index:0;
  background-image:url(/img/login-bg.jpg);
  background-size:cover;
  background-position:left center;
}
.login-left-logo{
  position:absolute;left:7%;top:50%;transform:translateY(-50%);
  width:min(280px,32vw);height:auto;display:block;z-index:1;
}
.login-right{
  position:relative;z-index:1;
  margin-left:48%;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:#f4f4f3;
  border-bottom-left-radius:68% 62%;
}
.login-form{width:100%;max-width:380px;}
.login-form h1{font-size:26px;margin:0 0 26px;}
.login-form label{display:block;font-size:13px;font-weight:700;margin:0 0 6px;}
.login-form input{width:100%;padding:12px 14px;border:none;border-radius:8px;background:#e3e3e2;font-size:14px;}
.login-form .error{margin-bottom:2px;}
.login-form .login-submit{
  margin-top:26px;padding:13px;border-radius:8px;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  background:linear-gradient(90deg,#7EC8FE 0%,#E0568A 28%,#FF5B4E 45%,#6C6FEC 68%,#FB8A1D 100%);
}
.login-field-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:18px;margin-bottom:6px;}
.login-field-row label{margin:0;}
.login-forgot-link{background:none;border:none;padding:0;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:none;}
.login-forgot-link:hover{text-decoration:underline;}
/* Assinatura discreta pedida pela Raquel — pequena e no rodapé da tela de
   login inteira (não some, fica sobre os dois painéis). */
.login-footer{
  position:absolute;left:20px;bottom:14px;z-index:2;
  text-align:left;font-size:11px;color:rgba(255,255,255,.85);letter-spacing:.2px;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  pointer-events:none;
}
@media (max-width:820px){
  .login-screen{display:flex;flex-direction:column;min-height:100vh;}
  .login-left{
    position:static;flex:0 0 220px;
    display:flex;align-items:center;justify-content:center;
    background-position:center;
  }
  .login-left-logo{position:static;left:auto;top:auto;transform:none;width:min(220px,60vw);}
  .login-right{
    position:static;margin-left:0;min-height:auto;flex:1;
    align-items:flex-start;border-bottom-left-radius:0;border-radius:0;padding:32px 24px 56px;
  }
}

.app-shell{display:flex;min-height:100vh;align-items:stretch;}

/* Modo publico do link externo por dashboard (28a rodada, Midias/Trafego) --
   esconde a barra lateral inteira da Papoi; o .content ja tem flex:1, entao
   ocupa a largura toda sozinho sem precisar de mais nada aqui. */
.app-shell.public-hub-mode .sidebar{display:none;}

.sidebar{
  width:250px;flex:0 0 250px;
  background:#1c1830;color:#fff;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-brand{padding:20px 18px;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;}
.sidebar-brand-logo{width:128px;height:auto;display:block;}
.sidebar-brand-sub{font-weight:400;font-size:12px;color:rgba(255,255,255,.65);}
.sidebar-nav{display:flex;flex-direction:column;padding:10px;gap:2px;flex:1;}
/* 48ª rodada, pedido da Raquel: padronizar o menu -- primeira tentativa
   foi um `text-transform:uppercase` aqui (deixava TUDO maiúsculo), mas
   ela achou ruim ("ficou ruim") e pediu só a primeira letra maiúscula,
   como já era em Início/Chat/Demandas etc. Revertido: o padrão volta a
   ser 100% o texto de cada botão no HTML (sem transformação de CSS) --
   por isso o botão "PONTO" (47ª rodada) também foi corrigido pra "Ponto"
   direto no texto, em vez de continuar digitado todo em maiúsculo. */
.navlink{
  background:none;border:none;padding:10px 12px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:rgba(255,255,255,.82);text-align:left;line-height:1.3;
}
.navlink:hover{background:rgba(255,255,255,.08);color:#fff;}
.navlink.active{background:var(--brand-gradient);color:#fff;}
/* "Budget" da barra lateral virou 1 botão com submenu por marca (25ª
   rodada) — antes eram 2 botões soltos ("Budget De Bacco"/"Budget
   GhelPlus"), o que confundia sobre qual marca cada um abria. */
.navlink-group{display:flex;flex-direction:column;}
.navlink-submenu{display:flex;flex-direction:column;gap:2px;padding-left:14px;margin-top:2px;}
.navlink-sub{font-size:12.5px;padding:8px 12px;}
.sidebar-footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar-user{display:flex;flex-direction:column;gap:6px;font-size:13px;}
.sidebar-user-name{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-user-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sidebar-footer .btn-link{color:rgba(255,255,255,.65);padding:0;}
.sidebar-signature{margin-top:10px;font-size:10.5px;color:rgba(255,255,255,.4);letter-spacing:.2px;}

.content{padding:24px 32px;flex:1;min-width:0;width:100%;}
.view h2{margin-top:0;}
.view-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.view-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px;}
.dash-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;gap:8px;
}
.dash-card h3{margin:0;}
.dash-card p{margin:0;color:var(--muted);font-size:13px;flex:1;}
.dash-card .tag{font-size:11px;color:var(--primary-dark);background:#EFEBFC;padding:2px 8px;border-radius:999px;width:fit-content;}
.dash-card button{
  margin-top:8px;padding:8px 12px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;font-size:13px;
}

.toolbar{display:flex;gap:8px;align-items:center;margin:16px 0;flex-wrap:wrap;}
.toolbar select{padding:8px;border:1px solid var(--border);border-radius:8px;}

.summary-cards{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.summary-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 20px;min-width:160px;}
.summary-label{display:block;font-size:12px;color:var(--muted);}
.summary-value{display:block;font-size:20px;font-weight:700;margin-top:4px;}

.form-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;max-width:520px;}
.form-card h3{margin-top:0;}
.form-card label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px;}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;}
.form-card textarea{resize:vertical;line-height:1.45;}
.carousel-card-field{margin-bottom:10px;}
.carousel-card-field label{font-weight:600;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-actions{display:flex;gap:8px;margin-top:16px;}

/* Comparação lado a lado -- Análise de Concorrência (39ª rodada), pedido
   da Raquel: produto do concorrente x nosso produto equivalente, um do
   lado do outro, tanto no formulário quanto na listagem. */
.form-card-wide{max-width:960px;}
.compare-row{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin-top:6px;align-items:start;}
.compare-col h4{margin:0 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;}
.compare-vs{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--muted);padding-top:34px;}
.compare-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;}
.compare-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.compare-card-head h4{margin:0;font-size:15px;}
.compare-card-meta{font-size:12px;color:var(--muted,#888);margin-top:2px;}

/* Feiras (41ª rodada) */
.feira-item-months{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.feira-item-months div{display:flex;flex-direction:column;}
.feira-item-months label{font-size:11px;color:var(--muted);margin:0 0 2px;}
.feira-item-months input{width:100%;padding:6px;border:1px solid var(--border);border-radius:6px;font-size:13px;}
.feira-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:16px;}
.feira-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.feira-card-head h3{margin:0;font-size:16px;}
.feira-card-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.feira-card-total{font-size:14px;font-weight:600;}
.feira-items-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px;}
.feira-items-table th,.feira-items-table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;}
.feira-item-import-tag{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:1px 6px;margin-left:6px;}
@media (max-width:700px){.feira-item-months{grid-template-columns:repeat(3,1fr);}}
.compare-card-body{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;}
.compare-field{font-size:13px;margin-bottom:8px;}
.compare-field b{display:block;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
.compare-field a{word-break:break-all;}
/* 42ª rodada: cartão de análise com N concorrentes (em vez de 1 fixo) --
   mesmo visual do compare-card-body, mas em flex-wrap pra caber quantas
   colunas de concorrente a análise tiver, antes da coluna fixa "Nossa
   marca". */
.compare-card-body-multi{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.compare-card-body-multi>.compare-col{flex:1 1 200px;min-width:190px;}
.compare-card-body-multi>.compare-vs{padding-top:24px;flex:0 0 auto;}
/* Linha de concorrente dentro do formulário (1 ou mais, botão "Remover"
   quando há mais de uma). */
.concorrente-form-row{border:1px solid var(--border);border-radius:10px;padding:10px 12px 12px;margin:8px 0;position:relative;}
.concorrente-form-row .btn-link.danger{position:absolute;top:8px;right:10px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px;}
.checkbox-row input{width:auto;}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.perm-row span{font-size:13px;}
.perm-row select{width:auto;}

.data-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.data-table th,.data-table td{padding:10px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--border);}
.data-table th{background:var(--bg);color:var(--muted);font-weight:600;}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.data-table button{background:none;border:none;color:var(--primary-dark);cursor:pointer;font-size:12px;margin-right:8px;}
.data-table button.danger{color:var(--danger);}
/* Tabela com muitas colunas não cabe numa tela estreita — rola só ali
   (wrapper .table-scroll criado via JS, ver app.js), sem quebrar o resto
   da tela nem depender do scroll horizontal da página inteira. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;}
.table-scroll .data-table{border-radius:12px;}

/* ---------- Início ---------- */
/* 33ª/34ª rodada, pedido da Raquel: "a página inicial está muito
   amontoada, deixe os resumos um pouco mais separado do gráfico e
   recados" -- aumentado de novo na 34ª rodada ("separe mais um pouco o
   gráfico dos resumos"), margin-top só entre o .home-top-row (REIS +
   Recados) e essa grade de resumos. */
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:68px;}
/* Cards mais "delicados" (18ª rodada: "esta feio visualmente tudo separado
   em quadrados") — sombra suave em vez de borda dura, cantos mais
   arredondados, sem a grade de caixinhas de número que existia antes. */
/* 29ª rodada, pedido da Raquel: "estão dentro de quadros, deixe sem esse
   quadro para ficar mais delicado" -- tira fundo/borda/sombra da caixa,
   fica só espaçamento + uma linha fina embaixo pra separar visualmente. */
.home-card{padding:0 0 18px;border-bottom:1px solid var(--border);}
.home-card h3{margin:0 0 14px;}
.home-card-muted{border-bottom-style:dashed;}
.home-grid{align-items:start;}
.home-budget-brand{margin-bottom:16px;}
.home-budget-brand:last-child{margin-bottom:0;}
.home-budget-brand h4{margin:0 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.home-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.home-card button.btn-secondary{margin-top:12px;}
/* 35ª rodada, pedido da Raquel: "esses botões escrito Ver, estão mto feio,
   deixe eles sem o quadro em volta, somente a palavra e a flexinha" --
   troca o botão com fundo/borda (herdado de 32ª rodada, que só tinha
   deixado o fundo translúcido) por um link de texto puro, sem nenhum
   quadro em volta. Continua um <button> no HTML (só estilo muda), pra não
   mexer em nenhum onclick já existente. */
#view-home .btn-secondary{
  background:none;border:none;padding:0;border-radius:0;backdrop-filter:none;
  color:var(--primary);font-weight:600;cursor:pointer;
}
#view-home .btn-secondary:hover{background:none;text-decoration:underline;}

/* REIS DO MARKETING (28ª rodada) -- ranking de quem mais concluiu demandas
   no mês, com a foto de cada um "subindo" junto com a barra (a barra e a
   foto ficam no mesmo bloco flex, alinhados pela base -- crescer a barra
   empurra a foto pra cima) e uma coroa no 1º lugar. */
.reis-marketing-card{padding:0;}
/* 32ª rodada, pedido da Raquel: REIS DO MARKETING e Recados lado a lado,
   acima dos resumos -- mesma ideia visual "sem quadro" de sempre, só lado
   a lado numa grade de 2 colunas (o gráfico um pouco mais largo que a
   coluna de Recados). Em telas estreitas empilha (ver media query).
   margin-top aumentado na 34ª rodada ("desça um pouco mais o gráfico e os
   recados e o que está embaixo deles") -- como esse bloco vem antes de
   .home-grid no HTML, empurrar ele pra baixo empurra tudo que vem depois
   junto. */
.home-top-row{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start;margin-top:40px;}
@media (max-width:900px){ .home-top-row{grid-template-columns:1fr;} }
.reis-marketing-chart{display:flex;align-items:flex-end;gap:22px;overflow-x:auto;padding:12px 4px 4px;min-height:190px;}
.reis-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 0 auto;width:76px;height:190px;}
.reis-bar-photo{position:relative;width:52px;height:52px;border-radius:50%;background:var(--primary) center/cover no-repeat;border:3px solid #fff;box-shadow:0 2px 6px rgba(20,10,40,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex:0 0 auto;}
.reis-bar-photo-fallback{background-image:none !important;}
.reis-crown{position:absolute;top:-20px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}

/* 40ª rodada, pedido da Raquel: "no grafico reis do marketing, a cada 10
   minutos, o bonequinho que tem a coroa, deve balançar." -- aplicada em
   .reis-bar-photo (a fotinho/bonequinho), não em .reis-crown sozinha, pra
   balançar o conjunto foto+coroa junto.
   42ª rodada, pedido da Raquel: "em vez de se mexer a cada 10 min, quem
   esta cm a coroa deve balançar quando alguem passar o mouse por cima" --
   trocou o timer de 10min (JS, removido) por isso aqui: só quem tem a
   coroa ganha a classe .reis-bar-photo-champ (ver renderReisDoMarketing em
   app.js), e o balanço dispara sozinho no :hover dela, sem JS nenhum. */
@keyframes reisWiggle{
  0%,100%{transform:rotate(0deg);}
  15%{transform:rotate(-12deg);}
  30%{transform:rotate(10deg);}
  45%{transform:rotate(-8deg);}
  60%{transform:rotate(6deg);}
  75%{transform:rotate(-4deg);}
  90%{transform:rotate(2deg);}
}
.reis-bar-photo-champ:hover{animation:reisWiggle .9s ease-in-out;cursor:pointer;}
.reis-bar-value{font-size:12.5px;font-weight:700;color:var(--ink);margin:6px 0 4px;}
.reis-bar{width:38px;border-radius:8px 8px 3px 3px;background:var(--primary);transition:height .4s ease;}
/* Resumo da Início em lista + barrinhas, no lugar dos quadrados de número
   (18ª rodada) — mais visual sem virar um gráfico pesado/externo. */
.stat-list{display:flex;flex-direction:column;gap:12px;margin-bottom:4px;}
.stat-bar-row-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:5px;}
.stat-bar-label{display:flex;align-items:center;gap:7px;color:var(--muted);}
.stat-bar-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.stat-bar-value{font-weight:700;color:var(--text,#222);}
.stat-bar-track{background:var(--bg);border-radius:999px;height:7px;overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:999px;transition:width .4s ease;}
.budget-diff{font-size:12.5px;font-weight:700;margin:2px 0 0;}
.budget-diff-over{color:var(--danger);}
.budget-diff-under{color:#2ea043;}

/* Brindes com estoque baixo — card da Início (20ª rodada, no lugar dos
   resumos de Tráfego Pago/Mídias Sociais que a Raquel pediu pra tirar). */
.lowstock-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.lowstock-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border);}
.lowstock-row:last-child{border-bottom:none;}
.lowstock-name{color:var(--text,#222);}
.lowstock-qty{color:var(--danger);font-weight:700;white-space:nowrap;}

/* ---------- abas (tabs) ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:16px 0;flex-wrap:wrap;}
.tab-btn{background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab-btn.active{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:600;}
.row-over{background:#fdf1ef;}
/* Gasto que aconteceu no realizado mas não existia no planejado (25ª
   rodada) — amarelo, pra diferenciar de "estourou o planejado" (vermelho,
   .row-over acima). */
.row-unplanned{background:#fff8e1;}
.text-danger{color:var(--danger);font-weight:700;}

/* ---------- filtros de busca do Budget (25ª rodada) ---------- */
.budget-filter-bar select,.budget-filter-bar input{padding:8px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;}
.budget-filter-bar input{min-width:150px;}
.budget-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:-4px 0 12px;}
.budget-legend span{display:inline-flex;align-items:center;gap:6px;}
.budget-legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;}
.budget-legend-dot-over{background:#fdf1ef;border:1px solid var(--danger);}
.budget-legend-dot-unplanned{background:#fff8e1;border:1px solid #d9a400;}

/* ---------- gráfico Planejado x Realizado do Budget (25ª rodada) ---------- */
.budget-chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:16px 0;}
.budget-chart-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.budget-chart-title{font-size:13.5px;font-weight:700;color:var(--text);}
.budget-chart-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);}
.budget-chart-legend-item{display:inline-flex;align-items:center;gap:6px;}
.budget-chart-dot{width:9px;height:9px;border-radius:2px;display:inline-block;}
.budget-chart-svg{width:100%;height:auto;display:block;}
.budget-chart-empty{margin:0;}

/* ---------- Kanban (Demandas) — uma lista por pessoa da equipe ---------- */
.kanban{display:flex;gap:14px;margin-top:16px;overflow-x:auto;padding-bottom:8px;align-items:flex-start;}
.kanban-col{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px;min-height:120px;width:250px;flex:0 0 250px;transition:opacity .15s,outline .1s;}
.kanban-col-header{font-size:13px;font-weight:700;color:var(--muted);padding:4px 6px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px;}
.kanban-col-header-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.kanban-count{background:var(--card);border-radius:999px;padding:0 8px;font-weight:600;flex:0 0 auto;}
/* Arrastar pra reordenar as listas (17ª rodada) — cada pessoa organiza do
   seu jeito; só a área da alça mostra a "mãozinha" de arrastar, pra não
   confundir com clique no botão de cor. */
.kanban-col-drag-handle{cursor:grab;color:var(--muted);opacity:.5;font-size:13px;flex:0 0 auto;user-select:none;line-height:1;}
.kanban-col-drag-handle:active{cursor:grabbing;}
.kanban-col.dragging{opacity:.4;}
.kanban-col.drag-over{outline:2px dashed var(--primary);outline-offset:2px;}
/* 36ª rodada, pedido da Raquel: cada lista mostra só uns 5 cards por
   vez, com barra de rolagem interna pra ver os demais -- evita listas
   gigantes empurrando o quadro inteiro pra baixo. Altura calculada pra
   caber ~5 cards de tamanho médio (o número varia um pouco conforme o
   conteúdo de cada card, é só uma referência). */
.kanban-list{display:flex;flex-direction:column;gap:8px;max-height:540px;overflow-y:auto;padding-right:2px;}
.kanban-list::-webkit-scrollbar{width:6px;}
.kanban-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}
.kanban-list::-webkit-scrollbar-track{background:transparent;}
.kanban-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;}
.kanban-card:hover{box-shadow:0 1px 4px rgba(0,0,0,.12);}
.kanban-card.overdue{border-color:var(--danger);}
.kanban-card.is-done{opacity:.68;}
.kanban-card-labels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.kanban-label-chip{height:8px;width:34px;border-radius:4px;}
.kanban-card-title-row{display:flex;align-items:flex-start;gap:7px;margin-bottom:6px;}
.kanban-card-title{font-size:13.5px;font-weight:600;flex:1;min-width:0;}
.kanban-card.is-done .kanban-card-title{text-decoration:line-through;color:var(--muted);}
.kanban-card:hover .kanban-card-title{color:var(--primary-dark);}
/* Marcar como concluída direto pelo card, sem abrir o modal (17ª rodada). */
.kanban-check-btn{flex:0 0 auto;width:17px;height:17px;margin-top:1px;border-radius:50%;border:2px solid var(--border);background:transparent;cursor:pointer;padding:0;position:relative;}
.kanban-check-btn:hover{border-color:var(--primary);}
.kanban-check-btn.checked{background:#2ea043;border-color:#2ea043;}
.kanban-check-btn.checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#fff;}
.kanban-card-meta{display:flex;flex-wrap:wrap;gap:4px;}
.kanban-card-creator{font-size:10.5px;color:var(--muted);margin-top:6px;}
/* 36ª rodada: nome da rede + ícone, pequeno e discreto (não é um
   badge/quadro como os outros -- só uma linha de texto fina). */
.kanban-card-network{font-size:10.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:4px;}
.kanban-card-network svg{flex:none;}
/* Ícone da marca (37ª rodada) -- pequeno, colado no início do título. */
.card-brand-icon{display:inline-flex;vertical-align:-3px;margin-right:5px;}
.card-brand-icon svg{display:block;}
/* 36ª rodada: fotinhos de quem mais está no card, vindo do mesmo agendamento. */
.kanban-card-also-involved{margin-top:6px;}
.badge{background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--muted);}
.badge-danger{background:#fdecea;border-color:#f3c6c0;color:var(--danger);}
/* Selo "Sim" verde (43ª rodada, Campanha Cooperada: aprovado/cobrança
   enviada/finalizado) — mesmo tratamento visual do badge-danger, só que
   pro caso positivo. */
.badge-success{background:#e9f7ee;border-color:#bfe3cc;color:#1e7d3c;}
/* Selo de "recorrente" discreto (17ª rodada: "o recorrente deve ser mais
   delicado, está feio") — trocado do emoji grande antes do título por um
   badge pequeno e neutro, junto dos outros badges do card. */
.badge-muted{background:transparent;border-style:dashed;opacity:.7;font-size:10.5px;}
.kanban-empty{color:var(--muted);font-size:12px;padding:6px;}
@media (max-width:900px){ .kanban-col{width:220px;flex-basis:220px;} }

/* ---------- seletor de chips (responsáveis / etiquetas no card) ---------- */
.chip-picker{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;}
.chip-toggle{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:12.5px;cursor:pointer;color:var(--text);user-select:none;}
.chip-toggle input{margin:0;width:auto;}
.chip-toggle.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.chip-toggle.label-chip{border:none;color:#fff;font-weight:600;opacity:.55;}
.chip-toggle.label-chip.active{opacity:1;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;}
/* Responsável geral (30ª rodada) -- estrelinha dentro do chip de marcado
   na demanda; só aparece pra quem já está marcado (chip ativo). */
.chip-responsible-btn{border:none;background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 2px;}
.chip-responsible-btn:hover{opacity:1;}
.chip-responsible-btn.active{opacity:1;color:#F5A623;}
.chip-toggle.active .chip-responsible-btn{color:#fff;}
.chip-toggle.active .chip-responsible-btn.active{color:#FFD97A;}
.chip-empty{font-size:12px;color:var(--muted);}

/* ---------- checklist com barra de progresso ---------- */
.checklist-progress{height:6px;background:var(--border);border-radius:4px;overflow:hidden;margin:2px 0 8px;}
.checklist-progress-bar{height:100%;background:var(--primary);border-radius:4px;}

/* ---------- Recados (mural da tela Início) ---------- */
#recadosWrap{margin-bottom:20px;}
.recado-list{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.recado-card{
  background:var(--card);border:1px solid var(--border);border-left:6px solid var(--primary);
  border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.recado-card-text{font-size:13.5px;flex:1;min-width:200px;}
.recado-card-meta{font-size:11.5px;color:var(--muted);display:block;margin-top:2px;}
.recado-empty{color:var(--muted);font-size:13px;}
/* Ações em lote nos recados (53ª rodada) — "Selecionar todos" + marcar/
   excluir os selecionados de uma vez, mesma barra acima da lista. */
.recado-bulk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 0;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:13px;}
.recado-bulk-selectall{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;}
.recado-card-checkbox{margin-right:2px;}
/* Clicar no recado leva até o local (51ª rodada) — só os recados
   automáticos que carregam uma referência de origem ganham esse cursor. */
.recado-card-clickable{cursor:pointer;}
.recado-card-clickable:hover{border-color:var(--primary);}
/* Recado automático de post aprovado (44ª rodada) — título do post com os
   ícones de marca/rede acima do texto fixo do aviso. */
.recado-card-post{margin-bottom:2px;}
.recado-card-post-icons{display:inline-flex;align-items:center;gap:3px;margin-right:2px;}

/* ---------- gerenciar etiquetas ---------- */
.modal-small{max-width:420px;}
.label-manage-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.label-manage-row{display:flex;align-items:center;gap:8px;}
.label-color-dot{width:20px;height:20px;border-radius:6px;flex:0 0 auto;border:1px solid rgba(0,0,0,.1);}
.label-manage-row input[type="text"]{flex:1;padding:6px 8px;font-size:13px;}
.label-new-row{display:flex;gap:8px;margin-top:4px;}
.label-new-row input{flex:1;}
.color-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.color-swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;}
.color-swatch.selected{border-color:var(--text);}
.color-swatch-none{background:#fff;border:2px solid var(--border);position:relative;}
.color-swatch-none::after{content:'';position:absolute;inset:0;border-radius:4px;background:linear-gradient(to top right,transparent 46%,var(--danger) 48%,var(--danger) 52%,transparent 54%);}
.color-swatch-none.selected{border-color:var(--text);}

/* Botão redondo de "trocar cor" (13ª rodada) — usado na lista de cada
   pessoa em Demandas e na tela Início — e o popover flutuante da paleta. */
.color-dot-btn{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;flex:0 0 auto;background:#fff;}
.color-dot-btn.has-color{border-color:rgba(0,0,0,.18);}
.color-popover{position:fixed;z-index:200;background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.2);padding:10px;width:170px;}
.color-popover .color-swatches{margin-top:0;}
.home-header-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.home-greeting{
  margin:0;font-family:Arial,Helvetica,sans-serif;font-weight:700;
  font-size:24px;color:var(--text);line-height:1.3;
}

/* ---------- modal (card de Demanda) ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(20,25,22,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal{background:#fff;border-radius:14px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-title-input{flex:1;border:none;font-size:17px;font-weight:700;padding:6px;border-radius:6px;}
.modal-title-input:focus{outline:1px solid var(--border);}
.modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:4px;}
.modal-body label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;}
.modal-body input,.modal-body select,.modal-body textarea{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;}
.modal-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.modal-row-2{grid-template-columns:1fr 1fr;}
.modal-footer{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--border);}
.modal-footer .btn-primary{margin-top:0;width:auto;flex:1;}
.modal-footer .btn-secondary{margin-top:0;}
.checklist-title-row{margin-top:14px;}
.checklist-title-input{font-weight:700;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;width:100%;font-size:14px;font-family:inherit;}
.checklist-title-input:hover,.checklist-title-input:focus{border-color:var(--border);background:var(--bg);}
.checklist{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.checklist-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;background:var(--bg);border-radius:8px;padding:6px 10px;}
.checklist-item label{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.checklist-item label span{overflow:hidden;text-overflow:ellipsis;}
.checklist-assignee-select{font-size:12px;border:1px solid var(--border);border-radius:6px;padding:3px 6px;background:var(--card);color:var(--text);font-family:inherit;max-width:130px;}
/* Data de entrega individual do item (31ª rodada) — mesmo tamanho visual do
   select de responsável, ao lado dele na linha do item. */
.checklist-due-input{font-size:12px;border:1px solid var(--border);border-radius:6px;padding:3px 6px;background:var(--card);color:var(--text);font-family:inherit;max-width:130px;}
/* Edição inline do texto do item (31ª rodada) — substitui o <span> na hora,
   mesmo tamanho de fonte do texto normal do item pra não pular o layout. */
.checklist-edit-input{flex:1;min-width:0;font-size:13.5px;font-family:inherit;border:1px solid var(--primary);border-radius:6px;padding:2px 6px;background:var(--card);color:var(--text);}
.checklist-add{display:flex;gap:8px;margin-top:8px;}
.checklist-add .checklist-assignee-select{max-width:150px;}
.file-list{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.file-item{display:flex;align-items:center;justify-content:space-between;font-size:13px;background:var(--bg);border-radius:8px;padding:6px 10px;}
@media (max-width:640px){ .modal-row{grid-template-columns:1fr;} }

/* Corrige telas que nao escondiam por causa do .center sobrescrever [hidden] */
[hidden]{display:none!important;}

/* Dashboards embutidos (Tráfego Pago/Mídias/Ações Sazonais) — sem caixa
   com borda separada, pra parecerem página normal da plataforma, não um
   quadro à parte. Navegação é só pela barra lateral, como em qualquer
   outra tela (por isso não tem botão de "Voltar" aqui). */
/* 28a rodada: a altura fixa + overflow:hidden fazia o conteudo embutido
   ganhar um scroll interno proprio (denunciava que era um iframe). Agora
   o iframe avisa a propria altura (postMessage, ver receiveEmbedHeight
   embaixo) e cresce pra caber tudo -- quem rola a pagina e so o scroll
   normal da Papoi, como o resto do conteudo. min-height so evita o salto
   feio enquanto a 1a altura ainda nao chegou. */
.iframe-wrap{overflow:visible;min-height:70vh;}
.iframe-wrap iframe{width:100%;min-height:70vh;border:0;display:block;}

/* ---------- Cronograma de Marketing — Calendário ---------- */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.cal-toolbar h3{margin:0;font-size:16px;text-transform:capitalize;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;}
.cal-weekday{font-size:11px;color:var(--muted);text-align:center;font-weight:700;padding:4px 0;}
.cal-day{background:var(--card);border:1px solid var(--border);border-radius:8px;min-height:96px;padding:6px;display:flex;flex-direction:column;gap:4px;}
.cal-day.other-month{opacity:.4;}
.cal-day.today{border-color:var(--primary);border-width:2px;}
/* 36ª rodada, pedido da Raquel: dia que já passou fica em verde, pra
   mostrar visualmente que aquela etapa do cronograma já ficou pra trás. */
.cal-day.past{background:#e5f3ea;border-color:#bfe3cc;}
.cal-day.past.today{background:#e5f3ea;}
.cal-day.past .cal-day-num{color:#1c7a4f;}
.cal-day-num{font-size:12px;font-weight:700;color:var(--muted);}
.cal-day.today .cal-day-num{color:var(--primary-dark);}
.cal-post-chip{font-size:10.5px;line-height:1.35;background:var(--bg);border-radius:6px;padding:3px 5px;cursor:pointer;text-align:left;border:none;color:var(--text);}
.cal-post-chip:hover{background:#EFEBFC;}
.cal-post-chip b{display:block;font-weight:700;}
.cal-post-tags{display:flex;gap:3px;margin-top:2px;}
.cal-post-tag{width:8px;height:8px;border-radius:2px;flex:0 0 auto;}
.cal-post-tag.tag-designer{background:#2563eb;}
.cal-post-tag.tag-videomaker{background:#16a34a;}
.cal-post-tag.tag-designer3d{background:#39ff14;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;}
@media (max-width:900px){
  .cal-grid{grid-template-columns:repeat(7,minmax(80px,1fr));overflow-x:auto;}
}

/* ---------- Cronograma de Marketing — Prévia do Feed ---------- */
.feed-preview-list{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;}
.feed-preview-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;width:340px;flex:0 0 auto;}
.feed-preview-header{display:flex;align-items:center;gap:8px;padding:10px 12px;}
.feed-preview-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;}
.feed-preview-card.linkedin .feed-preview-avatar{border-radius:6px;}

/* Foto de perfil (20ª rodada) — usado no Chat da Equipe, na Prévia do Feed
   e nos chips do Calendário do Cronograma. Sem foto cadastrada, cai pra um
   círculo com a inicial do nome (mesmo estilo do .feed-preview-avatar). */
.avatar-img{border-radius:50%;object-fit:cover;flex:0 0 auto;}
.avatar-fallback{border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;}
.avatar-stack{display:flex;align-items:center;margin-top:4px;}
.avatar-stack .avatar-img,.avatar-stack .avatar-fallback{border:2px solid var(--card);margin-left:-6px;}
.avatar-stack .avatar-img:first-child,.avatar-stack .avatar-fallback:first-child{margin-left:0;}
.avatar-stack-more{font-size:10px;color:var(--muted);margin-left:4px;}
.feed-preview-headtext{display:flex;flex-direction:column;line-height:1.3;overflow:hidden;}
.feed-preview-account{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.feed-preview-meta{font-size:11px;color:var(--muted);}
.feed-preview-format{display:block;font-size:10.5px;color:var(--primary);font-weight:700;margin-top:1px;}
.feed-preview-caption{padding:0 12px 10px;font-size:13px;line-height:1.4;white-space:pre-wrap;}
.feed-preview-card.linkedin .feed-preview-caption{padding:0 12px 10px;}
/* Formato Feed Insta: 1080x1440. Formato Feed LinkedIn: 1080x1350 (pedido
   da Raquel, 16ª rodada) — a proporção do preview bate com o formato real
   de cada rede, e a imagem é sempre renderizada a partir do arquivo
   original (sem thumbnail/recompressão do servidor), pra ficar nítida. */
.feed-preview-media{width:100%;aspect-ratio:1080/1440;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.feed-preview-card.linkedin .feed-preview-media{aspect-ratio:1080/1350;}
/* 45ª rodada, pedido da Raquel: abas novas de rede na Prévia do Feed, cada
   uma com o formato certo -- TikTok vertical (vídeo), YouTube widescreen
   (capa), Pinterest/Pin no formato vertical alongado da própria rede. */
.feed-preview-card.tiktok .feed-preview-media{aspect-ratio:9/16;}
.feed-preview-card.youtube .feed-preview-media{aspect-ratio:16/9;}
.feed-preview-card.pinterest .feed-preview-media{aspect-ratio:2/3;}
.feed-preview-media img,.feed-preview-media video{width:100%;height:100%;object-fit:cover;image-rendering:auto;}
.feed-preview-noimg{color:var(--muted);font-size:12px;padding:20px;text-align:center;}
.feed-preview-actions{display:flex;gap:14px;padding:8px 12px;color:var(--muted);font-size:17px;}
.feed-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 10px;}
/* Link do post (45ª rodada) -- TikTok/YouTube (vídeo muito longo) e
   Newsletter (link da própria news). */
.feed-preview-link{padding:0 12px 10px;font-size:12px;}
.feed-preview-link a{color:var(--primary);word-break:break-all;}
/* YouTube: capa e vídeo são coisas diferentes -- avisa quando só a capa
   foi anexada. */
.feed-preview-video-missing{padding:5px 12px;font-size:11.5px;color:#9a3412;background:#fff7ed;}

/* ---------- aprovação na Prévia do Feed (quadradinho aprovado/reprovado) ---------- */
.approval-widget{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px;cursor:default;}
.approval-squares{display:flex;gap:6px;}
.approval-square{
  width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--bg);
  cursor:pointer;font-size:12px;line-height:1;color:var(--muted);
}
.approval-square:disabled{cursor:default;}
.approval-square.approval-ok.active{background:#16a34a;border-color:#16a34a;color:#fff;}
.approval-square.approval-no.active{background:var(--danger);border-color:var(--danger);color:#fff;}
.approval-notes textarea{width:100%;font-size:12px;padding:6px;border:1px solid var(--border);border-radius:6px;font-family:inherit;margin-bottom:4px;}
.approval-notes-readonly{font-size:12px;color:var(--danger);background:#fdecea;border:1px solid #f3c6c0;border-radius:6px;padding:6px 8px;}

/* ---------- Chat da Equipe (18ª rodada) ---------- */
.chat-wrap{position:relative;display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:360px;max-height:640px;margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
/* Foto de perfil (20ª rodada) — cada mensagem vira uma linha com o avatar
   ao lado da bolha, espelhada pra mensagens próprias. */
.chat-msg-row{display:flex;align-items:flex-end;gap:8px;max-width:78%;align-self:flex-start;}
.chat-msg-row.mine{align-self:flex-end;flex-direction:row-reverse;}
.chat-msg{max-width:100%;padding:8px 12px;border-radius:14px;background:var(--bg);}
.chat-msg.mine{background:color-mix(in srgb, var(--primary) 16%, white);}
.chat-msg-meta{font-size:10.5px;color:var(--muted);margin-bottom:2px;display:flex;gap:8px;}
.chat-msg-text{font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.chat-empty{color:var(--muted);font-size:12px;padding:24px;text-align:center;}
.chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--card);}
.chat-input-row textarea{flex:1;resize:none;font-family:inherit;border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:13.5px;max-height:120px;line-height:1.4;}
/* 21ª rodada: bug real encontrado — o botão herdava .btn-primary, que
   define width:100% (feito pra tela de login, onde o botão preenche
   sozinho o cartão). Dentro do flex do chat isso fazia o botão tentar
   ocupar a largura inteira da linha, espremendo o textarea (flex:1) pra
   uma faixa de ~24px, praticamente sumindo — por isso "não tinha onde
   escrever a mensagem". flex:0 0 auto + width:auto tiram o botão dessa
   disputa e devolvem o espaço pro campo de texto. */
.chat-input-row button{align-self:flex-end;width:auto;flex:0 0 auto;}
@media (max-width:900px){ .chat-wrap{height:calc(100vh - 280px);} }

/* ---------- Chat da Equipe: grupos, DMs, menções, chamar atenção (40ª rodada) ---------- */
.chat-layout{display:flex;gap:14px;margin-top:14px;align-items:flex-start;}
.chat-sidebar{width:230px;flex:0 0 auto;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;height:calc(100vh - 230px);min-height:360px;max-height:640px;}
.chat-sidebar-actions{display:flex;flex-direction:column;gap:6px;}
.chat-sidebar-actions button{font-size:12.5px;padding:7px 10px;}
.chat-conversation-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.chat-conversation-item{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:10px;cursor:pointer;font-size:12.5px;color:var(--text);}
.chat-conversation-item:hover{background:var(--bg);}
.chat-conversation-item.active{background:color-mix(in srgb, var(--primary) 16%, white);font-weight:700;}
.chat-conversation-item .chat-conversation-icon{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}
/* 42ª rodada: grupo com foto cadastrada (ver renderChatConversationList em app.js). */
.chat-conversation-item .chat-conversation-icon-photo{background-color:transparent;background-size:cover;background-position:center;}
.chat-conversation-item .chat-conversation-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat-main-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.chat-main-header h3{margin:0;}
.chat-main-header p{margin:2px 0 0;}
.chat-main-header-title{display:flex;align-items:center;gap:10px;}
/* 42ª rodada: botão de foto do grupo, no cabeçalho da conversa (só grupo). */
.chat-group-photo-btn{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  border:2px dashed var(--border);background:var(--muted-bg,#f0f0f0) center/cover no-repeat;
  cursor:pointer;color:var(--muted);font-size:16px;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.chat-group-photo-btn.has-photo{border-style:solid;}
.chat-group-photo-btn:hover{filter:brightness(0.95);}
.chat-main .chat-wrap{margin-top:10px;}
@media (max-width:900px){
  .chat-layout{flex-direction:column;}
  .chat-sidebar{width:auto;height:180px;min-height:140px;}
}

/* Mensagem de "chamar atenção" (nudge) -- vira uma linha centralizada,
   estilo aviso de sistema, não uma bolha normal. */
.chat-nudge-msg{align-self:center;max-width:90%;text-align:center;font-size:12px;font-weight:700;color:#B4590C;background:#FFF1DE;border:1px solid #F5A623;border-radius:999px;padding:6px 14px;margin:2px 0;}
@keyframes chatNudgeShake{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-6px);}
  30%{transform:translateX(6px);}
  45%{transform:translateX(-6px);}
  60%{transform:translateX(6px);}
  75%{transform:translateX(-3px);}
  90%{transform:translateX(3px);}
}
.chat-nudge-shake{animation:chatNudgeShake .6s ease-in-out;}

/* Menção (@Fulano) dentro do texto da mensagem. */
.chat-mention{background:color-mix(in srgb, var(--primary) 22%, white);border-radius:5px;padding:0 3px;font-weight:700;}

.chat-mention-suggest{position:absolute;bottom:60px;left:12px;right:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.18);max-height:160px;overflow-y:auto;z-index:5;}
.chat-mention-suggest-item{padding:8px 12px;font-size:12.5px;cursor:pointer;}
.chat-mention-suggest-item:hover, .chat-mention-suggest-item.active{background:var(--bg);}

/* ---------- Responsividade geral (20ª rodada) ----------
   Pedido da Raquel: "Deixe responsivo para qualquer tela". Antes só havia
   um salto único (900px) entre "layout de desktop" e "tudo empilhado", o
   que deixa tablets e janelas de tamanho intermediário mal aproveitadas
   (barra lateral virada num bloco de botões enorme, ou colunas apertadas
   demais). Os breakpoints abaixo cobrem telas grandes, tablets (~600-1024px)
   e celulares (<480px) em vez de só desktop/mobile. Fica no fim do arquivo
   de propósito: como as regras têm a mesma especificidade das originais
   (mesmo seletor, sem classe extra), só ganham dos estilos de tela grande
   por estarem depois no arquivo — se ficassem no meio, uma regra normal
   definida mais abaixo (ex: `.home-grid` original) venceria de volta. */
@media (max-width:1100px){
  .sidebar{width:210px;flex:0 0 210px;}
  .content{padding:20px 22px;}
}

@media (max-width:900px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;flex:none;height:auto;position:static;}
  /* Barra de navegação em cima, virando uma faixa que rola na horizontal
     em vez de quebrar em várias linhas (são ~15 itens — quebrando em
     linhas, a navegação sozinha ocuparia boa parte da tela num tablet). */
  .sidebar-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
  .navlink{white-space:nowrap;flex:0 0 auto;}
  .form-row{grid-template-columns:1fr;}
  .compare-row,.compare-card-body{grid-template-columns:1fr;}
  .compare-card-body-multi{flex-direction:column;}
  .compare-vs{padding-top:0;}
  .modal-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .kanban-col{width:220px;flex-basis:220px;}
  .cal-grid{grid-template-columns:repeat(7,minmax(80px,1fr));overflow-x:auto;}
  .chat-wrap{height:calc(100vh - 280px);}
}

@media (max-width:600px){
  .content{padding:14px 14px 28px;}
  .home-grid{grid-template-columns:1fr;}
  .home-card{padding:16px;}
  .auth-card{padding:22px;}
  .modal-row{grid-template-columns:1fr;}
  .feed-preview-card{width:100%;max-width:340px;}
  .summary-card{min-width:0;flex:1 1 140px;}
  .recado-card-text{min-width:0;}
}

/* ---------- Chat da Equipe: janelinha flutuante (21ª rodada) ---------- */
/* Fica de fora da .app-shell (ver index.html), flutuando por cima de
   qualquer tela. z-index abaixo do .modal-overlay (100) e do
   .color-popover (200) de propósito — se um modal estiver aberto (editando
   uma demanda, por exemplo), ele continua por cima; a bolha/janelinha não
   atrapalha o que já está em uso. */
.chat-widget-toggle{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:56px;height:56px;border-radius:50%;border:none;
  background:var(--brand-gradient);color:#fff;font-size:24px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.chat-widget-toggle:hover{filter:brightness(0.95);}
.chat-widget-badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.chat-widget{
  position:fixed;right:22px;bottom:22px;z-index:61;
  width:340px;max-width:calc(100vw - 32px);
  height:460px;max-height:calc(100vh - 100px);
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.28);overflow:hidden;
}
.chat-widget-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:var(--brand-gradient);color:#fff;font-weight:600;font-size:14px;
  flex:0 0 auto;
}
.chat-widget-close{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;padding:2px 4px;line-height:1;}
.chat-widget-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.chat-widget .chat-input-row{padding:10px;flex:0 0 auto;}
.chat-widget .chat-input-row textarea{max-height:80px;}

/* 42ª rodada: janelinhas flutuantes por conversa/grupo, empilhadas acima
   da bolha/janela fixa do Geral (mesmo canto direito) -- ver
   openConversationWindow/pollConversationWindows em app.js. */
.chat-floating-windows{
  position:fixed;right:22px;bottom:92px;z-index:59;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;
  max-height:calc(100vh - 120px);pointer-events:none;
}
.chat-floating-windows>*{pointer-events:auto;}
.chat-floating-win{
  width:300px;max-width:calc(100vw - 32px);
  height:380px;max-height:42vh;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.28);overflow:hidden;
}
.chat-floating-win .chat-widget-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.chat-floating-win .chat-input-row{padding:10px;flex:0 0 auto;}
.chat-floating-win .chat-input-row textarea{max-height:70px;}
@media (max-width:700px){
  .chat-floating-windows{right:10px;left:10px;bottom:88px;align-items:stretch;}
  .chat-floating-win{width:auto;height:320px;}
}

.chat-widget-toast{
  position:fixed;right:22px;bottom:88px;z-index:62;
  width:300px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,0.25);padding:12px 26px 12px 12px;cursor:pointer;
  display:flex;gap:10px;align-items:flex-start;
  animation:chatToastIn .18s ease-out;
}
.chat-widget-toast-close{position:absolute;top:6px;right:8px;background:none;border:none;font-size:13px;color:var(--muted);cursor:pointer;line-height:1;}
.chat-widget-toast-body{flex:1;min-width:0;}
.chat-widget-toast-name{font-weight:700;font-size:12.5px;margin-bottom:2px;}
.chat-widget-toast-text{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@keyframes chatToastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:600px){
  .chat-widget{right:10px;left:10px;width:auto;bottom:78px;height:min(460px, calc(100vh - 150px));}
  .chat-widget-toggle{right:14px;bottom:14px;}
  .chat-widget-toast{right:10px;left:10px;width:auto;bottom:82px;}
}

/* Notificação de aprovação de post (40ª rodada) -- ver index.html
   #approvalToast. Mesmo padrão visual do aviso de chat, mas em verde
   (aprovado) no canto superior direito, pra não competir com o próprio
   chat (que fica embaixo). */
.approval-toast{
  position:fixed;right:22px;top:78px;z-index:70;
  width:300px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid #2f9e5b;border-left:5px solid #2f9e5b;border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,0.25);padding:12px 14px;
  display:flex;gap:10px;align-items:center;
  animation:chatToastIn .18s ease-out;
}
.approval-toast-icon{font-size:20px;line-height:1;color:#2f9e5b;}
.approval-toast-text{font-size:13px;color:var(--text);font-weight:600;}
@media (max-width:600px){
  .approval-toast{right:10px;left:10px;width:auto;top:70px;}
}

/* ---------- Demandas: reordenar cards ao arrastar + ordenar por data (21ª rodada) ---------- */
.kanban-sort-date-btn{
  background:none;border:none;cursor:pointer;padding:2px 4px;font-size:13px;
  opacity:.55;flex:0 0 auto;line-height:1;
}
.kanban-sort-date-btn:hover{opacity:1;}
.kanban-card{cursor:grab;}
.kanban-card:active{cursor:grabbing;}
.kanban-card.card-dragging{opacity:.4;}
.kanban-card.drag-over-card{outline:2px dashed var(--primary);outline-offset:2px;}
.kanban-list.drag-over-list{outline:2px dashed var(--primary);outline-offset:-2px;border-radius:8px;}

/* ---------- 22ª rodada ---------- */

/* Fotinho de quem mandou o recado */
.recado-card-row{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;}
.recado-card-row .recado-card-text{min-width:0;flex:1;}

/* Notificação flutuante de recado/demanda nova — mesmo visual do aviso do
   Chat da Equipe (.chat-widget-toast, 21ª rodada), só que um pouco mais
   alta na tela pra não competir com a bolha/aviso do chat se os dois
   aparecerem perto um do outro. */
.notif-toast{bottom:158px;}
@media (max-width:600px){
  .notif-toast{bottom:150px;}
}

/* Histórico de Demandas (card + quadro geral) */
.demanda-history{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;padding:2px;}
.board-history-list{max-height:60vh;}
.history-row{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;}
.history-row-body{flex:1;min-width:0;}
.history-row-main{font-weight:600;}
.history-row-time{color:var(--muted);font-size:11px;margin-top:2px;}

/* Lightbox da Prévia do Feed — imagem/vídeo em tamanho de verdade, sem o
   recorte da miniatura de 340px do card, com navegação entre os cards de
   um carrossel. */
.feed-lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,0.9);
  display:flex;align-items:center;justify-content:center;
}
.feed-lightbox-media{max-width:90vw;max-height:82vh;display:flex;align-items:center;justify-content:center;}
.feed-lightbox-img{display:block;max-width:90vw;max-height:82vh;object-fit:contain;border-radius:4px;}
.feed-lightbox-close{
  position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;
  font-size:22px;cursor:pointer;line-height:1;z-index:2;
}
.feed-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.12);
  border:none;color:#fff;font-size:32px;width:48px;height:48px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
}
.feed-lightbox-nav:hover{background:rgba(255,255,255,0.24);}
.feed-lightbox-prev{left:14px;}
.feed-lightbox-next{right:14px;}
.feed-lightbox-counter{position:absolute;top:18px;left:20px;color:#fff;font-size:13px;opacity:.85;}
.feed-lightbox-dots{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:6px;}
.feed-lightbox-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;}
.feed-lightbox-dot.active{background:#fff;}
@media (max-width:600px){
  .feed-lightbox-nav{width:38px;height:38px;font-size:24px;}
}

/* .feed-preview-media precisa de position:relative pro selo de carrossel
   (acima) se ancorar certo — a regra original (início do arquivo) não
   tinha position definido. */
.feed-preview-media{position:relative;}

/* Selo "1/N" de carrossel na Prévia do Feed */
.feed-preview-carousel-badge{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,0.6);color:#fff;
  font-size:11px;padding:2px 8px;border-radius:10px;pointer-events:none;
}