:root {

/******************* PALETA ***************/
--blanco-navbar:#FFFFFF;
--blanco-navbar-rgb:255,255,255;

--bs-tertiary-bg:#FFF;
--bs-tertiary-bg-rgb:255,255,255;/****paginacion admin**/

--fondo-blanco:#E8E8EA;
--fondo-blanco-rgb:232, 233, 234;
--fondo-blanco-light:#f8f9fa;


--color-azul:#453C60;
--color-azul-rgb:rgb(69, 60, 96);

--color-morado:#64566F;
--color-morado-rgb:rgb(100, 86, 111);

--color-morado-claro:#9E7B95;
--color-morado-claro-rgb:158, 123, 149;

--morado-login:#A16D94;
--morado-login-rgb:rgb(161, 109, 148);


--azul-oscuro:#2f3040;
--azul-oscuro-rgb:rgb(47, 48, 64);

--color-border-focus:#5aa7c1;
--color-border-focus-rgb:90, 167, 193;


--color-celeste-logo:#416D8E;
--color-celeste-logo-rgb:65, 109, 142;

--color-gris-texto:#6c757d;

--color-help-text:#5D5E67;



--color-card-info:#A0B6C7;


/****** PARA LOS BOTONES *************/


--color-btn-primary:#64566F;
--color-btn-primary-rgb:100, 86, 111;
--color-btn-primary-focus:#416D8E;
--color-btn-primary-focus-border:#5aa7c1;
--color-btn-primary-shadow:#2F3040;



/********* NAVBAR BRAND ************/
--color-brand-primary:var(--color-btn-primary);
--color-brand-hover:var(--color-morado);


/*****colores para el footer***/
--color-footer-azul:#2f3040;
--color-footer-azul-rgb:47, 48, 64;


--bs-primary: var(--color-footer-azul);
--bs-primary-rgb:var(--color-footer-azul-rgb);

--bs-white:var(--fondo-blanco);
--bs-white-rgb:232, 232, 234;

--bs-light:#f8f9fa;
--bs-light-rgb: 248, 249, 250;


/************ FUENTE ***********************/
--bs-body-font-family: "AR one sans","Aclonica","sans-serif";


/********* GRADIENTES **************/
--gradiente-morado:linear-gradient(135deg, var(--color-morado-rgb) 0%, var(--morado-login-rgb) 100%);

--gradiente-blanco:linear-gradient(135deg, var(--blanco-navbar) 0%, var(--fondo-blanco) 100%);


--gradiente-hero-section:var(--gradiente-morado);

--gradiente-login:var(--gradiente-morado);

--gradiente-hero-title:linear-gradient(45deg,var(--color-morado) 0%, var(--color-azul) 100%);

/* --gradiente-btn-index:linear-gradient(45deg, var(--color-celeste-logo) 0%, var(--color-morado-claro) 40%); */
--gradiente-btn-index:linear-gradient(45deg, var(--morado-login) 0%, var(--color-morado-claro) 40%);

--gradiente-contenedor-central:linear-gradient(45deg, var(--color-celeste-logo) 0%, var(--color-morado-claro) 100%);

--gradiente-btn-index-hover:linear-gradient(45deg, var(--color-border-focus) 0%, var(--color-celeste-logo) 40%);

}



.body{
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--fondo-blanco);
  overflow-x: hidden;
}



/************ NAV BAR ******************************/
.contenedornavBar{
    width: 100%;
    top: 0;
    z-index: 5;
    background-color: var(--blanco-navbar);
    position: relative;
    /* font-family: "AR one sans", "sans-serif"; */
    
}

header{
    position: sticky;
    top: 0;
    z-index: 6;
}

.navbar{
    height: 100%;
}

/* .navbar-brand {
    --bs-navbar-brand-color:var(--color-brand-primary);
    font-family: "AR one sans", "sans-serif";
}

.navbar-brand:hover {
    font-weight: 700!important;
    color: var(--color-brand-hover)!important;
} */


.navbar-brand img{
    height: 8vh;
    border-radius: 15px;

}

.imgProfile{
    height: 6vh;
}




/*
.navbar-collapse {
    flex-basis: content; 
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
}

.navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    justify-content: flex-end;
}

.navbar-nav{
    margin-left: 10px;
}


.navbar-expand-lg .navbar-nav .dropdown-menu {   /*  FUERZA EL TAMAÑO Y LA POSICION DEL DROPMENU LOGIN
    position: absolute;
    right: -11px;
    left: auto; 
}


.dropdown-login{   /*  FUERZA EL TAMAÑO Y LA POSICION DEL DROPMENU LOGIN
    position: absolute;
    right: -11px;
    left: auto; 
    width: fit-content;
}*/

/* Asegúrate de que el contenedor del menú desplegable tenga posición relativa */
.navbar-nav .nav-item {
  position: relative;
}


.dropdown-login {
    width: fit-content !important;
}

.nav-link{
    cursor: pointer;
}

.nav-link-active{
    font-weight: 700 !important;
    border-bottom: 3px solid var(--morado-login);
}

.nav-link-border:hover, .nav-link-border:focus{
    font-weight: 700 !important;
    border-bottom: 3px solid var(--morado-login);
    color:var(--color-azul);
}

.dropdown-item:hover, .dropdown-item:focus{
    background: var(--fondo-blanco);
}


/****** INDEX *****/
/**************CSS PARA EL INDEX******************************************/


.hero-section {

    background: var(--gradiente-hero-section);

    min-height: 400px;
    min-width: 100%;

}

.hero-section {
    /* Fondo degradado mejorado */
    background: linear-gradient(135deg, var(--color-morado-rgb) 10%, var(--morado-login-rgb) 90%);
    position: relative;
    overflow: hidden;
    
}

.hs-200{
    min-height: 200px!important;
}




/* /* Estado inicial de la animación 
.hero-section.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estado final al activar la animación 
.hero-section.animate.visible {
    opacity: 1;
    transform: translateY(0);
} */


.hero-title {
    font-size: 2.5rem;
    font-weight: 300;

    line-height: 1.2;
    background: var(--gradiente-hero-title);
    background-clip: text; /* Valor estándar */
    -webkit-background-clip: text; /* Prefijo para WebKit (Safari, Chrome) */
    -moz-background-clip: text; /* Prefijo para Mozilla (Firefox) */
    -ms-background-clip: text; /* Prefijo para Microsoft (IE, Edge) */
    -o-background-clip: text; /* Prefijo para Opera */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.hero-buttons .btn {
    padding: 0.8rem 2rem;
    font-weight: 500;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-index {
    background: var(--gradiente-btn-index);
    border: none;
    box-shadow: 0 5px 15px rgba(47, 48, 64,0.2);
}

.btn-index:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(47, 48, 64,0.3);
    color:var(--fondo-blanco)!important;
    background: var(--gradiente-btn-index-hover);
}

.hero-title-blanco {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    background: var(--gradiente-blanco);
    background-clip: text; /* Valor estándar */
    -webkit-background-clip: text; /* Prefijo para WebKit (Safari, Chrome) */
    -moz-background-clip: text; /* Prefijo para Mozilla (Firefox) */
    -ms-background-clip: text; /* Prefijo para Microsoft (IE, Edge) */
    -o-background-clip: text; /* Prefijo para Opera */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-gris-texto);
    /* margin-bottom: 2rem; */
    line-height: 1.6;
    font-weight: 300;
}


.hero-subtitleB {
    font-size: 1.25rem;
    color: var(--fondo-blanco);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-titleB {
    font-size: 2.5rem;
    font-weight: 300;
    /* margin-bottom: 1.5rem; */
    line-height: 1.2;

    background: rgb(232,232,234);
    background: -moz-linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    background: linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e8e8ea",endColorstr="#ede9ce",GradientType=1);

    background-clip: text; /* Valor estándar */
    -webkit-background-clip: text; /* Prefijo para WebKit (Safari, Chrome) */
    -moz-background-clip: text; /* Prefijo para Mozilla (Firefox) */
    -ms-background-clip: text; /* Prefijo para Microsoft (IE, Edge) */
    -o-background-clip: text; /* Prefijo para Opera */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}


.hero-titleSmall {
    font-size: 1.5rem;
    font-weight: 300;
    /* margin-bottom: 1.5rem; */
    line-height: 1.2;
    background: var(--gradiente-hero-title);
    background-clip: text; /* Valor estándar */
    -webkit-background-clip: text; /* Prefijo para WebKit (Safari, Chrome) */
    -moz-background-clip: text; /* Prefijo para Mozilla (Firefox) */
    -ms-background-clip: text; /* Prefijo para Microsoft (IE, Edge) */
    -o-background-clip: text; /* Prefijo para Opera */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

/*** ESTILOS TEXTOS *********/
.texto-blanco{
    background: var(--gradiente-blanco);
    background-clip: text; /* Valor estándar */
    -webkit-background-clip: text; /* Prefijo para WebKit (Safari, Chrome) */
    -moz-background-clip: text; /* Prefijo para Mozilla (Firefox) */
    -ms-background-clip: text; /* Prefijo para Microsoft (IE, Edge) */
    -o-background-clip: text; /* Prefijo para Opera */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.texto-gris{
    color: var(--color-gris-texto);
    word-wrap: normal;
}

.texto-strong{
    font-size: xx-large;
    font-weight: bold;
}

.texto-b{
    font-size: larger;
    font-weight: bold;
}

.texto-linea{
    white-space: nowrap;
}

.texto-morado{
    color:var(--color-morado);
}





/* ESTILOS MAIN */
.contenedorMain{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 51vh;
    background:var(--fondo-blanco);

/*     background: rgb(90,167,193);
    background: -moz-linear-gradient(135deg, rgba(90,167,193,1) 0%, rgba(175,131,158,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(90,167,193,1) 0%, rgba(175,131,158,1) 100%);
    background: linear-gradient(135deg, rgba(90,167,193,1) 0%, rgba(175,131,158,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5aa7c1",endColorstr="#af839e",GradientType=1); */
    
}

.contenedorMorado{
    background:var(--gradiente-morado);
    width: 100%;
    min-height: 51vh;
}


/* ESTILOS BLOQUE */
.contenedorCabecera{

    width: 100%;
    padding: 1em;
    justify-items: center;
    text-align: center;

}

.contenedorCabeceraMorado{

    width: 100%;
    padding: 1em;
    justify-items: center;
    text-align: center;
    background: var(--gradiente-morado);

}

.contenedorForm{

    width: 100%;
    padding: 1em;
    justify-items: flex-start;
    margin-top: 0px;
    padding-top: 0px;
}

.form-group{
    padding: 0.5em;
}

.errorForm{
    color: red;
    font-size: smaller;
}

.errorlist{
    margin-top: 1em;
    list-style: None;
    font-size: smaller;
    color: red;
}




/* PRUEBAS PARA ERROR PAGE */
.contenedorTitulos{
    width: 100%;
    padding: 1em;
    justify-items: center;
    padding-bottom: 0px;
    display: grid;

}


.contenedorSeccion{
    
    width: 100%;
    padding: 3em;
    display: grid;
    justify-items: center;
    background-color: var(--color-border);
    /** GRADIENTE BLANCO **/
    background: rgb(232,232,234);
    background: -moz-linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    background: linear-gradient(135deg, rgba(232,232,234,1) 0%, rgba(237,233,206,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e8e8ea",endColorstr="#ede9ce",GradientType=1);
}

.contenedorSeccionSinFondo{
    
    width: 100%;
  /*   padding: 3em; */
    display: grid;
    justify-items: center;
}

.contenedorSeccionSinFondo img{
    
max-width: 300px;
}




.image-attribution {
    display: block; /* Coloca el texto en una nueva línea */
    font-size: 0.5rem; /* Reduce el tamaño del texto */
    color: #555; /* Color más suave para el texto */
    margin-top: 5px; /* Espacio entre la imagen y la atribución */
    text-decoration: none; /* Elimina el subrayado del enlace */

    /*position: absolute;    /* Permite posicionarla en relación al contenedor */
    /*bottom: 0;             /* Pegada a la parte inferior */
    /*left: 0;               /* Pegada al lado izquierdo */
    width: 100%;           /* Abarca el ancho de la imagen */
    /*background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para contraste */
    text-align: center;    /* Centra el texto horizontalmente */
    /*padding: 5px 0;        /* Espaciado alrededor del texto */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
}

.image-attribution:hover {
    text-decoration: underline; /* Subrayado solo al pasar el cursor */
}





.contenedorFB{

    background-color: var(--fondo-blanco);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--fondo-blanco), var(--bs-bg-opacity)) !important;
    width: 100%;

    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;

    min-height: 400px;
}


.contenedorFM{

    background: var(--gradiente-morado);
    --bs-bg-opacity: 1;
    /* background: rgba(var(--gradiente-morado), var(--bs-bg-opacity)) !important; */
    width: 100%;

    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;

    min-height: 400px;
}


.contenedorFB a{
    margin:2em;

}

.contenedorFB button{
    font-size:larger;
}


.link-unstyled{
    text-decoration: none;
    color: inherit; /* Adopta el color del elemento padre */
    cursor: pointer; /* Asegura que siga teniendo el cursor de enlace */
}










footer{
    width: 100%;
    background-color: var(--color-footer-azul); 
    color:var(--fondo-blanco);
    /**** para perfil_usuario ***/
    z-index: 1;
    position: relative;
    margin-bottom: 0;
    margin-top: auto;

}

footer a{
    text-decoration: none;
}

footer  a:hover {
    text-decoration: underline;
  }

.falink:hover {
    font-weight: 900;
  }


.btn {
    --bs-btn-color: var(--color-azul);
    --bs-btn-border-color: var(--color-btn-primary);
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}



  .btn-primary {
    --bs-btn-color:  var(--fondo-blanco);
    --bs-btn-bg: var(--color-btn-primary);
    --bs-btn-border-color:  var(--color-btn-primary);
    --bs-btn-hover-color:  var(--fondo-blanco);
    --bs-btn-hover-bg:  var(--color-btn-primary-focus);
    --bs-btn-hover-border-color: var(--color-btn-primary-border);
    --bs-btn-focus-shadow-rgb: var(--color-border-focus-rgb);
    --bs-btn-active-color:  var(--fondo-blanco);
    --bs-btn-active-bg: var(--color-btn-primary-focus);
    --bs-btn-active-border-color: var(--color-btn-primary-border);
    --bs-btn-active-shadow: inset 0 3px 5px var(--color-btn-primary-shadow);

}


.btn-secondary {
    --bs-btn-color:  var(--fondo-blanco);
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color:  var(--fondo-blanco);
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color:  var(--fondo-blanco);
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color:  var(--fondo-blanco);
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-outline-success {
    --bs-btn-color: var(--color-btn-primary);
    --bs-btn-border-color: var(--color-btn-primary);
    --bs-btn-hover-color: var(--fondo-blanco);
    --bs-btn-hover-bg: var(--color-btn-primary);
    --bs-btn-hover-border-color: var(--color-btn-primary);
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: var(--fondo-blanco);
    --bs-btn-active-bg: var(--color-btn-primary);
    --bs-btn-active-border-color: var(--color-btn-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-btn-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-btn-primary);
    --bs-gradient: none;
}


.btn-light {
    --bs-btn-color:var(--azul-oscuro);
    --bs-btn-bg: var(--fondo-blanco);
    --bs-btn-border-color: var(--fondo-blanco);
    --bs-btn-hover-color:var(--fondo-blanco);
    --bs-btn-hover-bg: var(--color-celeste-logo);
    --bs-btn-hover-border-color: var(--color-border-focus);
    --bs-btn-focus-shadow-rgb:var(--color-border-focus-rgb);
    --bs-btn-active-color: var(--azul-oscuro);
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--azul-oscuro);
    --bs-btn-disabled-bg: var(--fondo-blanco);
    --bs-btn-disabled-border-color: var(--fondo-blanco);
}


.btn-outline-light {
    --bs-btn-color: var(--fondo-blanco);
    --bs-btn-border-color: var(--fondo-blanco);
    --bs-btn-hover-color:  var(--color-celeste-logo);
    --bs-btn-hover-bg: var(--fondo-blanco);
    --bs-btn-hover-border-color: var(--color-celeste-logo);
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color:  var(--fondo-blanco);
    --bs-btn-active-bg: var(--color-celeste-logo);
    --bs-btn-active-border-color:  var(--color-celeste-logo);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

.btn-danger{
    --bs-btn-color: var(--fondo-blanco);
}

/* Media query para moviles  Eliminamos el boton registrarse del navBar*/
@media (max-width: 375px) {
/*     .ocultar-navbar{
        display:none;
    } */
}


@media (max-width: 425px) {
/*     .row-navbar>*{
        width: auto !important;
    } */
    .navbar-brand img {
        height: 7vh;
    }
}

@media (max-width: 991px) {
    .dropdown-login {
      position: absolute !important;
      top: 100% !important;
      left: auto !important;
      right: 0 !important;
      transform: none !important;
    }
  }