/* ==========================================================================
   Layout general del tema Moodle
   --------------------------------------------------------------------------
   Reglas organizadas por jerarquia visual: base, estructura, navegacion,
   contenido del curso, actividades, estados y ajustes responsivos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base global
   -------------------------------------------------------------------------- */

/* Define el fondo, la tipografia y el tamano base de texto para todo el sitio. */
body {
    background-color: #F8F8F6 !important;
    font-size: 12pt !important;
    font-family: "Roboto Condensed" !important;
}

/* Ajusta el color principal de los enlaces del tema. */
a {
    color: #00455a;
}

/* Elimina sombra y borde en contenedores marcados manualmente con esta utilidad. */
.mario-noshadow > div {
    box-shadow: none !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   2. Estructura principal y anchos de pagina
   -------------------------------------------------------------------------- */

/* Compensa el contenido principal por la altura reducida de la barra superior. */
#page.drawers {
    margin-top: 55px;
}

/* Limita el ancho del lienzo principal y mantiene el fondo heredado del body. */
#page.drawers .main-inner {
    max-width: 1400px;
    background-color: inherit !important;
}

/* Centra y limita los contenedores fluidos en pantallas grandes. */
.container-fluid {
    max-width: 1400px !important;
}

/* Da ancho maximo al bloque superior sobre el contenido principal. */
#block-region-above {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    border-radius: 0.5rem;
    background-color: inherit;
    flex: 1 0 auto;
}

/* Mantiene el contenido principal con el fondo del contexto donde aparece. */
#region-main {
    background-color: inherit;
}

/* Da apariencia de panel al contenido central en paginas generales del sitio. */
#page-content {
    background-color: white;
    padding: 1.3em;
    border-radius: 7px;
    border: solid 1px #ececec;
}

@media (min-width: 768px) {
    /* Quita margenes internos laterales del area principal en pantallas medianas o mayores. */
    #page.drawers div[role="main"] {
        padding: 0;
    }
}

@media (min-width: 768px) {
    /* Amplia el ancho disponible en layouts estandar y paginas con ancho limitado. */
    .pagelayout-standard #page.drawers .main-inner,
    body.limitedwidth #page.drawers .main-inner {
        max-width: 1400px;
    }
}

/* --------------------------------------------------------------------------
   3. Barra superior y navegacion
   -------------------------------------------------------------------------- */

/* Define alto, fondo, borde y sombra de la barra superior fija. */
.navbar.fixed-top {
    background-color: #FFF;
    border-bottom: #fbfbfb 1px solid;
    box-shadow: -18px -2px 3px 2px #0000002e;
    height: 55px;
}

/* Reduce la altura maxima del logo para alinearlo con la barra superior compacta. */
.navbar.fixed-top .navbar-brand .logo {
    max-height: calc(38px - (0.35rem * 2)) !important;
}

/* Separa visualmente los items de la navegacion principal. */
div.primary-navigation > nav > ul > li.nav-item {
    padding-left: 15px;
}

/* Ajusta alto, color y borde superior de los enlaces de navegacion principal. */
.primary-navigation .navigation .nav-link {
    height: 58px;
    color: #1d2125;
    border-top: 10px solid #fff0;
}

/* Cambia el color inferior del item activo en menus tipo moremenu. */
.moremenu .nav-link.active {
    border-bottom-color: #f69200;
    /* font-weight: 500; */
    color: #343a40;
}

/* Suaviza el fondo y cambia el indicador inferior al enfocar o pasar por el item activo. */
.moremenu .nav-link.active:focus,
.moremenu .nav-link.active:hover {
    background-color: #fafafa;
    border-bottom-color: #007b99;
}

/* Ajusta tamano y peso de los iconos de regiones emergentes en la barra superior. */
.navbar-nav .popover-region .icon {
    font-weight: normal !important;
    font-size: 20px !important;
}

/* Ajusta los iconos de acciones dentro del encabezado de regiones emergentes. */
.navbar-nav .popover-region-header-actions .icon {
    font-weight: bold !important;
    font-size: 15px !important;
}

/* Redondea la parte inferior de la navegacion secundaria del curso. */
.secondary-navigation .navigation {
    margin: 0 !important;
    border-radius: 7px;
    border: solid #e5e5e5 1px;
}

/* Limita el ancho del menu secundario para alinearlo con el contenido principal. */
.secondary-navigation .navigation .nav-tabs {
    max-width: 1400px;
}

/* --------------------------------------------------------------------------
   4. Cabeceras, bloques laterales y drawers
   -------------------------------------------------------------------------- */

/* Hace que las cabeceras de pagina hereden el fondo del layout. */
.header-maxwidth {
    background-color: inherit !important;
}

/* Aclara el tono del titulo principal de pagina. */
#page-header h1.h2 {
    color: #333333 !important;
}

/* Oculta el encabezado de la pagina de inicio personal para reducir ruido visual. */
#page-my-index #page-header {
    display: none;
}

/* Aplica fondo claro al drawer lateral. */
.drawer {
    background-color: #f7f7f7 !important;
}

@media (min-width: 768px) {
    /* Ajusta el ancho maximo de la cabecera en pantallas medianas o mayores. */
    .header-maxwidth {
        max-width: 1400px;
        background-color: #ffffff;
    }
}

@media (min-width: 992px) {
    /* Desplaza el contenido cuando ambos drawers estan visibles en escritorio. */
    #page.drawers.show-drawer-left.show-drawer-right {
        margin-left: 315px;
    }
}

@media (min-width: 1920px) {
    /* Evita desplazamientos laterales de drawers en resoluciones muy amplias. */
    #page.drawers.show-drawer-left,
    #page.drawers.show-drawer-right,
    #page.drawers.show-drawer-left.show-drawer-right {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* --------------------------------------------------------------------------
   5. Layout especifico de cursos
   -------------------------------------------------------------------------- */

/* Quita fondo, padding y margen superior del lienzo principal en formatos grid y topics. */
#page-course-view-grid #page.drawers .main-inner,
#page-course-view-topics #page.drawers .main-inner {
    background-color: inherit !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* Da apariencia de tarjeta a las secciones del curso. */
.course-section .section-item {
    background-color: white;
    -webkit-box-shadow: -1px 1px 5px 0 #5b5b5b14 !important;
    box-shadow: -1px 1px 5px 0 #5b5b5b14 !important;
    border: 1px solid #e9edf1;
    border-radius: 0.5rem;
}

/* Mantiene transparente el lienzo central en el formato de temas. */
#page-course-view-topics #page-content {
    background-color: inherit !important;
}

/* Da apariencia de tarjeta a los bloques HTML ubicados sobre el curso en topics. */
#page-course-view-topics aside#block-region-top section.block_html {
    background-color: white;
    -webkit-box-shadow: -1px 1px 5px 0 #5b5b5b14 !important;
    box-shadow: -1px 1px 5px 0 #5b5b5b14 !important;
    border: 1px solid #e9edf1;
}

@media (max-width: 1415px) {
    /* Ajusta el padding horizontal del bloque superior del curso en pantallas estrechas. */
    #page-course-view-topics aside #block-region-top {
        padding: 0 15px;
    }
}

@media (max-width: 1415px) {
    /* Ajusta el padding horizontal del contenido principal del curso en pantallas estrechas. */
    #page-course-view-topics section#region-main {
        padding: 0 15px;
    }
}

/* --------------------------------------------------------------------------
   6. Actividades, disponibilidad y restricciones
   -------------------------------------------------------------------------- */

/* Marca una separacion sutil entre actividades dentro de una seccion. */
.activity {
    border-top: 2px dotted #e6ecf1;
}

/* Resalta el icono de candado en actividades bloqueadas por condiciones. */
div.activity-availability > div > div > i.fa-lock::before,
div.activity-availability > div > i.fa-lock::before {
    background-color: #e5b46e;
    padding: 4px;
    border-radius: 5px;
    color: white;
    font-size: 0.8em;
}

/* Da estilo de aviso suave a los mensajes de bloqueo propios de las secciones. */
div.section_availability > div.availabilityinfo {
    background-color: #fff9da;
    display: inline-block;
    padding: 0.25em 0.875em;
    color: #533931;
}

/* Alinea y suaviza la informacion de disponibilidad dentro de secciones del curso. */
.course-section .availabilityinfo {
    background-color: inherit;
    padding: inherit;
    color: #4b545d;
    font-size: 0.8em;
    border-left: #dfdfdf 1px solid;
    padding-left: 15px;
    border-radius: inherit;
    padding-top: 0.25rem !important;
    margin-top: inherit;
}

/* Hace mas discreto el enlace dentro del extracto de restricciones de actividad. */
span.availability-excerpt > strong > a {
    font-weight: normal;
    color: #40518b;
}

/* Refuerza el peso visual y el color de los nombres de actividades. */
div.activity-name-area > div.activitytitle > div.activityname > a {
    font-weight: 600;
    color: #334554;
}

/* --------------------------------------------------------------------------
   7. Estados de enfoque y controles de configuracion
   -------------------------------------------------------------------------- */

/* Sustituye la linea azul de foco por una sombra clara en elementos interactivos de Moodle. */
.aabtn.focus,
.aabtn:focus,
.btn-link.focus,
.btn-link:focus,
.nav-link.focus,
.nav-link:focus,
.editor_atto_toolbar button.focus,
.editor_atto_toolbar button:focus,
.editor_atto_toolbar .atto_toolbar_row.focus,
.editor_atto_toolbar .atto_toolbar_row:focus,
[role=button].focus,
[role=button]:focus,
.list-group-item-action.focus,
.list-group-item-action:focus,
input[type=checkbox].focus,
input[type=checkbox]:focus,
input[type=radio].focus,
input[type=radio]:focus,
input[type=file].focus,
input[type=file]:focus,
input[type=image].focus,
input[type=image]:focus,
.sr-only-focusable.focus,
.sr-only-focusable:focus,
a.dropdown-toggle.focus,
a.dropdown-toggle:focus,
.moodle-dialogue-base .closebutton.focus,
.moodle-dialogue-base .closebutton:focus,
button.btn-close.focus,
button.btn-close:focus,
.form-autocomplete-selection.focus,
.form-autocomplete-selection:focus,
[role=treeitem]:not([aria-expanded=true]).focus,
[role=treeitem]:not([aria-expanded=true]):focus {
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgb(245 243 238);
}

/* Cambia color y fondo del boton de expandir o contraer paneles de configuracion. */
.btn.btn-icon.icons-collapse-expand {
    color: #ce8123;
    background-color: #f9f7f1;
}

/* --------------------------------------------------------------------------
   Nota de mantenimiento
   --------------------------------------------------------------------------
   Ajuste conservado como referencia:

   Eliminar el margen superior de .main-inner puede pegar el banner del curso
   al navbar, pero tambien puede generar efectos laterales en otras paginas.

   #page.drawers .main-inner {
       margin-top: 0rem !important;
   }
   -------------------------------------------------------------------------- */