/* =====================================================================
   ds-guias.css — GUIAS DE IA públicos: Claude Cowork (/cowork),
   Prompt Injection (/prompt-injection) e Anti-Alucinação (/anti-alucinacao)
   =====================================================================
   Porta, seletor por seletor, o CSS específico de página que hoje vive em
   dpmg-tutorial.css, dpmg-prompt-injection.css e dpmg-anti-alucinacao.css
   (o guia Gemini Enterprise, /gemini, não tinha folha própria — o pouco
   que usava já está coberto por ds-compat.css, ex. .btn-outline-secondary
   / .btn-success trocados por gemini_enterprise.html ao "copiar memória").

   Carregado por último na pilha pública, depois de ds-publico.css. NÃO
   repete nada que já seja fronteira do outro agente: .hero-section,
   .section-icon, .back-link, .sidebar-index (+ .sidebar-group, .nav-link,
   .nav-link.active), .mobile-nav-toggle, .mobile-nav-collapse,
   .section-card, .back-to-top/.visible, .table-tutorial, .table-compare
   (INCLUÍDO o bloco inteiro de dpmg-tutorial.css, com o único
   `!important` das três folhas antigas — não é problema desta folha),
   .alert-warning-custom, .alert-sm e a ponte de tokens --dpmg-*.

   Nenhuma folha antiga usava --dpmg-* diretamente (eram anteriores à
   ponte de tokens); os valores abaixo são hex/rem/px crus convertidos
   direto para var(--ds-*), com o degrau mais próximo quando não há
   correspondência exata — cada escolha não óbvia vem comentada no
   próprio bloco.

   Todo item de grid/flex criado aqui recebe min-width: 0 (causa raiz de
   rolagem horizontal documentada em ds.css/ds-compat.css). Onde o item
   já nasce dentro de `.row > *` (ds-compat.css), que já aplica
   min-width: 0 aos filhos, não repito.
   ===================================================================== */


/* =====================================================================
   GUIA CLAUDE COWORK (/cowork) — fonte: dpmg-tutorial.css
   =====================================================================
   .table-compare (thead/th/td, incluindo a versão empilhada em
   @media max-width:576px) é fronteira do ds-publico.css — não reproduzido
   aqui. Todo o resto da folha é local a este guia. */

/* ---- Cards de prompt prontos para copiar ---- */
.prompt-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  border: 2px solid transparent;
  box-shadow: var(--ds-shadow-sm); /* --shadow-card não tem token 1:1; --ds-shadow-sm é a sombra de repouso mais próxima em função (card discreto, não elevado) */
  transition: var(--ds-t-shadow); /* cobre exatamente as duas propriedades do hover abaixo (transform + box-shadow), no lugar de "transform .15s ease, box-shadow .15s ease" */
  overflow: hidden;
}

.prompt-card:hover {
  transform: translateY(var(--ds-lift-md));
  box-shadow: var(--ds-shadow-md); /* rgba(0,0,0,.1) bruto -> degrau neutro mais próximo da escala de sombra do DS */
}

/* exceção: paleta categórica de 7 cores (Bootstrap) para diferenciar os
   cards de prompt — o DS não tem uma paleta de 7 matizes, só os 4 canais
   semânticos (verde/dourado/aviso/erro) + neutros. Mapeamento por matiz
   mais próximo, aceitando perda de distinção entre pares de matiz
   parecido (é a única forma sem cor solta): azul e roxo/índigo compartilham
   a família "fria" do DS; laranja e rosa vão para aviso/erro (matiz quente
   mais próximo); verde e teal usam os dois tons de verde disponíveis. */
.prompt-card.blue { border-color: var(--ds-info-text); }
.prompt-card.green { border-color: var(--ds-success-solid); }
.prompt-card.orange { border-color: var(--ds-warning-text); }
.prompt-card.purple { border-color: var(--ds-text-muted); }
.prompt-card.teal { border-color: var(--ds-green-500); }
.prompt-card.indigo { border-color: var(--ds-green-900); }
.prompt-card.pink { border-color: var(--ds-destructive-solid); }

.prompt-header {
  padding: var(--ds-space-5);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border); /* cinza neutro de divisor -> borda decorativa padrão do DS */
}

.prompt-icon {
  font-size: var(--ds-text-xl); /* 1.5rem não bate exato; 1.375rem (xl) é o degrau mais próximo */
  line-height: var(--ds-leading-tight); /* 1 não é um degrau da escala; 1.25 é o mais próximo disponível */
  color: var(--ds-green-700);
}

.prompt-title {
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-lg); /* 1.1rem -> 1.125rem, degrau mais próximo */
  margin: 0;
  color: var(--ds-green-900);
  min-width: 0; /* item do flex .prompt-header criado acima */
}

.prompt-body {
  padding: var(--ds-space-5);
}

.prompt-desc {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-base); /* .95rem -> .9375rem, degrau mais próximo */
  line-height: var(--ds-leading-relaxed); /* 1.6 -> 1.65, degrau mais próximo */
  margin-bottom: var(--ds-space-4);
}

.prompt-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--ds-border-control); /* é um controle real (textarea) — borda precisa de 3:1, não é só divisória */
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
  font-size: var(--ds-text-sm); /* .85rem -> .8125rem, degrau mais próximo */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* var(--font-mono) não tem equivalente em ds.css; reaproveita a mesma pilha de .font-monospace em ds-compat.css, para não introduzir uma segunda família mono no site */
  background: var(--ds-bg);
  resize: vertical;
  color: var(--ds-text);
}

.btn-copy {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  padding: var(--ds-space-2) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-base); /* .9rem -> .9375rem, degrau mais próximo */
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2); /* .4rem -> 8px, degrau mais próximo */
  transition: var(--ds-t-color); /* "background .2s ease" -> token de transição de cor do DS (120ms, mesma família semântica) */
  margin-top: var(--ds-space-3);
}

.btn-copy:hover {
  background: var(--ds-green-600);
  color: var(--ds-on-brand);
}

.btn-copy:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring); /* substitui --focus-ring-outer isolado pelo anel duplo completo do DS */
}

.btn-copy.copied {
  background: var(--ds-success-solid); /* verde de sucesso do Bootstrap (#198754) -> canal semântico de sucesso do DS */
}

/* ---- Alerta de responsabilidade sobre o uso da IA ---- */
.alert-responsibility {
  background: var(--ds-warning-bg); /* #fff3e0 (laranja claríssimo) -> bg de aviso do DS, tom quente mais próximo */
  border-left: 4px solid var(--ds-gold-500); /* mesmo padrão de tarja de destaque usado em .dpmg-form-section e .dpmg-resumo-conferencia */
  padding: var(--ds-space-5);
  border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
  margin-top: var(--ds-space-6);
}

.alert-responsibility strong {
  color: var(--ds-warning-text); /* #e65100 -> tinta de aviso do DS, matiz âmbar/laranja mais próxima */
}

/* ---- Checklist de próximos passos ---- */
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) 0;
  border-bottom: 1px solid var(--ds-border);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-check {
  color: var(--ds-green-700);
  font-size: var(--ds-text-xl); /* 1.25rem não bate exato; 1.375rem (xl) é o degrau mais próximo */
  flex-shrink: 0;
}


/* =====================================================================
   GUIA DE PROMPT INJECTION (/prompt-injection)
   fonte: dpmg-prompt-injection.css
   ===================================================================== */

/* ---- Blocos copiáveis (contraprompts, textos de exemplo) ---- */
.copy-box {
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-border-strong); /* #e0e0e0 é uma borda bem visível para uma caixa de conteúdo; --ds-border-strong (decorativa, não é controle) é o degrau mais próximo em peso */
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 'Courier New', monospace -> mesma pilha mono já usada em .prompt-textarea acima e em .font-monospace de ds-compat.css */
  font-size: var(--ds-text-base); /* .9rem -> .9375rem, degrau mais próximo */
  color: var(--ds-text);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  line-height: var(--ds-leading-normal);
}

.btn-copy {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  padding: var(--ds-space-2) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  transition: var(--ds-t-color);
  margin-top: var(--ds-space-3);
}

.btn-copy:hover {
  background: var(--ds-green-600);
  color: var(--ds-on-brand);
}

.btn-copy:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

.btn-copy.copied {
  background: var(--ds-success-solid);
}

/* ---- Checklist interativo (input[type=checkbox] real, com risco no texto marcado) ---- */
.checklist-interactive {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.checklist-interactive li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) 0;
  border-bottom: 1px solid var(--ds-border);
}

.checklist-interactive li:last-child {
  border-bottom: none;
}

.checklist-interactive input[type="checkbox"] {
  width: 1.15rem; /* dimensão do controle, não escala de espaçamento — mesmo padrão de literal usado em .dpmg-check input (ds.css) */
  height: 1.15rem;
  margin-top: var(--ds-space-1); /* .15rem -> 4px, degrau mais próximo */
  flex-shrink: 0;
  accent-color: var(--ds-green-700);
  cursor: pointer;
}

.checklist-interactive label {
  margin-bottom: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0; /* item do flex .checklist-interactive li criado acima */
}

.checklist-interactive input:checked + label,
.checklist-interactive li:has(input:checked) label {
  text-decoration: line-through;
  color: var(--ds-text-muted);
}

/* ---- Links de fonte oficial ---- */
.source-links {
  font-size: var(--ds-text-base);
  margin-top: var(--ds-space-2);
}

.source-links a {
  margin-right: var(--ds-space-3);
}


/* =====================================================================
   GUIA ANTI-ALUCINAÇÃO (/anti-alucinacao)
   fonte: dpmg-anti-alucinacao.css
   =====================================================================
   .copy-box, .btn-copy (+ :hover/:focus-visible/.copied), .checklist-
   interactive (+ filhos) e .source-links (+ a) repetem quase byte a byte
   os blocos do Guia de Prompt Injection acima — mas NÃO são fundidos:
   duas diferenças reais entre as folhas originais (dpmg-anti-alucinacao.css
   não tem `margin-top` em .btn-copy, e não tem o seletor
   `input:checked + label` combinado — só a versão `:has()`), então cada
   guia mantém sua própria cópia, na ordem de carregamento original. */

/* ---- Blocos copiáveis (prompts seguros) ---- */
.copy-box {
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--ds-text-base);
  color: var(--ds-text);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  line-height: var(--ds-leading-normal);
}

.btn-copy {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  padding: var(--ds-space-2) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  transition: var(--ds-t-color);
  /* sem margin-top: diferença real do original em relação aos outros dois .btn-copy desta folha */
}

.btn-copy:hover {
  background: var(--ds-green-600);
  color: var(--ds-on-brand);
}

.btn-copy:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

.btn-copy.copied {
  background: var(--ds-success-solid);
}

/* ---- Checklist interativo ---- */
.checklist-interactive {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.checklist-interactive li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) 0;
  border-bottom: 1px solid var(--ds-border);
}

.checklist-interactive li:last-child {
  border-bottom: none;
}

.checklist-interactive input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: var(--ds-space-1);
  flex-shrink: 0;
  accent-color: var(--ds-green-700);
  cursor: pointer;
}

.checklist-interactive label {
  margin-bottom: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

/* só a variante :has() — o original desta folha não tem o par
   "input:checked + label" que o Guia de Prompt Injection tem acima */
.checklist-interactive li:has(input:checked) label {
  text-decoration: line-through;
  color: var(--ds-text-muted);
}

/* ---- Links de fonte ---- */
.source-links {
  font-size: var(--ds-text-base);
  margin-top: var(--ds-space-2);
}

.source-links a {
  margin-right: var(--ds-space-3);
}

/* ---- Grade de botões de conferência nas fontes oficiais ---- */
.conf-group {
  margin-bottom: var(--ds-space-6);
}

.conf-group:last-child {
  margin-bottom: 0;
}

.conf-group-title {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-700);
  margin-bottom: var(--ds-space-2);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.conf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-space-2);
}

.conf-btn {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border-control); /* link com cara de botão sobre fundo próprio — a borda é o limite do controle, precisa de 3:1 */
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-green-900); /* var(--dpmg-green-dark, #14432b) -> degrau mais escuro de verde do DS, mesmo papel de "tinta sobre fundo claro" */
  text-decoration: none;
  font-size: var(--ds-text-base); /* .92rem -> .9375rem, degrau mais próximo */
  font-weight: var(--ds-weight-medium);
  transition: border-color var(--ds-duration-base) var(--ds-ease), var(--ds-t-shadow); /* "border-color .2s, box-shadow .2s, transform .1s" -> duração base do DS para as três, já que --ds-t-shadow cobre box-shadow+transform juntos */
  min-width: 0; /* item do grid .conf-grid criado acima */
}

.conf-btn:hover {
  border-color: var(--ds-green-700);
  box-shadow: 0 2px 8px rgba(var(--ds-green-700-rgb), 0.12); /* rgba(26,92,58,.12) bruto -> mesmo par de números, mas construído a partir do --ds-green-700-rgb do token (padrão já usado em ds-login.css) */
  color: var(--ds-green-700);
}

.conf-btn:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

.conf-btn i {
  font-size: var(--ds-text-md); /* 1.05rem -> 1rem, degrau mais próximo */
  color: var(--ds-green-700);
  flex-shrink: 0;
}

/* ---- Cartão de "regra de ouro" ---- */
.regra-ouro {
  border-left: 4px solid var(--ds-gold-500); /* var(--dpmg-gold, #c9a227) bate exato com --ds-gold-500 */
  background: var(--ds-gold-100); /* #fffbe9 (amarelo claríssimo) -> bg dourado claro do DS, tom mais próximo */
  padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
  margin: var(--ds-space-4) 0;
}