:root {
  --hbl-b:"02b59ba6ccb896ae3b";
  --bg:        #b8c8d8;
  --bg2:       #a8bccf;
  --glass:     rgba(255,255,255,0.18);
  --glass-md:  rgba(255,255,255,0.28);
  --glass-hi:  rgba(255,255,255,0.42);
  --border:    rgba(255,255,255,0.35);
  --border-lo: rgba(255,255,255,0.18);
  --shadow:    rgba(40,55,80,0.18);
  --shadow-hi: rgba(40,55,80,0.32);
  --text:      #1a2233;
  --text2:     #3a4a62;
  --text3:     rgba(26,34,51,0.5);
  --white:     #ffffff;
  --accent:    #3a7bff;
  --accent2:   #34c47c;
  --danger:    #ff4d5e;
  --accent-rgb:  58,123,255;
  --accent2-rgb: 52,196,124;
  --danger-rgb:  255,77,94;
  --r:         18px;
  --r-sm:      10px;
  --r-xs:      7px;
  --r-md:      12px;
  --r-lg:      14px;
  --r-xl:      22px;
  --r-pill:    99px;
  --font:      'DM Sans';
  --font-size-base: 15px;
  --button-radius: 99px;
  --button-fill: rgba(255,255,255,0.35);
  --button-border: rgba(255,255,255,0.6);
  --button-shadow: rgba(26,34,51,0.08);
  --button-shadow-blur: 12px;
  --button-shadow-y: 2px;
  --pills-col-width: 225px;
  --pills-col-height-offset: 120px;
  --pills-col-gap: 20px;
  --pills-col-padding-top: 68px;
  --pills-col-padding-x: 8px;
  --pills-col-padding-bottom: 40px;
  --pills-fade-top: 64px;
  --pills-fade-bottom: 56px;
  --pill-fill: rgba(214,221,230,0.48);
  --pill-hover-fill: rgba(214,221,230,0.58);
  --pill-text: #ffffff;
  --pill-radius: 20px;
  --pill-pad-y: 18px;
  --pill-pad-x: 24px;
  --pill-font-size: 21px;
  --pill-line-height: 1.22;
  --pill-blur: 20px;
  --pill-saturate: 140%;
  --pill-inset-blur: 26px;
  --pill-inset-opacity: 0.3;
  --pill-inset-bottom-y: 3px;
  --pill-inset-bottom-blur: 9px;
  --pill-inset-bottom-opacity: 0.16;
  --pill-shadow-y: 4px;
  --pill-shadow-blur: 10px;
  --pill-shadow-opacity: 0.1;
  --pill-shadow-hover-opacity: 0.18;
  --pill-hover-lift: 2px;
  --topic-card-radius: 22px;
  --topic-card-fill: rgba(255,255,255,0.25);
  --topic-card-border: rgba(255,255,255,0.5);
  --topic-card-shadow-y: 4px;
  --topic-card-shadow-blur: 24px;
  --topic-card-shadow-opacity: 0.1;
  --exercise-radius: 20px;
  --exercise-fill: rgba(255,255,255,0.32);
  --exercise-border: rgba(255,255,255,0.55);
  --exercise-blur: 24px;
  --exercise-shadow-y: 4px;
  --exercise-shadow-blur: 20px;
  --exercise-shadow-opacity: 0.08;
  --chip-radius: 99px;
  --chip-fill: rgba(255,255,255,0.82);
  --chip-border: rgba(255,255,255,0.7);
  --chip-shadow-blur: 8px;
  --chip-shadow-y: 2px;
  --chip-shadow-opacity: 0.07;
  --chip-font-size: 13px;
  --slot-radius: 99px;
  --slot-fill: rgba(235,240,248,0.72);
  --slot-filled-fill: rgba(240,244,251,0.88);
  --slot-border: rgba(255,255,255,0.7);
  --slot-height: 34px;
  --slot-min-width: 90px;
  --slot-shadow-blur: 4px;
  --slot-shadow-y: 1px;
  --slot-shadow-opacity: 0.06;
  --button-font-size: 15px;
  --button-text: #1a2233;
  --button-blur: 16px;
  --button-saturate: 100%;
  --button-inset-blur: 0px;
  --button-inset-opacity: 0;
  --button-inset-bottom-y: 0px;
  --button-inset-bottom-blur: 0px;
  --button-inset-bottom-opacity: 0;
  --button-hover-fill: rgba(255,255,255,0.42);
  --button-hover-lift: 1px;
  --tab-bar-fill: rgba(255,255,255,0.12);
  --tab-bar-blur: 16px;
  --tab-bar-border: rgba(26,34,51,0.08);
  --tab-bar-radius: 0px;
  --tab-bar-shadow-blur: 0px;
  --tab-bar-shadow-y: 0px;
  --tab-bar-shadow-opacity: 0;
  --tab-bar-font-size: 13px;
  --tab-bar-padding-y: 12px;
  --tab-bar-padding-x: 20px;
  --notebook-width: 290px;
  --notebook-radius: 26px;
  --notebook-fill: rgba(214,221,230,0.48);
  --notebook-blur: 36px;
  --notebook-saturate: 80%;
  --notebook-inset-blur: 40px;
  --notebook-inset-opacity: 0.26;
  --notebook-inset-bottom-y: 4px;
  --notebook-inset-bottom-blur: 14px;
  --notebook-inset-bottom-opacity: 0.14;
  --notebook-border: rgba(255,255,255,0);
  --notebook-shadow-y: 10px;
  --notebook-shadow-blur: 30px;
  --notebook-shadow-opacity: 0.12;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; height: 100dvh; overflow: hidden; }
body {
  font-family: var(--font), sans-serif;
  font-size: var(--font-size-base);
  background: var(--bg);
  color: var(--text);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(180,200,230,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(140,165,210,0.5) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 20%, rgba(200,215,240,0.4) 0%, transparent 50%);
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

#screen-login {
  position:fixed; inset:0; z-index:900; overflow-y:auto;
  background:var(--dc-bg);
}
#screen-login.hidden { display:none; }
.ent-cuerpo {
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:calc(14vh) var(--dc-sp-76) var(--dc-sp-60);
  text-align:left;
}

.ent-marca {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-140);
  color:var(--dc-ink); line-height:1; letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text-strong);
  user-select:none;
}

.marca-club {
  font-size:.38em; margin-left:.16em; letter-spacing:var(--dc-tracking);
  opacity:.78; font-weight:inherit; vertical-align:baseline;
}

#screen-login .ent-tabs {
  position:relative; display:flex; justify-content:flex-start; gap:var(--dc-sp-14);
  padding:var(--dc-sp-40) 0 var(--dc-sp-24); width:auto;
  border:none; background:none; backdrop-filter:none; overflow:visible;
  
  margin-left:calc(-1 * var(--dc-sp-40));
}
#screen-login .ent-tabs .aula-tab {
  font-family:var(--dc-font); font-size:var(--dc-fs-60); font-weight:var(--dc-weight);
  letter-spacing:normal; line-height:1.25; text-transform:lowercase;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--dc-ink); background:none; border:none; box-shadow:none;
  padding:var(--dc-sp-10) var(--dc-sp-40); border-radius:var(--dc-r-nav);
  cursor:pointer; position:relative; z-index:1;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
#screen-login .ent-tabs .aula-tab::after { display:none !important; }
#screen-login .ent-tabs .aula-tab.active { background:none; box-shadow:none; color:var(--dc-ink); }
#screen-login .ent-tabs .aula-tab.crecida { transform:scale(1.12); }
#screen-login .aula-tab-indicator {
  position:absolute; left:0; z-index:0; pointer-events:none;
  border-radius:var(--dc-r-nav);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
  transform:translateX(var(--x, 0)) scale(var(--s, 1));
  transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease);
  will-change:transform, width;
}

#screen-login .ent-roles {
  display:flex; gap:var(--dc-sp-48); padding:0 0 var(--dc-sp-16);
}
.ent-op {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.2;
  background:none; border:none; padding:var(--dc-sp-8) 0; cursor:pointer;
  text-transform:lowercase; opacity:.45; transform-origin:left center;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease);
  text-shadow:none;
}
.ent-op.active { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover: hover) { .ent-op:hover { opacity:1; transform:scale(1.06); } }
.ent-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

.ent-panels { position:relative; width:100%; min-height:calc(560 * var(--dc-u)); }

#screen-login .ent-panel { width:100%; display:flex; flex-direction:column; align-items:flex-start; }

#reg-codigo { max-height:calc(140 * var(--dc-u)); }

.ent-campo {
  width:100%; max-width:calc(560 * var(--dc-u));
  margin-top:var(--dc-sp-18);
  -webkit-appearance:none; appearance:none;
  background:transparent !important; background-image:none; box-shadow:none;
  border:none; outline:none; padding:var(--dc-sp-8) 0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); caret-color:var(--dc-ink); text-align:left;
}
.ent-campo::placeholder { color:var(--dc-ink-70); text-shadow:none; }
.ent-campo:-webkit-autofill,
.ent-campo:-webkit-autofill:hover,
.ent-campo:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--dc-ink);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-in-out 0s;
}

#reg-codigo { text-transform:uppercase; letter-spacing:calc(6 * var(--dc-u)); }
#reg-codigo::placeholder { text-transform:none; letter-spacing:normal; }

.ent-accion {
  margin-top:var(--dc-sp-48); align-self:flex-start; transform-origin:left center;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
  background:none; border:none; box-shadow:none;
  
  padding:var(--dc-sp-10) var(--dc-sp-24) var(--dc-sp-10) 0;
  cursor:pointer; text-transform:lowercase;
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .ent-accion:hover { transform:scale(1.09); } }
.ent-accion:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.ent-accion:disabled { opacity:.5; cursor:default; transform:none; }

.ent-accion-suave { opacity:.5; font-size:var(--dc-fs-30); }
@media (any-hover: hover) { .ent-accion-suave:hover { opacity:1; } }
.ent-ayuda {
  margin-top:var(--dc-sp-24); max-width:calc(900 * var(--dc-u));
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink-70); line-height:1.35;
}
.ent-pie { margin-top:var(--dc-sp-34); }
.ent-pie a {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink-70);
  cursor:pointer; text-decoration:none;
  transition:color var(--dc-t-lento) var(--dc-ease);
}
.ent-pie a:hover { color:var(--dc-ink); }

.ent-error {
  display:none; margin-top:var(--dc-sp-24);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:#ffdde0; text-shadow:var(--dc-shadow-text);
}
@media (max-width:700px) {
  .ent-marca { font-size:var(--dc-fs-80); }
  #screen-login .ent-tabs { flex-wrap:wrap; row-gap:var(--dc-sp-8); }
  #screen-login .ent-roles { gap:var(--dc-sp-24); }
  #screen-login .ent-tabs .aula-tab { font-size:var(--dc-fs-40); padding:var(--dc-sp-8) var(--dc-sp-20); }
  .ent-campo { font-size:var(--dc-fs-40); }
  .ent-accion { font-size:var(--dc-fs-50); }
}
.login-error {
  background:rgba(var(--danger-rgb),0.1); border:1px solid rgba(var(--danger-rgb),0.3);
  color:var(--danger); border-radius:var(--r-sm); padding:10px 14px;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:15px; font-weight:400; letter-spacing:.3px; margin-bottom:14px; display:none;
}

#app { position:relative; z-index:1; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; width:100%; transition:width .4s cubic-bezier(.25,.1,.25,1); }
.topbar {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:22px 24px 14px; flex-shrink:0;
}
.topbar-left { display:flex; gap:8px; align-items:center; min-width:0; }
.topbar-right { display:flex; gap:8px; align-items:center; justify-content:flex-end; min-width:0; }
.topbar-logo-pill {
  display:flex; align-items:center; justify-content:center;
  padding:10px 26px; border-radius:var(--button-radius);
  background:var(--button-fill); backdrop-filter:blur(24px);
  border:1px solid var(--button-border);
  box-shadow:0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
  cursor:default;
}
.topbar-logo-text {
  font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:16px; font-weight:400; letter-spacing:.8px;
  color:var(--text);
}
.tb-btn {
  width:36px; height:36px; border-radius:min(var(--button-radius), 12px); border:1px solid var(--button-border); cursor:pointer;
  background:var(--button-fill); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--button-text);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
  box-shadow:
    inset 0 0 var(--button-inset-blur) rgba(16,22,34,var(--button-inset-opacity)),
    inset 0 calc(-1 * var(--button-inset-bottom-y)) var(--button-inset-bottom-blur) rgba(16,22,34,var(--button-inset-bottom-opacity)),
    0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.tb-btn:hover { background:var(--button-hover-fill); transform:scale(1.07) translateY(calc(-1 * var(--button-hover-lift))); }
.tb-btn:active { transform:scale(.91); }
.tb-btn.danger:hover { background:rgba(var(--danger-rgb),0.12); color:var(--danger); }

.screen {
  position:absolute; inset:0; flex:1; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(10px); filter:blur(8px);
  
  transition:opacity var(--dc-t-salida) var(--dc-ease),
             transform var(--dc-t-salida) var(--dc-ease),
             filter var(--dc-t-salida) var(--dc-ease);
  display:flex;
}
html.sin-desenfoque .screen { filter:none; transition:opacity var(--dc-t-salida) var(--dc-ease), transform var(--dc-t-salida) var(--dc-ease); }
.screen.active {
  opacity:1; pointer-events:all; transform:translateY(0); filter:blur(0);
  transition:opacity var(--dc-t-entrada) var(--dc-ease),
             transform var(--dc-t-entrada) var(--dc-ease),
             filter var(--dc-t-entrada) var(--dc-ease);
}
html.sin-desenfoque .screen.active { filter:none; }

.screen:not(.active), .screen:not(.active) * { pointer-events:none !important; }
@media (prefers-reduced-motion:reduce) { .screen { transition:opacity .2s linear; filter:none; transform:none; } }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 20px 100px; }
@media (min-width:600px) { .scroll { padding:0 32px 100px; } }
@media (min-width:900px) { .scroll { padding:0 48px 100px; } }
@media (max-width:480px) {
  .topbar { padding:20px 14px 12px; gap:6px; }
  .topbar-logo-pill { padding:9px 16px; }
  .topbar-logo-text { font-size:14px; letter-spacing:.4px; }
}
.scroll::-webkit-scrollbar { display:none; }

.section-chips {
  display:flex; align-items:baseline; justify-content:center;
  gap:0; padding:6px 24px 20px; overflow-x:auto; flex-shrink:0;
  position:relative;
}
.section-chips::before {
  content:''; position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  width:calc(100% - 48px); height:1px; background:rgba(26,34,51,0.08);
}
.section-chips::-webkit-scrollbar { display:none; }
.chip {
  white-space:nowrap; padding:4px 20px 10px; border-radius:0;
  font-size:14px; font-weight:500; color:rgba(26,34,51,0.45);
  background:transparent; border:none; cursor:pointer;
  transition:all .38s cubic-bezier(.25,.1,.25,1);
  position:relative; flex-shrink:0;
  font-family:'DM Sans',sans-serif;
}
.chip::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--text); border-radius:var(--r-pill);
  transition:width .28s cubic-bezier(.34,1.2,.64,1);
}
.chip.active {
  font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:22px; font-weight:400; color:var(--text); letter-spacing:.3px;
  padding-bottom:10px;
}
.chip.active::after { width:100%; }
.chip:hover:not(.active) { color:rgba(26,34,51,0.7); }
.chip-add {
  color:var(--text3); font-size:20px; padding:4px 16px 10px;
  font-family:'DM Sans',sans-serif; font-weight:400;
}
.sec-label { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); margin: 18px 0 10px; }
.subsec-row { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; margin:-8px -16px 12px; padding:8px 16px 18px; }
.subsec-row::-webkit-scrollbar { display:none; }
.subsec-pill {
  flex-shrink:0; padding:8px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:600;
  background:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.5);
  cursor:pointer; transition:all .22s cubic-bezier(.34,1.2,.64,1);
  backdrop-filter:blur(20px); position:relative; color:var(--text2);
  box-shadow:0 1px 4px rgba(26,34,51,0.06);
}
.subsec-pill:hover { background:rgba(255,255,255,0.55); }
.subsec-pill.active { background:var(--text); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(26,34,51,0.2); }
.subsec-add { color:var(--text3); font-size:20px; padding:8px 12px; }
.subsec-ctx-btn {
  display:none; position:absolute; top:-5px; right:-5px; width:17px; height:17px;
  border-radius:50%; background:rgba(26,34,51,0.6); border:none; cursor:pointer;
  color:#fff; font-size:9px; align-items:center; justify-content:center; z-index:5; line-height:1;
}
.subsec-pill:hover .subsec-ctx-btn { display:flex; }
.subsec-ctx-menu {
  position:fixed; z-index:999; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 32px var(--shadow-hi);
  overflow:hidden; min-width:148px;
}
.subsec-ctx-item { padding:10px 15px; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text); transition:background .12s; }
.subsec-ctx-item:hover { background:rgba(var(--accent-rgb),0.08); }
.subsec-ctx-item.danger { color:var(--danger); }
.subsec-ctx-item.danger:hover { background:rgba(var(--danger-rgb),0.08); }

.topic-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
}
@media (min-width:600px) {
  .topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
@media (min-width:900px) {
  .topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}

.topic-card {
  border-radius:var(--topic-card-radius); cursor:pointer; position:relative;
  aspect-ratio:4/3; background:var(--topic-card-fill);
  border:1px solid var(--topic-card-border);
  box-shadow:0 var(--topic-card-shadow-y) var(--topic-card-shadow-blur) rgba(26,34,51,var(--topic-card-shadow-opacity));
  display:flex; flex-direction:column;
  transition:transform .42s cubic-bezier(.25,.1,.25,1), box-shadow .38s;
}

.topic-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 calc(var(--topic-card-shadow-y) + 14px) calc(var(--topic-card-shadow-blur) + 24px) rgba(26,34,51, calc(var(--topic-card-shadow-opacity) + 0.08)); }
.topic-card:active { transform:scale(.97); transition:transform .1s; }

.topic-card::after,
.topic-add-card::after,
.w-chip::after,
.back-btn::after,
.otra-clase-btn::after {
  content:''; position:absolute; z-index:-1;
}

.topic-card::after     { inset:-3px -3px -9px; }
.topic-add-card::after { inset:-3px -3px -6px; }
.w-chip::after         { inset:-2px -2px calc(-1 * var(--chip-hover-lift, 2px) - 5px) -2px; }
.back-btn::after       { inset:-3px -3px calc(-1 * var(--button-hover-lift, 1px) - 5px) -3px; }
.otra-clase-btn::after { inset:-3px -3px calc(-1px - var(--button-hover-lift, 1px) - 5px) -3px; }

.topic-card-header {
  padding:14px 16px 10px;
  flex-shrink:0; position:relative; z-index:2;
}
.topic-card-title {
  font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:22px; font-weight:400; color:var(--text);
  letter-spacing:.2px; line-height:1.1;
  text-shadow:none;
}
.topic-card-title-small {
  font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:17px; font-weight:400; color:var(--text);
  letter-spacing:.2px; line-height:1.1;
}

.topic-card-img-wrap {
  flex:1; overflow:hidden; position:relative;
  border-radius:0 0 calc(var(--topic-card-radius) - 2px) calc(var(--topic-card-radius) - 2px);
  margin:0; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.topic-card-img-wrap img {
  
  width:calc(100% + 2px); height:calc(100% + 2px); margin:-1px;
  object-fit:cover; display:block;
  transition:transform .65s cubic-bezier(.25,.1,.25,1);
  transform-origin:center center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.topic-card:hover .topic-card-img-wrap img { transform:scale(1.07); }

.match-card-img, .img-gallery-slide img { backface-visibility:hidden; -webkit-backface-visibility:hidden; }

.topic-card-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:36px; background:rgba(255,255,255,0.15);
  border-radius:0 0 calc(var(--topic-card-radius) - 2px) calc(var(--topic-card-radius) - 2px);
}
.topic-progress-bar {
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,0.25); z-index:3;
}
.topic-progress-fill {
  height:100%; background:var(--accent2); border-radius:0 2px 2px 0;
  transition:width .4s cubic-bezier(.34,1.2,.64,1);
}

.topic-done-badge {
  position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%;
  background:var(--accent2); box-shadow:0 2px 6px rgba(var(--accent2-rgb),0.35); z-index:3;
}

.ex-wysiwyg.ex-completed { opacity:0.72; }
.ex-completed-banner {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:rgba(var(--accent2-rgb),0.12); border-top:1px solid rgba(var(--accent2-rgb),0.2);
  font-size:12px; font-weight:700; color:var(--accent2);
}

.progress-topic-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--glass-md); border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:8px; backdrop-filter:blur(16px);
}
.progress-topic-name { flex:1; font-size:13px; font-weight:600; }
.progress-topic-bar { width:80px; height:6px; background:rgba(26,34,51,0.1); border-radius:var(--r-pill); overflow:hidden; }
.progress-topic-fill { height:100%; background:var(--accent2); border-radius:var(--r-pill); transition:width .3s; }
.progress-topic-pct { font-size:11px; font-weight:700; color:var(--accent2); min-width:32px; text-align:right; }
.topic-add-card {
  border-radius:var(--r-xl); aspect-ratio:4/3; display:flex; flex-direction:column; position:relative;
  align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:2px dashed rgba(26,34,51,0.2); background:rgba(255,255,255,0.15);
  transition:all .22s; color:var(--text3);
}
.topic-add-card:hover { background:rgba(255,255,255,0.3); transform:translateY(-3px); }
.topic-add-icon { font-size:24px; }
.topic-add-label { font-size:12px; font-weight:600; letter-spacing:.3px; }

.topic-menu-btn {
  position:absolute; top:7px; right:7px; z-index:10;
  width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer;
  background:rgba(0,0,0,0.35); backdrop-filter:blur(8px);
  color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s; line-height:1;
}
.topic-card:hover .topic-menu-btn,
.topic-card:active .topic-menu-btn { opacity:1; }
.topic-ctx-menu {
  position:fixed; z-index:999; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 32px var(--shadow-hi);
  overflow:hidden; min-width:160px;
}
.topic-ctx-item {
  padding:11px 16px; font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:9px; color:var(--text); transition:background .12s;
}
.topic-ctx-item:hover { background:rgba(var(--accent-rgb),0.08); }
.topic-ctx-item.danger { color:var(--danger); }
.topic-ctx-item.danger:hover { background:rgba(var(--danger-rgb),0.08); }

.lesson-header { padding:22px 20px 14px; flex-shrink:0; display:flex; align-items:center; gap:12px; }
.lesson-header-inner { display:flex; align-items:center; gap:12px; width:100%; max-width:720px; margin:0 auto; }
@media (min-width:600px) { .lesson-header { padding:22px 32px 14px; } }
@media (min-width:900px) { .lesson-header { padding:24px 48px 16px; } }
.back-btn {
  height:36px; padding:0 16px; border-radius:var(--button-radius); border:none; cursor:pointer; position:relative;
  background:var(--button-fill); border:1px solid var(--button-border);
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:var(--button-font-size); letter-spacing:.3px;
  color:var(--button-text); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate)); flex-shrink:0;
  transition:all .38s cubic-bezier(.25,.1,.25,1);
  box-shadow:
    inset 0 0 var(--button-inset-blur) rgba(16,22,34,var(--button-inset-opacity)),
    inset 0 calc(-1 * var(--button-inset-bottom-y)) var(--button-inset-bottom-blur) rgba(16,22,34,var(--button-inset-bottom-opacity)),
    0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.back-btn:hover { background:var(--button-hover-fill); transform:translateX(-2px) translateY(calc(-1 * var(--button-hover-lift))); }
.back-btn:active { transform:scale(.93); }
.lesson-title-bar { flex:1; }
.lesson-title-bar h2 { font-family:'Coolvetica','DM Sans',sans-serif; font-size:22px; font-weight:400; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.lesson-title-bar p { font-size:12px; color:var(--text3); margin-top:2px; font-family:'DM Sans',sans-serif; }

.ex-wysiwyg { background:var(--exercise-fill); border:1px solid var(--exercise-border); border-radius:var(--exercise-radius); backdrop-filter:blur(var(--exercise-blur)); margin-bottom:16px; box-shadow:0 var(--exercise-shadow-y) var(--exercise-shadow-blur) rgba(26,34,51,var(--exercise-shadow-opacity)); animation:fadeUp .45s cubic-bezier(.25,.1,.25,1) both; }

.ex-wysiwyg > .ex-top-bar { border-radius:var(--exercise-radius) var(--exercise-radius) 0 0; overflow:hidden; }
@media (min-width:900px) { .ex-wysiwyg { max-width:720px; } }
.ex-wysiwyg-body { padding:16px; }
.ex-top-bar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border-lo); background:rgba(255,255,255,0.12); min-height:36px; }
.ex-type-tag { display:none; }
.ex-actions { margin-left:auto; display:flex; gap:6px; }
.ex-icon-btn { width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; font-size:14px; transition:background .15s; }
.ex-icon-btn:hover { background:rgba(26,34,51,0.1); }
.ex-icon-btn.del:hover { background:rgba(var(--danger-rgb),0.12); color:var(--danger); }
.ex-icon-btn:disabled { opacity:.25; cursor:default; pointer-events:none; }
.ex-reorder { display:flex; gap:2px; margin-right:2px; }
.ex-reorder .ex-icon-btn { font-size:15px; color:var(--text2); }
.sv-instruction { font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; color:var(--text2); margin-bottom:14px; text-transform:none; }
.sv-q { font-size:18px; font-weight:700; line-height:1.3; margin-bottom:16px; }
.word-bank {
  display:flex; flex-wrap:wrap; gap:7px; padding:12px;
  background:rgba(255,255,255,0.2); border-radius:var(--r-sm); margin-bottom:14px; min-height:48px;
  position:sticky; top:8px; z-index:30;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:rgba(220,228,238,0.78);
  box-shadow:0 2px 12px rgba(26,34,51,0.06);
}
.w-chip {
  --chip-hover-lift:2px;
  padding:8px 16px; border-radius:var(--chip-radius); font-size:var(--chip-font-size); font-weight:600; position:relative;
  background:var(--chip-fill); border:1px solid var(--chip-border);
  cursor:pointer;
  transition:background .38s cubic-bezier(.25,.1,.25,1), box-shadow .38s cubic-bezier(.25,.1,.25,1), opacity .3s cubic-bezier(.25,.1,.25,1), color .38s cubic-bezier(.25,.1,.25,1), transform .2s cubic-bezier(.34,1.56,.64,1);
  user-select:none; color:var(--text);
  box-shadow:0 var(--chip-shadow-y) var(--chip-shadow-blur) rgba(26,34,51,var(--chip-shadow-opacity));
}
.w-chip:hover { background:rgba(255,255,255,0.95); transform:translateY(-2px); box-shadow:0 calc(var(--chip-shadow-y) + 4px) calc(var(--chip-shadow-blur) + 8px) rgba(26,34,51, calc(var(--chip-shadow-opacity) + 0.05)); }
.w-chip:active { transform:scale(.94); }
.w-chip.selected { background:var(--text); color:#fff; box-shadow:0 4px 14px rgba(26,34,51,0.25); }

.w-chip.used {
  opacity:.35; pointer-events:none;
}

.w-chip.used:not(.leaving):not(.removing) { transform:none; }

.w-chip.leaving { animation:chipLeave .26s cubic-bezier(.25,.1,.25,1) both; }
@keyframes chipLeave {
  0%   { opacity:1;   transform:scale(1); }
  100% { opacity:.35; transform:scale(.96); }
}

.w-chip.removing { transition:background .38s, box-shadow .38s, color .38s; animation:chipReturn .34s cubic-bezier(.25,.1,.25,1) both; }

@keyframes chipReturn {
  0%   { opacity:0; transform:translateY(-14px); }
  100% { opacity:1; transform:none; }
}

.session-layout { display:flex; gap:20px; align-items:flex-start; max-width:1300px; margin:0 auto; }
.session-layout > #exercises-container,
.session-layout > #live-view-content { flex:1; min-width:0; }

.pills-col {
  width:var(--pills-col-width); flex-shrink:0; position:sticky; top:8px;
  height:calc(100vh - var(--pills-col-height-offset)); overflow-y:auto; scrollbar-width:none;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; gap:var(--pills-col-gap);
  padding:var(--pills-col-padding-top) var(--pills-col-padding-x) var(--pills-col-padding-bottom);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--pills-fade-top), #000 calc(100% - var(--pills-fade-bottom)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--pills-fade-top), #000 calc(100% - var(--pills-fade-bottom)), transparent 100%);
}
.pills-col::-webkit-scrollbar { display:none; }

.pills-col-shell {
  position:sticky; top:8px; width:var(--pills-col-width); flex-shrink:0;
  height:calc(100vh - var(--pills-col-height-offset));
}
.pills-col-shell .pills-col { position:static; top:auto; width:100%; height:100%; }
.pills-compose-slot { position:absolute; top:0; left:0; right:0; z-index:41; pointer-events:none; }
.pills-compose-slot .pills-compose-trigger { pointer-events:auto; }

.pills-compose-trigger {
  position:relative; z-index:40; flex-shrink:0;
  margin:0 4px 14px; padding:13px 20px;
  border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; cursor:text;
  background:rgba(16,22,34,0.22);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 4px 14px rgba(16,22,34,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:background .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.pills-compose-trigger:hover, .pills-compose-trigger.design-pinned {
  background:rgba(16,22,34,0.3);
  box-shadow:0 6px 18px rgba(16,22,34,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.pills-compose-trigger.active {
  background:rgba(16,22,34,0.34);
  box-shadow:0 4px 14px rgba(16,22,34,0.2), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(var(--accent-rgb),0.35);
}
.pills-compose-trigger input {
  width:100%; border:none; outline:none; background:transparent; text-align:center;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:#fff;
}
.pills-compose-trigger input::placeholder { color:rgba(255,255,255,0.6); font-weight:500; }

.class-pill {
  position:relative;
  padding:var(--pill-pad-y) var(--pill-pad-x); border-radius:var(--pill-radius);
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; letter-spacing:.2px;
  font-size:var(--pill-font-size); line-height:var(--pill-line-height); color:var(--pill-text);
  
  background:var(--pill-fill);
  backdrop-filter:blur(var(--pill-blur)) saturate(var(--pill-saturate)); -webkit-backdrop-filter:blur(var(--pill-blur)) saturate(var(--pill-saturate));
  box-shadow:
    inset 0 0 var(--pill-inset-blur) rgba(16,22,34,var(--pill-inset-opacity)),
    inset 0 calc(-1 * var(--pill-inset-bottom-y)) var(--pill-inset-bottom-blur) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
    0 var(--pill-shadow-y) var(--pill-shadow-blur) rgba(26,34,51,var(--pill-shadow-opacity));
  
  isolation:isolate;
  max-width:100%; word-break:break-word; text-align:center; cursor:default;
}

.pill-del {
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  background:rgba(18,22,32,0.82); color:#fff; font-size:13px; line-height:22px; text-align:center;
  opacity:0; transform:scale(.7); cursor:pointer; z-index:3;
  transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), background .2s;
}
.class-pill:hover .pill-del { opacity:1; transform:scale(1); }
.pill-del:hover { background:rgba(190,60,60,0.9); }

.class-pill.clickable { cursor:pointer; transition:transform .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1), background .3s cubic-bezier(.25,.1,.25,1); }
.class-pill.clickable:hover, .class-pill.clickable.design-pinned {
  transform:translateY(calc(-1 * var(--pill-hover-lift))); background:var(--pill-hover-fill);
  box-shadow:
    inset 0 0 var(--pill-inset-blur) rgba(16,22,34,var(--pill-inset-opacity)),
    inset 0 calc(-1 * var(--pill-inset-bottom-y)) var(--pill-inset-bottom-blur) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
    0 calc(var(--pill-shadow-y) + 4px) calc(var(--pill-shadow-blur) + 8px) rgba(26,34,51,var(--pill-shadow-hover-opacity));
}

.class-pill.clickable:active { transform:scale(.93); transition:transform .12s cubic-bezier(.4,0,.6,1); }

.class-pill.bloom { animation:pillBloom .55s cubic-bezier(.22,.61,.36,1) both; will-change:opacity, transform, filter; }
@keyframes pillBloom {
  0%   { opacity:0; filter:blur(12px); transform:scale(.92) translateY(-10px); }
  100% { opacity:1; filter:blur(0);    transform:scale(1)   translateY(0); }
}

.class-pill.big {
  width:100%; padding:calc(var(--pill-pad-y) + 2px) calc(var(--pill-pad-x) - 2px); border-radius:var(--pill-radius); font-size:calc(var(--pill-font-size) - 3px); line-height:1.4;
  text-align:left; position:relative; z-index:2; cursor:pointer;
  box-shadow:
    inset 0 0 calc(var(--pill-inset-blur) + 4px) rgba(16,22,34,var(--pill-inset-opacity)),
    inset 0 calc(-1 * var(--pill-inset-bottom-y)) calc(var(--pill-inset-bottom-blur) + 1px) rgba(16,22,34,var(--pill-inset-bottom-opacity)),
    0 12px 28px rgba(26,34,51,var(--pill-shadow-hover-opacity));
  animation:pillBigIn .55s cubic-bezier(.22,.61,.36,1) both; will-change:opacity, transform, filter;
}
.class-pill.big.settling { animation:pillSettleOut .5s cubic-bezier(.5,0,.75,0) both; pointer-events:none; }
@keyframes pillSettleOut {
  0%   { opacity:1; filter:blur(0);   transform:scale(1)   translateY(0); }
  100% { opacity:0; filter:blur(8px); transform:scale(.48) translateY(-16px); }
}
@keyframes pillBigIn {
  0%   { opacity:0; filter:blur(14px); transform:scale(.94) translateY(-10px); }
  100% { opacity:1; filter:blur(0);    transform:scale(1)   translateY(0); }
}
.pill-scrim {
  position:absolute; inset:0; background:rgba(16,20,30,0.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--r); z-index:1; pointer-events:none; animation:scrimIn .5s cubic-bezier(.16,1,.3,1) both;
}
.pill-scrim.settling { animation:scrimOut .5s ease both; }
@keyframes scrimIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes scrimOut { from{ opacity:1; } to{ opacity:0; } }

.notebook-col {
  width:var(--notebook-width); flex-shrink:0; position:sticky; top:8px;
  height:calc(100vh - 100px); border-radius:var(--notebook-radius);
  background:var(--notebook-fill);
  border:1px solid var(--notebook-border);
  backdrop-filter:blur(var(--notebook-blur)) saturate(var(--notebook-saturate)); -webkit-backdrop-filter:blur(var(--notebook-blur)) saturate(var(--notebook-saturate));
  
  box-shadow:
    inset 0 0 var(--notebook-inset-blur) rgba(16,22,34,var(--notebook-inset-opacity)),
    inset 0 calc(-1 * var(--notebook-inset-bottom-y)) var(--notebook-inset-bottom-blur) rgba(16,22,34,var(--notebook-inset-bottom-opacity)),
    0 var(--notebook-shadow-y) var(--notebook-shadow-blur) rgba(26,34,51,var(--notebook-shadow-opacity));
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; filter:blur(14px); transform:translateX(28px); pointer-events:none;
  transition:opacity .5s cubic-bezier(.25,.1,.25,1), filter .5s cubic-bezier(.25,.1,.25,1), transform .5s cubic-bezier(.25,.1,.25,1);
}
.notebook-col.open { opacity:1; filter:blur(0); transform:translateX(0); pointer-events:auto; }
.notebook-body {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:8px 24px 24px; display:flex; flex-direction:column; gap:4px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 24px), transparent 100%);
}
.notebook-entry {
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; font-size:19px; color:#fff;
  background:transparent; border:none; outline:none; width:100%; line-height:1.6;
}
input.notebook-entry::placeholder { color:rgba(255,255,255,0.55); }

.notebook-entry { position:relative; padding-right:20px; }
.note-del { position:absolute; top:-1px; right:-4px; width:20px; height:20px; padding:0; border:none;
  background:transparent; color:rgba(255,255,255,0.5); font-family:'DM Sans',sans-serif; font-size:15px;
  line-height:20px; text-align:center; cursor:pointer; border-radius:50%; opacity:0;
  transition:opacity .18s ease, color .18s ease, background .18s ease; }
.notebook-entry:hover .note-del { opacity:1; }
.note-del:hover { color:#fff; background:rgba(255,77,94,0.9); }
@media (hover:none) { .note-del { opacity:.55; } }
.note-cursor { display:inline-block; width:1px; height:1em; vertical-align:-2px; margin-left:1px; background:#fff; animation:cursorBlink 1s steps(1) infinite; }
@keyframes cursorBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.notebook-empty { font-size:13px; color:rgba(255,255,255,0.5); text-align:center; padding:30px 10px; font-family:'DM Sans',sans-serif; }

.notebook-compose-trigger {
  position:relative; z-index:5; cursor:text;
  margin:16px 20px 10px; padding:12px 18px;
  border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,22,34,0.22);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 4px 14px rgba(16,22,34,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:background .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.notebook-compose-trigger:hover, .notebook-compose-trigger.design-pinned {
  background:rgba(16,22,34,0.3);
  box-shadow:0 6px 18px rgba(16,22,34,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.notebook-compose-trigger.active {
  background:rgba(16,22,34,0.34);
  box-shadow:0 4px 14px rgba(16,22,34,0.2), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(var(--accent-rgb),0.35);
}
.notebook-compose-trigger input {
  width:100%; border:none; outline:none; background:transparent; text-align:center;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; color:#fff;
}
.notebook-compose-trigger input::placeholder { color:rgba(255,255,255,0.6); }

.notebook-compose-trigger textarea {
  width:100%; border:none; outline:none; background:transparent; text-align:center;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; color:#fff;
  resize:none; overflow:hidden; display:block; margin:0; padding:0;
  line-height:1.5; min-height:24px;
  transition:height .3s cubic-bezier(.25,.1,.25,1);
}
.notebook-compose-trigger textarea::placeholder { color:rgba(255,255,255,0.6); }

.notebook-entry.note-in { animation:noteIn .5s cubic-bezier(.16,1,.3,1) both; will-change:opacity, transform, filter; }
@keyframes noteIn {
  0%   { opacity:0; filter:blur(6px); transform:translateY(-12px) scale(.98); }
  60%  { opacity:1; filter:blur(1px); }
  100% { opacity:1; filter:blur(0);   transform:translateY(0) scale(1); }
}

@media (max-width:999px) {
  .session-layout { flex-direction:column; }
  .pills-col { width:100%; flex-direction:row; overflow-x:auto; overflow-y:visible; height:auto; position:relative; padding:8px 16px; mask-image:none; -webkit-mask-image:none; }
  .pills-col-shell { position:relative; width:100%; height:auto; top:auto; }
  .pills-compose-slot { position:relative; z-index:auto; }
  
  .notebook-col {
    width:min(320px,88vw); position:fixed; right:0; top:0; bottom:0; z-index:200;
    max-height:100vh; border-radius:var(--r-xl) 0 0 var(--r-xl);
    transform:translateX(105%);
  }
  .notebook-col.open { transform:translateX(0); }
}

.sentence-line, .so-line, .wa-line {
  position:relative; padding-left:20px;
}
.sentence-line::before, .so-line::before, .wa-line::before {
  content:'';
  position:absolute; left:1px;
  width:9px; height:9px; border-radius:50%;
  
  background:radial-gradient(circle at 42% 38%, rgba(120,135,160,0.55) 0%, rgba(120,135,160,0.22) 45%, rgba(120,135,160,0) 78%);
  box-shadow:0 0 5px rgba(120,135,160,0.18);
  filter:blur(0.3px);
  transition:background .7s cubic-bezier(.25,.1,.25,1), box-shadow .7s cubic-bezier(.25,.1,.25,1), filter .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.34,1.4,.5,1);
}
.sentence-line::before, .so-line::before { top:50%; transform:translateY(-50%); }
.wa-line::before { top:1.3em; transform:translateY(-50%); }

.sentence-line.line-filled::before, .so-line.line-filled::before, .wa-line.line-filled::before {
  background:radial-gradient(circle at 42% 38%, rgba(96,150,255,0.85) 0%, rgba(70,120,240,0.4) 48%, rgba(70,120,240,0) 80%);
  box-shadow:0 0 9px rgba(96,150,255,0.5), 0 0 18px rgba(96,150,255,0.22);
  filter:blur(0.4px);
}
.sentence-line.line-filled::before, .so-line.line-filled::before { transform:translateY(-50%) scale(1.12); }
.wa-line.line-filled::before { transform:translateY(-50%) scale(1.12); }

.sentence-line.line-ok::before, .so-line.line-ok::before, .wa-line.line-ok::before {
  background:radial-gradient(circle at 42% 38%, rgba(72,205,140,0.9) 0%, rgba(46,180,110,0.42) 48%, rgba(46,180,110,0) 80%);
  box-shadow:0 0 10px rgba(72,205,140,0.5), 0 0 20px rgba(72,205,140,0.22);
  filter:blur(0.4px);
}
.sentence-line.line-ok::before, .so-line.line-ok::before { transform:translateY(-50%) scale(1.18); }
.wa-line.line-ok::before { transform:translateY(-50%) scale(1.18); }

.sentence-line.line-bad::before, .so-line.line-bad::before, .wa-line.line-bad::before {
  background:radial-gradient(circle at 42% 38%, rgba(255,110,125,0.9) 0%, rgba(230,70,90,0.42) 48%, rgba(230,70,90,0) 80%);
  box-shadow:0 0 10px rgba(255,110,125,0.5), 0 0 20px rgba(255,110,125,0.2);
  filter:blur(0.4px);
}
.sentence-line.line-bad::before, .so-line.line-bad::before { transform:translateY(-50%) scale(1.18); }
.wa-line.line-bad::before { transform:translateY(-50%) scale(1.18); }
.sentence-line { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:12px; font-size:17px; line-height:2.2; font-family:'Canela Text','DM Sans',sans-serif; letter-spacing:.2px; }
.drop-slot { display:inline-flex; align-items:center; justify-content:center; min-width:var(--slot-min-width); height:var(--slot-height); border-radius:var(--slot-radius); border:1.5px solid var(--slot-border); background:var(--slot-fill); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:0 14px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:normal; color:rgba(26,34,51,0.4); cursor:pointer; transition:all .38s cubic-bezier(.25,.1,.25,1); box-shadow:0 var(--slot-shadow-y) var(--slot-shadow-blur) rgba(26,34,51,var(--slot-shadow-opacity)), inset 0 1px 0 rgba(255,255,255,0.6); }
.drop-slot.filled { border-color:rgba(var(--accent-rgb),0.45); background:var(--slot-filled-fill); color:var(--text); box-shadow:0 2px 8px rgba(26,34,51,0.1), inset 0 1px 0 rgba(255,255,255,0.7); }

.drop-slot.drag-over { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15); }

body.is-teacher .drop-slot[data-answer]:not([data-answer=""]),
body.is-teacher .match-drop-zone[data-answer]:not([data-answer=""]),
body.is-teacher .col-drop[data-answer]:not([data-answer=""]) {
  position: relative;
}
body.is-teacher .drop-slot[data-answer]:not([data-answer=""])::after,
body.is-teacher .match-drop-zone[data-answer]:not([data-answer=""])::after,
body.is-teacher .col-drop[data-answer]:not([data-answer=""])::after {
  content: attr(data-answer);
  position: absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
  background:rgba(26,34,51,0.82); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:5px 12px; border-radius:var(--r-pill); font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
  white-space:nowrap; pointer-events:none; opacity:0; z-index:50;
  box-shadow:0 4px 14px rgba(26,34,51,0.25);
  transition:opacity .18s cubic-bezier(.25,.1,.25,1), transform .18s cubic-bezier(.25,.1,.25,1);
}
body.is-teacher .drop-slot[data-answer]:not([data-answer=""]):hover::after,
body.is-teacher .match-drop-zone[data-answer]:not([data-answer=""]):hover::after,
body.is-teacher .col-drop[data-answer]:not([data-answer=""]):hover::after {
  opacity:1; transform:translateX(-50%) translateY(0);
}

.wa-key, .so-key {
  display:inline-flex; align-items:center; vertical-align:middle;
  margin:0 2px 0 6px; padding:2px 10px;
  border-radius:var(--r-pill);
  background:rgba(var(--accent2-rgb),0.12);
  border:1px solid rgba(var(--accent2-rgb),0.3);
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:normal; line-height:1.5; color:var(--accent2);
  white-space:nowrap; user-select:text;
}
body:not(.is-teacher) .wa-key, body:not(.is-teacher) .so-key { display:none; }

.student-presence-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:rgba(26,34,51,0.18); }
.student-presence-dot.online { background:var(--accent2); box-shadow:0 0 0 3px rgba(var(--accent2-rgb),0.18); animation:livePulse 1.4s ease-in-out infinite; }
.drop-slot.ok  { border-color:#22c55e; background:rgba(34,197,94,0.08); color:#16a34a; }
.drop-slot.bad { border-color:var(--danger); background:rgba(var(--danger-rgb),0.08); color:var(--danger); animation:shake .28s; }
.conj-grid { display:flex; flex-direction:column; gap:10px; }
.conj-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.conj-pro { font-weight:700; color:var(--accent); min-width:90px; font-size:13px; }
.conj-sel { background:var(--white); border:2px solid var(--border-lo); border-radius:var(--r-sm); color:var(--text); padding:7px 28px 7px 10px; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer; outline:none; appearance:none; transition:border-color .18s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233a4a62' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
.conj-sel:focus { border-color:var(--accent); }
.conj-sel.ok  { border-color:#22c55e; }
.conj-sel.bad { border-color:var(--danger); }
.conj-ctx { color:var(--text3); font-size:13px; }
.match-img-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.match-card {
  border-radius:var(--r); overflow:visible; border:none; background:transparent;
  transition:transform .38s cubic-bezier(.25,.1,.25,1);
  display:flex; flex-direction:column; gap:8px;
}
.match-card:hover { transform:translateY(-3px); }
.match-card-img-wrap {
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1.5px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 20px rgba(26,34,51,0.1);
}
.foto-credito { display:block; font-family:'Coolvetica','DM Sans',sans-serif; font-size:10.5px; letter-spacing:.2px; opacity:.45; text-align:right; margin-top:2px; text-decoration:none; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loader-spin { width:28px; height:28px; border-radius:50%; border:3px solid rgba(0,0,0,0.12); border-top-color:var(--accent,#4a7dff); animation:loader-spin-rotate .8s linear infinite; }
@keyframes loader-spin-rotate { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .loader-spin { animation:none; } }
.foto-credito:hover { opacity:.8; text-decoration:underline; }
.match-card-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.25,.1,.25,1); }

img.foto-entrando { opacity:0; filter:blur(14px); transform:scale(1.015); }
img.foto-entrando.foto-lista { opacity:1; filter:blur(0); transform:none;
  transition:opacity .52s var(--dc-ease, cubic-bezier(.42,0,.18,1)),
             filter .52s var(--dc-ease, cubic-bezier(.42,0,.18,1)),
             transform .52s var(--dc-ease, cubic-bezier(.42,0,.18,1)); }
@media (prefers-reduced-motion:reduce) {
  img.foto-entrando { opacity:1; filter:none; transform:none; }
}
.match-card:hover .match-card-img { transform:scale(1.05); }
.match-card-img-placeholder { width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:32px; background:rgba(255,255,255,0.2); border-radius:var(--r-lg); }
.match-drop-zone {
  min-height:40px; padding:8px 16px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:normal; color:rgba(26,34,51,0.4);
  transition:all .38s cubic-bezier(.25,.1,.25,1); cursor:pointer;
  border-radius:var(--slot-radius);
  background:var(--slot-fill); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1.5px solid var(--slot-border);
  box-shadow:0 var(--slot-shadow-y) var(--slot-shadow-blur) rgba(26,34,51,var(--slot-shadow-opacity)), inset 0 1px 0 rgba(255,255,255,0.6);
}
.match-drop-zone.drag-over { background:rgba(240,244,251,0.92); border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15); }
.match-drop-zone.filled { color:var(--text); background:var(--slot-filled-fill); border-color:rgba(var(--accent-rgb),0.4); }
.match-drop-zone.matched { color:var(--accent2); background:rgba(var(--accent2-rgb),0.1); border-color:var(--accent2); }
.match-drop-zone.bad { animation:shake .28s; border-color:var(--danger); background:rgba(var(--danger-rgb),0.06); color:var(--danger); }

.match-card-img-wrap.editable { cursor:pointer; }
.match-card-img-wrap input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:3; }
.match-card-edit-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,20,35,0.38); color:#fff; font-size:22px; opacity:0;
  transition:opacity .2s cubic-bezier(.25,.1,.25,1); pointer-events:none; z-index:2;
}
.match-card-img-wrap.editable:hover .match-card-edit-overlay { opacity:1; }
@media (hover:none) { .match-card-edit-overlay { opacity:.85; } }
.match-card-del {
  position:absolute; top:6px; right:6px; z-index:4; width:24px; height:24px; border-radius:50%; border:none;
  background:rgba(15,20,35,0.65); color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background .18s;
}
.match-card-del:hover { background:rgba(var(--danger-rgb),0.85); }
.match-card-crop-btn {
  position:absolute; bottom:6px; left:6px; z-index:4; width:28px; height:28px; border-radius:var(--r-xs); border:none;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); color:rgba(58,72,98,0.9); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  opacity:0; transition:all .22s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 12px rgba(26,34,51,0.15);
}
.match-card-img-wrap.editable:hover .match-card-crop-btn { opacity:1; }
.match-card-crop-btn:hover { background:#fff; color:var(--accent); }
@media (hover:none) { .match-card-crop-btn { opacity:1; } }
.match-word-input {
  min-height:40px; padding:8px 16px; width:100%; text-align:center;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:var(--text);
  border-radius:var(--r-pill); background:rgba(235,240,248,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,0.7); box-shadow:0 1px 4px rgba(26,34,51,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  outline:none; transition:border-color .18s;
}
.match-word-input:focus { border-color:rgba(var(--accent-rgb),0.55); background:rgba(240,244,251,0.88); }
.match-word-input::placeholder { color:rgba(26,34,51,0.32); }
.match-card-add {
  border:2px dashed rgba(26,34,51,0.22); background:rgba(255,255,255,0.18); box-shadow:none;
  display:flex; align-items:center; justify-content:center; transition:all .28s cubic-bezier(.25,.1,.25,1);
}
.match-card-add:hover { background:rgba(255,255,255,0.42); border-color:rgba(var(--accent-rgb),0.45); }
.match-card-add-icon { font-size:28px; color:var(--text3); pointer-events:none; }
.inline-instruction-input {
  width:100%; border:none; background:transparent; outline:none;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px;
  color:var(--text2); margin-bottom:14px; padding:2px 0 6px; border-bottom:1.5px dashed var(--border-lo);
}
.inline-instruction-input:focus { border-bottom-color:var(--accent); }
.inline-instruction-input::placeholder { color:rgba(58,74,98,0.4); }
.ex-wysiwyg.ex-editing { border-color:rgba(var(--accent-rgb),0.4); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.12), 0 4px 20px rgba(26,34,51,0.08); }
.match-words {
  display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px;
  position:sticky; top:8px; z-index:30;
  padding:12px; border-radius:var(--r-sm);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:rgba(220,228,238,0.78);
  box-shadow:0 2px 12px rgba(26,34,51,0.06);
  
  max-height:137px; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(26,34,51,0.2) transparent;
}
.match-words::-webkit-scrollbar { width:6px; }
.match-words::-webkit-scrollbar-track { background:transparent; }
.match-words::-webkit-scrollbar-thumb { background:rgba(26,34,51,0.2); border-radius:var(--r-pill); }
.match-words::-webkit-scrollbar-thumb:hover { background:rgba(26,34,51,0.35); }

.col-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; align-items:stretch; }
.col-block {
  position:relative; display:flex; flex-direction:column; overflow:hidden; min-height:150px;
  border-radius:26px;
  background:rgba(214,221,230,0.48);
  border:1px solid rgba(255,255,255,0);
  backdrop-filter:blur(36px) saturate(80%); -webkit-backdrop-filter:blur(36px) saturate(80%);
  box-shadow:
    inset 0 0 40px rgba(16,22,34,0.26),
    inset 0 -4px 14px rgba(16,22,34,0.14),
    0 10px 30px rgba(26,34,51,0.12);
}
.col-block-title {
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; font-size:18px; letter-spacing:.3px; color:#fff;
  text-align:center; padding:12px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,0.22);
  min-height:22px; word-break:break-word;
}
.col-drop {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px; min-height:90px; cursor:pointer;
  transition:background .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.col-drop.drag-over { background:rgba(var(--accent-rgb),0.14); box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),0.45); }

.col-word { max-width:100%; word-break:break-word; text-align:center; }
.col-word.col-word-in { animation:colWordIn .42s var(--dc-ease, cubic-bezier(.42,0,.18,1)) both; will-change:opacity, transform; }

@keyframes colWordIn {
  0%   { opacity:0; transform:translateY(-12px); }
  100% { opacity:1; transform:none; }
}
.col-word.ok  { border-color:#22c55e; background:rgba(34,197,94,0.14); color:#16a34a; }
.col-word.bad { border-color:var(--danger); background:rgba(255,255,255,0.9); color:var(--danger); animation:shake .28s; }

.col-write-input {
  width:100%; border:none; outline:none; background:transparent; resize:none; overflow:hidden; display:block; margin:0;
  padding:12px 16px 16px;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; font-size:18px; line-height:1.55; color:#fff;
  min-height:100px; transition:height .42s var(--dc-ease, cubic-bezier(.42,0,.18,1));
}
.col-write-input::placeholder { color:rgba(255,255,255,0.5); }

.col-title-input {
  width:100%; border:none; outline:none; background:transparent; text-align:center;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; font-size:18px; letter-spacing:.3px; color:#fff;
  padding:12px 16px 10px; border-bottom:1px dashed rgba(255,255,255,0.35);
  transition:border-color .2s;
}
.col-title-input:focus { border-bottom-color:rgba(255,255,255,0.75); }
.col-title-input::placeholder { color:rgba(255,255,255,0.45); }
.col-words-editor {
  margin:12px; border:none; outline:none; resize:vertical;
  background:rgba(255,255,255,0.16); border-radius:var(--r-sm); padding:10px 12px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:#fff; line-height:1.8; min-height:110px;
}
.col-words-editor::placeholder { color:rgba(255,255,255,0.45); }
.col-editor-hint { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; color:rgba(255,255,255,0.5); font-family:'DM Sans',sans-serif; padding:24px 16px; }
.col-del-btn {
  position:absolute; top:8px; right:8px; z-index:4; width:24px; height:24px; border-radius:50%; border:none;
  background:rgba(15,20,35,0.65); color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); opacity:0; transition:opacity .2s, background .18s;
}
.col-block:hover .col-del-btn { opacity:1; }
.col-del-btn:hover { background:rgba(var(--danger-rgb),0.85); }
@media (hover:none) { .col-del-btn { opacity:.6; } }
.col-block-add {
  min-height:150px; border-radius:26px; cursor:pointer;
  border:2px dashed rgba(26,34,51,0.25); background:rgba(255,255,255,0.14); box-shadow:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--text3); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
  transition:all .28s cubic-bezier(.25,.1,.25,1);
}
.col-block-add:hover { background:rgba(255,255,255,0.42); border-color:rgba(var(--accent-rgb),0.45); }
.col-mode-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

.describe-grid { display:flex; flex-direction:column; gap:18px; }
.describe-card {
  display:flex; flex-direction:column; gap:10px;
  transition:transform .38s cubic-bezier(.25,.1,.25,1);
}
.describe-card:hover { transform:translateY(-3px); }
.describe-card .match-card-img-wrap {
  border-radius:var(--r-lg); overflow:hidden; border:1.5px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 20px rgba(26,34,51,0.1);
}
.describe-card .match-card-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.25,.1,.25,1); }
.describe-card:hover .match-card-img { transform:scale(1.05); }
.describe-input {
  width:100%; border:none; outline:none; resize:none; overflow:hidden;
  background:rgba(235,240,248,0.72); border-radius:var(--r-xl);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:14px 20px; font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; line-height:1.5;
  color:var(--text);
  box-shadow:0 2px 12px rgba(26,34,51,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  border:1.5px solid rgba(255,255,255,0.7);
  transition:height .42s var(--dc-ease, cubic-bezier(.42,0,.18,1)), box-shadow .25s, border-color .25s, background .25s;
  min-height:54px;
}
.describe-input:focus { border-color:rgba(var(--accent-rgb),0.55); box-shadow:0 4px 18px rgba(var(--accent-rgb),0.16), inset 0 1px 0 rgba(255,255,255,0.7); background:rgba(240,244,251,0.85); }
.describe-input::placeholder { color:rgba(26,34,51,0.32); font-family:'Coolvetica','DM Sans',sans-serif; letter-spacing:.3px; }
@media (min-width:700px) {
  .describe-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
}

.translate-list { display:flex; flex-direction:column; gap:18px; }
.translate-card { display:flex; flex-direction:column; gap:10px; }
.translate-sentence {
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; line-height:1.5;
  color:var(--text); background:rgba(255,255,255,0.5); border:1.5px solid rgba(255,255,255,0.6);
  border-radius:var(--r-xl); padding:14px 20px; box-shadow:0 2px 12px rgba(26,34,51,0.06);
}
.w-chip[draggable] { cursor:grab; }
.w-chip.dragging { opacity:.4; }

.img-gallery-outer {
  position:relative;                 
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 4px 24px rgba(26,34,51,0.1);
  transition:transform .42s cubic-bezier(.25,.1,.25,1), box-shadow .38s;
  cursor:default;
}
.img-gallery-outer:hover { transform:translateY(-5px) scale(1.012); box-shadow:0 18px 44px rgba(26,34,51,0.16); }
.img-gallery-wrap {
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#1a2233; transition:aspect-ratio .32s cubic-bezier(.25,.1,.25,1);
}

.img-gallery-track {
  display:flex; height:100%; width:100%;
  transition:transform .45s cubic-bezier(.25,.1,.25,1);
  will-change:transform;
}
.img-gallery-slide {
  flex-shrink:0; width:100%; height:100%; position:relative;
}
.img-gallery-slide img {
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
}
.img-gallery-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 18px 16px;
  background:linear-gradient(to top, rgba(15,20,35,0.72) 0%, transparent 100%);
  color:#fff; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:400;
  line-height:1.4; letter-spacing:.1px;
  pointer-events:none;
}
.img-gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.80); backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(26,34,51,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--text); z-index:10;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
  opacity:0; 
}

.ig-lado { position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  padding:var(--dc-sp-20) var(--dc-sp-24); margin:0; opacity:0;
  text-shadow:var(--dc-shadow-text-strong); }
.ig-lado.prev { left:var(--dc-sp-6); }
.ig-lado.next { right:var(--dc-sp-6); }
.img-gallery-outer:hover .ig-lado { opacity:.72; }
.ig-lado:hover { opacity:1; transform:translateY(-50%) scale(1.06); }
.ig-lado:active { transform:translateY(-50%) scale(.98); }
.ig-lado:disabled { opacity:0 !important; pointer-events:none; }

@media (hover:none) { .ig-lado { opacity:.7; } }
.img-gallery-outer:hover .img-gallery-arrow { opacity:0.88; }
.img-gallery-arrow:hover { opacity:1 !important; transform:translateY(-50%) scale(1.12); background:#fff; }
.img-gallery-arrow:active { transform:translateY(-50%) scale(.92) !important; }
.img-gallery-arrow.prev { left:10px; }
.img-gallery-arrow.next { right:10px; }
.img-gallery-arrow:disabled { opacity:0 !important; cursor:default; pointer-events:none; }

.img-gallery-progress {
  width:min(200px,64%); height:5px; margin:12px auto 4px;
  border-radius:99px; background:rgba(26,34,51,0.14); overflow:hidden;
}
.img-gallery-progress-fill {
  height:100%; border-radius:99px; background:var(--text);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

.img-gallery-crop-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); z-index:5;
  width:52px; height:52px; border-radius:var(--r-lg); border:none; cursor:pointer;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px);
  color:rgba(58,72,98,0.9); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 16px rgba(26,34,51,0.18);
}
.gallery-slide-img-area:hover .img-gallery-crop-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }
.img-gallery-crop-btn:hover { background:#fff; color:var(--accent); transform:translate(-50%,-50%) scale(1.06); }
@media (hover:none) { .img-gallery-crop-btn { opacity:1; transform:translate(-50%,-50%) scale(1); } }

.gallery-editor-slides { display:flex; flex-direction:column; gap:10px; }
.gallery-slide-card {
  background:rgba(255,255,255,0.45); border:1.5px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
}
.gallery-slide-img-area {
  width:100%; aspect-ratio:16/9; background:#1a2233;
  position:relative; display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden; transition:aspect-ratio .32s cubic-bezier(.25,.1,.25,1);
}
.gallery-slide-img-area img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-slide-footer { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.gallery-slide-caption-input {
  flex:1; background:rgba(255,255,255,0.6); border:1px solid var(--border);
  border-radius:var(--r-xs); padding:7px 11px; font-size:13px; font-family:'DM Sans',sans-serif;
  color:var(--text); outline:none; transition:border-color .18s;
}
.gallery-slide-caption-input:focus { border-color:var(--accent); }
.gallery-slide-caption-input::placeholder { color:var(--text3); }
#modal-crop { z-index:1100; }
#crop-stage {
  position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-lg);
  overflow:hidden; background:#1a2233; touch-action:none; cursor:grab;
  user-select:none;
}
#crop-stage:active { cursor:grabbing; }
#crop-img {
  position:absolute; top:0; left:0; transform-origin:0 0;
  pointer-events:none; -webkit-user-drag:none; user-drag:none;
}
#crop-frame {
  position:absolute; inset:0; pointer-events:none;
  border:2px solid rgba(255,255,255,0.85); border-radius:var(--r-lg);
}

.wa-line { font-size:17px; line-height:2.6; margin-bottom:2px; font-family:'Canela Text','DM Sans',sans-serif; letter-spacing:.2px; }
.wa-hint { font-style:italic; color:var(--text3); font-size:13px; }
.wa-input {
  display:inline-block; height:34px; border-radius:var(--r-pill); padding:0 14px;
  border:1.5px solid rgba(255,255,255,0.7); background:rgba(235,240,248,0.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:16px; font-weight:400; font-family:'Coolvetica','DM Sans',sans-serif; letter-spacing:.3px;
  color:var(--text); outline:none; vertical-align:middle;
  transition:width .28s cubic-bezier(.25,.1,.25,1), border-color .38s cubic-bezier(.25,.1,.25,1), background .38s cubic-bezier(.25,.1,.25,1), box-shadow .38s cubic-bezier(.25,.1,.25,1);
  min-width:90px; text-align:center; box-shadow:0 1px 4px rgba(26,34,51,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  margin:0 3px;
}
.wa-input:focus { border-color:rgba(var(--accent-rgb),0.55); background:rgba(240,244,251,0.88); box-shadow:0 2px 10px rgba(var(--accent-rgb),0.15), inset 0 1px 0 rgba(255,255,255,0.7); }
.wa-input.ok  { border-color:#22c55e; background:rgba(34,197,94,0.1); color:#16a34a; }
.wa-input.bad { border-color:var(--danger); background:rgba(var(--danger-rgb),0.08); color:var(--danger); animation:shake .28s; }

.match-editor-bank { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:rgba(255,255,255,0.35); border-radius:var(--r-sm); min-height:38px; margin-bottom:14px; border:1px solid var(--border-lo); }

.ratio-picker { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.ratio-btn { padding:7px 14px; border-radius:var(--r-pill); border:1.5px solid var(--border-lo); background:rgba(255,255,255,0.5); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s cubic-bezier(.25,.1,.25,1); }
.ratio-btn:hover { background:rgba(255,255,255,0.85); }
.ratio-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
.match-bank-chip { padding:4px 12px; border-radius:var(--r-xs); font-size:13px; font-weight:600; background:var(--white); border:1px solid var(--border-lo); color:var(--text2); }
.match-pair-card { background:rgba(255,255,255,0.45); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:10px; }
.match-pair-img-area {
  width:100%; aspect-ratio:4/3; background:rgba(255,255,255,0.2); position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-bottom:1px solid var(--border-lo); overflow:hidden;
}
.match-pair-img-area img { width:100%; height:100%; object-fit:cover; display:block; }
.match-pair-img-placeholder { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text3); }
.match-pair-img-placeholder span { font-size:26px; }
.match-pair-img-placeholder small { font-size:11px; font-weight:600; }
.match-pair-img-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.pair-crop-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); z-index:3;
  width:52px; height:52px; border-radius:var(--r-lg); border:none; cursor:pointer;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px);
  color:rgba(58,72,98,0.9); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 16px rgba(26,34,51,0.18);
}
.match-pair-img-area:hover .pair-crop-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }
.pair-crop-btn:hover { background:#fff; color:var(--accent); transform:translate(-50%,-50%) scale(1.06); }

@media (hover:none) { .pair-crop-btn { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.match-pair-footer { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.match-pair-footer .f-input { margin-bottom:0; flex:1; }

.pro-textarea {
  width:100%; min-height:160px; resize:vertical;
  background:rgba(255,255,255,0.6); border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:12px; font-size:14px; line-height:1.8;
  font-family:'DM Sans',sans-serif; color:var(--text); outline:none; transition:border-color .18s;
}
.pro-textarea:focus { border-color:var(--accent); background:rgba(255,255,255,0.8); }
.pro-syntax-hint { font-size:11px; color:var(--text3); line-height:1.6; margin:6px 0 10px; background:rgba(var(--accent-rgb),0.06); border-radius:var(--r-xs); padding:8px 10px; }
.pro-syntax-hint code { background:rgba(var(--accent-rgb),0.12); border-radius:4px; padding:1px 5px; font-size:11px; }
.pro-preview-label { font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text3); margin:12px 0 6px; }
.pro-preview { background:var(--glass-md); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px; min-height:48px; }

.aula-tabs {
  display:flex; gap:0; padding:0 18px 0; flex-shrink:0;
  border-bottom:1px solid rgba(26,34,51,0.08);
  background:rgba(255,255,255,0.12); backdrop-filter:blur(16px);
}
.aula-tab {
  padding:12px 20px; font-size:13px; font-weight:600; letter-spacing:.2px;
  background:transparent; border:none; cursor:pointer; color:var(--text3);
  position:relative; transition:color .2s; font-family:'DM Sans',sans-serif;
}
.aula-tab::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--accent); border-radius:var(--r-pill); transition:width .22s cubic-bezier(.34,1.2,.64,1);
}
.aula-tab.active { color:var(--text); }
.aula-tab.active::after { width:70%; }

.aula-tabs-pill { gap:6px; border-bottom:none; background:transparent; backdrop-filter:none; padding:10px 18px 14px; }
.aula-tabs-pill .aula-tab {
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.2px;
  padding:9px 20px; border-radius:var(--r-pill);
}
.aula-tabs-pill .aula-tab::after { display:none; }
.aula-tabs-pill .aula-tab {
  transition:transform .12s ease;
}
.aula-tabs-pill .aula-tab:active { transform:scale(.94); }
.aula-tabs-pill .aula-tab.active {
  background:linear-gradient(90deg,#cfd3d6,#939eb3);
  border:none; color:#fff;
  box-shadow:0 8px 22px rgba(20,30,45,.32);
}

#screen-student > .classrooms-header,
.aula-tabs-pill.session-tabs,
.progreso-menu,
.ajustes-menu {
  background:linear-gradient(100deg, #d0d5d7 0%, #b3bdc9 45%, #8d9cb4 100%);
}
.progreso-menu, .ajustes-menu { border-radius:0 0 26px 26px; }
#screen-student #student-detail-name { color:#fff; }
.aula-tabs-pill .aula-tab { color:#fff; }

.ajustes-menu { padding:8px 20px 40px; display:flex; flex-direction:column; }
@media (min-width:600px) { .ajustes-menu { padding:8px 32px 40px; } }
.ajustes-menu-row {
  width:100%; text-align:left; background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.28);
  cursor:pointer; font-family:'Coolvetica','DM Sans',sans-serif; font-size:21px; font-weight:400; letter-spacing:.2px;
  color:#fff; padding:18px 2px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ajustes-menu-row.disabled { color:rgba(255,255,255,0.65); cursor:default; }
.ajustes-menu-row.open { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.ajustes-soon { font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--text3); background:rgba(255,255,255,0.65); padding:4px 10px; border-radius:var(--r-pill); }
.ajustes-menu-detail .assign-section:first-child { padding-top:6px; }

#ajustes-row-pw { font-size:28px; }

.progreso-menu { padding:8px 20px 0; display:flex; flex-direction:column; }
@media (min-width:600px) { .progreso-menu { padding:8px 32px 0; } }
.progreso-menu .ajustes-menu-row:first-child { font-size:32px; }
.progreso-pct { display:none; }
.progreso-slider-wrap {
  padding:34px 24px 14px; text-align:center;
  background:linear-gradient(100deg, #d0d5d7 0%, #b3bdc9 45%, #8d9cb4 100%); border-radius:0 0 26px 26px;
}
.progreso-slider-label { font-family:'Coolvetica','DM Sans',sans-serif; font-size:26px; font-weight:400; margin-bottom:20px; color:#fff; }
.progreso-slider-num-pill {
  display:inline-block; font-family:'Coolvetica','DM Sans',sans-serif; font-size:19px; font-weight:400;
  background:var(--button-fill); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate));
  border:1px solid var(--button-border); border-radius:var(--r-pill); padding:10px 24px; margin-bottom:16px;
  box-shadow:0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.progreso-slider-track { position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,0.28); margin:0 auto; max-width:520px; }
.progreso-slider-fill { position:absolute; left:0; top:0; height:100%; border-radius:99px; background:#fff; transition:width .3s; }
.progreso-slider-ends { display:flex; justify-content:space-between; max-width:520px; margin:8px auto 0; font-size:13px; color:rgba(255,255,255,0.85); font-family:'Coolvetica','DM Sans',sans-serif; }
.session-tabs {
  background:var(--tab-bar-fill); backdrop-filter:blur(var(--tab-bar-blur));
  border-bottom:1px solid var(--tab-bar-border); border-radius:var(--tab-bar-radius);
  box-shadow:0 var(--tab-bar-shadow-y) var(--tab-bar-shadow-blur) rgba(26,34,51,var(--tab-bar-shadow-opacity));
  padding-left:var(--tab-bar-padding-x); padding-right:var(--tab-bar-padding-x);
}
.session-tabs .aula-tab { padding-top:var(--tab-bar-padding-y); padding-bottom:var(--tab-bar-padding-y); font-size:var(--tab-bar-font-size); }
.live-refresh-hint { font-size:10px; font-weight:400; color:var(--text3); }

.live-ex-grid {
  display:flex; flex-direction:column; gap:6px;
}
.live-ex-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.55);
  border-radius:var(--r-md); cursor:pointer; transition:all .18s;
  backdrop-filter:blur(12px);
}
.live-ex-item:hover { background:rgba(255,255,255,0.55); transform:translateX(2px); }
.live-ex-item.is-focused {
  border-color:var(--accent); background:rgba(var(--accent-rgb),0.1);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.2);
}
.live-ex-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.live-ex-dot.done { background:var(--accent2); }
.live-ex-dot.active { background:var(--accent); animation:livePulse 1.4s ease-in-out infinite; }
.live-ex-dot.pending { background:rgba(26,34,51,0.2); }
.live-ex-label { flex:1; font-size:13px; font-weight:600; }
.live-ex-status-text { font-size:12px; color:var(--text3); }
.live-ex-focus-btn {
  width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer;
  background:rgba(var(--accent-rgb),0.1); color:var(--accent); font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all .18s;
}
.live-ex-focus-btn:hover { background:var(--accent); color:#fff; }
.live-ex-focus-btn.focused { background:var(--accent); color:#fff; }
.live-ex-reset-btn {
  width:28px; height:28px; border-radius:var(--r-xs); border:none; cursor:pointer;
  background:rgba(var(--danger-rgb),0.08); color:var(--danger); font-size:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all .18s;
}
.live-ex-reset-btn:hover { background:rgba(var(--danger-rgb),0.18); }
.live-student-online {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(var(--accent2-rgb),0.1); border:1px solid rgba(var(--accent2-rgb),0.2);
  border-radius:var(--r-sm); font-size:12px; font-weight:600; color:var(--accent2);
  margin-bottom:12px;
}
.live-student-offline {
  padding:8px 12px; background:rgba(26,34,51,0.05); border-radius:var(--r-sm);
  font-size:12px; color:var(--text3); margin-bottom:12px;
}

.ex-wysiwyg.ex-teacher-focus {
  border-color:var(--danger) !important;
  box-shadow:0 0 0 3px rgba(var(--danger-rgb),0.25), 0 4px 20px rgba(26,34,51,0.08) !important;
  animation:focusPulse 1.2s ease-in-out 3 forwards;
}
@keyframes focusPulse {
  0%   { box-shadow:0 0 0 3px rgba(var(--danger-rgb),0.25); border-color:var(--danger); }
  50%  { box-shadow:0 0 0 10px rgba(var(--danger-rgb),0.08); border-color:rgba(var(--danger-rgb),0.8); }
  100% { box-shadow:0 0 0 3px rgba(var(--danger-rgb),0.25); border-color:var(--danger); }
}

.ex-reset-own-btn {
  display:flex; align-items:center; gap:5px; padding:6px 14px;
  border-radius:var(--r-pill); border:1px solid rgba(26,34,51,0.12);
  background:rgba(255,255,255,0.4); color:var(--text3); cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600;
  transition:all .2s; margin-left:8px;
}
.ex-reset-own-btn:hover { background:rgba(255,255,255,0.7); color:var(--text); }

#exercises-container {
  max-width:720px; margin:0 auto; padding:0 16px;
}
@media (min-width:600px) { #exercises-container { padding:0 24px; } }

#live-view-content {
  max-width:720px; margin:0 auto;
}
#aula-panel-clase > div { padding:16px 16px 0; }
@media (min-width:600px) { #aula-panel-clase > div { padding:16px 24px 0; } }

.live-lesson-block {
  background:rgba(255,255,255,0.28); border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--r); margin-bottom:14px;
  backdrop-filter:blur(16px); box-shadow:0 2px 12px rgba(26,34,51,0.06);
  transition:border-color .2s, box-shadow .2s;
}

.live-lesson-block > .live-block-header { border-radius:var(--r) var(--r) 0 0; }
.live-lesson-block.live-focused {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.2), 0 4px 20px rgba(26,34,51,0.1) !important;
}
.live-lesson-block.live-done {
  opacity:0.75;
}
.live-block-header {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.25);
}
.live-block-type { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); flex:1; }
.live-block-status { font-size:11px; font-weight:600; color:var(--text2); }
.live-block-body { padding:14px 16px; }

.pap-btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 14px; border-radius:99px; font-size:13px; color:var(--text2);
  background:var(--glass-md); border:1px solid var(--border); font-family:inherit;
  transition:background .2s; }
.pap-btn:hover { background:var(--glass-hi); }
.pap-list { margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.pap-row { display:flex; align-items:center; gap:11px; padding:9px 11px;
  border-radius:14px; background:var(--glass-md); border:1px solid var(--border); }
.pap-info { flex:1; min-width:0; }
.pap-fecha { font-family:'Coolvetica','DM Sans',sans-serif; font-size:15px; letter-spacing:.2px; }
.pap-que { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pap-act { border:none; background:none; cursor:pointer; font:inherit; font-size:13px;
  padding:5px 10px; border-radius:99px; color:var(--accent); white-space:nowrap; }
.pap-act:hover { background:rgba(58,123,255,0.12); }
.pap-act.danger { color:var(--danger); }
.pap-act.danger:hover { background:rgba(255,77,94,0.12); }

.clases-dia { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.clase-dia-pill { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 8px 5px 12px; border-radius:99px; font-size:13px; color:var(--text2);
  background:var(--glass-md); border:1px solid var(--border); transition:background .2s, color .2s; }
.clase-dia-pill:hover { background:var(--glass-hi); }
.clase-dia-pill.active { background:var(--text); color:#fff; border-color:transparent; }
.clase-dia-x { border:none; background:none; cursor:pointer; color:inherit; opacity:.5;
  font-size:11px; line-height:1; padding:3px; border-radius:99px; }
.clase-dia-x:hover { opacity:1; }

.continuar-hoy-btn { margin-left:10px; padding:5px 12px; border-radius:99px; cursor:pointer;
  font-size:13px; font-family:inherit; color:var(--accent);
  background:rgba(var(--accent-rgb),0.10); border:1px solid rgba(var(--accent-rgb),0.28);
  transition:background .2s, transform .2s cubic-bezier(.25,.1,.25,1); }
.continuar-hoy-btn:hover { background:rgba(var(--accent-rgb),0.18); }
.continuar-hoy-btn:active { transform:scale(.96); }

.otra-clase-btn {
  display:flex; align-items:center; gap:8px; position:relative;
  padding:10px 20px; border-radius:var(--button-radius); border:none; cursor:pointer;
  background:var(--button-fill); border:1px solid var(--button-border);
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:var(--button-font-size); letter-spacing:.3px;
  color:var(--button-text); backdrop-filter:blur(var(--button-blur)) saturate(var(--button-saturate)); flex-shrink:0;
  transition:all .38s cubic-bezier(.25,.1,.25,1);
  box-shadow:
    inset 0 0 var(--button-inset-blur) rgba(16,22,34,var(--button-inset-opacity)),
    inset 0 calc(-1 * var(--button-inset-bottom-y)) var(--button-inset-bottom-blur) rgba(16,22,34,var(--button-inset-bottom-opacity)),
    0 var(--button-shadow-y) var(--button-shadow-blur) var(--button-shadow);
}
.otra-clase-btn:hover { background:var(--button-hover-fill); transform:translateY(calc(-1px - var(--button-hover-lift))); }
.otra-clase-btn:active { transform:scale(.96); }

.topic-picker-grid {
  display:flex; flex-direction:column; gap:8px;
}
.topic-picker-item {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:rgba(255,255,255,0.45); border:1.5px solid rgba(255,255,255,0.6);
  border-radius:var(--r-lg); cursor:pointer; transition:all .2s;
}
.topic-picker-item:hover { background:rgba(255,255,255,0.75); transform:translateX(3px); }
.topic-picker-item.current { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); }
.topic-picker-img { width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.topic-picker-name { font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.3px; flex:1; }

.topic-picker-check { display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex-shrink:0; }

.assign-section-title {
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400;
  letter-spacing:.4px; color:var(--text2); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}

#screen-classrooms { background:var(--bg); }
.classrooms-header { padding:18px 24px 14px; flex-shrink:0; display:flex; align-items:center; gap:12px; }
@media (min-width:600px) { .classrooms-header { padding:20px 32px 16px; } }

@media (min-width:820px) {
  .classrooms-header { padding-left:calc(50% - 344px); padding-right:calc(50% - 344px); }
  .aula-tabs { padding-left:calc(50% - 344px); padding-right:calc(50% - 344px); }
}
.classrooms-title { font-family:'Coolvetica','DM Sans',sans-serif; font-size:22px; font-weight:400; flex:1; letter-spacing:.3px; }

#student-detail-name { font-size:42px; letter-spacing:.3px; }
.student-list { padding:0; display:flex; flex-direction:column; }
.estudiantes-body { flex:1; min-height:0; display:flex; overflow:hidden; }

.estudiantes-centro {
  display:flex; align-items:stretch; gap:var(--dc-sp-40);
  width:100%; max-width:var(--dc-w-row-ajustes); margin:0 auto; min-height:0;
}
.estudiantes-centro > .scroll { flex:1; min-width:0; padding:var(--dc-sp-24) 0; }

.active-lesson-banner {
  margin:0 20px 20px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.18) 0%, rgba(var(--accent2-rgb),0.12) 100%);
  border:1.5px solid rgba(var(--accent-rgb),0.3);
  border-radius:var(--r-xl); padding:20px;
  animation:fadeUp .5s cubic-bezier(.25,.1,.25,1) both;
  backdrop-filter:blur(20px);
}
.active-lesson-label {
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.active-lesson-dot {
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:livePulse 1.4s ease-in-out infinite;
}
.active-lesson-title {
  font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:26px; font-weight:400; letter-spacing:.3px;
  color:var(--text); margin-bottom:6px; line-height:1.1;
}
.active-lesson-sub {
  font-size:12px; color:var(--text3); margin-bottom:16px;
}
.active-lesson-img {
  width:100%; height:140px; object-fit:cover; border-radius:var(--r-lg);
  margin-bottom:16px; display:block;
}
.active-lesson-btn {
  width:100%; padding:14px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:var(--accent); color:#fff;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:18px; font-weight:400;
  letter-spacing:.5px; transition:all .38s cubic-bezier(.25,.1,.25,1);
  box-shadow:0 4px 20px rgba(var(--accent-rgb),0.35);
}
.active-lesson-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(var(--accent-rgb),0.4); }
.active-lesson-btn:active { transform:scale(.97); }
.active-lesson-progress {
  display:flex; align-items:center; gap:10px; margin-top:14px;
}
.active-lesson-progress-bar {
  flex:1; height:5px; background:rgba(26,34,51,0.12); border-radius:var(--r-pill); overflow:hidden;
}
.active-lesson-progress-fill {
  height:100%; background:var(--accent2); border-radius:var(--r-pill); transition:width .4s cubic-bezier(.34,1.2,.64,1);
}
.active-lesson-progress-pct {
  font-size:11px; font-weight:700; color:var(--accent2); min-width:30px; text-align:right;
}

.set-lesson-btn {
  padding:6px 14px; border-radius:var(--r-pill); border:none; cursor:pointer;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:13px; letter-spacing:.3px;
  background:rgba(var(--accent-rgb),0.12); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),0.25);
  transition:all .22s; white-space:nowrap; flex-shrink:0;
}
.set-lesson-btn:hover { background:rgba(var(--accent-rgb),0.2); }
.set-lesson-btn.active-now {
  background:var(--accent); color:#fff;
  box-shadow:0 2px 10px rgba(var(--accent-rgb),0.35);
  border-color:transparent;
}
.set-lesson-btn.clear-btn {
  background:rgba(var(--danger-rgb),0.08); color:var(--danger);
  border-color:rgba(var(--danger-rgb),0.2);
}
.set-lesson-btn.clear-btn:hover { background:rgba(var(--danger-rgb),0.15); }
.active-lesson-row {
  background:rgba(var(--accent-rgb),0.07); border:1.5px solid rgba(var(--accent-rgb),0.2);
  border-radius:var(--r-lg); padding:12px 14px; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.active-lesson-row-icon { font-size:20px; flex-shrink:0; }
.active-lesson-row-info { flex:1; }
.active-lesson-row-name {
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:15px; font-weight:400;
  letter-spacing:.3px; color:var(--text);
}
.active-lesson-row-hint { font-size:11px; color:var(--accent); margin-top:2px; font-weight:600; }

.reset-exercise-btn {
  padding:7px 16px; border-radius:var(--r-pill); border:1px solid rgba(26,34,51,0.15);
  background:rgba(255,255,255,0.4); color:var(--text2); cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
  transition:all .25s; margin-left:auto;
}
.reset-exercise-btn:hover { background:rgba(255,255,255,0.7); }

.assign-section { padding:16px 18px; }
.assign-section-title { font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.4px; color:var(--text2); margin-bottom:12px; }
.assign-topic-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--glass-md); border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:8px; backdrop-filter:blur(16px);
}
.assign-topic-img { width:36px; height:36px; border-radius:var(--r-xs); object-fit:cover; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.assign-topic-name { flex:1; font-size:14px; font-weight:600; }
.toggle-switch { position:relative; width:44px; height:26px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; border-radius:var(--r-pill); cursor:pointer;
  background:rgba(26,34,51,0.15); transition:background .2s;
}
.toggle-slider:before {
  content:''; position:absolute; width:20px; height:20px; border-radius:50%;
  left:3px; top:3px; background:#fff; transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

.fav-list { padding:0 18px 20px; }
.fav-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:var(--r-sm); margin-bottom:6px; font-size:13px;
}
.fav-es { font-weight:700; color:var(--text); }
.fav-arrow { color:var(--text3); font-size:12px; }
.fav-ru { color:var(--accent); font-weight:600; }
.fav-del { margin-left:auto; background:none; border:none; cursor:pointer; font-size:14px; opacity:.4; }
.fav-del:hover { opacity:1; color:var(--danger); }

.translator-fab {
  position:fixed; bottom:28px; right:20px; z-index:400;
  height:42px; padding:0 20px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:rgba(26,34,51,0.85); backdrop-filter:blur(20px);
  color:#fff; font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:15px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(26,34,51,0.3);
  transition:all .38s cubic-bezier(.25,.1,.25,1);
}
.translator-fab:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,34,51,0.35); }
.translator-fab.hidden { display:none; }

.translator-panel {
  position:fixed; z-index:600;
  background:rgba(220,228,238,0.97); backdrop-filter:blur(30px);
  border:1px solid var(--border);
  display:flex; flex-direction:column;
  
  bottom:0; left:0; right:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -8px 40px rgba(26,34,51,0.2);
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.25,.1,.25,1);
  max-width:480px; margin:0 auto;
  max-height:80vh;
}
.translator-panel.open { transform:translateY(0); }

@media (min-width: 700px) {
  .translator-fab { display:none !important; }
  
  .translator-panel {
    left:auto; right:0; top:0; bottom:0;
    width:300px; max-width:300px; max-height:100vh; margin:0;
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    border-right:none;
    box-shadow:-4px 0 30px rgba(26,34,51,0.15);
    transform:translateX(100%);
    transition:transform .42s cubic-bezier(.25,.1,.25,1);
  }
  .translator-panel.open { transform:translateX(0); }
  .translator-handle { display:none; }
  
  .translator-desktop-toggle {
    position:static; height:36px; padding:0 16px; border-radius:var(--r-pill);
    background:rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.7);
    color:var(--text); cursor:pointer;
    font-family:'Coolvetica','DM Sans',sans-serif; font-size:15px; letter-spacing:.3px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(26,34,51,0.07); transition:all .38s cubic-bezier(.25,.1,.25,1);
    backdrop-filter:blur(16px);
  }
  .translator-desktop-toggle:hover { background:rgba(255,255,255,0.7); }
  .translator-desktop-toggle.hidden { display:none; }
  
  #screen-lesson.translator-open { padding-left:0; }
}
@media (max-width: 699px) {
  .translator-desktop-toggle { display:none !important; }
}
.translator-panel.open { transform:translateY(0); }
.translator-handle { width:40px; height:4px; background:rgba(26,34,51,0.2); border-radius:var(--r-pill); margin:12px auto 0; flex-shrink:0; }
.translator-head { padding:12px 18px 8px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.translator-head-title { font-family:'Coolvetica','DM Sans',sans-serif; font-size:18px; font-weight:400; letter-spacing:.4px; flex:1; }
.translator-close { width:28px; height:28px; border-radius:var(--r-xs); border:none; background:rgba(26,34,51,0.08); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.translator-body { padding:0 18px 8px; flex:1; overflow-y:auto; }
.translator-body::-webkit-scrollbar { display:none; }
.translator-input-row { display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; }
.translator-textarea {
  flex:1; min-height:60px; max-height:120px; resize:none; padding:10px 12px;
  background:rgba(255,255,255,0.7); border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:14px; font-family:'DM Sans',sans-serif; color:var(--text); outline:none;
  transition:border-color .18s; line-height:1.5;
}
.translator-textarea:focus { border-color:var(--accent); background:rgba(255,255,255,0.9); }
.translator-go-btn {
  width:42px; height:42px; border-radius:var(--r-md); border:none; background:var(--text);
  color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; transition:all .18s;
}
.translator-go-btn:hover { background:var(--accent); }
.translator-result {
  background:rgba(var(--accent-rgb),0.07); border:1px solid rgba(var(--accent-rgb),0.18);
  border-radius:var(--r-md); padding:12px 14px; font-size:14px; font-weight:600;
  color:var(--text); min-height:44px; margin-bottom:10px; line-height:1.5;
  display:none;
}
.translator-result.show { display:block; }
.translator-result-actions { display:flex; gap:8px; margin-bottom:12px; }
.translator-save-btn {
  flex:1; padding:10px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:rgba(var(--accent2-rgb),0.15); color:var(--accent2); font-size:16px;
  font-weight:400; font-family:'Coolvetica','DM Sans',sans-serif; letter-spacing:.3px; transition:all .38s cubic-bezier(.25,.1,.25,1);
}
.translator-save-btn:hover { background:rgba(var(--accent2-rgb),0.25); }
.translator-save-btn:disabled { opacity:.4; cursor:default; }
.translator-lang-toggle {
  padding:9px 14px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--glass); cursor:pointer; font-size:12px; font-weight:700;
  color:var(--text2); font-family:'DM Sans',sans-serif; transition:all .18s; white-space:nowrap;
}

#whisper-backdrop {
  position:fixed; inset:0; z-index:680;
  background:rgba(16,20,30,0); backdrop-filter:blur(0px);
  opacity:0; pointer-events:none;
  transition:opacity .6s ease, background .6s ease, backdrop-filter .6s ease;
}
#whisper-backdrop.show { opacity:1; background:rgba(16,20,30,0.5); backdrop-filter:blur(4px); }
#whisper-backdrop.interactive { pointer-events:auto; }

#whisper-stage {
  position:fixed; inset:0; z-index:690;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; pointer-events:none;
}
.whisper {
  max-width:min(560px, 86vw); padding:18px 24px;
  font-size:23px; line-height:1.42; font-family:'DM Sans',sans-serif; font-weight:500;
  border-radius:var(--r-xl); white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;
  box-shadow:0 18px 60px rgba(8,12,20,0.45); will-change:opacity, transform, filter;
}
.whisper.received { background:rgba(246,248,251,0.98); color:#1a2233; border-bottom-left-radius:9px; }
.whisper.sent { background:var(--accent); color:#fff; border-bottom-right-radius:9px; }
@keyframes whisperIn  { 0%{ opacity:0; transform:translateY(18px) scale(.9);  filter:blur(12px);} 100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0);} }
@keyframes whisperOut { 0%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0);} 100%{ opacity:0; transform:translateY(-26px) scale(1.06); filter:blur(16px);} }
.whisper.in  { animation:whisperIn .62s cubic-bezier(.2,.8,.2,1) both; }
.whisper.out { animation:whisperOut 1.2s cubic-bezier(.4,0,.6,1) both; }

#whisper-composer {
  position:fixed; inset:0; z-index:700;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
#whisper-composer.open { opacity:1; pointer-events:auto; }
.whisper-composer-inner {
  width:100%; max-width:620px;
  padding:26px 24px calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:16px;
  transform:translateY(24px); transition:transform .46s cubic-bezier(.2,.8,.2,1);
}
#whisper-composer.open .whisper-composer-inner { transform:translateY(0); }
.whisper-textarea {
  width:100%; resize:none; border:none; outline:none; background:transparent;
  color:#fff; font-family:'DM Sans',sans-serif; font-size:27px; line-height:1.38; font-weight:500;
  min-height:64px; max-height:42vh; caret-color:var(--accent);
  text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
.whisper-textarea::placeholder { color:rgba(255,255,255,0.42); font-weight:400; }
.whisper-composer-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.whisper-hint { font-size:12.5px; color:rgba(255,255,255,0.5); letter-spacing:.2px; }
.whisper-send {
  border:none; cursor:pointer; height:46px; padding:0 28px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:18px; letter-spacing:.4px; display:flex; align-items:center;
  box-shadow:0 6px 26px rgba(var(--accent-rgb),0.5); transition:transform .12s, opacity .15s;
}
.whisper-send:hover { transform:translateY(-2px); }
.whisper-send:active { transform:scale(.95); }
.whisper-send:disabled { opacity:.4; cursor:default; transform:none; box-shadow:none; }

.whisper-teacher-btn, .whisper-student-btn { white-space:nowrap; }
@media (max-width:699px) {
  
  .whisper-student-btn { justify-self:end; }
}

.fav-fab {
  position:fixed; bottom:28px; right:80px; z-index:400;
  height:42px; padding:0 20px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:rgba(var(--accent-rgb),0.85); backdrop-filter:blur(20px);
  color:#fff; font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:15px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 4px 20px rgba(var(--accent-rgb),0.35);
  transition:all .38s cubic-bezier(.25,.1,.25,1);
}
.fav-fab:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(var(--accent-rgb),0.4); }
.fav-fab.hidden { display:none !important; }

.board-fab {
  position:fixed; bottom:78px; right:20px; z-index:400;
  height:42px; padding:0 20px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(20px);
  color:var(--text); font-family:'Coolvetica','DM Sans',sans-serif;
  font-size:15px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(26,34,51,0.22);
  transition:all .38s cubic-bezier(.25,.1,.25,1);
}
.board-fab:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,34,51,0.28); }
.board-fab.hidden { display:none !important; }
@media(min-width:700px) { .board-fab { display:none !important; } }
@media(min-width:700px) {
  .fav-fab { position:relative; bottom:auto; right:auto; box-shadow:none; background:rgba(255,255,255,0.45); color:var(--text); border:1px solid rgba(255,255,255,0.7); backdrop-filter:blur(16px); }
  .fav-fab:hover { background:rgba(255,255,255,0.7); transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,34,51,0.08); }
  .fav-fab.hidden { display:none !important; }
  .lesson-toolbar { display:flex; gap:8px; }
}

@media(max-width:699px) {
  #lesson-toolbar { display:none !important; }
  .lesson-header-inner { grid-template-columns: auto 1fr auto; display:grid; align-items:center; gap:8px; }
  .lesson-title-bar { text-align:center; }
  .lesson-title-bar h2 { max-width:none; font-size:17px; }
  
  .fav-fab {
    bottom:84px; right:20px; width:48px; height:48px; padding:0; gap:0;
    font-size:0; border-radius:50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H5a2 2 0 0 0-2 2v14l7-5 7 5V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center;
  }
  .translator-fab {
    width:48px; height:48px; padding:0; border-radius:50%;
    font-size:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M2 10h16M10 2a14 14 0 0 1 0 16M10 2a14 14 0 0 0 0 16'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center;
  }
}
.fav-count-badge {
  position:absolute; top:-4px; right:-4px; width:18px; height:18px;
  background:var(--danger); border-radius:50%; font-size:10px; font-weight:700;
  color:#fff; display:flex; align-items:center; justify-content:center;
  display:none;
}
.fav-count-badge.show { display:flex; }
.live-topic-card {
  background:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--r-lg); padding:14px 16px; margin-bottom:10px;
}
.live-topic-name { font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; margin-bottom:10px; }
.live-last-seen { font-size:11px; color:var(--text3); margin-bottom:10px; }
.live-ex-row {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(255,255,255,0.4); border-radius:var(--r-sm); margin-bottom:6px;
  font-size:13px;
}
.live-ex-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.live-ex-status.done { background:var(--accent2); }
.live-ex-status.active { background:var(--accent); animation:livePulse 1.4s ease-in-out infinite; }
.live-ex-status.pending { background:rgba(26,34,51,0.2); }
.live-ex-name { flex:1; font-weight:600; }
.live-ex-answer { font-size:12px; color:var(--text3); font-family:'DM Mono',monospace; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-answers-detail { margin-top:6px; padding:8px 12px; background:rgba(var(--accent-rgb),0.05); border-radius:var(--r-xs); }
.live-answer-item { font-size:12px; color:var(--text2); padding:2px 0; display:flex; gap:6px; }
.live-answer-item span:first-child { color:var(--text3); }
.reset-progress-btn {
  padding:7px 16px; border-radius:var(--r-pill); border:1px solid rgba(var(--danger-rgb),0.3);
  background:rgba(var(--danger-rgb),0.07); color:var(--danger); cursor:pointer;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:13px; letter-spacing:.3px;
  transition:all .25s; margin-top:8px;
}
.reset-progress-btn:hover { background:rgba(var(--danger-rgb),0.14); }

.so-line { display:flex; flex-wrap:wrap; align-items:center; gap:4px 5px; font-size:17px; line-height:2.6; margin-bottom:4px; font-family:'Canela Text','DM Sans',sans-serif; letter-spacing:.2px; }
.so-select {
  height:34px; border-radius:var(--slot-radius); padding:0 28px 0 14px; border:1.5px solid var(--slot-border);
  background-color:var(--slot-fill); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-size:13px; font-weight:600;
  font-family:'DM Sans',sans-serif; color:var(--text); outline:none; cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a2233' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:all .38s cubic-bezier(.25,.1,.25,1); box-shadow:0 var(--slot-shadow-y) var(--slot-shadow-blur) rgba(26,34,51,var(--slot-shadow-opacity)), inset 0 1px 0 rgba(255,255,255,0.6);
}
.so-select:focus { border-color:rgba(var(--accent-rgb),0.55); box-shadow:0 2px 10px rgba(var(--accent-rgb),0.15), inset 0 1px 0 rgba(255,255,255,0.7); }
.so-select.ok  { border-color:#22c55e; background-color:rgba(34,197,94,0.08); color:#16a34a; }
.so-select.bad { border-color:var(--danger); background-color:rgba(var(--danger-rgb),0.06); animation:shake .28s; }
.so-hint { font-style:italic; color:var(--text3); font-size:13px; }

.fb-blank {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:80px; height:34px; border-radius:var(--r-xs); padding:0 10px;
  border:2px dashed rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.05);
  font-size:13px; font-weight:700; color:rgba(var(--accent-rgb),.7); cursor:pointer; transition:all .2s;
  user-select:none;
}
.fb-blank.filled { border-style:solid; border-color:var(--accent2); background:rgba(var(--accent2-rgb),0.1); color:var(--accent2); }
.fb-blank.ok { border-color:#22c55e; background:rgba(34,197,94,0.1); color:#22c55e; }
.fb-blank.bad { border-color:var(--danger); background:rgba(var(--danger-rgb),0.08); color:var(--danger); animation:shake .28s; }
.vocab-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flip-card { perspective:700px; cursor:pointer; height:120px; }
.flip-inner { position:relative; width:100%; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.flip-card.flipped .flip-inner { transform:rotateY(180deg); }
.flip-f, .flip-b { position:absolute; inset:0; border-radius:var(--r-md); backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; text-align:center; border:1px solid var(--border); backdrop-filter:blur(16px); }
.flip-f { background:var(--glass-md); }
.flip-b { background:rgba(var(--accent2-rgb),0.15); border-color:rgba(var(--accent2-rgb),0.4); transform:rotateY(180deg); }
.flip-em { font-size:26px; margin-bottom:5px; }
.flip-word { font-size:13px; font-weight:700; }
.flip-tr { font-size:13px; color:var(--accent2); font-weight:700; }
.flip-hint { font-size:10px; color:var(--text3); margin-top:3px; }
.check-row { padding:12px 16px; border-top:1px solid var(--border-lo); display:flex; justify-content:flex-end; }
.check-btn {
  padding:11px 26px; border-radius:var(--r-pill); border:none; cursor:pointer;
  font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.4px;
  background:var(--text); color:#fff;
  transition:all .38s cubic-bezier(.25,.1,.25,1);
  box-shadow:0 4px 16px rgba(26,34,51,0.22);
}
.check-btn:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(26,34,51,0.28); }
.check-btn:active { transform:scale(.96) !important; box-shadow:0 1px 4px rgba(26,34,51,0.15); }
.check-btn.next { background:var(--accent2); color:#fff; box-shadow:0 2px 8px rgba(var(--accent2-rgb),0.3); }
.check-btn.vocab-ok { background:var(--accent2); }
.result-banner {
  padding:14px 20px; font-size:17px; font-weight:400; text-align:center;
  font-family:'Coolvetica','DM Sans',sans-serif; letter-spacing:.3px;
  border-top:1px solid var(--border-lo); display:none;
  animation:fadeUp .35s cubic-bezier(.25,.1,.25,1) both;
}
.result-banner.ok  { background:rgba(34,197,94,0.12); color:#16a34a; display:block; }
.result-banner.bad { background:rgba(var(--danger-rgb),0.08); color:var(--danger); display:block; animation:shake .3s ease, fadeUp .2s ease; }
.add-ex-btn { width:auto; padding:12px 28px; border-radius:var(--r-pill); border:1.5px dashed rgba(26,34,51,0.2); background:rgba(255,255,255,0.2); cursor:pointer; font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.3px; color:var(--text3); display:flex; align-items:center; justify-content:center; gap:8px; transition:all .38s cubic-bezier(.25,.1,.25,1); margin:0 auto 24px; }
.add-ex-btn:hover { background:var(--glass); color:var(--text); border-color:rgba(26,34,51,0.4); }

.modal-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(15,20,35,0.45); backdrop-filter:blur(6px);
  align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.modal-overlay.open { display:flex; opacity:1; }
.modal-overlay.closing { opacity:0; }
.modal-overlay.closing .modal { animation:slideDown .32s cubic-bezier(.25,.1,.25,1) forwards; }
#modal-favs .modal {
  max-width:320px; height:100vh; max-height:100vh; border-radius:0;
  position:fixed; right:0; top:0; bottom:0; margin:0;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  animation:slideFromRight .45s cubic-bezier(.25,.1,.25,1);
}
#modal-favs.closing .modal { animation:slideToRight .32s cubic-bezier(.25,.1,.25,1) forwards; }
@media(max-width:600px){#modal-favs .modal{max-width:100%;height:auto;max-height:80vh;border-radius:var(--r-xl) var(--r-xl) 0 0;position:relative;}}
@keyframes slideFromRight { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideToRight { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(60px)} }
.modal {
  width:100%; max-width:560px; max-height:92vh;
  border-radius:var(--r-xl) var(--r-xl) 0 0; background:rgba(220,228,238,0.96);
  backdrop-filter:blur(30px); border:1px solid var(--border);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  animation:slideUp .45s cubic-bezier(.25,.1,.25,1);
}
@keyframes slideUp { from{opacity:0;transform:translateY(60px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes slideDown { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(50px) scale(.97)} }
.modal-handle { width:40px; height:4px; background:rgba(26,34,51,0.2); border-radius:var(--r-pill); margin:12px auto 0; flex-shrink:0; }
.modal-head { padding:14px 18px 10px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.modal-title { font-family:'Coolvetica','DM Sans',sans-serif; font-size:20px; font-weight:400; flex:1; letter-spacing:.3px; }
.modal-close { width:30px; height:30px; border-radius:var(--r-pill); border:none; background:rgba(26,34,51,0.08); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.modal-close:hover { background:rgba(26,34,51,0.14); transform:scale(1.08); }
.modal-close:active { transform:scale(.92); }
.modal-body { flex:1; overflow-y:auto; padding:0 18px 24px; }
.modal-body::-webkit-scrollbar { display:none; }
.modal-footer { padding:12px 18px 20px; display:flex; gap:8px; flex-shrink:0; border-top:1px solid var(--border-lo); }
.modal-btn { flex:1; padding:13px; border-radius:var(--r-pill); border:none; cursor:pointer; font-family:'Coolvetica','DM Sans',sans-serif; font-size:17px; font-weight:400; letter-spacing:.3px; transition:all .38s cubic-bezier(.25,.1,.25,1); }
.modal-btn.cancel { background:rgba(26,34,51,0.08); color:var(--text); }
.modal-btn.save { background:var(--text); color:#fff; box-shadow:0 2px 8px rgba(26,34,51,0.2); }
.modal-btn.save:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(26,34,51,0.25); }
.modal-btn.save:active { transform:scale(.97); }
.modal-btn.cancel:active { opacity:.7; }

.crear-ov {
  position:fixed; inset:0; z-index:1450; display:none; opacity:0;
  background:rgba(30,40,55,.14);
  -webkit-backdrop-filter:blur(34px) saturate(140%) brightness(1.10);
  backdrop-filter:blur(34px) saturate(140%) brightness(1.10);
  transition:opacity .30s cubic-bezier(.3,0,.2,1);
}
.crear-ov.show { opacity:1; }
.crear-ov.hide { opacity:0; transition-duration:.20s; }
.crear-marca {
  position:absolute; top:18px; left:26px; z-index:2;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400;
  font-size:30px; letter-spacing:.5px; line-height:1;
  color:#fff; cursor:pointer; text-shadow:0 16px 28px rgba(20,30,45,.6); user-select:none;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .crear-marca:hover { transform:scale(1.05); } }
.crear-marca:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.crear-cuerpo {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:0 var(--dc-sp-76);
}
.crear-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-140);
  color:var(--dc-ink); line-height:1.02; letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text-strong);
}
.crear-ayuda {
  margin-top:var(--dc-sp-24);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink-70);
}

.crear-input {
  margin-top:var(--dc-sp-16); width:100%;
  -webkit-appearance:none; appearance:none;
  background:transparent !important; background-image:none; box-shadow:none;
  border:none; outline:none; padding:var(--dc-sp-8) 0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); caret-color:var(--dc-ink);
}

.crear-input:-webkit-autofill,
.crear-input:-webkit-autofill:hover,
.crear-input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--dc-ink);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-in-out 0s;
}
.crear-input::placeholder { color:var(--dc-ink-70); text-shadow:none; }

.crear-error {
  display:none; margin-top:var(--dc-sp-24);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:#ffdde0; text-shadow:var(--dc-shadow-text);
}

.crear-opciones { margin-top:var(--dc-sp-40); }
.crear-opciones .opcion { font-size:var(--dc-fs-40); padding:var(--dc-sp-10) var(--dc-sp-24); text-transform:none; }
@media (any-hover: hover) { .crear-opciones .opcion:hover { font-size:var(--dc-fs-52); } }
.crear-ov.crear-esperando .crear-cuerpo { opacity:.55; pointer-events:none; transition:opacity var(--dc-t-salida) var(--dc-ease); }
@media (max-width:700px) { .crear-titulo { font-size:var(--dc-fs-80); } }

#elegir-ov .crear-cuerpo {
  justify-content:flex-start; padding-top:calc(90 * var(--dc-u)); overflow-y:auto;
}
#elegir-ov .crear-titulo { font-size:var(--dc-fs-100); }
#elegir-ov .crear-input { font-size:var(--dc-fs-50); max-width:calc(560 * var(--dc-u)); }
.filtros { display:flex; flex-wrap:wrap; gap:var(--dc-sp-34); margin-top:var(--dc-sp-24); }
.filtros .ent-op { font-size:var(--dc-fs-30); }
.filtros.filtros-secciones .ent-op { font-size:var(--dc-fs-30); opacity:.4; }
.filtros.filtros-secciones .ent-op.active { opacity:1; }
#elegir-ov .galeria { margin-top:var(--dc-sp-16); }

#elegir-ov .galeria { margin-left:calc(-1 * var(--dc-sp-76)); margin-right:calc(-1 * var(--dc-sp-76)); }
#elegir-ov .galeria-carril { --gal-w: calc(20vw * var(--dc-dens, 1)); }
@media (max-width:620px) { #elegir-ov .galeria-carril { --gal-w: 56vw; } }
#elegir-ov .riel-vacio { padding-left:0; padding-right:0; }

#elegir-ov .crear-cuerpo .filtros { transition:opacity var(--dc-t-lento) var(--dc-ease), max-height var(--dc-t-entrada) var(--dc-ease), margin var(--dc-t-entrada) var(--dc-ease), padding var(--dc-t-entrada) var(--dc-ease), filter var(--dc-t-entrada) var(--dc-ease); }
#elegir-ov .crear-cuerpo.elegir-buscando .filtros:not(.plegada) { opacity:.32; }
#elegir-ov #elegir-lista { position:relative; }

.aviso-ov {
  position:fixed; inset:0; z-index:2400; display:none; opacity:0;
  align-items:center; justify-content:center;
  padding:var(--dc-sp-60) var(--dc-sp-76);
  background:rgba(30,40,55,.14);
  
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  backdrop-filter:blur(26px) saturate(130%);
  transition:opacity .34s var(--dc-ease);
}
.aviso-ov.abierto { display:flex; }
.aviso-ov.show { opacity:1; }

.aviso-ov.solo-aviso { pointer-events:none; transition:opacity .42s var(--dc-ease) .08s; }

.aviso-caja {
  max-width:var(--dc-w-canvas); width:100%;
  transform:scale(.985); filter:blur(2px);
  transition:transform var(--dc-t-entrada) var(--dc-ease), filter var(--dc-t-entrada) var(--dc-ease);
}
.aviso-ov.show .aviso-caja { transform:none; filter:none; }
.aviso-frase {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--dc-fs-100); line-height:1.04; letter-spacing:var(--dc-tracking);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong);
  text-wrap:balance;
}
.aviso-ops { display:flex; gap:var(--dc-sp-64); margin-top:var(--dc-sp-60); }
.aviso-ops:empty { display:none; }

.aviso-op {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
  background:none; border:none; cursor:pointer;
  padding:var(--dc-sp-24) var(--dc-sp-36);
  margin:calc(var(--dc-sp-24) * -1) calc(var(--dc-sp-36) * -1);
  text-transform:lowercase; text-shadow:var(--dc-shadow-text-strong);
  transform-origin:left center;
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  .aviso-ops:has(.aviso-op:hover) .aviso-op:not(:hover) { opacity:.42; }
  .aviso-op:hover { transform:scale(1.08); }
}
.aviso-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

.aviso-op:focus { outline:none; }
@media (max-width:700px) {
  .aviso-frase { font-size:var(--dc-fs-60); }
  .aviso-op { font-size:var(--dc-fs-40); }
}

.ajustes-ov { overflow-y:auto; }
.ajustes-ov .crear-marca { position:fixed; }
.ajustes-cuerpo {
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:calc(140 * var(--dc-u)) var(--dc-sp-76) var(--dc-sp-72);
}
.ajustes-cuerpo .crear-titulo { margin-bottom:var(--dc-sp-48); }
.ajustes-cargando {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink-70);
}
.ajustes-card { padding:var(--dc-sp-24) 0; border-bottom:1px solid rgba(255,255,255,.14); }
.ajustes-card:first-child { padding-top:0; }
.ajustes-card-cabeza {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--dc-sp-16); flex-wrap:wrap;
}
.ajustes-card-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink);
}
.ajustes-card-ayuda {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink-70);
  margin-top:6px; max-width:calc(640 * var(--dc-u)); line-height:1.4;
}
.ajustes-card-estado { font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink-70); }
.ajustes-card-estado.ok { color:#a8e0b8; }
.ajustes-card-cuerpo { margin-top:var(--dc-sp-16); }
.ajustes-fila { display:flex; gap:var(--dc-sp-14); align-items:center; flex-wrap:wrap; }
.ajustes-btn {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  border-radius:99px; padding:8px 18px; cursor:pointer;
  transition:background .15s, transform .15s;
}
.ajustes-btn:hover { background:rgba(255,255,255,.18); transform:scale(1.03); }
.ajustes-btn:active { transform:scale(.96); }
.ajustes-btn.quitar { opacity:.7; }
.ajustes-input {
  flex:1; min-width:160px;
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  border-radius:10px; padding:9px 13px; outline:none;
}
.ajustes-input::placeholder { color:var(--dc-ink-70); }
.ajustes-input:focus { border-color:rgba(255,255,255,.5); }
.ajustes-resultado { margin-top:8px; font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink-70); }
@media (max-width:700px) { .ajustes-cuerpo { padding-top:calc(100 * var(--dc-u)); } }

@media (max-width:600px) {
  .design-panel { width:100%; max-width:100%; }
  .insp-section-body { grid-template-columns:1fr; }
}

.f-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); margin-bottom:5px; }
.f-input { width:100%; background:rgba(255,255,255,0.6); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); padding:10px 13px; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .18s; margin-bottom:12px; }
.f-input:focus { border-color:var(--accent); background:rgba(255,255,255,0.8); }
.f-input::placeholder { color:var(--text3); }
textarea.f-input { resize:vertical; min-height:64px; }

.dc-sel { position:relative; display:inline-block; width:100%; margin-bottom:12px; }
.dc-sel-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(127,140,160,.14); border:1px solid rgba(127,140,160,.30);
  border-radius:10px; padding:10px 13px; cursor:pointer;
  font-family:inherit; font-size:14px; color:inherit; text-align:left;
  transition:background .15s, border-color .15s;
}
.dc-sel-btn:hover { background:rgba(127,140,160,.22); }
.dc-sel-txt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-sel-car { opacity:.6; font-size:11px; flex:none; }
.dc-sel-list {
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1500;
  background:rgba(245,248,252,.98); border-radius:12px;
  box-shadow:0 12px 32px rgba(20,30,45,.30); border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  max-height:260px; overflow-y:auto; padding:6px;
}
.dc-sel-op {
  display:block; width:100%; text-align:left; background:none; border:none; border-radius:8px;
  padding:9px 11px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13.5px; color:#1a2233;
  transition:background .12s;
}
.dc-sel-op:hover { background:rgba(58,123,255,.10); }
.dc-sel-op.active { background:rgba(58,123,255,.14); font-weight:600; }

.dc-sel.dc-sel-grande .dc-sel-btn {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  border-radius:calc(20 * var(--dc-u)); padding:calc(14 * var(--dc-u)) calc(20 * var(--dc-u));
}
.dc-sel.dc-sel-grande .dc-sel-btn:hover { background:rgba(255,255,255,.16); }
.dc-sel.dc-sel-grande .dc-sel-car { font-size:var(--dc-fs-22); }
.img-upload { width:100%; border-radius:var(--r-md); border:2px dashed var(--border); background:rgba(255,255,255,0.3); padding:22px; text-align:center; cursor:pointer; transition:background .18s; margin-bottom:12px; position:relative; overflow:hidden; }
.img-upload:hover { background:rgba(255,255,255,0.5); }
.img-upload input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.img-upload-preview { width:100%; height:120px; object-fit:cover; border-radius:var(--r-xs); display:none; }

.gslide-status { position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 9px; font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:600; color:#fff; letter-spacing:.01em; }
.gslide-status-up  { background:rgba(20,20,25,.72); backdrop-filter:blur(6px); }
.gslide-status-err { background:rgba(196,48,48,.92); flex-wrap:wrap; }
.gslide-spinner { width:12px; height:12px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:gsspin .7s linear infinite; display:inline-block; }
@keyframes gsspin { to { transform:rotate(360deg); } }
.gslide-retry { border:none; background:#fff; color:#c43030; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; cursor:pointer; }
.gslide-retry:hover { background:#ffecec; }
.gslide-failed { outline:2px solid rgba(196,48,48,.85); outline-offset:-2px; border-radius:12px; }
.img-upload-icon { font-size:28px; margin-bottom:6px; }
.img-upload-text { font-size:13px; font-weight:600; color:var(--text3); }
.pair-row { display:flex; gap:7px; align-items:center; margin-bottom:8px; }
.pair-row .f-input { margin-bottom:0; }
.pair-del { width:30px; height:30px; flex-shrink:0; border-radius:var(--r-xs); border:none; background:rgba(var(--danger-rgb),0.1); color:var(--danger); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.pair-move { display:flex; gap:3px; flex-shrink:0; }
.pair-move-btn { width:26px; height:30px; border-radius:var(--r-xs); border:none; background:rgba(26,34,51,0.07); color:var(--text2); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .15s,transform .1s; }
.pair-move-btn:hover { background:rgba(26,34,51,0.14); }
.pair-move-btn:active { transform:scale(0.92); }
.add-pair { width:100%; padding:8px; border-radius:var(--r-sm); border:1px dashed var(--border); background:transparent; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; color:var(--accent); margin-top:4px; transition:background .15s; }
.add-pair:hover { background:rgba(var(--accent-rgb),0.07); }
.tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tpl-card { border-radius:var(--r); padding:20px 12px 16px; text-align:center; cursor:pointer; background:rgba(255,255,255,0.45); border:1.5px solid var(--border); transition:all .38s cubic-bezier(.25,.1,.25,1); }
.tpl-card:hover { background:rgba(255,255,255,0.7); transform:translateY(-2px); border-color:var(--accent); }
.tpl-icon { font-size:22px; margin-bottom:2px; opacity:.7; }
.tpl-name { font-family:'Coolvetica','DM Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.3px; margin-top:4px; }
.tpl-desc { font-size:11px; color:var(--text3); margin-top:4px; letter-spacing:.2px; }
.toast {
  position:fixed; bottom:88px; left:50%; transform:translateX(-50%) translateY(16px) scale(.92);
  background:rgba(26,34,51,0.92); backdrop-filter:blur(16px); color:#fff;
  border-radius:var(--r-lg); padding:11px 22px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; z-index:9999;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap; border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 24px rgba(26,34,51,0.3);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.empty { text-align:center; padding:50px 20px; color:var(--text3); }
.empty-title { font-family:'Coolvetica','DM Sans',sans-serif; font-size:20px; font-weight:400; margin-bottom:6px; color:var(--text2); letter-spacing:.3px; }
.skeleton-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(min-width:600px){.skeleton-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
.skeleton-card { border-radius:var(--r-xl); aspect-ratio:4/3; background:rgba(255,255,255,0.2); animation:skeletonPulse 1.6s ease-in-out infinite; }
@keyframes skeletonPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.empty-icon { font-size:44px; margin-bottom:12px; }
.empty-title { font-size:15px; font-weight:700; margin-bottom:5px; color:var(--text2); }
.empty-sub { font-size:13px; line-height:1.5; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeScale { from{opacity:0;transform:translateY(22px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.fade-in { animation:fadeScale .55s cubic-bezier(.25,.1,.25,1) both; }

:root {
  --hl-y: rgba(255,213,105,0.52);
  --hl-p: rgba(255,177,204,0.48);
  --hl-g: rgba(139,211,154,0.46);
}
.rd-reading { padding:2px 2px 4px; }
.rd-title {
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400;
  font-size:25px; line-height:1.2; letter-spacing:.3px; color:var(--text);
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--border-lo);
}
.rd-paragraph {
  font-family:'Georgia','Times New Roman',serif;
  font-size:17px; line-height:1.85; color:var(--text2);
  margin-bottom:14px; text-align:left; -webkit-font-smoothing:antialiased;
  white-space:pre-wrap; word-break:break-word;
}
.rd-paragraph:last-child { margin-bottom:0; }
.rd-reading strong { font-weight:700; color:var(--text); }

.rd-w {
  border-radius:.22em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.rd-reading[data-teacher="1"] { cursor:text; }

.rd-reading[data-student-live="1"] { cursor:text; }

.rd-w.hl-yellow, .rd-w.hl-pink, .rd-w.hl-green {
  padding:.04em .08em; border-radius:.22em;
  background-repeat:no-repeat; background-position:left center;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-size:100% 100%;
}
.rd-w.hl-yellow { background-image:linear-gradient(var(--hl-y),var(--hl-y)); }
.rd-w.hl-pink   { background-image:linear-gradient(var(--hl-p),var(--hl-p)); }
.rd-w.hl-green  { background-image:linear-gradient(var(--hl-g),var(--hl-g)); }

.rd-reading[data-live="1"] .rd-title,
.rd-reading[data-live="1"] .rd-paragraph {
  outline:none; border-radius:var(--r-xs); transition:background .18s, box-shadow .18s;
}
.rd-reading[data-live="1"] .rd-title:focus,
.rd-reading[data-live="1"] .rd-paragraph:focus {
  background:rgba(255,255,255,0.26);
  box-shadow:0 0 0 3px rgba(255,255,255,0.32);
}

.rd-reading[data-student-live="1"] .rd-paragraph:hover {
  background:rgba(255,255,255,0.14);
  box-shadow:0 0 0 2px rgba(255,255,255,0.18);
}

.rd-w.rd-new-hl {
  animation: hlSweep .45s cubic-bezier(.25,.1,.25,1) both,
             rdSpanPulse .55s cubic-bezier(.2,.8,.2,1) both,
             hlAbre .55s cubic-bezier(.33,0,.18,1) both;
}

.rd-new-text {
  animation: rdNewTextFade .7s cubic-bezier(.25,.1,.25,1) both;
}

.rd-typed-fade {
  animation: rdTypedFade .34s cubic-bezier(.22,.61,.36,1) both;
  display:inline;
}
@keyframes rdTypedFade {
  0%   { opacity:0; filter:blur(4px); }
  55%  { opacity:1; filter:blur(0.6px); }
  100% { opacity:1; filter:blur(0); }
}

.rd-reading, .rd-reading * { -webkit-user-select:text; user-select:text; }
@keyframes hlSweep { from{ background-size:0% 100%; } to{ background-size:100% 100%; } }
@keyframes hlAbre { from{ padding-left:0; padding-right:0; } }
@keyframes rdSpanPulse {
  0%   { filter:brightness(1);    transform:translateY(0); }
  38%  { filter:brightness(1.09); transform:translateY(-1px); }
  100% { filter:brightness(1);    transform:translateY(0); }
}
@keyframes rdNewTextFade {
  0%   { opacity:0;   transform:translateY(6px); filter:blur(5px); background:rgba(255,255,255,0.40); border-radius:6px; }
  45%  { opacity:1;   transform:translateY(0);   filter:blur(0);   background:rgba(255,255,255,0.26); border-radius:6px; }
  100% { opacity:1;   transform:translateY(0);   filter:blur(0);   background:transparent;            border-radius:0; }
}

.fw-write { padding:2px 2px 4px; }
.fw-write[data-fw-edit="1"] { cursor:text; }
.fw-title {
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400;
  font-size:25px; line-height:1.2; letter-spacing:.3px; color:var(--text);
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--border-lo);
}
.fw-body { min-height:58px; }
.fw-p {
  font-family:'Georgia','Times New Roman',serif;
  font-size:17px; line-height:1.85; color:var(--text2);
  margin-bottom:14px; text-align:left; -webkit-font-smoothing:antialiased;
  white-space:pre-wrap; word-break:break-word;
  outline:none; border-radius:var(--r-xs);
  transition:background .18s, box-shadow .18s;
}
.fw-p:last-child { margin-bottom:0; }
.fw-write[data-fw-edit="1"] .fw-p:focus {
  background:rgba(255,255,255,0.26);
  box-shadow:0 0 0 3px rgba(255,255,255,0.32);
}

.fw-write.fw-empty .fw-p:first-child::before {
  content:attr(data-ph); color:var(--text3); opacity:.6;
  font-style:italic; pointer-events:none;
}
.fw-foot {
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin-top:16px; padding-top:10px; border-top:1px solid var(--border-lo);
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.3px; color:var(--text3);
}
.fw-dot {
  width:7px; height:7px; border-radius:50%; background:var(--accent2);
  opacity:0; transition:opacity .25s;
}
.fw-dot.on { opacity:1; animation:fwPulse 1.1s ease-in-out infinite; }
@keyframes fwPulse {
  0%,100% { transform:scale(1);    opacity:.5; }
  50%     { transform:scale(1.35); opacity:1; }
}

.fw-block-in { animation:fwBlockIn .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fwBlockIn {
  from { opacity:0; transform:translateY(-5px); filter:blur(3px); }
  to   { opacity:1; transform:none;             filter:blur(0); }
}
.fw-write, .fw-write * { -webkit-user-select:text; user-select:text; }

.rd-hl-toolbar {
  position:fixed; z-index:1200; display:none; gap:7px; align-items:center;
  padding:7px 9px; border-radius:var(--r-pill);
  background:rgba(245,248,252,0.92); backdrop-filter:blur(22px);
  border:1px solid var(--border); box-shadow:0 10px 30px rgba(40,55,80,0.26);
  transform:translate(-50%,-118%); animation:fadeUp .18s ease both;
  pointer-events:all;
}
.rd-hl-toolbar.show { display:flex; }
.rd-hl-swatch {
  width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 1px 4px rgba(40,55,80,0.2); transition:transform .14s;
}
.rd-hl-swatch:hover { transform:scale(1.18); }
.rd-hl-swatch.y { background:rgba(255,213,105,0.85); }
.rd-hl-swatch.p { background:rgba(255,177,204,0.85); }
.rd-hl-swatch.g { background:rgba(139,211,154,0.85); }
.rd-hl-swatch.clear {
  background:rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text3); border-color:var(--border);
}

.ann-layer {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  overflow:hidden; border-radius:inherit;
}
.ann-mark { position:absolute; width:0; height:0; }

.ann-ripple {
  position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; border:2px solid rgba(255,255,255,0.95);
  box-shadow:0 0 0 1px rgba(0,0,0,0.18), 0 0 10px rgba(0,0,0,0.22);
  transform:scale(0); opacity:0;
  animation:annRipple .7s cubic-bezier(.25,.1,.25,1) both;
}
.ann-ripple.d2 { animation-name:annRipple2; }
@keyframes annRipple {
  0%   { transform:scale(.35); opacity:0; }
  14%  { opacity:1; }
  100% { transform:scale(5.2);  opacity:0; }
}
@keyframes annRipple2 {
  0%,12% { transform:scale(.35); opacity:0; }
  26%    { opacity:.8; }
  100%   { transform:scale(7.4); opacity:0; }
}

.ann-dot {
  position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:rgba(255,255,255,0.98);
  box-shadow:0 0 0 1px rgba(0,0,0,0.22), 0 1px 5px rgba(0,0,0,0.35);
  animation:annDotIn .5s cubic-bezier(.22,.61,.36,1) both;
}

.ann-dot.out { animation:annDotOut .8s cubic-bezier(.5,0,.75,0) both; }
@keyframes annDotIn  { from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:scale(1); } }
@keyframes annDotOut { from{ opacity:1; transform:scale(1); filter:blur(0); } to{ opacity:0; transform:scale(.5); filter:blur(6px); } }

.ann-note {
  position:absolute; left:0; top:0;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400;
  letter-spacing:.4px; line-height:1.22; color:#fff; text-align:center;

text-shadow:0 2px 22px rgba(12,18,32,0.58), 0 1px 9px rgba(12,18,32,0.34);
  animation:annNoteIn .55s cubic-bezier(.22,.61,.36,1) both;
  will-change:opacity, transform, filter;
}
.ann-note.out { animation:annNoteOut .8s cubic-bezier(.5,0,.75,0) both; }

@keyframes annNoteIn {
  0%   { opacity:0; filter:blur(12px); transform:scale(.94) translateY(-8px); }
  100% { opacity:1; filter:blur(0);    transform:scale(1)   translateY(0); }
}
@keyframes annNoteOut {
  0%   { opacity:1; filter:blur(0);    transform:scale(1)   translateY(0); }
  100% { opacity:0; filter:blur(16px); transform:scale(.94) translateY(-8px); }
}

.ann-mark.mine .ann-note { pointer-events:auto; cursor:pointer; }
.ann-mark.mine .ann-note:hover { opacity:.62; }

.ann-input {
  position:fixed; z-index:1400;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; letter-spacing:.4px;
  color:#fff; background:rgba(12,18,32,0.22); backdrop-filter:blur(14px);
  border:none; outline:none; border-radius:11px; padding:3px 10px; text-align:center;
  text-shadow:0 2px 22px rgba(12,18,32,0.58), 0 1px 9px rgba(12,18,32,0.34);
  box-shadow:0 8px 26px rgba(12,18,32,0.22);
  caret-color:#fff; pointer-events:auto;
  animation:annNoteIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.ann-input::placeholder { color:rgba(255,255,255,0.5); }

.match-card-img-wrap.ann-live .match-card-img { transform:none; }
#live-view-content .match-card:hover .match-card-img,
#live-view-content .describe-card:hover .match-card-img { transform:none; }
#live-view-content [data-ann] { cursor:crosshair; }

body:not(.is-teacher) #screen-lesson [data-ann]:hover { cursor:crosshair; }

:root {

--dc-bg: linear-gradient(100deg, #c3c9cd 0%, #a5b0bd 45%, #7f8ea6 100%);
  --dc-ink: #fff;
  --dc-ink-70: rgba(255,255,255,0.70);
  --dc-ink-75: rgba(255,255,255,0.75);
  --dc-ink-dark: #16202f;
  --dc-ink-icon: #333;
  --dc-accent: #3a7bff;
  --dc-card: linear-gradient(165deg, #e7ecef 0%, #aab7c6 60%, #8b9ab3 100%);
  --dc-card-inner: linear-gradient(200deg, #eef2f6, #aebdcf);
  --dc-glass: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16));
  --dc-glass-border: 1px solid rgba(255,255,255,0.55);
  --dc-badge-bg: rgba(255,255,255,0.18);
  --dc-track: rgba(255,255,255,0.28);
  --dc-fill: linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
  --dc-dot-off: rgba(255,255,255,0.4);
  --dc-close-bg: rgba(255,255,255,0.6);
  --dc-font: 'Coolvetica', sans-serif;
  --dc-font-alt: 'DM Sans', sans-serif;
  --dc-text-68: 68px; --dc-text-56: 56px; --dc-text-52: 52px; --dc-text-40: 40px;
  --dc-text-38: 38px; --dc-text-34: 34px; --dc-text-32: 32px; --dc-text-30: 30px;
  --dc-text-22: 22px; --dc-text-20: 20px; --dc-text-18: 18px;
  --dc-weight: 400; --dc-weight-badge: 700; --dc-tracking: .5px;
  --dc-radius-pill: 999px; --dc-radius-track: 99px; --dc-radius-card: 28px;
  --dc-radius-panel: 18px; --dc-radius-round: 50%;
  --dc-shadow-pill: 0 10px 24px rgba(20,30,45,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  --dc-shadow-card: 0 30px 60px rgba(15,20,30,0.32);
  --dc-shadow-text: 0 2px 8px rgba(0,0,0,.35);
  
  --dc-shadow-text-strong: 0 16px 28px rgba(20,30,45,.6);

--dc-ease:      cubic-bezier(.42, 0, .18, 1);
  --dc-t-viaje:   .9s;   
  --dc-t-lento:   .7s;   
  --dc-t-entrada: .85s;  
  --dc-t-salida:  .32s;  
  --dc-t-press:   .22s;  

--dc-text-140: 140px;  
  --dc-text-163: 163px;  
  --dc-text-100: 100px;  
  --dc-text-60:  60px;   
  --dc-text-50:  50px;   
  --dc-text-80:  80px;   
  --dc-metal-a: #CFD3D6; --dc-metal-b: #939EB3;
  --dc-pill-metal:  linear-gradient(90deg, var(--dc-metal-a), var(--dc-metal-b));
  --dc-panel-metal: linear-gradient(90deg, var(--dc-metal-b), var(--dc-metal-a));
  --dc-shadow-pill-metal:  0 10px 50px #141E2D84;
  --dc-shadow-panel-metal: 0 4px 50px #0000007F;
  --dc-radius-nav: 34.14px;
  --dc-space-6:6px; --dc-space-8:8px; --dc-space-10:10px; --dc-space-14:14px;
  --dc-space-16:16px; --dc-space-18:18px; --dc-space-20:20px; --dc-space-24:24px;
  --dc-space-34:34px; --dc-space-36:36px; --dc-space-40:40px; --dc-space-48:48px;
  --dc-space-60:60px; --dc-space-64:64px; --dc-space-72:72px; --dc-space-76:76px;
  --dc-card-w:520px; --dc-card-h:600px; --dc-close-size:44px;
  --dc-dot-on:12px; --dc-dot-off-size:8px; --dc-bar-h:8px; --dc-bar-w:1160px;
  --dc-row-w-progreso:900px; --dc-row-w-ajustes:1100px;

--dc-u: clamp(0.58px, min(100vw, 2200px) / 1920, 1.15px);
  --dc-k: 0.56666666666666667; 
  --dc-fs-68: calc(68 * var(--dc-u));
  --dc-fs-56: calc(56 * var(--dc-u));
  --dc-fs-52: calc(52 * var(--dc-u));
  --dc-fs-40: calc(40 * var(--dc-u));
  --dc-fs-38: calc(38 * var(--dc-u));
  --dc-fs-34: calc(34 * var(--dc-u));
  --dc-fs-32: calc(32 * var(--dc-u));
  --dc-fs-30: calc(30 * var(--dc-u));
  --dc-fs-140: calc(140 * var(--dc-u));
  --dc-fs-120: calc(120 * var(--dc-u));
  --dc-fs-163: calc(163 * var(--dc-u));
  --dc-fs-100: calc(100 * var(--dc-u));
  --dc-fs-60:  calc(60 * var(--dc-u));
  --dc-fs-50:  calc(50 * var(--dc-u));
  --dc-fs-80:  calc(80 * var(--dc-u));
  --dc-r-nav:  calc(34.14 * var(--dc-u));
  --dc-fs-22: calc(22 * var(--dc-u));
  --dc-fs-20: calc(20 * var(--dc-u));
  --dc-fs-18: calc(18 * var(--dc-u));
  --dc-sp-6:  calc(6 * var(--dc-u));
  --dc-sp-8:  calc(8 * var(--dc-u));
  --dc-sp-10: calc(10 * var(--dc-u));
  --dc-sp-14: calc(14 * var(--dc-u));
  --dc-sp-16: calc(16 * var(--dc-u));
  --dc-sp-18: calc(18 * var(--dc-u));
  --dc-sp-20: calc(20 * var(--dc-u));
  --dc-sp-24: calc(24 * var(--dc-u));
  --dc-sp-34: calc(34 * var(--dc-u));
  --dc-sp-36: calc(36 * var(--dc-u));
  --dc-sp-40: calc(40 * var(--dc-u));
  --dc-sp-48: calc(48 * var(--dc-u));
  --dc-sp-60: calc(60 * var(--dc-u));
  --dc-sp-64: calc(64 * var(--dc-u));
  --dc-sp-72: calc(72 * var(--dc-u));
  --dc-sp-76: calc(76 * var(--dc-u));
  --dc-p-nav:    var(--dc-sp-16) var(--dc-sp-20);
  --dc-p-nav-on: var(--dc-sp-16) var(--dc-sp-40);
  --dc-p-badge:  var(--dc-sp-8)  var(--dc-sp-18);
  --dc-p-pill:   var(--dc-sp-20) var(--dc-sp-48);
  --dc-r-card:  calc(28 * var(--dc-u));
  --dc-r-panel: calc(18 * var(--dc-u));
  --dc-w-dot-on:  calc(12 * var(--dc-u));
  --dc-w-dot-off: calc(8 * var(--dc-u));
  --dc-h-bar:     calc(8 * var(--dc-u));
  --dc-w-bar:     calc(1160 * var(--dc-u));
  --dc-w-row-ajustes: calc(1100 * var(--dc-u));
  --dc-w-row-progreso: calc(900 * var(--dc-u));
  
  --dc-w-canvas: calc(1920 * var(--dc-u));
  
  --dc-w-columna: calc(760 * var(--dc-u));
  --dc-dens: 1;
}

@media (min-width:1600px) and (max-resolution:1.4dppx) {
  
  :root { --dc-dens: .86; --dc-u: clamp(0.58px, min(100vw, 2200px) / 1920 * .86, 1.15px);
          --dc-w-canvas: min(100vw, 2200px); }
}

#screen-student { background:var(--dc-bg); }
#screen-student > .classrooms-header,
#screen-student .aula-tabs-pill.session-tabs { background:none; }

#screen-student > .classrooms-header {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:var(--dc-sp-34) var(--dc-sp-76) var(--dc-sp-34);
  column-gap:var(--dc-sp-14);
}

#screen-student:not(.clase-modo) > .classrooms-header { padding-bottom:0; }

#screen-student #student-detail-name {
  font-family:var(--dc-font); font-size:var(--dc-fs-163); font-weight:var(--dc-weight);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); cursor:pointer;
  grid-column:1; grid-row:1; justify-self:start; line-height:1;
  
  text-shadow:none;
  transition:transform var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  #screen-student #student-detail-name:hover { text-shadow:var(--dc-shadow-text-strong); }
}
#screen-student #student-detail-name:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

#screen-student .aula-tabs-pill.session-tabs {
  position:relative;
  gap:var(--dc-sp-14); padding:var(--dc-sp-14) var(--dc-sp-76) var(--dc-sp-10);
  max-width:var(--dc-w-canvas); margin:0 auto; width:100%;
  justify-content:center;
  
  border-bottom:none; box-shadow:none; border-radius:0; backdrop-filter:none;
}

#screen-student.clase-modo .aula-tabs-pill.session-tabs { display:none; }

#screen-student .aula-tabs-pill .aula-tab {
  font-family:var(--dc-font); font-size:var(--dc-fs-60); font-weight:var(--dc-weight);
  letter-spacing:normal; line-height:1.25;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--dc-ink); background:none; border:none; box-shadow:none;
  padding:var(--dc-sp-10) var(--dc-sp-40); border-radius:var(--dc-r-nav);
  cursor:pointer; position:relative; z-index:1;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
#screen-student .aula-tabs-pill .aula-tab.active {
  background:none; border:none; box-shadow:none; color:var(--dc-ink);
}

#screen-student .aula-tabs-pill .aula-tab.crecida { transform:scale(1.12); }

#screen-student .aula-tab-indicator {
  position:absolute; left:0; z-index:0; pointer-events:none;
  border-radius:var(--dc-r-nav);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
  transform:translateX(var(--x, 0)) scale(var(--s, 1));
  transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease);
  will-change:transform, width;
}

#screen-student > .classrooms-header #hc-board-btn,
#screen-student > .classrooms-header #t-notebook-toggle-btn {
  font-family:var(--dc-font); font-size:var(--dc-fs-80); font-weight:var(--dc-weight);
  letter-spacing:normal; color:var(--dc-ink); line-height:1;
  background:none; border:none; box-shadow:none; border-radius:0;
  text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-10) var(--dc-sp-24); width:auto; height:auto; cursor:pointer;
  backdrop-filter:none; text-transform:lowercase;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}

#screen-student > .classrooms-header #hc-board-btn:hover,
#screen-student > .classrooms-header #t-notebook-toggle-btn:hover {
  background:none; box-shadow:none; transform:scale(1.09);
}
#screen-student > .classrooms-header #hc-board-btn { grid-column:2; grid-row:1; justify-self:center; }
#screen-student > .classrooms-header #t-notebook-toggle-btn { grid-column:3; grid-row:1; justify-self:end; }

#aula-panel-ajustes {
  background:none; min-height:100vh;
  margin:0 -20px; padding:0; font-family:var(--dc-font);
}
@media (min-width:600px) { #aula-panel-ajustes { margin:0 -32px; } }
@media (min-width:900px) { #aula-panel-ajustes { margin:0 -48px; } }

#ajustes-overview, #ajustes-detalle {
  max-width:var(--dc-w-canvas); margin:0 auto;
  padding:var(--dc-sp-60) var(--dc-sp-76) var(--dc-sp-72);
  min-height:62vh; display:flex; flex-direction:column; justify-content:center;
}
.ajustes-menu { background:none; border-radius:0; display:flex; flex-direction:column; padding:0; }

#aula-panel-ajustes .ajustes-menu-row {
  width:100%; max-width:var(--dc-w-row-ajustes); margin-left:auto; margin-right:auto;
  text-align:center; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--dc-font); font-size:var(--dc-fs-52); font-weight:var(--dc-weight);
  letter-spacing:normal; color:var(--dc-ink); text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:var(--dc-sp-20);
  margin-bottom:var(--dc-sp-64);
}
#aula-panel-ajustes .ajustes-menu-row:last-child { margin-bottom:0; }
#aula-panel-ajustes .ajustes-menu-row.disabled { color:var(--dc-ink); cursor:default; }
#aula-panel-ajustes .ajustes-menu-row:disabled { opacity:1; }

#aula-panel-ajustes .modal-btn:disabled { color:var(--dc-ink-75); opacity:.5; cursor:default; }

#ajustes-detalle > .back-btn {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink); background:none; border:none;
  box-shadow:none; border-radius:0; text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-10) 0; margin:0 0 var(--dc-sp-40) !important; width:auto; height:auto;
  backdrop-filter:none;
}

#aula-panel-ajustes .ajustes-soon {
  font-family:var(--dc-font-alt); font-size:var(--dc-fs-18); font-weight:var(--dc-weight-badge);
  letter-spacing:var(--dc-tracking); text-transform:uppercase;
  color:var(--dc-ink-70); background:var(--dc-badge-bg);
  padding:var(--dc-p-badge); border-radius:var(--dc-radius-pill); white-space:nowrap;
}

#aula-panel-ajustes .ajustes-menu-detail { max-width:var(--dc-w-row-ajustes); margin-bottom:var(--dc-sp-64); }
#aula-panel-ajustes .assign-section { padding:0; margin-bottom:var(--dc-sp-48); }
#aula-panel-ajustes .assign-section:last-child { margin-bottom:0; }
#aula-panel-ajustes .ajustes-menu-detail .assign-section:first-child { padding-top:0; }

#aula-panel-ajustes .assign-section-title {
  font-family:var(--dc-font); font-size:var(--dc-fs-34); font-weight:var(--dc-weight);
  letter-spacing:normal; color:var(--dc-ink); margin-bottom:var(--dc-sp-20);
  display:flex; align-items:baseline; gap:var(--dc-sp-10);
}

#aula-panel-ajustes .dc-help {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink-75); margin-bottom:var(--dc-sp-20); max-width:var(--dc-w-bar);
}

#aula-panel-ajustes #marco-pct {
  font-family:var(--dc-font); font-size:var(--dc-fs-32); font-weight:var(--dc-weight);
  color:var(--dc-ink-75); opacity:1;
}

#aula-panel-ajustes .f-input {
  width:100%; max-width:var(--dc-w-bar);
  background:var(--dc-card-inner); border:none; border-radius:var(--dc-r-panel);
  color:var(--dc-ink-dark);
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  padding:var(--dc-sp-18) var(--dc-sp-24);
  outline:none; margin-bottom:var(--dc-sp-20); display:block;
}
#aula-panel-ajustes .f-input::placeholder { color:var(--dc-ink-dark); opacity:.75; }

#aula-panel-ajustes .modal-btn,
#aula-panel-ajustes .dc-pill-btn {
  display:inline-block; width:auto; max-width:none;
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink); background:none; border:none;
  box-shadow:none; border-radius:0; text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-8) 0; cursor:pointer;
}

#aula-panel-ajustes select {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink); background:var(--dc-glass); border:var(--dc-glass-border);
  box-shadow:var(--dc-shadow-pill); border-radius:var(--dc-radius-pill);
  padding:var(--dc-sp-8) var(--dc-sp-20); margin-left:0;
  -webkit-appearance:none; appearance:none; cursor:pointer; outline:none;
}
#aula-panel-ajustes select option { color:var(--dc-ink-dark); background:#e7ecef; }

#aula-panel-ajustes #reset-pw-msg {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-accent); margin-top:var(--dc-sp-16);
}

#aula-panel-ajustes .dc-group-label {
  font-family:var(--dc-font-alt); font-size:var(--dc-fs-18); font-weight:var(--dc-weight-badge);
  text-transform:uppercase; letter-spacing:var(--dc-tracking);
  color:var(--dc-ink-70); margin:var(--dc-sp-40) 0 var(--dc-sp-20);
}

#aula-panel-ajustes .assign-topic-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--dc-sp-20);
  background:none; border:none; border-radius:0; backdrop-filter:none;
  padding:0; margin-bottom:var(--dc-sp-24); max-width:var(--dc-w-row-ajustes);
}
#aula-panel-ajustes .assign-topic-name {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink); display:flex; flex-direction:column; gap:2px;
}
#aula-panel-ajustes .dc-topic-sub { font-size:var(--dc-fs-22); color:var(--dc-ink-75); }

#aula-panel-ajustes .pap-fila {
  padding:var(--dc-sp-24) 0; border-bottom:1px solid rgba(255,255,255,.14);
}
#aula-panel-ajustes .pap-fila:last-child { border-bottom:none; }
#aula-panel-ajustes .pap-nombre {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); line-height:1.15;
}
#aula-panel-ajustes .pap-cuando {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink-70); margin-top:var(--dc-sp-6);
}
#aula-panel-ajustes .pap-ops { display:flex; gap:var(--dc-sp-34); margin-top:var(--dc-sp-10); }
#aula-panel-ajustes .pap-ops .ent-op { font-size:var(--dc-fs-30); opacity:.75; }
@media (any-hover: hover) { #aula-panel-ajustes .pap-ops .ent-op:hover { opacity:1; } }

#aula-panel-ajustes #marco-lista { margin-top:var(--dc-sp-40); }
#aula-panel-ajustes #assign-topic-list { margin-top:var(--dc-sp-20); }

.dc-dot-toggle {
  position:relative; flex-shrink:0; cursor:pointer;
  width:var(--dc-sp-40); height:var(--dc-sp-40);
  display:flex; align-items:center; justify-content:center;
}
.dc-dot-toggle input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.dc-dot-toggle .dc-dot {
  width:var(--dc-w-dot-off); height:var(--dc-w-dot-off);
  border-radius:var(--dc-radius-round); background:var(--dc-dot-off);
  transition:width .18s, height .18s, background .18s; pointer-events:none;
}
.dc-dot-toggle input:checked ~ .dc-dot {
  width:var(--dc-w-dot-on); height:var(--dc-w-dot-on); background:var(--dc-ink);
}

#aula-panel-clase { max-width:none; margin:0; padding:0; overflow:visible; }

#aula-sesiones { padding:var(--dc-sp-14) 0 var(--dc-sp-6) !important; overflow:visible; }

#aula-panel-disponibles #aula-disponibles { padding:var(--dc-sp-10) 0 0; }

#aula-panel-disponibles #aula-disponibles .riel-titulo,
#aula-panel-disponibles #aula-disponibles .filtros-riel { max-width:var(--dc-w-canvas); padding-left:var(--dc-sp-76); padding-right:var(--dc-sp-76); }

#aula-panel-progreso {
  background:none; min-height:100vh; margin:0 -20px; padding:0; font-family:var(--dc-font);
}
@media (min-width:600px) { #aula-panel-progreso { margin:0 -32px; } }
@media (min-width:900px) { #aula-panel-progreso { margin:0 -48px; } }
#progreso-overview, #progreso-detalle {
  max-width:var(--dc-w-canvas); margin:0 auto;
  padding:var(--dc-sp-60) var(--dc-sp-76) var(--dc-sp-72);
  min-height:62vh; display:flex; flex-direction:column; justify-content:center;
}

#aula-panel-progreso .progreso-menu { background:none; border-radius:0; padding:0; }

#aula-panel-progreso .ajustes-menu-row {
  max-width:var(--dc-w-row-progreso); margin-left:auto; margin-right:auto; border:none;
  font-family:var(--dc-font); font-size:var(--dc-fs-50); font-weight:var(--dc-weight);
  letter-spacing:normal; color:var(--dc-ink); text-align:center;
  justify-content:center; margin-bottom:var(--dc-sp-24);
}
#aula-panel-progreso .ajustes-menu-row.disabled { color:var(--dc-ink); cursor:default; }

#aula-panel-progreso .progreso-menu .ajustes-menu-row,
#aula-panel-ajustes .ajustes-menu .ajustes-menu-row {
  max-width:var(--dc-w-canvas);
  padding:var(--dc-sp-48) var(--dc-sp-40);
  margin-bottom:0;
  transition:font-size var(--dc-t-lento) var(--dc-ease),
             filter var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease);
}

@media (any-hover: hover) {
#aula-panel-progreso .progreso-menu .ajustes-menu-row:hover,
#aula-panel-ajustes .ajustes-menu .ajustes-menu-row:hover {
  font-size:var(--dc-fs-68); filter:blur(0);
}
#aula-panel-progreso .progreso-menu:has(.ajustes-menu-row:hover) .ajustes-menu-row:not(:hover),
#aula-panel-ajustes .ajustes-menu:has(.ajustes-menu-row:hover) .ajustes-menu-row:not(:hover) {
  filter:blur(1.4px);
}
#aula-panel-progreso .progreso-menu .ajustes-menu-row:hover ~ .ajustes-menu-row,
#aula-panel-ajustes .ajustes-menu .ajustes-menu-row:hover ~ .ajustes-menu-row {
  transform:translateY(6px);
}
#aula-panel-progreso .progreso-menu .ajustes-menu-row:has(~ .ajustes-menu-row:hover),
#aula-panel-ajustes .ajustes-menu .ajustes-menu-row:has(~ .ajustes-menu-row:hover) {
  transform:translateY(-6px);
}
}

#aula-panel-progreso .progreso-pct { display:none; }

#aula-panel-progreso .assign-section { margin-bottom:var(--dc-sp-48); padding:0; }
#aula-panel-progreso .assign-section:last-child { margin-bottom:0; }
#aula-panel-progreso .assign-section-title {
  font-family:var(--dc-font); font-size:var(--dc-fs-34); font-weight:var(--dc-weight);
  letter-spacing:normal; color:var(--dc-ink); margin-bottom:var(--dc-sp-20);
}

#aula-panel-progreso .fav-item {
  background:none; border:none; border-radius:0; padding:0; margin-bottom:var(--dc-sp-16);
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
}
#aula-panel-progreso .fav-es { color:var(--dc-ink); font-weight:var(--dc-weight); }
#aula-panel-progreso .fav-arrow { color:var(--dc-ink-75); }
#aula-panel-progreso .fav-ru { color:var(--dc-accent); font-weight:var(--dc-weight); }
#aula-panel-progreso .fav-del { color:var(--dc-ink-75); opacity:1; }
#aula-panel-progreso .fav-del:hover { color:var(--dc-accent); }

#progreso-detalle > .back-btn {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight);
  color:var(--dc-ink); background:none; border:none;
  box-shadow:none; border-radius:0; text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-10) 0; margin:0 0 var(--dc-sp-40) !important; width:auto; height:auto;
  backdrop-filter:none;
}

#progreso-detalle .progreso-slider-wrap { background:none; padding:0 0 var(--dc-sp-34); border-radius:0; text-align:center; }
#progreso-detalle .progreso-slider-label {
  font-family:var(--dc-font); font-size:var(--dc-fs-52); font-weight:var(--dc-weight);
  color:var(--dc-ink); margin-bottom:var(--dc-sp-34);
}
#progreso-detalle .progreso-slider-num-pill {
  font-family:var(--dc-font); font-size:var(--dc-fs-38); font-weight:var(--dc-weight);
  background:var(--dc-glass); border:var(--dc-glass-border); box-shadow:var(--dc-shadow-pill);
  border-radius:var(--dc-radius-pill); padding:var(--dc-p-pill);
  display:inline-block; margin-bottom:var(--dc-sp-34);
}
#progreso-detalle .progreso-slider-track {
  max-width:var(--dc-w-bar); height:var(--dc-h-bar); background:var(--dc-track); border-radius:var(--dc-radius-track);
}
#progreso-detalle .progreso-slider-fill { background:var(--dc-fill); border-radius:var(--dc-radius-track); }
#progreso-detalle .progreso-slider-ends {
  max-width:var(--dc-w-bar); margin:var(--dc-sp-18) auto 0;
  font-family:var(--dc-font); font-size:var(--dc-fs-34); font-weight:var(--dc-weight); color:var(--dc-ink);
}

#progreso-detalle-falta .assign-topic-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--dc-sp-20);
  background:none; border:none; border-radius:0; padding:0; margin-bottom:var(--dc-sp-24);
}
#progreso-detalle-falta .assign-topic-name {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); font-weight:var(--dc-weight); color:var(--dc-ink);
  display:flex; flex-direction:column; gap:2px;
}
#progreso-detalle-falta .dc-topic-sub { font-size:var(--dc-fs-22); color:var(--dc-ink-75); }
#progreso-detalle-falta .dc-help { color:var(--dc-ink-75); font-family:var(--dc-font); font-size:var(--dc-fs-30); }

#screen-student > .classrooms-header #hc-board-btn,
#screen-student > .classrooms-header #t-notebook-toggle-btn,
#aula-clase-abierta .clase-titulo,
#aula-clase-abierta .clase-vacia-btn,
#aula-clase-abierta .reset-progress-btn,
#ajustes-detalle > .back-btn,
#progreso-detalle > .back-btn,
#aula-panel-ajustes .modal-btn,
#aula-panel-ajustes .dc-pill-btn,
#screen-classrooms .classrooms-header .back-btn {
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease);
  transform-origin:center center;
}
#screen-student #student-detail-name:hover,
#screen-student > .classrooms-header #hc-board-btn:hover,
#screen-student > .classrooms-header #t-notebook-toggle-btn:hover,
#aula-clase-abierta .clase-titulo:hover,
#aula-clase-abierta .clase-vacia-btn:hover,
#aula-clase-abierta .reset-progress-btn:hover,
#ajustes-detalle > .back-btn:hover,
#progreso-detalle > .back-btn:hover,
#aula-panel-ajustes .modal-btn:hover,
#aula-panel-ajustes .dc-pill-btn:hover,
#screen-classrooms .classrooms-header .back-btn:hover {
  transform:scale(1.06); background:none; box-shadow:none;
}
#screen-student #student-detail-name:active,
#screen-student > .classrooms-header #hc-board-btn:active,
#screen-student > .classrooms-header #t-notebook-toggle-btn:active,
#aula-clase-abierta .clase-titulo:active,
#aula-clase-abierta .clase-vacia-btn:active,
#aula-clase-abierta .reset-progress-btn:active,
#ajustes-detalle > .back-btn:active,
#progreso-detalle > .back-btn:active,
#aula-panel-ajustes .modal-btn:active,
#aula-panel-ajustes .dc-pill-btn:active,
#screen-classrooms .classrooms-header .back-btn:active {
  transform:scale(.965);
  transition:transform var(--dc-t-press) var(--dc-ease);
}

#ajustes-detalle > .back-btn, #progreso-detalle > .back-btn {
  align-self:flex-start; text-align:left;
}

#aula-panel-ajustes .ajustes-menu .ajustes-menu-row,
#aula-panel-progreso .progreso-menu .ajustes-menu-row:not(.disabled) {
  text-transform:lowercase;
}

#screen-student #aula-scroll,
#screen-home > .scroll,
#screen-classrooms .estudiantes-centro > .scroll {
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-40));
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-40));
}

@media (min-width:620px) {
  #screen-student:not(.clase-modo):is([data-aula-tab="clase"], [data-aula-tab="disponibles"]) #aula-scroll,
  #screen-home[data-alumno-tab="clases"] > .scroll {
    -webkit-mask-image:none; mask-image:none; padding-bottom:0;
  }
}

@keyframes dcEntra {
  from { opacity:0; filter:blur(9px); transform:translateY(10px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}

.dc-entra { animation:dcEntra var(--dc-t-entrada) var(--dc-ease) both; will-change:opacity, filter, transform; }

@keyframes dcSale {
  from { opacity:1; filter:blur(0);   transform:translateY(0); }
  to   { opacity:0; filter:blur(7px); transform:translateY(-8px); }
}
.dc-sale {
  animation:dcSale var(--dc-t-salida) var(--dc-ease) both;
  position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
  will-change:opacity, filter, transform;
}
html.sin-desenfoque .dc-sale { animation-name:dcSaleLigera; }
@keyframes dcSaleLigera {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-8px); }
}
#screen-student #aula-scroll { position:relative; }

#screen-home #home-scroll { position:relative; }
@media (prefers-reduced-motion:reduce) { .dc-sale { animation:none; display:none !important; } }

html.sin-desenfoque .dc-entra { animation-name:dcEntraLigera; will-change:opacity, transform; }
@keyframes dcEntraLigera {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) { .dc-entra { animation:none; } }

#screen-home { background:var(--dc-bg); }
#screen-home .topbar {
  display:flex; align-items:baseline; gap:var(--dc-sp-24);
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:var(--dc-sp-34) var(--dc-sp-76) var(--dc-sp-24);
}
#screen-home .topbar-logo-pill {
  background:none; border:none; box-shadow:none; backdrop-filter:none;
  padding:0; order:0;
}

#screen-home .topbar-logo-text {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--dc-fs-120); color:var(--dc-ink);
  letter-spacing:var(--dc-tracking); line-height:1;
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  #screen-home .topbar-logo-pill:hover .topbar-logo-text { transform:scale(1.03); }
}

@media (max-width:480px) {
  #screen-home .topbar-logo-text { font-size:var(--dc-fs-68); }
}

#screen-home .topbar-left  { order:1; margin-left:auto; display:flex; gap:var(--dc-sp-24); align-items:baseline; }
#screen-home .topbar-right { order:2; display:flex; gap:var(--dc-sp-24); align-items:baseline; }
#screen-home .topbar .tb-btn {
  font-family:var(--dc-font) !important; font-weight:var(--dc-weight) !important;
  font-size:var(--dc-fs-30) !important; letter-spacing:normal !important;
  color:var(--dc-ink) !important; text-transform:lowercase;
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important;
  text-shadow:var(--dc-shadow-text-strong);
  height:auto !important; width:auto !important; padding:var(--dc-sp-8) 0 !important;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #screen-home .topbar .tb-btn:hover { transform:scale(1.06); background:none !important; } }
#screen-home .topbar .tb-btn:active { transform:scale(.965); transition:transform var(--dc-t-press) var(--dc-ease); }

.menu-grande {
  display:flex; flex-direction:column; align-items:stretch;
  background:none !important; border-radius:0 !important; padding:0 !important;
}
.menu-grande .menu-grande-op {
  width:100%; border:none !important; background:none !important; cursor:pointer;
  text-align:center; justify-content:center; display:block;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); text-transform:lowercase; letter-spacing:normal; line-height:1.1;
  text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-48) var(--dc-sp-40);
  transition:font-size var(--dc-t-lento) var(--dc-ease),
             filter var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease);
}

@media (any-hover: hover) {
  .menu-grande .menu-grande-op:hover { font-size:var(--dc-fs-68); filter:blur(0); }
  .menu-grande:has(.menu-grande-op:hover) .menu-grande-op:not(:hover) { filter:blur(1.4px); }
  .menu-grande .menu-grande-op:hover ~ .menu-grande-op { transform:translateY(6px); }
  .menu-grande .menu-grande-op:has(~ .menu-grande-op:hover) { transform:translateY(-6px); }
}
.menu-grande .menu-grande-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria { width:100%; display:flex; flex-direction:column; justify-content:center; }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria-carril {
  --gal-w: calc(min(26vw, 35vh) * var(--dc-dens, 1)); --gal-hueco: calc(var(--gal-w) * .16);
  display:flex; align-items:flex-end; gap:var(--gal-hueco);
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
  
  padding:calc(var(--gal-w) * .10) calc(50% - var(--gal-w) / 2) calc(var(--gal-w) * .20);
}

:is(#screen-home, #elegir-ov, #screen-student, #ej-ed) .galeria-carril {
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--dc-sp-60),
                     #000 calc(100% - var(--dc-sp-60)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--dc-sp-60),
             #000 calc(100% - var(--dc-sp-60)), transparent 100%);
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria-carril.gal-arrastra { cursor:grabbing; user-select:none; -webkit-user-select:none; }
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria-carril::-webkit-scrollbar { display:none; }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item {
  flex:0 0 var(--gal-w);
  background:none; border:none; padding:0; cursor:pointer;
  display:block;
  transform:scale(var(--gal-s, .90)); transform-origin:center bottom;
  opacity:var(--gal-o, .62);
  transition:transform .16s linear, opacity .16s linear,
             filter var(--dc-t-lento) var(--dc-ease);
  will-change:transform, opacity;
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-in {
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--gal-w) * .034);
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item:hover .gal-in { transform:scale(1.06); }
  :is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria-carril:has(.gal-item:hover) .gal-item:not(:hover) { filter:blur(1.4px) brightness(.88); }
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item:active .gal-in { transform:scale(.99); transition:transform var(--dc-t-press) var(--dc-ease); }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-titulo {
  width:100%; height:2.3em;
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:calc(var(--gal-w) * .115); line-height:1.08;
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-align:center; text-wrap:balance;
  text-shadow:var(--dc-shadow-text-strong);
  display:flex; align-items:flex-end; justify-content:center;
  transform:scale(var(--gal-ts, .62)); transform-origin:center bottom;
  transition:transform .16s linear;
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-titulo > span {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  padding:0 .2em; margin:0 -.2em;
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov) .gal-titulo {
  text-shadow:none; filter:drop-shadow(0 calc(var(--gal-w) * .03) calc(var(--gal-w) * .035) rgba(20,30,45,.48));
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-foto {
  position:relative; width:100%; aspect-ratio:16/10; min-height:0; flex:none;
  border-radius:calc(var(--gal-w) * .092);
  background:var(--dc-card-inner);
  box-shadow:0 calc(var(--gal-w) * .052) calc(var(--gal-w) * .115) rgba(15,20,30,.34);
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-foto > img,
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-vacia {
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:inherit; display:block;
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-foto > img { object-fit:cover; }
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-vacia {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--dc-font); font-size:calc(var(--gal-w) * .07); color:rgba(255,255,255,.55);
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-pie {
  width:100%; text-align:center; min-height:2.4em;
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:calc(var(--gal-w) * .062); line-height:1.15;
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-shadow:0 10px 20px rgba(20,30,45,.45);
}

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.gal-nueva .gal-in { opacity:.72; transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { :is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.gal-nueva:hover .gal-in { opacity:1; } }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-editar {
  position:absolute; top:calc(var(--gal-w) * .040); right:calc(var(--gal-w) * .052);
  background:none; border:none; cursor:pointer;
  padding:.3em .45em; margin:-.3em -.45em;
  font-family:var(--dc-font); font-weight:var(--dc-weight); letter-spacing:var(--dc-tracking);
  font-size:calc(var(--gal-w) * .058); line-height:1; color:var(--dc-ink);
  text-shadow:var(--dc-shadow-text-strong);
  opacity:0; pointer-events:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.es-centro .gal-editar { opacity:.8; pointer-events:auto; }
@media (any-hover: hover) {
  :is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.es-centro .gal-editar:hover { opacity:1; transform:scale(1.06); }
}
:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.es-centro { cursor:pointer; }

:is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .gal-item.gal-yendose {
  opacity:0 !important; filter:blur(8px); pointer-events:none;
  transition:opacity .4s var(--dc-ease), filter .4s var(--dc-ease);
}

@media (max-width:620px) { :is(#screen-home, #elegir-ov, #screen-student, #tipo-ov, #ficha-ed, #ej-ed) .galeria-carril { --gal-w: 62vw; } }

.fed-ov { position:fixed; inset:0; z-index:1060;
  display:flex; align-items:center; justify-content:center;
  padding:var(--dc-sp-40) var(--dc-sp-60); }
.fed-velo { position:absolute; inset:0; background:rgba(30,40,55,.10);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  backdrop-filter:blur(26px) saturate(130%);
  opacity:0; transition:opacity .42s var(--dc-ease); }
.fed-ov.on .fed-velo { opacity:1; }

#ficha-ed { position:relative; --gal-w:calc(min(34vw, 40vh) * var(--dc-dens, 1)); --gal-ts:1;
  width:var(--gal-w); will-change:transform;
  transition:transform .58s var(--dc-ease); }

#ficha-ed .gal-titulo { height:auto; min-height:2.3em; }
#ficha-ed .fed-t { display:block; max-width:100%; outline:none; cursor:text;
  padding:.35em .5em .7em; margin:-.35em -.5em -.7em; min-width:1.5em;
  border-radius:.2em; transition:background var(--dc-t-lento) var(--dc-ease); }
#ficha-ed .fed-t:empty::before { content:'sin nombre'; opacity:.42; }
@media (any-hover: hover) { #ficha-ed .fed-t:hover { background:rgba(255,255,255,.07); } }
#ficha-ed .fed-t:focus { background:rgba(255,255,255,.10); }

#ficha-ed .gal-foto { cursor:pointer; overflow:hidden; }
#ficha-ed .gal-foto > img { transition:transform var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { #ficha-ed .gal-foto:hover > img { transform:scale(1.03); } }

#ficha-ed .fed-crop { position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.94);
  width:calc(var(--gal-w) * .15); height:calc(var(--gal-w) * .15); border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.88); color:var(--dc-ink-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 calc(var(--gal-w) * .02) calc(var(--gal-w) * .05) rgba(15,20,30,.24);
  opacity:0; transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease); }
#ficha-ed .fed-crop svg { width:46%; height:46%; }
@media (any-hover: hover) { #ficha-ed .gal-foto:hover .fed-crop { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (hover:none) { #ficha-ed .fed-crop { opacity:1; transform:translate(-50%,-50%) scale(1); } }

.campo-espejo { position:absolute; z-index:4; pointer-events:none; margin:0; overflow:hidden;
  background:none !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.campo-espejo .tx-wd { display:inline-block; }
.campo-espejo .tx-nuevo { display:inline-block; animation:txNuevo var(--txdur,.42s) cubic-bezier(.22,.61,.36,1) both; }
@keyframes txNuevo { from { opacity:0; transform:translateY(.06em); } to { opacity:1; transform:none; } }
.campo-espejo .tx-borra { display:inline-block; white-space:pre; font-size:1em; opacity:1;
  transition:opacity .18s ease, font-size .3s cubic-bezier(.4,0,.2,1); }
.campo-espejo .tx-borra.tx-va { opacity:0; font-size:0; }
.campo-animando { color:transparent !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; }
.campo-animando * { color:transparent !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; }

#ficha-ed.fed-subiendo .gal-foto { opacity:.62; pointer-events:none; }

#ficha-ed .gal-foto.fed-sin-foto { cursor:default;
  background:linear-gradient(140deg,#ccd8e6 0%,#e4ebf3 55%,#cbd8e8 100%); }

#ficha-ed .fed-pie { display:flex; align-items:center; justify-content:center;
  gap:calc(var(--gal-w) * .10); margin-top:calc(var(--gal-w) * .05);
  opacity:0; transition:opacity .42s var(--dc-ease) .14s; }
.fed-ov.on #ficha-ed .fed-pie { opacity:1; }
#ficha-ed .fed-pie button { background:none; border:none; cursor:pointer;
  padding:.35em .5em; margin:-.35em -.5em;
  font-family:var(--dc-font); font-weight:var(--dc-weight); letter-spacing:var(--dc-tracking);
  font-size:calc(var(--gal-w) * .072); line-height:1; color:var(--dc-ink);
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease); }
#ficha-ed .fed-pie .fed-tirar { opacity:.58; }
@media (any-hover: hover) { #ficha-ed .fed-pie button:hover { transform:scale(1.06); opacity:1; } }
#ficha-ed .fed-pie button:active { transform:scale(.98); }
@media (max-width:620px) { #ficha-ed { --gal-w:74vw; } }

#prof-panel-alumnos, #prof-panel-clases {
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
}
#prof-panel-alumnos { padding:var(--dc-sp-24) var(--dc-sp-76) var(--dc-sp-72); }

#prof-panel-clases { padding:0 0 var(--dc-sp-16); }
#prof-lista .riel-bloque { margin-top:var(--dc-sp-8); }
#prof-panel-ajustes { padding:var(--dc-sp-24) 0 var(--dc-sp-72); max-width:var(--dc-w-canvas); width:100%; margin:0 auto; }

#prof-panel-ajustes .prof-cabecera { display:flex; flex-direction:column; align-items:flex-start; }
#prof-galeria { position:relative; }

#screen-home .alumno-tabs.riel-nav {
  padding:var(--dc-sp-16) var(--dc-sp-76) var(--dc-sp-10);
}

.opciones { display:flex; flex-direction:column; align-items:flex-start; }
.opcion {
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-52);
  color:var(--dc-ink); letter-spacing:normal; line-height:1.16;
  
  padding:var(--dc-sp-20) var(--dc-sp-24); margin:0 calc(var(--dc-sp-24) * -1);
  text-transform:lowercase;
  text-shadow:var(--dc-shadow-text-strong);
  transform-origin:left center;
  transition:font-size var(--dc-t-lento) var(--dc-ease),
             filter var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease),
             opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  .opcion:hover { font-size:var(--dc-fs-68); }
  .opciones:has(.opcion:hover) .opcion:not(:hover) { filter:blur(1.4px); opacity:.6; }
  .opcion:hover ~ .opcion { transform:translateY(6px); }
  .opcion:has(~ .opcion:hover) { transform:translateY(-6px); }
}
.opcion:active { transform:scale(.99); transition:transform var(--dc-t-press) var(--dc-ease); }

.opcion.apagada { opacity:.5; }
@media (any-hover: hover) { .opcion.apagada:hover { opacity:1; } }
@media (max-width:700px) {
  .opcion { font-size:var(--dc-fs-40); }
  .opcion:hover { font-size:var(--dc-fs-52); }
}

.prof-cabecera { max-width:var(--dc-w-columna); width:100%; margin:0 auto; padding:0; }
@media (max-width:900px) { .prof-cabecera { padding:0 var(--dc-sp-24); } }
.prof-vuelta {
  background:none; border:none; padding:var(--dc-sp-8) 0; cursor:pointer;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-100);
  color:var(--dc-ink); line-height:1.05; letter-spacing:var(--dc-tracking);
  text-transform:lowercase; text-shadow:var(--dc-shadow-text-strong);
  transform-origin:left center;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .prof-vuelta:hover { transform:scale(1.05); } }
.prof-vuelta:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.riel-bloque { margin-top:var(--dc-sp-24); }

.filtros.filtros-riel, .filtros.filtros-tiempos {
  max-width:var(--dc-w-columna); width:100%; margin:0 auto;
  gap:var(--dc-sp-40); padding:0; justify-content:center; text-align:center;
}
.filtros.filtros-riel .ent-op { font-size:var(--dc-fs-40); transform-origin:center; }

.filtros.filtros-tiempos {
  max-width:var(--dc-w-canvas); gap:var(--dc-sp-34); margin-top:var(--dc-sp-8);
  padding-left:var(--dc-sp-40); padding-right:var(--dc-sp-40);
  
  padding-bottom:calc(48 * var(--dc-u)); margin-bottom:calc(-40 * var(--dc-u));
}
.filtros.filtros-tiempos .ent-op { font-size:var(--dc-fs-30); transform-origin:center; }
.filtros.filtros-tiempos .ent-op.apagada { opacity:.28; }
@media (any-hover: hover) { .filtros.filtros-tiempos .ent-op.apagada:hover { opacity:.8; } }

.filtros.filtros-tiempos .ent-op-crear { opacity:.45; font-style:italic; }
@media (any-hover: hover) { .filtros.filtros-tiempos .ent-op-crear:hover { opacity:1; } }
@media (max-width:900px) { .filtros.filtros-riel, .filtros.filtros-tiempos { padding:0 var(--dc-sp-24); } }
@media (max-width:700px) {
  .filtros.filtros-riel .ent-op { font-size:var(--dc-fs-30); }
  .filtros.filtros-riel, .filtros.filtros-tiempos { gap:var(--dc-sp-24); }
}

.persiana {
  overflow:hidden;
  transition:max-height var(--dc-t-entrada) var(--dc-ease),
             opacity var(--dc-t-entrada) var(--dc-ease),
             margin var(--dc-t-entrada) var(--dc-ease),
             padding var(--dc-t-entrada) var(--dc-ease),
             filter var(--dc-t-entrada) var(--dc-ease);
  max-height:calc(200 * var(--dc-u));
}
.persiana.plegada {
  max-height:0 !important; opacity:0; filter:blur(6px); pointer-events:none;
  margin-top:0 !important; margin-bottom:0 !important;
  padding-top:0 !important; padding-bottom:0 !important;
}
@media (prefers-reduced-motion:reduce) { .persiana { transition:none; } }

#prof-selectores { padding-bottom:var(--dc-sp-16); }
.riel-titulo {
  max-width:var(--dc-w-columna); width:100%; margin:0 auto; padding:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); text-transform:lowercase;
  text-shadow:var(--dc-shadow-text-strong);
}
.prof-codigo {
  margin-top:var(--dc-sp-24);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-100);
  color:var(--dc-ink); letter-spacing:calc(10 * var(--dc-u)); line-height:1;
  text-shadow:var(--dc-shadow-text-strong);
}
.riel-vacio {
  max-width:var(--dc-w-columna); width:100%; margin:0 auto; padding:var(--dc-sp-16) 0 var(--dc-sp-40);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink-70);
}

#screen-home .student-list {
  width:100%; max-width:var(--dc-w-columna); margin:0 auto;
}

#screen-home .student-name-row.alumno-nuevo { opacity:.5; }
@media (any-hover: hover) {
  #screen-home .student-list:has(.student-name-row:hover) .student-name-row.alumno-nuevo:not(:hover) { opacity:.28; }
  #screen-home .student-name-row.alumno-nuevo:hover { opacity:1; }
}

#screen-home .alumno-codigo {
  margin-top:var(--dc-sp-34); cursor:pointer;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink-70); letter-spacing:var(--dc-tracking);
  transition:color var(--dc-t-lento) var(--dc-ease);
}
#screen-home .alumno-codigo b { font-weight:var(--dc-weight); color:var(--dc-ink); letter-spacing:calc(4 * var(--dc-u)); }
#screen-home .alumno-codigo:hover { color:var(--dc-ink); }

#screen-home .alumno-vacio {
  text-align:left;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink-70); padding:var(--dc-sp-14) 0;
}

#alumno-panel-clases .alumno-vacio {
  max-width:var(--dc-w-columna); width:100%; margin:0 auto;
  padding:var(--dc-sp-24) 0 0;
}
@media (max-width:900px) { #alumno-panel-clases .alumno-vacio { padding-left:var(--dc-sp-24); padding-right:var(--dc-sp-24); } }
#alumno-panel-clases .vacio-frase {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); line-height:1.25; text-shadow:var(--dc-shadow-text);
  max-width:calc(760 * var(--dc-u));
}
#alumno-panel-clases .opciones { margin-top:var(--dc-sp-24); }
#alumno-panel-clases .opcion { font-size:var(--dc-fs-40); text-transform:none; opacity:.6; }
@media (any-hover: hover) { #alumno-panel-clases .opcion:hover { font-size:var(--dc-fs-52); opacity:1; } }

#screen-home .section-chips.nav-estante,
#screen-home .subsec-row.nav-estante {
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; overflow:visible;
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  border-bottom:none; background:none; backdrop-filter:none;
}
#screen-home .section-chips.nav-estante {
  gap:var(--dc-sp-14); padding:var(--dc-sp-24) var(--dc-sp-76) var(--dc-sp-10);
}
#screen-home .subsec-row.nav-estante {
  gap:var(--dc-sp-10);
  padding:var(--dc-sp-16) var(--dc-sp-76) var(--dc-sp-48) !important;
  margin:0 auto !important;
}

body.is-teacher #screen-home > .scroll { padding-left:0; padding-right:0; }

#screen-home > .scroll { padding-bottom:var(--dc-sp-16); }
body.is-teacher #screen-home .topic-grid {
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:0 var(--dc-sp-76) var(--dc-sp-72);
  gap:var(--dc-sp-34);
}
#screen-home .section-chips::before, #screen-home .subsec-row::before { display:none; }

#screen-home .section-chips.nav-estante .chip,
#screen-home .subsec-row.nav-estante .subsec-pill {
  position:relative; z-index:1;
  font-family:var(--dc-font) !important; font-weight:var(--dc-weight) !important;
  letter-spacing:normal; line-height:1.25; text-transform:lowercase;
  color:var(--dc-ink) !important;
  background:none !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none; border-radius:var(--dc-r-nav);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
#screen-home .section-chips.nav-estante .chip {
  font-size:var(--dc-fs-60) !important; padding:var(--dc-sp-10) var(--dc-sp-40);
}
#screen-home .subsec-row.nav-estante .subsec-pill {
  font-size:var(--dc-fs-30) !important; padding:var(--dc-sp-8) var(--dc-sp-24);
  text-shadow:var(--dc-shadow-text-strong);
}

#screen-home .subsec-row.nav-estante .subsec-pill.active { text-shadow:none; }
#screen-home .section-chips.nav-estante .chip::after,
#screen-home .section-chips.nav-estante .chip.active::after { display:none !important; }
#screen-home .section-chips.nav-estante .chip.crecida,
#screen-home .subsec-row.nav-estante .subsec-pill.crecida { transform:scale(1.12); }
@media (any-hover: hover) {
  #screen-home .section-chips.nav-estante .chip:not(.active):hover,
  #screen-home .subsec-row.nav-estante .subsec-pill:not(.active):hover { transform:scale(1.06); }
}
#screen-home .nav-estante .aula-tab-indicator {
  position:absolute; left:0; top:0; z-index:0; pointer-events:none;
  border-radius:var(--dc-r-nav);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
  transform:translateX(var(--x, 0)) scale(var(--s, 1));
  transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease);
  will-change:transform, width;
}

#screen-home .nav-estante .chip-add,
#screen-home .nav-estante .subsec-add {
  font-family:var(--dc-font-alt) !important; font-weight:400 !important;
  color:var(--dc-ink-70) !important; cursor:pointer;
  line-height:1; padding:0 !important; border-radius:50% !important;
  display:inline-flex; align-items:center; justify-content:center;
}
#screen-home .nav-estante .chip-add {
  font-size:var(--dc-fs-40) !important;
  width:calc(56 * var(--dc-u)); height:calc(56 * var(--dc-u));
}
#screen-home .nav-estante .subsec-add {
  font-size:var(--dc-fs-30) !important;
  width:calc(34 * var(--dc-u)); height:calc(34 * var(--dc-u));
}
@media (any-hover: hover) {
  #screen-home .nav-estante .chip-add:hover,
  #screen-home .nav-estante .subsec-add:hover { color:var(--dc-ink) !important; transform:scale(1.12); }
}

#screen-home .subsec-row.nav-estante .subsec-ctx-btn { top:calc(-6 * var(--dc-u)); right:0; }

#screen-home .alumno-tabs {
  position:relative; display:flex; justify-content:center; gap:var(--dc-sp-14);
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:var(--dc-sp-60) var(--dc-sp-76) var(--dc-sp-34);
  border-bottom:none; background:none; backdrop-filter:none; overflow:visible;
}
#screen-home .alumno-tabs::before { display:none; }
#screen-home .alumno-tabs .aula-tab {
  font-family:var(--dc-font); font-size:var(--dc-fs-60); font-weight:var(--dc-weight);
  letter-spacing:normal; line-height:1.25; text-transform:lowercase;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--dc-ink); background:none; border:none; box-shadow:none;
  padding:var(--dc-sp-10) var(--dc-sp-40); border-radius:var(--dc-r-nav);
  cursor:pointer; position:relative; z-index:1;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}

@media (max-width:480px) {
  #screen-home .alumno-tabs {
    flex-wrap:nowrap; gap:var(--dc-sp-6);
    padding:var(--dc-sp-40) var(--dc-sp-14) var(--dc-sp-24);
  }
  #screen-home .alumno-tabs .aula-tab {
    font-size:var(--dc-fs-30); padding:var(--dc-sp-8) var(--dc-sp-14); white-space:nowrap;
  }
}

@media (max-width:620px) {
  #screen-student .aula-tabs-pill.session-tabs { flex-wrap:nowrap; gap:var(--dc-sp-6); padding-left:var(--dc-sp-14); padding-right:var(--dc-sp-14); }
  #screen-student .aula-tabs-pill .aula-tab { font-size:var(--dc-fs-30); padding:var(--dc-sp-8) var(--dc-sp-14); white-space:nowrap; }
}
#screen-home .alumno-tabs .aula-tab.active { background:none; box-shadow:none; color:var(--dc-ink); }

#screen-home .alumno-tabs .aula-tab::after,
#screen-home .alumno-tabs .aula-tab.active::after { display:none !important; }
#screen-home .alumno-tabs .aula-tab.crecida { transform:scale(1.12); }
#screen-home .alumno-tabs .aula-tab-indicator {
  position:absolute; left:0; z-index:0; pointer-events:none;
  border-radius:var(--dc-r-nav);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
  transform:translateX(var(--x, 0)) scale(var(--s, 1));
  transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease);
  will-change:transform, width;
}

#alumno-panel-disponibles, #alumno-panel-ajustes {
  max-width:var(--dc-w-canvas); margin:0 auto;
  padding:var(--dc-sp-24) var(--dc-sp-76) var(--dc-sp-72);
  min-height:52vh; display:flex; flex-direction:column; justify-content:center;
}
#alumno-panel-ajustes { min-height:40vh; }

#prof-panel-ajustes .prof-cabecera { align-items:center; }
#prof-panel-ajustes .opciones, #alumno-panel-ajustes .opciones { align-items:center; }
#prof-panel-ajustes .opcion,   #alumno-panel-ajustes .opcion { text-align:center; transform-origin:center center; }
#prof-panel-ajustes .prof-cabecera, #alumno-panel-ajustes .aj-cuerpo { text-align:center; }
#prof-panel-ajustes .prof-vuelta { transform-origin:center center; }
#prof-panel-ajustes .ent-campo, #alumno-panel-ajustes .ent-campo,
#prof-panel-ajustes .ent-ayuda, #alumno-panel-ajustes .ent-ayuda { margin-left:auto; margin-right:auto; }
#prof-panel-ajustes .ent-accion, #alumno-panel-ajustes .ent-accion {
  align-self:center; padding-left:var(--dc-sp-24); padding-right:var(--dc-sp-24);
  transform-origin:center center;
}
#prof-panel-ajustes .prof-codigo { text-align:center; }
.aj-cuerpo {
  max-width:var(--dc-w-columna); width:100%; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  padding:var(--dc-sp-24) var(--dc-sp-24) 0;
}
.aj-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); line-height:1.1; text-transform:lowercase;
  text-shadow:var(--dc-shadow-text-strong); margin-bottom:var(--dc-sp-16);
}

#alumno-panel-disponibles {
  min-height:0; justify-content:flex-start;
  padding:0 0 var(--dc-sp-48);
}

#alumno-panel-disponibles .menu-grande .menu-grande-op { max-width:var(--dc-w-canvas); margin:0 auto; }
#alumno-panel-disponibles #disp-detalle > .back-btn {
  align-self:flex-start; font-family:var(--dc-font); font-size:var(--dc-fs-30);
  font-weight:var(--dc-weight); color:var(--dc-ink); text-transform:lowercase;
  background:none; border:none; box-shadow:none; border-radius:0; backdrop-filter:none;
  text-shadow:var(--dc-shadow-text-strong); padding:var(--dc-sp-10) 0;
  width:auto; height:auto; margin:0 0 var(--dc-sp-40) !important;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #alumno-panel-disponibles #disp-detalle > .back-btn:hover { transform:scale(1.06); background:none; } }
#alumno-panel-disponibles #disp-detalle > .back-btn:active { transform:scale(.965); transition:transform var(--dc-t-press) var(--dc-ease); }
#alumno-panel-clases { position:relative; }
.alumno-vacio { text-align:center; padding:var(--dc-sp-72) var(--dc-sp-40); }

#screen-home .disponibles-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong);
  max-width:var(--dc-w-canvas); margin:var(--dc-sp-48) auto var(--dc-sp-24);
  padding:0 var(--dc-sp-76);
}

#screen-lesson { background:var(--dc-bg); }
#screen-lesson .lesson-header { background:none; border:none; box-shadow:none; backdrop-filter:none; padding:0; }
#screen-lesson .lesson-header-inner {
  display:grid; grid-template-columns:1fr 3fr 1.25fr; align-items:baseline;
  column-gap:var(--dc-sp-40);
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:var(--dc-sp-34) var(--dc-sp-76) var(--dc-sp-34);
}

#screen-lesson .marca-alumno {
  grid-column:1; grid-row:1; justify-self:start; align-self:baseline;
  
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-80);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
  cursor:pointer; text-shadow:none;
  transition:transform var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #screen-lesson .marca-alumno:hover { text-shadow:var(--dc-shadow-text-strong); } }
#screen-lesson .marca-alumno:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

#screen-lesson #board-bar-btn {
  grid-column:2; grid-row:1; justify-self:center; align-self:baseline;
}
#screen-lesson .leccion-der {
  grid-column:3; grid-row:1; justify-self:center; align-self:baseline;
  display:flex; align-items:baseline; gap:var(--dc-sp-20);
}
#screen-lesson .lesson-toolbar { display:flex; gap:var(--dc-sp-20); }
#screen-lesson .lesson-header .back-btn {
  font-family:var(--dc-font) !important; font-weight:var(--dc-weight) !important;
  letter-spacing:normal !important; color:var(--dc-ink) !important; text-transform:lowercase;
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important;
  text-shadow:var(--dc-shadow-text-strong);
  width:auto !important; height:auto !important;
  font-size:var(--dc-fs-80) !important; padding:var(--dc-sp-10) var(--dc-sp-24) !important; line-height:1;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #screen-lesson .lesson-header .back-btn:hover { transform:scale(1.06); background:none !important; } }
#screen-lesson .lesson-header .back-btn:active { transform:scale(.965); transition:transform var(--dc-t-press) var(--dc-ease); }

#screen-lesson #lesson-scroll { padding-left:0; padding-right:0; position:relative;
  overscroll-behavior-y:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-40));
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-40)); }
#screen-lesson .session-layout {
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
  padding:0 var(--dc-sp-76); gap:var(--dc-sp-40); align-items:flex-start;
}
#screen-lesson .session-layout > .pills-col { flex:1 1 0; width:auto; min-width:0; }
#screen-lesson .session-layout > .leccion-centro { flex:3 1 0; min-width:0; }
#screen-lesson .leccion-centro > #exercises-container { max-width:none; }
#screen-lesson .session-layout > .notebook-col { flex:1.25 1 0; width:auto; min-width:0; max-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-24));
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-24)); }

#screen-lesson .clase-encabezado { margin-bottom:var(--dc-sp-24); }

#screen-lesson .clase-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); letter-spacing:normal; text-shadow:var(--dc-shadow-text-strong);
  margin:0; white-space:normal; overflow:visible; text-overflow:clip; max-width:none;
}

#screen-lesson .pills-col {
  align-items:flex-start; padding-left:0; padding-right:0; padding-top:var(--dc-sp-24);
  -webkit-mask-image:none; mask-image:none;
}
#screen-lesson .pills-col .class-pill {
  background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-radius:0; text-align:left; width:100%; isolation:auto;
  font-family:var(--dc-font); font-size:var(--dc-fs-50); font-weight:var(--dc-weight);
  color:var(--dc-ink); padding:var(--dc-sp-8) 0; line-height:1.15;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
#screen-lesson .pills-col .class-pill.big { width:100%; background:none; box-shadow:none; font-size:var(--dc-fs-50); }
#screen-lesson .pills-col .pill-scrim { display:none; }
@media (any-hover: hover) {
  #screen-lesson .pills-col .class-pill.clickable:hover { transform:scale(1.03); background:none; box-shadow:none; }
}

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-col {
  background:none; border:none; box-shadow:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-body {
  padding:var(--dc-sp-8) 0 var(--dc-sp-40); gap:var(--dc-sp-10);
  
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-24),
                     #000 calc(100% - var(--dc-sp-60)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-24),
             #000 calc(100% - var(--dc-sp-60)), transparent 100%);
}

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-entry {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); line-height:1.35; letter-spacing:var(--dc-tracking);
  padding:var(--dc-sp-6) var(--dc-sp-24) var(--dc-sp-6) 0;
  text-shadow:none;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-compose-trigger {
  margin:0 0 var(--dc-sp-16); padding:var(--dc-sp-8) 0;
  background:none; box-shadow:none; border:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  justify-content:flex-start;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-compose-trigger textarea {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); caret-color:var(--dc-ink); text-align:left;
  background:none; border:none; outline:none; box-shadow:none; width:100%;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-compose-trigger textarea::placeholder {
  color:var(--dc-ink-70); text-shadow:none;
}

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .note-del {
  position:static; display:inline-block; vertical-align:baseline; width:auto; height:auto;
  margin-left:.55em; padding:.2em .3em;
  font-family:var(--dc-font); font-size:var(--dc-fs-22); line-height:1; letter-spacing:var(--dc-tracking);
  color:var(--dc-ink); background:none; border:none; border-radius:0; opacity:0; cursor:pointer;
  transition:opacity var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-entry:hover .note-del { opacity:.55; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .note-del:hover { opacity:1; background:none; color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
@media (hover:none) { :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .note-del { opacity:.35; } }

#screen-student .pills-col.teacher-mode .class-pill .pill-del {
  position:static; display:inline-block; vertical-align:middle; width:auto; height:auto;
  margin-left:.6em; padding:.25em .35em; border-radius:0; background:none; transform:none;
  font-family:var(--dc-font); font-size:var(--dc-fs-22); line-height:1; letter-spacing:var(--dc-tracking);
  color:var(--dc-ink); opacity:0; text-shadow:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease);
}
#screen-student .pills-col.teacher-mode .class-pill:hover .pill-del { opacity:.55; transform:none; }
#screen-student .pills-col.teacher-mode .class-pill .pill-del:hover { opacity:1; background:none; text-shadow:var(--dc-shadow-text-strong); }
@media (hover:none) { #screen-student .pills-col.teacher-mode .class-pill .pill-del { opacity:.35; } }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .notebook-empty {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink-70); text-align:left; padding:var(--dc-sp-16) 0;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .note-cursor { background:var(--dc-ink); }

#screen-classrooms { background:var(--dc-bg); }

#screen-classrooms .classrooms-header {
  justify-content:flex-start; padding:var(--dc-sp-34) var(--dc-sp-76) 0;
  max-width:var(--dc-w-canvas); width:100%; margin:0 auto;
}
#screen-classrooms .classrooms-header .back-btn {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); background:none; border:none; box-shadow:none; border-radius:0;
  text-shadow:var(--dc-shadow-text-strong);
  padding:var(--dc-sp-10) 0; width:auto; height:auto; backdrop-filter:none;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
#screen-classrooms .classrooms-header .back-btn:hover { transform:scale(1.07); }
#screen-classrooms .classrooms-header .back-btn:hover {
  background:none; transform:none; box-shadow:none;
}

#screen-classrooms .student-name-row,
#screen-home .student-name-row {
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:var(--dc-sp-14) 0;
  cursor:pointer; font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--dc-fs-100); color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  line-height:1.05; margin-bottom:0;
  transform-origin:left center; will-change:transform;
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}

@media (any-hover: hover) {
#screen-classrooms .student-list:has(.student-name-row:hover) .student-name-row:not(:hover),
#screen-home .student-list:has(.student-name-row:hover) .student-name-row:not(:hover) {
  opacity:.45;
}

#screen-classrooms .student-name-row:hover,
#screen-home .student-name-row:hover { transform:scale(1.055); }
}

#screen-classrooms .student-name-row,
#screen-home .student-name-row { position:relative; isolation:isolate; }
.student-aura {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  display:flex; align-items:center;
  font:inherit; letter-spacing:inherit; line-height:inherit;
  color:transparent; white-space:pre;
  
  text-shadow:0 0 calc(26 * var(--dc-u)) rgba(var(--accent2-rgb),.52),
              0 0 calc(60 * var(--dc-u)) rgba(var(--accent2-rgb),.30),
              0 0 calc(110 * var(--dc-u)) rgba(var(--accent2-rgb),.16);
  animation:auraViva 2.6s ease-in-out infinite;
  will-change:opacity;
}
@keyframes auraViva { 0%,100% { opacity:.28; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .student-aura { animation:none; opacity:.85; } }
#screen-classrooms .student-name-row .student-presence-dot,
#screen-home .student-name-row .student-presence-dot { display:none; }
#screen-classrooms .estudiantes-scroll-track {
  width:var(--dc-sp-18); margin:var(--dc-sp-40) 0;
  border-radius:var(--dc-radius-pill); background:rgba(255,255,255,.10); position:relative; flex-shrink:0;
}
#screen-classrooms .estudiantes-scroll-thumb {
  position:absolute; left:0; right:0; border-radius:var(--dc-radius-pill);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
}

#aula-clase-abierta .clase-encabezado {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--dc-sp-20); margin-bottom:var(--dc-sp-24);
}

#aula-clase-abierta .clase-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); letter-spacing:normal; text-shadow:var(--dc-shadow-text-strong);
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
}

#aula-clase-abierta .clase-vacia-btn {
  display:block; margin:var(--dc-sp-60) auto; background:none; border:none;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); cursor:pointer;
  padding:var(--dc-sp-10) var(--dc-sp-24);
}
#aula-clase-abierta .reset-progress-btn {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); background:none; border:none; box-shadow:none; border-radius:0;
  text-shadow:var(--dc-shadow-text-strong); padding:0; cursor:pointer; white-space:nowrap;
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
#aula-clase-abierta .reset-progress-btn:hover {
  background:none; color:var(--dc-ink); transform:scale(1.06);
}

:is(#aula-clase-abierta, #screen-lesson) .clases-dia {
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--dc-sp-10) var(--dc-sp-34);
  max-height:0; opacity:0; overflow:hidden; margin:0; padding:0;
  transition:max-height .42s var(--dc-ease), opacity .34s var(--dc-ease),
             margin .42s var(--dc-ease), padding .42s var(--dc-ease);
}
:is(#aula-clase-abierta, #screen-lesson) .clases-dia.abierta {
  max-height:calc(300 * var(--dc-u)); opacity:1;
  padding:calc(14 * var(--dc-u)) calc(40 * var(--dc-u)) calc(56 * var(--dc-u));
  margin:calc(-14 * var(--dc-u)) calc(-40 * var(--dc-u)) calc(var(--dc-sp-24) - 56 * var(--dc-u));
}

#screen-lesson .clase-titulo.con-dia { cursor:pointer; }
#screen-lesson .clases-dia.bloqueada .dia-clase { cursor:default; }
#screen-lesson .clases-dia.bloqueada .dia-clase:not(.activa) { opacity:.34; }
@media (any-hover: hover) { #screen-lesson .clases-dia.bloqueada .dia-clase:hover { transform:none; } }
#screen-lesson .clases-dia .dia-nota { font-family:var(--dc-font); font-size:var(--dc-fs-20, calc(20 * var(--dc-u)));
  color:var(--dc-ink); opacity:.55; letter-spacing:var(--dc-tracking); align-self:center; }
#screen-lesson .leccion-centro { transition:opacity .24s var(--dc-ease), filter .24s var(--dc-ease); }
#screen-lesson .leccion-centro.lv-cambiando { opacity:0; filter:blur(8px); pointer-events:none; }

#aula-clase-abierta #live-view-content { transition:opacity .24s var(--dc-ease), filter .24s var(--dc-ease); }
#aula-clase-abierta #live-view-content.lv-cambiando { opacity:0; filter:blur(8px); pointer-events:none; }
:is(#aula-clase-abierta, #screen-lesson) .dia-clase,
:is(#aula-clase-abierta, #screen-lesson) .dia-otra {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); letter-spacing:normal; text-shadow:var(--dc-shadow-text-strong);
  background:none; border:none; padding:0; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:var(--dc-sp-14);
  opacity:.58; transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
:is(#aula-clase-abierta, #screen-lesson) .dia-clase.activa { opacity:1; }
@media (any-hover: hover) {
  :is(#aula-clase-abierta, #screen-lesson) .dia-clase:hover,
  :is(#aula-clase-abierta, #screen-lesson) .dia-otra:hover { opacity:1; transform:scale(1.05); }
}

:is(#aula-clase-abierta, #screen-lesson) .dia-quitar {
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-20);
  color:var(--dc-ink); letter-spacing:normal; text-shadow:var(--dc-shadow-text-strong);
  opacity:0; transition:opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { :is(#aula-clase-abierta, #screen-lesson) .dia-clase:hover .dia-quitar { opacity:.62; } }
@media (hover:none) { :is(#aula-clase-abierta, #screen-lesson) .dia-quitar { opacity:.5; } }

#screen-student.clase-modo #aula-panel-clase { max-width:none; padding:0; }
#aula-clase-abierta .clase-cuerpo { padding:0 var(--dc-sp-76); }

#screen-student.clase-modo #aula-panel-clase > div { padding:0; }

#aula-clase-abierta .session-layout > #live-view-content { max-width:none; margin:0; }

#screen-student.clase-modo #aula-scroll { padding-left:0; padding-right:0; }

#screen-student.clase-modo > .classrooms-header {
  grid-template-columns:1fr 3fr 1.25fr;
  column-gap:var(--dc-sp-40);
  
  padding-left:var(--dc-sp-76); padding-right:var(--dc-sp-76);
}
#screen-student.clase-modo > .classrooms-header #t-notebook-toggle-btn { justify-self:center; }

#screen-student.clase-modo > .classrooms-header { align-items:baseline; }
#screen-student.clase-modo > .classrooms-header #student-detail-name,
#screen-student.clase-modo > .classrooms-header #hc-board-btn,
#screen-student.clase-modo > .classrooms-header #t-notebook-toggle-btn { align-self:baseline; }
#aula-clase-abierta .session-layout {
  max-width:none; width:100%; gap:var(--dc-sp-40); align-items:flex-start;
}

#aula-clase-abierta .session-layout > .pills-col-shell,
#aula-clase-abierta .session-layout > .notebook-col,
#screen-lesson .session-layout > .pills-col,
#screen-lesson .session-layout > .notebook-col {
  top:var(--clase-top, 8px);
  height:var(--clase-alto, calc(100vh - 220px));
}

#aula-clase-abierta .session-layout > .pills-col-shell { flex:1 1 0; width:auto; min-width:0; }
#aula-clase-abierta .session-layout > #live-view-content { flex:3 1 0; width:auto; min-width:0; }
#aula-clase-abierta .session-layout > .notebook-col { flex:1.25 1 0; width:auto; min-width:0; }

#screen-student.clase-modo #aula-scroll {
  overflow:hidden; -webkit-mask-image:none; mask-image:none; padding-bottom:0;
}
#aula-clase-abierta .session-layout {
  gap:0; align-items:stretch; height:var(--clase-alto, calc(100vh - 220px));
}
#aula-clase-abierta .session-layout > .pills-col-shell,
#aula-clase-abierta .session-layout > .notebook-col { position:relative; top:auto; height:auto; }
#aula-clase-abierta .session-layout > #live-view-content {
  height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:none; box-sizing:border-box;
  padding:var(--dc-sp-34) var(--dc-sp-40) var(--dc-sp-72);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-34), #000 calc(100% - var(--dc-sp-60)), transparent 100%),
                     linear-gradient(to right, transparent 0, #000 var(--dc-sp-24), #000 calc(100% - var(--dc-sp-24)), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--dc-sp-34), #000 calc(100% - var(--dc-sp-60)), transparent 100%),
             linear-gradient(to right, transparent 0, #000 var(--dc-sp-24), #000 calc(100% - var(--dc-sp-24)), transparent 100%);
  mask-composite:intersect;
}
#aula-clase-abierta .session-layout > #live-view-content::-webkit-scrollbar { display:none; }

#screen-lesson #lesson-scroll { overscroll-behavior-y:none; }
#aula-clase-abierta .pills-col-shell .pills-col { width:100%; }

#aula-clase-abierta .pills-col.teacher-mode {
  align-items:flex-start; padding-left:0; padding-right:0;
  padding-top:calc(112 * var(--dc-u));
  -webkit-mask-image:none; mask-image:none;
}

#screen-student .pills-compose-trigger { width:100%; max-width:100%; }

#aula-clase-abierta .notebook-col { width:100%; }

#aula-clase-abierta .notebook-col { max-width:none; }

#screen-student .pills-compose-trigger,
#screen-student .pills-compose-trigger:hover,
#screen-student .pills-compose-trigger.active,
#screen-student .pills-compose-trigger.design-pinned {
  background:var(--dc-pill-metal); border-radius:var(--dc-r-nav);
  
  box-shadow:0 6px 18px rgba(20,30,45,.28);
}

#screen-student .pills-compose-trigger {
  margin:0 0 var(--dc-sp-36); padding:var(--dc-sp-16) var(--dc-sp-24);
}
#screen-student .pills-compose-trigger input {
  font-family:var(--dc-font); font-size:var(--dc-fs-34); font-weight:var(--dc-weight);
}

#screen-student .pills-col.teacher-mode .class-pill {
  background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-radius:0; text-align:left; width:100%; isolation:auto;
  font-family:var(--dc-font); font-size:var(--dc-fs-50); font-weight:var(--dc-weight);
  color:var(--dc-ink); padding:var(--dc-sp-8) 0; line-height:1.15;
  
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
#screen-student .pills-col.teacher-mode .class-pill.big {
  width:100%; background:none; box-shadow:none;
  font-size:var(--dc-fs-50); padding:var(--dc-sp-8) 0;
}
#screen-student .pills-col.teacher-mode .pill-scrim { display:none; }