.lab-nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1rem 0}.lab-nav a{color:var(--primary-color);font-weight:bold}.lab{max-width:1050px;margin:auto;padding:1.5rem}.lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.lab-card{background:white;border:1px solid #ccd8cc;border-radius:12px;padding:1.2rem;margin-bottom:1rem;color:#203520}.lab label{display:block;margin:.7rem 0}.lab input:not([type=checkbox]),.lab select,.lab textarea,.heuristic-menu select{box-sizing:border-box;width:100%;padding:.6rem;border:1px solid #a7b7a7;border-radius:6px}.lab button,.heuristic-menu button{cursor:pointer;padding:.65rem 1rem;background:#006d00;color:white;border:0;border-radius:6px;margin:.3rem}.lab textarea{min-height:200px;font-family:monospace}.feature-row{display:grid;grid-template-columns:1fr 125px;gap:1rem;align-items:center;border-bottom:1px solid #eef2ee;padding:.6rem 0}.feature-row small{display:block;color:#506450}.feature-row input[type=number]{width:85px}.lab-feedback{padding:.8rem;white-space:pre-wrap}.lab-feedback[data-error=true]{color:#8c1818;background:#fff0ed}.lab-feedback[data-error=false]{color:#155215;background:#edf7ed}.score-row{display:grid;grid-template-columns:minmax(130px,1fr) 1fr 65px;gap:.6rem;align-items:center;margin:.7rem 0}.score-track{height:12px;background:#e3e9e3;border-radius:6px;overflow:hidden}.score-fill{height:100%;background:#238b45;transition:width .4s}.score-fill.negative{background:#365fc1}.wizard{display:inline-block;font-size:2rem;animation:wizardThink 2s ease-in-out infinite}.thinking{border-left:4px solid #006d00;padding:.6rem 1rem;background:#f0f7ed}.heuristic-menu{padding:.8rem;background:#eef5ee;border-radius:8px;margin:1rem 0}.heuristic-menu label{display:block;margin-bottom:.4rem}.heuristic-menu a{color:#006d00;font-weight:bold}.heuristic-comment{font-size:.95rem;padding:.6rem;background:#f0f7ed;color:#203520;white-space:pre-wrap}.saved-item{border-bottom:1px solid #ddd;padding:.8rem 0;overflow-wrap:anywhere}.phase-tag{font-size:.8rem;color:#526752}.lab-footer{text-align:center;padding:2rem;background:#eef5ee}.lab summary{cursor:pointer;font-weight:bold}.lab a{color:#006d00}@keyframes wizardThink{50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.wizard{animation:none}.score-fill{transition:none}}

.position-analysis { margin: 1rem 0; text-align: left; background: #f8faf8; border-radius: 12px; padding: 1rem; color: #172c20; }
.position-analysis details { margin: .6rem 0; }
.position-analysis summary { cursor: pointer; font-weight: 700; }
.position-analysis input { width: 100%; box-sizing: border-box; font-family: monospace; margin: .6rem 0; }
.position-analysis code { display: block; overflow-wrap: anywhere; font-size: .8rem; margin: .5rem 0; }
.candidate-scroll { overflow-x: auto; max-height: 300px; margin: .6rem 0; }
.candidate-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.candidate-table td, .candidate-table th { padding: .45rem; border-bottom: 1px solid #ccd8ce; text-align: left; }
.chosen-candidate { background: #d9eedb; font-weight: bold; }

.position-analysis select { width: 100%; padding: .65rem; margin: .5rem 0; border: 1px solid #a7b7a7; border-radius: 6px; }
.position-analysis pre { overflow: auto; max-height: 180px; font-size: .8rem; }
.contribution-item { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: .4rem; padding: .65rem 0; border-bottom: 1px solid #d8e3d9; font-size: .85rem; }
.contribution-item span { grid-column: 1 / -1; }
.contribution-track { height: 12px; background: #e3e9e3; border-radius: 6px; overflow: hidden; }
.contribution-track div { height: 100%; }
.contribution-track .positive { background: #238b45; }
.contribution-track .negative { background: #365fc1; }
.verification-status { background: #e6f2e4; border-left: 3px solid #006d00; padding: .7rem; }
.position-analysis button:disabled { opacity: .55; cursor: wait; }

/* Laboratorio 2.3: editor sencillo y reporte lateral. */
.designer-page { background: #edf1f2; }
.designer-header { background: linear-gradient(to right,#0f2027,#203a43,#2c5364); color: #fff; }
.designer-header .lab { max-width: 1280px; padding: 2rem 1.5rem; }
.designer-header .brand { color: white; font-size: 1.5rem; font-weight: bold; text-decoration: none; }
.designer-header .lab-nav a { color: #dbe8e4; text-decoration: none; }
.designer-header h1 { font-size: clamp(1.8rem,3vw,2.6rem); margin: .6rem 0; }
.eyebrow, .step-label { font-size: .75rem; letter-spacing: .1em; font-weight: bold; }
.eyebrow { color: #a6d7b2; }
.designer-layout { max-width: 1280px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,1fr); gap: 1.5rem; align-items: start; }
.designer-editor, .designer-preview { min-width: 0; }
.designer-page .lab-card { padding: 1.5rem; text-align: left; box-shadow: 0 3px 15px #203a4308; border-color: #d6e0dc; }
.designer-page h2 { font-size: 1.4rem; margin: .5rem 0 1rem; }
.designer-page .step-label { color: #54705b; }
.designer-page .identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.designer-page .identity-grid label:first-child { grid-column: 1 / -1; }
.designer-page small { line-height: 1.5; color: #516452; }
.preset-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.designer-page .preset-buttons button { min-width: 55px; padding: .8rem; margin: 0; background: #edf5ef; color: #006d00; border: 1px solid #b8cdbc; }
.designer-page .preset-buttons button:hover { background: #006d00; color: white; }
.advanced-criteria { margin-top: 1rem; border-top: 1px solid #d6e0dc; padding-top: 1rem; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.designer-page .style-control { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .8rem; background: #f4f7f5; border-radius: 8px; margin: 0; }
.designer-page .style-control input { grid-column: 1 / -1; }
.designer-page input[type=range] { accent-color: #006d00; padding: 0; cursor: pointer; width: 100%; }
.style-control output, #eloValue { color: #006d00; font-weight: bold; }
.rating-card { background: #eaf2ec; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.rating-card label { display: flex; justify-content: space-between; }
.rating-card p, .design-note { font-size: .85rem; line-height: 1.5; color: #506450; }
.designer-preview { position: sticky; top: 1rem; }
.designer-page .report-card { border-top: 4px solid #006d00; }
.designer-page .save-player { width: 100%; margin: 1rem 0 0; padding: 1rem; }
.designer-page .report-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.designer-page .report-actions button { font-size: .85rem; margin: 0; }
.file-zone { padding: 1rem; border: 1px dashed #9bb7a2; border-radius: 8px; background: #f4f7f5; }
.saved-wide { grid-column: 1 / -1; }
.designer-page pre { max-height: 280px; overflow: auto; font-size: .8rem; background: #f0f4f1; padding: 1rem; }
.designer-page :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #b58a23; outline-offset: 3px; }
@media(max-width:900px) { .designer-layout { grid-template-columns: minmax(0,1fr); } .designer-preview { position: static; } }
@media(max-width:480px) { .style-grid, .designer-page .identity-grid { grid-template-columns: 1fr; } .designer-layout { padding: 1rem; } .designer-page .lab-card { padding: 1rem; } }

/* Recorrido del laboratorio: secciones amplias, sin panel flotante. */
.designer-page .designer-layout { display: block; max-width: 1180px; }
.designer-page .designer-preview { position: static; }
.designer-page .designer-editor > .lab-card, .designer-page .designer-preview > .lab-card { margin-bottom: 1.5rem; }
.designer-page .feature-row { grid-template-columns: minmax(0,1fr) 110px; }
.designer-page .feature-row code { font-size: .8rem; color: #62736a; }
.designer-page .style-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.designer-page #editableClass { min-height: 300px; }
.designer-page .report-card { padding: 2rem; }
.designer-page .lab-card { scroll-margin-top: 1.5rem; }
.learning-page { max-width: 1180px; }
.learning-section { text-align: left; padding: 2rem 0; border-bottom: 1px solid #d6e0dc; line-height: 1.7; }
.learning-section h2 { font-size: 1.6rem; }
.learning-section a { color: #006d00; font-weight: bold; }
.learning-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.learning-cards article { background: white; padding: 1.25rem; border: 1px solid #d6e0dc; border-radius: 10px; }
@media(max-width:700px) { .designer-page .style-grid, .learning-cards { grid-template-columns: minmax(0,1fr); } .designer-page .report-card { padding: 1rem; } }
.wizard-tabs { display: flex; gap: .6rem; flex-wrap: wrap; padding: 1rem 0; }
.designer-page .wizard-tabs button { background: #e3ebe6; color: #203520; border: 1px solid #a9bcb0; margin: 0; }
.designer-page .wizard-tabs .active { background: #006d00; color: white; }
.wizard-summary { background: #e3eee5; border-left: 4px solid #006d00; padding: 1rem; line-height: 1.6; }
.wizard-footer { display: flex; justify-content: space-between; margin: 1rem 0 2rem; }
.wizard-panel[hidden] { display: none !important; }
.advanced-code > section { margin-top: 1rem; }
.game-page .hero > .position-analysis { width: 92%; max-width: 1280px; margin: 1.5rem auto; box-sizing: border-box; }
.game-page .hero .chart-section { display: block; max-width: 1280px; text-align: left; }
.chart-section h2 { color: white; }
.decision-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.decision-chart { background: #f8faf8; color: #203520; border-radius: 12px; padding: 1.2rem; min-width: 0; }
.decision-chart p { font-size: .85rem; line-height: 1.5; }
.decision-chart svg { width: 100%; height: auto; display: block; }
.game-page.is-playing .hero-board { background: rgba(255,255,255,.05); border-radius: 14px; padding: 1rem 0; }
@media(min-width:801px) { .game-page.is-playing .hero .hero-layout { max-width: 1440px; grid-template-columns: minmax(0,1.6fr) minmax(320px,1fr); } .game-page.is-playing .board-container { width: calc(100% - 40px); max-width: 70vh; } }
@media(max-width:700px) { .decision-charts { grid-template-columns: minmax(0,1fr); } }

.game-page.is-playing .board-container { width: min(var(--playing-board-width, 70vh), calc(100% - 40px)); }

.designer-page .lab-feedback:empty { display: none; }