:root{--bg:#080808;--bg2:#141414;--card:#242424;--red:#C8102E;--red2:#FF2020;--sil:#C0C0C0;--w:#fff;--line:#ffffff1f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--w);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
h1,h2,h3{color:var(--sil);margin:0 0 10px;letter-spacing:.02em}
.logo{font:800 22px Impact,"Arial Black",sans-serif;letter-spacing:.08em;color:var(--sil)}.logo b{color:var(--red2)}
.app{display:flex;min-height:100vh}
aside{width:236px;background:var(--bg2);border-right:1px solid var(--line);padding:16px 10px;flex:none;transition:.2s;overflow:auto}
aside.min{width:0;padding:0;border:0;overflow:hidden}
aside .logo{padding:4px 10px 16px}
.nav{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;color:var(--sil);padding:9px 12px;border-radius:8px;cursor:pointer;font:inherit}
.nav:hover{background:var(--card)}.nav.on{background:var(--red);color:#fff}
main{flex:1;min-width:0;padding:20px 24px}
.top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
button,.b{font:inherit;cursor:pointer}
.b{background:var(--red);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:600;text-decoration:none;display:inline-block}
.b:hover{background:var(--red2)}.b2{background:none;color:var(--sil);border:1px solid var(--sil);border-radius:8px;padding:8px 14px}
.sm{padding:4px 9px;font-size:13px}
input,select,textarea{width:100%;background:var(--bg);color:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;margin:4px 0 10px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--red2);outline-offset:1px}
label{display:block;color:var(--sil);font-size:13px}
.tag{font-size:12px;border:1px solid var(--sil);color:var(--sil);border-radius:20px;padding:1px 9px}
.tag.r{border-color:var(--red2);color:var(--red2)}
.tbl{width:100%;border-collapse:collapse}.tbl th{color:var(--sil);text-align:left}.tbl td,.tbl th{padding:8px;border-bottom:1px solid var(--line)}
.wrap{overflow-x:auto}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#C8102E33,transparent 60%)}
.auth .card{width:min(400px,100%);background:var(--bg2)}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.ov{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:9;padding:16px}.ov .card{width:min(440px,100%);background:var(--bg2);max-height:90vh;overflow:auto}
#toast{position:fixed;right:16px;bottom:16px;background:var(--red);padding:10px 16px;border-radius:8px;z-index:10;display:none}
.ed{display:grid;grid-template-columns:170px 1fr 250px;gap:12px}
.blk{border:1px dashed var(--line);border-radius:8px;padding:10px;margin-bottom:8px;cursor:grab;background:var(--bg2)}
.blk.sel{border:1px solid var(--red2)}.blk.off{opacity:.45}
.vip{border:1px solid var(--sil);background:linear-gradient(135deg,#141414,#2a0a10)}
@media(max-width:800px){.ed{grid-template-columns:1fr}aside{position:fixed;z-index:5;height:100%}main{padding:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(prefers-color-scheme:light){:root{color-scheme:dark}}

/* Enhanced premium experience */
:root{--shadow:0 18px 48px #0008}body{background:radial-gradient(ellipse at 70% -10%,#3d0815 0,transparent 38%),var(--bg)}.card{background:linear-gradient(150deg,#252525,#171717);box-shadow:var(--shadow);border-radius:16px}.nav{transition:.15s}.nav.on{box-shadow:0 6px 20px #C8102E55}.b{box-shadow:0 5px 16px #C8102E40}.top{padding-bottom:12px;border-bottom:1px solid var(--line)}.hero{padding:34px;border-radius:18px;background:linear-gradient(115deg,#3c0a16,#151515 58%);border:1px solid #9a203b}.hero h1{font-size:clamp(24px,4vw,40px);color:white}.muted{color:#aaa}.kpi{font-size:32px;font-weight:800;color:var(--red2)}.ed{grid-template-columns:180px minmax(0,1fr) 270px}.blk{padding:18px}.pill{border:1px solid #c8102e88;border-radius:99px;padding:4px 10px;color:#ff858f;font-size:12px}.lesson{padding:12px;border-bottom:1px solid var(--line)}.actionrow{display:flex;gap:6px;flex-wrap:wrap}.error{color:#ff8997}.success{color:#7ee5ac}.notice{border-left:3px solid var(--red);padding:12px;background:#C8102E19;margin:12px 0}.empty{padding:24px;color:#aaa;text-align:center}.auth .card{width:min(440px,100%)}@media(max-width:800px){.ed{grid-template-columns:1fr}aside{width:240px}main{padding:14px}.grid{grid-template-columns:1fr}}
.calendar-scroll{overflow-x:auto;margin-top:18px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:8px;min-width:950px}.calendar-day{min-height:130px;padding:8px;background:var(--panel,#181818);border:1px solid #444;border-radius:8px;overflow-wrap:anywhere}.calendar-day .lesson{padding:6px;font-size:12px}

/* Navegación y lectura en teléfonos; escritorio conserva su panel lateral. */
.menu-backdrop,.mobile-menu-close,.calendar-mobile-date{display:none}
.card,.hero,.lesson{min-width:0;overflow-wrap:anywhere}
img,video{max-width:100%}
@media(max-width:800px){
  :root{padding:0}
  .app{min-height:100dvh}
  main{padding:12px max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  aside{inset:0 auto 0 0;height:100dvh;width:min(300px,88vw);z-index:21;padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));overscroll-behavior:contain;box-shadow:16px 0 48px #0009}
  aside.min{width:0;padding:0;visibility:hidden;box-shadow:none}
  .mobile-menu-close{display:block;margin:0 0 16px auto}
  .menu-backdrop{display:block;position:fixed;inset:0;z-index:20;border:0;background:#000a;cursor:pointer}
  body.menu-open{overflow:hidden}
  .nav{min-height:46px;padding:12px}
  .app-top{position:sticky;top:0;z-index:4;background:var(--bg);padding:calc(10px + env(safe-area-inset-top)) 0 10px;gap:8px;display:grid;grid-template-columns:auto 1fr;margin-top:-12px}
  .app-top>.logo{text-align:right}
  .app-top>.tag{grid-column:1/-1;justify-self:start;max-width:100%;white-space:normal}
  .b,.b2,button.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:normal;max-width:100%}
  input,select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox],input[type=radio]{min-height:22px;width:22px;vertical-align:middle}
  .card{padding:16px;border-radius:12px}
  .hero{padding:22px 18px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .auth{padding:16px;min-height:100dvh}
  .auth .card{padding:20px 16px}
  .auth .logo{font-size:clamp(20px,6vw,32px)!important}
  .ov{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:30}
  .ov .card{max-height:90dvh;overscroll-behavior:contain}
  #toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;overflow-wrap:anywhere}
  .wrap{max-width:100%;overscroll-behavior-x:contain}
  .tbl{font-size:13px}
  .calendar-grid{grid-template-columns:minmax(0,1fr);min-width:0}
  .calendar-weekday,.calendar-spacer{display:none}
  .calendar-day{min-height:0;padding:12px}
  .calendar-day .lesson{font-size:14px}
  .calendar-day a{display:inline-flex;align-items:center;min-height:44px;color:#ff8997;text-underline-offset:4px}
  .calendar-mobile-date{display:inline-block;font-weight:600;color:var(--sil);margin-right:12px}
  .calendar-day:not(:has(.lesson)){display:none}
  .calendar-day>.b2{display:none}
  .calendar-day:has([onclick^="calendarNew"]){display:block}
  .calendar-day>[onclick^="calendarNew"]{display:inline-flex}
  .calendar-scroll{overflow:visible}
}