.pvl-app{--bg:#f5f5f3;--panel:#ffffff;--panel2:#f7f7f5;--line:#deded8;--text:#181816;--muted:#74746d;--accent:#f59e0b;--accent-soft:#fff3cf;--accent-text:#8a4b00;--success:#159455;--danger:#d64545;--code:#fbfbfa;--console:#f4f4f1;--shadow:0 18px 55px rgba(20,20,18,.10);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin:20px 0;color-scheme:light}
.pvl-app.is-dark{--bg:#171715;--panel:#20201d;--panel2:#272723;--line:#3b3b35;--text:#f5f5ef;--muted:#aaa99f;--accent:#f5b942;--accent-soft:#4a3915;--accent-text:#ffd880;--success:#47c987;--danger:#ff7474;--code:#141412;--console:#11110f;--shadow:0 18px 55px rgba(0,0,0,.32);color-scheme:dark}
.pvl-app *{box-sizing:border-box}.pvl-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--panel)}.pvl-title{font-size:20px;font-weight:850}.pvl-subtitle{font-size:12px;color:var(--muted);margin-top:3px}.pvl-version{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;font-size:10px}.pvl-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pvl-status{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.pvl-dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}.pvl-status.ready .pvl-dot{background:var(--success)}.pvl-status.error .pvl-dot{background:var(--danger)}
.pvl-theme-toggle{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700}.pvl-workspace{display:grid;grid-template-columns:minmax(360px,1fr) minmax(440px,1.2fr);min-height:650px}.pvl-editor-panel,.pvl-run-panel{min-width:0;background:var(--panel)}.pvl-editor-panel{border-right:1px solid var(--line)}.pvl-panel-head{height:58px;padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between;background:var(--panel2);border-bottom:1px solid var(--line);font-weight:750}.pvl-actions{display:flex;gap:8px}.pvl-btn,.pvl-iconbtn,.pvl-tab{cursor:pointer;transition:.16s}.pvl-btn{padding:9px 13px;border-radius:10px;font-weight:750;border:1px solid var(--line)}.pvl-btn-primary{background:var(--text);color:var(--panel);border-color:var(--text)}.pvl-btn-primary:disabled{opacity:.45;cursor:not-allowed}.pvl-btn-secondary{background:var(--panel);color:var(--text)}.pvl-btn:hover:not(:disabled),.pvl-iconbtn:hover,.pvl-tab:hover,.pvl-theme-toggle:hover{transform:translateY(-1px)}
.pvl-code-wrap{position:relative;height:455px;background:var(--code);overflow:auto}.pvl-code-wrap textarea,.pvl-highlight{position:absolute;inset:0;margin:0;padding:18px 20px;border:0;width:100%;min-height:100%;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:hidden}.pvl-code-wrap textarea{resize:none;background:transparent;color:var(--text);caret-color:var(--text);outline:none;z-index:2}.pvl-highlight{z-index:1;color:transparent;pointer-events:none}.pvl-highlight .active-line{display:block;background:var(--accent-soft);border-left:4px solid var(--accent);margin-left:-20px;padding-left:16px;color:transparent}.pvl-inputs{padding:14px 18px 18px;background:var(--panel2);border-top:1px solid var(--line)}.pvl-inputs label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:800}.pvl-inputs textarea{width:100%;height:76px;resize:vertical;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:ui-monospace,monospace;outline:none}.pvl-inputs textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pvl-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel2)}.pvl-tab{padding:19px 18px;background:transparent;color:var(--muted);font-weight:800;border:0;border-bottom:3px solid transparent}.pvl-tab.is-active{color:var(--text);border-bottom-color:var(--accent);background:var(--panel)}.pvl-tabview{display:none;padding:16px}.pvl-tabview.is-active{display:block}.pvl-run-io{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin-bottom:14px}.pvl-io-box,.pvl-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}.pvl-card-title{text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--muted);font-weight:900;margin-bottom:10px}.pvl-io-pre{margin:0;background:var(--console);border:1px solid var(--line);border-radius:9px;padding:12px;min-height:112px;max-height:185px;overflow:auto;color:var(--text);font:13px/1.55 ui-monospace,monospace;white-space:pre-wrap}.pvl-output{font-weight:650}.pvl-stepbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}.pvl-iconbtn{width:38px;height:38px;border-radius:10px;background:var(--panel2);color:var(--text);font-weight:800;border:1px solid var(--line)}.pvl-step-label{margin-left:8px;font-size:13px;color:var(--muted);font-weight:650}.pvl-trace-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pvl-current-line{font:14px/1.55 ui-monospace,monospace;color:var(--text);min-height:74px;white-space:pre-wrap}.pvl-vars{min-height:74px}.pvl-var{display:grid;grid-template-columns:minmax(70px,.7fr) 1.3fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font:13px ui-monospace,monospace}.pvl-var:last-child{border-bottom:0}.pvl-var-name{color:var(--accent-text);font-weight:850}.pvl-var-value{color:var(--text);overflow-wrap:anywhere}.pvl-muted{color:var(--muted)}
.pvl-flow-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}.pvl-flow-position{padding:9px 12px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:850;border:1px solid var(--accent)}.pvl-flow{height:610px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--code);padding:12px}.pvl-flow svg{display:block;margin:0 auto;max-width:none}.pvl-flow-node rect,.pvl-flow-node ellipse,.pvl-flow-node polygon{fill:var(--panel);stroke:#77776e;stroke-width:1.5;transition:.15s}.pvl-flow-node text{fill:var(--text);font:12px ui-monospace,monospace;pointer-events:none}.pvl-flow-node.active rect,.pvl-flow-node.active ellipse,.pvl-flow-node.active polygon{fill:var(--accent-soft);stroke:var(--accent);stroke-width:5;filter:drop-shadow(0 0 8px rgba(245,158,11,.32))}.pvl-flow-node.active text{fill:var(--accent-text);font-weight:900}.pvl-flow-edge{fill:none;stroke:#929288;stroke-width:1.6;marker-end:url(#pvl-arrow)}.pvl-flow-edge-label{fill:var(--muted);font:11px system-ui,sans-serif}.pvl-flow-node.was-run rect,.pvl-flow-node.was-run ellipse,.pvl-flow-node.was-run polygon{stroke:var(--success);stroke-width:2.5}
@media(max-width:900px){.pvl-workspace{grid-template-columns:1fr}.pvl-editor-panel{border-right:0;border-bottom:1px solid var(--line)}.pvl-code-wrap{height:390px}.pvl-run-io,.pvl-trace-grid{grid-template-columns:1fr}.pvl-flow{height:520px}}
@media(max-width:560px){.pvl-topbar{align-items:flex-start;flex-direction:column}.pvl-top-actions{justify-content:flex-start}.pvl-panel-head{height:auto;min-height:58px;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.pvl-tab{font-size:12px;padding:15px 10px}.pvl-tabview{padding:11px}.pvl-flow{padding:6px}.pvl-theme-toggle span{display:none}}

.pvl-friendly-title{font-size:14px;font-weight:900;margin-bottom:5px}.pvl-friendly-help,.pvl-io-explain{font-size:12px;line-height:1.45;color:var(--muted);margin-bottom:9px}.pvl-input-question{font-size:12px;font-weight:800;color:var(--text);margin:9px 0 6px;padding:8px 10px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:6px}.pvl-input-box{border-top:4px solid #8a8a82}.pvl-output-box{border-top:4px solid var(--success)}.pvl-teaching-status{padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel2);border-radius:12px;font-size:13px;line-height:1.5;font-weight:700}.pvl-loop-note{color:var(--accent-text)}

.pvl-docs-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:var(--text)!important;border-radius:10px;padding:8px 10px;text-decoration:none!important;font-weight:800;font-size:13px;transition:.16s}.pvl-docs-link:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)!important}.pvl-editor-help{padding:9px 18px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}.pvl-editor-help code{color:var(--accent-text);font-weight:900}.pvl-autocomplete{position:absolute;z-index:20;width:min(330px,calc(100% - 20px));max-height:255px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 42px rgba(0,0,0,.22);padding:6px}.pvl-autocomplete[hidden]{display:none}.pvl-ac-item{display:block;width:100%;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:8px;text-align:left;cursor:pointer}.pvl-ac-item.is-selected,.pvl-ac-item:hover{background:var(--accent-soft)}.pvl-ac-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.pvl-ac-main strong{font:800 13px ui-monospace,monospace;color:var(--text)}.pvl-ac-main small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);font-weight:900}.pvl-ac-desc{display:block;font-size:11px;line-height:1.35;color:var(--muted);margin-top:3px}.pvl-ac-item.is-selected .pvl-ac-desc{color:var(--text)}
@media(max-width:560px){.pvl-docs-link span{display:none}.pvl-autocomplete{width:calc(100% - 20px);left:10px!important}}

.pvl-error-card{margin-bottom:12px;padding:15px 16px;border:2px solid var(--danger);border-radius:14px;background:color-mix(in srgb,var(--danger) 8%,var(--panel));line-height:1.5}.pvl-error-card[hidden]{display:none}.pvl-error-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--danger);margin-bottom:5px}.pvl-error-title{font-size:18px;font-weight:900;margin-bottom:8px}.pvl-error-why,.pvl-error-tip{font-size:13px;margin-top:7px}.pvl-error-line{margin-top:9px;padding:9px 10px;background:var(--code);border:1px solid var(--line);border-radius:9px;font-size:13px;overflow-wrap:anywhere}.pvl-error-line code{font-family:ui-monospace,monospace;color:var(--text)}.pvl-error-tip{font-weight:800}

/* Python Visual Lab v0.9.2 - Variables en tiempo real */
.pvl-live-vars{margin:18px 0;padding:18px;border:1px solid rgba(120,120,120,.25);border-radius:14px;background:var(--pvl-card,#fff);color:inherit}
.pvl-vars-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}
.pvl-vars-head strong{display:block;font-size:17px}
.pvl-vars-head span:not(.pvl-vars-status){display:block;margin-top:4px;font-size:13px;opacity:.72}
.pvl-vars-status{font-size:12px;padding:6px 10px;border:1px solid currentColor;border-radius:999px;opacity:.75;white-space:nowrap}
.pvl-vars-help{font-size:13px;line-height:1.45;padding:10px 12px;margin-bottom:12px;border-radius:9px;background:rgba(127,127,127,.09)}
.pvl-vars-table-wrap{overflow:auto}
.pvl-vars-table{width:100%;border-collapse:collapse;min-width:540px}
.pvl-vars-table th,.pvl-vars-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(127,127,127,.18)}
.pvl-vars-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.pvl-vars-table code{font-size:13px}
.pvl-var-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}
.pvl-var-type,.pvl-var-state{display:inline-block;padding:3px 8px;border-radius:999px;background:rgba(127,127,127,.12);font-size:12px}
.pvl-var-changed{animation:pvlVarFlash 1.1s ease}
.pvl-var-state.changed{font-weight:700;border:1px solid currentColor}
.pvl-var-state.new{font-weight:700}
@keyframes pvlVarFlash{0%{background:rgba(255,193,7,.32)}100%{background:transparent}}
.pvl-dark .pvl-live-vars,[data-theme="dark"] .pvl-live-vars,.dark .pvl-live-vars{--pvl-card:#15171a}
@media(max-width:700px){.pvl-vars-head{flex-direction:column}.pvl-live-vars{padding:14px}}

/* v0.9.2 - monitor de variables integrado */
.pvl-vars-card{grid-column:span 1}.pvl-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pvl-card-subtitle{font-size:12px;opacity:.68;margin-top:3px}.pvl-vars-step{font-size:11px;border:1px solid currentColor;border-radius:999px;padding:4px 8px;opacity:.72}.pvl-vars-explain{font-size:12px;line-height:1.45;margin:10px 0;padding:9px 10px;border-radius:8px;background:rgba(127,127,127,.08)}
.pvl-vars-live{overflow:auto}.pvl-vars-table-head,.pvl-var-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(120px,1.2fr) 80px 95px;gap:8px;align-items:center;min-width:500px;padding:8px 6px}.pvl-vars-table-head{font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.55;border-bottom:1px solid rgba(127,127,127,.18)}.pvl-var-row{border-bottom:1px solid rgba(127,127,127,.12);font-size:13px}.pvl-var-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;word-break:break-word}.pvl-var-type,.pvl-var-state{font-size:11px;padding:3px 7px;border-radius:999px;background:rgba(127,127,127,.1);width:max-content}.pvl-var-row.is-changed{animation:pvl-var-pop 1s ease}.pvl-var-row.is-changed .pvl-var-state{font-weight:800;border:1px solid currentColor}.pvl-var-row.is-new .pvl-var-state{font-weight:800}.pvl-vars-empty{font-size:13px;padding:14px;border-radius:8px;background:rgba(127,127,127,.07)}@keyframes pvl-var-pop{0%{transform:scale(1.015);background:rgba(255,193,7,.28)}100%{transform:none;background:transparent}}
/* v0.9.2 - asistente local de errores */
.pvl-ai-assistant{margin-top:14px;padding:14px;border:1px solid rgba(127,127,127,.22);border-radius:12px;background:rgba(127,127,127,.055)}.pvl-ai-title{font-weight:800;margin-bottom:7px}.pvl-ai-summary{font-size:13px;line-height:1.5;margin-bottom:12px}.pvl-ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pvl-ai-grid>div{padding:10px;border-radius:9px;background:rgba(127,127,127,.075);font-size:12px;line-height:1.45}.pvl-ai-grid ul{padding-left:18px;margin:7px 0 0}.pvl-ai-grid code{display:block;margin-top:7px;white-space:pre-wrap;word-break:break-word}.pvl-ai-context{margin-top:10px;font-size:11px;line-height:1.5;opacity:.75}@media(max-width:700px){.pvl-ai-grid{grid-template-columns:1fr}.pvl-vars-card{grid-column:1/-1}}


/* === Python Visual Lab v0.9.2: editor limpio, líneas dinámicas y dark mode completo === */

/* El área real del editor utiliza el tema del plugin. */
.pvl-code-wrap{
  position:relative;
  background:var(--code) !important;
}

/* El código se ve negro en modo claro. Los demás textos siguen usando las variables del tema. */
.pvl-code-wrap textarea{
  color:#111 !important;
  caret-color:#111 !important;
  background:transparent !important;
  padding-left:66px !important;
}
.pvl-highlight{
  padding-left:66px !important;
}

/* Números de línea que crecen automáticamente al escribir. */
.pvl-line-gutter{
  position:absolute;
  z-index:5;
  top:0;
  bottom:0;
  left:0;
  width:52px;
  padding:18px 10px 18px 0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  text-align:right;
  border-right:1px solid var(--line);
  background:var(--panel2);
  color:var(--muted);
  font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pvl-line-gutter > div{
  height:23.8px;
  line-height:23.8px;
}

/* Dark mode aplicado también al editor, gutter, paneles y pie. */
.pvl-app.is-dark{
  background:var(--bg) !important;
  color:var(--text) !important;
}
.pvl-app.is-dark .pvl-code-wrap{
  background:#141412 !important;
}
.pvl-app.is-dark .pvl-code-wrap textarea{
  background:transparent !important;
  color:#f3f3ef !important;
  caret-color:#ffffff !important;
}
.pvl-app.is-dark .pvl-highlight{
  background:#141412 !important;
}
.pvl-app.is-dark .pvl-line-gutter{
  background:#1b1b19 !important;
  color:#85857e !important;
  border-color:#383833 !important;
}
.pvl-app.is-dark .pvl-editor-panel,
.pvl-app.is-dark .pvl-run-panel,
.pvl-app.is-dark .pvl-panel-head,
.pvl-app.is-dark .pvl-topbar,
.pvl-app.is-dark .pvl-tabview,
.pvl-app.is-dark .pvl-inputs,
.pvl-app.is-dark .pvl-editor-help,
.pvl-app.is-dark .pvl-card,
.pvl-app.is-dark .pvl-io-box,
.pvl-app.is-dark .pvl-error-card,
.pvl-app.is-dark .pvl-ai-assistant,
.pvl-app.is-dark .pvl-flow-toolbar{
  color:var(--text);
}

/* Placeholder orientativo: no forma parte del código. */
.pvl-code-wrap textarea::placeholder{
  color:#969690;
  opacity:.75;
}
.pvl-app.is-dark .pvl-code-wrap textarea::placeholder{
  color:#7e7e78;
}

/* Pie propio del laboratorio. */
.pvl-footer{
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:var(--panel2);
  color:var(--muted);
  text-align:center;
  font-size:12px;
}
.pvl-footer a{
  color:var(--text) !important;
  font-weight:800;
  text-decoration:none !important;
}
.pvl-footer a:hover{
  text-decoration:underline !important;
}

/* El textarea de entrada inicia vacío, pero sigue siendo claro para principiantes. */
.pvl-inputs textarea::placeholder{
  color:var(--muted);
  opacity:.82;
}

@media(max-width:700px){
  .pvl-line-gutter{
    width:44px;
    padding-right:8px;
    font-size:12px;
  }
  .pvl-code-wrap textarea,
  .pvl-highlight{
    padding-left:56px !important;
  }
}


/* === v0.9.2 HOTFIX: texto del editor visible ===
   La capa textarea es la que muestra lo que escribe el alumno.
   Se fuerza -webkit-text-fill-color porque algunos temas/navegadores
   estaban heredando texto transparente del resaltador. */
.pvl-code-wrap textarea,
.pvl-code-wrap textarea.pvl-code-editor{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  opacity:1 !important;
  caret-color:#111111 !important;
  background:transparent !important;
  position:relative !important;
  z-index:4 !important;
  text-shadow:none !important;
}
.pvl-code-wrap .pvl-highlight{
  z-index:2 !important;
  pointer-events:none !important;
}
/* La línea activa queda detrás del texto, no lo tapa. */
.pvl-code-wrap .pvl-line-gutter{
  z-index:6 !important;
}

/* Dark mode: texto escrito claramente visible. */
.pvl-app.is-dark .pvl-code-wrap textarea,
.pvl-app.is-dark .pvl-code-wrap textarea.pvl-code-editor{
  color:#f4f4f0 !important;
  -webkit-text-fill-color:#f4f4f0 !important;
  caret-color:#ffffff !important;
  opacity:1 !important;
}

/* Selección visible en ambos temas. */
.pvl-code-wrap textarea::selection{
  background:rgba(70,150,255,.28);
  -webkit-text-fill-color:inherit;
}


/* === v0.9.2 Autocompletado visible sobre WordPress === */
.pvl-ac-box{
  position:fixed;
  z-index:2147483000;
  max-height:230px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(120,120,120,.35);
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 12px 35px rgba(0,0,0,.22);
  color:#111;
}
.pvl-ac-box[hidden]{display:none !important}
.pvl-ac-item{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  padding:9px 10px;
  text-align:left;
  border-radius:7px;
  cursor:pointer;
}
.pvl-ac-item:hover,
.pvl-ac-item.is-selected{
  background:#eef1f3;
}
.pvl-ac-command{
  display:block;
  font:700 14px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pvl-ac-help{
  display:block;
  margin-top:3px;
  font:12px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#666;
}
.pvl-app.is-dark ~ .pvl-ac-box,
html:has(.pvl-app.is-dark) .pvl-ac-box{
  background:#232421;
  color:#f1f1ed;
  border-color:#444640;
}
html:has(.pvl-app.is-dark) .pvl-ac-item:hover,
html:has(.pvl-app.is-dark) .pvl-ac-item.is-selected{
  background:#343631;
}
html:has(.pvl-app.is-dark) .pvl-ac-help{
  color:#b7b7b0;
}