/* ============================================================
   OFFICE - Area interna do site da Fabiene Lorenzo
   Estrutura herdada do Tuo Office (tuosec-compliance): vidro, sidebar,
   cards. PELE do site fabienelorenzo.com.br - os mesmos tokens do :root
   de fabiene-lorenzo-v2.html: base clara de salvia, verde da marca como
   massa solida (a sidebar), ouro como segunda cor. Cormorant Garamond nos
   titulos, Manrope no corpo, IBM Plex Mono nos rotulos.
   Os nomes antigos (--laranja, --navy...) sairam todos: um token chamado
   laranja valendo ouro seria uma armadilha para quem mexer depois.
   ============================================================ */

:root{
  /* Marca - os mesmos valores do :root de fabiene-lorenzo-v2.html */
  --fundo:#E9EDE4;
  --papel:#FBFCF8;
  --verde:#2F6B4F;
  --verde-claro:#397A5A;
  --verde-fundo:#1C4834;
  --verde-escuro:#153A2B;
  --ouro:#836419;          /* ouro sobre claro */
  --ouro-texto:#6E5514;    /* ouro como TEXTO miudo sobre claro - 6,9:1 */
  --ouro-claro:#D8B764;    /* ouro so dentro do verde (sobre papel da 1,9:1) */
  --claro:#EEF4EC;         /* texto sobre verde */
  --claro-suave:#A9C4B4;   /* texto secundario sobre verde - 6,7:1 */
  --linha-escura:rgba(169,196,180,.18);
  /* Botao principal: o mesmo gradiente verde dos blocos do site, texto claro. */
  --grad-acento:linear-gradient(160deg,var(--verde-fundo),var(--verde-escuro));

  --tinta:#1B2A22;
  --tinta-suave:#44544B;
  --vidro:rgba(251,252,248,.62);
  --vidro-forte:rgba(251,252,248,.85);
  --borda-vidro:rgba(27,42,34,.12);

  /* Cor de cada pessoa. Vale no office INTEIRO - avatar da sidebar, chip do
     calendario e card do kanban -, para a mesma pessoa ter sempre a mesma
     cor. Quem decide de quem e cada uma e cor_do_socio(), em
     office/views/base.py; aqui so ficam os valores.
     Nao confundir com o ouro da marca, que e de botoes, foco e links.
     A Fabiene e verde-agua e o Fernando azul: as duas longe do ouro, para
     a etiqueta de pessoa nao se confundir com destaque. */
  --fer:#5E90D8;          /* Fernando - azul */
  --fer-claro:#8FB8F0;
  --fer-tinta:#2B5C96;
  --fab:#3E9C86;          /* Fabiene - verde-agua */
  --fab-claro:#7CC7B2;
  --fab-tinta:#1F5E50;
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--ouro);color:#fff}

/* O fundo e o do miolo do site: gelo com duas manchas suaves (azulada no
   alto, pessego embaixo) e a malha tecnica bem apagada. */
body{
  font-family:'Manrope',sans-serif;
  color:var(--tinta);
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 55% at 85% -10%,rgba(198,214,196,.85),transparent 62%),
    radial-gradient(ellipse 50% 42% at 0% 106%,rgba(201,177,132,.32),transparent 60%),
    var(--fundo);
  background-attachment:fixed;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(27,42,34,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(27,42,34,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 60% at 60% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 60% at 60% 0%,#000 25%,transparent 78%);
}

.layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* ===== Sidebar ===== */
/* Vidro ESCURO de proposito, como a barra do site: o brasao e branco e
   sumiria numa sidebar clara. */
aside{
  width:240px;flex-shrink:0;margin:20px 0 20px 20px;padding:26px 18px;
  background:rgba(21,58,43,.9);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--linha-escura);border-radius:20px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 10px 32px rgba(21,58,43,.28);
  color:var(--claro-suave);
  align-self:flex-start;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin:0 4px 6px}
.logo img{height:38px;width:auto;flex-shrink:0}
.logo span{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:600;color:var(--claro);line-height:1}
.logo span b{color:var(--ouro-claro);font-weight:600}
.logo-sub{
  font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  color:var(--ouro-claro);margin:0 4px 24px;
}

aside nav a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--claro-suave);font-weight:500;font-size:.9rem;
  border-left:2px solid transparent;
  transition:background .2s,color .2s;
}
aside nav a:hover{background:rgba(255,255,255,.07);color:#fff}
aside nav a.ativo{background:rgba(216,183,100,.14);color:#fff;border-left-color:var(--ouro-claro)}
aside nav a.ativo .icone{color:var(--ouro-claro)}
/* Titulo de grupo no menu (o CRM). */
.nav-grupo{
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro-claro);margin:18px 12px 6px;
}
aside nav a .badge{
  margin-left:auto;background:var(--ouro);color:#fff;font-size:.7rem;font-weight:600;
  padding:2px 8px;border-radius:999px;
}
.icone{width:20px;height:20px;flex-shrink:0}

.socios{margin-top:auto;padding-top:18px;border-top:1px solid var(--linha-escura)}
.socio{display:flex;align-items:center;gap:10px;padding:8px 6px;font-size:.85rem;color:#fff}
.avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.8rem;color:#fff;flex-shrink:0;
}
.avatar.fer{background:linear-gradient(135deg,var(--fer-claro),var(--fer))}
.avatar.fab{background:linear-gradient(135deg,var(--fab-claro),var(--fab))}
.socio .online{width:8px;height:8px;border-radius:50%;background:#7BC89A;margin-left:auto}

.btn-sair{
  margin-top:12px;width:100%;border:1px solid var(--linha-escura);background:transparent;
  color:var(--claro-suave);font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:500;
  padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .2s,color .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-sair:hover{background:rgba(255,255,255,.08);color:#fff}
/* "Minha senha" usa a mesma pinta do botao de sair, mas e um link. */
a.btn-sair{text-decoration:none}

/* ===== Tela "Minha senha" ===== */
.senha-ajuda{font-size:.83rem;line-height:1.5;color:var(--tinta-suave);margin-bottom:18px}
.senha-ajuda strong{color:var(--tinta);font-weight:600}
.senha-regras{
  list-style:none;margin:2px 0 20px;padding:12px 14px;
  background:rgba(255,255,255,.4);border:1px solid var(--borda-vidro);border-radius:12px;
  font-size:.76rem;line-height:1.7;color:var(--tinta-suave);
}
.senha-regras li::before{content:"·";margin-right:7px;color:var(--ouro-texto);font-weight:700}

/* ===== Main ===== */
main{flex:1;padding:32px 32px 40px;min-width:0}
header.topo{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:12px}
.saudacao h1{font-family:'Cormorant Garamond',serif;font-size:2.34rem;font-weight:500;letter-spacing:-.01em;line-height:1.1}
.saudacao p{color:var(--tinta-suave);font-size:.9rem;margin-top:4px}
.btn-novo{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.88rem;color:#fff;border:none;cursor:pointer;
  background:var(--grad-acento);padding:12px 22px;border-radius:14px;
  box-shadow:0 6px 18px rgba(21,58,43,.28);transition:transform .15s;
}
.btn-novo:hover{transform:translateY(-2px)}
.btn-novo:disabled{opacity:.5;cursor:not-allowed;transform:none}

.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}

.card{
  background:var(--vidro);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borda-vidro);border-radius:22px;padding:22px;
  box-shadow:0 8px 32px rgba(21,58,43,.07);
}
.card h2{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card h2 .icone{color:var(--ouro-texto)}
.card h2 .ver-tudo{margin-left:auto;font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:500;color:var(--ouro-texto);text-decoration:none}
.card h2 .ver-tudo:hover{text-decoration:underline}

/* ===== Estado vazio (etapa 1) ===== */
.vazio{
  border:1px dashed rgba(131,100,25,.4);border-radius:16px;padding:26px 20px;
  text-align:center;color:var(--tinta-suave);font-size:.85rem;line-height:1.5;
  background:rgba(255,255,255,.28);
}
.vazio strong{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
  font-size:.92rem;margin-bottom:5px}

/* ===== Proximos 7 dias ===== */
.semana{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.dia-pill{
  flex:0 0 150px;background:var(--vidro-forte);border:1px solid var(--borda-vidro);
  border-radius:16px;padding:12px 14px;
}
.dia-pill .data{font-size:.72rem;font-weight:600;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.06em}
.dia-pill .evento{font-size:.83rem;font-weight:500;margin-top:6px;line-height:1.3}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.fer{background:var(--fer)}.dot.fab{background:var(--fab)}.dot.ambos{background:#5FAF87}

/* ===== Calendario ===== */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head .mes{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.14rem}
.cal-nav{display:flex;gap:6px}
.cal-nav button{
  width:30px;height:30px;border-radius:10px;border:1px solid var(--borda-vidro);
  background:var(--vidro-forte);cursor:pointer;color:var(--tinta-suave);font-size:.9rem;
}
/* table-layout:fixed e o que segura as 7 colunas iguais. Sem ele o navegador
   dimensiona cada coluna pelo conteudo e um evento de titulo longo (.ev e
   nowrap) estica a sua coluna, espremendo as outras - o ellipsis nunca chega
   a disparar, porque a celula cresce em vez de cortar. */
table.cal{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:5px}
table.cal th,table.cal td{width:14.2857%}
table.cal th{font-size:.68rem;font-weight:600;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.08em;padding-bottom:6px}
table.cal td{
  height:64px;vertical-align:top;background:rgba(255,255,255,.6);border-radius:12px;
  padding:6px 7px;font-size:.78rem;font-weight:500;border:1px solid var(--borda-vidro);
}
table.cal td.fora{opacity:.35}
table.cal td.hoje{background:rgba(131,100,25,.12);border-color:var(--ouro-claro)}
/* O chip do evento e clicavel: na agenda abre a edicao, na visao geral leva
   para o mes dele. Como pode ser <button> ou <a>, o reset zera o que cada um
   traz de fabrica e deixa os dois com a mesma pinta. */
.ev{
  display:block;width:100%;box-sizing:border-box;
  font-family:inherit;font-size:.62rem;font-weight:600;margin-top:4px;padding:2px 6px;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:none;text-align:left;text-decoration:none;cursor:pointer;
}
.ev:hover{filter:brightness(.94)}
.ev:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:1px}
.ev.fer{background:rgba(143,184,240,.38);color:var(--fer-tinta)}
.ev.fab{background:rgba(124,199,178,.42);color:var(--fab-tinta)}
.ev.ambos{background:rgba(191,232,212,.6);color:#2F7A55}

.legenda{display:flex;gap:18px;margin-top:12px;font-size:.75rem;color:var(--tinta-suave)}

/* ===== Mural: quadro de cortica ===== */
.quadro-cortica{
  border-radius:14px;
  padding:22px;
  /* textura de cortica: base + granulos claros e escuros */
  background-color:#C79A66;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,235,205,.5) 1px, transparent 2px),
    radial-gradient(circle at 78% 32%, rgba(139,94,52,.55) 1.5px, transparent 2.5px),
    radial-gradient(circle at 35% 65%, rgba(255,228,190,.45) 1px, transparent 2px),
    radial-gradient(circle at 62% 80%, rgba(120,80,45,.5) 1px, transparent 2px),
    radial-gradient(circle at 88% 70%, rgba(255,235,205,.4) 1.5px, transparent 2.5px),
    radial-gradient(circle at 20% 88%, rgba(139,94,52,.45) 1px, transparent 2px),
    radial-gradient(circle at 50% 15%, rgba(120,80,45,.4) 1.5px, transparent 2.5px),
    radial-gradient(circle at 8% 50%, rgba(255,228,190,.35) 1px, transparent 2px),
    radial-gradient(circle at 92% 12%, rgba(139,94,52,.5) 1px, transparent 2px),
    radial-gradient(circle at 45% 42%, rgba(120,80,45,.35) 1px, transparent 2px);
  background-size:
    53px 47px, 61px 59px, 43px 51px, 67px 41px, 49px 63px,
    57px 45px, 71px 53px, 47px 67px, 59px 49px, 63px 57px;
  /* moldura de madeira + profundidade interna */
  border:9px solid transparent;
  border-image:linear-gradient(135deg,#8A5A34 0%,#B07B4A 25%,#6E4526 55%,#9C6A3E 80%,#7A4E2C 100%) 1;
  box-shadow:
    inset 0 3px 10px rgba(60,35,15,.45),
    inset 0 -2px 6px rgba(60,35,15,.3),
    0 8px 24px rgba(21,58,43,.18);
}
.quadro-cortica .vazio{
  border-color:rgba(255,235,205,.45);background:rgba(255,245,225,.18);color:#F3E3CC;
}
.quadro-cortica .vazio strong{color:#FFF3DF}

/* Cartoes menores e em quantas colunas couberem: o quadro cresce em numero
   de recados, nao em altura. O texto completo aparece ao clicar. */
.mural{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.cartao{
  border-radius:3px;
  padding:15px 13px 11px;
  position:relative;
  cursor:zoom-in;
  box-shadow:2px 4px 8px rgba(60,35,15,.35), 0 1px 2px rgba(60,35,15,.2);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* Inclinacao dos cartoes: o mockup so previa 4: a partir do 5o o ciclo se
   repete, senao os cartoes seguintes ficariam todos retos no quadro. */
.cartao:nth-child(4n+1){transform:rotate(-2deg)}
.cartao:nth-child(4n+2){transform:rotate(1.6deg)}
.cartao:nth-child(4n+3){transform:rotate(1.2deg)}
.cartao:nth-child(4n+4){transform:rotate(-1.5deg)}
/* Ao passar o mouse o cartao se endireita e sobe - ajuda a ler e deixa
   claro qual deles as acoes vao afetar. */
.cartao:hover{
  transform:rotate(0) scale(1.015);
  z-index:3;
  box-shadow:3px 7px 16px rgba(60,35,15,.4), 0 1px 2px rgba(60,35,15,.2);
}
.cartao.amarelo{background:linear-gradient(180deg,#FDF3B8 0%,#F8E88F 100%)}
.cartao.rosa{background:linear-gradient(180deg,#FCD9DE 0%,#F7BFC8 100%)}
.cartao.azul{background:linear-gradient(180deg,#CFE6F9 0%,#B3D5F0 100%)}
.cartao.verde{background:linear-gradient(180deg,#D7F1DC 0%,#BCE5C6 100%)}

/* alfinete: cabeca esferica + agulha + sombra */
.alfinete{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;z-index:2;
}
.alfinete::after{ /* agulha */
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:2px;height:8px;background:linear-gradient(180deg,#9A9A9A,#5C5C5C);
}
.alfinete::before{ /* sombra do alfinete no papel */
  content:"";position:absolute;top:19px;left:60%;
  width:10px;height:4px;border-radius:50%;background:rgba(60,35,15,.3);filter:blur(2px);
}
.alfinete.vermelho{background:radial-gradient(circle at 32% 28%,#FF9B8F,#E0392B 60%,#9E1F14)}
.alfinete.azul{background:radial-gradient(circle at 32% 28%,#8FB9FF,#2B62E0 60%,#14349E)}
.alfinete.verde{background:radial-gradient(circle at 32% 28%,#9FE8B0,#2BA84F 60%,#146B2E)}
.alfinete.roxo{background:radial-gradient(circle at 32% 28%,#C8A8F5,#7B3FD4 60%,#4A1E8F)}
.cartao h3{font-size:.82rem;font-weight:600;margin-bottom:5px;color:#4A3A28}
/* No quadro o texto e cortado em 4 linhas - o cartao inteiro aparece ao clicar. */
.cartao p{
  font-size:.75rem;line-height:1.45;color:#5C4A35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.cartao .meta{font-size:.66rem;color:#8A7358;margin-top:9px;font-style:italic}

/* ===== Cartao aberto: vira de frente e cresce no meio da tela ===== */
.mural-fundo{
  position:fixed;inset:0;z-index:55;
  background:rgba(45,32,18,.5);backdrop-filter:blur(3px);
}
.cartao.aberto,
.cartao.aberto:hover{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(430px,90vw);
  padding:26px 24px 20px;
  /* Sem overflow no cartao: o alfinete vive em top:-9px e seria decepado.
     Quando o texto e longo, quem rola e o paragrafo. */
  cursor:auto;z-index:60;
  box-shadow:0 24px 60px rgba(45,32,18,.5), 0 2px 6px rgba(60,35,15,.3);
  animation:cartao-virar .42s ease;
}
.cartao.aberto h3{font-size:1.05rem;margin-bottom:10px}
.cartao.aberto p{
  font-size:.9rem;line-height:1.6;
  display:block;-webkit-line-clamp:none;
  max-height:62vh;overflow:auto;
}
.cartao.aberto .meta{font-size:.72rem;margin-top:16px}
.cartao.aberto .cartao-acoes{opacity:1}

/* Meia volta: o cartao gira ate o perfil e volta de frente, ja no tamanho
   grande. Uma volta inteira mostraria o verso com o texto espelhado. */
@keyframes cartao-virar{
  0%{transform:translate(-50%,-50%) rotateY(0) scale(.82)}
  55%{transform:translate(-50%,-50%) rotateY(88deg) scale(.95)}
  100%{transform:translate(-50%,-50%) rotateY(0) scale(1)}
}
.fixado{
  font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(224,57,43,.12);border:1px solid rgba(224,57,43,.35);
  padding:2px 7px;border-radius:3px;color:#B02A1E;position:absolute;top:8px;right:8px;
}

/* Acoes do cartao: discretas, aparecem ao passar o mouse. No toque,
   onde nao existe hover, ficam sempre visiveis (regra no fim do arquivo). */
.cartao-acoes{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;
  padding-top:9px;border-top:1px dashed rgba(90,65,40,.28);
  opacity:0;transition:opacity .18s ease;
}
.cartao:hover .cartao-acoes,
.cartao:focus-within .cartao-acoes{opacity:1}
.cartao-acao{
  border:1px solid rgba(90,65,40,.3);background:rgba(255,255,255,.55);
  color:#5C4A35;font-family:'Manrope',sans-serif;font-size:.68rem;font-weight:600;
  padding:4px 9px;border-radius:5px;cursor:pointer;transition:background .15s ease;
}
.cartao-acao:hover{background:rgba(255,255,255,.9)}
.cartao-acao.perigo{color:#B02A1E;border-color:rgba(224,57,43,.4)}

/* Escolha da cor do papel, no modal */
.cores-papel{display:flex;gap:10px;flex-wrap:wrap}
.cor-opcao{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  border:2px solid transparent;border-radius:10px;padding:7px 12px;
  font-size:.78rem;color:#5C4A35;transition:border-color .15s ease;
}
.cor-opcao input{position:absolute;opacity:0;width:0;height:0}
.cor-opcao.ativa{border-color:var(--tinta)}
.cor-opcao.amarelo{background:linear-gradient(180deg,#FDF3B8,#F8E88F)}
.cor-opcao.rosa{background:linear-gradient(180deg,#FCD9DE,#F7BFC8)}
.cor-opcao.azul{background:linear-gradient(180deg,#CFE6F9,#B3D5F0)}
.cor-opcao.verde{background:linear-gradient(180deg,#D7F1DC,#BCE5C6)}

.campo-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.83rem}
.campo-check input{width:16px;height:16px;cursor:pointer}

/* Lista dos avisos arquivados (fora do quadro) */
.arquivado-linha{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--borda-vidro);
}
.arquivado-linha:last-child{border-bottom:none}
.arquivado-txt{flex:1;min-width:180px}
.arquivado-txt strong{display:block;font-size:.83rem;color:var(--tinta)}
.arquivado-txt .meta{font-size:.7rem;color:var(--tinta-suave);font-style:italic}
.arquivado-linha form{display:inline}

/* ===== Resumo de tarefas da visao geral (vem do mockup, EM USO) =====
   .check/.desc sao do bloco "Em aberto no Kanban" da home; .prazo aparece
   tambem no kanban e na tela de Tarefas. A lista completa de tarefas usa
   .lista-tarefas/.linha-tarefa, mais abaixo. */
.tarefa{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--borda-vidro)}
.tarefa:last-child{border-bottom:none}
.check{
  width:20px;height:20px;border-radius:7px;border:2px solid var(--ouro-claro);flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:transparent;
}
.check.feito{background:var(--ouro-claro);color:#fff;font-size:.7rem}
/* Na visao geral a linha e enxuta (descricao + prazo) e nao ha espaco para o
   nome: quem diz de quem e a tarefa e a cor do proprio quadradinho. */
.check.fer{border-color:var(--fer)}
.check.fab{border-color:var(--fab)}
.tarefa .desc{flex:1;font-size:.85rem;font-weight:500}
.tarefa.concluida .desc{text-decoration:line-through;color:var(--tinta-suave)}
.prazo{font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:999px}
.prazo.urgente{background:rgba(248,200,176,.6);color:#9C532F}
.prazo.ok{background:rgba(191,232,212,.7);color:#2F7A55}
.prazo.neutro{background:rgba(191,220,245,.7);color:#2F5E8A}

/* ===== Tela de login ===== */
/* Fundo escuro como o hero do site: e onde o brasao branco aparece. A caixa
   continua clara, para os campos lerem como os de dentro do office. */
body.tela-login{
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%,rgba(216,183,100,.14),transparent 62%),
    radial-gradient(ellipse 60% 55% at 0% 100%,rgba(28,72,52,.9),transparent 70%),
    var(--verde-escuro);
}
body.tela-login::before{
  background-image:linear-gradient(rgba(169,196,180,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(169,196,180,.05) 1px,transparent 1px);
}
.login-tela{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:100vh;padding:24px;position:relative;z-index:1}
.login-marca{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.login-marca img{height:76px;width:auto}
.login-nome{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:600;color:var(--claro);text-decoration:none;line-height:1}
.login-nome b{color:var(--ouro-claro);font-weight:600}
.login-marca .logo-sub{margin:0}
.login-caixa{
  width:100%;max-width:390px;padding:32px 30px;
  background:var(--fundo);
  border:1px solid var(--linha-escura);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-caixa h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.86rem;color:var(--tinta);margin-bottom:20px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.78rem;font-weight:600;color:var(--tinta-suave);margin-bottom:6px}
.campo input{
  width:100%;border:1px solid var(--borda-vidro);background:var(--vidro-forte);border-radius:12px;
  padding:12px 14px;font-family:'Manrope',sans-serif;font-size:.9rem;color:var(--tinta);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.campo input:focus{border-color:var(--ouro-claro);box-shadow:0 0 0 3px rgba(216,183,100,.22)}
.btn-entrar{
  width:100%;margin-top:8px;border:none;cursor:pointer;color:#fff;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.9rem;
  background:var(--grad-acento);padding:13px;border-radius:14px;
  box-shadow:0 6px 18px rgba(21,58,43,.28);transition:transform .15s;
}
.btn-entrar:hover{transform:translateY(-2px)}
.erro-login{
  background:rgba(232,143,102,.16);border:1px solid rgba(232,143,102,.45);
  color:#9C532F;font-size:.82rem;padding:11px 14px;border-radius:12px;margin-bottom:18px;
}
.login-rodape{margin-top:22px;font-size:.72rem;color:var(--tinta-suave);text-align:center;line-height:1.5}

/* ===== Mensagens do Django ===== */
.avisos{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.aviso{
  font-size:.85rem;padding:11px 16px;border-radius:14px;
  background:var(--vidro-forte);border:1px solid var(--borda-vidro);
}
.aviso.success{background:rgba(191,232,212,.55);border-color:rgba(95,175,135,.45);color:#2F7A55}
.aviso.error{background:rgba(248,200,176,.5);border-color:rgba(232,143,102,.45);color:#9C532F}

/* ===== Lista de eventos (agenda) ===== */
.lista-eventos{display:flex;flex-direction:column}
.linha-evento{
  display:grid;grid-template-columns:14px 78px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--borda-vidro);
}
.linha-evento:last-child{border-bottom:none}
.linha-quando{font-size:.82rem;font-weight:600;color:var(--tinta)}
.linha-quando small{display:block;font-weight:500;color:var(--tinta-suave);font-size:.7rem}
.linha-titulo{font-size:.88rem;font-weight:500;min-width:0}
.linha-titulo small{display:block;font-weight:400;color:var(--tinta-suave);font-size:.72rem;margin-top:2px}
.linha-acoes{display:flex;gap:6px;align-items:center}
.linha-acoes form{display:inline}

.btn-mini{
  border:1px solid var(--borda-vidro);background:var(--vidro-forte);color:var(--tinta-suave);
  font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600;
  padding:5px 11px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s;
}
.btn-mini:hover{background:#fff;color:var(--tinta)}
.btn-mini.perigo:hover{background:rgba(232,143,102,.2);color:#9C532F}

/* ===== Modal ===== */
[x-cloak]{display:none !important}
.modal-fundo{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(21,58,43,.35);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);overflow-y:auto;
}
.modal-caixa{
  width:100%;max-width:520px;padding:26px 26px 22px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.8));
  border:1px solid var(--borda-vidro);border-radius:24px;
  box-shadow:0 20px 60px rgba(21,58,43,.28);
}
.modal-topo{display:flex;align-items:center;margin-bottom:18px}
.modal-topo h3{font-family:'Cormorant Garamond',serif;font-size:1.32rem;font-weight:600}
.modal-fechar{
  margin-left:auto;border:none;background:none;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--tinta-suave);padding:0 4px;
}
.modal-fechar:hover{color:var(--tinta)}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo label small{font-weight:400;text-transform:none;letter-spacing:0}
.campo textarea,.campo select{
  width:100%;border:1px solid var(--borda-vidro);background:var(--vidro-forte);border-radius:12px;
  padding:12px 14px;font-family:'Manrope',sans-serif;font-size:.9rem;color:var(--tinta);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.campo textarea:focus,.campo select:focus{border-color:var(--ouro-claro);box-shadow:0 0 0 3px rgba(216,183,100,.22)}
.campo textarea{resize:vertical;line-height:1.5}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.btn-secundario{
  border:1px solid var(--borda-vidro);background:var(--vidro-forte);color:var(--tinta-suave);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.88rem;
  padding:12px 20px;border-radius:14px;cursor:pointer;transition:background .2s,color .2s;
}
.btn-secundario:hover{background:#fff;color:var(--tinta)}

/* ===== Historico ===== */
.filtros-historico{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.filtro{
  font-size:.73rem;font-weight:500;padding:4px 12px;border-radius:999px;
  border:1px solid var(--borda-vidro);background:var(--vidro-forte);
  color:var(--tinta-suave);transition:background .2s,color .2s;
}
.filtro:hover{background:#fff;color:var(--tinta)}
.filtro.ativo{background:var(--grad-acento);color:#fff;border-color:var(--ouro)}

.linha-tempo{display:flex;flex-direction:column}
.registro{
  display:grid;grid-template-columns:88px auto 1fr;gap:11px;align-items:baseline;
  padding:11px 2px;border-bottom:1px solid var(--borda-vidro);font-size:.84rem;
}
.linha-tempo li:last-child{border-bottom:none}
.marca-tempo{font-size:.72rem;color:var(--tinta-suave);white-space:nowrap}
.etiqueta-alvo{
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:999px;background:var(--vidro-forte);
  color:var(--tinta-suave);white-space:nowrap;
}
.etiqueta-alvo.evento{background:rgba(27,42,34,.1);color:var(--tinta)}
.etiqueta-alvo.tarefa{background:rgba(191,232,212,.6);color:#2F7A55}
.etiqueta-alvo.aviso{background:rgba(245,206,140,.45);color:#8A6220}
.etiqueta-alvo.recado{background:rgba(245,174,140,.4);color:#9C532F}
.registro-frase{line-height:1.45;min-width:0}
.registro-titulo{color:var(--tinta-suave)}
.linha-tempo.compacta .registro{grid-template-columns:82px 1fr;padding:8px 2px;font-size:.8rem}

.paginacao{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;font-size:.8rem}
.paginacao a{color:var(--ouro-texto);font-weight:600}
.paginacao a:hover{text-decoration:underline}
.pag-conta{color:var(--tinta-suave);font-size:.75rem}

@media (max-width:640px){
  .registro{grid-template-columns:1fr;gap:4px}
  .linha-tempo.compacta .registro{grid-template-columns:1fr}
}

/* ===== Recados ===== */
.lista-recados{display:flex;flex-direction:column;gap:10px}
.recado{
  background:rgba(255,255,255,.55);border:1px solid var(--borda-vidro);
  border-radius:14px;padding:12px 14px 10px;
}
/* Uma faixa na lateral e o unico destaque do que ainda nao foi lido - sem
   negrito no texto inteiro, que deixaria a caixa gritando. */
.recado.novo{border-left:3px solid var(--ouro-claro);background:rgba(255,255,255,.78)}
.recado.enviado{background:rgba(255,255,255,.4)}
.recado-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.recado-topo strong{font-size:.83rem;font-weight:600}
.recado-topo small{font-size:.71rem;color:var(--tinta-suave)}
.rotulo-para{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-suave)}
.recado-texto{font-size:.85rem;line-height:1.5;color:var(--tinta)}
.recado-acoes{display:flex;gap:6px;margin-top:9px;opacity:0;transition:opacity .2s}
.recado:hover .recado-acoes{opacity:1}
.recado-acoes form{display:inline}
.selo-lido{
  margin-left:auto;font-size:.66rem;font-weight:600;padding:1px 8px;border-radius:999px;
  background:rgba(191,232,212,.6);color:#2F7A55;
}
.selo-lido.pendente{background:var(--vidro-forte);color:var(--tinta-suave)}
.lista-recados.compacta .recado{padding:10px 12px 9px}
.kb-contador.destaque{background:var(--grad-acento);color:#fff;border-color:var(--ouro)}

/* ===== Lista de tarefas ===== */
.lista-tarefas{display:flex;flex-direction:column}
.linha-tarefa{
  display:grid;grid-template-columns:22px 1fr auto auto;gap:12px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--borda-vidro);
}
.lista-tarefas li:last-child{border-bottom:none}

/* O quadradinho de concluir. E um <button>, entao o reset vem antes. */
.marcador{
  width:21px;height:21px;border-radius:7px;cursor:pointer;padding:0;
  border:1.8px solid rgba(131,100,25,.55);background:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .18s,border-color .18s,transform .12s;
}
.marcador:hover{border-color:var(--ouro);background:rgba(216,183,100,.25)}
.marcador:active{transform:scale(.9)}
.marcador svg{width:12px;height:12px}
.marcador.marcado{background:var(--grad-acento);border-color:var(--ouro)}
.marcador:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:2px}

.tarefa-corpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.tarefa-texto{font-size:.87rem;font-weight:500;line-height:1.35}
.tarefa-meta{font-size:.72rem;color:var(--tinta-suave)}
/* Dono da tarefa na lista. A meta inteira e cinza; so o nome ganha a cor do
   socio - e o que deixa achar "as minhas" sem ler a lista toda.
   Usa a variante -tinta (mais escura) e nao a cor cheia: aqui a cor e TEXTO
   miudo sobre fundo claro, nao um bloco de fundo como no chip do calendario. */
.tarefa-dono{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.tarefa-dono::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.tarefa-dono.fer{color:var(--fer-tinta)}
.tarefa-dono.fab{color:var(--fab-tinta)}
.linha-tarefa.feita .tarefa-texto{text-decoration:line-through;color:var(--tinta-suave);font-weight:400}

.tarefa-acoes{display:flex;gap:5px;opacity:0;transition:opacity .2s}
.linha-tarefa:hover .tarefa-acoes{opacity:1}
.tarefa-acoes form{display:inline}

@media (max-width:640px){
  /* o prazo e as acoes descem para uma segunda linha */
  .linha-tarefa{grid-template-columns:22px 1fr auto;grid-template-rows:auto auto}
  .tarefa-acoes{grid-column:2 / -1;justify-content:flex-end}
}

/* ===== Kanban ===== */
/* Flex e nao grid de 3: o numero de colunas agora varia (as criadas pela
   pessoa). Cada uma tem largura minima; passou da tela, o quadro rola de
   lado. O padding de cima e de baixo e para o card que sobe no hover e a
   sombra nao serem cortados pelo overflow. */
.kb-quadro{
  display:flex;gap:18px;align-items:flex-start;
  overflow-x:auto;padding:4px 2px 12px;
}
.kb-coluna{
  flex:1 1 0;min-width:250px;
  background:var(--vidro);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borda-vidro);border-radius:22px;padding:16px 14px 14px;
  box-shadow:0 8px 32px rgba(21,58,43,.07);
  transition:border-color .2s,box-shadow .2s;
}
.kb-coluna.recebendo{
  border-color:var(--ouro-claro);
  box-shadow:0 8px 32px rgba(131,100,25,.28), 0 0 0 3px rgba(216,183,100,.18);
}
.kb-coluna-topo{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:0 4px}
.kb-coluna-topo h2{font-family:'Cormorant Garamond',serif;font-size:1.14rem;font-weight:600}
.kb-contador{
  background:var(--vidro-forte);border:1px solid var(--borda-vidro);color:var(--tinta-suave);
  font-size:.7rem;font-weight:600;padding:1px 9px;border-radius:999px;
}
.kb-add{
  margin-left:auto;width:26px;height:26px;border-radius:9px;cursor:pointer;
  border:1px solid var(--borda-vidro);background:var(--vidro-forte);
  color:var(--tinta-suave);font-size:1rem;line-height:1;transition:background .2s,color .2s;
}
.kb-add:hover{background:#fff;color:var(--ouro-texto)}

/* Renomear/excluir: so nas colunas criadas, discretos ate o hover. */
.kb-coluna-acoes{display:flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .2s}
.kb-coluna-acoes + .kb-add{margin-left:4px}
.kb-coluna:hover .kb-coluna-acoes,.kb-coluna-acoes:focus-within{opacity:1}
.kb-coluna-acoes form{display:inline}
.kb-coluna-btn{
  width:24px;height:24px;border-radius:8px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--tinta-suave);
}
.kb-coluna-btn svg{width:14px;height:14px}
.kb-coluna-btn:hover{background:var(--vidro-forte);color:var(--ouro-texto)}
.kb-coluna-btn.perigo:hover{color:#B3402B}

/* O "+" de coluna nova, a direita da ultima coluna. */
.kb-nova-coluna{
  flex:0 0 auto;align-self:stretch;width:52px;min-height:120px;cursor:pointer;
  border:1.5px dashed rgba(131,100,25,.45);border-radius:22px;
  background:rgba(255,255,255,.22);color:var(--ouro-texto);
  font-size:1.6rem;line-height:1;transition:background .2s,border-color .2s;
}
.kb-nova-coluna:hover{background:rgba(255,255,255,.6);border-color:var(--ouro)}
.kb-nova-coluna:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

.kb-lista{display:flex;flex-direction:column;gap:10px;min-height:120px}

.kb-card{
  background:rgba(255,255,255,.82);border:1px solid var(--borda-vidro);
  border-radius:14px;padding:13px 14px 11px;cursor:grab;
  box-shadow:0 3px 10px rgba(21,58,43,.09);
  transition:transform .15s,box-shadow .2s;
  /* No toque, segurar o card selecionaria o texto e abriria o menu do
     sistema no meio do arraste. manipulation ainda deixa rolar e tocar. */
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.kb-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(21,58,43,.16)}
.kb-card:active{cursor:grabbing}

/* Cor escolhida pela pessoa (Tarefa.cor_fundo). Pasteis: o texto do card
   continua o mesmo tom escuro e passa de 10:1 em todos. Vem ANTES do
   .arrastando de proposito - o buraco do arraste tem de continuar
   translucido, qualquer que seja a cor. */
.fundo-amarelo{background:#FBF0C6}
.fundo-verde{background:#D9EED7}
.fundo-azul{background:#DAE7F7}
.fundo-rosa{background:#F8DBE2}
.fundo-lilas{background:#E6DEF5}
.fundo-laranja{background:#FADFC8}
/* Quem esta sendo arrastado e o fantasma; o card original fica no quadro
   como o buraco que mostra onde ele vai cair. */
.kb-card.arrastando{
  opacity:.4;transform:none;box-shadow:none;
  border-style:dashed;background:rgba(255,255,255,.35);
}
.kb-card.arrastando:hover{transform:none;box-shadow:none}

/* O clone que segue o dedo/cursor. Fica no <body> - dentro da coluna o
   position:fixed se prenderia a ela, por causa do backdrop-filter. */
.kb-fantasma{
  position:fixed;z-index:400;margin:0;pointer-events:none;
  opacity:.97;cursor:grabbing;
  transform:rotate(2deg) scale(1.03);
  box-shadow:0 18px 42px rgba(21,58,43,.32);
  transition:none;
}
.kb-fantasma .kb-card-acoes{display:none}
body.kb-arrastando{cursor:grabbing}
body.kb-arrastando .kb-card{cursor:grabbing}
.kb-card-texto{font-size:.86rem;font-weight:500;line-height:1.4}
.kb-card-rodape{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.kb-responsavel{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.62rem;color:#fff;
  background:linear-gradient(135deg,#C7D1D8,#8A9BA4);flex-shrink:0;
}
/* De quem e o card. A cor e a MESMA do avatar da sidebar e do chip do
   calendario (--fer / --fab): quem bate o olho no quadro reconhece o dono
   sem ler as iniciais.
   A faixa fica na borda esquerda, e nao no fundo do card, porque o card
   tambem e clonado como fantasma durante o arraste - fundo colorido
   competiria com o proprio destaque de quem esta sendo arrastado.
   Card sem responsavel nao ganha faixa nenhuma: falta de dono e uma
   informacao, e ela desaparece se todo card for colorido. */
.kb-card.fer{border-left:4px solid var(--fer)}
.kb-card.fab{border-left:4px solid var(--fab)}
.kb-responsavel.fer{background:linear-gradient(135deg,var(--fer-claro),var(--fer))}
.kb-responsavel.fab{background:linear-gradient(135deg,var(--fab-claro),var(--fab))}
.kb-card-acoes{margin-left:auto;display:flex;gap:5px;opacity:0;transition:opacity .2s}
.kb-card:hover .kb-card-acoes{opacity:1}
.kb-card-acoes form{display:inline}

/* Seletor de cor no modal do card: bolinhas, o radio fica escondido. */
.rotulo-campo{display:block;font-size:.78rem;font-weight:600;color:var(--tinta-suave);margin-bottom:6px}
.kb-cores{display:flex;flex-wrap:wrap;gap:9px}
.campo .kb-cor{
  display:block;width:30px;height:30px;margin:0;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(21,58,43,.18);position:relative;
}
.kb-cor.sem-cor{
  background:#fff linear-gradient(135deg,transparent 46%,#B3402B 46%,#B3402B 54%,transparent 54%);
}
.kb-cor input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kb-cor:has(input:checked){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ouro)}
.kb-cor:has(input:focus-visible){outline:2px solid var(--ouro);outline-offset:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.modal-estreito{max-width:400px}
.campo-ajuda{margin-top:6px;font-size:.74rem;color:var(--tinta-suave)}

.kb-vazio{
  border:1px dashed rgba(131,100,25,.4);border-radius:12px;padding:16px 12px;
  text-align:center;font-size:.76rem;color:var(--tinta-suave);background:rgba(255,255,255,.22);
}

/* ===== Apagar briefing ===== */
/* Discreto de proposito: "revogar" e a acao do dia a dia, esta e a definitiva. */
.btn-mini.apagar,a.apagar{color:#B3402B}
.btn-mini.apagar:hover,a.apagar:hover{color:#93341F}
.apagar-lista{margin:.4rem 0 1rem;padding-left:1.1rem;font-size:.88rem;line-height:1.75}
.apagar-nota{
  font-size:.84rem;color:var(--tinta-suave);background:rgba(255,255,255,.45);
  border-left:3px solid var(--borda-vidro);border-radius:0 10px 10px 0;
  padding:.6rem .8rem;margin:0 0 1.2rem;
}
.btn-perigo{
  background:#B3402B;color:#fff;border:none;border-radius:12px;
  padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;
}
.btn-perigo:hover{background:#93341F}

/* ===== Menu do celular ===== */
/* O botao e o veu so existem abaixo de 760px (ver o bloco responsivo). */
.menu-botao{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;flex-shrink:0;align-self:center;cursor:pointer;
  border-radius:14px;color:var(--tinta);
  background:var(--vidro);border:1px solid var(--borda-vidro);
}
.menu-botao .icone{width:20px;height:20px}
.menu-botao:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.menu-veu{display:none}

/* ===== Responsivo ===== */
@media (max-width:1024px){
  .grid{grid-template-columns:1fr}
  /* Empilhado: uma coluna por linha, e o "+" vira uma faixa larga. */
  .kb-quadro{flex-direction:column;align-items:stretch;overflow-x:visible}
  .kb-coluna{min-width:0}
  .kb-nova-coluna{width:auto;min-height:52px}
  .kb-card-acoes{opacity:1}
  .kb-coluna-acoes{opacity:1}
}
@media (max-width:760px){
  /* A sidebar nao some mais: vira um painel que desliza pela esquerda.
     `display:none` deixava o celular SEM navegacao - nem Sair, nem Minha
     senha, so URL na mao (achado do Fernando em 07/09/2026).
     `position:fixed` funciona aqui porque nenhum ancestral do <aside> tem
     filter/backdrop-filter/transform - o proprio aside tem, e isso nao
     atrapalha; um ancestral com backdrop-filter viraria o bloco de
     referencia do fixed (a mesma armadilha do cartao do mural). */
  aside{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(82vw,282px);margin:0;border-radius:0 24px 24px 0;
    max-height:none;overflow-y:auto;
    transform:translateX(-102%);transition:transform .22s ease;
  }
  #menu-aberto:checked ~ .layout aside{transform:none}
  #menu-aberto:checked ~ .layout .menu-veu{
    display:block;position:fixed;inset:0;z-index:50;
    background:rgba(21,58,43,.5);backdrop-filter:blur(2px);
  }
  .menu-botao{display:inline-flex}
  /* Com o painel aberto, o dedo rola o menu - nao a pagina atras dele.
     Sem :has() nada trava, que e so um desconforto. */
  body:has(#menu-aberto:checked){overflow:hidden}
  header.topo{align-items:center}
  .saudacao{flex:1;min-width:0}
  main{padding:20px 16px}
  .mural{grid-template-columns:1fr}
  .campo-duplo{grid-template-columns:1fr}
  .linha-evento{grid-template-columns:14px 70px 1fr;grid-template-rows:auto auto}
  .linha-acoes{grid-column:2/4}
}

/* No toque nao existe hover: as acoes do cartao precisam ficar sempre a vista,
   senao fixar e arquivar viram inalcancaveis no celular (foi o que aconteceu
   com o arrastar do kanban). */
@media (hover:none){
  .cartao-acoes{opacity:1}
  .kb-card-acoes{opacity:1}
  .kb-coluna-acoes{opacity:1}
  .tarefa-acoes{opacity:1}
  .recado-acoes{opacity:1}
}

/* Quem pede menos animacao no sistema recebe o cartao ja aberto, sem a virada. */
@media (prefers-reduced-motion:reduce){
  .cartao.aberto{animation:none}
  .cartao{transition:none}
  aside{transition:none}
}

/* ==========================================================================
   BRIEFINGS - lista de convites e detalhe das respostas
   ========================================================================== */

.tabela-briefings{width:100%; border-collapse:collapse; font-size:.88rem}
.tabela-briefings th{
  text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave,#7b8794); font-weight:600;
  padding:0 .6rem .5rem 0; border-bottom:1px solid rgba(0,0,0,.08);
}
.tabela-briefings td{padding:.7rem .6rem .7rem 0; border-bottom:1px solid rgba(0,0,0,.05); vertical-align:top}
.tabela-briefings tr:last-child td{border-bottom:none}
.link-briefing{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem;
  background:rgba(0,0,0,.04); padding:.15rem .4rem; border-radius:5px;
  word-break:break-all; display:inline-block; max-width:230px;
}

/* Respostas do briefing - tambem usadas na revisao do cliente */
.revisao-secao{margin-bottom:1.3rem}
.revisao-secao h3{
  font-size:.95rem; margin:0 0 .4rem; padding-bottom:.3rem;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.revisao-linha{display:flex; gap:1rem; padding:.35rem 0; font-size:.87rem}
.revisao-linha dt{flex:0 0 38%; color:var(--texto-suave,#7b8794); margin:0}
.revisao-linha dd{flex:1; margin:0; white-space:pre-wrap}

.anexo-linha{
  display:flex; gap:.6rem; align-items:baseline; padding:.4rem 0;
  border-bottom:1px solid rgba(0,0,0,.05); font-size:.87rem;
}
.anexo-linha:last-child{border-bottom:none}
.anexo-nome{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anexo-meta{font-size:.78rem; color:var(--texto-suave,#7b8794)}

@media (max-width:820px){
  .tabela-briefings thead{display:none}
  .tabela-briefings tr{display:block; padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.06)}
  .tabela-briefings td{display:block; border:none; padding:.15rem 0}
  .link-briefing{max-width:100%}
  .revisao-linha{flex-direction:column; gap:.1rem}
  .revisao-linha dt{flex:none}
}

/* ===== Diario de bordo ===== */
/* As cores dos TIPOS sao proposital e visivelmente diferentes das cores dos
   SOCIOS (--fer/--fab): uma etiqueta diz "que espece de anotacao e esta", a
   outra diz "de quem". Se as duas familias se parecessem, a tela mentiria. */
:root{
  --t-nota:#6B7C85;      /* neutro - o dia a dia */
  --t-decisao:#2F7A55;   /* verde  - escolha feita */
  --t-armadilha:#B3402B; /* coral  - custou caro */
  --t-pendencia:#9C6B15; /* ambar  - ficou faltando */
}

.an-escrever textarea,
.an-editar textarea{
  width:100%;border:1px solid var(--borda-vidro);border-radius:14px;
  background:rgba(255,255,255,.7);padding:12px 14px;
  font-family:'Manrope',sans-serif;font-size:.88rem;line-height:1.6;color:var(--tinta);
  resize:vertical;
}
.an-escrever textarea:focus,.an-editar textarea:focus{outline:2px solid var(--ouro);outline-offset:1px}

.an-opcoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.an-opcoes select,.an-filtros select,.an-filtros input[type=search]{
  border:1px solid var(--borda-vidro);border-radius:11px;background:var(--vidro-forte);
  padding:7px 10px;font-family:'Manrope',sans-serif;font-size:.8rem;color:var(--tinta);
}
.an-opcoes .btn-novo{margin-left:auto}

/* Os quatro tipos como botoes de radio de verdade - o input fica escondido
   mas continua sendo ele que guarda o estado, entao teclado e leitor de tela
   seguem funcionando. */
.an-tipos{display:flex;gap:6px;flex-wrap:wrap}
.an-tipo input{position:absolute;opacity:0;width:0;height:0}
.an-tipo span{
  display:inline-block;padding:6px 11px;border-radius:11px;cursor:pointer;
  border:1px solid var(--borda-vidro);background:var(--vidro);
  font-size:.75rem;font-weight:600;color:var(--tinta-suave);transition:all .15s;
}
.an-tipo input:checked + span{color:#fff}
.an-tipo input:focus-visible + span{outline:2px solid var(--ouro);outline-offset:2px}
.an-tipo.t-nota input:checked + span{background:var(--t-nota);border-color:var(--t-nota)}
.an-tipo.t-decisao input:checked + span{background:var(--t-decisao);border-color:var(--t-decisao)}
.an-tipo.t-armadilha input:checked + span{background:var(--t-armadilha);border-color:var(--t-armadilha)}
.an-tipo.t-pendencia input:checked + span{background:var(--t-pendencia);border-color:var(--t-pendencia)}

.an-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.an-filtros input[type=search]{flex:1;min-width:140px}
.an-total{margin-left:auto;font-size:.75rem;color:var(--tinta-suave)}

.an-dia{margin-bottom:22px}
.an-dia-rotulo{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-suave);
  padding-bottom:6px;margin-bottom:12px;border-bottom:1px solid var(--borda-vidro);
}

.an-item{
  background:rgba(255,255,255,.55);border:1px solid var(--borda-vidro);
  border-radius:14px;padding:13px 15px;margin-bottom:10px;
}
.an-cabeca{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.74rem;color:var(--tinta-suave)}
.an-hora{font-weight:600}
.an-etiqueta{
  padding:2px 9px;border-radius:8px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#fff;
}
.an-etiqueta.t-nota{background:var(--t-nota)}
.an-etiqueta.t-decisao{background:var(--t-decisao)}
.an-etiqueta.t-armadilha{background:var(--t-armadilha)}
.an-etiqueta.t-pendencia{background:var(--t-pendencia)}
/* Autor na cor do socio - a mesma do kanban, da agenda e da sidebar. */
.an-autor{font-weight:600}
.an-autor.fer{color:var(--fer-tinta)}
.an-autor.fab{color:var(--fab-tinta)}
.an-projeto{margin-left:auto;font-size:.72rem;opacity:.85}

.an-texto{margin-top:8px;font-size:.87rem;line-height:1.62}
.an-texto p{margin:0 0 .5rem}
.an-texto p:last-child{margin-bottom:0}

.an-card{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:.74rem;color:var(--tinta-suave);text-decoration:none;
  background:var(--vidro);border:1px solid var(--borda-vidro);
  border-radius:9px;padding:4px 9px;
}
.an-card:hover{color:var(--ouro-texto)}
.an-card svg{width:13px;height:13px;flex-shrink:0}

.an-editar{margin-top:10px}
.an-editar summary{
  cursor:pointer;font-size:.74rem;color:var(--tinta-suave);
  list-style:none;display:inline-block;padding:3px 0;
}
.an-editar summary::-webkit-details-marker{display:none}
.an-editar summary:hover{color:var(--ouro-texto)}
.an-editar[open] summary{margin-bottom:8px;font-weight:600}
.an-editar form + form{margin-top:8px}

.an-paginas{display:flex;align-items:center;gap:12px;justify-content:center;
  font-size:.76rem;color:var(--tinta-suave);padding-top:6px}

/* "Onde voce parou" na visao geral */
.onde-parou .op-quando{font-size:.74rem;color:var(--tinta-suave);display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.onde-parou .op-texto{margin-top:8px;font-size:.9rem;font-weight:500;line-height:1.5}
.onde-parou .op-card{margin-top:8px;font-size:.74rem;color:var(--tinta-suave)}

@media (max-width:760px){
  .an-opcoes .btn-novo{margin-left:0;width:100%}
  .an-projeto{margin-left:0}
  .an-total{margin-left:0;width:100%}
}

/* ===== Projetos: seletor, etiqueta e tela ===== */
/* A frente e sempre TEXTO, nunca cor - no office a cor ja quer dizer
   "de quem" (--fer / --fab). Duas familias de cor na mesma tela fariam as
   duas perderem o sentido. */
.sel-projeto{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--vidro);border:1px solid var(--borda-vidro);
  border-radius:14px;padding:9px 14px;
}
.sel-projeto label{font-size:.76rem;font-weight:600;color:var(--tinta-suave)}
.sel-projeto select{
  border:1px solid var(--borda-vidro);border-radius:11px;background:var(--vidro-forte);
  padding:7px 10px;font-family:'Manrope',sans-serif;font-size:.82rem;color:var(--tinta);
  max-width:100%;
}
.sel-gerenciar{margin-left:auto;font-size:.75rem;color:var(--tinta-suave);text-decoration:none}
.sel-gerenciar:hover{color:var(--ouro-texto)}

.kb-projeto{
  display:inline-block;margin-top:8px;padding:2px 8px;border-radius:8px;
  background:rgba(255,255,255,.7);border:1px solid var(--borda-vidro);
  font-size:.66rem;font-weight:600;letter-spacing:.03em;color:var(--tinta-suave);
}
.tarefa-projeto{font-weight:600}

.pj-ajuda{font-size:.82rem;color:var(--tinta-suave);line-height:1.6;margin-bottom:14px}
.pj-novo{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.pj-novo input{
  flex:1;min-width:180px;border:1px solid var(--borda-vidro);border-radius:12px;
  background:rgba(255,255,255,.7);padding:10px 13px;
  font-family:'Manrope',sans-serif;font-size:.88rem;color:var(--tinta);
}
.pj-lista{list-style:none;padding:0;margin:0}
.pj-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--borda-vidro);
}
.pj-item:last-child{border-bottom:none}
.pj-nome{display:flex;gap:7px;align-items:center;flex:1;min-width:200px}
.pj-nome input{
  flex:1;border:1px solid transparent;border-radius:10px;background:transparent;
  padding:6px 8px;font-family:'Manrope',sans-serif;font-size:.88rem;font-weight:500;color:var(--tinta);
}
.pj-nome input:hover{border-color:var(--borda-vidro);background:rgba(255,255,255,.5)}
.pj-nome input:focus{border-color:var(--ouro);background:#fff;outline:none}
.pj-contas{font-size:.74rem;color:var(--tinta-suave);white-space:nowrap}
.pj-item.arquivado{opacity:.62}
.pj-nome-arquivado{flex:1;min-width:200px;font-size:.88rem;text-decoration:line-through}
.pj-titulo-arquivados{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-suave);
  margin:22px 0 8px;
}

@media (max-width:760px){
  .sel-gerenciar{margin-left:0}
  .pj-contas{width:100%}
}

/* ===== Anotacoes do card (dentro do modal do kanban) =====
   Reusa as etiquetas de tipo e a cor do autor do diario (.an-*): e a mesma
   Anotacao, e ela precisa parecer a mesma coisa nos dois lugares. */
.kb-anotacoes{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;color:var(--tinta-suave);
}
.kb-anotacoes svg{width:12px;height:12px}

.ca-secao{margin-top:20px;padding-top:18px;border-top:1px solid var(--borda-vidro)}
.ca-titulo{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave);margin-bottom:12px;
}
.ca-titulo small{
  display:block;margin-top:3px;font-weight:400;font-size:.72rem;
  text-transform:none;letter-spacing:0;opacity:.85;
}
.ca-escrever textarea{
  width:100%;border:1px solid var(--borda-vidro);background:var(--vidro-forte);border-radius:12px;
  padding:10px 12px;font-family:'Manrope',sans-serif;font-size:.86rem;color:var(--tinta);
  line-height:1.5;resize:vertical;outline:none;
}
.ca-escrever textarea:focus{border-color:var(--ouro-claro);box-shadow:0 0 0 3px rgba(216,183,100,.22)}
.ca-opcoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.ca-opcoes .btn-novo{margin-left:auto}

.ca-item{
  padding:11px 13px;margin-bottom:8px;
  background:var(--vidro-forte);border:1px solid var(--borda-vidro);border-radius:14px;
}
.ca-item .an-texto{margin-top:6px;font-size:.84rem}
/* O apagar fica na ponta da linha do cabecalho, e so aparece no hover -
   como as acoes do card no quadro. No toque nao ha hover: sempre visivel. */
.ca-apagar{margin-left:auto;opacity:0;transition:opacity .2s}
.ca-item:hover .ca-apagar,.ca-apagar:focus-within{opacity:1}
.ca-vazio{font-size:.82rem;color:var(--tinta-suave);line-height:1.6}

/* A lista nao pode empurrar o modal para fora da tela num card com muita
   conversa: ela rola, o resto do modal fica parado. */
.ca-lista{max-height:38vh;overflow-y:auto;padding-right:4px}

@media (hover:none){
  .ca-apagar{opacity:1}
}

/* Atalho do recado para o card que o gerou, e o realce de quem chega por ele. */
.recado-card{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:.76rem;font-weight:600;color:var(--tinta-suave);text-decoration:none;
}
.recado-card:hover{color:var(--ouro-texto)}
.recado-card svg{width:12px;height:12px;flex-shrink:0}
/* O card fica marcado atras do modal: fechado o modal, a pessoa ainda ve
   qual card o bilhete citava, sem ter de ler o recado de novo. */
.kb-destaque{box-shadow:0 0 0 2px var(--ouro),0 8px 20px rgba(21,58,43,.16)}

/* ===== Barra de realizacao do projeto (kanban) =====
   Cheio = Feito, claro = Fazendo. Laranja porque e progresso da FRENTE,
   nao de uma pessoa - azul e rosa continuam querendo dizer "de quem". */
.kb-progresso{
  margin:-4px 0 18px;padding:14px 18px 12px;
  background:var(--vidro);border:1px solid var(--borda-vidro);border-radius:14px;
}
.kb-progresso-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.kb-progresso-nome{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-suave);
}
.kb-progresso-pct{
  margin-left:auto;font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:1.55rem;line-height:1;color:var(--tinta);
}
.kb-progresso-trilho{
  display:flex;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(27,42,34,.08);
}
.kb-progresso-feito{background:var(--grad-acento);transition:width .5s ease}
.kb-progresso-fazendo{background:rgba(216,183,100,.32);transition:width .5s ease}
.kb-progresso-legenda{margin-top:8px;font-size:.76rem;color:var(--tinta-suave)}
@media (prefers-reduced-motion:reduce){
  .kb-progresso-feito,.kb-progresso-fazendo{transition:none}
}