/* =====================================================================
   manual.css — estilos del manual técnico (manual.html)
   Se carga DESPUÉS de styles.css y reutiliza sus variables de marca.
   Bloques: Layout · Cover & callouts · Tech, tree, architecture ·
            Brand & media · Code blocks & explorer · Demos, quiz, responsive
   ===================================================================== */

/* ---------- Layout ---------- */
.manual-body { background: var(--ivory); }
.manual-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start; padding: 2rem 0 4rem; }
.manual-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow: auto; }
.manual-sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.manual-sidebar a { display: block; padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-700); font-weight: 600; font-size: 0.92rem; border-left: 3px solid transparent; }
.manual-sidebar a:hover { background: var(--teal-50); }
.manual-sidebar a.is-active { background: var(--navy-900); color: var(--white); border-left-color: var(--gold-500); }
.side-title { font-weight: 800; color: var(--navy-900); margin: 0 0 0.5rem 0.8rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.manual-progress { margin: 1rem 0.8rem 0; font-size: 0.85rem; color: var(--ink-500); }
.manual-content { min-width: 0; }
.manual-section { padding: 2.25rem 0; border-bottom: 1px solid var(--ink-200); scroll-margin-top: calc(var(--header-h) + 1rem); }
.manual-section:last-child { border-bottom: 0; }
.manual-section h2 { display: flex; align-items: center; gap: 0.7rem; }
.manual-section h2 .num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--navy-900); color: var(--gold-300); font-size: 1rem; font-family: var(--font-body); font-weight: 800; flex-shrink: 0; }
.manual-section h3 { margin-top: 1.9rem; }
.manual-section h3 small { font-size: 0.8rem; color: var(--ink-500); font-family: var(--font-body); font-weight: 500; }
.manual-section h4 { margin-top: 1.25rem; }
.check-ul li::marker { color: var(--gold-700); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.py-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.py-grid h4, .two-col h4 { margin-top: 0; }

/* ---------- Cover & callouts ---------- */
.manual-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); min-height: 420px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-content { position: relative; padding: clamp(1.5rem, 4vw, 3rem); background: linear-gradient(180deg, rgba(11,42,58,0.15), rgba(11,42,58,0.85) 40%, rgba(11,42,58,0.97)); width: 100%; }
.cover-content h1 { color: var(--white); }
.cover-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--gold-100); color: var(--gold-700); }
.badge.teal { background: rgba(255,255,255,0.14); color: var(--white); border: 1px solid rgba(255,255,255,0.3); }
.callout { border-left: 4px solid var(--teal-500); background: var(--teal-50); padding: 0.95rem 1.15rem; border-radius: var(--radius-sm); margin: 1rem 0; }
.callout.gold { border-color: var(--gold-500); background: var(--gold-100); }
.callout.green { border-color: var(--success); background: #eef8f1; }
.callout strong:first-child { display: block; margin-bottom: 0.2rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1rem 0; }
.stat { background: var(--navy-900); color: var(--white); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat strong { display: block; font-family: var(--font-head); font-size: 1.9rem; color: var(--gold-300); }
.stat span { font-size: 0.82rem; color: var(--teal-100); }

/* ---------- Tech, tree, architecture ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tech-grid-5 { grid-template-columns: repeat(5, 1fr); }
.tech-card { border-radius: var(--radius); padding: 1.1rem; color: var(--white); display: flex; flex-direction: column; gap: 0.4rem; min-height: 200px; }
.tech-card strong { font-family: var(--font-head); font-size: 1.3rem; }
.tech-card small { opacity: 0.9; }
.tech-card ul { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.tech-card code { background: rgba(255,255,255,0.18); color: var(--white); }
.tech-card.html { background: #c94a1f; } .tech-card.css { background: #2a4fc7; } .tech-card.js { background: #9c8a12; } .tech-card.json { background: var(--teal-700); } .tech-card.py { background: #2f6f9f; }
.tree-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; }
.tree { list-style: none; margin: 0; padding: 0.5rem 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.88rem; }
.tree ul { list-style: none; padding-left: 1.2rem; margin: 0; border-left: 1px dashed var(--ink-200); }
.tree li { margin: 0.1rem 0; }
.tree button { border: 0; background: transparent; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); text-align: left; width: 100%; font: inherit; display: flex; gap: 0.5rem; align-items: center; min-height: 34px; }
.tree button:hover { background: var(--teal-50); }
.tree button.is-active { background: var(--navy-900); color: var(--white); font-weight: 700; }
.tree .folder { color: var(--gold-700); font-weight: 700; display: flex; gap: 0.4rem; align-items: center; padding: 0.3rem 0.6rem; }
.tree .icon { width: 1.1em; height: 1.1em; }
.file-info { min-height: 220px; }
.file-info h4 { margin-top: 0.5rem; font-family: "JetBrains Mono", Consolas, monospace; color: var(--navy-900); }
.file-info ul { padding-left: 1.1rem; }
.arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem; }
.arch-box { border-radius: var(--radius); padding: 0.9rem; text-align: center; border: 1.5px solid var(--navy-900); background: var(--white); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.arch-box:hover, .arch-box.is-active { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--navy-900); color: var(--white); }
.arch-box strong { color: var(--navy-900); display: flex; justify-content: center; gap: 0.4rem; align-items: center; }
.arch-box.is-active strong, .arch-box:hover strong { color: var(--gold-300); }
.arch-box small { color: var(--ink-700); font-size: 0.8rem; }
.arch-box.is-active small, .arch-box:hover small { color: var(--teal-100); }
.arch-box-py { border-color: #2f6f9f; border-style: dashed; }
.arch-arrow { font-size: 1.5rem; color: var(--gold-700); text-align: center; }
.arch-info { margin-top: 0.5rem; }

/* ---------- Brand & media ---------- */
.brand-hero { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: center; background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.brand-hero img { width: 100%; border-radius: 24px; }
.brand-hero h3 { margin-top: 0; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-200); cursor: pointer; background: var(--white); padding: 0; text-align: left; }
.swatch .color { height: 64px; }
.swatch .meta { padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.swatch .meta strong { display: block; font-family: "JetBrains Mono", Consolas, monospace; }
.swatch .meta span { color: var(--ink-500); }
.copy-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--navy-900); color: var(--white); padding: 0.6rem 1.2rem; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 500; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.copy-toast.is-visible { opacity: 1; }
.type-sample { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.type-sample .card p { margin: 0.3rem 0; }
.type-sample .head { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; }
.type-sample .mono { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 600; font-size: 1.1rem; }
.icon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem; }
.icon-gallery button { border: 1px solid var(--ink-200); background: var(--white); border-radius: var(--radius-sm); padding: 0.7rem 0.4rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--navy-900); min-height: 78px; }
.icon-gallery button:hover { background: var(--navy-900); color: var(--gold-300); }
.icon-gallery .icon { width: 1.7em; height: 1.7em; }
.icon-gallery small { font-size: 0.66rem; color: inherit; opacity: 0.8; word-break: break-all; text-align: center; }
.ui-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.img-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.img-gallery figure { margin: 0; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden; }
.img-gallery img { aspect-ratio: 4/3; object-fit: cover; }
.img-gallery figcaption { padding: 0.7rem 0.9rem; font-size: 0.86rem; }
.img-gallery figcaption strong { display: block; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.78rem; color: var(--navy-900); }
.img-gallery .tag { margin-bottom: 0.3rem; }
.tag-real-dark { background: var(--teal-50); color: var(--teal-700); }
.device-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; align-items: center; }
.device-frame { background: var(--navy-900); border-radius: 22px; padding: 14px; margin: 0 auto; transition: width 0.3s ease; max-width: 100%; }
.device-frame iframe { width: 100%; height: 640px; border: 0; border-radius: 12px; background: var(--white); display: block; }
.device-label { text-align: center; color: var(--ink-500); font-size: 0.9rem; margin-top: 0.5rem; }

/* ---------- Code blocks & explorer ---------- */
pre.code { font-variant-ligatures: none; background: #0e1f27; color: #e6edf0; padding: 1rem 1.2rem; border-radius: var(--radius); overflow-x: auto; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.84rem; line-height: 1.55; margin: 1rem 0; position: relative; }
pre.code::before { content: attr(data-lang); position: absolute; top: 0.4rem; right: 0.8rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: #7fa7b3; }
.tok-kw { color: #c792ea; } .tok-str { color: #c3e88d; } .tok-num { color: #f78c6c; } .tok-com { color: #6c8b95; font-style: italic; }
.tok-tag { color: #f07178; } .tok-attr { color: #ffcb6b; } .tok-prop { color: #82aaff; } .tok-key { color: #ffcb6b; } .tok-fn { color: #82aaff; } .tok-dec { color: #f78c6c; } .tok-sel { color: #f07178; }
code:not(pre code) { background: var(--sand-100); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.86em; color: var(--navy-900); overflow-wrap: anywhere; }
.code-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 0.75rem; }
.code-toolbar label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.code-toolbar select { padding: 0.5rem 0.8rem; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--white); min-height: 42px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.85rem; }
.code-meta { font-size: 0.85rem; color: var(--ink-500); }
.check-inline { font-weight: 500 !important; font-size: 0.9rem; }
.code-explorer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
.code-view { font-variant-ligatures: none; background: #0e1f27; color: #e6edf0; border-radius: var(--radius); overflow: auto; max-height: 78vh; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.8rem; line-height: 1.5; }
.code-view .lead { color: #7fa7b3; padding: 1rem; }
.code-table { border-collapse: collapse; width: 100%; }
.code-table td { border: 0; padding: 0 0.9rem 0 0; vertical-align: top; white-space: pre; }
.code-view.is-wrap .code-table td.src { white-space: pre-wrap; word-break: break-all; }
.code-table td.ln { text-align: right; color: #4f6d78; user-select: none; padding: 0 0.8rem 0 0.8rem; width: 1%; border-right: 1px solid #1e3540; cursor: pointer; }
.code-table tr:hover td { background: rgba(255,255,255,0.03); }
.code-table tr.is-hl td { background: rgba(232,199,102,0.14); }
.code-table tr.is-hl td.ln { color: var(--gold-300); border-right-color: var(--gold-500); }
.code-table tr.is-block-start td.src { position: relative; }
.code-notes { position: sticky; top: calc(var(--header-h) + 1rem); max-height: 78vh; overflow: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.code-overview { background: var(--navy-900); color: var(--teal-100); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: 0.92rem; }
.code-overview strong { color: var(--gold-300); }
.note { border: 1px solid var(--ink-200); background: var(--white); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.note:hover { border-color: var(--gold-500); }
.note.is-active { border-color: var(--navy-900); background: var(--teal-50); box-shadow: var(--shadow-sm); }
.note h5 { margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--navy-900); display: flex; justify-content: space-between; gap: 0.5rem; }
.note h5 span { font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; color: var(--gold-700); font-weight: 600; white-space: nowrap; }
.note p { margin: 0; font-size: 0.88rem; color: var(--ink-700); }
.note.is-missing { opacity: 0.6; }

/* ---------- Demos, quiz, responsive ---------- */
.component { border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 1.3rem; margin: 1.25rem 0; background: var(--white); }
.component-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.component-head h3 { margin: 0; }
.component-head .files { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.component-head .files code { font-size: 0.76rem; }
.flow { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: flow; }
.flow li { position: relative; padding-left: 2.6rem; }
.flow li::before { counter-increment: flow; content: counter(flow); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-gradient); color: var(--navy-900); font-weight: 800; display: grid; place-items: center; font-size: 0.85rem; }
.demo { background: var(--sand-100); border-radius: var(--radius); padding: 1.1rem; margin-top: 1rem; border: 1px dashed var(--gold-500); }
.demo h4 { margin-top: 0; }
.demo-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.demo input[type="text"], .demo select, .demo-date { padding: 0.6rem 0.9rem; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); min-height: 44px; flex: 1; min-width: 180px; background: var(--white); }
.demo-out { margin-top: 0.8rem; background: var(--white); border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.93rem; }
.demo-out table { font-size: 0.86rem; }
.demo-out .hit { background: var(--gold-100); border-radius: 3px; padding: 0 3px; }
.demo-out td, .demo-out th, .manual-section td, .manual-section th { overflow-wrap: anywhere; }
.score-bar { height: 8px; border-radius: 999px; background: var(--ink-200); overflow: hidden; min-width: 80px; }
.score-bar span { display: block; height: 100%; background: var(--gold-gradient); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.82rem; }
.kv dt { color: var(--gold-700); } .kv dd { margin: 0; word-break: break-all; }
.compare-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.compare-engines .card { padding: 0.9rem 1rem; }
.compare-engines h5 { margin: 0 0 0.4rem; display: flex; gap: 0.4rem; align-items: center; }
.match-ok { color: var(--success); font-weight: 700; } .match-bad { color: var(--danger); font-weight: 700; }
.tests-table td:first-child { font-weight: 600; }
.ok { color: var(--success); font-weight: 700; }
.glossary dt { font-weight: 700; color: var(--navy-900); margin-top: 0.7rem; }
.glossary dd { margin: 0.1rem 0 0; color: var(--ink-700); }
.quiz-q { margin: 1rem 0; }
.quiz-q .opts { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-q button { text-align: left; border: 1.5px solid var(--ink-200); background: var(--white); padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); min-height: 44px; }
.quiz-q button.is-right { border-color: var(--success); background: #eef8f1; }
.quiz-q button.is-wrong { border-color: var(--danger); background: #fdecea; }
.quiz-score { font-weight: 700; color: var(--navy-900); }

@media (max-width: 1024px) {
  .manual-layout { grid-template-columns: 1fr; }
  .manual-sidebar { position: static; max-height: none; }
  .manual-sidebar nav ul { flex-direction: row; flex-wrap: wrap; }
  .tech-grid, .tech-grid-5 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .arch { grid-template-columns: 1fr; }
  .arch-arrow { transform: rotate(90deg); }
  .code-explorer { grid-template-columns: 1fr; }
  .code-notes { position: static; max-height: none; }
  .brand-hero { grid-template-columns: 1fr; }
  .brand-hero img { max-width: 200px; }
}
@media (max-width: 720px) {
  .manual-section table { font-size: 0.85rem; }
  .manual-section th, .manual-section td { padding: 0.5rem; }
  .tree-wrap, .type-sample, .img-gallery, .two-col, .py-grid, .compare-engines { grid-template-columns: 1fr; }
  .tech-grid, .tech-grid-5 { grid-template-columns: 1fr; }
  .device-frame iframe { height: 520px; }
  .component-head .files { margin-left: 0; }
  .manual-cover { min-height: 0; }
}