/* Nastia Soller v24 · Diseño original y navegación móvil accesible */
:root, :root[data-theme="light"] {
  --bg:#f8f5f0;--surface:#fff;--panel:#fff;--border:#e9e0d5;--text:#352f29;--muted:#80766d;
  --primary:#906c4d;--primary-text:#fff;--accent:#f4ede3;--error:#a74f65;--success:#417862;
  --shadow:0 5px 24px rgba(64,45,27,.045);--hero-start:#e5d7c5;--hero-mid:#f3e8da;--hero-end:#faf5ee;
  --rose:#a96d5a;--gold:#a47a39;--mint:#e8f4ec;
}
:root[data-theme="dark"] {
  --bg:#18191d;--surface:#25252a;--panel:#25252a;--border:#3d3839;--text:#f6eee6;--muted:#b5a8a1;
  --primary:#dfb893;--primary-text:#211c1a;--accent:#38302e;--error:#f0abba;--success:#8fd5b6;
  --shadow:0 5px 24px rgba(0,0,0,.18);--hero-start:#504039;--hero-mid:#3a3234;--hero-end:#343039;
  --rose:#f0abba;--gold:#f0ca89;--mint:#283c36;
}
*{box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;font-size:14px;background:var(--bg);color:var(--text)}
h1,h2,h3,.brand,.stat-number{font-family:'Manrope',sans-serif}
h1{font-weight:800;font-size:27px}h2{font-weight:800;font-size:19px}h3{font-weight:800}
body.authenticated>header{display:none}
body.authenticated>.container{max-width:none;padding:0;margin:0}
body.authenticated #app-view>.layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:0;align-items:stretch;min-height:100vh}
body.authenticated #app-view .app-sidebar{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--border);border-radius:0;padding:28px 17px;display:flex;flex-direction:column;gap:0;z-index:2}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 10px 30px}
.sidebar-brand strong{display:block;font:800 16px/1.2 'Manrope',sans-serif;letter-spacing:-.2px}
.sidebar-brand small{display:block;font-size:10px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin-top:4px}
.brand-mark{background:var(--accent);color:var(--primary);border-radius:14px;width:40px;height:40px;display:grid;place-items:center;font-size:24px;flex-shrink:0}
.nav-caption{color:var(--muted);opacity:.8;font-size:10px;font-weight:800;letter-spacing:1.5px;padding:10px 15px;margin:6px 0}
body.authenticated #app-view .nav-list{display:flex;flex-direction:column;gap:5px;overflow:visible}
.nav-list .nav-btn{display:flex;align-items:center;gap:11px;text-align:left;width:100%;padding:12px 13px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:700;min-width:0}
.nav-list .nav-btn:hover{background:var(--accent)}
.nav-list .nav-btn.active{background:var(--accent);color:var(--primary);border:0}
.nav-icon{width:19px;height:19px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--border);padding:17px 8px 0}
.workspace{min-width:0}
.app-topbar{height:78px;display:flex;justify-content:space-between;align-items:center;background:var(--surface);border-bottom:1px solid var(--border);padding:0 36px;gap:18px}
.top-crumb{font-size:13px;color:var(--muted)}.top-intro .small{font-size:11px;margin-top:4px}
.app-content{max-width:1420px;margin:0 auto;padding:30px 36px 70px}
.page-welcome{display:none}
.btn{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;min-height:37px;border-radius:10px;padding:9px 14px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}
.pill,.tag{background:var(--accent);color:var(--primary);font-weight:700}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px}
.grid{gap:16px}.item{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:17px}
.field input,.field select,.field textarea,.change-group-form select{background:var(--surface);color:var(--text);border-color:var(--border)}
.field label{font-size:12px;font-weight:700}.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.course-block{background:var(--surface);border-radius:18px;border:1px solid var(--border);overflow:hidden;padding:0;box-shadow:var(--shadow)}
.course-header{display:block;margin-bottom:0;padding:22px 23px 12px}.course-header h3{font:800 18px/1.4 'Manrope',sans-serif}
.course-header .tag{margin:0 0 7px}.course-block .lesson-tiles{padding:10px 20px 21px}
.lesson-tile{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:11px 0}.lesson-tile:last-child{border:0}.lesson-tile.locked{background:transparent}
.lesson-tile-index{font:800 17px 'Manrope',sans-serif;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--accent);font-size:13px;flex-shrink:0}
.lesson-tile.locked .lesson-tile-index{color:var(--muted)}
.lesson-tile-text{font-size:13px}.lesson-state{font-size:11px}
.lesson-screen{max-width:1100px;background:var(--surface)}
.lesson-hero h1{font:800 clamp(25px,3vw,33px)/1.25 'Manrope',sans-serif}
/* Prototipo: banner de bienvenida, indicadores, tarjetas y accesos rápidos */
.hero{background:linear-gradient(113deg,var(--hero-start),var(--hero-mid) 55%,var(--hero-end));border-radius:23px;padding:32px 36px;min-height:178px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:27px;overflow:hidden}
.hero .eyebrow{font-size:11px;letter-spacing:1.3px}.hero h1{font:800 29px/1.25 'Manrope',sans-serif;margin:6px 0 9px;color:var(--text)}.hero p{color:var(--muted);max-width:520px;margin:0;font-size:13px}.hero-symbol{font-size:98px;line-height:1;color:var(--primary);opacity:.6;transform:rotate(-10deg);padding-right:26px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 15px}.section-head h2{margin:0;font:800 17px 'Manrope',sans-serif}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-card{padding:21px}.stat-icon{display:grid;place-items:center;background:var(--accent);color:var(--primary);width:42px;height:42px;border-radius:12px;font-size:21px}.stat-card .muted{font-size:12px;margin:15px 0 7px}.stat-number{font-size:25px;font-weight:800}.stat-note{font-size:11px;margin-top:6px;color:var(--muted)}
.quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.quicklink{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:19px 13px;text-align:center;color:var(--primary);font-weight:700;font-size:12px;min-height:94px}.quicklink:hover{background:var(--accent)}.quicklink .glyph{font-size:23px;display:block;margin-bottom:7px}
.dashboard-two{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.dashboard-two .card+.card{margin-top:0}
.course-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.course-showcase-card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.course-showcase-banner{height:110px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(115deg,#e7d7c2,#d7bda2);color:#634b38}
.course-showcase-card:nth-child(3n+2) .course-showcase-banner{background:linear-gradient(115deg,#f3dfd6,#e7c8b9)}
.course-showcase-card:nth-child(3n) .course-showcase-banner{background:linear-gradient(115deg,#e5e9d9,#bfd5c7)}
:root[data-theme="dark"] .course-showcase-banner{background:linear-gradient(115deg,#564539,#725748);color:#fff3e7}
:root[data-theme="dark"] .course-showcase-card:nth-child(3n+2) .course-showcase-banner{background:linear-gradient(115deg,#65434a,#76545b)}
:root[data-theme="dark"] .course-showcase-card:nth-child(3n) .course-showcase-banner{background:linear-gradient(115deg,#34534c,#42665c)}
.course-showcase-banner span{font-size:10px;letter-spacing:1.2px;font-weight:800;border-radius:99px;background:#ffffff70;padding:6px 10px}.course-showcase-banner b{font-size:64px;font-weight:400;opacity:.75}
.course-showcase-body{padding:19px 21px}.course-showcase-body h3{font-size:16px;margin:0 0 7px}.course-showcase-body p{color:var(--muted);font-size:12px;min-height:34px}
.progress-track{height:6px;border-radius:10px;background:var(--accent);overflow:hidden}.progress-fill{height:100%;border-radius:10px;background:var(--primary)}.progress-label{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin:8px 0 10px}
/* New real-data screens */
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin:0 0 25px}.page-heading h1{margin-bottom:6px}.page-heading p{color:var(--muted);margin:0}
.data-table{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.data-table table{width:100%;border-collapse:collapse;text-align:left;min-width:620px}
.data-table th{padding:15px 17px;font-size:11px;font-weight:800;color:var(--muted);background:var(--accent);white-space:nowrap}
.data-table td{padding:15px 17px;font-size:12px;border-top:1px solid var(--border);vertical-align:middle}
.status{font-size:10px;font-weight:800;padding:6px 10px;border-radius:99px;background:var(--accent);color:var(--primary);display:inline-block}.status.approved,.status.paid{background:var(--mint);color:var(--success)}.status.rework,.status.overdue{background:color-mix(in srgb,var(--error) 12%,var(--surface));color:var(--error)}
.task-row{padding:16px;border-bottom:1px solid var(--border)}.task-row:last-child{border:0}.task-row h3{margin-bottom:5px}.task-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:6px 0 10px}
.stats-mini{display:flex;gap:16px;flex-wrap:wrap}.stats-mini strong{font-size:17px}.stats-mini span{color:var(--muted);font-size:11px}
.task-form,.payment-form,.points-form,.announcement-form{margin-top:14px}.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.rank-row{display:flex;gap:14px;align-items:center;padding:15px 2px;border-bottom:1px solid var(--border)}.rank-row:last-child{border:0}.rank-num{font-weight:800;color:var(--muted);width:25px;text-align:center}.rank-name{flex:1;font-size:13px;font-weight:700}.rank-score{font:800 17px 'Manrope',sans-serif;color:var(--primary)}
.calendar-month{font:800 17px 'Manrope',sans-serif}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);border-radius:14px;overflow:hidden;border:1px solid var(--border)}.calendar-dayname{background:var(--accent);padding:11px 4px;text-align:center;font-size:11px;color:var(--muted);font-weight:800}.calendar-day{background:var(--surface);min-height:99px;padding:9px 6px;font-size:11px;min-width:0}.calendar-day.other{opacity:.58}.calendar-event{display:block;padding:5px 6px;margin-top:5px;background:var(--accent);color:var(--primary);border-radius:6px;font-size:10px;overflow-wrap:anywhere}
/* Homework private media */
.homework-preview{margin-top:12px}.homework-preview video,.homework-preview audio{max-width:100%;width:100%}.form-note{font-size:11px;color:var(--muted)}
:root[data-theme="dark"] .course-showcase-banner span{background:#ffffff20}
@media(max-width:1180px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-two{grid-template-columns:1fr}}

@media(max-width:560px){.dashboard-stats,.course-showcase,.quicklinks{grid-template-columns:1fr 1fr}.hero h1{font-size:23px}.hero-symbol{display:none}.app-topbar{flex-wrap:wrap}.calendar-day{min-height:72px;padding:5px 3px}.calendar-event{font-size:8px;padding:3px}.calendar-dayname{font-size:9px}.course-showcase-body{padding:14px}.course-showcase-banner{height:75px}.course-showcase-banner b{font-size:43px}}

.calendar-event:has([data-type="deadline"]){background:var(--accent)}

/* v24 · Mobile menu: vertical drawer, no horizontal navigation */
.mobile-menu-toggle,.mobile-menu-close,.mobile-menu-backdrop{display:none}
body.authenticated .workspace,body.authenticated .app-content,body.authenticated #content{min-width:0}
body.authenticated .card,body.authenticated .item{min-width:0;overflow-wrap:anywhere}
@media(max-width:850px){
 body.authenticated{overflow-x:clip}
 body.authenticated #app-view>.layout{display:block;min-height:100dvh}
 body.authenticated #app-view .app-sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:105;
  width:min(318px,calc(100% - 48px));max-width:100%;height:100dvh;
  padding:20px 16px 24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  border-radius:0;border-right:1px solid var(--border);
  transform:translateX(-105%);transition:transform .22s ease;
  box-shadow:12px 0 40px rgba(0,0,0,.1);
  visibility:hidden;
 }
 body.authenticated.mobile-menu-open #app-view .app-sidebar{transform:translateX(0);visibility:visible}
 body.authenticated #app-view .app-sidebar .sidebar-brand{padding:0 3px 17px;gap:9px}
 body.authenticated #app-view .app-sidebar .nav-caption{display:block;padding:9px 12px}
 body.authenticated #app-view .app-sidebar .sidebar-bottom{display:block}
 body.authenticated #app-view .nav-list{
  display:flex;flex-direction:column;gap:5px;overflow:visible;
  width:100%;padding:0;
 }
 body.authenticated #app-view .nav-list .nav-btn{
  display:flex;flex:0 0 auto;width:100%;white-space:normal;
  padding:13px 12px;text-align:left;font-size:14px;min-height:45px;
 }
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;background:var(--accent);border:1px solid var(--border);border-radius:10px;padding:9px 12px;min-height:42px;color:var(--text);font-size:13px;font-weight:800}
 .mobile-menu-toggle span:first-child{font-size:18px;line-height:1}
 .mobile-menu-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;width:37px;height:37px;border:1px solid var(--border);border-radius:10px;background:var(--accent);color:var(--text);font-size:24px}
 .mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:104;background:rgba(20,15,20,.52);border:0;padding:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s}
 body.authenticated.mobile-menu-open .mobile-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}
 body.authenticated.mobile-menu-open{overflow:hidden}
 .app-topbar{padding:10px 15px;height:auto;min-height:65px;gap:10px;flex-wrap:wrap}
 .app-topbar .top-intro{flex:1;min-width:0}
 .app-topbar .top-crumb{overflow-wrap:anywhere}
 .app-topbar .header-right{margin-left:auto;min-width:0;justify-content:flex-end}
 .app-content{width:100%;max-width:100%;min-width:0;padding:20px 15px 48px}
 .hero{padding:24px}.hero-symbol{opacity:.23}
 .app-content .grid, .app-content .dashboard-two, .app-content .course-showcase{min-width:0}
 .app-content .data-table{max-width:100%}
}
@media(max-width:650px){
 .app-topbar .header-right{flex:0 0 100%;justify-content:space-between;gap:8px}
 .app-topbar .header-right .btn{padding:8px 10px;font-size:12px;min-height:37px}
 .dashboard-stats,.course-showcase,.quicklinks{grid-template-columns:1fr;gap:12px}
 .page-heading{margin-bottom:18px}
 .page-heading h1{font-size:23px}
 .hero{min-height:0;padding:22px 18px}
 .hero h1{font-size:23px}
 .hero-symbol{display:none}
 .app-content .grid{grid-template-columns:1fr}
 .app-content .form-actions{align-items:stretch}
 .app-content .form-actions .btn{max-width:100%}
 .app-content .row{flex-wrap:wrap;align-items:start}
 .app-content .card{padding:16px}
 .app-content .lesson-screen{padding:17px}
 .app-content .lesson-tile{padding:10px 0}
 .app-content .lesson-tile .btn{margin-left:auto}
 .app-content .field input,.app-content .field select,.app-content .field textarea{max-width:100%;min-width:0}
 .app-content .data-table{border:0;background:transparent;overflow:visible}
 .app-content .data-table table{display:block;min-width:0;width:100%}
 .app-content .data-table thead{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
 .app-content .data-table tbody{display:grid;gap:12px;min-width:0}
 .app-content .data-table tr{display:block;min-width:0;padding:9px 13px;border-radius:13px;border:1px solid var(--border);background:var(--surface)}
 .app-content .data-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-width:0;width:100%;padding:9px 2px;border-top:0;border-bottom:1px solid var(--border);overflow-wrap:anywhere;word-break:normal}
 .app-content .data-table td:last-child{border-bottom:0}
 .app-content .data-table td::before{content:attr(data-label);display:block;flex:0 0 34%;font-size:11px;font-weight:800;color:var(--muted);overflow-wrap:anywhere}
 .app-content .data-table td[data-label=""]::before,.app-content .data-table td[colspan]::before{display:none}
 .app-content .data-table td[colspan]{display:block}
 .app-content .data-table td .btn{white-space:normal}
 .calendar-day{min-width:0;overflow:hidden}
 .calendar-event{overflow:hidden;word-break:break-word}
 .material-player,.material-pdf,.homework-preview>*{max-width:100%}
}
@media(prefers-reduced-motion:reduce){body.authenticated #app-view .app-sidebar,.mobile-menu-backdrop{transition:none}}
/* v25 · Pagos sencillos: selector de servicio, historial y recepción de abonos. */
.payment-buttons{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.payment-form .hidden{display:none!important}
#payment-receipt-box{scroll-margin-top:18px}
@media(max-width:650px){.payment-buttons{flex-direction:column;align-items:stretch}.payment-buttons .btn{width:100%}}

/* v27: páginas de tareas adaptables y archivos de respuesta */
.v27-lesson-tasks{margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.v27-task-list{display:grid;gap:11px}.v27-task-tile{border:1px solid var(--border);border-radius:13px;padding:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface)}
.v27-task-main{flex:1 1 245px;min-width:0;display:grid;gap:5px}.v27-task-main strong{font:800 14px 'Manrope',sans-serif;overflow-wrap:anywhere}.v27-task-main small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.v27-task-tile .status{white-space:nowrap}.v27-task-tile .btn{white-space:nowrap}
.v27-task-detail{max-width:900px;margin:auto}.v27-task-detail h1{font-size:clamp(23px,4vw,32px);margin:12px 0}.v27-task-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;font-size:12px}.v27-task-detail .lesson-intro{white-space:pre-wrap;line-height:1.6;font-size:15px;margin:10px 0 22px}
.v27-task-card{max-width:900px;margin:16px auto}.v27-submission{margin:15px 0;padding:17px;border:1px solid var(--border);border-radius:13px;background:var(--bg)}.v27-submission .row{display:flex;gap:10px;align-items:start;justify-content:space-between;flex-wrap:wrap}
.v27-response,.v27-feedback{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:13px;border-radius:10px;margin:12px 0;border:1px solid var(--border)}.v27-response p,.v27-feedback p{margin:9px 0;line-height:1.6}.v27-file-list{margin:12px 0}.v27-file-list h4{margin:8px 0}.v27-file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)}.v27-file-row span{font-size:13px}.v27-preview{min-width:0;max-width:100%;margin:6px 0 12px}.v27-check{display:flex;align-items:center;gap:8px;font-size:13px}.v27-check input{width:18px;height:18px}
.v27-review .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:650px){.v27-task-tile{align-items:flex-start}.v27-task-tile .btn{width:100%;text-align:center}.v27-task-meta{align-items:flex-start}.v27-review .grid{grid-template-columns:1fr}.v27-submission{padding:12px}.v27-task-card{padding:17px}}