/* =========================================================
   ENSOG - Personalización Forma LMS 4.1.44
   Plantilla institucional
   ========================================================= */


/* =========================================================
   1. PALETA INSTITUCIONAL
   ========================================================= */

:root {

    /* Colores institucionales ENSOG */
    --ensog-blue: #617A8A;
    --ensog-wine: #7D212B;
    --ensog-gold: #DBAD6B;
    --ensog-violet: #646481;


    /* Variantes oscuras */
    --ensog-blue-dark: #485F6E;
    --ensog-wine-dark: #5E1820;
    --ensog-gold-dark: #A97E43;
    --ensog-violet-dark: #4B4B63;


    /* Variantes claras */
    --ensog-blue-light: #EEF2F4;
    --ensog-wine-light: #F7ECEE;
    --ensog-gold-light: #FBF5EB;
    --ensog-violet-light: #F0F0F4;


    /* Neutros */
    --ensog-background: #F7F8F9;
    --ensog-surface: #FFFFFF;
    --ensog-text: #26343D;
    --ensog-text-muted: #66747D;
    --ensog-border: #DCE2E5;


    /* Degradados */
    --ensog-gradient-blue:
        linear-gradient(
            135deg,
            #617A8A 0%,
            #485F6E 100%
        );

    --ensog-gradient-wine:
        linear-gradient(
            135deg,
            #7D212B 0%,
            #5E1820 100%
        );

    --ensog-gradient-brand:
        linear-gradient(
            135deg,
            #617A8A 0%,
            #646481 100%
        );


    /* -----------------------------------------------------
       Variables nativas de Forma LMS
       ----------------------------------------------------- */

    --color-primary: #617A8A;
    --color-secondary: #7D212B;
    --color-info: #617A8A;

    --color-primary-text: #FFFFFF;
    --color-disabled: #AAB3B9;
}


/* =========================================================
   2. BASE
   ========================================================= */

body {
    color: var(--ensog-text);
}


/* Selección de texto */

::selection {
    background: var(--ensog-wine);
    color: #FFFFFF;
}


/* =========================================================
   3. ENLACES
   ========================================================= */

a {
    color: var(--ensog-wine);
}

a:hover,
a:focus {
    color: var(--ensog-wine-dark);
}


/* =========================================================
   4. BOTONES
   ========================================================= */

/* Botón principal */

.btn-primary {
    background-color: var(--ensog-wine);
    border-color: var(--ensog-wine);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--ensog-wine-dark);
    border-color: var(--ensog-wine-dark);
}


/* Botón secundario */

.btn-default,
.btn-secondary {
    color: var(--ensog-blue-dark);
    border-color: var(--ensog-blue);
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #FFFFFF;
    background-color: var(--ensog-blue);
    border-color: var(--ensog-gold-dark);
}


/* =========================================================
   5. TÍTULOS
   ========================================================= */

h1,
h2,
h3 {
    color: var(--ensog-blue);
}

.panel-title {
    color: var(--ensog-blue-dark);
}


/* Títulos de bloques administrativos */

.block_spacer h3 {
    border-bottom: 2px solid var(--ensog-gold-light);
    padding-bottom: 4px;
}


/* =========================================================
   6. PANELES
   ========================================================= */

.panel,
.well {
    border-color: var(--ensog-border);
    box-shadow: none;
}

.panel-default > .panel-heading {
    background-color: var(--ensog-blue-light);
    border-color: var(--ensog-border);
    color: var(--ensog-blue-dark);
}


/* =========================================================
   7. PESTAÑAS
   ========================================================= */

.nav-tabs {
    border-bottom-color: var(--ensog-blue);
}

.nav-tabs > li > a {
    color: var(--ensog-blue-dark);
}

.nav-tabs > li > a:hover {
    background-color: var(--ensog-blue-light);
    border-color: transparent;
    color: var(--ensog-wine);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ensog-wine);
    background-color: #FFFFFF;

    border-color: var(--ensog-blue);
    border-bottom-color: #FFFFFF;
    border-top: 2px solid var(--ensog-gold);
}


/* =========================================================
   8. FORMULARIOS
   ========================================================= */

.form-control:focus {
    border-color: var(--ensog-blue);

    box-shadow:
        0 0 0 2px rgba(97, 122, 138, 0.15);

    outline: none;
}


/* =========================================================
   9. TABLAS
   ========================================================= */

.table > thead > tr > th {
    color: var(--ensog-blue-dark);
    border-bottom-color: var(--ensog-blue);
}

.table-hover > tbody > tr:hover {
    background-color: var(--ensog-blue-light);
}


/* =========================================================
   10. ELEMENTOS GENERALES
   ========================================================= */

hr {
    border-top-color: var(--ensog-border);
}


/* =========================================================
   11. MENÚ ADMINISTRATIVO DE FORMA LMS
   Jerarquía basada en azul institucional
   ========================================================= */

.sm-forma {
    border-bottom: 2px solid var(--ensog-gold);
}


@media (min-width: 768px) {

    /* Nivel principal abierto
       Azul institucional */
    .sm-forma > li > a.highlighted {
        background:
            linear-gradient(
                135deg,
                #617A8A 0%,
                #536C7B 100%
            );

        color: #FFFFFF;
    }


    /* Primer nivel de submenú activo
       Azul medio */
    .sm-forma > li > ul > li > a:hover,
    .sm-forma > li > ul > li > a:focus,
    .sm-forma > li > ul > li > a:active,
    .sm-forma > li > ul > li > a.highlighted {

        background:
            linear-gradient(
                135deg,
                #536C7B 0%,
                #455C6A 100%
            );

        color: #FFFFFF;
    }


    /* Segundo nivel de submenú activo
       Azul más profundo */
    .sm-forma > li > ul > li > ul > li > a:hover,
    .sm-forma > li > ul > li > ul > li > a:focus,
    .sm-forma > li > ul > li > ul > li > a:active,
    .sm-forma > li > ul > li > ul > li > a.highlighted {

        background:
            linear-gradient(
                135deg,
                #455C6A 0%,
                #374C59 100%
            );

        color: #FFFFFF;
    }


    /* Flechas del nivel principal */
    .sm-forma a span.sub-arrow {
        border-color:
            var(--ensog-blue)
            transparent
            transparent
            transparent;
    }


    /* Flechas sobre elemento activo */
    .sm-forma a.highlighted span.sub-arrow {
        border-color:
            #FFFFFF
            transparent
            transparent
            transparent;
    }


    /* Flechas de submenús */
    .sm-forma ul a span.sub-arrow {
        border-color:
            transparent
            transparent
            transparent
            var(--ensog-blue-dark);
    }
}


/* =========================================================
   12. LOGIN - CAMPUS ENSOG
   ========================================================= */

/* Campos de usuario y contraseña */

#login_confirm #login_userid,
#login_confirm #login_pwd {
    background-color: #FFFFFF;

    border: 1px solid var(--ensog-blue);

    color: var(--ensog-text);
}


/* Foco */

#login_confirm #login_userid:focus,
#login_confirm #login_pwd:focus {
    border-color: var(--ensog-wine);

    box-shadow:
        0 0 0 2px rgba(125, 33, 43, 0.12);

    outline: none;
}


/* Botón ACCEDER */

.homepage__row--login #login_confirm #login.forma-button,
#login_confirm #login.forma-button {

    background:
        linear-gradient(
            135deg,
            var(--ensog-blue) 0%,
            var(--ensog-blue-dark) 100%
        ) !important;

    border-color: var(--ensog-blue) !important;

    color: #FFFFFF !important;
}


/* Hover y foco */

.homepage__row--login #login_confirm #login.forma-button:hover,
.homepage__row--login #login_confirm #login.forma-button:focus,
#login_confirm #login.forma-button:hover,
#login_confirm #login.forma-button:focus {

    background:
        linear-gradient(
            135deg,
            var(--ensog-blue-dark) 0%,
            #374C59 100%
        ) !important;

    border-color: var(--ensog-blue-dark) !important;

    color: #FFFFFF !important;
}


/* =========================================================
   13. PIE DE LA PÁGINA DE ACCESO
   ========================================================= */

/*
   Forma LMS define originalmente aquí:

   .homepage__row--footer .homepage__links {
       border-top: solid 2px var(--color-primary);
   }

   Se sustituye por el dorado institucional.
*/

.homepage__row--footer .homepage__links {
    border-top:
        2px solid var(--ensog-gold) !important;
}


/* Copyright */

.homepage__footer .powered_by {
    color: var(--ensog-text-muted);
}


/* Enlace Forma LMS del pie */

.homepage__footer .powered_by a {
    color: var(--ensog-blue-dark);
}

.homepage__footer .powered_by a:hover,
.homepage__footer .powered_by a:focus {
    color: var(--ensog-wine);
}

/* =========================================================
   14. ÁREA DEL ESTUDIANTE / MIS CURSOS
   ========================================================= */


/* ---------------------------------------------------------
   Encabezado general LMS
   --------------------------------------------------------- */

.layout_header {
    background: #FFFFFF;
    border-bottom: 2px solid var(--ensog-gold);
}


/* ---------------------------------------------------------
   Contenedor principal
   --------------------------------------------------------- */

#lms_main_container {
    background-color: var(--ensog-background);
}


/* =========================================================
   TARJETAS / LISTADO DE CURSOS
   ========================================================= */

.dash-course,
.edition_container {
    background: var(--ensog-surface);

    border: 1px solid var(--ensog-border);
    border-left: 4px solid var(--ensog-blue);

    border-radius: 5px;

    padding: 14px;
    margin: 12px 6px;

    min-height: 90px;

    box-shadow:
        0 2px 6px rgba(38, 52, 61, 0.06);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Hover sutil */

.dash-course:hover,
.edition_container:hover {
    border-left-color: var(--ensog-gold);

    box-shadow:
        0 4px 12px rgba(38, 52, 61, 0.10);

    transform: translateY(-1px);
}


/* =========================================================
   TÍTULO DEL CURSO
   ========================================================= */

.dash-course h2,
.dash-course h2 a {
    color: var(--ensog-blue-dark);

    font-size: 20px;
    font-weight: 600;

    text-decoration: none;
}


.dash-course h2 a:hover,
.dash-course h2 a:focus {
    color: var(--ensog-blue);
}


/* =========================================================
   LOGO / IMAGEN DEL CURSO
   ========================================================= */

.dash-course img.clogo {
    border: 1px solid var(--ensog-border);

    border-radius: 4px;

    background-color: #FFFFFF;

    padding: 3px;
}


/* =========================================================
   INFORMACIÓN DEL CURSO
   ========================================================= */

.course_support_info {
    color: var(--ensog-text-muted);
}


/* =========================================================
   ESTADO: INSCRITO
   ========================================================= */

.subscribed {
    background:
        linear-gradient(
            135deg,
            var(--ensog-blue) 0%,
            var(--ensog-blue-dark) 100%
        );

    color: #FFFFFF;

    border-radius: 3px;

    font-weight: 600;
}


/* =========================================================
   BLOQUES / CATEGORÍAS
   ========================================================= */

div.label_container {
    border: 1px solid var(--ensog-border);
    border-left: 4px solid var(--ensog-blue);

    background-color: #FFFFFF;

    border-radius: 4px;

    box-shadow:
        0 2px 5px rgba(38, 52, 61, 0.05);
}


span.label_title {
    color: var(--ensog-blue-dark);
}


span.label_description {
    border-top: 2px solid var(--ensog-gold);

    color: var(--ensog-text-muted);
}


/* =========================================================
   RUTAS DE APRENDIZAJE
   ========================================================= */

span.expand_path_info,
span.coursepath_percentage,
td.course_type {
    color: var(--ensog-blue);
}


div.coursepath_description {
    background-color: var(--ensog-blue-light);
}


div.percentage_cont {
    border-color: var(--ensog-border);

    background-color: #FFFFFF;

    border-radius: 3px;
}


div.coursepath_details {
    background-color: #FFFFFF;

    border-color: var(--ensog-border);

    border-top:
        3px solid var(--ensog-blue);
}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

p.section_title {
    color: var(--ensog-blue-dark);

    border-bottom:
        2px solid var(--ensog-gold);

    padding-bottom: 6px;
}


/* =========================================================
   PIE DEL LMS
   ========================================================= */

.layout_footer {
    background-color: var(--ensog-blue-light);

    border-top:
        2px solid var(--ensog-gold);

    color: var(--ensog-text-muted);
}


.layout_footer a,
.layout_footer .copyright,
.layout_footer .ownedby {
    color: var(--ensog-text-muted);
}


.layout_footer a:hover,
.layout_footer a:focus {
    color: var(--ensog-blue-dark);
}

/* =========================================================
   15. NAVEGACIÓN - MIS CURSOS
   ========================================================= */

/* Pestaña activa: EN LÍNEA */
.nav.nav-tabs.slider-menu--tabs > li.active > a,
.nav.nav-tabs.slider-menu--tabs > li.active > a:hover,
.nav.nav-tabs.slider-menu--tabs > li.active > a:focus {

    background:
        linear-gradient(
            135deg,
            var(--ensog-blue) 0%,
            var(--ensog-blue-dark) 100%
        ) !important;

    color: #FFFFFF !important;

    border: none !important;

    box-shadow:
        0 2px 5px rgba(38, 52, 61, 0.12);
}


/* Pestañas no activas */
.nav.nav-tabs.slider-menu--tabs > li > a {
    color: var(--ensog-blue-dark);
}


/* Hover en pestañas no activas */
.nav.nav-tabs.slider-menu--tabs > li:not(.active) > a:hover,
.nav.nav-tabs.slider-menu--tabs > li:not(.active) > a:focus {

    background-color: var(--ensog-blue-light);

    color: var(--ensog-blue-dark);
}


/* Línea del componente */
.nav.nav-tabs.slider-menu--tabs {
    border-bottom-color: var(--ensog-gold);
}

/* =========================================================
   16. TARJETAS DE CURSOS - MIS CURSOS
   ========================================================= */


/* ---------------------------------------------------------
   Tarjeta
   --------------------------------------------------------- */

.course-box {
    background-color: #FFFFFF;

    border: 1px solid var(--ensog-border);
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 2px 6px rgba(38, 52, 61, 0.07);

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease,
        border-color 0.20s ease;
}


/* Hover de tarjeta */

.course-box:hover {
    transform: translateY(-2px);

    border-color: var(--ensog-gold);

    box-shadow:
        0 6px 16px rgba(38, 52, 61, 0.12);
}


/* ---------------------------------------------------------
   Imagen / portada
   --------------------------------------------------------- */

.course-box__cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-bottom:
        3px solid var(--ensog-gold);
}


/* ---------------------------------------------------------
   Categoría
   --------------------------------------------------------- */

.course-box__category {
    display: inline-block;

    margin: 11px 12px 5px 12px;
    padding: 4px 9px;

    background-color: var(--ensog-blue-light);

    border-left:
        3px solid var(--ensog-gold);

    border-radius: 12px;

    color: var(--ensog-blue-dark);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;
}


/* ---------------------------------------------------------
   Título
   --------------------------------------------------------- */

.course-box__title {
    padding:
        10px 12px 8px 12px;

    color: var(--ensog-blue-dark);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   Descripción corta
   --------------------------------------------------------- */

.course-box__description {
    padding:
        4px 12px 10px 12px;

    color: var(--ensog-text-muted);

    font-size: 13px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Botón ENTRAR
   --------------------------------------------------------- */

.course-box .course-box__cta__button {
    background:
        linear-gradient(
            135deg,
            var(--ensog-blue) 0%,
            var(--ensog-blue-dark) 100%
        ) !important;

    color: #FFFFFF !important;

    border-color:
        var(--ensog-blue) !important;

    transition:
        background 0.20s ease;
}


/* Texto del botón */

.course-box
.course-box__cta__button
.forma-button__label {
    color: #FFFFFF !important;
}


/* Hover */

.course-box .course-box__cta__button:hover,
.course-box .course-box__cta__button:focus {

    background:
        linear-gradient(
            135deg,
            var(--ensog-blue-dark) 0%,
            #374C59 100%
        ) !important;

    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   Iconos superiores de la tarjeta
   --------------------------------------------------------- */

.course-box__header .course-box__icon {
    border-color:
        rgba(255, 255, 255, 0.75);
}


/* ---------------------------------------------------------
   Mejora de foco para accesibilidad
   --------------------------------------------------------- */

.course-box a:focus {
    outline:
        2px solid var(--ensog-gold);

    outline-offset: 2px;
}