/* Sinapse · sistema visual do redesign (wireframe v4, aprovado em 21/10/2026).
   Fonte da verdade: repo-sinapse-design/DESIGN-sinapse.md; tokens copiados de fonte-wireframe/estilo.css.
   Títulos em Recoleta 300/400 (a do Empire e do wireframe, D8; pedido da Isabelle em 22/10), interface em Roboto Mono.
   Animação só com transform e opacity; tudo respeita prefers-reduced-motion (fim do arquivo). */
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/roboto-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/roboto-mono-500.woff2) format("woff2"); }
/* Recoleta cortada pros caracteres do português (pyftsubset, 14 KB cada) */
@font-face { font-family: "Recoleta"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/recoleta-300.woff2) format("woff2"); }
@font-face { font-family: "Recoleta"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/recoleta-400.woff2) format("woff2"); }

:root {
  --fundo: #FDFCF8; --card: #FFFFFF; --camada2: #faf3e8; --camada3: #f4e5cf;
  --texto: #342817; --secundario: #6f6151; --sutil: #7b6d5d;
  --hairline: rgba(52,40,23,0.12); --borda-campo: rgba(52,40,23,0.22); --foco: #342817;
  --tinta: #342817; --tinta-ink: #FDFCF8;
  --primario: var(--tinta); --primario-ink: var(--tinta-ink);
  --ouro: #a8854d; --ouro-t: #8c6a33; --ouro-hover: #ead6b8;
  --acento: #a8854d; --acento-ink: #FDFCF8;
  /* vermelho só no erro do PIN; o resto do "perigo" é vinho apagado */
  --erro: #8a5a63; --erro-pin: #B42318; --ok: #5d7150; --aviso: #8c6a33;
  --t-reels: #a0583a; --t-carrossel: #5d7150; --t-foto: #55647e; --t-stories: #7b5872;
  --s-rascunho: #9a8d7c; --s-pendente: #8c6a33; --s-ajuste: #7b5872; --s-aprovado: #a8854d; --s-postado: #342817;
  --sombra-card: 0 4px 20px rgba(52,40,23,0.06); --sombra-pop: 0 8px 30px rgba(52,40,23,0.12); --sombra-modal: 0 20px 60px rgba(52,40,23,0.18);
  --vidro: rgba(253,252,248,0.92); --veu: rgba(52,40,23,0.28);
  --r-card: 24px; --r-inner: 16px; --r-control: 10px; --r-botao: 8px; --r-tag: 6px; --r-full: 999px;
  --ease: cubic-bezier(.2,0,0,1); --pop: cubic-bezier(.34,1.56,.64,1);
  --t-micro: 150ms var(--ease); --t-standard: 220ms var(--ease); --t-entry: 320ms var(--ease);
  --fonte: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Recoleta", Georgia, serif;
  --lateral: 248px; --gap-grade: 2px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #17120c; --card: #211a12; --camada2: #2a2117; --camada3: #3a2e20;
  --texto: #f3ead9; --secundario: #b9aa94; --sutil: #a39580;
  --hairline: rgba(243,234,217,0.12); --borda-campo: rgba(243,234,217,0.22); --foco: #f3ead9;
  --tinta: #f3ead9; --tinta-ink: #211a12; --ouro: #c9a56b; --ouro-t: #d4b47e; --ouro-hover: #4a3a25;
  --acento: #c9a56b; --acento-ink: #211a12;
  --erro: #c99aa3; --ok: #9fb48f; --aviso: #d4b47e;
  --t-reels: #d08a6c; --t-carrossel: #9fb48f; --t-foto: #95a5c4; --t-stories: #c39bb8;
  --s-rascunho: #a39580; --s-pendente: #d4b47e; --s-ajuste: #c39bb8; --s-aprovado: #c9a56b; --s-postado: #f3ead9;
  --sombra-card: 0 4px 24px rgba(0,0,0,0.45); --sombra-pop: 0 8px 30px rgba(0,0,0,0.5); --sombra-modal: 0 20px 60px rgba(0,0,0,0.55);
  --vidro: rgba(23,18,12,0.92); --veu: rgba(0,0,0,0.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 13px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { overscroll-behavior-y: none; }   /* no html, senão o elástico do Mac arrasta topo e lateral junto */
body { overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
svg { flex-shrink: 0; }
svg.i { width: 16px; height: 16px; }

/* ---------- tipografia (hierarquia slavvitanov: rótulo mono → título serif → botão contorno) ---------- */
.eyebrow { font: 500 11px/1.4 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo { font: 300 44px/1.08 var(--serif); letter-spacing: -0.025em; margin: 0 0 12px; text-wrap: balance; }
.titulo em { font-style: normal; color: var(--ouro); }
.titulo .muted { font-size: 0.55em; display: block; margin-top: 6px; letter-spacing: 0; }
.sub-t { font: 400 14px/1.6 var(--fonte); color: var(--secundario); margin: 0; max-width: 640px; text-wrap: pretty; }
.title { font: 300 30px/1.12 var(--serif); letter-spacing: -0.02em; margin: 0; }
.heading { font: 400 19px/1.25 var(--serif); letter-spacing: -0.01em; margin: 0; }
.small { font-size: 12px; }
.label { font: 500 11px/1.3 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.micro { font-size: 10px; font-weight: 500; }
.muted { color: var(--secundario); }
.num { font-variant-numeric: tabular-nums; font-weight: 500; }
.trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dica { font: 400 12px/1.55 var(--fonte); color: var(--secundario); margin: 0; }
.cabeca-tela { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.cabeca-tela > div:first-child { min-width: 0; flex: 1 1 320px; }
.cabeca-tela .titulo { margin: 0; }

/* ---------- botões (contorno mono, raio 8) ---------- */
.btn-primario, .btn-secundario, .btn-fantasma { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-botao); font: 500 11px/1 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro), transform 120ms var(--ease); }
.btn-primario svg, .btn-secundario svg, .btn-fantasma svg { width: 14px; height: 14px; }
.btn-primario { color: var(--tinta-ink); background: var(--tinta); border: 1px solid var(--tinta); }
.btn-primario:hover { background: var(--ouro); border-color: var(--ouro); color: #FDFCF8; }
.btn-secundario { color: var(--texto); background: transparent; border: 1px solid var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--tinta-ink); }
.btn-fantasma { background: transparent; border: 1px solid transparent; color: var(--secundario); }
.btn-fantasma:hover { color: var(--texto); background: var(--camada2); }
.btn-primario:active, .btn-secundario:active, .btn-fantasma:active { transform: scale(0.97); }
.btn-primario[disabled], .btn-secundario[disabled], .btn-fantasma[disabled] { opacity: 0.45; pointer-events: none; }
.btn-p { height: 32px; padding: 0 12px; font-size: 10px; }
.btn-perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 60%, transparent); background: transparent; }
.btn-perigo:hover { background: var(--erro); border-color: var(--erro); color: #FDFCF8; }
.btn-icone { width: 40px; height: 40px; padding: 0; }
.ic, .icone-fantasma { width: 36px; height: 36px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--texto); display: inline-grid; place-items: center; padding: 0; position: relative; flex-shrink: 0; transition: background var(--t-micro), color var(--t-micro), transform 120ms var(--ease); }
.icone-fantasma { color: var(--secundario); }
.ic:hover, .icone-fantasma:hover { background: var(--camada2); color: var(--texto); }
.ic:active, .icone-fantasma:active { transform: scale(0.92); }
.ic svg { width: 18px; height: 18px; }
.icone-fantasma svg { width: 16px; height: 16px; }

/* ---------- chips: ícone de 12 px + texto mono, 24 px de altura ---------- */
.chip { --c: var(--secundario); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-full); border: 0; background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 72%, var(--texto)); font: 500 10px/1 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background var(--t-micro), transform var(--t-micro); }
.chip svg { width: 12px; height: 12px; }
a.chip:hover, button.chip:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.chip.p { height: 20px; padding: 0 7px; font-size: 9px; }
.chip-erro { --c: var(--erro-pin); }
.chip-ok { --c: var(--ok); }
.chip-aviso { --c: var(--aviso); }
.chip-neutro { background: var(--camada3); color: var(--texto); }
.chip-tipo { --c: var(--secundario); }
.k-reels { --c: var(--t-reels); } .k-carrossel { --c: var(--t-carrossel); } .k-foto { --c: var(--t-foto); } .k-stories { --c: var(--t-stories); }

/* ---------- ícone de status: quadrado de 14 px que se preenche (troca anima em 240 ms) ---------- */
.sti { width: 16px; height: 16px; flex-shrink: 0; overflow: visible; vertical-align: middle; --sc: var(--s-rascunho); --p: 0; }
.sti.g { width: 22px; height: 22px; }
.sti .o { fill: none; stroke: var(--sc); stroke-width: 1.5; transition: stroke 0.3s var(--ease); }
.sti .f { fill: var(--sc); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--p)); transition: transform 0.42s var(--pop), fill 0.3s var(--ease); }
.sti .ck, .sti .bang, .sti .sl { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.28s var(--ease) 0.12s; }
.sti .ck { stroke: var(--fundo); }
.sti .bang, .sti .sl { stroke: var(--sc); }
.sti[data-s="rascunho"] .o { stroke-dasharray: 2.4 2.2; }
.sti[data-s="pendente"] { --sc: var(--s-pendente); }
.sti[data-s="pendente"] .o { animation: pulso 2s ease-in-out infinite; }
.sti[data-s="ajuste"] { --sc: var(--s-ajuste); --p: 0; }
.sti[data-s="ajuste"] .bang { stroke-dashoffset: 0; }
.sti[data-s="aprovado"] { --sc: var(--s-aprovado); --p: 1; }
.sti[data-s="postado"] { --sc: var(--s-postado); --p: 1; }
.sti[data-s="aprovado"] .ck, .sti[data-s="postado"] .ck { stroke-dashoffset: 0; }
.sti[data-s="travado"] { --sc: var(--sutil); }
.sti[data-s="travado"] .sl { stroke-dashoffset: 0; }
.sti.muda { animation: poing 0.46s var(--pop); }
.sti.treme { animation: treme 0.42s var(--ease); }
@keyframes poing { 0% { transform: scale(1); } 35% { transform: scale(0.78); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes treme { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2.5px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1.4px); } 80% { transform: translateX(0.8px); } }
@keyframes pulso { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.45; } }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1.2 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > .label, .rotulo { font: 500 11px/1.3 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.rotulo .muted, .campo > .label .muted { color: var(--sutil); font-weight: 400; text-transform: none; letter-spacing: 0; }
.entrada-texto, .campo :where(input:not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"])), .campo select, .campo textarea {
  font: 400 13px/1.4 var(--fonte); color: var(--texto); background: var(--card); border: 1px solid var(--borda-campo); border-radius: var(--r-control);
  padding: 0 12px; height: 40px; outline: none; transition: border-color var(--t-micro); width: 100%; min-width: 0; }
.campo textarea { resize: vertical; min-height: 88px; height: auto; padding: 12px; line-height: 1.6; }
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.entrada-texto:focus, .campo :where(input):focus, .campo select:focus, .campo textarea:focus { border-color: var(--foco); }
.campo input::placeholder, .campo textarea::placeholder, .entrada-texto::placeholder { color: var(--sutil); }
.campo.invalido input, .entrada-texto.invalido { border-color: var(--erro) !important; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }

/* gatilho de data (seletor da marca, nada nativo) */
.gatilho { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--borda-campo); background: var(--card); color: var(--texto); font: 400 13px var(--fonte); text-align: left; transition: border-color var(--t-micro); min-width: 0; }
.gatilho:hover, .gatilho.aberto { border-color: var(--foco); }
.gatilho svg { width: 14px; height: 14px; color: var(--secundario); }
.gatilho .vazio-txt { color: var(--sutil); }
.gatilho.compacto { height: 36px; font-size: 12px; }

/* hora digitável */
.hora-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hora-caixa { position: relative; }
.hora-caixa svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--secundario); pointer-events: none; }
.campo .hora-caixa input { padding-left: 34px; font-variant-numeric: tabular-nums; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip { height: 26px; padding: 0 10px; border-radius: var(--r-full); border: 0; background: var(--camada2); color: var(--secundario); font: 500 11px/1 var(--fonte); font-variant-numeric: tabular-nums; transition: background var(--t-micro), color var(--t-micro); }
.mini-chip:hover { background: var(--camada3); color: var(--texto); }

/* popover de data (cal-pop do wireframe) */
.seletor { position: fixed; z-index: 80; background: var(--card); border-radius: 14px; box-shadow: var(--sombra-pop), inset 0 0 0 1px var(--hairline); padding: 12px; width: 288px; animation: abre-pop 0.26s var(--pop); }
.seletor-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; }
.seletor-mes { font: 400 16px var(--serif); text-transform: capitalize; }
.seletor-nav { display: flex; gap: 2px; }
.seletor-nav button { width: 30px; height: 30px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--secundario); display: grid; place-items: center; padding: 0; transition: background var(--t-micro), color var(--t-micro); }
.seletor-nav button:hover { background: var(--camada2); color: var(--texto); }
.seletor-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.seletor-dow { font: 500 10px var(--fonte); letter-spacing: 0.08em; color: var(--secundario); padding: 4px 0; }
.seletor-dia { aspect-ratio: 1; border-radius: var(--r-full); border: 0; background: transparent; color: var(--texto); font: 500 12px var(--fonte); font-variant-numeric: tabular-nums; padding: 0; transition: background var(--t-micro); }
.seletor-dia:hover { background: var(--camada2); }
.seletor-dia.fora { color: var(--sutil); opacity: 0.55; }
.seletor-dia.hoje { box-shadow: inset 0 0 0 1px var(--borda-campo); }
.seletor-dia.marcado { background: var(--tinta); color: var(--tinta-ink); }
.seletor-rodape { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--hairline); }
.seletor-rodape button { border: 0; background: transparent; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); padding: 6px 8px; border-radius: var(--r-botao); }
.seletor-rodape button:hover { background: var(--camada2); color: var(--texto); }

/* cor: amostras + hex */
.cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cor-amostra { width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); position: relative; transition: transform 0.2s var(--pop); }
.cor-amostra:hover { transform: scale(1.08); }
.cor-amostra.ativa::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--tinta); }
.cor-livre { background: conic-gradient(#a0583a, #a8854d, #5d7150, #3f6f6a, #55647e, #6a5d86, #7b5872, #a0583a); overflow: hidden; }
.cor-livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cor-hex { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cor-hex .bolinha { width: 20px; height: 20px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); flex-shrink: 0; }
.campo .cor-hex input { height: 36px; width: 120px; font-size: 12px; font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* logo: área de soltar */
.logo-campo { display: flex; align-items: center; gap: 16px; }
.logo-previa { width: 64px; height: 64px; border-radius: var(--r-inner); border: 1px dashed var(--borda-campo); background: var(--camada2); display: grid; place-items: center; color: var(--secundario); overflow: hidden; flex-shrink: 0; transition: border-color var(--t-micro); }
.logo-previa.cheia { border-style: solid; background: var(--card); }
.logo-previa img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-campo.soltando .logo-previa { border-color: var(--tinta); }
.logo-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.logo-acoes .linha-acoes { gap: 4px; }

/* seg (trilho de pílulas) e pílulas de escolha */
.segmento { display: inline-flex; flex-wrap: wrap; background: var(--camada2); border-radius: var(--r-full); padding: 3px; gap: 2px; }
.segmento button { height: 30px; border: 0; background: transparent; color: var(--secundario); border-radius: var(--r-full); padding: 0 14px; font: 500 11px var(--fonte); white-space: nowrap; transition: background var(--t-micro), color var(--t-micro); }
.segmento button.ativo { background: var(--card); color: var(--texto); box-shadow: 0 1px 3px rgba(52,40,23,0.12); }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { --c: var(--secundario); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-full); border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--borda-campo); color: var(--secundario); font: 500 11px/1 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background var(--t-micro), color var(--t-micro), box-shadow var(--t-micro); }
.pilula:hover { color: var(--texto); background: var(--camada2); }
.pilula svg { width: 12px; height: 12px; }
.pilula.ativa { background: color-mix(in srgb, var(--c) 14%, var(--card)); color: color-mix(in srgb, var(--c) 72%, var(--texto)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--texto)); }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vazio { padding: 48px 24px; text-align: center; color: var(--secundario); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.vazio .icone { font-size: 28px; opacity: 0.5; }
.vazio p { margin: 0; }
.skeleton { background: linear-gradient(90deg, var(--card) 0%, var(--camada2) 50%, var(--card) 100%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; border-radius: var(--r-inner); }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes abre-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nasce { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.entra { animation: entrar var(--t-entry); }
.nasce { animation: nasce 0.5s var(--pop); }

/* interruptor · cópia do .interruptor do Painel (repo-painel-empire/src/index.css:402) */
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; border: 0; background: transparent; padding: 0; font: 400 12px var(--fonte); color: var(--texto); white-space: nowrap; user-select: none; }
.interruptor .tk { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 20%, transparent); transition: background 200ms var(--ease); }
.interruptor .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 200ms var(--ease); }
.interruptor[aria-checked="true"] .tk { background: var(--ouro); }
.interruptor[aria-checked="true"] .tk::after { transform: translateX(16px); }
.linha-opcao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.linha-opcao:first-of-type { border-top: 0; }

/* ---------- entrada ---------- */
.com-sessao .entrada { display: none; }
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-caixa { width: 100%; max-width: 420px; background: var(--card); border-radius: var(--r-card); padding: 32px; box-shadow: var(--sombra-card); }
.entrada-caixa .marca { padding: 0 0 28px; }
.entrada-caixa .titulo { font-size: 38px; }
.entrada-caixa form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.entrada-caixa .btn-primario { margin-top: 6px; height: 44px; }
.entrada-caixa .chip-erro { height: auto; min-height: 28px; padding: 6px 12px; white-space: normal; line-height: 1.4; text-transform: none; letter-spacing: 0; font-size: 12px; border-radius: var(--r-control); }

/* ---------- casca: lateral + topo + conteúdo ---------- */
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; min-width: 0; }
.marca-q { width: 28px; height: 28px; border-radius: 8px; background: var(--tinta); color: var(--tinta-ink); display: grid; place-items: center; font: 500 12px var(--fonte); flex-shrink: 0; overflow: hidden; }
.marca-q.com-logo { background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }
.marca-q img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.marca > div { min-width: 0; }
.marca b { font: 500 11px/1.2 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca small { font: 400 10px/1.2 var(--fonte); color: var(--secundario); letter-spacing: 0.06em; text-transform: uppercase; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--hairline); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--fundo); overflow-y: auto; scrollbar-width: none; z-index: 25; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-sep { font: 500 10px/1 var(--fonte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--secundario); padding: 14px 10px 6px; }
.ni { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r-control); border: 0; background: transparent; text-align: left; font: 500 12px/1 var(--fonte); color: var(--secundario); transition: background var(--t-micro), color var(--t-micro); width: 100%; }
.ni svg { width: 16px; height: 16px; }
.ni:hover { background: var(--camada2); color: var(--texto); }
.ni.ativo { background: var(--camada3); color: var(--texto); }
.ni-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni .n { font: 500 10px var(--fonte); min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--tinta); color: var(--tinta-ink); display: grid; place-items: center; }
.app { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 24px; padding-top: env(safe-area-inset-top); box-sizing: content-box; border-bottom: 1px solid var(--hairline); background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.crumb { font: 500 11px/1.2 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb b { color: var(--texto); font-weight: 500; }
.crumb .pip-c { margin-right: 4px; vertical-align: 1px; }
.crumb-l { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--t-micro), text-decoration-color var(--t-micro); }
.crumb-l:hover { color: var(--texto); text-decoration-color: currentColor; }
.c-voltar { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 4px; margin: 0 0 12px -4px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--secundario); font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background var(--t-micro), color var(--t-micro); }
.c-voltar:hover { background: var(--camada2); color: var(--texto); }
.c-voltar svg { width: 16px; height: 16px; }
.esp { flex: 1; }
.av { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font: 500 11px var(--fonte); background: var(--camada3); color: var(--texto); flex-shrink: 0; border: 2px solid var(--fundo); padding: 0; margin-left: 4px; transition: transform 0.2s var(--pop); }
.av:active { transform: scale(0.92); }
.sino-contador { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--tinta); color: var(--tinta-ink); font: 500 9px var(--fonte); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.filtro-master { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 20px 32px 0; max-width: 1320px; width: 100%; margin: 0 auto; }
.filtro-master .label { margin-right: 6px; white-space: nowrap; flex-shrink: 0; }
.filtro-master .pilula { flex-shrink: 0; }
.pilula-cliente .pip, .pip-c { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; display: inline-block; }
.pilula-mais { box-shadow: none; outline: 1px dashed var(--borda-campo); outline-offset: -1px; }
.conteudo { flex: 1; padding: 28px 32px 64px; max-width: 1320px; width: 100%; margin: 0 auto; }
.bnav { display: none; }
.so-cel, .so-cel-flex { display: none; }

/* ---------- placar de status (ícone de status + número) ---------- */
.placar { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.placar-item { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-inner); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); min-width: 0; }
.placar-num { font: 500 20px/1 var(--fonte); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--texto); }
.placar-rot { font: 500 10px/1.2 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; }
.placar-ajuda, .est-ajuda { width: 24px; height: 24px; border-radius: var(--r-full); border: 0; box-shadow: inset 0 0 0 1px var(--borda-campo); background: transparent; color: var(--secundario); font: 500 11px/1 var(--fonte); padding: 0; display: inline-grid; place-items: center; vertical-align: middle; flex-shrink: 0; transition: background var(--t-micro), color var(--t-micro); }
.placar-ajuda:hover, .est-ajuda:hover { background: var(--camada2); color: var(--texto); }
.placar-ajuda { align-self: center; margin-left: 4px; }
.est-ajuda { margin: 0 4px; text-transform: none; letter-spacing: 0; }
.est-ajuda-texto { font-size: 14px; line-height: 1.6; color: var(--secundario); margin: 0; }
.legenda-status { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.legenda-status-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.legenda-status-item .sti { margin-top: 2px; }
.legenda-status-item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.legenda-status-item b { font-weight: 500; }

/* ---------- calendário ---------- */
.cal-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-inner); overflow: hidden; }
.cal-dow { font: 500 10px var(--fonte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--secundario); text-align: center; padding: 6px 0; background: var(--camada2); }
.cal-mes .cal-dia { background: var(--fundo); min-height: 112px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; transition: background var(--t-standard); }
.cal-mes .cal-dia.outro-mes > * { opacity: 0.4; }
.cal-num { font: 500 10px var(--fonte); color: var(--secundario); font-variant-numeric: tabular-nums; height: 18px; display: inline-flex; align-items: center; }
.cal-dia.hoje .cal-num { color: var(--ouro-t); font-weight: 500; }
.cal-mes .cal-dia.hoje .cal-num::after { content: 'hoje'; margin-left: 6px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-mais { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--secundario); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity var(--t-micro), color var(--t-micro); }
.cal-mais svg { width: 12px; height: 12px; }
.cal-mais:hover { color: var(--texto); }
.cal-dia:hover .cal-mais { opacity: 1; }
.chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chip-cont { --sc: var(--s-rascunho); display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-align: left; border: 0; padding: 3px 6px; border-radius: var(--r-tag); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--texto); font: 400 11px/1.3 var(--fonte); transition: box-shadow var(--t-micro), transform 120ms var(--ease); }
.chip-cont:hover { box-shadow: inset 0 0 0 1px var(--borda-campo), var(--sombra-card); }
.chip-cont:active { transform: scale(0.98); }
.chip-cont .titulo-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.chip-cont .pip-c { width: 6px; height: 6px; }
/* semana: colunas com filete, card do post com título serif */
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.cal-semana .cal-dia { min-height: 440px; border-right: 1px solid var(--hairline); padding: 12px 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; transition: background var(--t-standard); }
.cal-semana .cal-dia:last-child { border-right: 0; }
.cal-cabeca-dia { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.cal-cabeca-dia span { font: 500 10px var(--fonte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--secundario); }
.cal-cabeca-dia b { font: 300 26px/1 var(--serif); }
.cal-semana .cal-dia.hoje .cal-cabeca-dia b { color: var(--ouro); }
.cal-semana .cal-mais svg { width: 12px; height: 12px; }
.cal-semana .cal-mais { position: static; opacity: 1; width: 100%; height: 32px; border-radius: var(--r-control); box-shadow: none; border: 1px dashed var(--borda-campo); background: transparent; font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; display: flex; gap: 6px; justify-content: center; align-items: center; transition: color var(--t-micro), border-color var(--t-micro); }
.cal-semana .cal-mais:hover { color: var(--texto); border-color: var(--tinta); }
.cal-semana .chips { gap: 8px; }
.cal-semana .chip-cont { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 12px; }
.cal-semana .chip-cont .tipo-linha { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chip-cli { max-width: 100%; min-width: 0; }
.chip-cli > span { overflow: hidden; text-overflow: ellipsis; }
.cal-semana .chip-cont .titulo-c { font: 400 14px/1.3 var(--serif); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.chip-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 9.5px/1.35 var(--fonte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); }
.chip-meta .st-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-meta .hora { font-variant-numeric: tabular-nums; }
.chip-meta .falta { font-size: 9px; color: var(--ouro-t); white-space: nowrap; }
.cal-dica { font: 400 11px var(--fonte); color: var(--secundario); margin: 12px 0 0; }

/* ---------- feed ---------- */
.feed-perfil { display: flex; align-items: center; gap: 16px; min-width: 0; }
.feed-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font: 300 22px var(--serif); color: var(--texto); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline), var(--sombra-card); flex-shrink: 0; }
.feed-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.feed-avatar img.foto-ig { object-fit: cover; padding: 0; }
.feed-stats { display: flex; gap: 16px; font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); flex-wrap: wrap; }
.feed-stats b { color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 500; }
.feed-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feed-acoes select, .feed-select { height: 40px; border-radius: var(--r-botao); border: 1px solid var(--borda-campo); background: var(--card); padding: 0 34px 0 12px; font: 500 11px var(--fonte); letter-spacing: 0.04em; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; max-width: 220px; }
.feed-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.feed-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.feed-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed-moldura { max-width: 640px; margin: 0 auto; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 12px; }
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grade); border-radius: 12px; overflow: hidden; }
.celula { position: relative; aspect-ratio: 3 / 4; background: var(--camada2); overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; will-change: transform; }
.celula img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.celula .sem-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; color: var(--ouro-t); font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(165deg, #ecdfc9, #d6bf99); }
:root[data-tema="escuro"] .celula .sem-capa { background: linear-gradient(165deg, #3a2e20, #2a2117); }
.celula .sem-capa span { max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula .cel-tipo { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.celula .cel-tipo svg { width: 16px; height: 16px; }
.celula .cel-status { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(253,252,248,0.92); }
.celula .cel-status .sti { width: 14px; height: 14px; }
.celula .cel-diverge { position: absolute; left: 6px; bottom: 6px; font: 500 9px var(--fonte); letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-full); background: rgba(253,252,248,0.92); color: #342817; }
.celula.arrastando { opacity: 0.35; }
.celula.alvo-antes::before, .celula.alvo-depois::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ouro); z-index: 2; }
.celula.alvo-antes::before { left: -1px; } .celula.alvo-depois::after { right: -1px; }
.celula.solta { animation: solta 0.6s var(--pop); }
@keyframes solta { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.fantasma { position: fixed; left: 0; top: 0; z-index: 100; width: 120px; height: 160px; pointer-events: none; opacity: 0.94; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-modal); will-change: transform; }
.fantasma img { width: 100%; height: 100%; object-fit: cover; }
.grade-dica { text-align: center; font: 400 11px var(--fonte); color: var(--secundario); margin-top: 12px; }
.faltando { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--r-inner); background: var(--camada2); color: var(--texto); font-size: 12px; }
.faltando svg { color: var(--ouro-t); width: 16px; height: 16px; }
.faltando b { font-weight: 500; font-variant-numeric: tabular-nums; }
.celula.provisoria img { filter: saturate(0.85); }
.cel-provisoria { position: absolute; left: 6px; top: 34px; font: 500 9px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-full); background: var(--ouro); color: #FDFCF8; }
.card-midia .cel-provisoria { top: 12px; left: 12px; }
.cel-rodape { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 6px; padding: 18px 8px 6px; font: 500 10px var(--fonte); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); opacity: 0; transition: opacity var(--t-micro); pointer-events: none; }
.celula:hover .cel-rodape { opacity: 1; }
.celula:has(.cel-diverge):hover .cel-diverge { opacity: 0; }

/* menu suspenso */
.menu { position: fixed; z-index: 80; width: 320px; max-width: calc(100vw - 16px); background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sombra-pop), inset 0 0 0 1px var(--hairline); padding: 8px; animation: abre-pop 0.28s var(--pop); transform-origin: top right; }
.menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: var(--r-control); color: var(--texto); font: 500 12px var(--fonte); transition: background var(--t-micro); }
.menu-item:hover { background: var(--camada2); }
.menu-item span { white-space: normal; }
.menu-dica { font: 400 11px var(--fonte); color: var(--secundario); }
.menu-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }

/* ---------- camadas: modal (centro) e card do post ---------- */
.camada { position: fixed; inset: 0; z-index: 50; background: var(--veu); display: grid; place-items: center; padding: 24px; overflow-y: auto; animation: veu 0.25s var(--ease); }
@keyframes veu { from { opacity: 0; } to { opacity: 1; } }
.modal { position: relative; width: 100%; max-width: 560px; background: var(--card); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sombra-modal); display: flex; flex-direction: column; gap: 18px; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
.modal.entra { animation: modal-entra 0.34s var(--pop); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal .alca { display: none; }
.alca { width: 40px; height: 5px; border-radius: 999px; background: var(--borda-campo); margin: 0 auto; flex-shrink: 0; cursor: grab; touch-action: none; }
.modal-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-cabeca > div { min-width: 0; }
.modal-cabeca .title { font: 400 24px/1.2 var(--serif); letter-spacing: -0.015em; margin-top: 4px; }
.modal-cabeca .label { display: block; }
.modal-cabeca .sub { font-size: 12px; color: var(--secundario); margin: 6px 0 0; line-height: 1.55; }
.modal-rodape { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--hairline); }
.modal-rodape .esq { margin-right: auto; }
.fechar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--secundario); display: grid; place-items: center; padding: 0; margin: -6px 0 0 0; transition: background var(--t-micro), color var(--t-micro); flex-shrink: 0; }
.fechar:hover { background: var(--camada2); color: var(--texto); }
.fechar svg { width: 18px; height: 18px; }
.divisor { height: 1px; background: var(--hairline); margin: 0; border: none; }
.card-modal { width: 100%; max-width: 1000px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-modal); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; height: min(calc(100dvh - 48px), 820px); }
.card-modal.entra { animation: modal-entra 0.34s var(--pop); }
.card-midia { background: var(--camada2); position: relative; display: grid; place-items: center; min-height: 320px; min-width: 0; overflow: hidden; padding: 24px; }
.card-midia .quadro { position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-inner); background: linear-gradient(165deg, #ecdfc9, #d6bf99); }
.card-midia .quadro img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.card-midia video { width: 100%; max-height: calc(100dvh - 96px); background: #000; border-radius: var(--r-inner); }
.card-midia .sem-capa { color: var(--ouro-t); font: 500 11px var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; }
.secao { display: flex; flex-direction: column; gap: 8px; }
.secao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.texto-copiavel { background: var(--camada2); border-radius: 12px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; font: 400 13px/1.6 var(--fonte); }
.arquivos-lista { display: flex; flex-direction: column; gap: 6px; }
.arquivo-item { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; background: var(--camada2); border-radius: 12px; min-width: 0; }
.arquivo-item .nome { flex: 1; }
.arquivo-item .btn-secundario { height: 32px; padding: 0 12px; font-size: 10px; }
.status-bloco { background: var(--camada2); border-radius: var(--r-inner); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.votos { display: flex; flex-direction: column; gap: 8px; }
.voto { display: flex; align-items: center; gap: 12px; }
.voto .avatar, .comentario .avatar, .pessoa .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--camada3); display: grid; place-items: center; font: 500 10px var(--fonte); color: var(--texto); flex-shrink: 0; }
.voto.pendente .avatar { opacity: 0.55; background: transparent; box-shadow: inset 0 0 0 1px var(--borda-campo); }
.voto .quem { flex: 1; min-width: 0; }
.voto .quem .nota { font-size: 12px; color: var(--secundario); margin-top: 2px; }
.acoes-aprovacao { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes-aprovacao .btn-primario { flex: 1; min-width: 140px; }
.comentarios { display: flex; flex-direction: column; gap: 14px; }
.comentario { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.comentario.celulose .avatar { background: color-mix(in srgb, var(--ouro) 22%, var(--card)); }
.comentario .corpo { min-width: 0; }
.comentario .cabeca { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.comentario .cabeca b { font-weight: 500; }
.comentario .cabeca .quando { color: var(--secundario); font-size: 11px; }
.comentario .texto { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.compor { display: flex; gap: 8px; align-items: flex-end; }
.compor textarea { flex: 1; min-height: 40px; font: 400 13px/1.5 var(--fonte); background: var(--card); border: 1px solid var(--borda-campo); border-radius: 20px; padding: 9px 16px; outline: none; resize: none; transition: border-color var(--t-micro); }
.compor textarea:focus { border-color: var(--foco); }
.compor .btn-primario { height: 40px; }
.progresso { height: 4px; background: color-mix(in srgb, var(--tinta) 10%, transparent); border-radius: var(--r-full); overflow: hidden; }
.progresso > div { height: 100%; background: var(--tinta); width: 0; border-radius: var(--r-full); transition: width 0.4s var(--ease); }
.capa-previa { width: 96px; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--camada2); border: 1px dashed var(--borda-campo); overflow: hidden; position: relative; display: grid; place-items: center; color: var(--secundario); font-size: 12px; flex-shrink: 0; }
.capa-previa.cheia { border-style: solid; }
.capa-previa img { position: absolute; left: 0; top: 0; max-width: none; }
input[type="file"].escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arquivo-btn { cursor: pointer; }

/* cadastro: opcional recolhido embaixo do obrigatório */
details.opcional { border-radius: var(--r-inner); background: var(--camada2); padding: 0 16px; }
details.opcional summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; height: 48px; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); }
details.opcional summary::-webkit-details-marker { display: none; }
details.opcional summary::after { content: ''; margin-left: auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.24s var(--ease); }
details.opcional[open] summary::after { transform: rotate(180deg); }
details.opcional[open] { padding-bottom: 16px; }
details.opcional summary:hover { color: var(--texto); }
.story-toque .btn-primario { height: 48px; }

/* recorte: quadro 3:4 com mover e zoom */
.recorte-quadro { position: relative; width: min(100%, 340px); aspect-ratio: 3 / 4; margin: 0 auto; overflow: hidden; background: #1d160d; border-radius: var(--r-inner); cursor: grab; touch-action: none; }
.recorte-quadro:active { cursor: grabbing; }
.recorte-quadro img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; user-select: none; }
.recorte-quadro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33.3%, rgba(255,255,255,0.15) 33.3%, rgba(255,255,255,0.15) calc(33.3% + 1px), transparent calc(33.3% + 1px), transparent 66.6%, rgba(255,255,255,0.15) 66.6%, rgba(255,255,255,0.15) calc(66.6% + 1px), transparent calc(66.6% + 1px)), linear-gradient(to bottom, transparent 33.3%, rgba(255,255,255,0.15) 33.3%, rgba(255,255,255,0.15) calc(33.3% + 1px), transparent calc(33.3% + 1px), transparent 66.6%, rgba(255,255,255,0.15) 66.6%, rgba(255,255,255,0.15) calc(66.6% + 1px), transparent calc(66.6% + 1px)); }
.zoom-linha { display: flex; align-items: center; gap: 12px; }
.zoom-linha input[type="range"] { flex: 1; accent-color: var(--tinta); }

/* prévia item a item */
.previa-lista { display: flex; flex-direction: column; gap: 4px; max-height: 50dvh; overflow-y: auto; }
.previa-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--camada2); border-radius: var(--r-control); font-size: 12px; }
.previa-item.sem-mudanca { opacity: 0.5; }
.previa-item .pos { font-variant-numeric: tabular-nums; color: var(--secundario); font-weight: 500; }
.previa-item .mudanca { font-variant-numeric: tabular-nums; white-space: nowrap; }
.previa-item .mudanca b { color: var(--texto); font-weight: 500; }

/* importar */
.importar-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50dvh; overflow-y: auto; }
.importar-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px 150px; gap: 12px; align-items: center; }
.importar-item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-control); }
.importar-item select { height: 36px; }
.ig-bloco { display: flex; flex-direction: column; gap: 12px; }
.ig-linha { grid-template-columns: minmax(0, 1fr) 140px; }
.ig-bloco .btn-primario { align-self: flex-start; }
.ou { display: flex; align-items: center; gap: 12px; color: var(--secundario); font: 500 10px var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* avisos (pop do wireframe) */
.popover { position: fixed; top: 64px; right: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sombra-pop), inset 0 0 0 1px var(--hairline); padding: 12px; max-height: 70dvh; overflow-y: auto; animation: abre-pop 0.28s var(--pop); transform-origin: top right; }
.popover .secao-cabeca { padding: 4px 4px 0 8px; flex-wrap: wrap; }
.popover .btn-fantasma { height: 28px; padding: 0 8px; font-size: 10px; }
.notif-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-control); background: transparent; border: 0; text-align: left; width: 100%; color: var(--texto); font: 400 12px/1.45 var(--fonte); transition: background var(--t-micro); }
.notif:hover { background: var(--camada2); }
.notif.nao-lida { background: color-mix(in srgb, var(--ouro) 9%, transparent); }
.notif .pip { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ouro); }
.notif.lida .pip { background: var(--camada3); }
.notif .texto { flex: 1; min-width: 0; }
.notif .quando { font-size: 11px; color: var(--secundario); margin-top: 2px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; background: var(--tinta); color: var(--tinta-ink); padding: 10px 18px; border-radius: var(--r-full); font: 500 11px var(--fonte); letter-spacing: 0.04em; box-shadow: var(--sombra-pop); display: flex; gap: 12px; align-items: center; animation: toast-entra 0.34s var(--pop); max-width: calc(100vw - 32px); }
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast button { background: transparent; border: 0; color: inherit; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* cadastro: zona de arquivo, lista escolhida, capa ao lado */
.soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px 16px; border: 1px dashed var(--borda-campo); border-radius: var(--r-inner); background: var(--camada2); color: var(--secundario); cursor: pointer; transition: border-color var(--t-micro), background var(--t-micro); position: relative; font-size: 12px; }
.soltar:hover, .soltar.soltando { border-color: var(--tinta); background: var(--card); color: var(--texto); }
.soltar b { color: var(--texto); font-weight: 500; }
.soltar-icone svg { width: 20px; height: 20px; }
.capa-linha { display: flex; gap: 16px; align-items: flex-start; }
.recorte-mini { width: 128px; margin: 0; flex-shrink: 0; }
.capa-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.envio { display: flex; flex-direction: column; gap: 8px; }
.arq-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.arq-item { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: var(--r-control); background: var(--camada2); min-width: 0; }
.arq-item .nome { flex: 1; }
.arq-ic { color: var(--secundario); display: grid; place-items: center; }
.arq-ic svg { width: 16px; height: 16px; }

/* card do post: mídia à esquerda; lado com cabeça · passos · abas · corpo rolável · rodapé */
.card-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.card-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0 24px; }
.card-cabeca .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 6px; min-width: 0; }
.card-titulo-linha { padding: 10px 24px 0; display: flex; flex-direction: column; gap: 6px; }
.card-titulo { font: 300 30px/1.12 var(--serif); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 16px 24px 0; }
.passo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font: 500 9.5px/1.3 var(--fonte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); border-top: 2px solid var(--hairline); padding-top: 10px; min-width: 0; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.passo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.passo.feito { border-color: var(--ouro); color: var(--texto); }
.passo.atual { border-color: var(--tinta); color: var(--texto); }
.abas { padding: 16px 24px 0; }
.abas .segmento { display: flex; border-radius: 0; background: transparent; padding: 0; gap: 4px; border-bottom: 1px solid var(--hairline); }
.abas .segmento button { height: 40px; border-radius: 0; padding: 0 14px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; box-shadow: none; transition: color var(--t-micro), border-color 0.2s var(--ease); }
.abas .segmento button.ativo { background: transparent; box-shadow: none; color: var(--texto); border-color: var(--tinta); }
.contagem { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--r-full); background: var(--camada3); font-size: 10px; font-variant-numeric: tabular-nums; }
.card-corpo { flex: 1; overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.card-rodape { border-top: 1px solid var(--hairline); padding: 12px 16px 12px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.card-rodape:has(#e-salvar), .acoes-master { flex-direction: row; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-rodape .acoes-aprovacao { justify-content: flex-end; }
.card-rodape .acoes-aprovacao .btn-primario { flex: 0 1 auto; min-width: 140px; }
.card-rodape .compor { width: 100%; }
.card-rodape .compor .btn-icone { width: 40px; height: 40px; flex-shrink: 0; }
.story-toque .acoes-aprovacao .btn-primario { flex: 1; }
.mensagem-log { margin: 0; }

/* edição: blocos com rótulo */
.edicao { display: flex; flex-direction: column; gap: 24px; }
.bloco-ed { display: flex; flex-direction: column; gap: 14px; }
.bloco-ed + .bloco-ed { border-top: 1px solid var(--hairline); padding-top: 20px; }
.bloco-ed > h3.label { margin: 0; }

/* ---------- configurações (master) ---------- */
.config { display: flex; flex-direction: column; gap: 24px; }
.config-grade { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.config-lista { display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 8px; position: sticky; top: 80px; }
.config-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-inner); border: 0; background: transparent; text-align: left; width: 100%; min-width: 0; transition: background var(--t-micro); }
.config-item:hover { background: var(--camada2); }
.config-item.ativo { background: var(--camada3); }
.config-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font: 500 12px/1.4 var(--fonte); }
.config-item-txt .small { font-weight: 400; font-size: 11px; }
.config-marca { width: 36px; height: 36px; border-radius: var(--r-control); background: color-mix(in srgb, var(--c) 16%, var(--card)); color: color-mix(in srgb, var(--c) 65%, var(--texto)); display: grid; place-items: center; font: 400 16px var(--serif); overflow: hidden; flex-shrink: 0; }
.config-marca img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: var(--card); }
.config-marca.grande { width: 56px; height: 56px; border-radius: var(--r-inner); font-size: 22px; }
.config-painel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.config-bloco { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.config-bloco-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.config-bloco-cabeca > div { min-width: 0; }
.config-bloco-cabeca .dica { margin-top: 4px; }
.config-bloco-cabeca .btn-secundario { flex-shrink: 0; }
.config-marca-linha { display: flex; align-items: center; gap: 16px; }
.config-bloco.perigo { box-shadow: inset 0 0 0 1px var(--hairline); background: transparent; }
.pessoas-lista { display: flex; flex-direction: column; gap: 6px; }
.pessoa { display: grid; grid-template-columns: 28px minmax(0, 1fr) 130px auto; gap: 12px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-inner); background: var(--camada2); }
.pessoa.inativa .avatar, .pessoa.inativa .pessoa-txt { opacity: 0.55; }
.pessoa-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.4; }
.pessoa-txt b { font-weight: 500; }
.pessoa-txt .small { font-size: 11px; }
.pessoa-papel select { height: 34px; font-size: 12px; background-color: var(--card); }
.pessoa-acoes { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.pessoa-acoes .btn-fantasma { height: 30px; padding: 0 8px; font-size: 10px; }
.pessoa-acoes [data-remover]:hover { color: var(--erro); }

/* ---------- Estratégia → Análise (public/estrategia.js) ---------- */
.est { display: flex; flex-direction: column; gap: 16px; }
.est-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.est-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.est-aba { height: 40px; border: 0; background: transparent; color: var(--secundario); padding: 0 14px; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-micro), border-color 0.2s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.est-aba:hover { color: var(--texto); }
.est-aba.ativa { color: var(--texto); border-color: var(--tinta); }
.est-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--camada3); color: var(--texto); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.est-aba.ativa .est-n { background: var(--tinta); color: var(--tinta-ink); }
.est-corpo { display: flex; flex-direction: column; gap: 16px; transition: opacity var(--t-micro); }
.est-corpo.est-recarregando { opacity: 0.55; pointer-events: none; }
.est-resumo b { color: var(--texto); font-weight: 500; }
.est-card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.est-card-acento { box-shadow: inset 0 0 0 1.5px var(--ouro), var(--sombra-card); }
.est-card-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.est-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.est-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 16px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 24px; }
.est-hero-num { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.est-display { font: 500 40px/1 var(--fonte); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.est-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.est-tiles-config { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.est-tile { background: var(--camada2); border-radius: var(--r-inner); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.est-tile-val { font: 500 24px/1.1 var(--fonte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.est-tile.tom-ok .est-tile-val { color: var(--ok); } .est-tile.tom-aviso .est-tile-val { color: var(--aviso); }
.est-grafico { position: relative; width: 100%; aspect-ratio: 640 / 240; }
.est-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.est-grid { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; }
.est-tick { font: 400 10px var(--fonte); fill: var(--secundario); }
.est-tick-forte { fill: var(--texto); font-weight: 500; font-size: 11px; }
.est-linha-meta { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; opacity: 0.38; }
.est-linha-real { fill: none; stroke: var(--ouro); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.est-ponto { fill: var(--ouro); stroke: var(--card); stroke-width: 2; }
.est-cursor { stroke: var(--tinta); stroke-width: 1; opacity: 0.35; }
.est-tooltip { position: absolute; top: 8px; background: var(--tinta); color: var(--tinta-ink); border-radius: var(--r-control); padding: 8px 10px; font: 400 11px/1.45 var(--fonte); display: flex; flex-direction: column; gap: 2px; pointer-events: none; min-width: 150px; }
.est-tooltip b { font-size: 11px; font-weight: 500; opacity: 0.8; }
.est-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--secundario); }
.est-key { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--c); margin: 0 4px 0 8px; vertical-align: middle; }
.est-legenda .est-key:first-child { margin-left: 0; }
.est-barras { display: flex; flex-direction: column; gap: 10px; }
.est-barra-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) max-content; gap: 12px; align-items: center; }
.est-barra-rotulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.est-barra-trilha { display: block; height: 10px; border-radius: var(--r-full); background: var(--camada2); overflow: hidden; position: relative; }
.est-barra { display: block; height: 100%; border-radius: var(--r-full); background: color-mix(in srgb, var(--tinta) 60%, transparent); transition: width 0.6s var(--ease); }
.est-barra-valor { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; white-space: nowrap; }
.est-padroes { position: relative; display: flex; flex-direction: column; gap: 6px; --rot: 170px; --val: 190px; padding-top: 14px; }
.est-marca-um { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); pointer-events: none; }
.est-marca-um span { position: absolute; top: -2px; left: 4px; font-size: 10px; color: var(--secundario); }
.est-padrao { display: grid; grid-template-columns: var(--rot) minmax(0, 1fr) var(--val); gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--r-control); border: 0; background: transparent; text-align: left; width: 100%; color: var(--texto); transition: background var(--t-micro); }
.est-padrao:hover { background: var(--camada2); }
.est-padrao-rotulo { font-size: 12px; font-weight: 500; }
.est-padrao-val { font-size: 12px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.est-padrao.melhor .est-barra { background: var(--ouro); }
.est-padrao.pista { opacity: 0.55; }
.est-padrao.pista .est-barra { background: color-mix(in srgb, var(--tinta) 25%, transparent); }
.est-pista { font-size: 9px; padding: 0 7px; height: 20px; }
.est-lista-posts { display: flex; flex-direction: column; gap: 4px; max-height: 60dvh; overflow-y: auto; }
.est-post-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--r-control); color: inherit; text-decoration: none; transition: background var(--t-micro); }
.est-post-linha:hover { background: var(--camada2); }
.est-post-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.est-post-num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.est-thumb { width: 44px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, var(--camada2)); display: grid; place-items: center; flex-shrink: 0; }
.est-thumb img { width: 100%; height: 100%; object-fit: cover; }
.est-thumb-vazia { font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--c) 60%, var(--texto)); }
.est-tabela-rolagem { overflow-x: auto; }
.est-tabela { width: 100%; border-collapse: collapse; font: 400 12px/1.5 var(--fonte); }
.est-tabela th, .est-tabela td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); text-align: left; white-space: nowrap; }
.est-tabela th { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); font-weight: 500; border-bottom-color: var(--borda-campo); }
.est-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.est-etiquetas { display: flex; flex-direction: column; gap: 12px; }
.est-etq { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: opacity var(--t-standard), transform var(--t-standard); }
.est-etq.salvando { opacity: 0.6; } .est-etq.saiu { opacity: 0; transform: translateX(12px); }
.est-etq-cabeca { display: flex; gap: 14px; align-items: flex-start; }
.est-etq-cabeca .est-thumb { width: 56px; }
.est-etq-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.est-etq-texto { margin: 0; font: 400 15px/1.45 var(--serif); }
.est-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.est-chip { position: relative; border: 0; box-shadow: inset 0 0 0 1px var(--borda-campo); background: transparent; color: var(--secundario); border-radius: var(--r-full); padding: 0 12px; height: 34px; font: 500 11px var(--fonte); letter-spacing: 0.04em; transition: background var(--t-micro), color var(--t-micro), box-shadow var(--t-micro); display: inline-flex; align-items: center; gap: 6px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.est-chip:hover { color: var(--texto); background: var(--camada2); }
.est-chip.sug { box-shadow: inset 0 0 0 1.5px var(--ouro); color: var(--texto); }
.est-chip.sug i { font-style: normal; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ouro-t); }
.est-chip.sel { background: var(--tinta); color: var(--tinta-ink); box-shadow: none; }
.est-chip.sel i { color: var(--tinta-ink); opacity: 0.7; }
.est-ref-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 20px 24px; }
.est-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.est-ref { background: var(--card); border-radius: 18px; box-shadow: var(--sombra-card); overflow: hidden; display: grid; grid-template-columns: 104px minmax(0, 1fr); transition: transform 0.25s var(--pop), box-shadow 0.2s var(--ease); }
.est-ref:hover { transform: translateY(-2px); box-shadow: var(--sombra-pop); }
.est-ref-capa { position: relative; display: block; background: linear-gradient(165deg, #ecdfc9, #d6bf99); min-height: 150px; }
.est-ref-capa img { width: 100%; height: 100%; object-fit: cover; }
.est-ref-sem { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro-t); }
.est-ref-views { position: absolute; left: 6px; bottom: 6px; font: 500 10px var(--fonte); padding: 2px 8px; border-radius: var(--r-full); background: rgba(253,252,248,0.92); color: #342817; }
.est-ref-corpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.est-ref-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.est-ref-linha .small { flex: 1; min-width: 0; }
.est-ref-texto { margin: 0; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.est-ref-acoes { display: flex; gap: 2px; flex-wrap: wrap; margin-top: auto; }
.est-ref-acoes .btn-fantasma { height: 30px; padding: 0 8px; font-size: 10px; }
.est-ref-acoes .icone-fantasma { width: 30px; height: 30px; margin-left: auto; }
.est-escolha { display: flex; flex-direction: column; gap: 2px; max-height: 50dvh; overflow-y: auto; }
.est-escolha-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; border: 0; background: transparent; border-radius: var(--r-control); padding: 8px 10px; color: var(--texto); font-size: 12px; transition: background var(--t-micro); }
.est-escolha-item:hover { background: var(--camada2); }
.est-escolha-flutuante { position: absolute; inset: 24px; background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sombra-modal); padding: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.est-tokens { display: flex; flex-direction: column; gap: 4px; }
.est-token { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--camada2); border-radius: var(--r-control); font-size: 12px; }
.est-token-novo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-inner); background: color-mix(in srgb, var(--ouro) 12%, transparent); }
.est-token-novo code { font-size: 12px; word-break: break-all; user-select: all; }
.est-testes { display: flex; flex-direction: column; gap: 12px; }
.est-teste { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.est-hipotese { margin: 0; font: 400 19px/1.3 var(--serif); letter-spacing: -0.01em; }
.est-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.est-lado { background: var(--camada2); border-radius: var(--r-inner); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.est-lado.venceu { box-shadow: inset 0 0 0 1.5px var(--ouro); }
.est-lado .est-post-linha { padding: 4px 0; }
.est-proximo { display: flex; flex-direction: column; gap: 6px; }
.est-form { display: flex; flex-direction: column; gap: 14px; }
.est-conta { grid-template-columns: 28px minmax(0, 1fr) auto; }
.est-conta .pessoa-acoes { grid-column: 2 / -1; flex-wrap: wrap; justify-content: flex-end; }
.est-equipe { grid-template-columns: 28px minmax(0, 0.8fr) minmax(0, 1.4fr) auto; }
.est-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; font-size: 12px; }
.est-toggle input { accent-color: var(--ouro); width: 16px; height: 16px; margin: 0; }
.est-libera { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.est-log { display: flex; flex-direction: column; gap: 2px; }
.est-log-linha { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 10px; border-radius: var(--r-control); background: var(--camada2); }
.est-log-linha.com-erro { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erro) 45%, transparent); }
.est-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--camada2); border-radius: var(--r-full); padding: 3px; }
.est-seg button { height: 28px; border: 0; background: transparent; color: var(--secundario); border-radius: var(--r-full); padding: 0 12px; font: 500 11px var(--fonte); }
.est-seg button.ativo { background: var(--card); color: var(--texto); box-shadow: 0 1px 3px rgba(52,40,23,0.12); }
.est-guia { margin: 12px 0 16px; border-radius: var(--r-inner); background: var(--camada2); }
.est-guia summary { cursor: pointer; padding: 12px 16px; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); list-style: none; transition: color var(--t-micro); }
.est-guia summary::-webkit-details-marker { display: none; }
.est-guia summary::before { content: '?'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--borda-campo); font-size: 10px; }
.est-guia summary:hover { color: var(--texto); }
.est-guia-corpo { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.est-guia-lista { margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.est-guia-lista div { min-width: 0; }
.est-guia-lista dt { font-size: 12px; font-weight: 500; color: var(--texto); }
.est-guia-lista dd { margin: 2px 0 0; font-size: 12px; color: var(--secundario); }

/* ---------- Sinapse 2.0 · bloco 1: mensagem pro cliente ---------- */
.msg-etapas { margin: 0; flex-wrap: wrap; }
.msg-dest { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--camada2); border-radius: var(--r-inner); }
.msg-dest textarea, .msg-modelo textarea { width: 100%; font: 400 13px/1.6 var(--fonte); background: var(--card); border: 1px solid var(--borda-campo); border-radius: var(--r-control); padding: 12px; resize: vertical; outline: none; transition: border-color var(--t-micro); }
.msg-dest textarea:focus, .msg-modelo textarea:focus { border-color: var(--foco); }
.msg-modelos { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.msg-modelo { display: flex; flex-direction: column; gap: 8px; }

/* ================= responsivo ================= */
/* até 1100: a lateral recolhe pra um trilho de ícones */

/* ---------- R1 · menu em grupos que abrem e fecham (D14) ---------- */
.ni.grp-on { color: var(--texto); }
.ni .seta { transition: transform 0.24s var(--ease); width: 14px; height: 14px; }
.grupo.aberto > .ni .seta { transform: rotate(180deg); }
.subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s var(--ease); }
.grupo.aberto .subs { grid-template-rows: 1fr; }
.subs > div { overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding-left: 28px; min-width: 0; }
.sub { height: 30px; border: 0; background: transparent; text-align: left; padding: 0 10px; border-radius: 8px; font: 400 12px var(--fonte); color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--t-micro), color var(--t-micro); position: relative; width: 100%; }
.sub:hover { background: var(--camada2); color: var(--texto); }
.sub.ativo { color: var(--texto); background: var(--camada3); font-weight: 500; }
.sub::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 1px; background: var(--borda-campo); }
.mais-nav { display: flex; flex-direction: column; gap: 2px; }
.mais-nav .ni { height: 42px; }
.mais-nav .sub { height: 38px; }
.mais-conta { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 8px; }

/* ---------- R1 · blocos de tela (Hoje, Aprovação, Pauta): cartão, grade, linha ---------- */
.heroi { text-align: center; max-width: 860px; margin: 8px auto 36px; }
.heroi .titulo { font-size: 48px; }
.heroi .sub-t { margin: 0 auto; }
.heroi .eyebrow { white-space: normal; }
.h2 { font: 400 22px/1.2 var(--serif); letter-spacing: -0.015em; margin: 0; }
.h3 { font: 400 17px/1.3 var(--serif); letter-spacing: -0.01em; margin: 0; }
.cartao { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: 24px; min-width: 0; }
.cartao.aninh { border-radius: var(--r-inner); background: var(--camada2); box-shadow: none; padding: 16px; }
.cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.cab > div { min-width: 0; }
.cab .label { display: block; margin-bottom: 4px; }
.g { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-l { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sec { margin-top: 24px; }
.linha { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; color: var(--texto); font: 400 13px/1.45 var(--fonte); min-width: 0; }
.linha:first-of-type { border-top: 0; }
button.linha { cursor: pointer; border-radius: 8px; transition: background var(--t-micro); }
button.linha:hover { background: var(--camada2); }
.linha .tr { min-width: 0; }
.linha .tr b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .tr .dica { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha svg.i { color: var(--secundario); }
.chip.contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--borda-campo); color: var(--texto); }
.chip.escuro { background: var(--tinta); color: var(--tinta-ink); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.numeros { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.numero { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.numero b { font: 300 34px/1 var(--serif); letter-spacing: -0.02em; font-weight: 300; }
.numero span { font: 500 10px/1.3 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); }
.vencido { color: var(--ouro-t); }

/* aprovação: fila + prévia */
.fila { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.fila-lista { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fila-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 0; background: transparent; text-align: left; width: 100%; color: var(--texto); font: 400 13px/1.4 var(--fonte); transition: background var(--t-micro); min-width: 0; }
.fila-item:hover { background: var(--camada2); }
.fila-item.ativo { background: var(--card); box-shadow: var(--sombra-card); }
.fila-item .mini { width: 44px; aspect-ratio: 4 / 5; border-radius: 8px; background: linear-gradient(165deg, #ecdfc9, #d6bf99); overflow: hidden; position: relative; }
.fila-item .mini img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fila-item .tr { min-width: 0; }
.fila-item .tr > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fila-item .tr .dica { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prev-ap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.prev-ap .quadro { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-inner); background: linear-gradient(165deg, #ecdfc9, #d6bf99); }
.prev-ap .quadro img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.prev-ap .quadro .sem-capa { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ouro-t); font: 500 10px var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; }
.opiniao { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--camada2); display: flex; flex-direction: column; gap: 4px; }
.opiniao p { margin: 0; font-size: 13px; }
.texto-c { background: var(--camada2); border-radius: 12px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; font: 400 13px/1.6 var(--fonte); }
.chip-tipo-coment { margin-left: 6px; vertical-align: middle; }

/* pauta: tabela do mês */
.rolar { overflow-x: auto; scrollbar-width: thin; }
.tabela { width: 100%; border-collapse: collapse; font: 400 12px/1.5 var(--fonte); }
.tabela th { text-align: left; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); font-size: 10px; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--borda-campo); white-space: nowrap; }
.tabela td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; white-space: nowrap; }
.tabela td.tema { white-space: normal; min-width: 220px; max-width: 420px; }
.tabela tr.click { cursor: pointer; transition: background var(--t-micro); }
.tabela tr.click:hover { background: var(--camada2); }
.tabela .mut { color: var(--sutil); }
.passos-pauta { margin-bottom: 16px; }
.passos-pauta .cartao.aninh b { display: block; margin: 4px 0; }
.frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.frm .full { grid-column: 1 / -1; }
.coment-lista { display: flex; flex-direction: column; gap: 10px; max-height: 40dvh; overflow-y: auto; }
.compor input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px solid var(--borda-campo); padding: 0 16px; font: 400 13px var(--fonte); outline: none; background: var(--card); color: var(--texto); }
.compor input:focus { border-color: var(--foco); }

/* checklist retrátil (bloco 5) */
.retratil { border-radius: var(--r-inner); background: var(--camada2); }
.retratil > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: transparent; text-align: left; color: var(--texto); min-width: 0; }
.retratil > button > span:first-of-type { min-width: 0; flex: 1; }
.retratil > button .label { display: block; }
.retratil > button .h3 { display: block; }
.retratil > button .seta { margin-left: auto; transition: transform 0.24s var(--ease); width: 14px; height: 14px; }
.retratil.aberto > button .seta { transform: rotate(180deg); }
.retratil .corpo-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.retratil.aberto .corpo-r { grid-template-rows: 1fr; }
.retratil .corpo-r > div { overflow: hidden; padding: 0 16px; }
.retratil.aberto .corpo-r > div { padding-bottom: 12px; }
.barrinha { width: 72px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 12%, transparent); overflow: hidden; flex-shrink: 0; }
.barrinha i { display: block; height: 100%; background: var(--ouro); transition: width 0.4s var(--ease); }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.check:first-child { border-top: 0; }
.caixa { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--borda-campo); background: transparent; display: grid; place-items: center; padding: 0; color: var(--tinta-ink); transition: background var(--t-micro), border-color var(--t-micro), transform 0.2s var(--pop); }
.caixa svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.5); transition: opacity var(--t-micro), transform 0.25s var(--pop); }
.caixa.on { background: var(--tinta); border-color: var(--tinta); }
.caixa.on svg { opacity: 1; transform: none; }
.caixa:active { transform: scale(0.85); }
.caixa[disabled] { opacity: 0.5; pointer-events: none; }
.check .quem { font: 400 10px var(--fonte); color: var(--secundario); white-space: nowrap; }
.check.feito .tx { color: var(--secundario); text-decoration: line-through; text-decoration-color: var(--borda-campo); }
.check .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* card do post como tela própria (R1): a mesma peça do modal, deitada na página */
#vista-post .card-modal { height: auto; max-height: none; overflow: visible; max-width: none; box-shadow: var(--sombra-card); animation: none; }
#vista-post .card-midia { position: sticky; top: calc(56px + env(safe-area-inset-top)); align-self: start; max-height: calc(100dvh - 56px - env(safe-area-inset-top)); overflow: hidden; }
#vista-post .card-corpo { overflow: visible; }
#vista-post .card-lado { min-height: 60dvh; }
.card-volta { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }

/* computador e tablet: topo e lateral parados, só a área do módulo rola */
@media (min-width: 641px) {
  .app-shell { height: 100dvh; overflow: hidden; }
  .app { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
/* semana do calendário ocupa a altura que sobra da tela, sem sobra pra rolar */
@media (min-width: 901px) {
  .conteudo { display: flex; flex-direction: column; }
  #vista-calendario:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
  #vista-calendario .cal-semana { flex: 1; }
  .cal-semana .cal-dia { min-height: 240px; }
}

@media (max-width: 1100px) {
  :root { --lateral: 64px; }
  .side { padding: 16px 12px; align-items: center; }
  .side .marca { padding: 4px 0 16px; }
  .side .marca > div, .side .nav-sep, .side .ni-txt, .side .ni .n, .side .seta, .side .subs { display: none; }
  .side .side-nav { align-items: center; }
  .side .ni { grid-template-columns: 1fr; justify-items: center; width: 40px; padding: 0; }
  .side .nav-sep + .ni, .side .ni + .nav-sep { margin-top: 10px; }
  .conteudo { padding: 24px 24px 56px; }
  .filtro-master { padding: 16px 24px 0; }
}
/* até 900: o conteúdo compacta (o JS chama isso de MOBILE: card em tela cheia, sem arrastar) */
@media (max-width: 900px) {
  .titulo { font-size: 38px; }
  .cal-semana { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; gap: 8px; scrollbar-width: none; }
  .cal-semana .cal-dia { flex: 0 0 46%; scroll-snap-align: start; border: 1px solid var(--hairline); border-radius: var(--r-inner); min-height: 380px; }
  .cal-semana .cal-dia:last-child { border-right: 1px solid var(--hairline); }
  .cal-mes .cal-dia { min-height: 72px; padding: 4px; }
  .cal-mes .cal-num { font-size: 10px; }
  .cal-mes .cal-dia.hoje .cal-num::after { display: none; }
  .cal-mais { display: none; }
  .cal-semana .cal-mais { display: flex; }
  .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .g-l, .g3, .prev-ap, .fila, .frm { grid-template-columns: minmax(0, 1fr); }
  .fila #ap-previa { display: none; }   /* no celular, tocar no post abre a prévia numa folha */
  .frm .full { grid-column: auto; }
  .heroi .titulo { font-size: 40px; }
  .numero b { font-size: 28px; }
  #vista-post .card-midia { position: static; max-height: none; }
  #vista-post .card-modal { min-height: 0; }
  .card-modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-width: none; height: auto; max-height: none; min-height: 100dvh; border-radius: 0; overflow: visible; }
  #vista-post .card-modal { border-radius: var(--r-card); overflow: hidden; }
  .card-midia { min-height: 0; padding: 16px; }
  .card-midia .quadro { max-width: 320px; }
  .card-lado { min-height: 0; }
  .card-cabeca { padding: 16px 16px 0; }
  .card-titulo-linha, .abas, .passos { padding-left: 16px; padding-right: 16px; }
  .card-titulo { font-size: 26px; }
  /* rodapé de ações preso no pé da tela; o corpo reserva a altura dele (medida no JS) pra nada ficar escondido */
  .card-corpo { overflow: visible; padding: 16px 16px calc(24px + var(--rodape-h, 0px)); }
  .card-rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(52,40,23,0.06); }
  .card-rodape .acoes-aprovacao .btn-primario, .card-rodape .acoes-aprovacao .btn-secundario { flex: 1; }
  .importar-item { grid-template-columns: 48px minmax(0, 1fr); }
  .previa-item { grid-template-columns: 24px minmax(0, 1fr); }
  .previa-item .mudanca { grid-column: 2; }
  .capa-linha { flex-direction: column; }
  .config-grade { grid-template-columns: minmax(0, 1fr); }
  .config-lista { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: var(--r-inner); }
  .config-item { width: auto; flex-shrink: 0; max-width: 240px; }
  .config-lista { flex-direction: column; overflow: visible; }   /* lista em linhas, como no Painel: cada cliente com desativar e apagar */
  .cf-linha .config-item { width: auto; max-width: none; flex: 1 1 auto; min-width: 0; }
  .config-bloco { padding: 20px 16px; }
  .pessoa { grid-template-columns: 28px minmax(0, 1fr); }
  .pessoa-papel { grid-column: 1 / -1; }
  .pessoa-acoes { grid-column: 1 / -1; }
  .config-bloco-cabeca { flex-wrap: wrap; }
  .est-grid2, .est-hero, .est-tiles-config, .est-lados { grid-template-columns: minmax(0, 1fr); }
  .est-card, .est-hero, .est-etq, .est-teste { padding: 16px; }
  .est-padroes { --rot: 110px; --val: 120px; }
  .est-barra-linha { grid-template-columns: 96px minmax(0, 1fr) max-content; }
  .est-ref { grid-template-columns: 88px minmax(0, 1fr); }
  .est-conta, .est-equipe { grid-template-columns: 28px minmax(0, 1fr); }
  .est-conta .est-toggle, .est-conta .pessoa-acoes, .est-equipe .est-libera, .est-equipe .pessoa-acoes { grid-column: 1 / -1; }
  .est-display { font-size: 32px; }
}
/* até 640: celular. Sem lateral; topo só com o título e o avatar (D13); barra de baixo; modal vira folha */
@media (max-width: 640px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .side, .so-desk { display: none !important; }
  .so-cel { display: initial; }
  .so-cel-flex { display: flex; }
  .topo { height: 52px; padding: 0 12px 0 16px; padding-top: env(safe-area-inset-top); }
  .crumb { font-size: 12px; letter-spacing: 0.06em; }
  .conteudo { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }
  .filtro-master { padding: 14px 16px 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .titulo { font-size: 34px; }
  .heroi { margin-bottom: 28px; }
  .heroi .titulo { font-size: 38px; }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: 18px; border-radius: 20px; }
  .tabela td.tema { min-width: 180px; }
  .entrada-caixa { padding: 24px 20px; }
  .entrada-caixa .titulo { font-size: 32px; }
  .cabeca-tela { margin-bottom: 16px; }
  .cal-ctrl { width: 100%; }
  .cal-semana .cal-dia { flex: 0 0 80%; }
  .cal-mes .cal-dia { min-height: 56px; }
  .cal-mes .chip-cont { padding: 3px; justify-content: center; width: auto; }
  .cal-mes .chip-cont .titulo-c, .cal-mes .chip-cont .pip-c { display: none; }
  .cal-mes .chips { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .placar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
  .placar-item { flex: 0 0 auto; height: 40px; padding: 0 12px 0 10px; }
  .placar-num { font-size: 17px; }
  .feed-moldura { max-width: none; border-radius: 20px; padding: 8px; }
  .grade { border-radius: 12px; }
  .feed-acoes { width: 100%; }
  .feed-acoes select { flex: 1 1 100%; max-width: none; }
  .celula .cel-diverge { font-size: 8px; padding: 2px 5px; left: 4px; bottom: 4px; }
  .grade-2.empilha { grid-template-columns: minmax(0, 1fr); }
  .entrada-texto, .campo :where(input:not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"])), .campo select, .campo textarea, .compor textarea, .msg-dest textarea, .msg-modelo textarea { font-size: 16px; }
  .bnav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(68px + env(safe-area-inset-bottom)); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); }
  .bnav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 9px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); min-width: 0; position: relative; padding: 0; }
  .bnav button svg { width: 20px; height: 20px; stroke-width: 1.8; }
  .bnav button.ativo { color: var(--texto); }
  .bnav .mais-c { width: 48px; height: 48px; border-radius: 999px; background: var(--tinta); color: var(--tinta-ink); align-self: center; justify-self: center; transition: transform 0.25s var(--pop); }
  .bnav .mais-c:active { transform: scale(0.9); }
  .bnav .sino-contador { top: -2px; right: calc(50% - 22px); }
  /* modal: folha que sobe de baixo; puxar a alça pra baixo fecha (mola) */
  .camada { padding: 0; place-items: end stretch; overflow: hidden; }
  .modal { max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-top)); gap: 16px; will-change: transform; }
  .modal.entra { animation: folha-sobe 0.36s var(--pop); }
  @keyframes folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
  .modal .alca { display: block; }
  .card-modal { min-height: 100dvh; }
  .card-rodape { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .passo { font-size: 8px; letter-spacing: 0.02em; }
  .passos { gap: 4px; }
  .popover { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; left: 16px; width: auto; transform-origin: bottom center; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .modal-rodape .btn-primario, .modal-rodape .btn-secundario { flex: 1 1 auto; }
}

/* ---------- R2 · Stories e Rotinas (public/operacao.js; wireframe v4, telas2.js) ---------- */
.op-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.seq { --n: 6; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.slot { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; border: 1px dashed var(--borda-campo); display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; gap: 4px; font: 500 9px/1.3 var(--fonte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); background: var(--card); min-width: 0; text-align: left; touch-action: none; user-select: none; -webkit-user-select: none; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); will-change: transform; }
.slot > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .v { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; opacity: 0; transform: scale(0.5); transition: opacity var(--t-micro), transform 0.25s var(--pop); }
.slot.ok { border-style: solid; border-color: transparent; background: linear-gradient(180deg, #eadbc3, #d9c19c); color: #342817; }
.slot.ok .v { opacity: 1; transform: none; color: #342817; }
.slot.pega, .lug.pega { z-index: 5; box-shadow: var(--sombra-card); cursor: grabbing; }
.slot.alvo { border-color: var(--tinta); }
.slot.solta, .lug.solta { animation: solta 0.6s var(--pop); }
.lug.alvo { box-shadow: inset 0 0 0 1px var(--tinta); }
.anel { width: 120px; height: 120px; display: block; margin: 12px auto; }
.anel circle { fill: none; stroke-width: 8; }
.anel .tri { stroke: var(--camada2); }
.anel .val { stroke: var(--ouro); stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease); }
.op-num { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 6px; }
.op-num .num { font: 500 40px/1 var(--fonte); letter-spacing: -0.03em; }
.op-num small { font: 400 18px var(--fonte); color: var(--secundario); }
.edita { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 0; background: transparent; color: var(--secundario); margin-left: 4px; padding: 0; align-self: center; transition: background var(--t-micro), color var(--t-micro); }
.edita:hover { background: var(--camada2); color: var(--texto); }
.edita svg { width: 13px; height: 13px; }
.op-placar { align-self: start; }
.op-placar [data-st-falta] { margin-bottom: 12px; }
.op-placar .linha { grid-template-columns: 20px minmax(0, 1fr) auto; }
.op-placar .linha .num, .op-tv .num { font-size: 11px; white-space: nowrap; }
.chip-tk { cursor: pointer; }
.lugares { display: flex; flex-direction: column; gap: 8px; }
.lug { display: grid; grid-template-columns: 24px 20px minmax(0, 1fr) 36px; gap: 8px; align-items: center; background: var(--card); border-radius: 10px; padding: 2px 0; will-change: transform; }
.lug.sem-alca { grid-template-columns: 20px minmax(0, 1fr) 36px; will-change: auto; }
.lug input { height: 36px; border-radius: 10px; border: 1px solid var(--borda-campo); padding: 0 10px; font: 400 12px var(--fonte); min-width: 0; outline: none; background: var(--card); color: var(--texto); }
.lug input:focus { border-color: var(--foco); }
.alca-r { cursor: grab; color: var(--secundario); display: grid; place-items: center; touch-action: none; height: 36px; }
.alca-r svg { width: 16px; height: 16px; }
.op-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.op-abas button { height: 40px; padding: 0 14px; border: 0; background: transparent; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-micro), border-color 0.2s var(--ease); }
.op-abas button.ativo { color: var(--texto); border-color: var(--tinta); }
.op-abas .num { font-size: 10px; color: var(--sutil); margin-left: 2px; }
.op-tv { grid-template-columns: 20px minmax(0, 1fr) auto auto; }
.op-tv-t { border: 0; background: transparent; padding: 0; text-align: left; color: var(--texto); font: inherit; cursor: pointer; }
.op-tv-t:hover b { text-decoration: underline; text-decoration-color: var(--borda-campo); }
.op-trava { max-width: 220px; }
.op-trava > span { overflow: hidden; text-overflow: ellipsis; }
.op-setas { gap: 2px; flex-wrap: nowrap; }
.op-setas .ic { width: 32px; height: 32px; }
.op-setas .ic svg { width: 16px; height: 16px; }
.op-setas .ic[disabled] { opacity: 0.3; }
.op-mes button { padding: 0 10px; display: inline-flex; align-items: center; }
.op-mes button svg { width: 14px; height: 14px; }
.op-data { grid-template-columns: 56px minmax(0, 1fr) auto; }
.op-data > .num { font-size: 13px; font-weight: 500; }
.op-data.passou { opacity: 0.6; }
.op-data .avatar, .op-push .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--camada3); display: grid; place-items: center; font: 500 10px var(--fonte); color: var(--texto); flex-shrink: 0; }
.regras { display: flex; flex-direction: column; }
.regra { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.regra:first-child { border-top: 0; }
.regra .tr { min-width: 0; flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.regra .tr b { font-weight: 500; font-size: 13px; }
.regra-num { display: inline-flex; align-items: center; gap: 8px; }
.regra-num input { width: 64px; height: 36px; border-radius: 10px; border: 1px solid var(--borda-campo); padding: 0 10px; font: 500 13px var(--fonte); font-variant-numeric: tabular-nums; background: var(--card); color: var(--texto); outline: none; }
.regra-num input:focus { border-color: var(--foco); }
.op-push { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.op-push > .dica { margin: 4px 0; }
.op-prefs .linha-opcao { padding: 6px 0; }
.op-prefs .tx { font: 400 12px/1.4 var(--fonte); min-width: 0; }
.op-prefs .interruptor { gap: 0; }
@media (max-width: 900px) {
  .op-trava { max-width: 140px; }
}
@media (max-width: 640px) {
  .seq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-num .num { font-size: 34px; }
  .regra-num input { font-size: 16px; }
  .lug input { font-size: 16px; }
  .op-tv { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .op-tv .op-setas { grid-column: 2 / -1; justify-self: end; margin-top: -6px; }
}

/* ---------- R3 · Grupo VIP, assinatura e primeiro acesso (public/vip.js; wireframe telas2.js, telas3.js, estilo.css) ---------- */
:root { --assina: "Assinatura", "Snell Roundhand", cursive; }   /* a fonte entra pelo vip.js (FontFace), só quando aparece */
.cab-c { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cab-c > div { min-width: 0; }
.cab-c .h3 { margin-top: 2px; }
.vip-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.vip-g.so-um { grid-template-columns: minmax(0, 720px); }
.vip-tema { font: 400 17px/1.35 var(--serif); margin: 0 0 6px; overflow-wrap: anywhere; }
.vip-aviso { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; }
.vip-aviso svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--ouro-t); }
.vip-avisos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vip-avisos .chip svg { width: 12px; height: 12px; }
.lint { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lint div { display: flex; gap: 8px; align-items: center; font: 400 11px var(--fonte); color: var(--secundario); }
.lint svg { width: 14px; height: 14px; color: var(--ouro-t); flex-shrink: 0; }
.wpp { background: color-mix(in srgb, var(--ouro) 16%, var(--camada2)); border-radius: var(--r-inner); padding: 16px; min-height: 200px; }
.wpp .bal { background: var(--card); border-radius: 12px 12px 12px 4px; padding: 12px 14px; box-shadow: 0 1px 1px rgba(0,0,0,.06); display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.55 var(--fonte); color: var(--texto); }
.wpp .bal b { font-weight: 500; }
.wpp .bal.vazia { color: var(--sutil); }
.cursor::after { content: "▍"; animation: pisca 1s steps(1) infinite; color: var(--ouro); }
@keyframes pisca { 50% { opacity: 0; } }
.braille { display: inline-grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(3, 4px); gap: 2px; vertical-align: middle; }
.braille[hidden] { display: none; }
.braille i { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: .18; transform: scale(.6); transition: opacity .1s var(--ease), transform .14s var(--pop); }
.braille i.on { opacity: 1; transform: none; }
.vip-opinioes { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.vip-pauta .vip-linha.ativo { background: var(--camada2); }
.vip-pauta .vip-linha { padding-left: 8px; padding-right: 8px; }
.vip-pauta .vip-linha .tr b { font-weight: 400; }
.vip-tambem { margin-top: 16px; background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sombra-card); padding: 14px 16px; }
.vip-tambem svg.i { color: var(--ouro-t); }
.vip-bib td.n, .vip-bib th.n { text-align: right; }
.vip-ver { border: 0; background: transparent; padding: 0; font: inherit; color: var(--texto); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--borda-campo); text-underline-offset: 3px; }
.vip-views { border: 0; background: var(--camada2); border-radius: var(--r-tag); padding: 4px 10px; font: 500 12px var(--fonte); font-variant-numeric: tabular-nums; color: var(--texto); cursor: pointer; min-width: 56px; text-align: right; }
.vip-views-in { width: 88px; height: 32px; border-radius: var(--r-control); border: 1px solid var(--foco); padding: 0 8px; font: 500 13px var(--fonte); text-align: right; background: var(--card); color: var(--texto); }
.ia-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ia-num > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ia-num .num { font-size: 22px; }
.ia-num .ia-modelo { font-size: 13px; overflow-wrap: anywhere; }
.ia-barra { width: 100%; height: 6px; }
.ia-cab { flex-wrap: wrap; }
.ia-teto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ia-teto input { width: 88px; height: 36px; border-radius: 10px; border: 1px solid var(--borda-campo); padding: 0 10px; font: 500 13px var(--fonte); font-variant-numeric: tabular-nums; background: var(--card); color: var(--texto); outline: none; }
.ia-teto input:focus { border-color: var(--foco); }
/* assinatura: traço pathLength=1 em 1,4 s + tinta 0,5 s; a escrita revela o texto com um clipPath (estilo.css do wireframe) */
.assinatura-v { position: relative; height: 96px; border-radius: 14px; background: var(--camada2); display: grid; place-items: center; overflow: hidden; }
.assinatura-v > svg { width: 100%; height: 100%; }
.assinatura-v .linha-a { stroke: var(--borda-campo); stroke-width: 1; }
.assinatura-v text { font-family: var(--assina); stroke: var(--texto); stroke-width: .9; stroke-dasharray: 900; stroke-dashoffset: 0; fill: var(--texto); }
.assinatura-v path.des { fill: none; stroke: var(--texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.assinatura-v .rev { transform-box: fill-box; transform-origin: left center; }
.assinatura-v.escreve text { stroke-dashoffset: 900; fill: transparent; animation: tinta 1.4s cubic-bezier(.45,0,.3,1) forwards, enche .5s var(--ease) 1.15s forwards; }
.assinatura-v.escreve .rev { transform: scaleX(0); animation: revela 1.35s cubic-bezier(.45,0,.3,1) forwards; }
.assinatura-v.escreve path.des { stroke-dashoffset: 1; animation: tinta2 1.4s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes tinta { to { stroke-dashoffset: 0; } }
@keyframes tinta2 { to { stroke-dashoffset: 0; } }
@keyframes enche { to { fill: var(--texto); } }
@keyframes revela { to { transform: scaleX(1); } }
.assinatura-v.vazia { border: 1px dashed var(--borda-campo); background: transparent; }
.assinatura-v.pad { height: 150px; touch-action: none; cursor: crosshair; margin-top: 6px; }
.assinatura-v.pad path.des { stroke-dasharray: none; }
.as-prev { margin-top: 12px; }
.as-prev:empty { display: none; }
.carimbo { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 10px/1.3 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-t); transition: opacity .3s var(--ease); min-width: 0; }
.carimbo span { min-width: 0; overflow-wrap: anywhere; }
.carimbo.espera { opacity: 0; }
.vip-carimbo { margin-top: 16px; }
.vip-carimbo .assinatura-v { height: 72px; }
/* primeiro acesso */
.onb { max-width: 720px; margin: 0 auto; }
.onb-passo { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hairline); }
.onb-passo:first-child { border-top: 0; }
.onb-n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--camada3); font: 500 11px var(--fonte); }
.onb-n svg { width: 14px; height: 14px; }
.onb-n.ok { background: var(--ouro); color: var(--fundo); }
.onb-pe { justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--hairline); }
.onb-pe [hidden] { display: none; }
@media (max-width: 900px) {
  .vip-g, .vip-g.so-um { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ia-num { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vip-views-in, .ia-teto input { font-size: 16px; }
  .onb-pe { justify-content: stretch; }
  .onb-pe > button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .assinatura-v.escreve text { stroke-dashoffset: 0; fill: var(--texto); }
  .assinatura-v.escreve .rev { transform: none; }
  .assinatura-v.escreve path.des { stroke-dashoffset: 0; }
  .carimbo.espera { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- R4 · Metas (wireframe TELAS.metas + ACT['metas-config']; gráfico de leads = cópia de repo-painel-empire/src/index.css:438, D21) ---------- */
.metas-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.heroi .eyebrow i { font-style: italic; }
.metas-obj { border-left: 2px solid var(--ouro); padding-left: 16px; margin-bottom: 12px; }
.metas-obj .label { display: block; margin-bottom: 4px; }
.vazio-metas { grid-column: 1 / -1; }
/* kpiV1 do wireframe: nome · barra · origem | hoje | meta */
.kpi1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hairline); }
.kpi1:first-child, .metas-obj + .kpi1, .cab + .kpi1, .h3 + .kpi1 { border-top: 0; }
.kpi1-t { min-width: 0; }
.kpi1-t b { display: block; font-weight: 500; font-size: 13px; line-height: 1.4; }
.kpi1 .trilha { position: relative; margin-top: 8px; height: 8px; border-radius: var(--r-full); background: var(--camada2); overflow: hidden; }
.kpi1 .trilha i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--tinta) 60%, transparent); transition: width 0.6s var(--ease); }
.kpi1 .trilha i.ouro { background: var(--ouro); }
.kpi1-origem { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; color: var(--secundario); }
.kpi1-v { display: grid; grid-template-columns: 96px 112px; gap: 16px; align-items: center; }
.kpi1 .v { font: 500 13px var(--fonte); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi1 .v.mut { color: var(--secundario); }
.metas-tiles { margin-top: 4px; }
.metas-calma { padding: 14px 16px; border-radius: var(--r-inner); background: var(--camada2); }
.metas-painel-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.metas-painel-bloco { min-width: 0; }
.metas-painel-bloco .label { display: block; margin-bottom: 4px; }
.metas-painel-bloco .h3 { margin-bottom: 4px; }
.metas-painel-bloco .linha:first-of-type { border-top: 0; }
.metas-emoji { font-size: 16px; line-height: 1; text-align: center; }
.metas-evento { grid-template-columns: 44px minmax(0, 1fr) auto; }
.metas-data { font-size: 11px; color: var(--secundario); }
.metas-dica { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hairline); }
/* BarrasDia (Painel do Empire): barra por dia com topo redondo, cinza e pico dourado, dia futuro a 35 %, cartão no mouse */
.graf-cols { position: relative; display: flex; align-items: stretch; margin-top: 14px; }
.graf-cols .c { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.graf-cols .area { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.graf-cols .area i { display: block; width: 100%; max-width: 26px; border-radius: 999px 999px 4px 4px; }
.graf-cols .cur { position: relative; z-index: 1; background: color-mix(in srgb, var(--tinta) 10%, transparent); transition: background 120ms var(--ease); }
.graf-cols .c[data-pico="true"] .cur { background: var(--ouro); }
.graf-cols .c[data-futuro="true"] .cur { opacity: 0.35; }
.graf-cols .c[data-ativo="true"] .cur { background: var(--ouro-t); }
.graf-cols .eixo { position: relative; height: 14px; font-size: 10px; line-height: 14px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.graf-cols .eixo b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; font-weight: inherit; }
.graf-cols .c[data-pico="true"] .eixo { color: var(--ouro-t); font-weight: 500; }
.graf-tip { position: absolute; left: 0; top: 0; z-index: 3; min-width: 230px; max-width: min(320px, 100%); padding: 12px 14px; pointer-events: none; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--sombra-pop); font-size: 13px; font-weight: 400; opacity: 0; will-change: transform; transition: transform 100ms var(--ease), opacity 120ms; }
.graf-tip[data-on="true"] { opacity: 1; }
.graf-tip .d { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.graf-tip .l { display: flex; align-items: center; gap: 8px; padding: 3px 0; white-space: nowrap; }
.graf-tip .l i { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--ouro); }
.graf-tip .l .n { margin-left: auto; padding-left: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.graf-tip .e { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); color: var(--ouro-t); white-space: normal; }
/* Hoje: metas em 3 números */
.hoje-metas-cab { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -4px; }
.hoje-meta .label { display: block; margin-bottom: 8px; }
.hoje-meta .numero { margin-bottom: 10px; }
.hoje-meta-barra { width: 100%; margin-bottom: 8px; }
/* Configurar metas (só master) */
.modal-larga { max-width: 820px; }
.metas-cfg { display: flex; flex-direction: column; gap: 14px; }
.metas-cfg-obj { display: flex; flex-direction: column; gap: 10px; }
.metas-cfg-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; }
.metas-cfg-kpi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.7fr) 84px 84px 60px auto; gap: 8px; align-items: end; padding-top: 10px; border-top: 1px solid var(--hairline); }
.metas-cfg-fim { display: flex; align-items: center; gap: 4px; height: 40px; }
.metas-cfg-fim .chip { height: 32px; cursor: pointer; }
.metas-cfg-fim .chip svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .metas-painel-g { grid-template-columns: minmax(0, 1fr); }
  .metas-cfg-kpi { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 76px 76px 56px auto; }
}
@media (max-width: 640px) {
  .kpi1 { gap: 12px; }
  .kpi1-v { grid-template-columns: auto; gap: 2px; justify-items: end; }
  .metas-cfg-cab, .metas-cfg-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metas-cfg-fim { justify-content: flex-end; }
}

/* ---------- R5 · Pesquisa (wireframe telas3.js: concorrentes, referências, nós × eles) ---------- */
.pq-acts { display: flex; justify-content: flex-start; margin: 0 0 16px; }
.pq-lapis { vertical-align: middle; width: 32px; height: 32px; }
.pq-lapis svg { width: 16px; height: 16px; }
.pq-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pq-cab-c { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pq-tit { margin: 0; flex: 1 1 320px; min-width: 0; }
.pq-acts-d { display: flex; gap: 8px; flex-wrap: wrap; }
.pq-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.pq-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pq-mt { margin-top: 6px; }
.pq-sub { display: block; margin: 20px 0 8px; }
.cartao > .pq-sub:first-child { margin-top: 0; }
.pq-tab td.dest { color: var(--ouro-t); font-weight: 500; }
.pq-tab th.n, .pq-tab td.n { text-align: right; }
.pq-barras { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pq-barra { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 72px; gap: 12px; align-items: center; }
.pq-barra .tr { font: 400 12px var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-barra .v { font: 500 12px var(--fonte); text-align: right; white-space: nowrap; }
.pq-barras .trilha, .pq-cmp .trilha { position: relative; height: 10px; border-radius: var(--r-full); background: var(--camada2); overflow: hidden; }
.pq-barras .trilha i, .pq-cmp .trilha i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--tinta) 60%, transparent); transition: width 0.6s var(--ease); }
.pq-barras .trilha i.ouro, .pq-cmp .trilha i.ouro { background: var(--ouro); }
.pq-conc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pq-conc-c { border-radius: 18px; background: var(--card); box-shadow: var(--sombra-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 0; text-align: left; width: 100%; min-width: 0; color: var(--texto); transition: transform 0.25s var(--pop), box-shadow 0.2s var(--ease); }
.pq-conc-c:hover { transform: translateY(-2px); box-shadow: var(--sombra-pop); }
.pq-conc-c .h3 { overflow-wrap: anywhere; }
.pq-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pq-g4 .cartao { padding: 14px; }
.pq-g4 .num { display: block; font-size: 22px; margin-top: 4px; }
.pq-mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pq-mural-r { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pq-ref { background: var(--card); border-radius: 18px; box-shadow: var(--sombra-card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; color: var(--texto); text-decoration: none; transition: transform 0.25s var(--pop), box-shadow 0.2s var(--ease); }
.pq-ref:hover { transform: translateY(-2px); box-shadow: var(--sombra-pop); }
.pq-ref .capa-r { display: block; aspect-ratio: 4 / 5; background: linear-gradient(165deg, var(--camada2), var(--ouro-hover)); position: relative; overflow: hidden; }
.pq-ref .capa-r img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-ref .capa-r .chip { position: absolute; top: 10px; left: 10px; }
.pq-ref .capa-r .vw { position: absolute; bottom: 10px; left: 10px; font: 500 11px var(--fonte); color: #fdfcf8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.pq-ref .cr { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pq-ref .cr .tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-nota { overflow-wrap: anywhere; }
.pq-acts-r { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pq-acts-r .btn-fantasma, .pq-acts-r .btn-secundario { max-width: 100%; white-space: normal; height: auto; min-height: 32px; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.pq-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 16px; }
.pq-filtros .campo { margin: 0; }
.pq-o { width: 200px; max-width: 100%; }
.pq-q { flex: 1; min-width: 160px; }
.pq-calor { display: grid; gap: 3px; font: 400 9px var(--fonte); color: var(--secundario); }
.pq-calor .h { text-align: center; }
.pq-calor .rot { display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.pq-calor .q { height: clamp(14px, 3.4vw, 24px); border-radius: 4px; background: color-mix(in srgb, var(--ouro) calc(var(--a) * 100%), transparent); }
.pq-st { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline); min-width: 0; }
.pq-st svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--secundario); }
.pq-st .tr { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.pq-frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.pq-full { grid-column: 1 / -1; }
.pq-pe { flex-wrap: wrap; }
.pq-esc { display: flex; flex-direction: column; gap: 4px; max-height: 50dvh; overflow-y: auto; }
.pq-esc-i { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: 10px; color: var(--texto); min-width: 0; }
.pq-esc-i:hover { background: var(--camada2); }
.pq-esc-i .tr { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-nosso { box-shadow: inset 0 0 0 1.5px var(--ouro); }
.pq-cmp { display: flex; flex-direction: column; }
.pq-cmp-l { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); }
.pq-cmp-l.cab-l { border-top: 0; padding-top: 0; }
.pq-cmp-v { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pq-j { display: block; margin: 6px 0; }
.pq-vs-cab { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); }
.pq-vs-cab span:first-child { text-align: right; }
.pq-vs-cab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-vs { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); font: 400 12px var(--fonte); }
.pq-vs > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pq-vs .l { align-items: flex-end; }
.pq-vs .meio { text-align: center; font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); }
.pq-vs .bl { height: 8px; border-radius: var(--r-full); background: var(--ouro); }
.pq-vs .br { height: 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--tinta) 45%, transparent); }
.pq-linha { width: 100%; height: auto; display: block; overflow: visible; }
.pq-linha polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pq-linha .a { stroke: var(--ouro); }
.pq-linha .b { stroke: color-mix(in srgb, var(--tinta) 45%, transparent); stroke-dasharray: 4 4; }
.pq-linha text { font: 400 9px var(--fonte); fill: var(--secundario); }
.pq-leg { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pq-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.pq-leg i.a { background: var(--ouro); }
.pq-leg i.b { background: color-mix(in srgb, var(--tinta) 45%, transparent); margin-left: 10px; }
/* concorrentes: as pílulas de quem entra na comparação respiram do subtítulo e entre si */
.sub-t + .pq-acts, .sub-t + .pq-cab { margin-top: 24px; }
.pq-cab .pq-chips { gap: 8px; align-items: center; }
.pq-cab .pq-chips .chip { height: 34px; padding: 0 16px; font-size: 11px; gap: 8px; }
.pq-cab .pq-chips .chip svg { width: 14px; height: 14px; }
.pq-cab .pq-chips .chip.contorno:hover { background: var(--camada2); }
.pq-conc-c .pq-chips { margin-top: 2px; }
/* referências: capa com formato e status por cima, origem, texto, classificação e a ação do momento */
.pq-ref-r .capa-r { color: #fdfcf8; }
.pq-ref-r .capa-r img { position: absolute; inset: 0; }
.pq-sem-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; color: var(--ouro-t); }
.pq-sem-capa svg { width: 28px; height: 28px; opacity: 0.7; }
.pq-sem-capa b { font: 400 16px/1.25 var(--serif); color: var(--texto); overflow-wrap: anywhere; }
.pq-ref-r .capa-r:has(img)::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(20, 14, 6, 0.55), transparent); pointer-events: none; }
.pq-ref-topo { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; z-index: 1; }
.pq-ref-r .capa-r .pq-ref-topo .chip { position: static; }
.pq-ref-topo .chip { height: 22px; padding: 0 8px; font-size: 9.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pq-ref-topo .chip svg { width: 11px; height: 11px; }
.pq-vidro { background: rgba(253, 252, 248, 0.88); color: #342817; }
.pq-st-achada { background: rgba(253, 252, 248, 0.88); color: #342817; }
.pq-st-aplicada { background: var(--ouro); color: #fdfcf8; }
.pq-st-resultado { background: var(--ok); color: #fdfcf8; }
.pq-ref-r .capa-r .vw { z-index: 1; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pq-ref-r .vw svg { width: 13px; height: 13px; margin-left: 4px; }
.pq-ref-r .vw svg:first-child { margin-left: 0; }
.pq-ref-r .vw .ext { margin-left: auto; opacity: 0; transition: opacity var(--t-micro); }
.pq-ref-r .capa-r:hover .vw .ext { opacity: 1; }
.pq-ref-r .cr { padding: 14px; gap: 10px; flex: 1; }
.pq-orig { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.pq-orig b { font: 500 12px var(--fonte); letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-orig .dica { font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.pq-ref-r .pq-nota { font: 400 13px/1.5 var(--fonte); color: var(--texto); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pq-tags .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-ouro { --c: var(--ouro); }
.chip-nicho { background: var(--tinta); color: var(--tinta-ink); text-transform: none; letter-spacing: 0; font-size: 11px; }
.pq-tag-ed { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--secundario); font: 500 10px/1 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--borda-campo); transition: color var(--t-micro), box-shadow var(--t-micro); }
.pq-tag-ed svg { width: 12px; height: 12px; }
.pq-tag-ed:hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--tinta); }
.pq-tag-ed.so-ic { width: 24px; padding: 0; justify-content: center; }
.pq-ligado { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; border-top: 1px solid var(--hairline); padding-top: 10px; }
.pq-ligado-c { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; min-height: 28px; border: 0; background: transparent; padding: 0; color: var(--texto); font: 400 12px var(--fonte); text-align: left; }
.pq-ligado-c svg { width: 14px; height: 14px; color: var(--ouro-t); flex-shrink: 0; }
.pq-ligado-c .tr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.pq-ligado-c:hover .tr { text-decoration-color: currentColor; }
.pq-ligado-c .dica { flex-shrink: 0; }
.pq-ligado-a { display: flex; flex-wrap: wrap; gap: 2px; margin-left: 16px; min-width: 0; }
.pq-ligado-a .pq-trocar { padding: 4px 6px 4px 6px; }
.pq-trocar { border: 0; background: transparent; color: var(--secundario); font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; }
.pq-trocar:hover { color: var(--texto); background: var(--camada2); }
.pq-acao { width: 100%; margin-top: auto; }
.pq-lixo { margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secundario); display: grid; place-items: center; padding: 0; opacity: 0.55; transition: opacity var(--t-micro), color var(--t-micro), background var(--t-micro); }
.pq-lixo svg { width: 14px; height: 14px; }
.pq-ref-r:hover .pq-lixo, .pq-lixo:focus-visible { opacity: 1; }
.pq-lixo:hover { color: var(--erro-pin); background: color-mix(in srgb, var(--erro-pin) 10%, transparent); }
.pq-orig { align-items: center; }
.pq-sel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--borda-campo); background: var(--card); color: var(--texto); font: 400 13px var(--fonte); text-align: left; transition: border-color var(--t-micro); }
.pq-sel-btn:hover { border-color: var(--tinta); }
.pq-sel-btn .tr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-sel-btn svg { width: 14px; height: 14px; color: var(--secundario); flex-shrink: 0; }
.pq-perigo { background: var(--erro-pin); border-color: var(--erro-pin); }
.pq-perigo:hover { background: color-mix(in srgb, var(--erro-pin) 85%, black); border-color: transparent; }
/* classificar: pílulas e níveis no lugar da lista nativa */
.pq-cl { display: flex; flex-direction: column; gap: 10px; }
.pq-cl-g { display: flex; flex-wrap: wrap; gap: 8px; }
.pq-cl-g .chip { height: 32px; padding: 0 14px; font-size: 10.5px; }
.pq-cl-g .chip[aria-pressed="true"] { background: var(--tinta); color: var(--tinta-ink); box-shadow: none; }
.pq-cl-sug { margin-top: -4px; }
.pq-cl-sug .chip { height: 28px; padding: 0 12px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.pq-cl-n { display: flex; flex-direction: column; gap: 6px; }
.pq-cl-n button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: var(--r-control); background: var(--camada2); color: var(--texto); font: 400 13px var(--fonte); text-align: left; transition: background var(--t-micro), box-shadow var(--t-micro); }
.pq-cl-n button:hover { box-shadow: inset 0 0 0 1px var(--borda-campo); }
.pq-cl-n b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--card); font: 500 12px var(--fonte); }
.pq-cl-n button[aria-pressed="true"] { background: color-mix(in srgb, var(--ouro) 16%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--ouro); }
.pq-cl-n button[aria-pressed="true"] b { background: var(--ouro); color: #fdfcf8; }
/* card do post: referências da Pesquisa ligadas a ele */
.pq-card-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pq-card-ref { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--camada2); min-width: 0; }
.pq-card-ref .mini { position: relative; width: 48px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(165deg, var(--camada3), var(--ouro-hover)); color: var(--ouro-t); }
.pq-card-ref .mini svg { width: 16px; height: 16px; }
.pq-card-ref .mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pq-card-ref .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pq-card-ref .tx .tr { font: 500 12px var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-card-ref .nt { font: 400 12px/1.45 var(--fonte); color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pq-card-ref .ac { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pq-card-ref .ac .ic { width: 32px; height: 32px; }
.pq-card-ref .ac .ic svg { width: 14px; height: 14px; }
/* "usar num card": calendário do cliente no popup */
.modal.pq-cal-modal { max-width: 1040px; }
.pq-cal-ctrl { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.pq-cal-mes { font: 400 20px var(--serif); text-transform: capitalize; min-width: 170px; text-align: center; }
.pq-cal-ctrl .btn-fantasma { margin-left: auto; height: 32px; }
.pq-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-inner); overflow: hidden; }
.pq-cal-dow { font: 500 10px var(--fonte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--secundario); text-align: center; padding: 6px 0; background: var(--camada2); }
.pq-cal-d { position: relative; background: var(--card); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pq-cal-d.fora { background: var(--fundo); }
.pq-cal-d.fora > :not(.pq-cal-mais) { opacity: 0.45; }
.pq-cal-d .n { font: 500 10px var(--fonte); color: var(--secundario); height: 22px; display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.pq-cal-d .n .dw { display: none; }
.pq-cal-d.hoje .n { color: var(--ouro-t); }
.pq-cal-d.hoje .n::after { content: 'hoje'; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.pq-cal-mais { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--card); color: var(--secundario); box-shadow: inset 0 0 0 1px var(--hairline); opacity: 0.6; transition: opacity var(--t-micro), color var(--t-micro), box-shadow var(--t-micro); }
.pq-cal-mais svg { width: 12px; height: 12px; }
.pq-cal-d:hover .pq-cal-mais, .pq-cal-mais:focus-visible { opacity: 1; color: var(--texto); }
.pq-cal-mais:hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--tinta); }
.pq-cal-c { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 4px; border: 0; border-radius: 8px; background: var(--fundo); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--texto); text-align: left; transition: box-shadow var(--t-micro), transform 120ms var(--ease); }
.pq-cal-c:hover { box-shadow: inset 0 0 0 1.5px var(--ouro); }
.pq-cal-c:active { transform: scale(0.98); }
.pq-cal-c.atual { box-shadow: inset 0 0 0 1.5px var(--ouro); background: color-mix(in srgb, var(--ouro) 10%, var(--card)); }
.pq-cal-c .mini { width: 28px; height: 35px; border-radius: 5px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: var(--camada2); color: var(--secundario); }
.pq-cal-c .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-cal-c .mini svg { width: 13px; height: 13px; }
.pq-cal-c .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pq-cal-c .tr { font: 400 11px/1.25 var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-cal-c .st { display: flex; align-items: center; gap: 4px; font: 500 9px var(--fonte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; overflow: hidden; }
.pq-cal-c .st i { width: 6px; height: 6px; border-radius: 50%; background: var(--sc, var(--s-rascunho)); flex-shrink: 0; }
.pq-cal-novo { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.pq-cal-novo .campo .segmento { align-self: flex-start; }
.pq-cal-novo .modal-pe { margin-top: 12px; }
@media (max-width: 900px) { .pq-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pq-barra { grid-template-columns: minmax(0, 90px) minmax(0, 1fr) 60px; gap: 8px; }
  .pq-frm { grid-template-columns: minmax(0, 1fr); }
  .pq-cmp-l { grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .pq-o, .pq-q { width: 100%; flex: 1 1 100%; }
  .pq-mural-r { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pq-ref-r .cr { padding: 10px; gap: 8px; }
  .pq-ref-r .pq-nota { -webkit-line-clamp: 2; font-size: 12px; }
  .pq-orig .dica { display: none; }
  .pq-acao { padding: 0 8px; font-size: 10px; letter-spacing: 0.04em; }
  .pq-cab .pq-chips .chip { height: 32px; padding: 0 12px; }
  /* calendário do popup vira agenda: um dia por linha, só o mês da tela */
  .pq-cal { display: flex; flex-direction: column; }
  .pq-cal-dow, .pq-cal-d.fora { display: none; }
  .pq-cal-d { min-height: 52px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-content: center; padding: 8px 48px 8px 8px; gap: 6px 6px; }
  .pq-cal-d .n { grid-column: 1; grid-row: 1 / span 9; align-self: start; }
  .pq-cal-c { grid-column: 2; }
  .pq-cal-d .n { width: 54px; height: 36px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; font-size: 15px; font-family: var(--serif); color: var(--texto); }
  .pq-cal-d .n .dw { display: block; font: 500 9px var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
  .pq-cal-d.hoje .n::after { display: none; }
  .pq-cal-d.hoje .n .dw { color: var(--ouro-t); }
  .pq-cal-mais { top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; }
  .pq-cal-mes { min-width: 0; flex: 1; }
}

/* ---------- R6 · Ideias e Reuniões (wireframe telas2.js: TELAS.ideias, fios(), TELAS.reunioes) ---------- */
.di-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.di-tabs button { height: 40px; padding: 0 14px; border: 0; background: transparent; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-micro), border-color 0.2s var(--ease); }
.di-tabs button.on { color: var(--texto); border-color: var(--tinta); }
.di-quadro { position: relative; display: grid; gap: 24px; padding: 16px; border-radius: 24px; background-color: var(--camada2); background-image: radial-gradient(color-mix(in srgb, var(--tinta) 13%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.di-estagio { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.di-est-cab { display: flex; align-items: center; gap: 6px; min-width: 0; }
.di-est-cab .chip { background: var(--card); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.di-est-cab .label { margin-left: auto; }
.di-lapis-e { width: 28px; height: 28px; flex-shrink: 0; }
.di-lapis-e svg { width: 14px; height: 14px; }
.di-ideia { display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; gap: 10px; align-items: center; background: var(--card); border-radius: 14px; padding: 10px; box-shadow: inset 0 0 0 1px var(--hairline), var(--sombra-card); transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), box-shadow 0.25s var(--ease); cursor: pointer; text-align: left; width: 100%; min-width: 0; }
.di-ideia:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.di-ideia .ii, .di-linha .ii { width: 32px; height: 32px; border-radius: 9px; background: var(--camada2); display: grid; place-items: center; flex-shrink: 0; }
.di-ideia .ii svg, .di-linha .ii svg { width: 16px; height: 16px; }
.di-tx { min-width: 0; }
.di-ideia b { display: block; font: 400 14px/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-ideia small { display: block; font: 500 9px var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-ideia.travada { opacity: 0.5; filter: saturate(0.3); }
.di-ideia.feita { box-shadow: inset 0 0 0 1.5px var(--ouro), var(--sombra-card); }
.di-ideia.solta { animation: di-solta 0.6s var(--pop); }
.di-ideia.nasce { animation: di-nasce 0.4s var(--pop); }
@keyframes di-solta { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes di-nasce { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.di-concluir { width: 26px; height: 26px; border-radius: var(--r-full); border: 1.5px solid var(--borda-campo); background: var(--card); display: grid; place-items: center; padding: 0; color: var(--texto); transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.25s var(--pop); flex-shrink: 0; }
.di-concluir svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--t-micro); }
span.di-concluir svg { opacity: 0.5; }
button.di-concluir:hover { border-color: var(--tinta); }
button.di-concluir:hover svg { opacity: 0.4; }
button.di-concluir:active { transform: scale(0.85); }
.di-concluir.on { background: var(--ouro); border-color: var(--ouro); color: #fdfcf8; }
.di-concluir.on svg { opacity: 1; }
.di-add { height: 32px; border-radius: 10px; border: 1px dashed var(--borda-campo); background: transparent; color: var(--secundario); font: 500 10px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; transition: color var(--t-micro), border-color var(--t-micro); }
.di-add:hover { color: var(--texto); border-color: var(--tinta); }
.di-fios { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.di-fios path { fill: none; stroke: color-mix(in srgb, var(--tinta) 28%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.di-fios path.viva { stroke: var(--ouro); stroke-dasharray: 4 4; animation: di-corre 1s linear infinite; }
.di-fios circle { fill: color-mix(in srgb, var(--tinta) 35%, transparent); }
.di-fios circle.viva { fill: var(--ouro); }
@keyframes di-corre { to { stroke-dashoffset: -16; } }
.di-simbolos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.di-simbolos button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--hairline); background: var(--card); display: grid; place-items: center; color: var(--texto); transition: background var(--t-micro), transform 0.2s var(--pop), box-shadow var(--t-micro); }
.di-simbolos button svg { width: 16px; height: 16px; }
.di-simbolos button:hover { background: var(--camada2); }
.di-simbolos button.sel { box-shadow: inset 0 0 0 1.5px var(--tinta); background: var(--ouro-hover); transform: scale(1.06); }
.di-etapas-ed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.di-etapas-ed div { display: grid; grid-template-columns: 24px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.di-etapas-ed input { height: 36px; border-radius: 10px; border: 1px solid var(--borda-campo); padding: 0 10px; font: 400 13px var(--fonte); min-width: 0; background: var(--card); color: var(--texto); }
.di-linha { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); min-width: 0; width: 100%; }
.di-linha:first-of-type { border-top: 0; }
.di-linha > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--secundario); }
.di-linha .tr { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.di-linha .label { flex-shrink: 0; }
.di-ab .tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-ab .pq-acts-r { flex-shrink: 0; flex-wrap: nowrap; }
.di-reu { background: transparent; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; color: var(--texto); cursor: pointer; border-radius: 0; }
.di-reu .tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-reu:hover, .di-reu.on { background: var(--camada2); }
.di-atraso { color: var(--erro-pin); }
.di-md { white-space: pre-wrap; font: 400 12px/1.6 var(--fonte); max-height: 60dvh; overflow: auto; background: var(--camada2); border-radius: 12px; padding: 16px; margin: 0; overflow-wrap: anywhere; }
.di-arquivo { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 12px; border: 1px dashed var(--borda-campo); color: var(--secundario); font: 500 11px var(--fonte); letter-spacing: 0.04em; cursor: pointer; margin-bottom: 8px; }
.di-arquivo svg { width: 16px; height: 16px; }
.di-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#hoje-tarefas[hidden] { display: none; }
@media (max-width: 640px) {
  .di-quadro { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; padding: 12px; }
  .di-simbolos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .di-ab { flex-wrap: wrap; }
  .di-ab .tr { flex-basis: calc(100% - 26px); white-space: normal; }
  .di-ab .pq-acts-r { margin-left: 26px; }
  .di-reu { flex-wrap: wrap; }
  .di-reu .label { margin-left: 26px; }
  #hoje-tarefas .di-linha { flex-wrap: wrap; }
  #hoje-tarefas .di-linha .tr { flex-basis: calc(100% - 40px); }
  #hoje-tarefas .di-linha .label { margin-left: 36px; }
}

/* ---------- Configurações no formato do Painel: abas no topo, lista com ações por linha (22/10) ---------- */
.cf-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.cf-abas button { height: 40px; padding: 0 14px; border: 0; background: transparent; font: 500 11px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-micro), border-color 0.2s var(--ease); }
.cf-abas button.on { color: var(--texto); border-color: var(--tinta); }
.cf-linha { display: flex; align-items: center; gap: 2px; border-radius: var(--r-inner); min-width: 0; }
.cf-linha:hover { background: var(--camada2); }
.cf-linha.ativo { background: var(--camada3); }
.cf-linha .config-item { flex: 1; background: transparent; }
.cf-acoes { display: flex; gap: 0; padding-right: 4px; flex-shrink: 0; }
.cf-acoes .icone-fantasma { width: 32px; height: 32px; }
.cf-acoes .icone-fantasma svg { width: 16px; height: 16px; }
.cf-acoes [data-cf-apagar]:hover { color: var(--erro); }

/* ---------- Calendário igual ao wireframe v4 (22/10): categorias, responsáveis, meus posts e estados clicáveis ---------- */
:root { --k-collab: #8c6a33; --k-comunidade: #3f6f6a; --k-datas: #8a5a63; --k-educativo: #6a5d86; --k-teste: #a0583a; --k-base: #3f6f6a; }
.k-collab { --c: var(--k-collab); } .k-comunidade { --c: var(--k-comunidade); } .k-datas { --c: var(--k-datas); } .k-educativo { --c: var(--k-educativo); } .k-teste { --c: var(--k-teste); } .k-base { --c: var(--k-base); }
.cal-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 20px; }
.cal-fl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cal-fl .label { margin-right: 4px; }
button.chip { cursor: pointer; }
button.chip.sel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--tinta)); }
button.chip.desl { opacity: 0.45; }
button.chip.contorno.sel { background: var(--tinta); color: var(--tinta-ink); box-shadow: none; }
.cal-st .chip { height: 28px; gap: 6px; }
.cal-st .chip .sti, .cal-st .chip svg { width: 14px; height: 14px; }
.cal-st .chip b { font-weight: 500; }
.av-p { margin-left: auto; width: 20px; height: 20px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; font: 500 8px var(--fonte); background: var(--camada3); color: var(--texto); }
.tipo-linha { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
@media (max-width: 640px) { .cal-filtros { gap: 8px; } .cal-st .chip { height: 26px; padding: 0 8px; } }

/* ---------- Stories: vídeo e capa por lugar da sequência (22/10) ---------- */
.slot-w { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot.com-capa { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)), var(--capa) center / cover; color: #fdfcf8; border-style: solid; border-color: transparent; }
.slot-up { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; border: 1px dashed var(--borda-campo); border-radius: 8px; background: transparent; color: var(--secundario); font: 500 9px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; min-width: 0; transition: color var(--t-micro), border-color var(--t-micro); }
.slot-up svg { width: 12px; height: 12px; flex-shrink: 0; }
.slot-up:hover { color: var(--texto); border-color: var(--tinta); }
.slot-up.tem { border-style: solid; color: var(--texto); }