/* =============================================================================
   MiCurso — el aula: mis cursos, ficha del curso y reproductor de lección.
   Depende de sitio.css (variables, botones, formularios).
   ========================================================================== */

/* ============================================================ cabecera ==== */
.aula-top{ background:var(--blanco); border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:80; }
.aula-top-in{ max-width:var(--ancho); margin-inline:auto; padding:12px 22px;
  display:flex; align-items:center; gap:16px; }
.aula-yo{ margin-left:auto; display:flex; align-items:center; gap:11px; font-size:14px; }
.aula-yo .avatar{ width:38px; height:38px; font-size:14px; }
.aula-yo b{ display:block; font-weight:600; line-height:1.3; }
.aula-yo span{ color:var(--gris-2); font-size:12.5px; }
@media (max-width:620px){ .aula-yo .txt{ display:none; } }

.aula-hola{ padding:40px 0 26px; }
.aula-hola h1{ font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:6px; }
.aula-hola p{ color:var(--gris); margin:0; }

/* ====================================================== mis cursos ======== */
.mis-cursos{ display:grid; gap:16px; margin-bottom:44px; }
.mi-curso{ display:grid; grid-template-columns:132px 1fr auto; gap:20px; align-items:center;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); padding:16px;
  text-decoration:none; color:inherit; transition:border-color .2s, box-shadow .2s, transform .2s var(--paso); }
.mi-curso:hover{ border-color:var(--violeta-cl); box-shadow:var(--sombra); transform:translateY(-2px); }
.mi-curso-arte{ aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; background:var(--nube);
  display:grid; place-items:center; font-size:34px; }
.mi-curso-arte img{ width:100%; height:100%; object-fit:cover; }
.mi-curso h3{ font-size:1.12rem; margin:0 0 6px; }
.mi-curso .linea{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--gris-2); }
.barra{ height:8px; border-radius:var(--r-full); background:var(--nube); overflow:hidden; margin-top:11px; }
.barra i{ display:block; height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--violeta),var(--violeta-cl)); transition:width .5s var(--paso); }
.barra.completa i{ background:linear-gradient(90deg,#0FB394,var(--menta)); }
.mi-curso-pct{ font-family:'Outfit',sans-serif; font-weight:700; font-size:1.5rem; color:var(--violeta);
  text-align:center; min-width:76px; }
.mi-curso-pct small{ display:block; font-size:12px; font-weight:500; color:var(--gris-2); letter-spacing:.04em; }
@media (max-width:700px){
  .mi-curso{ grid-template-columns:84px 1fr; }
  .mi-curso-pct{ grid-column:2; text-align:left; display:flex; align-items:baseline; gap:8px; }
}

.vacio{ text-align:center; background:var(--blanco); border:1px dashed var(--borde);
  border-radius:var(--r-xl); padding:clamp(34px,6vw,60px); }
.vacio .ico{ width:44px; height:44px; color:var(--violeta-cl); margin:0 auto 16px; }
.vacio h3{ margin-bottom:8px; }
.vacio p{ color:var(--gris); max-width:32em; margin-inline:auto; }

/* ======================================================= ficha del curso == */
.ficha-hero{ background:var(--tinta); color:#fff; padding:clamp(34px,5vw,62px) 0;
  background-image:radial-gradient(700px 420px at 88% -10%, rgba(108,77,246,.5), transparent 62%),
                   radial-gradient(560px 380px at 4% 110%, rgba(255,107,91,.32), transparent 60%); }
.ficha-hero h1{ color:#fff; font-size:clamp(1.9rem,4.4vw,3rem); }
.ficha-hero .subtitulo{ color:#C6C1E0; font-size:1.08rem; max-width:44rem; margin-bottom:22px; }
.ficha-hero .curso-meta{ border:0; padding:0; color:#B9B4D4; gap:20px; }
.ficha-hero .etiqueta{ background:rgba(255,255,255,.14); color:#fff; }
.ficha-in{ display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(24px,4vw,52px); align-items:start; }
@media (max-width:920px){ .ficha-in{ grid-template-columns:1fr; } }

.ficha-panel{ background:var(--blanco); color:var(--tinta); border-radius:var(--r-xl);
  box-shadow:var(--sombra-alta); overflow:hidden; position:sticky; top:92px; }
.ficha-panel-arte{ aspect-ratio:16/9; background:var(--nube); display:grid; place-items:center; font-size:56px; }
.ficha-panel-arte img{ width:100%; height:100%; object-fit:cover; }
.ficha-panel-cuerpo{ padding:24px; }
.ficha-panel ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; font-size:14.3px; }
.ficha-panel li{ display:flex; align-items:center; gap:10px; color:var(--gris); }
.ficha-panel li .ico{ width:17px; height:17px; color:var(--violeta); }

.cuerpo-rico{ font-size:16.4px; line-height:1.75; color:var(--tinta-2); }
.cuerpo-rico h2{ font-size:1.5rem; margin:1.9em 0 .55em; }
.cuerpo-rico h3{ font-size:1.16rem; margin:1.6em 0 .45em; }
.cuerpo-rico ul,.cuerpo-rico ol{ margin:0 0 1.2em; padding-left:1.35em; }
.cuerpo-rico li{ margin-bottom:.42em; }
.cuerpo-rico img,.cuerpo-rico video{ border-radius:var(--r-lg); margin:1.6em 0; width:100%; }
.cuerpo-rico audio{ width:100%; margin:1.4em 0; }
.cuerpo-rico a{ color:var(--violeta-osc); }
.cuerpo-rico blockquote{ margin:1.6em 0; padding:16px 22px; border-left:3px solid var(--violeta);
  background:var(--violeta-nube); border-radius:0 var(--r) var(--r) 0; color:var(--tinta-2); }
.cuerpo-rico table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:14.6px; }
.cuerpo-rico th,.cuerpo-rico td{ border:1px solid var(--borde); padding:10px 13px; text-align:left; }
.cuerpo-rico th{ background:var(--nube); font-weight:600; }
.cuerpo-rico code{ font-family:'JetBrains Mono',monospace; font-size:.88em;
  background:var(--nube); border-radius:6px; padding:2px 6px; color:var(--violeta-osc); }
.cuerpo-rico pre{ background:#1A1830; color:#E6E2FF; border-radius:var(--r-lg); padding:20px 22px;
  overflow-x:auto; margin:1.6em 0; font-size:14px; line-height:1.65; }
.cuerpo-rico pre code{ background:none; color:inherit; padding:0; font-size:inherit; }
/* ================================================================ temario = */
.temario{ display:grid; gap:12px; }
.temario-modulo{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); overflow:hidden; }
.temario-modulo > summary{ cursor:pointer; list-style:none; padding:18px 22px; display:flex;
  align-items:center; gap:14px; font-family:'Outfit',sans-serif; font-weight:600; font-size:15.8px; }
.temario-modulo > summary::-webkit-details-marker{ display:none; }
.temario-modulo > summary::after{ content:'⌄'; margin-left:auto; color:var(--violeta); font-size:18px;
  transition:transform .2s; line-height:1; }
.temario-modulo[open] > summary::after{ transform:rotate(180deg); }
.temario-num{ width:30px; height:30px; border-radius:9px; background:var(--violeta-nube);
  color:var(--violeta-osc); display:grid; place-items:center; font-size:13.5px; flex:none; }
.temario-cuenta{ font-family:'Instrument Sans',sans-serif; font-weight:400; font-size:13px; color:var(--gris-2); }
.temario-lista{ list-style:none; margin:0; padding:0 10px 10px; display:grid; gap:2px; }
.temario-lista a,.temario-lista .bloq{ display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--tinta-2); font-size:14.6px; transition:background .16s; }
.temario-lista a:hover{ background:var(--nube); }
.temario-lista .bloq{ color:var(--gris-2); }
.temario-lista .ico{ width:17px; height:17px; color:var(--gris-2); }
.temario-lista .hecho .ico{ color:var(--menta); }
.temario-lista .min{ margin-left:auto; font-size:12.5px; color:var(--gris-2); }
.temario-lista a.actual{ background:var(--violeta-nube); color:var(--violeta-osc); font-weight:600; }
.temario-lista a.actual .ico{ color:var(--violeta); }


/* Sin ligaduras decorativas en el código de las lecciones. Una fuente de
   programación dibuja >= como ≥ y != como ≠: queda bonito y es una trampa en un
   curso, porque quien lo copie a mano teclea el símbolo y no le funciona. El
   código tiene que verse exactamente como hay que escribirlo. */
.lector-cuerpo code, .lector-cuerpo pre, .lector-cuerpo kbd,
.lector-cuerpo textarea, .lector-cuerpo table code {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}

/* ========================================================== reproductor === */
.lector{ display:grid; grid-template-columns:300px 1fr; min-height:100svh; }
/* Un hijo de grid trae min-width:auto, así que no encoge por debajo de su
   contenido. En escritorio da igual —el carril mide 300px fijos y los títulos
   parten solos—, pero en móvil la columna es 1fr y crecía hasta el título más
   largo del temario, arrastrando la página entera fuera de la pantalla. */
.lector > *{ min-width:0; }
.temario-lista a, .temario-lista .bloq{ min-width:0; }
.temario-lista a > span, .temario-lista .bloq > span{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:960px){ .lector{ grid-template-columns:1fr; } }

.lector-rail{ background:var(--blanco); border-right:1px solid var(--borde);
  padding:22px 16px 40px; position:sticky; top:0; height:100svh; overflow-y:auto; }
@media (max-width:960px){ .lector-rail{ position:static; height:auto; border-right:0;
  border-bottom:1px solid var(--borde); padding-bottom:16px; } }

/* --- el temario, plegable en pantalla estrecha -------------------------- */
/* En escritorio el carril está siempre a la vista, así que el desplegable no
   pinta nada: su resumen se esconde y el contenido se ve porque nace abierto. */
.rail-temario > summary{ display:none; }

@media (max-width:960px){
  /* La cuenta pasa al resumen, que si no se dice dos veces seguidas. */
  .lector-avance{ display:none; }

  .rail-temario > summary{
    display:flex; align-items:center; gap:11px; cursor:pointer; list-style:none;
    padding:0 15px; min-height:50px; margin-top:2px;
    background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
    font-family:'Outfit',sans-serif; font-weight:600; font-size:15.2px; color:var(--tinta);
  }
  .rail-temario > summary::-webkit-details-marker{ display:none; }
  .rail-temario > summary .ico{ color:var(--violeta); flex:none; }
  .rail-temario > summary::after{
    content:'⌄'; margin-left:auto; color:var(--violeta); font-size:19px;
    line-height:1; transition:transform .2s;
  }
  .rail-temario[open] > summary::after{ transform:rotate(180deg); }
  .rail-temario-n{
    font-family:'Instrument Sans',sans-serif; font-weight:400; font-size:13px;
    color:var(--gris-2); margin-left:auto;
  }
  /* Con el temario abierto, el chevron va después de la cuenta, no pegado a
     ella: los dos pedían el mismo `margin-left:auto`. */
  .rail-temario > summary::after{ margin-left:12px; }
  .rail-temario > .temario{ margin-top:10px; }
}

@media (prefers-reduced-motion:reduce){
  .rail-temario > summary::after{ transition:none; }
}
.lector-rail .volver{ display:inline-flex; align-items:center; gap:8px; font-size:13.8px;
  color:var(--gris); text-decoration:none; margin-bottom:18px; }
.lector-rail .volver:hover{ color:var(--violeta-osc); }
.lector-rail h2{ font-size:1.05rem; margin-bottom:12px; }
.lector-avance{ font-size:13px; color:var(--gris-2); margin-bottom:20px; }

.lector-cuerpo{ padding:clamp(26px,4vw,54px) clamp(20px,4vw,56px) 90px; max-width:840px; width:100%; }

/* Lección ancha. La medida de lectura no se negocia: el texto sigue a 860px
   aunque la lección sea amplia. Solo lo que el curso marca como «ancho-total»
   —una consola, una tabla de resultados, un esquema— usa el espacio que sobra. */
.lector-cuerpo.amplio{ max-width:1460px; }
.lector-cuerpo.amplio > *,
.lector-cuerpo.amplio > .curso-libre > *,
.lector-cuerpo.amplio > .cuerpo-rico > *{ max-width:860px; }
.lector-cuerpo.amplio > .curso-libre,
.lector-cuerpo.amplio > .cuerpo-rico{ max-width:none; }
.lector-cuerpo.amplio .ancho-total{ max-width:none; }
.lector-cuerpo h1{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:10px; }
.lector-migas{ font-size:13px; color:var(--gris-2); margin-bottom:8px; letter-spacing:.02em; }

.marco-video,.marco-audio{ border-radius:var(--r-lg); overflow:hidden; background:#12101F; margin:0 0 26px; }
.marco-video video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }
.marco-audio{ background:var(--nube); padding:20px; }
.marco-audio audio{ width:100%; }

.adjunto{ display:flex; align-items:center; gap:15px; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:18px 20px; text-decoration:none; color:inherit; margin:0 0 26px;
  transition:border-color .18s, box-shadow .18s; }
.adjunto:hover{ border-color:var(--violeta-cl); box-shadow:var(--sombra); }
.adjunto-ico{ width:46px; height:46px; border-radius:14px; background:var(--violeta-nube);
  color:var(--violeta-osc); display:grid; place-items:center; flex:none; }
.adjunto b{ display:block; font-family:'Outfit',sans-serif; }
.adjunto span{ font-size:13px; color:var(--gris-2); }
.adjunto .descarga{ margin-left:auto; color:var(--violeta); }

/* --- quiz ---------------------------------------------------------------- */
.quiz{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px); margin:28px 0; }
.quiz .rotulo{ margin-bottom:10px; }
.quiz h3{ font-size:1.28rem; margin-bottom:20px; }
.quiz-ops{ display:grid; gap:10px; }
.quiz-op{ display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:var(--lienzo); border:1.5px solid var(--borde); border-radius:var(--r); padding:15px 18px;
  font:inherit; font-size:15.2px; color:var(--tinta-2); cursor:pointer; transition:.16s; }
.quiz-op:hover:not(:disabled){ border-color:var(--violeta-cl); background:var(--blanco); }
.quiz-op b{ width:26px; height:26px; border-radius:8px; background:var(--nube); color:var(--gris);
  display:grid; place-items:center; font-size:13px; font-weight:600; flex:none; }
.quiz-op:disabled{ cursor:default; }
.quiz-op.bien{ border-color:var(--menta); background:var(--menta-nube); color:#07705C; }
.quiz-op.bien b{ background:var(--menta); color:#fff; }
.quiz-op.mal{ border-color:var(--coral); background:var(--coral-nube); color:#A3291A; }
.quiz-op.mal b{ background:var(--coral); color:#fff; }
.quiz-op.elegida{ border-color:var(--violeta); background:var(--violeta-nube); color:var(--violeta-osc); }
.quiz-op.elegida b{ background:var(--violeta); color:#fff; }
.quiz-fb:empty{ display:none; }
.quiz-fb{ margin-top:14px; }
.quiz-fb .aviso{ margin-bottom:0; }

/* Varias preguntas por comprobación: se separan con una línea fina en vez de
   con una tarjeta cada una, que rompería la lectura seguida. */
.quiz-pregunta + .quiz-pregunta{ border-top:1px solid var(--borde); margin-top:26px; padding-top:24px; }
.quiz-pregunta h3{ font-size:1.15rem; margin-bottom:16px; }
.quiz-pie{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; }
.quiz-aviso{ font-size:13px; color:var(--gris-2); margin:0; }
.quiz-nota{ font-size:15.5px; margin:0; }
.quiz-nota b{ color:var(--violeta-osc); font-family:'Outfit',sans-serif; font-size:1.25rem; }

/* Tipo «libre»: el curso trae su propio HTML y sus propios estilos. La
   plataforma no impone tipografía aquí, solo el ancho de lectura. */
.curso-libre{ margin:0 0 26px; }

/* --- pie del reproductor -------------------------------------------------- */
.lector-pie{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--borde); margin-top:40px; padding-top:26px; }
.lector-pie .der{ margin-left:auto; display:flex; gap:10px; }
@media (max-width:560px){ .lector-pie .der{ margin-left:0; width:100%; }
  .lector-pie .der .btn{ flex:1; } }

.hecho-sello{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
  color:#07705C; background:var(--menta-nube); border-radius:var(--r-full); padding:9px 17px; }
.hecho-sello .ico{ width:17px; height:17px; }

/* --- fin de curso --------------------------------------------------------- */
.diploma{ text-align:center; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-xl); padding:clamp(32px,5vw,54px); box-shadow:var(--sombra-alta); }
.diploma .sello{ width:76px; height:76px; border-radius:var(--r-full); margin:0 auto 20px;
  display:grid; place-items:center; background:linear-gradient(140deg,var(--menta),#0FB394); color:#fff; }
.diploma .sello .ico{ width:36px; height:36px; }

/* =============================================================================
   MiCurso Terminal — la ventana de práctica.

   Empezó dentro del curso de Linux, pero al usarla también el de Python pasó a
   ser una pieza de la plataforma: el marco lo pone el sitio y lo que corre
   dentro lo pone cada curso. Un curso puede redefinir lo que quiera, porque su
   hoja se carga después.
   ========================================================================== */

/* --- el botón, dentro de la barra del ejemplo ---------------------------- */
.terminal-barra{ position:relative; }
.mc-practicar{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  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;
}
.mc-practicar:hover{ background:rgba(154,123,255,.3); color:#fff; border-color:rgba(154,123,255,.6); }
.mc-practicar span[aria-hidden]{ font-size:9px; }
.mc-practicar.hecha{ color:#3DDC97; background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.34); }

/* --- el modal ------------------------------------------------------------ */
.mc-term{
  position:fixed; width:min(940px,94vw); max-height:94vh; padding:0; border:0;
  border-radius:20px; background:#12101F; color:#D8D4F5; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.mc-term::backdrop{ background:rgba(12,10,26,.72); backdrop-filter:blur(3px); }

/* La barra es el asa: de ahí se arrastra la ventana. */
.mc-term-barra{
  display:flex; align-items:center; gap:7px; padding:13px 18px;
  background:#1C1930; border-bottom:1px solid rgba(255,255,255,.08);
  cursor:grab; user-select:none; touch-action:none;
}
.mc-term-barra.arrastrando{ cursor:grabbing; }
.mc-term-barra i{ width:11px; height:11px; border-radius:50%; background:#3A3555; }
.mc-term-barra i:nth-child(1){ background:#FF5F57; }
.mc-term-barra i:nth-child(2){ background:#FEBC2E; }
.mc-term-barra i:nth-child(3){ background:#28C840; }
.mc-term-titulo{
  margin-left:10px; font-family:'Outfit',system-ui,sans-serif; font-weight:600;
  font-size:14px; color:#fff;
}
.mc-term-cierre{
  margin-left:auto; font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:12px; color:#7C769B;
}
.mc-term-cierre code{ color:#9A7BFF; background:none; padding:0; font-size:12px; }
.mc-term-btn{
  flex:none; width:26px; height:26px; margin-left:12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#C9BFFF; font-size:15px; line-height:1; cursor:pointer; transition:.15s;
}
.mc-term-btn:hover{ background:rgba(154,123,255,.28); color:#fff; }

/* --- las instrucciones, encima de la consola ----------------------------- */
.mc-term-guia{
  padding:16px 20px; background:#171528; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.mc-term-intro{ margin:0 0 12px; font-size:13px; color:#8E89AD; line-height:1.55; }
.mc-term-paso{ display:flex; align-items:flex-start; gap:13px; }
.mc-term-contador{
  flex:none; margin-top:1px; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  background:rgba(154,123,255,.2); color:#C9BFFF; border-radius:999px; padding:5px 12px;
}
.mc-term-tarea{ margin:0 0 3px; font-size:16px; font-weight:600; color:#fff; line-height:1.35; }
.mc-term-detalle{ margin:0; font-size:14px; color:#B9B4D4; line-height:1.55; }
.mc-term-detalle code{ background:rgba(255,255,255,.1); border-radius:5px; padding:1px 6px; color:#C9BFFF; }

/* --- la consola ---------------------------------------------------------- */
.mc-term-pantalla{
  padding:18px 20px; height:min(38vh,300px); overflow-y:auto; cursor:text;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.6px; line-height:1.62;
}
.mc-term-lin{ white-space:pre-wrap; word-break:break-word; color:#8E89AD; }
.mc-term-eco{ color:#D8D4F5; }
.mc-term-err{ color:#FF8B7E; }
.mc-term-ok{ color:#3DDC97; }

.mc-term-linea{ position:relative; display:flex; align-items:baseline; gap:9px; margin-top:4px; }
.mc-term-prompt{ color:#9A7BFF; white-space:nowrap; }

/* El campo real va invisible encima de la línea: se escribe en él, pero lo
   que se ve es el texto repintado con un bloque de cursor. Una terminal no
   enseña una cajita de formulario. */
.mc-term input.mc-term-entrada,
.mc-term input.mc-term-entrada:focus{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; background:none; border:0; border-radius:0; box-shadow:none;
  outline:none; padding:0; margin:0; font:inherit; cursor:text;
}
.mc-term-tecleo{ flex:1; min-width:0; color:#fff; white-space:pre-wrap; word-break:break-word; }
.mc-term-cursor{ background:#9A7BFF; color:#12101F; border-radius:1px; }
.mc-term-entrada:focus ~ .mc-term-tecleo .mc-term-cursor,
.mc-term-linea:focus-within .mc-term-cursor{ animation:mc-parpadeo 1.05s steps(1, end) infinite; }
@keyframes mc-parpadeo{ 0%,55%{ background:#9A7BFF; color:#12101F; } 56%,100%{ background:transparent; color:#fff; } }
@media (prefers-reduced-motion:reduce){ .mc-term-cursor{ animation:none !important; } }

/* --- la retroalimentación, debajo --------------------------------------- */
.mc-term-panel{
  border-top:1px solid rgba(255,255,255,.09); background:#171528;
  padding:14px 20px 18px; font-family:'Instrument Sans',system-ui,sans-serif;
}
.mc-term-msg{ display:flex; flex-direction:column; gap:3px; font-size:14px; border-radius:12px; padding:12px 15px; }
.mc-term-msg b{ font-size:13.5px; }
.mc-term-msg span{ color:#B9B4D4; line-height:1.5; }
.mc-term-bien{ background:rgba(61,220,151,.12); border:1px solid rgba(61,220,151,.3); }
.mc-term-bien b{ color:#3DDC97; }
.mc-term-pista{ background:rgba(154,123,255,.12); border:1px solid rgba(154,123,255,.28); }
.mc-term-pista b{ color:#C9BFFF; }

/* --- minimizada: solo la barra, y deja de ser modal ---------------------- */
.mc-term.minimizada{ width:min(330px,86vw); max-height:none; cursor:pointer; }
.mc-term.minimizada .mc-term-cuerpo{ display:none; }
.mc-term.minimizada .mc-term-cierre{ display:none; }
.mc-term.minimizada .mc-term-titulo::after{ content:' · en pausa'; color:#7C769B; font-weight:400; }

@media (max-width:600px){
  .mc-term-cierre{ display:none; }
  .mc-term-pantalla{ height:min(32vh,240px); font-size:12.8px; }
  .mc-term-guia{ padding:13px 16px; }
  .mc-term-tarea{ font-size:15px; }
}

/* ========================================================= lector en voz === */
/* El botón de escuchar la lección. Va pegado arriba mientras se desplaza,
   porque una lección larga se escucha desplazándose y los controles tienen que
   seguir a mano. No se pone flotante abajo a la derecha: ahí ya está MCbot. */
.lector-voz{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 22px; padding:10px 12px;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
  box-shadow:0 2px 10px rgba(20,27,35,.05);
}
.lector-voz.sonando{ border-color:var(--violeta); }

.lector-voz button{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14.5px;
  font-weight:600; padding:0 15px; min-height:44px; border-radius:var(--r-md);
  border:1px solid var(--borde); background:var(--lienzo); color:var(--tinta);
  cursor:pointer;
}
.lector-voz button:hover:not([disabled]){ background:var(--nube); border-color:var(--violeta);
  color:var(--violeta-osc); }
.lector-voz button[disabled]{ opacity:.4; cursor:default; }
.lector-voz-play{ background:var(--violeta) !important; color:#fff !important;
  border-color:var(--violeta) !important; }
.lector-voz-play:hover{ background:var(--violeta-osc) !important; }
.lector-voz button span[aria-hidden]{ font-size:13px; line-height:1; }

.lector-voz-estado{ font-size:13px; color:var(--gris-2); font-variant-numeric:tabular-nums;
  min-width:3.5em; }
.lector-voz-sel{
  font:inherit; font-size:13.5px; padding:0 8px; min-height:44px; margin-left:auto;
  border:1px solid var(--borde); border-radius:var(--r-md);
  background:var(--blanco); color:var(--tinta); max-width:150px;
}
.lector-voz-sel + .lector-voz-sel{ margin-left:0; }

@media (max-width:560px){
  .lector-voz button .txt{ display:none; }
  .lector-voz button{ padding:0 14px; }
  /* Con `min-width` los selectores bajan de línea en vez de apretarse hasta
     cortar el nombre de la voz, que es lo que hacían con flex:1 a secas. */
  .lector-voz-sel{ flex:1 1 128px; min-width:128px; max-width:none; margin-left:0; }
  .lector-voz-estado{ min-width:0; }
}

/* El bloque que suena ahora mismo. Discreto: acompaña, no grita. */
.lector-cuerpo .leyendo{
  background:var(--nube); border-radius:6px;
  box-shadow:0 0 0 6px var(--nube);
}
@media (prefers-reduced-motion:reduce){
  .lector-cuerpo .leyendo{ transition:none; }
}