/* Academic Clarity: papel e tinta. La interfaz se aparta, manda el contenido. */ :root { --papel: #fbf9f4; --superficie: #ffffff; --hundido: #f5f3ee; --borde: #e6e2d3; --tinta: #1a2e44; --texto: #2d2d2d; --tenue: #6b6862; --ok-fondo: #eef6f0; --ok-borde: #7fae90; --ok-tinta: #2f6b47; --mal-fondo: #fceeee; --mal-borde: #d99a9a; --mal-tinta: #9c3b3b; --sobre-tinta: #ffffff; --r-boton: 12px; --r-tarjeta: 16px; --barra-alto: 84px; } /* ---------- Temas visuales ---------- */ /* El atributo lo pone la app en antes de pintar nada, para que no se vea un parpadeo del tema por defecto al abrir. */ html[data-tema="noche"] { --papel: #12171f; --superficie: #1a222d; --hundido: #161d26; --borde: #2b3644; --tinta: #cfe0f5; --texto: #dce4ee; --tenue: #8b98a8; --sobre-tinta: #0f141b; --ok-fondo: #16281d; --ok-borde: #3f7a55; --ok-tinta: #7fce9c; --mal-fondo: #2b1a1c; --mal-borde: #7d4046; --mal-tinta: #e78f96; } html[data-tema="bosque"] { --papel: #f4f7f1; --superficie: #ffffff; --hundido: #e9efe4; --borde: #d5e0cc; --tinta: #1f4030; --texto: #2b332c; --tenue: #64715f; --sobre-tinta: #ffffff; --ok-fondo: #e8f4e9; --ok-borde: #74ab7f; --ok-tinta: #2c6b3d; --mal-fondo: #fbeeea; --mal-borde: #d69a8c; --mal-tinta: #94402f; } html[data-tema="atardecer"] { --papel: #fdf6f0; --superficie: #ffffff; --hundido: #f7ebe2; --borde: #ecd9c9; --tinta: #6d2f2a; --texto: #3a2b26; --tenue: #7d675c; --sobre-tinta: #fffaf6; --ok-fondo: #eff5ec; --ok-borde: #93b183; --ok-tinta: #46703a; --mal-fondo: #fbe9e6; --mal-borde: #d59a91; --mal-tinta: #9c3b3b; } * { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--texto); font: 400 16px/1.6 "Be Vietnam Pro", system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; } /* Todas las cifras alineadas: no deben bailar al cambiar el marcador. */ .cifra, .marcador { font-family: "JetBrains Mono", ui-monospace, monospace; } /* ---------- Cabecera ---------- */ #cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top)); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; background: var(--papel); } #cabecera h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--tinta); letter-spacing: -0.01em; } #app { padding: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; } #app.con-barra { padding-bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom)); } /* ---------- Botones ---------- */ button { font: inherit; cursor: pointer; border-radius: var(--r-boton); min-height: 48px; padding: 12px 20px; width: 100%; border: 1px solid var(--tinta); background: var(--tinta); color: var(--sobre-tinta); font-weight: 600; transition: opacity .15s, background .15s; } button:active { opacity: .85; } button:focus-visible { outline: 3px solid rgba(26, 46, 68, .3); outline-offset: 2px; } button[disabled] { cursor: default; } button.secundario { background: transparent; color: var(--tinta); } button.fantasma { background: transparent; color: var(--tenue); border-color: var(--borde); font-weight: 400; } .volver { width: auto; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--tenue); font-weight: 500; margin-bottom: 8px; } /* ---------- Tarjetas de tema ---------- */ .tarjeta { display: flex; align-items: flex-start; gap: 8px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 18px; margin-bottom: 12px; cursor: pointer; } .tarjeta .cuerpo { flex: 1; min-width: 0; } /* El aspa no compite con la tarjeta: se ve al buscarla, no antes. */ .tarjeta .borrar { flex: 0 0 auto; width: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--tenue); font-size: 15px; font-weight: 400; border-radius: 50%; line-height: 1; } .tarjeta .borrar:active { background: var(--mal-fondo); color: var(--mal-tinta); } .tarjeta:active { background: var(--hundido); } .tarjeta h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--tinta); } .tarjeta small { color: var(--tenue); font-size: 13px; } .vacio { color: var(--tenue); text-align: center; padding: 48px 20px; } /* Separa el boton de crear de la lista: iban pegados. */ .nuevo { margin-bottom: 22px; } /* Botones apilados (resultado del examen): nunca se tocan. */ .apilados { display: grid; gap: 12px; margin-top: 8px; } /* ---------- Resumen ---------- */ #resumen { font-size: 17px; line-height: 1.7; } #resumen h1 { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; margin: 0 0 20px; } #resumen h2 { font-size: 21px; font-weight: 600; color: var(--tinta); margin: 32px 0 8px; } #resumen h3 { font-size: 18px; font-weight: 600; margin: 24px 0 6px; } #resumen p, #resumen li { margin: 10px 0; } #resumen ul { padding-left: 22px; } #resumen strong { font-weight: 600; color: var(--tinta); } #resumen hr { border: 0; border-top: 1px solid var(--borde); margin: 32px 0; } #resumen code { font-family: "JetBrains Mono", monospace; font-size: .9em; } /* Las formulas en bloque respiran y se separan del texto. */ #resumen .katex-display { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-boton); padding: 16px 12px; margin: 20px 0; overflow-x: auto; } /* Tablas anchas: scrollean dentro, la pagina nunca se mueve en horizontal. */ .tabla-scroll { overflow-x: auto; margin: 20px 0; } #resumen table { border-collapse: collapse; width: 100%; font-size: 15px; } #resumen th, #resumen td { border: 1px solid var(--borde); padding: 10px 12px; text-align: left; vertical-align: top; } #resumen th { background: var(--hundido); font-weight: 600; color: var(--tinta); } /* Lo que la IA no pudo reproducir se marca, no se disfraza de texto normal. */ .diagrama { background: var(--hundido); border: 1px solid var(--borde); border-left: 3px solid var(--tinta); border-radius: var(--r-boton); padding: 14px 16px; margin: 20px 0; font-size: 15px; font-style: italic; color: var(--tenue); } .diagrama::before { content: "🖼 "; font-style: normal; } /* ---------- Barra inferior fija ---------- */ .barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px; padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--borde); } .barra button { margin: 0; } .barra .principal { flex: 2; } .barra .secundario { flex: 3; } .barra > button:only-child { flex: 1; } /* ---------- Progreso ---------- */ .cargando { font-size: 17px; color: var(--tinta); margin: 40px 0 0; text-align: center; } .cargando + .progreso { margin: 16px 0 8px; } .cargando ~ .marcador { justify-content: center; } .susurro { text-align: center; color: var(--tenue); font-size: 14px; margin: 22px 0 0; animation: respirar 5s ease-in-out infinite; } .susurro .reloj { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--borde); margin-left: 6px; } @keyframes respirar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* Mientras no hay progreso medible la barra se mueve igualmente: quieta durante tres minutos se lee como "se colgo". */ .progreso.indeterminada { position: relative; } .progreso.indeterminada::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--tinta); border-radius: 999px; animation: vaiven 1.6s ease-in-out infinite; } @keyframes vaiven { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } } @media (prefers-reduced-motion: reduce) { .susurro, .progreso.indeterminada::after { animation: none; } .progreso.indeterminada::after { opacity: .4; } } /* ---------- Confirmacion ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(26, 46, 68, .35); padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .hoja { width: 100%; max-width: 420px; display: grid; gap: 10px; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 22px; animation: subir .18s ease-out; } .hoja .dice { font-size: 16px; line-height: 1.55; margin-bottom: 6px; } .hoja .dice b { color: var(--tinta); } .hoja .dice small { color: var(--tenue); font-size: 14px; } .hoja .peligro { background: var(--mal-tinta); border-color: var(--mal-tinta); color: var(--sobre-tinta); } @keyframes subir { from { transform: translateY(16px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hoja { animation: none; } } .progreso { height: 4px; background: var(--borde); border-radius: 999px; overflow: hidden; margin: 12px 0; } .progreso > div { height: 100%; background: var(--tinta); transition: width .3s; } /* ---------- Configurar examen ---------- */ .grupo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 20px; margin-bottom: 16px; } .grupo h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: var(--tinta); } .opciones-nivel { display: grid; gap: 10px; } .cantidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cantidades button { padding: 12px 4px; } .elegible { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); font-weight: 500; } .elegible[aria-pressed="true"] { background: var(--tinta); color: var(--sobre-tinta); border-color: var(--tinta); font-weight: 600; } .aviso { color: var(--tenue); font-size: 13px; text-align: center; margin: 4px 0 16px; } /* ---------- Examen ---------- */ .marcador { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tenue); } .marcador .aciertos { color: var(--ok-tinta); } .marcador .fallos { color: var(--mal-tinta); } .enunciado { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 20px; margin: 16px 0 20px; font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--tinta); } #opciones { display: grid; gap: 10px; } .opcion { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); font-weight: 500; line-height: 1.4; } .opcion .marca { font-size: 18px; flex: 0 0 auto; } /* Acierto y error nunca dependen solo del color: llevan icono y peso propios. */ .opcion.buena { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-tinta); font-weight: 600; } .opcion.mala { background: var(--mal-fondo); border-color: var(--mal-borde); color: var(--mal-tinta); font-weight: 600; } .opcion.apagada { opacity: .45; } .porque { background: var(--hundido); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 16px 18px; margin: 20px 0; font-size: 15px; line-height: 1.6; } .porque h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); } .porque h4::before { content: "💡 "; } /* ---------- Resultado ---------- */ .resultado { text-align: center; padding: 40px 0 24px; } .resultado .nota { font-family: "JetBrains Mono", monospace; font-size: 56px; font-weight: 500; color: var(--tinta); line-height: 1; } .resultado .de { color: var(--tenue); font-size: 15px; margin-top: 10px; } .error { color: var(--mal-tinta); background: var(--mal-fondo); border: 1px solid var(--mal-borde); border-radius: var(--r-boton); padding: 14px; } .historial { margin-top: 36px; } .historial h2 { font-size: 18px; font-weight: 600; color: var(--tinta); } .historial .fila { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--borde); padding: 12px 2px; font-size: 15px; } .historial .fila:last-child { border-bottom: 0; } .historial .puntaje { font-family: "JetBrains Mono", monospace; color: var(--tinta); } /* ---------- Cabecera: quien eres y como salir ---------- */ #sesion { display: flex; align-items: center; gap: 2px; } #sesion svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #sesion button { display: flex; align-items: center; gap: 6px; width: auto; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; font-size: 13px; font-weight: 500; border-radius: 999px; } /* El nombre lleva a los ajustes; va en el color del texto normal. */ #sesion .quien { color: var(--tenue); max-width: 40vw; } #sesion .quien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sesion .quien:active { background: var(--hundido); color: var(--tinta); } /* Salir es lo unico que se pierde de un toque: se distingue en rojo para que nadie lo confunda con el nombre que tiene al lado. */ #sesion .salir { color: var(--mal-tinta); } #sesion .salir:active { background: var(--mal-fondo); } /* ---------- Perfil ---------- */ .titulo-pantalla { font-size: 26px; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; margin: 4px 0 20px; } .grupo label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); margin: 14px 0 6px; } .grupo input { font: inherit; width: 100%; min-height: 48px; padding: 12px 16px; background: var(--papel); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-boton); } .grupo input:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(127, 127, 127, .18); } .grupo button[type="submit"] { margin-top: 16px; } .dicho { font-size: 13px; margin: 12px 0 0; min-height: 1px; } .dicho.bien { color: var(--ok-tinta); } .dicho.mal { color: var(--mal-tinta); } .paletas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .paleta { display: flex; align-items: center; gap: 10px; justify-content: flex-start; border: 1px solid; font-weight: 500; font-size: 15px; text-align: left; } /* La marca es un anillo grueso: el color del boton ya es el del tema, asi que rellenarlo mas no distinguiria nada. */ .paleta[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor inset; } .paleta .muestra { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } /* ---------- Entrar y registrarse ---------- */ .entrar { max-width: 380px; margin: 0 auto; padding: 8vh 0 40px; } .entrar h1 { margin: 0; font-size: 34px; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; text-align: center; } .entrar .lema { margin: 8px 0 34px; text-align: center; color: var(--tenue); font-size: 15px; } .entrar form { display: grid; gap: 6px; } .entrar label { font-size: 13px; font-weight: 600; color: var(--tinta); margin-top: 12px; } .entrar input { font: inherit; width: 100%; min-height: 50px; padding: 12px 16px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-boton); } .entrar input:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(26, 46, 68, .12); } .entrar button[type="submit"] { margin-top: 24px; } .entrar .fantasma { margin-top: 12px; } .entrar .error { margin: 14px 0 0; font-size: 14px; } .oculto { display: none; }