/* ============================================================ aprendiendo · Estilos base + sistema de temas Todo color sale de variables. Océano por defecto. Modo oscuro incluido. ============================================================ */ /* ---- PALETA OCÉANO (por defecto) ---- */ :root{ --paper:#EEF2F3; --paper-2:#E6ECEE; --card:#FBFCFD; --card-2:#F1F5F6; --ink:#132025; --pine:#0E7490; --pine-2:#0891B2; --pine-3:#22A5C4; --amber:#D97E0A; --amber-soft:#F59E0B; --amber-tint:#FCEBCD; --muted:#5E7076; --line:#D5DFE2; --locked:#B9C7CB; --risk:#C0532F; --risk-tint:#F6E0D6; --ok:#0E7490; --ok-tint:#D3EDF3; --shadow:0 20px 50px -22px rgba(14,58,72,.35); --sidebar:236px; } /* ---- Otras paletas (acento) ---- */ [data-accent="pino"]{ --paper:#EEF0EA; --paper-2:#E6E9DF; --card:#FBFCF8; --card-2:#F2F4EC; --pine:#164D3B; --pine-2:#1E6349; --pine-3:#2C7A5B; --amber:#B5741A; --amber-soft:#C9851F; --amber-tint:#F6E7C4; --muted:#63706A; --line:#DBDFD3; --ok:#2C7A5B; --ok-tint:#DBEEE3; --shadow:0 20px 50px -22px rgba(22,40,30,.35); } [data-accent="vino"]{ --paper:#F1ECEF; --paper-2:#E9E1E6; --card:#FCF9FB; --card-2:#F4EEF2; --pine:#7A2B49; --pine-2:#9D3A60; --pine-3:#B94E78; --amber:#C99320; --amber-soft:#E9B44C; --amber-tint:#F6EBCF; --muted:#6E5E66; --line:#E0D4DB; --ok:#7A2B49; --ok-tint:#EEDCE5; --shadow:0 20px 50px -22px rgba(60,20,40,.35); } /* ---- MODO OSCURO (anti fatiga visual) ---- */ [data-theme="dark"]{ --paper:#0C1417; --paper-2:#111C20; --card:#152126; --card-2:#1A282D; --ink:#E5EDEF; --muted:#8FA0A6; --line:#26363C; --locked:#3A4A50; --pine:#4FC5E0; --pine-2:#6FD3EC; --pine-3:#3FB3D4; --amber:#F0B75E; --amber-soft:#F6C87E; --amber-tint:#33280F; --risk:#E68A6F; --risk-tint:#3A231C; --ok:#4FC5E0; --ok-tint:#12333C; --shadow:0 20px 50px -22px rgba(0,0,0,.6); } [data-theme="dark"][data-accent="pino"]{ --pine:#7FD3AA; --pine-2:#93E0BC; --pine-3:#6FC79C; --ok:#7FD3AA; --ok-tint:#173A2B; } [data-theme="dark"][data-accent="vino"]{ --pine:#E38DAE; --pine-2:#EDA6C2; --pine-3:#D97DA0; --ok:#E38DAE; --ok-tint:#3A2230; } /* ============================================================ PIELES POR EDAD (data-skin en ). Cada piel es un juego de tokens: recolorea toda la app sin tocar el resto del CSS. ============================================================ */ /* 🧒 NIÑO · aventura andina — cálido, brillante, alegre */ html[data-skin="nino"]{ --paper:#FFF7EE; --paper-2:#FFEEDD; --card:#FFFFFF; --card-2:#FFF3E6; --ink:#3A2415; --pine:#FF7A45; --pine-2:#FF9A5C; --pine-3:#FFB07A; --amber:#F4A62A; --amber-soft:#FFC24D; --amber-tint:#FFE9C4; --muted:#A07A5C; --line:#FFE0C2; --locked:#F0D2B8; --risk:#F97316; --risk-tint:#FFE4CC; --ok:#22C55E; --ok-tint:#DCFCE7; --shadow:0 22px 44px -20px rgba(255,122,69,.5); } /* 🛹 PÚBER · sube de nivel — violeta/cian, energético */ html[data-skin="puber"]{ --paper:#F6F4FF; --paper-2:#EEE9FF; --card:#FFFFFF; --card-2:#F3EFFF; --ink:#241B3D; --pine:#7C3AED; --pine-2:#9152F0; --pine-3:#A66DF5; --amber:#06B6D4; --amber-soft:#22D3EE; --amber-tint:#CFF7FD; --muted:#7A6CA3; --line:#E6DCFF; --locked:#CFC2EE; --risk:#F59E0B; --risk-tint:#FEF0D6; --ok:#16A34A; --ok-tint:#DCFCE7; --shadow:0 22px 44px -20px rgba(124,58,237,.5); } /* 🎧 ADOLESCENTE · neón nocturno — oscuro, magenta/lima, tipo anime/gaming */ html[data-skin="adolescente"]{ --paper:#0A0E17; --paper-2:#0F1523; --card:#141B2B; --card-2:#1A2233; --ink:#EEF2FF; --pine:#EC4899; --pine-2:#F26AAE; --pine-3:#F58AC1; --amber:#A3E635; --amber-soft:#BEF264; --amber-tint:#26330F; --muted:#8B98B5; --line:#232D42; --locked:#3A4763; --risk:#FB7185; --risk-tint:#3A1620; --ok:#34D399; --ok-tint:#0F3A2E; --shadow:0 24px 50px -20px rgba(236,72,153,.55); } /* 🚀 JOVEN ADULTO · marca RAMIROBIZ — ciruela + oro, premium */ html[data-skin="joven"]{ --paper:#FAF8F4; --paper-2:#F2EDE4; --card:#FFFFFF; --card-2:#F6F1E9; --ink:#241327; --pine:#3A1D40; --pine-2:#4E2A56; --pine-3:#6B3D74; --amber:#D99A2B; --amber-soft:#E9B44C; --amber-tint:#F6E7C4; --muted:#8A7D86; --line:#EADFCE; --locked:#D8CBBB; --risk:#C2842F; --risk-tint:#F6E7CF; --ok:#15803D; --ok-tint:#DCFCE7; --shadow:0 20px 46px -22px rgba(36,19,39,.4); } /* 💼 ADULTO · enfocado — teal/tinta, sobrio y profesional */ html[data-skin="adulto"]{ --paper:#F4F7F8; --paper-2:#EAF0F2; --card:#FFFFFF; --card-2:#EEF3F5; --ink:#122029; --pine:#0F766E; --pine-2:#12897F; --pine-3:#1AA093; --amber:#B45309; --amber-soft:#D97706; --amber-tint:#FCE9D2; --muted:#5B6B76; --line:#DDE5E9; --locked:#C3CFD5; --risk:#B45309; --risk-tint:#F6E7D2; --ok:#0F766E; --ok-tint:#D2EFEC; --shadow:0 16px 40px -24px rgba(14,37,71,.35); } /* 🌿 ADULTO MAYOR · claro y grande — alto contraste, base de accesibilidad */ html[data-skin="mayor"]{ --paper:#FFFFFF; --paper-2:#EEF2F7; --card:#FFFFFF; --card-2:#F3F6FB; --ink:#0B1220; --pine:#1D4ED8; --pine-2:#2563EB; --pine-3:#3B76F0; --amber:#B45309; --amber-soft:#C2620B; --amber-tint:#FBE7C7; --muted:#3F4B5B; --line:#C2CEDC; --locked:#AEBCCB; --risk:#9A3412; --risk-tint:#FBE3D6; --ok:#166534; --ok-tint:#D6F0DE; --shadow:0 12px 30px -18px rgba(11,18,32,.35); } /* piel base 'oceano' = :root (sin overrides) */ /* ---- MODO OSCURO POR ENCIMA DE LAS PIELES ---- Las pieles (html[data-skin="…"], especificidad 0,1,1) pisaban a [data-theme="dark"] (0,1,0), así que en una piel (p.ej. Niño) el modo oscuro NO se veía. Con esta misma especificidad (html[data-theme], 0,1,1) y yendo DESPUÉS de las pieles, el modo oscuro gana para CUALQUIER piel: oscurece parejo (la piel define el look claro). */ html[data-theme="dark"]{ --paper:#0C1417; --paper-2:#111C20; --card:#152126; --card-2:#1A282D; --ink:#E5EDEF; --muted:#8FA0A6; --line:#26363C; --locked:#3A4A50; --pine:#4FC5E0; --pine-2:#6FD3EC; --pine-3:#3FB3D4; --amber:#F0B75E; --amber-soft:#F6C87E; --amber-tint:#33280F; --risk:#E68A6F; --risk-tint:#3A231C; --ok:#4FC5E0; --ok-tint:#12333C; --shadow:0 20px 50px -22px rgba(0,0,0,.6); } html[data-theme="dark"][data-accent="pino"]{ --pine:#7FD3AA; --pine-2:#93E0BC; --pine-3:#6FC79C; --ok:#7FD3AA; --ok-tint:#173A2B; } html[data-theme="dark"][data-accent="vino"]{ --pine:#E38DAE; --pine-2:#EDA6C2; --pine-3:#D97DA0; --ok:#E38DAE; --ok-tint:#3A2230; } /* ---- TIPOGRAFÍA POR PIEL (personalidad de cada edad) ---- */ :root{ --font-display:'Bricolage Grotesque'; --font-body:'Inter'; } html[data-skin="nino"]{ --font-display:'Fredoka'; --font-body:'Fredoka'; } html[data-skin="puber"]{ --font-display:'Baloo 2'; --font-body:'Baloo 2'; } html[data-skin="adolescente"]{ --font-display:'Space Grotesk'; --font-body:'Space Grotesk'; } html[data-skin="joven"]{ --font-display:'Fraunces'; --font-body:'Inter'; } html[data-skin="adulto"]{ --font-display:'Newsreader'; --font-body:'Inter'; } html[data-skin="mayor"]{ --font-display:'Atkinson Hyperlegible'; --font-body:'Atkinson Hyperlegible'; } /* Aplica el token del cuerpo y de los títulos (incluye estilos en línea de las páginas). */ body{ font-family: var(--font-body), 'Inter', system-ui, sans-serif; } h1.pg, h2.blk, .crumb b, .greet, [style*="Bricolage Grotesque"], [style*="Fraunces"]{ font-family: var(--font-display), 'Bricolage Grotesque', serif !important; } /* El adulto mayor con letra un poco más grande para leer cómodo. */ html[data-skin="mayor"] body{ font-size:16.5px; } /* --- Adolescente: brillo neón sutil en acentos --- */ html[data-skin="adolescente"] .btn-primary, html[data-skin="adolescente"] [class*="primary"]{ box-shadow:0 0 0 1px color-mix(in srgb,var(--pine) 40%,transparent), 0 8px 26px -10px var(--pine); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden; transition:background .25s ease,color .25s ease} button,input,select{font-family:inherit} button{cursor:pointer;border:none;background:none;color:inherit} a{color:inherit;text-decoration:none} ::selection{background:var(--amber-soft);color:#231604} :focus-visible{outline:2px solid var(--pine-3);outline-offset:2px;border-radius:4px} /* shell */ .app{display:flex;height:100vh;overflow:hidden} .sidebar{width:var(--sidebar);flex:none;background:linear-gradient(180deg,#0B3946,#082630); color:#CFE0E6;display:flex;flex-direction:column;transition:transform .28s ease;z-index:40} [data-accent="pino"] .sidebar{background:linear-gradient(180deg,#123E30,#0E3226)} [data-accent="vino"] .sidebar{background:linear-gradient(180deg,#4B1B2E,#33121F)} [data-theme="dark"] .sidebar{background:linear-gradient(180deg,#0A1518,#060E11)} .sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px} .sb-brand .nm{font-family:'Bricolage Grotesque';font-weight:800;font-size:19px;color:#fff;letter-spacing:-.03em} .sb-nav{flex:1;overflow-y:auto;padding:6px 12px} .sb-group{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:#6E9AA6;margin:16px 8px 6px} .sb-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13px; color:#C3D6DC;margin-bottom:2px;transition:.14s} .sb-item:hover{background:rgba(255,255,255,.06);color:#fff} .sb-item.on{background:rgba(245,158,11,.18);color:#fff;font-weight:600} .sb-item .ico{width:18px;flex:none;text-align:center;opacity:.9} .sb-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px} .sb-foot .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--amber-soft),var(--amber)); color:#231604;font-size:13px;font-weight:700;display:grid;place-items:center;text-transform:uppercase} .sb-foot .who{font-size:12px;line-height:1.3}.sb-foot .who b{color:#fff;display:block;font-size:12.5px} .sb-foot .who span{color:#7FA5B1;font-size:10.5px} .main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--paper)} .topbar{height:58px;flex:none;background:var(--card);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:14px;padding:0 20px;z-index:30;transition:background .25s} .hamb{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--card-2);align-items:center;justify-content:center} .hamb span,.hamb span::before,.hamb span::after{content:"";width:16px;height:2px;background:var(--ink);position:relative;display:block} .hamb span::before{position:absolute;top:-5px}.hamb span::after{position:absolute;top:5px} .crumb b{font-family:'Bricolage Grotesque';font-weight:700;color:var(--ink)} .top-r{margin-left:auto;display:flex;align-items:center;gap:10px} .themebtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--card-2); display:grid;place-items:center;font-size:15px;transition:.15s} .themebtn:hover{background:var(--paper-2)} .view{flex:1;overflow-y:auto;padding:26px 30px 60px} /* generic */ h1.pg{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--pine)} .sub{color:var(--muted);font-size:13.5px;margin-top:4px;max-width:660px} .eyebrow{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:6px} .section-head{margin-bottom:22px} h2.blk{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;margin:26px 0 12px;color:var(--ink)} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--pine);color:#fff;font-size:13px;font-weight:600; padding:10px 16px;border-radius:10px;transition:.15s;border:1px solid transparent} .btn:hover{filter:brightness(1.08)} [data-theme="dark"] .btn{color:#08171b} .btn.ghost{background:var(--card);color:var(--pine);border-color:var(--line)} .btn.ghost:hover{background:var(--card-2)} .btn.amber{background:var(--amber-soft);color:#231604} .btn.danger{background:var(--risk-tint);color:var(--risk)} .btn.sm{padding:7px 12px;font-size:12px;border-radius:8px} .btn.block{width:100%;justify-content:center} .cards{display:grid;gap:16px} .g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:14px;transition:background .25s,border-color .25s} .pad{padding:18px 20px} .kpi{padding:16px 17px} .kpi .k{font-size:11.5px;color:var(--muted);margin-bottom:8px} .kpi .v{font-family:'IBM Plex Mono';font-weight:600;font-size:27px;color:var(--pine);letter-spacing:-.02em} .kpi .d{font-size:10.5px;color:var(--muted);margin-top:4px} .chip{font-family:'IBM Plex Mono';font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;display:inline-block} .chip.on{background:var(--ok-tint);color:var(--ok)} .chip.off{background:var(--amber-tint);color:var(--amber)} .flash{padding:11px 15px;border-radius:10px;font-size:13px;margin-bottom:16px;border:1px solid} .flash.ok{background:var(--ok-tint);color:var(--ok);border-color:transparent} .flash.error{background:var(--risk-tint);color:var(--risk);border-color:transparent} /* forms */ .field{margin-bottom:16px;max-width:520px} .field label{display:flex;align-items:center;font-size:12px;font-weight:600;margin-bottom:6px} .field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--card);color:var(--ink)} .field input:focus{outline:none;border-color:var(--pine-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 15%,transparent)} .field .hint{font-size:10.5px;color:var(--muted);margin-top:5px} .swatch{display:inline-block;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);vertical-align:middle;margin-right:8px} .palrow{display:flex;gap:10px;flex-wrap:wrap} .palbtn{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink)} .palbtn.on{border-color:var(--pine);box-shadow:0 0 0 2px color-mix(in srgb,var(--pine) 18%,transparent)} /* ayuda contextual (?) */ .q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--paper-2); border:1px solid var(--line);font-size:10px;color:var(--muted);margin-left:6px;cursor:help;position:relative} .q .q-pop{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);width:220px;background:var(--ink); color:var(--card);font-size:11px;line-height:1.4;padding:8px 10px;border-radius:8px;opacity:0;visibility:hidden; transition:.15s;z-index:50;font-weight:400;text-align:left;box-shadow:var(--shadow)} .q:hover .q-pop,.q:focus .q-pop,.q.q-open .q-pop{opacity:1;visibility:visible} /* tables */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 10px} .tbl td{padding:12px 14px;background:var(--card);border-top:1px solid var(--line)} .tbl tr td:first-child{border-radius:11px 0 0 11px;border-left:1px solid var(--line)} .tbl tr td:last-child{border-radius:0 11px 11px 0;border-right:1px solid var(--line)} .mono{font-family:'IBM Plex Mono'} /* login */ .login-wrap{display:grid;place-items:center;height:100vh;background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb,var(--pine) 12%,var(--paper)), var(--paper))} .login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;width:100%;max-width:380px;box-shadow:var(--shadow)} .login-card .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px} .login-card .brand .nm{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;color:var(--pine)} .login-card .lema{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px} .empty{text-align:center;padding:50px 20px;color:var(--muted)} @media(max-width:860px){ .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);box-shadow:var(--shadow)} .sidebar.open{transform:translateX(0)} .scrim{display:none;position:fixed;inset:0;background:rgba(10,20,24,.45);z-index:35} .scrim.show{display:block} .hamb{display:flex} .view{padding:20px 16px 50px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* separador "o" entre Google y contraseña (login) */ .sep-o{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;margin:14px 0} .sep-o::before,.sep-o::after{content:"";flex:1;height:1px;background:var(--line)} /* estados de usuario en tablas */ .udot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle} .udot.activo{background:var(--ok)} .udot.suspendido{background:var(--amber-soft)} .udot.eliminado{background:var(--risk)} .rol-badge{font-family:'IBM Plex Mono';font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--paper-2);color:var(--pine);border:1px solid var(--line)} /* ============ FASE 2 · público / alumno ============ */ body.pub{overflow:auto} .pubnav{display:flex;align-items:center;gap:12px;padding:15px 26px;max-width:1100px;margin:0 auto} .pubnav .brand{display:flex;align-items:center;gap:10px} .pubnav .brand .nm{font-family:'Bricolage Grotesque';font-weight:800;font-size:19px;color:var(--pine);letter-spacing:-.02em} .pubnav .sp{margin-left:auto;display:flex;align-items:center;gap:14px} .publink{font-size:13px;font-weight:500;color:var(--ink)} .publink:hover{color:var(--pine)} .pubmain{min-height:60vh} .pubfoot{text-align:center;padding:26px;color:var(--muted);font-size:12px;font-family:'IBM Plex Mono';border-top:1px solid var(--line);margin-top:40px} .pub-hero{text-align:center;padding:46px 20px 30px;max-width:680px;margin:0 auto} .pub-hero h1{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(26px,5vw,40px);letter-spacing:-.02em;color:var(--pine);line-height:1.1} .pub-hero p{color:var(--muted);font-size:15px;margin-top:10px} .pub-splash{text-align:center;padding:60px 20px 90px;max-width:640px;margin:0 auto} .pub-splash .knot{margin:0 auto 22px;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--pine) 30%,transparent))} .pub-splash h1{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(32px,6vw,52px);letter-spacing:-.03em;color:var(--pine);line-height:1.05;margin:6px 0 14px} .pub-splash .lema{font-size:clamp(15px,2.4vw,19px);color:var(--muted);max-width:520px;margin:0 auto 30px} .pub-splash .cta{display:flex;gap:12px;justify-content:center} .pub-splash .soon{margin-top:40px;display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono';font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:9px 15px;border-radius:999px} .pub-splash .soon .d{width:8px;height:8px;border-radius:50%;background:var(--amber-soft)} .btn.lg{padding:14px 26px;font-size:15px;border-radius:12px} .catalogo{padding:10px 20px 50px} /* tarjetas de curso (catálogo) */ .course-card{cursor:pointer;transition:.18s;display:flex;flex-direction:column;overflow:hidden} .course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .cc-cover{aspect-ratio:16/9;position:relative;display:grid;place-items:center;color:#EAF4EE} .cc-cover .lvl{position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(8,20,26,.55);border:1px solid rgba(255,255,255,.18);padding:4px 8px;border-radius:6px;z-index:2} .cc-body{padding:14px 15px;flex:1;display:flex;flex-direction:column} .cc-body h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;line-height:1.25} .cc-body p{font-size:11.5px;color:var(--muted);margin-top:5px;flex:1} .cc-meta{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:'IBM Plex Mono';font-size:10.5px;color:var(--muted)} .cc-prog{display:flex;align-items:center;gap:9px}.cc-prog span{font-family:'IBM Plex Mono';font-size:10px;color:var(--muted)} /* detalle de curso */ .curso-hero{color:#EAF4EE;border-radius:0;padding:40px 26px;position:relative;overflow:hidden;text-align:center} .curso-hero .lvl{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-soft)} .curso-hero h1{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(24px,5vw,36px);margin:6px 0 8px;position:relative;z-index:2} .curso-hero p{font-size:14px;opacity:.9;max-width:560px;margin:0 auto;position:relative;z-index:2} .curso-hero .hero-stats{display:flex;gap:16px;justify-content:center;margin-top:16px;font-family:'IBM Plex Mono';font-size:11px;opacity:.85;position:relative;z-index:2;flex-wrap:wrap} .curso-body{max-width:760px;margin:0 auto;padding:26px 20px 50px} .enroll-box{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px} /* khipu (ruta de lecciones) */ .khipu{padding-left:2px} .knode{display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:9px;transition:.15s} .knode.clickable{cursor:pointer}.knode.clickable:hover{border-color:var(--pine-3);transform:translateX(3px)} .knode .bead{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--locked);background:var(--card-2);font-size:12px;color:var(--muted);font-family:'IBM Plex Mono'} .knode.done .bead{background:var(--amber-soft);border-color:var(--amber-soft);color:#231604} .knode.active .bead{border-color:var(--pine);background:var(--card)} .knode .info{flex:1}.knode .info .t{font-size:13.5px;font-weight:600} .knode .info .m{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--muted);margin-top:2px} .knode.locked{opacity:.6}.knode.locked .bead{border-style:dashed} .knode .go{font-size:12px;color:var(--pine-2);font-weight:600} /* vista de lección */ .leccion-wrap{max-width:1040px;margin:0 auto;padding:20px} .volver{display:inline-block;font-size:13px;color:var(--pine-2);margin-bottom:14px} .lesson-grid{display:grid;grid-template-columns:1fr 300px;gap:22px} @media(max-width:960px){.lesson-grid{grid-template-columns:1fr}} .player-box{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000} .player-box iframe,.player-box video{width:100%;height:100%;display:block;border:0} .lesson-cta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;flex-wrap:wrap;gap:12px} .focus-card{background:linear-gradient(165deg,#0B3946,#082630);color:#EAF4EE;border-radius:14px;padding:17px 16px;position:relative;overflow:hidden} [data-accent="pino"] .focus-card{background:linear-gradient(165deg,#123E30,#0E3226)} [data-accent="vino"] .focus-card{background:linear-gradient(165deg,#4B1B2E,#33121f)} .focus-card::after{content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.28),transparent 65%)} .focus-card .lab{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.72;position:relative;z-index:2} .focus-card .time{font-family:'IBM Plex Mono';font-weight:600;font-size:32px;margin:2px 0 6px;position:relative;z-index:2} .focus-card .state{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;background:rgba(105,214,160,.16);border:1px solid rgba(105,214,160,.4);color:#9EE7C2;padding:4px 10px;border-radius:999px;position:relative;z-index:2;transition:.2s} .focus-card .state .d{width:7px;height:7px;border-radius:50%;background:#69D6A0} .focus-card .note{font-size:10px;opacity:.6;margin-top:10px;position:relative;z-index:2} .ministat{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-top:9px;font-size:11.5px;color:var(--muted)} .ministat b{font-family:'IBM Plex Mono';color:var(--pine);font-size:13px} .bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pine-2),var(--pine-3))} /* Fase 4 · pista de quiz en la lección */ .quiz-hint{margin-top:14px;background:color-mix(in srgb,var(--amber-soft) 12%,var(--card));border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--muted)} .quiz-hint b{color:var(--pine)} .quiz-review .qcard{opacity:.97} /* Fase 6 · botón de certificado en Mis cursos */ .cert-btn{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--pine,#1f5b50);border:1px solid var(--pine,#1f5b50);border-radius:8px;padding:5px 12px;cursor:pointer;background:transparent} .cert-btn:hover{background:var(--pine,#1f5b50);color:#fff} /* Fase · materiales descargables por lección */ .materiales{margin-top:16px;background:var(--card,#fff);border:1px solid var(--line,#e6e1d6);border-radius:12px;padding:14px 16px} .mat-tit{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;margin-bottom:10px} .mat-list{display:flex;flex-direction:column;gap:8px} .mat-item{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border:1px solid var(--line,#e6e1d6);border-radius:10px;padding:9px 12px;transition:.15s} .mat-item:hover{border-color:var(--pine,#1f5b50);background:color-mix(in srgb,var(--pine,#1f5b50) 5%,transparent)} .mat-ic{font-size:18px} .mat-nom{flex:1;font-size:13.5px} .mat-dl{font-size:11px;color:var(--pine,#1f5b50)} /* ===== PWA · banner de instalación y modo app ===== */ .pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:200; display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.18);max-width:520px;margin:0 auto} .pwa-banner .pwa-ico{font-size:26px;flex:none} .pwa-banner .pwa-txt{flex:1;line-height:1.25} .pwa-banner .pwa-txt b{font-family:'Bricolage Grotesque';font-size:14px;display:block} .pwa-banner .pwa-txt small{font-size:12px;color:var(--muted)} .pwa-banner .pwa-cta{background:var(--pine);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;flex:none} .pwa-banner .pwa-x{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;flex:none;padding:4px} /* En modo app: respetar el notch / barra inferior */ @media (display-mode: standalone){ body.pub{padding-bottom:env(safe-area-inset-bottom,0px)} .pubnav{padding-top:env(safe-area-inset-top,0px)} } /* ============================================================ POLISH · micro-interacciones (hover con movimiento suave) Se apaga solo si el usuario pidió "reducir movimiento". ============================================================ */ @media (hover:hover){ .card,.lesson,.qcard,.eval,.tile,.curso-card,.rec-card,.leccion-item{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover,.lesson:hover,.tile:hover,.curso-card:hover,.rec-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--pine) 30%, var(--line)); } button,.btn,a.btn{ transition:transform .14s ease, box-shadow .16s ease, filter .18s ease, background-color .18s ease; } button:hover,.btn:hover,a.btn:hover{ transform:translateY(-1px); filter:saturate(1.05); } button:active,.btn:active,a.btn:active{ transform:translateY(0) scale(.985); } /* Adulto mayor: accesible, casi sin movimiento */ html[data-skin="mayor"] .card:hover,html[data-skin="mayor"] .tile:hover, html[data-skin="mayor"] button:hover,html[data-skin="mayor"] .btn:hover{ transform:none; filter:none; } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } } /* ============================================================ SENDERO (khipu): el cordón andino que une los nudos-lección. Da sensación de camino y de "falta poquito". ============================================================ */ .khipu{ position:relative; } .khipu::before{ content:''; position:absolute; left:27px; top:16px; bottom:16px; width:3px; background:var(--line); border-radius:2px; z-index:0; } .knode{ position:relative; z-index:1; } /* nudo actual: anillo suave que invita a seguir */ .knode.active .bead{ box-shadow:0 0 0 4px color-mix(in srgb, var(--pine) 16%, transparent); } .knode.done .bead{ box-shadow:0 0 0 3px color-mix(in srgb, var(--amber-soft) 32%, transparent); } /* niño y púber: cordón más grueso y festivo */ html[data-skin="nino"] .khipu::before, html[data-skin="puber"] .khipu::before{ width:4px; background:color-mix(in srgb,var(--pine) 25%, var(--line)); } /* adolescente: cordón con leve brillo neón */ html[data-skin="adolescente"] .knode.active .bead{ box-shadow:0 0 0 4px color-mix(in srgb,var(--pine) 22%, transparent), 0 0 12px -2px var(--pine); } /* Spinner de carga en botones (anti doble-clic al generar/evaluar con IA) */ .ldspin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:6px;animation:ldspin .7s linear infinite} @keyframes ldspin{to{transform:rotate(360deg)}} button:disabled,.btn:disabled{opacity:.7;cursor:progress}