/*
Theme Name: Frontal FGULL - PHP8 V3009
Theme URI: http://www.fg.ull.es
Description: Plantilla para el site "Frontal FGULL" de la página web de la Universidad de La Laguna
Author: ULL
Author URI: http://www.ull.es
Template: base-ull
Version: 0.4
Jacob Celso Rodríguez Torres

*/

/*   2. VARIABLES / COLORES DE REFERENCIA  
Color corporativo FGULL: #5c068c
Color destacado: #c2185b
Color botones: #ad1457
Color separadores: #f0f0f0
*/


/* 3. HEADER / THINSTRIP */

.ull-thinstrip {
	background: #FFF !important;
}

.ull-thinstrip button.ull-search {
    border-right: solid 1px #f0f0f0;
    /* box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);*/
}
.ull-thinstrip .ull-menulink, .ull-thinstrip button.ull-search, .ull-thinstrip button.ull-menumobile {
	border-left: solid 1px #f0f0f0;
    /*box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);*/
}

.ull-thinstrip .fa{
    color: #444444;
}

/*   4. LOGOS */

.ull-thinstrip .ull-logo {
    display: block;
    text-indent: -9999px;
    width: 250px;
    height: 65px;
    background: url(assets/images/header-logo-fgull.png) no-repeat 0 transparent;
    background-size: 100%;
    margin-top: 15px;
    margin-left: 35px;
}

.fgull-wordmark {
    display: block;
    text-indent: -9999px;
    width: 253px;
    height: 46px;
    background: url(assets/images/logo-46.png) no-repeat 0 transparent;
    margin-top: 22px;
}


/*  5. MENÚ PRINCIPAL DESKTOP */
#ulldrops {
    background-color: #5c068c!important;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    color: #cbcbcb !important;
    font-weight: 800!important;
}

.ulldrops-item a {
    color:white!important;
}

.ull-search-bar-container .container-fluid {
    background: #5c068c;
}
.ulldrops-item.ulldrops-item li a{
    color:black!important;
}

.ulldrops-item.ulldrops-item li a:hover, .ulldrops-item.ulldrops-item li a:focus{
    color: #5c068c !important;
}

#ulldrops li:hover {
    border-bottom: solid 4px #5c068c;
}



/* Ajustes para el menú en mobile Logo*/
@media only screen and (max-width: 600px) {

	.fgull-wordmark {
	display: block;
	text-indent: -9999px;
	width: 190px;
	height: 40px;
	background: url(assets/images/logo-46.png) no-repeat 0 transparent;
	background-size:185px;
	margin-top: 5px;
	}

}
/* Ajustes para el menú en mobile*/

@media only screen and (max-width: 767px) {

    /* Cabecera móvil */
    .ull-thinstrip {
        height: 90px !important;
        min-height: 90px !important;
        background: #fff !important;
        overflow: visible !important;
    }
    .ull-thinstrip .ulldrops-inner {
        height: 90px !important;
        min-height: 90px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
    }
 
    .ull-thinstrip .ulldrops-inner.container-fluid {
        margin-top: 0 !important;
        height: 90px !important;
        min-height: 90px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
    }
    .ull-thinstrip .col-xs-8,
    .ull-thinstrip .col-xs-4 {
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        position: static !important;
    }

    .ull-thinstrip .pull-left,
    .ull-thinstrip .pull-right {
        float: none !important;
    }

    .fgull-wordmark {
        display: block !important;
        width: 230px !important;
        height: 55px !important;
        margin: 0 !important;
        background: url(assets/images/logo-46.png) no-repeat left center transparent !important;
        background-size: contain !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
    }

    #search-quicklinks {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 72px !important;
        margin: 0 !important;
    }

    .ull-thinstrip button.ull-search,
    .ull-thinstrip button.ull-menumobile {
        width: 48px !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-left: 1px solid #f0f0f0 !important;
        border-right: 0 !important;
        background: transparent !important;
        line-height: 1 !important;
    }

    .ull-thinstrip button.ull-search i,
    .ull-thinstrip button.ull-menumobile i {
        font-size: 22px !important;
        line-height: 1 !important;
        position: static !important;
        margin: 0 !important;
        color: #444 !important;
    }

    .ull-thinstrip button .fa-times {
        display: none !important;
    }

    .ull-thinstrip button.active .fa-search,
    .ull-thinstrip button.active .fa-bars,
    .ull-thinstrip button[aria-expanded="true"] .fa-search,
    .ull-thinstrip button[aria-expanded="true"] .fa-bars {
        display: none !important;
    }

    .ull-thinstrip button.active .fa-times,
    .ull-thinstrip button[aria-expanded="true"] .fa-times {
        display: inline-block !important;
    }
/* =========================================================
   MENÚ MÓVIL
   =========================================================
   Casos contemplados:
   1) Elementos con submenú real
      Ejemplo:

      <li class="menu-item-has-children">
          <a href="#">Noticias</a>
          <ul class="sub-menu">
              ...
          </ul>
      </li>

      => Mostrar "+"
      => Mostrar "−" cuando está desplegado

   2) Elementos externos sin submenú
      Ejemplo:

      <li class="menu-item-has-children">
          <a href="https://campus.fg.ull.es/">Campus Virtual</a>
      </li>

      => Mostrar "↗"

   Nota:
   Actualmente la plantilla genera la clase  "menu-item-has-children" incluso para algunos
   enlaces externos que realmente no tienen hijos.

   Por eso utilizamos :has(> ul.sub-menu) para detectar los que realmente tienen submenú.
   ========================================================= */

        /* Reservar espacio para iconos */
    .ull-mobile-menu li.menu-item-has-children > a {
        position: relative !important;
        padding-right: 40px !important;
    }

    /* -----------------------------------------------------
       ELEMENTOS CON SUBMENÚ REAL
       ----------------------------------------------------- */

    .ull-mobile-menu li.menu-item-has-children:has(> ul.sub-menu) > a::after {

        content: "+" !important;

        color: #c2185b !important;
        font-size: 22px !important;
        font-weight: bold !important;

        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        display: block !important;
    }

    /* Submenú abierto */

    .ull-mobile-menu li.menu-item-has-children.is-open:has(> ul.sub-menu) > a::after {
        content: "−" !important;
    }

    /* -----------------------------------------------------
       ENLACES EXTERNOS SIN SUBMENÚ
       ----------------------------------------------------- */

    .ull-mobile-menu li.menu-item-external > a {
        position: relative;
        padding-right: 40px;
    }

    .ull-mobile-menu li.menu-item-external > a::after {
        content: "↗";
        color: #c2185b;
        font-size: 20px;
        font-weight: 700;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
   
    /*     BUSCADOR MÓVIL     */
    .ull-search-bar-container {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ull-search-bar-container .container-fluid {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        text-align: center !important;
    }

    .ull-search-bar-container p,
    .ull-search-bar-container .search-title {
        margin-bottom: 14px !important;
        color: #fff !important;
        text-align: center !important;
    }

    .ull-search-bar-container label {
        color: #fff !important;
        margin: 0 10px !important;
        display: inline-block !important;
    }

      .ull-search-bar-container form {
        max-width: 430px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .ull-search-bar-container input[type="text"],
    .ull-search-bar-container input[type="search"] {
        flex: 1 1 auto !important;
        width: auto !important;
        height: 58px !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .ull-search-bar-container button,
    .ull-search-bar-container input[type="submit"] {
        width: 68px !important;
        height: 58px !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    
}

/*    8. SIDEBAR / MENÚ LATERAL
 Color Menu - Movil y Sidebar*/
ul.ull-sidebar-menu li.pagenav ul li a, 
ul.ull-mobile-menu li.pagenav ul li a, 
ul.ull-sidebar-menu > div ul li a, 
ul.ull-mobile-menu > div ul li a{
	color: #5c068c;
    font-weight: 450;
}

/* 9. PÁGINA  404 */

.contenido-error{
		padding-top: 50px;
		text-align: center;
}
.contenido-error h1{
	margin: 0px !important;
	color: #c2185b;
}

.btn.btn-return {
    color: white;
    background-color: #ad1457;
    border-color: #ad1457;
    border-radius: 0px;
    margin-bottom: 30px;
}

a.btn-return:hover {
  background: #c2185b;
  text-decoration: none !important;
}

/* 10. FOOTER */

.ull-footer {
    background-image: url(assets/images/fg-footer.png) !important ;
    background-size: cover;
    background-position: center;
}

.ull-footer .footer-wordmark {
    display: block;
    text-indent: -9999px;
    width: 270px;
    height: 65px;
    background: url(assets/images/logo-footer.png) no-repeat 0 transparent;
    background-size: 100%;
}