body { font-family: 'Segoe UI', -apple-system, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; color: #2c3e50; }
header { background: #ffffff; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 25px; text-align: center; border-bottom: 3px solid #34495e; }
h1, h2, h3, h4 { margin: 0 0 10px 0; font-weight: 600; }
h1 { font-size: 1.6rem; color: #2c3e50; }

/* STEPPER DEL PIPELINE */
.pipeline-stepper { display: flex; justify-content: space-between; background: #f1f2f6; border-radius: 30px; padding: 6px; margin-top: 15px; overflow-x: auto; }
.step { flex: 1; text-align: center; padding: 8px 12px; font-size: 0.85rem; font-weight: bold; color: #7f8c8d; border-radius: 20px; transition: all 0.3s ease; white-space: nowrap; }
.step.active { background: #2980b9; color: #ffffff; box-shadow: 0 2px 6px rgba(41,128,185,0.3); }
.step.completed { background: #27ae60; color: #ffffff; }

.container { max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* BLOQUES DE CONSOLA TÉCNICA */
.block { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; transition: opacity 0.3s ease; }
.block-header { background: #34495e; color: #ffffff; padding: 10px 20px; }
.block-header h2 { font-size: 1.1rem; margin: 0; letter-spacing: 0.5px; }

/* DISEÑO DE 3 COLUMNAS DEL PIPELINE */
.pipeline-layout { display: grid; grid-template-columns: 320px 1fr 300px; gap: 20px; padding: 20px; }
.zone { padding: 15px; background: #ffffff; border: 1px solid #edf2f7; border-radius: 4px; }
.control-zone { border-left: 4px solid #2980b9; }
.monitor-zone { border-left: 4px solid #f1c40f; background: #fafafa; }
.theory-zone { border-left: 4px solid #7f8c8d; background: #fdfefe; }

/* BLOQUE BLOQUEADO (GUIADO DE SIMULACIÓN) */
.id-bloque-bloqueado { opacity: 0.35; pointer-events: none; user-select: none; }

/* FLUJOS DE DATOS (DATA STREAM) */
.stream-box { background: #2c3e50; color: #2ecc71; font-family: 'Courier New', monospace; padding: 12px; border-radius: 4px; font-size: 0.9rem; min-height: 40px; word-break: break-all; margin-top: 5px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 0.85rem; }
.config-row input, .config-row select { padding: 4px 8px; border: 1px solid #cbd5e0; border-radius: 3px; font-size: 0.85rem; }

/* TABLAS Y CELDAS */
.scroll-container { overflow-x: auto; background: #ffffff; border: 1px solid #e2e8f0; padding: 8px; border-radius: 4px; }
.cell { width: 50px; text-align: center; padding: 4px; border: 1px solid #cbd5e0; font-family: monospace; font-size: 0.85rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th, .data-table td { border: 1px solid #e2e8f0; padding: 6px; text-align: left; }
.data-table th { background: #f4f6f7; color: #34495e; font-weight: bold; }

/* INTERFAZ DE MÉTRICAS */
.metric-item { display: flex; justify-content: space-between; padding: 6px; border-left: 3px solid #7f8c8d; background: #f4f6f7; margin-bottom: 5px; font-size: 0.85rem; border-radius: 0 4px 4px 0; }
.metric-val { font-weight: bold; color: #2c3e50; }

/* BOTONES */
.btn { padding: 6px 12px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.85rem; transition: background 0.2s; }
.btn-primary { background: #34495e; color: white; }
.btn-accent { background: #27ae60; color: white; }
.btn-teoria-pdf { margin-top: 10px; width: 100%; padding: 8px; background: #34495e; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.8rem; }

/* ARQ RETORNO FEEDBACK */
.linea-retorno { padding: 8px; font-family: monospace; font-size: 0.85rem; background: #ebedef; border-radius: 4px; font-weight: bold; border-left: 4px solid #7f8c8d; }

.empty-msg { font-size: 0.8rem; color: #a0aec0; text-align: center; font-style: italic; margin: 15px 0; }

/* VISOR MODAL PDF */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content-pdf { background: #fff; margin: 4vh auto; width: 85%; height: 85vh; position: relative; border-radius: 4px; }
.close-btn { position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; font-weight: bold; color: #000; }