/* ═══════════════════════════════════════════════════════════════
   ds-brand.css — PROJECT FILE — the one stylesheet this package owns

   ds-shell.css and ds-patterns.css are copied verbatim from the
   framework and must never be edited. This file is the opposite:
   it is empty by default and belongs to the project.

   What goes here: anything shared across pages that is specific to
   THIS brand — the logo mark, a branded loader, a gradient the
   identity mandates, a typographic modifier the brand needs and the
   framework has no opinion about.

   What does NOT go here:
   - a second version of a composition that already has a canonical
     class (see design-rules.md § Canonical Classes)
   - anything used by exactly one page — that belongs in that page's
     <style>, prefixed with the page slug

   Prefix every class here with the project slug, so it can never
   collide with the framework files above it.

   Without this file a brand asset used on several pages has nowhere
   to live: it gets re-authored per page, which is how a package
   starts diverging from itself.
   ═══════════════════════════════════════════════════════════════ */

/* ── MARCA ─────────────────────────────────────────
   O símbolo oficial (ciberian-simbolo-preto.svg) vive inline, com
   fill: currentColor — um traçado só serve preto-sobre-branco e
   branco-sobre-preto, seguindo o tema. Nada de dois arquivos para
   trocar por tema, e nada de redesenhar a marca.
   O vetor original está em design-system/brand/. */

.cib-mark {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-md);
  /* A marca é preta sobre branco, e branca sobre preto — é assim que ela existe
     no manual. O fundo acompanha a superfície do tema e o traçado é o contraste
     dela, então o mesmo vetor serve os três temas sem um segundo arquivo. */
  background: var(--color-background);
  color: var(--color-foreground);
  /* No tema claro o chip e a sidebar são ambos brancos: sem a borda o chip não
     tem forma. */
  border: 1px solid var(--color-border);
}
.cib-mark svg { display: block; width: 76%; height: auto; }

/* ── LOADING ───────────────────────────────────────
   A própria marca como indicador de espera: o infinito é um traço
   contínuo, então a espera é a energia correndo pela volta em vez de
   um círculo girando — que não diz nada sobre esta marca.
   Só opacidade e escala: nada que force layout, e nada que gire, o
   que num símbolo simétrico produziria movimento ilegível. */

.cib-loader {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.cib-loader svg { display: block; width: 100%; height: auto; }
.cib-loader-sm  { width: 28px; }
.cib-loader-md  { width: 56px; }
.cib-loader-lg  { width: 96px; }

.cib-loader svg path {
  animation: cib-pulse 1400ms var(--ease-default) infinite;
  transform-origin: center;
}

@keyframes cib-pulse {
  0%, 100% { opacity: 0.28; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1);    }
}

/* Bloco de espera de página inteira ou de card. */
.cib-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-4); padding: var(--spacing-10) var(--spacing-6);
}
.cib-loading-text { font-size: 0.8125rem; color: var(--color-muted-foreground); }

/* Quem pede menos movimento recebe a marca parada, não a marca sumida:
   o indicador continua comunicando espera, sem animar. */
@media (prefers-reduced-motion: reduce) {
  .cib-loader svg path { animation: none; opacity: 0.6; }
}

/* ── CONECTA CANDIDATOS ────────────────────────────
   Composições do produto, compartilhadas por várias telas e sem classe
   canônica no pacote. Prefixo `cnc-` (o slug do projeto). */

/* Confirmação centralizada: o pacote só tem o painel lateral (.sheet), que é
   para formulário. Uma pergunta de sim/não não abre um painel. O conteúdo é
   .card + .btn-*; aqui fica só o véu e a largura. */
/* Acima do painel lateral (.sheet-overlay, z-index 200): a confirmação pode
   nascer DE DENTRO dele (trocar o e-mail na ficha do usuário), e com 60 ela
   ficava atrás — visível, mas sem clique. */
.cnc-dialog-overlay {
  position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center;
  padding: var(--spacing-4);
  background: color-mix(in oklab, var(--color-foreground) 45%, transparent);
}
.cnc-dialog { width: 100%; max-width: 28rem; box-shadow: var(--shadow-xl); }
.cnc-dialog-desc { margin: var(--spacing-2) 0 0; font-size: 0.875rem; color: var(--color-muted-foreground); }
.cnc-dialog-desc:empty { display: none; }
.cnc-dialog-acoes { display: flex; justify-content: flex-end; gap: var(--spacing-2); }
.cnc-dialog-link { margin-right: auto; }

/* Candidato › campanha no topo de toda tela (quem opera sabe de quem é a
   chapa). Só layout: os nomes usam .topbar-user-name do shell. */
.cnc-contexto { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.cnc-contexto-divisor { width: 1px; height: 20px; background: var(--color-border); margin: 0 var(--spacing-1); flex-shrink: 0; }
.cnc-contexto-icone { color: var(--color-muted-foreground); flex-shrink: 0; }
/* Foto do candidato (Configurações da campanha), no lugar do ícone. */
.cnc-contexto-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border); }
.cnc-contexto-nome { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  #topbar .cnc-contexto-candidato, #topbar .cnc-contexto-candidato + .cnc-contexto-icone { display: none; }
  #topbar .cnc-contexto-nome { max-width: 140px; }
}
.cnc-dropdown-vazio { padding: var(--spacing-4); text-align: center; font-size: 0.75rem; color: var(--color-muted-foreground); margin: 0; }
/* Listas do topbar (notificações, mensagens): a largura que o protótipo
   canônico dá a elas (340px); a base `.dropdown` tem 220px, do menu do
   usuário, e cortava o título na borda. Título e descrição são <span> —
   inline não aplica reticências —, então viram bloco aqui. */
.cnc-dropdown-lista { width: 340px; max-width: calc(100vw - 32px); }
.cnc-dropdown-lista .dropdown-item-title,
.cnc-dropdown-lista .dropdown-item-desc { display: block; }

/* "Endereço de entrada" no menu do usuário: o link da porta da conta, copiável
   em toda tela, para voltar a logar ou passar à equipe. */
.cnc-porta-menu { padding: var(--spacing-2) var(--spacing-3); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-1); }
.cnc-porta-menu-rotulo { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-foreground); }
.cnc-porta-menu-linha { display: flex; align-items: center; gap: var(--spacing-2); }
.cnc-porta-menu-codigo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }

/* Item de menu de módulo que ainda não existe: visível e inerte, não um link.
   Sem selo ao lado — ele cortava o nome do módulo; o estado vai no title e no
   aria-disabled. */
.cnc-nav-em-breve { opacity: 0.45; cursor: not-allowed; }
.cnc-nav-em-breve:hover { background: transparent; }

/* A faixa da campanha assumida fica presa ao topo do conteúdo, em toda tela. */
.cnc-faixa-assumida { position: sticky; top: 0; z-index: 20; }

/* Título de página na face de exibição da marca (Sora). ds-shell e
   ds-patterns herdam o corpo; sem o modificador, só a Inter apareceria. */
.cnc-display { font-family: var(--font-family-heading); letter-spacing: var(--tracking-heading); }

/* Logo do produto no cartão de entrada (o configurado na identidade, ou o
   ícone do Conecta). */
.cnc-auth-logo { width: 48px; height: 48px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }

/* Código de 6 dígitos (login e verificação do cadastro). O pacote não tem
   composição para isto; .form-input quebraria a leitura dígito a dígito. */
.cnc-otp { display: flex; align-items: center; gap: var(--spacing-3); justify-content: center; }
.cnc-otp-digito {
  width: 48px; height: 56px; text-align: center;
  font-family: var(--font-family-mono); font-size: 1.5rem; font-weight: 500;
  color: var(--color-foreground); background: var(--color-background);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-field);
  outline: none; caret-color: var(--color-primary);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.cnc-otp-digito:focus { border-color: var(--color-ring); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-ring) 28%, transparent); }
.cnc-otp-digito.filled { border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border)); }
.cnc-otp-digito.error { border-color: var(--color-destructive); background: color-mix(in oklab, var(--color-destructive) 10%, var(--color-background)); }
.cnc-otp-sep { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-muted-foreground); opacity: 0.4; flex-shrink: 0; }
@keyframes cnc-otp-tremor { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } }
.cnc-otp-tremor { animation: cnc-otp-tremor 0.45s var(--ease-default); }
@media (max-width: 420px) { .cnc-otp-digito { width: 40px; height: 48px; font-size: 1.25rem; } .cnc-otp { gap: var(--spacing-2); } }

/* Link com aparência de texto de ação (reenviar código). */
.cnc-link { background: none; border: none; padding: 0; font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--color-primary); cursor: pointer; text-decoration: none; }
.cnc-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cnc-link:disabled { color: var(--color-muted-foreground); cursor: default; text-decoration: none; }

/* Tela de detalhe: conteúdo e coluna lateral (ficha do usuário, cadastro de
   pessoa, documento da biblioteca, modelo). Em tela estreita, uma coluna. */
.cnc-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-5); align-items: start; }
.cnc-detalhe > * { min-width: 0; }
.cnc-detalhe-lado { display: flex; flex-direction: column; gap: var(--spacing-4); }
@media (max-width: 1024px) { .cnc-detalhe { grid-template-columns: 1fr; } }

/* Configurações em seções: navegação à esquerda, cartões empilhados à
   direita (prototypes/configuracoes.html). Configuração do sistema e
   configurações pessoais. */
.cnc-config { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--spacing-6); align-items: start; }
.cnc-config-nav { position: sticky; top: var(--spacing-6); display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cnc-config-nav-item {
  display: flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3); border: none; background: transparent;
  border-radius: var(--radius-box); border-left: 2px solid transparent;
  font: inherit; font-size: 0.8125rem; color: var(--color-muted-foreground);
  text-align: left; text-decoration: none; cursor: pointer; transition: background 120ms, color 120ms;
}
.cnc-config-nav-item:hover { background: var(--color-muted); color: var(--color-foreground); }
.cnc-config-nav-item:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.cnc-config-nav-item[aria-selected="true"] { background: var(--color-accent); color: var(--color-foreground); border-left-color: var(--color-primary); font-weight: 500; }
.cnc-config-nav-item i { flex-shrink: 0; }
.cnc-config-pilha { display: flex; flex-direction: column; gap: var(--spacing-6); min-width: 0; }
@media (max-width: 900px) {
  .cnc-config { grid-template-columns: 1fr; }
  .cnc-config-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--spacing-1); }
  .cnc-config-nav-item { border-left: none; border-bottom: 2px solid transparent; }
  .cnc-config-nav-item[aria-selected="true"] { border-left: none; border-bottom-color: var(--color-primary); }
}

/* Barra de filtros acima de uma tabela que está em outro cartão (registros,
   biblioteca): um .card com a .table-toolbar do pacote, que quebra linha. */
.cnc-barra-filtro { margin-bottom: var(--spacing-4); }
.cnc-barra-filtro .table-toolbar { border-bottom: none; flex-wrap: wrap; }
.cnc-barra-filtro .table-toolbar-left { flex-wrap: wrap; }

/* Arquivo com ações (modelo de documento: abrir, baixar, substituir,
   remover). O .file-list do pacote só prevê remover. */
.cnc-arquivo { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center; padding: var(--spacing-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-box); }
.cnc-arquivo-nome { flex: 1 1 10rem; min-width: 0; font-size: 0.875rem; font-weight: 500; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cnc-arquivo-acoes { flex: 0 0 auto; display: flex; gap: var(--spacing-2); align-items: center; flex-wrap: wrap; }

/* Nome do produto na barra: "Conecta Candidatos" é mais longo que o nome para
   que o shell foi medido. Um degrau menor, na face da marca, cabe sem cortar. */
.cnc-marca-nome { font-family: var(--font-family-heading); font-size: 0.875rem; text-overflow: ellipsis; }

/* Corpo do cartão de entrada: alerta, formulário e links com o mesmo respiro. */
.cnc-auth-corpo { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cnc-rodape-link { color: var(--color-primary); text-decoration: none; }
.cnc-rodape-link:hover { text-decoration: underline; }

/* Ícone de destaque de um bloco (cabeçalho de verificação, seção da FAQ). O
   .icon-badge do shell é o contador do topo, posicionado em absoluto. */
.cnc-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-primary) 14%, transparent); color: var(--color-primary); flex-shrink: 0; }

/* Abas: o switchTab (public/js/app.js) alterna .active no painel; o pacote só
   esconde por [hidden]. Sem esta regra, todos os painéis apareciam juntos. */
.tab-panel:not(.active) { display: none; }

/* Campo editável dentro de uma lista de dados (dl): o próprio valor é o input,
   com a ação ao lado — em vez de mostrar o valor e, embaixo, outro campo igual. */
.cnc-campo-inline { display: flex; gap: var(--spacing-2); align-items: center; }
.cnc-campo-inline .form-input { height: 30px; flex: 1 1 auto; min-width: 0; }