/* ============================================================================
   ui.css — componentes compartilhados das telas de trabalho (login e painéis).
   Depende de tokens.css. A landing mantém o próprio CSS por enquanto.
   ========================================================================== */

.icone {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 120ms ease;
}

.btn:active { transform: scale(0.98); }

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primario { background: var(--accent); color: var(--accent-ink); }
.btn--primario:hover:not([disabled]) { background: var(--accent-hover); }

.btn--secundario {
  background: transparent;
  color: var(--brand);
  border-color: var(--border-strong);
}

.btn--secundario:hover:not([disabled]) {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 7%, transparent);
}

.btn--fantasma {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}

.btn--fantasma:hover:not([disabled]) {
  background: var(--surface-2);
  color: var(--ink);
}

.btn--perigo {
  background: var(--danger);
  color: var(--bg);
  border-color: transparent;
}

.btn--perigo:hover:not([disabled]) {
  background: color-mix(in oklab, var(--danger) 88%, var(--ink));
}

.btn--pequeno { height: 36px; padding-inline: var(--space-4); font-size: var(--fs-small); }

.btn--icone {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}

.btn--icone:hover:not([disabled]) { background: var(--surface-2); color: var(--ink); }

.btn--bloco { width: 100%; }

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Campos ---------- */

.campo-grupo { display: grid; gap: 6px; }

.rotulo {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

.campo {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.campo::placeholder { color: var(--muted); }
.campo:hover { border-color: var(--border-strong); }

.campo:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
}

.campo[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

.campo--area {
  height: auto;
  min-height: 96px;
  padding: 10px var(--space-3);
  line-height: 1.5;
  resize: vertical;
}

.campo[readonly] {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

.ajuda {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
}

.campo-senha { position: relative; }
.campo-senha .campo { padding-right: 52px; }

.campo-senha__acao {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.campo-senha__acao:hover { color: var(--ink); }

/* ---------- Superfícies ---------- */

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.5;
}

.badge--neutro { background: var(--surface-2); color: var(--ink-2); }
.badge--sucesso { background: var(--success-bg); color: var(--success); }
.badge--atencao { background: var(--warning-bg); color: var(--warning); }
.badge--perigo { background: var(--danger-bg); color: var(--danger); }

.badge .icone { width: 12px; height: 12px; stroke-width: 2; }

/* Confiança graduada: verde ≥0,85 · âmbar 0,60–0,84 · vermelho <0,60 · cinza sem valor */
.badge--confianca { font-variant-numeric: tabular-nums; }
.badge--confianca[data-nivel="alta"] { background: var(--success-bg); color: var(--success); }
.badge--confianca[data-nivel="media"] { background: var(--warning-bg); color: var(--warning); }
.badge--confianca[data-nivel="baixa"] { background: var(--danger-bg); color: var(--danger); }
.badge--confianca[data-nivel="nula"] { background: var(--surface-2); color: var(--muted); }

/* ---------- Diálogo (confirmação de ações) ---------- */

.dialogo {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
}

.dialogo::backdrop {
  background: color-mix(in oklab, var(--ink) 55%, transparent);
}

.dialogo__form { display: grid; }

.dialogo__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-2);
}

.dialogo__titulo {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.dialogo__fechar {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.dialogo__fechar:hover { background: var(--surface-2); color: var(--ink); }

.dialogo__corpo {
  padding: var(--space-2) var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  overflow-y: auto;
}

.dialogo__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
}

.dialogo__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dialogo__opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 56px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  font-weight: 600;
  cursor: pointer;
}

.dialogo__opcao:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, var(--surface));
}

.dialogo__opcao input { accent-color: var(--brand); }

/* ---------- Tabela ---------- */

.tabela-rolagem { overflow-x: auto; }

.tabela {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}

.tabela th {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.tabela td {
  height: 44px;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  vertical-align: middle;
}

.tabela tbody tr:hover { background: var(--surface-2); }

.tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---------- Estados ---------- */

.esqueleto {
  display: inline-block;
  width: 3.5rem;
  height: 1.75rem;
  border-radius: 4px;
  background: var(--surface-2);
  vertical-align: middle;
}

.bloco-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.bloco-erro .btn {
  height: 32px;
  padding-inline: var(--space-3);
  color: var(--danger);
  border-color: currentColor;
  background: transparent;
  font-size: var(--fs-caption);
}

.estado-vazio {
  padding: var(--space-6) var(--space-5);
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ---------- Toast ---------- */

.toast-area {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  width: min(360px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.toast__icone { color: var(--info); margin-top: 1px; }

.toast__fechar {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.toast__fechar:hover { background: var(--surface-2); color: var(--ink); }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Marca ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.marca__texto {
  font-family: var(--font-marca);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.marca--pequena .marca__texto { font-size: 1.5rem; }