* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
	--colorPrincipal_1: #e9f3f5;
	--colorPrincipal_2: #d2e8ec;
	--colorPrincipal_3: #bcdce2;
	--colorPrincipal_4: #a5d0d8;
	--colorPrincipal_5: #8fc5cf;
	--colorPrincipal_6: #78b9c5;
	--colorSecundario_1: #d4e2e7;
	--colorSecundario_2: #a9c5cf;
	--colorSecundario_3: #7daab8;
	--colorSecundario_4: #4f8ea1;
	--colorSecundario_5: #00748b;
	--gris_1:#ededee;
	--gris_2:#dadbdc;
	--gris_3:#c8cacb;	
	--gris_4:#b5b8ba;	
	--gris_5:#a3a6a8;	
	/* Paleta basada en #78B9C5 */
	--color-base-1: #ECF7F9; /* claro */
	--color-base-2: #D9EEF2; /* medio-claro */
	--color-base-3: #9CD0D8; 
	--color-base-4: #78B9C5; 
	--color-base-5: #5896A0; 
}
html {	
	font-size: 10px;
}
body {
    font-family: 'Poppins', sans-serif;
    color: #1d3557;
}
header {
    background: linear-gradient(90deg, #00748B 0%, #118a8e 100%);
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
}
header .logo img {
    height: 40px;
}
.logo:hover{
    cursor: pointer;
  }
header .logo span {
    font-size: 2rem;
    font-weight: 600;
}
header .login_register_link {
    color: white;
}
.container_nav {
    display: flex;
    flex: 1;
    justify-content: space-between; /* Botones bien repartidos, sin tanto espacio extra */
    align-items: center;
}
.user_info {
    display: flex;
    width: 10%;
    align-items: center;
    gap: 10px;
    margin-left: 1rem;
    background-color: transparent;
    justify-content: end;
    align-items: center; /* 🔥 Centra verticalmente */
    gap: 8px; /* Espacio entre nombre y botón logout */
    height: 62px;
}
.user_info input{
    width: 25px;
    height: 25px;
}
.user_name {
  display: flex;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  width: 90%;
  background-color: transparent;
  margin-top: auto;
  margin-bottom: auto;
  align-items: center; /* 🔥 También centra dentro del span */
  justify-content: end;
}
.user_dropdown {
  display: inline-block;
  position: relative;
  background-color: transparent;
  height: fit-content;
}
.user_trigger {
  display: flex;
  align-items: center;
  background-color: transparent;
  color: white;
  cursor: pointer;
  height: 65px;
}
.user_trigger span{
  font-size: 1.4em;
  display: flex;
  align-items: center;
}
.user_submenu {
  display: none;
  position: absolute;
  right: 0;
  top: 99%;
  background-color: transparent;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 100;
  overflow: hidden;
  min-width: 160px;
}
.user_submenu button {
  width: 100%;
  padding: 10px;
  background-color: var(--colorSecundario_4);
  border: none;
  text-align: left;
  font-size: 1.4rem;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  color: white;
}
.user_submenu button:hover {
  background-color: var(--colorSecundario_5);
}

/* Mostrar el menú al pasar el cursor */
.user_dropdown:hover .user_submenu,
.user_submenu:hover {
  display: block;
}

.bt_logout {
    background-color: transparent;
    width: 10%;
  }

.bt_logout:hover {
    transform: scale(1.2); /* 🔥 Aumenta el tamaño al 120% */
}
.invisible{
    display: none;
}

/*----------RESPONSIVE MÓVIL-----------*/
@media (max-width: 1024px) {
  /* Logo: ocultar imagen, dejar solo el texto "databey" */
  .logo img { display: none; }
  #logo_span { display: inline; }
}