/* Modo infantil: además del cambio de paleta (--t-*, ver temas.Tema "modo-infantil"), añade dinamismo real — bordes redondeados más grandes, tarjetas con "rebote" al pasar el ratón y una tipografía más redondeada en títulos. Todo gated por la clase .modo-infantil en , nunca afecta al tema normal. */ body.modo-infantil { --t-radius: 20px; } body.modo-infantil * { border-radius: var(--t-radius, 20px) !important; } body.modo-infantil h1, body.modo-infantil h2, body.modo-infantil h3 { font-family: 'Comic Sans MS', 'Baloo 2', system-ui, sans-serif; } body.modo-infantil .cur-card, body.modo-infantil .ej-card, body.modo-infantil .pia-msg, body.modo-infantil .btn-primary { transition: transform 0.15s ease; } body.modo-infantil .cur-card:hover, body.modo-infantil .ej-card:hover { transform: scale(1.03) rotate(-1deg); } body.modo-infantil .btn-primary:hover, body.modo-infantil .nav-modo-infantil-btn:hover { transform: scale(1.06); } @keyframes modoInfantilRebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } body.modo-infantil .modo-infantil-float-btn { animation: modoInfantilRebote 2s ease-in-out infinite; } /* 2026-07-13: antes vivia dentro del navbar (.nav-modo-infantil-*) y se solapaba con "Iniciar sesion"/"Matricúlate" en pantallas normales - pedido de Eduardo, viendolo en vivo. Ahora boton flotante fijo abajo a la izquierda, mismo nivel/z-index que el widget de chat (abajo a la derecha), para no competir por espacio con el resto de la navegacion. */ /* bottom:96px, no 20px: el banner de cookies (#cookieBanner) es fixed, ancho completo, ~68px de alto en 2 lineas de texto - con 20px este boton quedaba tapado DEBAJO del banner (mismo rectangulo, z-index 9999 del banner por encima), inclickeable hasta aceptar cookies. Confirmado con getBoundingClientRect: banner y:831-900, boton y:840-880 en viewport de 900px de alto - solapamiento total. */ .modo-infantil-float-form { position: fixed; left: 20px; bottom: 96px; z-index: 10000; } .modo-infantil-float-btn { border: 2px solid var(--t-accent, #0f7a5c); background: var(--t-panel, #fff); color: var(--t-accent, #0f7a5c); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: 0 4px 16px -4px rgba(0,0,0,.22); } .modo-infantil-float-btn:hover { background: var(--t-accent-faint, #e4f5ee); } @media (max-width: 480px) { .modo-infantil-float-form { left: 12px; bottom: 12px; } .modo-infantil-float-btn { padding: 8px 14px; font-size: 0.8rem; } } /* 2026-07-13: pedido explicito de Eduardo - textos mas grandes, mas separados, resumidos (ver

en temas_estudiar.html) y una maquetacion mas claramente infantil, no solo la paleta de colores. */ body.modo-infantil { font-size: 1.1rem; } body.modo-infantil p, body.modo-infantil li, body.modo-infantil .cur-temas__explicacion, body.modo-infantil .cur-temas__ejemplos li, body.modo-infantil .cur-temas__ejercicios li { font-size: 1.15em; line-height: 1.75; } body.modo-infantil h1 { font-size: 2.2rem; } body.modo-infantil h2 { font-size: 1.75rem; margin-bottom: .75rem; } body.modo-infantil h3 { font-size: 1.3rem; } /* Mas aire entre bloques - separados pedido explicitamente */ body.modo-infantil .cur-libro__pagina > * + *, body.modo-infantil .cur-temas__estudio > * + * { margin-top: 1.25rem; } body.modo-infantil .cur-temas__ejemplos li, body.modo-infantil .cur-temas__ejercicios li { margin-bottom: .6rem; } /* Bloques pagina de libro mas anchos de margen, mas acolchados, con un golpe de color en el borde para que cada tema se sienta como su propia tarjeta de cuento, no una pagina de texto plano. */ body.modo-infantil .cur-libro__pagina { padding: 2.25rem 2rem; border-left: 8px solid var(--t-accent, #0f7a5c) !important; } body.modo-infantil .cur-libro__eyebrow { font-size: 1rem; padding: .3rem .8rem; background: var(--t-accent-faint, #e4f5ee); } /* Desplegables resumido - los ejemplos/ejercicios de cada tema quedan colapsados por defecto (ejercicios) o abiertos con menos peso visual (ejemplos), en vez de aparecer siempre desplegados de golpe. */ body.modo-infantil .cur-libro__detalle { background: var(--t-accent-faint, #f4f9f7); padding: 1rem 1.25rem; margin-top: 1.25rem; } body.modo-infantil .cur-libro__detalle summary { font-size: 1.2rem; font-weight: 700; cursor: pointer; list-style: revert; color: var(--t-accent, #0f7a5c); } body.modo-infantil .cur-libro__detalle[open] summary { margin-bottom: .75rem; } /* Checkboxes de elige tus temas y botones - objetivo tactil mas grande y mas separado, pensado para dedos de niños/moviles. */ body.modo-infantil .cur-temas__item { padding: 1.1rem 1.3rem; margin-bottom: 1rem; } body.modo-infantil .cur-temas__item input[type="checkbox"] { width: 26px; height: 26px; } body.modo-infantil .cur-temas__titulo { font-size: 1.2rem; } body.modo-infantil .btn-primary, body.modo-infantil .cur-libro__btn { font-size: 1.1rem; padding: .9rem 1.6rem; } /* 2026-07-14 (Eduardo: "que sea como estar en una escuela de verdad" - lápices, papeles, libretas): primera tanda de ambientación de material escolar, solo CSS (sin imágenes nuevas), sobre lo que ya existía (paleta/tipografía/tarjetas rebote de arriba). Iterativo: cada pasada del bucle añade una pieza más, no todo de golpe. */ /* Papel de libreta rayado detrás de cada "página" de tema - la sensación de estar escribiendo en un cuaderno de verdad, no leyendo una web plana. */ body.modo-infantil .cur-libro__pagina { background-image: repeating-linear-gradient( to bottom, var(--t-panel, #fff) 0, var(--t-panel, #fff) 2.05rem, rgba(15, 122, 92, .12) 2.05rem, rgba(15, 122, 92, .12) calc(2.05rem + 1px) ); background-attachment: local; position: relative; } /* Espiral de libreta en el borde izquierdo - circulitos repetidos, sin imagen, para que la "página" se sienta arrancada de una libreta real. */ body.modo-infantil .cur-libro__pagina::before { content: ''; position: absolute; left: -4px; top: 12px; bottom: 12px; width: 10px; background-image: radial-gradient(circle, var(--t-bg, #f8f9fb) 3px, transparent 3.5px); background-size: 10px 22px; background-repeat: repeat-y; pointer-events: none; } /* Insignia tipo "pegatina de goma" en la esquina de cada tarjeta de curso/ ejercicio - referencia directa a las pegatinas que un profe pone en los cuadernos de verdad. Emoji, no imagen: cero peso extra, funciona igual en cualquier idioma/dispositivo. */ body.modo-infantil .cur-card, body.modo-infantil .ej-card { position: relative; } body.modo-infantil .cur-card::after, body.modo-infantil .ej-card::after { /* 2026-07-14: la tarjeta tiene overflow:hidden (recorta las esquinas redondeadas) - un ::after con offset NEGATIVO (fuera del borde) se recortaba sin avisar (invisible en la practica). Dentro del borde. */ content: '✏️'; position: absolute; top: 8px; right: 8px; font-size: 1.3rem; transform: rotate(18deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); pointer-events: none; z-index: 2; } /* Botones principales con textura "recortado a mano" (borde discontinuo fino por dentro del borde real) - efecto manualidad infantil sin SVG. */ body.modo-infantil .btn-primary { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); } /* El botón flotante de activar/desactivar usa emoji de lapicero en vez del globo/osito genérico anterior - más "material escolar", menos genérico. */ .modo-infantil-float-btn { font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif; } /* "Mis matrículas" como una libreta de horario de clase: cada matrícula es una pestaña de cuaderno con un golpe de rotulador a la izquierda según su estado (verde=activa, ámbar=prueba), en vez de la lista plana normal. */ body.modo-infantil .mat-lista__item { border-left: 10px solid var(--t-accent, #0f7a5c); position: relative; padding-left: 1.5rem; } body.modo-infantil .mat-lista__item--trial { border-left-color: #f0a020; } body.modo-infantil .mat-lista__item--vencida, body.modo-infantil .mat-lista__item--cancelada { border-left-color: #9ca3af; } body.modo-infantil .mat-lista__item::before { content: '📓'; position: absolute; top: 10px; left: -1.9rem; font-size: 1.3rem; } body.modo-infantil .mat-lista__curso { font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif; font-size: 1.15em; } /* 2026-07-14: la pantalla de "ejercicio bloqueado" es un momento emocional real para un niño (le acaban de decir que no puede jugar algo) - en modo infantil se suaviza con tono de animo y el mismo estilo de tarjeta de libreta ya usado en el resto (borde de color + esquina redondeada), en vez de solo un candado seco sobre fondo plano. */ body.modo-infantil .ej-bloqueado { border-left: 10px solid var(--t-accent, #0f7a5c); background: var(--t-panel, #fff); border-radius: var(--t-radius, 20px); padding: 2rem; } body.modo-infantil .ej-bloqueado__icono::after { content: ' ¡Casi lo tienes!'; font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif; font-size: 1rem; display: block; margin-top: .4rem; color: var(--t-accent, #0f7a5c); font-weight: 700; } body.modo-infantil .ej-bloqueado h1 { font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif; }