/* Escuela de Detectives - interfaz profesional responsive */
:root{
  --navy:#061b3d;
  --navy-2:#0a2c63;
  --blue:#1555a6;
  --gold:#e4ad1c;
  --gold-2:#f2c94c;
  --ink:#10234b;
  --muted:#64748b;
  --surface:#ffffff;
  --bg:#f4f7fb;
  --line:#dfe7f2;
  --success:#22a447;
  --warning:#f28c18;
  --danger:#d52b38;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none}
.site-header,.student-header{background:linear-gradient(120deg,#04152f,#082d61);color:#fff;box-shadow:0 4px 20px rgba(4,21,47,.18)}
.brand-lockup{display:flex;align-items:center;gap:12px;color:#fff}
.brand-logo{width:62px;height:62px;object-fit:contain;flex:0 0 auto}
.brand-title{font-size:clamp(16px,2vw,24px);font-weight:800;letter-spacing:.3px;line-height:1.05}
.brand-subtitle{font-size:11px;letter-spacing:2px;color:#f5ca39;font-weight:700;margin-top:5px}
.header-caption{color:#dbe7ff;font-size:14px}
.header-caption i{color:var(--gold-2);font-size:20px}
.login-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 20% 10%,#e7eef9 0,#f7f9fc 40%,#eef3f9 100%)}
.login-main{flex:1;display:flex;align-items:center}
.login-intro{max-width:680px;padding:25px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#3865a3}
.login-intro h1{font-size:clamp(34px,5vw,58px);font-weight:800;color:var(--navy);margin:10px 0}
.login-intro p{font-size:18px;line-height:1.7;color:#52647e;max-width:620px}
.login-highlights{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.login-highlights span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;box-shadow:0 8px 25px rgba(20,44,80,.06);font-weight:600}
.login-highlights i{color:var(--blue)}
.login-card{background:#fff;border:1px solid #e3eaf4;border-radius:22px;padding:28px;box-shadow:0 20px 60px rgba(17,42,78,.14)}
.login-card-head{display:flex;align-items:center;gap:14px;margin-bottom:25px}
.login-icon,.error-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#0a2c63,#1c5eb7);color:#fff;font-size:28px;box-shadow:0 10px 25px rgba(15,76,155,.2)}
.error-icon{margin:0 auto 15px;background:#fbe7e9;color:var(--danger)}
.login-card h2{margin:3px 0 0;font-size:27px;font-weight:800;color:var(--navy)}
.form-label{font-weight:700;color:var(--ink)}
.input-group-text{background:#f6f9fd;border-color:#d9e3ef;color:#245494}
.form-control,.input-group-text,.password-toggle{border-color:#d9e3ef}
.form-control:focus{border-color:#4b82c7;box-shadow:0 0 0 .2rem rgba(21,85,166,.12)}
.btn-brand{background:linear-gradient(135deg,#0b326e,#155eb5);border:0;color:#fff;border-radius:12px;font-weight:800;padding:12px 18px;box-shadow:0 9px 20px rgba(21,85,166,.2)}
.btn-brand:hover{background:linear-gradient(135deg,#082858,#104b91);color:#fff}
.login-note{margin-top:18px;padding:12px 14px;background:#f6f9fd;border-radius:12px;color:#64748b;font-size:12px}
.site-footer{background:#061b3d;color:#c9d7ee;font-size:12px}
.student-page{padding-bottom:88px;background:linear-gradient(180deg,#f6f8fc,#eef3f9)}
.student-header{position:sticky;top:0;z-index:1000}
.student-header .brand-logo{width:52px;height:52px}
.student-top-actions{height:52px}
.top-link{border:0;background:transparent;color:#fff;padding:15px 13px;font-weight:700;border-bottom:3px solid transparent}
.top-link:hover,.top-link.active{color:#fff;border-bottom-color:var(--gold-2)}
.mobile-menu-btn{color:#fff;font-size:28px}
.student-main{max-width:1450px;margin:0 auto;padding-top:22px}
.welcome-date i{font-size:35px;color:#0b2d64}
.welcome-date span{display:block;color:#64748b;font-size:12px}
.welcome-date strong{display:block;color:var(--ink)}
.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin:15px 8px 20px}
.section-heading h2{font-size:clamp(24px,3vw,36px);font-weight:800;margin:4px 0;color:var(--navy)}
.section-heading h2 i{color:var(--blue)}
.section-heading p{margin:0;color:#6a7890}
.section-heading.compact{align-items:center}
.overall-progress{width:min(360px,100%)}
.overall-progress span{font-size:12px;color:#64748b}.overall-progress strong{font-size:20px}
.progress{height:9px;background:#dce4ef;border-radius:99px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,#20ad49,#2bd45c);border-radius:99px}
.course-stat-card{height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:14px;position:relative;overflow:hidden;box-shadow:0 9px 28px rgba(20,45,82,.07);transition:.2s}
.course-stat-card:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(20,45,82,.12)}
.course-stat-icon,.assignment-icon{width:68px;height:68px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:32px;background:#082b63}
.course-stat-main{min-width:0;flex:1;padding-right:24px}
.course-stat-main h3{font-size:17px;line-height:1.25;font-weight:800;margin:0 0 10px;color:var(--ink)}
.course-meta{font-size:12px;color:#53657e;margin:5px 0}.course-meta i{margin-right:6px}
.course-progress-row{display:flex;align-items:center;gap:8px;margin-top:13px}.course-progress-row .progress{flex:1}.course-progress-row strong{font-size:14px}
.course-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#0d448e;font-size:24px}
.tone-0 .course-stat-icon,.assignment-icon.tone-0{background:#092e67}.tone-1 .course-stat-icon,.assignment-icon.tone-1{background:#0b6330}.tone-2 .course-stat-icon,.assignment-icon.tone-2{background:#9c1734}.tone-3 .course-stat-icon,.assignment-icon.tone-3{background:#4d2c8f}.tone-4 .course-stat-icon,.assignment-icon.tone-4{background:#9a5411}.tone-5 .course-stat-icon,.assignment-icon.tone-5{background:#0a708c}
.tone-1 .course-progress-row .progress-bar{background:#f39b18}.tone-2 .course-progress-row .progress-bar{background:#3477d3}.tone-3 .course-progress-row .progress-bar{background:#23a84b}.tone-4 .course-progress-row .progress-bar{background:#ef941b}.tone-5 .course-progress-row .progress-bar{background:#1ca7bc}
.motivational-banner{margin:25px 0;padding:18px 24px;border-radius:18px;background:linear-gradient(100deg,#e8f1ff,#fff);display:flex;gap:15px;align-items:center;color:#193a75;border:1px solid #d8e5f7}.motivational-banner i{font-size:34px}.motivational-banner span{font-size:16px;font-style:italic;flex:1}.motivational-banner strong{font-size:20px;color:#0f55ae}
.app-view{display:none}.active-view{display:block}
.professional-accordion .accordion-item{border:1px solid var(--line);border-radius:16px!important;margin-bottom:12px;overflow:hidden;background:#fff;box-shadow:0 8px 25px rgba(20,45,82,.06)}
.professional-accordion .accordion-button{padding:13px 16px;gap:12px;font-weight:800;color:#fff;background:linear-gradient(100deg,#062454,#1555a6);box-shadow:none}
.professional-accordion .accordion-button:not(.collapsed){color:#fff;background:linear-gradient(100deg,#062454,#1555a6)}
.professional-accordion .accordion-button::after{filter:brightness(0) invert(1)}
.assignment-icon{width:43px;height:43px;border-radius:11px;font-size:20px}
.assignment-title{flex:1}.assignment-count{font-size:12px;font-weight:700;opacity:.9;margin-right:10px}
.lesson-list{background:#fff}
.lesson-row{display:flex;align-items:center;gap:15px;padding:13px 15px;border-bottom:1px solid #e8edf4}.lesson-row:last-child{border-bottom:0}
.lesson-number{width:58px;font-weight:800;color:#174b8d}.lesson-info{flex:1;min-width:0}.lesson-info strong{display:block;font-size:14px}.lesson-info small{display:block;color:#718198;margin-top:3px}.lesson-action{min-width:108px;text-align:right}
.btn-material{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;padding:8px 12px;color:#fff;font-size:12px;font-weight:800;border:0}.btn-material:hover{color:#fff;filter:brightness(.95)}
.btn-pdf{background:#1555a6}.btn-video{background:#22a447}.btn-exam{background:#f28c18}.btn-disabled{background:#aeb7c5}
.mini-course{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;align-items:center;gap:15px}.mini-course strong{flex:1}.mini-course span{font-size:12px;color:#718198}.mini-course b{color:#1555a6}
.profile-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;gap:18px;align-items:center;max-width:800px}.profile-icon{width:65px;height:65px;border-radius:50%;background:#eaf2ff;color:#1555a6;display:grid;place-items:center;font-size:30px}.profile-card span,.profile-card small{display:block;color:#718198;font-size:12px}.profile-card strong{display:block;font-size:20px;margin:4px 0}
.empty-state{background:#fff;border:1px dashed #cbd7e6;border-radius:16px;padding:45px 20px;text-align:center;color:#718198}.empty-state i{font-size:38px;color:#8ca1ba;display:block;margin-bottom:10px}.empty-state h3{font-size:18px;color:var(--ink);font-weight:800}.empty-state.small{padding:25px}
.quick-nav{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:rgba(4,21,47,.98);box-shadow:0 -8px 30px rgba(3,18,42,.2)}
.quick-nav-inner{max-width:1450px;margin:auto;display:grid;grid-template-columns:repeat(7,1fr)}
.quick-link{min-height:70px;border:0;border-right:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:12px;font-weight:700}.quick-link:last-child{border-right:0}.quick-link i{font-size:23px}.quick-link.active{color:#ffd32e}.quick-link:hover{color:#ffd32e}.quick-exit{color:#ff5260}
.mobile-menu{background:#f7f9fc}.mobile-menu .offcanvas-header{background:#061b3d;color:#fff}.mobile-menu .brand-logo{width:48px;height:48px}.mobile-menu-link{display:flex;width:100%;padding:14px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700;gap:12px;text-align:left}.mobile-menu-link i{color:#1555a6;font-size:20px}
@media(max-width:767.98px){
  .site-header .brand-logo,.student-header .brand-logo{width:48px;height:48px}.brand-title{font-size:14px}.brand-subtitle{font-size:9px;letter-spacing:1.4px}
  .login-intro{padding:10px 4px;text-align:center}.login-intro h1{font-size:35px}.login-intro p{font-size:15px}.login-highlights{justify-content:center}.login-highlights span{font-size:12px}
  .login-card{padding:20px;border-radius:18px}
    .section-heading{display:block;margin:12px 4px 16px}.overall-progress{margin-top:15px}
  .course-stat-card{padding:14px}.course-stat-icon{width:58px;height:58px;font-size:27px}.course-stat-main h3{font-size:15px}
  .motivational-banner{display:block;text-align:center}.motivational-banner i{display:block;margin-bottom:6px}.motivational-banner span{display:block;font-size:13px}.motivational-banner strong{display:block;margin-top:5px}
  .assignment-count{display:none}.lesson-row{padding:12px 10px;gap:10px}.lesson-number{width:48px;font-size:12px}.lesson-info strong{font-size:12px}.lesson-info small{font-size:10px}.lesson-action{min-width:82px}.btn-material{padding:7px 8px;font-size:10px}
  .quick-nav-inner{grid-template-columns:repeat(7,1fr)}.quick-link{min-height:64px;font-size:9px;gap:2px}.quick-link i{font-size:18px}
  .student-main{padding-bottom:80px}
}
@media(min-width:768px) and (max-width:1199.98px){.course-stat-main h3{font-size:15px}}

/* ============================================================
   BIBLIOTECA VIRTUAL INTEGRADA AL PANEL
   ============================================================ */
.library-total-badge{
  min-width:155px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 15px;
  border:1px solid #d7e5f5;
  border-radius:14px;
  background:#fff;
  color:var(--navy-2);
  box-shadow:0 7px 20px rgba(20,45,82,.06);
}
.library-total-badge i{font-size:20px;color:var(--blue)}
.library-total-badge strong{font-size:19px}
.library-total-badge span{font-size:12px;color:var(--muted);font-weight:700}

.library-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 10px 32px rgba(20,45,82,.07);
  overflow:hidden;
}
.library-toolbar{
  padding:18px 18px 10px;
  background:linear-gradient(180deg,#fbfdff,#fff);
}
.library-search{
  position:relative;
}
.library-search > i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:#6e86a2;
  font-size:20px;
}
.library-search input{
  width:100%;
  height:56px;
  border:1px solid var(--line);
  border-radius:13px;
  padding:0 52px 0 47px;
  font-size:15px;
  color:var(--ink);
  outline:none;
  box-shadow:0 4px 14px rgba(8,47,89,.04);
}
.library-search input:focus{
  border-color:#4f8fd0;
  box-shadow:0 0 0 .2rem rgba(23,97,176,.10);
}
.library-search button{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#edf3fa;
  color:#526a84;
  display:none;
}
.library-search button.show{display:grid;place-items:center}
.library-help{
  margin:6px 3px 0;
  color:#718198;
  font-size:11px;
}
.library-help i{color:var(--blue);margin-right:4px}

.library-alphabet{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:8px 18px 15px;
  scrollbar-width:thin;
}
.library-letter{
  flex:0 0 auto;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border:1px solid var(--line);
  background:#fff;
  color:#42576c;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
}
.library-letter:hover{
  border-color:#7aa6d3;
  background:#f3f8fe;
}
.library-letter.active{
  background:var(--navy-2);
  color:#fff;
  border-color:var(--navy-2);
}

.library-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#f8fbff;
}
.library-list-header h3{
  margin:2px 0 0;
  color:var(--navy);
  font-size:16px;
  font-weight:900;
}
.library-list-header h3 i{color:var(--blue);margin-right:5px}
.library-result-count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  color:var(--blue);
  background:#eaf3ff;
  padding:6px 10px;
  border-radius:999px;
}
.library-document-list{
  max-height:calc(100vh - 390px);
  min-height:300px;
  overflow-y:auto;
  background:#fff;
}
.library-document-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-bottom:1px solid #edf1f5;
  transition:background .15s ease;
}
.library-document-row:last-child{border-bottom:0}
.library-document-row:hover{background:#f8fbff}
.library-document-icon{
  width:36px;
  height:36px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#fff0f0;
  color:#e32932;
  font-size:19px;
}
.library-document-info{min-width:0}
.library-document-info strong{
  display:block;
  font-size:13px;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.library-document-info small{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#8a99a8;
}
.library-open-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #cbdced;
  background:#fff;
  color:#1260b1;
  border-radius:8px;
  padding:7px 11px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.library-open-button:hover{
  background:#1260b1;
  border-color:#1260b1;
  color:#fff;
}
.library-no-results{
  padding:45px 20px;
  text-align:center;
  color:#7c8c9c;
}
.library-no-results i{
  font-size:40px;
  color:#a8b8c8;
}
.library-no-results h3{
  margin:12px 0 5px;
  font-size:17px;
  color:#486078;
  font-weight:800;
}
.library-no-results p{margin:0;font-size:13px}

/* Espacio real para que la navegación inferior nunca tape el contenido. */
.student-main{
  padding-bottom:125px !important;
}
.app-view{
  scroll-margin-bottom:125px;
}

@media(max-width:767.98px){
  .library-total-badge{
    margin-top:12px;
    width:max-content;
    min-width:0;
  }
  .library-panel{border-radius:16px}
  .library-toolbar{padding:13px 12px 8px}
  .library-search input{height:52px;font-size:14px}
  .library-help{font-size:10px}
  .library-alphabet{
    gap:5px;
    padding:6px 12px 11px;
  }
  .library-letter{
    min-width:32px;
    height:32px;
    font-size:11px;
    border-radius:7px;
  }
  .library-list-header{
    padding:10px 12px;
  }
  .library-list-header h3{font-size:13px}
  .library-result-count{font-size:10px;padding:5px 8px}
  .library-document-list{
    max-height:none;
    min-height:0;
  }
  .library-document-row{
    grid-template-columns:32px minmax(0,1fr) auto;
    gap:8px;
    padding:9px 10px;
  }
  .library-document-icon{
    width:30px;
    height:30px;
    font-size:16px;
  }
  .library-document-info strong{font-size:11.5px}
  .library-document-info small{font-size:9px}
  .library-open-button{
    padding:6px 8px;
    font-size:10px;
  }
  .student-main{
    padding-bottom:105px !important;
  }
  .app-view{
    scroll-margin-bottom:105px;
  }
}

/* ============================================================
   AJUSTE DEFINITIVO - ÁREA ACADÉMICA SIN CABECERA DEL ALUMNO
   No se muestra nombre, código ni "Portal del Alumno" en las
   vistas académicas. Los datos personales quedan reservados
   para Mi Perfil / menú.
   ============================================================ */
.student-main{
  padding-top:8px !important;
  padding-bottom:105px !important;
}

.student-main > .app-view:first-child{
  margin-top:0 !important;
}

.app-view{
  margin-top:0 !important;
  scroll-margin-top:10px;
  scroll-margin-bottom:105px;
}

.section-heading{
  margin-top:4px !important;
}

.section-heading.compact{
  margin-top:4px !important;
  margin-bottom:14px !important;
}

@media(max-width:767.98px){
  .student-main{
    padding-top:4px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:105px !important;
  }

  .section-heading,
  .section-heading.compact{
    margin-top:2px !important;
    margin-left:2px !important;
    margin-right:2px !important;
    margin-bottom:12px !important;
  }

  .section-heading h2{
    margin-top:2px !important;
  }

  /* Más área útil para lecciones, lecturas, videos, exámenes y biblioteca */
  .professional-accordion,
  .filtered-list,
  .library-panel{
    margin-top:0 !important;
  }
}

/* AJUSTE DEFINITIVO: sin cabecera de bienvenida del alumno */
.student-main{
  max-width:1450px;
  margin:0 auto;
  padding-top:8px !important;
}
@media(max-width:767.98px){
  .student-main{
    padding-top:4px !important;
    padding-bottom:80px !important;
  }
}

/* SIN CABECERA DE BIENVENIDA: el contenido académico sube */
.student-main{
  max-width:1450px;
  margin:0 auto;
  padding-top:8px !important;
}
@media(max-width:767.98px){
  .student-main{
    padding-top:4px !important;
    padding-bottom:80px !important;
  }
}


/* ============================================================
   DATOS DEL ALUMNO EN EL MENÚ MÓVIL
   Se muestran antes de "Inicio":
   código
   apellidos y nombres
   correo electrónico
   ============================================================ */
.mobile-student-summary{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 4px;
  padding:16px 14px 15px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.mobile-student-summary-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf2ff;
  color:#1555a6;
  font-size:23px;
}
.mobile-student-summary-data{
  min-width:0;
  flex:1;
}
.mobile-student-summary-code{
  color:#718198;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:3px;
}
.mobile-student-summary-name{
  color:var(--ink);
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.mobile-student-summary-email{
  color:#718198;
  font-size:11px;
  line-height:1.25;
  margin-top:4px;
  overflow-wrap:anywhere;
}

@media(max-width:767.98px){
  .mobile-student-summary{
    padding:14px 12px 13px;
  }
  .mobile-student-summary-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:21px;
  }
  .mobile-student-summary-name{
    font-size:13px;
  }
  .mobile-student-summary-email{
    font-size:10.5px;
  }
}


/* ============================================================
   BOLETA DE NOTAS
   Fuente dinámica: online_horario_irregular_detalle_avance
   ============================================================ */
.boleta-card{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 32px rgba(20,45,82,.07);
  overflow:hidden;
}

.boleta-student-card{
  margin:0;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
}

.boleta-student-icon{
  width:64px;
  height:64px;
  flex:0 0 64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf2ff;
  color:#1555a6;
  font-size:30px;
}

.boleta-student-main{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.boleta-student-main strong{
  color:var(--ink);
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
}
.boleta-student-main span{
  color:#5f7188;
  font-size:13px;
}
.boleta-student-main span b{color:var(--ink)}

.boleta-student-meta{
  min-width:245px;
  border-left:1px solid var(--line);
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.boleta-student-meta div{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#718198;
  font-size:12px;
}
.boleta-student-meta i{
  color:#1555a6;
  font-size:20px;
  line-height:1;
}
.boleta-student-meta span{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.boleta-student-meta b{
  color:var(--ink);
  font-size:12px;
}

.boleta-summary{
  margin:18px;
  border:1px solid #d8e5f7;
  border-radius:15px;
  background:#f8fbff;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}
.boleta-summary-item{
  min-height:105px;
  padding:14px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:5px;
  border-right:1px solid #d8e5f7;
}
.boleta-summary-item:last-child{border-right:0}
.boleta-summary-item > i{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0d4a8f;
  color:#fff;
  font-size:19px;
}
.boleta-summary-item span{
  color:#5d6e85;
  font-size:12px;
  font-weight:700;
}
.boleta-summary-item > strong{
  color:#123f7a;
  font-size:21px;
  font-weight:900;
}
.boleta-summary-item > strong.boleta-ok{color:#168132}
.boleta-summary-item > strong.boleta-pending{color:#c77a00}
.boleta-summary-item > strong.boleta-danger{color:#c52b38}

.boleta-table-wrap{
  margin:0 18px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow-x:auto;
}
.boleta-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
  background:#fff;
}
.boleta-table thead th{
  padding:13px 12px;
  background:linear-gradient(100deg,#062454,#1555a6);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
}
.boleta-table thead th:nth-child(2){text-align:left}
.boleta-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid #e7edf4;
  text-align:center;
  vertical-align:middle;
  color:#263c59;
  font-size:13px;
}
.boleta-table tbody tr:last-child td{border-bottom:0}
.boleta-table tbody tr:hover{background:#f9fbfe}
.boleta-numero{
  width:55px;
  color:#1555a6!important;
  font-size:15px!important;
  font-weight:900;
}
.boleta-asignatura{
  min-width:300px;
  text-align:left!important;
  display:flex;
  align-items:center;
  gap:10px;
}
.boleta-asignatura strong{
  color:#1c2f49;
  font-size:13px;
  line-height:1.25;
}
.boleta-asig-icon{
  width:39px;
  height:39px;
  flex:0 0 39px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:18px;
}
.boleta-asig-icon.tone-0{background:#092e67}
.boleta-asig-icon.tone-1{background:#0b6330}
.boleta-asig-icon.tone-2{background:#9c1734}
.boleta-asig-icon.tone-3{background:#4d2c8f}
.boleta-asig-icon.tone-4{background:#9a5411}
.boleta-asig-icon.tone-5{background:#0a708c}

.boleta-creditos{
  color:#6b7d94!important;
  font-weight:700;
}
.boleta-nota{
  font-size:16px;
  font-weight:900;
}
.nota-alta{color:#168132}
.nota-media{color:#d48100}
.nota-baja{color:#c52b38}
.nota-pendiente{color:#8794a5}

.boleta-ponderado{
  font-weight:800;
  color:#425b78!important;
}
.boleta-estado{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:800;
  white-space:nowrap;
}
.estado-aprobado{color:#168132}
.estado-pendiente{color:#c77a00}
.estado-desaprobado{color:#c52b38}

.boleta-footer{
  margin:0 18px 18px;
  padding:13px 16px;
  border:1px solid #d8e5f7;
  border-radius:13px;
  background:linear-gradient(100deg,#f2f8ff,#fff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#60728a;
  font-size:12px;
}
.boleta-footer > div{
  display:flex;
  align-items:center;
  gap:8px;
}
.boleta-footer i{
  color:#168132;
  font-size:20px;
}
.boleta-footer strong{color:#435a75}
.boleta-footer b{
  color:#10234b;
  font-size:17px;
  margin-left:18px;
}
.boleta-loading{
  min-height:240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  color:#64748b;
  text-align:center;
  box-shadow:0 10px 32px rgba(20,45,82,.05);
}
.boleta-loading i{
  color:#1555a6;
  font-size:32px;
  animation:boletaGiro 1s linear infinite;
}
.boleta-loading strong{
  color:#173b6d;
  font-size:17px;
}
.boleta-loading span{font-size:12px}
@keyframes boletaGiro{to{transform:rotate(360deg)}}

.boleta-empty{
  padding:35px 15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#718198;
}
.boleta-empty i{font-size:36px;color:#9aabbd}
.boleta-empty strong{color:#405872}
.boleta-empty span{font-size:12px}

@media(max-width:767.98px){
  .boleta-card{border-radius:15px}
  .boleta-student-card{
    padding:14px;
    gap:11px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .boleta-student-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
    font-size:23px;
  }
  .boleta-student-main{padding-top:2px}
  .boleta-student-main strong{font-size:15px}
  .boleta-student-main span{font-size:10.5px}
  .boleta-student-meta{
    width:100%;
    min-width:0;
    border-left:0;
    border-top:1px solid var(--line);
    padding:10px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .boleta-student-meta div{font-size:10px}
  .boleta-student-meta i{font-size:17px}
  .boleta-student-meta b{font-size:10px}

  .boleta-summary{
    margin:10px;
    grid-template-columns:repeat(2,1fr);
  }
  .boleta-summary-item{
    min-height:92px;
    padding:10px 6px;
    border-bottom:1px solid #d8e5f7;
  }
  .boleta-summary-item:nth-child(2){border-right:0}
  .boleta-summary-item:nth-child(3),
  .boleta-summary-item:nth-child(4){border-bottom:0}
  .boleta-summary-item > i{width:34px;height:34px;font-size:16px}
  .boleta-summary-item span{font-size:10px}
  .boleta-summary-item > strong{font-size:18px}

  .boleta-table-wrap{
    margin:0 10px 10px;
    border-radius:11px;
  }
  .boleta-table{min-width:760px}
  .boleta-table thead th{padding:10px 8px;font-size:11px}
  .boleta-table tbody td{padding:9px 8px;font-size:11px}
  .boleta-asignatura{min-width:260px}
  .boleta-asignatura strong{font-size:11px}
  .boleta-asig-icon{width:34px;height:34px;flex-basis:34px;font-size:15px}
  .boleta-nota{font-size:14px}
  .boleta-footer{
    margin:0 10px 10px;
    padding:11px;
    display:block;
    font-size:10px;
  }
  .boleta-footer > div{
    justify-content:space-between;
    margin-bottom:5px;
  }
  .boleta-footer > div:last-child{margin-bottom:0}
  .boleta-footer b{font-size:14px;margin-left:10px}
}

/* ============================================================
   BOLETA RESPONSIVE - PRESENTACION BOOTSTRAP
   Solo modifica la presentacion de la boleta.
   No altera consultas, calculos, sesiones ni navegacion.
   ============================================================ */
.boleta-card{
  border:1px solid #dee2e6;
  border-radius:.75rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.06);
  background:#fff;
}
.boleta-student-card{
  padding:1.25rem 1.5rem;
  background:#fff;
  border-bottom:1px solid #e9ecef;
}
.boleta-label{
  display:block;
  color:#6c757d;
  font-size:.72rem!important;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:.15rem;
}
.boleta-student-main strong{
  font-size:1.15rem;
  color:#10234b;
}
.boleta-student-line{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.25rem;
  margin-top:.2rem;
}
.boleta-student-line span{font-size:.82rem}
.boleta-summary{
  margin:1rem!important;
  border:1px solid #dee2e6;
  border-radius:.65rem;
  overflow:hidden;
  background:#f8f9fa;
}
.boleta-summary-item{
  min-height:108px;
  padding:1rem .75rem;
  border-right:1px solid #dee2e6;
  border-bottom:0;
}
.boleta-summary-item > i{
  width:38px;
  height:38px;
  background:#0d6efd;
  font-size:17px;
}
.boleta-summary-item span{
  font-size:.75rem;
  color:#6c757d;
}
.boleta-summary-item > strong{font-size:1.2rem}
.boleta-table-wrap{
  margin:1rem!important;
  border:1px solid #dee2e6;
  border-radius:.65rem;
  overflow-x:auto;
}
.boleta-table{
  min-width:820px;
  margin-bottom:0!important;
}
.boleta-table thead th{
  background:#0b3768;
  color:#fff;
  border:0;
  padding:.8rem .75rem;
  font-size:.76rem;
  letter-spacing:.02em;
}
.boleta-table tbody td{
  padding:.75rem;
  border-color:#e9ecef;
}
.boleta-table tbody tr:nth-child(even){background:#f8fafc}
.boleta-table tbody tr:hover{background:#eef5ff}
.boleta-asignatura{min-width:300px}
.boleta-asignatura strong{font-size:.82rem}
.boleta-nota{font-size:1rem}
.boleta-footer{
  margin:0 1rem 1rem;
  border:1px solid #dee2e6;
  border-radius:.65rem;
  background:#f8f9fa;
}

@media(max-width:767.98px){
  .section-heading h2{
    font-size:1.45rem!important;
    line-height:1.2;
  }
  .section-heading p{
    font-size:.82rem;
    line-height:1.4;
  }
  .boleta-card{
    border-radius:.65rem;
    box-shadow:0 .35rem .9rem rgba(0,0,0,.06);
  }
  .boleta-student-card{
    padding:1rem;
    gap:.75rem;
  }
  .boleta-student-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:21px;
  }
  .boleta-student-main strong{
    font-size:.9rem;
    line-height:1.25;
    display:block;
  }
  .boleta-student-line{
    display:block;
    margin-top:.25rem;
  }
  .boleta-student-line span{
    display:block;
    font-size:.69rem;
    line-height:1.45;
  }
  .boleta-student-meta{
    padding-top:.7rem;
    gap:.6rem;
  }
  .boleta-student-meta div{font-size:.68rem}
  .boleta-student-meta b{font-size:.68rem}
  .boleta-summary{
    margin:.75rem!important;
    border-radius:.55rem;
  }
  .boleta-summary-item{
    min-height:92px;
    padding:.65rem .4rem;
    border-right:1px solid #dee2e6;
    border-bottom:1px solid #dee2e6;
  }
  .boleta-summary-item:nth-child(2n){border-right:0}
  .boleta-summary-item:nth-last-child(-n+2){border-bottom:0}
  .boleta-summary-item > i{
    width:32px;
    height:32px;
    font-size:14px;
  }
  .boleta-summary-item span{
    font-size:.65rem;
    line-height:1.25;
  }
  .boleta-summary-item > strong{font-size:1rem}

  /* En celular la tabla se transforma en tarjetas Bootstrap-like.
     Ya no existe una tabla de 820px que desborde la pantalla. */
  .boleta-table-wrap{
    margin:.75rem!important;
    border:0;
    overflow:visible!important;
  }
  .boleta-table{
    min-width:0!important;
    width:100%!important;
    display:block;
    border-collapse:separate;
  }
  .boleta-table thead{display:none}
  .boleta-table tbody{
    display:block;
    width:100%;
  }
  .boleta-table tbody tr{
    display:block;
    width:100%;
    margin-bottom:.7rem;
    padding:.75rem;
    border:1px solid #dee2e6;
    border-radius:.65rem;
    background:#fff!important;
    box-shadow:0 .15rem .45rem rgba(0,0,0,.035);
  }
  .boleta-table tbody tr:last-child{margin-bottom:0}
  .boleta-table tbody td{
    width:100%;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.38rem 0;
    border:0;
    text-align:right!important;
    font-size:.72rem;
  }
  .boleta-table tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;
    color:#6c757d;
    font-size:.66rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-align:left;
  }
  .boleta-table tbody td.boleta-numero{
    justify-content:flex-start;
    padding-bottom:.55rem;
    margin-bottom:.2rem;
    border-bottom:1px solid #edf0f2;
  }
  .boleta-table tbody td.boleta-numero::before{display:none}
  .boleta-table tbody td.boleta-numero::after{
    content:'ASIGNATURA #' attr(data-label);
    display:none;
  }
  .boleta-table tbody td.boleta-asignatura{
    min-width:0;
    justify-content:flex-start;
    align-items:center;
    text-align:left!important;
    padding:.25rem 0 .65rem;
  }
  .boleta-table tbody td.boleta-asignatura::before{
    display:none;
  }
  .boleta-asignatura strong{
    flex:1;
    font-size:.75rem;
    line-height:1.3;
  }
  .boleta-asig-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    font-size:15px;
  }
  .boleta-creditos{font-weight:700}
  .boleta-nota{font-size:1rem}
  .boleta-estado{font-size:.72rem}
  .boleta-footer{
    margin:0 .75rem .75rem;
    padding:.7rem .75rem;
    font-size:.67rem;
  }
  .boleta-footer > div{
    display:flex;
    justify-content:space-between;
    gap:.5rem;
    flex-wrap:wrap;
  }
  .boleta-footer b{font-size:.85rem;margin-left:auto}
}

@media(min-width:768px){
  .boleta-table-wrap{scrollbar-width:thin}
}

/* ============================================================
   BOLETA DE NOTAS - TABLA ACADÉMICA RESPONSIVE / BOOTSTRAP
   Diseño definitivo: PC/Laptop y celular usan la misma tabla.
   En celular se conserva la tabla y se permite desplazamiento
   horizontal cuando el nombre de la asignatura lo requiere.
   ============================================================ */
.boleta-table-wrap{
  width:100%;
  margin:1rem 0 1rem !important;
  border:1px solid #dee2e6;
  border-radius:.65rem;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}
.boleta-table{
  width:100%;
  min-width:720px;
  margin:0 !important;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}
.boleta-table thead th{
  background:#0b3768;
  color:#fff;
  border:0 !important;
  padding:.85rem .8rem;
  font-size:.78rem;
  font-weight:800;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}
.boleta-table thead th:first-child{width:58px}
.boleta-table thead th:nth-child(2){min-width:390px;text-align:left}
.boleta-table thead th:nth-child(3){width:120px}
.boleta-table thead th:nth-child(4){width:150px}
.boleta-table tbody tr{background:#fff;transition:background-color .15s ease}
.boleta-table tbody tr:nth-child(even){background:#f8fafc}
.boleta-table tbody tr:hover{background:#eef5ff}
.boleta-table tbody td{
  padding:.72rem .8rem;
  border:0;
  border-bottom:1px solid #e9ecef;
  vertical-align:middle;
  text-align:center;
  font-size:.82rem;
}
.boleta-table tbody tr:last-child td{border-bottom:0}
.boleta-table tbody td.boleta-numero{
  width:58px;color:#0b4f96 !important;font-size:.95rem !important;
  font-weight:800;text-align:center !important;
}
.boleta-table tbody td.boleta-asignatura{
  min-width:390px;display:table-cell;text-align:left !important;white-space:normal;
}
.boleta-table tbody td.boleta-asignatura .boleta-asig-icon{
  display:inline-grid;vertical-align:middle;margin-right:.65rem;
}
.boleta-table tbody td.boleta-asignatura strong{
  display:inline-block;max-width:calc(100% - 60px);vertical-align:middle;
  color:#182d49;font-size:.82rem;line-height:1.3;
}
.boleta-table tbody td:nth-child(3){width:120px;text-align:center !important}
.boleta-table tbody td:nth-child(4){width:150px;text-align:center !important}
.boleta-table .boleta-nota{font-size:1.02rem;font-weight:900}
.boleta-table .boleta-estado{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  white-space:nowrap;font-size:.8rem;font-weight:800;
}
@media(max-width:767.98px){
  .boleta-table-wrap{
    margin:.75rem 0 !important;border-radius:.55rem;overflow-x:auto !important;
  }
  .boleta-table{
    display:table !important;width:100%;min-width:650px !important;
    table-layout:auto;border-collapse:separate;
  }
  .boleta-table thead{display:table-header-group !important}
  .boleta-table tbody{display:table-row-group !important}
  .boleta-table tbody tr{
    display:table-row !important;width:auto;margin:0;padding:0;
    border:0;border-radius:0;box-shadow:none;
  }
  .boleta-table tbody td{
    display:table-cell !important;width:auto;min-height:0;
    padding:.62rem .55rem;border:0;border-bottom:1px solid #e9ecef;
    text-align:center !important;font-size:.72rem;vertical-align:middle;
  }
  .boleta-table tbody td::before{content:none !important;display:none !important}
  .boleta-table tbody td.boleta-numero{
    width:48px;padding-left:.5rem;padding-right:.5rem;text-align:center !important;
    margin:0;border-bottom:1px solid #e9ecef;
  }
  .boleta-table tbody td.boleta-asignatura{
    display:table-cell !important;min-width:300px;width:auto;
    padding:.58rem .65rem;text-align:left !important;border-bottom:1px solid #e9ecef;
  }
  .boleta-table tbody td.boleta-asignatura::before{display:none !important}
  .boleta-table tbody td.boleta-asignatura .boleta-asig-icon{
    width:34px;height:34px;margin-right:.5rem;font-size:15px;
  }
  .boleta-table tbody td.boleta-asignatura strong{
    max-width:none;font-size:.72rem;line-height:1.25;
  }
  .boleta-table tbody td:nth-child(3){width:95px;min-width:95px;text-align:center !important}
  .boleta-table tbody td:nth-child(4){width:120px;min-width:120px;text-align:center !important}
  .boleta-table thead th{padding:.68rem .55rem;font-size:.7rem}
  .boleta-table thead th:first-child{width:48px;min-width:48px}
  .boleta-table thead th:nth-child(2){min-width:300px}
  .boleta-table thead th:nth-child(3){width:95px;min-width:95px}
  .boleta-table thead th:nth-child(4){width:120px;min-width:120px}
  .boleta-table .boleta-nota{font-size:.9rem}
  .boleta-table .boleta-estado{font-size:.7rem}
}


/* ============================================================
   AJUSTE FINAL BOLETA - ASIGNATURA EN CELULAR
   - El campo ASIGNATURA ocupa como máximo aprox. 15 caracteres
     de ancho visual.
   - No se genera desplazamiento horizontal.
   - El nombre de la asignatura siempre queda alineado a la izquierda.
   - Si el nombre es largo, se ajusta en varias líneas dentro de la celda.
   ============================================================ */
@media (max-width:767.98px){
  .boleta-table-wrap{
    width:100% !important;
    margin:.75rem 0 !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
  }

  .boleta-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  .boleta-table thead th,
  .boleta-table tbody td{
    box-sizing:border-box;
  }

  /* N° */
  .boleta-table thead th:first-child,
  .boleta-table tbody td.boleta-numero{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  /* ASIGNATURA: ancho reducido a aprox. 15 caracteres */
  .boleta-table thead th:nth-child(2),
  .boleta-table tbody td.boleta-asignatura{
    width:15ch !important;
    min-width:15ch !important;
    max-width:15ch !important;
    text-align:left !important;
  }

  .boleta-table tbody td.boleta-asignatura{
    display:table-cell !important;
    vertical-align:middle !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-align:left !important;
    padding:.48rem .35rem !important;
  }

  .boleta-table tbody td.boleta-asignatura .boleta-asig-icon{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    margin-right:.3rem !important;
    font-size:12px !important;
    vertical-align:middle !important;
  }

  .boleta-table tbody td.boleta-asignatura strong{
    display:inline !important;
    width:auto !important;
    max-width:none !important;
    font-size:.68rem !important;
    line-height:1.18 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    vertical-align:middle !important;
  }

  /* NOTA */
  .boleta-table thead th:nth-child(3),
  .boleta-table tbody td:nth-child(3){
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  /* ESTADO */
  .boleta-table thead th:nth-child(4),
  .boleta-table tbody td:nth-child(4){
    width:95px !important;
    min-width:95px !important;
    max-width:95px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  .boleta-table .boleta-nota{
    font-size:.88rem !important;
  }

  .boleta-table .boleta-estado{
    font-size:.66rem !important;
    gap:.25rem !important;
    white-space:nowrap !important;
  }

  .boleta-table thead th{
    padding:.62rem .25rem !important;
    font-size:.66rem !important;
  }

  .boleta-table tbody tr{
    display:table-row !important;
    width:100% !important;
  }

  .boleta-table tbody td{
    display:table-cell !important;
    border-bottom:1px solid #e9ecef !important;
    text-align:center !important;
  }

  .boleta-table tbody td::before{
    content:none !important;
    display:none !important;
  }

  .boleta-table tbody td.boleta-asignatura::before{
    display:none !important;
  }
}


/* ============================================================
   BOLETA DEFINITIVA - 5 CAMPOS INDEPENDIENTES
   ORDEN:
   1. N°
   2. LOGO (imagen de la asignatura)
   3. ASIGNATURA
   4. NOTA
   5. ESTADO

   El logo NUNCA comparte la misma celda con el nombre.
   ============================================================ */

.boleta-table-wrap{
  width:100% !important;
  margin:1rem 0 !important;
  border:1px solid #dfe7f2 !important;
  border-radius:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.boleta-table{
  width:100% !important;
  min-width:680px !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

.boleta-table thead th{
  background:#0b3768 !important;
  color:#fff !important;
  border:0 !important;
  padding:13px 10px !important;
  height:48px;
  font-size:12px !important;
  font-weight:800 !important;
  text-align:center !important;
  vertical-align:middle !important;
  white-space:nowrap;
}

.boleta-table thead th.col-numero,
.boleta-table tbody td.boleta-numero{
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
}

.boleta-table thead th.col-logo,
.boleta-table tbody td.boleta-logo{
  width:68px !important;
  min-width:68px !important;
  max-width:68px !important;
}

.boleta-table thead th.col-asignatura,
.boleta-table tbody td.boleta-asignatura{
  width:auto !important;
  min-width:260px !important;
}

.boleta-table thead th.col-nota,
.boleta-table tbody td.boleta-nota-cell{
  width:105px !important;
  min-width:105px !important;
  max-width:105px !important;
}

.boleta-table thead th.col-estado,
.boleta-table tbody td.boleta-estado-cell{
  width:135px !important;
  min-width:135px !important;
  max-width:135px !important;
}

.boleta-table tbody td{
  padding:12px 10px !important;
  border:0 !important;
  border-bottom:1px solid #e9eef4 !important;
  vertical-align:middle !important;
  background:#fff;
}

.boleta-table tbody tr:nth-child(even) td{
  background:#f9fbfd;
}

.boleta-table tbody tr:hover td{
  background:#eef5ff;
}

/* 1. N° */
.boleta-table tbody td.boleta-numero{
  text-align:center !important;
  color:#0b4f96 !important;
  font-size:16px !important;
  font-weight:900 !important;
}

/* 2. LOGO: celda totalmente independiente */
.boleta-table tbody td.boleta-logo{
  text-align:center !important;
  padding-left:6px !important;
  padding-right:6px !important;
}

.boleta-table tbody td.boleta-logo .boleta-asig-icon{
  width:38px !important;
  height:38px !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  color:#fff !important;
  font-size:17px !important;
}

/* 3. ASIGNATURA: solamente el nombre */
.boleta-table tbody td.boleta-asignatura{
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

.boleta-table tbody td.boleta-asignatura strong{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  color:#182d49 !important;
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  text-align:left !important;
}

/* 4. NOTA */
.boleta-table tbody td.boleta-nota-cell{
  text-align:center !important;
}

.boleta-table tbody td.boleta-nota-cell .boleta-nota{
  font-size:16px !important;
  font-weight:900 !important;
}

/* 5. ESTADO */
.boleta-table tbody td.boleta-estado-cell{
  text-align:center !important;
}

.boleta-table tbody td.boleta-estado-cell .boleta-estado{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  font-size:12px !important;
  font-weight:800 !important;
}

/* ============================================================
   CELULAR
   Las 5 columnas permanecen visibles y ordenadas.
   El nombre se ajusta en varias líneas dentro de su columna.
   ============================================================ */
@media(max-width:767.98px){

  .boleta-table-wrap{
    margin:.75rem 0 !important;
    border-radius:11px !important;
    overflow-x:hidden !important;
  }

  .boleta-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  .boleta-table thead th{
    height:44px !important;
    padding:9px 3px !important;
    font-size:10px !important;
  }

  /* 1. N° */
  .boleta-table thead th.col-numero,
  .boleta-table tbody td.boleta-numero{
    width:31px !important;
    min-width:31px !important;
    max-width:31px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  /* 2. LOGO */
  .boleta-table thead th.col-logo,
  .boleta-table tbody td.boleta-logo{
    width:43px !important;
    min-width:43px !important;
    max-width:43px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  /* 3. ASIGNATURA */
  .boleta-table thead th.col-asignatura,
  .boleta-table tbody td.boleta-asignatura{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 4. NOTA */
  .boleta-table thead th.col-nota,
  .boleta-table tbody td.boleta-nota-cell{
    width:61px !important;
    min-width:61px !important;
    max-width:61px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  /* 5. ESTADO */
  .boleta-table thead th.col-estado,
  .boleta-table tbody td.boleta-estado-cell{
    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .boleta-table tbody td{
    padding:10px 3px !important;
    font-size:11px !important;
  }

  /* N° */
  .boleta-table tbody td.boleta-numero{
    font-size:14px !important;
  }

  /* LOGO separado */
  .boleta-table tbody td.boleta-logo .boleta-asig-icon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:8px !important;
    font-size:13px !important;
  }

  /* NOMBRE: alineado a la izquierda y con salto de línea */
  .boleta-table tbody td.boleta-asignatura{
    text-align:left !important;
    padding:9px 5px !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .boleta-table tbody td.boleta-asignatura strong{
    display:block !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  /* NOTA */
  .boleta-table tbody td.boleta-nota-cell .boleta-nota{
    font-size:13px !important;
  }

  /* ESTADO */
  .boleta-table tbody td.boleta-estado-cell .boleta-estado{
    font-size:9.5px !important;
    gap:3px !important;
    white-space:nowrap !important;
  }

  .boleta-table tbody td.boleta-estado-cell .boleta-estado i{
    font-size:11px !important;
  }

  /* No usar data-label en esta tabla: el encabezado ya identifica
     claramente los cinco campos. */
  .boleta-table tbody td::before{
    content:none !important;
    display:none !important;
  }
}


/* ============================================================
   BOLETA - CABECERA PROFESIONAL
   Cambio exclusivamente visual.
   El nombre del alumno queda a la izquierda y el promedio/estado
   quedan en la misma fila, siguiendo el diseño de referencia.
   ============================================================ */

.boleta-student-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:22px 24px;
  border:0;
  border-radius:0;
  color:#fff;
  background:linear-gradient(120deg,#061b3d 0%,#0b3768 58%,#0e467f 100%);
  overflow:hidden;
}

.boleta-student-card::before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-80px;
  top:-120px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}

.boleta-student-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-110px;
  bottom:-130px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

.boleta-student-profile{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:15px;
}

.boleta-student-card .boleta-student-icon{
  width:68px;
  height:68px;
  flex:0 0 68px;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.boleta-student-card .boleta-student-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.boleta-student-card .boleta-label{
  color:#f2c94c;
  font-size:10px !important;
  letter-spacing:.12em;
  font-weight:900;
  margin:0;
}

.boleta-student-card .boleta-student-main strong{
  display:block;
  color:#fff;
  font-size:clamp(16px,2vw,22px);
  line-height:1.15;
  font-weight:900;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.boleta-student-card .boleta-student-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin-top:3px;
}

.boleta-student-card .boleta-student-line span{
  color:#dce8f8;
  font-size:11px;
  line-height:1.3;
}

.boleta-student-card .boleta-student-line b{
  color:#fff;
  font-weight:800;
}

.boleta-header-results{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  min-height:82px;
  padding:0;
  border:1px solid rgba(255,255,255,.20);
  border-radius:13px;
  background:rgba(2,18,45,.28);
  backdrop-filter:blur(5px);
}

.boleta-header-result{
  min-width:132px;
  padding:10px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.boleta-header-result span{
  color:#dce8f8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}

.boleta-header-result span i{
  color:#f2c94c;
  margin-right:4px;
}

.boleta-header-result strong{
  margin-top:3px;
  color:#fff;
  font-size:27px;
  line-height:1;
  font-weight:900;
}

.boleta-header-result small{
  margin-top:4px;
  color:#b9cbe3;
  font-size:9px;
  white-space:nowrap;
}

.boleta-header-status strong.boleta-ok{color:#42d06c}
.boleta-header-status strong.boleta-pending{color:#f5b544}
.boleta-header-status strong.boleta-danger{color:#ff6b75}

.boleta-header-divider{
  width:1px;
  margin:13px 0;
  background:rgba(255,255,255,.18);
}

.boleta-student-card + .boleta-student-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  min-width:0;
  padding:9px 24px;
  border:0;
  border-bottom:1px solid #dfe7f2;
  background:#f8fafc;
}

.boleta-student-card + .boleta-student-meta div{
  align-items:center;
  gap:7px;
  color:#64748b;
  font-size:10px;
}

.boleta-student-card + .boleta-student-meta i{
  color:#1555a6;
  font-size:17px;
}

.boleta-student-card + .boleta-student-meta span{
  flex-direction:row;
  gap:5px;
  align-items:center;
}

.boleta-student-card + .boleta-student-meta b{
  color:#263c59;
  font-size:10px;
}

/* En el nuevo encabezado los datos ya no necesitan el formato
   anterior de bloque lateral. */
.boleta-student-card .boleta-student-meta{
  display:none;
}

@media(max-width:767.98px){
  .boleta-student-card{
    display:block;
    padding:15px 14px 13px;
  }

  .boleta-student-profile{
    gap:11px;
    align-items:center;
  }

  .boleta-student-card .boleta-student-icon{
    width:50px;
    height:50px;
    flex-basis:50px;
    font-size:22px;
  }

  .boleta-student-card .boleta-student-main strong{
    font-size:14px;
    line-height:1.2;
  }

  .boleta-student-card .boleta-student-line{
    display:block;
    margin-top:4px;
  }

  .boleta-student-card .boleta-student-line span{
    display:block;
    font-size:9.5px;
    line-height:1.45;
  }

  .boleta-header-results{
    width:100%;
    min-height:72px;
    margin-top:12px;
    border-radius:11px;
  }

  .boleta-header-result{
    width:50%;
    min-width:0;
    padding:8px 5px;
  }

  .boleta-header-result span{
    font-size:7.5px;
  }

  .boleta-header-result strong{
    font-size:20px;
  }

  .boleta-header-result small{
    font-size:8px;
  }

  .boleta-header-divider{
    margin:10px 0;
  }

  .boleta-student-card + .boleta-student-meta{
    justify-content:space-between;
    gap:8px;
    padding:8px 12px;
  }

  .boleta-student-card + .boleta-student-meta div{
    font-size:8.5px;
  }

  .boleta-student-card + .boleta-student-meta i{
    font-size:14px;
  }

  .boleta-student-card + .boleta-student-meta b{
    font-size:8.5px;
  }

  .boleta-student-card + .boleta-student-meta span{
    gap:3px;
  }
}


/* Acceso directo a Boleta de Notas en escritorio.
   Solo presentación/navegación visual; no modifica lógica ni consultas. */
@media (min-width: 992px){
  .student-top-actions{
    gap:2px !important;
  }

  .student-top-actions .top-link{
    padding-left:11px !important;
    padding-right:11px !important;
    white-space:nowrap !important;
    font-size:13px !important;
  }
}