/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 26 2026 | 02:02:14 */
/*
 * cp-design-system.css — CP Design System v1 (2026-05-25)
 *
 * Foundations (tokens) + Component primitives compartilhados por toda
 * a plataforma. Carregado globalmente como custom-css-js asset.
 *
 * Doc completo: doc/planejamento/design-system.md
 * Memory:        memory/reference_cp_design_system.md
 *
 * Regras de ouro:
 *   1. Uma ação primária por superficie (card, modal, página).
 *   2. Amarelo = brand + CTA único, nada mais.
 *   3. Cores semânticas (success/warning/danger) só em badges/notices,
 *      nunca em botões.
 *   4. Hierarquia botões: primary > secondary > ghost > icon.
 *      Escolha sempre o mais sutil que ainda comunica.
 *   5. Spacing pela escala (4pt grid) — nunca "padding: 13px" no meio
 *      do código de feature.
 *   6. Tipografia Inter regular, hierarquia por tamanho/peso.
 *      Sem condensada (memory feedback_tipografia_evitar_condensada).
 *
 * Toda regra de !important segue convenção CLAUDE.md §1 (BuddyBoss).
 */


/* ═════════════════════════════════════════════════════════════════════
 *  1. TOKENS — variáveis CSS
 * ═════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Marca ─────────────────────────────────────────── */
	--cp-brand-yellow:       #F7D44A;
	--cp-brand-yellow-hover: #f5c829;
	--cp-brand-yellow-soft:  #fef5d4;
	--cp-brand-black:        #1A1A1A;
	--cp-brand-black-hover:  #2a2a2a;
	--cp-brand-black-soft:   #333;

	/* ── Texto — hierarquia ──────────────────────────────
	 * Use a variável conforme a função do texto, não a cor visual.
	 *   primary   → títulos, conteúdo principal
	 *   secondary → descrições, parágrafos, meta
	 *   tertiary  → labels, hints, captions
	 *   muted     → placeholders, conteúdo desativado
	 */
	--cp-text-primary:   #1A1A1A;
	--cp-text-secondary: #555;
	--cp-text-tertiary:  #888;
	--cp-text-muted:     #aaa;
	--cp-text-on-dark:   #fff;
	--cp-text-link:      #1A1A1A;

	/* ── Surfaces ──────────────────────────────────────── */
	--cp-surface:          #fff;
	--cp-surface-elevated: #fff;
	--cp-surface-muted:    #f4f4f6;
	--cp-surface-subtle:   #fafafa;
	--cp-surface-dark:     #1A1A1A;

	/* ── Borders ───────────────────────────────────────── */
	--cp-border:        #e5e5e5;
	--cp-border-strong: #ddd;
	--cp-border-focus:  var(--cp-brand-yellow);

	/* ── Semantic (sutis, não saturadas) ──────────────────
	 * Pareadas bg + fg pra contraste WCAG AA legível.
	 */
	--cp-success-bg: #e8f5e9; --cp-success-fg: #1b5e20; --cp-success-border: #c8e6c9;
	--cp-warning-bg: #fff8e1; --cp-warning-fg: #856404; --cp-warning-border: #ffe082;
	--cp-danger-bg:  #fdecea; --cp-danger-fg:  #b71c1c; --cp-danger-border:  #f5c6c6;
	--cp-info-bg:    #f0f7ff; --cp-info-fg:    #1c4382; --cp-info-border:    #c5d9f0;

	/* ── Cores temáticas por categoria de movimento ─────── */
	--cp-cat-decisao-bg:    #fff8e7; --cp-cat-decisao-fg:    #5a3f0d; --cp-cat-decisao-accent: #b88b3f;
	--cp-cat-despacho-bg:   #f4f4f4; --cp-cat-despacho-fg:   #555;    --cp-cat-despacho-accent: #6b6b6b;
	--cp-cat-peticao-bg:    #f0f7ff; --cp-cat-peticao-fg:    #1c4382; --cp-cat-peticao-accent: #4a6fa5;
	--cp-cat-andamento-bg:  #f8f8f9; --cp-cat-andamento-fg:  #666;    --cp-cat-andamento-accent: #999;

	/* ── Spacing (4pt grid) ────────────────────────────── */
	--cp-space-0:  0;
	--cp-space-1:  4px;
	--cp-space-2:  8px;
	--cp-space-3:  12px;
	--cp-space-4:  16px;
	--cp-space-5:  24px;
	--cp-space-6:  32px;
	--cp-space-7:  48px;
	--cp-space-8:  64px;

	/* ── Radius ────────────────────────────────────────── */
	--cp-radius-sm:   4px;
	--cp-radius:      6px;
	--cp-radius-lg:   8px;
	--cp-radius-xl:   12px;
	--cp-radius-pill: 9999px;

	/* ── Shadows (sutis) ───────────────────────────────── */
	--cp-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
	--cp-shadow:     0 1px 3px rgba(0,0,0,0.08);
	--cp-shadow-lg:  0 6px 16px rgba(0,0,0,0.10);
	--cp-shadow-xl:  0 16px 40px rgba(0,0,0,0.18);

	/* ── Typography scale ──────────────────────────────── */
	--cp-text-xs:    11px;
	--cp-text-sm:    13px;
	--cp-text-base:  15px;
	--cp-text-lg:    18px;
	--cp-text-xl:    24px;
	--cp-text-2xl:   32px;
	--cp-text-3xl:   40px;
	--cp-text-4xl:   48px;

	--cp-weight-regular: 400;
	--cp-weight-medium:  500;
	--cp-weight-bold:    700;

	--cp-leading-tight:  1.2;
	--cp-leading-normal: 1.5;
	--cp-leading-loose:  1.7;

	/* ── Transitions ───────────────────────────────────── */
	--cp-trans-fast: 0.12s ease;
	--cp-trans:      0.18s ease;
	--cp-trans-slow: 0.30s ease;
}


/* ═════════════════════════════════════════════════════════════════════
 *  2. BUTTON — .cpds-btn (primitiva mais usada)
 * ═════════════════════════════════════════════════════════════════════
 *
 * Hierarquia (do mais ao menos chamativo):
 *   .cpds-btn-primary   → amarelo. UNICA por superficie. CTA principal.
 *   .cpds-btn-secondary → preto sólido. Ações fortes não-CTA.
 *   .cpds-btn-ghost     → outline transparente. DEFAULT pra ações em listas.
 *   .cpds-btn-danger    → vermelho ghost. Remover/excluir.
 *   .cpds-btn-link      → texto puro, sem borda. Ações terciárias.
 *
 * Tamanhos:
 *   .cpds-btn-sm  → para cards de listagem e densidade alta
 *   .cpds-btn-md  → DEFAULT, formulários, modais
 *   .cpds-btn-lg  → CTAs de página/hero
 *
 * Princípio: em qualquer view, pergunte "qual o caminho principal?" — esse
 * único elemento ganha .cpds-btn-primary. Tudo o mais começa em .cpds-btn-ghost
 * e sobe pra .cpds-btn-secondary apenas se a hierarquia exigir.
 */

.cpds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-2);
	font-family: inherit;
	font-size: var(--cp-text-sm) !important;
	font-weight: var(--cp-weight-medium) !important;
	line-height: 1 !important;
	padding: 8px 14px !important;
	border-radius: var(--cp-radius) !important;
	border: 1px solid transparent !important;
	background: transparent;
	color: var(--cp-text-primary) !important;
	cursor: pointer;
	transition: background var(--cp-trans), border-color var(--cp-trans), color var(--cp-trans);
	white-space: nowrap;
	text-decoration: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.cpds-btn:focus-visible {
	outline: 2px solid var(--cp-brand-yellow);
	outline-offset: 2px;
}
.cpds-btn[disabled],
.cpds-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Sizes ── */
.cpds-btn-sm { padding: 5px 10px !important; font-size: var(--cp-text-xs) !important; }
.cpds-btn-md { /* default */ }
.cpds-btn-lg { padding: 12px 22px !important; font-size: var(--cp-text-base) !important; }

/* ── Variants ── */
.cpds-btn-primary {
	background: var(--cp-brand-yellow) !important;
	color: var(--cp-brand-black) !important;
	font-weight: var(--cp-weight-bold) !important;
	border-color: var(--cp-brand-yellow) !important;
}
.cpds-btn-primary:hover:not([disabled]) {
	background: var(--cp-brand-yellow-hover) !important;
	border-color: var(--cp-brand-yellow-hover) !important;
}

.cpds-btn-secondary {
	background: var(--cp-brand-black) !important;
	color: var(--cp-text-on-dark) !important;
	border-color: var(--cp-brand-black) !important;
	font-weight: var(--cp-weight-bold) !important;
}
.cpds-btn-secondary:hover:not([disabled]) {
	background: var(--cp-brand-black-hover) !important;
	border-color: var(--cp-brand-black-hover) !important;
}

.cpds-btn-ghost {
	background: transparent;
	border-color: var(--cp-border-strong) !important;
	color: var(--cp-text-primary) !important;
}
.cpds-btn-ghost:hover:not([disabled]) {
	background: var(--cp-surface-muted);
	border-color: #bbb !important;
}

.cpds-btn-danger {
	background: transparent;
	border-color: var(--cp-danger-border) !important;
	color: var(--cp-danger-fg) !important;
}
.cpds-btn-danger:hover:not([disabled]) {
	background: var(--cp-danger-bg);
}

.cpds-btn-link {
	background: transparent;
	border: none !important;
	padding: 4px 0 !important;
	color: var(--cp-text-secondary) !important;
	font-weight: var(--cp-weight-medium) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.cpds-btn-link:hover:not([disabled]) {
	color: var(--cp-text-primary) !important;
}

/* ── Icon button (apenas glifo, sem label) ── */
.cpds-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0 !important;
	border-radius: var(--cp-radius);
	background: transparent;
	border: 1px solid transparent !important;
	color: var(--cp-text-secondary) !important;
	font-size: var(--cp-text-base) !important;
	cursor: pointer;
	transition: background var(--cp-trans), color var(--cp-trans);
}
.cpds-btn-icon:hover:not([disabled]) {
	background: var(--cp-surface-muted);
	color: var(--cp-text-primary) !important;
}


/* ═════════════════════════════════════════════════════════════════════
 *  3. BADGE — estado, não ação
 * ═════════════════════════════════════════════════════════════════════
 *
 * Use pra comunicar STATUS persistente do objeto (Novo, Pausado, Com erro).
 * NÃO use pra ação clicável — isso é botão.
 *
 * Variantes semânticas alinham com tokens (--cp-success, --cp-warning, etc).
 */

.cpds-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-1);
	padding: 3px 9px !important;
	border-radius: var(--cp-radius-pill);
	font-size: var(--cp-text-xs) !important;
	font-weight: var(--cp-weight-bold) !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.cpds-badge-neutral  { background: var(--cp-surface-muted) !important; color: var(--cp-text-secondary) !important; }
.cpds-badge-success  { background: var(--cp-success-bg) !important;   color: var(--cp-success-fg) !important; }
.cpds-badge-warning  { background: var(--cp-warning-bg) !important;   color: var(--cp-warning-fg) !important; }
.cpds-badge-danger   { background: var(--cp-danger-bg) !important;    color: var(--cp-danger-fg) !important; }
.cpds-badge-info     { background: var(--cp-info-bg) !important;      color: var(--cp-info-fg) !important; }
.cpds-badge-brand    { background: var(--cp-brand-yellow-soft) !important; color: var(--cp-warning-fg) !important; }


/* ═════════════════════════════════════════════════════════════════════
 *  4. CHIP — tag / categoria / assunto
 * ═════════════════════════════════════════════════════════════════════
 *
 * Menor e mais leve que badge. Para listas de tags, categorias inline,
 * assuntos. Cor neutra default — chip não compete por atenção.
 */

.cpds-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-1);
	padding: 3px 10px !important;
	border-radius: var(--cp-radius-pill);
	font-size: var(--cp-text-xs) !important;
	font-weight: var(--cp-weight-medium) !important;
	line-height: 1.3 !important;
	background: var(--cp-surface-muted) !important;
	color: var(--cp-text-secondary) !important;
	border: 1px solid var(--cp-border) !important;
	white-space: nowrap;
}


/* ═════════════════════════════════════════════════════════════════════
 *  5. PILL — toggle/filter (CLICÁVEL)
 * ═════════════════════════════════════════════════════════════════════
 *
 * Diferente de badge/chip: pill é interativo, indica estado selecionável.
 * Use em grupos de filtros, toggle de densidade, abas leves.
 */

.cpds-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-1);
	padding: 5px 12px !important;
	border-radius: var(--cp-radius-pill);
	font-size: var(--cp-text-sm) !important;
	font-weight: var(--cp-weight-medium) !important;
	background: var(--cp-surface) !important;
	color: var(--cp-text-secondary) !important;
	border: 1px solid var(--cp-border-strong) !important;
	cursor: pointer;
	transition: background var(--cp-trans), border-color var(--cp-trans), color var(--cp-trans);
}
.cpds-pill:hover:not(.cpds-pill-active) {
	background: var(--cp-surface-muted) !important;
}
.cpds-pill-active {
	background: var(--cp-brand-black) !important;
	color: var(--cp-text-on-dark) !important;
	border-color: var(--cp-brand-black) !important;
	font-weight: var(--cp-weight-bold) !important;
}
.cpds-pill-count {
	background: rgba(0,0,0,0.08);
	color: inherit !important;
	border-radius: var(--cp-radius-pill);
	padding: 1px 7px !important;
	font-size: var(--cp-text-xs) !important;
	font-variant-numeric: tabular-nums;
}
.cpds-pill-active .cpds-pill-count {
	background: rgba(255,255,255,0.20);
}


/* ═════════════════════════════════════════════════════════════════════
 *  6. CARD — container de conteúdo
 * ═════════════════════════════════════════════════════════════════════
 *
 * .cpds-card           → default (surface branca + shadow sutil + radius lg)
 * .cpds-card-flat      → sem shadow, só border (densidade alta)
 * .cpds-card-elevated  → shadow maior (modais, destaques)
 * .cpds-card-accent    → border-left sutil (use modifier de cor)
 */

.cpds-card {
	background: var(--cp-surface) !important;
	border-radius: var(--cp-radius-lg);
	padding: var(--cp-space-5);
	box-shadow: var(--cp-shadow);
	color: var(--cp-text-primary) !important;
}
.cpds-card-flat {
	background: var(--cp-surface) !important;
	border-radius: var(--cp-radius-lg);
	padding: var(--cp-space-4);
	border: 1px solid var(--cp-border);
	box-shadow: none;
}
.cpds-card-elevated {
	background: var(--cp-surface) !important;
	border-radius: var(--cp-radius-lg);
	padding: var(--cp-space-5);
	box-shadow: var(--cp-shadow-lg);
}


/* ═════════════════════════════════════════════════════════════════════
 *  7. INPUT — text/search/select padronizados
 * ═════════════════════════════════════════════════════════════════════ */

.cpds-input {
	display: block;
	width: 100%;
	padding: 9px 14px !important;
	font-family: inherit;
	font-size: var(--cp-text-sm) !important;
	color: var(--cp-text-primary) !important;
	background: var(--cp-surface) !important;
	border: 1px solid var(--cp-border-strong) !important;
	border-radius: var(--cp-radius);
	transition: border-color var(--cp-trans);
	font-variant-numeric: tabular-nums;
}
.cpds-input:focus {
	border-color: var(--cp-border-focus) !important;
	outline: none;
}
.cpds-input::placeholder { color: var(--cp-text-muted) !important; }
.cpds-input-lg { padding: 12px 16px !important; font-size: var(--cp-text-base) !important; }


/* ═════════════════════════════════════════════════════════════════════
 *  8. MENU (overflow) — popover de ações secundárias
 * ═════════════════════════════════════════════════════════════════════
 *
 * Use pra esconder ações secundárias (Pausar, Remover) atrás de um
 * botão ⋯ — reduz poluição em listas.
 *
 * Pattern: container relativo + botão trigger + .cpds-menu.cpds-menu-open
 */

.cpds-menu-wrap { position: relative; display: inline-block; }
.cpds-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	min-width: 200px;
	background: var(--cp-surface) !important;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow-lg);
	border: 1px solid var(--cp-border);
	padding: var(--cp-space-1);
	z-index: 100;
	display: none !important;
}
.cpds-menu.cpds-menu-open { display: block !important; }
.cpds-menu-item {
	display: block;
	width: 100%;
	padding: 8px 12px !important;
	font-size: var(--cp-text-sm) !important;
	color: var(--cp-text-primary) !important;
	background: transparent;
	border: none;
	border-radius: var(--cp-radius-sm);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.cpds-menu-item:hover { background: var(--cp-surface-muted); }
.cpds-menu-item.cpds-menu-danger { color: var(--cp-danger-fg) !important; }
.cpds-menu-item.cpds-menu-danger:hover { background: var(--cp-danger-bg); }
.cpds-menu-sep {
	height: 1px;
	background: var(--cp-border);
	margin: 4px 0;
}


/* ═════════════════════════════════════════════════════════════════════
 *  9. HINT — mensagem inline (success/warning/danger/info)
 * ═════════════════════════════════════════════════════════════════════
 *
 * Para feedback após ação (toast inline, validação de form).
 */

.cpds-hint {
	padding: 10px 14px !important;
	border-radius: var(--cp-radius);
	font-size: var(--cp-text-sm) !important;
	line-height: var(--cp-leading-normal) !important;
	border-left: 3px solid transparent;
}
.cpds-hint-success { background: var(--cp-success-bg) !important; color: var(--cp-success-fg) !important; border-left-color: var(--cp-success-fg); }
.cpds-hint-warning { background: var(--cp-warning-bg) !important; color: var(--cp-warning-fg) !important; border-left-color: var(--cp-warning-fg); }
.cpds-hint-danger  { background: var(--cp-danger-bg)  !important; color: var(--cp-danger-fg)  !important; border-left-color: var(--cp-danger-fg); }
.cpds-hint-info    { background: var(--cp-info-bg)    !important; color: var(--cp-info-fg)    !important; border-left-color: var(--cp-info-fg); }


/* ═════════════════════════════════════════════════════════════════════
 *  10. UTILITY — pequenos helpers de layout
 * ═════════════════════════════════════════════════════════════════════ */

/* Visualmente oculto mas acessível a screen readers (ARIA) */
.cpds-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Stacks verticais com spacing da escala */
.cpds-stack-1 > * + * { margin-top: var(--cp-space-1); }
.cpds-stack-2 > * + * { margin-top: var(--cp-space-2); }
.cpds-stack-3 > * + * { margin-top: var(--cp-space-3); }
.cpds-stack-4 > * + * { margin-top: var(--cp-space-4); }
.cpds-stack-5 > * + * { margin-top: var(--cp-space-5); }