/* Cognvox — estilos dos componentes. Tudo em tokens (tokens.css). */
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cx-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Button */
.cx-btn { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 20px; min-height: 44px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: background-color .2s ease-out, border-color .2s ease-out; }
.cx-btn:focus-visible, .cx-field input:focus-visible, .cx-field select:focus-visible, .cx-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cx-btn--primary { background: var(--action); color: var(--on-action); }
.cx-btn--secondary { background: var(--surface-raised); color: var(--action); border-color: var(--action); }
.cx-btn--secondary:hover { background: var(--action-soft); }
.cx-btn--ghost { background: transparent; color: var(--ink); }
.cx-btn--ghost:hover { background: var(--surface-soft); }
.cx-btn--danger { background: var(--danger); color: var(--surface); }
.cx-btn[disabled] { background: var(--surface-soft); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }

/* TextField */
.cx-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 240px; }
.cx-field label { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); }
.cx-field input, .cx-field select { font: inherit; color: var(--ink); background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: var(--radius-md); min-height: 44px; padding: 0 var(--space-3); box-sizing: border-box; box-shadow: var(--shadow-sm); }
.cx-field input:hover, .cx-field select:hover { border-color: var(--ink-muted); }
/* Select (dropdown): mesma altura e contorno dos campos; seta própria desenhada com ink */
.cx-field select { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cx-field input::placeholder { color: var(--ink-muted); }
.cx-field .cx-help { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cx-field--error input, .cx-field--error select { border-color: var(--danger); background: var(--danger-soft); }
.cx-field--error .cx-help { color: var(--danger); }

/* Badge */
.cx-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 500; font-size: 12px; line-height: 16px; padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(13,21,76,0.14); }
.cx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
/* Tags com cor: borda de 1px na cor do texto, a 45% */
.cx-badge--action { background: var(--action-soft); color: var(--action); border-color: color-mix(in srgb, var(--action) 45%, transparent); }
.cx-badge--success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.cx-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.cx-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Card */
.cx-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); max-width: 360px; }
.cx-card__overline { font-family: var(--font-display); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--action); }
.cx-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 30px; margin: var(--space-1) 0 var(--space-2); }
.cx-card p { margin: 0 0 var(--space-4); color: var(--ink-muted); }

/* Tabs */
.cx-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.cx-tab { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 20px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-3) var(--space-4); color: var(--ink-muted); cursor: pointer; min-height: 44px; }
.cx-tab[aria-selected="true"] { color: var(--action); border-bottom-color: var(--action); }

/* Table */
.cx-table { border-collapse: collapse; width: 100%; font-family: var(--font-body); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cx-table th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-soft); padding: var(--space-3) var(--space-4); }
.cx-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-weight: 500; }

/* GradientRule */
.cx-rule { height: 3px; border: 0; margin: var(--space-4) 0; background: var(--gradient-linha); border-radius: 2px; }
.cx-rule--principal { background: var(--gradient-principal); }

/* Geometry */
.cx-geo-demo { position: relative; width: 360px; height: 240px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); }
.cx-geo { position: absolute; pointer-events: none; width: 34%; height: auto; }
.cx-geo--top-left { top: -4px; left: -4px; }
.cx-geo--bottom-right { bottom: -4px; right: -4px; transform: rotate(180deg); }
.cx-geo-demo__text { position: absolute; left: var(--space-6); bottom: var(--space-6); right: var(--space-6); font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 30px; color: var(--ink); }

/* Hierarquia de texto em card de lista: título > informação-chave > valor > texto > metadado */
.cx-card .cx-card__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--ink); margin: 0; }
.cx-card .cx-card__key { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink); margin: 0; }
.cx-card .cx-card__value { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--success); margin: 0; }
.cx-card .cx-card__text { font-weight: 400; font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.cx-card .cx-card__meta { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin: 0; }

/* Tag de área: preenchida com a cor da marca; texto e ponto em uma versão mais escura da mesma cor (tom sobre tom), todas >= 4.5:1 */
.cx-badge--area-operacoes, .cx-badge--area-marketing, .cx-badge--area-tecnologia, .cx-badge--area-cientifico { font-weight: 600; border-color: transparent; }
.cx-badge--area-operacoes { background: var(--brand-laranja, #FF6F00); color: #4A1F00; }
.cx-badge--area-marketing { background: var(--brand-magenta, #EB288C); color: #260314; }
.cx-badge--area-tecnologia { background: var(--brand-azul-claro, #00B4D8); color: #00394A; }
.cx-badge--area-cientifico { background: var(--brand-amarelo, #FFC100); color: #5F4600; }