/* Capa 2 · generada por sistema_paleta.py: no editar a mano. */
:root { --tw-indigo-50: 240 247 242; --tw-indigo-100: 227 242 233; --tw-indigo-200: 197 229 209; --tw-indigo-300: 154 209 176; --tw-indigo-400: 93 182 132; --tw-indigo-500: 46 154 95; --tw-indigo-600: 26 128 73; --tw-indigo-700: 22 107 61; --tw-indigo-800: 19 85 50; --tw-indigo-900: 15 68 41; --tw-indigo-950: 13 46 32; --tw-violet-50: 240 247 242; --tw-violet-100: 227 242 233; --tw-violet-200: 197 229 209; --tw-violet-300: 154 209 176; --tw-violet-400: 93 182 132; --tw-violet-500: 46 154 95; --tw-violet-600: 26 128 73; --tw-violet-700: 22 107 61; --tw-violet-800: 19 85 50; --tw-violet-900: 15 68 41; --tw-violet-950: 13 46 32; }
html[data-sistema="migrada"] { --tw-slate-50: 245 247 245; --tw-slate-100: 240 244 241; --tw-slate-200: 225 230 226; --tw-slate-300: 211 220 214; --tw-slate-400: 149 163 154; --tw-slate-500: 95 107 99; --tw-slate-600: 74 87 79; --tw-slate-700: 58 70 63; --tw-slate-800: 38 48 42; --tw-slate-900: 23 33 26; --tw-slate-950: 14 20 17; --tw-gray-50: 245 247 245; --tw-gray-100: 240 244 241; --tw-gray-200: 225 230 226; --tw-gray-300: 211 220 214; --tw-gray-400: 149 163 154; --tw-gray-500: 95 107 99; --tw-gray-600: 74 87 79; --tw-gray-700: 58 70 63; --tw-gray-800: 38 48 42; --tw-gray-900: 23 33 26; --tw-gray-950: 14 20 17; --tw-zinc-50: 245 247 245; --tw-zinc-100: 240 244 241; --tw-zinc-200: 225 230 226; --tw-zinc-300: 211 220 214; --tw-zinc-400: 149 163 154; --tw-zinc-500: 95 107 99; --tw-zinc-600: 74 87 79; --tw-zinc-700: 58 70 63; --tw-zinc-800: 38 48 42; --tw-zinc-900: 23 33 26; --tw-zinc-950: 14 20 17; --tw-neutral-50: 245 247 245; --tw-neutral-100: 240 244 241; --tw-neutral-200: 225 230 226; --tw-neutral-300: 211 220 214; --tw-neutral-400: 149 163 154; --tw-neutral-500: 95 107 99; --tw-neutral-600: 74 87 79; --tw-neutral-700: 58 70 63; --tw-neutral-800: 38 48 42; --tw-neutral-900: 23 33 26; --tw-neutral-950: 14 20 17; --tw-stone-50: 245 247 245; --tw-stone-100: 240 244 241; --tw-stone-200: 225 230 226; --tw-stone-300: 211 220 214; --tw-stone-400: 149 163 154; --tw-stone-500: 95 107 99; --tw-stone-600: 74 87 79; --tw-stone-700: 58 70 63; --tw-stone-800: 38 48 42; --tw-stone-900: 23 33 26; --tw-stone-950: 14 20 17; --tw-blue-50: 243 247 252; --tw-blue-100: 231 238 248; --tw-blue-200: 207 221 240; --tw-blue-300: 177 199 228; --tw-blue-400: 127 163 209; --tw-blue-500: 79 130 190; --tw-blue-600: 46 105 166; --tw-blue-700: 30 77 123; --tw-blue-800: 26 63 100; --tw-blue-900: 19 47 79; --tw-blue-950: 12 30 51; --tw-sky-50: 243 247 252; --tw-sky-100: 231 238 248; --tw-sky-200: 207 221 240; --tw-sky-300: 177 199 228; --tw-sky-400: 127 163 209; --tw-sky-500: 79 130 190; --tw-sky-600: 46 105 166; --tw-sky-700: 30 77 123; --tw-sky-800: 26 63 100; --tw-sky-900: 19 47 79; --tw-sky-950: 12 30 51; --tw-cyan-50: 243 247 252; --tw-cyan-100: 231 238 248; --tw-cyan-200: 207 221 240; --tw-cyan-300: 177 199 228; --tw-cyan-400: 127 163 209; --tw-cyan-500: 79 130 190; --tw-cyan-600: 46 105 166; --tw-cyan-700: 30 77 123; --tw-cyan-800: 26 63 100; --tw-cyan-900: 19 47 79; --tw-cyan-950: 12 30 51; --tw-green-50: 240 247 242; --tw-green-100: 227 242 233; --tw-green-200: 197 229 209; --tw-green-300: 154 209 176; --tw-green-400: 93 182 132; --tw-green-500: 46 154 95; --tw-green-600: 26 128 73; --tw-green-700: 22 107 61; --tw-green-800: 19 85 50; --tw-green-900: 15 68 41; --tw-green-950: 13 46 32; --tw-emerald-50: 240 247 242; --tw-emerald-100: 227 242 233; --tw-emerald-200: 197 229 209; --tw-emerald-300: 154 209 176; --tw-emerald-400: 93 182 132; --tw-emerald-500: 46 154 95; --tw-emerald-600: 26 128 73; --tw-emerald-700: 22 107 61; --tw-emerald-800: 19 85 50; --tw-emerald-900: 15 68 41; --tw-emerald-950: 13 46 32; --tw-teal-50: 240 247 242; --tw-teal-100: 227 242 233; --tw-teal-200: 197 229 209; --tw-teal-300: 154 209 176; --tw-teal-400: 93 182 132; --tw-teal-500: 46 154 95; --tw-teal-600: 26 128 73; --tw-teal-700: 22 107 61; --tw-teal-800: 19 85 50; --tw-teal-900: 15 68 41; --tw-teal-950: 13 46 32; --tw-amber-50: 255 251 235; --tw-amber-100: 253 243 211; --tw-amber-200: 251 230 166; --tw-amber-300: 248 211 102; --tw-amber-400: 244 197 66; --tw-amber-500: 224 169 31; --tw-amber-600: 185 132 16; --tw-amber-700: 122 86 0; --tw-amber-800: 99 70 0; --tw-amber-900: 74 53 0; --tw-amber-950: 43 33 0; --tw-yellow-50: 255 251 235; --tw-yellow-100: 253 243 211; --tw-yellow-200: 251 230 166; --tw-yellow-300: 248 211 102; --tw-yellow-400: 244 197 66; --tw-yellow-500: 224 169 31; --tw-yellow-600: 185 132 16; --tw-yellow-700: 122 86 0; --tw-yellow-800: 99 70 0; --tw-yellow-900: 74 53 0; --tw-yellow-950: 43 33 0; --tw-orange-50: 255 251 235; --tw-orange-100: 253 243 211; --tw-orange-200: 251 230 166; --tw-orange-300: 248 211 102; --tw-orange-400: 244 197 66; --tw-orange-500: 224 169 31; --tw-orange-600: 185 132 16; --tw-orange-700: 122 86 0; --tw-orange-800: 99 70 0; --tw-orange-900: 74 53 0; --tw-orange-950: 43 33 0; --tw-red-50: 253 236 234; --tw-red-100: 251 217 213; --tw-red-200: 246 180 172; --tw-red-300: 238 138 126; --tw-red-400: 226 92 77; --tw-red-500: 208 61 44; --tw-red-600: 180 35 24; --tw-red-700: 150 32 21; --tw-red-800: 122 28 19; --tw-red-900: 98 26 18; --tw-red-950: 58 12 7; }
html[data-theme="dark"] { --tw-slate-50: 26 35 30; --tw-slate-100: 33 44 38; --tw-slate-200: 42 54 47; --tw-slate-300: 52 65 58; --tw-slate-400: 102 117 107; --tw-slate-500: 136 151 141; --tw-slate-600: 163 177 168; --tw-slate-700: 179 192 183; --tw-slate-800: 206 216 209; --tw-slate-900: 228 235 230; --tw-slate-950: 240 244 241; --tw-gray-50: 26 35 30; --tw-gray-100: 33 44 38; --tw-gray-200: 42 54 47; --tw-gray-300: 52 65 58; --tw-gray-400: 102 117 107; --tw-gray-500: 136 151 141; --tw-gray-600: 163 177 168; --tw-gray-700: 179 192 183; --tw-gray-800: 206 216 209; --tw-gray-900: 228 235 230; --tw-gray-950: 240 244 241; --tw-zinc-50: 26 35 30; --tw-zinc-100: 33 44 38; --tw-zinc-200: 42 54 47; --tw-zinc-300: 52 65 58; --tw-zinc-400: 102 117 107; --tw-zinc-500: 136 151 141; --tw-zinc-600: 163 177 168; --tw-zinc-700: 179 192 183; --tw-zinc-800: 206 216 209; --tw-zinc-900: 228 235 230; --tw-zinc-950: 240 244 241; --tw-neutral-50: 26 35 30; --tw-neutral-100: 33 44 38; --tw-neutral-200: 42 54 47; --tw-neutral-300: 52 65 58; --tw-neutral-400: 102 117 107; --tw-neutral-500: 136 151 141; --tw-neutral-600: 163 177 168; --tw-neutral-700: 179 192 183; --tw-neutral-800: 206 216 209; --tw-neutral-900: 228 235 230; --tw-neutral-950: 240 244 241; --tw-stone-50: 26 35 30; --tw-stone-100: 33 44 38; --tw-stone-200: 42 54 47; --tw-stone-300: 52 65 58; --tw-stone-400: 102 117 107; --tw-stone-500: 136 151 141; --tw-stone-600: 163 177 168; --tw-stone-700: 179 192 183; --tw-stone-800: 206 216 209; --tw-stone-900: 228 235 230; --tw-stone-950: 240 244 241; --tw-red-50: 43 29 24; --tw-red-100: 56 30 24; --tw-red-200: 81 39 30; --tw-red-300: 124 60 50; --tw-red-400: 226 92 77; --tw-red-500: 208 61 44; --tw-red-600: 180 35 24; --tw-red-700: 226 92 77; --tw-red-800: 238 138 126; --tw-red-900: 246 180 172; --tw-red-950: 251 217 213; --tw-orange-50: 44 43 23; --tw-orange-100: 57 51 22; --tw-orange-200: 86 73 26; --tw-orange-300: 132 112 45; --tw-orange-400: 244 197 66; --tw-orange-500: 224 169 31; --tw-orange-600: 185 132 16; --tw-orange-700: 244 197 66; --tw-orange-800: 248 211 102; --tw-orange-900: 251 230 166; --tw-orange-950: 253 243 211; --tw-amber-50: 44 43 23; --tw-amber-100: 57 51 22; --tw-amber-200: 86 73 26; --tw-amber-300: 132 112 45; --tw-amber-400: 244 197 66; --tw-amber-500: 224 169 31; --tw-amber-600: 185 132 16; --tw-amber-700: 244 197 66; --tw-amber-800: 248 211 102; --tw-amber-900: 251 230 166; --tw-amber-950: 253 243 211; --tw-yellow-50: 44 43 23; --tw-yellow-100: 57 51 22; --tw-yellow-200: 86 73 26; --tw-yellow-300: 132 112 45; --tw-yellow-400: 244 197 66; --tw-yellow-500: 224 169 31; --tw-yellow-600: 185 132 16; --tw-yellow-700: 244 197 66; --tw-yellow-800: 248 211 102; --tw-yellow-900: 251 230 166; --tw-yellow-950: 253 243 211; --tw-lime-50: 32 47 22; --tw-lime-100: 39 58 22; --tw-lime-200: 57 84 23; --tw-lime-300: 92 129 38; --tw-lime-400: 163 230 53; --tw-lime-500: 132 204 22; --tw-lime-600: 101 163 13; --tw-lime-700: 163 230 53; --tw-lime-800: 190 242 100; --tw-lime-900: 217 249 157; --tw-lime-950: 236 252 203; --tw-green-50: 22 42 31; --tw-green-100: 22 50 35; --tw-green-200: 29 68 47; --tw-green-300: 57 105 78; --tw-green-400: 93 182 132; --tw-green-500: 46 154 95; --tw-green-600: 26 128 73; --tw-green-700: 93 182 132; --tw-green-800: 154 209 176; --tw-green-900: 197 229 209; --tw-green-950: 227 242 233; --tw-emerald-50: 22 42 31; --tw-emerald-100: 22 50 35; --tw-emerald-200: 29 68 47; --tw-emerald-300: 57 105 78; --tw-emerald-400: 93 182 132; --tw-emerald-500: 46 154 95; --tw-emerald-600: 26 128 73; --tw-emerald-700: 93 182 132; --tw-emerald-800: 154 209 176; --tw-emerald-900: 197 229 209; --tw-emerald-950: 227 242 233; --tw-teal-50: 22 42 31; --tw-teal-100: 22 50 35; --tw-teal-200: 29 68 47; --tw-teal-300: 57 105 78; --tw-teal-400: 93 182 132; --tw-teal-500: 46 154 95; --tw-teal-600: 26 128 73; --tw-teal-700: 93 182 132; --tw-teal-800: 154 209 176; --tw-teal-900: 197 229 209; --tw-teal-950: 227 242 233; --tw-cyan-50: 24 39 44; --tw-cyan-100: 26 45 55; --tw-cyan-200: 40 61 77; --tw-cyan-300: 74 96 116; --tw-cyan-400: 127 163 209; --tw-cyan-500: 79 130 190; --tw-cyan-600: 46 105 166; --tw-cyan-700: 127 163 209; --tw-cyan-800: 177 199 228; --tw-cyan-900: 207 221 240; --tw-cyan-950: 231 238 248; --tw-sky-50: 24 39 44; --tw-sky-100: 26 45 55; --tw-sky-200: 40 61 77; --tw-sky-300: 74 96 116; --tw-sky-400: 127 163 209; --tw-sky-500: 79 130 190; --tw-sky-600: 46 105 166; --tw-sky-700: 127 163 209; --tw-sky-800: 177 199 228; --tw-sky-900: 207 221 240; --tw-sky-950: 231 238 248; --tw-blue-50: 24 39 44; --tw-blue-100: 26 45 55; --tw-blue-200: 40 61 77; --tw-blue-300: 74 96 116; --tw-blue-400: 127 163 209; --tw-blue-500: 79 130 190; --tw-blue-600: 46 105 166; --tw-blue-700: 127 163 209; --tw-blue-800: 177 199 228; --tw-blue-900: 207 221 240; --tw-blue-950: 231 238 248; --tw-indigo-50: 22 42 31; --tw-indigo-100: 22 50 35; --tw-indigo-200: 29 68 47; --tw-indigo-300: 57 105 78; --tw-indigo-400: 93 182 132; --tw-indigo-500: 46 154 95; --tw-indigo-600: 26 128 73; --tw-indigo-700: 93 182 132; --tw-indigo-800: 154 209 176; --tw-indigo-900: 197 229 209; --tw-indigo-950: 227 242 233; --tw-violet-50: 22 42 31; --tw-violet-100: 22 50 35; --tw-violet-200: 29 68 47; --tw-violet-300: 57 105 78; --tw-violet-400: 93 182 132; --tw-violet-500: 46 154 95; --tw-violet-600: 26 128 73; --tw-violet-700: 93 182 132; --tw-violet-800: 154 209 176; --tw-violet-900: 197 229 209; --tw-violet-950: 227 242 233; --tw-purple-50: 39 31 53; --tw-purple-100: 49 33 70; --tw-purple-200: 68 46 95; --tw-purple-300: 106 80 138; --tw-purple-400: 192 132 252; --tw-purple-500: 168 85 247; --tw-purple-600: 147 51 234; --tw-purple-700: 192 132 252; --tw-purple-800: 216 180 254; --tw-purple-900: 233 213 255; --tw-purple-950: 243 232 255; --tw-fuchsia-50: 45 29 50; --tw-fuchsia-100: 59 30 65; --tw-fuchsia-200: 84 41 93; --tw-fuchsia-300: 126 74 136; --tw-fuchsia-400: 232 121 249; --tw-fuchsia-500: 217 70 239; --tw-fuchsia-600: 192 38 211; --tw-fuchsia-700: 232 121 249; --tw-fuchsia-800: 240 171 252; --tw-fuchsia-900: 245 208 254; --tw-fuchsia-950: 250 232 255; --tw-pink-50: 49 30 37; --tw-pink-100: 65 30 45; --tw-pink-200: 90 42 65; --tw-pink-300: 132 71 103; --tw-pink-400: 244 114 182; --tw-pink-500: 236 72 153; --tw-pink-600: 219 39 119; --tw-pink-700: 244 114 182; --tw-pink-800: 249 168 212; --tw-pink-900: 251 207 232; --tw-pink-950: 252 231 243; --tw-rose-50: 50 28 31; --tw-rose-100: 66 28 35; --tw-rose-200: 92 39 46; --tw-rose-300: 136 70 78; --tw-rose-400: 251 113 133; --tw-rose-500: 244 63 94; --tw-rose-600: 225 29 72; --tw-rose-700: 251 113 133; --tw-rose-800: 253 164 175; --tw-rose-900: 254 205 211; --tw-rose-950: 255 228 230; }
html[data-theme="dark"] .text-red-500 { color: rgb(var(--tw-red-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-red-600 { color: rgb(var(--tw-red-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-orange-500 { color: rgb(var(--tw-orange-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-orange-600 { color: rgb(var(--tw-orange-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-amber-500 { color: rgb(var(--tw-amber-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-amber-600 { color: rgb(var(--tw-amber-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-yellow-500 { color: rgb(var(--tw-yellow-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-yellow-600 { color: rgb(var(--tw-yellow-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-lime-500 { color: rgb(var(--tw-lime-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-lime-600 { color: rgb(var(--tw-lime-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-green-500 { color: rgb(var(--tw-green-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-green-600 { color: rgb(var(--tw-green-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-emerald-500 { color: rgb(var(--tw-emerald-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-emerald-600 { color: rgb(var(--tw-emerald-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-teal-500 { color: rgb(var(--tw-teal-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-teal-600 { color: rgb(var(--tw-teal-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-cyan-500 { color: rgb(var(--tw-cyan-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-cyan-600 { color: rgb(var(--tw-cyan-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-sky-500 { color: rgb(var(--tw-sky-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-sky-600 { color: rgb(var(--tw-sky-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-blue-500 { color: rgb(var(--tw-blue-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-blue-600 { color: rgb(var(--tw-blue-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-indigo-500 { color: rgb(var(--tw-indigo-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-indigo-600 { color: rgb(var(--tw-indigo-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-violet-500 { color: rgb(var(--tw-violet-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-violet-600 { color: rgb(var(--tw-violet-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-purple-500 { color: rgb(var(--tw-purple-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-purple-600 { color: rgb(var(--tw-purple-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-fuchsia-500 { color: rgb(var(--tw-fuchsia-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-fuchsia-600 { color: rgb(var(--tw-fuchsia-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-pink-500 { color: rgb(var(--tw-pink-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-pink-600 { color: rgb(var(--tw-pink-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-rose-500 { color: rgb(var(--tw-rose-800) / var(--tw-text-opacity, 1)); } html[data-theme="dark"] .text-rose-600 { color: rgb(var(--tw-rose-800) / var(--tw-text-opacity, 1)); }

/* =====================================================================
   SISTEMA DE DISEÑO DEL LMS · Colegio Paulo Freire (PF-544 · base PF-546)
   Un solo lugar para cambiar el aspecto de todas las páginas migradas.

   Capa 1  Tokens claro y oscuro (este archivo, arriba).
   Capa 2  Paletas de Tailwind apuntando a variables (sistema_paleta.py; va
           antepuesta a este archivo cuando Django lo sirve).
   Capa 3  Piezas .pf-* que solo leen tokens (este archivo).
   Capa 4  La página: {% block sistema %}migrada{% endblock %} pone
           <html data-sistema="migrada">, que enciende el modo oscuro, los
           neutros con tinte y los alias de las clases viejas.

   Una página sin migrar se ve igual que antes (salvo índigo y violeta → verde).
   Colores del colegio con papel fijo: amarillo = te espera, azul = informa o ya
   llegó, verde = listo y acción principal. El rojo, solo para errores y vencidos.
   Movimiento: la reacción aparece donde algo cambió y dura menos de 300 ms; lo
   que se usa decenas de veces al día (pasar el mouse, el teclado) solo cambia de color.
   ===================================================================== */

/* ===== Heredado de base.html (PF-559, 15-oct-2026) =====
   Lo que quedaba del <style> viejo de lms/base.html y todavía usan las páginas: el menú lateral de siempre (su clase .sidebar, los
   enlaces .menu-link, el buscador del menú), la geometría de los campos sin pieza y los mínimos táctiles del celular. Va al principio
   de sistema.css con la misma especificidad que tenía (el prefijo :where() no suma), así nada cambia de lugar; :where(html[data-tema])
   lo deja solo en las páginas de lms/base.html (el kiosco de admisión también carga sistema.css y no tiene data-tema). Se fueron
   --color-*, los degradados Flat UI, las clases .text/.bg/.border-brand-*, .btn-brand-*, .card-hover, .interactive-element,
   .table-responsive y bounceSubtle: ninguna página los usaba. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
:where(html[data-tema]) .sidebar { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); box-shadow: 0 20px 25px -5px rgba(44, 62, 80, 0.1), 0 10px 10px -5px rgba(44, 62, 80, 0.04); }
:where(html[data-tema]) .sidebar-collapsed { width: 4rem; }
@media (max-width: 768px) { :where(html[data-tema]) .sidebar, :where(html[data-tema]) .sidebar-collapsed { width: 280px !important; } }
@media (min-width: 769px) and (max-width: 1024px) { :where(html[data-tema]) .sidebar { width: 240px; } }
:where(html[data-tema]) .menu-link { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
:where(html[data-tema]) .menu-link:hover { background: rgba(52, 152, 219, 0.1); border-left: 3px solid #3498db; transform: translateX(4px); }
:where(html[data-tema]) .menu-link.active { background: linear-gradient(135deg, #3498db 0%, #5dade2 100%); border-left: 3px solid #ffffff; box-shadow: 0 4px 6px -1px rgba(44, 62, 80, 0.1), 0 2px 4px -1px rgba(44, 62, 80, 0.06); }
:where(html[data-tema]) .custom-scrollbar::-webkit-scrollbar { width: 4px; }
:where(html[data-tema]) .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
:where(html[data-tema]) .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 2px; }
:where(html[data-tema]) .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
:where(html[data-tema]) .menu-entry.menu-search-hidden, :where(html[data-tema]) a.menu-link.menu-search-hidden { display: none !important; }
:where(html[data-tema]) #menuSearchInput::-webkit-search-cancel-button { display: none; }
:where(html[data-tema]) .form-group :is(select, input, textarea),
:where(html[data-tema]) :is(select, input, textarea) { margin-top: 4px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; font-size: 16px; transition: all 0.3s ease; background: white; color: #374151; }
@media (max-width: 768px) {
  :where(html[data-tema]) .btn, :where(html[data-tema]) button, :where(html[data-tema]) .menu-link { min-height: 44px; min-width: 44px; }
  :where(html[data-tema]) .grid { gap: 0.75rem !important; }
  :where(html[data-tema]) body { font-size: 16px !important; }
  :where(html[data-tema]) :is(input, select, textarea) { font-size: 16px !important; }
}
/* ===== fin heredado de base.html ===== */

/* ---------- Capa 1 · tokens (claro) ---------- */
:root {
  --pf-pg: #F5F7F5; --pf-sf: #FFFFFF; --pf-sf2: #F0F4F1; --pf-sf3: #E8EEEA; --pf-scrim: rgba(13, 46, 32, .32);
  --pf-t1: #17211A; --pf-t2: #4A574F; --pf-t3: #5F6B63; /* AA (≥4.5:1) sobre pg, sf y sf2; antes 4.2–4.3:1 */ --pf-t4: #95A39A;
  --pf-ln: #E1E6E2; --pf-ln2: #EDF1EE; --pf-inl: #B4C1B8; --pf-inl-h: #8FA095;
  --pf-g9: #0D2E20; --pf-g8: #134430; --pf-g7: #1A8049; --pf-g6: #156B3C; --pf-g-ink: #1A8049;
  --pf-g-soft: #E3F2E9; --pf-g-soft-ink: #16693C; --pf-mint: #74D9A0; --pf-on-g: #FFFFFF;
  --pf-hero-t: #CFE0D5; --pf-hero-s: #A9C5B3;
  /* colores del colegio (sitio público y PDF): amarillo #F4C542 y azul #B1C7E4 */
  --pf-y: #F4C542; --pf-y-ink: #7A5600; --pf-y-soft: #FDF3D3; --pf-y-on: #2B2100;
  --pf-b: #B1C7E4; --pf-b7: #2E69A6; --pf-b-ink: #1E4D7B; --pf-b-soft: #E7EEF8; --pf-b-on: #102A45;
  /* estados */
  --pf-ok: #16693C; --pf-ok-bg: #E0F1E7;
  --pf-warn: var(--pf-y-ink); --pf-warn-bg: var(--pf-y-soft);
  --pf-crit: #B42318; --pf-crit-bg: #FDECEA; --pf-crit-bg-h: #FBD9D5;
  --pf-toast-bg: var(--pf-g9); --pf-toast-t: #EAF3EC; --pf-toast-ac: var(--pf-mint); --pf-toast-bad: #FFB4A8;
  --pf-info: var(--pf-b-ink); --pf-info-bg: var(--pf-b-soft);
  --pf-neu: #4A564E; --pf-neu-bg: #EEF1EF;
  --pf-att: var(--pf-y); --pf-cnt-bg: var(--pf-y); --pf-cnt-ink: var(--pf-y-on);
  --pf-mark: rgba(244, 197, 66, .55); /* amarillo del colegio al 55 %: sin color-mix para navegadores viejos */
  --pf-hero-cta: var(--pf-y); --pf-hero-cta-h: #F8D366; --pf-hero-cta-on: var(--pf-y-on);
  --pf-focus: #2F9C62;
  /* tonos de materia y de personas: verde, azul, amarillo, verde azulado, lila */
  --pf-m1-bg: #E3F2E9; --pf-m1-ink: #16693C; --pf-m2-bg: #E3ECF7; --pf-m2-ink: #1E4D7B; --pf-m3-bg: #FCEFC7; --pf-m3-ink: #6E4E00;
  --pf-m4-bg: #DDF0EC; --pf-m4-ink: #1D6B5E; --pf-m5-bg: #ECEAF7; --pf-m5-ink: #4F4A8C;
  /* colores que eligen las personas (carpetas y colecciones del Store): uno distinto por nombre, tinta ≥6:1 sobre su fondo */
  --pf-k-indigo-bg: #EBEDFF; --pf-k-indigo-ink: #4B48A8; --pf-k-blue-bg: #E3F0FE; --pf-k-blue-ink: #005A9D; --pf-k-cyan-bg: #D7F4FE; --pf-k-cyan-ink: #066278; --pf-k-teal-bg: #C9FAF6; --pf-k-teal-ink: #056662;
  --pf-k-emerald-bg: #D2FAE4; --pf-k-emerald-ink: #036946; --pf-k-green-bg: #E0F7D6; --pf-k-green-ink: #306801; --pf-k-yellow-bg: #F5F0CA; --pf-k-yellow-ink: #635901; --pf-k-amber-bg: #FEECD1; --pf-k-amber-ink: #764F01;
  --pf-k-orange-bg: #FFEADE; --pf-k-orange-ink: #894101; --pf-k-red-bg: #FEE9E5; --pf-k-red-ink: #9A2A1E; --pf-k-rose-bg: #FEE8EC; --pf-k-rose-ink: #97274B; --pf-k-pink-bg: #FEE7F5; --pf-k-pink-ink: #8B2D72;
  --pf-k-purple-bg: #F3EAFF; --pf-k-purple-ink: #6D3B99;
  /* sombras, tipos, radios y movimiento */
  --pf-sh1: 0 1px 2px rgba(13, 46, 32, .06), 0 1px 1px rgba(13, 46, 32, .03);
  --pf-sh2: 0 14px 32px -16px rgba(13, 46, 32, .30), 0 2px 6px -2px rgba(13, 46, 32, .08);
  --pf-sh3: 0 30px 60px -24px rgba(13, 46, 32, .40), 0 6px 16px -6px rgba(13, 46, 32, .12);
  --pf-f-in: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-f-lb: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --pf-f-mn: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pf-r-sm: 8px; --pf-r: 10px; --pf-r-lg: 14px;
  /* escala de texto: las páginas usan text-pf-2xs … text-pf-5xl (tailwind.config de sistema_tags) y nunca text-[Npx].
     Cambiar un escalón aquí cambia todas las páginas (PF-547, centralización pedida por Renato). */
  --pf-fs-2xs: 10.5px; --pf-fs-xs: 12px; --pf-fs-sm: 12.5px; --pf-fs-md: 13.5px; --pf-fs-base: 14px;
  --pf-fs-lg: 15px; --pf-fs-xl: 17px; --pf-fs-2xl: 20px; --pf-fs-3xl: 22px; --pf-fs-4xl: 28px; --pf-fs-5xl: 34px;
  --pf-e-out: cubic-bezier(0.23, 1, 0.32, 1); --pf-e-io: cubic-bezier(0.77, 0, 0.175, 1); --pf-e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --pf-d-press: 140ms; --pf-d-fast: 160ms; --pf-d-base: 220ms; --pf-d-slow: 300ms;
}

/* ---------- Capa 1 · tokens (oscuro: solo páginas migradas) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --pf-pg: #0E1411; --pf-sf: #151C18; --pf-sf2: #1A231E; --pf-sf3: #212C26; --pf-scrim: rgba(0, 0, 0, .5);
  --pf-t1: #E4EBE6; --pf-t2: #B3C0B7; --pf-t3: #88978D; --pf-t4: #66756B;
  --pf-ln: #25302A; --pf-ln2: #1E2823; --pf-inl: #43524A; --pf-inl-h: #5C6E63;
  --pf-g9: #0B2419; --pf-g8: #10382A; --pf-g7: #1A8049; --pf-g6: #156B3D; /* blanco sobre g7 4.97:1 y sobre g6 (hover) 6.56:1 */ --pf-g-ink: #6FD39B;
  --pf-g-soft: #16301F; --pf-g-soft-ink: #8FDCAE; --pf-hero-s: #9DBBA8;
  --pf-y-ink: #F4C542; --pf-y-soft: #342A0D; --pf-b7: #6E9FD6; --pf-b-ink: #A9C4E6; --pf-b-soft: #15263A; --pf-b-on: #DCE7F5;
  --pf-ok: #7FD8A6; --pf-ok-bg: #133022; --pf-crit: #FF8F80; --pf-crit-bg: #3B1816; --pf-crit-bg-h: #4E201C;
  --pf-toast-bg: #E4EBE6; --pf-toast-t: #0E1411; --pf-toast-ac: #1A8049; --pf-toast-bad: #B42318; --pf-neu: #B3C0B7; --pf-neu-bg: #222C26;
  --pf-mark: rgba(244, 197, 66, .3);
  --pf-focus: #5CCB8E;
  --pf-m1-bg: #16301F; --pf-m1-ink: #8FDCAE; --pf-m2-bg: #16263A; --pf-m2-ink: #A9C4E6; --pf-m3-bg: #342A0D; --pf-m3-ink: #F4C542;
  --pf-m4-bg: #12302B; --pf-m4-ink: #86D3C4; --pf-m5-bg: #24223A; --pf-m5-ink: #B9B4EA;
  --pf-k-indigo-bg: #282A4B; --pf-k-indigo-ink: #C0C5FF; --pf-k-blue-bg: #142F4B; --pf-k-blue-ink: #A2CFFF; --pf-k-cyan-bg: #013440; --pf-k-cyan-ink: #6EDBFC; --pf-k-teal-bg: #003634; --pf-k-teal-ink: #67E2DA;
  --pf-k-emerald-bg: #073724; --pf-k-emerald-ink: #84E1B5; --pf-k-green-bg: #1F3414; --pf-k-green-ink: #AADB93; --pf-k-yellow-bg: #342F03; --pf-k-yellow-ink: #D9CD76; --pf-k-amber-bg: #3F2903; --pf-k-amber-ink: #F4C176;
  --pf-k-orange-bg: #45240E; --pf-k-orange-ink: #FEB98F; --pf-k-red-bg: #47211B; --pf-k-red-ink: #FFB5A9; --pf-k-rose-bg: #462029; --pf-k-rose-ink: #FEB2C1; --pf-k-pink-bg: #412137; --pf-k-pink-ink: #FBAEE1;
  --pf-k-purple-bg: #352545; --pf-k-purple-ink: #DBBAFF;
  --pf-sh1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --pf-sh2: 0 16px 36px -16px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --pf-sh3: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 6px 16px -6px rgba(0, 0, 0, .5);
}

/* ---------- Página migrada: base ---------- */
html[data-sistema="migrada"] body { background: var(--pf-pg); color: var(--pf-t1); font-family: var(--pf-f-in); -webkit-font-smoothing: antialiased; --page-bg: var(--pf-pg); }
html[data-sistema="migrada"] :focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* los campos de siempre (base.html los pinta blancos); los de las piezas .pf-inp y .pf-textarea van aparte */
html[data-sistema="migrada"] :is(select, input, textarea):not(.pf-inp *):not(.pf-textarea) { background: var(--pf-sf); color: var(--pf-t1); border-color: var(--pf-inl); }
/* ocultos: [hidden] gana siempre en páginas migradas (aunque una pieza ponga display) y .hidden
   tiene un respaldo sin especificidad por si el CDN de Tailwind no carga (no pisa md:block) */
html[data-sistema="migrada"] [hidden] { display: none !important; }
:where(html[data-sistema="migrada"] .hidden) { display: none; }
html[data-sistema="migrada"] ::placeholder { color: var(--pf-t4); }
html[data-sistema="migrada"] mark { background: var(--pf-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-theme="dark"] .bg-white { --tw-bg-opacity: 1; background-color: rgb(21 28 24 / var(--tw-bg-opacity)); }
html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-md { --tw-shadow-color: rgba(0, 0, 0, .5); }

/* ---------- Capa 3 · piezas ---------- */
.pf-lbl { font-family: var(--pf-f-lb); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-t3); }
.pf-num { font-variant-numeric: tabular-nums; }
.pf-hint { margin: 0; font-size: 13px; color: var(--pf-t3); }
.pf-sr { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* lo absoluto que vive dentro de una tabla con desplazamiento (p. ej. .pf-sr, sr-only) no debe estirar la página */
html[data-sistema="migrada"] :is(.overflow-x-auto, .overflow-auto, [class*=":overflow-x-auto"], [class*=":overflow-auto"]) { position: relative; } /* también md:overflow-x-auto… */
/* una tabla con desplazamiento no se aplasta en el celular (una letra por línea): se desplaza */
html[data-sistema="migrada"] .overflow-x-auto > .pf-tbl { min-width: 720px; }
.pf-tbl td:is(.num, .text-right, .pf-num), .pf-tbl td .pf-num { white-space: nowrap; }

/* botones: se hunden al presionar; conservan su ancho mientras trabajan */
.pf-btn { height: 38px; padding: 0 14px; border-radius: 9px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 13.5px/1 var(--pf-f-in); white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--pf-g7); color: var(--pf-on-g); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); -webkit-user-select: none; user-select: none; }
.pf-btn:active { transform: scale(.97); }
.pf-btn svg, .pf-btn i { flex: none; }
.pf-btn.sec { background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-inl); }
.pf-btn.ghost { background: transparent; color: var(--pf-t2); }
.pf-btn.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pf-btn.sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.pf-btn.ic { width: 38px; padding: 0; }
.pf-btn.sm.ic { width: 32px; }
.pf-btn.wide { width: 100%; }
.pf-btn[disabled], .pf-btn[aria-disabled="true"] { opacity: .55; }
.pf-btn[disabled] { pointer-events: none; cursor: not-allowed; }
.pf-btn[aria-disabled="true"] { cursor: default; }
.pf-btn.is-busy { cursor: progress; pointer-events: none; }
.pf-btn.is-ok { background: var(--pf-g9); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pf-btn:hover { background: var(--pf-g6); }
  .pf-btn.sec:hover { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-inl-h); }
  .pf-btn.ghost:hover { background: var(--pf-sf2); color: var(--pf-t1); }
  .pf-btn.crit:hover { background: var(--pf-crit-bg-h); box-shadow: inset 0 0 0 1px var(--pf-crit); }
}
.pf-spin { animation: pf-spin 700ms linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* mantener presionado (lo que no se puede deshacer): la capa roja avanza mientras se sostiene */
.pf-hold { position: relative; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pf-hold .pf-hold-l { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.pf-hold .pf-hold-fill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--pf-crit); color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--pf-e-out); }
.pf-hold.pressing .pf-hold-fill { clip-path: inset(0 0 0 0); transition: clip-path 1400ms linear; }
.pf-hold.held .pf-hold-fill { clip-path: inset(0 0 0 0); }
html[data-theme="dark"] .pf-hold .pf-hold-fill { color: #2A0B07; }

/* campos */
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-field > label, .pf-field > .pf-fl { font-size: 13px; font-weight: 600; color: var(--pf-t2); display: flex; justify-content: space-between; gap: 8px; }
.pf-field > label small, .pf-field > .pf-fl small { font-weight: 500; color: var(--pf-t3); }
.pf-help { font-size: 12.5px; color: var(--pf-t3); }
.pf-help.err { color: var(--pf-crit); }
.pf-inp { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); padding: 0 12px; color: var(--pf-t3); transition: box-shadow var(--pf-d-fast) ease; min-width: 0; }
.pf-inp input, .pf-inp select { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; color: var(--pf-t1); font: 14px var(--pf-f-in); box-shadow: none; }
.pf-inp:focus-within { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); color: var(--pf-g-ink); }
.pf-inp.bad { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
/* campo con error marcado desde JS o por Django: aria-invalid="true" en el campo (no colores en style); vale
   dentro de .pf-inp, en .pf-textarea y en los campos sueltos de una página migrada (PF-555) */
.pf-inp:has(:is(input, select)[aria-invalid="true"]), .pf-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
html[data-sistema="migrada"] :is(select, input, textarea)[aria-invalid="true"]:not(.pf-inp *):not(.pf-textarea) { border-color: var(--pf-crit); box-shadow: 0 0 0 1px var(--pf-crit); }
html[data-sistema="migrada"] .pf-textarea[aria-invalid="true"], html[data-sistema="migrada"] .pf-inp:has(:is(input, select)[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.pf-inp input:focus-visible, .pf-inp select:focus-visible { outline: none; }
/* campos que pinta Django ({{ form.campo }}) dentro de una pieza: misma forma que .pf-inp, sin tocar el widget */
html[data-sistema="migrada"] :is(.pf-field, .pf-sheet-foot, .pf-ph-act) :is(select:not([multiple]), input:not([type]), input[type="text"], input[type="search"]:not(.select2-search__field), input[type="number"], input[type="email"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"], input[type="password"]) {
  min-height: 38px; padding: 0 12px; margin: 0; border: 0; border-radius: 9px; background: var(--pf-sf); color: var(--pf-t1);
  box-shadow: inset 0 0 0 1px var(--pf-inl); font: 14px var(--pf-f-in); outline: none; transition: box-shadow var(--pf-d-fast) ease;
}
/* campo de Django con error (aria-invalid) dentro de una pieza: va después de la regla de arriba, que si no lo pisa */
html[data-sistema="migrada"] :is(.pf-field, .pf-sheet-foot, .pf-ph-act) :is(select:not([multiple]), textarea, input)[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
html[data-sistema="migrada"] .pf-field :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])) { width: 100%; }
/* el textarea de Django va aparte: dentro de la lista de arriba heredaba su especificidad (la de input[type="search"]:not(…))
   y su min-height de 38 px y relleno 0 ganaban a esta regla, así que quedaba aplastado (PF-562) */
html[data-sistema="migrada"] :is(.pf-field, .pf-sheet-foot, .pf-ph-act) textarea:not(.select2-search__field) {
  min-height: 96px; padding: 10px 12px; margin: 0; border: 0; border-radius: 9px; background: var(--pf-sf); color: var(--pf-t1);
  box-shadow: inset 0 0 0 1px var(--pf-inl); font: 14px/1.5 var(--pf-f-in); outline: none; transition: box-shadow var(--pf-d-fast) ease; resize: vertical;
}
html[data-sistema="migrada"] :is(.pf-field, .pf-sheet-foot, .pf-ph-act) :is(select, textarea, input):focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent);
}
html[data-sistema="migrada"] :is(.pf-field, .pf-sheet-foot, .pf-ph-act) :is(select, textarea, input)[aria-invalid="true"]:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--pf-crit), 0 0 0 3px var(--pf-crit-bg); box-shadow: inset 0 0 0 1.5px var(--pf-crit), 0 0 0 4px color-mix(in srgb, var(--pf-crit) 16%, transparent);
}
.pf-textarea { width: 100%; min-height: 96px; resize: vertical; margin: 0; border: 0; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); padding: 10px 12px; font: 14px/1.5 var(--pf-f-in); color: var(--pf-t1); outline: none; }
.pf-textarea:focus { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
.pf-textarea.bad { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.pf-textarea:focus-visible { outline: none; }
.pf-inp.bad:focus-within, .pf-textarea.bad:focus { box-shadow: inset 0 0 0 1.5px var(--pf-crit), 0 0 0 3px var(--pf-crit-bg); box-shadow: inset 0 0 0 1.5px var(--pf-crit), 0 0 0 4px color-mix(in srgb, var(--pf-crit) 16%, transparent); color: var(--pf-crit); }
.pf-segs { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: 10px; background: var(--pf-sf3); }
.pf-segs button { height: 30px; padding: 0 12px; margin: 0; border: 0; border-radius: 8px; font: 600 13px var(--pf-f-in); color: var(--pf-t2); background: transparent; cursor: pointer; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; white-space: nowrap; }
.pf-segs button[aria-pressed="true"], .pf-segs button[aria-checked="true"], .pf-segs button.on { background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh1); }
html[data-theme="dark"] .pf-segs button[aria-pressed="true"], html[data-theme="dark"] .pf-segs button[aria-checked="true"], html[data-theme="dark"] .pf-segs button.on { background: var(--pf-inl); }
.pf-segs button svg { vertical-align: -3px; }
.pf-tg { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--pf-sf2); cursor: pointer; }
.pf-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pf-tg-sw { position: relative; width: 36px; height: 22px; flex: none; border-radius: 11px; background: var(--pf-inl); transition: background-color 180ms ease; margin-top: 1px; }
.pf-tg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 200ms var(--pf-e-out); }
.pf-tg input:checked + .pf-tg-sw { background: var(--pf-g7); }
.pf-tg input:checked + .pf-tg-sw::after { transform: translateX(14px); }
.pf-tg input:focus-visible + .pf-tg-sw { outline: 2px solid var(--pf-focus); outline-offset: 2px; }

/* chips, pastillas, contadores, fechas, avance */
.pf-chip { height: 32px; padding: 0 10px; margin: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--pf-f-in); color: var(--pf-t2); box-shadow: inset 0 0 0 1px var(--pf-inl); background: var(--pf-sf); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.pf-chip:active { transform: scale(.97); }
.pf-chip .c { font-size: 12px; font-weight: 600; color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.pf-chip.on, .pf-chip[aria-pressed="true"] { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); box-shadow: inset 0 0 0 1px var(--pf-g7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-g7) 35%, transparent); }
.pf-chip.on .c, .pf-chip[aria-pressed="true"] .c { color: var(--pf-g-soft-ink); }
@media (hover: hover) and (pointer: fine) { .pf-chip:not(.on):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--pf-inl-h); color: var(--pf-t1); } }
.pf-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 12px var(--pf-f-in); white-space: nowrap; background: var(--pf-neu-bg); color: var(--pf-neu); transition: background-color var(--pf-d-base) ease, color var(--pf-d-base) ease; }
.pf-pill > i:empty:not([class*="fa-"]) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pf-pill { max-width: 100%; min-width: 0; }
.pf-pill > .truncate { min-width: 0; }
.pf-pill.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-pill.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-pill.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pf-pill.info { background: var(--pf-info-bg); color: var(--pf-info); }
.pf-pill.brand { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
.pf-pill.nota { min-width: 50px; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.pf-cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; font: 700 12px var(--pf-f-in); background: var(--pf-cnt-bg); color: var(--pf-cnt-ink); font-variant-numeric: tabular-nums; }
.pf-cnt.zero { background: transparent; color: var(--pf-t4); font-weight: 500; }
.pf-due { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--pf-t2); }
.pf-due::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-t4); flex: none; }
.pf-due.soon::before { background: var(--pf-att); box-shadow: 0 0 0 3px var(--pf-warn-bg); }
.pf-due.late { color: var(--pf-crit); }
.pf-due.late::before { background: var(--pf-crit); }
.pf-prog { display: block; position: relative; height: 6px; border-radius: 3px; background: var(--pf-ln2); overflow: hidden; min-width: 48px; }
.pf-prog > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 0)); background: var(--pf-g7); border-radius: 3px; transition: transform var(--pf-d-slow) var(--pf-e-out); }
.pf-prog.b > i { background: var(--pf-b7); }
.pf-prog.warn > i { background: var(--pf-warn); }
.pf-prog.crit > i { background: var(--pf-crit); }
.pf-prog.ok > i { background: var(--pf-ok); }
.pf-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font: 600 12px var(--pf-f-in); background: var(--pf-av-bg, var(--pf-g-soft)); color: var(--pf-av-ink, var(--pf-g-soft-ink)); }
.pf-av.sm { width: 26px; height: 26px; font-size: 11px; }
.pf-av.lg { width: 56px; height: 56px; font-size: 19px; border-radius: 16px; }
.pf-av[data-tono="1"], .pf-mini-ic[data-tono="1"] { --pf-av-bg: var(--pf-m1-bg); --pf-av-ink: var(--pf-m1-ink); }
.pf-av[data-tono="2"], .pf-mini-ic[data-tono="2"] { --pf-av-bg: var(--pf-m2-bg); --pf-av-ink: var(--pf-m2-ink); }
.pf-av[data-tono="3"], .pf-mini-ic[data-tono="3"] { --pf-av-bg: var(--pf-m3-bg); --pf-av-ink: var(--pf-m3-ink); }
.pf-av[data-tono="4"], .pf-mini-ic[data-tono="4"] { --pf-av-bg: var(--pf-m4-bg); --pf-av-ink: var(--pf-m4-ink); }
.pf-av[data-tono="5"], .pf-mini-ic[data-tono="5"] { --pf-av-bg: var(--pf-m5-bg); --pf-av-ink: var(--pf-m5-ink); }
.pf-mini-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: inline-grid; place-items: center; background: var(--pf-av-bg, var(--pf-sf2)); color: var(--pf-av-ink, var(--pf-t2)); }
.pf-kv { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); margin: 0; }
.pf-kv > div { display: contents; }
.pf-kv dt, .pf-kv dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--pf-ln2); font-size: 13.5px; }
.pf-kv dt { color: var(--pf-t3); }
.pf-kv dd { color: var(--pf-t1); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.pf-kv > div:first-child dt, .pf-kv > div:first-child dd { border-top: 0; }
.pf-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: var(--pf-info-bg); color: var(--pf-info); }
.pf-msg.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-msg.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-msg.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }

/* cifra destacada de una página que se recorre (en una que resume «lo que se consulta» va .pf-hero con .pf-mk) */
.pf-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .pf-kpis { grid-template-columns: repeat(var(--pf-kpis, 4), minmax(0, 1fr)); } }
.pf-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.pf-kpi > .pf-lbl { display: flex; align-items: center; gap: 6px; }
.pf-kpi > b { font-size: 26px; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; color: var(--pf-t1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-kpi > small { font-size: 12.5px; color: var(--pf-t3); }

/* hoja con pestañas unidas (la pestaña elegida es del color de la hoja) */
.pf-sheet { background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh1); min-width: 0; position: relative; }
.pf-sheet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--pf-ln2); }
.pf-sheet-bar.sticky { position: sticky; top: 0; z-index: 4; background: var(--pf-sf); border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; }
.pf-sheet-sec { padding: 18px 20px; border-top: 1px solid var(--pf-ln2); display: flex; flex-direction: column; gap: 12px; }
.pf-sheet-sec:first-child { border-top: 0; }
.pf-sheet-sec > header { display: flex; align-items: center; gap: 8px; }
.pf-sheet-sec > header h3 { margin: 0; font-size: 15px; font-weight: 650; }
.pf-sheet-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--pf-ln2); font-size: 12.5px; color: var(--pf-t3); }
.pf-tabs { position: relative; display: flex; gap: 2px; padding-left: 18px; overflow-x: auto; scrollbar-width: none; scroll-margin-top: 72px; }
.pf-tabs::-webkit-scrollbar { display: none; }
/* más pestañas fuera de la vista: el borde de ese lado se difumina (lo marca PF.pestanas) */
.pf-tabs.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.pf-tabs.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.pf-tabs.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.pf-tab { position: relative; z-index: 2; height: 42px; padding: 0 16px; margin: 0; border: 0; border-radius: 11px 11px 0 0; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--pf-t2); font: 600 13.5px var(--pf-f-in); white-space: nowrap; cursor: pointer; text-decoration: none; transition: color var(--pf-d-base) ease; flex: none; }
.pf-tab .c { font-size: 12px; font-weight: 600; color: var(--pf-t3); background: var(--pf-sf3); border-radius: 6px; padding: 0 6px; line-height: 19px; font-variant-numeric: tabular-nums; }
.pf-tab .c.warn { background: var(--pf-cnt-bg); color: var(--pf-cnt-ink); }
.pf-tab.on, .pf-tab[aria-selected="true"] { color: var(--pf-t1); }
.pf-tab.on .c:not(.warn), .pf-tab[aria-selected="true"] .c:not(.warn) { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
@media (hover: hover) and (pointer: fine) { .pf-tab:hover { color: var(--pf-t1); } }
.pf-tab-ind { position: absolute; z-index: 1; bottom: 0; left: 0; width: 0; height: 42px; background: var(--pf-sf); border-radius: 11px 11px 0 0; box-shadow: 0 -1px 0 var(--pf-ln), 1px 0 0 var(--pf-ln), -1px 0 0 var(--pf-ln); will-change: transform; transition: transform 200ms var(--pf-e-out); }
.pf-tab-ind::before, .pf-tab-ind::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; }
.pf-tab-ind::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--pf-sf) 12px); }
.pf-tab-ind::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--pf-sf) 12px); }
.pf-tabs + .pf-sheet { margin-top: -1px; }

/* cabecera de página (lo que se recorre) y bloque verde (lo que se consulta) */
.pf-ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.pf-ph-t { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-ph-t h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; text-wrap: balance; }
.pf-ph-act { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-band, .pf-hero { position: relative; z-index: 5; border-radius: var(--pf-r-lg); color: var(--pf-hero-t); background: var(--pf-g9); } /* por encima de las pestañas (z 2): su menú «Más» se abre sobre ellas */
.pf-band { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 14px 18px; }
.pf-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; padding: 20px 22px; }
.pf-band-t, .pf-hero-main { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-hero-main { gap: 8px; }
.pf-band-t b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.pf-band-t small, .pf-hero p { margin: 0; font-size: 13px; color: var(--pf-hero-s); }
.pf-hero h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
:is(.pf-band, .pf-hero) .pf-lbl { color: var(--pf-mint); }
/* la cinta del colegio antes de la etiqueta del bloque verde: amarillo, verde y azul */
:is(.pf-band, .pf-hero) .pf-lbl::before { content: ""; display: inline-block; width: 20px; height: 4px; margin-right: 8px; vertical-align: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--pf-y) 0 6px, transparent 6px 7px, var(--pf-mint) 7px 13px, transparent 13px 14px, var(--pf-b) 14px 20px); }
:is(.pf-band, .pf-hero) .pf-y { color: var(--pf-y); }
/* los botones dentro de un menú, hoja o diálogo abiertos desde la cabecera conservan sus colores de siempre (PF-560) */
:is(.pf-band, .pf-hero) .pf-btn:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn) { background: var(--pf-hero-cta); color: var(--pf-hero-cta-on); }
:is(.pf-band, .pf-hero) .pf-btn.sec:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn) { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:is(.pf-band, .pf-hero) .pf-btn[disabled]:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn) { opacity: 1; background: rgba(255, 255, 255, .08); color: var(--pf-hero-s); }
:is(.pf-band, .pf-hero) .pf-btn.is-ok:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn) { background: var(--pf-mint); color: var(--pf-g9); }
@media (hover: hover) and (pointer: fine) { :is(.pf-band, .pf-hero) .pf-btn:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn):hover { background: var(--pf-hero-cta-h); } :is(.pf-band, .pf-hero) .pf-btn.sec:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn):hover { background: rgba(255, 255, 255, .14); } }
:is(.pf-band, .pf-hero) .pf-pill { background: rgba(255, 255, 255, .1); color: #E3EFE7; }
.pf-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--pf-hero-s); }
.pf-hero-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.pf-hero-k { display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 8px; }
.pf-mk { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 11px; margin: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--pf-hero-s); font: inherit; text-align: left; min-width: 0; text-decoration: none; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
button.pf-mk, a.pf-mk { cursor: pointer; }
button.pf-mk:active, a.pf-mk:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { button.pf-mk:hover, a.pf-mk:hover { background: rgba(255, 255, 255, .1); } }
.pf-mk-l { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-mk-l::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--pf-kc, rgba(255, 255, 255, .35)); flex: none; }
.pf-mk b { font-size: 24px; line-height: 1.05; font-weight: 650; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.pf-mk > small { font-size: 12px; }
.pf-mk.y { --pf-kc: var(--pf-y); } .pf-mk.b { --pf-kc: var(--pf-b); } .pf-mk.g { --pf-kc: var(--pf-mint); }
.pf-mk.y b { color: var(--pf-y); }
.pf-mk.on, .pf-mk[aria-pressed="true"] { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px var(--pf-kc, #fff); }
.pf-mk .pf-prog { background: rgba(255, 255, 255, .12); margin-top: 4px; }
.pf-mk .pf-prog > i { background: var(--pf-kc, var(--pf-mint)); }
@media (max-width: 900px) { .pf-hero { grid-template-columns: 1fr; align-items: start; } .pf-hero-k { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pf-hero { padding: 16px; } .pf-hero h2 { font-size: 20px; } .pf-hero-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-band { padding: 14px; } }

/* tabla y filas */
.pf-tbl { width: 100%; border-collapse: collapse; color: inherit; font: inherit; }
:where(.pf-tbl th) { text-align: left; } /* sin especificidad: text-right / .num lo cambian */
.pf-tbl :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-tbl th { font: 600 11.5px var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-t3); padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--pf-ln); }
/* aire arriba y abajo (20-oct-2026): con padding vertical 0, una celda de dos o tres líneas tocaba las líneas de la fila.
   border-box: la fila de una línea sigue midiendo 56 px. La vigila celda_sin_aire del chequeo visual. */
.pf-tbl td { padding: 10px 12px; height: 56px; box-sizing: border-box; border-bottom: 1px solid var(--pf-ln2); font-size: 13.5px; vertical-align: middle; }
.pf-tbl tr:last-child td { border-bottom: 0; }
/* lo largo se queda en su celda (PF-560, catálogo de rubros): una palabra sin espacios (un código) se parte
   en vez de montarse sobre la columna vecina, y en tablas de ancho fijo y en las tarjetas del celular la
   píldora puede ir en dos líneas. Sin efecto cuando cabe. La vigila celda_pisada del chequeo visual. */
.pf-tbl td { overflow-wrap: break-word; }
.pf-tbl[class*="table-fixed"] td .pf-pill { max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; line-height: 1.25; white-space: normal; }
/* en tablas de ancho fijo, una fecha con hora («11/10/2026 02:16») puede bajar la hora a otra línea en vez de pisar la
   columna vecina; los montos no tienen espacios y siguen en una sola línea (error repetido en PF-555 y PF-556) */
.pf-tbl[class*="table-fixed"] td:is(.num, .text-right, .pf-num), .pf-tbl[class*="table-fixed"] td .pf-num { white-space: normal; }
@media (max-width: 767px) { .pf-tbl[class*="max-md:block"] td .pf-pill { max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; line-height: 1.25; white-space: normal; } }
/* columnas que se ordenan: el encabezado es un botón; aria-sort dice el sentido */
.pf-tbl th > button { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pf-tbl th > button svg { opacity: .55; }
.pf-tbl th[aria-sort="ascending"] > button, .pf-tbl th[aria-sort="descending"] > button { color: var(--pf-t1); }
.pf-tbl th[aria-sort="ascending"] > button svg, .pf-tbl th[aria-sort="descending"] > button svg { opacity: 1; }
.pf-tbl th[aria-sort="ascending"] > button svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .pf-tbl th > button:hover { color: var(--pf-t1); } }
.pf-tbl tbody tr { transition: background-color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .pf-tbl tbody tr:hover { background: var(--pf-sf2); } }
/* filas que se abren al tocarlas (data-pf-fila + un enlace data-pf-destino, ver sistema.js) */
[data-pf-fila] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-pf-fila] :is(a, button, input, select, label, [data-pf-no-fila]) { cursor: auto; }
[data-pf-fila] :is(a, button, label) { cursor: pointer; }
[data-pf-fila]:active { background: var(--pf-sf2); }
@media (hover: hover) and (pointer: fine) { [data-pf-fila]:hover a[data-pf-destino] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.pf-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pf-tt b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tt small { font-size: 12.5px; color: var(--pf-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* si el nombre se corta, la página pone title con el texto completo; en pantallas táctiles (sin hover) usa hasta dos líneas */
@media (pointer: coarse) { .pf-tt b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } }
.pf-rows { display: flex; flex-direction: column; }
.pf-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--pf-ln2); min-width: 0; color: inherit; text-decoration: none; transition: background-color 120ms ease; }
.pf-row:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) { a.pf-row:hover, .pf-row[role="button"]:hover { background: var(--pf-sf2); } }

/* ---------- fila con dato clave (12-oct-2026): lo que manda en la lista no va en una línea gris ----------
   [.pf-dia o ícono] [.pf-rica-c: título + .pf-rica-m (dato clave: materia, plazo…) + .pf-rica-d (detalle)] [.pf-cifras] [.pf-rica-acc]
   Pantalla ancha (≥1280): todo en una línea. iPad y laptop chica: las cifras bajan debajo del cuerpo. Celular: las cifras van a lo ancho. */
.pf-row.rica { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ini cuerpo acc" "ini cifras cifras"; column-gap: 14px; row-gap: 10px; align-items: start; padding: 14px 16px; }
.pf-row.rica > :first-child { grid-area: ini; }
.pf-rica-c { grid-area: cuerpo; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-row.rica > .pf-cifras { grid-area: cifras; }
.pf-rica-acc { grid-area: acc; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pf-rica-t { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--pf-t1); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-rica-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--pf-t3); }
.pf-rica-m > .pf-pill { height: 24px; }
.pf-rica-d { font-size: 12.5px; color: var(--pf-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1280px) { .pf-row.rica { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ini cuerpo cifras acc"; align-items: center; } }
@media (max-width: 767px) { .pf-row.rica { grid-template-areas: "ini cuerpo acc" "cifras cifras cifras"; column-gap: 12px; padding: 14px 12px; } .pf-rica-d { display: none; } }

/* fila sin cifras: sin la fila vacía de la grilla (ni su espacio) */
.pf-row.rica:not(:has(> .pf-cifras)) { grid-template-areas: "ini cuerpo acc"; grid-template-columns: auto minmax(0, 1fr) auto; }

/* ---------- estudiantes y familias (PF-562, 12-oct-2026) ----------
   .pf-rol: franja fija de «quién está mirando» (apoderado: azul) con el hijo y «Cambiar»; .pf-hijos: tarjetas del selector.
   .pf-anillo: avance redondo con --v (0–1) y la cifra al centro. .pf-sheet.destacada: la tarjeta de «Lo próximo». */
.pf-rol { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: var(--pf-r-lg); background: var(--pf-info-bg); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-b); } /* t1: legible en claro y oscuro */
.pf-rol > .pf-av { width: 38px; height: 38px; font-size: 13px; background: var(--pf-y); color: var(--pf-y-on); }
.pf-rol-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pf-rol-t small { font-size: 12px; font-weight: 600; color: var(--pf-info); }
.pf-rol-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-rol .pf-btn { flex: none; }
.pf-rol.prev { background: var(--pf-warn-bg); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-y); }
.pf-hijos { display: flex; flex-direction: column; gap: 10px; }
.pf-hijo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--pf-r-lg); background: var(--pf-sf); color: inherit; text-align: left; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--pf-ln); transition: box-shadow var(--pf-d-base) ease, background-color var(--pf-d-base) ease; }
.pf-hijo[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--pf-g7); }
@media (hover: hover) and (pointer: fine) { .pf-hijo:hover { background: var(--pf-sf2); } }
.pf-hijo > .pf-av { width: 44px; height: 44px; font-size: 14px; }
.pf-hijo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-hijo-t small { font-size: 12.5px; color: var(--pf-t3); }
.pf-anillo { --v: 0; --c: var(--pf-y); --f: var(--pf-ln2); width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 360deg), var(--f) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.pf-anillo-c { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.pf-anillo-c > .pf-anillo { position: absolute; inset: 0; }
.pf-anillo-c > b { font: 700 17px var(--pf-f-in); font-variant-numeric: tabular-nums; }
.pf-hero .pf-anillo, .pf-band .pf-anillo { --f: rgba(255, 255, 255, .14); }
.pf-anillo.ok { --c: var(--pf-ok); } .pf-anillo.warn { --c: var(--pf-warn); } .pf-anillo.crit { --c: var(--pf-crit); } .pf-anillo.info { --c: var(--pf-info); } .pf-hero .pf-anillo.ok, .pf-band .pf-anillo.ok { --c: var(--pf-mint); }
.pf-sheet.destacada { box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); }
.pf-lbl.crit { color: var(--pf-crit); } .pf-lbl.warn { color: var(--pf-warn); } .pf-lbl.info { color: var(--pf-info); } .pf-lbl.ok { color: var(--pf-ok); }

/* ficha de fecha: mes, día y hora; el tono dice cuánto falta (crit vencida, warn hoy o mañana, info esta semana) */
.pf-dia { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px 0 6px; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t3); line-height: 1; text-align: center; box-shadow: inset 0 0 0 1px var(--pf-ln2); }
.pf-dia > small { font: 600 11px var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; }
.pf-dia > b { font: 700 22px var(--pf-f-in); font-variant-numeric: tabular-nums; margin: 3px 0 3px; color: var(--pf-t1); }
.pf-dia > span { font: 500 11px var(--pf-f-in); font-variant-numeric: tabular-nums; }
.pf-dia:is(.ok, .warn, .crit, .info) { box-shadow: none; }
.pf-dia.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-dia.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-dia.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pf-dia.info { background: var(--pf-info-bg); color: var(--pf-info); }
.pf-dia:is(.ok, .warn, .crit, .info) > b { color: inherit; }
.pf-dia.apagada { opacity: .55; }

/* materia (o categoría) con su tono fijo: {{ nombre|tono }} da 1–5 y la misma materia sale siempre del mismo color */
.pf-pill[data-tono="1"] { background: var(--pf-m1-bg); color: var(--pf-m1-ink); }
.pf-pill[data-tono="2"] { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.pf-pill[data-tono="3"] { background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
.pf-pill[data-tono="4"] { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.pf-pill[data-tono="5"] { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }

/* cifras de la fila: casillas con número grande; .cero apaga, .warn/.ok/.crit avisan */
.pf-cifras { display: flex; gap: 6px; min-width: 0; }
.pf-cifra { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 68px; padding: 6px 8px; border-radius: var(--pf-r-sm); background: var(--pf-sf2); line-height: 1.1; text-align: center; }
.pf-cifra > b { font: 700 17px var(--pf-f-in); font-variant-numeric: tabular-nums; color: var(--pf-t1); }
.pf-cifra > small { font-size: 11px; color: var(--pf-t3); margin-top: 3px; white-space: nowrap; }
.pf-cifra > small > i { margin-right: 3px; }
.pf-cifra.cero { background: transparent; box-shadow: inset 0 0 0 1px var(--pf-ln2); } .pf-cifra.cero > b, .pf-cifra.cero > small { color: var(--pf-t3); } /* t3: contraste AA; lo apagado lo dice el fondo vacío */
.pf-cifra.ok { background: var(--pf-ok-bg); } .pf-cifra.ok > b, .pf-cifra.ok > small { color: var(--pf-ok); }
.pf-cifra.warn { background: var(--pf-warn-bg); } .pf-cifra.warn > b, .pf-cifra.warn > small { color: var(--pf-warn); }
.pf-cifra.crit { background: var(--pf-crit-bg); } .pf-cifra.crit > b, .pf-cifra.crit > small { color: var(--pf-crit); }
.pf-cifra.info { background: var(--pf-info-bg); } .pf-cifra.info > b, .pf-cifra.info > small { color: var(--pf-info); }
/* iPad y celular: las cifras bajan debajo del cuerpo como pastillas en una línea (número + nombre) */
@media (max-width: 1279px) { .pf-row.rica .pf-cifras { flex-wrap: wrap; } .pf-row.rica .pf-cifra { flex-direction: row; gap: 5px; min-width: 0; padding: 4px 10px; border-radius: 999px; } .pf-row.rica .pf-cifra > b { font-size: 14px; } .pf-row.rica .pf-cifra > small { margin-top: 0; font-size: 12px; } } /* fuera de la fila, la cifra conserva su casilla */
/* celular: una casilla por cifra, todas en una fila */
@media (max-width: 767px) { .pf-row.rica .pf-cifras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .pf-row.rica .pf-cifra { flex-direction: column; gap: 1px; padding: 5px 4px; border-radius: var(--pf-r-sm); } .pf-row.rica .pf-cifra > small { font-size: 11px; } .pf-row.rica .pf-cifra > small > i { display: none; } }

/* menús: crecen desde su botón; flechas para moverse, Esc para cerrar */
.pf-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); width: min(260px, calc(100vw - 32px)); padding: 6px; border-radius: 12px; background: var(--pf-sf); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); display: flex; flex-direction: column; gap: 1px; transform-origin: top right; transform: scale(.96) translateY(-4px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--pf-d-fast) var(--pf-e-out), opacity var(--pf-d-fast) var(--pf-e-out), visibility 0s linear var(--pf-d-fast); outline: none; }
.pf-menu.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform var(--pf-d-fast) var(--pf-e-out), opacity var(--pf-d-fast) var(--pf-e-out); }
/* cerrado y en su lugar no ocupa alto: así no estira la tabla o la lista con desplazamiento propio que lo contiene
   (el último «⋯» de una tabla creaba una zona de desplazamiento vacía debajo) */
.pf-menu:not(.on):not(.pf-flota) { max-height: 0; max-width: 0; overflow: hidden; padding: 0; box-shadow: none; }
.pf-menu.left { right: auto; left: 0; transform-origin: top left; }
/* un ítem puede ir dentro de su propio <form> (acción POST): el form no dibuja caja */
.pf-menu[role="menu"] > form { display: contents; }
.pf-menu > button, .pf-menu > a, .pf-menu > form > button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin: 0; border: 0; border-radius: 8px; background: transparent; font: 13.5px var(--pf-f-in); color: var(--pf-t1); text-decoration: none; cursor: pointer; text-align: left; }
.pf-menu > button:focus-visible, .pf-menu > a:focus-visible, .pf-menu > form > button:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; }
.pf-menu > :is(button, a) > i:first-child, .pf-menu > form > button > i:first-child { width: 16px; flex: none; text-align: center; color: var(--pf-t3); }
.pf-menu > .crit, .pf-menu > form > .crit, .pf-menu > .crit > i:first-child, .pf-menu > form > .crit > i:first-child { color: var(--pf-crit); }
.pf-menu > button[disabled], .pf-menu > form > button[disabled] { opacity: .5; cursor: not-allowed; }
.pf-menu > :is(button, a) small { margin-left: auto; font-size: 11.5px; color: var(--pf-t3); }
.pf-menu > [aria-checked="true"] { font-weight: 650; }
.pf-menu > [aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--pf-g-ink); font-weight: 700; }
.pf-menu hr { border: 0; height: 1px; background: var(--pf-ln2); margin: 4px 2px; }
@media (hover: hover) and (pointer: fine) { .pf-menu > button:not([disabled]):hover, .pf-menu > a:hover, .pf-menu > form > button:not([disabled]):hover { background: var(--pf-sf2); } }
.pf-menu-wrap { position: relative; display: inline-flex; }
/* abierto, flota sobre todo (sistema.js): en la capa superior del navegador (popover) o, si no la hay,
   fijo a la ventana con un z-index por encima del botón del chat. Se coloca desde su botón y se voltea
   si no cabe abajo o a la derecha. Cerrado vuelve a su lugar en el marcado. */
.pf-menu.pf-flota { position: fixed; inset: auto; margin: 0; border: 0; height: auto; z-index: 10001; color: var(--pf-t1); max-width: calc(100vw - 16px); overflow: auto; overscroll-behavior: contain; }
/* en el celular el menú sale como hoja desde abajo, con fondo oscurecido y el nombre del elemento arriba */
.pf-menu.pf-menu-hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 85vh; max-height: 85dvh; padding: 4px 8px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; gap: 0; opacity: 1; transform: translateY(100%); transform-origin: bottom center; transition: transform var(--pf-d-slow) var(--pf-e-drawer), visibility 0s linear var(--pf-d-slow); }
.pf-menu.pf-menu-hoja.on { transform: none; transition: transform var(--pf-d-slow) var(--pf-e-drawer); }
.pf-menu.pf-menu-hoja::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 6px auto 4px; border-radius: 3px; background: var(--pf-inl); }
.pf-menu-hoja > button, .pf-menu-hoja > a, .pf-menu-hoja > form > button { min-height: 48px; height: auto; gap: 14px; padding: 0 12px; border-radius: 10px; font-size: 15.5px; white-space: normal; }
.pf-menu-hoja > button:active, .pf-menu-hoja > a:active, .pf-menu-hoja > form > button:active { background: var(--pf-sf2); }
.pf-menu-hoja hr { margin: 6px 4px; }
.pf-menu-cab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 12px; margin: 0 -8px 6px; border-bottom: 1px solid var(--pf-ln2); }
.pf-menu-cab .pf-tt b { font-size: 15px; }
.pf-velo { position: fixed; inset: 0; z-index: 10000; background: var(--pf-scrim); opacity: 0; transition: opacity 220ms ease; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pf-velo.on { opacity: 1; }
.pf-velo:not(.on) { pointer-events: none; } /* mientras se desvanece ya no ataja toques */

/* diálogo: centrado (no sale de un botón); con el teclado aparece sin animación */
.pf-modal { position: fixed; inset: 0; z-index: 10010; /* por encima de menús, velos y hojas sin capa superior (10000–10002) */ display: grid; place-items: center; padding: 16px; }
.pf-modal-scrim { position: absolute; inset: 0; background: var(--pf-scrim); opacity: 0; transition: opacity 200ms ease; }
.pf-modal-box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--pf-sf); color: var(--pf-t1); border-radius: 16px; box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); padding: 22px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: scale(.96); transition: opacity 200ms var(--pf-e-out), transform 200ms var(--pf-e-out); }
.pf-modal.on .pf-modal-scrim, .pf-modal.on .pf-modal-box { opacity: 1; transform: none; }
.pf-modal.instant .pf-modal-scrim, .pf-modal.instant .pf-modal-box { transition: none; }
.pf-modal-box h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.pf-modal-box p { margin: 0; color: var(--pf-t2); font-size: 14px; }
.pf-modal-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--pf-ln2); }

/* hoja (<dialog class="pf-hoja"> abierto con data-pf-hoja="id"): lateral derecha en computadora y iPad,
   desde abajo en el celular. Va en la capa superior (showModal): foco atrapado, Esc y fondo oscurecido.
   Puede vivir dentro de un <form>: sus campos siguen siendo del formulario. */
.pf-hoja { position: fixed; inset: auto; z-index: 10002; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; overflow: hidden; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); transition: transform var(--pf-d-slow) var(--pf-e-drawer); }
.pf-hoja:not([open]) { display: none; }
.pf-hoja[open] { display: flex; flex-direction: column; }
.pf-hoja::backdrop { background: rgba(13, 46, 32, .32); opacity: 0; transition: opacity 220ms ease; }
html[data-theme="dark"] .pf-hoja::backdrop { background: rgba(0, 0, 0, .5); }
.pf-hoja.on::backdrop { opacity: 1; }
@media (min-width: 768px) { .pf-hoja { top: 0; right: 0; bottom: 0; width: min(420px, 100%); height: 100%; border-radius: 16px 0 0 16px; transform: translateX(100%); } }
@media (max-width: 767px) {
  .pf-hoja { left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .pf-hoja::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--pf-inl); }
}
.pf-hoja.on { transform: none; }
.pf-hoja-cab { display: flex; align-items: center; gap: 10px; flex: none; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--pf-ln2); }
.pf-hoja-cab h3 { margin: 0; flex: 1; min-width: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.pf-hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.pf-hoja-pie { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pf-ln2); background: var(--pf-sf); }
.pf-hoja-pie > :last-child { flex: 1; }
@media (max-width: 767px) { html.pf-hoja-abierta { overflow: hidden; } } /* el fondo no se desplaza debajo de la hoja */
/* sin showModal (navegadores viejos): sistema.js pone .pf-hoja-suelta y un .pf-velo detrás */
.pf-hoja.pf-hoja-suelta[open] { z-index: 10002; }

/* botón de acción con solo ícono: 40 × 40 (44 en pantallas táctiles); aria-label obligatorio,
   su ayuda al pasar el mouse sale del title o del aria-label (sistema.js) */
.pf-btn.ico { width: 40px; height: 40px; padding: 0; flex: none; }
.pf-btn.ico.ghost { color: var(--pf-t2); }

/* filtros: barra con buscador, chips rápidos (cada uno con su menú) y «Todos los filtros» con su número */
.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pf-chip .c.num { background: var(--pf-cnt-bg); color: var(--pf-cnt-ink); border-radius: 6px; padding: 0 6px; line-height: 19px; }
.pf-chip > .fa-chevron-down { font-size: 10px; }
@media (max-width: 767px) {
  /* el buscador va solo y a lo ancho; los chips, en una fila que se desliza de lado hasta el borde de la hoja */
  .pf-sheet-bar > .pf-busca { flex: 1 1 100%; }
  .pf-chips.desliza { flex-wrap: nowrap; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .pf-chips.desliza::-webkit-scrollbar { display: none; }
  .pf-chips.desliza > * { flex: none; }
}
/* filtros activos: chips con × sobre la lista; quitar uno navega a la misma URL sin ese parámetro */
.pf-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--pf-ln2); font-size: 13px; color: var(--pf-t2); }
.pf-activos .pf-lnk { margin-left: auto; padding: 0; border: 0; background: none; font: 600 13px var(--pf-f-in); color: var(--pf-g-ink); text-decoration: none; cursor: pointer; }
.pf-chip-x { padding-right: 4px; cursor: default; }
/* un filtro activo con un valor largo (un nombre) se parte en dos líneas en vez de ensanchar la página (PF-556) */
.pf-activos .pf-chip { max-width: 100%; height: auto; min-height: 32px; padding-block: 4px; white-space: normal; text-align: left; }
.pf-chip-x > button { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pf-chip-x > button:hover { background: var(--pf-g-soft); background: color-mix(in srgb, var(--pf-g7) 18%, transparent); } }

/* botón flotante del chat de soporte (chatbot_widget.html: fijo abajo a la derecha, z-index 9999).
   Regla general (sistema.js pone html.pf-con-chat si la página tiene el botón):
   1. Lo que vive pegado abajo le reserva su lugar a la derecha: las barras pegajosas de acciones
      (.pf-sheet-foot.sticky, la de «Guardar» de los formularios), cualquier barra fija o pegajosa con
      .pf-libre-flotante y el cuadro para escribir de Mensajería (.chat-compose). Así «Guardar» y «Enviar»
      nunca quedan debajo, sin esconder el chat ni tocar cada página.
   2. Lo que está en el flujo de la página pasa por debajo al desplazarse; al final del desplazamiento lo
      cubre el pb-16 con que termina toda página migrada (64 px + el padding de main ≥ 16 + 56 / 24 + 64 px).
      No se agrega padding a main: rompería las pantallas de alto fijo (la conversación de Mensajería).
   Además, con un menú, una hoja o un diálogo del sistema abiertos (html.pf-capa) el botón se esconde.
   Medidas: escritorio 24 + 64 px y aire; hasta 768 px, 16 + 56 px (el mismo corte que el widget). */
:root { --pf-flotante-ancho: 104px; }
@media (max-width: 768px) { :root { --pf-flotante-ancho: 84px; } }
html.pf-capa #chatbot-button, html.pf-capa .chatbot-button { opacity: 0 !important; visibility: hidden; pointer-events: none; }
html.pf-con-chat[data-sistema] :is(.pf-sheet-foot.sticky, .pf-libre-flotante, .chat-compose) { padding-right: var(--pf-flotante-ancho); }
/* en el celular el cuadro para escribir de Mensajería (≈ 79 px) es más bajo que el lugar del botón (16 + 56 px): el botón
   baja hasta quedar alineado con el borde de abajo del cuadro y no tapa el final del hilo de mensajes */
@media (max-width: 768px) { html.pf-con-chat[data-sistema]:has(.chat-compose) #chatbot-widget { bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } }

/* panel sin huecos: gráfico a lo ancho arriba y, debajo, columnas parejas (.pf-cols) de hojas que
   estiran su cuerpo (.pf-alto + .pf-alto-c) para que los pies queden a la misma altura */
.pf-graf { position: relative; height: clamp(200px, 26vw, 300px); min-width: 0; }
.pf-graf > canvas { max-width: 100%; } /* sin datos, Chart.js no lo dimensiona y el lienzo queda en 300 px: no se sale de su columna */
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
/* dos columnas desde 1024: en un iPad vertical (con el menú) quedaban angostas y disparejas (PF-547) */
@media (min-width: 1024px) { .pf-cols { grid-template-columns: repeat(var(--pf-cols, 2), minmax(0, 1fr)); } }
.pf-sheet.pf-alto { display: flex; flex-direction: column; }
.pf-alto > .pf-alto-c { flex: 1 1 auto; min-height: 0; }
.pf-rows.corta > :nth-child(n+7) { display: none; } /* listas cortas: unas 6 filas y «Ver todos» */
.pf-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pf-t2); }
.pf-leyenda::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--pf-b7)); }
.pf-barras { display: flex; flex-direction: column; }
.pf-barras > div { padding: 13px 16px; border-top: 1px solid var(--pf-ln2); min-width: 0; }
.pf-barras > div:first-child { border-top: 0; }
.pf-barra { display: block; position: relative; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--pf-ln2); overflow: hidden; }
.pf-barra > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--pf-b7); }
/* barra con el color elegido por la persona (lista de una votación…): data-color en la barra */
.pf-barra[data-color] > i, .pf-prog[data-color] > i { background: var(--pf-dato, var(--pf-b7)); }
.pf-barra > i > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--pf-g-ink); }
/* en línea: nombre · barra · cifras en una fila de ~40 px (para que una lista de barras empareje con otra de 6 filas) */
.pf-barras.linea > div { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; }
.pf-barras.linea .pf-barra { margin-top: 0; }

/* franja de estado (Errores y disponibilidad, 19-oct-2026): una celda por hora, día o semana con el tono de su estado,
   como las páginas de estado de un servicio. data-tono: ok · warn · crit · vacio (sin peticiones registradas) */
.pf-franja { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 36px; }
.pf-franja.densa { gap: 1px; }
.pf-franja > i { min-width: 0; border-radius: 3px; background: var(--pf-ok); }
.pf-franja.densa > i { border-radius: 1px; }
.pf-franja > i[data-tono="warn"] { background: var(--pf-y); }
.pf-franja > i[data-tono="crit"] { background: var(--pf-crit); }
.pf-franja > i[data-tono="vacio"] { background: var(--pf-ln); }
.pf-franja-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pf-t3); }
.pf-leyenda[data-tono="ok"] { --c: var(--pf-ok); } .pf-leyenda[data-tono="warn"] { --c: var(--pf-y); }
.pf-leyenda[data-tono="crit"] { --c: var(--pf-crit); } .pf-leyenda[data-tono="vacio"] { --c: var(--pf-ln); }
/* mapa de calor día × hora: --v (0–1) es la intensidad; la celda en 0 queda en la línea suave */
.pf-calor { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: 11px; color: var(--pf-t3); font-variant-numeric: tabular-nums; }
/* la hora (cada 3) puede ser más ancha que su celda en el celular: se sale hacia la derecha, donde las vecinas van sin texto */
.pf-calor > span { min-width: 0; overflow: visible; white-space: nowrap; }
.pf-calor > i { height: clamp(14px, 2.2vw, 24px); min-width: 0; border-radius: 3px; background: var(--pf-ln2); }
.pf-calor > i.n { background: var(--pf-crit); opacity: calc(.2 + var(--v, 0) * .8); }

/* avisos flotantes: se apilan, se pausan con el mouse y se descartan arrastrándolos hacia abajo */
.pf-toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10020; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100% - 28px); }
.pf-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; background: var(--pf-toast-bg); color: var(--pf-toast-t); font: 13px/1.35 var(--pf-f-in); padding: 10px 14px; border-radius: 10px; box-shadow: var(--pf-sh3); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); max-width: 100%; touch-action: none; cursor: grab; }
.pf-toast.on { opacity: 1; transform: none; }
.pf-toast.off { opacity: 0; transform: translateY(14px); transition-duration: 180ms; }
.pf-toast.dragging { transition: none; cursor: grabbing; }
.pf-toast > svg { color: var(--pf-toast-ac); flex: none; }
.pf-toast.bad > svg { color: var(--pf-toast-bad); }
.pf-toast-act { margin: 0 0 0 6px; padding: 0; border: 0; background: none; font: 700 13px var(--pf-f-in); color: var(--pf-toast-ac); cursor: pointer; }
.pf-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pf-toast-ac); opacity: .55; transform-origin: left; }
.pf-toast.run .pf-toast-bar { animation: pf-tbar var(--ms, 3200ms) linear forwards; }
.pf-toast.paused .pf-toast-bar { animation-play-state: paused; }
@keyframes pf-tbar { to { transform: scaleX(0); } }
/* las pastillas de hoy (showToast) toman el mismo aspecto en las páginas migradas */
html[data-sistema="migrada"] .lms-pill { background: var(--pf-g9) !important; color: #EAF3EC; border-radius: 10px; }
html[data-theme="dark"] .lms-pill { background: #E4EBE6 !important; color: #0E1411 !important; }
html[data-sistema="migrada"] .lms-pill[data-tipo="success"] > i:first-child { color: var(--pf-mint); }
html[data-sistema="migrada"] .lms-pill[data-tipo="error"] > i:first-child, html[data-sistema="migrada"] .lms-pill[data-tipo="danger"] > i:first-child { color: #FFB4A8; }
html[data-sistema="migrada"] .lms-pill[data-tipo="warning"] > i:first-child { color: var(--pf-y); }
html[data-sistema="migrada"] .lms-pill[data-tipo="info"] > i:first-child, html[data-sistema="migrada"] .lms-pill[data-tipo="message"] > i:first-child { color: var(--pf-b); }
html[data-theme="dark"] .lms-pill[data-tipo="success"] > i:first-child { color: #1A8049; }
html[data-theme="dark"] .lms-pill[data-tipo="error"] > i:first-child, html[data-theme="dark"] .lms-pill[data-tipo="danger"] > i:first-child { color: #B42318; }
html[data-theme="dark"] .lms-pill[data-tipo="warning"] > i:first-child { color: #7A5600; }
html[data-theme="dark"] .lms-pill[data-tipo="info"] > i:first-child, html[data-theme="dark"] .lms-pill[data-tipo="message"] > i:first-child { color: #1E4D7B; }
.lms-pill .lms-pill-act { margin-left: 4px; padding: 0 4px; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ayuda al pasar el mouse: 450 ms la primera vez; inmediata si ya había una abierta */
.pf-tip { position: fixed; z-index: 10030; left: 0; top: 0; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--pf-t1); color: var(--pf-sf); font: 12px/1.35 var(--pf-f-in); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 3px)) scale(.97); transform-origin: 50% 100%; transition: opacity 125ms var(--pf-e-out), transform 125ms var(--pf-e-out); }
.pf-tip.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.pf-tip.instant { transition-duration: 0ms; }

/* vacío, carga, error y conexión */
.pf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--pf-t3); }
.pf-empty-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pf-sf2); color: var(--pf-t3); }
.pf-empty.err .pf-empty-ic { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pf-empty b { color: var(--pf-t1); font-size: 15px; font-weight: 600; }
.pf-empty p { margin: 0; max-width: 36ch; font-size: 13.5px; }
/* Visor de archivos (recursos de tareas): el archivo ocupa la pantalla disponible y en celular casi toda (regla 14) */
.pf-visor-hoja { overflow: hidden; }
.pf-visor { display: block; width: 100%; border: 0; background: var(--pf-sf2); height: calc(100vh - 300px); height: calc(100dvh - 300px); min-height: 420px; }
.pf-visor-pie { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--pf-ln2); }
.pf-visor-pie a { color: inherit; text-decoration: underline; }
.pf-visor-media { display: flex; justify-content: center; align-items: center; padding: 16px; background: var(--pf-sf2); min-height: 200px; }
.pf-visor-media > img, .pf-visor-media > video { display: block; max-width: 100%; max-height: calc(100vh - 320px); max-height: calc(100dvh - 320px); height: auto; border-radius: var(--pf-r); }
.pf-visor-media > audio { width: min(100%, 640px); }
@media (max-width: 767px) {
  .pf-visor { height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 360px; }
  .pf-visor-media > img, .pf-visor-media > video { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); }
}
.pf-skel { display: block; position: relative; overflow: hidden; background: var(--pf-sf2); border-radius: 6px; }
.pf-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pf-sf) 70%, transparent), transparent); animation: pf-shimmer 1.2s ease-in-out infinite; }
@keyframes pf-shimmer { to { transform: translateX(100%); } }
.pf-netbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: var(--pf-warn-bg); color: var(--pf-warn); font-size: 13px; box-shadow: var(--pf-sh1); }
.pf-netbar.back { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--pf-ln); background: var(--pf-sf); }
.pf-file.bad { box-shadow: inset 0 0 0 1.5px var(--pf-crit); background: var(--pf-crit-bg); }
/* el <input type="file"> de Django en una página migrada: no se sale de su caja (medía 377 px y desbordaba en celular)
   y su botón se ve como un botón del sistema (PF-555) */
html[data-sistema="migrada"] input[type="file"] { max-width: 100%; min-width: 0; font: 13px var(--pf-f-in); color: var(--pf-t2); }
html[data-sistema="migrada"] input[type="file"]::file-selector-button { margin-right: 10px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--pf-r-sm); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); color: var(--pf-t1); font: 600 13px var(--pf-f-in); cursor: pointer; }
.pf-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 16px; border-radius: 12px; border: 1.5px dashed var(--pf-inl); background: var(--pf-sf2); color: var(--pf-t2); text-align: center; cursor: pointer; transition: border-color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.pf-drop.drag { border-color: var(--pf-g7); background: var(--pf-g-soft); transform: scale(1.01); }
@media (hover: hover) and (pointer: fine) { .pf-drop:hover { border-color: var(--pf-g7); background: var(--pf-g-soft); } }

/* reacciones: cifra que cambia, destello, entrada, error, confirmación */
.pf-bump { animation: pf-bump 700ms var(--pf-e-out); }
@keyframes pf-bump { 0%, 35% { color: var(--pf-g-ink); } }
.pf-bump.down { animation-name: pf-bumpd; }
@keyframes pf-bumpd { 0%, 35% { color: var(--pf-warn); } }
.pf-flash { animation: pf-flash 1200ms ease-out; }
@keyframes pf-flash { 0%, 25% { background-color: var(--pf-g-soft); } }
.pf-flash-ring { animation: pf-flashring 900ms ease-out; }
@keyframes pf-flashring { 0%, 30% { box-shadow: 0 0 0 3px var(--pf-g-soft), var(--pf-sh1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-g7) 35%, transparent), var(--pf-sh1); } }
.pf-rise { animation: pf-rise 280ms var(--pf-e-out) both; }
@keyframes pf-rise { from { opacity: 0; transform: translateY(6px); } }
/* escalonado: solo para algo que se abre de vez en cuando (un panel), nunca para listas al cargar la página */
.pf-stg > * { animation: pf-rise 280ms var(--pf-e-out) both; animation-delay: calc(min(var(--i, 0), 6) * 30ms); }
.pf-shake { animation: pf-shake 360ms var(--pf-e-out); }
@keyframes pf-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* rebote: solo momentos raros (algo completado), no en la interfaz de todos los días */
.pf-pop { animation: pf-pop 260ms var(--pf-e-out); }
@keyframes pf-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* ---------- alias: las clases de hoy toman el aspecto del sistema solo en páginas migradas ---------- */
html[data-sistema="migrada"] .btn-modern { border-radius: 9px; font-weight: 600; box-shadow: none; transform: none; }
html[data-sistema="migrada"] .btn-modern:active { transform: scale(.97); }
html[data-sistema="migrada"] .btn-primary, html[data-sistema="migrada"] .btn-success { background: var(--pf-g7); color: var(--pf-on-g); }
html[data-sistema="migrada"] .btn-secondary, html[data-sistema="migrada"] .btn-ghost { background: var(--pf-sf); color: var(--pf-t1); border: 0; box-shadow: inset 0 0 0 1px var(--pf-inl); }
html[data-sistema="migrada"] .btn-danger { background: var(--pf-crit); color: #fff; }
html[data-sistema="migrada"] .btn-danger-soft { background: var(--pf-crit-bg); color: var(--pf-crit); }
html[data-sistema="migrada"] .btn-warning { background: var(--pf-y); color: var(--pf-y-on); }
html[data-sistema="migrada"] .content-card { background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh1); }
html[data-sistema="migrada"] .content-card::before, html[data-sistema="migrada"] .stat-card::before { display: none; }
html[data-sistema="migrada"] .stat-card { background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: 12px; box-shadow: var(--pf-sh1); }
html[data-sistema="migrada"] .form-input, html[data-sistema="migrada"] .form-textarea, html[data-sistema="migrada"] .form-select { background: var(--pf-sf); color: var(--pf-t1); border-color: var(--pf-inl); }
/* un campo de Django (.form-input, rounded-xl, focus:ring…) dentro de la pieza .pf-inp no se pinta: el contorno lo pone la pieza.
   Sin esto, el fondo del campo tapaba la sombra interna y solo se veían las puntas redondeadas (PF-547, buscador de Errores). */
html[data-sistema="migrada"] .pf-inp :is(input, select), html[data-sistema="migrada"] .pf-inp :is(input, select):focus { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; outline: none; }
html[data-sistema="migrada"] .stats-card { background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: 12px; box-shadow: var(--pf-sh1); }
html[data-sistema="migrada"] .content-card-header { border-color: var(--pf-ln2); }
html[data-sistema="migrada"] .form-label { color: var(--pf-t2); }
html[data-sistema="migrada"] .form-help { color: var(--pf-t3); }
/* modales de hoy: solo colores; la mecánica .modal-overlay.active (display) no se toca */
html[data-sistema="migrada"] .modal-overlay { background: var(--pf-scrim); }
html[data-sistema="migrada"] .modal-content { background: var(--pf-sf); color: var(--pf-t1); border-color: var(--pf-ln); box-shadow: var(--pf-sh3); }
html[data-sistema="migrada"] .modal-header { background: var(--pf-sf); border-bottom-color: var(--pf-ln2); }
html[data-sistema="migrada"] .modal-footer { background: var(--pf-sf2); border-top-color: var(--pf-ln2); }

/* ---------- el menú lateral, la campana y el menú de la cuenta: solo sus colores en oscuro ---------- */
html[data-theme="dark"] body { --page-bg: var(--pf-pg); }
/* el título de la cabecera usa el azul de marca: en oscuro pasa al color del texto */
html[data-theme="dark"] .text-brand-primary, html[data-theme="dark"] .text-brand-dark { color: var(--pf-t1); }
html[data-theme="dark"] .mn .is-active, html[data-theme="dark"] .mn .is-active:hover { color: var(--pf-t1); }
html[data-theme="dark"] .pfn {
  --pfn-ink: var(--pf-t1); --pfn-muted: var(--pf-t3); --pfn-line: var(--pf-ln); --pfn-soft: var(--pf-sf2);
  --pfn-press: var(--pf-sf3); --pfn-chip: var(--pf-g-soft); --pfn-chip-ink: var(--pf-g-soft-ink); --pfn-brand: #1F8A50;
}
html[data-theme="dark"] .pfn-panel { background: var(--pf-sf); }
html[data-theme="dark"] .pfn-bell .pfn-dot, html[data-theme="dark"] .pfn-badge { box-shadow: 0 0 0 2px var(--pf-pg); }
/* la cifra de la campana con el amarillo del colegio: legible en claro y oscuro (antes blanco sobre verde, 4,4:1 en oscuro) */
html[data-sistema="migrada"] .pfn-badge { background: var(--pf-cnt-bg); color: var(--pf-cnt-ink); }
html[data-theme="dark"] .pfn-bell, html[data-theme="dark"] .pfu-row > .pfn-ic, html[data-theme="dark"] .pfu-tema-top > .pfn-ic { color: var(--pf-t2); }
html[data-theme="dark"] .pfn-row > .pfn-go, html[data-theme="dark"] .pfu-trigger .pfu-chev, html[data-theme="dark"] .pfu-dev > summary .pfu-go { color: var(--pf-t4); }
html[data-theme="dark"] .pfn-panel::before { background: var(--pf-inl); }
html[data-theme="dark"] .pfu-prow[aria-current="true"] { color: var(--pf-t1); }
html[data-theme="dark"] .pfu-radio { border-color: var(--pf-t4); }
html[data-theme="dark"] .pfu-segs button[aria-checked="true"] { background: var(--pf-inl); box-shadow: none; }
html[data-theme="dark"] .pfu-row.is-danger, html[data-theme="dark"] .pfu-row.is-danger > .pfn-ic { color: var(--pf-crit); }

/* ---------- lo que va dentro de un iframe (correos, vistas previas) siempre en claro ---------- */
html[data-theme="dark"] iframe { color-scheme: light; }

/* ---------- editores, calendarios, selectores y gráficos en oscuro ---------- */
html[data-theme="dark"] .toastui-editor-defaultUI { border-color: var(--pf-inl); }
/* Toast UI dibuja sus íconos con una tira de imágenes pensada para botones de 32 px: la regla táctil de base.html
   («button { min-height: 44px }» en celular) los agrandaba y se veían pedazos de los íconos vecinos (PF-548 C3). */
.toastui-editor-toolbar-icons { min-width: 0; min-height: 0; }
/* SimpleMDE (recordatorios): barra, área de texto y vista previa con los colores del sistema */
html[data-sistema="migrada"] .editor-toolbar { border-color: var(--pf-inl); border-radius: var(--pf-r) var(--pf-r) 0 0; opacity: 1; }
html[data-sistema="migrada"] .editor-toolbar a { color: var(--pf-t2) !important; }
html[data-sistema="migrada"] .editor-toolbar a:hover, html[data-sistema="migrada"] .editor-toolbar a.active { background: var(--pf-sf3); border-color: var(--pf-inl); }
html[data-sistema="migrada"] .editor-toolbar i.separator { border-left-color: var(--pf-inl); border-right-color: transparent; }
html[data-sistema="migrada"] .CodeMirror { border-color: var(--pf-inl); border-radius: 0 0 var(--pf-r) var(--pf-r); background: var(--pf-sf); color: var(--pf-t1); }
html[data-sistema="migrada"] .CodeMirror-cursor { border-left-color: var(--pf-t1); }
html[data-sistema="migrada"] .CodeMirror-selected, html[data-sistema="migrada"] .CodeMirror-focused .CodeMirror-selected { background: var(--pf-g-soft); }
html[data-sistema="migrada"] .editor-preview, html[data-sistema="migrada"] .editor-preview-side { background: var(--pf-sf2); color: var(--pf-t1); border-color: var(--pf-inl); }
html[data-sistema="migrada"] .editor-statusbar { color: var(--pf-t3); }
html[data-theme="dark"] .editor-toolbar.fullscreen, html[data-theme="dark"] .CodeMirror-fullscreen { background: var(--pf-sf); }
html[data-theme="dark"] .flatpickr-calendar { background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); }
html[data-theme="dark"] .flatpickr-calendar .flatpickr-months, html[data-theme="dark"] .flatpickr-calendar .flatpickr-month,
html[data-theme="dark"] .flatpickr-calendar .flatpickr-weekdays, html[data-theme="dark"] .flatpickr-calendar span.flatpickr-weekday { background: var(--pf-sf); color: var(--pf-t2); fill: var(--pf-t2); }
html[data-theme="dark"] .flatpickr-day { color: var(--pf-t1); }
html[data-theme="dark"] .flatpickr-day:hover, html[data-theme="dark"] .flatpickr-day:focus { background: var(--pf-sf3); border-color: var(--pf-sf3); }
html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay, html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--pf-t4); }
html[data-theme="dark"] .flatpickr-day.selected { background: var(--pf-g7); border-color: var(--pf-g7); color: #fff; }
/* el día elegido y el de hoy con el verde del sistema también en claro (antes, el azul de flatpickr) */
html[data-sistema="migrada"] .flatpickr-day:is(.selected, .startRange, .endRange), html[data-sistema="migrada"] .flatpickr-day:is(.selected, .startRange, .endRange):hover { background: var(--pf-g7); border-color: var(--pf-g7); color: #fff; }
html[data-sistema="migrada"] .flatpickr-day.today:not(.selected) { border-color: var(--pf-g7); }
html[data-sistema="migrada"] .flatpickr-day.inRange { background: var(--pf-g-soft); border-color: var(--pf-g-soft); box-shadow: -5px 0 0 var(--pf-g-soft), 5px 0 0 var(--pf-g-soft); }
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown { background: var(--pf-sf); border-color: var(--pf-inl); color: var(--pf-t1); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--pf-t1); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pf-g7); }
html[data-theme="dark"] .select2-search__field { background: var(--pf-sf2); color: var(--pf-t1); }

/* ---------- cambio de tema: un círculo crece desde el botón tocado ---------- */
html.pf-vt-tema::view-transition-old(root), html.pf-vt-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.pf-vt-tema::view-transition-new(root) { animation: pf-vt-circulo 420ms var(--pf-e-out); }
@keyframes pf-vt-circulo { from { clip-path: circle(0 at var(--pf-vx, 50%) var(--pf-vy, 0)); } to { clip-path: circle(150vmax at var(--pf-vx, 50%) var(--pf-vy, 0)); } }

/* ---------- al tocar: sin el recuadro gris del navegador (la pieza ya responde) ---------- */
:is(.pf-btn, .pf-chip, .pf-segs button, .pf-tab, .pf-mk, .pf-row, .pf-drop, .pf-tg, .pf-tbl th > button, .pf-menu > button, .pf-menu > a, .pf-menu > form > button) { -webkit-tap-highlight-color: transparent; }

/* ---------- pantallas táctiles (celular y iPad): zonas cómodas y campos de 16 px para que iOS no acerque la página ---------- */
@media (pointer: coarse) {
  .pf-btn { min-height: 42px; } .pf-btn.sm { min-height: 40px; }
  .pf-btn.ic { min-width: 42px; } .pf-btn.sm.ic { min-width: 40px; }
  .pf-chip { height: 40px; } .pf-segs button { height: 40px; }
  .pf-menu > button, .pf-menu > a, .pf-menu > form > button { height: 44px; }
  .pf-menu-hoja > button, .pf-menu-hoja > a, .pf-menu-hoja > form > button { height: auto; }
  .pf-btn.ico { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .pf-inp input, .pf-inp select, .pf-textarea, html[data-sistema="migrada"] :is(input, select, textarea) { font-size: 16px; }
}

/* ---------- reducir movimiento: sin desplazamientos ni escalas; los fundidos y colores se quedan (suaves, no apagados) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pf-menu, .pf-hoja, .pf-modal-box, .pf-toast:not(.dragging), .pf-btn:active, .pf-chip:active, button.pf-mk:active, a.pf-mk:active, .pf-drop.drag { transform: none !important; }
  .pf-tip, .pf-tip.on { transform: translate(-50%, -100%) !important; }
  .pf-tab-ind, .pf-prog > i, .pf-tg-sw::after { transition: none !important; }
  .pf-rise, .pf-stg > * { animation-name: pf-fade !important; }
  .pf-shake, .pf-pop, .pf-skel::after { animation: none !important; }
  /* la barra de mantener presionado y el indicador de carga son información, no adorno: se conservan */
}
@keyframes pf-fade { from { opacity: 0; } }

/* ---------- imprimir: siempre en claro ---------- */
@media print {
  html[data-theme="dark"] { color-scheme: light; }
  html[data-theme="dark"] body { background: #fff !important; color: #000 !important; }
  .pf-toasts, .pf-tip, .pf-modal, .pf-velo, .pf-hoja { display: none !important; }
}

/* ---------- PF-547 · marco: chatbot, consentimientos y reportar un problema, en oscuro ----------
   Solo colores (fondos, textos, bordes, sombras, barras de desplazamiento). Nada de display, visibility,
   position ni z-index: lo que oculta o muestra cada pieza ([hidden], .hidden, .show) queda como está.
   Los rellenos con texto blanco usan #1A8049 → #156B3D (el verde de acción del modo claro, 5:1 con blanco):
   --pf-g7 en oscuro (#1F8A50) da 4.4:1. Los textos y acentos usan --pf-g-ink. */

/* chatbot flotante: sus variables apuntan a los tokens; los rellenos con texto blanco van aparte */
html[data-theme="dark"] {
  --chatbot-primary: var(--pf-g-ink); --chatbot-primary-dark: #156B3D;
  --chatbot-bg: var(--pf-pg); --chatbot-surface: var(--pf-sf);
  --chatbot-text: var(--pf-t1); --chatbot-text-muted: var(--pf-t3);
  --chatbot-border: var(--pf-ln); --chatbot-shadow: var(--pf-sh3);
  --chatbot-danger: #B42318;
}
html[data-theme="dark"] .chatbot-button, html[data-theme="dark"] .message.user .message-content,
html[data-theme="dark"] .btn-send, html[data-theme="dark"] .privacy-actions .btn-primary { background: linear-gradient(135deg, #1A8049 0%, #156B3D 100%); }
html[data-theme="dark"] .chatbot-header { background: linear-gradient(135deg, var(--pf-g8) 0%, var(--pf-g9) 100%); box-shadow: 0 1px 0 var(--pf-ln), 0 4px 12px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .chatbot-modal { box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); }
/* el resplandor del botón era índigo (lo pinta una animación: se repite con el verde) */
html[data-theme="dark"] .chatbot-button { box-shadow: 0 8px 24px rgba(26, 128, 73, .4); animation-name: pf-chatbot-pulso; }
html[data-theme="dark"] .chatbot-button:hover { box-shadow: 0 12px 32px rgba(26, 128, 73, .5); }
@keyframes pf-chatbot-pulso {
  0%, 100% { box-shadow: 0 8px 24px rgba(26, 128, 73, .4); }
  50% { box-shadow: 0 8px 24px rgba(26, 128, 73, .6), 0 0 0 8px rgba(111, 211, 155, .12); }
}
html[data-theme="dark"] .chatbot-badge { border-color: var(--pf-pg); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .welcome-message { background: var(--pf-sf); border-color: var(--pf-ln); }
html[data-theme="dark"] .privacy-content { background: var(--pf-sf); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--pf-ln); }
html[data-theme="dark"] .welcome-icon, html[data-theme="dark"] .privacy-icon { background: var(--pf-g-soft); }
html[data-theme="dark"] .feature-item { background: var(--pf-sf2); }
html[data-theme="dark"] .message.assistant .message-content { background: var(--pf-sf); border-color: var(--pf-ln); box-shadow: none; }
html[data-theme="dark"] .message.user .message-content { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .message.user .message-content a { color: #fff; }
html[data-theme="dark"] .message-content code, html[data-theme="dark"] .message-content pre { background: var(--pf-sf3); }
html[data-theme="dark"] .message-content pre code { background: none; }
html[data-theme="dark"] .chatbot-footer { background: var(--pf-sf); border-top-color: var(--pf-ln); }
html[data-theme="dark"] .chatbot-footer .chatbot-input { background: var(--pf-sf2); color: var(--pf-t1); border-color: var(--pf-inl); }
html[data-theme="dark"] .chatbot-footer .chatbot-input:focus { border-color: var(--pf-g7); box-shadow: 0 0 0 3px var(--pf-g-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-g7) 24%, transparent); }
html[data-theme="dark"] .chatbot-input::placeholder { color: var(--pf-t3); }
html[data-theme="dark"] .btn-send:hover { box-shadow: 0 4px 12px rgba(26, 128, 73, .45); }
html[data-theme="dark"] .privacy-actions .btn-primary { box-shadow: 0 4px 12px rgba(26, 128, 73, .35); }
html[data-theme="dark"] .privacy-actions .btn-primary:hover { box-shadow: 0 6px 16px rgba(26, 128, 73, .5); }
html[data-theme="dark"] .privacy-actions .btn-outline-secondary { color: var(--pf-t2); border-color: var(--pf-inl); }
html[data-theme="dark"] .privacy-actions .btn-outline-secondary:hover { background: var(--pf-sf2); border-color: var(--pf-inl-h); }
html[data-theme="dark"] .chatbot-body::-webkit-scrollbar-thumb, html[data-theme="dark"] .privacy-scroll::-webkit-scrollbar-thumb { background: var(--pf-inl); }
html[data-theme="dark"] .chatbot-body::-webkit-scrollbar-thumb:hover { background: var(--pf-inl-h); }
/* aviso «Atención personal»: la plantilla le pone estilos en línea, por eso !important */
html[data-theme="dark"] .human-takeover-notice .message-content { background: var(--pf-y-soft) !important; border-color: var(--pf-y) !important; color: var(--pf-y-ink) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .4) !important; }

/* ventana de consentimientos y aviso: sus variables --pfc-* apuntan a los tokens (texto y acentos con el verde claro) */
html[data-theme="dark"] .pfc {
  --pfc-brand: var(--pf-g-ink); --pfc-brand-dark: #156B3D; --pfc-ink: var(--pf-t1); --pfc-body: var(--pf-t2);
  --pfc-muted: var(--pf-t3); --pfc-line: var(--pf-ln); --pfc-soft: var(--pf-sf2); --pfc-press: var(--pf-sf3);
  --pfc-chip: var(--pf-g-soft); --pfc-chip-ink: var(--pf-g-soft-ink);
}
html[data-theme="dark"] .pfc-scrim { background: var(--pf-scrim); }
html[data-theme="dark"] .pfc-sheet { background: var(--pf-sf); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); }
html[data-theme="dark"] .pfc-foot { background: var(--pf-sf); }
html[data-theme="dark"] .pfc-aviso { background: var(--pf-sf); box-shadow: var(--pf-sh2); }
html[data-theme="dark"] .pfc-box { border-color: var(--pf-t3); background: var(--pf-sf); }
html[data-theme="dark"] .pfc-ck.is-on .pfc-box { background: #1A8049; border-color: #1A8049; }
html[data-theme="dark"] .pfc-btn-pri { background: #1A8049 !important; }
html[data-theme="dark"] .pfc-btn-pri[disabled] { background: var(--pf-sf3) !important; color: var(--pf-t3) !important; }
html[data-theme="dark"] .pfc-btn-sec { background: var(--pf-sf) !important; box-shadow: inset 0 0 0 1px var(--pf-inl); }
html[data-theme="dark"] .pfc-note.is-error { color: var(--pf-crit); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .pfc-btn-sec:hover { background: var(--pf-sf2) !important; }
  html[data-theme="dark"] .pfc-ck.is-on:hover { background: var(--pf-g-soft) !important; background: color-mix(in srgb, var(--pf-g-soft) 82%, var(--pf-g-soft-ink)) !important; }
}

/* reportar un problema: lo que las paletas de Tailwind no resuelven (cortina, sombra, campos, textos pequeños y de estado) */
html[data-theme="dark"] #modal-reportar-problema .bg-gray-900.bg-opacity-50 { background-color: var(--pf-scrim); }
html[data-theme="dark"] #modal-reportar-problema .bg-white.rounded-2xl { box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); }
html[data-theme="dark"] #modal-reportar-problema textarea { background-color: var(--pf-sf2); color: var(--pf-t1); border-color: var(--pf-inl); }
html[data-theme="dark"] #modal-reportar-problema textarea:focus { border-color: var(--pf-g7); }
html[data-theme="dark"] #modal-reportar-problema textarea::placeholder { color: var(--pf-t3); }
html[data-theme="dark"] #modal-reportar-problema button[aria-label="Cerrar"]:not(:hover) { color: var(--pf-t3); }
html[data-theme="dark"] #modal-reportar-problema #reporte-problema-error { color: var(--pf-crit); }
html[data-theme="dark"] #modal-reportar-problema #reporte-problema-listo .bg-green-100 { background-color: var(--pf-ok-bg); }
html[data-theme="dark"] #modal-reportar-problema #reporte-problema-listo .text-green-600 { color: var(--pf-ok); }
html[data-theme="dark"] #modal-reportar-problema #reporte-problema-listo a:not(:hover) { color: var(--pf-g-ink); }
/* ---------- fin PF-547 ---------- */

/* ---------- Pieza · texto enriquecido (Markdown, contenido de usuarios o IA) ----------
   .pf-prosa en el contenedor; el tamaño y color del cuerpo los pone la página (text-pf-*). Antes cada
   página repetía ~90 variantes [&_h1]:… a mano (PF-547, «todo centralizado»). */
.pf-prosa > :first-child { margin-top: 0; }
.pf-prosa :is(h1, h2, h3, h4) { color: var(--pf-t1); }
.pf-prosa h1 { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--pf-ln); font-size: var(--pf-fs-4xl); font-weight: 700; line-height: 1.25; }
.pf-prosa h2 { margin: 28px 0 12px; font-size: var(--pf-fs-2xl); font-weight: 700; line-height: 1.375; }
.pf-prosa h3 { margin: 24px 0 8px; font-size: var(--pf-fs-xl); font-weight: 600; }
.pf-prosa h4 { margin: 20px 0 8px; font-size: var(--pf-fs-lg); font-weight: 600; }
.pf-prosa p { margin: 0 0 16px; }
.pf-prosa :is(ul, ol) { margin: 0 0 16px; padding-left: 24px; }
.pf-prosa ul { list-style: disc; }
.pf-prosa ol { list-style: decimal; }
.pf-prosa li { margin-bottom: 6px; padding-left: 4px; }
.pf-prosa strong { font-weight: 600; color: var(--pf-t1); }
.pf-prosa a { font-weight: 500; color: var(--pf-g-ink); text-decoration: underline; text-underline-offset: 2px; }
.pf-prosa blockquote { margin: 16px 0; padding: 10px 16px; border-left: 4px solid var(--pf-g7); border-radius: 0 var(--pf-r) var(--pf-r) 0; background: var(--pf-sf2); }
.pf-prosa code { padding: 2px 6px; border-radius: 4px; background: var(--pf-sf2); color: var(--pf-t1); font-family: var(--pf-f-mn); font-size: .9em; }
.pf-prosa pre { margin: 20px 0; padding: 16px; overflow-x: auto; border-radius: var(--pf-r); background: var(--pf-g9); color: var(--pf-hero-t); font-size: var(--pf-fs-md); }
.pf-prosa pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.pf-prosa hr { margin: 32px 0; border: 0; border-top: 1px solid var(--pf-ln); }
.pf-prosa img { display: block; max-width: 100%; height: auto; margin: 20px 0; border-radius: 12px; }
.pf-prosa table { display: block; width: 100%; margin: 20px 0; overflow-x: auto; border-collapse: collapse; font-size: var(--pf-fs-base); }
.pf-prosa th { padding: 8px 12px; border-bottom: 1px solid var(--pf-ln); background: var(--pf-sf2); color: var(--pf-t1); font-weight: 600; text-align: left; }
.pf-prosa td { padding: 8px 12px; border-bottom: 1px solid var(--pf-ln2); }

/* ---------- Piezas · lo que dibuja Django dentro de las piezas ----------
   Antes las páginas lo arreglaban con variantes [&_ul]:…, [&_label]:… o [&_.select2-…]:… (PF-547, «todo centralizado»). */
html[data-sistema="migrada"] ul.errorlist { margin: 0; padding: 0; list-style: none; }
html[data-sistema="migrada"] ul.errorlist ul { padding-left: 12px; }
/* .pf-checks: las casillas de un CheckboxSelectMultiple */
.pf-checks ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* desde Django 5, CheckboxSelectMultiple dibuja <div><div><label>… en vez de <ul><li> (PF-552) */
.pf-checks div:has(> div > label > input[type="checkbox"]) { display: flex; flex-direction: column; gap: 8px; }
/* .pf-field.pf-select2: un select2 con la forma de los campos del sistema */
.pf-select2 .select2-container { width: 100% !important; }
.pf-select2 .select2-selection { min-height: 38px !important; border: 0 !important; border-radius: 9px !important; background: var(--pf-sf) !important; box-shadow: inset 0 0 0 1px var(--pf-inl) !important; }
.pf-select2 .select2-search__field { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; resize: none !important; }
.pf-select2 .select2-selection__choice { background: var(--pf-sf2) !important; border: 1px solid var(--pf-ln2) !important; color: var(--pf-t1) !important; }
.pf-select2 .select2-selection__choice__remove { color: var(--pf-t3) !important; }
/* el select2 con el foco dentro (también el de varias opciones, cuyo buscador recibe el foco por código) se marca como los campos */
.pf-select2 :is(.select2-container--focus, .select2-container--open) .select2-selection, .pf-select2 .select2-selection:focus-within { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft) !important; box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent) !important; }
html[data-sistema="migrada"] .select2-container .select2-selection__choice__remove:focus-visible, html[data-sistema="migrada"] .select2-container .select2-search__field:focus-visible { outline: 2px solid var(--pf-g7) !important; outline-offset: 1px !important; }
/* color elegido por la persona (categorías de documentos…): data-color="#hex"; sistema.js lo pasa a --pf-dato.
   Es un dato, no diseño: solo marca un punto en la píldora o el fondo tenue del ícono (PF-556) */
.pf-pill[data-color]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-dato, currentColor); flex: none; }
.pf-mini-ic[data-color] { background: var(--pf-sf2); background: color-mix(in srgb, var(--pf-dato, var(--pf-t4)) 18%, transparent); color: var(--pf-dato, var(--pf-t3)); }
/* .pf-sheet-foot.compacta: en celular los botones del pie pierden el ícono y se angostan */
@media (max-width: 639px) {
  .pf-sheet-foot.compacta { gap: 8px !important; }
  .pf-sheet-foot.compacta .pf-btn { padding-left: 12px !important; padding-right: 12px !important; }
  .pf-sheet-foot.compacta .pf-btn i { display: none; }
}
/* .pf-tbl-densa (en el contenedor): tabla sin ancho mínimo y celdas angostas en celular */
.pf-tbl-densa .pf-tbl { min-width: 0 !important; }
@media (max-width: 639px) { .pf-tbl-densa :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; } }

/* .pf-tbl-fija (en el contenedor de una tabla ancha): la tabla se desplaza sola en los dos sentidos, con alto tope, y la
   cabecera queda fija arriba; la primera columna sigue fija a la izquierda con sticky left-0 en sus celdas (la esquina con z-[4],
   las demás cabeceras con su fondo). Con border-collapse la línea bajo la cabecera se iría al desplazar: va como sombra interior. */
.pf-tbl-fija { overflow: auto; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); }
.pf-tbl-fija .pf-tbl thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--pf-ln); }
/* sin el ancho mínimo de 720px: con pocas columnas (un solo período) el sobrante estiraba la última y dejaba sus pastillas fuera de la pantalla;
   la primera columna lleva ancho fijo (w-[124px]…) para que el sobrante no vaya a ella */
html[data-sistema="migrada"] .pf-tbl-fija > .pf-tbl { min-width: 0; }

/* tablas anchas: celdas angostas (.densa) y filas bajas (.baja), en la tabla o en su contenedor */
:is(.pf-tbl.densa, .densa .pf-tbl) :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; }
:is(.pf-tbl.baja, .baja .pf-tbl) td { height: 44px !important; }

/* ---------- Editor enriquecido (Toast UI) y Select2 con los colores del sistema, en claro y en oscuro (PF-549) ---------- */
html[data-sistema="migrada"] .toastui-editor-mode-switch .tab-item { color: var(--pf-t2); }
html[data-sistema="migrada"] .toastui-editor-mode-switch .tab-item.active { color: var(--pf-t1); }
html[data-sistema="migrada"] .ProseMirror .placeholder, html[data-sistema="migrada"] .toastui-editor-contents-placeholder:before { color: var(--pf-t3); }
html[data-theme="dark"] .toastui-editor-defaultUI-toolbar, html[data-theme="dark"] .toastui-editor-mode-switch .tab-item { background-color: var(--pf-sf2); border-color: var(--pf-inl); }
html[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active { background-color: var(--pf-sf); border-top-color: var(--pf-sf); }
html[data-theme="dark"] .toastui-editor-ww-container, html[data-theme="dark"] .toastui-editor-md-container, html[data-theme="dark"] .toastui-editor-md-preview, html[data-theme="dark"] .toastui-editor-mode-switch { background-color: var(--pf-sf); border-color: var(--pf-inl); }
html[data-theme="dark"] .toastui-editor-main-container, html[data-theme="dark"] .toastui-editor-contents, html[data-theme="dark"] .toastui-editor-contents :is(p, li, h1, h2, h3, h4, h5, h6, td, th) { color: var(--pf-t1); }
html[data-theme="dark"] .toastui-editor-defaultUI-toolbar button { border-color: transparent; background-color: transparent; filter: invert(1) brightness(.8); }
html[data-sistema="migrada"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--pf-t3); }

/* =====================================================================
   Ejercicios (PF-548) · render
   Piel del render de solo lectura (_ejercicio_render.html) y de las reglas que antes traía
   _ejercicio_render_styles.inc.html. Los selectores funcionales (.opcion-item, .tfm-row,
   .ordering-item, …) son los que lee ejercicios_interactivos.js: no se renombran.
   Sin prefijo html[data-sistema]: el fragmento también lo incluyen páginas aún sin migrar
   (admisión, PF-554), que heredan así la piel nueva (las fichas viven en :root).
   ===================================================================== */
:root { --ej-brand-primary: var(--pf-g7); --ej-brand-secondary: var(--pf-b-ink); --ej-brand-soft: var(--pf-g-soft); }

/* opciones (opción múltiple, verdadero/falso, selección múltiple) */
.opcion-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); margin-bottom: 8px; background: var(--pf-sf2); color: var(--pf-t1); transition: border-color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
.opcion-item .opcion-text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.opcion-item.interactive { cursor: pointer; }
.opcion-item.interactive:hover { border-color: var(--pf-b7); background: var(--pf-info-bg); }
.opcion-item.selected { border-color: var(--pf-g7); background: var(--pf-g-soft); }
.opcion-marker { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pf-g7); color: var(--pf-on-g); font: 600 var(--pf-fs-sm) var(--pf-f-in); }
.opcion-marker.verdadero { background: var(--pf-ok); color: var(--pf-sf); }
.opcion-marker.falso { background: var(--pf-crit); color: var(--pf-sf); }
.tf-opciones { display: flex; gap: 12px; }
.tf-opciones .opcion-item { flex: 1; justify-content: center; }
.opcion-checkbox-marker { color: var(--pf-t4); }
.opcion-checkbox.selected .opcion-checkbox-marker { color: var(--pf-ok); }
.opcion-checkbox.selected .opcion-checkbox-marker .fa-square { display: none; }
.opcion-checkbox.selected .opcion-checkbox-marker::before { content: '\f14a'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; }

/* relacionar y ordenar */
.matching-item, .ordering-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-sm); margin-bottom: 8px; background: var(--pf-sf); color: var(--pf-t1); }
.matching-marker, .ordering-marker { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--pf-sf3); color: var(--pf-t2); font: 600 var(--pf-fs-xs) var(--pf-f-in); }
.matching-text, .ordering-text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.ordering-handle, .timeline-handle { color: var(--pf-t4); cursor: grab; }
.sortable .ordering-item, .sortable .timeline-item { cursor: move; }
.ej-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.ej-columnas-sep { display: none; align-items: center; justify-content: center; align-self: center; color: var(--pf-t4); }
@media (min-width: 768px) { .ej-columnas { grid-template-columns: minmax(0, 5fr) auto minmax(0, 5fr); } .ej-columnas-sep { display: flex; } }
.ej-sub { font: 600 var(--pf-fs-sm) var(--pf-f-in); color: var(--pf-t3); }
.ej-nota { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.ej-etiqueta { display: block; margin-bottom: 4px; font: 600 var(--pf-fs-md) var(--pf-f-in); color: var(--pf-t2); }

/* completar espacios, desplegables y banco de palabras */
.fill-blank-text { font-size: var(--pf-fs-lg); line-height: 1.8; }
.ej-campo { max-width: 22rem; }
.ej-campo.ancho { max-width: 28rem; }
.ej-campo-lbl { flex: none; font: 600 var(--pf-fs-sm) var(--pf-f-in); color: var(--pf-t2); white-space: nowrap; }
.ej-solo { width: 100%; max-width: 22rem; font: var(--pf-fs-base) var(--pf-f-in); }
input.ej-solo, select.ej-solo { height: 38px; border-radius: 9px; padding: 0 12px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); border: 0; color: var(--pf-t1); }
.ej-campo:has(.input-correcto, .select-correcto) { box-shadow: inset 0 0 0 1.5px var(--pf-ok); }
.ej-campo:has(.input-incorrecto, .select-incorrecto) { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.word-bank-word { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--pf-inl); border-radius: 999px; background: var(--pf-sf2); color: var(--pf-t1); font-size: var(--pf-fs-base); cursor: default; }
.word-bank-word.draggable { cursor: grab; }
.word-bank-word.used { opacity: .5; text-decoration: line-through; }

/* clasificar */
.classification-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); margin-bottom: 8px; background: var(--pf-sf); }
.classification-item__main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.classification-marker { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--pf-m3-bg); color: var(--pf-m3-ink); font: 600 var(--pf-fs-xs) var(--pf-f-in); }
.classification-text { flex: 1; min-width: 0; line-height: 1.5; font-weight: 600; color: var(--pf-t1); }
.classification-text p { margin: 0; }
.classification-item__control { display: flex; align-items: center; gap: 8px; padding-left: 38px; }
.classification-control-label { font: 600 var(--pf-fs-xs) var(--pf-f-in); color: var(--pf-t3); }
.classification-item__answer { padding-left: 38px; }
.classification-select { flex: 1; max-width: 16rem; min-width: 0; }

/* línea de tiempo */
.timeline-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--pf-ln); border-left: 3px solid var(--pf-b7); border-radius: var(--pf-r-sm); margin-bottom: 8px; background: var(--pf-sf); color: var(--pf-t1); }
.timeline-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* verdadero/falso múltiple */
.tfm-lista { display: flex; flex-direction: column; gap: 8px; }
.tfm-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 11px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); }
.tfm-num.opcion-marker { width: 28px; height: 28px; }
.tfm-texto { flex: 1; min-width: 0; }
.tfm-vf { display: flex; gap: 6px; flex: none; }
.tfm-vf .opcion-item { margin-bottom: 0; padding: 6px 10px; }
.tfm-justificacion-text { flex: 1 1 100%; margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-ok); }
@media (max-width: 768px) {
  .tfm-row { flex-wrap: wrap; }
  .tfm-texto { flex: 1 1 100%; }
  .tfm-vf { width: 100%; }
  .tfm-vf .opcion-item { flex: 1; min-height: 44px; justify-content: center; }
}

/* respuestas, explicación, procedimiento y guía */
.ejercicio-respuestas { font-size: var(--pf-fs-base); color: var(--pf-t1); }
.ejercicio-respuestas .pf-pill { margin: 0 4px 4px 0; }
.ej-tit { color: var(--pf-ok); font-weight: 600; }
.ej-tit.info { color: var(--pf-info); }
.ej-lista { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.ej-lista.num { list-style: decimal; }
.ejercicio-explicacion, .math-procedimiento { color: var(--pf-t1); border-left: 3px solid var(--pf-ok); }
.math-procedimiento { border-left-color: var(--pf-info); }
.ejercicio-explicacion > *, .math-procedimiento > * { min-width: 0; }
.ejercicio-explicacion strong { color: var(--pf-ok); }
.math-procedimiento strong { color: var(--pf-info); }
.ejercicio-explicacion p, .math-procedimiento p { margin: 0 0 4px; }
.ejercicio-explicacion p:last-child, .math-procedimiento p:last-child { margin-bottom: 0; }
.ejercicio-guia { padding: 12px; border-radius: var(--pf-r); border-left: 3px solid var(--pf-info); background: var(--pf-sf2); color: var(--pf-t1); }
.ejercicio-guia p { margin: 4px 0; }
.ejercicio-guia ul { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.error-correction-texto { padding: 12px 14px; border-left: 4px solid var(--pf-warn); border-radius: var(--pf-r-sm); background: var(--pf-warn-bg); color: var(--pf-t1); }
.math-input-label { display: block; margin-bottom: 4px; font: 600 var(--pf-fs-md) var(--pf-f-in); color: var(--pf-t2); }

/* ---------- Ejercicios (PF-548) · interactivo y presentación ----------
   Sin prefijo html[data-sistema="migrada"]: estos fragmentos los incluyen páginas aún no migradas (lección, resolver, admisión) que ya no traen <style>; los selectores son los funcionales de siempre y las fichas viven en :root, así que no se filtra nada.
   Piel de los fragmentos _ejercicio_interactivo, _ejercicio_presentacion y sus partials (antes un <style> con hex
   dentro de cada plantilla y otro que inyectaba ejercicios_interactivos.js). Los selectores funcionales son los de
   siempre: el JS estático los lee y escribe sus estados (ejercicio-correcto, input-incorrecto, selected…). */
.ejercicio-tipo-multiple_choice { background: var(--pf-m1-bg); color: var(--pf-m1-ink); }
.ejercicio-tipo-true_false { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.ejercicio-tipo-fill_blank { background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
.ejercicio-tipo-matching { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.ejercicio-tipo-ordering { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.ejercicio-tipo-math_problem { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.ejercicio-tipo-open_ended { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.ejercicio-tipo-multiple_response { background: var(--pf-m1-bg); color: var(--pf-m1-ink); }
.ejercicio-tipo-classification { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.ejercicio-tipo-fill_dropdown { background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
.ejercicio-tipo-timeline { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.ejercicio-tipo-word_bank { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.ejercicio-tipo-short_answer { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.ejercicio-tipo-error_correction { background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
.ejercicio-tipo-true_false_multiple { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.ejercicio-card { background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh1); padding: 24px; margin-bottom: 20px; color: var(--pf-t1); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast); }
.ejercicio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pf-ln2); }
.ejercicio-header-content { display: flex; align-items: center; gap: 12px; }
.ejercicio-tipo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pf-r-sm); font-size: var(--pf-fs-xs); font-weight: 600; }
.ejercicio-numero { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t3); }
.ejercicio-enunciado { font-size: var(--pf-fs-lg); line-height: 1.7; color: var(--pf-t1); margin-bottom: 20px; }
.ejercicio-opciones { display: flex; flex-direction: column; gap: 10px; }
.opcion-item { display: flex; align-items: center; padding: 14px 18px; border: 1.5px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf2); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), transform var(--pf-d-fast); }
.opcion-item.interactive { cursor: pointer; }
.opcion-item.interactive:hover { border-color: var(--pf-b7); background: var(--pf-sf3); transform: translateX(3px); }
.opcion-item.selected { border-color: var(--pf-b7) !important; background: var(--pf-b-soft) !important; }
.opcion-item.correct-answer { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.opcion-item.correct-answer .opcion-marker { background: var(--pf-g7) !important; }
.opcion-marker { width: 32px; height: 32px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-base); font-weight: 700; margin-right: 14px; flex-shrink: 0; }
.opcion-text { font-size: var(--pf-fs-lg); color: var(--pf-t1); flex: 1; min-width: 0; line-height: 1.45; }
.matching-text, .classification-text, .timeline-text { flex: 1; min-width: 0; line-height: 1.45; }
.tf-opciones { flex-direction: row !important; gap: 16px; }
.tf-opciones .opcion-item { flex: 1; justify-content: center; padding: 18px 24px; }
.tf-marker-true { background: var(--pf-g7) !important; }
.tf-marker-false { background: var(--pf-crit) !important; }
.afirmacion-card { background: var(--pf-b-soft); padding: 20px; border-radius: var(--pf-r-lg); margin-bottom: 16px; font-size: var(--pf-fs-lg); color: var(--pf-t1); border-left: 4px solid var(--pf-b7); }
.fill-blank-text { font-size: var(--pf-fs-lg); line-height: 2; margin-bottom: 20px; }
.fill-blank-inputs { background: var(--pf-sf2); padding: 20px; border-radius: var(--pf-r-lg); }
.blank-input-group { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.blank-label { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t3); min-width: 100px; }
.ejercicio-interactivo .blank-input { flex: 1; max-width: 280px; padding: 10px 14px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); font-size: var(--pf-fs-base); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.ejercicio-interactivo .blank-input:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.ejercicio-interactivo .blank-input.input-correcto { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.ejercicio-interactivo .blank-input.input-incorrecto { border-color: var(--pf-crit) !important; background: var(--pf-crit-bg) !important; }
.matching-container { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.matching-column-title { display: flex; align-items: center; gap: 8px; font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t2); margin-bottom: 12px; }
.column-badge { width: 24px; height: 24px; border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); font-weight: 700; color: var(--pf-on-g); }
.column-a { background: var(--pf-g7); }
.column-b { background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-b7); }
.matching-divider { display: flex; align-items: center; justify-content: center; color: var(--pf-t4); padding-top: 40px; }
.matching-item { display: flex; align-items: center; padding: 12px 14px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); margin-bottom: 8px; background: var(--pf-sf); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); cursor: pointer; }
.matching-item:hover { border-color: var(--pf-b7); background: var(--pf-sf2); }
.matching-selected { border-color: var(--pf-b7) !important; background: var(--pf-b-soft) !important; transform: scale(1.02); }
.matching-connected { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.matching-marker { width: 28px; height: 28px; background: var(--pf-sf3); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-md); font-weight: 600; margin-right: 10px; color: var(--pf-t3); }
.matching-badge { margin-left: auto; padding: 4px 10px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); font-size: var(--pf-fs-2xs); font-weight: 600; }
.ordering-items { background: var(--pf-sf2); padding: 16px; border-radius: var(--pf-r-lg); }
.ordering-item { display: flex; align-items: center; padding: 14px 16px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); margin-bottom: 8px; background: var(--pf-sf); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.sortable .ordering-item { cursor: grab; }
.sortable .ordering-item:active { cursor: grabbing; }
.ordering-handle { color: var(--pf-t4); margin-right: 12px; cursor: grab; }
.ordering-number { width: 28px; height: 28px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-md); font-weight: 700; margin-right: 12px; flex-shrink: 0; }
.ordering-text { flex: 1; min-width: 0; font-size: var(--pf-fs-base); line-height: 1.45; }
.ordering-ghost { opacity: 0.4; }
.ordering-chosen { background: var(--pf-b-soft) !important; border-color: var(--pf-b7) !important; }
.math-problema { font-size: var(--pf-fs-lg); line-height: 1.7; margin-bottom: 16px; }
.math-datos, .math-formulas { background: var(--pf-sf2); padding: 16px; border-radius: var(--pf-r); margin-bottom: 12px; }
.math-datos strong, .math-formulas strong { color: var(--pf-t2); display: block; margin-bottom: 8px; }
.math-datos ul, .math-formulas ul { margin: 0; padding-left: 20px; }
.pdf-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.1; margin: 0 0.28em; }
.pdf-frac-num { border-bottom: 1.5px solid currentColor; padding: 0 0.4em 0.12em; font-size: 0.9em; }
.pdf-frac-den { padding: 0.12em 0.4em 0; font-size: 0.9em; }
.pdf-math-html { font-size: 1.05em; }
.pdf-nobr { white-space: nowrap; }
.math-input-container { background: var(--pf-sf2); border: 1px solid var(--pf-ln); padding: 20px; border-radius: var(--pf-r-lg); margin-top: 16px; }
.math-input-label { display: block; font-weight: 600; color: var(--pf-t2); margin-bottom: 10px; }
.math-input-group { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ejercicio-interactivo .math-answer-input { flex: 1; max-width: 200px; padding: 12px 16px; border: 2px solid var(--pf-inl); border-radius: var(--pf-r); font-size: var(--pf-fs-lg); font-weight: 600; text-align: center; }
.ejercicio-interactivo .math-answer-input:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.math-unit { padding: 10px 14px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); font-weight: 600; }
.open-ended-pregunta { font-size: var(--pf-fs-lg); line-height: 1.7; color: var(--pf-t2); margin-bottom: 12px; }
.open-ended-requisitos { font-size: var(--pf-fs-md); color: var(--pf-t3); margin-bottom: 16px; }
.open-ended-input { position: relative; }
.ejercicio-interactivo .open-ended-textarea { width: 100%; padding: 16px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r-lg); font-size: var(--pf-fs-lg); line-height: 1.7; resize: vertical; min-height: 160px; transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.ejercicio-interactivo .open-ended-textarea:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.word-counter { text-align: right; font-size: var(--pf-fs-md); color: var(--pf-t3); margin-top: 8px; }
.current-words { font-weight: 600; }
.btn-modern { padding: 12px 20px; border-radius: var(--pf-r); font-weight: 600; font-size: var(--pf-fs-base); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: background-color var(--pf-d-fast), transform var(--pf-d-press); }
.btn-primary { background: var(--pf-g7); color: var(--pf-on-g); box-shadow: var(--pf-sh1); }
.btn-primary:hover { background: var(--pf-g6); }
.opcion-checkbox-icon { margin-right: 10px; font-size: var(--pf-fs-xl); color: var(--pf-t4); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.opcion-checkbox.selected .opcion-checkbox-icon { color: var(--pf-ok); }
.opcion-checkbox.selected .opcion-checkbox-icon .fa-square::before { content: '\f14a'; }
.classification-categorias { margin-bottom: 1rem; }
.classification-categorias .classification-cat-badge { font-size: var(--pf-fs-md); padding: 0.45rem 0.75rem; border-radius: var(--pf-r-lg); }
.classification-item { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.875rem 1rem; border: 2px solid var(--pf-ln); border-radius: var(--pf-r-lg); margin-bottom: 0.625rem; background: var(--pf-sf); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.classification-item__main { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.classification-marker { width: 2rem; height: 2rem; flex-shrink: 0; background: var(--pf-y); color: var(--pf-y-on); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-md); font-weight: 700; }
.classification-text { flex: 1; min-width: 0; font-size: var(--pf-fs-lg); font-weight: 600; color: var(--pf-t1); line-height: 1.55; word-break: break-word; }
.classification-text > p, .classification-text p:last-child { margin: 0; }
.classification-text .katex-display { margin: 0; }
.classification-item__control { display: flex; align-items: center; gap: 0.625rem; padding-left: calc(2rem + 0.75rem); }
.classification-control-label { flex-shrink: 0; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t3); }
.ejercicio-interactivo .classification-select { flex: 1; min-width: 0; max-width: 20rem; border: 2px solid var(--pf-ln); border-radius: 0.625rem; padding: 0.5rem 0.75rem; font-size: var(--pf-fs-base); background-color: var(--pf-sf2); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast), transform var(--pf-d-fast), color var(--pf-d-fast); }
.ejercicio-interactivo .classification-select:focus { border-color: var(--pf-g7); box-shadow: 0 0 0 3px var(--pf-g-soft); outline: none; background-color: var(--pf-sf); }
.classification-item.clasificado { border-color: var(--pf-b7); background: var(--pf-b-soft); }
.fill-dropdown-text { font-size: var(--pf-fs-lg); line-height: 2; margin-bottom: 20px; }
.fill-dropdown-inputs { background: var(--pf-sf2); padding: 20px; border-radius: var(--pf-r-lg); }
.dropdown-input-group { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dropdown-label { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t3); min-width: 100px; }
.ejercicio-interactivo .dropdown-select { flex: 1; max-width: 280px; padding: 10px 14px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); font-size: var(--pf-fs-base); }
.ejercicio-interactivo .dropdown-select:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.timeline-items { background: var(--pf-sf2); padding: 16px; border-radius: var(--pf-r-lg); }
.timeline-item { display: flex; align-items: center; padding: 14px 16px; border: 1.5px solid var(--pf-ln); border-left: 4px solid var(--pf-b7); border-radius: var(--pf-r); margin-bottom: 10px; background: var(--pf-sf); transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast); }
.timeline-handle { color: var(--pf-t4); margin-right: 12px; cursor: grab; }
.timeline-number { width: 28px; height: 28px; background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-b7); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-md); font-weight: 700; margin-right: 12px; }
.timeline-content { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.timeline-fecha { font-size: var(--pf-fs-xs); }
.sortable .timeline-item { cursor: grab; }
.sortable .timeline-item:active { cursor: grabbing; }
.word-bank-container { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r-lg); border: 2px dashed var(--pf-ok); }
.word-bank-word { display: inline-block; padding: 8px 14px; font-size: var(--pf-fs-base); font-weight: 600; background: var(--pf-sf); color: var(--pf-t1); border: 1px solid var(--pf-inl); border-radius: var(--pf-r-sm); cursor: default; transition: background-color var(--pf-d-fast), border-color var(--pf-d-fast); }
.word-bank-word:hover { background: var(--pf-g-soft) !important; border-color: var(--pf-g7); }
.word-bank-word.used { opacity: 0.5; text-decoration: line-through; background: var(--pf-sf3) !important; }
.word-bank-text { font-size: var(--pf-fs-lg); line-height: 2; margin: 20px 0; }
.word-bank-inputs { background: var(--pf-sf2); padding: 20px; border-radius: var(--pf-r-lg); }
.word-bank-input-group { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.word-bank-label { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t3); min-width: 100px; }
.ejercicio-interactivo .word-bank-select { flex: 1; max-width: 280px; padding: 10px 14px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); font-size: var(--pf-fs-base); }
.ejercicio-interactivo .word-bank-select:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.error-correction-texto { background: var(--pf-warn-bg); color: var(--pf-t1); border-left: 4px solid var(--pf-warn); padding: 12px 14px; margin-bottom: 14px; border-radius: 0 var(--pf-r) var(--pf-r) 0; line-height: 1.6; }
.error-correction-inputs { display: flex; flex-direction: column; gap: 10px; }
.error-correction-item { display: flex; align-items: center; gap: 12px; }
.error-correction-label { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-warn); min-width: 80px; }
.ejercicio-interactivo .error-correction-input, .ejercicio-interactivo .short-answer-input { flex: 1; max-width: 420px; padding: 10px 14px; border: 2px solid var(--pf-ln); border-radius: var(--pf-r); font-size: var(--pf-fs-lg); }
.ejercicio-interactivo .error-correction-input:focus, .ejercicio-interactivo .short-answer-input:focus { border-color: var(--pf-g7); outline: none; box-shadow: 0 0 0 3px var(--pf-g-soft); }
.tfm-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.tfm-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf); }
.tfm-num.opcion-marker { margin-right: 0; width: 1.75rem; height: 1.75rem; font-size: var(--pf-fs-xs); border-radius: var(--pf-r-lg); }
.tfm-texto { flex: 1; min-width: 0; font-size: var(--pf-fs-lg); line-height: 1.45; padding-top: 0.2rem; }
.tfm-vf { display: flex; gap: 0.4rem; flex-shrink: 0; }
.tfm-btn.opcion-item { padding: 0.3rem 0.45rem; min-width: 2.75rem; justify-content: center; }
.tfm-btn.opcion-item.interactive:hover { transform: none; }
.tfm-btn .opcion-marker { margin-right: 0; width: 1.75rem; height: 1.75rem; }
@media (max-width: 768px) {
  .ejercicio-card { padding: 12px; margin-bottom: 12px; border-radius: var(--pf-r-lg); }
  .ejercicio-header { margin-bottom: 10px; padding-bottom: 8px; }
  .ejercicio-header-content { flex-wrap: wrap; gap: 8px; }
  .ejercicio-tipo-badge { padding: 4px 8px; font-size: var(--pf-fs-2xs); }
  .ejercicio-numero { font-size: var(--pf-fs-md); }
  .ejercicio-enunciado { margin-bottom: 12px; font-size: var(--pf-fs-base); line-height: 1.6; }
  .ejercicio-opciones { gap: 8px; }
  .opcion-item { padding: 10px 12px; }
  .opcion-item.interactive:hover { transform: none; }
  .opcion-marker { width: 28px; height: 28px; margin-right: 10px; font-size: var(--pf-fs-xs); }
  .opcion-text { font-size: var(--pf-fs-base); }
  .opcion-checkbox-icon { margin-right: 6px; font-size: var(--pf-fs-lg); }
  .afirmacion-card { padding: 12px; font-size: var(--pf-fs-base); margin-bottom: 12px; }
  .tf-opciones { flex-direction: column !important; gap: 8px; }
  .tf-opciones .opcion-item { padding: 12px 14px; }
  .fill-blank-text, .fill-dropdown-text, .word-bank-text { font-size: var(--pf-fs-base); line-height: 1.75; margin-bottom: 12px; }
  .word-bank-text { margin-top: 12px; margin-bottom: 12px; }
  .fill-blank-inputs, .fill-dropdown-inputs, .word-bank-inputs, .ordering-items, .word-bank-container, .timeline-items { padding: 10px; }
  .blank-input-group, .dropdown-input-group, .word-bank-input-group { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 10px; }
  .blank-label, .dropdown-label, .word-bank-label { min-width: unset; }
  .ejercicio-interactivo .blank-input, .ejercicio-interactivo .dropdown-select, .ejercicio-interactivo .word-bank-select { max-width: none; width: 100%; padding: 10px 12px; font-size: var(--pf-fs-base); }
  .word-bank-word { padding: 6px 10px; font-size: var(--pf-fs-md); }
  .matching-container { grid-template-columns: 1fr; gap: 10px; }
  .matching-divider { transform: rotate(90deg); padding: 8px 0; }
  .matching-column-title { font-size: var(--pf-fs-md); margin-bottom: 8px; }
  .matching-item { padding: 10px 12px; margin-bottom: 6px; flex-wrap: wrap; gap: 4px; }
  .matching-marker { width: 24px; height: 24px; margin-right: 8px; font-size: var(--pf-fs-xs); }
  .matching-text { font-size: var(--pf-fs-base); }
  .matching-badge { margin-left: 0; margin-top: 4px; font-size: 10px; }
  .matching-selected { transform: none; }
  .ordering-item { padding: 10px 12px; margin-bottom: 6px; }
  .ordering-handle { margin-right: 8px; }
  .ordering-number { width: 24px; height: 24px; margin-right: 8px; font-size: var(--pf-fs-xs); }
  .math-problema { font-size: var(--pf-fs-base); margin-bottom: 12px; }
  .math-datos, .math-formulas { padding: 10px; margin-bottom: 10px; font-size: var(--pf-fs-base); }
  .math-input-container { padding: 12px; margin-top: 12px; }
  .math-input-group { flex-direction: column; align-items: stretch; gap: 8px; }
  .ejercicio-interactivo .math-answer-input { max-width: none; width: 100%; padding: 10px 12px; font-size: var(--pf-fs-lg); }
  .math-unit { align-self: flex-start; padding: 8px 12px; font-size: var(--pf-fs-base); }
  .open-ended-pregunta { font-size: var(--pf-fs-base); margin-bottom: 10px; }
  .open-ended-requisitos { margin-bottom: 12px; font-size: var(--pf-fs-xs); }
  .ejercicio-interactivo .open-ended-textarea { padding: 12px; min-height: 120px; font-size: var(--pf-fs-base); }
  .classification-item__control { padding-left: 0; flex-direction: column; align-items: stretch; }
  .classification-control-label { font-size: var(--pf-fs-xs); }
  .ejercicio-interactivo .classification-select { max-width: none; width: 100%; }
  .timeline-item { padding: 10px 12px; margin-bottom: 8px; align-items: flex-start; }
  .timeline-handle { margin-right: 8px; }
  .timeline-number { width: 24px; height: 24px; margin-right: 8px; font-size: var(--pf-fs-xs); flex-shrink: 0; }
  .timeline-content { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
  .timeline-text { font-size: var(--pf-fs-base); }
  .timeline-fecha { margin-left: 0; font-size: var(--pf-fs-2xs); }
  .ejercicio-card .btn-modern { width: 100%; padding: 10px 16px; font-size: var(--pf-fs-md); }
  .tfm-row { flex-wrap: wrap; }
  .tfm-texto { flex: 1 1 100%; }
  .tfm-vf { width: 100%; }
  .tfm-btn.opcion-item { flex: 1; min-height: 2.75rem; }
}
.ejercicio-presentacion { background: var(--pf-sf); color: var(--pf-t1); border-radius: var(--pf-r-lg); padding: 20px; margin-bottom: 16px; border: 1px solid var(--pf-ln); box-shadow: var(--pf-sh1); }
.ejercicio-pres-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pf-ln2); }
.ejercicio-pres-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pf-r-sm); font-size: var(--pf-fs-xs); font-weight: 600; }
.ejercicio-pres-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ejercicio-pres-numero { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t3); }
.ejercicio-pres-puntos { font-size: var(--pf-fs-xs); padding: 4px 8px; background: var(--pf-warn-bg); color: var(--pf-warn); border-radius: var(--pf-r-sm); font-weight: 600; }
.ejercicio-pres-dificultad { font-size: var(--pf-fs-xs); padding: 4px 8px; border-radius: var(--pf-r-sm); font-weight: 600; }
.dificultad-facil { background: var(--pf-ok-bg); color: var(--pf-ok); }
.dificultad-medio { background: var(--pf-warn-bg); color: var(--pf-warn); }
.dificultad-dificil { background: var(--pf-crit-bg); color: var(--pf-crit); }
.ejercicio-pres-enunciado { font-size: var(--pf-fs-lg); line-height: 1.7; color: var(--pf-t1); margin-bottom: 16px; }
.ejercicio-pres-opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion-pres-item { display: flex; align-items: center; padding: 12px 16px; border: 1.5px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf2); }
.opcion-pres-item.opcion-correcta { border-color: var(--pf-ok); background: var(--pf-ok-bg); }
.opcion-pres-marker { width: 28px; height: 28px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-md); font-weight: 700; margin-right: 12px; flex-shrink: 0; }
.opcion-correcta .opcion-pres-marker { background: var(--pf-g7); }
.opcion-pres-text { flex: 1; font-size: var(--pf-fs-base); color: var(--pf-t1); }
.opcion-pres-badge { padding: 4px 10px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); font-size: var(--pf-fs-2xs); font-weight: 600; margin-left: auto; }
.ejercicio-pres-afirmacion { background: var(--pf-b-soft); padding: 16px 20px; border-radius: var(--pf-r); margin-bottom: 12px; border-left: 4px solid var(--pf-b7); color: var(--pf-t1); }
.ejercicio-pres-afirmacion i { color: var(--pf-b7); margin-right: 8px; }
.ejercicio-pres-tf-opciones { display: flex; gap: 12px; }
.tf-pres-option { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf2); font-weight: 600; }
.tf-pres-option.opcion-correcta { border-color: var(--pf-ok); background: var(--pf-ok-bg); }
.fill-pres-text { font-size: var(--pf-fs-lg); line-height: 2; margin-bottom: 16px; }
.fill-pres-espacio { display: inline-block; min-width: 4.25em; margin: 0 0.15em; padding: 0 0.4em 0.05em; border-bottom: 2px solid var(--pf-t1); text-align: center; font-weight: 700; font-size: 0.85em; color: var(--pf-info); line-height: 1.4; }
.fill-pres-respuestas { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r); margin-top: 12px; }
.fill-pres-respuestas ul { margin: 8px 0 0 20px; padding: 0; }
.fill-pres-leyenda { margin-top: 4px; margin-bottom: 12px; padding: 10px 12px; background: var(--pf-sf3); border-radius: var(--pf-r-sm); border-left: 3px solid var(--pf-t4); }
.fill-pres-leyenda-linea { margin: 0 0 4px; font-size: var(--pf-fs-base); line-height: 1.4; color: var(--pf-t2); }
.fill-pres-leyenda-linea:last-child { margin-bottom: 0; }
.matching-pres-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.matching-pres-col h6 { display: flex; align-items: center; gap: 8px; font-size: var(--pf-fs-md); font-weight: 600; margin-bottom: 10px; color: var(--pf-t2); }
.col-badge { width: 22px; height: 22px; border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-2xs); font-weight: 700; color: var(--pf-on-g); }
.col-a { background: var(--pf-g7); }
.col-b { background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-b7); }
.matching-pres-item { display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-sm); margin-bottom: 6px; background: var(--pf-sf); }
.matching-pres-casilla { width: 26px; height: 26px; border: 2px solid var(--pf-t2); border-radius: var(--pf-r-sm); background: var(--pf-sf); margin-right: 10px; flex-shrink: 0; display: inline-block; }
.matching-pres-id { width: 24px; height: 24px; background: var(--pf-sf3); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); font-weight: 600; margin-right: 10px; color: var(--pf-t3); }
.matching-pres-respuestas { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r); }
.matching-pres-pairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.matching-pair { padding: 6px 12px; background: var(--pf-sf); border-radius: var(--pf-r-sm); font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-ok); }
.ordering-pres-instruccion { font-size: var(--pf-fs-md); color: var(--pf-t3); margin-bottom: 12px; }
.ordering-pres-items { background: var(--pf-sf2); padding: 12px; border-radius: var(--pf-r); }
.ordering-pres-item { display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-sm); margin-bottom: 6px; background: var(--pf-sf); }
.ordering-pres-num { width: 26px; height: 26px; background: var(--pf-g7); color: var(--pf-on-g); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); font-weight: 700; margin-right: 10px; }
.ordering-pres-casilla, .timeline-pres-casilla { width: 26px; height: 26px; border: 2px solid var(--pf-t2); border-radius: var(--pf-r-sm); background: var(--pf-sf); margin-right: 10px; flex-shrink: 0; display: inline-block; }
.error-pres-lineas { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.25rem; }
.error-pres-linea { display: flex; align-items: center; gap: 0.75rem; }
.error-pres-label { font-size: var(--pf-fs-md); color: var(--pf-t3); min-width: 4.5rem; }
.error-pres-casilla { flex: 1; min-height: 1.5rem; border-bottom: 2px solid var(--pf-warn); display: inline-block; }
.ordering-pres-respuesta { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r); margin-top: 12px; }
.ordering-correct-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ordering-correct-item { padding: 6px 12px; background: var(--pf-sf); border-radius: var(--pf-r-sm); font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-ok); }
.math-pres-problema { font-size: var(--pf-fs-lg); line-height: 1.7; margin-bottom: 16px; }
.math-pres-datos, .math-pres-formulas { background: var(--pf-sf2); padding: 14px; border-radius: var(--pf-r); margin-bottom: 10px; }
.math-pres-datos ul, .math-pres-formulas ul { margin: 8px 0 0 20px; padding: 0; }
.math-pres-respuesta { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r); margin-top: 12px; }
.math-pres-casilla-wrap { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.math-pres-casilla-label { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t2); flex-shrink: 0; }
.math-pres-casilla, .short-pres-casilla { display: inline-block; min-width: 12rem; flex: 1; height: 2rem; border-bottom: 2px solid var(--pf-t2); background: transparent; }
.math-pres-unidad { font-size: var(--pf-fs-base); color: var(--pf-t2); }
.open-pres-lineas { margin-top: 8px; }
.open-pres-linea { border-bottom: 1px solid var(--pf-inl); min-height: 1.75rem; margin-top: 6px; }
.math-respuesta-valor { font-size: var(--pf-fs-xl); font-weight: 700; color: var(--pf-ok); margin-left: 8px; }
.open-pres-pregunta { font-size: var(--pf-fs-lg); line-height: 1.7; margin-bottom: 12px; }
.open-pres-requisitos { font-size: var(--pf-fs-md); color: var(--pf-t3); margin-bottom: 12px; }
.open-pres-nota { font-size: var(--pf-fs-md); color: var(--pf-g-soft-ink); background: var(--pf-g-soft); padding: 12px; border-radius: var(--pf-r-sm); }
.ejercicio-pres-pista { background: var(--pf-warn-bg); color: var(--pf-t1); padding: 14px; border-radius: var(--pf-r); margin-top: 16px; font-size: var(--pf-fs-base); }
.ejercicio-pres-explicacion { background: var(--pf-g-soft); color: var(--pf-t1); padding: 14px; border-radius: var(--pf-r); margin-top: 12px; font-size: var(--pf-fs-base); }
.opcion-checkbox .opcion-checkbox-icon { margin-right: 8px; color: var(--pf-t4); }
.opcion-checkbox.opcion-correcta .opcion-checkbox-icon { color: var(--pf-ok); }
.classification-pres-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.classification-pres-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--pf-ln); border-radius: 0.625rem; margin-bottom: 0.375rem; background: var(--pf-sf); }
.classification-pres-item__main { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }
.classification-pres-text { flex: 1; min-width: 0; font-size: var(--pf-fs-lg); font-weight: 600; color: var(--pf-t1); line-height: 1.5; }
.classification-pres-text p { margin: 0; }
.classification-pres-marker { width: 1.5rem; height: 1.5rem; flex-shrink: 0; background: var(--pf-y); color: var(--pf-y-on); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); font-weight: 700; }
.classification-pres-respuesta { align-self: flex-start; margin-left: calc(1.5rem + 0.625rem); padding: 0.25rem 0.625rem; background: var(--pf-g7); color: var(--pf-on-g); border-radius: 0.375rem; font-size: var(--pf-fs-xs); font-weight: 600; }
.classification-pres-casilla { align-self: flex-start; margin-left: calc(1.5rem + 0.625rem); min-width: 8.5rem; height: 1.5rem; border-bottom: 2px solid var(--pf-b-ink); display: inline-block; }
.timeline-pres-items { background: var(--pf-sf2); padding: 12px; border-radius: var(--pf-r); }
.timeline-pres-item { display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--pf-ln); border-left: 4px solid var(--pf-b7); border-radius: var(--pf-r-sm); margin-bottom: 6px; background: var(--pf-sf); }
.timeline-pres-num { width: 26px; height: 26px; background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-b7); border-radius: var(--pf-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); font-weight: 700; margin-right: 10px; }
.timeline-pres-fecha { margin-left: auto; }
.timeline-pres-respuesta { background: var(--pf-ok-bg); padding: 16px; border-radius: var(--pf-r); margin-top: 12px; }
.timeline-correct-list { margin: 8px 0 0 20px; padding: 0; }
.word-bank-pres-container { background: var(--pf-ok-bg); padding: 14px; border-radius: var(--pf-r); border: 2px dashed var(--pf-ok); }
.word-bank-pres-words { display: flex; flex-wrap: wrap; gap: 8px; }
.tfm-lista--pres .tfm-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf); }
.tfm-lista--pres .tfm-num.opcion-marker { margin-right: 0; width: 1.75rem; height: 1.75rem; font-size: var(--pf-fs-xs); border-radius: var(--pf-r-lg); }
.tfm-lista--pres .tfm-texto { flex: 1; min-width: 0; }
.tfm-lista--pres .tfm-vf { display: flex; gap: 0.4rem; flex-shrink: 0; }
.tfm-lista--pres .opcion-item { padding: 0.3rem 0.45rem; min-width: 2.75rem; justify-content: center; }
.tfm-lista--pres .opcion-item .opcion-marker { margin-right: 0; }
  .ejercicio-presentacion { padding: 12px; margin-bottom: 12px; border-radius: var(--pf-r-lg); }
  .ejercicio-pres-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; }
  .ejercicio-pres-tipo { padding: 4px 8px; font-size: var(--pf-fs-2xs); }
  .ejercicio-pres-enunciado { font-size: var(--pf-fs-base); margin-bottom: 12px; }
  .opcion-pres-item, .matching-pres-item, .ordering-pres-item, .classification-pres-item, .timeline-pres-item { padding: 10px 12px; }
  .opcion-pres-marker, .ordering-pres-num, .ordering-pres-casilla, .matching-pres-casilla, .timeline-pres-num, .timeline-pres-casilla, .classification-pres-marker { width: 24px; height: 24px; font-size: var(--pf-fs-xs); margin-right: 8px; }
  .opcion-pres-text { font-size: var(--pf-fs-base); }
  .matching-pres-columns { grid-template-columns: 1fr; gap: 12px; }
  .ejercicio-pres-tf-opciones { flex-direction: column; gap: 8px; }
  .tf-pres-option { padding: 12px; }
  .ejercicio-pres-afirmacion { padding: 12px; font-size: var(--pf-fs-base); }
  .tfm-lista--pres .tfm-row { flex-wrap: wrap; }
  .tfm-lista--pres .tfm-texto { flex: 1 1 100%; }
  .tfm-lista--pres .tfm-vf { width: 100%; }
  .tfm-lista--pres .opcion-item { flex: 1; min-height: 2.75rem; }
  .fill-pres-text, .open-pres-pregunta { font-size: var(--pf-fs-base); line-height: 1.75; }
  .ordering-pres-items, .timeline-pres-items { padding: 10px; }
  .classification-pres-item, .timeline-pres-item { flex-direction: column; align-items: flex-start; }
  .classification-pres-respuesta, .classification-pres-casilla, .timeline-pres-fecha { margin-left: 0; margin-top: 8px; }
  .word-bank-pres-container { padding: 10px; }
  .math-pres-problema { font-size: var(--pf-fs-base); }
  .math-pres-datos, .math-pres-formulas, .fill-pres-respuestas, .matching-pres-respuestas, .ordering-pres-respuesta, .timeline-pres-respuesta, .math-pres-respuesta { padding: 10px; }
  .ejercicio-pres-pista, .ejercicio-pres-explicacion { padding: 10px; font-size: var(--pf-fs-md); margin-top: 12px; }
/* Textos de ayuda y avisos dentro de los ejercicios */
.ejercicio-ayuda { font-size: var(--pf-fs-md); color: var(--pf-t3); margin-bottom: 12px; }
.ejercicio-ico-ok { color: var(--pf-ok); }
.ejercicio-ico-crit { color: var(--pf-crit); }
.ejercicio-ico-warn, .ejercicio-unsupported > i, .ejercicio-pres-unsupported > i { color: var(--pf-warn); }
.ejercicio-unsupported, .ejercicio-pres-unsupported { color: var(--pf-t2); font-size: var(--pf-fs-base); }
/* Fichas pequeñas que antes eran «badge» de Bootstrap con color de Tailwind */
.classification-cat-badge { display: inline-flex; align-items: center; background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 600; font-size: var(--pf-fs-md); padding: 0.45rem 0.75rem; border-radius: 999px; }
.timeline-fecha, .timeline-pres-fecha { display: inline-block; background: var(--pf-sf3); color: var(--pf-t2); font-weight: 600; font-size: var(--pf-fs-xs); padding: 2px 8px; border-radius: var(--pf-r-sm); }
/* Selects y campos de los ejercicios: el color del sistema, también en oscuro */
.ejercicio-interactivo :is(.blank-input, .math-answer-input, .open-ended-textarea, .dropdown-select, .word-bank-select, .error-correction-input, .short-answer-input) { background-color: var(--pf-sf); color: var(--pf-t1); border-color: var(--pf-inl); border-width: 1.5px; }
.ejercicio-interactivo .classification-select { color: var(--pf-t1); border-color: var(--pf-inl); border-width: 1.5px; }
/* Estados que escribe ejercicios_interactivos.js (antes un <style> inyectado con hex) */
.ejercicio-interactivo { transition: border-color var(--pf-d-fast), background-color var(--pf-d-fast), box-shadow var(--pf-d-fast); }
.ejercicio-correcto { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; animation: pf-ej-pulso 0.6s var(--pf-e-out); }
.ejercicio-incorrecto { border-color: var(--pf-crit) !important; background: var(--pf-crit-bg) !important; animation: pf-ej-sacudida 0.4s var(--pf-e-io); }
.ejercicio-pendiente { border-color: var(--pf-b7) !important; background: var(--pf-info-bg) !important; }
.ejercicio-readonly .opcion-item, .ejercicio-readonly .matching-item, .ejercicio-readonly .classification-item { cursor: default; }
.respondido-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--pf-ok-bg); color: var(--pf-ok); font-size: var(--pf-fs-xs); font-weight: 600; }
.ejercicio-feedback .pf-msg { align-items: center; padding: 14px 16px; font-size: var(--pf-fs-base); }
.ejercicio-feedback .pf-msg > i { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pf-r); background: var(--pf-sf); }
.ejercicio-feedback-texto { min-width: 0; overflow-wrap: anywhere; }
.ejercicio-feedback-texto p { margin: 4px 0 0; }
.animate-fade-in { animation: pf-ej-entra 0.3s var(--pf-e-out); }
.current-words.text-green-600 { color: var(--pf-ok); }
.current-words.text-amber-600 { color: var(--pf-warn); }
.current-words.text-red-600 { color: var(--pf-crit); }
.input-correcto, .select-correcto { border-color: var(--pf-ok) !important; background-color: var(--pf-ok-bg) !important; }
.input-incorrecto, .select-incorrecto { border-color: var(--pf-crit) !important; background-color: var(--pf-crit-bg) !important; }
.opcion-checkbox.opcion-correcta { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.opcion-checkbox.opcion-incorrecta { border-color: var(--pf-crit) !important; background: var(--pf-crit-bg) !important; }
.opcion-checkbox.selected .opcion-checkbox-icon { color: var(--pf-ok) !important; }
.classification-item.clasificado-correcto { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.classification-item.clasificado-incorrecto { border-color: var(--pf-crit) !important; background: var(--pf-crit-bg) !important; }
.timeline-ghost { opacity: 0.4; }
.timeline-chosen { background: var(--pf-b-soft) !important; border-color: var(--pf-b7) !important; }
.timeline-item.timeline-correcto { border-color: var(--pf-ok) !important; border-left-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
.timeline-item.timeline-incorrecto { border-color: var(--pf-crit) !important; border-left-color: var(--pf-crit) !important; background: var(--pf-crit-bg) !important; }
.opcion-item.correct-answer { border-color: var(--pf-ok) !important; background: var(--pf-ok-bg) !important; }
@keyframes pf-ej-sacudida { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pf-ej-pulso { 0%, 100% { box-shadow: 0 0 0 0 var(--pf-ok); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes pf-ej-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .ejercicio-correcto, .ejercicio-incorrecto, .animate-fade-in { animation: none; }
  .opcion-item.interactive:hover { transform: none; }
}
@media (max-width: 768px) {
  .ejercicio-ayuda { margin-bottom: 10px; }
}


/* Lo que pisaba ejercicios_theme.css (ahora vacío): tema de los ejercicios y chrome de la evaluación de admisión */
.opcion-item.interactive:focus-within { border-color: var(--pf-b7); background: var(--pf-sf3); }
.opcion-item.interactive.selected { border-color: var(--pf-b7) !important; background: var(--pf-b-soft) !important; }
.opcion-pres-item:hover { border-color: var(--pf-b7); background: var(--pf-sf3); }
.ejercicio-tipo-badge { color: inherit; }
.ejercicio-numero { color: var(--pf-t3); }
.matching-marker.selected, .ordering-marker { background: var(--pf-b-soft); color: var(--pf-b-ink); }
.timeline-item.selected, .ejercicio-interactivo .math-input:focus { border-color: var(--pf-b7); }
.ejercicio-interactivo .fill-dropdown-select:focus { border-color: var(--pf-g7); box-shadow: 0 0 0 3px var(--pf-g-soft); }
.tfm-btn.opcion-item { transform: none; }
.tfm-btn.opcion-item.interactive:hover, .tfm-btn.opcion-item.interactive:focus-within { transform: none; }
.tfm-btn.opcion-item.selected { border-color: var(--pf-b7) !important; background: var(--pf-b-soft) !important; }
.tfm-justificacion-text { flex: 1 1 100%; margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-ok); }
:is(.evalad-kiosco-header, .evalad-instrumento-hero) { background: var(--pf-sf2); }
.evalad-kiosco-progress-fill { background: var(--pf-g7); }
.evalad-ejercicio-contenido-preview .opcion-marker { background: var(--pf-g7); }


/* =====================================================================
   C3 · El editor del estímulo y su planificación (PF-548)
   Piel de _tarea_estimulo_editor, _config_multimedia_estimulos, _seccion_estimulos_creacion,
   _planificacion_estimulos, _planificacion_videos_lista, _planificacion_video_recomendado y _plan_ficha_estimulo
   (antes un <style> en cada plantilla o clases de color de Tailwind). Los selectores funcionales (.estimulo-doc-*,
   .estimulo-yt-*, .estimulo-media-*, .estimulo-chip, [data-yt-tramo], [data-video-*]…) son los que leen
   tarea_estimulo_{upload,documento,youtube}.js y las páginas: no se renombran. Sin prefijo html[data-sistema]: las
   plantillas las incluyen páginas aún sin migrar (detalle de lección, planificación, admisión) que heredan la piel porque
   las fichas viven en :root. Prefijos: eedit- (editor), cfgmm- (configuración), estimulos-/estimulo-chip (crear),
   pest- (panel y espera de la planificación), pvid- (lista de videos), pvr- (recomendados), pficha (ficha del plan).
   ===================================================================== */

/* ---------- Editor del estímulo (dentro del modal «editar tarea») ---------- */
/* campo con su etiqueta: lo mismo que .pf-field, sin usar esa clase porque en una página migrada .pf-field vuelve a dibujar el
   recuadro de lo que lleva dentro y, con un .pf-inp, quedaba doble. Lo usan el editor, la configuración y los links de YouTube. */
:is(.eedit-campo, .cfgmm-campo) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:is(.eedit-campo, .cfgmm-campo) > label { display: flex; justify-content: space-between; gap: 8px; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }

.eedit { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: 1px solid var(--pf-ln); min-width: 0; color: var(--pf-t1); font-family: var(--pf-f-in); }
.eedit > * { min-width: 0; }
.eedit-head { display: flex; align-items: flex-start; gap: 12px; }
.eedit-head > .pf-mini-ic { width: 38px; height: 38px; border-radius: var(--pf-r); font-size: var(--pf-fs-xl); }
.eedit-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eedit-head-t > h5 { margin: 0; }
.eedit-head-t > .pf-help { margin: 0; }
.eedit-pills { display: flex; flex-wrap: wrap; column-gap: 6px; min-width: 0; }
.eedit-pills > .pf-pill { margin-top: 8px; }
.eedit-cuerpo { display: flex; flex-direction: column; gap: 22px; min-width: 0; transition: opacity var(--pf-d-fast) ease; }
/* sin «usa un estímulo» el resto se ve en segundo plano (sigue editable: importar un documento enciende el interruptor) */
.eedit:has(> .eedit-uso input:not(:checked)) > .eedit-cuerpo { opacity: .62; }

/* interruptores del editor: dicen qué son y se ven encendidos sin leer */
.eedit .pf-tg { transition: background-color var(--pf-d-fast) ease; }
.eedit-uso:has(input:checked) { background: var(--pf-g-soft); }
.eedit-tg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--pf-fs-base); line-height: 1.35; }
.eedit-tg-t > b { font-weight: 600; color: var(--pf-t1); }
.eedit-tg-t > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.eedit-uso:has(input:checked) .eedit-tg-t > small { color: var(--pf-g-soft-ink); }
.eedit-tg-solo { align-items: center; font-size: var(--pf-fs-base); line-height: 1.35; }
.eedit-tg-solo > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.eedit .pf-tg input:disabled + .pf-tg-sw, .eedit .pf-tg input:disabled ~ span:not(.pf-tg-sw) { opacity: .55; }
.eedit .pf-tg:has(input:disabled) { cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .eedit .pf-tg:not(.eedit-uso):hover, .eedit-uso:not(:has(input:checked)):hover { background: var(--pf-sf3); } }

.eedit-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; align-items: start; }
@media (min-width: 640px) { .eedit-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .eedit-par > .eedit-tg-solo { margin-top: 25px; } }
.eedit .pf-help { margin: 0; }
.eedit-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.eedit-sec-h { display: flex; flex-direction: column; gap: 2px; }
.eedit-sec > label.pf-lbl { display: block; }

/* las dos fuentes de importación: lado a lado cuando caben, apiladas en el celular */
.eedit-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; align-items: stretch; }
.eedit-fuente { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--pf-r-lg); border: 1.5px dashed var(--pf-inl); background: var(--pf-sf2); transition: border-color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
/* con un panel abierto las dos tarjetas pasan a una columna (el panel necesita el ancho) y la que trabaja deja de ser «zona de soltar» */
.eedit-fuentes:has(:is(.estimulo-doc-preview, .estimulo-yt-form, .estimulo-yt-preview):not(.hidden)) { grid-template-columns: minmax(0, 1fr); }
.eedit-fuente:has(:is(.estimulo-doc-preview, .estimulo-yt-form, .estimulo-yt-preview):not(.hidden)) { border-style: solid; border-color: var(--pf-ln); background: var(--pf-sf); box-shadow: var(--pf-sh1); }
.eedit-fuentes:has([data-yt-tramo]:not(.hidden)) > .estimulo-documento-upload { align-self: start; }
.eedit-fuente-cab { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
.eedit-fuente-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eedit-fuente-t > b { font-size: var(--pf-fs-base); font-weight: 650; color: var(--pf-t1); }
.eedit-fuente-t > small { font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t3); overflow-wrap: anywhere; }
.eedit-fuente > .pf-btn { flex: none; max-width: 100%; }

.eedit-panel { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; padding-top: 12px; border-top: 1px solid var(--pf-ln2); }
.eedit-panel.estimulo-yt-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.eedit-url { flex: 1 1 220px; }
.eedit-panel-t { margin: 0; font-size: var(--pf-fs-md); font-weight: 600; line-height: 1.4; color: var(--pf-t1); overflow-wrap: anywhere; }
.eedit-panel .pf-textarea { min-height: 160px; }
.eedit-panel .pf-msg { width: 100%; }
.eedit-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.eedit a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* advertencias de la extracción (las llena el JS con <li>) en tono warn */
.eedit-avisos { width: 100%; margin: 0; padding: 10px 12px 10px 30px; border-radius: var(--pf-r); background: var(--pf-warn-bg); color: var(--pf-warn); list-style: disc; font-size: var(--pf-fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.eedit-avisos > li + li { margin-top: 4px; }
/* mensajes de estado de los tres JS: aria-live; el color sale de data-estado */
.eedit-estado { align-self: stretch; padding: 8px 12px; border-radius: var(--pf-r); background: var(--pf-info-bg); color: var(--pf-info); font-size: var(--pf-fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.eedit-estado[data-estado="error"] { background: var(--pf-crit-bg); color: var(--pf-crit); }
.eedit-estado[data-estado="ok"] { background: var(--pf-ok-bg); color: var(--pf-ok); }
.eedit-estado:empty { display: none; }

/* tramo del video (aparece con el tipo «Video de YouTube») */
.eedit-tramo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; padding-top: 12px; border-top: 1px solid var(--pf-ln2); }
.eedit-tramo-t { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 8px; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t1); }
.eedit-tramo-t > i { color: var(--pf-t3); }
.eedit-hora { flex: 1 1 120px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.eedit-hora > .pf-inp { flex: 1; min-width: 0; }
.eedit-tramo > .pf-help { flex: 1 1 100%; }

/* editor Markdown (Toast UI): misma forma que los campos del sistema */
.eedit .markdown-editor-label { display: flex; align-items: center; gap: 8px; margin: 0; }
.eedit .markdown-editor-label > i { color: var(--pf-t3); font-size: var(--pf-fs-xs); }
.eedit .markdown-editor-label > span.pf-lbl { font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t3); }
.eedit .markdown-editor-container { border: 0; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); overflow: hidden; transition: box-shadow var(--pf-d-fast) ease; }
.eedit .markdown-editor-container:focus-within { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px var(--pf-g-soft); }
.eedit .markdown-editor-container .toastui-editor-defaultUI { border: 0; border-radius: 0; }
.eedit .markdown-editor-container .toastui-editor-toolbar { background: var(--pf-sf2); border-bottom: 1px solid var(--pf-ln); }
.eedit .markdown-editor-container .toastui-editor-md-tab-container { background: var(--pf-sf2); border-bottom: 1px solid var(--pf-ln); }
@media (hover: hover) and (pointer: fine) { .eedit .markdown-editor-container .toastui-editor-defaultUI-toolbar button:hover { background: var(--pf-sf3); } }

/* media actual y subida */
.eedit-media-actual { overflow: hidden; }
.eedit-media-vista { padding: 14px; min-width: 0; }
.eedit-media-actual > .pf-sheet-foot { background: var(--pf-sf2); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); }
.pf-btn.ghost.estimulo-media-delete-btn { color: var(--pf-crit); }
@media (hover: hover) and (pointer: fine) { .pf-btn.ghost.estimulo-media-delete-btn:hover { background: var(--pf-crit-bg); color: var(--pf-crit); } }
.eedit-drop { position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px; text-align: left; }
.eedit-drop-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eedit-drop-t > b { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t1); }
.eedit-drop-t > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.eedit-drop > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.eedit-drop:has(> input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.eedit-regen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--pf-ln2); }
.eedit-aviso > i { margin-top: 2px; }

/* entran de vez en cuando (abrir un panel, el tramo, un aviso de estado): opacidad + 4 px, sin tocar la página al cargar */
.eedit :is(.eedit-panel, .eedit-avisos, .eedit-estado, .eedit-tramo, .estimulo-yt-ayuda, .estimulo-doc-material-wrap) { transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); }
@starting-style { .eedit :is(.eedit-panel, .eedit-avisos, .eedit-estado, .eedit-tramo, .estimulo-yt-ayuda, .estimulo-doc-material-wrap) { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { @starting-style { .eedit :is(.eedit-panel, .eedit-avisos, .eedit-estado, .eedit-tramo, .estimulo-yt-ayuda, .estimulo-doc-material-wrap) { opacity: 0; transform: none; } } }

/* celular y pantallas táctiles: todo apilado y a 44 px */
@media (max-width: 639px) {
  .eedit-fuente > .pf-btn, .eedit-regen > .pf-btn { width: 100%; }
  .eedit-acciones > .pf-btn { flex: 1 1 auto; }
}
@media (pointer: coarse) {
  .eedit .pf-btn, .eedit .pf-btn.sm { min-height: 44px; }
  .eedit .pf-inp { height: 44px; }
  .eedit .pf-tg { min-height: 48px; }
}
/* ocultos por el JS (.hidden): al final, para ganarle a los display de arriba (.eedit-panel.estimulo-yt-form…) con o sin Tailwind */
.tarea-estimulo-editor .hidden { display: none; }

/* ---------- Configuración de estímulos multimedia (lecciones y admisión) ---------- */
.cfgmm { margin-bottom: 24px; color: var(--pf-t1); font-family: var(--pf-f-in); }
.cfgmm .pf-sheet-sec > header { gap: 12px; }
.cfgmm .pf-sheet-sec > header :is(h2, h3) { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; letter-spacing: -.01em; color: var(--pf-t1); }
.cfgmm-intro { margin: 0; max-width: 78ch; font-size: var(--pf-fs-md); line-height: 1.6; color: var(--pf-t2); }
.cfgmm code, .cfgmm-uso code { padding: 1px 6px; border-radius: 5px; background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); color: var(--pf-t1); font-family: var(--pf-f-mn); font-size: .9em; white-space: nowrap; }
.cfgmm a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cfgmm-estado { align-items: flex-start; }
.cfgmm-estado > i { margin-top: 3px; }
.cfgmm-estado-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfgmm-estado-c > p { margin: 0; }
.cfgmm-kv { max-width: 640px; }
.cfgmm-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.cfgmm-fila-t { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cfgmm-fila-l { margin: 0; font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); }
.cfgmm-fila .pf-help { margin: 0; }
.cfgmm-fila .pf-pill { margin-top: 4px; }
.cfgmm-fila .pf-pill > span { white-space: normal; }
/* el envoltorio que marca el onchange («active») no tiene caja: el input y su interruptor quedan como hijos directos de la etiqueta */
.cfgmm-env { display: contents; }
.cfgmm-tg { align-items: center; flex: none; min-height: 44px; padding: 10px 16px; font-size: var(--pf-fs-base); font-weight: 600; line-height: 1.3; transition: background-color var(--pf-d-fast) ease; }
.cfgmm-tg:has(input:checked) { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
.cfgmm-tg input:disabled + .pf-tg-sw { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .cfgmm-tg:not(:has(input:checked)):hover { background: var(--pf-sf3); } }
.cfgmm-herencia { align-items: flex-start; margin: 0; }
.cfgmm-herencia > i { margin-top: 3px; }

/* ajustes: dos columnas desde 820 px; un solo campo largo ocupa las dos */
.cfgmm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 24px; align-items: start; }
@media (min-width: 820px) { .cfgmm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cfgmm-grid > .cfgmm-ancho { grid-column: 1 / -1; } }
.cfgmm-grid > label.pf-tg { align-self: stretch; }
.cfgmm .pf-help.err { color: var(--pf-crit); }
#multimediaSettings { transition: opacity var(--pf-d-base) ease; }
#multimediaSettings.opacity-50 { opacity: .5; }
.cfgmm-ajustes .cfgmm-campo > :is(select, .select2-container) { width: 100%; }
.cfgmm-detalle3d { max-width: 640px; }
.cfgmm-detalle3d > select { width: 100%; }

.cfgmm-uso { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); }
.cfgmm-uso > .pf-lbl { margin: 0; display: flex; align-items: center; gap: 8px; }
.cfgmm-uso > .pf-lbl > i { color: var(--pf-m3-ink); }
.cfgmm-uso > ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; list-style: disc; font-size: var(--pf-fs-md); line-height: 1.55; color: var(--pf-t2); }
@media (max-width: 639px) { .cfgmm-fila > .cfgmm-tg { width: 100%; } .cfgmm .pf-sheet-sec { padding: 16px; } }

/* ---------- Estímulos al crear una lección o una tarea (_seccion_estimulos_creacion) ---------- */
.estimulos-card { color: var(--pf-t1); font-family: var(--pf-f-in); }
.estimulos-card .pf-sheet-sec > header { gap: 12px; }
.estimulos-card .pf-sheet-sec > header h3 { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; letter-spacing: -.01em; color: var(--pf-t1); }
.estimulos-opcional { font-size: var(--pf-fs-md); font-weight: 500; color: var(--pf-t3); }
.estimulos-intro { margin: 0; max-width: 78ch; font-size: var(--pf-fs-md); line-height: 1.6; color: var(--pf-t2); }
.estimulos-grupos { display: flex; flex-direction: column; gap: 20px; }
.estimulos-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.estimulos-grupo__titulo { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 0; }
.estimulos-grupo__titulo > i { width: 16px; text-align: center; color: var(--pf-t3); }
.estimulos-grupo--video .estimulos-grupo__titulo > i { color: var(--pf-m3-ink); }
.estimulos-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* cada estímulo es una pastilla que se marca: elegida = verde suave con su check; la de video, en el tono 3 */
.estimulo-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.estimulo-chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.estimulo-chip > span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: var(--pf-r-sm); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t2); font: 500 var(--pf-fs-md)/1.25 var(--pf-f-in); transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.estimulo-chip:active > span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .estimulo-chip:hover > input:not(:checked) + span { box-shadow: inset 0 0 0 1px var(--pf-inl-h); color: var(--pf-t1); } }
.estimulo-chip > input:focus-visible + span { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.estimulo-chip > input:checked + span { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--pf-g7); }
.estimulo-chip > input:checked + span::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; font-size: var(--pf-fs-2xs); }
.estimulo-chip--video > input:checked + span { background: var(--pf-m3-bg); color: var(--pf-m3-ink); box-shadow: inset 0 0 0 1px var(--pf-y); }

/* links de YouTube: entran al marcar «Video de YouTube» (de vez en cuando: opacidad + 4 px) */
.estimulos-video { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); }
.estimulos-video > label { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.estimulos-video > .pf-help { margin: 0; }
.estimulos-video textarea { width: 100%; min-height: 76px; margin: 0; padding: 10px 12px; border: 0; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t1); font: var(--pf-fs-base)/1.5 var(--pf-f-in); outline: none; resize: vertical; transition: box-shadow var(--pf-d-fast) ease; }
.estimulos-video textarea:focus { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px var(--pf-g-soft); }
.estimulos-video textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
@starting-style { .estimulos-video { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { @starting-style { .estimulos-video { opacity: 0; transform: none; } } }
.estimulos-card ul.errorlist { margin: 0; padding: 0; list-style: none; }
.estimulos-card .pf-help.err { color: var(--pf-crit); }
@media (pointer: coarse) { .estimulo-chip > span { min-height: 44px; } .estimulos-video textarea { font-size: 16px; } }
@media (max-width: 639px) { .estimulos-card .pf-sheet-sec { padding: 16px; } }
.estimulos-card .estimulos-video.hidden { display: none; }

/* ---------- Planificación: panel de estímulos, espera de videos, lista de videos, recomendados y ficha ---------- */
/* panel lateral y pantalla de espera */
.pest-cab { display: flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--pf-f-in); }
.pest-cab > .pf-mini-ic { width: 40px; height: 40px; border-radius: var(--pf-r); font-size: var(--pf-fs-xl); }
.pest-cab-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pest-cab-t > h4 { margin: 0; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--pf-t1); }
.pest-cab-t > p { margin: 0; font-size: var(--pf-fs-md); line-height: 1.5; color: var(--pf-t2); }
.pest-cab--card { padding: 16px 20px; border-bottom: 1px solid var(--pf-ln2); }
.pest-cab--card .pest-cab-t > p { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.pest-cuerpo { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; color: var(--pf-t1); font-family: var(--pf-f-in); }
.pest-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pest-sec > .pf-lbl { display: flex; align-items: center; gap: 6px; margin: 0; }
.pest-sec > .pf-lbl > i { color: var(--pf-m3-ink); }
.pest-prefs { display: flex; flex-wrap: wrap; gap: 6px; }
.pest-cuerpo .pf-hint { line-height: 1.5; }
.pest-cuerpo > .pf-btn { height: auto; min-height: 38px; padding-block: 8px; white-space: normal; text-align: center; line-height: 1.3; }
.pest-espera { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; background: var(--pf-sf2); border-bottom: 1px solid var(--pf-ln); font-family: var(--pf-f-in); }
@media (min-width: 640px) { .pest-espera { padding: 22px 24px; } }
.pest-cab > .pf-mini-ic { align-self: flex-start; }
.pest-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
.pest-act > .pf-help { flex: 1 1 240px; margin: 0; }
@media (max-width: 639px) { .pest-act > .pf-btn { width: 100%; } .pest-cuerpo, .pest-cab--card { padding-left: 16px; padding-right: 16px; } }

/* lista de videos: cada video es una fila con dato clave dentro de su tarjeta */
.pvid-lista { display: flex; flex-direction: column; gap: 10px; }
.pvid { overflow: hidden; }
.pvid.falta { border-color: var(--pf-y); }
.pvid .pf-row.rica { padding: 12px 14px; column-gap: 10px; align-items: start; }
.pvid-ref { height: 24px; min-width: 32px; justify-content: center; font-variant-numeric: tabular-nums; }
.pvid .pf-rica-t { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: var(--pf-fs-md); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pvid .pf-rica-t:hover { color: var(--pf-g-ink); text-decoration: underline; text-underline-offset: 3px; } }
.pvid-canal { margin: 0; font-size: var(--pf-fs-sm); line-height: 1.35; color: var(--pf-t3); overflow-wrap: anywhere; }
.pvid .pf-rica-m { align-items: flex-start; }
.pvid .pf-rica-m > .pf-pill { height: auto; min-height: 24px; padding-block: 3px; border-radius: var(--pf-r-sm); line-height: 1.3; white-space: normal; align-items: flex-start; text-align: left; }
.pvid .pf-rica-m > .pf-pill > i { margin-top: 2px; }
.pvid-nota { flex: 1 1 100%; font-size: var(--pf-fs-xs); line-height: 1.45; color: var(--pf-t3); }
.pvid .pf-rica-acc { align-self: start; }
.pvid [data-accion="quitar"] { color: var(--pf-t3); }
@media (hover: hover) and (pointer: fine) { .pvid [data-accion="quitar"]:hover { background: var(--pf-crit-bg); color: var(--pf-crit); } }
.pvid-pie { display: flex; padding: 0 14px 12px; }
.pvid-pie > .pf-btn > i { font-size: var(--pf-fs-2xs); }
.pvid-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--pf-ln2); }
.pvid-panel .pf-help { margin: 0; line-height: 1.5; }
.pvid-panel .pf-textarea { min-height: 120px; }
.pvid-aviso { display: flex; gap: 6px; margin: 0; font-size: var(--pf-fs-xs); line-height: 1.45; color: var(--pf-warn); }
.pvid-aviso > i { margin-top: 2px; }
.pvid-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pvid-agregar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pvid-agregar > .pvid-url { flex: 1 1 200px; }
.pvid-agregar > .pf-btn { flex: none; }
.pvid-error { margin: 8px 0 0; }
.pvid-agregar.hidden, .pvid-error.hidden { display: none; }
@media (pointer: coarse) { .pvid-agregar .pf-inp { height: 44px; } .pvid .pf-btn.sm { min-height: 44px; } }
@media (max-width: 639px) { .pvid-agregar > .pf-btn { width: 100%; } }

/* videos recomendados en un mensaje del chat */
.pvr { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); color: var(--pf-t1); font-family: var(--pf-f-in); }
.pvr-cab { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pvr-cab-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pvr-t { margin: 0; font-size: var(--pf-fs-base); font-weight: 650; line-height: 1.35; color: var(--pf-t1); overflow-wrap: anywhere; }
.pvr .pf-help { margin: 0; line-height: 1.45; }
/* una fila por video: miniatura 16:9 a la izquierda y, al lado, título, canal, por qué y el botón (sin huecos en el ancho del chat) */
.pvr .pvr-grid { display: flex; flex-direction: column; gap: 10px; }
.pvr-card { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; }
.pvr-card:has(> .pvr-mini) { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); }
.pvr-mini { align-self: start; display: block; aspect-ratio: 16 / 9; margin: 10px 0 10px 10px; border-radius: var(--pf-r-sm); background: var(--pf-g9); overflow: hidden; }
.pvr-mini > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pvr-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px 12px; }
.pvr-titulo { font-size: var(--pf-fs-md); font-weight: 600; line-height: 1.35; color: var(--pf-t1); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .pvr-titulo:hover { color: var(--pf-g-ink); text-decoration: underline; text-underline-offset: 3px; } }
.pvr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-t3); overflow-wrap: anywhere; }
.pvr-meta > .pf-pill { height: 20px; font-size: var(--pf-fs-2xs); }
.pvr-porque { margin: 0; font-size: var(--pf-fs-sm); line-height: 1.45; color: var(--pf-t2); overflow-wrap: anywhere; }
.pvr-cuerpo > .pf-btn { margin-top: 4px; align-self: flex-start; }
.pvr-elegido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pvr-elegido > .pf-pill { height: auto; min-height: 24px; padding-block: 3px; white-space: normal; line-height: 1.3; }
.pvr-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pvr-pie > .pf-help { flex: 1 1 200px; }
.pvr-descartado { opacity: .75; }
.pvr > .pf-help.err { color: var(--pf-crit); }
.pvr > .pf-help.err.hidden { display: none; }
@media (pointer: coarse) { .pvr .pf-btn.sm { min-height: 44px; } }

/* ficha del estímulo de una tarea del plan: pares tema / detalle, compactos */
.pficha { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); color: var(--pf-t1); }
.pficha > .pf-lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: var(--pf-fs-xs); }
.pficha-kv { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.pficha-kv dt, .pficha-kv dd { padding: 5px 0; font-size: var(--pf-fs-sm); line-height: 1.4; }
.pficha-kv dd { font-weight: 500; }
.pficha-motivo { display: flex; gap: 6px; margin-top: 6px; font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t2); }
.pficha-motivo > i { margin-top: 2px; color: var(--pf-t3); }
.pficha-aviso { margin-top: 6px; padding: 8px 10px; font-size: var(--pf-fs-sm); line-height: 1.4; }
.pficha-aviso > i { margin-top: 2px; }

/* =====================================================================
   C2 · Estímulos (PF-548): lo que el estudiante lee, mira y escucha
   Fragmentos de templates/lms/lecciones/partials/: _tarea_estimulo, _estimulo_media_block (reproductor de audio,
   figura, enlace), _estimulo_video_block, _estimulo_cast_multivoz, _leccion_portada_presentacion y editorial/_bloque_*.
   Antes: estimulo_audio_player.css y leccion_editorial.css (ahora vacíos, se conservan porque varias páginas los
   enlazan) y el <style> de cada plantilla.
   Sin prefijo html[data-sistema]: los incluyen páginas aún sin migrar (lección, resolver, presentación, admisión PF-554)
   que heredan así la piel nueva (las fichas viven en :root). Selectores funcionales (los lee estimulo_audio_player.js,
   canvas_anotaciones.js, utils_leccion_editorial.py, services_lecciones_pdf.py): no se renombran.
   Lectura primero: texto t1 a 68 caracteres como máximo, interlineado 1.65, tablas con su propio desplazamiento.
   Movimiento: lo de todos los días solo cambia de color (160 ms); lo que aparece de vez en cuando (el contenido de un
   <details>) sube con opacidad + 6 px en ≤ 220 ms; solo se mueven en bucle las barras del reproductor mientras suena
   y el indicador de «Generando…». Nada se anima al cargar la página.
   ===================================================================== */

/* ---------- Tarjeta «Material de apoyo» ---------- */
.tarea-estimulo-card { --est-acento: var(--pf-inl); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; margin: 16px 0; padding: 18px 20px 20px 26px; border-radius: var(--pf-r-lg); background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-ln), var(--pf-sh1); }
/* la modalidad se dice con la pastilla y con una línea fina del tono al borde (arriba en el celular), sin pintar fondos */
.tarea-estimulo-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--est-acento); }
.tarea-estimulo-card[data-tono="2"] { --est-acento: var(--pf-m2-ink); }
.tarea-estimulo-card[data-tono="3"] { --est-acento: var(--pf-m3-ink); }
.tarea-estimulo-card[data-tono="4"] { --est-acento: var(--pf-m4-ink); }
.tarea-estimulo-card[data-tono="5"] { --est-acento: var(--pf-m5-ink); }
.estimulo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.estimulo-cab-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.estimulo-cab-info > .pf-pill { height: 26px; padding: 0 10px; font-size: var(--pf-fs-xs); }
.estimulo-tipo-cat { font-weight: 500; }
.estimulo-origen > .truncate { max-width: 100%; }
/* avisos dentro de la tarjeta: la pieza .pf-msg; el texto largo (un nombre de archivo) se parte en vez de ensanchar la tarjeta */
.tarea-estimulo-card > .pf-msg { margin: 0; overflow-wrap: anywhere; }
.tarea-estimulo-card > .estimulo-media-pending { margin: 0; }
.estimulo-contenido-render .estimulo-media-pending { margin: 0 0 .9em; }

/* ---------- Texto del estímulo: lectura cómoda ---------- */
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) { overflow-wrap: break-word; }
.tarea-estimulo-card .estimulo-contenido-render { max-width: 68ch; min-width: 0; font-size: 16px; line-height: 1.65; color: var(--pf-t1); }
@media (min-width: 768px) { .tarea-estimulo-card .estimulo-contenido-render { font-size: var(--pf-fs-lg); } }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(h1, h2, h3, h4, h5) { margin: 1.5em 0 .5em; padding: 0; border: 0; color: var(--pf-t1); font-family: var(--pf-f-in); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(h1, h2) { font-size: var(--pf-fs-2xl); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) h3 { font-size: var(--pf-fs-xl); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(h4, h5) { font-size: 1em; color: var(--pf-t2); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) > :first-child { margin-top: 0; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) > :last-child { margin-bottom: 0; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) p { margin: 0 0 .9em; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(ul, ol) { margin: 0 0 .9em; padding: 0 0 0 1.4em; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) ul { list-style: disc; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) ol { list-style: decimal; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) li { margin: 0 0 .35em; padding-left: .2em; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) li::marker { color: var(--pf-t3); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(strong, b) { color: inherit; font-weight: 650; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) em { color: inherit; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) a { color: var(--pf-g-ink); text-decoration: underline; text-underline-offset: 3px; transition: color var(--pf-d-fast) ease; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) hr { height: 1px; margin: 1.6em 0; border: 0; background: var(--pf-ln); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) blockquote { margin: 1em 0; padding: 10px 16px; border: 0; border-left: 3px solid var(--pf-b7); border-radius: 0 var(--pf-r) var(--pf-r) 0; background: var(--pf-sf2); color: var(--pf-t2); font-style: normal; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) blockquote > :last-child { margin-bottom: 0; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) code { padding: .1em .4em; border: 1px solid var(--pf-ln); border-radius: 6px; background: var(--pf-sf2); color: var(--pf-t1); font: .9em var(--pf-f-mn); }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) pre { margin: 1em 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); font-size: .92em; line-height: 1.55; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
/* tablas: dentro de su propio desplazamiento horizontal, con bordes ln */
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) table { display: block; width: fit-content; max-width: 100%; margin: 1em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); font-size: .94em; line-height: 1.45; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) :is(th, td) { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--pf-ln2); background: transparent; color: var(--pf-t1); text-align: left; vertical-align: top; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) th { background: var(--pf-sf2); font-weight: 650; white-space: nowrap; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) tr:last-child > :is(th, td) { border-bottom: 0; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) tr:hover { background: transparent; }
/* imágenes: nunca desbordan; el fondo es papel también en oscuro (una imagen con transparencia sobre gris oscuro no se lee) */
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) img:not(.pdf-math-svg) { display: block; max-width: 100%; height: auto; margin: 1em 0; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: #fff; /* papel fijo (única excepción a «sin hex»): la imagen del estímulo puede traer fondo transparente */ box-shadow: none; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) figure { margin: 1.2em 0; text-align: left; }
:is(.estimulo-contenido-render, .leccion-bloque-body, .leccion-markdown-fallback):is(.markdown-content, .latex-content) figure img { margin: 0; }

.leccion-markdown-fallback.markdown-content { color: var(--pf-t1); font-size: 16px; line-height: 1.65; }
@media (min-width: 768px) { .leccion-markdown-fallback.markdown-content { font-size: var(--pf-fs-lg); } }

/* ---------- Plegables del estímulo: transcript del video, transcript del audio y dirección de voz ---------- */
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0; padding: 0 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t2); font: 600 var(--pf-fs-md)/1.3 var(--pf-f-in); list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary::-webkit-details-marker { display: none; }
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary::marker { content: ""; }
/* el chevron rota 180° al abrir (200 ms) */
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--pf-e-out); }
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion)[open] > summary::after { transform: translateY(2px) rotate(225deg); }
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary:active { transform: scale(.985); }
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { :is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary:hover { background: var(--pf-sf2); color: var(--pf-t1); } }
/* el contenido entra con opacidad y 6 px de recorrido, solo cuando se abre */
:is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion)[open] > :not(summary) { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }
.estimulo-det-cuerpo { padding: 14px 2px 2px; }
.estimulo-video-transcript .estimulo-contenido-render { max-width: 68ch; font-size: var(--pf-fs-base); }

/* ---------- Etiqueta, figura y enlace de un recurso ---------- */
.estimulo-media-block { min-width: 0; margin: 0; }
.estimulo-media-etiqueta { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.estimulo-media-block figure.leccion-figura-rail { max-width: 44rem; margin: 0; }
.estimulo-figura-img { display: block; width: 100%; max-height: 24rem; object-fit: contain; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: #fff; /* papel fijo: la imagen puede traer fondo transparente y en oscuro no se lee sobre gris */ }
.estimulo-media-block figcaption { display: flex; gap: 8px; margin: 8px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.leccion-figura-num { color: var(--pf-g-ink); font-weight: 700; white-space: nowrap; }
.estimulo-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--pf-g-ink); font: 600 var(--pf-fs-md)/1.3 var(--pf-f-in); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--pf-d-fast) ease; overflow-wrap: anywhere; }
.estimulo-enlace > i { font-size: .8em; }
@media (hover: hover) and (pointer: fine) { .estimulo-enlace:hover { color: var(--pf-t1); } }
@media (pointer: coarse) { .estimulo-enlace { min-height: 44px; } }
/* una figura o un audio dentro del texto del estímulo ([[FIGURA:n]], [[AUDIO:n]]) */
.estimulo-contenido-render .estimulo-media-block { max-width: 100%; margin: 1.25em 0; }
.estimulo-contenido-render .estimulo-media-block figure.leccion-figura-rail { margin: 0; }
.estimulo-contenido-render figure:not(.leccion-figura-rail) { margin: 1.25em auto; text-align: center; }

/* ---------- Video de YouTube ---------- */
.estimulo-video-block { min-width: 0; margin: 0; }
.estimulo-video-tramo { margin: 0 0 10px; }
.estimulo-video-tramo > .pf-pill { height: 26px; padding: 0 10px; }
.estimulo-video-caja { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--pf-r-lg); background: var(--pf-sf3); }
.estimulo-video-caja > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.estimulo-video-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; margin: 10px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.estimulo-video-pie > i { align-self: center; color: var(--pf-t3); }
.estimulo-video-titulo { flex: 1 1 12rem; min-width: 0; }

/* ---------- Reproductor de audio (estimulo_audio_player.js recorre estas clases) ---------- */
.estimulo-audio-player { position: relative; width: 100%; max-width: 36rem; margin: 0; padding: 16px 18px 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-ln), var(--pf-sh1); transition: box-shadow var(--pf-d-fast) ease; }
.tarea-estimulo-card .estimulo-audio-player { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); }
:is(.estimulo-audio-player, .tarea-estimulo-card .estimulo-audio-player).is-playing { box-shadow: inset 0 0 0 1px var(--pf-g7), var(--pf-sh1); }
.estimulo-audio-player__header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-bottom: 8px; }
.estimulo-audio-player__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--pf-m5-bg); color: var(--pf-m5-ink); font-size: 18px; }
.estimulo-audio-player__meta { flex: 1 1 8rem; min-width: 0; }
.estimulo-audio-player__title { margin: 0; color: var(--pf-t1); font: 650 var(--pf-fs-lg)/1.3 var(--pf-f-in); }
.estimulo-audio-player__subtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 2px 0 0; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.estimulo-audio-player__hint { margin: 6px 0 0; color: var(--pf-t3); font-size: var(--pf-fs-sm); line-height: 1.45; }
.estimulo-audio-player__hint[data-estado="error"] { color: var(--pf-crit); font-weight: 600; }
.estimulo-audio-player__badge { flex: none; align-self: flex-start; background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
/* barras de onda: quietas; se mueven solo mientras suena (.is-playing) */
.estimulo-audio-player__wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; margin: 0 0 6px; padding: 0 4px; }
.estimulo-audio-player__wave > span { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--pf-m5-ink); opacity: .35; transform: scaleY(var(--b, .4)); transition: opacity var(--pf-d-base) ease; }
.estimulo-audio-player.is-playing .estimulo-audio-player__wave > span { opacity: 1; animation: pf-eap-onda var(--d, 1s) linear var(--dl, 0s) infinite; }
.estimulo-audio-player__wave > span:nth-child(1) { --b: .3; --d: .9s; --dl: -.1s; }
.estimulo-audio-player__wave > span:nth-child(2) { --b: .5; --d: 1.1s; --dl: -.4s; }
.estimulo-audio-player__wave > span:nth-child(3) { --b: .7; --d: .8s; --dl: -.7s; }
.estimulo-audio-player__wave > span:nth-child(4) { --b: .45; --d: 1.2s; --dl: -.2s; }
.estimulo-audio-player__wave > span:nth-child(5) { --b: .85; --d: .95s; --dl: -.5s; }
.estimulo-audio-player__wave > span:nth-child(6) { --b: .6; --d: 1.05s; --dl: -.8s; }
.estimulo-audio-player__wave > span:nth-child(7) { --b: .95; --d: .85s; --dl: -.3s; }
.estimulo-audio-player__wave > span:nth-child(8) { --b: .55; --d: 1.15s; --dl: -.6s; }
.estimulo-audio-player__wave > span:nth-child(9) { --b: .75; --d: .9s; --dl: -.9s; }
.estimulo-audio-player__wave > span:nth-child(10) { --b: .4; --d: 1.1s; --dl: -.15s; }
.estimulo-audio-player__wave > span:nth-child(11) { --b: .65; --d: .8s; --dl: -.45s; }
.estimulo-audio-player__wave > span:nth-child(12) { --b: .35; --d: 1s; --dl: -.75s; }
@keyframes pf-eap-onda { 0%, 100% { transform: scaleY(var(--b, .4)); } 25% { transform: scaleY(calc(var(--b, .4) * .5 + .12)); } 50% { transform: scaleY(1); } 75% { transform: scaleY(calc(var(--b, .4) * .6 + .2)); } }
.estimulo-audio-player__controls { display: flex; align-items: center; gap: 14px; }
.estimulo-audio-player__play { flex: none; width: 48px; height: 48px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pf-g7); color: var(--pf-on-g); box-shadow: var(--pf-sh1); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.estimulo-audio-player__play:active { transform: scale(.96); }
.estimulo-audio-player__play:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .estimulo-audio-player__play:hover { background: var(--pf-g6); } }
.estimulo-audio-player__play > i { margin-left: 2px; font-size: 16px; }
.estimulo-audio-player.is-playing .estimulo-audio-player__play > i { margin-left: 0; animation: pf-eap-icono var(--pf-d-press) var(--pf-e-out); }
@keyframes pf-eap-icono { from { opacity: 0; transform: scale(.8); } }
.estimulo-audio-player__track-wrap { flex: 1; min-width: 0; }
/* barra de posición: pista ln, parte recorrida g7 (el JS escribe --v en el propio input) y área táctil de 44 px */
.estimulo-audio-player .estimulo-audio-player__seek:not(.pf-inp *):not(.pf-textarea) { --pct: var(--v, var(--eap-progress, 0%)); -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: -10px 0 -12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; cursor: pointer; }
.estimulo-audio-player .estimulo-audio-player__seek:not(.pf-inp *):not(.pf-textarea):focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; border-radius: 22px; }
.estimulo-audio-player__seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--pf-g7) var(--pct), var(--pf-inl) var(--pct)); }
.estimulo-audio-player__seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--pf-inl); }
.estimulo-audio-player__seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--pf-g7); }
.estimulo-audio-player__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--pf-sf); box-shadow: 0 0 0 2px var(--pf-g7), var(--pf-sh1); transition: background-color var(--pf-d-fast) ease; }
.estimulo-audio-player__seek::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--pf-sf); box-shadow: 0 0 0 2px var(--pf-g7), var(--pf-sh1); }
.estimulo-audio-player__seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--pf-g7), 0 0 0 5px var(--pf-g-soft); }
.estimulo-audio-player__seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--pf-g7), 0 0 0 5px var(--pf-g-soft); }
@media (hover: hover) and (pointer: fine) { .estimulo-audio-player__seek:hover::-webkit-slider-thumb { background: var(--pf-g-soft); } .estimulo-audio-player__seek:hover::-moz-range-thumb { background: var(--pf-g-soft); } }
.estimulo-audio-player__times { display: flex; justify-content: space-between; color: var(--pf-t3); font-size: var(--pf-fs-xs); font-variant-numeric: tabular-nums; }
.estimulo-audio-player__native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.estimulo-audio-player__transcript { margin-top: 12px; }
.estimulo-audio-player__transcript-body { margin: 10px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  /* el ícono y el título comparten línea con todo el ancho; la pastilla «Listening» baja debajo del título */
  .estimulo-audio-player__meta { flex: 1 1 calc(100% - 54px); }
  .estimulo-audio-player__badge { margin-left: 52px; }
  .estimulo-audio-player { padding: 14px 14px 12px; }
  .estimulo-audio-player__icon { width: 40px; height: 40px; font-size: 16px; }
  .estimulo-audio-player__controls { gap: 12px; }
  .estimulo-audio-player__wave { gap: 3px; }
}

/* ---------- Panel de voces del diálogo (editor del docente) ---------- */
.estimulo-cast { margin: 12px 0; }
.estimulo-cast > .pf-sheet-sec > header { flex-wrap: wrap; gap: 6px 10px; }
.estimulo-cast > .pf-sheet-sec > header > h3 { flex: 1 1 9rem; min-width: 0; }
.estimulo-cast > .pf-sheet-sec > header > .pf-pill { margin-left: 0; }
.estimulo-cast-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.estimulo-cast-fila { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--pf-ln2); }
.estimulo-cast-fila:first-child { padding-top: 0; border-top: 0; }
.estimulo-cast-fila > .pf-av { margin-top: 1px; }
.estimulo-cast-datos { flex: 1; min-width: 0; }
.estimulo-cast-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--pf-fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.estimulo-cast-genero, .estimulo-cast-flecha { color: var(--pf-t3); }
.estimulo-cast-voz { padding: 2px 8px; border-radius: 999px; background: var(--pf-sf3); color: var(--pf-t1); font: 600 var(--pf-fs-xs) var(--pf-f-mn); }
.estimulo-cast-interpretacion { margin: 2px 0 0; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.45; }
.estimulo-cast-direccion { margin: 2px 0 0; }
.estimulo-cast-replicas { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: replica; }
.estimulo-cast-replicas > li { position: relative; padding-left: 32px; counter-increment: replica; font-size: var(--pf-fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.estimulo-cast-replicas > li::before { content: counter(replica); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--pf-sf3); color: var(--pf-t2); font: 600 var(--pf-fs-xs)/22px var(--pf-f-in); font-variant-numeric: tabular-nums; text-align: center; }
.estimulo-cast-hablante { font-weight: 650; }
.estimulo-cast-resumen, .estimulo-cast-nota { color: var(--pf-t2); }
.estimulo-cast-nota { font-style: italic; }
.estimulo-cast-aviso { margin: 12px 0; }
.estimulo-cast-aviso p { margin: 0 0 4px; }
.estimulo-cast-aviso p:last-child { margin-bottom: 0; }
.estimulo-cast-titulo { font-weight: 650; }

/* ---------- Portada de la presentación ---------- */
/* la portada es una lámina más: conserva el relleno, el radio y la sombra de .pres-slide de la página; aquí solo cambia el papel y el alto */
.leccion-portada-slide.pres-slide { container-type: inline-size; background: var(--pf-sf); color: var(--pf-t1); min-height: auto; overflow: visible; }
.leccion-portada-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.leccion-portada-columns { display: contents; }
.leccion-portada-masthead-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.leccion-portada-materia, .leccion-portada-nivel-unidad { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-t2); }
.leccion-portada-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--pf-b7); }
.leccion-portada-rule { height: 1px; background: var(--pf-ln); }
.leccion-portada-titleband { padding: 0; }
.leccion-portada-unidad-line { margin: 0 0 8px; color: var(--pf-b-ink); }
.leccion-portada-slide .leccion-portada-titulo { margin: 0; padding: 0; border: 0; color: var(--pf-t1); font-family: var(--pf-f-lb); font-size: clamp(28px, 7vw, 36px); font-size: clamp(28px, 5.5cqi, 48px); font-weight: 700; letter-spacing: -.01em; line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; }
.leccion-portada-subtitulo { margin: 10px 0 14px; color: var(--pf-t2); font-size: var(--pf-fs-xl); line-height: 1.4; }
.leccion-portada-accent { width: 48px; height: 5px; border-radius: 3px; background: var(--pf-y); }
.leccion-portada-figura-frame { overflow: hidden; width: 100%; aspect-ratio: 16 / 9; max-height: 340px; border-radius: var(--pf-r-lg); background: var(--pf-sf3); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.leccion-portada-figura-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.leccion-portada-figura-placeholder { width: 100%; aspect-ratio: 16 / 9; max-height: 340px; border: 1.5px dashed var(--pf-inl); border-radius: var(--pf-r-lg); background: var(--pf-sf2); }
.leccion-portada-figura-caption { margin: 8px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.5; }
.leccion-portada-figura-caption > strong { color: var(--pf-g-ink); }
.leccion-portada-objetivos.pf-sheet { padding: 18px 20px 20px; }
.leccion-portada-objetivos-titulo { margin: 0 0 12px; color: var(--pf-t1); font-family: var(--pf-f-lb); font-size: var(--pf-fs-2xl); font-weight: 650; line-height: 1.2; }
.leccion-portada-slide .leccion-portada-objetivos-lista { color: var(--pf-t1); font-size: var(--pf-fs-lg); line-height: 1.5; }
.leccion-portada-slide .leccion-portada-objetivos-lista ul { margin: 0; padding: 0; list-style: none; }
.leccion-portada-slide .leccion-portada-objetivos-lista li { position: relative; margin: 0 0 10px; padding: 0 0 0 32px; color: var(--pf-t1); }
.leccion-portada-slide .leccion-portada-objetivos-lista li:last-child { margin-bottom: 0; }
.leccion-portada-slide .leccion-portada-objetivos-lista li::before { content: "\2713"; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font: 700 12px/22px var(--pf-f-in); text-align: center; }
.leccion-portada-slide .leccion-portada-objetivos-lista .leccion-markdown-fallback { font-size: inherit; line-height: inherit; color: inherit; }
.leccion-portada-col-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.leccion-portada-vistazo-titulo { margin: 0 0 10px; color: var(--pf-t2); }
.leccion-vistazo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.leccion-vistazo-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 14px 8px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); text-align: center; }
.leccion-vistazo-num { display: block; color: var(--pf-t1); font: 700 34px/1 var(--pf-f-lb); font-variant-numeric: tabular-nums; }
.leccion-vistazo-label { display: block; margin-top: 6px; color: var(--pf-t2); font: 600 var(--pf-fs-xs)/1.25 var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.leccion-portada-pedagogia { align-items: flex-start; }
.leccion-portada-pedagogia-titulo { margin: 0 0 4px; color: inherit; }
.leccion-portada-pedagogia p { margin: 0; font-size: var(--pf-fs-sm); line-height: 1.5; }
@container (min-width: 440px) and (max-width: 639px) { .leccion-vistazo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 640px) {
  .leccion-portada-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "mast mast" "title title" "fig side" "obj side"; column-gap: 32px; }
  .leccion-portada-masthead { grid-area: mast; }
  .leccion-portada-titleband { grid-area: title; }
  .leccion-portada-figura { grid-area: fig; }
  .leccion-portada-col-objetivos { grid-area: obj; min-width: 0; }
  .leccion-portada-col-sidebar { grid-area: side; }
  .leccion-portada-col-sidebar--full { grid-area: 4 / 1 / 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .leccion-portada-inner:has(.leccion-portada-col-sidebar--full) .leccion-portada-figura { grid-area: 3 / 1 / 4 / -1; }
}

/* ---------- Lección editorial (PF-548): recuadros de libro ---------- */
.leccion-editorial-document { container-type: inline-size; color: var(--pf-t1); font-family: var(--pf-f-in); line-height: 1.65; }
:is(section, aside).leccion-bloque { --blq-bg: var(--pf-sf2); --blq-ink: var(--pf-t2); --blq-ic: var(--pf-sf); position: relative; margin: 0 0 16px; padding: 0; overflow: visible; border: 0; border-radius: var(--pf-r-lg); background: var(--blq-bg); color: var(--pf-t1); box-shadow: inset 4px 0 0 var(--blq-ink); }
:is(section, aside).leccion-bloque-lectura { --blq-bg: var(--pf-sf); --blq-ink: var(--pf-g-ink); --blq-ic: var(--pf-g-soft); box-shadow: inset 0 0 0 1px var(--pf-ln), inset 0 3px 0 var(--blq-ink); }
:is(section, aside).leccion-bloque-lectura:is(.leccion-seccion-accent-2, .leccion-seccion-accent-4) { --blq-ink: var(--pf-b-ink); --blq-ic: var(--pf-b-soft); }
:is(section, aside).leccion-bloque-sabias-que { --blq-bg: var(--pf-m3-bg); --blq-ink: var(--pf-m3-ink); }
:is(section, aside).leccion-bloque-vocabulario { --blq-bg: var(--pf-m2-bg); --blq-ink: var(--pf-m2-ink); }
:is(section, aside).leccion-bloque-recuerda { --blq-bg: var(--pf-m1-bg); --blq-ink: var(--pf-m1-ink); }
:is(section, aside).leccion-bloque-linea-tiempo { --blq-bg: var(--pf-m5-bg); --blq-ink: var(--pf-m5-ink); }
:is(section, aside).leccion-bloque-cierre { --blq-bg: var(--pf-m4-bg); --blq-ink: var(--pf-m4-ink); }
:is(section, aside).leccion-bloque > .leccion-bloque-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; background: transparent; color: var(--blq-ink); font-family: var(--pf-f-lb); font-size: var(--pf-fs-sm); letter-spacing: .12em; text-transform: uppercase; }
:is(section, aside).leccion-bloque-lectura > .leccion-bloque-header { padding-top: 16px; }
.leccion-bloque-header > .leccion-bloque-icon { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--blq-ic); color: var(--blq-ink); opacity: 1; }
.leccion-bloque-header > .leccion-bloque-icon > svg { width: 16px; height: 16px; }
.leccion-bloque-header > .leccion-bloque-label.pf-lbl { min-width: 0; color: var(--blq-ink); font-size: var(--pf-fs-sm); line-height: 1.3; }
:is(section, aside).leccion-bloque > .leccion-bloque-body { padding: 10px 20px 18px; border: 0; background: transparent; color: var(--pf-t1); font-size: 15px; line-height: 1.65; }
:is(section, aside).leccion-bloque-lectura > .leccion-bloque-body { padding: 10px 22px 22px; font-size: 16px; }
@media (min-width: 768px) {
  :is(section, aside).leccion-bloque > .leccion-bloque-body { font-size: var(--pf-fs-base); }
  :is(section, aside).leccion-bloque-lectura > .leccion-bloque-body { font-size: var(--pf-fs-lg); }
}
/* en la presentación (se proyecta en clase) el texto toma el tamaño grande de la lámina, como antes */
.pres-slide :is(section, aside).leccion-bloque > .leccion-bloque-body { font-size: inherit; }
.pres-slide .leccion-spread-rail :is(section, aside).leccion-bloque > .leccion-bloque-body { font-size: .95em; }
/* en los bloques de lectura y de cierre el texto no pasa de 68 caracteres; tablas, figuras y fórmulas sí usan el ancho */
:is(.leccion-bloque-lectura, .leccion-bloque-cierre) > .leccion-bloque-body > :is(p, ul, ol, h3, h4, blockquote) { max-width: 68ch; }
.leccion-bloque-body h3.leccion-pregunta-guia { margin: 1.3em 0 .5em; color: var(--pf-t1); font-size: var(--pf-fs-xl); font-weight: 400; line-height: 1.35; }
.leccion-bloque-body h3.leccion-pregunta-guia > strong { font-weight: 700; }
.leccion-bloque-body h3.leccion-pregunta-guia:first-child { margin-top: 0; }
:is(.leccion-bloque-recuerda, .leccion-bloque-para-pensar) h3 + p { font-weight: normal; }
/* letra capital */
.leccion-dropcap-letter { float: left; margin: .02em .14em 0 0; padding-right: .04em; color: var(--pf-g-ink); font-family: var(--pf-f-lb); font-size: 2.9em; font-weight: 700; line-height: .92; }
/* línea de tiempo: una línea vertical, puntos y años en negrita tabular */
.leccion-linea-tiempo-lista { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.leccion-linea-tiempo-lista::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--blq-ink); opacity: .35; }
.leccion-linea-tiempo-item { position: relative; display: flex; gap: 12px; padding: 6px 0; border: 0; }
.leccion-linea-tiempo-item::before { content: ""; position: absolute; left: -24px; top: .95em; width: 10px; height: 10px; border-radius: 50%; background: var(--blq-ink); box-shadow: 0 0 0 3px var(--blq-bg); }
.leccion-linea-tiempo-anio { flex: none; min-width: 3.5rem; color: var(--blq-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.leccion-linea-tiempo-texto { min-width: 0; overflow-wrap: anywhere; }
/* autoevaluación: un círculo de check por criterio */
.leccion-autoevaluacion-lista { margin: 0; padding: 10px 20px 18px; list-style: none; }
.leccion-autoevaluacion-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: var(--pf-fs-base); line-height: 1.5; }
.leccion-autoevaluacion-check { flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; background: var(--pf-sf); box-shadow: inset 0 0 0 1.5px var(--blq-ink); color: var(--blq-ink); font: 700 12px var(--pf-f-in); }
.leccion-autoevaluacion-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* lectura ancho completo + recuadros debajo, o lectura + columna lateral */
.leccion-editorial-stacked { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; }
.leccion-editorial-stacked > .leccion-bloque { margin: 0; }
.leccion-editorial-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 20px; }
.leccion-spread-main { min-width: 0; }
.leccion-spread-main .leccion-bloque { margin: 0; }
.leccion-spread-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.leccion-spread-rail .leccion-bloque { margin: 0; }
.leccion-spread-figuras figure, .leccion-spread-figuras .estimulo-media-block figure { margin: 0; text-align: left; }
.leccion-spread-figuras img { display: block; width: auto; max-width: 100%; height: auto; max-height: 240px; object-fit: contain; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: #fff; /* papel fijo (ver la regla de las figuras) */ }
.leccion-spread-figuras figcaption { display: flex; gap: 8px; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--pf-g7); color: var(--pf-t2); font-size: var(--pf-fs-sm); font-style: normal; line-height: 1.45; }
@media (min-width: 640px) {
  .leccion-spread-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .leccion-spread-rail > .leccion-spread-figuras { grid-column: 1 / -1; }
}
/* la columna lateral al lado de la lectura, solo desde 1024 px y si el texto tiene ancho para las dos */
@media (min-width: 1024px) {
  @container (min-width: 700px) {
    .leccion-editorial-spread { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px 22px; }
    .leccion-spread-rail { grid-template-columns: minmax(0, 1fr); }
  }
}
/* fórmulas (KaTeX): una sola capa visible (.katex-html); el MathML se oculta para que no salgan dobles */
.katex .katex-mathml, .katex math, .latex-content .katex .katex-mathml, .markdown-content .katex .katex-mathml, .pres-slide-content .katex .katex-mathml, .estimulo-contenido-render .katex .katex-mathml,
.latex-content .katex math, .markdown-content .katex math, .pres-slide-content .katex math, .estimulo-contenido-render .katex math { display: none !important; clip: auto !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.katex .katex-html { display: inline-block; }
.latex-content .katex, .markdown-content .katex, .pres-slide-content .katex { font-size: .95rem; line-height: normal; vertical-align: -.08em; text-indent: 0; }
.latex-content .katex-display, .markdown-content .katex-display, .pres-slide-content .katex-display { display: block; max-width: 100%; margin: .85em 0; padding: .65em .85em; overflow-x: auto; overflow-y: hidden; border-radius: var(--pf-r-sm); background: var(--pf-sf2); line-height: normal; text-align: center; }
.latex-content .katex-display > .katex, .markdown-content .katex-display > .katex, .pres-slide-content .katex-display > .katex { display: inline-block; font-size: 1.28rem; text-align: center; }
@media (min-width: 768px) {
  .latex-content .katex, .markdown-content .katex, .pres-slide-content .katex { font-size: 1rem; }
  .latex-content .katex-display > .katex, .markdown-content .katex-display > .katex, .pres-slide-content .katex-display > .katex { font-size: 1.38rem; }
}
/* fórmulas como imagen SVG (el cuadernillo embebido): no reciben el estilo de figura */
.leccion-editorial-document img.pdf-math-svg, .pres-slide-content img.pdf-math-svg, .markdown-content img.pdf-math-svg { width: auto; max-width: none; height: auto !important; min-height: 1em; max-height: 1.35em; margin: 0 .08em; padding: 0; border: 0; border-radius: 0; box-shadow: none; vertical-align: -.12em; object-fit: contain; }
.leccion-editorial-document .pdf-math-display img.pdf-math-svg, .pres-slide-content .pdf-math-display img.pdf-math-svg, .markdown-content .pdf-math-display img.pdf-math-svg { display: block; min-height: 2.75em; max-height: none; margin: .45em auto; }
.pdf-frac { display: inline-flex; flex-direction: column; align-items: center; margin: 0 .28em; line-height: 1.1; vertical-align: middle; }
.pdf-frac-num { padding: 0 .4em .12em; border-bottom: 1.5px solid currentColor; font-size: .9em; }
.pdf-frac-den { padding: .12em .4em 0; font-size: .9em; }
.pdf-math-html { font-size: 1.05em; }
.pdf-nobr { white-space: nowrap; }

/* ---------- reducir movimiento (estímulos): sin desplazamientos, escalas ni bucles; quedan los fundidos y los colores ---------- */
@media (prefers-reduced-motion: reduce) {
  .estimulo-audio-player.is-playing .estimulo-audio-player__wave > span, .estimulo-audio-player.is-playing .estimulo-audio-player__play > i { animation: none; }
  .estimulo-audio-player__play:active, :is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary:active { transform: none; }
  :is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion)[open] > :not(summary) { animation-name: pf-fade; }
  :is(.estimulo-video-transcript, .estimulo-audio-player__transcript, .estimulo-cast-direccion) > summary::after { transition: none; }
}

/* ---------- celular: la línea de acento de la tarjeta pasa arriba y todo se apila ---------- */
@media (max-width: 639px) {
  .tarea-estimulo-card { gap: 12px; padding: 20px 16px 16px; }
  .tarea-estimulo-card::before { left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .estimulo-cab { align-items: flex-start; }
  :is(section, aside).leccion-bloque > .leccion-bloque-header { padding: 12px 16px 0; }
  :is(section, aside).leccion-bloque > .leccion-bloque-body, :is(section, aside).leccion-bloque-lectura > .leccion-bloque-body { padding: 8px 16px 16px; }
  .leccion-autoevaluacion-lista { padding: 8px 16px 16px; }
}

/* =====================================================================
   C4b · Ejercicios bloqueados por criterios, revisión de ejercicios y error de generación (PF-548)
   Reemplaza a static/lms/css/criterios_bloqueo_ejercicios.css y revision_ejercicios.css (quedan vacíos con un comentario;
   la plantilla ya no los enlaza). Sin prefijo html[data-sistema]: los fragmentos los incluyen la lección y el instrumento
   de admisión, que aún no están migrados; las fichas viven en :root y el modo oscuro llega con ellas.
   Quién lee estas clases: revision_ejercicios.js pinta .revision-item* y .revision-modal__*, y alterna .hidden y
   .ejercicio-card--resaltado; leccion_detail.html y evalad_instrumento_detail.js envían .js-ejercicio-regenerar-form.
   La tarjeta (C4a) usa .ejercicio-card--bloqueado, .ejercicio-bloqueado-badge, .ejercicio-override-badge y el velo de
   .ejercicio-regenerando-overlay: su piel de estado vive aquí porque venía en criterios_bloqueo_ejercicios.css.
   Movimiento: nada se anima al cargar ni al repasar la lista (el modal repinta cada 4 s mientras regenera); solo entran
   el modal, los avisos y los plegables cuando alguien los abre.
   ===================================================================== */

/* ---------- Aviso al inicio de la lección y de la admisión ---------- */
.ejercicios-bloqueados-alert { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--pf-r-lg); background: var(--pf-warn-bg); color: var(--pf-warn); text-align: left; }
.ejercicios-bloqueados-alert__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pf-y); color: var(--pf-y-on); font-size: var(--pf-fs-lg); }
.ejercicios-bloqueados-alert__title { margin: 0 0 4px; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--pf-t1); }
.ejercicios-bloqueados-alert__text { margin: 0; max-width: 68ch; font-size: var(--pf-fs-md); line-height: 1.5; color: var(--pf-t2); }
/* con la cifra grande y el botón a la derecha (a lo ancho, debajo en el celular) */
.revision-ejercicios-alert { align-items: center; flex-wrap: wrap; }
.revision-ejercicios-alert__body { flex: 1 1 200px; min-width: 0; }
.revision-ejercicios-alert .ejercicios-bloqueados-alert__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.revision-ejercicios-alert__cifra { font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1; color: var(--pf-warn); }
.revision-ejercicios-alert__btn { flex: none; }
/* `hidden` de Tailwind pierde contra el display:flex del aviso por orden de carga */
.revision-ejercicios-alert.hidden, .revision-modal .hidden { display: none !important; }

/* ---------- Modal «Revisar ejercicios» ---------- */
.modal-content.revision-modal { max-width: 860px; width: 100%; max-height: 90vh; max-height: min(90dvh, 880px); background: var(--pf-sf); color: var(--pf-t1); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh3); }
/* la página no trae animación de modal: entra con la del sistema (opacidad y 6 px), una sola vez al abrir */
.modal-overlay.active .modal-content.revision-modal { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }
/* con cualquier modal de página abierto el botón del chat se esconde (como con las capas del sistema, html.pf-capa): si no, tapa
   «Cerrar» o «Guardar» en el iPad */
html:has(.modal-overlay.active) :is(#chatbot-button, .chatbot-button) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.revision-modal .modal-header { align-items: flex-start; gap: 12px; padding: 16px 20px; background: var(--pf-sf); border-bottom: 1px solid var(--pf-ln2); }
.revision-modal__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pf-warn-bg); color: var(--pf-warn); font-size: var(--pf-fs-xl); }
.revision-modal__titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; line-height: 1.25; color: var(--pf-t1); }
.revision-modal__badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0; border-radius: 7px; background: var(--pf-cnt-bg); color: var(--pf-cnt-ink); font: 700 12px var(--pf-f-in); }
.revision-modal__sub { margin: 2px 0 0; font-size: var(--pf-fs-md); line-height: 1.4; color: var(--pf-t3); }
.revision-modal .modal-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -8px 0 0; padding: 0; border-radius: var(--pf-r); font-size: 26px; line-height: 1; color: var(--pf-t3); -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.revision-modal .modal-close:active { transform: scale(.97); }
.revision-modal .modal-close:focus-visible, .revision-item__btn:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .revision-modal .modal-close:hover { background: var(--pf-sf2); color: var(--pf-t1); } }
/* el cuerpo se desplaza por dentro: la cabecera y el pie quedan fijos */
.revision-modal .revision-modal__body { flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--pf-pg); }
.revision-modal__instrucciones .pf-textarea { min-height: 64px; }
.revision-modal__aviso { padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-warn-bg); color: var(--pf-warn); font-size: var(--pf-fs-md); line-height: 1.45; transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); }
.revision-modal__aviso--ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.revision-modal__aviso--error { background: var(--pf-crit-bg); color: var(--pf-crit); }
@starting-style { .revision-modal__aviso { opacity: 0; transform: translateY(4px); } }
.revision-modal__lista { display: flex; flex-direction: column; gap: 12px; }
.revision-modal__cargando, .revision-modal__vacio { margin: 0; padding: 24px 16px; text-align: center; font-size: var(--pf-fs-base); color: var(--pf-t3); }
.revision-modal__vacio { border-radius: var(--pf-r-lg); background: var(--pf-ok-bg); color: var(--pf-ok); font-weight: 600; }

/* una fila por ejercicio: ruta, título, motivos, detalles y las dos acciones; el acento lateral dice el estado */
.revision-item { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 14px 20px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: var(--pf-sh1); }
.revision-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pf-crit); }
.revision-item--regenerando::before { background: var(--pf-info); }
.revision-item--ok { opacity: .85; }
.revision-item--ok::before { background: var(--pf-ok); }
.revision-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.revision-item__head > div { flex: 1 1 auto; min-width: 0; }
.revision-item__ruta { margin: 0; font: 600 var(--pf-fs-xs)/1.35 var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-t3); }
.revision-item__titulo { margin: 2px 0 0; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--pf-t1); overflow-wrap: anywhere; }
/* pastillas por tipo de motivo */
.revision-item__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.revision-item__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; border-radius: 999px; background: var(--pf-crit-bg); color: var(--pf-crit); font: 600 var(--pf-fs-xs)/1.25 var(--pf-f-in); }
.revision-item__tag > i { flex: none; }
.revision-item__tag--sin_validar { background: var(--pf-warn-bg); color: var(--pf-warn); }
.revision-item__tag--clave_discrepante { background: var(--pf-info-bg); color: var(--pf-info); }
.revision-item__tag--estimulo_incoherente { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.revision-item__tag--vacio { background: var(--pf-neu-bg); color: var(--pf-neu); }
.revision-item__detalles { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t2); }
.revision-item__detalles li { position: relative; padding-left: 14px; overflow-wrap: anywhere; }
.revision-item__detalles li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--pf-t4); }
.revision-item__enunciado { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; margin: 0; padding: 10px 12px; overflow: hidden; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 3px 0 0 var(--pf-inl); font-size: var(--pf-fs-md); line-height: 1.5; color: var(--pf-t1); white-space: pre-wrap; overflow-wrap: anywhere; }
.revision-item__estado, .revision-item__error { margin: 0; padding: 8px 12px; border-radius: var(--pf-r); font-size: var(--pf-fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.revision-item__estado { display: flex; align-items: center; gap: 8px; background: var(--pf-info-bg); color: var(--pf-info); font-weight: 600; }
.revision-item__estado--ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.revision-item__error { background: var(--pf-crit-bg); color: var(--pf-crit); }
.revision-item__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.revision-item__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--pf-r-sm); background: var(--pf-sf2); color: var(--pf-t2); font: 600 var(--pf-fs-md)/1.2 var(--pf-f-in); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.revision-item__btn:active:not(:disabled) { transform: scale(.97); }
.revision-item__btn:disabled { opacity: .55; cursor: not-allowed; }
.revision-item__btn--aceptar { background: var(--pf-ok-bg); color: var(--pf-ok); }
.revision-item__btn--regenerar { background: var(--pf-info-bg); color: var(--pf-info); }
@media (hover: hover) and (pointer: fine) {
  .revision-item__btn:not(:disabled):hover { background: var(--pf-sf3); color: var(--pf-t1); }
  .revision-item__btn--aceptar:not(:disabled):hover { background: var(--pf-ok-bg); color: var(--pf-ok); box-shadow: inset 0 0 0 1px var(--pf-ok); }
  .revision-item__btn--regenerar:not(:disabled):hover { background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-info); }
}

/* pie: estado a la izquierda, acciones en lote y cerrar a la derecha (apilado y de 44 px en el celular) */
.revision-modal .revision-modal__footer { align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--pf-sf); border-top: 1px solid var(--pf-ln2); }
.revision-modal__estado { flex: 1 1 auto; font-size: var(--pf-fs-md); font-weight: 500; color: var(--pf-t3); }
.revision-modal__acciones-lote { display: flex; flex-wrap: wrap; gap: 8px; }

/* «Ver en la lección»: el anillo del sistema se desvanece sobre la tarjeta (solo color, no se mueve nada) */
.ejercicio-card--resaltado { outline: 3px solid transparent; outline-offset: 3px; animation: ej-resaltar 2400ms var(--pf-e-out); }
@keyframes ej-resaltar { 0%, 40% { outline-color: var(--pf-g7); background-color: var(--pf-g-soft); } }

/* ---------- Estado de la tarjeta: bloqueada, con override, regenerándose (la tarjeta la arma C4a) ---------- */
/* el acento crítico lateral (arriba en el celular) dice que está bloqueada sin abrir nada; lleva !important porque la tarjeta aún trae la utilidad shadow-sm de Tailwind, que se inyecta después */
.ejercicio-card--bloqueado, .evalad-instrumento-ejercicio--bloqueado { box-shadow: inset 4px 0 0 var(--pf-crit), var(--pf-sh1) !important; }
.ejercicio-bloqueado-badge, .ejercicio-override-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; border-radius: 12px; font: 600 var(--pf-fs-xs)/1.25 var(--pf-f-in); }
.ejercicio-bloqueado-badge { white-space: nowrap; background: var(--pf-crit-bg); color: var(--pf-crit); }
.ejercicio-override-badge { background: var(--pf-ok-bg); color: var(--pf-ok); }
/* quién y por qué lo aceptó (la tarjeta ya trae la pastilla): un aviso suave, sin segunda pastilla */
.ejercicio-override-aviso { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--pf-r); background: var(--pf-ok-bg); color: var(--pf-ok); }
.ejercicio-override-aviso .ejercicio-override-badge { min-height: 0; padding: 0; border-radius: 0; background: transparent; line-height: 1.4; }
.ejercicio-override-aviso__motivo { margin: 0; font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t2); overflow-wrap: anywhere; }
.evalad-instrumento-ejercicio--regenerando, .ejercicio-card--regenerando { position: relative; }
.ejercicio-regenerando-overlay { position: absolute; inset: 0; z-index: 5; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: inherit; color: var(--pf-info); font-size: var(--pf-fs-base); font-weight: 600; text-align: center; }
.ejercicio-regenerando-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pf-sf); opacity: .9; }
.ejercicio-regenerando-overlay > i { font-size: var(--pf-fs-2xl); }

/* ---------- Panel de criterios del ejercicio bloqueado ---------- */
.ejercicio-bloqueado-panel { --bp-bg: var(--pf-crit-bg); --bp-ink: var(--pf-crit); display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; margin-top: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); text-align: left; }
.ejercicio-bloqueado-panel[data-motivo="clave_discrepante"] { --bp-bg: var(--pf-info-bg); --bp-ink: var(--pf-info); }
.ejercicio-bloqueado-panel[data-motivo="estimulo_incoherente"] { --bp-bg: var(--pf-warn-bg); --bp-ink: var(--pf-warn); }
.ejercicio-bloqueado-panel > * { flex: 1 1 100%; min-width: 0; }
.ejercicio-bloqueado-panel > form { flex: 1 1 280px; }
.ejercicio-bloqueado-panel__cab { display: flex; align-items: flex-start; gap: 12px; }
.ejercicio-bloqueado-panel__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pf-r); background: var(--bp-bg); color: var(--bp-ink); font-size: var(--pf-fs-lg); }
.ejercicio-bloqueado-panel__cab-texto { flex: 1 1 auto; min-width: 0; }
.ejercicio-bloqueado-panel__title { margin: 0 0 4px; overflow-wrap: anywhere; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--bp-ink); }
.ejercicio-bloqueado-panel__hint { margin: 0; max-width: 68ch; overflow-wrap: anywhere; font-size: var(--pf-fs-md); line-height: 1.55; color: var(--pf-t2); }
.ejercicio-bloqueado-panel__hint strong { font-weight: 650; color: var(--pf-t1); }
/* criterios: un renglón por motivo, con el ícono del estado (no cumple, a revisar) */
.ejercicio-bloqueado-panel__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ejercicio-bloqueado-panel__list > li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t1); }
.ejercicio-bloqueado-panel__list > li > i { flex: none; width: 16px; margin-top: 2px; text-align: center; color: var(--pf-crit); }
.ejercicio-bloqueado-panel__list > li[data-estado="aviso"] > i { color: var(--pf-warn); }
.ejercicio-bloqueado-panel__list > li[data-estado="ok"] > i { color: var(--pf-ok); }
.ejercicio-bloqueado-panel__list > li > span { min-width: 0; overflow-wrap: anywhere; }
.ejercicio-bloqueado-panel__list strong { font-weight: 650; }
/* los dos caminos, lado a lado cuando caben: regenerar (recomendado) o aceptar tal cual */
.ejercicio-bloqueado-panel__regenerar, .ejercicio-bloqueado-panel__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.ejercicio-bloqueado-panel__paso { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 var(--pf-fs-xs)/1.3 var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-t3); }
.ejercicio-bloqueado-panel__paso > i { flex: none; color: var(--pf-t3); }
.ejercicio-bloqueado-panel__motivo { flex: 1 1 auto; min-width: 0; }
.ejercicio-bloqueado-panel .pf-textarea { min-height: 64px; }
.ejercicio-bloqueado-panel__btn-regenerar, .ejercicio-bloqueado-panel__btn-aceptar { align-self: flex-start; }
.ejercicio-bloqueado-panel__nota { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t3); }
.ejercicio-bloqueado-panel__nota > i { flex: none; }

/* ---------- Vista previa del borrador bloqueado ---------- */
.ejercicio-bloqueado-preview { padding: 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t1); }
.ejercicio-bloqueado-preview__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 var(--pf-fs-xs)/1.3 var(--pf-f-lb); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-t3); }
.ejercicio-bloqueado-preview__hint { margin: 0 0 12px; font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t3); }
.ejercicio-bloqueado-preview .ejercicio-presentacion { margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; }
.ejercicio-bloqueado-preview .ejercicio-pres-header { display: none; }
.ejercicio-bloqueado-preview__enunciado { max-width: 68ch; margin-top: 8px; font-size: var(--pf-fs-base); line-height: 1.6; color: var(--pf-t1); }
.ejercicio-bloqueado-preview__explicacion { margin-top: 12px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-ok-bg); color: var(--pf-ok); font-size: var(--pf-fs-md); line-height: 1.5; }

/* ---------- Error de generación (solo Developer) ---------- */
.leccion-error { align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--pf-r-lg); text-align: left; }
.leccion-error__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pf-crit); color: var(--pf-sf); font-size: var(--pf-fs-base); }
.leccion-error--info .leccion-error__ic { background: var(--pf-info); }
.leccion-error__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.leccion-error__titulo { margin: 0; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; }
.leccion-error__texto { margin: 0; font-size: var(--pf-fs-base); line-height: 1.5; color: var(--pf-t1); white-space: pre-wrap; overflow-wrap: anywhere; }
.leccion-error__criterios { padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-warn-bg); color: var(--pf-warn); }
.leccion-error--info .leccion-error__criterios { background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.leccion-error__criterios-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pf-fs-md); font-weight: 650; }
.leccion-error__criterios-texto { margin: 4px 0 0; font-size: var(--pf-fs-sm); }
.leccion-error__criterios-lista, .leccion-error__eventos { margin: 6px 0 0; padding-left: 18px; font-size: var(--pf-fs-sm); line-height: 1.5; }
.leccion-error__eventos { font-family: var(--pf-f-mn); font-size: var(--pf-fs-xs); overflow-wrap: anywhere; }
/* los plegables: el mismo botón de ancho completo que los del estímulo, con chevron que rota 180° */
.leccion-error__plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0; padding: 0 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t1); font: 600 var(--pf-fs-md)/1.3 var(--pf-f-in); list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.leccion-error__plegable--chico > summary { min-height: 36px; margin-top: 8px; }
.leccion-error__plegable > summary::-webkit-details-marker { display: none; }
.leccion-error__plegable > summary::marker { content: ""; }
.leccion-error__plegable > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--pf-e-out); }
.leccion-error__plegable[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.leccion-error__plegable > summary:active { transform: scale(.985); }
.leccion-error__plegable > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .leccion-error__plegable > summary:hover { background: var(--pf-sf2); } }
/* el contenido entra al abrir (no al cargar, aunque el log venga abierto); donde el navegador no lo soporta, simplemente aparece */
.leccion-error__plegable::details-content { opacity: 0; transform: translateY(-4px); transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out), content-visibility var(--pf-d-base) allow-discrete; }
.leccion-error__plegable[open]::details-content { opacity: 1; transform: none; }
.leccion-error__log { max-height: 24rem; margin: 8px 0 0; padding: 12px; overflow: auto; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t1); font: var(--pf-fs-xs)/1.55 var(--pf-f-mn); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }

/* ---------- Pantallas táctiles (celular y iPad): zonas de 44 px ---------- */
@media (pointer: coarse) {
  .revision-item__btn { min-height: 44px; }
  .revision-modal .modal-close { width: 44px; height: 44px; }
  .leccion-error__plegable--chico > summary { min-height: 44px; }
}

/* ---------- Celular: casi a pantalla completa, todo apilado y botones de 44 px ---------- */
@media (max-width: 639px) {
  .ejercicios-bloqueados-alert { padding: 14px; gap: 12px; }
  .revision-ejercicios-alert__btn { width: 100%; min-height: 44px; }
  #modal-revision-ejercicios { padding: 8px; }
  .modal-content.revision-modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .revision-modal .modal-header { padding: 14px 16px; }
  .revision-modal .revision-modal__body { padding: 12px 12px 16px; }
  .revision-item { padding: 12px 12px 12px 16px; }
  .revision-item__head { flex-direction: column; gap: 10px; }
  .revision-item__head > .revision-item__btn { align-self: flex-start; min-height: 44px; }
  .revision-item__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revision-item__btn { min-height: 44px; white-space: normal; text-align: center; }
  .revision-modal .revision-modal__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .revision-modal__estado { text-align: center; }
  .revision-modal__acciones-lote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revision-modal .revision-modal__footer .pf-btn { min-height: 44px; white-space: normal; }
  .ejercicio-bloqueado-panel { padding: 12px; }
  .ejercicio-bloqueado-panel > form { flex-basis: 100%; }
  .ejercicio-bloqueado-panel .pf-btn { width: 100%; min-height: 44px; }
  .ejercicio-bloqueado-panel .pf-inp { height: 44px; }
  .leccion-error { padding: 12px; }
  .ejercicio-card--bloqueado, .evalad-instrumento-ejercicio--bloqueado { box-shadow: inset 0 4px 0 var(--pf-crit), var(--pf-sh1) !important; }
}
@media (max-width: 479px) {
  .revision-item__acciones, .revision-modal__acciones-lote { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reducir movimiento: sin desplazamientos ni escalas; quedan los fundidos y los colores ---------- */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.active .modal-content.revision-modal { animation-name: pf-fade; }
  .revision-modal__aviso { transform: none; }
  @starting-style { .revision-modal__aviso { transform: none; } }
  .revision-modal .modal-close:active, .revision-item__btn:active:not(:disabled), .leccion-error__plegable > summary:active { transform: none; }
  .leccion-error__plegable > summary::after { transition: none; }
  .leccion-error__plegable::details-content { transform: none; }
}

/* =====================================================================
   C4a · La tarjeta y la ventana de detalle del ejercicio, el banco y la imagen del ejercicio (PF-548)
   Piel de _ejercicio_card, _ejercicio_detalle_modal, _ejercicio_reuso_banco_panel, banco/_boton_guardar,
   banco/_buscador_embed y _ejercicio_imagen_editor (antes clases de color de Tailwind y el <style> de la página), más
   las pastillas .mini-badge*. Sin prefijo html[data-sistema]: los fragmentos también los incluyen páginas aún sin migrar
   (detalle de lección, instrumento de admisión), que heredan la piel porque las fichas viven en :root. Prefijos: ejc-
   (tarjeta), ejm- (modal de detalle), ejb- (buscador del banco), ejimg- (imagen del ejercicio).
   Lo que lee el JS de leccion_detail son ganchos data-ej-* (tipo, info, dificultad, puntos, enunciado, badges, pista,
   explicacion, preview): ninguna clase de aquí es un gancho. La tarjeta se vuelve a pintar desde el servidor con outerHTML.
   Las reglas de .ejercicio-card--bloqueado / --regenerando / --resaltado, .ejercicio-bloqueado-badge y el panel de criterios
   son de C4b: aquí solo se pone el acento lateral y el resaltado de la tarjeta, con más especificidad para no pelear con ellas.
   Anotado para D7 (la página): leccion_detail aún trae su <style> con .modal-*, .action-*, .btn-ghost, .form-input y los
   .mini-badge de los encabezados de sección y tarea; el modal de detalle y la tarjeta ya no dependen de ellos.
   ===================================================================== */

/* ---------- Pastillas .mini-badge (tarjetas, modal de detalle, banco/detalle y leccion_detail) ----------
   Mismos nombres de clase de siempre. La base vale para toda página; en la tarjeta y el modal de detalle (contexto) las
   pastillas toman la medida exacta de .pf-pill, aunque leccion_detail las defina de nuevo en su <style>, que va después. */
.mini-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 var(--pf-fs-xs)/1.3 var(--pf-f-in); white-space: nowrap; background: var(--pf-neu-bg); color: var(--pf-neu); }
.mini-badge > i[class*="fa-"] { margin-right: 0; }
.mini-badge-success { background: var(--pf-ok-bg); color: var(--pf-ok); }
.mini-badge-warning { background: var(--pf-warn-bg); color: var(--pf-warn); }
.mini-badge-info { background: var(--pf-info-bg); color: var(--pf-info); }
.mini-badge-danger { background: var(--pf-crit-bg); color: var(--pf-crit); }
.mini-badge-gray { background: var(--pf-neu-bg); color: var(--pf-neu); }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge { height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--pf-fs-xs); font-weight: 600; line-height: 1; }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge-success { background: var(--pf-ok-bg); color: var(--pf-ok); }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge-warning { background: var(--pf-warn-bg); color: var(--pf-warn); }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge-info { background: var(--pf-info-bg); color: var(--pf-info); }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge-danger { background: var(--pf-crit-bg); color: var(--pf-crit); }
:is(.ejercicio-card, [id^="modal-detalle-ejercicio-"]) .mini-badge-gray { background: var(--pf-neu-bg); color: var(--pf-neu); }

/* dificultad: pastilla neutra y el ícono lleva el tono, que sale de data-dif (lo escribe la plantilla y lo actualiza el JS al guardar) */
.pf-pill.ejc-dif[data-dif="facil"] > i { color: var(--pf-ok); }
.pf-pill.ejc-dif[data-dif="medio"] > i { color: var(--pf-info); }
.pf-pill.ejc-dif[data-dif="dificil"] > i { color: var(--pf-warn); }
.ejc-info { display: contents; }

/* ---------- La tarjeta del ejercicio (se ve decenas de veces: solo cambia de color al pasar el mouse) ----------
   No es la .ejercicio-card de la resolución del estudiante (esa trae .ejercicio-interactivo): aquí se pisa lo que
   el bloque «Ejercicios (PF-548)» le da a .ejercicio-card (relleno de 24 px, margen de 20 px) con una clase más. */
.ejercicio-card.ejc { --ejc-ac: 0 0 0 0 transparent; container: ejc / inline-size; position: relative; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; padding: 14px 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: var(--ejc-ac), var(--pf-sh1); color: var(--pf-t1); font-family: var(--pf-f-in); transition: border-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
@media (hover: hover) and (pointer: fine) { .ejercicio-card.ejc:hover { border-color: var(--pf-inl); } }

/* cabecera: asa para reordenar · número · tipo, estado, dificultad y puntos */
.ejc-cab { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ejercicio-card .ejc-grip { flex: none; display: inline-grid; place-items: center; width: 24px; height: 52px; margin: 0; padding: 0; border-radius: var(--pf-r-sm); background: transparent; color: var(--pf-t3); opacity: 1; cursor: grab; touch-action: none; transition: color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
@media (hover: hover) and (pointer: fine) { .ejercicio-card.ejc .ejercicio-drag-handle:hover { background: var(--pf-sf2); color: var(--pf-t1) !important; } }
.ejercicio-card.ejc .ejercicio-drag-handle:active { background: var(--pf-sf3); cursor: grabbing; }
@media (pointer: coarse) { .ejercicio-card .ejc-grip { width: 32px; margin-left: -6px; } }
.ejc-n { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; padding: 7px 6px 6px; border-radius: var(--pf-r); background: var(--pf-sf2); line-height: 1.1; }
.ejc-n > small { font: 600 var(--pf-fs-2xs) var(--pf-f-lb); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-t3); }
.ejercicio-card .ejc-n > .ejercicio-numero { margin-top: 3px; font: 700 var(--pf-fs-2xl)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; color: var(--pf-t1); }
.ejc-tit { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ejc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ejc-fila > .pf-pill { flex: 0 1 auto; }
.ejc-fila .criterios-cumplimiento-panel { min-width: 0; }
/* en una columna estrecha (la página anfitriona anida varias cajas) la pastilla larga baja a dos líneas en vez de salirse de la tarjeta */
.ejercicio-card .ejc-fila > .mini-badge { max-width: 100%; min-width: 0; height: auto; min-height: 22px; padding-block: 3px; white-space: normal; line-height: 1.25; }

/* enunciado truncado, pista y explicación: lectura primero */
.ejercicio-card .ejc-enun { margin: 0; font-size: var(--pf-fs-base); line-height: 1.6; color: var(--pf-t1); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.ejercicio-card .ejc-enun p { margin: 0 0 .5em; }
.ejercicio-card .ejc-enun > :last-child { margin-bottom: 0; }
.ejercicio-card .ejc-nota { padding: 9px 12px; font-size: var(--pf-fs-md); line-height: 1.5; }
.ejc-nota > i { flex: none; margin-top: 3px; }
.ejc-nota > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ejc-nota strong { font-weight: 650; }
.ejc-nota p { margin: .4em 0 0; }
.ejc-nota strong + p { display: inline; margin: 0; }

/* reutilizado del banco (también dentro del modal de detalle) */
.ejc-banco { padding: 10px 12px; }
.ejc-banco > i { flex: none; margin-top: 3px; }
.ejc-banco-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ejc-banco-c > strong { font-weight: 650; }
.ejc-banco-c > p { margin: 0; }
.ejc-banco-c > form { margin-top: 6px; max-width: 100%; }
.ejc-banco-c > form > .pf-btn { max-width: 100%; height: auto; min-height: 32px; padding-block: 6px; white-space: normal; text-align: left; line-height: 1.25; }

/* acciones: ver a la izquierda; guardar en banco, editar y eliminar (en rojo, al final) a la derecha */
.ejc-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--pf-ln2); }
.ejc-acc > .ejc-ver { margin-right: auto; }
.pf-btn.ghost.ejc-act-eliminar { color: var(--pf-crit); }
@media (hover: hover) and (pointer: fine) { .pf-btn.ghost.ejc-act-eliminar:hover { background: var(--pf-crit-bg); color: var(--pf-crit); } }
/* ejercicio bloqueado: «Corregir ejercicio» es la acción que importa */
.ejercicio-card--bloqueado .pf-btn.sec.ejc-act-editar { background: var(--pf-g7); color: var(--pf-on-g); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ejercicio-card--bloqueado .pf-btn.sec.ejc-act-editar:hover { background: var(--pf-g6); box-shadow: none; } }
@media (pointer: coarse) { .ejc-acc > .pf-btn { min-height: 44px; } }
/* tarjeta angosta (celular, o columna estrecha en iPad): los botones en dos columnas de 44 px, el último a todo lo ancho si queda solo */
@container ejc (max-width: 479px) {
  .ejc-acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
  .ejc-acc > .pf-btn { width: 100%; min-height: 44px; height: auto; padding-block: 8px; white-space: normal; text-align: center; }
  .ejc-acc > .ejc-ver { margin-right: 0; }
  .ejc-acc > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* columna muy estrecha (la página anfitriona anida varias cajas y en un celular la tarjeta queda en ~230 px): el número pasa a una
   pastilla horizontal con el asa, y el tipo, la dificultad y los puntos bajan a su propia línea; el enunciado muestra más líneas */
@container ejc (max-width: 379px) {
  .ejc-cab { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .ejercicio-card .ejc-grip { height: 36px; }
  .ejc-n { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 12px; }
  .ejercicio-card .ejc-n > .ejercicio-numero { margin-top: 0; font-size: var(--pf-fs-xl); }
  .ejc-tit { flex: 1 1 100%; min-height: 0; }
  .ejercicio-card .ejc-enun { -webkit-line-clamp: 9; }
}
@media (max-width: 479px) { .ejercicio-card.ejc { padding: 12px; } }

/* estados que se leen sin abrir nada: acento lateral crit si está bloqueado, warn si quedó sin validar */
.ejercicio-card.ejc.ejercicio-card--bloqueado { --ejc-ac: inset 4px 0 0 var(--pf-crit); border-color: var(--pf-crit); border-color: color-mix(in srgb, var(--pf-crit) 40%, var(--pf-ln)); }
.ejercicio-card.ejc:has(.ejc-sv):not(.ejercicio-card--bloqueado) { --ejc-ac: inset 4px 0 0 var(--pf-warn); }
.ejercicio-card.ejc.ejercicio-card--regenerando { overflow: hidden; }

/* «Ver en la lección» (revision_ejercicios.js pone y quita la clase): un anillo del sistema que se desvanece */
.ejercicio-card.ejc.ejercicio-card--resaltado { animation: ejc-resalta 1800ms ease-out; }
@keyframes ejc-resalta { 0%, 35% { box-shadow: var(--ejc-ac), 0 0 0 3px var(--pf-g-soft), var(--pf-sh1); box-shadow: var(--ejc-ac), 0 0 0 3px color-mix(in srgb, var(--pf-g7) 45%, transparent), var(--pf-sh1); } }
@keyframes ejc-resalta-color { 0%, 45% { background-color: var(--pf-g-soft); } }
@media (prefers-reduced-motion: reduce) { .ejercicio-card.ejc.ejercicio-card--resaltado { animation: ejc-resalta-color 2400ms ease-out; } }

/* ---------- Guardar en banco (tarjeta, modal de detalle y tarjeta de admisión) ---------- */
.banco-guardar-btn { flex: none; }
.banco-guardar-btn:disabled { cursor: progress; }
.banco-guardar-btn:disabled > i { animation: ejc-latido 900ms ease-in-out infinite; }
@keyframes ejc-latido { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .banco-guardar-btn:disabled > i { animation: none; } }

/* ---------- Modal de detalle del ejercicio ----------
   Lo abre openModal() de la página (clase .active sobre .modal-overlay). Entra con el mismo pf-rise que usan los avisos y las
   hojas del sistema: la página no trae animación de modal propia. En celular sube desde abajo a pantalla casi completa. */
[id^="modal-detalle-ejercicio-"].modal-overlay { background: var(--pf-scrim); }
[id^="modal-detalle-ejercicio-"] > .modal-content.ejm { max-width: 720px; max-height: min(92vh, 900px); max-height: min(92dvh, 900px); border: 1px solid var(--pf-ln); border-radius: 18px; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3); font-family: var(--pf-f-in); display: flex; flex-direction: column; overflow: hidden; }
[id^="modal-detalle-ejercicio-"].active > .modal-content.ejm { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }
.ejm > .modal-header.ejm-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--pf-sf); border-bottom: 1px solid var(--pf-ln2); }
.ejm-tit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.ejm-ic { width: 40px; height: 40px; border-radius: var(--pf-r); font-size: var(--pf-fs-xl); }
.ejm-tit-t { min-width: 0; }
.ejm-tit-t > h4 { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; line-height: 1.25; letter-spacing: -.01em; color: var(--pf-t1); overflow-wrap: anywhere; }
.ejm-tit-t > p { margin: 2px 0 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ejm-cab .modal-close.pf-btn { flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--pf-t2); }
.ejm > .modal-body.ejm-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--pf-sf2); }
.ejm-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ejm-sec { margin: 0; padding: 14px 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); min-width: 0; }
.ejm-sec-t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ejm-sec-t > i { color: var(--pf-t3); }
.ejm .ejm-enun { margin: 0; font-size: var(--pf-fs-lg); line-height: 1.65; color: var(--pf-t1); overflow-wrap: anywhere; }
.ejm .ejm-enun > :last-child { margin-bottom: 0; }
.ejm .ejm-enun p { margin: 0 0 .6em; }
/* la explicación ya tiene su propio recuadro más abajo: dentro de la vista previa no se repite */
.ejm [data-ej-preview] .ejercicio-explicacion { display: none; }
.ejm-nota { padding: 12px 14px; font-size: var(--pf-fs-base); line-height: 1.55; }
.ejm-nota > i { flex: none; margin-top: 3px; }
.ejm-nota > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ejm-nota h5 { margin: 0 0 4px; font-size: var(--pf-fs-md); font-weight: 650; }
.ejm-nota p { margin: 0 0 .4em; }
.ejm-nota p:last-child { margin-bottom: 0; }
.ejm > .modal-footer.ejm-pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--pf-sf); border-top: 1px solid var(--pf-ln2); }
@media (max-width: 639px) {
  [id^="modal-detalle-ejercicio-"].modal-overlay { padding: 0; align-items: flex-end; }
  [id^="modal-detalle-ejercicio-"] > .modal-content.ejm { max-width: none; max-height: 94vh; max-height: 94dvh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .ejm > .modal-body.ejm-body { padding: 12px; gap: 12px; }
  .ejm-sec { padding: 12px 14px; }
  .ejm > .modal-footer.ejm-pie { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ejm-pie > .pf-btn { flex: 1 1 0; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { [id^="modal-detalle-ejercicio-"].active > .modal-content.ejm { animation-name: pf-fade; } }
/* el botón flotante del chat (abajo a la derecha, por encima de los modales de la página) no tapa «Cerrar»: la barra de abajo le deja su lugar */
@media (max-width: 900px) { html.pf-con-chat .ejm > .modal-footer.ejm-pie { padding-right: var(--pf-flotante-ancho); } }

/* ---------- Buscador del banco embebido (modal «Insertar desde banco») ---------- */
.ejb { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--pf-t1); font-family: var(--pf-f-in); }
.ejb-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ejb-q, .ejb-buscar { grid-column: 1 / -1; }
.ejb-q > i { flex: none; }
.ejb-buscar { width: 100%; }
@media (min-width: 640px) {
  .ejb-filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ejb-q, .ejb-buscar { grid-column: auto; }
  .ejb-buscar { width: auto; }
}
@media (pointer: coarse) { .ejb .pf-inp { height: 44px; } .ejb-buscar { min-height: 44px; } }
.ejb-lista { max-height: min(26rem, 56vh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); }
.ejb-fila { gap: 12px; padding: 12px 14px; }
@media (hover: hover) and (pointer: fine) { .ejb-fila:hover { background: var(--pf-sf2); } }
.ejb-cuerpo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ejb-enun { margin: 0; font-size: var(--pf-fs-base); font-weight: 600; line-height: 1.4; color: var(--pf-t1); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ejb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ejb-tipo:empty { display: none; }
.ejb-ins { flex: none; }
@media (pointer: coarse) { .ejb-ins { min-height: 44px; } }
.ejb-lista > .pf-empty { padding: 28px 16px; }

/* ---------- Imagen propia del ejercicio (dentro del modal de edición) ----------
   Lleva .modal-section como las demás secciones del modal (su caja la dibuja el <style> de _modal_ejercicio_base hasta C6). */
.ejimg { display: flex; flex-direction: column; gap: 12px; }
.ejimg > .modal-section-title { margin-bottom: 0; }
.ejimg > .pf-help { margin: 0; }
.ejimg-campo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; margin: 0; }
.ejimg-campo > label { display: flex; gap: 4px; margin: 0; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.ejimg-campo > label.required::after { color: var(--pf-crit); }
.ejimg-campo > .pf-btn { align-self: flex-start; }
.ejimg-actual { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; box-shadow: none; }
.ejimg-marco { flex: none; display: grid; place-items: center; width: 168px; max-width: 100%; height: 126px; padding: 6px; overflow: hidden; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: #fff; /* papel fijo: la imagen puede traer fondo transparente y en oscuro se perdería */ }
.ejimg-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ejimg-datos { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ejimg-alt { margin: 0; font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t2); overflow-wrap: anywhere; }
.ejimg-alt > strong { color: var(--pf-t1); }
.pf-btn.ghost.ejimg-quitar { color: var(--pf-crit); }
@media (hover: hover) and (pointer: fine) { .pf-btn.ghost.ejimg-quitar:hover { background: var(--pf-crit-bg); color: var(--pf-crit); } }
.ejimg-drop { position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px; text-align: left; }
.ejimg-drop-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ejimg-drop-t > b { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t1); }
.ejimg-drop-t > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ejimg-drop > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ejimg-drop:has(> input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* estado de la subida: lo escribe ejercicio_imagen_upload.js en data-estado (info | ok | error); aria-live */
.ejimg-estado { align-self: stretch; padding: 8px 12px; border-radius: var(--pf-r); background: var(--pf-info-bg); color: var(--pf-info); font-size: var(--pf-fs-md); line-height: 1.4; overflow-wrap: anywhere; transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); }
.ejimg-estado[data-estado="ok"] { background: var(--pf-ok-bg); color: var(--pf-ok); }
.ejimg-estado[data-estado="error"] { background: var(--pf-crit-bg); color: var(--pf-crit); font-weight: 600; }
.ejimg-estado:empty { display: none; }
@starting-style { .ejimg-estado { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ejimg-estado { transition: opacity var(--pf-d-base) var(--pf-e-out); } @starting-style { .ejimg-estado { transform: none; } } }
@media (max-width: 639px) {
  .ejimg-marco { width: 100%; height: 150px; }
  .ejimg > .ejimg-campo > .pf-btn, .ejimg-actual .pf-btn { width: 100%; }
  .ejimg-datos { flex-basis: 100%; }
}

/* =====================================================================
   C5 · PF-548 · Selector de tipos de ejercicio y demo de la guía
   (lecciones/partials/_selector_tipos_ejercicio.html y guia_ejercicios/_demo_fragment.html).
   Las reglas vivían en el <style> del selector. Sin prefijo html[data-sistema]: el selector también
   se ve en páginas sin migrar (crear/editar lección, tarea con IA, generar), que heredan las fichas de :root.
   Todo va acotado a .tipos-selector y a #tipos-demo-modal: la guía de ejercicios tiene su propio .tipo-card.
   ===================================================================== */

/* Color por tipo: el catálogo (tipos_ejercicio_catalogo.py) guarda 13 nombres de color de Tailwind; aquí se
   convierten en los cinco tonos del sistema (que ya traen su versión oscura). Solo tiñen el ícono. */
.tipo-color-emerald, .tipo-color-green { --tc-bg: var(--pf-m1-bg); --tc-ink: var(--pf-m1-ink); }
.tipo-color-blue, .tipo-color-cyan { --tc-bg: var(--pf-m2-bg); --tc-ink: var(--pf-m2-ink); }
.tipo-color-amber, .tipo-color-orange, .tipo-color-rose { --tc-bg: var(--pf-m3-bg); --tc-ink: var(--pf-m3-ink); }
.tipo-color-teal { --tc-bg: var(--pf-m4-bg); --tc-ink: var(--pf-m4-ink); }
.tipo-color-indigo, .tipo-color-violet, .tipo-color-purple, .tipo-color-pink { --tc-bg: var(--pf-m5-bg); --tc-ink: var(--pf-m5-ink); }
.tipo-color-gray { --tc-bg: var(--pf-sf3); --tc-ink: var(--pf-t2); }

.tipos-selector { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--pf-t1); font-family: var(--pf-f-in); }

/* barra superior: cuántos elegiste y la selección rápida */
.tipos-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 14px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf2); }
.tipos-toolbar__resumen { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tipos-contador { font-size: var(--pf-fs-base); color: var(--pf-t2); }
.tipos-contador strong { margin-right: 2px; font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pf-t1); transition: color var(--pf-d-fast) ease; }
.tipos-selector:has(.tipo-card.selected) .tipos-contador strong { color: var(--pf-g-ink); }
.tipos-contador__detalle { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.tipos-contador__detalle:empty { display: none; }
.tipos-toolbar__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.tipos-btn[hidden] { display: none; }
.tipos-btn i { font-size: var(--pf-fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .tipos-btn--auto:hover { background: var(--pf-ok-bg); color: var(--pf-ok); }
  .tipos-btn--ninguno:hover { background: var(--pf-crit-bg); color: var(--pf-crit); }
}

/* filtros por tipo de corrección: chips del sistema */
.tipos-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tipos-chip--auto > i { color: var(--pf-ok); }
.tipos-chip--revision > i { color: var(--pf-warn); }
.tipos-chip--auto[aria-pressed="true"] { background: var(--pf-ok-bg); color: var(--pf-ok); box-shadow: inset 0 0 0 1px var(--pf-ok); }
.tipos-chip--auto[aria-pressed="true"] .c { color: var(--pf-ok); }
.tipos-chip--revision[aria-pressed="true"] { background: var(--pf-warn-bg); color: var(--pf-warn); box-shadow: inset 0 0 0 1px var(--pf-warn); }
.tipos-chip--revision[aria-pressed="true"] .c { color: var(--pf-warn); }
.tipos-leyenda__ayuda { flex-basis: 100%; font-size: var(--pf-fs-sm); line-height: 1.5; color: var(--pf-t3); }
.tipos-leyenda__ayuda > i { margin-right: 2px; }
.tipos-leyenda__link { display: inline-block; margin-left: 4px; font-weight: 600; white-space: nowrap; color: var(--pf-g-ink); text-decoration: none; }
.tipos-leyenda__link:hover { text-decoration: underline; }
@media (min-width: 1024px) { .tipos-leyenda__ayuda { flex-basis: auto; margin-left: auto; } }

/* rejilla: 1 columna en celular, 2 en iPad vertical, 3–4 donde hay ancho (según el ancho de su columna) */
.tipos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }

/* tarjeta seleccionable: gris neutro si no; anillo verde + check si sí */
.tipo-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); transition: background-color var(--pf-d-fast) ease, border-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.tipo-card:has(.tipo-card__main:active) { transform: scale(.97); }
.tipo-card.selected { background: var(--pf-g-soft); border-color: var(--pf-g7); box-shadow: 0 0 0 1px var(--pf-g7); }
.tipo-card.is-oculto { display: none; }
.tipo-card:has(.tipo-card__check:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.tipo-card__main { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-height: 64px; margin: 0; padding: 14px 14px 8px; cursor: pointer; border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.tipo-card:has(.tipo-card__check:disabled) .tipo-card__main { cursor: default; }
.tipo-card__check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tipo-card__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pf-r); background: var(--tc-bg, var(--pf-sf3)); color: var(--tc-ink, var(--pf-t2)); font-size: var(--pf-fs-xl); }
.tipo-card__body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.tipo-card__nombre { font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.25; color: var(--pf-t1); overflow-wrap: anywhere; }
.tipo-card__uso { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--pf-fs-md); line-height: 1.4; color: var(--pf-t2); }
.tipo-card.selected .tipo-card__uso { color: var(--pf-t1); }
/* sobre el verde suave del seleccionado, el ícono y la pastilla se apoyan en papel para no perderse */
.tipo-card.selected .tipo-card__icon, .tipo-card.selected .tipo-tag.ok { background: var(--pf-sf); }
/* el check va a la derecha: el ícono y el nombre quedan a la izquierda, que es por donde se lee */
.tipo-card__checkmark { order: 3; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--pf-inl); background: var(--pf-sf); color: var(--pf-on-g); font-size: var(--pf-fs-2xs); transition: background-color var(--pf-d-fast) ease, border-color var(--pf-d-fast) ease; }
.tipo-card__checkmark > i { opacity: 0; transform: scale(.6); transition: opacity var(--pf-d-fast) ease, transform var(--pf-d-fast) var(--pf-e-out); }
.tipo-card.selected .tipo-card__checkmark { background: var(--pf-g7); border-color: var(--pf-g7); }
.tipo-card.selected .tipo-card__checkmark > i { opacity: 1; transform: none; }
.tipo-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 10px 14px; }
.tipo-card__footer .tipo-tag { min-width: 0; }
.tipos-selector .tipo-card__demo { flex: none; color: var(--pf-g-ink); }
.tipos-selector .tipo-card.selected .tipo-card__demo { color: var(--pf-g-soft-ink); } /* sobre el verde suave de la tarjeta elegida: 4,5:1 */
@media (hover: hover) and (pointer: fine) {
  .tipo-card:not(.selected):hover { border-color: var(--pf-inl-h); background: var(--pf-sf2); }
  .tipo-card.selected:hover { background: var(--pf-g-soft); }
  .tipo-card:not(.selected):hover .tipo-card__checkmark { border-color: var(--pf-inl-h); }
}
.tipos-vacio[hidden], .tipos-filtro-vacio[hidden] { display: none; }
.tipos-vacio, .tipos-filtro-vacio { margin: 0; transition: opacity var(--pf-d-base) var(--pf-e-out), transform var(--pf-d-base) var(--pf-e-out); }
/* solo cuando el aviso aparece por un clic (is-vivo lo pone el JS tras iniciar): al cargar la página nada se anima */
@starting-style { .tipos-selector.is-vivo .tipos-vacio, .tipos-selector.is-vivo .tipos-filtro-vacio { opacity: 0; transform: translateY(4px); } }
/* dedos: todo lo que se toca mide 44 px */
@media (pointer: coarse) {
  .tipos-selector .pf-btn, .tipos-selector .pf-chip { min-height: 44px; }
  .tipos-selector .pf-chip { padding: 0 14px; }
  .tipo-card__demo { padding: 0 14px; }
  .tipo-card__main { min-height: 72px; }
}
@media (max-width: 639px) {
  .tipos-leyenda .pf-chip { flex: 1 1 100%; justify-content: center; }
  .tipos-toolbar__acciones { flex: 1 1 100%; }
  .tipos-toolbar__acciones .tipos-btn { flex: 1 1 auto; justify-content: center; }
  .tipos-toolbar__acciones .tipos-btn--auto { order: 3; flex-basis: 100%; }
}

/* ---------- Modal de demo ---------- */
.tipos-demo-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.tipos-demo-modal[hidden] { display: none; }
.tipos-demo-modal__backdrop { position: absolute; inset: 0; background: var(--pf-scrim); box-shadow: inset 0 0 0 100vmax var(--pf-scrim); /* doble capa: el menú lateral es verde oscuro y con una sola apenas se nota */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: pf-c5-fundido var(--pf-d-base) ease; }
.tipos-demo-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); overflow: hidden; border-radius: 20px 20px 0 0; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); animation: pf-c5-subir var(--pf-d-slow) var(--pf-e-drawer); }
.tipos-demo-modal__header { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 64px 10px 16px; border-bottom: 1px solid var(--pf-ln2); background: var(--pf-sf); }
.tipos-demo-modal__titulo-wrap { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; min-width: 0; }
.tipos-demo-modal__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pf-r); background: var(--tc-bg, var(--pf-m5-bg)); color: var(--tc-ink, var(--pf-m5-ink)); font-size: var(--pf-fs-2xl); }
.tipos-demo-modal__titulos { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tipos-demo-modal__titulo { margin: 0; font-size: var(--pf-fs-2xl); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; color: var(--pf-t1); overflow-wrap: anywhere; }
.tipos-demo-modal__nav { display: flex; align-items: center; justify-content: space-between; flex: 1 1 100%; gap: 6px; }
.tipos-demo-modal__navbtn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t2); font-size: var(--pf-fs-base); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.tipos-demo-modal__navbtn:active { transform: scale(.97); }
.tipos-demo-modal__navbtn:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.tipos-demo-modal__nav > .tipos-demo-modal__cerrar { position: absolute; top: 14px; right: 12px; }
.tipos-demo-modal__pos { flex: 1; min-width: 44px; text-align: center; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.tipos-demo-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--pf-sf2); }
.tipos-demo-modal__body.is-nuevo { animation: pf-c5-entrar var(--pf-d-base) var(--pf-e-out); }
.tipos-demo-modal__cargando { padding: 48px 0; text-align: center; font-size: var(--pf-fs-base); color: var(--pf-t3); }
.tipos-demo-modal__error { margin: 8px 0; }
.tipos-demo-modal__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pf-ln2); background: var(--pf-sf); }
.tipos-demo-modal__footer .tipos-btn--usar { order: -1; flex: 1 1 100%; height: 44px; }
.tipos-demo-modal__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-g-ink); text-decoration: none; }
.tipos-demo-modal__link:hover { text-decoration: underline; }
/* «Usar este tipo» pasa a «Seleccionado · quitar»: de verde lleno a neutro con check */
.tipos-btn--usar.is-activo { background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-inl); }
.tipos-btn--usar.is-activo > i { color: var(--pf-g-ink); }
@media (hover: hover) and (pointer: fine) {
  .tipos-demo-modal__navbtn:hover { background: var(--pf-sf3); color: var(--pf-t1); }
  .tipos-demo-modal__cerrar:hover { background: var(--pf-crit-bg); color: var(--pf-crit); }
  .tipos-btn--usar.is-activo:hover { background: var(--pf-crit-bg); color: var(--pf-crit); box-shadow: inset 0 0 0 1px var(--pf-crit); }
  .tipos-btn--usar.is-activo:hover > i { color: var(--pf-crit); }
}
/* el botón flotante del chat tapa la esquina derecha: el pie de la demo le deja su lugar */
@media (max-width: 900px) { html.pf-con-chat .tipos-demo-modal__footer { padding-right: var(--pf-flotante-ancho); } }
@keyframes pf-c5-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-c5-subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pf-c5-aparecer { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pf-c5-entrar { from { opacity: 0; transform: translate(var(--c5-dx, 0), var(--c5-dy, 6px)); } to { opacity: 1; transform: none; } }
.tipos-demo-modal__body[data-dir="sig"] { --c5-dx: 10px; --c5-dy: 0px; }
.tipos-demo-modal__body[data-dir="ant"] { --c5-dx: -10px; --c5-dy: 0px; }

/* iPad y computadora: la hoja se centra y la barra de navegación queda a la derecha del título */
@media (min-width: 640px) {
  .tipos-demo-modal { align-items: center; padding: 16px; }
  .tipos-demo-modal__panel { width: min(920px, 100%); height: auto; max-height: min(92vh, 900px); border-radius: var(--pf-r-lg); animation-name: pf-c5-aparecer; animation-duration: var(--pf-d-base); animation-timing-function: var(--pf-e-out); }
  .tipos-demo-modal__header { flex-wrap: nowrap; justify-content: space-between; padding: 14px 16px; }
  .tipos-demo-modal__titulo-wrap { flex: 1 1 auto; }
  .tipos-demo-modal__nav { flex: none; justify-content: flex-end; }
  .tipos-demo-modal__pos { flex: none; }
  .tipos-demo-modal__nav > .tipos-demo-modal__cerrar { position: static; margin-left: 6px; }
  .tipos-demo-modal__body { padding: 18px; }
  .tipos-demo-modal__footer { flex-wrap: nowrap; padding-bottom: 12px; }
  .tipos-demo-modal__footer .tipos-btn--usar { order: 0; flex: none; }
}

/* contenido del fragmento (guia_ejercicios/_demo_fragment.html) */
.tipos-demo__intro { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: 14px; }
.tipos-demo__descripcion { margin: 0; font-size: var(--pf-fs-lg); line-height: 1.55; color: var(--pf-t1); max-width: 68ch; }
.tipos-demo__meta { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .tipos-demo__meta { grid-template-columns: 1fr 1fr; } }
.tipos-demo__meta-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t2); }
.tipos-demo__meta-titulo { display: inline-flex; align-items: center; gap: 6px; }
.tipos-demo__ejercicio-cabecera { margin-bottom: 10px; }
.tipos-demo__ejercicio .ejercicio-card { margin-bottom: 0; }
.tipos-demo__ejercicio .sortable [draggable="true"] { cursor: grab; }
.tipos-demo__ejercicio .tipos-demo__arrastrando { opacity: .45; }
/* los botones del ejercicio de la demo toman el verde del sistema aunque la página que la aloja (sin migrar) pinte .btn-primary de otro color */
#tipos-demo-modal .btn-modern.btn-primary { background: var(--pf-g7); color: var(--pf-on-g); box-shadow: none; }
/* confirmación del botón «Verificar» de la demo: lo pone el JS con la clase is-demo-ok; !important porque los estilos
   del ejercicio se reinyectan con prefijo #tipos-demo-modal y pintan el botón con degradado propio */
#tipos-demo-modal .is-demo-ok { background: var(--pf-ok-bg) !important; color: var(--pf-ok) !important; box-shadow: inset 0 0 0 1px var(--pf-ok) !important; }

@media (prefers-reduced-motion: reduce) {
  .tipos-demo-modal__panel { animation-name: pf-c5-fundido; }
  .tipos-demo-modal__body.is-nuevo { animation-name: pf-c5-fundido; }
  .tipo-card:has(.tipo-card__main:active), .tipos-demo-modal__navbtn:active { transform: none; }
  .tipo-card__checkmark > i { transform: none; }
  .tipos-demo-modal__cargando .fa-spin { animation: none; }
  @starting-style { .tipos-selector.is-vivo .tipos-vacio, .tipos-selector.is-vivo .tipos-filtro-vacio { transform: none; } }
}

/* =====================================================================
   C6a · PF-548 · Ventanas de edición de ejercicio: la base compartida, la cáscara y los dos tipos modelo
   (lecciones/modals/_modal_ejercicio_base.html, _modal_ejercicio_true_false.html, _modal_ejercicio_multiple_choice.html).
   Todo va bajo .modal-ejercicio-especifico (el .modal-content de las 15 ventanas y del modal de crear de admisión): hay nombres
   que chocan fuera (.matching-column lo usa el ejercicio del estudiante; .modal-section, las páginas de planificación).
   Sin prefijo html[data-sistema]: las páginas anfitrionas (lección, admisión) aún traen su .modal-* con hex; aquí se gana por
   especificidad (3 clases), no con !important.

   RECETA PARA LOS DEMÁS TIPOS (C6b/c/d): copia _modal_ejercicio_multiple_choice.html.
   1 Cabecera: <div class="modal-header ejm-cab"><div class="ejm-tit"><span class="pf-mini-ic ejm-ic ejercicio-tipo-TIPO" aria-hidden="true"><i class="fas …"></i></span>
     <div class="ejm-tit-t"><h4>Editar · Nombre</h4><p>Ejercicio #n</p></div></div><button type="button" class="modal-close pf-btn ghost ico" aria-label="Cerrar" onclick=…>&times;</button></div>.
     El tono lo da .ejercicio-tipo-TIPO (tabla «Ejercicios (PF-548)», una por tipo; la familia = el tono): no se elige en la plantilla.
   2 Cuerpo: <div class="modal-body"> sin más clases; dentro, <div class="modal-section"> con <div class="modal-section-title"><i … aria-hidden="true"></i> Título</div>,
     <p class="pf-help"> si hace falta una línea de ayuda, y cada campo en <div class="modal-field"> con label.modal-field-label[.required] + .form-input | .form-textarea | .form-select
     (la ayuda de debajo, <p class="pf-help">); puntos y dificultad en .modal-field-grid; la dificultad, .dificultad-chips con button.dificultad-chip[type=button][role=radio].
   3 Fila editable: .opcion-editor-item | .matching-item-editor | .ordering-item-editor = marcador + campo + button.opcion-delete-btn[type=button] (opcion-editor-item.correcta: la
     correcta; la elige label.opcion-correcta-marca con el radio dentro); «Agregar» = button.add-opcion-btn[type=button]; sí/no = button.tf-toggle-option[type=button][role=radio].
   4 Pie: <div class="modal-footer"> con button.pf-btn.sec[type=button] «Cancelar» y button.pf-btn[type=submit] «Guardar» (mismo onclick de siempre). Nada de hex ni de color Tailwind.
   5 Las filas que arma el JS (createElement + textContent) salen idénticas a las del servidor; si cambias una fila, cambia su plantilla en el JS.
   ===================================================================== */

/* ---------- cáscara: la misma ventana que el detalle del ejercicio (.ejm) ---------- */
.modal-overlay:has(> .modal-content.modal-ejercicio-especifico) { background: var(--pf-scrim); }
.modal-content.modal-ejercicio-especifico { max-width: 720px; max-height: min(92vh, 900px); max-height: min(92dvh, 900px); border: 1px solid var(--pf-ln); border-radius: 18px; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3); font-family: var(--pf-f-in); display: flex; flex-direction: column; overflow: hidden; }
.modal-overlay.active > .modal-content.modal-ejercicio-especifico { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }
.modal-ejercicio-especifico > form { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; }
.modal-ejercicio-especifico > .modal-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--pf-sf); border-bottom: 1px solid var(--pf-ln2); }
.modal-ejercicio-especifico > .modal-header .modal-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--pf-r); background: transparent; color: var(--pf-t2); font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico > .modal-header .modal-close:active { transform: scale(.97); }
.modal-ejercicio-especifico > .modal-header .modal-close:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.modal-ejercicio-especifico .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--pf-sf2); }
.modal-ejercicio-especifico .modal-body > * { flex: none; min-width: 0; }
.modal-ejercicio-especifico .modal-footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--pf-sf); border-top: 1px solid var(--pf-ln2); }

/* ---------- secciones, títulos, etiquetas y ayudas ---------- */
.modal-ejercicio-especifico .modal-section { margin: 0; padding: 14px 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); min-width: 0; }
.modal-ejercicio-especifico .modal-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--pf-f-lb); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-t2); }
.modal-ejercicio-especifico .modal-section-title > i { flex: none; width: 16px; text-align: center; color: var(--pf-t3); }
.modal-ejercicio-especifico .ejimg > .modal-section-title { margin-bottom: 0; }
.modal-ejercicio-especifico .pf-help { margin: 6px 0 0; font-size: var(--pf-fs-sm); line-height: 1.45; color: var(--pf-t3); }
.modal-ejercicio-especifico .modal-section-title + .pf-help { margin: -4px 0 12px; }
.modal-ejercicio-especifico .pf-help > i { margin-right: 4px; }
.modal-ejercicio-especifico .modal-field { margin: 0; min-width: 0; }
.modal-ejercicio-especifico .modal-field + .modal-field { margin-top: 12px; }
.modal-ejercicio-especifico .modal-field[style*="margin-bottom"] + .modal-field { margin-top: 0; }
.modal-ejercicio-especifico .modal-field-label { display: block; margin: 0 0 6px; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.modal-ejercicio-especifico .modal-field-label.required::after { content: '*'; margin-left: 4px; color: var(--pf-crit); }
.modal-ejercicio-especifico .modal-field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
.modal-ejercicio-especifico .modal-field-grid > .modal-field + .modal-field { margin-top: 0; }
@media (min-width: 480px) { .modal-ejercicio-especifico .modal-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- campos: se ven como .pf-inp / .pf-textarea ---------- */
.modal-ejercicio-especifico .modal-body :is(.form-input, .form-textarea, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select) { width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t1); font: 14px/1.4 var(--pf-f-in); outline: none; transition: box-shadow var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .modal-body textarea.form-textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.modal-ejercicio-especifico .modal-body :is(.form-input, .form-textarea, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select)::placeholder { color: var(--pf-t3); opacity: 1; }
.modal-ejercicio-especifico .modal-body :is(.form-input, .form-textarea, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select):focus { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
.modal-ejercicio-especifico .modal-body :is(.form-input, .form-textarea, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select):user-invalid { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
/* todo <select> de la ventana lleva su flecha (sin borde ni fondo nativos el navegador la quitaba) */
.modal-ejercicio-especifico .modal-body select:is(.form-select, .form-input) { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--pf-t3) 50%), linear-gradient(135deg, var(--pf-t3) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.modal-ejercicio-especifico .modal-body :is(.opcion-text-input, .matching-item-input, .ordering-item-text) { flex: 1 1 0; width: auto; min-width: 0; }
.modal-ejercicio-especifico .modal-body .matching-response-select { flex: 1 1 0; width: auto; min-width: 0; max-width: 280px; }

/* ---------- filas editables: opciones, elementos de columnas, pasos a ordenar, respuestas de relacionar ---------- */
.modal-ejercicio-especifico :is(.ejercicio-opciones-editor, .matching-column-items, .ordering-items-editor, .matching-response-editor) { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico :is(.opcion-editor-item, .matching-item-editor, .ordering-item-editor, .matching-response-item) { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
/* una fila agregada entra con opacidad y 4 px de subida; quitar una fila es instantáneo */
@starting-style { .modal-ejercicio-especifico :is(.opcion-editor-item, .matching-item-editor, .ordering-item-editor) { opacity: 0; transform: translateY(4px); } }
.modal-ejercicio-especifico .opcion-editor-item.correcta { background: var(--pf-ok-bg); box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px var(--pf-ok); box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px color-mix(in srgb, var(--pf-ok) 30%, transparent); }
.modal-ejercicio-especifico :is(.opcion-marker-editor, .matching-item-id, .ordering-item-number) { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--pf-sf3); color: var(--pf-t2); font: 700 var(--pf-fs-md)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .opcion-editor-item.correcta .opcion-marker-editor { background: var(--pf-ok); color: var(--pf-sf); }
.modal-ejercicio-especifico .opcion-input-wrapper { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }

/* «Marcar como correcta»: una etiqueta de 36 px que se toca entera; el radio va dentro, invisible pero con foco */
.modal-ejercicio-especifico .opcion-correcta-marca { position: relative; flex: none; display: inline-flex; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.modal-ejercicio-especifico .opcion-correcta-marca > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.modal-ejercicio-especifico .opcion-correcta-cara { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t3); font: 600 var(--pf-fs-md)/1 var(--pf-f-in); transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico .opcion-correcta-marca:active > .opcion-correcta-cara { transform: scale(.97); }
.modal-ejercicio-especifico .opcion-correcta-marca > input:checked + .opcion-correcta-cara { background: var(--pf-ok); color: var(--pf-sf); box-shadow: none; }
.modal-ejercicio-especifico .opcion-correcta-marca > input:focus-visible + .opcion-correcta-cara { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.modal-ejercicio-especifico .opcion-correcta-txt { display: none; }
@media (min-width: 640px) { .modal-ejercicio-especifico .opcion-correcta-txt { display: inline; } .modal-ejercicio-especifico .opcion-correcta-cara { padding: 0 12px; } }
.modal-ejercicio-especifico .opcion-correct-radio { accent-color: var(--pf-ok); }

/* eliminar y mover: botones fantasma de ícono; eliminar se pinta de crit solo al pasar el mouse o al presionar */
.modal-ejercicio-especifico :is(.opcion-delete-btn, .ordering-move-btn) { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pf-t3); font-size: var(--pf-fs-md); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico :is(.opcion-delete-btn, .ordering-move-btn):active:not(:disabled) { transform: scale(.97); }
.modal-ejercicio-especifico .opcion-delete-btn:active:not(:disabled) { background: var(--pf-crit-bg); color: var(--pf-crit); }
.modal-ejercicio-especifico .ordering-move-btn:active:not(:disabled) { background: var(--pf-sf3); color: var(--pf-t1); }
.modal-ejercicio-especifico :is(.opcion-delete-btn, .ordering-move-btn):disabled { opacity: .4; cursor: not-allowed; }
.modal-ejercicio-especifico :is(.opcion-delete-btn, .ordering-move-btn):focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.modal-ejercicio-especifico .ordering-item-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.modal-ejercicio-especifico .ordering-item-handle { flex: none; display: grid; place-items: center; width: 20px; color: var(--pf-t3); cursor: grab; }
.modal-ejercicio-especifico .ordering-item-handle:active { cursor: grabbing; }
.modal-ejercicio-especifico .ordering-item-editor:is(.dragging, .is-dragging, [aria-grabbed="true"]) { box-shadow: var(--pf-sh2), inset 0 0 0 1px var(--pf-inl); }

/* «Agregar …»: línea discontinua a todo el ancho */
.modal-ejercicio-especifico .add-opcion-btn { width: 100%; min-height: 40px; margin: 8px 0 0; padding: 0 12px; border: 1.5px dashed var(--pf-inl); border-radius: var(--pf-r); background: transparent; color: var(--pf-t2); font: 600 var(--pf-fs-md)/1 var(--pf-f-in); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, border-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico :is(.ejercicio-opciones-editor, .matching-column) > .add-opcion-btn { margin: 0; }
.modal-ejercicio-especifico .add-opcion-btn:active { transform: scale(.97); border-color: var(--pf-g7); color: var(--pf-g-ink); background: var(--pf-g-soft); }
.modal-ejercicio-especifico .add-opcion-btn:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }

/* ---------- elecciones cortas: Verdadero/Falso y dificultad (botones segmentados) ---------- */
.modal-ejercicio-especifico .tf-toggle-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-ejercicio-especifico .tf-toggle-option { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t2); font: 600 var(--pf-fs-lg)/1.2 var(--pf-f-in); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico .tf-toggle-icon { margin: 0; font-size: 20px; line-height: 1; color: var(--pf-t3); transition: color var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .tf-toggle-label { font: inherit; }
.modal-ejercicio-especifico .tf-toggle-option:active { transform: scale(.97); }
.modal-ejercicio-especifico .tf-toggle-option:focus-visible, .modal-ejercicio-especifico .dificultad-chip:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.modal-ejercicio-especifico .tf-toggle-option.selected { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.modal-ejercicio-especifico .tf-toggle-option.selected .tf-toggle-icon { color: var(--pf-g-ink); }
.modal-ejercicio-especifico .tf-toggle-option.selected.verdadero { background: var(--pf-ok-bg); color: var(--pf-ok); box-shadow: inset 0 0 0 1.5px var(--pf-ok); }
.modal-ejercicio-especifico .tf-toggle-option.selected.verdadero .tf-toggle-icon { color: var(--pf-ok); }
.modal-ejercicio-especifico .tf-toggle-option.selected.falso { background: var(--pf-crit-bg); color: var(--pf-crit); box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.modal-ejercicio-especifico .tf-toggle-option.selected.falso .tf-toggle-icon { color: var(--pf-crit); }
.modal-ejercicio-especifico .dificultad-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.modal-ejercicio-especifico .dificultad-chip { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 8px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t2); font: 600 var(--pf-fs-md)/1.2 var(--pf-f-in); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico .dificultad-chip:active { transform: scale(.97); }
.modal-ejercicio-especifico .dificultad-chip.selected { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.modal-ejercicio-especifico .dificultad-chip[data-value="facil"].selected { background: var(--pf-ok-bg); color: var(--pf-ok); box-shadow: inset 0 0 0 1.5px var(--pf-ok); }
.modal-ejercicio-especifico .dificultad-chip[data-value="medio"].selected { background: var(--pf-info-bg); color: var(--pf-info); box-shadow: inset 0 0 0 1.5px var(--pf-info); }
.modal-ejercicio-especifico .dificultad-chip[data-value="dificil"].selected { background: var(--pf-warn-bg); color: var(--pf-warn); box-shadow: inset 0 0 0 1.5px var(--pf-warn); }

/* ---------- relacionar columnas: las dos columnas y las respuestas ---------- */
.modal-ejercicio-especifico .matching-columns-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .modal-ejercicio-especifico .matching-columns-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modal-ejercicio-especifico .matching-column { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .matching-column-header { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: var(--pf-fs-md); font-weight: 600; line-height: 1.3; color: var(--pf-t2); }
.modal-ejercicio-especifico .matching-column-header > i { margin: 0; color: var(--pf-t3); }
.modal-ejercicio-especifico .matching-response-arrow { flex: none; color: var(--pf-t3); font-size: var(--pf-fs-sm); }

/* ---------- vista previa de LaTeX ---------- */
.modal-ejercicio-especifico .latex-preview-container { min-height: 44px; margin-top: 8px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf3); color: var(--pf-t1); overflow-x: auto; overflow-wrap: anywhere; }
.modal-ejercicio-especifico .latex-preview-label { margin: 0 0 6px; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t3); }

/* ---------- pantallas táctiles, ratón y celular ---------- */
@media (pointer: coarse) {
  .modal-ejercicio-especifico > .modal-header .modal-close { width: 44px; height: 44px; }
  .modal-ejercicio-especifico .modal-body :is(.form-input, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select) { height: 44px; }
  .modal-ejercicio-especifico :is(.opcion-delete-btn, .ordering-move-btn) { width: 44px; height: 44px; }
  .modal-ejercicio-especifico .opcion-correcta-cara { min-width: 44px; height: 44px; }
  .modal-ejercicio-especifico .add-opcion-btn { min-height: 44px; }
  .modal-ejercicio-especifico .tf-toggle-option { min-height: 60px; }
  .modal-ejercicio-especifico .dificultad-chip { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .modal-ejercicio-especifico > .modal-header .modal-close:hover { background: var(--pf-sf2); color: var(--pf-t1); }
  .modal-ejercicio-especifico .opcion-editor-item:not(.correcta):hover { background: var(--pf-sf3); }
  .modal-ejercicio-especifico .opcion-delete-btn:hover:not(:disabled) { background: var(--pf-crit-bg); color: var(--pf-crit); }
  .modal-ejercicio-especifico .ordering-move-btn:hover:not(:disabled) { background: var(--pf-sf3); color: var(--pf-t1); }
  .modal-ejercicio-especifico .add-opcion-btn:hover { border-color: var(--pf-g7); color: var(--pf-g-ink); background: var(--pf-g-soft); }
  .modal-ejercicio-especifico .opcion-correcta-marca:hover > input:not(:checked) + .opcion-correcta-cara { box-shadow: inset 0 0 0 1px var(--pf-ok); color: var(--pf-ok); }
  .modal-ejercicio-especifico .tf-toggle-option:not(.selected):hover, .modal-ejercicio-especifico .dificultad-chip:not(.selected):hover { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-inl-h); }
}
@media (max-width: 639px) {
  .modal-overlay:has(> .modal-content.modal-ejercicio-especifico) { padding: 0; align-items: flex-end; }
  .modal-content.modal-ejercicio-especifico { max-width: none; height: 94vh; height: 94dvh; max-height: 94vh; max-height: 94dvh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .modal-ejercicio-especifico .modal-body { gap: 12px; padding: 12px; }
  .modal-ejercicio-especifico .modal-section { padding: 12px 14px; }
  .modal-ejercicio-especifico .modal-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal-ejercicio-especifico .modal-footer > .pf-btn { flex: 1 1 0; min-height: 44px; }
  .modal-ejercicio-especifico .modal-body :is(.form-input, .form-textarea, .form-select, .opcion-text-input, .matching-item-input, .ordering-item-text, .matching-response-select) { font-size: 16px; }
  /* ordenar: el campo ocupa la primera línea con el asa y el número; las acciones, la segunda */
  .modal-ejercicio-especifico .ordering-item-editor { flex-wrap: wrap; }
  .modal-ejercicio-especifico .ordering-item-actions { flex: 1 0 100%; justify-content: flex-end; }
}
/* el botón flotante del chat tapa la esquina derecha: el pie le deja su lugar */
@media (max-width: 900px) { html.pf-con-chat .modal-ejercicio-especifico .modal-footer { padding-right: var(--pf-flotante-ancho); } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.active > .modal-content.modal-ejercicio-especifico { animation-name: pf-fade; }
  @starting-style { .modal-ejercicio-especifico :is(.opcion-editor-item, .matching-item-editor, .ordering-item-editor) { transform: none; } }
  .modal-ejercicio-especifico :is(.opcion-correcta-marca:active > .opcion-correcta-cara, .tf-toggle-option:active, .dificultad-chip:active, .add-opcion-btn:active, .opcion-delete-btn:active, .ordering-move-btn:active, .modal-close:active) { transform: none; }
}


/* ===== C6b · selección múltiple, V/F múltiple, respuesta corta, problema matemático y corrección de errores (escribe aquí) ===== */
/* Todo va bajo .modal-ejercicio-especifico y reutiliza la base C6a (cáscara, secciones, campos, filas, «Correcta», «Agregar», dificultad).
   Aquí solo lo propio de estos cinco tipos: selección múltiple (casilla en vez de radio: sin reglas nuevas), V/F múltiple, respuesta corta,
   problema matemático y corrección de errores. Tonos de la cabecera: .ejercicio-tipo-* (multiple_response m1, true_false_multiple m2,
   short_answer m5, math_problem m2, error_correction m3). */

/* campos con la respuesta correcta (en ok) o el fragmento erróneo (en crit): acento lateral, como la fila correcta de las opciones */
.modal-ejercicio-especifico .modal-body .form-input.campo-correcto { box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px var(--pf-inl); padding-left: 14px; }
.modal-ejercicio-especifico .modal-body .form-input.campo-error { box-shadow: inset 3px 0 0 var(--pf-crit), inset 0 0 0 1px var(--pf-inl); padding-left: 14px; }
.modal-ejercicio-especifico .modal-body .form-input.campo-correcto:focus { box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
.modal-ejercicio-especifico .modal-body .form-input.campo-error:focus { box-shadow: inset 3px 0 0 var(--pf-crit), inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 3px 0 0 var(--pf-crit), inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
.modal-ejercicio-especifico .modal-body .form-input.campo-correcto:user-invalid, .modal-ejercicio-especifico .modal-body .form-input.campo-error:user-invalid { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }

/* un campo suelto debajo de una rejilla de campos (problema matemático: respuesta en LaTeX) */
.modal-ejercicio-especifico .modal-field.mp-latex-campo { margin-top: 12px; }
/* configuración con tres campos (problema matemático): una columna en celular, tres desde 640 px */
@media (min-width: 640px) { .modal-ejercicio-especifico .modal-field-grid.modal-field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- V/F múltiple: una fila por afirmación ---------- */
.modal-ejercicio-especifico .tfm-editor-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .tfm-editor-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: start; gap: 8px 10px; min-width: 0; padding: 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); transition: box-shadow var(--pf-d-fast) ease, opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
/* la fila dice sola si es verdadera o falsa: acento lateral en ok / crit */
.modal-ejercicio-especifico .tfm-editor-row:has(.tfm-editor-vf-btn.selected.verdadero) { box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px var(--pf-ln); }
.modal-ejercicio-especifico .tfm-editor-row:has(.tfm-editor-vf-btn.selected.falso) { box-shadow: inset 3px 0 0 var(--pf-crit), inset 0 0 0 1px var(--pf-ln); }
@starting-style { .modal-ejercicio-especifico .tfm-editor-row { opacity: 0; transform: translateY(4px); } }
.modal-ejercicio-especifico .tfm-editor-num { display: grid; place-items: center; min-width: 28px; height: 28px; margin-top: 6px; border-radius: 8px; background: var(--pf-sf3); color: var(--pf-t2); font: 700 var(--pf-fs-md)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; }
.modal-ejercicio-especifico .tfm-editor-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal-ejercicio-especifico .tfm-editor-fields > .form-textarea { min-height: 64px; }
.modal-ejercicio-especifico .tfm-editor-vf { display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; }
.modal-ejercicio-especifico .tfm-editor-vf-btn { display: grid; place-items: center; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t2); font: 700 var(--pf-fs-lg)/1 var(--pf-f-in); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico .tfm-editor-vf-btn:active { transform: scale(.97); }
.modal-ejercicio-especifico .tfm-editor-vf-btn:focus-visible, .modal-ejercicio-especifico .tfm-editor-actions button:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.modal-ejercicio-especifico .tfm-editor-vf-btn.selected.verdadero { background: var(--pf-ok-bg); color: var(--pf-ok); box-shadow: inset 0 0 0 1.5px var(--pf-ok); }
.modal-ejercicio-especifico .tfm-editor-vf-btn.selected.falso { background: var(--pf-crit-bg); color: var(--pf-crit); box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.modal-ejercicio-especifico .tfm-editor-actions { display: flex; flex-direction: column; gap: 2px; }
.modal-ejercicio-especifico .tfm-editor-actions button { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pf-t3); font-size: var(--pf-fs-md); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico .tfm-editor-actions button:active { transform: scale(.97); background: var(--pf-sf3); color: var(--pf-t1); }
.modal-ejercicio-especifico .tfm-editor-actions .tfm-editor-remove:active { background: var(--pf-crit-bg); color: var(--pf-crit); }

/* ---------- Corregir el error: cada error es una fila con su número (contador CSS) y dos campos ---------- */
.modal-ejercicio-especifico .ec-lista { display: flex; flex-direction: column; gap: 8px; min-width: 0; counter-reset: ec; }
.modal-ejercicio-especifico .error-correction-row { position: relative; counter-increment: ec; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; min-width: 0; padding: 10px 10px 12px 46px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.modal-ejercicio-especifico .error-correction-row::before { content: counter(ec); position: absolute; left: 10px; top: 10px; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; background: var(--pf-sf3); color: var(--pf-t2); font: 700 var(--pf-fs-md)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; }
.modal-ejercicio-especifico .error-correction-row > .modal-field + .modal-field { margin-top: 0; }
@media (min-width: 640px) { .modal-ejercicio-especifico .error-correction-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* con un solo error no hace falta el número: la fila usa todo el ancho */
.modal-ejercicio-especifico .ec-lista > .error-correction-row:only-child { padding: 10px 12px 12px; }
.modal-ejercicio-especifico .ec-lista > .error-correction-row:only-child::before { display: none; }

/* ---------- táctil, ratón y celular ---------- */
@media (pointer: coarse) {
  .modal-ejercicio-especifico .tfm-editor-actions button { width: 44px; height: 44px; }
  .modal-ejercicio-especifico .tfm-editor-vf-btn { height: 48px; }
}
@media (hover: hover) and (pointer: fine) {
  .modal-ejercicio-especifico .tfm-editor-vf-btn:not(.selected):hover { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-inl-h); }
  .modal-ejercicio-especifico .tfm-editor-actions button:hover { background: var(--pf-sf3); color: var(--pf-t1); }
  .modal-ejercicio-especifico .tfm-editor-actions .tfm-editor-remove:hover { background: var(--pf-crit-bg); color: var(--pf-crit); }
}
@media (max-width: 639px) {
  /* V/F múltiple: el número y el texto arriba; el V/F y las acciones en la segunda línea, sin desbordar */
  .modal-ejercicio-especifico .tfm-editor-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .modal-ejercicio-especifico .tfm-editor-fields { grid-column: 2 / -1; }
  .modal-ejercicio-especifico .tfm-editor-vf { grid-column: 1 / 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-ejercicio-especifico .tfm-editor-actions { grid-column: 3; flex-direction: row; gap: 2px; }
  .modal-ejercicio-especifico .tfm-editor-actions button { width: 44px; height: 44px; }
  .modal-ejercicio-especifico .tfm-editor-vf-btn { height: 44px; }
  /* Corregir el error: el número pasa arriba para que los campos usen todo el ancho */
  .modal-ejercicio-especifico .error-correction-row { padding: 44px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  @starting-style { .modal-ejercicio-especifico .tfm-editor-row { transform: none; } }
  .modal-ejercicio-especifico :is(.tfm-editor-vf-btn:active, .tfm-editor-actions button:active) { transform: none; }
}
/* ===== fin C6b ===== */


/* ===== C6c · relacionar, ordenar, línea de tiempo y clasificar =====
   Todo bajo .modal-ejercicio-especifico (la cáscara, los campos, las filas, los botones de mover/eliminar y «Agregar» son los de C6a).
   Aquí solo lo propio: las filas de línea de tiempo y clasificación (reusan la fila, el marcador y los botones de C6a), la rejilla
   de «Respuestas correctas» de relacionar, el asa de ordenar (no se arrastra: se ordena con los botones) y el interruptor de fechas. */

/* contenedores de filas: los mismos de C6a (columna con 8 px) y su «Agregar» pegado a la lista */
.modal-ejercicio-especifico :is(.timeline-eventos-editor, .categorias-editor, .elementos-editor) { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico :is(.timeline-eventos-editor, .categorias-editor, .elementos-editor) > .add-opcion-btn { margin: 0; }

/* fila de evento, de categoría y de elemento a clasificar: la hoja gris de C6a, pero en rejilla para que el campo se encoja y nada desborde */
.modal-ejercicio-especifico :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item) { display: grid; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
.modal-ejercicio-especifico :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item) > :is(input, select) { min-width: 0; }
.modal-ejercicio-especifico .categoria-editor-item { grid-template-columns: minmax(0, 1fr) auto; }
.modal-ejercicio-especifico .elemento-clasificar-item { grid-template-columns: minmax(0, 1fr) auto; }
.modal-ejercicio-especifico .elemento-clasificar-item > .elem-texto-input { grid-column: 1 / -1; }
.modal-ejercicio-especifico .elemento-clasificar-item > .elem-categoria-select { grid-column: 1; }
.modal-ejercicio-especifico .elemento-clasificar-item > .opcion-delete-btn { grid-column: 2; }
@media (min-width: 640px) {
  .modal-ejercicio-especifico .elemento-clasificar-item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .modal-ejercicio-especifico .elemento-clasificar-item > .elem-texto-input { grid-column: auto; }
  .modal-ejercicio-especifico .elemento-clasificar-item > .elem-categoria-select, .modal-ejercicio-especifico .elemento-clasificar-item > .opcion-delete-btn { grid-column: auto; }
}

/* línea de tiempo: número, descripción, fecha y acciones; en celular la fecha y las acciones bajan a una segunda línea */
.modal-ejercicio-especifico .timeline-evento-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.modal-ejercicio-especifico .timeline-evento-item > .timeline-orden-num { grid-column: 1; grid-row: 1; }
.modal-ejercicio-especifico .timeline-evento-item > .evento-texto-input { grid-column: 2 / -1; grid-row: 1; }
.modal-ejercicio-especifico .timeline-evento-item > .evento-fecha-input { grid-column: 2; grid-row: 2; }
.modal-ejercicio-especifico .timeline-evento-item > .evento-actions { grid-column: 3; grid-row: 2; }
.modal-ejercicio-especifico .timeline-orden-num { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--pf-sf3); color: var(--pf-t2); font: 700 var(--pf-fs-md)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; }
.modal-ejercicio-especifico .evento-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
@media (min-width: 640px) {
  .modal-ejercicio-especifico .timeline-evento-item { grid-template-columns: auto minmax(0, 1fr) minmax(96px, 140px) auto; }
  .modal-ejercicio-especifico .timeline-evento-item > .timeline-orden-num, .modal-ejercicio-especifico .timeline-evento-item > .evento-texto-input, .modal-ejercicio-especifico .timeline-evento-item > .evento-fecha-input, .modal-ejercicio-especifico .timeline-evento-item > .evento-actions { grid-column: auto; grid-row: auto; }
}

/* las filas nuevas entran con opacidad y 4 px de subida (la regla de C6a cubre las demás filas); quitar una fila es instantáneo */
@starting-style { .modal-ejercicio-especifico :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item) { opacity: 0; transform: translateY(4px); } }

/* ordenar: el asa es solo una pista visual (se ordena con los botones), así que no promete arrastrar */
.modal-ejercicio-especifico .ordering-item-handle, .modal-ejercicio-especifico .ordering-item-handle:active { cursor: default; }

/* relacionar: «Respuestas correctas» en rejilla, una pareja por celda; cada select usa todo el ancho de su celda */
@media (min-width: 640px) {
  .modal-ejercicio-especifico .matching-response-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
}
.modal-ejercicio-especifico .matching-response-editor .matching-response-select { max-width: none; }

/* los selects de «Respuestas correctas» y de categoría del elemento: flecha propia (con border:0 el navegador la quita y parecían un campo de texto) */
.modal-ejercicio-especifico .modal-body :is(.elem-categoria-select, .matching-response-select) { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--pf-t3) 50%), linear-gradient(135deg, var(--pf-t3) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }

/* línea de tiempo: el interruptor «Mostrar fechas» */
.modal-ejercicio-especifico .pf-tg { align-items: center; min-height: 44px; color: var(--pf-t1); font-size: var(--pf-fs-md); -webkit-tap-highlight-color: transparent; }
.modal-ejercicio-especifico .pf-tg + .pf-help { margin-top: 8px; }

@media (pointer: coarse) {
  .modal-ejercicio-especifico .modal-body :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item) > :is(.form-input, .form-select) { height: 44px; }
  .modal-ejercicio-especifico .timeline-orden-num { min-width: 32px; height: 32px; }
}
@media (hover: hover) and (pointer: fine) {
  .modal-ejercicio-especifico :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item):hover { background: var(--pf-sf3); }
}
@media (prefers-reduced-motion: reduce) {
  @starting-style { .modal-ejercicio-especifico :is(.timeline-evento-item, .categoria-editor-item, .elemento-clasificar-item) { transform: none; } }
}
/* ===== fin C6c ===== */


/* ===== C6d · huecos, listas desplegables, banco de palabras y respuesta abierta ===== */
/* Cuatro ventanas (lecciones/modals/_modal_ejercicio_{fill_blank,fill_dropdown,word_bank,open_ended}.html) que reusan la base C6a:
   cáscara, secciones, campos, «Correcta», eliminar y «Agregar». Lo propio de estos tipos va aquí. El tono de cada familia sale de
   la tabla «Ejercicios (PF-548)»: completar espacios y desplegable = m3, banco de palabras = m4, respuesta abierta = m5.
   Una fila agregada entra con @starting-style (opacidad + 4 px de subida); quitar una fila es instantáneo. */

/* ayudas con código (___1___) y texto con espacios en letra de máquina */
.modal-ejercicio-especifico .pf-help code { padding: 1px 5px; border-radius: 5px; background: var(--pf-sf3); color: var(--pf-t1); font: 12px/1.4 var(--pf-f-mn); white-space: nowrap; }
.modal-ejercicio-especifico .modal-body textarea.font-mono { font-family: var(--pf-f-mn); line-height: 1.6; }

/* sin espacios todavía: recuadro de línea discontinua con una frase */
.modal-ejercicio-especifico :is(.fill-blank-empty-state, .espacios-vacio) { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px 16px; border: 1.5px dashed var(--pf-inl); border-radius: var(--pf-r); color: var(--pf-t3); font-size: var(--pf-fs-md); line-height: 1.4; text-align: center; }
.modal-ejercicio-especifico .fill-blank-empty-state > p { margin: 0; }
.modal-ejercicio-especifico .fill-blank-empty-state > i { flex: none; }

/* pastillas «Espacio n»: el tono de su familia */
.modal-ejercicio-especifico :is(.fill-blank-number, .espacio-badge, .espacio-label) { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--pf-m3-bg); color: var(--pf-m3-ink); font: 600 var(--pf-fs-xs)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; white-space: nowrap; }
.modal-ejercicio-especifico .espacio-label { min-width: 76px; background: var(--pf-m4-bg); color: var(--pf-m4-ink); }

/* campos de respuesta de «Completar espacios»: se ven como los demás campos; la principal, en ok */
.modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input) { width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 9px; background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t1); font: 14px/1.4 var(--pf-f-in); outline: none; transition: box-shadow var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .modal-body .fill-blank-main-input { background: var(--pf-ok-bg); box-shadow: inset 0 0 0 1px var(--pf-ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-ok) 35%, transparent); }
.modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input)::placeholder { color: var(--pf-t3); opacity: 1; }
.modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input):focus { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
.modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input):user-invalid { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }

/* Completar espacios: una fila por espacio (pastilla + respuesta + alternativas) */
.modal-ejercicio-especifico .fill-blank-responses { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .fill-blank-response-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.modal-ejercicio-especifico .fill-blank-response-header { display: flex; align-items: center; }
.modal-ejercicio-especifico .fill-blank-response-content { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
.modal-ejercicio-especifico .fill-blank-input-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal-ejercicio-especifico .fill-blank-label { margin: 0; font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-t2); }
@media (min-width: 640px) {
  .modal-ejercicio-especifico .fill-blank-response-item { flex-direction: row; align-items: flex-end; gap: 12px; }
  .modal-ejercicio-especifico .fill-blank-response-header { flex: none; align-items: center; min-width: 88px; height: 40px; }
  .modal-ejercicio-especifico .fill-blank-response-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Completar con desplegable: los espacios van separados por una línea (sin caja dentro de la caja); cada opción es una fila con su letra */
.modal-ejercicio-especifico .espacios-dropdown-editor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.modal-ejercicio-especifico .espacio-dropdown-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .espacio-dropdown-item + .espacio-dropdown-item { padding-top: 14px; border-top: 1px solid var(--pf-ln2); }
.modal-ejercicio-especifico .espacio-header { display: flex; align-items: center; }
.modal-ejercicio-especifico .espacio-opciones { display: flex; flex-direction: column; gap: 8px; min-width: 0; counter-reset: fd-opcion; }
.modal-ejercicio-especifico .espacio-opciones > .add-opcion-btn { margin: 0; }
.modal-ejercicio-especifico .dropdown-opcion-item { counter-increment: fd-opcion; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
.modal-ejercicio-especifico .dropdown-opcion-item::before { content: counter(fd-opcion, upper-alpha); flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--pf-sf3); color: var(--pf-t2); font: 700 var(--pf-fs-md)/1 var(--pf-f-in); transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .dropdown-opcion-item:has(.opcion-correcta-radio:checked) { background: var(--pf-ok-bg); box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px var(--pf-ok); box-shadow: inset 3px 0 0 var(--pf-ok), inset 0 0 0 1px color-mix(in srgb, var(--pf-ok) 30%, transparent); }
.modal-ejercicio-especifico .dropdown-opcion-item:has(.opcion-correcta-radio:checked)::before { background: var(--pf-ok); color: var(--pf-sf); }
.modal-ejercicio-especifico .modal-body .dropdown-opcion-item > .opcion-input { flex: 1 1 0; width: auto; min-width: 0; }

/* Banco de palabras y palabras clave: un recuadro con las pastillas arriba y el campo para sumar abajo */
.modal-ejercicio-especifico :is(.word-bank-editor, .keywords-editor) { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.modal-ejercicio-especifico :is(.word-bank-tags, .keywords-container) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: 34px; }
.modal-ejercicio-especifico .word-bank-tags:not(:has(.word-tag))::before { content: 'Aún no hay palabras en el banco'; color: var(--pf-t3); font-size: var(--pf-fs-md); }
.modal-ejercicio-especifico .keywords-container:not(:has(.keyword-chip))::before { content: 'Aún no hay palabras clave'; color: var(--pf-t3); font-size: var(--pf-fs-md); }
.modal-ejercicio-especifico :is(.word-tag, .keyword-chip) { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; min-height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--pf-m4-bg); color: var(--pf-m4-ink); font: 600 var(--pf-fs-md)/1.25 var(--pf-f-in); transition: opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
.modal-ejercicio-especifico .keyword-chip { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.modal-ejercicio-especifico :is(.word-tag-txt, .keyword-text) { min-width: 0; overflow-wrap: anywhere; }
.modal-ejercicio-especifico :is(.word-tag, .keyword-chip) > button { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 10px; opacity: .7; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, opacity var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico :is(.word-tag, .keyword-chip) > button:active { transform: scale(.97); opacity: 1; background: var(--pf-crit-bg); color: var(--pf-crit); }
.modal-ejercicio-especifico :is(.word-tag, .keyword-chip) > button:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 1px; opacity: 1; }
.modal-ejercicio-especifico :is(.word-bank-input-row, .keyword-input-wrapper) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .modal-body :is(.word-bank-input-row, .keyword-input-wrapper) > :is(.form-input, .keyword-input) { flex: 1 1 0; width: auto; min-width: 0; }
.modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn) { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; padding: 0 14px; border: 0; border-radius: 9px; background: var(--pf-g7); color: var(--pf-on-g); font: 600 var(--pf-fs-md)/1 var(--pf-f-in); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn):active { transform: scale(.97); }
.modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn):focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }

/* Banco de palabras: una fila por espacio (pastilla + lista del banco) */
.modal-ejercicio-especifico .wb-respuestas-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .wb-respuesta-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.modal-ejercicio-especifico .modal-body .wb-respuesta-item > .wb-respuesta-select { flex: 1 1 0; width: auto; min-width: 0; max-width: none; padding-right: 34px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--pf-t2) 50%), linear-gradient(135deg, var(--pf-t2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }

/* Respuesta abierta: la rúbrica es una lista de criterios con su marca en ok */
.modal-ejercicio-especifico :is(.rubric-editor, .rubric-items) { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-ejercicio-especifico .rubric-editor > .add-opcion-btn { margin: 0; }
.modal-ejercicio-especifico .rubric-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); transition: background-color var(--pf-d-fast) ease, opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); }
.modal-ejercicio-especifico .rubric-bullet { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pf-ok-bg); color: var(--pf-ok); font-size: var(--pf-fs-md); }
.modal-ejercicio-especifico .modal-body .rubric-item > .rubric-input { flex: 1 1 0; width: auto; min-width: 0; }

/* una fila, una pastilla o un chip agregados entran con opacidad y 4 px de subida */
@starting-style { .modal-ejercicio-especifico :is(.word-tag, .keyword-chip, .dropdown-opcion-item, .rubric-item) { opacity: 0; transform: translateY(4px); } }

@media (pointer: coarse) {
  .modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input) { height: 44px; }
  .modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn) { height: 44px; }
  .modal-ejercicio-especifico :is(.word-tag, .keyword-chip) { min-height: 36px; }
  .modal-ejercicio-especifico :is(.word-tag, .keyword-chip) > button { width: 32px; height: 32px; }
  .modal-ejercicio-especifico .fill-blank-response-header { height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .modal-ejercicio-especifico .dropdown-opcion-item:not(:has(.opcion-correcta-radio:checked)):hover, .modal-ejercicio-especifico .rubric-item:hover { background: var(--pf-sf3); }
  .modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn):hover { background: var(--pf-g6); }
  .modal-ejercicio-especifico :is(.word-tag, .keyword-chip) > button:hover { opacity: 1; background: var(--pf-crit-bg); color: var(--pf-crit); }
}
@media (max-width: 639px) {
  .modal-ejercicio-especifico .modal-body :is(.fill-blank-main-input, .fill-blank-alt-input) { font-size: 16px; }
  .modal-ejercicio-especifico :is(.word-tag, .keyword-chip) { font-size: var(--pf-fs-base); }
}
@media (prefers-reduced-motion: reduce) {
  @starting-style { .modal-ejercicio-especifico :is(.word-tag, .keyword-chip, .dropdown-opcion-item, .rubric-item) { transform: none; } }
  .modal-ejercicio-especifico :is(.btn-add-word, .keyword-add-btn, .word-tag > button, .keyword-chip > button):active { transform: none; }
}
/* ===== fin C6d ===== */

/* =====================================================================
   D7 · Detalle de la lección (PF-548, grupo 1) · lecciones/leccion_detail.html y sus dos fragmentos
   (partials/_criterios_cumplimiento_badge.html, partials/_panel_mejora_continua.html).
   Tipo Ficha: cabecera pf-hero, tres pestañas (Contenido · Información · Asignaciones) y, en Contenido, las secciones
   como acordeón con una columna derecha (índice, «Para estudiantes», siguiente tema). Maqueta aprobada el 13-oct-2026.
   Sin prefijo html[data-sistema]: los dos fragmentos también los incluye alguna otra página (las fichas viven en :root).
   Antes la plantilla traía un <style> con degradados, .modal-*, .btn-*, .mini-badge y hex; lo que los fragmentos de C1–C6 y el JS
   todavía necesitan está aquí, con fichas --pf-*.
   ===================================================================== */

/* ---------- la página: contenido + columna derecha ---------- */
.ldx-cont { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
@media (min-width: 1100px) { .ldx-cont { grid-template-columns: minmax(0, 1fr) 280px; padding: 20px; gap: 20px; } .ldx-indice-chips { display: none !important; } }
.ldx-indice-chips { grid-column: 1 / -1; }
.ldx-indice-chips .pf-chip b { margin-right: 2px; }
.ldx-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ldx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ldx-vacio { margin: 0; font-size: var(--pf-fs-md); color: var(--pf-t3); }

/* cabecera: el contexto (unidad · nivel) en una línea propia, aparte del estado */
.pf-hero .ldx-ctx { margin: -2px 0 2px; font-size: var(--pf-fs-lg); color: var(--pf-hero-t); overflow-wrap: anywhere; }
.pf-hero-meta [data-ldx-vis-leccion] > span { min-width: 0; }
/* «Más» sin ninguna acción para esta persona (p. ej. Coordinación en una lección en revisión): no se muestra */
.ldx-mas-wrap:not(:has(> .pf-menu > :is(a, button, form))) { display: none; }

/* sección */
.ldx-sec { border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); min-width: 0; scroll-margin-top: calc(var(--ldx-arriba, 0px) + 12px); }
.ldx-sec-cab { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; }
.ldx-sec.abierta > .ldx-sec-cab { border-bottom: 1px solid var(--pf-ln2); }
/* la cabecera de la sección abierta flota al desplazar: capa translúcida sobre el contenido */
.ldx-sec.abierta > .ldx-sec-cab { position: sticky; top: var(--ldx-arriba, 0px); z-index: 5; border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ldx-sec.abierta > .ldx-sec-cab { background: var(--pf-sf); } }
@media (prefers-reduced-transparency: reduce) { .ldx-sec.abierta > .ldx-sec-cab { background: var(--pf-sf); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.ldx-sec-tog { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0; border: 0; border-radius: var(--pf-r); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease; }
@media (hover: hover) and (pointer: fine) { .ldx-sec-tog:hover { background: var(--pf-sf2); } }
.ldx-sec-tog:active { background: var(--pf-sf3); }
.ldx-sec-tog:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.ldx-sec-n { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 700; font-size: var(--pf-fs-lg); }
.ldx-sec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ldx-sec-t > b { font-size: var(--pf-fs-xl); font-weight: 650; line-height: 1.3; color: var(--pf-t1); overflow-wrap: anywhere; }
.ldx-sec-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ldx-chev { flex: none; color: var(--pf-t3); transition: transform 200ms var(--pf-e-out); }
[aria-expanded="true"] > .ldx-chev, details[open] > summary > .ldx-chev { transform: rotate(180deg); }
.ldx-sec-acc { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; }
.ldx-sec-acc:not(:has(*)) { display: none; }
.ldx-sec-body { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--pf-sf2); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); }
/* se abre decenas de veces al día: solo un fundido corto y solo cuando la abre la persona (nada se mueve al cargar) */
.ldx-sec.ldx-recien > .ldx-sec-body { animation: pf-fade 150ms var(--pf-e-out) both; }
.ldx-sec:not(.abierta) > .ldx-sec-body { display: none; }

/* interruptor Oculta / Visible: el estado vive en aria-pressed (y data-estado), nunca en una clase de color */
.ldx-vis { height: 32px; min-width: 88px; justify-content: center; padding: 0 10px; margin: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: var(--pf-neu-bg); color: var(--pf-neu); font: 600 var(--pf-fs-xs) var(--pf-f-in); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.ldx-vis[aria-pressed="true"] { background: var(--pf-ok-bg); color: var(--pf-ok); }
.ldx-vis:active { transform: scale(.97); }
.ldx-vis[data-ocupado="1"] { opacity: .7; }
.ldx-vis:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (pointer: coarse) { .ldx-vis { height: 40px; } }
/* el interruptor del transcript (lo pinta _tarea_estimulo.html): mismo estado, mismas dos fichas */
.visibilidad-toggle[data-estado="visible"] { background: var(--pf-ok-bg); color: var(--pf-ok); }
.visibilidad-toggle[data-estado="oculta"] { background: var(--pf-neu-bg); color: var(--pf-neu); }
.visibilidad-toggle:not(.ldx-vis) { cursor: pointer; border: 0; }

/* contenido de la sección (bloques editoriales) */
.ldx-lectura { border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); }
.ldx-lectura > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: var(--pf-fs-md); color: var(--pf-t2); border-radius: var(--pf-r-lg); transition: background-color var(--pf-d-fast) ease; }
.ldx-lectura > summary::-webkit-details-marker { display: none; }
.ldx-lectura > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.ldx-lectura > summary:active { background: var(--pf-sf3); }
@media (hover: hover) and (pointer: fine) { .ldx-lectura > summary:hover { background: var(--pf-sf2); } }
.ldx-lectura > summary > .ldx-chev { margin-left: auto; }
.ldx-lectura[open] > .ldx-lectura-body { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }
.ldx-lectura-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }

/* tarea */
.ldx-tarea { border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ldx-tarea > [data-ldx-tarea-desc], .ldx-tarea > [data-ldx-tarea-estimulo] { display: contents; }
.ldx-tarea-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ldx-tarea-cab h4 { margin: 2px 0 6px; font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); overflow-wrap: anywhere; }
.ldx-tarea-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ldx-tarea-d { margin: 0; color: var(--pf-t2); font-size: var(--pf-fs-base); }
.ldx-ejs { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 50px; position: relative; }
.ldx-tarea-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }
.ldx-tarea-pie .add-ej { border-style: dashed; }

/* texto de usuario con markdown (descripción, objetivos, descripción de la tarea) */
.ldx-md { line-height: 1.65; color: var(--pf-t1); overflow-wrap: anywhere; }
.ldx-md > :first-child { margin-top: 0; }
.ldx-md > :last-child { margin-bottom: 0; }
.ldx-md p { margin: 0 0 .8em; }
.ldx-md :is(ul, ol) { margin: 0 0 .8em; padding-left: 1.4em; }
.ldx-md ul { list-style: disc; }
.ldx-md ol { list-style: decimal; }
.ldx-md li { margin: 0 0 .3em; }
.ldx-md a { color: var(--pf-g-ink); text-decoration: underline; text-underline-offset: 3px; }
.ldx-md :is(h1, h2, h3, h4) { margin: 1.1em 0 .4em; font-size: 1em; font-weight: 650; color: var(--pf-t1); }
.ldx-md code { padding: .1em .4em; border: 1px solid var(--pf-ln); border-radius: 6px; background: var(--pf-sf2); font: .9em var(--pf-f-mn); }
.ldx-md pre { margin: .8em 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--pf-ln); border-radius: var(--pf-r); background: var(--pf-sf2); }
.ldx-md pre code { padding: 0; border: 0; background: transparent; }
.ldx-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ldx-md :is(th, td) { padding: 6px 10px; border: 1px solid var(--pf-ln); text-align: left; }
.ldx-tarea-d.ldx-md { color: var(--pf-t2); }

/* columna derecha: en computadora a la derecha y fija al desplazar; en iPad y celular va después de las secciones,
   sin el índice (lo reemplazan los chips de arriba), para que «Para estudiantes» y «Siguiente tema» sigan al alcance */
.ldx-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ldx-rail > .ldx-indice { display: none; }
@media (min-width: 640px) and (max-width: 1099px) { .ldx-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* fija al desplazar y nunca más alta que lo que cabe sobre el botón flotante del chat (abajo a la derecha): si hay muchas secciones, el índice se desplaza por dentro */
@media (min-width: 1100px) { .ldx-rail { position: sticky; top: calc(var(--ldx-arriba, 0px) + 12px); align-self: start; max-height: calc(100vh - var(--ldx-arriba, 0px) - 128px); max-height: calc(100dvh - var(--ldx-arriba, 0px) - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .ldx-rail > .ldx-indice { display: flex; } }
.ldx-rail-b { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); color: inherit; text-decoration: none; min-width: 0; }
.ldx-ind { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ldx-ind a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--pf-r-sm); color: var(--pf-t2); text-decoration: none; font-size: var(--pf-fs-md); transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease; }
.ldx-ind a > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldx-ind a > .pf-num:first-child { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--pf-sf3); font-size: var(--pf-fs-xs); font-weight: 700; }
.ldx-ind a.on { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 600; }
.ldx-ind a.on > .pf-num:first-child { background: var(--pf-g7); color: var(--pf-on-g); }
@media (hover: hover) and (pointer: fine) { .ldx-ind a:not(.on):hover { background: var(--pf-sf2); } }
.ldx-vis-est { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.ldx-vis-est > i { flex: none; color: var(--pf-t3); }
#visibilidad-leccion-card[data-estado="visible"] .ldx-vis-est > i { color: var(--pf-ok); }
.ldx-vis-stats { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ldx-vis-stats:empty { display: none; }
.ldx-cascada { display: flex; gap: 4px; }
.ldx-cascada > .pf-btn { flex: 1; }
.ldx-sig { position: relative; padding-right: 36px; }
.ldx-sig b { font-size: var(--pf-fs-md); color: var(--pf-t1); overflow-wrap: anywhere; }
.ldx-sig > i { position: absolute; right: 14px; bottom: 16px; color: var(--pf-g-ink); transition: transform var(--pf-d-fast) var(--pf-e-out); }
@media (hover: hover) and (pointer: fine) { .ldx-sig:hover { background: var(--pf-sf2); } .ldx-sig:hover > i { transform: translateX(3px); } }
.ldx-sig:active { background: var(--pf-sf3); }
.ldx-sig:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }

/* «Reiniciar y planificar de nuevo»: al pie del contenido, discreto */
.ldx-peligro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px dashed var(--pf-inl); border-radius: var(--pf-r-lg); color: var(--pf-t3); font-size: var(--pf-fs-md); }
.ldx-peligro p { flex: 1 1 260px; min-width: 0; }
.ldx-peligro b { color: var(--pf-t2); }

/* ---------- pastilla de criterios (fragmento _criterios_cumplimiento_badge.html) ---------- */
.criterios-cumplimiento-panel { display: inline-block; vertical-align: middle; max-width: 100%; }
.criterios-cumplimiento-panel > summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-base) ease, color var(--pf-d-base) ease, transform var(--pf-d-press) var(--pf-e-out); }
.criterios-cumplimiento-panel > summary::-webkit-details-marker { display: none; }
.criterios-cumplimiento-panel > summary:active { transform: scale(.97); }
.criterios-cumplimiento-panel > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.criterios-cumplimiento-panel > summary > .ldx-chev { color: inherit; opacity: .7; font-size: 9px; }
.criterios-cumplimiento-lista { list-style: none; margin: 6px 0 2px; padding: 6px 10px; display: flex; flex-direction: column; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: var(--pf-sh2), inset 0 0 0 1px var(--pf-ln); color: var(--pf-t1); font-size: var(--pf-fs-sm); }
.criterios-cumplimiento-lista > li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--pf-ln2); min-width: 0; }
.criterios-cumplimiento-lista > li:first-child { border-top: 0; }
.criterios-cumplimiento-lista b { font-weight: 650; }
.criterios-cumplimiento-lista small { display: block; margin-top: 2px; font-size: var(--pf-fs-xs); color: var(--pf-t3); overflow-wrap: anywhere; }
.criterios-cumplimiento-marca { flex: none; width: 14px; font-weight: 700; color: var(--pf-crit); }
.criterios-cumplimiento-lista > li[data-estado="ok"] .criterios-cumplimiento-marca { color: var(--pf-ok); }
/* abierta, la lista ocupa su propia fila (en la cabecera o en las pastillas de la tarea); en la cabecera de la sección flota debajo */
.pf-hero-meta > .criterios-cumplimiento-panel[open], .ldx-tarea-m > .criterios-cumplimiento-panel[open] { flex: 1 0 100%; display: block; }
.ldx-sec-acc > .criterios-cumplimiento-panel { margin-right: auto; }
.ldx-sec-acc > .criterios-cumplimiento-panel[open] > .criterios-cumplimiento-lista { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); width: max-content; max-width: min(340px, calc(100vw - 48px)); margin: 0; }
.criterios-cumplimiento-panel[open] > .criterios-cumplimiento-lista { animation: pf-rise var(--pf-d-base) var(--pf-e-out) both; }

/* ---------- destrezas del currículo y señales de mejora continua (pestaña Información) ---------- */
.ldx-destrezas { display: flex; flex-direction: column; gap: 8px; }
.ldx-destreza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); }
@media (max-width: 639px) { .ldx-destreza { flex-direction: column; } }
.ldx-senales { display: flex; flex-direction: column; border-radius: var(--pf-r); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.ldx-senal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-top: 1px solid var(--pf-ln2); }
.ldx-senal:first-child { border-top: 0; }
@media (min-width: 900px) { .ldx-senal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: start; gap: 18px; } }
.ldx-senal p { margin: 0; overflow-wrap: anywhere; }
.ldx-senal small { display: block; margin-top: 2px; color: var(--pf-t3); font-size: var(--pf-fs-xs); }
.ldx-senal-ej, .ldx-senal-ev { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.ldx-senal-ej > b { color: var(--pf-t1); }
.ldx-senal-ev > .pf-pill { align-self: flex-start; }

/* un campo con la pieza .pf-inp dentro de un .pf-field (la ventana de revisión de un ejercicio bloqueado) conserva el contorno de la
   pieza: la regla de Django para campos sueltos dentro de .pf-field no lo pinta */
html[data-sistema="migrada"] .pf-field .pf-inp > :is(input, select):not([hidden]) { min-height: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ---------- ventanas propias de la página (misma cáscara que las del ejercicio: .modal-ejercicio-especifico) ---------- */
.modal-content.modal-ejercicio-especifico.ldx-modal-corto { max-width: 520px; }
/* en celular la ventana corta (eliminar, confirmar) sube desde abajo a la altura de su contenido, no a pantalla casi completa */
@media (max-width: 639px) { .modal-content.modal-ejercicio-especifico.ldx-modal-corto { height: auto; } }
.modal-content.modal-ejercicio-especifico.ldx-modal-ancho { max-width: 880px; }
.ejm-ic.ldx-ic-crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.ldx-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.ldx-check > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--pf-ln2); font-size: var(--pf-fs-base); line-height: 1.5; color: var(--pf-t1); }
.ldx-check > li:first-child { border-top: 0; }
.ldx-check-ic { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: var(--pf-fs-xs); background: var(--pf-ok-bg); color: var(--pf-ok); }
.ldx-check-ic[data-estado="aviso"] { background: var(--pf-warn-bg); color: var(--pf-warn); }

/* «Agregar ejercicio»: los 15 tipos como tarjetas seleccionables; la elección es el radio (:checked), sin depender de peer de Tailwind */
.ldx-tipos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .ldx-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ldx-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ldx-tipo { position: relative; display: block; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ldx-tipo > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ldx-tipo-card { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.ldx-tipo-card .pf-mini-ic { width: 38px; height: 38px; border-radius: 10px; font-size: var(--pf-fs-lg); }
.ldx-tipo-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ldx-tipo-t > b { font-size: var(--pf-fs-base); font-weight: 650; line-height: 1.25; color: var(--pf-t1); overflow-wrap: anywhere; }
.ldx-tipo-t > small { font-size: var(--pf-fs-sm); line-height: 1.35; color: var(--pf-t3); overflow-wrap: anywhere; }
.ldx-tipo:active .ldx-tipo-card { transform: scale(.98); }
.ldx-tipo > input:checked + .ldx-tipo-card { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.ldx-tipo > input:checked + .ldx-tipo-card .ldx-tipo-t > b { color: var(--pf-g-soft-ink); }
.ldx-tipo > input:focus-visible + .ldx-tipo-card { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ldx-tipo > input:not(:checked):hover + .ldx-tipo-card { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-inl-h); } }
@media (pointer: coarse) { .ldx-tipo-card { min-height: 72px; } }

/* editores Toast UI dentro de las ventanas de sección y tarea */
.modal-ejercicio-especifico .markdown-editor-label > span { font-weight: 600; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.modal-ejercicio-especifico .modal-section-title.markdown-editor-label { text-transform: uppercase; }
.modal-ejercicio-especifico .markdown-editor-container { border: 0; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); overflow: hidden; transition: box-shadow var(--pf-d-fast) ease; }
.modal-ejercicio-especifico .markdown-editor-container:focus-within { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px var(--pf-g-soft); }
.modal-ejercicio-especifico .markdown-editor-container .toastui-editor-defaultUI { border: 0; border-radius: 0; }
.modal-ejercicio-especifico .markdown-editor-container .toastui-editor-toolbar,
.modal-ejercicio-especifico .markdown-editor-container .toastui-editor-md-tab-container { background: var(--pf-sf2); border-bottom: 1px solid var(--pf-ln); }
.modal-ejercicio-especifico .markdown-editor-container .ProseMirror { padding: 14px; min-height: 160px; }
@media (pointer: coarse) { .modal-ejercicio-especifico .toastui-editor-defaultUI-toolbar button { width: 36px; height: 36px; } }

/* ---------- lo que los fragmentos de C1–C6 y el JS de la página necesitan (antes, el <style> de la página) ---------- */
/* ordenar ejercicios (SortableJS): la tarjeta que se arrastra, el hueco que deja y el asa; el asa lleva touch-action: none en .ejc-grip */
.ejercicio-ghost { opacity: .45; background: var(--pf-g-soft); outline: 2px dashed var(--pf-g7); outline-offset: -2px; }
.ejercicio-chosen { box-shadow: var(--pf-sh3); z-index: 100; }
.ejercicio-drag { opacity: .95; }
.ejercicios-container.sortable-fallback { min-height: 100px; }
.ejercicio-drag-handle { touch-action: none; -webkit-user-select: none; user-select: none; }

/* ---------- celular ---------- */
@media (max-width: 639px) {
  .ldx-cont { padding: 10px; }
  .ldx-sec-cab { flex-wrap: wrap; }
  /* los controles a la izquierda: el botón flotante del chat vive abajo a la derecha y no debe taparlos */
  .ldx-sec-acc { width: 100%; justify-content: flex-start; padding: 0 4px 4px; }
  .ldx-sec-acc > .criterios-cumplimiento-panel { order: 3; margin-right: 0; }
  .ldx-sec-acc > .criterios-cumplimiento-panel[open] > .criterios-cumplimiento-lista { right: auto; left: 0; }
  .ldx-sec-body { padding: 10px; }
  .ldx-tarea { padding: 12px; }
  .ldx-tarea-cab { flex-direction: column; }
  .ldx-tarea-cab > .ldx-sec-acc { padding: 0; width: 100%; }
  .ldx-tarea-pie > .pf-btn { flex: 1 1 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ldx-chev, .ldx-sig > i { transition: none; }
  .ldx-sec.ldx-recien > .ldx-sec-body, .ldx-lectura[open] > .ldx-lectura-body, .criterios-cumplimiento-panel[open] > .criterios-cumplimiento-lista { animation-name: pf-fade; }
  .ldx-tipo:active .ldx-tipo-card, .ldx-vis:active { transform: none; }
}
/* ===== fin D7 ===== */

/* ===== G4 · Lo que ve el estudiante (PF-548 grupo 4: mis lecciones, para estudiar, confirmar inicio, resolver, practicar, repaso y presentaciones) ===== */
.ldx-ctx { margin: -2px 0 2px; font-size: var(--pf-fs-lg); color: var(--pf-hero-t); overflow-wrap: anywhere; }
.ldx-ind { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ldx-ind a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--pf-r-sm); color: var(--pf-t2); text-decoration: none; font-size: var(--pf-fs-md); min-height: 40px; transition: background-color var(--pf-d-fast) ease; }
.ldx-ind a > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldx-ind a > .pf-num:first-child { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--pf-sf3); font-size: var(--pf-fs-xs); font-weight: 700; }
.ldx-ind a.on { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 600; }
.ldx-ind a.on > .pf-num:first-child { background: var(--pf-g7); color: var(--pf-on-g); }
@media (hover: hover) and (pointer: fine) { .ldx-ind a:not(.on):hover { background: var(--pf-sf2); } }
.ldx-rail-b { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); }
/* listas: barra de avance dentro de la fila */
.est-prog { display: flex; align-items: center; gap: 10px; margin-top: 6px; max-width: 360px; }
.est-prog > span { flex: 1; height: 6px; border-radius: 99px; background: var(--pf-sf3); overflow: hidden; position: relative; }
.est-prog > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--pf-g7); border-radius: inherit; }
.est-prog > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); white-space: nowrap; }
.est-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.est-busca { padding: 10px 14px; border-bottom: 1px solid var(--pf-ln2); }
/* confirmar inicio */
.est-reloj { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 140px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--pf-hero-s); text-align: center; }
.est-reloj b { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--pf-y); }
.est-reloj small { margin-top: 6px; font-size: var(--pf-fs-sm); }
.est-reglas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.est-reglas li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--pf-fs-lg); line-height: 1.5; color: var(--pf-t2); }
.est-reglas li > i { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--pf-sf2); color: var(--pf-t2); }
.est-reglas b { color: var(--pf-t1); }
.est-conf-pie { justify-content: flex-end; gap: 8px; }
@media (max-width: 639px) { .est-conf .pf-hero { grid-template-columns: 1fr; } .est-reloj { flex-direction: row; gap: 10px; justify-content: flex-start; } .est-reloj b { font-size: 32px; } .est-conf-pie > .pf-btn { flex: 1; min-height: 44px; } }
/* el reproductor (resolver, practicar, repaso): barra arriba, avance, cuerpo y pie fijo en celular */
.est-jug, .est-pres { display: flex; flex-direction: column; min-height: 100%; background: var(--pf-pg); }
.est-jug-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--pf-ln2); }
@media (prefers-reduced-transparency: reduce) { .est-jug-bar { background: var(--pf-sf); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.est-jug-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.est-jug-tit b { font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-jug-tit small { font-size: var(--pf-fs-xs); color: var(--pf-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-tiempo { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--pf-ok-bg); color: var(--pf-ok); transition: background-color var(--pf-d-base) ease, color var(--pf-d-base) ease; }
.est-tiempo[data-estado="warn"] { background: var(--pf-warn-bg); color: var(--pf-warn); }
.est-tiempo[data-estado="crit"] { background: var(--pf-crit-bg); color: var(--pf-crit); }
.est-jug-prog { height: 3px; background: var(--pf-sf3); position: sticky; top: 51px; z-index: 19; }
.est-jug-prog > span { display: block; height: 100%; width: 100%; background: var(--pf-g7); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform var(--pf-d-base) var(--pf-e-out); }
.est-jug-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px 16px 96px; }
@media (min-width: 1100px) { .est-jug-cuerpo { grid-template-columns: minmax(0, 760px) 280px; justify-content: center; padding-bottom: 32px; } }
.est-jug-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.est-tareas .pf-chip b { margin-right: 2px; }
.est-chip-c { margin-left: 4px; font-size: var(--pf-fs-xs); color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.est-tarea { display: flex; flex-direction: column; gap: 12px; }
.est-tarea h3 { margin: 0; font-size: var(--pf-fs-2xl); font-weight: 650; letter-spacing: -.01em; color: var(--pf-t1); }
.est-tarea > p { margin: 0; font-size: var(--pf-fs-lg); color: var(--pf-t2); max-width: 68ch; }
.est-ejs { display: flex; flex-direction: column; gap: 14px; }
.est-jug-rail { display: none; }
@media (min-width: 1100px) { .est-jug-rail { display: block; position: sticky; top: 72px; align-self: start; } }
.est-avance { display: flex; align-items: baseline; gap: 8px; }
.est-avance b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--pf-t1); }
.est-avance span { color: var(--pf-t3); }
.est-guardado { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.est-jug-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 90%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-top: 1px solid var(--pf-ln2); }
.est-jug-pie > .est-guardado { margin-right: auto; }
.est-jug-pie .pf-btn { min-height: 44px; }
@media (min-width: 1100px) { .est-jug:not(.est-practica) .est-jug-pie { display: none; } }
.est-cuenta { flex: none; }
/* presentación: índice a la izquierda en computadora, hoja desde abajo en celular */
.est-pres-sec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); font: inherit; cursor: pointer; text-align: left; transition: background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.est-pres-sec:active { transform: scale(.98); }
.est-pres-sec .pf-num { font-size: var(--pf-fs-xs); color: var(--pf-t3); font-weight: 700; }
.est-pres-sec b { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-pres-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px 12px 96px; }
.est-pres-ind { display: none; }
@media (min-width: 1100px) {
  .est-pres-cuerpo { grid-template-columns: 240px minmax(0, 1fr); padding: 20px 20px 96px; }
  .est-pres-ind { display: block; position: sticky; top: 72px; align-self: start; }
  .est-pres-sec { flex: 0 1 auto; pointer-events: none; background: transparent; }
  .est-pres-sec > .fa-chevron-down { display: none; }
}
.est-pres-hoja { min-width: 0; background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: 18px; padding: 20px; box-shadow: var(--pf-sh1); }
@media (min-width: 640px) { .est-pres-hoja { padding: 32px 40px; } }
.est-pres-pie { justify-content: space-between; }
.est-puntos { display: flex; gap: 6px; }
.est-puntos i { width: 7px; height: 7px; border-radius: 99px; background: var(--pf-inl); }
.est-puntos i.on { width: 20px; background: var(--pf-g7); }
@media (max-width: 639px) { .est-pres-pie .pf-btn { max-width: 44%; } .est-pres-pie .pf-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .est-sololg { display: none; } }
.est-herr { flex: none; display: flex; align-items: center; gap: 2px; }
.est-herr [aria-pressed="true"] { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
.est-colores { display: inline-flex; gap: 6px; padding: 0 6px; }
.est-colores button { width: 22px; height: 22px; border-radius: 99px; border: 0; background: var(--c); box-shadow: 0 0 0 2px var(--pf-sf), 0 0 0 3px transparent; cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.est-colores button.on { box-shadow: 0 0 0 2px var(--pf-sf), 0 0 0 4px var(--c); }
.est-colores button:active { transform: scale(.92); }
@media (max-width: 639px) { .est-pres-doc .est-herr { display: none; } }
@media (max-width: 639px) { .est-solopc { display: none !important; } .est-sig > span { display: none; } .est-sig { width: 44px; padding: 0; justify-content: center; } .est-jug-pie .est-guardado { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; } .est-jug-pie .est-guardado b { font-size: var(--pf-fs-lg); color: var(--pf-t1); } }
@media (min-width: 1100px) { .est-tareas { display: none; } }
@media (max-width: 639px) { .est-practicar > span { display: none; } .est-practicar { width: 40px; padding: 0; justify-content: center; } }
/* pie fijo: borde de luz en vez de divisor, sólido si el sistema pide menos transparencia */
.est-jug-pie { border-top: 0; box-shadow: 0 -1px 0 var(--pf-ln2), 0 -12px 24px -18px rgba(0, 0, 0, .25); }
@media (prefers-reduced-transparency: reduce) { .est-jug-pie { background: var(--pf-sf); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* con el teclado abierto en el celular, el pie se baja para no tapar la respuesta */
.est-jug-pie { transition: transform var(--pf-d-base) var(--pf-e-out); }
@media (pointer: coarse) { .est-jug:has(:is(input, textarea, select):focus) .est-jug-pie { transform: translateY(100%); } }
/* el tiempo late una sola vez al pasar a amarillo y a rojo (el JS pone data-cambio y lo quita al terminar) */
.est-tiempo[data-cambio] { animation: est-latido 600ms var(--pf-e-out) 1; }
@keyframes est-latido { 40% { transform: scale(1.06); } }
/* «Guardando…» → «Guardado»: solo un fundido corto */
.est-guardado { transition: opacity 150ms ease; }
.est-guardado[data-estado="guardando"] { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .est-jug-prog > span, .est-jug-pie { transition: none; } .est-tiempo[data-cambio] { animation: none; } }
/* en celular el botón del menú (fijo arriba a la izquierda, base.html) no tapa la barra del reproductor ni la de la presentación */
@media (max-width: 767px) { .est-jug-bar { padding-left: 68px; } }
/* el pie fijo empieza donde termina el menú nuevo (mismos cortes que sidebar_pestana.html: riel de 68 px entre 768 y 1279, 264 px desde 1280) */
@media (min-width: 768px) { html.menu-nuevo .est-jug-pie { left: 68px; } }
@media (min-width: 1280px) { html.menu-nuevo:not(.menu-riel) .est-jug-pie { left: 264px; } }
/* los avisos suben por encima del pie fijo del reproductor */
html:has(.est-jug-pie) .pf-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* los botones del pie de la presentación llevan el título de la sección vecina: se recortan en vez de ensanchar la página */
.est-pres-pie { min-width: 0; }
.est-pres-pie .pf-btn { min-width: 0; max-width: 38%; flex: 0 1 auto; }
.est-pres-pie .pf-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-pres-pie .complete-btn { flex: none; max-width: none; }
.est-pres-pie .pf-btn:only-child { max-width: 100%; margin-left: auto; }
/* ===== fin G4 ===== */

/* ===== G2 · Crear y editar lecciones IA (PF-548 grupo 2: lista, nueva lección, nueva tarea, editar, generar y progreso) ===== */
/* lista: estado con su tono y avance dentro de la fila */
.lcr-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.lcr-gen { display: flex; align-items: center; gap: 10px; margin-top: 6px; max-width: 360px; }
.lcr-gen > .pf-prog { flex: 1; }
.lcr-gen > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* formularios en pasos: cada paso es una sección de la hoja con su número; el hecho se resume en una línea */
.lcr-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .lcr-form { grid-template-columns: minmax(0, 1fr) 320px; } .lcr-rail { position: sticky; top: 16px; } }
.lcr-paso > header { display: flex; align-items: center; gap: 12px; }
.lcr-paso > header h3 { flex: 1; min-width: 0; margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); }
.lcr-num { flex: none; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-size: var(--pf-fs-sm); font-weight: 700; background: var(--pf-sf3); color: var(--pf-t2); font-variant-numeric: tabular-nums; }
.lcr-paso[data-estado="hecho"] .lcr-num { background: var(--pf-g7); color: var(--pf-on-g); }
.lcr-paso[data-estado="activo"] .lcr-num { background: var(--pf-y); color: var(--pf-y-on); }
.lcr-paso[data-estado="espera"] > header h3 { color: var(--pf-t3); }
.lcr-elegido { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--pf-fs-lg); color: var(--pf-t1); }
.lcr-elegido b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* opciones elegibles (materia, unidad): filas tocables con anillo al elegir */
.lcr-opcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .lcr-opcs.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lcr-opc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.lcr-opc:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .lcr-opc:hover { background: var(--pf-sf3); } }
.lcr-opc[aria-pressed="true"] { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.lcr-opc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lcr-opc-t b { font-weight: 600; overflow-wrap: anywhere; }
.lcr-opc-t small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.lcr-opc .lcr-unum { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pf-sf); font-weight: 700; color: var(--pf-t2); font-variant-numeric: tabular-nums; }
/* panel de la unidad elegida (lo que lee la IA) */
.lcr-ctx { display: flex; flex-direction: column; gap: 12px; }
.lcr-ctx h4 { margin: 0; font-size: var(--pf-fs-md); font-weight: 650; color: var(--pf-t1); }
.lcr-ctx ul { margin: 0; padding-left: 18px; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.lcr-lee { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lcr-lee li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--pf-fs-md); color: var(--pf-t2); line-height: 1.45; }
.lcr-lee li > i { flex: none; margin-top: 2px; width: 16px; text-align: center; color: var(--pf-g-ink); }
.lcr-lee b { color: var(--pf-t1); font-weight: 600; }
/* resumen en vivo de la tarea con IA */
.lcr-listo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lcr-listo li { display: flex; gap: 10px; align-items: flex-start; }
.lcr-listo li > i { flex: none; margin-top: 2px; color: var(--pf-t4); }
.lcr-listo li.ok > i { color: var(--pf-ok); }
.lcr-listo li span { display: flex; flex-direction: column; min-width: 0; font-size: var(--pf-fs-xs); color: var(--pf-t3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.lcr-listo li span b { text-transform: none; letter-spacing: 0; font-size: var(--pf-fs-md); color: var(--pf-t1); font-weight: 500; overflow-wrap: anywhere; }
.lcr-listo li:not(.ok):not(.opc) span b { color: var(--pf-t3); font-style: italic; }
/* cantidad de ejercicios */
.lcr-cant { display: inline-flex; align-items: center; gap: 6px; }
.lcr-cant input { width: 76px !important; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* pie del formulario: fijo abajo mientras se completa */
.lcr-pie { position: sticky; bottom: 0; z-index: 10; background: var(--pf-sf); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); }
@media (max-width: 639px) { .lcr-pie > .pf-btn:last-child { flex: 1; min-height: 44px; } }
.lcr-pie .lcr-pie-t { margin-right: auto; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
/* generar: el plan con piezas del sistema (las clases pe-* las arma el JS de la página) */
.pe-block { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--pf-ln2); }
.pe-block:first-child { border-top: 0; padding-top: 0; }
.pe-label { display: flex; align-items: center; gap: 6px; font-size: var(--pf-fs-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-t3); }
.pe-hint { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.q-input, .q-textarea, .q-select { width: 100%; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: var(--pf-r-sm); background: transparent; color: var(--pf-t1); font: inherit; font-size: var(--pf-fs-lg); line-height: 1.45; box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
.q-select { margin: 0; background: var(--pf-sf2); width: auto; }
.q-textarea { resize: none; min-height: 0; field-sizing: content; }
@supports not (field-sizing: content) { .q-textarea { resize: vertical; min-height: 64px; } }
@media (hover: hover) and (pointer: fine) { :is(.q-input, .q-textarea):hover { background: var(--pf-sf2); } }
:is(.q-input, .q-textarea, .q-select):focus-visible { outline: 0; background: var(--pf-sf); box-shadow: inset 0 0 0 1.5px var(--pf-focus); }
.q-title { font-size: var(--pf-fs-3xl); font-weight: 700; letter-spacing: -.02em; }
.q-h3 { font-size: var(--pf-fs-xl); font-weight: 650; }
.pe-objs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pe-objs li { display: flex; align-items: center; gap: 8px; }
.pe-objs li > .pf-num { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--pf-sf3); font-size: var(--pf-fs-xs); font-weight: 700; color: var(--pf-t2); }
.pe-icon-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--pf-r-sm); background: transparent; color: var(--pf-t3); cursor: pointer; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.pe-icon-btn:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .pe-icon-btn:hover { background: var(--pf-sf2); color: var(--pf-t1); } .pe-icon-btn--danger:hover { background: var(--pf-crit-bg); color: var(--pf-crit); } }
.pe-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--pf-r-sm); background: transparent; color: var(--pf-g-ink); font: 600 var(--pf-fs-md) var(--pf-f-in); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pe-add:hover { background: var(--pf-g-soft); } }
.pe-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--pf-sf2); color: var(--pf-t2); font-size: var(--pf-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.pe-badge--assets { background: var(--pf-b-soft); color: var(--pf-b-ink); }
.pe-seccion { border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); overflow: clip; }
.pe-seccion + .pe-seccion { margin-top: 12px; }
.pe-seccion__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pf-sf2); }
.pe-seccion__num { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-weight: 700; font-size: var(--pf-fs-sm); }
.pe-seccion__head .q-input { flex: 1; min-width: 0; }
.pe-seccion__tools { display: flex; gap: 2px; }
.pe-seccion__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 0; }
.pe-seccion__body { display: flex; flex-direction: column; padding: 4px 12px 12px; }
.pe-seccion.is-collapsed .pe-seccion__meta, .pe-seccion.is-collapsed .pe-seccion__body { display: none; }
.pe-tareas { display: flex; flex-direction: column; gap: 8px; }
.pe-tarea { border-radius: var(--pf-r); background: var(--pf-sf2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pe-tarea__row { display: flex; align-items: center; gap: 8px; }
.pe-tarea__icon { flex: none; color: var(--pf-t3); }
.pe-tarea__main { flex: 1; min-width: 0; }
.pe-tarea__cuota { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--pf-sf); }
.pe-tarea__cuota input { width: 40px; border: 0; background: transparent; text-align: center; font-weight: 700; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.pe-tarea__cuota-label { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.pe-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px; border-radius: var(--pf-r-sm); background: var(--pf-sf); }
@media (min-width: 640px) { .pe-ficha__campo { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; } }
.pe-ficha__campo > span { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.pe-tipos-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.pe-tipos-resumen__num { font-size: var(--pf-fs-3xl); font-weight: 700; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.pe-tipos-resumen__txt { flex: 1; min-width: 160px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.pe-tipos-resumen__chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.pe-tipo-mini { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; background: var(--pf-sf); color: var(--pf-t2); font-size: var(--pf-fs-xs); font-weight: 600; box-shadow: inset 0 0 0 1px var(--pf-ln); }
.pe-tipo-mini.rev { box-shadow: inset 0 0 0 1px var(--pf-y); }
/* barra de guardado: aparece abajo solo con cambios sin guardar */
.pe-savebar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--pf-toast-bg); color: var(--pf-toast-t); box-shadow: var(--pf-sh3); transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform var(--pf-d-base) var(--pf-e-out), opacity var(--pf-d-base) ease; }
.pe-savebar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.pe-savebar > span { flex: 1; min-width: 0; font-size: var(--pf-fs-md); }
.pe-savebar .pf-btn.ghost { color: var(--pf-toast-t); }
@media (max-width: 639px) { .pe-savebar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
/* progreso de la generación */
.lcr-avance { display: flex; flex-direction: column; gap: 14px; }
.lcr-pct { display: flex; align-items: baseline; gap: 10px; }
.lcr-pct b { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.lcr-pct span { color: var(--pf-t3); font-size: var(--pf-fs-lg); }
.lcr-avance > .pf-prog { height: 10px; border-radius: 99px; }
.lcr-avance > .pf-prog > i { border-radius: 99px; }
.lcr-ahora { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--pf-fs-lg); color: var(--pf-t1); }
.lcr-pulso { flex: none; width: 10px; height: 10px; border-radius: 99px; background: var(--pf-g7); box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-g7) 45%, transparent); animation: lcr-pulso 1.6s var(--pf-e-out) infinite; }
@keyframes lcr-pulso { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lcr-etapas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .lcr-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lcr-etapas li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.lcr-etapas li > span { display: flex; justify-content: space-between; gap: 8px; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.lcr-etapas li b { font-size: var(--pf-fs-2xl); font-weight: 700; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.lcr-etapas li b small { font-size: var(--pf-fs-md); font-weight: 500; color: var(--pf-t3); }
@media (prefers-reduced-motion: reduce) { .lcr-pulso { animation: none; } .pe-savebar { transition: opacity var(--pf-d-base) ease; transform: none; } }
/* en celular la fila deja el título a lo ancho: sin ícono de inicio y la acción solo con su ícono */
@media (max-width: 639px) { .lcr-fila > .lcr-ic { display: none; } .lcr-fila .pf-rica-acc .pf-btn.sm:not(.ico) > span { display: none; } .lcr-fila .pf-rica-acc .pf-btn.sm:not(.ico) { width: 36px; padding: 0; justify-content: center; } }
/* los campos del plan dentro de secciones y tareas no llevan caja */
.pe-seccion .q-input, .pe-tarea .q-input { background: transparent; }
/* en celular la cantidad de ejercicios baja a su propia línea para que el título de la tarea se lea entero */
@media (max-width: 639px) { .pe-tarea__row { flex-wrap: wrap; } .pe-tarea__main { flex: 1 1 calc(100% - 64px); } }
/* el paso que se abre entra corto desde abajo; el pie fijo lleva un borde de luz en vez de línea */
.lcr-paso[data-estado="activo"] { animation: lcr-entra 220ms var(--pf-e-out) both; }
@keyframes lcr-entra { from { opacity: 0; transform: translateY(6px); } }
.lcr-pie { border-top: 0; box-shadow: 0 -1px 0 var(--pf-ln2), 0 -12px 24px -18px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) { .lcr-paso[data-estado="activo"] { animation: none; } }
/* los campos del plan ganan a la regla general de campos de las páginas migradas (fondo blanco) */
html[data-sistema="migrada"] :is(.q-input, .q-textarea) { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
html[data-sistema="migrada"] .q-select { background: var(--pf-sf2); }
@media (hover: hover) and (pointer: fine) { html[data-sistema="migrada"] :is(.q-input, .q-textarea):hover { background: var(--pf-sf2); } }
html[data-sistema="migrada"] :is(.q-input, .q-textarea, .q-select):focus-visible { background: var(--pf-sf); box-shadow: inset 0 0 0 1.5px var(--pf-focus); }
/* modal «Editar criterios» del plan (se incluye en generar y planificación): sus reglas salen de la página con tokens; la ronda C7 lo rehace */
.modal-criterios-content { max-width: 720px; }
.criterios-modal-cab { background: var(--pf-g9); color: var(--pf-toast-t); }
.criterios-tab-btn { flex: 1; padding: 10px 14px; font-size: var(--pf-fs-sm); font-weight: 600; border: none; background: transparent; color: var(--pf-t3); cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--pf-d-fast) ease, border-color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
.criterios-tab-btn.active { color: var(--pf-g-ink); border-bottom-color: var(--pf-g7); background: var(--pf-g-soft); }
.criterios-tab-panel { display: none; }
.criterios-tab-panel.active { display: block; }
.criterios-form-grid { display: grid; gap: 12px; }
.criterios-form-grid label { display: block; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t2); margin-bottom: 4px; }
.criterios-form-grid :is(input, select, textarea) { width: 100%; border: 1px solid var(--pf-ln); border-radius: 10px; padding: 8px 12px; font-size: var(--pf-fs-sm); background: var(--pf-sf); color: var(--pf-t1); }
.criterios-list-item { border: 1px solid var(--pf-ln); border-radius: 12px; padding: 12px; background: var(--pf-sf2); }
.criterios-list-item.is-editing { border-color: var(--pf-g7); background: var(--pf-g-soft); }
.criterios-advanced summary { cursor: pointer; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t3); padding: 8px 0; }
.criterios-refinar-status[aria-live="polite"] { min-height: 1.25rem; }
/* ===== fin G2 ===== */

/* ===== G5 · Asignaciones y entregas (PF-548 grupo 5: mis asignaciones, detalle, asignar, editar, convertir, ver entrega y calificar) ===== */
/* filas de estudiantes en el detalle de la asignación */
.asg-fila .pf-av { width: 40px; height: 40px; font-size: 13px; }
.asg-nota { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 700; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.asg-nota small { font-weight: 500; color: var(--pf-t3); }
.asg-entregas { display: flex; align-items: center; gap: 10px; margin-top: 6px; max-width: 420px; }
.asg-entregas > .pf-prog { flex: 1; }
.asg-entregas > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* calificar: una tarjeta por ejercicio con su resultado, la respuesta comparada y los puntos */
.cal-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .cal-cuerpo { grid-template-columns: minmax(0, 1fr) 320px; } .cal-rail { position: sticky; top: 16px; } }
.cal-ejs { display: flex; flex-direction: column; gap: 14px; }
.cal-ej { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); scroll-margin-top: 16px; }
.cal-ej[data-revisar] { box-shadow: inset 3px 0 0 var(--pf-att); }
.cal-ej-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-ej-cab .pf-num { font-weight: 700; color: var(--pf-t1); }
.cal-ej-cab > .cal-max { margin-left: auto; font-size: var(--pf-fs-sm); color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.cal-ej-enun { margin: 0; font-size: var(--pf-fs-lg); color: var(--pf-t1); line-height: 1.5; }
.cal-puntos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--pf-ln2); }
.cal-puntos .pf-inp { width: 96px; }
.cal-puntos input { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-puntos .cal-de { color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.cal-puntos .pf-tg { padding: 6px 10px; margin-left: auto; }
.cal-ia { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-b-soft); color: var(--pf-b-on); font-size: var(--pf-fs-md); }
.cal-ia ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cal-ia li { display: flex; gap: 8px; align-items: flex-start; }
.cal-nota { display: flex; align-items: baseline; gap: 6px; }
.cal-nota b { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.cal-nota span { color: var(--pf-t3); font-size: var(--pf-fs-lg); }
.cal-escala { display: flex; align-items: center; gap: 8px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.cal-escala .pf-inp { width: 76px; }
.cal-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-indice a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: var(--pf-fs-sm); font-weight: 700; text-decoration: none; background: var(--pf-sf2); color: var(--pf-t2); font-variant-numeric: tabular-nums; }
.cal-indice a[data-r="correcto"] { background: var(--pf-ok-bg); color: var(--pf-ok); }
.cal-indice a[data-r="parcial"] { background: var(--pf-warn-bg); color: var(--pf-warn); }
.cal-indice a[data-r="incorrecto"] { background: var(--pf-crit-bg); color: var(--pf-crit); }
.cal-indice a[data-r="revisar"] { background: var(--pf-y); color: var(--pf-y-on); }
/* pie fijo de calificar en celular y iPad: la nota y guardar siempre a mano */
.cal-pie { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; background: var(--pf-sf); box-shadow: 0 -1px 0 var(--pf-ln2), 0 -12px 24px -18px rgba(0, 0, 0, .25); }
.cal-pie .cal-nota b { font-size: var(--pf-fs-3xl); }
.cal-pie > .pf-btn { margin-left: auto; min-height: 44px; }
@media (min-width: 1100px) { .cal-pie { display: none; } }
/* convertir en actividad: elegir qué pasa con quien no tiene nota */
.cnv-opcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .cnv-opcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cnv-opc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
.cnv-opc input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cnv-opc b { font-weight: 600; color: var(--pf-t1); }
.cnv-opc small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.cnv-opc:has(input:checked) { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.cnv-opc:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* en celular la acción de la fila queda solo con su ícono para que el título se lea entero */
@media (max-width: 639px) { .asg-fila .pf-rica-acc .pf-btn.sm:not(.ico) > span { display: none; } .asg-fila .pf-rica-acc .pf-btn.sm:not(.ico) { width: 36px; padding: 0; justify-content: center; } }
/* respuesta al toque: las opciones y el índice ceden un poco al presionar; con hover fino, un fondo; la nota late al cambiar */
.cnv-opc:active, .cal-indice a:active { transform: scale(.97); }
.cnv-opc, .cal-indice a { transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
@media (hover: hover) and (pointer: fine) { .cal-indice a:hover { box-shadow: inset 0 0 0 1.5px currentColor; } .cnv-opc:not(:has(input:checked)):hover { background: var(--pf-sf3); } }
.cal-nota b[data-cambio] { animation: est-latido 400ms var(--pf-e-out) 1; }
@media (prefers-reduced-motion: reduce) { .cnv-opc:active, .cal-indice a:active { transform: none; } .cal-nota b[data-cambio] { animation: none; } }
/* ===== fin G5 ===== */
/* ===== G3 · Planificación con la IA (PF-548 grupo 3: chat, preguntas, plan, criterios y estímulos) ===== */
/* el chat ocupa la pantalla; a la derecha (≥ 1100) el plan, los criterios, los estímulos y el contexto en pestañas */
.pln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .pln { grid-template-columns: minmax(0, 1fr) 400px; } .pln-rail { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto; } }
.pln-segs { display: flex; }
.pln-segs .pf-segs { flex: 1; display: flex; flex-wrap: nowrap; }
.pln-segs .pf-segs button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
/* la misma cifra que la pestaña de computadora (.pf-tab .c) */
.pln-segs .pf-segs button .c { margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--pf-sf3); color: var(--pf-t3); font-size: var(--pf-fs-xs); font-weight: 600; line-height: 18px; }
.pln-segs .pf-segs button.on .c { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
/* contexto de la unidad, dentro de Plan */
.pln-ctx dt, .pln-ctx dd { padding: 7px 0; }
@media (min-width: 1100px) { .pln-segs { display: none; } }
.pln-chat { display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 200px); min-height: 420px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); overflow: hidden; }
.pln-estado { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--pf-ln2); font-size: var(--pf-fs-md); color: var(--pf-t2); }
.pln-estado b { color: var(--pf-t1); font-weight: 600; }
.pln-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--pf-pg); }
.pln-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(640px, 92%); }
.pln-msg > time { font-size: var(--pf-fs-xs); color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.pln-msg.yo { align-self: flex-end; align-items: flex-end; }
.pln-msg.yo > .pln-burbuja { background: var(--pf-g7); color: var(--pf-on-g); border-radius: 16px 16px 4px 16px; }
.pln-msg.ia { align-self: flex-start; width: 100%; max-width: 760px; }
.pln-burbuja { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--pf-sf); color: var(--pf-t1); font-size: var(--pf-fs-lg); line-height: 1.5; box-shadow: var(--pf-sh1); overflow-wrap: anywhere; }
.pln-autor { display: flex; align-items: center; gap: 6px; font-size: var(--pf-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-t3); }
.pln-autor .pf-mini-ic { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
/* tarjeta del plan dentro del chat */
.pln-plan { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: var(--pf-sh1); }
.pln-plan h4 { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); letter-spacing: -.01em; }
.pln-plan .pf-pill { font-variant-numeric: tabular-nums; }
.pln-secs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pln-secs details { border-radius: var(--pf-r); background: var(--pf-sf2); }
.pln-secs summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-weight: 600; color: var(--pf-t1); }
.pln-secs summary::-webkit-details-marker { display: none; }
.pln-secs summary .pf-num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); }
.pln-secs summary small { margin-left: auto; font-weight: 500; color: var(--pf-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pln-secs .pln-sec-cuerpo { padding: 0 12px 12px 46px; font-size: var(--pf-fs-md); color: var(--pf-t2); display: flex; flex-direction: column; gap: 6px; }
.pln-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* preguntas para aclarar: chips tocables, una pregunta por bloque */
.pln-preg { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf); border: 1px solid var(--pf-ln); box-shadow: inset 3px 0 0 var(--pf-att), var(--pf-sh1); }
.pln-preg fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.pln-preg legend { padding: 0; margin-bottom: 8px; font-weight: 600; color: var(--pf-t1); font-size: var(--pf-fs-lg); }
.pln-opcs { display: flex; flex-wrap: wrap; gap: 8px; }
.pln-opc { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--pf-sf2); color: var(--pf-t1); font-size: var(--pf-fs-md); cursor: pointer; box-shadow: inset 0 0 0 1px var(--pf-ln); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.pln-opc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pln-opc:active { transform: scale(.97); }
.pln-opc:has(input:checked) { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); box-shadow: inset 0 0 0 2px var(--pf-g7); font-weight: 600; }
.pln-opc:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.pln-opc.ia { background: transparent; box-shadow: none; outline: 1px dashed var(--pf-inl); outline-offset: -1px; }
.pln-preg input[type="text"] { font-size: 16px; } /* sin zoom de iOS al enfocar */
/* escribir: fijo abajo del chat, 16 px (iOS no hace zoom), crece con el texto */
.pln-escribir { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pf-ln2); background: var(--pf-sf); }
.pln-escribir textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 10px 14px; border: 0; border-radius: 22px; background: var(--pf-sf2); color: var(--pf-t1); font: inherit; font-size: 16px; line-height: 1.4; resize: none; field-sizing: content; }
.pln-escribir textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--pf-focus); }
.pln-escribir .pf-btn { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 99px; justify-content: center; }
/* la IA está pensando: tres puntos y una línea que dice qué hace */
.pln-pensando { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--pf-sf); box-shadow: var(--pf-sh1); color: var(--pf-t2); font-size: var(--pf-fs-md); }
.pln-puntos { display: inline-flex; gap: 4px; }
.pln-puntos i { width: 6px; height: 6px; border-radius: 99px; background: var(--pf-g7); animation: pln-punto 1.2s ease-in-out infinite; }
.pln-puntos i:nth-child(2) { animation-delay: .15s; }
.pln-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes pln-punto { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* panel derecho: resumen del plan */
.pln-resumen { display: flex; flex-direction: column; gap: 12px; }
.pln-resumen h3 { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); }
.pln-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pln-cifras > span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.pln-cifras b { font-size: var(--pf-fs-2xl); font-weight: 700; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.pln-cifras small { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.pln-generar { position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(transparent, var(--pf-sf) 12px); }
@media (prefers-reduced-motion: reduce) { .pln-puntos i { animation: none; opacity: .7; } .pln-opc:active { transform: none; } }
/* un mensaje nuevo entra corto desde abajo; si estás leyendo arriba, no te mueve: aparece «Mensaje nuevo» para bajar */
.pln-msg[data-nuevo] { animation: pln-entra 220ms var(--pf-e-out) both; }
@keyframes pln-entra { from { opacity: 0; transform: translateY(6px); } }
.pln-ir-final { position: sticky; bottom: 8px; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--pf-toast-bg); color: var(--pf-toast-t); font: 600 var(--pf-fs-sm) var(--pf-f-in); box-shadow: var(--pf-sh3); cursor: pointer; transition: transform var(--pf-d-press) var(--pf-e-out); }
.pln-ir-final:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .pln-msg[data-nuevo] { animation: none; } .pln-ir-final:active { transform: none; } }
/* en computadora el chat no llega a la esquina del botón flotante (la ocupa el panel derecho): sin reserva */
@media (min-width: 1100px) { html.pf-con-chat[data-sistema] .pln .pln-escribir { padding-right: 12px; } }
/* estado del refinamiento de criterios (planificacion_criterios.js pone data-tono) */
.criterios-refinar-status { color: var(--pf-t2); }
.criterios-refinar-status[data-tono="crit"] { color: var(--pf-crit); }
/* G3a · página (leccion_planificacion.html y sus fragmentos de chat; el agente B tiene su bloque G3b debajo) */
/* líneas de estado del chat: con aviso o error cambian de tono; el botón de recargar va a la derecha */
.pln-estado { flex-wrap: wrap; }
.pln-estado > .pf-btn { margin-left: auto; }
.pln-estado[data-tono="warn"] { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pln-estado[data-tono="crit"] { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pln-estado[data-tono="warn"] b, .pln-estado[data-tono="crit"] b { color: inherit; }
.pln-espera { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: var(--pf-pg); }
/* celular e iPad: una vista a la vez (Chat · Plan · Criterios · Estímulos); el chat baja hasta dejar el campo a la vista */
@media (max-width: 1099px) {
  .pln[data-vista="chat"] .pln-rail { display: none; }
  .pln:not([data-vista="chat"]) .pln-chat { display: none; }
  .pln-rail > .pf-tabs { display: none; }
  .pln-chat { height: calc(100dvh - 320px); }
}
.pln-rail #plnPanelPlan > .pf-sheet-sec { border-top: 0; }
/* en computadora el panel mide lo mismo que el chat (sin hueco) y desplaza por dentro; «Generar» queda pegado abajo */
@media (min-width: 1100px) {
  .pln-chat, .pln-rail { height: calc(100dvh - 250px); min-height: 420px; }
  .pln-rail { display: flex; flex-direction: column; max-height: none; overflow: hidden; }
  .pln-rail > .pf-tabs { flex: none; }
  .pln-rail-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); }
}
/* mensajes */
.pln-burbuja p { margin: 0; }
.pln-burbuja p + p { margin-top: 8px; }
.pln-msg.ia > .pln-burbuja { align-self: flex-start; }
.pln-texto p { margin: 0; }
.pln-texto p + p { margin-top: 6px; }
.pln-msg .pf-help { overflow-wrap: anywhere; }
/* preguntas aclaratorias */
.pln-preguntas { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf); border: 1px solid var(--pf-ln); box-shadow: var(--pf-sh1); }
.pln-preguntas.preguntas-card-activa { box-shadow: inset 3px 0 0 var(--pf-att), var(--pf-sh1); }
.pln-preguntas .pln-preg { padding: 0; border: 0; box-shadow: none; background: transparent; }
.pln-preg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--pf-t1); font-size: var(--pf-fs-lg); }
.pln-preg-cab > i { color: var(--pf-warn); }
.pln-intro { margin: 0; font-size: var(--pf-fs-lg); line-height: 1.5; color: var(--pf-t1); }
.pln-preg .pregunta-num { margin-right: 4px; color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.pln-preg .pregunta-motivo { display: flex; gap: 6px; align-items: flex-start; }
.pln-preg .pf-inp { height: 44px; }
.pln-leidas > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.pln-leidas-lista { margin: 4px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; font-size: var(--pf-fs-md); }
.pln-leidas-lista .pregunta-readonly-q { margin: 0 0 6px; font-weight: 600; color: var(--pf-t1); }
.pln-leidas-opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* pregunta ya respondida → lo que contestó el docente (verde; azul si dejó que la IA eligiera) */
.pln-respuesta { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--pf-r-sm); background: var(--pf-g-soft); color: var(--pf-g-soft-ink); line-height: 1.45; overflow-wrap: anywhere; }
.pln-respuesta > i { flex: none; margin-top: 3px; font-size: var(--pf-fs-xs); }
.pln-respuesta.ia { background: var(--pf-b-soft); color: var(--pf-b-ink); }
/* tarjeta del plan: secciones plegables, objetivo y criterios en una línea */
.pln-secs summary { min-height: 44px; }
.pln-sec-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pln-chev { flex: none; font-size: var(--pf-fs-xs); color: var(--pf-t3); transition: transform var(--pf-d-fast) ease; }
.pln-secs details[open] > summary .pln-chev { transform: rotate(180deg); }
.pln-objetivo { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--pf-fs-lg); line-height: 1.5; color: var(--pf-t2); }
.pln-crits { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.pln-crit-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pln-crit-linea .pf-btn { min-height: 40px; }
.pln-crit-txt { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.pln-crit-det > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.pln-crit-cuerpo { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pln-crit-sec { display: flex; flex-direction: column; gap: 6px; }
.pln-crit-lista { display: flex; flex-direction: column; gap: 6px; }
/* panel Plan */
.pln-plan-res { display: flex; flex-direction: column; gap: 12px; }
.pln-plegable > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.pln-secs-res { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pln-secs-res li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.pln-secs-res b { color: var(--pf-t1); font-weight: 600; }
.pln-secs-res small { margin-left: 6px; color: var(--pf-t3); font-size: var(--pf-fs-xs); }
.pln-secs-res .pf-num, .pln-leer-sec .pf-num, .pln-n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); font-weight: 600; }
.pln-skel-t { height: 22px; width: 70%; }
.pln-skel-c { height: 64px; }
.pln-skel-l { height: 120px; }
.pln-generar .pf-btn { min-height: 44px; }
.pln-aprobado { align-items: center; flex-wrap: wrap; }
.pln-aprobado > .pf-msg { flex: 1 1 220px; }
.pln-escribir.pln-aprobado > .pf-btn { flex: none; width: auto; height: 44px; padding: 0 16px; border-radius: 10px; }
/* hojas */
@media (min-width: 768px) { .pln-hoja-ancha { width: min(560px, 100%); } }
.pln-hoja-secs li { align-items: flex-start; }
.pln-leer-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.pln-leer-sec h5 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--pf-fs-base); font-weight: 650; color: var(--pf-t1); }
/* ===== G3b · fragmentos (sin prefijo: también admisión) ===== */
/* Criterios de calidad, hoja «Editar criterios» y tarjeta de estímulos de la planificación (PF-548 C7). Los incluyen la planificación,
   «Generar» y las pantallas de admisión (sin migrar: sus fichas viven en :root, así que se ven bien en claro sin el prefijo html[data-sistema]). */
/* panel: la cifra grande, «Editar» y las filas por alcance */
.crit-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.crit-cifra { font-size: var(--pf-fs-3xl); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--pf-t1); }
.crit-cifra-t { flex: 1 1 7rem; min-width: 0; font-size: var(--pf-fs-base); color: var(--pf-t2); }
.crit-cab__editar { margin-left: auto; }
.crit-vacio { padding: 20px 8px; }
.crit-grupos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crit-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crit-leyenda__alcance { flex: 1 1 100%; font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.crit-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crit-grupo__t { display: flex; align-items: center; gap: 8px; margin: 0; }
.crit-grupo__n { padding: 0 6px; border-radius: 6px; background: var(--pf-sf3); color: var(--pf-t3); font: 600 var(--pf-fs-xs)/18px var(--pf-f-in); letter-spacing: 0; }
.crit-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crit-sec + .crit-sec { margin-top: 4px; }
.crit-sec__t { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t1); }
.crit-sec__n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); }
.crit-sec__nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crit-sec__vacio { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.crit-lista { margin: 0; padding: 0; list-style: none; }
.crit-fila { border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); min-width: 0; }
.crit-fila + .crit-fila { margin-top: 8px; }
.crit-fila__s { display: flex; align-items: flex-start; gap: 12px; padding: 12px; min-width: 0; }
.crit-fila__s > .pf-pill { flex: none; min-width: 36px; justify-content: center; }
summary.crit-fila__s { cursor: pointer; list-style: none; border-radius: var(--pf-r); -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease; }
summary.crit-fila__s::-webkit-details-marker { display: none; }
summary.crit-fila__s:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { summary.crit-fila__s:hover { background: var(--pf-sf3); } }
.crit-fila__t { flex: 1; min-width: 0; font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t1); overflow-wrap: anywhere; }
.crit-fila__t > small { display: block; margin-top: 2px; font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.crit-fila__prio { text-transform: lowercase; }
.crit-fila__chev { flex: none; margin-top: 4px; font-size: var(--pf-fs-2xs); color: var(--pf-t3); transition: transform var(--pf-d-base) var(--pf-e-out); }
.crit-fila__details[open] .crit-fila__chev { transform: rotate(180deg); }
.crit-fila__cuerpo { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
/* dentro del panel de pestañas de la planificación (.pln-rail, ya es una hoja) no llevan marco propio */
.pln-rail :is(.planificacion-criterios, .pest-card).pf-sheet { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* la hoja «Editar criterios»: desde abajo en celular, centrada de ~640 px en computadora. planificacion_criterios.js pone .active */
.crit-hoja { position: fixed; inset: 0; z-index: 10002; display: none; align-items: flex-end; justify-content: center; background: var(--pf-scrim); }
.crit-hoja.active { display: flex; animation: crit-vela var(--pf-d-base) ease both; }
.crit-hoja__caja { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 18px 18px 0 0; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); overflow: hidden; }
.crit-hoja.active .crit-hoja__caja { animation: crit-sube var(--pf-d-slow) var(--pf-e-drawer) both; }
@keyframes crit-vela { from { opacity: 0; } }
@keyframes crit-sube { from { opacity: 0; transform: translateY(32px); } }
@keyframes crit-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (min-width: 640px) {
  .crit-hoja { align-items: center; padding: 24px; }
  .crit-hoja__caja { width: min(640px, 100%); max-height: min(88vh, 780px); max-height: min(88dvh, 780px); border-radius: var(--pf-r-lg); }
  .crit-hoja.active .crit-hoja__caja { animation: crit-entra var(--pf-d-base) var(--pf-e-out) both; }
}
@media (prefers-reduced-motion: reduce) { .crit-hoja.active .crit-hoja__caja { animation: crit-vela var(--pf-d-base) ease both; } }
/* con la hoja abierta el botón flotante del chat no tapa nada (igual que con los modales) */
html:has(.crit-hoja.active) :is(#chatbot-button, .chatbot-button) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.crit-hoja__cab { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--pf-ln2); }
.crit-hoja__cab-t { flex: 1; min-width: 0; }
.crit-hoja__cab-t h3 { margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; letter-spacing: -.01em; color: var(--pf-t1); }
.crit-hoja__cab-t p { margin: 2px 0 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.crit-hoja__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.pf-segs.crit-hoja__segs { display: flex; flex-wrap: nowrap; }
.crit-hoja__segs .criterios-tab-btn { flex: 1; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--pf-t2); }
.crit-hoja__segs .criterios-tab-btn.active, .crit-hoja__segs .criterios-tab-btn[aria-selected="true"] { background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh1); }
html[data-theme="dark"] .crit-hoja__segs .criterios-tab-btn.active, html[data-theme="dark"] .crit-hoja__segs .criterios-tab-btn[aria-selected="true"] { background: var(--pf-inl); }
.crit-hoja .criterios-tab-panel { display: none; }
.crit-hoja .criterios-tab-panel.active { display: flex; flex-direction: column; gap: 12px; }
.crit-hoja__lista { display: flex; flex-direction: column; gap: 12px; }
.crit-hoja__lista > p { margin: 0; padding: 12px 0; text-align: center; font-size: var(--pf-fs-md); color: var(--pf-t3); }
.crit-hoja .criterios-list-item { padding: 14px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf2); }
.crit-hoja .criterios-list-item.is-editing { background: var(--pf-sf2); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.crit-form { display: flex; flex-direction: column; gap: 12px; }
.crit-form__par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .crit-form__par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crit-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crit-campo__t { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.crit-campo__req { color: var(--pf-crit); }
.crit-campo .pf-textarea { min-height: 72px; }
.crit-campo .pf-inp select { cursor: pointer; }
.crit-hoja .criterios-advanced > summary { display: flex; align-items: center; min-height: 32px; padding: 4px 0; cursor: pointer; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.crit-hoja .criterios-advanced > summary { list-style: none; -webkit-tap-highlight-color: transparent; }
.crit-hoja .criterios-advanced > summary::-webkit-details-marker { display: none; }
.crit-hoja .criterios-advanced > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--pf-d-base) var(--pf-e-out); }
.crit-hoja .criterios-advanced[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.crit-form__avanzado { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.crit-form__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.crit-form__eliminar { margin-left: auto; }
.crit-hoja__refinar { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--pf-ln2); }
.crit-hoja__refinar-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crit-hoja .criterios-refinar-status { margin: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.crit-hoja .criterios-refinar-status[data-tono="crit"] { color: var(--pf-crit); }
.crit-hoja__pie { flex: none; display: flex; justify-content: flex-end; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pf-ln2); background: var(--pf-sf); }
@media (max-width: 639px) { .crit-hoja__pie .pf-btn { flex: 1; } .crit-hoja__cuerpo { padding: 16px; } }
@media (pointer: coarse) { .crit-hoja .pe-add, .crit-hoja .criterios-advanced > summary { min-height: 44px; } }
/* ===== fin G3 ===== */
/* ===== G7 · Recursos del docente (PF-548 grupo 7: banco de ítems, guías, mi material, PDF e imprenta) ===== */
/* azulejo del tipo (ejercicio o estímulo): mismo tono que la familia; 40 px en filas, 44 en tarjetas */
.rec-azul { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; }
.rec-azul[data-tono="1"] { background: var(--pf-m1-bg); color: var(--pf-m1-ink); }
.rec-azul[data-tono="2"] { background: var(--pf-m2-bg); color: var(--pf-m2-ink); }
.rec-azul[data-tono="3"] { background: var(--pf-m3-bg); color: var(--pf-m3-ink); }
.rec-azul[data-tono="4"] { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.rec-azul[data-tono="5"] { background: var(--pf-m5-bg); color: var(--pf-m5-ink); }
.rec-azul.doc { background: var(--pf-sf2); color: var(--pf-t2); }
/* buscador + chips de filtros, en una barra */
.rec-buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-buscar .pf-inp { flex: 1 1 240px; height: 40px; }
.rec-buscar .pf-inp input { font-size: 16px; } /* sin zoom de iOS */
/* catálogo de tipos: tarjetas tocables enteras (la tarjeta lleva data-pf-fila y su nombre es el destino) */
.rec-tipos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .rec-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rec-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-tipo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln), var(--pf-sh1); cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.rec-tipo:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .rec-tipo:hover { box-shadow: inset 0 0 0 1.5px var(--pf-inl), var(--pf-sh2); } }
.rec-tipo-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rec-tipo-cab b { display: block; font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); line-height: 1.25; }
.rec-tipo-cab code { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.rec-tipo p { margin: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rec-tipo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.rec-tipo-pie .pf-btn { margin-left: auto; }
/* salto a grupo (guía de estímulos): chips pegados arriba al desplazarse */
.rec-saltos { position: sticky; top: 8px; z-index: 5; padding: 6px; border-radius: 14px; background: var(--pf-pg); background: color-mix(in srgb, var(--pf-pg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (prefers-reduced-transparency: reduce) { .rec-saltos { background: var(--pf-pg); backdrop-filter: none; } }
.rec-grupo-t { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); scroll-margin-top: 72px; }
/* ficha: contenido + columna derecha (≥ 1100) */
.rec-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .rec-ficha { grid-template-columns: minmax(0, 1fr) 340px; } .rec-ficha > aside { position: sticky; top: 16px; } }
.rec-demo { padding: 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); }
/* frases para el chat, con copiar */
.rec-frases { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rec-frases li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 10px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 3px 0 0 var(--pf-g7); font-size: var(--pf-fs-md); color: var(--pf-t1); line-height: 1.45; }
.rec-frases li > span { flex: 1; min-width: 0; }
.rec-frases li[data-copiada] .pf-btn { color: var(--pf-ok); }
/* mi material: zona para subir (label grande con el input de archivo dentro) */
.rec-subir { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--pf-r-lg); background: var(--pf-sf); outline: 1.5px dashed var(--pf-inl); outline-offset: -1.5px; cursor: pointer; transition: background-color var(--pf-d-fast) ease, outline-color var(--pf-d-fast) ease; }
.rec-subir input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rec-subir:focus-within { outline-color: var(--pf-g7); background: var(--pf-g-soft); }
.rec-subir b { display: block; color: var(--pf-t1); }
.rec-subir small { color: var(--pf-t3); }
.rec-subir[data-arrastrando] { outline-color: var(--pf-g7); background: var(--pf-g-soft); }
/* selector de contenido (PDF e imprenta): árbol sección › tarea › ejercicio con casillas de 44 px */
.rec-arbol { display: flex; flex-direction: column; gap: 10px; }
.rec-sec { border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); overflow: hidden; }
.rec-sec[data-apagada] { opacity: .62; }
.rec-sec[open] { padding-bottom: 6px; }
.rec-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; cursor: pointer; list-style: none; }
.rec-sec > summary::-webkit-details-marker { display: none; }
.rec-sec > summary b { flex: 1; min-width: 0; font-weight: 650; color: var(--pf-t1); overflow-wrap: anywhere; }
.rec-sec > summary small { color: var(--pf-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-sec > summary .fa-chevron-down { color: var(--pf-t3); transition: transform var(--pf-d-fast) var(--pf-e-out); }
.rec-sec[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.rec-tarea { margin: 0 12px; padding: 4px 0 10px; border-top: 1px solid var(--pf-ln2); }
.rec-tarea > .pf-lbl { display: block; padding: 8px 0 4px; }
.rec-ej { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border-radius: 10px; cursor: pointer; transition: background-color var(--pf-d-fast) ease; }
.rec-ej:has(input:checked) { background: var(--pf-g-soft); }
.rec-ej span { flex: 1; min-width: 0; color: var(--pf-t1); font-size: var(--pf-fs-md); overflow-wrap: anywhere; }
.rec-ej small { color: var(--pf-t3); font-variant-numeric: tabular-nums; }
.rec-arbol input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--pf-g7); }
/* imprenta: productos como tarjetas de radio */
.rec-prods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .rec-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rec-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-prod { position: relative; display: flex; gap: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.rec-prod input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rec-prod:active { transform: scale(.985); }
.rec-prod:has(input:checked) { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.rec-prod:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.rec-prod:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.rec-prod b { display: block; color: var(--pf-t1); font-weight: 650; }
.rec-prod small { display: block; margin-top: 2px; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.4; }
.rec-paso { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); }
.rec-paso .pf-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-sm); }
/* barra de acción pegada abajo (descargar / generar): deja libre la esquina del chat */
.rec-barra { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--pf-ln), var(--pf-sh2); }
.rec-barra > span { flex: 1; min-width: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.rec-barra > span b { color: var(--pf-t1); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-transparency: reduce) { .rec-barra { background: var(--pf-sf); backdrop-filter: none; } }
@media (min-width: 1100px) { .rec-barra.solo-movil { display: none; } }
@media (prefers-reduced-motion: reduce) { .rec-tipo:active, .rec-prod:active { transform: none; } .rec-sec > summary .fa-chevron-down { transition: none; } }
/* G7a · banco y guías */
.rec-demo > .ejercicio-interactivo { margin-bottom: 0; } /* la tarjeta del ejercicio ya está dentro del fondo de la demo */
.rec-tipo[hidden], .demo-tab-content[hidden] { display: none; } /* display propio de la pieza gana al [hidden] del navegador */
@media (prefers-reduced-motion: no-preference) { html:has(.rec-saltos) { scroll-behavior: smooth; } }
/* G7b · material, PDF e imprenta (agente B) */
/* Mi material: el nombre del archivo elegido puede ser larguísimo y sin espacios */
.rec-subir b { overflow-wrap: anywhere; }
.rec-subir .rec-azul { width: 44px; height: 44px; }
@media (max-width: 559px) { .rec-subir { padding: 16px 14px; gap: 12px; } }
/* selector del PDF y de la imprenta: la casilla de la sección tiene 44 px de alto para el dedo */
.rec-chk { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px 0 -6px -8px; border-radius: 10px; cursor: pointer; }
.rec-chk:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.rec-sec > summary .toggle-children { flex: none; width: 40px; height: 40px; margin-right: -6px; }
.rec-chev { flex: none; display: grid; place-items: center; width: 32px; height: 40px; }
.rec-sec-acc { display: flex; justify-content: flex-end; padding: 0 12px 2px; }
.rec-sec-vacia { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--pf-sf2); box-shadow: none; }
.rec-sec-vacia > b { color: var(--pf-t2); font-weight: 650; overflow-wrap: anywhere; }
/* la tarea lleva su casilla (marca todos sus ejercicios) y el título en texto normal; «Tarea N» queda como etiqueta */
.rec-tarea-cab { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border-radius: 10px; cursor: pointer; }
.rec-tarea-cab:has(input:disabled) { cursor: default; }
.rec-tarea-cab .pf-lbl { flex: none; }
.rec-tarea-t { flex: 1; min-width: 0; font-weight: 650; color: var(--pf-t1); font-size: var(--pf-fs-md); overflow-wrap: anywhere; }
.rec-tarea-cab small { flex: none; color: var(--pf-t3); font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .rec-arbol .rec-ej { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
  .rec-arbol .rec-ej small { flex-basis: 100%; padding-left: 30px; }
}
/* panel de opciones del PDF: a la derecha en computadora; debajo de 1100 px vive en la hoja y la columna se esconde */
@media (max-width: 1099px) { .rec-ficha > .rec-lado { display: none; } }
/* formato como segmentos con radios reales (la pieza .pf-segs solo conoce botones) */
.rec-segs > label { position: relative; display: inline-flex; margin: 0; }
.rec-segs > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rec-segs > label > span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; font: 600 var(--pf-fs-md) var(--pf-f-in); color: var(--pf-t2); white-space: nowrap; cursor: pointer; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
.rec-segs > label:has(input:checked) > span { background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh1); }
html[data-theme="dark"] .rec-segs > label:has(input:checked) > span { background: var(--pf-inl); }
.rec-segs > label:has(input:focus-visible) > span { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (pointer: coarse) { .rec-segs > label > span { height: 40px; } }
/* el estudiante es obligatorio para la ficha NEE: el campo se marca por un atributo, no por clases de color */
.pf-field[data-obligatorio] { padding: 12px; border-radius: var(--pf-r); background: var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
/* «Pedir impresión»: el formulario vive dentro de la hoja */
.rec-hoja-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* cinco productos en 2 o 3 columnas dejan un hueco: la última tarjeta ocupa lo que sobra */
@media (min-width: 640px) and (max-width: 1099px) { .rec-prods > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .rec-prods > :last-child:nth-child(3n + 2) { grid-column: span 2; } .rec-prods > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; } }
/* fin G7b */
/* ===== fin G7 ===== */
/* ===== G6 · Administración y capacitación de Lecciones IA (PF-548 grupo 6) ===== */
/* pestañas de la gestión (Lecciones · Tareas con IA · Asignaciones): una sola barra para las tres listas */
.adm-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-nav .pf-tabs { flex: 1; min-width: 0; }
/* contenido de una lección en la fila: tres cifras pequeñas */
.adm-cont { display: flex; gap: 4px; }
.adm-cont .pf-cifra { min-width: 52px; padding: 4px 6px; }
.adm-cont .pf-cifra > b { font-size: 15px; }
/* ajustes: índice a la izquierda (≥ 1100) y secciones; en celular el índice son chips que se deslizan */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .cfg { grid-template-columns: 240px minmax(0, 1fr); } .cfg-indice { position: sticky; top: 16px; } }
.cfg-indice nav { display: flex; flex-direction: column; gap: 2px; }
.cfg-indice a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--pf-t2); font-size: var(--pf-fs-md); font-weight: 500; text-decoration: none; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease; }
.cfg-indice a[aria-current="true"] { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cfg-indice a:not([aria-current="true"]):hover { background: var(--pf-sf2); color: var(--pf-t1); } }
.cfg-indice a .pf-pill { margin-left: auto; }
.cfg-sec { scroll-margin-top: 16px; }
.cfg-sec > .pf-sheet-sec:first-child h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); }
/* una fila de ajuste: texto a la izquierda, control a la derecha; en celular el control baja si no cabe */
.cfg-fila { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--pf-ln2); }
.cfg-fila:first-of-type { border-top: 0; }
.cfg-fila > div:first-child { flex: 1; min-width: 0; }
.cfg-fila b { display: block; color: var(--pf-t1); font-weight: 600; }
.cfg-fila small { display: block; margin-top: 2px; color: var(--pf-t3); font-size: var(--pf-fs-sm); line-height: 1.45; }
.cfg-fila[data-apagada] { opacity: .55; }
.cfg-fila small b { display: inline; }
/* el interruptor solo: sin el fondo de fila de la pieza; 44 px para el dedo */
.cfg-fila .pf-tg { flex: none; background: none; padding: 11px 4px; }
.cfg-num { width: 120px; flex: none; }
@media (max-width: 559px) { .cfg-fila { flex-wrap: wrap; } .cfg-num { width: 100%; } }
.cfg-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .cfg-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* historial: línea de tiempo con quién, qué y cuándo */
.hst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hst li { position: relative; display: flex; gap: 12px; padding: 10px 0 10px 4px; }
.hst li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -6px; width: 2px; background: var(--pf-ln2); }
.hst li:last-child::before { display: none; }
.hst .pf-av { flex: none; width: 36px; height: 36px; }
.hst b { color: var(--pf-t1); }
.hst small { display: block; color: var(--pf-t3); font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums; }
/* consecuencias de un borrado: lo que se pierde, con cifras */
.cns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cns > span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--pf-r); background: var(--pf-crit-bg); color: var(--pf-crit); }
.cns b { font-size: var(--pf-fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.cns small { font-size: var(--pf-fs-xs); }
/* audio de un estímulo (se abre desde el QR del impreso): reproductor grande y centrado */
.aud { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* capacitación: progreso del docente en la tarjeta */
.cap-prog { display: flex; align-items: center; gap: 8px; font-size: var(--pf-fs-sm); color: var(--pf-t2); font-variant-numeric: tabular-nums; }
.cap-prog .pf-prog { flex: 1; }
/* G6a · gestión */
/* azulejo de una tarea que necesita atención: rojo (error) o ámbar (por revisar / sin ejercicios) */
.rec-azul.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.rec-azul.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-row.adm-atencion { box-shadow: inset 3px 0 0 var(--pf-warn); }
.pf-row.adm-atencion:has(.rec-azul.crit) { box-shadow: inset 3px 0 0 var(--pf-crit); }
/* hoja de filtros: fechas lado a lado y la casilla con su explicación */
.adm-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 359px) { .adm-fechas { grid-template-columns: minmax(0, 1fr); } }
.adm-casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; color: var(--pf-t1); font-size: var(--pf-fs-md); cursor: pointer; }
.adm-casilla input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--pf-g7); }
.adm-casilla i { margin-right: 6px; color: var(--pf-warn); }
/* corridas y notificaciones: seis filas a la vista y «Ver todas» */
.adm-lim[data-limite]:not([data-abierta]) > .pf-row:nth-child(n+7) { display: none; }
.adm-det { margin-top: 2px; }
.adm-det > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; list-style: none; color: var(--pf-g-ink); font-size: var(--pf-fs-md); font-weight: 600; }
.adm-det > summary::-webkit-details-marker { display: none; }
.adm-log { margin-top: 6px; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); font: var(--pf-fs-xs)/1.5 var(--pf-f-mn); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-mas[hidden] { display: none; }
.adm-mas .pf-btn { margin-left: auto; }
/* ventana de resultado: el tono lo pone data-res (ok | crit), no clases de color escritas por el JS */
.adm-res-ic { width: 48px; height: 48px; border-radius: 14px; font-size: var(--pf-fs-3xl); }
.adm-res[data-res="ok"] .adm-res-ic { --pf-av-bg: var(--pf-ok-bg); --pf-av-ink: var(--pf-ok); }
.adm-res[data-res="crit"] .adm-res-ic { --pf-av-bg: var(--pf-crit-bg); --pf-av-ink: var(--pf-crit); }
/* vista previa del correo: hoja ancha y el correo en un iframe a toda la altura disponible */
@media (min-width: 768px) { .adm-prev { width: min(720px, 100%); } }
@media (max-width: 767px) { .adm-prev { max-height: none; height: 100%; border-radius: 0; } .adm-prev::before { display: none; } }
.adm-prev-cuerpo { gap: 12px; }
.adm-prev-estado { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--pf-t2); }
.adm-prev-marco { display: block; width: 100%; flex: 1 1 auto; min-height: 420px; border: 0; border-radius: var(--pf-r); background: Canvas; color-scheme: light; box-shadow: inset 0 0 0 1px var(--pf-ln); }
/* historial vacío y textos largos de la línea de tiempo */
.hst li > div { min-width: 0; overflow-wrap: anywhere; }
.hst .pf-pill { vertical-align: middle; }
.adm-vacio { padding: 12px 4px; color: var(--pf-t3); }
/* lo que se pierde al eliminar: una cifra en 0 no es una pérdida, queda apagada */
.cns > span.cero { background: var(--pf-sf2); color: var(--pf-t3); }
/* audio del QR: el título va una sola vez (en la franja); el reproductor ocupa todo el ancho */
.aud .estimulo-audio-player__subtitle { display: none; }
.aud .estimulo-audio-solo__player { display: flex; justify-content: center; }
.aud .estimulo-audio-player { width: 100%; margin-bottom: 0; }
/* fin G6a */
/* G6b · configuración y capacitación (PF-548 grupos 6 y 8, agente B) */
/* configuración: textos de apoyo, subtítulos dentro de una sección y filas más compactas que la separación de la hoja */
.cfg-sec > .pf-sheet-sec { gap: 0; }
.cfg-sec > .pf-sheet-sec > h3 { margin-bottom: 4px; }
.cfg-intro { margin: 4px 0 6px; font-size: var(--pf-fs-md); line-height: 1.5; color: var(--pf-t2); }
.cfg-sub { margin: 14px 0 0; font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); }
.cfg-sec > .pf-sheet-sec > :is(.cfg-campos, .pf-msg, .cfg-modelos, .cfg-stats, .pln-opcs) { margin-top: 14px; }
.cfg-fila .cfg-t { display: block; font-weight: 600; color: var(--pf-t1); }
.cfg-fila small a { color: var(--pf-g-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cfg-fila small .fa-check-circle { color: var(--pf-ok); }
.cfg-fila small code, .cfg-pasos code { padding: 1px 6px; border-radius: 5px; background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); font-family: var(--pf-f-mn); font-size: .9em; white-space: nowrap; }
.cfg-fila .pf-help.err { margin: 4px 0 0; }
.cfg-fila[data-apagada] { transition: opacity var(--pf-d-base) ease; }
.cfg-clave { width: 260px; flex: none; }
@media (max-width: 559px) { .cfg-clave { width: 100%; } }
.cfg-campos > .cfg-ancho { grid-column: 1 / -1; }
.cfg-campos > .pf-field { min-width: 0; }
.cfg-modelos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cfg-modelos .pf-btn { min-height: 40px; }
.cfg-pasos { margin: 6px 0 0; padding: 0 0 0 1.3em; display: flex; flex-direction: column; gap: 4px; }
ul.cfg-pasos { list-style: disc; } ol.cfg-pasos { list-style: decimal; }
.cfg-pasos a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* el índice: lista lateral (>= 1100) o chips que se deslizan, pegados arriba, en celular y tableta */
.cfg-indice .cfg-lista { display: none; padding: 8px; }
@media (max-width: 1099px) { .cfg-indice { display: contents; } }
.cfg-indice .cfg-chips { position: sticky; top: 76px; z-index: 5; margin: 0; padding: 6px 10px; border-radius: 14px; background: var(--pf-pg); background: color-mix(in srgb, var(--pf-pg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cfg-indice .cfg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cfg-indice .cfg-chips::-webkit-scrollbar { display: none; }
.cfg-indice .cfg-chips .pf-chip { min-height: 36px; flex: none; }
@media (min-width: 768px) { .cfg-indice .cfg-chips { top: 8px; } }
@media (min-width: 1100px) { .cfg-indice .cfg-lista { display: flex; } .cfg-indice .cfg-chips { display: none; } }
.cfg .cfgmm { margin-bottom: 0; }
/* tracking: cifras del mes */
.cfg-stats { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); }
.cfg-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .cfg-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cfg-cifras .pf-cifra { background: var(--pf-sf); min-width: 0; padding: 10px 8px; }
.cfg-cifras .pf-cifra > small { white-space: normal; }
.cfg-cifras .cfg-cifra-d { font-size: var(--pf-fs-xs); }
/* la barra de guardar: pegada abajo, con el conteo de cambios; el padding derecho que le deja lugar al chat lo pone .pf-libre-flotante */
.cfg-pie { position: sticky; bottom: 0; z-index: 6; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 0; border-radius: 16px 16px 0 0; background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--pf-ln), var(--pf-sh2); }
.cfg-pie .cfg-cuenta { flex: 1; min-width: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.cfg-pie .cfg-cuenta b { color: var(--pf-t1); }
/* los avisos suben para no tapar «Guardar» */
html:has(.cfg-pie) .pf-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 639px) { .cfg-pie .pf-btn { min-height: 44px; } .cfg-pie .cfg-cuenta { white-space: nowrap; } .cfg-pie .cfg-sg { display: none; } .cfg-pie .cfg-cuenta[data-n="0"] { display: none; } .cfg-pie > a.pf-btn { margin-left: auto; } }
/* capacitación: encabezados de hoja, secciones que se abren (botón con aria-expanded) y el trofeo */
.cap-t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--pf-fs-xl); font-weight: 650; color: var(--pf-t1); }
.cap-secs { display: flex; flex-direction: column; gap: 10px; }
.cap-sec { border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); overflow: hidden; }
.cap-sec-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cap-sec-cab:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; }
.cap-sec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cap-sec-t b { color: var(--pf-t1); font-weight: 650; overflow-wrap: anywhere; }
.cap-sec-t small { color: var(--pf-t3); font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums; }
.cap-sec[data-hecha] .pln-n { background: var(--pf-ok-bg); color: var(--pf-ok); }
.cap-sec-ok[hidden] { display: none; }
.cap-chev { flex: none; color: var(--pf-t3); font-size: var(--pf-fs-xs); transition: transform var(--pf-d-fast) var(--pf-e-out); }
.cap-chev.girada { transform: rotate(180deg); }
.cap-sec-cuerpo { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--pf-d-base) var(--pf-e-out), visibility 0s linear var(--pf-d-base); }
.cap-sec-cuerpo.show { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.cap-sec-in { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.cap-sec-in > * { margin-inline: 14px; }
.cap-sec-in > :first-child { margin-top: 2px; }
.cap-sec-in > :last-child { margin-bottom: 14px; }
.cap-marcar, .cap-hecha-msg { align-self: flex-start; }
.cap-marcar { min-height: 40px; }
.cap-marcar:disabled { opacity: .6; cursor: progress; }
@media (max-width: 639px) { .cap-marcar { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cap-sec-cuerpo, .cap-chev { transition: none; } }
.cap-trofeo > i { font-size: var(--pf-fs-2xl); }
/* en el formulario de crear, el interruptor se alinea con el título cuando no hay explicación */
.cap-form .cfg-fila { align-items: center; }
/* regenerar: lo que se regenera, en una línea de resumen */
.rgn-que { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rgn-n { width: 40px; height: 40px; border-radius: 11px; font-size: var(--pf-fs-lg); }
.rgn-t { display: block; margin-bottom: 4px; color: var(--pf-t1); font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.rgn-res { margin: 0; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pf-msg .rgn-res { padding: 0; background: none; color: inherit; }
.rgn-leccion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--pf-t2); font-size: var(--pf-fs-md); }
.rgn-leccion > :first-child { flex: 1 1 100%; }
.rgn-leccion b { color: var(--pf-t1); font-weight: 600; }
.rgn-consejos { margin: 0; padding-left: 1.3em; list-style: disc; color: var(--pf-t3); font-size: var(--pf-fs-sm); }
@media (max-width: 639px) { .pf-sheet-foot.compacta > .pf-btn { min-height: 44px; } }
/* fin G6b */
/* capacitación: el anillo de avance se queda al lado del título también en el celular (antes bajaba a otra línea) */
.cap-band { flex-wrap: nowrap; align-items: flex-start; }
.cap-band > .pf-band-t { flex: 1 1 0; }
@media (max-width: 559px) { .cap-band .pf-anillo-c, .cap-band .pf-anillo-c > .pf-anillo { width: 56px; height: 56px; } .cap-band .pf-anillo-c > b { font-size: 14px; } }
/* ===== fin G6 ===== */

/* ===== G8 · Store de lecciones (PF-548 grupo 8) ===== */
/* tarjetas de lección: dato clave = título, materia · nivel, copias; corazón arriba a la derecha */
.sto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .sto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sto-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln), var(--pf-sh1); cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.sto-card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .sto-card:hover { box-shadow: inset 0 0 0 1.5px var(--pf-inl), var(--pf-sh2); } }
.sto-card h3 { margin: 0; padding-right: 44px; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--pf-t1); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sto-card p { margin: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sto-pie { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--pf-ln2); font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.sto-pie b { color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.sto-pie .pf-av { width: 24px; height: 24px; font-size: 10px; }
/* corazón: 40 px, se llena con un pulso corto (solo al tocarlo) */
.sto-fav { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 99px; background: transparent; color: var(--pf-t3); cursor: pointer; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.sto-fav:active { transform: scale(.9); }
.sto-fav[aria-pressed="true"] { color: var(--pf-crit); }
.sto-fav[data-latido] i { animation: sto-latido 320ms var(--pf-e-out); }
@keyframes sto-latido { 40% { transform: scale(1.25); } }
@media (hover: hover) and (pointer: fine) { .sto-fav:hover { background: var(--pf-sf2); } }
/* carrusel horizontal de colecciones y plantillas (desliza con el dedo, se ajusta a cada tarjeta) */
.sto-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; }
.sto-carrusel > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .sto-carrusel { grid-auto-columns: calc((100% - 24px) / 3); } }
.sto-col { display: flex; gap: 12px; padding: 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); text-decoration: none; color: inherit; }
.sto-col b { display: block; color: var(--pf-t1); font-weight: 650; overflow-wrap: anywhere; }
.sto-col small { display: block; margin-top: 2px; color: var(--pf-t3); font-size: var(--pf-fs-sm); }
/* nota del curador en una colección */
.sto-nota { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 3px 0 0 var(--pf-att); font-size: var(--pf-fs-md); color: var(--pf-t2); line-height: 1.45; }
/* colores de carpeta y colección: muestras como radios (el color guardado se pinta con data-tono) */
.sto-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.sto-color { position: relative; width: 40px; height: 40px; border-radius: 99px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--pf-ln); transition: transform var(--pf-d-press) var(--pf-e-out), box-shadow var(--pf-d-fast) ease; }
.sto-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sto-color:has(input:checked) { box-shadow: 0 0 0 2px var(--pf-sf), 0 0 0 4px var(--pf-t1); }
.sto-color:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 4px; }
.sto-color:active { transform: scale(.92); }
.sto-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.sto-icono { position: relative; display: grid; place-items: center; height: 48px; border-radius: 12px; background: var(--pf-sf2); color: var(--pf-t2); font-size: 18px; cursor: pointer; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; }
.sto-icono input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sto-icono:has(input:checked) { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.sto-icono:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* ranking de estadísticas: número, título y cifra */
.sto-rank { margin: 0; padding: 0; list-style: none; counter-reset: rk; display: flex; flex-direction: column; }
.sto-rank li { counter-increment: rk; display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--pf-ln2); font-size: var(--pf-fs-md); }
.sto-rank li:first-child { border-top: 0; }
.sto-rank li::before { content: counter(rk); flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--pf-sf2); color: var(--pf-t2); font-size: var(--pf-fs-xs); font-weight: 700; }
.sto-rank li span { flex: 1; min-width: 0; color: var(--pf-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-rank li b { color: var(--pf-t1); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sto-card:active, .sto-fav:active, .sto-color:active { transform: none; } .sto-fav[data-latido] i { animation: none; } }
/* G8a · explorar (Store: lista, lección, colecciones y estadísticas) */
/* nombre de colección en tarjeta: dos líneas como mucho, sin cortar palabras largas */
.sto-nombre, .sto-col .sto-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sto-col-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--pf-fs-md); color: var(--pf-t2); line-height: 1.45; }
.sto-col.destacada { box-shadow: inset 0 0 0 1px var(--pf-ln), inset 3px 0 0 var(--pf-att); }
.rec-tipos > .sto-col { cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.rec-tipos > .sto-col:active, .sto-carrusel > .sto-col:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .rec-tipos > .sto-col:hover, .sto-carrusel > .sto-col:hover { box-shadow: inset 0 0 0 1.5px var(--pf-inl), var(--pf-sh2); } }
/* pie con acciones en la tarjeta de una colección: el texto largo del botón baja de línea en lugar de salirse */
.sto-pie-acc { flex-wrap: wrap; }
.sto-pie-acc > .pf-btn.flex-1 { min-width: 0; white-space: normal; height: auto; min-height: 40px; padding-block: 8px; line-height: 1.25; text-align: center; }
.sto-pie .pf-btn.ico { width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: -8px -8px -8px 0; }
/* contenido de la lección: secciones que se despliegan con un botón (toggleSeccion) */
.sto-secs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sto-sec { border-radius: var(--pf-r); background: var(--pf-sf2); }
.sto-sec-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--pf-r); background: transparent; color: var(--pf-t1); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.sto-sec-cab:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.sto-sec-cab .pf-num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); }
.sto-sec-cab small { margin-left: auto; font-weight: 500; color: var(--pf-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sto-sec-cab .pln-chev { transition: transform var(--pf-d-fast) ease; }
.sto-sec-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px 46px; }
.sto-sec-cuerpo.hidden { display: none; }
@media (max-width: 767px) { .sto-sec-cuerpo { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; } }
.sto-tarea { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln2); }
.sto-ejer { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--pf-r-sm); background: var(--pf-sf2); }
.sto-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* lateral de la ficha: lecciones parecidas y lista de lo que se copia */
.sto-parecidas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sto-parecidas li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--pf-ln2); }
.sto-parecidas li:first-child { border-top: 0; }
.sto-parecidas a { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-g-ink); text-decoration: none; overflow-wrap: anywhere; }
.sto-parecidas small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.sto-copia-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.sto-copia-lista i { margin-right: 8px; color: var(--pf-g-ink); }
.sto-aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-warn-bg); color: var(--pf-warn); font-size: var(--pf-fs-md); line-height: 1.45; }
.sto-aviso i { margin-top: 3px; }
/* ranking de estadísticas: la materia debajo del título, y el vacío sin tanto aire */
.sto-rank li span small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.sto-rank li { min-height: 48px; }
.sto-vacio { padding: 20px 12px; }
/* G8b · favoritos y carpetas */
/* color de carpeta o colección sin tono (gris, o uno que no está en la tabla): azulejos, muestras e íconos neutros */
.rec-azul[data-tono=""] { background: var(--pf-sf2); color: var(--pf-t2); }
.sto-color[data-tono=""] { background: var(--pf-sf3); }
.sto-color[data-tono="1"] { background: var(--pf-m1-bg); } .sto-color[data-tono="2"] { background: var(--pf-m2-bg); } .sto-color[data-tono="3"] { background: var(--pf-m3-bg); }
.sto-color[data-tono="4"] { background: var(--pf-m4-bg); } .sto-color[data-tono="5"] { background: var(--pf-m5-bg); }
/* la muestra lleva un punto con la tinta del tono: sobre el fondo pálido se distingue mejor, en claro y en oscuro */
.sto-color::before { content: ""; position: absolute; inset: 13px; border-radius: 99px; background: var(--pf-t3); }
/* colores elegidos (color_tono da «k-<color>»): cada uno con su tono propio; antes 14 colores caían en los 5 de materia */
[data-tono="k-indigo"] { --pf-k-bg: var(--pf-k-indigo-bg); --pf-k-ink: var(--pf-k-indigo-ink); }
[data-tono="k-blue"] { --pf-k-bg: var(--pf-k-blue-bg); --pf-k-ink: var(--pf-k-blue-ink); }
[data-tono="k-cyan"] { --pf-k-bg: var(--pf-k-cyan-bg); --pf-k-ink: var(--pf-k-cyan-ink); }
[data-tono="k-teal"] { --pf-k-bg: var(--pf-k-teal-bg); --pf-k-ink: var(--pf-k-teal-ink); }
[data-tono="k-emerald"] { --pf-k-bg: var(--pf-k-emerald-bg); --pf-k-ink: var(--pf-k-emerald-ink); }
[data-tono="k-green"] { --pf-k-bg: var(--pf-k-green-bg); --pf-k-ink: var(--pf-k-green-ink); }
[data-tono="k-yellow"] { --pf-k-bg: var(--pf-k-yellow-bg); --pf-k-ink: var(--pf-k-yellow-ink); }
[data-tono="k-amber"] { --pf-k-bg: var(--pf-k-amber-bg); --pf-k-ink: var(--pf-k-amber-ink); }
[data-tono="k-orange"] { --pf-k-bg: var(--pf-k-orange-bg); --pf-k-ink: var(--pf-k-orange-ink); }
[data-tono="k-red"] { --pf-k-bg: var(--pf-k-red-bg); --pf-k-ink: var(--pf-k-red-ink); }
[data-tono="k-rose"] { --pf-k-bg: var(--pf-k-rose-bg); --pf-k-ink: var(--pf-k-rose-ink); }
[data-tono="k-pink"] { --pf-k-bg: var(--pf-k-pink-bg); --pf-k-ink: var(--pf-k-pink-ink); }
[data-tono="k-purple"] { --pf-k-bg: var(--pf-k-purple-bg); --pf-k-ink: var(--pf-k-purple-ink); }
.rec-azul[data-tono^="k-"], .pf-pill[data-tono^="k-"] { background: var(--pf-k-bg); color: var(--pf-k-ink); }
.sto-color[data-tono^="k-"] { background: var(--pf-k-bg); }
.sto-color[data-tono^="k-"]::before { background: var(--pf-k-ink); }
.sto-tinte[data-tono^="k-"] { color: var(--pf-k-ink); }
.sto-color[data-tono="1"]::before { background: var(--pf-m1-ink); } .sto-color[data-tono="2"]::before { background: var(--pf-m2-ink); } .sto-color[data-tono="3"]::before { background: var(--pf-m3-ink); }
.sto-color[data-tono="4"]::before { background: var(--pf-m4-ink); } .sto-color[data-tono="5"]::before { background: var(--pf-m5-ink); }
fieldset.pf-field { margin: 0; padding: 0; border: 0; min-width: 0; }
/* ícono de carpeta dentro de un chip: con la tinta de su color */
.sto-tinte[data-tono="1"] { color: var(--pf-m1-ink); } .sto-tinte[data-tono="2"] { color: var(--pf-m2-ink); } .sto-tinte[data-tono="3"] { color: var(--pf-m3-ink); }
.sto-tinte[data-tono="4"] { color: var(--pf-m4-ink); } .sto-tinte[data-tono="5"] { color: var(--pf-m5-ink); }
.sto-barra > .pf-sheet-bar { border-bottom: 0; }
.sto-chip-nombre { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
/* tarjeta que ya no tiene a dónde ir (lección que salió del Store): no se toca entera */
.sto-card:not([data-pf-fila]) { cursor: default; }
.sto-card:not([data-pf-fila]):active { transform: none; }
/* al quitar o mover una tarjeta de la vista, sale con un fundido corto */
.sto-card[data-saliendo] { opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.sto-meta .pf-pill { max-width: 100%; }
@media (pointer: coarse) { .sto-pie .pf-btn.sm { min-height: 40px; } }
/* franja de una carpeta o colección: el azulejo a la izquierda y el texto con el resto del ancho */
.sto-band-ic { width: 48px; height: 48px; font-size: 20px; border-radius: 13px; }
.sto-band-ic + .pf-band-t { flex: 1 1 200px; }
/* fila numerada de una colección (administración) y su botón «Quitar» */
.sto-orden { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--pf-sf2); color: var(--pf-t2); font-size: var(--pf-fs-sm); font-weight: 700; }
.pf-btn.ghost.sto-quitar { color: var(--pf-crit); }
@media (max-width: 639px) { .pf-btn.sto-quitar { width: 40px; padding: 0; } }
@media (pointer: coarse) { .pf-btn.sto-quitar { min-height: 40px; } }
/* «Avanzado» del formulario de colecciones: criterios JSON, en una caja que se abre */
.sto-avanzado { border-radius: var(--pf-r); background: var(--pf-sf2); }
.sto-avanzado > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; list-style: none; cursor: pointer; font-weight: 600; color: var(--pf-t2); font-size: var(--pf-fs-md); }
.sto-avanzado > summary::-webkit-details-marker { display: none; }
.sto-avanzado > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; border-radius: var(--pf-r); }
.sto-avanzado-chev { margin-left: auto; font-size: 10px; color: var(--pf-t3); transition: transform var(--pf-d-fast) var(--pf-e-out); }
.sto-avanzado[open] .sto-avanzado-chev { transform: rotate(180deg); }
.sto-avanzado > .pf-field { padding: 0 14px 14px; }
html[data-sistema="migrada"] .sto-avanzado textarea { font-family: var(--pf-f-mn); font-size: var(--pf-fs-sm); }
@media (prefers-reduced-motion: reduce) { .sto-card[data-saliendo] { transition: none; } .sto-avanzado-chev { transition: none; } }
/* fin G8b */
/* ===== fin G8 ===== */

/* ===== A1 · Admisiones: solicitudes y ficha (PF-554 grupo 1; maqueta v2 aprobada por Renato el 14-oct-2026) ===== */
/* etapas del proceso: cifra grande + nombre; tocar filtra la lista con la misma cuenta (estado actual) */
.ads-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 2px; overscroll-behavior-x: contain; }
.ads-paso { scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t2); text-decoration: none; font-size: var(--pf-fs-sm); line-height: 1.3; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.ads-paso > b { font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1.1; color: var(--pf-t1); }
.ads-paso.cero > b { color: var(--pf-t4); }
.ads-paso[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--pf-g7); color: var(--pf-t1); }
.ads-paso:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ads-paso:hover { box-shadow: inset 0 0 0 1.5px var(--pf-inl), var(--pf-sh1); } }
/* tablero: una columna por etapa, se desliza de lado; la columna destino se marca al arrastrar */
.ads-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 272px); gap: 12px; align-items: start; overflow-x: auto; padding: 14px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.ads-col { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-height: 140px; padding: 10px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); transition: box-shadow var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
.ads-col-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 4px; }
.ads-col-cab > b { font-size: var(--pf-fs-md); color: var(--pf-t2); }
.ads-col.ads-soltar { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-focus); }
.ads-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln), var(--pf-sh1); cursor: grab; transition: opacity var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.ads-tarjeta:active { cursor: grabbing; }
.ads-tarjeta.ads-arrastrando { opacity: .45; }
.ads-tarjeta.ads-guardando { opacity: .7; pointer-events: none; }
.ads-t { font-weight: 600; color: var(--pf-t1); text-decoration: none; overflow-wrap: anywhere; line-height: 1.35; }
.ads-tarjeta > small { color: var(--pf-t3); font-size: var(--pf-fs-sm); }
.ads-tarjeta > .pf-pill { align-self: flex-start; }
.ads-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.ads-hueco { display: grid; place-items: center; min-height: 56px; border: 2px dashed var(--pf-focus); border-radius: var(--pf-r); color: var(--pf-ok); font-size: var(--pf-fs-sm); font-weight: 600; }
.ads-vacia { margin: 0; padding: 18px 8px; text-align: center; color: var(--pf-t3); font-size: var(--pf-fs-sm); }
.ads-menu-t { padding: 6px 10px 4px; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t3); }
/* por revisar: la acción que más se usa a la vista; la fila resuelta se queda con «Deshacer» */
.ads-rapidas { display: flex; align-items: center; gap: 6px; }
.ads-hecha { opacity: .75; }
@media (max-width: 639px) { .ads-rapidas .pf-btn.sm:not(.ico) > span { display: none; } .ads-rapidas .pf-btn.sm:not(.ico) { width: 36px; padding: 0; justify-content: center; } }
/* ficha: dentro de la hoja con pestañas, datos a la izquierda y contacto/solicitud a la derecha (≥ 1100) */
.ads-ficha { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ads-ficha { grid-template-columns: minmax(0, 1fr) 340px; } .ads-ficha > aside { border-left: 1px solid var(--pf-ln2); } }
.pf-tab .c.crit, .pf-tab.on .c.crit, .pf-tab[aria-selected="true"] .c.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
/* ficha: contactos tocables (WhatsApp o correo) */
.ads-contactos { display: flex; flex-direction: column; gap: 6px; }
.ads-contacto { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: var(--pf-r); background: var(--pf-sf2); color: inherit; text-decoration: none; }
.ads-contacto b { display: block; color: var(--pf-t1); font-weight: 600; }
.ads-contacto small { display: block; color: var(--pf-t3); font-size: var(--pf-fs-sm); overflow-wrap: anywhere; }
.ads-contacto > i { margin-left: auto; color: var(--pf-ok); font-size: 18px; }
/* convertir: de la solicitud a la matrícula */
.ads-paso-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ads-flecha { color: var(--pf-t4); }
@media (max-width: 559px) { .ads-flecha { transform: rotate(90deg); } }
/* campos: con error o por revisar (los pinta el servidor; ya no hay bordes rojos/verdes desde JS) */
.ads-mal { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.ads-revisar { box-shadow: inset 0 0 0 1.5px var(--pf-att); }
/* imprimir la ficha: sin menú, cabecera ni botones */
/* imprimir la ficha (.ads-imprimir en su contenedor): sin menú lateral, cabecera ni botones, y todas las pestañas a la vista */
@media print {
  body:has(.ads-imprimir) :is(#sidebar, #mobileToggle, #sidebarOverlay, #mainContent > header) { display: none !important; }
  body:has(.ads-imprimir) #mainContent { margin-left: 0 !important; }
  .ads-imprimir :is(.pf-hero .pf-btn, .pf-hero .pf-menu-wrap, .pf-tabs, .pf-sheet-foot, .pf-msg .pf-btn) { display: none !important; }
  .ads-imprimir [role="tabpanel"][hidden] { display: block !important; }
}
@media (prefers-reduced-motion: reduce) { .ads-paso:active { transform: none; } }
/* A1a · lista y tablero (PF-554, grupo 1, agente A) */
/* «hace 2 días» junto a la pastilla del estado; la fecha completa va en el título y para el lector de pantalla */
.ads-desde { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ads-desde > i { font-size: var(--pf-fs-xs); }
/* WhatsApp: botón de solo ícono en verde de «bien» */
.pf-btn.ico.ghost.ads-wa { color: var(--pf-ok); }
/* «Solo {año}»: el chip es una etiqueta con su casilla escondida (el foco se ve en el chip) */
.pf-chip:has(> input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* «Cambiar estado» (hoja) y «Etapas visibles» (hoja): una lista de filas tocables de 48 px */
.ads-estados, .ads-etapas { display: flex; flex-direction: column; gap: 6px; }
.ads-estado { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; padding: 0 12px; border: 0; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t1); text-align: left; cursor: pointer; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.ads-estado:active:not([disabled]) { transform: scale(.98); }
.ads-estado:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.ads-estado[disabled] { cursor: default; opacity: .6; }
.ads-estado[disabled]::after { content: "Ahora"; margin-left: auto; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-t3); }
@media (hover: hover) and (pointer: fine) { .ads-estado:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--pf-inl); } }
.ads-etapa { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--pf-r); background: var(--pf-sf2); cursor: pointer; }
.ads-etapa > input { flex: none; width: 18px; height: 18px; accent-color: var(--pf-g7); }
.ads-etapa > .pf-num { margin-left: auto; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
/* tablero: la columna lleva su propia lista con desplazamiento; sin permiso de cambiar estado se mira nada más */
.ads-zona { display: flex; flex-direction: column; gap: 8px; min-height: 44px; max-height: min(68dvh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 4px; margin: -2px; }
.ads-zona > .ads-hueco { display: none; }
.ads-col.ads-soltar .ads-zona > .ads-hueco { display: grid; }
.ads-col.embudo-column-hidden { display: none; }
.ads-tarjeta:not([draggable="true"]) { cursor: default; }
.ads-tarjeta .pf-btn.ico.sm { width: 36px; height: 36px; }
.ads-tablero { align-items: stretch; }
/* la última tarjeta de cada columna no queda bajo el botón del chat al llegar al final */
html.pf-con-chat .ads-tablero { padding-bottom: 76px; }
.ads-zona { flex: 1 1 auto; }
.ads-pie { flex-wrap: wrap; }
.ads-pie > :last-child:not(:first-child) { margin-left: auto; }
.ads-tarjeta .ads-desde { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .ads-estado:active:not([disabled]) { transform: none; } }
/* A1b · ficha y formularios (editar, nueva solicitud y convertir) */
/* barra de abajo de los formularios en pestañas: pegada a la pantalla; el padding del botón del chat lo pone .pf-libre-flotante */
.ads-barra { position: sticky; bottom: 0; z-index: 10; gap: 10px 12px; background: var(--pf-sf); border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh2); font-size: var(--pf-fs-md); }
.ads-barra > :is(a, button) { flex: none; min-height: 40px; }
@media (max-width: 639px) { .ads-barra > span { flex: 1 1 100%; } .ads-barra > :is(a, button):last-child { flex: 1; } }
/* la ficha: la columna de contacto y solicitud no se estira más de lo que dice su contenido */
.ads-ficha > aside .pf-kv { grid-template-columns: minmax(104px, 40%) minmax(0, 1fr); }
.ads-contactos > .flex > .pf-btn { align-self: stretch; height: auto; min-width: 44px; }
/* las pastillas de estado dentro del menú «Cambiar estado» (que vive dentro de la cabecera verde) conservan su tono: la regla de la cabecera las pone translúcidas */
.pf-menu > form > button > .pf-pill { white-space: normal; height: auto; min-height: 22px; padding-block: 2px; text-align: left; }
.pf-hero .pf-menu .pf-pill:not([data-tono]) { background: var(--pf-neu-bg); color: var(--pf-neu); }
.pf-hero .pf-menu .pf-pill.ok:not([data-tono]) { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-hero .pf-menu .pf-pill.warn:not([data-tono]) { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-hero .pf-menu .pf-pill.info:not([data-tono]) { background: var(--pf-info-bg); color: var(--pf-info); }
.pf-hero .pf-menu .pf-pill.crit:not([data-tono]) { background: var(--pf-crit-bg); color: var(--pf-crit); }
/* convertir: el resumen «solicitud → matrícula» */
.ads-paso-a .pf-av { flex: none; }
/* ===== fin A1 ===== */

/* ===== A2 · Admisiones: estadísticas, análisis, embudo de ventas y reporte Meta (PF-554 grupo 2; maqueta del 14-oct-2026, grupos autónomos aprobados por Renato) ===== */
/* años como chips sobre la cabecera oscura */
:is(.pf-hero, .pf-band) .ade-anios .pf-chip { background: rgba(255, 255, 255, .06); color: var(--pf-hero-t); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:is(.pf-hero, .pf-band) .ade-anios .pf-chip.on { background: var(--pf-y); color: var(--pf-y-on); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { :is(.pf-hero, .pf-band) .ade-anios .pf-chip:not(.on):hover { background: rgba(255, 255, 255, .12); } }
.ade-anios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.ade-anios::-webkit-scrollbar { display: none; }
.ade-anios .pf-chip { flex: none; }
/* variación de una cifra */
.ade-delta { font-weight: 650; font-variant-numeric: tabular-nums; }
.ade-delta.sube { color: var(--pf-mint); } .ade-delta.baja { color: var(--pf-toast-bad); }
/* la cabecera es oscura en los dos temas: en oscuro el rojo claro es --pf-crit (toast-bad se invierte) */
html[data-theme="dark"] .ade-delta.baja { color: var(--pf-crit); }
/* leyenda corta de un gráfico, en su cabecera */
.ade-ley { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ade-ley > i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; background: var(--c, var(--pf-t4)); }
.ade-push { margin-left: auto; }
/* el panel: secciones separadas por línea dentro de una sola hoja; dos columnas ≥ 1100 */
.ade-panel > .pf-sheet-sec + .pf-sheet-sec, .ade-panel > .pf-cols, .ade-panel > .pf-cols + .pf-sheet-sec { border-top: 1px solid var(--pf-ln2); }
.ade-cols { gap: 0; }
@media (min-width: 1100px) { .ade-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ade-cols > .pf-sheet-sec + .pf-sheet-sec { border-left: 1px solid var(--pf-ln2); } }
@media (max-width: 1099px) { .ade-cols > .pf-sheet-sec + .pf-sheet-sec { border-top: 1px solid var(--pf-ln2); } }
.ade-barras.pf-barras > div { padding-inline: 0; }
.ade-barras .pf-pill { max-width: 100%; }
.ade-mas { margin-top: 8px; }
/* tres cifras en fila (mes contra años, proyección, simulador) */
.ade-mes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ade-mes > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); min-width: 0; }
.ade-mes b { font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1.1; color: var(--pf-t1); }
.ade-mes b.ok { color: var(--pf-ok); }
.ade-mes small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
@media (max-width: 559px) { .ade-mes { grid-template-columns: minmax(0, 1fr); } }
/* mapa de calor: la intensidad entra por --i (0 a 1) y se mezcla con el azul del sistema; los números fuertes pasan a blanco */
.ade-calor-caja { border-radius: var(--pf-r); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.ade-calor { min-width: 520px; font-variant-numeric: tabular-nums; }
.ade-calor :is(th, td) { padding: 8px 10px; text-align: center; font-size: var(--pf-fs-sm); border-bottom: 1px solid var(--pf-ln2); }
.ade-calor thead th { font-weight: 600; color: var(--pf-t3); background: var(--pf-sf2); }
.ade-calor tbody th { text-align: left; font-weight: 600; color: var(--pf-t2); position: sticky; left: 0; background: var(--pf-sf); }
.ade-calor td[style*="--i"] { background: var(--pf-sf2); background: color-mix(in srgb, var(--pf-b7) calc(var(--i) * 85%), var(--pf-sf)); color: var(--pf-t1); }
.ade-calor td.fuerte { color: var(--pf-on-g); font-weight: 650; }
.ade-calor :is(td.t, tr.t > *) { font-weight: 650; color: var(--pf-t1); background: var(--pf-sf2); }
/* filtros del análisis en la franja */
.ade-filtro .pf-inp { min-width: 140px; }
/* cuatro tasas del periodo */
@media (min-width: 900px) { .ade-tasas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* embudo: barras que se angostan, la de mayor pérdida en ámbar */
.ade-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ade-embudo li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); overflow: hidden; isolation: isolate; }
.ade-embudo li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); background: var(--pf-b-soft); z-index: -1; }
.ade-embudo li.peor::before { background: var(--pf-warn-bg); }
.ade-e-n { font-weight: 600; color: var(--pf-t1); }
.ade-embudo b { font-size: var(--pf-fs-xl); font-weight: 700; color: var(--pf-t1); }
.ade-embudo small { grid-column: 1 / -1; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ade-embudo li.peor small { color: var(--pf-warn); font-weight: 600; }
/* simulador */
.ade-sim { display: flex; flex-direction: column; gap: 14px; }
.ade-rango { width: 100%; height: 44px; accent-color: var(--pf-g7); }
/* reporte Meta: el vigente, la zona para soltar el archivo y las columnas */
.ade-vigente { display: flex; align-items: center; gap: 12px; }
.ade-vigente .pf-pill { margin-left: auto; flex: none; }
.ade-soltar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var(--pf-inl); border-radius: var(--pf-r-lg); text-align: center; color: var(--pf-t2); cursor: pointer; transition: border-color var(--pf-d-fast) ease, background-color var(--pf-d-fast) ease; }
.ade-soltar > i { font-size: 26px; color: var(--pf-g-ink); }
.ade-soltar b { color: var(--pf-t1); }
.ade-soltar small { color: var(--pf-t3); }
.ade-soltar.encima, .ade-soltar:focus-within { border-color: var(--pf-focus); background: var(--pf-g-soft); }
.ade-columnas > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--pf-t2); }
/* A2a · panel de estadísticas (PF-554 grupo 2, agente A): enlaces y bloques plegables, tablas del panel, cifras sueltas y mini gráficos por nivel */
.ade-lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 var(--pf-fs-sm) var(--pf-f-in); color: var(--pf-g-ink); text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ade-lnk:hover { text-decoration: underline; } }
summary.ade-lnk { list-style: none; width: fit-content; }
summary.ade-lnk::-webkit-details-marker { display: none; }
summary.ade-lnk::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--pf-d-fast) ease; }
details[open] > summary.ade-lnk::after { transform: rotate(-135deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { summary.ade-lnk::after { transition: none; } }
.ade-ocultar { display: none; }
details[open] > summary .ade-ver { display: none; }
details[open] > summary .ade-ocultar { display: inline; }
.ade-det > :not(summary) { margin-top: 12px; }
.ade-mas-d > .pf-barras { border-top: 1px solid var(--pf-ln2); }
/* la cabecera de una sección cede el sitio al título largo: la pastilla o el enlace bajan en vez de apretarlo */
.ade-panel .pf-sheet-sec > header { flex-wrap: wrap; row-gap: 6px; }
.ade-panel .pf-sheet-sec > header > h3 { flex: 1 1 14rem; min-width: 0; text-wrap: balance; }
/* cifras sueltas: se reparten solas según el ancho; la variación vuelve a color de estado */
.ade-mes.auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ade-mes b.crit { color: var(--pf-crit); }
.ade-mes > .ade-alto { background: var(--pf-crit-bg); }
.ade-mes > .ade-bajo { background: var(--pf-ok-bg); }
/* tablas del panel: más bajas que la lista general, con la fila de totales marcada */
.ade-tbl td { height: 44px; padding-block: 6px; }
.ade-tbl .ade-total td { font-weight: 650; color: var(--pf-t1); background: var(--pf-sf2); border-top: 1px solid var(--pf-ln); }
.ade-tbl .ade-fila-actual td { background: var(--pf-g-soft); }
.ade-t-ok { color: var(--pf-ok); } .ade-t-crit { color: var(--pf-crit); } .ade-t-g { color: var(--pf-g-ink); }
.ade-par[data-par="actual"] td { background: var(--pf-info-bg); }
.ade-par[data-par="posible"] td { background: var(--pf-warn-bg); }
.ade-lista { margin: 6px 0 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.ade-siglas { columns: 2 240px; display: block; }
.ade-siglas > li { break-inside: avoid; margin-bottom: 4px; }
/* mapa de calor: más bajo, el cero apagado y los 4 mejores meses de cada nivel con borde verde (el más grueso es el 1.º) */
.ade-calor td { height: 40px; }
.ade-cero { color: var(--pf-t4); }
.ade-calor td[data-rango] { color: var(--pf-t1); font-weight: 650; }
.ade-calor td[data-rango="1"] { box-shadow: inset 0 0 0 3px var(--pf-ok); }
.ade-calor td[data-rango="2"] { box-shadow: inset 0 0 0 2.5px var(--pf-ok); }
.ade-calor td[data-rango="3"] { box-shadow: inset 0 0 0 2px var(--pf-ok); }
.ade-calor td[data-rango="4"] { box-shadow: inset 0 0 0 1.5px var(--pf-ok); }
.ade-calor td.fuerte[data-rango] { color: var(--pf-on-g); }
/* comparativa por nivel: una tarjeta por nivel con su mini gráfico */
.ade-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ade-mini { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); min-width: 0; }
.ade-mini-t { margin: 0; font-size: var(--pf-fs-base); font-weight: 650; color: var(--pf-t1); overflow-wrap: anywhere; }
.pf-graf.ade-mini-g { height: 160px; }
/* etapas y niveles: nombre más ancho y la pastilla de un estado largo se parte en dos líneas en vez de cortarse */
.ade-barras.pf-barras.linea > div { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) auto; }
.ade-barras .pf-pill { height: auto; min-height: 22px; padding-block: 3px; line-height: 1.25; white-space: normal; }
/* el texto solo para lectores dentro del chip «General» se queda dentro de la tira que se desliza (si no, ensancha la página) */
.ade-anios .pf-chip { position: relative; }
/* en computadora la tira de años cabe en dos filas antes que cortarse (en el celular se desliza) */
@media (min-width: 901px) { .ade-anios { flex-wrap: wrap; overflow: visible; } }
/* las cifras no se comen el ancho de los años y los destinos: sus subtítulos largos bajan de línea */
@media (min-width: 901px) { .pf-hero:has(.ade-anios) .pf-hero-k { width: min(500px, 46vw); } }
/* en el celular la etapa o el nivel va arriba con su cifra y la barra debajo: la pastilla de un estado largo no se corta */
@media (max-width: 559px) {
  .ade-barras.pf-barras.linea > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ade-barras.pf-barras.linea .pf-barra { grid-column: 1 / -1; order: 3; }
}
/* A2b · análisis, embudo y Meta (PF-554 grupo 2, agente B) */
/* gráficos con leyenda larga (quincenas por nivel): más altos que el estándar para que la leyenda no aplaste el área de barras */
.pf-graf.ade-graf-alta { height: clamp(300px, 42vw, 440px); }
/* conmutadores y chips con objetivo táctil de 40 px en pantallas táctiles */
@media (pointer: coarse) { .ade-segs button { height: 40px; } .ade-anios .pf-chip { height: 40px; } }
/* campos de la franja a 16 px en celular (si no, iOS agranda la página al tocarlos) */
@media (max-width: 767px) { .ade-filtro select { font-size: 16px; } .ade-filtro .pf-inp { flex: 1 1 140px; } }
.ade-filtro { align-items: center; }
/* cifras sueltas en una rejilla que se reparte sola (comparativa anual, proyección, estadísticas de cálculo) */
.ade-cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ade-cifras > li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); min-width: 0; }
.ade-cifras > li > span { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ade-cifras > li > b { font-size: var(--pf-fs-2xl); font-weight: 700; line-height: 1.15; color: var(--pf-t1); overflow-wrap: anywhere; }
.ade-cifras > li > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ade-cifras > li.on { background: var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.ade-cifras > li.on > span { color: var(--pf-g-soft-ink); font-weight: 600; }
/* tres o cuatro cifras en fila (métricas de Meta) */
.ade-mes.ade-mes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ade-mes.ade-mes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ade-mes > .pf-msg { grid-column: 1 / -1; }
#resultadosSimulacion:empty { display: none; }
/* listas cortas con viñeta de ícono (recomendaciones, insights) */
.ade-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.ade-lista > li { display: flex; gap: 10px; align-items: flex-start; }
.ade-lista > li > i { flex: none; margin-top: 3px; color: var(--pf-warn); }
.ade-lista.ade-lista-sm { gap: 4px; font-size: var(--pf-fs-sm); color: inherit; }
.ade-lista.ade-lista-sm > li::before { content: "•"; flex: none; }
/* dos gráficos lado a lado, cada uno con su título */
.ade-fig { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ade-fig > b { color: var(--pf-t2); }
/* tablas del análisis: filas más bajas que las de una lista, primera columna como título de fila, pie con totales */
.pf-tbl.ade-tbl td { height: 48px; }
.pf-tbl.ade-tbl :is(tbody, tfoot) th { padding: 0 12px; font: 600 var(--pf-fs-md) var(--pf-f-in); letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; color: var(--pf-t1); border-bottom: 1px solid var(--pf-ln2); }
.pf-tbl.ade-tbl tr:last-child :is(td, th) { border-bottom: 0; }
.pf-tbl.ade-tbl tr.actual > * { background: var(--pf-warn-bg); }
.pf-tbl.ade-tbl tr[data-tipo="parcial"] > * { background: var(--pf-warn-bg); }
.pf-tbl.ade-tbl tr[data-tipo="proyectado"] > * { background: var(--pf-sf2); }
.pf-tbl.ade-tbl tr.ade-ctx > td { height: auto; padding: 8px 12px; font-size: var(--pf-fs-sm); color: var(--pf-t2); background: var(--pf-sf2); white-space: normal; }
.pf-tbl.ade-tbl tfoot tr.t > * { font-weight: 650; color: var(--pf-t1); background: var(--pf-sf2); border-top: 1px solid var(--pf-ln); }
html[data-sistema="migrada"] .overflow-x-auto > .pf-tbl.ade-ancha { min-width: 980px; }
/* mapa de calor: filas más bajas y fila de totales también fija a la izquierda; el de matriculados va en verde */
.ade-calor tbody td, .ade-calor tbody th { height: 44px; }
.ade-calor tfoot th { position: sticky; left: 0; text-align: left; font-weight: 650; color: var(--pf-t1); background: var(--pf-sf2); font-size: var(--pf-fs-sm); letter-spacing: 0; text-transform: none; padding: 8px 10px; }
/* la intensidad máxima se limita a 60 % y el número queda siempre en el color de texto: así se lee en claro y en oscuro sin cambiar a blanco */
.ade-calor td[style*="--i"] { background: var(--pf-sf2); background: color-mix(in srgb, var(--pf-b7) calc(var(--i) * 60%), var(--pf-sf)); }
.ade-calor td.fuerte { color: var(--pf-t1); }
.ade-calor.verde td[style*="--i"] { background: var(--pf-sf2); background: color-mix(in srgb, var(--pf-g7) calc(var(--i) * 60%), var(--pf-sf)); }
.ade-calor-caja > .ade-calor { margin: 0; }
/* plegables dentro de una hoja (listados, detalle de cálculo, columnas) */
.ade-detalle > summary, .ade-columnas > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--pf-t2); list-style: none; -webkit-user-select: none; user-select: none; }
.ade-detalle > summary::-webkit-details-marker, .ade-columnas > summary::-webkit-details-marker { display: none; }
.ade-detalle > summary::before, .ade-columnas > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--pf-d-base) var(--pf-e-out); }
.ade-detalle[open] > summary::before, .ade-columnas[open] > summary::before { transform: rotate(45deg); }
.ade-detalle > summary:focus-visible, .ade-columnas > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; border-radius: var(--pf-r-sm); }
@media (hover: hover) and (pointer: fine) { .ade-detalle > summary:hover { color: var(--pf-t1); } }
.ade-detalle { border-top: 1px solid var(--pf-ln2); }
.ade-detalle > summary { padding-inline: 20px; }
.ade-detalle > .pf-rows { border-top: 1px solid var(--pf-ln2); max-height: 420px; overflow-y: auto; }
/* plegable con caja (dentro de una sección): un recuadro con su propio borde */
.ade-detalle.ade-detalle-caja { border: 1px solid var(--pf-ln); border-radius: var(--pf-r); overflow: hidden; }
.ade-detalle.ade-detalle-caja > summary { padding-inline: 14px; }
.ade-detalle-c { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.ade-anios-detalle { display: flex; flex-direction: column; gap: 10px; }
.ade-anios-detalle .ade-detalle > .overflow-x-auto { border-top: 1px solid var(--pf-ln2); }
/* embudo: una barra visible aunque la etapa sea muy pequeña */
.ade-embudo li::before { min-width: 6px; }
/* zona de soltar: archivo con problema */
.ade-soltar.mal { border-color: var(--pf-crit); background: var(--pf-crit-bg); }
.ade-soltar.mal small { color: var(--pf-crit); font-weight: 600; }
.ade-soltar b { overflow-wrap: anywhere; }
.ade-soltar { min-height: 44px; }
.ade-vigente > div > small { display: block; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .ade-detalle > summary::before, .ade-columnas > summary::before, .ade-soltar { transition: none; } }
/* ===== fin A2 ===== */

/* ===== A3 · Admisiones: reportes con IA (PF-554 grupo 3; autónomo, aprobado por Renato el 14-oct-2026) ===== */
/* A3b · generar y configuración */
/* generar: el tipo de periodo en tres botones que ocupan todo el ancho; el select sigue en el formulario y es el que viaja */
.adr-segs { display: flex; width: 100%; }
.adr-segs button { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
@media (pointer: coarse), (max-width: 639px) { .adr-segs button { min-height: 44px; } }
/* generar: la zona del archivo de marketing; el input de Django queda dentro, a la vista solo para el lector de pantalla y el teclado */
.adr-soltar { position: relative; }
.adr-soltar > input[type="file"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }
.adr-soltar:has(> input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.adr-quitar { align-self: flex-start; min-height: 40px; }
@media (hover: hover) and (pointer: fine) { .adr-soltar:hover { border-color: var(--pf-g7); background: var(--pf-g-soft); } }
@media (prefers-reduced-motion: reduce) { .adr-soltar { transition: none; } }
/* configuración: las tres cifras de uso caben en una fila también en celular */
.adr-cfg-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adr-cfg-cifras .pf-mk { padding-inline: 10px; }
.adr-cfg-cifras .pf-mk-l { white-space: normal; }
@media (min-width: 901px) { .adr-cfg-cifras { grid-template-columns: repeat(3, minmax(96px, 1fr)); } }
@media (max-width: 560px) { .adr-cfg-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .adr-cfg-cifras .pf-mk b { font-size: var(--pf-fs-2xl); } }
/* A3a · lista, detalle y progreso */
/* lista: tres cifras en una sola fila (también en celular) */
.adr-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.adr-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 64px; padding: 10px 12px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.3; }
.adr-cifra > b { font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1.1; color: var(--pf-t1); }
.adr-cifra.warn > b { color: var(--pf-warn); }
/* lista: el avance de un reporte que se está generando, dentro de su fila */
.adr-avance-fila { display: inline-flex; align-items: center; gap: 8px; }
.adr-avance-fila .pf-prog { width: 96px; min-width: 0; }
/* lista: en celular la acción visible de la fila queda en solo el ícono, con objetivo táctil de 40 px */
@media (max-width: 639px) { .adr-fila .pf-rica-acc .pf-btn.sm:not(.ico) > span { display: none; } .adr-fila .pf-rica-acc .pf-btn.sm:not(.ico) { width: 40px; height: 40px; padding: 0; justify-content: center; } }
/* lista, celular: la fecha y el título van arriba y las pastillas y el periodo bajan a lo ancho de la fila (a un lado del título solo caben una o dos) */
@media (max-width: 639px) {
  .pf-row.rica.adr-fila:not(:has(> .pf-cifras)) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ini titulo acc" "meta1 meta1 meta1" "meta2 meta2 meta2"; row-gap: 8px; align-items: center; }
  .adr-fila .pf-rica-c { display: contents; }
  .adr-fila .pf-rica-t { grid-area: titulo; }
  .adr-fila .pf-rica-c > div.pf-rica-m:nth-of-type(1) { grid-area: meta1; }
  .adr-fila .pf-rica-c > div.pf-rica-m:nth-of-type(2) { grid-area: meta2; }
}
/* detalle: el contenido a la izquierda y los datos a la derecha desde 1100 px; en celular los datos van después del contenido */
.adr-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .adr-ficha { grid-template-columns: minmax(0, 1fr) 320px; } .adr-datos { position: sticky; top: 16px; } }
/* sin contenido (en cola, generando, fallido o vacío) el aviso es corto: los datos van debajo, sin columna al lado */
@media (min-width: 1100px) { .adr-ficha.sin-contenido { grid-template-columns: minmax(0, 1fr); } .adr-ficha.sin-contenido .adr-datos { position: static; } }
.adr-prosa { overflow-wrap: anywhere; }
.adr-prosa :is(h1, h2, h3) { text-wrap: balance; }
@media (max-width: 639px) { .adr-prosa h1 { font-size: var(--pf-fs-3xl); } .adr-prosa h2 { font-size: var(--pf-fs-xl); } .adr-prosa h3 { font-size: var(--pf-fs-lg); } }
/* progreso: la pastilla de estado con el porcentaje grande, y los cuatro pasos como una lista que se va marcando */
.adr-avance-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adr-pct { font-size: var(--pf-fs-5xl); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--pf-t1); }
.adr-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adr-paso { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); color: var(--pf-t3); transition: background-color var(--pf-d-base) ease, box-shadow var(--pf-d-base) ease; }
.adr-paso-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--pf-fs-sm); background: var(--pf-sf3); color: var(--pf-t3); transition: background-color var(--pf-d-base) ease, color var(--pf-d-base) ease; }
.adr-paso-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adr-paso-t b { font-size: var(--pf-fs-md); font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.adr-paso-t small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.adr-paso[data-estado="hecho"] { color: var(--pf-t1); }
.adr-paso[data-estado="hecho"] .adr-paso-ic { background: var(--pf-g7); color: var(--pf-on-g); }
.adr-paso[data-estado="actual"] { background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1.5px var(--pf-y); }
.adr-paso[data-estado="actual"] .adr-paso-ic { background: var(--pf-y); color: var(--pf-y-on); }
@media (prefers-reduced-motion: reduce) { .adr-paso, .adr-paso-ic { transition: none; } }
/* ===== fin A3 ===== */

/* ===== A4 · Admisiones: correos automáticos — aprobación y confirmación de postulación (PF-554 grupo 4; autónomo, aprobado por Renato el 14-oct-2026) ===== */
/* A4a · correo de aprobación (PF-554 grupo 4, agente A): panel, parámetros, historial, detalle de envío y vista previa */
/* interruptor «Envío automático»: es un botón con role="switch"; aria-checked pinta el estado igual que el input de .pf-tg */
.adc-sw { width: 100%; max-width: 440px; min-height: 56px; align-items: center; border: 0; font: inherit; text-align: left; color: var(--pf-t1); -webkit-appearance: none; appearance: none; }
.adc-sw b { font-weight: 600; color: var(--pf-t1); }
.adc-sw small { display: block; margin-top: 2px; font-size: var(--pf-fs-sm); line-height: 1.4; color: var(--pf-t3); }
.adc-sw:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.adc-sw[aria-checked="true"] .pf-tg-sw { background: var(--pf-g7); }
.adc-sw[aria-checked="true"] .pf-tg-sw::after { transform: translateX(14px); }
.adc-sw[aria-busy="true"] { cursor: progress; opacity: .75; }
.pf-hero .adc-sw { margin-top: 4px; background: var(--pf-g8); background: color-mix(in srgb, var(--pf-hero-t) 8%, transparent); }
.pf-hero .adc-sw { box-shadow: inset 0 0 0 1px var(--pf-g7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-hero-t) 18%, transparent); }
.pf-hero .adc-sw b { color: var(--pf-on-g); }
.pf-hero .adc-sw small { color: var(--pf-hero-s); }
.pf-hero .adc-sw .pf-tg-sw { background: var(--pf-inl); background: color-mix(in srgb, var(--pf-hero-t) 30%, transparent); }
.pf-hero .adc-sw[aria-checked="true"] .pf-tg-sw { background: var(--pf-mint); }
/* las tres cifras de hoy caben en una fila (la rejilla de la cabecera es de 2 o 4) */
.pf-hero-k.adc-k { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 901px) { .pf-hero:has(.adc-k) .pf-hero-k { width: min(540px, 46vw); } }
@media (max-width: 560px) { .pf-hero-k.adc-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-hero-k.adc-k > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* aviso de fallidos por reintentar: el botón queda a la derecha; en celular, a todo el ancho */
.adc-aviso { align-items: center; flex-wrap: wrap; row-gap: 10px; }
.adc-aviso > .pf-btn { flex: none; margin-left: auto; }
@media (max-width: 639px) { .adc-aviso > .pf-btn { width: 100%; margin-left: 0; } }
/* resultado de una acción: el enlace «Actualizar las cifras» */
.adc-actualizar { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
/* cómo está configurado: datos sueltos en casillas que se reparten solas */
.adc-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.adc-datos > li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); min-width: 0; }
.adc-datos > li > span { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.adc-datos > li > b { font-size: var(--pf-fs-2xl); font-weight: 700; line-height: 1.2; color: var(--pf-t1); overflow-wrap: anywhere; }
.adc-datos > li > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
/* título y «Ver todos» en la barra de una hoja */
.adc-tit { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--pf-fs-lg); font-weight: 650; color: var(--pf-t1); }
.adc-vertodos { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; font: 600 var(--pf-fs-md)/1 var(--pf-f-in); color: var(--pf-g-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .adc-vertodos:hover, .adc-enlace:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* fallido definitivo: más fuerte que un fallido cualquiera (borde del mismo rojo) */
.pf-pill.adc-def { box-shadow: inset 0 0 0 1.5px var(--pf-crit); font-weight: 700; }
/* la pastilla del estado dentro de la franja verde conserva su tono (la regla de la franja las pone translúcidas) */
.adc-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pf-band .adc-estado .pf-pill { background: var(--pf-neu-bg); color: var(--pf-neu); }
.pf-band .adc-estado .pf-pill.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-band .adc-estado .pf-pill.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.pf-band .adc-estado .pf-pill.info { background: var(--pf-info-bg); color: var(--pf-info); }
/* historial: buscador y chips de estado */
.adc-buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adc-buscar .pf-inp { flex: 1 1 240px; height: 40px; }
.adc-buscar .pf-btn { height: 40px; }
.adc-pts { padding: 0 4px; color: var(--pf-t3); }
/* detalle de un envío: el error que ocupa el ancho, dos hojas parejas y el correo */
.adc-error b { color: inherit; }
.adc-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1024px) { .adc-par:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adc-uuid { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.adc-uuid code { min-width: 0; overflow-wrap: anywhere; font-family: var(--pf-f-mn); font-size: var(--pf-fs-sm); }
/* el correo (enviado o de la vista previa): en su propio iframe aislado, claro a propósito (así lo ve quien lo recibe) */
.adc-correo-caja { padding: 14px; background: var(--pf-sf2); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); }
.adc-correo { display: block; width: 100%; max-width: 100%; height: 640px; height: clamp(440px, 72vh, 800px); height: clamp(440px, 72dvh, 800px); border: 0; border-radius: var(--pf-r); color-scheme: light; background: Canvas; }
@media (max-width: 559px) { .adc-correo-caja { padding: 8px; } .adc-correo { height: clamp(420px, 74dvh, 720px); } }
.adc-texto { margin: 0; max-height: 640px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--pf-f-mn); font-size: var(--pf-fs-md); line-height: 1.55; color: var(--pf-t2); }
/* vista previa: el formulario a la izquierda (fijo al desplazarse) y el correo a la derecha */
.adc-prev { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1024px) { .adc-prev { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } .adc-prev-lado { position: sticky; top: 16px; } }
.adc-prev .pf-msg code { padding: 0 5px; border-radius: 5px; background: var(--pf-sf); font-family: var(--pf-f-mn); font-size: .92em; }
.adc-demo { display: flex; margin-left: auto; }
.adc-enlace { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* parámetros: campos en dos columnas, el contrato, la plantilla en monoespaciada y las variables como botones */
.adc-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .adc-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adc-campos > .adc-ancho { grid-column: 1 / -1; }
.adc-archivo-w { font-size: var(--pf-fs-md); line-height: 2; color: var(--pf-t2); overflow-wrap: anywhere; }
.adc-archivo-w a { color: var(--pf-g-ink); font-weight: 600; }
.adc-archivo-w input[type="checkbox"] { width: 20px; height: 20px; margin: 0 6px 0 10px; vertical-align: -4px; accent-color: var(--pf-g7); }
.adc-archivo-w label { display: inline; font-weight: 500; }
html[data-sistema="migrada"] .pf-sheet .pf-field textarea.adc-codigo { min-height: 12rem; font-family: var(--pf-f-mn); font-size: var(--pf-fs-md); line-height: 1.55; tab-size: 2; }
.adc-vars { gap: 8px; }
.adc-var { font-family: var(--pf-f-mn); font-size: var(--pf-fs-sm); height: 36px; }
.adc-detalle > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font-weight: 600; color: var(--pf-t2); -webkit-user-select: none; user-select: none; }
.adc-detalle > summary::-webkit-details-marker { display: none; }
.adc-detalle > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--pf-d-base) var(--pf-e-out); }
.adc-detalle[open] > summary::before { transform: rotate(45deg); }
.adc-detalle > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; border-radius: var(--pf-r-sm); }
.adc-detalle > p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .adc-detalle > summary:hover { color: var(--pf-t1); } }
@media (prefers-reduced-motion: reduce) { .adc-detalle > summary::before { transition: none; } }
/* A4b · confirmación de postulación (PF-554 grupo 4, agente B: dashboard, configuración, lista, detalle, vista previa y diagnóstico) */
/* interruptor del envío automático dentro de la cabecera verde: relleno menta tenue; la etiqueta dice Activo (menta) o Inactivo (amarillo) con data-estado */
.adc-envio { align-self: flex-start; align-items: center; min-height: 48px; margin-top: 4px; padding: 8px 14px; background: var(--pf-g8); background: color-mix(in srgb, var(--pf-mint) 10%, transparent); box-shadow: inset 0 0 0 1px var(--pf-g7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-mint) 24%, transparent); }
.adc-envio .pf-tt b { color: var(--pf-on-g); }
.adc-envio input:checked + .pf-tg-sw { background: var(--pf-mint); }
.adc-envio input:checked + .pf-tg-sw::after { background: var(--pf-g9); }
.adcp-estado { font-weight: 600; white-space: normal; }
.adcp-estado[data-estado="activo"] { color: var(--pf-ok); }
.adcp-estado[data-estado="inactivo"] { color: var(--pf-warn); }
.pf-hero .adcp-estado[data-estado="activo"] { color: var(--pf-mint); }
.pf-hero .adcp-estado[data-estado="inactivo"] { color: var(--pf-y); }
/* fallido definitivo: el mismo rojo que fallido, con aro y letra más fuertes (ya no se reintenta) */
.pf-pill.adcp-def { box-shadow: inset 0 0 0 1.5px var(--pf-crit); font-weight: 700; }
/* cifras que filtran (lista) o resumen (diagnóstico) */
.adc-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.adc-cifras.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .adc-cifras.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adc-cifra { display: flex; flex-direction: column; gap: 2px; min-height: 64px; min-width: 0; padding: 10px 12px; border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); color: var(--pf-t2); text-decoration: none; font-size: var(--pf-fs-sm); line-height: 1.3; transition: box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.adc-cifra > b { font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1.1; color: var(--pf-t1); font-variant-numeric: tabular-nums; }
.adc-cifra.ok > b { color: var(--pf-ok); }
.adc-cifra.warn > b { color: var(--pf-warn); }
.adc-cifra.crit > b { color: var(--pf-crit); }
a.adc-cifra:active { transform: scale(.97); }
a.adc-cifra[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--pf-g7); color: var(--pf-t1); }
@media (hover: hover) and (pointer: fine) { a.adc-cifra:hover { box-shadow: inset 0 0 0 1.5px var(--pf-inl), var(--pf-sh1); } }
/* barras de los últimos días: la barra verde es lo enviado sobre el total del día, con la cifra siempre visible fuera de la barra;
   las filas reparten el alto que sobra para que la hoja termine pareja con la de al lado */
.pf-alto-c:has(> .adc-dias) { display: flex; flex-direction: column; }
.adc-dias { flex: 1 1 auto; }
.adc-dias > div { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.adc-dias .pf-barra > i { background: var(--pf-g-ink); }
/* error recortado del diagnóstico: parte líneas en vez de ensanchar la fila */
.adc-error-corto { color: var(--pf-crit); font-size: var(--pf-fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.adc-config { display: flex; flex-direction: column; }
.adc-config .pf-kv { flex: 1 1 auto; grid-auto-rows: 1fr; padding: 4px 20px 8px; }
/* el correo se ve siempre en su propio marco, sobre un fondo de la página: el marco es claro como el correo y su alto se mide contra la pantalla */
.adcp-correo { padding: 14px; background: var(--pf-sf2); border-top: 1px solid var(--pf-ln2); }
.adc-marco { display: block; width: 100%; height: clamp(420px, calc(100vh - 240px), 760px); height: clamp(420px, calc(100dvh - 240px), 760px); border: 0; border-radius: var(--pf-r); background: Canvas; color-scheme: light; box-shadow: inset 0 0 0 1px var(--pf-ln); }
.adcp-texto { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--pf-ln2); max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--pf-fs-md)/1.55 var(--pf-f-mn); color: var(--pf-t2); }
.adc-nada { margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--pf-ln2); text-align: center; font-size: var(--pf-fs-md); color: var(--pf-t3); overflow-wrap: anywhere; }
.adc-lista > .adc-nada { border-top: 0; }
.adc-variables { padding: 0 20px 8px; border-top: 1px solid var(--pf-ln2); }
.adc-variables dt { font-size: var(--pf-fs-sm); overflow-wrap: anywhere; }
/* detalle del correo: los datos del envío a un lado (en celular, arriba) y el correo al otro; en computadora el correo se estira hasta el final de los datos */
.adc-ficha { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lado" "correo"; gap: 20px; align-items: start; }
.adc-ficha-lado { grid-area: lado; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.adc-ficha-correo { grid-area: correo; min-width: 0; }
@media (min-width: 1024px) {
  .adc-ficha { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "correo lado"; align-items: stretch; }
  .adc-ficha-correo > .pf-sheet { height: 100%; display: flex; flex-direction: column; }
  .adc-ficha-correo .adcp-correo { flex: 1 1 auto; display: flex; }
  .adc-ficha-correo .adc-marco { flex: 1 1 auto; height: auto; min-height: 420px; }
  .adc-ficha-correo .pf-empty { flex: 1 1 auto; justify-content: center; }
  /* sin HTML guardado no hay correo que estirar: los datos ocupan todo el ancho en dos columnas y el aviso va debajo */
  .adc-ficha.sin-html { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lado" "correo"; align-items: start; }
  .adc-ficha.sin-html .adc-ficha-lado .pf-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adc-ficha.sin-html .adc-ficha-correo > .pf-sheet { height: auto; }
}
.adcp-error p { max-height: 10rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--pf-fs-md); }
/* vista previa: la lista de postulaciones y el correo elegido; con una elegida, en celular el correo va primero.
   En computadora la lista se estira (y se desplaza por dentro) hasta donde llega el correo */
.adc-previa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.adc-previa-cuerpo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.adc-lista { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1023px) { .adc-previa.con-seleccion .adc-previa-cuerpo { order: -1; } }
@media (min-width: 1024px) {
  .adc-previa { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: stretch; }
  .adc-cambiar { display: none; }
  .adc-selector { display: flex; flex-direction: column; }
  .adc-lista { flex: 1 1 0; min-height: 260px; max-height: none; }
  .adc-previa-cuerpo > .pf-sheet:last-child { flex: 1 1 auto; }
  .adc-previa-cuerpo > .pf-sheet:last-child > .pf-empty { height: 100%; justify-content: center; }
}
.adc-lista > .pf-row { min-height: 52px; }
.adc-lista > .pf-row[aria-current="true"] { background: var(--pf-g-soft); box-shadow: inset 3px 0 0 var(--pf-g7); }
.adc-lista > .pf-row[aria-current="true"] b { color: var(--pf-g-soft-ink); }
/* configuración: los interruptores van en columna, y las plantillas en letra de código */
.adc-opciones { display: flex; flex-direction: column; gap: 8px; }
html[data-sistema="migrada"] .pf-field.adcp-codigo textarea:not(.select2-search__field) { font-family: var(--pf-f-mn); min-height: 260px; }
@media (min-width: 768px) { html[data-sistema="migrada"] .pf-field.adcp-codigo textarea:not(.select2-search__field) { font-size: var(--pf-fs-md); line-height: 1.55; } }
@media (prefers-reduced-motion: reduce) { a.adc-cifra:active { transform: none; } .adc-cifra { transition: none; } }
/* ===== fin A4 ===== */

/* ===== A5 · Admisiones: reservas de cupo, transporte y «Mi reserva» (PF-554 grupo 5; autónomo, aprobado por Renato el 14-oct-2026) ===== */
/* A5b · Mi reserva (portal del estudiante: ver y responder) */
/* la respuesta de «Mi reserva»: el aviso de la pieza (.pf-msg ok / crit) en grande */
.adv-resp { align-items: center; gap: 14px; padding: 16px; font-size: var(--pf-fs-md); }
.adv-resp > i { font-size: var(--pf-fs-5xl); line-height: 1; }
.adv-resp b { display: block; font-size: var(--pf-fs-2xl); line-height: 1.2; letter-spacing: -.01em; color: var(--pf-t1); overflow-wrap: anywhere; }
.adv-resp span { display: block; margin-top: 2px; color: var(--pf-t2); }
/* opciones grandes y táctiles con radios reales: el radio ocupa toda la tarjeta (invisible) y su estado pinta la tarjeta */
.advm-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.advm-opciones.cuatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); }
.adv-opc { position: relative; display: block; margin: 0; min-width: 0; cursor: pointer; }
.adv-opc > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.adv-opc-c { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); color: var(--pf-t1); transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
.adv-opc-c > i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--pf-r-sm); background: var(--pf-sf2); color: var(--pf-t3); transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease; }
.adv-opc-c > span { min-width: 0; }
.adv-opc-c b { display: block; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.adv-opc-c small { display: block; margin-top: 2px; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.advm-opciones.cuatro .adv-opc-c { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 8px; text-align: center; }
.adv-opc > input:checked + .adv-opc-c { background: var(--pf-g-soft); box-shadow: inset 0 0 0 2px var(--pf-g7); }
.adv-opc > input:checked + .adv-opc-c > i { background: var(--pf-g7); color: var(--pf-on-g); }
.adv-opc > input:checked + .adv-opc-c small { color: var(--pf-g-soft-ink); }
.adv-opc.no > input:checked + .adv-opc-c { background: var(--pf-crit-bg); box-shadow: inset 0 0 0 2px var(--pf-crit); }
.adv-opc.no > input:checked + .adv-opc-c > i { background: var(--pf-crit); color: var(--pf-sf); }
.adv-opc.no > input:checked + .adv-opc-c small { color: var(--pf-crit); }
.adv-opc > input:focus-visible + .adv-opc-c { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.adv-opc > input:active + .adv-opc-c { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .adv-opc:hover > input:not(:checked) + .adv-opc-c { box-shadow: inset 0 0 0 1px var(--pf-t4); } }
@media (pointer: coarse) { .adv-opc-c { min-height: 64px; } }
@media (prefers-reduced-motion: reduce) { .adv-opc-c, .adv-opc-c > i { transition: none; } .adv-opc > input:active + .adv-opc-c { transform: none; } }
/* fin A5b */
/* A5a · reservas del personal y transporte */
/* «Avance por nivel»: hoja plegable (cerrada en celular); una fila por nivel con su barra, y en pantallas anchas dos columnas */
.adv-avance > summary { list-style: none; cursor: pointer; flex-wrap: nowrap; min-height: 60px; border-bottom: 0; -webkit-user-select: none; user-select: none; }
.adv-avance > summary::-webkit-details-marker { display: none; }
.adv-avance[open] > summary { border-bottom: 1px solid var(--pf-ln2); }
.adv-avance > summary:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; border-radius: var(--pf-r-lg); }
.adv-chev { flex: none; font-size: var(--pf-fs-xs); color: var(--pf-t3); transition: transform var(--pf-d-base) var(--pf-e-out); }
.adv-avance[open] > summary .adv-chev { transform: rotate(180deg); }
.adv-total { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.2; text-align: right; }
.adv-total > b { font-size: var(--pf-fs-2xl); font-weight: 700; color: var(--pf-g-ink); }
.adv-total > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.adv-niveles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--pf-ln2); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); overflow: hidden; }
.adv-niveles > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom cifra" "barra barra"; gap: 8px 14px; align-items: center; padding: 12px 16px; background: var(--pf-sf); }
.adv-n-t { grid-area: nom; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.adv-n-t > b { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t1); overflow-wrap: anywhere; }
.adv-n-t > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); overflow-wrap: anywhere; }
.adv-n-c { grid-area: cifra; display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; white-space: nowrap; }
.adv-n-c > b { font-size: var(--pf-fs-lg); font-weight: 700; }
.adv-n-c > small { font-size: var(--pf-fs-xs); color: var(--pf-t3); }
.adv-niveles .pf-prog { grid-area: barra; height: 8px; border-radius: 4px; }
.adv-niveles .pf-prog > i { border-radius: 4px; }
@media (min-width: 768px) { .adv-niveles > li { grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) auto; grid-template-areas: "nom barra cifra"; gap: 14px; } }
@media (min-width: 1280px) { .adv-niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adv-niveles > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 639px) { .adv-avance-cab .adv-total > small { display: none; } }
.adv-mas { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-top: 1px solid var(--pf-ln2); border-radius: 0 0 var(--pf-r-lg) var(--pf-r-lg); background: transparent; font: 600 var(--pf-fs-md) var(--pf-f-in); color: var(--pf-g-ink); cursor: pointer; }
.adv-mas[aria-expanded="true"] > .adv-chev { transform: rotate(180deg); }
.adv-mas:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .adv-mas:hover { background: var(--pf-sf2); } }
@media (prefers-reduced-motion: reduce) { .adv-chev { transition: none; } }
/* paso «¿Para qué estudiante?»: lista de opciones (radios) con su propio desplazamiento */
.adv-opciones { margin: 0; padding: 4px; gap: 2px; border: 0; min-width: 0; display: flex; flex-direction: column; max-height: min(52dvh, 26rem); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--pf-r); box-shadow: inset 0 0 0 1px var(--pf-ln2); }
.adv-op { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--pf-r-sm); cursor: pointer; transition: background-color var(--pf-d-fast) ease; }
.adv-op > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.adv-op-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.adv-op-t > b { font-size: var(--pf-fs-base); font-weight: 600; color: var(--pf-t1); overflow-wrap: anywhere; }
.adv-op-t > small { font-size: var(--pf-fs-sm); color: var(--pf-t3); overflow-wrap: anywhere; }
.adv-op-ok { flex: none; font-size: var(--pf-fs-xl); color: var(--pf-g-ink); opacity: 0; transform: scale(.6); transition: opacity var(--pf-d-fast) ease, transform var(--pf-d-base) var(--pf-e-out); }
.adv-op:has(input:checked) { background: var(--pf-g-soft); }
.adv-op:has(input:checked) .adv-op-ok { opacity: 1; transform: none; }
.adv-op:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .adv-op:hover:not(:has(input:checked)) { background: var(--pf-sf2); } }
@media (prefers-reduced-motion: reduce) { .adv-op, .adv-op-ok { transition: none; } .adv-op-ok { transform: none; } }
/* campos que el servidor llena (estudiante y nivel): se ven, pero apagados y con candado */
.adv-solo-lectura { background: var(--pf-sf2); }
.adv-solo-lectura > input { cursor: default; color: var(--pf-t2); }
.adv-solo-lectura > i { flex: none; font-size: var(--pf-fs-xs); color: var(--pf-t4); }
/* interruptores de la exportación: más altos para el dedo, el dependiente va sangrado y apagado mientras no se pueda usar */
.adv-tg { min-height: 48px; transition: background-color var(--pf-d-fast) ease, opacity var(--pf-d-fast) ease; }
.adv-tg-sub { margin-left: 18px; }
.adv-tg:has(input:disabled) { opacity: .55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .adv-tg:not(:has(input:disabled)):hover { background: var(--pf-sf3); } }
@media (prefers-reduced-motion: reduce) { .adv-tg { transition: none; } }
/* resumen de la exportación: tres cifras que se reparten el ancho; la total, resaltada */
.adv-cifras { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.adv-cifras > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.adv-cifras dt { font-size: var(--pf-fs-sm); color: var(--pf-t3); overflow-wrap: anywhere; }
.adv-cifras dd { margin: 0; font-size: var(--pf-fs-3xl); font-weight: 700; line-height: 1.15; color: var(--pf-t1); }
.adv-cifras > .on { background: var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.adv-cifras > .on dt { color: var(--pf-g-soft-ink); font-weight: 600; }
.adv-cifras > .on dd { color: var(--pf-g-ink); }
@media (max-width: 479px) { .adv-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adv-cifras > .on { grid-column: 1 / -1; } }
/* ===== fin A5 ===== */

/* ===== A6 · Admisiones: formulario público y solicitud enviada (PF-554 grupo 6; autónomo, aprobado por Renato el 14-oct-2026) ===== */
/* La cara del colegio para familias nuevas: casi siempre en el celular, sin sesión. Una sola hoja por paso, con un indicador de pasos arriba y una barra pegada abajo (libre del botón del chat). */
/* ayuda de la franja: teléfono y WhatsApp siempre a mano */
/* quien llena la solicitud no tiene sesión: sin menú lateral vacío, campana ni cuenta (con sesión, la página conserva su marco) */
body[data-user-authenticated="false"]:has(.adp) :is(#sidebar, #mobileToggle, #sidebarOverlay, #mainContent > header) { display: none; }
body[data-user-authenticated="false"]:has(.adp) #mainContent { margin-left: 0 !important; }
.adp-ayuda { display: flex; flex: 0 1 340px; flex-wrap: wrap; align-items: center; gap: 8px; }
.adp-ayuda > small { flex: 1 0 100%; font-size: var(--pf-fs-sm); color: var(--pf-hero-s); }
.adp-ayuda .pf-btn { min-height: 44px; flex: 1 1 auto; }
/* indicador de pasos: «Paso N de 6», barra que avanza y seis círculos (con su nombre desde 768 px) */
.adp-pasos { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.adp-pasos-res { display: flex; justify-content: space-between; gap: 8px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.adp-pasos-res b { color: var(--pf-t1); font-weight: 650; }
.adp-prog > i { --v: calc(var(--p, 0) / 100); }
.adp-pasos-ol { display: flex; margin: 0; padding: 0; list-style: none; }
.adp-pasos-ol > li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.adp-paso-c { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pf-sf2); color: var(--pf-t3); box-shadow: inset 0 0 0 1px var(--pf-ln); font: 600 var(--pf-fs-md)/1 var(--pf-f-in); text-decoration: none; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); -webkit-tap-highlight-color: transparent; }
a.adp-paso-c:active { transform: scale(.94); }
.adp-pasos-ol > li[data-estado="completado"] .adp-paso-c { background: var(--pf-g7); color: var(--pf-on-g); box-shadow: none; }
.adp-pasos-ol > li[aria-current="step"] .adp-paso-c { box-shadow: 0 0 0 2px var(--pf-sf), 0 0 0 4px var(--pf-g7); }
.adp-pasos-ol > li[aria-current="step"]:not([data-estado="completado"]) .adp-paso-c { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
.adp-linea { position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; border-radius: 1px; background: var(--pf-ln); }
.adp-linea.ok { background: var(--pf-g7); }
.adp-paso-t { display: none; padding-inline: 2px; font-size: var(--pf-fs-xs); line-height: 1.25; text-align: center; text-wrap: balance; color: var(--pf-t3); }
.adp-pasos-ol > li[aria-current="step"] .adp-paso-t { color: var(--pf-t1); font-weight: 600; }
@media (min-width: 768px) { .adp-paso-t { display: block; } .adp-pasos { padding: 16px 20px 14px; } }
/* la hoja del paso */
.adp-hoja-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pf-ln2); }
.adp-hoja-h .pf-mini-ic { width: 40px; height: 40px; border-radius: 12px; }
.adp-hoja-h h2 { margin: 0; font-size: var(--pf-fs-xl); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
.adp-hoja-h p { margin: 2px 0 0; font-size: var(--pf-fs-md); color: var(--pf-t3); }
.adp-hoja[data-paso="6"] > .adp-hoja-h { display: none; }
.adp-hoja-c { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; min-width: 0; }
.adp-hoja-c:has(> .adp-plano) { padding: 0; gap: 0; }
@media (max-width: 639px) { .adp-hoja-h, .adp-hoja-c { padding-inline: 16px; } .adp-hoja-h { padding-block: 14px; } }
/* campos: una columna en el celular, dos desde 640 px; los anchos (direcciones, notas, el interruptor) ocupan la fila */
.adp-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
@media (min-width: 640px) { .adp-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adp-campos > .adp-ancho { grid-column: 1 / -1; }
.adp-campos > .pf-field > label { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.adp-et { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.adp-et > i { width: 16px; flex: none; text-align: center; color: var(--pf-t3); }
.adp-req .adp-et-t::after { content: " *"; color: var(--pf-crit); font-weight: 700; }
.adp-campos > .pf-field > label > .pf-pill { margin-left: auto; }
.adp-apagado { opacity: .55; }
.adp-apagado :is(input, select, textarea) { cursor: not-allowed; }
.adp-campos .pf-field:has(.pf-help.err) :is(.pf-inp, input:not([type="checkbox"]), select, textarea) { box-shadow: inset 0 0 0 1.5px var(--pf-crit); }
.adp-campos .pf-tg b { color: var(--pf-t1); font-weight: 600; }
.adp-campos .pf-tg small { display: block; margin-top: 2px; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
html[data-sistema="migrada"] .adp .adp-campos .pf-field :is(input, select, textarea):not([type="hidden"], [type="checkbox"]) { font-size: var(--pf-fs-base); }
@media (max-width: 767px) { html[data-sistema="migrada"] .adp .adp-campos .pf-field :is(input, select, textarea):not([type="hidden"], [type="checkbox"]) { font-size: 16px; } .adp .pf-inp { height: 44px; } }
.adp-tips > i { margin-top: 2px; flex: none; }
.adp-tips > span { min-width: 0; }
/* barra de abajo: pegada a la pantalla, con lugar para el botón del chat (lo pone .pf-libre-flotante) */
.adp-barra { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--pf-ln); border-radius: var(--pf-r-lg); background: var(--pf-sf); box-shadow: var(--pf-sh2); }
.adp-barra .pf-btn { min-height: 44px; padding-inline: 16px; flex: none; }
.adp-barra-d { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
@media (max-width: 639px) {
  .adp-barra { padding: 8px; }
  .adp-barra-d { flex: 1; margin-left: 0; }
  .adp-barra .pf-btn.adp-ic { width: 44px; padding: 0; }
  .adp-barra .pf-btn.adp-sig { flex: 1; min-width: 0; padding-inline: 12px; }
  .adp-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* revisión */
.adp-aviso { padding: 14px 20px 0; }
.adp-aviso + .adp-aviso { padding-top: 10px; }
.adp-aviso ul { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.adp-aviso li { padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf); color: var(--pf-t1); }
.adp-aviso li small { display: block; margin-top: 2px; color: var(--pf-t2); font-size: var(--pf-fs-md); }
.adp-aviso li a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; color: var(--pf-g-ink); text-decoration: none; }
.adp-aviso code { font-family: var(--pf-f-mn); font-weight: 600; overflow-wrap: anywhere; }
.adp-editar { align-self: flex-start; }
.adp-sec .pf-kv { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.adp-sec .pf-kv dt { padding-right: 12px; overflow-wrap: anywhere; }
.adp-acepto { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-inl); cursor: pointer; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; -webkit-tap-highlight-color: transparent; }
.adp-acepto:has(input:checked) { background: var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.adp-acepto input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; padding: 0; accent-color: var(--pf-g7); cursor: pointer; }
.adp-acepto b { display: block; color: var(--pf-t1); font-weight: 600; line-height: 1.35; }
.adp-acepto small { display: block; margin-top: 4px; font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t2); }
.adp-acepto:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.adp-sec .pf-help.err { margin-top: 6px; }
/* paso 6: solicitud enviada y pregunta del hermano/a */
.adp-exito { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; text-align: center; background: var(--pf-g-soft); border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; }
.adp-exito h3 { margin: 0; font-size: var(--pf-fs-3xl); font-weight: 650; letter-spacing: -.01em; }
.adp-exito p { margin: 0; max-width: 46ch; font-size: var(--pf-fs-base); color: var(--pf-t2); }
.adp-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-4xl); animation: adp-pop 320ms var(--pf-e-out) both; }
@keyframes adp-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.adp-ref { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 10px 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); }
.adp-ref > small { flex: 1 0 100%; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.adp-ref-n { font: 700 var(--pf-fs-4xl)/1.1 var(--pf-f-mn); letter-spacing: -.01em; color: var(--pf-t1); overflow-wrap: anywhere; }
.adp-plazos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.adp-plazos > span { display: inline-flex; align-items: center; gap: 6px; }
.adp-elige { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--pf-r); background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln); cursor: pointer; transition: background-color var(--pf-d-fast) ease, box-shadow var(--pf-d-fast) ease; -webkit-tap-highlight-color: transparent; }
.adp-elige:has(input:checked) { background: var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7); }
.adp-elige input[type="checkbox"] { flex: none; width: 26px; height: 26px; margin: 0; padding: 0; accent-color: var(--pf-g7); cursor: pointer; }
.adp-elige b { display: block; font-size: var(--pf-fs-lg); color: var(--pf-t1); font-weight: 650; }
.adp-elige small { display: block; margin-top: 2px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.adp-elige:has(input:focus-visible) { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.adp-sigue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.adp-sigue > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.adp-sigue b { display: block; font-size: var(--pf-fs-base); color: var(--pf-t1); font-weight: 600; }
.adp-sigue small { display: block; margin-top: 1px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
@media (min-width: 640px) { .adp-sigue.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }
.adp-puntos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.adp-puntos > li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--pf-fs-md); }
.adp-puntos > li > i { margin-top: 3px; flex: none; }
.adp-puntos small { display: block; color: var(--pf-t2); }
@media (min-width: 640px) { .adp-puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .adp-puntos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adp-contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.adp-contacto a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; color: var(--pf-g-ink); text-decoration: none; overflow-wrap: anywhere; }
/* solicitud enviada (success.html) */
.adp-refs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.adp-refs > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: inset 0 0 0 1px var(--pf-ln); text-align: left; }
.adp-refs .adp-ref-d { flex: 1 1 160px; min-width: 0; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.adp-refs .adp-ref-d b { display: block; color: var(--pf-t1); font-weight: 600; overflow-wrap: anywhere; }
.adp-refs .adp-ref-n { font-size: var(--pf-fs-3xl); }
.adp-copiar { min-height: 44px; }
@media (max-width: 479px) { .adp-copiar { width: 44px; padding: 0; } .adp-copiar > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .adp-refs .adp-ref-d { flex-basis: 110px; } }
.adp-proceso.pf-sheet-sec { padding: 0; gap: 0; }
.adp-proceso > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 20px; list-style: none; cursor: pointer; font-weight: 600; color: var(--pf-t1); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.adp-proceso > summary::-webkit-details-marker { display: none; }
.adp-proceso > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--pf-t3); border-bottom: 2px solid var(--pf-t3); transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--pf-e-out); }
.adp-proceso[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.adp-proceso > .adp-sigue { padding: 4px 20px 18px; }
.adp-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.adp-botones .pf-btn { min-height: 44px; flex: 1 1 200px; max-width: 280px; }
@media (hover: hover) and (pointer: fine) {
  a.adp-paso-c:hover { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
  .adp-acepto:hover, .adp-elige:hover { background: var(--pf-sf2); }
  .adp-acepto:has(input:checked):hover, .adp-elige:has(input:checked):hover { background: var(--pf-g-soft); }
  .adp-aviso li a:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { .adp-check { animation: none; } .adp-prog > i, .adp-paso-c, .adp-acepto, .adp-elige, .adp-proceso > summary::after { transition: none; } a.adp-paso-c:active { transform: none; } }
/* ===== fin A6 ===== */

/* ===== A7 · Admisiones: evaluaciones de admisión (PF-554 grupo 7; autónomo, aprobado por Renato el 14-oct-2026) ===== */
/* A7b · instrumentos */
/* configuración de admisión: el modelo efectivo bajo cada selector, con la misma forma que el código de las filas */
.cfg-campos .pf-help code { padding: 1px 6px; border-radius: 5px; background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-ln2); font-family: var(--pf-f-mn); font-size: .9em; overflow-wrap: anywhere; }
/* «Audio e imágenes» de admisión: el parcial compartido pinta sus campos con _evalad_field.html (.evalad-*), que ya no trae
   evaluaciones_admision.css en una página migrada; aquí se les da la forma de .pf-field con los tokens del sistema */
#multimediaSettings .evalad-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 24px; align-items: start; }
@media (min-width: 640px) { #multimediaSettings .evalad-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#multimediaSettings .evalad-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#multimediaSettings .evalad-field--full { grid-column: 1 / -1; }
#multimediaSettings .evalad-label { font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-t2); }
#multimediaSettings .evalad-required { color: var(--pf-crit); margin-left: 3px; }
#multimediaSettings .evalad-field-help { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-t3); }
#multimediaSettings .evalad-field-error { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-crit); }
#multimediaSettings .evalad-toggle-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#multimediaSettings .evalad-toggle-row input { width: 20px; height: 20px; accent-color: var(--pf-g7); }
html[data-sistema="migrada"] #multimediaSettings .evalad-field :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-height: 38px; padding: 0 12px; margin: 0; border: 0; border-radius: 9px; background: var(--pf-sf); color: var(--pf-t1); box-shadow: inset 0 0 0 1px var(--pf-inl); font: 14px var(--pf-f-in); outline: none; }
html[data-sistema="migrada"] #multimediaSettings .evalad-field textarea { min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
html[data-sistema="migrada"] #multimediaSettings .evalad-field :is(input, select, textarea):focus-visible { box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 3px var(--pf-g-soft); box-shadow: inset 0 0 0 1.5px var(--pf-g7), 0 0 0 4px color-mix(in srgb, var(--pf-g7) 16%, transparent); }
/* fin A7b */
/* A7a · crear con IA (planificación, generar, progreso y regenerar; PF-554 grupo 7a). Casi todo sale de las piezas de Lecciones (.pln-*, .lcr-*, .rgn-*, .crit-*);
   aquí solo lo que evalad_planificacion.js y evalad_progreso.js (en static, no se tocan) pintan o conmutan por su cuenta. */
/* el estado del trabajo de la IA: el script lo muestra quitando .hidden y poniendo display; sin eso se queda oculto aunque la pieza sea flex */
.pln-estado.hidden { display: none; }
/* «Enviar mensaje»: el script lo restaura con ícono + texto; en el celular queda solo el ícono (el aria-label lo nombra) */
.pln-escribir .pf-btn.ade7-enviar { width: auto; min-width: 44px; padding: 0 16px; gap: 8px; }
@media (max-width: 639px) {
  .pln-escribir .pf-btn.ade7-enviar { width: 44px; padding: 0; font-size: 0; gap: 0; }
  .pln-escribir .pf-btn.ade7-enviar i { font-size: var(--pf-fs-lg); }
}
/* la barra de avance: el script de admisión solo le pone el ancho (no --v); el ancho se anima y la barra de Lecciones no lo escala dos veces */
.pf-prog.ade7-prog > i { --v: 1; right: auto; transition: width var(--pf-d-slow) var(--pf-e-out); }
@media (prefers-reduced-motion: reduce) { .pf-prog.ade7-prog > i { transition: none; } }
/* dos cifras de lo generado (secciones y ejercicios) en lugar de tres */
@media (min-width: 640px) { .lcr-etapas.ade7-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* la pastilla del estado: el script cambia la clase evalad-badge-<estado>; el tono sale de ella (y del fallo, que no es un estado) */
.pf-pill.ade7-estado.evalad-badge-planning, .pf-pill.ade7-estado.evalad-badge-generating { background: var(--pf-info-bg); color: var(--pf-info); }
.pf-pill.ade7-estado.evalad-badge-review { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-pill.ade7-estado.evalad-badge-published { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-pill.ade7-estado.ade7-fallo, html:has(#stateContainer.state-error) .pf-pill.ade7-estado { background: var(--pf-crit-bg); color: var(--pf-crit); }
/* registro técnico: más alto que el de las listas y con desplazamiento propio */
.adm-log.ade7-log { max-height: 384px; }
.pf-msg .adm-det > summary { color: inherit; }
/* lo que evalad_planificacion.js arma con innerHTML en la hoja «¿Aprobar plan y generar?» */
.ade7-secs { display: flex; flex-direction: column; gap: 8px; }
.ade7-secs .modal-section-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.ade7-secs .modal-section-number { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--pf-g7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ade7-secs .modal-section-info { flex: 1; min-width: 0; }
.ade7-secs .modal-section-title { font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t1); overflow-wrap: anywhere; }
.ade7-secs .modal-section-meta { font-size: var(--pf-fs-sm); color: var(--pf-t3); }
.ade7-secs .modal-section-time i { margin-right: 4px; }
.ade7-tags .modal-exercise-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--pf-neu-bg); color: var(--pf-neu); font-size: var(--pf-fs-sm); font-weight: 600; white-space: nowrap; }
/* el aviso «tomando más tiempo del esperado» que el script pinta dentro del chat: se ve como un estado vacío del sistema */
.pln-msgs > .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; color: var(--pf-t3); }
.pln-msgs > .empty-state > i { font-size: var(--pf-fs-3xl); color: var(--pf-warn); }
.pln-msgs > .empty-state h4 { margin: 0; font-size: var(--pf-fs-lg); font-weight: 600; color: var(--pf-t1); }
.pln-msgs > .empty-state p { margin: 0; max-width: 36ch; font-size: var(--pf-fs-md); color: var(--pf-t3); }
.pln-msgs > .empty-state button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--pf-g7); color: var(--pf-on-g); font: 600 var(--pf-fs-md)/1 var(--pf-f-in); cursor: pointer; }
.pln-msgs > .empty-state button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .pln-msgs > .empty-state button:active { transform: none; } }
/* secciones plegadas del plan en celular: el título largo no se aprieta contra los minutos y ejercicios; estos bajan a su propia línea */
@media (max-width: 639px) {
  .pln-secs summary { flex-wrap: wrap; }
  .pln-secs summary .pln-sec-t { flex: 1 1 calc(100% - 80px); }
  .pln-secs summary small { order: 3; flex-basis: 100%; margin-left: 34px; white-space: normal; }
}
/* ===== fin A7a ===== */
/* A7c · aplicaciones */
/* reporte: la barra de color de cada tarjeta de ejercicio dice cómo salió (el resultado va en data-resultado) */
.cal-ej[data-resultado="correcto"] { box-shadow: inset 3px 0 0 var(--pf-ok); }
.cal-ej[data-resultado="parcial"] { box-shadow: inset 3px 0 0 var(--pf-warn); }
.cal-ej[data-resultado="incorrecto"] { box-shadow: inset 3px 0 0 var(--pf-crit); }
.cal-ej[data-resultado="sin-respuesta"] { box-shadow: inset 3px 0 0 var(--pf-ln); }
/* tabla de destrezas del reporte: ancho mínimo para que en celular se desplace dentro de su caja en vez de apretar el texto */
.rep-destrezas { min-width: 560px; }
/* título de una tarea del reporte: un nombre larguísimo y sin espacios se parte en vez de ensanchar la hoja */
.rep-tarea-t { overflow-wrap: anywhere; }
/* fin A7c */
/* A7d · detalle del instrumento y vista previa (PF-554 grupo 7b). Casi todo viene de D7 (acordeón, tarea, columna derecha, ventanas) y de C4a
   (tarjeta del ejercicio); aquí solo lo que es propio de admisión o de lo que el JS de static/ pinta. */
/* pastilla que cambia el JS de la página al alternar la visibilidad: el estado vive en la clase evalad-mini-badge--ok | --muted */
.evalad-mini-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; margin: 0; border: 0; border-radius: 999px; font: 600 var(--pf-fs-xs) var(--pf-f-in); white-space: nowrap; background: var(--pf-neu-bg); color: var(--pf-neu); }
.evalad-mini-badge > i { margin-right: 0; }
.evalad-mini-badge--ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.evalad-mini-badge--muted { background: var(--pf-neu-bg); color: var(--pf-neu); }
button.evalad-visibilidad-btn { height: 32px; min-width: 88px; justify-content: center; padding: 0 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--pf-d-fast) ease, color var(--pf-d-fast) ease, transform var(--pf-d-press) var(--pf-e-out); }
button.evalad-visibilidad-btn:active { transform: scale(.97); }
button.evalad-visibilidad-btn:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (pointer: coarse) { button.evalad-visibilidad-btn { height: 40px; } }
/* ordenar ejercicios (SortableJS de evalad_instrumento_detail.js): el hueco que deja la tarjeta que se arrastra */
.evalad-ejercicio-ghost { opacity: .45; background: var(--pf-g-soft); outline: 2px dashed var(--pf-g7); outline-offset: -2px; }
/* la tarjeta muestra el enunciado completo (el plegable de abajo trae el ejercicio con la respuesta) y su vista previa ocupa todo el ancho */
.evalad-instrumento-ejercicio .ejc-enun { display: block; overflow: visible; -webkit-line-clamp: unset; }
.evalad-ejercicio-contenido-preview > .ldx-lectura-body { max-width: none; padding-inline: 12px; }
.evalad-ejercicio-contenido-preview > summary { padding-block: 10px; font-size: var(--pf-fs-md); }
.evalad-ejercicio-contenido-preview > summary > small { font-size: var(--pf-fs-sm); }
/* «Agregar ejercicio»: cada tipo es un botón con la tarjeta de D7 dentro */
.ldx-tipo-btn { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ldx-tipo-btn:active .ldx-tipo-card { transform: scale(.98); }
.ldx-tipo-btn:focus-visible .ldx-tipo-card { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ldx-tipo-btn:hover .ldx-tipo-card { background: var(--pf-sf2); box-shadow: inset 0 0 0 1px var(--pf-inl-h); } }
/* estadísticas de visibilidad: las pinta el JS con innerHTML (filas .flex.justify-between) */
.evd-vis-stats { display: flex; flex-direction: column; gap: 6px; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.evd-vis-stats > div { gap: 12px; }
.evd-vis-stats > div > span:last-child { font-variant-numeric: tabular-nums; color: var(--pf-t1); }
/* chips del índice: un título de sección muy largo se corta con «…» en vez de ensanchar la hoja (la tira solo se desliza en celular) */
.evalad-page .ldx-indice-chips .pf-chip { max-width: min(100%, 320px); }
.evalad-page .ldx-indice-chips .pf-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* el interruptor «Transcript» (lo pinta _tarea_estimulo.html) solo es para quien puede editar el contenido: la API responde 403 a los demás */
.evalad-instrumento-tarea[data-sin-transcript] [data-tipo="estimulo_transcript"] { display: none; }
/* verificación obligatoria: aviso a todo el ancho con su acción debajo del texto */
.evd-verificacion > div > .pf-btn { align-self: flex-start; }
/* cabecera: las cifras son 2 o 3 según el estado; en iPad y celular se reparten el ancho sin dejar columnas vacías */
@media (max-width: 900px) { .evalad-page .pf-hero-k { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 560px) { .evalad-page .pf-hero-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evalad-page .pf-hero-k > .pf-mk:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.evalad-page .pf-mk-l { white-space: normal; }
/* con poco contenido la columna principal queda más corta que la derecha: se queda a la vista al desplazarse, como la derecha */
@media (min-width: 1100px) { .evalad-page .ldx-main { position: sticky; top: calc(var(--ldx-arriba, 0px) + 12px); align-self: start; } }
/* vista previa: dos opciones lado a lado (no tres) y su descripción completa */
.rec-tipos.evd-opciones { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rec-tipos.evd-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evd-opciones .rec-tipo { padding: 0; }
.evd-opcion { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--pf-r-lg); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.evd-opcion:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.evd-opcion-txt { font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-t2); }
.evd-opcion-ir { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-g-ink); }
.evd-opcion-ir > i { font-size: var(--pf-fs-sm); transition: transform var(--pf-d-fast) var(--pf-e-out); }
@media (hover: hover) and (pointer: fine) { .evd-opcion:hover .evd-opcion-ir > i { transform: translate(2px, -2px); } }
@media (prefers-reduced-motion: reduce) { button.evalad-visibilidad-btn:active, .ldx-tipo-btn:active .ldx-tipo-card, .evd-opcion:hover .evd-opcion-ir > i { transform: none; } .evd-opcion-ir > i { transition: none; } }
/* fin A7d */
/* A7 · ajustes del principal: en «generar» la columna principal corta acompaña a los criterios sin dejar hueco; en el
   detalle del instrumento lo último de la página (menú de la última sección) no queda bajo el botón del chat */
@media (min-width: 1024px) { .ade7-gen-main { position: sticky; top: 16px; } }
html.pf-con-chat .ldx-cont:has(.evalad-markdown-root) { padding-bottom: 76px; }
/* ===== fin A7 ===== */

/* ===== M3 · Visor de modelos 3D (PF-568 · PF-574; sistema_recursos/visor3d.js crea casi todo lo de aquí) =====
   <figure class="m3d"> con el escenario (lienzo de three.js, etiquetas, ficha de la pieza y barra), y debajo el panel:
   desarmar, capas y la línea de tiempo con sus fases. El fondo sale del ambiente de la escena (neutro, cielo, espacio, agua);
   el resalte de la pieza elegida y el de la fase los lee el JS de --m3d-seleccion y --m3d-fase. En táctil el gesto vertical
   sigue desplazando la página (touch-action: pan-y) hasta tocar «Mover libre»; en pantalla completa el 3D se queda con todo. */
.m3d { --m3d-seleccion: var(--pf-mint); --m3d-fase: var(--pf-y); --m3d-punto: var(--pf-sf); position: relative; min-width: 0; margin: 0; }
/* dentro del contenido de una lección las figuras van centradas (regla de .estimulo-contenido-render): el visor no */
.estimulo-contenido-render figure.m3d { margin: 1.25em 0; text-align: left; }
.m3d__escenario { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; max-height: 70vh; max-height: 70dvh; overflow: hidden; border-radius: var(--pf-r-lg); background: radial-gradient(120% 90% at 50% 35%, var(--pf-sf) 0%, var(--pf-sf2) 55%, var(--pf-sf3) 100%); box-shadow: inset 0 0 0 1px var(--pf-ln); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.m3d__escenario:focus-visible { box-shadow: inset 0 0 0 1px var(--pf-ln), 0 0 0 2px var(--pf-focus); }
.m3d[data-ambiente="cielo"] .m3d__escenario { background: linear-gradient(180deg, #a9d4f2 0%, #d7ecfa 55%, #eef7fd 100%); }
html[data-theme="dark"] .m3d[data-ambiente="cielo"] .m3d__escenario { background: linear-gradient(180deg, #2c5677 0%, #3f6f93 60%, #5d89a8 100%); }
.m3d[data-ambiente="espacio"] .m3d__escenario { background: radial-gradient(110% 90% at 50% 40%, #18203a 0%, #0b1022 55%, #05070f 100%); }
.m3d[data-ambiente="agua"] .m3d__escenario { background: linear-gradient(180deg, #1f7aa6 0%, #125a82 55%, #0b3954 100%); }
.m3d__escenario.is-libre, .m3d--en-pantalla .m3d__escenario { touch-action: none; }
.m3d__escenario.is-girando { cursor: grabbing; }
.m3d--activo .m3d__escenario { cursor: grab; }
.m3d__lienzo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.m3d__respaldo { display: block; width: 100%; height: 100%; object-fit: contain; }
.m3d__estado { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.m3d__estado[hidden] { display: none; }
.m3d__respaldo:not([hidden]) + .m3d__estado { inset: auto 10px 10px; display: block; padding: 8px 12px; border-radius: var(--pf-r); background: var(--pf-sf); box-shadow: var(--pf-sh1); }
.m3d--iniciando .m3d__estado::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--pf-ln); border-top-color: var(--pf-g7); animation: m3d-gira 900ms linear infinite; }
@keyframes m3d-gira { to { transform: rotate(360deg); } }
.m3d__fuente { display: none; }

/* etiquetas sobre el modelo: la pieza elegida (verde), las de la fase (amarillo) y los números de un ejercicio (azul) */
.m3d__etiquetas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m3d__etiqueta { position: absolute; left: 0; top: 0; max-width: 38%; padding: 1px 7px; border-radius: 999px; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh1); font: 600 var(--pf-fs-2xs)/1.3 var(--pf-f-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform; }
.m3d__etiqueta--sel { background: var(--pf-g7); color: var(--pf-on-g); }
.m3d__etiqueta--fase { background: var(--pf-y); color: var(--pf-g9); }
.m3d__etiqueta--num { min-width: 24px; padding: 2px 7px; text-align: center; background: var(--pf-b7); color: var(--pf-on-g); font-size: var(--pf-fs-xs); }

/* ficha de la pieza elegida: abajo a la izquierda, sobre el modelo (la ayuda ya se fue con el primer toque) */
.m3d__ficha { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 76px); overflow-y: auto; padding: 12px 44px 12px 14px; border-radius: var(--pf-r-lg); background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh2); animation: m3d-aparece var(--pf-d-base) var(--pf-e-out); }
.m3d__ficha-cerrar { position: absolute; top: 4px; right: 4px; }
.m3d__ficha-nombre { display: block; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; }
.m3d__ficha-texto { margin: 4px 0 0; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.m3d__ficha-grupos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.m3d__ficha-grupos:empty { display: none; }
.m3d__ficha-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m3d__ficha-acciones [hidden] { display: none; }
.m3d__explicacion { margin-top: 10px; padding: 14px 16px; border-radius: var(--pf-r-lg); background: var(--pf-sf2); animation: m3d-aparece var(--pf-d-base) var(--pf-e-out); }
.m3d:fullscreen .m3d__explicacion, .m3d.m3d--pantalla .m3d__explicacion { flex: none; max-height: 34vh; overflow-y: auto; margin-top: 0; }
.m3d__ficha--compacta .m3d__ficha-texto, .m3d__ficha--compacta .m3d__ficha-grupos { display: none; }
.m3d__ficha--compacta .m3d__ficha-acciones { margin-top: 6px; }
.m3d__explicacion-lead { margin: 0 0 10px; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.m3d__explicacion-lead[hidden] { display: none; }
.m3d__explicacion-t { margin: 0 0 6px; font-size: var(--pf-fs-lg); font-weight: 650; line-height: 1.3; color: var(--pf-t1); }
.m3d__explicacion-texto p { max-width: 72ch; margin: 0 0 8px; color: var(--pf-t1); font-size: var(--pf-fs-md); line-height: 1.6; }
.m3d__explicacion-texto p:last-child { margin-bottom: 0; }
.m3d__mejora { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px; background: var(--pf-sf); color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.35; box-shadow: var(--pf-sh2); animation: m3d-aparece var(--pf-d-base) var(--pf-e-out); }
.m3d__mejora i { color: var(--pf-b); }
.m3d__mejora--ok i { color: var(--pf-ok); }
@keyframes m3d-aparece { from { opacity: 0; transform: translateY(4px); } }

/* barra de controles: arriba a la derecha, lejos del botón flotante del chat (abajo a la derecha de la pantalla) */
.m3d__barra { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--pf-r-lg); background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 90%, transparent); box-shadow: var(--pf-sh2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m3d__barra .pf-btn.ico { border-radius: var(--pf-r); }
.m3d__barra .pf-btn.ico[aria-pressed="true"], .m3d__mover[aria-pressed="true"] { background: var(--pf-g-soft); color: var(--pf-g-soft-ink); }
.m3d__mover { height: 40px; padding: 0 12px; gap: 6px; }
.m3d__ayuda { position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--pf-sf); background: color-mix(in srgb, var(--pf-sf) 85%, transparent); color: var(--pf-t2); font-size: var(--pf-fs-xs); line-height: 1.35; pointer-events: none; transition: opacity var(--pf-d-slow) ease; }
.m3d__ayuda.is-oculta { opacity: 0; }

/* panel bajo el escenario: desarmar, capas y línea de tiempo */
.m3d__panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.m3d__control { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--pf-t2); font-size: var(--pf-fs-md); }
.m3d__control > i, .m3d__capas > i { color: var(--pf-t3); }
.m3d__control-txt { font-weight: 600; color: var(--pf-t2); }
.m3d__desarme { flex: 1 1 220px; max-width: 360px; }
.m3d__desarme .m3d__rango { flex: 1; }
.m3d__capas { flex: 0 1 auto; }
.m3d__capa > i { font-size: 12px; }
.m3d__tiempo { flex: 1 1 100%; min-width: 0; }
.m3d__tiempo-fila { display: flex; align-items: center; gap: 12px; }
.m3d__play { flex: none; border-radius: 50%; }
.m3d__cursor { flex: 1; min-width: 0; }
.m3d__tiempo-txt { flex: none; color: var(--pf-t3); font-size: var(--pf-fs-xs); font-variant-numeric: tabular-nums; }
.m3d__fases { margin-top: 8px; }
.m3d__fase-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pf-sf3); color: var(--pf-t2); font-size: var(--pf-fs-2xs); font-weight: 700; }
.m3d__fase[aria-pressed="true"] .m3d__fase-num { background: var(--pf-g7); color: var(--pf-on-g); }
.m3d__fase-texto { min-height: 3em; margin: 8px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.m3d__fase-texto > b { color: var(--pf-t1); }

/* barra deslizante del visor (desarmar y tiempo): pista ln, parte recorrida g7 (el JS escribe --v) y área táctil de 44 px */
.m3d .m3d__rango[type="range"]:not(.pf-inp *) { --pct: var(--v, 0%); -webkit-appearance: none; appearance: none; display: block; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; cursor: pointer; }
.m3d .m3d__rango[type="range"]:not(.pf-inp *):focus-visible { outline: 2px solid var(--pf-focus); outline-offset: -2px; border-radius: 22px; }
.m3d__rango::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--pf-g7) var(--pct), var(--pf-inl) var(--pct)); }
.m3d__rango::-moz-range-track { height: 6px; border-radius: 3px; background: var(--pf-inl); }
.m3d__rango::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--pf-g7); }
.m3d__rango::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--pf-sf); box-shadow: 0 0 0 2px var(--pf-g7), var(--pf-sh1); }
.m3d__rango::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--pf-sf); box-shadow: 0 0 0 2px var(--pf-g7), var(--pf-sh1); }

/* pie y alternativa en texto (sin 3D y lectores de pantalla) */
.m3d__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 2px 0; color: var(--pf-t2); font-size: var(--pf-fs-sm); line-height: 1.45; }
.m3d__pie > b { color: var(--pf-t1); font-weight: 650; }
.m3d__texto { margin-top: 10px; color: var(--pf-t2); font-size: var(--pf-fs-md); line-height: 1.5; }
.m3d__texto > summary { cursor: pointer; color: var(--pf-t2); font-weight: 600; }
.m3d__texto ul, .m3d__texto ol { margin: 8px 0 0; padding-left: 20px; }
.m3d__texto li + li { margin-top: 4px; }
.m3d__texto li > b { color: var(--pf-t1); }
.m3d--sin3d .m3d__escenario { aspect-ratio: auto; min-height: 160px; }
.m3d--sin3d .m3d__escenario:has(.m3d__respaldo:not([hidden])) { aspect-ratio: 16 / 10; }

/* pantalla completa: la API del navegador o, donde no existe (iPhone), una capa fija */
.m3d:fullscreen { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--pf-pg); }
.m3d:-webkit-full-screen { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--pf-pg); }
.m3d.m3d--pantalla { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--pf-pg); overflow-y: auto; }
.m3d--en-pantalla .m3d__escenario { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; max-height: none; }
.m3d--en-pantalla .m3d__panel { flex: none; margin-top: 0; }
.m3d--en-pantalla :is(.m3d__pie, .m3d__texto) { display: none; }
html.m3d-pantalla-abierta { overflow: hidden; }

@media (max-width: 639px) {
  /* celular: la barra ocupa el borde de arriba y la ficha, el de abajo */
  .m3d__escenario { aspect-ratio: 4 / 5; min-height: 320px; max-height: 72vh; max-height: 72dvh; }
  .m3d__barra { left: 10px; right: 10px; justify-content: space-between; }
  .m3d__ficha { right: 10px; width: auto; max-height: calc(100% - 86px); }
  .m3d__desarme { max-width: none; }
}
@media (pointer: coarse) { .m3d__mover { height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .m3d__ficha { animation-name: pf-fade !important; }
  .m3d--iniciando .m3d__estado::before { animation: none; }
}
@media print { .m3d__barra, .m3d__panel, .m3d__ayuda, .m3d__etiquetas { display: none !important; } }

.m3d__credito { display: block; margin-top: 2px; color: var(--pf-t3); font-size: var(--pf-fs-xs); }  /* autoría del modelo (PF-576) */

/* Ejercicios sobre el modelo 3D (PF-577): panel bajo el visor (_ej_modelo3d.html, ejercicios_interactivos.js →
   initModelo3d), el resumen para el docente (_ej_modelo3d_resumen.html) y el modal de edición (_modal_ejercicio_modelo3d.html) */
.ejercicio-tipo-modelo3d_senalar, .ejercicio-tipo-modelo3d_etiquetar, .ejercicio-tipo-modelo3d_falta,
.ejercicio-tipo-modelo3d_seleccionar, .ejercicio-tipo-modelo3d_pausa { background: var(--pf-m4-bg); color: var(--pf-m4-ink); }
.ej-m3d { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ej-m3d .m3d { margin: 0; }
.ej-m3d__panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ej-m3d__ayuda { margin: 0; }
.ej-m3d__nombres { display: flex; flex-wrap: wrap; gap: 8px; }
.ej-m3d__nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ej-m3d__numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ej-m3d__numero { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ej-m3d__numero .pf-inp { flex: 1 1 auto; min-width: 0; }
.ej-m3d__num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--pf-b7); color: var(--pf-on-g); font: 700 var(--pf-fs-sm)/1 var(--pf-f-in); font-variant-numeric: tabular-nums; }
.ej-m3d__select.input-correcto { box-shadow: inset 0 0 0 2px var(--pf-ok); }
.ej-m3d__select.input-incorrecto { box-shadow: inset 0 0 0 2px var(--pf-crit); }
.ej-m3d__toques { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ej-m3d__estado { flex: 1 1 220px; margin: 0; color: var(--pf-t2); font: 500 var(--pf-fs-md)/1.4 var(--pf-f-in); }
.ej-m3d__sin-modelo { margin: 0; }
.ej-m3d-res { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ej-m3d-res__modelo { align-self: flex-start; max-width: 100%; white-space: normal; }
.ej-m3d-res__numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.ej-m3d-res__numeros li { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--pf-t1); }
.ej-m3d-res__linea { flex: 1 1 auto; min-width: 80px; height: 1.2em; border-bottom: 1px solid var(--pf-ln); }
.ej-m3d-res__nombres { display: flex; flex-wrap: wrap; gap: 6px; }
.ej-m3d-res__nombres .pf-chip { cursor: default; }
.ej-m3d-res__datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: var(--pf-fs-md); }
.ej-m3d-res__datos dt { color: var(--pf-t3); font-weight: 600; }
.ej-m3d-res__datos dd { margin: 0; color: var(--pf-t1); min-width: 0; }
.ej-m3d-res__clave { margin: 0; }
.m3d-ed__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; max-height: 260px; overflow-y: auto; padding: 2px; }
.m3d-ed__lista--fila { display: flex; flex-wrap: wrap; max-height: none; overflow: visible; }
.m3d-ed__check { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; color: var(--pf-t1); font-size: var(--pf-fs-md); }
.m3d-ed__check input { flex: none; width: 18px; height: 18px; accent-color: var(--pf-g7); }
.m3d-ed fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.m3d-ed__error { margin: 8px 0 0; }
/* Revisión docente del modelo (PF-579): lms/modelo3d/_revision.html, debajo del visor en la página del modelo */
.m3d-rev { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.m3d-rev__cab h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 var(--pf-fs-lg)/1.3 var(--pf-f-in); color: var(--pf-t1); }
.m3d-rev__cab p { margin: 4px 0 0; }
.m3d-rev__bloque { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m3d-rev__bloque h3 { margin: 0; }
.m3d-rev__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.m3d-rev__pedidos { margin: 0; padding-left: 18px; color: var(--pf-t2); font-size: var(--pf-fs-sm); }
.m3d-rev__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.m3d-rev__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.m3d-rev__item--oculta { opacity: .6; }
.m3d-rev__item .pf-textarea, .b3d-panel .pf-textarea { min-height: 0; }
.mv3d-fallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mv3d-falla { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.mv3d-falla__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mv3d-barra { display: block; height: 6px; border-radius: 999px; background: var(--pf-ln2); overflow: hidden; }
.mv3d-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--pf-warn); }
.mv3d-ejemplos { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--pf-fs-sm); color: var(--pf-t2); }
.mv3d-ronda { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mv3d-ronda__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m3d-rev__rondas { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m3d-rev__ronda { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.m3d-rev__ronda p { margin: 0; }
.m3d-rev__problemas { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--pf-fs-sm); color: var(--pf-t2); }
.m3d-rev__capturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.m3d-rev__capturas img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pf-r-sm); background: var(--pf-sf); }
.m3d-rev__item--oculta input[name="nombre"] { text-decoration: line-through; }
.m3d-rev__guardar { position: sticky; bottom: 12px; padding: 10px 0; background: linear-gradient(transparent, var(--pf-sf) 30%); }
.m3d-rev__avisos:empty { display: none; }
/* Biblioteca de modelos 3D (PF-580, solo Developer): lms/biblioteca3d/lista.html y detalle.html */
.b3d-mini { flex: none; width: 64px; height: 40px; border-radius: var(--pf-r-sm); object-fit: cover; background: var(--pf-sf2); }
.b3d-mini--vacia { display: inline-flex; align-items: center; justify-content: center; color: var(--pf-t3); }
.b3d-filtros { flex-wrap: wrap; gap: 8px; }
/* detalle: franja con estado y acciones, paneles que se abren debajo, visor a todo el ancho y pestañas */
.b3d-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.b3d-acciones > .pf-pill { margin-right: 4px; }
.b3d-cab .b3d-acciones > .pf-pill.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.b3d-cab .b3d-acciones > .pf-pill.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.b3d-cab .b3d-acciones > .pf-pill.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.b3d-cab .pf-btn.ghost:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn) { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
@media (hover: hover) and (pointer: fine) { .b3d-cab .pf-btn.ghost:not(:is(.pf-menu, .pf-hoja, dialog) .pf-btn):hover { background: rgba(255, 255, 255, .1); } }
.b3d-panel .pf-sheet-sec > header h3 { margin: 0; }
.b3d-panel--crit { box-shadow: inset 4px 0 0 var(--pf-crit), var(--pf-sh1); }
.b3d-panel--crit .pf-sheet-sec > header i { color: var(--pf-crit); }
.b3d-panel__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.b3d-msg { align-items: center; }
.b3d-msg > span { flex: 1 1 auto; min-width: 0; }
.b3d-msg > .pf-btn { flex: none; margin-left: auto; }
.b3d-propuesta .pf-sheet-sec > header h3 { margin: 0; }
.b3d__visor { min-width: 0; }
.b3d__lista-simple { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--pf-t2); font-size: var(--pf-fs-md); }
.b3d__comparar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.b3d__comparar > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.b3d__aviso:empty { display: none; }
@media (max-width: 1023px) { .b3d__comparar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .b3d-acciones > .pf-btn:not(.ico) { flex: 1 1 auto; } .b3d-panel__acciones > .pf-btn { flex: 1 1 auto; } }
@media (max-width: 639px) { .ej-m3d-res__datos { grid-template-columns: 1fr; } }
@media print { .ej-m3d__toques, .ej-m3d__limpiar, .btn-verificar-modelo3d { display: none !important; } }
/* ===== fin M3 ===== */
/* Estudio 3D (PF-583, solo Developer): lms/estudio3d/lista.html y detalle.html. Las capturas usan .m3d-rev__capturas */
.e3d-probar__campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.e3d-probar .pf-textarea { min-height: 0; }
.e3d-probar__acciones { display: flex; justify-content: flex-end; }
.e3d-cab__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e3d-cab .e3d-cab__pills > .pf-pill.ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.e3d-cab .e3d-cab__pills > .pf-pill.warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.e3d-cab .e3d-cab__pills > .pf-pill.crit { background: var(--pf-crit-bg); color: var(--pf-crit); }
.e3d-cab .e3d-cab__pills > .pf-pill.info { background: var(--pf-info-bg); color: var(--pf-info); }
.e3d__visor { min-width: 0; }
.e3d-texto > summary, .e3d-leyenda > summary { cursor: pointer; width: fit-content; font-size: var(--pf-fs-md); font-weight: 600; color: var(--pf-t2); }
.e3d-texto > p { margin-top: 8px; color: var(--pf-t2); font-size: var(--pf-fs-base); }
.e3d-referencia { display: block; width: min(100%, 520px); margin-top: 8px; border-radius: var(--pf-r); overflow: hidden; background: var(--pf-sf2); }
.e3d-referencia img { display: block; width: 100%; height: auto; }
.e3d-vueltas { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.e3d-vuelta { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-sf2); }
.e3d-vuelta--mejor { box-shadow: inset 4px 0 0 var(--pf-g7); }
.e3d-vuelta__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.e3d-vuelta__cab h4 { margin: 0 4px 0 0; font-size: var(--pf-fs-base); font-weight: 650; color: var(--pf-t1); }
.e3d-vuelta__meta { margin-left: auto; }
.e3d-vuelta__bloque { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e3d-vuelta__bloque h5 { margin: 0; font-size: var(--pf-fs-sm); font-weight: 650; color: var(--pf-t3); text-transform: uppercase; letter-spacing: .04em; }
.e3d-vuelta__bloque p { color: var(--pf-t1); overflow-wrap: anywhere; }
.e3d-lista { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: var(--pf-fs-md); color: var(--pf-t2); overflow-wrap: anywhere; }
.e3d-lista--crit { color: var(--pf-crit); }
.e3d-capturas > a { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--pf-t3); font-size: var(--pf-fs-xs); text-decoration: none; }
.e3d-leyenda__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--pf-fs-md); color: var(--pf-t2); }
.e3d-leyenda__lista > li { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.e3d-leyenda__n { flex: none; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--pf-sf3); color: var(--pf-t1); font-weight: 650; text-align: center; }
@media (max-width: 639px) { .e3d-probar__campos { grid-template-columns: minmax(0, 1fr); } .e3d-probar__acciones > .pf-btn { flex: 1 1 auto; } .e3d-vuelta__meta { margin-left: 0; width: 100%; } }

/* ---------------- llaves de acceso (WebAuthn): filas que entran y salen, aviso flotante tras ingresar ---------------- */
.pf-row.pf-nueva { animation: pf-fila-entra var(--pf-d-base) var(--pf-e-out) both; }
@keyframes pf-fila-entra { from { opacity: 0; transform: translateY(6px); } }
.pf-row.pf-sale { opacity: 0; transform: translateY(4px); transition: opacity 180ms var(--pf-e-out), transform 180ms var(--pf-e-out); pointer-events: none; }
.pf-rica-t .pf-inp { height: 34px; max-width: 320px; }
/* El aviso «Entra con Face ID o tu huella» tras ingresar con contraseña: hoja inferior con velo en el celular,
   tarjeta ancha abajo a la derecha en computadora. Grande a propósito: es la invitación a dejar la contraseña.
   Entra 260 ms con la curva de las hojas y sale más rápido; con movimiento reducido solo cambia la opacidad. */
.pf-llave-velo { position: fixed; inset: 0; z-index: 10000; background: rgba(13, 46, 32, .38); opacity: 0; transition: opacity 220ms ease; }
html[data-theme="dark"] .pf-llave-velo { background: rgba(0, 0, 0, .55); }
.pf-llave-velo.on { opacity: 1; }
.pf-llave-velo[hidden] { display: none; }
.pf-llave-aviso { position: fixed; z-index: 10001; display: flex; flex-direction: column; background: var(--pf-sf); color: var(--pf-t1); box-shadow: var(--pf-sh3), 0 0 0 1px var(--pf-ln); opacity: 0; transform: translateY(28px); transition: opacity 260ms var(--pf-e-drawer), transform 260ms var(--pf-e-drawer); }
.pf-llave-aviso[hidden] { display: none; }
.pf-llave-aviso.on { opacity: 1; transform: none; }
.pf-llave-aviso.off { opacity: 0; transform: translateY(16px); transition-duration: 160ms; }
.pf-llave-aviso-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 14px 0 22px; }
.pf-llave-aviso-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--pf-g7); color: #fff; font-size: 30px; box-shadow: 0 14px 28px -14px var(--pf-g7); }
html[data-theme="dark"] .pf-llave-aviso-ic { background: var(--pf-mint); color: var(--pf-g9); box-shadow: none; }
.pf-llave-aviso-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 22px 0; }
.pf-llave-aviso-cuerpo h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.pf-llave-aviso-cuerpo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pf-t2); }
.pf-llave-aviso-acc { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.pf-llave-aviso-acc > .pf-btn { width: 100%; height: 50px; font-size: 16px; border-radius: 12px; }
.pf-llave-aviso-acc > .pf-btn.ghost { height: 44px; font-size: 15px; }
@media (min-width: 768px) {
  .pf-llave-velo { display: none; }
  .pf-llave-aviso { right: 24px; bottom: 24px; width: min(440px, calc(100% - 48px)); border-radius: 22px; }
}
@media (max-width: 767px) {
  .pf-llave-aviso { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
  .pf-llave-aviso::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--pf-inl); }
  .pf-llave-aviso-cab { padding-top: 14px; }
  .pf-llave-aviso-ic { width: 72px; height: 72px; font-size: 34px; border-radius: 20px; }
  .pf-llave-aviso-cuerpo h3 { font-size: 24px; }
  .pf-llave-aviso-cuerpo p { font-size: 16px; }
  .pf-llave-aviso-acc { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .pf-llave-aviso-acc > .pf-btn { height: 54px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .pf-llave-aviso, .pf-llave-velo, .pf-row.pf-sale { transform: none; transition: opacity 150ms ease; } .pf-row.pf-nueva { animation: none; } }