/*
 * css/components/code-block.css — Bloques de código con botón Copiar y "Sample data output".
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

button.secondary.sample-btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.secondary.sample-btn:hover:not(:disabled) { filter: brightness(1.1); }
/* comandos CLI de ejemplo: leve toque verde (pedido del usuario) */
.howto-section .code-block pre { background: var(--ok-bg); border-left: 3px solid var(--ok); }
.code-block { position: relative; margin: 0 0 10px; }
.code-block pre { margin: 0; padding-right: 60px; }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 6px; padding: 3px 9px; font-size: 0.75rem; cursor: pointer; font-family: inherit;
}
.copy-btn:hover { color: var(--text); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }
.sample-btn { margin: 0 0 14px; }
.sample-container { margin: 0 0 14px; }
.sample-container .sample-meta { font-size: 0.76rem; color: var(--text-dim); margin: 0 0 8px; }
.sample-table th {
  padding: 6px 10px; text-align: left; font-size: 0.75rem; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sample-table td {
  padding: 5px 10px; border-top: 1px solid var(--border); font-size: 0.78rem;
  white-space: nowrap; font-family: var(--font-mono);
}
.sample-table .na { color: var(--text-dim); font-family: var(--font); }