:root{--espaco-1:4px;--espaco-2:8px;--espaco-3:12px;--espaco-4:16px;--espaco-5:24px;--espaco-6:32px;--espaco-7:48px;--espaco-8:64px;--texto-xs:.8rem;--texto-sm:.9rem;--texto-base:1rem;--texto-md:1.05rem;--texto-lg:1.25rem;--texto-xl:1.5rem;--texto-2xl:2rem;--raio-sm:8px;--raio-md:12px;--raio-lg:18px;--raio-pill:999px;--sombra-sm:0 2px 8px rgba(23,54,93,.08);--sombra-md:0 12px 40px rgba(23,54,93,.1);--sombra-cabecalho:0 2px 16px rgba(0,0,0,.12);--cinza-0:#fff;--cinza-50:#f5f7fb;--cinza-100:#eef2f7;--cinza-200:#e3e9f2;--cinza-300:#cbd5e1;--cinza-400:#94a3b8;--cinza-500:#64748b;--cinza-600:#475569;--cinza-700:#334155;--cinza-800:#1e293b;--cinza-900:#102033;--cor-cabecalho:#071a2c;--cor-destaque:#2563eb;--cor-destaque-contraste:#fff;--cor-sucesso:#16a34a;--cor-sucesso-bg:#dcfce7;--cor-sucesso-texto:#14532d;--cor-atencao:#d97706;--cor-atencao-bg:#fef3c7;--cor-atencao-texto:#78350f;--cor-erro:#dc2626;--cor-erro-bg:#fee2e2;--cor-erro-texto:#7f1d1d;--fonte:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-family:var(--fonte);color:var(--cinza-900);background:var(--cinza-50)}

*{box-sizing:border-box}
body{margin:0;font-size:var(--texto-base);line-height:1.5}
h1{font-size:var(--texto-2xl);line-height:1.2;margin:0 0 var(--espaco-5)}
h2{font-size:var(--texto-xl);line-height:1.25;margin:var(--espaco-6) 0 var(--espaco-3)}
h3{font-size:var(--texto-lg);line-height:1.3;margin:0 0 var(--espaco-2)}
h1:first-child,h2:first-child,h3:first-child{margin-top:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Foco visível: item de acessibilidade, não enfeite — precisa aparecer em cima de
   qualquer fundo, inclusive o cabeçalho escuro, seja qual for a cor de destaque
   escolhida pela instituição (podendo até coincidir com o próprio fundo escuro). */
:focus-visible{outline:3px solid var(--cor-destaque);outline-offset:2px;border-radius:2px}
.topo :focus-visible{outline-color:#fff}

a{color:var(--cor-destaque)}

.topo{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:var(--espaco-4) 5vw;background:var(--cor-cabecalho);color:#fff;box-shadow:var(--sombra-cabecalho);border-bottom:3px solid var(--cor-destaque);gap:var(--espaco-4);flex-wrap:wrap}
.marca{display:flex;align-items:center;font-weight:800;font-size:var(--texto-lg);color:#fff;text-decoration:none}
.marca .logo{max-height:36px;width:auto;display:block}
.topo nav{display:flex;gap:var(--espaco-4);align-items:center;flex-wrap:wrap}
.topo a{color:#dbeafe;text-decoration:none;font-size:var(--texto-sm)}
.topo a:hover{color:#fff}

/* As variantes (.botao-secundario/.botao-perigo/.botao-sucesso/.botao-fantasma) precisam entrar
   NESTE seletor base, não só herdar dele: um <a class="botao-secundario"> sem a classe "botao"
   também não bate no seletor de tag "button" — sem isso, virava um link sublinhado azul dentro de
   uma caixinha cinza (a variante só troca cor/fundo, nunca dava padding/border-radius/display
   sozinha). <button class="botao-secundario"> sempre escapou desse bug por já bater no seletor de
   tag "button"; só <a> com variante e sem ".botao" caía nessa lacuna — achado numa conferência do
   site publicado. */
.botao,.botao-secundario,.botao-perigo,.botao-sucesso,.botao-fantasma,button,.btn{border:0;border-radius:var(--raio-sm);padding:var(--espaco-3) var(--espaco-4);min-height:42px;background:var(--cor-destaque);color:var(--cor-destaque-contraste);text-decoration:none;cursor:pointer;font-weight:700;font-size:var(--texto-sm);font-family:inherit;transition:filter .15s,opacity .15s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:var(--espaco-2)}
.botao:hover,.botao-secundario:hover,.botao-perigo:hover,.botao-sucesso:hover,.botao-fantasma:hover,button:hover,.btn:hover{filter:brightness(.92)}
.botao:active,.botao-secundario:active,.botao-perigo:active,.botao-sucesso:active,.botao-fantasma:active,button:active,.btn:active{filter:brightness(.85)}
.botao:disabled,button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.botao:focus-visible,.botao-secundario:focus-visible,.botao-perigo:focus-visible,.botao-sucesso:focus-visible,.botao-fantasma:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--cor-destaque);outline-offset:2px}
.botao-enviando{position:relative;padding-left:calc(var(--espaco-4) + 18px)}
.botao-enviando::before{content:"";position:absolute;left:var(--espaco-3);width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:girar .6s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.botao-secundario{background:var(--cinza-100);color:var(--cinza-800);border:1px solid var(--cinza-300)}
.botao-secundario:hover{background:var(--cinza-200);filter:none}
.botao-perigo{background:var(--cor-erro);color:#fff}
.botao-sucesso{background:var(--cor-sucesso);color:#fff}
/* "Fantasma": sem preenchimento nem borda, só texto colorido — ação de baixa ênfase ao lado de uma
   primária (ex.: "Limpar filtros", "Cancelar" fora de modal). */
.botao-fantasma{background:transparent;color:var(--cor-destaque);border:1px solid transparent}
.botao-fantasma:hover{background:var(--cinza-100);filter:none}
.botao-fantasma.texto-perigo{color:var(--cor-erro)}
.topo form button{padding:var(--espaco-2) var(--espaco-3);min-height:0}
/* Botões utilitários/ícone que não são parte do sistema de botões padrão (fechar aviso, menu "…",
   abrir menu do usuário/celular, copiar link, alternar bloco) — precisam continuar compactos,
   sem herdar a altura mínima dos botões de ação padronizados. */
.aviso-fechar,.menu-acoes-botao,.topbar-usuario-botao,.topbar-menu-botao,.copy-link,.bloco-expansivel-botao,.interruptor,.checkbox-linha{min-height:0}

.inline{display:inline}
/* width:100% explícito (não só max-width) é o que importa aqui: dentro de .app-main
   (display:flex;flex-direction:column), um item com largura auto e margin:auto nas margens do eixo
   cruzado (esquerda/direita, pra esse container em coluna) NUNCA estica — a spec desliga o stretch
   assim que alguma margem do eixo cruzado é auto, e o item encolhe pro tamanho do conteúdo em vez
   de ocupar o espaço disponível. Foi por isso que Publicações/Painel (achado numa conferência do
   site publicado) ficavam estreitos mesmo com max-width:1600px — a caixa nunca chegava a crescer
   até esse teto pra o auto-centralizar fazer sentido. width:100% dá um tamanho definido (não
   auto) e tira esse item da regra do stretch — max-width ainda limita a 1600px, e margin:auto
   volta a centralizar normalmente quando isso acontece. */
.conteudo{max-width:1600px;width:100%;margin:auto;padding:var(--espaco-6) clamp(20px,3.5vw,56px)}
/* Achado numa conferência: esta regra tinha o MESMO valor de .conteudo (1600px) — ou seja,
   ViewData["ContainerLargo"]=true não fazia nada. Em monitor largo (>1600px, comum em desktop),
   toda tela "largo" (Painel, Publicações, Eventos, Usuários, Administração, Configurações,
   Créditos, Assistente, e agora também Plano semanal) ficava com uma faixa de espaço vazio dos
   dois lados em vez de usar a largura disponível — mais sensível ainda no Plano semanal, cuja
   grade de 7 colunas se beneficia mais de largura extra. 1920px (~Full HD) dá bastante mais
   espaço sem esticar demais em monitor ultrawide. */
.conteudo-largo{max-width:1920px}
.tabela-wrap{overflow-x:auto}
.tabela-acoes{display:flex;align-items:center;gap:var(--espaco-2);flex-wrap:wrap}
.tabela-acoes .botao,.tabela-acoes button{padding:var(--espaco-2) var(--espaco-3);font-size:var(--texto-xs)}
.ajuda-campo{font-size:var(--texto-xs);color:var(--cinza-600);margin:0}

.hero{padding:var(--espaco-8) 0;display:grid;grid-template-columns:1.3fr .7fr;gap:var(--espaco-6);align-items:center}
.hero h1{font-size:clamp(2.4rem,7vw,5.5rem);line-height:.95;margin:0 0 var(--espaco-5)}
.hero .destaque{color:var(--cor-destaque)}

.card,.painel-card{background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-lg);padding:var(--espaco-5);box-shadow:var(--sombra-md);margin-bottom:var(--espaco-5)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--espaco-4)}
.grade .card,.grade .painel-card{margin-bottom:0}

.form{max-width:720px}
.campo{display:flex;flex-direction:column;gap:var(--espaco-2);margin-bottom:var(--espaco-4)}
.campo label,form>label{font-weight:600;font-size:var(--texto-sm);color:var(--cinza-700)}
.campo input,.campo textarea,.campo select,input,textarea,select{padding:var(--espaco-3);border:1px solid var(--cinza-300);border-radius:var(--raio-sm);background:var(--cinza-0);font:inherit;color:inherit;width:100%}
.campo input[type=checkbox],.campo input[type=radio],input[type=checkbox],input[type=radio]{width:auto}
input[type=color]{width:64px;height:42px;padding:4px;cursor:pointer}
.input-validation-error{border-color:var(--cor-erro)}
.field-validation-error{color:var(--cor-erro-texto);font-size:var(--texto-xs)}
.validation-summary-valid{display:none}
.validation-summary-errors{padding:var(--espaco-4) var(--espaco-5);border-radius:var(--raio-md);margin-bottom:var(--espaco-5);background:var(--cor-erro-bg);color:var(--cor-erro-texto);border-left:4px solid var(--cor-erro);font-weight:600}
.validation-summary-errors ul{margin:0;padding-left:var(--espaco-5)}

.tabela{width:100%;border-collapse:collapse;background:var(--cinza-0);border-radius:var(--raio-md);overflow:hidden;box-shadow:var(--sombra-sm)}
.tabela th{background:var(--cinza-50);font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--cinza-600);font-weight:700}
.tabela th,.tabela td{padding:var(--espaco-3) var(--espaco-4);border-bottom:1px solid var(--cinza-100);text-align:left}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:var(--cinza-50)}

.alerta{padding:var(--espaco-4) var(--espaco-5);border-radius:var(--raio-md);margin-bottom:var(--espaco-5);border-left:4px solid transparent;font-weight:600}
.alerta.sucesso{background:var(--cor-sucesso-bg);color:var(--cor-sucesso-texto);border-left-color:var(--cor-sucesso)}
.alerta.atencao{background:var(--cor-atencao-bg);color:var(--cor-atencao-texto);border-left-color:var(--cor-atencao)}
.alerta.erro{background:var(--cor-erro-bg);color:var(--cor-erro-texto);border-left-color:var(--cor-erro)}

.vazio{text-align:center;padding:var(--espaco-7) var(--espaco-5);color:var(--cinza-600)}
.vazio p{margin:0 0 var(--espaco-4);font-size:var(--texto-md)}
.vazio .botao,.vazio button{margin:0 auto}

/* Campo-armadilha (honeypot) do formulário público "Solicitar acesso": posicionado fora da tela
   em vez de display:none/visibility:hidden, que alguns robôs já sabem detectar e pular. */
.armadilha{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

.chat{display:grid;gap:var(--espaco-3)}
.mensagem{padding:var(--espaco-4);border-radius:var(--raio-md);background:var(--cinza-0);border:1px solid var(--cinza-200)}
.mensagem.Usuario{margin-left:18%;background:#dbeafe}
.saldo{font-size:var(--texto-2xl);font-weight:800}

.item-conteudo{border-radius:var(--raio-md);padding:var(--espaco-4);background:var(--cinza-100);border-left:6px solid var(--cinza-400)}
.item-conteudo.situacao-falta-arte{border-left-color:var(--cor-erro);background:var(--cor-erro-bg)}
.item-conteudo.situacao-pronto{border-left-color:#4f46e5;background:#e0e7ff}
.item-conteudo.situacao-aguardando-aprovacao{border-left-color:var(--cor-atencao);background:var(--cor-atencao-bg)}
.item-conteudo.situacao-agendado{border-left-color:#2563eb;background:#dbeafe}
.item-conteudo.situacao-publicado{border-left-color:var(--cor-sucesso);background:var(--cor-sucesso-bg)}
.item-conteudo code{background:var(--cinza-0);padding:2px 6px;border-radius:6px;font-size:var(--texto-xs)}
.miniatura-arte{max-width:120px;max-height:120px;object-fit:cover;border-radius:var(--raio-sm);display:block;margin-top:var(--espaco-2)}

.campo-copia{display:flex;gap:var(--espaco-2);align-items:center}
.campo-copia input{flex:1;min-width:0;padding:var(--espaco-2) var(--espaco-3);font-size:var(--texto-sm)}
.campo-copia button{padding:var(--espaco-2) var(--espaco-3);font-size:var(--texto-xs);white-space:nowrap}

footer{text-align:center;padding:var(--espaco-7);color:var(--cinza-500)}

/* ===== Layout autenticado: menu lateral + barra do topo (P-B Fase 1) ===== */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;flex:0 0 260px;background:var(--cor-cabecalho);color:#dbeafe;display:flex;flex-direction:column;padding:var(--espaco-5) var(--espaco-4);position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-marca{display:flex;align-items:center;gap:var(--espaco-3);color:#fff;text-decoration:none;font-weight:800;font-size:var(--texto-md);padding:0 var(--espaco-2) var(--espaco-5)}
.sidebar-marca .logo{max-height:32px;width:auto;display:block;border-radius:var(--raio-sm)}
.sidebar-marca .sidebar-marca-icone{width:32px;height:32px;border-radius:var(--raio-sm);background:var(--cor-destaque);display:flex;align-items:center;justify-content:center;flex:none}
.sidebar-marca small{display:block;font-weight:500;font-size:var(--texto-xs);color:#94a3b8}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar-link{display:flex;align-items:center;gap:var(--espaco-3);padding:var(--espaco-3) var(--espaco-3);border-radius:var(--raio-sm);color:#cbd5e1;text-decoration:none;font-size:var(--texto-sm);font-weight:600;transition:background .15s,color .15s}
.sidebar-link svg{flex:none;width:20px;height:20px}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-link.ativo{background:var(--cor-destaque);color:var(--cor-destaque-contraste)}
.badge-contador{margin-left:auto;background:var(--cor-erro);color:#fff;font-size:var(--texto-xs);font-weight:700;line-height:1;padding:3px 7px;border-radius:999px}
.sidebar-rodape{margin-top:var(--espaco-5);padding-top:var(--espaco-4);border-top:1px solid rgba(255,255,255,.12);font-size:var(--texto-xs);color:#94a3b8}
.sidebar-fechar{display:none}
.sidebar-fundo{display:none;position:fixed;inset:0;background:rgba(7,26,44,.6);z-index:9}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:var(--espaco-3);padding:var(--espaco-3) 5vw;background:var(--cinza-0);border-bottom:1px solid var(--cinza-200);box-shadow:var(--sombra-sm)}
.topbar-menu-botao{display:none;background:none;border:0;color:var(--cinza-700);padding:var(--espaco-2);border-radius:var(--raio-sm)}
.topbar-menu-botao:hover{background:var(--cinza-100);filter:none}
.topbar-usuario{position:relative}
.topbar-usuario-botao{background:none;border:0;color:inherit;display:flex;align-items:center;gap:var(--espaco-2);cursor:pointer;padding:var(--espaco-2);border-radius:var(--raio-sm);font:inherit}
.topbar-usuario-botao:hover{background:var(--cinza-100);filter:none}
.topbar-avatar{width:36px;height:36px;border-radius:50%;background:var(--cor-destaque);color:var(--cor-destaque-contraste);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--texto-sm);flex:none}
.topbar-usuario-nome{text-align:left;line-height:1.2}
.topbar-usuario-nome strong{display:block;font-size:var(--texto-sm);color:var(--cinza-900)}
.topbar-usuario-nome span{display:block;font-size:var(--texto-xs);color:var(--cinza-500)}
.menu-usuario{position:absolute;right:0;top:calc(100% + var(--espaco-2));background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-md);box-shadow:var(--sombra-md);min-width:200px;padding:var(--espaco-2);z-index:6}
.menu-usuario a,.menu-usuario button{display:block;width:100%;text-align:left;padding:var(--espaco-2) var(--espaco-3);border-radius:var(--raio-sm);color:var(--cinza-800);text-decoration:none;background:none;border:0;font:inherit;font-weight:600;font-size:var(--texto-sm)}
.menu-usuario a:hover,.menu-usuario button:hover{background:var(--cinza-100)}

.versiculo{display:flex;align-items:flex-start;gap:var(--espaco-3);background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:var(--raio-lg);padding:var(--espaco-4) var(--espaco-5);margin-bottom:var(--espaco-5);color:var(--cinza-800)}
.versiculo svg{flex:none;color:var(--cor-destaque);margin-top:2px}
.versiculo p{margin:0;font-style:italic;font-weight:600}
.versiculo cite{display:block;margin-top:var(--espaco-2);font-style:normal;font-size:var(--texto-sm);color:var(--cinza-600)}

@media(max-width:960px){
.sidebar{position:fixed;left:0;top:0;z-index:10;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sombra-md)}
.sidebar.aberta{transform:translateX(0)}
.sidebar-fundo:not([hidden]){display:block}
.topbar-menu-botao{display:inline-flex}
.topbar{justify-content:space-between}
}

/* ===== Pílulas de status ===== */
.pilula{display:inline-flex;align-items:center;gap:6px;padding:4px var(--espaco-3);border-radius:var(--raio-pill);font-size:var(--texto-xs);font-weight:700;white-space:nowrap}
.pilula::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pilula-publicado{background:var(--cor-sucesso-bg);color:var(--cor-sucesso-texto)}
.pilula-pronto{background:#e0e7ff;color:#3730a3}
.pilula-esperando-arte{background:var(--cor-erro-bg);color:var(--cor-erro-texto)}
.pilula-aguardando-aprovacao{background:var(--cor-atencao-bg);color:var(--cor-atencao-texto)}
.pilula-agendado{background:#dbeafe;color:#1e40af}
.pilula-erro{background:var(--cor-erro-bg);color:var(--cor-erro-texto)}
.pilula-neutra{background:var(--cinza-100);color:var(--cinza-600)}

/* ===== Menu de ações "…" (details/summary nativo) ===== */
details.menu-acoes{position:relative;display:inline-block}
.menu-acoes-botao{list-style:none;cursor:pointer;padding:var(--espaco-2) var(--espaco-3);background:var(--cinza-100);color:var(--cinza-700);border:1px solid var(--cinza-300);border-radius:var(--raio-sm);font-weight:700;display:inline-flex;align-items:center;user-select:none}
.menu-acoes-botao::-webkit-details-marker{display:none}
.menu-acoes-botao:hover{background:var(--cinza-200)}
/* z-index alto (acima de .sidebar/.sidebar-fundo, 9-10) e position:fixed calculado em JS na
   abertura (site.js) — sem isso, o menu ficava clipado por qualquer ancestral com overflow
   diferente de visible (ex.: .tabela-wrap{overflow-x:auto} também clipa o eixo vertical) e nunca
   abria pra cima quando faltava espaço abaixo na viewport. position:absolute aqui é só o valor de
   repouso (fechado) e o fallback se o JS não rodar; ao abrir, o JS sobrescreve top/left/position
   inline e reseta ao fechar (device.style.cssText=''). */
.menu-acoes-lista{position:absolute;right:0;top:calc(100% + 4px);background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-md);box-shadow:var(--sombra-md);min-width:220px;max-width:min(320px,calc(100vw - 16px));padding:var(--espaco-2);z-index:20;display:flex;flex-direction:column;gap:2px}
.menu-acoes-lista form{margin:0}
.menu-acoes-lista a,.menu-acoes-lista button{display:block;width:100%;text-align:left;padding:var(--espaco-2) var(--espaco-3);border-radius:var(--raio-sm);color:var(--cinza-800);text-decoration:none;background:none;border:0;font:inherit;font-weight:600;font-size:var(--texto-sm)}
.menu-acoes-lista a:hover,.menu-acoes-lista button:hover{background:var(--cinza-100)}
.menu-acoes-lista .texto-perigo{color:var(--cor-erro)}

/* ===== Modal (dialog nativo — P-A2) ===== */
dialog.modal{border:0;border-radius:var(--raio-lg);box-shadow:var(--sombra-md);padding:0;width:min(480px,92vw);color:inherit}
dialog.modal::backdrop{background:rgba(7,26,44,.55)}
.modal-corpo{padding:var(--espaco-5)}
.modal-corpo h2{margin:0 0 var(--espaco-3);font-size:var(--texto-lg)}
.modal-corpo p{margin:0 0 var(--espaco-3);color:var(--cinza-700)}
.modal-corpo ul{margin:0 0 var(--espaco-3);padding-left:var(--espaco-5);color:var(--cinza-700)}
.modal-campo{margin-bottom:var(--espaco-3)}
.modal-campo label{display:block;font-weight:600;font-size:var(--texto-sm);margin-bottom:var(--espaco-2)}
.modal-acoes{display:flex;justify-content:flex-end;gap:var(--espaco-3);padding:var(--espaco-4) var(--espaco-5);background:var(--cinza-50);border-top:1px solid var(--cinza-200);border-radius:0 0 var(--raio-lg) var(--raio-lg);margin:0}

/* ===== Avisos (P-A3): substituem a faixa antiga .alerta como mensagem de resultado ===== */
.avisos{display:flex;flex-direction:column;gap:var(--espaco-3);margin-bottom:var(--espaco-5)}
.aviso{display:flex;align-items:flex-start;gap:var(--espaco-3);padding:var(--espaco-4);border-radius:var(--raio-md);box-shadow:var(--sombra-sm);border-left:4px solid transparent;animation:aviso-entrar .15s ease-out}
.aviso.aviso-saindo{animation:aviso-sair .2s ease-in forwards}
.aviso svg{flex:none;margin-top:1px}
.aviso-corpo{flex:1;min-width:0}
.aviso-corpo p{margin:0;font-weight:600}
.aviso-fechar{background:none;border:0;padding:2px;color:inherit;opacity:.6;flex:none}
.aviso-fechar:hover{opacity:1;background:none;filter:none}
.aviso-sucesso{background:var(--cor-sucesso-bg);color:var(--cor-sucesso-texto);border-left-color:var(--cor-sucesso)}
.aviso-erro{background:var(--cor-erro-bg);color:var(--cor-erro-texto);border-left-color:var(--cor-erro)}
.aviso-atencao{background:var(--cor-atencao-bg);color:var(--cor-atencao-texto);border-left-color:var(--cor-atencao)}
.aviso-info{background:#dbeafe;color:#1e40af;border-left-color:var(--cor-destaque)}
@keyframes aviso-entrar{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes aviso-sair{to{opacity:0;transform:translateY(-4px)}}

.bloco-expansivel-botao{background:none;border:0;color:var(--cor-destaque);font-weight:700;font-size:var(--texto-sm);padding:var(--espaco-2) 0;cursor:pointer}
.bloco-expansivel-botao:hover{background:none;filter:none;text-decoration:underline}
.bloco-expansivel-conteudo{margin-top:var(--espaco-2)}

.botao-enviando-bloqueado{opacity:.55;cursor:not-allowed}

/* ===== Cabeçalho de página com navegação de semana ===== */
.pagina-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--espaco-5);flex-wrap:wrap;margin-bottom:var(--espaco-5)}
.pagina-cabecalho-titulo{margin:0}
.pagina-cabecalho-titulo p{margin:var(--espaco-2) 0 0;color:var(--cinza-600)}
.eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:var(--texto-xs);font-weight:700;color:var(--cor-destaque);margin:0 0 var(--espaco-2)}
.semana-nav{display:flex;align-items:center;gap:var(--espaco-3);font-weight:700}
.semana-nav a{color:var(--cinza-700);text-decoration:none;padding:var(--espaco-2);border-radius:var(--raio-sm)}
.semana-nav a:hover{background:var(--cinza-100)}
.automacao-chave{display:flex;align-items:center;gap:var(--espaco-3)}
.interruptor{position:relative;display:inline-flex;align-items:center;width:44px;height:26px;border-radius:var(--raio-pill);border:0;background:var(--cinza-300);flex:none;cursor:pointer;padding:0}
.interruptor::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.interruptor.ligado{background:var(--cor-sucesso)}
.interruptor.ligado::before{transform:translateX(18px)}

/* ===== Grade semanal (Plano semanal — 7 colunas) ===== */
/* minmax(0,1fr), não minmax(190px,1fr): em notebook a grade precisa ocupar a largura toda SEM
   rolagem horizontal — um piso fixo de 190px×7 estourava a largura do container bem antes de
   1600px. Rolagem horizontal só entra na media query de celular, abaixo. */
.semana-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--espaco-3);align-items:start}
.dia-coluna{display:flex;flex-direction:column;gap:var(--espaco-3);min-width:0}
.dia-coluna-cabecalho{padding:var(--espaco-2) var(--espaco-1)}
.dia-coluna-cabecalho .dia-numero{font-size:var(--texto-xl);font-weight:800;line-height:1}
.dia-coluna-cabecalho .dia-nome{font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--cinza-500);font-weight:700}
.dia-vazio{border:1px dashed var(--cinza-300);border-radius:var(--raio-md);padding:var(--espaco-4);text-align:center;color:var(--cinza-500);font-size:var(--texto-sm)}
.dia-card{background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-md);box-shadow:var(--sombra-sm);overflow:hidden;display:flex;flex-direction:column;height:100%}
.dia-card-miniatura{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--cinza-100)}
.dia-card-miniatura-vazia{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--cinza-100);color:var(--cinza-400)}
.dia-card-corpo{padding:var(--espaco-3);display:flex;flex-direction:column;gap:6px;flex:1}
.dia-card-corpo strong{font-size:var(--texto-sm);line-height:1.3}
.dia-card-meta{margin:0;display:flex;align-items:center;gap:6px;font-size:var(--texto-xs);color:var(--cinza-600)}
.dia-card-meta svg{width:14px;height:14px;flex:none}
/* margin-top:auto empurra as ações pro rodapé do cartão, mesmo com quantidade de texto diferente
   entre cartões vizinhos — é o que dá a sensação de "altura consistente" numa coluna com cartões
   de conteúdo desigual (nome curto/longo, com/sem aviso), sem cortar texto nenhum. */
.dia-card-acoes{display:flex;align-items:center;gap:var(--espaco-2);margin-top:auto;padding-top:var(--espaco-2)}
.dia-card-acoes form{margin:0;flex:1}
.dia-card-acoes .botao,.dia-card-acoes button{width:100%;justify-content:center;padding:var(--espaco-2) var(--espaco-3);font-size:var(--texto-xs);min-height:34px}
.dia-card-acoes .menu-acoes{flex:none}

/* Cartão compacto: quando o dia tem 2+ itens, cada cartão vira uma linha (miniatura pequena à
   esquerda, texto à direita) em vez da miniatura grande no topo — sem isso, um dia com 2+ eventos
   ficava MUITO mais alto que os vizinhos, e a coluna toda "pendurava" abaixo da linha da grade
   (achado numa conferência do site publicado). Mesmo estilo de cartão, só o miolo compacto. */
/*.dia-card.compacto{flex-direction:row;align-items:stretch}
.dia-card.compacto .dia-card-miniatura,.dia-card.compacto .dia-card-miniatura-vazia{width:64px;aspect-ratio:auto;flex:none}
.dia-card.compacto .dia-card-corpo{padding:var(--espaco-2);gap:3px}
.dia-card.compacto .dia-card-corpo strong{font-size:var(--texto-xs);line-height:1.25}
.dia-card.compacto .dia-card-meta{font-size:10px}
.dia-card.compacto .dia-card-acoes .botao,.dia-card.compacto .dia-card-acoes button{min-height:26px;padding:4px var(--espaco-2)}*/

.resumo-barra{display:flex;align-items:center;gap:var(--espaco-5);flex-wrap:wrap;padding:var(--espaco-4) var(--espaco-5)}
.resumo-progresso{display:flex;align-items:center;gap:var(--espaco-3);font-weight:700}
.resumo-item{display:flex;align-items:center;gap:6px;font-size:var(--texto-sm);color:var(--cinza-700)}
.resumo-item .pilula{padding:2px}
.resumo-item .pilula::before{margin:0 2px}

/* Programação da Semana + Amanhã + Rodada de hoje lado a lado em tela larga — três cartões
   compactos numa linha só, em vez de empilhados ocupando a rolagem toda da página. */
.cartoes-resumo-dia{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-4);align-items:start}
.cartao-compacto{padding:var(--espaco-4)}
.cartao-compacto h2,.cartao-compacto h3{font-size:var(--texto-md);margin:0 0 var(--espaco-2)}

@media(max-width:1100px){
.cartoes-resumo-dia{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
.semana-grade{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78vw;overflow-x:auto;padding-bottom:var(--espaco-2)}
.cartoes-resumo-dia{grid-template-columns:1fr}
}

/* ===== Componentes reaproveitados no redesenho (Painel, Eventos, Publicações, Créditos IA,
   Configurações) ===== */
.card-cabecalho{display:flex;align-items:flex-start;gap:var(--espaco-3);margin-bottom:var(--espaco-4)}
.card-cabecalho-icone{width:40px;height:40px;border-radius:var(--raio-md);background:#e0e7ff;color:var(--cor-destaque);display:flex;align-items:center;justify-content:center;flex:none}
.card-cabecalho-texto{min-width:0}
.card-cabecalho-texto h2,.card-cabecalho-texto h3{margin:0}
.card-cabecalho-texto p{margin:2px 0 0;color:var(--cinza-600);font-size:var(--texto-sm)}
.card-cabecalho-acao{margin-left:auto;flex:none}

.indicadores-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--espaco-4);margin-bottom:var(--espaco-5)}
.indicador{background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-lg);padding:var(--espaco-4) var(--espaco-5);box-shadow:var(--sombra-sm);display:flex;align-items:center;gap:var(--espaco-4)}
.indicador-icone{width:44px;height:44px;border-radius:var(--raio-md);display:flex;align-items:center;justify-content:center;flex:none;background:#dbeafe;color:var(--cor-destaque)}
.indicador-corpo{min-width:0}
.indicador-corpo strong{display:block;font-size:var(--texto-2xl);font-weight:800;line-height:1.15}
.indicador-corpo span{display:block;font-size:var(--texto-sm);color:var(--cinza-600)}

.colunas-2{display:grid;grid-template-columns:2fr 1fr;gap:var(--espaco-5);align-items:start}
@media(max-width:1100px){.colunas-2{grid-template-columns:1fr}}

.colunas-2-iguais{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-5);align-items:start}
@media(max-width:1100px){.colunas-2-iguais{grid-template-columns:1fr}}

/* stretch (não start): no Painel, a primeira linha de 3 colunas tem "Próximas publicações" (1
   cartão) ao lado de colunas com 2 cartões empilhados — com align-items:start, a coluna mais curta
   parava aí, deixando um vazio na altura da página logo abaixo dela (não coberto por fundo nenhum,
   já que a linha seguinte só começa depois da coluna MAIS alta). Com stretch, o grid já estica a
   caixa do item até a altura da linha automaticamente — .card, tendo fundo/borda próprios e
   nenhuma altura fixa, absorve esse espaço como parte do próprio cartão (visualmente contínuo) em
   vez de deixar buraco no fundo da página. Não precisa de flex/height:100% adicional: é o
   comportamento padrão do CSS Grid para itens sem align-self próprio. */
.colunas-3-iguais{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-5);align-items:stretch}
@media(max-width:1300px){.colunas-3-iguais{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.colunas-3-iguais{grid-template-columns:1fr}}

/* ===== Abas (Eventos, Configurações) ===== */
.abas{display:flex;gap:var(--espaco-1);border-bottom:1px solid var(--cinza-200);margin-bottom:var(--espaco-5);flex-wrap:wrap;overflow-x:auto}
.aba{padding:var(--espaco-3) var(--espaco-4);border:0;background:none;font-weight:700;font-size:var(--texto-sm);color:var(--cinza-600);border-bottom:3px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:0}
.aba:hover{background:none;filter:none;color:var(--cinza-900)}
.aba.ativa{color:var(--cor-destaque);border-bottom-color:var(--cor-destaque)}
.aba-contador{background:var(--cinza-100);color:var(--cinza-600);border-radius:var(--raio-pill);padding:1px 8px;font-size:var(--texto-xs);font-weight:700}
.aba.ativa .aba-contador{background:#dbeafe;color:var(--cor-destaque)}

/* ===== Filtros (Publicações, Eventos) ===== */
.filtros{display:flex;align-items:center;gap:var(--espaco-3);flex-wrap:wrap;margin-bottom:var(--espaco-4)}
.filtros-busca{position:relative;flex:1;min-width:220px}
.filtros-busca svg{position:absolute;left:var(--espaco-3);top:50%;transform:translateY(-50%);color:var(--cinza-400)}
.filtros-busca input{padding-left:calc(var(--espaco-3) + 22px)}
.filtros select{min-width:140px;width:auto}

/* ===== Barra de seleção múltipla (Publicações) ===== */
.barra-selecao{position:sticky;bottom:var(--espaco-4);display:flex;align-items:center;gap:var(--espaco-4);flex-wrap:wrap;padding:var(--espaco-3) var(--espaco-5);background:var(--cinza-900);color:#fff;border-radius:var(--raio-lg);box-shadow:var(--sombra-md)}
/* Sem isso, a barra aparecia com "0 selecionada(s)" mesmo antes de marcar qualquer item: regra de
   autor (mesma especificidade de [hidden] da UA stylesheet) vence a regra do navegador — display:flex
   nunca era desligado só pelo atributo hidden sozinho. */
.barra-selecao[hidden]{display:none}
.barra-selecao strong{font-weight:700}
.barra-selecao a{color:#93c5fd}
.barra-selecao .tabela-acoes{margin-left:auto}

/* ===== Miniatura pequena em linha de tabela (Eventos) ===== */
.miniatura-linha{width:36px;height:36px;border-radius:var(--raio-sm);object-fit:cover;flex:none;background:var(--cinza-100)}
.miniatura-linha-vazia{width:36px;height:36px;border-radius:var(--raio-sm);background:var(--cinza-100);color:var(--cinza-400);display:flex;align-items:center;justify-content:center;flex:none}
.linha-com-miniatura{display:flex;align-items:center;gap:var(--espaco-3)}

/* ===== Gráfico simples de barras (Painel) ===== */
.grafico-barras{display:flex;align-items:flex-end;gap:var(--espaco-4);height:140px;padding-top:var(--espaco-4)}
.grafico-barra-coluna{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.grafico-barra{width:100%;max-width:56px;background:var(--cor-destaque);border-radius:6px 6px 0 0;min-height:3px}
.grafico-barra-valor{font-size:var(--texto-xs);font-weight:700;color:var(--cinza-700)}
.grafico-barra-rotulo{font-size:var(--texto-xs);color:var(--cinza-500)}

@media(max-width:960px){
.indicadores-grade{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.barra-selecao{flex-direction:column;align-items:stretch}
.barra-selecao .tabela-acoes{margin-left:0}
}

@media(max-width:800px){
.hero{grid-template-columns:1fr}
.topo{align-items:flex-start;flex-direction:column}
.topo nav{font-size:var(--texto-sm)}
.conteudo{padding:var(--espaco-5) var(--espaco-4)}
}
@media(max-width:700px){
.tabela{display:block;overflow-x:auto;white-space:nowrap}
}

/* ===== Páginas públicas de conta (Entrar, Solicitar acesso, Ativar, Acesso negado, Erro) —
   Fase 6 ===== */
.pagina-auth{max-width:1140px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--espaco-7);align-items:center;padding:var(--espaco-7) 0}
.pagina-auth h1{font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1.05;margin:0 0 var(--espaco-4)}
.pagina-auth-beneficios{display:flex;flex-direction:column;gap:var(--espaco-4);margin:var(--espaco-5) 0}
.pagina-auth-beneficio{display:flex;gap:var(--espaco-3);align-items:flex-start}
.pagina-auth-beneficio-icone{width:44px;height:44px;border-radius:var(--raio-md);background:#e0e7ff;color:var(--cor-destaque);display:flex;align-items:center;justify-content:center;flex:none}
.pagina-auth-beneficio strong{display:block}
.pagina-auth-beneficio span{color:var(--cinza-600);font-size:var(--texto-sm)}
.pagina-auth-cartao{background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-lg);box-shadow:var(--sombra-md);padding:var(--espaco-6)}
.pagina-auth-cartao h1{font-size:var(--texto-2xl);margin-bottom:var(--espaco-2)}
.pagina-auth-cartao>p{color:var(--cinza-600);margin:0 0 var(--espaco-5)}
@media(max-width:900px){.pagina-auth{grid-template-columns:1fr;padding:var(--espaco-5) 0}}

/* Cartão centralizado simples, sem a coluna de mensagem — Ativar conta, Acesso negado, Erro. */
.pagina-auth-solo{max-width:520px;margin:auto;padding:var(--espaco-7) 0}
.pagina-auth-solo .pagina-auth-cartao{text-align:left}

/* Ícone dentro do campo (E-mail, Senha) + botão de mostrar/ocultar senha. */
.campo-icone{position:relative}
.campo-icone svg{position:absolute;left:var(--espaco-3);top:50%;transform:translateY(-50%);color:var(--cinza-400);pointer-events:none}
.campo-icone input{padding-left:calc(var(--espaco-3) + 26px)}
.campo-icone input[type=password],.campo-icone input[data-senha]{padding-right:calc(var(--espaco-3) + 30px)}
.alternar-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;min-height:0;color:var(--cinza-500)}
.alternar-senha:hover{background:var(--cinza-100);filter:none}

.pagina-auth-icone-topo{width:56px;height:56px;border-radius:var(--raio-lg);background:#e0e7ff;color:var(--cor-destaque);display:flex;align-items:center;justify-content:center;margin:0 auto var(--espaco-4)}

/* ===== Assistente IA — layout de chat (Fase 7) ===== */
.assistente-layout{display:grid;grid-template-columns:300px 1fr;gap:var(--espaco-5);align-items:start}
@media(max-width:900px){.assistente-layout{grid-template-columns:1fr}}
.assistente-conversas{display:flex;flex-direction:column;gap:2px;max-height:70vh;overflow-y:auto}
.assistente-conversa-item{display:block;padding:var(--espaco-3);border-radius:var(--raio-md);text-decoration:none;color:inherit}
.assistente-conversa-item:hover{background:var(--cinza-100)}
.assistente-conversa-item.ativa{background:#e0e7ff}
.assistente-conversa-item strong{display:block;font-size:var(--texto-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assistente-conversa-item span{display:block;font-size:var(--texto-xs);color:var(--cinza-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.assistente-mensagens{display:flex;flex-direction:column;gap:var(--espaco-4);margin-bottom:var(--espaco-5);max-height:60vh;overflow-y:auto;padding:var(--espaco-2)}
.assistente-linha{display:flex;gap:var(--espaco-3);max-width:82%}
.assistente-linha.Usuario{margin-left:auto;flex-direction:row-reverse}
.assistente-avatar{width:32px;height:32px;border-radius:50%;background:var(--cor-destaque);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.assistente-linha.Usuario .assistente-avatar{background:var(--cinza-700)}
.assistente-corpo-mensagem{min-width:0}
.assistente-bolha{background:var(--cinza-100);border-radius:var(--raio-md);padding:var(--espaco-3) var(--espaco-4);white-space:pre-wrap;word-break:break-word}
.assistente-linha.Usuario .assistente-bolha{background:var(--cor-destaque);color:var(--cor-destaque-contraste)}
.assistente-hora{display:block;margin-top:4px;font-size:10px;color:var(--cinza-500)}
.assistente-linha.Usuario .assistente-corpo-mensagem{text-align:right}

/* Lista de Publicações (P2): linha clicável, marcação de vencida, cabeçalho ordenável e a barra
   de paginação. .linha-vencida ganha uma faixa vermelha à esquerda em vez de pintar a linha
   inteira — a cor de fundo do hover e a das pílulas de status continuam legíveis por cima. */
.tabela tbody tr[data-abrir-linha]{cursor:pointer}
.tabela tbody tr.linha-vencida td:first-child{box-shadow:inset 3px 0 0 var(--cor-erro)}
.tabela tbody tr.linha-vencida{background:var(--cor-erro-bg)}
.tabela tbody tr.linha-vencida:hover{background:#fbd5d5}
.tabela-ordenar{color:inherit;text-decoration:none;white-space:nowrap}
.tabela-ordenar:hover{text-decoration:underline}
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:var(--espaco-4);flex-wrap:wrap;margin-top:var(--espaco-4)}
.paginacao .ajuda-campo{margin:0}
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* P3.2: cartão de indicador como link (Painel). Herda o layout de .indicador; o que muda é tirar o
   sublinhado/cor de link do texto e dar realce no hover e no foco de teclado. */
a.indicador{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.indicador:hover{border-color:var(--cor-destaque);box-shadow:var(--sombra-md);transform:translateY(-1px)}
a.indicador:focus-visible{outline:2px solid var(--cor-destaque);outline-offset:2px}

/* P2.2: bloco "Arte que vai ser publicada" na tela da publicação — precisa saltar aos olhos, porque
   é a resposta para "qual das duas vai para o Instagram". */
.destaque-arte-ativa{border-left:4px solid var(--cor-destaque)}
.arte-ativa-lista{display:flex;flex-direction:column;gap:var(--espaco-3)}
.arte-ativa-item{display:flex;align-items:center;gap:var(--espaco-4)}
.arte-ativa-item strong{display:block;overflow-wrap:anywhere}
.arte-ativa-item .ajuda-campo{margin:2px 0 0}
.arte-ativa-miniatura{width:72px;height:96px;object-fit:cover;border-radius:var(--raio-sm);background:var(--cinza-100);flex:none}
.arte-historico-miniatura{width:100%;max-width:120px;height:120px;object-fit:cover;border-radius:var(--raio-sm);background:var(--cinza-100);opacity:.75;margin-bottom:var(--espaco-2)}

/* E2.3: arte cuja cópia local a limpeza automática apagou. Precisa parecer informação, não erro do
   sistema — daí o tom neutro (cinza), e não vermelho de alerta. */
.arte-removida{display:flex;align-items:center;gap:var(--espaco-2);background:var(--cinza-100);color:var(--cinza-600);border:1px dashed var(--cinza-300);border-radius:var(--raio-sm);padding:var(--espaco-2);box-sizing:border-box}
.arte-removida-icone{flex:none;display:flex;align-items:center}
.arte-removida-texto{font-size:var(--texto-xs);line-height:1.3}

/* Parte 1: ocorrência cancelada no Plano semanal. Esmaecida e sem cor de estado — não é pendência,
   não deve competir por atenção com o que ainda precisa de alguém. O menu de ações (Reativar)
   continua com opacidade cheia, senão a saída fica escondida junto. */
.dia-card-cancelado{opacity:.55;filter:grayscale(.6)}
.dia-card-cancelado:hover,.dia-card-cancelado:focus-within{opacity:1;filter:none}
.dia-card-cancelado .dia-card-acoes{opacity:1;filter:none}

/* Parte 2: a linha curta que diz o que cada ação do menu "…" faz depois. Fica abaixo do botão,
   menor e em cinza — é explicação, não ação. */
.menu-acoes-ajuda{display:block;font-size:var(--texto-xs);line-height:1.3;color:var(--cinza-500);margin:2px 0 var(--espaco-2);max-width:26ch}

/* Parte 4: os quatro indicadores de Publicações viraram filtro. Herdam o visual de .indicador; o que
   muda é tirar a cara de link do texto e marcar o que está valendo. */
a.indicador-filtro{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.indicador-filtro:hover{border-color:var(--cor-destaque);box-shadow:var(--sombra-md);transform:translateY(-1px)}
a.indicador-filtro:focus-visible{outline:2px solid var(--cor-destaque);outline-offset:2px}
a.indicador-filtro.ativo{border-color:var(--cor-destaque);box-shadow:inset 0 0 0 1px var(--cor-destaque)}
a.indicador-filtro.ativo .indicador-icone{background:var(--cor-destaque);color:var(--cor-destaque-contraste)}

/* Parte 6: "Artes anteriores". Arte se reconhece OLHANDO — a miniatura de ~40px obrigava a decidir
   pelo NOME do arquivo, que costuma ser "WhatsApp Image 2026-09-27 at 01.01.44.jpeg" e não
   identifica nada. Cartão grande, imagem com proporção preservada, nome em segundo plano. */
.grade-artes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--espaco-4);margin-bottom:var(--espaco-5)}
.cartao-arte{background:var(--cinza-0);border:1px solid var(--cinza-200);border-radius:var(--raio-md);overflow:hidden;box-shadow:var(--sombra-sm);display:flex;flex-direction:column}
.cartao-arte-imagem{display:block;width:100%;padding:0;border:0;background:var(--cinza-100);cursor:zoom-in;line-height:0}
.cartao-arte-imagem img,.cartao-arte-imagem .arte-removida{display:block;width:100%;height:260px;object-fit:contain;background:var(--cinza-100);box-sizing:border-box}
.cartao-arte-imagem:focus-visible{outline:2px solid var(--cor-destaque);outline-offset:-2px}
.cartao-arte-corpo{padding:var(--espaco-3);display:flex;flex-direction:column;gap:var(--espaco-2);min-width:0}
.cartao-arte-periodo{font-size:var(--texto-sm);line-height:1.3}
/* Nome de arquivo longo (200 caracteres acontece) não pode esticar nem estourar o cartão. */
.cartao-arte-nome{margin:0;font-size:var(--texto-xs);color:var(--cinza-500);overflow-wrap:anywhere;word-break:break-word;max-height:3.2em;overflow:hidden}
.cartao-arte .pilula{align-self:flex-start}

.dialogo-arte{border:0;border-radius:var(--raio-lg);padding:0;max-width:min(92vw,720px);box-shadow:var(--sombra-md)}
.dialogo-arte::backdrop{background:rgba(15,23,42,.65)}
.dialogo-arte-imagem{display:block;max-width:100%;max-height:68vh;margin:auto;background:var(--cinza-100)}
.dialogo-arte-texto{padding:var(--espaco-4);display:flex;flex-direction:column;gap:var(--espaco-3)}
.dialogo-arte-fechar{display:flex;justify-content:flex-end;padding:var(--espaco-2) var(--espaco-2) 0}
.dialogo-arte-fechar button{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--cinza-500);padding:0 var(--espaco-2)}
.cartao-arte-sem-imagem{width:100%}

/* Parte 4: "onde vai sair" na publicação manual. A caixa do Facebook continua visível porque
   publicar no Facebook está no roteiro, mas desabilitada — e precisa PARECER desabilitada, senão a
   pessoa tenta clicar e conclui que a tela está quebrada. */
.rotulo-campo{display:block;font-weight:600;font-size:var(--texto-sm);margin-bottom:var(--espaco-2)}
.opcao-rede{display:flex;align-items:center;gap:var(--espaco-2);font-weight:500}
.opcao-rede input{margin:0}
.opcao-rede-indisponivel{color:var(--cinza-400);cursor:not-allowed}