/* =====================================================
   MAESTRO EN CSS PURO — ya compilado, sin SCSS
   Pegar en el campo "SCSS sin modificar" de Boost
   (el campo acepta CSS directamente).
   El PRIMER campo (SCSS inicial) debe quedar VACIO.
   ===================================================== */

@charset "UTF-8";
/* =====================================================
   SPARTAN FUTURISTA v2 — Moodle 5.0 (Boost)
   PEGAR EN EL SEGUNDO CAMPO:
   "SCSS sin modificar" (theme_boost | scss)
   Sustituye por completo a la versión anterior.
   Requiere las fuentes del archivo scss_inicial_fuentes.scss
   en el primer campo.
   ===================================================== */
/* ---------- Paleta (calibrada con el logo OPOFCS) ---------- */
/* ---------- Base: fondo con rejilla táctica ---------- */
body {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.05rem;
  color: #e8eefc;
}

#page, #page-wrapper,
.pagelayout-standard #page.drawers .main-inner {
  background: linear-gradient(rgba(41, 121, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 121, 255, 0.03) 1px, transparent 1px), radial-gradient(ellipse at 50% -10%, #0a1a45 0%, #04070f 55%) !important;
  background-size: 40px 40px, 40px 40px, cover !important;
  background-attachment: fixed !important;
  color: #e8eefc;
}

#page.drawers .main-inner,
#region-main,
.card,
.block,
.activity-item,
.que,
.forumpost {
  background: rgba(10, 18, 40, 0.88) !important;
  color: #e8eefc;
  border: 1px solid #1b2a4a;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* ---------- Tipografía futurista ---------- */
h1, h2, h3,
.page-header-headings h1 {
  font-family: "Orbitron", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8eefc !important;
  text-shadow: 0 0 24px rgba(41, 121, 255, 0.45);
}

h4, h5, h6 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8eefc !important;
}

a {
  color: #00e5ff;
  transition: color 0.15s, text-shadow 0.15s;
}

a:hover {
  color: rgb(51, 234.2, 255);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

.text-muted, .dimmed_text, small {
  color: #8fa3c8 !important;
}

/* ---------- Barra superior con línea de energía ---------- */
.navbar {
  background: rgba(4, 7, 15, 0.9) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, #2979ff, #00e5ff, #d4b36b, transparent) 1;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

.navbar .nav-link, .navbar-brand {
  color: #e8eefc !important;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.navbar .nav-link:hover {
  color: #00e5ff !important;
}

.navbar .logo, .navbar-brand img {
  filter: drop-shadow(0 0 10px rgba(41, 121, 255, 0.6));
}

/* ---------- Navegación secundaria (pestañas de curso) ---------- */
.secondary-navigation,
.secondary-navigation .navigation,
.secondary-navigation .moremenu {
  background: transparent !important;
  border-bottom: 1px solid #1b2a4a;
}

.secondary-navigation .nav-link,
.moremenu .nav-link {
  color: #8fa3c8 !important;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.secondary-navigation .nav-link:hover,
.moremenu .nav-link:hover {
  color: #00e5ff !important;
}

.secondary-navigation .nav-link.active,
.moremenu .nav-link.active {
  color: #e8eefc !important;
  background: transparent !important;
  border-bottom: 3px solid #00e5ff !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

/* ---------- Cajón lateral ---------- */
.drawer, [data-region=drawer] {
  background: rgba(4, 8, 20, 0.95) !important;
  border-right: 1px solid #1b2a4a;
  backdrop-filter: blur(10px);
}

.drawer .list-group-item {
  background: transparent !important;
  color: #8fa3c8 !important;
  border: 0;
  border-radius: 10px;
  margin: 2px 8px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
}

.drawer .list-group-item.active,
.drawer .list-group-item:hover {
  background: linear-gradient(90deg, rgba(41, 121, 255, 0.18), transparent) !important;
  color: #e8eefc !important;
  border-left: 3px solid #00e5ff;
  padding-left: 1.1rem;
}

/* ---------- Botones ---------- */
.btn {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
}

.btn-primary {
  background: linear-gradient(135deg, #2979ff, #0d47c1);
  border: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 20px rgba(41, 121, 255, 0.4), inset 0 0 12px rgba(0, 229, 255, 0.15);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, rgb(81.8, 146.5476635514, 255), #2979ff);
  box-shadow: 0 0 32px rgba(0, 229, 255, 0.55), inset 0 0 16px rgba(0, 229, 255, 0.25);
  transform: translateY(-1px);
}

.btn-secondary, .btn-outline-secondary {
  background: #0e1a3a;
  color: #e8eefc;
  border: 1px solid #1b2a4a;
}

.btn-secondary:hover {
  border-color: #00e5ff;
  color: #00e5ff;
}

/* ---------- Tarjetas de curso: efecto holograma ---------- */
.dashboard-card, .course-card, .coursebox {
  position: relative;
  background: rgba(10, 18, 40, 0.9) !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard-card::before, .course-card::before, .coursebox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dashboard-card:hover, .course-card:hover, .coursebox:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.6) !important;
  box-shadow: 0 12px 40px rgba(41, 121, 255, 0.3), 0 0 0 1px rgba(0, 229, 255, 0.2);
}

.dashboard-card:hover::before, .course-card:hover::before, .coursebox:hover::before {
  opacity: 1;
}

.coursebox .coursename a {
  font-family: "Orbitron", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #e8eefc !important;
}

.coursebox .coursename a:hover {
  color: #00e5ff !important;
}

/* ---------- Barras de progreso con brillo ---------- */
.progress {
  background: #0b1530;
  border-radius: 20px;
  height: 9px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.progress-bar {
  background: linear-gradient(90deg, #2979ff, #00e5ff);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

/* ---------- Bloques laterales ---------- */
.block .card-title, .block h5 {
  font-family: "Orbitron", sans-serif !important;
  color: #00e5ff !important;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #2979ff, #d4b36b) 1;
  display: inline-block;
  padding-bottom: 6px;
}

/* ---------- Insignias y elementos "dorados" ---------- */
.badge-info, .badge-primary {
  background: linear-gradient(135deg, #2979ff, #0d47c1) !important;
}

.badge-warning, .rui-badge--gold {
  background: linear-gradient(135deg, #d4b36b, #a8853f) !important;
  color: #1a1200 !important;
}

/* ---------- Formularios ---------- */
.form-control, .custom-select, select, input[type=text],
input[type=password], textarea {
  background: rgba(8, 14, 34, 0.9) !important;
  border: 1px solid #1b2a4a !important;
  color: #e8eefc !important;
  border-radius: 10px;
  font-family: "Rajdhani", sans-serif;
}

.form-control:focus {
  border-color: #00e5ff !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.2), 0 0 18px rgba(0, 229, 255, 0.25);
}

/* ---------- Tablas ---------- */
.generaltable {
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
}

.generaltable thead th {
  background: #0e1a3a !important;
  color: #00e5ff !important;
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-color: #1b2a4a !important;
}

.generaltable td {
  background: rgba(10, 18, 40, 0.7) !important;
  border-color: #1b2a4a !important;
  color: #e8eefc;
}

.generaltable tbody tr:hover td {
  background: #0e1a3a !important;
}

/* ---------- Migas de pan y cabecera ---------- */
#page-header, .page-context-header, .breadcrumb {
  background: transparent !important;
}

.breadcrumb-item, .breadcrumb-item a {
  color: #8fa3c8 !important;
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.breadcrumb-item a:hover {
  color: #00e5ff !important;
}

/* ---------- Pestañas clásicas ---------- */
.nav-tabs {
  border-bottom: 1px solid #1b2a4a;
  background: transparent !important;
}

.nav-tabs .nav-link {
  color: #8fa3c8 !important;
  border: 0;
}

.nav-tabs .nav-link.active {
  background: transparent !important;
  color: #e8eefc !important;
  border-bottom: 3px solid #00e5ff !important;
}

/* ---------- Área personal 5.0: lista de cursos ---------- */
.block_myoverview .course-listitem,
.block_myoverview .list-group-item,
.block_myoverview .course-summaryitem {
  background: rgba(10, 18, 40, 0.85) !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 14px !important;
  color: #e8eefc !important;
  margin-bottom: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.block_myoverview .course-listitem:hover {
  border-color: rgba(0, 229, 255, 0.5) !important;
  box-shadow: 0 4px 24px rgba(41, 121, 255, 0.25);
}

.block_myoverview .coursename {
  color: #e8eefc !important;
}

.block_myoverview .categoryname {
  color: #8fa3c8 !important;
}

/* ---------- Desplegables ---------- */
.dropdown-menu {
  background: rgba(14, 26, 58, 0.97) !important;
  border: 1px solid #1b2a4a;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.dropdown-item {
  color: #e8eefc !important;
  font-family: "Rajdhani", sans-serif;
}

.dropdown-item:hover {
  background: rgba(41, 121, 255, 0.15) !important;
  color: #00e5ff !important;
}

/* ---------- Login futurista ---------- */
#page-login-index #page {
  background: radial-gradient(ellipse at 50% 0%, #0d2258 0%, #04070f 65%) !important;
}

#page-login-index .card, .login-container {
  background: rgba(10, 18, 40, 0.92) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(41, 121, 255, 0.25);
  backdrop-filter: blur(10px);
}

/* ---------- Pie ---------- */
#page-footer, footer {
  background: rgba(3, 6, 14, 0.95) !important;
  border-top: 1px solid #1b2a4a;
  color: #8fa3c8;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #04070f;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#2979ff, #00e5ff);
  border-radius: 10px;
}

/* ---------- Accesibilidad: respetar movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* =====================================================
   EXTRAS DEL PANEL (hero + botones + tarjetas)
   Anadir AL FINAL del campo "SCSS sin modificar" de Boost.
   Sustituye al truco de HTML adicional (borralo de alli).
   ===================================================== */
/* Fondo del hero */
.age-hero {
  background: url("https://opofcsapp.com/img-age/hero_age.webp") top center/cover no-repeat #050a19 !important;
}

/* Botones del panel */
.age-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2979ff, #0d47c1) !important;
  border: 1px solid rgba(0, 229, 255, 0.45) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(41, 121, 255, 0.4);
  transition: all 0.2s ease;
}

.age-btn:hover {
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
  transform: translateY(-2px);
  color: #fff !important;
}

/* Tarjetas del panel */
.age-card {
  background: rgba(10, 18, 40, 0.9) !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.age-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.age-card:hover {
  border-color: rgba(0, 229, 255, 0.55) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 34px rgba(41, 121, 255, 0.28);
}

.age-card:hover::before {
  opacity: 1;
}

/* =====================================================
   PACK CINEMATOGRAFICO — Metodo AGE
   Anadir AL FINAL del campo "SCSS sin modificar" de Boost
   (despues del tema futurista y de panel_extras).
   ===================================================== */
/* ---------- 1. Marca de agua: leon flotando en todas las paginas ---------- */
body::after {
  content: "";
  position: fixed;
  right: -60px;
  bottom: -40px;
  width: 480px;
  height: 700px;
  background: url("https://opofcsapp.com/img-age/leon_marca.webp") center/contain no-repeat;
  mix-blend-mode: screen; /* el fondo negro del logo desaparece */
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 2. Vinateado de cine sobre toda la pantalla ---------- */
/* vinateado retirado (v14): interferia con los menus */

/* z-index de #page retirado (v14) */
.navbar { z-index: 1030; }
.navbar.fixed-top { position: fixed !important; }
/* Los cajones laterales recuperan su posicionamiento nativo */
.drawer, [data-region="fixed-drawer"] { position: fixed !important; }

/* ---------- 3. Destello de luz que recorre el hero ---------- */
.age-hero {
  position: relative;
}

.age-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 25%;
  background: linear-gradient(100deg, transparent, rgba(120, 190, 255, 0.13), transparent);
  transform: skewX(-18deg);
  animation: age-shine 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes age-shine {
  0%, 55% {
    left: -30%;
  }
  75%, 100% {
    left: 130%;
  }
}
/* ---------- 4. Bordes siempre solidos y elegantes ---------- */
.dropzone,
.section .divider,
.course-content .divider,
.dashedbottom, .dashed {
  border-style: solid !important;
  border-color: #1b2a4a !important;
}

hr {
  border-top: 1px solid #1b2a4a;
  opacity: 1;
}

/* Afinado profesional de las cajas */
.card, .block, #region-main {
  border-radius: 18px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- 5. Login de pelicula ---------- */
#page-login-index {
  background: url("https://opofcsapp.com/img-age/login_fondo.webp") center 20%/cover no-repeat fixed #04070f !important;
}

#page-login-index #page {
  background: radial-gradient(ellipse at 50% 45%, rgba(4, 7, 15, 0.25) 0%, rgba(4, 7, 15, 0.88) 90%) !important;
  min-height: 100vh;
}

#page-login-index .login-container,
#page-login-index .card {
  background: rgba(8, 14, 32, 0.82) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(41, 121, 255, 0.25) !important;
  backdrop-filter: blur(14px);
}

#page-login-index h1, #page-login-index h2 {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 0.1em;
  text-shadow: 0 0 24px rgba(41, 121, 255, 0.7);
}

#page-login-index .btn-primary {
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
}

/* ---------- 6. Respeto al usuario: sin animaciones si las tiene desactivadas ---------- */
@media (prefers-reduced-motion: reduce) {
  .age-hero::after {
    animation: none;
    display: none;
  }
}


/* =====================================================
   PARCHE DE CONTRASTE — anadir AL FINAL del campo
   "SCSS sin modificar" (debajo del CSS maestro)
   ===================================================== */
body, #page, .card, .block, #region-main {
  --bs-body-color: #e8eefc;
  --bs-heading-color: #e8eefc;
  --bs-emphasis-color: #e8eefc;
  --bs-secondary-color: #8fa3c8;
  --bs-tertiary-color: #8fa3c8;
  --bs-border-color: #1b2a4a;
  --bs-link-color: #00e5ff;
  --bs-link-hover-color: #6cf2ff;
}
.table, table {
  --bs-table-color: #e8eefc;
  --bs-table-bg: transparent;
  --bs-table-striped-color: #e8eefc;
  --bs-table-striped-bg: rgba(14, 26, 58, .5);
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: rgba(41, 121, 255, .12);
  --bs-table-border-color: #1b2a4a;
  color: #e8eefc;
}
.table td, .table th, table td, table th {
  color: #e8eefc !important;
  border-color: #1b2a4a !important;
}
.table thead th, table thead th {
  color: #00e5ff !important;
}
label, .form-label, .col-form-label, legend, .fitem .fitemtitle {
  color: #e8eefc !important;
}
.form-check-label, .custom-control-label { color: #c7d4ee !important; }
.badge.bg-light, .badge.text-dark {
  background: #0e1a3a !important;
  color: #8fa3c8 !important;
}
.dropdown-menu .dropdown-item.disabled { color: #5a6b8f !important; }
.page-item .page-link {
  background: #0a1228; border-color: #1b2a4a; color: #c7d4ee;
}
.page-item.active .page-link { background: #2979ff; border-color: #2979ff; }
.initialbar .page-item .page-link { font-size: .8rem; }
.text-dark, .link-dark { color: #e8eefc !important; }
.bg-white, .bg-light { background-color: #0a1228 !important; }


/* =====================================================
   PARCHE LOGIN — la imagen en la capa correcta
   ===================================================== */
#page-login-index,
#page-login-index #page-wrapper,
#page-login-index .main-inner {
  background: transparent !important;
}
body#page-login-index {
  background: #04070f !important;
}
#page-login-index #page {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(4, 7, 15, .1) 0%, rgba(4, 7, 15, .82) 92%),
    url("https://opofcsapp.com/img-age/login_fondo.webp") center 30% / cover no-repeat fixed #04070f !important;
  min-height: 100vh;
}


/* =====================================================
   PARCHE v4 - fondo de imagen + contenido mas arriba
   ===================================================== */
#page, #page-wrapper,
.pagelayout-standard #page.drawers .main-inner {
  background:
    linear-gradient(rgba(3, 6, 14, .55), rgba(3, 6, 14, .8)),
    url("https://opofcsapp.com/img-age/fondo_general.webp") center / cover no-repeat fixed #04070f !important;
}
#page.drawers .main-inner {
  background: rgba(8, 14, 32, .94) !important;
}
#page-header {
  padding-top: .4rem !important;
  margin-bottom: 0 !important;
}
#page-header .page-context-header { margin-bottom: .3rem !important; }
.secondary-navigation { margin-bottom: .6rem !important; }


/* =====================================================
   PARCHE MOVIL v7 — pantallas hasta 820px
   ===================================================== */
@media (max-width: 820px) {

  /* El "fixed" no funciona en movil: fondo normal */
  #page, #page-wrapper,
  .pagelayout-standard #page.drawers .main-inner {
    background-attachment: scroll !important;
  }
  #page-login-index #page {
    background-attachment: scroll !important;
  }

  /* Hero: version vertical con el rotulo visible, altura proporcional */
  .age-hero {
    background-image: url("https://opofcsapp.com/img-age/hero_age_movil.webp") !important;
    background-position: center top !important;
    min-height: 0 !important;
    aspect-ratio: 900 / 980;
    align-items: flex-end;
  }
  .age-hero .age-btn {
    margin: 0 auto;              /* boton centrado */
  }

  /* Sin efectos pesados en movil */
  .age-hero::after { display: none !important; }
  #page.drawers .main-inner { backdrop-filter: none !important; }
  body::before { display: none !important; }   /* vinateado fuera */

  /* Marca de agua discreta */
  body::after {
    width: 200px !important;
    height: 290px !important;
    right: -30px !important;
    bottom: -20px !important;
    opacity: .05 !important;
  }

  /* Contenido a todo el ancho util */
  #page.drawers { padding-left: .5rem !important; padding-right: .5rem !important; }
  #page.drawers .main-inner { padding-left: .8rem !important; padding-right: .8rem !important; }

  /* Tipografia y tarjetas mas compactas */
  h1, .page-header-headings h1 { font-size: 1.3rem !important; }
  .age-card { padding: 16px !important; }
  .age-btn { font-size: .72rem !important; padding: 9px 14px !important; }

  /* Barra de estadisticas apilada y legible */
  .secondary-navigation .nav-link { font-size: .72rem !important; padding: .5rem .6rem !important; }
}


/* =====================================================
   PARCHE INTERIOR DE CURSO v8
   ===================================================== */

/* Secciones (temas) como tarjetas */
.course-content ul.topics li.section,
.course-content .course-section {
  background: rgba(10, 18, 40, .8) !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 16px !important;
  margin-bottom: 18px !important;
  padding: 6px 18px 14px !important;
}
.course-content .sectionname,
.course-content .course-section-header h3 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: .08em;
  color: #e8eefc !important;
}
.course-section-header {
  border-bottom: 1px solid #1b2a4a;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Actividades como filas con acento al pasar */
.activity-item {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: all .2s ease;
  background: transparent !important;
}
.activity-item:hover {
  background: rgba(41, 121, 255, .08) !important;
  border-color: rgba(0, 229, 255, .35) !important;
}
.activity-item .activityname a {
  color: #e8eefc !important;
  font-weight: 600;
}
.activity-item .activityname a:hover { color: #00e5ff !important; }

/* Indice lateral del curso (columna izquierda) */
.courseindex, .courseindex-section {
  background: transparent !important;
  color: #c7d4ee !important;
}
.courseindex .courseindex-link,
.courseindex .courseindex-sectionname {
  color: #c7d4ee !important;
  font-size: .85rem;
}
.courseindex .courseindex-link:hover { color: #00e5ff !important; }
.courseindex-item.active,
.courseindex-item.pageitem {
  background: rgba(41, 121, 255, .18) !important;
  border-radius: 8px;
  border-left: 3px solid #00e5ff;
}

/* Insignia de completado */
.activity-item .btn-outline-secondary,
.completion-dropdown button {
  border-color: #1b2a4a !important;
  color: #8fa3c8 !important;
}


/* =====================================================
   PARCHE v9 — controles del modo edicion bien visibles
   ===================================================== */

/* Lineas de insercion entre actividades */
.course-content .divider,
.course-content hr.divider,
.section .divider {
  border-top: 2px dashed rgba(0, 229, 255, .55) !important;
  opacity: 1 !important;
}

/* Boton "+" de insertar actividad / seccion */
button.add-content,
.add-content,
[data-action="open-chooser"],
.section-modchooser .section-modchooser-link,
.changenumsections a,
.add-subsection {
  background: rgba(41, 121, 255, .22) !important;
  border: 1px solid rgba(0, 229, 255, .7) !important;
  color: #aef4ff !important;
  border-radius: 20px !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, .35);
  opacity: 1 !important;
}
button.add-content:hover,
[data-action="open-chooser"]:hover,
.section-modchooser .section-modchooser-link:hover {
  background: rgba(41, 121, 255, .45) !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, .6);
  color: #ffffff !important;
}

/* Pastilla "+ Anadir una actividad o un recurso" */
.section .btn-add-activity,
.course-content .btn.add-content span {
  color: #dff6ff !important;
  font-weight: 700;
}

/* Zonas de arrastre al mover actividades */
.dropzone, .drop-target, .drag-preview {
  border: 2px dashed #00e5ff !important;
  background: rgba(0, 229, 255, .07) !important;
}

/* Barra inferior de acciones masivas (Visibilidad, Duplicar, Mover...) */
.sticky-footer, [data-region="sticky-footer"] {
  background: rgba(5, 10, 24, .97) !important;
  border-top: 1px solid rgba(0, 229, 255, .4) !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
}
.sticky-footer .btn, [data-region="sticky-footer"] .btn {
  color: #c7e9ff !important;
  font-size: .72rem !important;
  letter-spacing: .04em;
}
.sticky-footer .btn:hover { color: #00e5ff !important; }

/* Iconos de edicion (lapiz, tres puntos) mas visibles */
.course-content .inplaceeditable .quickeditlink,
.course-content .icon.fa-pen,
.action-menu .dropdown-toggle .icon {
  color: #8fd8ff !important;
  opacity: .9 !important;
}
.course-content .activity-item .actions .icon { color: #9db2d8 !important; }


/* =====================================================
   PARCHE v10 — barra de acciones masivas perfecta
   ===================================================== */
.sticky-footer,
[data-region="sticky-footer"] {
  padding: 10px 18px !important;
}
.sticky-footer .sticky-footer-content,
[data-region="sticky-footer"] > div {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 8px 22px;
  overflow: visible !important;
}
.sticky-footer .btn,
[data-region="sticky-footer"] .btn {
  white-space: nowrap;
  padding: 6px 10px !important;
  border-radius: 10px;
}
.sticky-footer .btn:hover {
  background: rgba(41, 121, 255, .18) !important;
}
/* Iconos (ojo, duplicar, mover...) en cian visible */
.sticky-footer .icon,
[data-region="sticky-footer"] .icon,
.sticky-footer i,
[data-region="sticky-footer"] i {
  color: #8fd8ff !important;
  font-size: 1.05rem;
}
.sticky-footer .btn:hover .icon { color: #00e5ff !important; }


/* =====================================================
   PARCHE v11 — menus desplegables solidos y por encima
   ===================================================== */

/* Menu contextual: fondo SOLIDO y siempre por encima de todo */
.dropdown-menu {
  background: #0d1836 !important;
  border: 1px solid #2979ff66 !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .75) !important;
  z-index: 1060 !important;
  backdrop-filter: none !important;
}

/* Elementos del menu: legibles en TODOS los estados */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item span,
.dropdown-menu button.dropdown-item {
  color: #e8eefc !important;
  background: transparent !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item[aria-expanded="true"] {
  background: rgba(41, 121, 255, .28) !important;
  color: #ffffff !important;
}
.dropdown-menu .dropdown-item:hover span,
.dropdown-menu .dropdown-item:focus span,
.dropdown-menu .dropdown-item.active span {
  color: #ffffff !important;
}
.dropdown-menu .dropdown-item .icon { color: #8fd8ff !important; }
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.text-danger span { color: #ff6b6b !important; }

/* Submenu de opciones (Modo de grupo, Disponibilidad...): panel solido */
.dropdown-menu .choicelist,
.choicelist,
.dropdown-menu .dropdown-menu {
  background: #0d1836 !important;
  border: 1px solid #2979ff66 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .75) !important;
}
.choicelist .form-check,
.choicelist label,
.choicelist .text-muted,
.choicelist small {
  color: #c7d4ee !important;
}
.choicelist .form-check:hover { background: rgba(41, 121, 255, .18) !important; border-radius: 8px; }
.choicelist .form-check-input:checked { background-color: #2979ff; border-color: #00e5ff; }

/* Las lineas de insercion, SIEMPRE por debajo de menus */
.course-content .divider,
.section .divider,
button.add-content,
[data-action="open-chooser"] {
  position: relative;
  z-index: 1 !important;
}

/* Popovers y tooltips a juego */
.popover {
  background: #0d1836 !important;
  border: 1px solid #2979ff66 !important;
}
.popover-body { color: #e8eefc !important; }
.tooltip .tooltip-inner { background: #0d1836; border: 1px solid #2979ff66; }


/* =====================================================
   PARCHE v12 — Temario en baldosas + ficha flotante
   Estados por clase: est-c completado / est-e en progreso
   est-p pendiente / est-b bloqueado / est-a tema actual
   ===================================================== */
.tema-tile {
  display: block;
  text-decoration: none !important;
  color: #e8eefc !important;
  background: rgba(10, 18, 40, .75);
  border: 1px solid #1b2a4a;
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  transition: all .2s ease;
  position: relative;
}
.tema-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(41,121,255,.3); }
.tema-tile .tt-num { font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.25rem; line-height:1; }
.tema-tile .tt-tit { font-size:.68rem; color:#c7d4ee; margin-top:4px; min-height:2.1em; line-height:1.15; }
.tema-tile .tt-ico { font-size:.85rem; margin-top:6px; display:block; }

.tema-tile.est-c { border-color:#3ddc8488; } .tema-tile.est-c .tt-num,.tema-tile.est-c .tt-ico{color:#3ddc84;}
.tema-tile.est-e { border-color:#00e5ff88; } .tema-tile.est-e .tt-num,.tema-tile.est-e .tt-ico{color:#00e5ff;}
.tema-tile.est-p { border-color:#1b2a4a; }  .tema-tile.est-p .tt-num{color:#8fa3c8;} .tema-tile.est-p .tt-ico{color:#ff9d2e;}
.tema-tile.est-b { border-color:#9b5cff55; opacity:.65; } .tema-tile.est-b .tt-num,.tema-tile.est-b .tt-ico{color:#9b5cff;}
.tema-tile.est-a { border-color:#00e5ff; box-shadow:0 0 18px rgba(0,229,255,.45); }
.tema-tile.est-a .tt-num{color:#fff;} .tema-tile.est-a .tt-ico{color:#ffd54a;}

/* Ficha flotante del tema (se abre al pulsar la baldosa) */
.tema-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(3, 6, 14, .88);
  backdrop-filter: blur(5px);
  padding: 20px;
}
.tema-modal:target { display: flex; }
.tema-modal .tm-card {
  background: #0b1430;
  border: 1px solid rgba(0, 229, 255, .45);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 50px rgba(41,121,255,.3);
  padding: 26px 28px;
  max-width: 420px; width: 100%;
  text-align: center;
  position: relative;
}
.tema-modal .tm-close {
  position: absolute; top: 10px; right: 16px;
  color: #8fa3c8 !important; text-decoration: none !important;
  font-size: 1.4rem; font-weight: 700;
}
.tema-modal .tm-close:hover { color: #00e5ff !important; }
.tema-modal .tm-num {
  font-family:'Orbitron',sans-serif; font-weight:900; color:#00e5ff; font-size:.8rem;
  letter-spacing:.3em; text-transform:uppercase;
}
.tema-modal .tm-tit {
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05rem; margin:8px 0 18px; line-height:1.3;
}
.tema-modal .tm-btn {
  display:block; text-decoration:none !important; margin:10px 0;
  padding:13px; border-radius:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
}
.tema-modal .tm-ver {
  background:linear-gradient(135deg,#2979ff,#0d47c1); color:#fff !important;
  border:1px solid rgba(0,229,255,.5); box-shadow:0 0 18px rgba(41,121,255,.4);
}
.tema-modal .tm-ver:hover { box-shadow:0 0 28px rgba(0,229,255,.6); }
.tema-modal .tm-esq {
  background:rgba(212,179,107,.12); color:#d4b36b !important; border:1px solid #d4b36b88;
}
.tema-modal .tm-esq:hover { background:rgba(212,179,107,.22); }


/* =====================================================
   PARCHE v13 — menu de las actividades liberado
   ===================================================== */
.activity-item,
.activity,
.activity-wrapper,
li.activity {
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
}
.activity-item .action-menu .dropdown-menu,
.activity .action-menu .dropdown-menu {
  z-index: 1070 !important;
  position: absolute !important;
}
/* Blindaje nuclear del contenido de cualquier menu */
.dropdown-menu,
.dropdown-menu * {
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item span,
.dropdown-menu .dropdown-item div {
  color: #e8eefc !important;
}
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.text-danger * { color: #ff6b6b !important; }


/* =====================================================
   PARCHE v14 — capas nativas restauradas, menus arriba
   ===================================================== */
.dropdown-menu.show,
body > .dropdown-menu,
.dropdown-menu {
  z-index: 3000 !important;
}
.main-inner, #region-main {
  backdrop-filter: none !important;
}


/* =====================================================
   PARCHE v15 — variables nativas de los menus + capas
   ===================================================== */

/* La raiz del problema: variables Bootstrap de los dropdown */
.dropdown-menu {
  --bs-dropdown-bg: #0d1836;
  --bs-dropdown-color: #e8eefc;
  --bs-dropdown-link-color: #e8eefc;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgba(41, 121, 255, .28);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: rgba(41, 121, 255, .35);
  --bs-dropdown-border-color: rgba(41, 121, 255, .4);
}

/* Opcion seleccionada/marcada en cualquier panel: nunca clara */
.dropdown-menu .selected,
.dropdown-menu [aria-selected="true"],
.dropdown-menu .active,
.choicelist .selected,
.choicelist [aria-selected="true"],
.dropdown-menu .text-bg-light,
.text-bg-light {
  background: rgba(41, 121, 255, .3) !important;
  color: #ffffff !important;
  border-radius: 10px;
}
.dropdown-menu .selected *,
.dropdown-menu [aria-selected="true"] *,
.dropdown-menu .active *,
.choicelist .selected *,
.text-bg-light * {
  color: #ffffff !important;
}
.dropdown-menu .form-check-input:checked {
  background-color: #2979ff !important;
  border-color: #00e5ff !important;
}
.dropdown-menu .form-check:has(input:checked),
.choicelist .form-check:has(input:checked) {
  background: rgba(41, 121, 255, .3) !important;
  border-radius: 10px;
}
.dropdown-menu .form-check:has(input:checked) label,
.dropdown-menu .form-check:has(input:checked) .text-muted {
  color: #ffffff !important;
}

/* Todos los paneles emergentes, a la estratosfera; las lineas, al suelo */
[role="menu"], [role="listbox"], [role="dialog"],
.dropdown-menu, .popover, .choicelist {
  z-index: 3000 !important;
}
.course-content .divider,
.section .divider,
hr.divider {
  z-index: 0 !important;
}

/* =====================================================
   PARCHE v16 — menus 100% opacos y SIEMPRE por encima
   (raiz real: el backdrop-filter de las tarjetas de
   actividad creaba una capa que tapaba y emborronaba
   el menu de la actividad anterior)
   ===================================================== */

/* 1) Fuera el blur de las tarjetas de actividad y secciones:
      es lo que pintaba SIMULACRO 1 encima del menu de TEST 1 */
.activity-item,
.activity,
.activity-wrapper,
li.activity,
.course-section,
li.section,
.course-content .card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Compensamos con fondo solido (ya no hace falta el cristal) */
.activity-item {
  background: #0a1430 !important;
}

/* 2) La actividad (y su seccion) con un menu abierto, por encima de todas */
li.activity:has(.dropdown-menu.show),
.activity-item:has(.dropdown-menu.show),
li.activity:has([aria-expanded="true"]),
.activity-item:has([aria-expanded="true"]) {
  position: relative;
  z-index: 3050 !important;
}
li.section:has(.dropdown-menu.show),
.course-section:has(.dropdown-menu.show) {
  position: relative;
  z-index: 3040 !important;
}

/* 3) El menu y el submenu (Modo de grupo, Disponibilidad...):
      fondo totalmente solido, sin transparencia ni blur */
.dropdown-menu,
.dropdown-menu.show,
.dropdown-menu .dropdown-menu,
.dropdown-menu .choicelist,
.choicelist {
  background-color: #0d1836 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 3060 !important;
}

/* =====================================================
   PARCHE v17 — fuera los marcos duplicados
   (los envoltorios de Moodle anadian 3 lineas de mas
   alrededor del contenido; solo debe verse la tarjeta
   de cada seccion)
   ===================================================== */

/* Envoltorio general: sin linea ni sombra (conserva su fondo) */
#page.drawers .main-inner,
.main-inner {
  border: none !important;
  box-shadow: none !important;
}

/* Envoltorio interno: totalmente invisible */
#region-main,
[role="main"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Las etiquetas (HTML incrustado, como el panel del curso)
   no son tarjetas: sin marco, sin fondo, sin relleno propio */
li.modtype_label,
li.modtype_label .activity-item,
.modtype_label .activity-item,
li.modtype_label .activity-item .activity-basis {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
li.modtype_label .activity-item {
  padding: 0 !important;
}

/* =====================================================
   PARCHE v18 — cuadros de confirmacion (modales) legibles
   y siempre por encima de menus y actividades elevadas
   ===================================================== */
.modal { z-index: 4000 !important; }
.modal-backdrop { z-index: 3990 !important; }

.modal-content {
  background: #0b1430 !important;
  border: 1px solid rgba(0, 229, 255, .35) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 40px rgba(41, 121, 255, .2) !important;
  color: #e8eefc !important;
}
.modal-header {
  border-bottom: 1px solid #1b2a4a !important;
}
.modal-title,
.modal-header h1, .modal-header h2, .modal-header h3,
.modal-header .h4, .modal-header .h5 {
  color: #e8eefc !important;
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: .06em;
}
.modal-body,
.modal-body p, .modal-body div, .modal-body span, .modal-body label {
  color: #c7d4ee !important;
}
.modal-footer {
  border-top: 1px solid #1b2a4a !important;
}

/* La X de cerrar: en Bootstrap 5 es un SVG negro (invisible en oscuro) */
.modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: .8;
}
.modal .btn-close:hover { opacity: 1; }
/* Y la version antigua (Bootstrap 4) por si algun modal la usa */
.modal .close { color: #e8eefc !important; opacity: .8; text-shadow: none; }
.modal .close:hover { color: #00e5ff !important; opacity: 1; }

/* Boton de peligro bien visible dentro del modal */
.modal .btn-danger {
  background: linear-gradient(135deg, #e5484d, #b32226) !important;
  border: 1px solid #ff6b6b88 !important;
  color: #fff !important;
}

/* =====================================================
   PARCHE v19 — cajon lateral usable en movil (iOS)
   (el blur del cajon rompe los toques en Safari iOS y
   la barra superior pisaba el boton de cerrar)
   ===================================================== */

/* Sin blur: fondo solido casi opaco (mismo aspecto, cero bugs) */
.drawer, [data-region=drawer] {
  background: rgba(4, 8, 20, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Los cajones y su fondo oscuro, por encima de la barra superior
   (y por debajo de los modales, que estan a 3990/4000) */
.drawer {
  z-index: 3200 !important;
}
.drawer-backdrop,
[data-region="drawer-backdrop"] {
  z-index: 3190 !important;
}

/* Boton de cerrar el cajon: visible sobre fondo oscuro
   (en Bootstrap 5 es un SVG negro) */
.drawer .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: .85;
}
.drawer .btn-close:hover,
.drawer .btn-close:focus { opacity: 1; }

/* =====================================================
   PARCHE v20 — tarjetas visuales del temario (v6)
   ===================================================== */
.pn-hero {
  min-height: 190px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, .35);
  background-size: cover;
  background-position: center;
  padding: 30px;
  margin-bottom: 22px;
  box-shadow: 0 0 35px rgba(41, 121, 255, .18) inset;
}
.pn-hero h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f4f8ff;
  text-shadow: 0 0 22px rgba(120, 180, 255, .8);
}
.pn-hero .pn-sub {
  margin-top: 10px;
  font-size: clamp(.9rem, 2vw, 1.2rem);
  color: #a9c9ff;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pn-bloque {
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(4, 12, 30, .78);
  border: 1px solid rgba(0, 170, 255, .28);
  box-shadow: 0 0 30px rgba(0, 170, 255, .08) inset;
}
.pn-bloque-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.92rem, 2vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.pn-a { border-top: 4px solid #2d7dff; }
.pn-b { border-top: 4px solid #36ff74; }
.pn-c { border-top: 4px solid #ffcc45; }
.pn-a .pn-bloque-title { color: #8fc1ff; }
.pn-b .pn-bloque-title { color: #8cff9f; }
.pn-c .pn-bloque-title { color: #ffd86b; }
.pn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px;
}
.pn-card {
  min-height: 136px;
  position: relative;
  display: block;
  text-decoration: none !important;
  color: #fff !important;
  overflow: hidden;
  border-radius: 14px;
  padding: 13px;
  box-sizing: border-box;
  background-color: #071228;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 170, 255, .38);
  box-shadow: 0 0 18px rgba(0, 170, 255, .12), inset 0 0 22px rgba(0, 170, 255, .10);
  transition: .18s ease;
}
.pn-b .pn-card { border-color: rgba(54, 255, 116, .32); }
.pn-c .pn-card { border-color: rgba(255, 204, 69, .35); }
.pn-card:hover {
  transform: translateY(-3px);
  border-color: #72caff;
  box-shadow: 0 0 24px rgba(0, 170, 255, .35), inset 0 0 25px rgba(0, 170, 255, .16);
}
.pn-card .pn-tema {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #7fbfff;
  font-weight: 700;
}
.pn-card .pn-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 900;
  color: #b9d5ff;
  text-shadow: 0 0 14px rgba(80, 150, 255, .75);
}
.pn-card .pn-titulo {
  margin-top: 7px;
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  line-height: 1.12;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.pn-card .pn-desc {
  margin-top: 7px;
  font-size: .7rem;
  line-height: 1.3;
  color: #bdd5f7;
}
.pn-card .pn-dot {
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: #ff9d2e;
  font-size: 1.1rem;
  line-height: 1;
}
.pn-footer {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  border: 1px solid rgba(0, 170, 255, .28);
  border-radius: 16px;
  padding: 13px;
  background: rgba(2, 8, 23, .78);
}
.pn-footer div {
  text-align: center;
  color: #a9c9ff;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}
@media (max-width: 600px) {
  .pn-hero { padding: 20px; min-height: 150px; }
  .pn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .pn-card { min-height: 122px; padding: 11px; }
  .pn-card .pn-num { font-size: 1.55rem; }
  .pn-card .pn-titulo { font-size: .7rem; }
  .pn-card .pn-desc { display: none; }
}

/* =====================================================
   PARCHE v21 — pagina de tema (Ruta del Opositor)
   ===================================================== */
.rt-panel { font-family: 'Rajdhani', sans-serif; color: #e8eefc; }
.rt-volver {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00e5ff !important;
  text-decoration: none !important;
  margin-bottom: 12px;
}
.rt-kicker {
  font-family: 'Orbitron', sans-serif;
  color: #00e5ff;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.rt-titulo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 4px 0 8px;
}
.rt-objetivo {
  border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 12px;
  background: rgba(4, 12, 30, .8);
  padding: 12px 14px;
  max-width: 560px;
  margin-top: 14px;
}
.rt-objetivo .rt-obj-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .66rem;
  letter-spacing: .16em;
  color: #7fbfff;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rt-seccion {
  border: 1px solid rgba(0, 170, 255, .28);
  border-radius: 18px;
  background: rgba(4, 12, 30, .78);
  padding: 16px;
  margin-bottom: 16px;
}
.rt-sec-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7fbfff;
  margin: 0 0 14px;
}
.rt-hitos { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rt-hito { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #9db2d8; }
.rt-hito .rt-ico { font-size: 1rem; color: #ff9d2e; }
.rt-hito.rt-ok { color: #c7f5d9; }
.rt-hito.rt-ok .rt-ico { color: #3ddc84; }
.rt-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rt-acc {
  display: block;
  text-decoration: none !important;
  color: #e8eefc !important;
  text-align: center;
  border: 1px solid #1b2a4a;
  border-radius: 14px;
  background: rgba(10, 18, 40, .75);
  padding: 16px 12px;
  transition: .18s ease;
}
.rt-acc:hover { transform: translateY(-3px); border-color: #72caff; box-shadow: 0 0 22px rgba(0, 170, 255, .3); }
.rt-acc .rt-acc-ico { font-size: 1.6rem; display: block; }
.rt-acc .rt-acc-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 8px 0 4px;
  min-height: 2.2em;
}
.rt-acc .rt-acc-d { font-size: .72rem; color: #8fa3c8; min-height: 2.6em; }
.rt-acc .rt-acc-btn {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2979ff, #0d47c1);
  border: 1px solid rgba(0, 229, 255, .45);
  border-radius: 8px;
  padding: 6px 12px;
}
.rt-ruta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.rt-paso { text-align: center; width: 92px; font-size: .7rem; color: #9db2d8; line-height: 1.25; }
.rt-paso .rt-num {
  font-family: 'Orbitron', sans-serif;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid #2979ff;
  color: #8fc1ff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  margin: 0 auto 6px;
}
.rt-bloq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rt-bloq {
  display: block;
  text-decoration: none !important;
  color: #e8eefc !important;
  border: 1px solid #1b2a4a;
  border-radius: 14px;
  background: rgba(10, 18, 40, .75);
  padding: 14px;
  transition: .18s ease;
}
.rt-bloq:hover { border-color: #72caff; transform: translateY(-2px); }
.rt-bloq .rt-bloq-n {
  font-family: 'Orbitron', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid #2979ff;
  color: #8fc1ff;
  font-weight: 900;
  font-size: .8rem;
  margin-bottom: 8px;
}
.rt-bloq .rt-bloq-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rt-bloq .rt-bloq-d { font-size: .74rem; color: #8fa3c8; margin-top: 4px; }
.rt-bloq .rt-bloq-v { font-size: .68rem; color: #00e5ff; margin-top: 8px; display: inline-block; }
.rt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rt-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #1b2a4a;
  border-radius: 10px;
  background: rgba(10, 18, 40, .6);
  padding: 9px 12px;
  margin-bottom: 8px;
  font-size: .82rem;
  color: #c7d4ee;
  text-decoration: none !important;
}
a.rt-fila:hover { border-color: #72caff; color: #fff !important; }
.rt-fila .rt-est { font-size: .74rem; color: #ff9d2e; white-space: nowrap; }
.rt-fila.rt-ok .rt-est { color: #3ddc84; }
@media (max-width: 700px) {
  .rt-2col { grid-template-columns: 1fr; }
  .rt-paso { width: 84px; }
}

/* =====================================================
   PARCHE v22 — tarjetas de tema pulidas y profesionales
   ===================================================== */
.rt-acc {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
.rt-acc .rt-acc-t,
.rt-acc .rt-acc-d {
  display: block;
}
.rt-acc .rt-acc-d { min-height: 0; }
.rt-acc .rt-acc-btn {
  margin-top: auto;
  padding-top: 7px;
}
.rt-acc .rt-acc-ico {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 1.35rem;
  background: rgba(41, 121, 255, .12);
  border: 1px solid rgba(41, 121, 255, .4);
  box-shadow: 0 0 16px rgba(41, 121, 255, .18);
  margin: 0 auto 4px;
}
.rt-paso { display: inline-block; vertical-align: top; }
.rt-fila .fa, .rt-fila .fa-solid { width: 18px; text-align: center; margin-right: 6px; color: #7fbfff; }

/* =====================================================
   PARCHE v23 — iconos neon como cabecera de tarjeta
   ===================================================== */
.rt-acc { overflow: hidden; }
.rt-acc .rt-acc-img {
  display: block;
  width: calc(100% + 24px);
  margin: -16px -12px 10px;
  height: 112px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* =====================================================
   PARCHE v24 — mapa mental desplegable (esquema visual)
   ===================================================== */
.mm-panel { font-family: 'Rajdhani', sans-serif; color: #e8eefc; }
.mm-root {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(0, 229, 255, .5);
  border-radius: 12px;
  padding: 10px 22px;
  background: rgba(11, 20, 48, .9);
  box-shadow: 0 0 24px rgba(41, 121, 255, .3);
}
details.mm {
  border: 1px solid #1b2a4a;
  border-radius: 12px;
  background: rgba(10, 18, 40, .75);
  margin: 8px 0;
  overflow: hidden;
}
details.mm summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e8eefc;
  transition: background .15s ease;
}
details.mm summary::-webkit-details-marker { display: none; }
details.mm summary::marker { content: ""; }
details.mm summary .mm-ch {
  transition: transform .15s ease;
  color: #00e5ff;
  font-size: .72rem;
}
details.mm[open] > summary .mm-ch { transform: rotate(90deg); }
details.mm[open] > summary { border-bottom: 1px solid #14213f; }
details.mm summary:hover { background: rgba(41, 121, 255, .1); }
details.mm summary .mm-nb { color: #8fc1ff; }
.mm-hijos {
  padding: 6px 14px 12px 34px;
  border-left: 2px solid #2979ff55;
  margin-left: 20px;
}
.mm-item {
  font-size: .92rem;
  color: #c7d4ee;
  padding: 4px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.mm-item::before { content: "\2022"; color: #00e5ff; font-weight: 700; }
/* Sub-ramas anidadas (details dentro de details) */
.mm-hijos details.mm { margin: 6px 0; }

/* =====================================================
   PARCHE v25 — sala de cine (clases estilo Netflix)
   ===================================================== */
.cine-panel { font-family: 'Rajdhani', sans-serif; color: #e8eefc; }
.cine-frame {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, .4);
  box-shadow: 0 0 45px rgba(41, 121, 255, .35), 0 24px 60px rgba(0, 0, 0, .7);
  margin: 14px 0 16px;
}
.cine-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cine-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cine-titulo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2px 0 0;
}
.cine-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cine-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8fc1ff;
  border: 1px solid #2979ff66;
  border-radius: 20px;
  padding: 4px 11px;
  background: rgba(41, 121, 255, .1);
}
.cine-badge.cb-vivo { color: #ff4d9d; border-color: #ff4d9d66; background: rgba(255, 77, 157, .1); }
.cine-desc { color: #9db2d8; font-size: .92rem; max-width: 720px; margin-bottom: 18px; }
.cine-row-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7fbfff;
  margin: 0 0 10px;
}
.cine-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #2979ff #0a1228;
}
.cine-card {
  flex: 0 0 232px;
  scroll-snap-align: start;
  display: block;
  text-decoration: none !important;
  color: #e8eefc !important;
  border: 1px solid #1b2a4a;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 18, 40, .8);
  transition: .18s ease;
}
.cine-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #72caff;
  box-shadow: 0 10px 30px rgba(0, 170, 255, .35);
}
.cine-card .cc-thumb {
  position: relative;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
}
.cine-card .cc-thumb::after {
  content: "\25B6";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(2, 8, 23, .35);
  opacity: 0;
  transition: opacity .18s ease;
}
.cine-card:hover .cc-thumb::after { opacity: 1; }
.cine-card .cc-info { padding: 10px 12px 12px; }
.cine-card .cc-k {
  font-family: 'Orbitron', sans-serif;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7fbfff;
}
.cine-card .cc-t {
  font-family: 'Orbitron', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1.2;
}
.cine-card .cc-d { font-size: .72rem; color: #8fa3c8; margin-top: 3px; }

/* =====================================================
   PARCHE v26 — moviles: el primer toque siempre cuenta
   (en pantallas tactiles se anula el efecto hover del
   cajon, que hacia que Safari se tragara el primer tap)
   ===================================================== */
@media (hover: none) {
  .drawer .list-group-item:hover {
    background: transparent !important;
    border-left: 0 !important;
    padding-left: 1.25rem !important;
    color: #8fa3c8 !important;
  }
  /* Respuesta visual inmediata al tocar, para que se note el tap */
  .drawer .list-group-item:active {
    background: rgba(41, 121, 255, 0.25) !important;
    color: #e8eefc !important;
  }
}
.drawer a { -webkit-tap-highlight-color: rgba(0, 229, 255, 0.25); }

/* =====================================================
   PARCHE v27 — moviles: fuera los tiradores laterales
   de los cajones (interceptaban los toques; el "Abrir
   indice del curso" fantasma). En pantalla grande siguen.
   ===================================================== */
@media (max-width: 991px) {
  .drawer-toggles,
  .drawer-toggler,
  .drawer-left-toggle,
  .drawer-right-toggle,
  [data-region="drawer-toggle"] {
    display: none !important;
    pointer-events: none !important;
  }
}

/* =====================================================
   PARCHE v28 — movil: menu principal EN LINEA bajo la
   barra superior (adios dependencia del cajon embrujado)
   ===================================================== */
@media (max-width: 991px) {
  .navbar { flex-wrap: wrap !important; }
  .primary-navigation {
    display: block !important;
    flex-basis: 100%;
    order: 12;
    margin-top: 2px;
  }
  .primary-navigation .moremenu {
    display: flex !important;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .primary-navigation .moremenu::-webkit-scrollbar { display: none; }
  .primary-navigation .moremenu .nav {
    flex-wrap: nowrap !important;
    width: max-content;
  }
  .primary-navigation .nav-item { display: block !important; }
  .primary-navigation .nav-link {
    font-family: 'Orbitron', sans-serif;
    font-size: .62rem !important;
    letter-spacing: .08em;
    padding: 8px 10px !important;
    white-space: nowrap;
    color: #c7d4ee !important;
  }
  .primary-navigation .nav-link.active {
    color: #00e5ff !important;
    border-bottom: 2px solid #00e5ff;
  }
}

/* =====================================================
   PARCHE v29 — remates moviles: la linea de menu con
   fondo solido (no se monta sobre el contenido), sitio
   para la barra crecida, y fuera la hamburguesa nativa
   (la sustituye la nuestra sin JavaScript)
   ===================================================== */
@media (max-width: 991px) {
  .navbar {
    height: auto !important;
    min-height: 60px;
    background: rgba(4, 8, 20, .97) !important;
    z-index: 1030 !important;
  }
  .primary-navigation {
    background: rgba(4, 8, 20, .97);
    border-bottom: 1px solid rgba(0, 229, 255, .25);
  }
  /* El contenido empieza debajo de la barra crecida */
  #page.drawers,
  #page {
    padding-top: 108px !important;
  }
  /* Hamburguesa nativa de Moodle: jubilada (la nuestra la releva) */
  .navbar .navbar-toggler,
  .navbar [data-target="theme_boost-drawers-primary"] {
    display: none !important;
  }
}

/* =====================================================
   PARCHE v30 — movil: fuera la linea horizontal de menu
   (la hamburguesa propia ya cumple; la linea era interina)
   ===================================================== */
@media (max-width: 991px) {
  .primary-navigation {
    display: none !important;
  }
  /* La barra vuelve a su altura normal y el contenido sube */
  #page.drawers,
  #page {
    padding-top: 66px !important;
  }
}

/* =====================================================
   PARCHE v31 — cuatro remates:
   1) Hero del curso en movil: la bandera entera, texto debajo
   2) Titulos de cabecera fuera en Paginas y vista de curso
   3) Estado "aun no abierto" para tarjetas de tema (.pn-off)
   ===================================================== */

/* 1) En movil, el hero no recorta: imagen completa y texto debajo */
@media (max-width: 767px) {
  img[src*="hero_curso_pn2"] { height: auto !important; }
  div:has(> img[src*="hero_curso_pn2"]) > div[style*="inset"] { display: none !important; }
  div:has(> img[src*="hero_curso_pn2"]) > div[style*="bottom"] {
    position: static !important;
    padding: 12px 4px 2px !important;
  }
}

/* 2) Sin titulo gigante de cabecera en Paginas y paginas de curso
      (el contexto ya lo dan nuestros heros propios) */
.path-mod-page .page-header-headings,
.path-course-view .page-header-headings {
  display: none !important;
}

/* 3) Tema aun no abierto: en gris y sin clic
      (uso: class="pn-card pn-off" en la tarjeta) */
.pn-card.pn-off {
  filter: grayscale(1) brightness(.65);
  opacity: .8;
  pointer-events: none;
}
.pn-card.pn-off .pn-dot { color: #8fa3c8; }

/* =====================================================
   PARCHE v32 — fondos de las 8 tarjetas del panel
   servidos desde el CSS (el editor de Moodle limpiaba
   los fondos en linea de la etiqueta)
   ===================================================== */
a.age-card {
  background-size: cover !important;
  background-position: center !important;
}
a.age-card:nth-of-type(1) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_temario.webp') !important; }
a.age-card:nth-of-type(2) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_directo.webp') !important; }
a.age-card:nth-of-type(3) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_grabadas.webp') !important; }
a.age-card:nth-of-type(4) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_tests.webp') !important; }
a.age-card:nth-of-type(5) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_simulacro.webp') !important; }
a.age-card:nth-of-type(6) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_planificacion.webp') !important; }
a.age-card:nth-of-type(7) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_descargas.webp') !important; }
a.age-card:nth-of-type(8) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/dash_foro.webp') !important; }

/* =====================================================
   PARCHE v33 — iconos definitivos (v2) en las tarjetas
   del panel (relevan a los del v32)
   ===================================================== */
a.age-card:nth-of-type(1) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_temario.webp') !important; }
a.age-card:nth-of-type(2) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_directo.webp') !important; }
a.age-card:nth-of-type(3) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_grabadas.webp') !important; }
a.age-card:nth-of-type(4) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_tests.webp') !important; }
a.age-card:nth-of-type(5) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_simulacro.webp') !important; }
a.age-card:nth-of-type(6) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_planificacion.webp') !important; }
a.age-card:nth-of-type(7) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_descargas.webp') !important; }
a.age-card:nth-of-type(8) { background-image: linear-gradient(180deg,rgba(6,12,30,.8),rgba(6,12,30,.92)), url('https://opofcsapp.com/img-age/d2_foro.webp') !important; }

/* =====================================================
   PARCHE v34 — iconos del panel A TODO COLOR
   (velo fino solo arriba para el texto; el icono manda)
   ===================================================== */
a.age-card {
  min-height: 150px !important;
  background-position: center 68% !important;
}
a.age-card > div {
  text-shadow: 0 2px 10px rgba(2, 6, 14, .95), 0 0 4px rgba(2, 6, 14, .9);
}
a.age-card:nth-of-type(1) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_temario.webp') !important; }
a.age-card:nth-of-type(2) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_directo.webp') !important; }
a.age-card:nth-of-type(3) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_grabadas.webp') !important; }
a.age-card:nth-of-type(4) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_tests.webp') !important; }
a.age-card:nth-of-type(5) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_simulacro.webp') !important; }
a.age-card:nth-of-type(6) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_planificacion.webp') !important; }
a.age-card:nth-of-type(7) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_descargas.webp') !important; }
a.age-card:nth-of-type(8) { background-image: linear-gradient(180deg,rgba(4,10,26,.78) 0%,rgba(4,10,26,.15) 45%,rgba(4,10,26,.35) 100%), url('https://opofcsapp.com/img-age/d2_foro.webp') !important; }

/* =====================================================
   PARCHE v35 — temario a todo brillo: velo horizontal
   (denso solo bajo el texto) y sombra para leer sobre luz
   ===================================================== */
.pn-card .pn-tema,
.pn-card .pn-num,
.pn-card .pn-titulo,
.pn-card .pn-desc {
  text-shadow: 0 2px 10px rgba(2, 6, 14, .95), 0 0 4px rgba(2, 6, 14, .9);
}

/* =====================================================
   PARCHE v36 — mas brillo a la cabecera del Temario
   ===================================================== */
img[src*="hero_temario"] {
  filter: brightness(1.18) saturate(1.22) contrast(1.04);
}

/* =====================================================
   PARCHE v37 — brillo FUERTE en las dos portadas
   (Temario y curso)
   ===================================================== */
img[src*="hero_temario"],
img[src*="hero_curso_pn2"] {
  filter: brightness(1.35) saturate(1.38) contrast(1.06) !important;
}

/* =====================================================
   PARCHE v38 — los hologramas del panel NO viajan a la
   portada (las tarjetas de "Elige tu oposicion" comparten
   clase y se colaban los fondos)
   ===================================================== */
#page-site-index a.age-card,
.pagelayout-frontpage a.age-card {
  background-image: none !important;
  min-height: 0 !important;
  background-position: initial !important;
}

/* =====================================================
   PARCHE v39 — la cabecera nueva del Temario ya viene
   brillante de serie: sin filtro extra
   ===================================================== */
img[src*="hero_temario2"] {
  filter: none !important;
}

/* =====================================================
   PARCHE v40 — TESTS metodoAGE (intento y revision)
   Todo anclado a .path-mod-quiz: no sale de los tests
   ===================================================== */

/* ---- Tabla resumen de la revision ---- */
.path-mod-quiz .quizreviewsummary {
  background: rgba(10, 18, 40, .8);
  border: 1px solid #1b2a4a;
  border-radius: 14px;
  overflow: hidden;
}
.path-mod-quiz .quizreviewsummary th {
  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa3c8 !important;
  background: transparent !important;
  border-color: #14213f !important;
}
.path-mod-quiz .quizreviewsummary td {
  color: #e8eefc !important;
  background: transparent !important;
  border-color: #14213f !important;
}
.path-mod-quiz .quizreviewsummary tr:last-child td {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #00e5ff !important;
}

/* ---- Bloque de cada pregunta ---- */
.path-mod-quiz .que {
  background: rgba(10, 18, 40, .8) !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 18px;
}
.path-mod-quiz .que .info {
  background: transparent !important;
  border: none !important;
}
.path-mod-quiz .que .info .no {
  font-family: 'Orbitron', sans-serif;
  color: #00e5ff;
  font-weight: 900;
}
.path-mod-quiz .que .info .state { font-size: .8rem; }
.path-mod-quiz .que.correct .info .state { color: #3ddc84; font-weight: 700; }
.path-mod-quiz .que.incorrect .info .state,
.path-mod-quiz .que.notanswered .info .state { color: #ff5c5c; font-weight: 700; }
.path-mod-quiz .que.partiallycorrect .info .state { color: #ff9d2e; font-weight: 700; }

/* Enunciado: fuera la caja celeste */
.path-mod-quiz .que .formulation {
  background: #0d1836 !important;
  color: #e8eefc !important;
  border: 1px solid rgba(41, 121, 255, .35) !important;
  border-radius: 12px !important;
}
.path-mod-quiz .que .formulation p { color: #e8eefc; }

/* Opciones de respuesta */
.path-mod-quiz .que .answer > div {
  border: 1px solid #1b2a4a;
  border-radius: 11px;
  padding: 9px 12px;
  margin: 7px 0;
  background: rgba(6, 12, 28, .5);
  transition: border-color .15s ease;
}
.path-mod-quiz .que .answer > div:hover { border-color: #2979ff; }
.path-mod-quiz .que .answer label { color: #c7d4ee; }
.path-mod-quiz .que input[type="radio"],
.path-mod-quiz .que input[type="checkbox"] { accent-color: #00e5ff; }

/* Veredicto en la revision: verde acierto, rojo fallo */
.path-mod-quiz .que .answer > div.correct {
  border-color: #3ddc84 !important;
  background: rgba(61, 220, 132, .1) !important;
}
.path-mod-quiz .que .answer > div.correct label { color: #e8eefc; }
.path-mod-quiz .que .answer > div.incorrect {
  border-color: #ff5c5c !important;
  background: rgba(255, 92, 92, .09) !important;
}
.path-mod-quiz .que .icon.fa-check { color: #3ddc84 !important; }
.path-mod-quiz .que .icon.fa-remove,
.path-mod-quiz .que .icon.fa-xmark { color: #ff5c5c !important; }

/* ---- Fundamento legal (retroalimentacion): panel dorado ---- */
.path-mod-quiz .que .outcome,
.path-mod-quiz .que .comment {
  background: transparent !important;
  border: none !important;
}
.path-mod-quiz .que .generalfeedback,
.path-mod-quiz .que .specificfeedback {
  background: rgba(212, 179, 107, .06) !important;
  border: 1px solid rgba(212, 179, 107, .4) !important;
  border-left: 3px solid #d4b36b !important;
  border-radius: 0 12px 12px 0 !important;
  color: #e6d9bd !important;
  padding: 12px 14px !important;
  margin-top: 10px;
}
.path-mod-quiz .que .generalfeedback::before {
  content: "\00a7  Fundamento legal";
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d4b36b;
  margin-bottom: 6px;
}
.path-mod-quiz .que .generalfeedback p { color: #e6d9bd !important; }
.path-mod-quiz .que .rightanswer {
  color: #8cff9f !important;
  background: rgba(61, 220, 132, .07);
  border-radius: 10px;
  padding: 9px 12px;
  margin-top: 8px;
}

/* ---- Botonera de navegacion del cuestionario ---- */
.path-mod-quiz .qnbutton {
  font-family: 'Orbitron', sans-serif !important;
  border-radius: 9px !important;
  background: #0a1228 !important;
  border: 1px solid #1b2a4a !important;
  color: #c7d4ee !important;
}
.path-mod-quiz .qnbutton.correct {
  border-color: #3ddc84 !important;
  color: #3ddc84 !important;
  background: rgba(61, 220, 132, .1) !important;
}
.path-mod-quiz .qnbutton.incorrect,
.path-mod-quiz .qnbutton.notanswered {
  border-color: #ff5c5c88 !important;
  color: #ff8a8a !important;
  background: rgba(255, 92, 92, .08) !important;
}
.path-mod-quiz .qnbutton.partiallycorrect {
  border-color: #ff9d2e88 !important;
  color: #ffb45c !important;
  background: rgba(255, 157, 46, .1) !important;
}
.path-mod-quiz .qnbutton.thispage,
.path-mod-quiz .qnbutton.currentpage {
  box-shadow: 0 0 0 2px #00e5ff !important;
}

/* ---- Botones y temporizador del intento ---- */
.path-mod-quiz .mod_quiz-next-nav,
.path-mod-quiz .mod_quiz-prev-nav,
.path-mod-quiz .submitbtns .btn-primary {
  background: linear-gradient(135deg, #2979ff, #0d47c1) !important;
  border: 1px solid rgba(0, 229, 255, .45) !important;
  color: #fff !important;
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: .06em;
  border-radius: 10px !important;
}
.path-mod-quiz #quiz-timer-wrapper,
.path-mod-quiz #quiz-timer {
  background: rgba(255, 92, 92, .12) !important;
  border: 1px solid #ff5c5c88 !important;
  color: #ff8a8a !important;
  border-radius: 20px !important;
  font-family: 'Orbitron', sans-serif !important;
}

/* =====================================================
   PARCHE v41 — tres remates de tests y subsecciones
   ===================================================== */

/* 1) El rotulo dorado pasa a llamarse Retroalimentacion */
.path-mod-quiz .que .generalfeedback::before {
  content: "\00a7  Retroalimentaci\00f3n" !important;
}

/* 2) Navegacion DURANTE el intento: las contestadas se apagan,
      las pendientes brillan en cian para localizarlas al vuelo */
.path-mod-quiz .qnbutton.notyetanswered {
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  background: rgba(0, 229, 255, .08) !important;
}
.path-mod-quiz .qnbutton.answersaved {
  border-color: #1b2a4a !important;
  color: #5b6c8f !important;
  background: #070d1f !important;
  opacity: .7;
}
.path-mod-quiz .qnbutton.flagged::after { color: #ff9d2e; }

/* 3) Los menus ⋮ ya no quedan tapados/recortados por las
      subsecciones: los contenedores de seccion dejan de
      recortar lo que sobresale y el que tiene menu abierto
      se eleva por encima de sus vecinos */
.course-section,
.course-section .content,
li.section,
.activity.modtype_subsection,
.modtype_subsection .activity-item,
[data-for="section"] {
  overflow: visible !important;
}
.activity.modtype_subsection:has(.dropdown-menu.show),
.modtype_subsection:has([aria-expanded="true"]) {
  position: relative;
  z-index: 3055 !important;
}

/* =====================================================
   PARCHE v42 — cuatro remates (jul-2026):
   1) Panel de notificaciones (campanita) a oscuro
   2) Modo edicion: secciones y actividades legibles
   3) Movil: vuelve el tirador DERECHO (cajon de bloques
      con Level Up! XP); el izquierdo sigue jubilado
   4) Paginas admin/actualizacion: fuera las bandas
      blancas (utilidad .bg-white de Boost)
   ===================================================== */

/* ---------- 1) Campanita de notificaciones ---------- */
.popover-region-container {
  background: #0d1836 !important;
  border: 1px solid rgba(41, 121, 255, .5) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(2, 6, 14, .7) !important;
}
.popover-region-header-container {
  background: #0a1228 !important;
  border-bottom: 1px solid #14213f !important;
}
.popover-region-header-text {
  color: #e8eefc !important;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
}
.popover-region-header-actions a,
.popover-region-header-actions .icon {
  color: #00e5ff !important;
}
.popover-region-content-container,
.popover-region-content {
  background: transparent !important;
}
.popover-region .content-item-container {
  background: transparent !important;
  border-bottom: 1px solid #14213f !important;
  color: #c7d4ee !important;
}
.popover-region .content-item-container:hover {
  background: rgba(41, 121, 255, .16) !important;
}
.popover-region .content-item-container.unread {
  background: rgba(41, 121, 255, .24) !important;
}
.popover-region .content-item-container .content-item-body,
.popover-region .content-item-container .notification-message {
  color: #e8eefc !important;
}
.popover-region .content-item-container .timestamp,
.popover-region .content-item-container small {
  color: #8fa3c8 !important;
}
.popover-region .content-item-container .view-more,
.popover-region-footer-container,
.popover-region-seeall-text {
  background: #0a1228 !important;
  color: #00e5ff !important;
}
.popover-region-footer-container a,
.popover-region-seeall-text a {
  color: #00e5ff !important;
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
}
/* Sin notificaciones: el mensaje vacio tambien legible */
.popover-region .empty-message {
  color: #8fa3c8 !important;
  background: transparent !important;
}

/* ---------- 2) Modo edicion: secciones y actividades ---------- */
/* Las tarjetas de seccion (blancas de serie) al azul del tema */
.course-content .course-section,
.course-content li.section,
.course-section-header {
  background: rgba(10, 18, 40, .92) !important;
  color: #e8eefc !important;
  border-color: #1b2a4a !important;
}
.course-section .sectionname,
.course-section .sectionname a,
.course-section h3 a,
.course-section .section-title a {
  color: #e8eefc !important;
}
/* Nombre de actividad SIEMPRE legible (tambien ocultas/stealth:
   tenues pero visibles, nunca invisibles) */
.course-content .activity-item,
.course-content .activity-item .activityname,
.course-content .activity-item .activityname a,
.course-content .activity-item .instancename {
  color: #e8eefc !important;
}
.course-content .activity-item .dimmed,
.course-content .activity-item a.dimmed,
.course-content .dimmed .instancename,
.course-content .dimmed_text .instancename {
  color: #9db1d6 !important;
  opacity: 1 !important;
}
/* Estado "seleccionado" (acciones masivas / edicion): de celeste
   ilegible a azul del tema */
.course-content .activity-item.selected,
.course-content .activity-wrapper.selected .activity-item,
.course-content .activity-item.highlight,
.bulk-enabled .activity-item.selected {
  background: rgba(41, 121, 255, .28) !important;
  border: 1px solid rgba(0, 229, 255, .55) !important;
  color: #e8eefc !important;
}
/* Badges de visibilidad (Oculto / Disponible pero no visible)
   legibles sobre cualquier fondo */
.course-content .badge {
  background: rgba(6, 12, 28, .9) !important;
  color: #c7d4ee !important;
  border: 1px solid #2a3d66 !important;
}

/* ---------- 3) Movil: puerta al cajon de bloques ---------- */
/* v27 jubilo TODOS los tiradores; el derecho vuelve al servicio
   (es el acceso al cajon de bloques: Level Up! XP, etc.).
   El izquierdo (el del fantasma) sigue fuera. */
@media (max-width: 991px) {
  .drawer-toggles {
    display: flex !important;
    pointer-events: none !important; /* el contenedor no roba toques */
  }
  .drawer-toggles .drawer-left-toggle,
  .drawer-left-toggle {
    display: none !important;
    pointer-events: none !important;
  }
  .drawer-toggles .drawer-right-toggle,
  .drawer-right-toggle {
    display: block !important;
    pointer-events: auto !important;
  }
  /* Boton del tirador a juego con el tema y bien visible */
  .drawer-right-toggle .btn {
    background: rgba(13, 24, 54, .96) !important;
    border: 1px solid rgba(0, 229, 255, .6) !important;
    color: #00e5ff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, .35) !important;
  }
  /* El cajon de bloques por encima de la barra inferior propia */
  .drawer.drawer-right,
  #theme_boost-drawers-blocks {
    z-index: 4000 !important;
  }
}

/* ---------- 4) Paginas admin / instalacion / actualizacion ---------- */
/* La banda blanca era la utilidad .bg-white de Boost: al tema */
.bg-white,
#page .bg-white,
#page-header .bg-white {
  background-color: rgba(10, 18, 40, .88) !important;
  color: #e8eefc !important;
}
/* Titulos de las pantallas de mantenimiento/actualizacion */
.pagelayout-maintenance h1,
.pagelayout-maintenance h2,
.pagelayout-maintenance .page-header-headings h1,
#page-admin-index h1,
#page-admin-index .page-header-headings h1 {
  color: #e8eefc !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, .4);
}
.pagelayout-maintenance #page,
.pagelayout-maintenance #region-main {
  background: transparent !important;
  color: #e8eefc !important;
}

/* =====================================================
   PARCHE v43 — remates sobre v42:
   1) Menus desplegables ⋮ 100% OPACOS y POR ENCIMA de
      todas las capas (lineas de insercion incluidas)
   2) La fila de actividad stealth que seguia celeste
      (utilidad .bg-light y clase .stealth sin cubrir)
   3) Bloque Level Up! XP: pildora TOTAL y barra de
      progreso al tema (fuera los grises claros)
   ===================================================== */

/* ---------- 1) Desplegables: opacos y en la cima ---------- */
.dropdown-menu,
.dropdown-menu.show {
  background: #0d1836 !important;   /* solido, sin transparencia */
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(41, 121, 255, .55) !important;
  box-shadow: 0 14px 40px rgba(2, 6, 14, .85) !important;
  z-index: 6000 !important;         /* por encima de TODO */
}
.dropdown-menu .dropdown-item {
  background: transparent !important;
  color: #e8eefc !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: rgba(41, 121, 255, .25) !important;
  color: #fff !important;
}
/* Las lineas de insercion/arrastre, SIEMPRE al fondo:
   que no crucen los menus */
.course-content .divider,
.section .divider,
hr.divider,
[data-region="drop-zone"],
.drop-zone,
.dropzone,
.course-content .dropphantom,
.editing .course-content .dashed,
button.add-content,
[data-action="open-chooser"] {
  z-index: 0 !important;
}

/* ---------- 2) La fila stealth celeste, al tema ---------- */
/* Utilidad .bg-light de Bootstrap (hermana de .bg-white) */
.bg-light,
#page .bg-light,
.course-content .bg-light {
  background-color: rgba(13, 24, 54, .95) !important;
  color: #e8eefc !important;
}
/* Actividades en modo stealth: fondo oscuro y nombre visible */
.course-content li.activity.stealth,
.course-content .activity.stealth,
.course-content .stealth .activity-item,
.course-content .activity-item.stealth,
.course-content .activity-item.hiddenactivity {
  background: #0a1430 !important;
  color: #e8eefc !important;
}
.course-content .stealth .instancename,
.course-content .stealth .activityname,
.course-content .stealth .activityname a,
.course-content .stealth a:not(.btn) {
  color: #9db1d6 !important;   /* tenue pero legible */
  opacity: 1 !important;
}

/* ---------- 3) Bloque Level Up! XP a juego ---------- */
/* Pildora del total (salia gris claro con numero blanco) */
.block_xp [class*="xp-bg-gray"],
.block_xp [class*="xp-bg-white"],
.block_xp .badge-secondary,
.block_xp .badge.bg-secondary {
  background-color: #101c3d !important;
  color: #00e5ff !important;
  border: 1px solid #2a3d66 !important;
}
/* Etiqueta TOTAL y textos secundarios */
.block_xp [class*="xp-text-gray"],
.block_xp .text-muted {
  color: #8fa3c8 !important;
}
/* Barra de progreso: carril oscuro, relleno energia */
.block_xp .progress,
.block_xp [class*="xp-bg-"][class*="progress"],
.block_xp .block_xp-level-progress .progress {
  background-color: #101c3d !important;
  border: 1px solid #1b2a4a !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.block_xp .progress-bar,
.block_xp .block_xp-level-progress .progress-bar {
  background: linear-gradient(90deg, #2979ff, #00e5ff) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, .5);
}

/* =====================================================
   PARCHE v44 — movil: el cajon de bloques ANCLADO
   (salia al fondo de la pagina y se cerraba al momento:
   tenia position fixed pero sin coordenadas, y el toque
   "fuera" lo cerraba). Ahora: panel lateral derecho fijo,
   a toda altura, por encima de todo, con su animacion.
   ===================================================== */
@media (max-width: 991px) {
  #theme_boost-drawers-blocks,
  .drawer.drawer-right {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: min(85vw, 340px) !important;
    z-index: 6500 !important;          /* por encima de barra propia y navbar */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(4, 8, 20, .98) !important;
    border-left: 1px solid rgba(0, 229, 255, .4) !important;
    box-shadow: -10px 0 40px rgba(2, 6, 14, .8);
    transform: translateX(102%);
    transition: transform .25s ease;
  }
  #theme_boost-drawers-blocks.show,
  .drawer.drawer-right.show {
    transform: none !important;
  }
  /* El telon de fondo, justo por debajo del cajon */
  .drawer-backdrop,
  [data-region="drawer-backdrop"] {
    z-index: 6400 !important;
  }
  /* Boton de cerrar del cajon, visible y comodo al pulgar */
  .drawer.drawer-right .drawerheader,
  #theme_boost-drawers-blocks .drawerheader {
    background: rgba(4, 8, 20, .98) !important;
    border-bottom: 1px solid #14213f;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .drawer.drawer-right .btn-close,
  #theme_boost-drawers-blocks .btn-close {
    filter: invert(1) brightness(1.6);
    opacity: .9 !important;
  }
  /* Los bloques dentro del cajon, con aire */
  #theme_boost-drawers-blocks .block {
    margin: 10px 10px 14px;
  }
}

/* =====================================================
   PARCHE v45 — la campanita POR ENCIMA de todo:
   el panel de notificaciones quedaba bajo las tarjetas
   de curso en movil. Sube a la cima (z-index 7000) y en
   movil se ancla como panel fijo a lo ancho, comodo.
   ===================================================== */
/* En todas las pantallas: nada lo tapa */
.popover-region-container {
  z-index: 7000 !important;
}
/* Que ningun ancestro lo recorte */
.navbar,
#usernavigation,
.popover-region {
  overflow: visible !important;
}

/* En movil: panel fijo bajo la barra, a lo ancho, con scroll */
@media (max-width: 991px) {
  .popover-region-container {
    position: fixed !important;
    top: 64px !important;
    right: 6px !important;
    left: 6px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* =====================================================
   PARCHE v46 — tres frentes:
   1) Modo edicion: el contenedor con menu abierto SUBE
      por encima de subsecciones y zonas de arrastre
      (tambien el menu del boton +), y nada lo recorta
   2) Tarjetas blancas de seccion/subseccion: bateria
      ampliada de selectores (Moodle 5 usa varios)
   3) Movil: campanita anclada a la barra superior, que
      sube de capa entera al abrirse; el cajon de bloques
      por encima de la barra
   ===================================================== */

/* ---------- 1) El que abre menu, a la cima; nada recorta ---------- */
.course-content li.activity,
.course-content .activity-item,
.course-content .activity-wrapper,
.course-content .activity,
.course-content .content,
.course-content ul.section,
.course-content .sequence {
  overflow: visible !important;
}
/* Actividad o seccion con menu abierto: por encima de TODO */
li.activity:has(.dropdown-menu.show),
.activity-item:has(.dropdown-menu.show),
.activity-wrapper:has(.dropdown-menu.show),
li.activity:has([aria-expanded="true"]),
.activity-item:has([aria-expanded="true"]),
.activity.modtype_subsection:has(.dropdown-menu.show) {
  position: relative;
  z-index: 8000 !important;
}
li.section:has(.dropdown-menu.show),
.course-section:has(.dropdown-menu.show),
.course-content li.section:has([aria-expanded="true"]) {
  position: relative;
  z-index: 7900 !important;
}
/* El boton + (anadir actividad/subseccion): su linea vive
   al fondo, pero con el menu abierto sube el tambien */
.course-content .divider:has(.dropdown-menu.show),
.course-content .divider:has([aria-expanded="true"]),
.divider:has(.dropdown-menu.show),
button.add-content[aria-expanded="true"],
[data-action="open-chooser"][aria-expanded="true"] {
  position: relative;
  z-index: 8000 !important;
}

/* ---------- 2) Tarjetas blancas de seccion: bateria ampliada ---------- */
.course-content li.section,
.course-content .course-section,
.course-content .section-item,
.course-content .course-section-item,
.course-content [data-for="section"],
.course-content [data-for="section-item"],
.course-content .modtype_subsection .activity-item,
.course-content .activity.modtype_subsection,
.course-content .modtype_subsection .section-item,
.course-content .modtype_subsection .course-section {
  background: rgba(10, 18, 40, .92) !important;
  background-color: rgba(10, 18, 40, .92) !important;
  border-color: #1b2a4a !important;
  color: #e8eefc !important;
}

/* ---------- 3) Movil: campanita y capas de la barra ---------- */
@media (max-width: 991px) {
  /* La barra superior manda sobre el contenido... */
  .navbar {
    z-index: 7500 !important;
  }
  /* ...y el panel de notificaciones se ancla a ELLA:
     a todo el ancho, justo debajo de la barra */
  .popover-region { position: static !important; }
  .popover-region-container {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 7000 !important;
    background: #0d1836 !important;
  }
  /* El cajon de bloques, por encima de la barra (que no le
     tape la cabecera con la X de cerrar) */
  #theme_boost-drawers-blocks,
  .drawer.drawer-right {
    z-index: 7600 !important;
  }
  .drawer-backdrop,
  [data-region="drawer-backdrop"] {
    z-index: 7550 !important;
  }
}

/* =====================================================
   PARCHE v47 — las VENTANAS MODALES, en la cima absoluta
   (el selector de actividades quedaba pisado por la
   seccion elevada del v46; jerarquia definitiva:
   lineas 0 < contenido < menus abiertos 8000 <
   cajones/barra 6500-7600 < MODALES 9000)
   ===================================================== */
.modal,
.modal.show,
[role="dialog"].modal,
body > [role="dialog"],
.modal-dialog {
  z-index: 9000 !important;
}
.modal-backdrop {
  z-index: 8990 !important;
}
/* Tooltips por encima de todo, que no se pierdan */
.tooltip {
  z-index: 9500 !important;
}

/* =====================================================
   PARCHE v48 — etiquetas de visibilidad LEGIBLES:
   "Ocultado a los estudiantes" / "Disponible pero no
   visible" en AMBAR sobre el fondo oscuro (quedaban
   negro sobre negro tras oscurecer las secciones)
   ===================================================== */
.course-content .badge,
.course-content .badge span,
.course-content .badge .dimmed_text,
.course-content .activity-badges .badge,
.course-content .course-section-header .badge,
.course-content [data-region="visibility"] .dropdown-toggle,
.course-content .badge.dropdown-toggle {
  background: rgba(255, 213, 74, .1) !important;
  color: #ffd54a !important;
  border: 1px solid rgba(255, 213, 74, .5) !important;
  opacity: 1 !important;
  font-weight: 600;
}
.course-content .badge .icon,
.course-content .badge i,
.course-content .badge::after {
  color: #ffd54a !important;
}

/* =====================================================
   PARCHE v49 — panel de notificaciones 100% OPACO:
   se transparentaba el contenido de detras. Todas las
   capas del panel con color SOLIDO, sin transparencias.
   ===================================================== */
.popover-region-container,
.popover-region-content-container,
.popover-region-content,
#nav-notification-popover-container .popover-region-container,
#nav-message-popover-container .popover-region-container {
  background-color: #0d1836 !important;
  opacity: 1 !important;
}
.popover-region .content-item-container {
  background-color: #0d1836 !important;
  opacity: 1 !important;
  border-bottom: 1px solid #1a2a52 !important;
}
.popover-region .content-item-container.unread {
  background-color: #14264d !important;
}
.popover-region .content-item-container:hover {
  background-color: #16305f !important;
}
.popover-region-header-container {
  background-color: #0a1228 !important;
  opacity: 1 !important;
}
.popover-region-footer-container,
.popover-region-seeall-text {
  background-color: #0a1228 !important;
  opacity: 1 !important;
}
/* El enlace "Ver notificacion completa": discreto, sin caja */
.popover-region .content-item-container .view-more {
  background: transparent !important;
  color: #00e5ff !important;
  font-size: .78rem;
}

/* =====================================================
   PARCHE v50 — la CADENA ENTERA del menu abierto sube:
   las cabeceras de seccion de Moodle 5 son "sticky" y
   atrapan al menu en una capa baja; la subseccion de
   debajo (tambien sticky) pintaba encima. Ahora TODOS
   los ancestros del menu abierto se elevan a la vez.
   (Las modales siguen mandando en 9000.)
   ===================================================== */
.course-content *:has(.dropdown-menu.show) {
  z-index: 8000 !important;
}
.course-section-header:has(.dropdown-menu.show) {
  z-index: 8100 !important;
}

/* =====================================================
   PARCHE v51 — dos remates:
   1) La cadena del menu abierto sube a 8500: las flechas
      de plegar secciones tambien usan aria-expanded y
      empataban a 8000 con el menu (y el empate lo ganaba
      la subseccion por orden). Ahora el menu manda.
   2) Hover de las pestanas del curso (Curso, Configuracion,
      Participantes...): fuera la caja blanca de serie.
   ===================================================== */

/* 1) El menu abierto, por encima de secciones desplegadas */
.course-content *:has(.dropdown-menu.show) {
  z-index: 8500 !important;
}
.course-section-header:has(.dropdown-menu.show) {
  z-index: 8600 !important;
}

/* 2) Pestanas de navegacion del curso: hover del tema */
.secondary-navigation .nav-link:hover,
.secondary-navigation .nav-link:focus,
.secondary-navigation .nav-tabs .nav-link:hover,
.moremenu .nav-link:hover,
.moremenu .nav-link:focus,
.moremenu .nav-link.focus {
  background: rgba(41, 121, 255, .18) !important;
  color: #00e5ff !important;
  border-color: transparent transparent #00e5ff transparent !important;
  border-radius: 8px 8px 0 0;
}

/* =====================================================
   PARCHE v52 — estetica del modo edicion:
   1) Las lineas de "insertar aqui" (punteadas), DISCRETAS
      hasta pasar el raton, y contenidas en su tarjeta
      (asomaban por los laterales)
   2) Las etiquetas ambar de actividades stealth, a pleno
      brillo (la atenuacion de Moodle las apagaba)
   ===================================================== */

/* 1) Lineas de insercion: sigilosas hasta que las buscas */
.course-content .divider,
.course-content .dropzone,
.course-content [data-region="drop-zone"] {
  opacity: .16 !important;
  transition: opacity .15s ease;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}
.course-content .divider:hover,
.course-content .divider:focus-within,
.course-content .dropzone:hover {
  opacity: 1 !important;
}

/* 2) Etiquetas ambar a pleno brillo, gane quien gane arriba */
.course-content .activity-item .badge,
.course-content .stealth .badge,
.course-content .dimmed .badge,
.course-content li.activity .badge {
  opacity: 1 !important;
  color: #ffd54a !important;
  background: rgba(255, 213, 74, .12) !important;
  border-color: rgba(255, 213, 74, .55) !important;
}

/* =====================================================
   PARCHE v53 — movil: MARCHA ATRAS quirurgica.
   La subida por aria-expanded (v46) elevaba TODAS las
   secciones desplegadas (las flechas de plegar tambien
   usan ese atributo) por encima de la navbar: eso ocultaba
   las notificaciones y obligo a inflar la navbar, que a su
   vez sepulto la hamburguesa propia. Se neutraliza todo:
   - secciones a capa normal (los menus ya van por .show)
   - navbar de vuelta a 1030 (la hamburguesa y la barra
     inferior propias vuelven a verse)
   - el contador vuelve a la campana
   - el panel de notificaciones, anclado bajo la barra a
     todo el ancho (la navbar es su jaula por el blur)
   ===================================================== */

/* Secciones y actividades: fuera la subida en falso */
li.activity:has([aria-expanded="true"]),
.activity-item:has([aria-expanded="true"]),
.course-content li.section:has([aria-expanded="true"]) {
  z-index: auto !important;
}

@media (max-width: 991px) {
  /* Navbar a su capa de siempre */
  .navbar {
    z-index: 1030 !important;
  }
  /* El contador (53) vuelve a montarse sobre la campana */
  .popover-region {
    position: relative !important;
  }
  /* Panel de notificaciones: fijo bajo la barra, a lo ancho
     (el backdrop-filter de la navbar lo ancla a ella) */
  .popover-region-container {
    position: fixed !important;
    top: 64px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1500 !important;
  }
}

/* =====================================================
   PARCHE v54 — ARREGLO URGENTE: "Anadir una actividad o
   un recurso" volvia inservible. Causa (dos parches mios):
   - v52 puso overflow:hidden + opacity .16 en .divider, y
     el BOTON vive DENTRO de esa linea sobresaliendo de
     ella -> quedaba recortado a una rendija y fantasma
     (la opacidad de un padre la heredan todos los hijos:
      no se puede compensar desde el boton).
   - v43 puso z-index:0 al boton -> podia quedar hundido
     bajo la tarjeta y no recibir el clic.
   Solucion: la LINEA sigue discreta (por color, no por
   opacidad), y el BOTON vuelve entero, opaco y clicable.
   ===================================================== */

/* 1) La linea: nada de recortes ni opacidad heredada */
.course-content .divider,
.section .divider,
.course-content .dropzone,
.course-content [data-region="drop-zone"] {
  overflow: visible !important;
  opacity: 1 !important;
  z-index: auto !important;
  /* discrecion por COLOR (no afecta a los hijos) */
  border-color: rgba(41, 121, 255, .30) !important;
  transition: border-color .15s ease;
}
.course-content .divider:hover,
.course-content .divider:focus-within {
  border-color: rgba(0, 229, 255, .85) !important;
}

/* 2) El boton "+ Anadir una actividad o un recurso": ENTERO */
.course-content .divider .btn,
.course-content .divider button,
button.add-content,
[data-action="open-chooser"],
.course-content [data-action="open-chooser"] {
  position: relative !important;
  z-index: 5 !important;           /* por encima de la linea */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  background: #0d1836 !important;
  color: #e8eefc !important;
  border: 1px solid rgba(0, 229, 255, .55) !important;
  border-radius: 999px !important;
  padding: .35rem 1.1rem !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, .25);
}
.course-content .divider .btn:hover,
.course-content .divider button:hover,
button.add-content:hover,
[data-action="open-chooser"]:hover {
  background: rgba(41, 121, 255, .35) !important;
  color: #fff !important;
  border-color: #00e5ff !important;
}
/* Con el selector abierto, el boton sigue por encima
   (la modal manda desde 9000, eso no cambia) */
button.add-content[aria-expanded="true"],
[data-action="open-chooser"][aria-expanded="true"] {
  z-index: 8000 !important;
}

/* 3) Extra: la pagina promocional "XP+" del plugin (anuncio
   de la version de pago) era ilegible: tarjetas blancas con
   texto palido. Al tema, por si David entra por error. */
.path-blocks-xp .card,
.path-blocks-xp .card-body,
[class*="page-blocks-xp"] .card {
  background: rgba(10, 18, 40, .94) !important;
  border-color: #1b2a4a !important;
  color: #e8eefc !important;
}
.path-blocks-xp .card h1,
.path-blocks-xp .card h2,
.path-blocks-xp .card h3,
.path-blocks-xp .card h4,
.path-blocks-xp .card h5,
.path-blocks-xp .card-title,
.path-blocks-xp .card strong,
.path-blocks-xp .card b {
  color: #00e5ff !important;
  opacity: 1 !important;
}
.path-blocks-xp .card p,
.path-blocks-xp .card li,
.path-blocks-xp .card span {
  color: #c7d4ee !important;
  opacity: 1 !important;
}