.classes-reference-layout .workspace [hidden]{display:none!important}
.classes-reference-layout .workspace.professors-agenda-active{grid-template-columns:minmax(0,1fr)!important}
.classes-reference-layout .workspace.professors-agenda-active>.side{display:none!important}
.classes-reference-layout .prof-agenda .pa-head{flex-wrap:wrap}
.classes-reference-layout .header{display:flex!important;flex-wrap:wrap!important;gap:15px!important}
.classes-reference-layout .header .title{flex:1;min-width:230px}
.classes-reference-layout .header .tools{flex-wrap:wrap;min-width:0}
.title .title-icon-art{width:80px;height:80px;padding:0;border:0;border-radius:0;background:transparent;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.34))}
.classes-reference-layout #classesProgram{display:none}
.classes-reference-layout .metric-progress{display:none!important}
@media(max-width:650px){.classes-reference-layout .header .class-footer-actions{flex-wrap:wrap}.classes-reference-layout .header .class-footer-actions .btn{white-space:normal!important}.classes-reference-layout .header .tools{justify-content:flex-start!important}}
@media(max-width:650px){.title .title-icon-art{width:60px;height:60px}}
#classScheduleDialog{width:min(760px,calc(100% - 24px));max-height:90dvh;padding:0;border:1px solid #36534d;border-radius:20px;background:#0d1920;color:#f3f8f8;box-shadow:0 30px 100px #0009;overflow:auto}
#classScheduleDialog::backdrop{background:#02080dce;backdrop-filter:blur(6px)}
#classScheduleDialog #form{display:block;position:relative;padding:28px;border:0;background:linear-gradient(145deg,#14252b,#0a151c);border-radius:0}
#classScheduleDialog h2{font:700 30px Rajdhani,system-ui;margin:5px 40px 0 0}#classScheduleDialog p{font-size:12px;line-height:1.6;color:#a1b7c0;max-width:580px}
.schedule-eyebrow{font-size:10px;letter-spacing:1.6px;color:#79ebb0;font-weight:700}.schedule-x{position:absolute;right:18px;top:18px;width:36px;height:36px;border:1px solid #ffffff25;background:#ffffff08;color:#d6e7e6;border-radius:50%;font-size:23px;cursor:pointer}
.schedule-preview{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;background:#071419;border:1px solid #73e9a32c;border-radius:12px;padding:17px;margin:19px 0 15px}.schedule-preview small{font-size:9px;letter-spacing:1px;color:#80a99d}.schedule-preview b,.schedule-preview span{display:block;margin-top:7px;font-size:13px}.schedule-preview span{font-size:11px;color:#99adb5}
.schedule-presets{display:flex;gap:7px;margin-top:8px}.schedule-presets button{border:1px solid #91b8c333;border-radius:6px;background:transparent;color:#a8cfc0;font-size:11px;padding:6px 10px;cursor:pointer}#classScheduleDialog .fields{gap:10px 16px}#classScheduleDialog .input,#classScheduleDialog .select{font-size:14px;padding:12px;color-scheme:dark}#classScheduleDialog label{font-size:12px}#classScheduleDialog .actions{margin-top:20px}#classScheduleDialog .btn{padding:12px 17px}#classScheduleDialog button:disabled{opacity:.55;cursor:wait}.schedule-error,.schedule-success{padding:12px;border-radius:9px;font-size:12px;line-height:1.5;margin:12px 0}.schedule-error{background:#f66a6a12;color:#ffb1b1;border:1px solid #ff777744}.schedule-success{background:#66eea412;color:#92efba;border:1px solid #66eea444}#classScheduleDialog [hidden]{display:none!important}
.prof-agenda{--pa-line:#a6c4d326;--pa-muted:#94aab4;margin-bottom:20px;border:1px solid var(--pa-line);border-radius:15px;background:#0b1720;overflow:hidden;color:#eef6f6}.prof-agenda[hidden]{display:none}.pa-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.pa-head h2{font:700 25px Rajdhani,system-ui;margin:0}.pa-head p{margin:5px 0 0;font-size:11px;color:var(--pa-muted)}.pa-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.prof-agenda button,.prof-agenda input,.prof-agenda select{font:12px Inter,system-ui;color:#dfeeed;background:#0c1c25;border:1px solid var(--pa-line);border-radius:8px;padding:9px;cursor:pointer;color-scheme:dark}.prof-agenda input{cursor:text}.pa-week{display:grid;grid-template-columns:38px repeat(7,minmax(65px,1fr)) 38px;gap:8px;padding:0 20px 16px}.pa-week .pa-day{padding:10px 5px}.pa-day b,.pa-day span{display:block}.pa-day b{text-transform:capitalize;font-size:11px}.pa-day span{margin-top:5px;font-size:12px;color:var(--pa-muted)}.pa-week .selected{background:#1a4936;border-color:#60dfa0;color:#edfff3}.pa-week .selected span{color:#a4f2c6}.pa-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:13px 20px;background:#ffffff03;border-top:1px solid var(--pa-line);border-bottom:1px solid var(--pa-line);font-size:11px;color:var(--pa-muted)}.pa-summary strong{color:#f2f8f7;font-size:16px;margin-right:4px}.pa-title{margin-right:auto;text-transform:capitalize;color:#d7e9e8}.pa-scroll{overflow:auto;max-height:640px}.pa-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12px}.pa-grid th{position:sticky;top:0;z-index:1;background:#10212b;padding:15px 12px;text-align:left;border-bottom:1px solid var(--pa-line);font-weight:600}.pa-grid th small{display:block;color:var(--pa-muted);font-weight:400;font-size:10px;margin-top:5px}.pa-grid th:first-child{width:90px}.pa-grid td{vertical-align:top;border-bottom:1px solid var(--pa-line);border-right:1px solid var(--pa-line);padding:9px}.pa-grid td:first-child{font-weight:600;color:#a9bec6;padding:18px 12px}.pa-grid .pa-class{display:block;width:100%;text-align:left;border-left:3px solid var(--pa-color,#74afef);background:linear-gradient(120deg,#172d37,#0e1e28);padding:12px;margin-bottom:5px;border-radius:9px;cursor:pointer}.pa-class:hover{filter:brightness(1.15)}.pa-class b{font-size:13px}.pa-class small{display:block;font-size:10px;color:#9fb5bf;margin-top:7px}.pa-status{display:inline-block;margin-top:10px;border-radius:5px;padding:4px 6px;font-size:9px;background:#609de622;color:#afd0ff}.pa-status.done{background:#68dea222;color:#8ee8b4}.pa-status.live{background:#efb35b22;color:#f4cb8e}.pa-empty-cell{display:block;padding:10px;color:#405762}.pa-empty{padding:45px 20px;text-align:center;color:var(--pa-muted);font-size:13px}.pa-error{color:#ffadad}.pa-footer{padding:12px 20px;color:var(--pa-muted);font-size:10px}.pa-head .pa-new{background:#24583d;border-color:#6bdaa055;color:#ecfff4}.pa-detail-dialog{width:min(540px,calc(100% - 24px));border:1px solid #51796b;border-radius:16px;background:#10212b;color:#edf7f5;padding:25px}.pa-detail-dialog::backdrop{background:#030a10bd;backdrop-filter:blur(4px)}.pa-detail-dialog h2{font:700 25px Rajdhani;margin-top:0}.pa-detail-dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:13px}.pa-detail-dialog dt{color:#9bb1ba}.pa-detail-dialog dd{margin:0;text-align:right}.pa-detail-dialog .pa-detail-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:25px}.pa-detail-actions a,.pa-detail-actions button{padding:10px 15px;border-radius:8px;border:1px solid #92c5b444;color:#e7f8f2;background:#205039;text-decoration:none;font:12px Inter,system-ui;cursor:pointer}
@media(max-width:720px){#classScheduleDialog #form{padding:20px}.schedule-preview{grid-template-columns:1fr 1fr}.schedule-preview>div:first-child{grid-column:1/-1}.pa-head{align-items:flex-start;flex-direction:column;padding:15px}.pa-week{display:flex;overflow:auto;padding:0 15px 15px}.pa-week button{min-width:58px}.pa-summary{padding:12px 15px}.pa-title{width:100%}.pa-controls{width:100%}.pa-controls select{max-width:180px}.pa-grid th:first-child{width:70px}}

/* Al sumar alumnos, el modal conserva su tamaño: sólo la nómina desplaza. */
#classScheduleDialog{overflow:hidden}
#classScheduleDialog #form:not(.roster-mode){display:flex;height:min(820px,90dvh);max-height:90dvh;min-height:0;flex-direction:column;overflow:hidden}
/* Al programar, la ficha superior queda siempre a la vista y el cuerpo del
   formulario desplaza dentro del popup. El pie no puede salir por debajo
   del diálogo ni tapar el bloque de alumnos. */
#classScheduleDialog #form:not(.roster-mode) #classForm{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding-right:5px}
#classScheduleDialog #form:not(.roster-mode) #classForm .actions{position:sticky;z-index:2;bottom:0;flex:0 0 auto;justify-content:flex-end;margin-top:auto;padding:14px 0 2px;background:linear-gradient(180deg,rgba(13,25,32,0),#0d1920 24%)}
#classScheduleDialog #form.roster-mode{display:flex;height:min(820px,90dvh);max-height:90dvh;min-height:0;flex-direction:column;overflow:hidden}
#classScheduleDialog #form.roster-mode #roster{display:flex;min-height:0;flex:1;flex-direction:column;margin-top:10px;overflow:hidden}
#classScheduleDialog #form.roster-mode #rosterList{min-height:72px;max-height:none;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 5px 0 0}
#classScheduleDialog #form.roster-mode #roster .actions{position:relative;z-index:1;flex:0 0 auto;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(166,196,211,.14);background:#0c1820}
@media(max-width:720px){#classScheduleDialog #form:not(.roster-mode){height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}#classScheduleDialog #form:not(.roster-mode) #classForm .actions{padding-top:12px}#classScheduleDialog #form.roster-mode{height:90dvh;padding:20px 16px}#classScheduleDialog #form.roster-mode #rosterList{min-height:56px}}

/* Registro de clase iniciada: misma información, con una altura más
   contenida para que el botón de guardado y el bloque de alumnos queden
   visibles sin que el operador tenga que recorrer un formulario enorme. */
#classScheduleDialog #form[data-class-entry-mode="started"]{padding:20px 28px 18px}
#classScheduleDialog #form[data-class-entry-mode="started"] h2{font-size:28px;line-height:1.05}
#classScheduleDialog #form[data-class-entry-mode="started"]>p{margin:7px 0 0;line-height:1.4}
#classScheduleDialog #form[data-class-entry-mode="started"] .schedule-preview{margin:14px 0 10px;padding:12px 15px}
#classScheduleDialog #form[data-class-entry-mode="started"] .schedule-preview b,#classScheduleDialog #form[data-class-entry-mode="started"] .schedule-preview span{margin-top:4px}
#classScheduleDialog #form[data-class-entry-mode="started"] .fields{gap:7px 14px}
#classScheduleDialog #form[data-class-entry-mode="started"] .field label{margin:6px 0 4px}
#classScheduleDialog #form[data-class-entry-mode="started"] .input,#classScheduleDialog #form[data-class-entry-mode="started"] .select{padding:9px 11px}
#classScheduleDialog #form[data-class-entry-mode="started"] .schedule-presets{margin-top:5px}
#classScheduleDialog #form[data-class-entry-mode="started"] .schedule-presets button{padding:5px 9px}
#classScheduleDialog #form[data-class-entry-mode="started"] .actions{margin-top:13px}

/* Programar clase: en pantallas de escritorio el formulario completo entra
   como una única ficha. El desplazamiento queda reservado para la nómina de
   alumnos al editar una clase ya creada, no para la carga inicial. */
@media (min-width:721px) and (min-height:800px){
  #classScheduleDialog{width:min(860px,calc(100% - 32px));max-height:none;overflow:visible}
  #classScheduleDialog #form:not(.roster-mode){display:block;height:auto;max-height:none;min-height:0;padding:20px 26px 18px;overflow:visible}
  #classScheduleDialog #form:not(.roster-mode) #classForm{display:block;min-height:0;overflow:visible;padding-right:0}
  #classScheduleDialog #form:not(.roster-mode) #classForm .actions{position:static;margin-top:14px;padding:12px 0 0;background:transparent}
  #classScheduleDialog h2{display:flex;align-items:center;gap:10px;margin:0 44px 0 0;font-size:29px;line-height:1.05}
  .schedule-title-palm{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid #73e9a360;border-radius:11px;background:linear-gradient(145deg,#295d4a,#172f32);font-size:22px;box-shadow:inset 0 0 14px #83f5ac20}
  #classScheduleDialog p{margin:5px 0 0;line-height:1.35}
  .schedule-x{right:16px;top:16px;width:34px;height:34px}
  .schedule-preview{gap:14px;margin:12px 0 9px;padding:11px 14px}
  .schedule-preview b,.schedule-preview span{margin-top:4px}
  #classScheduleDialog .fields{gap:6px 14px}
  #classScheduleDialog .field label{margin:5px 0 3px}
  #classScheduleDialog .input,#classScheduleDialog .select{padding:9px 11px}
  #classScheduleDialog .schedule-presets{margin-top:5px}
  #classScheduleDialog .schedule-presets button{padding:5px 9px}
  #classScheduleDialog #durationHelp{margin-top:3px!important}
}

/* Sistema de cabecera: Canchas define la composición. Clases conserva sus
   accesos y su ilustración propia, pero comparte ritmo, escala y divisor. */
.classes-reference-layout .header{align-items:center!important;gap:16px!important;padding-bottom:0!important;margin-bottom:28px!important;border-bottom:0!important}
.classes-reference-layout .header .title{gap:12px!important}
.classes-reference-layout .header .title h1{margin:0!important;font:700 38px/1 Rajdhani,Inter,system-ui,sans-serif!important;letter-spacing:0!important}
.classes-reference-layout .header .title p{margin:5px 0 0!important;color:var(--muted)!important;font:13px/1.25 Inter,system-ui,sans-serif!important}
.classes-reference-layout .header .tools{align-items:center!important}
@media(max-width:700px){.classes-reference-layout .header{gap:14px!important;padding-bottom:0!important;margin-bottom:20px!important}.classes-reference-layout .header .title h1{font-size:31px!important}.classes-reference-layout .header .title p{font-size:12px!important}}