/* =============================================================================
   Python para principiantes — estilos propios del curso.

   El marco de la ventana de práctica lo pone la plataforma (.mc-term en
   aula.css). Aquí va lo que es de este curso: los bloques de código con su
   botón de ejecutar, los ejercicios corregidos y la consola de ejemplo.
   ========================================================================== */

/* ==========================================================  código  ====== */
.pycode, .ejercicio{
  background:#15132A; border-radius:var(--r-lg); overflow:hidden; margin:1.7em 0;
  box-shadow:0 20px 40px -26px rgba(0,0,0,.65);
}
.py-barra{
  display:flex; align-items:center; gap:9px; padding:10px 14px;
  background:#1F1B3A; border-bottom:1px solid rgba(255,255,255,.07);
}
.py-titulo{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color:#8E89AD;
  margin-right:auto;
}
.py-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Instrument Sans',system-ui,sans-serif; font-size:12.5px; font-weight:600;
  color:#C9BFFF; background:rgba(154,123,255,.16); border:1px solid rgba(154,123,255,.34);
  border-radius:999px; padding:5px 13px; cursor:pointer; transition:.16s;
}
.py-btn:hover{ background:rgba(154,123,255,.3); color:#fff; }
.py-btn:disabled{ opacity:.55; cursor:default; }
.py-ejecutar{ color:#3DDC97; background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.34); }
.py-ejecutar:hover{ background:rgba(61,220,151,.26); color:#fff; }
.py-btn span[aria-hidden]{ font-size:9px; }

.pycode pre, .ejercicio pre{
  margin:0; padding:16px 18px; background:none; border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.4px; line-height:1.68;
  color:#D8D4F5; overflow-x:auto;
}
.pycode pre code{ background:none; color:inherit; padding:0; font-size:inherit; }

/* el editor: mismo aspecto que el bloque, pero se puede escribir */
.py-editor{
  display:block; width:100%; border:0; outline:none; resize:vertical;
  background:#100E22; color:#D8D4F5; padding:16px 18px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.4px; line-height:1.68;
  box-shadow:inset 0 0 0 1px rgba(154,123,255,.22); border-radius:0;
}
.py-editor:focus{ box-shadow:inset 0 0 0 2px rgba(154,123,255,.55); }
.py-editor::placeholder{ color:#4B4670; }

/* ========================================================  la salida  ===== */
.py-salida{ border-top:1px solid rgba(255,255,255,.08); background:#100E22; }
.py-salida-cab{
  padding:8px 18px 0; font-family:'Instrument Sans',sans-serif; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:#6F6A92;
}
.py-salida.con-error .py-salida-cab{ color:#FF8B7E; }
.py-salida-txt, .py-salida-err{
  margin:4px 0 0; padding:4px 18px 16px; background:none;
  font-family:'JetBrains Mono',monospace; font-size:13.2px; line-height:1.62;
  white-space:pre-wrap; word-break:break-word;
}
.py-salida-txt{ color:#9FE8CB; }
.py-salida-err{ color:#FF8B7E; }
.py-pista{
  margin:0; padding:0 18px 16px; font-family:'Instrument Sans',sans-serif;
  font-size:13.2px; color:#B9B4D4;
}

/* ======================================================  ejercicios  ====== */
.ejercicio{ box-shadow:0 0 0 1px rgba(154,123,255,.3), 0 20px 40px -26px rgba(0,0,0,.65); }
.py-barra-ej{ background:#2A2150; }
.ejercicio .enunciado{
  margin:0; padding:16px 18px; background:#1F1B3A; color:#D8D4F5;
  font-family:'Instrument Sans',system-ui,sans-serif; font-size:15px; line-height:1.62;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ejercicio .enunciado b{ color:#fff; }
.ejercicio .enunciado code{
  background:rgba(255,255,255,.1); color:#C9BFFF; border-radius:5px; padding:1px 6px;
  font-size:.9em;
}

.py-veredicto{
  margin:0; padding:14px 18px; font-family:'Instrument Sans',sans-serif; font-size:14.2px;
  line-height:1.6; border-top:1px solid rgba(255,255,255,.08);
}
.py-veredicto b{ display:block; margin-bottom:4px; }
.py-bien{ background:rgba(61,220,151,.13); color:#9FE8CB; }
.py-bien b{ color:#3DDC97; }
.py-mal{ background:rgba(255,139,126,.1); color:#E8C6C1; }
.py-mal b{ color:#FF8B7E; }
.py-veredicto .py-pista{ padding:8px 0 0; color:inherit; opacity:.85; }

.py-comparar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
@media (max-width:560px){ .py-comparar{ grid-template-columns:1fr; } }
.py-etq{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#8E89AD; margin-bottom:3px;
}
.py-comparar pre{
  margin:0; padding:9px 12px; background:#100E22; border-radius:10px;
  font-family:'JetBrains Mono',monospace; font-size:12.8px; color:#D8D4F5;
  white-space:pre-wrap; overflow-x:auto;
}

/* =========================================================  consola  ====== */
.consola{
  background:#12101F; border-radius:var(--r-lg); overflow:hidden; margin:1.7em 0;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.consola-barra{
  display:flex; align-items:center; gap:7px; padding:11px 16px;
  background:#1C1930; border-bottom:1px solid rgba(255,255,255,.07);
}
.consola-barra i{ width:11px; height:11px; border-radius:50%; background:#3A3555; }
.consola-barra i:nth-child(1){ background:#FF5F57; }
.consola-barra i:nth-child(2){ background:#FEBC2E; }
.consola-barra i:nth-child(3){ background:#28C840; }
.consola-barra span{
  margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:12px; color:#7C769B;
}
.consola pre{
  margin:0; padding:18px 20px; background:none; border-radius:0;
  font-family:'JetBrains Mono',monospace; font-size:13.4px; line-height:1.68;
  color:#D8D4F5; overflow-x:auto;
}
.consola .cmd{ color:#9A7BFF; }
.consola .cmd::before{ content:'$ '; color:#4B4670; }
.consola .cmd.venv::before{ content:'(.venv) $ '; color:#3DDC97; }
.consola .sal{ color:#8E89AD; }
.consola .ok{ color:#3DDC97; }
.consola .mal{ color:#FF8B7E; }

/* =============================================  avisos del curso  ========= */
.nota{
  display:flex; gap:13px; align-items:flex-start; background:var(--blanco);
  border:1px solid var(--borde); border-left:3px solid var(--violeta);
  border-radius:var(--r); padding:15px 18px; margin:1.6em 0; font-size:15px;
}
.nota::before{ content:'💡'; font-size:19px; line-height:1.3; }
.nota.ojo{ border-left-color:var(--coral); }
.nota.ojo::before{ content:'⚠️'; }
.nota.rd{ border-left-color:var(--menta); }
.nota.rd::before{ content:'🇩🇴'; }
.nota b{ color:var(--tinta); }

/* tabla de referencia rápida */
.cuerpo-rico table.ref td:first-child{
  font-family:'JetBrains Mono',monospace; font-size:.9em; color:var(--violeta-osc);
  white-space:nowrap;
}