/* Netiar 2026 — mesmo sistema de design da plataforma atual (paleta oficial
   ver netiar.com.br/cores/: fundo claro, verde "Padrao" para destaques,
   cantos em pilula) + os componentes de feed social e navegacao lateral/
   flutuante criados no protótipo em new/. Um unico arquivo, ja que este e um
   projeto novo (nao precisa reconciliar com nada legado). */

:root {
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --scale-1: #D5EFDB;
    --scale-2: #9BCB94;
    --scale-3: #6AA26C;
    --scale-4: #2CA044;
    --scale-5: #416635;
    --scale-6: #263920;
    --scale-7: #0F1A13;
    --neon-1: #DCF8E9;
    --neon-2: #C1D24D;
    --neon-3: #B6FE00;
    --brand-red: #F0441E;
    --brand-orange: #F6A01A;

    --ink: var(--scale-7);
    --ink-soft: var(--scale-5);
    --ink-faint: var(--scale-3);
    --paper: #F6FBF8;
    --paper-raised: #FFFFFF;
    --paper-sunken: var(--neon-1);
    --line: var(--scale-1);
    --line-soft: #EAF7EF;
    --comment-resposta-bg: #E9E9EA;

    --accent: var(--scale-4);
    --accent-text: var(--scale-5);
    --accent-text-hover: var(--scale-6);
    --accent-soft: rgba(44,160,68,.12);
    --on-accent: #fff;

    --gold: var(--brand-orange);
    --gold-text: #9a5f00;
    --gold-soft: rgba(246,160,26,.14);
    --green: var(--scale-4);
    --green-soft: rgba(44,160,68,.12);
    --blue: var(--scale-3);
    --blue-soft: rgba(106,162,108,.14);

    --danger: var(--brand-red);
    --danger-text: #C2330F;
    --danger-soft: rgba(240,68,30,.10);

    --radius: 16px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(15,26,19,.05), 0 10px 24px rgba(15,26,19,.07);
    --shadow-lifted: 0 4px 10px rgba(15,26,19,.07), 0 18px 36px rgba(15,26,19,.09);

    --space-page-y: clamp(20px, 4vw, 40px);
    --space-page-x: clamp(16px, 3vw, 24px);
    --space-card: clamp(16px, 2.5vw, 24px);
    --text-h1: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
    --text-kpi: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
}

/* Dark mode: prefers-color-scheme (automatico) + [data-theme] (pronto pra um
   toggle manual futuro). So redefine tokens de cor — o resto do CSS nao
   precisa saber que o tema mudou. Mesmos pares AA ja validados no projeto
   atual (fotomarket-php/assets/css/style.css). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #EAF5EC;
        --ink-soft: #9BCB94;
        --ink-faint: #6AA26C;
        --paper: #0F1A13;
        --paper-raised: #16241C;
        --paper-sunken: #1B2B21;
        --line: #2A3D2C;
        --line-soft: #203023;
        --comment-resposta-bg: #2C2C2E;

        --accent: #3DBE5A;
        --accent-text: #3DBE5A;
        --accent-text-hover: #5AD877;
        --accent-soft: rgba(61,190,90,.16);
        --on-accent: var(--scale-7);

        --gold: var(--brand-orange);
        --gold-text: var(--brand-orange);
        --gold-soft: rgba(246,160,26,.16);
        --green: #3DBE5A;
        --green-soft: rgba(61,190,90,.16);
        --blue: #6AA26C;
        --blue-soft: rgba(106,162,108,.16);

        --danger: var(--brand-red);
        --danger-text: var(--brand-red);
        --danger-soft: rgba(240,68,30,.16);

        --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.35);
        --shadow-lifted: 0 4px 10px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.4);
    }
}
[data-theme="dark"] {
    --ink: #EAF5EC; --ink-soft: #9BCB94; --ink-faint: #6AA26C;
    --paper: #0F1A13; --paper-raised: #16241C; --paper-sunken: #1B2B21;
    --line: #2A3D2C; --line-soft: #203023; --comment-resposta-bg: #2C2C2E;
    --accent: #3DBE5A; --accent-text: #3DBE5A; --accent-text-hover: #5AD877;
    --accent-soft: rgba(61,190,90,.16); --on-accent: var(--scale-7);
    --gold-text: var(--brand-orange); --gold-soft: rgba(246,160,26,.16); --green: #3DBE5A; --green-soft: rgba(61,190,90,.16);
    --blue: #6AA26C; --blue-soft: rgba(106,162,108,.16);
    --danger-text: var(--brand-red); --danger-soft: rgba(240,68,30,.16);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.35);
    --shadow-lifted: 0 4px 10px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

html { scrollbar-color: var(--scale-2) var(--paper); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--scale-2); border-radius: 99px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--scale-3); }
::selection { background: var(--accent-text); color: var(--on-accent); }

body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse 1100px 620px at 18% -8%, rgba(44,160,68,.07), transparent 60%),
        radial-gradient(ellipse 900px 520px at 100% 0%, rgba(246,160,26,.05), transparent 55%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; }
.accent-em { font-style: italic; color: var(--accent-text); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Barra de topo ---------- */

.topbar { background: var(--accent); position: sticky; top: 0; z-index: 70; }
.topbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--space-page-x);
    height: 60px; display: flex; align-items: center; gap: 18px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand .brand-full { height: 27px; width: auto; display: block; }
.brand .brand-icon { height: 31px; width: auto; display: none; }

.topbar-search { flex: 1; max-width: 420px; position: relative; display: flex; align-items: center; }
.topbar-search input[type=search] {
    width: 100%; border: none; border-radius: var(--radius-pill);
    padding: 9px 44px 9px 16px; font-size: 13.5px; font-family: inherit;
    background: var(--paper-raised); color: var(--ink);
}
.topbar-search input[type=search]:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.topbar-search input[type=search]::placeholder { color: var(--ink-faint); }
/* Lupa = botão de buscar, dentro da caixa à direita (pedido do Carlos, 30/09)
   — mesmas cores do .btn-primary; no Guia pega a cor do setor (guia.css). */
.topbar-search-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-text); color: var(--on-accent);
    transition: background .15s ease;
}
.topbar-search-btn:hover { background: var(--accent-text-hover); }
.topbar-search-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.topbar-search-btn svg { width: 15px; height: 15px; }

.topbar-user {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto;
    color: #fff; padding: 4px 12px 4px 4px; border-radius: var(--radius-pill);
    transition: background .15s ease;
}
.topbar-user:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.topbar-user:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.24); color: #fff; font-weight: 700; font-size: 13px;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-username { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }

.topbar-menu-btn {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease;
}
.topbar-menu-btn svg { width: 19px; height: 19px; }
.topbar-menu-btn:hover { background: rgba(255,255,255,.28); }
.topbar-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 760px) {
    .brand .brand-full { display: none; }
    .brand .brand-icon { display: block; }
    .topbar-inner { gap: 10px; }
    .topbar-username { display: none; }
    .topbar-user { padding: 4px; margin-left: 0; }
    /* Login/cadastro (auth-card) mantem a marca completa mesmo no mobile —
       so o topbar (menos espaco, ao lado de busca/avatar) reduz pro icone. */
    .auth-card .brand .brand-full { display: block; }
    .auth-card .brand .brand-icon { display: none; }
}

/* ---------- Dropdown (menu de opcoes) ---------- */

.dropdown { position: relative; }
.dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; left: auto;
    min-width: 220px; background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lifted); padding: 6px; z-index: 80;
}
.dropdown.open .dropdown-menu { display: block; animation: rise .15s ease both; }
.dropdown-menu a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; color: var(--ink); }
.dropdown-menu a:hover { background: var(--paper-sunken); text-decoration: none; color: var(--accent-text); }
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- Notificacoes (sino no topo) ---------- */

/* display:flex centralizando (nao line-height) de proposito — com
   box-sizing:border-box (regra global no topo deste arquivo) a border de 2px
   consome parte da altura de 16px, sobrando menos espaco de CONTEUDO do que
   uma line-height de 16px precisa — o numero cortava embaixo/em cima. */
.notificacao-contador {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--danger-text); color: #fff;
    font-size: 10px; font-weight: 700;
    border: 2px solid var(--accent);
}
.notificacoes-menu { width: 320px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; }
.notificacao-item {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    padding: 9px 10px; border-radius: 10px; font-size: 13px; color: var(--ink);
    background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none;
}
.notificacao-item:hover { background: var(--paper-sunken); text-decoration: none; }
.notificacao-item.nao-lida { background: var(--gold-soft); }
.notificacao-item.nao-lida:hover { background: var(--gold-soft); filter: brightness(0.97); }
/* .dropdown-menu a {display:block} é mais especifico que .notificacao-item e
   deixava remetente, texto e horario grudados numa linha só dentro do sino. */
.dropdown-menu .notificacao-item { display: flex; }
.notificacao-autor { font-weight: 700; line-height: 1.3; color: var(--ink); }
.notificacao-texto { line-height: 1.4; }
.notificacao-item.nao-lida .notificacao-texto { font-weight: 700; }
.notificacao-tempo { font-size: 11.5px; color: var(--ink-faint); }
.notificacao-marcar-lidas {
    display: block; width: 100%; text-align: center; padding: 8px 10px; border-radius: 10px;
    background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none;
    font-size: 12.5px; color: var(--accent-text); font-weight: 600;
}
.notificacao-marcar-lidas:hover { background: var(--paper-sunken); text-decoration: none; }
/* Mesmos .notificacao-item/.notificacao-texto/.notificacao-tempo do dropdown
   do sino, só com mais respiro — notificacoes/index.php tem a pagina
   inteira pra si, nao precisa ficar compacto. */
.notificacao-item-pagina { padding: 14px 12px; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.notificacao-item-pagina:last-child { border-bottom: none; }
.notificacao-item-pagina .notificacao-tempo { font-size: 12.5px; }

.mencao { color: var(--accent-text); font-weight: 700; }
.message-bubble-row.mine .message-bubble .mencao { color: var(--on-accent); text-decoration: underline; }

/* Link de mensagem (linkify_mensagem_whitelist) herda a cor padrao de <a>
   (var(--accent-text)) — mesmo tom do FUNDO do balao "minha" mensagem, o
   link ficava invisivel (texto e fundo na mesma cor). Mesma correcao ja
   aplicada a .mencao acima, mesmo motivo. */
.link-mensagem { text-decoration: underline; }
.message-bubble-row.mine .message-bubble .link-mensagem { color: var(--on-accent); }

/* Ancora de mensagem (link de notificacao de mencao, #mensagem-N) —
   scroll-margin compensa a .topbar sticky (60px) pra nao esconder o balao
   atras dela; o flash usa :target, sem JS nenhum. */
.message-bubble-row { scroll-margin-top: 76px; }
.message-bubble-row:target .message-bubble,
.message-bubble-row.mencao-foco .message-bubble { animation: destaque-mencao 2s ease; }

/* Barrinha "@ Menções a você ↑ 2 de 3 ↓" embaixo da conversa quando há 2+
   menções a quem está lendo (assets/js/app.js). */
.mencoes-nav { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--gold-soft); font-size: 13px; }
.mencoes-nav-rotulo { font-weight: 700; color: var(--gold-text); margin-right: auto; }
.mencoes-nav-posicao { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mencoes-nav .btn { padding: 4px 12px; }

/* Sugestões ao digitar @ — abrem pra cima, porque o campo fica no pé do card.
   Seletor com as 2 classes: .autocomplete-sugestoes vem depois no arquivo e
   reaplicaria o top (com top e bottom juntos a caixa achata). */
.autocomplete-sugestoes.mencao-sugestoes { top: auto; bottom: calc(100% + 4px); }
.mencao-sugestoes .autocomplete-item { justify-content: space-between; }
.mencao-sugestoes .autocomplete-item.ativo { background: var(--paper-sunken); }
@keyframes destaque-mencao {
    0%, 100% { box-shadow: none; }
    15%, 55% { box-shadow: 0 0 0 3px var(--gold); }
}

/* ---------- Layout com menu lateral ---------- */

.app-shell {
    max-width: 1280px; margin: 0 auto; padding: 20px var(--space-page-x) 100px;
    display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start;
}
.app-shell.com-lateral-direita { grid-template-columns: 232px minmax(0, 1fr) 280px; }

.side-nav {
    position: sticky; top: 20px; display: flex; flex-direction: column; gap: 4px;
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 12px;
}
.side-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-pill);
    color: var(--ink-soft); font-size: 14px; font-weight: 600; transition: background .15s ease, color .15s ease;
}
.side-nav-item:hover { background: var(--paper-sunken); color: var(--ink); text-decoration: none; }
.side-nav-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.side-nav-item.active { background: var(--accent-soft); color: var(--accent-text); }
.side-nav-item svg { flex-shrink: 0; width: 20px; height: 20px; }
.side-nav-divider { height: 1px; background: var(--line); margin: 8px 6px; }
.side-nav-badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--danger-text); color: #fff; font-size: 11px; font-weight: 700;
    line-height: 20px; text-align: center; flex-shrink: 0;
}

.floating-nav {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    max-width: calc(100vw - 32px); z-index: 80;
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lifted); padding: 8px; display: none; align-items: center; gap: 4px;
}
.floating-nav-group { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.floating-nav-group::-webkit-scrollbar { display: none; }
.floating-nav-item {
    position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-soft); transition: background .15s ease, color .15s ease;
}
.floating-nav-item svg { width: 21px; height: 21px; }
.floating-nav-item:hover, .floating-nav-item:focus-visible { background: var(--paper-sunken); color: var(--ink); }
.floating-nav-item.active { background: var(--accent-text); color: #fff; }
.floating-nav-contador { border-color: var(--paper-raised); }
/* Botao central: maior que os outros e puxado pra cima (margin-top negativo
   com o pai centralizado) pra "flutuar" acima da barra, tipo camera de app de
   rede social. A borda na cor da pagina separa ele visualmente do conteudo
   atras, ja que ele estoura o contorno da barra flutuante. */
.floating-nav-fab {
    flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; margin-top: -22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-text); color: var(--on-accent); border: 4px solid var(--paper);
    box-shadow: var(--shadow-lifted); transition: background .15s ease;
}
.floating-nav-fab svg { width: 25px; height: 25px; }
.floating-nav-fab:hover, .floating-nav-fab:focus-visible { background: var(--accent-text-hover); color: var(--on-accent); }

@media (max-width: 1080px) { .app-shell.com-lateral-direita { grid-template-columns: 220px minmax(0, 1fr); } .lateral-direita { display: none; } }
@media (max-width: 760px) {
    .app-shell, .app-shell.com-lateral-direita { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
    .side-nav { display: none; }
    .floating-nav { display: flex; }
    /* 3 colunas em vez de 4 no mobile — mais respiro pra apelido comprido
       nao ficar tao espremido antes mesmo do ellipsis entrar em acao. */
    .conexoes-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Layout geral / componentes base ---------- */

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; animation: rise .5s ease both; }
.page-header h1 { font-size: var(--text-h1); margin: 0 0 4px; color: var(--ink); }
.page-subtitle { margin: 0; color: var(--ink-soft); font-size: 14px; }
.page-header-actions { display: flex; gap: 8px; }

.sitefooter { max-width: 1280px; margin: 20px auto 0; padding: 24px var(--space-page-x); display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12.5px; border-top: 1px solid var(--line); }

.card {
    position: relative; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--space-card); margin-bottom: 20px; animation: rise .45s ease both;
}
.card::before, .card::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.3px solid var(--scale-2); opacity: .8; pointer-events: none; }
.card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.card::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.card h2 { font-size: 16.5px; margin: 0 0 14px; color: var(--ink); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- Grade de conexões (perfil/ver.php, "Minhas conexões") ---------- */

.conexoes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.conexoes-grid[hidden] { display: none; }
/* Até 6 por linha (menos em tela estreita) — perfil/indicacoes.php, pedido
   do Carlos 30/09. O max() dentro do minmax() nunca deixa passar de 6. */
.conexoes-grid-6 { grid-template-columns: repeat(auto-fill, minmax(max(86px, calc((100% - 20px) / 6)), 1fr)); }
.conexao-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    color: var(--ink); padding: 10px 4px; border-radius: 10px; transition: background .15s ease;
    /* min-width:0 e o pulo do gato: sem isso, um item de grid nao encolhe
       abaixo do tamanho intrinseco do conteudo, entao o text-overflow:ellipsis
       do span (abaixo) nunca tinha efeito nenhum — o nome comprido estourava
       a largura da grade inteira no mobile em vez de truncar. */
    min-width: 0;
}
.conexao-item[hidden] { display: none; }
.conexao-item:hover { background: var(--paper-sunken); text-decoration: none; }
.conexao-item span { font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Conexoes em comum (perfil/ver.php, linha abaixo do botao de amizade) ---------- */

.conexoes-comum-linha { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.conexoes-comum-avatares { display: flex; flex-shrink: 0; }
.conexoes-comum-avatar {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper-raised); margin-left: -8px;
    flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; color: #fff; background: var(--accent-text);
}
.conexoes-comum-avatares a:first-child .conexoes-comum-avatar { margin-left: 0; }
.conexoes-comum-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Especialidades dinâmicas (perfil/editar.php) ---------- */

.especialidade-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.especialidade-row input { flex: 1; }

/* ---------- Lotes de ingresso dinâmicos (eventos/index.php, eventos/editar.php, comunidades/detalhe.php) ---------- */

.lote-ingresso-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.lote-ingresso-nome { flex: 2; }
.lote-ingresso-preco { flex: 1; max-width: 130px; }
.lotes-ingresso-exibicao { margin-top: 12px; padding: 12px 14px; background: var(--paper-sunken); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; }
.lote-ingresso-exibicao-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }

/* ---------- Banner de cookies ---------- */

/* Caixa verde-escura da marca (pedido do Carlos, 29/09: branca, ela se
   confundia com os cards brancos da pagina). Mesma cor nos dois temas, entao
   os textos de dentro tem cor propria em vez de --ink/--ink-soft. */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250;
    max-width: 480px; margin: 0 auto;
    background: var(--scale-6); color: #F1FAF3; border: 1px solid rgba(182,254,0,.3); border-radius: var(--radius);
    box-shadow: var(--shadow-lifted); padding: 16px 18px; animation: rise .4s ease both;
}
.cookie-banner .text-muted { color: var(--scale-2); }
.cookie-banner .btn-primary { background: var(--neon-3); color: var(--scale-7); }
.cookie-banner .btn-primary:hover { background: #CBFF4D; box-shadow: none; }
.cookie-banner-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.cookie-banner-texto { margin: 0; font-size: 13.5px; flex: 1; min-width: 200px; }
.cookie-banner-detalhes-btn { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--neon-3); cursor: pointer; white-space: nowrap; font-family: inherit; }
.cookie-banner-detalhes-btn:hover { color: #fff; text-decoration: underline; }
.cookie-banner-detalhes { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 10px; }
.cookie-banner-detalhes[hidden] { display: none; }
.cookie-item { font-size: 12.5px; }
.cookie-item-toggle { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cookie-item-toggle input { margin-top: 3px; flex-shrink: 0; width: auto; }
.cookie-banner-acoes { margin-top: 14px; display: flex; justify-content: flex-end; }

/* ---------- Seletor de tema (dropdown do header) ---------- */

.dropdown-tema { padding: 4px 10px 8px; }
.dropdown-tema-rotulo { display: block; font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.dropdown-tema-opcoes { display: flex; gap: 4px; }
.dropdown-tema-btn { flex: 1; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: none; font-size: 12px; font-family: inherit; color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease; }
.dropdown-tema-btn:hover { background: var(--paper-sunken); }
.dropdown-tema-btn.active { background: var(--accent-soft); border-color: var(--accent-text); color: var(--accent-text); font-weight: 700; }

/* ---------- Cabecalho do perfil (perfil/ver.php) ---------- */
/* Foto + nome/@usuario/contadores dentro do MESMO card agora (antes ficava
   num .page-header separado, fora de qualquer card). */

.perfil-cabecalho { display: flex; gap: 18px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.perfil-cabecalho-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.perfil-cabecalho-info { min-width: 0; }
.perfil-cabecalho-info h1 { margin: 0 0 4px; }

/* ---------- Abas do perfil (Feed/Amigos/Comunidades/Mídias/Textos) ----------
   Em qualquer largura de tela, logo abaixo do cartão com as informações do
   perfil (pedido do Carlos, 30/09 — antes só existiam no celular, e o
   computador mostrava Comunidades + Feed empilhados). Uma aba por vez; no
   computador os botões dividem a largura, no celular a barra rola de lado. */
.perfil-abas { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 20px; scrollbar-width: none; }
.perfil-abas::-webkit-scrollbar { display: none; }
.perfil-aba-btn {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px;
    border-radius: var(--radius-pill); background: var(--paper-raised); border: 1px solid var(--line);
    color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.perfil-aba-btn:hover { border-color: var(--scale-2); color: var(--ink); }
.perfil-aba-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.perfil-aba-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.perfil-aba-btn.ativa { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
/* Pedidos de amizade/seguir esperando resposta (só no próprio perfil). */
.perfil-aba-contador {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.perfil-aba-painel { display: none; }
.perfil-aba-painel.ativa { display: block; }
@media (max-width: 760px) {
    .perfil-aba-btn { flex: 0 0 auto; font-size: 13px; padding: 8px 14px; }
}
/* ---------- Abas de Mensagens (Conversas diretas / Temas de comunidade) ----------
   Como as do perfil acima, ativas em qualquer largura — com muitas
   conversas diretas os temas de comunidade ficavam empurrados pra muito
   longe do topo. */
.mensagens-abas { display: flex; gap: 6px; margin-bottom: 16px; }
.mensagens-aba-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px;
    border-radius: var(--radius-pill); background: var(--paper-raised); border: 1px solid var(--line);
    color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.mensagens-aba-btn.ativa { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.mensagens-aba-painel[hidden] { display: none; }

/* Abas de Conexoes em comum (perfil/conexoes.php) — mesmo visual das abas
   de Mensagens acima, classes proprias só pra nao colidir com aquele
   seletor JS. */
.conexoes-abas { display: flex; gap: 6px; margin-bottom: 16px; }
.conexoes-aba-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px;
    border-radius: var(--radius-pill); background: var(--paper-raised); border: 1px solid var(--line);
    color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.conexoes-aba-btn.ativa { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.conexoes-aba-painel[hidden] { display: none; }

.midias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.midias-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; }

/* ---------- Crush / Match (perfil/ver.php) ---------- */

/* Icone de fonte (Bootstrap Icons, bi-heart-fill — nao mais SVG proprio) —
   font-size no lugar de width/height, sem fill (nao existe em icone de fonte). */
.crush-icone { color: var(--danger-text); font-size: 14px; line-height: 1; vertical-align: -1px; }
.crush-status { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: default; padding-right: 26px; }
.crush-status.crush-pendente { background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink); }
.crush-status.crush-match { background: var(--danger-text); border-color: var(--danger-text); color: #fff; }
.crush-status.crush-match .crush-icone { color: #fff; }
.crush-status-remover {
    position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); color: #fff; border: none; font-size: 12px; line-height: 1;
    cursor: pointer; padding: 0;
}
.crush-status-remover:hover { background: rgba(0,0,0,.65); }
@keyframes crush-flash-anim {
    0% { transform: scale(1); }
    30% { transform: scale(1.8) rotate(-8deg); }
    55% { transform: scale(0.9) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
.crush-flash .crush-icone { animation: crush-flash-anim .7s ease; }

/* "X" vermelho no fim de um botao de pendencia (Solicitado/Amizade
   pendente) — o proprio botao ja e o form de cancelar, isto e so o
   indicador visual, sem funcao propria. */
.btn-pendente-x { color: var(--danger-text); font-weight: 800; }

/* Icone de marca (Bootstrap Icons) ao lado do rotulo, nas redes sociais do
   perfil — TikTok fica sem icone de proposito, a biblioteca nao tem um. */
.rede-social-icone { color: var(--ink-faint); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
/* Abas que quebram de linha em vez de rolar pro lado — lista longa de setores
   em admin/entidades.php (pedido do Carlos, 03/10). Os dois .tabs continuam
   iguais nas demais telas. */
.tabs.tabs-quebra { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
.tab { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent); }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); color: var(--ink-soft); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--paper-sunken); }
.table-wrap { overflow-x: auto; }
/* Tabelas com muitas colunas (comunidades/locais/pins no admin) cortam
   visualmente em telas estreitas — a barra de scroll horizontal e fina
   demais pra avisar que da pra rolar (pedido do Carlos: parecia que a
   tabela "travava" antes de mostrar as ultimas colunas). So aparece
   quando o espaco realmente aperta. */
.table-scroll-hint { display: none; font-size: 12px; color: var(--ink-faint); margin: 0 0 8px; }
@media (max-width: 640px) {
    .table-scroll-hint { display: block; }
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.badge-neutral { background: var(--line-soft); color: var(--ink-soft); }
.badge-success { background: var(--green-soft); color: var(--ink-soft); }
.badge-warning { background: var(--gold-soft); color: var(--gold-text); }
.badge-danger  { background: var(--danger-soft); color: var(--danger-text); }
.badge-info    { background: var(--blue-soft); color: var(--ink-soft); }

.empty-state { padding: 44px; text-align: center; color: var(--ink-soft); background: var(--paper-sunken); border: 1px dashed var(--line); border-radius: var(--radius); }
/* Versao compacta — pra contextos com pouco conteudo de verdade abaixo (ex.:
   depoimentos, que ja tem o campo de escrever logo em seguida) onde o
   padding/fundo padrao (igual ao das caixas de digitar) ficava grande
   demais e confundia visualmente com um campo de texto. */
.empty-state-compacto { padding: 14px 16px; text-align: left; background: var(--gold-soft); border: 1px solid rgba(246,160,26,.3); border-radius: var(--radius); }

.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; font-weight: 600; border: 1px solid transparent; }
.flash-success { background: var(--green-soft); color: var(--ink); border-color: rgba(44,160,68,.25); }
.flash-error   { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(240,68,30,.25); }
.flash-info    { background: var(--blue-soft); color: var(--ink); border-color: rgba(106,162,108,.25); }

.feed-aviso-descoberta {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px; margin-bottom: 16px;
    background: var(--gold-soft); border: 1px solid rgba(246,160,26,.25); border-radius: var(--radius);
    font-size: 13.5px; color: var(--ink-soft);
}
.feed-aviso-descoberta svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--gold); }

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.form-hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger-text); margin-top: 4px; font-weight: 600; }
.campo-contador { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; text-align: right; }

.campo-com-lupa { position: relative; }
.campo-com-lupa svg { position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
/* [type="text"] (nao só "input") de proposito — empatava em especificidade
   com a regra generica de inputs (input[type="text"], ... { padding-left:
   16px }) mais abaixo neste arquivo, e como ela vem DEPOIS, vencia o
   empate — o padding de 40px nunca chegava a aplicar de verdade, so os 16px
   da regra generica, deixando o texto do placeholder sobre a lupa. */
.campo-com-lupa input[type="text"] { padding-left: 40px; }

.preview-capa-input { display: block; margin-top: 10px; max-width: 100%; max-height: 220px; border-radius: var(--radius); border: 1px solid var(--line); object-fit: cover; }
.preview-capa-input[hidden] { display: none; }

.checkbox-mostrar { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }

/* Tooltip de legenda longa (editar perfil) — bolha some por padrao, some ao
   passar o mouse (desktop) OU ao clicar (toque, via classe .aberto trocada
   no clique — ver assets/js/app.js) OU ao focar via teclado. */
.tooltip-info { position: relative; display: inline-block; margin-left: 4px; vertical-align: middle; }
.tooltip-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--line); color: var(--ink-soft);
    font-size: 11px; font-weight: 700; cursor: help; user-select: none;
}
.tooltip-bolha {
    display: none; position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 10;
    width: 240px; padding: 10px 12px; border-radius: var(--radius);
    background: var(--paper-raised); color: var(--ink); border: 1px solid rgba(246,160,26,.35);
    font-size: 12.5px; font-weight: 400; line-height: 1.45;
    box-shadow: var(--shadow-lifted);
}
.tooltip-info:hover .tooltip-bolha, .tooltip-info:focus-within .tooltip-bolha, .tooltip-info.aberto .tooltip-bolha { display: block; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=url], input[type=tel], input[type=search],
select, textarea {
    width: 100%; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    font-size: 14px; font-family: inherit; background: var(--paper-sunken); color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { border-radius: 14px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--paper-raised); }
.form-actions { margin-top: 20px; display: flex; gap: 10px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 700; border: 1px solid transparent; cursor: pointer; font-family: inherit;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
/* icon() gera <svg> sem width/height (nem atributo, nem classe, quando
   chamado sem 2o argumento) — como .btn é flex, um svg sem tamanho
   intrinseco e sem texto irmao do lado (caso dos botoes de Editar/Excluir
   do CRUD do admin, so-icone) colapsa pra 0x0 e o botao fica vazio. Regra
   generica de fallback; .btn-icon svg (mais abaixo) continua vencendo onde
   já define um tamanho proprio. */
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* Botão travado enquanto a página envia (trava de envio repetido, em
   assets/js/app.js): mais visível que o :disabled comum, com um girador
   ao lado do texto ("Publicando…", "Enviando…"). */
.btn.btn-enviando:disabled { opacity: .85; cursor: progress; }
.btn-enviando::after {
    content: ""; width: 12px; height: 12px; margin-left: 8px; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: btn-enviando-girar .7s linear infinite;
}
@keyframes btn-enviando-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn-enviando::after { animation: none; border-right-color: currentColor; opacity: .5; }
}
.btn-primary { background: var(--accent-text); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-text-hover); box-shadow: 0 4px 16px rgba(44,160,68,.32); }
/* ::selection global usa as MESMAS --accent-text/--on-accent do fundo/texto
   normal do btn-primary — sem isto, selecionar o texto do botao (ex.: pra
   copiar) nao mostra contraste nenhum, parece que a selecao "sumiu". Fundo
   translucido claro sobre o verde do botao continua legivel nos dois temas. */
.btn-primary::selection { background: rgba(255,255,255,.35); color: inherit; }
/* Cadeado do composer fechado (post "protegido") — vermelho em vez do verde
   padrao, pra ficar visualmente obvio que o alcance do post esta reduzido. */
.composer-cadeado-btn.fechado { background: var(--danger); }
.composer-cadeado-btn.fechado:hover { background: var(--danger-text); box-shadow: 0 4px 16px rgba(194,51,15,.32); }
.btn-secondary { background: var(--paper-raised); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--paper-sunken); border-color: var(--scale-2); }
.btn-danger { background: transparent; border-color: var(--danger-text); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-soft); }
/* Botão que é link (<a class="btn ...">): o a:hover global (texto verde-escuro)
   vencia a cor do botão — no btn-primary o texto sumia no fundo escuro
   (ex.: "Clique Aqui!" do evento, relatado pelo Carlos em 30/09). */
a.btn-primary:hover { color: var(--on-accent); }
a.btn-secondary:hover { color: var(--ink); }
a.btn-danger:hover { color: var(--danger-text); }
/* Tons fixos (scale-6/7, nao os tokens --ink/--paper que trocam no dark mode)
   de proposito — este botao precisa continuar ESCURO nos dois temas, nao
   inverter pra claro no dark mode como --ink faria. */
.btn-dark { background: var(--scale-6); color: #fff; }
.btn-dark:hover { background: var(--scale-7); }
.btn-sm { padding: 7px 12px; font-size: 13px; }

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 700px 500px at 50% 8%, rgba(44,160,68,.10), transparent 60%), var(--paper); padding: var(--space-page-x); }
.auth-card { width: 100%; max-width: 380px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 36px); box-shadow: var(--shadow-lifted); animation: rise .5s ease both; }
.auth-card h1 { font-size: 22px; text-align: center; margin: 0 0 4px; color: var(--ink); }
.auth-card .brand { display: inline-flex; justify-content: center; width: 100%; margin-bottom: 22px; }
.auth-card .brand-full { height: 42px; }
.auth-switch { text-align: center; font-size: 13.5px; margin-top: 18px; color: var(--ink-soft); }
/* "Esqueci a senha" logo abaixo do campo de senha (auth/login.php). */
.auth-esqueci { margin: -8px 0 10px; text-align: right; font-size: 13px; }

.text-muted { color: var(--ink-soft); }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* Texto só pra leitor de tela (visualmente escondido). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; }

/* Linhas de informacao simples do perfil (Atividade profissional, Telefone,
   Genero...) — pedido do Carlos: menos espaço entre elas + uma linha fina
   separando cada uma. */
.perfil-info-linha { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.perfil-info-linha:last-of-type { border-bottom: none; }

/* ---------- Timeline / feed social ---------- */

.composer { display: flex; gap: 12px; align-items: flex-start; }
.composer-body { display: flex; gap: 10px; align-items: flex-start; }
.composer-input { flex: 1; min-width: 0; text-align: left; background: var(--paper-sunken); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 11px 18px; color: var(--ink); font-size: 14px; font-family: inherit; }
.composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.btn-icon { padding: 9px; line-height: 0; }
.btn-icon svg { width: 17px; height: 17px; }
/* Comeca hidden (ver feed.php); JS tira o hidden e poe as miniaturas quando
   fotos sao escolhidas. Fica ao lado do textarea dentro de .composer-body,
   entao ele "rouba" espaco do textarea (flex:1) em vez de empurrar a UI pra
   baixo — e o efeito de encolher o box que foi pedido. */
.composer-preview { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; max-width: 140px; align-content: flex-start; }
.composer-preview[hidden] { display: none; }
.composer-preview img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.post-card { animation: rise .4s ease both; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-excluir-form, .post-seguir-form { margin-left: auto; }
.post-excluir-btn { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 4px; display: inline-flex; }
.post-excluir-btn svg { width: 17px; height: 17px; }
.post-excluir-btn:hover { color: var(--danger-text); }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--accent-text); }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author { font-weight: 700; font-size: 14px; color: var(--ink); }
.post-time { font-size: 12.5px; color: var(--ink-faint); }
.post-protegido-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
.post-protegido-badge svg { width: 12px; height: 12px; }
.post-body { font-size: 14.5px; line-height: 1.6; margin: 0 0 4px; white-space: pre-wrap; }

.post-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; margin: 8px 0; border-radius: var(--radius); overflow: hidden; }
/* Varias fotos: miniaturas quadradas. Antes era altura fixa de 220px — no
   celular cada miniatura ficava mais alta que larga e foto horizontal
   aparecia "em pé" (pedido do Carlos, 29/09). */
.post-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-sunken); }
.post-fotos.foto-unica { grid-template-columns: 1fr; }
/* border-radius direto na img (alem do border-radius+overflow:hidden do
   container acima): com 1 foto so, max-width:400px deixa a imagem mais
   estreita que o card e ela nao estica pra preencher a coluna (grid-item com
   max-width nao centraliza nem estica sozinho) — o lado esquerdo encostava no
   canto arredondado do container e parecia certo, mas o lado direito da
   imagem sobrava solto no meio do container, sem nenhum arredondamento (o
   canto de verdade do container ficava vazio, la longe, fora da vista). Dar o
   radius pra propria img resolve independente de onde ela para dentro do
   container. */
/* Foto sozinha: formato original, sem recorte (era um quadrado de 400px
   cortado — foto horizontal perdia as laterais). Alta no máximo 520px pra
   foto em pé de celular não ocupar a tela inteira. */
.post-fotos.foto-unica img { width: auto; height: auto; max-width: 100%; max-height: 520px; aspect-ratio: auto; object-fit: contain; border-radius: var(--radius); }
.post-foto-item { position: relative; }
.post-fotos.foto-unica .post-foto-item { width: fit-content; max-width: 100%; }
.post-foto-download {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    background: rgba(0,0,0,.5); color: #fff; border-radius: 50%;
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.post-foto-download:hover { background: rgba(0,0,0,.75); }
.post-foto-download svg { width: 16px; height: 16px; }
/* Lixeira por foto (só o autor, post com 2+ fotos): canto oposto ao de
   baixar, mesmo círculo escuro, vermelho no hover. */
.post-foto-excluir-form { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; }
.post-foto-excluir {
    background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; padding: 0; cursor: pointer;
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.post-foto-excluir:hover, .post-foto-excluir:focus-visible { background: var(--danger); }
.post-foto-excluir svg { width: 16px; height: 16px; }

.post-actions { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.post-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill); border: none; background: none; color: var(--ink-soft); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; }
.post-action-btn svg { width: 17px; height: 17px; }
.icon-inline { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }

.card-capa {
    display: block; width: calc(100% + 2 * var(--space-card)); height: 160px; object-fit: cover;
    margin: calc(-1 * var(--space-card)) calc(-1 * var(--space-card)) var(--space-card);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Comunidade do evento vira "cabecalho" do card (eventos/index.php), acima
   ate da capa — mesma ideia de "postado no grupo X" (pedido do Carlos:
   destaque maior que uma linha discreta no meio do card). Avatar no dobro
   do tamanho padrao de .conversation-avatar (44px -> 88px). */
.evento-card-comunidade { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.evento-card-comunidade-avatar { width: 88px; height: 88px; font-size: 30px; }
.post-action-btn:hover { background: var(--paper-sunken); color: var(--ink); }
.post-action-btn.liked { color: var(--danger-text); }
.post-action-btn.liked svg { fill: var(--danger-text); }
.post-action-btn.active-toggle { background: var(--accent-soft); color: var(--accent-text); }
.post-action-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }

.comments { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.comments[hidden] { display: none; }
.comment { display: flex; gap: 9px; }
.comment-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; background: var(--scale-3); }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-bubble { background: var(--paper-sunken); border-radius: 14px; padding: 8px 14px; font-size: 13.5px; }
.comment-author { font-weight: 700; margin-right: 6px; }
.comment-form { display: flex; gap: 8px; margin-top: 2px; }
.comment-form input { flex: 1; }
.comment-form button { flex-shrink: 0; }
.comment-corpo { flex: 1; min-width: 0; }
.comment-responder-btn { display: block; background: none; border: none; padding: 2px 4px 0; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-faint); cursor: pointer; }
.comment-responder-btn:hover { color: var(--accent-text); }
.comment-linha-bolha { display: flex; align-items: flex-start; gap: 4px; }
.comment-linha-bolha .comment-bubble { flex: 1; min-width: 0; }
/* "sem contraste de cor": cinza discreto igual .comment-responder-btn, só
   fica vermelho no hover — nao chama atenção igual um botao de exclusão
   "normal" chamaria, ja que excluir comentario e uma acao leve/reversivel. */
.comment-excluir-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 15px; line-height: 1; padding: 6px 4px; }
.comment-excluir-btn:hover { color: var(--danger-text); }
.comment-avatar-vazio { width: 30px; height: 30px; flex-shrink: 0; }
.comment-bubble-removido { color: var(--ink-faint); font-style: italic; }
/* Grupo (comentario de topo + respostas) fica com 14px de respiro do proximo
   grupo; :not(:first-child) evita respiro duplicado logo abaixo do titulo. Só
   .comment de TOPO conta aqui — .comment-resposta fica dentro de
   .comment-respostas, nunca filho direto de .comment-list. */
.comment-list > .comment:not(:first-child) { margin-top: 14px; }
/* Sem :not(:empty): o foreach do PHP deixa espaço em branco dentro da div
   mesmo sem nenhuma resposta, entao ela nunca fica realmente :empty — aplicar
   direto e mais simples e da no mesmo (8px e imperceptivel quando vazia). */
.comment-respostas { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.comment-resposta { margin-left: 30px; }
.comment-resposta .comment-bubble { background: var(--comment-resposta-bg); }
.comment-respondendo-a { font-size: 12px; color: var(--ink-faint); padding: 4px 2px; }
.comment-respondendo-a[hidden] { display: none; }
.comment-respondendo-nome { font-weight: 700; }
.comment-cancelar-resposta { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 14px; line-height: 1; padding: 0 2px; }
.comment-cancelar-resposta:hover { color: var(--danger-text); }

/* ---------- Mensagens (conversas diretas) ---------- */

.conversa-header-title { display: flex; align-items: center; gap: 12px; }

.nova-conversa-form { display: flex; gap: 8px; }
/* Wrapper proprio (nao mais o <input> direto como item flex) pra caber o
   dropdown de sugestoes em position:absolute sem baguncar o layout flex
   do form (input + botao lado a lado). */
/* .card tem "animation", que cria um stacking context proprio — sem isto o
   dropdown (z-index:50, mas só dentro do stacking context DESTE card) fica
   atras do PROXIMO .card da pagina, que vem depois no DOM (mensagens/
   index.php: card do "Iniciar conversa" vs. card da lista de conversas logo
   abaixo). */
.card-acima { z-index: 2; }
.autocomplete-wrap { position: relative; flex: 1; min-width: 0; }
.autocomplete-wrap input { width: 100%; }
.autocomplete-sugestoes {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lifted); max-height: 280px; overflow-y: auto; padding: 6px;
}
.autocomplete-sugestoes[hidden] { display: none; }
.autocomplete-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; color: var(--ink);
}
.autocomplete-item:hover { background: var(--paper-sunken); }

.indicacao-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 4px;
    border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.indicacao-item:last-child { border-bottom: none; }

.link-copiavel { display: flex; gap: 8px; }
.link-copiavel input { flex: 1; min-width: 0; }

.badge-icone { display: inline-flex; align-items: center; gap: 4px; }
.badge-icone svg { width: 12px; height: 12px; flex-shrink: 0; }

.badge-embaixador {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #fff; flex-shrink: 0;
}
.badge-embaixador svg { width: 13px; height: 13px; fill: currentColor; }

.conversation-list { display: flex; flex-direction: column; }
/* Generica — qualquer .conversation-list que possa crescer muito (membros
   de uma comunidade, resultado do box Descobrir) ganha rolagem propria em
   vez de esticar o card. ~400px cobre uns 5-6 .conversation-item. */
.lista-com-scroll { max-height: 400px; overflow-y: auto; }
.conversation-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink); transition: background .15s ease;
}
.conversation-item:last-child { border-bottom: none; }
.conversation-item:hover { background: var(--paper-sunken); text-decoration: none; }
.conversation-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.conversation-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; color: #fff; background: var(--accent-text);
}
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-body { flex: 1; min-width: 0; }
.conversation-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conversation-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.conversation-time { font-size: 12px; color: var(--ink-faint); flex-shrink: 0; }
.conversation-preview { display: block; font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item.unread .conversation-name { font-weight: 800; }
.conversation-item.unread .conversation-preview { color: var(--ink); font-weight: 600; }
.unread-count {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--danger-text); color: #fff; font-size: 11px; font-weight: 700;
}

.depoimentos-lista { display: flex; flex-direction: column; gap: 16px; }
.depoimento-item { display: flex; gap: 12px; }
.depoimento-corpo { flex: 1; min-width: 0; }
.depoimento-cabecalho { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.depoimento-autor { font-size: 14px; font-weight: 700; color: var(--ink); }
.depoimento-corpo p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap; }
.depoimento-remover-btn {
    background: none; border: none; cursor: pointer; padding: 0; margin-top: 6px;
    font-size: 12px; font-weight: 600; color: var(--ink-faint); font-family: inherit;
}
.depoimento-remover-btn:hover { color: var(--danger-text); }

.message-thread {
    display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
}
.message-bubble-row { display: flex; align-items: center; gap: 4px; }
.message-bubble-row.mine { justify-content: flex-end; }
.message-excluir-btn { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 15px; line-height: 1; padding: 4px; flex-shrink: 0; }
.message-excluir-btn:hover { color: var(--danger-text); }
.message-bubble {
    max-width: 72%; padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5;
    background: var(--paper-sunken); color: var(--ink); border-bottom-left-radius: 4px;
}
.message-bubble-row.mine .message-bubble { background: var(--accent-text); color: var(--on-accent); border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.message-author { display: block; font-size: 12px; font-weight: 700; color: var(--accent-text); margin-bottom: 2px; text-decoration: none; }
.message-author:hover { text-decoration: underline; }
.message-time { display: block; font-size: 10.5px; margin-top: 3px; opacity: .7; }
/* Card de comunidade compartilhada (ver comunidades/compartilhar.php) —
   fundo/cor PROPRIOS (nao herda de .message-bubble), pra ficar legivel tanto
   numa bolha clara quanto na verde de "minha" mensagem — mesma ideia de
   preview de link do WhatsApp/Telegram, um cartao solido dentro da bolha. */
.message-card-comunidade {
    display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px;
    padding: 8px 10px; margin: 2px 0 4px; max-width: 240px;
}
.message-card-comunidade:hover { border-color: var(--accent); }
.message-card-comunidade .conversation-name { color: var(--ink); }
.message-card-comunidade .conversation-preview { color: var(--ink-faint); }
.message-bubble-fotos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
/* width fixo (nao 100%) de proposito: numa bolha SO com foto, sem texto do
   lado pra "esticar" o container, um width:100% encolhe pro minimo possivel
   e a foto fica minuscula. max-width:100% so evita estourar em bolha estreita. */
.message-bubble-fotos img { width: 200px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.message-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.message-form input[type="text"], .message-form .message-campo { flex: 1; min-width: 0; }
/* Campo de mensagem de várias linhas (Enter envia, Ctrl/Cmd+Enter quebra a
   linha — assets/js/app.js): começa com 1 linha, cresce até umas 6 e rola. */
.message-form .message-campo { display: block; resize: none; border-radius: 20px; line-height: 1.4; max-height: 160px; overflow-y: auto; }
.message-fotos-preview { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; max-width: 100px; }
.message-fotos-preview[hidden] { display: none; }
.message-fotos-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- Editor de avatar (upload + recorte) ---------- */

.avatar-editor { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.avatar-trigger { position: relative; border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.avatar-trigger:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.avatar-grande {
    width: 132px; height: 132px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 48px; color: #fff; background: var(--accent-text);
}
.avatar-grande img { width: 100%; height: 100%; object-fit: cover; }

/* Embaixador: anel dourado no avatar, em todo lugar onde aparece uma pessoa
   (pedido do Carlos, 30/09 — classe posta por avatar_html()). box-shadow em
   vez de border: não muda o tamanho do avatar em lista, topo nem perfil.
   Dois tons pra parecer metal — dourado por dentro, borda mais escura por
   fora —, lê bem no fundo claro e no escuro. */
.avatar-embaixador { box-shadow: 0 0 0 2px #E2B13C, 0 0 0 3px rgba(125, 90, 12, .55); }
.avatar-grande.avatar-embaixador { box-shadow: 0 0 0 4px #E2B13C, 0 0 0 6px rgba(125, 90, 12, .5); }
/* Avatares sobrepostos das conexões em comum já têm borda própria: ela vira
   o anel (sombra por fora ficaria por baixo do vizinho). */
.conexoes-comum-avatar.avatar-embaixador { border-color: #E2B13C; box-shadow: none; }
.avatar-trigger-overlay {
    position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-text); color: var(--on-accent); border: 2px solid var(--paper-raised);
    display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
}
.avatar-trigger-overlay svg { width: 18px; height: 18px; }
.avatar-editor-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.crop-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.crop-modal[hidden] { display: none; }
.crop-modal-backdrop { position: absolute; inset: 0; background: rgba(15,26,19,.55); }
.crop-modal-inner {
    position: relative; background: var(--paper-raised); border-radius: var(--radius);
    box-shadow: var(--shadow-lifted); padding: 24px; width: 100%; max-width: 360px;
    display: flex; flex-direction: column; align-items: center; gap: 14px; animation: rise .25s ease both;
}
.crop-modal-inner h2 { margin: 0; font-size: 18px; color: var(--ink); align-self: flex-start; }
.crop-modal-inner .form-hint { margin: -8px 0 0; align-self: flex-start; }
.crop-viewport {
    width: 240px; height: 240px; border-radius: 50%; overflow: hidden; position: relative;
    background: var(--paper-sunken); cursor: grab; touch-action: none;
    box-shadow: 0 0 0 3px var(--paper-raised), 0 0 0 4px var(--line);
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport img { position: absolute; top: 50%; left: 50%; max-width: none; user-select: none; -webkit-user-drag: none; }
.crop-zoom-range { width: 240px; }
.crop-modal-actions { display: flex; gap: 10px; width: 100%; justify-content: flex-end; }

/* ---------- Modal de compartilhar comunidade ---------- */
/* Mesmo padrao do .crop-modal acima (perfil/editar.php) — backdrop + card
   centralizado — so que com lista/busca em vez de crop de imagem. */

.modal-compartilhar { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-compartilhar[hidden] { display: none; }
.modal-compartilhar-backdrop { position: absolute; inset: 0; background: rgba(15,26,19,.55); }
.modal-compartilhar-inner {
    position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 86vh;
    background: var(--paper-raised); border-radius: var(--radius); box-shadow: var(--shadow-lifted);
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.modal-compartilhar-inner h2 { margin: 0; font-size: 18px; color: var(--ink); padding-right: 24px; }
.modal-compartilhar-fechar {
    position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--ink-faint);
    font-size: 24px; line-height: 1; cursor: pointer; padding: 4px;
}
.modal-compartilhar-fechar:hover { color: var(--ink); }
.modal-compartilhar-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 300px; margin: 0 -8px; }
.modal-compartilhar-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; color: var(--ink);
}
.modal-compartilhar-item:hover { background: var(--paper-sunken); }
.modal-compartilhar-item.selecionado { background: var(--accent-soft); }
.modal-compartilhar-item.selecionado::after { content: "✓"; margin-left: auto; color: var(--accent-text); font-weight: 700; flex-shrink: 0; }
.modal-compartilhar-mais { align-self: center; }
/* .btn ja define display (inline-flex) — sem isso [hidden] perde pra classe
   (mesma pegadinha ja documentada em .lightbox[hidden]/.crop-modal[hidden]). */
.modal-compartilhar-mais[hidden] { display: none; }
.modal-compartilhar-status { margin: 0; font-size: 13px; color: var(--accent-text); text-align: center; }

/* ---------- Tela de bem-vindo / onboarding (auth/bem-vindo.php) ---------- */

.auth-card-largo { max-width: 720px; }

/* Colunas dinamicas (quantas couberem na largura), preenchidas linha a
   linha: o que nao cabe numa linha desce pra proxima — nunca vira rolagem
   horizontal (pedido do Carlos, 03/10: com 13 setores a versao antiga, que
   limitava a 3 linhas e abria colunas extras, estourava a largura do card). */
.chips-setor-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin-top: 14px;
}
/* Tela estreita: quebra livre, cada chip com a largura do proprio texto —
   mesmo breakpoint ja usado no resto do site. */
@media (max-width: 760px) {
    .chips-setor-grid { display: flex; flex-wrap: wrap; }
}
/* Checkbox foca via Tab (leitor de tela/teclado), só não aparece visualmente
   — "hidden" de verdade tiraria o elemento da ordem de foco, diferente do
   objetivo aqui (mesma tecnica classica de "chip" com <label for>, sem JS). */
.chip-setor-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chip-setor {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
    border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--paper-raised);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    user-select: none;
}
.chip-setor:hover { border-color: var(--scale-2); }
.chip-setor-input:checked + .chip-setor { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip-setor-input:checked + .chip-setor::after { content: "✓"; font-weight: 700; }
.chip-setor-input:focus-visible + .chip-setor { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Filtro de categorias do mapa de Pontos de Interesse (locais/index.php) —
   reaproveita os mesmos chips acima, só o container muda. */
.filtro-categorias-mapa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* ...e cada chip na cor do próprio setor (a mesma do Guia — pedido do Carlos,
   30/09). Modificador à parte: o chip comum também é usado em
   auth/bem-vindo.php, que continua como está. */
.chip-setor-cor::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--chip-cor, var(--accent)); }
.chip-setor-cor:hover { border-color: var(--chip-cor, var(--scale-2)); }
.chip-setor-input:checked + .chip-setor-cor {
    background: color-mix(in srgb, var(--chip-cor, var(--accent)) 16%, var(--paper-raised));
    border-color: var(--chip-cor, var(--accent)); color: var(--ink);
}
.chip-setor-input:not(:checked) + .chip-setor-cor::before { opacity: .45; }

/* Bolinha de agrupamento do mapa: vários locais juntos com o mapa afastado
   (assets/js/app.js, mlReagrupar). */
.mapa-agrupamento {
    width: var(--tamanho, 34px); height: var(--tamanho, 34px); padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--accent-text); color: var(--on-accent); border: 3px solid rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.3); font: 800 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
    transition: transform .12s ease, background .15s ease;
}
.mapa-agrupamento:hover { background: var(--accent-text-hover); transform: scale(1.08); }
.mapa-agrupamento:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.sugestoes-perfil-grid { margin-top: 14px; }
.sugestao-perfil-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sugestao-perfil-nome { font-weight: 700; color: var(--ink); }
.sugestao-perfil-card .conversation-avatar { width: 56px; height: 56px; font-size: 20px; }
.modal-compartilhar-status.erro { color: var(--danger-text); }
.modal-compartilhar-status[hidden] { display: none; }
.modal-compartilhar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-compartilhar-selecionados { flex: 1; font-size: 12.5px; color: var(--ink-faint); min-width: 0; }

/* ---------- Lightbox (ampliar imagem) ---------- */

.foto-ampliavel { cursor: pointer; }
.lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0, 0, 0, .92);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
/* sem margem/padding de proposito — a imagem preenche o eixo que for o
   limite (largura OU altura) até encostar na borda da tela, sem moldura. */
.lightbox-img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; }
/* drop-shadow escuro (nao só opacidade) — sem isso um icone branco quase
   some numa foto clara/estourada nos cantos, mesmo com o fundo do lightbox
   quase preto (foto grande com object-fit:contain pode chegar perto dos
   cantos onde os botoes ficam). */
.lightbox-fechar {
    position: fixed; top: 14px; right: 18px; z-index: 301;
    background: none; border: none; color: #fff; font-size: 34px; line-height: 1;
    cursor: pointer; padding: 8px; opacity: .85;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(0,0,0,.5));
}
.lightbox-fechar:hover { opacity: 1; }
.lightbox-download {
    position: fixed; top: 16px; left: 18px; z-index: 301;
    color: #fff; opacity: .85; padding: 8px; display: inline-flex;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(0,0,0,.5));
}
.lightbox-download:hover { opacity: 1; }
.lightbox-download svg { width: 26px; height: 26px; }
/* Lixeira na foto ampliada — ao lado do baixar; só aparece em foto de post
   com várias, pro autor (o JS tira o [hidden]). */
.lightbox-excluir {
    position: fixed; top: 16px; left: 66px; z-index: 301;
    background: none; border: none; color: #fff; opacity: .85; padding: 8px; display: inline-flex; cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(0,0,0,.5));
}
.lightbox-excluir[hidden] { display: none; }
.lightbox-excluir:hover, .lightbox-excluir:focus-visible { opacity: 1; color: #ff8a80; }
.lightbox-excluir svg { width: 26px; height: 26px; }

/* ---------- Mapa de locais (locais/index.php, modal-local, admin/locais.php) ---------- */

.mapa-local { width: 100%; height: 360px; border-radius: var(--radius); overflow: hidden; }
.mapa-local-modal { height: 220px; }
.mapa-local-mini { height: 180px; margin-top: 8px; }

/* Página de um local (locais/detalhe.php): selos no topo do card, mapa um
   pouco mais alto que o do evento e a seção de eventos logo abaixo. */
.local-detalhe-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.chip-setor-estatico {
    cursor: default; padding: 6px 12px;
    background: color-mix(in srgb, var(--chip-cor, var(--accent)) 16%, var(--paper-raised));
    border-color: var(--chip-cor, var(--accent)); color: var(--ink);
}
.mapa-local-detalhe { height: 260px; margin-top: 12px; }
/* Pino próprio de local/empresa no admin (migration 031): prévia do atual no
   formulário e miniatura ao lado do nome na lista de locais. */
.pin-proprio-atual { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pin-proprio-atual img { height: 48px; width: auto; }
.local-pin-miniatura { height: 20px; width: auto; vertical-align: middle; margin-left: 6px; }
.local-detalhe-secao { display: flex; align-items: center; gap: 8px; margin: 28px 0 14px; }
/* Nome no balão do mapa = link pra página do local (pedido do Carlos, 30/09). */
.mapa-popup-titulo { font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.mapa-popup-titulo:hover { color: var(--accent-text-hover); }

/* ---------- Cards de admin/index.php (com icone de referencia) ---------- */

/* Classe própria (não .grid-3, que perfil/ver.php e auth/bem-vindo-
   pessoas.php também usam). 29/09 (pedido do Carlos): caixas horizontais —
   ícone à esquerda, nome e descrição no meio, número à direita — 3 por linha
   quando cabem, 2 em tela média, 1 no celular. O max() dentro do minmax()
   nunca deixa passar de 3 colunas (cada uma tem pelo menos 1/3 da largura,
   descontados os 2 gaps de 20px do .grid). */
.grid-admin { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 40px) / 3))), 1fr)); }
.grid-admin .card { margin-bottom: 0; }

.admin-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-card:hover { border-color: var(--scale-2); box-shadow: var(--shadow-lifted); }
.admin-card-icon {
    grid-column: 1; grid-row: 1 / 3;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent-text);
    display: flex; align-items: center; justify-content: center;
}
.admin-card-icon svg { width: 22px; height: 22px; }
.admin-card .kpi-label { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--ink); }
.admin-card .kpi-value { grid-column: 3; grid-row: 1 / 3; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.admin-card p { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 12.5px; line-height: 1.4; }

/* admin/entidades.php — capa do negócio no Guia */
.entidade-capa-atual { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 10px; margin-bottom: 8px; background: var(--paper-sunken); }
.entidade-capa-miniatura { width: 64px; height: 28px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--paper-sunken); }
/* Marca oficial (logo) da entidade — admin/entidades.php (03/10). Fundo
   branco fixo: logo em PNG transparente costuma ser escura e sumiria no tema
   escuro. */
.entidade-marca-atual { display: block; width: auto; height: auto; max-width: 220px; max-height: 110px; object-fit: contain; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; margin: 0 0 8px; }
.entidade-marca-atual[hidden] { display: none; }
.entidade-marca-miniatura { display: block; width: 44px; height: 44px; object-fit: contain; padding: 3px; border-radius: 8px; border: 1px solid var(--line-soft); background: #fff; }
/* Caixa "Preencher o endereço automaticamente" (local vinculado) */
.entidade-endereco-auto { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 400; }
.entidade-endereco-auto input { width: auto; }
/* admin/locais.php — local com GPS salvo */
.local-gps-ok { display: inline-flex; color: var(--accent-text); }
.local-gps-ok svg { width: 18px; height: 18px; }

/* admin/acessos.php — ranking de páginas mais acessadas */
.ranking-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.ranking-filtros .form-row { margin-bottom: 0; }
.ranking-filtro-check { display: flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 10px; }
.ranking-filtro-check input { width: auto; }
.ranking-filtros .btn { margin-bottom: 4px; }
.ranking-kpis { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.ranking-kpi-rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.ranking-kpi-valor { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ranking-posicao, .ranking-numero, .ranking-percentual { font-variant-numeric: tabular-nums; }
.ranking-posicao { color: var(--ink-soft); font-weight: 700; }
.ranking-numero { font-weight: 700; }
.ranking-percentual { font-size: 12.5px; color: var(--ink-soft); }
.ranking-barra { height: 6px; margin-top: 5px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; }
.ranking-barra span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ---------- Eventos (eventos/index.php, eventos/detalhe.php) ---------- */

/* Formulário de criar evento fechado atrás de um botão (<details> nativo). */
.evento-criar { margin-bottom: 20px; }
.evento-criar > summary { list-style: none; width: fit-content; }
.evento-criar > summary::-webkit-details-marker { display: none; }
.evento-criar[open] > summary { margin-bottom: 14px; }
.evento-criar-abrir { display: inline-flex; align-items: center; gap: 6px; }
.evento-criar:not([open]) .evento-criar-fechar,
.evento-criar[open] .evento-criar-abrir { display: none; }

/* Capa no topo da página do evento: retângulo fixo 6x3 (2:1) com o nome do
   evento por cima, embaixo, num sombreado escuro pra ler bem em qualquer foto
   (pedidos do Carlos, 30/09). Na lista de eventos o nome fica abaixo da capa
   (includes/evento_card.php). Clicar em qualquer ponto da capa amplia a
   foto — o título e o sombreado não pegam o clique. */
.evento-capa-detalhe {
    position: relative; overflow: hidden; width: 100%; max-width: 720px; aspect-ratio: 2 / 1;
    border-radius: var(--radius); margin: 0 0 16px; background: var(--paper-sunken);
}
.evento-capa-detalhe img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.evento-capa-detalhe::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,0) 72%);
}
.evento-capa-detalhe .evento-capa-titulo {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 16px 20px;
    color: #fff; font-size: clamp(20px, 3.2vw, 30px); line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.5);
    text-wrap: balance; pointer-events: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Link do site de ingresso como botão, sem mostrar o endereço. */
.evento-link-ingressos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; font-weight: 700; }
.evento-link-ingressos .bi { font-size: 16px; line-height: 1; }

/* Botão "voltar ao topo" (lista de eventos): canto de baixo à direita; no
   celular sobe pra ficar acima da barra flutuante de navegação. */
.voltar-topo {
    position: fixed; right: 24px; bottom: 24px; z-index: 75;
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent-text); color: var(--on-accent); box-shadow: var(--shadow-lifted);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .1s ease;
}
.voltar-topo[hidden] { display: none; }
.voltar-topo:hover { background: var(--accent-text-hover); }
.voltar-topo:active { transform: translateY(1px); }
.voltar-topo:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.voltar-topo svg { width: 22px; height: 22px; transform: rotate(90deg); } /* ícone "voltar" (←) girado: ↑ */
@media (max-width: 760px) {
    .voltar-topo { right: 16px; bottom: 96px; }
}
/* .modal-compartilhar-inner (footer.php) ja limita a 86vh — o conteudo do
   modal-local (mapa + 4 campos + acoes) pode passar disso em telas baixas,
   diferente do modal-compartilhar original que so tem uma lista rolavel
   PROPRIA por dentro. */
.modal-local .modal-compartilhar-inner { overflow-y: auto; }

.pino-local {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pino-cor, var(--accent-text)); border: 2px solid var(--on-accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.pino-local-pendente { background: var(--gold-text); }
/* Sem borda nem sombra no estado normal — pedido do Carlos: as duas
   sobravam como um contorno/sombreado chamativo ao redor da própria
   imagem do pin, que não precisa de moldura decorativa. */
.pino-local-imagem {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; cursor: pointer;
}
/* .pino-local-pendente sozinho seta background (não faz efeito numa
   imagem, que cobre o fundo todo) — pendente numa imagem usa uma borda fina
   pra se diferenciar do pin normal. */
.pino-local-imagem.pino-local-pendente { border: 2px solid var(--gold-text); }

/* Popup do MapLibre vem com fundo/texto fixos por padrao — sem isso quebra
   no tema escuro. */
.maplibregl-popup-content {
    background: var(--paper-raised); color: var(--ink);
    border-radius: 10px; box-shadow: var(--shadow-lifted); font: inherit; font-size: 13.5px;
}
.maplibregl-popup-close-button { color: var(--ink-faint); font-size: 16px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--paper-raised); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--paper-raised); }

/* ---------- Paleta de cores de um Setor (admin/setores.php) ---------- */

.setor-cores-preview {
    display: flex; height: 32px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); margin: 8px 0 16px;
}
.setor-cores-preview-item { flex: 1; }
.setor-cores-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.setor-cor-campo label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.setor-cor-campo-inputs { display: flex; align-items: center; gap: 6px; }
.setor-cor-campo-inputs input[type=color] {
    width: 36px; height: 36px; flex-shrink: 0; padding: 2px;
    border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: none;
}
.setor-cor-campo-inputs input[type=text] { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.setor-cores-tira { display: flex; width: 90px; height: 20px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.setor-cores-tira span { flex: 1; }

/* ---------- Busca geral (busca.php) — itens reaproveitam .conversation-item ---------- */

.busca-topo { margin-bottom: 18px; }
.busca-topo h1 { margin: 0 0 12px; }
.busca-form {
    display: flex; align-items: center; gap: 10px;
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 6px 6px 6px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.busca-form:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.busca-form > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-faint); }
.busca-form input[type=search] {
    flex: 1; min-width: 0; border: none; background: none; padding: 8px 0;
    font: inherit; font-size: 15px; color: var(--ink);
}
.busca-form input[type=search]:focus { outline: none; }
/* Abas quebram linha em vez de rolar pro lado (nenhum segmento escondido). */
.busca-abas { flex-wrap: wrap; }
.tab-contagem { margin-left: 3px; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tab.active .tab-contagem { color: inherit; }
.busca-secao { margin-bottom: 16px; }
.busca-secao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.busca-secao-topo h2 { margin: 0; font-size: 1.1rem; }
.busca-meta { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-faint); }
.busca-trecho {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.busca-thumb { border-radius: 10px; }
.busca-thumb svg { width: 20px; height: 20px; }
.busca-lista mark, .setor-chips mark { background: var(--gold-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.busca-ver-todos { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.busca-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }

/* ---------- Chips de setor com a cor institucional (busca.php, eventos/index.php) ---------- */

.setor-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--ink-soft); }
.setor-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--paper-raised); color: var(--ink); font-weight: 600;
}
.setor-chip:hover { border-color: var(--accent-text); text-decoration: none; }
.setor-chip-cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Eventos agrupados por segmento (eventos/index.php) ---------- */

.eventos-segmento { margin-top: 28px; scroll-margin-top: 84px; }
.eventos-segmento-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.eventos-segmento-titulo .setor-chip-cor { width: 14px; height: 14px; }
.eventos-segmento-titulo .tab-contagem { font-size: 13px; font-family: var(--font-body); }
.eventos-segmento-vazio { margin-top: 16px; }