/* Postei — camada de VISUAL (01/11/2026): tres jeitos de ver o mesmo app, escolhidos no menu da conta.
   Luz (padrao, claro e arejado), Noite (azul-escuro da marca) e Foco (papel claro com titulos em serifa).
   Carregada DEPOIS de postei.css: so' troca cores, formas e a posicao do menu. Nao muda texto, estrutura de tela,
   formulario nem nenhuma regra de seguranca. O atributo data-visual no <html> e' colocado pelo script do <head> de
   _base.html e por tema.js; "noite" tambem poe data-theme="escuro" (assim tudo que ja' tinha tema escuro continua valendo). */

/* ===================== LUZ (padrao) ===================== */
html[data-visual="luz"] {
  --bg-0: #F5F5F7; --bg-1: #F5F5F7; --fundo-pagina: #F5F5F7;
  --topbar-fundo: rgba(248, 248, 250, 0.82); --topbar-borda: #E4E4E9;
  --cartao-topo-largura: 0px; --cartao-topo-cor: transparent;
  --cor-h2: #1D1D1F; --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-nav: rgba(248, 248, 250, 0.86);
  --borda: #E4E4E9; --borda-celula: #C4C4CC; --celula-fundo: #F0F0F4; --borda-forte: #B9B9C2;
  --hover-fundo: rgba(0, 0, 0, 0.04);
  --texto: #1D1D1F; --texto-suave: #5F5F66;
  --primaria: #2F6FED; --primaria-2: #2F6FED; --primaria-fundo: #E6EEFE; --primaria-texto: #1B4FBF; --primaria-forte: #1F57C9;
  --sucesso: #34C759; --sucesso-fundo: #E1F5E7; --sucesso-texto: #11763A;
  --alerta: #D98A00; --alerta-fundo: #FFF0D9; --alerta-texto: #85500A;
  --erro: #C8102E; --erro-fundo: #FBE4E7;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
  --sobre-primaria: #FFFFFF;
  --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raio-cartao: 24px; --raio-botao: 999px; --raio-campo: 12px; --raio-chip: 999px;
  --lateral-fundo: rgba(255, 255, 255, 0.55); --lateral-ativo: rgba(47, 111, 237, 0.10);
}

/* ===================== NOITE ===================== */
html[data-visual="noite"] {
  --bg-0: #0B1E2D; --bg-1: #0B1E2D;
  --fundo-pagina: radial-gradient(120% 60% at 80% -10%, #15405F 0%, #0B1E2D 55%) #0B1E2D;
  --topbar-fundo: rgba(11, 30, 45, 0.82); --topbar-borda: rgba(255, 255, 255, 0.08);
  --cartao-topo-largura: 1px; --cartao-topo-cor: rgba(255, 255, 255, 0.09);
  --cor-h2: #F1F6FA; --bg-card: rgba(255, 255, 255, 0.06); --bg-input: rgba(255, 255, 255, 0.07); --bg-nav: rgba(11, 30, 45, 0.9);
  --borda: rgba(255, 255, 255, 0.10); --borda-celula: rgba(255, 255, 255, 0.28); --celula-fundo: rgba(255, 255, 255, 0.07); --borda-forte: rgba(255, 255, 255, 0.28);
  --hover-fundo: rgba(255, 255, 255, 0.06);
  --texto: #F1F6FA; --texto-suave: #A3B6C8;
  --primaria: #6EA8FF; --primaria-2: #6EA8FF; --primaria-fundo: rgba(110, 168, 255, 0.18); --primaria-texto: #A5C9FF; --primaria-forte: #8DBBFF;
  --sucesso: #2EBFA5; --sucesso-fundo: rgba(61, 217, 192, 0.16); --sucesso-texto: #62E6CC;
  --alerta: #FFB84D; --alerta-fundo: rgba(255, 184, 77, 0.16); --alerta-texto: #FFCB7A;
  --erro: #FF9A9A; --erro-fundo: rgba(255, 120, 120, 0.14);
  --sombra: none;
  --sobre-primaria: #06172A;
  --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raio-cartao: 20px; --raio-botao: 14px; --raio-campo: 12px; --raio-chip: 999px;
  --lateral-fundo: rgba(255, 255, 255, 0.03); --lateral-ativo: rgba(110, 168, 255, 0.16);
}

/* ===================== FOCO ===================== */
html[data-visual="foco"] {
  --bg-0: #FAF7F2; --bg-1: #FAF7F2; --fundo-pagina: #FAF7F2;
  --topbar-fundo: #FAF7F2; --topbar-borda: #E7DFD2;
  --cartao-topo-largura: 1px; --cartao-topo-cor: #E7DFD2;
  --cor-h2: #17140F; --bg-card: #FFFDF9; --bg-input: #FFFDF9; --bg-nav: #FFFDF9;
  --borda: #E7DFD2; --borda-celula: #CDC2B1; --celula-fundo: #F1ECE3; --borda-forte: #BDB19E;
  --hover-fundo: rgba(23, 20, 15, 0.045);
  --texto: #17140F; --texto-suave: #645C52;
  --primaria: #2F6FED; --primaria-2: #2F6FED; --primaria-fundo: #E7EEFC; --primaria-texto: #1B4FBF; --primaria-forte: #1F57C9;
  --sucesso: #3B9B54; --sucesso-fundo: #E4F1E4; --sucesso-texto: #1D6130;
  --alerta: #C98A1B; --alerta-fundo: #FBEBD0; --alerta-texto: #7A4A06;
  --erro: #B42318; --erro-fundo: #FBE3E0;
  --sombra: none;
  --sobre-primaria: #FFFFFF;
  --fonte-titulo: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --raio-cartao: 18px; --raio-botao: 999px; --raio-campo: 12px; --raio-chip: 999px;
  --lateral-fundo: transparent; --lateral-ativo: #F1ECE3;
}

/* ===================== Formas comuns aos tres ===================== */
html[data-visual] body { background-attachment: fixed; }
html[data-visual] .topbar { -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); position: sticky; top: 0; z-index: 45; }
html[data-visual] .cartao { border-radius: var(--raio-cartao); }
html[data-visual] .cartao { border-top: var(--cartao-topo-largura) solid var(--cartao-topo-cor); }
html[data-visual] .btn { border-radius: var(--raio-botao); }
html[data-visual] input[type="text"], html[data-visual] input[type="email"], html[data-visual] input[type="password"],
html[data-visual] input[type="number"], html[data-visual] input[type="file"], html[data-visual] textarea, html[data-visual] select { border-radius: var(--raio-campo); }
html[data-visual] .chip { border-radius: var(--raio-chip); padding: 4px 12px; }
html[data-visual] .secao-painel, html[data-visual] fieldset { border-radius: var(--raio-cartao); }
html[data-visual] .menu-conta-painel, html[data-visual] .modal-caixa, html[data-visual] .carregando-caixa { border-radius: var(--raio-cartao); }
html[data-visual] .botao-conta, html[data-visual] .menu-conta-avatar { background: var(--primaria); color: var(--sobre-primaria); }
html[data-visual] a.cartao:hover, html[data-visual] .cartao-link:hover { border-color: var(--primaria); }
html[data-visual] .logo-texto { letter-spacing: -0.01em; }
html[data-visual] .lista-postagens li, html[data-visual] .miniatura-clicavel { border-radius: 14px; }
html[data-visual] .grade-fotos img { border-radius: 16px; }
html[data-visual] .botao-tema { border-color: var(--borda); }
html[data-visual="noite"] .btn-primario { box-shadow: 0 8px 24px rgba(110, 168, 255, 0.28); }
html[data-visual="noite"] .menu-conta-painel { background: #12293b; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
html[data-visual="noite"] .botao-conta, html[data-visual="noite"] .menu-conta-avatar { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ===================== Titulos ===================== */
html[data-visual="luz"] h1, html[data-visual="noite"] h1 { font-weight: 700; font-size: 33px; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
html[data-visual="foco"] h1 { font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
html[data-visual="foco"] h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
html[data-visual="luz"] h2, html[data-visual="noite"] h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
html[data-visual] .subtitulo { font-size: 16px; line-height: 1.5; }
@media (min-width: 640px) {
  html[data-visual="luz"] h1 { font-size: 44px; line-height: 1.08; }
  html[data-visual="noite"] h1 { font-size: 40px; line-height: 1.1; }
  html[data-visual="foco"] h1 { font-size: 58px; line-height: 1.04; }
}

/* ===================== Menu de baixo (celular) ===================== */
html[data-visual] .bottomnav { -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid var(--borda); }
html[data-visual] .bottomnav a { border-top: 0; border-radius: 14px; margin: 4px 2px; min-height: 56px; }
html[data-visual] .bottomnav a.ativo { background: transparent; color: var(--primaria-texto); border-top: 0; }
html[data-visual="foco"] .bottomnav a.ativo { background: #F1ECE3; color: var(--texto); }
html[data-visual="foco"] .bottomnav { margin: 0 14px 14px; border: 1px solid var(--borda); border-radius: 999px; box-shadow: 0 10px 30px rgba(23, 20, 15, 0.12); bottom: 10px; }
html[data-visual="foco"] .bottomnav a { border-radius: 999px; }
html[data-visual="foco"] .bottomnav-admin { border-bottom: 0; }

/* ===================== Computador: menu lateral (Luz e Noite) e menu no topo (Foco) ===================== */
@media (min-width: 1000px) {
  html[data-visual] .pagina:has(> .bottomnav) {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "sup sup" "top top" "nav main";
    align-content: start;
  }
  html[data-visual] .pagina:has(> .bottomnav) > .faixa-suporte { grid-area: sup; }
  html[data-visual] .pagina:has(> .bottomnav) > .topbar { grid-area: top; }
  html[data-visual] .pagina:has(> .bottomnav) > .conteudo { grid-area: main; padding: 24px 40px 48px; }
  html[data-visual] .pagina:has(> .bottomnav) > .conteudo.largo { max-width: 1040px; }
  html[data-visual] .pagina:has(> .bottomnav) > .bottomnav {
    grid-area: nav; position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px);
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px;
    padding: 18px 14px; border-top: 0; border-right: 1px solid var(--borda); background: var(--lateral-fundo);
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
  }
  html[data-visual] .bottomnav-abas { flex-direction: column; justify-content: flex-start; gap: 4px; }
  html[data-visual] .bottomnav a, html[data-visual] .bottomnav-abas a {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; margin: 0; padding: 0 14px;
    font-size: 15.5px; font-weight: 600; text-align: left; border-radius: 12px; color: var(--texto);
  }
  html[data-visual] .bottomnav a svg { width: 22px; height: 22px; color: var(--texto-suave); }
  html[data-visual] .bottomnav a.ativo { background: var(--lateral-ativo); color: var(--primaria-texto); }
  html[data-visual] .bottomnav a.ativo svg { color: var(--primaria-texto); }
  html[data-visual] .bottomnav-admin { flex-direction: column; gap: 4px; padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--borda); }
  html[data-visual] .bottomnav-admin a { border: 0; border-radius: 12px; min-height: 44px; padding: 0 14px; color: var(--texto-suave); }
  html[data-visual] .bottomnav-admin a.ativo { background: var(--lateral-ativo); color: var(--primaria-texto); }

  /* Foco: o menu vira uma linha de pilulas logo abaixo do topo, no meio da tela */
  html[data-visual="foco"] .pagina:has(> .bottomnav) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "sup" "top" "nav" "main"; grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  html[data-visual="foco"] .pagina:has(> .bottomnav) > .bottomnav {
    position: static; height: auto; flex-direction: row; justify-content: center; align-items: center; margin: 14px auto 0; width: auto;
    padding: 6px; border: 1px solid var(--borda); border-radius: 999px; background: var(--bg-card); box-shadow: none; bottom: auto;
  }
  html[data-visual="foco"] .bottomnav-abas { flex-direction: row; gap: 2px; }
  html[data-visual="foco"] .bottomnav a, html[data-visual="foco"] .bottomnav-abas a { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
  html[data-visual="foco"] .bottomnav a svg { width: 20px; height: 20px; }
  html[data-visual="foco"] .bottomnav a.ativo { background: #F1ECE3; color: var(--texto); }
  html[data-visual="foco"] .bottomnav-admin { flex-direction: row; border: 0; padding: 0 8px 0 0; margin: 0 6px 0 0; border-right: 1px solid var(--borda); }
  html[data-visual="foco"] .pagina:has(> .bottomnav) > .conteudo.largo { max-width: 780px; }
}

/* ===================== Seletor de visual (dentro do menu da conta) ===================== */
.visual-bloco { padding: 10px 12px 8px; border-top: 1px solid var(--borda); margin-top: 4px; }
.visual-bloco-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.visual-opcoes { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--celula-fundo); }
.visual-opcoes button {
  flex: 1 1 0; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-suave);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.visual-opcoes button[aria-pressed="true"] { background: var(--bg-card); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
html[data-visual="noite"] .visual-opcoes button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); }

/* ===================== "Ver o resto" do Inicio (Foco) ===================== */
.resto-conteudo { display: flex; flex-direction: column; gap: 16px; }
html[data-visual="luz"] .resto > summary, html[data-visual="noite"] .resto > summary { display: none; }
html[data-visual="foco"] .resto > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--bg-card); color: var(--texto); font-weight: 600;
}
html[data-visual="foco"] .resto > summary::-webkit-details-marker { display: none; }
html[data-visual="foco"] .resto > summary::after { content: "\25BE"; font-size: 0.9em; }
html[data-visual="foco"] .resto[open] > summary::after { content: "\25B4"; }
html[data-visual="foco"] .resto[open] > .resto-conteudo { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { html[data-visual] * { transition: none !important; } }