/* One unframed learning surface, shared by the course and the presentation. */
.section-copy { text-align: center; margin-bottom: 28px; }
.section-copy h2 { margin: 0 0 14px; color: var(--color-hero-bg); font-size: clamp(2rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.16; }
.section-copy h2:focus { outline: none; }
.lead { max-width: 650px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.55; }
.figure-media { margin: 0; }
.figure-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.detection-example { max-width: 650px; margin: 0 auto; }
.detection-example img, .lesson-image img { border: 1px solid var(--color-line); border-radius: var(--radius-media); background: #fff; box-shadow: var(--shadow-media); }
.detection-example figcaption { margin-top: 20px; text-align: center; font-size: .9rem; color: var(--color-text-muted); }
.detection-example figcaption strong { font-weight: 500; color: var(--color-text-main); }
.lesson-image { margin: 0 auto; }
.lesson-image--wide { max-width: 820px; }
.lesson-image--medium { max-width: 560px; }
.lesson-image figcaption { margin-top: 16px; color: var(--color-text-muted); font-size: .9rem; text-align: center; }
.visual-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: center; max-width: 780px; margin: 0 auto; }
.visual-pair figure { min-width: 0; margin: 0; text-align: center; }
.visual-pair img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.visual-pair figcaption { margin-top: 10px; color: var(--color-text-muted); font-size: .9rem; }
.question-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: center; max-width: 880px; margin: 32px auto 0; }
.media-container { text-align: center; }
.media-container img { border-radius: 8px; }
.media-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 10px; margin-top: 7px; background: transparent; border: 0; color: var(--color-primary-dark); cursor: pointer; font-size: .875rem; }
.quiz-box { min-width: 0; }
.quiz-box fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.quiz-box legend { padding: 0; margin-bottom: 18px; font-size: 1.14rem; line-height: 1.45; font-weight: 500; }
.quiz-options { display: grid; }
.quiz-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 14px; border-bottom: 1px solid var(--color-line); border-radius: 10px; cursor: pointer; font-size: 1rem; line-height: 1.45; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
.quiz-option:first-child { border-top: 1px solid var(--color-line); }
.quiz-option:hover { background: var(--color-wash); }
.quiz-option input { flex-shrink: 0; width: 17px; height: 17px; margin: 0; accent-color: var(--color-primary-dark); }
.quiz-option strong { margin-right: 10px; color: var(--color-primary-dark); font-size: .83rem; font-weight: 500; }
.quiz-option.is-correct strong, .quiz-option.is-incorrect strong { color: inherit; }
.quiz-option.is-correct { background: var(--color-success-bg); color: var(--color-success-text); }
.quiz-option.is-correct::after, .quiz-option.is-incorrect::after { margin-left: auto; padding-left: 12px; font-size: 1.05rem; font-weight: 700; }
.quiz-option.is-correct::after { content: "\2713"; }
.quiz-option.is-incorrect::after { content: "\00d7"; }
.quiz-option.is-incorrect { background: var(--color-error-bg); color: var(--color-error-text); }
.quiz-status { min-height: 48px; margin: 15px 0 0; padding-left: 14px; color: var(--color-text-muted); font-size: .92rem; line-height: 1.5; }
.quiz-status:not(:empty) { animation: feedback-enter var(--duration-base) var(--ease-out); }
.quiz-status.correct { color: var(--color-success-text); }
.quiz-status.incorrect { color: var(--color-error-text); }
.iou-lab { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(200px, .75fr); gap: 60px; align-items: center; width: min(830px, 100%); margin: 28px auto 0; }
.iou-stage { border-radius: 10px; background: #f3f9fd; padding: 12px 22px; }
.lab-stage { border-radius: var(--radius-media); background: linear-gradient(180deg, #f7fcfe 0%, var(--color-wash-accent) 100%); padding: 16px 22px; }
.iou-stage svg { display: block; width: 100%; max-height: 330px; overflow: visible; }
.iou-score { margin: 0; }
.iou-score span { display: block; font-size: .85rem; color: var(--color-text-muted); }
.iou-score strong { display: block; color: var(--color-primary-dark); font-family: var(--font-title); font-size: 5.5rem; letter-spacing: -.05em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.iou-message { min-height: 24px; margin: 8px 0 26px; color: var(--color-text-muted); font-size: .95rem; }
.iou-controls label { display: block; margin-bottom: 8px; font-size: .92rem; }
.iou-controls input { display: block; width: 100%; min-height: 28px; margin: 0; accent-color: var(--color-primary-dark); cursor: ew-resize; }
.range-ends { display: flex; justify-content: space-between; color: #626b7a; font-size: .8rem; }
.practice-path { width: fit-content; max-width: 100%; list-style: none; margin: 40px auto 32px; padding: 0; counter-reset: practice; }
.practice-path li { display: flex; align-items: baseline; column-gap: 12px; margin-bottom: 20px; font-size: 1.1rem; counter-increment: practice; }
.practice-path li::before { content: counter(practice) "."; color: var(--color-primary-dark); font-size: .9rem; font-variant-numeric: tabular-nums; }
.practice-path strong { font-weight: 500; }
.colab-action { display: flex; width: fit-content; margin: 0 auto; padding: 13px 26px; font-size: 1rem; }
.outcome-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; margin: 36px auto 0; border-block: 1px solid var(--color-line); }
.outcome-flow div { min-height: 160px; padding: 26px 28px; }
.outcome-flow div + div { border-left: 1px solid var(--color-line); }
.outcome-flow strong { display: block; margin-bottom: 10px; color: var(--color-primary-dark); font-family: var(--font-title); font-size: 1.4rem; }
.outcome-flow span { color: var(--color-text-muted); font-size: .98rem; line-height: 1.45; }
.evaluation-list { display: grid; gap: 0; }
.evaluation-list p { max-width: 420px; margin: 0; padding: 17px 0; border-bottom: 1px solid var(--color-line); color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; }
.evaluation-list p:first-child { border-top: 1px solid var(--color-line); }
.evaluation-list strong { color: var(--color-text-main); font-weight: 600; }
.code-sample { position: relative; width: min(760px, 100%); box-sizing: border-box; margin: 30px auto 0; padding: 26px 30px; overflow-x: auto; border: 1px solid var(--color-line); border-left: 3px solid var(--color-primary); border-radius: var(--radius-media); background: linear-gradient(180deg, #fbfcfe 0%, var(--color-wash) 100%); color: #182136; font: .92rem/1.7 var(--font-mono); text-align: left; white-space: pre-wrap; }
.evolution-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin: 40px auto 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line-strong); }
.evolution-line li { position: relative; padding: 32px 26px 0 0; }
.evolution-line li:last-child { padding-right: 0; }
.evolution-line li::before { content: ''; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px #fff; }
.evolution-line strong { display: block; margin-bottom: 8px; color: var(--color-primary-dark); font-family: var(--font-title); font-size: 1.12rem; letter-spacing: -.01em; }
.evolution-line span { color: var(--color-text-muted); font-size: .95rem; line-height: 1.45; }
.evolution-line--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 920px; }
.evolution-line--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 980px; }
.evolution-line--5 li { padding-right: 18px; }
.evolution-line--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 1060px; }
.evolution-line--7 li { padding: 28px 12px 0 0; }
.evolution-line--7 strong { font-size: .92rem; }
.evolution-line--7 span { font-size: .82rem; }
.plain-columns, .comparison-lanes { display: grid; max-width: 880px; margin: 36px auto 0; border-block: 1px solid var(--color-line); }
.plain-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plain-columns--3, .comparison-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparison-lanes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plain-columns > div, .comparison-lanes > div { min-width: 0; padding: 26px 28px; border-left: 1px solid var(--color-line); }
.plain-columns > div:last-child, .comparison-lanes > div:last-child { border-right: 1px solid var(--color-line); }
.plain-columns strong, .comparison-lanes strong { display: block; margin-bottom: 9px; color: var(--color-primary-dark); font-family: var(--font-title); font-size: 1.18rem; line-height: 1.25; }
.plain-columns span, .comparison-lanes span { display: block; color: var(--color-text-muted); font-size: .98rem; line-height: 1.5; }
.question-layout > .media-container img, .question-layout > .lesson-image img { width: 100%; max-height: 330px; object-fit: contain; }
.question-layout--text { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.architecture-walkthrough { align-items: stretch; max-width: 980px; }
.compact-process { margin: 0; padding: 0; list-style: none; counter-reset: process; }
.compact-process li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--color-line); counter-increment: process; color: var(--color-text-muted); line-height: 1.35; }
.compact-process li:first-child { border-top: 1px solid var(--color-line); }
.compact-process li::before { content: counter(process, decimal-leading-zero); color: var(--color-primary-dark); font-family: var(--font-title); font-size: .78rem; font-variant-numeric: tabular-nums; }
.compact-process strong { color: var(--color-text-main); font-weight: 600; }
.confidence-figure { width: 100%; max-width: 330px; margin: 0 auto; }
.confidence-scale { position: relative; height: 150px; margin: 0 12px; }
.confidence-track { position: absolute; top: 78px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #aab3c2 0 50%, var(--color-primary) 50% 100%); }
.confidence-track::before, .confidence-track::after { position: absolute; top: 10px; color: var(--color-text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.confidence-track::before { content: '0'; left: 0; }
.confidence-track::after { content: '1'; right: 0; }
.confidence-threshold { position: absolute; top: 30px; bottom: 42px; left: 50%; border-left: 1px dashed var(--color-primary-dark); }
.confidence-threshold span { position: absolute; top: -2px; left: 7px; color: var(--color-primary-dark); font-size: .75rem; white-space: nowrap; }
.confidence-marker { position: absolute; top: 65px; left: var(--position); display: grid; justify-items: center; transform: translateX(-50%); color: var(--color-primary-dark); }
.confidence-marker::before { content: ''; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.confidence-marker strong { margin-top: -34px; font-family: var(--font-title); font-size: .9rem; }
.confidence-marker span { margin-top: 21px; font-size: .72rem; }
.confidence-marker--hidden { color: #6d7687; }
.confidence-marker--hidden::before { background: #aab3c2; box-shadow: 0 0 0 1px #8a94a4; }
.confidence-marker--high { transform: translateX(-72%); }
.confidence-figure figcaption { margin-top: 4px; color: var(--color-text-muted); font-size: .86rem; line-height: 1.4; text-align: center; }
.lesson-bridge { max-width: 640px; margin: -6px auto 20px; color: var(--color-text-muted); font-size: .92rem; line-height: 1.45; text-align: center; }
.print-detail { display: none; }

@media (max-width: 700px) {
  .section-copy { margin-bottom: 24px; }
  .section-copy h2 { font-size: clamp(1.8rem, 6.5vw, 2.35rem); }
  .lead { font-size: 1rem; }
  .question-layout { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
  .question-layout .figure-media { max-width: 190px; margin: 0 auto; }
  .lesson-image--medium { max-width: 360px; }
  .visual-pair { grid-template-columns: 1fr; max-width: 330px; gap: 10px; }
  .visual-pair img { max-height: 190px; }
  .visual-pair figcaption { margin-top: 4px; }
  .quiz-box legend { font-size: 1.06rem; margin-bottom: 12px; }
  .quiz-option { padding: 13px 6px; }
  .quiz-status { min-height: 0; }
  .iou-lab { grid-template-columns: 1fr; gap: 20px; width: min(430px, 100%); margin-top: 20px; }
  .iou-stage { padding: 0 20px; }
  .iou-stage svg { max-height: 230px; }
  .iou-controls { display: grid; grid-template-columns: 90px 1fr; column-gap: 22px; align-items: end; }
  .iou-score { grid-row: 1 / 4; align-self: start; }
  .iou-score strong { font-size: 3rem; }
  .iou-message { grid-column: 1 / -1; grid-row: 4; margin: 12px 0 0; text-align: center; }
  .iou-controls label, .iou-controls input, .range-ends { grid-column: 2; margin: 0; }
  .range-ends { font-size: .75rem; }
  .practice-path { margin-top: 38px; }
  .practice-path li { font-size: 1rem; margin-bottom: 18px; }
  .detection-example { margin-top: 34px; }
  .detection-example figcaption { margin-top: 22px; font-size: .875rem; }
  .outcome-flow { grid-template-columns: 1fr; margin-top: 20px; }
  .outcome-flow div { min-height: 0; padding: 18px 20px; }
  .question-layout--text { grid-template-columns: 1fr; }
  .evaluation-list { max-width: 360px; margin: 0 auto; }
  .code-sample { margin-top: 20px; padding: 18px; font-size: .78rem; }
  .evolution-line { grid-template-columns: 1fr; max-width: 360px; margin-top: 24px; border-top: 0; }
  .evolution-line li { min-height: 0; padding: 8px 0 18px 22px; border: 0; border-left: 1px solid var(--color-line); }
  .evolution-line li:last-child { border-right: 0; }
  .evolution-line li::before { top: 10px; }
  .evolution-line--4, .evolution-line--5, .evolution-line--7 { grid-template-columns: 1fr; }
  .evolution-line--7 li { padding: 8px 0 18px 22px; }
  .evolution-line--7 strong { font-size: 1rem; }
  .evolution-line--7 span { font-size: .9rem; }
  .evolution-line--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; border-top: 1px solid var(--color-line); }
  .evolution-line--7 li { min-height: 68px; padding: 17px 10px 9px; border-left: 1px solid var(--color-line); }
  .evolution-line--7 li:last-child { border-right: 1px solid var(--color-line); }
  .evolution-line--7 li::before { top: -5px; left: -5px; }
  .evolution-line--7 strong { margin-bottom: 5px; font-size: .88rem; }
  .evolution-line--7 span { font-size: .78rem; }
  .plain-columns, .plain-columns--3, .comparison-lanes, .comparison-lanes--two { grid-template-columns: 1fr; max-width: 390px; margin-top: 24px; }
  .plain-columns > div, .comparison-lanes > div { padding: 16px 20px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
  .plain-columns > div:last-child, .comparison-lanes > div:last-child { border-bottom: 0; }
  .architecture-walkthrough { align-items: center; }
  .compact-process { max-width: 390px; margin: 0 auto; }
  .confidence-figure { max-width: 300px; }
  .lesson-bridge { max-width: 340px; }
}

/* Refresco de septiembre de 2026: ritmo, correcciones animadas y separadores en movil. */
@keyframes feedback-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-status:not(:empty) { animation: none; }
}

@media (max-width: 700px) {
  .outcome-flow div + div { border-left: 0; border-top: 1px solid var(--color-line); }
}

/* Laboratorios guiados: una escena a la izquierda y una lectura de resultados a la derecha. */
/* El ancho debe ser definido: con margen automático la rejilla se ajusta al contenido y
   cambia de tamaño cada vez que cambia el texto del mensaje. */
.lab-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(210px, .75fr); gap: 56px; align-items: center; width: min(900px, 100%); margin: 28px auto 0; }
.lab-stage svg { display: block; width: 100%; max-height: 340px; overflow: visible; }
.lab-readout label { display: block; margin-bottom: 8px; font-size: .92rem; }
.lab-readout label b { color: var(--color-primary-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-readout input[type="range"] { display: block; width: 100%; min-height: 28px; margin: 0; accent-color: var(--color-primary-dark); cursor: ew-resize; }
/* Dos líneas reservadas: los mensajes ocupan una o dos y así la escena no se desplaza. */
.lab-message { min-height: 2.9em; margin: 10px 0 22px; color: var(--color-text-muted); font-size: .95rem; line-height: 1.45; }
[data-similarity-lab] .lab-message { min-height: 4.4em; }
.metric-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.metric { margin: 0; }
.metric span { display: block; color: var(--color-text-muted); font-size: .85rem; }
.metric strong { display: block; color: var(--color-primary-dark); font-family: var(--font-title); font-size: 3.1rem; letter-spacing: -.05em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--color-text-muted); font-size: .85rem; }
.tally strong { margin-left: 5px; font-family: var(--font-title); font-size: 1rem; font-variant-numeric: tabular-nums; }
.tally--tp strong { color: var(--color-primary-dark); }
.tally--fp strong { color: var(--color-error-text); }
.tally--fn strong { color: var(--color-accent-dark); }

/* Escena de detección: el objeto real va discontinuo y la predicción, continua. */
.truth { fill: none; stroke: #7b8598; stroke-width: 1; stroke-dasharray: 4 3; transition: stroke var(--duration-base) ease; }
.truth.is-missed { stroke: var(--color-error-text); stroke-width: 1.4; }
.stage-note { font-size: 4px; font-weight: 500; fill: #7b8598; }
.prediction rect { fill: var(--color-primary); fill-opacity: .08; stroke: var(--color-primary); stroke-width: 1.2; transition: opacity var(--duration-base) ease; }
.prediction text { font-size: 4.4px; font-weight: 500; fill: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.prediction.is-fp rect { fill: var(--color-error-text); fill-opacity: .07; stroke: var(--color-error-text); }
.prediction.is-fp text { fill: var(--color-error-text); }
.prediction.is-filtered rect { fill: none; stroke: #b3bbc9; stroke-width: .7; stroke-dasharray: 2 2.5; }
.prediction.is-filtered text { fill: #99a2b1; }

@media (max-width: 700px) {
  .lab-layout { grid-template-columns: 1fr; gap: 18px; width: min(430px, 100%); margin-top: 20px; }
  .lab-stage { padding: 10px 16px; }
  .lab-stage svg { max-height: 240px; }
  .metric strong { font-size: 2.4rem; }
  .lab-message { margin: 10px 0 16px; }
}

/* Escena de segmentación guiada: cada zona acepta un punto y la máscara responde al instante. */
.lab-layout--wide { grid-template-columns: minmax(0, 1.45fr) minmax(200px, .55fr); width: min(940px, 100%); }
.scene-prop { fill: #b6bfcd; }
.scene-dots { pointer-events: none; }
.region { stroke: #fff; stroke-width: .8; cursor: pointer; transition: fill var(--duration-base) ease, fill-opacity var(--duration-base) ease; }
.region[data-region="carretera"] { fill: #dde4ee; }
.region[data-region="arbol"] { fill: #b7d4c2; }
.region[data-region="carroceria"] { fill: #c6d0e0; }
.region[data-region="cabina"] { fill: #d6deea; }
.region[data-region="ruedas"] { fill: #8b95a7; }
.region:hover { fill-opacity: .72; }
.region.is-inside { fill: var(--color-brand-accent); fill-opacity: .6; stroke: var(--color-accent-dark); stroke-width: 1.8; }
.region.is-inside:hover { fill-opacity: .78; }
.prompt-dot circle { r: 7px; }
.prompt-dot text { font-size: 9px; font-weight: 700; text-anchor: middle; fill: #fff; }
.prompt-dot.is-empty circle { fill: #fff; fill-opacity: .82; stroke: #97a1b1; stroke-width: 1; }
.prompt-dot.is-empty text { display: none; }
.prompt-dot.is-positive circle { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.4; }
.prompt-dot.is-negative circle { fill: var(--color-error-text); stroke: #fff; stroke-width: 1.4; }
.prompt-modes { display: inline-flex; margin-bottom: 18px; padding: 3px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: #fff; }
.prompt-modes button { min-height: 38px; padding: 6px 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: .88rem; font-weight: 500; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
.prompt-modes button:hover { color: var(--color-text-main); }
.prompt-modes button[aria-pressed="true"] { background: var(--color-primary-dark); color: #fff; }

@media (max-width: 700px) {
  .lab-layout--wide { grid-template-columns: 1fr; }
  .prompt-modes { margin-bottom: 12px; }
}

/* Espacio de embeddings esquemático y ranking de candidatos por similitud coseno. */
.lab-note { margin: 10px 0 0; color: var(--color-text-muted); font-size: .78rem; line-height: 1.4; text-align: center; }
.space-arc { fill: none; stroke: var(--color-line-strong); stroke-width: .8; stroke-dasharray: 3 3; }
.space-origin { fill: var(--color-text-main); }
.space-note { font-size: 4.6px; fill: var(--color-text-muted); }
.anchor line { stroke: #97a1b1; stroke-width: 1; }
.anchor text { font-size: 5.2px; font-weight: 500; fill: var(--color-text-muted); }
.anchor.is-winner line { stroke: var(--color-primary); stroke-width: 1.6; }
.anchor.is-winner text { fill: var(--color-primary-dark); font-weight: 700; }
.anchor circle { fill: #97a1b1; }
.anchor.is-winner circle { fill: var(--color-primary); }
.anchor.is-closest line { stroke: var(--color-warning-text); stroke-dasharray: 2 1.6; }
.anchor.is-closest circle { fill: var(--color-warning-text); }
.space-groups line { stroke: #c3cbd8; stroke-width: .7; stroke-dasharray: 1.6 1.6; }
.candidate.is-closest .candidate-value { color: var(--color-warning-text); }
.image-vector { stroke: var(--color-accent-dark); stroke-width: 2.4; stroke-linecap: round; }
.candidate-list { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; color: var(--color-text-muted); font-size: .88rem; }
.candidate-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-value { font-variant-numeric: tabular-nums; }
.candidate-track { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: var(--color-line); }
.candidate-bar { display: block; width: calc(var(--bar-share, 0) * 100%); height: 100%; border-radius: var(--radius-pill); background: #aeb7c6; transition: width var(--duration-base) var(--ease-out); }
.candidate.is-winner { color: var(--color-text-main); font-weight: 500; }
.candidate.is-winner .candidate-value { color: var(--color-primary-dark); }
.candidate.is-winner .candidate-bar { background: linear-gradient(90deg, var(--color-brand-accent), var(--color-primary)); }

@media (prefers-reduced-motion: reduce) {
  .candidate-bar { transition: none; }
}

/* Diapositivas fieles al PDF: prosa legible, bloques con acento y pasos numerados. */
.slide-prose { max-width: 760px; margin: 0 auto; text-align: left; }
.slide-prose > * { margin: 0 0 16px; }
.slide-prose > :last-child { margin-bottom: 0; }
.slide-prose p, .slide-prose li { color: var(--color-ink-soft); font-size: 1.02rem; line-height: 1.68; }
.slide-prose strong { color: var(--color-text-main); font-weight: 600; }
.slide-prose ul, .slide-prose ol { padding-left: 22px; }
.slide-prose li { margin-bottom: 8px; }
.slide-prose li:last-child { margin-bottom: 0; }
.slide-lead { max-width: 820px; margin: 0 auto 30px; color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.6; text-align: center; }
.slide-subtitle { max-width: 760px; margin: 34px auto 14px; color: var(--color-hero-bg); font-family: var(--font-title); font-size: 1.3rem; letter-spacing: -.02em; text-align: left; }
.slide-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 52px; align-items: center; max-width: 1000px; margin: 0 auto; }
/* Un margen automatico convertiria al hijo en ancho de contenido y se saldria de su columna. */
.slide-split > .slide-prose, .slide-split > .note-grid, .slide-split > .stage-list { max-width: none; margin: 0; }
.slide-split .figure-media img { border: 1px solid var(--color-line); border-radius: var(--radius-media); background: #fff; box-shadow: var(--shadow-media); }
.slide-split figcaption { margin-top: 14px; color: var(--color-text-muted); font-size: .88rem; text-align: center; }
.slide-split--media-first > .figure-media { order: -1; }

.note-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 26px 32px; max-width: 980px; margin: 0 auto; text-align: left; }
.note-grid--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; }
.note-grid > * { padding-left: 18px; border-left: 2px solid var(--color-primary); }
.note-grid h3 { margin: 0 0 8px; color: var(--color-text-main); font-size: 1.04rem; line-height: 1.3; }
.note-grid p { margin: 0 0 8px; color: var(--color-text-muted); font-size: .96rem; line-height: 1.55; }
.note-grid p:last-child { margin-bottom: 0; }
.note-grid ul { margin: 0; padding-left: 18px; color: var(--color-text-muted); font-size: .96rem; line-height: 1.55; }
.note-grid li + li { margin-top: 5px; }
.note-grid figure { margin: 0 0 12px; }
.note-grid figure img { display: block; width: 100%; border: 1px solid var(--color-line); border-radius: 10px; }

.stage-list { display: grid; gap: 22px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; counter-reset: stage; text-align: left; }
.stage-list--columns { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 32px; max-width: 980px; }
.stage-list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; max-width: 1040px; }
.slide-split .stage-list--columns, .slide-split .stage-list--four { grid-template-columns: 1fr; }
.stage-list > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 16px; counter-increment: stage; }
.stage-list > li::before { content: counter(stage, decimal-leading-zero); grid-row: 1 / -1; align-self: start; padding-top: 2px; color: var(--color-primary); font-family: var(--font-title); font-size: .92rem; font-variant-numeric: tabular-nums; }
.stage-list > li > h3, .stage-list > li > p, .stage-list > li > ul { grid-column: 2; }
.stage-list ul { margin: 6px 0 0; padding-left: 18px; color: var(--color-text-muted); font-size: .96rem; line-height: 1.55; }
.stage-list ul li + li { margin-top: 4px; }
.stage-list h3 { margin: 0; color: var(--color-text-main); font-size: 1.04rem; line-height: 1.3; }
.stage-list p { margin: 6px 0 0; color: var(--color-text-muted); font-size: .96rem; line-height: 1.55; }

.formula { margin: 18px 0; color: var(--color-text-main); font-size: 1.1rem; text-align: center; }
.frac { display: inline-grid; margin: 0 4px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.frac > span { padding: 2px 8px; text-align: center; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; }

@media (max-width: 860px) {
  .slide-split { grid-template-columns: 1fr; gap: 24px; }
  .slide-split--media-first > .figure-media { order: 0; }
}

@media (max-width: 700px) {
  .slide-prose { max-width: 100%; }
  .slide-prose p, .slide-prose li { font-size: .97rem; line-height: 1.6; }
  .slide-lead { margin-bottom: 22px; font-size: .97rem; }
  .slide-subtitle { margin-top: 26px; font-size: 1.15rem; }
  .note-grid, .note-grid--two { grid-template-columns: 1fr; gap: 20px; }
  .stage-list, .stage-list--columns { grid-template-columns: 1fr; gap: 18px; }
  .formula { font-size: 1rem; }
}

/* Aviso destacado de una diapositiva y estados de los bloques de licencia. */
.slide-callout { max-width: 820px; margin: 26px auto 0; padding: 16px 20px; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-media) var(--radius-media) 0; background: var(--color-wash); color: var(--color-ink-soft); font-size: .98rem; line-height: 1.6; text-align: left; }
.slide-callout strong { color: var(--color-text-main); font-weight: 600; }
.note-grid > .is-ok { border-left-color: #1a7f4b; }
.note-grid > .is-warn { border-left-color: #a2650a; }
.note-grid > .is-stop { border-left-color: var(--color-error-text); }
.note-grid > .is-ok h3 { color: #12603a; }
.note-grid > .is-warn h3 { color: #7d4e06; }
.note-grid > .is-stop h3 { color: var(--color-error-text); }

/* Comprobador de licencia: dos elecciones y un veredicto inmediato. */
.lab-readout--controls { display: grid; gap: 20px; align-content: center; }
.field { margin: 0; }
.field label { display: block; margin-bottom: 7px; color: var(--color-text-muted); font-size: .88rem; }
.field select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: #fff; color: var(--color-text-main); font-size: .95rem; cursor: pointer; }
.field select:hover { border-color: var(--color-primary); }
.verdict { margin: 0 0 12px; font-family: var(--font-title); font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.2; }
.verdict.is-permitido { color: #12603a; }
.verdict.is-condiciones { color: #7d4e06; }
.verdict.is-prohibido { color: var(--color-error-text); }
.lab-disclaimer { margin: 18px 0 0; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; text-align: left; }
.lab-layout--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; width: min(860px, 100%); }
.lab-layout--even .lab-readout--controls { align-content: start; }

@media (max-width: 700px) {
  .slide-callout { margin-top: 20px; padding: 14px 16px; font-size: .94rem; }
  .lab-readout--controls { gap: 14px; }
  .verdict { font-size: 1.45rem; }
}

@media (max-width: 1000px) {
  .stage-list--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stage-list--four { grid-template-columns: 1fr; }
}

/* Banco de normalidad: nube de parches conocidos y un parche de test que se aleja. */
.anomaly-link { stroke: var(--color-accent-dark); stroke-width: 1; stroke-dasharray: 3 2.5; }
.normal-patch { fill: #aeb7c6; transition: fill var(--duration-fast) ease; }
.normal-patch.is-nearest { fill: var(--color-accent-dark); }
.anomaly-patch { stroke: #fff; stroke-width: 1.4; }
.anomaly-patch.is-normal { fill: var(--color-primary); }
.anomaly-patch.is-anomaly { fill: var(--color-error-text); }

/* Esqueleto del laboratorio de OKS: punto real frente a punto predicho. */
.skeleton circle, .skeleton line { fill: none; stroke: #b3bbc9; stroke-width: 2; stroke-linecap: round; }
.joint-truth circle { fill: none; stroke: #7b8598; stroke-width: 1.4; }
.joint-predicted circle { fill: var(--color-primary); stroke: #fff; stroke-width: 1.2; transition: transform var(--duration-base) var(--ease-out); }
.candidate-name small { margin-left: 6px; color: var(--color-text-muted); font-size: .78em; }
.metric-pair:has(.metric:only-child) { grid-template-columns: minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .joint-predicted circle { transition: none; }
}

/* Comparador de dos imágenes alineadas: una cortina que se desplaza sobre la otra. */
.compare-media { max-width: 620px; margin: 0 auto; }
.compare-stage { position: relative; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-media); box-shadow: var(--shadow-media); cursor: ew-resize; touch-action: none; }
.compare-stage img { display: block; width: 100%; height: auto; }
.compare-overlay { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--compare-x, 50%)) 0 0); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--compare-x, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 32, 58, .25); transform: translateX(-1px); }
.compare-line::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: rgba(23, 32, 58, .35); transform: translate(-50%, -50%); }
.compare-tag { position: absolute; bottom: 10px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(16, 16, 77, .72); color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .02em; }
.compare-tag--before { right: 10px; }
.compare-tag--after { left: 10px; }
.compare-controls { margin-top: 14px; }
.compare-controls label { display: block; margin-bottom: 7px; color: var(--color-text-muted); font-size: .88rem; text-align: center; }
.compare-controls input[type="range"] { display: block; width: 100%; min-height: 28px; margin: 0; accent-color: var(--color-primary-dark); cursor: ew-resize; }
.compare-media figcaption { margin-top: 14px; color: var(--color-text-muted); font-size: .88rem; text-align: center; }

/* Supresión de no-máximos: cajas candidatas que sobreviven o desaparecen según el umbral. */
.nms-scene { fill: #dde4ee; }
.nms-car { fill: #c6d0e0; }
.nms-wheel { fill: #8b95a7; }
.candidate-box rect { fill: none; stroke-width: 1.2; transition: opacity var(--duration-base) ease; }
.candidate-box text { font-size: 4.2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.candidate-box.is-kept rect { stroke: var(--color-primary); stroke-width: 1.6; }
.candidate-box.is-kept text { fill: var(--color-primary-dark); }
.candidate-box.is-suppressed rect { stroke: #aab3c2; stroke-dasharray: 2 2.5; opacity: .55; }
.candidate-box.is-suppressed text { fill: #99a2b1; }

@media (max-width: 700px) {
  .compare-media { max-width: 100%; }
  .compare-tag { bottom: 8px; padding: 3px 8px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .candidate-box rect { transition: none; }
}

/* Cuadrícula de YOLO: celdas responsables y colisiones entre centros. */
.grid-scene { fill: var(--color-wash); }
.grid-lines line { stroke: #b3bbc9; stroke-width: .5; }
.grid-cell { fill: var(--color-primary); fill-opacity: .16; }
.grid-cell.is-shared { fill: var(--color-error-text); fill-opacity: .22; }
.grid-objects circle { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.2; }

/* Segmentación sobre foto real: capas de máscara precalculadas que se encienden por indicación. */
.mask-stage { position: relative; margin: 0; }
.mask-stage > img { display: block; width: 100%; height: auto; }
.mask-stage > img:first-child { border: 1px solid var(--color-line); border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.mask-layer { position: absolute; top: 0; left: 0; border-radius: var(--radius-media); opacity: 0; transition: opacity var(--duration-base) ease; }
.mask-layer.is-visible { opacity: 1; }
.mask-stage figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; text-align: center; }
.field-label { margin: 0 0 10px; color: var(--color-text-muted); font-size: .88rem; }
.mask-prompts { display: grid; gap: 8px; }
.mask-prompts button { padding: 10px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: #fff; color: var(--color-text-main); cursor: pointer; font-size: .9rem; line-height: 1.35; text-align: left; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.mask-prompts button:hover { border-color: var(--color-primary); }
.mask-prompts button[aria-pressed="true"] { border-color: var(--color-primary-dark); background: var(--color-primary-soft); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .mask-layer { transition: none; }
}

/* Verificacion geometrica: dos vistas y las parejas que encajan o no con la escena. */
.match-frame path { fill: var(--color-wash); stroke: #b3bbc9; stroke-width: .8; }
.match-lines line { stroke: #aab3c2; stroke-width: .6; transition: stroke var(--duration-fast) ease, opacity var(--duration-fast) ease; }
.match-lines circle { fill: #8b95a7; transition: fill var(--duration-fast) ease; }
.match.is-inlier line { stroke: var(--color-primary); stroke-width: .9; }
.match.is-inlier circle { fill: var(--color-primary-dark); }
.match.is-outlier line { stroke: var(--color-error-text); stroke-dasharray: 2 2; opacity: .6; }
.match.is-outlier circle { fill: var(--color-error-text); }

@media (prefers-reduced-motion: reduce) {
  .match-lines line, .match-lines circle { transition: none; }
}

/* Conmutador de modos con un bloque de codigo por salida. */
.mode-lab { display: grid; gap: 16px; width: min(760px, 100%); margin: 0 auto; text-align: left; }
.mode-lab .mask-prompts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mode-lab .mask-prompts button { text-align: center; }
.mode-lab .code-sample { margin: 0; }
.mode-lab .lab-message { min-height: 3.4em; margin: 0; }

@media (max-width: 700px) {
  .mode-lab .mask-prompts { grid-auto-flow: row; }
}

/* Laboratorio de OCR: cajas sobre la foto y tres formatos de salida. */
.ocr-stage { margin: 0; }
.ocr-frame { position: relative; line-height: 0; }
.ocr-stage img { display: block; width: 100%; height: auto; border: 1px solid var(--color-line); border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.ocr-boxes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--duration-base) ease; }
.ocr-boxes.is-visible { opacity: 1; }
.ocr-boxes rect { fill: rgba(0, 208, 255, .16); stroke: #00d0ff; stroke-width: 1.6; }
.ocr-stage figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; text-align: center; }
.lab-readout .code-sample { margin: 16px 0 0; font-size: .82rem; white-space: pre; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .ocr-boxes { transition: none; }
}

/* Inspeccion por parches: mapa de anomalia sobre la foto y umbral de rechazo. */
.anomaly-stage { margin: 0; }
.anomaly-frame { position: relative; line-height: 0; }
.anomaly-stage img { display: block; width: 100%; height: auto; border: 1px solid var(--color-line); border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.anomaly-grid { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-media); }
.anomaly-stage figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; text-align: center; }
.anomaly-grid rect { fill: var(--color-error-text); fill-opacity: calc(var(--heat, 0) * .45); stroke: none; transition: fill-opacity var(--duration-fast) ease; }
.anomaly-grid rect.is-flagged { stroke: #fff; stroke-width: .06; fill-opacity: calc(.35 + var(--heat, 0) * .4); }

/* Pantallas prácticas: receta copiable, checklist, calculadoras, asistente y tabla. */
.code-sample[data-copy] { position: relative; padding-top: 44px; }
.copy-button { position: absolute; top: 10px; right: 12px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: #fff; color: var(--color-primary-dark); cursor: pointer; font-family: var(--font-body); font-size: .78rem; font-weight: 500; }
.copy-button:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }

.checklist { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; text-align: left; counter-reset: check; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--color-line); }
.checklist li:first-child { border-top: 1px solid var(--color-line); }
.checklist li::before { content: ''; width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--color-line-strong); border-radius: 4px; }
.checklist strong { color: var(--color-text-main); font-size: 1rem; }
.checklist span { grid-column: 2; color: var(--color-text-muted); font-size: .94rem; line-height: 1.5; }

.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; width: min(880px, 100%); margin: 0 auto; text-align: left; }
.calc-controls { display: grid; gap: 22px; }
.calc-controls label { display: block; margin-bottom: 8px; color: var(--color-text-muted); font-size: .9rem; }
.calc-controls label b { color: var(--color-primary-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-controls input[type="range"] { display: block; width: 100%; min-height: 28px; margin: 0; accent-color: var(--color-primary-dark); cursor: ew-resize; }
.calc-controls select { width: 100%; max-width: 280px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: #fff; color: var(--color-text-main); font-size: .93rem; cursor: pointer; }
.calc-controls select:hover { border-color: var(--color-primary); }
.calc-controls p { margin: 0; }
.calc-results { display: grid; gap: 18px; }
.calc-figure { margin: 0; }
.calc-figure span { display: block; color: var(--color-text-muted); font-size: .85rem; }
.calc-figure strong { color: var(--color-primary-dark); font-family: var(--font-title); font-size: 2.4rem; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.calc-figure em { font-style: normal; font-size: 1rem; color: var(--color-text-muted); }
.calc-note { margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.5; }
.calc-disclaimer { margin: 6px 0 0; color: var(--color-text-muted); font-size: .78rem; line-height: 1.45; }
.device-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.device-list li { padding: 5px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-text-main); font-size: .82rem; }
.device-list li.is-out { border-style: dashed; color: #9aa3b2; text-decoration: line-through; }

.chooser { width: min(900px, 100%); margin: 0 auto; text-align: left; }
.chooser-questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 36px; }
.chooser-questions fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.chooser-questions legend { padding: 0; margin-bottom: 10px; color: var(--color-text-main); font-size: .98rem; font-weight: 500; }
.chooser-questions label { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--color-text-muted); cursor: pointer; font-size: .94rem; }
.chooser-questions input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary-dark); }
.chooser-result { margin-top: 28px; padding: 18px 22px; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-media) var(--radius-media) 0; background: var(--color-wash); }
.chooser-result h3 { margin: 0 0 8px; color: var(--color-primary-dark); font-size: 1.12rem; }
.chooser-result p { margin: 0 0 8px; color: var(--color-ink-soft); font-size: .98rem; line-height: 1.55; }
.chooser-result p:last-child { margin-bottom: 0; }
.chooser-result code { font-family: var(--font-mono); font-size: .9em; }
.chooser-status { margin: 22px 0 0; color: var(--color-text-muted); font-size: .9rem; }

.model-table { width: min(920px, 100%); margin: 0 auto; text-align: left; }
.model-filters { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: end; margin-bottom: 20px; }
.model-filters label { display: block; margin-bottom: 6px; color: var(--color-text-muted); font-size: .85rem; }
.model-filters select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: #fff; color: var(--color-text-main); font-size: .92rem; cursor: pointer; }
.model-rows { display: grid; gap: 0; }
.model-rows > div { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.model-rows > div:first-of-type { border-top: 1px solid var(--color-line); }
/* display: grid en la fila gana al display: none del atributo hidden. */
.model-rows > div[hidden] { display: none; }
.model-rows code { color: var(--color-text-main); font-family: var(--font-mono); font-size: .88rem; }
.model-rows span { color: var(--color-text-muted); font-size: .88rem; }
.model-rows .model-license { color: var(--color-primary-dark); font-weight: 500; }

/* Selector de escena sobre un comparador: cambia el par de imágenes sin tocar la cortina. */
.scene-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.scene-picker button { padding: 8px 16px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: #fff; color: var(--color-text-main); cursor: pointer; font-family: var(--font-body); font-size: .88rem; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.scene-picker button:hover { border-color: var(--color-primary); }
.scene-picker button[aria-pressed="true"] { border-color: var(--color-primary-dark); background: var(--color-primary-soft); font-weight: 500; }
.scene-note { margin: 14px 0 0; color: var(--color-text-muted); font-size: .88rem; line-height: 1.5; text-align: center; min-height: 3em; }

/* Constructor de pipeline: la tarea y el dispositivo componen el código que se copia. */
.pipeline-lab { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: start; width: min(920px, 100%); margin: 0 auto; text-align: left; }
.pipeline-groups { display: grid; gap: 22px; min-width: 0; }
.pipeline-groups fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pipeline-groups legend { padding: 0; margin-bottom: 10px; color: var(--color-text-main); font-size: .98rem; font-weight: 500; }
.pipeline-options { display: grid; gap: 8px; }
.pipeline-options--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipeline-options button { padding: 10px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: #fff; color: var(--color-text-main); cursor: pointer; font-family: var(--font-body); font-size: .9rem; line-height: 1.35; text-align: left; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.pipeline-options button:hover { border-color: var(--color-primary); }
.pipeline-options button[aria-pressed="true"] { border-color: var(--color-primary-dark); background: var(--color-primary-soft); font-weight: 500; }
.pipeline-options--row button { text-align: center; }
.pipeline-output { display: grid; gap: 14px; min-width: 0; }
.pipeline-output .code-sample { margin: 0; }
.pipeline-note { margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.55; min-height: 4.4em; }

@media (max-width: 860px) {
  .pipeline-lab { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pipeline-note { min-height: 0; }
}

@media (max-width: 860px) {
  .calc-layout { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 700px) {
  .checklist li { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 11px 0; }
  .calc-figure strong { font-size: 2rem; }
  .chooser-questions { grid-template-columns: 1fr; gap: 18px; }
  .chooser-result { margin-top: 20px; padding: 14px 16px; }
  .model-rows > div { grid-template-columns: 1fr auto; }
  .model-filters { gap: 14px 18px; }
}