header {
	#familia {
		display: flex; flex-direction: column; align-items: center;
		a {font-weight: bold; font-size: 1.35rem;}
		h4 {font-style: italic; font-weight: normal; font-size: 0.7rem;}
	}

	#secciones {
		font-size: 1.2rem;
		flex-grow: 1; justify-content: space-between;
		& > .resaltar {color: var(--amarilloClaro); font-weight: bold;}
	}

	#usuario {
		max-width: calc(0.7 * var(--altoHeader));
		max-height: calc(0.7 * var(--altoHeader));

		/* Login */
		#menuLogin {
			padding: 10px; align-items: center; gap: 10px;
			right: 0;
			&:has(#mensajeError:not(:empty)) {
				background-color: var(--rojoOscuro);
				#mensajeError {color: var(--grisClaro); text-align: center;font-style: italic; line-height: 1;}
				#iconos {display: none;}
			}
			input, #eye {font-size: 0.8rem;}
			input {
				width: 150px; padding-inline: 2px;
				text-align: center; color: var(--colorMain);
				border-radius: 5px; border-width: 1px;
			}
			#eye {
				top: 50%; right: 2px; translate: 0 -50%;
				color: var(--grisOscuro);
				cursor: pointer;
			}
			#iconos {
				width: 40%;
				display: flex; flex-direction: row; justify-content: space-between;
				i {
					font-size: 1rem; width: 1rem; cursor: pointer;
					&#altaOlvido {color: var(--colorMain);}
				}
			}
			a#videos {gap: 10px; align-self: flex-start;}
		}

		/* Logout */
		img#imagenUsuario {max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 50%;}
		#menuLogout {
			right: 0;
			font-size: 0.8rem;
			.menuOpcion {
				display: flex; flex-direction: row; align-items: center; gap: 10px;
			}
		}
	}
}