/*CRISTIAN EDIT*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ════════════════════════════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════════════════════════════ */
:root {
  --brand-dark:   #213850;
  --brand-cyan:   #00d1c1;

  --surface-0:    #f4f6f9;
  --surface-card: #ffffff;
  --border-soft:  rgba(33, 56, 80, 0.1);

  --font-body: 'Plus Jakarta Sans', sans-serif;

  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  260ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card:  0 2px 12px rgba(33,56,80,0.08), 0 1px 3px rgba(33,56,80,0.05);
  --shadow-hover: 0 8px 28px rgba(33,56,80,0.14), 0 2px 8px rgba(33,56,80,0.08);
}

/* ════════════════════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
   ════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-body) !important;
  background-color: var(--surface-0) !important;
}
input, textarea, button, select, optgroup {
  font-family: var(--font-body) !important;
}
h1, h2, h3, .h1, .h2, .h3 {
  color: var(--brand-dark) !important;
}
h3, .h3 { font-size: 1.6rem !important; }
h4, .h4 { font-size: 1.4rem !important; }

/* Texto general: más legible — alineado con el estilo de fpeuroformac.com */
body  { font-size: 1.025rem !important; }
p, li, td, th, label,
.card-body, .it-view__definition { font-size: 1rem !important; }

/* it-view: términos alineados a la izquierda */
.it-view__term { text-align: left !important; }

/* it-view: títulos de sección en azul de marca */
.card-body .it-view__title { color: var(--brand-dark) !important; }

/* it-view: layout compacto — primera columna auto, segunda rellena */
.it-view__data {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  column-gap: 1.5rem !important;
  row-gap: 0.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.it-view__data > .it-view__term,
.it-view__data > .it-view__definition {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}

/* it-view: scroll horizontal en mobile para evitar desbordamiento */
@media (max-width: 991.98px) {
  .card-body:has(.it-view__data) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .it-view__data {
    min-width: max-content !important;
  }
}

/* Links: heredan tamaño del contexto, solo aseguramos color base */
a:not(.btn):not(.nav-link) { font-size: inherit !important; }

/* Hora del servidor — alineada a la derecha en el navbar */
span[title="Hora local del servidor"] {
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════════════
   LOGO
   ════════════════════════════════════════════════════════════════ */

/* Navbar (páginas interiores) */
.it-page-navbar__brand-img {
  height: 38px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* Login — selector confirmado por inspección */
.it-page-home__brand-img {
  /* max-height: 56px !important;   0.75 del tamaño original (~75px → 56px) */
  width: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* transform: scale(0.75); */
}

/* ════════════════════════════════════════════════════════════════
   CAPITALIZACIÓN
   ════════════════════════════════════════════════════════════════ */

/* Nav principal: override del text-transform:uppercase del HTML inline */
.it-page__main-nav.navbar-light .navbar-nav .nav-item .nav-link {
  text-transform: none !important;
}

/* Hamburguesa: solo icono visible, sin texto "Menú", pegado al borde derecho */
.it-page__main-nav .navbar-toggler {
  font-size: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}
.it-page__main-nav .navbar-toggler .navbar-toggler-icon {
  display: block !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-right: 0 !important;
}

/* Footer: override Bootstrap .text-uppercase */
footer .text-uppercase,
.it-page-footer_size_lg .foot-desc li a,
.it-page-footer_size_lg .it-page-footer__link {
  text-transform: none !important;
}

/* Tabs clásicas y tabs-primary: respetar capitalización del HTML */
.classic-tabs .tabs-primary .nav-link,
.nav.tabs-primary .nav-link {
  text-transform: inherit !important;
}

/* ════════════════════════════════════════════════════════════════
   SIN GLOW — waves / MDB ripple / estados activos
   ════════════════════════════════════════════════════════════════ */
.waves-effect:hover,
.waves-light:hover,
.waves-effect:focus,
.waves-light:focus,
.waves-effect:active,
.waves-light:active {
  box-shadow: none !important;
  transform: none !important;
}

/* Nav-link: sin escala ni outline al pulsar */
.nav-link:active,
.nav-link:focus,
.nav-link:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.card:focus,
.card:focus-within {
  box-shadow: var(--shadow-hover) !important;
  outline: none !important;
}
.skin-light .pills-primary .nav-link.active,
.skin-light .tabs-primary {
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   ENLACES
   ════════════════════════════════════════════════════════════════ */
a { text-decoration: none !important; }
a:hover { text-decoration: none !important; }

.skin-light footer.it-page-footer_size_lg a:hover {
  color: var(--brand-cyan) !important;
}

/* Reducir espacio entre contenido del footer y el separador hr */
.it-page-footer_size_lg .pt-5.pb-4 {
  padding-bottom: 0.75rem !important;
}

/* Login: eliminar el margen superior del footer del portal home (sobrescribe el mt-5 de Bootstrap) */
.it-home-portal__footer,
.it-home-portal__footer.mt-5 {
  margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) !important;
}
.btn:active,
.btn:focus,
.btn:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Primario: fondo oscuro → hover cyan */
.btn-primary {
  background: var(--brand-dark) !important;
  border: 1.5px solid transparent !important;
  color: #fff !important;
  padding: calc(1rem - 1.5px) calc(2.14rem - 1.5px) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-cyan) !important;
  color: var(--brand-dark) !important;
  border-color: transparent !important;
}

/* Botón activo dentro de un toggle group (lista/mosaico, etc.):
   ya representa el estado actual, así que no debe cambiar al pasar el ratón */
.btn-group > .btn-primary,
.btn-group > .btn-primary:hover,
.btn-group > .btn-primary:focus,
.btn-group > .btn-primary:active {
  background: var(--brand-dark) !important;
  color: #fff !important;
  border-color: transparent !important;
  cursor: default !important;
}

/* Outline primary: contorno oscuro → solo borde y texto cyan en hover, fondo siempre transparente */
.btn-outline-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  padding: calc(1rem - 1.5px) calc(2.14rem - 1.5px) !important;
  box-shadow: none !important;
}

/* Estados activos/focus: neutralizan colores y sombra de Bootstrap
   sin tocar padding, border-width ni transform — así no hay "salto"
   visual al pulsar y los size-modifiers (.btn-md/.btn-sm) cascadean libres */
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--brand-cyan) !important;
  color: var(--brand-cyan) !important;
  box-shadow: none !important;
}

/* Outline grey-dark: mismo efecto que btn-outline-primary */
.btn-outline-grey-dark,
.btn-outline-grey-dark:focus,
.btn-outline-grey-dark:active {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  box-shadow: none !important;
}
.btn-outline-grey-dark:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--brand-cyan) !important;
  color: var(--brand-cyan) !important;
  box-shadow: none !important;
}

/* Tamaños */
.btn-sm  { font-size: 0.85rem !important;  padding: 0.4rem 0.9rem !important; }
.btn-md  { font-size: 0.9rem !important;   padding: 0.5rem 1.2rem !important; }

/* Forma y contexto */
.btn-rounded { border-radius: 50px !important; }
.btn-navbar  { font-size: 0.82rem !important; padding: 0.4rem 1rem !important; }

/* Botón de búsqueda dentro de tablas: compacto, alineado con el input adyacente */
.btn.it-table__search-btn,
.btn-primary.it-table__search-btn {
  padding: 0.375rem 0.9rem !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  align-self: stretch !important;
}

/* btn-white */
.btn-white {
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--brand-dark) !important;
}
.btn-white:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  /* color: #fff !important; */
}

/* Botones dentro de bloques programa */
[id^="programa"] .btn {
  background-color: #152b40 !important;
  color: #fff !important;
  border: none !important;
}
[id^="programa"] .btn:hover,
[id^="programa"] .btn:focus {
  background-color: #00d1c1 !important;
  color: #152b40 !important;
  border-color: transparent !important;
  transform: none !important;
}

/* Botones en tablas */
.table .btn:hover,
.table td .btn:hover,
td .btn:hover {
  background: var(--brand-cyan) !important;
  border-color: var(--brand-cyan) !important;
  color: var(--brand-dark) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  nav.d-print-none.min-vh-100.it-page__sidebar {
    width: 75px !important;
    min-width: 75px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: width var(--t-med), min-width var(--t-med) !important;
  }

  nav.d-print-none.min-vh-100.it-page__sidebar:hover {
    width: 280px !important;
    min-width: 280px !important;
  }

  nav.d-print-none.min-vh-100.it-page__sidebar * { white-space: nowrap; }

  nav.d-print-none.min-vh-100.it-page__sidebar i,
  nav.d-print-none.min-vh-100.it-page__sidebar img,
  nav.d-print-none.min-vh-100.it-page__sidebar svg {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Avatar de bienvenida: hero del sidebar contraído */
  nav.d-print-none.min-vh-100.it-page__sidebar .media:has(.avatar) {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.75rem 0 !important;
  }
  /* El texto de bienvenida está oculto: se elimina del flujo para que el avatar centre bien */
  nav.d-print-none.min-vh-100.it-page__sidebar .media:has(.avatar) .media-body {
    display: none !important;
  }
  nav.d-print-none.min-vh-100.it-page__sidebar img.avatar,
  nav.d-print-none.min-vh-100.it-page__sidebar img.it-avatar_size_sm {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 2px solid var(--brand-cyan) !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(33,56,80,0.12) !important;
    transition: transform var(--t-med), box-shadow var(--t-med) !important;
  }
  nav.d-print-none.min-vh-100.it-page__sidebar:hover img.avatar,
  nav.d-print-none.min-vh-100.it-page__sidebar:hover img.it-avatar_size_sm {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 14px rgba(33,56,80,0.18) !important;
  }

  nav.d-print-none.min-vh-100.it-page__sidebar span,
  nav.d-print-none.min-vh-100.it-page__sidebar .text,
  nav.d-print-none.min-vh-100.it-page__sidebar .label {
    opacity: 0;
    margin-left: 14px !important;
    transition: opacity var(--t-fast);
  }

  nav.d-print-none.min-vh-100.it-page__sidebar:hover span,
  nav.d-print-none.min-vh-100.it-page__sidebar:hover .text,
  nav.d-print-none.min-vh-100.it-page__sidebar:hover .label { opacity: 1; }

  nav.d-print-none.min-vh-100.it-page__sidebar ul li a,
  nav.d-print-none.min-vh-100.it-page__sidebar .nav-link,
  nav.d-print-none.min-vh-100.it-page__sidebar .menu-item {
    display: flex !important;
    align-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: 48px;
  }

  nav.d-print-none.min-vh-100.it-page__sidebar .media-body {
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .it-page-sidebar__nav-link {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .it-page-sidebar__nav-link:hover,
  .it-page-sidebar__nav-link:focus {
    padding-left: 1.5rem !important;
  }

  .it-page-sidebar__nav-link_active,
  .it-page-sidebar__nav-link_active:hover,
  .it-page-sidebar__nav-link_active:focus {
    border-left-color: var(--brand-cyan) !important;
  }

  .it-page__content { flex: 1 1 0% !important; min-width: 0 !important; overflow-x: hidden !important; }

  main { margin-left: 20px; }

  /* Chevron collapse */
  nav.d-print-none.min-vh-100.it-page__sidebar .it-page-sidebar__collapse-icon {
    display: inline-block !important;
    transition: transform var(--t-fast) !important;
    flex-shrink: 0;
  }
  nav.d-print-none.min-vh-100.it-page__sidebar .it-collapse.collapsed .it-page-sidebar__collapse-icon {
    transform: rotate(180deg) !important;
  }

  /* Ocultar submenús cuando el sidebar está contraído */
  nav.d-print-none.min-vh-100.it-page__sidebar:not(:hover) .it-page__sidebar-list {
    display: none !important;
  }

  /* Submenú: línea vertical de acento */
  nav.d-print-none.min-vh-100.it-page__sidebar .it-page__sidebar-list {
    border-left: 2px solid rgba(0, 209, 193, 0.3) !important;
    margin-left: 14px !important;
  }

  /* Ítems hijos: altura compacta */
  nav.d-print-none.min-vh-100.it-page__sidebar .it-page__sidebar-list .nav-link {
    min-height: 38px !important;
    font-size: 0.82rem !important;
  }

  nav.d-print-none.min-vh-100.it-page__sidebar .it-page__sidebar-list .flex-grow-1 {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Iconos sidebar (alineación) */
nav.d-print-none.min-vh-100.it-page__sidebar .nav-link {
  align-items: center !important;
}
nav.d-print-none.min-vh-100.it-page__sidebar .nav-link img {
  margin-top: 0 !important;
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 991.98px) {
  nav.d-print-none.min-vh-100.it-page__sidebar .nav-link img {
    margin-right: 0.5rem !important;
  }
  nav.d-print-none.min-vh-100.it-page__sidebar .nav-link {
    min-height: 56px !important;
  }

  /* Botón colapsar sidebar — solo apariencia, posición original intacta */
  .it-page__sidebar-collapse {
    background: var(--brand-dark) !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 0.9rem 0.75rem !important;
    min-width: unset !important;
  }

  /* Ocultar icono hamburguesa original */
  .it-page__sidebar-collapse i,
  .it-page__sidebar-collapse svg,
  .it-page__sidebar-collapse span:not(.sr-only),
  .it-page__sidebar-collapse .navbar-toggler-icon {
    display: none !important;
  }

  /* Flecha: > por defecto (cerrado), < cuando abierto (via rotate) */
  .it-page__sidebar-collapse::before {
    content: '›' !important;
    display: block !important;
    color: var(--brand-cyan) !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 700 !important;
    transition: transform var(--t-fast), color var(--t-fast) !important;
  }

  /* Sidebar abierto → rota 180° → muestra < */
  .it-page__sidebar-collapse[aria-expanded="true"]::before {
    transform: rotate(180deg) !important;
  }

  /* Hover: fondo sigue oscuro, flecha blanca */
  .btn.it-page__sidebar-collapse:hover,
  .btn.it-page__sidebar-collapse:focus {
    background: var(--brand-dark) !important;
    box-shadow: none !important;
  }
  .it-page__sidebar-collapse:hover::before,
  .it-page__sidebar-collapse:focus::before {
    color: #fff !important;
  }
  /* Hover con sidebar abierto: mantiene la rotación */
  .it-page__sidebar-collapse[aria-expanded="true"]:hover::before {
    transform: rotate(180deg) !important;
    color: #fff !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CARDS — BASE
   ════════════════════════════════════════════════════════════════ */
.card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--t-med), border-color var(--t-med) !important;
}
.card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: none !important;
}

/* ── Cards de curso / temario: alturas iguales por fila ── */
/* Bootstrap .row con row-cols-* ya usa flex-wrap.
   Solo necesitamos que las columnas estiren y la card llene la columna. */
.it-temario .row,
.row[class*="row-cols"] {
  align-items: stretch !important;
}
/* El article.col necesita ser flex para que .h-100 funcione dentro */
.it-temario article.col,
article.col {
  display: flex !important;
  flex-direction: column !important;
}
/* La card ocupa toda la altura de la columna */
.card.h-100 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}
/* El card-body crece para empujar el contenido hacia arriba uniformemente.
   Se excluyen cards con .media (icono + texto horizontal): ya están alineadas
   por sí mismas y forzarles flex-end deja hueco arriba. */
.card.h-100 > .card-body:not(:has(.media)) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Imagen dentro de card */
.card .view.overlay {
  position: relative;
  overflow: hidden;
}
.card .view.overlay img,
.card > .card-img-top {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
}
.card .view.overlay::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(33,56,80,0.18), transparent);
  pointer-events: none;
}

.card-body { padding: 1.1rem 1.2rem !important; }

/* Panel / grupo (cards con collapse) */
.card.mb-4 {
  border-left: 4px solid var(--brand-cyan) !important;
}

/* Tipografía cards de curso — más grande y legible */
article.col .card.h-100 .card-title {
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--brand-dark) !important;
  letter-spacing: 0.01em;
  line-height: 1.4 !important;
  margin-bottom: 0.3rem !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMARIO — §3
   ════════════════════════════════════════════════════════════════ */

/* Grid de módulos: Bootstrap row-cols-* lo maneja nativamente.
   Solo reseteamos la lista de ítems de pie (examen, fin del temario) */
ul.it-temario__items_root {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cards de módulo del temario */
.it-temario-card {
  transition: transform var(--t-med), box-shadow var(--t-med) !important;
}
.it-temario-card > .card-body {
  min-height: 400px !important;
}
.it-temario-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* Estado completado */
.it-temario-card.border-success {
  border-top: 3px solid var(--brand-cyan) !important;
  border-color: var(--border-soft) !important;
}
/* Estado pendiente */
.it-temario-card.grey.lighten-4 {
  background: #f8fafc !important;
  border-color: var(--border-soft) !important;
}

/* Nombre del módulo (nivel 1) */
.it-temario__item-name.it-temario__item-name_nivel_1 {
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--brand-cyan) !important;
  line-height: 1.4 !important;
  display: block;
  margin-bottom: 0.1rem !important;
  transition: color var(--t-fast) !important;
}
.it-temario__item-name.it-temario__item-name_nivel_1:hover {
  color: var(--brand-dark) !important;
}


/* Links dentro del temario — SIN subrayado (§3.2), solo color en hover */
.temario-link-item {
  color: var(--brand-dark) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  transition: color var(--t-fast) !important;
}
.temario-link-item:hover {
  color: var(--brand-cyan) !important;
  border-bottom: none !important;
}

/* Sub-ítems (lección, trabajo, examen) */
.card-body .it-temario__items {
  margin-top: auto !important;
  padding-top: 0.5rem !important;
}
.it-temario__item-link {
  color: rgba(33,56,80,0.65) !important;
  font-size: 0.9rem !important;
  transition: color var(--t-fast) !important;
}
.it-temario__item-link:hover {
  color: var(--brand-cyan) !important;
}

/* ── Hover cyan en enlaces de cursos y lecciones ── */
/* Cubre: títulos de card de curso, nombres de módulo enlazados,
   ítems de lección dentro del temario, y cualquier enlace
   dentro de .it-temario o de cards de contenido */
.it-temario a,
.it-temario__item a,
ul.it-temario__items_root a,
article.col .card.h-100 a,
.card-body a.it-temario__item-name,
.it-temario__item-caption a {
  /* color: var(--brand-dark) !important; */
  /* transition: color var(--t-fast) !important; */
}

/* "Fin del temario" — §3.3 — selectores confirmados por inspección */
/* Icono más grande */
.it-temario__item_q_fin img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
}
/* Alinear icono y texto verticalmente al centro */
.it-temario__item_q_fin .d-flex {
  align-items: center !important;
}
/* Sin subrayado en el enlace, color oscuro base */
.it-temario__item_q_fin .it-temario__item-link {
  text-decoration: none !important;
  color: var(--brand-dark) !important;
}
.it-temario__item_q_fin .it-temario__item-link:hover {
  color: var(--brand-cyan) !important;
  text-decoration: none !important;
}
/* Caption en negrita, texto justificado */
.it-temario__item_q_fin .it-temario__item-caption {
  display: block !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}
/* Igual para los ítems de examen */
.it-temario__item_q_test .it-temario__item-caption {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* ════════════════════════════════════════════════════════════════
   CALENDARIO — §4
   ════════════════════════════════════════════════════════════════ */
.it-calendar__day-header {
  text-transform: none !important;
}

.yellow.lighten-5{
  background-color: #d6f6f4 !important;

}

/* ════════════════════════════════════════════════════════════════
   PENDIENTE — inspeccionar en vivo con DevTools
   ════════════════════════════════════════════════════════════════

  §5  Glow en widgets de Situación académica:
  ───────────────────────────────────────────
  Abrir FALSituacionAcademica.aspx, hacer hover sobre
  «Criterios de calificación», «Realización de contenidos», «Trabajos».
  Copiar el selector del elemento que brilla y añadir:

  .SELECTOR-WIDGET {
    box-shadow: var(--shadow-hover) !important;
    transition: box-shadow var(--t-med) !important;
  }

   ════════════════════════════════════════════════════════════════ */

   .skin-light .text-warning {
    color:var(--brand-cyan) !important;
   }

/* ── Tablas con scroll horizontal en responsive ── */
@media (max-width: 1199.98px) {
  #ITGridModulos,
  #ITGridTrabajosConvocatoria {
    overflow: visible !important;
  }
  #ITGridModulosBody,
  #ITGridTrabajosConvocatoriaBody {
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #ITGridModulosBody .table-responsive,
  #ITGridTrabajosConvocatoriaBody .table-responsive {
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
}

/* ── Icono cabecera de página ── */
.it-page-header__img {
  width: 48px !important;   /* ajusta al tamaño que necesites */
  height: 48px !important;
  object-fit: contain;
}
/* ════════════════════════════════════════════════════════════════
   FIXES RESPONSIVE — móvil (<992px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── 1. Flechita del sidebar pegada al borde izquierdo ── */
  .it-page-usernavbar {
    padding-left: 0 !important;
  }
  .it-page__sidebar-collapse {
    margin-left: 0 !important;
  }

  /* ── 2. Ocultar texto "Menú" del hamburguesa superior ── */
  .it-page__main-nav .navbar-toggler {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0.45rem 0.7rem !important;
  }
  .it-page__main-nav .navbar-toggler .navbar-toggler-icon {
    margin-right: 0 !important;
  }

  /* ── 3. Tablas: scroll horizontal limpio con sidebar abierto ── */
  .it-page__wrapper {
    overflow-x: hidden !important;
  }
  /* .it-page__content {
    min-width: 0 !important;
    flex: 1 1 0% !important;
  } */

  .it-page__content {
  width: 100vw !important;
  min-width: 100vw !important;
  flex: 0 0 100vw !important;
  }
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}
/* ════════════════════════════════════════════════════════════════
   FOOTER — compactar espacios verticales en móvil
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* Container superior: menos padding arriba/abajo */
  .it-page-footer_size_lg .pt-5.pb-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* Primera columna (Nuestros centros): margen inferior reducido */
  .it-page-footer_size_lg .col-12.col-md-4.mb-4 {
    margin-bottom: 0.75rem !important;
  }

  /* WYSIWYG: colapsar márgenes y líneas vacías al mínimo posible */
  .it-page-footer__text {
    line-height: 1.4 !important;
  }
  .it-page-footer__text p,
  .it-page-footer__text div {
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  /* Lista de enlaces legales: más compacta cuando hace wrap */
  .foot-desc {
    line-height: 1.3 !important;
  }
  .foot-desc li {
    margin-bottom: 0.25rem !important;
  }

  /* Separador HR del footer */
  .it-page-footer__rss-sep {
    margin: 0.5rem 0 0 0 !important;
  }

  /* Iconos sociales: padding compacto */
  .it-page-footer_size_lg .it-page-footer__rss.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .it-page-footer_size_lg .container .row.mb-3 {
    margin-bottom: 0 !important;
  }

  /* Copyright: padding mínimo */
  .footer-copyright.p-3 {
    padding: 0.5rem !important;
  }
}

/* ── Botones apilados en mobile: separación vertical ── */
@media (max-width: 991.98px) {
  .btn + .btn,
  .btn + a.btn {
    margin-top: 0.25rem !important;
    margin-left: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   REORDEN: banners mosaico al final del main, debajo de las tarjetas
   ════════════════════════════════════════════════════════════════ */
#mainContent {
  display: flex !important;
  flex-direction: column !important;
}
#mainContent > .container:has(.it-banner-mosaico) {
  order: 999 !important;
  margin-top: 1.5rem !important;
}
/* Elementos inline por naturaleza: que no se estiren al hacer #mainContent flex column */
#mainContent > .btn-group {
  align-self: flex-start !important;
}