@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap");

/*
 * Modernización visual NSM
 * Mantiene la estructura y la identidad azul/dorado del sitio original.
 * Este archivo se carga al final para unificar componentes antiguos y nuevos.
 */

:root {
  --azul-oscuro: #102a56;
  --azul-medio: #174b8c;
  --azul-claro: #2f6fca;
  --dorado: #d5ad45;
  --dorado-claro: #f3d98d;
  --dorado-oscuro: #8a6616;
  --crema: #f7f9fc;
  --gris-claro: #eef3f8;
  --gris-texto: #526178;
  --sombra: rgba(16, 42, 86, 0.1);
  --radio: 12px;
  --radio-lg: 20px;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --line: rgba(16, 42, 86, 0.1);
  --shadow-sm: 0 8px 24px rgba(16, 42, 86, 0.08);
  --shadow-md: 0 18px 48px rgba(16, 42, 86, 0.13);
  --shadow-lg: 0 30px 80px rgba(4, 19, 48, 0.22);
}

html {
  scroll-padding-top: 158px;
}

body.modern-ui {
  background:
    radial-gradient(circle at 10% 3%, rgba(47, 111, 202, 0.08), transparent 28rem),
    var(--surface-soft);
  color: #435269;
  font-family: "Manrope", "Source Sans 3", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.modern-ui button,
body.modern-ui input,
body.modern-ui textarea,
body.modern-ui select {
  font: inherit;
}

body.modern-ui a,
body.modern-ui button,
body.modern-ui input,
body.modern-ui textarea,
body.modern-ui select {
  -webkit-tap-highlight-color: transparent;
}

body.modern-ui :focus-visible {
  outline: 3px solid rgba(47, 111, 202, 0.35);
  outline-offset: 3px;
}

.container {
  width: min(100% - 40px, 1220px);
  max-width: 1220px;
  padding: 0;
}

/* Barra institucional y cabecera */
.topbar {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #081d3d;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

.topbar .container {
  min-height: 24px;
}

.topbar-info {
  gap: 18px;
}

.topbar a {
  color: var(--dorado-claro);
  font-weight: 700;
}

header {
  top: 0;
  padding-top: 0;
  background:
    radial-gradient(circle at 48% -80%, rgba(93, 153, 226, 0.35), transparent 45%),
    linear-gradient(120deg, #0a2147, #12386f 58%, #0c2b5a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 35px rgba(4, 18, 45, 0.2);
}

header .header-brand {
  min-height: 112px;
  gap: 26px;
  padding: 14px 4px;
}

.header-brand > div:first-child img {
  width: 68px !important;
  height: 82px !important;
  border: 1px solid rgba(243, 217, 141, 0.68) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}

.header-brand > div:last-child img {
  width: 70px !important;
  max-height: 86px;
  object-fit: contain;
}

.header-titles {
  padding: 0 8px !important;
}

.header-titles > p:first-child {
  margin-bottom: 2px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

.header-titles h1 {
  margin: 0 !important;
  font-family: "Playfair Display", Georgia, serif;
}

.header-titles h1 span {
  display: inline !important;
  color: #fff !important;
  font-size: clamp(1.55rem, 3vw, 2.75rem) !important;
  font-style: normal;
  letter-spacing: -0.035em;
  transform: none !important;
}

.header-titles > div {
  margin-top: 7px !important;
}

.header-titles > div p {
  font-size: 11px !important;
  letter-spacing: 0.035em !important;
}

nav {
  background: rgba(4, 18, 45, 0.46);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.nav-list {
  gap: 3px;
  padding: 6px 0;
}

.nav-list li a,
#link-asistencia-qr {
  min-height: 39px;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.nav-list li a:hover,
.nav-list li a.active,
#link-asistencia-qr:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.11) !important;
}

.nav-list li a.active {
  box-shadow: inset 0 -2px var(--dorado);
}

#dropdown-proyectos {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 15px !important;
  background: rgba(8, 29, 61, 0.96) !important;
  box-shadow: 0 24px 60px rgba(3, 15, 36, 0.34) !important;
  backdrop-filter: blur(22px);
}

#dropdown-proyectos a {
  min-height: 48px;
  padding: 12px 15px !important;
}

/* Hero */
.hero {
  min-height: 560px;
  isolation: isolate;
  border-bottom: 1px solid rgba(16, 42, 86, 0.08);
}

.hero > div:first-child img {
  transform: scale(1.025);
  filter: saturate(0.94) contrast(1.05);
}

.hero > div:first-child > div {
  background:
    linear-gradient(90deg, rgba(5, 22, 50, 0.92) 0%, rgba(7, 30, 65, 0.72) 52%, rgba(6, 24, 54, 0.42) 100%) !important;
}

.hero > .container {
  padding-top: 80px !important;
  padding-bottom: 68px !important;
}

.hero-content {
  max-width: 760px;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(5, 24, 55, 0.55), rgba(9, 36, 76, 0.26));
  box-shadow: 0 30px 80px rgba(2, 13, 32, 0.26);
  backdrop-filter: blur(10px);
}

.hero-badge {
  padding: 6px 12px;
  border: 1px solid rgba(243, 217, 141, 0.42);
  border-radius: 9px;
  background: rgba(213, 173, 69, 0.12);
  color: #ffe7a6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hero h2 {
  max-width: 690px;
  margin-bottom: 17px;
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.hero h2 em {
  color: var(--dorado-claro);
}

.hero p {
  max-width: 650px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
}

.hero-btns {
  gap: 10px;
}

.btn {
  min-height: 46px;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 12px;
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-dorado {
  background: linear-gradient(135deg, #f0cf74, #d5ad45);
  color: #102a56;
  box-shadow: 0 10px 24px rgba(213, 173, 69, 0.2);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.27);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
  padding-top: 22px;
}

.hero-stats > div {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
}

.hero-stat-num {
  color: #ffe6a4;
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-stat-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  line-height: 1.35;
}

/* Secciones y tarjetas */
section {
  padding: 82px 0;
}

#noticias,
#docentes,
#contacto {
  background: rgba(255, 255, 255, 0.76);
}

#niveles,
#galeria {
  background: #f1f5fa;
}

.section-header {
  margin-bottom: 42px;
}

.section-tag {
  margin-bottom: 14px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: #eaf1fb;
  color: #275b9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.section-header h3 {
  margin-bottom: 10px;
  color: #102a56;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.section-header p {
  max-width: 620px;
  color: #6c7a8f;
  font-size: 14px;
}

.divider {
  width: 44px;
  height: 4px;
  margin-top: 15px;
  border-radius: 999px;
}

.noticias-grid,
.niveles-grid,
.docentes-grid {
  gap: 20px;
}

.noticia-card,
.nivel-card,
.docente-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.noticia-card,
.nivel-card,
.docente-card,
.galeria-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.noticia-card:hover,
.nivel-card:hover,
.docente-card:hover {
  transform: translateY(-5px);
  border-color: rgba(47, 111, 202, 0.2);
  box-shadow: var(--shadow-md);
}

.noticia-img {
  height: 145px;
  background:
    radial-gradient(circle at 80% 20%, rgba(243, 217, 141, 0.22), transparent 35%),
    linear-gradient(135deg, #174b8c, #102a56);
  font-size: 42px;
}

.noticia-body {
  padding: 22px;
}

.noticia-fecha {
  color: #8a6616;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.noticia-body h4,
.nivel-card h4 {
  color: #17345f;
  font-size: 1.08rem;
  line-height: 1.35;
}

.noticia-body p,
.nivel-card p {
  color: #66758a;
  font-size: 13px;
}

.nivel-card {
  padding: 30px 26px;
  text-align: left;
}

.nivel-card::before {
  left: 24px;
  right: 24px;
  width: auto;
  height: 3px;
  border-radius: 0 0 999px 999px;
}

.nivel-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: #edf3fb;
  display: grid;
  place-items: center;
  font-size: 27px;
}

.nivel-grados {
  justify-content: flex-start;
  gap: 7px;
}

.grado-pill {
  padding: 5px 9px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #f6f9fd;
  color: #426181;
  font-size: 10px;
}

.docentes-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.docente-card {
  padding: 25px 18px;
}

.docente-avatar {
  width: 68px;
  height: 68px;
  border: 5px solid #eef3f8;
  background: linear-gradient(145deg, #245fa8, #102a56);
  color: #ffe3a0;
  box-shadow: 0 0 0 1px rgba(16, 42, 86, 0.12);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
}

#valores {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(47, 111, 202, 0.38), transparent 32rem),
    linear-gradient(135deg, #071d3f, #102f60 58%, #0b244b) !important;
}

#valores::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -240px;
  border: 1px solid rgba(243, 217, 141, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(243, 217, 141, 0.035);
}

#valores .container {
  position: relative;
}

#valores .section-header + div {
  gap: 18px !important;
}

#valores .section-header + div > div {
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}

#valores .section-header + div > div > div:first-child {
  font-size: 32px !important;
}

.galeria-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.galeria-item {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.galeria-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.galeria-item:hover {
  z-index: 2;
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.galeria-label {
  padding: 34px 14px 13px;
  font-size: 11px;
  font-weight: 800;
}

.contacto-grid {
  gap: 26px;
}

.contacto-info,
.contacto-grid > div:last-child {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.contacto-info h4,
.contacto-grid > div:last-child > h4 {
  color: #17345f !important;
  font-family: "Playfair Display", serif !important;
}

.contacto-item {
  margin-bottom: 17px;
}

.contacto-icon {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: #edf3fb;
}

.form-group input,
.form-group textarea,
.form-group select,
.dni-input-wrap input,
#panel-docente input,
#panel-docente textarea,
#panel-docente select,
[id^="modal-"] input,
[id^="modal-"] textarea,
[id^="modal-"] select,
#panel-mis-evidencias input,
#panel-mis-evidencias textarea {
  border: 1px solid #d9e3ef !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
  color: #33445b !important;
  font-family: "Manrope", sans-serif !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.dni-input-wrap input:focus,
#panel-docente input:focus,
#panel-docente textarea:focus,
#panel-docente select:focus,
[id^="modal-"] input:focus,
[id^="modal-"] textarea:focus,
[id^="modal-"] select:focus {
  border-color: #2f6fca !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(47, 111, 202, 0.11);
  outline: none !important;
}

.btn-azul,
.btn-ingresar,
[id^="btn-guardar"],
#ev-btn {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #174b8c, #102a56) !important;
  color: #fff !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(16, 42, 86, 0.16);
}

.btn-azul:hover,
.btn-ingresar:hover,
[id^="btn-guardar"]:hover,
#ev-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16, 42, 86, 0.22);
}

/* Ventanas y paneles del sistema */
.modal-overlay {
  background: rgba(3, 15, 37, 0.72);
  backdrop-filter: blur(10px);
}

.modal-box,
.modal-overlay > div:not([style*="height:100vh"]) {
  border: 1px solid rgba(16, 42, 86, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-lg);
}

.modal-close,
.modal-overlay button[onclick^="cerrar"] {
  transition: transform 0.2s ease, background 0.2s ease;
}

.modal-close:hover,
.modal-overlay button[onclick^="cerrar"]:hover {
  transform: rotate(4deg) scale(1.04);
}

.modal-icon {
  border: 0;
  border-radius: 18px;
  background: #edf3fb;
}

.modal-header h3 {
  color: #17345f;
  letter-spacing: -0.02em;
}

#panel-menu .menu-opciones button {
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(16, 42, 86, 0.12);
}

#panel-alumno > div,
#panel-docente > div,
#panel-mochila > div,
#panel-evidencias-pub > div,
#panel-mis-evidencias > div {
  width: min(100%, 1100px) !important;
  border-inline: 1px solid rgba(16, 42, 86, 0.08);
  background: #f3f6fa !important;
  box-shadow: var(--shadow-lg);
}

#panel-alumno > div > div:first-child,
#panel-docente > div > div:first-child,
#panel-mochila > div > div:first-child,
#panel-evidencias-pub > div > div:first-child,
#panel-mis-evidencias > div > div:first-child {
  padding: 18px 24px !important;
  background:
    radial-gradient(circle at 85% -80%, rgba(255, 255, 255, 0.22), transparent 50%),
    linear-gradient(120deg, #102a56, #174b8c) !important;
}

#panel-docente > div > div:nth-child(2) {
  gap: 18px !important;
}

#panel-docente > div > div:nth-child(2) > div > div,
#panel-docente > div > div:nth-child(2) > div:last-child,
#ev-form-subida {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm);
}

#mochila-grid,
#evidencias-pub-grid,
#mis-ev-grid {
  gap: 16px !important;
}

#mochila-grid > div,
#evidencias-pub-grid > div,
#mis-ev-grid > div,
#lista-contenidos-alumno > div,
#lista-contenidos-docente > div,
#lista-entregas > div {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm);
}

#btn-modo-edicion {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f0cf74, #d5ad45) !important;
  box-shadow: 0 18px 40px rgba(4, 19, 48, 0.24) !important;
}

/* Consulta de asistencia QR (sus estilos se crean desde JavaScript) */
.asistencia-qr-overlay {
  background: rgba(3, 15, 37, 0.74) !important;
  backdrop-filter: blur(11px) !important;
  font-family: "Manrope", sans-serif !important;
}

.asistencia-qr-panel {
  border: 1px solid rgba(16, 42, 86, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-lg) !important;
}

.asistencia-qr-cabecera {
  background:
    radial-gradient(circle at 88% -90%, rgba(255, 255, 255, 0.25), transparent 55%),
    linear-gradient(120deg, #102a56, #174b8c) !important;
}

.asistencia-qr-cabecera h2 {
  font-family: "Playfair Display", serif !important;
}

.asistencia-qr-campo input,
.asistencia-qr-filtro select {
  border-radius: 11px !important;
  font-family: "Manrope", sans-serif !important;
}

.asistencia-qr-consultar {
  border-radius: 11px !important;
  background: linear-gradient(135deg, #f0cf74, #d5ad45) !important;
}

.asistencia-qr-alumno,
.asistencia-qr-filtros,
.asistencia-qr-progreso,
.asistencia-qr-tabla-wrap {
  border-radius: 15px !important;
}

.asistencia-qr-tarjeta {
  border-radius: 13px !important;
  box-shadow: 0 5px 14px rgba(16, 42, 86, 0.05);
}

/* Mochila Mercedaria */
body.mochila-page {
  --azul: #102a56;
  --dorado: #d5ad45;
  --dorado2: #f3d98d;
  --crema: #f7f9fc;
  --gris: #eef3f8;
  --texto: #435269;
  --sombra: rgba(16, 42, 86, 0.1);
}

.mochila-page .site-header {
  min-height: 78px;
  padding: 13px max(20px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 75% -100%, rgba(93, 153, 226, 0.36), transparent 45%),
    linear-gradient(120deg, #0a2147, #12386f);
}

.mochila-page .site-header img {
  width: 48px;
}

.mochila-page .site-header-titles h1 {
  font-size: 1.05rem;
}

.mochila-page .header-back {
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.mochila-page .qr-info {
  justify-content: center;
  padding: 11px 20px;
  background: #081d3d;
}

.mochila-page .login-screen {
  min-height: calc(100vh - 121px);
  background:
    radial-gradient(circle at 78% 20%, rgba(213, 173, 69, 0.2), transparent 24rem),
    radial-gradient(circle at 10% 90%, rgba(47, 111, 202, 0.4), transparent 30rem),
    linear-gradient(145deg, #081d3d, #174b8c);
}

.mochila-page .login-card {
  max-width: 420px;
  padding: 38px 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

.mochila-page .login-icon {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 20px;
  background: #edf3fb;
  box-shadow: 0 0 0 7px rgba(47, 111, 202, 0.08);
}

.mochila-page .dni-field {
  border: 1px solid #d9e3ef;
  border-radius: 12px;
  background: #f8fafc;
}

.mochila-page .btn-login,
.mochila-page .btn-guardar {
  border-radius: 12px;
  background: linear-gradient(135deg, #174b8c, #102a56);
  box-shadow: 0 10px 24px rgba(16, 42, 86, 0.16);
}

.mochila-page .user-banner {
  background: linear-gradient(120deg, #102a56, #174b8c);
}

.mochila-page .biblioteca {
  max-width: 1180px;
  padding-top: 42px;
}

.mochila-page .biblioteca-header h2 {
  color: #17345f;
  letter-spacing: -0.025em;
}

.mochila-page .btn-agregar {
  border-radius: 11px;
  background: linear-gradient(135deg, #f0cf74, #d5ad45);
  box-shadow: 0 8px 20px rgba(213, 173, 69, 0.18);
}

.mochila-page .filtro-btn {
  padding: 8px 14px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #fff;
}

.mochila-page .libros-grid {
  gap: 18px;
}

.mochila-page .libro-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.mochila-page .libro-card:hover {
  border-color: rgba(47, 111, 202, 0.2);
  box-shadow: var(--shadow-md);
}

.mochila-page .libro-portada {
  height: 175px;
}

.mochila-page .nivel-tag,
.mochila-page .btn-leer {
  border-radius: 9px;
}

.mochila-page .modal-box {
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

footer {
  padding-top: 55px;
  border-top: 0;
  background:
    radial-gradient(circle at 10% -80%, rgba(47, 111, 202, 0.4), transparent 35rem),
    #071d3f;
}

/* Movimiento sobrio y accesible */
@media (prefers-reduced-motion: no-preference) {
  .noticia-card,
  .nivel-card,
  .docente-card,
  .galeria-item,
  .modal-box,
  .login-card {
    animation: modernReveal 0.45s ease both;
  }

  @keyframes modernReveal {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 120px;
  }

  .topbar {
    display: none;
  }

  header .header-brand {
    min-height: 88px;
    gap: 15px;
    padding: 10px 2px;
  }

  .header-brand > div:first-child img {
    width: 52px !important;
    height: 64px !important;
    border-radius: 12px !important;
  }

  .header-brand > div:last-child img {
    width: 53px !important;
  }

  .header-titles h1 span {
    font-size: clamp(1.15rem, 4.5vw, 1.85rem) !important;
  }

  .header-titles > div {
    display: none !important;
  }

  .nav-list {
    margin-inline: -2px;
    padding: 5px 0 7px;
  }

  .hero {
    min-height: auto;
  }

  .hero > .container {
    padding-top: 54px !important;
    padding-bottom: 50px !important;
  }

  .hero-content {
    padding: 28px;
  }

  .hero h2 {
    font-size: clamp(2rem, 7vw, 3.15rem);
  }

  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #panel-docente > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 28px, 1220px);
  }

  body.modern-ui {
    font-size: 14px;
  }

  .header-brand > div:first-child {
    display: none;
  }

  .header-brand > div:last-child img {
    width: 46px !important;
  }

  .header-titles {
    text-align: left !important;
  }

  .header-titles > p:first-child,
  .header-titles h1 {
    text-align: left !important;
  }

  .header-titles > p:first-child {
    letter-spacing: 0.1em !important;
  }

  .header-titles h1 span {
    font-size: clamp(1.05rem, 5.1vw, 1.45rem) !important;
  }

  .nav-list li a,
  #link-asistencia-qr {
    min-height: 36px;
    padding: 8px 11px !important;
    font-size: 10.5px !important;
  }

  .hero > .container {
    width: 100%;
    padding: 34px 14px 38px !important;
  }

  .hero > div:first-child > div {
    background: linear-gradient(180deg, rgba(5, 22, 50, 0.76), rgba(5, 22, 50, 0.93)) !important;
  }

  .hero-content {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .hero h2 {
    font-size: clamp(1.8rem, 9.5vw, 2.55rem);
  }

  .hero p {
    font-size: 13.5px;
  }

  .hero-btns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  section {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 30px;
  }

  .noticias-grid,
  .niveles-grid,
  .docentes-grid {
    grid-template-columns: 1fr;
  }

  .nivel-card {
    padding: 24px 21px;
  }

  .docentes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .docente-card {
    padding: 20px 12px;
  }

  .galeria-grid {
    gap: 10px;
  }

  .galeria-item:first-child {
    grid-column: span 2;
    grid-row: auto;
  }

  .contacto-info,
  .contacto-grid > div:last-child {
    padding: 21px;
  }

  .modal-box,
  .modal-overlay > div:not([style*="height:100vh"]) {
    padding: 28px 20px !important;
    border-radius: 18px !important;
  }

  #panel-alumno > div > div:first-child,
  #panel-docente > div > div:first-child,
  #panel-mochila > div > div:first-child,
  #panel-evidencias-pub > div > div:first-child,
  #panel-mis-evidencias > div > div:first-child {
    padding: 15px !important;
  }

  #panel-alumno > div > div:last-child,
  #panel-docente > div > div:nth-child(2),
  #mochila-grid,
  #evidencias-pub-grid,
  #mis-ev-grid {
    padding: 16px !important;
  }

  #mochila-grid,
  #evidencias-pub-grid,
  #mis-ev-grid {
    grid-template-columns: 1fr !important;
  }

  .mochila-page .site-header {
    padding: 12px 14px;
  }

  .mochila-page .site-header-titles p {
    display: none;
  }

  .mochila-page .qr-info {
    align-items: flex-start;
    padding: 10px 14px;
    line-height: 1.35;
  }

  .mochila-page .login-screen {
    padding: 18px 14px;
  }

  .mochila-page .login-card {
    padding: 30px 20px;
  }

  .mochila-page .libros-grid {
    grid-template-columns: 1fr;
  }
}