/* ==========================================================================
   Gadget 05 — Desafío Mate 2.0
   Dos lenguajes visuales, como pide el UR (§19.1): el del ALUMNO, lúdico e
   ilustrado; y el del PROFESOR y la ADMINISTRACIÓN, el de WebClass (azul de
   acción #23a6df, cápsulas, mucho blanco), sin estética de videojuego.
   ========================================================================== */

.dm { padding: 18px 26px 70px; }
.tenue { color: var(--texto-suave); }
.nowrap { white-space: nowrap; }
code { font-family: Consolas, "SFMono-Regular", monospace; font-size: .92em; background: #eef1f6; padding: 1px 5px; border-radius: 4px; color: #3b4a5e; }

/* --- Las tres vistas ------------------------------------------------------ */
.vistas { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.vista-tab {
  display: flex; align-items: center; gap: 11px; padding: 9px 20px 9px 10px; cursor: pointer; text-align: left;
  font: inherit; color: var(--texto-medio); background: #fff; border: 1.5px solid var(--borde); border-radius: var(--r-capsula);
}
.vista-tab:hover { border-color: var(--azul-borde); }
.vista-tab b { display: block; font-size: 14px; color: var(--texto); }
.vista-tab small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.vista-n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef1f6; font-weight: 700; font-size: 13px; }
.vista-tab.activa { border-color: var(--azul); background: var(--azul-suave); }
.vista-tab.activa .vista-n { background: var(--azul); color: #fff; }

/* --- La guía de la maqueta (al lado del juego) --------------------------- */
#vista-alumno:not([hidden]) { display: flex; gap: 22px; align-items: flex-start; }
.guia { flex: 0 0 300px; font-size: 13px; position: sticky; top: 10px; }
.guia h2 { font-size: 17px; margin: 0 0 12px; }
.guia h4 { font-size: 12.5px; margin: 12px 0 6px; }
.guia .campo { margin-bottom: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 12px; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 13.5px; color: var(--texto); padding: 7px 14px; background: #fff;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-capsula);
}
.campo textarea { border-radius: var(--r); resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.guia-atajos { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.guia-atajos > span { flex: 0 0 100%; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); }
.btn.chico { padding: 4px 11px; font-size: 12px; border: 1px solid var(--borde); background: #fff; }
.btn.chico small { color: var(--texto-suave); margin-left: 2px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; flex: 0 0 100%; }
.guia-motor { background: #fff8e6; border: 1px dashed #e8c770; border-radius: var(--r); padding: 10px 12px; margin: 12px 0; }
.guia-rotulo { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a77b14; }
.guia-motor p { margin: 5px 0; }
.guia-motivo { color: var(--texto); }
.guia-ev { margin: 4px 0; padding-left: 22px; max-height: 230px; overflow: auto; font-size: 12px; }
.guia-ev li { padding: 1px 0; }
.guia-ev li.actual { font-weight: 800; }
.guia-ev li.bien::marker { color: #16a34a; } .guia-ev li.mal::marker { color: #dc2626; }
.guia-ajuste { font-size: 12px; color: #92400e; }
.guia-cambios { padding-left: 16px; margin: 4px 0; font-size: 12px; }
.guia-cambios li { margin-bottom: 3px; }
.guia-lista { padding-left: 18px; color: var(--texto-medio); margin: 12px 0 0; }
.guia-lista li { margin-bottom: 6px; }
.org { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: #eef1f6; }
.org-PRINCIPAL { background: #e0e7ff; color: #3730a3; } .org-DESCENDIDO { background: #fee2e2; color: #991b1b; }
.org-VALIDACION { background: #dcfce7; color: #166534; } .org-DIAGNOSTICO { background: #fef3c7; color: #92400e; } .org-OTRA_EVALUACION { background: #e0e7ff; color: #3730a3; } .org-ENTRENADOR { background: #f1f5f9; color: #475569; }

/* ==========================================================================
   EL ALUMNO
   ========================================================================== */
.juego-col { flex: 1; min-width: 0; }
.juego { border-radius: 24px; overflow: hidden; box-shadow: 0 18px 50px rgba(17, 24, 76, .3); }
.j-marco {
  --j-mor: #6d28d9; --j-mor2: #8b5cf6; --j-noche: #0d1b4f;
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif; color: #fff;
  min-height: 820px; display: flex; flex-direction: column; background: var(--j-noche); position: relative;
}
.j-cab { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: linear-gradient(#0d1b4f, #13256b); position: relative; z-index: 3; flex-wrap: wrap; }
.j-logo { display: flex; flex-direction: column; line-height: .92; font-weight: 900; margin-right: 8px; transform: rotate(-3deg); }
.j-logo span { font-size: 15px; color: #fff; text-shadow: 0 2px 0 #1d4ed8; }
.j-logo b { font-size: 27px; color: #fff; -webkit-text-stroke: 1px #1e40af; text-shadow: 0 3px 0 #1d4ed8; letter-spacing: .02em; }
.j-logo i { position: absolute; margin: 30px 0 0 74px; font-style: normal; font-size: 11px; background: #facc15; color: #1e3a8a; border-radius: 6px; padding: 0 4px; transform: rotate(3deg); }
.j-mundo, .j-cifras, .j-perfil { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 7px 14px; }
.j-mundo small, .j-perfil small, .j-cifra small { display: block; font-size: 11px; color: #c7d2fe; text-transform: none; }
.j-mundo > span:last-child { font-weight: 800; font-size: 16px; }
.j-mundo-ic { font-size: 22px; color: #4ade80; }
.j-cifras { margin-left: auto; gap: 18px; }
.j-cifra { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; }
.j-cifra .estr, .j-cifra .j-fuego { grid-row: span 2; width: 26px; height: 26px; font-size: 22px; }
.j-cifra b { font-size: 18px; line-height: 1; }
.j-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #f9a8d4, #a78bfa); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #3b0764; }

.j-escena { flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #5bb2ff 0%, #3d8ef0 30%, #2a6fe0 52%, #1d4fc0 53%, #1a43a8 75%, #13348a 100%); }
.j-escena::after { content: ""; position: absolute; left: 0; right: 0; top: 53%; height: 3px; background: rgba(255, 255, 255, .25); }
.j-nubes i { position: absolute; width: 180px; height: 52px; background: #fff; border-radius: 60px; opacity: .85; filter: blur(2px); animation: nube 38s linear infinite; }
.j-nubes i::before { content: ""; position: absolute; width: 80px; height: 70px; border-radius: 50%; background: #fff; left: 30px; top: -30px; }
/* Las nubes van detrás y lejos del saludo: blanco sobre blanco no se lee. */
.j-nubes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.j-nubes i:nth-child(1) { top: 190px; left: 44%; transform: scale(.7); opacity: .55; }
.j-nubes i:nth-child(2) { top: 96px; left: 66%; animation-duration: 52s; opacity: .7; }
.j-nubes i:nth-child(3) { top: 24px; left: 52%; transform: scale(.5); animation-duration: 44s; opacity: .6; }
.j-nubes i:nth-child(4) { top: 250px; left: 86%; transform: scale(.45); opacity: .5; animation-duration: 60s; }
.j-saludo { text-shadow: 0 2px 8px rgba(13, 27, 79, .55); }
@keyframes nube { from { translate: -40px 0; } 50% { translate: 40px 0; } to { translate: -40px 0; } }
.j-islotes { position: absolute; top: 70px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 30px; opacity: .7; pointer-events: none; }
.isla-svg.mini { width: 70px; height: auto; }
.j-islotes .isla-svg:nth-child(2) { margin-top: 40px; width: 50px; }
.j-contenido { position: relative; z-index: 2; padding: 22px 28px 18px; }
.j-contenido.centro { display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 620px; }
.j-saludo p { margin: 0; font-size: 19px; font-weight: 800; }
.j-saludo h2 { margin: 2px 0 6px; font-size: 40px; font-weight: 900; line-height: 1.08; text-shadow: 0 3px 10px rgba(13, 27, 79, .45); }
.j-saludo h2 span { font-size: 58px; }
.j-sub { margin: 0 0 12px; font-size: 16px; color: #eef2ff; max-width: 330px; }
.j-btn {
  font: inherit; font-weight: 800; font-size: 15px; color: #fff; cursor: pointer; border: none;
  padding: 10px 20px; border-radius: 14px; background: linear-gradient(#8b5cf6, #6d28d9);
  box-shadow: 0 4px 0 #4c1d95, 0 8px 18px rgba(76, 29, 149, .35); display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.j-btn:hover:not(:disabled) { filter: brightness(1.08); }
.j-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #4c1d95; }
.j-btn:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.j-btn:disabled { opacity: .5; cursor: not-allowed; }
.j-btn.grande { font-size: 18px; padding: 14px 26px; }
.j-btn.claro { background: #fff; color: #5b21b6; box-shadow: 0 3px 0 #ddd6fe; }
.j-btn.borde { background: rgba(13, 27, 79, .35); border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: none; }
.j-btn.chico { padding: 6px 12px; font-size: 13px; }

/* ALU-01: los mundos */
.j-burbuja-mascota { position: absolute; top: 18px; right: 26px; display: flex; align-items: center; gap: 0; }
.burbuja { background: #fff; color: #3730a3; border-radius: 16px; padding: 10px 16px; font-size: 14px; max-width: 220px; box-shadow: 0 6px 18px rgba(13, 27, 79, .25); }
.burbuja b { display: block; color: #6d28d9; font-size: 17px; }
.mascota { width: 90px; height: auto; filter: drop-shadow(0 6px 10px rgba(13, 27, 79, .35)); }
.mascota.chica { width: 74px; }
.mascota.mediana { width: 120px; display: block; margin: 10px auto; }
.mascota.grande { width: 190px; flex: 0 0 auto; }
.mundos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 0 16px; }
.mundo {
  position: relative; border-radius: 22px; padding: 14px 16px 18px; text-align: center;
  background: linear-gradient(rgba(30, 64, 175, .35), rgba(13, 27, 79, .78)); border: 1.5px solid rgba(255, 255, 255, .22); backdrop-filter: blur(3px);
}
.mundo.recomendado { border: 3px solid #c4b5fd; box-shadow: 0 0 0 4px rgba(167, 139, 250, .35), 0 0 30px rgba(196, 181, 253, .55); }
.sello-rec { position: absolute; top: -14px; left: 50%; translate: -50% 0; background: linear-gradient(#a78bfa, #7c3aed); padding: 4px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.sello-actual { position: absolute; bottom: -16px; left: 50%; translate: -50% 0; background: #13256b; border: 1.5px solid #6d28d9; padding: 3px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.mundo-arte .isla-svg { width: 100%; max-width: 230px; height: auto; }
.mundo h3 { margin: 0; font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 0 #13256b; }
.mundo > p { margin: 4px 0 10px; font-size: 13.5px; color: #e0e7ff; min-height: 38px; }
.mundo-nuevo { color: #fde047 !important; font-weight: 800; }
.mundo-cifras { display: flex; justify-content: space-between; gap: 10px; text-align: left; margin-bottom: 12px; font-size: 13px; }
.mundo-cifras small { display: block; color: #c7d2fe; }
.barrita { display: inline-block; width: 70px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.barrita i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.mundo .j-btn { width: 100%; }
.j-tarjeta-progreso { margin: 22px auto 4px; display: flex; align-items: center; gap: 14px; width: min(520px, 100%); padding: 12px 20px; background: #fff; color: #312e81;
  border: none; border-radius: 18px; font: inherit; cursor: pointer; text-align: left; box-shadow: 0 6px 18px rgba(13, 27, 79, .25); }
.j-tarjeta-progreso > span:first-child { font-size: 30px; }
.j-tarjeta-progreso b { display: block; font-size: 17px; color: #4338ca; }
.j-tarjeta-progreso small { color: #6366f1; }
.j-tarjeta-progreso > span:last-child { margin-left: auto; font-size: 26px; color: #6d28d9; }
.estrellas { display: inline-flex; gap: 2px; vertical-align: middle; }
.estr { width: 22px; height: 22px; fill: #1e293b; stroke: #0f172a; stroke-width: 1; }
.estr.on { fill: #facc15; stroke: #b45309; }
.estr.on.st-REMEDIAL { fill: #2dd4bf; stroke: #0f766e; }
.estr.on.st-SUPERIOR { fill: #c084fc; stroke: #7e22ce; }

/* ALU-02: el mapa */
.mapa .j-saludo { position: relative; z-index: 3; max-width: 360px; }
.j-aviso-mascota { position: absolute; top: 20px; right: 26px; background: #fff; color: #4338ca; border-radius: 16px; padding: 10px 18px; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; box-shadow: 0 6px 18px rgba(13, 27, 79, .25); z-index: 3; }
.j-aviso-mascota span { grid-row: span 2; font-size: 30px; }
.j-aviso-mascota b { font-size: 17px; color: #6d28d9; }
.j-aviso-mascota small { color: #4f46e5; }
.ruta { display: flex; align-items: center; justify-content: center; margin: -150px 0 0 120px; min-height: 380px; }
.isla { position: relative; display: flex; flex-direction: column; align-items: center; }
.isla .isla-svg { width: 230px; height: auto; display: block; }
.isla-anterior .isla-svg { width: 230px; }
.isla-actual .isla-svg { width: 330px; }
.isla-proxima .isla-svg { width: 250px; }
.isla.vacia { width: 200px; }
.isla-cuerpo { animation: flotar 6s ease-in-out infinite; transform-origin: center; }
.isla-actual .isla-cuerpo { animation-duration: 5s; }
.isla-proxima .isla-cuerpo { animation-delay: -2s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cascada { animation: cascada 1.4s linear infinite; }
.cascada.c2 { animation-delay: -.7s; }
@keyframes cascada { 0%, 100% { opacity: .95; } 50% { opacity: .65; } }
.halo { animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.niebla { animation: deriva 9s ease-in-out infinite; }
@keyframes deriva { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.isla-rotulo { margin-top: -26px; background: rgba(13, 27, 79, .88); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 7px 14px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 220px; position: relative; z-index: 2; }
.isla-rotulo b { font-size: 15px; line-height: 1.2; }
.isla-rotulo small { font-size: 12px; color: #c7d2fe; }
.isla-rotulo.grande b { font-size: 18px; }
.j-estado { font-size: 13px; font-weight: 800; padding: 3px 14px; border-radius: 99px; background: #475569; }
.j-estado.hecho { background: #16a34a; }
.j-estado.en-curso { background: #7c3aed; }
.j-estado.nueva { background: linear-gradient(#a78bfa, #7c3aed); }
.j-tipo { font-size: 12.5px; font-weight: 800; padding: 2px 12px; border-radius: 99px; }
.j-refuerzo { background: #ccfbf1; color: #0f766e; }
.j-superior { background: #f3e8ff; color: #7e22ce; }
.j-nuevo { background: #fef9c3; color: #854d0e; }
.camino { display: flex; gap: 10px; align-self: center; margin: 60px -8px 0; }
.camino i { width: 13px; height: 13px; border-radius: 50%; background: #e9d5ff; box-shadow: 0 0 10px #c4b5fd; }
.j-mision { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1.4fr) auto; gap: 18px; align-items: center;
  background: #fff; color: #1e1b4b; border-radius: 22px; padding: 16px 20px; margin: 6px 270px 0 0; box-shadow: 0 10px 26px rgba(13, 27, 79, .3); }
.j-mision-ic { font-size: 54px; }
.j-mision-txt small, .j-mision-prog > small { color: #7c3aed; font-weight: 800; }
.j-mision-txt h3 { margin: 2px 0 4px; font-size: 22px; color: #1e1b4b; }
.j-mision-txt p { margin: 0 0 6px; font-size: 14px; color: #4b5563; }
.j-mision-prog { border-left: 1px solid #e5e7eb; padding-left: 18px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.j-mision-prog > small { grid-column: 1 / -1; }
.j-mision-prog > b { font-size: 20px; color: #1e1b4b; }
.j-barra { height: 12px; border-radius: 8px; background: #e0e7ff; overflow: hidden; }
.j-barra i { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #6d28d9); border-radius: 8px; transition: width .4s; }
.j-mini { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; }
.j-mini span { flex: 1; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px 8px; text-align: center; font-size: 13px; }
.j-mini span .estr { width: 16px; height: 16px; vertical-align: -2px; }
.j-mini b { font-size: 16px; }
.j-mini small { display: block; font-size: 11px; color: #6b7280; }
.j-mision-acc { display: flex; flex-direction: column; gap: 10px; }
.j-recuerda { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: flex-end; z-index: 4; flex-direction: row-reverse; }
.j-recuerda .burbuja { font-size: 12.5px; max-width: 160px; margin-bottom: 40px; }
.j-recuerda .mascota { width: 110px; }
.recorrido { padding-left: 4px; list-style: none; margin: 0; }
.recorrido li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--borde); }
.recorrido li b { flex: 1; }
.recorrido .estr:not(.on) { fill: #e5e7eb; stroke: #cbd5e1; }

/* ALU-03 / 05 / 07: los paneles */
.j-panel { background: #fff; color: #1e1b4b; border-radius: 24px; padding: 26px 30px; box-shadow: 0 14px 34px rgba(13, 27, 79, .32); }
.j-detalle { width: min(620px, 100%); }
.j-ojo { margin: 0; color: #7c3aed; font-weight: 800; font-size: 14px; }
.j-panel h2 { margin: 4px 0 10px; font-size: 30px; color: #1e1b4b; }
.j-det-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.j-det-grilla > div { background: #f5f3ff; border-radius: 14px; padding: 10px 14px; }
.j-det-grilla small { color: #7c3aed; font-weight: 800; }
.j-det-grilla p { margin: 4px 0 0; font-size: 14.5px; }
.j-det-grilla .estr:not(.on) { fill: #e5e7eb; }
.j-nota-amable { background: #ecfdf5; color: #065f46; border-radius: 12px; padding: 9px 14px; font-size: 14px; }
.j-acciones { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.j-acciones.ancho { grid-column: 1 / -1; justify-content: center; }
.j-ev-ic { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(#8b5cf6, #6d28d9); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.j-ev-ic.chico { width: 54px; height: 54px; font-size: 26px; flex: 0 0 54px; }

/* ALU-04: la cápsula */
/* La cápsula del Publisher (lectore/player.php): lienzo con la etiqueta del
   momento arriba a la izquierda, barra de herramientas abajo, y el modal del
   objeto `trainer` (iframe con ✕) para el Entrenador y el Evaluador. */
.lcp-player { flex: 1; position: relative; display: flex; flex-direction: column; background: linear-gradient(160deg, #06245f, #0a1a3f); padding: 18px 18px 0; color: #0f2557; }
.lcp-lienzo { position: relative; flex: 1; min-height: 520px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 80% 20%, #dbeafe, transparent 45%), linear-gradient(180deg, #f0f7ff, #dcebff); display: flex; align-items: center; justify-content: center; padding: 70px 40px 30px; }
.lcp-seccion { position: absolute; left: 22px; top: 18px; background: #004e9c; color: #fff; font: 800 18px "Open Sans", "Segoe UI", sans-serif; letter-spacing: .03em; padding: 8px 22px; border-radius: 0 0 14px 0; }
.lcp-titulo-cap { position: absolute; right: 22px; top: 22px; font-weight: 800; color: #1e3a8a; font-size: 14px; opacity: .8; }
.lcp-estimula { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lcp-pregunta-grande { margin: 0; font: 700 34px/1.25 "Quicksand", "Nunito", sans-serif; color: #004e9c; max-width: 760px; }
.lcp-texto { width: 100%; max-width: 820px; }
.lcp-texto h3 { margin: 0 0 10px; font-size: 26px; color: #004e9c; }
.lcp-trainer-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; width: 100%; max-width: 1000px; }
.lcp-titulo-azul { margin: 0; font: 700 50px/1.2 "Quicksand", "Nunito", sans-serif; color: #004e9c; text-align: center; }
.lcp-trainer-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 230px; border: 0; border-radius: 22px; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(140deg, #1d4ed8, #4f46e5); box-shadow: 0 10px 0 #1e3a8a, 0 18px 30px rgba(30, 58, 138, .35); transition: transform .12s; }
.lcp-trainer-btn.evaluador { background: linear-gradient(140deg, #f59e0b, #ea580c); box-shadow: 0 10px 0 #9a3412, 0 18px 30px rgba(154, 52, 18, .35); }
.lcp-trainer-btn:hover:not(:disabled) { transform: translateY(-3px); }
.lcp-trainer-btn:disabled { cursor: default; filter: saturate(.4); }
.lcp-trainer-btn .lcp-tr-ic { font-size: 54px; }
.lcp-trainer-btn b { font-size: 30px; }
.lcp-trainer-btn small { font-size: 15px; opacity: .9; }
.lcp-falta { margin: 0; font-size: 18px; color: #1e3a8a; }
.lcp-barra { display: flex; align-items: center; gap: 6px; padding: 10px 4px 12px; }
.lcp-h { min-width: 40px; height: 36px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 14px "Nunito", sans-serif; cursor: pointer; }
.lcp-h:disabled { opacity: .35; cursor: default; }
.lcp-h.nav { font-size: 20px; min-width: 52px; background: rgba(255, 255, 255, .18); }
.lcp-h.nav.invita { background: #facc15; color: #1e3a8a; animation: lcpInvita 1.2s ease-in-out infinite; }
@keyframes lcpInvita { 50% { box-shadow: 0 0 0 6px rgba(250, 204, 21, .35); } }
.lcp-puntos { margin-left: auto; margin-right: 8px; display: flex; gap: 6px; }
.lcp-puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.lcp-puntos i.visto { background: rgba(255, 255, 255, .6); } .lcp-puntos i.on { background: #facc15; }
.lcp-nota { margin: 0 0 10px; font-size: 12px; color: #c7d2fe; }
.lcp-nota code { color: #fde68a; background: rgba(255, 255, 255, .12); padding: 1px 6px; border-radius: 5px; }
.lcp-trainer-modal { position: absolute; inset: 0; z-index: 20; background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center; }
.lcp-trainer-box { position: relative; width: 92%; height: 92%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.lcp-trainer-x { position: absolute; top: 8px; right: 8px; z-index: 5; border: 0; background: #0f2557; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.lcp-iframe-url { display: block; padding: 6px 54px 6px 12px; background: #eef2f7; color: #64748b; font: 12px ui-monospace, Consolas, monospace; border-bottom: 1px solid #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcp-iframe { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.lcp-iframe > .j-escena { min-height: 100%; }
.j-pregunta.entrenador .j-alt.bien { outline: 3px solid #22c55e; }
@media (prefers-reduced-motion: reduce) { .lcp-h.nav.invita { animation: none; } }
.j-marco.quieto .lcp-h.nav.invita { animation: none; }
@media (max-width: 1100px) { .lcp-trainer-slide { grid-template-columns: minmax(0, 1fr); gap: 20px; } .lcp-titulo-azul { font-size: 34px; } }

.j-capsula { flex: 1; background: #f5f3ff; color: #1e1b4b; display: flex; flex-direction: column; }
.j-cap-barra { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.j-cap-barra .j-barra { flex: 1; }
.j-cap-cuerpo { flex: 1; padding: 30px 40px; max-width: 860px; margin: 0 auto; width: 100%; }
.j-cap-cuerpo h3 { font-size: 26px; margin: 0 0 10px; }
.j-cap-pie { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 22px; background: #fff; border-top: 1px solid #e5e7eb; }
.j-cap-nota { margin-right: auto; color: #6b7280; }
.j-ejemplo { background: #fff; border-radius: 18px; padding: 18px 22px; border: 2px dashed #c4b5fd; }
.j-solucion { color: #065f46; }
.j-feedback { font-weight: 800; color: #4338ca; }

/* ALU-06: la pregunta */
.j-contenido.evaluador { display: flex; gap: 20px; align-items: flex-start; padding-top: 30px; }
.j-pregunta { flex: 1; max-width: 860px; padding: 0; overflow: hidden; }
.j-preg-cab { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #ede9fe; }
.j-preg-cab > div { flex: 1; }
.j-preg-cab b { font-size: 18px; }
.j-preg-cab .j-barra { margin-top: 8px; }
.j-porc { font-size: 20px; }
.j-conexion { font-size: 12px; font-weight: 800; color: #15803d; background: #dcfce7; padding: 3px 10px; border-radius: 99px; }
.j-conexion.off { color: #92400e; background: #fef3c7; }
.j-preg-cuerpo { padding: 26px 34px 10px; text-align: center; }
.enunciado { font-size: 26px; font-weight: 800; line-height: 1.5; color: #1e1b4b; }
.j-indica { color: #4b5563; margin: 10px 0 18px; }
.j-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 700px; margin: 0 auto; }
.j-alt { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; border: 2px solid #c4b5fd; background: #fff; cursor: pointer;
  font: inherit; font-size: 22px; font-weight: 800; color: #1e1b4b; text-align: left; min-height: 74px; }
.j-alt:hover:not(:disabled) { border-color: #7c3aed; background: #faf5ff; }
.j-alt:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.j-alt .letra { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: #6d28d9; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.j-alt.elegida { border-color: #6d28d9; background: #ede9fe; box-shadow: 0 0 0 3px rgba(109, 40, 217, .25); }
.j-alt.bien { border-color: #16a34a; background: #dcfce7; }
.j-alt.mal { border-color: #f59e0b; background: #fef3c7; }
.j-alt:disabled { cursor: default; }
.practica .j-alt { font-size: 18px; min-height: 60px; }
.j-preg-pie { display: flex; align-items: center; gap: 12px; padding: 18px 24px; justify-content: flex-end; }
.j-guardado { margin-right: auto; font-size: 13.5px; font-weight: 700; color: #15803d; }
.j-acompana { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; }
.burbuja.arriba { max-width: 230px; }
/* Fracciones y números mixtos, sin MathML ni CDN */
.fr { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; line-height: 1.05; margin: 0 2px; font-size: .82em; }
.fr > span:first-child { border-bottom: 2.5px solid currentColor; padding: 0 3px 1px; }
.fr > span:last-child { padding: 1px 3px 0; }
.mx { display: inline-flex; align-items: center; gap: 2px; }
.graf { width: 100%; max-width: 360px; display: block; margin: 12px auto; }
.graf text { font-size: 10px; fill: #4b5563; font-family: inherit; }
.graf-eje { stroke: #e5e7eb; }
.graf-barra { fill: #8b5cf6; } .graf-barra.b2 { fill: #f97316; } .graf-vacio { fill: #fff; stroke: #8b5cf6; stroke-width: 1.5; }

/* Calculando, resultado y revelación */
.j-girando { width: 64px; height: 64px; border-radius: 50%; border: 7px solid #ede9fe; border-top-color: #7c3aed; animation: gira 1s linear infinite; margin: 0 auto 12px; }
@keyframes gira { to { transform: rotate(360deg); } }
#calculando { text-align: center; }
.j-resultado { display: grid; grid-template-columns: auto 1.4fr 1fr 1fr; gap: 20px; align-items: center; width: min(1000px, 100%); }
.j-medalla { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(#a78bfa, #6d28d9); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #ede9fe; }
.j-medalla .estr { width: 76px; height: 76px; }
.j-res-txt h2 { font-size: 40px; margin: 0; }
.j-res-txt p { margin: 4px 0 0; font-size: 17px; color: #374151; }
.j-res-estr, .j-res-desemp { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.j-res-estr small, .j-res-desemp small { color: #6d28d9; font-weight: 800; }
.j-res-estr .estr { width: 44px; height: 44px; }
.j-res-estr .estr:not(.on) { fill: #e5e7eb; stroke: #cbd5e1; }
.anillo { width: 104px; height: 104px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 9; }
.anillo-fondo { stroke: #ede9fe; } .anillo-valor { stroke: #6d28d9; stroke-linecap: round; }
.anillo text { transform: rotate(90deg); transform-origin: 50px 50px; font-size: 22px; font-weight: 900; fill: #1e1b4b; }
.isla-nueva { position: relative; }
.capa-isla, .capa-niebla { transition: opacity 2s ease, transform 2s ease, filter 2s ease; }
.capa-niebla { position: absolute; inset: 0 0 auto 0; }
.revelando .capa-isla { opacity: .25; transform: scale(.9); filter: blur(4px); }
.revelando .capa-niebla { opacity: 1; }
.revelando .isla-nueva .isla-rotulo { opacity: 0; transition: opacity .6s 1.6s; }
.revelando.revelada .capa-isla { opacity: 1; transform: none; filter: none; }
.revelando.revelada .capa-niebla { opacity: 0; transform: scale(1.4); pointer-events: none; }
.revelando.revelada .isla-nueva .isla-rotulo { opacity: 1; }

/* ALU-09: progreso */
.progreso .j-panel { margin-bottom: 16px; }
.j-panel h3 { margin: 0 0 12px; font-size: 20px; }
.tipos-estr { display: flex; gap: 14px; }
.tipos-estr > div { flex: 1; background: #f5f3ff; border-radius: 14px; padding: 12px; text-align: center; }
.tipos-estr .estr { width: 34px; height: 34px; }
.tipos-estr b { display: block; font-size: 24px; }
.tipos-estr small { color: #6b7280; }
.prog-mundos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prog-mundo { display: flex; gap: 12px; align-items: center; background: #f8fafc; border-radius: 16px; padding: 10px 14px; }
.prog-mundo > div:last-child { flex: 1; }
.prog-arte .isla-svg { width: 90px; height: auto; }
.prog-mundo small { color: #6b7280; }
.prog-ruta { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.prog-ruta i { width: 12px; height: 12px; border-radius: 50%; background: #facc15; }
.prog-ruta i.pr-REMEDIAL { background: #2dd4bf; } .prog-ruta i.pr-SUPERIOR { background: #c084fc; }
.logros { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.logro { background: #f1f5f9; border-radius: 14px; padding: 12px 6px; text-align: center; opacity: .55; }
.logro.on { background: #fef9c3; opacity: 1; }
.logro span { font-size: 28px; display: block; }
.logro small { font-weight: 700; }
.logro em { display: block; font-style: normal; font-size: 11px; color: #64748b; }
.esqueleto .sk { min-height: 360px; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.esqueleto .sk i { display: block; height: 120px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.3), rgba(255,255,255,.12)); background-size: 200% 100%; animation: brillo 1.2s linear infinite; }
.esqueleto .sk i:nth-child(2), .esqueleto .sk i:nth-child(3) { height: 26px; }
@keyframes brillo { to { background-position: -200% 0; } }

.j-nav { display: flex; justify-content: space-around; background: linear-gradient(#13256b, #0d1b4f); padding: 8px 14px 10px; position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.08); }
.j-nav-item { display: flex; align-items: center; gap: 9px; font: inherit; font-size: 15px; font-weight: 700; color: #dbeafe; background: none; border: none; cursor: pointer; padding: 10px 20px; border-radius: 14px; }
.j-nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.j-nav-item.activo { background: linear-gradient(#8b5cf6, #6d28d9); color: #fff; box-shadow: 0 0 16px rgba(139, 92, 246, .6); }
.j-nav-item:focus-visible { outline: 3px solid #fde047; }

/* Sin movimiento: el interruptor de la maqueta y la preferencia del sistema */
.j-marco.quieto *, .j-marco.quieto *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .j-marco *, .j-marco *::before { animation: none !important; transition: none !important; }
}

/* El ancho: con el lateral abierto, el juego tiene ~300 px menos */
@media (max-width: 1500px) { .guia { flex-basis: 250px; } .ruta { margin-left: 60px; } .isla-actual .isla-svg { width: 280px; } .isla-anterior .isla-svg, .isla-proxima .isla-svg { width: 200px; } }
@media (max-width: 1300px) { #vista-alumno:not([hidden]) { flex-direction: column-reverse; } .guia { position: static; flex: none; width: 100%; } }
@media (max-width: 1100px) {
  .mundos { grid-template-columns: 1fr 1fr; }
  .ruta { margin: 10px 0 0; flex-wrap: wrap; }
  .j-mision { grid-template-columns: 1fr; margin-right: 0; }
  .j-mision-prog { border-left: 0; padding-left: 0; }
  .j-recuerda, .j-burbuja-mascota, .j-aviso-mascota { display: none; }
  .j-resultado { grid-template-columns: 1fr; text-align: center; }
  .j-medalla { margin: 0 auto; }
  .mascota.grande { display: none; }
}
/* Móvil: ruta vertical, no la composición horizontal comprimida (§19.8) */
@media (max-width: 700px) {
  .dm { padding: 12px; }
  .mundos { grid-template-columns: 1fr; }
  .ruta { flex-direction: column-reverse; }
  .camino { flex-direction: column; margin: 0; }
  .j-alts { grid-template-columns: 1fr; }
  .j-cifras { margin-left: 0; }
  .j-nav-item { padding: 8px; font-size: 0; }
  .j-saludo h2 { font-size: 30px; } .j-saludo h2 span { font-size: 40px; }
  .logros { grid-template-columns: repeat(3, 1fr); }
  .prog-mundos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EL PROFESOR Y LA ADMINISTRACIÓN: el lenguaje de WebClass
   ========================================================================== */
.pro-cab { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--borde); border-radius: var(--r-grande); padding: 12px 18px; margin-bottom: 16px; }
.pro-marca { margin: 0 12px 4px 0; font-size: 22px; color: #1e3a8a; font-weight: 800; }
.pro-marca b { color: var(--azul); }
.pro-cab .campo select { min-width: 190px; }
.pro-quien { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pro-quien small { display: block; color: var(--texto-suave); font-size: 12px; }
.av-prof, .av-al, .av-grande { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; color: #fff; background: #1b8bbd; }
.av-prof { width: 40px; height: 40px; background: #334155; }
.av-al { width: 26px; height: 26px; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.av-grande { width: 74px; height: 74px; font-size: 26px; flex: 0 0 74px; background: linear-gradient(135deg, #23a6df, #8b5cf6); }
.tit-informe { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.tit-informe > div:first-child { flex: 1; min-width: 280px; }
.tit-informe h1 { margin: 0 0 4px; font-size: 23px; }
.tit-informe p { margin: 0; color: var(--texto-medio); font-size: 13.5px; max-width: 900px; }
.cod { display: inline-block; font-size: 12.5px; font-weight: 800; background: var(--azul-suave); color: var(--azul-oscuro); border-radius: 6px; padding: 2px 7px; vertical-align: 3px; }
.acciones-informe { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.migas-pro { font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.enlace { background: none; border: none; padding: 0; font: inherit; color: var(--azul-oscuro); cursor: pointer; text-align: left; }
.enlace:hover { text-decoration: underline; }
.enlace.con-ic { margin-top: 10px; font-weight: 600; }
.campo.en-linea { flex-direction: row; align-items: center; gap: 8px; }
.bloque { padding: 16px 18px; margin-bottom: 16px; }
.bloque h2 { font-size: 16px; margin: 0 0 10px; }
.bloque h3 { font-size: 13.5px; margin: 14px 0 6px; color: var(--texto-medio); }
.bloque-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bloque-cab h2 { flex: 1; margin: 0; }
.sub-bloque { margin: -6px 0 12px; font-size: 12.5px; color: var(--texto-suave); }
.vacio { padding: 18px; text-align: center; color: var(--texto-medio); border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r); margin: 6px 0; }
.nota-pie, .actualizado { font-size: 12.5px; color: var(--texto-suave); margin: 8px 0 0; }
.ayuda { color: var(--texto-suave); cursor: help; font-size: 13px; font-weight: 400; }
.rojo { color: #d14b68; } .naranjo { color: #df7a2c; } .verde { color: #1f9b76; }
.sube { color: #1f9b76; } .baja { color: #d14b68; }
.ok { color: #1f9b76; font-weight: 700; } .mal { color: #d14b68; font-weight: 700; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { display: flex; align-items: center; gap: 10px; padding: 14px 16px; justify-content: space-between; }
.kpi-t { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-medio); }
.kpi-v { margin: 4px 0 2px; font-size: 30px; font-weight: 800; color: #1e3a8a; line-height: 1.1; }
.kpi-v small { font-size: 14px; color: var(--texto-medio); font-weight: 600; }
.kpi-s { margin: 0; font-size: 12.5px; color: var(--texto-medio); }
.kpi-d { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; }
.kpi-d span { color: var(--texto-suave); font-weight: 400; }
.anillo-kpi { width: 78px; height: 78px; flex: 0 0 78px; transform: rotate(-90deg); }
.anillo-kpi circle { fill: none; stroke-width: 10; }
.anillo-kpi .af { stroke: #eef1f6; } .anillo-kpi .av { stroke-linecap: round; }
.anillo-kpi text { transform: rotate(90deg); transform-origin: 50px 50px; font-size: 20px; font-weight: 800; fill: var(--texto); }
.kpi-ejes { display: block; }
.anillos-ejes { display: flex; gap: 6px; margin-top: 6px; }
.anillos-ejes > div { text-align: center; font-size: 11.5px; color: var(--texto-medio); }
.anillos-ejes .anillo-kpi { width: 58px; height: 58px; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: bottom; }
.tabla th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; }
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla td small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.tabla .c { text-align: center; }
.tabla.compacta td, .tabla.compacta th { padding: 6px 8px; }
.ordenable { cursor: pointer; user-select: none; }
.ordenable:hover, .orden-asc, .orden-desc { color: var(--azul-oscuro) !important; }
.orden-asc::after { content: " ▲"; font-size: 9px; } .orden-desc::after { content: " ▼"; font-size: 9px; }
.ordenable:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.fila-clic { cursor: pointer; }
.fila-clic:hover td, li.fila-clic:hover { background: #f5fafd; }
.desc-oa { font-size: 12.5px; color: var(--texto-medio); max-width: 420px; }
.fila-inactiva td { background: #fffaf3; }
.pastilla-dom { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--rojo-suave); color: #c9435f; font-weight: 700; font-size: 12.5px; }
.pastilla-alerta { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--naranja-suave); color: var(--naranja-oscuro); font-weight: 800; text-align: center; font-size: 12px; }
.pastilla-res { display: inline-block; padding: 1px 9px; border-radius: 99px; font-weight: 700; font-size: 12px; margin-left: 6px; }
.r-ok { background: var(--verde-suave); color: #1f9b76; } .r-medio { background: var(--c-amarillo); color: #a67b1b; } .r-bajo { background: var(--rojo-suave); color: #c9435f; }
.ic-eje { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 800; vertical-align: middle; }

/* Estados del OA y tipos de asignación: color + icono + texto, siempre */
.eo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 1px 8px 1px 6px; border-radius: 99px; white-space: nowrap; }
.eo i { font-style: normal; }
.e-dom { background: #dff5ec; color: #17805f; } .e-val { background: #e8f6fb; color: #1b7fae; } .e-bre { background: #fde6eb; color: #c13d5c; }
.e-ins { background: #fdf3d6; color: #a67b1b; } .e-noe { background: #eef1f6; color: #6b7787; }
.tp { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.t-niv { background: #e7f5fd; color: #1b8bbd; } .t-rem { background: #ccfbf1; color: #0f766e; } .t-sup { background: #f3e8ff; color: #7e22ce; }
.pts { display: inline-flex; gap: 3px; vertical-align: middle; }
.pts i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .22; }
.pts i.on { opacity: 1; }
.leyenda-estados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.apilada { display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 1px; min-width: 160px; }
.apilada i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10.5px; font-weight: 800; min-width: 3px; }
.apilada .e-dom { background: #34c79b; color: #fff; } .apilada .e-val { background: #8fd0ea; color: #0f4c6b; } .apilada .e-bre { background: #e0637e; color: #fff; }
.apilada .e-ins { background: #f2c14e; color: #5e430b; } .apilada .e-noe { background: #d5dbe4; color: #4b5563; }
.barra-h { display: inline-block; width: 90px; height: 7px; border-radius: 5px; background: #eef1f6; overflow: hidden; vertical-align: middle; margin-left: 6px; }
.barra-h i { display: block; height: 100%; background: var(--azul); border-radius: 5px; }

/* Panel */
.grid-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grid-panel > section { margin: 0; min-width: 0; overflow-x: auto; }
/* Con el lateral abierto (296 px) el panel tiene menos ancho que la ventana. */
@media (max-width: 1800px) { .wc-app:not(.plegado) .grid-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.grid-heat { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ejes-cobertura { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eje-cob { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 1px solid transparent; border-radius: var(--r); padding: 8px 4px; cursor: pointer; font: inherit; color: var(--texto); }
.eje-cob:hover { border-color: var(--azul-borde); background: #f7fbfe; }
.eje-cob.apagado { opacity: .4; }
.eje-cob b { font-size: 12px; text-transform: uppercase; margin: 4px 0; text-align: center; }
.eje-dom { font-size: 22px; font-weight: 800; }
.eje-cob small { font-size: 10.5px; color: var(--texto-suave); text-align: center; }
.eje-oa { font-weight: 700; font-size: 13px; margin-top: 4px; }
.col-graf { width: 40px; height: 110px; background: #f1f4f8; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; margin-top: 8px; overflow: hidden; }
.col-graf i { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.linea-dias { list-style: none; padding: 0; margin: 0; }
.linea-dias li { display: grid; grid-template-columns: 90px 16px 1fr; gap: 8px; align-items: start; padding: 6px 0; position: relative; }
.ld-fecha b { display: block; font-size: 12.5px; } .ld-fecha small { color: var(--texto-suave); font-size: 11.5px; }
.ld-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); margin-top: 4px; box-shadow: 0 0 0 3px var(--azul-suave); }
.ld-txt { font-size: 13px; } .ld-txt small { display: block; color: var(--texto-suave); }
.lista-alertas-mini { list-style: none; padding: 0; margin: 0; }
.lista-alertas-mini li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.lista-alertas-mini li > span:nth-child(2) { flex: 1; }
.lista-alertas-mini small { display: block; color: var(--texto-medio); font-size: 12px; }
.ic-alerta { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #eef1f6; }
.al-estancamiento, .al-regresion { background: var(--rojo-suave); } .al-remedial_reiterado, .al-inactividad { background: var(--naranja-suave); }
.al-confianza { background: var(--azul-suave); } .al-superior { background: #f3e8ff; } .al-brecha_grupal { background: var(--c-amarillo); } .al-brecha_contenido { background: #eef1f6; }

/* Catálogo de informes */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.informe-card { text-align: left; padding: 16px; cursor: pointer; font: inherit; color: var(--texto); border: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-left: 4px solid var(--azul); }
.informe-card:hover { border-color: var(--azul); box-shadow: var(--sombra-media); }
.informe-card b { flex: 0 0 100%; font-size: 15px; margin-top: 4px; }
.informe-card small { color: var(--texto-medio); font-size: 12.5px; }
.tag-fase { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; }
.tag-fase.mvp { background: var(--verde-suave); color: #1f9b76; } .tag-fase.f2 { background: var(--c-amarillo); color: #a67b1b; }
.tag-forma { font-size: 11px; color: var(--texto-suave); }

/* Listas */
.lista-oa { list-style: none; margin: 0; padding: 0; }
.lista-oa li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.lista-oa li > span:nth-child(2), .lista-oa li > span:first-child:not(.ic-eje) { flex: 1; }
.lista-oa small { display: block; font-size: 12px; color: var(--texto-medio); }
.lista-simple { margin: 0; padding-left: 18px; font-size: 13px; }
.lista-simple li { margin-bottom: 6px; }
.lista-simple small { display: block; color: var(--texto-suave); }
.lista-acciones { list-style: none; padding: 0; margin: 0; }
.lista-acciones li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.lista-acciones li > span:first-child { font-size: 18px; }
.lista-acciones small { display: block; color: var(--texto-medio); }
.caja-aviso { background: var(--naranja-suave); border-radius: var(--r); padding: 10px 12px; font-size: 13px; color: #7a3d17; margin: 8px 0; }
.caja-aviso b { display: block; color: var(--naranja-oscuro); }
.caja-riesgo { background: var(--rojo-suave); border-radius: var(--r); padding: 12px; color: #a32b48; }
.caja-riesgo b { display: block; font-size: 17px; }
.mini-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.mini-kpis > div { flex: 1; min-width: 90px; background: #f7f9fc; border-radius: var(--r); padding: 8px 10px; }
.mini-kpis b { display: block; font-size: 18px; color: #1e3a8a; }
.mini-kpis small { color: var(--texto-medio); font-size: 11.5px; }
.chips-oa { margin: -6px 0 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn.ancho { width: 100%; margin-top: 10px; }
.acciones-cajon { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Heatmap */
.filtros-heat { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 12px 16px; margin-bottom: 16px; }
.segmento { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--r-capsula); overflow: hidden; background: #fff; }
.segmento button { font: inherit; font-size: 13px; border: none; background: none; padding: 6px 14px; cursor: pointer; color: var(--texto-medio); }
.segmento button.activo { background: var(--azul-suave); color: var(--azul-oscuro); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--azul); border-radius: var(--r-capsula); }
.segmento.grande { margin-bottom: 10px; }
.segmento.grande b { font-size: 11.5px; background: #eef1f6; border-radius: 99px; padding: 0 6px; margin-left: 4px; }
.hm-caja { overflow: auto; max-height: 640px; border: 1px solid var(--borde); border-radius: var(--r); }
.heatmap { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.heatmap th { position: sticky; top: 0; background: #fff; z-index: 2; font-size: 11px; font-weight: 700; color: var(--texto-medio); padding: 4px; white-space: nowrap; }
.heatmap .hm-grupos th { top: 0; font-size: 10.5px; text-transform: uppercase; color: #fff; background: var(--c); border-radius: 5px; padding: 3px; }
.heatmap .hm-grupos th:first-child { background: #fff; }
.heatmap thead tr:nth-child(2) th { top: 22px; }
.heatmap .hm-oa .enlace { font-size: 11px; font-weight: 700; color: var(--texto-medio); }
.heatmap .hm-oa.vertical { writing-mode: vertical-rl; transform: rotate(180deg); height: 90px; }
.heatmap .hm-al { position: sticky; left: 0; background: #fff; z-index: 1; white-space: nowrap; padding: 2px 8px 2px 2px; font-size: 12.5px; }
.heatmap td.hm { width: 44px; min-width: 44px; height: 32px; text-align: center; border-radius: 5px; cursor: pointer; }
.heatmap td.hm:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 1px; }
.heatmap td.hm.e-dom { background: #b9ebd6; color: #17805f; } .heatmap td.hm.e-val { background: #cfeef9; color: #1b7fae; }
.heatmap td.hm.e-bre { background: #f8c3cf; color: #b0304f; } .heatmap td.hm.e-ins { background: #fbe6ad; color: #8a6514; } .heatmap td.hm.e-noe { background: #eef1f6; color: #97a1b0; }
.heatmap td.hm.c0 { background: #eef1f6; color: #97a1b0; } .heatmap td.hm.c1 { background: #dbeafe; color: #1e3a8a; } .heatmap td.hm.c2 { background: #93c5fd; color: #1e3a8a; } .heatmap td.hm.c3 { background: #2563eb; color: #fff; }
.heatmap.modo-tabla td.hm { width: auto; min-width: 80px; font-size: 11.5px; font-weight: 700; }
.leyendas { display: flex; gap: 28px; flex-wrap: wrap; font-size: 12px; color: var(--texto-medio); margin-top: 12px; align-items: center; }
.leyendas b { margin-right: 8px; color: var(--texto); }
.ley-c { display: inline-block; width: 18px; height: 14px; border-radius: 4px; vertical-align: middle; text-align: center; font-size: 10px; line-height: 14px; }
.ley-c.e-dom { background: #b9ebd6; } .ley-c.e-val { background: #cfeef9; } .ley-c.e-bre { background: #f8c3cf; } .ley-c.e-ins { background: #fbe6ad; } .ley-c.e-noe { background: #eef1f6; }
.ley-c.c0 { background: #eef1f6; } .ley-c.c1 { background: #dbeafe; } .ley-c.c2 { background: #93c5fd; } .ley-c.c3 { background: #2563eb; }

/* Detalle OA */
.progresion-mini { display: flex; align-items: center; gap: 10px; overflow-x: auto; }
.progresion-mini .col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 170px; }
.progresion-mini .flecha { font-size: 22px; color: var(--texto-suave); }
.nodo-oa { text-align: left; font: inherit; background: #f7f9fc; border: 1px solid var(--borde); border-radius: var(--r); padding: 8px 10px; cursor: pointer; color: var(--texto); }
.nodo-oa b { display: block; font-size: 13px; color: #1e3a8a; }
.nodo-oa small { display: block; font-size: 11.5px; color: var(--texto-medio); }
.nodo-oa span { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 3px; }
.nodo-oa.actual { background: var(--azul-suave); border: 2px solid var(--azul); cursor: default; }
.nodo-oa:hover:not(.actual) { border-color: var(--azul-borde); }

/* Alertas */
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip-f { font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--borde-fuerte); background: #fff; cursor: pointer; color: var(--texto-medio); }
.chip-f.activo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-oscuro); font-weight: 700; }
.lista-alertas { list-style: none; padding: 0; margin: 0; }
.alerta { display: flex; gap: 12px; background: #fff; border: 1px solid var(--borde); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.alerta.est-nueva { border-left: 4px solid var(--naranja); } .alerta.est-resuelta { opacity: .7; }
.al-cuerpo { flex: 1; }
.al-cuerpo p { margin: 0 0 4px; font-size: 13px; }
.al-tit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-estado { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; margin-left: auto; }
.al-estado.e-nueva { background: var(--naranja-suave); color: var(--naranja-oscuro); } .al-estado.e-vista { background: #eef1f6; color: #6b7787; }
.al-estado.e-seguimiento { background: var(--azul-suave); color: var(--azul-oscuro); } .al-estado.e-resuelta { background: var(--verde-suave); color: #1f9b76; }
.al-fecha { font-size: 11.5px; color: var(--texto-suave); }
.al-det { color: var(--texto-medio); } .al-acc { color: var(--texto); }
.al-notas { margin: 6px 0; padding-left: 18px; font-size: 12.5px; color: var(--texto-medio); }
.al-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Ficha */
.ficha-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ficha-cab > div:nth-child(2) { flex: 1; }
.ficha-cab h1 { margin: 0; font-size: 26px; }
.ficha-cab p { margin: 2px 0 0; color: var(--texto-medio); font-size: 13.5px; }
.ejes-ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eje-ficha { border: 1px solid var(--borde); border-top: 4px solid var(--c); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.ef-tit { margin: 0 0 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ef-cifras { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 12.5px; color: var(--texto-medio); }
.ef-cifras b { color: var(--texto); }
.ef-mision { margin: 4px 0 8px; font-size: 12.5px; min-height: 34px; }
.tray-caja { overflow-x: auto; }
.tray { display: block; height: 250px; }
.tray-carril { font-size: 11px; fill: #6b7787; font-weight: 700; }
.tray-guia { stroke: #eef1f6; stroke-width: 2; }
.tray-linea { stroke: #34c79b; stroke-width: 3; fill: none; }
.tray-linea.baja { stroke: #f59e0b; stroke-dasharray: 6 4; } .tray-linea.vuelve { stroke: #2563eb; stroke-dasharray: 6 4; }
.tray-nodo circle { stroke: #fff; stroke-width: 3; }
.tray-nodo:focus-visible circle { stroke: #1e3a8a; }
.tn-ok { fill: #34c79b; } .tn-medio { fill: #f2c14e; } .tn-bajo { fill: #e0637e; } .tn-curso { fill: #8b5cf6; }
.tray-diag { fill: #f2c14e; stroke: #fff; stroke-width: 2; }
.tray-ic { font-size: 9.5px; font-weight: 800; fill: #fff; pointer-events: none; }
.tray-et { font-size: 10px; fill: #4b5563; font-weight: 700; }
.leyenda-tray { font-size: 12px; color: var(--texto-medio); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.lt { padding: 0 7px; border-radius: 99px; color: #fff; font-weight: 700; font-size: 11px; }
.lt.ok { background: #34c79b; } .lt.medio { background: #f2c14e; color: #5e430b; } .lt.bajo { background: #e0637e; } .lt.curso { background: #8b5cf6; }
.lt-linea::before { content: ""; display: inline-block; width: 24px; border-top: 3px dashed; vertical-align: middle; margin-right: 4px; }
.lt-linea.baja::before { color: #f59e0b; } .lt-linea.vuelve::before { color: #2563eb; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo > li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.lt-f { color: var(--texto-suave); font-size: 12px; }
.linea-tiempo p { margin: 4px 0; }
.lt-as.t-REMEDIAL { background: #f2fdfa; } .lt-as.t-SUPERIOR { background: #fbf6ff; }
.lt-nota { background: #fffbea; }
.lt-med { background: #f5f7ff; }
details summary { cursor: pointer; color: var(--azul-oscuro); font-size: 12.5px; margin-top: 4px; }
.dl-motivo { display: grid; grid-template-columns: 170px 1fr; gap: 4px 10px; font-size: 12.5px; margin: 8px 0; background: #f7f9fc; border-radius: var(--r); padding: 10px 12px; }
.dl-motivo dt { color: var(--texto-suave); font-weight: 700; } .dl-motivo dd { margin: 0; }

/* Remediales, actividad, crecimiento */
.embudo-v { display: flex; flex-direction: column; gap: 8px; }
.emb-paso small { display: block; font-size: 12px; color: var(--texto-medio); }
.emb-barra { display: block; border-radius: 6px; padding: 4px 8px; color: #fff; min-width: 34px; }
.e1 .emb-barra { background: #2dd4bf; } .e2 .emb-barra { background: #5eead4; color: #0f766e; } .e3 .emb-barra { background: #34c79b; } .e4 .emb-barra { background: #f2c14e; color: #5e430b; }
.graf-sem { display: flex; gap: 6px; align-items: flex-end; height: 160px; padding-top: 10px; }
.graf-sem > div { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.graf-sem span { width: 100%; max-width: 44px; background: var(--azul); border-radius: 6px 6px 0 0; display: flex; justify-content: center; min-height: 2px; position: relative; }
.graf-sem span b { position: absolute; top: -17px; font-size: 11px; color: var(--texto-medio); }
.graf-sem small { font-size: 10.5px; color: var(--texto-suave); margin-top: 4px; }
.lista-crec { list-style: none; margin: 0; padding: 0; }
.lista-crec li { display: grid; grid-template-columns: 90px 1fr 60px; gap: 8px; align-items: center; padding: 5px 2px; font-size: 12.5px; }
.crec { position: relative; height: 12px; background: #eef1f6; border-radius: 6px; overflow: hidden; }
.crec i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.crec .cb { background: #cbd5e1; z-index: 1; height: 50%; top: 25%; } .crec .ca { background: var(--azul); opacity: .8; }
.lt-b::before, .lt-a::before { content: ""; display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.lt-b::before { background: #cbd5e1; } .lt-a::before { background: var(--azul); }

/* Árbol, dispersión */
.informe-anual .ia-cab { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--borde); padding-bottom: 10px; margin-bottom: 10px; }
.informe-anual .ia-cab > div:first-child { flex: 1; }
.informe-anual h2 { font-size: 22px; margin: 2px 0; }
.ia-cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.arbol { width: 100%; height: auto; }
.tronco { fill: #8a5a2b; } .suelo { fill: #e6efe1; }
.rama { fill: none; stroke: #8a5a2b; stroke-width: 9; stroke-linecap: round; }
.rama-et { font-size: 13px; font-weight: 800; fill: #3c4858; }
.hoja { stroke: #fff; stroke-width: 1.5; }
.hoja.e-dom { fill: #34c79b; } .hoja.e-val { fill: #8fd0ea; } .hoja.e-bre { fill: #e0637e; } .hoja.e-ins { fill: #f2c14e; } .hoja.e-noe { fill: #d5dbe4; }
.fruto { stroke: #fff; stroke-width: 2; } .fruto.rem { fill: #2dd4bf; } .fruto.sup { fill: #a855f7; }
.fruto-ley { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; } .fruto-ley.rem { background: #2dd4bf; } .fruto-ley.sup { background: #a855f7; }
.dispersion { width: 100%; height: auto; }
.zona { opacity: .5; } .z-dom { fill: #dff5ec; } .z-val { fill: #e8f6fb; } .z-bre { fill: #fde6eb; } .z-ins { fill: #fdf3d6; }
.zona-t { font-size: 12px; font-weight: 800; fill: #6b7787; }
.eje-t { font-size: 10.5px; fill: #6b7787; } .eje-t.b { font-weight: 800; font-size: 12px; }
.pt { stroke: #fff; stroke-width: 1; cursor: pointer; }
.pt.e-dom { fill: #34c79b; } .pt.e-val { fill: #1b8bbd; } .pt.e-bre { fill: #e0637e; } .pt.e-ins { fill: #e2a52a; }

/* Cajón, modal, tooltip y avisos */
.cajon-fondo { position: fixed; inset: 0; background: rgba(31, 39, 51, .35); z-index: 60; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 61; box-shadow: -10px 0 30px rgba(31, 39, 51, .2); display: flex; flex-direction: column; }
.cajon-cab { display: flex; gap: 10px; align-items: flex-start; padding: 18px 22px 12px; border-bottom: 1px solid var(--borde); }
.cajon-cab > div { flex: 1; }
.cajon-cab h2 { margin: 2px 0 0; font-size: 15px; color: var(--texto-medio); font-weight: 600; }
.cajon-rotulo { margin: 0; font-size: 16px; font-weight: 800; }
.cajon-cerrar, .modal-cerrar { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.cajon-cuerpo { padding: 16px 22px 30px; overflow-y: auto; font-size: 13px; }
.modal-fondo { position: fixed; inset: 0; background: rgba(31, 39, 51, .45); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: var(--r-grande); width: 100%; max-width: 540px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(31,39,51,.25); }
.modal.modal-ancho { max-width: 760px; }
.modal-cab { display: flex; align-items: center; padding: 16px 20px 6px; } .modal-cab h3 { margin: 0; flex: 1; font-size: 17px; }
.modal-cuerpo { padding: 8px 20px; overflow-y: auto; font-size: 13.5px; }
.modal-cuerpo .campo { margin-bottom: 10px; }
.modal-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; }
.lista-check { max-height: 300px; overflow: auto; border: 1px solid var(--borde); border-radius: var(--r); padding: 6px 10px; }
.lista-check .check { padding: 4px 0; }
.tooltip { position: fixed; z-index: 90; max-width: 300px; background: #1f2937; color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.tooltip b { color: #fde68a; }
.avisos { position: fixed; bottom: 22px; left: 50%; translate: -50% 0; z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.aviso { background: #2f3a4b; color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: var(--r-capsula); box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: opacity .35s; }
.aviso-ok { background: #1f9b76; } .aviso-mal { background: #c9435f; }

@media (max-width: 1500px) { .grid-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kpis.cinco { grid-template-columns: repeat(3, 1fr); } .grid-heat { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .kpis { grid-template-columns: 1fr 1fr; } .grid-panel, .grid-2-1 { grid-template-columns: minmax(0, 1fr); } .ejes-ficha { grid-template-columns: 1fr 1fr; } .ia-cuerpo { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .kpis, .kpis.cinco, .ejes-ficha, .ejes-cobertura { grid-template-columns: 1fr; } .linea-tiempo > li { grid-template-columns: 1fr; } .dl-motivo { grid-template-columns: 1fr; } }

/* ==========================================================================
   LA ADMINISTRACIÓN PEDAGÓGICA (ADM-01 a 04)
   ========================================================================== */
.adm-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--borde); border-radius: var(--r-grande); padding: 12px 18px; margin-bottom: 16px; }
.adm-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-nav button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: var(--r-capsula); border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto-medio); cursor: pointer; }
.adm-nav button small { display: block; font-size: 10.5px; font-weight: 800; color: var(--texto-suave); letter-spacing: .04em; }
.adm-nav button.activo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-oscuro); }
.adm-nav button.activo small { color: var(--azul); }
.banda-version { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--texto-medio); background: #fff; border: 1px solid var(--borde); border-radius: var(--r); padding: 9px 14px; margin-bottom: 14px; }
.banda-version.borrador { background: var(--naranja-suave); border-color: #f3c89f; color: #7a3d17; }
.banda-acc { margin-left: auto; display: flex; gap: 8px; }
.crece { flex: 1; min-width: 220px; }
.fila-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila-campos > .campo { flex: 1; min-width: 120px; }
.campo-t { margin: 10px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-medio); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid-adm { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.panel-oa { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.po-cab { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.po-desc { margin: 0 0 12px; font-size: 13.5px; }
.po-tit { margin: 0 0 12px !important; font-size: 16px !important; color: var(--texto) !important; }
.po-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.po-grid small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.tabla-caja { overflow-x: auto; }
.tabla-caja.alto { max-height: 640px; overflow-y: auto; }
.tabla-caja.medio { max-height: 420px; overflow-y: auto; }
.tabla-caja.alto thead th, .tabla-caja.medio thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.adm-cuerpo code { white-space: nowrap; }
.adm-cuerpo .bloque p { font-size: 13.5px; margin: 0 0 8px; }
.tabla tr.sel td { background: var(--azul-suave); }
.tabla .desc-oa { min-width: 260px; }
.preg-txt { min-width: 300px; }
.preg-txt .graf, .preg-mini .graf { display: none; }
.lista-rel { list-style: none; margin: 0 0 10px; padding: 0; }
.lista-rel li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: var(--r); padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.lista-rel li > span:first-child, .nodo-rel { flex: 1; min-width: 160px; }
.lista-rel small { display: block; color: var(--texto-suave); font-size: 12px; }
.nodo-rel { background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--texto); }
.nodo-rel b { color: var(--azul-oscuro); }
.rel-meta { font-size: 12px; color: var(--texto-medio); display: flex; flex-direction: column; gap: 2px; }
.rel-meta em { color: var(--texto-suave); }
.quitar { background: none; border: 1px solid var(--borde-fuerte); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; color: var(--texto-suave); font-size: 16px; line-height: 1; }
.quitar:hover { color: #d14b68; border-color: #d14b68; }
.prio { display: inline-flex; gap: 2px; vertical-align: middle; }
.prio i { width: 7px; height: 7px; border-radius: 50%; background: #e2e8f0; }
.prio i.on { background: var(--azul); }
.preg-mini { font-size: 12.5px; color: var(--texto-medio); border-left: 3px solid var(--borde); padding-left: 8px; margin: 4px 0; }
.btn.ancho { width: 100%; margin-top: 14px; }
.interruptor { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; vertical-align: middle; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 99px; background: #cbd5e1; transition: background .15s; pointer-events: none; }
.interruptor span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--azul); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--azul-oscuro); outline-offset: 2px; }
.fila-int { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; }
/* El grafo */
.leyenda-grafo { font-size: 12px; color: var(--texto-medio); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.leyenda-grafo i { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid #64748b; margin-left: 8px; }
.leyenda-grafo .lg-p2 { border-top-style: dashed; border-top-width: 1.5px; }
.leyenda-grafo .lg-x { border-top-color: #cbd5e1; }
.grafo-caja { overflow: auto; border: 1px solid var(--borde); border-radius: var(--r); background: #fbfcfe; max-height: 620px; }
.grafo { display: block; max-width: none; touch-action: none; user-select: none; }
.g-nivel { font-size: 13px; font-weight: 800; fill: #64748b; }
.g-arista { fill: none; stroke: #64748b; stroke-width: 2; }
.g-arista.p2 { stroke-dasharray: 5 4; stroke-width: 1.4; }
.g-arista.otra { stroke: #cbd5e1; }
.g-arista.sel { stroke: var(--azul); stroke-width: 3; }
.g-nodo { cursor: grab; }
.g-nodo rect { fill: #fff; stroke: #cbd5e1; stroke-width: 1.5; }
.g-nodo:hover rect, .g-nodo:focus rect { stroke: var(--azul); }
.g-nodo:focus { outline: none; }
.g-nodo.sel rect { fill: var(--azul-suave); stroke: var(--azul); stroke-width: 2.5; }
.g-nodo.inactivo { opacity: .45; }
.g-cod { font-size: 13px; font-weight: 800; fill: #1e3a8a; }
.g-desc { font-size: 11px; fill: #64748b; }
.g-tirando { stroke: var(--azul); stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }
.zoom { display: flex; gap: 4px; }
.validacion p { margin: 4px 0; font-size: 13px; }
.val-error { color: #b4234a; } .val-aviso { color: #9a4d12; } .val-ok { color: #1f7a5e; }
/* Cápsulas y preguntas */
.chip-oa { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #eef2f7; color: #334155; margin: 1px 0; white-space: nowrap; }
.chip-oa.principal { background: var(--azul-suave); color: var(--azul-oscuro); }
.lista-check.corta { max-height: 170px; display: flex; flex-wrap: wrap; gap: 0 14px; }
.lista-check.corta .check { flex: 0 0 auto; }
.banco { display: inline-block; font-weight: 700; padding: 1px 8px; border-radius: 99px; font-size: 12px; }
.banco.b-ok { background: #def5ec; color: #1f7a5e; } .banco.b-justo { background: var(--naranja-suave); color: #9a4d12; } .banco.b-bajo { background: #fde4ea; color: #b4234a; }
.preg-prev { border: 1px solid var(--borde); border-radius: var(--r); padding: 12px; margin-bottom: 10px; font-size: 13.5px; }
.preg-prev .graf { max-width: 100%; }
.alts-adm { margin: 8px 0 0; padding-left: 22px; }
.alts-adm li { padding: 2px 0; }
.alts-adm li.correcta { color: #1f7a5e; font-weight: 700; }
input.corto { width: 70px; }
/* Calidad y parámetros */
.kpi.calidad .enlace { margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.kpi.calidad.mala { border-left: 4px solid #d14b68; }
.kpi.calidad.media { border-left: 4px solid #df7a2c; }
.grid-param { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid-param input[type=number] { max-width: 140px; }
.tablas-fijas { display: flex; gap: 14px; margin-top: 12px; }
.tablas-fijas .tabla { width: auto; }
@media (max-width: 1300px) { .grid-adm { grid-template-columns: minmax(0, 1fr); } .panel-oa { position: static; max-height: none; } }
@media (max-width: 900px) { .grid-param { grid-template-columns: 1fr; } }

/* Imprimir el informe anual: sólo el informe */
@media print {
  body.imprimiendo-anual .wc-lateral, body.imprimiendo-anual .wc-cabecera, body.imprimiendo-anual .wc-migas, body.imprimiendo-anual .wc-plegar,
  body.imprimiendo-anual .cinta-maqueta, body.imprimiendo-anual .vistas, body.imprimiendo-anual .pro-cab, body.imprimiendo-anual .no-imprimir,
  body.imprimiendo-anual .avisos, body.imprimiendo-anual #vista-alumno, body.imprimiendo-anual #vista-admin { display: none !important; }
  body.imprimiendo-anual .informe-anual { box-shadow: none; border: none; }
  body.imprimiendo-anual .wc-principal { margin: 0 !important; padding: 0 !important; }
  .tooltip { display: none !important; }
}