/* ═══════════════════════════════════════════════
   PORTAL DA REDE — Design System
   Translated from v0 (Tailwind → CSS pure)
   ═══════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────
   "Sem bordas" é princípio do projeto, mas o navegador desenha uma borda
   outset de 2px em <button> por padrão. Cada classe vinha repetindo
   `border:none` (69 vezes), e quem esquecia herdava a borda — foi o que
   aconteceu com os chips de pasta das Notas. Nenhum botão do portal quer
   borda, então o padrão certo é aqui, uma vez só. */
button { border: none; }

/* ── VARIÁVEIS ───────────────────────────────── */
:root {
  --page-bg:    #120a0a;   /* fundo (canvas), o mais escuro */
  --sidebar-bg: #1a0f0f;   /* painel lateral — propositalmente MAIS CLARO que a página */
  --card-bg:    #1a0f0f;   /* cards: mesmo tom da sidebar; ficam elevados sobre a página */
  --surface-2:  rgba(255,255,255,0.045); /* pills, rows internos */
  --border:     rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --text:  #F4F4F5;
  --text2: rgba(255,255,255,0.60);
  --text3: rgba(255,255,255,0.38);
  /* --accent é a MESMA cor de PROJECT_META[projeto].accent em app.js (fonte
     da verdade); :root.profile-nba/nfl só sobrescrevem --accent/--on-accent,
     nunca --accent-bg — ele deriva de --accent via color-mix, então nunca
     dessincroniza entre os 3 lugares (tema, PROJECT_META, Seleção de Perfil). */
  --accent:     #e10600;   /* = PROJECT_META.f1.accent */
  --accent-bg:  color-mix(in srgb, var(--accent) 18%, transparent);
  /* Cor do projeto ativo. O JS ainda a sobrescreve em alguns containers, mas
     ela precisa existir globalmente: são 25 usos de var(--accent-proj) SEM
     fallback no CSS, e fora daqueles containers a declaração ficava inválida
     (elemento sem cor de projeto nenhuma). Derivar de --accent faz cada perfil
     receber a sua automaticamente. */
  --accent-proj: var(--accent);
  --on-accent:  #f7f0c8;   /* creme — texto sobre o vermelho */
  --warn:       #ffc107;   /* alerta/urgência — semântico, não muda por projeto */
  --warn-bg:    rgba(255,193,7,0.18);
  /* Vermelho de ERRO, deliberadamente diferente do vermelho de marca da F1
     (#e10600). Quando os dois eram o mesmo hex, todo botão de apagar e toda
     mensagem de erro no perfil da NBA/NFL aparecia na cor da F1 Legendada —
     parecia vazamento de identidade, não semântica. */
  --danger:     #f04d4d;
  --danger-bg:  rgba(240,77,77,0.14);
  --ok:         #3ecf6a;   /* aprovar — universal, nunca muda por projeto */
  --ok-bg:      rgba(62,207,106,0.16);
  --no:         #f04d4d;   /* rejeitar — universal, nunca muda por projeto */
  --no-bg:      rgba(240,77,77,0.16);
  /* Sistema de modal novo (piloto: Nova Novidade) — nomes simples pros ~20
     modais que ainda vão migrar pra cá. --field é fixo (não muda por
     projeto): inputs sempre no mesmo cinza-quase-preto em qualquer perfil. */
  --surface:  var(--card-bg);
  --surface2: var(--surface-2);
  --field:    #101010;
  /* Teto das imagens de conteudo: inteiras (sem corte) mas sem tomar a tela */
  --img-max: 340px;
  --img-max-sm: 240px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 9999px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  /* Sidebar é permanentemente estreita (só ícones) — não expande. */
  --sidebar-width: 72px;
  --topbar-height: 64px;
  --instagram: #E1306C;
  --twitter: #1DA1F2;
  --tiktok: #69C9D0;
  /* Tipos de evento (F1/time) — usados por classe (.evt-tint-*), nunca inline.
     race/post_race reaproveitam a cor do projeto ativo, o resto é semântico
     e universal (não muda por projeto). */
  --race:      var(--accent-proj, var(--accent));
  --quali:     #f5a623;
  --sprint:    var(--twitter);
  --practice:  var(--text3);
  --game:      #ff8700;
  --meeting:   var(--tiktok);
  --playoffs:  var(--warn);
}

/* ATENÇÃO — o tema de perfil PRECISA ser aplicado no <html> (:root), nunca no
   <body>. Custom properties são substituídas no elemento onde são DECLARADAS:
   --accent-bg, --accent-proj, --surface e --race são derivadas de outras vars
   e ficam resolvidas já em :root. Sobrescrever --accent num descendente (body)
   não as recalcula — elas descem herdadas com o valor da F1 e o perfil inteiro
   fica vermelho. Trocar estes seletores por `body.profile-*` reintroduz o bug. */
:root.profile-f1 {
  --accent:     #e10600;   /* = PROJECT_META.f1.accent (redundante com o default do :root, mas explícito por simetria) */
  --on-accent:  #f7f0c8;
}

:root.profile-nba {
  --page-bg:    #03121e;
  --sidebar-bg: #072234;
  --card-bg:    #072234;
  --accent:     #1DA1F2;   /* = PROJECT_META.nba.accent */
  --on-accent:  #03121e;   /* escuro — bom contraste sobre o azul vivo */
}

:root.profile-nfl {
  --page-bg:    #110a1e;
  --sidebar-bg: #1d1233;
  --card-bg:    #1d1233;
  --accent:     #4CAF50;   /* = PROJECT_META.nfl.accent */
  --on-accent:  #0d2b0f;   /* escuro — bom contraste sobre o verde */
}

/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Estado vazio — classe única pro portal inteiro ("Nenhum X ainda") ──
   Antes cada tela tinha sua própria versão (.org-empty, .notif-empty,
   .comment-empty, .draft-empty, .template-dropdown-empty, ou style inline
   solto) com o mesmo visual repetido à mão. Uma classe só; onde o contexto
   precisa de algo diferente (ex.: dentro de um grid), soma-se um seletor
   específico em vez de reinventar a classe. */
.empty-state { font-size: 13px; color: var(--text3); text-align: center; padding: 16px 0; }
.notes-grid .empty-state { grid-column: 1 / -1; padding: 8px 0; }
.cfg-badge-pills .empty-state { padding: 0; text-align: left; font-size: 12px; }

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  min-height: 100vh;
  transition: background 0.4s ease;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════ */

#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
  transition: background 0.4s ease; /* largura é fixa: nada de transição de width */
}

/* Interface escondida até a sessão ser validada (classe posta no <head>) */
:root.pre-auth body > * { visibility: hidden; }

/* ── Sidebar estreita (estado único) ──────────────────────────────────────
   Não existe versão expandida: rótulos, nome do projeto e chevrons ficam
   ocultos, e tudo é centralizado na coluna de ícones. */
#logo-name,
.sec-label { display: none; }

.sidebar-nav { padding: 10px 8px; }

.sidebar-section-btn,
.sidebar-item {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}

.sidebar-items { padding-left: 0; }

/* Com o rótulo oculto, a barrinha lateral do ativo perde sentido —
   o próprio fundo já marca a seção. */
.sidebar-section-btn.active::before { display: none; }

/* ── Logo ─────────────────────────────────────── */

.sidebar-logo {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo-img { height: 30px; max-width: 48px; }
.sidebar-logo-img[data-proj="nfl"] { height: 36px; }

#logo-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  transition: opacity 0.2s, max-width 0.3s;
}

.sidebar-logo-img{height:34px;width:auto;max-width:170px;object-fit:contain;display:block}
.sidebar-logo-img[data-proj="nfl"]{height:42px}
.org-logo{height:40px;width:auto;max-width:54px;object-fit:contain;flex-shrink:0}
.org-logo[data-proj="nfl"]{height:48px}

/* ── Nav ─────────────────────────────────────── */

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
}

.sidebar-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-section { display: flex; flex-direction: column; }

/* ── Section button (parent, has .sidebar-items) */

.sidebar-section-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-section-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sidebar-section-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Text label — hides when collapsed */
.sec-label {
  flex: 1;
  overflow: hidden;
  transition: opacity 0.2s, max-width 0.3s;
  max-width: 160px;
}

/* Active: direct item (no children) */
.sidebar-section-btn.active {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 500;
}

.sidebar-section-btn.active svg { color: var(--accent); }

.sidebar-section-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* Active: parent section (a child is selected).
   A sidebar vive retraída e `.sidebar-items` é display:none, então o ícone da
   seção é a ÚNICA pista visível de onde a pessoa está. Antes isto mudava só a
   cor do texto (que está oculto), e navegar para Calendário/Eventos/Revisão
   não marcava nada. Recebe o mesmo destaque do item direto. */
.sidebar-section-btn.section-active {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 500;
}
.sidebar-section-btn.section-active svg { color: var(--accent); }

/* ── Subitems ─────────────────────────────────── */

.sidebar-items {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-left: 16px;
}

.sidebar-section.expanded .sidebar-items { display: flex; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-item.active { background: var(--accent); color: var(--on-accent); border-radius: 12px; font-weight: 600; }
.sidebar-item svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════ */

#top-bar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  z-index: 99;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 12px;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Page title */
#page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
}

/* Right section */
#top-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Bell ─────────────────────────────────────── */

.notif-wrap { position: relative; }

/* Sino sem a pilula de fundo — so o icone, como o resto da top-bar */
.notif-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.notif-btn:hover { background: var(--surface-2); color: var(--text); }
.notif-btn svg { width: 19px; height: 19px; }

/* Contador de notificacoes: pilula compacta, sem anel grosso em volta.
   O circulo anterior era largo demais para o numero e brigava com o sino. */
.notif-badge {
  position: absolute;
  top: -3px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--page-bg);
  pointer-events: none;
}

/* ── Avatar ───────────────────────────────────── */

.avatar-wrap { position: relative; }

.top-bar-avatar {
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.top-bar-avatar:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ── Ícones (Lucide inline / data-lucide) ────────
   Tamanho controlado por classe, nunca por atributo width/height do SVG. */
.icon { flex-shrink: 0; vertical-align: middle; }
.icon-sm, [data-lucide].icon-sm { width: 14px; height: 14px; }
.icon-md, [data-lucide].icon-md { width: 16px; height: 16px; }
.icon-lg, [data-lucide].icon-lg { width: 20px; height: 20px; }

/* ── Avatar dropdown ──────────────────────────── */

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  border-radius: 14px;
  background: var(--card-bg);
  padding: 6px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
}

.avatar-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.avatar-dropdown button:hover { background: var(--surface-2); color: var(--text); }
.avatar-dropdown button svg { width: 16px; height: 16px; flex-shrink: 0; color: inherit; }

#btn-logout { color: #F87171; }
#btn-logout:hover { color: #FCA5A5; background: rgba(248,113,113,0.08); }

/* ── Avatar (componente único) ────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.avatar-empty { background: var(--surface-2); color: var(--text3); }
.avatar-empty svg { width: 55%; height: 55%; }
.avatar-xs { width: 20px; height: 20px; }
.avatar-xs.avatar-empty svg { width: 60%; height: 60%; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 104px; height: 104px; }

.dropdown-divider { height: 1px; background: var(--border); border: none; margin: 6px 4px; }

/* ── Notification dropdown ────────────────────── */

#notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--card-bg);
  padding: 6px;
  z-index: 200;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
}

.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#notif-mark-all { color: var(--accent); }

#notif-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#notif-list .empty-state { padding: 28px 16px; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.notif-item:hover { background: var(--surface-2); }
/* Derivado de --accent: chumbado, o vermelho da F1 aparecia também na NBA e na NFL. */
.notif-item.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.notif-item-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
}

.notif-item-msg {
  color: var(--text2);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
}

.notif-item-date {
  color: var(--text3);
  font-size: 11px;
  margin-top: 4px;
}

.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ══════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ══════════════════════════════════════════════ */

#main-wrapper {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  background: var(--page-bg);
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}

main {
  padding: 2rem;
  max-width: 1400px;
}

#season-banner {
  display: none;
  position: static;
  align-items: center;
  gap: 10px;
  padding: 10px 1.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-bg));
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
}

/* ── TABS ────────────────────────────────────── */
.tab { display: none; }
.tab.active { display: block; }

/* ══════════════════════════════════════════════
   HOME WIDGETS — grid hierárquico (bento)
   ══════════════════════════════════════════════ */

.home-widgets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
  gap: 12px;
}

@media (max-width: 1100px) { .home-widgets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .home-widgets-grid { grid-template-columns: 1fr; } }

.home-card.span-2     { grid-column: span 2; }
.home-card.row-span-2 { grid-row: span 2; }

@media (max-width: 680px) {
  .home-card.span-2     { grid-column: span 1; }
  .home-card.row-span-2 { grid-row: span 1; }
}

/* ── Card padrão (base pra todo o portal) ───────
   .home-card é alias de .card (mesma regra, + cursor/min-height próprios da Home).
   Vira a referência: sem borda, radius 18px, hover sutil, tudo sem cor hardcoded —
   a única cor "variável" é --accent-proj, lida do PROJECT_META do projeto ativo. */
.card, .home-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(0.23,1,0.32,1), background 220ms cubic-bezier(0.23,1,0.32,1);
}

.card::after, .home-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
}

/* Cards de destaque (herói + ação) puxam o brilho do hover na cor do projeto ativo */
.home-card-hero::after, .home-card-action::after {
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-proj) 22%, transparent), transparent 65%);
}

.home-card { min-height: 130px; cursor: pointer; }
.home-card.home-card-hero, .home-card.row-span-2 { min-height: 280px; }
.home-card.dragging { opacity: .4; }

@media (hover: hover) and (pointer: fine) {
  .card:hover, .home-card:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--card-bg) 92%, white 8%);
  }
  .card:hover::after, .home-card:hover::after { opacity: 1; }
}

.card:active, .home-card:active { transform: translateY(-1px) scale(0.992); }

/* ── Entrada em cascata — só na primeira carga da aba, não a cada re-render ── */
@keyframes home-card-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-card-fade { from { opacity: 0; } to { opacity: 1; } }

.home-widgets-grid.stagger-in .home-card {
  animation: home-card-in 500ms cubic-bezier(0.23,1,0.32,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .home-widgets-grid.stagger-in .home-card {
    animation: home-card-fade 300ms ease both;
    animation-delay: 0ms;
  }
  .home-card, .card { transform: none !important; }
}

/* ── Utilitário de tint (fundo tintado no lugar de borda colorida) ──
   Uso: adiciona-se a classe "tint" ao elemento e define-se --tint-color
   (ex.: style="--tint-color:#22c55e" ou via classe modificadora, como em .review-card).
   Pensado pra substituir bordas com significado (status, rede social, projeto)
   por um banho de cor sutil no fundo, mantendo a informação sem usar borda. */
.tint {
  background: color-mix(in srgb, var(--tint-color, var(--accent)) 6%, var(--card-bg));
}

/* Card de AÇÃO (ex.: Revisões Pendentes com pendências) — leve gradiente na cor do projeto */
.home-card-action {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-proj) 7%, var(--card-bg)), var(--card-bg) 75%);
}

.home-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.home-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.home-card-header-row .home-card-header { margin-bottom: 0; }

.home-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text2);
}

.home-card-icon svg { width: 17px; height: 17px; }

.home-card-icon.accent {
  background: color-mix(in srgb, var(--accent-proj) 16%, transparent);
  color: var(--accent-proj);
}

.home-card-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
}

.home-obj-list{display:flex;flex-direction:column}
.home-obj-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text2)}
.home-obj-item:last-child{border-bottom:none}
.home-obj-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-obj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.home-card-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.home-card-value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin: 4px 0 2px;
}

.home-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
  margin-top: 12px;
  flex-wrap: wrap;
}

.home-card-meta-item { display: flex; align-items: center; gap: 6px; }
.home-card-meta svg  { width: 14px; height: 14px; }

.home-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-urgent { background: var(--warn-bg); color: var(--warn); }

/* CTA de ação do card (ex.: "Ver cobertura →") — sempre na cor do projeto ativo, fixo embaixo */
.home-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-proj);
}

.home-card-cta svg { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(0.23,1,0.32,1); }

@media (hover: hover) and (pointer: fine) {
  .home-card:hover .home-card-cta svg { transform: translateX(3px); }
}

/* List rows — pílulas com fundo próprio (sem border-bottom de tabela) */
.home-list-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.home-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  transition: background 0.15s;
}

.home-list-row:hover { background: rgba(255,255,255,0.08); }
.activity-row .avatar-xs { width: 26px; height: 26px; }

.home-list-title {
  color: var(--text);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-date {
  color: var(--text3);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-list-urgent { color: var(--warn); }

/* Coverage slots */
.home-card-coverage { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.coverage-slot-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12px;
}

.coverage-slot-mini.coverage-empty { background: var(--warn-bg); }
.coverage-slot-name { color: var(--text2); }
.coverage-slot-people { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); font-weight: 600; }
.coverage-slot-mini.coverage-empty .coverage-slot-people { color: var(--warn); }
.coverage-person { display: inline-flex; align-items: center; gap: 5px; }

/* Member avatars — sobrepostos com hover scale */
.home-members-row { display: flex; margin-top: 14px; }

.home-members-row .avatar {
  border: 2px solid var(--card-bg);
  margin-left: -8px;
  transition: transform 0.15s;
}

.home-members-row .avatar:first-child { margin-left: 0; }

@media (hover: hover) and (pointer: fine) {
  .home-members-row .avatar:hover { z-index: 2; transform: scale(1.08); }
}

.home-member-more {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-left: -8px;
  border: 2px solid var(--card-bg);
}

/* ══════════════════════════════════════════════
   PRODUÇÃO — aba completa
   ══════════════════════════════════════════════ */

/* ── Segmented control ────────────────────────── */

.inner-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  border-radius: 12px;
  width: fit-content;
}

.inner-tab-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.inner-tab-btn:hover { color: var(--text); }

.inner-tab-btn.active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Cabeçalho de seção ───────────────────────── */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

/* Cabeçalho que só tem a ação (o título saiu — ele já está na top-bar) */
.section-header-solo { justify-content: flex-end; margin-bottom: 12px; }

/* Sub-abas e ação da seção na mesma linha */
.inner-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Ícone da rede no dropdown de plataforma (substituiu a bolinha de cor) */
.cal-opt-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; }
.cal-opt-icon svg { width: 15px; height: 15px; }
.cal-opt-icon.ch-instagram { color: var(--instagram); }
.cal-opt-icon.ch-twitter   { color: var(--twitter); }
.cal-opt-icon.ch-tiktok    { color: var(--tiktok); }

/* ── Toolbar do calendário (dropdowns à esquerda, navegação à direita) ── */

.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cal-toolbar-left {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#week-label {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.cal-nav-arrows { display: flex; gap: 4px; }

.cal-nav-arrow {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--surface-2);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cal-nav-arrow svg { width: 16px; height: 16px; }
.cal-nav-arrow:hover { background: var(--accent-bg); color: var(--accent); }

.btn-secondary.btn-today { color: var(--accent); background: var(--accent-bg); }

/* ── Botão primário ───────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn-primary:disabled:hover { filter: none; }

/* ── Dropdowns de filtro do calendário ───────── */

.cal-dropdown { position: relative; }

.cal-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  min-width: 160px;
  border-radius: 10px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}

.cal-dropdown-trigger:hover { background: var(--surface2); }

.cal-dropdown-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--text3);
  flex-shrink: 0;
  transition: transform .15s;
}

.cal-dropdown.open .cal-dropdown-trigger svg { transform: rotate(180deg); }

.cal-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--card-bg);
  border: none;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
  transform-origin: top left;
  transform: scale(.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .18s cubic-bezier(.23,1,.32,1), opacity .18s cubic-bezier(.23,1,.32,1), visibility .18s;
}

.cal-dropdown.open .cal-dropdown-menu {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cal-dropdown-menu { transition: opacity .01ms; }
}

/* ── Itens de menu (filter-btn dentro do dropdown) */

.filter-btn,
.status-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.filter-btn:hover,
.status-filter-btn:hover { background: var(--surface-2); color: var(--text); }

.filter-btn.active,
.status-filter-btn.active { background: var(--accent-bg); color: var(--accent); }

.cal-opt-label { flex: 1 1 auto; }

.cal-opt-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--accent);
}
.filter-btn.active .cal-opt-check,
.status-filter-btn.active .cal-opt-check { opacity: 1; }

/* ══════════════════════════════════════════════
   GRADE SEMANAL (CSS Grid 8 colunas)
   col 0 = horas (sticky left), cols 1-7 = dias
   ══════════════════════════════════════════════ */

#week-grid-wrap {
  background: var(--card-bg);
  border: none;
  border-radius: 16px;
  overflow: visible;
  max-height: none;
  padding: 0;
  width: 100%;
  display: block;
}

#week-grid {
  display: block;
  width: 100%;
}

.agenda-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  width: 100%;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

#week-grid > *,
.agenda-grid > * { box-sizing: border-box; }

.agenda-header-cell.time-col,
.agenda-time-cell {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}

/* ── Cabeçalho sticky (linha de dias) ─────────── */

.agenda-header-cell {
  position: sticky;
  top: var(--topbar-height, 60px);
  z-index: 2;
  background: var(--card-bg);
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.agenda-header-cell.time-col {
  top: var(--topbar-height, 60px);
  z-index: 3;
  left: 0;
  border-left: none;
  background: var(--card-bg);
}

.agenda-day-name {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text3);
}

.agenda-day-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.agenda-header-cell.agenda-day-today { background: var(--accent-bg); }
.agenda-day-today .agenda-day-num { color: var(--accent); }

/* ── Coluna de horas (sticky left) ───────────── */

.agenda-time-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
  font-size: 11px;
  color: var(--text3);
  text-align: right;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Células da grade ─────────────────────────── */

.agenda-cell {
  min-height: 56px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agenda-cell.today-col {
  background-color: color-mix(in srgb, var(--accent-proj, var(--accent)) 6%, transparent);
}

.agenda-cell.past-cell { opacity: 0.45; }

/* Fundo em gradiente horizontal sutil — a hora INTEIRA é da pessoa do slot,
   por isso o tom vai na célula, não numa caixinha dentro dela. */
.agenda-cell.cal-slot-bg-normal {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--slot-color, var(--accent)) 22%, transparent) 0%, transparent 68%);
}
.agenda-cell.cal-slot-bg-absent {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--warn) 24%, transparent) 0%, transparent 68%);
}
.agenda-cell.cal-slot-bg-covered {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ok) 24%, transparent) 0%, transparent 68%);
}

/* ── Botão + ao hover na célula ───────────────── */

.agenda-add-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: none;
  background: var(--surface-2);
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .agenda-cell:hover .agenda-add-btn { opacity: 1; }
  .agenda-add-btn:hover { background: var(--accent-bg); color: var(--accent); }
}

/* ── Post cards na grade — sem fundo, sem borda; ícone da rede + texto + hora ── */

/* Card de post no calendário: ícone da rede (sem caixinha atrás) + horário em
   cima, legenda em 2 linhas, miniatura da mídia à direita. */
.agenda-post {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  min-width: 0;
  transition: background .15s;
}

@media (hover: hover) and (pointer: fine) {
  .agenda-post:hover { background: var(--border-strong); }
  .agenda-post:hover .agenda-post-text { color: var(--text); }
}

.agenda-post-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agenda-post-head { display: flex; align-items: center; gap: 6px; }

.agenda-post-net-icon { width: 13px; height: 13px; flex-shrink: 0; display: flex; }
.agenda-post-net-icon svg { width: 100%; height: 100%; }
.agenda-post.ch-instagram .agenda-post-net-icon { color: var(--instagram); }
.agenda-post.ch-twitter   .agenda-post-net-icon { color: var(--twitter); }
.agenda-post.ch-tiktok    .agenda-post-net-icon { color: var(--tiktok); }

.agenda-post-time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.agenda-post-text {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.agenda-post-text.is-empty { color: var(--text3); font-style: italic; }

.agenda-post-thumb {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--field);
}
.agenda-post-thumb img, .agenda-post-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-post-thumb-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff;
}
.agenda-post-thumb-badge svg { width: 13px; height: 13px; }
.agenda-post-thumb-count {
  position: absolute; right: 2px; bottom: 2px;
  padding: 0 4px; border-radius: 5px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 9px; font-weight: 600;
}

/* ── Arrastar post para outro horário ─────────────────────────────────── */
/* touch-action:none impede o navegador de assumir o gesto como rolagem e
   cancelar o pointermove no meio do arrasto. */
.agenda-post.is-movivel { cursor: grab; touch-action: none; }
.agenda-post.is-movivel:active { cursor: grabbing; }
.agenda-post.arrastando { opacity: .35; }

/* Clone que acompanha o cursor */
.agenda-post.arrasto-fantasma {
  position: fixed;
  z-index: 9999;
  pointer-events: none;   /* deixa elementFromPoint ver a célula por baixo */
  opacity: .95;
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.65);
  cursor: grabbing;
}

/* Célula sob o cursor durante o arrasto */
.agenda-cell.drop-alvo {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 8px;
}

/* Confirmação de que o post pousou no lugar novo */
@keyframes post-pousou {
  0%   { transform: scale(.9); background: color-mix(in srgb, var(--accent) 35%, transparent); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); background: var(--surface-2); }
}
.agenda-post.post-movido { animation: post-pousou .45s cubic-bezier(.23,1,.32,1); }

@media (prefers-reduced-motion: reduce) {
  .agenda-post.post-movido { animation: none; }
  .agenda-post.arrastando { transform: none; }
}

/* Publicado: card recuado, sem competir com o que ainda vai ao ar */
.agenda-post.is-sent { opacity: .62; }
.agenda-post.is-sent .agenda-post-text { color: var(--text3); }

/* Pilha do modal "+N posts" — mesmo card, mais largo */
.agenda-post-stack { display: flex; flex-direction: column; gap: 8px; }
.agenda-post-stack .agenda-post { padding: 10px 12px; }
.agenda-post-stack .agenda-post-text { font-size: 13px; }
.agenda-post-stack .agenda-post-thumb { width: 52px; height: 52px; }

.agenda-post-more {
  width: 100%;
  text-align: left;
  padding: 1px 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text3);
  cursor: pointer;
}
.agenda-post-more:hover { color: var(--text2); text-decoration: underline; }

/* ── Eventos na grade — cor só na tipografia, nunca em fundo/borda ────── */

/* Evento + quem cobre ele: um bloco só, sem o gap da célula entre os dois */
.agenda-event-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.agenda-event {
  cursor: pointer;
  min-width: 0;
}

.agenda-event-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s;
}

.agenda-event-sub {
  font-size: 9.5px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .agenda-event:hover .agenda-event-name { opacity: .78; }
}

.agenda-event.evt-race .agenda-event-name,
.agenda-event.evt-post_race .agenda-event-name { color: var(--race); }
.agenda-event.evt-qualifying .agenda-event-name { color: var(--quali); }
.agenda-event.evt-sprint .agenda-event-name,
.agenda-event.evt-sprint_quali .agenda-event-name { color: var(--sprint); }
.agenda-event.evt-meeting .agenda-event-name { color: var(--meeting); }
.agenda-event.evt-practice1 .agenda-event-name,
.agenda-event.evt-practice2 .agenda-event-name,
.agenda-event.evt-practice3 .agenda-event-name,
.agenda-event.evt-other .agenda-event-name { color: var(--practice); }
.agenda-event.evt-nba_game .agenda-event-name,
.agenda-event.evt-nfl_game .agenda-event-name,
.agenda-event.evt-wnba_game .agenda-event-name { color: var(--game); }

/* ── EVENT_COLORS unificado: fundo+cor por tipo, sempre por classe (nunca inline).
   Usado em .evt-type-icon (card de evento do time), .session-badge (hero da
   Home) e .evt-session-dot (timeline do GP) — os 3 lugares que antes recebiam
   background/color via style="" lido de um objeto JS paralelo ao CSS. */
.evt-tint-race, .evt-tint-post_race { background: color-mix(in srgb, var(--race) 15%, transparent); color: var(--race); }
/* Fora da semana da corrida a arte e' informacao, nao urgencia */
.evt-tint-raceweek { background: color-mix(in srgb, var(--text3) 15%, transparent); color: var(--text3); }
.evt-raceweek.is-agora .evt-tint-raceweek { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.evt-session-dot.evt-tint-raceweek { background: var(--text3); }
.evt-raceweek.is-agora .evt-session-dot.evt-tint-raceweek { background: var(--warn); }
/* Bloco da arte que abre a semana do GP — fica acima da timeline de sessões */
.btn-cov-assume:disabled { opacity: .4; cursor: not-allowed; }
.evt-tint-qualifying { background: color-mix(in srgb, var(--quali) 15%, transparent); color: var(--quali); }
.evt-tint-sprint, .evt-tint-sprint_quali { background: color-mix(in srgb, var(--sprint) 15%, transparent); color: var(--sprint); }
.evt-tint-meeting { background: color-mix(in srgb, var(--meeting) 15%, transparent); color: var(--meeting); }
.evt-tint-practice1, .evt-tint-practice2, .evt-tint-practice3, .evt-tint-other { background: color-mix(in srgb, var(--practice) 10%, transparent); color: var(--practice); }
.evt-session-dot.evt-tint-race, .evt-session-dot.evt-tint-post_race { background: var(--race); }
.evt-session-dot.evt-tint-qualifying { background: var(--quali); }
.evt-session-dot.evt-tint-sprint, .evt-session-dot.evt-tint-sprint_quali { background: var(--sprint); }
.evt-session-dot.evt-tint-meeting { background: var(--meeting); }
.evt-session-dot.evt-tint-practice1, .evt-session-dot.evt-tint-practice2, .evt-session-dot.evt-tint-practice3, .evt-session-dot.evt-tint-other { background: var(--practice); }

/* Destaque temporário ao chegar via clique num evento do calendário */
.evt-flash { animation: evtFlash 1.6s ease; border-radius: 12px; }
@keyframes evtFlash {
  0%, 100% { background: transparent; }
  15%, 55% { background: color-mix(in srgb, var(--accent-proj, var(--accent)) 16%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .evt-flash { animation: none; }
}

/* ── Indicadores de escala (cobertura) — linha simples, sem caixa ────── */

.slot-absence-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--warn); }
.absence-notice-label { font-weight: 600; }
.absence-chip { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--warn) 16%, transparent); border-radius: 9999px; padding: 3px 10px; color: var(--warn); }

.cal-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
}

.cal-slot-person { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }

.cal-slot-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-left: 4px; }
.cal-slot-tag-absent  { color: var(--warn); }
.cal-slot-tag-covered { color: var(--ok); }

.cal-slot-avatar-dim .avatar { filter: grayscale(1); opacity: .5; }

.cal-slot-action {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s;
}
/* Sempre alcançável (toque não confia em :hover) — no ponteiro fino, um
   leve realce ao passar o mouse na célula/botão é só um toque a mais. */
@media (hover: hover) and (pointer: fine) {
  .agenda-cell:hover .cal-slot-action { opacity: 1; }
}
.cal-slot-action:focus-visible { opacity: 1; }
.cal-slot-action:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   PRODUÇÃO — sub-aba Eventos
   ══════════════════════════════════════════════ */

/* Grade que usa a largura disponível. Antes era uma coluna de 760px fixos
   numa página de até 1400px — daí o vazio enorme à direita. */
#events-upcoming {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 12px;
  align-items: start;
}

.events-section-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text2);
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }

.events-section-title:first-of-type { margin-top: 0; }

/* ── Avatares de evento ───────────────────────── */

.event-avatar-stack {
  display: flex;
  align-items: center;
}

.event-avatar-stack .avatar-sm {
  width: 28px;
  height: 28px;
  border: 2px solid var(--card-bg);
  margin-left: -8px;
}

.event-avatar-stack .avatar-sm:first-child { margin-left: 0; }

/* Usado pelo widget "Próximo Evento" da Home (não pela aba Eventos, que
   passou a usar o ponto colorido da timeline — evt-session-dot). */
.session-badge {
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
}

.btn-secondary.btn-assigned {
  background: var(--accent-bg);
  color: var(--accent);
}

/* ── Entrada em cascata (só na 1ª carga da aba) ── */
#events-upcoming.stagger-in .evt-team-card,
#events-upcoming.stagger-in .event-gp-card {
  animation: feed-post-in 450ms cubic-bezier(0.23,1,0.32,1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@media (prefers-reduced-motion: reduce) {
  #events-upcoming.stagger-in .evt-team-card,
  #events-upcoming.stagger-in .event-gp-card { animation: feed-post-fade 250ms ease both; animation-delay: 0ms; }
}

/* ── Card de EVENTO DO TIME (reunião/pós-corrida/outro) ──
   Horizontal: ícone do tipo num quadrado + título/quando, avatares +
   ação à direita. Sem timeline, sem slots — natureza diferente do GP/jogo. */
.evt-team-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.23,1,0.32,1), background 220ms cubic-bezier(0.23,1,0.32,1);
}
.evt-team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .evt-team-card:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--card-bg) 92%, white 8%);
  }
  .evt-team-card:hover::after { opacity: 1; }
}

.evt-type-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evt-team-info { flex: 1; min-width: 0; }

.evt-type-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-bottom: 2px;
}

.evt-team-title {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}

.evt-team-desc {
  color: var(--text2);
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.4;
}

.evt-team-when {
  color: var(--text3);
  font-size: 12px;
  margin-top: 6px;
}

.evt-team-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Card de Grande Prêmio / Jogo — base rica compartilhada ── */

/* Mesma anatomia dos cards da Home: elevacao no hover, brilho diagonal e a
   mesma curva de animacao. Antes so trocava o fundo, o que destoava do resto. */
.event-gp-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.23,1,0.32,1), background 220ms cubic-bezier(0.23,1,0.32,1);
}

.event-gp-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-gp-round {
  flex-shrink: 0;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.event-gp-info {
  flex: 1;
  min-width: 0;
}

.event-gp-name {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .01em;
}

.event-gp-circuit {
  color: var(--text3);
  font-size: 12px;
  margin-top: 2px;
}

.badge-sprint {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-sprint.badge-playoffs { background: var(--warn-bg); color: var(--warn); }

/* ── Sessões do GP — timeline com ponto colorido ─── */

.evt-sessions {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.evt-session-block { padding: 8px 0; }
.evt-session-block:not(:last-child) { border-bottom: 1px solid var(--border); }

.evt-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.evt-session-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.evt-session-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}

.evt-session-time {
  color: var(--text3);
  font-size: 12px;
  white-space: nowrap;
}

.evt-session-slots {
  margin: 8px 0 2px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Card de JOGO (NBA/WNBA/NFL) — compacto ──────── */

.evt-game-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.evt-game-teams {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
}

.evt-game-vs { opacity: .5; font-family: var(--font-body); font-weight: 500; font-size: 13px; margin: 0 2px; }

.evt-game-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.evt-game-when {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  white-space: nowrap;
}

/* ── Cobertura (slot) ─────────────────────────────
   3 estados: normal (gente, fundo --field) / vazio (alerta, fundo --warn-bg) /
   mine (eu cubro, tinta --accent-proj + anel interno). */

.event-coverage {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.coverage-title {
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.coverage-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--field);
  transition: background 220ms cubic-bezier(0.23,1,0.32,1), box-shadow 220ms cubic-bezier(0.23,1,0.32,1), filter 400ms ease;
}

.coverage-slot:not(:last-child) { margin-bottom: 6px; }

.coverage-slot.cov-empty { background: var(--warn-bg); }

.coverage-slot.cov-mine {
  background: color-mix(in srgb, var(--accent-proj) 14%, var(--field));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-proj) 55%, transparent);
}

.cov-mine-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent-proj) 20%, transparent);
  color: var(--accent-proj);
  white-space: nowrap;
}

.btn-cov-assume {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent-proj) 16%, transparent);
  color: var(--accent-proj);
  transition: filter 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1);
}

.btn-cov-assume.is-alert { background: var(--warn); color: #2b1900; }
.btn-cov-assume.is-mine  { background: color-mix(in srgb, var(--accent-proj) 26%, transparent); }

.btn-cov-alloc {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--surface2);
  color: var(--text2);
  transition: background 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-cov-assume:hover { filter: brightness(1.15); }
  .btn-cov-alloc:hover { background: var(--border-strong); color: var(--text); }
}

.btn-cov-assume:active, .btn-cov-alloc:active { transform: scale(.95); }

@keyframes slot-pulse { from { filter: brightness(1.4); } to { filter: brightness(1); } }
.coverage-slot.slot-updated { animation: slot-pulse 500ms ease; }
.evt-team-card.slot-updated, .event-gp-card.slot-updated { animation: slot-pulse 500ms ease; }

@media (prefers-reduced-motion: reduce) {
  .coverage-slot, .btn-cov-assume, .btn-cov-alloc { transition: none; }
  .coverage-slot.slot-updated, .evt-team-card.slot-updated, .event-gp-card.slot-updated { animation: none; }
  .btn-cov-assume:active, .btn-cov-alloc:active { transform: none; }
}

/* ── Modal Alocar Membro (admin) ──────────────────── */
.alloc-slot-label {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 14px;
}

.alloc-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}

.alloc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--field);
}

.alloc-row-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alloc-check { color: var(--ok); flex-shrink: 0; display: flex; }

.alloc-toggle-btn {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: var(--surface2);
  color: var(--text2);
  transition: background 150ms ease, color 150ms ease;
}

.alloc-toggle-btn.is-assigned { background: var(--accent-bg); color: var(--accent); }
.alloc-toggle-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   MODAIS — sistema global (modal-piloto — ver openModal() em app.js;
   todos os modais do portal já migraram pra cá, ver seção abaixo)
   ══════════════════════════════════════════════ */

/* ── Composer modal (Novo Post) ───────────────────────────────────────────── */
.post-step-indicator{display:flex;align-items:center;gap:8px}
.step-pill{font-size:12px;font-weight:600;color:var(--text3);padding:5px 12px;border-radius:9999px;background:var(--surface-2)}
.step-pill.active{background:var(--accent-bg);color:var(--accent)}
.step-sep{color:var(--text3)}
.post-view{display:flex;flex-direction:column}
/* Sem a coluna de "preview de post", o editor ocupa a largura toda —
   é o espaço que sobrou virando caixa de texto maior, e não vazio. */
.post-view-body{display:grid;grid-template-columns:1fr;gap:24px}
.post-view-body > div:first-child{display:flex;flex-direction:column}

/* Bloco único de composição: texto, mídia e barra de ações na mesma
   superfície, em vez de campos empilhados com rótulo cada um. */
.post-editor{background:var(--field);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:14px;margin-top:16px}
.post-editor-text{background:none;border:none;outline:none;resize:none;width:100%;min-height:190px;color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6}
.post-editor-text::placeholder{color:var(--text3)}
.post-editor-media{display:flex}
.post-editor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--border)}
.btn-ghost-inline{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;color:var(--text3);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:.15s}
.btn-ghost-inline:hover{color:var(--text)}
.btn-ghost-inline svg{width:15px;height:15px}
.network-checks{display:flex;gap:10px}
.network-check-label{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;transition:.18s;overflow:hidden}
.network-check-label input{position:absolute;opacity:0;pointer-events:none}
.network-check-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:.18s}
.network-check-icon svg{width:18px;height:18px}
.network-check-name{font-size:12px;font-weight:600;color:var(--text2);transition:.18s}
.network-check-label:hover{background:var(--border-strong)}
.post-media-grid{display:flex;flex-wrap:wrap;gap:8px}
.post-media-tile{position:relative;width:84px;height:84px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);cursor:grab}
.post-media-tile img,.post-media-tile video{width:100%;height:100%;object-fit:cover;display:block}
.post-media-tile.dragging{opacity:.4}
.post-media-badge{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}
.post-media-tile .media-del{position:absolute;top:4px;right:4px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;padding:0}
.post-media-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:72px;height:72px;border:0;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text3);font-family:var(--font-body);font-size:11px;line-height:1.3;text-align:center;cursor:pointer;transition:.18s}
.post-media-add.is-empty{width:150px}
.post-media-add b{color:var(--accent);font-weight:600}
.post-media-add svg{width:18px;height:18px}
.post-media-add:hover,.post-media-add.drop-ativo{background:var(--border-strong);color:var(--text)}
.post-media-add.drop-ativo{box-shadow:inset 0 0 0 1.5px var(--accent)}
.post-media-hint{margin-top:6px;font-size:12px;color:var(--text3)}
.post-media-hint.is-error{color:var(--danger)}
/* Aviso de link bloqueado. Sem borda: separa por fundo, como o resto do portal. */
.post-aviso-link{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:11px 13px;border-radius:var(--radius-sm);background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--text2);font-size:12.5px;line-height:1.45}
.post-aviso-link[hidden]{display:none}
.post-aviso-link svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--danger)}
.post-aviso-link strong{display:block;color:var(--text);font-weight:600;margin-bottom:1px}
/* Qual legenda por rede está com link, quando há vários painéis abertos. */
.post-custom-text.tem-link{background:color-mix(in srgb, var(--danger) 9%, transparent)}
.char-count.is-error{color:var(--danger)}

/* "Personalizar": escolha de mídia por rede */
.post-custom-count{margin-left:auto;font-size:12px;color:var(--text3)}
.post-custom-count.is-error{color:var(--danger)}
.custom-media-block{margin-top:10px}
.custom-media-grid{display:flex;flex-wrap:wrap;gap:6px}
.custom-media-tile{position:relative;width:96px;height:96px;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);cursor:pointer;opacity:.35;transition:.18s}
.custom-media-tile.on{opacity:1}
.custom-media-tile img,.custom-media-tile video{width:100%;height:100%;object-fit:cover;display:block}
.custom-media-check{position:absolute;top:3px;right:3px;width:15px;height:15px;display:none;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.custom-media-tile.on .custom-media-check{display:flex}
.custom-media-warn{margin-top:6px;font-size:12px;color:var(--text3)}
.custom-media-warn.is-error{color:var(--danger)}

/* Canal existente mas ainda sem conta Zernio conectada */
.network-check-label.is-unavailable{opacity:.38;cursor:not-allowed}
.network-check-label.is-unavailable:hover{background:var(--surface-2)}
.network-check-label.checked{background:rgba(255,255,255,0.07)}
.network-check-label.checked .network-check-name{color:var(--text)}
.network-check-label .tick{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;display:none;align-items:center;justify-content:center}
.network-check-label.checked .tick{display:flex}
.network-check-label.checked::after{content:'';position:absolute;inset:0;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--brand,var(--accent));pointer-events:none}
.ch-instagram{--brand:#E1306C} .ch-twitter{--brand:#1DA1F2} .ch-tiktok{--brand:#69C9D0}
.network-check-label.checked.ch-instagram .network-check-icon{color:#E1306C}
.network-check-label.checked.ch-twitter .network-check-icon{color:#1DA1F2}
.network-check-label.checked.ch-tiktok .network-check-icon{color:#69C9D0}
.text-field-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.char-count{font-size:11px;color:var(--text3)}
.cal{background:var(--field);border-radius:var(--radius-sm);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month{font-family:var(--font-display);font-size:17px;font-weight:700;text-transform:capitalize}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.cal-nav button:hover{background:var(--surface-2);color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text3);text-align:center;padding:4px 0}
.cal-day{aspect-ratio:1;border:none;background:transparent;color:var(--text);font-family:var(--font-body);font-size:13px;border-radius:8px;cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center}
.cal-day:hover:not(:disabled){background:var(--surface-2)}
.cal-day.other{opacity:.5} .cal-day:disabled{color:var(--text3);opacity:.28;cursor:not-allowed}
.cal-day.today{box-shadow:inset 0 0 0 1px var(--border-strong)}
.cal-day.selected{background:var(--accent);color:var(--on-accent);font-weight:600}
.post-modal-footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.footer-spacer{flex:1}
/* Aviso em linha própria: dentro do rodapé, um texto longo quebrava a linha
   e empurrava os botões para baixo. */
.post-msg-row{margin-top:14px;min-height:0}
.post-msg-row:empty{display:none}

/* Importar de uma nota — cards no padrão da Home (sem borda, hover suave) */
.notes-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-height:54vh;overflow-y:auto;padding:2px}
.notes-pick{display:flex;flex-direction:column;padding:0;border:none;border-radius:var(--radius-sm);background:var(--card-bg);overflow:hidden;text-align:left;cursor:pointer;transition:transform .15s,background .15s}
.notes-pick:hover:not(:disabled){background:var(--surface-2);transform:translateY(-2px)}
.notes-pick:disabled{opacity:.5;cursor:progress}
.notes-pick-cover{position:relative;display:block;height:96px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--field)}
.notes-pick-cover.is-empty{display:flex;align-items:center;justify-content:center;color:var(--text3)}
.notes-pick-cover.is-empty svg{width:26px;height:26px}
.notes-pick-badge{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;font-weight:600}
.notes-pick-body{display:flex;flex-direction:column;gap:4px;padding:12px}
.notes-pick-title{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-pick-preview{font-size:12px;line-height:1.4;color:var(--text3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notes-pick-count{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text3)}
.notes-pick-count svg{width:13px;height:13px}
.notes-pick-opt{margin-top:16px}

/* ── Quando publicar (rodapé do Novo Post) ────────────────────────────────
   O botão mostra o estado atual; o menu escolhe entre publicar agora e
   agendar; o painel de calendário abre ancorado aqui mesmo, dentro do
   modal, sem empilhar outra janela por cima. */
.sched-wrap{position:relative}
.sched-trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:none;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:.15s}
.sched-trigger:hover,.sched-trigger.open{background:var(--border-strong)}
.sched-trigger svg{width:15px;height:15px;color:var(--text3)}
.sched-trigger svg:last-child{width:12px;height:12px;transition:transform .18s}
.sched-trigger.open svg:last-child{transform:rotate(180deg)}

.sched-menu{position:absolute;bottom:calc(100% + 8px);right:0;z-index:30;min-width:220px;background:var(--card-bg);border-radius:var(--radius-sm);padding:6px;box-shadow:0 16px 40px -12px rgba(0,0,0,.65)}
.sched-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;border-radius:9px;background:none;color:var(--text);font-family:var(--font-body);font-size:13px;text-align:left;cursor:pointer;transition:.12s}
.sched-menu-item:hover{background:var(--surface-2)}
.sched-menu-item svg{width:15px;height:15px;color:var(--text3)}

/* O .modal-card rola (max-height:88vh; overflow-y:auto), então o painel é
   limitado e rola por dentro — senão seria cortado em telas baixas. */
.sched-panel{position:absolute;bottom:calc(100% + 8px);right:0;z-index:30;width:320px;max-height:min(68vh,520px);overflow-y:auto;background:var(--card-bg);border-radius:var(--radius);padding:16px;box-shadow:0 20px 50px -14px rgba(0,0,0,.7)}
.sched-panel .cal{background:transparent;padding:0}
.sched-time{margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--border)}
.sched-time-field{display:flex;align-items:center;gap:9px;background:var(--field);border-radius:var(--radius-sm);padding:10px 12px;margin-top:6px}
.sched-time-field svg{width:15px;height:15px;color:var(--accent);flex:none}
.sched-time-input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.02em;padding:0}
.sched-tz{font-size:11px;color:var(--text3);white-space:nowrap}
.sched-time-list{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:132px;overflow-y:auto;margin-top:10px;padding-right:2px}
/* Grade de horas cheias (Novo Slot): mais colunas, cabe as 24 sem rolar tanto */
.sched-time-list-horas{grid-template-columns:repeat(6,1fr);max-height:160px}
.sched-time-opt{padding:6px 0;border:none;border-radius:8px;background:var(--surface-2);color:var(--text2);font-family:var(--font-body);font-size:12px;cursor:pointer;transition:.12s}
.sched-time-opt:hover{background:var(--border-strong);color:var(--text)}
.sched-time-opt.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.sched-time-vazio{grid-column:1/-1;font-size:12px;color:var(--text3);padding:8px 0}
.sched-time-err{margin-top:8px;font-size:12px;color:var(--danger);min-height:16px}
.sched-panel-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@media(max-width:560px){.sched-panel{width:min(300px,86vw)}}
/* view personalizar */
#post-custom-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
/* Coluna flex + margin-top:auto no Templates: os painéis ficam com a mesma
   altura (são itens de grade), então sem isto o botão parava logo abaixo do
   bloco de mídia e caía numa altura diferente em cada rede, conforme a
   quantidade de anexos daquele canal. */
.post-custom-panel{border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column}
.post-custom-panel-header{margin-bottom:10px}
.preview-network-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--text)}
.preview-network-badge svg{width:18px;height:18px}
.post-custom-panel .ta{width:100%;min-height:140px}
/* margin-top:auto alinha os botões no rodapé; o padding-top garante o
   respiro mínimo quando o painel não tem mídia e o botão ficaria colado
   na caixa de texto. */
.post-custom-panel .btn-template{width:100%;display:flex;padding-top:10px;padding-bottom:10px}
/* Templates e "Adicionar mídia" são botões gêmeos no rodapé do painel; a
   dupla é que fica colada embaixo, então o margin-top:auto mora aqui. */
.post-custom-acoes{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.post-custom-panel .btn-midia-canal{width:100%;display:flex;padding-top:10px;padding-bottom:10px}
@media(max-width:900px){.post-custom-acoes{grid-template-columns:1fr}}
.post-custom-panel .ta{margin-bottom:12px}
.post-custom-panel .custom-media-block{margin-bottom:12px}
@media(max-width:760px){.post-view-body{grid-template-columns:1fr}}

/* ── Dropdown de templates (compor post) ──────────────────────────────────── */
.template-dropdown{position:absolute;background:var(--card-bg);border-radius:12px;padding:6px;min-width:260px;max-width:320px;max-height:280px;overflow-y:auto;box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.template-item{padding:8px 10px;border-radius:8px;cursor:pointer}
.template-item:hover{background:var(--surface-2)}
.template-name{font-size:13px;font-weight:600;color:var(--text)}
.template-preview{font-size:12px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-dropdown .empty-state{padding:.6rem 1rem}
/* ── Seletor de ícone (substitui campo de emoji livre) ────────────────────── */
.icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 168px; overflow-y: auto; padding: 4px; background: var(--page-bg); border-radius: 10px; }
.icon-picker-opt { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--surface-2); color: var(--text2); cursor: pointer; transition: background .15s, color .15s; }
.icon-picker-opt:hover { background: var(--border-strong); color: var(--text); }
.icon-picker-opt.selected { background: var(--accent-bg); color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL — modal-piloto (todos os modais do portal usam este sistema)
   Estrutura: .modal-overlay > .modal-card > .modal-head + .modal-body + .modal-foot
   Campos:    .mfield > .flabel + (.inp | .ta | .sel | .seg | .dropzone)
   ══════════════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity 200ms cubic-bezier(0.23,1,0.32,1);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);
  width:min(560px,92%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border-radius:20px;padding:24px;
  box-shadow:0 24px 60px -15px rgba(0,0,0,.7);
  transition:transform 200ms cubic-bezier(0.23,1,0.32,1);
}
.modal-card-lg{width:min(920px,94%)}
.modal-overlay.open .modal-card{transform:translate(-50%,-50%) scale(1)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.modal-head h3{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text);letter-spacing:.01em;margin:0}
.modal-x{width:32px;height:32px;border-radius:9px;border:none;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 150ms ease,color 150ms ease}
.modal-x:hover{background:var(--border-strong);color:var(--text)}
.modal-body{display:flex;flex-direction:column}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-foot:empty{display:none;margin-top:0}

/* Mesma fonte, peso e caixa de .btn-primary / .btn-secondary: era a Barlow
   Condensed em CAIXA ALTA e destoava de todo o resto do portal. */
.modal-btn{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;padding:10px 20px;border-radius:10px;border:none;cursor:pointer;transition:transform 150ms cubic-bezier(0.23,1,0.32,1),filter 150ms ease,opacity 150ms ease}
.modal-btn:active{transform:scale(.97)}
.modal-btn-ghost{background:transparent;color:var(--text2)}
.modal-btn-ghost:hover{background:var(--surface2);color:var(--text)}
.modal-btn-accent{background:var(--accent);color:var(--on-accent)}
.modal-btn-accent:hover{filter:brightness(1.1)}
.modal-btn-accent:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none}
.modal-btn-danger{background:transparent;color:#f87171}
.modal-btn-danger:hover{background:rgba(248,113,113,.14)}
.post-detail-ch{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text2)}
.post-detail-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);background:var(--surface-2);padding:2px 9px;border-radius:9999px}
/* Modal de post: mesma anatomia do card social do Feed —
   identidade no topo, conteúdo, mídia, e link como rodapé. */
.post-detail-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.post-detail-net{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface-2)}
.post-detail-net svg{width:18px;height:18px}
.post-detail-net.ch-instagram{color:var(--instagram)}
.post-detail-net.ch-twitter{color:var(--twitter)}
.post-detail-net.ch-tiktok{color:var(--tiktok)}
.post-detail-ident{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.post-detail-ch{font-size:14px;font-weight:600;color:var(--text)}
.post-detail-when{font-size:12px;color:var(--text3)}
.post-detail-media{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.post-detail-media-tile{position:relative;width:96px;height:96px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.post-detail-media-tile img,.post-detail-media-tile video{width:100%;height:100%;object-fit:cover;display:block}
.post-detail-media-note{font-size:12px;color:var(--text3);margin-bottom:8px}
.post-detail-text.is-empty{color:var(--text3);font-style:italic}
.post-detail-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--accent);text-decoration:none}
.post-detail-link:hover{text-decoration:underline}
.post-detail-status.status-sent{color:var(--ok);background:var(--ok-bg)}
.post-detail-status.status-scheduled{color:var(--accent)}
.post-detail-status.status-failed{color:var(--danger)}
.post-detail-status.status-publishing{color:var(--warn)}
.post-detail-text{font-size:14.5px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-wrap:break-word;margin-top:14px}

.mfield{margin-bottom:14px}
.flabel{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:6px}
.inp,.ta,.sel{width:100%;background:var(--field);border:none;border-radius:11px;color:var(--text);font-family:var(--font-body);font-size:14px;padding:13px 14px;outline:none;box-shadow:0 0 0 2px transparent;transition:box-shadow 150ms ease}
.inp:focus,.ta:focus,.sel:focus{box-shadow:0 0 0 2px var(--accent)}
.ta{resize:vertical;min-height:90px;line-height:1.5;font-family:var(--font-body)}
.sel{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

.seg{display:flex;gap:3px;background:var(--field);padding:3px;border-radius:11px}
.seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;border-radius:8px;color:var(--text2);font-family:var(--font-body);font-size:13px;font-weight:600;padding:9px 10px;cursor:pointer;transition:background 180ms cubic-bezier(0.23,1,0.32,1),color 180ms cubic-bezier(0.23,1,0.32,1)}
.seg-btn svg{width:14px;height:14px}
.seg-btn.active{background:var(--surface2);color:var(--text)}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--border-strong);border-radius:14px;padding:28px 16px;color:var(--text3);cursor:pointer;text-align:center;transition:border-color 180ms cubic-bezier(0.23,1,0.32,1),color 180ms cubic-bezier(0.23,1,0.32,1),background 180ms cubic-bezier(0.23,1,0.32,1)}
.dropzone:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent)}
.dropzone svg{width:26px;height:26px}
.dropzone-text{font-size:13px;font-weight:500}
.dropzone.has-image{display:block;border:none;padding:0;cursor:default;background:none}
.dropzone-preview{position:relative;border-radius:14px;overflow:hidden;line-height:0}
.dropzone-preview img{display:block;width:100%;max-height:var(--img-max-sm);object-fit:contain;object-position:center;background:var(--field)}
.dropzone-preview .media-del{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dropzone-preview .media-del:hover{background:rgba(0,0,0,.8)}

.toggle-row{display:flex;align-items:center;gap:12px;background:var(--field);border-radius:11px;padding:13px 14px}
.toggle-row-icon{color:var(--text3);flex-shrink:0;display:flex}
.toggle-row-text{flex:1;min-width:0}
.toggle-row-title{font-size:14px;font-weight:600;color:var(--text)}
.toggle-row-sub{font-size:12px;color:var(--text3);margin-top:1px}
.ios-toggle{position:relative;width:44px;height:25px;border-radius:20px;background:#3a3a3a;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:background 200ms cubic-bezier(0.23,1,0.32,1)}
.ios-toggle-knob{position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#8a8a8a;transition:transform 200ms cubic-bezier(0.23,1,0.32,1),background 200ms cubic-bezier(0.23,1,0.32,1)}
.ios-toggle[aria-checked="true"]{background:var(--accent)}
.ios-toggle[aria-checked="true"] .ios-toggle-knob{transform:translateX(19px);background:#1a1a1a}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,.modal-card{transition:opacity 150ms ease}
  .modal-card{transform:translate(-50%,-50%) scale(1) !important}
  .modal-btn:active{transform:none}
  .ios-toggle,.ios-toggle-knob{transition:background 120ms ease}
}

/* ── Sistema de botões: primary (já existe acima) / secondary / ghost / danger ──
   Sem borda (princípio 1) — secondary usa fundo sutil sempre visível pra se
   diferenciar de ghost, que só ganha fundo no hover. .btn-sm é o modificador
   de tamanho; estados (voto/força já dado, etc.) usam .is-active-approve /
   .is-active-reject por cima de secondary/ghost. */
.btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-secondary { background: var(--surface-2); color: var(--text2); }
.btn-secondary:hover { background: var(--border-strong); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: transparent; color: #f87171; }
.btn-danger:hover { background: rgba(248,113,113,.14); }

.is-active-approve { background: rgba(34,197,94,.15) !important; color: #22c55e !important; }
.is-active-approve:hover { background: rgba(34,197,94,.22) !important; }
.is-active-reject { background: rgba(239,68,68,.15) !important; color: #ef4444 !important; }
.is-active-reject:hover { background: rgba(239,68,68,.22) !important; }

/* ── Mensagens de feedback ────────────────────── */

.msg {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}

.msg.error   { color: #ff6b6b; }
.msg.success { color: #51cf66; }

/* ══════════════════════════════════════════════
   MEMBROS
   ══════════════════════════════════════════════ */

.members-grid-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.member-card{background:var(--card-bg);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;position:relative;transition:.2s;cursor:pointer}
.member-card:hover{background:color-mix(in srgb,var(--card-bg) 92%,white)}
.member-card:active{transform:scale(.99)}
.member-card-me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.member-card .avatar-lg{margin-bottom:8px}
.member-info{width:100%}
.member-name{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:center;gap:6px}
.member-you-tag{font-size:11px;font-weight:500;color:var(--text3)}
/* .badge-me: ainda usado em Perfil do Membro / Meu Perfil (fora deste redesign) */
.badge-me{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:9999px;background:var(--accent-bg);color:var(--accent)}
.member-username{font-size:13px;color:var(--text3);margin-top:2px}
.member-admin-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-top:8px}
/* .member-role: ainda usado em Perfil do Membro / Meu Perfil / Config > Membros (fora deste redesign) */
.member-role{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:9999px;margin-top:10px;display:inline-block}
.member-role.role-admin{background:var(--accent-bg);color:var(--accent)}
.member-role.role-member{background:var(--surface-2);color:var(--text2)}
.member-card-actions{display:flex;gap:8px;margin-top:14px;width:100%;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════
   ORGANOGRAMA
   ══════════════════════════════════════════════ */

.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.org-card{border-radius:16px;padding:18px}
.org-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.org-card-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.org-name{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
.org-count{font-size:12px;color:var(--text3)}
/* "Admin" como rótulo tipográfico ao lado do nome, não pill (princípio 5) */
.org-member-admin{margin-left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3)}
.org-members{display:flex;flex-direction:column;gap:6px}
.org-member{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:var(--surface-2)}
.org-member-info{flex:1;min-width:0}
.org-member-name{display:block;font-size:14px;font-weight:500;color:var(--text)}
.org-member-username{display:block;font-size:12px;color:var(--text3)}

/* ══════════════════════════════════════════════
   REVISÃO
   ══════════════════════════════════════════════ */

/* "Enquete de decisão": foto+info no topo, objeto da decisão numa caixa
   destacada (--field), placar proporcional em --ok/--no (universais, nunca
   a cor do projeto), voto de 1 clique, comentários = componente do Feed. */
#review-list{display:flex;flex-direction:column;gap:16px;max-width:760px}
#review-list.stagger-in .review-card{animation:feed-post-in 450ms cubic-bezier(0.23,1,0.32,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.review-card{background:var(--card-bg);border-radius:16px;padding:18px 20px}
.review-top{display:flex;gap:12px}
.review-main{flex:1;min-width:0}
.review-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review-submitter{font-size:15px;font-weight:700;color:var(--text)}
.review-submitter b{font-weight:700;color:var(--text)}
.review-channel-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);background:var(--surface-2);padding:2px 9px;border-radius:9999px}
.review-scheduled{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);margin-left:auto;white-space:nowrap}
.review-scheduled svg{width:13px;height:13px}

.review-target{background:var(--field);border-radius:12px;padding:16px;margin-top:12px}
.review-target-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.review-target-content{font-size:14.5px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.review-target-media{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.review-target-media img{display:block;width:100%;max-height:var(--img-max);object-fit:contain;object-position:center;background:var(--field);border-radius:10px;cursor:zoom-in}

.review-scoreboard{margin-top:16px}
.review-score-counts{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;margin-bottom:7px}
.review-score-approve-count{color:var(--ok)}
.review-score-reject-count{color:var(--no)}
.review-score-bar{display:flex;height:9px;border-radius:9999px;overflow:hidden;background:var(--surface-2)}
.review-score-bar-approve,.review-score-bar-reject{height:100%;transition:width 500ms cubic-bezier(0.16,1,0.3,1)}
.review-score-bar-approve{background:var(--ok)}
.review-score-bar-reject{background:var(--no)}
.review-quorum{font-size:11.5px;color:var(--text3);margin-top:7px}

.review-vote-actions{display:flex;gap:10px;margin-top:16px}
.review-vote-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);border:none;border-radius:12px;color:var(--text2);font-family:var(--font-body);font-size:14px;font-weight:700;padding:13px;cursor:pointer;transition:background 180ms cubic-bezier(0.23,1,0.32,1),color 180ms cubic-bezier(0.23,1,0.32,1),transform 150ms cubic-bezier(0.23,1,0.32,1)}
.review-vote-btn svg{width:18px;height:18px}
.review-vote-btn:active{transform:scale(.97)}
.review-vote-btn.vote-approve.on{background:var(--ok-bg);color:var(--ok)}
.review-vote-btn.vote-reject.on{background:var(--no-bg);color:var(--no)}

.review-author-note{font-size:12.5px;color:var(--text3);background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-top:16px}

.review-resolved-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border-radius:10px;padding:12px 14px;margin-top:16px}
.review-resolved-badge svg{width:16px;height:16px}
.review-resolved-badge.resolved-approved{background:var(--ok-bg);color:var(--ok)}
.review-resolved-badge.resolved-rejected{background:var(--no-bg);color:var(--no)}

.review-admin-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.review-admin-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);background:var(--surface-2);padding:3px 9px;border-radius:9999px}
.review-force-btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:9999px;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;transition:filter 150ms ease}
.review-force-btn:active{transform:scale(.97)}
.review-force-btn.force-approve{background:var(--ok-bg);color:var(--ok)}
.review-force-btn.force-reject{background:var(--no-bg);color:var(--no)}
.review-force-btn.force-reopen{background:var(--surface-2);color:var(--text2)}
.review-force-btn:hover{filter:brightness(1.15)}

@media (hover: hover) and (pointer: fine) {
  .review-vote-btn:not(.on):hover{background:var(--border-strong);color:var(--text)}
}
@media (prefers-reduced-motion: reduce) {
  .review-score-bar-approve,.review-score-bar-reject{transition:width 200ms ease}
  .review-vote-btn:active,.review-force-btn:active{transform:none}
}
/* ══════════════════════════════════════════════
   PERFIL DE MEMBRO — estilo rede social
   ══════════════════════════════════════════════ */

#member-profile-content,#perfil-content{max-width:760px;margin:0 auto}
.profile-head{background:var(--card-bg);border-radius:var(--radius);overflow:hidden}
.profile-cover{height:160px;position:relative;background:radial-gradient(120% 120% at 80% -20%,color-mix(in srgb,var(--avatar,var(--accent)) 55%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--avatar,var(--accent)) 65%,#000) 0%,color-mix(in srgb,var(--avatar,var(--accent)) 30%,var(--page-bg)) 100%)}
.profile-cover::after{content:'';position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.profile-body{padding:0 28px 24px;position:relative;z-index:1}
.profile-top{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-44px}
.profile-top .avatar-xl{box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.profile-actions{display:flex;gap:8px;padding-bottom:6px}
.profile-identity{margin-top:14px}
.profile-name{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:10px;line-height:1.05}
.profile-username{font-size:14px;color:var(--text3);margin-top:2px}
.profile-role-row{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-bio{font-size:14.5px;color:var(--text2);line-height:1.55;margin-top:14px;max-width:60ch}
.profile-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;color:var(--text3);font-size:13px}
.profile-meta-item{display:flex;align-items:center;gap:6px}
.profile-projects{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.profile-section{background:var(--card-bg);border-radius:var(--radius);padding:22px 24px;margin-top:16px}
.profile-section-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text2);margin-bottom:14px}
/* Atividade recente: o que a pessoa fez em cima, o conteudo citado embaixo.
   Antes era icone + trecho + data numa linha so, sem dizer qual foi a acao. */
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:var(--radius-sm);transition:background .15s}
.activity-item:hover{background:var(--surface-2)}
.act-icon{width:32px;height:32px;border-radius:9px;background:var(--surface-2);color:var(--text3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-icon svg{width:15px;height:15px}
.act-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.act-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.act-tipo{font-size:13px;font-weight:600;color:var(--text)}
.act-text{font-size:13px;line-height:1.45;color:var(--text3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act-date{font-size:11px;color:var(--text3);white-space:nowrap;flex:none}
.mp-admin-badge-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;color:var(--text)}
.field-hint{color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}
.avatar-color-row{display:flex;align-items:center;gap:10px}
.avatar-color-preview{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--surface-2)}
.color-picker-input{width:44px;height:34px;border:none;border-radius:8px;background:var(--page-bg);cursor:pointer;padding:2px}
.btn-sm{padding:7px 14px;font-size:13px}
.perfil-password-footer{display:flex;align-items:center;gap:12px;margin-top:14px}
.perfil-password-footer .msg{flex:1;text-align:left;margin:0}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.badge-card{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.badge-icon{font-size:28px;line-height:1}
.badge-name{font-size:13px;font-weight:600;color:var(--text)}
.badge-date{font-size:11px;color:var(--text3)}
.perfil-password-form .mfield{max-width:380px}

/* ── Novidades: largura de leitura centrada ── */
#novidades-comunicados,#novidades-feed-tab{max-width:640px;margin:0 auto}

/* ── Feed — referência dos cards sociais do portal ──
   Toda cor de destaque usa --accent-proj (setado em loadFeed a partir do
   PROJECT_META do projeto ativo), nunca o --accent genérico da marca. */
.feed-compose{background:var(--card-bg);border-radius:16px;padding:16px;margin-bottom:16px;display:flex;gap:12px}
.feed-compose>#feed-compose-av{flex-shrink:0}
.compose-main{flex:1;min-width:0;position:relative}
.compose-input-wrap{position:relative}
.feed-compose-highlight,#feed-post-input{
  width:100%;min-height:24px;font-family:var(--font-body);font-size:16px;line-height:1.5;
  padding:8px 0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;
}
.feed-compose-highlight{position:absolute;inset:0;color:var(--text);pointer-events:none;overflow:hidden}
.feed-compose-highlight .mention-live{color:var(--accent-proj);font-weight:600}
#feed-post-input{position:relative;resize:none;background:transparent;border:none;outline:none;color:transparent;caret-color:var(--text);overflow:hidden}
#feed-post-input::placeholder{color:var(--text3)}
.feed-compose-footer{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}
.feed-char-count{font-size:12px;color:var(--text3);margin-left:auto}
.feed-scope-toggle{display:flex;gap:4px;background:var(--surface-2);padding:3px;border-radius:9999px}
.feed-scope-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--text2);font-family:var(--font-body);font-size:12px;font-weight:600;padding:5px 12px;border-radius:9999px;cursor:pointer;transition:background 220ms cubic-bezier(0.23,1,0.32,1),color 220ms cubic-bezier(0.23,1,0.32,1)}
.feed-scope-btn.active{background:color-mix(in srgb, var(--accent-proj) 16%, transparent);color:var(--accent-proj)}
.btn-feed-post{
  background:var(--accent-proj);color:#140c0c;border:none;border-radius:9999px;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  padding:8px 20px;cursor:pointer;transition:transform 180ms cubic-bezier(0.23,1,0.32,1),opacity 180ms cubic-bezier(0.23,1,0.32,1);
}
.btn-feed-post:disabled{opacity:.32;background:var(--surface-2);color:var(--text3);cursor:not-allowed}
.btn-feed-post:not(:disabled):active{transform:scale(.96)}

#feed-posts-list{display:flex;flex-direction:column;gap:14px}
#feed-posts-list.stagger-in .feed-post{animation:feed-post-in 450ms cubic-bezier(0.23,1,0.32,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes feed-post-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes feed-post-fade{from{opacity:0}to{opacity:1}}
.feed-post{background:var(--card-bg);border-radius:16px;padding:16px;position:relative}
.feed-post-top{display:flex;gap:12px}
.feed-post-main{flex:1;min-width:0}
.feed-post-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-right:22px}
.feed-author-name{font-size:15px;font-weight:700;color:var(--text)}
.feed-author-badges{display:inline-flex;align-items:center;gap:3px}
.feed-author-badge-logo{width:15px;height:15px;object-fit:contain;border-radius:4px;vertical-align:middle}
.feed-dot,.feed-date,.feed-scope-label{font-size:14px;color:var(--text3)}
.feed-post-corner-logo{position:absolute;top:14px;right:14px;width:26px;height:26px;object-fit:contain;border-radius:7px}
.feed-del{margin-left:auto;background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 180ms cubic-bezier(0.23,1,0.32,1),color 180ms cubic-bezier(0.23,1,0.32,1)}
.feed-del:hover{background:var(--surface-2);color:#f87171}
.feed-post-content{font-size:15px;color:var(--text);line-height:1.55;margin-top:2px;white-space:pre-wrap;word-wrap:break-word}
.feed-mention{color:var(--accent-proj);font-weight:600;cursor:pointer}
.feed-mention:hover{text-decoration:underline}
/* Link colado dentro de texto (feed, comunicado, descrição de evento).
   `overflow-wrap` porque URL longa não tem espaço para quebrar e estouraria o card. */
.link-externo{color:var(--accent-proj);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.link-externo:hover{text-decoration:underline}
.feed-post-actions{display:flex;gap:24px;margin-top:12px}
.feed-act{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--text3);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:8px;transition:color 180ms cubic-bezier(0.23,1,0.32,1)}
.feed-act svg{width:18px;height:18px;transition:transform 280ms cubic-bezier(0.23,1,0.32,1)}
.feed-act.act-like.liked{color:var(--accent-proj)}
.feed-act.act-like.liked svg{fill:var(--accent-proj)}
.feed-act.act-like svg.heart-pop{animation:heart-pop 280ms cubic-bezier(0.23,1,0.32,1)}
@keyframes heart-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
/* ── Comentários (componente único, Feed + Comunicados) ──
   Um só conjunto de classes pros dois lugares — o container de cada card
   (.comment-thread) faz a transição de altura; dentro dele, sempre a mesma
   estrutura de lista/bolha/input, seja post do Feed ou comunicado. */
.comment-thread{margin-top:0;padding-top:0;border-top:0 solid var(--border);max-height:0;opacity:0;overflow:hidden;transition:max-height 280ms cubic-bezier(0.23,1,0.32,1),opacity 280ms cubic-bezier(0.23,1,0.32,1),margin-top 280ms cubic-bezier(0.23,1,0.32,1),padding-top 280ms cubic-bezier(0.23,1,0.32,1),border-top-width 280ms cubic-bezier(0.23,1,0.32,1)}
.comment-thread.open{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.comment-list{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.comment-item{display:flex;gap:10px;align-items:flex-start}
.comment-body{flex:1;min-width:0}
.comment-bubble{background:var(--surface-2);border-radius:4px 14px 14px 14px;padding:8px 12px;display:inline-block;max-width:100%}
.comment-author{font-size:13px;font-weight:600;color:var(--text);display:block}
.comment-text{font-size:13.5px;color:var(--text);line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.comment-foot{display:flex;align-items:center;gap:14px;margin-top:4px;padding-left:6px}
.comment-date{font-size:11px;color:var(--text3)}
.comment-loading{font-size:12px;color:var(--text3);padding:.3rem 0}
.comment-thread .empty-state{font-size:12px;padding:.3rem 0}
.comment-like,.comment-del{display:inline-flex;align-items:center;gap:3px;background:none;border:none;color:var(--text3);font-size:11px;font-weight:600;cursor:pointer;padding:0}
.comment-like svg{width:12px;height:12px;transition:transform 280ms cubic-bezier(0.23,1,0.32,1)}
.comment-like.liked{color:var(--accent-proj)}
.comment-like.liked svg{fill:var(--accent-proj)}
.comment-like svg.heart-pop{animation:heart-pop 280ms cubic-bezier(0.23,1,0.32,1)}
.comment-del:hover{color:#f87171}
.comment-input-row{display:flex;align-items:center;gap:8px;padding-bottom:4px}
.comment-input-row input{flex:1;background:var(--field);border:none;border-radius:9999px;color:var(--text);font-family:var(--font-body);font-size:13px;padding:9px 14px;outline:none;box-shadow:0 0 0 2px transparent;transition:box-shadow 180ms cubic-bezier(0.23,1,0.32,1)}
.comment-input-row input:focus{box-shadow:0 0 0 2px var(--accent-proj)}
.comment-send{background:var(--accent-proj);color:#140c0c;border:none;border-radius:9999px;font-size:12px;font-weight:600;padding:8px 16px;cursor:pointer;flex-shrink:0;transition:opacity 180ms cubic-bezier(0.23,1,0.32,1)}
.comment-send:disabled{opacity:.32;background:var(--surface-2);color:var(--text3);cursor:not-allowed}
.comment-send:not(:disabled):active{transform:scale(.96)}

@media (hover: hover) and (pointer: fine) {
  .feed-act.act-like:hover,.comment-like:hover{color:var(--accent-proj)}
  .feed-act.act-comment:hover{color:var(--twitter)}
  .feed-scope-btn:hover:not(.active){color:var(--text)}
}

@media (prefers-reduced-motion: reduce) {
  #feed-posts-list.stagger-in .feed-post{animation:feed-post-fade 250ms ease both;animation-delay:0ms}
  #novidades-list.stagger-in .novidade-card{animation:feed-post-fade 250ms ease both;animation-delay:0ms}
  #review-list.stagger-in .review-card{animation:feed-post-fade 250ms ease both;animation-delay:0ms}
  .feed-act svg,.comment-like svg,.btn-feed-post,.comment-send{transition:opacity 150ms ease}
  .feed-act svg.heart-pop,.comment-like svg.heart-pop{animation:feed-post-fade 200ms ease}
  .btn-feed-post:not(:disabled):active,.comment-send:not(:disabled):active{transform:none}
  .comment-thread{transition:opacity 200ms ease}
}

.mention-menu{position:absolute;left:0;top:46px;z-index:20;background:var(--card-bg);border-radius:12px;padding:6px;min-width:240px;box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.mention-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.mention-item:hover,.mention-item.active{background:var(--surface-2)}
.mention-item-name{font-size:13px;font-weight:600;color:var(--text)}
.mention-item-user{font-size:12px;color:var(--text3)}
.mention-scope-note{font-size:10.5px;color:var(--text3);padding:4px 10px 6px;border-top:1px solid var(--border);margin-top:4px}

/* ── Comunicados — mesma hierarquia de card social do Feed, mensagem lidera,
   autor vai pro rodapé. Cor viva = --accent-proj (setada em loadNovidades). ── */
.novidades-list{display:flex;flex-direction:column;gap:14px}
#novidades-list.stagger-in .novidade-card{animation:feed-post-in 450ms cubic-bezier(0.23,1,0.32,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.novidade-card{background:var(--card-bg);border-radius:16px;position:relative}
.novidade-card.novidade-pinned{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-proj) 12%, var(--card-bg)) 0%, var(--card-bg) 170px)}
.novidade-pinned-bar{display:flex;align-items:center;gap:6px;padding:14px 20px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-proj)}
.novidade-pinned-bar svg{width:13px;height:13px}
.novidade-body{padding:16px 20px}
.novidade-header{display:flex;align-items:center;gap:10px;padding-right:32px;margin-bottom:10px}
.novidade-type-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:9999px}
.novidade-type-badge.type-update{color:var(--twitter);background:color-mix(in srgb, var(--twitter) 14%, transparent)}
.novidade-type-badge.type-alert{color:var(--danger);background:var(--danger-bg)}
.novidade-type-badge.type-destaque{color:var(--warn);background:var(--warn-bg)}
.novidade-actions{display:flex;gap:4px;margin-left:auto}
.novidade-action-btn{background:transparent;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.15s}
.novidade-action-btn:hover{background:var(--surface-2);color:var(--text)}
.novidade-delete-btn:hover{color:#f87171}
.novidade-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text);letter-spacing:.01em;margin-bottom:6px}
.novidade-content{font-size:14.5px;color:var(--text2);line-height:1.6}
.novidade-media{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.novidade-media img{display:block;width:100%;max-height:var(--img-max);object-fit:contain;object-position:center;background:var(--field);border-radius:12px;cursor:zoom-in}
.novidade-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.novidade-footer-author{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.novidade-comment-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text3);font-family:var(--font-body);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;transition:.15s;margin-left:auto;flex-shrink:0}
.novidade-comment-btn:hover{background:var(--surface-2);color:var(--text)}
.novidade-comment-btn svg{width:14px;height:14px}
.novidade-comments{padding:0 20px}
.novidade-comments.open{padding-bottom:18px}

/* ── Config: grade de seções (cards no padrão Home) ───────────────────────── */
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.config-section-card{align-items:center;justify-content:center;text-align:center;gap:10px;min-height:110px;cursor:pointer}
#config-back{margin-bottom:1rem}

/* ── Templates ────────────────────────────────── */
.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.template-card{position:relative;gap:6px;cursor:pointer}
.template-card-del{position:absolute;top:10px;right:10px;opacity:0;transition:opacity .15s}
.template-card:hover .template-card-del{opacity:1}
.template-manage-name{font-size:14px;font-weight:600;color:var(--text)}
.template-manage-ch{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin-top:2px}
.template-manage-preview{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}

/* ── Links rápidos ────────────────────────────── */
#config-links-container{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.quick-link-wrap{position:relative;display:inline-flex}
.quick-link-wrap[draggable="true"]{cursor:grab}
.quick-link-wrap[draggable="true"]:active{cursor:grabbing}
.quick-link-wrap.dragging{opacity:.4}
.home-link-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:9999px;color:var(--text);text-decoration:none;font-size:13px;font-weight:500;padding:8px 16px;transition:background .15s}
.home-link-btn:hover{background:rgba(255,255,255,0.08)}
.quick-link-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--accent);color:var(--on-accent);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── Membros (config) ─────────────────────────── */
.config-members-list{display:flex;flex-direction:column;gap:10px}
.config-member-row{display:flex;align-items:center;gap:12px;background:var(--card-bg);border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;transition:background .15s}
.config-member-row:hover{background:color-mix(in srgb,var(--card-bg) 92%,white 8%)}
.config-member-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.config-member-name{font-size:14px;font-weight:600;color:var(--text)}

/* ── Modal "Ações do membro" + "Mover Membro" ─────────────────────────────── */
.member-actions-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.member-actions-list{display:flex;flex-direction:column;gap:8px}
.modal-action-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font-family:var(--font-body);font-size:14px;font-weight:500;padding:12px 14px;cursor:pointer;transition:background .15s}
.modal-action-row:hover{background:var(--border-strong)}
.modal-action-row.modal-action-danger{color:#f87171}
.modal-hint{font-size:13px;color:var(--text2);margin-bottom:4px}
.move-project-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.move-project-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;transition:background .15s}
.move-project-row.checked{background:var(--accent-bg)}
.move-project-name{flex:1;font-size:14px;font-weight:500;color:var(--text)}
.move-project-row input{margin-left:auto;cursor:pointer}

/* ── Emblemas (config) ────────────────────────── */
.badges-grid-cfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.badge-item-card{position:relative;align-items:center;text-align:center;gap:8px;padding:18px 12px}
.badge-item-card .cfg-badge-item-del{position:absolute;top:8px;right:8px}
.badge-item-card .cfg-badges-list{display:flex;flex-direction:column;gap:14px}
.cfg-badge-member-row{background:var(--card-bg);border-radius:var(--radius-sm);padding:14px 16px}
.cfg-badge-member-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cfg-badge-member-name{font-size:14px;font-weight:600;color:var(--text)}
.cfg-badge-pills{display:flex;flex-wrap:wrap;gap:8px}
.mp-badge-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;background:var(--surface-2);font-size:12px;font-weight:500;color:var(--text);cursor:pointer;transition:.15s}
.mp-badge-pill:hover{background:var(--border-strong)}
.cfg-badge-revoke{color:#f87171}

/* ══════════════════════════════════════════════
   NOTAS PESSOAIS — pastas, grid de cards, mídia
   ══════════════════════════════════════════════ */
.notes-folders{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.note-folder-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:9999px;background:var(--surface-2);color:var(--text2);font-family:var(--font-body);font-size:12.5px;font-weight:500;cursor:pointer;transition:.15s}
.note-folder-chip:hover{background:var(--border-strong);color:var(--text)}
.note-folder-chip.active{background:var(--surface-2);color:var(--text);font-weight:600}
.note-folder-chip .fchip-del{opacity:.5;font-size:13px}
.note-folder-chip .fchip-del:hover{opacity:1;color:#f87171}
.note-folder-add{background:transparent;color:var(--text3)}
.note-folder-add:hover{background:var(--surface-2);color:var(--text)}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.note-card{background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.15s}
.note-card:hover{background:var(--border-strong)}
.note-media-thumb{height:110px;background-size:contain;background-repeat:no-repeat;background-position:center;position:relative;background-color:var(--field)}
.note-media-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px;backdrop-filter:blur(4px)}
.note-card-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.note-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.note-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.note-actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s}
.note-card:hover .note-actions{opacity:1}
.note-act-btn{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:13px;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.note-act-btn:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.note-preview{font-size:13px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.note-folder-tag{font-size:11px;color:var(--text3);display:inline-flex;align-items:center;gap:4px;margin-top:auto}
.note-media-edit{display:flex;flex-wrap:wrap;gap:10px}
.note-media-tile{width:80px;height:80px;border-radius:10px;background-size:contain;background-repeat:no-repeat;background-position:center;position:relative;background-color:var(--field)}
.note-media-tile .media-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:none;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.note-media-add{width:80px;height:80px;border-radius:10px;border:1.5px dashed var(--border-strong);background:transparent;color:var(--text3);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.note-media-add:hover{border-color:var(--accent);color:var(--accent)}
.img-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out;backdrop-filter:blur(4px)}
.img-lightbox img{max-width:92%;max-height:92%;border-radius:12px;box-shadow:0 24px 60px -10px rgba(0,0,0,0.8);cursor:default}
.lightbox-close,.lightbox-nav{position:fixed;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2001;transition:background .15s}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(0,0,0,.8)}
.lightbox-close{top:20px;right:20px;width:36px;height:36px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:44px;height:44px}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:13px;font-weight:600;background:rgba(0,0,0,.6);padding:4px 14px;border-radius:9999px;z-index:2001}
.note-media-tile{cursor:zoom-in}
.note-media-thumb{cursor:zoom-in}

.badge-img{height:18px;width:18px;object-fit:contain;vertical-align:middle}
.badge-img-lg{height:32px;width:32px;object-fit:contain}
.cfg-badges-manage{background:var(--card-bg);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:1rem}
.cfg-badges-manage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cfg-badge-item-icon{display:flex;align-items:center;font-size:18px}
.cfg-badge-item-name{font-weight:500;color:var(--text);font-size:13px}
.cfg-badge-item-del{background:transparent;border:none;color:#f87171;font-size:16px;cursor:pointer;line-height:1;padding:0 2px}
.badge-art-row{display:flex;align-items:center;gap:12px}
.badge-art-preview{width:48px;height:48px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:24px}
.join-edit-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;vertical-align:middle;background:var(--surface-2);border:none;border-radius:6px;color:var(--text3);cursor:pointer;padding:0;transition:.15s}
.join-edit-btn svg{width:12px;height:12px}
.join-edit-btn:hover{color:var(--accent)}

/* ══════════════════════════════════════════════
   OBJETIVOS
   ══════════════════════════════════════════════ */
.obj-card-head{display:flex;align-items:flex-start;gap:10px}
.obj-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;transition:.15s;margin-top:1px}
.obj-check i{width:14px;height:14px}
.obj-check:hover{border-color:#22c55e}
.obj-card.done .obj-check{background:#22c55e;border-color:#22c55e;color:#06210f}
.obj-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.35;flex:1;transition:color .15s}
.obj-card.done .obj-title{text-decoration:line-through;color:var(--text3)}
.obj-card.done:hover .obj-title{color:#22c55e}
.obj-desc{font-size:13px;color:var(--text2);line-height:1.5;margin-top:8px;padding-left:32px}
.obj-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-left:32px;flex-wrap:wrap}
.obj-author{font-size:11px;color:var(--text3)}
.obj-actions{margin-left:auto;display:flex;gap:2px}
.obj-edit,.obj-del{background:none;border:none;color:var(--text3);cursor:pointer;display:flex;padding:2px}
.obj-edit i,.obj-del i{width:14px;height:14px}
.obj-edit:hover{color:var(--accent)}
.obj-del:hover{color:#f87171}
.obj-approval-note{font-size:12px;color:var(--text3);margin-right:auto}
.obj-pending{background:var(--warn-bg);border-radius:var(--radius-sm);padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.obj-pending-main{flex:1;min-width:0}
.obj-pending-title{font-size:14px;font-weight:600;color:var(--text)}
.obj-pending-meta{font-size:12px;color:var(--text3);margin-top:2px}
.obj-pending-actions{display:flex;gap:8px}
.btn-approve{display:inline-flex;align-items:center;gap:5px;border-radius:9999px;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;background:rgba(34,197,94,.15);color:#22c55e;border:none}
.btn-approve i{width:13px;height:13px}

/* ═══ Imagens no feed ═══════════════════════════════════════════════════ */
.feed-compose-media{display:none;flex-wrap:wrap;gap:8px;margin-top:10px}
.feed-compose-tile{position:relative;width:76px;height:76px;border-radius:10px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--field)}
.feed-compose-tile .media-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer;padding:0}
.feed-media-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text3);cursor:pointer;transition:.15s}
.feed-media-btn:hover{background:var(--surface-2);color:var(--text)}
.feed-media-btn.is-loading{opacity:.5;pointer-events:none}
/* Imagem inteira, sem corte, com teto — mesmo princípio do resto do portal */
.feed-post-media{display:grid;gap:6px;margin-top:10px;border-radius:12px;overflow:hidden}
.feed-post-media.qtd-1{grid-template-columns:1fr}
.feed-post-media.qtd-2{grid-template-columns:1fr 1fr}
.feed-post-media.qtd-3,.feed-post-media.qtd-4{grid-template-columns:1fr 1fr}
.feed-post-media img{width:100%;max-height:var(--img-max);object-fit:contain;background:var(--field);display:block;cursor:zoom-in;border-radius:8px}
.feed-post-media.qtd-1 img{max-height:var(--img-max)}
.feed-post-media:not(.qtd-1) img{max-height:180px}

/* ═══ Revisão: excluir e limpar resolvidas ══════════════════════════════ */
.review-del{margin-left:auto;background:none;border:none;color:var(--text3);cursor:pointer;display:flex;padding:2px;border-radius:6px;transition:.15s}
.review-del:hover{background:var(--surface-2);color:var(--danger)}
.review-cleanup{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:14px;border-radius:var(--radius-sm);background:var(--surface-2);font-size:13px;color:var(--text2)}

/* ═══ Objetivos: card da Home + escopo na vertical ══════════════════════ */
/* A faixa vertical diz de quem é o objetivo antes de qualquer leitura */
.obj-card.done .obj-capa{margin:-16px -18px 12px -24px;background:var(--field)}
.obj-capa img{display:block;width:100%;max-height:var(--img-max-sm);object-fit:contain;cursor:zoom-in}

/* ═══ Eventos: sessões como cards, não lista solta ══════════════════════ */

/* ═══ Eventos — GP ═════════════════════════════════════════════════════════
   Programação como lista compacta e cobertura em linhas de largura cheia.
   A versão anterior punha as sessões numa grade de cards: os treinos (sem
   cobertura) viravam caixas vazias esticadas, e a cobertura espremida numa
   coluna estreita quebrava "Cobertura ao vivo" letra a letra. */

.evt-agenda-linha + 
/* O slot ocupa a segunda coluna inteira e distribui em linha — nada de texto
   vertical nem sobreposição entre rótulo e "Ninguém ainda". */

/* Vazio SEM urgência: neutro. Amarelo só quando a corrida está a ≤8 dias. */
.coverage-slot.cov-livre .coverage-slot.cov-empty 
@media (max-width: 620px) {
    }

/* ═══ Objetivos — kanban ═══════════════════════════════════════════════════
   Uma coluna por escopo, cards empilhados na vertical. A coluna identifica a
   quem o objetivo pertence, então o card não carrega faixa lateral nem pill —
   ambos abolidos do portal. */
.obj-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.obj-coluna { display: flex; flex-direction: column; min-width: 0; }
.obj-coluna-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 10px;
}
.obj-coluna-head i { width: 15px; height: 15px; color: var(--text3); }
.obj-coluna-titulo {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obj-coluna-count {
  font-size: 11px; color: var(--text3);
  background: var(--surface-2); padding: 2px 8px; border-radius: 9999px;
}
.obj-coluna-corpo { display: flex; flex-direction: column; gap: 10px; }
.obj-coluna-vazia {
  padding: 20px 12px; text-align: center;
  font-size: 12.5px; color: var(--text3);
  background: var(--surface-2); border-radius: var(--radius-sm);
}

.obj-card { padding: 14px 16px; }
.obj-card.done { opacity: .6; }
.obj-capa { margin: -14px -16px 12px; background: var(--field); border-radius: 18px 18px 0 0; overflow: hidden; }
.obj-capa img { display: block; width: 100%; max-height: 150px; object-fit: contain; cursor: zoom-in; }

@media (max-width: 900px) { .obj-kanban { grid-template-columns: 1fr; } }

/* ═══ Eventos — refeito ════════════════════════════════════════════════════
   A tela existe para uma coisa: ver o que falta gente e assumir. Então a
   cobertura vem primeiro, cada uma num bloco de DUAS linhas (título+quando /
   quem+ação) com espaço real para o texto. A programação completa é rodapé
   discreto: referência, não ação. Sem bordas em lugar nenhum — só elevação
   por fundo, como o resto do portal. */

.evt-quando-badge {
  flex: none; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text3);
}
.evt-quando-badge.is-proximo { background: var(--warn-bg); color: var(--warn); }

.evt-coberturas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.cov-bloco {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: background .18s;
}
.cov-bloco:hover { background: var(--border-strong); }

.cov-linha-topo { display: flex; align-items: baseline; gap: 8px; }
.cov-titulo {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cov-vaga {
  flex: none; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text3);
}
.cov-quando { margin-left: auto; flex: none; font-size: 11.5px; color: var(--text3); white-space: nowrap; }

.cov-linha-base { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.cov-quem { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cov-nomes {
  font-size: 12.5px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cov-vazio { font-size: 12.5px; color: var(--text3); }
.cov-acoes { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* Vazio só vira alerta quando a corrida está próxima */
.cov-bloco.cov-empty { background: var(--warn-bg); }
.cov-bloco.cov-empty:hover { background: color-mix(in srgb, var(--warn) 24%, transparent); }
.cov-bloco.cov-empty .cov-vazio { color: var(--warn); font-weight: 600; }
/* Coberto por mim: tintado na cor do projeto */
.cov-bloco.cov-mine { background: color-mix(in srgb, var(--accent-proj) 14%, transparent); }
.cov-bloco.slot-updated { animation: slot-pulse 500ms ease; }

/* Programação: rodapé de referência, itens em linha */
.evt-programacao {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 16px; padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--border);
}
.evt-prog-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text3);
}
.evt-prog-item em { font-style: normal; opacity: .75; }

@media (max-width: 560px) {
  .cov-linha-topo { flex-wrap: wrap; }
  .cov-quando { margin-left: 0; width: 100%; }
}

#events-upcoming > .empty-state { grid-column: 1 / -1; }

/* ═══ Modal Novo Evento do Time ════════════════════════════════════════════
   Duas colunas, como o Novo Post: conteúdo à esquerda, data/hora à direita.
   Empilhado, o calendário sozinho tomava metade da tela. */
/* Colunas de largura IGUAL e mesma altura: com 1.1fr/.9fr e alturas soltas,
   uma coluna terminava bem antes da outra e o modal ficava torto. */
.ev-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.ev-modal-col { display: flex; flex-direction: column; min-width: 0; gap: 0; }
/* A descrição estica para casar com a altura de calendário + horário */
.ev-modal-desc { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
.ev-modal-desc .ta { flex: 1; min-height: 0; resize: none; }
/* Grade de horários mais baixa aqui: o calendário já ocupa a coluna */
.ev-modal-grid .sched-time-list { max-height: 96px; }
.ev-modal-grid .cal { padding: 12px; }
@media (max-width: 760px) { .ev-modal-grid { grid-template-columns: 1fr; } }

/* ── Pop-up de publicação (canto inferior direito) ─────────────────────────
   Publicar leva segundos: o modal fecha na hora e o acompanhamento vive aqui,
   sem prender ninguém numa tela parada. Sem borda — separa por elevação. */
.pub-popup, .notif-popup {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(380px, calc(100vw - 44px));
  padding: 14px 15px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.75);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s cubic-bezier(.23,1,.32,1), transform .22s cubic-bezier(.23,1,.32,1);
}
.pub-popup-visivel, .notif-popup-visible { opacity: 1; transform: translateY(0); }
.pub-popup-saindo, .notif-popup-hiding { opacity: 0; transform: translateY(14px); }
/* Notificação e publicação podem coexistir: a de notificação sobe uma faixa. */
.notif-popup { bottom: 22px; }
.pub-popup ~ .notif-popup { bottom: 118px; }

.pub-popup-icone, .notif-popup-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.pub-popup.is-ok      .pub-popup-icone { background: var(--ok-bg); color: var(--ok); }
.pub-popup.is-erro    .pub-popup-icone,
.pub-popup.is-parcial .pub-popup-icone { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pub-popup-icone svg, .notif-popup-icon svg { width: 17px; height: 17px; }

.pub-popup-corpo, .notif-popup-body { flex: 1; min-width: 0; }
.pub-popup-titulo, .notif-popup-title { color: var(--text); font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.pub-popup-msg, .notif-popup-msg {
  color: var(--text2); font-size: 12.5px; line-height: 1.45; margin-top: 3px;
  white-space: pre-line;          /* uma linha por canal que falhou */
  overflow-wrap: anywhere;
}
.pub-popup-msg:empty { display: none; }

.pub-popup-acoes { display: flex; gap: 8px; margin-top: 10px; }
.pub-popup-acoes:empty { display: none; }
.pub-popup-btn {
  background: var(--surface-2); border: none; border-radius: 8px;
  padding: 6px 12px; color: var(--text); font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.pub-popup-btn:hover { background: var(--border-strong); }
.pub-popup-btn:disabled { opacity: .5; cursor: default; }

.pub-popup-fechar, .notif-popup-close {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--text3); flex-shrink: 0; transition: color .15s;
}
.pub-popup-fechar:hover, .notif-popup-close:hover { color: var(--text); }
.pub-popup-fechar svg, .notif-popup-close svg { width: 15px; height: 15px; }

/* Spinner do estado "em andamento". */
.pub-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: pub-girar .7s linear infinite;
}
@keyframes pub-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pub-spinner { animation-duration: 2.4s; }
  .pub-popup, .notif-popup { transition: opacity .01s; }
}

/* Agendamento dentro de "Editar post": calendário do portal no lugar do
   seletor nativo do navegador, que não seguia nada do design. */
.edit-sched { display: grid; grid-template-columns: 1fr 208px; gap: 16px; align-items: start; }
.edit-sched .cal { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.edit-sched .sched-time-list { max-height: 148px; grid-template-columns: repeat(3, 1fr); }
/* Coluna estreita: o fuso desce para a própria linha em vez de ser cortado. */
.edit-sched .sched-time-field { flex-wrap: wrap; }
.edit-sched .sched-tz { width: 100%; white-space: normal; margin-top: 2px; }
@media (max-width: 640px) { .edit-sched { grid-template-columns: 1fr; } }

/* Aviso de que o link da publicação ainda não existe. */
.post-detail-link-esperando {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--text2); font-size: 12.5px; line-height: 1.45;
}
.post-detail-link-esperando svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text3); }

/* Card dentro do card: lista de jogos do dia no "Próximo evento" da Home.
   Sem borda — superfície própria, como o resto do portal. */
.home-jogos { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.home-jogo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 8px; }
.home-jogo-times { color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.3; min-width: 0; }
.home-jogo-x { color: var(--text3); font-weight: 400; margin: 0 2px; }
.home-jogo-hora { color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.home-jogos-mais { color: var(--text3); font-size: 12px; padding: 6px 8px 2px; }

/* Ver o anexo em tamanho real antes de publicar. Alvo próprio porque o tile
   já tem função: no compose ele arrasta (ordem do carrossel) e no painel por
   rede ele liga/desliga o anexo naquela rede. */
.media-ver, .custom-media-ver {
  position: absolute; left: 4px; bottom: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,0,0,.62); color: #fff;
  cursor: pointer; padding: 0; opacity: 0; transition: opacity .15s;
}
.media-ver svg, .custom-media-ver svg { width: 13px; height: 13px; }
.post-media-tile:hover .media-ver,
.custom-media-tile:hover .custom-media-ver { opacity: 1; }
.media-ver:hover, .custom-media-ver:hover { background: rgba(0,0,0,.85); }
/* Sem hover (toque), a lupa fica sempre visível — senão não há como chegar nela. */
@media (hover: none) { .media-ver, .custom-media-ver { opacity: 1; } }

/* Diálogos de confirmação/aviso do portal, no lugar dos nativos do navegador. */
.dialogo-msg { color: var(--text2); font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-line; }

/* Botão e modal de "Informações" (limites da publicação) na aba Produção. */
.cal-info-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text2);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s;
}
.cal-info-btn:hover { background: var(--border-strong); color: var(--text); }
.cal-info-btn svg { width: 15px; height: 15px; }

/* Tabela sem bordas: separa por faixa de fundo, como o resto do portal.
   `nowrap` nas células de número porque "até 512 MB · 2min" quebrando no meio
   deixava o separador sobrando no fim da linha. */
.limites-tabela-wrap { overflow-x: auto; border-radius: var(--radius-sm); background: var(--surface-2); }
.limites-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.limites-tabela th {
  text-align: left; padding: 9px 14px; color: var(--text3);
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.limites-tabela td { padding: 11px 14px; color: var(--text2); vertical-align: middle; }
.limites-tabela tbody tr + tr td { box-shadow: inset 0 1px 0 rgba(255,255,255,0.045); }
.lim-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lim-obs { color: var(--text3); white-space: nowrap; }
.lim-rede { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; white-space: nowrap; }
.lim-rede svg { width: 15px; height: 15px; }
.lim-nota { color: var(--text3); }

/* Regras gerais em linhas rótulo/valor, no lugar dos parágrafos que havia antes. */
.limites-regras, .limites-notas { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; }
.limites-notas { margin-top: 14px; padding-top: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055); }
.lim-regra { display: flex; align-items: baseline; gap: 14px; padding: 7px 2px; font-size: 12.5px; line-height: 1.45; }
.lim-regra-nome { flex: 0 0 152px; color: var(--text); font-weight: 600; }
.lim-regra-valor { flex: 1; min-width: 0; color: var(--text2); }
@media (max-width: 560px) {
  .lim-regra { flex-direction: column; gap: 1px; }
  .lim-regra-nome { flex: none; }
}
