*{box-sizing:border-box}
:root{
 --navy:#172033;--navy2:#202b44;--ink:#1f2937;--muted:#6b7280;--bg:#f5f7fa;
 --card:#fff;--accent:#5865f2;--accent2:#747cff;--green:#20a779;--line:#e4e8ef;
 --danger:#e55757;--amber:#f0a43a;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
body{margin:0;min-height:100vh;background:#f4f6fa;color:var(--ink)}
button,input,select{font:inherit}button{cursor:pointer}
.shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,.82fr) minmax(540px,1.18fr)}
.hero{padding:6vw;background:var(--navy);color:white;display:flex;flex-direction:column;justify-content:center;min-height:100vh;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(88,101,242,.17);right:-250px;bottom:-210px}
.brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#8b5cf6);font-weight:900;margin-bottom:26px;box-shadow:0 18px 50px rgba(0,0,0,.2)}
.eyebrow{font-size:.76rem;font-weight:850;letter-spacing:.14em;color:#8ea0bd;margin:0 0 10px}
.hero h1{font-size:clamp(2.8rem,4.8vw,5.4rem);line-height:.98;margin:0;letter-spacing:-.055em;max-width:800px}
.hero-copy{max-width:650px;color:#c7d0de;font-size:1.08rem;line-height:1.7;margin:28px 0 34px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;z-index:1}
.choice-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:white;border-radius:20px;padding:17px;display:flex;gap:13px;text-align:left;align-items:center;transition:.2s}
.choice-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.choice-icon{font-size:1.65rem}.choice-card strong{display:block;margin-bottom:4px}.choice-card small{color:#aebbd0;line-height:1.3}
.flow-note{display:flex;gap:9px;flex-wrap:wrap;align-items:center;color:#8796ac;font-size:.82rem;margin-top:28px;z-index:1}.flow-note b{opacity:.5}
.panel{min-height:100vh;padding:5vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#fff,#f4f6fa)}
.panel-view{display:none;max-width:570px;width:100%;margin:0 auto}.panel-view.active{display:block}.panel-view.wide-view{max-width:820px}
.panel h2{font-size:2.15rem;letter-spacing:-.04em;margin:0 0 12px}.panel h3{letter-spacing:-.025em}.panel p{color:var(--muted);line-height:1.55}
.status-pill{display:inline-flex;background:#edf0ff;color:var(--accent);border-radius:999px;padding:7px 12px;font-size:.77rem;font-weight:800}
.back-btn{border:0;background:transparent;color:var(--muted);padding:0;margin-bottom:28px}
.tabs{display:flex;background:#eef1f6;border-radius:14px;padding:5px;margin:24px 0}.tab{flex:1;border:0;background:transparent;padding:11px;border-radius:10px;font-weight:750;color:var(--muted)}.tab.active{background:white;color:var(--ink);box-shadow:0 3px 12px rgba(23,32,51,.07)}
.form{display:none}.form.active{display:block}
label{display:block;font-weight:730;font-size:.9rem;margin-bottom:15px}
input,select{width:100%;margin-top:7px;border:1px solid #dce2eb;background:white;border-radius:13px;padding:13px 14px;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(88,101,242,.1)}
.primary-btn,.secondary-btn,.ghost-btn,.danger-btn{border:0;border-radius:13px;font-weight:800}
.primary-btn{width:100%;padding:14px 17px;color:white;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 28px rgba(88,101,242,.18)}
.primary-btn.compact{width:auto;padding:12px 15px}.secondary-btn{padding:11px 14px;background:#edf0ff;color:var(--accent)}.ghost-btn{padding:10px 13px;background:#eef1f6;color:var(--ink)}
.form-note{font-size:.82rem}
.dashboard-top,.setup-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.family-intro,.home-card,.student-card,.code-box,.read-only-note{border:1px solid var(--line);background:white;border-radius:18px;padding:18px;margin-bottom:14px}
.family-intro{display:flex;justify-content:space-between;align-items:center;gap:18px}.family-intro p{margin:5px 0 0}
.code-box{display:flex;justify-content:space-between;align-items:center;gap:16px;border-color:#cfd5ff;background:#f6f7ff}.code-box strong{font-size:1.65rem;letter-spacing:.08em;color:var(--accent);display:block;margin:5px 0}.code-box small{display:block;color:var(--muted)}
.hidden{display:none!important}.student-list{display:grid;gap:12px}.student-card{margin:0;display:flex;justify-content:space-between;align-items:center;gap:15px}.student-meta strong{display:block}.student-meta small{color:var(--muted)}.student-actions{display:flex;gap:8px;flex-wrap:wrap}
.read-only-note{background:#f8f9fb;color:#5c6676;font-size:.9rem}
.subject-entry{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:end}.subject-entry input{margin:0}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}.chip{border:0;background:#eef1ff;color:#4049bb;border-radius:999px;padding:8px 11px;font-weight:700;font-size:.85rem}.chip span{opacity:.55;margin-left:6px}
.setup-step{display:none}.setup-step.active{display:block}.schedule-days{display:grid;gap:14px}.day-card{background:white;border:1px solid var(--line);border-radius:17px;padding:15px}.day-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.day-card h4{margin:0}.class-row{display:grid;grid-template-columns:minmax(180px,1.45fr) minmax(105px,.72fr) minmax(105px,.72fr) auto;gap:12px;align-items:end;margin:12px 0;padding-top:2px}.class-row select{margin:0;padding:11px 12px}.time-field{margin:0;font-size:.72rem;color:var(--muted);font-weight:800}.time-field span{display:block;margin:0 0 6px 2px}.time-field select{color:var(--ink);font-weight:650}.remove-row{width:38px;height:38px;border:0;border-radius:10px;background:#fff0f0;color:#a83232;font-weight:900}.add-class{border:0;background:transparent;color:var(--accent);font-weight:800;padding:6px 0}.setup-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.student-home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}.home-card{margin:0}.home-card.main-card{grid-row:span 2;background:linear-gradient(135deg,#fff,#f6f7ff)}.tiny-label{font-size:.7rem;font-weight:850;letter-spacing:.12em;color:#8c99aa}.home-card h3{font-size:1.5rem;margin:8px 0 8px}.home-card strong{font-size:1.25rem}
.message-box{max-width:820px;width:100%;margin:16px auto 0;border-radius:12px;padding:0;font-size:.9rem}.message-box.show{padding:12px 14px;background:#eef1f6}.message-box.error{background:#fff0f0;color:#9f3030}.message-box.success{background:#ecfbf5;color:#126c4e}
@media(max-width:1000px){.shell{grid-template-columns:1fr}.hero{min-height:auto;padding:44px 24px 34px}.hero h1{font-size:3rem}.panel{min-height:auto;padding:38px 22px 60px}.choice-grid{max-width:650px}}
@media(max-width:650px){.choice-grid{grid-template-columns:1fr}.family-intro,.code-box,.student-card,.dashboard-top,.setup-head{align-items:stretch;flex-direction:column}.student-actions{width:100%}.student-actions button{flex:1}.subject-entry{grid-template-columns:1fr}.class-row{grid-template-columns:1fr 1fr auto;gap:9px}.class-row>.row-subject{grid-column:1/-1}.time-field select{width:100%}.student-home-grid{grid-template-columns:1fr}.home-card.main-card{grid-row:auto}.setup-actions{flex-direction:column-reverse}.setup-actions button{width:100%}}

/* v0.4 fixed: horario con desplegables normales */
.class-row{
  grid-template-columns:minmax(180px,1.5fr) minmax(120px,.8fr) minmax(120px,.8fr) 40px;
  gap:10px;
}
.class-row select{
  min-height:44px;
  border:1px solid #dce2eb;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  color:var(--ink);
}
.class-row select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(88,101,242,.1);
  outline:none;
}
@media(max-width:650px){
  .class-row{grid-template-columns:1fr 1fr}
  .class-row .row-subject{grid-column:1/-1}
  .remove-row{grid-column:2;justify-self:end}
}

/* v0.5 — navegación y horario editable */
.student-nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px;padding:6px;background:#f2f4f8;border-radius:14px}
.student-nav-btn{border:0;background:transparent;color:#667085;padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer}
.student-nav-btn.active,.student-nav-btn:hover{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(20,28,45,.08)}
.day-card{border:1px solid #dfe4ec;border-radius:16px;padding:16px;margin-bottom:14px;background:#fff}
.day-card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.day-card-head h3,.day-card-head h4{margin:0;font-size:1.15rem;color:var(--ink)}
.day-kicker{display:block;font-size:.68rem;letter-spacing:.12em;font-weight:900;color:var(--accent);margin-bottom:3px}
.muted-copy{color:var(--muted);margin:.3rem 0 0}
@media(max-width:650px){
  .student-nav{overflow-x:auto;flex-wrap:nowrap}
  .student-nav-btn{white-space:nowrap}
  .day-card-head{align-items:flex-start}
}

/* v0.6 — tareas, semana y calendario */
.items-stack{display:grid;gap:10px;margin:14px 0 18px}
.empty-state{color:#87909f;font-size:.9rem}
.agenda-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:14px;background:#fff}
.agenda-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f3f5f9}
.agenda-body{min-width:0}
.agenda-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.agenda-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-top>span{font-size:.74rem;color:#7c8798;white-space:nowrap}
.agenda-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
.agenda-meta span{font-size:.72rem;padding:3px 7px;border-radius:999px;background:#f1f3f7;color:#667085}
.item-subject{background:#edf0ff!important;color:var(--accent)!important}
.item-done-btn{width:34px;height:34px;border:0;border-radius:10px;background:#eef9f4;color:#13815d;font-weight:900}
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.58);display:grid;place-items:center;padding:20px;z-index:100}
.modal-card{width:min(620px,100%);max-height:92vh;overflow:auto;background:white;border-radius:22px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.28)}
.modal-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.modal-close{width:40px;height:40px;border:0;border-radius:12px;background:#f0f2f5;font-size:1.5rem}
.type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}
.type-choice{border:1px solid var(--line);background:#fff;border-radius:13px;padding:11px 7px;display:grid;gap:5px;place-items:center;color:#596273}
.type-choice strong{font-size:.75rem}
.type-choice.active{border-color:var(--accent);background:#f2f3ff;color:var(--accent)}
textarea{width:100%;margin-top:7px;border:1px solid #dce2eb;background:#fff;border-radius:13px;padding:13px 14px;outline:none;resize:vertical;font:inherit}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(88,101,242,.1)}
.optional-text{font-weight:500;color:#98a2b3}
.week-grid{display:grid;gap:12px}
.week-day-card{border:1px solid var(--line);background:#fff;border-radius:17px;padding:14px}
.week-day-card.today{border-color:#cbd1ff;background:#f9f9ff}
.week-day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;text-transform:capitalize}
.week-day-head span{min-width:26px;height:26px;border-radius:999px;background:#eef1f6;display:grid;place-items:center;font-size:.75rem}
.week-day-items{display:grid;gap:8px}
.calendar-toolbar{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-weekdays span{text-align:center;font-weight:850;font-size:.72rem;color:#7c8798;padding:8px}
.calendar-grid{border-left:1px solid var(--line);border-top:1px solid var(--line)}
.calendar-day{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px;background:#fff;overflow:hidden}
.calendar-day.outside{background:#f7f8fa;color:#a6aeba}
.calendar-day.today{box-shadow:inset 0 0 0 2px var(--accent)}
.calendar-date{font-size:.78rem;font-weight:850}
.calendar-events{display:grid;gap:4px;margin-top:7px}
.calendar-event{font-size:.68rem;padding:4px 5px;border-radius:6px;background:#f1f3f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event.exam{background:#fff0f0;color:#9a3737}
.calendar-event.homework{background:#edf4ff;color:#315c9b}
.calendar-event.project{background:#f5efff;color:#6c43a5}
.calendar-event.bring{background:#fff7e8;color:#94671f}
.calendar-day small{font-size:.65rem;color:#7c8798}
@media(max-width:720px){
  .type-grid{grid-template-columns:repeat(3,1fr)}
  .calendar-day{min-height:88px;padding:4px}
  .calendar-event{font-size:.6rem;padding:3px}
  .agenda-top{align-items:flex-start;flex-direction:column;gap:3px}
}

/* v0.6.1 */
.week-toolbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.week-range-label{text-align:center;color:var(--muted);font-weight:750;margin:0 0 14px;text-transform:capitalize}
@media(max-width:600px){.week-toolbar button{flex:1 1 auto}}

/* v0.7 — Mochila */
.backpack-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:6px 0 18px}
.backpack-topline h3{margin:3px 0 0}
.backpack-list{display:grid;gap:11px}
.backpack-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px}
.backpack-check{width:48px;height:48px;border-radius:14px;background:#fff7e8;display:grid;place-items:center;font-size:1.35rem}
.backpack-info strong{font-size:1rem}
.backpack-info p{margin:7px 0 0;color:var(--muted);font-size:.86rem}
.backpack-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
.backpack-meta span{font-size:.72rem;background:#f2f4f7;color:#667085;padding:3px 8px;border-radius:999px}
.backpack-packed-btn{border:0;border-radius:11px;background:#eef9f4;color:#13785a;padding:9px 11px;font-weight:850;white-space:nowrap}
.backpack-empty{text-align:center;border:1px dashed #d8dee8;border-radius:18px;padding:34px 18px;color:#667085}
.backpack-empty strong{display:block;color:var(--ink);margin:7px 0}
.backpack-empty p{margin:0}
.backpack-empty-icon{font-size:2rem}
@media(max-width:650px){
  .backpack-item{grid-template-columns:44px 1fr}
  .backpack-packed-btn{grid-column:1/-1;width:100%}
  .backpack-topline{align-items:flex-start;flex-direction:column}
}

/* v0.8 — Mochila = preparación del día siguiente */
.tomorrow-subjects{display:grid;gap:14px}
.tomorrow-subject-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.tomorrow-subject-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;background:#fafbfc;border-bottom:1px solid var(--line)}
.tomorrow-subject-head h3{margin:3px 0 0;font-size:1.08rem}
.subject-time{font-size:.7rem;font-weight:850;letter-spacing:.05em;color:var(--accent)}
.subject-ready-badge{font-size:.72rem;font-weight:800;padding:5px 9px;border-radius:999px;background:#eef1f6;color:#657084;white-space:nowrap}
.tomorrow-items{display:grid}
.tomorrow-item{display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center;padding:12px 15px;border-bottom:1px solid #eef1f4}
.tomorrow-item:last-child{border-bottom:0}
.tomorrow-item-icon{width:40px;height:40px;border-radius:12px;background:#f3f5f9;display:grid;place-items:center}
.tomorrow-item-info{min-width:0}
.tomorrow-item-info strong{display:block}
.tomorrow-item-info p{margin:6px 0 0;color:var(--muted);font-size:.84rem}
.tomorrow-item-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.tomorrow-item-meta span{font-size:.69rem;background:#f2f4f7;color:#667085;padding:3px 7px;border-radius:999px}
.tomorrow-done-btn{border:0;border-radius:10px;background:#eef9f4;color:#13785a;padding:8px 10px;font-weight:850;white-space:nowrap}
.nothing-for-subject{padding:14px 16px;color:#778292;font-size:.86rem}
.extra-card .tomorrow-subject-head{background:#fff9ef}
@media(max-width:650px){
  .tomorrow-item{grid-template-columns:40px 1fr}
  .tomorrow-done-btn{grid-column:1/-1;width:100%}
  .tomorrow-subject-head{align-items:flex-start}
}

/* v0.9 — Vista Familiar */
.family-readonly-banner{
  display:flex;gap:12px;align-items:center;
  background:#f6f8fb;border:1px solid var(--line);
  border-radius:15px;padding:13px 15px;margin-bottom:16px
}
.family-readonly-banner>span{font-size:1.25rem}
.family-readonly-banner strong{display:block}
.family-readonly-banner small{display:block;color:var(--muted);margin-top:2px}
.family-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.family-overview-card{
  border:1px solid var(--line);background:#fff;border-radius:18px;padding:17px
}
.family-overview-card.full-card{margin-bottom:14px}
.family-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px}
.family-card-head h3{margin:4px 0 0;font-size:1.05rem}
.family-card-icon{font-size:1.35rem}
.family-card-content{display:grid;gap:10px}
.family-empty{color:#87909f;font-size:.88rem;padding:8px 0}
.family-tomorrow-subject{border-top:1px solid #edf0f4;padding-top:10px}
.family-tomorrow-subject:first-child{border-top:0;padding-top:0}
.family-tomorrow-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.family-tomorrow-title>span{font-size:.74rem;color:var(--accent);font-weight:800}
.family-no-pending{color:#87909f}
.family-mini-item{display:grid;grid-template-columns:26px 1fr;gap:7px;align-items:start;margin:6px 0}
.family-mini-item>span{width:26px;height:26px;border-radius:8px;background:#f3f5f8;display:grid;place-items:center;font-size:.8rem}
.family-mini-item strong{display:block;font-size:.84rem}
.family-mini-item small{display:block;color:var(--muted);font-size:.7rem;margin-top:1px}
.family-exam-item{display:grid;grid-template-columns:44px 1fr;gap:9px;align-items:center}
.family-exam-date{width:44px;height:46px;border-radius:11px;background:#fff0f0;color:#973838;display:grid;place-items:center;align-content:center}
.family-exam-date strong{line-height:1;font-size:1rem}
.family-exam-date span{font-size:.62rem;text-transform:uppercase}
.family-exam-item>div:last-child strong{display:block;font-size:.88rem}
.family-exam-item>div:last-child small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.family-upcoming-list{display:grid;gap:8px}
.family-upcoming-item{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #eef1f4}
.family-upcoming-item:last-child{border-bottom:0}
.family-upcoming-icon{width:34px;height:34px;border-radius:10px;background:#f3f5f8;display:grid;place-items:center}
.family-upcoming-body strong{display:block;font-size:.88rem}
.family-upcoming-body small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.family-upcoming-date{font-size:.72rem;color:#6f7988;white-space:nowrap}
.family-schedule-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.family-schedule-day{border:1px solid #e7eaf0;border-radius:13px;padding:10px;background:#fafbfc}
.family-schedule-day>strong{display:block;margin-bottom:8px;font-size:.8rem}
.family-schedule-day>div{display:grid;gap:6px}
.family-schedule-day span{display:block;font-size:.72rem;line-height:1.3}
.family-schedule-day span b{display:block;color:var(--accent);font-size:.67rem}
.family-schedule-day small{color:#98a1ae;font-size:.7rem}
@media(max-width:760px){
  .family-overview-grid{grid-template-columns:1fr}
  .family-schedule-grid{grid-template-columns:1fr 1fr}
  .family-upcoming-item{grid-template-columns:34px 1fr}
  .family-upcoming-date{grid-column:2}
}

/* v1.0 — Exámenes */
.exam-extra-fields{display:grid;gap:12px;margin-top:12px;padding:14px;border-radius:15px;background:#faf8ff;border:1px solid #ebe5ff}
.form-hint{margin:0;color:#7c8493;font-size:.78rem}
.exam-days{background:#fff0f0!important;color:#9a3737!important;font-weight:800}
.agenda-item.exam{cursor:pointer}
.agenda-item.exam:hover{border-color:#e6bcbc}
.exam-detail-card{max-width:620px}
.exam-countdown{display:inline-block;margin:7px 0 0;padding:5px 9px;border-radius:999px;background:#fff0f0;color:#963b3b;font-weight:850;font-size:.8rem}
.exam-detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.exam-detail-meta span{padding:5px 9px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:.76rem}
.exam-scope-view{padding:13px 14px;border-radius:14px;background:#f7f8fb;margin-bottom:16px}
.exam-scope-view h3{margin:0 0 6px;font-size:.9rem}
.exam-scope-view p{margin:0;color:#596273;white-space:pre-wrap}
.exam-checklist-view{display:grid;gap:7px}
.exam-check-row{display:flex;gap:10px;align-items:center;border:1px solid #e5e8ee;border-radius:12px;padding:10px 12px;background:#fff}
.exam-check-row input{width:18px;height:18px}
.exam-check-row.done span{text-decoration:line-through;color:#98a1ae}

/* v1.1 — Prioridades y avisos en Inicio */
.priority-alerts{display:grid;gap:8px;margin:12px 0 16px}
.priority-alert{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;border-radius:14px;padding:11px 12px;border:1px solid #e7eaf0;background:#fafbfc}
.priority-alert.urgent{background:#fff3f3;border-color:#f2cccc}
.priority-alert.tomorrow{background:#fff8e9;border-color:#f0ddb3}
.priority-alert.soon{background:#f4f2ff;border-color:#dcd5ff}
.priority-alert[data-exam-id]{cursor:pointer}
.priority-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.75);font-size:1.05rem}
.priority-copy strong{display:block;font-size:.88rem}
.priority-copy small{display:block;margin-top:2px;color:#747e8d;font-size:.73rem}
.priority-clear{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;border-radius:14px;padding:11px 12px;background:#f2faf6;border:1px solid #d7ede2}
.priority-clear>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#fff;color:#16785b;font-weight:900}
.priority-clear strong{display:block;font-size:.88rem}
.priority-clear small{display:block;color:#74817b;margin-top:2px;font-size:.73rem}
.upcoming-divider{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px;padding-top:14px;border-top:1px solid #edf0f4}
.upcoming-divider strong{font-size:.88rem}

/* v1.2 — Activación de compra */
.field-help{display:block;margin-top:5px;color:var(--muted);font-size:.74rem}
.login-activation-note{padding:12px;border:1px solid #e6e9ef;border-radius:14px;background:#fafbfc;margin-bottom:10px}
.login-activation-note>strong{display:block;font-size:.82rem;margin-bottom:8px}
.login-activation-note>small{display:block;color:var(--muted);font-size:.72rem;margin-top:5px}

/* ==========================================================
   v2.3 — REDISEÑO COMPLETO: portada + accesos + dashboard
   ========================================================== */
body:not(.student-dashboard-mode){background:#eef3fb}
body:not(.student-dashboard-mode) .shell{
  max-width:1440px;
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(340px,430px) minmax(0,1fr);
  background:#f6f8fc;
}
.new-hero{
  min-height:100vh;
  padding:42px 34px;
  background:
    radial-gradient(circle at 20% 10%,rgba(77,129,255,.24),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(132,63,255,.22),transparent 26%),
    linear-gradient(180deg,#061a3e 0%,#04132f 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-lockup img{width:60px;height:60px;object-fit:contain;border-radius:16px;background:#071b3f;box-shadow:0 12px 30px rgba(24,92,255,.24)}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font-size:1.18rem;color:#fff}
.brand-copy span{margin-top:4px;font-size:1.18rem;font-weight:900;color:#5fb0ff}
.hero-message{margin:auto 0}
.hero-pill{display:inline-block;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.72rem;font-weight:800;color:#cdd8ee}
.new-hero h1{font-size:3rem;line-height:1.02;margin:18px 0 16px;color:#fff;letter-spacing:-.035em}
.new-hero p{max-width:330px;margin:0;color:#c6d1e5;font-size:1rem;line-height:1.6}
.hero-feature-list{display:grid;gap:9px;margin-top:34px}
.hero-feature-list div{display:flex;align-items:center;gap:9px;color:#d7e0ef}
.hero-feature-list span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.09);color:#6ec5ff}
.hero-feature-list p{margin:0;font-size:.82rem}

.panel{background:#f6f8fc}
.landing-panel{max-width:860px!important;margin:auto!important;padding:0!important}
.landing-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}
.landing-kicker{font-size:.69rem;letter-spacing:.12em;font-weight:900;color:#6557f5}
.landing-top h2{font-size:2.3rem;line-height:1.06;margin:7px 0 8px;color:#12203d;letter-spacing:-.025em}
.landing-top p{margin:0;color:#74809a}
.status-pill{background:#ebe9ff;color:#6557e9;border:0}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.entry-card{
  display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:13px;
  text-align:left;padding:20px;border-radius:18px;border:1px solid #e3e8f2;background:#fff;
  box-shadow:0 10px 28px rgba(20,42,86,.07);cursor:pointer;transition:.18s ease
}
.entry-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(20,42,86,.10)}
.entry-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.35rem}
.family-entry .entry-icon{background:#f1edff}
.student-entry .entry-icon{background:#eaf5ff}
.entry-card strong{display:block;color:#12203d;font-size:1rem}
.entry-card small{display:block;margin-top:4px;color:#78849a}
.entry-arrow{color:#1767e8;font-weight:900}
.landing-note{display:flex;gap:11px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:15px;background:#f0f7ff;border:1px solid #dcecff}
.landing-note strong{display:block;color:#1d3d68}
.landing-note small{display:block;margin-top:2px;color:#6b7d96}

.auth-panel{max-width:680px!important;margin:auto!important}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand img{width:46px;height:46px;object-fit:contain;border-radius:12px;background:#071b3f}
.auth-brand strong{color:#12203d;font-size:1rem}
.auth-panel .back-btn{margin-bottom:18px}
.auth-panel h2{font-size:2rem;color:#12203d}
.auth-panel .tabs{background:#eef1f7;padding:5px;border-radius:14px}
.auth-panel .tab{border-radius:10px}
.auth-panel .tab.active{background:#fff;color:#1767e8;box-shadow:0 3px 10px rgba(20,42,86,.06)}
.auth-panel .form{background:#fff;border:1px solid #e4e9f2;border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(20,42,86,.06)}
.auth-panel .primary-btn{background:linear-gradient(135deg,#0968f5,#6737ee);border:0;box-shadow:0 8px 20px rgba(61,82,235,.20)}
.auth-panel input,.auth-panel select{background:#fff;border-color:#dfe5ef}

@media(max-width:900px){
  body:not(.student-dashboard-mode) .shell{grid-template-columns:1fr}
  .new-hero{min-height:auto;padding:24px 20px 26px;border-radius:0 0 24px 24px}
  .hero-message{margin:26px 0 0}
  .new-hero h1{font-size:2.2rem}
  .hero-feature-list{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:20px}
  .hero-feature-list div{display:block;text-align:center}
  .hero-feature-list span{margin:0 auto 5px}
  .panel{padding:24px 16px 96px}
  .landing-top{display:block}
}
@media(max-width:620px){
  .entry-grid{grid-template-columns:1fr}
  .landing-top h2{font-size:1.8rem}
  .new-hero h1{font-size:1.8rem}
  .hero-feature-list{grid-template-columns:1fr 1fr 1fr}
  .hero-feature-list p{font-size:.7rem}
  .auth-panel .form{padding:16px}
}

/* v2.4 — landing final with flexbox */
body:not(.student-dashboard-mode) .shell{
  display:flex!important;
  align-items:stretch!important;
  max-width:1440px!important;
  min-height:100vh!important;
  margin:0 auto!important;
}
body:not(.student-dashboard-mode) .new-hero{
  flex:0 0 42%!important;
  width:42%!important;
  box-sizing:border-box!important;
}
body:not(.student-dashboard-mode) .panel{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:42px!important;
  box-sizing:border-box!important;
}
body:not(.student-dashboard-mode) .landing-panel{
  width:100%!important;
  max-width:760px!important;
  margin:0!important;
}
body:not(.student-dashboard-mode) .entry-grid{
  display:flex!important;
  gap:16px!important;
  width:100%!important;
}
body:not(.student-dashboard-mode) .entry-card{
  flex:1 1 0!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body:not(.student-dashboard-mode) .landing-note{
  width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:900px){
  body:not(.student-dashboard-mode) .shell{
    display:block!important;
  }
  body:not(.student-dashboard-mode) .new-hero{
    width:100%!important;
    min-height:auto!important;
  }
  body:not(.student-dashboard-mode) .panel{
    display:block!important;
    width:100%!important;
    padding:24px 16px 96px!important;
  }
}
@media(max-width:620px){
  body:not(.student-dashboard-mode) .entry-grid{
    display:block!important;
  }
  body:not(.student-dashboard-mode) .entry-card{
    width:100%!important;
    margin-bottom:12px!important;
  }
}

/* v2.5 — landing polish based on real Cloudflare screenshot */
body:not(.student-dashboard-mode) .shell{
  max-width:1380px!important;
  min-height:100vh!important;
}
body:not(.student-dashboard-mode) .new-hero{
  flex:0 0 46%!important;
  width:46%!important;
  padding:46px 42px!important;
}
body:not(.student-dashboard-mode) .panel{
  padding:54px 52px!important;
}
.brand-lockup{
  gap:14px!important;
  align-items:center!important;
}
.brand-lockup img{
  width:50px!important;
  height:50px!important;
  border-radius:12px!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:contain!important;
}
.brand-copy strong,
.brand-copy span{
  font-size:1.12rem!important;
}
.hero-message{
  max-width:470px!important;
}
.new-hero h1{
  font-size:3.15rem!important;
  max-width:500px!important;
  line-height:1.03!important;
}
.new-hero p{
  max-width:430px!important;
  font-size:1.02rem!important;
}
.hero-feature-list{
  max-width:430px!important;
  gap:11px!important;
}
.hero-feature-list div{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
  padding:9px 11px!important;
}
.landing-panel{
  max-width:720px!important;
}
.landing-top{
  margin-bottom:34px!important;
}
.landing-top h2{
  font-size:2.55rem!important;
  max-width:560px!important;
}
.landing-top p{
  font-size:.98rem!important;
}
.entry-grid{
  gap:18px!important;
}
.entry-card{
  min-height:150px!important;
  padding:24px!important;
  grid-template-columns:62px 1fr auto!important;
  border-radius:20px!important;
}
.entry-icon{
  width:62px!important;
  height:62px!important;
  border-radius:18px!important;
  font-size:1.55rem!important;
}
.entry-card strong{
  font-size:1.08rem!important;
}
.entry-card small{
  font-size:.84rem!important;
  line-height:1.45!important;
}
.entry-arrow{
  font-size:1.2rem!important;
}
.landing-note{
  margin-top:22px!important;
  padding:16px 18px!important;
  border-radius:16px!important;
}
@media(max-width:1100px){
  body:not(.student-dashboard-mode) .new-hero{
    flex-basis:43%!important;
    width:43%!important;
    padding:38px 30px!important;
  }
  body:not(.student-dashboard-mode) .panel{
    padding:42px 34px!important;
  }
  .new-hero h1{font-size:2.65rem!important}
}
@media(max-width:900px){
  body:not(.student-dashboard-mode) .new-hero{
    width:100%!important;
    padding:24px 20px 28px!important;
  }
  body:not(.student-dashboard-mode) .panel{
    padding:28px 18px 100px!important;
  }
  .brand-lockup img{
    width:44px!important;
    height:44px!important;
  }
  .new-hero h1{
    font-size:2rem!important;
    margin-top:16px!important;
  }
  .hero-feature-list{
    max-width:none!important;
  }
  .landing-top h2{
    font-size:2rem!important;
  }
}
@media(max-width:620px){
  .entry-card{
    min-height:0!important;
    padding:18px!important;
    grid-template-columns:54px 1fr auto!important;
  }
  .entry-icon{
    width:54px!important;
    height:54px!important;
    border-radius:15px!important;
  }
}

/* v2.6 — exact landing fixes from real screenshot */
body:not(.student-dashboard-mode) .shell{
  max-width:1440px!important;
  display:flex!important;
  align-items:stretch!important;
}
body:not(.student-dashboard-mode) .new-hero{
  flex:0 0 39%!important;
  width:39%!important;
  padding:44px 38px!important;
}
body:not(.student-dashboard-mode) .panel{
  flex:1 1 auto!important;
  padding:52px 58px!important;
}
body:not(.student-dashboard-mode) .landing-panel{
  max-width:820px!important;
  width:100%!important;
}
.clean-logo-mark{
  position:relative;
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#00c2ff 0%,#0b71ff 48%,#6d36f2 100%);
  box-shadow:0 10px 26px rgba(38,103,255,.26);
  overflow:visible;
}
.clean-logo-mark .cap{
  font-size:1.55rem;
  line-height:1;
  filter:brightness(0) invert(1);
}
.clean-logo-mark .check{
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:22px;
  height:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#1767e8;
  font-size:.82rem;
  font-weight:1000;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.clean-logo-mark.small{
  width:42px;
  height:42px;
  border-radius:13px;
}
.clean-logo-mark.small .cap{font-size:1.25rem}
.clean-logo-mark.small .check{
  width:18px;
  height:18px;
  border-radius:6px;
  font-size:.7rem;
}
.brand-lockup img{display:none!important}
.auth-brand img{display:none!important}

.new-hero h1{
  font-size:2.85rem!important;
  max-width:450px!important;
}
.new-hero p{
  max-width:390px!important;
}
.hero-feature-list{
  max-width:390px!important;
}

.landing-top{
  margin-bottom:38px!important;
}
.landing-top h2{
  font-size:2.65rem!important;
  max-width:620px!important;
}
.entry-grid{
  display:flex!important;
  gap:22px!important;
  align-items:stretch!important;
}
.entry-card{
  flex:1 1 0!important;
  min-height:185px!important;
  padding:28px!important;
  grid-template-columns:72px 1fr auto!important;
  border-radius:22px!important;
}
.entry-icon{
  width:72px!important;
  height:72px!important;
  border-radius:20px!important;
  font-size:1.8rem!important;
}
.entry-card strong{
  font-size:1.18rem!important;
}
.entry-card small{
  font-size:.9rem!important;
  line-height:1.5!important;
}
.entry-arrow{
  font-size:1.35rem!important;
}
.landing-note{
  margin-top:24px!important;
  padding:17px 19px!important;
}

@media(max-width:1050px){
  body:not(.student-dashboard-mode) .new-hero{
    flex-basis:41%!important;
    width:41%!important;
    padding:38px 28px!important;
  }
  body:not(.student-dashboard-mode) .panel{
    padding:42px 34px!important;
  }
  .new-hero h1{font-size:2.45rem!important}
  .entry-card{padding:22px!important;grid-template-columns:62px 1fr auto!important}
  .entry-icon{width:62px!important;height:62px!important}
}
@media(max-width:900px){
  body:not(.student-dashboard-mode) .new-hero{
    width:100%!important;
    padding:24px 20px 28px!important;
  }
  body:not(.student-dashboard-mode) .panel{
    padding:28px 18px 100px!important;
  }
  .entry-grid{
    gap:14px!important;
  }
}
@media(max-width:650px){
  .entry-grid{
    display:block!important;
  }
  .entry-card{
    width:100%!important;
    min-height:0!important;
    margin-bottom:12px!important;
    padding:18px!important;
    grid-template-columns:56px 1fr auto!important;
  }
  .entry-icon{
    width:56px!important;
    height:56px!important;
    border-radius:16px!important;
    font-size:1.45rem!important;
  }
  .landing-top h2{font-size:1.85rem!important}
}

/* ==========================================================
   v2.7 — PORTADA BASADA EN LA REFERENCIA APROBADA
   ========================================================== */
body:has(#welcomePanel.active){
  margin:0!important;
  background:#f5f9ff!important;
}
body:has(#welcomePanel.active) .shell{
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  display:flex!important;
  align-items:stretch!important;
  background:#f5f9ff!important;
}
body:has(#welcomePanel.active) .panel{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:34px 42px!important;
  background:
    radial-gradient(circle at 8% 3%,rgba(59,130,246,.10),transparent 22%),
    radial-gradient(circle at 100% 65%,rgba(49,164,255,.08),transparent 24%),
    linear-gradient(145deg,#f7fbff 0%,#ffffff 58%,#eef7ff 100%)!important;
}
body:has(#welcomePanel.active) .ref-hero{
  position:relative!important;
  flex:0 0 37%!important;
  width:37%!important;
  min-height:100vh!important;
  box-sizing:border-box!important;
  padding:42px 48px 38px!important;
  display:flex!important;
  flex-direction:column!important;
  color:#fff!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at -5% -4%,rgba(18,112,255,.58),transparent 27%),
    radial-gradient(circle at 110% 75%,rgba(23,95,255,.34),transparent 35%),
    linear-gradient(155deg,#071e4b 0%,#061a40 52%,#04142f 100%)!important;
}
body:has(#welcomePanel.active) .ref-hero:after{
  content:"";position:absolute;left:-8%;right:-12%;bottom:-120px;height:245px;
  border-radius:50% 50% 0 0;background:rgba(18,91,235,.28);transform:rotate(-8deg)
}
.ref-brand,.ref-hero-copy,.ref-features{position:relative;z-index:2}
.ref-brand{display:flex;flex-direction:column;align-items:flex-start}
.ref-logo{width:88px;height:72px;margin:0 0 10px 82px}
.ref-logo svg{width:100%;height:100%;display:block}
.ref-brand-name{font-size:2.15rem;line-height:1;font-weight:900;letter-spacing:-.025em}
.ref-brand-name strong{color:#fff}.ref-brand-name span{color:#2d91ff}
.ref-brand-tag{margin-top:12px;font-size:.65rem;font-weight:800;letter-spacing:.28em;color:#b9c8e3}
.ref-hero-copy{margin:auto 0 28px}
.ref-line{width:82px;height:3px;border-radius:999px;background:#1b91ff;margin-bottom:25px}
.ref-hero h1{margin:0!important;color:#fff!important;font-size:2.55rem!important;line-height:1.08!important;letter-spacing:-.025em!important}
.ref-hero h1 span{color:#1593ff}
.ref-hero-copy p{max-width:400px;margin:20px 0 0!important;color:#c3d0e6!important;font-size:.96rem!important;line-height:1.6!important}
.ref-features{display:grid;gap:13px;margin-top:10px}
.ref-feature{display:flex;align-items:center;gap:14px}
.ref-feature-icon{width:50px;height:50px;flex:0 0 50px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#0dc2ff,#1673ff);color:#fff;font-size:1.35rem;font-weight:900;box-shadow:0 8px 20px rgba(11,110,255,.22)}
.ref-feature-icon.violet{background:linear-gradient(135deg,#8d5cff,#4d5cf7)}
.ref-feature-icon.green{background:linear-gradient(135deg,#18d4c0,#14a990)}
.ref-feature strong{display:block;color:#fff;font-size:.91rem}
.ref-feature small{display:block;margin-top:3px;color:#aebdd7;font-size:.74rem}

body:has(#welcomePanel.active) .ref-welcome{
  display:block!important;
  width:100%!important;
  max-width:920px!important;
  margin:0!important;
  padding:0!important;
}
.ref-welcome-inner{text-align:center}
.ref-welcome-badge{display:inline-block;padding:9px 19px;border-radius:999px;background:#dff2ff;color:#0b72e7;font-size:.82rem;font-weight:850}
.ref-welcome h2{margin:17px 0 6px!important;color:#07183c!important;font-size:3rem!important;line-height:1.05!important;letter-spacing:-.035em!important}
.ref-subtitle{margin:0 0 30px!important;color:#71809d!important;font-size:1rem!important}
.ref-entry-grid{display:flex!important;gap:22px!important;align-items:stretch!important;justify-content:center!important}
.ref-entry-card{
  flex:1 1 0!important;
  max-width:390px!important;
  min-height:460px!important;
  box-sizing:border-box!important;
  padding:24px 24px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  border:1px solid #dbe5f2!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.92)!important;
  color:#0a1838!important;
  box-shadow:0 14px 36px rgba(24,57,103,.08)!important;
  text-align:center!important;
  cursor:pointer!important;
  transition:.18s ease!important;
}
.ref-entry-card.student{border-color:#91d4ff!important;background:linear-gradient(180deg,#f8fdff,#eef8ff)!important}
.ref-entry-card:hover{transform:translateY(-3px)!important;box-shadow:0 18px 40px rgba(24,57,103,.12)!important}
.ref-card-art{position:relative;width:220px;height:165px;margin:0 auto 8px;border-radius:50%;background:radial-gradient(circle,#e5f5ff 0%,#eef8ff 56%,transparent 57%)}
.family-art .house-body{position:absolute;left:72px;top:72px;width:86px;height:67px;border-radius:7px;background:#f7fbff;box-shadow:0 12px 24px rgba(29,77,128,.14)}
.family-art .house-roof{position:absolute;left:63px;top:44px;width:100px;height:55px;background:#1978e8;clip-path:polygon(50% 0,100% 55%,88% 67%,50% 27%,12% 67%,0 55%)}
.family-art .house-body span{position:absolute;left:31px;top:18px;width:25px;height:30px;border-radius:4px;background:#ffc84a;border:5px solid #2466aa}
.family-art .tree{position:absolute;bottom:22px;width:31px;height:55px;border-radius:50% 50% 45% 45%;background:#5ec449}
.family-art .t1{left:46px}.family-art .t2{right:43px;width:26px;height:44px;background:#4db743}
.student-art .books{position:absolute;left:35px;bottom:31px;width:95px}
.student-art .books i{display:block;height:13px;margin-top:4px;border-radius:3px;background:#37a0ee;border-bottom:4px solid #23805f}
.student-art .grad-cap{position:absolute;left:70px;top:46px;width:115px;height:58px;background:#123f83;clip-path:polygon(50% 0,100% 35%,50% 70%,0 35%);filter:drop-shadow(0 8px 8px rgba(17,62,126,.18))}
.student-art .laptop{position:absolute;right:24px;bottom:30px;width:78px;height:55px;border-radius:5px;background:linear-gradient(145deg,#cbd6e6,#8898ad);transform:skewY(5deg);box-shadow:0 7px 12px rgba(35,55,85,.15)}
.ref-entry-card>strong{font-size:1.48rem!important;color:#091839!important;margin-top:2px!important}
.ref-role-copy{margin-top:5px;color:#59719c;font-size:.91rem}
.ref-entry-card>small{display:block;max-width:290px;margin:14px auto 22px;color:#516987;font-size:.82rem;line-height:1.5}
.ref-entry-button{margin-top:auto;width:100%;box-sizing:border-box;padding:14px 16px;border-radius:13px;background:linear-gradient(90deg,#0876f3,#0c98f4);color:#fff;font-size:.91rem;font-weight:850;box-shadow:0 9px 20px rgba(13,120,241,.20)}
.ref-entry-button b{float:right;font-size:1.1rem}
.ref-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px;color:#57709a;font-size:.72rem}
.ref-security:before,.ref-security:after{content:"";width:120px;height:1px;background:#cbd8e8}
.ref-footer{margin-top:19px;color:#7890b1;font-size:.67rem}

@media(max-width:1050px){
  body:has(#welcomePanel.active) .ref-hero{flex-basis:34%!important;width:34%!important;padding:34px 28px!important}
  .ref-logo{margin-left:52px}
  .ref-brand-name{font-size:1.75rem}
  .ref-hero h1{font-size:2.1rem!important}
  body:has(#welcomePanel.active) .panel{padding:28px!important}
  .ref-welcome h2{font-size:2.45rem!important}
  .ref-entry-card{min-height:430px!important;padding:20px!important}
  .ref-card-art{width:190px;height:145px}
}
@media(max-width:820px){
  body:has(#welcomePanel.active) .shell{display:block!important}
  body:has(#welcomePanel.active) .ref-hero{width:100%!important;min-height:auto!important;padding:24px 20px 28px!important}
  .ref-brand{align-items:center}.ref-logo{margin-left:0}.ref-brand-tag{text-align:center}
  .ref-hero-copy{margin:28px 0 22px;text-align:center}.ref-line{margin:0 auto 18px}
  .ref-hero-copy p{margin-left:auto!important;margin-right:auto!important}
  .ref-features{grid-template-columns:repeat(3,1fr);gap:8px}.ref-feature{display:block;text-align:center}.ref-feature-icon{margin:0 auto 7px}
  body:has(#welcomePanel.active) .panel{padding:30px 16px 90px!important}
  .ref-entry-grid{gap:14px!important}
}
@media(max-width:620px){
  .ref-welcome h2{font-size:2rem!important}
  .ref-entry-grid{display:block!important}
  .ref-entry-card{max-width:none!important;min-height:0!important;margin-bottom:14px!important}
  .ref-card-art{height:125px}
  .ref-security:before,.ref-security:after{width:40px}
  .ref-features{grid-template-columns:1fr}.ref-feature{display:flex;text-align:left}.ref-feature-icon{margin:0}
}

/* v2.8 — refinement against approved reference */
body:has(#welcomePanel.active) .ref-hero{
  padding-top:30px!important;
  padding-bottom:30px!important;
}
.ref-brand{
  transform:translateY(-2px)!important;
}
.ref-logo{
  width:76px!important;
  height:62px!important;
  margin:0 0 6px 72px!important;
}
.ref-brand-name{
  font-size:1.95rem!important;
}
.ref-brand-tag{
  margin-top:9px!important;
  font-size:.61rem!important;
}
.ref-hero-copy{
  margin:auto 0 20px!important;
}
.ref-line{
  margin-bottom:20px!important;
}
.ref-features{
  gap:10px!important;
}
.ref-feature-icon{
  width:46px!important;height:46px!important;flex-basis:46px!important;
}

body:has(#welcomePanel.active) .panel{
  align-items:flex-start!important;
  padding-top:52px!important;
}
.ref-welcome-inner{
  transform:translateY(0)!important;
}
.ref-welcome h2{
  margin-top:14px!important;
}
.ref-subtitle{
  margin-bottom:20px!important;
}
.ref-entry-grid{
  gap:20px!important;
}
.ref-entry-card{
  min-height:420px!important;
  padding:20px 22px 20px!important;
}
.ref-card-art{
  width:230px!important;
  height:150px!important;
  margin-bottom:2px!important;
  background:radial-gradient(circle,#e6f5ff 0%,#f1f9ff 59%,transparent 60%)!important;
}
.ref-svg-art svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  filter:drop-shadow(0 8px 8px rgba(39,80,130,.08));
}
.ref-entry-card>strong{
  margin-top:0!important;
}
.ref-entry-card>small{
  margin-top:11px!important;
  margin-bottom:17px!important;
}
.ref-security{
  margin-top:18px!important;
}
.ref-footer{
  margin-top:12px!important;
}

@media(max-width:1050px){
  .ref-logo{margin-left:48px!important}
  body:has(#welcomePanel.active) .panel{padding-top:38px!important}
  .ref-entry-card{min-height:405px!important}
  .ref-card-art{width:205px!important;height:138px!important}
}
@media(max-width:820px){
  .ref-logo{margin-left:0!important}
  body:has(#welcomePanel.active) .panel{padding-top:28px!important}
}

/* v2.9 — professional finish, same approved composition */
body:has(#welcomePanel.active) .ref-hero{
  padding:34px 50px 34px!important;
  background:
    radial-gradient(circle at 3% 0%,rgba(29,119,255,.55),transparent 25%),
    radial-gradient(circle at 105% 78%,rgba(34,105,255,.32),transparent 34%),
    linear-gradient(158deg,#071f4d 0%,#061a40 55%,#04132e 100%)!important;
}
.ref-brand{margin-bottom:4px!important}
.ref-logo{width:80px!important;height:65px!important;margin-left:76px!important}
.ref-brand-name{font-size:2rem!important;letter-spacing:-.035em!important}
.ref-brand-tag{letter-spacing:.25em!important;color:#c1cee2!important}
.ref-hero-copy{max-width:440px!important;margin:auto 0 24px!important}
.ref-hero h1{font-size:2.68rem!important;line-height:1.055!important}
.ref-hero-copy p{max-width:420px!important;color:#c8d4e7!important}
.ref-features{gap:11px!important}
.ref-feature{padding:2px 0!important}
.ref-feature-icon{
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(5,91,220,.20)!important;
}
.ref-feature strong{font-size:.94rem!important}
.ref-feature small{font-size:.75rem!important}

body:has(#welcomePanel.active) .panel{
  padding:38px 46px 30px!important;
  align-items:flex-start!important;
}
body:has(#welcomePanel.active) .ref-welcome{
  max-width:940px!important;
}
.ref-welcome-inner{max-width:880px!important;margin:0 auto!important}
.ref-welcome-badge{
  padding:9px 21px!important;
  background:linear-gradient(90deg,#e3f4ff,#d8efff)!important;
  box-shadow:inset 0 0 0 1px rgba(49,151,255,.08)!important;
}
.ref-welcome h2{
  font-size:3.08rem!important;
  margin:15px 0 5px!important;
}
.ref-subtitle{margin-bottom:18px!important}
.ref-entry-grid{gap:24px!important}
.ref-entry-card{
  max-width:405px!important;
  min-height:430px!important;
  padding:20px 24px 22px!important;
  border-radius:24px!important;
  box-shadow:0 18px 44px rgba(25,58,104,.09)!important;
}
.ref-entry-card.family{
  border-color:#d9e4f1!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
.ref-entry-card.student{
  border-color:#78c9ff!important;
  background:linear-gradient(180deg,#fbfeff 0%,#eef9ff 100%)!important;
  box-shadow:0 18px 46px rgba(23,139,239,.12)!important;
}
.ref-card-art{
  width:244px!important;
  height:158px!important;
  margin-top:-2px!important;
}
.ref-svg-art svg{
  filter:drop-shadow(0 11px 10px rgba(35,75,125,.11))!important;
}
.ref-entry-card>strong{
  font-size:1.52rem!important;
  letter-spacing:-.02em!important;
}
.ref-role-copy{font-size:.93rem!important}
.ref-entry-card>small{
  max-width:300px!important;
  color:#59708d!important;
}
.ref-entry-button{
  padding:15px 17px!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,#0876f3 0%,#0a9bf4 100%)!important;
  box-shadow:0 10px 23px rgba(13,120,241,.22)!important;
}
.ref-entry-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 22px 52px rgba(25,58,104,.14)!important;
}
.ref-security{margin-top:17px!important;color:#61789a!important}
.ref-footer{margin-top:10px!important}

@media(max-width:1050px){
  body:has(#welcomePanel.active) .ref-hero{padding-left:30px!important;padding-right:30px!important}
  .ref-logo{margin-left:48px!important}
  .ref-welcome h2{font-size:2.55rem!important}
  .ref-card-art{width:210px!important;height:142px!important}
}
@media(max-width:820px){
  .ref-logo{margin-left:0!important}
  body:has(#welcomePanel.active) .panel{padding:28px 16px 90px!important}
}

/* v3.0 — final landing micro-adjustments */
.ref-brand{
  gap:0!important;
}
.ref-logo{
  width:74px!important;
  height:60px!important;
  margin:0 0 3px 68px!important;
}
.ref-brand-name{
  margin-top:-1px!important;
}
.ref-brand-tag{
  margin-top:8px!important;
}
body:has(#welcomePanel.active) .panel{
  padding-top:31px!important;
  padding-bottom:38px!important;
}
.ref-entry-grid{
  transform:translateY(-6px)!important;
}
.ref-security{
  margin-top:15px!important;
}
.ref-footer{
  margin-top:13px!important;
  padding-bottom:8px!important;
}
@media(max-width:1050px){
  .ref-logo{margin-left:44px!important}
}
@media(max-width:820px){
  .ref-logo{margin-left:0!important}
  .ref-entry-grid{transform:none!important}
}

/* v3.1 — Student access, same visual language as approved landing */
body:has(#studentPanel.active){
  margin:0!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(32,132,255,.12),transparent 25%),
    radial-gradient(circle at 92% 88%,rgba(54,99,255,.10),transparent 27%),
    linear-gradient(145deg,#f5faff,#ffffff 55%,#eef7ff)!important;
}
body:has(#studentPanel.active) .shell{
  max-width:none!important;
  min-height:100vh!important;
  display:block!important;
  background:transparent!important;
}
body:has(#studentPanel.active) .hero{display:none!important}
body:has(#studentPanel.active) .panel{
  min-height:100vh!important;
  width:100%!important;
  padding:34px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}
body:has(#studentPanel.active) #studentPanel{
  width:100%!important;
  max-width:980px!important;
  margin:0!important;
  padding:0!important;
}
.student-access-shell{
  display:flex!important;
  min-height:590px!important;
  overflow:hidden!important;
  border:1px solid #dce6f2!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 28px 70px rgba(20,52,98,.13)!important;
}
.student-access-visual{
  position:relative!important;
  flex:0 0 43%!important;
  box-sizing:border-box!important;
  padding:48px 42px!important;
  overflow:hidden!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 0 0,rgba(35,126,255,.55),transparent 28%),
    radial-gradient(circle at 105% 90%,rgba(46,94,255,.38),transparent 35%),
    linear-gradient(155deg,#071f4d,#061a40 58%,#04132e)!important;
}
.student-access-visual:after{
  content:"";position:absolute;left:-20%;right:-25%;bottom:-120px;height:260px;
  border-radius:50%;background:rgba(28,102,238,.27);transform:rotate(-8deg)
}
.sap-logo{position:relative;z-index:2;width:78px;height:64px;margin-bottom:38px}
.sap-logo svg{display:block;width:100%;height:100%}
.sap-kicker{position:relative;z-index:2;font-size:.67rem;font-weight:900;letter-spacing:.18em;color:#71c7ff}
.student-access-visual h3{position:relative;z-index:2;margin:10px 0 15px!important;font-size:2.55rem!important;line-height:1.04!important;letter-spacing:-.035em!important;color:#fff!important}
.student-access-visual h3 span{color:#2398ff}
.student-access-visual p{position:relative;z-index:2;max-width:330px;margin:0!important;color:#c4d1e5!important;font-size:.92rem!important;line-height:1.6!important}
.sap-mini-art{position:absolute;z-index:2;left:42px;right:42px;bottom:48px;height:125px}
.sap-books{position:absolute;left:0;bottom:0;width:135px}
.sap-books i{display:block;height:17px;margin-top:5px;border-radius:5px;background:#25a38b;box-shadow:0 5px 12px rgba(0,0,0,.12)}
.sap-books i:nth-child(2){background:#43a9ef}.sap-books i:nth-child(3){background:#f3c94d}
.sap-cap{position:absolute;left:100px;top:5px;width:130px;height:75px;background:#1677e8;clip-path:polygon(50% 0,100% 35%,50% 70%,0 35%);filter:drop-shadow(0 9px 10px rgba(0,0,0,.18))}
.sap-check{position:absolute;left:183px;top:67px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#fff;color:#1688f4;font-size:1.4rem;font-weight:1000;box-shadow:0 10px 24px rgba(0,0,0,.18)}

.student-access-form{
  flex:1 1 auto!important;
  padding:44px 52px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
}
.student-access-form .auth-brand{margin-bottom:28px!important}
.student-access-form .auth-brand strong{font-size:1.08rem!important;color:#0c2147!important}
.student-access-form .back-btn{
  align-self:flex-start!important;
  margin:0 0 22px!important;
  padding:8px 12px!important;
  border-radius:10px!important;
  background:#f2f6fb!important;
  border:1px solid #e2e9f2!important;
  color:#55708f!important;
  font-size:.78rem!important;
}
.student-access-form h2{
  margin:0 0 8px!important;
  color:#081a3e!important;
  font-size:2.35rem!important;
  letter-spacing:-.03em!important;
}
.student-access-form>p,
.student-access-form .muted{
  color:#6d7f98!important;
}
.student-access-form .form{
  margin-top:18px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.student-access-form label{
  display:block!important;
  margin-bottom:8px!important;
  color:#20395d!important;
  font-size:.8rem!important;
  font-weight:850!important;
}
.student-access-form input{
  height:54px!important;
  box-sizing:border-box!important;
  padding:0 16px!important;
  border:1px solid #d9e4f1!important;
  border-radius:13px!important;
  background:#f9fbfe!important;
  color:#102342!important;
  font-size:1rem!important;
  letter-spacing:.04em!important;
  outline:none!important;
}
.student-access-form input:focus{
  border-color:#2b9bf4!important;
  box-shadow:0 0 0 4px rgba(43,155,244,.10)!important;
  background:#fff!important;
}
.student-access-form .primary-btn{
  min-height:52px!important;
  margin-top:8px!important;
  border:0!important;
  border-radius:13px!important;
  background:linear-gradient(90deg,#0876f3,#0a9bf4)!important;
  box-shadow:0 10px 24px rgba(13,120,241,.22)!important;
  font-weight:850!important;
}
.student-access-form .primary-btn:hover{transform:translateY(-1px)!important}
.student-access-form .message{border-radius:12px!important}

@media(max-width:760px){
  body:has(#studentPanel.active) .panel{padding:14px!important}
  .student-access-shell{display:block!important;min-height:0!important;border-radius:22px!important}
  .student-access-visual{padding:28px 24px 30px!important;min-height:260px!important}
  .sap-logo{width:62px;height:50px;margin-bottom:18px}
  .student-access-visual h3{font-size:2rem!important}
  .student-access-visual p{max-width:420px!important}
  .sap-mini-art{display:none!important}
  .student-access-form{padding:28px 24px 32px!important}
  .student-access-form h2{font-size:1.9rem!important}
}

/* v3.4 — integración 3D limpia basada en la referencia aprobada */
body:has(#studentPanel.active) .panel{
  padding:26px!important;
}
body:has(#studentPanel.active) #studentPanel{
  max-width:1120px!important;
}
.student-access-shell{
  min-height:650px!important;
  border-radius:30px!important;
  box-shadow:0 30px 80px rgba(24,71,138,.16)!important;
}
.student-reference-visual{
  position:relative!important;
  flex:0 0 50%!important;
  padding:0!important;
  overflow:hidden!important;
  background:#0878ef!important;
}
.student-reference-visual:after{display:none!important}
.student-reference-visual img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:47% center!important;
}
.student-access-form{
  position:relative!important;
  flex:1 1 50%!important;
  padding:66px 56px 42px!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 50% 13%,rgba(38,160,255,.08),transparent 25%),
    linear-gradient(180deg,#fff,#fbfdff)!important;
}
.student-access-form .auth-brand{display:none!important}
.student-access-form .back-btn{
  position:absolute!important;
  top:24px!important;
  right:26px!important;
  margin:0!important;
  padding:10px 15px!important;
  border-radius:999px!important;
  background:#f7fbff!important;
  border:1px solid #e1eaf4!important;
  box-shadow:0 8px 20px rgba(25,70,125,.08)!important;
  color:#37577e!important;
}
.student-access-form h2{
  margin:15px 0 8px!important;
  text-align:center!important;
  font-size:2.45rem!important;
  color:#071b45!important;
  letter-spacing:-.035em!important;
}
.student-access-form>p{
  max-width:390px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:#6b7c98!important;
  line-height:1.55!important;
}
.student-access-form .form{
  width:100%!important;
  max-width:440px!important;
  margin:24px auto 0!important;
}
.student-access-form label{
  color:#3e587b!important;
}
.student-access-form input{
  height:58px!important;
  border:2px solid #1a9af2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 20px rgba(31,136,226,.08),inset 0 1px 2px rgba(0,0,0,.02)!important;
}
.student-access-form .primary-btn{
  min-height:58px!important;
  margin-top:12px!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,#08c4f4 0%,#0874f5 100%)!important;
  box-shadow:0 14px 28px rgba(8,121,239,.28)!important;
  font-size:1.02rem!important;
}
.student-access-form .primary-btn:before{
  content:"→";
  display:inline-block;
  margin-right:10px;
  font-size:1.25rem;
}
.css-lock-3d{
  position:relative;
  width:190px;
  height:150px;
  margin:0 auto 2px;
}
.lock-cloud{
  position:absolute;
  bottom:22px;
  width:78px;height:47px;
  border-radius:50px;
  background:linear-gradient(180deg,#fff,#e6f5ff);
  box-shadow:0 12px 24px rgba(38,142,230,.12);
}
.lock-cloud.c1{left:4px}.lock-cloud.c2{right:3px}
.lock-shackle{
  position:absolute;
  z-index:2;
  left:68px;top:10px;
  width:54px;height:67px;
  box-sizing:border-box;
  border:14px solid #ffb61f;
  border-bottom:0;
  border-radius:32px 32px 0 0;
  filter:drop-shadow(0 7px 8px rgba(255,166,20,.22));
}
.lock-body{
  position:absolute;
  z-index:3;
  left:48px;top:56px;
  width:96px;height:80px;
  border-radius:22px;
  display:grid;place-items:center;
  transform:rotate(4deg);
  background:linear-gradient(145deg,#27b9ff,#0864ee 68%);
  box-shadow:inset 6px 7px 12px rgba(255,255,255,.22),0 16px 25px rgba(20,106,225,.26);
}
.lock-body span{
  display:grid;place-items:center;
  width:47px;height:39px;
  border-radius:13px;
  background:#fff;
  color:#1688f4;
  font-size:1.55rem;
  font-weight:1000;
  box-shadow:0 6px 12px rgba(0,80,190,.16);
}
.css-lock-3d i,.css-lock-3d b{
  position:absolute;z-index:4;
  width:9px;height:30px;border-radius:99px;
  background:#0d76f0;
  right:24px;top:48px;
  transform:rotate(45deg);
}
.css-lock-3d b{right:8px;top:68px;height:20px;transform:rotate(75deg)}

@media(max-width:800px){
  body:has(#studentPanel.active) .panel{padding:12px!important}
  .student-access-shell{display:block!important;min-height:0!important}
  .student-reference-visual{
    width:100%!important;
    min-height:430px!important;
  }
  .student-reference-visual img{object-position:center 48%!important}
  .student-access-form{padding:72px 24px 34px!important}
  .css-lock-3d{width:155px;height:125px;transform:scale(.85);margin-bottom:-8px}
  .student-access-form h2{font-size:2rem!important}
}

/* ==========================================================
   v3.5 — PRINCIPAL 3D, referencia aprobada
   ========================================================== */
body:has(#welcomePanel.active){
  margin:0!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(38,134,255,.16),transparent 24%),
    radial-gradient(circle at 88% 80%,rgba(60,116,255,.10),transparent 26%),
    linear-gradient(145deg,#eaf5ff,#fff 53%,#edf6ff)!important;
}
body:has(#welcomePanel.active) .shell{
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  display:block!important;
  background:transparent!important;
}
body:has(#welcomePanel.active) .hero{display:none!important}
body:has(#welcomePanel.active) .panel{
  width:100%!important;
  min-height:100vh!important;
  padding:22px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}
body:has(#welcomePanel.active) #welcomePanel{
  display:block!important;
  width:100%!important;
  max-width:1440px!important;
  margin:0!important;
  padding:0!important;
}
.main3d-page{
  box-sizing:border-box;
  width:100%;
  min-height:calc(100vh - 44px);
  padding:26px 46px 28px;
  border:1px solid rgba(73,145,236,.22);
  border-radius:32px;
  background:
    radial-gradient(circle at 10% 10%,rgba(57,148,255,.12),transparent 25%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,250,255,.96));
  box-shadow:0 28px 80px rgba(33,82,145,.13);
}
.main3d-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
}
.main3d-brand img{
  display:block;
  width:330px;
  max-width:42vw;
  border-radius:18px;
  mix-blend-mode:multiply;
}
.main3d-header-note{
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e0e9f3;
  box-shadow:0 8px 22px rgba(32,77,128,.08);
  color:#4d678a;
  font-size:.78rem;
  font-weight:800;
}
.main3d-hero{
  max-width:820px;
  margin:4px auto 24px;
  text-align:center;
}
.main3d-badge{
  display:inline-block;
  padding:8px 15px;
  border-radius:999px;
  background:#e5f4ff;
  color:#1579e7;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.1em;
}
.main3d-hero h1{
  margin:12px 0 9px!important;
  color:#071b49!important;
  font-size:3.55rem!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.main3d-hero h1 span{
  color:#1675f1!important;
}
.main3d-hero p{
  max-width:680px;
  margin:0 auto!important;
  color:#617492!important;
  font-size:.96rem!important;
  line-height:1.55!important;
}
.main3d-entry-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:28px!important;
  max-width:1250px;
  margin:0 auto;
}
.main3d-card{
  position:relative;
  min-height:325px;
  padding:0!important;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:47% 53%!important;
  align-items:stretch!important;
  border:1px solid #dbe6f2!important;
  border-radius:27px!important;
  background:linear-gradient(145deg,#fff,#f8fbff)!important;
  box-shadow:0 18px 44px rgba(30,72,126,.10)!important;
  color:#0b2049!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:.2s ease!important;
}
.main3d-card.student-card{
  grid-template-columns:47% 53%!important;
  border-color:#b8d9ff!important;
}
.main3d-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 24px 55px rgba(30,72,126,.15)!important;
}
.main3d-art{
  position:relative;
  overflow:hidden;
  min-height:325px;
  background:#edf7ff;
}
.main3d-art img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.family-main-art img{object-position:48% center}
.student-main-art img{object-position:53% center}
.main3d-card-copy{
  padding:42px 32px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}
.main3d-role{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:950;
  letter-spacing:.11em;
}
.main3d-role.green{background:#e8f8e8;color:#188637}
.main3d-role.blue{background:#e6f3ff;color:#1374e8}
.main3d-card-copy>strong{
  display:block;
  margin-top:10px;
  color:#0a1d47;
  font-size:1.75rem;
  letter-spacing:-.025em;
}
.main3d-card-copy>p{
  margin:9px 0 20px!important;
  color:#536a89!important;
  font-size:.86rem!important;
  line-height:1.5!important;
}
.main3d-button{
  margin-top:auto;
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border-radius:14px;
  color:#fff;
  font-size:.87rem;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 24px rgba(20,112,225,.20);
}
.main3d-button b{float:right;font-size:1.1rem}
.green-btn{background:linear-gradient(90deg,#35b447,#15972e)}
.blue-btn{background:linear-gradient(90deg,#09b9f3,#0874f5)}
.main3d-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:1120px;
  margin:25px auto 0;
}
.main3d-benefits>div{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.main3d-benefits>div>span{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,#28b9ff,#0869ef);
  color:#fff;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(17,113,226,.18);
}
.main3d-benefits p{margin:0!important}
.main3d-benefits strong{display:block;color:#16345f;font-size:.78rem}
.main3d-benefits small{display:block;margin-top:2px;color:#7587a2;font-size:.68rem}

@media(max-width:1000px){
  .main3d-page{padding:24px}
  .main3d-hero h1{font-size:3rem!important}
  .main3d-card{grid-template-columns:44% 56%!important}
  .main3d-card-copy{padding:32px 24px 26px}
}
@media(max-width:800px){
  body:has(#welcomePanel.active) .panel{padding:10px!important}
  .main3d-page{border-radius:23px;padding:20px 15px 28px}
  .main3d-header{min-height:70px}
  .main3d-brand img{width:235px;max-width:65vw}
  .main3d-header-note{display:none}
  .main3d-hero h1{font-size:2.5rem!important}
  .main3d-entry-grid{grid-template-columns:1fr!important}
  .main3d-card{min-height:285px}
  .main3d-art{min-height:285px}
  .main3d-benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .main3d-hero h1{font-size:2.1rem!important}
  .main3d-card{display:block!important}
  .main3d-art{height:220px;min-height:220px}
  .main3d-card-copy{padding:22px}
  .main3d-benefits{grid-template-columns:1fr}
}

/* v3.7 — principal corregida: una pantalla sin aspecto encogido */
@media(min-width:801px){
  body:has(#welcomePanel.active){
    overflow:hidden!important;
  }
  body:has(#welcomePanel.active) .panel{
    height:100vh!important;
    min-height:100vh!important;
    padding:14px 18px!important;
  }
  body:has(#welcomePanel.active) #welcomePanel{
    height:100%!important;
  }
  .main3d-page{
    height:calc(100vh - 28px)!important;
    min-height:0!important;
    padding:16px 38px 18px!important;
    display:grid!important;
    grid-template-rows:68px auto minmax(260px,1fr) 54px!important;
    row-gap:10px!important;
    overflow:hidden!important;
  }
  .main3d-header{
    min-height:0!important;
    height:68px!important;
  }
  .main3d-brand img{
    width:275px!important;
    max-height:66px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .main3d-header-note{
    padding:8px 14px!important;
    font-size:.72rem!important;
  }
  .main3d-hero{
    margin:0 auto!important;
  }
  .main3d-badge{
    padding:6px 12px!important;
    font-size:.61rem!important;
  }
  .main3d-hero h1{
    margin:7px 0 5px!important;
    font-size:2.85rem!important;
    line-height:.96!important;
  }
  .main3d-hero p{
    max-width:700px!important;
    font-size:.82rem!important;
    line-height:1.4!important;
  }
  .main3d-entry-grid{
    width:100%!important;
    max-width:1240px!important;
    min-height:0!important;
    height:100%!important;
    gap:22px!important;
    align-self:stretch!important;
  }
  .main3d-card{
    min-height:0!important;
    height:100%!important;
    border-radius:24px!important;
  }
  .main3d-art{
    min-height:0!important;
    height:100%!important;
  }
  .main3d-card-copy{
    padding:25px 24px 22px!important;
  }
  .main3d-role{
    padding:5px 9px!important;
    font-size:.58rem!important;
  }
  .main3d-card-copy>strong{
    margin-top:8px!important;
    font-size:1.58rem!important;
  }
  .main3d-card-copy>p{
    margin:7px 0 14px!important;
    font-size:.78rem!important;
    line-height:1.4!important;
  }
  .main3d-button{
    padding:12px 14px!important;
    font-size:.8rem!important;
  }
  .main3d-benefits{
    width:100%!important;
    max-width:1100px!important;
    height:54px!important;
    margin:0 auto!important;
    gap:14px!important;
    align-items:center!important;
  }
  .main3d-benefits>div>span{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
    border-radius:11px!important;
  }
  .main3d-benefits strong{font-size:.72rem!important}
  .main3d-benefits small{font-size:.61rem!important}
}
@media(min-width:801px) and (max-height:760px){
  .main3d-page{
    grid-template-rows:56px auto minmax(230px,1fr) 46px!important;
    row-gap:6px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  .main3d-header{height:56px!important}
  .main3d-brand img{width:235px!important;max-height:54px!important}
  .main3d-hero h1{font-size:2.45rem!important}
  .main3d-hero p{font-size:.74rem!important}
  .main3d-card-copy{padding:20px!important}
  .main3d-benefits{height:46px!important}
}

/* v4.3 — acceso familiar aprobado + estructura reparada */
body:has(#familyPanel.active){
  margin:0!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#edf6ff,#ffffff 58%,#edf6ff)!important;
}
body:has(#familyPanel.active) .shell{
  width:100%!important;max-width:none!important;height:100vh!important;min-height:100vh!important;
  display:block!important;background:transparent!important;
}
body:has(#familyPanel.active) .hero{display:none!important}
body:has(#familyPanel.active) .panel{
  width:100%!important;height:100vh!important;min-height:100vh!important;
  box-sizing:border-box!important;padding:14px 18px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:transparent!important;
}
body:has(#familyPanel.active) #familyPanel{
  width:100%!important;max-width:1180px!important;height:calc(100vh - 28px)!important;
  max-height:790px!important;margin:0!important;padding:0!important;
}
.family-final-shell{
  width:100%!important;height:100%!important;display:grid!important;
  grid-template-columns:52% 48%!important;overflow:hidden!important;
  border:1px solid #d7e4f1!important;border-radius:30px!important;background:#fff!important;
  box-shadow:0 28px 78px rgba(28,74,137,.15)!important;
}
.family-final-visual{position:relative!important;overflow:hidden!important;background:#f4f9ff!important}
.family-final-visual>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;object-fit:cover!important;object-position:center top!important;
}
.family-final-back{
  position:absolute!important;z-index:10!important;left:25px!important;bottom:22px!important;
  padding:10px 16px!important;border:1px solid rgba(210,224,241,.95)!important;
  border-radius:999px!important;background:rgba(255,255,255,.95)!important;
  color:#114caa!important;font-size:.78rem!important;font-weight:900!important;
  box-shadow:0 9px 22px rgba(27,72,128,.12)!important;cursor:pointer!important;
}
.family-final-form{
  box-sizing:border-box!important;padding:38px 48px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;
}
.family-final-functional{width:100%!important;max-width:455px!important}
.family-final-functional>.auth-brand{display:none!important}
.family-final-functional .back-btn{display:none!important}
.family-final-functional>.eyebrow,.family-final-functional>h2{display:none!important}
.family-final-functional .tabs{
  width:100%!important;margin:0 0 24px!important;border-bottom:1px solid #e1e7ef!important;
}
.family-final-functional .tab{
  padding:12px 8px!important;color:#52657f!important;font-size:.92rem!important;font-weight:850!important;
}
.family-final-functional .tab.active{color:#115ce8!important;border-color:#115ce8!important}
.family-final-functional .form{
  width:100%!important;margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;
}
.family-final-functional label{
  display:block!important;margin:0 0 6px!important;color:#425873!important;
  font-size:.75rem!important;font-weight:850!important;
}
.family-final-functional input{
  width:100%!important;min-height:50px!important;box-sizing:border-box!important;
  margin-bottom:11px!important;padding:0 14px!important;border:1px solid #d7e0ea!important;
  border-radius:13px!important;background:#fff!important;outline:none!important;
}
.family-final-functional input:focus{
  border-color:#4b9bff!important;box-shadow:0 0 0 4px rgba(45,137,255,.09)!important;
}
.family-final-functional .primary-btn{
  width:100%!important;min-height:52px!important;margin-top:5px!important;border:0!important;
  border-radius:14px!important;background:linear-gradient(90deg,#42b63f,#239b31)!important;
  box-shadow:0 12px 25px rgba(39,151,50,.22)!important;font-weight:900!important;
}
.family-final-functional small,.family-final-functional .muted{
  display:block!important;margin-top:9px!important;text-align:center!important;
  color:#72849b!important;font-size:.67rem!important;line-height:1.35!important;
}
@media(max-width:800px){
  body:has(#familyPanel.active){overflow:auto!important}
  body:has(#familyPanel.active) .shell,
  body:has(#familyPanel.active) .panel{height:auto!important;min-height:100vh!important}
  body:has(#familyPanel.active) #familyPanel{height:auto!important;max-height:none!important}
  .family-final-shell{display:block!important;border-radius:23px!important}
  .family-final-visual{height:430px!important}
  .family-final-form{padding:30px 22px 34px!important;overflow:visible!important}
  .family-final-back{left:16px!important;bottom:16px!important}
}

/* v4.4 — Dashboard familiar aprobado */
body:has(#familyDashboardPanel.active){
  margin:0!important;overflow:hidden!important;
  background:linear-gradient(145deg,#edf5ff,#fff 58%,#edf5ff)!important;
}
body:has(#familyDashboardPanel.active) .shell{
  width:100%!important;max-width:none!important;height:100vh!important;min-height:100vh!important;
  display:block!important;background:transparent!important;
}
body:has(#familyDashboardPanel.active) .hero{display:none!important}
body:has(#familyDashboardPanel.active) .panel{
  width:100%!important;height:100vh!important;min-height:100vh!important;
  padding:12px 16px!important;box-sizing:border-box!important;display:flex!important;
  align-items:center!important;justify-content:center!important;background:transparent!important;
}
body:has(#familyDashboardPanel.active) #familyDashboardPanel{
  width:100%!important;max-width:1240px!important;height:calc(100vh - 24px)!important;
  max-height:800px!important;padding:0!important;margin:0!important;overflow:hidden!important;
  border:1px solid #d8e5f3!important;border-radius:27px!important;background:#fff!important;
  box-shadow:0 25px 70px rgba(31,78,140,.14)!important;
}
.fd-header{
  height:88px!important;box-sizing:border-box!important;padding:0 38px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:linear-gradient(105deg,#1265e7,#0752cc)!important;color:#fff!important;
}
.fd-brand{display:flex!important;align-items:center!important;gap:13px!important;font-size:1.25rem!important}
.fd-logo3d{
  width:48px!important;height:48px!important;border-radius:13px!important;display:grid!important;
  place-items:center!important;background:linear-gradient(145deg,#54b8ff,#0e54d4)!important;
  border:2px solid rgba(255,255,255,.55)!important;color:#fff!important;font-size:1.55rem!important;
  box-shadow:0 8px 15px rgba(0,36,108,.28),inset 0 2px 5px rgba(255,255,255,.45)!important;
  transform:rotate(-5deg)!important;
}
.fd-logout{
  border:1px solid rgba(255,255,255,.72)!important;border-radius:12px!important;background:#fff!important;
  color:#0752cc!important;padding:11px 17px!important;font-weight:850!important;cursor:pointer!important;
  box-shadow:0 8px 18px rgba(0,42,118,.18)!important;
}
.fd-main{height:calc(100% - 88px)!important;box-sizing:border-box!important;padding:27px 54px 24px!important}
.fd-welcome h2{margin:0!important;font-size:1.75rem!important;color:#102c59!important}
.fd-welcome p,.fd-title p{margin:4px 0 0!important;color:#667b9b!important;font-size:.88rem!important}
.fd-divider{height:1px!important;background:#dbe6f3!important;margin:18px 0 20px!important}
.fd-title h3{margin:0!important;font-size:1.45rem!important;color:#0e2d5d!important}
.fd-grid{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:30px!important;
  margin-top:19px!important;align-items:stretch!important;
}
.fd-students{display:block!important}
.fd-student-card,.fd-add-card{
  height:290px!important;box-sizing:border-box!important;border:1px solid #dce7f4!important;
  border-radius:22px!important;background:#fff!important;box-shadow:0 13px 30px rgba(39,79,126,.09)!important;
}
.fd-student-card{padding:26px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.fd-student-top{display:flex!important;align-items:center!important;gap:25px!important}
.fd-backpack{
  position:relative!important;width:122px!important;height:115px!important;flex:0 0 122px!important;
  border-radius:34px 34px 27px 27px!important;background:linear-gradient(145deg,#55a4ff,#155ee1)!important;
  box-shadow:0 16px 23px rgba(22,82,174,.22),inset 5px 5px 9px rgba(255,255,255,.24)!important;
}
.fd-backpack:before{
  content:""!important;position:absolute!important;left:33px!important;top:-19px!important;width:54px!important;height:30px!important;
  border:9px solid #174b9d!important;border-bottom:0!important;border-radius:24px 24px 0 0!important;
}
.fd-backpack:after{
  content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:14px!important;height:39px!important;
  border-radius:13px!important;background:linear-gradient(#3b8df4,#1761d8)!important;border:1px solid rgba(10,72,171,.28)!important;
}
.fd-student-card .student-meta{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:9px!important}
.fd-student-card .student-meta>strong{font-size:1.8rem!important;color:#0b2b59!important}
.fd-course{padding:6px 12px!important;border-radius:10px!important;background:#eaf2ff!important;color:#155cdb!important;font-weight:850!important}
.fd-status{padding:6px 12px!important;border-radius:10px!important;font-weight:850!important;font-size:.82rem!important}
.fd-status.ok{background:#e5f7eb!important;color:#239847!important}
.fd-status.pending{background:#fff3d8!important;color:#9b6b00!important}
.fd-student-card .student-actions{
  padding-top:18px!important;border-top:1px solid #dce6f2!important;display:grid!important;
  grid-template-columns:1.15fr 1fr!important;gap:13px!important;
}
.fd-student-card .student-actions button{height:48px!important;margin:0!important;border-radius:12px!important;font-weight:850!important}
.fd-student-card .family-view-student{display:flex!important;align-items:center!important;justify-content:space-between!important}
.fd-add-card{
  border:1.5px dashed #76aaf7!important;background:linear-gradient(145deg,#fff,#f7fbff)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;padding:22px!important;
}
.fd-add-icon{position:relative!important;width:86px!important;height:80px!important;margin-bottom:8px!important}
.fd-person{
  position:absolute!important;left:12px!important;bottom:0!important;width:58px!important;height:43px!important;
  border-radius:30px 30px 14px 14px!important;background:linear-gradient(145deg,#4f9fff,#125bdc)!important;
  box-shadow:0 10px 17px rgba(18,88,208,.18)!important;
}
.fd-person:before{
  content:""!important;position:absolute!important;width:34px!important;height:34px!important;left:12px!important;top:-31px!important;
  border-radius:50%!important;background:linear-gradient(145deg,#62adff,#1762df)!important;
}
.fd-add-icon b{
  position:absolute!important;right:0!important;bottom:3px!important;width:37px!important;height:37px!important;
  border-radius:50%!important;display:grid!important;place-items:center!important;background:#1764e5!important;
  color:#fff!important;font-size:1.5rem!important;box-shadow:0 7px 13px rgba(18,87,201,.22)!important;
}
.fd-add-card h3{margin:8px 0 5px!important;color:#0d2c5b!important;font-size:1.35rem!important}
.fd-add-card p{max-width:330px!important;margin:0 0 16px!important;color:#657b9a!important;font-size:.86rem!important;line-height:1.45!important}
.fd-add-btn{
  min-width:205px!important;height:47px!important;border:1px solid #a8c7f4!important;border-radius:12px!important;
  background:#fff!important;color:#1260dc!important;font-weight:850!important;cursor:pointer!important;
  box-shadow:0 7px 16px rgba(33,85,153,.09)!important;
}
.fd-code-box{margin:13px 0 0!important;padding:10px 16px!important}
.fd-note{
  height:64px!important;margin-top:17px!important;border-radius:17px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;
  background:linear-gradient(90deg,#edf5ff,#f8fbff)!important;border:1px solid #e0eaf6!important;
}
.fd-note p{margin:0!important;color:#123363!important;font-size:1rem!important}
.fd-note p span{color:#1762dc!important;font-weight:850!important}
.fd-shield{
  width:38px!important;height:42px!important;display:grid!important;place-items:center!important;color:#fff!important;font-weight:900!important;
  border-radius:13px 13px 18px 18px!important;background:linear-gradient(145deg,#479cff,#135bd8)!important;
  box-shadow:0 8px 14px rgba(24,91,192,.18)!important;
}
@media(max-height:720px) and (min-width:801px){
  .fd-header{height:72px!important}
  .fd-main{height:calc(100% - 72px)!important;padding:18px 45px!important}
  .fd-divider{margin:12px 0!important}
  .fd-grid{margin-top:12px!important}
  .fd-student-card,.fd-add-card{height:250px!important}
  .fd-backpack{width:100px!important;height:93px!important;flex-basis:100px!important}
  .fd-note{height:53px!important;margin-top:12px!important}
}
@media(max-width:800px){
  body:has(#familyDashboardPanel.active){overflow:auto!important}
  body:has(#familyDashboardPanel.active) .shell,
  body:has(#familyDashboardPanel.active) .panel{height:auto!important;min-height:100vh!important}
  body:has(#familyDashboardPanel.active) #familyDashboardPanel{height:auto!important;max-height:none!important}
  .fd-header{padding:0 18px!important}
  .fd-main{height:auto!important;padding:24px 18px!important}
  .fd-grid{grid-template-columns:1fr!important}
  .fd-student-card,.fd-add-card{height:auto!important;min-height:270px!important}
  .fd-note{height:auto!important;padding:16px!important;text-align:center!important}
}

/* v4.5 — Pulido final dashboard familiar, sin cambios funcionales */
body:has(#familyDashboardPanel.active) #familyDashboardPanel{
  max-height:760px!important;
}
.fd-header{
  height:76px!important;
  padding:0 34px!important;
}
.fd-logo3d{
  width:43px!important;height:43px!important;
  font-size:1.4rem!important;
}
.fd-main{
  height:calc(100% - 76px)!important;
  padding:20px 48px 18px!important;
}
.fd-welcome h2{font-size:1.62rem!important}
.fd-divider{margin:13px 0 15px!important}
.fd-title h3{font-size:1.35rem!important}
.fd-grid{
  gap:25px!important;
  margin-top:14px!important;
}
.fd-student-card,.fd-add-card{
  height:258px!important;
}
.fd-student-card{padding:22px 24px!important}
.fd-backpack{
  width:105px!important;height:99px!important;flex-basis:105px!important;
}
.fd-backpack:before{
  left:29px!important;top:-17px!important;width:46px!important;height:26px!important;
  border-width:8px!important;
}
.fd-student-card .student-meta>strong{font-size:1.62rem!important}
.fd-student-card .student-meta{gap:7px!important}
.fd-student-card .student-actions{
  padding-top:14px!important;
}
.fd-student-card .student-actions button{
  height:44px!important;
}
.fd-add-icon{
  transform:scale(.88)!important;
  margin-bottom:0!important;
}
.fd-add-card h3{
  margin:3px 0 4px!important;
  font-size:1.25rem!important;
}
.fd-add-card p{
  margin-bottom:12px!important;
}
.fd-add-btn{height:43px!important}
.fd-note{
  height:55px!important;
  margin-top:13px!important;
}
.fd-shield{
  width:34px!important;height:37px!important;
}
.fd-note p{font-size:.94rem!important}

/* El logo superior usa ahora el asset real de Student Planner */
.fd-logo3d{
  background-image:url('./sp-logo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  color:transparent!important;
  overflow:hidden!important;
  transform:none!important;
  border:1px solid rgba(255,255,255,.7)!important;
}
@media(max-height:700px) and (min-width:801px){
  body:has(#familyDashboardPanel.active) #familyDashboardPanel{max-height:670px!important}
  .fd-header{height:66px!important}
  .fd-main{height:calc(100% - 66px)!important;padding:14px 42px!important}
  .fd-welcome h2{font-size:1.42rem!important}
  .fd-divider{margin:9px 0!important}
  .fd-grid{margin-top:9px!important}
  .fd-student-card,.fd-add-card{height:225px!important}
  .fd-backpack{width:88px!important;height:82px!important;flex-basis:88px!important}
  .fd-student-card .student-meta>strong{font-size:1.42rem!important}
  .fd-student-card .student-actions button{height:39px!important}
  .fd-note{height:46px!important;margin-top:9px!important}
}

/* v4.6 — modal para nuevo acceso de estudiante */
.student-code-modal{
  position:fixed!important;inset:0!important;z-index:9999!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:22px!important;box-sizing:border-box!important;
  background:rgba(13,42,84,.34)!important;backdrop-filter:blur(5px)!important;
}
.student-code-modal.hidden{display:none!important}
.student-code-modal-card{
  position:relative!important;width:min(440px,100%)!important;box-sizing:border-box!important;
  padding:32px 34px 28px!important;border:1px solid #dce8f6!important;border-radius:25px!important;
  background:#fff!important;text-align:center!important;
  box-shadow:0 30px 80px rgba(15,55,112,.24)!important;
}
.student-code-close{
  position:absolute!important;right:16px!important;top:14px!important;width:36px!important;height:36px!important;
  border:0!important;border-radius:50%!important;background:#eef5ff!important;color:#37618f!important;
  font-size:1.5rem!important;line-height:1!important;cursor:pointer!important;
}
.student-code-icon{
  position:relative!important;width:76px!important;height:72px!important;margin:0 auto 12px!important;
}
.student-code-icon span{
  position:absolute!important;left:9px!important;bottom:0!important;width:52px!important;height:38px!important;
  border-radius:28px 28px 13px 13px!important;background:linear-gradient(145deg,#55a5ff,#145ddf)!important;
  box-shadow:0 10px 18px rgba(18,87,201,.18)!important;
}
.student-code-icon span:before{
  content:""!important;position:absolute!important;left:11px!important;top:-28px!important;width:31px!important;height:31px!important;
  border-radius:50%!important;background:linear-gradient(145deg,#68b2ff,#1763df)!important;
}
.student-code-icon b{
  position:absolute!important;right:0!important;bottom:1px!important;width:34px!important;height:34px!important;
  border-radius:50%!important;display:grid!important;place-items:center!important;background:#1764e5!important;
  color:#fff!important;font-size:1.35rem!important;box-shadow:0 7px 13px rgba(18,87,201,.2)!important;
}
.student-code-modal-card h3{margin:0 0 7px!important;color:#102e5b!important;font-size:1.35rem!important}
.student-code-modal-card>p{margin:0 auto 20px!important;max-width:330px!important;color:#687e9b!important;font-size:.88rem!important;line-height:1.45!important}
.student-code-value{
  padding:14px!important;border:1px solid #cfe0f6!important;border-radius:15px!important;
  background:linear-gradient(145deg,#f5f9ff,#edf5ff)!important;
}
.student-code-value span{display:block!important;margin-bottom:4px!important;color:#7187a3!important;font-size:.67rem!important;font-weight:900!important;letter-spacing:.12em!important}
.student-code-value strong{display:block!important;color:#115bd7!important;font-size:1.75rem!important;letter-spacing:.08em!important}
.student-code-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:18px!important}
.student-code-actions button{height:46px!important;margin:0!important;border-radius:12px!important}
#createStudentBtn:disabled{opacity:.6!important;cursor:wait!important}

/* v4.7 — eliminar estudiante de forma segura */
.fd-student-card{position:relative!important}
.fd-more-btn{
  position:absolute!important;right:14px!important;top:12px!important;z-index:4!important;
  width:36px!important;height:32px!important;border:0!important;border-radius:10px!important;
  background:#f1f6fc!important;color:#4d698a!important;font-size:1.3rem!important;
  line-height:1!important;cursor:pointer!important;
}
.fd-more-btn:hover{background:#e6eef8!important}
.fd-student-menu{
  position:absolute!important;right:14px!important;top:49px!important;z-index:20!important;
  min-width:170px!important;padding:6px!important;border:1px solid #e1e8f1!important;
  border-radius:12px!important;background:#fff!important;box-shadow:0 14px 30px rgba(24,59,105,.16)!important;
}
.fd-student-menu.hidden{display:none!important}
.delete-student-option{
  width:100%!important;padding:10px 12px!important;border:0!important;border-radius:8px!important;
  background:#fff!important;color:#b73535!important;text-align:left!important;font-size:.78rem!important;
  font-weight:850!important;cursor:pointer!important;
}
.delete-student-option:hover{background:#fff2f2!important}

.delete-student-modal{
  position:fixed!important;inset:0!important;z-index:10000!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:22px!important;background:rgba(15,38,73,.38)!important;backdrop-filter:blur(5px)!important;
}
.delete-student-modal.hidden{display:none!important}
.delete-student-card{
  width:min(430px,100%)!important;padding:30px 32px 27px!important;box-sizing:border-box!important;
  border:1px solid #eadede!important;border-radius:24px!important;background:#fff!important;
  text-align:center!important;box-shadow:0 30px 75px rgba(35,42,61,.23)!important;
}
.delete-student-icon{
  width:58px!important;height:58px!important;margin:0 auto 13px!important;border-radius:18px!important;
  display:grid!important;place-items:center!important;background:#fff0f0!important;color:#c74242!important;
  font-size:1.7rem!important;font-weight:950!important;
}
.delete-student-card h3{margin:0 0 7px!important;color:#183353!important;font-size:1.35rem!important}
.delete-student-card p{margin:0!important;color:#687b93!important;font-size:.86rem!important;line-height:1.5!important}
.delete-student-warning{
  margin:17px 0!important;padding:10px 12px!important;border-radius:11px!important;
  background:#fff6f6!important;color:#a84444!important;font-size:.78rem!important;font-weight:850!important;
}
.delete-student-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.delete-student-actions button{height:45px!important;margin:0!important;border-radius:12px!important}
.danger-btn{
  border:0!important;background:linear-gradient(90deg,#e15b5b,#c63e3e)!important;color:#fff!important;
  font-weight:900!important;box-shadow:0 9px 19px rgba(196,60,60,.18)!important;cursor:pointer!important;
}
.danger-btn:disabled{opacity:.6!important;cursor:wait!important}

/* v4.9 — Seguimiento familiar claro, luminoso y responsive */
body:has(#familyStudentPanel.active){
  margin:0!important;overflow:hidden!important;
  background:linear-gradient(145deg,#edf5ff,#fff 55%,#f4f8fd)!important;
}
body:has(#familyStudentPanel.active) .shell{
  width:100%!important;max-width:none!important;height:100vh!important;min-height:100vh!important;
  display:block!important;background:transparent!important;
}
body:has(#familyStudentPanel.active) .hero{display:none!important}
body:has(#familyStudentPanel.active) .panel{
  width:100%!important;height:100vh!important;min-height:100vh!important;box-sizing:border-box!important;
  padding:10px 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  background:transparent!important;
}
body:has(#familyStudentPanel.active) #familyStudentPanel{
  width:100%!important;max-width:1320px!important;height:calc(100vh - 20px)!important;max-height:820px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;border:1px solid #dce7f3!important;
  border-radius:27px!important;background:#f8fbff!important;box-shadow:0 25px 70px rgba(31,78,140,.13)!important;
}
.ff-topbar{
  height:68px!important;box-sizing:border-box!important;padding:0 30px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:#fff!important;border-bottom:1px solid #e0e8f2!important;
}
.ff-brand{display:flex!important;align-items:center!important;gap:11px!important;color:#102d5c!important;font-size:1.12rem!important}
.ff-brand-icon{
  width:39px!important;height:39px!important;border-radius:11px!important;display:grid!important;place-items:center!important;
  background-image:url('./sp-logo.jpg')!important;background-size:cover!important;background-position:center!important;
  color:transparent!important;box-shadow:0 6px 13px rgba(24,85,174,.16)!important;
}
.ff-back-btn{
  min-height:40px!important;padding:0 15px!important;border:1px solid #a9c8f5!important;border-radius:11px!important;
  background:#fff!important;color:#1260dc!important;font-weight:850!important;cursor:pointer!important;
}
.ff-main{
  height:calc(100% - 68px)!important;box-sizing:border-box!important;padding:18px 28px 20px!important;overflow:hidden!important;
}
.ff-student-head{height:66px!important;display:flex!important;align-items:flex-start!important}
.ff-name-row{display:flex!important;align-items:center!important;gap:12px!important}
.ff-name-row h2{margin:0!important;color:#0c2c5d!important;font-size:1.75rem!important}
.ff-course{
  display:inline-flex!important;align-items:center!important;min-height:30px!important;padding:0 11px!important;border-radius:10px!important;
  background:#eaf2ff!important;color:#155dde!important;font-size:.83rem!important;font-weight:900!important;
}
.ff-student-head p{margin:5px 0 0!important;color:#647b9a!important;font-size:.8rem!important}
.ff-lock{color:#1764e5!important}.ff-student-head b{padding:0 4px!important;color:#a3b2c4!important}
.ff-summary-grid{
  display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:16px!important;height:235px!important;
}
.ff-card{
  box-sizing:border-box!important;border:1px solid #dfe8f3!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 9px 22px rgba(39,79,126,.07)!important;overflow:hidden!important;
}
.ff-summary-grid>.ff-card{padding:17px 18px!important}
.ff-card-title{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:11px!important}
.ff-card-title h3{margin:0!important;color:#12315e!important;font-size:1.05rem!important}
.ff-card-title small{display:block!important;margin-top:2px!important;color:#7b8da5!important;font-size:.68rem!important}
.ff-title-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;
  display:grid!important;place-items:center!important;font-weight:900!important;box-shadow:0 5px 10px rgba(42,82,136,.09)!important;
}
.ff-title-icon.sun{background:#fff6df!important;color:#e89500!important}
.ff-title-icon.calendar{background:#f0eaff!important;color:#7651d8!important}
.ff-title-icon.exam{background:#fff0f0!important;color:#df4e4e!important}
.ff-title-icon.clock{background:#eaf3ff!important;color:#1764e5!important}
.ff-content{max-height:165px!important;overflow:auto!important;padding-right:3px!important}
.ff-content::-webkit-scrollbar{width:5px!important}
.ff-content::-webkit-scrollbar-thumb{background:#d6e2f0!important;border-radius:10px!important}
.ff-summary-grid .family-empty{padding:20px 8px!important;text-align:center!important;color:#7a8ca4!important;font-size:.8rem!important}
.ff-summary-grid .family-task-item,
.ff-summary-grid .family-exam-item,
.ff-summary-grid .family-upcoming-item{
  margin:0 0 8px!important;padding:9px 11px!important;border:1px solid #e6edf5!important;border-radius:11px!important;
  background:#fbfdff!important;box-shadow:none!important;
}
.ff-summary-grid strong{color:#16345f!important}
.ff-summary-grid small{color:#71849d!important}
.ff-schedule{
  height:calc(100% - 316px)!important;margin-top:14px!important;padding:14px 16px 15px!important;
}
.ff-schedule-title{margin-bottom:9px!important}
.ff-schedule-scroll{height:calc(100% - 43px)!important;overflow:auto!important;border-radius:12px!important}
.ff-schedule .family-schedule-grid{min-width:780px!important;margin:0!important}
.ff-schedule .schedule-cell{min-height:42px!important}
.ff-schedule .schedule-head{position:sticky!important;top:0!important;z-index:2!important;background:#f5f8fc!important}

/* móvil: no encogemos escritorio; reorganizamos el contenido */
@media(max-width:800px){
  body:has(#familyStudentPanel.active){overflow:auto!important;background:#f5f9fe!important}
  body:has(#familyStudentPanel.active) .shell,
  body:has(#familyStudentPanel.active) .panel{height:auto!important;min-height:100vh!important}
  body:has(#familyStudentPanel.active) .panel{padding:0!important;display:block!important}
  body:has(#familyStudentPanel.active) #familyStudentPanel{
    height:auto!important;min-height:100vh!important;max-height:none!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;overflow:visible!important;
  }
  .ff-topbar{
    height:60px!important;padding:0 14px!important;position:sticky!important;top:0!important;z-index:30!important;
    box-shadow:0 4px 14px rgba(34,72,120,.07)!important;
  }
  .ff-brand strong{font-size:.92rem!important}
  .ff-brand-icon{width:34px!important;height:34px!important}
  .ff-back-btn{min-height:36px!important;padding:0 10px!important;font-size:.75rem!important}
  .ff-back-btn span{display:none!important}
  .ff-main{height:auto!important;padding:18px 14px 24px!important;overflow:visible!important}
  .ff-student-head{height:auto!important;margin-bottom:17px!important}
  .ff-name-row{gap:9px!important;flex-wrap:wrap!important}
  .ff-name-row h2{font-size:1.55rem!important}
  .ff-summary-grid{display:grid!important;grid-template-columns:1fr!important;height:auto!important;gap:12px!important}
  .ff-summary-grid>.ff-card{padding:15px!important;min-height:0!important}
  .ff-content{max-height:none!important;overflow:visible!important}
  .ff-schedule{height:auto!important;margin-top:12px!important;padding:14px!important}
  .ff-schedule-scroll{
    height:auto!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;padding-bottom:6px!important;
  }
  .ff-schedule .family-schedule-grid{min-width:720px!important}
}
@media(max-width:430px){
  .ff-main{padding-left:11px!important;padding-right:11px!important}
  .ff-summary-grid>.ff-card,.ff-schedule{border-radius:15px!important}
  .ff-course{font-size:.76rem!important;min-height:27px!important}
}

/* v5.0 — paleta de la maqueta aprobada */
.ff-summary-grid{
  height:198px!important;
  gap:17px!important;
}
.ff-summary-grid>.ff-card{padding:15px 17px!important}
.ff-tomorrow{
  border-top:4px solid #56b97a!important;
  background:linear-gradient(180deg,#ffffff,#fbfffc)!important;
}
.ff-upcoming{
  border-top:4px solid #8b68d9!important;
  background:linear-gradient(180deg,#ffffff,#fdfbff)!important;
}
.ff-exams{
  border-top:4px solid #ee7777!important;
  background:linear-gradient(180deg,#ffffff,#fffafa)!important;
}
.ff-tomorrow .ff-card-title h3{color:#2f8150!important}
.ff-upcoming .ff-card-title h3{color:#6749ad!important}
.ff-exams .ff-card-title h3{color:#c95151!important}
.ff-title-icon.sun{
  background:linear-gradient(145deg,#e8f8ee,#d9f2e2)!important;color:#37935a!important;
}
.ff-title-icon.calendar{
  background:linear-gradient(145deg,#f0eaff,#e6dcff)!important;color:#7651d8!important;
}
.ff-title-icon.exam{
  background:linear-gradient(145deg,#fff0f0,#ffe0e0)!important;color:#df4e4e!important;
}
.ff-content{max-height:130px!important}
.ff-summary-grid .family-task-item{border-left:4px solid #66bf83!important;background:#f8fdf9!important}
.ff-summary-grid .family-upcoming-item{border-left:4px solid #9a79df!important;background:#fbf9ff!important}
.ff-summary-grid .family-exam-item{border-left:4px solid #ef8585!important;background:#fff9f9!important}

.ff-schedule{
  height:calc(100% - 279px)!important;
  margin-top:14px!important;
  padding:15px 17px 17px!important;
}
.ff-schedule .ff-card-title h3{font-size:1.08rem!important}
.ff-schedule-scroll{height:calc(100% - 42px)!important}
.ff-schedule .family-schedule-grid{
  min-width:800px!important;
  gap:10px!important;
}
.ff-schedule .family-schedule-day{
  border:1px solid #e1e8f1!important;border-radius:13px!important;background:#fbfdff!important;
  overflow:hidden!important;
}
.ff-schedule .family-schedule-day>strong{
  display:block!important;padding:9px 8px!important;background:#f2f6fb!important;color:#3f5877!important;
  text-align:center!important;font-size:.77rem!important;
}
.ff-schedule .family-schedule-day>div{padding:7px!important}
.ff-schedule .ff-subject{
  display:block!important;margin:0 0 6px!important;padding:7px 8px!important;border-radius:8px!important;
  border:1px solid transparent!important;font-size:.73rem!important;line-height:1.2!important;
}
.ff-schedule .ff-subject b{display:block!important;margin-bottom:2px!important;font-size:.64rem!important;opacity:.72!important}
.ff-subject.tone-blue{background:#e9f2ff!important;border-color:#cfe1fb!important;color:#275f9e!important}
.ff-subject.tone-orange{background:#fff0df!important;border-color:#f7d9b6!important;color:#a66120!important}
.ff-subject.tone-green{background:#e8f7ee!important;border-color:#cbe9d6!important;color:#337d50!important}
.ff-subject.tone-purple{background:#f0eaff!important;border-color:#ded0fa!important;color:#694ba9!important}
.ff-subject.tone-teal{background:#e4f7f7!important;border-color:#c8e8e8!important;color:#2c7b7d!important}
.ff-subject.tone-pink{background:#fdebf2!important;border-color:#f4cedd!important;color:#a94e72!important}
.ff-subject.tone-amber{background:#fff6dc!important;border-color:#f2dfaa!important;color:#8f6b18!important}

@media(max-width:800px){
  .ff-summary-grid{height:auto!important}
  .ff-content{max-height:none!important}
  .ff-schedule{height:auto!important}
  .ff-schedule .family-schedule-grid{min-width:760px!important}
}

/* v5.1 — horario escolar real */
.ff-tomorrow{background:linear-gradient(145deg,#ffffff 15%,#f3fcf6)!important}
.ff-upcoming{background:linear-gradient(145deg,#ffffff 15%,#f7f3ff)!important}
.ff-exams{background:linear-gradient(145deg,#ffffff 15%,#fff4f4)!important}

.ff-schedule{
  padding:14px 17px 16px!important;
}
.ff-schedule-scroll{
  height:calc(100% - 42px)!important;
  overflow:auto!important;
  border:1px solid #e0e8f2!important;
  border-radius:13px!important;
  background:#fff!important;
}
.ff-schedule .family-schedule-grid{
  min-width:760px!important;
  margin:0!important;
  display:block!important;
}
.ff-timetable{
  display:grid!important;
  grid-template-columns:74px repeat(5,minmax(120px,1fr))!important;
  width:100%!important;
  min-width:760px!important;
  background:#fff!important;
}
.ff-time-head,.ff-day-head{
  position:sticky!important;top:0!important;z-index:4!important;
  min-height:39px!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-right:1px solid #e1e8f1!important;border-bottom:1px solid #dce5ef!important;
  background:#f1f5fa!important;color:#3c5575!important;font-size:.75rem!important;font-weight:900!important;
}
.ff-time-head{left:0!important;z-index:6!important}
.ff-time-cell{
  position:sticky!important;left:0!important;z-index:3!important;
  min-height:48px!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-right:1px solid #dce5ef!important;border-bottom:1px solid #e7edf4!important;
  background:#f8fafc!important;color:#647995!important;font-size:.7rem!important;font-weight:850!important;
}
.ff-class-cell{
  min-height:48px!important;padding:4px!important;box-sizing:border-box!important;
  display:flex!important;align-items:stretch!important;justify-content:center!important;
  border-right:1px solid #e7edf4!important;border-bottom:1px solid #e7edf4!important;
  background:#fff!important;
}
.ff-class-block{
  width:100%!important;min-height:38px!important;padding:5px 7px!important;box-sizing:border-box!important;
  border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;border:1px solid transparent!important;
  box-shadow:0 3px 7px rgba(42,76,118,.05)!important;
}
.ff-class-block strong{font-size:.68rem!important;line-height:1.12!important;font-weight:850!important}
.ff-empty-slot{margin:auto!important;color:#d0d9e5!important;font-size:.8rem!important}
.ff-class-block.tone-blue{background:#e9f2ff!important;border-color:#cfe1fb!important;color:#275f9e!important}
.ff-class-block.tone-orange{background:#fff0df!important;border-color:#f7d9b6!important;color:#a66120!important}
.ff-class-block.tone-green{background:#e8f7ee!important;border-color:#cbe9d6!important;color:#337d50!important}
.ff-class-block.tone-purple{background:#f0eaff!important;border-color:#ded0fa!important;color:#694ba9!important}
.ff-class-block.tone-teal{background:#e4f7f7!important;border-color:#c8e8e8!important;color:#2c7b7d!important}
.ff-class-block.tone-pink{background:#fdebf2!important;border-color:#f4cedd!important;color:#a94e72!important}
.ff-class-block.tone-amber{background:#fff6dc!important;border-color:#f2dfaa!important;color:#8f6b18!important}
.ff-schedule-empty{padding:35px!important;text-align:center!important;color:#7a8ca4!important}

/* En móvil lo dejamos funcional por ahora; el rediseño móvil se hará después */
@media(max-width:800px){
  .ff-schedule-scroll{overflow-x:auto!important}
  .ff-timetable{min-width:760px!important}
}

/* v5.2 — retoque final escritorio del horario familiar */
@media(min-width:801px){
  .ff-summary-grid{height:190px!important}
  .ff-content{max-height:122px!important}
  .ff-schedule{
    height:calc(100% - 271px)!important;
    margin-top:12px!important;
  }
  .ff-time-cell,.ff-class-cell{min-height:56px!important}
  .ff-class-block{
    min-height:46px!important;
    padding:7px 8px!important;
  }
  .ff-class-block strong{
    font-size:.72rem!important;
    line-height:1.16!important;
  }
}

/* v5.4 — portada móvil premium. SOLO móvil */
@media(max-width:800px){
  body:has(#welcomePanel.active){
    overflow:auto!important;
    background:#f3f8fe!important;
  }
  body:has(#welcomePanel.active) .panel{
    min-height:100svh!important;height:auto!important;padding:0!important;
    display:block!important;background:transparent!important;
  }
  body:has(#welcomePanel.active) #welcomePanel{width:100%!important}

  .main3d-page{
    min-height:100svh!important;height:auto!important;
    padding:22px 18px 24px!important;border:0!important;border-radius:0!important;
    background:
      radial-gradient(circle at 50% 0%,rgba(86,162,255,.16),transparent 28%),
      linear-gradient(180deg,#f9fcff,#eef6ff)!important;
    box-shadow:none!important;overflow:visible!important;
  }
  .main3d-header{height:auto!important;min-height:0!important;margin:0 0 14px!important}
  .main3d-brand{width:100%!important;text-align:center!important}
  .main3d-brand img{
    width:176px!important;height:74px!important;max-width:none!important;max-height:none!important;
    margin:auto!important;object-fit:cover!important;border-radius:18px!important;
    box-shadow:0 12px 28px rgba(29,100,198,.15)!important;
  }
  .main3d-header-note{display:none!important}

  .main3d-hero{margin:0 auto 22px!important;text-align:center!important}
  .main3d-badge{
    display:inline-flex!important;padding:5px 11px!important;font-size:.56rem!important;
    letter-spacing:.08em!important;border-radius:999px!important;
  }
  .main3d-hero h1{
    max-width:330px!important;margin:11px auto 8px!important;
    font-size:2.18rem!important;line-height:1.01!important;letter-spacing:-.045em!important;
  }
  .main3d-hero p{
    max-width:330px!important;margin:auto!important;font-size:.78rem!important;line-height:1.42!important;
  }

  .main3d-entry-grid{
    display:flex!important;flex-direction:column!important;gap:13px!important;margin:0!important;width:100%!important;
  }
  .main3d-card,.main3d-card.student-card{
    position:relative!important;display:grid!important;grid-template-columns:102px 1fr 34px!important;
    align-items:center!important;min-height:126px!important;height:auto!important;
    border-radius:22px!important;overflow:hidden!important;background:#fff!important;
    box-shadow:0 12px 30px rgba(35,76,126,.10)!important;
  }
  .main3d-card{border:1px solid #d9eedf!important}
  .main3d-card.student-card{border:1px solid #d5e7fb!important}

  .main3d-art{
    grid-column:1!important;grid-row:1!important;
    width:82px!important;height:82px!important;min-height:0!important;
    margin-left:14px!important;border-radius:19px!important;overflow:hidden!important;
    box-shadow:0 8px 18px rgba(39,85,143,.11)!important;
  }
  .main3d-art img{
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  .family-main-art img{object-position:center 43%!important}
  .student-main-art img{object-position:center 42%!important}

  .main3d-card-copy{
    grid-column:2 / 4!important;grid-row:1!important;
    min-height:0!important;padding:17px 48px 17px 9px!important;
    display:block!important;background:transparent!important;
  }
  .main3d-role{
    display:inline-flex!important;padding:4px 8px!important;border-radius:999px!important;
    font-size:.52rem!important;letter-spacing:.07em!important;
  }
  .main3d-card-copy>strong{
    display:block!important;margin:7px 0 4px!important;
    font-size:1.24rem!important;line-height:1.05!important;color:#102d59!important;
  }
  .main3d-card-copy>p{
    margin:0!important;font-size:.69rem!important;line-height:1.35!important;color:#6c7e95!important;
  }

  /* El botón cubre la tarjeta y se muestra como flecha: toda la tarjeta sigue siendo pulsable */
  .main3d-button{
    position:absolute!important;inset:0!important;z-index:5!important;
    margin:0!important;padding:0!important;border-radius:22px!important;
    background:transparent!important;color:transparent!important;box-shadow:none!important;
    font-size:0!important;
  }
  .main3d-button b{
    position:absolute!important;right:15px!important;top:50%!important;transform:translateY(-50%)!important;
    width:34px!important;height:34px!important;border-radius:11px!important;
    display:grid!important;place-items:center!important;float:none!important;
    font-size:1.15rem!important;color:#fff!important;
    box-shadow:0 7px 15px rgba(28,91,181,.16)!important;
  }
  .main3d-card:not(.student-card) .main3d-button b{background:#38ad5a!important}
  .main3d-card.student-card .main3d-button b{background:#1787ee!important}

  .main3d-benefits{display:none!important}

  .main3d-entry-grid:after{
    content:"✓  Acceso privado · Tu información protegida";
    display:block!important;margin:5px auto 0!important;padding:8px 12px!important;
    color:#71849b!important;font-size:.64rem!important;font-weight:700!important;text-align:center!important;
  }
}
@media(max-width:390px){
  .main3d-page{padding-left:14px!important;padding-right:14px!important}
  .main3d-hero h1{font-size:1.96rem!important}
  .main3d-card,.main3d-card.student-card{grid-template-columns:94px 1fr 32px!important}
  .main3d-art{width:76px!important;height:76px!important;margin-left:11px!important}
  .main3d-card-copy{padding-right:43px!important}
}

/* v5.5 — respiración vertical final de la portada móvil */
@media(max-width:800px){
  .main3d-header{margin-bottom:22px!important}
  .main3d-hero{margin-bottom:30px!important}
  .main3d-entry-grid{gap:18px!important}
  .main3d-entry-grid:after{margin-top:16px!important}
}

/* v5.6 — mostrar/ocultar contraseña */
.password-eye-wrap{
  position:relative!important;
  width:100%!important;
}
.password-eye-wrap>input{
  width:100%!important;
  padding-right:58px!important;
  box-sizing:border-box!important;
}
.password-eye-btn{
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:40px!important;
  height:40px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  padding:0!important;
  color:#647995!important;
  box-shadow:none!important;
  z-index:3!important;
}
.password-eye-btn:hover{background:#f2f6fb!important}
.password-eye-btn .eye-open{
  font-size:1.15rem!important;
  line-height:1!important;
  filter:grayscale(1)!important;
  opacity:.72!important;
}
.password-eye-btn.is-visible .eye-open{opacity:1!important}


/* ==========================================================
   v5.7 — PANEL FAMILIAR MÓVIL REAL
   Solo <=800px. No altera escritorio.
   ========================================================== */
@media(max-width:800px){
  #familyDashboardPanel{
    overflow:auto!important;
    background:#f2f7fd!important;
  }
  #familyDashboardPanel .fd-header{
    width:calc(100% - 24px)!important;
    height:74px!important;
    margin:12px auto 0!important;
    padding:0 14px!important;
    border-radius:20px 20px 0 0!important;
    box-sizing:border-box!important;
  }
  #familyDashboardPanel .fd-brand{gap:8px!important;font-size:1rem!important}
  #familyDashboardPanel .fd-logo3d{
    width:38px!important;height:38px!important;min-width:38px!important;
    border-radius:11px!important;font-size:1rem!important;
  }
  #familyDashboardPanel .fd-logout{
    height:44px!important;min-width:108px!important;padding:0 10px!important;
    border-radius:12px!important;font-size:.72rem!important;line-height:1.1!important;
  }
  #familyDashboardPanel .fd-main{
    width:calc(100% - 24px)!important;
    min-height:calc(100svh - 98px)!important;
    margin:0 auto 18px!important;padding:19px 15px 24px!important;
    box-sizing:border-box!important;border-radius:0 0 22px 22px!important;
    background:#fff!important;
  }
  #familyDashboardPanel .fd-welcome h2{font-size:1.55rem!important}
  #familyDashboardPanel .fd-welcome p{font-size:.78rem!important}
  #familyDashboardPanel .fd-divider{margin:13px 0 14px!important}
  #familyDashboardPanel .fd-title h3{font-size:1.25rem!important}
  #familyDashboardPanel .fd-title p{font-size:.75rem!important;line-height:1.35!important}
  #familyDashboardPanel .fd-grid{
    grid-template-columns:1fr!important;gap:12px!important;margin-top:14px!important;
  }

  #familyDashboardPanel .fd-student-card{
    min-height:0!important;height:auto!important;padding:15px!important;
    border-radius:19px!important;display:block!important;
  }
  #familyDashboardPanel .fd-student-top{
    display:grid!important;grid-template-columns:78px 1fr!important;
    gap:12px!important;align-items:center!important;min-height:88px!important;
  }

  /* Nueva mochila CSS: asa centrada, cuerpo y bolsillo proporcionados */
  #familyDashboardPanel .fd-backpack{
    position:relative!important;width:72px!important;height:78px!important;flex:0 0 72px!important;
    margin:7px 0 0 2px!important;border-radius:19px 19px 17px 17px!important;
    background:linear-gradient(145deg,#58aaff,#176ce8)!important;
    box-shadow:0 10px 20px rgba(25,103,219,.18)!important;
    overflow:visible!important;
  }
  #familyDashboardPanel .fd-backpack:before{
    content:""!important;position:absolute!important;
    width:34px!important;height:24px!important;left:50%!important;top:-15px!important;
    transform:translateX(-50%)!important;
    border:7px solid #235b9d!important;border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    box-sizing:border-box!important;
  }
  #familyDashboardPanel .fd-backpack:after{
    content:""!important;position:absolute!important;
    width:43px!important;height:29px!important;left:50%!important;bottom:9px!important;
    transform:translateX(-50%)!important;
    border-radius:10px 10px 13px 13px!important;
    background:linear-gradient(180deg,#3288f1,#2475df)!important;
    border:1px solid rgba(12,83,177,.18)!important;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.12)!important;
  }
  #familyDashboardPanel .fd-backpack span{
    display:block!important;position:absolute!important;z-index:2!important;
    width:8px!important;height:45px!important;left:-5px!important;top:18px!important;
    border-radius:8px!important;background:#2366b7!important;
    box-shadow:74px 0 0 #2366b7!important;
  }

  #familyDashboardPanel .fd-student-card .student-meta{
    min-width:0!important;gap:6px!important;padding-right:34px!important;
  }
  #familyDashboardPanel .fd-student-card .student-meta>strong{
    max-width:100%!important;font-size:1.35rem!important;line-height:1.05!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  #familyDashboardPanel .fd-course,
  #familyDashboardPanel .fd-status{
    padding:5px 9px!important;border-radius:9px!important;font-size:.67rem!important;
  }
  #familyDashboardPanel .fd-more-btn{
    top:12px!important;right:12px!important;width:34px!important;height:34px!important;
    border-radius:10px!important;
  }
  #familyDashboardPanel .fd-student-card .student-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
    width:100%!important;margin-top:14px!important;padding-top:12px!important;
    border-top:1px solid #e3eaf3!important;
  }
  #familyDashboardPanel .fd-student-card .student-actions button{
    width:100%!important;min-width:0!important;height:47px!important;
    padding:7px 6px!important;margin:0!important;border-radius:12px!important;
    font-size:.68rem!important;line-height:1.08!important;white-space:normal!important;
    overflow:hidden!important;
  }

  #familyDashboardPanel .fd-add-card{
    min-height:0!important;height:auto!important;padding:17px 14px!important;
    border-radius:18px!important;
  }
  #familyDashboardPanel .fd-add-icon{
    width:54px!important;height:50px!important;margin-bottom:3px!important;
    transform:scale(.78)!important;transform-origin:center!important;
  }
  #familyDashboardPanel .fd-add-card h3{font-size:1.08rem!important;margin:3px 0 4px!important}
  #familyDashboardPanel .fd-add-card p{
    max-width:290px!important;margin:0 0 11px!important;font-size:.7rem!important;line-height:1.35!important;
  }
  #familyDashboardPanel .fd-add-btn{
    width:100%!important;max-width:280px!important;height:43px!important;border-radius:12px!important;
    font-size:.76rem!important;
  }
  #familyDashboardPanel .fd-note{
    min-height:0!important;height:auto!important;margin-top:12px!important;padding:11px 12px!important;
  }
  #familyDashboardPanel .fd-note p{font-size:.72rem!important}
  #familyDashboardPanel .fd-shield{width:31px!important;height:31px!important;min-width:31px!important}
}

/* v5.8 — mochila aprobada también en escritorio */
@media(min-width:801px){
  #familyDashboardPanel .fd-backpack{
    position:relative!important;
    width:150px!important;
    height:165px!important;
    flex:0 0 150px!important;
    margin-top:20px!important;
    border-radius:38px 38px 34px 34px!important;
    background:linear-gradient(145deg,#58aaff,#176ce8)!important;
    box-shadow:0 18px 35px rgba(25,103,219,.18)!important;
    overflow:visible!important;
  }
  #familyDashboardPanel .fd-backpack:before{
    content:""!important;
    position:absolute!important;
    width:68px!important;
    height:47px!important;
    left:50%!important;
    top:-30px!important;
    transform:translateX(-50%)!important;
    border:14px solid #235b9d!important;
    border-bottom:0!important;
    border-radius:34px 34px 0 0!important;
    box-sizing:border-box!important;
  }
  #familyDashboardPanel .fd-backpack:after{
    content:""!important;
    position:absolute!important;
    width:88px!important;
    height:58px!important;
    left:50%!important;
    bottom:19px!important;
    transform:translateX(-50%)!important;
    border-radius:20px 20px 26px 26px!important;
    background:linear-gradient(180deg,#3288f1,#2475df)!important;
    border:1px solid rgba(12,83,177,.18)!important;
    box-shadow:inset 0 3px 7px rgba(255,255,255,.12)!important;
  }
  #familyDashboardPanel .fd-backpack span{
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    width:15px!important;
    height:91px!important;
    left:-10px!important;
    top:39px!important;
    border-radius:14px!important;
    background:#2366b7!important;
    box-shadow:155px 0 0 #2366b7!important;
  }
}


/* v6.0 — seguimiento familiar móvil: cabecera compacta + horario navegable */
.ff-schedule-mobile-nav,
.ff-schedule-swipe-hint{display:none!important}

@media(max-width:800px){
  /* Cabecera más fina: conserva logo y volver, pero deja más pantalla al contenido */
  .ff-topbar{
    height:50px!important;
    min-height:50px!important;
    padding:0 12px!important;
  }
  .ff-brand{gap:8px!important}
  .ff-brand-icon{
    width:30px!important;
    height:30px!important;
    border-radius:9px!important;
  }
  .ff-brand strong{
    font-size:.86rem!important;
    white-space:nowrap!important;
  }
  .ff-back-btn{
    width:40px!important;
    min-width:40px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    font-size:.9rem!important;
  }
  .ff-main{padding-top:14px!important}

  /* Navegación visible: deja claro que hay más días */
  .ff-schedule-mobile-nav{
    display:grid!important;
    grid-template-columns:38px 1fr 38px!important;
    align-items:center!important;
    gap:8px!important;
    margin:2px 0 4px!important;
  }
  .ff-schedule-mobile-nav strong{
    text-align:center!important;
    color:#294d7c!important;
    font-size:.82rem!important;
    font-weight:900!important;
  }
  .ff-schedule-arrow{
    width:38px!important;
    height:34px!important;
    border:1px solid #cfe0f5!important;
    border-radius:10px!important;
    background:#f7fbff!important;
    color:#1764e5!important;
    font-size:1.25rem!important;
    font-weight:900!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .ff-schedule-arrow:disabled{
    opacity:.35!important;
    cursor:default!important;
  }
  .ff-schedule-swipe-hint{
    display:block!important;
    margin:0 0 8px!important;
    text-align:center!important;
    color:#7a8ca4!important;
    font-size:.68rem!important;
    font-weight:750!important;
  }

  .ff-schedule-scroll{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-behavior:smooth!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .ff-timetable{
    grid-template-columns:74px repeat(5,calc((100vw - 74px - 54px)/2))!important;
    min-width:max-content!important;
    width:max-content!important;
  }
  .ff-day-head,
  .ff-class-cell{
    scroll-snap-align:start!important;
  }
}

/* v6.1 — CORRECCIÓN horario móvil: dos días completos y desplazamiento correcto */
@media(max-width:800px){
  .ff-schedule-scroll{
    position:relative!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:none!important;
    scrollbar-width:none!important;
  }
  .ff-schedule-scroll::-webkit-scrollbar{display:none!important}

  .ff-timetable{
    /* 74px para horas + 2 días visibles completos */
    --ff-time-col:74px;
    --ff-day-col:calc((100vw - 40px - var(--ff-time-col))/2);
    grid-template-columns:var(--ff-time-col) repeat(5,var(--ff-day-col))!important;
    min-width:calc(var(--ff-time-col) + (5 * var(--ff-day-col)))!important;
    width:calc(var(--ff-time-col) + (5 * var(--ff-day-col)))!important;
  }

  .ff-time-head,
  .ff-time-cell{
    position:sticky!important;
    left:0!important;
    z-index:8!important;
  }
  .ff-time-head{
    background:#f1f5fa!important;
  }
  .ff-time-cell{
    background:#f8fafc!important;
  }

  .ff-day-head,
  .ff-class-cell{
    min-width:var(--ff-day-col)!important;
    width:var(--ff-day-col)!important;
    box-sizing:border-box!important;
  }

  /* Evita que el encabezado se vea cortado por restos de scroll previo */
  .ff-day-head{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* v6.2 — Panel familiar escritorio corregido; móvil intacto */
@media(min-width:801px){
  #familyDashboardPanel .fd-grid{
    align-items:start!important;
  }

  /* Si existen varios estudiantes, se desplazan dentro de su columna
     y no empujan ni rompen el resto del dashboard. */
  #familyDashboardPanel .fd-students{
    height:258px!important;
    max-height:258px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 5px 0 0!important;
    box-sizing:border-box!important;
    scrollbar-width:thin!important;
    scrollbar-color:#cbd9ea transparent!important;
  }
  #familyDashboardPanel .fd-students::-webkit-scrollbar{width:6px!important}
  #familyDashboardPanel .fd-students::-webkit-scrollbar-thumb{
    background:#cbd9ea!important;
    border-radius:999px!important;
  }

  #familyDashboardPanel .fd-student-card{
    height:258px!important;
    min-height:258px!important;
    padding:22px 24px!important;
    margin:0 0 12px!important;
    overflow:visible!important;
  }

  /* Misma mochila aprobada, pero proporcionada a la tarjeta de escritorio. */
  #familyDashboardPanel .fd-backpack{
    width:112px!important;
    height:123px!important;
    flex:0 0 112px!important;
    margin:12px 0 0 7px!important;
    border-radius:29px 29px 25px 25px!important;
  }
  #familyDashboardPanel .fd-backpack:before{
    width:51px!important;
    height:35px!important;
    top:-22px!important;
    border-width:10px!important;
  }
  #familyDashboardPanel .fd-backpack:after{
    width:66px!important;
    height:43px!important;
    bottom:14px!important;
    border-radius:15px 15px 19px 19px!important;
  }
  #familyDashboardPanel .fd-backpack span{
    width:11px!important;
    height:68px!important;
    left:-7px!important;
    top:29px!important;
    border-radius:10px!important;
    box-shadow:115px 0 0 #2366b7!important;
  }

  #familyDashboardPanel .fd-student-top{
    min-height:145px!important;
    gap:22px!important;
  }
  #familyDashboardPanel .fd-student-card .student-meta>strong{
    font-size:1.65rem!important;
  }
  #familyDashboardPanel .fd-student-card .student-actions{
    padding-top:12px!important;
    gap:11px!important;
  }
  #familyDashboardPanel .fd-student-card .student-actions button{
    height:44px!important;
    font-size:.78rem!important;
  }

  #familyDashboardPanel .fd-add-card{
    height:258px!important;
    min-height:258px!important;
  }

  #familyDashboardPanel .fd-note{
    margin-top:13px!important;
  }
}

/* v6.3 — nuevo estudiante visible también en escritorio */
@media(min-width:801px){
  #familyDashboardPanel .fd-students{
    scrollbar-width:auto!important;
    scrollbar-color:#8fb5e7 #eef4fb!important;
    padding-right:10px!important;
  }
  #familyDashboardPanel .fd-students::-webkit-scrollbar{
    width:10px!important;
  }
  #familyDashboardPanel .fd-students::-webkit-scrollbar-track{
    background:#eef4fb!important;
    border-radius:999px!important;
  }
  #familyDashboardPanel .fd-students::-webkit-scrollbar-thumb{
    background:#8fb5e7!important;
    border-radius:999px!important;
    border:2px solid #eef4fb!important;
  }

  /* Cuando hay más de un estudiante, una pequeña pista visual */
  #familyDashboardPanel .fd-students:has(.fd-student-card:nth-child(2)){
    border-bottom:2px solid #dfeaf7!important;
  }
}

/* v6.4 — acceso estudiante: compactación SOLO móvil */
@media (max-width:800px){
  body:has(#studentPanel.active) .panel{padding:12px!important;align-items:flex-start!important}
  body:has(#studentPanel.active) #studentPanel{margin:0!important}
  .student-access-shell{border-radius:24px!important;overflow:hidden!important}
  .student-reference-visual{min-height:390px!important;height:390px!important}
  .student-reference-visual img{object-position:center 50%!important}
  .student-access-form{
    padding:26px 22px 30px!important;
    justify-content:flex-start!important;
  }
  .student-access-form .back-btn{
    top:18px!important;right:20px!important;
    padding:8px 13px!important;font-size:.92rem!important;
  }
  .css-lock-3d{
    width:128px!important;height:104px!important;
    transform:scale(.68)!important;
    transform-origin:center top!important;
    margin:6px auto -27px!important;
  }
  .student-access-form h2{
    margin:4px 0 7px!important;
    font-size:1.9rem!important;line-height:1.08!important;
  }
  .student-access-form>p{
    font-size:1rem!important;line-height:1.42!important;
    max-width:330px!important;
  }
  .student-access-form .form{margin:16px auto 0!important}
  .student-access-form input{height:56px!important}
  .student-access-form .primary-btn{min-height:56px!important;margin-top:10px!important}
}

/* v6.5 — móvil: imagen completa (sin crop) + candado sin solapar textos */
@media (max-width:800px){
  .student-reference-visual{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:845 / 1024!important;
    background:#0878ef!important;
  }
  .student-reference-visual img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  .student-access-form{
    padding:24px 22px 30px!important;
  }
  .css-lock-3d{
    width:128px!important;
    height:104px!important;
    transform:scale(.62)!important;
    transform-origin:center top!important;
    margin:12px auto -25px!important;
  }
  .student-access-form h2{
    margin:12px 0 7px!important;
  }
}

/* v6.6 — corrección definitiva acceso estudiante móvil */
@media (max-width:800px){
  body:has(#studentPanel.active) .panel{padding:12px!important;align-items:flex-start!important}
  body:has(#studentPanel.active) #studentPanel{margin:0!important;padding:0!important}
  .student-access-shell{display:block!important;min-height:0!important;overflow:hidden!important;border-radius:24px!important}

  /* La imagen conserva su proporción real: nunca se recorta */
  .student-reference-visual{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:#0878ef!important;
  }
  .student-reference-visual img{
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .student-access-form{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    padding:18px 22px 30px!important;
  }
  .student-access-form .back-btn{
    top:18px!important;right:20px!important;
    padding:8px 13px!important;font-size:.92rem!important;
  }
  /* El candado ocupa espacio real y no invade el texto */
  .css-lock-3d{
    flex:0 0 auto!important;
    width:190px!important;
    height:150px!important;
    transform:scale(.52)!important;
    transform-origin:center top!important;
    margin:24px auto -58px!important;
  }
  .student-access-form .eyebrow{
    position:relative!important;
    z-index:5!important;
    display:block!important;
    margin:0 auto 8px!important;
    text-align:center!important;
  }
  .student-access-form h2{
    position:relative!important;
    z-index:5!important;
    margin:0 0 7px!important;
    font-size:1.9rem!important;
    line-height:1.08!important;
  }
  .student-access-form>p{font-size:1rem!important;line-height:1.42!important;max-width:330px!important}
  .student-access-form label{margin-top:14px!important}
  .student-access-form input{height:56px!important}
  .student-access-form .primary-btn{min-height:56px!important;margin-top:10px!important}
}

/* v6.7 — acceso estudiante móvil: apertura desde arriba + candado sin solape */
@media(max-width:800px){
  .student-access-form{
    padding:18px 22px 30px!important;
  }

  .css-lock-3d{
    position:relative!important;
    flex:0 0 auto!important;
    width:92px!important;
    height:82px!important;
    transform:none!important;
    transform-origin:center!important;
    margin:10px auto 8px!important;
  }

  .student-access-form .eyebrow{
    margin:0 auto 8px!important;
  }

  .student-access-form h2{
    margin:0 0 8px!important;
  }

  /* La imagen queda en flujo normal a su proporción original. */
  .student-reference-visual{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .student-reference-visual img{
    display:block!important;
    position:static!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
}

/* v6.8 — acceso estudiante móvil: composición estable y sin solapes */
@media (max-width:800px){
  body:has(#studentPanel.active){overflow-x:hidden!important;}
  body:has(#studentPanel.active) .panel{padding:12px!important;align-items:flex-start!important;}
  body:has(#studentPanel.active) #studentPanel{width:100%!important;margin:0!important;padding:0!important;}
  .student-access-shell{display:block!important;width:100%!important;overflow:hidden!important;border-radius:24px!important;}

  .student-reference-visual{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;background:#0878ef!important;}
  .student-reference-visual img{display:block!important;position:static!important;width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important;object-position:center!important;}

  .student-access-form{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:22px 22px 30px!important;}
  .student-access-form .back-btn{position:absolute!important;top:22px!important;right:20px!important;z-index:10!important;}

  /* El dibujo original mide 190x150. Se escala visualmente, pero reservamos
     exactamente su altura visible para que nunca tape el texto. */
  .css-lock-3d{position:relative!important;width:190px!important;height:88px!important;transform:scale(.56)!important;transform-origin:center top!important;margin:10px auto 16px!important;flex:0 0 88px!important;}

  .student-access-form .eyebrow{position:relative!important;z-index:2!important;margin:0 auto 8px!important;text-align:center!important;}
  .student-access-form h2{position:relative!important;z-index:2!important;margin:0 0 10px!important;text-align:center!important;font-size:1.9rem!important;line-height:1.08!important;}
  .student-access-form>p{position:relative!important;z-index:2!important;margin:0 auto 16px!important;max-width:340px!important;text-align:center!important;font-size:1rem!important;line-height:1.45!important;}
  .student-access-form label{margin-top:8px!important;}
  .student-access-form input{height:56px!important;}
  .student-access-form .primary-btn{min-height:56px!important;margin-top:10px!important;}
}

/* v6.9 — horas exactas y exámenes no completables desde Próximos */
.class-row input[type="time"]{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  height:44px!important;
  border:1px solid #d7e2ef!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#17365f!important;
  padding:0 10px!important;
  font:inherit!important;
  font-weight:750!important;
}
.class-row input[type="time"]:focus{
  outline:none!important;
  border-color:#5598ee!important;
  box-shadow:0 0 0 3px rgba(56,132,232,.12)!important;
}
.item-exam-open{
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:11px!important;
  background:#eef4ff!important;
  color:#2866cf!important;
  font-size:1.35rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.item-exam-open:hover{background:#e2edff!important}

/* v7.0 — horario robusto en intervalos de 5 minutos */
.class-row .row-start,
.class-row .row-end{
  min-width:108px!important;
  height:44px!important;
  border:1px solid #d7e2ef!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#17365f!important;
  padding:0 9px!important;
  font:inherit!important;
  font-weight:750!important;
}
.class-row .row-start:focus,
.class-row .row-end:focus{
  outline:none!important;
  border-color:#5598ee!important;
  box-shadow:0 0 0 3px rgba(56,132,232,.12)!important;
}

/* v7.2 — acceso cotidiano del estudiante mediante PIN */
.student-pin-panel{
  min-height:100vh;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
}
.student-pin-panel.active{display:flex}
.student-pin-card{
  width:min(460px,100%);
  background:#fff;
  border:1px solid #dce8f5;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(39,88,145,.12);
  padding:34px;
  text-align:center;
}
.student-pin-card h2{margin:5px 0 8px;color:#17365f;font-size:2rem}
.student-pin-card>p:not(.eyebrow){color:#6c7f96;line-height:1.5}
.student-pin-inputs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:27px 0 24px;
}
.student-pin-digit{
  width:58px!important;
  height:66px!important;
  padding:0!important;
  text-align:center!important;
  border:1.5px solid #cddded!important;
  border-radius:15px!important;
  font-size:1.8rem!important;
  font-weight:900!important;
  color:#17365f!important;
  background:#fbfdff!important;
}
.student-pin-digit:focus{
  outline:none!important;border-color:#4188e5!important;
  box-shadow:0 0 0 4px rgba(65,136,229,.12)!important;
}
.student-pin-card .primary-btn{width:100%}
.student-pin-recovery{
  margin-top:12px!important;
  width:100%;
  justify-content:center;
}
.student-pin-help{font-size:.78rem!important;margin:14px 0 0!important}
@media(max-width:600px){
  .student-pin-panel{padding:18px 14px}
  .student-pin-card{padding:28px 18px;border-radius:20px}
  .student-pin-card h2{font-size:1.65rem}
  .student-pin-inputs{gap:9px}
  .student-pin-digit{width:52px!important;height:60px!important;font-size:1.6rem!important}
}

/* v7.4 — refinamiento visual de la pantalla PIN (sin cambios de lógica) */
.student-pin-panel{
  padding:42px 6vw;
  background:
    radial-gradient(circle at 75% 22%, rgba(65,136,229,.10), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#edf5ff 100%);
}
.student-pin-card{
  position:relative;
  width:min(540px,100%);
  padding:42px 48px 34px;
  border:1px solid #d9e6f3;
  border-radius:30px;
  box-shadow:0 24px 70px rgba(35,76,126,.14);
}
.student-pin-icon{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(145deg,#16c7e9 0%,#1778f2 52%,#6739ed 100%);
  box-shadow:0 12px 28px rgba(34,111,220,.22);
  transform:rotate(-4deg);
}
.student-pin-shield{
  width:38px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px 12px 16px 16px;
  background:#fff;
  color:#187be9;
  font-size:25px;
  font-weight:900;
  line-height:1;
  transform:rotate(4deg);
}
.student-pin-card .eyebrow{
  margin:0 0 8px;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:900;
  color:#6f8095;
}
.student-pin-card h2{
  margin:0 0 12px;
  font-size:2.25rem;
  line-height:1.1;
  letter-spacing:-.035em;
}
.student-pin-lead{
  max-width:410px;
  margin:0 auto!important;
  font-size:1rem!important;
  line-height:1.55!important;
}
.student-pin-inputs{
  gap:14px;
  margin:30px 0 26px;
}
.student-pin-digit{
  width:66px!important;
  height:72px!important;
  border-radius:18px!important;
  border:1.5px solid #cadced!important;
  background:#f9fcff!important;
  font-size:2rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.student-pin-card .primary-btn{
  min-height:58px;
  border-radius:15px;
  font-size:1rem;
  box-shadow:0 10px 24px rgba(65,76,220,.18);
}
.student-pin-recovery{
  min-height:50px;
  border-radius:14px!important;
}
.student-pin-help{
  max-width:390px;
  margin:16px auto 0!important;
  color:#8191a5!important;
  line-height:1.45!important;
}
@media (min-width:901px){
  .student-pin-panel{
    justify-content:center;
    padding-left:calc(6vw + 10px);
  }
}
@media(max-width:600px){
  .student-pin-panel{padding:24px 14px}
  .student-pin-card{
    width:100%;
    padding:30px 18px 26px;
    border-radius:24px;
  }
  .student-pin-icon{
    width:62px;height:62px;border-radius:19px;margin-bottom:16px;
  }
  .student-pin-shield{width:33px;height:37px;font-size:21px}
  .student-pin-card h2{font-size:1.85rem}
  .student-pin-lead{font-size:.94rem!important}
  .student-pin-inputs{gap:9px;margin:25px 0 23px}
  .student-pin-digit{
    width:55px!important;height:62px!important;
    border-radius:15px!important;font-size:1.7rem!important;
  }
}

/* v7.7 — PIN escritorio alineado con Student Planner. MÓVIL pendiente */
@media(min-width:901px){
  /* En esta pantalla no usamos la antigua columna oscura global */
  body:has(#studentPinPanel.active) .new-hero{
    display:none!important;
  }
  body:has(#studentPinPanel.active) .shell{
    max-width:none!important;
    width:100%!important;
    min-height:100vh!important;
    background:
      radial-gradient(circle at 15% 12%,rgba(26,151,255,.16),transparent 26%),
      radial-gradient(circle at 88% 88%,rgba(104,55,238,.10),transparent 30%),
      linear-gradient(180deg,#f8fbff,#edf5ff)!important;
  }
  body:has(#studentPinPanel.active) .panel{
    width:100%!important;
    flex:1 1 100%!important;
    padding:34px 42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
  }

  #studentPinPanel.student-pin-panel{
    width:min(1180px,100%)!important;
    min-height:690px!important;
    height:auto!important;
    padding:0!important;
    margin:0 auto!important;
    display:none!important;
    grid-template-columns:46% 54%!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
    border:1px solid #d8e6f5!important;
    border-radius:34px!important;
    background:#fff!important;
    box-shadow:0 28px 80px rgba(29,74,129,.15)!important;
  }
  #studentPinPanel.student-pin-panel.active{
    display:grid!important;
  }

  .student-pin-visual{
    position:relative!important;
    min-width:0!important;
    padding:38px 38px 34px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 16% 12%,rgba(80,210,255,.30),transparent 25%),
      radial-gradient(circle at 88% 88%,rgba(96,43,235,.42),transparent 32%),
      linear-gradient(145deg,#0878ee 0%,#1168e8 48%,#4d35e8 100%)!important;
  }
  .student-pin-visual:after{
    content:""!important;
    position:absolute!important;
    width:310px!important;
    height:310px!important;
    right:-110px!important;
    bottom:-115px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
  }
  .student-pin-brand-logo{
    width:205px!important;
    height:86px!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:19px!important;
    box-shadow:0 12px 26px rgba(0,32,91,.16)!important;
  }
  .student-pin-visual-copy{
    position:relative!important;
    z-index:2!important;
    margin:34px 0 22px!important;
    color:#fff!important;
  }
  .student-pin-visual-copy>span{
    display:inline-flex!important;
    padding:7px 11px!important;
    border:1px solid rgba(255,255,255,.26)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:.68rem!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
  }
  .student-pin-visual-copy h3{
    margin:15px 0 12px!important;
    color:#fff!important;
    font-size:2.55rem!important;
    line-height:1.03!important;
    letter-spacing:-.045em!important;
  }
  .student-pin-visual-copy h3 b{
    color:#bce8ff!important;
    font-weight:900!important;
  }
  .student-pin-visual-copy p{
    max-width:390px!important;
    margin:0!important;
    color:rgba(255,255,255,.84)!important;
    font-size:.96rem!important;
    line-height:1.5!important;
  }
  .student-pin-visual-art{
    position:relative!important;
    z-index:1!important;
    margin-top:auto!important;
    width:100%!important;
    height:245px!important;
    overflow:hidden!important;
    border-radius:25px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    box-shadow:0 18px 34px rgba(0,38,104,.20)!important;
  }
  .student-pin-visual-art img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 42%!important;
  }

  #studentPinPanel .student-pin-card{
    align-self:center!important;
    width:min(520px,calc(100% - 76px))!important;
    box-sizing:border-box!important;
    margin:auto!important;
    padding:42px 46px 36px!important;
    text-align:center!important;
    border:0!important;
    border-radius:27px!important;
    background:
      linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
    box-shadow:0 16px 45px rgba(31,76,130,.10)!important;
  }
  #studentPinPanel .student-pin-icon{
    width:68px!important;
    height:68px!important;
    margin:0 auto 18px!important;
    border-radius:20px!important;
    transform:none!important;
    background:linear-gradient(145deg,#19c8ed,#177ef2 52%,#6338ed)!important;
    box-shadow:0 12px 28px rgba(31,111,222,.20)!important;
  }
  #studentPinPanel .student-pin-shield{
    transform:none!important;
  }
  #studentPinPanel .eyebrow{
    margin:0 0 8px!important;
    color:#4382d7!important;
    font-size:.7rem!important;
    letter-spacing:.14em!important;
  }
  #studentPinPanel .student-pin-card h2{
    margin:0 0 10px!important;
    color:#102e5b!important;
    font-size:2.18rem!important;
    letter-spacing:-.04em!important;
  }
  #studentPinPanel .student-pin-lead,
  #studentPinPanel #studentPinText{
    max-width:390px!important;
    margin:0 auto!important;
    color:#71839b!important;
    font-size:.92rem!important;
    line-height:1.48!important;
  }
  #studentPinPanel .student-pin-inputs{
    gap:12px!important;
    margin:27px 0 24px!important;
  }
  #studentPinPanel .student-pin-digit{
    width:64px!important;
    height:68px!important;
    border-radius:17px!important;
    border:1.5px solid #c9daed!important;
    background:#f8fbff!important;
    color:#10305d!important;
    font-size:1.9rem!important;
    box-shadow:none!important;
  }
  #studentPinPanel .student-pin-digit:focus{
    border-color:#2084f3!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(32,132,243,.11)!important;
  }
  #studentPinPanel .primary-btn{
    min-height:56px!important;
    border-radius:15px!important;
    background:linear-gradient(100deg,#11bee7,#0d84f5 54%,#6237ee)!important;
    box-shadow:0 11px 26px rgba(32,106,222,.18)!important;
  }
  #studentPinPanel .student-pin-recovery{
    min-height:48px!important;
    margin-top:10px!important;
    border:1px solid #dce6f5!important;
    background:#f3f7ff!important;
    color:#3f65ce!important;
  }
  #studentPinPanel .student-pin-help{
    margin:14px auto 0!important;
    color:#8a99ac!important;
    font-size:.72rem!important;
  }
}
\n/* v7.8 — PIN escritorio limpio: sin la columna oscura antigua */\n@media(min-width:901px){\n  html.pin-screen-mode body,\n  body.pin-screen-mode{\n    background:linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%)!important;\n  }\n  html.pin-screen-mode .shell,\n  body.pin-screen-mode .shell{\n    display:block!important;\n    width:100%!important;\n    max-width:none!important;\n    min-height:100vh!important;\n    margin:0!important;\n    background:transparent!important;\n  }\n  html.pin-screen-mode .new-hero,\n  body.pin-screen-mode .new-hero{display:none!important;}\n  html.pin-screen-mode .panel,\n  body.pin-screen-mode .panel{\n    width:100%!important;max-width:none!important;min-height:100vh!important;\n    padding:34px 42px!important;margin:0!important;display:flex!important;\n    align-items:center!important;justify-content:center!important;box-sizing:border-box!important;\n    background:radial-gradient(circle at 12% 10%,rgba(44,151,255,.14),transparent 25%),\n               radial-gradient(circle at 90% 88%,rgba(101,55,238,.10),transparent 28%),\n               linear-gradient(180deg,#f8fbff,#edf5ff)!important;\n  }\n  html.pin-screen-mode #studentPinPanel,\n  body.pin-screen-mode #studentPinPanel{\n    width:min(1080px,100%)!important;min-height:650px!important;margin:0 auto!important;\n    grid-template-columns:48% 52%!important;border-radius:32px!important;overflow:hidden!important;\n    box-shadow:0 26px 72px rgba(31,75,126,.15)!important;\n  }\n  html.pin-screen-mode #studentPinPanel .student-pin-visual,\n  body.pin-screen-mode #studentPinPanel .student-pin-visual{padding:34px 34px 30px!important;}\n  html.pin-screen-mode #studentPinPanel .student-pin-brand-logo,\n  body.pin-screen-mode #studentPinPanel .student-pin-brand-logo{width:190px!important;height:80px!important;}\n  html.pin-screen-mode #studentPinPanel .student-pin-visual-copy,\n  body.pin-screen-mode #studentPinPanel .student-pin-visual-copy{margin:28px 0 18px!important;}\n  html.pin-screen-mode #studentPinPanel .student-pin-visual-copy h3,\n  body.pin-screen-mode #studentPinPanel .student-pin-visual-copy h3{font-size:2.35rem!important;}\n  html.pin-screen-mode #studentPinPanel .student-pin-visual-art,\n  body.pin-screen-mode #studentPinPanel .student-pin-visual-art{height:235px!important;}\n  html.pin-screen-mode #studentPinPanel .student-pin-card,\n  body.pin-screen-mode #studentPinPanel .student-pin-card{\n    width:min(500px,calc(100% - 64px))!important;padding:38px 42px 32px!important;\n    box-shadow:none!important;border:1px solid #e3ebf5!important;background:#fff!important;\n  }\n}\n
/* v7.9 — PIN escritorio: ocultar el HERO REAL antiguo (.hero / .ref-hero) */
@media(min-width:901px){
  html.pin-screen-mode .hero,
  html.pin-screen-mode .ref-hero,
  body.pin-screen-mode .hero,
  body.pin-screen-mode .ref-hero{
    display:none!important;
    width:0!important;
    flex:0 0 0!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  html.pin-screen-mode .shell,
  body.pin-screen-mode .shell{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    margin:0!important;
  }

  html.pin-screen-mode .panel,
  body.pin-screen-mode .panel{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:34px 42px!important;
    box-sizing:border-box!important;
  }
}

/* v8.0 — PIN escritorio limpio: SIN bloque azul lateral */
@media(min-width:901px){
  html.pin-screen-mode .hero,
  html.pin-screen-mode .ref-hero,
  html.pin-screen-mode .new-hero,
  body.pin-screen-mode .hero,
  body.pin-screen-mode .ref-hero,
  body.pin-screen-mode .new-hero{
    display:none!important;
  }

  html.pin-screen-mode .shell,
  body.pin-screen-mode .shell{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    margin:0!important;
    background:transparent!important;
  }

  html.pin-screen-mode .panel,
  body.pin-screen-mode .panel{
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    padding:40px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:
      radial-gradient(circle at 18% 12%,rgba(35,151,255,.13),transparent 24%),
      radial-gradient(circle at 84% 88%,rgba(100,55,238,.09),transparent 27%),
      linear-gradient(180deg,#f8fbff 0%,#edf5ff 100%)!important;
    box-sizing:border-box!important;
  }

  #studentPinPanel.student-pin-panel,
  html.pin-screen-mode #studentPinPanel,
  body.pin-screen-mode #studentPinPanel{
    display:none!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #studentPinPanel.student-pin-panel.active,
  html.pin-screen-mode #studentPinPanel.active,
  body.pin-screen-mode #studentPinPanel.active{
    display:block!important;
  }

  #studentPinPanel .student-pin-visual{
    display:none!important;
  }

  #studentPinPanel .student-pin-card{
    width:min(560px,calc(100vw - 90px))!important;
    margin:0 auto!important;
    padding:46px 52px 38px!important;
    box-sizing:border-box!important;
    text-align:center!important;
    border:1px solid #dbe7f4!important;
    border-radius:30px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
    box-shadow:0 24px 70px rgba(31,75,126,.14)!important;
  }

  #studentPinPanel .student-pin-icon{
    width:72px!important;
    height:72px!important;
    margin:0 auto 18px!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,#18c5eb 0%,#1685f4 52%,#6438ed 100%)!important;
    box-shadow:0 12px 28px rgba(31,111,222,.20)!important;
    transform:none!important;
  }

  #studentPinPanel .student-pin-shield{
    transform:none!important;
  }

  #studentPinPanel .eyebrow{
    margin:0 0 8px!important;
    color:#3f80d7!important;
    font-size:.72rem!important;
    letter-spacing:.15em!important;
    font-weight:900!important;
  }

  #studentPinPanel .student-pin-card h2{
    margin:0 0 11px!important;
    color:#102e5b!important;
    font-size:2.25rem!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
  }

  #studentPinPanel #studentPinText{
    max-width:400px!important;
    margin:0 auto!important;
    color:#72849b!important;
    font-size:.96rem!important;
    line-height:1.5!important;
  }

  #studentPinPanel .student-pin-inputs{
    gap:14px!important;
    margin:30px 0 26px!important;
  }

  #studentPinPanel .student-pin-digit{
    width:68px!important;
    height:72px!important;
    border-radius:18px!important;
    border:1.5px solid #cbdced!important;
    background:#f8fbff!important;
    color:#12335e!important;
    font-size:2rem!important;
  }

  #studentPinPanel .student-pin-digit:focus{
    background:#fff!important;
    border-color:#2387f3!important;
    box-shadow:0 0 0 4px rgba(35,135,243,.11)!important;
  }

  #studentPinPanel .primary-btn{
    min-height:58px!important;
    border-radius:15px!important;
    background:linear-gradient(100deg,#13bde6 0%,#0e86f5 52%,#6338ed 100%)!important;
    box-shadow:0 11px 26px rgba(32,106,222,.18)!important;
  }

  #studentPinPanel .student-pin-recovery{
    min-height:50px!important;
    margin-top:11px!important;
    border:1px solid #dce6f5!important;
    border-radius:14px!important;
    background:#f2f6ff!important;
    color:#4566cf!important;
  }

  #studentPinPanel .student-pin-help{
    margin:15px auto 0!important;
    color:#8b99ab!important;
    font-size:.74rem!important;
  }
}

/* v8.1 PIN MOBILE */
@media(max-width:900px){
html.pin-screen-mode,body.pin-screen-mode{width:100%!important;min-width:0!important;overflow-x:hidden!important;background:#f3f8ff!important}
html.pin-screen-mode .hero,html.pin-screen-mode .ref-hero,html.pin-screen-mode .new-hero,
body.pin-screen-mode .hero,body.pin-screen-mode .ref-hero,body.pin-screen-mode .new-hero{display:none!important}
html.pin-screen-mode .shell,body.pin-screen-mode .shell{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:100dvh!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important}
html.pin-screen-mode .panel,body.pin-screen-mode .panel{display:flex!important;align-items:flex-start!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:100dvh!important;margin:0!important;padding:28px 16px 34px!important;box-sizing:border-box!important;overflow:visible!important;background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%)!important}
html.pin-screen-mode #studentPinPanel,body.pin-screen-mode #studentPinPanel{display:none!important;width:100%!important;min-width:0!important;max-width:430px!important;min-height:0!important;height:auto!important;margin:0 auto!important;padding:0!important;border:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important}
html.pin-screen-mode #studentPinPanel.active,body.pin-screen-mode #studentPinPanel.active{display:block!important}
#studentPinPanel .student-pin-visual{display:none!important}
#studentPinPanel .student-pin-card{display:block!important;width:100%!important;min-width:0!important;max-width:430px!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:30px 20px 24px!important;box-sizing:border-box!important;border:1px solid #dce8f4!important;border-radius:28px!important;background:#fff!important;box-shadow:0 18px 50px rgba(36,82,130,.12)!important;text-align:center!important;overflow:hidden!important}
#studentPinPanel .student-pin-icon{width:66px!important;height:66px!important;margin:0 auto 16px!important;border-radius:20px!important;transform:none!important}
#studentPinPanel .student-pin-shield{transform:none!important}
#studentPinPanel .eyebrow{margin:0 0 8px!important;font-size:.72rem!important;line-height:1.25!important;letter-spacing:.14em!important;white-space:normal!important}
#studentPinPanel .student-pin-card h2{margin:0 0 10px!important;font-size:2rem!important;line-height:1.08!important;letter-spacing:-.035em!important;white-space:normal!important}
#studentPinPanel #studentPinText{width:100%!important;max-width:330px!important;margin:0 auto!important;font-size:.94rem!important;line-height:1.48!important;white-space:normal!important;word-break:normal!important}
#studentPinPanel .student-pin-inputs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;width:100%!important;max-width:330px!important;margin:25px auto 22px!important}
#studentPinPanel .student-pin-digit{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;height:64px!important;padding:0!important;box-sizing:border-box!important;border-radius:16px!important;font-size:1.75rem!important;text-align:center!important}
#studentPinPanel .primary-btn,#studentPinPanel .student-pin-recovery{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:330px!important;min-height:54px!important;height:auto!important;margin-left:auto!important;margin-right:auto!important;padding:12px 16px!important;box-sizing:border-box!important;border-radius:15px!important;white-space:normal!important;line-height:1.2!important}
#studentPinPanel .student-pin-recovery{margin-top:10px!important}
#studentPinPanel .student-pin-help{width:100%!important;max-width:310px!important;margin:14px auto 0!important;font-size:.74rem!important;line-height:1.4!important;white-space:normal!important}
}
@media(max-width:380px){
html.pin-screen-mode .panel,body.pin-screen-mode .panel{padding:18px 12px 26px!important}
#studentPinPanel .student-pin-card{padding:26px 15px 22px!important;border-radius:24px!important}
#studentPinPanel .student-pin-card h2{font-size:1.8rem!important}
#studentPinPanel .student-pin-inputs{gap:7px!important}
#studentPinPanel .student-pin-digit{height:59px!important;font-size:1.6rem!important}
}

/* v8.3 — Inicio estudiante: mejora visual SOLO escritorio */
@media(min-width:901px){
  #studentHomePanel{
    background:
      radial-gradient(circle at 82% 10%,rgba(91,72,238,.08),transparent 24%),
      radial-gradient(circle at 38% 88%,rgba(14,166,255,.07),transparent 28%),
      #f5f8fd!important;
  }

  #studentHomePanel .dashboard-top{
    margin-bottom:22px!important;
    padding:4px 6px 18px!important;
    border-bottom:1px solid #e2e9f3!important;
  }
  #studentHomePanel .dashboard-top h2{
    margin-bottom:7px!important;
    color:#102d57!important;
    font-size:2.15rem!important;
    letter-spacing:-.035em!important;
  }
  #studentHomePanel .sp-meta{
    gap:9px!important;
  }
  #studentHomePanel .sp-meta span{
    background:#fff!important;
    border:1px solid #e0e8f3!important;
    box-shadow:0 5px 14px rgba(35,73,122,.05)!important;
  }

  #studentHomePanel .sp-home-content{
    gap:18px!important;
  }
  #studentHomePanel .sp-row{
    gap:18px!important;
  }

  #studentHomePanel .sp-card{
    border:1px solid #e0e8f2!important;
    border-radius:24px!important;
    box-shadow:0 14px 34px rgba(35,72,118,.075)!important;
    overflow:hidden!important;
  }

  #studentHomePanel .sp-important{
    position:relative!important;
    background:
      radial-gradient(circle at 88% 16%,rgba(255,255,255,.14),transparent 24%),
      linear-gradient(120deg,#1554c6 0%,#2a56db 48%,#6339e9 100%)!important;
    border:0!important;
    box-shadow:0 18px 38px rgba(61,66,205,.22)!important;
  }
  #studentHomePanel .sp-important:after{
    content:""!important;
    position:absolute!important;
    width:170px!important;
    height:170px!important;
    right:-65px!important;
    bottom:-85px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.07)!important;
    pointer-events:none!important;
  }
  #studentHomePanel .sp-important .sp-card-head{
    position:relative!important;
    z-index:1!important;
  }
  #studentHomePanel .sp-important .sp-card-head small{
    color:#cfe6ff!important;
  }
  #studentHomePanel .sp-important .sp-card-head h3{
    color:#fff!important;
  }
  #studentHomePanel .sp-important .sp-head-icon{
    color:#fff!important;
    background:rgba(255,255,255,.13)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:12px!important;
    width:38px!important;
    height:38px!important;
    display:grid!important;
    place-items:center!important;
  }
  #studentHomePanel .priority-alerts{
    position:relative!important;
    z-index:1!important;
  }
  #studentHomePanel .priority-alerts>*{
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    box-shadow:none!important;
    backdrop-filter:blur(6px)!important;
  }
  #studentHomePanel #openAddItemBtn{
    position:relative!important;
    z-index:1!important;
    margin-top:12px!important;
    min-height:48px!important;
    padding:0 20px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#2450c8!important;
    box-shadow:0 10px 22px rgba(10,34,104,.16)!important;
    font-weight:900!important;
  }

  #studentHomePanel .sp-schedule-card{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
    border-top:4px solid #2996f4!important;
  }
  #studentHomePanel .sp-course-card{
    background:linear-gradient(180deg,#ffffff 0%,#f7fffc 100%)!important;
    border-top:4px solid #20bca7!important;
  }
  #studentHomePanel .sp-upcoming{
    background:linear-gradient(180deg,#ffffff 0%,#fcfbff 100%)!important;
    border-top:4px solid #7b59ea!important;
  }

  #studentHomePanel .sp-card-head{
    margin-bottom:14px!important;
  }
  #studentHomePanel .sp-card-head h3{
    color:#15345e!important;
    font-size:1.2rem!important;
  }
  #studentHomePanel .sp-card-head small{
    color:#397fd9!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
  }
  #studentHomePanel .sp-head-icon.blue{
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#eaf4ff!important;
    color:#267edc!important;
  }
  #studentHomePanel .sp-head-icon.cyan{
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#e8fbf7!important;
    color:#17a792!important;
  }

  #studentHomePanel .sp-schedule-list > *,
  #studentHomePanel .sp-tomorrow-list > *{
    border-radius:12px!important;
    transition:transform .16s ease,background .16s ease!important;
  }
  #studentHomePanel .sp-schedule-list > *:hover,
  #studentHomePanel .sp-tomorrow-list > *:hover{
    transform:translateX(3px)!important;
    background:#f6f9fd!important;
  }

  #studentHomePanel .items-stack > *{
    border-radius:16px!important;
    border:1px solid #e3e9f2!important;
    box-shadow:0 6px 16px rgba(42,76,118,.04)!important;
  }

  #studentHomePanel .ghost-btn{
    border:1px solid #dbe5f2!important;
    background:#fff!important;
    color:#1a3f70!important;
    box-shadow:0 6px 16px rgba(33,69,116,.05)!important;
  }
}

/* v8.4 — Inicio escritorio más vivo + iconos sidebar SVG */
@media(min-width:901px){
  /* SIDEBAR */
  .student-nav .sp-nav-icon{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }
  .student-nav .sp-nav-icon svg{
    width:18px!important;
    height:18px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .student-nav-btn{
    gap:11px!important;
    border-radius:14px!important;
  }
  .student-nav-btn:nth-of-type(1) .sp-nav-icon{color:#62c4ff!important;background:rgba(22,154,255,.12)!important}
  .student-nav-btn:nth-of-type(2) .sp-nav-icon{color:#9f8cff!important;background:rgba(113,82,241,.12)!important}
  .student-nav-btn:nth-of-type(3) .sp-nav-icon{color:#45d1b8!important;background:rgba(31,190,165,.12)!important}
  .student-nav-btn:nth-of-type(4) .sp-nav-icon{color:#ffb657!important;background:rgba(255,170,52,.12)!important}
  .student-nav-btn:nth-of-type(5) .sp-nav-icon{color:#ff7e9a!important;background:rgba(255,93,130,.12)!important}
  .student-nav-btn.active .sp-nav-icon{
    color:#fff!important;
    background:rgba(255,255,255,.18)!important;
    border-color:rgba(255,255,255,.18)!important;
  }

  /* CABECERA */
  #studentHomePanel .dashboard-top{
    position:relative!important;
    padding:16px 18px 20px!important;
    border:1px solid #dfe8f3!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 82% 28%,rgba(105,65,235,.10),transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f7fbff 68%,#f3efff 100%)!important;
    box-shadow:0 10px 28px rgba(36,76,124,.06)!important;
  }
  #studentHomePanel .dashboard-top:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:16px!important;
    bottom:16px!important;
    width:5px!important;
    border-radius:0 5px 5px 0!important;
    background:linear-gradient(180deg,#14bde8,#226ef0 55%,#6d41ed)!important;
  }
  #studentHomePanel .dashboard-top h2{
    color:#123765!important;
  }
  #studentHomePanel .sp-meta span:first-child{
    color:#246dd9!important;
    background:#edf5ff!important;
    border-color:#d5e6fb!important;
  }
  #studentHomePanel .sp-meta span:last-child{
    color:#7652d8!important;
    background:#f4efff!important;
    border-color:#e4d9ff!important;
  }

  /* TARJETAS PRINCIPALES */
  #studentHomePanel .sp-important{
    background:
      radial-gradient(circle at 92% 18%,rgba(255,255,255,.18),transparent 25%),
      radial-gradient(circle at 76% 112%,rgba(134,93,255,.55),transparent 34%),
      linear-gradient(118deg,#075bc6 0%,#1b75e5 38%,#5145e9 72%,#7138e8 100%)!important;
  }
  #studentHomePanel .sp-schedule-card{
    background:
      radial-gradient(circle at 92% 12%,rgba(34,146,255,.10),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#eef7ff 100%)!important;
    border-top:5px solid #2b97f4!important;
  }
  #studentHomePanel .sp-upcoming{
    background:
      radial-gradient(circle at 90% 14%,rgba(123,89,234,.09),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#f6f2ff 100%)!important;
    border-top:5px solid #805ced!important;
  }
  #studentHomePanel .sp-course-card{
    background:
      radial-gradient(circle at 92% 14%,rgba(28,192,163,.10),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#effbf8 100%)!important;
    border-top:5px solid #20bca7!important;
  }

  /* Cabeceras internas más visuales */
  #studentHomePanel .sp-schedule-card .sp-card-head,
  #studentHomePanel .sp-upcoming .sp-card-head,
  #studentHomePanel .sp-course-card .sp-card-head{
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(37,77,124,.08)!important;
  }
  #studentHomePanel .sp-schedule-card .sp-card-head h3{color:#1d64af!important}
  #studentHomePanel .sp-upcoming .sp-card-head h3{color:#5d43bd!important}
  #studentHomePanel .sp-course-card .sp-card-head h3{color:#178875!important}

  /* Iconos de cabecera en tarjetas */
  #studentHomePanel .sp-schedule-card .sp-head-icon{
    background:linear-gradient(145deg,#e3f2ff,#d7ebff)!important;
    color:#237fd8!important;
    box-shadow:0 8px 18px rgba(38,127,216,.12)!important;
  }
  #studentHomePanel .sp-upcoming .sp-head-icon{
    background:linear-gradient(145deg,#eee8ff,#e2d8ff)!important;
    color:#7552d8!important;
    box-shadow:0 8px 18px rgba(117,82,216,.12)!important;
  }
  #studentHomePanel .sp-course-card .sp-head-icon{
    background:linear-gradient(145deg,#e4fbf6,#d6f6ef)!important;
    color:#16a28e!important;
    box-shadow:0 8px 18px rgba(22,162,142,.12)!important;
  }

  /* Listas: más separación y color */
  #studentHomePanel .sp-schedule-list > *{
    padding:12px 10px!important;
    border-left:3px solid #71b8f7!important;
    background:rgba(255,255,255,.72)!important;
  }
  #studentHomePanel .sp-tomorrow-list > *{
    padding:12px 10px!important;
    border-left:3px solid #65d4c2!important;
    background:rgba(255,255,255,.74)!important;
  }

  #studentHomePanel .items-stack > *{
    background:#fff!important;
  }
  #studentHomePanel .items-stack > *:nth-child(1){border-left:4px solid #29a3ef!important}
  #studentHomePanel .items-stack > *:nth-child(2){border-left:4px solid #ef6f7a!important}
  #studentHomePanel .items-stack > *:nth-child(3){border-left:4px solid #b563eb!important}
  #studentHomePanel .items-stack > *:nth-child(4){border-left:4px solid #24b9a4!important}

  /* Botón principal con más presencia */
  #studentHomePanel #openAddItemBtn{
    background:linear-gradient(100deg,#ffffff,#f5f9ff)!important;
    border:0!important;
    color:#1a54ca!important;
    box-shadow:0 11px 26px rgba(16,42,115,.20)!important;
  }
  #studentHomePanel #openAddItemBtn:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 14px 30px rgba(16,42,115,.24)!important;
  }
}

/* v8.5 — Inicio estudiante móvil: más compacto, más color y barra inferior sin tapar */
@media(max-width:900px){
  #studentHomePanel{
    padding-bottom:118px!important;
    background:
      radial-gradient(circle at 85% 6%,rgba(101,64,235,.07),transparent 24%),
      radial-gradient(circle at 14% 92%,rgba(19,169,239,.06),transparent 25%),
      #f5f8fd!important;
  }

  #studentHomePanel .dashboard-top{
    margin:0 14px 18px!important;
    padding:16px 16px 15px!important;
    border:1px solid #dfe8f3!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 88% 22%,rgba(104,65,236,.10),transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f8fbff 68%,#f3efff 100%)!important;
    box-shadow:0 10px 24px rgba(35,73,122,.06)!important;
  }
  #studentHomePanel .dashboard-top h2{
    margin:0 0 8px!important;
    font-size:2.15rem!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
  }
  #studentHomePanel .dashboard-top .eyebrow{display:none!important}
  #studentHomePanel .sp-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  #studentHomePanel .sp-meta span{
    padding:8px 12px!important;
    font-size:.85rem!important;
    border-radius:999px!important;
  }
  #studentHomePanel .dashboard-top .ghost-btn{
    min-height:48px!important;
    padding:0 18px!important;
    border-radius:15px!important;
  }

  #studentHomePanel .sp-home-content{
    padding:0 14px!important;
    gap:16px!important;
  }
  #studentHomePanel .sp-row{
    display:block!important;
  }
  #studentHomePanel .sp-row > .sp-card{
    margin-bottom:16px!important;
  }

  #studentHomePanel .sp-card{
    border-radius:22px!important;
    box-shadow:0 12px 28px rgba(35,72,118,.07)!important;
  }

  #studentHomePanel .sp-important{
    padding:22px 18px!important;
    background:
      radial-gradient(circle at 90% 18%,rgba(255,255,255,.16),transparent 24%),
      radial-gradient(circle at 80% 112%,rgba(133,91,255,.50),transparent 34%),
      linear-gradient(120deg,#075bc6 0%,#1b74e5 40%,#5145e9 74%,#7138e8 100%)!important;
  }
  #studentHomePanel .sp-important .sp-card-head{
    margin-bottom:14px!important;
  }
  #studentHomePanel .sp-important .sp-card-head h3{
    font-size:1.55rem!important;
    line-height:1.05!important;
  }
  #studentHomePanel .sp-important .sp-head-icon{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
  }
  #studentHomePanel .priority-alerts > *{
    padding:14px 14px!important;
    border-radius:16px!important;
  }
  #studentHomePanel #openAddItemBtn{
    width:auto!important;
    min-height:52px!important;
    margin-top:12px!important;
    padding:0 18px!important;
    font-size:.93rem!important;
    border-radius:15px!important;
  }

  #studentHomePanel .sp-schedule-card{
    padding:22px 18px!important;
    background:
      radial-gradient(circle at 92% 12%,rgba(35,151,245,.10),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#eef7ff 100%)!important;
    border-top:5px solid #2b97f4!important;
  }
  #studentHomePanel .sp-upcoming{
    padding:22px 18px!important;
    background:
      radial-gradient(circle at 90% 14%,rgba(123,89,234,.09),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#f6f2ff 100%)!important;
    border-top:5px solid #805ced!important;
  }
  #studentHomePanel .sp-course-card{
    padding:22px 18px!important;
    background:
      radial-gradient(circle at 92% 14%,rgba(28,192,163,.10),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#effbf8 100%)!important;
    border-top:5px solid #20bca7!important;
  }

  #studentHomePanel .sp-card-head{
    margin-bottom:13px!important;
    padding-bottom:10px!important;
    border-bottom:1px solid rgba(37,77,124,.08)!important;
  }
  #studentHomePanel .sp-card-head h3{
    font-size:1.45rem!important;
    line-height:1.08!important;
  }
  #studentHomePanel .sp-card-head small{
    font-size:.76rem!important;
  }

  #studentHomePanel .sp-schedule-list > *,
  #studentHomePanel .sp-tomorrow-list > *{
    padding:11px 8px!important;
    min-height:0!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.76)!important;
  }
  #studentHomePanel .sp-schedule-list > *{
    border-left:3px solid #70b8f7!important;
  }
  #studentHomePanel .sp-tomorrow-list > *{
    border-left:3px solid #63d2bf!important;
  }

  #studentHomePanel .items-stack{
    gap:12px!important;
  }
  #studentHomePanel .items-stack > *{
    min-height:0!important;
    padding:14px 14px!important;
    border-radius:16px!important;
    background:#fff!important;
  }
  #studentHomePanel .items-stack > *:nth-child(1){border-left:4px solid #29a3ef!important}
  #studentHomePanel .items-stack > *:nth-child(2){border-left:4px solid #ef6f7a!important}
  #studentHomePanel .items-stack > *:nth-child(3){border-left:4px solid #b563eb!important}
  #studentHomePanel .items-stack > *:nth-child(4){border-left:4px solid #24b9a4!important}

  /* Barra móvil: fija pero con hueco real debajo */
  .student-nav{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    z-index:50!important;
    height:82px!important;
    padding:8px!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,#06254b 0%,#031a35 100%)!important;
    box-shadow:0 16px 34px rgba(4,22,49,.24)!important;
  }
  .student-nav .sp-brand{display:none!important}
  .student-nav-btn{
    min-width:0!important;
    padding:0 8px!important;
    border-radius:16px!important;
    gap:4px!important;
    flex-direction:column!important;
    justify-content:center!important;
    font-size:.72rem!important;
  }
  .student-nav .sp-nav-icon{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
    border-radius:9px!important;
  }
  .student-nav .sp-nav-icon svg{
    width:15px!important;
    height:15px!important;
  }
  .student-nav-btn.active{
    background:linear-gradient(135deg,#146df0 0%,#6a38ed 100%)!important;
    box-shadow:0 10px 20px rgba(69,61,230,.24)!important;
  }
}

@media(max-width:380px){
  #studentHomePanel .dashboard-top h2{font-size:1.95rem!important}
  #studentHomePanel .sp-card-head h3{font-size:1.28rem!important}
  .student-nav{left:10px!important;right:10px!important;bottom:10px!important}
  .student-nav-btn{font-size:.66rem!important;padding:0 5px!important}
}

/* v8.6 — colores correctos para iconos de la barra inferior móvil */
@media(max-width:900px){
  .student-nav .student-nav-btn{
    color:#c9d4e5!important;
  }

  .student-nav .student-nav-btn .sp-nav-icon{
    color:#c9d4e5!important;
    background:transparent!important;
    border-color:transparent!important;
  }

  .student-nav .student-nav-btn .sp-nav-icon svg{
    stroke:currentColor!important;
    fill:none!important;
  }

  .student-nav .student-nav-btn:nth-of-type(1) .sp-nav-icon{color:#62c4ff!important}
  .student-nav .student-nav-btn:nth-of-type(2) .sp-nav-icon{color:#a997ff!important}
  .student-nav .student-nav-btn:nth-of-type(3) .sp-nav-icon{color:#55d7bf!important}
  .student-nav .student-nav-btn:nth-of-type(4) .sp-nav-icon{color:#ffbd66!important}
  .student-nav .student-nav-btn:nth-of-type(5) .sp-nav-icon{color:#ff88a2!important}

  .student-nav .student-nav-btn.active{
    color:#fff!important;
  }
  .student-nav .student-nav-btn.active .sp-nav-icon{
    color:#fff!important;
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.16)!important;
  }
}

/* v8.7 — Semana escritorio: L-V, más visual y coherente con Inicio */
@media(min-width:901px){
  #studentWeekPanel{
    background:
      radial-gradient(circle at 90% 4%,rgba(112,72,235,.08),transparent 24%),
      radial-gradient(circle at 18% 94%,rgba(25,157,239,.055),transparent 26%),
      #f4f7fc!important;
    min-height:100vh!important;
  }

  #studentWeekPanel .dashboard-top,
  #studentWeekPanel .week-top,
  #studentWeekPanel > .panel-head{
    background:
      radial-gradient(circle at 90% 20%,rgba(107,68,235,.10),transparent 30%),
      linear-gradient(135deg,#fff 0%,#f8fbff 68%,#f4efff 100%)!important;
    border:1px solid #e0e8f3!important;
    border-radius:22px!important;
    box-shadow:0 10px 26px rgba(35,72,118,.055)!important;
  }

  #studentWeekPanel .week-nav,
  #studentWeekPanel .week-controls{
    gap:10px!important;
  }
  #studentWeekPanel .week-nav button,
  #studentWeekPanel .week-controls button{
    border-radius:14px!important;
    min-height:46px!important;
    border:1px solid #dce5f1!important;
    box-shadow:0 5px 14px rgba(38,74,118,.045)!important;
  }
  #studentWeekPanel .week-nav button.active,
  #studentWeekPanel .week-controls button.active{
    color:#fff!important;
    border-color:transparent!important;
    background:linear-gradient(135deg,#1d75ed 0%,#6841eb 100%)!important;
    box-shadow:0 9px 20px rgba(80,67,229,.18)!important;
  }

  #studentWeekPanel .week-day,
  #studentWeekPanel .week-day-card,
  #studentWeekPanel .day-card{
    position:relative!important;
    overflow:hidden!important;
    border:1px solid #e0e7f1!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(36,72,115,.045)!important;
    transition:transform .15s ease,box-shadow .15s ease!important;
  }
  #studentWeekPanel .week-day:hover,
  #studentWeekPanel .week-day-card:hover,
  #studentWeekPanel .day-card:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 11px 26px rgba(36,72,115,.07)!important;
  }

  #studentWeekPanel .week-day:nth-of-type(5n+1),
  #studentWeekPanel .week-day-card:nth-of-type(5n+1),
  #studentWeekPanel .day-card:nth-of-type(5n+1){border-left:5px solid #2f9bf3!important}
  #studentWeekPanel .week-day:nth-of-type(5n+2),
  #studentWeekPanel .week-day-card:nth-of-type(5n+2),
  #studentWeekPanel .day-card:nth-of-type(5n+2){border-left:5px solid #7559ed!important}
  #studentWeekPanel .week-day:nth-of-type(5n+3),
  #studentWeekPanel .week-day-card:nth-of-type(5n+3),
  #studentWeekPanel .day-card:nth-of-type(5n+3){border-left:5px solid #22b9a5!important}
  #studentWeekPanel .week-day:nth-of-type(5n+4),
  #studentWeekPanel .week-day-card:nth-of-type(5n+4),
  #studentWeekPanel .day-card:nth-of-type(5n+4){border-left:5px solid #f1a23c!important}
  #studentWeekPanel .week-day:nth-of-type(5n+5),
  #studentWeekPanel .week-day-card:nth-of-type(5n+5),
  #studentWeekPanel .day-card:nth-of-type(5n+5){border-left:5px solid #ef718a!important}

  #studentWeekPanel .today,
  #studentWeekPanel .is-today{
    border-color:#8f78f3!important;
    background:
      radial-gradient(circle at 96% 20%,rgba(109,70,235,.08),transparent 28%),
      linear-gradient(135deg,#fff 0%,#f8f6ff 100%)!important;
    box-shadow:0 10px 26px rgba(92,71,224,.09)!important;
  }

  #studentWeekPanel .week-item,
  #studentWeekPanel .day-item,
  #studentWeekPanel .week-task{
    border-radius:15px!important;
    background:#fff!important;
    border:1px solid #e3e9f2!important;
  }
}

/* v8.8 — Semana móvil: misma paleta que escritorio + navegación compacta */
@media (max-width: 600px){
  #studentWeekPanel .week-toolbar{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:7px!important;
    width:100%!important;
    margin:4px 0 12px!important;
  }
  #studentWeekPanel .week-toolbar button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:9px 5px!important;
    font-size:.78rem!important;
    line-height:1.08!important;
    white-space:normal!important;
    border-radius:13px!important;
  }
  #studentWeekPanel #prevWeekBtn{font-size:0!important}
  #studentWeekPanel #prevWeekBtn::after{content:'← Anterior';font-size:.78rem!important}
  #studentWeekPanel #nextWeekBtn{font-size:0!important}
  #studentWeekPanel #nextWeekBtn::after{content:'Siguiente →';font-size:.78rem!important}
  #studentWeekPanel #currentWeekBtn{font-size:0!important}
  #studentWeekPanel #currentWeekBtn::after{content:'Esta semana';font-size:.78rem!important}

  #studentWeekPanel .week-range-label{margin:0 0 12px!important}
  #studentWeekPanel .week-grid{gap:11px!important}
  #studentWeekPanel .week-day-card{
    padding:13px 15px!important;
    min-height:0!important;
    border-radius:18px!important;
  }
  #studentWeekPanel .week-day-head{margin-bottom:6px!important}
  #studentWeekPanel .week-day-items .empty-state{padding:0!important;min-height:0!important}

  #studentWeekPanel .week-day-card:nth-of-type(7n+1){
    border-left:5px solid #2f9bf3!important;
    background:linear-gradient(135deg,#fff 0%,#f1f8ff 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+2){
    border-left:5px solid #7559ed!important;
    background:linear-gradient(135deg,#fff 0%,#f7f3ff 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+3){
    border-left:5px solid #22b9a5!important;
    background:linear-gradient(135deg,#fff 0%,#effbf8 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+4){
    border-left:5px solid #f1a23c!important;
    background:linear-gradient(135deg,#fff 0%,#fff8ed 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+5){
    border-left:5px solid #ef718a!important;
    background:linear-gradient(135deg,#fff 0%,#fff2f5 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+6){
    border-left:5px solid #4d83e8!important;
    background:linear-gradient(135deg,#fff 0%,#f2f6ff 100%)!important;
  }
  #studentWeekPanel .week-day-card:nth-of-type(7n+7){
    border-left:5px solid #9a6ee8!important;
    background:linear-gradient(135deg,#fff 0%,#f8f3ff 100%)!important;
  }
}

/* v8.9 — Semana móvil REAL: selectores específicos del layout student-app */
@media(max-width:760px){

  html.student-app #studentWeekPanel.active .week-toolbar{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:auto!important;
    margin:8px 13px 10px!important;
  }

  html.student-app #studentWeekPanel.active .week-toolbar button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:8px 4px!important;
    margin:0!important;
    font-size:0!important;
    border-radius:13px!important;
    white-space:nowrap!important;
  }

  html.student-app #studentWeekPanel.active #prevWeekBtn::after{
    content:"← Anterior"!important;
    font-size:.73rem!important;
  }
  html.student-app #studentWeekPanel.active #currentWeekBtn::after{
    content:"Esta semana"!important;
    font-size:.73rem!important;
  }
  html.student-app #studentWeekPanel.active #nextWeekBtn::after{
    content:"Siguiente →"!important;
    font-size:.73rem!important;
  }

  html.student-app #studentWeekPanel.active #weekRangeLabel{
    width:auto!important;
    margin:0 13px 12px!important;
    font-size:.93rem!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid{
    width:auto!important;
    margin-left:13px!important;
    margin-right:13px!important;
    display:grid!important;
    gap:10px!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card{
    min-height:0!important;
    padding:12px 14px!important;
    border-radius:18px!important;
    box-shadow:0 8px 20px rgba(35,72,118,.05)!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-head{
    margin-bottom:5px!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-head strong{
    font-size:1rem!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-items .empty-state{
    display:block!important;
    padding:0!important;
    margin:0!important;
    min-height:0!important;
    font-size:.88rem!important;
    line-height:1.25!important;
  }

  /* mismos colores de escritorio */
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+1){
    border-left:5px solid #2f9bf3!important;
    background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+2){
    border-left:5px solid #7559ed!important;
    background:linear-gradient(135deg,#ffffff 0%,#f5f1ff 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+3){
    border-left:5px solid #22b9a5!important;
    background:linear-gradient(135deg,#ffffff 0%,#edf9f6 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+4){
    border-left:5px solid #f1a23c!important;
    background:linear-gradient(135deg,#ffffff 0%,#fff6e8 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+5){
    border-left:5px solid #ef718a!important;
    background:linear-gradient(135deg,#ffffff 0%,#fff0f4 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+6){
    border-left:5px solid #4d83e8!important;
    background:linear-gradient(135deg,#ffffff 0%,#eff4ff 100%)!important;
  }
  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card:nth-child(7n+7){
    border-left:5px solid #9a6ee8!important;
    background:linear-gradient(135deg,#ffffff 0%,#f6f0ff 100%)!important;
  }

  html.student-app #studentWeekPanel.active #weekItemsGrid .week-day-card.today{
    box-shadow:0 10px 24px rgba(94,70,225,.11)!important;
  }
}

/* v9.0 REAL — Calendario escritorio */
@media(min-width:901px){
  html.student-app #studentCalendarPanel.active{
    background:
      radial-gradient(circle at 88% 7%,rgba(112,72,235,.08),transparent 24%),
      radial-gradient(circle at 18% 93%,rgba(26,159,240,.055),transparent 26%),
      #f4f7fc!important;
  }

  html.student-app #studentCalendarPanel.active .dashboard-top{
    width:calc(100% - 312px)!important;
    margin-left:278px!important;
    margin-right:34px!important;
    padding:18px 20px!important;
    border:1px solid #dfe8f3!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 90% 20%,rgba(109,70,235,.10),transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f8fbff 68%,#f4efff 100%)!important;
    box-shadow:0 10px 26px rgba(35,72,118,.055)!important;
  }

  html.student-app #studentCalendarPanel.active .dashboard-top h2{
    color:#14365f!important;
    font-size:2rem!important;
    letter-spacing:-.035em!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-toolbar{
    width:calc(100% - 312px)!important;
    margin-left:278px!important;
    margin-right:34px!important;
    margin-top:18px!important;
    margin-bottom:14px!important;
    gap:10px!important;
  }
  html.student-app #studentCalendarPanel.active .calendar-toolbar button{
    min-width:64px!important;
    min-height:46px!important;
    border-radius:14px!important;
    border:1px solid #dce5f1!important;
    background:#fff!important;
    box-shadow:0 6px 16px rgba(37,72,115,.05)!important;
  }
  html.student-app #studentCalendarPanel.active #todayMonthBtn{
    min-width:90px!important;
    color:#fff!important;
    border-color:transparent!important;
    background:linear-gradient(135deg,#1f78ed 0%,#6840eb 100%)!important;
    box-shadow:0 9px 20px rgba(81,67,229,.18)!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-weekdays{
    width:calc(100% - 312px)!important;
    margin-left:278px!important;
    margin-right:34px!important;
    border:1px solid #e0e7f0!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    overflow:hidden!important;
    background:#f8fbff!important;
  }
  html.student-app #studentCalendarPanel.active .calendar-weekdays span{
    padding:11px 8px!important;
    color:#586a84!important;
    font-size:.75rem!important;
  }
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(1){background:#eef7ff!important;color:#2d7dcc!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(2){background:#f4f0ff!important;color:#6c52cf!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(3){background:#eefaf7!important;color:#1d9b86!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(4){background:#fff7eb!important;color:#c27b22!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(5){background:#fff0f4!important;color:#c65370!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(6){background:#f2f6ff!important;color:#5679c7!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(7){background:#f7f2ff!important;color:#8260c9!important}

  html.student-app #studentCalendarPanel.active #calendarGrid{
    width:calc(100% - 312px)!important;
    margin-left:278px!important;
    margin-right:34px!important;
    border-left:1px solid #e0e7f0!important;
    border-top:1px solid #e0e7f0!important;
    border-radius:0 0 18px 18px!important;
    overflow:hidden!important;
    box-shadow:0 12px 28px rgba(36,72,115,.055)!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day{
    min-height:120px!important;
    padding:10px!important;
    border-color:#e4eaf2!important;
    background:#fff!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+1){background:linear-gradient(180deg,#fff,#f6fbff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+2){background:linear-gradient(180deg,#fff,#faf7ff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+3){background:linear-gradient(180deg,#fff,#f5fcfa)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+4){background:linear-gradient(180deg,#fff,#fffaf2)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+5){background:linear-gradient(180deg,#fff,#fff6f8)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+6){background:linear-gradient(180deg,#fff,#f7f9ff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+7){background:linear-gradient(180deg,#fff,#faf7ff)!important}

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.outside{
    background:#f4f6f9!important;
    color:#a1acba!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.today{
    position:relative!important;
    box-shadow:inset 0 0 0 3px #5f53ec!important;
    background:
      radial-gradient(circle at 84% 16%,rgba(102,70,235,.10),transparent 26%),
      linear-gradient(180deg,#fff,#f6f4ff)!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.today .calendar-date{
    display:inline-grid!important;
    place-items:center!important;
    min-width:28px!important;
    height:28px!important;
    padding:0 7px!important;
    border-radius:9px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#2478ee,#6640e9)!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event{
    padding:6px 8px!important;
    border-radius:9px!important;
    font-size:.69rem!important;
    font-weight:700!important;
    border:1px solid transparent!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.homework{
    background:#eaf4ff!important;
    color:#2768aa!important;
    border-color:#d7e9fb!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.exam{
    background:#fff0f1!important;
    color:#b14951!important;
    border-color:#f9dadd!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.project{
    background:#f3edff!important;
    color:#6d4bb8!important;
    border-color:#e3d7fb!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.bring{
    background:#fff6e5!important;
    color:#a36c1f!important;
    border-color:#f5e2bc!important;
  }
}

/* v9.1 — Calendario móvil: mismos colores del escritorio */
@media(max-width:760px){
  html.student-app #studentCalendarPanel.active{
    background:
      radial-gradient(circle at 88% 6%,rgba(112,72,235,.07),transparent 24%),
      radial-gradient(circle at 14% 92%,rgba(25,157,239,.05),transparent 26%),
      #f4f7fc!important;
  }

  html.student-app #studentCalendarPanel.active .dashboard-top{
    width:auto!important;
    margin:0 14px 16px!important;
    padding:16px!important;
    border:1px solid #dfe8f3!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 90% 20%,rgba(109,70,235,.10),transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f8fbff 68%,#f4efff 100%)!important;
    box-shadow:0 10px 24px rgba(35,72,118,.055)!important;
  }

  html.student-app #studentCalendarPanel.active .dashboard-top h2{
    color:#14365f!important;
    font-size:2rem!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-toolbar{
    width:auto!important;
    margin:0 14px 14px!important;
    display:grid!important;
    grid-template-columns:1fr 1.15fr 1fr!important;
    gap:8px!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-toolbar button{
    min-width:0!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    border:1px solid #dce5f1!important;
    background:#fff!important;
    box-shadow:0 6px 16px rgba(37,72,115,.05)!important;
  }

  html.student-app #studentCalendarPanel.active #todayMonthBtn{
    color:#fff!important;
    border-color:transparent!important;
    background:linear-gradient(135deg,#1f78ed 0%,#6840eb 100%)!important;
    box-shadow:0 9px 20px rgba(81,67,229,.18)!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-weekdays{
    width:auto!important;
    margin:0 14px!important;
    border:1px solid #e0e7f0!important;
    border-bottom:0!important;
    border-radius:16px 16px 0 0!important;
    overflow:hidden!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-weekdays span{
    padding:10px 3px!important;
    font-size:.72rem!important;
  }

  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(1){background:#eef7ff!important;color:#2d7dcc!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(2){background:#f4f0ff!important;color:#6c52cf!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(3){background:#eefaf7!important;color:#1d9b86!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(4){background:#fff7eb!important;color:#c27b22!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(5){background:#fff0f4!important;color:#c65370!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(6){background:#f2f6ff!important;color:#5679c7!important}
  html.student-app #studentCalendarPanel.active .calendar-weekdays span:nth-child(7){background:#f7f2ff!important;color:#8260c9!important}

  html.student-app #studentCalendarPanel.active #calendarGrid{
    width:auto!important;
    margin-left:14px!important;
    margin-right:14px!important;
    border-left:1px solid #e0e7f0!important;
    border-top:1px solid #e0e7f0!important;
    border-radius:0 0 16px 16px!important;
    overflow:hidden!important;
    box-shadow:0 12px 26px rgba(36,72,115,.05)!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day{
    min-height:95px!important;
    padding:6px!important;
    border-color:#e4eaf2!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+1){background:linear-gradient(180deg,#fff,#f6fbff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+2){background:linear-gradient(180deg,#fff,#faf7ff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+3){background:linear-gradient(180deg,#fff,#f5fcfa)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+4){background:linear-gradient(180deg,#fff,#fffaf2)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+5){background:linear-gradient(180deg,#fff,#fff6f8)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+6){background:linear-gradient(180deg,#fff,#f7f9ff)!important}
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day:nth-child(7n+7){background:linear-gradient(180deg,#fff,#faf7ff)!important}

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.outside{
    background:#f4f6f9!important;
    color:#a1acba!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.today{
    box-shadow:inset 0 0 0 3px #5f53ec!important;
    background:
      radial-gradient(circle at 84% 16%,rgba(102,70,235,.10),transparent 26%),
      linear-gradient(180deg,#fff,#f6f4ff)!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-day.today .calendar-date{
    display:inline-grid!important;
    place-items:center!important;
    min-width:25px!important;
    height:25px!important;
    padding:0 6px!important;
    border-radius:8px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#2478ee,#6640e9)!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event{
    padding:5px 6px!important;
    border-radius:8px!important;
    font-size:.59rem!important;
    font-weight:700!important;
  }

  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.homework{
    background:#eaf4ff!important;color:#2768aa!important;border-color:#d7e9fb!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.exam{
    background:#fff0f1!important;color:#b14951!important;border-color:#f9dadd!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.project{
    background:#f3edff!important;color:#6d4bb8!important;border-color:#e3d7fb!important;
  }
  html.student-app #studentCalendarPanel.active #calendarGrid .calendar-event.bring{
    background:#fff6e5!important;color:#a36c1f!important;border-color:#f5e2bc!important;
  }
}

/* v9.2 — Calendario interactivo + detalle de día */
.calendar-day{
  font:inherit!important;
  color:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  appearance:none!important;
}
.calendar-day:hover{
  filter:brightness(.995)!important;
}
.calendar-day:focus-visible{
  outline:3px solid rgba(80,87,235,.22)!important;
  outline-offset:-3px!important;
  z-index:2!important;
}

.calendar-day-modal-card{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(78vh,760px)!important;
  overflow:auto!important;
  border-radius:26px!important;
  padding:22px!important;
}
.calendar-day-modal-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:16px!important;
  margin-bottom:16px!important;
}
.calendar-day-modal-head h3{
  margin:4px 0 0!important;
  font-size:1.45rem!important;
  line-height:1.15!important;
  text-transform:capitalize!important;
}
.icon-close-btn{
  min-width:44px!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border-radius:14px!important;
  font-size:1.5rem!important;
}
.calendar-day-detail-list{
  display:grid!important;
  gap:12px!important;
}
.calendar-day-detail-item{
  display:grid!important;
  grid-template-columns:48px 1fr auto!important;
  gap:12px!important;
  align-items:center!important;
  padding:14px!important;
  border:1px solid #e2e8f1!important;
  border-radius:17px!important;
  background:#fff!important;
}
.calendar-day-detail-item.homework{border-left:5px solid #2f9bf3!important;background:#f7fbff!important}
.calendar-day-detail-item.exam{border-left:5px solid #ef718a!important;background:#fff8fa!important}
.calendar-day-detail-item.project{border-left:5px solid #8a63e8!important;background:#faf7ff!important}
.calendar-day-detail-item.bring{border-left:5px solid #f1a23c!important;background:#fffaf2!important}
.calendar-day-detail-icon{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  background:#f3f6fa!important;
  font-size:1.25rem!important;
}
.calendar-day-detail-copy strong{
  display:block!important;
  color:#142f57!important;
  font-size:1rem!important;
}
.calendar-day-detail-copy p{
  margin:8px 0 0!important;
  color:#6d7b90!important;
  font-size:.86rem!important;
  line-height:1.45!important;
}
.calendar-day-detail-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:6px!important;
}
.calendar-day-detail-meta span{
  padding:4px 8px!important;
  border-radius:999px!important;
  background:#f0f3f8!important;
  color:#68758a!important;
  font-size:.72rem!important;
}
.calendar-day-detail-state{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  background:#eef4ff!important;
  color:#286fd1!important;
  font-weight:900!important;
}
.calendar-day-detail-state.done{
  background:#eaf8f2!important;
  color:#15865f!important;
}
.calendar-day-empty{
  text-align:center!important;
  padding:26px 14px 18px!important;
  color:#6d7b90!important;
}
.calendar-day-empty-icon{
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto 12px!important;
  border-radius:18px!important;
  background:#eaf8f2!important;
  color:#178963!important;
  font-size:1.5rem!important;
  font-weight:900!important;
}
.calendar-day-empty strong{
  display:block!important;
  color:#17365d!important;
  font-size:1.05rem!important;
}
.calendar-day-empty p{
  margin:7px auto 0!important;
  max-width:420px!important;
  line-height:1.5!important;
}

@media(max-width:760px){
  .calendar-day-modal-card{
    width:calc(100vw - 24px)!important;
    max-height:76vh!important;
    padding:18px!important;
    border-radius:22px!important;
  }
  .calendar-day-modal-head h3{font-size:1.25rem!important}
  .calendar-day-detail-item{
    grid-template-columns:42px 1fr auto!important;
    gap:10px!important;
    padding:12px!important;
  }
  .calendar-day-detail-icon{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
  }
}


/* ===== v95 MOCHILA - selectores reales ===== */
#studentBackpackPanel.active{
  background:
    radial-gradient(circle at 92% 6%,rgba(116,79,255,.12),transparent 27%),
    radial-gradient(circle at 8% 90%,rgba(27,190,171,.09),transparent 25%),
    #f5f8ff !important;
}
#studentBackpackPanel .dashboard-top{
  background:linear-gradient(105deg,#ffffff 38%,#f0edff 100%) !important;
  border-radius:0 0 24px 24px !important;
  box-shadow:0 12px 30px rgba(28,56,105,.07) !important;
}
#studentBackpackPanel .backpack-topline{
  padding:18px 20px !important;
  border-radius:20px !important;
  background:linear-gradient(105deg,#eef8ff,#f5f0ff) !important;
  border:1px solid #dce7ff !important;
}
#studentBackpackPanel .backpack-topline .tiny-label{color:#5c55ef!important}
#studentBackpackPanel #backpackAddBtn{
  background:linear-gradient(100deg,#1688f4,#7044f5)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 10px 24px rgba(78,77,236,.22)!important;
}
#studentBackpackPanel .tomorrow-subject-card{
  border:0!important;
  border-radius:20px!important;
  box-shadow:0 10px 28px rgba(29,58,108,.08)!important;
}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+1){border-left:6px solid #28a8ff!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+2){border-left:6px solid #7758f7!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+3){border-left:6px solid #22bda9!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+4){border-left:6px solid #ffad35!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+1) .tomorrow-subject-head{background:linear-gradient(100deg,#eaf7ff,#f8fcff)!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+2) .tomorrow-subject-head{background:linear-gradient(100deg,#f1edff,#fbfaff)!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+3) .tomorrow-subject-head{background:linear-gradient(100deg,#eafbf7,#f8fffd)!important}
#studentBackpackPanel .tomorrow-subject-card:nth-child(4n+4) .tomorrow-subject-head{background:linear-gradient(100deg,#fff6e5,#fffdf8)!important}
#studentBackpackPanel .subject-ready-badge{
  background:#fff!important;
  box-shadow:0 4px 12px rgba(30,60,100,.06)!important;
}
#studentBackpackPanel .subject-time{color:#5963ef!important;font-weight:800!important}
#studentBackpackPanel .nothing-for-subject{background:rgba(255,255,255,.72)!important}

@media(max-width:760px){
  #studentBackpackPanel.active{padding-bottom:115px!important}
  #studentBackpackPanel .backpack-topline{
    margin:12px 13px 18px!important;
    padding:17px!important;
  }
  #studentBackpackPanel #backpackTomorrowContent{gap:16px!important}
  #studentBackpackPanel .tomorrow-subject-card{border-radius:22px!important}
  #studentBackpackPanel .tomorrow-subject-head{padding:17px!important}
  #studentBackpackPanel .nothing-for-subject{padding:16px 17px!important}
}


/* ===== v98 HORARIO - SOLO CSS, sin tocar HTML ni JS ===== */
#studentSchedulePanel.active{
  background:
    radial-gradient(circle at 92% 5%,rgba(116,79,255,.11),transparent 27%),
    radial-gradient(circle at 8% 92%,rgba(28,190,171,.08),transparent 25%),
    #f5f8ff!important;
}
#studentSchedulePanel .dashboard-top{
  background:linear-gradient(105deg,#ffffff 38%,#f0edff 100%)!important;
  border-radius:0 0 24px 24px!important;
  box-shadow:0 12px 30px rgba(28,56,105,.07)!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card{
  border:0!important;
  border-radius:22px!important;
  box-shadow:0 10px 28px rgba(29,58,108,.08)!important;
  padding:18px!important;
  overflow:hidden!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card:nth-child(5n+1){
  border-left:6px solid #28a8ff!important;
  background:linear-gradient(110deg,#eef9ff 0%,#ffffff 34%)!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card:nth-child(5n+2){
  border-left:6px solid #7758f7!important;
  background:linear-gradient(110deg,#f5f1ff 0%,#ffffff 34%)!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card:nth-child(5n+3){
  border-left:6px solid #22bda9!important;
  background:linear-gradient(110deg,#eefcf9 0%,#ffffff 34%)!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card:nth-child(5n+4){
  border-left:6px solid #ffad35!important;
  background:linear-gradient(110deg,#fff7e9 0%,#ffffff 34%)!important;
}
#studentSchedulePanel #editScheduleDays .day-card.edit-day-card:nth-child(5n+5){
  border-left:6px solid #ff7185!important;
  background:linear-gradient(110deg,#fff1f4 0%,#ffffff 34%)!important;
}
#studentSchedulePanel #editScheduleDays .day-card:nth-child(5n+1) .day-kicker{color:#178be8!important}
#studentSchedulePanel #editScheduleDays .day-card:nth-child(5n+2) .day-kicker{color:#704fed!important}
#studentSchedulePanel #editScheduleDays .day-card:nth-child(5n+3) .day-kicker{color:#109e8c!important}
#studentSchedulePanel #editScheduleDays .day-card:nth-child(5n+4) .day-kicker{color:#e88a00!important}
#studentSchedulePanel #editScheduleDays .day-card:nth-child(5n+5) .day-kicker{color:#e65370!important}
#studentSchedulePanel #editScheduleDays .day-card-head{
  padding-bottom:10px!important;
  border-bottom:1px solid rgba(40,70,120,.07)!important;
}
#studentSchedulePanel #editScheduleDays .class-row{
  padding:10px!important;
  margin:10px 0!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.80)!important;
  border:1px solid rgba(220,228,240,.88)!important;
}
#studentSchedulePanel #editScheduleDays .class-row select{
  background:#fff!important;
  border:1px solid #dbe4f3!important;
  border-radius:14px!important;
  box-shadow:0 3px 10px rgba(29,58,108,.035)!important;
}
#studentSchedulePanel #editScheduleDays .add-edit-class{
  border:0!important;
  border-radius:12px!important;
  padding:10px 14px!important;
  background:linear-gradient(100deg,#1688f4,#7044f5)!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 8px 20px rgba(78,77,236,.18)!important;
}
#studentSchedulePanel #editScheduleDays .remove-row{
  background:#fff0f2!important;
  color:#c53d4f!important;
}
@media(max-width:760px){
  #studentSchedulePanel.active{padding-bottom:120px!important}
  #studentSchedulePanel #editScheduleDays .day-card.edit-day-card{
    border-radius:22px!important;
    padding:15px!important;
    margin-bottom:16px!important;
  }
  #studentSchedulePanel #editScheduleDays .day-card-head{
    align-items:flex-start!important;
    gap:10px!important;
  }
  #studentSchedulePanel #editScheduleDays .add-edit-class{
    padding:9px 11px!important;
    font-size:.78rem!important;
  }
  #studentSchedulePanel #editScheduleDays .class-row{
    padding:9px!important;
  }
}

/* v10.0 — móvil: formularios por encima de la navegación inferior */
@media(max-width:760px){
  body.student-item-modal-open .student-nav{display:none!important}
  body.student-item-modal-open{overflow:hidden!important}

  #addItemModal.modal-backdrop{
    z-index:9999!important;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
    align-items:flex-start!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  #addItemModal .modal-card{
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:20px 18px calc(30px + env(safe-area-inset-bottom))!important;
    border-radius:24px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
}