/* Efecto hover: muestra la capa oscura y el icono al pasar el mouse */
.position-relative:hover label {
    opacity: 1 !important;
}



/* Vista general de usuarios 1  */

        .navigation__group {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .navigation__group .icon {
           cursor: pointer;
           width: 2.5rem;
           height: 2.5rem;
           background: white;
           padding: 0;
           border-radius: 50%;
           margin:0;
           /*transition: all 0.2s ease-in-out;*/
        }

        .navigation__group .icon:hover {
            /*transform: scale(1.1);*/
        }

        .profile__btn {
            background: none;
            color: inherit;  cursor:pointer;
            border: none;
            transition: all 0.2s ease-in-out;
        }

        .profile__btn:hover {
            transform: scale(1.1);
        }

        .profile__btn img, .profile__avatar {
            display: block;
            width: 3rem;
            height: 3rem;
            background: white;
            cursor: pointer;
            /*object-fit: cover;*/
            border-radius: 50%;
            border: 2px solid var(--primary-color);
        }

        .profile__wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .profile__info {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
         .profile__info p {
          font-family: "Font-Titulo";
          font-size: .9rem;
          margin-top: 0;
          margin-bottom: 0rem;
          font-weight: 700;
        }
        .profile__name {
            font-size: 1.15rem;
        }

        .profile__email {
            font-size: 0.95rem;
        }

        .dropdown__wrapper {
            width: 20%;
            /*height: 100%;*/
            top: 5rem;
            right: 1rem;
            padding: 1rem;
            position: absolute;
            border-radius: 0.75rem;
            background: var(--dropdown-bg);
            box-shadow: rgba(149, 157, 165, 0.2) 10px 10px 20px;
            display: flex;
            flex-direction: column;
            color: var(--text);
            gap: 0rem;
            animation: fadeOutAnimation ease-in-out 0.3s forwards;
        }

        .dropdown__wrapper--fade-in {

            /*z-index: 2000;*/
            background: var(--color-bg);
            animation: fadeInAnimation ease-in-out 0.3s forwards;
        }

        .plan {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0.5rem 0.25rem;
            align-items: center;
        }

        .plan__description {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .plan__description h2 {
            font-size: 1.15rem;
        }

        .upgrade-btn {
            background: var(--primary-light);
            color: var(--primary);
            padding: 0.75rem;
            border-radius: 0.5rem;
            max-height: 2.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid transparent;
            transition: all 0.2s ease-in-out;
        }

        .upgrade-btn:hover {
            border: 1px solid var(--primary);
        }

        .none {
            display: none;
        }

        .hide {
            opacity: 0;
            visibility: hidden;
            animation: fadeOutAnimation ease-in-out 0.3s forwards;
        }


        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
                visibility: hidden;
            }

            100% {
                opacity: 1;
                visibility: visible;
            }
        }

        @keyframes fadeOutAnimation {
            0% {
                opacity: 1;
                visibility: visible;
            }

            100% {
                opacity: 0;
                visibility: hidden;
            }
        }

        .divider {
            width: 100%;
            padding: 0;
            margin: 0.75rem 0;
            border: 1px solid var(--border);
        }


        .navigation_user > ul {
            /*background:red;*/
            /*list-style-type: none;*/
            padding: 0;
            margin: 0;
            gap: 0rem;
      
        }

        .navigation_user > ul > li {
            /*background:red;*/
            height: 0rem;
            z-index: 2000;
            color: var(--text);
            cursor: pointer;
            display: flex;
            flex-direction: row;
            border-radius: 0rem;
            padding-left: 0rem;
            width: 100%;
            font-weight: bold;
            transition: all 0.2s ease-in-out;

        }

        .navigation_user > ul > li a {
              color: var(--text);
              padding: 0rem;
              margin: 0rem 0rem  0rem  0rem;
        }
        
        .navigation_user > ul > li:hover {
            background: var(--primary-light);
            color: #9E1F47;
        }

        .logout-session > button {
           /* color: var(--text);
            padding-left: 0rem;*/
           background:transparent;
           cursor:pointer;
        }

       .logout-session > button a {
           color: var(--text);
           padding-left: 0rem;
           font-weight: bold;
       }

        .logout-session > button a:hover {
            background: var(--primary-light);
            color: #9E1F47;
        }





        /* Vista general de usuarios 2 ---------------------  */

          
        .navigation__group__inicio {
            display: flex;
            gap: 1rem;
            align-items: center;

  
        }
        
        .navigation__group__ferias {
            display: flex;
            gap: 1rem;
            align-items: center;
  
        }

        .navigation__group__ferias .icon {
            cursor: pointer;
            width: 2.2rem;
            height: 2.2rem;
            padding: 0.1rem;
            border-radius: 50%;
            transition: all 0.2s ease-in-out;
        }

        .navigation__group__ferias .icon:hover {
            transform: scale(1.1);
        }

        .profile__btn__ferias {
            background: none;
            color: inherit;
            border: none;
              cursor:pointer;
            transition: all 0.2s ease-in-out;
        }

        .profile__btn__inicio {
            background: none;
            color: inherit;
            border: none;
            transition: all 0.2s ease-in-out;
            cursor:pointer;
        }


        .profile__btn__ferias__inicio:hover {
            transform: scale(1.1);
        }

        
        /*#region STYLES VALIDATION */


        .validation-clasification-select {
            display: none;
        }

        .contenedor__otra__actividad {
            display: none;
        }

        .contenedor__poblacion__especifica {
            display: none;
        }

        .contenedor__otra__poblacion {
        display: none;
        }

        .contenedor__justificacion {
        display: none;
        }
        /*#endregion */

        .profile__btn__ferias img, .profile__avatar__ferias {
            display: block;
            width: 3.125rem;
            height: 3.125rem;
            cursor: pointer;
            object-fit: cover;
            border-radius: 50%;
        }

        .profile__wrapper__ferias {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .profile__info__ferias {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .profile__name__ferias {
            font-size: 1.15rem;
        }

        .profile__email__ferias {
            font-size: 0.95rem;
        }

        .dropdown__wrapper__ferias{
      
            width: 15rem;
            top: 5.25rem;
            right: 5rem;
            padding: 1rem;
            position: absolute;
            border-radius: 0.75rem;
            background: var(--dropdown-bg);
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            display: flex;
            flex-direction: column;
            color: var(--text);
            gap: 0.25rem;
            animation: fadeOutAnimation ease-in-out 0.3s forwards;
        }

        .dropdown__wrapper--fade-in__ferias {
            z-index: 2000;
            background: var(--color-bg);
            animation: fadeInAnimation ease-in-out 0.3s forwards;
        }

        .plan__ferias {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0.5rem 0.25rem;
            align-items: center;
        }

        .plan__description__ferias {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .plan__description__ferias h2 {
            font-size: 1.15rem;
        }

        .upgrade-btn {
            background: var(--primary-light);
            color: var(--primary);
            padding: 0.75rem;
            border-radius: 0.5rem;
            max-height: 2.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid transparent;
            transition: all 0.2s ease-in-out;
        }

        .upgrade-btn:hover {
            border: 1px solid var(--primary);
        }

        .none {
            display: none;
        }

        .hide {
            opacity: 0;
            visibility: hidden;
            animation: fadeOutAnimation ease-in-out 0.3s forwards;
        }


        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
                visibility: hidden;
            }

            100% {
                opacity: 1;
                visibility: visible;
            }
        }

        @keyframes fadeOutAnimation {
            0% {
                opacity: 1;
                visibility: visible;
            }

            100% {
                opacity: 0;
                visibility: hidden;
            }
        }

        .divider {
            width: 100%;
            padding: 0;
            margin: 0.75rem 0;
            border: 1px solid var(--border);
        }


        .navigation_user__ferias > ul {
       
            list-style-type: none;
            padding: 0;
            margin: 0;
            gap: 0.25rem;
      
        }

        .navigation_user__ferias > ul > li {
            height: 2rem;
            z-index: 2000;
            color: var(--text);
            cursor: pointer;
            display: flex;
            flex-direction: row;
            border-radius: 0.5rem;
            padding-left: 0.5rem;
            width: 100%;
            font-weight: bold;
            transition: all 0.2s ease-in-out;

        }

        .navigation_user__ferias > ul > li a {
              color: var(--text);
              padding-left: 0rem;
        }
        
        .navigation_user__ferias > ul > li:hover {
            background: var(--primary-light);
            color: #9E1F47;
        }

        .logout-session__ferias > button {
           /* color: var(--text);
            padding-left: 0rem;*/
           background:transparent;
           cursor:pointer;
        }

       .logout-session__ferias > button a {
           color: var(--text);
           padding-left: 0rem;
           font-weight: bold;
       }

        .logout-session__ferias > button a:hover {
            background: var(--primary-light);
            color: #9E1F47;
        }