/* ====================================================================
   TEMA EDUROCK para la Escuela Científica Virtual
   ====================================================================
   Capa visual portada de la plantilla "Edurock — Bootstrap 5 Education
   Template" (licencia Envato Elements 2CDN7PB36A a nombre de Grupo
   Empresarial Tecnológico Simbiótica SAS, 14-ago-2026).

   QUÉ SE TRAJO Y QUÉ NO — y por qué
   ---------------------------------
   SÍ: la paleta real (tomada de las variables :root de su style.css), la
       tipografía (Inter + Hind, descargadas y servidas EN LOCAL), sus 2095
       iconos de fuente, y la forma de sus componentes (tarjetas de curso,
       hero, botones con gradiente de 45°, chips).

   NO: - Bootstrap completo. Son 190 KB y 1790 clases, y redefine
         `.container`, `.btn`, `.badge`, `.card` y `.breadcrumb`, que este
         panel ya usa con OTRO significado. Medido: 6 colisiones directas.
         El panel además maqueta con CSS Grid propio, no necesita su rejilla.
       - jQuery y sus ~15 plugins (slick, isotope, wow, waypoints,
         magnific-popup, plyr). El panel usa `fetch` y canvas puro sin una
         sola dependencia: meterlos sería peso muerto y rompería el
         "funciona sin internet".
       - Las 375 imágenes de stock (64 MB de estudiantes genéricos). La
         escuela tiene capturas reales de sus laboratorios, que valen más.

   CÓMO FUNCIONA ESTE ARCHIVO
   --------------------------
   `style.css` ya define todo con variables CSS y las usa 50 veces. Así que
   aquí basta REDEFINIR esas variables para que cambie el aspecto de las 30
   páginas sin editar ni una plantilla. Se carga DESPUÉS de style.css.

   Regla que se respetó: se adoptan los VALORES de Edurock manteniendo los
   SIGNIFICADOS del panel. `--accent` sigue siendo el verde de "completado"
   (ahora el verde de Edurock, #44CEA9, no el de GitHub); el violeta de la
   marca entra como variable NUEVA. Si se hubiera puesto el violeta en
   `--accent`, los badges de "clase completada" saldrían violetas y el color
   dejaría de significar nada.
   ==================================================================== */

@import url("fuentes.css");    /* Inter + Hind, locales */
@import url("iconos.css");     /* icofont, 2095 iconos, solo woff2 */

:root {
  /* ---- Paleta, tomada de las variables de Edurock ---- */
  --bg: #0C0E2B;            /* su --darkblack: el fondo de sus páginas dark */
  --bg2: #12143A;           /* intermedio entre --darkblack y --deepgray */
  --card: #191C46;          /* tarjetas: un paso por encima del fondo */
  --border: #2A2E5E;        /* borde sobrio que no compite con el contenido */
  --txt: #ECEDF7;
  --muted: #9FA2CE;         /* su --darkgray, literal */

  /* Semánticos: el VALOR es de Edurock, el SIGNIFICADO es del panel */
  --accent: #44CEA9;        /* su --greencolor  → completado / correcto */
  --accent2: #7C4DFF;       /* su --primaryColor aclarado → enlaces, marca */
  --warn: #FF912C;          /* su --yellow      → aviso / a medias */
  --shadow: 0 4px 24px rgba(0, 0, 0, .45);

  /* ---- Nuevas, de la identidad Edurock ---- */
  --primario: #5F2DED;      /* --primaryColor */
  --secundario: #F2277E;    /* --secondaryColor */
  --grad: linear-gradient(45deg, var(--primario), var(--secundario));
  --grad-suave: linear-gradient(45deg, rgba(95, 45, 237, .18), rgba(242, 39, 126, .14));
  --radio: 4px;             /* --borderRadius */
  --radio2: 10px;           /* --borderRadius3 */
  --radio3: 20px;           /* --borderRadius2 */
  --transicion: .3s;

  /* ---- ESCALA DE ESPACIADO ÚNICA ----
     Un solo valor para el hueco ENTRE tarjetas y para la separación ENTRE
     bloques. Antes había 18 px en unas rejillas, 20 px en otras y márgenes
     verticales sueltos escritos a mano en las plantillas: medido, las tarjetas
     de clase quedaban a 0 px de las cifras mientras entre ellas había 20 px.
     Con una sola variable, el ritmo vertical y el horizontal coinciden siempre. */
  --espacio: 20px;

  /* ---- Tipografía de Edurock ---- */
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;
  --fuente-titulo: "Hind", "Segoe UI", system-ui, sans-serif;
}

/* ==================================================================
   Tipografía
   ================================================================== */
body { font-family: var(--fuente); }

h1, h2, h3, h4, h5, .ed-titulo {
  font-family: var(--fuente-titulo);
  letter-spacing: -.2px;
}

/* Hind tiene un trazo más ligero que la fuente del sistema: los títulos
   necesitan algo más de peso para conservar la jerarquía anterior. */
h1 { font-weight: 700 }
h2, h3 { font-weight: 600 }

code, pre, .mono { font-family: Consolas, "Courier New", monospace }

/* ==================================================================
   Refinado de los componentes que YA existen en el panel
   ================================================================== */
.topbar {
  background: rgba(12, 14, 43, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  align-items: center;
}

/* ---- Marca a dos líneas ----
   El nombre completo de la escuela son ~180 caracteres. En la barra va la
   MARCA en grande y las cuatro disciplinas como subtítulo; el nombre entero
   está en el atributo `title` del enlace, en el título del navegador y en el
   pie. Así se lee la identidad completa sin aplastar los botones. */
.topbar h1.marca { font-size: 0; margin: 0; min-width: 0 }
.topbar h1.marca a {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit; min-width: 0;
}
.topbar h1.marca a:hover { text-decoration: none }
.marca-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.marca-nombre {
  font-family: var(--fuente-titulo);
  font-size: 18px; font-weight: 700; line-height: 1.15;
  white-space: nowrap;
}
.marca-sub {
  font-family: var(--fuente);
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  color: var(--muted);
  letter-spacing: .2px;
  /* Si la ventana es estrecha se recorta con puntos suspensivos en lugar de
     empujar los botones fuera de la barra. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 62ch;
}
/* Por debajo de este ancho el subtítulo estorba más de lo que informa: la
   identidad completa sigue en el pie y en el título de la pestaña. */
@media (max-width: 900px) {
  .marca-sub { display: none }
  .marca-nombre { font-size: 16px }
}

/* El hero pasa del gris plano al gradiente de marca de Edurock, con un
   halo radial que imita el de su home de IA. */
.hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(242, 39, 126, .16), transparent 60%),
    radial-gradient(700px 380px at 5% 0%, rgba(95, 45, 237, .20), transparent 62%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio2);
  position: relative;
  overflow: hidden;
}
/* Línea de acento superior: es la firma visual de sus tarjetas destacadas */
.hero::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad);
}

.panel-ctrl, .tarjeta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio2);
  transition: border-color var(--transicion);
}
.panel-ctrl:hover { border-color: rgba(124, 77, 255, .35) }

.btn {
  font-family: var(--fuente);
  font-weight: 600;
  border-radius: var(--radio);
  transition: all var(--transicion);
}
.btn.primary, .btn.primaria {
  background: var(--grad);
  border: none;
  color: #fff;
}
.btn.primary:hover, .btn.primaria:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.badge {
  font-family: var(--fuente);
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 50px;      /* sus badges son pastilla completa */
}

a { color: var(--accent2); transition: color var(--transicion) }
a:hover { color: var(--secundario) }

/* El número de la tarjeta estaba en un gris fijo (#20293c) pensado para el
   fondo casi negro anterior. Sobre el azul de Edurock quedaba invisible. Se
   pasa al gradiente de marca a baja opacidad: se lee como filigrana y además
   ahora sí pertenece a la paleta. */
.card .num {
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .3;
}

/* Las tarjetas de clase heredan la elevación al pasar el ratón de sus
   course-card, que es lo que da la sensación de "catálogo de cursos". */
.card {
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 77, 255, .40);
  box-shadow: var(--shadow);
}

/* La barra de progreso con el gradiente de marca en vez del verde plano */
.progressbar > div { background: linear-gradient(90deg, var(--accent), var(--primario)) }

/* ==================================================================
   Componentes NUEVOS de Edurock
   Prefijo `ed-` para que no puedan chocar nunca con lo que ya existe.
   ================================================================== */

/* ---- Hero de la home, versión "AI Machine Learning" (su home-10) ----
   Su versión usa una foto de red neuronal de 4,3 MB. Aquí el mismo efecto
   se dibuja con CSS: gradientes más un patrón de puntos. Pesa 0 KB, escala
   a cualquier pantalla y no hay que sincronizar una imagen. */
.ed-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio2);
  border: 1px solid var(--border);
  background:
    radial-gradient(1100px 520px at 78% -15%, rgba(242, 39, 126, .20), transparent 58%),
    radial-gradient(820px 460px at 12% 105%, rgba(95, 45, 237, .26), transparent 60%),
    linear-gradient(160deg, #12143A 0%, #0C0E2B 60%);
  padding: 46px 40px;
}
.ed-hero::before {
  /* Malla de puntos: evoca la red neuronal de su hero sin la foto */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(159, 162, 206, .22) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(700px 340px at 20% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(700px 340px at 20% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}
.ed-hero > * { position: relative }
.ed-hero .ed-etiqueta {
  font-family: var(--fuente);
  font-size: 12px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--secundario);
  display: block; margin-bottom: 12px;
}
.ed-hero h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 22ch;
}
.ed-hero h2 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ed-hero p { color: var(--muted); max-width: 62ch; margin: 0 0 20px; font-size: 14.5px }
.ed-acciones { display: flex; gap: 10px; flex-wrap: wrap }

/* ==================================================================
   RITMO VERTICAL Y HORIZONTAL
   ==================================================================
   Todos los bloques de la página se separan con el MISMO valor con el que se
   separan las tarjetas entre sí. Eso es lo que hace que la retícula se lea
   como una sola cuadrícula y no como bloques pegados unos a otros. */
.ed-rejilla, .grid { gap: var(--espacio) }
.ed-hero, .hero, .ed-rejilla, .grid { margin-bottom: var(--espacio) }
/* El último bloque no arrastra margen sobrante contra el pie */
.container > *:last-child { margin-bottom: 0 }

/* ---- Tarjeta de curso (su course-grid) ---- */
.ed-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* Fila de cifras: columnas EXPLÍCITAS en vez de auto-fit.
   Con `auto-fit` el número de columnas depende del ancho disponible, así que
   4 cifras podían repartirse en 4, 3 o 2 columnas de anchos distintos según la
   ventana y la fila quedaba descompensada. Fijándolas, los cuatro bloques
   miden siempre lo mismo. */
.ed-rejilla.cifras { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 860px) { .ed-rejilla.cifras { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 420px) { .ed-rejilla.cifras { grid-template-columns: 1fr } }
.ed-curso {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio2);
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
  text-decoration: none; color: inherit;
}
.ed-curso:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 77, 255, .45);
  box-shadow: var(--shadow);
  text-decoration: none;
}
/* Cabecera de la tarjeta: donde su plantilla pone la foto de stock, aquí va
   un bloque de gradiente con el icono de la clase. Ventaja real: no hay 375
   imágenes que arrastrar ni que mantener. */
.ed-curso-cab {
  height: 104px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; line-height: 1;
  background: var(--grad-suave);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ed-curso-nivel {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 50px;
  background: rgba(12, 14, 43, .78);
  color: var(--muted);
  border: 1px solid var(--border);
}
.ed-curso-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 }
.ed-curso h4 {
  margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35;
}
.ed-curso p { margin: 0 0 12px; font-size: 12.8px; color: var(--muted); line-height: 1.55; flex: 1 }
.ed-curso-pie {
  display: flex; align-items: center; gap: 12px;
  padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}
.ed-curso-pie .i { color: var(--accent2) }

/* ---- Chips y metadatos ---- */
.ed-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(124, 77, 255, .14);
  color: #C6B6FF;
  border: 1px solid rgba(124, 77, 255, .28);
}
.ed-chip.ok { background: rgba(68, 206, 169, .14); color: #7BE7CB; border-color: rgba(68, 206, 169, .3) }
.ed-chip.warn { background: rgba(255, 145, 44, .14); color: #FFC08A; border-color: rgba(255, 145, 44, .3) }
.ed-chip.rosa { background: rgba(242, 39, 126, .14); color: #FF8FBB; border-color: rgba(242, 39, 126, .3) }

/* ---- Cifra destacada ---- */
.ed-cifra {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radio2); padding: 16px; text-align: center;
}
.ed-cifra b {
  display: block; font-family: var(--fuente-titulo);
  font-size: 30px; font-weight: 700; line-height: 1.05;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ed-cifra span {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .7px;
}

/* ---- Encabezado de sección ---- */
.ed-seccion { margin: 30px 0 14px }
.ed-seccion .ed-etiqueta {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--secundario);
}
.ed-seccion h3 { margin: 5px 0 0; font-size: 20px }
.ed-seccion p { margin: 5px 0 0; color: var(--muted); font-size: 13px }

/* ==================================================================
   CRÉDITOS DEL PIE · logos de GETS y Quantixs
   ==================================================================
   El logo de Quantixs se recompuso como lockup horizontal (365×62, ratio 5,9)
   porque el original apila símbolo + nombre + tagline y a la altura de un pie
   el texto no se leía. Con GETS en 267×91 (ratio 2,9), ambos comparten ahora
   casi la misma altura y el peso visual queda equilibrado sin trucos. */
.creditos {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.credito {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  /* Los logos entran algo apagados y se despiertan al pasar el ratón: en un
     pie, la marca acompaña, no compite con el contenido. */
  opacity: .72;
  transition: opacity var(--transicion);
}
.credito:hover { opacity: 1; text-decoration: none }
.credito-txt {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600;
}
.logo-gets { height: 22px; width: auto; display: block }
.logo-quantixs { height: 24px; width: auto; display: block }
/* Quantixs va 2 px más alto que GETS a propósito: su símbolo circular sobresale
   por arriba y por abajo del texto, así que con la misma medida exacta el
   nombre se veía más pequeño que el de GETS. */

.credito-sep {
  width: 1px; height: 26px;
  background: var(--border);
}

@media (max-width: 520px) {
  .creditos { gap: 14px }
  .credito-sep { display: none }
}

/* ==================================================================
   Accesibilidad y respeto por el usuario
   ================================================================== */
/* Quien pide menos movimiento no debería sufrir los desplazamientos de las
   tarjetas al pasar el ratón. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important }
  .ed-curso:hover, .btn.primary:hover { transform: none }
}

/* Foco visible: la plantilla original lo pierde en varios sitios y sin él
   el panel no se puede navegar con teclado. */
a:focus-visible, button:focus-visible, .ed-curso:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .ed-hero { padding: 30px 22px }
  .ed-rejilla { grid-template-columns: 1fr }
}