/* ==========================================================================
   Somos RPPS — Folha de estilos principal
   --------------------------------------------------------------------------
   - Reset focado no escopo .somos-rpps-app (não afeta o restante do site)
   - Sistema de tokens (CSS Custom Properties) para tema claro/escuro
   - Layout em grid responsivo (sidebar + topbar + main)
   - Mobile-first com breakpoints progressivos
   ========================================================================== */

/* ---------------- Reset / base ---------------- */
.somos-rpps-root,
.somos-rpps-root *,
.somos-rpps-root *::before,
.somos-rpps-root *::after {
	box-sizing: border-box;
}

.somos-rpps-root {
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--sr-fg);
	line-height: 1.5;
}

.somos-rpps-root [v-cloak] {
	display: none !important;
}

/* ---------------- Tokens de tema ---------------- */
.somos-rpps-app {
	/* Paleta azul "social network" — base #1d4ed8 (blue-700) */
	--sr-brand-50:  #eff6ff;
	--sr-brand-100: #dbeafe;
	--sr-brand-200: #bfdbfe;
	--sr-brand-300: #93c5fd;
	--sr-brand-400: #60a5fa;
	--sr-brand-500: #3b82f6;
	--sr-brand-600: #2563eb;
	--sr-brand-700: #1d4ed8;
	--sr-brand-800: #1e40af;
	--sr-brand-900: #1e3a8a;
	--sr-brand-950: #172554;

	--sr-radius-xs: 6px;
	--sr-radius-sm: 8px;
	--sr-radius-md: 12px;
	--sr-radius-lg: 16px;
	--sr-radius-xl: 22px;
	--sr-radius-pill: 999px;

	--sr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
	--sr-shadow-md: 0 10px 25px -10px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);
	--sr-shadow-lg: 0 24px 48px -20px rgba(15, 23, 42, .25);

	--sr-transition: 180ms cubic-bezier(.4, 0, .2, 1);

	--sr-sidebar-w-expanded: 264px;
	--sr-sidebar-w-collapsed: 78px;
	--sr-topbar-h: 64px;
	--sr-ticker-h: 58px;
}

/* Tema claro (padrão) */
.somos-rpps-app[data-theme='light'] {
	--sr-bg:        #f4f7fb;
	--sr-bg-elev:   #ffffff;
	--sr-bg-elev-2: #ffffff;
	--sr-fg:        #0f172a;
	--sr-fg-muted:  #475569;
	--sr-fg-subtle: #64748b;
	--sr-border:    #e2e8f0;
	--sr-border-strong: #cbd5e1;
	--sr-overlay:   rgba(15, 23, 42, .45);
	--sr-input-bg:  #ffffff;
	--sr-success:   #16a34a;
	--sr-warning:   #d97706;
	--sr-danger:    #dc2626;
	--sr-info:      var(--sr-brand-600);
	--sr-brand:     var(--sr-brand-700);
	--sr-brand-fg:  #ffffff;
	--sr-link:      var(--sr-brand-700);
}

/* Tema escuro */
.somos-rpps-app[data-theme='dark'] {
	--sr-bg:        #0b1220;
	--sr-bg-elev:   #111a2e;
	--sr-bg-elev-2: #18233d;
	--sr-fg:        #e6edf7;
	--sr-fg-muted:  #a3b1c6;
	--sr-fg-subtle: #7d8aa3;
	--sr-border:    #1f2a44;
	--sr-border-strong: #2a3a5d;
	--sr-overlay:   rgba(0, 0, 0, .65);
	--sr-input-bg:  #0f1a30;
	--sr-success:   #22c55e;
	--sr-warning:   #f59e0b;
	--sr-danger:    #ef4444;
	--sr-info:      var(--sr-brand-400);
	--sr-brand:     var(--sr-brand-500);
	--sr-brand-fg:  #ffffff;
	--sr-link:      var(--sr-brand-300);
}

/* ---------------- Boot screen ---------------- */
.somos-rpps-boot {
	display: flex;
	min-height: 50vh;
	align-items: center;
	justify-content: center;
	background: #0b1220;
	color: #cbd5e1;
}
.somos-rpps-boot__inner {
	text-align: center;
	font-family: 'Inter', sans-serif;
}
.somos-rpps-spinner {
	width: 42px;
	height: 42px;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: #60a5fa;
	border-radius: 50%;
	margin: 0 auto 14px;
	animation: sr-spin 750ms linear infinite;
}
@keyframes sr-spin { to { transform: rotate(360deg); } }

.somos-rpps-noscript {
	background: #fee2e2;
	color: #7f1d1d;
	padding: 16px 20px;
	border-radius: 12px;
	font-family: 'Inter', sans-serif;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.somos-rpps-app {
	min-height: 100vh;
	background: var(--sr-bg);
	color: var(--sr-fg);
	font-family: 'Inter', sans-serif;
	transition: background-color var(--sr-transition), color var(--sr-transition);
}

.sr-shell {
	display: grid;
	grid-template-columns: var(--sr-sidebar-w-expanded) 1fr;
	/* Linha "ticker" usa auto: quando o ticker está recolhido, seu max-height
	   colapsa para 0 e a linha não ocupa espaço. Quando expandido, assume
	   var(--sr-ticker-h). Mantém o sidebar varrendo de cima a baixo. */
	grid-template-rows: auto var(--sr-topbar-h) 1fr;
	grid-template-areas:
		'sidebar ticker'
		'sidebar topbar'
		'sidebar main';
	min-height: 100vh;
	transition: grid-template-columns var(--sr-transition);
}

.somos-rpps-app[data-menu='collapsed'] .sr-shell {
	grid-template-columns: var(--sr-sidebar-w-collapsed) 1fr;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.sr-topbar {
	grid-area: topbar;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 22px;
	background: var(--sr-bg-elev);
	border-bottom: 1px solid var(--sr-border);
	position: sticky;
	top: 0;
	z-index: 30;
}

.sr-topbar__left,
.sr-topbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* O lado esquerdo cresce para ocupar o espaço livre — assim a search
 * pode ser empurrada para a direita (margin-left:auto) e ficar colada
 * aos ícones do lado direito do header. */
.sr-topbar__left { flex: 1 1 auto; min-width: 0; }
.sr-topbar__right { flex: 0 0 auto; }

.sr-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sr-radius-md);
	background: transparent;
	border: 1px solid transparent;
	color: var(--sr-fg-muted);
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition), border-color var(--sr-transition);
}
.sr-iconbtn:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
}
.somos-rpps-app[data-theme='dark'] .sr-iconbtn:hover {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-300);
}
.sr-iconbtn svg { width: 22px; height: 22px; }

/* Wrapper universal do componente <IconSvg>. Sem isso, o <span class="sr-icon">
   herdava `display: inline` e o SVG interno alinhava pela baseline do texto,
   ficando levemente fora de centro em badges/botões circulares. */
.sr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.sr-icon svg { display: block; flex-shrink: 0; }

/* Ocupa toda a largura disponível entre o botão hambúrguer (à esquerda)
 * e os ícones do lado direito do header. Sem max-width: se novos ícones
 * forem acrescentados à direita, a busca se reduz automaticamente. */
.sr-topbar__search {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	position: relative;
}
.sr-topbar__search input {
	width: 100%;
	height: 40px;
	border-radius: var(--sr-radius-pill);
	border: 1px solid var(--sr-border);
	background: var(--sr-input-bg);
	color: var(--sr-fg);
	padding: 0 14px 0 40px;
	font: inherit;
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-topbar__search input:focus {
	outline: none;
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}
.sr-topbar__search svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--sr-fg-subtle);
}

.sr-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sr-brand-100);
	color: var(--sr-brand-800);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	overflow: hidden;
	border: 2px solid var(--sr-bg-elev);
	box-shadow: var(--sr-shadow-sm);
}
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sr-sidebar {
	grid-area: sidebar;
	background: var(--sr-bg-elev);
	border-right: 1px solid var(--sr-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 12px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 31;
}

/* Marca: logotipo isolado no topo da sidebar.
   - Padding vertical generoso (acima e abaixo) cria respiro entre o logo
     e o início da lista do menu.
   - Margin-bottom maior reforça a separação visual.
   - O tamanho do logo é controlado no componente <Logo> (45×171 expandido /
     45×45 recolhido), refletindo a redução de 10% solicitada. */
.sr-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--sr-topbar-h) - 4px);
	padding: 14px 8px 18px;
	margin-bottom: 18px;
	border-radius: var(--sr-radius-md);
}
.sr-brand img { display: block; max-width: 100%; height: auto; }

.sr-nav { display: flex; flex-direction: column; gap: 2px; }

/* Separador entre grupos de itens do menu. Padronizado com a mesma linha
   usada no rodapé da sidebar (acima de "Somos RPPS · v1.0"): 1px sólido em
   var(--sr-border), sem gradientes, para manter consistência visual. */
.sr-nav__sep {
	height: 0;
	border-top: 1px solid var(--sr-border);
	margin: 10px 0;
}

.sr-nav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--sr-radius-md);
	color: var(--sr-fg-muted);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition);
	border: 1px solid transparent;
	user-select: none;
}
.sr-nav__item:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-800);
}
.somos-rpps-app[data-theme='dark'] .sr-nav__item:hover {
	background: rgba(96, 165, 250, .10);
	color: var(--sr-brand-200);
}
.sr-nav__item.is-active {
	background: var(--sr-brand-700);
	color: #fff;
	box-shadow: var(--sr-shadow-sm);
}
.sr-nav__item.is-active:hover { background: var(--sr-brand-800); color: #fff; }
/* Ícones do menu: tamanho ampliado p/ melhor leitura visual (era 20px). */
.sr-nav__item svg { width: 24px; height: 24px; flex-shrink: 0; }
.sr-nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.somos-rpps-app[data-menu='collapsed'] .sr-nav__label,
.somos-rpps-app[data-menu='collapsed'] .sr-sidebar__footer-text {
	display: none;
}
.somos-rpps-app[data-menu='collapsed'] .sr-nav__item {
	justify-content: center;
	padding: 12px 8px;
}

/* ============================================================
   ITEM DESTACADO no menu — "Explorar" (Globo).
   ============================================================
   Visualmente diferenciado dos itens comuns: fundo levemente
   tintado em azul institucional, borda sutil, ícone em azul mais
   forte. O globo dentro tem animação de rotação de tempos em tempos
   (3s parado → 1.8s girando 360°) pra sinalizar que é o portal de
   descoberta — o "Coração 2" da plataforma.

   Quando o item fica ativo (view atual), as regras de `.is-active`
   já existentes assumem a aparência preenchida em azul forte; aqui
   só preservamos a animação do ícone.
   ============================================================ */
.sr-nav__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	flex-shrink: 0;
	/* Garante que rotate3d/perspective funcionem corretamente. */
	perspective: 600px;
}
.sr-nav__icon-wrap svg { display: block; }

/* Container de destaque do "Explorar" (idle, não ativo).
   Cor sólida (versão escura da paleta usada antes) — sem gradiente
   pra ficar limpo e profissional. No tema dark, mesma lógica com
   tom azul translúcido sólido. */
.sr-nav__item--highlight:not(.is-active) {
	background: var(--sr-brand-100);
	border-color: var(--sr-brand-200);
	color: var(--sr-brand-700);
	font-weight: 600;
}
.sr-nav__item--highlight:not(.is-active):hover {
	background: var(--sr-brand-200);
	color: var(--sr-brand-800);
	border-color: var(--sr-brand-300);
}
.somos-rpps-app[data-theme='dark'] .sr-nav__item--highlight:not(.is-active) {
	background: rgba(96, 165, 250, .18);
	border-color: rgba(96, 165, 250, .35);
	color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-nav__item--highlight:not(.is-active):hover {
	background: rgba(96, 165, 250, .26);
	border-color: rgba(96, 165, 250, .55);
	color: var(--sr-brand-100);
}

/* Separadores adjacentes ao item destacado ficam um pouco mais marcantes
   pra reforçar a "zona especial" do Explorar. */
.sr-nav__item--highlight + .sr-nav__sep,
.sr-nav__sep + .sr-nav__item--highlight + .sr-nav__sep,
.sr-nav__sep:has(+ .sr-nav__item--highlight) {
	border-top-color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-nav__item--highlight + .sr-nav__sep,
.somos-rpps-app[data-theme='dark'] .sr-nav__sep + .sr-nav__item--highlight + .sr-nav__sep,
.somos-rpps-app[data-theme='dark'] .sr-nav__sep:has(+ .sr-nav__item--highlight) {
	border-top-color: rgba(96, 165, 250, .25);
}

.sr-sidebar__spacer { flex: 1; }

.sr-sidebar__footer {
	border-top: 1px solid var(--sr-border);
	padding-top: 12px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--sr-fg-subtle);
	text-align: center;
}

/* ============================================================
   MAIN
   ============================================================ */
.sr-main {
	grid-area: main;
	padding: 24px;
	min-width: 0;
}

.sr-page-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -.01em;
}
.sr-page-subtitle {
	color: var(--sr-fg-muted);
	margin-bottom: 22px;
}

.sr-grid-feed {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
}

.sr-card {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	box-shadow: var(--sr-shadow-sm);
	padding: 20px;
}
.sr-card + .sr-card { margin-top: 16px; }
.sr-card__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px;
}
.sr-card__muted { color: var(--sr-fg-muted); margin: 0; }

/* Composer placeholder */
.sr-composer {
	display: flex;
	gap: 12px;
	align-items: center;
}
.sr-composer input {
	flex: 1;
	height: 46px;
	border-radius: var(--sr-radius-pill);
	border: 1px solid var(--sr-border);
	background: var(--sr-input-bg);
	color: var(--sr-fg);
	padding: 0 18px;
	font: inherit;
}
.sr-composer input:focus {
	outline: none;
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

/* ============================================================
   TICKER (Top bar dinâmica) — estilo "barra de informações"
   ------------------------------------------------------------
   Posicionada acima do header (sr-topbar) na coluna do main,
   nunca afeta a sidebar (que continua varrendo de cima a baixo).
   Comporta-se como uma barra ultra-fina, elegante, que desliza
   verticalmente ao abrir/fechar via botão no header.
   ============================================================ */
.sr-ticker {
	grid-area: ticker;
	overflow: hidden;
	max-height: 0;
	/* Azul sólido um pouco mais escuro que o brand padrão (--sr-brand-700).
	   Sem degradês nem efeitos — visual limpo conforme solicitado. */
	background: var(--sr-brand-900);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition:
		max-height 320ms cubic-bezier(.4, 0, .2, 1),
		opacity 220ms ease;
	opacity: 0;
	position: relative;
	z-index: 25;
}
.sr-ticker.is-open {
	max-height: calc(var(--sr-ticker-h) + 6px);
	opacity: 1;
}
.somos-rpps-app[data-theme='dark'] .sr-ticker {
	background: #0c1530;
	border-bottom-color: rgba(148, 163, 184, .12);
}

.sr-ticker__inner {
	height: var(--sr-ticker-h);
	display: flex;
	align-items: center;
	padding: 0 22px;
	position: relative;
	z-index: 1;
}

.sr-ticker__track {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	width: 100%;
}
.sr-ticker__track::-webkit-scrollbar { display: none; }

.sr-ticker__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Padding vertical maior + altura mínima: garante folga visual em cima
	   e embaixo, evitando a sensação de "etiqueta torada" pelas bordas
	   superior/inferior da barra. */
	padding: 8px 14px;
	min-height: 34px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--sr-radius-pill);
	color: #f1f5f9;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .005em;
	white-space: nowrap;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
button.sr-ticker__chip {
	cursor: pointer;
	transition: background var(--sr-transition), border-color var(--sr-transition), transform 120ms ease;
	font: inherit;
	font-weight: 500;
}
button.sr-ticker__chip:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .25);
}
button.sr-ticker__chip:active { transform: translateY(1px); }

.sr-ticker__chip--greet {
	background: transparent;
	border-color: transparent;
	padding-left: 4px;
	padding-right: 6px;
}
.sr-ticker__greet { font-weight: 600; color: #fff; }

.sr-ticker__chip--wx { gap: 8px; }
.sr-ticker__wxicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fde68a;
}
.sr-ticker__wxicon svg { width: 22px; height: 22px; }
.sr-ticker__wxicon.is-loading { opacity: .55; animation: sr-ticker-pulse 1.2s ease-in-out infinite; }
@keyframes sr-ticker-pulse { 50% { opacity: 1; } }

.sr-ticker__wxtemp {
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.sr-ticker__wxtemp small { font-weight: 600; font-size: 11px; opacity: .85; margin-left: 1px; }
.sr-ticker__wxtemp--dim { color: rgba(255, 255, 255, .55); }

.sr-ticker__wxsep { opacity: .55; font-size: 12px; }

.sr-ticker__wxcity {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	border-bottom: 1px dashed rgba(255, 255, 255, .35);
	padding-bottom: 1px;
	/* Nome do município: tipografia ligeiramente menor que o restante do chip,
	   para reduzir a "carga visual" sem perder legibilidade. */
	font-size: 14px;
}
.sr-ticker__wxcity svg { width: 14px; height: 14px; opacity: .85; }

/* Botão de toggle do ticker dentro do header. Rotaciona o chevron quando
   o ticker está aberto, com transição suave. */
.sr-ticker-toggle svg {
	transition: transform var(--sr-transition);
}
.sr-ticker-toggle.is-active {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
}
.somos-rpps-app[data-theme='dark'] .sr-ticker-toggle.is-active {
	background: rgba(96, 165, 250, .14);
	color: var(--sr-brand-300);
}

/*
 * Atalho do Explorar no header. No estado idle, usa cor azul brand
 * pra reforçar a identidade do item (mesmo destaque visual da entrada
 * no menu lateral). No estado ativo (view atual), fundo azul cheio
 * institucional pra mostrar "você está aqui".
 */
.sr-explore-trigger {
	color: var(--sr-brand-700);
}
.sr-explore-trigger:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-800);
}
.sr-explore-trigger.is-active {
	background: var(--sr-brand-700);
	color: #fff;
}
.sr-explore-trigger.is-active:hover { background: var(--sr-brand-800); }
.somos-rpps-app[data-theme='dark'] .sr-explore-trigger {
	color: var(--sr-brand-300);
}
.somos-rpps-app[data-theme='dark'] .sr-explore-trigger:hover {
	background: rgba(96, 165, 250, .14);
	color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-explore-trigger.is-active {
	background: var(--sr-brand-500);
	color: #fff;
}
.somos-rpps-app[data-theme='dark'] .sr-explore-trigger.is-active:hover {
	background: var(--sr-brand-700);
}

/* ============================================================
   MODAL (genérico)
   ============================================================ */
.sr-modal {
	position: fixed;
	inset: 0;
	/* Acima de TUDO: sidebar (31), topbar (30), ticker (25), drawers (60).
	   Usamos 1000 para garantir centralização real sem qualquer sobreposição
	   de outras camadas do shell. */
	z-index: 1000;
	background: var(--sr-overlay);
	/* Blur uniforme em TODOS os modais (Privacidade, QR, Cropper, Area/Role,
	   confirmações etc.). Antes, só o .sr-search-modal tinha blur — o que
	   gerava inconsistência visual quando o usuário comparava modais lado
	   a lado. Mantendo o mesmo valor (8px) garante linguagem visual única. */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	/* Centro EXATO da viewport, tanto vertical quanto horizontal. */
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.sr-modal__card {
	width: 100%;
	max-width: 560px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-xl);
	box-shadow:
		0 30px 60px -20px rgba(2, 6, 23, .45),
		0 8px 20px -6px rgba(2, 6, 23, .22);
	overflow: hidden;
}
.sr-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 28px 30px 6px;
}
.sr-modal__head .sr-iconbtn {
	margin-top: -4px;
	margin-right: -6px;
	flex: 0 0 auto;
}
.sr-modal__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	color: var(--sr-fg);
	letter-spacing: -.01em;
	line-height: 1.3;
}
.sr-modal__subtitle {
	margin: 0 30px 4px;
	font-size: 13.5px;
	color: var(--sr-fg-muted);
	line-height: 1.55;
}
/* Corpo padrão de modais (área interna entre head e actions).
   Usar SEMPRE para garantir respiro lateral e inferior consistentes — antes
   tínhamos modais com conteúdo colado nas bordas porque o padding ficava
   por conta de cada elemento filho. */
.sr-modal__body {
	padding: 14px 30px 6px;
}

.sr-modal__search {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 30px 20px;
	padding: 0 16px;
	background: var(--sr-bg);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-modal__search:focus-within {
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}
.sr-modal__search svg { width: 20px; height: 20px; color: var(--sr-fg-subtle); flex-shrink: 0; }
.sr-modal__searchinput {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--sr-fg);
	font: inherit;
	font-size: 15px;
	height: 50px;
	outline: none;
}

.sr-modal__list {
	list-style: none;
	margin: 0;
	padding: 4px 18px 20px;
	max-height: 360px;
	overflow-y: auto;
}
/* Variante usada quando a lista vive DENTRO do .sr-search-modal__body
 * (que já tem seu próprio padding) — zera margens/paddings externos. */
.sr-modal__list--inline {
	padding: 0;
	max-height: none;
}
.sr-modal__list--inline .sr-modal__item { margin-bottom: 4px; }
.sr-modal__list--inline .sr-modal__item:last-child { margin-bottom: 0; }
.sr-modal__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: var(--sr-radius-md);
	cursor: pointer;
	color: var(--sr-fg);
	font-size: 14.5px;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-modal__item.is-highlight,
.sr-modal__item:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-800);
}
.somos-rpps-app[data-theme='dark'] .sr-modal__item.is-highlight,
.somos-rpps-app[data-theme='dark'] .sr-modal__item:hover {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-200);
}
.sr-modal__item-name { font-weight: 500; }
.sr-modal__item-uf {
	font-size: 11px;
	font-weight: 700;
	color: var(--sr-fg-subtle);
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	padding: 2px 8px;
}

.sr-modal__empty,
.sr-modal__hint {
	padding: 6px 30px 28px;
	color: var(--sr-fg-subtle);
	font-size: 13.5px;
	text-align: center;
	line-height: 1.55;
}

/* Animação de entrada/saída do modal */
.sr-modal-enter-active,
.sr-modal-leave-active { transition: opacity 200ms ease; }
.sr-modal-enter-active .sr-modal__card,
.sr-modal-leave-active .sr-modal__card { transition: transform 220ms cubic-bezier(.4, 0, .2, 1), opacity 200ms ease; }
.sr-modal-enter-from,
.sr-modal-leave-to { opacity: 0; }
.sr-modal-enter-from .sr-modal__card,
.sr-modal-leave-to .sr-modal__card { opacity: 0; transform: translateY(-8px) scale(.98); }

/* ============================================================
   FOOTER GLOBAL — IDÊNTICO em TODAS as páginas
   ------------------------------------------------------------
   Regra obrigatória do produto: o footer institucional aparece
   em todas as views existentes E em todas as que forem criadas
   no futuro, com EXATAMENTE este visual: sem caixa, sem borda
   ao redor, apenas uma linha divisória superior FINA e SUAVE
   para separar do conteúdo do body. Background = mesmo do body. */
.sr-footer {
	margin-top: 40px;
	padding: 22px 12px 18px;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--sr-border);
	border-radius: 0;
	color: var(--sr-fg-muted);
	font-size: 13px;
	display: grid;
	gap: 6px;
	/* Mobile: centralizado. Desktop (≥640px): alinhado à esquerda
	   pra dar respiro institucional, sem ficar "engessado" no centro
	   em telas largas. */
	text-align: center;
}
@media (min-width: 640px) {
	.sr-footer { text-align: left; padding-left: 4px; }
	/* Override no perfil público: centralizado mesmo no desktop. */
	.sr-footer.sr-footer--center { text-align: center; padding-left: 12px; }
}
.sr-footer strong { color: var(--sr-fg); }

/* Link "Obtenha suporte pelo WhatsApp" no footer interno.
   Visualmente IDÊNTICO às outras linhas do rodapé (mesma cor,
   mesma fonte, sem sublinhado padrão). O sublinhado aparece
   SOMENTE no hover/focus, mantendo a discrição visual no
   estado de repouso. UX consistente com o link equivalente
   no rodapé do AuthScreen (.sr-auth__support-link). */
.sr-footer__support-link {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	transition: text-decoration-color var(--sr-transition);
}
.sr-footer__support-link:hover,
.sr-footer__support-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: none;
}

/* ============================================================
   LOGIN / REGISTER (Auth shell)
   ============================================================ */
.sr-auth {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--sr-bg);
	color: var(--sr-fg);
}

@media (min-width: 980px) {
	.sr-auth { grid-template-columns: 1.05fr 1fr; }
}

.sr-auth__brandside {
	display: none;
	background: radial-gradient(at 20% 0%, #2563eb 0%, transparent 55%),
	            radial-gradient(at 100% 100%, #1e3a8a 0%, transparent 55%),
	            linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
	color: #fff;
	padding: 48px;
	position: relative;
	overflow: hidden;
}
@media (min-width: 980px) {
	.sr-auth__brandside { display: flex; flex-direction: column; justify-content: space-between; }
}
.sr-auth__brandside::before,
.sr-auth__brandside::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .25;
	pointer-events: none;
}
.sr-auth__brandside::before {
	width: 380px; height: 380px;
	background: #60a5fa;
	top: -120px; right: -120px;
}
.sr-auth__brandside::after {
	width: 320px; height: 320px;
	background: #1e40af;
	bottom: -120px; left: -100px;
}

/* Centro vertical do painel azul: logo + frase */
.sr-auth__brand-center {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	width: 100%;
}
.sr-auth__brand-logo {
	display: flex;
	justify-content: center;
}
.sr-auth__brand-logo img {
	height: 68px;
	width: auto;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .25));
}
.sr-auth__brand-headline {
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	margin: 0;
	color: #fff;
	background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-wrap: balance;
	max-width: 18ch;       /* mantém o título em duas linhas, equilibradas */
	margin-left: auto;
	margin-right: auto;
}
.sr-auth__brand-headline::after {
	content: '';
	display: block;
	width: 64px;
	height: 4px;
	margin: 22px auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.85), rgba(255,255,255,.0));
}

/* Rodapé do painel azul (créditos completos) */
.sr-auth__brand-footer {
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, .82);
	font-size: 12.5px;
	line-height: 1.7;
	display: grid;
	gap: 2px;
}
.sr-auth__brand-footer strong { color: #fff; font-weight: 600; }
.sr-auth__brand-footer a { color: inherit; text-decoration: none; }

/* Link de suporte por WhatsApp: visualmente IDÊNTICO ao texto
   plano do rodapé (mesma cor, mesma fonte, sem sublinhado). O
   sublinhado aparece SOMENTE no hover/focus, sinalizando que é
   clicável apenas para quem está procurando. UX intencionalmente
   discreta — não compete visualmente com a marca/copyright. */
.sr-auth__brand-footer .sr-auth__support-link {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: text-decoration-color var(--sr-transition);
}
.sr-auth__brand-footer .sr-auth__support-link:hover,
.sr-auth__brand-footer .sr-auth__support-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: none;
}
.sr-auth__brand-footer__sep {
	height: 1px;
	background: rgba(255, 255, 255, .14);
	margin: 10px 0 12px;
}

.sr-auth__formside {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
}
.sr-auth__card {
	width: 100%;
	max-width: 460px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-xl);
	box-shadow: var(--sr-shadow-lg);
	padding: 32px;
}
.sr-auth__logo-mobile {
	display: flex; justify-content: center;
	margin-bottom: 18px;
}
.sr-auth__logo-mobile img { height: 44px; width: auto; }
@media (min-width: 980px) {
	.sr-auth__logo-mobile { display: none; }
}

.sr-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	padding: 4px;
	margin-bottom: 22px;
}
.sr-auth__tab {
	border: 0; background: transparent; color: var(--sr-fg-muted);
	padding: 10px 14px;
	border-radius: var(--sr-radius-pill);
	font: inherit; font-weight: 600;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-auth__tab.is-active {
	background: var(--sr-brand-700);
	color: #fff;
	box-shadow: var(--sr-shadow-sm);
}

.sr-auth__title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -.015em;
	text-align: center;
}
.sr-auth__subtitle {
	color: var(--sr-fg-muted);
	margin: 0 0 22px;
	text-align: center;
}

/* Container das telas com altura animada.
   --------------------------------------------------------------
   ALTURA TRAVADA: queremos que o card NÃO mude de altura quando
   o usuário alterna entre "Entrar" e "Criar conta" — a transição
   entre as duas abas fica visualmente perfeita. Para conseguir
   isso sem JavaScript de medição:
    - `min-height` garante que o painel menor (Entrar) ocupe o
      mesmo espaço do painel maior (Criar conta — tem 2 colunas
      de campos no início).
    - O <form> filho vira flex-column para permitir que o seu
      rodapé (.sr-auth__footer) seja empurrado para a base
      (margin-top: auto), mantendo a base do rodapé alinhada
      mesmo quando o conteúdo do painel é menor.
   Valor calibrado com folga para acomodar mensagens de erro
   inline sem precisar reflowar o card. */
.sr-auth__panels {
	position: relative;
	min-height: 396px;
	display: flex;
	flex-direction: column;
}
.sr-auth__panel {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sr-auth__panel > .sr-auth__footer {
	margin-top: auto;
}

/* Classes geradas pelo <transition name="sr-auth__panel"> do Vue */
.sr-auth__panel-enter-active,
.sr-auth__panel-leave-active {
	transition:
		opacity 280ms cubic-bezier(.4, 0, .2, 1),
		transform 320ms cubic-bezier(.4, 0, .2, 1),
		filter 280ms ease;
	will-change: opacity, transform, filter;
}
.sr-auth__panel-enter-from { opacity: 0; transform: translateY(8px) scale(.99); filter: blur(4px); }
.sr-auth__panel-enter-to   { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0); }
.sr-auth__panel-leave-from { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0); }
.sr-auth__panel-leave-to   { opacity: 0; transform: translateY(-6px) scale(.99); filter: blur(3px); }

/* Pílula deslizante das abas */
.sr-auth__tabs {
	position: relative;
}
.sr-auth__tabs::before {
	content: '';
	position: absolute;
	top: 4px; bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	background: var(--sr-brand-700);
	border-radius: var(--sr-radius-pill);
	box-shadow: var(--sr-shadow-sm);
	transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
	z-index: 0;
}
.sr-auth__tabs[data-active='register']::before {
	transform: translateX(100%);
}
.sr-auth__tab {
	position: relative;
	z-index: 1;
	transition: color 220ms ease;
}
/* desliga o background sólido da pílula antiga (agora é o ::before deslizante) */
.sr-auth__tab.is-active { background: transparent; box-shadow: none; color: #fff; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.sr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sr-field__row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .sr-field__row.is-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .sr-field__row.is-2-uneven { grid-template-columns: 2fr 1fr; } }
/* Modificador `is-always-2`: força 2 colunas em qualquer largura,
   inclusive em mobile estreito. Usado por linhas curtas (ex.: Nome
   + Sobrenome no signup) onde a leitura em 2 colunas continua
   confortável mesmo em ~340px. Reduz o gap pra acomodar bem em
   telas pequenas. */
.sr-field__row.is-always-2 { grid-template-columns: 1fr 1fr; gap: 10px; }

/* Linha de ajuda em largura total dentro de um sr-field__row.is-2:
   ocupa as duas colunas, ficando sob ambos os campos. */
.sr-field__rowhelp {
	grid-column: 1 / -1;
	margin-top: -4px;
}

.sr-label {
	font-size: 13px;
	color: var(--sr-fg-muted);
	font-weight: 500;
}
.sr-input,
.sr-select {
	height: 46px;
	border-radius: var(--sr-radius-md);
	border: 1px solid var(--sr-border);
	background: var(--sr-input-bg);
	color: var(--sr-fg);
	padding: 0 14px;
	font: inherit;
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
	width: 100%;
}
.sr-input:focus,
.sr-select:focus {
	outline: none;
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.sr-input[disabled], .sr-select[disabled] {
	opacity: .65; cursor: not-allowed;
}
.sr-input--invalid, .sr-select--invalid {
	border-color: var(--sr-danger) !important;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}

.sr-help { font-size: 12px; color: var(--sr-fg-subtle); }
.sr-error { font-size: 12px; color: var(--sr-danger); }

/* PasswordField: input + botão de exibir/ocultar */
.sr-password { position: relative; }
.sr-password__input {
	padding-right: 46px !important; /* reserva espaço para o ícone */
	width: 100%;
}
.sr-password__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--sr-fg-subtle);
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition);
	padding: 0;
}
.sr-password__toggle:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
}
.somos-rpps-app[data-theme='dark'] .sr-password__toggle:hover {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-300);
}
.sr-password__toggle:focus-visible {
	outline: 2px solid var(--sr-brand-500);
	outline-offset: 1px;
}
.sr-password__icon { display: inline-flex; }
.sr-password__icon svg { width: 18px; height: 18px; }

/* Autocomplete (município) */
.sr-autocomplete { position: relative; }
.sr-autocomplete__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	box-shadow: var(--sr-shadow-md);
	list-style: none;
	margin: 0;
	padding: 4px;
	max-height: 260px;
	overflow-y: auto;
	z-index: 40;
}
.sr-autocomplete__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 12px;
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
	font-size: 14px;
	color: var(--sr-fg);
}
.sr-autocomplete__item:hover { background: var(--sr-brand-50); color: var(--sr-brand-800); }
.somos-rpps-app[data-theme='dark'] .sr-autocomplete__item:hover { background: rgba(96,165,250,.12); color: var(--sr-brand-200); }
.sr-autocomplete__uf {
	font-size: 11px;
	font-weight: 700;
	color: var(--sr-fg-subtle);
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	padding: 2px 8px;
}
.sr-autocomplete__empty {
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	box-shadow: var(--sr-shadow-sm);
	padding: 12px;
	color: var(--sr-fg-subtle);
	font-size: 13px;
	z-index: 40;
}

.sr-checkbox {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--sr-fg-muted); font-size: 14px;
	cursor: pointer;
}
.sr-checkbox input { accent-color: var(--sr-brand-700); width: 16px; height: 16px; }

.sr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 18px;
	border-radius: var(--sr-radius-md);
	font-weight: 600; font: inherit; font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition), transform 80ms ease;
}
.sr-btn:active { transform: translateY(1px); }
.sr-btn--primary { background: var(--sr-brand-700); color: #fff; }
.sr-btn--primary:hover { background: var(--sr-brand-800); }
.sr-btn--ghost { background: transparent; color: var(--sr-fg-muted); border-color: var(--sr-border); }
.sr-btn--ghost:hover { background: var(--sr-bg); color: var(--sr-fg); }
.sr-btn--block { width: 100%; }
.sr-btn[disabled] { opacity: .65; cursor: not-allowed; }

.sr-alert {
	border-radius: var(--sr-radius-md);
	padding: 12px 14px;
	font-size: 14px;
	margin-bottom: 14px;
	border: 1px solid transparent;
}
.sr-alert--error {
	background: rgba(220, 38, 38, .08);
	border-color: rgba(220, 38, 38, .25);
	color: var(--sr-danger);
}
.sr-alert--success {
	background: rgba(22, 163, 74, .08);
	border-color: rgba(22, 163, 74, .25);
	color: var(--sr-success);
}

.sr-strength { display: flex; gap: 4px; margin-top: 6px; }
.sr-strength__bar {
	flex: 1; height: 5px; border-radius: 4px; background: var(--sr-border);
	transition: background var(--sr-transition);
}
.sr-strength__bar.is-on-1 { background: #f87171; }
.sr-strength__bar.is-on-2 { background: #fbbf24; }
.sr-strength__bar.is-on-3 { background: #22c55e; }
.sr-strength__bar.is-on-4 { background: #16a34a; }

/* ============================================================
   FRONT FOOTER (Auth)
   ============================================================ */
.sr-auth__footer {
	text-align: center;
	margin-top: 18px;
	color: var(--sr-fg-subtle);
	font-size: 12px;
	display: grid; gap: 4px;
}
.sr-auth__footer strong { color: var(--sr-fg-muted); }

/* Quick controls in auth (theme toggle) */
.sr-auth__controls {
	position: absolute;
	top: 18px; right: 22px;
	z-index: 5;
	display: flex; gap: 8px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tablet portrait & abaixo: sidebar vira drawer */
@media (max-width: 1024px) {
	.sr-shell {
		grid-template-columns: 1fr;
		grid-template-rows: auto var(--sr-topbar-h) 1fr;
		grid-template-areas:
			'ticker'
			'topbar'
			'main';
	}
	.sr-ticker__inner { padding: 0 14px; }
	.sr-ticker__chip { font-size: 12.5px; padding: 5px 12px; }
	.sr-ticker__wxtemp { font-size: 14px; }
	.sr-ticker__wxcity { font-size: 11px; }
	.sr-sidebar {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		width: var(--sr-sidebar-w-expanded);
		transform: translateX(-100%);
		transition: transform var(--sr-transition);
		z-index: 60;
		box-shadow: var(--sr-shadow-lg);
	}
	.somos-rpps-app[data-mobilemenu='open'] .sr-sidebar {
		transform: translateX(0);
	}
	.sr-mobile-overlay {
		position: fixed; inset: 0;
		background: var(--sr-overlay);
		z-index: 55;
		opacity: 0; pointer-events: none;
		transition: opacity var(--sr-transition);
	}
	.somos-rpps-app[data-mobilemenu='open'] .sr-mobile-overlay {
		opacity: 1; pointer-events: auto;
	}
	.somos-rpps-app[data-menu='collapsed'] .sr-sidebar {
		width: var(--sr-sidebar-w-expanded); /* no mobile sempre expandido quando aberto */
	}
}

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

@media (max-width: 720px) {
	.sr-main { padding: 18px 14px; }
	.sr-topbar { padding: 0 14px; }
	.sr-auth__card { padding: 24px; border-radius: var(--sr-radius-lg); }
}

@media (max-width: 420px) {
	.sr-topbar__right .sr-iconbtn:not(.is-essential) { display: none; }
}

/* ============================================================
   AUTH — ESTADOS DE VERIFICAÇÃO / "ENVIAMOS O LINK"
   ------------------------------------------------------------
   Reutiliza o card central do .sr-auth__card para os fluxos
   de pós-cadastro: "verifique seu e-mail", "confirme seu e-mail"
   (device diferente) e banner de "link expirado".
   ============================================================ */
.sr-auth__sent {
	text-align: center;
}
.sr-auth__sent-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	margin: 0 auto 14px;
	box-shadow: inset 0 0 0 1px var(--sr-brand-100);
}
.somos-rpps-app[data-theme='dark'] .sr-auth__sent-icon {
	background: rgba(96,165,250,.14);
	color: var(--sr-brand-200);
	box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.sr-auth__sent-icon svg { width: 30px; height: 30px; }
.sr-auth__sent-icon--alert {
	background: rgba(217, 119, 6, .12);
	color: var(--sr-warning);
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .25);
}

.sr-auth__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.sr-auth__alert {
	margin-bottom: 18px;
}

/* Dicas (lista pedagógica curta) */
.sr-tips {
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 14px 16px;
	text-align: left;
	margin-top: 6px;
}
.sr-tips__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--sr-fg);
	margin-bottom: 6px;
}
.sr-tips__list {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: var(--sr-fg-muted);
	line-height: 1.55;
}
.sr-tips__list strong { color: var(--sr-fg); }

/* Alerta amarelo (link expirado) */
.sr-alert--warning {
	background: rgba(217, 119, 6, .10);
	border-color: rgba(217, 119, 6, .25);
	color: #92400e;
}
.somos-rpps-app[data-theme='dark'] .sr-alert--warning {
	color: #fbbf24;
	background: rgba(245, 158, 11, .12);
	border-color: rgba(245, 158, 11, .25);
}

/* Overlay de verificação do magic link (full-viewport) */
.sr-verifying {
	position: fixed;
	inset: 0;
	background: var(--sr-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
}
.sr-verifying__inner {
	text-align: center;
	color: var(--sr-fg-muted);
	font-family: 'Inter', sans-serif;
}
.sr-verifying__inner p { margin-top: 6px; font-size: 14px; }

/* ============================================================
   ONBOARDING — PRIMEIRO ACESSO (5 ETAPAS)
   ============================================================ */
.sr-onboarding {
	min-height: 100vh;
	background: var(--sr-bg);
	color: var(--sr-fg);
	display: flex;
	flex-direction: column;
}

.sr-onboarding__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 22px;
	background: var(--sr-bg-elev);
	border-bottom: 1px solid var(--sr-border);
}
.sr-onboarding__brand img { height: 36px; width: auto; }
.sr-onboarding__welcome {
	color: var(--sr-fg-muted);
	font-size: 14px;
}
.sr-onboarding__welcome strong { color: var(--sr-fg); font-weight: 600; }

/* Barra de progresso superior + stepper */
.sr-onboarding__progress {
	background: var(--sr-bg-elev);
	border-bottom: 1px solid var(--sr-border);
	padding: 16px 22px 22px;
	position: relative;
}
.sr-onboarding__progress-track {
	height: 4px;
	background: var(--sr-border);
	border-radius: 999px;
	overflow: hidden;
	max-width: 880px;
	margin: 0 auto 16px;
}
.sr-onboarding__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--sr-brand-600), var(--sr-brand-400));
	border-radius: 999px;
	transition: width 360ms cubic-bezier(.4, 0, .2, 1);
}
.sr-onboarding__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
.sr-onboarding__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--sr-fg-subtle);
	font-size: 12.5px;
	text-align: center;
	transition: color var(--sr-transition);
}
.sr-onboarding__step-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sr-bg);
	border: 1.5px solid var(--sr-border);
	color: var(--sr-fg-subtle);
	font-weight: 700;
	font-size: 13px;
	transition: background var(--sr-transition), color var(--sr-transition), border-color var(--sr-transition), transform 220ms ease;
}
.sr-onboarding__step-dot svg { width: 16px; height: 16px; }
.sr-onboarding__step-label {
	font-weight: 500;
	letter-spacing: .005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.sr-onboarding__step.is-current { color: var(--sr-fg); font-weight: 600; }
.sr-onboarding__step.is-current .sr-onboarding__step-dot {
	background: var(--sr-brand-700);
	color: #fff;
	border-color: var(--sr-brand-700);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
	transform: scale(1.05);
}
.sr-onboarding__step.is-done { color: var(--sr-fg-muted); }
.sr-onboarding__step.is-done .sr-onboarding__step-dot {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	border-color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-onboarding__step.is-done .sr-onboarding__step-dot {
	background: rgba(96,165,250,.14);
	color: var(--sr-brand-200);
	border-color: rgba(96,165,250,.3);
}

/* Card principal */
.sr-onboarding__main {
	flex: 1;
	padding: 28px 22px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.sr-onboarding__card {
	width: 100%;
	max-width: 860px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-xl);
	box-shadow: var(--sr-shadow-md);
	padding: 32px 36px;
}
.sr-onboarding__footer {
	padding: 0 22px 24px;
}

/* Cabeçalho e ações de cada step */
.sr-ob-step__header { text-align: center; margin-bottom: 22px; }
.sr-ob-step__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.015em;
	margin: 0 0 6px;
}
.sr-ob-step__subtitle { color: var(--sr-fg-muted); margin: 0; }
.sr-ob-step__subtitle strong { color: var(--sr-fg); font-weight: 600; }

.sr-ob-step__actions {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.sr-btn--xl {
	height: 54px;
	font-size: 15px;
	border-radius: var(--sr-radius-md);
	padding: 0 22px;
	letter-spacing: -.005em;
}

/* Transição entre steps */
.sr-ob-fade-enter-active,
.sr-ob-fade-leave-active { transition: opacity 280ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1); }
.sr-ob-fade-enter-from { opacity: 0; transform: translateY(10px); }
.sr-ob-fade-leave-to   { opacity: 0; transform: translateY(-6px); }

.sr-ob-form { display: flex; flex-direction: column; gap: 8px; }

/* ----- Step 1: Termos ----- */
.sr-ob-step--terms { position: relative; }
.sr-terms {
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	height: 360px;
	overflow-y: auto;
	scroll-behavior: smooth;
	position: relative;
	padding: 0;
}
.sr-terms:focus-visible {
	outline: 2px solid var(--sr-brand-500);
	outline-offset: 2px;
}
.sr-terms__inner { padding: 22px 26px; }
.sr-terms__main-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--sr-fg);
}
.sr-terms__version {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--sr-fg-subtle);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sr-terms__part {
	margin: 22px 0 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sr-brand-700);
}
.somos-rpps-app[data-theme='dark'] .sr-terms__part { color: var(--sr-brand-300); }
.sr-terms__section { margin: 0 0 14px; }
.sr-terms__section-title {
	font-size: 14.5px;
	font-weight: 700;
	margin: 14px 0 6px;
	color: var(--sr-fg);
}
.sr-terms__paragraph {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sr-fg-muted);
}
.sr-terms__closing {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px dashed var(--sr-border);
	color: var(--sr-fg-subtle);
	font-size: 12.5px;
}
.sr-terms__closing p { margin: 0 0 2px; }

/* Botão "ir até o final" */
.sr-terms__jump-wrap {
	display: flex;
	justify-content: center;
	margin-top: 14px;
	min-height: 40px;
}
.sr-terms__jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-brand-700);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 13.5px;
	border: 0;
	box-shadow: var(--sr-shadow-md);
	cursor: pointer;
	transition: background var(--sr-transition), transform 120ms ease, box-shadow var(--sr-transition);
}
.sr-terms__jump:hover { background: var(--sr-brand-800); box-shadow: var(--sr-shadow-lg); }
.sr-terms__jump:active { transform: translateY(1px); }
.sr-terms__jump svg { width: 16px; height: 16px; }
/* Variante alinhada ao centro do header (substitui o posicionamento absoluto antigo) */
.sr-terms__jump--top { position: static; }

.sr-fade-enter-active, .sr-fade-leave-active { transition: opacity 220ms ease, transform 220ms ease; }
.sr-fade-enter-from, .sr-fade-leave-to { opacity: 0; transform: translateY(4px); }

.sr-checkbox--lg {
	font-size: 14.5px;
	color: var(--sr-fg);
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 12px 14px;
	gap: 10px;
	cursor: default;
	transition: border-color var(--sr-transition), background var(--sr-transition);
}
.sr-checkbox--lg.is-disabled { opacity: .8; }
.sr-checkbox--lg input { width: 18px; height: 18px; }

/* ----- Step 2: Senha - checagens em tempo real ----- */
.sr-pwchecks {
	margin-top: 6px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 14px 16px;
}
.sr-pwchecks__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--sr-fg);
	margin-bottom: 8px;
}
.sr-pwchecks__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
@media (min-width: 560px) {
	.sr-pwchecks__list { grid-template-columns: 1fr 1fr; }
}
.sr-pwcheck {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--sr-fg-muted);
	transition: color var(--sr-transition);
}
.sr-pwcheck strong { color: var(--sr-fg); }
/* Ícone (círculo + checkmark SVG) — garante alinhamento perfeito do "tick" */
.sr-pwcheck__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: var(--sr-bg-elev);
	border: 1.5px solid var(--sr-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: background var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition);
}
.sr-pwcheck__icon svg {
	width: 12px;
	height: 12px;
	display: block;
	stroke-width: 3.2;
}
.sr-pwcheck.is-ok { color: var(--sr-success); }
.sr-pwcheck.is-ok .sr-pwcheck__icon {
	background: var(--sr-success);
	border-color: var(--sr-success);
	color: #fff;
}
.sr-pwcheck.is-pending { opacity: .6; }

/* Container externo (sem moldura) para "as duas senhas precisam coincidir".
 * No estado inicial (pending) usamos cor de texto principal (preto/foreground)
 * em vez do cinza-muted para destacar a regra como instrução obrigatória. */
.sr-pwmatch {
	margin-top: 12px;
	padding: 4px 4px 0;
	color: var(--sr-fg);
	opacity: 1;
}
.sr-pwmatch.is-pending { opacity: 1; color: var(--sr-fg); }
.sr-pwmatch.is-ok { color: var(--sr-success); }

/* ----- Step 3: Localização ----- */
.sr-input--xl {
	height: 54px;
	font-size: 15.5px;
	padding: 0 16px;
}
.sr-autocomplete--big .sr-autocomplete__list { max-height: 320px; }

.sr-location-chip {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	padding: 14px 16px;
	background: var(--sr-brand-50);
	border: 1px solid var(--sr-brand-200);
	border-radius: var(--sr-radius-md);
	color: var(--sr-brand-800);
}
.somos-rpps-app[data-theme='dark'] .sr-location-chip {
	background: rgba(96,165,250,.12);
	border-color: rgba(96,165,250,.28);
	color: var(--sr-brand-200);
}
.sr-location-chip svg { width: 22px; height: 22px; }
.sr-location-chip__name { font-weight: 700; font-size: 15px; }
.sr-location-chip__uf { font-size: 13px; opacity: .85; margin-top: 2px; }

/* ----- Step 4: WhatsApp + opt-in -----
 * Caixa custom (28px) com SVG centralizado — substitui o checkbox nativo
 * por uma marca grande, alinhada à 1ª linha da label, com micro-animação
 * de "preenchimento" ao marcar (escala + cor + tick).
 */
.sr-optin {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 16px 18px;
	background: var(--sr-bg);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	cursor: pointer;
	transition: border-color var(--sr-transition), background var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-optin:hover {
	border-color: var(--sr-brand-300);
	background: var(--sr-brand-50, #eff6ff);
}
.sr-optin.is-checked {
	border-color: var(--sr-brand-500, #3b82f6);
	background: var(--sr-brand-50, #eff6ff);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .08);
}
.sr-optin__box {
	position: relative;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sr-optin__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.sr-optin__visual {
	position: absolute;
	inset: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #fff;
	border: 2px solid var(--sr-border-strong, #cbd5e1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: background var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition), transform 120ms ease;
}
.sr-optin__visual svg {
	width: 18px;
	height: 18px;
	display: block;
	stroke-width: 3.4;
	transform: scale(.6);
	transition: transform 160ms cubic-bezier(.34, 1.56, .64, 1);
}
.sr-optin:hover .sr-optin__visual { border-color: var(--sr-brand-400, #60a5fa); }
.sr-optin.is-checked .sr-optin__visual {
	background: var(--sr-brand-600, #2563eb);
	border-color: var(--sr-brand-600, #2563eb);
	color: #fff;
}
.sr-optin.is-checked .sr-optin__visual svg { transform: scale(1); }
.sr-optin__input:focus-visible + .sr-optin__visual {
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}
.sr-optin__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-optin__title {
	font-weight: 600;
	color: var(--sr-fg);
	font-size: 14.5px;
	line-height: 1.45;
}
.sr-optin__sub {
	color: var(--sr-fg-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ----- Step 5: Área + Função -----
 * grid-auto-rows: 1fr garante que TODAS as caixas tenham a mesma altura,
 * independentemente do tamanho do texto. align-items: stretch + height: 100%
 * no card faz cada botão preencher a célula do grid.
 * A área "Outros" (.is-fullwidth) ocupa todas as colunas do grid no desktop.
 */
.sr-areacards {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 12px;
	align-items: stretch;
}
@media (min-width: 640px)  { .sr-areacards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sr-areacards { grid-template-columns: repeat(3, 1fr); } }

.sr-areacard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	height: 100%;
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	background: var(--sr-bg);
	color: var(--sr-fg);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--sr-transition), background var(--sr-transition), transform 120ms ease, box-shadow var(--sr-transition);
	font: inherit;
}
.sr-areacard:hover {
	border-color: var(--sr-brand-300);
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-areacard:hover {
	background: rgba(96,165,250,.10);
	border-color: rgba(96,165,250,.32);
}
.sr-areacard.is-active {
	border-color: var(--sr-brand-700);
	background: var(--sr-brand-50);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.somos-rpps-app[data-theme='dark'] .sr-areacard.is-active {
	background: rgba(96,165,250,.14);
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 3px rgba(96,165,250,.22);
}
.sr-areacard:active { transform: translateY(1px); }

.sr-areacard__title {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--sr-fg);
	letter-spacing: -.005em;
}
.sr-areacard__desc {
	font-size: 13px;
	color: var(--sr-fg-muted);
	line-height: 1.5;
}
.sr-areacard__check {
	position: absolute;
	top: 14px; right: 14px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--sr-brand-700);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--sr-transition), transform var(--sr-transition);
}
.sr-areacard__check svg { width: 14px; height: 14px; }
.sr-areacard.is-active .sr-areacard__check { opacity: 1; transform: scale(1); }

/* Painel inferior com busca + nuvem de tags */
.sr-rolespanel {
	margin-top: 22px;
	padding: 18px 18px 6px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
}
.sr-rolespanel__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 14px;
}
.sr-rolespanel__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sr-fg);
}
.sr-rolespanel__title em { font-style: normal; color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-rolespanel__title em { color: var(--sr-brand-300); }
.sr-rolespanel__search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	padding: 0 14px;
	width: 100%;
	height: 44px;
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-rolespanel__search:focus-within {
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}
.sr-rolespanel__search svg { width: 18px; height: 18px; color: var(--sr-fg-subtle); flex: 0 0 18px; }
.sr-rolespanel__searchinput {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--sr-fg);
	font: inherit;
	font-size: 14.5px;
	height: 42px;
	outline: none;
}

.sr-roletags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 8px;
}
.sr-roletag {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-bg-elev);
	border: 1.5px solid var(--sr-border);
	color: var(--sr-fg);
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition), transform 120ms ease;
}
.sr-roletag:hover {
	background: var(--sr-brand-50);
	border-color: var(--sr-brand-300);
	color: var(--sr-brand-800);
}
.somos-rpps-app[data-theme='dark'] .sr-roletag:hover {
	background: rgba(96,165,250,.10);
	border-color: rgba(96,165,250,.30);
	color: var(--sr-brand-200);
}
.sr-roletag.is-active {
	background: var(--sr-brand-700);
	border-color: var(--sr-brand-700);
	color: #fff;
}
.sr-roletag:active { transform: translateY(1px); }
.sr-roletags__empty {
	padding: 16px 4px 8px;
	color: var(--sr-fg-subtle);
	font-size: 13px;
}

.sr-ob-roles-enter-active,
.sr-ob-roles-leave-active { transition: opacity 280ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1); }
.sr-ob-roles-enter-from { opacity: 0; transform: translateY(6px); }
.sr-ob-roles-leave-to   { opacity: 0; transform: translateY(-4px); }

/* ----- Responsivo do onboarding ----- */
@media (max-width: 760px) {
	.sr-onboarding__topbar { padding: 12px 14px; }
	.sr-onboarding__welcome { display: none; }
	.sr-onboarding__progress { padding: 14px 14px 18px; }
	.sr-onboarding__step-label { font-size: 11px; }
	.sr-onboarding__step-dot { width: 26px; height: 26px; font-size: 12px; }
	.sr-onboarding__main { padding: 18px 14px; }
	.sr-onboarding__card { padding: 22px 18px; border-radius: var(--sr-radius-lg); }
	.sr-ob-step__title { font-size: 20px; }
	.sr-terms { height: 320px; }
	.sr-terms__inner { padding: 18px 18px; }
}

@media (max-width: 480px) {
	.sr-onboarding__steps { gap: 4px; }
	.sr-onboarding__step-label {
		max-width: 60px;
		font-size: 10.5px;
	}
}

/* ============================================================
   MODAL DE BUSCA (mobile + futura UX de busca global)
   ============================================================ */
.sr-search-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.somos-rpps-app[data-theme='dark'] .sr-search-modal { background: rgba(2, 6, 23, .65); }

.sr-search-modal__panel {
	width: 100%;
	max-width: 720px;
	margin: 16px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	box-shadow:
		0 30px 60px -20px rgba(2, 6, 23, .55),
		0 8px 20px -6px rgba(2, 6, 23, .28);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
}

.sr-search-modal__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--sr-border);
}
.sr-search-modal__bar > svg {
	width: 22px;
	height: 22px;
	color: var(--sr-fg-subtle);
	flex: 0 0 22px;
}
.sr-search-modal__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--sr-fg);
	font: inherit;
	font-size: 17px;
	height: 44px;
	outline: none;
	letter-spacing: -.005em;
}
.sr-search-modal__input::placeholder { color: var(--sr-fg-subtle); }
.sr-search-modal__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--sr-fg-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-search-modal__close:hover {
	background: var(--sr-bg);
	color: var(--sr-fg);
}
.sr-search-modal__close svg { width: 18px; height: 18px; }

.sr-search-modal__body {
	padding: 24px 22px 28px;
	overflow-y: auto;
}

.sr-search-modal__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 14px 6px 6px;
}
.sr-search-modal__empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.somos-rpps-app[data-theme='dark'] .sr-search-modal__empty-icon {
	background: rgba(96, 165, 250, .15);
	color: var(--sr-brand-300);
}
.sr-search-modal__empty-icon svg { width: 28px; height: 28px; }
.sr-search-modal__empty-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--sr-fg);
	letter-spacing: -.01em;
	margin-bottom: 6px;
}
.sr-search-modal__empty-sub {
	font-size: 13.5px;
	color: var(--sr-fg-muted);
	line-height: 1.55;
	max-width: 460px;
}

.sr-search-modal__pending {
	padding: 18px 4px;
	text-align: center;
}
.sr-search-modal__pending-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--sr-fg);
	margin-bottom: 6px;
}
.sr-search-modal__pending-title em { font-style: normal; color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-search-modal__pending-title em { color: var(--sr-brand-300); }
.sr-search-modal__pending-sub {
	font-size: 13px;
	color: var(--sr-fg-muted);
}

/* Transição: o overlay sobe suavemente do topo */
.sr-search-enter-active,
.sr-search-leave-active { transition: opacity 200ms ease; }
.sr-search-enter-from,
.sr-search-leave-to { opacity: 0; }
.sr-search-enter-active .sr-search-modal__panel,
.sr-search-leave-active .sr-search-modal__panel {
	transition: transform 240ms cubic-bezier(.34, 1.2, .64, 1), opacity 200ms ease;
}
.sr-search-enter-from .sr-search-modal__panel,
.sr-search-leave-to   .sr-search-modal__panel {
	transform: translateY(-12px) scale(.98);
	opacity: 0;
}

/* Em telas muito pequenas, a modal vira full-bleed para máximo conforto */
@media (max-width: 520px) {
	.sr-search-modal__panel {
		margin: 0;
		max-width: 100%;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		border-top: 0;
	}
	.sr-search-modal__bar { padding: 14px 14px; }
	.sr-search-modal__input { font-size: 16px; }
	.sr-search-modal__body { padding: 22px 16px 28px; }
}

/* ============================================================
   PERFIL PROFISSIONAL — visão do dono (logado, view "profile")
   ============================================================ */

.sr-profileview {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 980px;
	margin: 0 auto;
}

/* ---------- HERO ----------
 * Fundo do hero usa o MESMO `--sr-bg-elev` das demais seções (Sobre, Temas,
 * Experiência, Redes), garantindo uniformidade visual de cor em toda a página
 * do perfil. Antes usávamos um azul suave que destoava do restante.
 */
.sr-profhero {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	box-shadow: var(--sr-shadow-sm);
	padding: 32px 32px 30px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: flex-start;
	position: relative;
}

.sr-profhero__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
	padding-top: 4px;
}
.sr-profhero__remove {
	background: transparent;
	border: 0;
	color: var(--sr-fg-muted);
	font: inherit;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--sr-radius-sm);
	transition: color var(--sr-transition), background var(--sr-transition);
}
.sr-profhero__remove:hover { color: var(--sr-danger); background: rgba(220, 38, 38, .08); }
.sr-profhero__remove svg { width: 14px; height: 14px; }

.sr-profhero__main {
	min-width: 0;
	z-index: 1;
	/* SEM padding-right aqui — qualquer reserva neste container comprimiria o
	   SlugEditor abaixo (que precisa de 100% da largura para mostrar o link
	   inteiro). A reserva de espaço para o cluster topright fica somente no
	   .sr-profhero__name (apenas o título precisa desviar da badge). */
}
/* Cluster fixo no canto superior direito do HERO INTEIRO: BADGE + ÍCONE de QR.
   Posicionado absolutamente sobre o .sr-profhero (grid externo, que tem
   position: relative), assim NÃO ocupa espaço dentro de nenhuma coluna do
   grid — o SlugEditor abaixo usa 100% da largura útil de __main. */
.sr-profhero__topright {
	position: absolute;
	top: 24px;
	right: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
}
/* Botão de QR Code/Share. */
.sr-profhero__qr {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sr-border);
	background: var(--sr-bg-elev);
	color: var(--sr-brand-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--sr-shadow-sm);
	transition: transform var(--sr-transition), color var(--sr-transition),
		background var(--sr-transition), border-color var(--sr-transition);
	flex-shrink: 0;
}
.sr-profhero__qr:hover {
	transform: translateY(-1px);
	color: #fff;
	background: var(--sr-brand-700);
	border-color: var(--sr-brand-700);
}
.sr-profhero__qr:focus-visible {
	outline: 3px solid var(--sr-brand-500);
	outline-offset: 2px;
}
.sr-profhero__qr svg { width: 20px; height: 20px; }
.somos-rpps-app[data-theme='dark'] .sr-profhero__qr { color: var(--sr-brand-300); }

.sr-profhero__name {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sr-fg);
	margin: 0 0 4px;
	line-height: 1.15;
	/* Reserva pra que o nome (e somente o nome) não passe por baixo do cluster
	   topright. Cargo, cidade e SlugEditor abaixo não precisam dessa reserva
	   porque o cluster está no TOPO do card. */
	padding-right: 240px;
	/* Para acomodar o lápis ao lado direito do texto sem quebrar layout. */
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.sr-profhero__name-text { display: inline; }
/* Lápis ao lado do NOME — mesmo padrão do .sr-profhero__role-edit, com
   tamanho um pouco maior (combina com o título 28px) e estado .is-locked
   para visualmente comunicar o throttle de 30 dias. */
.sr-profhero__name-edit {
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--sr-brand-700);
	opacity: .55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--sr-transition), background var(--sr-transition);
}
.sr-profhero__name:hover .sr-profhero__name-edit { opacity: 1; }
.sr-profhero__name-edit:hover { background: var(--sr-brand-50); opacity: 1; }
.sr-profhero__name-edit:focus-visible { outline: 2px solid var(--sr-brand-500); outline-offset: 2px; opacity: 1; }
.sr-profhero__name-edit svg { width: 16px; height: 16px; }
.sr-profhero__name-edit.is-locked {
	cursor: not-allowed;
	color: var(--sr-fg-subtle);
	opacity: .45;
}
.sr-profhero__name-edit.is-locked:hover { background: transparent; opacity: .45; }
.somos-rpps-app[data-theme='dark'] .sr-profhero__name-edit { color: var(--sr-brand-300); }
.somos-rpps-app[data-theme='dark'] .sr-profhero__name-edit:hover { background: rgba(96,165,250,.14); }
.somos-rpps-app[data-theme='dark'] .sr-profhero__name-edit.is-locked { color: var(--sr-fg-subtle); }
.sr-profhero__role {
	font-size: 16px;
	font-weight: 600;
	color: var(--sr-brand-700);
	margin-bottom: 4px;
	/* IMPORTANTE: usar flex BLOCK-LEVEL (não inline-flex). Quando este
	   elemento é inline-level e o .sr-profhero__city seguinte TAMBÉM é
	   inline-level, eles encostam na mesma linha — o cargo e a cidade
	   precisam, sempre, viver em LINHAS SEPARADAS. width: fit-content
	   garante que o cluster (cargo + lápis) não estique até a borda. */
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
}
.somos-rpps-app[data-theme='dark'] .sr-profhero__role { color: var(--sr-brand-300); }
.sr-profhero__role-empty { color: var(--sr-fg-muted); font-weight: 500; font-style: italic; }
/* Botão minúsculo de lápis que aparece grudado no texto do cargo — mesmo
   padrão visual usado em outros pontos do perfil (SlugEditor). Por padrão,
   só aparece com opacidade reduzida; ganha destaque no hover do bloco
   inteiro do cargo, sinalizando ao usuário que aquela linha é editável. */
.sr-profhero__role-edit {
	background: transparent;
	border: 0;
	padding: 4px;
	margin: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--sr-brand-700);
	opacity: .55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--sr-transition), background var(--sr-transition);
}
.sr-profhero__role:hover .sr-profhero__role-edit { opacity: 1; }
.sr-profhero__role-edit:hover { background: var(--sr-brand-50); opacity: 1; }
.sr-profhero__role-edit:focus-visible { outline: 2px solid var(--sr-brand-500); outline-offset: 2px; opacity: 1; }
.sr-profhero__role-edit svg { width: 14px; height: 14px; }
.somos-rpps-app[data-theme='dark'] .sr-profhero__role-edit { color: var(--sr-brand-300); }
.somos-rpps-app[data-theme='dark'] .sr-profhero__role-edit:hover { background: rgba(96,165,250,.14); }

.sr-profhero__city {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--sr-fg-muted);
	margin-bottom: 18px;
}
.sr-profhero__city svg { width: 16px; height: 16px; }
/* Quando há a linha "Membro…" logo após a cidade, reduzimos o margin-bottom
   padrão da cidade (18px → 8px) — assim a frase fica perto, sem colar. */
.sr-profhero__city:has(+ .sr-profhero__member) { margin-bottom: 8px; }
/* Linha "Membro na Somos RPPS há X tempo" — alinha com o INÍCIO do ícone
   do município (margem-esquerda zero), e cola visualmente embaixo da
   cidade. Sem `margin-top` (a cidade já tem margin-bottom natural do
   inline-flex/line-height). */
.sr-profhero__member {
	font-size: 13px;
	color: var(--sr-fg-subtle);
	margin: 0 0 16px;
	line-height: 1.35;
}
@media (max-width: 720px) {
	.sr-profhero__member { text-align: center; }
}
.sr-profhero__member strong { color: var(--sr-fg-muted); font-weight: 600; }
.somos-rpps-app[data-theme='dark'] .sr-profhero__member strong { color: var(--sr-fg); }
.sr-profhero__city-empty { color: var(--sr-fg-subtle); font-style: italic; }
/* Botão de lápis para editar o município — mesmo padrão visual do
   .sr-profhero__role-edit (estado discreto que ganha destaque no hover
   da linha inteira). Mantém consistência visual: qualquer campo do hero
   que pode ser editado tem o mesmo affordance. */
.sr-profhero__city-edit {
	background: transparent;
	border: 0;
	padding: 4px;
	margin: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--sr-brand-700);
	opacity: .55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--sr-transition), background var(--sr-transition);
}
.sr-profhero__city:hover .sr-profhero__city-edit { opacity: 1; }
.sr-profhero__city-edit:hover { background: var(--sr-brand-50); opacity: 1; }
.sr-profhero__city-edit:focus-visible { outline: 2px solid var(--sr-brand-500); outline-offset: 2px; opacity: 1; }
.sr-profhero__city-edit svg { width: 14px; height: 14px; }
.somos-rpps-app[data-theme='dark'] .sr-profhero__city-edit { color: var(--sr-brand-300); }
.somos-rpps-app[data-theme='dark'] .sr-profhero__city-edit:hover { background: rgba(96,165,250,.14); }

/* ---------- AVATAR (utilitário) ----------
 * Estrutura:
 *   .sr-profile-avatar           (wrapper, overflow VISIBLE — permite que o
 *                                  ícone de câmera apareça transbordando)
 *     .sr-profile-avatar__inner  (círculo com overflow:hidden — clipa a foto)
 *     .sr-profile-avatar__camera (badge externo, posicionado por cima)
 *
 * A cor de fundo do círculo de iniciais é ÚNICA (azul da marca) para todos
 * os usuários — não usamos mais hash → matiz HSL.
 */
.sr-profile-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	flex-shrink: 0;
}
.sr-profile-avatar--md { width: 64px;  height: 64px;  font-size: 20px; }
.sr-profile-avatar--lg { width: 112px; height: 112px; font-size: 38px; }
.sr-profile-avatar--xl { width: 148px; height: 148px; font-size: 50px; }

.sr-profile-avatar__inner {
	width: 100%; height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sr-brand-600, var(--sr-brand-500)), var(--sr-brand-800, var(--sr-brand-700)));
	color: #fff;
	/* Sem border: a "casquinha" colorida que aparecia ao redor da foto era o
	   fundo gradiente do __inner vazando nos pixels do anti-aliasing do clip
	   redondo. Para foto, anulamos esse fundo abaixo (.has-image). Para
	   iniciais, o gradiente é parte do design. */
	box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .25);
}
/* Quando o usuário tem foto, removemos COMPLETAMENTE o fundo do círculo. A
   foto cobre 100×100% e qualquer pixel de tinta atrás dela só serviria pra
   criar a falsa "borda fininha" reportada. Sem fundo, sem ring fantasma. */
.sr-profile-avatar.has-image .sr-profile-avatar__inner { background: transparent; }
.sr-profile-avatar__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* translateZ(0) força compositing em GPU — elimina o último resquício de
	   serrilhado nas bordas em alguns navegadores (Chromium em particular). */
	transform: translateZ(0);
}
.sr-profile-avatar__initials {
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}
.sr-profile-avatar__input {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}
.sr-profile-avatar.is-editable {
	cursor: pointer;
	transition: transform var(--sr-transition);
}
.sr-profile-avatar.is-editable:hover { transform: translateY(-1px); }
/* Em dispositivos touch, desabilita o transform do hover: (1) o "hover"
   nesses devices é só um flash instantâneo durante o tap; (2) o transform
   cria um containing block para position:fixed dos filhos (o action sheet
   ficaria ancorado ao avatar em vez do viewport durante esse flash). */
@media (hover: none) and (pointer: coarse) {
	.sr-profile-avatar.is-editable:hover { transform: none; }
}
.sr-profile-avatar.is-editable:hover .sr-profile-avatar__inner { box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .35); }
.sr-profile-avatar.is-editable:focus-visible {
	outline: none;
}
.sr-profile-avatar.is-editable:focus-visible .sr-profile-avatar__inner {
	outline: 3px solid var(--sr-brand-500);
	outline-offset: 2px;
}

/* Badge da câmera — fica POR FORA do círculo do avatar (z-index e overflow:visible
   do wrapper garantem que apareça inteiro, sem ser cortado). */
.sr-profile-avatar__camera {
	position: absolute;
	right: 0; bottom: 4px;
	width: 34px; height: 34px;
	background: var(--sr-brand-700);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--sr-bg-elev);
	box-shadow: var(--sr-shadow-sm);
	z-index: 2;
	pointer-events: none; /* o clique vai para o wrapper inteiro */
}
.sr-profile-avatar--xl .sr-profile-avatar__camera { width: 42px; height: 42px; right: 2px; bottom: 6px; }
.sr-profile-avatar__camera svg { width: 16px; height: 16px; }
.sr-profile-avatar--xl .sr-profile-avatar__camera svg { width: 19px; height: 19px; }

.sr-profile-avatar__busy {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, .45);
	display: flex; align-items: center; justify-content: center;
}
.sr-profile-avatar__busy .somos-rpps-spinner {
	width: 28px; height: 28px; border-width: 3px; margin: 0;
	border-color: rgba(255,255,255,.25);
	border-top-color: #fff;
}

/* ---------- SLUG EDITOR ---------- */
.sr-sluged {
	margin-top: 14px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 14px 16px;
}
.somos-rpps-app[data-theme='dark'] .sr-sluged { background: var(--sr-bg-elev-2); }

.sr-sluged__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.sr-sluged__url {
	font-family: 'Inter', monospace;
	font-size: 14.5px;
	color: var(--sr-fg-muted);
	flex: 1 1 0; min-width: 0;
	/* O link público SEMPRE ocupa uma única linha. Quando o slug é mais longo
	   do que a faixa disponível (caso comum em mobile ou em nomes longos),
	   completa com reticências em vez de quebrar para a próxima linha. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-sluged__slug { color: var(--sr-brand-700); font-weight: 700; }
.somos-rpps-app[data-theme='dark'] .sr-sluged__slug { color: var(--sr-brand-300); }
.sr-sluged__actions { display: flex; gap: 4px; }
.sr-iconbtn--sm { width: 32px; height: 32px; border-radius: var(--sr-radius-sm); }
.sr-iconbtn--sm svg { width: 16px; height: 16px; }
/* Botão de compartilhar no WhatsApp — ganha verde no hover para sinalizar
   visualmente a marca, sem inserir a cor verde como destaque permanente. */
.sr-iconbtn--whatsapp:hover {
	background: rgba(37, 211, 102, .14);
	color: #1f8a4a;
}
.somos-rpps-app[data-theme='dark'] .sr-iconbtn--whatsapp:hover {
	background: rgba(37, 211, 102, .18);
	color: #4ade80;
}
.sr-sluged__error { margin-top: 6px; font-size: 12.5px; color: var(--sr-danger); }
.sr-sluged__edit { gap: 10px; }
.sr-sluged__input-wrap {
	flex: 1; min-width: 0;
	display: flex; align-items: center;
	background: var(--sr-input-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 0 10px;
}
.sr-sluged__prefix {
	font-family: 'Inter', monospace;
	font-size: 13px;
	color: var(--sr-fg-subtle);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50%;
}
.sr-sluged__input {
	flex: 1; min-width: 80px;
	border: 0; background: transparent; color: var(--sr-fg);
	font: inherit; font-size: 14px;
	padding: 9px 0;
	outline: none;
}
.sr-btn--sm {
	padding: 6px 12px;
	font-size: 13px;
	min-height: 34px;
}

/* ---------- PILLS (status: publicado, rascunho, vazio) ---------- */
.sr-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--sr-radius-pill);
	border: 1px solid transparent;
}
.sr-pill svg { width: 12px; height: 12px; }
.sr-pill--published { background: rgba(22, 163, 74, .12); color: #16a34a; border-color: rgba(22, 163, 74, .2); }
.sr-pill--draft { background: rgba(217, 119, 6, .12); color: #d97706; border-color: rgba(217, 119, 6, .2); }
.sr-pill--empty { background: var(--sr-bg); color: var(--sr-fg-subtle); border-color: var(--sr-border); }
.somos-rpps-app[data-theme='dark'] .sr-pill--published { background: rgba(34, 197, 94, .18); color: #4ade80; }
.somos-rpps-app[data-theme='dark'] .sr-pill--draft { background: rgba(245, 158, 11, .18); color: #fbbf24; }

/* ---------- PROFILE CARDS (sobre, experiência, redes, interesses) ---------- */
.sr-profcard {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	box-shadow: var(--sr-shadow-sm);
	padding: 22px 24px 20px;
}
.sr-profcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}
.sr-profcard__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--sr-fg);
	letter-spacing: -.01em;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sr-profcard__icon {
	width: 30px; height: 30px;
	border-radius: var(--sr-radius-md);
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.somos-rpps-app[data-theme='dark'] .sr-profcard__icon {
	background: rgba(96, 165, 250, .12); color: var(--sr-brand-300);
}
.sr-profcard__icon svg { width: 16px; height: 16px; }

.sr-profcard__status { flex-shrink: 0; }

.sr-profcard__helper {
	font-size: 13px;
	color: var(--sr-fg-muted);
	margin: 0 0 12px;
}

.sr-profcard__textwrap { position: relative; }
.sr-profcard__textarea {
	width: 100%;
	background: var(--sr-input-bg);
	color: var(--sr-fg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 12px 14px;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.55;
	resize: vertical;
	min-height: 130px;
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-profcard__textarea:focus {
	outline: none;
	border-color: var(--sr-brand-500);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}
.sr-profcard__counter {
	position: absolute;
	right: 12px; bottom: 12px;
	font-size: 11.5px;
	color: var(--sr-fg-subtle);
	background: var(--sr-bg-elev);
	padding: 2px 6px;
	border-radius: var(--sr-radius-xs);
	pointer-events: none;
}
.sr-profcard__counter.is-warn { color: var(--sr-warning); }

.sr-profcard__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.sr-link {
	background: transparent;
	border: 0;
	color: var(--sr-fg-muted);
	font: inherit; font-size: 13.5px;
	cursor: pointer;
	position: relative;
	padding: 6px 4px;
	transition: color var(--sr-transition);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: transparent;
}
.sr-link:hover { color: var(--sr-brand-700); text-decoration-color: currentColor; }
.somos-rpps-app[data-theme='dark'] .sr-link:hover { color: var(--sr-brand-300); }
.sr-link[disabled] { opacity: .55; cursor: not-allowed; }

.sr-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: var(--sr-fg);
	color: var(--sr-bg-elev);
	font-size: 12px;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: var(--sr-radius-sm);
	white-space: normal;
	width: 240px;
	text-align: center;
	box-shadow: var(--sr-shadow-md);
	z-index: 100;
	pointer-events: none;
}
.sr-tooltip::after {
	content: '';
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--sr-fg);
}

.sr-btn--md { padding: 10px 18px; font-size: 14px; min-height: 40px; }

/* ---------- INTERESTS CLOUD ---------- */
.sr-intcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 4px;
}
.sr-inttag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sr-bg);
	color: var(--sr-fg-muted);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	padding: 7px 14px 7px 12px;
	font: inherit; font-size: 13.5px; font-weight: 500;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition), border-color var(--sr-transition), transform var(--sr-transition);
	user-select: none;
}
.sr-inttag:hover {
	background: var(--sr-brand-50);
	border-color: var(--sr-brand-300);
	color: var(--sr-brand-800);
	transform: translateY(-1px);
}
.somos-rpps-app[data-theme='dark'] .sr-inttag:hover {
	background: rgba(96, 165, 250, .12);
	border-color: rgba(96, 165, 250, .3);
	color: var(--sr-brand-200);
}
.sr-inttag.is-active {
	background: var(--sr-brand-700);
	color: #fff;
	border-color: var(--sr-brand-700);
}
.sr-inttag.is-active:hover {
	background: var(--sr-brand-800);
	border-color: var(--sr-brand-800);
	color: #fff;
}
.sr-inttag__check {
	width: 16px; height: 16px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sr-border);
	color: transparent;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-inttag__check svg { width: 11px; height: 11px; }
.sr-inttag.is-active .sr-inttag__check { background: #fff; color: var(--sr-brand-700); }
.sr-inttag.is-saving { opacity: .85; }
.sr-intcloud--readonly .sr-inttag { cursor: default; pointer-events: none; }

/* ---------- SOCIALS ---------- */
.sr-socials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 16px;
	margin-top: 6px;
}
.sr-social { display: flex; flex-direction: column; gap: 6px; }
.sr-social__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sr-fg);
}
.sr-social__input {
	font-size: 14px;
	padding: 9px 12px;
	min-height: 38px;
	width: 100%;
	background: var(--sr-input-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	color: var(--sr-fg);
	font-family: inherit;
	transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-social__input:focus { outline: none; border-color: var(--sr-brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
/* Preview "mágico" do que será salvo. Aparece logo abaixo do input, na cor da
   marca, sinalizando que o sistema entendeu o input do usuário. Quebra suave
   para wrap quando o handle é longo. */
.sr-social__preview {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--sr-brand-700);
	font-family: 'Inter', monospace;
	line-height: 1.3;
	word-break: break-all;
	padding-top: 2px;
}
.sr-social__preview svg { width: 12px; height: 12px; flex-shrink: 0; }
.somos-rpps-app[data-theme='dark'] .sr-social__preview { color: var(--sr-brand-300); }

@media (max-width: 780px) {
	.sr-socials { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.sr-socials { grid-template-columns: 1fr; }
}

/* ---------- PUBLISH VISIBILITY MODAL extras ---------- */
.sr-pubvis { margin: 0 0 4px; }
.sr-pubvis__toggle {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: var(--sr-bg);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	cursor: pointer;
	transition: border-color var(--sr-transition), background var(--sr-transition);
}
.sr-pubvis__toggle:hover { border-color: var(--sr-brand-400); }
.sr-pubvis__toggle.is-on { border-color: var(--sr-brand-500); background: var(--sr-brand-50); }
.somos-rpps-app[data-theme='dark'] .sr-pubvis__toggle.is-on { background: rgba(96, 165, 250, .08); }
.sr-pubvis__toggle input[type="checkbox"] {
	position: absolute; opacity: 0; pointer-events: none;
}
.sr-pubvis__switch {
	flex-shrink: 0;
	width: 44px; height: 26px;
	background: var(--sr-border-strong);
	border-radius: var(--sr-radius-pill);
	position: relative;
	transition: background var(--sr-transition);
	margin-top: 2px;
}
.sr-pubvis__switch::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	transition: transform var(--sr-transition);
}
.sr-pubvis__toggle input:checked ~ .sr-pubvis__switch {
	background: var(--sr-brand-600);
}
.sr-pubvis__toggle input:checked ~ .sr-pubvis__switch::after {
	transform: translateX(18px);
}
.sr-pubvis__caption {
	display: flex; flex-direction: column;
	font-size: 14px; color: var(--sr-fg);
	gap: 4px;
}
.sr-pubvis__caption small { font-size: 12.5px; color: var(--sr-fg-muted); }

.sr-modal__card--md { max-width: 540px; }
/* Editor de NOME — caixa um pouco mais estreita pra dar peso visual ao
   aviso de 30 dias (que é o ponto mais importante da modal). */
.sr-modal__card--name { max-width: 500px; }
/* Mini confirmação compacta (sobreposta ao editor de nome). */
.sr-modal__card--mini { max-width: 440px; }
/* Subtítulo que vive DENTRO do .sr-modal__head (em vez de fora dele): zera
   margens horizontais herdadas do default. Mantém o `mailto:` legível. */
.sr-modal__subtitle--inline { margin: 6px 0 0; }
.sr-modal__subtitle--inline a { color: var(--sr-brand-700); text-decoration: underline; }
.somos-rpps-app[data-theme='dark'] .sr-modal__subtitle--inline a { color: var(--sr-brand-300); }
/* Body do editor de nome — só dá um respiro vertical entre as seções
   (grid de inputs, box de aviso, alerta de erro). O padding-bottom extra
   garante folga entre o último elemento (caixa de alerta) e o footer do
   modal (.sr-modal__actions), evitando a sensação de "colado". */
.sr-nameedit__body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 22px; }
/* Nome + Sobrenome lado a lado no desktop (2 colunas). No mobile a media
   query abaixo desmonta o grid pra ficar empilhado. */
.sr-nameedit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
/* Caixa de aviso (lock + texto) — visual leve, com fundo levemente tonalizado
   e borda discreta. Mantém o tom amigável: não é um erro, é uma orientação
   sobre uma regra de segurança. */
.sr-nameedit__notice {
	display: flex;
	/* O ícone fica visualmente centralizado em relação ao texto inteiro
	   (independente de o texto ter 1 ou várias linhas). */
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-left: 3px solid var(--sr-warning, #d97706);
	border-radius: var(--sr-radius-md);
	color: var(--sr-fg-muted);
	font-size: 13px;
	line-height: 1.55;
}
.sr-nameedit__notice-icon {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: rgba(217, 119, 6, .12);
	color: var(--sr-warning, #d97706);
}
.sr-nameedit__notice-icon svg { width: 14px; height: 14px; }
.sr-nameedit__notice-text { flex: 1 1 auto; min-width: 0; }
.somos-rpps-app[data-theme='dark'] .sr-nameedit__notice {
	background: var(--sr-bg-elev-2);
	border-color: var(--sr-border);
	border-left-color: #f59e0b;
}
.somos-rpps-app[data-theme='dark'] .sr-nameedit__notice-icon {
	background: rgba(245, 158, 11, .18);
	color: #fbbf24;
}
@media (max-width: 520px) {
	.sr-nameedit__grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Linha de formulário simples (label em cima, input embaixo). Existe um
   .sr-field em outros pontos do projeto que faz quase isso, mas com
   semântica de validação extra que aqui não precisamos. */
.sr-formrow { display: flex; flex-direction: column; gap: 6px; }

/* Grid da seção "Informações de Contato": dois campos lado a lado no
   desktop, empilhados no mobile. Usa o mesmo breakpoint do hero do perfil
   (720px) para manter coerência ao longo do ProfileView. */
.sr-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
@media (max-width: 720px) {
	.sr-contact__grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Modal aninhada (mini-confirmação por cima do editor). Sobe o z-index pra
   ficar acima do pai (.sr-modal usa z-index 1000). O blur do .sr-modal já
   se aplica de novo, dando o efeito "card flutuando sobre o card pai". */
.sr-modal.sr-modal--nested { z-index: 1100; }

/* ============================================================
   PORTAL WRAPPER (.sr-portal) + ACTION SHEET (bottom sheet)
   ============================================================
   .sr-portal é o wrapper teleportado pra body. Ele:
    1. Reseta button/h3/p para neutralizar regras agressivas do tema
       WordPress (ex.: "button { padding: 16px 32px; font-size: 24px }").
    2. Define position: fixed cobrindo a viewport com z-index altíssimo
       (acima de sidebar/topbar/modals normais).
    3. Cria seu próprio stacking context — isolando os filhos do contexto
       do avatar (que estava deixando a página vazar visualmente).
   */
.somos-rpps-app.sr-portal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none; /* o .sr-sheet filho re-habilita */
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sr-fg);
	/* CRÍTICO: o seletor .somos-rpps-app base define `background: var(--sr-bg)`
	   e `min-height: 100vh` (porque normalmente é o root do SPA). Aqui ele é
	   só um wrapper isolante do portal — não pode ter fundo sólido nem altura
	   mínima, senão cobre a página inteira com a cor de fundo do app e o
	   backdrop-filter do .sr-sheet vê só esse fundo (não a página real). */
	background: transparent !important;
	min-height: 0 !important;
}
.somos-rpps-app.sr-portal > * { pointer-events: auto; }
/* Reset defensivo: alguns temas WP injetam regras em h1-h6/p/button. */
.somos-rpps-app.sr-portal h1,
.somos-rpps-app.sr-portal h2,
.somos-rpps-app.sr-portal h3,
.somos-rpps-app.sr-portal h4,
.somos-rpps-app.sr-portal p {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.somos-rpps-app.sr-portal button {
	margin: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.sr-sheet {
	position: fixed;
	inset: 0;
	z-index: 1;
	/* Backdrop SUTIL: como o sheet é bottom-anchored, a área acima dele
	   fica grande e visível. Blur muito forte (8px) faz o topo da página
	   virar um borrão branco/cinza homogêneo. Usamos 3px + overlay mais
	   transparente pra dar foco no sheet sem ofuscar todo o contexto. */
	background: rgba(15, 23, 42, .28);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}
.somos-rpps-app.sr-portal[data-theme='dark'] .sr-sheet {
	background: rgba(0, 0, 0, .45);
}
.somos-rpps-app.sr-portal .sr-sheet__card {
	width: 100%;
	max-width: 480px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
	padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	box-shadow:
		0 -30px 60px -20px rgba(2, 6, 23, .45),
		0 -8px 20px -6px rgba(2, 6, 23, .22);
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--sr-fg);
}
.somos-rpps-app.sr-portal .sr-sheet__head { padding: 6px 6px 8px; text-align: center; }
.somos-rpps-app.sr-portal .sr-sheet__title {
	margin: 0 0 4px !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: var(--sr-fg) !important;
}
.somos-rpps-app.sr-portal .sr-sheet__sub {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--sr-fg-muted) !important;
	font-weight: 400 !important;
}
.somos-rpps-app.sr-portal .sr-sheet__opt {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 14px !important;
	background: var(--sr-bg) !important;
	border: 1px solid var(--sr-border) !important;
	border-radius: 14px !important;
	cursor: pointer !important;
	text-align: left !important;
	font: inherit !important;
	font-size: 14px !important;
	color: var(--sr-fg) !important;
	width: 100% !important;
	transition: background var(--sr-transition), border-color var(--sr-transition), transform 80ms ease !important;
}
.somos-rpps-app.sr-portal .sr-sheet__opt:hover  { background: var(--sr-brand-50) !important; border-color: var(--sr-brand-200) !important; }
.somos-rpps-app.sr-portal .sr-sheet__opt:active { transform: scale(.99) !important; }
.somos-rpps-app.sr-portal .sr-sheet__opt-icon {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
}
.somos-rpps-app.sr-portal .sr-sheet__opt-icon svg { width: 20px; height: 20px; }
.somos-rpps-app.sr-portal .sr-sheet__opt-text { display: flex; flex-direction: column; gap: 2px; }
.somos-rpps-app.sr-portal .sr-sheet__opt-title {
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--sr-fg) !important;
}
.somos-rpps-app.sr-portal .sr-sheet__opt-desc {
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	color: var(--sr-fg-muted) !important;
}
.somos-rpps-app.sr-portal .sr-sheet__cancel {
	margin-top: 4px !important;
	padding: 12px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 14px !important;
	cursor: pointer !important;
	font: inherit !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--sr-fg-muted) !important;
	width: 100% !important;
	text-align: center !important;
}
.somos-rpps-app.sr-portal .sr-sheet__cancel:hover { background: var(--sr-bg) !important; color: var(--sr-fg) !important; }
.somos-rpps-app.sr-portal[data-theme='dark'] .sr-sheet__opt-icon { background: rgba(96,165,250,.14); color: var(--sr-brand-300); }
.somos-rpps-app.sr-portal[data-theme='dark'] .sr-sheet__opt:hover { background: var(--sr-bg-elev-2) !important; border-color: var(--sr-brand-700) !important; }
@media (min-width: 720px) {
	/* Em telas grandes (improvável usar, mas defensivo) — centraliza
	   o sheet ao invés de ancorar embaixo. */
	.sr-sheet { align-items: center; padding: 16px; }
	.somos-rpps-app.sr-portal .sr-sheet__card { border-radius: 18px; border-bottom: 1px solid var(--sr-border); }
}
.sr-modal__actions {
	display: flex; justify-content: flex-end; gap: 10px;
	padding: 18px 30px 22px;
	border-top: 1px solid var(--sr-border);
	background: var(--sr-bg);
}
.somos-rpps-app[data-theme='dark'] .sr-modal__actions { background: var(--sr-bg-elev-2); }
@media (max-width: 520px) {
	.sr-modal__head { padding: 22px 20px 4px; }
	.sr-modal__subtitle { margin: 0 20px 4px; }
	.sr-modal__body { padding: 12px 20px 4px; }
	.sr-modal__actions { padding: 14px 20px 18px; }
}

/* ---------- TOASTS ---------- */
.sr-toasts {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.sr-toast {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	box-shadow: var(--sr-shadow-lg);
	padding: 12px 14px;
	min-width: 260px;
	max-width: 360px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sr-fg);
	font-size: 14px;
	pointer-events: auto;
}
.sr-toast__icon {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sr-toast__icon svg { width: 14px; height: 14px; }
.sr-toast--success .sr-toast__icon { background: rgba(22, 163, 74, .15); color: #16a34a; }
.sr-toast--error   .sr-toast__icon { background: rgba(220, 38, 38, .15); color: #dc2626; }
.sr-toast--info    .sr-toast__icon { background: var(--sr-brand-50); color: var(--sr-brand-700); }
.sr-toast--error { border-left: 3px solid #dc2626; }
.sr-toast--success { border-left: 3px solid #16a34a; }

.sr-toast-enter-active, .sr-toast-leave-active {
	transition: transform 280ms cubic-bezier(.4, 0, .2, 1), opacity 240ms ease;
}
.sr-toast-enter-from {
	transform: translateX(40px);
	opacity: 0;
}
.sr-toast-leave-to {
	transform: translateX(40px);
	opacity: 0;
}

@media (max-width: 540px) {
	.sr-toasts { top: auto; bottom: 20px; left: 12px; right: 12px; align-items: stretch; }
	.sr-toast { min-width: 0; width: 100%; max-width: none; }
	.sr-toast-enter-from, .sr-toast-leave-to { transform: translateY(40px); }
}

/* ============================================================
   PERFIL PROFISSIONAL — visão pública (/perfil/{slug})
   ============================================================ */
body.somos-rpps-public-profile-body { margin: 0; background: var(--sr-bg, #f4f7fb); }

.sr-pubprof {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--sr-bg);
	color: var(--sr-fg);
}

.sr-pubprof__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	background: var(--sr-bg-elev);
	border-bottom: 1px solid var(--sr-border);
}
.sr-pubprof__brand { display: inline-flex; }
.sr-pubprof__cta {
	color: var(--sr-brand-700);
	font-weight: 700;
	text-decoration: none;
	font-size: 14.5px;
	padding: 8px 16px;
	border-radius: var(--sr-radius-md);
	border: 1.5px solid var(--sr-brand-700);
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-pubprof__cta:hover { background: var(--sr-brand-700); color: #fff; }
.somos-rpps-app[data-theme='dark'] .sr-pubprof__cta { color: var(--sr-brand-300); border-color: var(--sr-brand-300); }

.sr-pubprof__main {
	flex: 1;
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
	padding: 38px 24px 64px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sr-pubprof__loading {
	text-align: center;
	padding: 60px 0;
	color: var(--sr-fg-muted);
}
.sr-pubprof__loading .somos-rpps-spinner {
	margin: 0 auto 14px;
	border-top-color: var(--sr-brand-500);
}

.sr-pubprof__notfound {
	text-align: center;
	padding: 60px 0;
}
.sr-pubprof__notfound h1 {
	font-size: 28px;
	margin: 0 0 8px;
	letter-spacing: -.02em;
}
.sr-pubprof__notfound p {
	color: var(--sr-fg-muted);
	margin-bottom: 22px;
}

.sr-pubprof__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 36px 24px 30px;
	box-shadow: var(--sr-shadow-sm);
	position: relative;
}

/* Botão de QR Code do hero público — mesma estética do botão na visão do dono. */
.sr-pubprof__qr {
	position: absolute;
	top: 14px; right: 14px;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sr-border);
	background: var(--sr-bg-elev);
	color: var(--sr-brand-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--sr-shadow-sm);
	transition: transform var(--sr-transition), color var(--sr-transition),
		background var(--sr-transition), border-color var(--sr-transition);
	z-index: 2;
}
.sr-pubprof__qr:hover {
	transform: translateY(-1px);
	color: #fff;
	background: var(--sr-brand-700);
	border-color: var(--sr-brand-700);
}
.sr-pubprof__qr:focus-visible { outline: 3px solid var(--sr-brand-500); outline-offset: 2px; }
.sr-pubprof__qr svg { width: 20px; height: 20px; }
.somos-rpps-app[data-theme='dark'] .sr-pubprof__qr { color: var(--sr-brand-300); }

.sr-pubprof__name {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 8px 0 4px;
}
.sr-pubprof__role { color: var(--sr-brand-700); font-weight: 600; }
.somos-rpps-app[data-theme='dark'] .sr-pubprof__role { color: var(--sr-brand-300); }
.sr-pubprof__city {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sr-fg-muted);
	font-size: 14px;
	margin-top: 2px;
}
.sr-pubprof__city svg { width: 14px; height: 14px; }
/* Linha "Membro na Somos RPPS há X tempo" no perfil PÚBLICO — IMEDIATAMENTE
   abaixo de Município/UF, com margem mínima. O hero do público é
   center-aligned, então não precisa de padding lateral. */
.sr-pubprof__member {
	font-size: 12.5px;
	color: var(--sr-fg-subtle);
	margin-top: 2px;
	line-height: 1.35;
}
.sr-pubprof__member strong { color: var(--sr-fg-muted); font-weight: 600; }
.somos-rpps-app[data-theme='dark'] .sr-pubprof__member strong { color: var(--sr-fg); }

.sr-pubprof__lock {
	background: var(--sr-bg-elev);
	border: 1px dashed var(--sr-border-strong);
	border-radius: var(--sr-radius-lg);
	padding: 60px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sr-pubprof__lock-icon {
	width: 78px; height: 78px;
	border-radius: 50%;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px -10px rgba(29, 78, 216, .35);
}
.sr-pubprof__lock-icon svg { width: 34px; height: 34px; }
.somos-rpps-app[data-theme='dark'] .sr-pubprof__lock-icon { background: rgba(96, 165, 250, .15); color: var(--sr-brand-300); }
.sr-pubprof__lock-title {
	font-size: 22px;
	margin: 0;
	letter-spacing: -.02em;
}
.sr-pubprof__lock-desc {
	color: var(--sr-fg-muted);
	max-width: 460px;
	line-height: 1.55;
	margin: 0;
}

.sr-pubprof__section-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	letter-spacing: -.01em;
}
.sr-pubprof__text {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 20px 22px;
	white-space: pre-wrap;
	line-height: 1.65;
	color: var(--sr-fg);
}

.sr-pubprof__socials-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.sr-pubprof__socials-list a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 12px 14px;
	color: var(--sr-fg);
	text-decoration: none;
	font-size: 13.5px;
	transition: border-color var(--sr-transition), color var(--sr-transition), background var(--sr-transition);
	min-width: 0;
}
.sr-pubprof__socials-list a:hover {
	border-color: var(--sr-brand-500);
	color: var(--sr-brand-700);
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-pubprof__socials-list a:hover {
	color: var(--sr-brand-300);
	background: rgba(96, 165, 250, .08);
}
.sr-pubprof__socials-label {
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sr-fg-subtle);
}
.sr-pubprof__socials-url {
	display: block;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	max-width: 100%;
	font-size: 14px;
}
@media (max-width: 560px) {
	.sr-pubprof__socials-list { grid-template-columns: 1fr; }
}

.sr-pubprof__bottomcta-card {
	background: linear-gradient(135deg, var(--sr-brand-700), var(--sr-brand-900));
	border-radius: var(--sr-radius-lg);
	padding: 32px 28px;
	color: #fff;
	text-align: center;
	box-shadow: var(--sr-shadow-md);
}
.sr-pubprof__bottomcta-card h3 {
	margin: 0 0 8px;
	font-size: 22px;
	letter-spacing: -.02em;
}
.sr-pubprof__bottomcta-card p {
	color: rgba(255, 255, 255, .85);
	margin: 0 0 18px;
	line-height: 1.55;
}
.sr-pubprof__bottomcta-card .sr-btn--primary {
	background: #fff;
	color: var(--sr-brand-800);
}
.sr-pubprof__bottomcta-card .sr-btn--primary:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-900);
}

/* Footer da página pública: o wrapper agora é só um espaçador — o estilo
   final (linha divisória superior, fundo transparente, sem borda) vem do
   próprio .sr-footer global, garantindo identidade total entre área logada
   e área pública. */
.sr-pubprof__footer {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ============================================================
   AREA + ROLE PICKER MODAL
   ------------------------------------------------------------
   Modal de edição da Área de Atuação + Função do usuário.
   Visualmente: card centralizado (padrão sr-modal), largura
   confortável p/ acomodar as áreas em 2 colunas no desktop e
   1 coluna no mobile, body scrollável (porque a nuvem de tags
   pode crescer bastante), e ações fixas no rodapé.
   ============================================================ */
.sr-modal__card--arearole {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	/* Limita altura para nunca ultrapassar a viewport — o body interno
	   é que rola, mantendo head e actions sempre visíveis. */
	max-height: calc(100vh - 32px);
}
.sr-arearole__heading { min-width: 0; flex: 1; }
.sr-arearole__subtitle {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--sr-fg-muted);
	line-height: 1.55;
}
.sr-arearole__body {
	overflow-y: auto;
	/* Garante respiro inferior antes das actions. */
	padding-bottom: 20px;
}
/* Dentro do modal, mantemos no máximo 2 colunas de areacards, mesmo em
   telas largas — o modal não cresce além de 760px e 3 colunas ficariam
   apertadas. Mobile permanece em 1 coluna (regra base já cobre). */
.sr-modal__card--arearole .sr-areacards {
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.sr-modal__card--arearole .sr-areacards { grid-template-columns: repeat(2, 1fr); }
}
/* O painel de funções, dentro do modal, fica encostado nas bordas do body
   sem precisar do fundo claro (que iria competir com o card do modal). */
.sr-modal__card--arearole .sr-rolespanel {
	background: transparent;
	border: 0;
	padding: 18px 0 0;
}
.sr-modal__card--arearole .sr-roletags {
	max-height: 240px;
	overflow-y: auto;
	padding-right: 4px;
}

/* ============================================================
   AVATAR CROPPER MODAL
   ------------------------------------------------------------
   Modal de recorte/zoom da foto de perfil. Centro vertical e
   horizontal, generoso em folgas, sofisticado e sem ruído visual.
   Funciona perfeitamente em desktop (mouse + scroll) e em mobile
   (drag + pinch) — o JS abstrai os dois mundos.
   ============================================================ */
.sr-modal__card--cropper {
	max-width: 440px;
}
.sr-cropper__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.sr-cropper__hint {
	margin: 0;
	font-size: 13px;
	color: var(--sr-fg-muted);
	text-align: center;
}
.sr-cropper {
	position: relative;
}
.sr-cropper__stage {
	position: relative;
	width: 280px;
	height: 280px;
	background: var(--sr-bg);
	border-radius: var(--sr-radius-md);
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sr-cropper__stage:active { cursor: grabbing; }
.sr-cropper__img {
	position: absolute;
	top: 0; left: 0;
	max-width: none; /* não respeita o container; usamos transform pra dimensionar */
	pointer-events: none;
	-webkit-user-drag: none;
}
/* Máscara circular: escurece tudo fora do círculo + desenha um anel
   levemente claro pra dar identidade visual. Usa box-shadow gigantesco
   "para fora" em vez de um SVG pesado — performance excelente. */
.sr-cropper__mask {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
	pointer-events: none;
	border: 2px solid rgba(255, 255, 255, .9);
	box-sizing: border-box;
}
.somos-rpps-app[data-theme='dark'] .sr-cropper__mask {
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .65);
	border-color: rgba(255, 255, 255, .65);
}
.sr-cropper__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, .35);
	border-radius: var(--sr-radius-md);
}
.sr-cropper__loading .somos-rpps-spinner {
	width: 36px; height: 36px; border-width: 3px;
	border-color: rgba(255, 255, 255, .25);
	border-top-color: #fff;
}
/* Linha do zoom: slider + botões de incremento. Slider customizado com o
   azul da marca, polegar circular generoso e trilho fino. */
.sr-cropper__zoom {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 280px;
}
.sr-cropper__slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 2px;
	background: var(--sr-border);
	outline: none;
	cursor: pointer;
}
.sr-cropper__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--sr-brand-700);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
	cursor: grab;
}
.sr-cropper__slider::-webkit-slider-thumb:active { cursor: grabbing; }
.sr-cropper__slider::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--sr-brand-700);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
	cursor: grab;
}
@media (max-width: 520px) {
	.sr-modal__card--cropper { max-width: calc(100vw - 24px); }
	.sr-cropper__stage { width: 260px; height: 260px; }
	.sr-cropper__zoom { max-width: 260px; }
}

/* ============================================================
   QR CODE MODAL
   ============================================================ */
.sr-modal__card--qr {
	max-width: 400px;
}
.sr-qrbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sr-qrbox__frame {
	position: relative;
	width: 280px;
	height: 280px;
	border-radius: var(--sr-radius-lg);
	background: #fff;
	border: 1px solid var(--sr-border);
	box-shadow: var(--sr-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 8px;
}
.sr-qrbox__frame.is-error {
	background: var(--sr-bg);
	border-style: dashed;
}
.sr-qrbox__canvas {
	display: block;
	max-width: 100%;
	height: auto;
}
.sr-qrbox__frame.is-error .sr-qrbox__canvas,
.sr-qrbox__frame.is-loading .sr-qrbox__canvas { visibility: hidden; }
.sr-qrbox__busy {
	position: absolute; inset: 0;
	background: rgba(255, 255, 255, .85);
	display: flex; align-items: center; justify-content: center;
}
.sr-qrbox__errorface {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--sr-fg-subtle);
}
.sr-qrbox__errorface svg { width: 56px; height: 56px; opacity: .6; }
.sr-qrbox__caption {
	margin: 0;
	font-size: 13px;
	color: var(--sr-fg-muted);
	text-align: center;
	max-width: 320px;
	line-height: 1.45;
}
.sr-qrbox__url {
	margin: 0;
	font-family: 'Inter', monospace;
	font-size: 12.5px;
	color: var(--sr-brand-700);
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
.somos-rpps-app[data-theme='dark'] .sr-qrbox__url { color: var(--sr-brand-300); }
.sr-qrbox__error {
	margin: 0;
	text-align: center;
	font-size: 13px;
	color: var(--sr-danger);
	background: rgba(220, 38, 38, .08);
	border: 1px solid rgba(220, 38, 38, .2);
	border-radius: var(--sr-radius-md);
	padding: 10px 12px;
	line-height: 1.45;
	width: 100%;
}

/* ============================================================
   PROFILE — responsivo (hero empilhado no mobile)
   ============================================================ */
@media (max-width: 720px) {
	.sr-profhero {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 26px 20px 22px;
	}
	.sr-profhero__left {
		align-items: center;
	}
	.sr-profhero__main {
		display: flex; flex-direction: column; align-items: stretch;
		padding-top: 8px;
	}
	/* No mobile o nome pode usar largura plena: a badge sai do topright e
	   passa a viver inline antes do avatar (via order). */
	.sr-profhero__name {
		padding-right: 0;
		text-align: center;
		justify-content: center;
	}
	/* No mobile, .sr-profhero__role tem width: fit-content (pra o lápis ficar
	   colado no texto), então justify-content sozinho não centraliza a CAIXA
	   na coluna — precisa de `margin: 0 auto` pra que o cluster inteiro fique
	   no centro horizontal, alinhado com nome/cidade. */
	.sr-profhero__role { margin-left: auto; margin-right: auto; }
	.sr-profhero__role, .sr-profhero__city { text-align: center; justify-content: center; }
	/* No mobile, o cluster topright sai do canto e ocupa uma linha inteira no
	   topo do card, centralizado. Usamos "order: -1" para garantir que ele
	   apareça ANTES das colunas do grid (avatar + main). */
	.sr-profhero__topright {
		position: static;
		justify-content: center;
		margin: 0 0 6px;
		flex-wrap: wrap;
		order: -1;
	}
	.sr-profhero__qr {
		margin: 0;
	}
	.sr-profhero__city { justify-content: center; }
	/* ---------- SlugEditor no mobile (≤720px) ----------
	   Layout-alvo (pedido explícito do usuário):

	     +----------------------------------------+
	     |  somosrpps.com/perfil/handle...        |   <- URL: 1 linha cheia
	     +----------------------------------------+
	     |       [✏️]  [📋]  [💬]  [🔒]            |   <- ícones centralizados
	     +----------------------------------------+

	   Diferenças vs. desktop: no mobile NÃO existe espaço lateral para os
	   ícones conviverem na mesma linha da URL, então empilhamos vertical
	   e centralizamos os ícones embaixo. A URL ganha a linha INTEIRA e só
	   recebe ellipsis quando o slug realmente extrapola a largura útil. */
	.sr-sluged { width: 100%; box-sizing: border-box; }
	.sr-sluged__row {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 10px;
	}
	.sr-sluged__url {
		/* Sobrescreve o "flex: 1 1 0" do desktop. Em column flex aquilo
		   atua no eixo vertical e — combinado com nowrap + overflow:hidden
		   — provoca colapso de largura em alguns navegadores. Forçando
		   width:100% + flex:0 0 auto + display:block, garantimos uma faixa
		   de exatamente 100% da largura útil do card para a URL. */
		display: block;
		width: 100%;
		flex: 0 0 auto;
		min-width: 0;
		text-align: left;
	}
	.sr-sluged__actions {
		justify-content: center;
		width: 100%;
	}
	.sr-profcard { padding: 18px 16px; }
	.sr-profcard__head { flex-wrap: wrap; }
	.sr-profhero__name { font-size: 24px; }
}

@media (max-width: 520px) {
	.sr-profile-avatar--xl { width: 128px; height: 128px; font-size: 44px; }
	.sr-modal__card--qr { max-width: calc(100vw - 24px); }
	.sr-qrbox__frame { width: 240px; height: 240px; }
}

/* Print-friendly: oculta UI */
@media print {
	.somos-rpps-root { display: none; }
}

/* ============================================================
   PASSWORD RECOVERY (Esqueci a senha + Reset)
   ------------------------------------------------------------
   Fluxo dedicado dentro do AuthScreen. Reutiliza tokens
   visuais existentes (.sr-auth__card, .sr-auth__sent,
   .sr-auth__sent-icon) e acrescenta variações pontuais:
    - link "Esqueceu a senha?" centralizado, mais discreto
    - ícone de SUCESSO verde (sr-auth__sent-icon--ok)
    - lista de requisitos da senha (.sr-pwchecks) ao vivo
   ============================================================ */

/* Link discreto e centralizado, substituindo o convite de
   cadastro que existia abaixo do botão "Entrar". O botão
   "Criar conta" no topo já cumpre o papel de signup. */
.sr-auth__footer--center {
	justify-items: center;
	margin-top: 16px;
}
.sr-auth__forgot-link {
	color: var(--sr-link);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 8px;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-auth__forgot-link:hover,
.sr-auth__forgot-link:focus-visible {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	text-decoration: none;
	outline: none;
}
.somos-rpps-app[data-theme='dark'] .sr-auth__forgot-link:hover,
.somos-rpps-app[data-theme='dark'] .sr-auth__forgot-link:focus-visible {
	background: rgba(96,165,250,.14);
	color: var(--sr-brand-200);
}

/* Variante de ÍCONE de SUCESSO (check verde) — usada na tela
   "Senha alterada com sucesso!". Espelha o estilo da variante
   --alert (laranja) já existente. */
.sr-auth__sent-icon--ok {
	background: rgba(22, 163, 74, .12);
	color: var(--sr-success);
	box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
}

/* Lista de requisitos da senha (5 critérios). NÃO confundir
   com .sr-strength (medidor de barras do onboarding) — esta
   é uma checklist textual com bolinhas que ficam verdes
   conforme o critério é satisfeito. UX inspirada em LinkedIn,
   Stripe e GitHub. */
.sr-pwchecks {
	list-style: none;
	padding: 12px 14px;
	margin: 12px 0 18px;
	border-radius: 10px;
	background: var(--sr-bg-soft, var(--sr-bg-muted, #f8fafc));
	border: 1px solid var(--sr-border);
	display: grid;
	gap: 6px;
}
.somos-rpps-app[data-theme='dark'] .sr-pwchecks {
	background: rgba(255,255,255,.03);
}
.sr-pwchecks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sr-fg-subtle);
	transition: color var(--sr-transition);
}
.sr-pwchecks__dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--sr-border-strong, var(--sr-border));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: background var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition);
}
/* SVG check fica oculto (color: transparent) enquanto o requisito
   não é atendido. Quando .is-ok ativa, o círculo vira verde sólido
   e o stroke do SVG (currentColor) vira branco — render perfeito,
   pixel-aligned, idêntico ao da tela de criação de senha do
   onboarding (que usa o mesmo polyline 5,12 → 10,17 → 19,7). */
.sr-pwchecks__dot svg {
	width: 10px;
	height: 10px;
	display: block;
}
.sr-pwchecks li.is-ok {
	color: var(--sr-success);
}
.sr-pwchecks li.is-ok .sr-pwchecks__dot {
	background: var(--sr-success);
	border-color: var(--sr-success);
	color: #ffffff;
}

/* ============================================================
   FEED — view "Atualizações da Rede"
   ============================================================
   Layout:
    - Mobile/tablet: coluna única; o trilho lateral (.sr-feed__side)
      aparece embaixo da lista ou em colapsável (CSS abaixo).
    - Desktop ≥ 1080px: grid 2 colunas — `1fr 320px` — main + side.
    - Desktop largo (≥ 1400px): main ganha respiro com max-width 660px
      centralizada na própria coluna; side fica fixa à direita.
   ============================================================ */
.sr-feed {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	max-width: 1180px;
	margin: 0 auto;
}
@media (min-width: 1080px) {
	.sr-feed {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 28px;
	}
}
.sr-feed__main {
	display: flex; flex-direction: column;
	gap: 18px;
	min-width: 0;
}
@media (min-width: 1400px) {
	.sr-feed__main { max-width: 660px; margin: 0 auto; width: 100%; }
}
.sr-feed__side {
	display: flex; flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ---- Composer trigger (cartão clicável estilo Facebook) ----
   DESKTOP: 1 linha (avatar / input / botão "Criar post").
   MOBILE : 2 linhas (avatar+input em cima, botão pill full-width embaixo).
   O wrap acontece naturalmente em < 640px via flex-wrap.            */
.sr-feed__composer {
	display: flex; align-items: center; gap: 12px;
	flex-wrap: wrap;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 14px 16px;
	cursor: pointer;
	box-shadow: var(--sr-shadow-sm);
	transition: border-color var(--sr-transition);
}
.sr-feed__composer:hover,
.sr-feed__composer:focus-visible {
	border-color: var(--sr-brand-300);
	outline: none;
}
/* Linha que agrupa avatar + caixa de texto. No desktop fica inline com
   o botão; no mobile passa a ocupar 100% da largura sozinha. */
.sr-feed__composer-row {
	display: flex; align-items: center; gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}
.sr-feed__composer-input {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--sr-fg-subtle);
	font-size: 15px;
	padding: 11px 16px;
	background: var(--sr-bg);
	border-radius: var(--sr-radius-pill);
	border: 1px solid var(--sr-border);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
/* Quando há rascunho, a "caixinha" muda de tom para reforçar que o
   conteúdo foi preservado. */
.sr-feed__composer.has-draft .sr-feed__composer-input {
	color: var(--sr-fg);
	background: var(--sr-brand-50);
	border-color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-feed__composer.has-draft .sr-feed__composer-input {
	background: rgba(96, 165, 250, .1);
	border-color: rgba(96, 165, 250, .25);
}
.sr-feed__composer-draft-tag {
	display: inline-block;
	color: var(--sr-brand-700);
	font-weight: 600;
	margin-right: 6px;
}
.somos-rpps-app[data-theme='dark'] .sr-feed__composer-draft-tag { color: var(--sr-brand-300); }
.sr-feed__composer-draft-text { color: var(--sr-fg); }

/* Botão "Criar post" — totalmente arredondado (pill).
   DESKTOP: visível, fica do lado direito da linha.
   MOBILE : escondido — substituído pelo .sr-feed__composer-fab. */
.sr-feed__composer-btn {
	flex-shrink: 0;
	gap: 6px;
	border-radius: 999px !important;
	padding: 10px 22px;
	min-height: 40px;
}

/* FAB circular (mobile-only): bolinha azul com ícone branco de lápis,
   dentro da mesma linha do avatar + caixinha de texto. */
.sr-feed__composer-fab {
	display: none;
	width: 44px; height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--sr-brand-700);
	color: #ffffff;
	border: none;
	align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px -4px rgba(29, 78, 216, .45),
				inset 0 -1px 0 rgba(0, 0, 0, .12);
	transition: background var(--sr-transition), transform var(--sr-transition);
}
.sr-feed__composer-fab:hover { background: var(--sr-brand-800); }
.sr-feed__composer-fab:active { transform: scale(.96); }
.sr-feed__composer-fab .sr-icon svg { width: 20px; height: 20px; }
.somos-rpps-app[data-theme='dark'] .sr-feed__composer-fab {
	background: var(--sr-brand-500);
	box-shadow: 0 6px 16px -4px rgba(59, 130, 246, .55),
				inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.somos-rpps-app[data-theme='dark'] .sr-feed__composer-fab:hover { background: var(--sr-brand-700); }

@media (max-width: 639px) {
	.sr-feed__composer { padding: 12px; gap: 10px; }
	.sr-feed__composer-row { width: 100%; gap: 10px; }
	/* Avatar mais compacto no mobile pra deixar a caixinha respirar
	   numa única linha. */
	.sr-feed__composer-row .sr-profile-avatar--md {
		width: 40px; height: 40px; font-size: 15px;
	}
	.sr-feed__composer-input { padding: 9px 14px; font-size: 14px; }
	/* No mobile o nome do usuário some do placeholder pra caber numa
	   linha só — fica apenas "Compartilhe algo com a rede". */
	.sr-feed__composer-input-name,
	.sr-feed__composer-input-ellipsis { display: none; }
	/* No mobile o FAB aparece e o botão completo some. */
	.sr-feed__composer-fab { display: inline-flex; }
	.sr-feed__composer-btn { display: none; }
}

/* ---- Tabs de modo + filtros ---- */
.sr-feed__tabs {
	display: flex; align-items: center; gap: 8px;
	flex-wrap: wrap;
	padding: 4px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-pill);
	box-shadow: var(--sr-shadow-sm);
}
.sr-feed__tab {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	border-radius: var(--sr-radius-pill);
	background: transparent;
	border: none;
	color: var(--sr-fg-muted);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-feed__tab .sr-icon svg { width: 16px; height: 16px; }
.sr-feed__tab:hover { background: var(--sr-brand-50); color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-feed__tab:hover { background: rgba(96, 165, 250, .12); color: var(--sr-brand-300); }
.sr-feed__tab.is-active {
	background: var(--sr-brand-700);
	color: #ffffff;
}
.sr-feed__tab.is-active:hover { background: var(--sr-brand-800); }
.somos-rpps-app[data-theme='dark'] .sr-feed__tab.is-active {
	background: var(--sr-brand-500); color: #ffffff;
}
.sr-feed__tabs-spacer { flex: 1 1 auto; }
.sr-feed__clearfilter {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 10px;
	border-radius: var(--sr-radius-pill);
	background: transparent;
	border: 1px solid var(--sr-border);
	color: var(--sr-fg-muted);
	font: inherit; font-size: 13px;
	cursor: pointer;
}
.sr-feed__clearfilter:hover { background: var(--sr-bg); color: var(--sr-fg); }
.sr-feed__clearfilter .sr-icon svg { width: 12px; height: 12px; }

/* ---- Badge "X novos posts" ---- */
.sr-feed__newposts {
	position: sticky;
	top: calc(var(--sr-topbar-h) + 8px);
	z-index: 10;
	align-self: center;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-brand-700);
	color: #ffffff;
	border: none;
	font: inherit; font-weight: 600; font-size: 14px;
	cursor: pointer;
	box-shadow: 0 12px 28px -10px rgba(29, 78, 216, .55);
	transition: transform var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-feed__newposts:hover { transform: translateY(-1px); }
.sr-feed__newposts .sr-icon svg { width: 16px; height: 16px; }

/* ---- Loaders e estado vazio ---- */
.sr-feed__loader {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 48px 12px;
	color: var(--sr-fg-muted);
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
}
.sr-feed__loader .somos-rpps-spinner { margin-bottom: 8px; }

.sr-feed__list { display: flex; flex-direction: column; gap: 18px; }
.sr-feed__sentinel { height: 1px; }
.sr-feed__loadmore,
/* ============================================================
   FIM DO FEED — cartão sóbrio e celebrativo
   ============================================================
   Substitui o microtexto antigo "Você está em dia com o feed."
   por um cartão centrado com:
    - Selo circular com check (success), com brilho sutil
    - Título destacado: "Você chegou ao fim do feed"
    - Texto secundário convidativo + CTA inline ("recarregue agora")
   Visual neutro/elegante (sem usar cor brand exclusiva), funciona
   bem em light/dark e mobile/desktop.
   ============================================================ */
.sr-feed__end {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 22px;
	margin-top: 8px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	box-shadow: var(--sr-shadow-sm);
}
.sr-feed__end-mark {
	flex-shrink: 0;
	width: 52px; height: 52px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .04));
	color: var(--sr-success);
	box-shadow: 0 0 0 6px rgba(34, 197, 94, .08);
}
.sr-feed__end-mark .sr-icon svg { width: 26px; height: 26px; }
.somos-rpps-app[data-theme='dark'] .sr-feed__end-mark {
	background: linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(34, 197, 94, .06));
	box-shadow: 0 0 0 6px rgba(34, 197, 94, .10);
}
.sr-feed__end-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-feed__end-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--sr-fg);
	line-height: 1.3;
}
.sr-feed__end-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sr-fg-muted);
}
.sr-feed__end-cta {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--sr-brand-700);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: color var(--sr-transition), border-color var(--sr-transition);
}
.sr-feed__end-cta:hover {
	color: var(--sr-brand-800);
	border-bottom-color: currentColor;
}
.somos-rpps-app[data-theme='dark'] .sr-feed__end-cta { color: var(--sr-brand-300); }
.somos-rpps-app[data-theme='dark'] .sr-feed__end-cta:hover { color: var(--sr-brand-200); }

@media (max-width: 540px) {
	.sr-feed__end { padding: 18px; gap: 12px; }
	.sr-feed__end-mark { width: 44px; height: 44px; box-shadow: 0 0 0 4px rgba(34, 197, 94, .08); }
	.sr-feed__end-mark .sr-icon svg { width: 22px; height: 22px; }
	.sr-feed__end-title { font-size: 15px; }
	.sr-feed__end-text { font-size: 13px; }
}

.sr-feed__empty {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 12px;
	padding: 48px 22px;
	background: var(--sr-bg-elev);
	border: 1px dashed var(--sr-border-strong);
	border-radius: var(--sr-radius-lg);
}
.sr-feed__empty-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	box-shadow: inset 0 0 0 1px var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-feed__empty-icon {
	background: rgba(96, 165, 250, .12); color: var(--sr-brand-300);
	box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .25);
}
.sr-feed__empty-icon svg { width: 28px; height: 28px; }
.sr-feed__empty h3 { margin: 0; font-size: 18px; }
.sr-feed__empty p { color: var(--sr-fg-muted); margin: 0; max-width: 420px; }

/* ============================================================
   POST CARD
   ============================================================ */
.sr-post {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 18px 18px 6px;
	box-shadow: var(--sr-shadow-sm);
	transition: border-color var(--sr-transition);
}

.sr-post__head {
	display: flex; align-items: flex-start; gap: 12px;
	margin-bottom: 12px;
}
.sr-post__avatar-wrap {
	flex-shrink: 0;
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}
/* Removemos o ícone de câmera/edição que vem do ProfileAvatar quando
   usado dentro do card (read-only). */
.sr-post__avatar-wrap .sr-profile-avatar__camera { display: none; }
.sr-post__head-text {
	flex: 1 1 auto;
	min-width: 0;
}
.sr-post__name {
	display: block;
	font-weight: 600;
	color: var(--sr-fg);
	text-decoration: none;
	line-height: 1.2;
}
.sr-post__name:hover { color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-post__name:hover { color: var(--sr-brand-300); }

.sr-post__sub {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
	margin-top: 3px;
	color: var(--sr-fg-muted);
	font-size: 13px;
}
.sr-post__sub .sr-icon svg { width: 12px; height: 12px; }
.sr-post__cargo { font-weight: 500; }
.sr-post__city { display: inline-flex; align-items: center; gap: 3px; }

.sr-post__meta {
	margin-top: 4px;
	color: var(--sr-fg-subtle);
	font-size: 12px;
	display: flex; align-items: center; gap: 6px;
}
.sr-post__edited { font-style: italic; }

.sr-post__menu {
	position: relative;
	flex-shrink: 0;
}
/* Variante compacta do botão de ícone — usada no menu "…" dos posts
   pra não roubar atenção do card. */
.sr-iconbtn--sm { width: 32px; height: 32px; border-radius: var(--sr-radius-sm); }
.sr-iconbtn--sm svg { width: 16px; height: 16px; }
/*
 * Quando o menu "…" está aberto, o card precisa formar um stacking
 * context ACIMA dos cards vizinhos pra que o dropdown não fique
 * coberto pelo PRÓXIMO post (que vem depois no DOM e por padrão
 * pinta por cima). Posts no estado de repouso ficam neutros — só
 * o que tem menu aberto sobe pra z-index 30. Quando fecha, o pop
 * desaparece e o card volta ao normal.
 */
.sr-post.is-menu-open { z-index: 30; }
.sr-post__menu-pop {
	position: absolute;
	top: 100%; right: 0;
	margin-top: 6px;
	min-width: 220px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	box-shadow: var(--sr-shadow-lg);
	padding: 6px;
	z-index: 20;
	display: flex; flex-direction: column;
}
.sr-post__menu-item {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 10px;
	background: transparent; border: none;
	border-radius: var(--sr-radius-sm);
	font: inherit; font-size: 14px; text-align: left;
	color: var(--sr-fg);
	cursor: pointer;
}
.sr-post__menu-item:hover { background: var(--sr-brand-50); color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-post__menu-item:hover { background: rgba(96, 165, 250, .12); color: var(--sr-brand-300); }
.sr-post__menu-item .sr-icon svg { width: 16px; height: 16px; }
.sr-post__menu-item--danger { color: var(--sr-danger); }
.sr-post__menu-item--danger:hover { background: rgba(220, 38, 38, .1); color: var(--sr-danger); }
.somos-rpps-app[data-theme='dark'] .sr-post__menu-item--danger:hover { background: rgba(239, 68, 68, .15); color: var(--sr-danger); }
.sr-post__menu-sep {
	height: 1px;
	background: var(--sr-border);
	margin: 4px 6px;
}

/* Animação leve do pop (menu + sugestões) */
.sr-pop-enter-active, .sr-pop-leave-active { transition: opacity .14s ease, transform .14s ease; }
.sr-pop-enter-from, .sr-pop-leave-to { opacity: 0; transform: translateY(-4px); }

/* Badge do tema (clicável). Posicionada absolute no canto SUPERIOR
   DIREITO do card; o cabeçalho ganha padding-right pra evitar que ela
   se sobreponha ao avatar/nome em telas estreitas. */
.sr-post { position: relative; }
.sr-post__interest {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	border: 1px solid var(--sr-brand-200);
	font: inherit; font-size: 12px; font-weight: 600;
	cursor: pointer;
	margin-bottom: 8px;
	max-width: 100%;
}
.sr-post__interest:hover { background: var(--sr-brand-100); }
.sr-post__interest .sr-icon svg { width: 12px; height: 12px; }
/*
 * Badge do tema + menu "…" no canto sup. direito do card.
 *
 *  - Badge: ABSOLUTE em `top:14 right:14` — totalmente alinhada à
 *    borda direita em qualquer resolução.
 *  - Menu "…": também ABSOLUTE no canto direito; quando há badge,
 *    desce automaticamente pra logo abaixo dela (linha de baixo,
 *    mesma margem direita). Sem badge, ocupa o topo direito.
 *
 * Como ambos são absolute, NÃO precisamos reservar padding gigante no
 * header — basta um pequeno padding-right pra que o avatar/nome não
 * passem por baixo do menu na coluna do meio.
 */
.sr-post__interest--corner {
	position: absolute;
	top: 14px; right: 14px;
	margin-bottom: 0;
	z-index: 3;
	max-width: calc(100% - 28px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-post__head { padding-right: 48px; }

.sr-post__menu {
	position: absolute;
	top: 14px; right: 14px;
	margin: 0;
	z-index: 2;
}
/* Quando há badge no topo, o menu desce pra a segunda linha
   (mantendo right:14 — mesma coluna direita da badge). */
.sr-post:has(.sr-post__interest--corner) .sr-post__menu {
	top: 50px;
}

/*
 * Botão "…" do post — destaque sutil pra deixar claro que é um
 * caminho de funcionalidades:
 *  - Tamanho maior (36px) e ícone maior (20px) que o padrão sm.
 *  - Ao hover, pulsa 1x suavemente (140% por 400ms) e o ícone
 *    troca pra azul claro institucional, com leve halo de cor.
 *  - Em estado aberto (menu visível) mantém a cor azul fixa pra
 *    reforçar o contexto ativo.
 */
.sr-post__menu .sr-iconbtn {
	width: 36px; height: 36px;
	border-radius: 50%;
	color: var(--sr-fg-muted);
	background: transparent;
	transition: color var(--sr-transition), background var(--sr-transition);
}
.sr-post__menu .sr-iconbtn svg { width: 20px; height: 20px; }
.sr-post__menu .sr-iconbtn:hover {
	color: var(--sr-brand-300);
	background: var(--sr-brand-50);
	animation: sr-post-menu-pulse 420ms cubic-bezier(.22, .61, .36, 1) 1;
}
.somos-rpps-app[data-theme='dark'] .sr-post__menu .sr-iconbtn:hover {
	color: var(--sr-brand-300);
	background: rgba(96, 165, 250, .14);
}
.sr-post__menu .sr-iconbtn[aria-expanded='true'] {
	color: var(--sr-brand-700);
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-post__menu .sr-iconbtn[aria-expanded='true'] {
	color: var(--sr-brand-300);
	background: rgba(96, 165, 250, .14);
}
@keyframes sr-post-menu-pulse {
	0%   { transform: scale(1);    }
	55%  { transform: scale(1.18); }
	100% { transform: scale(1);    }
}

/* Nome do user: 1 linha com truncate (…) quando estourar o espaço
   disponível. NUNCA quebra em múltiplas linhas — se a badge avança
   sobre o nome, o nome é cortado com reticências antes de embolar. */
.sr-post__name {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.25;
}
/* Sub/Meta também não quebram feio quando o conteúdo é longo. */
.sr-post__sub,
.sr-post__meta { max-width: 100%; min-width: 0; }

/* =========================================================
   Mobile fine-tuning do PostCard
   =========================================================
   - Avatar mais compacto (era 64px, vira 40px).
   - Badge do tema com fonte 1px menor e mais compacta;
     se o tema for muito longo, quebra em 2 linhas (em vez
     de cortar com "…").
   - Garantia anti-overlap: usamos um pseudo-elemento FLOAT
     dentro da coluna do texto do cabeçalho, com a altura e
     largura aproximadas da badge. Isso força o nome do user
     a quebrar em múltiplas linhas ANTES de bater na badge,
     e a partir da segunda/terceira linha (abaixo da badge)
     volta a usar a largura cheia. É a mesma técnica usada
     pelo LinkedIn/Twitter pra wrap em torno de badges. */
@media (max-width: 639px) {
	.sr-post { padding: 14px 14px 4px; }

	.sr-post__head { padding-right: 0; gap: 10px; }

	.sr-post__avatar-wrap .sr-profile-avatar--md {
		width: 40px; height: 40px; font-size: 15px;
	}

	.sr-post__name { font-size: 15px; }
	.sr-post__sub  { font-size: 12px; }
	.sr-post__meta { font-size: 11px; }

	.sr-post__interest--corner {
		top: 12px; right: 12px;
		font-size: 11px;
		padding: 3px 9px;
		max-width: 50%;
		white-space: normal;
		text-overflow: clip;
		line-height: 1.15;
	}
	.sr-post__interest--corner .sr-icon svg { width: 11px; height: 11px; }

	/* Menu absoluto à direita; desce um pouco quando há badge
	   (a badge pode ocupar até 2 linhas se o tema for longo). */
	.sr-post__menu { top: 10px; right: 10px; }
	.sr-post:has(.sr-post__interest--corner) .sr-post__menu { top: 50px; }

	/*
	 * Anti-overlap nome × badge no mobile:
	 *  - O nome do user fica SEMPRE em 1 linha (regra global acima
	 *    já garante nowrap + ellipsis).
	 *  - Quando há badge no canto sup. direito, reservamos um
	 *    padding-right no head-text só o suficiente pra forçar o
	 *    ellipsis ANTES do nome encostar na badge.
	 *  - 45% do head-text aproxima bem a faixa da badge (que tem
	 *    max-width 50% do card e padding lateral pequeno). Se o
	 *    nome for curto, não é cortado; se for grande, vira "…".
	 *  - A mesma reserva afasta sub e meta da faixa da badge.
	 */
	.sr-post:has(.sr-post__interest--corner) .sr-post__head-text {
		padding-right: clamp(110px, 45%, 200px);
	}

	.sr-post__title { font-size: 17px; }
	.sr-post__body-text { font-size: 14px; }
}
.somos-rpps-app[data-theme='dark'] .sr-post__interest {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-300);
	border-color: rgba(96, 165, 250, .25);
}
.somos-rpps-app[data-theme='dark'] .sr-post__interest:hover {
	background: rgba(96, 165, 250, .2);
}

.sr-post__title {
	font-size: 20px; line-height: 1.3;
	font-weight: 700;
	color: var(--sr-fg);
	margin: 0 0 10px;
	letter-spacing: -.01em;
}

.sr-post__body { margin-bottom: 12px; }
.sr-post__body-text {
	white-space: pre-wrap;
	color: var(--sr-fg);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}
.sr-post__expand {
	background: none; border: none; padding: 4px 0;
	color: var(--sr-brand-700);
	font: inherit; font-weight: 600; font-size: 14px;
	cursor: pointer;
}
.somos-rpps-app[data-theme='dark'] .sr-post__expand { color: var(--sr-brand-300); }

/* Mídia: imagem(s) — agora SEMPRE via componente PostMediaImage que
   suporta carrossel (1..N). Para coerência com YouTube, o container
   sangra até as bordas do card. */
.sr-post__media { margin: 6px -18px 12px; }
@media (max-width: 639px) {
	/* No mobile o .sr-post tem padding lateral 14px (não 18), então a
	   margem negativa precisa bater pra evitar overflow lateral. */
	.sr-post__media { margin-left: -14px; margin-right: -14px; }
}

/* Wrapper do LinkPreview dentro do PostCard. Diferente do
   `.sr-post__media`, NÃO sangra lateralmente — fica dentro do padding
   do card como uma "barrinha de rodapé" antes das ações (curtir/comentar). */
.sr-post__linkbar-wrap { margin: 10px 0 14px; }
@media (max-width: 639px) { .sr-post__linkbar-wrap { margin: 8px 0 12px; } }

/* ============================================================
   POST CAROUSEL (estilo Instagram) — 1..10 imagens por post
   ============================================================ */
.sr-pcar {
	position: relative;
	background: var(--sr-bg-elev);
	border: 0;
	/*
	 * O sangramento lateral pra ocupar 100% da largura do card
	 * já é feito pelo wrapper `.sr-post__media` (margin: -18px lateral
	 * no desktop). Aqui NÃO duplicamos a margem — só finalizamos com
	 * fios horizontais finos de contorno superior/inferior pra separar
	 * o carrossel do conteúdo textual.
	 */
	border-top: 1px solid var(--sr-border);
	border-bottom: 1px solid var(--sr-border);
}
.sr-pcar__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	/*
	 * aspect-ratio inline (vindo do JS) define a proporção do viewport
	 * com base na primeira imagem clampada entre 4:5 e 16:9. Fallback
	 * 4:3 caso o componente seja renderizado sem dimensões.
	 */
	aspect-ratio: 4 / 3;
	background: var(--sr-bg);
}
.somos-rpps-app[data-theme='dark'] .sr-pcar__viewport { background: #0a1224; }
.sr-pcar__track {
	display: flex;
	width: 100%; height: 100%;
	transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.sr-pcar__slide {
	flex: 0 0 100%;
	width: 100%; height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	cursor: zoom-in;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.sr-pcar__slide img {
	width: 100%; height: 100%;
	/* object-fit dinâmico (contain quando dentro da faixa do clamp,
	   cover quando fora — definido inline pelo Vue). */
	object-position: center;
	display: block;
	-webkit-user-drag: none;
	user-select: none;
}

/*
 * Setas do carrossel — versão HIGH-VISIBILITY.
 *  - Mais altas e largas (44×44 desktop, 40×40 mobile).
 *  - Fundo branco translúcido com forte blur + sombra externa nítida.
 *  - Ícone azul institucional (não mais branco contra fundo escuro).
 *  - Visíveis o tempo todo (não escondidas até o hover). Hover só
 *    intensifica a sombra e o fundo.
 *  - Em telas muito pequenas, ficam mais discretas (32×32) pra não
 *    invadir a imagem, mas continuam nítidas.
 */
.sr-pcar__arrow {
	position: absolute;
	top: 50%;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--sr-brand-700);
	border: none;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 180ms, box-shadow 180ms, transform 180ms;
	box-shadow:
		0 6px 16px -4px rgba(15, 23, 42, .35),
		0 0 0 1px rgba(15, 23, 42, .08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.sr-pcar__arrow:hover {
	background: #ffffff;
	box-shadow:
		0 10px 24px -6px rgba(15, 23, 42, .45),
		0 0 0 1px rgba(15, 23, 42, .12);
	transform: translateY(-50%) scale(1.05);
}
.sr-pcar__arrow:disabled {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(.9);
}
.sr-pcar__arrow svg { width: 22px; height: 22px; }
.sr-pcar__arrow--prev { left: 12px; }
.sr-pcar__arrow--next { right: 12px; }
@media (max-width: 480px) {
	.sr-pcar__arrow { width: 36px; height: 36px; }
	.sr-pcar__arrow svg { width: 18px; height: 18px; }
}

.sr-pcar__counter {
	position: absolute;
	top: 12px; right: 12px;
	background: rgba(15, 23, 42, .68);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: .02em;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	pointer-events: none;
}

.sr-pcar__dots {
	display: flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 8px 10px 10px;
	background: var(--sr-bg-elev);
}
.sr-pcar__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sr-border-strong);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: width 200ms, background 200ms;
}
.sr-pcar__dot.is-active {
	background: var(--sr-brand-700);
	width: 20px;
	border-radius: 999px;
}
.somos-rpps-app[data-theme='dark'] .sr-pcar__dot.is-active { background: var(--sr-brand-300); }

/* ============================================================
   LIGHTBOX (imagem ampliada) — REDESENHO COMPACTO
   ============================================================
   Filosofia: NÃO é "tela cheia gigante". O objetivo é destacar a
   imagem do feed, mostrando sua proporção exata num modal CENTRADO
   e sóbrio. Imagem ocupa no máximo ~80vh / ~70vw, com card branco
   ao redor que abriga topbar (contador + Fechar), área da imagem e
   dots no rodapé. Backdrop preto translúcido cobre tudo e fecha ao
   clicar fora do card.

   IMPORTANTE: o elemento tem 3 classes — `.somos-rpps-app .sr-portal
   .sr-lightbox`. A regra base `.somos-rpps-app.sr-portal` define
   `background: transparent !important` (pra não cobrir a página).
   Por isso o backdrop do lightbox precisa de seletor mais específico
   pra vencer o `!important`.
   ============================================================ */
.somos-rpps-app.sr-portal.sr-lightbox {
	position: fixed; inset: 0;
	z-index: 9999;
	background: rgba(2, 6, 23, .78) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
@media (max-width: 540px) {
	.somos-rpps-app.sr-portal.sr-lightbox { padding: 12px; }
}

/* Card central — o "destaque" da imagem. */
.sr-lightbox__card {
	position: relative;
	background: var(--sr-bg-elev);
	color: var(--sr-fg);
	border-radius: var(--sr-radius-lg);
	box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Tamanho máximo SÓBRIO — ~80% do viewport. A imagem dentro
	   respeita o aspect-ratio real (contain), sem distorcer. */
	max-width: min(900px, 92vw);
	max-height: 90vh;
	width: auto;
}

/* Topbar: contador à esquerda, dica no centro, botão fechar à direita. */
.sr-lightbox__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--sr-border);
	background: var(--sr-bg-elev);
	flex-shrink: 0;
}
.sr-lightbox__bar-info {
	display: flex; align-items: center; gap: 12px;
	min-width: 0;
	flex: 1 1 auto;
}
.sr-lightbox__bar-counter {
	display: inline-flex; align-items: center;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	font-size: 13px; font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.somos-rpps-app[data-theme='dark'] .sr-lightbox__bar-counter {
	background: rgba(96, 165, 250, .15);
	color: var(--sr-brand-300);
}
.sr-lightbox__bar-hint {
	color: var(--sr-fg-muted);
	font-size: 12.5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	min-width: 0;
}
.sr-lightbox__bar-hint kbd {
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: 4px;
	font-size: 11px;
	font-family: 'Inter', system-ui, sans-serif;
	padding: 1px 6px;
	margin: 0 2px;
	color: var(--sr-fg);
}
@media (max-width: 540px) {
	.sr-lightbox__bar-hint { display: none; }
}

/* Botão Fechar — ícone + label, alto contraste sobre o card claro. */
.sr-lightbox__close {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--sr-bg);
	color: var(--sr-fg);
	border: 1px solid var(--sr-border);
	cursor: pointer;
	font: inherit; font-weight: 600; font-size: 13px;
	transition: background 180ms, color 180ms, border-color 180ms;
	flex-shrink: 0;
	width: auto; height: auto; position: static;
}
.sr-lightbox__close:hover {
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	border-color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-lightbox__close:hover {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-300);
	border-color: rgba(96, 165, 250, .35);
}
.sr-lightbox__close svg { width: 16px; height: 16px; }

/* Área da imagem — checker sutil pra contextualizar imagens com transparência. */
.sr-lightbox__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: var(--sr-bg);
	overflow: hidden;
}
.sr-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 4px;
	cursor: default;
	user-select: none;
	-webkit-user-drag: none;
}

/* Setas no lightbox — circulares brancas FORA do card, sobre o backdrop.
   Posicionadas em relação ao backdrop (fixed). */
.sr-lightbox__arrow {
	position: fixed;
	top: 50%;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--sr-brand-700);
	border: none;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transform: translateY(-50%);
	z-index: 10000;
	transition: background 180ms, transform 180ms, box-shadow 180ms;
	box-shadow: 0 8px 20px -4px rgba(0,0,0,.45), 0 0 0 1px rgba(15,23,42,.08);
}
.sr-lightbox__arrow:hover {
	background: #ffffff;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 12px 28px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(15,23,42,.12);
}
.sr-lightbox__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}
.sr-lightbox__arrow svg { width: 22px; height: 22px; }
.sr-lightbox__arrow--prev { left: 22px; }
.sr-lightbox__arrow--next { right: 22px; }
@media (max-width: 720px) {
	.sr-lightbox__arrow { width: 40px; height: 40px; }
	.sr-lightbox__arrow--prev { left: 10px; }
	.sr-lightbox__arrow--next { right: 10px; }
	.sr-lightbox__arrow svg { width: 18px; height: 18px; }
}

/* Dots no rodapé do card. */
.sr-lightbox__dots {
	display: flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 10px 16px 14px;
	background: var(--sr-bg-elev);
	border-top: 1px solid var(--sr-border);
	flex-shrink: 0;
}
.sr-lightbox__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sr-border-strong);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: width 200ms, background 200ms;
}
.sr-lightbox__dot:hover { background: var(--sr-fg-muted); }
.sr-lightbox__dot.is-active {
	background: var(--sr-brand-700);
	width: 22px;
	border-radius: 999px;
}
.somos-rpps-app[data-theme='dark'] .sr-lightbox__dot.is-active { background: var(--sr-brand-300); }

/* Mídia: YouTube embed */
.sr-yt { margin: 0; }
.sr-yt__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-top: 1px solid var(--sr-border);
	border-bottom: 1px solid var(--sr-border);
	overflow: hidden;
}
.sr-yt__thumb {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.sr-yt__iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	display: block;
}
.sr-yt__play {
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background var(--sr-transition);
}
.sr-yt__play:hover { background: rgba(0,0,0,.15); }
.sr-yt__play-shape {
	display: inline-flex; align-items: center; justify-content: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	background: rgba(255, 0, 0, .92);
	color: #ffffff;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .55);
	transition: transform var(--sr-transition);
}
.sr-yt__play:hover .sr-yt__play-shape { transform: scale(1.06); }
.sr-yt__play-shape svg { width: 30px; height: 30px; margin-left: 4px; }
.sr-yt__brand {
	position: absolute; bottom: 10px; right: 12px;
	background: rgba(0, 0, 0, .65);
	color: #ffffff;
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 3px 8px;
	border-radius: var(--sr-radius-sm);
	text-transform: uppercase;
}
.sr-yt__meta { padding: 10px 18px 4px; }
.sr-yt__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--sr-fg);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-yt__author { color: var(--sr-fg-subtle); font-size: 12px; }

/* Lightbox: estilos canônicos vivem mais acima neste arquivo (busque
   pelo bloco "LIGHTBOX (imagem ampliada) — reformulado"). Mantemos
   este marcador pra evitar regressões: qualquer alteração de lightbox
   deve ser feita lá em cima. */

/* Localização do post */
.sr-post__location {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--sr-fg-subtle);
	font-size: 12px;
	margin-bottom: 8px;
}
.sr-post__location .sr-icon svg { width: 12px; height: 12px; }

/* Footer do card (ações) */
.sr-post__foot {
	display: flex; align-items: center; gap: 4px;
	border-top: 1px solid var(--sr-border);
	margin: 0 -18px;
	padding: 4px 8px;
}
.sr-post__action {
	flex: 1 1 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 8px;
	background: transparent;
	border: none;
	color: var(--sr-fg-muted);
	font: inherit; font-size: 14px; font-weight: 500;
	cursor: pointer;
	border-radius: var(--sr-radius-md);
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-post__action:hover { background: var(--sr-bg); color: var(--sr-fg); }
.sr-post__action--like.is-liked { color: var(--sr-danger); }
.sr-post__action--like.is-liked .sr-icon { color: var(--sr-danger); }
.sr-post__action.is-busy { opacity: .6; pointer-events: none; }
.sr-post__action .sr-icon svg { width: 18px; height: 18px; }
.sr-post__action-count { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
	.sr-post__action-label { display: none; }
}

.sr-post__publicid {
	display: none;
	font-family: 'Inter', monospace;
	font-size: 10px;
	color: var(--sr-fg-subtle);
	letter-spacing: .02em;
	padding: 0 10px;
	white-space: nowrap;
}
@media (min-width: 720px) {
	.sr-post__publicid { display: inline; }
}

/* ============================================================
   LATERAL DO FEED (filtros + temas em alta)
   ============================================================ */
.sr-side-card {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 16px;
	box-shadow: var(--sr-shadow-sm);
}
.sr-side-card__title {
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sr-fg);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sr-side-card__title .sr-icon { color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-side-card__title .sr-icon { color: var(--sr-brand-300); }
.sr-side-card__title .sr-icon svg { width: 14px; height: 14px; }
.sr-side-card__hint { color: var(--sr-fg-muted); font-size: 13px; margin: 0 0 10px; }
.sr-side-card__text { color: var(--sr-fg-muted); font-size: 13px; margin: 0; line-height: 1.55; }
.sr-side-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-side-chip {
	padding: 6px 12px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	color: var(--sr-fg-muted);
	font: inherit; font-size: 12px; font-weight: 500;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition), border-color var(--sr-transition);
}
.sr-side-chip:hover { background: var(--sr-brand-50); color: var(--sr-brand-700); border-color: var(--sr-brand-200); }
.somos-rpps-app[data-theme='dark'] .sr-side-chip:hover {
	background: rgba(96, 165, 250, .12); color: var(--sr-brand-300); border-color: rgba(96, 165, 250, .25);
}
.sr-side-chip.is-active {
	background: var(--sr-brand-700);
	color: #ffffff;
	border-color: var(--sr-brand-700);
}
.sr-side-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-side-trend {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: none;
	border-radius: var(--sr-radius-md);
	color: var(--sr-fg);
	font: inherit; font-size: 14px; text-align: left;
	cursor: pointer;
}
.sr-side-trend:hover { background: var(--sr-bg); }
.sr-side-trend__rank {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	font-size: 12px; font-weight: 700;
	flex-shrink: 0;
}
.somos-rpps-app[data-theme='dark'] .sr-side-trend__rank { background: rgba(96, 165, 250, .12); color: var(--sr-brand-300); }
.sr-side-trend__label { font-weight: 500; }

/* Card "Dica para o feed" — cor sólida (sem gradiente), pra ficar
   consistente com o resto das caixas laterais (ex.: "Filtrar por tema"). */
.sr-side-card--tip { background: var(--sr-bg-elev); }
.somos-rpps-app[data-theme='dark'] .sr-side-card--tip { background: var(--sr-bg-elev); }

/* No mobile, escondemos a coluna lateral para focar no feed; deixamos
   o filtro de temas acessível por meio dos chips do composer e do botão
   "Limpar filtro" que aparece no header dos tabs. */
@media (max-width: 1079px) {
	.sr-feed__side { display: none; }
}

/* ============================================================
   COMPOSER MODAL (criar/editar post)
   ============================================================ */
.sr-modal__card--composer {
	max-width: 640px;
	width: calc(100vw - 32px);
	display: flex; flex-direction: column;
	max-height: calc(100vh - 40px);
}
.sr-comp__head { border-bottom: 1px solid var(--sr-border); }
.sr-comp__body {
	overflow-y: auto;
	padding-bottom: 12px;
	display: flex; flex-direction: column; gap: 14px;
}
.sr-comp__author {
	display: flex; align-items: center; gap: 12px;
}
.sr-comp__author .sr-profile-avatar__camera { display: none; }
.sr-comp__author-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-comp__author-name { font-weight: 600; }
.sr-comp__interest-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	color: var(--sr-fg-muted);
	font: inherit; font-size: 12px;
	cursor: pointer;
	align-self: flex-start;
	max-width: 100%;
}
.sr-comp__interest-btn:hover { background: var(--sr-brand-50); color: var(--sr-brand-700); border-color: var(--sr-brand-200); }
.somos-rpps-app[data-theme='dark'] .sr-comp__interest-btn:hover { background: rgba(96, 165, 250, .12); color: var(--sr-brand-300); border-color: rgba(96, 165, 250, .25); }
.sr-comp__interest-btn .sr-icon svg { width: 12px; height: 12px; }
.sr-comp__interest-placeholder { color: var(--sr-fg-subtle); font-style: italic; }

.sr-comp__interests {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 10px;
	background: var(--sr-bg);
	border-radius: var(--sr-radius-md);
	border: 1px solid var(--sr-border);
}
.sr-comp__interests .sr-inttag { padding: 4px 12px; font-size: 12px; }
.sr-comp__interests .sr-inttag__check { width: 14px; height: 14px; }
.sr-comp__interests .sr-inttag__check svg { width: 10px; height: 10px; }
/* Chip sugerido: pulsa levemente no início pra atrair o olhar do usuário. */
.sr-inttag--suggested {
	background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .04));
	border-color: rgba(245, 158, 11, .35);
	color: #b45309;
	animation: sr-suggest-pulse 1.5s ease-out 2;
}
.somos-rpps-app[data-theme='dark'] .sr-inttag--suggested {
	background: rgba(251, 191, 36, .15);
	border-color: rgba(251, 191, 36, .35);
	color: #fbbf24;
}
@keyframes sr-suggest-pulse {
	0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .35); }
	100% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

.sr-comp__field { display: flex; flex-direction: column; gap: 6px; }
.sr-comp__title-input {
	width: 100%;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	color: var(--sr-fg);
	letter-spacing: -.01em;
	padding: 6px 0;
	line-height: 1.3;
}
.sr-comp__title-input::placeholder { color: var(--sr-fg-subtle); font-weight: 600; }
.sr-comp__title-input:focus { outline: none; }
.sr-comp__title-meta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	color: var(--sr-fg-subtle);
	font-size: 12px;
}
.sr-comp__counter { color: var(--sr-fg-subtle); font-variant-numeric: tabular-nums; }
.sr-comp__counter.is-warn { color: var(--sr-warning); font-weight: 600; }
.sr-comp__sugg {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--sr-fg-muted);
}
.sr-comp__sugg .sr-icon svg { width: 14px; height: 14px; color: #d97706; }
.somos-rpps-app[data-theme='dark'] .sr-comp__sugg .sr-icon svg { color: #fbbf24; }
.sr-comp__sugg strong { color: var(--sr-fg); }
.sr-comp__sugg-accept {
	background: var(--sr-brand-700); color: #ffffff;
	border: none;
	padding: 2px 10px;
	border-radius: var(--sr-radius-pill);
	font: inherit; font-size: 11px; font-weight: 600;
	cursor: pointer;
	margin-left: 4px;
}
.sr-comp__sugg-accept:hover { background: var(--sr-brand-800); }
.sr-comp__sugg--ok { color: var(--sr-success); }
.sr-comp__sugg--ok .sr-icon svg { color: var(--sr-success); }
.sr-comp__sugg-loading { color: var(--sr-fg-subtle); font-style: italic; }

.sr-comp__body-input {
	width: 100%;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 16px;
	color: var(--sr-fg);
	line-height: 1.6;
	resize: vertical;
	min-height: 120px;
}
.sr-comp__body-input::placeholder { color: var(--sr-fg-subtle); }
.sr-comp__body-input:focus { outline: none; }

/* Bloco de mídia anexada ao composer.
   Visual mais profissional: header com label "Você adicionou…",
   preview na proporção real do post final, hint embaixo. */
.sr-comp__media-block {
	display: flex; flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
}
.sr-comp__media-block-head {
	display: flex; align-items: center; gap: 8px;
	color: var(--sr-fg);
	font-size: 14px;
}
.sr-comp__media-block-head .sr-icon { color: var(--sr-brand-700); flex-shrink: 0; }
.somos-rpps-app[data-theme='dark'] .sr-comp__media-block-head .sr-icon { color: var(--sr-brand-300); }
.sr-comp__media-block-head .sr-icon svg { width: 18px; height: 18px; }
.sr-comp__media-block-head > span { flex: 1 1 auto; }
.sr-comp__media-block-head strong { color: var(--sr-fg); }
.sr-comp__media-clear { font-size: 13px; }

.sr-comp__media-preview {
	position: relative;
	border-radius: var(--sr-radius-sm);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--sr-border);
}
.sr-comp__media-preview--yt { padding: 0; aspect-ratio: 16 / 9; }
.sr-comp__media-preview--yt .sr-yt { width: 100%; height: 100%; }
.sr-comp__media-preview--yt .sr-yt__frame { border-top: none; border-bottom: none; height: 100%; }
.sr-comp__media-preview--image { background: var(--sr-bg-elev); }
.sr-comp__media-preview--link { padding: 0; background: transparent; }

/* Texto-guia abaixo do input de link */
.sr-comp__link-help {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--sr-fg-muted);
	padding-left: 28px;
}

/* ============================================================
   LINK PREVIEW BAR (composer + feed) — barra compacta sem thumb
   ============================================================
   Por que sem thumbnail? Sites variam DEMAIS na qualidade do og:image
   (alguns têm, outros não, muitos têm imagens horríveis). Sinalização
   visual de "este post tem link" passa a ser feita por um SELO azul
   institucional fixo (corrente branca em quadradinho), sempre igual.
   Layout: [selo] | host + descrição (trim 1–2 linhas) | CTA "Abrir
   no site original". Encaixado, sóbrio, alto contraste e clicável.
   ============================================================ */
.sr-linkbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	text-decoration: none;
	color: var(--sr-fg);
	transition: border-color var(--sr-transition), background var(--sr-transition);
	cursor: pointer;
	min-height: 60px;
}
.sr-linkbar:hover {
	border-color: var(--sr-brand-300);
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-linkbar:hover {
	border-color: rgba(96, 165, 250, .45);
	background: rgba(96, 165, 250, .08);
}

/* Selo azul fixo — bate o olho e identifica "link externo". */
.sr-linkbar__icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--sr-brand-500), var(--sr-brand-700));
	color: #ffffff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 10px -2px rgba(29, 78, 216, .35);
}
.sr-linkbar__icon svg { width: 20px; height: 20px; }

/* Corpo (host + descrição). min-width:0 + overflow:hidden é essencial
   pra o text-overflow:ellipsis funcionar em layout flex. */
.sr-linkbar__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex; flex-direction: column;
	gap: 2px;
}
.sr-linkbar__host {
	font-size: 13px;
	font-weight: 700;
	color: var(--sr-fg);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-linkbar__desc {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sr-fg-muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA à direita: label no desktop, só ícone no mobile. */
.sr-linkbar__cta {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--sr-brand-700);
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid transparent;
	transition: background var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition);
}
.sr-linkbar__cta svg { width: 14px; height: 14px; }
.sr-linkbar:hover .sr-linkbar__cta {
	background: #ffffff;
	border-color: var(--sr-brand-200);
}
.somos-rpps-app[data-theme='dark'] .sr-linkbar__cta { color: var(--sr-brand-300); }
.somos-rpps-app[data-theme='dark'] .sr-linkbar:hover .sr-linkbar__cta {
	background: var(--sr-bg-elev);
	border-color: rgba(96, 165, 250, .45);
}

@media (max-width: 639px) {
	.sr-linkbar { padding: 8px 10px; gap: 10px; min-height: 56px; }
	.sr-linkbar__icon { width: 36px; height: 36px; border-radius: 9px; }
	.sr-linkbar__icon svg { width: 18px; height: 18px; }
	.sr-linkbar__desc { display: none; }      /* prioriza host + CTA no mobile */
	.sr-linkbar__cta-label { display: none; } /* só ícone */
	.sr-linkbar__cta { padding: 6px 8px; }
}

.sr-comp__media-hint {
	margin: 0;
	color: var(--sr-fg-subtle);
	font-size: 12px;
}

/* Carrossel HORIZONTAL do composer (preview de múltiplas imagens).
   Cada slide tem aspect 4:3 fixa pra dar consistência visual; rola
   nativamente com scroll touch (snap em cada slide). */
.sr-comp__carousel {
	display: flex;
	gap: 8px;
	padding: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.sr-comp__carousel::-webkit-scrollbar { height: 8px; }
.sr-comp__carousel::-webkit-scrollbar-thumb { background: var(--sr-border-strong); border-radius: 999px; }
.sr-comp__carousel-slide {
	position: relative;
	flex: 0 0 auto;
	width: clamp(180px, 45%, 260px);
	aspect-ratio: 4 / 3;
	border-radius: var(--sr-radius-sm);
	overflow: hidden;
	background: #111;
	scroll-snap-align: start;
}
.sr-comp__carousel-slide img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}
.sr-comp__carousel-badge {
	position: absolute;
	top: 6px; left: 6px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 11px; font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}
.sr-comp__carousel-tools {
	position: absolute;
	top: 6px; right: 6px;
	display: flex; gap: 4px;
}
.sr-comp__carousel-tool {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	border: none;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.sr-comp__carousel-tool:hover { background: rgba(0, 0, 0, .85); }
.sr-comp__carousel-tool:disabled { opacity: .35; cursor: not-allowed; }
.sr-comp__carousel-tool svg { width: 14px; height: 14px; }
.sr-comp__carousel-tool--danger:hover { background: var(--sr-danger); }

.sr-comp__carousel-add {
	flex: 0 0 auto;
	width: clamp(140px, 35%, 200px);
	aspect-ratio: 4 / 3;
	border-radius: var(--sr-radius-sm);
	background: var(--sr-bg-elev);
	border: 2px dashed var(--sr-border-strong);
	color: var(--sr-fg-muted);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px;
	cursor: pointer;
	font: inherit; font-size: 12px; font-weight: 600;
	text-align: center;
	line-height: 1.2;
}
.sr-comp__carousel-add:hover { border-color: var(--sr-brand-300); color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-comp__carousel-add:hover { color: var(--sr-brand-300); }
.sr-comp__carousel-add:disabled { opacity: .5; cursor: not-allowed; }
.sr-comp__carousel-add .sr-icon svg { width: 22px; height: 22px; }

/* ============================================================
   Barra de progresso de upload de imagens (composer)
   ============================================================
   Cartão dedicado com header "Estamos publicando…" + percentual
   à direita + barra animada com gradiente institucional.
   Animação shimmer leve durante o progresso.
   ============================================================ */
.sr-comp__upload-bar {
	display: flex; flex-direction: column; gap: 8px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--sr-brand-50), var(--sr-bg-elev));
	border: 1px solid var(--sr-brand-200);
	border-radius: var(--sr-radius-md);
	box-shadow: 0 6px 16px -8px rgba(29, 78, 216, .18);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__upload-bar {
	background: linear-gradient(135deg, rgba(29, 78, 216, .14), var(--sr-bg-elev));
	border-color: rgba(96, 165, 250, .35);
}
.sr-comp__upload-bar-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px;
	color: var(--sr-fg);
	font-size: 14px;
	font-weight: 500;
}
.sr-comp__upload-bar-label { flex: 1 1 auto; }
.sr-comp__upload-bar-count {
	color: var(--sr-fg-muted);
	font-weight: 400;
	margin-left: 4px;
}
.sr-comp__upload-bar-pct {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--sr-brand-700);
	font-size: 15px;
	flex-shrink: 0;
}
.somos-rpps-app[data-theme='dark'] .sr-comp__upload-bar-pct { color: var(--sr-brand-300); }
.sr-comp__upload-bar-track {
	position: relative;
	width: 100%;
	height: 8px;
	background: rgba(15, 23, 42, .08);
	border-radius: 999px;
	overflow: hidden;
}
.somos-rpps-app[data-theme='dark'] .sr-comp__upload-bar-track {
	background: rgba(255, 255, 255, .08);
}
.sr-comp__upload-bar-fill {
	position: relative;
	height: 100%;
	background: linear-gradient(90deg, var(--sr-brand-500), var(--sr-brand-700));
	border-radius: 999px;
	transition: width 250ms cubic-bezier(.22, .61, .36, 1);
	box-shadow: 0 0 0 1px rgba(29, 78, 216, .15);
}
.sr-comp__upload-bar-fill::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 255, 255, .35) 50%,
		transparent 100%);
	transform: translateX(-100%);
	animation: sr-upload-shimmer 1.4s linear infinite;
}
@keyframes sr-upload-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%);  }
}

.sr-comp__yt-input {
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 12px;
}
.sr-comp__yt-row {
	display: flex; align-items: center; gap: 8px;
}
.sr-comp__yt-row .sr-icon { color: var(--sr-brand-700); flex-shrink: 0; }
.somos-rpps-app[data-theme='dark'] .sr-comp__yt-row .sr-icon { color: var(--sr-brand-300); }
.sr-comp__yt-row .sr-icon svg { width: 20px; height: 20px; }
.sr-comp__yt-row .sr-input { flex: 1 1 auto; min-width: 0; }
.sr-comp__yt-err { color: var(--sr-danger); font-size: 13px; margin-top: 8px; }

.sr-comp__location-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-brand-50);
	color: var(--sr-brand-700);
	border: 1px solid var(--sr-brand-200);
	font-size: 13px;
	align-self: flex-start;
}
.somos-rpps-app[data-theme='dark'] .sr-comp__location-chip {
	background: rgba(96, 165, 250, .12);
	color: var(--sr-brand-300);
	border-color: rgba(96, 165, 250, .25);
}
.sr-comp__location-chip .sr-icon svg { width: 12px; height: 12px; }
.sr-comp__location-chip button {
	background: none; border: none; color: inherit; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 2px; border-radius: 50%;
}
.sr-comp__location-chip button:hover { background: rgba(0,0,0,.06); }
.sr-comp__location-chip button svg { width: 12px; height: 12px; }

.sr-comp__schedule {
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.sr-comp__schedule-head {
	display: flex; align-items: center; gap: 8px;
}
.sr-comp__schedule-head strong { flex: 1 1 auto; }
.sr-comp__schedule-head .sr-icon { color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-comp__schedule-head .sr-icon { color: var(--sr-brand-300); }
.sr-comp__schedule-hint { color: var(--sr-fg-muted); font-size: 13px; margin: 0; }

.sr-comp__addbar {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
}
.sr-comp__addbar-label {
	font-weight: 600;
	color: var(--sr-fg);
	font-size: 14px;
	flex: 1 1 auto;
}
.sr-comp__addbar-actions {
	display: flex; align-items: center; gap: 4px;
}
.sr-comp__addbtn {
	width: 40px; height: 40px;
	border-radius: var(--sr-radius-md);
	background: transparent; border: none;
	color: var(--sr-fg-muted);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-comp__addbtn:hover {
	background: var(--sr-bg-elev);
	color: var(--sr-brand-700);
}
.sr-comp__addbtn:disabled { opacity: .4; cursor: not-allowed; }
.sr-comp__addbtn .sr-icon svg { width: 22px; height: 22px; }
/* Cores específicas dos botões "estilo Facebook" — facilita reconhecimento. */
.sr-comp__addbar-actions .sr-comp__addbtn:nth-child(1) { color: #16a34a; } /* foto verde */
.sr-comp__addbar-actions .sr-comp__addbtn:nth-child(2) { color: #dc2626; } /* vídeo vermelho */
.sr-comp__addbar-actions .sr-comp__addbtn:nth-child(3) { color: #2563eb; } /* marcar azul */
.sr-comp__addbar-actions .sr-comp__addbtn:nth-child(4) { color: #ef4444; } /* local vermelho-rosa */

.sr-comp__actions {
	position: relative;       /* ancora pro chip flutuante de "tema faltando" */
	border-top: 1px solid var(--sr-border);
	background: var(--sr-bg-elev);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 14px 22px;
}
.sr-comp__actions .sr-btn { gap: 6px; }
/* "Descartar rascunho" fica à esquerda; "Publicar" empurrado pra direita. */
.sr-comp__discard { color: var(--sr-fg-muted); }
.sr-comp__publish { margin-left: auto; min-width: 160px; justify-content: center; }

/* Quando o user tem título+conteúdo mas falta o tema, o botão Publicar
   ganha um visual de "atenção" (laranja sutil) e fica CLICÁVEL —
   o click dispara a guidance em vez de submeter. */
.sr-comp__publish--needs-theme {
	background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
	box-shadow: 0 8px 20px -8px rgba(234, 88, 12, .55);
}
.sr-comp__publish--needs-theme:hover {
	background: linear-gradient(135deg, #ea580c, #c2410c) !important;
}

/*
 * Chip flutuante "Escolha um Tema para publicar este post."
 * Visual: cartão arredondado, sombra suave, ícone de tag em pílula
 * laranja, mensagem em duas linhas, CTA "Escolher agora". Posicionado
 * ACIMA da barra de ações com um pequeno triângulo apontando para o
 * botão Publicar.
 */
.sr-comp__theme-hint {
	position: absolute;
	left: 22px; right: 22px;
	bottom: calc(100% + 12px);
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: var(--sr-bg-elev);
	border: 1px solid rgba(245, 158, 11, .55);
	border-radius: var(--sr-radius-md);
	box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .25),
				0 4px 10px -4px rgba(245, 158, 11, .25);
	z-index: 5;
}
.sr-comp__theme-hint::after {
	content: '';
	position: absolute;
	bottom: -7px; right: 90px;
	width: 14px; height: 14px;
	background: var(--sr-bg-elev);
	border-right: 1px solid rgba(245, 158, 11, .55);
	border-bottom: 1px solid rgba(245, 158, 11, .55);
	transform: rotate(45deg);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint {
	background: #1a2540;
	border-color: rgba(251, 191, 36, .45);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint::after {
	background: #1a2540;
	border-right-color: rgba(251, 191, 36, .45);
	border-bottom-color: rgba(251, 191, 36, .45);
}
.sr-comp__theme-hint-icon {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .08));
	color: #b45309;
	box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint-icon { color: #fbbf24; }
.sr-comp__theme-hint-icon svg { width: 18px; height: 18px; }
.sr-comp__theme-hint-body {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; line-height: 1.3;
	color: var(--sr-fg);
}
.sr-comp__theme-hint-body strong { font-weight: 700; font-size: 14px; }
.sr-comp__theme-hint-body span   { font-size: 13px; color: var(--sr-fg-muted); }
.sr-comp__theme-hint-cta {
	flex-shrink: 0;
	background: var(--sr-brand-700);
	color: #ffffff;
	border: none;
	padding: 8px 14px;
	border-radius: 999px;
	font: inherit; font-size: 13px; font-weight: 600;
	cursor: pointer;
	transition: background var(--sr-transition);
}
.sr-comp__theme-hint-cta:hover { background: var(--sr-brand-800); }
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint-cta { background: var(--sr-brand-500); }
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint-cta:hover { background: var(--sr-brand-700); }

/* Pulse + estado "missing" no botão de tema (header do modal). */
.sr-comp__interest-btn.is-missing {
	background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(245, 158, 11, .05));
	border-color: rgba(245, 158, 11, .55);
	color: #b45309;
}
.somos-rpps-app[data-theme='dark'] .sr-comp__interest-btn.is-missing {
	background: rgba(251, 191, 36, .12);
	border-color: rgba(251, 191, 36, .45);
	color: #fbbf24;
}
.sr-comp__interest-btn.is-pulse {
	animation: sr-theme-pulse 1.3s cubic-bezier(.22, .61, .36, 1) 2;
}
@keyframes sr-theme-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(245, 158, 11, .55); transform: scale(1); }
	35%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);  transform: scale(1.05); }
	100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0);  transform: scale(1); }
}

/* ============================================================
   TÍTULO faltando — UX-guia gêmea da do tema, em tom AZUL.
   ============================================================
   Usa o mesmo container `.sr-comp__theme-hint` com modifier
   `--title`, trocando a paleta de âmbar pra azul institucional
   pra diferenciar visualmente do hint de tema (caso o user
   tenha visto os dois em sequência).
   ============================================================ */
.sr-comp__theme-hint--title {
	background: linear-gradient(135deg, var(--sr-brand-50), var(--sr-bg-elev));
	border-color: var(--sr-brand-200);
	color: var(--sr-brand-700);
}
.sr-comp__theme-hint--title::after {
	background: var(--sr-bg-elev);
	border-right-color: var(--sr-brand-200);
	border-bottom-color: var(--sr-brand-200);
}
.sr-comp__theme-hint--title .sr-comp__theme-hint-icon {
	background: var(--sr-brand-100);
	color: var(--sr-brand-700);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint--title {
	background: linear-gradient(135deg, rgba(29, 78, 216, .15), var(--sr-bg-elev));
	border-color: rgba(96, 165, 250, .35);
	color: var(--sr-brand-300);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__theme-hint--title .sr-comp__theme-hint-icon {
	background: rgba(96, 165, 250, .14);
	color: var(--sr-brand-300);
}

/* Input do título: pulse + outline destacado quando "missing". */
.sr-comp__title-input.is-missing {
	border-color: var(--sr-brand-400) !important;
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-comp__title-input.is-missing {
	background: rgba(96, 165, 250, .08);
	border-color: rgba(96, 165, 250, .55) !important;
}
.sr-comp__title-input.is-pulse {
	animation: sr-title-pulse 1.3s cubic-bezier(.22, .61, .36, 1) 2;
}
@keyframes sr-title-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(37, 99, 235, .55); }
	35%  { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);  }
	100% { box-shadow: 0 0 0 0   rgba(37, 99, 235, 0);   }
}

/* Botão Publicar — modifier dedicado pra "falta título" (azul mais
   chamativo do que o estado idle, sem ser alarmista). Para "falta
   tema" mantemos o gradiente âmbar já existente. */
.sr-comp__publish--needs-title {
	background: linear-gradient(135deg, var(--sr-brand-500), var(--sr-brand-700)) !important;
	box-shadow: 0 6px 16px -4px rgba(29, 78, 216, .45) !important;
}
.sr-comp__publish--needs-title:hover {
	background: linear-gradient(135deg, var(--sr-brand-700), var(--sr-brand-800)) !important;
}

/* Alerta discreto de "Limite atingido" — substitui a contagem persistente. */
.sr-comp__limit-warn {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sr-warning, #b45309);
	margin-left: auto;
}
.somos-rpps-app[data-theme='dark'] .sr-comp__limit-warn { color: #fbbf24; }
.sr-comp__limit-warn::before {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}

@media (max-width: 540px) {
	.sr-comp__actions { padding: 12px 14px; }
	.sr-comp__actions .sr-btn { flex: 1 1 auto; justify-content: center; }
	.sr-comp__publish { margin-left: 0; min-width: 0; }
	.sr-comp__theme-hint {
		left: 14px; right: 14px;
		flex-wrap: wrap;
	}
	.sr-comp__theme-hint::after { right: 50%; transform: translateX(50%) rotate(45deg); }
	.sr-comp__theme-hint-cta { width: 100%; padding: 10px 14px; }
}

/* ==========================================================
   BOTÃO "PERIGO" (sr-btn--danger)
   Usado pela modal de confirmação para Deixar de Seguir.
   Padrão visual coerente com sr-btn--primary, mas tonalidade
   vermelha sóbria — sem virar gritante como "delete account".
   ========================================================== */
.sr-btn--danger {
	background: #dc2626;
	color: #fff;
	border-color: #dc2626;
}
.sr-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.sr-btn--danger:focus-visible { outline: 3px solid rgba(220, 38, 38, .45); outline-offset: 2px; }
.somos-rpps-app[data-theme='dark'] .sr-btn--danger { background: #ef4444; border-color: #ef4444; }
.somos-rpps-app[data-theme='dark'] .sr-btn--danger:hover { background: #dc2626; border-color: #dc2626; }

/* ==========================================================
   POSTCARD: badge SEGUIR / SEGUINDO
   Aparece IMEDIATAMENTE abaixo do nome do autor. Chip pequeno,
   sóbrio, alinhado à linha tipográfica do header.
   - Estado "Seguir {Nome}" : pílula azul institucional outline.
   - Estado "Seguindo"      : pílula neutra; hover vira "perigo".
   ========================================================== */
.sr-post__followbadge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--sr-brand-500);
	background: transparent;
	color: var(--sr-brand-700);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: background var(--sr-transition), color var(--sr-transition),
		border-color var(--sr-transition), transform .12s ease;
}
.sr-post__followbadge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.sr-post__followbadge:hover {
	background: var(--sr-brand-700);
	color: #fff;
	border-color: var(--sr-brand-700);
}
.sr-post__followbadge:active { transform: scale(.98); }
.sr-post__followbadge:focus-visible { outline: 2px solid var(--sr-brand-500); outline-offset: 2px; }
.sr-post__followbadge.is-busy { opacity: .65; cursor: progress; }
.sr-post__followbadge.is-following {
	border-color: var(--sr-border-strong);
	background: var(--sr-bg);
	color: var(--sr-fg-muted);
}
.sr-post__followbadge.is-following:hover {
	background: rgba(220, 38, 38, .08);
	color: #b91c1c;
	border-color: #fca5a5;
}
.somos-rpps-app[data-theme='dark'] .sr-post__followbadge { color: var(--sr-brand-300); border-color: var(--sr-brand-500); }
.somos-rpps-app[data-theme='dark'] .sr-post__followbadge:hover { background: var(--sr-brand-700); color: #fff; }
.somos-rpps-app[data-theme='dark'] .sr-post__followbadge.is-following { color: var(--sr-fg-muted); border-color: var(--sr-border-strong); background: var(--sr-bg-elev); }
.somos-rpps-app[data-theme='dark'] .sr-post__followbadge.is-following:hover { background: rgba(239, 68, 68, .15); color: #fca5a5; border-color: #ef4444; }

/* ==========================================================
   UNFOLLOW CONFIRM MODAL
   Diálogo central, sobrio, focado em UMA ação. Overlay com blur,
   card de 380px, avatar grande, dois CTAs.
   ========================================================== */
.sr-unfollow-modal {
	position: fixed; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 1000;
	padding: 20px;
}
.sr-unfollow-modal__card {
	width: min(420px, 100%);
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 28px 28px 22px;
	box-shadow: var(--sr-shadow-lg, 0 22px 60px -20px rgba(0, 0, 0, .35));
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sr-unfollow-modal__avatar { margin-top: 4px; }
.sr-unfollow-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sr-fg);
	line-height: 1.35;
}
.sr-unfollow-modal__title strong { color: var(--sr-fg); }
.sr-unfollow-modal__desc {
	margin: 0;
	font-size: 14px;
	color: var(--sr-fg-muted);
	line-height: 1.55;
}
.sr-unfollow-modal__actions {
	display: flex; gap: 10px; width: 100%; margin-top: 8px;
}
.sr-unfollow-modal__actions .sr-btn { flex: 1 1 0; justify-content: center; padding: 11px 14px; }
@media (max-width: 460px) {
	.sr-unfollow-modal__card { padding: 22px 20px 18px; }
	.sr-unfollow-modal__actions { flex-direction: column-reverse; }
	.sr-unfollow-modal__actions .sr-btn { width: 100%; }
}

/* ==========================================================
   INTERNAL PROFILE VIEW (/usuario/{slug})
   Perfil interno de OUTRO usuário, embarcado no AppShell.
   Estrutura: hero (avatar+nome+cidade+membro) → barra de
   relação (counts + botão Seguir) → seções (Sobre, Redes,
   Temas, Experiência). Visual coerente com PublicProfileView.
   ========================================================== */
.sr-intprof {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 880px;
	margin: 0 auto;
	width: 100%;
}
.sr-intprof__loading,
.sr-intprof__notfound {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px;
	padding: 80px 20px;
	text-align: center;
	color: var(--sr-fg-muted);
}
.sr-intprof__notfound-icon {
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--sr-brand-50); color: var(--sr-brand-700);
	display: inline-flex; align-items: center; justify-content: center;
}
.somos-rpps-app[data-theme='dark'] .sr-intprof__notfound-icon { background: rgba(96, 165, 250, .15); color: var(--sr-brand-300); }
.sr-intprof__notfound h2 { margin: 4px 0 0; color: var(--sr-fg); font-size: 22px; }

/* --- HERO --- */
.sr-intprof__hero {
	position: relative;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 30px 24px 24px;
	box-shadow: var(--sr-shadow-sm);
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 6px;
}
.sr-intprof__hero-avatar { margin-bottom: 4px; }
.sr-intprof__hero-avatar .sr-profile-avatar__camera { display: none; }
.sr-intprof__name {
	margin: 4px 0 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sr-fg);
}
.sr-intprof__role { color: var(--sr-brand-700); font-weight: 600; font-size: 14.5px; }
.somos-rpps-app[data-theme='dark'] .sr-intprof__role { color: var(--sr-brand-300); }
.sr-intprof__city {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--sr-fg-muted); font-size: 13.5px; margin-top: 2px;
}
.sr-intprof__city svg { width: 14px; height: 14px; }
.sr-intprof__member { font-size: 12.5px; color: var(--sr-fg-subtle); margin-top: 2px; line-height: 1.4; }
.sr-intprof__member strong { color: var(--sr-fg-muted); font-weight: 600; }
.somos-rpps-app[data-theme='dark'] .sr-intprof__member strong { color: var(--sr-fg); }

/* QR Code do hero — mesma estética do PublicProfile. */
.sr-intprof__qr {
	position: absolute; top: 14px; right: 14px;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--sr-border);
	background: var(--sr-bg-elev);
	color: var(--sr-brand-700);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: var(--sr-shadow-sm);
	transition: transform var(--sr-transition), color var(--sr-transition),
		background var(--sr-transition), border-color var(--sr-transition);
	z-index: 2;
}
.sr-intprof__qr:hover { transform: translateY(-1px); color: #fff; background: var(--sr-brand-700); border-color: var(--sr-brand-700); }
.sr-intprof__qr:focus-visible { outline: 3px solid var(--sr-brand-500); outline-offset: 2px; }
.sr-intprof__qr svg { width: 20px; height: 20px; }
.somos-rpps-app[data-theme='dark'] .sr-intprof__qr { color: var(--sr-brand-300); }

/* --- BARRA DE RELAÇÃO (counts + CTA seguir) --- */
.sr-intprof__relbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 16px 22px;
	box-shadow: var(--sr-shadow-sm);
}
.sr-intprof__counts {
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
}
.sr-intprof__count {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0;
	min-width: 64px;
}
.sr-intprof__count-num {
	font-size: 22px; font-weight: 800; color: var(--sr-fg);
	letter-spacing: -.02em; line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.sr-intprof__count-label {
	font-size: 12px; color: var(--sr-fg-muted);
	text-transform: lowercase; letter-spacing: .02em; margin-top: 2px;
}
.sr-intprof__count-sep {
	width: 1px; height: 28px; background: var(--sr-border);
}
.sr-intprof__relcta { display: inline-flex; align-items: center; gap: 10px; }
.sr-intprof__followbtn {
	min-width: 140px; justify-content: center;
	padding: 10px 18px; font-weight: 700;
	transition: background var(--sr-transition), color var(--sr-transition),
		border-color var(--sr-transition), transform .12s ease;
}
.sr-intprof__followbtn svg { width: 16px; height: 16px; }
.sr-intprof__followbtn:active { transform: scale(.98); }
.sr-intprof__followbtn--following.is-hover {
	background: rgba(220, 38, 38, .08);
	color: #b91c1c;
	border-color: #fca5a5;
}
.somos-rpps-app[data-theme='dark'] .sr-intprof__followbtn--following.is-hover {
	background: rgba(239, 68, 68, .15);
	color: #fca5a5;
	border-color: #ef4444;
}
.sr-intprof__followsyou {
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	background: var(--sr-bg);
	border: 1px solid var(--sr-border);
	color: var(--sr-fg-muted);
	padding: 4px 8px; border-radius: 6px;
}
.sr-intprof__selflabel {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600;
	color: var(--sr-fg-muted);
	padding: 8px 14px;
	border: 1px dashed var(--sr-border-strong);
	border-radius: var(--sr-radius-md);
	background: var(--sr-bg);
}
.sr-intprof__selflabel svg { width: 14px; height: 14px; color: var(--sr-brand-700); }
.somos-rpps-app[data-theme='dark'] .sr-intprof__selflabel svg { color: var(--sr-brand-300); }

@media (max-width: 620px) {
	.sr-intprof__relbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
	.sr-intprof__counts { justify-content: space-around; gap: 8px 12px; }
	.sr-intprof__count { align-items: center; text-align: center; }
	.sr-intprof__relcta { justify-content: center; flex-wrap: wrap; }
	.sr-intprof__followbtn { width: 100%; min-width: 0; }
	.sr-intprof__followsyou { width: 100%; text-align: center; }
}

/* --- SEÇÕES (Sobre, Redes, Temas, Experiência) --- */
.sr-intprof__section { display: flex; flex-direction: column; gap: 10px; }
.sr-intprof__section-title {
	font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.01em;
	color: var(--sr-fg);
}
.sr-intprof__text {
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: 18px 20px;
	white-space: pre-wrap;
	line-height: 1.65;
	color: var(--sr-fg);
}
.sr-intprof__socials {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.sr-intprof__socials a {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	background: var(--sr-bg-elev);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-md);
	padding: 12px 14px;
	color: var(--sr-fg);
	text-decoration: none;
	font-size: 13.5px;
	transition: border-color var(--sr-transition), color var(--sr-transition), background var(--sr-transition);
	min-width: 0;
}
.sr-intprof__socials a:hover {
	border-color: var(--sr-brand-500);
	color: var(--sr-brand-700);
	background: var(--sr-brand-50);
}
.somos-rpps-app[data-theme='dark'] .sr-intprof__socials a:hover {
	color: var(--sr-brand-300);
	background: rgba(96, 165, 250, .08);
}
.sr-intprof__socials-label {
	font-weight: 700; font-size: 12px; text-transform: uppercase;
	letter-spacing: .04em; color: var(--sr-fg-subtle);
}
.sr-intprof__socials-url {
	display: block;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	max-width: 100%; font-size: 14px;
}
@media (max-width: 560px) {
	.sr-intprof__socials { grid-template-columns: 1fr; }
}