/* Panel docente de MateAventura: interfaz clara y sobria para trabajar con datos. */

:root {
  --fondo: #f4f2fa;
  --tarjeta: #fff;
  --texto: #24223a;
  --suave: #6b6884;
  --borde: #e4e0f0;
  --primario: #6c4ff0;
  --primario-osc: #5236d6;
  --radio: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Nunito', system-ui, sans-serif; background: var(--fondo); color: var(--texto); font-size: 15px; }
h1, h2, h3, .marca-docente { font-family: 'Fredoka', system-ui, sans-serif; }
a { color: var(--primario); }

/* ---------- Barra superior ---------- */
.barra-docente { position: sticky; top: 0; z-index: 20; background: #241c4f; color: #fff; }
.barra-docente-contenido { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.marca-docente { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 600; color: #fff; text-decoration: none; }
.marca-docente img { width: 36px; height: 36px; border-radius: 50%; }
.marca-docente small { background: #ffd23f; color: #3a2a00; border-radius: 999px; padding: 1px 10px; font-size: .75rem; }
.pestanas { display: flex; gap: 4px; margin-left: 20px; flex: 1; }
.pestana { color: #d6d0f7; text-decoration: none; padding: 8px 14px; border-radius: 10px; font-weight: 700; }
.pestana.activa, .pestana:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.usuario-docente { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.boton-salir { background: none; border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; }

.contenedor-docente { max-width: 1200px; margin: 0 auto; padding: 22px 20px 60px; }
.titulo-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo-seccion h1 { margin: 0; font-size: 1.7rem; }
.titulo-seccion p { margin: 2px 0 0; color: var(--suave); }

.tarjeta-d { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; }

/* ---------- Botones ---------- */
.btn { font: 700 .9rem 'Nunito', sans-serif; border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer; background: var(--primario); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--primario-osc); }
.btn.sec { background: #fff; color: var(--primario); border: 1px solid var(--borde); }
.btn.sec:hover { background: #f4f0ff; }
.btn.chico { padding: 6px 10px; font-size: .82rem; }

/* ---------- Resumen y filtros ---------- */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dato { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.dato b { display: block; font-family: 'Fredoka', sans-serif; font-size: 1.8rem; line-height: 1.1; }
.dato small { color: var(--suave); }
button.dato { text-align: left; cursor: pointer; font: inherit; color: inherit; border-left: 6px solid var(--g); }
button.dato.activo { box-shadow: 0 0 0 3px var(--g); background: var(--gf); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--suave); }
.filtros input, .filtros select { font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; min-width: 150px; }
.filtros input[type="search"] { min-width: 220px; }

.diseno-estudiantes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .diseno-estudiantes { grid-template-columns: 1fr; } }

/* ---------- Ranking ---------- */
.tabla-ranking { width: 100%; border-collapse: collapse; }
.tabla-ranking th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); padding: 8px 8px; border-bottom: 2px solid var(--borde); cursor: pointer; white-space: nowrap; }
.tabla-ranking th.orden::after { content: ' ▼'; }
.tabla-ranking td { padding: 9px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-ranking tr:hover td { background: #faf8ff; }
.puesto { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; width: 36px; text-align: center; }
.estudiante { display: flex; align-items: center; gap: 10px; }
.estudiante img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--borde); }
.estudiante b { display: block; }
.estudiante small { color: var(--suave); }
.barra-mini { display: inline-block; width: 90px; height: 8px; background: #ece8f7; border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.barra-mini span { display: block; height: 100%; border-radius: 99px; }
.insignia-grupo { display: inline-block; white-space: nowrap; font-size: .8rem; font-weight: 700; color: var(--g); background: var(--gf); padding: 3px 10px; border-radius: 999px; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
.vacio { text-align: center; color: var(--suave); padding: 30px; }
.scroll-x { overflow-x: auto; }

/* ---------- Columnas laterales ---------- */
.lateral { display: flex; flex-direction: column; gap: 16px; }
.lateral h3 { margin: 0 0 10px; font-size: 1.1rem; }
.lista-corta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-corta li { display: flex; align-items: center; gap: 10px; }
.lista-corta img { width: 32px; height: 32px; border-radius: 50%; }
.lista-corta .info { flex: 1; min-width: 0; }
.lista-corta .info small { display: block; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medalla { font-size: 1.3rem; width: 26px; text-align: center; }
.fila-pensamiento { display: grid; grid-template-columns: 22px 1fr 100px 36px; gap: 8px; align-items: center; margin: 8px 0; font-size: .88rem; }
.fila-pensamiento .barra-mini { width: 100%; }
.icono-p { display: inline-block; flex-shrink: 0; }
.icono-p svg { width: 100%; height: 100%; display: block; }

/* ---------- Ficha del estudiante (ventana) ---------- */
.capa-docente { position: fixed; inset: 0; z-index: 50; background: rgba(20, 15, 50, .45); display: flex; justify-content: flex-end; }
.ficha { width: min(560px, 100%); height: 100%; overflow-y: auto; background: #fff; padding: 22px; box-shadow: -10px 0 30px rgba(0, 0, 0, .2); }
.ficha-cabecera { display: flex; align-items: center; gap: 14px; }
.ficha-cabecera img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--borde); }
.ficha-cabecera h2 { margin: 0; }
.ficha-cabecera .cerrar-ficha { margin-left: auto; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--suave); }
.ficha h3 { margin: 20px 0 8px; font-size: 1.05rem; }
.mini-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.mini-datos div { background: var(--fondo); border-radius: 12px; padding: 8px; text-align: center; }
.mini-datos b { display: block; font-family: 'Fredoka', sans-serif; font-size: 1.3rem; }
.mini-datos small { color: var(--suave); font-size: .75rem; }
.fila-mundo { display: grid; grid-template-columns: 1fr 110px 50px; gap: 8px; align-items: center; margin: 6px 0; font-size: .9rem; }
.fila-mundo .barra-mini { width: 100%; }
.lista-temas { list-style: none; padding: 0; margin: 0; }
.lista-temas li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--borde); font-size: .9rem; }
.lista-temas li span.porc { margin-left: auto; font-weight: 800; }

/* ---------- Mundos y temas ---------- */
.rejilla-mundos { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 16px; }
@media (max-width: 600px) { .rejilla-mundos { grid-template-columns: 1fr; } }
.mundo-d { border-top: 6px solid var(--m); }
.mundo-d h2 { margin: 0; font-size: 1.25rem; color: var(--m); }
.mundo-d .sub { margin: 2px 0 10px; color: var(--suave); font-size: .9rem; }
.tabla-temas { width: 100%; border-collapse: collapse; }
.tabla-temas td { padding: 7px 6px; border-bottom: 1px solid var(--borde); font-size: .9rem; vertical-align: middle; }
.tabla-temas .n { font-family: 'Fredoka', sans-serif; color: var(--suave); width: 28px; }
.tabla-temas .p { width: 30px; }
.tabla-temas .stats { color: var(--suave); font-size: .8rem; white-space: nowrap; text-align: right; }
.tabla-temas a { text-decoration: none; font-weight: 700; color: var(--texto); }
.tabla-temas a:hover { color: var(--primario); text-decoration: underline; }
.leyenda-p { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: .88rem; }
.leyenda-p span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Tema: contenido y solucionario ---------- */
.cabecera-tema { display: flex; gap: 14px; align-items: center; }
.cabecera-tema .icono-p { width: 48px; height: 48px; }
.cabecera-tema h1 { margin: 0; font-size: 1.6rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.etiqueta-d { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--fondo); }
.diapos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.diapo-d h3 { margin: 0 0 8px; color: var(--primario-osc); }
.diapo-d .ej { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #f4f0ff; border-left: 5px solid var(--primario); font-weight: 600; }
.pregunta-d { break-inside: avoid; }
.pregunta-d .num-p { font-family: 'Fredoka', sans-serif; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primario); color: #fff; margin-right: 8px; }
.pregunta-d .tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 800; }
.pregunta-d .enunciado { font-size: 1.05rem; font-weight: 700; margin: 6px 0 10px; }
.visual-d { display: flex; justify-content: center; margin: 8px 0; }
.visual-d .figura, .visual-d svg { max-width: 300px; height: auto; }
.visual-d .datos { display: flex; flex-wrap: wrap; gap: 4px; font-size: 1.5rem; max-width: 340px; justify-content: center; }
.mini-figuras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.opciones-d { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion-d { padding: 7px 12px; border-radius: 10px; border: 2px solid var(--borde); color: var(--suave); }
.opcion-d.correcta { border-color: #1e9e5a; background: #e3f7ea; color: #14683c; font-weight: 800; }
.respuesta-d { display: inline-block; padding: 8px 14px; border-radius: 10px; background: #e3f7ea; color: #14683c; font-weight: 800; font-size: 1.1rem; border: 2px solid #1e9e5a; }
.plantilla-d { font-size: 1.15rem; font-weight: 700; line-height: 2.2; }
.plantilla-d .hueco { padding: 4px 10px; border-radius: 8px; background: #e3f7ea; border: 2px solid #1e9e5a; color: #14683c; }
.fichas-d { font-size: .85rem; color: var(--suave); margin-top: 6px; }
.orden-d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; }
.orden-d span.item { padding: 6px 12px; border-radius: 10px; background: #e3f7ea; border: 2px solid #1e9e5a; color: #14683c; }
.pasos-d { margin: 0; padding-left: 0; list-style: none; }
.pasos-d li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.pasos-d li b.r { margin-left: auto; color: #14683c; white-space: nowrap; }
.explicacion { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #fff7dd; font-size: .92rem; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 2px; font-size: .9em; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; }
.barras-d { display: flex; align-items: flex-end; gap: 18px; height: 150px; padding: 0 10px; border-left: 2px solid var(--texto); border-bottom: 2px solid var(--texto); width: fit-content; }
.barras-d div { width: 46px; background: linear-gradient(#8bdba5, #1e9e5a); border-radius: 6px 6px 0 0; position: relative; }
.barras-d div span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-weight: 800; }
.barras-d div small { position: absolute; bottom: -22px; left: -10px; right: -10px; text-align: center; color: var(--suave); }

/* ---------- Acceso ---------- */
.pagina-acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #241c4f, #4b2fc9); }
.caja-acceso { width: min(420px, 100%); background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.caja-acceso .marca-docente { color: var(--texto); justify-content: center; margin-bottom: 4px; }
.caja-acceso h1 { text-align: center; margin: 6px 0 2px; }
.caja-acceso p.sub { text-align: center; color: var(--suave); margin: 0 0 16px; }
.campo-d { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-weight: 700; font-size: .88rem; }
.campo-d input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.campo-d .error { color: #c8323a; font-weight: 600; font-size: .8rem; min-height: 0; }
.caja-acceso .btn { width: 100%; justify-content: center; padding: 12px; font-size: 1rem; margin-top: 4px; }
.alternar { text-align: center; margin-top: 14px; font-size: .9rem; }
.alerta-d { background: #fde6e7; color: #c8323a; padding: 8px 12px; border-radius: 10px; font-size: .88rem; }
.alerta-d:empty { display: none; }

/* Ajustes de la tabla: textos en una línea */
.estudiante small, .btn { white-space: nowrap; }
.tabla-ranking td:nth-child(2) { min-width: 210px; }

/* ---------- Cursos y ruta modular ---------- */
.btn.peligro { color: #c8323a; }
.btn.peligro:hover { background: #fde6e7; }
.sin-cursos { display: flex; gap: 20px; align-items: center; max-width: 760px; }
.sin-cursos img { width: 130px; flex-shrink: 0; }
.sin-cursos h2 { margin: 0 0 6px; }
.sin-cursos p { margin: 0 0 14px; color: var(--suave); line-height: 1.5; }

.diseno-cursos { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista-cursos { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 76px; }
.item-curso { text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.item-curso b { font-family: 'Fredoka', sans-serif; font-size: 1.05rem; font-weight: 600; }
.item-curso small { color: var(--suave); }
.item-curso.activo { border-color: var(--primario); box-shadow: 0 0 0 3px #e2dcff; }
.barra-curso { display: block; height: 6px; background: #ece8f7; border-radius: 99px; overflow: hidden; margin-top: 4px; }
.barra-curso span { display: block; height: 100%; background: var(--primario); }

.editor-curso { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cabecera-curso { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cabecera-curso-titulo { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.cabecera-curso-titulo h2 { margin: 0; font-size: 1.45rem; }
.codigo-curso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.codigo-curso small { color: var(--suave); font-weight: 700; }
.codigo-curso b { font: 600 1.25rem 'Fredoka', monospace; letter-spacing: 3px; background: #fff7dd; border: 2px dashed #e0b43a; color: #6b4b00; border-radius: 10px; padding: 3px 10px; }
.acciones-curso { display: flex; gap: 6px; }

.subpestanas { display: flex; gap: 6px; }
.subpestana { font: 700 .95rem 'Nunito', sans-serif; border: 1px solid var(--borde); background: #fff; color: var(--suave); border-radius: 12px; padding: 9px 16px; cursor: pointer; }
.subpestana.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

.barra-ruta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.resumen-ruta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.resumen-ruta b { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600; }
.estado-guardado { font-size: .85rem; color: var(--suave); font-weight: 700; }
.estado-guardado.ok { color: #1e9e5a; }
.estado-guardado.error { color: #c8323a; }
.acciones-ruta { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-mundos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.chip-mundo { font: 700 .82rem 'Nunito', sans-serif; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; cursor: pointer; border: 2px solid var(--m); background: #fff; color: var(--texto); }
.chip-mundo b { color: var(--m); }
.chip-mundo.todo { background: var(--m); color: #fff; }
.chip-mundo.todo b { color: #fff; }
.chip-mundo.parte { background: color-mix(in srgb, var(--m) 14%, #fff); }
.chip-mundo.nada { border-style: dashed; color: var(--suave); }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--m); display: inline-block; flex-shrink: 0; }
.chip-mundo.todo .punto { background: #fff; }
.filtros-ruta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.filtros-ruta input { font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; min-width: 220px; flex: 1; max-width: 320px; }
.segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.segmento { font: 700 .85rem 'Nunito', sans-serif; border: 0; background: #fff; color: var(--suave); padding: 8px 12px; cursor: pointer; }
.segmento + .segmento { border-left: 1px solid var(--borde); }
.segmento.activo { background: #efeaff; color: var(--primario-osc); }
.ayuda-ruta { color: var(--suave); font-size: .85rem; margin: 6px 0 12px; }

.lista-ruta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fila-ruta { display: grid; grid-template-columns: 22px 34px 46px 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--m); border-radius: 12px; }
.fila-ruta.apagado { background: #f7f6fb; border-left-color: #cfcbe0; }
.fila-ruta.apagado .titulo-ruta, .fila-ruta.apagado .icono-p { opacity: .5; }
.fila-ruta.arrastrando { opacity: .4; }
.fila-ruta.soltar-antes { box-shadow: 0 -3px 0 var(--primario); }
.fila-ruta.soltar-despues { box-shadow: 0 3px 0 var(--primario); }
.asa { cursor: grab; color: var(--suave); font-weight: 800; letter-spacing: -2px; user-select: none; text-align: center; }
.pos { font: 600 1.05rem 'Fredoka', sans-serif; text-align: center; color: var(--primario-osc); }
.fila-ruta.apagado .pos { color: #b7b2cc; }
.titulo-ruta { display: flex; flex-direction: column; min-width: 0; }
.titulo-ruta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo-ruta small { color: var(--suave); display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.flechas { display: flex; gap: 4px; }
.flecha { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borde); background: #fff; color: var(--primario); cursor: pointer; font-size: .75rem; }
.flecha:hover:not(:disabled) { background: #f4f0ff; }
.flecha:disabled { opacity: .3; cursor: default; }

.interruptor-d { position: relative; width: 44px; height: 24px; display: inline-block; cursor: pointer; }
.interruptor-d input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interruptor-d span { position: absolute; inset: 0; border-radius: 999px; background: #d4d0e2; transition: background .15s; pointer-events: none; }
.interruptor-d span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
.interruptor-d input:checked + span { background: #1e9e5a; }
.interruptor-d input:checked + span::after { left: 23px; }
.interruptor-d input:focus-visible + span { outline: 3px solid var(--primario); outline-offset: 2px; }

.unirse-info { display: flex; gap: 12px; align-items: flex-start; background: #fff7dd; border-radius: 12px; padding: 12px 14px; }
.unirse-info span { font-size: 1.4rem; }
.unirse-info p { margin: 0; line-height: 1.5; }
#vista-estudiantes h3 { margin: 18px 0 8px; font-size: 1.05rem; }
.lista-miembros, .lista-candidatos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-miembros li, .lista-candidatos label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 12px; }
.lista-candidatos label { cursor: pointer; }
.lista-candidatos input { width: 18px; height: 18px; accent-color: var(--primario); }
.lista-miembros img, .lista-candidatos img { width: 34px; height: 34px; border-radius: 50%; }
.lista-miembros .info, .lista-candidatos .info { flex: 1; min-width: 0; }
.lista-miembros small, .lista-candidatos small { display: block; color: var(--suave); }
.lista-candidatos { max-height: 320px; overflow-y: auto; margin: 8px 0 12px; }
.agregar-estudiantes input[type="search"] { font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; width: min(100%, 320px); }

.capa-docente.centrada { justify-content: center; align-items: center; padding: 16px; }
.dialogo-d { width: min(480px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.dialogo-d h2 { margin: 0 0 14px; }
.dialogo-d select, .plantillas-d select { font: inherit; font-weight: 400; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.plantillas-d { border: 0; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.plantillas-d legend { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.plantillas-d label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.plantillas-d label:has(input:checked) { border-color: var(--primario); background: #f6f3ff; }
.plantillas-d label > span { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.plantillas-d small { color: var(--suave); }
.plantillas-d .error { color: #c8323a; font-size: .8rem; font-weight: 600; }
.botones-dialogo { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 860px) {
  .diseno-cursos { grid-template-columns: 1fr; }
  .lista-cursos { position: static; flex-direction: row; overflow-x: auto; }
  .item-curso { min-width: 220px; }
}
@media (max-width: 560px) {
  .barra-docente-contenido { flex-wrap: wrap; }
  .pestanas { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .fila-ruta { grid-template-columns: 30px 46px 22px minmax(0, 1fr) auto; gap: 8px; }
  .fila-ruta .asa { display: none; }
  .titulo-ruta b { white-space: normal; }
  .sin-cursos { flex-direction: column; text-align: center; }
}

/* ---------- Vigencia de la ruta (días activa) ---------- */
.vigencia-curso { flex-basis: 100%; border-top: 1px dashed var(--borde); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vigencia-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .92rem; color: var(--suave); }
.vigencia-texto > span:first-child { font-weight: 700; color: var(--texto); }
.vigencia-texto b { font: 600 1.15rem 'Fredoka', sans-serif; color: var(--primario-osc); }
.vigencia-curso.vencida .vigencia-texto b, .item-curso small.vencida { color: #c8323a; }
#dias-ruta { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--primario) var(--avance, 100%), #e4e0f0 var(--avance, 100%)); }
#dias-ruta::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--primario); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
#dias-ruta::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--primario); }
#dias-ruta:focus-visible { outline: 3px solid #c9bdff; outline-offset: 4px; }
.vigencia-curso.vencida #dias-ruta { background: #f3d4d6; }
.marcas-vigencia { display: flex; justify-content: space-between; font-size: .75rem; color: var(--suave); }

/* ---------- Versión 3: colegio (administrador, rector y sugerencias) ---------- */
.colegio-barra { display: block; font-size: .72rem; color: #c9c2f5; }
#nombre-docente { line-height: 1.15; text-align: right; }
.vista[hidden] { display: none; }
.grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.grilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tarjeta-d h2 { margin: 0 0 4px; font-size: 1.2rem; }
.tarjeta-d > p.sub { margin: 0 0 12px; color: var(--suave); font-size: .9rem; }
.form-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.form-fila label, .form-col label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--suave); }
.form-col { display: grid; gap: 10px; }
.form-fila input, .form-fila select, .form-col input, .form-col select, .form-col textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--texto); min-width: 0; }
.form-col textarea { min-height: 120px; font-family: ui-monospace, monospace; font-size: .85rem; }
.aviso { padding: 10px 12px; border-radius: 10px; font-size: .9rem; }
.aviso.ok { background: #e3f7ea; color: #14683c; }
.aviso.error { background: #fde6e7; color: #a5262e; }
.aviso:empty { display: none; }
.pasos-colegio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: paso; }
.pasos-colegio li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; }
.pasos-colegio li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fondo); font: 600 .95rem 'Fredoka', sans-serif; color: var(--suave); }
.pasos-colegio li.hecho::before { content: '✓'; background: #e3f7ea; color: #1e9e5a; }
.pasos-colegio li b { display: block; }
.pasos-colegio li small { color: var(--suave); }
.tabla-d { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-d th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); padding: 8px; border-bottom: 2px solid var(--borde); white-space: nowrap; }
.tabla-d td { padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-d tr.grado td { background: var(--fondo); font: 600 .9rem 'Fredoka', sans-serif; color: var(--primario-osc); }
.tabla-d .num { font-variant-numeric: tabular-nums; text-align: right; }
.chip-d { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #efeaff; color: var(--primario-osc); font-size: .8rem; font-weight: 700; margin: 2px 2px 2px 0; white-space: nowrap; }
.chip-d.alerta { background: #fff3d6; color: #8a5a00; }
.chip-d.rol-rector { background: #e0f2fe; color: #075985; }
.chip-d.rol-admin { background: #fde6e7; color: #a5262e; }
.credencial { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 2px dashed #e0b43a; background: #fff7dd; }
.credencial code { font: 600 1.05rem ui-monospace, monospace; }
.lista-checks { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.lista-checks label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); font-size: .92rem; }
.acciones-tabla { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vacio-d { color: var(--suave); text-align: center; padding: 22px; }
.pestanas .pestana { cursor: pointer; border: 0; background: none; font: inherit; }
@media print {
  .barra-docente, .no-imprimir { display: none !important; }
  body { background: #fff; }
}
/* Sugerencias en el panel del docente (mismas tarjetas que el tablero del rector) */
.sugerencias-docente { margin-bottom: 16px; background: linear-gradient(135deg, #f6f3ff, #fff); }
.sug-cabeza { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sug-cabeza img { width: 56px; }
.grilla-sug { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.sug { border: 1px solid var(--borde); border-left: 5px solid var(--tipo, var(--primario)); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: #fff; align-content: start; }
.sug.refuerzo { --tipo: #c8323a; } .sug.clase { --tipo: #6c4ff0; } .sug.competencia { --tipo: #c27c00; } .sug.mensaje { --tipo: #2a78d6; }
.sug h3 { margin: 0; font-size: 1rem; }
.sug p { margin: 0; color: var(--suave); font-size: .88rem; line-height: 1.45; }
.sug .pie-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.sug .pie-sug > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sug .tipo-sug { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--tipo); }
.estado-doc { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: #eef1f4; color: #4b5563; font-weight: 700; }
.estado-doc.hecha { background: #e3f7ea; color: #14683c; } .estado-doc.aceptada { background: #e0f2fe; color: #075985; } .estado-doc.vista { background: #fff3d6; color: #8a5a00; }
.tabla-comp { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla-comp td { padding: 4px 6px; border-bottom: 1px dashed var(--borde); }
.tabla-comp td:last-child { text-align: right; font-weight: 800; }

/* ---------- Habilidades (panel docente) ---------- */
.acciones-hab { display: flex; gap: 8px; flex-wrap: wrap; }
.como-se-mide { margin-bottom: 16px; }
.pasos-medida { margin: 8px 0; padding-left: 1.2em; display: grid; gap: 6px; }
.hab-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hab-tarjeta { background: #fff; border: 1px solid var(--borde); border-top: 5px solid var(--h); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 2px; }
.hab-tarjeta .hab-icono { font-size: 1.4rem; }
.hab-tarjeta .hab-nota { font: 600 2rem 'Fredoka', sans-serif; line-height: 1.1; }
.hab-tarjeta small { color: var(--suave); }
.hab-tarjeta .hab-bajos { font-weight: 700; }
.hab-fila { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .hab-fila { grid-template-columns: 1fr; } }
.radar { width: 100%; max-width: 440px; display: block; margin: 0 auto; }
.enlace-tema, .enlace-est, .orden { background: none; border: 0; padding: 0; font: inherit; color: var(--texto); cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.enlace-est { color: var(--primario); font-weight: 700; }
.enlace-tema:hover, .enlace-est:hover { text-decoration: underline; }
.orden { font-weight: 800; color: var(--suave); white-space: nowrap; }
.orden.activo { color: var(--primario); }
.fila-activa td { outline: 2px solid var(--primario); outline-offset: -2px; }
.lista-brechas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-brechas li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 12px; }
.chip-brecha { border: 1.5px solid var(--h); color: var(--h); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .85rem; }
.grupos-refuerzo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.grupo-ref { border: 1px solid var(--borde); border-left: 5px solid var(--h); border-radius: 12px; padding: 10px 12px; }
.grupo-ref h3 { margin: 0 0 6px; font-size: 1rem; }
.grupo-ref h3 small { color: var(--suave); font: 700 .8rem 'Nunito', sans-serif; margin-left: 6px; }
.grupo-ref p { margin: 4px 0; font-size: .9rem; }
.grupo-ref .estrategia { background: #faf8ff; border-radius: 8px; padding: 6px 8px; }
.suave { color: var(--suave); }
.tabla-hab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-hab th, .tabla-hab td { padding: 7px 8px; border-bottom: 1px solid var(--borde); text-align: center; }
.tabla-hab th:first-child, .tabla-hab td:first-child { text-align: left; }
.tabla-hab td { font-weight: 800; }
td.vacia { color: #b9b4cc; font-weight: 600; }
.ficha-hab { width: min(980px, 100%); }

/* ---------- Informe de habilidades (pantalla e impresión) ---------- */
.informe-habilidades { background: #fff; border-radius: var(--radio); padding: 22px; display: grid; gap: 14px; max-width: 980px; margin: 0 auto 20px; }
.ficha .informe-habilidades { padding: 0; }
.ih-cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; border-bottom: 3px solid #efeaff; padding-bottom: 12px; }
.ih-marca { display: flex; gap: 8px; align-items: center; }
.ih-marca img { width: 44px; height: 44px; border-radius: 50%; }
.ih-marca b { display: block; font: 600 1.15rem 'Fredoka', sans-serif; color: #4b2fc9; }
.ih-marca small { color: var(--suave); font-size: .78rem; }
.ih-datos h1 { margin: 0; font-size: 1.45rem; }
.ih-datos p { margin: 1px 0; color: var(--suave); font-size: .86rem; }
.ih-global { text-align: center; background: #faf8ff; border-radius: 14px; padding: 8px 14px; display: grid; }
.ih-global b { font: 600 2.2rem 'Fredoka', sans-serif; line-height: 1; }
.ih-global span { font-weight: 800; font-size: .85rem; }
.ih-global small { color: var(--suave); font-size: .72rem; }
.ih-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ih-bloque h2 { margin: 0 0 8px; font-size: 1.05rem; color: #3a2a8c; }
.ih-leyenda { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: .78rem; color: var(--suave); margin: 4px 0 0; }
.ih-leyenda i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.ih-leyenda i.punteada { background: repeating-linear-gradient(90deg, #9aa3ad 0 5px, transparent 5px 8px); }
.ih-leyenda i.basico { background: repeating-linear-gradient(90deg, #c27c00 0 4px, transparent 4px 7px); }
.ih-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ih-tabla th { text-align: left; color: var(--suave); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; padding: 4px 6px; border-bottom: 2px solid var(--borde); }
.ih-tabla td { padding: 6px; border-bottom: 1px solid #f0edf8; vertical-align: middle; }
.ih-tabla td small { display: block; color: var(--suave); font-size: .76rem; }
.ih-tabla .centro { text-align: center; }
.ih-hab { color: var(--h); }
.ih-nivel { display: inline-block; background: var(--nf); color: var(--n); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.ih-nivel small { display: inline !important; color: inherit !important; opacity: .75; font-size: .74rem !important; }
.ih-tend { color: #9aa3ad; font-size: .8rem; }
.ih-tend.sube { color: #1e9e5a; }
.ih-tend.baja { color: #c8323a; }
.ih-pensamientos { display: grid; gap: 6px; }
.ih-pens { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; font-size: .88rem; }
.ih-pens-nombre { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ih-pens-nombre .icono-p { width: 22px; height: 22px; }
.ih-barra { height: 10px; background: #f0edf8; border-radius: 999px; overflow: hidden; }
.ih-barra span { display: block; height: 100%; border-radius: 999px; }
.ih-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ih-tarjeta { border-radius: 14px; padding: 10px 14px; }
.ih-tarjeta h3 { margin: 0 0 4px; font-size: .98rem; }
.ih-tarjeta p, .ih-tarjeta ul { margin: 0; font-size: .88rem; }
.ih-tarjeta ul { padding-left: 1.1em; display: grid; gap: 4px; }
.ih-tarjeta.celebrar { background: #e9f8ef; }
.ih-tarjeta.mejorar { background: #fff4dc; }
.ih-tarjeta.casa { background: #eef4ff; grid-column: 1 / -1; }
.ih-tarjeta.aula { background: #f5f0ff; grid-column: 1 / -1; }
.ih-mapa th { text-align: center; }
.ih-mapa th small { display: block; text-transform: none; letter-spacing: 0; font-size: .68rem; }
.ih-mapa td { text-align: center; font-weight: 800; min-width: 44px; }
.ih-mapa td.ih-tema { text-align: left; font-weight: 600; white-space: nowrap; }
.ih-tema .icono-p { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.ih-como p { margin: 4px 0; font-size: .84rem; }
.ih-escala { display: flex; flex-wrap: wrap; gap: 6px; }
.ih-escala span { background: var(--nf); color: var(--n); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .78rem; }
.ih-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 18px; font-size: .82rem; color: var(--suave); text-align: center; }
.ih-firmas span { display: block; border-top: 1.5px solid #bbb; margin-bottom: 4px; height: 28px; }
.ih-vacio { padding: 20px; text-align: center; color: var(--suave); }
@media screen and (max-width: 760px) {
  .ih-cabeza, .ih-grid, .ih-plan-grid { grid-template-columns: 1fr; }
  .ih-pens { grid-template-columns: 1fr; }
}
.pagina-informe-hab { background: #eceaf3; }
.barra-impresion { display: flex; gap: 12px; justify-content: center; align-items: end; padding: 14px; flex-wrap: wrap; }
.barra-impresion label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 700; color: var(--suave); gap: 4px; }
.barra-impresion select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borde); }
@media print {
  @page { size: letter; margin: 10mm; }
  .no-imprimir { display: none !important; }
  body.pagina-informe-hab { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pagina-informe-hab .informe-habilidades { break-after: page; margin: 0; padding: 0; border-radius: 0; gap: 10px; font-size: 13px; }
  .pagina-informe-hab .informe-habilidades:last-child { break-after: auto; }
  .ih-grid { grid-template-columns: 300px 1fr; }
  .ih-plan-grid { grid-template-columns: 1fr 1fr; }
  .ih-bloque, .ih-tarjeta { break-inside: avoid; }
  .ih-grid { grid-template-columns: 270px 1fr; }
  .ih-tabla td { padding: 4px 5px; }
  .ih-tabla td small { font-size: .7rem; }
  .ih-cabeza { padding-bottom: 8px; }
  .ih-plan-grid { gap: 8px; }
  .ih-tarjeta { padding: 8px 12px; }
  .ih-firmas { margin-top: 10px; }
  .pagina-informe-hab .informe-habilidades { font-size: 12px; gap: 8px; zoom: .86; }
  .ih-tabla td small { font-size: .66rem; line-height: 1.2; }
  .ih-tabla { font-size: .8rem; }
  .ih-radar .radar { max-width: 250px; }
  .ih-tarjeta p, .ih-tarjeta ul { font-size: .8rem; }
  .ih-como p:first-of-type { display: none; }
  .ih-bloque h2 { margin-bottom: 4px; font-size: .98rem; }
  .ih-pens { font-size: .8rem; }
}
@media (max-width: 760px) {
  .barra-docente-contenido { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .pestanas { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .pestana { white-space: nowrap; padding: 6px 10px; }
  .usuario-docente { margin-left: auto; }
  .contenedor-docente { padding: 16px 12px 48px; }
  .hab-fila > *, .tarjeta-d { min-width: 0; }
  .lista-brechas li { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Rutas de refuerzo propuestas por Sirpi ---------- */
.btn-refuerzo { margin-top: 6px; background: linear-gradient(135deg, #6c4ff0, #9b59f5); }
.modal-refuerzo { width: min(820px, 100%); max-height: 92vh; overflow-y: auto; }
.modal-refuerzo .sug-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.modal-refuerzo .sug-cabeza img { width: 72px; }
.modal-refuerzo h2 { margin: 0 0 4px; }
.form-refuerzo { display: grid; gap: 12px; margin-top: 10px; }
.form-refuerzo > label { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; color: var(--suave); }
.form-refuerzo input[name=nombre] { font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.grid-refuerzo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.grid-refuerzo fieldset { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; margin: 0; min-width: 0; }
.grid-refuerzo legend { font-weight: 800; color: #3a2a8c; padding: 0 4px; }
.lista-ref { max-height: 240px; overflow-y: auto; }
.opcion-ref { display: flex; gap: 8px; align-items: flex-start; padding: 4px 2px; font-size: .9rem; }
.opcion-ref small { display: block; color: var(--suave); }
.consejo-sirpi { background: #f5f0ff; border-radius: 10px; padding: 8px 12px; margin: 0; font-size: .9rem; }
.error-ref { color: #c8323a; font-weight: 700; margin: 0; }
.acciones-ref, .acciones-ficha { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.acciones-ficha { justify-content: flex-start; }
@media screen and (max-width: 700px) { .grid-refuerzo { grid-template-columns: 1fr; } }
.vigencia-ref { display: flex !important; flex-direction: column; }
.vigencia-ref span { color: var(--texto); }
.vigencia-ref input { width: 100%; accent-color: var(--primario); }
.item-curso.refuerzo { border-color: #ffd23f; background: #fffbea; }
.etiqueta-refuerzo { color: #9a6b00 !important; font-weight: 800; }