/*
 * Buscador del menu lateral (includes/menu.php).
 * Los colores siguen los del tema por defecto de la barra lateral (css/styles.css).
 */

#menu_buscador {
    position: relative;
    float: left;
    width: 100%;
    padding: 8px 10px;
    background: #272c40;
    border-bottom: 1px solid #292f43;
}

#menu_buscador .icon-magnifier {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -6px;
    color: #55698A;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

#menu_buscador_input {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 28px;
    background: #2D3349;
    border: 1px solid #3a4159;
    border-radius: 3px;
    color: #C5D1CD;
    font-size: 11px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
}

#menu_buscador_input::-webkit-input-placeholder { color: #55698A; }
#menu_buscador_input::-moz-placeholder { color: #55698A; }
#menu_buscador_input:-ms-input-placeholder { color: #55698A; }
#menu_buscador_input::placeholder { color: #55698A; }
#menu_buscador_input:focus { border-color: #06ff06; }

#menu_buscador_limpiar {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    background: none;
    border: 0;
    color: #55698A;
    font-size: 16px;
    cursor: pointer;
}

#menu_buscador_limpiar:hover { color: #C5D1CD; }

#menu_buscador_sin_resultados {
    display: none;
    float: left;
    width: 100%;
    padding: 12px 15px;
    color: #55698A;
    font-size: 11px;
    font-weight: 600;
}

/* Ocultamos los elementos que no casan con la busqueda sin tocar sus estilos en linea */
.app-navigation nav .buscador-oculto { display: none !important; }

/* En modo minimizado no hay sitio para la caja de busqueda */
.app-navigation-minimized #menu_buscador,
.app-navigation-minimized #menu_buscador_sin_resultados { display: none; }

/* Item de menu activo: toda la franja en naranja, para que se vea claro en que
   pantalla estas (en toda la plataforma). */
.app-navigation a.active {
    background: rgba(6, 255, 6, 0.2) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 rgba(6, 200, 6, 0.9);
}
.app-navigation a.active i-t { color: #fff !important; }
/* El recuadro del icono, con FONDO verde flúor y sus letras en negro. */
.app-navigation a.active .nav-icon-cube {
    background: #06FF06 !important;
    color: #000 !important;
    border-color: #06FF06 !important;
}
.app-navigation a.active .nav-icon-cube n-t { color: #000 !important; }

/* ---------------------------------------------------------------------------
   ÍTEMS DENTRO DE UN DESPLEGABLE (segundo nivel)
   ---------------------------------------------------------------------------
   El primer nivel es VERDE flúor; los hijos de un desplegable son NARANJA flúor,
   para distinguir de un vistazo en qué nivel estás.
   En reposo el icono va en naranja sobre fondo oscuro; al seleccionarlo se
   INVIERTE (igual que el verde): el cubo se rellena de naranja y la letra pasa a
   negro. Los hijos cuelgan de un <ul> anidado, por eso «nav ul ul a». */
.app-navigation nav ul ul a .nav-icon-cube {
    color: #FF9500 !important;
    border-color: rgba(255, 149, 0, 0.6) !important;
}
.app-navigation nav ul ul a .nav-icon-cube n-t { color: #FF9500 !important; }

/* Seleccionado: como el verde pero en naranja flúor (cubo relleno, letra negra). */
.app-navigation nav ul ul a.active {
    background: rgba(255, 149, 0, 0.22) !important;
    box-shadow: inset 3px 0 0 rgba(255, 149, 0, 0.95);
}
.app-navigation nav ul ul a.active .nav-icon-cube {
    background: #FF9500 !important;
    color: #000 !important;
    border-color: #FF9500 !important;
}
.app-navigation nav ul ul a.active .nav-icon-cube n-t { color: #000 !important; }