/* ineclec base — tokens y columna comunes. Todo acotado a body.ineclec-on. */
:root {
  --ineclec-primario: var(--inec-marca, #f16645); --ineclec-titulo: #3a4a5e; --ineclec-texto: #444444;
  --ineclec-borde: rgba(0,0,0,.12); --ineclec-hover: #f4f5f6; --ineclec-fondo: #ffffff;
  --ineclec-activo-fondo: var(--inec-marca-suave, #fdece8); --ineclec-activo-color: var(--inec-marca-fuerte, #d9482a); --ineclec-sub: #636363;
  --ineclec-ok: rgb(30 123 52); --ineclec-ok-fondo: rgb(227 246 229);
  --ineclec-mal: #b42318; --ineclec-mal-fondo: #fde7e7;
  --ineclec-tarjeta: #ffffff; --ineclec-tarjeta-borde: rgba(0,0,0,.12);
}
html.inec-oscuro body {
  --ineclec-titulo: #e8eaed; --ineclec-texto: #c9ced4; --ineclec-borde: rgba(255,255,255,.1);
  --ineclec-hover: #2a3340; --ineclec-fondo: #161b22; --ineclec-activo-fondo: var(--inec-marca-suave, #fdece8); --ineclec-sub: #a9b0b8;
  --ineclec-tarjeta: #1f2630; --ineclec-tarjeta-borde: #334050;
  --ineclec-ok-fondo: #0a3614; --ineclec-ok: #a8e0b3;
  --ineclec-mal-fondo: #4a0d08; --ineclec-mal: #fca5a5;
}
body.ineclec-on [data-ineclec-tipo] { max-width: 760px; margin-left: auto; margin-right: auto; }
body.ineclec-on [data-ineclec-tipo="video"],
body.ineclec-on [data-ineclec-tipo="scorm"],
body.ineclec-on [data-ineclec-tipo="articulate"],
body.ineclec-on [data-ineclec-tipo="art-iframe"] { max-width: 1180px; }
/* "Siguiente unidad": el tema pinta el hover con azul; se iguala al naranja INEC. */
body.ineclec-on .course_status .course_content .course_content_content_wrapper .next_curriculum_item:hover { background: var(--ineclec-primario); border-color: var(--ineclec-primario); color: #fff; }
body.ineclec-on .course_status .course_content .course_content_content_wrapper .next_curriculum_item:hover svg { fill: #fff; }

/* ineclec video — mismo reproductor, caja 16:9 a ancho de columna. */
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) :is(iframe[src*="vimeo"], iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[data-src*="vimeo"]) {
  display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
  min-height: 0 !important; max-height: none; border: 0; border-radius: 12px;
}
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) .plyr--vimeo,
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) .plyr__video-embed { min-height: 0 !important; }
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) :is(.udemy-fv-wrap .fp-player, .inec-video__player, .ilc-media video, .ilc-pantalla) {
  width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; min-height: 0 !important; background: #0f172a;
}
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) :is(.video_wrapper, .udemy-fv-wrap, .inec-video, .ilc-media) {
  border-radius: 12px; overflow: hidden; border: .8px solid var(--ineclec-borde); margin: 0 0 32px;
}
/* Temario cerrado: 16:9 a 1180 px pasa del alto de pantalla (645 px desde y=109 en 1366x728).
   Ancho topado por el alto visible (barra + aire) y centrado; Coursera (.ilc-media) no entra. */
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) :is(.video_wrapper, .udemy-fv-wrap, .inec-video) {
  max-width: min(100%, calc((100dvh - 140px) * 16 / 9)); margin-inline: auto;
}
body.ineclec-on :is([data-ineclec-tipo="video"], [data-ineclec-tipo="pi"]) :is(.video_wrapper, .udemy-fv-wrap, .inec-video) :is(.fp-fullscreen, .plyr__control[data-plyr="fullscreen"]) { display: revert; }

/* ineclec texto — Task 4: secciones con CONTINUAR, acordeón, figuras, notas.
   Medidas del mockup (global.md): columna 760, separación bloques 32,
   radios 12/8, borde 0.8, párrafo 16/1.7, h2 22/600, botón CONTINUAR 42/360. */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-seccion { display: flex; flex-direction: column; gap: 32px; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-seccion[hidden] { display: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-oculto { display: none; }
body.ineclec-on [data-ineclec-tipo="texto"] [data-ineclec-texto]:not(.ilc-cuerpo) :is(p, li) { font-size: 16px; line-height: 1.7; color: var(--ineclec-texto); }
/* Cuerpos Coursera (.ilc-cuerpo): solo color de texto, nunca tamaño/interlineado
   (esos ya los fija el tema/Fix #26). El tema gana la pelea de especificidad
   dentro de .ilc-cuerpo, así que aquí hace falta !important (mismo patrón que
   tarea.css/video.css sobre chrome del tema). */
body.ineclec-on [data-ineclec-tipo="texto"] .ilc-cuerpo :is(p, li) { color: var(--ineclec-texto) !important; }
body.ineclec-on [data-ineclec-tipo="texto"] [data-ineclec-texto]:not(.ilc-cuerpo) h2 { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--ineclec-titulo); margin: 8px 0 0; }
body.ineclec-on [data-ineclec-tipo="texto"] [data-ineclec-texto]:not(.ilc-cuerpo) h3 { font-size: 18px; font-weight: 600; color: var(--ineclec-titulo); }
/* Rule 6: rules never apply on Coursera bodies (.ilc-cuerpo). */
body.ineclec-on [data-ineclec-tipo="texto"] [data-ineclec-texto]:not(.ilc-cuerpo) li::marker { color: var(--ineclec-primario); }
body.ineclec-on [data-ineclec-tipo="texto"] [data-ineclec-texto]:not(.ilc-cuerpo) blockquote { border-left: 3px solid var(--ineclec-primario); padding: 8px 0 8px 20px; font-size: 19px; font-style: italic; line-height: 1.6; margin: 0; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-continuar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 12px 0; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-continuar-linea { display: block; width: 100%; height: 1px; background: var(--ineclec-borde); }
/* Fix #21 (TTS): la etiqueta se pinta por CSS, nunca por textContent — el
   botón se queda mudo para firmaDe() aunque cambie de "completado". */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-btn-continuar { width: 100%; max-width: 360px; height: 42px; border: 0; border-radius: 8px; background: var(--ineclec-primario); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .05em; cursor: pointer; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-btn-continuar::before { content: attr(data-ineclec-label); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-btn-continuar.completado { background: var(--ineclec-ok); pointer-events: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon { border: .8px solid var(--ineclec-borde); border-radius: 12px; background: var(--ineclec-tarjeta); overflow: hidden; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-item + .ineclec-acordeon-item { border-top: .8px solid var(--ineclec-borde); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 18px; background: none; border: 0; font-size: 14px; font-weight: 600; color: var(--ineclec-titulo); text-align: left; cursor: pointer; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-btn:hover { background: var(--ineclec-hover); }
/* El encabezado real (h2-h4) se movió entero dentro del botón: se resetea
   para que se vea como texto de botón, no como un h3 anidado. */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-btn :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; flex: 1; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-ico { transition: transform .2s; font-size: 18px; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-ico::before { content: attr(data-ineclec-label); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-item.abierto .ineclec-acordeon-ico { transform: rotate(90deg); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-cuerpo { display: none; padding: 0 18px 16px; font-size: 14px; line-height: 1.6; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon-item.abierto .ineclec-acordeon-cuerpo { display: block; }
/* Rule 3, mitad nativa: details/summary existentes solo reciben estilo,
   compartiendo la misma caja que el acordeón sintético. */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon > details { border: 0; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon > details + details { border-top: .8px solid var(--ineclec-borde); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon > details > summary { padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--ineclec-titulo); cursor: pointer; list-style: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon > details > summary::-webkit-details-marker { display: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon > details[open] > summary { border-bottom: .8px solid var(--ineclec-borde); }
/* N-1: details suelto (no es parte de un grupo real): se estiliza él mismo
   con .ineclec-details, en vez de meter toda la lección en la caja del
   acordeón. Sigue aplicando aunque el sectionado lo mueva a un <section>. */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-details { border: .8px solid var(--ineclec-borde); border-radius: 12px; background: var(--ineclec-tarjeta); overflow: hidden; margin: 0; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-details + .ineclec-details { margin-top: 8px; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-details > summary { padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--ineclec-titulo); cursor: pointer; list-style: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-details > summary::-webkit-details-marker { display: none; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-details[open] > summary { border-bottom: .8px solid var(--ineclec-borde); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-figura { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-figura img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; border: .8px solid var(--ineclec-borde); cursor: zoom-in; background: var(--ineclec-hover); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-figura-desc { font-size: 13px; line-height: 1.5; color: var(--ineclec-sub); text-align: center; margin: 0; }
/* Solo el pie sintetizado desde alt (control, marcado con data-ineclec-label)
   se pinta por CSS; el pie real movido desde la lección conserva su propio
   textContent y no lleva ese atributo, así que esta regla no le afecta. */
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-figura-desc[data-ineclec-label]::before { content: attr(data-ineclec-label); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota { display: flex; gap: 14px; padding: 16px 20px; border: .8px solid var(--ineclec-borde); border-radius: 12px; background: var(--ineclec-hover); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota-ico { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ineclec-primario); color: #fff; font: 700 13px/22px serif; text-align: center; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota-ico::before { content: attr(data-ineclec-label); }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota p { margin: 0; font-size: 14px; line-height: 1.6; }
body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-tabla { overflow-x: auto; }
/* Visor a pantalla completa: fixed inset, fuera de la columna 760. */
.ineclec-visor { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.ineclec-visor img { max-width: 96vw; max-height: 94vh; object-fit: contain; }
@media (max-width: 760px) {
  body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-acordeon,
  body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota,
  body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-figura img { border-radius: 12px; }
  body.ineclec-on [data-ineclec-tipo="texto"] .ineclec-nota { padding: 16px; }
}

/* ineclec quiz.css */
body.ineclec-on [data-ineclec-tipo="quiz"] .xs_social_share_widget { display: none !important; }

/* Tarjeta de pregunta (y panel/portada?) */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg {
  background: var(--ineclec-tarjeta);
  border: 1px solid var(--ineclec-borde);
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg {
    border-radius: 12px;
    padding: 16px;
  }
}

body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ineclec-sub);
  margin-bottom: 12px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-chip {
  background: var(--ineclec-hover);
  color: var(--ineclec-sub);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
}

/* question_actions */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg .question_actions {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg .question_actions > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ineclec-sub);
}
/* Enunciado */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-enunciado {
  font-size: 16px;
  font-weight: 600;
  color: var(--ineclec-titulo);
  line-height: 1.4;
  margin-bottom: 20px;
}

/* Opción */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op {
  position: relative;
  margin-bottom: 10px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--ineclec-borde);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ineclec-texto);
  min-height: 47px;
  cursor: pointer;
  background: var(--ineclec-tarjeta);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op input[type="radio"] {
  position: absolute;
  accent-color: var(--ineclec-primario);
  margin: 0;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op input[type="radio"]:checked + label,
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op:has(input[type="radio"]:checked) label {
  background: var(--ineclec-activo-fondo);
  border-color: var(--ineclec-activo-color);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op:hover label {
  background: var(--ineclec-hover);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op input:focus-visible + label {
  outline: 2px solid var(--ineclec-primario);
}

/* Botones */
body.ineclec-on [data-ineclec-tipo="quiz"] .resetq_answer,
body.ineclec-on [data-ineclec-tipo="quiz"] .bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .check_answer {
  background: var(--ineclec-tarjeta);
  border: 1px solid var(--ineclec-borde);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--ineclec-texto);
  cursor: pointer;
}

/* Paginación (Escritorio y Base Móvil) */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 601px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag {
    background: var(--ineclec-tarjeta);
    border: 1px solid var(--ineclec-borde);
    border-radius: 12px;
    padding: 12px;
    margin-top: 24px;
  }
}

body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ineclec-primario) !important;
  background: transparent !important;
  font-size: 0 !important;
  color: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.prevq {
  margin-right: auto !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.nextq {
  margin-left: auto !important;
}
@media (min-width: 601px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.prevq {
    margin-right: 10px !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.nextq {
    margin-left: 10px !important;
  }
}

body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.active {
  background: var(--ineclec-primario) !important;
  box-shadow: 0 0 0 3px var(--ineclec-tarjeta), 0 0 0 5px var(--ineclec-primario) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.ques_link {
  width: 40px !important;
  height: 40px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ineclec-primario) !important;
  box-sizing: border-box !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.ques_link.prevq {
  border: 2px solid var(--ineclec-primario) !important;
  background: var(--ineclec-tarjeta) !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.ques_link.nextq {
  background: var(--ineclec-primario) !important;
  color: #fff !important;
  border: none !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.faded {
  opacity: 0.35 !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.ques_link i {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Portada */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-portada .ineclec-q-panel,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-portada div.incoursequiz_details,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-portada .ineclec-q-cab,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-portada div.quiz_questions_content {
  display: none !important;
}

body.ineclec-on div.ineclec-q-inicio {
  background: var(--ineclec-tarjeta);
  border: 1px solid var(--ineclec-borde);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

body.ineclec-on div.ineclec-q-inicio-fila1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.ineclec-on span.ineclec-q-inicio-rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ineclec-sub);
}

body.ineclec-on .p-pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

body.ineclec-on .p-pill-ok {
  color: #1e7b34;
  background-color: #e3f6e5;
}

body.ineclec-on .p-pill-borrador {
  color: var(--ineclec-sub);
  background-color: var(--ineclec-hover);
}

body.ineclec-on p.ineclec-q-inicio-instrucciones {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ineclec-texto);
  margin: 0;
}

body.ineclec-on div.ineclec-q-inicio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.ineclec-on span.ineclec-q-inicio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--ineclec-hover);
  color: var(--ineclec-sub);
  font-size: 12px;
  font-weight: 500;
}

body.ineclec-on span.ineclec-q-inicio-chip svg {
  width: 15px;
  height: 15px;
}

body.ineclec-on div.ineclec-q-inicio-btnarea {
  display: flex;
}

body.ineclec-on button.ineclec-q-iniciar {
  background-color: var(--ineclec-primario);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  align-self: flex-start;
}

body.ineclec-on button.ineclec-q-iniciar svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  body.ineclec-on div.ineclec-q-inicio {
    padding: 16px;
    border-radius: 12px;
  }
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-portada .ineclec-q-empezar {
  background: var(--ineclec-primario) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  display: inline-block;
  border: none !important;
}

/* Panel desktop / movil */
@media (min-width: 601px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] {
    max-width: 1040px;
    margin: 0 auto;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.incourse {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
    align-items: start;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.quiz_questions_content {
    grid-column: 1;
    grid-row: 1;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.incoursequiz_details {
    grid-column: 2;
    grid-row: 1;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.loading_quiz {
    grid-column: 1 / -1;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel {
    background: var(--ineclec-tarjeta);
    border: 1px solid var(--ineclec-borde);
    border-radius: 12px;
    padding: 24px;
    position: sticky;
    top: 12px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .save_quiz,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .submit_quiz {
    display: block;
    width: 100%;
    margin: 0 0 8px 0 !important;
    padding: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-align: center;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .submit_quiz {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 600px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--ineclec-tarjeta);
    border-bottom: 1px solid var(--ineclec-borde);
    display: flex;
    flex-direction: row !important; /* WPLMS pone column al panel: reloj y botones en dos filas */
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    height: auto;
    min-height: 48px;
    max-height: 64px;
    box-sizing: border-box;
    overflow: visible;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .react-progress-circle svg,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .timer_unit,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_detail_toggle,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .show_questions,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .timeline_wrapper {
    display: none !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_first_block,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiztimer_wrapper,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiztimer,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .circle_timer,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .incourse_quiz_button {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 0;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .incourse_quiz_button {
    gap: 6px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.timer_amount {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ineclec-titulo);
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.timer_amount > span {
    margin: 0 2px !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .save_quiz,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .submit_quiz {
    white-space: nowrap;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 7px !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .save_quiz {
  background: var(--ineclec-tarjeta) !important;
  border: 1px solid var(--ineclec-borde) !important;
  border-radius: 8px !important;
  color: var(--ineclec-texto) !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .submit_quiz {
  background: var(--ineclec-primario) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
}

/* Vacio */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-vacio .ineclec-q-panel {
  display: none !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-prep-card {
  background: var(--ineclec-tarjeta);
  border: 1px solid var(--ineclec-borde);
  border-radius: 16px;
  padding: 32px 24px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-prep-pill {
  background: var(--ineclec-activo-fondo);
  color: var(--ineclec-activo-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 16px;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-prep-txt {
  font-size: 16px;
  color: var(--ineclec-texto);
}

/* H5P wrapper */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-h5p .new_quiz_h5p_wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-h5p iframe.h5p_quiz {
  width: 100% !important;
  min-height: 0 !important; /* WPLMS pone min-height:1200 a iframes; la altura la fija quiz.js */
}

/* Ajustes Móvil Curso */
@media (max-width: 600px) {
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-cab {
    display: none;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.incourse {
    margin: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-panel {
    margin: 0 0 8px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso div.quiz_questions_content {
    padding: 0;
    margin: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg {
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .question_actions {
    margin: 0 0 6px;
    height: 28px;
    min-height: 28px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-enunciado {
    padding: 0;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-enunciado p {
    margin: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-op {
    margin-bottom: 6px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-op label {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.35;
    min-height: 40px;
    margin: 0;
    gap: 10px;
    box-sizing: border-box;
  }
  
  /* Botones pregunta */
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg .resetq_answer,
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg .bookmark,
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg .check_answer {
    display: inline-flex;
    vertical-align: top;
    margin: 8px 6px 0 0;
    height: 30px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg .check_answer {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  /* Paginador fijo */
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso {
    overflow-x: clip; /* hidden crea contenedor de scroll y el sticky del paginador se ancla aquí */
  }
  
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-pag {
    position: sticky;
    bottom: 0;
    /* course_status mide 100vh (viewport grande); con la barra de URL del móvil visible sobresale 100vh-100dvh bajo la pantalla */
    bottom: calc(100vh - 100dvh);
    z-index: 98;
    background: var(--ineclec-tarjeta);
    border-top: 1px solid var(--ineclec-borde);
    margin: 0 -16px;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    height: 56px;
    box-sizing: border-box;
  }
  
  html[data-inecbarra-movil] body.inecbarra-on.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-pag {
    bottom: 56px;
    bottom: calc(56px + 100vh - 100dvh);
  }
  
  /* Densidad por número de opciones */
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg:has(.ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op) .ineclec-q-enunciado {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg:has(.ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op) .ineclec-q-op label {
    font-size: 13px;
    padding: 6px 10px;
    min-height: 34px;
    line-height: 1.3;
  }
  
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-preg:has(.ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op ~ .ineclec-q-op) .ineclec-q-op {
    margin-bottom: 5px;
  }
}


/* Flechas del paginador: WPLMS las atenúa aunque estén activas */
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-pag span.button.ques_link:not(.faded) {
  opacity: 1 !important;
}

/* H5P: el cuestionario trae su propia cabecera; sin tarjeta EVALUACIÓN */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-h5p .ineclec-q-cab {
  display: none !important;
}

/* Ajuste mockup: iconos, colores, compactar, panel naranja */

/* 1. Iconos marks/flag y question_actions */
body.ineclec-on [data-ineclec-tipo="quiz"] .question_actions,
body.ineclec-on [data-ineclec-tipo="quiz"] div.question_actions {
  font-size: 15px;
  height: auto;
  min-height: 0;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.ineclec-on [data-ineclec-tipo="quiz"] span.marks,
body.ineclec-on [data-ineclec-tipo="quiz"] span.flag,
body.ineclec-on [data-ineclec-tipo="quiz"] span.marks i,
body.ineclec-on [data-ineclec-tipo="quiz"] span.flag i {
  font-size: 15px;
  line-height: 1;
  color: var(--ineclec-sub);
}
body.ineclec-on [data-ineclec-tipo="quiz"] span.marks {
  font-size: 13px;
  font-weight: 600;
  color: var(--ineclec-sub);
}
body.ineclec-on [data-ineclec-tipo="quiz"] span.marks i {
  font-size: 15px;
  line-height: 1;
  color: var(--ineclec-sub);
}
body.ineclec-on [data-ineclec-tipo="quiz"] span.flag {
  cursor: pointer;
}
body.ineclec-on [data-ineclec-tipo="quiz"] span.flag:hover,
body.ineclec-on [data-ineclec-tipo="quiz"] span.flag:hover i {
  color: var(--ineclec-primario);
}

/* 2. Colores de fuente */
body.ineclec-on [data-ineclec-tipo="quiz"] {
  color: var(--ineclec-texto);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-enunciado {
  color: var(--ineclec-titulo);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-rotulo,
body.ineclec-on [data-ineclec-tipo="quiz"] .question_actions > span {
  color: var(--ineclec-sub);
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.timer_amount,
body.ineclec-on [data-ineclec-tipo="quiz"] span.timer_amount {
  color: var(--ineclec-titulo);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.timer_unit,
body.ineclec-on [data-ineclec-tipo="quiz"] span.timer_unit {
  font-size: 11px;
  color: var(--ineclec-sub);
}

/* 3. Compactar espacios muertos en escritorio (min-width: 601px) */
@media (min-width: 601px) {
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg {
    padding: 24px;
    margin-bottom: 16px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-preg .question_actions {
    margin: 0 0 12px !important; /* WPLMS pone 16px -5px */
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-enunciado {
    padding: 0 !important;
    margin: 0 0 16px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-op {
    margin-bottom: 8px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_first_block,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiztimer_wrapper,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .incourse_quiz_button,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .show_questions {
    margin: 0 !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 !important;
  }

  /* 4. Panel del reloj no se tapa con la barra superior en escritorio */
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel {
    z-index: 5 !important;
  }
  body.inecbarra-on.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel {
    top: 68px;
    z-index: 5 !important;
  }

  /* 5. Panel naranja minimalista (escritorio) */
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel circle.ReactProgressCircle_circle {
    stroke: var(--ineclec-primario) !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel circle.ReactProgressCircle_circleBackground {
    stroke: var(--ineclec-borde) !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.show_questions,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.hide_questions,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .show_questions {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ineclec-primario);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.show_questions span.vicon,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel span.hide_questions span.vicon,
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .show_questions span.vicon {
    font-size: 14px;
    color: var(--ineclec-primario);
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline ul > li {
    min-width: 40px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    border: 0.8px solid var(--ineclec-borde) !important;
    background: var(--ineclec-tarjeta) !important;
    color: var(--ineclec-sub) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline ul > li span {
    display: none !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline ul > li.active {
    background: var(--ineclec-activo-fondo) !important;
    color: var(--ineclec-activo-color) !important;
    border-color: var(--ineclec-activo-color) !important;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"] .ineclec-q-panel .quiz_timeline ul > li:hover {
    border-color: var(--ineclec-primario) !important;
  }
}

/* En curso: fuera la cabecera "EVALUACIÓN · 30 minutos" también en escritorio (la barra superior ya muestra título y duración) */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-cab {
  display: none;
}
@media (min-width: 601px) {
  /* Hueco sobre la 1a pregunta: wrapper margin-top 24 + padding-top 12 del contenedor → 16px bajo la barra */
  body.ineclec-on .course_content_content_wrapper:has(> [data-ineclec-tipo="quiz"].ineclec-q-curso) {
    margin-top: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso {
    padding-top: 0;
  }
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso .ineclec-q-panel {
    margin-top: 8px; /* alinea con la tarjeta (quiz_questions_content lleva margin 8) */
  }
}

/* Resultados del quiz (tras enviar): estilo mockup */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_first_block {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  background: transparent !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_first_block > strong {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 8px !important;
  margin: 0 !important;
  color: var(--ineclec-titulo) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) span.student_score {
  font-size: 28px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ineclec-titulo) !important;
  line-height: 1 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_first_block > strong > span:not(.student_score):not(.student_quiz_status) {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--ineclec-activo-fondo) !important;
  color: var(--ineclec-activo-color) !important;
  line-height: normal !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) span.student_quiz_status {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ineclec-sub) !important;
  flex-basis: 100% !important;
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small {
  margin: 0 !important;
  display: flex !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small a.button.tip {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  background: var(--ineclec-tarjeta) !important;
  border: 1px solid var(--ineclec-borde) !important;
  color: var(--ineclec-sub) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small a.button.tip:first-child {
  border-radius: 8px 0 0 8px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small a.button.tip:last-child {
  border-radius: 0 8px 8px 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small a.button.tip .vicon {
  color: inherit !important;
  font-size: 14px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.buttons.has-addons.small a.button.tip:hover {
  border-color: var(--ineclec-primario) !important;
  color: var(--ineclec-primario) !important;
  background: var(--ineclec-tarjeta) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.quiz_retake {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) a.retake_quiz {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: var(--ineclec-primario) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: normal !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-align: center !important;
  flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; line-height: 1.3 !important; /* WPLMS lo estira a 180px */
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) a.retake_quiz:hover {
  filter: brightness(0.95) !important;
  background: var(--ineclec-primario) !important;
  color: #ffffff !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.quiz_retake > strong,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_retake strong {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ineclec-sub) !important;
  margin: 0 !important;
}

/* Gráfica de estadísticas */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.quiz_stats_chart {
  background: var(--ineclec-tarjeta) !important;
  border: 1px solid var(--ineclec-borde) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.quiz_stats_chart_pie {
  max-width: 240px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .question_stats_content_wrapper {
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .question_stats_content_heading {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ineclec-sub) !important;
  margin: 0 0 12px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_stats_content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_stats_content > div.checked_answer {
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--ineclec-hover) !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ineclec-sub) !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_stats_content > div.checked_answer span {
  margin: 0 2px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_stats_content > div.checked_answer span:first-child {
  font-weight: 600 !important;
  color: var(--ineclec-titulo) !important;
}

/* Revisión por pregunta */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.ineclec-q-op.question_correct,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.ineclec-q-op.question_incorrect,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_option.question_correct,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_option.question_incorrect {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .question_correct > label {
  border-color: #1e7b34 !important;
  background: #e8f5ec !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .question_incorrect > input:checked + label {
  border-color: #c0392b !important;
  background: #fdecea !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .ineclec-q-preg div.checked_answer {
  margin: 12px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: #e8f5ec !important;
  border: 0 !important;
  border-left: 3px solid #1e7b34 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ineclec-texto) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .ineclec-q-preg div.checked_answer strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e7b34 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .ineclec-q-preg div.checked_answer div {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ineclec-texto) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.explanation {
  margin: 12px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: var(--ineclec-hover) !important;
  border: 0 !important;
  font-size: 14px !important;
  color: var(--ineclec-texto) !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.explanation strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ineclec-titulo) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.explanation p {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Insignia por pregunta */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper {
  pointer-events: none !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result {
  position: absolute !important;
  top: 24px !important;
  right: 88px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
  pointer-events: none !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result > div.correct,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result > div.incorrect,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .correct,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .incorrect {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result span {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .incorrect span {
  background: #c0392b !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .correct span {
  background: #1e7b34 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result span::before,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result span::after,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result span svg,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result span i {
  display: none !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  margin: 0 !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .incorrect strong {
  color: #c0392b !important;
}

body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result .correct strong {
  color: #1e7b34 !important;
}

/* Móvil: panel y ajustes <=600px */
@media (max-width: 600px) {
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .ineclec-q-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ineclec-borde) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    top: auto !important;
  }

  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_first_block {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_timeline,
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .incourse_quiz_button,
  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_retake {
    width: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.quiz_stats_chart {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) div.question_wrapper .result {
    right: 76px !important;
    top: 22px !important;
  }
}

/* Resultados: fuera el hueco de la gráfica (WPLMS fija alto al pastel y a la lista de %) */
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .quiz_stats_chart_pie,
body.ineclec-on [data-ineclec-tipo="quiz"].ineclec-q-curso:has(.student_score) .question_stats_content_wrapper {
  flex: 0 0 auto !important; /* WPLMS: flex 1 0 240px / 2 0 480px en columna = alto fijo */
  height: auto !important;
  min-height: 0 !important;
}

/* ineclec tarea — panel del mockup renderTarea. Convive con Fix #27 (min-width:0).
   Task 8: el PI (data-ineclec-tipo="pi") reusa este panel via tarea.js -> mismos selectores. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-panel { background: var(--ineclec-tarjeta); border: .8px solid var(--ineclec-borde); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; font-size: 15px; line-height: 1.6; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-drop { display: block; border: 2px dashed var(--ineclec-borde); border-radius: 12px; padding: 32px 16px; background: var(--ineclec-hover); text-align: center; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-drop:hover { border-color: var(--ineclec-primario); background: var(--ineclec-activo-fondo); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-texto { box-sizing: border-box; width: 100%; min-height: 96px; border: .8px solid var(--ineclec-borde); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-enviar { align-self: flex-start; padding: 12px 24px; border-radius: 8px; background: var(--ineclec-primario) !important; border-color: var(--ineclec-primario) !important; color: #fff !important; font-size: 14px; font-weight: 600; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-iniciar { align-self: flex-start; height: auto; line-height: 1.3; padding: 12px 24px; border-radius: 8px; background: var(--ineclec-primario) !important; border-color: var(--ineclec-primario) !important; color: #fff !important; font-size: 14px; font-weight: 600; background-image: none !important; box-shadow: none !important; text-decoration: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-iniciar:hover { filter: brightness(.95); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tabla { display: block; overflow-x: auto; border-collapse: collapse; border-radius: 12px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tabla th { font-size: 12px; font-weight: 600; text-transform: uppercase; background: var(--ineclec-hover); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tabla :is(td, th) { padding: 12px 14px; border-bottom: .8px solid var(--ineclec-borde); }
@media (max-width: 760px) { body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-panel { padding: 16px; border-radius: 12px; } }
/* Hijos del panel flex: sin min-width:0 el .inec-doc del PI tomaba su min-content (palabra de titulo gigante, 359px) y se cortaba en 277px (PI 83057 movil en vivo). */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-panel > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Movil: WPLMS anida 3 cajas de 16px (unit_assignments + 2 assignment_content_wrapper) y el texto quedaba en 179/375 px (pi 106790 en vivo). */
@media (max-width: 760px) { body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) :is(.unit_assignments, .assignment_content_wrapper) { padding-left: 0 !important; padding-right: 0 !important; } }
/* Barra Draft.js: sus filas (div sin clase, flex nowrap, ~351px) desbordaban el movil. Clases con hash -> [class*=]. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) :is(.assignment, .course_assignment) [class*="draftJsToolbar__toolbar"] { box-sizing: border-box; width: 100%; max-width: 100%; }

/* Task 4-D1.1: borde naranja solo en el bloque de introducción y fila de
   datos clave. Valores exactos del mockup docs/mockups/ineclec-tarea/
   index.html #d1 (.d1-facts/.d1-fact*): escritorio icono13/texto13/gap14,
   movil icono13/texto14/gap12. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-intro { border-left: 3px solid var(--ineclec-primario); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-cab { display: flex; justify-content: space-between; align-items: center; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-kicker { font-size: 12px; font-weight: 800; color: var(--ineclec-sub); letter-spacing: 0.5px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-pill--pendiente { background: #fff3cd; color: #856404; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-details-oculto { display: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-facts { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact svg { width: 13px; height: 13px; flex: none; color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact-val { font-size: 13px; font-weight: 600; color: var(--ineclec-titulo); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact-lbl { font-size: 13px; font-weight: 400; color: var(--ineclec-sub); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact--warn svg,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact--warn .ineclec-t-fact-val { color: var(--ineclec-mal); }
@media (max-width: 480px) {
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-facts { flex-wrap: wrap; gap: 12px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact-val,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fact-lbl { font-size: 14px; }
}

/* Task 4-D1.1b: línea de empresa/caso (solo cuando se detecta un patrón real). */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-caso-origen { display: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-inst-lbl { font-size: 16px; font-weight: 600; color: var(--ineclec-titulo); margin: 0 0 8px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-bloque-inst { border-left: 3px solid var(--ineclec-primario); padding-left: 14px; margin: 0 0 16px; }
/* El hero del PI es un <header>: WPLMS oculta todo header en .course_status_fullscreen/.vibebp_my_profile y le da fondo oscuro + z-index 999 (header.min.css). */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) header.ineclec-t-bloque-inst { display: block !important; position: static; z-index: auto; width: auto; background: none; }
/* PI: el panel es flex con gap 20 y cabecera, label y hero son hijos directos: sin esto quedan ~80 px vacíos (div.inec-pi vacío también cobra gap). Espaciado como D1. */
body.ineclec-on .ineclec-t-panel:has(> .ineclec-t-bloque-inst) > .inec-pi:empty { display: none; }
body.ineclec-on .ineclec-t-panel:has(> .ineclec-t-bloque-inst) > .ineclec-t-intro { margin-bottom: 0; }
body.ineclec-on .ineclec-t-panel:has(> .ineclec-t-bloque-inst) > .ineclec-t-inst-lbl { margin-bottom: -12px; }
body.ineclec-on .ineclec-t-panel:has(> .ineclec-t-bloque-inst) > .ineclec-t-bloque-inst { margin-bottom: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-kicker-unidad { font-size: 15px; font-weight: 800; color: var(--ineclec-titulo); text-transform: uppercase; margin: 0 0 8px; display: block; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-caso { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ineclec-titulo); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-caso li { display: flex; align-items: flex-start; gap: 8px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-caso svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-caso em { font-style: normal; font-size: 15px; }

/* Task 4-D1.2: acordeón de secciones. Base común de pi-acc-* del mockup:
   borde + radio + borde izquierdo naranja solo si está abierto, título naranja
   si está abierto / --ineclec-titulo si no. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-item { border: 1px solid var(--ineclec-borde); border-radius: 10px; border-left: 3px solid transparent; overflow: hidden; margin: 0 0 10px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-item.abierto { border-left-color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; font-weight: 800; color: var(--ineclec-titulo); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-item.abierto .ineclec-t-acc-head { color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-h { margin: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-oculto { display: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-body { padding: 0 14px 14px; display: none; font-size: 15px; line-height: 1.6; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-item.abierto .ineclec-t-acc-body { display: block; }

/* Movil (<=480px): mismo acordeón que escritorio, sin revelado progresivo
   ("Continuar"/"Sección N de M"): tareas y PI ya pliegan por sección.
   Tipografía uniforme 15px texto / 18px títulos, según el mockup. */
@media (max-width: 480px) {
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-head { font-size: 18px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-acc-body { font-size: 15px; line-height: 1.5; }
}

/* Task 4-D1.3: tablas de 2 columnas -> tarjetas (movil). La columna "Peso" se
   pinta como pastilla, igual que table.pi-rubrica td[data-label="Peso"] del
   mockup. Tablas de mas columnas conservan el scroll horizontal existente. */
@media (max-width: 480px) {
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card { display: block; overflow: visible; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card thead { display: none; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card tbody,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card tr { display: block; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card tr { border: 1px solid var(--ineclec-borde); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card td { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border: none; font-size: 14px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card .ineclec-t-celda-label { display: none; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card td:not(:first-child) > .ineclec-t-celda-label { display: inline; font-weight: 600; color: var(--ineclec-sub); }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) table.ineclec-t-tabla--card td.ineclec-t-tabla-peso { display: inline-flex; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--ineclec-activo-fondo); color: var(--ineclec-activo-color); font-weight: 600; }
}

/* Task: Barra de herramientas D1 */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 9px 12px; background: var(--ineclec-tarjeta); border: 1px solid var(--ineclec-borde); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb.ineclec-t-tb-abierta { flex-wrap: wrap; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-fila { display: contents !important; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb:not(.ineclec-t-tb-abierta) .ineclec-t-tb-extra,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb:not(.ineclec-t-tb-abierta) .fix_toolbar { display: none !important; }

/* Botones y orden */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-negrita { order: 1; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-cursiva { order: 2; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado { order: 3; margin-right: 14px; position: relative; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--ineclec-borde); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-alin-izq { order: 5; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-alin-centro { order: 6; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-alin-der { order: 7; }
/* Separador tras alineaciones: alin-der no tiene envoltura y su ::after es el icono, asi que va en el ::before de vinetas. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas { margin-left: 14px; position: relative; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--ineclec-borde); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas { order: 9; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-numerada { order: 10; margin-right: auto; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-enlace { order: 12; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-imagen { order: 13; margin-right: 14px; position: relative; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-imagen::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--ineclec-borde); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tbmas { order: 15; width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: none; border: none; cursor: pointer; padding: 0; color: var(--ineclec-texto); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-extra { order: 99; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tbmas:hover { background: var(--ineclec-hover); color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tbmas svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-"]:not(.ineclec-t-tb-extra) { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: none; border: none; padding: 0; cursor: pointer; box-sizing: border-box; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: none; border: none; padding: 0; cursor: pointer; box-sizing: border-box; color: var(--ineclec-texto); font-size: 13px; font-weight: 700; margin: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-btn-inner"] { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; box-sizing: border-box; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-"]:not(.ineclec-t-tb-extra):hover { background: var(--ineclec-hover); }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra:hover { background: var(--ineclec-hover); color: var(--ineclec-primario); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra .ineclec-t-tb-btn-inner,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra.ineclec-t-tb-btn-inner { color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra svg { width: 17px; height: 17px; color: currentcolor; }

/* SVG Nativo Oculto */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-btn-inner"] svg,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-btn-inner"] span,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-btn-inner"]::before { display: none !important; content: none !important; }

/* Mostrar en extras */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra [class*="ineclec-t-tb-btn-inner"] svg,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra.ineclec-t-tb-btn-inner svg { display: block !important; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra [class*="ineclec-t-tb-btn-inner"] span,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra.ineclec-t-tb-btn-inner span { display: inline !important; }

/* Iconos via mask */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-btn-inner::after { content: ""; display: block; width: 17px; height: 17px; background-color: var(--ineclec-texto); mask-size: contain; mask-position: center; mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra [class*="ineclec-t-tb-btn-inner"]::after,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra.ineclec-t-tb-btn-inner::after { content: none !important; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-"]:not(.ineclec-t-tb-extra):hover .ineclec-t-tb-btn-inner::after,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-btn-inner:not(.ineclec-t-tb-extra):hover::after { background-color: var(--ineclec-primario); }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-negrita .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M6 4h6.5a3.5 3.5 0 0 1 0 7H6z"/><path d="M6 11h7.5a3.5 3.5 0 0 1 0 7H6z"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-cursiva .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) :is(.ineclec-t-tb-alin-izq .ineclec-t-tb-btn-inner, .ineclec-t-tb-alin-izq.ineclec-t-tb-btn-inner)::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) :is(.ineclec-t-tb-alin-centro .ineclec-t-tb-btn-inner, .ineclec-t-tb-alin-centro.ineclec-t-tb-btn-inner)::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="21" y1="6" x2="3" y2="6"/><line x1="17" y1="12" x2="7" y2="12"/><line x1="19" y1="18" x2="5" y2="18"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) :is(.ineclec-t-tb-alin-der .ineclec-t-tb-btn-inner, .ineclec-t-tb-alin-der.ineclec-t-tb-btn-inner)::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="9" y2="12"/><line x1="21" y1="18" x2="7" y2="18"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r="1"/><circle cx="3.5" cy="12" r="1"/><circle cx="3.5" cy="18" r="1"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-numerada .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M4.5 14h2.4c.9 0 1.1 1.2.3 1.7L4.5 18h2.9"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-enlace .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>'); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-imagen .ineclec-t-tb-btn-inner::after { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>'); }

@media (max-width: 760px) {
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb { padding: 7px 8px; gap: 1px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb [class*="ineclec-t-tb-"]:not(.ineclec-t-tb-extra),
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb .ineclec-t-tb-extra,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tbmas { width: 27px; height: 27px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado::after,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-imagen::after { right: -6px; height: 16px; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-imagen { margin-right: 11px; }
  
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb:not(.ineclec-t-tb-abierta) .ineclec-t-tb-alin-izq,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb:not(.ineclec-t-tb-abierta) .ineclec-t-tb-alin-centro,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb:not(.ineclec-t-tb-abierta) .ineclec-t-tb-alin-der { display: none !important; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado::after,
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas::before { display: none; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-vinetas { margin-left: 0; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-subrayado { margin-right: auto; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-numerada { margin-right: 11px; position: relative; }
  body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tb-numerada::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--ineclec-borde); }
}

/* Task: tarjeta unificada D1 */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta { background: var(--ineclec-tarjeta); border: .8px solid var(--ineclec-borde); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 760px) { body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta { padding: 16px; overflow-x: hidden; } }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta .ineclec-t-panel { background: none; border: none; border-radius: 0; padding: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta :is(.assignment_content_wrapper, .course_assignment_wrapper, .course_assignment) { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .upload_assignment,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .uploader,
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) label.upload_file:not(.ineclec-t-drop) { border: none !important; background: none !important; outline: none !important; padding: 0 !important; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-cabecera { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 !important; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-cabecera > span { font-size: 16px; font-weight: 600; color: var(--ineclec-titulo); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-cabecera .assignment_meta { margin: 0; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-cabecera .assignment_meta a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--ineclec-borde); border-radius: 50%; color: var(--ineclec-sub); font-size: 12px; text-decoration: none; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-resp-lbl { font-size: 13px; font-weight: 600; color: var(--ineclec-titulo); margin: 16px 0 8px; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-respuesta { border: none; overflow: visible; display: flex; flex-direction: column; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-respuesta .ineclec-t-texto { border: 1px solid var(--ineclec-borde); border-radius: 10px; background: var(--ineclec-tarjeta); }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-ext { font-size: 12px; color: var(--ineclec-sub); margin: 0; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta .ineclec-t-enviar { align-self: stretch; text-align: center; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta .ineclec-t-iniciar { align-self: stretch; display: block; text-align: center; }

body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .unit_assignments > h3 { display: none !important; }
/* Vivo: el gris entre tarjetas es .unit_assignments (bg rgba(0,0,0,.08) + padding 16) y .assignment_attachments vacio pinta una caja de 18 px con borde. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .unit_assignments:has(> .ineclec-t-tarjeta) { background: none !important; padding: 0 !important; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-tarjeta .assignment_attachments:empty { display: none; }
/* Vivo: .vibe_editor de WPLMS pinta un marco (borde 1px + padding 10) alrededor de barra y campo; en D1 cada uno lleva su caja. */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .ineclec-t-respuesta .vibe_editor { border: none !important; padding: 0 !important; background: none !important; }

/* ineclec tarea — soporte acordeones .inec-doc */
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc { width: 100%; max-width: 100%; box-sizing: border-box; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc pre { max-width: 100%; box-sizing: border-box; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec hr { display: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec h3 { color: var(--ineclec-titulo); font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec :is(ul, ol) { margin: 0 0 14px; padding-left: 20px; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec li { margin: 4px 0; color: inherit; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec li::marker { color: inherit; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; border-radius: 12px; margin: 0 0 16px; font-size: 14px; border: none; }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec th { font-size: 12px; font-weight: 600; text-transform: uppercase; background: var(--ineclec-hover); color: var(--ineclec-titulo); padding: 12px 14px; border: none; border-bottom: .8px solid var(--ineclec-borde); }
body.ineclec-on :is([data-ineclec-tipo="tarea"],[data-ineclec-tipo="pi"]) .inec-doc .ineclec-t-sec td { padding: 12px 14px; border: none; border-bottom: .8px solid var(--ineclec-borde); color: inherit; }


/* ineclec embebidos: Task 7 */

/* ineclec coursera — artefactos generados (pi.py, escritor.py, plan.py). */
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(p, ul, ol, h2, h3, table, pre, blockquote) { font-size: 16px; line-height: 1.7; color: var(--ineclec-texto); margin-block: 24px 0; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-hero:not(.ineclec-t-panel *) { border: .8px solid var(--ineclec-borde); border-radius: 16px; padding: 28px 24px; background: var(--ineclec-tarjeta); }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-kicker:not(.ineclec-t-panel *) { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ineclec-sub); margin: 0 0 8px; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-caso:not(.ineclec-t-panel *) { font-size: 28px; font-weight: 600; line-height: 1.25; color: var(--ineclec-titulo); margin: 0 0 8px; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-lema:not(.ineclec-t-panel *) { font-size: 15px; color: var(--ineclec-sub); }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-hero:not(.ineclec-t-panel *) blockquote { border-left: 3px solid var(--ineclec-primario); padding: 8px 0 8px 20px; margin: 16px 0 0; font-size: 17px; font-style: italic; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ h2 { font-size: 22px; font-weight: 600; color: var(--ineclec-titulo); margin: 32px 0 0; margin-block: 32px 0; padding-top: 24px; border-top: .8px solid var(--ineclec-borde); }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ table:not(form):not(:has(textarea, input, button)),
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(div, section):not(form):not(:has(textarea, input, button)) table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ table:not(form):not(:has(textarea, input, button)) :is(td, th),
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(div, section):not(form):not(:has(textarea, input, button)) table :is(td, th) { padding: 10px 12px; border-bottom: .8px solid var(--ineclec-borde); vertical-align: top; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ table:not(form):not(:has(textarea, input, button)) th,
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(div, section):not(form):not(:has(textarea, input, button)) table th { background: var(--ineclec-hover); font-size: 12px; text-transform: uppercase; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ pre,
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(div, section):not(form):not(:has(textarea, input, button)) pre { overflow-x: auto; background: var(--ineclec-hover); border-radius: 8px; padding: 12px 14px; font-size: 13px; }
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(ul, ol):not(form):not(:has(textarea, input, button)) li::marker,
body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi:not(.ineclec-t-panel *) ~ :is(div, section):not(form):not(:has(textarea, input, button)) :is(ul, ol) li::marker,
body.ineclec-on [data-ineclec-tipo="dialogo"] .ind-objetivos li::marker,
body.ineclec-on [data-ineclec-tipo="briefing"] .inec-actividad-brief li::marker { color: var(--ineclec-primario); }
body.ineclec-on [data-ineclec-tipo="briefing"] .inec-actividad-brief { border: .8px solid var(--ineclec-borde); border-radius: 12px; padding: 20px 24px; background: var(--ineclec-hover); font-size: 15px; line-height: 1.6; }
body.ineclec-on [data-ineclec-tipo="briefing"] .inec-actividad-brief h4,
body.ineclec-on [data-ineclec-tipo="dialogo"] .inec-dialogo > h4 { font-size: 15px; font-weight: 600; color: var(--ineclec-titulo); margin: 16px 0 6px; }
body.ineclec-on [data-ineclec-tipo="dialogo"] .ind-bienvenida { font-size: 17px; line-height: 1.7; color: var(--ineclec-texto); }
body.ineclec-on [data-ineclec-tipo="preparando"] :is(.inec-quiz-preparando, .inec-actividad-preparando) { display: flex; align-items: center; gap: 12px; border: .8px solid var(--ineclec-borde); border-style: solid; border-radius: 12px; padding: 16px 20px; background: var(--ineclec-hover); color: var(--ineclec-sub); font-size: 14px; }
body.ineclec-on [data-ineclec-tipo="preparando"] :is(.inec-quiz-preparando, .inec-actividad-preparando)::before { content: ""; flex: 0 0 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ineclec-borde); border-top-color: var(--ineclec-primario); animation: ineclec-giro 1s linear infinite; }
@keyframes ineclec-giro { to { transform: rotate(360deg); } }
@media (max-width: 760px) { body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-hero:not(.ineclec-t-panel *) { padding: 16px; border-radius: 12px; } body.ineclec-on [data-ineclec-tipo="pi"] .inec-pi-caso:not(.ineclec-t-panel *) { font-size: 22px; } }