/*
 * css/views/howto.css — Sección HOWTO.
 *
 * 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.
 */

/* ---- HOWTO tab ---- */
/* 18-oct, usabilidad: el texto corrido se lee mejor en ~80 caracteres; tablas y bloques de código siguen a todo el ancho */
.howto-section p, .howto-section li { max-width: 80ch; }
.howto-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px;
}
.howto-section h3 { margin: 0 0 4px; font-size: 1.05rem; }
.howto-section .kicker { color: var(--text-dim); font-size: 0.75rem; margin: 0 0 12px; }
.howto-section p { margin: 0 0 12px; line-height: 1.55; font-size: 0.87rem; }
.howto-section p:last-child { margin-bottom: 0; }
.howto-section .label-line { font-size: 0.87rem; margin: 0 0 12px; line-height: 1.6; }
.howto-section .label-line b { font-weight: 600; }
.howto-section code {
  font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px;
  border-radius: 4px; font-size: max(0.85em, 0.75rem);   /* 18-oct: nunca menos de 12 px */
  overflow-wrap: anywhere;
}
/* 18-oct, usabilidad: la sección no estira la página; los bloques de código se deslizan dentro de su caja */
.howto-section { min-width: 0; max-width: 100%; }
.howto-section pre, .howto-section .code-block { max-width: 100%; }
.howto-section pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 14px;
}
.howto-section pre code { background: none; padding: 0; font-size: 0.78rem; line-height: 1.55; }
.howto-section .ex-label { font-size: 0.78rem; color: var(--text-dim); margin: 0 0 6px; font-weight: 600; }
.howto-doclink { font-size: 0.82rem; color: var(--text-dim); }
.howto-doclink code { font-family: var(--font-mono); font-size: max(0.85em, 0.75rem); }