:root{--color-primary:#69bd45;--color-secondary:#007ab8;--color-tertiary:#1ea4a9;--color-state:#4b7e2b;--color-state-hover:#3c6721;--color-state-focus:#3c6721;--color-state-active:#30541a;--color-state-highlight:#f6f9d7;--color-state-highlight-neutral:var(--color-neutral-3);--color-state-disabled:var(--color-neutral-5);--color-neutral-1:#fff;--color-neutral-2:#fafafa;--color-neutral-3:#f7f7f7;--color-neutral-4:#e6e4e4;--color-neutral-5:#c7c7c7;--color-neutral-6:#767676;--color-neutral-7:#262626;--color-background:var(--color-neutral-1);--color-border:var(--color-neutral-5);--color-text:var(--color-neutral-7);--color-text-disabled:var(--color-neutral-5);--color-text-hint:var(--color-neutral-6);--link-color:var(--color-state);--link-color-hover:var(--color-state-hover);--nav-bg-color:#fff;--nav-text-color:var(--color-text);--footer-bg-color:#fff;--footer-text-color:var(--color-text);--footer-text-color-hover:var(--footer-text-color);--btn-accent-color:var(--color-state);--btn-accent-color-active:var(--color-state-active);--btn-accent-color-focus:var(--color-state-focus);--btn-accent-color-disabled:var(--color-state-disabled);--btn-prim-accent-color:var(--color-state);--btn-prim-accent-color-active:var(--color-state-active);--btn-prim-accent-color-focus:var(--color-state-focus);--btn-prim-accent-color-disabled:var(--color-state-disabled)}:root{--nav-bg-color: #ffffff;--nav-text-color: #262626;--color-primary: #D52B1E;--btn-prim-accent-color: #140a9a;--btn-accent-color: #3A376F;--link-color: #140a9a;--color-state: #06032f;--color-text: #262626;--footer-bg-color: #ffffff;--footer-text-color: #262626;--btn-prim-accent-color-focus: #0a0090;--btn-prim-accent-color-active: #00007f;--btn-accent-color-focus: #302d65;--btn-accent-color-active: #1f1c54;--link-color-hover: #0a0090;--color-state-hover: #000025;--color-state-focus: #000025;--color-state-active: #000014;--footer-text-color-hover: #1c1c1c;}
.block_dlfrontuserinfo div.img-profile{
display: none !important;
}
.totaraNav_prim .masthead_logo--header_img {
height: 4.8rem;
 }

#page-login-content #dl-gradient-overlay-login {
    background: radial-gradient(73.21% 55.27% at 50% 50%, rgba(6, 3, 47, 0.05) 0%, rgba(6, 3, 47, 0.5) 68%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    backdrop-filter: blur(0px);
    background-color: rgba(0, 0, 0, 0.5);
}

#page-login-content .loginbox .potentialidp {
    background: #4c5459;  
}

.potentialidp a {
  color: #fff;
}

#page-login-content .loginbox .dl-loginbtn {
    background: #4c5459;
    color: #fff;
    border: none;

}
.dl-loginbtn a {
  color: #fff;
}

/*-----------------------------------------------------------------------------*/

/* Estilo navbar mis programas*/
/* 1. Dar height de 10px al contenedor .totaraNav */
/*.totaraNav {
    height: 1px !important;
}*/

/* 1. Aplicar gradiente al contenedor nav principal */
nav.totaraNav_prim {
background: transparent !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 20%, #06032F 90%) !important;
}

/* 2. Hacer transparentes SOLO los elementos del navbar principal, NO los popovers */
nav.totaraNav_prim .totaraNav_prim--list,
nav.totaraNav_prim .totaraNav_prim--list_item,
nav.totaraNav_prim .totaraNav_prim--list_item_link,
nav.totaraNav_prim .totaraNav_prim--list_item_label,
nav.totaraNav_prim .totaraNav--expand_indent,
nav.totaraNav_prim .masthead_logo,
nav.totaraNav_prim .container-fluid {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Excluir específicamente los popovers del QuickAccess */
nav.totaraNav_prim .totara_core__QuickAccess_menu,
nav.totaraNav_prim .popover-region-content,
nav.totaraNav_prim .totara_core__QuickAccess_menu *,
nav.totaraNav_prim .popover-region-container,
nav.totaraNav_prim .popover-region-container * {
    background-color: initial !important;
    background: initial !important;
}

/* Asegurar que el menú de administración mantenga su estilo original */
.totara_core__QuickAccess_menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.totara_core__QuickAccess_menu * {
    background-color: initial !important;
    background: initial !important;
}

/* Para el header del menú */
.totara_core__QuickAccess_menu-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/* Para los grupos del menú */
.totara_core__QuickAccess_group {
    background-color: transparent !important;
}


/*devolver fondo blanco a menu ajustes*/
#quickaccess-popover-content{

background-color:#FFFFFF !important;
}

/*dar fondo redondeado a  items del lado derecho*/

#action-menu-0-menubar li:hover {
border-radius:50px !important;
background-color: rgba(255, 255, 255, 0.5) !important;

}

#quickaccess-popover-container > div.nav-link:hover{
border-radius:50px !important;
background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Solo resetear border-radius, NO el background */
#quickaccess-popover-container #quickaccess-popover-content *:not(.totara_core__QuickAccess_menu),
.totara_core__QuickAccess_menu li,
.totara_core__QuickAccess_menu a {
    border-radius: initial !important;
}

/* Mantener fondo blanco específicamente */
#quickaccess-popover-content.totara_core__QuickAccess_menu {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
}
#quickaccess-popover-container div span:hover{

background-color: transparent !important;

}

/* DESPUÉS: solo al toggle (el botón de mensajes), no al contenido del submenu */
#nav-message-popover-container .popover-region-toggle:hover {
  border-radius:50px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}


#nav-notification-popover-container .popover-region-toggle:hover {
  border-radius:50px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}


body.dl-dark-mode
  .nav-link.totara_core__QuickAccess_icon.popover-region-toggle:hover
  .flex-icon::before {
    
    background: transparent !important;
 
}

/* 1) Override al pseudo-elemento ::before del icono de email */
body.dl-dark-mode
  .popover-region-toggle.nav-link[data-region="popover-region-toggle"]
  [data-flex-icon="email"]::before {
background: transparent !important;
}

/* 2) Override al contenedor mismo al hacer hover */
body.dl-dark-mode
  .popover-region-toggle.nav-link[data-region="popover-region-toggle"]
  [aria-label="Show message window with no new messages"]:hover {
    background: transparent !important;
}

/* 1) Override al pseudo-elemento ::before del icono de campana */
body.dl-dark-mode
  .popover-region-toggle.nav-link[data-region="popover-region-toggle"]
  [data-flex-icon="notification-non-filled"]::before {
background: transparent !important;
}

/* 2) Override al contenedor mismo al hacer hover */
body.dl-dark-mode
  .popover-region-toggle.nav-link[data-region="popover-region-toggle"]
  [aria-label="Show notification window with no new notifications"]:hover {
background: transparent !important;
}




/* TEXTO BLANCO PARA ITEMS */

/* Hacer los textos de los items del navbar principales blancos */
body.dl-dark-mode .totaraNav_prim--list_item .totaraNav_prim--list_item_link,
body.dl-dark-mode .totaraNav_prim--side span.flex-icon::before {
    color: #FFFFFF !important; /* Cambiar de negro semi-transparente a blanco */
    opacity: 1 !important; /* Quitar la transparencia */
}

/* Asegurar que los labels de los items también sean blancos */
body.dl-dark-mode .totaraNav_prim--list_item_label {
    color: #FFFFFF !important;
}

/* Para items específicos que necesiten ser blancos */
body.dl-dark-mode #totaramenuitem13 .totaraNav_prim--list_item_link,
body.dl-dark-mode #totaramenuitem13 .totaraNav_prim--list_item_label,
body.dl-dark-mode #totaramenuitem55 .totaraNav_prim--list_item_link,
body.dl-dark-mode #totaramenuitem55 .totaraNav_prim--list_item_label,
body.dl-dark-mode #totaramenuitem43 .totaraNav_prim--list_item_link,
body.dl-dark-mode #totaramenuitem43 .totaraNav_prim--list_item_label {
    color: #FFFFFF !important;
}

/* Para el submenú también */
body.dl-dark-mode .navExpand--list .navExpand--list_item a {
    color: #FFFFFF !important; /* Cambiar de azul a blanco para mejor contraste */
    font-family: 'Roboto-Light', sans-serif;
    font-size: 12px;
    line-height: 16px;
}

/* Para los iconos del navbar lateral */
body.dl-dark-mode .totaraNav_prim--side .nav-link,
body.dl-dark-mode .totaraNav_prim--side .popover-region-toggle {
    color: #FFFFFF !important;
}

body.dl-dark-mode .totaraNav_prim--side .flex-icon {
    color: #FFFFFF !important;
}

/* Para el menú de usuario */
body.dl-dark-mode .totaraNav_prim--side .usermenu .toggle-display {
    color: #FFFFFF !important; /* Cambiar de gris a blanco */
}

body.dl-dark-mode .usermenu .usertext {
    color: #FFFFFF !important;
}

/* Mantener el comportamiento hover pero con mejor contraste */
body.dl-dark-mode .totaraNav_prim--list_item:hover a {
    color: var(--dl-principal) !important; /* Mantener el azul al hacer hover */
}

/* Para estados seleccionados, mantener el texto blanco */
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected a {
    color: var(--dl-principal2) !important; /* Esto ya estaba bien */
    opacity: 1;
}

/* QUITAR FONDO AZUL item seleccionado */
/* Quitar COMPLETAMENTE el fondo azul del item seleccionado - TODAS las variantes */
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected:hover,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected:focus,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected:active,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected.totaraNav_prim--list_item_hasChildren {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Quitar fondo azul también para estados hover en items no seleccionados */
body.dl-dark-mode .totaraNav_prim--list:not(.totaraNav_prim--list_showMobile) .totaraNav_prim--list_item:hover {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Asegurar que los elementos internos del item seleccionado también sean transparentes */
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_link,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_label {
    background: transparent !important;
    background-color: transparent !important;
}

/* Para el menú de usuario y otros elementos laterales */
body.dl-dark-mode div.usermenu ul.menubar li[role="presentation"],
body.dl-dark-mode div.usermenu ul.menubar li[role="presentation"]:hover,
body.dl-dark-mode .totaraNav_prim--side div.nav-link:not(.totara_core__QuickAccess_icon),
body.dl-dark-mode .totaraNav_prim--side div.nav-link:hover:not(.totara_core__QuickAccess_icon),
body.dl-dark-mode .popover-region-toggle:not(.totara_core__QuickAccess_icon),
body.dl-dark-mode .popover-region-toggle:hover:not(.totara_core__QuickAccess_icon) {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Para estados expandidos en móvil */
body.dl-dark-mode .totaraNav_prim--list_showMobile .totaraNav_prim--list_item.totaraNav_prim--list_item_selected.totaraNav--list_item_expanded,
body.dl-dark-mode .totaraNav_prim--list_showMobile .totaraNav_prim--list_item.totaraNav_prim--list_item_selected {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Quitar cualquier gradiente o color de fondo heredado */
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected::before,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected::after {
    background: transparent !important;
    background-color: transparent !important;
    display: none !important;
}

/* Asegurar que los íconos mantengan color blanco */
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected .flex-icon,
body.dl-dark-mode .totaraNav_prim--list_item.totaraNav_prim--list_item_selected .totaraNav--icon_chevron {
    color: #FFFFFF !important;
}

/* Solución para Settings page */
body#page-admin-theme-dlcourseflix-index .breadcrumb-container {
    margin-top: 90px !important; /* Ajusta este valor según necesites */
}

/* Solo navbar principal - Settings page */
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--list_item_link,
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--list_item_label,
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--side .flex-icon,
body#page-admin-theme-dlcourseflix-index .usermenu .usertext,
body#page-admin-theme-dlcourseflix-index .usermenu .toggle-display {
    color: #FFFFFF !important;
}

/* Asegurar que submenús mantengan sus colores originales */
body#page-admin-theme-dlcourseflix-index .popover-region-content *,
body#page-admin-theme-dlcourseflix-index .totara_core__QuickAccess_menu * {
    color: initial !important;
}

/* RESETEAR solo border-radius del menú QuickAccess */
.totara_core__QuickAccess_menu li,
.totara_core__QuickAccess_menu a {
    border-radius: initial !important;
}

#quickaccess-popover-content{
background-color:#FFFFFF !important;
background:#FFFFFF !important;
}

/* Hover correcto para items */
.totara_core__QuickAccess_group-list li:hover {
    background-color: #f8f9fa !important;
    border-radius: 4px !important;
}
/* Restaurar el hover correcto del QuickAccess */
.totara_core__QuickAccess_group-list li:hover {
    background-color: #f8f9fa !important;
    border-radius: 4px !important;
 
}

/* fondo blanco en settings page de los ajustes */
body#page-admin-theme-dlcourseflix-index div#quickaccess-popover-content.totara_core__QuickAccess_menu.popover-region-content {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

#totaramenuitem55{
background-color:transparent !important;
}
/*ajustes estilo submenu desde vista catalogo*/
.navExpand--list{
color: #333 !important;
font-weight:bold !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

}
/*submenu bordes redondeados desde vista catalogo*/
body.catalog .totaraNav .navExpand--list.navExpand--listSecond[data-tw-navexpand-list="true"]{
border-radius:15px !important;
background-color:#FFFFFF;
}

.navExpand--list_item_label{
color: #333 !important;
}

/*separadores del submenu en vista catalogo */
ul.navExpand--list.navExpand--listSecond > li:not(:last-child) {
  border-bottom: 1px solid #bdbdbd !important;

}

.navExpand--list{
border-radius: 15px !important;
font-size:12px !important;
}

/* Primer enlace del submenú */
ul.navExpand--list.navExpand--listSecond[data-tw-navexpand-list="true"]
  > li:first-child
  > a.navExpand--list_item_link {
    padding-top: 0;
}

/* Último enlace del submenú */
ul.navExpand--list.navExpand--listSecond[data-tw-navexpand-list="true"]
  > li:last-child
  > a.navExpand--list_item_link {
    padding-bottom: 0;
}

.breadcrumb-container{
margin-top:100px !important;
}

nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* Selector ultra-específico para items principales */
nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item a.totaraNav_prim--list_item_link,
nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item .totaraNav_prim--list_item_label {
    color: #FFFFFF !important;
font-size:12px !important;

}

/* Iconos específicos */
nav.totaraNav_prim ul.totaraNav_prim--list .totaraNav--icon_chevron,
nav.totaraNav_prim ul.totaraNav_prim--list .flex-icon {
    color: #FFFFFF !important;

font-size:12px !important;
}

.totaraNav_prim--side{
color:#FFFFFF !important;
font-size:12px !important;

}

.totaraNav--icon_burger{
color:#FFFFFF !important;
}

.usertext{
color:#FFFFFF !important;

font-size:12px !important;
font-weight:700;
font-family: 'Roboto', sans-serif !important;

}

nav.totaraNav_prim .totara_core__QuickAccess_menu, nav.totaraNav_prim .popover-region-content, nav.totaraNav_prim .totara_core__QuickAccess_menu *, nav.totaraNav_prim .popover-region-container, nav.totaraNav_prim .popover-region-container * {
    /* background-color: initial !important; */
    /* background: initial !important; */
    background: white !important;
}

nav.totaraNav_prim .totara_core__QuickAccess_menu, nav.totaraNav_prim .popover-region-content, nav.totaraNav_prim .totara_core__QuickAccess_menu *, nav.totaraNav_prim .popover-region-container, nav.totaraNav_prim .popover-region-container *:hover {
    /* background-color: initial !important; */
    /* background: initial !important; */
    background: white !important;
border-radius:0px !important;
}


nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item a.totaraNav_prim--list_item_link, nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item .totaraNav_prim--list_item_label {
    
   font-weight:700;
font-family: 'Roboto', sans-serif !important;
}

body#page-admin-theme-dlcourseflix-index .navExpand--list *{
color:#333 !important;
}


/* arreglo para items del menu para movil, en blanco */
/* Para cada elemento específico del menú móvil */
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem13 .totaraNav_prim--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem13 .totaraNav_prim--list_item_label,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem55 .totaraNav_prim--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem55 .totaraNav_prim--list_item_label,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem43 .totaraNav_prim--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem43 .totaraNav_prim--list_item_label,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem56 .totaraNav_prim--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li#totaramenuitem56 .totaraNav_prim--list_item_label {
    color: black !important;
}

/* Para los submenús móviles también */
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] ul.navExpand--list.navExpand--listSecond li .navExpand--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] ul.navExpand--list.navExpand--listSecond li .navExpand--list_item_label {
    color: black !important;
}

/* Regla general como respaldo */
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li.totaraNav_prim--list_item a.totaraNav_prim--list_item_link,
body.dl-dark-mode nav.totaraNav_prim ul.totaraNav_prim--list.totaraNav_prim--list_showMobile[role="menubar"] li.totaraNav_prim--list_item .totaraNav_prim--list_item_label {
    color: black !important;
}

/* ===== PÁGINA DE ADMINISTRACIÓN (menú movil)===== */
/* Sobreescribe el color blanco por negro */
@media (max-width: 1024px) {
  /* Aplica solo en vista móvil */
  nav.totaraNav_prim ul.totaraNav_prim--list_showMobile li.totaraNav_prim--list_item 
    a.totaraNav_prim--list_item_link,
  nav.totaraNav_prim ul.totaraNav_prim--list_showMobile li.totaraNav_prim--list_item 
    .totaraNav_prim--list_item_label {
    color: #000 !important;
  }
}

@media (max-width: 1024px) {
  nav.totaraNav_prim 
    ul.totaraNav_prim--list_showMobile 
    li.totaraNav_prim--list_item_close 
    .img-profile h5.bold {
    color: #000 !important;
font-weight:normal;
  }
}

/* Solo iconos del submenú de usuario (negro) */
body.dl-dark-mode #action-menu-0-menu .flex-icon,
body.dl-dark-mode #action-menu-0-menu .flex-icon::before {
    color: #06032F !important;
}


@media screen and (max-width: 1080px) {
body.dl-dark-mode #action-menu-0-menubar li[role="presentation"]:hover {
    width: 90px !important;
    background-color: rgba(165, 171, 175, 0.7) !important;
    border-radius: 50px !important;
}
}

@media screen and (max-width: 1080px) {
#action-menu-0-menubar li:hover {
    width: 75px;

}}

@media screen and (max-width: 1080px) {
body.dl-dark-mode.fixed-menu-top #page {
    margin-top: 240px;
}}

/* Para celulares */
@media screen and (max-width: 768px) {
  body.dl-dark-mode.fixed-menu-top #page {
    margin-top: 120px; /* valor reducido para móvil */
  }
}

@media (max-width: 768px) {
    div#block-region-top div.block:not(.block_dlslider) {
        padding-bottom: 30px;
    }
}


@media screen and (max-width: 1080px) {
#page-navbar {
    margin-right: 30px;
}}


@media screen and (max-width: 1080px) {
body.dl-dark-mode #page {
    margin-top: 200px;
}}

@media screen and (max-width: 768px) {
body.dl-dark-mode #page {
    margin-top: 120px;
}}

@media screen and (max-width: 768px) {
.block .content h1, .block .content h2, .block .content h3, .block .content .box.message .messagearea .messagesend .mform .fitemtitle, .box.message .messagearea .messagesend .mform .block .content .fitemtitle, .block .content .box.message .messagearea .messagesend .mform .form-label, .box.message .messagearea .messagesend .mform .block .content .form-label, .block .content h4, .block .content h5, .block .content h6{
    font-size: 12px !important;
}
}

@media (max-width: 768px) {
    body.dl-dark-mode #dl-topbar-searchjs #genericsearchbox {
        margin-top: 10px !important;
        width: 130px !important;
    }
}


@media (max-width: 1080px) {
    body#page-totara-program-index.dl-dark-mode .totaraNav .totaraNav_prim .container-fluid .totaraNav_prim--side {
        margin-top: 5px !important;
    }
}


@media (max-width: 480px) {
    body#page-totara-program-index.dl-dark-mode #dl-topbar-searchjs > i {
        margin-top: 2px;
    }
}



@media (max-width: 480px) {
    body.dl-dark-mode #dl-topbar-searchjs > i {
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 767.98px) {
    .tui-dlCourseCarousel .tui-dlCourseTitle {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 767.98px) {
body#page-totara-catalog-index.dl-dark-mode .totaraNav_prim--side {
    margin-top: -50px;
    margin-left: 80px:
}}


/* Reducir espacios entre bloques en móvil */
@media (max-width: 768px) {
    /* Mantener el slider/header normal */
    #inst71355.block_dlcustomheader {
        margin-bottom: 0.5rem !important;
    }
    
    /* Acercar los bloques siguientes */
    #inst71383.block_dlmylearning {
        margin-top: -100px !important;
    }
    
    #inst71359.block_dlmostviewed {
margin-top: -100px !important;
    }
    
    #inst71401.block_dlcoursecategories {
margin-top: -100px !important;
    }
    
    #inst71395.block_dlmylearning {
        margin-top: -100px !important;
    }

    #inst71361.block_dlcoursecategories{
    margin-top: -100px !important;
    }
}

@media screen and (max-width: 1080px) {
    body#page-totara-catalog-index.dl-dark-mode.fixed-menu-top #page {
        margin-top: 90px;
    }
}

@media screen and (max-width: 480px) {
    body#page-totara-catalog-index.dl-dark-mode.fixed-menu-top #page {
        margin-top: 120px;
    }
}

@media screen and (max-width: 480px) {
body#page-totara-catalog-index.dl-dark-mode .totaraNav_prim--side {
    margin-top: 2px;
    margin-left: 80px:
}}

@media screen and (max-width: 391px) {
    body#page-totara-program-index.dl-dark-mode .totaraNav .totaraNav_prim .container-fluid .totaraNav_prim--side {
        margin-top: -50px !important;
    }
}

@media screen and (max-width: 389px) {
    body#page-totara-catalog-index.dl-dark-mode .totaraNav .totaraNav_prim .container-fluid .totaraNav_prim--side {
        margin-top: -50px !important;
    }
}

@media screen and (max-width: 700px) {
body#page-admin-setting-themesettings img.img-fluid.custom-square {
      width:50px;
margin-left:-20px;
}
}


@media screen and (max-width: 1080px) {
body#page-admin-setting-themesettings img.img-fluid.custom-square {
      width:50px;
margin-left:-20px;
}
}


@media (max-width: 1080px) {
    /* Mantener el slider/header normal */
    #inst71355.block_dlcustomheader {
        margin-bottom: 0.5rem !important;
    }
    
    /* Acercar los bloques siguientes */
    #inst71383.block_dlmylearning {
        margin-top: -100px !important;
    }

    #inst71361.block_dlcoursecategories{
    margin-top: -70px !important;
    }
}
/* botones para scrollear block más vistos , desde la vista para celular*/
@media screen and (max-width: 700px) {
.tui-dlGridRow .tui-dlHandle.tui-dlHandlePrev {
display:block !important;
}
}
@media screen and (max-width: 700px) {
.tui-dlGridRow .tui-dlHandle.tui-dlHandleNext{
display:block !important;
               }
         }

/*margen de "cursos no iniciados, vista para celular*/
@media screen and (max-width: 700px) {
    #page-content #block-region-top #inst71383.block.block_dlmylearning {
        margin-left: -50px !important;
    }
}

/* desde tamaño tablet o celular, las flechas de los bloques siempre son visibles*/
@media screen and (max-width: 1365px) {
span.tui-dlHandle[aria-label="Ver títulos siguientes"]
{
display:block;
position:absolute !important;
width:50px !important;
}
}

@media screen and (max-width: 1365px) {
span.tui-dlHandle[aria-label="Ver títulos siguientes"] .fa-chevron-right
{
    top: 50%;
    transform: translateY(-50%);
position:absolute !important;
margin-right:20px;
}
}


@media screen and (max-width: 1365px) {
span.tui-dlHandle[aria-label="Ver títulos anteriores"]
{
display:block;
position:absolute !important;
}
}

@media screen and (max-width: 1365px) {
span.tui-dlHandle[aria-label="Ver títulos anteriores"] .fa-chevron-left
{
position:absolute !important;
    top: 50%;
    transform: translateY(-50%);
}
}

/*-----------------------------------------------------------------------------*/
/*arreglo al error de pagina de ver actividad de un curso----*/

body.path-mod-scorm.dl-dark-mode div.container-fluid.breadcrumb-container {
    position: relative !important;
}

/*
 * =================================================================
 * REGLAS DE ANULACIÓN EXCLUSIVAS PARA PÁGINAS DE ADMINISTRACIÓN
 * =================================================================
 * Este código se ejecuta solo en páginas cuyo ID del <body>
 * comience con "page-admin-" para resetear los estilos del navbar.
*/

/* 1. Fondo del navbar en páginas de admin */
body[id^="page-admin-"] .totaraNav > nav.totaraNav_prim {
    background-color: #ffffff !important;
background: #ffffff !important;
}

/* 2. Color de texto e íconos en páginas de admin */
body[id^="page-admin-"] .totaraNav .totaraNav_prim--list_item_label,
body[id^="page-admin-"] .totaraNav .flex-icon,
body[id^="page-admin-"] .totaraNav_prim--side .usertext {
    color: #2B2F87 !important;
}

/* 3. Color de la flecha del menú de usuario en páginas de admin */
body[id^="page-admin-"] .totaraNav_prim--side .usermenu .userbutton .caret {
    border-top-color: #2B2F87 !important;
}

/* Selector de alta especificidad que aplica color negro a los textos 
  del menú principal, SÓLO en páginas de administración.
*/
body[id^="page-admin-"] nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item a.totaraNav_prim--list_item_link, 
body[id^="page-admin-"] nav.totaraNav_prim ul.totaraNav_prim--list li.totaraNav_prim--list_item .totaraNav_prim--list_item_label {
    color: #2B2F87 !important;
}


/* 2. Estilo para el texto de los items del menú */
body#page-admin-theme-dlcourseflix-index .totaraNav nav.totaraNav_prim ul.totaraNav_prim--list > li.totaraNav_prim--list_item > a.totaraNav_prim--list_item_link .totaraNav_prim--list_item_label {
    color: #2B2F87 !important; /* Texto negro */
}

/* 3. Estilo para los íconos dentro de los items del menú (ej. flecha de dropdown) */
body#page-admin-theme-dlcourseflix-index .totaraNav nav.totaraNav_prim ul.totaraNav_prim--list > li.totaraNav_prim--list_item > a.totaraNav_prim--list_item_link .flex-icon {
    color: #2B2F87 !important; /* Iconos en negro */
}

/*
 * Forzar el color de íconos y texto a negro en la sección lateral de la navegación (íconos de usuario, mensajes, etc.)
*/

/* 1. Selector para todos los íconos (engranaje, sobre, campana) */
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--side .flex-icon {
    color: #2B2F87 !important;
}

/* 2. Selector para el nombre del usuario en el menú desplegable */
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--side .usermenu .userbutton .usertext {
    color: #2B2F87 !important;
}

/* 3. Selector para la flecha (caret) del menú desplegable de usuario */
body#page-admin-theme-dlcourseflix-index .totaraNav_prim--side .usermenu .userbutton .caret {
    border-top-color: #2B2F87 !important;
}

/*=============================================*/


/*@media (min-width: 1280px) {
   div[role="main"] h2 {
    padding-top: 15%;
}

}
@media (min-width: 1366px) {
    div[role="main"] h2 {
    padding-top: 15%;
}
}
@media (min-width: 1600px) {
    div[role="main"] h2 {
    padding-top: 9%;
}

}
@media (min-width: 1920px) {
   div[role="main"] h2 {
    padding-top: 8%;
}
div#region-top {
    margin-top: 5%;
}
}*/