/* ==========================================================================
   Juntto — folha de estilos única (mobile-first).
   Paleta: branco/grafite como fundo, laranja terracota como acento pontual.
   Cores semânticas (disponível/indisponível/neutro/confirmado) são fixas e
   nunca são sobrescritas pela personalização pessoal do usuário.
   ========================================================================== */

:root {
  /* claro: canvas cinza bem clarinho, cards brancos por cima — nunca fundo
     branco puro ocupando a tela toda, senão a interface fica "chapada" e sem
     hierarquia entre camadas */
  --cor-fundo: #f6f6f6;
  --cor-fundo-elevado: #ffffff;
  --cor-texto: #1a1a1a;
  --cor-texto-suave: #6f6f6f;
  --cor-borda: #e2e2e2;
  --cor-destaque: #d9822b;
  --cor-destaque-texto: #ffffff;

  --cor-disponivel: #2e9e5b;
  --cor-indisponivel: #c0392b;
  --cor-neutro: #8a8a8a;
  --cor-confirmado: #2f6fd1;

  --fonte-sistema: 'Plus Jakarta Sans', system-ui, sans-serif;

  --raio: 16px;
  --raio-pequeno: 10px;
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;

  --largura-sidebar: 248px;
  --altura-bottom-nav: 64px;
  --altura-topo: 56px;

  --sombra-card: 0 1px 2px rgba(0,0,0,.04), 0 1px 8px rgba(0,0,0,.04);
}

/* escuro: grafite forte, nunca preto absoluto — cards um tom mais claro pra
   manter a mesma hierarquia de camadas do modo claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #1e1e1e;
    --cor-fundo-elevado: #292929;
    --cor-texto: #f0f0f0;
    --cor-texto-suave: #9a9a9a;
    --cor-borda: #2f2f2f;
    --sombra-card: 0 1px 2px rgba(0,0,0,.2), 0 1px 8px rgba(0,0,0,.2);
  }
}
:root[data-tema="escuro"] {
  --cor-fundo: #181818;
  --cor-fundo-elevado: #222222;
  --cor-texto: #f0f0f0;
  --cor-texto-suave: #9a9a9a;
  --cor-borda: #2f2f2f;
  --sombra-card: 0 1px 2px rgba(0,0,0,.2), 0 1px 8px rgba(0,0,0,.2);
}

/* animação de entrada ao trocar de tela/rota — só desloca a posição (nunca
   mexe em opacity): se o navegador travar a animação a meio caminho (aba em
   segundo plano, dispositivo lento), o pior caso é um leve deslocamento, o
   conteúdo nunca fica sumido ou "lavado". Some com prefers-reduced-motion. */
@keyframes surgir { from { transform: translateY(8px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #conteudo-rota.entrada-rota { animation: surgir .3s cubic-bezier(.16,1,.3,1) both; }
  .form-auth > label, .form-auth > input, .form-auth > .campo-senha, .form-auth > button, .form-auth > .erro-form,
  .campo-foto, .logo-auth, .tela-auth h1, .aviso-convite, .texto-intro-cadastro {
    animation: surgir .35s cubic-bezier(.16,1,.3,1) both;
  }
  .tela-auth h1 { animation-delay: .03s; }
  .aviso-convite, .texto-intro-cadastro, .campo-foto { animation-delay: .06s; }
  .form-auth > *:nth-child(1) { animation-delay: .08s; }
  .form-auth > *:nth-child(2) { animation-delay: .11s; }
  .form-auth > *:nth-child(3) { animation-delay: .14s; }
  .form-auth > *:nth-child(4) { animation-delay: .17s; }
  .form-auth > *:nth-child(5) { animation-delay: .2s; }
  .form-auth > *:nth-child(6) { animation-delay: .23s; }
  .form-auth > *:nth-child(7) { animation-delay: .26s; }
  .form-auth > *:nth-child(8) { animation-delay: .29s; }
  .grade-widgets > * { animation: surgir .28s ease both; }
  .grade-widgets > *:nth-child(1) { animation-delay: .02s; }
  .grade-widgets > *:nth-child(2) { animation-delay: .05s; }
  .grade-widgets > *:nth-child(3) { animation-delay: .08s; }
  .grade-widgets > *:nth-child(4) { animation-delay: .11s; }
  .grade-widgets > *:nth-child(n+5) { animation-delay: .14s; }

  /* login/cadastro: entrada um pouco mais expressiva que o resto do app
     (some opacity + um leve scale) — é a primeira impressão de quem chega,
     vale um efeito um pouco mais chamativo que a navegação normal */
  .tela-auth .logo-auth, .tela-auth h1, .tela-auth .aviso-convite, .tela-auth .texto-intro-cadastro,
  .tela-auth .form-auth > label, .tela-auth .form-auth > input, .tela-auth .form-auth > .campo-senha,
  .tela-auth .form-auth > button, .tela-auth .form-auth > .erro-form, .tela-auth .link-secundario {
    animation-name: surgir-auth;
    animation-duration: .5s;
  }
}
@keyframes surgir-auth { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-sistema);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
}
h1, h2, h3, p { margin: 0 0 var(--espaco-2); }
h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 15px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--cor-destaque); }
img { max-width: 100%; display: block; }
/* campo de formulário com menos de 16px faz o Safari/iOS dar zoom
   automático na tela inteira ao tocar pra digitar — trava real em
   celular, não só estética */
input, select, textarea { font-size: 16px; }

/* Texto secundário/descritivo: sempre menor e mais apagado que o texto
   principal — usado tanto na classe utilitária .texto-suave quanto em
   qualquer <p> dentro de um bloco .descricao-secao */
.texto-suave { color: var(--cor-texto-suave); font-size: 13px; opacity: .85; }

/* --------------------------------- Botões -------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding: 12px 20px;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.botao-primario { background: var(--cor-destaque); color: var(--cor-destaque-texto); }
.botao-primario:disabled { opacity: .6; cursor: default; }
.botao-secundario { background: transparent; border-color: var(--cor-borda); color: var(--cor-texto); }
.botao-perigo { background: var(--cor-indisponivel); color: #fff; }
/* padding/min generosos mesmo em botões só-ícone: aumenta a área de toque
   sem aumentar o ícone visualmente (o padding é invisível, sem fundo/borda) */
.botao-texto { background: none; border: none; color: var(--cor-destaque); font-weight: 600; padding: 8px 10px; min-height: 36px; min-width: 36px; }

/* ---------------------------- Telas de autenticação ---------------------- */
.tela-auth {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--espaco-6) var(--espaco-5) var(--espaco-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.logo-auth { display: block; width: 56px; height: 56px; color: var(--cor-destaque); margin: 0 auto var(--espaco-3); }
.logo-auth svg { width: 100%; height: 100%; }
.tela-auth h1 { font-size: 24px; margin-bottom: var(--espaco-5); }
.form-auth { width: 100%; display: flex; flex-direction: column; gap: var(--espaco-1); text-align: left; }
.form-auth label { font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); margin-top: var(--espaco-3); }
/* :not([type=checkbox]):not([type=radio]) é essencial — sem isso, todo
   checkbox/radio dentro de um .form-auth (as listas de "selecionar pessoas",
   permissões etc.) virava uma caixa com borda e width:100%, empurrando o
   texto do label pra longe e quebrando linha de forma feia. */
.form-auth input:not([type="checkbox"]):not([type="radio"]), .form-auth select, .form-auth textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  font-size: 16px;
  font-family: inherit;
}
.form-auth input:not([type="checkbox"]):not([type="radio"]):focus, .form-auth select:focus, .form-auth textarea:focus {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 1px;
}
.form-auth input[type="checkbox"], .form-auth input[type="radio"] { width: auto; flex-shrink: 0; }
.campo-senha { position: relative; display: flex; }
.campo-senha input { padding-right: 44px; }
.botao-olho {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 40px; background: none; border: none; color: var(--cor-texto-suave); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.erro-form { color: var(--cor-indisponivel); font-size: 14px; margin-top: var(--espaco-2); }
.form-auth .botao { margin-top: var(--espaco-5); }
.link-secundario { margin-top: var(--espaco-4); font-size: 14px; }
.aviso-convite { background: var(--cor-fundo-elevado); border-radius: var(--raio-pequeno); padding: var(--espaco-3); margin-bottom: var(--espaco-4); font-size: 14px; }

.campo-foto { display: flex; justify-content: center; margin-bottom: var(--espaco-3); }
.preview-foto {
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px dashed var(--cor-borda); background: var(--cor-fundo-elevado);
  color: var(--cor-texto-suave); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background-size: cover; background-position: center;
}
.preview-foto.com-foto { border-style: solid; color: transparent; }
.preview-capa { width: 100%; height: 140px; border-radius: var(--raio); }
.campo-foto-capa { display: block; }

.seletor-cor-borda { display: flex; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.opcao-cor {
  width: 32px; height: 32px; border-radius: 50%; background: var(--cor);
  border: 2px solid transparent; cursor: pointer;
}
.opcao-cor.selecionada { border-color: var(--cor-texto); }

.tela-link-invalido { max-width: 420px; margin: var(--espaco-6) auto; text-align: center; padding: var(--espaco-5); }
.logo-invalido { display: block; width: 48px; height: 48px; margin: 0 auto var(--espaco-4); opacity: .5; color: var(--cor-texto); }
.logo-invalido svg { width: 100%; height: 100%; }

/* ------------------------------ Cropper de foto --------------------------- */
.modal-cropper {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--espaco-4);
}
.modal-cropper-caixa { background: var(--cor-fundo); border-radius: var(--raio); padding: var(--espaco-5); max-width: 340px; width: 100%; }
.grade-icones { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--espaco-2); max-height: 280px; overflow-y: auto; margin: var(--espaco-3) 0; }
.opcao-icone { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); font-size: 18px; cursor: pointer; }
.opcao-icone.selecionada, .opcao-icone:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); }
.cropper-viewport { overflow: hidden; max-width: 100%; margin: 0 auto; touch-action: none; }
.cropper-viewport canvas { display: block; max-width: 100%; height: auto; }
.cropper-viewport-circulo { border-radius: 50%; }
.cropper-viewport-quadrado, .cropper-viewport-capa { border-radius: var(--raio-pequeno); }
.cropper-zoom-label { display: block; font-size: 13px; color: var(--cor-texto-suave); margin-top: var(--espaco-4); }
.cropper-zoom { width: 100%; }
.cropper-acoes { display: flex; gap: var(--espaco-2); margin-top: var(--espaco-4); }
.cropper-acoes .botao { flex: 1; }

/* --------------------------------- Barra do topo --------------------------- */
.barra-topo {
  position: sticky; top: 0; z-index: 150;
  height: var(--altura-topo); padding: 0 var(--espaco-4);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cor-fundo-elevado); border-bottom: 1px solid var(--cor-borda);
}
/* align-self:stretch faz o link ocupar a altura inteira da barra do topo —
   sem isso a área clicável ficava só do tamanho do conteúdo (24px), com uma
   faixa "morta" acima/abaixo dela dentro da barra de 56px */
.barra-topo-marca { display: flex; align-items: center; gap: var(--espaco-2); text-decoration: none; color: var(--cor-texto); font-weight: 700; font-size: 15px; align-self: stretch; }
.barra-topo-marca svg { width: 24px; height: 24px; color: var(--cor-destaque); flex-shrink: 0; }
.faixa-visualizar-como { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: var(--cor-destaque); color: var(--cor-destaque-texto); font-size: 13px; font-weight: 600; text-decoration: none; }
.barra-topo-usuario { display: flex; align-items: center; gap: var(--espaco-2); text-decoration: none; color: var(--cor-texto); margin-left: auto; align-self: stretch; }
.nome-usuario-topo { font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-topo {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--cor-borda); display: flex; align-items: center; justify-content: center;
  color: var(--cor-texto-suave); background: var(--cor-fundo);
}
.avatar-topo img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------- App shell ------------------------------ */
.app-shell { display: flex; min-height: calc(100vh - var(--altura-topo)); }
.app-conteudo { flex: 1; padding: var(--espaco-4); padding-bottom: calc(var(--altura-bottom-nav) + env(safe-area-inset-bottom) + var(--espaco-5)); max-width: 720px; margin: 0 auto; width: 100%; }

.sidebar {
  display: none;
  width: var(--largura-sidebar);
  flex-shrink: 0;
  border-right: 1px solid var(--cor-borda);
  padding: var(--espaco-5) var(--espaco-3);
  flex-direction: column;
  gap: var(--espaco-1);
}
.sidebar-logo { display: flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-2); margin-bottom: var(--espaco-4); font-weight: 700; font-size: 18px; }
.sidebar-logo svg { width: 28px; height: 28px; color: var(--cor-destaque); flex-shrink: 0; }
.nav-item {
  display: flex; align-items: center; gap: var(--espaco-3);
  padding: var(--espaco-3); border-radius: var(--raio-pequeno);
  color: var(--cor-texto); text-decoration: none; font-size: 15px; font-weight: 500;
}
.nav-item i { font-size: 20px; }
.nav-item.ativo { background: var(--cor-fundo-elevado); color: var(--cor-destaque); }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--altura-bottom-nav);
  background: var(--cor-fundo); border-top: 1px solid var(--cor-borda);
  display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 100;
}
.bottom-nav .nav-item { flex: 1; flex-direction: column; gap: 2px; border-radius: 0; font-size: 11px; justify-content: center; }
.bottom-nav .nav-item.ativo { background: none; }

.fab {
  /* soma o safe-area do home indicator (iPhone) além da altura fixa da
     barra — sem isso, em telas com esse recuo o FAB fica baixo demais e
     invade visualmente a barra de navegação de baixo */
  position: fixed; right: var(--espaco-4); bottom: calc(var(--altura-bottom-nav) + env(safe-area-inset-bottom) + var(--espaco-4));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cor-destaque); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 200; cursor: grab;
  transition: transform .15s ease;
}
.fab.recolhido { transform: translateX(70%); }

.fab-menu {
  position: fixed; z-index: 250; background: var(--cor-fundo-elevado); border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: var(--espaco-2); display: flex; flex-direction: column; gap: 2px;
  min-width: 200px; max-height: min(70vh, 340px); overflow-y: auto; border: 1px solid var(--cor-borda);
  transform-origin: bottom right;
}
@media (prefers-reduced-motion: no-preference) {
  .fab-menu { animation: surgir-fab .18s cubic-bezier(.16,1,.3,1) both; }
  @keyframes surgir-fab { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
}
.fab-menu-item {
  display: flex; align-items: center; gap: var(--espaco-2); padding: 10px 12px; border-radius: var(--raio-pequeno);
  color: var(--cor-texto); text-decoration: none; font-size: 14px; font-weight: 500;
}
.fab-menu-item:hover { background: var(--cor-fundo-elevado); }
.fab-menu-item i { color: var(--cor-destaque); font-size: 18px; }

@media (min-width: 900px) {
  .sidebar { display: flex; }
  .bottom-nav { display: none; }
  .app-conteudo { padding: var(--espaco-6); max-width: 900px; }
  .fab { bottom: var(--espaco-5); }
  .barra-topo-marca { display: none; } /* sidebar já mostra a logo no desktop */
  .nome-usuario-topo { max-width: 200px; }
}

/* --------------------------- Telas internas (grupos/eventos) --------------- */
.cabecalho-tela { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
.cabecalho-tela h1 { margin: 0; min-width: 0; }
@media (max-width: 480px) {
  /* título longo (nome de grupo/rolê) colidia com os botões de ação ao lado
     em telas de celular — abaixo desse tamanho, título ocupa a linha
     inteira e os botões descem pra linha de baixo, sem quebrar no meio */
  .cabecalho-tela { flex-wrap: wrap; }
  .cabecalho-tela h1 { flex: 1 1 100%; }
}
.titulo-secao { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cor-texto-suave); margin-top: var(--espaco-6); margin-bottom: var(--espaco-3); }
.erro-rota { padding: var(--espaco-5); text-align: center; color: var(--cor-texto-suave); }

.cabecalho-secao-info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-2); }
.titulo-secao.sem-margem { margin: 0; }
.resumo-secao-info { margin: 2px 0 0; }
.botao-expandir-info { background: none; border: none; color: var(--cor-texto-suave); cursor: pointer; padding: 2px; flex-shrink: 0; font-size: 16px; }
.botao-expandir-info:hover { color: var(--cor-destaque); }
.detalhe-secao-info { font-size: 13px; color: var(--cor-texto-suave); background: var(--cor-fundo); border-radius: var(--raio-pequeno); padding: var(--espaco-3); margin: var(--espaco-2) 0 0; }

.secao-colapsavel { padding: 0; overflow: hidden; }
.cabecalho-colapsavel { display: flex; align-items: flex-start; gap: var(--espaco-2); padding: var(--espaco-4); cursor: pointer; }
.cabecalho-colapsavel .cabecalho-secao-info { flex: 1; }
.icone-colapsavel { color: var(--cor-texto-suave); font-size: 18px; flex-shrink: 0; transition: transform .15s ease; margin-top: 2px; }
.icone-colapsavel.icone-colapsavel-aberto { transform: rotate(180deg); color: var(--cor-destaque); }
.corpo-colapsavel { padding: 0 var(--espaco-4) var(--espaco-4); }

/* divide duas configurações relacionadas dentro do mesmo card colapsável
   (ex: dados pessoais + senha, notificações + som) sem precisar de outra
   caixa/janela separada pra cada uma */
.divisor-subsecao { border: none; border-top: 1px solid var(--cor-borda); margin: var(--espaco-4) 0; }
.titulo-subsecao { font-size: 13px; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--espaco-2); }

.botao-config-avancada { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 1px dashed var(--cor-borda); border-radius: var(--raio-pequeno); color: var(--cor-texto-suave); font-size: 13px; font-weight: 600; padding: 10px 14px; margin-top: var(--espaco-4); cursor: pointer; }
.botao-config-avancada i:first-child { color: var(--cor-destaque); font-size: 15px; }
.botao-config-avancada .icone-colapsavel { margin-left: auto; margin-top: 0; }
.corpo-config-avancada { display: flex; flex-direction: column; gap: var(--espaco-1); margin-top: var(--espaco-1); }
.corpo-config-avancada[hidden] { display: none; }

.lista-cards-grupo { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card-grupo { display: block; border-radius: var(--raio); overflow: hidden; background: var(--cor-fundo-elevado); text-decoration: none; color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.capa-grupo { width: 100%; height: 100px; object-fit: cover; }
.capa-grupo-vazia { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: color-mix(in srgb, var(--cor-grupo) 20%, var(--cor-fundo-elevado)); }
.info-card-grupo { padding: var(--espaco-3); }
.info-card-grupo h3 { font-size: 15px; margin-bottom: 2px; }
.info-card-grupo p { font-size: 13px; color: var(--cor-texto-suave); margin: 0; }

.capa-topo-grupo, .capa-topo-evento { display: block; width: 100%; aspect-ratio: 320 / 132; border-radius: var(--raio); margin-bottom: var(--espaco-4); overflow: hidden; }
.capa-topo-grupo img, .capa-topo-evento img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-topo-vazia { width: 100%; aspect-ratio: 320 / 132; border-radius: var(--raio); display: flex; align-items: center; justify-content: center; font-size: 48px; background: color-mix(in srgb, var(--cor-grupo) 20%, var(--cor-fundo-elevado)); margin-bottom: var(--espaco-4); }

.secao-acao { margin: var(--espaco-4) 0; }
.lista-eventos-feed { display: flex; flex-direction: column; gap: var(--espaco-2); }
.card-evento-feed { display: flex; gap: var(--espaco-3); align-items: stretch; text-decoration: none; color: var(--cor-texto); padding: var(--espaco-3); }
.faixa-cor-evento { width: 4px; border-radius: 2px; background: var(--cor-evento); flex-shrink: 0; }
.data-evento-feed { font-size: 12px; color: var(--cor-texto-suave); margin: 0 0 2px; }
.card-evento-feed h3 { font-size: 15px; margin: 0; }

.lista-membros-grupo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.item-membro { display: flex; align-items: center; gap: var(--espaco-3); font-size: 14px; text-decoration: none; color: var(--cor-texto); }
.tela-compacta .titulo-compacto, .titulo-compacto { font-size: 19px; margin-bottom: var(--espaco-3); }
.item-anfitriao { align-items: flex-start; padding: var(--espaco-3); background: var(--cor-fundo-elevado); border-radius: var(--raio-pequeno); }
.corpo-item-anfitriao { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.corpo-item-anfitriao .texto-suave { font-size: 12.5px; }
.linha-tags-permissao { display: flex; flex-wrap: wrap; gap: 4px; }
.linha-tags-permissao .tag-semantica { font-size: 11px; }

.resumo-avaliacao { font-size: 15px; font-weight: 600; }
.resumo-avaliacao i { color: #e0a626; }
.seletor-estrelas { display: flex; gap: 4px; margin: var(--espaco-1) 0 var(--espaco-3); }
.botao-estrela { background: none; border: none; cursor: pointer; font-size: 26px; color: var(--cor-borda); padding: 2px; }
.botao-estrela.estrela-ativa { color: #e0a626; }
.estrela-ativa { color: #e0a626; }
.estrela-vazia { color: var(--cor-borda); }
.linha-minha-avaliacao { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); font-size: 18px; margin: var(--espaco-2) 0; }
.lista-avaliacoes-texto { margin-top: var(--espaco-3); }
.icone-elogio { color: var(--cor-disponivel); }
.icone-reclamacao { color: var(--cor-indisponivel); }
.avatar-membro { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--cor-borda); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cor-texto-suave); }
.avatar-membro img { width: 100%; height: 100%; object-fit: cover; }
.avatar-borda-cor1 { border-color: #d9822b; } .avatar-borda-cor2 { border-color: #2f6fd1; }
.avatar-borda-cor3 { border-color: #2e9e5b; } .avatar-borda-cor4 { border-color: #a855c9; }
.avatar-borda-cor5 { border-color: #c0392b; } .avatar-borda-cor6 { border-color: #4a4a4a; }

.tela-formulario { max-width: 560px; margin: 0 auto; padding-bottom: var(--espaco-6); }
.tela-formulario h1 { margin-bottom: var(--espaco-4); }
.linha-label-acao { display: flex; align-items: center; justify-content: space-between; margin-top: var(--espaco-3); }
.linha-label-acao label { margin: 0; }
.opcoes-radio { display: flex; gap: var(--espaco-4); font-size: 14px; font-weight: 400; margin-top: var(--espaco-2); }
.opcoes-radio label { display: flex; align-items: center; gap: 6px; color: var(--cor-texto); font-weight: 400; margin: 0; }
.lista-checkbox-membros { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-2); max-height: 220px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: var(--espaco-3); }
.item-checkbox-membro { display: flex; align-items: center; gap: var(--espaco-2); font-size: 14px; font-weight: 400; }
.secao-convite-ia { margin-top: var(--espaco-5); }
.secao-convite-ia textarea { margin-top: var(--espaco-2); }

/* --------------------------------- Tela de evento --------------------------- */
.acoes-cabecalho-evento { display: flex; gap: var(--espaco-2); flex-shrink: 0; }
.acoes-cabecalho-evento .botao { padding: 10px 14px; }
.descricao-evento { white-space: pre-wrap; }
.botoes-participacao { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: var(--espaco-3) 0; }
.linha-atalhos-perfil { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: var(--espaco-3) 0; }
.chip-atalho { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda); color: var(--cor-texto); text-decoration: none; font-size: 13px; font-weight: 600; }
.chip-atalho i { font-size: 15px; color: var(--cor-destaque); }
.lista-confirmados { display: flex; flex-direction: column; gap: var(--espaco-3); }
.item-confirmado { justify-content: flex-start; }
.nome-confirmado { flex: 1; }
.nome-administrador { color: #b8860b; font-weight: 700; }
:root:not([data-tema="claro"]) .nome-administrador { color: #d4af37; }
:root[data-tema="escuro"] .nome-administrador { color: #d4af37; }
.selo-anfitriao { color: #d4af37; font-size: 15px; }
.selo-destaque { color: #e0a626; font-size: 14px; }
.titulo-secao-menor { font-size: 13px; color: var(--cor-texto-suave); margin: var(--espaco-4) 0 var(--espaco-2); }

.lista-caronas { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.card-carona { display: flex; align-items: center; gap: var(--espaco-3); cursor: pointer; }
.card-carona p { margin: 0; }
.lista-comentarios-carona { display: flex; flex-direction: column; gap: var(--espaco-2); margin: var(--espaco-3) 0; font-size: 14px; }
.linha-comentario { display: flex; gap: var(--espaco-2); }
.linha-comentario input { flex: 1; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto); }

/* --------------------------------- Comentários e curtidas ------------------- */
.linha-curtidas { display: flex; gap: var(--espaco-2); }
.botao-ativo { border-color: var(--cor-destaque); color: var(--cor-destaque); }
.lista-comentarios-evento { display: flex; flex-direction: column; gap: var(--espaco-3); margin-top: var(--espaco-2); }
.item-comentario-evento { display: flex; gap: var(--espaco-3); }
.corpo-comentario { flex: 1; }
.corpo-comentario p { margin: 0 0 4px; }
.cabecalho-comentario { font-size: 13px; display: flex; align-items: center; gap: var(--espaco-2); flex-wrap: wrap; }
.form-comentario-evento { margin-top: var(--espaco-3); }
.form-comentario-evento textarea { width: 100%; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); font-family: inherit; }
.linha-form-comentario { display: flex; align-items: center; justify-content: space-between; margin-top: var(--espaco-2); }
.check-sugestao { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cor-texto-suave); }

/* --------------------------------- Votação e sugestões ---------------------- */
.tela-votacao, .tela-sugestoes { max-width: 560px; margin: 0 auto; }
.lista-opcoes-votacao { display: flex; flex-direction: column; gap: var(--espaco-2); margin: var(--espaco-4) 0; }
.btn-opcao-votacao { justify-content: flex-start; text-align: left; }
.opcao-votacao-resultado { position: relative; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: 12px 14px; display: flex; justify-content: space-between; overflow: hidden; }
.opcao-votacao-resultado.minha-escolha { border-color: var(--cor-destaque); }
.barra-resultado { position: absolute; inset: 0; background: color-mix(in srgb, var(--cor-destaque) 15%, transparent); z-index: 0; }
.texto-opcao-votacao, .votos-opcao { position: relative; z-index: 1; }
.votos-opcao { color: var(--cor-texto-suave); font-size: 13px; }
#lista-opcoes { display: flex; flex-direction: column; gap: var(--espaco-2); }
#lista-opcoes .input-opcao { margin-top: 0; }
.lista-sugestoes { display: flex; flex-direction: column; gap: var(--espaco-3); }
.card-sugestao h3 { margin-bottom: 4px; }

/* --------------------------------- Calendário -------------------------------- */
.alternador-modo { display: flex; gap: 2px; background: var(--cor-fundo); border-radius: var(--raio-pequeno); padding: 3px; }
.botao-modo-visualizacao { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: none; border-radius: 7px; color: var(--cor-texto-suave); cursor: pointer; font-size: 16px; }
.botao-modo-visualizacao.ativo-modo { background: var(--cor-fundo-elevado); color: var(--cor-destaque); box-shadow: var(--sombra-card); }
.ativo-modo { color: var(--cor-destaque); }
.navegacao-mes { display: flex; align-items: center; justify-content: space-between; margin: var(--espaco-3) 0; }
.navegacao-mes strong::first-letter { text-transform: uppercase; }
.aviso-custo-mes { background: var(--cor-fundo-elevado); border-radius: var(--raio-pequeno); padding: var(--espaco-3); font-size: 14px; margin-bottom: var(--espaco-3); }
.filtro-grupo-calendario { width: 100%; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); margin-bottom: var(--espaco-4); }
.campo-select-icone { position: relative; display: flex; align-items: center; }
.campo-select-icone i { position: absolute; left: 12px; color: var(--cor-texto-suave); font-size: 15px; pointer-events: none; }
.campo-select-icone select { padding-left: 34px; margin-bottom: 0; }
.alternador-agrupamento { display: flex; gap: 2px; background: var(--cor-fundo); border-radius: var(--raio-pequeno); padding: 3px; }
.botao-agrupamento { width: auto; padding: 0 10px; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.corpo-item-lista-calendario { flex: 1; min-width: 0; }
.descricao-item-calendario { font-size: 13px; color: var(--cor-texto-suave); margin: 0; }
.acoes-item-calendario { display: flex; gap: var(--espaco-2); align-items: center; color: var(--cor-texto-suave); }
.acoes-item-calendario a { color: inherit; }

.grade-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cabecalho-dia-semana { text-align: center; font-size: 12px; color: var(--cor-texto-suave); padding: var(--espaco-2) 0; }
.dia-grade { aspect-ratio: 1; border-radius: var(--raio-pequeno); background: var(--cor-fundo-elevado); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.dia-vazio { background: none; }
.numero-dia { font-size: 12px; color: var(--cor-texto-suave); }
.marcadores-dia { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ponto-evento { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.icone-marcador { font-size: 11px; color: var(--cor-texto-suave); }

/* --------------------------------- Notificações ------------------------------ */
.lista-notificacoes { display: flex; flex-direction: column; gap: var(--espaco-2); }
.item-notificacao { display: flex; flex-wrap: wrap; gap: var(--espaco-3); padding: var(--espaco-3); border-radius: var(--raio-pequeno); text-decoration: none; color: var(--cor-texto); background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda); }
.notificacao-nao-lida { border-color: var(--cor-destaque); background: color-mix(in srgb, var(--cor-destaque) 6%, var(--cor-fundo-elevado)); }
.notificacao-nao-lida .titulo-notificacao { font-weight: 700; }
.icone-notificacao { font-size: 20px; color: var(--cor-destaque); margin-top: 2px; flex-shrink: 0; }
.corpo-notificacao { flex: 1 1 auto; min-width: 0; }
.corpo-notificacao p { margin: 0; }
.titulo-notificacao { font-weight: 600; }
.data-notificacao { font-size: 12px; color: var(--cor-texto-suave); margin-top: 2px; }

.modal-mensagem-manual { max-width: 420px; }
.modal-mensagem-manual select { width: 100%; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); margin-top: var(--espaco-1); }
.modal-mensagem-manual textarea { width: 100%; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); font-family: inherit; margin-top: var(--espaco-1); }
#area-links-whatsapp { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-3); }
.link-whatsapp-grupo { text-decoration: none; }

/* --------------------------------- Onboarding -------------------------- */
/* box-shadow inset em vez de border-left: um border parcial (só um lado) com
   border-radius tem um bug de renderização visível em alguns WebKit móveis
   (Safari/webview do WhatsApp) — a cor "vaza" pra fora do canto arredondado,
   virando uma manchinha pendurada embaixo do card. Inset não tem esse bug,
   porque é pintado por dentro do próprio border-radius. */
.cartao-onboarding { box-shadow: inset 3px 0 0 0 var(--cor-destaque); margin: var(--espaco-3) 0; }
.cabecalho-onboarding { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.cabecalho-onboarding strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.lista-passos-onboarding { display: flex; flex-direction: column; gap: 2px; margin-top: var(--espaco-3); }
.passo-onboarding { display: flex; align-items: center; gap: var(--espaco-2); padding: 10px 4px; text-decoration: none; color: var(--cor-texto); font-size: 14px; border-radius: var(--raio-pequeno); width: 100%; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }
.passo-onboarding:hover { background: var(--cor-fundo); }
.passo-onboarding > i:first-child { color: var(--cor-texto-suave); font-size: 18px; flex-shrink: 0; }
.passo-onboarding.passo-feito > i:first-child { color: var(--cor-disponivel); }
.passo-onboarding.passo-feito span { color: var(--cor-texto-suave); text-decoration: line-through; }
.passo-onboarding span { flex: 1; }
.icone-passo-onboarding { color: var(--cor-texto-suave); font-size: 15px; }

/* --------------------------------- Painel / widgets -------------------------- */
.grade-widgets { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--espaco-3); }
.grade-widgets-compacta { grid-template-columns: repeat(3, 1fr); align-items: start; }
/* reserva sempre a mesma altura pro título (1 ou 2 linhas, tanto faz) —
   senão "Pessoas" (1 linha) e "Rolês ativos" (2 linhas) empurravam os
   números pra alturas diferentes, ficando visualmente desalinhados na grade */
.grade-widgets-compacta .titulo-widget { min-height: 2.7em; align-items: flex-start; }
.grade-widgets-compacta .numero-widget { font-size: 22px; }
.widget-painel { display: block; background: var(--cor-fundo-elevado); border-radius: var(--raio); padding: var(--espaco-4); text-decoration: none; color: var(--cor-texto); box-shadow: inset 3px 0 0 0 var(--cor-evento, var(--cor-destaque)); }
.titulo-widget { font-size: 13px; color: var(--cor-texto-suave); margin: 0 0 var(--espaco-2); display: flex; align-items: center; gap: 6px; }
.valor-widget { font-weight: 600; font-size: 15px; margin: 0; }
.widget-numero { box-shadow: inset 3px 0 0 0 var(--cor-destaque); }
.numero-widget { font-size: 28px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.linha-widget { display: block; font-size: 14px; padding: 4px 0; color: var(--cor-texto); text-decoration: none; }
a.linha-widget:hover { color: var(--cor-destaque); }
.aniversariante-hoje { font-weight: 700; color: var(--cor-destaque); }

.widget-atalhos, .widget-mini-calendario, .widget-grafico, .widget-proximos-eventos { grid-column: 1 / -1; }
.grade-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--espaco-2); margin-top: var(--espaco-1); }
.atalho-painel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--espaco-3) var(--espaco-2); border-radius: var(--raio-pequeno); background: var(--cor-fundo); text-decoration: none; color: var(--cor-texto); text-align: center; font-size: 12px; font-weight: 600; }
.atalho-painel i { font-size: 20px; color: var(--cor-destaque); }
.atalho-painel:hover { background: color-mix(in srgb, var(--cor-destaque) 10%, var(--cor-fundo)); }
.linha-evento-miniatura { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-2) 0; text-decoration: none; color: var(--cor-texto); }
.linha-evento-miniatura + .linha-evento-miniatura { border-top: 1px solid var(--cor-borda); }
.miniatura-evento { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--raio-pequeno); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cor-evento, var(--cor-destaque)) 16%, transparent); color: var(--cor-evento, var(--cor-destaque)); font-size: 17px; }
.corpo-evento-miniatura { display: flex; flex-direction: column; min-width: 0; }
.corpo-evento-miniatura .nome-confirmado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-mini-calendario { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.titulo-mini-calendario { text-decoration: none; margin: 0; }
.titulo-mini-calendario:hover { color: var(--cor-destaque); }
.botao-nav-mini-calendario { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: var(--cor-fundo); border-radius: 50%; color: var(--cor-texto-suave); cursor: pointer; flex-shrink: 0; }
.botao-nav-mini-calendario:hover { color: var(--cor-destaque); }
.grade-mini-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--espaco-2); }
.dia-mini-calendario { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--raio-pequeno); font-size: 12px; color: var(--cor-texto-suave); }
.dia-mini-vazio { visibility: hidden; }
.dia-mini-com-evento { background: color-mix(in srgb, var(--cor-destaque) 16%, transparent); color: var(--cor-texto); font-weight: 600; }
.dia-mini-hoje { border: 1.5px solid var(--cor-destaque); color: var(--cor-texto); font-weight: 700; }
.grafico-barras { display: flex; align-items: flex-end; gap: var(--espaco-2); margin-top: var(--espaco-3); height: 72px; }
.coluna-grafico { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.barra-grafico { width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--cor-destaque); }
.rotulo-grafico { font-size: 11px; color: var(--cor-texto-suave); text-transform: capitalize; }
.widget-organizador { box-shadow: inset 3px 0 0 0 var(--cor-confirmado); }
#config-widgets { margin-bottom: var(--espaco-4); }
#config-widgets .item-checkbox-membro { padding: 4px 0; }

/* --------------------------------- Perfil -------------------------------- */
.tela-perfil-publico { max-width: 480px; margin: 0 auto; text-align: center; }
.avatar-perfil-grande { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--cor-borda); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto var(--espaco-3); font-size: 32px; color: var(--cor-texto-suave); }
.avatar-perfil-grande img { width: 100%; height: 100%; object-fit: cover; }
#detalhes-expandidos { text-align: left; margin-top: var(--espaco-4); }

/* --------------------------------- Perfil próprio ----------------------------- */
.tela-perfil { max-width: 560px; margin: 0 auto; padding-bottom: var(--espaco-6); display: flex; flex-direction: column; gap: var(--espaco-4); }
.secao-perfil { padding: var(--espaco-4); box-shadow: var(--sombra-card); border: 1px solid var(--cor-borda); }
.secao-perfil .titulo-secao { margin-top: 0; }
.aviso-perfil-incompleto {
  display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-3) var(--espaco-4);
  background: color-mix(in srgb, var(--cor-destaque) 12%, var(--cor-fundo-elevado)); border: 1px solid color-mix(in srgb, var(--cor-destaque) 30%, transparent);
  border-radius: var(--raio-pequeno); color: var(--cor-texto);
}
.aviso-perfil-incompleto i { color: var(--cor-destaque); font-size: 20px; margin-top: 2px; }
.aviso-perfil-incompleto p { margin: 2px 0 0; }

.secao-acoes-admin { text-align: left; margin: var(--espaco-4) 0; width: 100%; box-shadow: var(--sombra-card); }
.linha-acao-admin { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-3); }
.botao-perigo-texto { color: var(--cor-indisponivel); border-color: color-mix(in srgb, var(--cor-indisponivel) 40%, transparent); }
.botao-sair-perfil { width: 100%; margin-top: var(--espaco-4); color: var(--cor-texto-suave); }
.botao-instalar-topo { width: 100%; margin-bottom: var(--espaco-4); border-color: var(--cor-destaque); color: var(--cor-destaque); }
.icone-ir-perfil { margin-left: auto; color: var(--cor-texto-suave); font-size: 16px; }
.item-instrucao { padding: 0; overflow: hidden; margin-bottom: var(--espaco-2); }
.botao-instrucao { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; padding: var(--espaco-3) var(--espaco-4); text-align: left; cursor: pointer; color: var(--cor-texto); font-size: 14px; }
.detalhe-instrucao { padding: 0 var(--espaco-4) var(--espaco-3); margin: 0; font-size: 14px; color: var(--cor-texto-suave); }
.subtitulo-grupo-instrucao { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .4px; margin: var(--espaco-4) 0 var(--espaco-2); }
.subtitulo-grupo-instrucao:first-child { margin-top: 0; }
.subtitulo-grupo-instrucao i { color: var(--cor-destaque); font-size: 14px; }
.cartao-suporte { display: flex; flex-direction: column; gap: var(--espaco-3); align-items: flex-start; }
.cartao-suporte > p:first-child { margin: 0; font-size: 14px; line-height: 1.55; }
.cartao-suporte > p:first-child i { color: var(--cor-destaque); margin-right: 4px; }
.info-tecnica-suporte { font-size: 11.5px; margin: 0; }
.linha-historico { font-size: 14px; margin: 0 0 var(--espaco-2); }

/* --------------------------------- Painéis de administração ------------------ */
.tela-super-admin, .tela-admin-grupo { max-width: 640px; margin: 0 auto; padding-bottom: var(--espaco-6); display: flex; flex-direction: column; gap: var(--espaco-4); }
.acoes-item-membro-admin { display: flex; gap: var(--espaco-2); align-items: center; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.item-aviso { align-items: flex-start; }
.linha-nova-categoria { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); margin-top: var(--espaco-3); }
.linha-nova-categoria input { width: auto; flex: 1; min-width: 100px; margin-top: 0; }
.tabela-scroll-horizontal { overflow-x: auto; margin-top: var(--espaco-2); }
.tabela-permissoes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-permissoes th, .tabela-permissoes td { text-align: left; padding: 8px; border-bottom: 1px solid var(--cor-borda); }
.tabela-permissoes th:not(:first-child), .tabela-permissoes td:not(:first-child) { text-align: center; }
.tela-colaborador { max-width: 640px; margin: 0 auto; }
.linha-filtros-calendario { display: flex; gap: var(--espaco-2); flex-wrap: wrap; margin: var(--espaco-3) 0; align-items: center; }
.linha-filtros-calendario select, .linha-filtros-calendario .campo-select-icone { flex: 1; min-width: 140px; }
.linha-filtros-calendario .filtro-grupo-calendario { margin-bottom: 0; }
.input-busca-membro { width: 100%; padding: 10px 14px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-fundo-elevado); color: var(--cor-texto); margin: var(--espaco-2) 0; }
.texto-quebra-link { word-break: break-all; font-size: 13px; color: var(--cor-texto-suave); }

/* --------------------------------- Modal de comprovante ---------------------- */
.modal-comprovante { max-width: 400px; }
.area-preview-comprovante { margin: var(--espaco-3) 0; text-align: center; }
.imagem-comprovante { max-width: 100%; max-height: 50vh; border-radius: var(--raio-pequeno); margin: 0 auto; object-fit: contain; }

/* --------------------------------- Utilitários ----------------------------- */
.texto-truncado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card { background: var(--cor-fundo-elevado); border-radius: var(--raio); padding: var(--espaco-4); }
.tag-semantica { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag-disponivel { background: color-mix(in srgb, var(--cor-disponivel) 15%, transparent); color: var(--cor-disponivel); }
.tag-indisponivel { background: color-mix(in srgb, var(--cor-indisponivel) 15%, transparent); color: var(--cor-indisponivel); }
.tag-neutro { background: color-mix(in srgb, var(--cor-neutro) 15%, transparent); color: var(--cor-neutro); }
.tag-confirmado { background: color-mix(in srgb, var(--cor-confirmado) 15%, transparent); color: var(--cor-confirmado); }