/* Aula M1. La ruta de cuatro ejes organiza el espacio, con la identidad de la profe. */
:root { --paper: #fffaf7; --plum: #2b1028; --rose: #ed6393; --orange: #ff8a3d; --stroke: #eadde4; --soft-text: #705c6a; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
main:has(.learning-shell) { max-width: 1440px; padding-top: 0; }
.demo-notice { background: #fff1df; color: #613b19; padding: 12px 20px; font-size: .85rem; border-bottom: 1px solid #efd6b8; }
.demo-notice a { margin-left: 12px; font-weight: 700; }
.learning-shell { display: grid; grid-template-columns: 212px minmax(0,1fr); gap: 42px; }
.study-sidebar { position: sticky; top: 85px; align-self: start; padding-top: 28px; }
.sidebar-title { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.3rem; padding: 12px 14px 26px; }
.sidebar-title span { display: block; font-family: Inter,sans-serif; color: var(--soft-text); font-size: .76rem; font-weight: 500; margin-top: 4px; }
.study-sidebar nav { display: grid; gap: 5px; }
.study-sidebar nav a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 12px 14px; border-radius: 11px; font-size: .9rem; font-weight: 600; }
.study-sidebar nav a > span { font-size: 1.2rem; width: 20px; text-align: center; }
.study-sidebar nav a:hover { background: #f3e7ec; }
.study-sidebar nav a[aria-current] { color: #fff; background: var(--plum); }
.sidebar-note { border-top: 1px solid var(--stroke); margin: 32px 14px 0; padding-top: 24px; font-size: .85rem; }
.sidebar-note p { color: var(--soft-text); margin: 8px 0 16px; }
.sidebar-note a { font-weight: 600; text-underline-offset: 4px; }
.study-main { min-width: 0; border-left: 1px solid var(--stroke); padding: 42px 0 30px 40px; }
.study-heading { margin-bottom: 26px; }
.study-heading h1 { font-size: clamp(1.9rem,3vw,2.7rem); letter-spacing: -.035em; margin: 8px 0 12px; }
.study-heading p { color: var(--soft-text); max-width: 64ch; margin: 0; }
.study-heading .eyebrow { color: #a63060; }
.next-step { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 28px; padding: 32px; background: var(--plum); color: #fff; border-radius: 20px; }
.next-step h2 { font-size: clamp(1.65rem,2.4vw,2.2rem); max-width: 22ch; margin: 10px 0 14px; }
.next-step p { color: #e6d2df; font-size: .92rem; max-width: 52ch; margin-bottom: 22px; }
.next-step .eyebrow { color: #ffafcc; }
.step-note { border-left: 1px solid #68415b; padding: 6px 0 6px 27px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.step-note > span { font-family: Inter,sans-serif; font-size: .59rem; letter-spacing: .14em; color: #dfbccf; }
.step-note b { font-family: Fraunces,Georgia,serif; font-size: 1.65rem; line-height: 1.25; font-weight: 500; }
.step-note em { color: #ffa162; }
.study-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 27px 0; margin-bottom: 18px; border-bottom: 1px solid var(--stroke); gap: 20px; }
.study-stats div + div { border-left: 1px solid var(--stroke); padding-left: 22px; }
.study-stats strong { display: block; font-size: 1.9rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.study-stats span { display: block; color: var(--soft-text); font-size: .75rem; max-width: 17ch; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 18px; }
.section-title h2 { font-size: 1.4rem; margin: 0; }
.section-title a { font-size: .85rem; font-weight: 600; text-underline-offset: 4px; }
.section-title p { color: var(--soft-text); font-size: .9rem; }
.axis-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.axis-card { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--stroke); border-radius: 14px; padding: 20px 16px; text-decoration: none; }
.axis-card:hover { border-color: var(--rose); box-shadow: 0 6px 20px #2b102809; }
.axis-symbol { flex: 0 0 46px; width: 46px; height: 54px; display: grid; place-items: center; color: #852d5c; font-family: Fraunces,Georgia,serif; font-size: 1.65rem; background: #fff0e8; border-radius: 8px; }
.axis-card-main { min-width: 0; flex: 1; }
.axis-card small { display: block; color: var(--soft-text); font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; }
.axis-card h3 { margin: 5px 0 8px; font-size: 1.05rem; }
.axis-card-main > span { color: var(--soft-text); font-size: .7rem; }
progress { display: block; width: 100%; height: 5px; accent-color: #c94c80; border: none; border-radius: 10px; overflow: hidden; background: #f0e4eb; margin-top: 12px; }
progress::-webkit-progress-bar { background: #f0e4eb; }
progress::-webkit-progress-value { background: #c94c80; }
.dashboard-bottom { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
.quiet-panel { padding: 20px 0; border-top: 2px solid var(--stroke); }
.quiet-panel h3 { margin: 12px 0 10px; }
.quiet-panel p { color: var(--soft-text); font-size: .85rem; }
.quiet-panel a { font-weight: 600; font-size: .84rem; }
.library-tools { display: grid; grid-template-columns: 1fr 200px; gap: 18px; padding: 20px; background: #fff; border: 1px solid var(--stroke); border-radius: 12px; }
.library-tools label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; }
.library-tools input,.library-tools select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--stroke); border-radius: 8px; font: inherit; background: #fff; color: var(--plum); }
.library-count { color: var(--soft-text); font-size: .85rem; margin: 22px 0 14px; }
.library-entry { margin-bottom: 14px; background: #fff; border: 1px solid var(--stroke); border-radius: 12px; }
.library-entry .item { border: 0; }
.library-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--stroke); }
.library-entry-foot > span { font-size: .73rem; color: var(--soft-text); }
.complete-btn { border: 0; background: #f5edf1; border-radius: 6px; padding: 7px 10px; color: var(--plum); font: inherit; font-size: .75rem; cursor: pointer; }
.complete-btn.is-complete { color: #186340; background: #e6f4eb; }
.complete-btn:disabled { opacity: .6; }
.study-empty { padding: 32px 22px; border: 1px dashed #cbb6c3; border-radius: 12px; color: var(--soft-text); margin: 20px 0; background: #fff; }
.study-empty h3,.study-empty h2 { color: var(--plum); }
.study-empty a { color: var(--plum); }
.performance-panel { padding: 25px; background: #fff; border: 1px solid var(--stroke); border-radius: 14px; }
.performance-panel > p { font-size: .85rem; color: var(--soft-text); }
.performance-panel h2 { font-size: 1.4rem; }
.performance-row { display: grid; grid-template-columns: 1fr minmax(100px,200px) 50px; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--stroke); }
.performance-row:last-child { border: 0; }
.performance-row h3 { font-family: Inter,sans-serif; font-size: .9rem; font-weight: 600; }
.performance-row span { font-size: .75rem; color: var(--soft-text); }
.performance-row meter { width: 100%; height: 12px; accent-color: #a8426d; }
.performance-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.attempt-history { padding: 0; list-style: none; }
.attempt-history li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--stroke); }
.attempt-history li > div { flex: 1; }
.attempt-history strong,.attempt-history span:not(.result-dot) { display: block; font-size: .85rem; }
.attempt-history span:not(.result-dot) { color: var(--soft-text); font-size: .73rem; }
.attempt-history b { font-size: .75rem; font-weight: 500; }
.result-dot { width: 10px; height: 10px; border-radius: 50%; background: #cd783d; }
.result-dot.good { background: #34805e; }
.practice-intro { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.practice-intro p,.study-caption { font-size: .86rem; color: var(--soft-text); }
.study-caption { margin: 24px 0; }
.practice-stage { background: #fff; border: 1px solid var(--stroke); border-radius: 16px; padding: 30px; }
.practice-top { display: flex; gap: 14px; justify-content: space-between; font-size: .8rem; color: var(--soft-text); }
.practice-skill { font-size: .75rem; color: #a63060; margin-top: 26px; }
.practice-stage h2 { font-family: Fraunces,Georgia,serif; font-size: 1.55rem; line-height: 1.45; margin: 10px 0 24px; }
.practice-stage h2:focus { outline: none; }
.answer-options { display: grid; gap: 10px; }
.answer-option { display: flex; align-items: center; gap: 14px; padding: 15px; background: #fff; border: 1px solid var(--stroke); border-radius: 10px; text-align: left; font: inherit; cursor: pointer; color: var(--plum); }
.answer-option b { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #f6edf1; font-size: .85rem; }
.answer-option:hover:enabled { border-color: var(--rose); background: #fff9fb; }
.answer-option.answer-good { border-color: #559a72; background: #eef8f1; }
.answer-option.answer-wrong { border-color: #d27373; background: #fff2f1; }
.answer-option:disabled { cursor: default; }
.answer-feedback:not(:empty) { background: #fff7ed; border-left: 3px solid var(--orange); padding: 20px; margin: 22px 0; }
.answer-feedback p { font-size: .94rem; line-height: 1.75; }
.answer-feedback small { color: var(--soft-text); }
.practice-finish { text-align: center; padding: 24px; }
.practice-finish h2 { font-size: 3.5rem; margin: 20px 0; }
.practice-finish p { max-width: 54ch; margin: 0 auto 24px; color: var(--soft-text); }
.practice-finish .btn { margin: 5px; }
.insights-table { overflow-x: auto; background: #fff; border: 1px solid var(--stroke); border-radius: 12px; }
.insights-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; }
.insights-table td,.insights-table th { padding: 16px; border-bottom: 1px solid var(--stroke); }
.insights-table th { background: #f6edf1; font-size: .75rem; }
.insights-table td small { display: block; color: var(--soft-text); font-size: .72rem; margin-top: 5px; }
.auth .link-btn { color: var(--ink); border-color: var(--stroke); }
@media(max-width:1100px) { .learning-shell { grid-template-columns: 175px minmax(0,1fr); gap: 24px; }.study-main{padding-left:24px}.next-step{grid-template-columns:1fr}.step-note{display:none}.axis-card{gap:10px}.axis-symbol{flex-basis:34px;width:34px;font-size:1.3rem} }
@media(max-width:760px) { .learning-shell{grid-template-columns:minmax(0,1fr);gap:0}.study-sidebar{position:static;padding-top:16px}.sidebar-title,.sidebar-note{display:none}.study-sidebar nav{display:flex;overflow-x:auto;gap:4px;padding-bottom:12px}.study-sidebar nav a{white-space:nowrap;padding:9px 12px;font-size:.8rem}.study-sidebar nav a>span{display:none}.study-main{border-left:0;padding:20px 0}.next-step{padding:24px}.study-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.study-stats div+div{border:0;padding:0}.study-stats strong{font-size:1.6rem}.study-stats span{max-width:22ch}.library-tools{grid-template-columns:1fr}.library-entry-foot{align-items:flex-start;flex-direction:column;gap:8px}.performance-row{grid-template-columns:1fr 75px 40px;gap:10px}.performance-panel{padding:18px}.practice-stage{padding:20px}.practice-stage h2{font-size:1.3rem}.demo-notice{margin:0 -20px}.dashboard-bottom{grid-template-columns:1fr;gap:0} }
@media(max-width:480px) { .axis-grid{grid-template-columns:1fr}.study-heading h1{font-size:1.85rem}.next-step h2{font-size:1.6rem}.study-sidebar nav a{padding:9px}.practice-top{font-size:.72rem}.practice-finish{padding:10px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }