/* =============================================================================
   Componentes do design system do grupo usados na etapa 1 (DESIGN.md v1.4.2, seções 3, 4
   e 7; valores tirados das telas canônicas 01 a 04, que mandam em conflito).
   Não é o app.css de Contratos (parado na v1). Só tokens de ds/tokens.css.
   Desvio de regra do contrato de tela leva o comentário
   CONTRATO-EXCECAO: <seção>, motivo: <1 linha>
   ============================================================================= */

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
[hidden] { display: none !important; }
html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--fonte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-width: 1024px;  /* DESIGN.md: desktop >= 1024; abaixo de 1366 a página rola na horizontal, nunca quebra */
}
::selection { background: var(--accent); color: #0A0A0A; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
svg { display: block; flex-shrink: 0; }
.carregando { font-size: 13px; color: var(--ink-3); }  /* texto sempre "Carregando…" (DESIGN.md 7.7) */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- casca: menu + abas + um iframe por aba (desenho, seção 8; área D) ---------- */
.corpo-casca { overflow: hidden; }
.casca { display: grid; grid-template-columns: var(--largura-menu) minmax(0, 1fr); height: 100vh; overflow: hidden; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border-strong); display: flex; flex-direction: column; height: 100vh; min-width: 0; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 24px 16px 20px 24px; }
.sidebar-brand img { height: 28px; width: 28px; display: block; flex-shrink: 0; }
.sidebar-marca { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sidebar-marca .marca-grupo { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-marca .marca-modulo { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.nav-eyebrow { font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 12px 12px 10px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; font-weight: 400; position: relative; width: 100%; text-align: left; }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item svg { color: var(--ink-3); }
.nav-item:hover { background: var(--surface-raised); color: var(--ink); }
.nav-item:hover svg { color: var(--ink); }
.nav-item.active { color: var(--accent-ink); background: transparent; font-weight: 500; }
.nav-item.active svg { color: var(--accent-ink); }
.nav-item.active::before { content: ''; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; }
.sidebar-footer { border-top: 1px solid var(--border-strong); padding: 14px 16px; display: flex; align-items: center; gap: 4px; }
/* Minha conta no clique do avatar ou do nome (revisão de 06/10, B10): o nome ganha a largura do ícone que saiu.
   Item ativo do usuário quando a aba ativa é Minha conta ou o código no celular (DESIGN.md 7.10; A4). */
.footer-conta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 6px 4px 4px; margin-left: -4px; border-radius: 10px; position: relative; color: var(--ink); }
.footer-conta:hover { background: var(--surface-raised); }
.footer-conta.active .name { color: var(--accent-ink); }
.footer-conta.active .avatar-chip { border-color: var(--accent); color: var(--accent-ink); }
.footer-conta.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; }
.footer-user { flex: 1; min-width: 0; display: block; }
.footer-user .name, .footer-user .role { display: block; }
.footer-user .name { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-user .role { font-size: 12px; color: var(--ink-3); }
.form-sair { display: flex; }
.theme-toggle, .footer-signout, .menu-recolher, .footer-icone { color: var(--ink-3); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; }
.theme-toggle:hover, .footer-signout:hover, .menu-recolher:hover, .footer-icone:hover { background: var(--surface-raised); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: flex; }
[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.menu-recolher span { display: flex; }
.menu-recolher .icone-expandir { display: none; }

/* menu recolhido (DESIGN.md 4, menu lateral recolhível): só ícone, com title no hover; preferência da pessoa */
.menu-recolhido .casca { grid-template-columns: var(--largura-menu-recolhido) minmax(0, 1fr); }
.menu-recolhido .sidebar-brand { flex-direction: column; padding: 18px 0 14px; gap: 10px; }
.menu-recolhido .sidebar-marca, .menu-recolhido .nav-eyebrow, .menu-recolhido .footer-user { display: none; }
.menu-recolhido .menu-recolher .icone-recolher { display: none; }
.menu-recolhido .menu-recolher .icone-expandir { display: flex; }
.menu-recolhido .sidebar-nav { padding: 4px 10px 16px; }
.menu-recolhido .nav-item { justify-content: center; padding: 10px; gap: 0; }
.menu-recolhido .nav-item span { display: none; }
.menu-recolhido .nav-item.active::before { left: 0; }
.menu-recolhido .sidebar-footer { flex-direction: column; gap: 8px; padding: 12px 8px; }
.menu-recolhido .footer-conta { flex: none; padding: 2px; margin-left: 0; }
.menu-recolhido .footer-conta.active::before { left: -6px; }

/* barra de abas: rola na horizontal quando as 8 não cabem (desenho 8) */
.casca-area { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.casca-abas { display: flex; gap: 2px; align-items: flex-end; min-height: 45px; padding: 8px 16px 0; border-bottom: 1px solid var(--border-strong); background: var(--surface); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; scrollbar-width: thin; }
.casca-aba { display: inline-flex; align-items: center; flex-shrink: 0; max-width: 220px; border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0; color: var(--ink-2); position: relative; }
.casca-aba:hover { background: var(--surface-raised); color: var(--ink); }
.casca-aba.ativa { background: var(--canvas); border-color: var(--border-strong); color: var(--ink); margin-bottom: -1px; }
.casca-aba.ativa::before { content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }
.casca-aba-botao { display: inline-flex; align-items: center; min-width: 0; padding: 9px 4px 9px 14px; font-size: 13px; font-weight: 500; color: inherit; border-radius: 10px 0 0 0; }
.casca-aba.ativa .casca-aba-botao { font-weight: 600; }
.casca-aba-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casca-aba-fechar { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 6px 0 2px; border-radius: 50%; color: var(--ink-3); flex-shrink: 0; }
.casca-aba-fechar:hover { background: var(--danger-tint); color: var(--danger); }
.casca-quadros { position: relative; flex: 1; min-height: 0; background: var(--canvas); }
.casca-quadro { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--canvas); }
.casca-quadro.quadro-oculto { visibility: hidden; }  /* escondido, não descarregado: o formulário pela metade continua vivo */
.casca-vazia { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 36px 40px; }

/* login por cima da casca: campos com o mesmo respiro do formulário */
.modal-login-mensagem { margin-bottom: 16px; }
#form-login-casca .modal-actions { margin-top: 8px; }

/* ---------- página (o que roda dentro da aba) ---------- */
.pagina { position: relative; }
.pagina-lista { max-width: none; width: 100%; padding: 20px 32px 6px; }  /* lista analítica: ocupa a largura devolvida pelo menu */
.pagina-dados { max-width: var(--largura-pagina-lista); margin: 0 auto; padding: 36px 40px 80px; }
.pagina-formulario { max-width: var(--largura-pagina-formulario); margin: 0 auto; padding: 36px 40px 24px; }  /* formulário não rola como página (desenho 8): sem folga de rodapé */
.pagina-acesso { max-width: 420px; margin: 0 auto; padding: 96px 24px 40px; }

/* ---------- cabeçalho de tela: eyebrow + H1 substantivo (+ ação primária no topo direito) ----------
   Revisão de interface de 06/10 (M1/I3): o cabeçalho flui. O H1 fica com a largura toda que precisa; quando
   não cabe ao lado, "Como funciona" desce pra baixo do H1 e as ações descem pra uma segunda linha, à direita.
   O H1 só quebra quando é maior que a largura inteira do container (nome longo), com as linhas equilibradas. */
.page-header { position: relative; padding-bottom: 28px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.page-header .header-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-header .header-topo .back-link { margin: -6px 0 -6px -6px; }
.page-header .header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-header .header-text { flex: 1 1 auto; min-width: 0; }
.page-header .header-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.page-header .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.page-header h1 { font-weight: 900; font-size: 40px; letter-spacing: -.01em; line-height: 1; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.page-header .subtitle { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
/* link de navegação na linha do link de volta (Histórico): navegação, não ação; libera a linha do H1 */
.header-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 6px 10px; margin: -6px -10px -6px 0; border-radius: 8px; }
.header-link:hover { background: var(--surface-raised); color: var(--ink); }
.header-link svg { width: 16px; height: 16px; color: var(--ink-3); }
/* aviso curto na linha das ações: "Alterações salvas às 14:32" (M8) e "Só visualização" (M3) */
.header-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 6px 10px; border-radius: 100px; white-space: nowrap; }
.header-status svg { width: 14px; height: 14px; }
.header-status.success { background: var(--success-tint); color: var(--success-ink); }
.header-status.neutral { background: var(--surface-raised); color: var(--ink-2); border: 1px solid var(--border-control); }
.page-header-compact { margin-bottom: 10px; }
.page-header-compact .header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.page-header-compact .header-text-inline { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.page-header-compact .eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.page-header-compact h1 { font-weight: 900; font-size: 24px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.page-header-compact .header-sub { font-size: 12.5px; color: var(--ink-3); }

/* ---------- link de volta: sempre nomeia o destino (DESIGN.md 7.10) ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 6px 10px 6px 6px; margin: -6px 0 18px -6px; border-radius: 8px; }
.back-link:hover { background: var(--surface-raised); color: var(--ink); }
.back-link svg { width: 16px; height: 16px; color: var(--ink-3); }

/* ---------- botões: UM primário por tela, texto preto no laranja ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: var(--raio-controle); border: 1px solid transparent; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #0A0A0A; }
.btn-primary:hover { background: #FF7E4E; }
.btn-primary svg { color: #0A0A0A; }
.btn-secondary { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-raised); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 12px 14px; }
.btn-ghost:hover { background: var(--surface-raised); color: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
/* texto do destrutivo de contorno em --danger-ink (A1 da revisão de interface da etapa 2: o --danger dá 4,45:1 no canvas);
   o contorno segue --danger (peça não textual, 3:1) */
.btn-danger-outline { background: transparent; border-color: var(--danger); color: var(--danger-ink); }
.btn-danger-outline:hover { background: var(--danger-tint); }
.btn-danger-solid { background: var(--danger); color: #FFFFFF; }  /* só dentro do modal de confirmação */
[data-theme="dark"] .btn-danger-solid { color: #0A0A0A; }
.btn-danger-solid:hover { filter: brightness(1.06); }
.icon-btn { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 7px; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-raised); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- painel e formulário ---------- */
.panel { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--raio-moldura); overflow: hidden; }
.panel-section { padding: 28px; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: none; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-title { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.section-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 20px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field-label { font-weight: 500; font-size: 13px; color: var(--ink-2); }
.field-input, .field-textarea, .select-wrap select { width: 100%; background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--raio-controle); padding: 11px 14px; font-family: inherit; font-size: 14px; color: var(--ink); }
.field-input::placeholder, .field-textarea::placeholder { color: var(--ink-3); }
.field-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
.field-input:focus, .field-textarea:focus, .select-wrap select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--accent-tint); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; width: 15px; height: 15px; }
.field-hint { font-size: 12px; color: var(--ink-3); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--danger); }
.field-error svg { width: 14px; height: 14px; }
.field.has-error .field-input, .field.has-error .field-textarea { border-color: var(--danger); }
.field.has-error .field-input:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
/* campo travado (quem só lê, campo de sistema, dado mascarado antes do Mostrar): fundo e texto de consulta,
   contorno estrutural em vez do de controle e sem cursor de clique (revisão de 06/10, M3). `:disabled` pega
   também o campo travado por <fieldset disabled>, que o atributo [disabled] não pegava. */
.field-input:disabled, .field-textarea:disabled, .select-wrap select:disabled,
.field-input[readonly], .field-textarea[readonly] { background: var(--surface-raised); color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); opacity: 1; border-color: var(--border-strong); cursor: default; }
.select-wrap select:disabled ~ svg { opacity: .35; }
.campo-check input:disabled { cursor: default; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ---------- formulário denso (decisão de 06/10, A7 e M12): todos os campos à vista em 1366x657 ----------
   Mesma peça (label acima, input, hint abaixo), na escala 4/8 com menos respiro vertical: label a 4px do
   campo, campo de 36px, 12px entre linhas, seção com 16px. Vale pra ficha, formulários de cadastro, Minha
   conta, código no celular e o modal de dado bancário. Grade de campos em 3 colunas (.grade-campos). */
.form-denso .page-header { padding-bottom: 12px; margin-bottom: 12px; }
.form-denso .page-header .header-topo { margin-bottom: 12px; }
.form-denso .page-header .eyebrow { margin-bottom: 6px; }
.form-denso .page-header .subtitle { margin-top: 6px; font-size: 13.5px; }
.form-denso .page-header h1 { font-size: 36px; }
.form-denso .panel-section { padding: 16px 20px; }
.form-denso .section-header { margin-bottom: 12px; align-items: center; min-height: 20px; }
.form-denso .section-title { font-size: 14.5px; }
.form-denso .field, .modal-denso .field { gap: 4px; }
.form-denso .field + .field, .form-denso .field-row + .field-row, .form-denso .field-row + .field,
.form-denso .field + .field-row { margin-top: 12px; }
.form-denso .field-row, .modal-denso .field-row { gap: 12px; }
.form-denso .field-row > .field, .modal-denso .field-row > .field { margin-top: 0; }
.form-denso .field-input, .form-denso .select-wrap select,
.modal-denso .field-input, .modal-denso .select-wrap select { padding-top: 8px; padding-bottom: 8px; }
.form-denso .field-hint { line-height: 1.35; }
.grade-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.grade-campos > .field, .grade-campos > .field + .field { margin-top: 0; }
.grade-campos .span-2, .field-row .span-2 { grid-column: span 2; }
.grade-campos .span-3 { grid-column: 1 / -1; }
/* ação curta na linha do rótulo (o "Mostrar" do CPF): o campo fica com a largura toda */
.rotulo-com-acao { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.acao-do-rotulo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0 2px; border-radius: 4px; }
.acao-do-rotulo:hover { color: var(--ink); }
.acao-do-rotulo svg { width: 14px; height: 14px; }
.secao-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.secao-titulo .section-title { white-space: nowrap; }  /* B4: o título da seção não quebra em 2 linhas */
.dica-secao { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.danger-zone-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.danger-zone-title { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.danger-zone-sub { font-size: 12.5px; color: var(--ink-3); }

/* ---------- dado pessoal mascarado com "mostrar" (decisão 11) ---------- */
.dado-pessoal { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dado-pessoal .mascarado { color: var(--ink-2); }

/* ---------- badge: sempre ícone + texto, família semântica ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge-success { background: var(--success-tint); color: var(--success-ink); }
.badge-warning { background: var(--warning-tint); color: var(--warning-ink); }
.badge-accent { background: var(--accent-tint); color: var(--accent-ink); }
.badge-danger { background: var(--danger-tint); color: var(--danger-ink); }   /* A1: --danger no tint dá 4,23:1 */
.badge-neutral { background: var(--surface-raised); color: var(--ink-2); border: 1px solid var(--border-control); }

/* ---------- stat tile: peça única de KPI, até 4 por tela, rótulo de 1 linha ---------- */
.stat-tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.stat-tile .stat-number { font-weight: 300; font-size: 22px; line-height: 1.1; color: var(--ink); margin-bottom: 4px; letter-spacing: -.01em; }
.stat-tile .stat-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- aviso em texto corrido: cor pela família do conceito ---------- */
.note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--warning-tint); color: var(--warning-ink); }
.note svg { width: 16px; height: 16px; margin-top: 2px; }
.note.success { background: var(--success-tint); color: var(--success-ink); }
.note.accent { background: var(--accent-tint); color: var(--accent-ink); }
.note.warning { background: var(--warning-tint); color: var(--warning-ink); }   /* o mesmo do .note: nome explícito da família */
.note.danger { background: var(--danger-tint); color: var(--danger-ink); }

/* ---------- ajuda "Como funciona" (mesma linha do H1) ---------- */
.ajuda-details { position: relative; }
.ajuda-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--border-control); border-radius: 100px; cursor: pointer; list-style: none; }
.ajuda-toggle::-webkit-details-marker { display: none; }
.ajuda-toggle:hover { color: var(--ink); background: var(--surface-raised); }
.ajuda-body { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-2); box-shadow: 0 12px 28px -8px rgba(10, 10, 10, .25); }

/* ---------- estado vazio: 1 frase, convite pra agir ---------- */
.estado-vazio { padding: 40px 24px; text-align: left; color: var(--ink-2); font-size: 14px; }
.estado-vazio a { color: var(--accent-ink); font-weight: 600; }

/* ---------- avatar de iniciais (staff, empresa, conta: 36px; nunca o de influenciador) ---------- */
.avatar-chip { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--ink); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-chip.avatar-36 { width: 36px; height: 36px; }

/* ---------- lista simples de cadastro/navegação: linha de 64px (DESIGN.md 3.6) ---------- */
.tabela { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-moldura); overflow: hidden; }
.tabela-cabecalho, .tabela-linha { display: grid; align-items: center; gap: 16px; padding: 0 20px; }
.tabela-cabecalho { height: 40px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border); }
.tabela-linha { min-height: 64px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tabela-linha:last-child { border-bottom: none; }
.tabela-linha:hover { background: var(--surface-raised); }

/* ---------- modal (confirmação e tarefa curta): role=dialog + aria-modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, .55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-moldura); max-width: 440px; width: 100%; max-height: 85vh; overflow: auto; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .18); }
[data-theme="dark"] .modal { box-shadow: 0 20px 60px rgba(0, 0, 0, .65), 0 6px 20px rgba(0, 0, 0, .4); }
.modal-title { font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 10px; }
.modal-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 24px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
/* os botões do modal nunca saem de vista: se a janela for baixa e o modal rolar, o rodapé fica preso embaixo (M12) */
/* (o sticky conta a partir da borda de conteúdo do modal, por dentro do padding: daí o bottom negativo igual ao padding) */
.modal > .modal-actions { position: sticky; bottom: -28px; margin-bottom: -28px; padding: 8px 0 28px; background: var(--surface); }
.modal .field { margin-bottom: 18px; }
.modal-denso { padding: 24px; }
.modal-denso > .modal-actions { bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; }
.modal-denso .modal-title { margin-bottom: 6px; }
.modal-denso .modal-text { margin-bottom: 16px; }
.modal-denso .field { margin-bottom: 0; }
.modal-denso .field-row + .field-row, .modal-denso .field-row + .field, .modal-denso .field + .field-row { margin-top: 12px; }

/* ---------- campo de data no tema escuro: o ícone nativo do calendário acompanha o tema (revisão de interface da
   etapa 3, B6, 09/10); só os campos de data, nada mais muda ---------- */
[data-theme="dark"] input[type="date"] { color-scheme: dark; }