/* ============================================================
   Data Tribuna — components.css
   Botões, inputs, cards, modais, toasts, badges, tabelas e os
   controles de resposta da entrevista.
   ============================================================ */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-md);
  font-weight: 600;
  font-size: var(--texto-md);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.06s;
  user-select: none;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primario {
  background: linear-gradient(180deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-primaria);
}
.btn-primario:hover:not(:disabled) {
  background: var(--cor-primaria-escura);
}

.btn-secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda-forte);
  box-shadow: var(--sombra-sm);
}
.btn-secundario:hover:not(:disabled) {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-escura);
}

.btn-perigo {
  background: var(--cor-erro);
  color: var(--cor-texto-invertido);
}

.btn-fantasma {
  color: var(--cor-primaria-escura);
  background: transparent;
}
.btn-fantasma:hover:not(:disabled) {
  background: var(--cor-primaria-nevoa);
}

.btn-fantasma-perigo {
  color: var(--cor-erro);
  background: transparent;
}
.btn-fantasma-perigo:hover:not(:disabled) {
  background: var(--cor-erro-clara);
}

.btn-bloco { width: 100%; }

/* ---------- Formulários ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin-bottom: var(--esp-4);
}

.campo label {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--cor-texto);
}

.campo .obrigatoria::after {
  content: " *";
  color: var(--cor-primaria);
}

.input,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="search"],
.campo select,
.campo textarea {
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo textarea { resize: vertical; min-height: 88px; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}

.campo .erro-msg,
.erro-msg {
  font-size: var(--texto-sm);
  color: var(--cor-erro);
  font-weight: 500;
}

.campo.invalido input,
.campo.invalido select,
.campo.invalido textarea {
  border-color: var(--cor-erro);
}

/* ---------- Cards ---------- */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-5);
}

.card-titulo {
  font-size: var(--texto-lg);
  font-weight: 700;
  margin-bottom: var(--esp-2);
}

.card-acoes {
  display: flex;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  flex-wrap: wrap;
}

/* ---------- Badges de status ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 3px var(--esp-3);
  border-radius: var(--raio-cheio);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-pendente      { background: var(--cor-primaria-clara);  color: var(--cor-primaria-escura); }
.badge-sincronizada  { background: var(--cor-sucesso-clara);   color: var(--cor-sucesso); }
.badge-offline       { background: var(--cor-erro-clara);      color: var(--cor-erro); }
.badge-online        { background: var(--cor-sucesso-clara);   color: var(--cor-sucesso); }
.badge-gps           { background: var(--cor-info-clara);      color: var(--cor-info); }
.badge-neutro        { background: var(--cor-fundo);           color: var(--cor-texto-suave); }
.badge-rascunho      { background: var(--cor-fundo);           color: var(--cor-texto-suave); }
.badge-ativa         { background: var(--cor-sucesso-clara);   color: var(--cor-sucesso); }
.badge-arquivada     { background: var(--cor-erro-clara);      color: var(--cor-erro); }

.badge .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Badge clicável (pendências de sync no header) */
button.badge { cursor: pointer; }

/* ---------- Barra de progresso ---------- */
.progresso {
  width: 100%;
  height: 8px;
  border-radius: var(--raio-cheio);
  background: var(--cor-borda);
  overflow: hidden;
}

.progresso .progresso-preenchido {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-primaria));
  border-radius: var(--raio-cheio);
  transition: width 0.25s ease;
}

/* ---------- Question renderer (entrevista e pré-visualização) ---------- */
.pergunta-enunciado {
  font-size: var(--texto-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--esp-4);
}

/* Botões de escala / Sim-Não / NPS */
.escala-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.escala-grupo button {
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  font-weight: 600;
  box-shadow: var(--sombra-sm);
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.escala-grupo button.selecionado {
  background: linear-gradient(180deg, var(--cor-primaria), var(--cor-primaria-escura));
  border-color: var(--cor-primaria-escura);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-primaria);
}

/* Listas de opções (escolha única, múltipla, confirmação) */
.opcao-lista label {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-toque);
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--esp-2);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

.opcao-lista label:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-nevoa);
  font-weight: 600;
}

.opcao-lista input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--cor-primaria);
}

/* Canvas de assinatura */
.assinatura-canvas {
  width: 100%;
  border: 1.5px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- Modal ---------- */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-4);
  z-index: var(--z-modal);
}

.modal {
  background: var(--cor-superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-entrar 0.18s ease;
}

@keyframes modal-entrar {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
}

.modal-corpo {
  padding: var(--esp-5);
  overflow-y: auto;
}

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

/* ---------- Toast ---------- */
.toast-area {
  position: fixed;
  bottom: var(--esp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  z-index: var(--z-toast);
  width: min(92vw, 420px);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md);
  border-left: 4px solid var(--cor-marca);
  box-shadow: var(--sombra-lg);
  background: var(--cor-grafite);
  color: var(--cor-texto-invertido);
  font-size: var(--texto-sm);
  font-weight: 500;
  animation: toast-entrar 0.2s ease;
}

.toast-sucesso { border-left-color: #4ade80; }
.toast-erro    { border-left-color: #f87171; }
.toast-alerta  { border-left-color: var(--cor-marca); }

@keyframes toast-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Tabela de dados ---------- */
.tabela-envolucro {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabela th,
.tabela td {
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}

.tabela th {
  font-weight: 700;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  user-select: none;
  cursor: pointer;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--cor-primaria-nevoa); }

.tabela-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
  flex-wrap: wrap;
}

/* ---------- Dados Oficiais ---------- */
.dado-grid {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.dado-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3) var(--esp-4);
  box-shadow: var(--sombra-sm);
}

.dado-rotulo {
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
}

.dado-valor {
  font-size: var(--texto-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--esp-1) 0;
}

.dado-unidade {
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cor-texto-suave);
  margin-left: 2px;
}

.dado-rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.dado-indisponivel { color: var(--cor-texto-suave); }

.dado-indisponivel-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  align-items: flex-start;
}

/* Skeleton loading */
.skeleton {
  border-radius: var(--raio-sm);
  background: linear-gradient(90deg, var(--cor-borda) 25%, var(--cor-fundo) 50%, var(--cor-borda) 75%);
  background-size: 200% 100%;
  animation: skeleton-brilho 1.2s ease-in-out infinite;
}

@keyframes skeleton-brilho {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Estado vazio ---------- */
.estado-vazio {
  text-align: center;
  padding: var(--esp-8) var(--esp-4);
  color: var(--cor-texto-suave);
}

/* ---------- Marca Data Tribuna (logo principal recriado em SVG) ---------- */
.marca-dt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin: 0;
}

.marca-dt svg { flex-shrink: 0; width: auto; }

.marca-dt-texto {
  display: block;
  text-align: left;
  padding-left: var(--esp-3);
  border-left: 2px solid #0b1d3c;
}

.marca-dt-nome {
  display: block;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #0b1d3c;
  white-space: nowrap;
}
.marca-dt-nome .laranja { color: #ff6a00; }

.marca-dt-sub {
  display: block;
  margin-top: var(--esp-1);
  font-size: 12px;
  font-weight: 500;
  color: #0b1d3c;
}

/* Versão do login (principal, com subtítulo) */
.marca-dt-login svg { height: 72px; }
.marca-dt-login .marca-dt-nome { font-size: 29px; }

@media (max-width: 420px) {
  .marca-dt-login svg { height: 56px; }
  .marca-dt-login .marca-dt-nome { font-size: 22px; }
  .marca-dt-sub { font-size: 10.5px; }
}

/* Versão compacta (header do app) — anula o estilo de texto
   do .logo-empresa, mantendo o divisor à esquerda */
.app-header .marca-dt-compacta {
  display: inline-flex;
  gap: var(--esp-2);
  text-transform: none;
  letter-spacing: normal;
}
.app-header .marca-dt-compacta svg { height: 24px; }
.app-header .marca-dt-compacta .marca-dt-nome { font-size: 15px; }