:root{
  --ivory:#FFF8E1;
  --sapphire:#002D72;
  --royal:#1E88E5;
  --royal-light:#BFE0FA;
  --gold:#F9A825;
  --ink:#0E1A33;
  --white:#FFFFFF;
  --ivory-soft:#FFFDF4;
  --line:rgba(0,45,114,.18);
  --display:'Jost', 'Century Gothic', sans-serif;
  --body:'Inter', 'Open Sauce', 'Helvetica Neue', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--sapphire);line-height:1.15}
a{color:var(--royal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

.frame-tag{
  display:inline-flex;align-items:center;gap:10px;
  border:2px solid var(--sapphire);
  padding:6px 16px;
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sapphire);
}
.frame-tag .dot{width:8px;height:8px;background:var(--gold)}

.cap{width:1em;height:1em;flex:none}

.top-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 32px;border-bottom:2px solid var(--sapphire);
  background:var(--ivory);
}
.campus-language-switcher{display:flex;align-items:center;gap:4px;margin-left:auto}
.campus-language-switcher button{border:1.5px solid var(--sapphire);background:transparent;color:var(--sapphire);font:600 11px var(--display);padding:4px 7px;cursor:pointer}
.campus-language-switcher button:hover,.campus-language-switcher button.active{background:var(--gold)}
@media (max-width:760px){.top-bar{flex-wrap:wrap}.top-bar>div{flex-wrap:wrap;justify-content:flex-end}.campus-language-switcher{order:2;width:100%;justify-content:flex-end}.campus-language-switcher button{padding:5px 7px;font-size:11px}}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:64px;width:auto;display:block}

/* ---------- Menú superior de navegación rápida (perfil) ---------- */
.profile-quicknav{
  display:flex;gap:4px;flex-wrap:wrap;padding:10px 32px;background:var(--sapphire);
  position:sticky;top:0;z-index:60;
}
.profile-quicknav a{
  font-family:var(--display);font-weight:600;font-size:13px;color:rgba(255,248,225,.8);
  text-decoration:none;padding:8px 14px;border:1.5px solid transparent;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease;
}
.profile-quicknav a:hover{color:var(--ivory);border-color:var(--gold)}
.profile-quicknav a{display:inline-flex;align-items:center;gap:7px}
.qn-icon{width:22px;height:22px;flex:none;color:var(--royal)}
@media(max-width:900px){.profile-quicknav{padding:10px 16px;overflow-x:auto}}
#profileHeaderSection,#tutorsSection,#groupsSection,#availabilitySection,#communicationsSection,#calendarSection{scroll-margin-top:70px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:15px;
  padding:12px 24px;text-decoration:none;text-align:center;
  border:2px solid var(--sapphire);
  background:transparent;color:var(--sapphire);
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--gold)}
.btn-primary{background:var(--sapphire);color:var(--ivory)}
.btn-gold{background:var(--gold);color:var(--sapphire)}
.btn-ghost{background:transparent;color:var(--sapphire)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.page{max-width:1100px;margin:0;padding:40px 0 80px;flex:1;min-width:0}

/* ---------- App shell (sidebar + contenido) ---------- */
.app-shell{display:flex;align-items:flex-start;max-width:1400px;margin:0 auto;padding:0 24px;gap:32px}
.sidebar{
  width:270px;flex:none;position:sticky;top:24px;margin-top:40px;
  display:flex;flex-direction:column;gap:20px;
}
.sidebar-user{
  border:2px solid var(--sapphire);background:var(--white);padding:16px;
  display:flex;align-items:center;gap:12px;
}
.sidebar-user b{display:block;font-family:var(--display);font-size:14.5px;color:var(--sapphire);margin-top:4px}
.sidebar-user.premium{border-color:var(--royal-light);background:linear-gradient(155deg,var(--white),#EAF6FF 160%);box-shadow:4px 4px 0 var(--royal-light)}
.avatar.avatar-sm{width:44px;height:44px;font-size:16px;flex:none;border-width:2px}
@media(max-width:980px){
  /* La causa real del desbordamiento horizontal en móvil: align-items:flex-start
     (pensado para la fila de escritorio, donde el eje transversal es vertical)
     hace que, al apilar en columna, cada bloque se dimensione por su propio
     contenido en vez de ajustarse al ancho disponible -- un grid interno ancho
     (el calendario semanal) podía entonces estirar toda la página y forzar un
     zoom alejado en el móvil en vez de quedarse dentro de la pantalla. */
  .app-shell{flex-direction:column;align-items:stretch}
  .sidebar{width:100%;position:static;margin-top:24px;flex-direction:row;flex-wrap:wrap}
  .sidebar-user{flex:1;min-width:220px}
  .balance-widget{flex:1;min-width:220px}
  /* Con app-shell en columna, .page es un flex item cuyo eje transversal es
     el ancho: "stretch" debería ajustarlo al ancho disponible, pero un
     descendiente con un ancho mínimo de contenido mayor (como el grid de 7
     columnas del calendario) puede forzarlo más ancho igualmente. overflow-x
     aquí crea un nuevo contexto de formato que sí respeta el ancho asignado,
     en vez de dejar que ese hijo estire toda la página y la aleje con zoom. */
  .page{overflow-x:hidden}
}

/* ---------- Login ---------- */
.login-wrap{
  min-height:calc(100vh - 89px);
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.login-card{
  width:100%;max-width:420px;
  border:2px solid var(--sapphire);background:var(--white);
  padding:40px 36px;
}
.login-card h1{font-size:26px;margin:16px 0 6px}
.login-card p.sub{font-size:14.5px;color:rgba(14,26,51,.75);margin-bottom:28px}

.role-toggle{display:flex;border:2px solid var(--sapphire);margin-bottom:24px}
.role-toggle button{
  flex:1;min-width:0;padding:11px 8px;background:transparent;border:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--sapphire);
  border-right:2px solid var(--sapphire);
  overflow-wrap:break-word;hyphens:auto;
}
@media(max-width:400px){.role-toggle button{font-size:12px;padding:10px 4px}}
.role-toggle button:last-child{border-right:none}
.role-toggle button.active{background:var(--sapphire);color:var(--ivory)}

.field{margin-bottom:18px}
.field label{display:block;font-family:var(--display);font-size:13px;font-weight:600;color:var(--sapphire);margin-bottom:6px;letter-spacing:.02em}
.field input{
  width:100%;padding:12px 14px;border:2px solid var(--line);background:var(--ivory-soft);
  font-family:var(--body);font-size:15px;color:var(--ink);
}
.field input:focus{border-color:var(--royal);outline:none}

.login-card .btn{width:100%;margin-top:6px}
.demo-hint{
  margin-top:22px;padding:14px 16px;border:1.5px dashed var(--line);
  font-size:13px;color:rgba(14,26,51,.75);
}
.demo-hint b{color:var(--sapphire)}
.error-box{
  display:none;margin-bottom:18px;padding:12px 14px;
  border:2px solid #c0392b;background:#fdecea;color:#c0392b;font-size:14px;
}
.error-box.show{display:block}

/* ---------- Perfil ---------- */
.profile-header{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  border:2px solid var(--sapphire);background:var(--white);padding:28px;margin-bottom:32px;
}
.avatar-wrap{position:relative;width:110px;height:110px;flex:none}
.avatar{
  width:110px;height:110px;border:3px solid var(--sapphire);object-fit:cover;
  background:var(--ivory-soft);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:36px;font-weight:700;color:var(--sapphire);
}
.avatar-edit{
  position:absolute;bottom:-6px;right:-6px;
  width:34px;height:34px;border:2px solid var(--sapphire);background:var(--gold);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.avatar-edit input{display:none}
.avatar-wrap.avatar-wrap-sm{position:relative;width:44px;height:44px;flex:none}
.avatar-edit.avatar-edit-sm{
  position:absolute;bottom:-4px;right:-4px;
  width:20px;height:20px;border:1.5px solid var(--sapphire);background:var(--gold);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.profile-info h2{font-size:24px;margin-bottom:6px}
.profile-info .role-pill{
  display:inline-block;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sapphire);
  border:1.5px solid var(--sapphire);padding:3px 10px;margin-bottom:10px;
}
.profile-info p.desc{font-size:14.5px;color:rgba(14,26,51,.82);max-width:60ch}
.profile-actions{display:flex;flex-direction:column;gap:10px}

.edit-form{
  border:2px solid var(--sapphire);background:var(--white);padding:26px 28px;margin-bottom:32px;
  display:none;
}
.edit-form.open{display:block}
.edit-form h3{font-size:18px;margin-bottom:16px}
.edit-form textarea{
  width:100%;padding:12px 14px;border:2px solid var(--line);background:var(--ivory-soft);
  font-family:var(--body);font-size:14.5px;color:var(--ink);resize:vertical;min-height:80px;
}
.edit-form .field input{margin-bottom:0}
.edit-form .actions{display:flex;gap:12px;margin-top:18px}

.calendar-tabs{display:flex;gap:10px;margin-bottom:20px}
.calendar-tabs button{
  border:2px solid var(--sapphire);background:transparent;color:var(--sapphire);
  font-family:var(--display);font-weight:600;font-size:14px;padding:9px 20px;cursor:pointer;
}
.calendar-tabs button.active{background:var(--sapphire);color:var(--ivory)}

.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.calendar-nav .label{font-family:var(--display);font-weight:600;color:var(--sapphire);font-size:16px}
.calendar-nav button{
  border:2px solid var(--sapphire);background:var(--white);color:var(--sapphire);
  width:34px;height:34px;cursor:pointer;font-family:var(--display);font-weight:700;
}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-col{border:2px solid var(--sapphire);background:var(--white);min-height:160px;display:flex;flex-direction:column}
.day-col .day-head{
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--sapphire);
  text-align:center;padding:8px 4px;border-bottom:2px solid var(--sapphire);
  text-transform:uppercase;letter-spacing:.04em;
}
.day-col .day-head.today{background:var(--gold)}
.day-col .day-events{padding:8px;display:flex;flex-direction:column;gap:6px;flex:1}
.event-chip{
  border:1.5px solid var(--sapphire);background:var(--ivory-soft);padding:6px 8px;font-size:12px;
}
.event-chip b{display:block;font-family:var(--display);font-size:11.5px;color:var(--sapphire)}
.event-chip span{color:rgba(14,26,51,.75)}
.event-chip-clickable{cursor:pointer;transition:transform .1s ease}
.event-chip-clickable:hover{transform:translateY(-1px);box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.empty-note{font-size:12px;color:rgba(14,26,51,.45);padding:10px 8px}

.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.month-dow{
  font-family:var(--display);font-weight:600;font-size:12px;color:var(--sapphire);
  text-align:center;padding:6px 0;text-transform:uppercase;letter-spacing:.04em;
}
.month-cell{
  border:1.5px solid var(--line);background:var(--white);min-height:88px;padding:6px;
  display:flex;flex-direction:column;gap:4px;
}
.month-cell.other-month{opacity:.35}
.month-cell.today{border-color:var(--gold);border-width:2px}
.month-cell .date-num{font-family:var(--display);font-weight:600;font-size:13px;color:var(--sapphire)}
.month-cell .mini-event{font-size:10.5px;background:var(--ivory-soft);border:1px solid var(--sapphire);padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.month-cell .more{font-size:10px;color:rgba(14,26,51,.55)}

.view{display:none}
.view.active{display:block}

.toast{
  position:fixed;bottom:24px;right:24px;z-index:300;
  border:2px solid var(--sapphire);background:var(--white);color:var(--sapphire);
  padding:14px 20px;font-family:var(--display);font-weight:600;font-size:14px;
  box-shadow:4px 4px 0 var(--gold);opacity:0;transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;pointer-events:none;
}
.toast.show{opacity:1;transform:none}

@media(max-width:820px){
  .profile-header{grid-template-columns:auto 1fr;}
  .profile-actions{grid-column:1 / -1;flex-direction:row}
  /* max-width:100% es lo que de verdad evita el desbordamiento: sin él, un
     grid de 7 columnas con un mínimo de 90px cada una (630px+) obliga al
     navegador a ensanchar el viewport de diseño entero para "que quepa",
     dejando toda la página con zoom alejado en el móvil en vez de
     desplazarse solo el propio calendario. */
  .week-grid{grid-template-columns:repeat(7,minmax(90px,1fr));overflow-x:auto;max-width:100%}
  .month-grid{overflow-x:auto;max-width:100%}
}

/* ---------- Saldo ---------- */
.balance-card{border:2px solid var(--sapphire);background:var(--white);padding:24px 28px;margin-bottom:32px}
.balance-card h3{font-size:18px;margin-bottom:16px}
.balance-row{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:18px}
.balance-unit{display:flex;flex-direction:column}
.balance-unit b{font-family:var(--display);font-size:34px;color:var(--sapphire)}
.balance-unit span{font-size:13px;color:rgba(14,26,51,.7)}
.balance-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Tutores / reserva ---------- */
.tutors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:20px}
.tutor-card{
  border:2px solid var(--sapphire);background:var(--white);padding:16px;
  display:flex;align-items:center;gap:12px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.tutor-card:hover{transform:translateY(-3px);box-shadow:4px 4px 0 var(--gold)}
.tutor-card > div{flex:1;display:flex;flex-direction:column;gap:4px}
.tutor-card b{font-family:var(--display);font-size:15px}
.tutor-card span{font-size:12.5px;color:rgba(14,26,51,.7)}
.subject-pill{
  display:inline-block;padding:2px 9px;font-size:11px;font-family:var(--display);font-weight:600;
  color:var(--sapphire);border:1px solid rgba(0,45,114,.25);width:fit-content;
}
.tutor-avatar{
  width:48px;height:48px;flex:none;border:2px solid var(--sapphire);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:var(--sapphire);background:var(--ivory-soft);
  overflow:hidden;
}
.tutor-avatar img{width:100%;height:100%;object-fit:cover}
.tutor-schedule-panel{border:2px solid var(--sapphire);background:var(--ivory-soft);padding:20px 24px;margin-bottom:32px}
.tutor-schedule-panel h4{font-size:16px;margin-bottom:14px}

/* ---------- Horario del profesor: columnas por día de la semana ---------- */
.gap-weekday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.gap-day-col{border:2px solid var(--sapphire);background:var(--white);min-height:100px;display:flex;flex-direction:column}
.gap-day-col .gap-day-head{
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--sapphire);
  text-align:center;padding:8px 4px;border-bottom:2px solid var(--sapphire);text-transform:uppercase;
}
.gap-day-col .gap-day-body{padding:8px;display:flex;flex-direction:column;gap:8px;flex:1}
.gap-entry{border:1.5px solid var(--sapphire);background:var(--ivory-soft);padding:8px}
.gap-entry .gap-date{font-family:var(--display);font-weight:600;font-size:11.5px;color:var(--sapphire);display:block;margin-bottom:4px}
.gap-entry .gap-range{font-size:11px;color:rgba(14,26,51,.75);display:block;margin-bottom:6px}
.gap-durations{display:flex;gap:5px;flex-wrap:wrap}
.duration-btn{
  border:1.5px solid var(--sapphire);background:var(--white);color:var(--sapphire);
  padding:5px 8px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--display);
}
.duration-btn:hover{background:var(--gold)}
@media(max-width:900px){.gap-weekday-grid{grid-template-columns:repeat(7,minmax(120px,1fr));overflow-x:auto}}

/* ---------- Saldo (sidebar) ---------- */
.balance-widget{border:2px solid var(--sapphire);background:var(--white);padding:18px}
.balance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.balance-label{font-family:var(--display);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--sapphire)}
.balance-icon{width:34px;height:34px;flex:none;color:var(--sapphire);opacity:.85}
.balance-figure{margin:10px 0}
.balance-figure b{font-family:var(--display);font-size:36px;display:block;line-height:1}
.balance-figure span{font-size:12px;color:rgba(14,26,51,.65)}
.balance-note{font-size:12.5px;color:rgba(14,26,51,.7);margin-bottom:10px}
.balance-widget.balance-green{border-color:#2e7d32;background:#eef7ee}
.balance-widget.balance-green .balance-figure b,.balance-widget.balance-green .balance-icon{color:#2e7d32}
.balance-widget.balance-orange{border-color:#e08a00;background:#fff5e6}
.balance-widget.balance-orange .balance-figure b,.balance-widget.balance-orange .balance-icon{color:#e08a00}
.balance-widget.balance-red{border-color:#c0392b;background:#fdecea}
.balance-widget.balance-red .balance-figure b,.balance-widget.balance-red .balance-icon{color:#c0392b}
.balance-widget.plan-total{
  position:relative;border:2px solid var(--royal-light);background:linear-gradient(155deg,#EAF6FF,var(--royal-light) 140%);
  box-shadow:5px 5px 0 var(--royal-light);
}
.balance-widget.plan-total .balance-icon{color:var(--royal)}
.balance-widget.plan-total .balance-label{color:var(--sapphire)}
.premium-badge{
  position:absolute;top:-11px;right:14px;background:var(--sapphire);color:var(--ivory);
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.05em;
  padding:3px 10px;border:1.5px solid var(--sapphire);
}
.infinity-figure{font-size:44px!important;color:var(--royal)}
.plan-total-bar{height:8px;background:var(--white);border:1px solid var(--royal);margin-top:6px}
.plan-total-bar-fill{height:100%;background:var(--royal)}

/* ---------- Buzón de comunicaciones (sidebar) ---------- */
.inbox-widget{border:2px solid var(--sapphire);background:var(--white);padding:18px}
.inbox-badge{
  font-family:var(--display);font-weight:700;font-size:11px;
  background:#c0392b;color:var(--white);border-radius:50%;
  min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.inbox-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:340px;overflow-y:auto}
.inbox-item{border:1.5px solid var(--line);background:var(--ivory-soft);padding:9px 10px;cursor:pointer;font-size:12.5px}
.inbox-item.unread{border-color:var(--sapphire);background:var(--white)}
.inbox-item.pinned{border-color:var(--gold);background:#fffaf0;border-width:2px}
.inbox-item.pinned b{color:var(--sapphire)}
.inbox-item .note-link{color:var(--royal);text-decoration:underline}
.inbox-item b{display:block;font-family:var(--display);font-size:12px;color:var(--sapphire);margin-bottom:3px}
.inbox-item span{color:rgba(14,26,51,.65);display:block;font-size:11.5px;line-height:1.4}
.inbox-item time{display:block;font-size:10px;color:rgba(14,26,51,.45);margin-top:4px}

/* ---------- Modales ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(14,26,51,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-box{
  background:var(--white);border:2px solid var(--sapphire);max-width:520px;width:100%;
  padding:32px;position:relative;max-height:88vh;overflow-y:auto;
}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:2px solid var(--sapphire);
  background:var(--white);cursor:pointer;font-size:18px;line-height:1;color:var(--sapphire);
}
.modal-box h3{font-size:20px;margin-bottom:14px}
.modal-summary{font-size:14px;color:rgba(14,26,51,.8);margin-bottom:18px}
.modal-box .field{margin-bottom:16px}
.modal-box .field textarea{
  width:100%;padding:10px 12px;border:2px solid var(--line);background:var(--ivory-soft);
  font-family:var(--body);font-size:14px;min-height:80px;
}
.modal-box .field select,.modal-box .field input[type="file"]{
  width:100%;padding:9px 10px;border:2px solid var(--line);background:var(--ivory-soft);font-size:14px;
}
.note-attachment{display:block;font-size:13.5px;margin-bottom:6px}
.file-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--sapphire);background:var(--ivory-soft);
  padding:5px 6px 5px 10px;font-size:12.5px;
}
.file-chip button{border:none;background:transparent;color:#c0392b;cursor:pointer;font-weight:700;font-size:14px;line-height:1;padding:2px 4px}

/* ---------- Disponibilidad del profesor ---------- */
.section-block{margin-bottom:40px}
.availability-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.availability-row select,.availability-row input[type="time"]{
  padding:9px 10px;border:2px solid var(--line);background:var(--ivory-soft);font-family:var(--body);font-size:14px;color:var(--ink);
}
.availability-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}

.emergency-panel{margin-top:24px;padding-top:20px;border-top:1.5px dashed var(--line)}
.emergency-panel #emergencyForm{margin-top:14px;max-width:560px}
.emergency-panel textarea{
  width:100%;padding:10px 12px;border:2px solid var(--line);background:var(--ivory-soft);
  font-family:var(--body);font-size:14px;min-height:80px;margin-top:4px;
}

.my-requests-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.request-item{border:1.5px solid var(--line);background:var(--white);padding:10px 14px;font-size:13px}
.request-item b{font-family:var(--display);color:var(--sapphire);display:block;margin-bottom:3px;font-size:12.5px}
.request-item .req-status{
  font-family:var(--display);font-weight:600;font-size:10.5px;text-transform:uppercase;
  padding:2px 8px;border:1.5px solid;margin-left:8px;
}
.req-status.pendiente{color:#e08a00;border-color:#e08a00}
.req-status.aceptada,.req-status.aceptado{color:#2e7d32;border-color:#2e7d32}
.req-status.rechazada,.req-status.rechazado{color:#c0392b;border-color:#c0392b}
.req-status.entrevista_agendada{color:var(--royal);border-color:var(--royal)}
.request-item .req-note{color:rgba(14,26,51,.7);margin-top:4px;font-size:12.5px}

#communicationsSection .field{max-width:560px;margin-bottom:16px}
#communicationsSection select,#communicationsSection textarea{
  width:100%;padding:10px 12px;border:2px solid var(--line);background:var(--ivory-soft);font-size:14px;
}
#communicationsSection textarea{min-height:90px;margin-top:4px}
#communicationsSection label{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--sapphire);margin-bottom:5px}

/* ---------- Sidebar derecho del alumno (hoy / comentarios / deberes) ---------- */
.sidebar-right{
  width:270px;flex:none;position:sticky;top:24px;margin-top:40px;
  display:flex;flex-direction:column;gap:20px;
}
.notes-widget{border:2px solid var(--sapphire);background:var(--white);padding:16px 18px}
.notes-widget-head{
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--sapphire);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}
.today-event-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.today-event-row:last-child{border-bottom:none}
.today-event-row b{color:var(--sapphire);font-family:var(--display);font-size:12.5px}
.today-event-row span{color:rgba(14,26,51,.6);white-space:nowrap}
.sidebox-note{font-size:13px;color:var(--ink);line-height:1.5}
.sidebox-meta{display:block;font-size:11px;color:rgba(14,26,51,.5);margin-top:8px}
@media(max-width:1300px){.sidebar-right{display:none!important}}

/* ---------- Mis grupos (profesor): asignar deberes ---------- */
.group-card{border:2px solid var(--sapphire);background:var(--white);padding:16px 20px;margin-bottom:14px;transition:transform .15s ease,box-shadow .15s ease}
.group-card:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--gold)}
.group-card b{font-family:var(--display);color:var(--sapphire);font-size:15px;display:block;margin-bottom:4px}
.group-card .group-meta{font-size:12.5px;color:rgba(14,26,51,.6);margin-bottom:10px}
.group-card textarea{
  width:100%;min-height:70px;padding:9px 11px;border:2px solid var(--line);background:var(--ivory-soft);
  font-family:var(--body);font-size:13.5px;margin-bottom:10px;
}
.group-card .current-homework{font-size:12.5px;color:rgba(14,26,51,.65);margin-bottom:10px;padding:8px 10px;background:var(--ivory-soft);border-left:3px solid var(--gold)}

/* ---------- Chat ---------- */
.chat-layout{display:grid;grid-template-columns:220px 1fr;gap:0;border:2px solid var(--sapphire);min-height:420px}
.chat-contacts{border-right:2px solid var(--sapphire);background:var(--ivory-soft);overflow-y:auto;max-height:520px}
.chat-contact-item{
  display:block;width:100%;text-align:left;padding:12px 16px;border:none;border-bottom:1px solid var(--line);
  background:transparent;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--ink);
}
.chat-contact-item b{display:block;font-family:var(--display);font-size:13px;color:var(--sapphire)}
.chat-contact-item.active{background:var(--sapphire);color:var(--white)}
.chat-contact-item.active b{color:var(--white)}
.chat-contact-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(14,26,51,.45);padding:10px 16px 4px}
.chat-panel{display:flex;flex-direction:column;min-height:420px}
.chat-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;max-height:460px}
.chat-bubble{max-width:70%;padding:9px 13px;font-size:13.5px;line-height:1.45;border:1.5px solid var(--sapphire)}
.chat-bubble .chat-sender{display:block;font-family:var(--display);font-size:10.5px;font-weight:600;color:var(--sapphire);margin-bottom:3px}
.chat-bubble.mine{align-self:flex-end;background:var(--sapphire);color:var(--ivory);border-color:var(--sapphire)}
.chat-bubble.mine .chat-sender{color:rgba(255,248,225,.75)}
.chat-bubble.theirs{align-self:flex-start;background:var(--white)}
.chat-bubble .chat-time{display:block;font-size:10px;opacity:.6;margin-top:4px}
.chat-input-row{display:flex;gap:10px;padding:14px 18px;border-top:2px solid var(--sapphire)}
.chat-input-row input{
  flex:1;padding:10px 12px;border:2px solid var(--line);background:var(--ivory-soft);font-family:var(--body);font-size:14px;
}
.chat-contact-badge{
  display:inline-block;margin-left:6px;background:#c0392b;color:var(--white);border-radius:10px;
  font-family:var(--display);font-size:10.5px;font-weight:700;padding:1px 7px;
}

/* ---------- Widget flotante de mensajes ---------- */
.chat-widget{position:fixed;bottom:20px;right:20px;z-index:450}
.chat-widget-toggle{
  display:flex;align-items:center;gap:8px;border:2px solid var(--sapphire);background:var(--sapphire);color:var(--ivory);
  font-family:var(--display);font-weight:600;font-size:14px;padding:12px 20px;cursor:pointer;
  box-shadow:4px 4px 0 var(--gold);
}
.chat-widget-badge{
  background:#c0392b;color:var(--white);border-radius:10px;font-size:11px;font-weight:700;padding:1px 8px;
}
.chat-widget-panel{
  position:absolute;bottom:64px;right:0;width:480px;max-width:calc(100vw - 40px);
  background:var(--ivory);border:2px solid var(--sapphire);box-shadow:6px 6px 0 var(--gold);
  display:flex;flex-direction:column;
}
.chat-widget-header{
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:var(--sapphire);color:var(--ivory);
}
.chat-widget-header b{font-family:var(--display);font-size:14.5px}
.chat-widget-header button{background:none;border:none;color:var(--ivory);font-size:20px;cursor:pointer;line-height:1}
.chat-widget-panel .chat-layout{border:none;grid-template-columns:150px 1fr;min-height:380px}
.chat-widget-panel .chat-contacts{max-height:380px}
.chat-widget-panel .chat-messages{max-height:280px}
@media(max-width:560px){.chat-widget-panel{width:calc(100vw - 40px)}.chat-widget-panel .chat-layout{grid-template-columns:110px 1fr}}
@media(max-width:640px){
  .chat-widget{bottom:14px;right:14px}
  .chat-widget-toggle{
    position:relative;width:52px;height:52px;padding:0;border-radius:50%;gap:0;justify-content:center;font-size:22px;
  }
  .chat-widget-toggle span{display:none}
  .chat-widget-badge{position:absolute;top:-4px;right:-4px}
}

/* ---------- Confeti (celebración Plan Total) ---------- */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:550;overflow:hidden}
.confetti-piece{
  position:fixed;top:-20px;width:9px;height:14px;opacity:.9;
  animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards;
}
@keyframes confetti-fall{
  to{transform:translateY(100vh) rotate(720deg);opacity:.4}
}
@media(prefers-reduced-motion:reduce){.confetti-piece{display:none}}