/* base.css — InfoAulas Dos temas. El claro es el de siempre; el oscuro se activa solo según la preferencia del sistema y se puede forzar con data-tema en . Todos los pares texto/fondo están verificados contra WCAG AA (>= 4.5:1); el indicador de foco supera 3:1 contra cualquier fondo de la interfaz. */ /* ---------- Tema claro (por defecto) ---------- */ :root{ --tinta:#14181d; --tinta-suave:#4a5560; --papel:#ffffff; --fondo:#f2f4f6; --borde:#c8d0d8; --acento:#1a4f8a; --acento-texto:#ffffff; --acento-claro:#e7effa; --alerta:#8a3216; --alerta-fondo:#fdf0e9; --ok:#1f6b3f; --ok-fondo:#e9f5ee; --err:#8c1f15; --err-fondo:#fdecea; --revisar:#8a5a00; --revisar-fondo:#fdf6e3; --revisar-borde:#e3cd94; --revisar-marca:#b8860b; --neutro-fondo:#f1f3f5; --neutro-texto:#5a6570; --cabecera-tabla:#eaeef2; --codigo-fondo:#e6eaee; --codigo-texto:#25303a; --editor-fondo:#111820; --editor-texto:#e6edf3; --barra-vacia:#e4e9ee; --radio:6px; color-scheme: light; } /* ---------- Tema oscuro ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --tinta:#e8eef4; --tinta-suave:#a9b8c6; --papel:#1a222b; --fondo:#0f1419; --borde:#33414f; --acento:#8ab8f0; --acento-texto:#0f1419; --acento-claro:#17293f; --alerta:#f0a878; --alerta-fondo:#33200f; --ok:#7fd6a2; --ok-fondo:#12291c; --err:#f2a6a0; --err-fondo:#331512; --revisar:#e8c56a; --revisar-fondo:#332a10; --revisar-borde:#5c4a1e; --revisar-marca:#e8c56a; --neutro-fondo:#232d38; --neutro-texto:#a9b8c6; --cabecera-tabla:#232d38; --codigo-fondo:#232d38; --codigo-texto:#dbe6f0; --editor-fondo:#0d1319; --editor-texto:#e6edf3; --barra-vacia:#2a3541; color-scheme: dark; } } :root[data-tema="oscuro"]{ --tinta:#e8eef4; --tinta-suave:#a9b8c6; --papel:#1a222b; --fondo:#0f1419; --borde:#33414f; --acento:#8ab8f0; --acento-texto:#0f1419; --acento-claro:#17293f; --alerta:#f0a878; --alerta-fondo:#33200f; --ok:#7fd6a2; --ok-fondo:#12291c; --err:#f2a6a0; --err-fondo:#331512; --revisar:#e8c56a; --revisar-fondo:#332a10; --revisar-borde:#5c4a1e; --revisar-marca:#e8c56a; --neutro-fondo:#232d38; --neutro-texto:#a9b8c6; --cabecera-tabla:#232d38; --codigo-fondo:#232d38; --codigo-texto:#dbe6f0; --editor-fondo:#0d1319; --editor-texto:#e6edf3; --barra-vacia:#2a3541; color-scheme: dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--fondo);color:var(--tinta); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* 17px y no 16: los estudiantes se acercaban al celular para leer. Los campos siguen en 16px porque iOS hace zoom por debajo de ese valor. */ font-size:17px;line-height:1.6; } /* ---------- Accesibilidad ---------- */ /* Visible solo para lectores de pantalla. */ .sr-solo{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Salta la navegación y va directo al contenido. Aparece al tabular. */ .salto-contenido{ position:absolute;left:8px;top:-60px;z-index:100; background:var(--papel);color:var(--tinta); border:2px solid var(--acento);border-radius:var(--radio); padding:10px 16px;font-weight:600;text-decoration:none; transition:top .12s; } .salto-contenido:focus{top:8px} /* Anillo de foco de dos colores: uno de los dos contrasta siempre, sin importar si el elemento está sobre papel claro, fondo gris o la barra oscura. Ambos superan 3:1 contra todos los fondos de la interfaz. */ /* Base para todos los navegadores. Safari incorporó :focus-visible recién en la 15.4, así que si solo se declara esa regla, los equipos sin actualizar quedan sin ningún indicador de foco. */ /* El color de adentro ahora lo pone el skin. El amarillo fijo funcionaba apoyado en el halo oscuro, pero contra un skin claro daba 1,5:1 él solo. Con --foco cada skin trae un tono medido contra SUS dos fondos: el peor caso pasó de 1,49:1 a 4,71:1. El halo se mantiene, que es lo que salva el anillo sobre los skins oscuros. */ :focus{ outline:3px solid var(--foco,#ffc857); outline-offset:0; box-shadow:0 0 0 6px #0a3d70; border-radius:3px; } /* Donde sí existe, se afina: sin anillo al hacer clic con el mouse. */ :focus:not(:focus-visible){outline:none;box-shadow:none} :focus-visible{ outline:3px solid var(--foco,#ffc857); outline-offset:0; box-shadow:0 0 0 6px #0a3d70; border-radius:3px; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ---------- Estructura ---------- */ .contenedor{max-width:960px;margin:0 auto;padding:16px} header.barra{background:#14181d;color:#fff;padding:12px 0} header.barra .contenedor{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:0;padding-bottom:0} header.barra h1{font-size:1.05rem;margin:0;font-weight:600;letter-spacing:.01em} header.barra .quien{font-size:.85rem;color:#c6cfd8} header.barra a{color:#c6cfd8} /* Selector de tema en la barra */ .sel-tema{ background:transparent;color:#c6cfd8;border:1px solid #46525e; border-radius:var(--radio);padding:5px 10px;font-size:.8rem;font-weight:600; min-height:34px;cursor:pointer; } .sel-tema:hover{background:#232a31;color:#fff} nav.pestanas{display:flex;gap:4px;flex-wrap:wrap;margin:16px 0} nav.pestanas button{ background:var(--papel);border:1px solid var(--borde);color:var(--tinta-suave); padding:9px 14px;border-radius:var(--radio);font-size:.92rem;cursor:pointer;min-height:42px; } nav.pestanas button[aria-current="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto);font-weight:600} .tarj{background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin-bottom:14px} .tarj h2{margin:0 0 12px;font-size:1.18rem} .tarj h3{margin:18px 0 8px;font-size:.95rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.04em} /* ---------- Formularios ---------- */ label{display:block;font-size:.88rem;font-weight:600;margin:12px 0 4px;color:var(--tinta-suave)} /* Los campos y el botón fantasma usan --borde-fuerte, no --borde. Un campo de texto es un control: WCAG 1.4.11 le pide 3:1 al borde que lo delimita. El borde de una tarjeta es decorativo (la tarjeta ya se distingue por su fondo) y queda suave, para no ensuciar el diseño. Hasta ahora los dos compartían token y los campos quedaban en 1,6:1. */ input,select,textarea{ width:100%;padding:10px;border:1px solid var(--borde-fuerte,var(--borde));border-radius:var(--radio); font-size:16px;font-family:inherit;background:var(--papel);color:var(--tinta);min-height:44px; } textarea{min-height:140px;resize:vertical} button{ background:var(--acento);color:var(--acento-texto);border:1px solid var(--acento); padding:11px 16px;border-radius:var(--radio);font-size:.95rem;font-weight:600; cursor:pointer;min-height:44px; } button.sec{background:var(--papel);color:var(--acento)} button.fant{background:transparent;color:var(--tinta-suave);border-color:var(--borde-fuerte,var(--borde))} button:disabled{opacity:.5;cursor:not-allowed} .fila{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end} .fila>*{flex:1 1 180px} .fila button{flex:0 0 auto} /* ---------- Mensajes ---------- */ .aviso{ background:var(--alerta-fondo);border-left:4px solid var(--alerta);color:var(--alerta); padding:10px 12px;border-radius:var(--radio);font-size:.87rem;margin:10px 0; } .nota{font-size:.85rem;color:var(--tinta-suave);margin:6px 0} .error{background:var(--err-fondo);border-left:4px solid var(--err);color:var(--err);padding:10px 12px;border-radius:var(--radio);margin:10px 0} .exito{background:var(--ok-fondo);border-left:4px solid var(--ok);color:var(--ok);padding:10px 12px;border-radius:var(--radio);margin:10px 0} .vacio{color:var(--tinta-suave);font-style:italic;padding:12px 0} /* ---------- Pastillas de estado ---------- */ .pastilla{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.76rem;font-weight:600;border:1px solid} .p-sin{background:var(--neutro-fondo);color:var(--neutro-texto);border-color:var(--borde)} .p-borrador{background:var(--revisar-fondo);color:var(--revisar);border-color:var(--revisar-borde)} .p-enviada{background:var(--acento-claro);color:var(--acento);border-color:var(--acento)} .p-corregida{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok)} .p-sugerida{background:var(--revisar-fondo);color:var(--revisar);border-color:var(--revisar-borde)} .p-validada{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok)} /* ---------- Listas y tablas ---------- */ .lista{list-style:none;margin:0;padding:0} .lista li{border-top:1px solid var(--borde);padding:12px 0} .lista li:first-child{border-top:0} .item-tit{font-weight:600;display:block} .tabla-envoltorio{overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;font-size:.88rem} th,td{border:1px solid var(--borde);padding:7px 9px;text-align:left;white-space:nowrap} th{background:var(--cabecera-tabla);font-weight:600} td.seudo{font-weight:600;position:sticky;left:0;background:var(--papel)} /* ---------- Código y Markdown ---------- */ pre{background:var(--editor-fondo);color:var(--editor-texto);padding:12px;border-radius:var(--radio);overflow-x:auto;font-size:.85rem;line-height:1.5} code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace} p>code,li>code{background:var(--codigo-fondo);color:var(--codigo-texto);padding:1px 5px;border-radius:3px;font-size:.9em} .md h1,.md h2,.md h3{margin:16px 0 8px;line-height:1.3} .md h1{font-size:1.3rem}.md h2{font-size:1.12rem}.md h3{font-size:1rem;text-transform:none;letter-spacing:0;color:var(--tinta)} .md ul,.md ol{padding-left:22px} .md blockquote{border-left:3px solid var(--borde);margin:10px 0;padding-left:12px;color:var(--tinta-suave)} .md a{color:var(--acento)} /* ---------- Vista previa y editor ---------- */ .previsualizacion{margin-top:10px;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:#fff} .previsualizacion .cabecera{display:flex;justify-content:space-between;align-items:center;background:var(--cabecera-tabla);padding:6px 10px;font-size:.8rem;color:var(--tinta-suave);font-weight:600} .previsualizacion iframe{display:block;width:100%;height:280px;border:0;background:#fff} .editor{position:relative;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--editor-fondo)} .editor pre{margin:0;padding:12px;min-height:200px;pointer-events:none;white-space:pre-wrap;word-break:break-word} .editor textarea{ /* Offsets explícitos y NO `inset`: inset llegó en Safari 14.1 y un iPhone sin actualizar lo ignora. Sin offsets, el campo queda mal ubicado y se monta sobre los botones de abajo, que dejan de responder al toque. */ position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%;margin:0;padding:12px;border:0; background:transparent;color:transparent;caret-color:#fff;resize:none;overflow:auto; white-space:pre-wrap;word-break:break-word; /* Misma pila de fuentes que el de atrás. Si difieren, cada capa resuelve una fuente distinta y el texto escrito se desalinea del pintado. */ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85rem;line-height:1.5; } .editor pre code{font-size:.85rem;line-height:1.5} .tk-pal{color:#ff9db8}.tk-cad{color:#a5e3a0}.tk-com{color:#9aa7b4;font-style:italic}.tk-num{color:#ffcb8b}.tk-fun{color:#8fc7ff} /* En modo alto contraste el texto transparente del editor desaparece. Ahí se muestra el textarea real y se oculta la capa coloreada. */ @media (forced-colors: active){ .editor pre{display:none} .editor{position:static} .editor textarea{ position:static;color:CanvasText;background:Canvas; min-height:220px;border:1px solid CanvasText; } .pastilla{border:1px solid CanvasText} :focus-visible{outline:3px solid Highlight;box-shadow:none} } /* ---------- Bandeja de corrección ---------- */ .entrega.sin-revisar{border-left:6px solid var(--revisar-marca);background:var(--revisar-fondo)} .entrega.validada{border-left:6px solid var(--ok)} .entrega.pendiente{border-left:6px solid var(--borde)} .cabecera-entrega{ display:flex;gap:10px;align-items:flex-start;justify-content:space-between; flex-wrap:wrap;cursor:pointer;margin:-4px 0 0; } .cabecera-entrega h2{margin:0} .cabecera-entrega .quien-entrega{flex:1 1 240px;min-width:0} .abrir-revisar{ background:var(--revisar-marca);border-color:var(--revisar-marca);color:#1a1204;flex:0 0 auto; min-height:38px;padding:7px 14px;font-size:.88rem; } .entrega.validada .abrir-revisar,.entrega.pendiente .abrir-revisar{ background:var(--papel);color:var(--acento);border-color:var(--borde); } .cuerpo-entrega[hidden]{display:none} .marca-ia{ background:var(--revisar-fondo);border:1px solid var(--revisar-borde); border-left:4px solid var(--revisar-marca); color:var(--revisar);padding:9px 12px;border-radius:var(--radio); font-size:.85rem;margin:12px 0 0; } .tapa-sin-revisar{ background:var(--revisar-fondo);border:1px dashed var(--revisar-borde);border-radius:var(--radio); padding:14px;margin-top:12px;color:var(--revisar);font-size:.88rem; } .contador-validacion{margin:4px 0 0} .contador-validacion .cifra{font-size:1.15rem;font-weight:700;color:var(--tinta)} .barra-progreso{ height:9px;border-radius:99px;background:var(--barra-vacia);overflow:hidden;margin:8px 0 4px; border:1px solid var(--borde); } .barra-progreso span{display:block;height:100%;background:var(--ok);transition:width .25s} .progreso-lote{ background:var(--acento-claro);border-left:4px solid var(--acento);color:var(--acento); padding:10px 12px;border-radius:var(--radio);font-size:.87rem;margin:10px 0; } /* ---------- Vista del estudiante: color con función ---------- Los adolescentes escanean la pantalla antes de leerla. Cada estado tiene color propio en el borde y un ícono en la pastilla, para que se reconozca sin leer una palabra. El ícono nunca va solo: siempre lo acompaña el texto, porque un emoji sin etiqueta no lo lee un lector de pantalla. */ .item-act{border-left:6px solid var(--borde);padding-left:12px} .item-act.e-sin_entregar{border-left-color:var(--borde)} .item-act.e-borrador{border-left-color:var(--revisar-marca)} .item-act.e-enviada{border-left-color:var(--acento)} .item-act.e-corregida{border-left-color:var(--ok)} .item-act .item-tit{font-size:1.1rem;line-height:1.35;margin-bottom:2px} .ico-tipo{font-size:1.15rem;margin-right:2px} .pie-act{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pie-act button{margin-left:auto} .chapa-nota{ display:inline-block;padding:3px 11px;border-radius:99px; font-size:.9rem;font-weight:700;border:1px solid; } .chapa-nota.aprobada{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok)} .chapa-nota.a-mejorar{background:var(--revisar-fondo);color:var(--revisar);border-color:var(--revisar-borde)} /* La devolución es lo primero que buscan al entrar. */ .tarj-devolucion{border-left:6px solid var(--ok)} .nota-grande{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding:12px 14px;border-radius:var(--radio);margin-bottom:12px;border:1px solid; } .nota-grande.aprobada{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok)} .nota-grande.a-mejorar{background:var(--revisar-fondo);border-color:var(--revisar-borde);color:var(--revisar)} .nota-grande .cifra-nota{font-size:2.4rem;font-weight:800;line-height:1} .nota-grande .sobre{font-size:1rem;opacity:.85} .nota-grande .veredicto{margin-left:auto;font-weight:700;font-size:1rem} /* Mientras la IA corrige. */ .corrigiendo{ background:var(--acento-claro);border-left:4px solid var(--acento);color:var(--acento); padding:12px 14px;border-radius:var(--radio);margin:10px 0;font-weight:600; } /* ---------- Mejoras del panel ---------- */ /* Globo con la cantidad pendiente, sobre la pestaña Corregir. */ .globo{ display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px; border-radius:99px;background:var(--revisar-marca);color:#1a1204; font-size:.72rem;font-weight:700;line-height:1.5;vertical-align:middle; } .globo.alerta{background:#a3251a;color:#fff} /* Entrega marcada: copiada de otra IA, vacía o sin relación con la consigna. Se ve de lejos a propósito: es lo que el docente tiene que mirar primero. */ .entrega.senalada{border-left:6px solid #a3251a} .marca-senal{ background:var(--err-fondo);border:1px solid var(--err);border-left:5px solid #a3251a; color:var(--err);padding:11px 13px;border-radius:var(--radio);margin:10px 0 0; font-size:.9rem; } .marca-senal strong{display:block;margin-bottom:3px;font-size:.95rem} .marca-ia-publicada{ background:var(--acento-claro);border-left:4px solid var(--acento);color:var(--acento); padding:9px 12px;border-radius:var(--radio);font-size:.85rem;margin:12px 0 0; } nav.pestanas button[aria-current="true"] .globo{background:var(--acento-texto);color:var(--acento)} /* Entrega pasada de la fecha límite, en el tablero. */ .atrasada::after{ content:"tarde";display:block;font-size:.62rem;font-weight:700; color:var(--alerta);text-transform:uppercase;letter-spacing:.04em;margin-top:2px; } /* Selección múltiple de actividades. */ .sel-actividad{width:auto;min-height:0;margin-right:8px;transform:scale(1.3);vertical-align:middle} .barra-acciones{ position:sticky;bottom:0;z-index:5; background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio); padding:10px 12px;margin-top:12px; display:flex;gap:8px;align-items:center;flex-wrap:wrap; box-shadow:0 -2px 8px rgba(0,0,0,.18); } .barra-acciones .cuantas{font-weight:600;font-size:.9rem;flex:1 1 auto} /* Buscador de la bandeja. */ .buscador{margin-top:10px} .entrega[hidden]{display:none} /* Aviso discreto de autoguardado en la vista del estudiante. */ .autoguardado{font-size:.8rem;color:var(--tinta-suave);margin:8px 0 0;min-height:1.2em} .autoguardado.activo{color:var(--ok);font-weight:600} /* ---------- Navegación entre actividades (vista del estudiante) ---------- Va arriba y abajo de la consigna. Abajo es donde más se usa: es el lugar donde el estudiante termina de leer o de entregar. */ .nav-act{ display:flex;gap:10px;align-items:center;justify-content:space-between; margin:12px 0;flex-wrap:wrap; } .nav-act button{min-height:46px} .nav-act .nav-pos{ font-size:.82rem;color:var(--tinta-suave);font-weight:600; flex:1 1 auto;text-align:center; } .nav-act .nav-fin{font-size:.85rem;color:var(--tinta-suave)} @media (max-width:520px){ /* En el celular los botones a lo ancho: el dedo no falla y no hay que apuntar a un objetivo chico al costado de la pantalla. */ .nav-act{gap:8px} .nav-act button{flex:1 1 140px} .nav-act .nav-pos{order:-1;flex:1 1 100%;text-align:left} .nav-act .nav-fin{flex:1 1 140px;text-align:center} } /* ---------- Diagramas dentro de las consignas ---------- Un bloque ```svg en el Markdown se dibuja acá. Los colores NO van escritos en el SVG: se ponen con estas clases, que apuntan a las variables del tema. Si un diagrama trajera sus propios colores, en modo oscuro quedaría un dibujo negro sobre fondo negro. */ /* ---- Lista de carteles en el panel del docente ---- */ .lista.carteles .cartel-fila{display:block;padding:12px 0} .cartel-fila.apagado{opacity:.55} .cartel-linea{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px} .cartel-ico{font-size:1.8rem;line-height:1.1;flex:0 0 auto} .cartel-txt{margin:0 0 3px;font-weight:600;line-height:1.35} .cartel-sub{margin:0;font-size:.85rem;color:var(--tinta-suave);line-height:1.4} .cartel-fila .fila button{font-size:.85rem;padding:6px 10px;min-height:36px} /* ---- Cartel de bienvenida ---- Aparece al abrir una actividad, una vez por actividad y por día. Usa las variables del skin activo, así que se ve bien en los ocho. Todo el movimiento está dentro de @media (prefers-reduced-motion: no-preference). Quien pidió menos movimiento en su sistema —y en un grupo de 25 siempre hay alguien— recibe el mismo cartel, con el mismo texto, sin nada que rebote. */ .cartel-fondo{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center;padding:16px; background:rgba(0,0,0,.55);opacity:1 } .cartel{ position:relative;max-width:420px;width:100%; background:var(--papel);color:var(--tinta); border:2px solid var(--acento);border-radius:calc(var(--radio) + 6px); padding:24px 20px 20px;text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.35) } .cartel-emoji{font-size:3.2rem;line-height:1;margin-bottom:10px} .cartel-chiste{font-size:1.1rem;font-weight:700;margin:0 0 12px;line-height:1.4} .cartel-aliento{ font-size:.95rem;color:var(--tinta-suave);margin:0 0 18px;line-height:1.5; border-top:1px solid var(--borde);padding-top:12px } .cartel button{width:100%;font-size:1rem} /* Las chispas son doce puntitos que salen disparados del centro. Sin librería ni imágenes: cada uno lleva su dirección en una variable. */ .cartel-chispas{position:absolute;inset:0;overflow:visible;pointer-events:none} .cartel-chispas i{ position:absolute;top:38px;left:50%;width:9px;height:9px;border-radius:50%; opacity:0 } @media (prefers-reduced-motion: no-preference){ .cartel-fondo{animation:cartel-fondo-entra .22s ease-out both} /* La curva se pasa de 1 y vuelve: es el rebotecito de llegada. */ .cartel{animation:cartel-entra .42s cubic-bezier(.18,1.5,.5,1) both} .cartel-emoji{animation:cartel-emoji .6s .1s cubic-bezier(.18,1.7,.5,1) both} .cartel-chispas i{animation:cartel-chispa .8s .08s ease-out both} .cartel-fondo.saliendo{animation:cartel-fondo-sale .26s ease-in both} .cartel-fondo.saliendo .cartel{animation:cartel-sale .26s ease-in both} } @keyframes cartel-fondo-entra{from{opacity:0}to{opacity:1}} @keyframes cartel-fondo-sale{from{opacity:1}to{opacity:0}} @keyframes cartel-entra{ from{opacity:0;transform:scale(.55) rotate(-7deg) translateY(30px)} to{opacity:1;transform:none} } @keyframes cartel-sale{ from{opacity:1;transform:none} to{opacity:0;transform:scale(.72) rotate(5deg) translateY(28px)} } @keyframes cartel-emoji{ from{transform:scale(0) rotate(-25deg)} to{transform:scale(1) rotate(0)} } @keyframes cartel-chispa{ from{opacity:1;transform:translate(-50%,0) scale(.4)} to{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.1)} } @media print{ .cartel-fondo{display:none !important} } /* Botonera para insertar bloques en la consigna. El docente no tiene por qué acordarse de la sintaxis: la escribe el sistema y él ve el resultado. */ .insertar-barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 8px} .insertar-barra .rotulo{font-size:.85rem;color:var(--tinta-suave)} .insertar-barra button{font-size:.85rem;padding:6px 10px} .insertar-caja{ border:1px solid var(--borde);border-left:3px solid var(--acento); border-radius:var(--radio);padding:10px 12px;margin:0 0 10px; background:var(--neutro-fondo) } .insertar-caja[hidden]{display:none} .insertar-caja label{margin-top:8px} .insertar-caja label:first-child{margin-top:0} .insertar-caja .casilla{ display:flex;align-items:center;gap:8px;font-weight:600;margin-top:10px } .insertar-caja .casilla input{width:auto;margin:0;flex:0 0 auto} .estado-insertar{font-size:.85rem;margin:6px 0;color:var(--tinta-suave)} .estado-insertar.bien{color:var(--ok)} .estado-insertar.mal{color:var(--alerta)} .insertar-previo{ display:block;width:100%;height:240px;background:#fff; border:1px solid var(--borde);border-radius:var(--radio) } /* Video embebido y HTML mostrado como página. Los dos viven en un marco aislado; lo que cambia es de dónde viene lo que está adentro. */ .video,.html-vivo{margin:16px 0} .video-marco{ position:relative;aspect-ratio:16/9;min-height:160px; background:var(--neutro-fondo);border:1px solid var(--borde); border-radius:var(--radio);overflow:hidden } .video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video figcaption,.html-vivo figcaption{ margin-top:6px;font-size:.85rem;color:var(--tinta-suave) } /* Fondo blanco a propósito: adentro hay una página web de verdad, y así se ve en cualquier navegador. El borde marca que es otra cosa que el resto. */ .html-vivo iframe{ display:block;width:100%;height:var(--alto,240px); border:1px solid var(--borde);border-radius:var(--radio);background:#fff } /* El marco que corre JavaScript se distingue del que solo muestra diseño: el estudiante tiene que saber que ahí hay algo con lo que puede jugar. */ .html-vivo.interactivo iframe{border-color:var(--acento);border-width:2px} .html-vivo.interactivo figcaption{color:var(--acento)} @media print{ /* Un iframe no se imprime de forma confiable. El video se cae al enlace, que es lo que el docente puede leer y tipear en el aula. */ .video-marco{display:none} .video figcaption{font-size:.9rem;color:#000} .video,.html-vivo{break-inside:avoid} } .diagrama{margin:16px 0;text-align:center} .diagrama svg{max-width:100%;height:auto} .diagrama text{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:13px;fill:var(--tinta); } .diagrama .rotulo{font-size:12px;fill:var(--tinta-suave)} .diagrama .fuerte{font-weight:700} .diagrama .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px} /* RELLENOS PÁLIDOS (r-). Son tokens de FONDO: claritos en tema claro y oscuros en tema oscuro. Solo sirven para figuras que ADEMÁS tengan un trazo t-, que es el que da el contraste. Una figura sin borde pintada con r- es invisible: medido, queda entre 1,0 y 1,2 de contraste contra la tarjeta, en los dos temas. Para figuras sin borde va s-. */ .diagrama .r-caja{fill:var(--papel)} .diagrama .r-suave{fill:var(--neutro-fondo)} .diagrama .r-acento{fill:var(--acento-claro)} .diagrama .r-ok{fill:var(--ok-fondo)} .diagrama .r-alerta{fill:var(--alerta-fondo)} .diagrama .r-revisar{fill:var(--revisar-fondo)} .diagrama .r-nada{fill:none} .diagrama .r-tinta{fill:var(--tinta)} /* RELLENOS SÓLIDOS (s-). Usan los tokens de texto, que tienen contraste garantizado contra la tarjeta en los dos temas: medido entre 5,9 y 9,7. Van en las figuras que no llevan borde: puntos, patitas, flechas, rendijas. */ .diagrama .s-tinta{fill:var(--tinta)} .diagrama .s-suave{fill:var(--tinta-suave)} .diagrama .s-acento{fill:var(--acento)} .diagrama .s-ok{fill:var(--ok)} .diagrama .s-alerta{fill:var(--alerta)} .diagrama .s-revisar{fill:var(--revisar)} /* Blanco y negro de verdad, para cuando el color ES el tema del dibujo (el piso del ring de sumo, por ejemplo). Cada uno se pierde contra la tarjeta en uno de los dos temas, así que llevan contorno: el que no se ve por su relleno se ve por el borde. */ .diagrama .r-blanco{fill:#fff;stroke:var(--tinta);stroke-width:1.5} .diagrama .r-negro{fill:#1a1a1a;stroke:var(--tinta);stroke-width:1.5} /* Trazos. No fijan relleno a propósito: un rectángulo con borde y fondo lleva una clase r- y una t- juntas, y si acá pusiéramos fill:none ganaría esta por estar declarada después y todas las cajas saldrían transparentes. */ .diagrama .t-borde{stroke:var(--borde);stroke-width:2} .diagrama .t-tinta{stroke:var(--tinta);stroke-width:2} .diagrama .t-acento{stroke:var(--acento);stroke-width:2.5} .diagrama .t-ok{stroke:var(--ok);stroke-width:2.5} .diagrama .t-alerta{stroke:var(--alerta);stroke-width:2.5} .diagrama .t-fino{stroke-width:1.5} .diagrama .t-guion{stroke-dasharray:5 4} /* Texto de color, para etiquetas que acompañan un trazo */ .diagrama .c-acento{fill:var(--acento)} .diagrama .c-ok{fill:var(--ok)} .diagrama .c-alerta{fill:var(--alerta)} .diagrama .c-suave{fill:var(--tinta-suave)} @media (forced-colors: active){ .diagrama [class*="t-"]{stroke:CanvasText} .diagrama [class*="r-"]{fill:Canvas} .diagrama text{fill:CanvasText} } /* ---------- Asistentes de IA en el editor de actividades ---------- Plegados por defecto: quien ya sabe qué quiere escribir no tiene que esquivar un formulario para llegar al editor. */ .asistente{ border:1px solid var(--acento);background:var(--acento-claro); border-radius:var(--radio);padding:0 14px;margin:14px 0; } .asistente summary{ cursor:pointer;font-weight:600;color:var(--acento);padding:11px 0; list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .asistente summary::-webkit-details-marker{display:none} .asistente summary::before{content:"▸";font-weight:400} .asistente[open] summary::before{content:"▾"} .asistente[open]{padding-bottom:14px} .asistente label{color:var(--acento)} .asistente .nota{color:var(--acento);opacity:.85} .asistente .req{font-weight:400;opacity:.75;text-transform:none;letter-spacing:0} .asistente.rubrica{border-color:var(--borde);background:var(--neutro-fondo)} .asistente.rubrica summary,.asistente.rubrica label,.asistente.rubrica .nota{color:var(--tinta-suave)} .asistente.rubrica textarea{font-family:inherit} /* ---------- Carrusel de corrección ---------- Una entrega por vez, con la consigna fija arriba. Todo tiene que entrar en una pantalla sin scrollear: la agilidad se pierde apenas hay que buscar dónde estaba uno. */ .conmutador-modo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .conmutador-modo button{ min-height:38px;padding:7px 14px;font-size:.88rem; background:transparent;color:var(--tinta-suave);border:1px solid var(--borde); } .conmutador-modo button.activo{ background:var(--acento);border-color:var(--acento);color:var(--acento-texto);font-weight:600; } .tarj.compacta{padding:12px 14px;margin-bottom:10px} .tarj.compacta label{margin-top:6px} /* La consigna: plegada ocupa una línea, y se acuerda de cómo la dejaste. */ .consigna-fija{ background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio); margin-bottom:10px;overflow:hidden; } .consigna-fija summary{ padding:10px 14px;cursor:pointer;font-weight:600;font-size:.92rem; list-style:none;display:flex;gap:8px;align-items:center; } .consigna-fija summary::-webkit-details-marker{display:none} .consigna-fija summary::before{content:"▸";color:var(--tinta-suave);font-size:.9rem} .consigna-fija[open] summary::before{content:"▾"} .consigna-fija summary:hover{background:var(--acento-claro)} .consigna-fija .etiqueta{ background:var(--acento-claro);color:var(--acento);border:1px solid var(--acento); border-radius:99px;padding:1px 9px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em; } /* Tope de altura: los talleres tienen consignas largas y sin esto, abrir la consigna empuja la entrega fuera de la pantalla y hay que scrollear para volver a encontrarla. Con tope, la consigna scrollea adentro suyo. */ .consigna-fija>.md{ padding:0 16px 14px;border-top:1px solid var(--borde);font-size:.92rem; max-height:38vh;overflow:auto; } /* Los controles del lote, plegados: en el carrusel lo que importa es la entrega, no el botón que ya apretaste. */ .lote-plegable{margin-top:10px} .lote-plegable summary{ cursor:pointer;font-size:.86rem;color:var(--tinta-suave);font-weight:600; list-style:none;display:flex;gap:6px;align-items:center; } .lote-plegable summary::-webkit-details-marker{display:none} .lote-plegable summary::before{content:"▸"} .lote-plegable[open] summary::before{content:"▾"} .lote-plegable[open]{padding-bottom:4px} .lote-plegable>*:not(summary){margin-top:8px} .tarj.carrusel{padding:14px} .nav-carrusel{display:flex;gap:10px;align-items:center;justify-content:space-between} .quien-carrusel{text-align:center;flex:1 1 auto;min-width:0} .quien-carrusel strong{display:block;font-size:1.3rem;line-height:1.2} .quien-carrusel .nota{margin:0;font-size:.8rem} button.redonda{ flex:0 0 auto;width:46px;min-width:46px;padding:0;min-height:46px; border-radius:50%;font-size:1rem; } .barra-progreso.fina{height:5px;margin:10px 0 4px} .barra-progreso.fina span{background:var(--acento)} /* Dos columnas en pantalla ancha. Las entregas de estos talleres son de 76 a 276 caracteres, así que comparar sin mover los ojos sale gratis. */ .par-carrusel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px} .par-carrusel>section{min-width:0} .par-carrusel h3{margin:0 0 8px} .par-carrusel pre{margin:0;max-height:340px} .respuesta-texto{ background:var(--neutro-fondo);border:1px solid var(--borde);border-radius:var(--radio); padding:12px;white-space:pre-wrap;max-height:340px;overflow:auto; } .par-carrusel .previsualizacion iframe{height:150px} .par-carrusel .previsualizacion{margin-top:8px} .devolucion{font-size:.94rem} .devolucion :first-child{margin-top:0} .nota-carrusel{ display:flex;align-items:baseline;gap:7px;flex-wrap:wrap; padding:9px 12px;border-radius:var(--radio);margin-bottom:10px; background:var(--revisar-fondo);border:1px solid var(--revisar-borde);color:var(--revisar); } .nota-carrusel.vista{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok)} .nota-carrusel strong{font-size:2rem;font-weight:800;line-height:1} .nota-carrusel span{font-size:.95rem;opacity:.85} .nota-carrusel em{margin-left:auto;font-style:normal;font-weight:700;font-size:.8rem} .acciones-carrusel{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px} .acciones-carrusel.pie{border-top:1px solid var(--borde);padding-top:12px} .acciones-carrusel .atajos{ margin-left:auto;font-size:.78rem;color:var(--tinta-suave); } /* El indicador de lectura. Antes esta regla decidía en silencio si pasar de largo contaba como revisar; se ve que era mala idea. Ahora se muestra. */ .marca-lectura{ margin-left:auto;font-size:.78rem;font-weight:600; padding:4px 10px;border-radius:99px;border:1px solid; } .marca-lectura.contando{ background:var(--revisar-fondo);color:var(--revisar);border-color:var(--revisar-borde); } .marca-lectura.lista{ background:var(--ok-fondo);color:var(--ok);border-color:var(--ok); } @media (max-width:720px){ .marca-lectura{margin-left:0;flex:1 1 100%;text-align:center} } .acciones-carrusel kbd{ background:var(--neutro-fondo);border:1px solid var(--borde);border-bottom-width:2px; border-radius:4px;padding:0 5px;font-family:inherit;font-size:.75rem;font-weight:700; } .pie-progreso{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .pie-progreso .barra-progreso{flex:1 1 120px;margin:0;height:7px} .vacio-lindo{text-align:center;padding:34px 16px} .vacio-lindo .emoji{font-size:2.6rem;margin:0 0 6px} .vacio-lindo h2{margin:0 0 6px} @media (max-width:720px){ .par-carrusel{grid-template-columns:1fr;gap:12px} .acciones-carrusel .atajos{display:none} .quien-carrusel strong{font-size:1.15rem} } /* ---------- Tarjetas imprimibles ---------- Siempre en claro: se imprimen en papel blanco. */ .tarjeta-corte{ border:2px dashed #666;border-radius:var(--radio);padding:14px; background:#fff;color:#14181d; break-inside:avoid;page-break-inside:avoid; } .tarjeta-corte .seudo-g{font-size:1.25rem;font-weight:700;margin:0 0 6px} .tarjeta-corte .cod{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:700; letter-spacing:.16em;margin:8px 0;word-break:break-all; } .tarjeta-corte .url{font-size:.8rem;color:#333;word-break:break-all} .tarjeta-corte .pie{font-size:.72rem;color:#555;margin-top:8px;border-top:1px solid #ddd;padding-top:6px} .grilla-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} @media print{ :root{color-scheme:light} body{background:#fff;color:#000} .no-imprimir,header.barra,nav.pestanas,.salto-contenido{display:none !important} .contenedor{max-width:none;padding:0} .tarj{border:0;padding:0;margin:0;background:#fff} .grilla-tarjetas{grid-template-columns:repeat(2,1fr);gap:10px} .tarjeta-corte{border-color:#000} } @media (max-width:520px){ .contenedor{padding:12px} th,td{padding:6px 7px;font-size:.82rem} /* Seis pestañas en una fila se amontonan y quedan ilegibles. En tres columnas entran las seis, se ven todas y el dedo las acierta. */ nav.pestanas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} nav.pestanas button{padding:9px 4px;font-size:.82rem;text-align:center} .barra-acciones{flex-direction:column;align-items:stretch} .barra-acciones button{width:100%} } /* ---------- Material de estudio ---------- Lo que el estudiante tiene que leer, en su propia pantalla. El tema es un encabezado de sección: sin agrupar, una lista de treinta materiales deja de consultarse a la tercera semana. */ .tema-material{ font-size:1.05rem;margin:22px 0 8px;padding-bottom:6px; border-bottom:2px solid var(--borde);color:var(--acento); } .tarj.material{border-left:6px solid var(--acento)} .tarj.material h3{margin:0 0 8px;font-size:1.15rem} .recursos{display:flex;flex-direction:column;gap:8px;margin-top:12px} /* El dominio va siempre a la vista. Un título puede decir cualquier cosa; ver a dónde lleva antes de tocar es lo que hace que un enlace equivocado se note, y estos enlaces los abre un adolescente desde el celular. */ .recurso{ display:flex;gap:10px;align-items:center;text-decoration:none; border:1.5px solid var(--borde-fuerte,var(--borde));border-radius:var(--radio); padding:10px 12px;background:var(--neutro-fondo);color:var(--tinta); } .recurso:hover{border-color:var(--acento);background:var(--acento-claro)} .recurso .recurso-ico{font-size:1.3rem;flex:0 0 auto} .recurso .recurso-txt{display:flex;flex-direction:column;font-weight:700;min-width:0;word-break:break-word} .recurso .recurso-sub{font-weight:400;font-size:.8rem;color:var(--tinta-suave);margin-top:2px}